diff --git a/examples/dashboard.html b/examples/dashboard.html
new file mode 100644
index 0000000..c8a5067
--- /dev/null
+++ b/examples/dashboard.html
@@ -0,0 +1,746 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DreamStack Dashboard — Springs + Layout</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, system-ui, sans-serif;
+            background: #0a0a0f;
+            color: #e2e8f0;
+            min-height: 100vh;
+            overflow: hidden;
+        }
+
+        .dashboard {
+            display: grid;
+            grid-template-columns: auto 1fr;
+            height: 100vh;
+        }
+
+        .sidebar {
+            background: rgba(255, 255, 255, 0.02);
+            border-right: 1px solid rgba(255, 255, 255, 0.06);
+            overflow: hidden;
+            transition: none;
+            /* springs handle animation */
+            display: flex;
+            flex-direction: column;
+        }
+
+        .sidebar-header {
+            padding: 1.5rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
+        .logo {
+            width: 32px;
+            height: 32px;
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            font-size: 0.9rem;
+            flex-shrink: 0;
+        }
+
+        .logo-text {
+            font-weight: 600;
+            font-size: 1rem;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+
+        .sidebar-nav {
+            flex: 1;
+            padding: 0.5rem;
+        }
+
+        .nav-item {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.75rem 1rem;
+            border-radius: 10px;
+            cursor: pointer;
+            color: rgba(255, 255, 255, 0.4);
+            transition: all 0.15s;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+
+        .nav-item:hover {
+            background: rgba(255, 255, 255, 0.04);
+            color: rgba(255, 255, 255, 0.7);
+        }
+
+        .nav-item.active {
+            background: rgba(99, 102, 241, 0.12);
+            color: #a78bfa;
+        }
+
+        .nav-icon {
+            font-size: 1.1rem;
+            flex-shrink: 0;
+        }
+
+        .nav-label {
+            overflow: hidden;
+        }
+
+        .toggle-btn {
+            margin: 0.5rem;
+            padding: 0.75rem;
+            border: none;
+            background: rgba(255, 255, 255, 0.04);
+            color: rgba(255, 255, 255, 0.4);
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 1.1rem;
+            transition: all 0.15s;
+        }
+
+        .toggle-btn:hover {
+            background: rgba(255, 255, 255, 0.08);
+            color: white;
+        }
+
+        .main-content {
+            padding: 2rem;
+            overflow-y: auto;
+        }
+
+        .main-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+
+        .page-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .spring-info {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.7rem;
+            color: rgba(255, 255, 255, 0.25);
+            background: rgba(255, 255, 255, 0.03);
+            padding: 0.5rem 0.75rem;
+            border-radius: 8px;
+            border: 1px solid rgba(255, 255, 255, 0.06);
+        }
+
+        .cards-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1rem;
+        }
+
+        .card {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.06);
+            border-radius: 16px;
+            padding: 1.5rem;
+            cursor: pointer;
+            transition: none;
+            /* springs handle this */
+            position: relative;
+            overflow: hidden;
+        }
+
+        .card::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+
+        .card:hover::before {
+            opacity: 1;
+        }
+
+        .card-icon {
+            font-size: 2rem;
+            margin-bottom: 0.75rem;
+        }
+
+        .card-title {
+            font-weight: 600;
+            font-size: 0.95rem;
+            margin-bottom: 0.25rem;
+        }
+
+        .card-value {
+            font-size: 2rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #6366f1, #8b5cf6, #c084fc);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .card-change {
+            font-size: 0.75rem;
+            color: rgba(255, 255, 255, 0.35);
+            margin-top: 0.25rem;
+        }
+
+        .card-change.up {
+            color: #22c55e;
+        }
+
+        .card-change.down {
+            color: #ef4444;
+        }
+
+        .draggable-area {
+            margin-top: 2rem;
+        }
+
+        .drag-title {
+            font-size: 0.85rem;
+            color: rgba(255, 255, 255, 0.35);
+            margin-bottom: 1rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            font-weight: 500;
+        }
+
+        .spring-playground {
+            position: relative;
+            height: 300px;
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid rgba(255, 255, 255, 0.06);
+            border-radius: 16px;
+            overflow: hidden;
+        }
+
+        .spring-ball {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #6366f1, #8b5cf6);
+            position: absolute;
+            cursor: grab;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
+            user-select: none;
+        }
+
+        .spring-ball:active {
+            cursor: grabbing;
+        }
+
+        .spring-trail {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: rgba(99, 102, 241, 0.15);
+            pointer-events: none;
+        }
+
+        .spring-controls {
+            display: flex;
+            gap: 1rem;
+            margin-top: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .control-group {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .control-label {
+            font-size: 0.75rem;
+            color: rgba(255, 255, 255, 0.35);
+            min-width: 60px;
+        }
+
+        .control-slider {
+            -webkit-appearance: none;
+            width: 120px;
+            height: 4px;
+            border-radius: 2px;
+            background: rgba(255, 255, 255, 0.1);
+            outline: none;
+        }
+
+        .control-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            background: #8b5cf6;
+            cursor: pointer;
+        }
+
+        .control-value {
+            font-size: 0.75rem;
+            color: #8b5cf6;
+            min-width: 30px;
+            text-align: right;
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        .powered-by {
+            text-align: center;
+            margin-top: 2rem;
+            font-size: 0.7rem;
+            color: rgba(255, 255, 255, 0.12);
+        }
+
+        .powered-by span {
+            color: rgba(139, 92, 246, 0.3);
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app"></div>
+
+    <script>
+        // ═══════════════════════════════════════════════════════════
+        // DreamStack Runtime v0.3.0 — Signals + Effects + Springs
+        // ═══════════════════════════════════════════════════════════
+        const DS = (() => {
+            let currentEffect = null;
+            let batchDepth = 0;
+            let pendingEffects = new Set();
+
+            class Signal {
+                constructor(val) { this._value = val; this._subs = new Set(); }
+                get value() { if (currentEffect) this._subs.add(currentEffect); return this._value; }
+                set value(v) {
+                    if (this._value === v) return;
+                    this._value = v;
+                    if (batchDepth > 0) for (const s of this._subs) pendingEffects.add(s);
+                    else for (const s of [...this._subs]) s._run();
+                }
+            }
+
+            class Derived {
+                constructor(fn) {
+                    this._fn = fn; this._value = undefined; this._subs = new Set();
+                    this._eff = new Effect(() => {
+                        const old = this._value; this._value = this._fn();
+                        if (old !== this._value) {
+                            if (batchDepth > 0) for (const s of this._subs) pendingEffects.add(s);
+                            else for (const s of [...this._subs]) s._run();
+                        }
+                    });
+                    this._eff._run();
+                }
+                get value() { if (currentEffect) this._subs.add(currentEffect); return this._value; }
+            }
+
+            class Effect {
+                constructor(fn) { this._fn = fn; this._disposed = false; }
+                _run() {
+                    if (this._disposed) return;
+                    const prev = currentEffect; currentEffect = this;
+                    try { this._fn(); } finally { currentEffect = prev; }
+                }
+                dispose() { this._disposed = true; }
+            }
+
+            const signal = v => new Signal(v);
+            const derived = fn => new Derived(fn);
+            const effect = fn => { const e = new Effect(fn); e._run(); return e; };
+            const batch = fn => {
+                batchDepth++;
+                try { fn(); } finally { batchDepth--; if (batchDepth === 0) flush(); }
+            };
+            const flush = () => {
+                const effs = [...pendingEffects]; pendingEffects.clear();
+                for (const e of effs) e._run();
+            };
+
+            // ═══════════════════════════════════════════════════════
+            // Spring Physics Engine
+            // ═══════════════════════════════════════════════════════
+            // RK4 integrator, interruptible, integrates with signals
+
+            const activeSpringSet = new Set();
+            let rafId = null;
+            let lastTime = 0;
+
+            class Spring {
+                constructor({ value = 0, target = 0, stiffness = 170, damping = 26, mass = 1 } = {}) {
+                    this._signal = signal(value);
+                    this._velocity = 0;
+                    this._target = target;
+                    this.stiffness = stiffness;
+                    this.damping = damping;
+                    this.mass = mass;
+                    this._settled = true;
+                }
+
+                get value() { return this._signal.value; }
+                set value(v) { this._signal.value = v; }
+
+                get target() { return this._target; }
+                set target(t) {
+                    this._target = t;
+                    this._settled = false;
+                    activeSpringSet.add(this);
+                    startLoop();
+                }
+
+                // Instantly set position (no animation)
+                set(v) {
+                    this._signal.value = v;
+                    this._target = v;
+                    this._velocity = 0;
+                    this._settled = true;
+                    activeSpringSet.delete(this);
+                }
+
+                // RK4 step
+                _step(dt) {
+                    const pos = this._signal._value;
+                    const vel = this._velocity;
+                    const k = this.stiffness;
+                    const d = this.damping;
+                    const m = this.mass;
+
+                    // RK4 derivatives
+                    const accel = (p, v) => (-k * (p - this._target) - d * v) / m;
+
+                    const k1v = accel(pos, vel);
+                    const k1p = vel;
+                    const k2v = accel(pos + k1p * dt / 2, vel + k1v * dt / 2);
+                    const k2p = vel + k1v * dt / 2;
+                    const k3v = accel(pos + k2p * dt / 2, vel + k2v * dt / 2);
+                    const k3p = vel + k2v * dt / 2;
+                    const k4v = accel(pos + k3p * dt, vel + k3v * dt);
+                    const k4p = vel + k3v * dt;
+
+                    const newVel = vel + (dt / 6) * (k1v + 2 * k2v + 2 * k3v + k4v);
+                    const newPos = pos + (dt / 6) * (k1p + 2 * k2p + 2 * k3p + k4p);
+
+                    this._velocity = newVel;
+                    this._signal.value = newPos;
+
+                    // Check if settled
+                    if (Math.abs(newVel) < 0.01 && Math.abs(newPos - this._target) < 0.01) {
+                        this._signal.value = this._target;
+                        this._velocity = 0;
+                        this._settled = true;
+                        activeSpringSet.delete(this);
+                    }
+                }
+            }
+
+            function startLoop() {
+                if (rafId !== null) return;
+                lastTime = performance.now();
+                rafId = requestAnimationFrame(loop);
+            }
+
+            function loop(now) {
+                const dt = Math.min((now - lastTime) / 1000, 0.064); // clamp to ~15fps min
+                lastTime = now;
+
+                batch(() => {
+                    for (const spring of activeSpringSet) {
+                        // Fixed timestep substeps for stability
+                        const steps = Math.ceil(dt / (1 / 120));
+                        const subDt = dt / steps;
+                        for (let i = 0; i < steps; i++) {
+                            spring._step(subDt);
+                        }
+                    }
+                });
+
+                if (activeSpringSet.size > 0) {
+                    rafId = requestAnimationFrame(loop);
+                } else {
+                    rafId = null; // Sleep when no springs are active
+                }
+            }
+
+            function spring(opts) { return new Spring(opts); }
+
+            return { signal, derived, effect, batch, flush, spring, Spring };
+        })();
+
+        // ═══════════════════════════════════════════════════════════
+        // Dashboard App
+        // ═══════════════════════════════════════════════════════════
+        (() => {
+            const app = document.getElementById('app');
+
+            // ── Signals ──
+            const sidebarExpanded = DS.signal(true);
+            const activePage = DS.signal('dashboard');
+
+            // ── Springs ──
+            const sidebarWidth = DS.spring({ value: 240, target: 240, stiffness: 200, damping: 24 });
+            const sidebarOpacity = DS.spring({ value: 1, target: 1, stiffness: 200, damping: 24 });
+
+            // Card animations (staggered)
+            const cardScales = [
+                DS.spring({ value: 0, target: 1, stiffness: 300, damping: 22 }),
+                DS.spring({ value: 0, target: 1, stiffness: 300, damping: 22 }),
+                DS.spring({ value: 0, target: 1, stiffness: 300, damping: 22 }),
+                DS.spring({ value: 0, target: 1, stiffness: 300, damping: 22 }),
+            ];
+
+            // Draggable ball
+            const ballX = DS.spring({ value: 150, target: 150, stiffness: 170, damping: 26 });
+            const ballY = DS.spring({ value: 120, target: 120, stiffness: 170, damping: 26 });
+
+            // Stagger card entrance
+            cardScales.forEach((s, i) => {
+                setTimeout(() => { s.target = 1; }, i * 100);
+            });
+
+            // ── Dashboard layout ──
+            const dashboard = document.createElement('div');
+            dashboard.className = 'dashboard';
+            app.appendChild(dashboard);
+
+            // Sidebar
+            const sidebar = document.createElement('div');
+            sidebar.className = 'sidebar';
+            dashboard.appendChild(sidebar);
+
+            DS.effect(() => {
+                sidebar.style.width = sidebarWidth.value + 'px';
+            });
+
+            // Sidebar header
+            const sidebarHeader = document.createElement('div');
+            sidebarHeader.className = 'sidebar-header';
+            sidebarHeader.innerHTML = '<div class="logo">DS</div><div class="logo-text">DreamStack</div>';
+            sidebar.appendChild(sidebarHeader);
+
+            DS.effect(() => {
+                const logoText = sidebarHeader.querySelector('.logo-text');
+                logoText.style.opacity = sidebarOpacity.value;
+            });
+
+            // Nav items
+            const nav = document.createElement('div');
+            nav.className = 'sidebar-nav';
+            sidebar.appendChild(nav);
+
+            const navItems = [
+                { icon: '📊', label: 'Dashboard', id: 'dashboard' },
+                { icon: '📈', label: 'Analytics', id: 'analytics' },
+                { icon: '⚡', label: 'Signals', id: 'signals' },
+                { icon: '🎯', label: 'Effects', id: 'effects' },
+                { icon: '🌊', label: 'Streams', id: 'streams' },
+                { icon: '🎨', label: 'Springs', id: 'springs' },
+            ];
+
+            navItems.forEach(item => {
+                const el = document.createElement('div');
+                el.className = 'nav-item';
+                el.innerHTML = `<span class="nav-icon">${item.icon}</span><span class="nav-label">${item.label}</span>`;
+                el.addEventListener('click', () => { activePage.value = item.id; });
+                DS.effect(() => {
+                    el.classList.toggle('active', activePage.value === item.id);
+                });
+                DS.effect(() => {
+                    el.querySelector('.nav-label').style.opacity = sidebarOpacity.value;
+                });
+                nav.appendChild(el);
+            });
+
+            // Toggle button
+            const toggleBtn = document.createElement('button');
+            toggleBtn.className = 'toggle-btn';
+            toggleBtn.textContent = '☰';
+            toggleBtn.addEventListener('click', () => {
+                const expanded = !sidebarExpanded.value;
+                sidebarExpanded.value = expanded;
+                sidebarWidth.target = expanded ? 240 : 64;
+                sidebarOpacity.target = expanded ? 1 : 0;
+            });
+            sidebar.appendChild(toggleBtn);
+
+            // Main content
+            const main = document.createElement('div');
+            main.className = 'main-content';
+            dashboard.appendChild(main);
+
+            // Header
+            const mainHeader = document.createElement('div');
+            mainHeader.className = 'main-header';
+            const pageTitle = document.createElement('h2');
+            pageTitle.className = 'page-title';
+            const springInfo = document.createElement('div');
+            springInfo.className = 'spring-info';
+            mainHeader.appendChild(pageTitle);
+            mainHeader.appendChild(springInfo);
+            main.appendChild(mainHeader);
+
+            DS.effect(() => { pageTitle.textContent = activePage.value.charAt(0).toUpperCase() + activePage.value.slice(1); });
+            DS.effect(() => {
+                springInfo.textContent = `sidebar: ${sidebarWidth.value.toFixed(0)}px | ball: (${ballX.value.toFixed(0)}, ${ballY.value.toFixed(0)})`;
+            });
+
+            // Stats cards
+            const cardsGrid = document.createElement('div');
+            cardsGrid.className = 'cards-grid';
+            main.appendChild(cardsGrid);
+
+            const stats = [
+                { icon: '⚡', title: 'Signals', value: '1,247', change: '+12%', up: true },
+                { icon: '🔄', title: 'Updates/s', value: '60', change: '0ms glitch', up: true },
+                { icon: '📦', title: 'Bundle', value: '6.8KB', change: 'No VDOM', up: true },
+                { icon: '🎯', title: 'Effects', value: '3', change: 'All handled', up: true },
+            ];
+
+            stats.forEach((stat, i) => {
+                const card = document.createElement('div');
+                card.className = 'card';
+
+                DS.effect(() => {
+                    const s = cardScales[i].value;
+                    card.style.transform = `scale(${s})`;
+                    card.style.opacity = s;
+                });
+
+                card.innerHTML = `
+          <div class="card-icon">${stat.icon}</div>
+          <div class="card-title">${stat.title}</div>
+          <div class="card-value">${stat.value}</div>
+          <div class="card-change ${stat.up ? 'up' : 'down'}">${stat.change}</div>
+        `;
+                cardsGrid.appendChild(card);
+            });
+
+            // Draggable spring area
+            const dragArea = document.createElement('div');
+            dragArea.className = 'draggable-area';
+            const dragTitle = document.createElement('div');
+            dragTitle.className = 'drag-title';
+            dragTitle.textContent = '🎾 Spring Physics — Drag the ball';
+            dragArea.appendChild(dragTitle);
+            main.appendChild(dragArea);
+
+            const playground = document.createElement('div');
+            playground.className = 'spring-playground';
+            dragArea.appendChild(playground);
+
+            // Ball
+            const ball = document.createElement('div');
+            ball.className = 'spring-ball';
+            ball.textContent = '🎾';
+            playground.appendChild(ball);
+
+            DS.effect(() => {
+                ball.style.left = (ballX.value - 30) + 'px';
+                ball.style.top = (ballY.value - 30) + 'px';
+            });
+
+            // Drag handling
+            let isDragging = false;
+
+            ball.addEventListener('mousedown', (e) => {
+                isDragging = true;
+                e.preventDefault();
+            });
+
+            window.addEventListener('mousemove', (e) => {
+                if (!isDragging) return;
+                const rect = playground.getBoundingClientRect();
+                const x = Math.max(30, Math.min(rect.width - 30, e.clientX - rect.left));
+                const y = Math.max(30, Math.min(rect.height - 30, e.clientY - rect.top));
+                // Direct set while dragging (no spring)
+                ballX.set(x);
+                ballY.set(y);
+            });
+
+            window.addEventListener('mouseup', () => {
+                if (isDragging) {
+                    isDragging = false;
+                    // Spring back to center
+                    const rect = playground.getBoundingClientRect();
+                    ballX.target = rect.width / 2;
+                    ballY.target = rect.height / 2;
+                }
+            });
+
+            // Click anywhere in playground to send ball there
+            playground.addEventListener('click', (e) => {
+                if (isDragging) return;
+                const rect = playground.getBoundingClientRect();
+                ballX.target = e.clientX - rect.left;
+                ballY.target = e.clientY - rect.top;
+            });
+
+            // Spring controls
+            const controls = document.createElement('div');
+            controls.className = 'spring-controls';
+            dragArea.appendChild(controls);
+
+            function makeControl(label, min, max, initial, onChange) {
+                const group = document.createElement('div');
+                group.className = 'control-group';
+
+                const lbl = document.createElement('span');
+                lbl.className = 'control-label';
+                lbl.textContent = label;
+
+                const slider = document.createElement('input');
+                slider.type = 'range';
+                slider.className = 'control-slider';
+                slider.min = min;
+                slider.max = max;
+                slider.value = initial;
+
+                const val = document.createElement('span');
+                val.className = 'control-value';
+                val.textContent = initial;
+
+                slider.addEventListener('input', () => {
+                    val.textContent = slider.value;
+                    onChange(Number(slider.value));
+                });
+
+                group.appendChild(lbl);
+                group.appendChild(slider);
+                group.appendChild(val);
+                controls.appendChild(group);
+            }
+
+            makeControl('Stiffness', 10, 500, 170, (v) => { ballX.stiffness = v; ballY.stiffness = v; });
+            makeControl('Damping', 1, 60, 26, (v) => { ballX.damping = v; ballY.damping = v; });
+            makeControl('Mass', 0.5, 10, 1, (v) => { ballX.mass = v; ballY.mass = v; });
+
+            // Powered by
+            const powered = document.createElement('div');
+            powered.className = 'powered-by';
+            powered.innerHTML = 'Built with <span>DreamStack</span> — springs + signals + zero re-renders';
+            main.appendChild(powered);
+        })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/search.html b/examples/search.html
new file mode 100644
index 0000000..b27b0e4
--- /dev/null
+++ b/examples/search.html
@@ -0,0 +1,857 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DreamStack Search — Effects + Streams</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', -apple-system, system-ui, sans-serif;
+            background: #0a0a0f;
+            color: #e2e8f0;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            padding: 3rem 1rem;
+        }
+
+        #app {
+            width: 100%;
+            max-width: 640px;
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .title {
+            font-size: 2.5rem;
+            font-weight: 200;
+            letter-spacing: -0.04em;
+            color: rgba(139, 92, 246, 0.4);
+            margin-bottom: 0.25rem;
+        }
+
+        .subtitle {
+            font-size: 0.8rem;
+            color: rgba(255, 255, 255, 0.2);
+        }
+
+        .search-box {
+            position: relative;
+            margin-bottom: 1.5rem;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 1rem 1.25rem 1rem 3rem;
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 14px;
+            color: #e2e8f0;
+            font-size: 1rem;
+            font-family: inherit;
+            outline: none;
+            transition: all 0.2s;
+        }
+
+        .search-input:focus {
+            border-color: rgba(99, 102, 241, 0.5);
+            background: rgba(255, 255, 255, 0.06);
+            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
+        }
+
+        .search-input::placeholder {
+            color: rgba(255, 255, 255, 0.2);
+        }
+
+        .search-icon {
+            position: absolute;
+            left: 1rem;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 1.1rem;
+            color: rgba(255, 255, 255, 0.2);
+        }
+
+        .status-bar {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 1rem;
+            font-size: 0.8rem;
+            color: rgba(255, 255, 255, 0.3);
+            min-height: 1.5rem;
+        }
+
+        .status-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.15);
+            transition: background 0.3s;
+        }
+
+        .status-dot.loading {
+            background: #f59e0b;
+            animation: pulse 1s ease-in-out infinite;
+        }
+
+        .status-dot.success {
+            background: #22c55e;
+        }
+
+        .status-dot.error {
+            background: #ef4444;
+        }
+
+        @keyframes pulse {
+
+            0%,
+            100% {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 0.3;
+            }
+        }
+
+        .results-card {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.06);
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+
+        .result-item {
+            padding: 1rem 1.25rem;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+            cursor: pointer;
+            transition: all 0.15s;
+            animation: fade-in 0.2s ease-out;
+        }
+
+        .result-item:last-child {
+            border-bottom: none;
+        }
+
+        .result-item:hover {
+            background: rgba(255, 255, 255, 0.04);
+        }
+
+        .result-title {
+            font-size: 0.95rem;
+            font-weight: 500;
+            color: #e2e8f0;
+            margin-bottom: 0.25rem;
+        }
+
+        .result-title mark {
+            background: rgba(139, 92, 246, 0.25);
+            color: #c4b5fd;
+            border-radius: 2px;
+            padding: 0 2px;
+        }
+
+        .result-desc {
+            font-size: 0.8rem;
+            color: rgba(255, 255, 255, 0.35);
+        }
+
+        .result-meta {
+            font-size: 0.7rem;
+            color: rgba(139, 92, 246, 0.4);
+            margin-top: 0.25rem;
+        }
+
+        @keyframes fade-in {
+            from {
+                opacity: 0;
+                transform: translateY(4px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 3rem;
+            color: rgba(255, 255, 255, 0.15);
+            font-size: 0.9rem;
+        }
+
+        .effect-log {
+            margin-top: 1.5rem;
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid rgba(255, 255, 255, 0.04);
+            border-radius: 12px;
+            padding: 1rem;
+            max-height: 200px;
+            overflow-y: auto;
+            font-family: 'JetBrains Mono', 'Fira Code', monospace;
+            font-size: 0.7rem;
+        }
+
+        .effect-log::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .effect-log::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .effect-log::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 2px;
+        }
+
+        .log-entry {
+            padding: 0.2rem 0;
+            color: rgba(255, 255, 255, 0.3);
+            animation: fade-in 0.15s;
+        }
+
+        .log-entry .effect-name {
+            color: #8b5cf6;
+        }
+
+        .log-entry .stream-op {
+            color: #22d3ee;
+        }
+
+        .log-entry .handler {
+            color: #22c55e;
+        }
+
+        .log-entry .time {
+            color: rgba(255, 255, 255, 0.15);
+        }
+
+        .legend {
+            display: flex;
+            gap: 1.5rem;
+            margin-top: 1rem;
+            justify-content: center;
+        }
+
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
+            font-size: 0.7rem;
+            color: rgba(255, 255, 255, 0.3);
+        }
+
+        .legend-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+        }
+
+        .powered-by {
+            text-align: center;
+            margin-top: 2rem;
+            font-size: 0.7rem;
+            color: rgba(255, 255, 255, 0.12);
+        }
+
+        .powered-by span {
+            color: rgba(139, 92, 246, 0.3);
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app"></div>
+
+    <script>
+        // ═══════════════════════════════════════════════════════════
+        // DreamStack Runtime v0.2.0 — Signals + Effects + Streams
+        // ═══════════════════════════════════════════════════════════
+        const DS = (() => {
+            // ── Signal System (from v0.1.0) ──
+            let currentEffect = null;
+            let batchDepth = 0;
+            let pendingEffects = new Set();
+
+            class Signal {
+                constructor(val) {
+                    this._value = val;
+                    this._subs = new Set();
+                }
+                get value() {
+                    if (currentEffect) this._subs.add(currentEffect);
+                    return this._value;
+                }
+                set value(v) {
+                    if (this._value === v) return;
+                    this._value = v;
+                    this._notify();
+                }
+                _notify() {
+                    if (batchDepth > 0) {
+                        for (const s of this._subs) pendingEffects.add(s);
+                    } else {
+                        for (const s of [...this._subs]) s._run();
+                    }
+                }
+            }
+
+            class Derived {
+                constructor(fn) {
+                    this._fn = fn;
+                    this._value = undefined;
+                    this._subs = new Set();
+                    this._eff = new Effect(() => {
+                        const old = this._value;
+                        this._value = this._fn();
+                        if (old !== this._value) {
+                            if (batchDepth > 0) {
+                                for (const s of this._subs) pendingEffects.add(s);
+                            } else {
+                                for (const s of [...this._subs]) s._run();
+                            }
+                        }
+                    });
+                    this._eff._run();
+                }
+                get value() {
+                    if (currentEffect) this._subs.add(currentEffect);
+                    return this._value;
+                }
+            }
+
+            class Effect {
+                constructor(fn) { this._fn = fn; this._disposed = false; }
+                _run() {
+                    if (this._disposed) return;
+                    const prev = currentEffect;
+                    currentEffect = this;
+                    try { this._fn(); } finally { currentEffect = prev; }
+                }
+                dispose() { this._disposed = true; }
+            }
+
+            const signal = v => new Signal(v);
+            const derived = fn => new Derived(fn);
+            const effect = fn => { const e = new Effect(fn); e._run(); return e; };
+            const batch = fn => {
+                batchDepth++;
+                try { fn(); } finally {
+                    batchDepth--;
+                    if (batchDepth === 0) flush();
+                }
+            };
+            const flush = () => {
+                const effs = [...pendingEffects];
+                pendingEffects.clear();
+                for (const e of effs) e._run();
+            };
+
+            // ═══════════════════════════════════════════════════════
+            // NEW: Algebraic Effects
+            // ═══════════════════════════════════════════════════════
+            // Effects are composable, testable side-effect declarations.
+            // `perform(effectName, ...args)` throws to the nearest handler.
+            // `handle(fn, handlers)` installs effect handlers and runs fn.
+
+            const effectStack = [];
+
+            function perform(name, ...args) {
+                // Walk the handler stack to find a matching handler
+                for (let i = effectStack.length - 1; i >= 0; i--) {
+                    const frame = effectStack[i];
+                    if (frame.handlers[name]) {
+                        return frame.handlers[name](...args);
+                    }
+                }
+                throw new Error(`Unhandled effect: ${name}`);
+            }
+
+            function handle(fn, handlers) {
+                const frame = { handlers };
+                effectStack.push(frame);
+                try {
+                    return fn();
+                } finally {
+                    effectStack.pop();
+                }
+            }
+
+            // Async version for effects that return promises
+            async function handleAsync(fn, handlers) {
+                const frame = { handlers };
+                effectStack.push(frame);
+                try {
+                    return await fn();
+                } finally {
+                    effectStack.pop();
+                }
+            }
+
+            async function performAsync(name, ...args) {
+                for (let i = effectStack.length - 1; i >= 0; i--) {
+                    const frame = effectStack[i];
+                    if (frame.handlers[name]) {
+                        return await frame.handlers[name](...args);
+                    }
+                }
+                throw new Error(`Unhandled effect: ${name}`);
+            }
+
+            // ═══════════════════════════════════════════════════════
+            // NEW: Stream Engine
+            // ═══════════════════════════════════════════════════════
+            // Streams are push-based async sequences that integrate
+            // with signals. A stream's latest value is a signal.
+
+            class Stream {
+                constructor(subscribe) {
+                    this._subscribe = subscribe;
+                    this._listeners = [];
+                }
+
+                // Subscribe to values
+                listen(fn) {
+                    const unsub = this._subscribe(fn);
+                    this._listeners.push(fn);
+                    return unsub || (() => {
+                        this._listeners = this._listeners.filter(l => l !== fn);
+                    });
+                }
+
+                // Convert to signal (latest value)
+                toSignal(initial) {
+                    const sig = signal(initial);
+                    this.listen(v => { sig.value = v; });
+                    return sig;
+                }
+
+                // ── Operators ──
+
+                map(fn) {
+                    return new Stream(emit => this.listen(v => emit(fn(v))));
+                }
+
+                filter(pred) {
+                    return new Stream(emit => this.listen(v => { if (pred(v)) emit(v); }));
+                }
+
+                debounce(ms) {
+                    return new Stream(emit => {
+                        let timer = null;
+                        return this.listen(v => {
+                            clearTimeout(timer);
+                            timer = setTimeout(() => emit(v), ms);
+                        });
+                    });
+                }
+
+                throttle(ms) {
+                    return new Stream(emit => {
+                        let last = 0;
+                        return this.listen(v => {
+                            const now = Date.now();
+                            if (now - last >= ms) {
+                                last = now;
+                                emit(v);
+                            }
+                        });
+                    });
+                }
+
+                distinct() {
+                    return new Stream(emit => {
+                        let prev = undefined;
+                        return this.listen(v => {
+                            if (v !== prev) { prev = v; emit(v); }
+                        });
+                    });
+                }
+
+                take(n) {
+                    return new Stream(emit => {
+                        let count = 0;
+                        return this.listen(v => {
+                            if (count < n) { count++; emit(v); }
+                        });
+                    });
+                }
+
+                scan(fn, seed) {
+                    return new Stream(emit => {
+                        let acc = seed;
+                        return this.listen(v => {
+                            acc = fn(acc, v);
+                            emit(acc);
+                        });
+                    });
+                }
+
+                flatMap(fn) {
+                    return new Stream(emit => {
+                        let innerUnsub = null;
+                        return this.listen(v => {
+                            if (innerUnsub) innerUnsub();
+                            const innerStream = fn(v);
+                            innerUnsub = innerStream.listen(emit);
+                        });
+                    });
+                }
+
+                static merge(...streams) {
+                    return new Stream(emit => {
+                        const unsubs = streams.map(s => s.listen(emit));
+                        return () => unsubs.forEach(u => u());
+                    });
+                }
+
+                static fromEvent(element, event) {
+                    return new Stream(emit => {
+                        element.addEventListener(event, emit);
+                        return () => element.removeEventListener(event, emit);
+                    });
+                }
+
+                static fromSignal(sig) {
+                    return new Stream(emit => {
+                        const eff = effect(() => emit(sig.value));
+                        return () => eff.dispose();
+                    });
+                }
+
+                static fromPromise(promise) {
+                    return new Stream(emit => {
+                        promise.then(v => emit(v)).catch(() => { });
+                    });
+                }
+            }
+
+            return {
+                signal, derived, effect, batch, flush,
+                perform, handle, handleAsync, performAsync,
+                Stream
+            };
+        })();
+
+        // ═══════════════════════════════════════════════════════════
+        // Search App — Algebraic Effects + Stream Pipeline
+        // ═══════════════════════════════════════════════════════════
+        (() => {
+            const logEntries = DS.signal([]);
+            function log(type, msg) {
+                const now = new Date();
+                const time = now.toLocaleTimeString('en', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })
+                    + '.' + String(now.getMilliseconds()).padStart(3, '0');
+                logEntries.value = [...logEntries.value.slice(-50), { type, msg, time }];
+            }
+
+            // ── Mock data (simulating a backend) ──
+            const MOCK_DATA = [
+                { title: 'Reactive Signals', desc: 'Fine-grained push-based reactivity without VDOM', tags: ['signals', 'reactive'] },
+                { title: 'Algebraic Effects', desc: 'Composable, testable side-effects with perform/handle', tags: ['effects', 'side-effects'] },
+                { title: 'Stream Engine', desc: 'Push-based async sequences with operators like debounce and flatMap', tags: ['streams', 'async'] },
+                { title: 'Constraint Layout', desc: 'Cassowary-based constraint solver replacing CSS flexbox', tags: ['layout', 'constraints'] },
+                { title: 'Spring Physics', desc: 'Interruptible physics-based animations at 60fps', tags: ['animation', 'springs'] },
+                { title: 'Compile-Time Analysis', desc: 'Signal dependency graph extracted at compile time for optimal updates', tags: ['compiler', 'static-analysis'] },
+                { title: 'Homoiconic AST', desc: 'Code and data share the same representation for live editing', tags: ['homoiconic', 'editor'] },
+                { title: 'Zero Re-renders', desc: 'Direct DOM mutations driven by signal subscriptions — no diffing', tags: ['dom', 'performance'] },
+                { title: 'Effect Handlers', desc: 'Install custom handlers for HTTP, storage, time, and more', tags: ['effects', 'handlers'] },
+                { title: 'Stream Operators', desc: 'map, filter, debounce, throttle, distinct, scan, flatMap, merge', tags: ['streams', 'operators'] },
+                { title: 'Dependent Types', desc: 'Refinement types catch errors at compile time', tags: ['types', 'safety'] },
+                { title: 'Live Structural Editor', desc: 'Bidirectional editing — change code or drag UI', tags: ['editor', 'live'] },
+                { title: 'WASM Runtime', desc: 'Core signal graph and layout engine compiled to WebAssembly', tags: ['wasm', 'performance'] },
+                { title: 'Pattern Matching', desc: 'Exhaustive pattern matching with destructuring', tags: ['language', 'patterns'] },
+                { title: 'Pipe Operator', desc: 'Chain transformations with |> for readable data flow', tags: ['language', 'operators'] },
+            ];
+
+            // ── Effect declarations ──
+            // The search function performs an "Http" effect.
+            // Different handlers can provide different implementations:
+            //   - Production: fetch from real API
+            //   - Test: return mock data instantly
+            //   - Demo: simulate network delay
+
+            async function search(query) {
+                log('effect', `perform Http.search("${query}")`);
+                const results = await DS.performAsync('Http.search', query);
+                log('handler', `← received ${results.length} results`);
+                return results;
+            }
+
+            // ── Effect Handlers ──
+
+            // Demo handler: simulates network with delay + fuzzy search
+            const demoHandler = {
+                'Http.search': async (query) => {
+                    log('handler', `DemoHandler: simulating 300ms network delay...`);
+                    await new Promise(r => setTimeout(r, 300));
+                    const q = query.toLowerCase();
+                    return MOCK_DATA.filter(item =>
+                        item.title.toLowerCase().includes(q) ||
+                        item.desc.toLowerCase().includes(q) ||
+                        item.tags.some(t => t.includes(q))
+                    ).map(item => ({
+                        ...item,
+                        highlight: highlightMatch(item.title, query),
+                    }));
+                }
+            };
+
+            // Test handler: instant results, no delay
+            const testHandler = {
+                'Http.search': (query) => {
+                    log('handler', `TestHandler: instant mock response`);
+                    const q = query.toLowerCase();
+                    return MOCK_DATA.filter(item =>
+                        item.title.toLowerCase().includes(q)
+                    );
+                }
+            };
+
+            function highlightMatch(text, query) {
+                if (!query) return text;
+                const idx = text.toLowerCase().indexOf(query.toLowerCase());
+                if (idx === -1) return text;
+                return text.slice(0, idx) + '<mark>' + text.slice(idx, idx + query.length) + '</mark>' + text.slice(idx + query.length);
+            }
+
+            // ── Signals ──
+            const query = DS.signal('');
+            const results = DS.signal([]);
+            const loading = DS.signal(false);
+            const error = DS.signal(null);
+            const resultCount = DS.derived(() => results.value.length);
+            const searchCount = DS.signal(0);
+
+            // ── Stream Pipeline ──
+            // input events → debounce 250ms → distinct → flatMap(search)
+            // This is the core stream pipeline: real streaming data flow
+
+            const app = document.getElementById('app');
+
+            // Header
+            const header = document.createElement('div');
+            header.className = 'header';
+            header.innerHTML = '<h1 class="title">search</h1><p class="subtitle">Effects + Streams — debounced, cancellable, testable</p>';
+            app.appendChild(header);
+
+            // Search input
+            const searchBox = document.createElement('div');
+            searchBox.className = 'search-box';
+            const searchIcon = document.createElement('span');
+            searchIcon.className = 'search-icon';
+            searchIcon.textContent = '⌕';
+            const input = document.createElement('input');
+            input.className = 'search-input';
+            input.placeholder = 'Search DreamStack features...';
+            input.autofocus = true;
+            searchBox.appendChild(searchIcon);
+            searchBox.appendChild(input);
+            app.appendChild(searchBox);
+
+            // Status bar
+            const statusBar = document.createElement('div');
+            statusBar.className = 'status-bar';
+            const statusDot = document.createElement('div');
+            statusDot.className = 'status-dot';
+            const statusText = document.createElement('span');
+            statusBar.appendChild(statusDot);
+            statusBar.appendChild(statusText);
+            app.appendChild(statusBar);
+
+            DS.effect(() => {
+                const l = loading.value;
+                const r = results.value;
+                const q = query.value;
+                const e = error.value;
+
+                statusDot.className = 'status-dot' + (l ? ' loading' : e ? ' error' : r.length > 0 ? ' success' : '');
+                if (l) {
+                    statusText.textContent = 'Searching...';
+                } else if (e) {
+                    statusText.textContent = `Error: ${e}`;
+                } else if (q && r.length > 0) {
+                    statusText.textContent = `${r.length} results for "${q}" (${searchCount.value} searches)`;
+                } else if (q) {
+                    statusText.textContent = `No results for "${q}"`;
+                } else {
+                    statusText.textContent = 'Type to search — results debounced at 250ms';
+                }
+            });
+
+            // Results list
+            const resultsCard = document.createElement('div');
+            resultsCard.className = 'results-card';
+            app.appendChild(resultsCard);
+
+            DS.effect(() => {
+                const r = results.value;
+                const q = query.value;
+                const l = loading.value;
+                resultsCard.innerHTML = '';
+
+                if (!q && !l) {
+                    resultsCard.innerHTML = '<div class="empty-state">Start typing to search DreamStack features</div>';
+                    return;
+                }
+
+                if (l) {
+                    resultsCard.innerHTML = '<div class="empty-state">⏳ Loading...</div>';
+                    return;
+                }
+
+                if (r.length === 0) {
+                    resultsCard.innerHTML = `<div class="empty-state">No results for "${q}"</div>`;
+                    return;
+                }
+
+                for (const item of r) {
+                    const el = document.createElement('div');
+                    el.className = 'result-item';
+
+                    const titleEl = document.createElement('div');
+                    titleEl.className = 'result-title';
+                    titleEl.innerHTML = item.highlight || item.title;
+
+                    const descEl = document.createElement('div');
+                    descEl.className = 'result-desc';
+                    descEl.textContent = item.desc;
+
+                    const metaEl = document.createElement('div');
+                    metaEl.className = 'result-meta';
+                    metaEl.textContent = item.tags.map(t => `#${t}`).join('  ');
+
+                    el.appendChild(titleEl);
+                    el.appendChild(descEl);
+                    el.appendChild(metaEl);
+                    resultsCard.appendChild(el);
+                }
+            });
+
+            // Effect log
+            const logContainer = document.createElement('div');
+            logContainer.className = 'effect-log';
+            app.appendChild(logContainer);
+
+            DS.effect(() => {
+                const entries = logEntries.value;
+                logContainer.innerHTML = '';
+                for (const entry of entries) {
+                    const el = document.createElement('div');
+                    el.className = 'log-entry';
+                    const typeClass = entry.type === 'effect' ? 'effect-name'
+                        : entry.type === 'stream' ? 'stream-op'
+                            : 'handler';
+                    el.innerHTML = `<span class="time">${entry.time}</span> <span class="${typeClass}">[${entry.type}]</span> ${entry.msg}`;
+                    logContainer.appendChild(el);
+                }
+                logContainer.scrollTop = logContainer.scrollHeight;
+            });
+
+            // Legend
+            const legend = document.createElement('div');
+            legend.className = 'legend';
+            [
+                ['#8b5cf6', 'perform (effect)'],
+                ['#22d3ee', 'stream operator'],
+                ['#22c55e', 'handler (response)'],
+            ].forEach(([color, label]) => {
+                const item = document.createElement('div');
+                item.className = 'legend-item';
+                const dot = document.createElement('div');
+                dot.className = 'legend-dot';
+                dot.style.background = color;
+                const text = document.createElement('span');
+                text.textContent = label;
+                item.appendChild(dot);
+                item.appendChild(text);
+                legend.appendChild(item);
+            });
+            app.appendChild(legend);
+
+            // Powered by
+            const powered = document.createElement('div');
+            powered.className = 'powered-by';
+            powered.innerHTML = 'Built with <span>DreamStack</span> — algebraic effects + streams';
+            app.appendChild(powered);
+
+            // ═══════════════════════════════════════════════════════
+            // Wire up the stream pipeline
+            // ═══════════════════════════════════════════════════════
+            const inputStream = DS.Stream.fromEvent(input, 'input')
+                .map(e => {
+                    log('stream', `input → "${e.target.value}"`);
+                    return e.target.value;
+                })
+                .debounce(250)
+                .map(v => { log('stream', `debounce(250ms) → "${v}"`); return v; })
+                .distinct()
+                .map(v => { log('stream', `distinct → "${v}"`); return v; });
+
+            // flatMap: each new query cancels the previous search
+            let currentSearchId = 0;
+
+            inputStream.listen(async (q) => {
+                const id = ++currentSearchId;
+                query.value = q;
+
+                if (!q.trim()) {
+                    results.value = [];
+                    loading.value = false;
+                    return;
+                }
+
+                loading.value = true;
+                log('stream', `flatMap → starting search #${id}`);
+
+                try {
+                    // Use algebraic effects! The handler is swappable.
+                    const r = await DS.handleAsync(
+                        () => search(q),
+                        demoHandler // Swap to testHandler for instant results
+                    );
+
+                    // Only update if this is still the current search (cancel stale)
+                    if (id === currentSearchId) {
+                        DS.batch(() => {
+                            results.value = r;
+                            loading.value = false;
+                            searchCount.value = searchCount.value + 1;
+                        });
+                    } else {
+                        log('stream', `search #${id} cancelled (superseded by #${currentSearchId})`);
+                    }
+                } catch (err) {
+                    if (id === currentSearchId) {
+                        DS.batch(() => {
+                            error.value = err.message;
+                            loading.value = false;
+                        });
+                    }
+                }
+            });
+
+            // Log initial state
+            log('effect', 'DreamStack v0.2.0 — Effects + Streams');
+            log('effect', 'Effect handlers installed: Http.search → DemoHandler');
+            log('stream', 'Pipeline: input → debounce(250ms) → distinct → flatMap(search)');
+        })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
