@swiftbrowser/web 0.2.0 → 0.3.0

package/src/layout/engine.ts

@@ -79,6 +79,12 @@ 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.
@@ -97,11 +103,23 @@ 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;
@@ -109,25 +127,47 @@ 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;
@@ -139,6 +179,9 @@ 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;
@@ -153,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").
@@ -172,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;
@@ -186,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;
@@ -643,6 +710,11 @@ function alignChild(container: Size, child: Size, alignment: string, node: Layou
   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;
@@ -844,6 +916,8 @@ 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 };
 }
@@ -896,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>();
@@ -947,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),
@@ -1428,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 };
   }
@@ -1473,7 +1568,7 @@ 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);
@@ -1489,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)
   // -------------------------------------------------------------------------
@@ -1615,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[],
@@ -1646,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++) {
@@ -1663,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;
       });
 
@@ -1679,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;
           }
@@ -1690,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--;
@@ -1989,7 +2113,7 @@ 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, _)`; 44 by default.
+      // `.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';
@@ -2000,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,
@@ -2026,22 +2156,24 @@ export class LayoutPass {
           else groupsSource.push({ section: null, rows: [child], headerView: null, footerView: null });
         }
       }
-      // View headers and footers: the content width, the footnote font.
-      const supplementCtx: Context = { ...rowCtx, listRow: false, stackAxis: null, font: headerFont };
-      const supplement = (view: LayoutNode | null, y: number): ListSupplementPlan | 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, supplementCtx, proposal);
-        return { node: view, ctx: supplementCtx, proposal, rect: { x: contentX, y, width: size.width, height: size.height } };
+        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++) {
@@ -2050,14 +2182,18 @@ export class LayoutPass {
         const top = y;
         let header: ListGroupPlan['header'] = null;
         let footer: ListGroupPlan['footer'] = null;
-        const headerView = supplement(source.headerView, y);
-        if (headerView && headerView.rect.height > 0) y += headerView.rect.height + LIST_HEADER_GAP;
+        // 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[] = [];
@@ -2068,12 +2204,14 @@ export class LayoutPass {
             rows.push({ node: rowNode, proposal: { width: cardWidth, height: 0 }, contentSize: ZERO, row: rect, content: rect, badge: null, edit: null });
             continue;
           }
-          // A picker already reports its row height (44 for a menu, 44 per
-          // option inline); other rows get the 11px vertical padding. Phase 6
+          // 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,
@@ -2116,11 +2254,11 @@ export class LayoutPass {
         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);
+        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({
@@ -2265,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, {
@@ -2339,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;
       }
@@ -2486,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) {
@@ -2538,40 +2690,63 @@ export class LayoutPass {
           : 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 },
@@ -2581,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) {
@@ -2600,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': {
@@ -2678,15 +2849,17 @@ 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
@@ -2695,9 +2868,16 @@ export class LayoutPass {
     // 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.
-    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 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(Math.ceil(this.measurer.measureWidth(title, titleFont) - 0.001), Math.floor(size.width * 0.56), Math.floor(available));
@@ -2731,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;
     }
@@ -2744,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);
@@ -3008,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,
       },
     });
   }
@@ -3080,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
@@ -3098,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 };
@@ -3142,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);
         });
@@ -3176,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;
@@ -3194,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 };
@@ -3214,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);
@@ -3222,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,
@@ -3250,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,
@@ -3260,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,
@@ -3273,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);
@@ -3642,6 +3875,15 @@ export class LayoutPass {
         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;
@@ -3665,6 +3907,17 @@ export class LayoutPass {
       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);
     }