@swiftbrowser/web 0.26.2 → 0.26.3

package/src/layout/engine.ts

@@ -85,6 +85,8 @@ export interface Context {
   imageScale: number;
   /** Phase 7: true inside the sidebar column of a `navsplit` (a selected `navlink` row drops its chevron there). */
   splitSidebar: boolean;
+  /** Inside either column of a `navsplit` (on a Mac the window's unified title bar spans every column). */
+  splitColumn?: boolean;
   /** Inside a leading or trailing item of a navigation bar (a segmented picker there is the bar's own capsule). */
   navBarItem?: boolean;
   /** Inside an item of a bottom toolbar (a bordered or prominent button there takes the bar's sizes). */
@@ -98,6 +100,26 @@ export interface Context {
    * the symbols' widths, and with the edit-mode controls.
    */
   labelColumn?: boolean;
+  /**
+   * The Mac idiom, inside a list row's whole subtree: symbols measure the
+   * font's point size (not its leading) and a `Label`'s title sits 6 after
+   * its icon, as the Mac app draws them.
+   */
+  listCell?: boolean;
+  /**
+   * The Mac idiom: a tab view's toolbar row at the top of the window. The
+   * screens of a tab's navigation stack draw their bar as that row: no
+   * title (the tab picker is there), the back button and the items at the
+   * row's ends.
+   */
+  tabToolbar?: Rect;
+  /**
+   * The Mac idiom: the navigation stack that fills a sheet. Its root screen
+   * draws the sheet's 40 title bar (the title leading, 13 bold) and puts
+   * its text bar items (a cancel or confirm action) in the sheet's bottom
+   * bar, `actions`, when the sheet has one.
+   */
+  macSheet?: { actions: Rect | null };
   /**
    * Phase 8: the y (screen coordinates) where content clears the bars above
    * it: the top safe area at the root, the bottom of a `navscreen`'s bar (and
@@ -214,6 +236,12 @@ const LIST_SECTION_GAP = 107 / 3;
 // Below a section's footer the gap to the next section is 11 shorter.
 const LIST_SECTION_GAP_AFTER_FOOTER = 74 / 3;
 const LIST_CHEVRON_WIDTH = 20;
+/**
+ * A `disclosuregroup` among a list's rows is an outline (`outlineRows`
+ * below): each level's rows start this much further in than the level
+ * above. SwiftUI's value, as yet unmeasured against the simulator.
+ */
+const LIST_OUTLINE_INDENT = 20;
 // Phase 4.
 // iOS 26: the tab bar is a 62-tall glass capsule floating 21 above the bottom
 // edge (8 when the tab view ends above the screen bottom), its items in equal
@@ -285,6 +313,126 @@ const NAV_GLASS_PAD_H = 12;
 const NAV_GROUP_SPACING = 12;
 const NAV_RUN_GAP = 12;
 const NAV_RUN_PAD = 1;
+// The Mac idiom (docs/notes/macos.md; `LayoutEnvironment.platform` is
+// `macos`): the window's title bar stands in for the navigation bar. A 52
+// unified title bar holds the back button, the bar items and the title,
+// leading-aligned, as SwiftUI on macOS 14 lays a NavigationStack's toolbar
+// out; a window with nothing in its bar but the title has the plain 28 one,
+// the title centered. There are no large titles and no glass: the items
+// are 28 tall, in slots 8 either side, 8 apart. On the screen's own window
+// (the top of the screen, when the safe area carries a title bar) the three
+// window buttons take the first 80 of the bar. Every number here is a
+// first pass, to be measured against the real app (the Mac fidelity
+// harness, stage 3).
+const MAC_TITLE_BAR_UNIFIED = 52;
+const MAC_TITLE_BAR_PLAIN = 28;
+const MAC_BAR_ITEM_SIZE = 28;
+const MAC_BAR_ITEM_PAD_H = 6;
+const MAC_BAR_RUN_GAP = 10;
+/** The window buttons' room: the first item's slot starts 90 in; a title with no item before it 2 further. */
+const MAC_WINDOW_BUTTONS_ROOM = 90;
+const MAC_TITLE_INSET = 2;
+/** A Mac bar's trailing items end 13 before the window's edge; a tab view's toolbar's 7. */
+const MAC_BAR_MARGIN_TRAILING = 13;
+const MAC_TAB_TOOLBAR_MARGIN_TRAILING = 7;
+// A Mac tab view's bar is a segmented control at the top of the content,
+// centered in a 44 row: 24 tall, each tab a 96 segment inside a 1 inset, at
+// most the width less 20 either side.
+const MAC_TAB_ROW_HEIGHT = 38;
+const MAC_TAB_BAR_HEIGHT = 22;
+/** A tab picker's segment: its title (13 regular) and 12 either side. */
+const MAC_TAB_ITEM_PAD_H = 12;
+const MAC_TAB_ITEM_INSET = 1;
+const MAC_TAB_BAR_MARGIN_H = 20;
+// Mac controls (macOS 14, a first pass): a bordered button is 22 tall with 10
+// either side of its label, and every `automatic` button outside a list row
+// and a bar is bordered; a checkbox is 14 square, its label 6 after it, and a
+// toggle in a list row (a grouped form's) is the small switch, 26 × 15; a
+// pop-up button is 22 tall (24 in a row), its value in a bordered button
+// with 8 either side.
+const MAC_BORDERED_SIZES: Record<string, { padV: number; padH: number; minHeight: number; textStyle?: string }> = {
+  regular: { padV: 3, padH: 10, minHeight: 22 },
+  mini: { padV: 1, padH: 6, minHeight: 16, textStyle: 'caption' },
+  small: { padV: 2, padH: 8, minHeight: 19, textStyle: 'subheadline' },
+  large: { padV: 5, padH: 14, minHeight: 28 },
+  extraLarge: { padV: 7, padH: 18, minHeight: 34 },
+};
+const MAC_CHECKBOX_SIZE = 14;
+const MAC_CHECKBOX_GAP = 6;
+const MAC_PICKER_MENU_HEIGHT = 22;
+// A Mac's segmented control is 22 tall with 13-point regular text, its
+// label (which iOS drops) 10 before it.
+const MAC_SEGMENTED_HEIGHT = 22;
+const MAC_SEGMENTED_FONT_SIZE = 13;
+const MAC_SEGMENTED_LABEL_GAP = 10;
+const MAC_PICKER_MENU_ROW_HEIGHT = 24;
+const MAC_PICKER_POPUP_PAD = 8;
+// Mac lists (measured in the Mac app, docs/notes/macos.md): no cards, the
+// rows full width with 16 beside their content, at least 24 tall (28 in a
+// sidebar) with 4 (6) above and below their content, a bordered button's 3;
+// every row has a separator under it. A section's header (11 bold) starts
+// 7 below the top, 5 into the 22 between sections after the first; a rule
+// across the whole list sits 8 under it and the rows 10 under the rule. A
+// footer (11) sits 8 under the last row, with a rule 5 under it. A
+// sidebar's rows inset 10; no chevrons. The sidebar column is 220 wide.
+const MAC_LIST_ROW_MIN_HEIGHT = 24;
+const MAC_LIST_SIDEBAR_ROW_MIN_HEIGHT = 28;
+const MAC_LIST_ROW_VPAD = 4;
+const MAC_LIST_SIDEBAR_ROW_VPAD = 6;
+const MAC_LIST_BUTTON_ROW_VPAD = 3;
+const MAC_LIST_CELL_PADDING = 16;
+/** A Mac list row's Label: the icon (a symbol at the font's point size) 6 before the title. */
+const MAC_LIST_LABEL_GAP = 6;
+const MAC_LIST_INSET_SIDEBAR = 10;
+const MAC_LIST_TOP = 6;
+const MAC_LIST_BOTTOM = 8;
+const MAC_LIST_SECTION_GAP = 22;
+const MAC_LIST_HEADER_TOP = 4;
+/** Under a Mac header: 8 to its rule and the rule; the first section's rows start 10 further down. */
+const MAC_LIST_HEADER_GAP = 9;
+const MAC_LIST_FIRST_ROWS_GAP = 10;
+const MAC_LIST_FOOTER_GAP = 8;
+/** Under a Mac footer: 5 to its rule, the rule. */
+const MAC_LIST_FOOTER_BOTTOM = 6;
+const MAC_NAVSPLIT_SIDEBAR_WIDTH = 220;
+// A Mac's search field is in the toolbar, at its trailing end: 22 tall, 180
+// wide (less when the bar is narrow), 16 from the edge. A sheet is a
+// window-modal panel that drops from the title bar, 480 × 400 at most,
+// centered, with no grabber.
+const MAC_SEARCH_FIELD_WIDTH = 180;
+const MAC_SEARCH_FIELD_HEIGHT = 22;
+// A Mac's sheet (measured in the Mac app): a 470 panel centered in the
+// window, its 40 title bar (the title 13 bold at 16) over the content at its
+// ideal height, and a 60 bar at the bottom with the text actions (cancel,
+// confirm) as 22 push buttons at its trailing end, 16 in and 8 apart; at
+// least 40 clear of the window's edges.
+const MAC_SHEET_WIDTH = 470;
+const MAC_SHEET_TITLE_BAR = 40;
+const MAC_SHEET_ACTIONS_BAR = 60;
+const MAC_SHEET_ACTIONS_INSET = 16;
+const MAC_SHEET_ACTIONS_GAP = 8;
+const MAC_SHEET_MARGIN = 40;
+// A Mac's text field is 22 tall whatever its style; a stepper's control is
+// the 13 × 22 pair of arrows (up over down) 4 after the label; an alert is
+// a 260 panel, its title and message centered 16 in, its buttons 22-tall
+// push buttons 16 in, side by side 12 apart for two, stacked 8 apart otherwise.
+const MAC_TEXTFIELD_HEIGHT = 22;
+const MAC_STEPPER_WIDTH = 13;
+const MAC_STEPPER_HEIGHT = 22;
+const MAC_STEPPER_GAP = 4;
+// A Mac's slider is a 4 track with a 20 round knob in a 20 row; a compact
+// date picker's date and time are 22-tall bordered fields 6 apart with 6
+// beside their text; a menu outside a bar or a list row is a pull-down
+// button, 22 tall with 10 beside its label and the chevron's 16 after it.
+const MAC_SLIDER_HEIGHT = 20;
+const MAC_SLIDER_TRACK_HEIGHT = 4;
+const MAC_SLIDER_THUMB = 20;
+const MAC_DATEPICKER_HEIGHT = 22;
+const MAC_DATEPICKER_CAPSULE_PAD_H = 6;
+const MAC_DATEPICKER_CAPSULE_GAP = 6;
+const MAC_PULLDOWN_HEIGHT = 22;
+const MAC_PULLDOWN_PAD_H = 10;
+const MAC_PULLDOWN_CHEVRON = 16;
 
 /**
  * The children an item draws in the bar: a menu or context menu draws its
@@ -309,11 +457,11 @@ function isSymbolItem(item: LayoutNode): boolean {
   return drawn.length === 1 && isSymbolItem(drawn[0] as LayoutNode);
 }
 
-/** A bar item's slot in its glass capsule. */
-function navSlot(item: LayoutNode, width: number): number {
+/** A bar item's slot in its glass capsule (`glass` square for a symbol, else its width and `pad` either side, at least `glass`). */
+function navSlot(item: LayoutNode, width: number, glass = NAV_GLASS_SIZE, pad = NAV_GLASS_PAD_H): number {
   if (isSegmentedItem(item)) return width + 2 * BAR_SEGMENTED_MARGIN;
-  if (isSymbolItem(item) && width <= NAV_GLASS_SIZE) return NAV_GLASS_SIZE;
-  return Math.max(NAV_GLASS_SIZE, width + 2 * NAV_GLASS_PAD_H);
+  if (isSymbolItem(item) && width <= glass) return glass;
+  return Math.max(glass, width + 2 * pad);
 }
 // iOS 26 (measured in the 26.2 simulator, Examples/Fidelity `bottombar*`): a
 // bottom toolbar's items float on Liquid Glass in a 48 row 28 above the
@@ -457,7 +605,8 @@ const TEXTEDITOR_INSET = { horizontal: 5, vertical: 8 };
  * `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.
+ * otherwise. `ALERT_METRICS` gathers them for `placeAlert`; `MAC_ALERT_METRICS`
+ * is the Mac's panel (MAC_* above).
  */
 const ALERT_WIDTH = 320;
 const ALERT_PAD_TOP = 21;
@@ -473,6 +622,58 @@ const ALERT_BUTTON_HEIGHT = 46;
 const ALERT_FIELD_HEIGHT = 36;
 const ALERT_FIELD_SPACING = 8;
 const ALERT_FIELDS_GAP = 16;
+interface AlertMetrics {
+  width: number;
+  padTop: number;
+  padH: number;
+  buttonInset: number;
+  buttonsGap: number;
+  padBottom: number;
+  buttonSpacing: number;
+  rowSpacing: number;
+  titleGap: number;
+  buttonHeight: number;
+  fieldHeight: number;
+  fieldSpacing: number;
+  fieldsGap: number;
+  textAlignment: 'leading' | 'center';
+}
+const ALERT_METRICS: AlertMetrics = {
+  width: ALERT_WIDTH,
+  padTop: ALERT_PAD_TOP,
+  padH: ALERT_PAD_H,
+  buttonInset: ALERT_BUTTON_INSET,
+  buttonsGap: ALERT_BUTTONS_GAP,
+  padBottom: ALERT_PAD_BOTTOM,
+  buttonSpacing: ALERT_BUTTON_SPACING,
+  rowSpacing: ALERT_BUTTON_SPACING,
+  titleGap: ALERT_TITLE_GAP,
+  buttonHeight: ALERT_BUTTON_HEIGHT,
+  fieldHeight: ALERT_FIELD_HEIGHT,
+  fieldSpacing: ALERT_FIELD_SPACING,
+  fieldsGap: ALERT_FIELDS_GAP,
+  textAlignment: 'leading',
+};
+// Measured in the Mac app: the app icon (54, which the page draws as a
+// placeholder) 25 under the top and 25 over the title, the message 9 under
+// it, 28-tall buttons 17 under the message and 16 over the bottom, two
+// side by side 8 apart.
+const MAC_ALERT_METRICS: AlertMetrics = {
+  width: 260,
+  padTop: 104,
+  padH: 16,
+  buttonInset: 16,
+  buttonsGap: 17,
+  padBottom: 16,
+  buttonSpacing: 8,
+  rowSpacing: 8,
+  titleGap: 9,
+  buttonHeight: 28,
+  fieldHeight: 22,
+  fieldSpacing: 8,
+  fieldsGap: 12,
+  textAlignment: 'center',
+};
 /** 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. */
@@ -742,7 +943,8 @@ function cellStyle(node: LayoutNode, key: string): unknown {
 }
 
 /** The default vertical padding above and below a list row's content. */
-function listRowVPad(row: LayoutNode, sidebar: boolean): number {
+function listRowVPad(row: LayoutNode, sidebar: boolean, mac: boolean): number {
+  if (mac) return row.kind === 'button' ? MAC_LIST_BUTTON_ROW_VPAD : sidebar ? MAC_LIST_SIDEBAR_ROW_VPAD : MAC_LIST_ROW_VPAD;
   switch (row.kind) {
     case 'picker':
       return str(row.props['style']) === 'segmented' ? LIST_ROW_SEGMENTED_VPAD : 0;
@@ -923,6 +1125,34 @@ function listRowOf(node: LayoutNode): LayoutNode | null {
   return null;
 }
 
+/** A list's row as `outlineRows` names it: the view, how deep it sits, and the `disclosuregroup` it is the label of. */
+interface RowSource {
+  node: LayoutNode;
+  depth: number;
+  group: LayoutNode | null;
+}
+
+/**
+ * The rows a section's children make. A `disclosuregroup` among them is an
+ * outline, as SwiftUI lays one out in a `List`: its label (its first child)
+ * is a row, with the group's chevron at the trailing edge, and while it is
+ * expanded each of its content children is a row under it, a level deeper
+ * (`LIST_OUTLINE_INDENT` further in), a nested group among them opening the
+ * same way. Collapsed, its content is not laid out.
+ */
+function outlineRows(nodes: readonly LayoutNode[], depth: number, out: RowSource[]): RowSource[] {
+  for (const row of nodes) {
+    if (row.kind === 'disclosuregroup') {
+      const [label, ...content] = row.children;
+      if (label) out.push({ node: label, depth, group: row });
+      if (row.props['expanded'] === true) outlineRows(content, depth + 1, out);
+    } else {
+      out.push({ node: row, depth, group: null });
+    }
+  }
+  return out;
+}
+
 /** A list row's `Label`: where its icon is centred, and where its title starts, past the row content's leading edge (iOS). */
 const LIST_LABEL_ICON_CENTER = 12;
 const LIST_LABEL_TITLE_X = 40;
@@ -1189,6 +1419,12 @@ interface ListRowPlan {
   edit: { listRow: LayoutNode; control: Rect | null; reorder: Rect | null } | null;
   /** `.listRowSeparator(.hidden)`: the row's separator edges left out. */
   separatorHidden?: { top: boolean; bottom: boolean } | null;
+  /**
+   * An outline's row (`outlineRows`): how deep it sits, and the
+   * `disclosuregroup` it is the label of, when it is one (the group's
+   * chevron and toggle go over this row).
+   */
+  outline?: { depth: number; group: LayoutNode | null } | null;
 }
 
 /** A section's view header or footer (`sectionheader` / `sectionfooter`) as the list places it. */
@@ -1209,6 +1445,8 @@ interface ListGroupPlan {
   footerView: ListSupplementPlan | null;
   card: Rect;
   rows: ListRowPlan[];
+  /** Each `disclosuregroup` among the rows, with the rect its rows span (its label's, then its content's while expanded). */
+  outlines: { group: LayoutNode; frame: Rect }[];
 }
 
 interface ListPlan {
@@ -1416,7 +1654,7 @@ 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' && this.sheetIsForm(root)) {
-        const rect = this.formSheetRect();
+        const rect = this.formSheetRect(root, ctx);
         this.place(root, ctx, { width: rect.width, height: rect.height }, rect.x, rect.y);
       } else if (root.kind === 'sheet') {
         const floats = this.sheetFloats(root);
@@ -1779,7 +2017,8 @@ export class LayoutPass {
         const style = str(node.props['style']);
         return {
           width: finite(p.width) ? p.width : TEXTFIELD_DEFAULT_WIDTH,
-          height: style === 'plain' ? TEXTFIELD_HEIGHT_PLAIN : TEXTFIELD_HEIGHT_ROUNDED,
+          // A Mac's field is 22 tall in every style.
+          height: this.env.platform === 'macos' ? MAC_TEXTFIELD_HEIGHT : style === 'plain' ? TEXTFIELD_HEIGHT_PLAIN : TEXTFIELD_HEIGHT_ROUNDED,
         };
       }
       case 'shape':
@@ -1824,7 +2063,10 @@ export class LayoutPass {
         // GeometryReader: the proposal, 10 on unconstrained axes.
         return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
       case 'sheet':
-        if (this.sheetIsForm(node)) return { width: p.width ?? this.formSheetRect().width, height: this.formSheetRect().height };
+        if (this.sheetIsForm(node)) {
+          const rect = this.formSheetRect(node, ctx);
+          return { width: p.width ?? rect.width, height: rect.height };
+        }
         return { width: p.width ?? this.env.screen.width, height: this.sheetHeight(node) };
       // Phase 8 controls.
       case 'alert':
@@ -1859,12 +2101,19 @@ export class LayoutPass {
       }
       case 'menu': {
         // Phase 6: the label (the first child) is the only laid-out child.
+        // The Mac idiom: outside a bar and a list row the menu is a pull-down
+        // button around its label.
         const label = node.children[0];
+        if (this.menuIsPullDown(ctx)) {
+          const inner: Proposal = { width: shrink(p.width, 2 * MAC_PULLDOWN_PAD_H + MAC_PULLDOWN_CHEVRON), height: shrink(p.height, 0) };
+          const labelSize = label ? this.measure(label, this.childContext(node, ctx), inner) : ZERO;
+          return { width: labelSize.width + 2 * MAC_PULLDOWN_PAD_H + MAC_PULLDOWN_CHEVRON, height: Math.max(MAC_PULLDOWN_HEIGHT, labelSize.height) };
+        }
         return label ? this.measure(label, this.childContext(node, ctx), p) : ZERO;
       }
       case 'searchfield':
-        // Phase 6: inside a navscreen the bar places it; elsewhere a 36pt field.
-        return { width: finite(p.width) ? p.width : SEARCH_FIELD_DEFAULT_WIDTH, height: SEARCH_FIELD_HEIGHT };
+        // Phase 6: inside a navscreen the bar places it; elsewhere a 36pt field (22 on a Mac).
+        return { width: finite(p.width) ? p.width : SEARCH_FIELD_DEFAULT_WIDTH, height: this.env.platform === 'macos' ? MAC_SEARCH_FIELD_HEIGHT : SEARCH_FIELD_HEIGHT };
       case 'swipeactions':
       case 'contextmenu': {
         // Phase 8: the content (the first child) alone; the actions / items
@@ -2051,14 +2300,17 @@ export class LayoutPass {
     rowChrome['badge'] = { ...badge, x: end - chevron.width - badge.width };
   }
 
-  private buttonIsBordered(node: LayoutNode): boolean {
+  private buttonIsBordered(node: LayoutNode, ctx: Context): boolean {
     const style = str(node.props['style']);
-    return style === 'bordered' || style === 'borderedProminent' || style === 'glass';
+    if (style === 'bordered' || style === 'borderedProminent' || style === 'glass') return true;
+    // The Mac idiom: a button of the automatic style is a push button too
+    // (in a list row as well), except as a bar item's content.
+    return this.env.platform === 'macos' && (style === null || style === 'automatic') && !ctx.navBarItem && !ctx.bottomBarItem;
   }
 
   private measureButton(node: LayoutNode, ctx: Context, p: Proposal): Size {
     const label = this.contentOf(node);
-    if (!this.buttonIsBordered(node)) return label ? this.measure(label, this.childContext(node, ctx), p) : ZERO;
+    if (!this.buttonIsBordered(node, ctx)) return label ? this.measure(label, this.childContext(node, ctx), p) : ZERO;
     const cctx = this.borderedLabelContext(node, ctx);
     if (ctx.bottomBarItem) {
       // In a bottom bar (measured in the iOS 26.2 simulator, Native
@@ -2081,7 +2333,9 @@ export class LayoutPass {
   }
 
   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 };
+    const controlSize = str(node.props['controlSize']) ?? 'regular';
+    if (this.env.platform === 'macos') return MAC_BORDERED_SIZES[controlSize] ?? (MAC_BORDERED_SIZES['regular'] as { padV: number; padH: number; minHeight: number });
+    return BORDERED_SIZES[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. */
@@ -2091,8 +2345,20 @@ export class LayoutPass {
     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 };
+  /**
+   * A toggle's control: iOS's switch at the trailing edge; on a Mac a
+   * checkbox before the label, or the small switch in a list row (a grouped
+   * form's), at the trailing edge.
+   */
+  private switchMetrics(_ctx: Context): { width: number; height: number; gap: number; checkbox: boolean } {
+    if (this.env.platform !== 'macos') return { width: SWITCH_WIDTH, height: SWITCH_HEIGHT, gap: TOGGLE_GAP, checkbox: false };
+    // A Mac's toggle is a checkbox before its label, in a list row too.
+    return { width: MAC_CHECKBOX_SIZE, height: MAC_CHECKBOX_SIZE, gap: MAC_CHECKBOX_GAP, checkbox: true };
+  }
+
+  private toggleLabelProposal(ctx: Context, p: Proposal): Proposal {
+    const control = this.switchMetrics(ctx);
+    return { width: shrink(p.width, control.width + control.gap), height: p.height };
   }
 
   private measureToggle(node: LayoutNode, ctx: Context, p: Proposal): Size {
@@ -2107,21 +2373,24 @@ export class LayoutPass {
         return { width: bottomSlot(label ?? node, size) + BOTTOM_TOGGLE_GROWTH - BOTTOM_TOGGLE_INSET, height: BOTTOM_TOGGLE_HEIGHT };
       }
       // sized as a bordered button, on or off
-      const inner: Proposal = { width: shrink(p.width, 2 * BORDERED_PAD_H), height: shrink(p.height, 2 * BORDERED_PAD_V) };
+      const m = this.borderedMetrics(node);
+      const inner: Proposal = { width: shrink(p.width, 2 * m.padH), height: shrink(p.height, 2 * m.padV) };
       const size = label ? this.measure(label, this.childContext(node, ctx), inner) : ZERO;
-      return { width: size.width + 2 * BORDERED_PAD_H, height: Math.max(BORDERED_MIN_HEIGHT, size.height + 2 * BORDERED_PAD_V) };
+      return { width: size.width + 2 * m.padH, height: Math.max(m.minHeight, size.height + 2 * m.padV) };
     }
+    const control = this.switchMetrics(ctx);
     const labelSize = label
-      ? this.measure(label, this.childContext(node, ctx), this.toggleLabelProposal(p))
+      ? this.measure(label, this.childContext(node, ctx), this.toggleLabelProposal(ctx, p))
       : ZERO;
     return {
-      width: finite(p.width) ? p.width : labelSize.width + TOGGLE_GAP + SWITCH_WIDTH,
-      height: Math.max(labelSize.height, SWITCH_HEIGHT),
+      width: finite(p.width) ? p.width : labelSize.width + control.gap + control.width,
+      height: Math.max(labelSize.height, control.height),
     };
   }
 
   private navLinkLabelProposal(ctx: Context, p: Proposal): Proposal {
-    return ctx.listRow ? { width: shrink(p.width, LIST_CHEVRON_WIDTH), height: p.height } : p;
+    // A Mac's rows have no chevron.
+    return ctx.listRow && this.env.platform !== 'macos' ? { width: shrink(p.width, LIST_CHEVRON_WIDTH), height: p.height } : p;
   }
 
   private measureNavLink(node: LayoutNode, ctx: Context, p: Proposal): Size {
@@ -2155,14 +2424,23 @@ export class LayoutPass {
     return Array.isArray(detents) && str(detents[0]) === 'full';
   }
 
-  /** iPadOS: a sheet in a regular width (not a full-screen cover) is a centered form sheet. */
+  /** iPadOS: a sheet in a regular width (not a full-screen cover) is a centered form sheet; on a Mac a window-modal panel. */
   private sheetIsForm(node: LayoutNode): boolean {
-    return this.env.screen.width >= REGULAR_WIDTH && !this.sheetIsFull(node);
+    return (this.env.screen.width >= REGULAR_WIDTH || this.env.platform === 'macos') && !this.sheetIsFull(node);
   }
 
-  /** The form sheet's card: UIKit's size, clamped to the safe area less a margin, centered in it. */
-  private formSheetRect(): Rect {
+  /**
+   * The form sheet's card: UIKit's size, clamped to the safe area less a
+   * margin, centered in it. On a Mac the panel is 470 wide, as tall as its
+   * bars and its content's ideal height, centered in the window.
+   */
+  private formSheetRect(node: LayoutNode, ctx: Context): Rect {
     const { screen, safeArea } = this.env;
+    if (this.env.platform === 'macos') {
+      const width = Math.max(0, Math.min(MAC_SHEET_WIDTH, screen.width - 2 * MAC_SHEET_MARGIN));
+      const height = Math.max(0, Math.min(this.macSheetHeight(node, ctx, width), screen.height - 2 * MAC_SHEET_MARGIN));
+      return { x: Math.round((screen.width - width) / 2), y: Math.round((screen.height - height) / 2), width, height };
+    }
     const top = safeArea.top + FORM_SHEET_MARGIN;
     const room = { width: screen.width - 2 * FORM_SHEET_MARGIN, height: screen.height - top - safeArea.bottom - FORM_SHEET_MARGIN };
     const width = Math.max(0, Math.min(FORM_SHEET.width, room.width));
@@ -2170,6 +2448,34 @@ export class LayoutPass {
     return { x: Math.round((screen.width - width) / 2), y: Math.round(top + (room.height - height) / 2), width, height };
   }
 
+  /** The toolbars of a Mac sheet's root screen that go in its bottom bar: those whose items are all text buttons (a cancel or confirm action). */
+  private macSheetActionToolbars(screen: LayoutNode): LayoutNode[] {
+    return this.navScreenParts(screen).toolbars.filter((toolbar) => {
+      const placement = str(toolbar.props['placement']);
+      if ((placement !== 'leading' && placement !== 'trailing') || str(toolbar.props['spacer']) !== null) return false;
+      return toolbar.children.length > 0 && toolbar.children.every((item) => !isSymbolItem(item) && unwrapStyled(item).kind === 'button');
+    });
+  }
+
+  /** A Mac sheet's root screen, when its content is a navigation stack. */
+  private macSheetScreen(node: LayoutNode): LayoutNode | null {
+    const child = this.contentOf(node);
+    if (!child) return null;
+    const stack = unwrapStyled(child);
+    if (stack.kind !== 'navstack') return null;
+    return stack.children[stack.children.length - 1] ?? null;
+  }
+
+  /** A Mac sheet's height: its title bar, its content's ideal height at the sheet's width, and its actions bar if it has one. */
+  private macSheetHeight(node: LayoutNode, ctx: Context, width: number): number {
+    const screen = this.macSheetScreen(node);
+    const child = this.contentOf(node);
+    if (!screen) return child ? this.measure(child, this.childContext(node, ctx), { width, height: null }).height : 0;
+    const content = this.navScreenParts(screen).content;
+    const ideal = content ? this.measure(content, this.childContext(screen, this.childContext(node, ctx)), { width, height: null }).height : 0;
+    return MAC_SHEET_TITLE_BAR + ideal + (this.macSheetActionToolbars(screen).length > 0 ? MAC_SHEET_ACTIONS_BAR : 0);
+  }
+
   /** iOS 26: a sheet whose first detent is a partial one floats inset from the screen edges. */
   private sheetFloats(node: LayoutNode): boolean {
     if (this.sheetIsForm(node)) return false;
@@ -2239,16 +2545,20 @@ export class LayoutPass {
         };
       }
       if (style === 'segmented') {
-        const font = makeFont('system', PICKER_SEGMENT_FONT_SIZE, 600);
+        const mac = this.env.platform === 'macos';
+        const font = mac ? makeFont('system', MAC_SEGMENTED_FONT_SIZE, 400) : makeFont('system', PICKER_SEGMENT_FONT_SIZE, 600);
         let natural = 0;
         for (const option of options) natural += this.measurer.measureWidth(option, font) + PICKER_SEGMENT_PAD;
+        // A Mac shows the picker's label before the control.
+        const labelText = mac ? (str(node.props['label']) ?? '') : '';
+        const labelWidth = labelText.length > 0 && !ctx.navBarItem ? this.measurer.measureWidth(labelText, ctx.font) + MAC_SEGMENTED_LABEL_GAP : 0;
         return {
-          size: { width: finite(p.width) ? p.width : natural, height: PICKER_SEGMENTED_HEIGHT },
+          size: { width: finite(p.width) ? p.width : natural + labelWidth, height: mac ? MAC_SEGMENTED_HEIGHT : PICKER_SEGMENTED_HEIGHT },
           style: 'segmented',
           font,
           options,
           selected,
-          labelWidth: 0,
+          labelWidth,
           valueWidth: 0,
           labelRow: false,
         };
@@ -2256,12 +2566,15 @@ export class LayoutPass {
       const font = ctx.font;
       const labelWidth = this.measurer.measureWidth(str(node.props['label']) ?? '', font);
       const value = options[selected] ?? '';
-      const valueWidth = this.measurer.measureWidth(value, font) + PICKER_MENU_CHEVRON_WIDTH;
+      const mac = this.env.platform === 'macos';
+      // The Mac's pop-up button holds the value and the chevrons in a bordered button.
+      const popup = mac && !ctx.listRow;
+      const valueWidth = this.measurer.measureWidth(value, font) + PICKER_MENU_CHEVRON_WIDTH + (popup ? 2 * MAC_PICKER_POPUP_PAD : 0);
       const natural = labelWidth + PICKER_MENU_GAP + valueWidth;
       return {
         size: {
           width: finite(p.width) ? p.width : natural,
-          height: ctx.listRow ? PICKER_MENU_ROW_HEIGHT : PICKER_MENU_HEIGHT,
+          height: ctx.listRow ? (mac ? MAC_PICKER_MENU_ROW_HEIGHT : PICKER_MENU_ROW_HEIGHT) : mac ? MAC_PICKER_MENU_HEIGHT : PICKER_MENU_HEIGHT,
         },
         style: 'menu',
         font,
@@ -2286,9 +2599,19 @@ export class LayoutPass {
       const inset = plan.bar ? BAR_SEGMENTED_INSET : 0;
       if (plan.bar) chrome['bar'] = { x, y, width: size.width, height: size.height };
       else delete chrome['bar'];
-      const segmentWidth = Math.max(0, size.width - 2 * inset) / n;
+      // The Mac's label before the control (`label`, `track` the control's own frame).
+      const labelWidth = Math.min(plan.labelWidth, size.width);
+      if (labelWidth > 0) {
+        chrome['label'] = { x, y, width: labelWidth - MAC_SEGMENTED_LABEL_GAP, height: size.height };
+        chrome['track'] = { x: x + labelWidth, y, width: Math.max(0, size.width - labelWidth), height: size.height };
+      } else {
+        delete chrome['label'];
+        delete chrome['track'];
+      }
+      const trackX = x + labelWidth;
+      const segmentWidth = Math.max(0, size.width - labelWidth - 2 * inset) / n;
       for (let i = 0; i < plan.options.length; i++) {
-        chrome[`segment${i}`] = { x: x + inset + i * segmentWidth, y: y + inset, width: segmentWidth, height: Math.max(0, size.height - 2 * inset) };
+        chrome[`segment${i}`] = { x: trackX + inset + i * segmentWidth, y: y + inset, width: segmentWidth, height: Math.max(0, size.height - 2 * inset) };
       }
     } else if (plan.style === 'inline') {
       // Rows span the list row when there is one (the hit area and the
@@ -2324,6 +2647,9 @@ export class LayoutPass {
       valueWidth = Math.min(valueWidth, size.width);
       chrome['label'] = { x, y, width: labelWidth, height: size.height };
       chrome['value'] = { x: x + size.width - valueWidth, y, width: valueWidth, height: size.height };
+      // The page draws the Mac's pop-up button around the value (the engine padded it).
+      if (this.env.platform === 'macos' && !ctx.listRow) chrome['popup'] = chrome['value'];
+      else delete chrome['popup'];
     }
     this.setChrome(node, chrome);
     if (node.id >= 0) this.fonts.set(node.id, plan.font);
@@ -2365,6 +2691,8 @@ export class LayoutPass {
     if (n < 2) return [];
     // A disclosure group's content sits 8 under its label, as SwiftUI's does.
     const spacing = num(node.props['spacing']) ?? (node.kind === 'disclosuregroup' ? DEFAULT_SPACING : null);
+    // A Mac list row's Label (no icon column there): the title 6 after the icon.
+    if (spacing === null && axis === 'horizontal' && cctx.listCell === true && labelColumnOf(node)) return [MAC_LIST_LABEL_GAP];
     if (spacing !== null || axis === 'horizontal') return new Array<number>(n - 1).fill(spacing ?? DEFAULT_SPACING);
     const gaps: number[] = [];
     for (let i = 0; i < n - 1; i++) {
@@ -2629,10 +2957,13 @@ export class LayoutPass {
       return { width: p.width ?? width, height: p.height ?? height };
     }
     const name = str(node.props['name']);
-    if (name === null) return square(ctx.font.leading * ctx.imageScale);
+    // A symbol takes a square of the font's leading; in a Mac list row, of
+    // its point size (13 in a 13-point row, measured in the Mac app).
+    const symbolSide = (ctx.listCell === true ? ctx.font.size : ctx.font.leading) * ctx.imageScale;
+    if (name === null) return square(symbolSide);
     const asset = this.env.assets?.images[name];
     if (!asset) return square(UNKNOWN_IMAGE_SIDE);
-    if (asset.kind === 'symbol') return square(ctx.font.leading * ctx.imageScale);
+    if (asset.kind === 'symbol') return square(symbolSide);
     const width = num(asset.width) ?? 0;
     const height = num(asset.height) ?? 0;
     if (node.props['resizable'] !== true) return { width, height };
@@ -2842,28 +3173,43 @@ export class LayoutPass {
       // (cards, chevrons, 52pt rows) and only its sections' folding remains.
       const sidebarStyle = listStyle === 'sidebar' && isRegularWidth(screen);
       // `.environment(\.defaultMinListRowHeight, _)`; 52 by default (44 in a sidebar).
-      const minRowHeight = num(node.props['minRowHeight']) ?? (sidebarStyle ? LIST_SIDEBAR_ROW_MIN_HEIGHT : LIST_ROW_MIN_HEIGHT);
-      const inset = listStyle === 'insetGrouped' || listStyle === 'sidebar' ? LIST_INSET : 0;
+      // The Mac idiom (MAC_LIST_* above): smaller rows, margins and gaps,
+      // 11-point bold headers, a sidebar's rows inset 10 and a grouped
+      // form's cards 20.
+      const mac = this.env.platform === 'macos';
+      const minRowHeight =
+        num(node.props['minRowHeight']) ??
+        (sidebarStyle ? (mac ? MAC_LIST_SIDEBAR_ROW_MIN_HEIGHT : LIST_SIDEBAR_ROW_MIN_HEIGHT) : mac ? MAC_LIST_ROW_MIN_HEIGHT : LIST_ROW_MIN_HEIGHT);
+      // A Mac's lists have no cards: the rows run the whole width (a
+      // sidebar's inset 10).
+      const inset = mac
+        ? listStyle === 'sidebar'
+          ? MAC_LIST_INSET_SIDEBAR
+          : 0
+        : listStyle === 'insetGrouped' || listStyle === 'sidebar'
+          ? LIST_INSET
+          : 0;
       const plain = listStyle === 'plain';
-      const listTop = plain ? 0 : LIST_TOP;
-      const listBottom = plain ? 0 : LIST_BOTTOM;
-      const sectionGap = plain ? 0 : LIST_SECTION_GAP;
+      const cellPadding = mac ? MAC_LIST_CELL_PADDING : LIST_CELL_PADDING;
+      const listTop = plain ? 0 : mac ? MAC_LIST_TOP : LIST_TOP;
+      const listBottom = plain ? 0 : mac ? MAC_LIST_BOTTOM : LIST_BOTTOM;
+      const sectionGap = plain ? 0 : mac ? MAC_LIST_SECTION_GAP : LIST_SECTION_GAP;
+      const headerGap = mac ? MAC_LIST_HEADER_GAP : LIST_HEADER_GAP;
       const cardX = inset;
       const cardWidth = Math.max(0, layoutWidth - 2 * inset);
-      const contentX = inset + LIST_CELL_PADDING;
-      const contentWidth = Math.max(0, layoutWidth - 2 * (inset + LIST_CELL_PADDING));
+      const contentX = inset + cellPadding;
+      const contentWidth = Math.max(0, layoutWidth - 2 * (inset + cellPadding));
       // iOS 26: headers in the headline size (semibold), footers in footnote.
-      const headerFont = makeFont(
-        'system',
-        textStyleSize('headline', this.env.dynamicTypeSize),
-        600,
-      );
+      const headerFont = mac
+        ? makeFont('system', textStyleSize('subheadline', this.env.dynamicTypeSize, 'macos'), 700)
+        : makeFont('system', textStyleSize('headline', this.env.dynamicTypeSize, this.env.platform), 600);
       const footerFont = makeFont(
         'system',
-        textStyleSize('footnote', this.env.dynamicTypeSize),
+        textStyleSize('footnote', this.env.dynamicTypeSize, this.env.platform),
         400,
       );
-      const rowCtx: Context = { ...this.childContext(node, ctx), listRow: true, labelColumn: true, sidebarList: str(node.props['style']) === 'sidebar' };
+      // A Mac's rows have no icon column: a Label is its icon and title, 6 apart.
+      const rowCtx: Context = { ...this.childContext(node, ctx), listRow: true, labelColumn: !mac, listCell: mac, sidebarList: str(node.props['style']) === 'sidebar' };
       // Phase 8: in edit mode a selectable or deletable `listrow` gains a 44
       // leading control (6 in from the card's edge) and its content shifts
       // right by 40; a movable one a trailing grip, which narrows it by 40.
@@ -2871,20 +3217,20 @@ export class LayoutPass {
 
       // 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 };
+      type GroupSource = { section: LayoutNode | null; rows: RowSource[]; headerView: LayoutNode | null; footerView: LayoutNode | null };
       const groupsSource: GroupSource[] = [];
       for (const child of node.children) {
         if (child.kind === 'section') {
           // `Section(isExpanded:)`: collapsed, its rows are not laid out, in a sidebar-style list (iOS shows the rows in the other styles, whatever the binding).
           const collapsed = child.props['collapsible'] === true && child.props['expanded'] === false && rowCtx.sidebarList === true;
-          const rows = collapsed ? [] : child.children.filter((row) => row.kind !== 'sectionheader' && row.kind !== 'sectionfooter');
+          const rows = collapsed ? [] : outlineRows(child.children.filter((row) => row.kind !== 'sectionheader' && row.kind !== 'sectionfooter'), 0, []);
           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], headerView: null, footerView: null });
+          if (last && last.section === null) outlineRows([child], 0, last.rows);
+          else groupsSource.push({ section: null, rows: outlineRows([child], 0, []), headerView: null, footerView: null });
         }
       }
       // View headers and footers: the content width, the header's and the
@@ -2913,27 +3259,29 @@ export class LayoutPass {
         const previous = groups[g - 1];
         if (previous) {
           const footed = previous.footer !== null || (previous.footerView !== null && previous.footerView.rect.height > 0);
-          y += plain ? sectionGap : footed ? LIST_SECTION_GAP_AFTER_FOOTER : sectionGap;
+          y += plain || mac ? sectionGap : footed ? LIST_SECTION_GAP_AFTER_FOOTER : 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 headerLift = plain || mac ? 0 : LIST_HEADER_LIFT;
         const headerView = supplement(source.headerView, y - headerLift, headerCtx, source.section?.props['collapsible'] === true);
-        if (headerView && headerView.rect.height > 0) y += headerView.rect.height + LIST_HEADER_GAP - headerLift;
+        if (headerView && headerView.rect.height > 0) y += headerView.rect.height + headerGap - 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, headerFont);
+          if (mac && previous) y += MAC_LIST_HEADER_TOP;
           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;
+          y = headerY + size.height + headerGap + (mac && !previous ? MAC_LIST_FIRST_ROWS_GAP : 0);
         }
         const cardTop = y;
         const rows: ListRowPlan[] = [];
-        for (const rowNode of source.rows) {
+        for (const rowSource of source.rows) {
+          const rowNode = rowSource.node;
           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 };
@@ -2946,13 +3294,19 @@ export class LayoutPass {
           // `listRowInsets` replaces all four insets; a `badge` reserves its
           // width (plus a gap) at the trailing edge.
           const hints = rowHintsOf(rowNode);
-          const defaultVPad = listRowVPad(unwrapStyled(rowNode), sidebarStyle);
-          const insets: EdgeInsets = hints.insets ?? {
-            top: defaultVPad,
-            leading: LIST_CELL_PADDING,
-            bottom: defaultVPad,
-            trailing: LIST_CELL_PADDING,
-          };
+          const defaultVPad = listRowVPad(unwrapStyled(rowNode), sidebarStyle, mac);
+          // An outline's rows start LIST_OUTLINE_INDENT further in per level.
+          const indent = rowSource.depth * LIST_OUTLINE_INDENT;
+          const insets: EdgeInsets = hints.insets
+            ? { ...hints.insets, leading: hints.insets.leading + indent }
+            : {
+                top: defaultVPad,
+                leading: cellPadding + indent,
+                bottom: defaultVPad,
+                trailing: cellPadding,
+              };
+          // A group's label row keeps the chevron's width at its trailing edge, as a link's does (a Mac's rows have no chevron).
+          const chevronReserve = rowSource.group && !mac ? LIST_CHEVRON_WIDTH : 0;
           const badgeWidth = hints.badge !== null ? this.measurer.measureWidth(hints.badge, rowCtx.font) : 0;
           const badgeReserve = hints.badge !== null ? badgeWidth + BADGE_GAP : 0;
           // Phase 8 edit mode: a selectable or deletable `listrow` gains a
@@ -2964,7 +3318,7 @@ export class LayoutPass {
           const editShift = hasControl ? LIST_EDIT_CONTROL_SHIFT : 0;
           const gripReserve = hasGrip ? LIST_EDIT_CONTROL_SHIFT : 0;
           const rowContentX = cardX + insets.leading + editShift;
-          const rowContentWidth = Math.max(0, cardWidth - insets.leading - insets.trailing - badgeReserve - editShift - gripReserve);
+          const rowContentWidth = Math.max(0, cardWidth - insets.leading - insets.trailing - badgeReserve - editShift - gripReserve - chevronReserve);
           const proposal: Proposal = { width: rowContentWidth, height: null };
           const contentSize = this.measure(rowNode, rowCtx, proposal);
           const rowHeight = Math.max(minRowHeight, contentSize.height + insets.top + insets.bottom);
@@ -2997,15 +3351,27 @@ export class LayoutPass {
                 }
               : null,
             separatorHidden: hints.separatorHidden,
+            outline: rowSource.group || rowSource.depth > 0 ? { depth: rowSource.depth, group: rowSource.group } : null,
           });
           y += rowHeight;
         }
+        // Each group's rect: its label's row, then the rows under it that sit deeper, up to the next at its level or above.
+        const outlines: ListGroupPlan['outlines'] = [];
+        rows.forEach((row, i) => {
+          const group = row.outline?.group;
+          if (!group) return;
+          const depth = row.outline?.depth ?? 0;
+          let end = i;
+          while (end + 1 < rows.length && (rows[end + 1]?.outline?.depth ?? 0) > depth) end += 1;
+          const last = (rows[end] as ListRowPlan).row;
+          outlines.push({ group, frame: { x: row.row.x, y: row.row.y, width: row.row.width, height: last.y + last.height - row.row.y } });
+        });
         const card: Rect = { x: cardX, y: cardTop, width: cardWidth, height: y - cardTop };
         if (footerText !== null && footerText.length > 0) {
-          y += LIST_FOOTER_GAP;
+          y += mac ? MAC_LIST_FOOTER_GAP : LIST_FOOTER_GAP;
           const { layout, size } = makeText(footerText, footerFont);
           footer = { rect: { x: contentX, y, width: contentWidth, height: size.height }, layout };
-          y += size.height;
+          y += size.height + (mac ? MAC_LIST_FOOTER_BOTTOM : 0);
         }
         let footerView = supplement(source.footerView, y + LIST_FOOTER_GAP, footerCtx);
         if (footerView && footerView.rect.height > 0) y += LIST_FOOTER_GAP + footerView.rect.height;
@@ -3019,6 +3385,7 @@ export class LayoutPass {
           footerView,
           card,
           rows,
+          outlines,
         });
       }
       const contentHeight = groupsSource.length === 0 ? listTop : y + listBottom;
@@ -3177,7 +3544,7 @@ export class LayoutPass {
       case 'button': {
         const label = this.contentOf(node);
         if (!label) return;
-        if (!this.buttonIsBordered(node)) {
+        if (!this.buttonIsBordered(node, ctx)) {
           this.place(label, cctx, p, x, y);
           return;
         }
@@ -3195,6 +3562,8 @@ export class LayoutPass {
         this.setChrome(node, {
           ...existing,
           label: { x: x + dx, y: y + dy, width: labelSize.width, height: labelSize.height },
+          // The page draws the border on an automatic button the engine bordered (the Mac idiom).
+          bordered: { x, y, width: size.width, height: size.height },
         });
         return;
       }
@@ -3216,9 +3585,10 @@ export class LayoutPass {
         if (isButtonToggle(node)) {
           // the label centered in the button (its fill, while on, the toggle's frame)
           if (!label) return;
+          const m = this.borderedMetrics(node);
           const inner: Proposal = ctx.bottomBarItem
             ? { width: null, height: null }
-            : { width: shrink(p.width, 2 * BORDERED_PAD_H), height: shrink(p.height, 2 * BORDERED_PAD_V) };
+            : { width: shrink(p.width, 2 * m.padH), height: shrink(p.height, 2 * m.padV) };
           const labelSize = this.measure(label, cctx, inner);
           const { dx, dy } = alignIn(size, labelSize, 'center');
           this.place(label, cctx, inner, x + dx, y + dy);
@@ -3226,25 +3596,31 @@ export class LayoutPass {
           this.setChrome(node, { ...existing, label: { x: x + dx, y: y + dy, width: labelSize.width, height: labelSize.height } });
           return;
         }
-        const labelProposal = this.toggleLabelProposal(p);
+        const control = this.switchMetrics(ctx);
+        const labelProposal = this.toggleLabelProposal(ctx, p);
         const labelSize = label ? this.measure(label, cctx, labelProposal) : ZERO;
         const labelY = y + (size.height - labelSize.height) / 2;
-        if (label) this.place(label, cctx, labelProposal, x, labelY);
+        // A checkbox leads its label; a switch trails it.
+        const labelX = control.checkbox ? x + control.width + control.gap : x;
+        if (label) this.place(label, cctx, labelProposal, labelX, labelY);
         const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+        const switchRect: Rect = {
+          x: control.checkbox ? x : x + size.width - control.width,
+          y: y + (size.height - control.height) / 2,
+          width: control.width,
+          height: control.height,
+        };
         this.setChrome(node, {
           ...existing,
           label: {
-            x,
+            x: labelX,
             y: labelY,
-            width: Math.min(labelSize.width, Math.max(0, size.width - SWITCH_WIDTH - TOGGLE_GAP)),
+            width: Math.min(labelSize.width, Math.max(0, size.width - control.width - control.gap)),
             height: labelSize.height,
           },
-          switch: {
-            x: x + size.width - SWITCH_WIDTH,
-            y: y + (size.height - SWITCH_HEIGHT) / 2,
-            width: SWITCH_WIDTH,
-            height: SWITCH_HEIGHT,
-          },
+          switch: switchRect,
+          // The page draws a checkbox at it (the Mac idiom).
+          ...(control.checkbox ? { checkbox: switchRect } : {}),
         });
         return;
       }
@@ -3263,8 +3639,8 @@ export class LayoutPass {
           // Phase 7: the selected row of a `navsplit` sidebar has no chevron
           // (its label still reserves the chevron's width so selecting a row
           // never reflows it); elsewhere `selected` keeps the chevron. No row
-          // of a `sidebar`-style list has one (iPadOS).
-          if (!(node.props['selected'] === true && ctx.splitSidebar) && !(ctx.sidebarList && isRegularWidth(this.env.screen))) {
+          // of a `sidebar`-style list has one (iPadOS), nor any row on a Mac.
+          if (this.env.platform !== 'macos' && !(node.props['selected'] === true && ctx.splitSidebar) && !(ctx.sidebarList && isRegularWidth(this.env.screen))) {
             chrome['chevron'] = {
               x: x + size.width - LIST_CHEVRON_WIDTH,
               y,
@@ -3425,7 +3801,16 @@ export class LayoutPass {
         // Phase 6: the label is placed; the items are only shown in the
         // popover the renderer opens, so they are hidden and have no frames.
         const [label, ...items] = node.children;
-        if (label) this.place(label, cctx, p, x, y);
+        if (this.menuIsPullDown(ctx)) {
+          // The Mac's pull-down button: the label 10 in, centered in the 22 row, the chevron after it.
+          const inner: Proposal = { width: shrink(p.width, 2 * MAC_PULLDOWN_PAD_H + MAC_PULLDOWN_CHEVRON), height: shrink(p.height, 0) };
+          const labelSize = label ? this.measure(label, cctx, inner) : ZERO;
+          if (label) this.place(label, cctx, inner, x + MAC_PULLDOWN_PAD_H, y + (size.height - labelSize.height) / 2);
+          const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+          this.setChrome(node, { ...existing, pulldown: { x, y, width: size.width, height: size.height } });
+        } else if (label) {
+          this.place(label, cctx, p, x, y);
+        }
         for (const item of items) this.hide(item, node);
         return;
       }
@@ -3532,7 +3917,9 @@ 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, labelColumn: true, sidebarList: str(node.props['style']) === 'sidebar' };
+    const rowCtx: Context = { ...this.childContext(node, ctx), listRow: true, labelColumn: this.env.platform !== 'macos', listCell: this.env.platform === 'macos', sidebarList: str(node.props['style']) === 'sidebar' };
+    const mac = this.env.platform === 'macos';
+    const cellPadding = mac ? MAC_LIST_CELL_PADDING : LIST_CELL_PADDING;
     const covered = this.coveredBottom(ctx, x, y, plan.size);
     // Under its screen's bar (and the large title that scrolls with it), the
     // rows start below them.
@@ -3568,7 +3955,7 @@ export class LayoutPass {
           if (placed && placed.width < view.rect.width) this.setFrame(view.node, placed.x, placed.y, { width: view.rect.width, height: placed.height });
         }
         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));
+          this.fonts.set(group.section.id, group.header?.layout.font ?? group.footer?.layout.font ?? makeFont('system', textStyleSize('footnote', this.env.dynamicTypeSize, this.env.platform), 400));
           if (Object.keys(texts).length > 0) this.chromeText.set(group.section.id, texts);
         }
         // A collapsed `Section(isExpanded:)` (sidebar-style list): its rows are hidden, without frames.
@@ -3578,6 +3965,25 @@ export class LayoutPass {
           }
         }
       }
+      // An outline's `disclosuregroup` is not placed through `place` (its label
+      // and content are the rows): its frame is the rect its rows span, which
+      // is its box too (`row`, so the page lays its rows out from it), its
+      // content is hidden while collapsed, and what a pass before hid is shown.
+      for (const outline of group.outlines) {
+        const g = outline.group;
+        const previouslyHidden = this.hiddenBy.get(g);
+        if (previouslyHidden) {
+          for (const id of previouslyHidden) {
+            this.hidden.delete(id);
+            this.touched.add(id);
+          }
+          this.hiddenBy.delete(g);
+        }
+        const frame = offset(outline.frame);
+        this.setFrame(g, frame.x, frame.y, frame);
+        this.setChrome(g, { row: frame });
+        if (g.props['expanded'] !== true) for (const child of g.children.slice(1)) this.hide(child, g);
+      }
       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) };
@@ -3616,6 +4022,14 @@ export class LayoutPass {
           const leading = (textX ?? rowX) - (x + row.row.x);
           placed['separator'] = { x: Math.max(0, leading), y: 0, width: 0, height: 0 };
         }
+        // A group's label row: the group's toggle lies over it, its chevron at the row's trailing edge (as a link's; none on a Mac).
+        const outlineGroup = row.outline?.group;
+        if (outlineGroup && outlineGroup.id >= 0) {
+          const rowRect = offset(row.row);
+          const groupChrome: Record<string, Rect> = { ...this.chrome.get(outlineGroup.id), toggle: rowRect };
+          if (!mac) groupChrome['chevron'] = { x: rowRect.x + rowRect.width - cellPadding - LIST_CHEVRON_WIDTH, y: rowRect.y, width: LIST_CHEVRON_WIDTH, height: rowRect.height };
+          this.setChrome(outlineGroup, groupChrome);
+        }
       }
     }
   }
@@ -3682,11 +4096,32 @@ export class LayoutPass {
     // area. `.bottomBar` hidden: the bottom toolbars draw nothing.
     const barHidden = node.props['navigationBarHidden'] === true;
     const bottomBarHidden = node.props['bottomBarHidden'] === true;
+    const parts = this.navScreenParts(node);
+    // The Mac idiom (MAC_* above): the title bar in place of the bar, unified
+    // (52) when anything but the title is in it, plain (28) otherwise; no
+    // large titles. The status bar portion is the window's title bar, which
+    // the unified bar takes over; the row is the whole bar.
+    const mac = this.env.platform === 'macos';
+    const hasBarItems = parts.toolbars.some((t) => {
+      const placement = str(t.props['placement']);
+      return placement !== 'bottom' && placement !== 'keyboard' && placement !== 'largeTitle' && str(t.props['spacer']) === null;
+    });
+    const searchInBar = mac && parts.search !== null && !barHidden;
+    // A Mac tab view's toolbar row (the window's top): the tab's root screen
+    // draws its bar as that row, without a title (the tab picker is there).
+    const tabToolbar = mac && cctx.tabToolbar !== undefined && y <= cctx.tabToolbar.y + EPSILON ? cctx.tabToolbar : undefined;
+    // A Mac sheet's root screen: the sheet's 40 title bar, its text actions in the sheet's bottom bar.
+    const sheetBar = mac && depth === 0 && cctx.macSheet !== undefined ? cctx.macSheet : undefined;
+    const actionToolbars = sheetBar?.actions ? this.macSheetActionToolbars(node) : [];
+    const unified = mac && tabToolbar === undefined && sheetBar === undefined && (depth > 0 || hasBarItems || searchInBar || (cctx.barLeading ?? 0) > 0 || cctx.splitColumn === true);
+    const rowHeight = mac ? (tabToolbar ? tabToolbar.height : sheetBar ? MAC_SHEET_TITLE_BAR : unified ? MAC_TITLE_BAR_UNIFIED : MAC_TITLE_BAR_PLAIN) : NAV_BAR_HEIGHT;
+    const glass = mac ? MAC_BAR_ITEM_SIZE : NAV_GLASS_SIZE;
+    const glassPad = mac ? MAC_BAR_ITEM_PAD_H : NAV_GLASS_PAD_H;
+    const runGap = mac ? MAC_BAR_RUN_GAP : NAV_RUN_GAP;
     // A compact height (a phone on its side) has no large titles, whatever the
     // display mode, as UIKit: the title is the bar's inline one.
-    const large = !barHidden && screen.height >= REGULAR_HEIGHT && (displayMode === 'large' || (displayMode === 'automatic' && depth === 0));
-    const barHeight = barHidden ? statusBar : statusBar + NAV_BAR_HEIGHT + (!large && y <= 0 ? NAV_BAR_INLINE_BOTTOM : 0);
-    const parts = this.navScreenParts(node);
+    const large = !mac && !barHidden && screen.height >= REGULAR_HEIGHT && (displayMode === 'large' || (displayMode === 'automatic' && depth === 0));
+    const barHeight = barHidden ? statusBar : mac ? Math.max(statusBar, rowHeight) : statusBar + NAV_BAR_HEIGHT + (!large && y <= 0 ? NAV_BAR_INLINE_BOTTOM : 0);
     const reachesBottom = y + size.height >= screen.height - EPSILON;
     const isSpacer = (t: LayoutNode): boolean => str(t.props['spacer']) !== null;
     const placementOf = (t: LayoutNode): string | null => str(t.props['placement']);
@@ -3712,9 +4147,9 @@ export class LayoutPass {
       : 0;
     // In a tab view (a tab bar covers the bottom) the field goes under the
     // title, as iOS 26 places it; elsewhere it floats at the bottom.
-    const searchOnTop = parts.search !== null && cctx.bottomBar > 0;
+    const searchOnTop = !mac && parts.search !== null && cctx.bottomBar > 0;
     const searchRow = searchOnTop ? SEARCH_TOP_ROW : 0;
-    const searchBottom = parts.search && !searchOnTop ? SEARCH_BOTTOM_HEIGHT + searchMargin : 0;
+    const searchBottom = parts.search && !searchOnTop && !searchInBar ? SEARCH_BOTTOM_HEIGHT + searchMargin : 0;
     // The on-screen keyboard (device mode) covers the screen's bottom. A
     // bottom search field rises above it, as iOS 26 docks it on the
     // keyboard, so what is typed into it can be seen; the bars stay put,
@@ -3726,20 +4161,26 @@ export class LayoutPass {
     const keyboard = keyboardBarShown ? KEYBOARD_BAR_HEIGHT + KEYBOARD_BAR_GAP + (keyboardAlone > 0 ? keyboardAlone : reachesBottom ? safeArea.bottom : 0) : keyboardAlone;
     const searchLift = searchBottom > 0 ? keyboard : 0;
     const contentTop = barHeight + largeHeight + searchRow;
+    const actionsBar = sheetBar?.actions ? sheetBar.actions.height : 0;
     const content: Rect = {
       x,
       y: y + contentTop,
       width: size.width,
-      height: Math.max(0, size.height - contentTop - Math.max(bottomBarHeight, searchBottom)),
+      height: Math.max(0, size.height - contentTop - Math.max(bottomBarHeight, searchBottom) - actionsBar),
     };
     const chrome: Record<string, Rect> = { content };
     if (!barHidden) {
       chrome['bar'] = { x: barX, y, width: barWidth, height: barHeight };
-      // The 44 row the bar's items sit in, under the status bar.
-      chrome['barRow'] = { x, y: y + statusBar, width: size.width, height: NAV_BAR_HEIGHT };
+      // The 44 row the bar's items sit in, under the status bar (on a Mac the
+      // title bar's row, which ends at the bar's bottom).
+      chrome['barRow'] = { x, y: mac ? y + barHeight - rowHeight : y + statusBar, width: size.width, height: rowHeight };
+      // The page styles a unified title bar's title (leading-aligned, larger).
+      if (unified) chrome['unified'] = chrome['barRow'];
+      // The page styles a Mac sheet's title (leading-aligned, 13 bold).
+      if (sheetBar) chrome['sheetBar'] = chrome['barRow'];
     }
     if (large) chrome['largeTitle'] = { x, y: y + barHeight, width: size.width, height: largeHeight };
-    if (parts.search) {
+    if (parts.search && !searchInBar) {
       const marginH = searchOnTop ? SEARCH_FIELD_MARGIN_H : SEARCH_BOTTOM_MARGIN_H;
       chrome['searchField'] = {
         x: x + marginH,
@@ -3758,12 +4199,14 @@ export class LayoutPass {
       chrome['keyboardBar'] = { x: x + KEYBOARD_BAR_MARGIN_H, y: y + size.height - keyboard, width: Math.max(0, size.width - 2 * KEYBOARD_BAR_MARGIN_H), height: KEYBOARD_BAR_HEIGHT };
     }
     const title = str(node.props['title']) ?? '';
-    const titleFont = makeFont('system', textStyleSize('headline', dynamicTypeSize), 600);
-    const largeTitleFont = makeFont('system', textStyleSize('largeTitle', dynamicTypeSize), 700);
-    const backFont = makeFont('system', textStyleSize('body', dynamicTypeSize), 400);
+    const { platform } = this.env;
+    // A unified title bar's title is the window title (15 semibold on macOS 14); a plain bar's and iOS's is the headline.
+    const titleFont = makeFont('system', textStyleSize(unified ? 'title3' : 'headline', dynamicTypeSize, platform), sheetBar ? 700 : 600);
+    const largeTitleFont = makeFont('system', textStyleSize('largeTitle', dynamicTypeSize, platform), 700);
+    const backFont = makeFont('system', textStyleSize('body', dynamicTypeSize, platform), 400);
 
     // Toolbar items at their ideal size, grouped per toolbar.
-    const rowY = y + statusBar;
+    const rowY = (chrome['barRow'] ?? { y: y + statusBar }).y;
     interface Group {
       toolbar: LayoutNode;
       placement: string;
@@ -3779,15 +4222,34 @@ export class LayoutPass {
       ? []
       : parts.toolbars.filter((t) => {
           const placement = placementOf(t);
-          return placement !== 'bottom' && placement !== 'secondary' && placement !== 'largeTitle' && placement !== 'keyboard' && !isSpacer(t);
+          return placement !== 'bottom' && placement !== 'secondary' && placement !== 'largeTitle' && placement !== 'keyboard' && !isSpacer(t) && !actionToolbars.includes(t);
+        });
+    // A Mac sheet's actions: 22 push buttons at the trailing end of the
+    // sheet's bottom bar, the trailing placement's (confirm) last, 8 apart.
+    if (sheetBar?.actions) {
+      const actions = sheetBar.actions;
+      let cursor = actions.x + actions.width - MAC_SHEET_ACTIONS_INSET;
+      const ordered = [...actionToolbars.filter((t) => placementOf(t) === 'trailing'), ...actionToolbars.filter((t) => placementOf(t) === 'leading')];
+      for (const toolbar of ordered) {
+        const itemCtx: Context = { ...this.childContext(toolbar, cctx), navBarItem: false };
+        let first = cursor;
+        let last = cursor;
+        [...toolbar.children].reverse().forEach((item) => {
+          const itemSize = this.measure(item, itemCtx, { width: null, height: null });
+          this.place(item, itemCtx, { width: null, height: null }, cursor - itemSize.width, actions.y + (actions.height - itemSize.height) / 2);
+          first = cursor - itemSize.width;
+          cursor = first - MAC_SHEET_ACTIONS_GAP;
         });
+        this.setFrame(toolbar, first, actions.y, { width: Math.max(0, last - first), height: actions.height });
+      }
+    }
     const secondaryToolbars = barHidden ? [] : parts.toolbars.filter((t) => placementOf(t) === 'secondary' && !isSpacer(t));
     const groups: Group[] = barToolbars.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, i) => navSlot(toolbar.children[i] as LayoutNode, s.width));
+        const slots = sizes.map((s, i) => navSlot(toolbar.children[i] as LayoutNode, s.width, glass, glassPad));
         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;
@@ -3811,7 +4273,7 @@ export class LayoutPass {
     const runWidth = (run: Run): number => {
       const slots = run.groups.flatMap((g) => g.slots ?? []);
       if (slots.length === 0) return 0;
-      const inner = slots.reduce((sum, w) => sum + w, 0) + (slots.length - 1) * NAV_RUN_GAP;
+      const inner = slots.reduce((sum, w) => sum + w, 0) + (slots.length - 1) * runGap;
       return slots.length > 1 ? inner + 2 * NAV_RUN_PAD : inner;
     };
     for (const toolbar of parts.toolbars) {
@@ -3868,7 +4330,7 @@ export class LayoutPass {
       const itemCtx = this.childContext(toolbar, cctx);
       return toolbar.children.map((item) => {
         const itemSize = this.measure(item, itemCtx, { width: null, height: null });
-        return { toolbar, item, size: itemSize, slot: navSlot(item, itemSize.width) };
+        return { toolbar, item, size: itemSize, slot: navSlot(item, itemSize.width, glass, glassPad) };
       });
     });
     // Items of one toolbar share its glass capsule; separate toolbars sit 12 apart, as the trailing runs do.
@@ -3895,26 +4357,38 @@ export class LayoutPass {
         }
         return out;
       };
-      inlineSecondary = secondaryWidth(secondaryItems) <= roomEnd - roomStart ? secondaryItems : fitting(roomEnd - roomStart - NAV_GLASS_SIZE - NAV_GROUP_SPACING);
+      inlineSecondary = secondaryWidth(secondaryItems) <= roomEnd - roomStart ? secondaryItems : fitting(roomEnd - roomStart - glass - NAV_GROUP_SPACING);
     }
     const collapsedSecondary = secondaryItems.filter((entry) => !inlineSecondary.includes(entry));
 
     // Back button, iOS 26: the chevron alone in a glass circle (the previous
     // title no longer shows).
     const backLabel = '';
-    const leadingStart = x + NAV_ITEM_MARGIN + (cctx.barLeading ?? 0);
+    // A Mac window's own title bar (the top of the screen, a title bar in the
+    // safe area) starts with the window buttons; the items follow them.
+    const windowButtons = mac && y <= 0 && barX <= EPSILON && safeArea.top > 0;
+    const leadingStart = x + (windowButtons ? MAC_WINDOW_BUTTONS_ROOM : NAV_ITEM_MARGIN) + (cctx.barLeading ?? 0);
+    const glassY = rowY + (rowHeight - glass) / 2;
     if (depth > 0 && !barHidden) {
-      chrome['back'] = { x: leadingStart, y: rowY, width: NAV_GLASS_SIZE, height: NAV_GLASS_SIZE };
+      chrome['back'] = { x: leadingStart, y: glassY, width: glass, height: glass };
     }
 
     // Place the toolbar groups and remember how much of the row they occupy.
     const back = chrome['back'];
     let leadingCursor = back ? back.x + back.width + NAV_GROUP_SPACING : leadingStart;
-    let trailingEdge = x + size.width - NAV_ITEM_MARGIN;
+    let trailingEdge = x + size.width - (mac ? (tabToolbar ? MAC_TAB_TOOLBAR_MARGIN_TRAILING : MAC_BAR_MARGIN_TRAILING) : NAV_ITEM_MARGIN);
+    // On a Mac the search field is the trailing-most item of the title bar
+    // (chrome `searchBar` tells the page to draw it as the toolbar's field).
+    if (searchInBar) {
+      const width = Math.max(0, Math.min(MAC_SEARCH_FIELD_WIDTH, trailingEdge - leadingStart));
+      chrome['searchField'] = { x: trailingEdge - width, y: rowY + (rowHeight - MAC_SEARCH_FIELD_HEIGHT) / 2, width, height: MAC_SEARCH_FIELD_HEIGHT };
+      chrome['searchBar'] = chrome['searchField'];
+      trailingEdge -= width + NAV_GROUP_SPACING;
+    }
     // The More button is the trailing-most item.
     if (collapsedSecondary.length > 0) {
-      chrome['more'] = { x: trailingEdge - NAV_GLASS_SIZE, y: rowY, width: NAV_GLASS_SIZE, height: NAV_GLASS_SIZE };
-      trailingEdge -= NAV_GLASS_SIZE + NAV_GROUP_SPACING;
+      chrome['more'] = { x: trailingEdge - glass, y: glassY, width: glass, height: glass };
+      trailingEdge -= glass + NAV_GROUP_SPACING;
     }
     const placeGroup = (group: Group, startX: number, top: number, rowHeight: number, spacing: number): void => {
       const itemCtx = this.childContext(group.toolbar, cctx);
@@ -3937,7 +4411,7 @@ export class LayoutPass {
     const placeRun = (run: Run, startX: number): void => {
       const margin = run.segmented ? BAR_SEGMENTED_MARGIN : 0;
       if (!run.bare) {
-        chrome[`${run.placement}Glass${glassCount[run.placement]++}`] = { x: startX + margin, y: rowY, width: Math.max(0, run.width - 2 * margin), height: NAV_BAR_HEIGHT };
+        chrome[`${run.placement}Glass${glassCount[run.placement]++}`] = { x: startX + margin, y: glassY, width: Math.max(0, run.width - 2 * margin), height: glass };
       }
       const count = run.groups.reduce((sum, g) => sum + (g.slots?.length ?? 0), 0);
       let cursor = startX + (count > 1 ? NAV_RUN_PAD : 0);
@@ -3947,11 +4421,17 @@ export class LayoutPass {
         group.toolbar.children.forEach((item, i) => {
           const itemSize = group.sizes[i] as Size;
           const slot = group.slots?.[i] ?? itemSize.width;
-          this.place(item, itemCtx, { width: null, height: null }, cursor + (slot - itemSize.width) / 2, rowY + (NAV_BAR_HEIGHT - itemSize.height) / 2);
-          cursor += slot + NAV_RUN_GAP;
+          this.place(item, itemCtx, { width: null, height: null }, cursor + (slot - itemSize.width) / 2, rowY + (rowHeight - itemSize.height) / 2);
+          // A Mac toolbar's text button is a bordered 28 button at its slot
+          // (chrome `bordered`, drawn by the page at that rect); an icon is bare.
+          if (mac && !run.bare && !isSymbolItem(item) && unwrapStyled(item).kind === 'button' && item.id >= 0) {
+            const existing = this.chrome.get(item.id);
+            this.setChrome(item, { ...existing, bordered: { x: cursor, y: glassY, width: slot, height: glass } });
+          }
+          cursor += slot + runGap;
         });
-        const last = group.toolbar.children.length > 0 ? cursor - NAV_RUN_GAP : first;
-        this.setFrame(group.toolbar, first, rowY, { width: last - first, height: NAV_BAR_HEIGHT });
+        const last = group.toolbar.children.length > 0 ? cursor - runGap : first;
+        this.setFrame(group.toolbar, first, rowY, { width: last - first, height: rowHeight });
       }
     };
     for (const run of runs.filter((r) => r.placement === 'leading')) {
@@ -3970,8 +4450,8 @@ export class LayoutPass {
     for (const group of groups) {
       if (group.placement !== 'principal') continue;
       const startX = x + (size.width - group.total) / 2;
-      this.setFrame(group.toolbar, startX, rowY, { width: group.total, height: NAV_BAR_HEIGHT });
-      placeGroup(group, startX, rowY, NAV_BAR_HEIGHT, NAV_ITEM_SPACING);
+      this.setFrame(group.toolbar, startX, rowY, { width: group.total, height: rowHeight });
+      placeGroup(group, startX, rowY, rowHeight, NAV_ITEM_SPACING);
     }
     // The inline secondary items, right-aligned before the trailing groups,
     // each toolbar framed around its own; the collapsed ones are hidden (the
@@ -3983,12 +4463,12 @@ export class LayoutPass {
       for (const [i, entry] of inlineSecondary.entries()) {
         cursor += secondaryGap(inlineSecondary[i - 1], entry);
         const itemCtx = this.childContext(entry.toolbar, cctx);
-        this.place(entry.item, itemCtx, { width: null, height: null }, cursor + (entry.slot - entry.size.width) / 2, rowY + (NAV_BAR_HEIGHT - entry.size.height) / 2);
+        this.place(entry.item, itemCtx, { width: null, height: null }, cursor + (entry.slot - entry.size.width) / 2, rowY + (rowHeight - entry.size.height) / 2);
         const extent = extents.get(entry.toolbar);
         extents.set(entry.toolbar, { start: extent?.start ?? cursor, end: cursor + entry.slot });
         cursor += entry.slot;
       }
-      for (const [toolbar, extent] of extents) this.setFrame(toolbar, extent.start, rowY, { width: extent.end - extent.start, height: NAV_BAR_HEIGHT });
+      for (const [toolbar, extent] of extents) this.setFrame(toolbar, extent.start, rowY, { width: extent.end - extent.start, height: rowHeight });
       trailingEdge -= total + NAV_GROUP_SPACING;
     }
     for (const toolbar of secondaryToolbars) {
@@ -4046,7 +4526,19 @@ export class LayoutPass {
     const titleScrolls = large && scroller !== null;
     // 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 && !barHidden) {
+    if (tabToolbar) {
+      // The tab picker stands where the title would be.
+    } else if ((unified || sheetBar) && !principal && !barHidden) {
+      // The unified title bar's title (and a Mac sheet's): leading-aligned
+      // after the back button and the leading items (2 past the window
+      // buttons' room when nothing is before it), cut to the room before
+      // the trailing ones.
+      const trailingUsed = trailingWidth > 0 || chrome['more'] !== undefined || inlineSecondary.length > 0 || searchInBar;
+      const titleX = Math.max(leadingStart + (unified && windowButtons && !back && leadingWidth === 0 && (cctx.barLeading ?? 0) === 0 ? MAC_TITLE_INSET : 0), leadingCursor);
+      const roomEnd = trailingUsed ? trailingEdge + NAV_GROUP_SPACING - 8 : x + size.width - NAV_ITEM_MARGIN;
+      const titleWidth = Math.min(Math.ceil(this.measurer.measureWidth(title, titleFont) - 0.001), Math.floor(Math.max(0, roomEnd - titleX)));
+      chrome['title'] = { x: titleX, y: rowY, width: titleWidth, height: rowHeight };
+    } else if ((!large || titleScrolls) && !principal && !barHidden) {
       const leftUsed = Math.max(
         back ? back.x + back.width - x : 0,
         leadingWidth > 0 ? leadingCursor - NAV_GROUP_SPACING - x : 0,
@@ -4067,14 +4559,14 @@ export class LayoutPass {
       );
       const centered = x + (size.width - titleWidth) / 2;
       const titleX = Math.max(roomStart, Math.min(centered, roomEnd - titleWidth));
-      chrome['title'] = { x: titleX, y: rowY, width: titleWidth, height: NAV_BAR_HEIGHT };
+      chrome['title'] = { x: titleX, y: rowY, width: titleWidth, height: rowHeight };
     }
     this.setChrome(node, chrome);
 
     if (node.id >= 0) {
       this.fonts.set(node.id, large ? largeTitleFont : titleFont);
       const texts: Record<string, TextLayout> = {
-        title: { font: titleFont, lines: [title], alignment: 'center', truncated: false },
+        title: { font: titleFont, lines: [title], alignment: unified || sheetBar ? 'leading' : 'center', truncated: false },
       };
       if (depth > 0) texts['back'] = { font: backFont, lines: [backLabel], alignment: 'leading', truncated: false };
       if (large) {
@@ -4324,6 +4816,10 @@ export class LayoutPass {
    */
   private placeTabView(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
     const { screen } = this.env;
+    if (this.env.platform === 'macos') {
+      this.placeMacTabView(node, cctx, x, y, size);
+      return;
+    }
     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);
@@ -4363,6 +4859,64 @@ export class LayoutPass {
     });
   }
 
+  /**
+   * The Mac idiom's tab view (MAC_TAB_* above): the bar is a segmented
+   * control centered in a 44 row at the top of the content, below the
+   * window's title bar when the tab view is at the top of the screen; the
+   * content is the rest, and the selected tab fills it (its own `navstack`
+   * reserves no status bar there: the row is above it). Chrome `top` marks
+   * the bar as the top one for the page.
+   */
+  private placeMacTabView(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
+    const { safeArea } = this.env;
+    // At the top of the window the row is the window's toolbar (38, the
+    // title bar included); lower down, a 38 row at the top of the content.
+    const atTop = y <= 0 && safeArea.top > 0;
+    const topInset = atTop ? 0 : y <= 0 ? safeArea.top : 0;
+    const tabs = node.children;
+    const n = tabs.length;
+    // Each segment is its title (13 regular) and 12 either side.
+    const font = makeFont('system', MAC_SEGMENTED_FONT_SIZE, 400);
+    const itemWidths = tabs.map((tab) => this.measurer.measureWidth(str(tab.props['title']) ?? '', font) + 2 * MAC_TAB_ITEM_PAD_H);
+    const natural = itemWidths.reduce((sum, w) => sum + w, 0) + 2 * MAC_TAB_ITEM_INSET;
+    const width = Math.min(Math.max(0, size.width - 2 * MAC_TAB_BAR_MARGIN_H), natural);
+    const scale = natural > 0 ? width / natural : 1;
+    const rowHeight = Math.min(MAC_TAB_ROW_HEIGHT, Math.max(0, size.height - topInset));
+    const bar: Rect = { x: x + (size.width - width) / 2, y: y + topInset + (rowHeight - MAC_TAB_BAR_HEIGHT) / 2, width, height: Math.min(MAC_TAB_BAR_HEIGHT, rowHeight) };
+    const toolbar: Rect = { x, y: y + topInset, width: size.width, height: rowHeight };
+    const contentTop = topInset + rowHeight;
+    const content: Rect = { x, y: y + contentTop, width: size.width, height: Math.max(0, size.height - contentTop) };
+    const chrome: Record<string, Rect> = { bar, content, top: bar };
+    let itemX = bar.x + MAC_TAB_ITEM_INSET;
+    for (let i = 0; i < n; i++) {
+      const itemWidth = (itemWidths[i] as number) * scale;
+      chrome[`item${i}`] = { x: itemX, y: bar.y + MAC_TAB_ITEM_INSET, width: itemWidth, height: Math.max(0, bar.height - 2 * MAC_TAB_ITEM_INSET) };
+      itemX += itemWidth;
+    }
+    this.setChrome(node, chrome);
+    const selected = readSelected(node, n);
+    const tabCtx: Context = { ...cctx, bottomEdge: undefined, barAbove: undefined };
+    const contentSize: Size = { width: content.width, height: content.height };
+    tabs.forEach((tab, i) => {
+      if (i !== selected) {
+        this.setFrame(tab, content.x, content.y, contentSize);
+        this.hide(tab, node);
+        return;
+      }
+      const child = this.contentOf(tab);
+      // A navigation stack at the window's top fills the tab: its root
+      // screen draws the toolbar row as its bar (`tabToolbar`), with the
+      // picker over it; anything else starts under the row.
+      if (atTop && child && unwrapStyled(child).kind === 'navstack') {
+        this.setFrame(tab, x, y, size);
+        this.placeTabContent(tab, this.childContext(tab, { ...tabCtx, tabToolbar: toolbar }), x, y, size, 0);
+        return;
+      }
+      this.setFrame(tab, content.x, content.y, contentSize);
+      this.placeTabContent(tab, this.childContext(tab, tabCtx), content.x, content.y, contentSize, 0);
+    });
+  }
+
   /**
    * The selected tab's content, like a navscreen's: a `navstack` fills the
    * whole tab (it reserves the status bar itself and its lists run under the
@@ -4430,7 +4984,7 @@ export class LayoutPass {
     const leading = x <= 0 ? safeArea.leading : 0;
     const trailing = x + size.width >= screen.width - EPSILON ? safeArea.trailing : 0;
     const usable = Math.max(0, size.width - leading - trailing);
-    const sidebarWidth = Math.min(NAVSPLIT_SIDEBAR_WIDTH, usable * NAVSPLIT_SIDEBAR_MAX_FRACTION);
+    const sidebarWidth = Math.min(this.env.platform === 'macos' ? MAC_NAVSPLIT_SIDEBAR_WIDTH : NAVSPLIT_SIDEBAR_WIDTH, usable * NAVSPLIT_SIDEBAR_MAX_FRACTION);
     const visible = node.props['sidebarVisible'] !== false;
     // Hidden, the sidebar and its separator sit just off the leading edge.
     const sidebarX = visible ? x + leading : x - sidebarWidth - NAVSPLIT_SEPARATOR_WIDTH;
@@ -4438,22 +4992,29 @@ export class LayoutPass {
     const detailX = visible ? separatorX + NAVSPLIT_SEPARATOR_WIDTH : x + leading;
     const detailWidth = Math.max(0, x + size.width - trailing - detailX);
     const statusBar = y <= 0 ? safeArea.top : 0;
+    // On a Mac the toggle is a 28 button centered in the unified title bar's
+    // row (which the columns' screens lay out: `placeNavScreen`), after the
+    // window buttons when the split view is at the top of the screen.
+    const mac = this.env.platform === 'macos';
+    const toggleSize = mac ? MAC_BAR_ITEM_SIZE : NAV_GLASS_SIZE;
+    const toggleX = x + leading + (mac && y <= 0 && x <= EPSILON && safeArea.top > 0 ? MAC_WINDOW_BUTTONS_ROOM : NAV_ITEM_MARGIN);
+    const toggleY = mac ? y + Math.max(statusBar, MAC_TITLE_BAR_UNIFIED) - (MAC_TITLE_BAR_UNIFIED + toggleSize) / 2 : y + statusBar;
     const chrome: Record<string, Rect> = {
       sidebar: { x: visible ? x : sidebarX, y, width: visible ? leading + sidebarWidth : sidebarWidth, height: size.height },
       separator: { x: separatorX, y, width: NAVSPLIT_SEPARATOR_WIDTH, height: size.height },
       detail: { x: visible ? detailX : x, y, width: Math.max(0, x + size.width - (visible ? detailX : x)), height: size.height },
-      toggle: { x: x + leading + NAV_ITEM_MARGIN, y: y + statusBar, width: NAV_GLASS_SIZE, height: NAV_GLASS_SIZE },
+      toggle: { x: toggleX, y: toggleY, width: toggleSize, height: toggleSize },
     };
     this.setChrome(node, chrome);
-    const toggleRoom = NAV_GLASS_SIZE + NAV_GROUP_SPACING;
+    const toggleRoom = toggleSize + NAV_GROUP_SPACING;
     const [sidebar, detail, ...rest] = node.children;
     if (sidebar) {
       const proposal: Proposal = { width: sidebarWidth, height: size.height };
-      this.place(sidebar, { ...cctx, splitSidebar: true, barLeading: visible ? toggleRoom : 0 }, proposal, sidebarX, y);
+      this.place(sidebar, { ...cctx, splitSidebar: true, splitColumn: true, barLeading: visible ? toggleRoom : 0 }, proposal, sidebarX, y);
     }
     if (detail) {
       const proposal: Proposal = { width: detailWidth, height: size.height };
-      this.place(detail, { ...cctx, splitSidebar: false, barLeading: visible ? 0 : toggleRoom }, proposal, detailX, y);
+      this.place(detail, { ...cctx, splitSidebar: false, splitColumn: true, barLeading: visible ? 0 : toggleRoom }, proposal, detailX, y);
     }
     for (const extra of rest) this.hide(extra, node);
   }
@@ -4577,16 +5138,29 @@ export class LayoutPass {
   }
 
   private stepperLabelProposal(p: Proposal): Proposal {
-    return { width: shrink(p.width, STEPPER_WIDTH + STEPPER_GAP), height: p.height };
+    const control = this.stepperMetrics();
+    return { width: shrink(p.width, control.width + control.gap), height: p.height };
   }
 
   /** Like a toggle: the label leads, the 94 × 32 control trails; at least 32 high. */
+  /** The Mac idiom: a menu outside a bar and a list row is a pull-down button. */
+  private menuIsPullDown(ctx: Context): boolean {
+    return this.env.platform === 'macos' && !ctx.listRow && !ctx.navBarItem && !ctx.bottomBarItem;
+  }
+
+  /** The stepper's control: iOS's segmented −/+, or the Mac's 13 × 22 arrows. */
+  private stepperMetrics(): { width: number; height: number; gap: number; mac: boolean } {
+    if (this.env.platform === 'macos') return { width: MAC_STEPPER_WIDTH, height: MAC_STEPPER_HEIGHT, gap: MAC_STEPPER_GAP, mac: true };
+    return { width: STEPPER_WIDTH, height: STEPPER_HEIGHT, gap: STEPPER_GAP, mac: false };
+  }
+
   private measureStepper(node: LayoutNode, ctx: Context, p: Proposal): Size {
     const label = this.contentOf(node);
+    const control = this.stepperMetrics();
     const labelSize = label ? this.measure(label, this.childContext(node, ctx), this.stepperLabelProposal(p)) : ZERO;
     return {
-      width: finite(p.width) ? p.width : labelSize.width + STEPPER_GAP + STEPPER_WIDTH,
-      height: Math.max(labelSize.height, STEPPER_HEIGHT),
+      width: finite(p.width) ? p.width : labelSize.width + control.gap + control.width,
+      height: Math.max(labelSize.height, control.height),
     };
   }
 
@@ -4597,21 +5171,28 @@ export class LayoutPass {
     const labelSize = label ? this.measure(label, cctx, labelProposal) : ZERO;
     const labelY = y + (size.height - labelSize.height) / 2;
     if (label) this.place(label, cctx, labelProposal, x, labelY);
-    const controlX = x + size.width - STEPPER_WIDTH;
-    const controlY = y + (size.height - STEPPER_HEIGHT) / 2;
-    const half = STEPPER_WIDTH / 2;
+    const control = this.stepperMetrics();
+    const controlX = x + size.width - control.width;
+    const controlY = y + (size.height - control.height) / 2;
     const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+    // iOS: − and + side by side; a Mac: up (increment) over down.
+    const half = control.mac ? control.height / 2 : control.width / 2;
     this.setChrome(node, {
       ...existing,
       label: {
         x,
         y: labelY,
-        width: Math.min(labelSize.width, Math.max(0, size.width - STEPPER_WIDTH - STEPPER_GAP)),
+        width: Math.min(labelSize.width, Math.max(0, size.width - control.width - control.gap)),
         height: labelSize.height,
       },
-      control: { x: controlX, y: controlY, width: STEPPER_WIDTH, height: STEPPER_HEIGHT },
-      decrement: { x: controlX, y: controlY, width: half, height: STEPPER_HEIGHT },
-      increment: { x: controlX + half, y: controlY, width: half, height: STEPPER_HEIGHT },
+      control: { x: controlX, y: controlY, width: control.width, height: control.height },
+      decrement: control.mac
+        ? { x: controlX, y: controlY + half, width: control.width, height: half }
+        : { x: controlX, y: controlY, width: half, height: control.height },
+      increment: control.mac
+        ? { x: controlX, y: controlY, width: control.width, height: half }
+        : { x: controlX + half, y: controlY, width: half, height: control.height },
+      ...(control.mac ? { arrows: { x: controlX, y: controlY, width: control.width, height: control.height } } : {}),
     });
   }
 
@@ -4622,6 +5203,12 @@ export class LayoutPass {
    * names the slider for VoiceOver): the page hides it and names the slider
    * from it (`aria-labelledby`). Children are named by `labels` in order.
    */
+  /** The slider's row, track and knob: iOS 26's pill knob, or the Mac's round one. */
+  private sliderMetrics(): { height: number; track: number; thumb: number; thumbHeight: number; mac: boolean } {
+    if (this.env.platform === 'macos') return { height: MAC_SLIDER_HEIGHT, track: MAC_SLIDER_TRACK_HEIGHT, thumb: MAC_SLIDER_THUMB, thumbHeight: MAC_SLIDER_THUMB, mac: true };
+    return { height: SLIDER_HEIGHT, track: SLIDER_TRACK_HEIGHT, thumb: SLIDER_THUMB, thumbHeight: SLIDER_THUMB_HEIGHT, mac: false };
+  }
+
   private sliderPlan(node: LayoutNode, ctx: Context, p: Proposal): SliderPlan {
     return this.plan(node, ctx, p, () => {
       const width = finite(p.width) ? p.width : SLIDER_DEFAULT_WIDTH;
@@ -4638,7 +5225,7 @@ export class LayoutPass {
       });
       const minSize = min ? this.measure(min, cctx, NIL_PROPOSAL) : ZERO;
       const maxSize = max ? this.measure(max, cctx, NIL_PROPOSAL) : ZERO;
-      return { size: { width, height: SLIDER_HEIGHT }, label, min, max, minSize, maxSize, cctx };
+      return { size: { width, height: this.sliderMetrics().height }, label, min, max, minSize, maxSize, cctx };
     });
   }
 
@@ -4646,35 +5233,38 @@ export class LayoutPass {
     const plan = this.sliderPlan(node, ctx, p);
     const { cctx } = plan;
     if (plan.label) this.hide(plan.label, node);
+    const m = this.sliderMetrics();
     const rowY = y;
     let trackX = x;
     let trackEnd = x + size.width;
     if (plan.min) {
-      this.place(plan.min, cctx, NIL_PROPOSAL, x, rowY + (SLIDER_HEIGHT - plan.minSize.height) / 2);
+      this.place(plan.min, cctx, NIL_PROPOSAL, x, rowY + (m.height - plan.minSize.height) / 2);
       trackX += plan.minSize.width + SLIDER_LABEL_GAP;
     }
     if (plan.max) {
-      this.place(plan.max, cctx, NIL_PROPOSAL, x + size.width - plan.maxSize.width, rowY + (SLIDER_HEIGHT - plan.maxSize.height) / 2);
+      this.place(plan.max, cctx, NIL_PROPOSAL, x + size.width - plan.maxSize.width, rowY + (m.height - plan.maxSize.height) / 2);
       trackEnd -= plan.maxSize.width + SLIDER_LABEL_GAP;
     }
     const trackWidth = Math.max(0, trackEnd - trackX);
-    const trackY = rowY + (SLIDER_HEIGHT - SLIDER_TRACK_HEIGHT) / 2;
+    const trackY = rowY + (m.height - m.track) / 2;
     const fraction = sliderFraction(num(node.props['value']) ?? 0, num(node.props['min']) ?? 0, num(node.props['max']) ?? 1);
     // The thumb travels inside the track: its center runs from half a thumb
     // past the track's start to half a thumb before its end.
-    const travel = Math.max(0, trackWidth - SLIDER_THUMB);
-    const thumbCenter = trackX + SLIDER_THUMB / 2 + fraction * travel;
+    const travel = Math.max(0, trackWidth - m.thumb);
+    const thumbCenter = trackX + m.thumb / 2 + fraction * travel;
     const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
     this.setChrome(node, {
       ...existing,
-      track: { x: trackX, y: trackY, width: trackWidth, height: SLIDER_TRACK_HEIGHT },
-      fill: { x: trackX, y: trackY, width: Math.max(0, thumbCenter - trackX), height: SLIDER_TRACK_HEIGHT },
+      track: { x: trackX, y: trackY, width: trackWidth, height: m.track },
+      fill: { x: trackX, y: trackY, width: Math.max(0, thumbCenter - trackX), height: m.track },
       thumb: {
-        x: thumbCenter - SLIDER_THUMB / 2,
-        y: rowY + (SLIDER_HEIGHT - SLIDER_THUMB_HEIGHT) / 2,
-        width: SLIDER_THUMB,
-        height: SLIDER_THUMB_HEIGHT,
+        x: thumbCenter - m.thumb / 2,
+        y: rowY + (m.height - m.thumbHeight) / 2,
+        width: m.thumb,
+        height: m.thumbHeight,
       },
+      // The page draws the Mac's round knob (styles.css).
+      ...(m.mac ? { knob: { x: thumbCenter - m.thumb / 2, y: rowY + (m.height - m.thumbHeight) / 2, width: m.thumb, height: m.thumbHeight } } : {}),
     });
   }
 
@@ -4691,17 +5281,20 @@ export class LayoutPass {
       const timeZone = str(node.props['timeZone']) ?? undefined;
       const dateText = components === 'hourAndMinute' ? null : formatPickerDate(seconds, timeZone);
       const timeText = components === 'date' ? null : formatPickerTime(seconds, timeZone);
+      const mac = this.env.platform === 'macos';
+      const capsulePad = mac ? MAC_DATEPICKER_CAPSULE_PAD_H : DATEPICKER_CAPSULE_PAD_H;
+      const capsuleGap = mac ? MAC_DATEPICKER_CAPSULE_GAP : DATEPICKER_CAPSULE_GAP;
       const capsule = (text: string | null): number =>
-        text === null ? 0 : this.measurer.measureWidth(text, ctx.font) + 2 * DATEPICKER_CAPSULE_PAD_H;
+        text === null ? 0 : this.measurer.measureWidth(text, ctx.font) + 2 * capsulePad;
       const dateWidth = capsule(dateText);
       const timeWidth = capsule(timeText);
-      const capsulesWidth = dateWidth + timeWidth + (dateText !== null && timeText !== null ? DATEPICKER_CAPSULE_GAP : 0);
+      const capsulesWidth = dateWidth + timeWidth + (dateText !== null && timeText !== null ? capsuleGap : 0);
       const label = node.props['labelsHidden'] === true ? null : this.contentOf(node);
       const labelProposal: Proposal = { width: shrink(p.width, capsulesWidth + DATEPICKER_GAP), height: p.height };
       const labelSize = label ? this.measure(label, cctx, labelProposal) : ZERO;
       const width = finite(p.width) ? p.width : labelSize.width + (label ? DATEPICKER_GAP : 0) + capsulesWidth;
       return {
-        size: { width, height: Math.max(labelSize.height, DATEPICKER_HEIGHT) },
+        size: { width, height: Math.max(labelSize.height, mac ? MAC_DATEPICKER_HEIGHT : DATEPICKER_HEIGHT) },
         label,
         labelProposal,
         labelSize,
@@ -4721,7 +5314,9 @@ export class LayoutPass {
     }
     const labelY = y + (size.height - plan.labelSize.height) / 2;
     if (plan.label) this.place(plan.label, plan.cctx, plan.labelProposal, x, labelY);
-    const capsuleY = y + (size.height - DATEPICKER_HEIGHT) / 2;
+    const mac = this.env.platform === 'macos';
+    const capsuleHeight = mac ? MAC_DATEPICKER_HEIGHT : DATEPICKER_HEIGHT;
+    const capsuleY = y + (size.height - capsuleHeight) / 2;
     const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
     const chrome: Record<string, Rect> = {
       ...existing,
@@ -4734,12 +5329,14 @@ export class LayoutPass {
     };
     let capsuleX = x + size.width - plan.capsulesWidth;
     if (plan.dateWidth > 0) {
-      chrome['date'] = { x: capsuleX, y: capsuleY, width: plan.dateWidth, height: DATEPICKER_HEIGHT };
-      capsuleX += plan.dateWidth + DATEPICKER_CAPSULE_GAP;
+      chrome['date'] = { x: capsuleX, y: capsuleY, width: plan.dateWidth, height: capsuleHeight };
+      capsuleX += plan.dateWidth + (mac ? MAC_DATEPICKER_CAPSULE_GAP : DATEPICKER_CAPSULE_GAP);
     }
     if (plan.timeWidth > 0) {
-      chrome['time'] = { x: capsuleX, y: capsuleY, width: plan.timeWidth, height: DATEPICKER_HEIGHT };
+      chrome['time'] = { x: capsuleX, y: capsuleY, width: plan.timeWidth, height: capsuleHeight };
     }
+    // The page draws the Mac's bordered fields (styles.css).
+    if (mac) chrome['fields'] = { x: x + size.width - plan.capsulesWidth, y: capsuleY, width: plan.capsulesWidth, height: capsuleHeight };
     this.setChrome(node, chrome);
   }
 
@@ -4762,13 +5359,15 @@ export class LayoutPass {
     const chrome: Record<string, Rect> = {};
     const texts: Record<string, TextLayout> = {};
     const roleOf = (child: LayoutNode): string | null => str(unwrapStyled(child).props['role']);
+    // The alert's metrics: iOS's card, or the Mac's panel (`data-sb-panel` for the page).
+    const m = this.env.platform === 'macos' ? MAC_ALERT_METRICS : ALERT_METRICS;
     // `textfield` children (`.alert { TextField(...); Button(...) }`) go in
     // the card between the message and the buttons, in their order.
     const fields = node.children.filter((child) => unwrapStyled(child).kind === 'textfield');
     const buttons = node.children.filter((child) => !fields.includes(child));
     const placeFields = (top: number, left: number, width: number): void => {
       fields.forEach((field, i) => {
-        const rect: Rect = { x: left, y: top + i * (ALERT_FIELD_HEIGHT + ALERT_FIELD_SPACING), width, height: ALERT_FIELD_HEIGHT };
+        const rect: Rect = { x: left, y: top + i * (m.fieldHeight + m.fieldSpacing), width, height: m.fieldHeight };
         chrome[`field${i}`] = rect;
         const proposal: Proposal = { width: rect.width, height: rect.height };
         const fieldSize = this.measure(field, cctx, proposal);
@@ -4776,7 +5375,7 @@ export class LayoutPass {
         this.setFrame(field, rect.x, rect.y, { width: rect.width, height: rect.height });
       });
     };
-    const fieldsHeight = fields.length > 0 ? fields.length * ALERT_FIELD_HEIGHT + (fields.length - 1) * ALERT_FIELD_SPACING : 0;
+    const fieldsHeight = fields.length > 0 ? fields.length * m.fieldHeight + (fields.length - 1) * m.fieldSpacing : 0;
 
     const block = (text: string, font: ResolvedFont, width: number, alignment: 'center' | 'leading'): { layout: TextLayout; height: number } => {
       const wrapped = wrapText(text, font, width, null, this.measurer);
@@ -4788,62 +5387,63 @@ export class LayoutPass {
     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 cardWidth = Math.min(m.width, size.width - 2 * DIALOG_MARGIN);
+      const textWidth = cardWidth - 2 * m.padH;
       const titleFont = resolveFont({ textStyle: 'headline' }, 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 h = m.padTop;
       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 b = block(title, titleFont, textWidth, 'leading');
+        const b = block(title, titleFont, textWidth, m.textAlignment);
         titleBlock = { ...b, top: h };
         h += b.height;
       }
       if (message.length > 0) {
-        if (titleBlock) h += ALERT_TITLE_GAP;
-        const b = block(message, messageFont, textWidth, 'leading');
+        if (titleBlock) h += m.titleGap;
+        const b = block(message, messageFont, textWidth, m.textAlignment);
         messageBlock = { ...b, top: h };
         h += b.height;
       }
       let fieldsTop: number | null = null;
       if (fields.length > 0) {
-        if (titleBlock || messageBlock) h += ALERT_FIELDS_GAP;
+        if (titleBlock || messageBlock) h += m.fieldsGap;
         fieldsTop = h;
         h += fieldsHeight;
       }
-      h += ALERT_BUTTONS_GAP;
+      h += m.buttonsGap;
       const headerHeight = h;
       const rows = buttons.length === 0 ? 1 : buttons.length === 2 ? 1 : buttons.length;
-      h += rows * ALERT_BUTTON_HEIGHT + (rows - 1) * ALERT_BUTTON_SPACING + ALERT_PAD_BOTTOM;
+      h += rows * m.buttonHeight + (rows - 1) * m.buttonSpacing + m.padBottom;
       // 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 (m === MAC_ALERT_METRICS) chrome['panel'] = card;
       if (titleBlock) {
-        chrome['title'] = { x: card.x + ALERT_PAD_H, y: card.y + titleBlock.top, width: textWidth, height: titleBlock.height };
+        chrome['title'] = { x: card.x + m.padH, y: card.y + titleBlock.top, width: textWidth, height: titleBlock.height };
         texts['title'] = titleBlock.layout;
       }
       if (messageBlock) {
-        chrome['message'] = { x: card.x + ALERT_PAD_H, y: card.y + messageBlock.top, width: textWidth, height: messageBlock.height };
+        chrome['message'] = { x: card.x + m.padH, y: card.y + messageBlock.top, width: textWidth, height: messageBlock.height };
         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);
+      const buttonsX = card.x + m.buttonInset;
+      const buttonsWidth = Math.max(0, cardWidth - 2 * m.buttonInset);
       if (fieldsTop !== null) placeFields(card.y + fieldsTop, buttonsX, buttonsWidth);
       if (buttons.length === 0) {
-        chrome['ok'] = { x: buttonsX, y: buttonsTop, width: buttonsWidth, height: ALERT_BUTTON_HEIGHT };
+        chrome['ok'] = { x: buttonsX, y: buttonsTop, width: buttonsWidth, height: m.buttonHeight };
       } else if (buttons.length === 2) {
         // 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;
+        const half = (buttonsWidth - m.rowSpacing) / 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 };
+          const rect: Rect = { x: buttonsX + slot * (half + m.rowSpacing), y: buttonsTop, width: half, height: m.buttonHeight };
           chrome[`button${i}`] = rect;
           this.placeAlertButton(button as LayoutNode, cctx, rect);
         });
@@ -4851,9 +5451,9 @@ export class LayoutPass {
         buttons.forEach((button, i) => {
           const rect: Rect = {
             x: buttonsX,
-            y: buttonsTop + i * (ALERT_BUTTON_HEIGHT + ALERT_BUTTON_SPACING),
+            y: buttonsTop + i * (m.buttonHeight + m.buttonSpacing),
             width: buttonsWidth,
-            height: ALERT_BUTTON_HEIGHT,
+            height: m.buttonHeight,
           };
           chrome[`button${i}`] = rect;
           this.placeAlertButton(button, cctx, rect);
@@ -4905,6 +5505,7 @@ export class LayoutPass {
       }
       const card: Rect = { x: cardX, y: cardBottom - h, width: cardWidth, height: h };
       chrome['card'] = card;
+      if (m === MAC_ALERT_METRICS) chrome['panel'] = card;
       if (titleBlock) {
         chrome['title'] = { x: card.x + DIALOG_HEADER_PAD_H, y: card.y + titleBlock.top, width: textWidth, height: titleBlock.height };
         texts['title'] = titleBlock.layout;
@@ -4994,6 +5595,17 @@ export class LayoutPass {
     const covered = Math.max(0, y + size.height - (this.env.screen.height - this.keyboard));
     const kind = unwrapStyled(child).kind;
     if (kind === 'navstack') {
+      // A Mac sheet: its stack draws the sheet's title bar and puts its text
+      // actions in the bottom bar (chrome `actions`, which the page draws).
+      if (this.env.platform === 'macos' && this.sheetIsForm(node)) {
+        const screen = this.macSheetScreen(node);
+        const actions: Rect | null = screen && this.macSheetActionToolbars(screen).length > 0
+          ? { x, y: y + size.height - MAC_SHEET_ACTIONS_BAR, width: size.width, height: MAC_SHEET_ACTIONS_BAR }
+          : null;
+        if (actions) this.setChrome(node, { ...chrome, actions });
+        this.place(child, { ...cctx, barInset: 0, macSheet: { actions } }, { width: size.width, height: size.height }, x, y);
+        return;
+      }
       this.place(child, { ...cctx, barInset: grabberRow }, { width: size.width, height: size.height }, x, y);
       return;
     }