@hypen-space/web 0.4.980 → 0.5.3

package/dist/canvas/focus.js

@@ -0,0 +1,182 @@
+/**
+ * Focus Manager
+ *
+ * Real DOM focus on accessibility-mirror elements (canvas fallback content)
+ * is the single source of truth for canvas focus. Tab/Shift+Tab traverse
+ * the mirror natively; `focusin`/`focusout` translate DOM focus into
+ * `node.focused` + repaint; the pointer path (canvas hit-test) funnels into
+ * the same place by focusing the node's mirror element.
+ *
+ * Loop-free by construction: DOM focus events only ever *read* into node
+ * state — nothing in the sync path calls `.focus()` back.
+ *
+ * The mirror also carries keyboard/AT interaction back to the engine:
+ * Enter/Space on a mirror `<button>` produces a native `click` (dispatched
+ * to the node's action), and keydown/keyup on the focused element dispatch
+ * the node's `onKeyDown`/`onKeyUp` applicators — which the old
+ * canvas-attached listeners never could (a canvas without tabindex never
+ * receives key events).
+ */
+import { dispatchNodeEvent } from "./dispatch.js";
+export class FocusManager {
+    mirror;
+    engine;
+    hooks;
+    focusedNode = null;
+    boundFocusIn = (e) => this.onFocusIn(e);
+    boundFocusOut = (e) => this.onFocusOut(e);
+    boundClick = (e) => this.onMirrorClick(e);
+    boundKeyDown = (e) => this.onMirrorKey("keydown", e);
+    boundKeyUp = (e) => this.onMirrorKey("keyup", e);
+    constructor(mirror, engine, hooks) {
+        this.mirror = mirror;
+        this.engine = engine;
+        this.hooks = hooks;
+        const root = mirror.getRoot();
+        if (root && typeof root.addEventListener === "function") {
+            root.addEventListener("focusin", this.boundFocusIn);
+            root.addEventListener("focusout", this.boundFocusOut);
+            root.addEventListener("click", this.boundClick);
+            root.addEventListener("keydown", this.boundKeyDown);
+            root.addEventListener("keyup", this.boundKeyUp);
+        }
+    }
+    // -------------------------------------------------------------------------
+    // DOM → node state (the only direction focus state flows)
+    // -------------------------------------------------------------------------
+    /** Climb from an event target to the mirror element's virtual node. */
+    resolveNode(target) {
+        let el = target;
+        const root = this.mirror.getRoot();
+        while (el && el !== root) {
+            const id = el.getAttribute?.("data-hypen-id");
+            if (id) {
+                return this.hooks.getNode(id) ?? null;
+            }
+            el = el.parentNode ?? null;
+        }
+        return null;
+    }
+    onFocusIn(e) {
+        this.syncFocus(this.resolveNode(e.target));
+    }
+    onFocusOut(e) {
+        // If focus moves to another mirror element, its focusin handles the
+        // transition; a handoff to the editor's IME proxy keeps the node
+        // focused; only a departure from both clears focus.
+        const next = e.relatedTarget;
+        if (next && this.hooks.isAuxFocusTarget?.(next))
+            return;
+        const root = this.mirror.getRoot();
+        if (!next || !root || !(root.contains?.(next) ?? false)) {
+            this.syncFocus(null);
+        }
+    }
+    /** Update node.focused flags from the new DOM focus target. Idempotent. */
+    syncFocus(node) {
+        if (node === this.focusedNode)
+            return;
+        const prev = this.focusedNode;
+        if (prev) {
+            prev.focused = false;
+            dispatchNodeEvent(this.engine, prev, "blur", {});
+        }
+        this.focusedNode = node;
+        if (node) {
+            node.focused = true;
+            dispatchNodeEvent(this.engine, node, "focus", {});
+        }
+        this.hooks.onFocusChange(node, prev);
+    }
+    // -------------------------------------------------------------------------
+    // Pointer path — canvas hit-test funnels into DOM focus
+    // -------------------------------------------------------------------------
+    /**
+     * Focus a node from the canvas pointer path. Focuses the mirror element
+     * (so `document.activeElement` agrees) and syncs node state directly —
+     * in real browsers the element's focusin already did that synchronously
+     * and the second sync is a no-op; in environments without focus events
+     * the direct sync keeps behavior identical.
+     */
+    requestFocus(node) {
+        if (!node) {
+            this.clearFocus();
+            return;
+        }
+        const el = this.mirror.getElement(node.id);
+        el?.focus?.({ preventScroll: true });
+        this.syncFocus(node);
+    }
+    /** Pointer landed on nothing focusable: blur any mirror focus and clear. */
+    clearFocus() {
+        if (typeof document !== "undefined") {
+            const active = document.activeElement;
+            const root = this.mirror.getRoot();
+            if (active &&
+                ((root && (root.contains?.(active) ?? false)) ||
+                    this.hooks.isAuxFocusTarget?.(active))) {
+                active.blur?.();
+            }
+        }
+        this.syncFocus(null);
+    }
+    /**
+     * Clear focus if the focused node is `node` or one of its descendants —
+     * called before a subtree is removed/detached (the mirror element may
+     * leave the DOM without a browser blur when focus sits on the IME proxy).
+     */
+    clearIfWithin(node) {
+        let current = this.focusedNode;
+        while (current) {
+            if (current === node) {
+                this.syncFocus(null);
+                return;
+            }
+            current = current.parent;
+        }
+    }
+    getFocusedNode() {
+        return this.focusedNode;
+    }
+    // -------------------------------------------------------------------------
+    // Mirror interaction → engine actions
+    // -------------------------------------------------------------------------
+    /**
+     * Native click on a mirror element — keyboard activation (Enter/Space on
+     * a real `<button>`) or an AT-initiated action. Pointer clicks never land
+     * here (fallback content has no rendered boxes), so this can't double-fire
+     * with the canvas hit-test click path.
+     */
+    onMirrorClick(e) {
+        const node = this.resolveNode(e.target);
+        if (!node)
+            return;
+        if (!node.clickable)
+            return;
+        dispatchNodeEvent(this.engine, node, "click", {});
+    }
+    onMirrorKey(type, e) {
+        const node = this.resolveNode(e.target);
+        if (!node)
+            return;
+        dispatchNodeEvent(this.engine, node, type, {
+            key: e.key,
+            code: e.code,
+            ctrlKey: e.ctrlKey,
+            shiftKey: e.shiftKey,
+            altKey: e.altKey,
+        });
+    }
+    destroy() {
+        const root = this.mirror.getRoot();
+        if (root && typeof root.removeEventListener === "function") {
+            root.removeEventListener("focusin", this.boundFocusIn);
+            root.removeEventListener("focusout", this.boundFocusOut);
+            root.removeEventListener("click", this.boundClick);
+            root.removeEventListener("keydown", this.boundKeyDown);
+            root.removeEventListener("keyup", this.boundKeyUp);
+        }
+        this.focusedNode = null;
+    }
+}
+//# sourceMappingURL=focus.js.map

package/dist/canvas/focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../src/canvas/focus.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAIH,OAAO,EAAE,iBAAiB,EAAuB,MAAM,eAAe,CAAC;AAevE,MAAM,OAAO,YAAY;IACf,MAAM,CAAqB;IAC3B,MAAM,CAAiB;IACvB,KAAK,CAAoB;IACzB,WAAW,GAAuB,IAAI,CAAC;IAEvC,YAAY,GAAG,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAe,CAAC,CAAC;IAC7D,aAAa,GAAG,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAe,CAAC,CAAC;IAC/D,UAAU,GAAG,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACjD,YAAY,GAAG,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAkB,CAAC,CAAC;IAC7E,UAAU,GAAG,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAkB,CAAC,CAAC;IAEjF,YAAY,MAA0B,EAAE,MAAsB,EAAE,KAAwB;QACtF,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAEnB,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC;QAC9B,IAAI,IAAI,IAAI,OAAO,IAAI,CAAC,gBAAgB,KAAK,UAAU,EAAE,CAAC;YACxD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACpD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;YAChD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACpD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAClD,CAAC;IACH,CAAC;IAED,4EAA4E;IAC5E,0DAA0D;IAC1D,4EAA4E;IAE5E,uEAAuE;IAC/D,WAAW,CAAC,MAA0B;QAC5C,IAAI,EAAE,GAAG,MAAqD,CAAC;QAC/D,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QACnC,OAAO,EAAE,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC;YACzB,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,eAAe,CAAC,CAAC;YAC9C,IAAI,EAAE,EAAE,CAAC;gBACP,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC;YACxC,CAAC;YACD,EAAE,GAAG,EAAE,CAAC,UAAU,IAAI,IAAI,CAAC;QAC7B,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,SAAS,CAAC,CAAa;QAC7B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7C,CAAC;IAEO,UAAU,CAAC,CAAa;QAC9B,oEAAoE;QACpE,iEAAiE;QACjE,oDAAoD;QACpD,MAAM,IAAI,GAAG,CAAC,CAAC,aAAmC,CAAC;QACnD,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC,IAAI,CAAC;YAAE,OAAO;QACxD,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QACnC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YACxD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAED,2EAA2E;IACnE,SAAS,CAAC,IAAwB;QACxC,IAAI,IAAI,KAAK,IAAI,CAAC,WAAW;YAAE,OAAO;QAEtC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;QAC9B,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;QACpD,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACvC,CAAC;IAED,4EAA4E;IAC5E,wDAAwD;IACxD,4EAA4E;IAE5E;;;;;;OAMG;IACH,YAAY,CAAC,IAAwB;QACnC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC1C,EAAU,EAAE,KAAK,EAAE,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;IAED,4EAA4E;IAC5E,UAAU;QACR,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YACpC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAmC,CAAC;YAC5D,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;YACnC,IACE,MAAM;gBACN,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC,CAAC,EACxC,CAAC;gBACD,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;IAED;;;;OAIG;IACH,aAAa,CAAC,IAAiB;QAC7B,IAAI,OAAO,GAAuB,IAAI,CAAC,WAAW,CAAC;QACnD,OAAO,OAAO,EAAE,CAAC;YACf,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;gBACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gBACrB,OAAO;YACT,CAAC;YACD,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,cAAc;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,4EAA4E;IAC5E,sCAAsC;IACtC,4EAA4E;IAE5E;;;;;OAKG;IACK,aAAa,CAAC,CAAQ;QAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACxC,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO;QAC5B,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC;IACpD,CAAC;IAEO,WAAW,CAAC,IAAyB,EAAE,CAAgB;QAC7D,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACxC,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE;YACzC,GAAG,EAAE,CAAC,CAAC,GAAG;YACV,IAAI,EAAE,CAAC,CAAC,IAAI;YACZ,OAAO,EAAE,CAAC,CAAC,OAAO;YAClB,QAAQ,EAAE,CAAC,CAAC,QAAQ;YACpB,MAAM,EAAE,CAAC,CAAC,MAAM;SACjB,CAAC,CAAC;IACL,CAAC;IAED,OAAO;QACL,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QACnC,IAAI,IAAI,IAAI,OAAO,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE,CAAC;YAC3D,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YACzD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;YACnD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACvD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACrD,CAAC;QACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;CACF"}

package/dist/canvas/index.d.ts

@@ -4,13 +4,14 @@
  * Browser-only module for rendering Hypen UI to Canvas
  */
 export { CanvasRenderer } from "./renderer.js";
-export { createCanvasClient as createHypenClient, createCanvasClient, type CanvasClient as HypenClient, type CanvasClient, type CanvasClientOptions as HypenClientOptions, type CanvasClientOptions, } from "../client.js";
 export { registerPainter } from "./paint.js";
 export { CanvasEventManager } from "./events.js";
-export { InputOverlay } from "./input.js";
 export { AccessibilityLayer } from "./accessibility.js";
+export { FocusManager } from "./focus.js";
+export { TextEditController } from "./editing.js";
 export { initTaffyLayout } from "./layout.js";
 export { ScrollManager } from "./scroll.js";
 export { DirtyRectTracker } from "./dirty.js";
 export { SelectionManager } from "./selection.js";
+export { pointToOffset, offsetToCaretRect, rangeToRects, type TextGeometry, } from "./text-geometry.js";
 export type { VirtualNode, Layout, Rectangle, Point, FontStyle, TextStyle, TextMetrics, ScrollState, CanvasRendererOptions, PainterFunction, LayoutFunction, } from "./types.js";

package/dist/canvas/index.js

@@ -4,13 +4,14 @@
  * Browser-only module for rendering Hypen UI to Canvas
  */
 export { CanvasRenderer } from "./renderer.js";
-export { createCanvasClient as createHypenClient, createCanvasClient, } from "../client.js";
 export { registerPainter } from "./paint.js";
 export { CanvasEventManager } from "./events.js";
-export { InputOverlay } from "./input.js";
 export { AccessibilityLayer } from "./accessibility.js";
+export { FocusManager } from "./focus.js";
+export { TextEditController } from "./editing.js";
 export { initTaffyLayout } from "./layout.js";
 export { ScrollManager } from "./scroll.js";
 export { DirtyRectTracker } from "./dirty.js";
 export { SelectionManager } from "./selection.js";
+export { pointToOffset, offsetToCaretRect, rangeToRects, } from "./text-geometry.js";
 //# sourceMappingURL=index.js.map

package/dist/canvas/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EACL,kBAAkB,IAAI,iBAAiB,EACvC,kBAAkB,GAKnB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/canvas/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,YAAY,GAEb,MAAM,oBAAoB,CAAC"}

package/dist/canvas/layout.js

@@ -5,7 +5,7 @@
  * layout. Falls back to a basic flexbox implementation in environments
  * without WASM support (e.g. test runners).
  */
-import { parseSpacing, parseSize, cssLengthToPx, cssLengthToDimension, resolveLineHeight, setCurrentViewport, getCurrentViewport, } from "./utils.js";
+import { parseSpacing, parseSize, cssLengthToPx, cssLengthToDimension } from "./utils.js";
 import { measureText } from "./text.js";
 import { getImageNaturalAspect } from "./paint.js";
 /**
@@ -43,6 +43,18 @@ export async function initTaffyLayout() {
     taffyInitPromise = (async () => {
         try {
             taffy = await import("taffy-layout");
+            // In a server runtime (Bun/Node — including test runs where a JSDOM
+            // `window` may be globally registered by another test file), load the
+            // WASM from node_modules via fs. This path is deterministic; the
+            // fetch-based branch below depends on a reachable origin/CDN and must
+            // never be selected just because a test polyfilled `window`.
+            const isServerRuntime = typeof process !== "undefined" &&
+                !!(process.versions?.bun || process.versions?.node);
+            if (isServerRuntime) {
+                await taffy.loadTaffy();
+                taffyReady = true;
+                return;
+            }
             // Bundlers (esp. Bun's browser bundler) sometimes inline a file:// URL
             // for import.meta.url inside taffy_wasm.js, which the browser blocks
             // ("Not allowed to load local resource"). The package's own `loadTaffy`
@@ -50,28 +62,42 @@ export async function initTaffyLayout() {
             // raw `__wbg_init` (default export of the `taffy-layout/wasm` subpath)
             // directly with an explicit Response.
             let usedExplicit = false;
-            if (typeof window !== "undefined" && typeof fetch === "function") {
-                const candidates = [
-                    new URL("/taffy_wasm_bg.wasm", window.location.origin),
-                    new URL("https://cdn.jsdelivr.net/npm/taffy-layout@2.0.3/pkg/taffy_wasm_bg.wasm"),
-                    new URL("https://unpkg.com/taffy-layout@2.0.3/pkg/taffy_wasm_bg.wasm"),
-                ];
-                const rawWasm = await import(
-                /* @vite-ignore */ "taffy-layout/wasm");
-                const wbgInit = rawWasm.default;
-                for (const url of candidates) {
-                    try {
-                        const res = await fetch(url);
-                        if (!res.ok)
-                            continue;
-                        await wbgInit({ module_or_path: res });
-                        usedExplicit = true;
-                        break;
-                    }
-                    catch {
-                        // Try next candidate
+            // Only take the fetch path in a real browser. Test environments (and
+            // anything else that installs a fake `window` global) must fall through
+            // to `loadTaffy()`, which resolves the WASM from the package on disk —
+            // a fake window without `location.origin` used to throw here and
+            // silently disable Taffy for the rest of the process.
+            const isRealBrowser = typeof window !== "undefined" &&
+                typeof fetch === "function" &&
+                typeof window.location?.origin === "string" &&
+                window.document?.defaultView === window;
+            if (isRealBrowser) {
+                try {
+                    const candidates = [
+                        new URL("/taffy_wasm_bg.wasm", window.location.origin),
+                        new URL("https://cdn.jsdelivr.net/npm/taffy-layout@2.0.3/pkg/taffy_wasm_bg.wasm"),
+                        new URL("https://unpkg.com/taffy-layout@2.0.3/pkg/taffy_wasm_bg.wasm"),
+                    ];
+                    const rawWasm = await import(
+                    /* @vite-ignore */ "taffy-layout/wasm");
+                    const wbgInit = rawWasm.default;
+                    for (const url of candidates) {
+                        try {
+                            const res = await fetch(url);
+                            if (!res.ok)
+                                continue;
+                            await wbgInit({ module_or_path: res });
+                            usedExplicit = true;
+                            break;
+                        }
+                        catch {
+                            // Try next candidate
+                        }
                     }
                 }
+                catch {
+                    // Fall through to loadTaffy()
+                }
             }
             if (!usedExplicit) {
                 await taffy.loadTaffy();
@@ -166,21 +192,9 @@ function buildTaffyStyle(node, parent = null) {
     // `List` is the DSL's vertical-stack iterator (see dom/components/list.ts
     // — `flex-direction: column` is its default). Match that here so feeds
     // like Notifications stack their rows vertically instead of flowing
-    // sideways. The legacy `direction` prop can flip it to row, and so can
-    // a Tailwind `flex-row` class which lands on `props.flexDirection`
-    // (without this, top-tab strips built as `List.flex-row` stacked
-    // vertically because the List default won the tie-break).
-    const isListColumn = type === "list" &&
-        props.direction !== "horizontal" &&
-        props.flexDirection !== "row";
-    // Button defaults to `flex-direction: column` to match the DOM renderer
-    // (see dom/components/button.ts). With Taffy's default `align-items:
-    // stretch`, treating Button as a row caused inner `Column { Icon, Text }`
-    // children to collapse onto each other (icon overlapping label). Only
-    // apply the column default when no explicit `flexDirection` is set so a
-    // Tailwind `flex-row` on a button still wins.
-    const isButtonColumn = type === "button" && props.flexDirection === undefined;
-    const isColumn = !isStack && (type === "column" || isListColumn || isButtonColumn || props.flexDirection === "column");
+    // sideways. The `direction` prop can still flip it to row.
+    const isListColumn = type === "list" && props.direction !== "horizontal";
+    const isColumn = !isStack && (type === "column" || isListColumn || props.flexDirection === "column");
     const isGrid = !isStack && (type === "grid" || props.display === "grid");
     if (isStack) {
         style.display = T.Display.Grid;
@@ -375,7 +389,7 @@ function buildTaffyStyle(node, parent = null) {
         // Taffy defaults to `box-sizing: border-box`, so we add the
         // padding/border ourselves into `size.height`.
         const fontSize = cssLengthToPx(props.fontSize) ?? 16;
-        const lineHeight = resolveLineHeight(props.lineHeight, fontSize) ?? fontSize * 1.5;
+        const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.5;
         const minRows = type === "textarea" ? Math.max(1, Number(props.rows) || 3) : 1;
         const padTop = cssLengthToPx(props.paddingTop ?? props.padding) ?? 0;
         const padBottom = cssLengthToPx(props.paddingBottom ?? props.padding) ?? 0;
@@ -397,32 +411,7 @@ function buildTaffyStyle(node, parent = null) {
             (parent.type.toLowerCase() === "grid" || parent.props.display === "grid");
         const widthIn = parentIsGridLayout && props.width === "100%" ? undefined : props.width;
         const heightIn = parentIsGridLayout && props.height === "100%" ? undefined : props.height;
-        // Mirror the DOM rule `[data-hypen-type="row"]:has(> [data-hypen-flex])
-        // { width: 100% }` (and the symmetric column case). When a flex
-        // container has no explicit main-axis size and any child opts into
-        // weighted growth (`flex` / `flexGrow > 0`), Taffy would otherwise
-        // size the container to its min-content — so a Row of `flex-1`
-        // segmented-control buttons stayed pill-sized instead of stretching
-        // across the parent. Only do this when at least one child explicitly
-        // asks for flex, matching the DOM `:has(> [data-hypen-flex])` guard.
-        const isRowContainer = !isStack && !isGrid && !isColumn;
-        const isColumnContainer = !isStack && !isGrid && isColumn;
-        const childAsksFlex = node.children.some((c) => {
-            const fg = parseFloat(c.props.flexGrow);
-            if (Number.isFinite(fg) && fg > 0)
-                return true;
-            const f = parseFloat(c.props.flex);
-            return Number.isFinite(f) && f > 0;
-        });
-        let resolvedWidth = toDimension(widthIn);
-        let resolvedHeight = toDimension(heightIn);
-        if (childAsksFlex) {
-            if (isRowContainer && widthIn === undefined)
-                resolvedWidth = "100%";
-            if (isColumnContainer && heightIn === undefined)
-                resolvedHeight = "100%";
-        }
-        style.size = { width: resolvedWidth, height: resolvedHeight };
+        style.size = { width: toDimension(widthIn), height: toDimension(heightIn) };
     }
     // --- Min / Max constraints -------------------------------------------------
     // Default `min-width: 0` for children of a Grid container. CSS makes
@@ -763,17 +752,12 @@ function buildTree(tree, node, parent = null) {
     // container with size 0×0, and downstream siblings were placed on top of
     // each other ("1,431 likes" overlapping the caption row was the visible
     // symptom).
-    // `props[0] != null` — not `props[0]` truthy. The number `0`, the empty
-    // string, and `false` are valid text content; falsy guards here let
-    // those cases skip the measurement leaf and inherit a 0-height container,
-    // which made siblings stack on top of each other (a bound `0` overlapping
-    // the next line was the visible symptom in calorie-counter's hero).
-    if (node.type.toLowerCase() === "text" && props[0] != null && node.children.length === 0) {
-        const text = String(props[0]);
+    if (node.type.toLowerCase() === "text" && props[0] && node.children.length === 0) {
+        const text = String(props[0] || "");
         const fontSize = cssLengthToPx(props.fontSize) ?? 16;
         const fontWeight = props.fontWeight || "normal";
         const fontFamily = props.fontFamily || "system-ui, sans-serif";
-        const lineHeight = resolveLineHeight(props.lineHeight, fontSize) ?? fontSize * 1.2;
+        const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.2;
         const p = parseSpacing(props.padding || 0);
         if (props.paddingTop !== undefined)
             p.top = cssLengthToPx(props.paddingTop) ?? 0;
@@ -1041,32 +1025,19 @@ function computeLayoutTaffy(ctx, node, availableWidth, availableHeight, x, y) {
  * layout. Falls back to a basic JS flexbox implementation otherwise.
  */
 export function computeLayout(ctx, node, availableWidth, availableHeight, x = 0, y = 0) {
-    // Publish the active viewport so `cssLengthToPx` can resolve `vw` / `vh`
-    // against the actual canvas dimensions during this layout pass. Without
-    // this, `vh` falls back to `window.innerHeight` (wrong inside an iframe
-    // or scaled preview pane) or, worse, to a unitless pixel value that
-    // collapses entire layouts. Layout is synchronous, so a try/finally
-    // restoring the previous slot is safe under nested or re-entrant calls.
-    const prevViewport = getCurrentViewport();
-    setCurrentViewport({ width: availableWidth, height: availableHeight });
-    try {
-        if (taffyReady && taffy) {
+    if (taffyReady && taffy) {
+        computeLayoutTaffy(ctx, node, availableWidth, availableHeight, x, y);
+        // After the first pass, Taffy's grid auto-row sizing for aspect-ratio
+        // image leaves can collapse rows (the leaf's max-content height is 0
+        // before column widths are known). Detect that pattern and re-run
+        // with explicit `gridAutoRows` derived from the now-known column
+        // width — see `annotateCollapsedAspectGrids`.
+        if (annotateCollapsedAspectGrids(node)) {
             computeLayoutTaffy(ctx, node, availableWidth, availableHeight, x, y);
-            // After the first pass, Taffy's grid auto-row sizing for aspect-ratio
-            // image leaves can collapse rows (the leaf's max-content height is 0
-            // before column widths are known). Detect that pattern and re-run
-            // with explicit `gridAutoRows` derived from the now-known column
-            // width — see `annotateCollapsedAspectGrids`.
-            if (annotateCollapsedAspectGrids(node)) {
-                computeLayoutTaffy(ctx, node, availableWidth, availableHeight, x, y);
-            }
-        }
-        else {
-            computeLayoutFallback(ctx, node, availableWidth, availableHeight, x, y);
         }
     }
-    finally {
-        setCurrentViewport(prevViewport);
+    else {
+        computeLayoutFallback(ctx, node, availableWidth, availableHeight, x, y);
     }
 }
 // ---------------------------------------------------------------------------
@@ -1182,13 +1153,12 @@ function computeLayoutFallback(ctx, node, availableWidth, availableHeight, x = 0
         if (height === null)
             height = size;
     }
-    // Same `!= null` rule as above — `0` / `""` / `false` are valid text.
-    if (node.type.toLowerCase() === "text" && node.props[0] != null) {
-        const text = String(node.props[0]);
+    if (node.type.toLowerCase() === "text" && node.props[0]) {
+        const text = String(node.props[0] || "");
         const fontSize = cssLengthToPx(props.fontSize) ?? 16;
         const fontWeight = props.fontWeight || "normal";
         const fontFamily = props.fontFamily || "system-ui, sans-serif";
-        const lineHeight = resolveLineHeight(props.lineHeight, fontSize) ?? fontSize * 1.2;
+        const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.2;
         const maxWidth = width || availableAfterMargin.width - padding.left - padding.right;
         const maxLinesRaw = props.maxLines;
         const maxLines = typeof maxLinesRaw === "number"