@swiftbrowser/web 0.1.0 → 0.3.0

package/src/layout/engine.ts

@@ -20,8 +20,9 @@
  */
 
 import { FONT_FAMILIES, defaultFont, makeFont, resolveFont, textStyleSize } from './typography';
-import { wrapText } from './text';
+import { wrapRuns, wrapText, type TextRunInput } from './text';
 import { formatPickerDate, formatPickerTime, sliderFraction } from './controls';
+import { videoSize } from './video';
 import {
   CHART_LEGEND_GAP,
   CHART_LEGEND_GLYPH,
@@ -78,11 +79,22 @@ export interface Context {
    * from here.
    */
   safeTop: number;
+  /**
+   * The inset a sheet gives the bar of the navigation stack that fills it
+   * (its grabber row, or iOS 26's room above a sheet's bar), as the status
+   * bar does at the root. Only the stack's own screens see it.
+   */
+  barInset?: number;
   /**
    * Phase 12: the size of the nearest container (`containerRelativeFrame`):
    * the screen at the root, a scroll view's viewport inside one.
    */
   container: Size;
+  /**
+   * The lower bound of the enclosing `.lineLimit(2...4)` range (`lineLimitMin`):
+   * a vertical text field is at least this many lines tall. Absent for 1.
+   */
+  minLines?: number;
 }
 
 // Constants from the spec.
@@ -91,35 +103,71 @@ 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;
+// iOS 26 metrics (measured in the iOS 26.2 simulator, Examples/Fidelity): a
+// bordered button is 34 tall (50 at `.controlSize(.large)`), a switch 63 × 28.
+const BORDERED_PAD_V = 6;
+const BORDERED_PAD_H = 12;
 const BORDERED_MIN_HEIGHT = 34;
-const SWITCH_WIDTH = 51;
-const SWITCH_HEIGHT = 31;
+/**
+ * A bordered button's padding, least height and (smaller sizes) label text
+ * style per `controlSize` (props); `regular` is the constants above.
+ */
+const BORDERED_SIZES: Record<string, { padV: number; padH: number; minHeight: number; textStyle?: string }> = {
+  mini: { padV: 3, padH: 8, minHeight: 24, textStyle: 'footnote' },
+  small: { padV: 4, padH: 10, minHeight: 28, textStyle: 'subheadline' },
+  large: { padV: 14, padH: 20, minHeight: 50 },
+  extraLarge: { padV: 18, padH: 24, minHeight: 58 },
+};
+const SWITCH_WIDTH = 63;
+const SWITCH_HEIGHT = 28;
 const TOGGLE_GAP = 8;
 const TEXTFIELD_DEFAULT_WIDTH = 200;
 const TEXTFIELD_HEIGHT_ROUNDED = 34;
 const TEXTFIELD_HEIGHT_PLAIN = 22;
+/** A vertical `roundedBorder` field's text inset: 7 + the 1px border across, (34 - 22) / 2 down. */
+const TEXTFIELD_ROUNDED_INSET = { horizontal: 8, vertical: 6 };
 const NAV_BAR_HEIGHT = 44;
-const LARGE_TITLE_HEIGHT = 52;
+// iOS 26: the large title's row is 62 (52 before).
+const LARGE_TITLE_HEIGHT = 62;
 /** 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;
+// iOS 26: a sheet at a partial detent (medium, a height or a fraction)
+// floats 8 from the screen's sides and 15 above its bottom; the medium card
+// is 433 tall. Its grabber shows only when it has more than one detent; its
+// content then starts 14 below the card's top.
+const SHEET_FLOAT_INSET_H = 8;
+const SHEET_FLOAT_INSET_BOTTOM = 15;
+const SHEET_MEDIUM_HEIGHT = 433;
+// iOS 26: without a grabber a sheet's content (and a navigation bar's row)
+// starts 16 below its top.
+const SHEET_CONTENT_TOP = 16;
 const LIST_INSET = 16;
 const LIST_CELL_PADDING = 16;
-const LIST_ROW_VPAD = 11;
-const LIST_ROW_MIN_HEIGHT = 44;
-const LIST_TOP = 20;
+// iOS 26 (measured in the iOS 26.2 simulator, Examples/Fidelity): rows are
+// at least 52 tall with 13 above and below their content; a section's header
+// is a sentence-case headline-sized line that starts 9 into the 35 gap
+// between cards and ends 10 above its card.
+const LIST_ROW_VPAD = 13;
+const LIST_ROW_MIN_HEIGHT = 52;
+const LIST_TOP = 18;
 const LIST_BOTTOM = 20;
-const LIST_HEADER_GAP = 8;
-const LIST_FOOTER_GAP = 8;
+const LIST_HEADER_LIFT = 9;
+const LIST_HEADER_GAP = 10;
+const LIST_FOOTER_GAP = 6;
 const LIST_SECTION_GAP = 35;
 const LIST_CHEVRON_WIDTH = 20;
 // Phase 4.
-const TAB_BAR_HEIGHT = 49;
+// iOS 26: the tab bar is a 62-tall glass capsule floating 21 from the sides
+// and 22 above the bottom edge (8 when the tab view ends above the screen
+// bottom), its items in equal slots inside a 4 inset.
+const TAB_BAR_HEIGHT = 62;
+const TAB_BAR_MARGIN_H = 21;
+const TAB_BAR_MARGIN_BOTTOM = 22;
+const TAB_BAR_MARGIN_BOTTOM_INSET = 8;
+const TAB_BAR_ITEM_INSET = 4;
 const PICKER_SEGMENTED_HEIGHT = 32;
 const PICKER_SEGMENT_PAD = 20;
 const PICKER_SEGMENT_FONT_SIZE = 13;
@@ -131,7 +179,14 @@ const PICKER_MENU_GAP = 12;
 // Phase 6.
 const GAUGE_BAR_HEIGHT = 4;
 const GAUGE_LABEL_GAP = 4;
+/** A ProgressView's label to its bar, and its bar to its current value label. */
+const PROGRESS_LABEL_GAP = 8;
+const PROGRESS_VALUE_GAP = 6;
 const GAUGE_DEFAULT_WIDTH = 100;
+/** A circular gauge's side (`accessoryCircular` / `accessoryCircularCapacity`). */
+const GAUGE_RING_SIZE = 58;
+/** The square inside the ring its label is proposed, as a fraction of the side. */
+const GAUGE_RING_INNER = 0.62;
 const GRID_ITEM_DEFAULT_MIN = 10;
 // Phase 6 (docs/phase6/chrome.md).
 const PICKER_INLINE_ROW_HEIGHT = 44;
@@ -141,12 +196,22 @@ const PICKER_INLINE_CHECK_WIDTH = 28;
 const BADGE_GAP = 8;
 const NAV_ITEM_SPACING = 16;
 const NAV_ITEM_MARGIN = 16;
+// iOS 26: the back button is a 44pt glass circle 16 from the leading edge,
+// and the bar's leading and trailing items sit in glass capsules 44 tall,
+// each item in a slot at least 44 wide (an icon: a circle; text: 12 either
+// side), the groups 8 apart.
+const NAV_GLASS_SIZE = 44;
+const NAV_GLASS_PAD_H = 12;
+const NAV_GROUP_SPACING = 8;
 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;
+// iOS 26: a navigation stack's search field is a 48-tall glass capsule
+// floating 16 from the sides and 28 above the screen bottom (8 above a view
+// that ends higher); the content stops above it.
+const SEARCH_BOTTOM_HEIGHT = 48;
+const SEARCH_BOTTOM_MARGIN = 28;
+const SEARCH_BOTTOM_MARGIN_INSET = 8;
 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").
@@ -160,10 +225,12 @@ const EPSILON = 1e-6;
 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;
+/** A `slider` is 35 high (its label row, when present, sits above). */
+// iOS 26: a 6pt track and a 38 × 24 pill knob in a 35 row.
+const SLIDER_HEIGHT = 35;
+const SLIDER_TRACK_HEIGHT = 6;
+const SLIDER_THUMB = 38;
+const SLIDER_THUMB_HEIGHT = 24;
 const SLIDER_DEFAULT_WIDTH = 200;
 /** Gap between a min / max value label and the track. */
 const SLIDER_LABEL_GAP = 8;
@@ -174,14 +241,26 @@ 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;
+/**
+ * `alert` style (iOS 26): a 320 wide card centered in the safe area, its
+ * title and message leading-aligned 30 in, its buttons 46 tall capsules 16
+ * in from the card's sides, side by side 8 apart for two, stacked 8 apart
+ * otherwise.
+ */
+const ALERT_WIDTH = 320;
+const ALERT_PAD_TOP = 21;
+const ALERT_PAD_H = 30;
+const ALERT_BUTTON_INSET = 16;
+const ALERT_BUTTONS_GAP = 20;
+const ALERT_PAD_BOTTOM = 16;
+const ALERT_BUTTON_SPACING = 8;
 /** Gap between the alert title and its message. */
-const ALERT_TITLE_GAP = 4;
-const ALERT_BUTTON_HEIGHT = 44;
+const ALERT_TITLE_GAP = 6;
+const ALERT_BUTTON_HEIGHT = 46;
+/** Gap between an action sheet's title and its message. */
+const DIALOG_TITLE_GAP = 4;
+/** An action sheet's button labels are inset this much from its rows. */
+const DIALOG_LABEL_INSET = 16;
 /** `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;
@@ -457,6 +536,8 @@ interface RowHints {
   badge: string | null;
   /** `.listRowInsets(_:)`, or null for the defaults. */
   insets: EdgeInsets | null;
+  /** `.listRowSeparator(.hidden, edges:)`: the edges whose separator the row hides. */
+  separatorHidden: { top: boolean; bottom: boolean } | null;
 }
 
 /**
@@ -464,7 +545,7 @@ interface RowHints {
  * outermost wins, like `layoutPriority`): `badge` and `listRowInsets`.
  */
 function rowHintsOf(node: LayoutNode): RowHints {
-  const hints: RowHints = { badge: null, insets: null };
+  const hints: RowHints = { badge: null, insets: null, separatorHidden: 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`,
@@ -477,6 +558,11 @@ function rowHintsOf(node: LayoutNode): RowHints {
         if (badge !== null && badge.length > 0) hints.badge = badge;
       }
       if (hints.insets === null) hints.insets = readInsets(style['listRowInsets']);
+      const separator = style['listRowSeparator'];
+      if (hints.separatorHidden === null && typeof separator === 'object' && separator !== null) {
+        const edges = separator as Record<string, unknown>;
+        hints.separatorHidden = { top: edges['top'] === true, bottom: edges['bottom'] === true };
+      }
       current = current.children.length === 1 ? current.children[0] : undefined;
     } else if (current.kind === 'navlink' && current.children.length === 1) {
       current = current.children[0];
@@ -581,6 +667,54 @@ function alignIn(container: Size, child: Size, alignment: string): { dx: number;
   };
 }
 
+/** The guide names a pair of anchors aligns by: `leading`/`center`/`trailing` and `top`/`center`/`bottom`. */
+function guideNames([ax, ay]: [number, number]): [string, string] {
+  return [ax === 0 ? 'leading' : ax === 1 ? 'trailing' : 'center', ay === 0 ? 'top' : ay === 1 ? 'bottom' : 'center'];
+}
+
+/**
+ * The guide `name` on `axis` a view moved with `.alignmentGuide`, as
+ * `[a, b, c]` (the guide is `a + b·width + c·height`): set on the view or on
+ * a `styled` wrapper inside it (the modifiers between change nothing here).
+ */
+export function explicitGuide(node: LayoutNode, axis: 'horizontal' | 'vertical', name: string): [number, number, number] | null {
+  let current: LayoutNode | undefined = node;
+  for (let depth = 0; current && current.kind === 'styled' && depth < 32; depth++) {
+    const guide = (current.props['style'] as { alignmentGuide?: { axis?: string; name?: string; value?: unknown } } | undefined)?.alignmentGuide;
+    if (guide && guide.axis === axis && guide.name === name && Array.isArray(guide.value) && guide.value.length === 3) {
+      const [a, b, c] = guide.value.map((v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0)) as [number, number, number];
+      return [a, b, c];
+    }
+    current = current.children.length === 1 ? current.children[0] : undefined;
+  }
+  return null;
+}
+
+function guideValue([a, b, c]: [number, number, number], size: Size): number {
+  return a + b * size.width + c * size.height;
+}
+
+/**
+ * `alignIn` for a child that may have moved its guides (`.alignmentGuide`):
+ * on an axis where it did, its guide meets the container's guide for the
+ * same alignment (0, the middle or the end); elsewhere it aligns as before.
+ */
+function alignChild(container: Size, child: Size, alignment: string, node: LayoutNode): { dx: number; dy: number } {
+  const anchors = alignmentAnchors(alignment);
+  const [horizontal, vertical] = guideNames(anchors);
+  const offsets = alignIn(container, child, alignment);
+  const gx = explicitGuide(node, 'horizontal', horizontal);
+  const gy = explicitGuide(node, 'vertical', vertical);
+  if (gx && Number.isFinite(container.width)) offsets.dx = container.width * anchors[0] - guideValue(gx, child);
+  if (gy && Number.isFinite(container.height)) offsets.dy = container.height * anchors[1] - guideValue(gy, child);
+  return offsets;
+}
+
+/** A `Spacer` (a lazy stack's too): a stack sizes it after its other children. */
+function isSpacer(node: LayoutNode): boolean {
+  return node.kind === 'spacer' || node.kind === 'lazyspacer';
+}
+
 function safeOffset(container: number, child: number, anchor: number): number {
   if (!Number.isFinite(container) || !Number.isFinite(child)) return 0;
   return (container - child) * anchor;
@@ -682,6 +816,17 @@ interface ListRowPlan {
   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;
+  /** `.listRowSeparator(.hidden)`: the row's separator edges left out. */
+  separatorHidden?: { top: boolean; bottom: boolean } | null;
+}
+
+/** A section's view header or footer (`sectionheader` / `sectionfooter`) as the list places it. */
+interface ListSupplementPlan {
+  node: LayoutNode;
+  ctx: Context;
+  proposal: Proposal;
+  /** Relative to the list origin at scroll 0. */
+  rect: Rect;
 }
 
 interface ListGroupPlan {
@@ -689,6 +834,8 @@ interface ListGroupPlan {
   frame: Rect;
   header: { rect: Rect; layout: TextLayout } | null;
   footer: { rect: Rect; layout: TextLayout } | null;
+  headerView: ListSupplementPlan | null;
+  footerView: ListSupplementPlan | null;
   card: Rect;
   rows: ListRowPlan[];
 }
@@ -769,6 +916,10 @@ interface GaugePlan {
   /** Height of the label row (0 without labels). */
   labelRow: number;
   labelCtx: Context;
+  /** A ProgressView's label context (the gauge's own font, not the caption). */
+  labelOwnCtx?: Context;
+  /** A circular gauge: the view in the middle of the ring (the current value label, else the label) and its size. */
+  ring?: { center: LayoutNode | null; centerSize: Size };
 }
 
 /** Phase 7: one `chartitem` child of a chart, measured at its ideal size. */
@@ -819,6 +970,12 @@ export class LayoutPass {
   readonly layouts = new Map<number, LayoutRecord>();
   /** Previous screen title per navscreen node, for the back button label. */
   private readonly previousTitles = new Map<LayoutNode, string>();
+  /**
+   * A large-title screen's root list or vertical scroll view starts under the
+   * bar and insets its content by the title row, which scrolls with it
+   * (iOS): the inset, by scroll node, set by `placeNavScreen`.
+   */
+  private readonly titleInsets = new WeakMap<LayoutNode, Rect>();
 
   private readonly memo = new Map<LayoutNode, Map<string, unknown>>();
   private readonly implicit = new Map<LayoutNode, LayoutNode>();
@@ -870,9 +1027,12 @@ export class LayoutPass {
         // 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 floats = this.sheetFloats(root);
+        const insetH = floats ? SHEET_FLOAT_INSET_H : 0;
+        const insetBottom = floats ? SHEET_FLOAT_INSET_BOTTOM : 0;
+        const proposal: Proposal = { width: screen.width - 2 * insetH, height: null };
         const size = this.measure(root, ctx, proposal);
-        this.place(root, ctx, proposal, 0, screen.height - size.height);
+        this.place(root, ctx, proposal, insetH, screen.height - insetBottom - size.height);
       } else {
         const safe: Size = {
           width: Math.max(0, screen.width - safeArea.leading - safeArea.trailing),
@@ -1030,7 +1190,11 @@ export class LayoutPass {
         if (font !== ctx.font) next = { ...next, font };
         if ('lineLimit' in style) {
           const limit = num(style['lineLimit']);
+          const min = num(style['lineLimitMin']);
           next = { ...next, lineLimit: limit !== null && limit >= 1 ? Math.floor(limit) : null };
+          // A new limit replaces the whole range, lower bound included.
+          if (min !== null && min > 1) next.minLines = Math.floor(min);
+          else delete next.minLines;
         }
         const alignment = str(style['multilineTextAlignment']);
         if (alignment === 'leading' || alignment === 'center' || alignment === 'trailing') {
@@ -1120,6 +1284,9 @@ export class LayoutPass {
         return this.measureImage(node, ctx, p);
       case 'spacer':
         return this.measureSpacer(node, ctx, p);
+      case 'lazyspacer':
+        // Lazy rows not built yet: no space (the page builds them as it nears).
+        return ZERO;
       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 };
@@ -1136,6 +1303,7 @@ export class LayoutPass {
       case 'toggle':
         return this.measureToggle(node, ctx, p);
       case 'textfield': {
+        if (node.props['axis'] === 'vertical') return this.measureMultilineField(node, ctx, p);
         const style = str(node.props['style']);
         return {
           width: finite(p.width) ? p.width : TEXTFIELD_DEFAULT_WIDTH,
@@ -1144,7 +1312,11 @@ export class LayoutPass {
       }
       case 'color':
       case 'shape':
+      case 'canvas':
         return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
+      case 'video':
+        // Fills the proposal; an open axis follows the video's aspect ratio.
+        return videoSize(node.props, p);
       case 'scrollview':
         return this.scrollPlan(node, ctx, p).size;
       case 'list':
@@ -1230,8 +1402,26 @@ export class LayoutPass {
     }
   }
 
+  /**
+   * A vertical `textfield`: the proposed width (200 when unconstrained) and
+   * as many lines as its text (or, empty, its placeholder) wraps to in the
+   * context font, between the range's `minLines` and `lineLimit`.
+   */
+  private measureMultilineField(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    const inset = str(node.props['style']) === 'roundedBorder' ? TEXTFIELD_ROUNDED_INSET : { horizontal: 0, vertical: 0 };
+    const width = finite(p.width) ? p.width : TEXTFIELD_DEFAULT_WIDTH;
+    const text = str(node.props['text']) || str(node.props['placeholder']) || '';
+    const wrapped = wrapText(text, ctx.font, Math.max(1, width - 2 * inset.horizontal), null, this.measurer);
+    const min = Math.max(1, ctx.minLines ?? 1);
+    const max = Math.max(min, ctx.lineLimit ?? Infinity);
+    const lines = Math.min(Math.max(wrapped.lines.length, min), max);
+    return { width, height: lines * ctx.font.lineHeight + 2 * inset.vertical };
+  }
+
   private textPlan(node: LayoutNode, ctx: Context, p: Proposal): TextPlan {
     return this.plan(node, p, () => {
+      const runs = node.props['runs'];
+      if (Array.isArray(runs)) return this.richTextPlan(runs, ctx, p);
       const text = str(node.props['text']) ?? '';
       const wrapped = wrapText(text, ctx.font, p.width, ctx.lineLimit, this.measurer);
       return {
@@ -1246,6 +1436,47 @@ export class LayoutPass {
     });
   }
 
+  /**
+   * Rich text: each run's font (the text's font, changed by the run's), its
+   * kerning, and an inline image's size; wrapped as one paragraph flow.
+   */
+  private richTextPlan(runs: unknown[], ctx: Context, p: Proposal): TextPlan {
+    const inputs: TextRunInput[] = runs.map((value) => {
+      const run = obj(value) ?? {};
+      let font = resolveFont(run['font'], ctx.font, this.env);
+      if (run['italic'] === true) font = { ...font, css: `italic ${font.css}` };
+      const kerning = num(run['kerning']) ?? 0;
+      const image = obj(run['image']);
+      if (image) return { image: this.inlineImageSize(image, font), font, kerning };
+      return { text: str(run['text']) ?? '', font, kerning };
+    });
+    const wrapped = wrapRuns(inputs, ctx.font, p.width, ctx.lineLimit, this.measurer);
+    const lines = wrapped.lines.map((line) => line.map((fragment) => fragment.text ?? '\uFFFC').join(''));
+    return {
+      size: { width: wrapped.width, height: wrapped.heights.reduce((total, height) => total + height, 0) },
+      layout: {
+        font: ctx.font,
+        lines,
+        alignment: ctx.textAlignment,
+        truncated: wrapped.truncated,
+        rich: { lines: wrapped.lines, heights: wrapped.heights, fonts: inputs.map((input) => input.font) },
+      },
+    };
+  }
+
+  /** An image in a text: a bitmap or remote image at its size, a symbol a square of the line height. */
+  private inlineImageSize(props: Record<string, unknown>, font: ResolvedFont): Size {
+    if (typeof props['url'] === 'string' || typeof props['bitmap'] === 'object') {
+      return { width: num(props['width']) ?? 0, height: num(props['height']) ?? 0 };
+    }
+    const name = str(props['name']);
+    if (name === null) return square(font.lineHeight);
+    const asset = this.env.assets?.images[name];
+    if (!asset) return square(UNKNOWN_IMAGE_SIDE);
+    if (asset.kind === 'symbol') return square(font.lineHeight);
+    return { width: num(asset.width) ?? 0, height: num(asset.height) ?? 0 };
+  }
+
   private measureSpacer(node: LayoutNode, ctx: Context, p: Proposal): Size {
     const min = num(node.props['minLength']);
     if (ctx.stackAxis === null) {
@@ -1280,19 +1511,31 @@ export class LayoutPass {
 
   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;
+    if (!this.buttonIsBordered(node)) return label ? this.measure(label, this.childContext(node, ctx), p) : ZERO;
+    const cctx = this.borderedLabelContext(node, ctx);
+    const { padV, padH, minHeight } = this.borderedMetrics(node);
     const inner: Proposal = {
-      width: shrink(p.width, 2 * BORDERED_PAD_H),
-      height: shrink(p.height, 2 * BORDERED_PAD_V),
+      width: shrink(p.width, 2 * padH),
+      height: shrink(p.height, 2 * padV),
     };
     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),
+      width: size.width + 2 * padH,
+      height: Math.max(minHeight, size.height + 2 * padV),
     };
   }
 
+  private borderedMetrics(node: LayoutNode): { padV: number; padH: number; minHeight: number; textStyle?: string } {
+    return BORDERED_SIZES[str(node.props['controlSize']) ?? ''] ?? { padV: BORDERED_PAD_V, padH: BORDERED_PAD_H, minHeight: BORDERED_MIN_HEIGHT };
+  }
+
+  /** A bordered button's label context: a small or mini one sets a smaller text style. */
+  private borderedLabelContext(node: LayoutNode, ctx: Context): Context {
+    const cctx = this.childContext(node, ctx);
+    const textStyle = this.borderedMetrics(node).textStyle;
+    return textStyle ? { ...cctx, font: resolveFont({ textStyle }, cctx.font, this.env) } : cctx;
+  }
+
   private toggleLabelProposal(p: Proposal): Proposal {
     return { width: shrink(p.width, SWITCH_WIDTH + TOGGLE_GAP), height: p.height };
   }
@@ -1325,7 +1568,11 @@ export class LayoutPass {
     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;
+    if (first === 'medium') return Math.min(SHEET_MEDIUM_HEIGHT, screen.height - safeArea.top - SHEET_TOP_GAP);
+    // `.height(h)` / `.fraction(f)` detents, at most as tall as `large`.
+    const large = screen.height - safeArea.top - SHEET_TOP_GAP;
+    if (first?.startsWith('height:')) return Math.min(large, Number(first.slice(7)) || large);
+    if (first?.startsWith('fraction:')) return Math.min(large, screen.height * (Number(first.slice(9)) || 1));
     // Phase 8: `full` (`.fullScreenCover`) covers the whole screen.
     if (first === 'full') return screen.height;
     return screen.height - safeArea.top - SHEET_TOP_GAP;
@@ -1337,6 +1584,19 @@ export class LayoutPass {
     return Array.isArray(detents) && str(detents[0]) === 'full';
   }
 
+  /** iOS 26: a sheet whose first detent is a partial one floats inset from the screen edges. */
+  private sheetFloats(node: LayoutNode): boolean {
+    const detents = node.props['detents'];
+    const first = Array.isArray(detents) ? str(detents[0]) : null;
+    return first === 'medium' || first?.startsWith('height:') === true || first?.startsWith('fraction:') === true;
+  }
+
+  /** iOS 26 shows the grabber only for a sheet with more than one detent. */
+  private sheetHasGrabber(node: LayoutNode): boolean {
+    const detents = node.props['detents'];
+    return Array.isArray(detents) && detents.length > 1 && !this.sheetIsFull(node);
+  }
+
   // -------------------------------------------------------------------------
   // Picker (Phase 4)
   // -------------------------------------------------------------------------
@@ -1463,11 +1723,15 @@ export class LayoutPass {
    * 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,
+   * with *finite* flexibility: infinitely flexible children (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.
+   * `Spacer` never makes its sibling text wrap. Spacers come after those: they
+   * reserve their minimum while the other infinitely flexible children share,
+   * and take what is left (iOS gives `HStack { VStack { … }.frame(maxWidth:
+   * .infinity); Spacer() }`'s stack all but the spacer's 8 points, where an
+   * even split gave Ice Cubes' quoted posts half their card). With a `null`
+   * axis proposal every child is proposed `null` and the stack sizes to the sum.
    */
   private layoutStack(
     children: readonly LayoutNode[],
@@ -1494,6 +1758,7 @@ export class LayoutPass {
       const mins = new Array<number>(n);
       const flex = new Array<number>(n);
       const priorities = new Array<number>(n);
+      const spacers = children.map(isSpacer);
       const minProposal = makeProposal(axis, 0, cross);
       const maxProposal = makeProposal(axis, Infinity, cross);
       for (let i = 0; i < n; i++) {
@@ -1511,6 +1776,7 @@ export class LayoutPass {
         const fa = flex[a] as number;
         const fb = flex[b] as number;
         if (fa !== fb) return fa < fb ? -1 : 1;
+        if (spacers[a] !== spacers[b]) return spacers[a] ? 1 : -1;
         return a - b;
       });
 
@@ -1527,10 +1793,15 @@ export class LayoutPass {
         let finiteLeft = 0;
         let infiniteLeft = 0;
         let infiniteMin = 0;
+        let spacersLeft = 0;
+        let spacerMin = 0;
         for (let k = i; k < end; k++) {
           const index = order[k] as number;
           if (Number.isFinite(flex[index])) finiteLeft++;
-          else {
+          else if (spacers[index]) {
+            spacersLeft++;
+            spacerMin += mins[index] as number;
+          } else {
             infiniteLeft++;
             infiniteMin += mins[index] as number;
           }
@@ -1538,16 +1809,21 @@ export class LayoutPass {
         for (let k = i; k < end; k++) {
           const index = order[k] as number;
           const isInfinite = !Number.isFinite(flex[index]);
+          const isSpacerChild = isInfinite && spacers[index] === true;
           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;
+          else if (isSpacerChild) offer = Math.max(0, remaining - lowerMin) / spacersLeft;
+          else if (isInfinite) offer = Math.max(0, remaining - lowerMin - spacerMin) / infiniteLeft;
+          else offer = Math.max(0, remaining - lowerMin - infiniteMin - spacerMin) / 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) {
+          if (isSpacerChild) {
+            spacersLeft--;
+            spacerMin -= mins[index] as number;
+          } else if (isInfinite) {
             infiniteLeft--;
             infiniteMin -= mins[index] as number;
           } else finiteLeft--;
@@ -1582,12 +1858,27 @@ export class LayoutPass {
     const anchors = alignmentAnchors(alignment);
     const crossAnchor = axis === 'horizontal' ? anchors[1] : anchors[0];
     const crossSize = crossOf(size, axis);
+    // `.alignmentGuide`: the children's guides for the stack's alignment
+    // line up. A child's guide is its explicit one, else the default (none,
+    // half or all of its cross size); the line is the stack's own guide, or
+    // further along when a guide reaches past it (the children move with it).
+    const guideAxis = axis === 'horizontal' ? 'vertical' : 'horizontal';
+    const guideName = guideNames(anchors)[axis === 'horizontal' ? 1 : 0];
+    const guides = children.map((child, i) => {
+      const explicit = explicitGuide(child, guideAxis, guideName);
+      return explicit ? guideValue(explicit, plan.childSizes[i] as Size) : null;
+    });
+    const line = guides.some((g) => g !== null) && Number.isFinite(crossSize)
+      ? Math.max(crossSize * crossAnchor, ...guides.filter((g): g is number => g !== null))
+      : null;
     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);
+      const crossOffset = line === null
+        ? safeOffset(crossSize, crossOf(childSize, axis), crossAnchor)
+        : line - (guides[i] ?? 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;
@@ -1606,6 +1897,13 @@ export class LayoutPass {
    * fixed 44×44 so the placeholder is visible.
    */
   private measureImage(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    if (typeof node.props['url'] === 'string' || typeof node.props['bitmap'] === 'object') {
+      // Phase 13: a remote image carries its own point size, as does a bitmap.
+      const width = num(node.props['width']) ?? 0;
+      const height = num(node.props['height']) ?? 0;
+      if (node.props['resizable'] !== true) return { width, height };
+      return { width: p.width ?? width, height: p.height ?? height };
+    }
     const name = str(node.props['name']);
     if (name === null) return square(ctx.font.lineHeight * ctx.imageScale);
     const asset = this.env.assets?.images[name];
@@ -1815,6 +2113,8 @@ export class LayoutPass {
       // sections are full width. `plain` also drops the top/bottom gaps and
       // the space between sections.
       const listStyle = str(node.props['style']) ?? 'insetGrouped';
+      // `.environment(\.defaultMinListRowHeight, _)`; 52 by default.
+      const minRowHeight = num(node.props['minRowHeight']) ?? LIST_ROW_MIN_HEIGHT;
       const inset = listStyle === 'insetGrouped' ? LIST_INSET : 0;
       const plain = listStyle === 'plain';
       const listTop = plain ? 0 : LIST_TOP;
@@ -1824,7 +2124,13 @@ export class LayoutPass {
       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));
+      // iOS 26: headers in the headline size (semibold), footers in footnote.
       const headerFont = makeFont(
+        'system',
+        textStyleSize('headline', this.env.dynamicTypeSize),
+        600,
+      );
+      const footerFont = makeFont(
         'system',
         textStyleSize('footnote', this.env.dynamicTypeSize),
         400,
@@ -1834,49 +2140,78 @@ export class LayoutPass {
       // 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[] }[] = [];
+      // Group consecutive plain rows into an implicit section. A section's
+      // view header and footer are not rows.
+      type GroupSource = { section: LayoutNode | null; rows: LayoutNode[]; headerView: LayoutNode | null; footerView: LayoutNode | null };
+      const groupsSource: GroupSource[] = [];
       for (const child of node.children) {
         if (child.kind === 'section') {
-          groupsSource.push({ section: child, rows: child.children });
+          const rows = child.children.filter((row) => row.kind !== 'sectionheader' && row.kind !== 'sectionfooter');
+          const headerView = child.children.find((row) => row.kind === 'sectionheader') ?? null;
+          const footerView = child.children.find((row) => row.kind === 'sectionfooter') ?? null;
+          groupsSource.push({ section: child, rows, headerView, footerView });
         } else {
           const last = groupsSource[groupsSource.length - 1];
           if (last && last.section === null) last.rows.push(child);
-          else groupsSource.push({ section: null, rows: [child] });
+          else groupsSource.push({ section: null, rows: [child], headerView: null, footerView: null });
         }
       }
+      // View headers and footers: the content width, the header's and the
+      // footer's font.
+      const headerCtx: Context = { ...rowCtx, listRow: false, stackAxis: null, font: headerFont };
+      const footerCtx: Context = { ...headerCtx, font: footerFont };
+      const supplement = (view: LayoutNode | null, y: number, ctx: Context): ListSupplementPlan | null => {
+        if (!view) return null;
+        const proposal: Proposal = { width: contentWidth, height: null };
+        const size = this.measure(view, ctx, proposal);
+        return { node: view, ctx, proposal, rect: { x: contentX, y, width: size.width, height: size.height } };
+      };
 
       const groups: ListGroupPlan[] = [];
       let y = listTop;
-      const makeText = (text: string): { layout: TextLayout; size: Size } => {
-        const wrapped = wrapText(text.toUpperCase(), headerFont, contentWidth, null, this.measurer);
+      const makeText = (text: string, font: ResolvedFont): { layout: TextLayout; size: Size } => {
+        const wrapped = wrapText(text, font, 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 },
+          layout: { font, lines: wrapped.lines, alignment: 'leading', truncated: false },
+          size: { width: wrapped.width, height: wrapped.lines.length * font.lineHeight },
         };
       };
       for (let g = 0; g < groupsSource.length; g++) {
-        const source = groupsSource[g] as { section: LayoutNode | null; rows: LayoutNode[] };
+        const source = groupsSource[g] as GroupSource;
         if (g > 0) y += sectionGap;
         const top = y;
         let header: ListGroupPlan['header'] = null;
         let footer: ListGroupPlan['footer'] = null;
+        // A header sits in the gap above its card (from LIST_HEADER_LIFT
+        // into it); the card then starts LIST_HEADER_GAP below the header.
+        const headerLift = plain ? 0 : LIST_HEADER_LIFT;
+        const headerView = supplement(source.headerView, y - headerLift, headerCtx);
+        if (headerView && headerView.rect.height > 0) y += headerView.rect.height + LIST_HEADER_GAP - headerLift;
         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 { layout, size } = makeText(headerText, headerFont);
+          const headerY = headerView && headerView.rect.height > 0 ? y : y - headerLift;
+          header = { rect: { x: contentX, y: headerY, width: contentWidth, height: size.height }, layout };
+          y = headerY + 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
+          if (rowNode.kind === 'lazyspacer') {
+            // Lazy rows not built yet: a row of no height, without a cell.
+            const rect: Rect = { x: cardX, y, width: cardWidth, height: 0 };
+            rows.push({ node: rowNode, proposal: { width: cardWidth, height: 0 }, contentSize: ZERO, row: rect, content: rect, badge: null, edit: null });
+            continue;
+          }
+          // A menu or inline picker already reports its row height (44 for
+          // a menu, 44 per option inline); other rows (a segmented picker
+          // too) get the 13px 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 unwrappedRow = unwrapStyled(rowNode);
+          const defaultVPad = unwrappedRow.kind === 'picker' && str(unwrappedRow.props['style']) !== 'segmented' ? 0 : LIST_ROW_VPAD;
           const insets: EdgeInsets = hints.insets ?? {
             top: defaultVPad,
             leading: LIST_CELL_PADDING,
@@ -1891,7 +2226,7 @@ export class LayoutPass {
           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 rowHeight = Math.max(minRowHeight, contentSize.height + insets.top + insets.bottom);
           const row: Rect = { x: cardX, y, width: cardWidth, height: rowHeight };
           rows.push({
             node: rowNode,
@@ -1912,21 +2247,27 @@ export class LayoutPass {
                   }
                 : null,
             edit: listRow ? { listRow, control: { x: cardX, y, width: LIST_EDIT_CONTROL_WIDTH, height: rowHeight } } : null,
+            separatorHidden: hints.separatorHidden,
           });
           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);
+          const { layout, size } = makeText(footerText, footerFont);
           footer = { rect: { x: contentX, y, width: contentWidth, height: size.height }, layout };
           y += size.height;
         }
+        let footerView = supplement(source.footerView, y + LIST_FOOTER_GAP, footerCtx);
+        if (footerView && footerView.rect.height > 0) y += LIST_FOOTER_GAP + footerView.rect.height;
+        else if (footerView) footerView = { ...footerView, rect: { ...footerView.rect, y } };
         groups.push({
           section: source.section,
           frame: { x: cardX, y: top, width: cardWidth, height: y - top },
           header,
           footer,
+          headerView,
+          footerView,
           card,
           rows,
         });
@@ -1944,15 +2285,21 @@ export class LayoutPass {
   // 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);
+  /**
+   * Phase 9: placed before, same proposal, same origin, nothing in the
+   * subtree invalidated since: the last run's output still holds.
+   */
+  private placedAlready(node: LayoutNode, p: Proposal, x: number, y: number): boolean {
     const last = this.placed.get(node);
-    if (last && last.key === key && last.x === x && last.y === y) {
+    return last !== undefined && last.key === proposalKey(p) && last.x === x && last.y === y;
+  }
+
+  place(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): void {
+    if (this.placedAlready(node, p, x, y)) {
       this.stats.skipped += 1;
       return;
     }
+    const key = proposalKey(p);
     this.placed.set(node, { key, x, y });
     this.stats.placed += 1;
     if (node.id >= 0) {
@@ -1979,11 +2326,17 @@ export class LayoutPass {
       case 'image':
         if (node.id >= 0) this.fonts.set(node.id, scaledFont(ctx.font, ctx.imageScale));
         return;
+      case 'textfield':
+        // A vertical field draws its text in the context font (one-line fields in the body font).
+        if (node.props['axis'] === 'vertical' && node.id >= 0) this.fonts.set(node.id, ctx.font);
+        return;
       case 'spacer':
+      case 'lazyspacer':
       case 'divider':
-      case 'textfield':
       case 'color':
       case 'shape':
+      case 'canvas':
+      case 'video':
         return;
       case 'vstack':
       case 'hstack': {
@@ -1998,7 +2351,7 @@ export class LayoutPass {
         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);
+          const { dx, dy } = alignChild(size, childSize, alignment, child);
           this.place(child, cctx, p, x + dx, y + dy);
         }
         return;
@@ -2038,7 +2391,7 @@ export class LayoutPass {
             );
             return;
           }
-          const { dx, dy } = alignIn(box, plan.childSize, plan.alignment);
+          const { dx, dy } = alignChild(box, plan.childSize, plan.alignment, child);
           this.place(child, cctx, plan.childProposal, x + box.x + dx, y + box.y + dy);
         }
         return;
@@ -2050,13 +2403,15 @@ export class LayoutPass {
           this.place(label, cctx, p, x, y);
           return;
         }
+        const metrics = this.borderedMetrics(node);
+        const labelCtx = this.borderedLabelContext(node, ctx);
         const inner: Proposal = {
-          width: shrink(p.width, 2 * BORDERED_PAD_H),
-          height: shrink(p.height, 2 * BORDERED_PAD_V),
+          width: shrink(p.width, 2 * metrics.padH),
+          height: shrink(p.height, 2 * metrics.padV),
         };
-        const labelSize = this.measure(label, cctx, inner);
+        const labelSize = this.measure(label, labelCtx, inner);
         const { dx, dy } = alignIn(size, labelSize, 'center');
-        this.place(label, cctx, inner, x + dx, y + dy);
+        this.place(label, labelCtx, 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, {
@@ -2124,14 +2479,19 @@ export class LayoutPass {
         // 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);
+        // Under a large title that scrolls with it, the content starts below it.
+        const titleRect = axes.vertical ? this.titleInsets.get(node) : undefined;
         const content: Rect = {
           x: x + dx,
-          y: y + dy,
+          y: y + dy + (titleRect?.height ?? 0),
           width: plan.contentSize.width,
           height: plan.contentSize.height,
         };
         const covered = this.coveredBottom(ctx, x, y, size);
-        this.setChrome(node, covered ? { content, bottomInset: covered } : { content });
+        const scrollChrome: Record<string, Rect> = { content };
+        if (covered) scrollChrome['bottomInset'] = covered;
+        if (titleRect) scrollChrome['largeTitle'] = titleRect;
+        this.setChrome(node, scrollChrome);
         if (plan.content) this.place(plan.content, cctx, plan.contentProposal, content.x, content.y);
         return;
       }
@@ -2208,7 +2568,7 @@ export class LayoutPass {
           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);
+          const { dx, dy } = alignChild(size, decorationSize, alignment, decoration);
           this.place(decoration, cctx, proposal, x + dx, y + dy);
         }
         return;
@@ -2271,9 +2631,16 @@ export class LayoutPass {
   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 });
+    // Under a large title that scrolls with it, the rows start below it.
+    const titleRect = this.titleInsets.get(node);
+    const listChrome: Record<string, Rect> = {};
+    if (covered) listChrome['bottomInset'] = covered;
+    if (titleRect) listChrome['largeTitle'] = titleRect;
+    if (Object.keys(listChrome).length > 0) this.setChrome(node, listChrome);
+    const inset = titleRect?.height ?? 0;
+    if (node.id >= 0) this.contentSizes.set(node.id, { width: plan.contentSize.width, height: plan.contentSize.height + inset });
+    y += inset;
     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) {
@@ -2289,6 +2656,9 @@ export class LayoutPass {
         }
         this.setFrame(group.section, x + group.frame.x, y + group.frame.y, group.frame);
         this.setChrome(group.section, chrome);
+        for (const view of [group.headerView, group.footerView]) {
+          if (view) this.place(view.node, view.ctx, view.proposal, x + view.rect.x, y + view.rect.y);
+        }
         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);
@@ -2297,6 +2667,10 @@ export class LayoutPass {
       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) };
+        // `.listRowSeparator(.hidden)`: flags the renderer turns into data
+        // attributes on the row element (its separator line is CSS).
+        if (row.separatorHidden?.top) chrome['separatorTopHidden'] = offset(row.row);
+        if (row.separatorHidden?.bottom) chrome['separatorBottomHidden'] = 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 });
@@ -2307,42 +2681,72 @@ export class LayoutPass {
           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);
+        const rowX = x + row.content.x;
+        const rowY = y + row.content.y;
+        // A row that is skipped keeps the chrome it set itself when it was
+        // placed (a link's chevron and label); only the list's keys are new.
+        const own = this.placedAlready(row.node, row.proposal, rowX, rowY) && row.node.id >= 0
+          ? this.chrome.get(row.node.id)
+          : undefined;
+        this.setChrome(row.node, own ? { ...own, ...chrome } : chrome);
+        this.place(row.node, rowCtx, row.proposal, rowX, rowY);
+        // iOS 26: the separator under a row starts where its first text
+        // starts (after a Label's icon), else at the row's content.
+        const placed = row.node.id >= 0 ? this.chrome.get(row.node.id) : undefined;
+        if (placed) {
+          const textX = this.firstTextX(row.node);
+          const leading = (textX ?? rowX) - (x + row.row.x);
+          placed['separator'] = { x: Math.max(0, leading), y: 0, width: 0, height: 0 };
+        }
       }
     }
   }
 
+  /** The x of the first text (in tree order) placed under `node`, if any. */
+  private firstTextX(node: LayoutNode): number | null {
+    if (node.kind === 'text' && node.id >= 0) {
+      const frame = this.frames.get(node.id);
+      if (frame && frame.width > 0) return frame.x;
+    }
+    for (const child of node.children) {
+      const x = this.firstTextX(child);
+      if (x !== null) return x;
+    }
+    return null;
+  }
+
   /**
-   * 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
+   * The navigation bar is the status bar plus a 44 row (plus 62 for a large
+   * title); a Phase 6 `searchfield` is a capsule floating above the bottom
+   * (iOS 26); 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 in iOS 26 glass
+   * capsules (44-tall slots, groups 8 apart) 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 statusBar = y <= 0 ? safeArea.top : (cctx.barInset ?? 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 searchMargin = reachesBottom ? SEARCH_BOTTOM_MARGIN : SEARCH_BOTTOM_MARGIN_INSET;
+    const searchBottom = parts.search ? SEARCH_BOTTOM_HEIGHT + searchMargin : 0;
+    const contentTop = barHeight + largeHeight;
     const content: Rect = {
       x,
       y: y + contentTop,
       width: size.width,
-      height: Math.max(0, size.height - contentTop - bottomBarHeight),
+      height: Math.max(0, size.height - contentTop - Math.max(bottomBarHeight, searchBottom)),
     };
     const chrome: Record<string, Rect> = {
       bar: { x, y, width: size.width, height: barHeight },
@@ -2352,9 +2756,9 @@ export class LayoutPass {
     if (parts.search) {
       chrome['searchField'] = {
         x: x + SEARCH_FIELD_MARGIN_H,
-        y: y + barHeight + largeHeight + SEARCH_FIELD_PAD_V,
+        y: y + size.height - searchBottom,
         width: Math.max(0, size.width - 2 * SEARCH_FIELD_MARGIN_H),
-        height: SEARCH_FIELD_HEIGHT,
+        height: SEARCH_BOTTOM_HEIGHT,
       };
     }
     if (bottomBarHeight > 0) {
@@ -2371,60 +2775,56 @@ export class LayoutPass {
       toolbar: LayoutNode;
       placement: string;
       sizes: Size[];
+      /** Leading and trailing groups: each item's glass slot width. */
+      slots: number[] | null;
       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 placement = str(toolbar.props['placement']) ?? 'trailing';
+      if (placement === 'leading' || placement === 'trailing') {
+        const slots = sizes.map((s) => Math.max(NAV_GLASS_SIZE, s.width + 2 * NAV_GLASS_PAD_H));
+        return { toolbar, placement, sizes, slots, total: slots.reduce((sum, w) => sum + w, 0) };
+      }
       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 };
+      return { toolbar, placement, sizes, slots: null, total };
     });
     const groupWidth = (placement: string): number =>
-      groups.filter((g) => g.placement === placement).reduce((sum, g) => sum + g.total + NAV_ITEM_SPACING, 0);
+      groups.filter((g) => g.placement === placement).reduce((sum, g) => sum + g.total + NAV_GROUP_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 = '';
+    // Back button, iOS 26: the chevron alone in a glass circle (the previous
+    // title no longer shows).
+    const 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 };
+      chrome['back'] = { x: x + NAV_ITEM_MARGIN, y: rowY, width: NAV_GLASS_SIZE, height: NAV_GLASS_SIZE };
     }
 
     // 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 leadingCursor = back ? back.x + back.width + NAV_GROUP_SPACING : 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;
+        // In a glass slot the item is centered in it.
+        const slot = group.slots?.[i];
+        const itemX = slot !== undefined ? cursor + (slot - itemSize.width) / 2 : cursor;
+        this.place(item, itemCtx, { width: null, height: null }, itemX, top + (rowHeight - itemSize.height) / 2);
+        cursor += (slot ?? 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;
+          placeGroup(group, leadingCursor, rowY, NAV_BAR_HEIGHT, 0);
+          leadingCursor += group.total + NAV_GROUP_SPACING;
           break;
         }
         case 'principal': {
@@ -2449,25 +2849,38 @@ export class LayoutPass {
         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;
+          placeGroup(group, startX, rowY, NAV_BAR_HEIGHT, 0);
+          trailingEdge = startX - NAV_GROUP_SPACING;
           break;
         }
       }
     }
     if (parts.search) {
+      // The field is the whole capsule (its own measure is a 36pt field).
       const field = chrome['searchField'] as Rect;
       this.place(parts.search, cctx, { width: field.width, height: field.height }, field.x, field.y);
+      this.setFrame(parts.search, field.x, field.y, { width: field.width, height: field.height });
     }
 
     // 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;
+    // whatever the back button and the bar items occupy on either side. Its
+    // width is rounded up to whole pixels: snapping floors both edges, which
+    // takes up to a pixel off a fractional width at a fractional origin, and
+    // the title truncates with an ellipsis ("Animati…") when its box is any
+    // narrower than its text.
+    const scroller = parts.content ? unwrapStyled(parts.content) : null;
+    const titleScrolls =
+      large &&
+      scroller !== null &&
+      (scroller.kind === 'list' || (scroller.kind === 'scrollview' && this.scrollAxes(scroller).vertical));
+    // A large title that scrolls away collapses into the inline title, which
+    // the renderer shows once it has (`data-sb-collapsed`).
+    if ((!large || titleScrolls) && !principal) {
+      const leftUsed = Math.max(back ? back.x + back.width - x : 0, leadingWidth > 0 ? leadingCursor - NAV_GROUP_SPACING - x : 0);
+      const rightUsed = trailingWidth > 0 ? x + size.width - (trailingEdge + NAV_GROUP_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);
+      const titleWidth = Math.min(Math.ceil(this.measurer.measureWidth(title, titleFont) - 0.001), Math.floor(size.width * 0.56), Math.floor(available));
       chrome['title'] = { x: x + (size.width - titleWidth) / 2, y: rowY, width: titleWidth, height: NAV_BAR_HEIGHT };
     }
     this.setChrome(node, chrome);
@@ -2498,8 +2911,17 @@ export class LayoutPass {
       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') {
+    const contentCtx: Context = { ...cctx, safeTop: content.y, barInset: 0 };
+    if (scroller && titleScrolls) {
+      // The scroll view starts under the bar; its content starts under the
+      // large title, which moves with it.
+      const top = content.y - largeHeight;
+      this.titleInsets.set(scroller, chrome['largeTitle'] as Rect);
+      this.place(child, contentCtx, { width: content.width, height: content.height + largeHeight }, content.x, top);
+      return;
+    }
+    if (scroller) this.titleInsets.delete(scroller);
+    if (scroller && (scroller.kind === 'list' || scroller.kind === 'scrollview')) {
       this.place(child, contentCtx, { width: content.width, height: content.height }, content.x, content.y);
       return;
     }
@@ -2511,25 +2933,38 @@ export class LayoutPass {
   }
 
   /**
-   * 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`.
+   * The tab bar (iOS 26) is a glass capsule floating over the bottom of the
+   * content (TAB_BAR_* above), with one equal-width item per tab; what it
+   * covers (the capsule and the gap under it) is the content's bottom inset.
+   * 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 { screen } = this.env;
+    const marginBottom = y + size.height >= screen.height - EPSILON ? TAB_BAR_MARGIN_BOTTOM : TAB_BAR_MARGIN_BOTTOM_INSET;
+    const barHeight = Math.min(size.height, TAB_BAR_HEIGHT + marginBottom);
+    const capsuleHeight = Math.min(TAB_BAR_HEIGHT, barHeight);
+    const bar: Rect = {
+      x: x + TAB_BAR_MARGIN_H,
+      y: y + size.height - barHeight,
+      width: Math.max(0, size.width - 2 * TAB_BAR_MARGIN_H),
+      height: capsuleHeight,
+    };
     const chrome: Record<string, Rect> = {
       bar,
       content: { x, y, width: size.width, height: size.height - barHeight },
     };
     const tabs = node.children;
     const n = tabs.length;
+    const inner = Math.max(0, bar.width - 2 * TAB_BAR_ITEM_INSET);
     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) };
+      const itemWidth = inner / n;
+      chrome[`item${i}`] = {
+        x: bar.x + TAB_BAR_ITEM_INSET + i * itemWidth,
+        y: bar.y + TAB_BAR_ITEM_INSET,
+        width: itemWidth,
+        height: Math.max(0, capsuleHeight - 2 * TAB_BAR_ITEM_INSET),
+      };
     }
     this.setChrome(node, chrome);
     const selected = readSelected(node, n);
@@ -2775,9 +3210,9 @@ export class LayoutPass {
       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,
+        y: rowY + (SLIDER_HEIGHT - SLIDER_THUMB_HEIGHT) / 2,
         width: SLIDER_THUMB,
-        height: SLIDER_THUMB,
+        height: SLIDER_THUMB_HEIGHT,
       },
     });
   }
@@ -2847,9 +3282,10 @@ export class LayoutPass {
   }
 
   /**
-   * `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.
+   * `alert` style (iOS 26): a card centered in the safe area with the title
+   * (headline) and the message (subheadline), leading-aligned, and capsule
+   * buttons: two side by side (a `cancel` one first), otherwise stacked; 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
@@ -2865,40 +3301,45 @@ export class LayoutPass {
     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 block = (text: string, font: ResolvedFont, width: number, alignment: 'center' | 'leading'): { 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 },
+        layout: { font, lines: wrapped.lines, alignment, truncated: wrapped.truncated ?? false },
         height: wrapped.lines.length * font.lineHeight,
       };
     };
+    const centered = (text: string, font: ResolvedFont, width: number) => block(text, font, width, 'center');
 
     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);
+      const messageFont = resolveFont({ textStyle: 'subheadline' }, 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;
+        const b = block(title, titleFont, textWidth, 'leading');
+        titleBlock = { ...b, top: h };
+        h += b.height;
       }
       if (message.length > 0) {
         if (titleBlock) h += ALERT_TITLE_GAP;
-        const block = centered(message, messageFont, textWidth);
-        messageBlock = { ...block, top: h };
-        h += block.height;
+        const b = block(message, messageFont, textWidth, 'leading');
+        messageBlock = { ...b, top: h };
+        h += b.height;
       }
-      h += ALERT_PAD_BOTTOM;
+      h += ALERT_BUTTONS_GAP;
       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 };
+      h += rows * ALERT_BUTTON_HEIGHT + (rows - 1) * ALERT_BUTTON_SPACING + ALERT_PAD_BOTTOM;
+      // Centered in the safe area, as iOS does.
+      const { safeArea: inset } = this.env;
+      const top = y + (y <= 0 ? inset.top : 0);
+      const bottom = y + size.height - (y + size.height >= this.env.screen.height - EPSILON ? inset.bottom : 0);
+      const card: Rect = { x: x + (size.width - cardWidth) / 2, y: top + (bottom - top - 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 };
@@ -2909,18 +3350,28 @@ export class LayoutPass {
         texts['message'] = messageBlock.layout;
       }
       const buttonsTop = card.y + headerHeight;
+      const buttonsX = card.x + ALERT_BUTTON_INSET;
+      const buttonsWidth = Math.max(0, cardWidth - 2 * ALERT_BUTTON_INSET);
       if (buttons.length === 0) {
-        chrome['ok'] = { x: card.x, y: buttonsTop, width: cardWidth, height: ALERT_BUTTON_HEIGHT };
+        chrome['ok'] = { x: buttonsX, y: buttonsTop, width: buttonsWidth, 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 };
+        // A `cancel` button goes first (leading), as iOS orders them.
+        const ordered = roleOf(buttons[1] as LayoutNode) === 'cancel' ? [buttons[1], buttons[0]] : [buttons[0], buttons[1]];
+        const half = (buttonsWidth - ALERT_BUTTON_SPACING) / 2;
+        ordered.forEach((button, slot) => {
+          const i = buttons.indexOf(button as LayoutNode);
+          const rect: Rect = { x: buttonsX + slot * (half + ALERT_BUTTON_SPACING), y: buttonsTop, width: half, height: ALERT_BUTTON_HEIGHT };
           chrome[`button${i}`] = rect;
-          this.placeAlertButton(button, cctx, rect);
+          this.placeAlertButton(button as LayoutNode, 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 };
+          const rect: Rect = {
+            x: buttonsX,
+            y: buttonsTop + i * (ALERT_BUTTON_HEIGHT + ALERT_BUTTON_SPACING),
+            width: buttonsWidth,
+            height: ALERT_BUTTON_HEIGHT,
+          };
           chrome[`button${i}`] = rect;
           this.placeAlertButton(button, cctx, rect);
         });
@@ -2943,7 +3394,7 @@ export class LayoutPass {
           h += block.height;
         }
         if (message.length > 0) {
-          if (titleBlock) h += ALERT_TITLE_GAP;
+          if (titleBlock) h += DIALOG_TITLE_GAP;
           const block = centered(message, messageFont, textWidth);
           messageBlock = { ...block, top: h };
           h += block.height;
@@ -2961,7 +3412,7 @@ export class LayoutPass {
         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);
+        this.placeAlertButton(cancel, buttonCtx, cancelCard, true);
         cardBottom = cancelCard.y - DIALOG_CARD_GAP;
       }
       const card: Rect = { x: cardX, y: cardBottom - h, width: cardWidth, height: h };
@@ -2981,7 +3432,7 @@ export class LayoutPass {
       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.placeAlertButton(button, buttonCtx, rect, true);
       });
     }
     this.setChrome(node, chrome);
@@ -2989,10 +3440,11 @@ export class LayoutPass {
   }
 
   /** 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';
+  private placeAlertButton(child: LayoutNode, ctx: Context, rect: Rect, boldCancel = false): void {
+    const proposal: Proposal = { width: Math.max(0, rect.width - 2 * DIALOG_LABEL_INSET), height: rect.height };
+    // An action sheet's `cancel` button is bold: measure (and so draw) its
+    // label semibold. iOS 26 alerts draw it regular.
+    const cancel = boldCancel && str(unwrapStyled(child).props['role']) === 'cancel';
     const inherited = this.childContext(child, ctx);
     const cctx: Context = {
       ...inherited,
@@ -3017,9 +3469,16 @@ export class LayoutPass {
   }
 
   private placeSheet(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
-    // Phase 8: a `full` sheet (`.fullScreenCover`) has no grabber row.
+    // A grabber gets its row; without one the content starts a little below
+    // the sheet's top (iOS 26), except in a `full` one (Phase 8,
+    // `.fullScreenCover`). A navigation stack fills the sheet from its top
+    // instead, its bar taking that room (`barInset`), so its background
+    // reaches the sheet's edge; a list or scroll view fills it below the
+    // grabber row.
+    const grabber = this.sheetHasGrabber(node);
+    const floats = this.sheetFloats(node);
     const full = this.sheetIsFull(node);
-    const grabberRow = full ? 0 : SHEET_GRABBER_ROW;
+    const grabberRow = grabber ? SHEET_GRABBER_ROW : full ? 0 : SHEET_CONTENT_TOP;
     const content: Rect = {
       x,
       y: y + grabberRow,
@@ -3027,7 +3486,8 @@ export class LayoutPass {
       height: Math.max(0, size.height - grabberRow),
     };
     const chrome: Record<string, Rect> = { content };
-    if (!full) {
+    if (floats) chrome['floating'] = { x, y, width: size.width, height: size.height };
+    if (grabber) {
       chrome['grabber'] = {
         x: x + (size.width - SHEET_GRABBER.width) / 2,
         y: y + SHEET_GRABBER_TOP,
@@ -3040,8 +3500,14 @@ export class LayoutPass {
     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);
+    if (kind === 'navstack') {
+      this.place(child, { ...cctx, barInset: grabberRow }, { width: size.width, height: size.height }, x, y);
+      return;
+    }
+    if (kind === 'list' || kind === 'scrollview') {
+      // A scrolling view fills the sheet below the grabber row, if any.
+      const top = grabber ? SHEET_GRABBER_ROW : 0;
+      this.place(child, cctx, { width: size.width, height: size.height - top }, x, y + top);
       return;
     }
     const childSize = this.measure(child, cctx, proposal);
@@ -3389,7 +3855,9 @@ export class LayoutPass {
   /**
    * 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.
+   * the `caption` text style) with a 4px gap. A circular gauge is a 58-point
+   * square, whatever the proposal, with the current value label (else the
+   * label) centered in the ring, proposed the square inside it.
    */
   private gaugePlan(node: LayoutNode, ctx: Context, p: Proposal): GaugePlan {
     return this.plan(node, p, () => {
@@ -3399,7 +3867,23 @@ export class LayoutPass {
       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 style = str(node.props['style']);
+      if (style === 'accessoryCircular' || style === 'accessoryCircularCapacity') {
+        const center = current ?? label;
+        const inner = Math.floor(GAUGE_RING_SIZE * GAUGE_RING_INNER);
+        const centerSize = center ? this.measure(center, labelCtx, { width: inner, height: inner }) : ZERO;
+        return { size: square(GAUGE_RING_SIZE), label, current, labelSize: ZERO, currentSize: ZERO, labelRow: 0, labelCtx, ring: { center, centerSize } };
+      }
       const proposal: Proposal = { width, height: null };
+      if (style === 'progress') {
+        // A ProgressView: the label in the context font above the bar, the
+        // current value label (caption) under it.
+        const labelSize = label ? this.measure(label, cctx, proposal) : ZERO;
+        const currentSize = current ? this.measure(current, labelCtx, proposal) : ZERO;
+        const labelRow = label ? labelSize.height + PROGRESS_LABEL_GAP : 0;
+        const height = labelRow + GAUGE_BAR_HEIGHT + (current ? PROGRESS_VALUE_GAP + currentSize.height : 0);
+        return { size: { width, height }, label, current, labelSize, currentSize, labelRow, labelCtx, labelOwnCtx: cctx };
+      }
       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;
@@ -3410,7 +3894,30 @@ export class LayoutPass {
 
   private placeGauge(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number, size: Size): void {
     const plan = this.gaugePlan(node, ctx, p);
+    if (plan.ring) {
+      const { center, centerSize } = plan.ring;
+      const inner = Math.floor(GAUGE_RING_SIZE * GAUGE_RING_INNER);
+      if (center) {
+        const { dx, dy } = alignIn(size, centerSize, 'center');
+        this.place(center, plan.labelCtx, { width: inner, height: inner }, x + dx, y + dy);
+      }
+      // The other label is not shown (SwiftUI shows one in the middle).
+      for (const other of [plan.label, plan.current]) if (other && other !== center) this.hide(other, node);
+      this.setChrome(node, { ring: { x, y, width: size.width, height: size.height } });
+      return;
+    }
     const proposal: Proposal = { width: size.width, height: null };
+    if (str(node.props['style']) === 'progress') {
+      if (plan.label) this.place(plan.label, plan.labelOwnCtx ?? plan.labelCtx, proposal, x, y);
+      const barY = y + plan.labelRow;
+      if (plan.current) this.place(plan.current, plan.labelCtx, proposal, x, barY + GAUGE_BAR_HEIGHT + PROGRESS_VALUE_GAP);
+      const fraction = Math.min(1, Math.max(0, num(node.props['value']) ?? 0));
+      this.setChrome(node, {
+        track: { x, y: barY, width: size.width, height: GAUGE_BAR_HEIGHT },
+        fill: { x, y: barY, width: size.width * fraction, height: GAUGE_BAR_HEIGHT },
+      });
+      return;
+    }
     if (plan.label) {
       this.place(plan.label, plan.labelCtx, proposal, x, y + (plan.labelRow - plan.labelSize.height) / 2);
     }
@@ -3464,13 +3971,13 @@ export class LayoutPass {
       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 labels: ChartAxisInput['labels'] = [];
         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) });
+          labels.push({ at: num(label['at']) ?? 0, width: measureWidth(text), leading: label['anchor'] === 'leading' });
         }
         return {
           position: (str(a['position']) ?? fallback) as ChartAxisInput['position'],