@swiftbrowser/web 0.1.0

package/src/layout/engine.ts

@@ -0,0 +1,3581 @@
+/**
+ * The layout pass: SwiftUI's propose / report / place protocol over the
+ * renderer's element tree (docs/ops-protocol.md, "Layout engine semantics").
+ *
+ * `measure(node, proposal)` reports the size a node wants for a proposal and
+ * is memoized per (node, proposal); `place(node, proposal, x, y)` records the
+ * frame and places the children using the same memoized plans. Context (font,
+ * line limit, text alignment, enclosing stack axis, list row) flows down the
+ * tree like SwiftUI's environment and is a pure function of the node's
+ * ancestors, so it is not part of the memo key.
+ *
+ * Phase 9: a `LayoutPass` lives across commits. The renderer tells it which
+ * nodes changed (`invalidate`, `remove`); a changed node, its ancestors (their
+ * sizes may change) and its descendants (their context may change) lose their
+ * memo and their last placement. `place` returns at once for a node that was
+ * placed before with the same proposal at the same origin and was not
+ * invalidated: its whole subtree's frames, chrome and text are still those of
+ * the last pass. `run` reports the ids it touched so the DOM pass only visits
+ * those.
+ */
+
+import { FONT_FAMILIES, defaultFont, makeFont, resolveFont, textStyleSize } from './typography';
+import { wrapText } from './text';
+import { formatPickerDate, formatPickerTime, sliderFraction } from './controls';
+import {
+  CHART_LEGEND_GAP,
+  CHART_LEGEND_GLYPH,
+  annotationFrame,
+  chartSize,
+  layoutChart,
+  legendGlyphSize,
+  unitRect,
+  type ChartAxisInput,
+  type ChartGeometry,
+  type ChartItemPosition,
+  type ChartLegendInput,
+} from './chart';
+import type {
+  EdgeInsets,
+  LayoutChildSizes,
+  LayoutEnvironment,
+  LayoutNode,
+  LayoutRecord,
+  LayoutResult,
+  Proposal,
+  Rect,
+  ResolvedFont,
+  Size,
+  TextAlignment,
+  TextLayout,
+  TextMeasurer,
+} from './types';
+
+type Axis = 'horizontal' | 'vertical';
+
+export interface Context {
+  font: ResolvedFont;
+  lineLimit: number | null;
+  textAlignment: TextAlignment;
+  /** The enclosing stack's axis (through `styled` wrappers), for spacer/divider. */
+  stackAxis: Axis | null;
+  /** True for a list row element (through `styled` wrappers): navlinks reserve a chevron. */
+  listRow: boolean;
+  /**
+   * Height of the bar covering the bottom of the screen above the subtree
+   * (a `tabview`'s bar plus the bottom safe area), 0 outside tabs. Scrolling
+   * views that reach the screen bottom inset their content by it.
+   */
+  bottomBar: number;
+  /** Phase 6 `imageScale`: symbol images measure this fraction of the line height (1 by default). */
+  imageScale: number;
+  /** Phase 7: true inside the sidebar column of a `navsplit` (a selected `navlink` row drops its chevron there). */
+  splitSidebar: boolean;
+  /**
+   * Phase 8: the y (screen coordinates) where content clears the bars above
+   * it: the top safe area at the root, the bottom of a `navscreen`'s bar (and
+   * large title / search field) inside one. `.ignoresSafeArea` grows up to 0
+   * from here.
+   */
+  safeTop: number;
+  /**
+   * Phase 12: the size of the nearest container (`containerRelativeFrame`):
+   * the screen at the root, a scroll view's viewport inside one.
+   */
+  container: Size;
+}
+
+// Constants from the spec.
+const DEFAULT_SPACING = 8;
+const DEFAULT_SPACER_MIN = 8;
+/** Phase 5: the square an `image` whose catalog name is unknown measures. */
+const UNKNOWN_IMAGE_SIDE = 44;
+const SHAPE_DEFAULT = 10;
+const BORDERED_PAD_V = 7;
+const BORDERED_PAD_H = 14;
+const BORDERED_MIN_HEIGHT = 34;
+const SWITCH_WIDTH = 51;
+const SWITCH_HEIGHT = 31;
+const TOGGLE_GAP = 8;
+const TEXTFIELD_DEFAULT_WIDTH = 200;
+const TEXTFIELD_HEIGHT_ROUNDED = 34;
+const TEXTFIELD_HEIGHT_PLAIN = 22;
+const NAV_BAR_HEIGHT = 44;
+const LARGE_TITLE_HEIGHT = 52;
+/** Chevron glyph plus its gap, in px. */
+const BACK_CHEVRON_WIDTH = 24;
+const SHEET_TOP_GAP = 10;
+const SHEET_GRABBER_ROW = 20;
+const SHEET_GRABBER: Size = { width: 36, height: 5 };
+const SHEET_GRABBER_TOP = 8;
+const LIST_INSET = 16;
+const LIST_CELL_PADDING = 16;
+const LIST_ROW_VPAD = 11;
+const LIST_ROW_MIN_HEIGHT = 44;
+const LIST_TOP = 20;
+const LIST_BOTTOM = 20;
+const LIST_HEADER_GAP = 8;
+const LIST_FOOTER_GAP = 8;
+const LIST_SECTION_GAP = 35;
+const LIST_CHEVRON_WIDTH = 20;
+// Phase 4.
+const TAB_BAR_HEIGHT = 49;
+const PICKER_SEGMENTED_HEIGHT = 32;
+const PICKER_SEGMENT_PAD = 20;
+const PICKER_SEGMENT_FONT_SIZE = 13;
+const PICKER_MENU_ROW_HEIGHT = 44;
+const PICKER_MENU_HEIGHT = 34;
+/** `chevron.up.chevron.down` glyph width plus the gap to the value text. */
+const PICKER_MENU_CHEVRON_WIDTH = 20;
+const PICKER_MENU_GAP = 12;
+// Phase 6.
+const GAUGE_BAR_HEIGHT = 4;
+const GAUGE_LABEL_GAP = 4;
+const GAUGE_DEFAULT_WIDTH = 100;
+const GRID_ITEM_DEFAULT_MIN = 10;
+// Phase 6 (docs/phase6/chrome.md).
+const PICKER_INLINE_ROW_HEIGHT = 44;
+/** Checkmark glyph (20) plus its gap to the option title. */
+const PICKER_INLINE_CHECK_WIDTH = 28;
+/** Space between a list row's content and its trailing badge. */
+const BADGE_GAP = 8;
+const NAV_ITEM_SPACING = 16;
+const NAV_ITEM_MARGIN = 16;
+const BOTTOM_BAR_HEIGHT = 49;
+const SEARCH_FIELD_HEIGHT = 36;
+const SEARCH_FIELD_MARGIN_H = 16;
+const SEARCH_FIELD_PAD_V = 8;
+/** 8 above the 36pt field and 8 below: what a search field adds to the bar. */
+const SEARCH_AREA_HEIGHT = SEARCH_FIELD_HEIGHT + 2 * SEARCH_FIELD_PAD_V;
+const SEARCH_FIELD_DEFAULT_WIDTH = 200;
+const IMAGE_SCALES: Readonly<Record<string, number>> = { small: 0.8, medium: 1, large: 1.25 };
+// Phase 7 (docs/ops-protocol.md, "NavigationSplitView").
+const NAVSPLIT_SIDEBAR_WIDTH = 320;
+/** The sidebar never takes more than this share of the split view's width. */
+const NAVSPLIT_SIDEBAR_MAX_FRACTION = 0.4;
+const NAVSPLIT_SEPARATOR_WIDTH = 1;
+const EPSILON = 1e-6;
+// Phase 8 (docs/ops-protocol.md, "Phase 8: interaction": alerts and controls).
+/** The segmented −/+ control of a `stepper`, trailing. */
+const STEPPER_WIDTH = 94;
+const STEPPER_HEIGHT = 32;
+const STEPPER_GAP = 8;
+/** A `slider` is 44 high (its label row, when present, sits above). */
+const SLIDER_HEIGHT = 44;
+const SLIDER_TRACK_HEIGHT = 4;
+const SLIDER_THUMB = 27;
+const SLIDER_DEFAULT_WIDTH = 200;
+/** Gap between a min / max value label and the track. */
+const SLIDER_LABEL_GAP = 8;
+/** A compact `datepicker` is 34 high; its capsules pad the text by 11 and sit 8 apart. */
+const DATEPICKER_HEIGHT = 34;
+const DATEPICKER_CAPSULE_PAD_H = 11;
+const DATEPICKER_CAPSULE_GAP = 8;
+const DATEPICKER_GAP = 8;
+/** A `texteditor` fills the proposal; 100 high when proposed nil. */
+const TEXTEDITOR_DEFAULT_HEIGHT = 100;
+/** `alert` style: a 270 wide centered card. */
+const ALERT_WIDTH = 270;
+const ALERT_PAD_TOP = 20;
+const ALERT_PAD_H = 16;
+const ALERT_PAD_BOTTOM = 20;
+/** Gap between the alert title and its message. */
+const ALERT_TITLE_GAP = 4;
+const ALERT_BUTTON_HEIGHT = 44;
+/** `dialog` style (action sheet): cards inset 8 from the screen edges and the bottom safe area. */
+const DIALOG_MARGIN = 8;
+const DIALOG_BUTTON_HEIGHT = 57;
+const DIALOG_HEADER_PAD_V = 14;
+const DIALOG_HEADER_PAD_H = 16;
+/** Gap between the dialog's button card and its cancel card. */
+const DIALOG_CARD_GAP = 8;
+const DIALOG_BUTTON_FONT_SIZE = 20;
+const SAFE_AREA_EDGES = ['top', 'leading', 'bottom', 'trailing'] as const;
+
+// ---------------------------------------------------------------------------
+// Prop readers (props are untrusted JSON)
+// ---------------------------------------------------------------------------
+
+function obj(value: unknown): Record<string, unknown> | null {
+  return typeof value === 'object' && value !== null ? (value as Record<string, unknown>) : null;
+}
+function num(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+function str(value: unknown): string | null {
+  return typeof value === 'string' ? value : null;
+}
+/** A frame dimension: a number or the string "infinity". */
+function dim(value: unknown): number | null {
+  if (value === 'infinity') return Infinity;
+  return num(value);
+}
+
+function styleOf(node: LayoutNode): Record<string, unknown> {
+  return obj(node.props['style']) ?? {};
+}
+
+function readInsets(value: unknown): EdgeInsets | null {
+  const o = obj(value);
+  if (!o) return null;
+  return {
+    top: num(o['top']) ?? 0,
+    leading: num(o['leading']) ?? 0,
+    bottom: num(o['bottom']) ?? 0,
+    trailing: num(o['trailing']) ?? 0,
+  };
+}
+
+interface FrameSpec {
+  width: number | null;
+  height: number | null;
+  minWidth: number | null;
+  maxWidth: number | null;
+  minHeight: number | null;
+  maxHeight: number | null;
+  alignment: string;
+}
+
+function readFrame(value: unknown): FrameSpec | null {
+  const o = obj(value);
+  if (!o) return null;
+  return {
+    width: num(o['width']),
+    height: num(o['height']),
+    minWidth: dim(o['minWidth']),
+    maxWidth: dim(o['maxWidth']),
+    minHeight: dim(o['minHeight']),
+    maxHeight: dim(o['maxHeight']),
+    alignment: str(o['alignment']) ?? 'center',
+  };
+}
+
+/** Phase 12 `containerRelativeFrame` hint: `a × container + b` on the marked axes. */
+interface ContainerRelativeFrameSpec {
+  horizontal: boolean;
+  vertical: boolean;
+  a: number;
+  b: number;
+  alignment: string;
+}
+
+function readContainerRelativeFrame(value: unknown): ContainerRelativeFrameSpec | null {
+  const o = obj(value);
+  if (!o) return null;
+  const horizontal = o['horizontal'] === true;
+  const vertical = o['vertical'] === true;
+  if (!horizontal && !vertical) return null;
+  return { horizontal, vertical, a: num(o['a']) ?? 1, b: num(o['b']) ?? 0, alignment: str(o['alignment']) ?? 'center' };
+}
+
+interface AspectRatioSpec {
+  /** The ratio (width ÷ height), or null for the child's own ideal ratio. */
+  ratio: number | null;
+  fill: boolean;
+}
+
+function readAspectRatio(value: unknown): AspectRatioSpec | null {
+  const o = obj(value);
+  if (!o) return null;
+  const ratio = num(o['ratio']);
+  return { ratio: ratio !== null && ratio > 0 ? ratio : null, fill: o['contentMode'] === 'fill' };
+}
+
+/** `layoutPriority` of a stack child, read through its `styled` wrappers (outermost wins). */
+function layoutPriorityOf(node: LayoutNode): number {
+  let current: LayoutNode | undefined = node;
+  while (current && current.kind === 'styled') {
+    const priority = num(styleOf(current)['layoutPriority']);
+    if (priority !== null) return priority;
+    current = current.children.length === 1 ? current.children[0] : undefined;
+  }
+  return 0;
+}
+
+/** The element under a chain of `styled` wrappers. */
+function unwrapStyled(node: LayoutNode): LayoutNode {
+  let current = node;
+  while (current.kind === 'styled' && current.children.length === 1) {
+    current = current.children[0] as LayoutNode;
+  }
+  return current;
+}
+
+/** A `{x, y}` pair of finite numbers. */
+function readPoint(value: unknown): { x: number; y: number } | null {
+  const o = obj(value);
+  if (!o) return null;
+  const x = num(o['x']);
+  const y = num(o['y']);
+  return x !== null && y !== null ? { x, y } : null;
+}
+
+/** A `{width, height}` proposal from props (`"infinity"` → Infinity, null → null). */
+function readProposal(value: unknown): Proposal | null {
+  const o = obj(value);
+  if (!o) return null;
+  const axis = (v: unknown): number | null | undefined => {
+    if (v === null) return null;
+    if (v === 'infinity') return Infinity;
+    const n = num(v);
+    return n === null ? undefined : n;
+  };
+  const width = axis(o['width']);
+  const height = axis(o['height']);
+  if (width === undefined || height === undefined) return null;
+  return { width, height };
+}
+
+/** Whether two proposals agree on both axes (within the 2-decimal rounding Swift applies). */
+function sameProposal(a: Proposal, b: Proposal | null): boolean {
+  if (!b) return false;
+  const same = (x: number | null, y: number | null): boolean =>
+    x === y || (x !== null && y !== null && (x === Infinity ? y === Infinity : Math.abs(x - y) < 0.01));
+  return same(a.width, b.width) && same(a.height, b.height);
+}
+
+/** A `{width, height}` whose dimensions may be `"infinity"`. */
+function readFlexSize(value: unknown): Size | null {
+  const o = obj(value);
+  if (!o) return null;
+  const axis = (v: unknown): number | null => (v === 'infinity' ? Infinity : num(v));
+  const width = axis(o['width']);
+  const height = axis(o['height']);
+  return width !== null && height !== null ? { width: Math.max(0, width), height: Math.max(0, height) } : null;
+}
+
+/** A custom layout's `{min, ideal, max}` sizes from its props. */
+function readLayoutSizes(value: unknown): { min: Size; ideal: Size; max: Size } | null {
+  const o = obj(value);
+  if (!o) return null;
+  const min = readFlexSize(o['min']);
+  const ideal = readFlexSize(o['ideal']);
+  const max = readFlexSize(o['max']);
+  return min && ideal && max ? { min, ideal, max } : null;
+}
+
+/** A `{width, height}` pair of finite, non-negative numbers. */
+function readSize(value: unknown): Size | null {
+  const o = obj(value);
+  if (!o) return null;
+  const width = num(o['width']);
+  const height = num(o['height']);
+  return width !== null && height !== null ? { width: Math.max(0, width), height: Math.max(0, height) } : null;
+}
+
+/** A `{x, y, width, height}` rect of finite numbers. */
+function readRect(value: unknown): Rect | null {
+  const point = readPoint(value);
+  const size = readSize(value);
+  return point && size ? { ...point, ...size } : null;
+}
+
+/** A style key of a grid cell, read through its `styled` wrappers (outermost wins). */
+function cellStyle(node: LayoutNode, key: string): unknown {
+  let current: LayoutNode | undefined = node;
+  while (current && current.kind === 'styled') {
+    const value = styleOf(current)[key];
+    if (value !== undefined && value !== null) return value;
+    current = current.children.length === 1 ? current.children[0] : undefined;
+  }
+  return undefined;
+}
+
+/** `gridCellColumns` of a grid cell (at least 1). */
+function gridSpanOf(node: LayoutNode): number {
+  const span = num(cellStyle(node, 'gridCellColumns'));
+  return span !== null && span >= 1 ? Math.floor(span) : 1;
+}
+
+/** `gridCellAnchor` of a grid cell as [horizontal, vertical] unit anchors. */
+function gridAnchorOf(node: LayoutNode): [number, number] | null {
+  const point = readPoint(cellStyle(node, 'gridCellAnchor'));
+  return point ? [point.x, point.y] : null;
+}
+
+/** Vertical anchor of a `gridrow` alignment (null → the grid's). */
+function rowAnchor(alignment: string | null, gridAlignment: string): number {
+  switch (alignment) {
+    case 'top':
+    case 'firstTextBaseline':
+      return 0;
+    case 'center':
+      return 0.5;
+    case 'bottom':
+    case 'lastTextBaseline':
+      return 1;
+    default:
+      return alignmentAnchors(gridAlignment)[1];
+  }
+}
+
+interface GridItemSpec {
+  kind: 'fixed' | 'flexible' | 'adaptive';
+  value: number;
+  minimum: number;
+  maximum: number;
+  spacing: number;
+  alignment: string | null;
+}
+
+/** `columns` of a `lazyvgrid` (untrusted JSON); an empty list is one flexible column. */
+function readGridItems(value: unknown): GridItemSpec[] {
+  const items: GridItemSpec[] = [];
+  if (Array.isArray(value)) {
+    for (const raw of value) {
+      const o = obj(raw);
+      if (!o) continue;
+      const size = obj(o['size']) ?? {};
+      const kind = str(size['kind']);
+      const minimum = Math.max(0, num(size['minimum']) ?? GRID_ITEM_DEFAULT_MIN);
+      const maximum = Math.max(minimum, dim(size['maximum']) ?? Infinity);
+      items.push({
+        kind: kind === 'fixed' ? 'fixed' : kind === 'adaptive' ? 'adaptive' : 'flexible',
+        value: Math.max(0, num(size['value']) ?? 0),
+        minimum,
+        maximum,
+        spacing: num(o['spacing']) ?? DEFAULT_SPACING,
+        alignment: str(o['alignment']),
+      });
+    }
+  }
+  if (items.length === 0) {
+    items.push({
+      kind: 'flexible',
+      value: 0,
+      minimum: GRID_ITEM_DEFAULT_MIN,
+      maximum: Infinity,
+      spacing: DEFAULT_SPACING,
+      alignment: null,
+    });
+  }
+  return items;
+}
+
+interface RowHints {
+  /** `.badge(_:)` text (non-empty), or null. */
+  badge: string | null;
+  /** `.listRowInsets(_:)`, or null for the defaults. */
+  insets: EdgeInsets | null;
+}
+
+/**
+ * Phase 6 list row hints, read through the row's `styled` chain (the
+ * outermost wins, like `layoutPriority`): `badge` and `listRowInsets`.
+ */
+function rowHintsOf(node: LayoutNode): RowHints {
+  const hints: RowHints = { badge: null, insets: null };
+  let current: LayoutNode | undefined = node;
+  // `NavigationLink(value:) { OrderRow().badge(n) }`: the hints sit on the
+  // link's label, which is the row's content. Phase 8 wrappers (`listrow`,
+  // `swipeactions`, `contextmenu`, `gesture`) are looked through the same way.
+  while (current) {
+    if (current.kind === 'styled') {
+      const style = styleOf(current);
+      if (hints.badge === null) {
+        const badge = str(style['badge']);
+        if (badge !== null && badge.length > 0) hints.badge = badge;
+      }
+      if (hints.insets === null) hints.insets = readInsets(style['listRowInsets']);
+      current = current.children.length === 1 ? current.children[0] : undefined;
+    } else if (current.kind === 'navlink' && current.children.length === 1) {
+      current = current.children[0];
+    } else if (ROW_WRAPPERS.has(current.kind) && current.children.length >= 1) {
+      current = current.children[0];
+    } else {
+      break;
+    }
+  }
+  return hints;
+}
+
+/** Phase 8 wrappers whose first child is the row content they stand for. */
+const ROW_WRAPPERS: ReadonlySet<string> = new Set(['listrow', 'swipeactions', 'contextmenu', 'gesture', 'tapgesture']);
+
+/**
+ * Phase 8: the `listrow` a list row is (or wraps, through `styled` and the
+ * other wrappers), or null for a plain row. Edit mode shifts such rows.
+ */
+function listRowOf(node: LayoutNode): LayoutNode | null {
+  let current: LayoutNode | undefined = node;
+  while (current) {
+    if (current.kind === 'listrow') return current;
+    if (current.kind === 'styled' || ROW_WRAPPERS.has(current.kind)) current = current.children[0];
+    else return null;
+  }
+  return null;
+}
+
+/** Phase 8 edit mode: the width of a `listrow`'s leading control, by which its content shifts right. */
+export const LIST_EDIT_CONTROL_WIDTH = 44;
+
+/** `font` with every metric multiplied by `scale` (for `imageScale`d symbols). */
+function scaledFont(font: ResolvedFont, scale: number): ResolvedFont {
+  if (scale === 1) return font;
+  const size = font.size * scale;
+  const lineHeight = font.lineHeight * scale;
+  const px = (v: number): string => `${Math.round(v * 100) / 100}px`;
+  return { ...font, size, lineHeight, css: `${font.weight} ${px(size)}/${px(lineHeight)} ${FONT_FAMILIES[font.family]}` };
+}
+
+// ---------------------------------------------------------------------------
+// Geometry helpers
+// ---------------------------------------------------------------------------
+
+function clamp(value: number, min: number | null, max: number | null): number {
+  let v = value;
+  if (max !== null) v = Math.min(v, max);
+  if (min !== null) v = Math.max(v, min);
+  return v;
+}
+
+function finite(value: number | null): value is number {
+  return value !== null && Number.isFinite(value);
+}
+
+/** Subtract a length from a proposal axis (null and Infinity pass through). */
+function shrink(value: number | null, by: number): number | null {
+  if (!finite(value)) return value;
+  return Math.max(0, value - by);
+}
+
+function axisOf(size: Size, axis: Axis): number {
+  return axis === 'horizontal' ? size.width : size.height;
+}
+function crossOf(size: Size, axis: Axis): number {
+  return axis === 'horizontal' ? size.height : size.width;
+}
+function makeProposal(axis: Axis, along: number | null, cross: number | null): Proposal {
+  return axis === 'horizontal' ? { width: along, height: cross } : { width: cross, height: along };
+}
+
+/** Horizontal (0/0.5/1) and vertical (0/0.5/1) anchors for a SwiftUI alignment. */
+function alignmentAnchors(alignment: string): [number, number] {
+  switch (alignment) {
+    case 'leading':
+      return [0, 0.5];
+    case 'trailing':
+      return [1, 0.5];
+    case 'top':
+      return [0.5, 0];
+    case 'bottom':
+      return [0.5, 1];
+    case 'topLeading':
+      return [0, 0];
+    case 'topTrailing':
+      return [1, 0];
+    case 'bottomLeading':
+      return [0, 1];
+    case 'bottomTrailing':
+      return [1, 1];
+    default:
+      return [0.5, 0.5];
+  }
+}
+
+function alignIn(container: Size, child: Size, alignment: string): { dx: number; dy: number } {
+  const [ax, ay] = alignmentAnchors(alignment);
+  return {
+    dx: safeOffset(container.width, child.width, ax),
+    dy: safeOffset(container.height, child.height, ay),
+  };
+}
+
+function safeOffset(container: number, child: number, anchor: number): number {
+  if (!Number.isFinite(container) || !Number.isFinite(child)) return 0;
+  return (container - child) * anchor;
+}
+
+const ZERO: Size = { width: 0, height: 0 };
+const NIL_PROPOSAL: Proposal = { width: null, height: null };
+const MIN_PROPOSAL: Proposal = { width: 0, height: 0 };
+const MAX_PROPOSAL: Proposal = { width: Infinity, height: Infinity };
+
+function square(side: number): Size {
+  return { width: side, height: side };
+}
+
+function proposalKey(p: Proposal): string {
+  return `${p.width === null ? 'n' : p.width}|${p.height === null ? 'n' : p.height}`;
+}
+
+/**
+ * Snap a frame to whole CSS pixels: both edges floor (with an epsilon for
+ * float noise), so nested and adjacent frames never overlap by a fraction and
+ * integer sizes survive fractional origins.
+ */
+function snapRect(r: Rect): Rect {
+  const x = Math.floor(fin(r.x) + EPSILON);
+  const y = Math.floor(fin(r.y) + EPSILON);
+  const right = Math.floor(fin(r.x) + fin(r.width) + EPSILON);
+  const bottom = Math.floor(fin(r.y) + fin(r.height) + EPSILON);
+  return { x, y, width: Math.max(0, right - x), height: Math.max(0, bottom - y) };
+}
+function fin(v: number): number {
+  return Number.isFinite(v) ? v : 0;
+}
+
+// ---------------------------------------------------------------------------
+// Plans (memoized per node + proposal)
+// ---------------------------------------------------------------------------
+
+interface StackPlan {
+  size: Size;
+  childSizes: Size[];
+  childProposals: Proposal[];
+}
+
+interface StyledPlan {
+  size: Size;
+  /** The child's reported size (0×0 without a child). */
+  childSize: Size;
+  childProposal: Proposal;
+  /** Rect the child is aligned in, relative to the styled frame. */
+  contentBox: Rect;
+  alignment: string;
+  /** Phase 6 `.position(x:y:)`: the child's center inside the content box, and its ideal size. */
+  position: { x: number; y: number; ideal: Size } | null;
+}
+
+interface TextPlan {
+  size: Size;
+  layout: TextLayout;
+}
+
+// Phase 8 controls.
+interface SliderPlan {
+  size: Size;
+  label: LayoutNode | null;
+  min: LayoutNode | null;
+  max: LayoutNode | null;
+  labelSize: Size;
+  minSize: Size;
+  maxSize: Size;
+  /** Height of the label row above the 44 track row (0 without a label). */
+  labelRow: number;
+  cctx: Context;
+}
+
+interface DatePickerPlan {
+  size: Size;
+  /** Null when there is no label child or `labelsHidden` is set. */
+  label: LayoutNode | null;
+  labelProposal: Proposal;
+  labelSize: Size;
+  /** Capsule widths (text + 2 × 11), 0 for an absent component. */
+  dateWidth: number;
+  timeWidth: number;
+  capsulesWidth: number;
+  cctx: Context;
+}
+
+interface ListRowPlan {
+  node: LayoutNode;
+  proposal: Proposal;
+  /** Content size reported by the row element. */
+  contentSize: Size;
+  /** Full-width row rect, relative to the list origin at scroll 0. */
+  row: Rect;
+  /** Where the row element is placed. */
+  content: Rect;
+  /** Phase 6 `.badge`: trailing text in the row (rect relative to the list origin). */
+  badge: { rect: Rect; layout: TextLayout } | null;
+  /** Phase 8 edit mode: the `listrow` the row is and its 44px leading control rect (relative to the list origin). */
+  edit: { listRow: LayoutNode; control: Rect } | null;
+}
+
+interface ListGroupPlan {
+  section: LayoutNode | null;
+  frame: Rect;
+  header: { rect: Rect; layout: TextLayout } | null;
+  footer: { rect: Rect; layout: TextLayout } | null;
+  card: Rect;
+  rows: ListRowPlan[];
+}
+
+interface ListPlan {
+  size: Size;
+  contentSize: Size;
+  groups: ListGroupPlan[];
+}
+
+interface ScrollPlan {
+  size: Size;
+  content: LayoutNode | null;
+  contentProposal: Proposal;
+  contentSize: Size;
+}
+
+interface PickerPlan {
+  size: Size;
+  style: 'segmented' | 'menu' | 'inline';
+  font: ResolvedFont;
+  options: string[];
+  selected: number;
+  /** Menu style: the label's and the value's (text + chevron) widths. */
+  labelWidth: number;
+  valueWidth: number;
+  /** Inline style: whether a label row precedes the options. */
+  labelRow: boolean;
+}
+
+// Phase 6 plans.
+
+interface GridCellPlan {
+  node: LayoutNode;
+  column: number;
+  span: number;
+  /** The cell box width: the spanned columns plus the spacing between them. */
+  width: number;
+  size: Size;
+  /** Full-span cell of a non-`gridrow` child (measured with the grid width). */
+  full: boolean;
+}
+
+interface GridRowPlan {
+  /** The `gridrow` element, or null for a full-span child. */
+  node: LayoutNode | null;
+  cells: GridCellPlan[];
+  y: number;
+  height: number;
+  alignment: string | null;
+}
+
+interface GridPlan {
+  size: Size;
+  columns: number[];
+  columnX: number[];
+  rows: GridRowPlan[];
+}
+
+interface LazyColumnPlan {
+  x: number;
+  width: number;
+  alignment: string | null;
+}
+
+interface LazyGridPlan {
+  size: Size;
+  columns: LazyColumnPlan[];
+  rows: { y: number; height: number; cells: { node: LayoutNode; column: number; size: Size }[] }[];
+}
+
+interface GaugePlan {
+  size: Size;
+  label: LayoutNode | null;
+  current: LayoutNode | null;
+  labelSize: Size;
+  currentSize: Size;
+  /** Height of the label row (0 without labels). */
+  labelRow: number;
+  labelCtx: Context;
+}
+
+/** Phase 7: one `chartitem` child of a chart, measured at its ideal size. */
+interface ChartItemPlan {
+  node: LayoutNode;
+  role: string;
+  size: Size;
+  /** Frame relative to the chart's origin. */
+  frame: Rect;
+}
+
+interface ChartPlan {
+  size: Size;
+  geometry: ChartGeometry;
+  /** The axis / legend font (`caption`). */
+  font: ResolvedFont;
+  items: ChartItemPlan[];
+  /** Text labels in `geometry.xLabels` / `geometry.yLabels` order. */
+  xLabelTexts: string[];
+  yLabelTexts: string[];
+  childCtx: Context;
+}
+
+/** `options` of a picker as strings (untrusted JSON). */
+function readOptions(node: LayoutNode): string[] {
+  const raw = node.props['options'];
+  return Array.isArray(raw) ? raw.map((o) => (typeof o === 'string' ? o : String(o))) : [];
+}
+
+/** `selected` clamped to `0 ..< count` (0 when there is nothing to select). */
+function readSelected(node: LayoutNode, count: number): number {
+  const raw = num(node.props['selected']) ?? 0;
+  return count === 0 ? 0 : Math.min(count - 1, Math.max(0, Math.floor(raw)));
+}
+
+// ---------------------------------------------------------------------------
+// The pass
+// ---------------------------------------------------------------------------
+
+export class LayoutPass {
+  readonly frames = new Map<number, Rect>();
+  readonly text = new Map<number, TextLayout>();
+  readonly fonts = new Map<number, ResolvedFont>();
+  readonly contentSizes = new Map<number, Size>();
+  readonly chrome = new Map<number, Record<string, Rect>>();
+  readonly chromeText = new Map<number, Record<string, TextLayout>>();
+  readonly hidden = new Set<number>();
+  readonly layouts = new Map<number, LayoutRecord>();
+  /** Previous screen title per navscreen node, for the back button label. */
+  private readonly previousTitles = new Map<LayoutNode, string>();
+
+  private readonly memo = new Map<LayoutNode, Map<string, unknown>>();
+  private readonly implicit = new Map<LayoutNode, LayoutNode>();
+  private implicitIds = -1;
+  private readonly rootContext: Context;
+  /** Phase 9: where (and for what proposal) every node was last placed. */
+  private readonly placed = new Map<LayoutNode, { key: string; x: number; y: number }>();
+  /** Phase 9: the ids each node hid when it was last placed (menu items, tabs, ...). */
+  private readonly hiddenBy = new Map<LayoutNode, number[]>();
+  /** Phase 9: ids placed or hidden in the current `run`; what the DOM pass must visit. */
+  private touched = new Set<number>();
+  /** Phase 9: the run that last wrote each node's chrome (a node's own place drops older entries). */
+  private readonly chromeRun = new Map<number, number>();
+  private runId = 0;
+  /** Phase 9: how many nodes `run` placed from scratch and skipped (for tests and profiling). */
+  stats = { placed: 0, skipped: 0 };
+
+  constructor(
+    private readonly env: LayoutEnvironment,
+    private readonly measurer: TextMeasurer,
+    /** Phase 9: the parent of a node in the renderer's tree (for `invalidate`); null at the root. */
+    private readonly parentOf: (node: LayoutNode) => LayoutNode | null = () => null,
+  ) {
+    this.rootContext = {
+      font: defaultFont(env),
+      lineLimit: null,
+      textAlignment: 'leading',
+      stackAxis: null,
+      listRow: false,
+      bottomBar: 0,
+      imageScale: 1,
+      splitSidebar: false,
+      safeTop: env.safeArea.top,
+      container: { width: env.screen.width, height: env.screen.height },
+    };
+  }
+
+  run(roots: readonly LayoutNode[]): LayoutResult {
+    this.runId += 1;
+    this.touched = new Set();
+    this.stats = { placed: 0, skipped: 0 };
+    const { screen, safeArea } = this.env;
+    const ctx = this.rootContext;
+    for (const root of roots) {
+      if (root.kind === 'navstack' || root.kind === 'tabview' || root.kind === 'navsplit' || root.kind === 'alert') {
+        // All three ignore the safe areas: the tab bar and navigation bars
+        // extend into them and the content is inset instead (a `navsplit`
+        // hands the horizontal insets to its columns, see `placeNavSplit`).
+        // Phase 8: an `alert` is a full-screen layer too (scrim + card).
+        this.place(root, ctx, { width: screen.width, height: screen.height }, 0, 0);
+      } else if (root.kind === 'sheet') {
+        const proposal: Proposal = { width: screen.width, height: null };
+        const size = this.measure(root, ctx, proposal);
+        this.place(root, ctx, proposal, 0, screen.height - size.height);
+      } else {
+        const safe: Size = {
+          width: Math.max(0, screen.width - safeArea.leading - safeArea.trailing),
+          height: Math.max(0, screen.height - safeArea.top - safeArea.bottom),
+        };
+        const proposal: Proposal = { width: safe.width, height: safe.height };
+        const size = this.measure(root, ctx, proposal);
+        const { dx, dy } = alignIn(safe, size, 'center');
+        this.place(root, ctx, proposal, safeArea.leading + dx, safeArea.top + dy);
+      }
+    }
+    return this.finish();
+  }
+
+  private finish(): LayoutResult {
+    // Only what this run produced needs snapping; the rest was snapped when
+    // it was produced.
+    for (const id of this.touched) {
+      const rect = this.frames.get(id);
+      if (rect) this.frames.set(id, snapRect(rect));
+      const rects = this.chrome.get(id);
+      if (rects) {
+        const snapped: Record<string, Rect> = {};
+        for (const key of Object.keys(rects)) snapped[key] = snapRect(rects[key] as Rect);
+        this.chrome.set(id, snapped);
+      }
+      const size = this.contentSizes.get(id);
+      if (size) {
+        this.contentSizes.set(id, {
+          width: Math.round(fin(size.width) + EPSILON),
+          height: Math.round(fin(size.height) + EPSILON),
+        });
+      }
+    }
+    return {
+      frames: this.frames,
+      text: this.text,
+      fonts: this.fonts,
+      contentSizes: this.contentSizes,
+      chrome: this.chrome,
+      chromeText: this.chromeText,
+      hidden: this.hidden,
+      layouts: this.layouts,
+      changed: this.touched,
+    };
+  }
+
+  // -------------------------------------------------------------------------
+  // Phase 9: invalidation across runs
+  // -------------------------------------------------------------------------
+
+  /**
+   * `node`'s props changed (or it gained / lost a child): it, its ancestors
+   * and its descendants are measured and placed again on the next run.
+   */
+  invalidate(node: LayoutNode): void {
+    this.invalidateUp(node);
+    this.invalidateDown(node);
+  }
+
+  /** `node` (or a descendant) changed in a way that can change its size. */
+  invalidateUp(node: LayoutNode): void {
+    for (let current: LayoutNode | null = node; current; current = this.parentOf(current)) {
+      this.forgetPlan(current);
+    }
+  }
+
+  /** `node` moved under a new ancestor or its context may have changed: its whole subtree. */
+  invalidateDown(node: LayoutNode): void {
+    this.forgetPlan(node);
+    for (const child of node.children) this.invalidateDown(child);
+  }
+
+  /** `node` left the tree: drop everything its subtree produced. */
+  remove(node: LayoutNode): void {
+    this.forgetPlan(node);
+    if (node.id >= 0) {
+      this.frames.delete(node.id);
+      this.text.delete(node.id);
+      this.fonts.delete(node.id);
+      this.contentSizes.delete(node.id);
+      this.chrome.delete(node.id);
+      this.chromeRun.delete(node.id);
+      this.chromeText.delete(node.id);
+      this.layouts.delete(node.id);
+      this.hidden.delete(node.id);
+    }
+    this.previousTitles.delete(node);
+    for (const child of node.children) this.remove(child);
+  }
+
+  private forgetPlan(node: LayoutNode): void {
+    this.memo.delete(node);
+    this.placed.delete(node);
+    const implicit = this.implicit.get(node);
+    if (implicit) {
+      this.memo.delete(implicit);
+      this.placed.delete(implicit);
+      this.implicit.delete(node);
+    }
+  }
+
+  /**
+   * `child` is not shown by `node` this time (a menu item, an unselected tab,
+   * an unchosen `viewthatfits` candidate). Tabs keep their frame; anything
+   * else loses its subtree's frames, which would otherwise outlive it.
+   */
+  private hide(child: LayoutNode, by: LayoutNode): void {
+    if (child.id < 0) return;
+    this.hidden.add(child.id);
+    this.touched.add(child.id);
+    const list = this.hiddenBy.get(by);
+    if (list) list.push(child.id);
+    else this.hiddenBy.set(by, [child.id]);
+    if (child.kind !== 'tab') this.dropFrames(child);
+  }
+
+  private dropFrames(node: LayoutNode): void {
+    this.placed.delete(node);
+    if (node.id >= 0 && this.frames.delete(node.id)) {
+      this.text.delete(node.id);
+      this.chrome.delete(node.id);
+      this.chromeText.delete(node.id);
+      this.layouts.delete(node.id);
+      this.touched.add(node.id);
+    }
+    for (const child of node.children) this.dropFrames(child);
+  }
+
+  // -------------------------------------------------------------------------
+  // Memoization and context
+  // -------------------------------------------------------------------------
+
+  private plan<T>(node: LayoutNode, proposal: Proposal, compute: () => T): T {
+    let byProposal = this.memo.get(node);
+    if (!byProposal) {
+      byProposal = new Map();
+      this.memo.set(node, byProposal);
+    }
+    const key = proposalKey(proposal);
+    const cached = byProposal.get(key);
+    if (cached !== undefined) return cached as T;
+    const value = compute();
+    byProposal.set(key, value);
+    return value;
+  }
+
+  /** Context for the children of `node`. */
+  private childContext(node: LayoutNode, ctx: Context): Context {
+    switch (node.kind) {
+      case 'styled': {
+        const style = styleOf(node);
+        let next = ctx;
+        const font = resolveFont(style['font'], ctx.font, this.env);
+        if (font !== ctx.font) next = { ...next, font };
+        if ('lineLimit' in style) {
+          const limit = num(style['lineLimit']);
+          next = { ...next, lineLimit: limit !== null && limit >= 1 ? Math.floor(limit) : null };
+        }
+        const alignment = str(style['multilineTextAlignment']);
+        if (alignment === 'leading' || alignment === 'center' || alignment === 'trailing') {
+          next = { ...next, textAlignment: alignment };
+        }
+        const imageScale = str(style['imageScale']);
+        if (imageScale !== null) next = { ...next, imageScale: IMAGE_SCALES[imageScale] ?? 1 };
+        return next;
+      }
+      case 'vstack':
+        return { ...ctx, stackAxis: 'vertical', listRow: false };
+      case 'hstack':
+        return { ...ctx, stackAxis: 'horizontal', listRow: false };
+      case 'gesture':
+      case 'swipeactions':
+      case 'contextmenu':
+      case 'listrow':
+        // Phase 8 wrappers are transparent: a `navlink` under them is still
+        // the list row (its chevron, its selected fill).
+        return ctx.stackAxis === null ? ctx : { ...ctx, stackAxis: null };
+      default:
+        if (ctx.stackAxis === null && !ctx.listRow) return ctx;
+        return { ...ctx, stackAxis: null, listRow: false };
+    }
+  }
+
+  /**
+   * A container's single content child: the child itself, or an implicit
+   * stack when a TupleView produced several children (vertical by default,
+   * like SwiftUI's implicit VStack).
+   */
+  private contentOf(node: LayoutNode, axis: Axis = 'vertical', children: LayoutNode[] = node.children): LayoutNode | null {
+    if (children.length === 0) return null;
+    if (children.length === 1) return children[0] as LayoutNode;
+    let implicit = this.implicit.get(node);
+    if (!implicit) {
+      implicit = {
+        id: this.implicitIds--,
+        kind: axis === 'vertical' ? 'vstack' : 'hstack',
+        props: { spacing: null, alignment: 'center' },
+        children,
+      };
+      this.implicit.set(node, implicit);
+    }
+    return implicit;
+  }
+
+  /**
+   * Phase 6: a `navscreen`'s children are `[content, ...extras]`, the extras
+   * being `toolbar`s and a `searchfield`. The content is whatever is not an
+   * extra (an implicit vstack when there are several such children).
+   */
+  private navScreenParts(node: LayoutNode): { content: LayoutNode | null; toolbars: LayoutNode[]; search: LayoutNode | null } {
+    const toolbars: LayoutNode[] = [];
+    let search: LayoutNode | null = null;
+    const rest: LayoutNode[] = [];
+    for (const child of node.children) {
+      if (child.kind === 'toolbar') toolbars.push(child);
+      else if (child.kind === 'searchfield') search = search ?? child;
+      else rest.push(child);
+    }
+    return { content: this.contentOf(node, 'vertical', rest), toolbars, search };
+  }
+
+  private setFrame(node: LayoutNode, x: number, y: number, size: Size): void {
+    if (node.id < 0) return;
+    this.frames.set(node.id, { x, y, width: size.width, height: size.height });
+    this.touched.add(node.id);
+  }
+
+  private setChrome(node: LayoutNode, rects: Record<string, Rect>): void {
+    if (node.id < 0) return;
+    this.chrome.set(node.id, rects);
+    this.chromeRun.set(node.id, this.runId);
+    this.touched.add(node.id);
+  }
+
+  // -------------------------------------------------------------------------
+  // Measure
+  // -------------------------------------------------------------------------
+
+  measure(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    switch (node.kind) {
+      case 'text':
+        return this.textPlan(node, ctx, p).size;
+      case 'image':
+        return this.measureImage(node, ctx, p);
+      case 'spacer':
+        return this.measureSpacer(node, ctx, p);
+      case 'divider':
+        if (ctx.stackAxis === 'horizontal') return { width: 1, height: finite(p.height) ? p.height : 0 };
+        return { width: finite(p.width) ? p.width : 0, height: 1 };
+      case 'vstack':
+        return this.stackPlan(node, ctx, p, 'vertical').size;
+      case 'hstack':
+        return this.stackPlan(node, ctx, p, 'horizontal').size;
+      case 'zstack':
+        return this.measureZStack(node, ctx, p);
+      case 'styled':
+        return this.styledPlan(node, ctx, p).size;
+      case 'button':
+        return this.measureButton(node, ctx, p);
+      case 'toggle':
+        return this.measureToggle(node, ctx, p);
+      case 'textfield': {
+        const style = str(node.props['style']);
+        return {
+          width: finite(p.width) ? p.width : TEXTFIELD_DEFAULT_WIDTH,
+          height: style === 'plain' ? TEXTFIELD_HEIGHT_PLAIN : TEXTFIELD_HEIGHT_ROUNDED,
+        };
+      }
+      case 'color':
+      case 'shape':
+        return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
+      case 'scrollview':
+        return this.scrollPlan(node, ctx, p).size;
+      case 'list':
+        return this.listPlan(node, ctx, p).size;
+      case 'navlink':
+        return this.measureNavLink(node, ctx, p);
+      case 'navstack':
+      case 'navscreen':
+      case 'tabview':
+      case 'tab':
+      case 'navsplit':
+        return {
+          width: p.width ?? this.env.screen.width,
+          height: p.height ?? this.env.screen.height,
+        };
+      case 'viewthatfits':
+        return this.viewThatFitsPlan(node, ctx, p).size;
+      case 'picker':
+        return this.pickerPlan(node, ctx, p).size;
+      case 'geometry':
+        // GeometryReader: the proposal, 10 on unconstrained axes.
+        return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
+      case 'sheet':
+        return { width: p.width ?? this.env.screen.width, height: this.sheetHeight(node) };
+      // Phase 8 controls.
+      case 'alert':
+        return { width: p.width ?? this.env.screen.width, height: p.height ?? this.env.screen.height };
+      case 'stepper':
+        return this.measureStepper(node, ctx, p);
+      case 'slider':
+        return this.sliderPlan(node, ctx, p).size;
+      case 'datepicker':
+        return this.datePickerPlan(node, ctx, p).size;
+      case 'texteditor':
+        // A textarea filling the proposal (flexible on an infinite axis, like a shape).
+        return { width: p.width ?? TEXTFIELD_DEFAULT_WIDTH, height: p.height ?? TEXTEDITOR_DEFAULT_HEIGHT };
+      case 'layout':
+        return this.measureLayout(node, ctx, p);
+      case 'grid':
+        return this.gridPlan(node, ctx, p).size;
+      case 'lazyvgrid':
+        return this.lazyGridPlan(node, ctx, p).size;
+      case 'gauge':
+        return this.gaugePlan(node, ctx, p).size;
+      case 'chart':
+        return this.chartPlan(node, ctx, p).size;
+      case 'decorated':
+      case 'chartitem': {
+        // Phase 7 `chartitem`: its one view's size (a chart measures it at its ideal size).
+        const content = node.children[0];
+        return content ? this.measure(content, this.childContext(node, ctx), p) : ZERO;
+      }
+      case 'menu': {
+        // Phase 6: the label (the first child) is the only laid-out child.
+        const label = node.children[0];
+        return label ? this.measure(label, this.childContext(node, ctx), p) : ZERO;
+      }
+      case 'searchfield':
+        // Phase 6: inside a navscreen the bar places it; elsewhere a 36pt field.
+        return { width: finite(p.width) ? p.width : SEARCH_FIELD_DEFAULT_WIDTH, height: SEARCH_FIELD_HEIGHT };
+      case 'swipeactions':
+      case 'contextmenu': {
+        // Phase 8: the content (the first child) alone; the actions / items
+        // are hidden (the renderer shows them behind the row / in a popover).
+        // A `swipeactions` that is a list row spans the row: the whole row
+        // swipes and its actions sit at the row's trailing edge.
+        const content = node.children[0];
+        const contentSize = content ? this.measure(content, this.childContext(node, ctx), p) : ZERO;
+        if (node.kind === 'swipeactions' && ctx.listRow && finite(p.width)) {
+          return { width: p.width, height: contentSize.height };
+        }
+        return contentSize;
+      }
+      case 'gesture':
+      case 'listrow':
+      case 'tapgesture':
+      default: {
+        // `tapgesture` (its child's size), `toolbar` outside a navscreen,
+        // `section` outside a list and unknown kinds: lay the children out as a vstack.
+        const content = this.contentOf(node);
+        return content ? this.measure(content, this.childContext(node, ctx), p) : ZERO;
+      }
+    }
+  }
+
+  private textPlan(node: LayoutNode, ctx: Context, p: Proposal): TextPlan {
+    return this.plan(node, p, () => {
+      const text = str(node.props['text']) ?? '';
+      const wrapped = wrapText(text, ctx.font, p.width, ctx.lineLimit, this.measurer);
+      return {
+        size: { width: wrapped.width, height: wrapped.lines.length * ctx.font.lineHeight },
+        layout: {
+          font: ctx.font,
+          lines: wrapped.lines,
+          alignment: ctx.textAlignment,
+          truncated: wrapped.truncated,
+        },
+      };
+    });
+  }
+
+  private measureSpacer(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    const min = num(node.props['minLength']);
+    if (ctx.stackAxis === null) {
+      // Outside a stack: fills both axes, minimum 0.
+      return { width: finite(p.width) ? p.width : 0, height: finite(p.height) ? p.height : 0 };
+    }
+    const minLength = min ?? DEFAULT_SPACER_MIN;
+    const along = p[ctx.stackAxis === 'horizontal' ? 'width' : 'height'];
+    let length: number;
+    if (along === null) length = minLength;
+    else if (along === Infinity) length = Infinity;
+    else length = Math.max(minLength, along);
+    return ctx.stackAxis === 'horizontal' ? { width: length, height: 0 } : { width: 0, height: length };
+  }
+
+  private measureZStack(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    const cctx = this.childContext(node, ctx);
+    let width = 0;
+    let height = 0;
+    for (const child of node.children) {
+      const size = this.measure(child, cctx, p);
+      width = Math.max(width, size.width);
+      height = Math.max(height, size.height);
+    }
+    return { width, height };
+  }
+
+  private buttonIsBordered(node: LayoutNode): boolean {
+    const style = str(node.props['style']);
+    return style === 'bordered' || style === 'borderedProminent';
+  }
+
+  private measureButton(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    const label = this.contentOf(node);
+    const cctx = this.childContext(node, ctx);
+    if (!this.buttonIsBordered(node)) return label ? this.measure(label, cctx, p) : ZERO;
+    const inner: Proposal = {
+      width: shrink(p.width, 2 * BORDERED_PAD_H),
+      height: shrink(p.height, 2 * BORDERED_PAD_V),
+    };
+    const size = label ? this.measure(label, cctx, inner) : ZERO;
+    return {
+      width: size.width + 2 * BORDERED_PAD_H,
+      height: Math.max(BORDERED_MIN_HEIGHT, size.height + 2 * BORDERED_PAD_V),
+    };
+  }
+
+  private toggleLabelProposal(p: Proposal): Proposal {
+    return { width: shrink(p.width, SWITCH_WIDTH + TOGGLE_GAP), height: p.height };
+  }
+
+  private measureToggle(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    const label = this.contentOf(node);
+    const labelSize = label
+      ? this.measure(label, this.childContext(node, ctx), this.toggleLabelProposal(p))
+      : ZERO;
+    return {
+      width: finite(p.width) ? p.width : labelSize.width + TOGGLE_GAP + SWITCH_WIDTH,
+      height: Math.max(labelSize.height, SWITCH_HEIGHT),
+    };
+  }
+
+  private navLinkLabelProposal(ctx: Context, p: Proposal): Proposal {
+    return ctx.listRow ? { width: shrink(p.width, LIST_CHEVRON_WIDTH), height: p.height } : p;
+  }
+
+  private measureNavLink(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    const label = this.contentOf(node);
+    const labelSize = label
+      ? this.measure(label, this.childContext(node, ctx), this.navLinkLabelProposal(ctx, p))
+      : ZERO;
+    if (ctx.listRow && finite(p.width)) return { width: p.width, height: labelSize.height };
+    return labelSize;
+  }
+
+  private sheetHeight(node: LayoutNode): number {
+    const detents = node.props['detents'];
+    const first = Array.isArray(detents) ? str(detents[0]) : null;
+    const { screen, safeArea } = this.env;
+    if (first === 'medium') return screen.height / 2;
+    // Phase 8: `full` (`.fullScreenCover`) covers the whole screen.
+    if (first === 'full') return screen.height;
+    return screen.height - safeArea.top - SHEET_TOP_GAP;
+  }
+
+  /** Phase 8: a sheet whose first detent is `full` has no grabber row. */
+  private sheetIsFull(node: LayoutNode): boolean {
+    const detents = node.props['detents'];
+    return Array.isArray(detents) && str(detents[0]) === 'full';
+  }
+
+  // -------------------------------------------------------------------------
+  // Picker (Phase 4)
+  // -------------------------------------------------------------------------
+
+  /**
+   * `segmented`: 32 high; the width is the proposal, or every segment label
+   * plus 20 when none is given. `menu`: 44 high in a list row, 34 elsewhere;
+   * the width is the proposal, or label + gap + value + chevron. `inline`
+   * (Phase 6): one 44 row per option, plus a label row when the label is
+   * non-empty; the width is the proposal, or the widest row.
+   */
+  private pickerPlan(node: LayoutNode, ctx: Context, p: Proposal): PickerPlan {
+    return this.plan(node, p, () => {
+      const options = readOptions(node);
+      const selected = readSelected(node, options.length);
+      const style = str(node.props['style']);
+      if (style === 'inline') {
+        const font = ctx.font;
+        const label = str(node.props['label']) ?? '';
+        const labelRow = label.length > 0;
+        let natural = labelRow ? this.measurer.measureWidth(label, font) : 0;
+        for (const option of options) {
+          natural = Math.max(natural, this.measurer.measureWidth(option, font) + PICKER_INLINE_CHECK_WIDTH);
+        }
+        const rows = options.length + (labelRow ? 1 : 0);
+        return {
+          size: { width: finite(p.width) ? p.width : natural, height: rows * PICKER_INLINE_ROW_HEIGHT },
+          style: 'inline',
+          font,
+          options,
+          selected,
+          labelWidth: 0,
+          valueWidth: 0,
+          labelRow,
+        };
+      }
+      if (style === 'segmented') {
+        const font = makeFont('system', PICKER_SEGMENT_FONT_SIZE, 600);
+        let natural = 0;
+        for (const option of options) natural += this.measurer.measureWidth(option, font) + PICKER_SEGMENT_PAD;
+        return {
+          size: { width: finite(p.width) ? p.width : natural, height: PICKER_SEGMENTED_HEIGHT },
+          style: 'segmented',
+          font,
+          options,
+          selected,
+          labelWidth: 0,
+          valueWidth: 0,
+          labelRow: false,
+        };
+      }
+      const font = ctx.font;
+      const labelWidth = this.measurer.measureWidth(str(node.props['label']) ?? '', font);
+      const value = options[selected] ?? '';
+      const valueWidth = this.measurer.measureWidth(value, font) + PICKER_MENU_CHEVRON_WIDTH;
+      const natural = labelWidth + PICKER_MENU_GAP + valueWidth;
+      return {
+        size: {
+          width: finite(p.width) ? p.width : natural,
+          height: ctx.listRow ? PICKER_MENU_ROW_HEIGHT : PICKER_MENU_HEIGHT,
+        },
+        style: 'menu',
+        font,
+        options,
+        selected,
+        labelWidth,
+        valueWidth,
+        labelRow: false,
+      };
+    });
+  }
+
+  private placePicker(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number, size: Size): void {
+    const plan = this.pickerPlan(node, ctx, p);
+    // Inside a list the row chrome was set before placing; keep it.
+    const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+    const chrome: Record<string, Rect> = { ...existing };
+    if (plan.style === 'segmented') {
+      const n = Math.max(1, plan.options.length);
+      const segmentWidth = size.width / n;
+      for (let i = 0; i < plan.options.length; i++) {
+        chrome[`segment${i}`] = { x: x + i * segmentWidth, y, width: segmentWidth, height: size.height };
+      }
+    } else if (plan.style === 'inline') {
+      // Rows span the list row when there is one (the hit area and the
+      // separators match the other rows), else the control's frame.
+      const row = existing?.['row'];
+      const rowX = row ? row.x : x;
+      const rowWidth = row ? row.width : size.width;
+      let rowY = y;
+      if (plan.labelRow) {
+        chrome['label'] = { x: rowX, y: rowY, width: rowWidth, height: PICKER_INLINE_ROW_HEIGHT };
+        rowY += PICKER_INLINE_ROW_HEIGHT;
+      }
+      for (let i = 0; i < plan.options.length; i++) {
+        chrome[`option${i}`] = { x: rowX, y: rowY, width: rowWidth, height: PICKER_INLINE_ROW_HEIGHT };
+        rowY += PICKER_INLINE_ROW_HEIGHT;
+      }
+    } else {
+      const valueWidth = Math.min(plan.valueWidth, size.width);
+      const labelWidth = Math.min(plan.labelWidth, Math.max(0, size.width - valueWidth - PICKER_MENU_GAP));
+      chrome['label'] = { x, y, width: labelWidth, height: size.height };
+      chrome['value'] = { x: x + size.width - valueWidth, y, width: valueWidth, height: size.height };
+    }
+    this.setChrome(node, chrome);
+    if (node.id >= 0) this.fonts.set(node.id, plan.font);
+  }
+
+  // -------------------------------------------------------------------------
+  // Stacks
+  // -------------------------------------------------------------------------
+
+  private stackPlan(node: LayoutNode, ctx: Context, p: Proposal, axis: Axis): StackPlan {
+    return this.plan(node, p, () => {
+      const spacing = num(node.props['spacing']) ?? DEFAULT_SPACING;
+      return this.layoutStack(node.children, this.childContext(node, ctx), p, axis, spacing);
+    });
+  }
+
+  /**
+   * SwiftUI's stack algorithm. With an axis proposal, every child's minimum
+   * and maximum along the axis (proposals 0 and Infinity, cross fixed) give
+   * its flexibility; space is handed out by descending `layoutPriority`, then
+   * least flexible first. A child is offered `remaining / childrenLeft`, where
+   * `remaining` excludes the minimum sizes of every lower-priority child and
+   * `childrenLeft` counts only the unsized children of its own priority group
+   * with *finite* flexibility: infinitely flexible children (spacers, colors,
+   * `maxWidth: infinity` frames, text fields) only reserve their minimum and
+   * share whatever is left once everything else is sized, which is why a
+   * `Spacer` never makes its sibling text wrap. With a `null` axis proposal
+   * every child is proposed `null` and the stack sizes to the sum.
+   */
+  private layoutStack(
+    children: readonly LayoutNode[],
+    cctx: Context,
+    p: Proposal,
+    axis: Axis,
+    spacing: number,
+  ): StackPlan {
+    const n = children.length;
+    if (n === 0) return { size: ZERO, childSizes: [], childProposals: [] };
+    const along = axis === 'horizontal' ? p.width : p.height;
+    const cross = axis === 'horizontal' ? p.height : p.width;
+    const totalSpacing = spacing * (n - 1);
+    const childSizes: Size[] = new Array<Size>(n);
+    const childProposals: Proposal[] = new Array<Proposal>(n);
+
+    if (along === null) {
+      const proposal = makeProposal(axis, null, cross);
+      for (let i = 0; i < n; i++) {
+        childProposals[i] = proposal;
+        childSizes[i] = this.measure(children[i] as LayoutNode, cctx, proposal);
+      }
+    } else {
+      const mins = new Array<number>(n);
+      const flex = new Array<number>(n);
+      const priorities = new Array<number>(n);
+      const minProposal = makeProposal(axis, 0, cross);
+      const maxProposal = makeProposal(axis, Infinity, cross);
+      for (let i = 0; i < n; i++) {
+        const child = children[i] as LayoutNode;
+        const min = axisOf(this.measure(child, cctx, minProposal), axis);
+        const max = axisOf(this.measure(child, cctx, maxProposal), axis);
+        mins[i] = min;
+        flex[i] = Number.isFinite(max) ? Math.max(0, max - min) : Infinity;
+        priorities[i] = layoutPriorityOf(child);
+      }
+      const order = Array.from({ length: n }, (_, i) => i).sort((a, b) => {
+        const pa = priorities[a] as number;
+        const pb = priorities[b] as number;
+        if (pa !== pb) return pb - pa;
+        const fa = flex[a] as number;
+        const fb = flex[b] as number;
+        if (fa !== fb) return fa < fb ? -1 : 1;
+        return a - b;
+      });
+
+      let remaining = Math.max(0, along - totalSpacing);
+      let i = 0;
+      while (i < n) {
+        // One priority group at a time (sorted least flexible first, so the
+        // infinitely flexible children of a group come last).
+        const priority = priorities[order[i] as number] as number;
+        let end = i;
+        while (end < n && priorities[order[end] as number] === priority) end++;
+        let lowerMin = 0;
+        for (let j = end; j < n; j++) lowerMin += mins[order[j] as number] as number;
+        let finiteLeft = 0;
+        let infiniteLeft = 0;
+        let infiniteMin = 0;
+        for (let k = i; k < end; k++) {
+          const index = order[k] as number;
+          if (Number.isFinite(flex[index])) finiteLeft++;
+          else {
+            infiniteLeft++;
+            infiniteMin += mins[index] as number;
+          }
+        }
+        for (let k = i; k < end; k++) {
+          const index = order[k] as number;
+          const isInfinite = !Number.isFinite(flex[index]);
+          let offer: number;
+          if (!Number.isFinite(remaining)) offer = Infinity;
+          else if (isInfinite) offer = Math.max(0, remaining - lowerMin) / infiniteLeft;
+          else offer = Math.max(0, remaining - lowerMin - infiniteMin) / finiteLeft;
+          const proposal = makeProposal(axis, offer, cross);
+          const size = this.measure(children[index] as LayoutNode, cctx, proposal);
+          childProposals[index] = proposal;
+          childSizes[index] = size;
+          if (Number.isFinite(remaining)) remaining = Math.max(0, remaining - axisOf(size, axis));
+          if (isInfinite) {
+            infiniteLeft--;
+            infiniteMin -= mins[index] as number;
+          } else finiteLeft--;
+        }
+        i = end;
+      }
+    }
+
+    let total = totalSpacing;
+    let crossSize = 0;
+    for (let i = 0; i < n; i++) {
+      const size = childSizes[i] as Size;
+      total += axisOf(size, axis);
+      crossSize = Math.max(crossSize, crossOf(size, axis));
+    }
+    const size: Size =
+      axis === 'horizontal' ? { width: total, height: crossSize } : { width: crossSize, height: total };
+    return { size, childSizes, childProposals };
+  }
+
+  private placeStack(
+    children: readonly LayoutNode[],
+    cctx: Context,
+    plan: StackPlan,
+    axis: Axis,
+    alignment: string,
+    spacing: number,
+    x: number,
+    y: number,
+    size: Size,
+  ): void {
+    const anchors = alignmentAnchors(alignment);
+    const crossAnchor = axis === 'horizontal' ? anchors[1] : anchors[0];
+    const crossSize = crossOf(size, axis);
+    let cursor = 0;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i] as LayoutNode;
+      const childSize = plan.childSizes[i] as Size;
+      const proposal = plan.childProposals[i] as Proposal;
+      const crossOffset = safeOffset(crossSize, crossOf(childSize, axis), crossAnchor);
+      if (axis === 'horizontal') this.place(child, cctx, proposal, x + cursor, y + crossOffset);
+      else this.place(child, cctx, proposal, x + crossOffset, y + cursor);
+      cursor += axisOf(childSize, axis) + spacing;
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Image
+  // -------------------------------------------------------------------------
+
+  /**
+   * An SF Symbol (`systemName`) and a catalog `symbol` are glyphs: a square
+   * of the font's line height. A catalog `image` has an intrinsic point size;
+   * `.resizable()` makes it fill whatever is proposed (the intrinsic size on
+   * a nil axis, like SwiftUI). A name the manifest does not know measures a
+   * fixed 44×44 so the placeholder is visible.
+   */
+  private measureImage(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    const name = str(node.props['name']);
+    if (name === null) return square(ctx.font.lineHeight * ctx.imageScale);
+    const asset = this.env.assets?.images[name];
+    if (!asset) return square(UNKNOWN_IMAGE_SIDE);
+    if (asset.kind === 'symbol') return square(ctx.font.lineHeight * ctx.imageScale);
+    const width = num(asset.width) ?? 0;
+    const height = num(asset.height) ?? 0;
+    if (node.props['resizable'] !== true) return { width, height };
+    return { width: p.width ?? width, height: p.height ?? height };
+  }
+
+  // -------------------------------------------------------------------------
+  // Styled
+  // -------------------------------------------------------------------------
+
+  /**
+   * One `styled` element may carry several layout effects; they nest as
+   * frame (outermost) > padding > fixedSize > aspectRatio > child.
+   */
+  private styledPlan(node: LayoutNode, ctx: Context, p: Proposal): StyledPlan {
+    return this.plan(node, p, () => {
+      const style = styleOf(node);
+      let frame = readFrame(style['frame']);
+      // Phase 12 `.containerRelativeFrame`: an affine size against the nearest
+      // container (screen or scroll viewport), taking the place of a fixed frame.
+      const relative = readContainerRelativeFrame(style['containerRelativeFrame']);
+      if (relative) {
+        const base: FrameSpec = frame ?? { width: null, height: null, minWidth: null, maxWidth: null, minHeight: null, maxHeight: null, alignment: relative.alignment };
+        frame = {
+          ...base,
+          alignment: frame?.alignment ?? relative.alignment,
+          width: relative.horizontal ? Math.max(0, relative.a * ctx.container.width + relative.b) : base.width,
+          height: relative.vertical ? Math.max(0, relative.a * ctx.container.height + relative.b) : base.height,
+        };
+      }
+      const padding = readInsets(style['padding']);
+      const aspect = readAspectRatio(style['aspectRatio']);
+      const fixed = obj(style['fixedSize']);
+      const fixedH = fixed?.['horizontal'] === true;
+      const fixedV = fixed?.['vertical'] === true;
+      const cctx = this.childContext(node, ctx);
+      const child = this.contentOf(node);
+
+      // Frame step: the proposal handed to the padded content.
+      let innerW: number | null = p.width;
+      let innerH: number | null = p.height;
+      if (frame) {
+        if (frame.width !== null) innerW = frame.width;
+        else if (frame.minWidth !== null || frame.maxWidth !== null)
+          innerW = p.width === null ? null : clamp(p.width, frame.minWidth, frame.maxWidth);
+        if (frame.height !== null) innerH = frame.height;
+        else if (frame.minHeight !== null || frame.maxHeight !== null)
+          innerH = p.height === null ? null : clamp(p.height, frame.minHeight, frame.maxHeight);
+      }
+      const framedProposal: Proposal = { width: innerW, height: innerH };
+
+      // Padding step.
+      const padW = padding ? padding.leading + padding.trailing : 0;
+      const padH = padding ? padding.top + padding.bottom : 0;
+      let childProposal: Proposal = {
+        width: fixedH ? null : shrink(framedProposal.width, padW),
+        height: fixedV ? null : shrink(framedProposal.height, padH),
+      };
+      // Aspect ratio step: the child is proposed the fitted (or filling) size.
+      if (aspect && child) childProposal = this.aspectProposal(child, cctx, childProposal, aspect);
+      // Phase 6 `.position(x:y:)`: the box fills the proposal (the child's
+      // ideal size on nil axes); the child is measured with a nil proposal.
+      const point = readPoint(style['position']);
+      let position: StyledPlan['position'] = null;
+      let childSize: Size;
+      if (point && child) {
+        const ideal = this.measure(child, cctx, NIL_PROPOSAL);
+        position = { x: point.x, y: point.y, ideal };
+        childSize = {
+          width: finite(childProposal.width) ? childProposal.width : ideal.width,
+          height: finite(childProposal.height) ? childProposal.height : ideal.height,
+        };
+      } else {
+        childSize = child ? this.measure(child, cctx, childProposal) : ZERO;
+      }
+      let padded: Size = { width: childSize.width + padW, height: childSize.height + padH };
+
+      // Report back through the frame.
+      let width = padded.width;
+      let height = padded.height;
+      if (frame) {
+        if (frame.width !== null) width = frame.width;
+        else if (frame.minWidth !== null || frame.maxWidth !== null)
+          width = clamp(p.width === null ? padded.width : p.width, frame.minWidth, frame.maxWidth);
+        if (frame.height !== null) height = frame.height;
+        else if (frame.minHeight !== null || frame.maxHeight !== null)
+          height = clamp(p.height === null ? padded.height : p.height, frame.minHeight, frame.maxHeight);
+        // A flexible frame proposes its own resolved size to the child (so
+        // `Rectangle().frame(minHeight: 100)` fills 100, as in SwiftUI). Only
+        // when a nil-proposed axis was clamped up to a minimum does the child
+        // see a proposal it has not seen yet.
+        const grewW = frame.width === null && p.width === null && width > padded.width;
+        const grewH = frame.height === null && p.height === null && height > padded.height;
+        if ((grewW || grewH) && child && !position) {
+          const again: Proposal = {
+            width: grewW ? Math.max(0, width - padW) : childProposal.width,
+            height: grewH ? Math.max(0, height - padH) : childProposal.height,
+          };
+          childProposal = again;
+          childSize = this.measure(child, cctx, again);
+          padded = { width: childSize.width + padW, height: childSize.height + padH };
+        }
+      }
+      const contentBox: Rect = {
+        x: padding ? padding.leading : 0,
+        y: padding ? padding.top : 0,
+        width: Math.max(0, width - padW),
+        height: Math.max(0, height - padH),
+      };
+      return {
+        size: { width, height },
+        childSize,
+        childProposal,
+        contentBox,
+        alignment: frame?.alignment ?? 'center',
+        position,
+      };
+    });
+  }
+
+  /**
+   * `.aspectRatio(_:contentMode:)`: the size with the ratio (the child's ideal
+   * ratio when `ratio` is null) that fits inside the proposal, or covers it
+   * for `fill`. One nil/infinite axis is derived from the other; with neither
+   * axis given the child's ideal size is proposed. The child reports its own
+   * size for that proposal (a resizable image or a shape takes it exactly).
+   */
+  private aspectProposal(child: LayoutNode, cctx: Context, p: Proposal, aspect: AspectRatioSpec): Proposal {
+    const ideal = (): Size => this.measure(child, cctx, { width: null, height: null });
+    let ratio = aspect.ratio;
+    if (ratio === null) {
+      const size = ideal();
+      ratio = size.width > 0 && size.height > 0 && Number.isFinite(size.width / size.height) ? size.width / size.height : 1;
+    }
+    // An unbounded box on both axes: the child is unbounded too (a flexible
+    // child fills it, so `Color.aspectRatio(1)` is not pinned to its ideal
+    // when a custom layout probes its maximum).
+    if (p.width === Infinity && p.height === Infinity) return { width: Infinity, height: Infinity };
+    const pw = finite(p.width) ? p.width : null;
+    const ph = finite(p.height) ? p.height : null;
+    if (pw !== null && ph !== null) {
+      // Fit: the larger of the two candidate sizes still inside the box;
+      // fill: the smaller one that covers it. Comparing the box's ratio to
+      // the target decides which axis binds.
+      const boxWider = ph === 0 ? true : pw / ph > ratio;
+      const byHeight = boxWider === !aspect.fill;
+      return byHeight ? { width: ph * ratio, height: ph } : { width: pw, height: pw / ratio };
+    }
+    if (pw !== null) return { width: pw, height: pw / ratio };
+    if (ph !== null) return { width: ph * ratio, height: ph };
+    const size = ideal();
+    return { width: size.width, height: size.height };
+  }
+
+  // -------------------------------------------------------------------------
+  // ScrollView
+  // -------------------------------------------------------------------------
+
+  private scrollAxes(node: LayoutNode): { horizontal: boolean; vertical: boolean } {
+    const axes = str(node.props['axes']) ?? 'vertical';
+    return {
+      horizontal: axes === 'horizontal' || axes === 'both',
+      vertical: axes === 'vertical' || axes === 'both',
+    };
+  }
+
+  private scrollPlan(node: LayoutNode, ctx: Context, p: Proposal): ScrollPlan {
+    return this.plan(node, p, () => {
+      const axes = this.scrollAxes(node);
+      const content = this.contentOf(node, axes.horizontal && !axes.vertical ? 'horizontal' : 'vertical');
+      // Phase 12: the viewport is the container `containerRelativeFrame` measures against.
+      const viewport: Size = {
+        width: finite(p.width) ? p.width : ctx.container.width,
+        height: finite(p.height) ? p.height : ctx.container.height,
+      };
+      const cctx: Context = { ...this.childContext(node, ctx), container: viewport };
+      // Along scroll axes the content is unconstrained; elsewhere it gets the
+      // scroll view's own size (which is the proposal when one was given).
+      const contentProposal: Proposal = {
+        width: axes.horizontal ? null : finite(p.width) ? p.width : null,
+        height: axes.vertical ? null : finite(p.height) ? p.height : null,
+      };
+      const contentSize = content ? this.measure(content, cctx, contentProposal) : ZERO;
+      const size: Size = {
+        width: p.width === null ? contentSize.width : p.width,
+        height: p.height === null ? contentSize.height : p.height,
+      };
+      return { size, content, contentProposal, contentSize };
+    });
+  }
+
+  // -------------------------------------------------------------------------
+  // List
+  // -------------------------------------------------------------------------
+
+  private listPlan(node: LayoutNode, ctx: Context, p: Proposal): ListPlan {
+    return this.plan(node, p, () => {
+      const { screen } = this.env;
+      const width = finite(p.width) ? p.width : p.width === Infinity ? Infinity : screen.width;
+      const layoutWidth = Number.isFinite(width) ? width : screen.width;
+      // `insetGrouped` (default) insets the cards 16; `grouped` and `plain`
+      // sections are full width. `plain` also drops the top/bottom gaps and
+      // the space between sections.
+      const listStyle = str(node.props['style']) ?? 'insetGrouped';
+      const inset = listStyle === 'insetGrouped' ? LIST_INSET : 0;
+      const plain = listStyle === 'plain';
+      const listTop = plain ? 0 : LIST_TOP;
+      const listBottom = plain ? 0 : LIST_BOTTOM;
+      const sectionGap = plain ? 0 : LIST_SECTION_GAP;
+      const cardX = inset;
+      const cardWidth = Math.max(0, layoutWidth - 2 * inset);
+      const contentX = inset + LIST_CELL_PADDING;
+      const contentWidth = Math.max(0, layoutWidth - 2 * (inset + LIST_CELL_PADDING));
+      const headerFont = makeFont(
+        'system',
+        textStyleSize('footnote', this.env.dynamicTypeSize),
+        400,
+      );
+      const rowCtx: Context = { ...this.childContext(node, ctx), listRow: true };
+      // Phase 8: in edit mode every `listrow` gains a 44 leading control and
+      // its content shifts right by as much.
+      const editing = node.props['editing'] === true;
+
+      // Group consecutive plain rows into an implicit section.
+      const groupsSource: { section: LayoutNode | null; rows: LayoutNode[] }[] = [];
+      for (const child of node.children) {
+        if (child.kind === 'section') {
+          groupsSource.push({ section: child, rows: child.children });
+        } else {
+          const last = groupsSource[groupsSource.length - 1];
+          if (last && last.section === null) last.rows.push(child);
+          else groupsSource.push({ section: null, rows: [child] });
+        }
+      }
+
+      const groups: ListGroupPlan[] = [];
+      let y = listTop;
+      const makeText = (text: string): { layout: TextLayout; size: Size } => {
+        const wrapped = wrapText(text.toUpperCase(), headerFont, contentWidth, null, this.measurer);
+        return {
+          layout: { font: headerFont, lines: wrapped.lines, alignment: 'leading', truncated: false },
+          size: { width: wrapped.width, height: wrapped.lines.length * headerFont.lineHeight },
+        };
+      };
+      for (let g = 0; g < groupsSource.length; g++) {
+        const source = groupsSource[g] as { section: LayoutNode | null; rows: LayoutNode[] };
+        if (g > 0) y += sectionGap;
+        const top = y;
+        let header: ListGroupPlan['header'] = null;
+        let footer: ListGroupPlan['footer'] = null;
+        const headerText = source.section ? str(source.section.props['header']) : null;
+        const footerText = source.section ? str(source.section.props['footer']) : null;
+        if (headerText !== null && headerText.length > 0) {
+          const { layout, size } = makeText(headerText);
+          header = { rect: { x: contentX, y, width: contentWidth, height: size.height }, layout };
+          y += size.height + LIST_HEADER_GAP;
+        }
+        const cardTop = y;
+        const rows: ListRowPlan[] = [];
+        for (const rowNode of source.rows) {
+          // A picker already reports its row height (44 for a menu, 44 per
+          // option inline); other rows get the 11px vertical padding. Phase 6
+          // `listRowInsets` replaces all four insets; a `badge` reserves its
+          // width (plus a gap) at the trailing edge.
+          const hints = rowHintsOf(rowNode);
+          const defaultVPad = unwrapStyled(rowNode).kind === 'picker' ? 0 : LIST_ROW_VPAD;
+          const insets: EdgeInsets = hints.insets ?? {
+            top: defaultVPad,
+            leading: LIST_CELL_PADDING,
+            bottom: defaultVPad,
+            trailing: LIST_CELL_PADDING,
+          };
+          const badgeWidth = hints.badge !== null ? this.measurer.measureWidth(hints.badge, rowCtx.font) : 0;
+          const badgeReserve = hints.badge !== null ? badgeWidth + BADGE_GAP : 0;
+          const listRow = editing ? listRowOf(rowNode) : null;
+          const editShift = listRow ? LIST_EDIT_CONTROL_WIDTH : 0;
+          const rowContentX = cardX + insets.leading + editShift;
+          const rowContentWidth = Math.max(0, cardWidth - insets.leading - insets.trailing - badgeReserve - editShift);
+          const proposal: Proposal = { width: rowContentWidth, height: null };
+          const contentSize = this.measure(rowNode, rowCtx, proposal);
+          const rowHeight = Math.max(LIST_ROW_MIN_HEIGHT, contentSize.height + insets.top + insets.bottom);
+          const row: Rect = { x: cardX, y, width: cardWidth, height: rowHeight };
+          rows.push({
+            node: rowNode,
+            proposal,
+            contentSize,
+            row,
+            content: {
+              x: rowContentX,
+              y: y + insets.top + (rowHeight - insets.top - insets.bottom - contentSize.height) / 2,
+              width: contentSize.width,
+              height: contentSize.height,
+            },
+            badge:
+              hints.badge !== null
+                ? {
+                    rect: { x: cardX + cardWidth - insets.trailing - badgeWidth, y, width: badgeWidth, height: rowHeight },
+                    layout: { font: rowCtx.font, lines: [hints.badge], alignment: 'trailing', truncated: false },
+                  }
+                : null,
+            edit: listRow ? { listRow, control: { x: cardX, y, width: LIST_EDIT_CONTROL_WIDTH, height: rowHeight } } : null,
+          });
+          y += rowHeight;
+        }
+        const card: Rect = { x: cardX, y: cardTop, width: cardWidth, height: y - cardTop };
+        if (footerText !== null && footerText.length > 0) {
+          y += LIST_FOOTER_GAP;
+          const { layout, size } = makeText(footerText);
+          footer = { rect: { x: contentX, y, width: contentWidth, height: size.height }, layout };
+          y += size.height;
+        }
+        groups.push({
+          section: source.section,
+          frame: { x: cardX, y: top, width: cardWidth, height: y - top },
+          header,
+          footer,
+          card,
+          rows,
+        });
+      }
+      const contentHeight = groupsSource.length === 0 ? listTop : y + listBottom;
+      const size: Size = {
+        width,
+        height: p.height === null ? contentHeight : p.height,
+      };
+      return { size, contentSize: { width: layoutWidth, height: contentHeight }, groups };
+    });
+  }
+
+  // -------------------------------------------------------------------------
+  // Place
+  // -------------------------------------------------------------------------
+
+  place(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): void {
+    // Phase 9: placed before, same proposal, same origin, nothing in the
+    // subtree invalidated since: the last run's output still holds.
+    const key = proposalKey(p);
+    const last = this.placed.get(node);
+    if (last && last.key === key && last.x === x && last.y === y) {
+      this.stats.skipped += 1;
+      return;
+    }
+    this.placed.set(node, { key, x, y });
+    this.stats.placed += 1;
+    if (node.id >= 0) {
+      this.touched.add(node.id);
+      // Chrome from an earlier run is stale (a parent's `row` / `badge` set in
+      // this run just before placing the child is kept and merged into).
+      if (this.chromeRun.get(node.id) !== this.runId) this.chrome.delete(node.id);
+    }
+    const previouslyHidden = this.hiddenBy.get(node);
+    if (previouslyHidden) {
+      for (const id of previouslyHidden) {
+        this.hidden.delete(id);
+        this.touched.add(id);
+      }
+      this.hiddenBy.delete(node);
+    }
+    const size = this.measure(node, ctx, p);
+    this.setFrame(node, x, y, size);
+    const cctx = this.childContext(node, ctx);
+    switch (node.kind) {
+      case 'text':
+        if (node.id >= 0) this.text.set(node.id, this.textPlan(node, ctx, p).layout);
+        return;
+      case 'image':
+        if (node.id >= 0) this.fonts.set(node.id, scaledFont(ctx.font, ctx.imageScale));
+        return;
+      case 'spacer':
+      case 'divider':
+      case 'textfield':
+      case 'color':
+      case 'shape':
+        return;
+      case 'vstack':
+      case 'hstack': {
+        const axis: Axis = node.kind === 'vstack' ? 'vertical' : 'horizontal';
+        const plan = this.stackPlan(node, ctx, p, axis);
+        const spacing = num(node.props['spacing']) ?? DEFAULT_SPACING;
+        const alignment = str(node.props['alignment']) ?? 'center';
+        this.placeStack(node.children, cctx, plan, axis, alignment, spacing, x, y, size);
+        return;
+      }
+      case 'zstack': {
+        const alignment = str(node.props['alignment']) ?? 'center';
+        for (const child of node.children) {
+          const childSize = this.measure(child, cctx, p);
+          const { dx, dy } = alignIn(size, childSize, alignment);
+          this.place(child, cctx, p, x + dx, y + dy);
+        }
+        return;
+      }
+      case 'styled': {
+        let plan = this.styledPlan(node, ctx, p);
+        const child = this.contentOf(node);
+        // Phase 8 `.ignoresSafeArea`: the box grows to the screen edge on the
+        // sides where it touches the safe area (the parent's layout is
+        // unchanged). A flexible child (a color, gradient or resizable image)
+        // is proposed the grown box and fills it; a child whose size does not
+        // change stays where the parent put it.
+        const extension = this.safeAreaExtension(node, ctx, x, y, size);
+        if (extension) {
+          const grown: Size = {
+            width: size.width + extension.leading + extension.trailing,
+            height: size.height + extension.top + extension.bottom,
+          };
+          this.setFrame(node, x - extension.leading, y - extension.top, grown);
+          const grownPlan = this.styledPlan(node, ctx, { width: grown.width, height: grown.height });
+          if (grownPlan.childSize.width !== plan.childSize.width || grownPlan.childSize.height !== plan.childSize.height) {
+            plan = grownPlan;
+            x -= extension.leading;
+            y -= extension.top;
+          }
+        }
+        if (child) {
+          const box = plan.contentBox;
+          if (plan.position) {
+            const { ideal } = plan.position;
+            this.place(
+              child,
+              cctx,
+              NIL_PROPOSAL,
+              x + box.x + plan.position.x - ideal.width / 2,
+              y + box.y + plan.position.y - ideal.height / 2,
+            );
+            return;
+          }
+          const { dx, dy } = alignIn(box, plan.childSize, plan.alignment);
+          this.place(child, cctx, plan.childProposal, x + box.x + dx, y + box.y + dy);
+        }
+        return;
+      }
+      case 'button': {
+        const label = this.contentOf(node);
+        if (!label) return;
+        if (!this.buttonIsBordered(node)) {
+          this.place(label, cctx, p, x, y);
+          return;
+        }
+        const inner: Proposal = {
+          width: shrink(p.width, 2 * BORDERED_PAD_H),
+          height: shrink(p.height, 2 * BORDERED_PAD_V),
+        };
+        const labelSize = this.measure(label, cctx, inner);
+        const { dx, dy } = alignIn(size, labelSize, 'center');
+        this.place(label, cctx, inner, x + dx, y + dy);
+        // Keep the list row chrome (`row`, `badge`) a list set before placing.
+        const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+        this.setChrome(node, {
+          ...existing,
+          label: { x: x + dx, y: y + dy, width: labelSize.width, height: labelSize.height },
+        });
+        return;
+      }
+      case 'toggle': {
+        const label = this.contentOf(node);
+        const labelProposal = this.toggleLabelProposal(p);
+        const labelSize = label ? this.measure(label, cctx, labelProposal) : ZERO;
+        const labelY = y + (size.height - labelSize.height) / 2;
+        if (label) this.place(label, cctx, labelProposal, x, labelY);
+        const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+        this.setChrome(node, {
+          ...existing,
+          label: {
+            x,
+            y: labelY,
+            width: Math.min(labelSize.width, Math.max(0, size.width - SWITCH_WIDTH - TOGGLE_GAP)),
+            height: labelSize.height,
+          },
+          switch: {
+            x: x + size.width - SWITCH_WIDTH,
+            y: y + (size.height - SWITCH_HEIGHT) / 2,
+            width: SWITCH_WIDTH,
+            height: SWITCH_HEIGHT,
+          },
+        });
+        return;
+      }
+      case 'navlink': {
+        const label = this.contentOf(node);
+        const labelProposal = this.navLinkLabelProposal(ctx, p);
+        const labelSize = label ? this.measure(label, cctx, labelProposal) : ZERO;
+        const labelY = y + (size.height - labelSize.height) / 2;
+        if (label) this.place(label, cctx, labelProposal, x, labelY);
+        if (ctx.listRow) {
+          const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+          const chrome: Record<string, Rect> = {
+            ...existing,
+            label: { x, y: labelY, width: labelSize.width, height: labelSize.height },
+          };
+          // Phase 7: the selected row of a `navsplit` sidebar has no chevron
+          // (its label still reserves the chevron's width so selecting a row
+          // never reflows it); elsewhere `selected` keeps the chevron.
+          if (!(node.props['selected'] === true && ctx.splitSidebar)) {
+            chrome['chevron'] = {
+              x: x + size.width - LIST_CHEVRON_WIDTH,
+              y,
+              width: LIST_CHEVRON_WIDTH,
+              height: size.height,
+            };
+          }
+          this.setChrome(node, chrome);
+        }
+        return;
+      }
+      case 'scrollview': {
+        const plan = this.scrollPlan(node, ctx, p);
+        const axes = this.scrollAxes(node);
+        if (node.id >= 0) this.contentSizes.set(node.id, plan.contentSize);
+        // Content sits at the scroll origin along the scroll axes and is
+        // centered on the other axes when smaller than the viewport.
+        const dx = axes.horizontal ? 0 : safeOffset(size.width, plan.contentSize.width, 0.5);
+        const dy = axes.vertical ? 0 : safeOffset(size.height, plan.contentSize.height, 0.5);
+        const content: Rect = {
+          x: x + dx,
+          y: y + dy,
+          width: plan.contentSize.width,
+          height: plan.contentSize.height,
+        };
+        const covered = this.coveredBottom(ctx, x, y, size);
+        this.setChrome(node, covered ? { content, bottomInset: covered } : { content });
+        if (plan.content) this.place(plan.content, cctx, plan.contentProposal, content.x, content.y);
+        return;
+      }
+      case 'list':
+        this.placeList(node, ctx, p, x, y);
+        return;
+      case 'navstack': {
+        const screenProposal: Proposal = { width: size.width, height: size.height };
+        // Each screen's back button is labelled with the previous screen's title.
+        node.children.forEach((child, index) => {
+          const previous = index > 0 ? node.children[index - 1] : undefined;
+          this.previousTitles.set(child, previous ? (str(previous.props['title']) ?? '') : '');
+        });
+        for (const child of node.children) this.place(child, cctx, screenProposal, x, y);
+        return;
+      }
+      case 'navscreen':
+        this.placeNavScreen(node, cctx, x, y, size);
+        return;
+      case 'navsplit':
+        this.placeNavSplit(node, cctx, x, y, size);
+        return;
+      case 'viewthatfits': {
+        // Phase 7: only the chosen candidate is placed (at the origin, the
+        // element is its size); the others have no frame and are hidden.
+        const plan = this.viewThatFitsPlan(node, ctx, p);
+        for (const child of node.children) {
+          if (child === plan.chosen) this.place(child, cctx, p, x, y);
+          else this.hide(child, node);
+        }
+        return;
+      }
+      case 'sheet':
+        this.placeSheet(node, cctx, x, y, size);
+        return;
+      case 'tabview':
+        this.placeTabView(node, cctx, x, y, size);
+        return;
+      case 'picker':
+        this.placePicker(node, ctx, p, x, y, size);
+        return;
+      case 'geometry': {
+        // The child is proposed the reader's size and placed top leading.
+        const content = this.contentOf(node);
+        if (content) this.place(content, cctx, { width: size.width, height: size.height }, x, y);
+        return;
+      }
+      case 'layout':
+        this.placeLayout(node, cctx, p, x, y, size);
+        return;
+      case 'grid':
+        this.placeGrid(node, ctx, p, x, y);
+        return;
+      case 'lazyvgrid':
+        this.placeLazyGrid(node, ctx, p, x, y);
+        return;
+      case 'gauge':
+        this.placeGauge(node, ctx, p, x, y, size);
+        return;
+      case 'chart':
+        this.placeChart(node, ctx, p, x, y);
+        return;
+      case 'chartitem': {
+        // Outside a chart (or measured on its own): the view at the same origin.
+        const content = node.children[0];
+        if (content) this.place(content, cctx, p, x, y);
+        return;
+      }
+      case 'decorated': {
+        const [content, decoration] = node.children;
+        if (content) this.place(content, cctx, p, x, y);
+        if (decoration) {
+          // The decoration is proposed the content's size and aligned inside it.
+          const proposal: Proposal = { width: size.width, height: size.height };
+          const decorationSize = this.measure(decoration, cctx, proposal);
+          const alignment = str(node.props['alignment']) ?? 'center';
+          const { dx, dy } = alignIn(size, decorationSize, alignment);
+          this.place(decoration, cctx, proposal, x + dx, y + dy);
+        }
+        return;
+      }
+      case 'menu': {
+        // Phase 6: the label is placed; the items are only shown in the
+        // popover the renderer opens, so they are hidden and have no frames.
+        const [label, ...items] = node.children;
+        if (label) this.place(label, cctx, p, x, y);
+        for (const item of items) this.hide(item, node);
+        return;
+      }
+      case 'searchfield':
+        return;
+      // Phase 8 controls.
+      case 'alert':
+        this.placeAlert(node, ctx, x, y, size);
+        return;
+      case 'stepper':
+        this.placeStepper(node, ctx, p, x, y, size);
+        return;
+      case 'slider':
+        this.placeSlider(node, ctx, p, x, y, size);
+        return;
+      case 'datepicker':
+        this.placeDatePicker(node, ctx, p, x, y, size);
+        return;
+      case 'texteditor':
+        return;
+      case 'swipeactions':
+      case 'contextmenu': {
+        // Phase 8: the content at the same origin; actions / items hidden, no frames.
+        const [content, ...rest] = node.children;
+        if (content) this.place(content, cctx, p, x, y);
+        for (const item of rest) this.hide(item, node);
+        return;
+      }
+      case 'gesture':
+      case 'listrow':
+      case 'tapgesture':
+      default: {
+        // `tapgesture`, `gesture`, `listrow` (child at the same origin), `toolbar` outside a navscreen,
+        // `tab` outside a tabview, `section` outside a list and unknown kinds.
+        const content = this.contentOf(node);
+        if (content) this.place(content, cctx, p, x, y);
+        return;
+      }
+    }
+  }
+
+  /** The part of a scrolling view's frame that a tab bar covers (chrome `bottomInset`). */
+  private coveredBottom(ctx: Context, x: number, y: number, size: Size): Rect | null {
+    if (ctx.bottomBar <= 0) return null;
+    const bottom = y + size.height;
+    if (bottom < this.env.screen.height - EPSILON) return null;
+    const height = Math.min(size.height, ctx.bottomBar);
+    return { x, y: bottom - height, width: size.width, height };
+  }
+
+  private placeList(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): void {
+    const plan = this.listPlan(node, ctx, p);
+    const rowCtx: Context = { ...this.childContext(node, ctx), listRow: true };
+    if (node.id >= 0) this.contentSizes.set(node.id, plan.contentSize);
+    const covered = this.coveredBottom(ctx, x, y, plan.size);
+    if (covered) this.setChrome(node, { bottomInset: covered });
+    const offset = (r: Rect): Rect => ({ x: x + r.x, y: y + r.y, width: r.width, height: r.height });
+    for (const group of plan.groups) {
+      if (group.section) {
+        const chrome: Record<string, Rect> = { rows: offset(group.card) };
+        const texts: Record<string, TextLayout> = {};
+        if (group.header) {
+          chrome['header'] = offset(group.header.rect);
+          texts['header'] = group.header.layout;
+        }
+        if (group.footer) {
+          chrome['footer'] = offset(group.footer.rect);
+          texts['footer'] = group.footer.layout;
+        }
+        this.setFrame(group.section, x + group.frame.x, y + group.frame.y, group.frame);
+        this.setChrome(group.section, chrome);
+        if (group.section.id >= 0) {
+          this.fonts.set(group.section.id, group.header?.layout.font ?? group.footer?.layout.font ?? makeFont('system', textStyleSize('footnote', this.env.dynamicTypeSize), 400));
+          if (Object.keys(texts).length > 0) this.chromeText.set(group.section.id, texts);
+        }
+      }
+      for (const row of group.rows) {
+        // Set the row chrome before placing so a navlink can merge its own keys.
+        const chrome: Record<string, Rect> = { row: offset(row.row) };
+        if (row.badge) {
+          chrome['badge'] = offset(row.badge.rect);
+          if (row.node.id >= 0) this.chromeText.set(row.node.id, { badge: row.badge.layout });
+        }
+        // Phase 8: the edit control belongs to the `listrow`, which is the
+        // row itself or sits under its wrappers (its own place() keeps chrome).
+        if (row.edit) {
+          if (row.edit.listRow === row.node) chrome['editControl'] = offset(row.edit.control);
+          else this.setChrome(row.edit.listRow, { editControl: offset(row.edit.control) });
+        }
+        this.setChrome(row.node, chrome);
+        this.place(row.node, rowCtx, row.proposal, x + row.content.x, y + row.content.y);
+      }
+    }
+  }
+
+  /**
+   * The navigation bar is the status bar plus a 44 row (plus 52 for a large
+   * title, plus 52 for a Phase 6 `searchfield`); a `bottom` toolbar is a 49
+   * bar plus the bottom safe area; the content is proposed the rest. Toolbar
+   * items are measured at their ideal size and laid out as a 16-spaced hstack
+   * in the 44 row (`leading` after the back button, `trailing` 16 from the
+   * trailing edge, `principal` centered in place of the title) or spread
+   * evenly across the bottom bar. The inline title (`chrome.title`) is
+   * centered and truncated to the room the bar items leave.
+   */
+  private placeNavScreen(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
+    const { safeArea, screen, dynamicTypeSize } = this.env;
+    const statusBar = y <= 0 ? safeArea.top : 0;
+    const displayMode = str(node.props['displayMode']) ?? 'automatic';
+    const depth = num(node.props['depth']) ?? 0;
+    const large = displayMode === 'large' || (displayMode === 'automatic' && depth === 0);
+    const barHeight = statusBar + NAV_BAR_HEIGHT;
+    const largeHeight = large ? LARGE_TITLE_HEIGHT : 0;
+    const parts = this.navScreenParts(node);
+    const searchHeight = parts.search ? SEARCH_AREA_HEIGHT : 0;
+    const reachesBottom = y + size.height >= screen.height - EPSILON;
+    const bottomToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'bottom');
+    const bottomBarHeight =
+      bottomToolbars.length > 0 ? Math.min(size.height, BOTTOM_BAR_HEIGHT + (reachesBottom ? safeArea.bottom : 0)) : 0;
+    const contentTop = barHeight + largeHeight + searchHeight;
+    const content: Rect = {
+      x,
+      y: y + contentTop,
+      width: size.width,
+      height: Math.max(0, size.height - contentTop - bottomBarHeight),
+    };
+    const chrome: Record<string, Rect> = {
+      bar: { x, y, width: size.width, height: barHeight },
+      content,
+    };
+    if (large) chrome['largeTitle'] = { x, y: y + barHeight, width: size.width, height: LARGE_TITLE_HEIGHT };
+    if (parts.search) {
+      chrome['searchField'] = {
+        x: x + SEARCH_FIELD_MARGIN_H,
+        y: y + barHeight + largeHeight + SEARCH_FIELD_PAD_V,
+        width: Math.max(0, size.width - 2 * SEARCH_FIELD_MARGIN_H),
+        height: SEARCH_FIELD_HEIGHT,
+      };
+    }
+    if (bottomBarHeight > 0) {
+      chrome['bottomBar'] = { x, y: y + size.height - bottomBarHeight, width: size.width, height: bottomBarHeight };
+    }
+    const title = str(node.props['title']) ?? '';
+    const titleFont = makeFont('system', textStyleSize('headline', dynamicTypeSize), 600);
+    const largeTitleFont = makeFont('system', textStyleSize('largeTitle', dynamicTypeSize), 700);
+    const backFont = makeFont('system', textStyleSize('body', dynamicTypeSize), 400);
+
+    // Toolbar items at their ideal size, grouped per toolbar.
+    const rowY = y + statusBar;
+    interface Group {
+      toolbar: LayoutNode;
+      placement: string;
+      sizes: Size[];
+      total: number;
+    }
+    const groups: Group[] = parts.toolbars.map((toolbar) => {
+      const itemCtx = this.childContext(toolbar, cctx);
+      const sizes = toolbar.children.map((item) => this.measure(item, itemCtx, { width: null, height: null }));
+      const total = sizes.reduce((sum, s) => sum + s.width, 0) + Math.max(0, sizes.length - 1) * NAV_ITEM_SPACING;
+      return { toolbar, placement: str(toolbar.props['placement']) ?? 'trailing', sizes, total };
+    });
+    const groupWidth = (placement: string): number =>
+      groups.filter((g) => g.placement === placement).reduce((sum, g) => sum + g.total + NAV_ITEM_SPACING, 0);
+    const leadingWidth = groupWidth('leading');
+    const trailingWidth = groupWidth('trailing');
+    const principal = groups.some((g) => g.placement === 'principal');
+
+    // Back button, like iOS: the previous title when it fits beside the
+    // centered inline title, otherwise "Back", otherwise the chevron alone.
+    let backLabel = '';
+    if (depth > 0) {
+      const inlineTitleWidth = large || principal ? 0 : Math.min(this.measurer.measureWidth(title, titleFont), size.width * 0.56);
+      const available =
+        (large ? size.width - BACK_CHEVRON_WIDTH - 16 - 44 : (size.width - inlineTitleWidth) / 2 - 8 - 12) - leadingWidth;
+      const candidates = [this.previousTitles.get(node) ?? '', 'Back', ''];
+      let width = BACK_CHEVRON_WIDTH + 8;
+      for (const candidate of candidates) {
+        const labelWidth = candidate ? this.measurer.measureWidth(candidate, backFont) : 0;
+        const needed = 8 + BACK_CHEVRON_WIDTH + labelWidth + 8;
+        if (candidate === '' || needed <= available) {
+          backLabel = candidate;
+          width = needed;
+          break;
+        }
+      }
+      chrome['back'] = { x: x + 8, y: rowY, width, height: NAV_BAR_HEIGHT };
+    }
+
+    // Place the toolbar groups and remember how much of the row they occupy.
+    const back = chrome['back'];
+    let leadingCursor = back ? back.x + back.width + 8 : x + NAV_ITEM_MARGIN;
+    let trailingEdge = x + size.width - NAV_ITEM_MARGIN;
+    const placeGroup = (group: Group, startX: number, top: number, rowHeight: number, spacing: number): void => {
+      const itemCtx = this.childContext(group.toolbar, cctx);
+      let cursor = startX;
+      group.toolbar.children.forEach((item, i) => {
+        const itemSize = group.sizes[i] as Size;
+        this.place(item, itemCtx, { width: null, height: null }, cursor, top + (rowHeight - itemSize.height) / 2);
+        cursor += itemSize.width + spacing;
+      });
+    };
+    for (const group of groups) {
+      switch (group.placement) {
+        case 'leading': {
+          this.setFrame(group.toolbar, leadingCursor, rowY, { width: group.total, height: NAV_BAR_HEIGHT });
+          placeGroup(group, leadingCursor, rowY, NAV_BAR_HEIGHT, NAV_ITEM_SPACING);
+          leadingCursor += group.total + NAV_ITEM_SPACING;
+          break;
+        }
+        case 'principal': {
+          const startX = x + (size.width - group.total) / 2;
+          this.setFrame(group.toolbar, startX, rowY, { width: group.total, height: NAV_BAR_HEIGHT });
+          placeGroup(group, startX, rowY, NAV_BAR_HEIGHT, NAV_ITEM_SPACING);
+          break;
+        }
+        case 'bottom': {
+          const bar = chrome['bottomBar'] as Rect;
+          this.setFrame(group.toolbar, bar.x, bar.y, bar);
+          const n = group.sizes.length;
+          const inner = Math.max(0, size.width - 2 * NAV_ITEM_MARGIN);
+          const itemsWidth = group.total - Math.max(0, n - 1) * NAV_ITEM_SPACING;
+          if (n === 1) placeGroup(group, x + (size.width - itemsWidth) / 2, bar.y, BOTTOM_BAR_HEIGHT, 0);
+          else if (n > 1) {
+            const gap = Math.max(NAV_ITEM_SPACING, (inner - itemsWidth) / (n - 1));
+            placeGroup(group, x + NAV_ITEM_MARGIN, bar.y, BOTTOM_BAR_HEIGHT, gap);
+          }
+          break;
+        }
+        default: {
+          const startX = trailingEdge - group.total;
+          this.setFrame(group.toolbar, startX, rowY, { width: group.total, height: NAV_BAR_HEIGHT });
+          placeGroup(group, startX, rowY, NAV_BAR_HEIGHT, NAV_ITEM_SPACING);
+          trailingEdge = startX - NAV_ITEM_SPACING;
+          break;
+        }
+      }
+    }
+    if (parts.search) {
+      const field = chrome['searchField'] as Rect;
+      this.place(parts.search, cctx, { width: field.width, height: field.height }, field.x, field.y);
+    }
+
+    // The inline title: centered, no wider than 56% of the bar, and clear of
+    // whatever the back button and the bar items occupy on either side.
+    if (!large && !principal) {
+      const leftUsed = Math.max(back ? back.x + back.width - x : 0, leadingWidth > 0 ? leadingCursor - NAV_ITEM_SPACING - x : 0);
+      const rightUsed = trailingWidth > 0 ? x + size.width - (trailingEdge + NAV_ITEM_SPACING) : 0;
+      const side = Math.max(leftUsed, rightUsed) + 8;
+      const available = Math.max(0, size.width - 2 * side);
+      const titleWidth = Math.min(this.measurer.measureWidth(title, titleFont), size.width * 0.56, available);
+      chrome['title'] = { x: x + (size.width - titleWidth) / 2, y: rowY, width: titleWidth, height: NAV_BAR_HEIGHT };
+    }
+    this.setChrome(node, chrome);
+
+    if (node.id >= 0) {
+      this.fonts.set(node.id, large ? largeTitleFont : titleFont);
+      const texts: Record<string, TextLayout> = {
+        title: { font: titleFont, lines: [title], alignment: 'center', truncated: false },
+      };
+      if (depth > 0) texts['back'] = { font: backFont, lines: [backLabel], alignment: 'leading', truncated: false };
+      if (large) {
+        const wrapped = wrapText(title, largeTitleFont, size.width - 32, 1, this.measurer);
+        texts['largeTitle'] = {
+          font: largeTitleFont,
+          lines: wrapped.lines,
+          alignment: 'leading',
+          truncated: wrapped.truncated,
+        };
+      }
+      this.chromeText.set(node.id, texts);
+    }
+
+    const child = parts.content;
+    if (!child) return;
+    // Under a tab bar the bar (which includes the bottom safe area) is what
+    // non-scrolling content must clear; a bottom toolbar already excluded it.
+    const bottomInset =
+      bottomBarHeight === 0 && y + size.height >= screen.height ? Math.max(safeArea.bottom, cctx.bottomBar) : 0;
+    // Phase 8: `.ignoresSafeArea` content grows up under the bar (and the
+    // large title / search field), which is transparent over it.
+    const contentCtx: Context = { ...cctx, safeTop: content.y };
+    if (unwrapStyled(child).kind === 'list' || unwrapStyled(child).kind === 'scrollview') {
+      this.place(child, contentCtx, { width: content.width, height: content.height }, content.x, content.y);
+      return;
+    }
+    const area: Size = { width: content.width, height: Math.max(0, content.height - bottomInset) };
+    const proposal: Proposal = { width: area.width, height: area.height };
+    const childSize = this.measure(child, contentCtx, proposal);
+    const { dx, dy } = alignIn(area, childSize, 'center');
+    this.place(child, contentCtx, proposal, content.x + dx, content.y + dy);
+  }
+
+  /**
+   * The tab bar is 49 plus the bottom safe area (when the tab view reaches
+   * the screen bottom), with one equal-width item per tab. Every `tab` gets
+   * the tab view's frame; only the selected one lays its content out, the
+   * others are reported in `hidden`.
+   */
+  private placeTabView(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
+    const { screen, safeArea } = this.env;
+    const bottomSafe = y + size.height >= screen.height - EPSILON ? safeArea.bottom : 0;
+    const barHeight = Math.min(size.height, TAB_BAR_HEIGHT + bottomSafe);
+    const bar: Rect = { x, y: y + size.height - barHeight, width: size.width, height: barHeight };
+    const chrome: Record<string, Rect> = {
+      bar,
+      content: { x, y, width: size.width, height: size.height - barHeight },
+    };
+    const tabs = node.children;
+    const n = tabs.length;
+    for (let i = 0; i < n; i++) {
+      const itemWidth = size.width / n;
+      chrome[`item${i}`] = { x: x + i * itemWidth, y: bar.y, width: itemWidth, height: Math.min(barHeight, TAB_BAR_HEIGHT) };
+    }
+    this.setChrome(node, chrome);
+    const selected = readSelected(node, n);
+    const tabCtx: Context = { ...cctx, bottomBar: barHeight };
+    tabs.forEach((tab, i) => {
+      this.setFrame(tab, x, y, size);
+      if (i !== selected) {
+        this.hide(tab, node);
+        return;
+      }
+      this.placeTabContent(tab, this.childContext(tab, tabCtx), x, y, size, barHeight);
+    });
+  }
+
+  /**
+   * The selected tab's content, like a navscreen's: a `navstack` fills the
+   * whole tab (it reserves the status bar itself and its lists run under the
+   * bar); a `list` or `scrollview` starts below the status bar and also runs
+   * to the bottom, inset by the bar (chrome `bottomInset`); anything else is
+   * centered between the status bar and the tab bar.
+   */
+  private placeTabContent(tab: LayoutNode, cctx: Context, x: number, y: number, size: Size, barHeight: number): void {
+    const { safeArea } = this.env;
+    const topInset = y <= 0 ? safeArea.top : 0;
+    const area: Rect = {
+      x,
+      y: y + topInset,
+      width: size.width,
+      height: Math.max(0, size.height - topInset - barHeight),
+    };
+    this.setChrome(tab, { content: area });
+    const child = this.contentOf(tab);
+    if (!child) return;
+    const kind = unwrapStyled(child).kind;
+    if (kind === 'navstack') {
+      this.place(child, cctx, { width: size.width, height: size.height }, x, y);
+      return;
+    }
+    if (kind === 'list' || kind === 'scrollview') {
+      const height = Math.max(0, size.height - topInset);
+      this.place(child, cctx, { width: size.width, height }, x, y + topInset);
+      return;
+    }
+    const proposal: Proposal = { width: area.width, height: area.height };
+    const childSize = this.measure(child, cctx, proposal);
+    const { dx, dy } = alignIn(area, childSize, 'center');
+    this.place(child, cctx, proposal, area.x + dx, area.y + dy);
+  }
+
+  /**
+   * Phase 7 `NavigationSplitView` (regular size class): the children are
+   * `[sidebar, detail]`, each a `navstack` that fills its column. The sidebar
+   * column is 320 wide (at most 40 % of the width left by the horizontal
+   * safe-area insets), then a 1px separator, then the detail column. Both
+   * columns run the full height, so each navstack's screens reserve the
+   * status bar and the bottom safe area themselves exactly as a root
+   * navstack does (`placeNavScreen` keys on `y <= 0` and the screen bottom).
+   * The leading inset belongs to the sidebar column and the trailing inset
+   * to the detail column (when the split view touches those screen edges):
+   * the column rects (`chrome.sidebar` / `chrome.detail`) include them, the
+   * navstacks start / end at them.
+   */
+  private placeNavSplit(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
+    const { screen, safeArea } = this.env;
+    const leading = x <= 0 ? safeArea.leading : 0;
+    const trailing = x + size.width >= screen.width - EPSILON ? safeArea.trailing : 0;
+    const usable = Math.max(0, size.width - leading - trailing);
+    const sidebarWidth = Math.min(NAVSPLIT_SIDEBAR_WIDTH, usable * NAVSPLIT_SIDEBAR_MAX_FRACTION);
+    const separatorX = x + leading + sidebarWidth;
+    const detailX = separatorX + NAVSPLIT_SEPARATOR_WIDTH;
+    const detailWidth = Math.max(0, x + size.width - trailing - detailX);
+    const chrome: Record<string, Rect> = {
+      sidebar: { x, y, width: leading + sidebarWidth, height: size.height },
+      separator: { x: separatorX, y, width: NAVSPLIT_SEPARATOR_WIDTH, height: size.height },
+      detail: { x: detailX, y, width: Math.max(0, x + size.width - detailX), height: size.height },
+    };
+    this.setChrome(node, chrome);
+    const [sidebar, detail, ...rest] = node.children;
+    if (sidebar) {
+      const proposal: Proposal = { width: sidebarWidth, height: size.height };
+      this.place(sidebar, { ...cctx, splitSidebar: true }, proposal, x + leading, y);
+    }
+    if (detail) {
+      const proposal: Proposal = { width: detailWidth, height: size.height };
+      this.place(detail, { ...cctx, splitSidebar: false }, proposal, detailX, y);
+    }
+    for (const extra of rest) this.hide(extra, node);
+  }
+
+  /**
+   * Phase 7 `ViewThatFits`: the first child whose ideal size fits the
+   * proposal on the restricted axes (a nil or infinite proposal axis always
+   * fits), else the last child; the element is that child's size for the
+   * proposal. Memoized per proposal like every other plan, so the choice is
+   * stable within a pass.
+   */
+  private viewThatFitsPlan(node: LayoutNode, ctx: Context, p: Proposal): { chosen: LayoutNode | null; size: Size } {
+    return this.plan(node, p, () => {
+      const axes = str(node.props['axes']) ?? 'both';
+      const checkWidth = axes !== 'vertical';
+      const checkHeight = axes !== 'horizontal';
+      const cctx = this.childContext(node, ctx);
+      const fitsAxis = (proposed: number | null, ideal: number): boolean =>
+        !finite(proposed) || ideal <= proposed + EPSILON;
+      let chosen: LayoutNode | null = null;
+      for (const child of node.children) {
+        const ideal = this.measure(child, cctx, NIL_PROPOSAL);
+        if ((!checkWidth || fitsAxis(p.width, ideal.width)) && (!checkHeight || fitsAxis(p.height, ideal.height))) {
+          chosen = child;
+          break;
+        }
+      }
+      if (!chosen && node.children.length > 0) chosen = node.children[node.children.length - 1] as LayoutNode;
+      return { chosen, size: chosen ? this.measure(chosen, cctx, p) : ZERO };
+    });
+  }
+
+  // -------------------------------------------------------------------------
+  // Phase 8: controls, alerts, safe-area bleed
+  // -------------------------------------------------------------------------
+
+  /**
+   * `.ignoresSafeArea(edges:)`: how far a `styled` box at (x, y, size) grows
+   * on each listed side to reach the screen edge. A side grows only when the
+   * box touches (or is inside) that safe-area inset band; null when nothing grows.
+   */
+  private safeAreaExtension(node: LayoutNode, ctx: Context, x: number, y: number, size: Size): EdgeInsets | null {
+    const raw = styleOf(node)['ignoresSafeArea'];
+    if (raw === undefined || raw === null) return null;
+    const edges: string[] = raw === 'all' ? [...SAFE_AREA_EDGES] : Array.isArray(raw) ? raw.map(str).filter((e): e is string => e !== null) : [];
+    if (edges.length === 0) return null;
+    const { screen, safeArea } = this.env;
+    // Inside a `navscreen` the bar is what the content clears (`ctx.safeTop`);
+    // under a tab bar, the bar (`ctx.bottomBar`, which includes the bottom
+    // safe area).
+    const top = ctx.safeTop;
+    const bottom = Math.max(safeArea.bottom, ctx.bottomBar);
+    const ext: EdgeInsets = { top: 0, leading: 0, bottom: 0, trailing: 0 };
+    if (edges.includes('top') && top > 0 && y <= top + EPSILON) ext.top = Math.max(0, y);
+    if (edges.includes('leading') && safeArea.leading > 0 && x <= safeArea.leading + EPSILON) ext.leading = Math.max(0, x);
+    if (edges.includes('bottom') && bottom > 0 && y + size.height >= screen.height - bottom - EPSILON) {
+      ext.bottom = Math.max(0, screen.height - (y + size.height));
+    }
+    if (edges.includes('trailing') && safeArea.trailing > 0 && x + size.width >= screen.width - safeArea.trailing - EPSILON) {
+      ext.trailing = Math.max(0, screen.width - (x + size.width));
+    }
+    return ext.top || ext.leading || ext.bottom || ext.trailing ? ext : null;
+  }
+
+  private stepperLabelProposal(p: Proposal): Proposal {
+    return { width: shrink(p.width, STEPPER_WIDTH + STEPPER_GAP), height: p.height };
+  }
+
+  /** Like a toggle: the label leads, the 94 × 32 control trails; at least 32 high. */
+  private measureStepper(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    const label = this.contentOf(node);
+    const labelSize = label ? this.measure(label, this.childContext(node, ctx), this.stepperLabelProposal(p)) : ZERO;
+    return {
+      width: finite(p.width) ? p.width : labelSize.width + STEPPER_GAP + STEPPER_WIDTH,
+      height: Math.max(labelSize.height, STEPPER_HEIGHT),
+    };
+  }
+
+  private placeStepper(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number, size: Size): void {
+    const cctx = this.childContext(node, ctx);
+    const label = this.contentOf(node);
+    const labelProposal = this.stepperLabelProposal(p);
+    const labelSize = label ? this.measure(label, cctx, labelProposal) : ZERO;
+    const labelY = y + (size.height - labelSize.height) / 2;
+    if (label) this.place(label, cctx, labelProposal, x, labelY);
+    const controlX = x + size.width - STEPPER_WIDTH;
+    const controlY = y + (size.height - STEPPER_HEIGHT) / 2;
+    const half = STEPPER_WIDTH / 2;
+    const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+    this.setChrome(node, {
+      ...existing,
+      label: {
+        x,
+        y: labelY,
+        width: Math.min(labelSize.width, Math.max(0, size.width - STEPPER_WIDTH - STEPPER_GAP)),
+        height: labelSize.height,
+      },
+      control: { x: controlX, y: controlY, width: STEPPER_WIDTH, height: STEPPER_HEIGHT },
+      decrement: { x: controlX, y: controlY, width: half, height: STEPPER_HEIGHT },
+      increment: { x: controlX + half, y: controlY, width: half, height: STEPPER_HEIGHT },
+    });
+  }
+
+  /**
+   * A slider is the proposed width (200 when none) and 44 high, plus a label
+   * row above when a `label` child exists (its own height, leading). The
+   * `min` / `max` value labels sit at the track's ends in the 44 row, 8 from
+   * the track. Children are named by `labels` in order.
+   */
+  private sliderPlan(node: LayoutNode, ctx: Context, p: Proposal): SliderPlan {
+    return this.plan(node, p, () => {
+      const width = finite(p.width) ? p.width : SLIDER_DEFAULT_WIDTH;
+      const cctx = this.childContext(node, ctx);
+      const names = Array.isArray(node.props['labels']) ? node.props['labels'].map(str) : [];
+      let label: LayoutNode | null = null;
+      let min: LayoutNode | null = null;
+      let max: LayoutNode | null = null;
+      names.forEach((name, i) => {
+        const child = node.children[i] ?? null;
+        if (name === 'label') label = child;
+        else if (name === 'min') min = child;
+        else if (name === 'max') max = child;
+      });
+      const labelSize = label ? this.measure(label, cctx, { width, height: null }) : ZERO;
+      const minSize = min ? this.measure(min, cctx, NIL_PROPOSAL) : ZERO;
+      const maxSize = max ? this.measure(max, cctx, NIL_PROPOSAL) : ZERO;
+      const labelRow = label ? labelSize.height : 0;
+      return { size: { width, height: labelRow + SLIDER_HEIGHT }, label, min, max, labelSize, minSize, maxSize, labelRow, cctx };
+    });
+  }
+
+  private placeSlider(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number, size: Size): void {
+    const plan = this.sliderPlan(node, ctx, p);
+    const { cctx } = plan;
+    if (plan.label) this.place(plan.label, cctx, { width: size.width, height: null }, x, y);
+    const rowY = y + plan.labelRow;
+    let trackX = x;
+    let trackEnd = x + size.width;
+    if (plan.min) {
+      this.place(plan.min, cctx, NIL_PROPOSAL, x, rowY + (SLIDER_HEIGHT - plan.minSize.height) / 2);
+      trackX += plan.minSize.width + SLIDER_LABEL_GAP;
+    }
+    if (plan.max) {
+      this.place(plan.max, cctx, NIL_PROPOSAL, x + size.width - plan.maxSize.width, rowY + (SLIDER_HEIGHT - plan.maxSize.height) / 2);
+      trackEnd -= plan.maxSize.width + SLIDER_LABEL_GAP;
+    }
+    const trackWidth = Math.max(0, trackEnd - trackX);
+    const trackY = rowY + (SLIDER_HEIGHT - SLIDER_TRACK_HEIGHT) / 2;
+    const fraction = sliderFraction(num(node.props['value']) ?? 0, num(node.props['min']) ?? 0, num(node.props['max']) ?? 1);
+    // The thumb travels inside the track: its center runs from half a thumb
+    // past the track's start to half a thumb before its end.
+    const travel = Math.max(0, trackWidth - SLIDER_THUMB);
+    const thumbCenter = trackX + SLIDER_THUMB / 2 + fraction * travel;
+    const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+    this.setChrome(node, {
+      ...existing,
+      track: { x: trackX, y: trackY, width: trackWidth, height: SLIDER_TRACK_HEIGHT },
+      fill: { x: trackX, y: trackY, width: Math.max(0, thumbCenter - trackX), height: SLIDER_TRACK_HEIGHT },
+      thumb: {
+        x: thumbCenter - SLIDER_THUMB / 2,
+        y: rowY + (SLIDER_HEIGHT - SLIDER_THUMB) / 2,
+        width: SLIDER_THUMB,
+        height: SLIDER_THUMB,
+      },
+    });
+  }
+
+  /**
+   * Compact date picker: the label leads; the date and / or time capsule
+   * (text in the body font plus 11 of padding each side, 34 high, 8 apart)
+   * trail. The width is the proposal, or label + 8 + capsules.
+   */
+  private datePickerPlan(node: LayoutNode, ctx: Context, p: Proposal): DatePickerPlan {
+    return this.plan(node, p, () => {
+      const cctx = this.childContext(node, ctx);
+      const seconds = num(node.props['seconds']) ?? 0;
+      const components = str(node.props['components']) ?? 'dateAndTime';
+      const dateText = components === 'hourAndMinute' ? null : formatPickerDate(seconds);
+      const timeText = components === 'date' ? null : formatPickerTime(seconds);
+      const capsule = (text: string | null): number =>
+        text === null ? 0 : this.measurer.measureWidth(text, ctx.font) + 2 * DATEPICKER_CAPSULE_PAD_H;
+      const dateWidth = capsule(dateText);
+      const timeWidth = capsule(timeText);
+      const capsulesWidth = dateWidth + timeWidth + (dateText !== null && timeText !== null ? DATEPICKER_CAPSULE_GAP : 0);
+      const label = node.props['labelsHidden'] === true ? null : this.contentOf(node);
+      const labelProposal: Proposal = { width: shrink(p.width, capsulesWidth + DATEPICKER_GAP), height: p.height };
+      const labelSize = label ? this.measure(label, cctx, labelProposal) : ZERO;
+      const width = finite(p.width) ? p.width : labelSize.width + (label ? DATEPICKER_GAP : 0) + capsulesWidth;
+      return {
+        size: { width, height: Math.max(labelSize.height, DATEPICKER_HEIGHT) },
+        label,
+        labelProposal,
+        labelSize,
+        dateWidth,
+        timeWidth,
+        capsulesWidth,
+        cctx,
+      };
+    });
+  }
+
+  private placeDatePicker(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number, size: Size): void {
+    const plan = this.datePickerPlan(node, ctx, p);
+    if (!plan.label) {
+      // `labelsHidden`: the label child exists but is not shown.
+      for (const child of node.children) this.hide(child, node);
+    }
+    const labelY = y + (size.height - plan.labelSize.height) / 2;
+    if (plan.label) this.place(plan.label, plan.cctx, plan.labelProposal, x, labelY);
+    const capsuleY = y + (size.height - DATEPICKER_HEIGHT) / 2;
+    const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+    const chrome: Record<string, Rect> = {
+      ...existing,
+      label: {
+        x,
+        y: labelY,
+        width: Math.min(plan.labelSize.width, Math.max(0, size.width - plan.capsulesWidth - DATEPICKER_GAP)),
+        height: plan.labelSize.height,
+      },
+    };
+    let capsuleX = x + size.width - plan.capsulesWidth;
+    if (plan.dateWidth > 0) {
+      chrome['date'] = { x: capsuleX, y: capsuleY, width: plan.dateWidth, height: DATEPICKER_HEIGHT };
+      capsuleX += plan.dateWidth + DATEPICKER_CAPSULE_GAP;
+    }
+    if (plan.timeWidth > 0) {
+      chrome['time'] = { x: capsuleX, y: capsuleY, width: plan.timeWidth, height: DATEPICKER_HEIGHT };
+    }
+    this.setChrome(node, chrome);
+  }
+
+  /**
+   * `alert` style: a 270 wide card centered on the screen with the title
+   * (headline), the message (footnote) and the buttons: two side by side,
+   * otherwise stacked, 44 each; no buttons → an `ok` rect the renderer draws.
+   * `dialog` style: an action sheet of 57 rows in a card 8 from the screen
+   * edges, above a separate card for the `cancel` button, 8 above the bottom
+   * safe area; the title and message are a footnote caption on top. Button
+   * children get the row as their frame with the label centered in it.
+   */
+  private placeAlert(node: LayoutNode, ctx: Context, x: number, y: number, size: Size): void {
+    const style = str(node.props['style']) === 'dialog' ? 'dialog' : 'alert';
+    const title = str(node.props['title']) ?? '';
+    const message = str(node.props['message']) ?? '';
+    const cctx = this.childContext(node, ctx);
+    const { safeArea } = this.env;
+    const chrome: Record<string, Rect> = {};
+    const texts: Record<string, TextLayout> = {};
+    const roleOf = (child: LayoutNode): string | null => str(unwrapStyled(child).props['role']);
+
+    const centered = (text: string, font: ResolvedFont, width: number): { layout: TextLayout; height: number } => {
+      const wrapped = wrapText(text, font, width, null, this.measurer);
+      return {
+        layout: { font, lines: wrapped.lines, alignment: 'center', truncated: wrapped.truncated ?? false },
+        height: wrapped.lines.length * font.lineHeight,
+      };
+    };
+
+    if (style === 'alert') {
+      const cardWidth = Math.min(ALERT_WIDTH, size.width - 2 * DIALOG_MARGIN);
+      const textWidth = cardWidth - 2 * ALERT_PAD_H;
+      const titleFont = resolveFont({ textStyle: 'headline' }, ctx.font, this.env);
+      const messageFont = resolveFont({ textStyle: 'footnote' }, ctx.font, this.env);
+      // Heights first (the card is centered), then the rects.
+      let h = ALERT_PAD_TOP;
+      let titleBlock: { layout: TextLayout; height: number; top: number } | null = null;
+      let messageBlock: { layout: TextLayout; height: number; top: number } | null = null;
+      if (title.length > 0) {
+        const block = centered(title, titleFont, textWidth);
+        titleBlock = { ...block, top: h };
+        h += block.height;
+      }
+      if (message.length > 0) {
+        if (titleBlock) h += ALERT_TITLE_GAP;
+        const block = centered(message, messageFont, textWidth);
+        messageBlock = { ...block, top: h };
+        h += block.height;
+      }
+      h += ALERT_PAD_BOTTOM;
+      const headerHeight = h;
+      const buttons = node.children;
+      const rows = buttons.length === 0 ? 1 : buttons.length === 2 ? 1 : buttons.length;
+      h += rows * ALERT_BUTTON_HEIGHT;
+      const card: Rect = { x: x + (size.width - cardWidth) / 2, y: y + (size.height - h) / 2, width: cardWidth, height: h };
+      chrome['card'] = card;
+      if (titleBlock) {
+        chrome['title'] = { x: card.x + ALERT_PAD_H, y: card.y + titleBlock.top, width: textWidth, height: titleBlock.height };
+        texts['title'] = titleBlock.layout;
+      }
+      if (messageBlock) {
+        chrome['message'] = { x: card.x + ALERT_PAD_H, y: card.y + messageBlock.top, width: textWidth, height: messageBlock.height };
+        texts['message'] = messageBlock.layout;
+      }
+      const buttonsTop = card.y + headerHeight;
+      if (buttons.length === 0) {
+        chrome['ok'] = { x: card.x, y: buttonsTop, width: cardWidth, height: ALERT_BUTTON_HEIGHT };
+      } else if (buttons.length === 2) {
+        const half = cardWidth / 2;
+        buttons.forEach((button, i) => {
+          const rect: Rect = { x: card.x + i * half, y: buttonsTop, width: half, height: ALERT_BUTTON_HEIGHT };
+          chrome[`button${i}`] = rect;
+          this.placeAlertButton(button, cctx, rect);
+        });
+      } else {
+        buttons.forEach((button, i) => {
+          const rect: Rect = { x: card.x, y: buttonsTop + i * ALERT_BUTTON_HEIGHT, width: cardWidth, height: ALERT_BUTTON_HEIGHT };
+          chrome[`button${i}`] = rect;
+          this.placeAlertButton(button, cctx, rect);
+        });
+      }
+    } else {
+      const cardWidth = Math.max(0, size.width - 2 * DIALOG_MARGIN);
+      const cardX = x + DIALOG_MARGIN;
+      const textWidth = Math.max(0, cardWidth - 2 * DIALOG_HEADER_PAD_H);
+      const titleFont = resolveFont({ textStyle: 'footnote', weight: 'semibold' }, ctx.font, this.env);
+      const messageFont = resolveFont({ textStyle: 'footnote' }, ctx.font, this.env);
+      const buttonCtx: Context = { ...cctx, font: resolveFont({ size: DIALOG_BUTTON_FONT_SIZE }, ctx.font, this.env) };
+      let h = 0;
+      let titleBlock: { layout: TextLayout; height: number; top: number } | null = null;
+      let messageBlock: { layout: TextLayout; height: number; top: number } | null = null;
+      if (title.length > 0 || message.length > 0) {
+        h = DIALOG_HEADER_PAD_V;
+        if (title.length > 0) {
+          const block = centered(title, titleFont, textWidth);
+          titleBlock = { ...block, top: h };
+          h += block.height;
+        }
+        if (message.length > 0) {
+          if (titleBlock) h += ALERT_TITLE_GAP;
+          const block = centered(message, messageFont, textWidth);
+          messageBlock = { ...block, top: h };
+          h += block.height;
+        }
+        h += DIALOG_HEADER_PAD_V;
+      }
+      const headerHeight = h;
+      const cancel = node.children.find((child) => roleOf(child) === 'cancel') ?? null;
+      const others = node.children.filter((child) => child !== cancel);
+      const rows = others.length === 0 && !cancel ? 1 : others.length;
+      h += rows * DIALOG_BUTTON_HEIGHT;
+      const bottom = y + size.height - safeArea.bottom - DIALOG_MARGIN;
+      let cardBottom = bottom;
+      if (cancel) {
+        const cancelCard: Rect = { x: cardX, y: bottom - DIALOG_BUTTON_HEIGHT, width: cardWidth, height: DIALOG_BUTTON_HEIGHT };
+        chrome['cancelCard'] = cancelCard;
+        chrome[`button${node.children.indexOf(cancel)}`] = cancelCard;
+        this.placeAlertButton(cancel, buttonCtx, cancelCard);
+        cardBottom = cancelCard.y - DIALOG_CARD_GAP;
+      }
+      const card: Rect = { x: cardX, y: cardBottom - h, width: cardWidth, height: h };
+      chrome['card'] = card;
+      if (titleBlock) {
+        chrome['title'] = { x: card.x + DIALOG_HEADER_PAD_H, y: card.y + titleBlock.top, width: textWidth, height: titleBlock.height };
+        texts['title'] = titleBlock.layout;
+      }
+      if (messageBlock) {
+        chrome['message'] = { x: card.x + DIALOG_HEADER_PAD_H, y: card.y + messageBlock.top, width: textWidth, height: messageBlock.height };
+        texts['message'] = messageBlock.layout;
+      }
+      const buttonsTop = card.y + headerHeight;
+      if (others.length === 0 && !cancel) {
+        chrome['ok'] = { x: card.x, y: buttonsTop, width: cardWidth, height: DIALOG_BUTTON_HEIGHT };
+      }
+      others.forEach((button, i) => {
+        const rect: Rect = { x: card.x, y: buttonsTop + i * DIALOG_BUTTON_HEIGHT, width: cardWidth, height: DIALOG_BUTTON_HEIGHT };
+        chrome[`button${node.children.indexOf(button)}`] = rect;
+        this.placeAlertButton(button, buttonCtx, rect);
+      });
+    }
+    this.setChrome(node, chrome);
+    if (node.id >= 0 && Object.keys(texts).length > 0) this.chromeText.set(node.id, texts);
+  }
+
+  /** An alert button fills its row; its label is centered in it (any other child is centered as is). */
+  private placeAlertButton(child: LayoutNode, ctx: Context, rect: Rect): void {
+    const proposal: Proposal = { width: Math.max(0, rect.width - 2 * ALERT_PAD_H), height: rect.height };
+    // A `cancel` button is bold: measure (and so draw) its label semibold.
+    const cancel = str(unwrapStyled(child).props['role']) === 'cancel';
+    const inherited = this.childContext(child, ctx);
+    const cctx: Context = {
+      ...inherited,
+      textAlignment: 'center',
+      font: cancel ? resolveFont({ weight: 'semibold' }, inherited.font, this.env) : inherited.font,
+    };
+    if (child.kind !== 'button') {
+      const childSize = this.measure(child, ctx, proposal);
+      const { dx, dy } = alignIn(rect, childSize, 'center');
+      this.place(child, ctx, proposal, rect.x + dx, rect.y + dy);
+      return;
+    }
+    const label = this.contentOf(child);
+    const labelSize = label ? this.measure(label, cctx, proposal) : ZERO;
+    this.setFrame(child, rect.x, rect.y, { width: rect.width, height: rect.height });
+    if (label) {
+      const { dx, dy } = alignIn(rect, labelSize, 'center');
+      this.place(label, cctx, proposal, rect.x + dx, rect.y + dy);
+    }
+    const existing = child.id >= 0 ? this.chrome.get(child.id) : undefined;
+    this.setChrome(child, { ...existing, label: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
+  }
+
+  private placeSheet(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
+    // Phase 8: a `full` sheet (`.fullScreenCover`) has no grabber row.
+    const full = this.sheetIsFull(node);
+    const grabberRow = full ? 0 : SHEET_GRABBER_ROW;
+    const content: Rect = {
+      x,
+      y: y + grabberRow,
+      width: size.width,
+      height: Math.max(0, size.height - grabberRow),
+    };
+    const chrome: Record<string, Rect> = { content };
+    if (!full) {
+      chrome['grabber'] = {
+        x: x + (size.width - SHEET_GRABBER.width) / 2,
+        y: y + SHEET_GRABBER_TOP,
+        width: SHEET_GRABBER.width,
+        height: SHEET_GRABBER.height,
+      };
+    }
+    this.setChrome(node, chrome);
+    const child = this.contentOf(node);
+    if (!child) return;
+    const proposal: Proposal = { width: content.width, height: content.height };
+    const kind = unwrapStyled(child).kind;
+    if (kind === 'list' || kind === 'scrollview' || kind === 'navstack') {
+      this.place(child, cctx, proposal, content.x, content.y);
+      return;
+    }
+    const childSize = this.measure(child, cctx, proposal);
+    const { dx, dy } = alignIn(content, childSize, 'center');
+    this.place(child, cctx, proposal, content.x + dx, content.y + dy);
+  }
+
+  // -------------------------------------------------------------------------
+  // Custom `Layout` (Phase 6)
+  // -------------------------------------------------------------------------
+
+  /**
+   * Swift's answer (`size`) when it has one, for any proposal; before the first
+   * answer the union of the children's ideal sizes, like a zstack measured
+   * with a nil proposal, so the first frame is sane.
+   */
+  private measureLayout(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    const size = readSize(node.props['size']);
+    // Swift's answer holds for the proposal it was computed for. Before the
+    // first answer be flexible: fill what is proposed so the parent keeps
+    // proposing real sizes (a rigid fallback would trap a nested layout that
+    // was first proposed a tiny size at that size).
+    if (size) {
+      if (sameProposal(p, readProposal(node.props['proposal']))) return size;
+      // Another proposal. Swift sends the layout's own min / ideal / max with
+      // its answer, so the probes parents use to learn flexibility (0, nil,
+      // Infinity) are answered from those, and any other proposal is clamped
+      // to min / max (what `LayoutSubview.sizeThatFits` does on the Swift
+      // side) until Swift answers it in a later pass. Guessing from the
+      // answered size made an enclosing custom layout see this one as rigid
+      // at a stale size, and the two then traded answers forever.
+      const sizes = readLayoutSizes(node.props['sizes']);
+      const axis = (proposed: number | null, answered: number, dim: 'width' | 'height'): number => {
+        if (sizes) {
+          if (proposed === null) return sizes.ideal[dim];
+          const lower = Math.min(sizes.min[dim], sizes.max[dim]);
+          return Math.max(lower, Math.min(proposed, sizes.max[dim]));
+        }
+        return proposed === 0 ? 0 : proposed === Infinity ? Infinity : answered;
+      };
+      return { width: axis(p.width, size.width, 'width'), height: axis(p.height, size.height, 'height') };
+    }
+    const cctx = this.childContext(node, ctx);
+    let width = 0;
+    let height = 0;
+    for (const child of node.children) {
+      const ideal = this.measure(child, cctx, NIL_PROPOSAL);
+      width = Math.max(width, ideal.width);
+      height = Math.max(height, ideal.height);
+    }
+    const fill = (proposed: number | null, ideal: number): number =>
+      proposed === null ? ideal : proposed; // Infinity stays Infinity: flexible
+    return { width: fill(p.width, width), height: fill(p.height, height) };
+  }
+
+  /**
+   * With one frame per child (relative to the element's origin) every child
+   * is proposed its frame's size and gets exactly that frame; otherwise the
+   * children are centered like a zstack. Either way the record Swift needs
+   * (the proposal placed with, the children's min / ideal / max) is kept.
+   */
+  private placeLayout(node: LayoutNode, cctx: Context, p: Proposal, x: number, y: number, size: Size): void {
+    const children = node.children;
+    const measured: LayoutChildSizes[] = children.map((child) => ({
+      min: this.measure(child, cctx, MIN_PROPOSAL),
+      ideal: this.measure(child, cctx, NIL_PROPOSAL),
+      max: this.measure(child, cctx, MAX_PROPOSAL),
+    }));
+    if (node.id >= 0) {
+      this.layouts.set(node.id, { proposal: { width: p.width, height: p.height }, children: measured });
+    }
+
+    const raw = node.props['frames'];
+    const frames = Array.isArray(raw) ? raw.map(readRect) : null;
+    if (frames && frames.length === children.length && frames.every((f) => f !== null)) {
+      children.forEach((child, i) => {
+        const f = frames[i] as Rect;
+        this.place(child, cctx, { width: f.width, height: f.height }, x + f.x, y + f.y);
+        this.setFrame(child, x + f.x, y + f.y, f);
+      });
+      return;
+    }
+    const proposal: Proposal = { width: size.width, height: size.height };
+    for (const child of children) {
+      const childSize = this.measure(child, cctx, proposal);
+      const { dx, dy } = alignIn(size, childSize, 'center');
+      this.place(child, cctx, proposal, x + dx, y + dy);
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Grid (Phase 6)
+  // -------------------------------------------------------------------------
+
+  /** Context the cells of a grid row (or a full-span child) are measured with. */
+  private gridCellContext(grid: LayoutNode, row: LayoutNode | null, ctx: Context): Context {
+    const cctx = this.childContext(grid, ctx);
+    return row ? this.childContext(row, cctx) : cctx;
+  }
+
+  /**
+   * SwiftUI's `Grid`: the column count is the widest row (in spans). A column
+   * whose non-spanning cells are all flexible (or that has none) is flexible;
+   * the others take the largest ideal width of their non-spanning cells. The
+   * flexible columns share what is left of the proposal width equally (their
+   * ideal width with a nil proposal). Row heights come from measuring every
+   * cell at its cell width; a non-`gridrow` child is one full-span cell.
+   */
+  private gridPlan(node: LayoutNode, ctx: Context, p: Proposal): GridPlan {
+    return this.plan(node, p, () => {
+      const hSpacing = num(node.props['horizontalSpacing']) ?? DEFAULT_SPACING;
+      const vSpacing = num(node.props['verticalSpacing']) ?? DEFAULT_SPACING;
+      interface Source {
+        node: LayoutNode | null;
+        cells: { node: LayoutNode; column: number; span: number }[];
+        full: boolean;
+      }
+      const sources: Source[] = [];
+      let columnCount = 1;
+      for (const child of node.children) {
+        if (child.kind !== 'gridrow') {
+          sources.push({ node: null, cells: [{ node: child, column: 0, span: 1 }], full: true });
+          continue;
+        }
+        let column = 0;
+        const cells: Source['cells'] = [];
+        for (const cell of child.children) {
+          const span = gridSpanOf(cell);
+          cells.push({ node: cell, column, span });
+          column += span;
+        }
+        columnCount = Math.max(columnCount, column);
+        sources.push({ node: child, cells, full: false });
+      }
+
+      // Column widths.
+      const columns = new Array<number>(columnCount).fill(0);
+      const flexible = new Array<boolean>(columnCount).fill(true);
+      const maxProposal: Proposal = { width: finite(p.width) ? p.width : Infinity, height: null };
+      const threshold = finite(p.width) ? p.width : Infinity;
+      for (let j = 0; j < columnCount; j++) {
+        let ideal = 0;
+        let allFlexible = true;
+        let any = false;
+        for (const source of sources) {
+          if (source.full) continue;
+          const cctx = this.gridCellContext(node, source.node, ctx);
+          for (const cell of source.cells) {
+            if (cell.column !== j || cell.span !== 1) continue;
+            any = true;
+            ideal = Math.max(ideal, this.measure(cell.node, cctx, NIL_PROPOSAL).width);
+            if (this.measure(cell.node, cctx, maxProposal).width < threshold - EPSILON) allFlexible = false;
+          }
+        }
+        columns[j] = ideal;
+        flexible[j] = !any || allFlexible;
+      }
+      if (finite(p.width)) {
+        let fixed = 0;
+        let flexibleCount = 0;
+        for (let j = 0; j < columnCount; j++) {
+          if (flexible[j]) flexibleCount++;
+          else fixed += columns[j] as number;
+        }
+        const remaining = Math.max(0, p.width - fixed - hSpacing * (columnCount - 1));
+        for (let j = 0; j < columnCount; j++) {
+          if (flexible[j]) columns[j] = flexibleCount > 0 ? remaining / flexibleCount : 0;
+        }
+      }
+      const columnX = new Array<number>(columnCount).fill(0);
+      for (let j = 1; j < columnCount; j++) {
+        columnX[j] = (columnX[j - 1] as number) + (columns[j - 1] as number) + hSpacing;
+      }
+      const gridWidth = columns.reduce((sum, w) => sum + w, 0) + hSpacing * (columnCount - 1);
+
+      // Row heights.
+      const rows: GridRowPlan[] = [];
+      let y = 0;
+      for (const source of sources) {
+        const cctx = this.gridCellContext(node, source.node, ctx);
+        const cells: GridCellPlan[] = [];
+        let height = 0;
+        for (const cell of source.cells) {
+          let width: number;
+          if (source.full) width = gridWidth;
+          else {
+            const end = Math.min(columnCount, cell.column + cell.span);
+            width = 0;
+            for (let j = cell.column; j < end; j++) width += columns[j] as number;
+            width += hSpacing * Math.max(0, end - cell.column - 1);
+          }
+          const size = this.measure(cell.node, cctx, { width, height: null });
+          height = Math.max(height, size.height);
+          cells.push({ node: cell.node, column: cell.column, span: cell.span, width, size, full: source.full });
+        }
+        rows.push({
+          node: source.node,
+          cells,
+          y,
+          height,
+          alignment: source.node ? str(source.node.props['alignment']) : null,
+        });
+        y += height + vSpacing;
+      }
+      const gridHeight = rows.length > 0 ? y - vSpacing : 0;
+      return { size: { width: gridWidth, height: gridHeight }, columns, columnX, rows };
+    });
+  }
+
+  private placeGrid(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): void {
+    const plan = this.gridPlan(node, ctx, p);
+    const gridAlignment = str(node.props['alignment']) ?? 'center';
+    const [gridX] = alignmentAnchors(gridAlignment);
+    for (const row of plan.rows) {
+      if (row.node) this.setFrame(row.node, x, y + row.y, { width: plan.size.width, height: row.height });
+      const cctx = this.gridCellContext(node, row.node, ctx);
+      const rowY = rowAnchor(row.alignment, gridAlignment);
+      for (const cell of row.cells) {
+        const box: Size = { width: cell.width, height: row.height };
+        const [ax, ay] = gridAnchorOf(cell.node) ?? [gridX, rowY];
+        const dx = safeOffset(box.width, cell.size.width, ax);
+        const dy = safeOffset(box.height, cell.size.height, ay);
+        const cellX = cell.full ? 0 : (plan.columnX[cell.column] ?? 0);
+        this.place(cell.node, cctx, { width: cell.width, height: null }, x + cellX + dx, y + row.y + dy);
+      }
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // LazyVGrid (Phase 6)
+  // -------------------------------------------------------------------------
+
+  /**
+   * Columns are resolved for the proposal width: fixed items take their
+   * value; flexible and adaptive items share the rest (after the fixed items
+   * and the gaps between items) equally, flexible ones clamped to [min, max];
+   * an adaptive item then fits as many columns as its share allows,
+   * n = max(1, floor((W' + s) / (min + s))), each (W' − (n−1)·s) / n wide,
+   * clamped. With no width the flexible columns take the cells' largest ideal
+   * width and an adaptive item is one column. Cells fill rows left to right.
+   */
+  private lazyGridPlan(node: LayoutNode, ctx: Context, p: Proposal): LazyGridPlan {
+    return this.plan(node, p, () => {
+      const items = readGridItems(node.props['columns']);
+      const rowSpacing = num(node.props['spacing']) ?? DEFAULT_SPACING;
+      const cctx = this.childContext(node, ctx);
+      const cells = node.children;
+      let idealCell: number | null = null;
+      const ideal = (): number => {
+        if (idealCell === null) {
+          idealCell = 0;
+          for (const cell of cells) idealCell = Math.max(idealCell, this.measure(cell, cctx, NIL_PROPOSAL).width);
+        }
+        return idealCell;
+      };
+      const widths = items.map((item): number[] => (item.kind === 'fixed' ? [item.value] : []));
+      if (!finite(p.width)) {
+        items.forEach((item, i) => {
+          if (item.kind !== 'fixed') widths[i] = [clamp(ideal(), item.minimum, item.maximum)];
+        });
+      } else {
+        let gaps = 0;
+        for (let i = 0; i < items.length - 1; i++) gaps += (items[i] as GridItemSpec).spacing;
+        let fixed = 0;
+        for (const item of items) if (item.kind === 'fixed') fixed += item.value;
+        const sharing = items.filter((item) => item.kind !== 'fixed').length;
+        const remaining = Math.max(0, p.width - fixed - gaps);
+        const share = sharing > 0 ? remaining / sharing : 0;
+        let flexibleTotal = 0;
+        let adaptiveCount = 0;
+        items.forEach((item, i) => {
+          if (item.kind === 'flexible') {
+            const width = clamp(share, item.minimum, item.maximum);
+            widths[i] = [width];
+            flexibleTotal += width;
+          } else if (item.kind === 'adaptive') adaptiveCount++;
+        });
+        const adaptiveShare = adaptiveCount > 0 ? Math.max(0, remaining - flexibleTotal) / adaptiveCount : 0;
+        items.forEach((item, i) => {
+          if (item.kind !== 'adaptive') return;
+          const s = item.spacing;
+          const unit = item.minimum + s;
+          const n = unit > 0 ? Math.max(1, Math.floor((adaptiveShare + s) / unit + EPSILON)) : 1;
+          const width = clamp((adaptiveShare - (n - 1) * s) / n, item.minimum, item.maximum);
+          widths[i] = new Array<number>(n).fill(width);
+        });
+      }
+
+      const columns: LazyColumnPlan[] = [];
+      let cursor = 0;
+      items.forEach((item, i) => {
+        const itemWidths = widths[i] as number[];
+        itemWidths.forEach((width, k) => {
+          columns.push({ x: cursor, width, alignment: item.alignment });
+          cursor += width;
+          const last = i === items.length - 1 && k === itemWidths.length - 1;
+          if (!last) cursor += item.spacing;
+        });
+      });
+      const used = cursor;
+      const gridWidth = finite(p.width) ? p.width : used;
+      const alignment = str(node.props['alignment']) ?? 'center';
+      const offset = safeOffset(gridWidth, used, alignmentAnchors(alignment)[0]);
+      for (const column of columns) column.x += offset;
+
+      const rows: LazyGridPlan['rows'] = [];
+      let y = 0;
+      const perRow = Math.max(1, columns.length);
+      for (let start = 0; start < cells.length; start += perRow) {
+        const rowCells: LazyGridPlan['rows'][number]['cells'] = [];
+        let height = 0;
+        for (let k = 0; k < perRow && start + k < cells.length; k++) {
+          const cell = cells[start + k] as LayoutNode;
+          const column = columns[k] as LazyColumnPlan;
+          const size = this.measure(cell, cctx, { width: column.width, height: null });
+          height = Math.max(height, size.height);
+          rowCells.push({ node: cell, column: k, size });
+        }
+        rows.push({ y, height, cells: rowCells });
+        y += height + rowSpacing;
+      }
+      const gridHeight = rows.length > 0 ? y - rowSpacing : 0;
+      return { size: { width: gridWidth, height: gridHeight }, columns, rows };
+    });
+  }
+
+  private placeLazyGrid(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): void {
+    const plan = this.lazyGridPlan(node, ctx, p);
+    const cctx = this.childContext(node, ctx);
+    const gridAlignment = str(node.props['alignment']) ?? 'center';
+    for (const row of plan.rows) {
+      for (const cell of row.cells) {
+        const column = plan.columns[cell.column] as LazyColumnPlan;
+        const box: Size = { width: column.width, height: row.height };
+        const { dx, dy } = alignIn(box, cell.size, column.alignment ?? gridAlignment);
+        this.place(cell.node, cctx, { width: column.width, height: null }, x + column.x + dx, y + row.y + dy);
+      }
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Gauge (Phase 6)
+  // -------------------------------------------------------------------------
+
+  /**
+   * A linear gauge: width = proposal (100 when none), a 4px bar below an
+   * optional label row (label leading, current value label trailing, both in
+   * the `caption` text style) with a 4px gap. Circular styles render linear.
+   */
+  private gaugePlan(node: LayoutNode, ctx: Context, p: Proposal): GaugePlan {
+    return this.plan(node, p, () => {
+      const width = finite(p.width) ? p.width : GAUGE_DEFAULT_WIDTH;
+      const cctx = this.childContext(node, ctx);
+      const labelCtx: Context = { ...cctx, font: resolveFont({ textStyle: 'caption' }, ctx.font, this.env) };
+      let index = 0;
+      const label = node.props['hasLabel'] === true ? (node.children[index++] ?? null) : null;
+      const current = node.props['hasCurrentValueLabel'] === true ? (node.children[index++] ?? null) : null;
+      const proposal: Proposal = { width, height: null };
+      const labelSize = label ? this.measure(label, labelCtx, proposal) : ZERO;
+      const currentSize = current ? this.measure(current, labelCtx, proposal) : ZERO;
+      const labelRow = label || current ? Math.max(labelSize.height, currentSize.height) : 0;
+      const height = GAUGE_BAR_HEIGHT + (labelRow > 0 ? labelRow + GAUGE_LABEL_GAP : 0);
+      return { size: { width, height }, label, current, labelSize, currentSize, labelRow, labelCtx };
+    });
+  }
+
+  private placeGauge(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number, size: Size): void {
+    const plan = this.gaugePlan(node, ctx, p);
+    const proposal: Proposal = { width: size.width, height: null };
+    if (plan.label) {
+      this.place(plan.label, plan.labelCtx, proposal, x, y + (plan.labelRow - plan.labelSize.height) / 2);
+    }
+    if (plan.current) {
+      this.place(
+        plan.current,
+        plan.labelCtx,
+        proposal,
+        x + size.width - plan.currentSize.width,
+        y + (plan.labelRow - plan.currentSize.height) / 2,
+      );
+    }
+    const value = Math.min(1, Math.max(0, num(node.props['value']) ?? 0));
+    const barY = y + (plan.labelRow > 0 ? plan.labelRow + GAUGE_LABEL_GAP : 0);
+    this.setChrome(node, {
+      track: { x, y: barY, width: size.width, height: GAUGE_BAR_HEIGHT },
+      fill: { x, y: barY, width: size.width * value, height: GAUGE_BAR_HEIGHT },
+    });
+  }
+
+  // -------------------------------------------------------------------------
+  // Chart (Phase 7)
+  // -------------------------------------------------------------------------
+
+  /**
+   * A chart is the proposal on both axes (300 × 200 for nil axes). Its box is
+   * split into the legend, the axis bands (as thick as their largest label,
+   * measured in the `caption` font or, for `xLabel` / `yLabel` children, at
+   * the view's ideal size, plus 6) and the plot; every `chartitem` child is
+   * measured at its ideal size and framed against the plot (src/layout/chart.ts).
+   */
+  private chartPlan(node: LayoutNode, ctx: Context, p: Proposal): ChartPlan {
+    return this.plan(node, p, () => {
+      const size = chartSize(p.width, p.height);
+      // An infinite proposal reports infinite (the chart is flexible); the
+      // geometry is computed for the default size and recomputed when placed.
+      const box = chartSize(finite(size.width) ? size.width : null, finite(size.height) ? size.height : null);
+      const childCtx = this.childContext(node, ctx);
+      const font = resolveFont({ textStyle: 'caption' }, ctx.font, this.env);
+      const measureWidth = (text: string): number => this.measurer.measureWidth(text, font);
+
+      // Children at their ideal size, by role.
+      const items: ChartItemPlan[] = node.children.map((child) => {
+        const role = str(child.props['role']) ?? 'annotation';
+        const childSize = this.measure(child, childCtx, NIL_PROPOSAL);
+        return { node: child, role, size: childSize, frame: { x: 0, y: 0, ...childSize } };
+      });
+      const xViews = items.filter((item) => item.role === 'xLabel');
+      const yViews = items.filter((item) => item.role === 'yLabel');
+
+      const axisInput = (axis: unknown, fallback: string, views: ChartItemPlan[], key: 'x0' | 'y0'): ChartAxisInput | null => {
+        const a = obj(axis);
+        if (!a) return null;
+        const labels: { at: number; width: number }[] = [];
+        const rawLabels = Array.isArray(a['labels']) ? (a['labels'] as unknown[]) : [];
+        for (const raw of rawLabels) {
+          const label = obj(raw);
+          if (!label) continue;
+          const text = str(label['text']) ?? '';
+          labels.push({ at: num(label['at']) ?? 0, width: measureWidth(text) });
+        }
+        return {
+          position: (str(a['position']) ?? fallback) as ChartAxisInput['position'],
+          labels,
+          labelHeight: font.lineHeight,
+          views: views.map((view) => ({ at: num(view.node.props[key]) ?? 0, size: view.size })),
+        };
+      };
+      const xAxis = axisInput(node.props['xAxis'], 'bottom', xViews, 'x0');
+      const yAxis = axisInput(node.props['yAxis'], 'trailing', yViews, 'y0');
+
+      let legend: ChartLegendInput | null = null;
+      const rawLegend = obj(node.props['legend']);
+      if (rawLegend) {
+        const rawItems = Array.isArray(rawLegend['items']) ? (rawLegend['items'] as unknown[]) : [];
+        const itemWidths = rawItems.map((raw) => {
+          const item = obj(raw);
+          const glyph = legendGlyphSize(item ? str(item['symbol']) : null);
+          // Whole pixels: the item's rect is snapped down, which must not clip the label.
+          return Math.ceil(glyph.width + CHART_LEGEND_GAP + measureWidth(item ? (str(item['label']) ?? '') : ''));
+        });
+        legend = {
+          position: (str(rawLegend['position']) ?? 'top') as ChartLegendInput['position'],
+          itemWidths,
+          itemHeight: Math.max(font.lineHeight, CHART_LEGEND_GLYPH),
+        };
+      }
+
+      const geometry = layoutChart({ width: box.width, height: box.height, xAxis, yAxis, legend });
+
+      // Frames (relative to the chart origin) for every child.
+      xViews.forEach((item, i) => {
+        item.frame = geometry.xViews[i] ?? item.frame;
+      });
+      yViews.forEach((item, i) => {
+        item.frame = geometry.yViews[i] ?? item.frame;
+      });
+      for (const item of items) {
+        if (item.role === 'xLabel' || item.role === 'yLabel') continue;
+        const props = item.node.props;
+        const R = unitRect(
+          geometry.plot,
+          num(props['x0']) ?? 0,
+          num(props['x1']) ?? 0,
+          num(props['y0']) ?? 0,
+          num(props['y1']) ?? 0,
+        );
+        const position = (str(props['position']) ?? 'overlay') as ChartItemPosition;
+        item.frame = annotationFrame(R, item.size, position, str(props['alignment']), num(props['spacing']) ?? 0);
+      }
+
+      const labelTexts = (axis: unknown): string[] => {
+        const a = obj(axis);
+        const raw = a && Array.isArray(a['labels']) ? (a['labels'] as unknown[]) : [];
+        return raw.filter((l) => obj(l) !== null).map((l) => str((l as Record<string, unknown>)['text']) ?? '');
+      };
+      return {
+        size,
+        geometry,
+        font,
+        items,
+        xLabelTexts: labelTexts(node.props['xAxis']),
+        yLabelTexts: labelTexts(node.props['yAxis']),
+        childCtx,
+      };
+    });
+  }
+
+  private placeChart(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): void {
+    const plan = this.chartPlan(node, ctx, p);
+    const shift = (r: Rect): Rect => ({ x: x + r.x, y: y + r.y, width: r.width, height: r.height });
+    for (const item of plan.items) {
+      this.place(item.node, plan.childCtx, NIL_PROPOSAL, x + item.frame.x, y + item.frame.y);
+    }
+    const g = plan.geometry;
+    const chrome: Record<string, Rect> = { plot: shift(g.plot) };
+    if (g.legend) chrome['legend'] = shift(g.legend);
+    if (g.xBand) chrome['xband'] = shift(g.xBand);
+    if (g.yBand) chrome['yband'] = shift(g.yBand);
+    const texts: Record<string, TextLayout> = {};
+    const xAlign: TextAlignment = 'center';
+    const yAlign: TextAlignment = g.yBand && g.yBand.x < g.plot.x ? 'trailing' : 'leading';
+    g.xLabels.forEach((rect, i) => {
+      chrome[`xlabel${i}`] = shift(rect);
+      texts[`xlabel${i}`] = { font: plan.font, lines: [plan.xLabelTexts[i] ?? ''], alignment: xAlign, truncated: false };
+    });
+    g.yLabels.forEach((rect, i) => {
+      chrome[`ylabel${i}`] = shift(rect);
+      texts[`ylabel${i}`] = { font: plan.font, lines: [plan.yLabelTexts[i] ?? ''], alignment: yAlign, truncated: false };
+    });
+    g.legendItems.forEach((rect, i) => {
+      chrome[`legend${i}`] = shift(rect);
+    });
+    this.setChrome(node, chrome);
+    if (node.id >= 0) {
+      this.chromeText.set(node.id, texts);
+      this.fonts.set(node.id, plan.font);
+    }
+  }
+}
+
+export function layoutTree(
+  roots: readonly LayoutNode[],
+  env: LayoutEnvironment,
+  measurer: TextMeasurer,
+): LayoutResult {
+  return new LayoutPass(env, measurer).run(roots);
+}