feat: reactivityl; vdom; rhei; styles; fs; image element

desktop.gltm

@@ -0,0 +1,207 @@
+// =============================================================================
+// GLINT UI: Ultimate Reactive Showcase Architecture
+// =============================================================================
+
+@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"]
+
+@singleton SystemSettings {
+    theme        = "ocean-blue",
+    refresh_rate = 60,
+    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" }
+    }
+
+    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}`);
+}
+
+// ── 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) }
+        } @else {
+            Text "🔒 Restricted Access Mode"
+            Text "Role: Guest"
+        }
+    }
+}
+
+// ── 4. Main Application Tree ─────────────────────────────────────────────────
+
+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" }
+            }
+        }
+        
+        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; }
+                }
+            }
+            Button(label="Reset (Level 1)") {
+                @on click {
+                    !rhei: { access_level = 1.0; }
+                }
+            }
+        }
+
+        @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()
+
+        // ── Секция 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;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        Divider()
+
+        // ── Секция 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"
+            }
+        }
+    }
+}