diff --git a/examples/demo/app.gltm b/examples/demo/app.gltm
new file mode 100644
index 0000000..1667d3e
--- /dev/null
+++ b/examples/demo/app.gltm
@@ -0,0 +1,257 @@
+// ============================================================================
+// 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; } }
+                }
+            }
+        }
+    }
+}