feat: new styles

desktop.gltm

@@ -1,207 +1,209 @@
 // =============================================================================
-// GLINT UI: Ultimate Reactive Showcase Architecture
+// GLINT UI: Compact Reactive Test Suite (Fixed Layout)
 // =============================================================================
 
 @version 1
 @style "main.glts"
 
-// ── 1. Global Configuration & Constants ──────────────────────────────────────
-
-@global $APP_TITLE    = "Glint Design System & Rhei Demo"
-@global $IS_PRODUCTION = false
-
-// Глобальное состояние приложения
-@global $access_level = 3.0
-@global $username     = "Guest"
-@global $volume_level = 0.0
-@global $is_enabled   = false
-@global $search_query = "Type to search..."
-@global $team_members = ["Alexander", "Beatrice", "Cyrus", "Diana"]
+// ── 1. Global Application State ──────────────────────────────────────────────
+@global $APP_TITLE = "Glint Core Console"
+@global $username = "Operator"
+@global $volume_level = 50.0
+@global $is_enabled = true
+@global $access_level = 5.0
+@global $team_nodes = ["Alpha", "Bravo", "Charlie"]
+@global $show_toast = true
 
 @singleton SystemSettings {
-    theme        = "ocean-blue",
+    theme = "ocean-blue",
     refresh_rate = 60,
-    debug_mode   = true,
+    debug_mode = true,
     storage_path = fs:/var/lib/glint/assets
 }
 
-// ── 2. Logic Layer (Document-level Rhai Script) ──────────────────────────────
-
-!rhei: { 
-    // Вспомогательные UI-функции
-    fn level_label(lvl) {
-        if lvl >= 8.0 { "Admin" }
-        else if lvl >= 5.0 { "Moderator" }
-        else { "Guest" }
+!rhei: {
+    fn load_status(val) {
+        if val == 0.0 { "💤 Muted" }
+        else if val >= 80.0 { "🔥 Overload" }
+        else { "⚡ Active" }
     }
 
-    fn volume_icon(vol) {
-        if vol == 0.0  { "🔇" }
-        else if vol < 40.0 { "🔈" }
-        else if vol < 75.0 { "🔉" }
-        else { "🔊" }
-    }
-
-    // Демонстрация сложных вычислений при загрузке документа
-    const TARGET = 20;
-    fn fib(n) {
-        if n < 2 { return n; }
-        let a = 0; let b = 1;
-        for i in 2..=n {
-            let c = a + b;
-            a = b; b = c;
-        }
-        b
-    }
-    
-    print(`Initializing Glint Engine...`);
-    let result = fib(TARGET);
-    print(`Fibonacci(${TARGET}) computed on load: ${result}`);
+    let sum = 0;
+    for i in 1..=5 { sum = sum + i; }
+    print("Rhai Engine online. Checksum: " + sum);
 }
 
-// ── 3. UI Components ─────────────────────────────────────────────────────────
-
-@component ProfileCard(username: String, access_level: Float) {
-    Panel {
-        Header !rhei: { "User: " + username }
-        Label(text=$username)
-        
-        // Сложное условие в Rhai: вычисляется при каждом обновлении VDOM
-        @if !rhei: { (access_level >= 5.0) && (username.len() > 0) } {
-            Text "✅ Administrator Privileges Active"
-            Text !rhei: { "Role: " + level_label(access_level) }
+// ── 2. Reusable UI Components ────────────────────────────────────────────────
+@component NodeCard(nodename: String, level: Float) {
+    Panel(class="ui-card") {
+        Label(text=$nodename)
+        @if !rhei: { level >= 5.0 } {
+            Text "🛡️ Secure Node"
         } @else {
-            Text "🔒 Restricted Access Mode"
-            Text "Role: Guest"
+            Text "🔓 Guest Node"
         }
     }
 }
 
-// ── 4. Main Application Tree ─────────────────────────────────────────────────
+// ── 3. Application Layout Tree ───────────────────────────────────────────────
+Window(title=$APP_TITLE, width=1024, height=720) {
+    Panel(class="sticky-header") {
+    	Header "Glint Compiler/Runtime Demostration"
+    }
+    Panel(class="layout-viewport") {
 
-Window(
-    title=$APP_TITLE, 
-    width=1280, 
-    height=800, 
-    resizable=true
-) {
-    // Локальное состояние окна
-    @let $show_metrics = true
-
-    Panel(id="main_viewport", padding=24) {
-        
-        Header "Dashboard Overview"
-        Text "Welcome to the ultimate Glint component test suite."
-        Divider()
-        
-        // ── Секция A: Control Panel (Переменные и биндинги) ──────────────────
-        Header "A. Control Panel & State Bindings"
-
-	Image(src=fs:/home/faynot/elyz/software/glt/logo.png) {}
-        
-        Panel {
-            Input(placeholder=$search_query, value=$search_query)
-            Toggle(label="Enable Live Metrics", value=$is_enabled)
-            Text !rhei: { "Live search query: " + search_query }
-        }
-
-        @if $is_enabled {
-            Text "✅ Features are ON. You can adjust the system."
-        } @else {
-            Text "⛔ Features are OFF."
-        }
-        
-        Divider()
-
-        // ── Секция B: Arithmetic Conditions & Reactive Text ──────────────────
-        Header "B. Rhei Arithmetic Conditions"
-        
-        Slider(value=$volume_level)
-        ProgressBar(value=$volume_level)
-        
-        // Трехуровневое ветвление с использованием Rhai-условий
-        @if !rhei: { volume_level == 0.0 } {
-            Text "🔇 Muted"
-        } @else {
-            @if !rhei: { volume_level >= 75.0 } {
-                Text "🔊 High volume — protect your hearing!"
-            } @else {
-                // Инлайн-текст, вызывающий функцию из глобального скрипта
-                Text !rhei: { volume_icon(volume_level) + " Volume OK: " + volume_level + " / 100" }
+        // --- Верхняя панель (Header Section) ---
+        Panel(class="layout-row") {
+            Image(src=fs:/home/faynot/elyz/software/glt/logo.png) {}
+            Panel(class="layout-col") {
+                Header "Glint Reactive Dashboard"
+                Text !rhei: { "User: " + username + " | Status: " + load_status(volume_level) }
             }
         }
-        
+
         Divider()
 
-        // ── Секция C: Access Control & Component Instantiation ───────────────
-        Header "C. Multi-variable Logic & Components"
-        
-        Slider(value=$access_level)
-        
-        !rhei: { "Current slider level: " + access_level + " → " + level_label(access_level) }
-        
-        Panel {
-            Button(label="Grant Admin (Level 9)") {
-                @on click {
-                    !rhei: { access_level = 9.0; }
+        // --- Главная рабочая область (Workspace Split) ---
+        Panel(class="layout-row") {
+
+            // Левая колонка: Интерактивное состояние и биндинги
+            Panel(class="layout-col") {
+                Panel(class="ui-card") {
+                    Header "State Bindings"
+                    Input(placeholder="Change title...", value=$APP_TITLE)
+                    Toggle(label="Live Engine", value=$is_enabled)
+
+                    @if $is_enabled {
+                        Text "🟢 System: ONLINE"
+                    } @else {
+                        Text "🔴 System: OFFLINE"
+                    }
+                }
+
+                Panel(class="ui-card") {
+                    Header "Control Channels"
+                    Slider(value=$volume_level)
+                    ProgressBar(value=$volume_level)
+                    Text !rhei: { "Metrics Level: " + volume_level + "%" }
                 }
             }
-            Button(label="Reset (Level 1)") {
-                @on click {
-                    !rhei: { access_level = 1.0; }
+
+            // Правая колонка: Тестирование геометрии и каскада стилей
+            Panel(class="layout-col") {
+                Panel(class="geometry-box") {
+                    Header "Box Model Geometry"
+                    Text "Asymmetric padding layout container."
+                    Panel(class="margin-test-item") {
+                        Text "Margin-Top Spacer Box"
+                    }
                 }
-            }
-        }
 
-        @if !rhei: {
-            let threshold = 5.0;
-            access_level >= threshold
-        } {
-            Text "🛡️ Access granted — Privileged Zone"
-            ProfileCard(username=$username, access_level=$access_level)
-        } @else {
-            Text "🚫 Access denied — Raise your level to 5+"
-        }
-        
-        Divider()
+                Panel(class="inheritance-box") {
+                    Text "Inherited Yellow Color & 18px Font Size"
+                    Text(class="override-style") "Explicit Style Override (Pink, 12px)"
+                }
 
-        // ── Секция D: Dynamic List Rendering (@each) ─────────────────────────
-        Header "D. Team Management (Reactive Grid)"
-        
-        // Передаем direction и columns как свойства компонента
-        Panel(columns=2, direction="grid") {
-            @each $name in $team_members {
-                Panel {
-                    ProfileCard(username=$name, access_level=$access_level) 
-                    
-                    Button(label="Promote System-wide") {
-                        @on click {
-                            !rhei: { 
-                                // VDOM автоматически заменит "$name" на "Alexander", "Beatrice" и т.д.
-                                let target_name = "$name"; 
-                                print("Promoting triggered by " + target_name);
-                                
-                                if access_level < 10.0 {
-                                    access_level += 1.0;
-                                }
-                            }
+                // Управление уровнем доступа и изменение переменных по клику
+                Panel(class="ui-card") {
+                    Header "Access Management"
+                    Slider(value=$access_level)
+
+                    // ── ТЕСТ POSITION: ABSOLUTE ─────────────────────
+                    Panel(class="abs-demo-container") {
+                        Panel(class="abs-demo-badge") {
+                            Text "ABSOLUTE!"
+                        }
+                        Text "(бадж спозиционирован абсолютно)"
+                        Button(label="Press me") {}
+                    }
+
+                    Panel(class="layout-row") {
+                        Button(label="Set Admin (Lvl 9)", class="btn-custom") {
+                            @on click { !rhei: { access_level = 9.0; } }
+                        }
+                        Button(label="Reset Access") {
+                            @on click { !rhei: { access_level = 1.0; } }
                         }
                     }
                 }
             }
         }
 
-        Divider()
+        // --- Динамический список узлов (@each Grid) ---
+        Panel(direction="grid", columns=3, gap=12, class="layout-clean") {
+            @each $node in $team_nodes {
+                NodeCard(nodename=$node, level=$access_level)
+            }
+        }
 
-        // ── Секция E: Footer Metadata ────────────────────────────────────────
-        Panel {
-            Text "System Version: 1.0.5-stable"
-            
-            // Многострочный скрипт прямо внутри текстового узла
-            !rhei: { 
-                let pct = (access_level * 10.0).to_string();
-                "Access Power: " + pct + "% | Integrity: OK"
+        // --- Нижняя панель распределения пространства ---
+        Panel(class="flex-row-bar") {
+            Panel(class="fill-10") { Text "Grow 10%" }
+            Panel(class="fixed-120") { Text "Fixed 120px" }
+            Panel(class="fill-20") { Text "Grow 20%" }
+        }
+    }
+
+    // ── ТЕСТ ФИКСИРОВАННЫХ СЛОЕВ ───────────────────
+    @if $show_toast {
+        Panel(class="fixed-toast") {
+            Panel(class="layout-row") {
+                Text "🔔 [FIXED LAYER TEST]: Runtime compiled successfully!"
+                Button(label="❌", class="btn-close") {
+                    @on click { !rhei: { show_toast = false; } }
+                }
             }
         }
     }
+
+    Panel(class="scroll-test-box") {
+    Header "Scroll Test"
+    Text "Line 1: Item A"
+    Text "Line 2: Item B"
+    Text "Line 3: Item C"
+    Text "Line 4: Item D"
+    Text "Line 5: Item E"
+    Text "Line 6: Item F"
+    Text "Line 7: Item G"
+    Text "Line 8: Item H"
+    Text "Line 9: Item I"
+    Text "Line 10: Item J"
+}
+
+    // ── ДЕМО POSITION: ABSOLUTE (Overlay-карточка) ────────────────────
+    Panel(class="absolute-demo-section") {
+        Header "Position: Absolute Demo"
+        Panel(class="abs-stage") {
+            Panel(class="abs-overlay") {
+                Text "🎯 Абсолютно спозиционирована!"
+                Text "top: 10px | right: 10px"
+            }
+            Text "Этот текст — часть нормального потока."
+            Text "Оверлей лежит поверх, не влияя на раскладку."
+            Text "Работает как position: absolute в CSS."
+        }
+    }
+
+Panel(class="sticky-container") {
+        Text "Scroll down to test sticky effect (внутренний скролл):"
+
+        // Стикер внутри скролл-контейнера
+        Panel(class="sticky-header") {
+            Text "📌 STICKY: я прилип к верху!"
+        }
+
+        // Большой блок текста снизу, чтобы гарантировать появление скролла
+        Panel(class="scroll-spacer") {
+            Text "Item 1: Лорем ипсум долор сит амет..."
+            Text "Item 2: Консектетур адипискинг элит."
+            Text "Item 3: Сед до эйусмод темпор."
+            Text "Item 4: Инсидидунт ут лаборе."
+            Text "Item 5: Долоре магна аликва."
+            Text "Item 6: Ут enim ад миним veniam."
+            Text "Item 7: Квис нострум экзерситатион."
+            Text "Item 8: Уллаmко лаборис ниси ут."
+            Text "Item 9: Аликип экс иа коммодо."
+            Text "— Конец тестового контента —"
+        }
+    }
 }