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

package/dist/preview/host-gfx.js

@@ -62,6 +62,12 @@ export class HostAdafruitGFX {
     // When true (mono/e-ink target), draw primitives snap color values to black/
     // white by luminance — mirrors the device's UI_MAYBE_SNAP_MONO565 choke-point.
     monoSnap = false;
+    // Storage depth of values written into the buffer. rgb565 targets store
+    // packed 565 (expanded at the canvas push); rgb888/rgb666 targets store
+    // packed RGB888, with rgb666 quantizing channels to 6 bits at the push
+    // boundary — mirroring the device's panel. Set by PreviewUIRuntime from the
+    // snapshot's colorFormat before the first frame.
+    storage = "rgb565";
     textSizeX = 1;
     textSizeY = 1;
     wrap = true;
@@ -81,6 +87,10 @@ export class HostAdafruitGFX {
     setMonoSnap(on) {
         this.monoSnap = on;
     }
+    /** Set the buffer's storage depth (see the `storage` field). */
+    setStorageMode(mode) {
+        this.storage = mode;
+    }
     snap(c) {
         if (!this.monoSnap)
             return c;
@@ -228,7 +238,11 @@ export class HostAdafruitGFX {
         }
         r = Math.min(r, Math.trunc(Math.min(w, h) / 2));
         this.fillRect(x + r, y, w - 2 * r, h, color);
-        const delta = Math.max(0, h - 2 * r - 1);
+        // No max(0, ·) clamp: for a perfect pill (h == 2r) the raw value is -1 and
+        // fillCircleHelper's delta++ turns it into 0, landing the arc lines exactly
+        // on the box. Clamping to 0 first made every arc line one row too tall —
+        // a 1px orphan stub under each corner of pill-shaped badges.
+        const delta = h - 2 * r - 1;
         this.fillCircleHelper(x + w - r - 1, y + r, r, 1, delta, color);
         this.fillCircleHelper(x + r, y + r, r, 2, delta, color);
     }
@@ -538,13 +552,26 @@ export class HostAdafruitGFX {
                 out[p + 1] = (c >> 8) & 0xff;
                 out[p + 2] = c & 0xff;
             }
-            else {
-                // 565 target: unpack to 888.
+            else if (this.storage === "rgb565") {
+                // 565 target: buffer holds packed 565 — unpack to 888.
                 const { r, g, b } = rgb565ToRgb888(c);
                 out[p] = r;
                 out[p + 1] = g;
                 out[p + 2] = b;
             }
+            else {
+                // rgb888/rgb666 target: buffer holds packed RGB888. rgb666
+                // quantizes to 6 bits/channel at the push (device panel parity).
+                let r = (c >> 16) & 0xff, g = (c >> 8) & 0xff, b = c & 0xff;
+                if (this.storage === "rgb666") {
+                    r = (r & 0xfc) | (r >> 6);
+                    g = (g & 0xfc) | (g >> 6);
+                    b = (b & 0xfc) | (b >> 6);
+                }
+                out[p] = r;
+                out[p + 1] = g;
+                out[p + 2] = b;
+            }
             out[p + 3] = 255;
         }
         return out;

package/dist/preview/host-ui-runtime.d.ts

@@ -12,6 +12,11 @@ interface RuntimeOptions {
     onFrame?: (rgba: Uint8ClampedArray) => void;
     onDiagnostics?: (message: string) => void;
 }
+/** 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 declare function lerpColor(a: number, b: number, k100: number): number;
 export declare class PreviewUIRuntime {
     private readonly snapshot;
     readonly gfx: HostAdafruitGFX;
@@ -63,6 +68,10 @@ export declare class PreviewUIRuntime {
     private settleFromScrollY;
     private rangeNode;
     private keyboardVisible;
+    /** Modal <select> option list: node index while open, -1 when closed. */
+    private selectMenuNode;
+    /** True while the select modal overlay needs (re)stamping this frame. */
+    private selectMenuDirty;
     private keyboardDirty;
     private keyboardTarget;
     private keyboardKeys;
@@ -92,6 +101,11 @@ export declare class PreviewUIRuntime {
     pointerDown(x: number, y: number): void;
     pointerMove(x: number, y: number): void;
     pointerUp(): void;
+    /** 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: number, y: number, deltaPx: number): void;
     triggerPin(control: PreviewPinControlSpec): void;
     private createScreenProxy;
     private applyInitialAssignments;
@@ -103,6 +117,12 @@ export declare class PreviewUIRuntime {
     private uiInit;
     private isActiveNode;
     private isEffectivelyVisible;
+    /** 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. */
+    private stackingZ;
     private drawsBefore;
     private compareDrawOrder;
     private navigate;
@@ -141,6 +161,12 @@ export declare class PreviewUIRuntime {
     private tryRepairGeometryFill;
     private clearCurrentSubtreePaint;
     private setVisible;
+    private subtreeFlowExtent;
+    private shiftSubtreeMain;
+    private restackFlowContainer;
+    private reflowScrollContent;
+    private reflowAfterVisibility;
+    private classifyDirtyAgainstOpenDrawers;
     private scrollClipForNode;
     private rectIntersectsClip;
     private intersectClipRect;
@@ -170,6 +196,43 @@ export declare class PreviewUIRuntime {
     private markScrollViewDirty;
     private invalidateScrollCanvasForNode;
     private drawDirty;
+    /** Enable/disable per-frame debug geometry capture (the client overlay
+     *  reads it; zero cost while off). */
+    setDebugCapture(on: boolean): void;
+    /** 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(): {
+        nodes: Array<{
+            i: number;
+            id?: string;
+            tag: string;
+            kind: string;
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+            tappable: boolean;
+        }>;
+        clips: Array<{
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        }>;
+        painted: Array<{
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+        }>;
+    };
+    /** 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: number, ty: number): number;
     private lineX;
     private textInsets;
     private drawTextLines;
@@ -208,6 +271,54 @@ export declare class PreviewUIRuntime {
     private handleNoTouch;
     private dispatchBuiltInClick;
     private keyboardTemplateForNode;
+    /** node index -> { open, progress } for every <drawer>; absent = closed. */
+    private readonly drawerStates;
+    /** True while the client wants per-frame debug geometry + paint rects. */
+    private debugCapture;
+    /** Node paint rects drawn during this tick (cleared at tick start). */
+    private debugPaintedRects;
+    /** Drawer animation step per tick (~180ms full slide). */
+    /** <toast> auto-close windows, keyed by drawer slot node index. */
+    private readonly toastElapsed;
+    private applyDrawers;
+    private drawerNodeById;
+    private drawerOpen;
+    private drawerClose;
+    /** 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. */
+    private drawerExtent;
+    /** 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). */
+    private setDrawerProgress;
+    /** True while the node sits inside a fully-closed drawer (skip in draws and
+     *  hit tests). Drawers with no state entry are closed. */
+    private insideClosedDrawer;
+    /** Walk ancestors: any drawer ancestor without an open/animating state. */
+    private drawerAncestorClosed;
+    /** Apply the closed slide offsets to every drawer subtree (initial seed and
+     *  post-navigate reset) so closed drawers never paint at rest position. */
+    private seedDrawersClosed;
+    /** 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). */
+    private selectMenuGeometry;
+    private openSelectMenu;
+    /** 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). */
+    private closeSelectMenu;
+    /** Stamp the modal overlay on top of the current framebuffer. Idempotent
+     *  per frame — the close path full-repaints beneath it. */
+    private drawSelectMenu;
+    /** Panel fill: the select's effective background, falling back to a
+     *  near-black card on unstyled selects. */
+    private selectMenuPanelColor;
+    /** Route a tap while the modal is open: a row selects + closes; anything
+     *  else just closes (dismiss on outside tap). */
+    private selectMenuHandleTouch;
     private keyboardOpen;
     private keyboardClose;
     private keyboardComputeBox;
@@ -229,6 +340,10 @@ export declare class PreviewUIRuntime {
     private markDirty;
     private scriptTreeNames;
     private normalizeScript;
+    /** 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). */
+    private rewriteOutsideLiterals;
     /** 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. */