Glint-Runtime/examples/demo/app.gltm

// ============================================================================
// Glint System Monitor — Full Feature Demonstration
// ============================================================================
// Showcases: @global, @singleton, !rhei:, @component, @if/@else, @each,
// @on click, variable binding, positioning (fixed, absolute, sticky),
// typography, box model, opacity, overflow, grid layout, style inheritance.
// ============================================================================

@version 1
@style "styles.glts"

// ── 1. Global State ──────────────────────────────────────────────────────────
@global $title   = "System Monitor"
@global $user    = "admin"
@global $cpu     = 23.0
@global $memory  = 47.0
@global $online  = true
@global $alert   = 70.0
@global $nodes   = ["Alpha", "Bravo", "Charlie", "Delta"]
@global $notif   = true

@singleton AppInfo {
    build = "2026-07-22",
    mode  = "release"
}

!rhei: {
    fn pct(v) { v + "%" }
    fn label(v) {
        if      v >= 80.0 { "Critical" }
        else if v >= 50.0 { "Elevated" }
        else              { "Normal"   }
    }
    print("[Monitor] " + nodes.len() + " node channels allocated.");
}

// ── 2. Components ────────────────────────────────────────────────────────────
@component Gauge(name: String, val: Float) {
    Panel(class="gauge") {
        Panel(class="gauge-row") {
            Text(text=$name)
            Text !rhei: { pct(val) }
        }
        ProgressBar(value=$val)
        Text(class="gauge-label") !rhei: { label(val) }
    }
}

@component NodeTile(tag: String, active: Bool) {
    Panel(class="tile") {
        Panel(class="tile-row") {
            Icon "🖥"
            Text(text=$tag)
        }
        @if $active {
            Text(class="tag-on") "● Online"
        } @else {
            Text(class="tag-off") "○ Offline"
        }
    }
}

// ── 3. Layout ────────────────────────────────────────────────────────────────
Window(title=$title) {

    // ── Sticky Header ────────────────────────────────────────────────────────
    Panel(class="header") {
        Panel(class="header-inner") {
            Icon "⚙"
            Header "Glint Monitor"
            Panel(width="fill")
            Text !rhei: { "👤 " + user }
        }
    }

    Panel(class="body") {

        // ── LEFT COLUMN ──────────────────────────────────────────────────────
        Panel(class="col-left") {

            // Engine Controls
            Panel(class="card") {
                Header "Engine"
                Toggle(label="Online", value=$online)
                @if $online {
                    Text(class="ok") "🟢 Running"
                } @else {
                    Text(class="err") "🔴 Stopped"
                }
                Input(placeholder="Username", value=$user)
            }

            // Gauges
            Panel(class="card") {
                Header "Metrics"
                Gauge(name="CPU",    val=$cpu)
                Gauge(name="Memory", val=$memory)
            }

            // Threshold Slider
            Panel(class="card") {
                Header "Alert Threshold"
                Slider(value=$alert)
                Text !rhei: { "Alert when > " + alert + "%" }
            }

            // Buttons
            Panel(class="card") {
                Header "Actions"
                Panel(class="btn-row") {
                    Button(label="Reset CPU") {
                        @on click { !rhei: { cpu = 5.0; } }
                    }
                    Button(label="Stress CPU") {
                        @on click { !rhei: { cpu = 92.0; } }
                    }
                }
                Button(label="Toggle Notification", class="btn-outline") {
                    @on click { !rhei: { notif = !notif; } }
                }
            }

            // Node Grid
            Panel(class="card") {
                Header "Nodes"
                Panel(direction="grid", columns=2, gap=8) {
                    @each $n in $nodes {
                        NodeTile(tag=$n, active=$online)
                    }
                }
            }
        }

        // ── RIGHT COLUMN ─────────────────────────────────────────────────────
        Panel(class="col-right") {

            // Typography
            Panel(class="card") {
                Header "Typography"
                Panel(class="demo-row") {
                    Text(class="fw-300") "Light"
                    Text(class="fw-400") "Normal"
                    Text(class="fw-700") "Bold"
                    Text(class="fw-900") "Black"
                }
                Panel(class="demo-col") {
                    Panel(class="ta-box") { Text(class="ta-l") "Left"   }
                    Panel(class="ta-box") { Text(class="ta-c") "Center" }
                    Panel(class="ta-box") { Text(class="ta-r") "Right"  }
                }
                Panel(class="lh-box") {
                    Text(class="lh-08") "Tight 0.8"
                    Text(class="lh-12") "Normal 1.2"
                    Text(class="lh-20") "Loose 2.0"
                }
            }

            // Box Model
            Panel(class="card") {
                Header "Box Model"
                Panel(class="box-pad") {
                    Text "padding: 24px top, 12px sides"
                }
                Panel(class="box-margin") {
                    Text "margin-top: 16px"
                }
                Panel(class="box-combo") {
                    Text "border: 2px dashed, radius: 10px"
                }
            }

            // Absolute Positioning
            Panel(class="card") {
                Header "Position: Absolute"
                Panel(class="abs-stage") {
                    Text "Stage with an overlay badge:"
                    Panel(class="abs-badge") {
                        Panel(class="badge-inner") {
                            Text "★ HOT"
                        }
                    }
                }
            }

            // Opacity
            Panel(class="card") {
                Header "Opacity"
                Panel(class="op-row") {
                    Panel(class="op-30")  { Text "30%" }
                    Panel(class="op-60")  { Text "60%" }
                    Panel(class="op-85")  { Text "85%" }
                    Panel(class="op-100") { Text "100%" }
                }
            }

            // Scroll + Sticky
            Panel(class="card") {
                Header "Scrollable Log"
                Panel(class="log") {
                    Panel(class="log-header") {
                        Text "📋 Event Log (sticky)"
                    }
                    Text "Init: system boot"
                    Text "Info: all modules OK"
                    Text "Warn: CPU at $cpu%"
                    Text "Info: mem at $memory%"
                    Text "Debug: threshold $alert"
                    Text "Info: user $user"
                    Text "Warn: node check"
                    Text "Info: heartbeat OK"
                    Text "Debug: idle"
                }
            }

            // Inheritance
            Panel(class="card") {
                Header "Style Inheritance"
                Panel(class="inherit") {
                    Text "Yellow from parent"
                    Text(class="override") "Pink — override"
                }
            }

            // Display: none demo
            Panel(class="card") {
                Header "Display: None"
                Panel(class="demo-row") {
                    Panel(class="vis")   { Text "Visible"   }
                    Panel(class="hid")   { Text "Hidden"    }
                    Panel(class="vis")   { Text "Still Here" }
                }
            }

            // Flex Grow
            Panel(class="card") {
                Header "Flex Grow"
                Panel(class="grow-bar") {
                    Panel(class="grow-1") { Text "1" }
                    Panel(class="grow-2") { Text "2" }
                    Panel(class="grow-1") { Text "1" }
                }
            }
        }
    }

    // ── Fixed Toast ──────────────────────────────────────────────────────────
    @if $notif {
        Panel(class="toast") {
            Panel(class="toast-row") {
                Text "✅ Monitor ready"
                Button(label="×", class="toast-x") {
                    @on click { !rhei: { notif = false; } }
                }
            }
        }
    }
}