@hypen-space/web 0.4.82 → 0.4.83

package/dist/canvas/layout.js

@@ -5,8 +5,26 @@
  * layout. Falls back to a basic flexbox implementation in environments
  * without WASM support (e.g. test runners).
  */
-import { parseSpacing, parseSize } from "./utils.js";
+import { parseSpacing, parseSize, cssLengthToPx, cssLengthToDimension } from "./utils.js";
 import { measureText } from "./text.js";
+import { getImageNaturalAspect } from "./paint.js";
+/**
+ * Components whose size is intrinsic to the component itself (icon, avatar,
+ * checkbox, etc.) should not be shrunk by their flex parent. Without this,
+ * an icon inside a transparent button with no width collapses to 0×0 in
+ * tight cross-axis containers.
+ */
+const INTRINSIC_SIZED = new Set([
+    "icon",
+    "avatar",
+    "badge",
+    "checkbox",
+    "radio",
+    "switch",
+    "toggle",
+    "spinner",
+    "loading",
+]);
 // Taffy imports — loaded lazily to avoid hard failure when WASM unavailable
 let taffy = null;
 let taffyReady = false;
@@ -41,54 +59,119 @@ export async function initTaffyLayout() {
 // ---------------------------------------------------------------------------
 /** Parse a Hypen prop value into a Taffy Dimension ("auto" | number | "N%") */
 function toDimension(value) {
-    if (value === undefined || value === null || value === "auto")
-        return "auto";
-    if (typeof value === "number")
-        return value;
-    if (typeof value === "string") {
-        if (value.endsWith("%"))
-            return value;
-        const n = parseFloat(value);
-        return isNaN(n) ? "auto" : n;
-    }
-    return "auto";
+    return cssLengthToDimension(value);
 }
 function toLengthPct(value) {
+    const d = cssLengthToDimension(value);
+    return d === "auto" ? 0 : d;
+}
+function toLengthPctAuto(value) {
+    return cssLengthToDimension(value);
+}
+/**
+ * Parse an aspect-ratio prop. Accepts a number, `"W / H"`, or `"W"`.
+ * Returns the width/height ratio, or null when unparseable.
+ */
+function parseAspectRatio(value) {
     if (typeof value === "number")
-        return value;
-    if (typeof value === "string") {
-        if (value.endsWith("%"))
-            return value;
-        const n = parseFloat(value);
-        return isNaN(n) ? 0 : n;
+        return value > 0 ? value : null;
+    if (typeof value !== "string")
+        return null;
+    const s = value.trim();
+    const slash = s.indexOf("/");
+    if (slash !== -1) {
+        const w = parseFloat(s.slice(0, slash));
+        const h = parseFloat(s.slice(slash + 1));
+        if (isFinite(w) && isFinite(h) && h !== 0)
+            return w / h;
+        return null;
     }
-    return 0;
+    const n = parseFloat(s);
+    return isFinite(n) && n > 0 ? n : null;
 }
-function toLengthPctAuto(value) {
-    if (value === "auto" || value === undefined || value === null)
-        return "auto";
-    return toLengthPct(value);
+/**
+ * Read whether a node is a scrollable container, and on which axes. We can't
+ * import from `scroll.ts` here without creating a circular dependency, so
+ * inline the parsing — keep it in sync with `getScrollAxes`.
+ */
+function readScrollAxes(props) {
+    const overflow = props.overflow;
+    if (overflow === "scroll" || overflow === "auto")
+        return { x: true, y: true };
+    const scrollable = props.scrollable;
+    if (scrollable === true)
+        return { x: true, y: true };
+    if (scrollable === "horizontal")
+        return { x: true, y: false };
+    if (scrollable === "vertical")
+        return { x: false, y: true };
+    if (scrollable === "both")
+        return { x: true, y: true };
+    return { x: false, y: false };
 }
 /**
  * Build a Taffy Style from a VirtualNode's props. This centralises the
  * mapping between Hypen's declarative property names and CSS-level concepts.
+ *
+ * `parent` is the immediate parent VirtualNode (or null for the root) so
+ * children of a Stack can place themselves in the single grid cell, and
+ * children of a scrollable container can opt out of flex-shrink along the
+ * scroll axis (otherwise a horizontal strip's items collapse to the
+ * strip's width instead of overflowing).
  */
-function buildTaffyStyle(node) {
+function buildTaffyStyle(node, parent = null) {
     const T = taffy;
     const props = node.props;
     const type = node.type.toLowerCase();
+    const parentType = parent?.type.toLowerCase() ?? null;
+    const parentScrollAxes = parent ? readScrollAxes(parent.props) : { x: false, y: false };
     const style = new T.Style();
     // --- Display / direction ---------------------------------------------------
-    const isColumn = type === "column" || props.flexDirection === "column";
-    const isGrid = type === "grid" || props.display === "grid";
-    if (isGrid) {
+    // Stack overlays children in a single grid cell — matches the DOM
+    // renderer's `grid-template-areas: "stack"` strategy. Children get
+    // `gridColumn: 1 / 2; gridRow: 1 / 2` further down.
+    const isStack = type === "stack";
+    // `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 `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;
+        // Auto tracks: the single cell sizes to fit the largest child instead
+        // of `1fr` (which would inflate the Stack to its parent's full size and
+        // stretch the children to match — see PARITY.md).
+        style.gridTemplateColumns = [{ min: "auto", max: "auto" }];
+        style.gridTemplateRows = [{ min: "auto", max: "auto" }];
+        // Default top-left matches the DOM Stack (`justify-items: start;
+        // align-items: start`) and iOS/Android ZStack defaults — also keeps
+        // explicitly-sized children at their declared size instead of letting
+        // Taffy's default `stretch` overwrite the box.
+        style.justifyItems = props.horizontalAlignment
+            ? mapAlign(T, props.horizontalAlignment)
+            : T.AlignItems.Start;
+        style.alignItems = props.verticalAlignment
+            ? mapAlign(T, props.verticalAlignment)
+            : T.AlignItems.Start;
+    }
+    else if (isGrid) {
         style.display = T.Display.Grid;
         // --- Grid template tracks ------------------------------------------------
-        if (props.gridTemplateColumns) {
-            style.gridTemplateColumns = parseGridTemplate(props.gridTemplateColumns);
+        // The DSL's `.gridColumns(N)` / `.gridRows(N)` applicators land on
+        // props with the applicator's own name (`gridColumns`, `gridRows`).
+        // The DOM renderer also accepts the older shorthand `columns`/`rows`
+        // and the spec-name `gridTemplateColumns`/`gridTemplateRows`. A bare
+        // number N expands to N equal `1fr` tracks — same logic as
+        // `dom/applicators/advanced-layout.ts`.
+        const colsProp = props.gridTemplateColumns ?? props.gridColumns ?? props.columns;
+        const rowsProp = props.gridTemplateRows ?? props.gridRows ?? props.rows;
+        if (colsProp !== undefined) {
+            style.gridTemplateColumns = parseGridTemplate(colsProp);
         }
-        if (props.gridTemplateRows) {
-            style.gridTemplateRows = parseGridTemplate(props.gridTemplateRows);
+        if (rowsProp !== undefined) {
+            style.gridTemplateRows = parseGridTemplate(rowsProp);
         }
         // --- Grid auto flow ------------------------------------------------------
         if (props.gridAutoFlow) {
@@ -101,6 +184,13 @@ function buildTaffyStyle(node) {
         if (props.gridAutoRows) {
             style.gridAutoRows = parseTrackSizingList(props.gridAutoRows);
         }
+        else if (typeof props.__autoRowsPx === "number") {
+            // Set by `annotateCollapsedAspectGrids` after a first layout pass —
+            // pin implicit rows to the height we want each cell to be (column
+            // width / aspectRatio), so `aspect-square` images don't overlap.
+            const px = props.__autoRowsPx;
+            style.gridAutoRows = [{ min: px, max: px }];
+        }
         // --- Grid template areas -------------------------------------------------
         if (props.gridTemplateAreas) {
             style.gridTemplateAreas = parseGridTemplateAreas(props.gridTemplateAreas);
@@ -109,7 +199,15 @@ function buildTaffyStyle(node) {
     else {
         style.display = T.Display.Flex;
     }
-    style.flexDirection = isColumn ? T.FlexDirection.Column : T.FlexDirection.Row;
+    if (!isStack) {
+        style.flexDirection = isColumn ? T.FlexDirection.Column : T.FlexDirection.Row;
+    }
+    // --- Stack child placement -------------------------------------------------
+    // Place every child of a Stack in the single 1×1 cell so they overlap.
+    if (parentType === "stack") {
+        style.gridColumn = { start: 1, end: 2 };
+        style.gridRow = { start: 1, end: 2 };
+    }
     // --- Grid child placement (applies regardless of parent display) ----------
     if (props.gridColumn) {
         style.gridColumn = parseGridLine(props.gridColumn);
@@ -130,25 +228,53 @@ function buildTaffyStyle(node) {
         style.gridRowEnd = parseGridPlacement(props.gridRowEnd);
     }
     // --- Flex properties -------------------------------------------------------
-    style.flexGrow = parseFloat(props.flexGrow) || parseFloat(props.flex) || 0;
-    style.flexShrink = props.flexShrink !== undefined ? parseFloat(props.flexShrink) : 1;
-    if (props.flexBasis !== undefined)
+    // The `flex: <n>` shorthand (Tailwind's `flex-1` is `flex: 1 1 0%`) sets
+    // grow + shrink + basis at once. Without honouring the basis here, an
+    // overflowing flex item starts at its intrinsic content size (e.g. a
+    // huge feed) and Taffy redistributes from there, which under-allocates
+    // the BottomNav and pushes it off-screen on routes with tall content.
+    const flexShorthand = props.flex !== undefined ? parseFloat(props.flex) : NaN;
+    style.flexGrow = parseFloat(props.flexGrow) || (Number.isFinite(flexShorthand) ? flexShorthand : 0);
+    // Default flex-shrink is 0 when:
+    //   - the component has an intrinsic size (icon, avatar, …) — otherwise it
+    //     collapses to 0×0 in a tight cross-axis container, e.g. an icon inside
+    //     a transparent button with only `padding.0`.
+    //   - the parent is a scrollable container along the main axis — otherwise
+    //     a horizontal strip's items shrink to fit instead of overflowing,
+    //     making the strip pointless.
+    const parentIsRow = parentType !== "column" && parentType !== "stack" && parentType !== null;
+    const parentIsCol = parentType === "column";
+    const parentMainAxisScrolls = (parentIsRow && parentScrollAxes.x) || (parentIsCol && parentScrollAxes.y);
+    const defaultShrink = INTRINSIC_SIZED.has(type) || parentMainAxisScrolls ? 0 : 1;
+    style.flexShrink = props.flexShrink !== undefined ? parseFloat(props.flexShrink) : defaultShrink;
+    if (props.flexBasis !== undefined) {
         style.flexBasis = toDimension(props.flexBasis);
+    }
+    else if (Number.isFinite(flexShorthand)) {
+        // `flex: 1` shorthand → basis 0%. Pinning basis is the load-bearing
+        // bit: an item with `flex: 1 1 auto` starts at its content size and
+        // distributes from there, leaving siblings in a tight container with
+        // negative space; `flex: 1 1 0%` starts at zero and grows up.
+        style.flexBasis = 0;
+    }
     if (props.flexWrap === "wrap")
         style.flexWrap = T.FlexWrap.Wrap;
     else if (props.flexWrap === "wrap-reverse")
         style.flexWrap = T.FlexWrap.WrapReverse;
     // --- Alignment (Hypen uses verticalAlignment / horizontalAlignment) --------
-    const justifyRaw = isColumn
-        ? (props.verticalAlignment || props.justifyContent)
-        : (props.horizontalAlignment || props.justifyContent);
-    const alignRaw = isColumn
-        ? (props.horizontalAlignment || props.alignItems)
-        : (props.verticalAlignment || props.alignItems);
-    if (justifyRaw)
-        style.justifyContent = mapJustify(T, justifyRaw);
-    if (alignRaw)
-        style.alignItems = mapAlign(T, alignRaw);
+    // Stack handles its own alignment via justifyItems/alignItems above.
+    if (!isStack) {
+        const justifyRaw = isColumn
+            ? (props.verticalAlignment || props.justifyContent)
+            : (props.horizontalAlignment || props.justifyContent);
+        const alignRaw = isColumn
+            ? (props.horizontalAlignment || props.alignItems)
+            : (props.verticalAlignment || props.alignItems);
+        if (justifyRaw)
+            style.justifyContent = mapJustify(T, justifyRaw);
+        if (alignRaw)
+            style.alignItems = mapAlign(T, alignRaw);
+    }
     // --- Size ------------------------------------------------------------------
     const w = parseSize(props.width);
     const h = parseSize(props.height);
@@ -161,7 +287,7 @@ function buildTaffyStyle(node) {
     }
     else if (type === "divider" || type === "separator") {
         const orientation = props.orientation || "horizontal";
-        const thickness = parseFloat(props.thickness) || 1;
+        const thickness = cssLengthToPx(props.thickness) ?? 1;
         if (orientation === "vertical") {
             style.size = { width: w ?? thickness, height: h !== null ? h : "100%" };
         }
@@ -170,7 +296,7 @@ function buildTaffyStyle(node) {
         }
     }
     else if (type === "checkbox" || type === "radio") {
-        const sz = parseFloat(props.size) || 20;
+        const sz = cssLengthToPx(props.size) ?? 20;
         style.size = { width: w ?? sz, height: h ?? sz };
     }
     else if (type === "switch" || type === "toggle") {
@@ -183,30 +309,71 @@ function buildTaffyStyle(node) {
         style.size = { width: w ?? 200, height: h ?? 8 };
     }
     else if (type === "spinner" || type === "loading") {
-        const sz = parseFloat(props.size) || 24;
+        const sz = cssLengthToPx(props.size) ?? 24;
         style.size = { width: w ?? sz, height: h ?? sz };
     }
     else if (type === "badge") {
         style.size = { width: w ?? 20, height: h ?? 20 };
     }
     else if (type === "avatar") {
-        const sz = parseFloat(props.size) || 40;
+        const sz = cssLengthToPx(props.size) ?? 40;
         style.size = { width: w ?? sz, height: h ?? sz };
     }
     else if (type === "icon") {
-        const sz = parseFloat(props.size) || 24;
+        const sz = cssLengthToPx(props.size) ?? 24;
         style.size = { width: w ?? sz, height: h ?? sz };
     }
+    else if (type === "input" || type === "textarea" || type === "select") {
+        // Form controls have no painted children, so without an intrinsic
+        // height they collapse to padding only (the social Search bar
+        // rendered as a 4-tall pill instead of the ~36 the DOM produces).
+        // Match the DOM box: outer = line-height(s) + padding + border.
+        // 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 = 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;
+        const borderTop = cssLengthToPx(props.borderTopWidth ?? props.borderWidth) ?? 0;
+        const borderBottom = cssLengthToPx(props.borderBottomWidth ?? props.borderWidth) ?? 0;
+        const intrinsicH = lineHeight * minRows + padTop + padBottom + borderTop + borderBottom;
+        style.size = { width: toDimension(props.width), height: h ?? intrinsicH };
+    }
     else {
-        style.size = { width: toDimension(props.width), height: toDimension(props.height) };
+        // Children of a Grid that ask for `width: 100%` actually mean "fill
+        // the cell" — that's the DOM behavior (`grid > * { justify-self:
+        // stretch }`). Taffy handles this via the grid item's default
+        // stretch alignment when the size is auto, but a literal 100% creates
+        // a circular dependency with track sizing (the cell wants to be 1fr
+        // of the grid, the item wants to be 100% of the cell, and Taffy
+        // collapses both to the item's max-content). Strip the 100% on grid
+        // children so the Taffy grid stretch wins. Same for height.
+        const parentIsGridLayout = parent &&
+            (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;
+        style.size = { width: toDimension(widthIn), height: toDimension(heightIn) };
     }
     // --- Min / Max constraints -------------------------------------------------
+    // Default `min-width: 0` for children of a Grid container. CSS makes
+    // grid items default to `min-width: auto` (= min-content) which prevents
+    // them shrinking below their intrinsic min. For an Image with
+    // `aspect-ratio: 1`, that "min" is the image's natural max-content —
+    // so the grid track sizing collapses (one item ends up 360px wide and
+    // squashes its row). Explicitly setting min: 0 is the standard CSS
+    // workaround and matches the DOM grid's `justify-self: stretch` shape.
+    const parentIsGrid = parent &&
+        (parent.type.toLowerCase() === "grid" || parent.props.display === "grid");
     if (props.minWidth !== undefined || props.minHeight !== undefined) {
         style.minSize = {
             width: toDimension(props.minWidth),
             height: toDimension(props.minHeight),
         };
     }
+    else if (parentIsGrid) {
+        style.minSize = { width: 0, height: 0 };
+    }
     if (props.maxWidth !== undefined || props.maxHeight !== undefined) {
         style.maxSize = {
             width: toDimension(props.maxWidth),
@@ -216,35 +383,71 @@ function buildTaffyStyle(node) {
     // --- Margin ----------------------------------------------------------------
     const m = parseSpacing(props.margin || 0);
     if (props.marginTop !== undefined)
-        m.top = parseFloat(props.marginTop) || 0;
+        m.top = cssLengthToPx(props.marginTop) ?? 0;
     if (props.marginRight !== undefined)
-        m.right = parseFloat(props.marginRight) || 0;
+        m.right = cssLengthToPx(props.marginRight) ?? 0;
     if (props.marginBottom !== undefined)
-        m.bottom = parseFloat(props.marginBottom) || 0;
+        m.bottom = cssLengthToPx(props.marginBottom) ?? 0;
     if (props.marginLeft !== undefined)
-        m.left = parseFloat(props.marginLeft) || 0;
+        m.left = cssLengthToPx(props.marginLeft) ?? 0;
     style.margin = { top: m.top, right: m.right, bottom: m.bottom, left: m.left };
     // --- Padding ---------------------------------------------------------------
     const p = parseSpacing(props.padding || 0);
     if (props.paddingTop !== undefined)
-        p.top = parseFloat(props.paddingTop) || 0;
+        p.top = cssLengthToPx(props.paddingTop) ?? 0;
     if (props.paddingRight !== undefined)
-        p.right = parseFloat(props.paddingRight) || 0;
+        p.right = cssLengthToPx(props.paddingRight) ?? 0;
     if (props.paddingBottom !== undefined)
-        p.bottom = parseFloat(props.paddingBottom) || 0;
+        p.bottom = cssLengthToPx(props.paddingBottom) ?? 0;
     if (props.paddingLeft !== undefined)
-        p.left = parseFloat(props.paddingLeft) || 0;
+        p.left = cssLengthToPx(props.paddingLeft) ?? 0;
     style.padding = { top: p.top, right: p.right, bottom: p.bottom, left: p.left };
     // --- Border ----------------------------------------------------------------
-    const bw = parseFloat(props.borderWidth) || 0;
+    const bw = cssLengthToPx(props.borderWidth) ?? 0;
     if (bw > 0) {
         style.border = { top: bw, right: bw, bottom: bw, left: bw };
     }
     // --- Gap -------------------------------------------------------------------
-    const gap = parseFloat(props.gap) || 0;
+    const gap = cssLengthToPx(props.gap) ?? 0;
     if (gap > 0) {
         style.gap = { width: gap, height: gap };
     }
+    // --- Aspect ratio ----------------------------------------------------------
+    // Engine emits values like `"1"` or `16/9`. Taffy expects a number.
+    if (props.aspectRatio !== undefined) {
+        const ar = parseAspectRatio(props.aspectRatio);
+        if (ar !== null)
+            style.aspectRatio = ar;
+    }
+    else if (type === "image") {
+        // Implicit aspect ratio from the decoded image's intrinsic size — only
+        // useful when the caller fixes one dimension and lets the other follow.
+        // Without this, an image with `width: 100` stretches to whatever Taffy
+        // picks for the height (the parent's full height under the default
+        // `align-items: stretch` of a flex row).
+        //
+        // We can't rely on Taffy's `aspectRatio` alone: with `align-items:
+        // stretch`, the cross-axis size is forced before aspect-ratio is
+        // applied. Pin both dimensions explicitly instead.
+        const wParsed = parseSize(props.width);
+        const hParsed = parseSize(props.height);
+        if ((wParsed === null) !== (hParsed === null)) {
+            const src = props.src ?? props[0];
+            if (typeof src === "string") {
+                const intrinsic = getImageNaturalAspect(src);
+                if (intrinsic !== null) {
+                    if (wParsed !== null) {
+                        style.size = { width: wParsed, height: wParsed / intrinsic };
+                        style.aspectRatio = intrinsic;
+                    }
+                    else if (hParsed !== null) {
+                        style.size = { width: hParsed * intrinsic, height: hParsed };
+                        style.aspectRatio = intrinsic;
+                    }
+                }
+            }
+        }
+    }
     // --- Position (absolute) ---------------------------------------------------
     if (props.position === "absolute") {
         style.position = T.Position.Absolute;
@@ -257,6 +460,28 @@ function buildTaffyStyle(node) {
         if (props.bottom !== undefined)
             style.bottom = toLengthPctAuto(props.bottom);
     }
+    // --- Overflow (scrollable containers) -------------------------------------
+    // For scroll containers we need a careful balance:
+    //   - Children must lay out at their full intrinsic positions so
+    //     `ScrollManager.updateScrollBounds` can compute scrollHeight (a feed
+    //     with overflow:Hidden gets its children clamped and the page won't
+    //     scroll).
+    //   - But the CONTAINER itself must not bubble its overflowing min-content
+    //     up into its parent (a horizontally-scrollable Stories row with 5+
+    //     w-24 items inflated the whole feed to 607px on a 470px canvas).
+    //
+    // Setting overflow to `Scroll` on the relevant axis tells Taffy to treat
+    // this container as a scroll port — children flow at intrinsic sizes but
+    // the container's own contribution to the parent stays bounded. The
+    // non-scroll axis stays Visible so siblings still see the right content
+    // size when they need to.
+    const ownAxes = readScrollAxes(props);
+    if (ownAxes.x || ownAxes.y) {
+        style.overflow = {
+            x: ownAxes.x ? T.Overflow.Scroll : T.Overflow.Visible,
+            y: ownAxes.y ? T.Overflow.Scroll : T.Overflow.Visible,
+        };
+    }
     return style;
 }
 function mapJustify(T, value) {
@@ -325,10 +550,27 @@ function parseGridTemplate(value) {
         return value.map(parseTrackSizing);
     }
     if (typeof value === "string") {
+        // The DSL's `.gridColumns(3)` sometimes arrives here as `"3"` after
+        // stringification (engine emits numeric applicator args as strings).
+        // Treat a bare integer string the same way the DOM renderer does —
+        // expand to N equal 1fr tracks. `repeat(N, 1fr)` shorthand would work
+        // too but Taffy wants the expanded track list.
+        const trimmed = value.trim();
+        if (/^\d+$/.test(trimmed)) {
+            const n = parseInt(trimmed, 10);
+            return Array.from({ length: n }, () => ({
+                min: "auto",
+                max: "1fr",
+            }));
+        }
         return value.split(/\s+/).filter(Boolean).map(parseTrackSizing);
     }
     if (typeof value === "number") {
-        return [parseTrackSizing(value)];
+        // Bare number = column count. DOM: `repeat(N, 1fr)`.
+        return Array.from({ length: value }, () => ({
+            min: "auto",
+            max: "1fr",
+        }));
     }
     return [];
 }
@@ -442,26 +684,31 @@ function parseGridTemplateAreas(value) {
  * Build a TaffyTree mirroring the VirtualNode tree. Returns the root Taffy
  * node id and a mapping from Taffy node ids → VirtualNodes.
  */
-function buildTree(tree, node) {
+function buildTree(tree, node, parent = null) {
     const T = taffy;
     const props = node.props;
-    const style = buildTaffyStyle(node);
-    // Text leaf nodes — create with measurement context
-    if (node.type === "text" && props[0] && node.children.length === 0) {
+    const style = buildTaffyStyle(node, parent);
+    // Text leaf nodes — create with measurement context. The engine emits the
+    // type capitalised (`"Text"`); compare case-insensitively so a Taffy leaf
+    // is created. Without this, every Text node was treated as an empty
+    // 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).
+    if (node.type.toLowerCase() === "text" && props[0] && node.children.length === 0) {
         const text = String(props[0] || "");
-        const fontSize = parseFloat(props.fontSize) || 16;
+        const fontSize = cssLengthToPx(props.fontSize) ?? 16;
         const fontWeight = props.fontWeight || "normal";
         const fontFamily = props.fontFamily || "system-ui, sans-serif";
-        const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;
+        const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.2;
         const p = parseSpacing(props.padding || 0);
         if (props.paddingTop !== undefined)
-            p.top = parseFloat(props.paddingTop) || 0;
+            p.top = cssLengthToPx(props.paddingTop) ?? 0;
         if (props.paddingRight !== undefined)
-            p.right = parseFloat(props.paddingRight) || 0;
+            p.right = cssLengthToPx(props.paddingRight) ?? 0;
         if (props.paddingBottom !== undefined)
-            p.bottom = parseFloat(props.paddingBottom) || 0;
+            p.bottom = cssLengthToPx(props.paddingBottom) ?? 0;
         if (props.paddingLeft !== undefined)
-            p.left = parseFloat(props.paddingLeft) || 0;
+            p.left = cssLengthToPx(props.paddingLeft) ?? 0;
         const ctx = {
             text,
             fontSize,
@@ -473,10 +720,24 @@ function buildTree(tree, node) {
         };
         return tree.newLeafWithContext(style, ctx);
     }
+    // Image leaves with aspect-ratio: contribute height = stretched-width /
+    // aspectRatio to grid/flex track sizing via the measure callback. The
+    // `style.aspectRatio` alone isn't enough — Taffy's grid auto-row pass asks
+    // for the leaf's max-content height, which for an image with no fixed
+    // height is 0; without the callback the row collapses.
+    if (node.type.toLowerCase() === "image" && node.children.length === 0) {
+        const ar = props.aspectRatio !== undefined
+            ? parseAspectRatio(props.aspectRatio)
+            : null;
+        if (ar !== null) {
+            const ictx = { aspectRatio: ar };
+            return tree.newLeafWithContext(style, ictx);
+        }
+    }
     // Container nodes
     const childIds = [];
     for (const child of node.children) {
-        childIds.push(buildTree(tree, child));
+        childIds.push(buildTree(tree, child, node));
     }
     return tree.newWithChildren(style, childIds);
 }
@@ -496,7 +757,7 @@ function writeLayout(tree, taffyId, node, parentX, parentY, isRoot = false) {
     const absX = parentX + tl.x + (isRoot ? tl.marginLeft : 0);
     const absY = parentY + tl.y + (isRoot ? tl.marginTop : 0);
     const borderColor = node.props.borderColor || "transparent";
-    const borderRadius = parseFloat(node.props.borderRadius) || 0;
+    const borderRadius = cssLengthToPx(node.props.borderRadius) ?? 0;
     // Taffy computes uniform border width per side; pick top as representative
     const borderWidth = tl.borderTop;
     const layout = {
@@ -533,6 +794,78 @@ function writeLayout(tree, taffyId, node, parentX, parentY, isRoot = false) {
         writeLayout(tree, childTaffyId, node.children[i], absX, absY);
     }
 }
+/**
+ * After a layout pass, detect Grid containers whose implicit row tracks
+ * collapsed against aspect-ratio image children — Taffy treats the
+ * leaves' max-content height as 0 (the measure callback can't anchor the
+ * height without a known width during track sizing), so the rows get
+ * sized to gap-only and items overflow their tracks by ~150px each.
+ *
+ * Mark the grid with a private hint (`__autoRowsPx`) carrying the height
+ * we want each implicit row to be — derived from the first item's
+ * computed width and aspect-ratio after the first pass. The next layout
+ * pass reads this hint in `buildTaffyStyle` and sets explicit
+ * `gridAutoRows`. Returns true if any grid was marked (caller re-runs
+ * layout from scratch).
+ */
+function annotateCollapsedAspectGrids(node) {
+    let touched = false;
+    for (const child of node.children) {
+        if (annotateCollapsedAspectGrids(child))
+            touched = true;
+    }
+    if (!node.layout)
+        return touched;
+    const t = node.type.toLowerCase();
+    const isGrid = t === "grid" || node.props.display === "grid";
+    if (!isGrid)
+        return touched;
+    // Only adjust grids that haven't already been pinned (avoid loops).
+    if (node.props.__autoRowsPx)
+        return touched;
+    let firstAspectKid = null;
+    let aspectRatio = 0;
+    for (const child of node.children) {
+        if (child.type.toLowerCase() !== "image" || !child.layout)
+            continue;
+        const ar = child.props.aspectRatio !== undefined
+            ? parseAspectRatio(child.props.aspectRatio)
+            : null;
+        if (ar === null)
+            continue;
+        firstAspectKid = child;
+        aspectRatio = ar;
+        break;
+    }
+    if (!firstAspectKid)
+        return touched;
+    const itemWidth = firstAspectKid.layout.width;
+    const expectedRowHeight = itemWidth / aspectRatio;
+    if (expectedRowHeight <= 0)
+        return touched;
+    // Find a sibling image in the next row to confirm collapse: if its y
+    // delta from the first row is less than the expected row height (minus
+    // a tolerance for fractional pixels and gap rounding), the rows
+    // overlapped — this is the symptom we're fixing.
+    let nextRowKid = null;
+    for (const child of node.children) {
+        if (child === firstAspectKid)
+            continue;
+        if (!child.layout)
+            continue;
+        if (child.layout.y > firstAspectKid.layout.y + 1) {
+            nextRowKid = child;
+            break;
+        }
+    }
+    if (!nextRowKid)
+        return touched;
+    const rowDelta = nextRowKid.layout.y - firstAspectKid.layout.y;
+    if (rowDelta >= expectedRowHeight - 1)
+        return touched;
+    node.props.__autoRowsPx = expectedRowHeight;
+    return true;
+}
 /**
  * Compute layout for a virtual node tree using Taffy.
  * Requires `initTaffyLayout()` to have been called and resolved.
@@ -542,8 +875,41 @@ function computeLayoutTaffy(ctx, node, availableWidth, availableHeight, x, y) {
     const tree = new T.TaffyTree();
     try {
         const rootId = buildTree(tree, node);
+        // Pin the root to the canvas's available size when it has no explicit
+        // size of its own. Without this, Taffy lets the root grow to its
+        // min-content — and a horizontally-scrollable Stories row with 5+
+        // items at w-24 inflated the entire feed to 607px on a 470px canvas,
+        // pushing the BottomNav off-screen.
+        const rootProps = node.props;
+        const rootHasExplicitWidth = rootProps.width !== undefined || rootProps["width.0"] !== undefined;
+        const rootHasExplicitHeight = rootProps.height !== undefined || rootProps["height.0"] !== undefined;
+        if (!rootHasExplicitWidth || !rootHasExplicitHeight) {
+            const rootStyle = tree.getStyle(rootId);
+            rootStyle.size = {
+                width: rootHasExplicitWidth
+                    ? cssLengthToDimension(rootProps.width ?? rootProps["width.0"])
+                    : availableWidth,
+                height: rootHasExplicitHeight
+                    ? cssLengthToDimension(rootProps.height ?? rootProps["height.0"])
+                    : availableHeight,
+            };
+            tree.setStyle(rootId, rootStyle);
+        }
         // Compute layout with a measure function for text leaf nodes
         tree.computeLayoutWithMeasure(rootId, { width: availableWidth, height: availableHeight }, (knownDimensions, availableSpace, _nodeId, context, _style) => {
+            // Image-with-aspect-ratio leaf: derive missing dim from the other
+            // via aspectRatio so grid track sizing sees a proper max-content
+            // height. Falls back to availableSpace.width when nothing's known.
+            const ictx = context;
+            if (ictx && typeof ictx.aspectRatio === "number") {
+                const w = knownDimensions.width ??
+                    (typeof availableSpace.width === "number"
+                        ? availableSpace.width
+                        : undefined);
+                const h = knownDimensions.height ??
+                    (w !== undefined ? w / ictx.aspectRatio : undefined);
+                return { width: w ?? 0, height: h ?? 0 };
+            }
             const tctx = context;
             if (!tctx?.text) {
                 return { width: knownDimensions.width ?? 0, height: knownDimensions.height ?? 0 };
@@ -557,9 +923,14 @@ function computeLayoutTaffy(ctx, node, availableWidth, availableHeight, x, y) {
                 fontFamily: tctx.fontFamily,
                 lineHeight: tctx.lineHeight,
             }, maxWidth);
+            // `Math.ceil` the reported width: pretext returns a fractional
+            // pixel width (e.g. 141.71875 for "View all 87 comments"), Taffy
+            // gives the box exactly that, but at paint time we re-measure with
+            // a maxWidth of the integer-rounded box width and pretext then
+            // wraps because 141.71 > 141. Reserve the next whole pixel up.
             return {
-                width: knownDimensions.width ?? (metrics.width + tctx.paddingH),
-                height: knownDimensions.height ?? (metrics.height + tctx.paddingV),
+                width: knownDimensions.width ?? (Math.ceil(metrics.width) + tctx.paddingH),
+                height: knownDimensions.height ?? (Math.ceil(metrics.height) + tctx.paddingV),
             };
         });
         writeLayout(tree, rootId, node, x, y, /* isRoot */ true);
@@ -580,6 +951,14 @@ function computeLayoutTaffy(ctx, node, availableWidth, availableHeight, x, y) {
 export function computeLayout(ctx, node, availableWidth, availableHeight, x = 0, y = 0) {
     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);
+        }
     }
     else {
         computeLayoutFallback(ctx, node, availableWidth, availableHeight, x, y);
@@ -592,25 +971,25 @@ function computeLayoutFallback(ctx, node, availableWidth, availableHeight, x = 0
     const props = node.props;
     let margin = parseSpacing(props.margin || 0);
     if (props.marginTop !== undefined)
-        margin.top = parseFloat(props.marginTop) || 0;
+        margin.top = cssLengthToPx(props.marginTop) ?? 0;
     if (props.marginRight !== undefined)
-        margin.right = parseFloat(props.marginRight) || 0;
+        margin.right = cssLengthToPx(props.marginRight) ?? 0;
     if (props.marginBottom !== undefined)
-        margin.bottom = parseFloat(props.marginBottom) || 0;
+        margin.bottom = cssLengthToPx(props.marginBottom) ?? 0;
     if (props.marginLeft !== undefined)
-        margin.left = parseFloat(props.marginLeft) || 0;
+        margin.left = cssLengthToPx(props.marginLeft) ?? 0;
     let padding = parseSpacing(props.padding || 0);
     if (props.paddingTop !== undefined)
-        padding.top = parseFloat(props.paddingTop) || 0;
+        padding.top = cssLengthToPx(props.paddingTop) ?? 0;
     if (props.paddingRight !== undefined)
-        padding.right = parseFloat(props.paddingRight) || 0;
+        padding.right = cssLengthToPx(props.paddingRight) ?? 0;
     if (props.paddingBottom !== undefined)
-        padding.bottom = parseFloat(props.paddingBottom) || 0;
+        padding.bottom = cssLengthToPx(props.paddingBottom) ?? 0;
     if (props.paddingLeft !== undefined)
-        padding.left = parseFloat(props.paddingLeft) || 0;
-    const borderWidth = parseFloat(props.borderWidth) || 0;
+        padding.left = cssLengthToPx(props.paddingLeft) ?? 0;
+    const borderWidth = cssLengthToPx(props.borderWidth) ?? 0;
     const borderColor = props.borderColor || "transparent";
-    const borderRadius = parseFloat(props.borderRadius) || 0;
+    const borderRadius = cssLengthToPx(props.borderRadius) ?? 0;
     const availableAfterMargin = {
         width: availableWidth - margin.left - margin.right,
         height: availableHeight - margin.top - margin.bottom,
@@ -632,7 +1011,7 @@ function computeLayoutFallback(ctx, node, availableWidth, availableHeight, x = 0
     }
     else if (type === "divider" || type === "separator") {
         const orientation = props.orientation || "horizontal";
-        const thickness = parseFloat(props.thickness) || 1;
+        const thickness = cssLengthToPx(props.thickness) ?? 1;
         if (orientation === "vertical") {
             if (width === null)
                 width = thickness;
@@ -647,7 +1026,7 @@ function computeLayoutFallback(ctx, node, availableWidth, availableHeight, x = 0
         }
     }
     else if (type === "checkbox" || type === "radio") {
-        const size = parseFloat(props.size) || 20;
+        const size = cssLengthToPx(props.size) ?? 20;
         if (width === null)
             width = size;
         if (height === null)
@@ -672,7 +1051,7 @@ function computeLayoutFallback(ctx, node, availableWidth, availableHeight, x = 0
             height = 8;
     }
     else if (type === "spinner" || type === "loading") {
-        const size = parseFloat(props.size) || 24;
+        const size = cssLengthToPx(props.size) ?? 24;
         if (width === null)
             width = size;
         if (height === null)
@@ -685,25 +1064,25 @@ function computeLayoutFallback(ctx, node, availableWidth, availableHeight, x = 0
             height = 20;
     }
     else if (type === "avatar") {
-        const size = parseFloat(props.size) || 40;
+        const size = cssLengthToPx(props.size) ?? 40;
         if (width === null)
             width = size;
         if (height === null)
             height = size;
     }
     else if (type === "icon") {
-        const size = parseFloat(props.size) || 24;
+        const size = cssLengthToPx(props.size) ?? 24;
         if (width === null)
             width = size;
         if (height === null)
             height = size;
     }
-    if (node.type === "text" && node.props[0]) {
+    if (node.type.toLowerCase() === "text" && node.props[0]) {
         const text = String(node.props[0] || "");
-        const fontSize = parseFloat(props.fontSize) || 16;
+        const fontSize = cssLengthToPx(props.fontSize) ?? 16;
         const fontWeight = props.fontWeight || "normal";
         const fontFamily = props.fontFamily || "system-ui, sans-serif";
-        const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;
+        const lineHeight = cssLengthToPx(props.lineHeight) ?? fontSize * 1.2;
         const maxWidth = width || availableAfterMargin.width - padding.left - padding.right;
         const metrics = measureText(ctx, text, { fontSize, fontWeight, fontFamily, lineHeight }, maxWidth);
         if (!width)
@@ -764,7 +1143,7 @@ function layoutChildrenFallback(ctx, parent) {
     const alignItems = isColumn
         ? (props.horizontalAlignment || "flex-start")
         : (props.verticalAlignment || "flex-start");
-    const gap = parseFloat(props.gap) || 0;
+    const gap = cssLengthToPx(props.gap) ?? 0;
     const availableWidth = layout.contentWidth;
     const availableHeight = layout.contentHeight;
     const childInfo = [];
@@ -773,7 +1152,11 @@ function layoutChildrenFallback(ctx, parent) {
     let totalFlexShrink = 0;
     for (const child of parent.children) {
         const flexGrow = parseFloat(child.props.flexGrow) || parseFloat(child.props.flex) || 0;
-        const flexShrink = parseFloat(child.props.flexShrink) || 1;
+        const childType = child.type.toLowerCase();
+        const defaultShrink = INTRINSIC_SIZED.has(childType) ? 0 : 1;
+        const flexShrink = child.props.flexShrink !== undefined
+            ? parseFloat(child.props.flexShrink)
+            : defaultShrink;
         const flexBasis = parseSize(child.props.flexBasis);
         computeLayoutFallback(ctx, child, availableWidth, availableHeight, 0, 0);
         const childLayout = child.layout;