@typecad/ui 1.0.0-alpha.11 → 1.0.0-alpha.13

package/dist/preview/host-ui-runtime.js

@@ -75,7 +75,21 @@ function findMatchingCloseParen(text, openIdx) {
     }
     return -1;
 }
-function lerpColor(a, b, k100) {
+/** Linear color lerp at the ACTIVE depth (module runtimeColorFormat): 888
+ *  targets lerp per 8-bit channel; 565 targets lerp per 5/6-bit channel
+ *  (device parity — the C++ ui_lerp macro switches the same way). Exported
+ *  for tests. */
+export function lerpColor(a, b, k100) {
+    if (runtimeColorFormat === "rgb666" || runtimeColorFormat === "rgb888") {
+        if (k100 >= 100)
+            return b & 0xffffff;
+        const mix = (shift) => {
+            const av = (a >> shift) & 0xff;
+            const bv = (b >> shift) & 0xff;
+            return (av + Math.trunc(((bv - av) * k100) / 100)) & 0xff;
+        };
+        return (mix(16) << 16) | (mix(8) << 8) | mix(0);
+    }
     if (k100 >= 100)
         return b & 0xffff;
     const ar = (a >> 11) & 0x1f;
@@ -114,6 +128,18 @@ function blendRuntime(fg, bg, opacity) {
         ? blendRgb888(fg, bg, opacity)
         : blendRgb565(fg, bg, opacity);
 }
+/** Halve a color at the active depth (device parity: UI_DIM_MASK — 0x7BEF on
+ *  565, 0x7F7F7F per channel on 888/666). The 565-only form channel-shifts
+ *  on rgb888 targets. */
+function dimRuntimeColor(c) {
+    return c & ((runtimeColorFormat === "rgb666" || runtimeColorFormat === "rgb888") ? 0x7f7f7f : 0x7bef);
+}
+/** Halve a runtime color for HTML-disabled controls — matches the device's
+ *  `(c >> 1) & UI_DIM_MASK` (dimRuntimeColor's bare AND barely changes dark
+ *  565 colors; the shift gives a real fade on both depths). */
+function dimDisabledColor(c) {
+    return (c >> 1) & ((runtimeColorFormat === "rgb666" || runtimeColorFormat === "rgb888") ? 0x7f7f7f : 0x7bef);
+}
 function mergeClassRules(classes, rules) {
     const merged = {};
     const classSet = new Set(classes ?? []);
@@ -244,6 +270,10 @@ export class PreviewUIRuntime {
     settleFromScrollY = 0; // settle start value (edge snap; +toward 0, -toward max)
     rangeNode = -1;
     keyboardVisible = false;
+    /** Modal <select> option list: node index while open, -1 when closed. */
+    selectMenuNode = -1;
+    /** True while the select modal overlay needs (re)stamping this frame. */
+    selectMenuDirty = false;
     keyboardDirty = 0;
     keyboardTarget = -1;
     keyboardKeys = [];
@@ -293,6 +323,13 @@ export class PreviewUIRuntime {
         // Snap draw colors to black/white for mono/e-ink targets (parity with the
         // device's UI_NATIVE_MONO draw-path snap). No-op for color targets.
         this.gfx.setMonoSnap(snapshot.program.colorFormat === "mono");
+        // Buffer storage depth tracks the target: 565 panels store packed 565,
+        // rgb888 stores packed 888, rgb666 stores 888 and quantizes at the canvas
+        // push. Without this, 888-packed colors render channel-shifted (the
+        // buffer was historically assumed to always hold 565).
+        this.gfx.setStorageMode(snapshot.program.colorFormat === "rgb888" ? "rgb888"
+            : snapshot.program.colorFormat === "rgb666" ? "rgb666"
+                : "rgb565");
         this.createScreenProxy();
     }
     start() {
@@ -302,7 +339,14 @@ export class PreviewUIRuntime {
         this.seedModuleScope();
         this.applyInitialAssignments();
         this.uiInit();
+        this.seedDrawersClosed();
         this.tick(16);
+        // Device parity: the device's loop() calls ui_tick() every iteration —
+        // that is what advances CSS keyframe animations, transitions, and scroll
+        // settles. The browser has no loop(), so drive the same tick from a ~20ms
+        // poller (the microtask-pump cadence the pin watcher uses). Idle ticks are
+        // cheap: drawDirty() finds nothing and no frame is pushed.
+        this.timers.push(setInterval(() => this.tick(), 20));
         for (const interval of this.intervals) {
             this.timers.push(setInterval(() => {
                 this.runBody(interval.body);
@@ -355,16 +399,25 @@ export class PreviewUIRuntime {
         const now = Date.now();
         const delta = deltaMs ?? Math.max(0, now - this.lastTickTime);
         this.lastTickTime = now;
+        if (this.debugCapture)
+            this.debugPaintedRects = [];
         this.evaluateBindings();
         this.advanceTransitions(delta);
         this.advanceAnimations(delta);
+        this.applyDrawers(delta);
         // Advance any in-flight scroll settle animation (bounce-back / edge-snap).
         for (let i = 0; i < this.nodes.length; i++) {
             if (this.nodes[i].settling)
                 this.advanceScrollSettle(i);
         }
-        const changed = this.drawDirty() || this.directFrameChanged;
+        let changed = this.drawDirty() || this.directFrameChanged;
         this.directFrameChanged = false;
+        // Modal <select> list: stamp the overlay whenever the frame beneath it
+        // changed (or it was just opened) so redraws never bury it.
+        if (this.selectMenuNode >= 0 && (changed || this.selectMenuDirty)) {
+            this.drawSelectMenu();
+            changed = true;
+        }
         if (changed) {
             this.onFrame?.(this.gfx.toRgbaBytes());
         }
@@ -383,6 +436,19 @@ export class PreviewUIRuntime {
         this.handleNoTouch();
         this.tick();
     }
+    /** Mouse-wheel scroll: a discrete delta applied to the scroll owner under
+     *  (x, y) — the same hit-scan a drag uses, without the gesture state
+     *  machine. Wheel-down (positive deltaPx) shows later content; any
+     *  overscroll from the tick bounces back via the standard settle. */
+    wheel(x, y, deltaPx) {
+        const owner = this.findScrollNode(x, y);
+        if (owner < 0)
+            return;
+        if (this.applyScrollDelta(owner, -Math.trunc(deltaPx))) {
+            this.releaseScroll(owner);
+        }
+        this.tick();
+    }
     triggerPin(control) {
         if (control.kind === "toggle" && control.nodeIndex !== undefined) {
             const node = this.nodes[control.nodeIndex];
@@ -513,21 +579,37 @@ export class PreviewUIRuntime {
         }
         return true;
     }
+    /** Effective stacking z, CSS-style: a non-zero zIndex raises the node AND
+     *  its subtree — a z-raised panel forms a stacking context, so its
+     *  descendants stack WITH it (above lower-z siblings), never
+     *  independently UNDER it (a flat (z, index) sort painted a dialog card
+     *  over its own children). 0 = "auto" — keep walking ancestors. */
+    stackingZ(node) {
+        let n = node;
+        while (n) {
+            const z = Math.trunc(n.zIndex ?? 0);
+            if (z !== 0)
+                return z;
+            n = n.parentIndex >= 0 && n.parentIndex < this.nodes.length ? this.nodes[n.parentIndex] : undefined;
+        }
+        return 0;
+    }
     drawsBefore(a, b) {
-        const az = Math.trunc(a.zIndex ?? 0);
-        const bz = Math.trunc(b.zIndex ?? 0);
+        const az = this.stackingZ(a);
+        const bz = this.stackingZ(b);
         if (az !== bz)
             return az < bz;
         return a.index < b.index;
     }
     compareDrawOrder(a, b) {
-        const az = Math.trunc(a.zIndex ?? 0);
-        const bz = Math.trunc(b.zIndex ?? 0);
+        const az = this.stackingZ(a);
+        const bz = this.stackingZ(b);
         if (az !== bz)
             return az - bz;
         return a.index - b.index;
     }
     navigate(screenIdx) {
+        this.onDiagnostics?.(`NAV -> screen ${screenIdx}`);
         const next = Math.trunc(Number(screenIdx));
         if (!Number.isFinite(next) || next < 0 || next >= this.screenCount || next === this.activeScreen)
             return;
@@ -539,6 +621,20 @@ export class PreviewUIRuntime {
             this.keyboardPressedKey = -1;
             this.keyboardBackspaceHeld = false;
         }
+        this.closeSelectMenu(false);
+        this.drawerStates.clear();
+        for (const node of this.nodes) {
+            const n = node;
+            if (n.__drawerDx)
+                n.__drawerDx = 0;
+            if (n.__drawerDy)
+                n.__drawerDy = 0;
+            if (n.drawerSide !== undefined) {
+                n.transformOffsetX = 0;
+                n.transformOffsetY = 0;
+            }
+        }
+        this.seedDrawersClosed();
         this.gfx.fillScreen(0x0000);
         for (const node of this.nodes) {
             node.dirty = true;
@@ -555,6 +651,10 @@ export class PreviewUIRuntime {
             const value = this.evaluateExpression(binding.expression);
             if (binding.property === "text") {
                 const text = clampText(value);
+                // A text-bound node draws its buffer (build-time hasTextBinding only
+                // covers auto-wire/interpolation synthesis — ui.bind targets set it
+                // here so the bound string actually renders).
+                node.hasTextBinding = true;
                 if (text !== node.textBuffer) {
                     node.textBuffer = text;
                     this.markDirty(binding.nodeIndex);
@@ -830,11 +930,12 @@ export class PreviewUIRuntime {
     }
     baseDrawXForNode(nodeIndex) {
         const node = this.nodes[nodeIndex];
-        return node.box.x + (node.transformOffsetX ?? 0);
+        return node.box.x + (node.transformOffsetX ?? 0) + (node.__drawerDx ?? 0);
     }
     baseDrawYForNode(nodeIndex) {
-        let y = this.nodes[nodeIndex].box.y + (this.nodes[nodeIndex].transformOffsetY ?? 0);
-        let parent = this.nodes[nodeIndex].parentIndex;
+        const node = this.nodes[nodeIndex];
+        let y = node.box.y + (node.transformOffsetY ?? 0) + (node.__drawerDy ?? 0);
+        let parent = node.parentIndex;
         while (parent >= 0 && this.nodes[parent]) {
             if (this.nodes[parent].scrollable) {
                 y -= this.nodes[parent].scrollY;
@@ -883,9 +984,18 @@ export class PreviewUIRuntime {
         const y0 = Math.min(baseY, baseY + oy);
         const x1 = Math.max(baseX + node.box.w, baseX + ox + node.box.w);
         const y1 = Math.max(baseY + node.box.h, baseY + oy + node.box.h);
-        if (this.repairCurrentNodePaintWithParent(node, { x: x0, y: y0, w: x1 - x0, h: y1 - y0 }))
+        // Clip to the node's scroll viewport like every other clear path. During
+        // overscroll (rubber-band past the container edge) the box's draw position
+        // sits outside the viewport, and the node's own paint was clipped there —
+        // an unclipped clear/repair here paints parent background over foreign
+        // regions (e.g. the fixed header above the scroll body) and nothing re-
+        // dirties that region afterwards, leaving permanent holes.
+        const rect = this.intersectClipRect(this.scrollClipForNode(node.index), { x: x0, y: y0, w: x1 - x0, h: y1 - y0 });
+        if (rect.w <= 0 || rect.h <= 0)
             return;
-        this.gfx.fillRect(x0, y0, x1 - x0, y1 - y0, this.parentClearColor(node));
+        if (this.repairCurrentNodePaintWithParent(node, rect))
+            return;
+        this.gfx.fillRect(rect.x, rect.y, rect.w, rect.h, this.parentClearColor(node));
     }
     shadowExtents(node) {
         let left = 0;
@@ -1321,6 +1431,7 @@ export class PreviewUIRuntime {
             if (subtreeRect)
                 this.markOverlappingHigherLayersDirtyForRect(nodeIndex, subtreeRect);
             node.visible = false;
+            this.reflowAfterVisibility(nodeIndex);
             return;
         }
         node.visible = true;
@@ -1331,6 +1442,170 @@ export class PreviewUIRuntime {
             child.dirty = true;
             this.markOverlappingHigherLayersDirty(i);
         }
+        this.reflowAfterVisibility(nodeIndex);
+    }
+    // ── Visibility reflow (device parity: ui_reflow_visibility) ─────────────
+    // Layout is baked at build time; toggling visible alone leaves a collapsed
+    // pane's space reserved. Re-stack ancestor flow containers from the baked
+    // flowAxis/flowGap/flowFlags metadata, cascading until a container stops
+    // changing, then repaint the active screen once.
+    subtreeFlowExtent(c, axis) {
+        const base = axis === 1 ? this.nodes[c].box.y : this.nodes[c].box.x;
+        let maxEnd = base + (axis === 1 ? this.nodes[c].box.h : this.nodes[c].box.w);
+        const end = Math.min(this.nodes[c].subtreeEnd, this.nodes.length);
+        for (let j = c + 1; j < end; j++) {
+            const rel = (axis === 1 ? this.nodes[j].box.y : this.nodes[j].box.x) - base;
+            if (rel < 0)
+                continue;
+            const jEnd = rel + (axis === 1 ? this.nodes[j].box.h : this.nodes[j].box.w);
+            if (jEnd > maxEnd)
+                maxEnd = jEnd;
+        }
+        return maxEnd - base;
+    }
+    shiftSubtreeMain(c, axis, delta) {
+        const end = Math.min(this.nodes[c].subtreeEnd, this.nodes.length);
+        for (let j = c; j < end; j++) {
+            if (axis === 1)
+                this.nodes[j].box.y += delta;
+            else
+                this.nodes[j].box.x += delta;
+        }
+    }
+    restackFlowContainer(p) {
+        const axis = this.nodes[p].flowAxis === 2 ? 2 : this.nodes[p].flowAxis === 1 ? 1 : 0;
+        if (axis === 0)
+            return false;
+        const gap = this.nodes[p].flowGap ?? 0;
+        let startSlot = 0;
+        let cursor = 0;
+        let sawFlow = false;
+        let sawVisible = false;
+        let changed = false;
+        const end = Math.min(this.nodes[p].subtreeEnd, this.nodes.length);
+        for (let c = p + 1; c < end; c++) {
+            if (this.nodes[c].parentIndex !== p)
+                continue;
+            if (((this.nodes[c].flowFlags ?? 0) & 4) !== 0)
+                continue;
+            const rel = axis === 1
+                ? this.nodes[c].box.y - this.nodes[p].box.y
+                : this.nodes[c].box.x - this.nodes[p].box.x;
+            if (!sawFlow) {
+                startSlot = rel;
+                sawFlow = true;
+            }
+            if (!this.isEffectivelyVisible(this.nodes[c]))
+                continue;
+            if (!sawVisible) {
+                cursor = startSlot;
+                sawVisible = true;
+            }
+            const shift = cursor - rel;
+            if (shift !== 0) {
+                this.shiftSubtreeMain(c, axis, shift);
+                changed = true;
+            }
+            cursor += this.subtreeFlowExtent(c, axis) + gap;
+        }
+        if (!sawVisible)
+            return changed;
+        const autoMain = axis === 1
+            ? ((this.nodes[p].flowFlags ?? 0) & 1)
+            : ((this.nodes[p].flowFlags ?? 0) & 2);
+        if (autoMain) {
+            let newSize = cursor - gap + (axis === 1 ? this.nodes[p].paddingBottom ?? 0 : this.nodes[p].paddingRight ?? 0);
+            if (newSize < 1)
+                newSize = 1;
+            const cur = axis === 1 ? this.nodes[p].box.h : this.nodes[p].box.w;
+            if (newSize !== cur) {
+                if (axis === 1)
+                    this.nodes[p].box.h = newSize;
+                else
+                    this.nodes[p].box.w = newSize;
+                changed = true;
+            }
+        }
+        return changed;
+    }
+    reflowScrollContent(p) {
+        const node = this.nodes[p];
+        if (!node.scrollable || node.virtualized)
+            return;
+        let maxBottom = node.box.y;
+        const end = Math.min(node.subtreeEnd, this.nodes.length);
+        for (let j = p + 1; j < end; j++) {
+            if (!this.isEffectivelyVisible(this.nodes[j]))
+                continue;
+            const bottom = this.nodes[j].box.y + this.nodes[j].box.h;
+            if (bottom > maxBottom)
+                maxBottom = bottom;
+        }
+        const ch = Math.max(maxBottom - node.box.y, node.box.h);
+        node.contentHeight = ch;
+        const maxScroll = Math.max(0, ch - node.box.h);
+        if (node.scrollY > maxScroll)
+            node.scrollY = maxScroll;
+        node.lastPaintedScrollY = node.scrollY - (node.box.h > 0 ? node.box.h : 1);
+    }
+    reflowAfterVisibility(changedNode) {
+        let p = this.nodes[changedNode]?.parentIndex ?? -1;
+        let anyChange = false;
+        let guard = 0;
+        while (p >= 0 && p < this.nodes.length && guard++ < 64) {
+            const changedHere = this.restackFlowContainer(p);
+            this.reflowScrollContent(p);
+            if (!changedHere)
+                break;
+            anyChange = true;
+            p = this.nodes[p].parentIndex ?? -1;
+        }
+        if (!anyChange)
+            return;
+        for (const node of this.nodes) {
+            if ((node.screenId ?? 0) !== this.activeScreen)
+                continue;
+            node.dirty = true;
+            node.lastTextHeight = 0;
+        }
+    }
+    classifyDirtyAgainstOpenDrawers() {
+        for (const [dIdx, dState] of this.drawerStates) {
+            if (!dState.open || dState.progress < 1)
+                continue;
+            const drawer = this.nodes[dIdx];
+            if (!drawer)
+                continue;
+            const dX = this.drawXForNode(dIdx);
+            const dY = this.drawYForNode(dIdx);
+            for (const node of this.nodes) {
+                if (!node.dirty)
+                    continue;
+                if (node.index >= dIdx && node.index < drawer.subtreeEnd)
+                    continue;
+                if (!this.isActiveNode(node))
+                    continue;
+                const nX = this.drawXForNode(node.index);
+                const nY = this.drawYForNode(node.index);
+                if (nX + node.box.w <= dX || nX >= dX + drawer.box.w ||
+                    nY + node.box.h <= dY || nY >= dY + drawer.box.h)
+                    continue;
+                const fullyCovered = nX >= dX && nY >= dY &&
+                    nX + node.box.w <= dX + drawer.box.w &&
+                    nY + node.box.h <= dY + drawer.box.h;
+                if (fullyCovered && drawer.hasBg && drawer.opacity >= 100) {
+                    node.dirty = false;
+                }
+                else {
+                    drawer.dirty = true;
+                    drawer.lastTextHeight = 0;
+                    for (let c = dIdx + 1; c < drawer.subtreeEnd && c < this.nodes.length; c++) {
+                        this.nodes[c].dirty = true;
+                        this.nodes[c].lastTextHeight = 0;
+                    }
+                }
+            }
+        }
     }
     scrollClipForNode(nodeIndex) {
         let parent = this.nodes[nodeIndex].parentIndex;
@@ -1374,7 +1649,10 @@ export class PreviewUIRuntime {
         for (const node of this.nodes) {
             if (!this.isActiveNode(node))
                 continue;
-            if (!node.scrollable || !this.isEffectivelyVisible(node) || node.contentHeight <= node.box.h)
+            // Device parity (dirty-draw-phase): generic scroll passes skip
+            // VIRTUALIZED nodes — lists own their full draw (rows + scrollbar)
+            // in drawListNode. Letting this pass clear a list wipes its rows.
+            if (!node.scrollable || node.virtualized || !this.isEffectivelyVisible(node) || node.contentHeight <= node.box.h)
                 continue;
             if (node.dirty) {
                 this.markScrollDescendantsDirtyLocal(node.index);
@@ -1397,7 +1675,10 @@ export class PreviewUIRuntime {
         for (const node of this.nodes) {
             if (!this.isActiveNode(node))
                 continue;
-            if (!node.scrollable || !this.isEffectivelyVisible(node) || node.contentHeight <= node.box.h)
+            // Device parity (dirty-draw-phase): virtualized lists draw their own
+            // scrollbar in drawListNode — drawing here too overdrew it with the
+            // old dim and clamped scrollY against the node-level contentHeight.
+            if (!node.scrollable || node.virtualized || !this.isEffectivelyVisible(node) || node.contentHeight <= node.box.h)
                 continue;
             if (!scrollbarDirty.has(node.index))
                 continue;
@@ -1405,7 +1686,7 @@ export class PreviewUIRuntime {
             const ty = node.box.y;
             const th = node.box.h;
             node.scrollY = Math.max(0, Math.min(node.scrollY, node.contentHeight - th));
-            const trackColor = (node.fg >> 1) & 0x7bef;
+            const trackColor = dimRuntimeColor(node.fg);
             this.gfx.fillRect(tx, ty, 3, th, trackColor);
             const thumbH = Math.max(8, Math.trunc((th * th) / node.contentHeight));
             const thumbY = ty + Math.trunc(((node.box.h - thumbH) * node.scrollY) / Math.max(1, node.contentHeight - th));
@@ -1774,6 +2055,13 @@ export class PreviewUIRuntime {
             if (this.isActiveNode(node) && this.isEffectivelyVisible(node) && node.scrollable && node.dirty)
                 scrollbarDirty.add(node.index);
         }
+        // Open-drawer overlap pre-pass (device parity, the dirty-draw loop's
+        // classification): a dirty node under a fully-open opaque drawer paints
+        // its clear+redraw over the panel — a bound text behind the drawer erases
+        // the drawer's buttons. Fully covered -> nothing of it is visible, drop
+        // the dirty flag; partially covered -> re-dirty that drawer's subtree so
+        // it re-stamps on top in this same pass (its z sorts it after).
+        this.classifyDirtyAgainstOpenDrawers();
         const dirtyNodes = this.nodes
             .filter((node) => {
             if (!node.dirty)
@@ -1792,7 +2080,7 @@ export class PreviewUIRuntime {
         for (const node of dirtyNodes) {
             if (!node.dirty)
                 continue;
-            if (!this.isEffectivelyVisible(node)) {
+            if (!this.isEffectivelyVisible(node) || this.insideClosedDrawer(node.index)) {
                 node.dirty = false;
                 continue;
             }
@@ -1827,8 +2115,15 @@ export class PreviewUIRuntime {
             if (node.opacity < 100)
                 fillBg = blendRuntime(node.bg, this.parentClearColor(node), node.opacity);
             this.gfx.withClipRect(scrollClip, () => {
-                node.box.x = baseX;
-                this.drawNodeShadow(node, baseY, false);
+                // Lists draw their outset shadow inside drawListNode, on the
+                // full-repaint path only. The shadow rect spans the element, so
+                // pre-drawing it here would paint over the live viewport pixels the
+                // shift path is about to copy (device parity: the C++ main loop also
+                // skips the outset shadow for lists — see node-draw-body.ts).
+                if (node.kind !== "list") {
+                    node.box.x = baseX;
+                    this.drawNodeShadow(node, baseY, false);
+                }
                 node.box.x = drawX;
                 switch (node.kind) {
                     case "fill":
@@ -1892,9 +2187,72 @@ export class PreviewUIRuntime {
             changed = true;
             node.box.x = origBoxX;
             node.dirty = false;
+            if (this.debugCapture) {
+                this.debugPaintedRects.push({ x: drawX, y: drawY, w: node.box.w, h: node.box.h });
+            }
         }
         return this.drawScrollbars(scrollbarDirty) || changed;
     }
+    /** Enable/disable per-frame debug geometry capture (the client overlay
+     *  reads it; zero cost while off). */
+    setDebugCapture(on) {
+        this.debugCapture = on;
+        if (!on)
+            this.debugPaintedRects = [];
+    }
+    /** Current-frame debug geometry for the client overlay: every visible node
+     *  on the active screen at its CURRENT draw position (transform/press/
+     *  drawer/scroll offsets applied), the scroll viewport clips, and the
+     *  regions painted this tick (dirty-flash). Coordinates are logical
+     *  display pixels, matching the app canvas 1:1. */
+    debugInfo() {
+        const nodes = [];
+        for (let i = 0; i < this.nodes.length; i++) {
+            const node = this.nodes[i];
+            if (!this.isActiveNode(node) || !this.isEffectivelyVisible(node))
+                continue;
+            if (this.insideClosedDrawer(i))
+                continue;
+            nodes.push({
+                i,
+                id: node.id,
+                tag: node.tag,
+                kind: String(node.kind),
+                x: this.drawXForNode(i),
+                y: this.drawYForNode(i),
+                w: node.box.w,
+                h: node.box.h,
+                tappable: this.hasAnyHandler(i),
+            });
+        }
+        const clips = [];
+        for (const node of this.nodes) {
+            if (!this.isActiveNode(node) || !node.scrollable)
+                continue;
+            clips.push({ x: node.box.x, y: node.box.y, w: node.box.w, h: node.box.h });
+        }
+        return { nodes, clips, painted: this.debugPaintedRects.slice() };
+    }
+    /** Inspect-on-tap: topmost node (draw order) whose CURRENT draw box
+     *  contains the point — unlike hitTest, containers count too. Returns the
+     *  index, or -1. */
+    debugHit(tx, ty) {
+        let best = -1;
+        for (let i = 0; i < this.nodes.length; i++) {
+            const node = this.nodes[i];
+            if (!this.isActiveNode(node) || !this.isEffectivelyVisible(node))
+                continue;
+            if (this.insideClosedDrawer(i))
+                continue;
+            const x = this.drawXForNode(i);
+            const y = this.drawYForNode(i);
+            if (tx >= x && tx < x + node.box.w && ty >= y && ty < y + node.box.h) {
+                if (best < 0 || this.drawsBefore(this.nodes[best], node))
+                    best = i;
+            }
+        }
+        return best;
+    }
     lineX(node, lineWidth, left, maxWidth, align = node.textAlign) {
         if (align === 1)
             return left + Math.trunc((maxWidth - lineWidth) / 2);
@@ -2158,6 +2516,17 @@ export class PreviewUIRuntime {
         const deltaY = node.scrollY - node.lastPaintedScrollY;
         const absDelta = Math.abs(deltaY);
         const canShift = deltaY !== 0 && absDelta < node.box.h;
+        if (!canShift) {
+            // Full repaint: outset shadow at the rest position first, then the bg
+            // fill covers its interior overlap. Skipped on the shift path — the
+            // shadow rect spans the element and would destroy the pixels about to
+            // be shifted (device parity: ui_draw_shadow(i, by, 0) only when
+            // !canShiftList, before the canvas push).
+            const origX = node.box.x;
+            node.box.x = this.baseDrawXForNode(node.index);
+            this.drawNodeShadow(node, this.baseDrawYForNode(node.index), false);
+            node.box.x = origX;
+        }
         const repaint = canShift
             ? this.shiftListViewport(node, drawY, deltaY, bg)
             : (() => {
@@ -2170,7 +2539,10 @@ export class PreviewUIRuntime {
             const listClip = this.intersectClipRect(scrollClip, { x: node.box.x, y: drawY, w: node.box.w, h: node.box.h });
             this.gfx.withClipRect(listClip, () => {
                 const tx = node.box.x + node.box.w - 4;
-                const trackColor = (node.fg >> 1) & 0x7bef;
+                // Halve the track color at the ACTIVE depth (device parity: the
+                // runtime's UI_DIM_MASK is 0x7BEF on 565, 0x7F7F7F on 888 — the old
+                // 565-only mask channel-shifted the track on rgb888 targets).
+                const trackColor = dimRuntimeColor(node.fg);
                 this.gfx.fillRect(tx, drawY, 3, node.box.h, trackColor);
                 const thumbH = Math.max(8, Math.trunc((node.box.h * node.box.h) / listContentH));
                 const maxScroll = Math.max(1, listContentH - node.box.h);
@@ -2307,7 +2679,11 @@ export class PreviewUIRuntime {
             }
         }
     }
-    drawButtonNode(node, displayText, bColor, fillBg, drawY, ts) {
+    drawButtonNode(node, displayText, bColorIn, fillBgIn, drawY, ts) {
+        // HTML disabled: halve the drawn colors (web-like faded control;
+        // device parity: NODE_BUTTON does the same).
+        const bColor = node.disabled ? dimDisabledColor(bColorIn) : bColorIn;
+        const fillBg = node.disabled ? dimDisabledColor(fillBgIn) : fillBgIn;
         if (node.borderRadius > 0 && node.hasBg)
             this.gfx.fillRoundRect(node.box.x, drawY, node.box.w, node.box.h, node.borderRadius, fillBg);
         else if (node.hasBg)
@@ -2334,7 +2710,9 @@ export class PreviewUIRuntime {
     // selected option), so clear the previous text rect before redrawing.
     drawSelectNode(node, displayText, bColor, fillBg, drawY, ts) {
         const insets = this.textInsets(node);
-        const contentW = Math.max(1, node.box.w - insets.left - insets.right);
+        // The right end reserves 14px for the dropdown chevron — the label wraps
+        // against the reduced width, never under the chevron.
+        const contentW = Math.max(1, node.box.w - insets.left - insets.right - 14);
         const layout = this.textLayout(node, displayText, contentW, ts);
         const clearW = Math.max(node.box.w, node.lastTextWidth ?? 0, layout.width + insets.left + insets.right);
         const clearH = Math.max(node.box.h, node.lastTextHeight ?? 0, layout.height + insets.top + insets.bottom);
@@ -2351,34 +2729,75 @@ export class PreviewUIRuntime {
             this.drawNodeBorder(node, node.box.x, drawY, bColor);
         const textX = node.box.x + insets.left;
         const textY = drawY + insets.top;
-        const textW = Math.max(1, node.box.w - insets.left - insets.right);
+        // Reserve the right end for the dropdown chevron so the label never
+        // collides with it (mirrors NODE_SELECT on device).
+        const textW = Math.max(1, node.box.w - insets.left - insets.right - 14);
         const textH = Math.max(1, node.box.h - insets.top - insets.bottom);
         const top = textY + Math.trunc((textH - layout.height) / 2);
         const glyphBg = node.opacity < 100 ? blendRuntime(node.bg, this.parentClearColor(node), node.opacity) : (node.hasBg ? node.bg : node.clearColor);
         this.drawTextLines(node, displayText, textX, top, textW, ts, node.fg, glyphBg, node.textAlign);
+        // Dropdown chevron: a small solid ▾ at the right end — the affordance
+        // that the control opens/cycles options.
+        const chX = node.box.x + node.box.w - insets.right - 11;
+        const chY = drawY + Math.trunc((node.box.h - 5) / 2);
+        this.gfx.fillRect(chX, chY, 9, 1, node.fg);
+        this.gfx.fillRect(chX + 1, chY + 1, 7, 1, node.fg);
+        this.gfx.fillRect(chX + 2, chY + 2, 5, 1, node.fg);
+        this.gfx.fillRect(chX + 3, chY + 3, 3, 1, node.fg);
+        this.gfx.fillRect(chX + 4, chY + 4, 1, 1, node.fg);
     }
     drawCheckNode(node, displayText, drawY, ts) {
         const layout = this.textLayout(node, displayText, Math.max(0, node.box.w - 22), ts);
         const clearW = Math.max(node.box.w, node.lastTextWidth);
         const clearH = Math.max(node.box.h, node.lastTextHeight ?? 0, layout.height);
-        this.gfx.fillRect(node.box.x, drawY, clearW, clearH, node.hasBg ? node.bg : node.clearColor);
+        // border-radius > 0 (kit .switch pills): clear the full text rect to the
+        // backdrop, then paint the rounded box. Device parity: NODE_CHECK does the
+        // same via ui_display_fill_round_rect. The :checked pair (kit wires it to
+        // --primary/--primary-foreground) swaps the TRACK color when on.
+        const onFill = node.value && node.checkedBg >= 0 ? node.checkedBg : node.bg;
+        if (node.borderRadius > 0 && node.hasBg) {
+            this.gfx.fillRect(node.box.x, drawY, clearW, clearH, this.parentClearColor(node));
+            this.gfx.fillRoundRect(node.box.x, drawY, node.box.w, node.box.h, node.borderRadius, onFill);
+        }
+        else {
+            this.gfx.fillRect(node.box.x, drawY, clearW, clearH, node.hasBg ? node.bg : node.clearColor);
+        }
         node.lastTextWidth = 22 + layout.width;
         node.lastTextHeight = Math.max(layout.height, 16);
-        const cbX = node.box.x;
+        // Pills inset the 16px indicator from the left edge so the knob doesn't
+        // touch the rounded end; plain checkboxes keep it flush (unchanged look).
+        // The knob SLIDES with state — left when off, right when on — the switch
+        // affordance (static jump; no travel animation).
+        const knobSlide = node.borderRadius > 0 ? Math.max(0, node.box.w - 16 - 6) : 0;
+        const cbX = (node.borderRadius > 0 ? node.box.x + 3 : node.box.x) + (node.value ? knobSlide : 0);
         // Vertically center the 16px indicator within the box so a tall
         // (touch-friendly) checkbox doesn't pin the indicator to the top.
         // (box.h - 16) / 2 is 0 for the default 16px-tall box.
         const checkOff = Math.max(0, ((node.box.h - 16) / 2) | 0);
         const cbY = drawY + checkOff;
         if (node.value) {
-            this.gfx.fillRect(cbX, cbY, 16, 16, node.fg);
-            const inv = node.hasBg ? node.bg : node.clearColor;
-            this.gfx.drawLine(cbX + 3, cbY + 8, cbX + 7, cbY + 12, inv);
-            this.gfx.drawLine(cbX + 4, cbY + 8, cbX + 8, cbY + 12, inv);
-            this.gfx.drawLine(cbX + 3, cbY + 9, cbX + 7, cbY + 13, inv);
-            this.gfx.drawLine(cbX + 7, cbY + 12, cbX + 13, cbY + 4, inv);
-            this.gfx.drawLine(cbX + 8, cbY + 12, cbX + 14, cbY + 4, inv);
-            this.gfx.drawLine(cbX + 7, cbY + 13, cbX + 13, cbY + 5, inv);
+            if (node.borderRadius > 0) {
+                // Switch pill: the knob stays a knob — a solid circle when on, no
+                // checkbox square + checkmark. Same geometry as the radio indicator.
+                // The knob carries the :checked color (primary-foreground).
+                this.gfx.fillCircle(cbX + 8, cbY + 8, 7, node.checkedFg >= 0 ? node.checkedFg : node.fg);
+            }
+            else {
+                // Checked face carries the :checked background (primary), the
+                // checkmark its color (primary-foreground).
+                this.gfx.fillRect(cbX, cbY, 16, 16, node.checkedBg >= 0 ? node.checkedBg : node.fg);
+                const inv = node.checkedFg >= 0 ? node.checkedFg : (node.hasBg ? node.bg : node.clearColor);
+                this.gfx.drawLine(cbX + 3, cbY + 8, cbX + 7, cbY + 12, inv);
+                this.gfx.drawLine(cbX + 4, cbY + 8, cbX + 8, cbY + 12, inv);
+                this.gfx.drawLine(cbX + 3, cbY + 9, cbX + 7, cbY + 13, inv);
+                this.gfx.drawLine(cbX + 7, cbY + 12, cbX + 13, cbY + 4, inv);
+                this.gfx.drawLine(cbX + 8, cbY + 12, cbX + 14, cbY + 4, inv);
+                this.gfx.drawLine(cbX + 7, cbY + 13, cbX + 13, cbY + 5, inv);
+            }
+        }
+        else if (node.borderRadius > 0) {
+            // Off-state pill: hollow circular knob outline on the track.
+            this.gfx.drawCircle(cbX + 8, cbY + 8, 7, node.fg);
         }
         else {
             this.gfx.drawRect(cbX, cbY, 16, 16, node.fg);
@@ -2397,7 +2816,8 @@ export class PreviewUIRuntime {
         const radioOff = Math.max(0, ((node.box.h - 16) / 2) | 0);
         const cbY = drawY + radioOff;
         if (node.value) {
-            this.gfx.fillCircle(cbX + 8, cbY + 8, 7, node.fg);
+            // The selected ring carries the :checked background (primary).
+            this.gfx.fillCircle(cbX + 8, cbY + 8, 7, node.checkedBg >= 0 ? node.checkedBg : node.fg);
             this.gfx.fillCircle(cbX + 8, cbY + 8, 3, node.hasBg ? node.bg : node.clearColor);
         }
         else {
@@ -2436,7 +2856,7 @@ export class PreviewUIRuntime {
         const bh = node.box.h;
         const fgCol = node.fg;
         const bgCol = node.hasBg ? node.bg : node.clearColor;
-        const dimFg = (fgCol >> 1) & 0x7bef;
+        const dimFg = dimRuntimeColor(fgCol);
         const trackY = by + Math.trunc(bh / 2);
         const rangeMin = node.rangeMin;
         const rangeMax = node.rangeMax;
@@ -2477,13 +2897,16 @@ export class PreviewUIRuntime {
         const by = drawY;
         const bw = node.box.w;
         const bh = node.box.h;
-        const bgCol = node.hasBg ? node.bg : node.clearColor;
-        const fgCol = node.fg;
-        const border = node.borderColor || fgCol;
+        // HTML disabled: halve the drawn colors (web-like faded control;
+        // device parity: NODE_INPUT does the same).
+        const dis = node.disabled === true;
+        const bgCol = node.hasBg ? (dis ? dimDisabledColor(node.bg) : node.bg) : (dis ? dimDisabledColor(node.clearColor) : node.clearColor);
+        const fgCol = dis ? dimDisabledColor(node.fg) : node.fg;
+        const border = dis ? dimDisabledColor(node.borderColor || node.fg) : (node.borderColor || fgCol);
         const borderStyle = node.borderStyle || 1;
         const borderWidth = node.borderWidth || 1;
         const displayText = node.textBuffer || node.placeholder || node.text || "";
-        const textColor = node.textBuffer ? fgCol : ((fgCol >> 1) & 0x7bef);
+        const textColor = node.textBuffer ? fgCol : dimRuntimeColor(fgCol);
         const ts = this.nodeTextSize(node);
         const clippedText = this.clipTextToWidth(displayText, Math.max(0, bw - 8), ts, node.fontFace, node.letterSpacing);
         if (node.borderRadius > 0)
@@ -2494,13 +2917,25 @@ export class PreviewUIRuntime {
         this.drawText(clippedText, bx + 4, by + Math.trunc((bh - this.textHeight(ts, node.fontFace)) / 2), textColor, bgCol, ts, node.fontAntialias, node.fontFace, node.letterSpacing);
     }
     hitTest(tx, ty) {
-        let best = -1;
+        // Phase 1 — the event target: the TOPMOST node containing the tap
+        // (stacking order), regardless of handlers. Filtering for
+        // handler-bearing nodes here let a tap fall through SIBLING layers — a
+        // modal card (no handler) over a click-to-close scrim (handler) sent
+        // every card tap to the scrim, so any tap dismissed the dialog. The DOM
+        // rule: the click targets the topmost element, then bubbles to
+        // ANCESTORS only — never sideways to a covered sibling.
+        let target = -1;
         for (let i = 0; i < this.nodes.length; i++) {
             const node = this.nodes[i];
             if (!this.isEffectivelyVisible(node))
                 continue;
             if (!this.isActiveNode(node))
                 continue;
+            if (this.insideClosedDrawer(i))
+                continue;
+            // HTML disabled: not a tap target (device parity: ui_hit_test skips it).
+            if (node.disabled)
+                continue;
             const drawX = this.drawXForNode(i);
             const drawY = this.drawYForNode(i);
             if (tx >= drawX && tx < drawX + node.box.w && ty >= drawY && ty < drawY + node.box.h) {
@@ -2511,11 +2946,23 @@ export class PreviewUIRuntime {
                 const clip = this.scrollClipForNode(i);
                 if (clip && (tx < clip.x || tx >= clip.x + clip.w || ty < clip.y || ty >= clip.y + clip.h))
                     continue;
-                if (this.hasAnyHandler(i) && (best < 0 || this.drawsBefore(this.nodes[best], node)))
-                    best = i;
+                if (target < 0 || this.drawsBefore(this.nodes[target], node))
+                    target = i;
             }
         }
-        return best;
+        // Phase 2 — bubbling: from the target up through its ancestors.
+        // Interactive kinds match even with no JS handler wired (:pressed/
+        // transition feedback); otherwise the first handler-bearing ancestor.
+        let n = target;
+        while (n >= 0) {
+            const node = this.nodes[n];
+            if (this.hasAnyHandler(n))
+                return n;
+            if (node.parentIndex < 0 || node.parentIndex >= this.nodes.length)
+                break;
+            n = node.parentIndex;
+        }
+        return -1;
     }
     // Unified scroll hit-scan: one pass over scrollable nodes. Lists are
     // scrollable (UA rule) and their contentHeight is seeded on the node by
@@ -2712,6 +3159,16 @@ export class PreviewUIRuntime {
             this.lastTouchTime = now;
             return;
         }
+        // Modal <select> list: route taps to the option rows; swallow normal
+        // hit-testing/scrolling while open (device parity: ui_touch_up).
+        if (this.selectMenuNode >= 0) {
+            if (this.touchState === 0 && now - this.lastTouchTime >= UI_TOUCH_DEBOUNCE_MS) {
+                this.touchState = 1;
+                this.touchDownTime = now;
+            }
+            this.lastTouchTime = now;
+            return;
+        }
         if (this.touchState === 0) {
             if (now - this.lastTouchTime < UI_TOUCH_DEBOUNCE_MS)
                 return;
@@ -2788,6 +3245,16 @@ export class PreviewUIRuntime {
             this.lastReleaseTime = now;
             return;
         }
+        if (this.selectMenuNode >= 0) {
+            this.selectMenuHandleTouch(this.lastTouchX, this.lastTouchY);
+            this.touchState = 0;
+            this.touchNode = -1;
+            this.isDragging = false;
+            this.scrollNode = -1;
+            this.rangeNode = -1;
+            this.lastReleaseTime = now;
+            return;
+        }
         const elapsed = now - this.touchDownTime;
         const node = this.touchNode;
         // Release the scroll owner: arm a bounded settle (bounce-back / edge-snap).
@@ -2813,6 +3280,19 @@ export class PreviewUIRuntime {
                 this.setPressed(node, false);
             this.markDirty(node);
         }
+        // Open drawers close on outside taps (shadcn drawer behavior). Taps
+        // inside an open drawer hit its controls normally.
+        for (const [idx, state] of this.drawerStates) {
+            if (!state.open || state.progress < 1)
+                continue;
+            const drawer = this.nodes[idx];
+            const dx = this.drawXForNode(idx);
+            const dy = this.drawYForNode(idx);
+            if (this.lastTouchX < dx || this.lastTouchX >= dx + drawer.box.w ||
+                this.lastTouchY < dy || this.lastTouchY >= dy + drawer.box.h) {
+                state.open = false;
+            }
+        }
         // Resume any `await ui.onTap()` awaiter. Runs for EVERY completed tap —
         // including empty-space taps (node == -1) and holds released above — so
         // "wake on any touch" works. After the click/release dispatch so onClick
@@ -2833,9 +3313,9 @@ export class PreviewUIRuntime {
             this.markDirty(nodeIndex);
         }
         else if (node.tag === "select") {
-            const count = Math.max(node.options?.length ?? 0, 1);
-            node.value = (node.value + 1) % count;
-            this.markDirty(nodeIndex);
+            // Tap opens a modal option list (device parity: ui_select_menu_open);
+            // selecting a row in the modal sets the value.
+            this.openSelectMenu(nodeIndex);
         }
         else if (node.tag === "radio") {
             for (const candidate of this.nodes) {
@@ -2861,6 +3341,317 @@ export class PreviewUIRuntime {
         }
         return node.inputType === "number" ? DEFAULT_NUMBER_KEYBOARD : DEFAULT_ALPHA_KEYBOARD;
     }
+    // ── <drawer>: slide-in panel modals ─────────────────────────────────────
+    // Drawers are author-styled absolute panels (position/left/top/width/height
+    // in CSS); the runtime slides the subtree in from the configured edge via
+    // per-node transform offsets, hides the subtree while closed, and closes on
+    // outside taps. Sliding mutates offsets + dirties the subtree exactly like
+    // the keyframe transform path, so all existing clear/repair machinery runs.
+    /** node index -> { open, progress } for every <drawer>; absent = closed. */
+    drawerStates = new Map();
+    // ── Debug overlay data (preview-only; the client canvas draws the boxes) ──
+    /** True while the client wants per-frame debug geometry + paint rects. */
+    debugCapture = false;
+    /** Node paint rects drawn during this tick (cleared at tick start). */
+    debugPaintedRects = [];
+    /** Drawer animation step per tick (~180ms full slide). */
+    /** <toast> auto-close windows, keyed by drawer slot node index. */
+    toastElapsed = new Map();
+    applyDrawers(deltaMs) {
+        // <toast duration>: once fully open, count up and auto-close.
+        for (const [idx, state] of this.drawerStates) {
+            const node = this.nodes[idx];
+            const duration = node.toastDuration ?? 0;
+            if (duration > 0 && state.open && state.progress === 1) {
+                const elapsed = (this.toastElapsed.get(idx) ?? 0) + deltaMs;
+                if (elapsed >= duration) {
+                    state.open = false;
+                    this.toastElapsed.delete(idx);
+                }
+                else {
+                    this.toastElapsed.set(idx, elapsed);
+                }
+            }
+            else if (!state.open) {
+                this.toastElapsed.delete(idx);
+            }
+        }
+        for (const [idx, state] of this.drawerStates) {
+            const target = state.open ? 1 : 0;
+            if (state.progress === target)
+                continue;
+            const step = Math.min(1, deltaMs / 180);
+            const next = state.progress + Math.sign(target - state.progress) * Math.min(step, Math.abs(target - state.progress));
+            this.setDrawerProgress(idx, next);
+            if (next === 0 && !state.open)
+                this.drawerStates.delete(idx);
+        }
+    }
+    drawerNodeById(id) {
+        return this.nodes.find((n) => (n.drawerSide ?? -1) >= 0 && n.id === id);
+    }
+    drawerOpen(id) {
+        const node = this.drawerNodeById(id);
+        if (!node)
+            return;
+        this.toastElapsed.delete(node.index); // <toast>: restart the auto-close window
+        if (!this.drawerStates.has(node.index)) {
+            this.drawerStates.set(node.index, { open: true, progress: 0 });
+            this.setDrawerProgress(node.index, 0);
+        }
+        else {
+            this.drawerStates.get(node.index).open = true;
+        }
+    }
+    drawerClose(id) {
+        if (id !== undefined) {
+            const node = this.drawerNodeById(id);
+            if (node) {
+                const st = this.drawerStates.get(node.index);
+                if (st)
+                    st.open = false;
+            }
+            return;
+        }
+        for (const st of this.drawerStates.values())
+            st.open = false;
+    }
+    /** Slide extent for a drawer or toast: the panel must clear the display
+     *  edge completely — its own height parks a bottom:0 panel's top row at
+     *  the fold (a visible sliver after close). Centered dialogs don't slide. */
+    drawerExtent(node) {
+        const n = node;
+        const side = n.drawerSide ?? 0;
+        const extent = side === 2 || side === 3 ? node.box.w : node.box.h;
+        if (side === 4)
+            return 0;
+        // Rest position (box minus ancestor scroll; transform offsets hold the
+        // current slide), then clear the display edge along the travel axis.
+        let restX = node.box.x;
+        let restY = node.box.y;
+        let parent = node.parentIndex;
+        while (parent >= 0 && this.nodes[parent]) {
+            const pn = this.nodes[parent];
+            if (pn.scrollable)
+                restY -= pn.scrollY;
+            parent = pn.parentIndex;
+        }
+        const need = side === 0 ? this.snapshot.program.height - restY
+            : side === 1 ? restY + node.box.h
+                : side === 2 ? restX + node.box.w
+                    : this.snapshot.program.width - restX;
+        return Math.max(extent, need);
+    }
+    /** Apply a slide progress to the drawer subtree: offsets shift from the
+     *  edge; the subtree is hidden at 0. Erases the previous frame's region via
+     *  the standard subtree clear + marks descendants dirty (same contract as
+     *  animated transform changes). */
+    setDrawerProgress(nodeIndex, progress) {
+        const state = this.drawerStates.get(nodeIndex);
+        if (!state)
+            return;
+        const node = this.nodes[nodeIndex];
+        const side = node.drawerSide ?? 0;
+        const travel = Math.round((1 - progress) * this.drawerExtent(node));
+        const dx = side === 2 ? -travel : side === 3 ? travel : 0;
+        const dy = side === 1 ? -travel : side === 0 ? travel : 0;
+        // Erase the subtree's current paint before moving it. The clear fills
+        // with the parent background only — everything the drawer COVERED
+        // (siblings underneath) must repaint too, so mark every active-screen
+        // node outside the drawer subtree dirty. Full-screen redraw per slide
+        // frame is the same contract as the select modal's close path.
+        const rect = this.currentSubtreePaintRect(node);
+        if (rect)
+            this.clearNodePaintRect(node, rect);
+        for (const n of this.nodes) {
+            if (!this.isActiveNode(n) || n.index >= node.index && n.index < node.subtreeEnd)
+                continue;
+            if (this.insideClosedDrawer(n.index))
+                continue;
+            n.dirty = true;
+        }
+        for (let i = node.index; i < node.subtreeEnd; i++) {
+            const n = this.nodes[i];
+            if (!this.isActiveNode(n))
+                continue;
+            n.transformOffsetX = i === node.index ? dx : n.transformOffsetX;
+            n.transformOffsetY = i === node.index ? dy : n.transformOffsetY;
+            if (i !== node.index) {
+                // Descendants keep a private offset delta (they don't inherit the
+                // drawer's transformOffset), so store the slide delta per node.
+                n.__drawerDx = dx;
+                n.__drawerDy = dy;
+            }
+            n.dirty = true;
+        }
+        state.progress = progress;
+        this.directFrameChanged = true;
+    }
+    /** True while the node sits inside a fully-closed drawer (skip in draws and
+     *  hit tests). Drawers with no state entry are closed. */
+    insideClosedDrawer(nodeIndex) {
+        // Centered overlay roots (<dialog>, side 4) hide via the closed-state
+        // gate: their travel is 0, so offsets can't move them off-panel. Edge
+        // drawer/toast roots keep offset-only hiding (the bottom peek).
+        const self = this.nodes[nodeIndex];
+        if ((self.drawerSide ?? -1) === 4) {
+            const st = this.drawerStates.get(nodeIndex);
+            return !st || (!st.open && st.progress === 0);
+        }
+        for (const [idx, state] of this.drawerStates) {
+            const drawer = this.nodes[idx];
+            if (nodeIndex >= drawer.index && nodeIndex < drawer.subtreeEnd && state.progress === 0 && !state.open)
+                return true;
+        }
+        return this.drawerAncestorClosed(nodeIndex);
+    }
+    /** Walk ancestors: any drawer ancestor without an open/animating state. */
+    drawerAncestorClosed(nodeIndex) {
+        let parent = this.nodes[nodeIndex]?.parentIndex ?? -1;
+        while (parent >= 0 && this.nodes[parent]) {
+            const n = this.nodes[parent];
+            if ((n.drawerSide ?? -1) >= 0) {
+                const st = this.drawerStates.get(parent);
+                return !st || (!st.open && st.progress === 0);
+            }
+            parent = this.nodes[parent].parentIndex;
+        }
+        return false;
+    }
+    /** Apply the closed slide offsets to every drawer subtree (initial seed and
+     *  post-navigate reset) so closed drawers never paint at rest position. */
+    seedDrawersClosed() {
+        for (const n of this.nodes) {
+            const node = n;
+            if ((node.drawerSide ?? -1) < 0)
+                continue;
+            if (this.drawerStates.has(node.index))
+                continue;
+            const side = node.drawerSide ?? 0;
+            const travel = this.drawerExtent(node);
+            const dx = side === 2 ? -travel : side === 3 ? travel : 0;
+            const dy = side === 1 ? -travel : side === 0 ? travel : 0;
+            node.transformOffsetX = (node.transformOffsetX ?? 0) + dx;
+            node.transformOffsetY = (node.transformOffsetY ?? 0) + dy;
+            for (let i = node.index + 1; i < node.subtreeEnd; i++) {
+                const d = this.nodes[i];
+                d.__drawerDx = dx;
+                d.__drawerDy = dy;
+                d.dirty = false;
+            }
+        }
+    }
+    /** Shared geometry of the select modal: a centered list panel sized to
+     *  the options (capped to ~60% of the screen height). Rows are option
+     *  text, the current one inverted (fill = select bg, text = inverted). */
+    selectMenuGeometry() {
+        const node = this.nodes[this.selectMenuNode];
+        const options = node.options ?? [];
+        const rowH = 22;
+        const rows = options.length;
+        // Anchor to the select itself: same left edge and width, so the modal
+        // reads as the control's own dropdown (never overhangs toward a
+        // scrollbar). Clamp to the screen for selects that extend past it.
+        let x = node.box.x;
+        let w = Math.max(node.box.w, 120);
+        if (x + w > this.gfx.width)
+            w = this.gfx.width - x;
+        if (x < 0)
+            x = 0;
+        const h = Math.min(Math.trunc(this.gfx.height * 0.6), rows * rowH + 8);
+        const y = Math.trunc((this.gfx.height - h) / 2);
+        return { x, y, w, rowH, rows };
+    }
+    openSelectMenu(nodeIndex) {
+        const node = this.nodes[nodeIndex];
+        if (!node.options || node.options.length === 0)
+            return;
+        this.selectMenuNode = nodeIndex;
+        this.selectMenuDirty = true;
+    }
+    /** Close the modal. When `repaint`, mark the whole tree dirty so the
+     *  overlay is erased by a full redraw (navigate() clears the screen
+     *  itself, so it passes false). */
+    closeSelectMenu(repaint) {
+        if (this.selectMenuNode < 0)
+            return;
+        this.selectMenuNode = -1;
+        this.selectMenuDirty = false;
+        if (repaint) {
+            for (const node of this.nodes)
+                node.dirty = true;
+        }
+    }
+    /** Stamp the modal overlay on top of the current framebuffer. Idempotent
+     *  per frame — the close path full-repaints beneath it. */
+    drawSelectMenu() {
+        if (this.selectMenuNode < 0)
+            return;
+        const node = this.nodes[this.selectMenuNode];
+        if (!node.options || node.options.length === 0)
+            return;
+        const { x, y, w, rowH, rows } = this.selectMenuGeometry();
+        const h = Math.min(Math.trunc(this.gfx.height * 0.6), rows * rowH + 8);
+        // Themed panel: the select's own radius/border/bg — the modal reads as
+        // the control's popover, matching the surrounding UI (shadcn tokens on
+        // the .select class flow through: radius, border color, background).
+        const radius = Math.min(node.borderRadius || 6, Math.trunc(Math.min(w, h) / 2));
+        const panel = this.selectMenuPanelColor();
+        const borderCol = node.borderColor || node.fg;
+        this.gfx.fillRoundRect(x, y, w, h, radius, panel);
+        this.gfx.drawRoundRect(x, y, w, h, radius, borderCol);
+        const ts = this.nodeTextSize(node);
+        const rowInset = Math.max(2, Math.trunc(radius / 2));
+        // The selected row carries the :checked pair (the kit wires it to
+        // --accent/--accent-foreground, shadcn's SelectItem selected state).
+        const rowBg = node.checkedBg >= 0 ? node.checkedBg : node.fg;
+        const rowFg = node.checkedFg >= 0 ? node.checkedFg : panel;
+        for (let r = 0; r < rows; r++) {
+            const ry = y + 4 + r * rowH;
+            const current = r === node.value;
+            if (current) {
+                this.gfx.fillRoundRect(x + rowInset, ry, w - 2 * rowInset, rowH, Math.min(radius, 6), rowBg);
+            }
+            const text = clampText(node.options[r]?.text ?? "");
+            const fg = current ? rowFg : node.fg;
+            this.drawText(text, x + 22, ry + Math.trunc((rowH - 8 * ts) / 2), fg, panel, ts, node.fontAntialias, node.fontFace, 0);
+            if (current) {
+                // Check mark on the current row (the checked pair's color).
+                const cx = x + 7;
+                const cy = ry + Math.trunc(rowH / 2);
+                this.gfx.drawLine(cx, cy, cx + 3, cy + 3, rowFg);
+                this.gfx.drawLine(cx + 3, cy + 3, cx + 8, cy - 4, rowFg);
+            }
+        }
+        this.selectMenuDirty = false;
+    }
+    /** Panel fill: the select's effective background, falling back to a
+     *  near-black card on unstyled selects. */
+    selectMenuPanelColor() {
+        const node = this.nodes[this.selectMenuNode];
+        return node.hasBg ? node.bg : node.clearColor;
+    }
+    /** Route a tap while the modal is open: a row selects + closes; anything
+     *  else just closes (dismiss on outside tap). */
+    selectMenuHandleTouch(tx, ty) {
+        const node = this.nodes[this.selectMenuNode];
+        if (!node.options) {
+            this.closeSelectMenu(true);
+            return;
+        }
+        const { x, y, w, rowH, rows } = this.selectMenuGeometry();
+        const h = Math.min(Math.trunc(this.gfx.height * 0.6), rows * rowH + 8);
+        if (tx >= x && tx < x + w && ty >= y && ty < y + h) {
+            const row = Math.trunc((ty - y - 4) / rowH);
+            if (row >= 0 && row < rows) {
+                node.value = row;
+                node.hasTextBinding = true;
+                node.textBuffer = clampText(node.options[row]?.text ?? "");
+                this.markDirty(node.index);
+            }
+        }
+        this.closeSelectMenu(true);
+    }
     keyboardOpen(nodeIndex) {
         const node = this.nodes[nodeIndex];
         const template = this.keyboardTemplateForNode(node);
@@ -3183,15 +3974,80 @@ export class PreviewUIRuntime {
         // Rewrite bare references to module-scoped variables into moduleScope.NAME
         // so reads/writes hit the shared mutable binding (mirrors the device hoisting
         // them to globals). Skip property accesses (foo.bar) so `screen.gauge.value`
-        // etc. are untouched. Identifiers are the exact, finite set of module vars.
+        // etc. are untouched — and skip STRING/TEMPLATE LITERAL CONTENTS: prose like
+        // "taps inside:" inside a template literal contains the identifier `taps`
+        // as a whole word and must not be rewritten (only ${...} segments of
+        // templates are code).
         const names = this.moduleVarNames();
         if (names.length) {
             const alt = names.map((n) => n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
             const re = new RegExp(`(?<![\\w.$])\\b(${alt})\\b(?!\\s*:)`, "g");
-            out = out.replace(re, "moduleScope.$1");
+            out = this.rewriteOutsideLiterals(out, re);
         }
         return out;
     }
+    /** Apply `re` to code segments only: skip '..'/".." literal contents, and
+     *  inside `..` templates recurse into ${...} interpolations (their
+     *  expressions are code; the literal text between them is not). */
+    rewriteOutsideLiterals(text, re) {
+        let out = "";
+        let code = "";
+        let i = 0;
+        const flush = () => { out += code.replace(re, "moduleScope.$1"); code = ""; };
+        while (i < text.length) {
+            const ch = text[i];
+            if (ch === "'" || ch === '"') {
+                flush();
+                let j = i + 1;
+                while (j < text.length && text[j] !== ch) {
+                    if (text[j] === "\\")
+                        j++;
+                    j++;
+                }
+                out += text.slice(i, Math.min(j + 1, text.length));
+                i = j + 1;
+                continue;
+            }
+            if (ch === "`") {
+                flush();
+                // Emit the template piece by piece: literal runs verbatim (never
+                // rewritten), ${...} interpolations recursed as code.
+                out += "`";
+                let j = i + 1;
+                while (j < text.length && text[j] !== "`") {
+                    if (text[j] === "\\") {
+                        out += text.slice(j, j + 2);
+                        j += 2;
+                        continue;
+                    }
+                    if (text[j] === "$" && text[j + 1] === "{") {
+                        let depth = 1;
+                        let k = j + 2;
+                        while (k < text.length && depth > 0) {
+                            if (text[k] === "{")
+                                depth++;
+                            else if (text[k] === "}")
+                                depth--;
+                            k++;
+                        }
+                        out += "${" + this.rewriteOutsideLiterals(text.slice(j + 2, k - 1), re) + "}";
+                        j = k;
+                        continue;
+                    }
+                    out += text[j];
+                    j++;
+                }
+                if (j < text.length)
+                    out += "`";
+                i = j + 1;
+                continue;
+            }
+            code += ch;
+            i++;
+        }
+        flush();
+        return out;
+    }
     /** Rewrite signal getter/setter syntax to plain variable reads/writes. See
      *  normalizeScript for the lowering contract; this is the preview counterpart
      *  of ui-callback-lowering.ts's rules 2 and 3. */
@@ -3276,6 +4132,32 @@ export class PreviewUIRuntime {
                 return fn;
             },
             navigate: (screenIdx) => this.navigate(screenIdx),
+            // Device parity with the SDL-only ui.window.* lowering
+            // (ui_window_set_title / ui_window_set_icon). In the preview, setTitle
+            // updates the browser tab title when a DOM is present (Node tests have
+            // none); setIcon has no browser equivalent and no-ops, matching the
+            // hardware targets' no-op.
+            window: {
+                setTitle: (title) => {
+                    const doc = globalThis.document;
+                    if (doc)
+                        doc.title = String(title);
+                },
+                setIcon: (_path) => { },
+            },
+            // <drawer> controls: open by element id, close by id or all open
+            // drawers. Device parity with ui_drawer_open / ui_drawer_close.
+            drawer: {
+                open: (id) => this.drawerOpen(id),
+                close: (id) => this.drawerClose(id),
+            },
+            // <dialog>/<toast> controls: same slot machinery as drawers (a dialog
+            // is a centered drawer, a toast auto-closes via its duration attr).
+            dialog: {
+                open: (id) => this.drawerOpen(id),
+                close: (id) => this.drawerClose(id),
+            },
+            toast: (id) => this.drawerOpen(id),
         };
     }
 }