@hypen-space/web 0.4.81 → 0.4.83

package/src/canvas/layout.ts

@@ -7,8 +7,27 @@
  */
 
 import type { VirtualNode, Layout, BoxSpacing } from "./types.js";
-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: typeof import("taffy-layout") | null = null;
@@ -45,55 +64,122 @@ export async function initTaffyLayout(): Promise<boolean> {
 
 /** Parse a Hypen prop value into a Taffy Dimension ("auto" | number | "N%") */
 function toDimension(value: any): "auto" | number | `${number}%` {
-  if (value === undefined || value === null || value === "auto") return "auto";
-  if (typeof value === "number") return value;
-  if (typeof value === "string") {
-    if (value.endsWith("%")) return value as `${number}%`;
-    const n = parseFloat(value);
-    return isNaN(n) ? "auto" : n;
-  }
-  return "auto";
+  return cssLengthToDimension(value);
 }
 
 function toLengthPct(value: any): number | `${number}%` {
-  if (typeof value === "number") return value;
-  if (typeof value === "string") {
-    if (value.endsWith("%")) return value as `${number}%`;
-    const n = parseFloat(value);
-    return isNaN(n) ? 0 : n;
-  }
-  return 0;
+  const d = cssLengthToDimension(value);
+  return d === "auto" ? 0 : d;
 }
 
 function toLengthPctAuto(value: any): "auto" | number | `${number}%` {
-  if (value === "auto" || value === undefined || value === null) return "auto";
-  return toLengthPct(value) as any;
+  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: any): number | null {
+  if (typeof value === "number") 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;
+  }
+  const n = parseFloat(s);
+  return isFinite(n) && n > 0 ? n : null;
+}
+
+/**
+ * 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: Record<string, any>): { x: boolean; y: boolean } {
+  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: VirtualNode): InstanceType<typeof import("taffy-layout").Style> {
+function buildTaffyStyle(
+  node: VirtualNode,
+  parent: VirtualNode | null = null,
+): InstanceType<typeof import("taffy-layout").Style> {
   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 ------------------------------------------------------
@@ -107,6 +193,12 @@ function buildTaffyStyle(node: VirtualNode): InstanceType<typeof import("taffy-l
     }
     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 as number;
+      style.gridAutoRows = [{ min: px, max: px }];
     }
 
     // --- Grid template areas -------------------------------------------------
@@ -117,7 +209,16 @@ function buildTaffyStyle(node: VirtualNode): InstanceType<typeof import("taffy-l
     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) {
@@ -140,23 +241,52 @@ function buildTaffyStyle(node: VirtualNode): InstanceType<typeof import("taffy-l
   }
 
   // --- Flex properties -------------------------------------------------------
-  style.flexGrow = parseFloat(props.flexGrow) || parseFloat(props.flex) || 0;
-  style.flexShrink = props.flexShrink !== undefined ? parseFloat(props.flexShrink) : 1;
-  if (props.flexBasis !== undefined) style.flexBasis = toDimension(props.flexBasis);
+  // 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);
@@ -170,14 +300,14 @@ function buildTaffyStyle(node: VirtualNode): InstanceType<typeof import("taffy-l
     };
   } 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%" };
     } else {
       style.size = { width: w !== null ? w : "100%", height: h ?? thickness };
     }
   } 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") {
     style.size = { width: w ?? 44, height: h ?? 24 };
@@ -186,26 +316,67 @@ function buildTaffyStyle(node: VirtualNode): InstanceType<typeof import("taffy-l
   } else if (type === "progress" || type === "progressbar") {
     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 = {
@@ -216,32 +387,66 @@ function buildTaffyStyle(node: VirtualNode): InstanceType<typeof import("taffy-l
 
   // --- Margin ----------------------------------------------------------------
   const m = parseSpacing(props.margin || 0);
-  if (props.marginTop !== undefined) m.top = parseFloat(props.marginTop) || 0;
-  if (props.marginRight !== undefined) m.right = parseFloat(props.marginRight) || 0;
-  if (props.marginBottom !== undefined) m.bottom = parseFloat(props.marginBottom) || 0;
-  if (props.marginLeft !== undefined) m.left = parseFloat(props.marginLeft) || 0;
+  if (props.marginTop !== undefined) m.top = cssLengthToPx(props.marginTop) ?? 0;
+  if (props.marginRight !== undefined) m.right = cssLengthToPx(props.marginRight) ?? 0;
+  if (props.marginBottom !== undefined) m.bottom = cssLengthToPx(props.marginBottom) ?? 0;
+  if (props.marginLeft !== undefined) 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;
-  if (props.paddingRight !== undefined) p.right = parseFloat(props.paddingRight) || 0;
-  if (props.paddingBottom !== undefined) p.bottom = parseFloat(props.paddingBottom) || 0;
-  if (props.paddingLeft !== undefined) p.left = parseFloat(props.paddingLeft) || 0;
+  if (props.paddingTop !== undefined) p.top = cssLengthToPx(props.paddingTop) ?? 0;
+  if (props.paddingRight !== undefined) p.right = cssLengthToPx(props.paddingRight) ?? 0;
+  if (props.paddingBottom !== undefined) p.bottom = cssLengthToPx(props.paddingBottom) ?? 0;
+  if (props.paddingLeft !== undefined) 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;
@@ -251,6 +456,29 @@ function buildTaffyStyle(node: VirtualNode): InstanceType<typeof import("taffy-l
     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;
 }
 
@@ -324,10 +552,27 @@ function parseGridTemplate(value: any): any[] {
     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" as `${number}fr`,
+      }));
+    }
     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" as `${number}fr`,
+    }));
   }
   return [];
 }
@@ -454,6 +699,17 @@ interface TextMeasureContext {
   paddingV: number;
 }
 
+/**
+ * Marker context for image leaves whose height should follow the column-
+ * stretched width via aspect-ratio. Without this, Taffy's grid auto-row
+ * sizing only sees the image's max-content (= 0 for a leaf with no fixed
+ * height) and a `gridColumns(3)` of `aspect-square` images collapses to
+ * gap-tall rows that overlap by 150px each (the Search explore grid).
+ */
+interface ImageAspectMeasureContext {
+  aspectRatio: number;
+}
+
 /**
  * Build a TaffyTree mirroring the VirtualNode tree. Returns the root Taffy
  * node id and a mapping from Taffy node ids → VirtualNodes.
@@ -461,24 +717,30 @@ interface TextMeasureContext {
 function buildTree(
   tree: InstanceType<typeof import("taffy-layout").TaffyTree>,
   node: VirtualNode,
+  parent: VirtualNode | null = null,
 ): bigint {
   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;
-    if (props.paddingRight !== undefined) p.right = parseFloat(props.paddingRight) || 0;
-    if (props.paddingBottom !== undefined) p.bottom = parseFloat(props.paddingBottom) || 0;
-    if (props.paddingLeft !== undefined) p.left = parseFloat(props.paddingLeft) || 0;
+    if (props.paddingTop !== undefined) p.top = cssLengthToPx(props.paddingTop) ?? 0;
+    if (props.paddingRight !== undefined) p.right = cssLengthToPx(props.paddingRight) ?? 0;
+    if (props.paddingBottom !== undefined) p.bottom = cssLengthToPx(props.paddingBottom) ?? 0;
+    if (props.paddingLeft !== undefined) p.left = cssLengthToPx(props.paddingLeft) ?? 0;
 
     const ctx: TextMeasureContext = {
       text,
@@ -493,10 +755,26 @@ function buildTree(
     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: ImageAspectMeasureContext = { aspectRatio: ar };
+      return tree.newLeafWithContext(style, ictx);
+    }
+  }
+
   // Container nodes
   const childIds: bigint[] = [];
   for (const child of node.children) {
-    childIds.push(buildTree(tree, child));
+    childIds.push(buildTree(tree, child, node));
   }
 
   return tree.newWithChildren(style, childIds);
@@ -527,7 +805,7 @@ function writeLayout(
   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;
 
@@ -568,6 +846,73 @@ function writeLayout(
   }
 }
 
+/**
+ * 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: VirtualNode): boolean {
+  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: VirtualNode | null = 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: VirtualNode | null = 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.
@@ -586,11 +931,50 @@ function computeLayoutTaffy(
   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 as ImageAspectMeasureContext | undefined;
+        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 as TextMeasureContext | undefined;
         if (!tctx?.text) {
           return { width: knownDimensions.width ?? 0, height: knownDimensions.height ?? 0 };
@@ -607,9 +991,14 @@ function computeLayoutTaffy(
           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),
         };
       },
     );
@@ -640,6 +1029,14 @@ export function computeLayout(
 ): void {
   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);
   }
@@ -660,20 +1057,20 @@ function computeLayoutFallback(
   const props = node.props;
 
   let margin = parseSpacing(props.margin || 0);
-  if (props.marginTop !== undefined) margin.top = parseFloat(props.marginTop) || 0;
-  if (props.marginRight !== undefined) margin.right = parseFloat(props.marginRight) || 0;
-  if (props.marginBottom !== undefined) margin.bottom = parseFloat(props.marginBottom) || 0;
-  if (props.marginLeft !== undefined) margin.left = parseFloat(props.marginLeft) || 0;
+  if (props.marginTop !== undefined) margin.top = cssLengthToPx(props.marginTop) ?? 0;
+  if (props.marginRight !== undefined) margin.right = cssLengthToPx(props.marginRight) ?? 0;
+  if (props.marginBottom !== undefined) margin.bottom = cssLengthToPx(props.marginBottom) ?? 0;
+  if (props.marginLeft !== undefined) margin.left = cssLengthToPx(props.marginLeft) ?? 0;
 
   let padding = parseSpacing(props.padding || 0);
-  if (props.paddingTop !== undefined) padding.top = parseFloat(props.paddingTop) || 0;
-  if (props.paddingRight !== undefined) padding.right = parseFloat(props.paddingRight) || 0;
-  if (props.paddingBottom !== undefined) padding.bottom = parseFloat(props.paddingBottom) || 0;
-  if (props.paddingLeft !== undefined) padding.left = parseFloat(props.paddingLeft) || 0;
+  if (props.paddingTop !== undefined) padding.top = cssLengthToPx(props.paddingTop) ?? 0;
+  if (props.paddingRight !== undefined) padding.right = cssLengthToPx(props.paddingRight) ?? 0;
+  if (props.paddingBottom !== undefined) padding.bottom = cssLengthToPx(props.paddingBottom) ?? 0;
+  if (props.paddingLeft !== undefined) padding.left = cssLengthToPx(props.paddingLeft) ?? 0;
 
-  const borderWidth = parseFloat(props.borderWidth) || 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,
@@ -693,7 +1090,7 @@ function computeLayoutFallback(
     if (height === null) height = availableAfterMargin.height;
   } 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;
       if (height === null) height = availableAfterMargin.height;
@@ -702,7 +1099,7 @@ function computeLayoutFallback(
       if (height === null) height = thickness;
     }
   } 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) height = size;
   } else if (type === "switch" || type === "toggle") {
@@ -715,28 +1112,28 @@ function computeLayoutFallback(
     if (width === null) width = 200;
     if (height === null) 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) height = size;
   } else if (type === "badge") {
     if (width === null) width = 20;
     if (height === null) 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);
@@ -801,7 +1198,7 @@ function layoutChildrenFallback(ctx: CanvasRenderingContext2D, parent: VirtualNo
   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;
@@ -819,7 +1216,11 @@ function layoutChildrenFallback(ctx: CanvasRenderingContext2D, parent: VirtualNo
 
   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);