@swiftbrowser/web 0.26.4 → 0.26.6

package/src/layout/engine.ts

@@ -106,6 +106,8 @@ export interface Context {
    * its icon, as the Mac app draws them.
    */
   listCell?: boolean;
+  /** A row of a Mac's grouped form (macOS 26): a toggle is a switch at the trailing end, a slider's and a text field's label lead their control, a link has its chevron. */
+  groupedRow?: 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
@@ -320,35 +322,45 @@ 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
+// `macos`), measured on macOS 26: the window's title bar stands in for the
+// navigation bar, with no background or rule of its own (the content's
+// color runs up under it). A 52 toolbar holds the back button, the bar items
+// and the title, leading-aligned; a window with nothing in its bar but the
+// title has the compact 32 one, the title leading-aligned after the window
+// buttons. There are no large titles. The items are Liquid Glass, as on iOS
+// 26 but smaller: 36 tall, centered in the bar; an icon a 36 slot,
+// adjacent items in one capsule (the back button in the leading one), a
+// text item a capsule of its own at its width and 10 either side;
+// capsules 8 apart and 8 from the window's edge. 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).
+// window buttons take the first 96 of the toolbar; the title is 12 after
+// whatever is before it.
 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_TITLE_BAR_PLAIN = 32;
+const MAC_BAR_ITEM_SIZE = 36;
+const MAC_BAR_ITEM_PAD_H = 10;
+const MAC_BAR_RUN_GAP = 0;
+/** A capsule of several slots: 3 past its end slots. */
+const MAC_BAR_RUN_PAD = 3;
+/** Between capsules, and between the last one and the window's edge. */
+const MAC_BAR_GROUP_GAP = 8;
+/** The window buttons' room: the first item's slot starts 96 in; a title is 12 after the last thing before it. */
+const MAC_WINDOW_BUTTONS_ROOM = 96;
+const MAC_TITLE_GAP = 12;
+/** A compact title bar's title: 84 in, after the window buttons (9 in, 14 across, 9 apart) and 15. */
+const MAC_COMPACT_TITLE_X = 84;
+/** A Mac bar's trailing items end 8 before the window's edge. */
+const MAC_BAR_MARGIN_TRAILING = 8;
+// A Mac tab view's bar (macOS 26) is a glass capsule centered in the
+// window's 52 toolbar: 36 tall, 8 from the top, its tabs equal segments (the
+// widest title and 11 either side) inside a 4 inset, the selected one a 24
+// gray pill (6 from the capsule's top and bottom).
+const MAC_TAB_ROW_HEIGHT = 52;
+const MAC_TAB_BAR_HEIGHT = 36;
+/** A tab picker's segment: the widest title (13 regular) and 11 either side. */
+const MAC_TAB_ITEM_PAD_H = 11;
+const MAC_TAB_ITEM_INSET = 4;
+const MAC_TAB_ITEM_HEIGHT = 24;
 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
@@ -356,23 +368,28 @@ const MAC_TAB_BAR_MARGIN_H = 20;
 // 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.
+// macOS 26: a push button is a capsule, 24 tall with 13 either side of its
+// label (a large one 28, an extra large one 36), on a translucent gray (styles.css).
 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 },
+  regular: { padV: 4, padH: 13, minHeight: 24 },
+  mini: { padV: 1, padH: 7, minHeight: 16, textStyle: 'caption' },
+  small: { padV: 2, padH: 10, minHeight: 20, textStyle: 'subheadline' },
+  large: { padV: 6, padH: 16, minHeight: 28 },
+  extraLarge: { padV: 10, padH: 20, minHeight: 36 },
 };
 const MAC_CHECKBOX_SIZE = 14;
 const MAC_CHECKBOX_GAP = 6;
-const MAC_PICKER_MENU_HEIGHT = 22;
+const MAC_PICKER_MENU_HEIGHT = 24;
 // 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_HEIGHT = 24;
+/** A segment's room beside its label (macOS 26: the widest label's, every segment). */
+const MAC_SEGMENT_PAD = 18;
 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;
+/** A pop-up's room beyond its widest option: 13 before it, the 8 chevrons 13 after it and 9 from the end. */
+const MAC_PICKER_POPUP_EXTRA = 43;
 // 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;
@@ -382,15 +399,26 @@ const MAC_PICKER_POPUP_PAD = 8;
 // 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_SIDEBAR_ROW_MIN_HEIGHT = 32;
 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 sidebar's rows (macOS 26): their content 12 in from the selection's edges, a Label's title 10 after its icon, one line. */
+const MAC_LIST_SIDEBAR_CELL_PADDING = 12;
+/** A sidebar's sections: 13 apart, a header 2 under the top (4 under rows), 4 in from the selection's edge and 4 over its rows, no rule. */
+const MAC_LIST_SIDEBAR_SECTION_GAP = 13;
+const MAC_LIST_SIDEBAR_HEADER_TOP = 2;
+const MAC_LIST_SIDEBAR_HEADER_GAP = 4;
+const MAC_LIST_SIDEBAR_HEADER_INSET = 4;
+const MAC_LIST_SIDEBAR_BADGE_FONT_SIZE = 11;
+const MAC_LIST_SIDEBAR_LABEL_GAP = 10;
 /** 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;
+/** A Mac list's first row starts 10 under the top (the Showcase on macOS 26); a header at the top sits 4 higher (Fidelity's). */
+const MAC_LIST_TOP = 10;
+const MAC_LIST_FIRST_HEADER_LIFT = 4;
 const MAC_LIST_BOTTOM = 8;
 const MAC_LIST_SECTION_GAP = 22;
 const MAC_LIST_HEADER_TOP = 4;
@@ -411,24 +439,66 @@ const MAC_FORM_HEADER_GAP = 8;
 const MAC_FORM_HEADER_TOP = 4;
 const MAC_FORM_ROW_GAP = 7;
 const MAC_FORM_FOOTER_GAP = 2;
+// A Mac's grouped form (`.formStyle(.grouped)`, macOS 26): rounded cards
+// (11) at most 704 wide, centered, at least 20 from the sides; 36 rows (a
+// button's 44) with their content 10 in, a 1 separator between rows 10 in
+// from either side; a header (13 semibold) 10 over its card, 20 below the
+// top; sections 30 apart; a footer 10 under its card.
+const MAC_GROUPED_MAX_WIDTH = 704;
+const MAC_GROUPED_MARGIN = 20;
+const MAC_GROUPED_CELL_PADDING = 10;
+const MAC_GROUPED_ROW_HEIGHT = 36;
+const MAC_GROUPED_ROW_VPAD = 7;
+const MAC_GROUPED_BUTTON_ROW_VPAD = 11;
+const MAC_GROUPED_SEPARATOR = 1;
+const MAC_GROUPED_TOP = 20;
+const MAC_GROUPED_HEADER_GAP = 10;
+const MAC_GROUPED_SECTION_GAP = 30;
+const MAC_GROUPED_FOOTER_GAP = 10;
+/** In a grouped row: the switch, 36 × 18; a slider's track the trailing 55% of the row; a link's chevron 6 wide, 2 in from the content's edge. */
+const MAC_GROUPED_SWITCH_WIDTH = 36;
+const MAC_GROUPED_SWITCH_HEIGHT = 18;
+const MAC_GROUPED_SLIDER_FRACTION = 0.55;
+const MAC_GROUPED_CHEVRON_WIDTH = 8;
+const MAC_GROUPED_LABEL_GAP = 10;
 /** The row kinds whose label goes in a Mac form's label column (a stack with one is shifted to it). */
 const MAC_FORM_LABELED_KINDS = ['textfield', 'picker', 'stepper', 'datepicker', 'slider'];
 /** 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
+// A Mac's split view (macOS 26): the sidebar is a floating panel, 140 wide,
+// 8 from the window's leading, top and bottom edges, rounded 22, on the
+// toolbar's glass fill with its own top 44 the window's color (the window
+// buttons and, 6 from its trailing edge, the sidebar toggle, a bare 36
+// slot); the detail column starts at its trailing edge. Its title is not
+// shown. A list in it is a sidebar: 32 rows inset 10 in the panel, the
+// selected one a gray rounded fill; a search field over it, 28 tall, 9 under
+// the bar and 10 above the rows. A screen not at the window's leading edge
+// starts its toolbar 10 in.
+const MAC_NAVSPLIT_SIDEBAR_WIDTH = 140;
+/** The width of the strip astride the sidebar panel's trailing edge that drags the sidebar's width. */
+const MAC_NAVSPLIT_DIVIDER_GRIP = 8;
+const MAC_NAVSPLIT_SIDEBAR_INSET = 8;
+const MAC_NAVSPLIT_TOGGLE_INSET = 6;
+const MAC_SIDEBAR_SEARCH_ABOVE = 9;
+const MAC_SIDEBAR_SEARCH_HEIGHT = 28;
+const MAC_SIDEBAR_SEARCH_BELOW = 10;
+const MAC_SIDEBAR_SEARCH_MARGIN_H = 10;
+const MAC_BAR_LEADING_MARGIN = 10;
+// A Mac's search field is in the toolbar, at its trailing end (macOS 26): a
+// 36 glass capsule like the bar's items, 325 wide (less when the bar is
+// narrow), 8 from the edge; elsewhere a field is 22 tall. 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_WIDTH = 325;
 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.
+// A Mac's sheet (measured in the Mac app, macOS 26): a 470 panel centered in
+// the window, its 48 title bar (the title 13 bold, 48 in) over the content at
+// its ideal height, and a 60 bar at the bottom with the text actions (cancel,
+// confirm) as 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_TITLE_BAR = 48;
+const MAC_SHEET_TITLE_X = 48;
 const MAC_SHEET_ACTIONS_BAR = 60;
 const MAC_SHEET_ACTIONS_INSET = 16;
 const MAC_SHEET_ACTIONS_GAP = 8;
@@ -675,25 +745,25 @@ const ALERT_METRICS: AlertMetrics = {
   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.
+// Measured in the Mac app (macOS 26): no app icon; the title (13 bold) 20
+// under the top and 22 in, the message (13 regular) 10 under it, both
+// leading-aligned; 28-tall capsule buttons 16 under the message, 16 in and
+// 16 over the bottom, two side by side 8 apart (stacked 4 apart).
 const MAC_ALERT_METRICS: AlertMetrics = {
   width: 260,
-  padTop: 104,
-  padH: 16,
+  padTop: 20,
+  padH: 22,
   buttonInset: 16,
-  buttonsGap: 17,
+  buttonsGap: 16,
   padBottom: 16,
-  buttonSpacing: 8,
+  buttonSpacing: 4,
   rowSpacing: 8,
-  titleGap: 9,
+  titleGap: 10,
   buttonHeight: 28,
   fieldHeight: 22,
   fieldSpacing: 8,
   fieldsGap: 12,
-  textAlignment: 'center',
+  textAlignment: 'leading',
 };
 /** Gap between an action sheet's title and its message. */
 const DIALOG_TITLE_GAP = 4;
@@ -963,6 +1033,32 @@ function cellStyle(node: LayoutNode, key: string): unknown {
   return undefined;
 }
 
+/**
+ * A split view column's `.navigationSplitViewColumnWidth(min:ideal:max:)`:
+ * the `splitColumnWidth` hint (`{ min?, ideal, max? }`) on the column's
+ * content, read through its `styled` wrappers, its `navstack` and the root
+ * screen of that stack (an app puts the modifier on the sidebar's list).
+ */
+function splitColumnWidthOf(column: LayoutNode): { min?: number; ideal: number; max?: number } | null {
+  let current: LayoutNode | undefined = column;
+  while (current) {
+    const hint = cellStyle(current, 'splitColumnWidth');
+    if (hint && typeof hint === 'object') {
+      const spec = hint as Record<string, unknown>;
+      const ideal = num(spec['ideal']);
+      if (ideal === null) return null;
+      const min = num(spec['min']);
+      const max = num(spec['max']);
+      return { ...(min !== null ? { min } : {}), ideal, ...(max !== null ? { max } : {}) };
+    }
+    const inner = unwrapStyled(current);
+    if (inner.kind === 'navstack') current = inner.children[0] as LayoutNode | undefined;
+    else if (inner.kind === 'navscreen') current = inner.children.find((child) => child.kind !== 'toolbar' && child.kind !== 'searchfield');
+    else return null;
+  }
+  return null;
+}
+
 /** The default vertical padding above and below a list row's content. */
 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;
@@ -1941,7 +2037,7 @@ export class LayoutPass {
         return { ...ctx, barAbove: undefined, stackAxis: null, listRow: false };
       }
       case 'toolbar': {
-        const placement = str(node.props['placement']);
+        const placement = this.barPlacement(node);
         const navBarItem = placement === 'leading' || placement === 'trailing';
         const bottomBarItem = placement === 'bottom';
         if (ctx.stackAxis === null && !ctx.listRow && ctx.navBarItem === navBarItem && ctx.bottomBarItem === bottomBarItem) return ctx;
@@ -2385,8 +2481,10 @@ export class LayoutPass {
    * 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 } {
+  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 grouped form's toggle is a switch at the row's trailing end (macOS 26).
+    if (ctx.groupedRow) return { width: MAC_GROUPED_SWITCH_WIDTH, height: MAC_GROUPED_SWITCH_HEIGHT, gap: MAC_GROUPED_LABEL_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 };
   }
@@ -2483,6 +2581,17 @@ export class LayoutPass {
     return { x: Math.round((screen.width - width) / 2), y: Math.round(top + (room.height - height) / 2), width, height };
   }
 
+  /**
+   * Where a `toolbar` is drawn: its placement, except that a Mac has no
+   * bottom bar (SwiftUI's `.bottomBar` is iOS's): its items join the
+   * toolbar's trailing ones, in order, as the native renderer places them
+   * (`.automatic` there).
+   */
+  private barPlacement(toolbar: LayoutNode): string | null {
+    const placement = str(toolbar.props['placement']);
+    return placement === 'bottom' && this.env.platform === 'macos' ? 'trailing' : placement;
+  }
+
   /** 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) => {
@@ -2583,12 +2692,23 @@ export class LayoutPass {
         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;
+        let widest = 0;
+        for (const option of options) {
+          const optionWidth = this.measurer.measureWidth(option, font);
+          natural += optionWidth + PICKER_SEGMENT_PAD;
+          widest = Math.max(widest, optionWidth);
+        }
+        // A Mac's segments are equal, the widest label and 18 (macOS 26).
+        if (mac) natural = options.length * Math.ceil(widest + MAC_SEGMENT_PAD);
         // A Mac shows the picker's label before the control (in a form's row it is in the label column).
         const labelText = mac && !ctx.formColumn ? (str(node.props['label']) ?? '') : '';
         const labelWidth = labelText.length > 0 && !ctx.navBarItem ? this.measurer.measureWidth(labelText, ctx.font) + MAC_SEGMENTED_LABEL_GAP : 0;
+        // On a Mac it is as wide as its segments; elsewhere it fills the width offered.
+        const width = mac
+          ? Math.min(natural + labelWidth, finite(p.width) ? p.width : Infinity)
+          : finite(p.width) ? p.width : natural + labelWidth;
         return {
-          size: { width: finite(p.width) ? p.width : natural + labelWidth, height: mac ? MAC_SEGMENTED_HEIGHT : PICKER_SEGMENTED_HEIGHT },
+          size: { width, height: mac ? MAC_SEGMENTED_HEIGHT : PICKER_SEGMENTED_HEIGHT },
           style: 'segmented',
           font,
           options,
@@ -2605,11 +2725,14 @@ export class LayoutPass {
       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 || ctx.formColumn === true);
-      const valueWidth = ctx.formColumn && finite(p.width) ? p.width : this.measurer.measureWidth(value, font) + PICKER_MENU_CHEVRON_WIDTH + (popup ? 2 * MAC_PICKER_POPUP_PAD : 0);
+      // macOS 26: a pop-up is as wide as its widest option, 13 before the label and the chevrons 9 from its end.
+      const popupWidth = (): number => Math.ceil(Math.max(...options.map((option) => this.measurer.measureWidth(option, font)), 0) + MAC_PICKER_POPUP_EXTRA);
+      const valueWidth = popup ? popupWidth() : this.measurer.measureWidth(value, font) + PICKER_MENU_CHEVRON_WIDTH;
       const natural = labelWidth + PICKER_MENU_GAP + valueWidth;
       return {
         size: {
-          width: finite(p.width) ? p.width : natural,
+          // In a Mac columns form's row: the pop-up alone, at its width.
+          width: ctx.formColumn ? Math.min(valueWidth, finite(p.width) ? p.width : Infinity) : finite(p.width) ? p.width : natural,
           height: ctx.listRow && !ctx.formColumn ? (mac ? MAC_PICKER_MENU_ROW_HEIGHT : PICKER_MENU_ROW_HEIGHT) : mac ? MAC_PICKER_MENU_HEIGHT : PICKER_MENU_HEIGHT,
         },
         style: 'menu',
@@ -2729,7 +2852,7 @@ export class LayoutPass {
     // 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' && cctx.listCell === true && labelColumnOf(node)) return [cctx.sidebarList ? MAC_LIST_SIDEBAR_LABEL_GAP : 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++) {
@@ -3196,9 +3319,15 @@ export class LayoutPass {
   // List
   // -------------------------------------------------------------------------
 
+  /** A list's style: its own, but on a Mac an automatic list in a split view's sidebar is a sidebar, as SwiftUI's is. */
+  private listStyleOf(node: LayoutNode, ctx: Context): string {
+    const style = str(node.props['style']) ?? 'insetGrouped';
+    return this.env.platform === 'macos' && ctx.splitSidebar && style === 'insetGrouped' ? 'sidebar' : style;
+  }
+
   private listPlan(node: LayoutNode, ctx: Context, p: Proposal): ListPlan {
     return this.plan(node, ctx, p, () => {
-      if (this.env.platform === 'macos' && node.props['form'] === true) return this.macFormPlan(node, ctx, p);
+      if (this.env.platform === 'macos' && node.props['form'] === true && node.props['formStyle'] !== 'grouped') return this.macFormPlan(node, ctx, p);
       const { screen } = this.env;
       const width = finite(p.width) ? p.width : p.width === Infinity ? Infinity : screen.width;
       const layoutWidth = Number.isFinite(width) ? width : screen.width;
@@ -3206,39 +3335,51 @@ export class LayoutPass {
       // sections are full width. `plain` also drops the top/bottom gaps and
       // the space between sections. `sidebar` (iPadOS) is laid out like
       // `insetGrouped` with 44pt rows (the page draws no cards or hairlines).
-      const listStyle = str(node.props['style']) ?? 'insetGrouped';
+      const listStyle = this.listStyleOf(node, ctx);
       // In a compact width (an iPhone) a `sidebar` list looks like `insetGrouped`
       // (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).
+      // `.environment(\.defaultMinListRowHeight, _)` (the list's `minRowHeight`); 52 by default (44 in a sidebar, 24 on a Mac).
       // 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 macGrouped = mac && node.props['form'] === true && node.props['formStyle'] === 'grouped';
       const minRowHeight =
         num(node.props['minRowHeight']) ??
+        (macGrouped ? MAC_GROUPED_ROW_HEIGHT : null) ??
         (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
+        ? macGrouped
+          ? Math.max(MAC_GROUPED_MARGIN, (layoutWidth - MAC_GROUPED_MAX_WIDTH) / 2)
+          : listStyle === 'sidebar'
+            ? MAC_LIST_INSET_SIDEBAR
+            // SwiftUI's inset list style: the list's own 16, which
+            // `listRowInsets` does not touch (its rows have no padding of
+            // their own); a row's separator runs to the trailing edge of it.
+            : MAC_LIST_CELL_PADDING
         : listStyle === 'insetGrouped' || listStyle === 'sidebar'
           ? LIST_INSET
           : 0;
       const plain = listStyle === 'plain';
-      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 cellPadding = mac
+        ? macGrouped ? MAC_GROUPED_CELL_PADDING : listStyle === 'sidebar' ? MAC_LIST_SIDEBAR_CELL_PADDING : 0
+        : LIST_CELL_PADDING;
+      const macSidebar = mac && listStyle === 'sidebar';
+      const listTop = plain || macSidebar ? 0 : macGrouped ? MAC_GROUPED_TOP : mac ? MAC_LIST_TOP : LIST_TOP;
+      const listBottom = plain ? 0 : macGrouped ? MAC_GROUPED_TOP : mac ? MAC_LIST_BOTTOM : LIST_BOTTOM;
+      const sectionGap = plain ? 0 : macGrouped ? MAC_GROUPED_SECTION_GAP : macSidebar ? MAC_LIST_SIDEBAR_SECTION_GAP : mac ? MAC_LIST_SECTION_GAP : LIST_SECTION_GAP;
+      const headerGap = macGrouped ? MAC_GROUPED_HEADER_GAP : macSidebar ? MAC_LIST_SIDEBAR_HEADER_GAP : mac ? MAC_LIST_HEADER_GAP : LIST_HEADER_GAP;
       const cardX = inset;
       const cardWidth = Math.max(0, layoutWidth - 2 * inset);
       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 = mac
+      const headerFont = macGrouped
+        ? makeFont('system', textStyleSize('body', this.env.dynamicTypeSize, 'macos'), 600)
+        : mac
         ? makeFont('system', textStyleSize('subheadline', this.env.dynamicTypeSize, 'macos'), 700)
         : makeFont('system', textStyleSize('headline', this.env.dynamicTypeSize, this.env.platform), 600);
       const footerFont = makeFont(
@@ -3247,7 +3388,15 @@ export class LayoutPass {
         400,
       );
       // 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' };
+      const rowCtx: Context = {
+        ...this.childContext(node, ctx),
+        listRow: true,
+        labelColumn: !mac,
+        listCell: mac,
+        sidebarList: listStyle === 'sidebar',
+        ...(mac && listStyle === 'sidebar' ? { lineLimit: 1 } : {}),
+        ...(macGrouped ? { groupedRow: true } : {}),
+      };
       // 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.
@@ -3284,6 +3433,8 @@ export class LayoutPass {
       };
 
       const groups: ListGroupPlan[] = [];
+      // A Mac grouped form's text fields: their titles lead their rows (the page draws them as the columns form's labels).
+      const fieldLabels: FormLabelPlan[] = [];
       let y = listTop;
       const makeText = (text: string, font: ResolvedFont): { layout: TextLayout; size: Size } => {
         const wrapped = wrapText(text, font, contentWidth, null, this.measurer);
@@ -3299,6 +3450,8 @@ export class LayoutPass {
           const footed = previous.footer !== null || (previous.footerView !== null && previous.footerView.rect.height > 0);
           y += plain || mac ? sectionGap : footed ? LIST_SECTION_GAP_AFTER_FOOTER : sectionGap;
         }
+        // A Mac list's first header sits 4 above where its first row would.
+        if (mac && !macGrouped && !macSidebar && !previous && (source.headerView !== null || (source.section !== null && (str(source.section.props['header']) ?? '').length > 0))) y -= MAC_LIST_FIRST_HEADER_LIFT;
         const top = y;
         let header: ListGroupPlan['header'] = null;
         let footer: ListGroupPlan['footer'] = null;
@@ -3311,10 +3464,12 @@ export class LayoutPass {
         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;
+          if (mac && !macGrouped && previous) y += MAC_LIST_HEADER_TOP;
+          else if (macSidebar) y += MAC_LIST_SIDEBAR_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 + headerGap + (mac && !previous ? MAC_LIST_FIRST_ROWS_GAP : 0);
+          const headerX = macSidebar ? inset + MAC_LIST_SIDEBAR_HEADER_INSET : contentX;
+          header = { rect: { x: headerX, y: headerY, width: contentWidth, height: size.height }, layout };
+          y = headerY + size.height + headerGap + (mac && !macSidebar && !macGrouped && !previous ? MAC_LIST_FIRST_ROWS_GAP : 0);
         }
         const cardTop = y;
         const rows: ListRowPlan[] = [];
@@ -3332,7 +3487,9 @@ 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, mac);
+          const defaultVPad = macGrouped
+            ? unwrapStyled(rowNode).kind === 'button' ? MAC_GROUPED_BUTTON_ROW_VPAD : MAC_GROUPED_ROW_VPAD
+            : 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
@@ -3345,7 +3502,9 @@ export class LayoutPass {
               };
           // 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;
+          // A Mac sidebar's badge is the small (11) text (macOS 26).
+          const badgeFont = macSidebar ? makeFont('system', MAC_LIST_SIDEBAR_BADGE_FONT_SIZE, 400) : rowCtx.font;
+          const badgeWidth = hints.badge !== null ? this.measurer.measureWidth(hints.badge, badgeFont) : 0;
           const badgeReserve = hints.badge !== null ? badgeWidth + BADGE_GAP : 0;
           // Phase 8 edit mode: a selectable or deletable `listrow` gains a
           // leading control and its content shifts right; a movable one a
@@ -3355,8 +3514,12 @@ export class LayoutPass {
           const hasGrip = listRow !== null && listRow.props['movable'] === true;
           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 - chevronReserve);
+          const fieldNode = macGrouped ? unwrapStyled(rowNode) : null;
+          const fieldLabel = fieldNode && fieldNode.kind === 'textfield' ? str(fieldNode.props['placeholder']) || null : null;
+          const fieldLabelWidth = fieldLabel ? this.measurer.measureWidth(fieldLabel, rowCtx.font) : 0;
+          const fieldShift = fieldLabel ? Math.ceil(fieldLabelWidth) + MAC_GROUPED_LABEL_GAP : 0;
+          const rowContentX = cardX + insets.leading + editShift + fieldShift;
+          const rowContentWidth = Math.max(0, cardWidth - insets.leading - insets.trailing - badgeReserve - editShift - gripReserve - chevronReserve - fieldShift);
           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);
@@ -3376,7 +3539,7 @@ export class LayoutPass {
               hints.badge !== null
                 ? {
                     rect: { x: cardX + cardWidth - insets.trailing - badgeWidth, y, width: badgeWidth, height: rowHeight },
-                    layout: { font: rowCtx.font, lines: [hints.badge], alignment: 'trailing', truncated: false },
+                    layout: { font: badgeFont, lines: [hints.badge], alignment: 'trailing', truncated: false },
                   }
                 : null,
             edit: listRow
@@ -3391,7 +3554,17 @@ export class LayoutPass {
             separatorHidden: hints.separatorHidden,
             outline: rowSource.group || rowSource.depth > 0 ? { depth: rowSource.depth, group: rowSource.group } : null,
           });
+          if (fieldLabel) {
+            fieldLabels.push({
+              rect: { x: cardX + insets.leading, y: y + (rowHeight - rowCtx.font.lineHeight) / 2, width: Math.ceil(fieldLabelWidth), height: rowCtx.font.lineHeight },
+              layout: { font: rowCtx.font, lines: [fieldLabel], alignment: 'leading', truncated: false },
+              node: null,
+              ctx: rowCtx,
+            });
+          }
           y += rowHeight;
+          // A Mac grouped form's separators are a point between its rows.
+          if (macGrouped && rowSource !== source.rows[source.rows.length - 1]) y += MAC_GROUPED_SEPARATOR;
         }
         // 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'] = [];
@@ -3406,10 +3579,10 @@ export class LayoutPass {
         });
         const card: Rect = { x: cardX, y: cardTop, width: cardWidth, height: y - cardTop };
         if (footerText !== null && footerText.length > 0) {
-          y += mac ? MAC_LIST_FOOTER_GAP : LIST_FOOTER_GAP;
+          y += macGrouped ? MAC_GROUPED_FOOTER_GAP : 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 + (mac ? MAC_LIST_FOOTER_BOTTOM : 0);
+          y += size.height + (mac && !macGrouped ? 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;
@@ -3431,7 +3604,7 @@ export class LayoutPass {
         width,
         height: p.height === null ? contentHeight : p.height,
       };
-      return { size, contentSize: { width: layoutWidth, height: contentHeight }, groups };
+      return { size, contentSize: { width: layoutWidth, height: contentHeight }, groups, ...(fieldLabels.length > 0 ? { labels: fieldLabels } : {}) };
     });
   }
 
@@ -3685,6 +3858,9 @@ export class LayoutPass {
               width: LIST_CHEVRON_WIDTH,
               height: size.height,
             };
+          } else if (ctx.groupedRow) {
+            // A grouped form's link has the small chevron at its trailing end (macOS 26).
+            chrome['chevron'] = { x: x + size.width - MAC_GROUPED_CHEVRON_WIDTH, y, width: MAC_GROUPED_CHEVRON_WIDTH, height: size.height };
           }
           this.setChrome(node, chrome);
         }
@@ -4144,9 +4320,17 @@ export class LayoutPass {
     const columns = plan.columns === true;
     const rowCtx: Context = columns
       ? { ...this.childContext(node, ctx), listRow: true, labelColumn: false, listCell: true, formColumn: true, sidebarList: false }
-      : { ...this.childContext(node, ctx), listRow: true, labelColumn: this.env.platform !== 'macos', listCell: this.env.platform === 'macos', sidebarList: str(node.props['style']) === 'sidebar' };
+      : {
+          ...this.childContext(node, ctx),
+          listRow: true,
+          labelColumn: this.env.platform !== 'macos',
+          listCell: this.env.platform === 'macos',
+          sidebarList: this.listStyleOf(node, ctx) === 'sidebar',
+          ...(this.env.platform === 'macos' && this.listStyleOf(node, ctx) === 'sidebar' ? { lineLimit: 1 } : {}),
+          ...(this.env.platform === 'macos' && node.props['form'] === true && node.props['formStyle'] === 'grouped' ? { groupedRow: true } : {}),
+        };
     const mac = this.env.platform === 'macos';
-    const cellPadding = mac ? MAC_LIST_CELL_PADDING : LIST_CELL_PADDING;
+    const cellPadding = mac ? (this.listStyleOf(node, ctx) === 'sidebar' ? MAC_LIST_SIDEBAR_CELL_PADDING : 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.
@@ -4154,6 +4338,10 @@ export class LayoutPass {
     const listChrome: Record<string, Rect> = {};
     const listTexts: Record<string, TextLayout> = {};
     if (covered) listChrome['bottomInset'] = covered;
+    // The page draws a sidebar's look (`data-sb-list-look`) for a list the engine laid out as one.
+    if (this.listStyleOf(node, ctx) === 'sidebar') listChrome['sidebarLook'] = { x, y, width: plan.size.width, height: plan.size.height };
+    // A Mac's grouped form: the page draws its cards.
+    if (this.env.platform === 'macos' && node.props['form'] === true && node.props['formStyle'] === 'grouped') listChrome['grouped'] = { x, y, width: plan.size.width, height: plan.size.height };
     if (scrollInset) listChrome['topInset'] = { x, y, width: plan.size.width, height: scrollInset.bar };
     if (scrollInset?.largeTitle) listChrome['largeTitle'] = scrollInset.largeTitle;
     const inset = scrollInset ? scrollInset.bar + (scrollInset.largeTitle?.height ?? 0) + (scrollInset.search ?? 0) : 0;
@@ -4162,8 +4350,8 @@ export class LayoutPass {
     const offset = (r: Rect): Rect => ({ x: x + r.x, y: y + r.y, width: r.width, height: r.height });
     // The Mac idiom's columns form: the label column (chrome `formLabel<i>`
     // with its text, or a view placed there) and the flag for the page.
-    if (columns) {
-      listChrome['columns'] = { x, y, width: plan.size.width, height: plan.size.height };
+    if (columns) listChrome['columns'] = { x, y, width: plan.size.width, height: plan.size.height };
+    {
       (plan.labels ?? []).forEach((label, i) => {
         if (label.layout) {
           listChrome[`formLabel${i}`] = offset(label.rect);
@@ -4365,10 +4553,12 @@ export class LayoutPass {
     // 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']);
+      const placement = this.barPlacement(t);
       return placement !== 'bottom' && placement !== 'keyboard' && placement !== 'largeTitle' && str(t.props['spacer']) === null;
     });
-    const searchInBar = mac && parts.search !== null && !barHidden;
+    // On a Mac the field is the toolbar's, or over a sidebar's list.
+    const searchInSidebar = mac && parts.search !== null && !barHidden && cctx.splitSidebar;
+    const searchInBar = mac && parts.search !== null && !barHidden && !searchInSidebar;
     // 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;
@@ -4380,13 +4570,14 @@ export class LayoutPass {
     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;
+    const groupGap = mac ? MAC_BAR_GROUP_GAP : NAV_GROUP_SPACING;
     // 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 = !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']);
+    const placementOf = (t: LayoutNode): string | null => this.barPlacement(t);
     const inHiddenBar = (t: LayoutNode): boolean => {
       const placement = placementOf(t);
       if (placement === 'keyboard') return false;
@@ -4409,8 +4600,8 @@ 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 = !mac && parts.search !== null && cctx.bottomBar > 0;
-    const searchRow = searchOnTop ? SEARCH_TOP_ROW : 0;
+    const searchOnTop = (!mac && parts.search !== null && cctx.bottomBar > 0) || searchInSidebar;
+    const searchRow = searchInSidebar ? MAC_SIDEBAR_SEARCH_ABOVE + MAC_SIDEBAR_SEARCH_HEIGHT + MAC_SIDEBAR_SEARCH_BELOW : searchOnTop ? SEARCH_TOP_ROW : 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
@@ -4443,12 +4634,12 @@ export class LayoutPass {
     }
     if (large) chrome['largeTitle'] = { x, y: y + barHeight, width: size.width, height: largeHeight };
     if (parts.search && !searchInBar) {
-      const marginH = searchOnTop ? SEARCH_FIELD_MARGIN_H : SEARCH_BOTTOM_MARGIN_H;
+      const marginH = searchInSidebar ? MAC_SIDEBAR_SEARCH_MARGIN_H : searchOnTop ? SEARCH_FIELD_MARGIN_H : SEARCH_BOTTOM_MARGIN_H;
       chrome['searchField'] = {
         x: x + marginH,
-        y: searchOnTop ? y + barHeight + largeHeight + SEARCH_TOP_ABOVE : y + size.height - searchLift - searchBottom,
+        y: searchOnTop ? y + barHeight + largeHeight + (searchInSidebar ? MAC_SIDEBAR_SEARCH_ABOVE : SEARCH_TOP_ABOVE) : y + size.height - searchLift - searchBottom,
         width: Math.max(0, size.width - 2 * marginH),
-        height: searchOnTop ? SEARCH_TOP_HEIGHT : SEARCH_BOTTOM_HEIGHT,
+        height: searchInSidebar ? MAC_SIDEBAR_SEARCH_HEIGHT : searchOnTop ? SEARCH_TOP_HEIGHT : SEARCH_BOTTOM_HEIGHT,
       };
       // The page draws a field under the title as the bar's (a gray capsule)
       // and moves it with the content when that scrolls under the bar.
@@ -4514,7 +4705,7 @@ export class LayoutPass {
     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';
+      const placement = placementOf(toolbar) ?? 'trailing';
       if (placement === 'leading' || placement === 'trailing') {
         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) };
@@ -4541,10 +4732,10 @@ export class LayoutPass {
       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) * runGap;
-      return slots.length > 1 ? inner + 2 * NAV_RUN_PAD : inner;
+      return slots.length > 1 ? inner + 2 * (mac ? MAC_BAR_RUN_PAD : NAV_RUN_PAD) : inner;
     };
     for (const toolbar of parts.toolbars) {
-      const placement = str(toolbar.props['placement']);
+      const placement = placementOf(toolbar);
       if (placement !== 'leading' && placement !== 'trailing') continue;
       if (isSpacer(toolbar)) {
         delete open[placement];
@@ -4559,6 +4750,12 @@ export class LayoutPass {
         runs.push({ placement, groups: [group], width: 0, segmented: true });
         continue;
       }
+      // A Mac's text item is a capsule of its own (macOS 26), neither joining nor joined.
+      if (mac && toolbar.children.some((item) => !isSymbolItem(item) && unwrapStyled(item).kind === 'button')) {
+        delete open[placement];
+        runs.push({ placement, groups: [group], width: 0 });
+        continue;
+      }
       // An item that hides the bar's shared glass stands alone, at its own width.
       if (str(toolbar.props['sharedBackground']) === 'hidden') {
         delete open[placement];
@@ -4576,7 +4773,7 @@ export class LayoutPass {
     }
     for (const run of runs) run.width = runWidth(run);
     const runsWidth = (placement: string): number =>
-      runs.filter((r) => r.placement === placement && r.width > 0).reduce((sum, r) => sum + r.width + NAV_GROUP_SPACING, 0);
+      runs.filter((r) => r.placement === placement && r.width > 0).reduce((sum, r) => sum + r.width + groupGap, 0);
     const leadingWidth = runsWidth('leading');
     const trailingWidth = runsWidth('trailing');
     const principal = groups.some((g) => g.placement === 'principal');
@@ -4602,7 +4799,7 @@ export class LayoutPass {
     });
     // Items of one toolbar share its glass capsule; separate toolbars sit 12 apart, as the trailing runs do.
     const secondaryGap = (previous: SecondaryItem | undefined, entry: SecondaryItem): number =>
-      previous && previous.toolbar !== entry.toolbar ? NAV_GROUP_SPACING : 0;
+      previous && previous.toolbar !== entry.toolbar ? groupGap : 0;
     const secondaryWidth = (entries: readonly SecondaryItem[]): number =>
       entries.reduce((sum, entry, i) => sum + secondaryGap(entries[i - 1], entry) + entry.slot, 0);
     let inlineSecondary: SecondaryItem[] = [];
@@ -4611,7 +4808,7 @@ export class LayoutPass {
       // bar) and the trailing groups; the More button takes a slot of it
       // once anything collapses.
       const titleWidth = principal ? 0 : Math.min(this.measurer.measureWidth(title, titleFont), size.width * 0.56);
-      const roomStart = x + (size.width + titleWidth) / 2 + NAV_GROUP_SPACING;
+      const roomStart = x + (size.width + titleWidth) / 2 + groupGap;
       const roomEnd = x + size.width - NAV_ITEM_MARGIN - trailingWidth;
       const fitting = (room: number): SecondaryItem[] => {
         const out: SecondaryItem[] = [];
@@ -4624,7 +4821,7 @@ export class LayoutPass {
         }
         return out;
       };
-      inlineSecondary = secondaryWidth(secondaryItems) <= roomEnd - roomStart ? secondaryItems : fitting(roomEnd - roomStart - glass - NAV_GROUP_SPACING);
+      inlineSecondary = secondaryWidth(secondaryItems) <= roomEnd - roomStart ? secondaryItems : fitting(roomEnd - roomStart - glass - groupGap);
     }
     const collapsedSecondary = secondaryItems.filter((entry) => !inlineSecondary.includes(entry));
 
@@ -4634,7 +4831,7 @@ export class LayoutPass {
     // 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 leadingStart = x + (windowButtons ? MAC_WINDOW_BUTTONS_ROOM : mac ? MAC_BAR_LEADING_MARGIN : NAV_ITEM_MARGIN) + (cctx.barLeading ?? 0);
     const glassY = rowY + (rowHeight - glass) / 2;
     if (depth > 0 && !barHidden) {
       chrome['back'] = { x: leadingStart, y: glassY, width: glass, height: glass };
@@ -4642,20 +4839,21 @@ export class LayoutPass {
 
     // 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 - (mac ? (tabToolbar ? MAC_TAB_TOOLBAR_MARGIN_TRAILING : MAC_BAR_MARGIN_TRAILING) : NAV_ITEM_MARGIN);
+    // On a Mac the back button is the first slot of the leading capsule (macOS 26).
+    let leadingCursor = back ? back.x + back.width + (mac ? 0 : groupGap) : leadingStart;
+    let trailingEdge = x + size.width - (mac ? 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['searchField'] = { x: trailingEdge - width, y: rowY + (rowHeight - MAC_BAR_ITEM_SIZE) / 2, width, height: MAC_BAR_ITEM_SIZE };
       chrome['searchBar'] = chrome['searchField'];
-      trailingEdge -= width + NAV_GROUP_SPACING;
+      trailingEdge -= width + groupGap;
     }
     // The More button is the trailing-most item.
     if (collapsedSecondary.length > 0) {
       chrome['more'] = { x: trailingEdge - glass, y: glassY, width: glass, height: glass };
-      trailingEdge -= glass + NAV_GROUP_SPACING;
+      trailingEdge -= glass + groupGap;
     }
     const placeGroup = (group: Group, startX: number, top: number, rowHeight: number, spacing: number): void => {
       const itemCtx = this.childContext(group.toolbar, cctx);
@@ -4681,7 +4879,7 @@ export class LayoutPass {
         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);
+      let cursor = startX + (count > 1 ? (mac ? MAC_BAR_RUN_PAD : NAV_RUN_PAD) : 0);
       for (const group of run.groups) {
         const itemCtx = this.childContext(group.toolbar, cctx);
         const first = cursor;
@@ -4689,31 +4887,34 @@ export class LayoutPass {
           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 + (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 - runGap : first;
         this.setFrame(group.toolbar, first, rowY, { width: last - first, height: rowHeight });
       }
     };
-    for (const run of runs.filter((r) => r.placement === 'leading')) {
-      if (run.width === 0) continue;
+    const leadingRuns = runs.filter((r) => r.placement === 'leading' && r.width > 0);
+    for (const run of leadingRuns) {
       placeRun(run, leadingCursor);
-      leadingCursor += run.width + NAV_GROUP_SPACING;
+      leadingCursor += run.width + groupGap;
+    }
+    // A Mac's back button: its capsule is the first leading one's, widened to
+    // take it in, or one of its own.
+    if (mac && back) {
+      const first = leadingRuns[0];
+      const merged = first && !first.bare && !first.segmented ? chrome['leadingGlass0'] : undefined;
+      if (merged) chrome['leadingGlass0'] = { ...merged, x: back.x, width: merged.x + merged.width - back.x };
+      else chrome[`leadingGlass${glassCount.leading++}`] = { ...back };
+      if (leadingRuns.length === 0) leadingCursor = back.x + back.width + groupGap;
     }
     const trailingRuns = runs.filter((r) => r.placement === 'trailing' && r.width > 0);
-    let trailingCursor = trailingEdge - (trailingWidth > 0 ? trailingWidth - NAV_GROUP_SPACING : 0);
+    let trailingCursor = trailingEdge - (trailingWidth > 0 ? trailingWidth - groupGap : 0);
     const trailingStart = trailingCursor;
     for (const run of trailingRuns) {
       placeRun(run, trailingCursor);
-      trailingCursor += run.width + NAV_GROUP_SPACING;
+      trailingCursor += run.width + groupGap;
     }
-    if (trailingRuns.length > 0) trailingEdge = trailingStart - NAV_GROUP_SPACING;
+    if (trailingRuns.length > 0) trailingEdge = trailingStart - groupGap;
     for (const group of groups) {
       if (group.placement !== 'principal') continue;
       const startX = x + (size.width - group.total) / 2;
@@ -4736,7 +4937,7 @@ export class LayoutPass {
         cursor += entry.slot;
       }
       for (const [toolbar, extent] of extents) this.setFrame(toolbar, extent.start, rowY, { width: extent.end - extent.start, height: rowHeight });
-      trailingEdge -= total + NAV_GROUP_SPACING;
+      trailingEdge -= total + groupGap;
     }
     for (const toolbar of secondaryToolbars) {
       const items = toolbar.children;
@@ -4795,14 +4996,19 @@ export class LayoutPass {
     // the renderer shows once it has (`data-sb-collapsed`).
     if (tabToolbar) {
       // The tab picker stands where the title would be.
+    } else if (mac && cctx.splitSidebar) {
+      // A Mac's sidebar shows no title.
     } 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;
+      // A Mac toolbar's title is 12 after the window buttons' room or after the leading capsules.
+      const titleX = unified
+        ? (back || leadingWidth > 0 ? leadingCursor - groupGap : leadingStart) + MAC_TITLE_GAP
+        : Math.max(x + MAC_SHEET_TITLE_X, leadingCursor);
+      const roomEnd = trailingUsed ? trailingEdge + groupGap - 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)));
       if (subtitle.length > 0) {
         // The title and the subtitle stacked, centered in the row.
@@ -4817,11 +5023,11 @@ export class LayoutPass {
     } 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,
-        cctx.barLeading ? leadingStart - NAV_GROUP_SPACING - x : 0,
+        leadingWidth > 0 ? leadingCursor - groupGap - x : 0,
+        cctx.barLeading ? leadingStart - groupGap - x : 0,
       );
       const trailingUsed = trailingWidth > 0 || chrome['more'] !== undefined || inlineSecondary.length > 0;
-      const rightUsed = trailingUsed ? x + size.width - (trailingEdge + NAV_GROUP_SPACING) : 0;
+      const rightUsed = trailingUsed ? x + size.width - (trailingEdge + groupGap) : 0;
       // As UIKit places it: centered in the bar when it fits there; else slid
       // off-center into the room the items leave (between them, 8 clear of
       // each side), and truncated only when it does not fit even there.
@@ -4834,7 +5040,9 @@ export class LayoutPass {
         Math.floor(Math.max(0, roomEnd - roomStart)),
       );
       const centered = x + (size.width - titleWidth) / 2;
-      const titleX = Math.max(roomStart, Math.min(centered, roomEnd - titleWidth));
+      // A Mac's compact title bar: the title leading-aligned after the window buttons (macOS 26).
+      const leading = mac ? x + (windowButtons ? MAC_COMPACT_TITLE_X : NAV_ITEM_MARGIN) : null;
+      const titleX = leading !== null ? Math.max(roomStart, Math.min(leading, roomEnd - titleWidth)) : Math.max(roomStart, Math.min(centered, roomEnd - titleWidth));
       chrome['title'] = { x: titleX, y: rowY, width: titleWidth, height: rowHeight };
     }
     this.setChrome(node, chrome);
@@ -4842,7 +5050,7 @@ export class LayoutPass {
     if (node.id >= 0) {
       this.fonts.set(node.id, large ? largeTitleFont : titleFont);
       const texts: Record<string, TextLayout> = {
-        title: { font: titleFont, lines: [shownTitle], alignment: unified || sheetBar ? 'leading' : 'center', truncated: false },
+        title: { font: titleFont, lines: [shownTitle], alignment: unified || sheetBar || mac ? 'leading' : 'center', truncated: false },
       };
       if (chrome['subtitle']) texts['subtitle'] = { font: subtitleFont, lines: [subtitle], alignment: 'leading', truncated: false };
       if (depth > 0) texts['back'] = { font: backFont, lines: [backLabel], alignment: 'leading', truncated: false };
@@ -5137,38 +5345,34 @@ 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.
+   * The Mac idiom's tab view (MAC_TAB_* above): the bar is a glass capsule
+   * of equal segments centered in a 52 row at the top: the window's toolbar
+   * when the tab view is at the top of the screen, else a row at the top of
+   * the content. 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.
+    // Each segment is the widest title (13 regular) and 11 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 widest = tabs.reduce((w, tab) => Math.max(w, this.measurer.measureWidth(str(tab.props['title']) ?? '', font)), 0);
+    const itemWidth = widest + 2 * MAC_TAB_ITEM_PAD_H;
+    const natural = n * itemWidth + 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 segment = n > 0 ? (width - 2 * MAC_TAB_ITEM_INSET) / n : 0;
+    const rowHeight = Math.min(MAC_TAB_ROW_HEIGHT, Math.max(0, size.height));
+    const barHeight = Math.min(MAC_TAB_BAR_HEIGHT, rowHeight);
+    const bar: Rect = snapRect({ x: x + (size.width - width) / 2, y: y + (rowHeight - barHeight) / 2, width, height: barHeight });
+    const toolbar: Rect = { x, y, width: size.width, height: rowHeight };
+    const content: Rect = { x, y: y + rowHeight, width: size.width, height: Math.max(0, size.height - rowHeight) };
     const chrome: Record<string, Rect> = { bar, content, top: bar };
-    let itemX = bar.x + MAC_TAB_ITEM_INSET;
+    const itemHeight = Math.min(MAC_TAB_ITEM_HEIGHT, barHeight);
     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;
+      chrome[`item${i}`] = snapRect({ x: bar.x + MAC_TAB_ITEM_INSET + i * segment, y: bar.y + (barHeight - itemHeight) / 2, width: segment, height: itemHeight });
     }
     this.setChrome(node, chrome);
     const selected = readSelected(node, n);
@@ -5261,33 +5465,54 @@ 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(this.env.platform === 'macos' ? MAC_NAVSPLIT_SIDEBAR_WIDTH : NAVSPLIT_SIDEBAR_WIDTH, usable * NAVSPLIT_SIDEBAR_MAX_FRACTION);
+    const mac = this.env.platform === 'macos';
+    const [sidebar, detail, ...rest] = node.children;
+    // The sidebar's width: the app's `.navigationSplitViewColumnWidth` (a
+    // `splitColumnWidth` hint on the sidebar's content, its ideal width
+    // between its min and max), else the platform's default; on a Mac the
+    // user drags the column's edge (`env.sidebarWidths`) between the same
+    // bounds. Never more than 40% of the width.
+    const requested = sidebar ? splitColumnWidthOf(sidebar) : null;
+    const fallback = mac ? MAC_NAVSPLIT_SIDEBAR_WIDTH : NAVSPLIT_SIDEBAR_WIDTH;
+    const minWidth = requested?.min ?? Math.min(fallback, requested?.ideal ?? fallback);
+    const maxWidth = Math.min(requested?.max ?? Infinity, usable * NAVSPLIT_SIDEBAR_MAX_FRACTION);
+    const dragged = mac ? this.env.sidebarWidths?.[node.id] : undefined;
+    const sidebarWidth = Math.max(0, Math.min(maxWidth, Math.max(minWidth, dragged ?? requested?.ideal ?? fallback)));
     const visible = node.props['sidebarVisible'] !== false;
+    // A Mac's sidebar is a panel inset from the window's edges, with no separator.
+    const panelInset = mac ? MAC_NAVSPLIT_SIDEBAR_INSET : 0;
+    const separatorWidth = mac ? 0 : NAVSPLIT_SEPARATOR_WIDTH;
     // Hidden, the sidebar and its separator sit just off the leading edge.
-    const sidebarX = visible ? x + leading : x - sidebarWidth - NAVSPLIT_SEPARATOR_WIDTH;
+    const sidebarX = visible ? x + leading + panelInset : x - sidebarWidth - separatorWidth;
     const separatorX = sidebarX + sidebarWidth;
-    const detailX = visible ? separatorX + NAVSPLIT_SEPARATOR_WIDTH : x + leading;
+    const detailX = visible ? separatorX + separatorWidth : 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';
+    // On a Mac the toggle is a bare 36 slot centered in the toolbar's row: at
+    // the sidebar panel's trailing end, or after the window buttons while
+    // the sidebar is hidden.
     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 toggleX = mac && visible
+      ? sidebarX + sidebarWidth - MAC_NAVSPLIT_TOGGLE_INSET - toggleSize
+      : 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 },
+      separator: { x: separatorX, y, width: separatorWidth, height: size.height },
       detail: { x: visible ? detailX : x, y, width: Math.max(0, x + size.width - (visible ? detailX : x)), height: size.height },
       toggle: { x: toggleX, y: toggleY, width: toggleSize, height: toggleSize },
     };
+    // The Mac's sidebar panel (the page draws it), inset from the window's edges.
+    if (mac) chrome['panel'] = { x: sidebarX, y: y + panelInset, width: sidebarWidth, height: Math.max(0, size.height - 2 * panelInset) };
+    // The Mac's column divider (the page's drag handle for the sidebar's
+    // width), a strip astride the panel's trailing edge while it shows.
+    if (mac && visible) chrome['divider'] = { x: separatorX - MAC_NAVSPLIT_DIVIDER_GRIP / 2, y, width: MAC_NAVSPLIT_DIVIDER_GRIP, height: size.height };
     this.setChrome(node, chrome);
-    const toggleRoom = toggleSize + NAV_GROUP_SPACING;
-    const [sidebar, detail, ...rest] = node.children;
+    const toggleRoom = toggleSize + (mac ? MAC_BAR_GROUP_GAP : NAV_GROUP_SPACING);
     if (sidebar) {
       const proposal: Proposal = { width: sidebarWidth, height: size.height };
-      this.place(sidebar, { ...cctx, splitSidebar: true, splitColumn: true, barLeading: visible ? toggleRoom : 0 }, proposal, sidebarX, y);
+      // On a Mac the toggle is at the sidebar's trailing end: its screens' items start where they would.
+      this.place(sidebar, { ...cctx, splitSidebar: true, splitColumn: true, barLeading: visible && !mac ? toggleRoom : 0 }, proposal, sidebarX, y);
     }
     if (detail) {
       const proposal: Proposal = { width: detailWidth, height: size.height };
@@ -5512,12 +5737,20 @@ export class LayoutPass {
   private placeSlider(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number, size: Size): void {
     const plan = this.sliderPlan(node, ctx, p);
     const { cctx } = plan;
-    // The label is not drawn (a Mac form places it in its label column).
-    if (plan.label && !ctx.formColumn) this.hide(plan.label, node);
     const m = this.sliderMetrics();
     const rowY = y;
     let trackX = x;
     let trackEnd = x + size.width;
+    // In a Mac grouped form the label leads the row and the slider takes its
+    // trailing 55%; elsewhere the label is not drawn (a Mac columns form
+    // places it in its label column).
+    if (plan.label && ctx.groupedRow) {
+      const labelSize = this.measure(plan.label, cctx, NIL_PROPOSAL);
+      this.place(plan.label, cctx, NIL_PROPOSAL, x, rowY + (m.height - labelSize.height) / 2);
+      trackX = x + size.width * (1 - MAC_GROUPED_SLIDER_FRACTION);
+    } else if (plan.label && !ctx.formColumn) {
+      this.hide(plan.label, node);
+    }
     if (plan.min) {
       this.place(plan.min, cctx, NIL_PROPOSAL, x, rowY + (m.height - plan.minSize.height) / 2);
       trackX += plan.minSize.width + SLIDER_LABEL_GAP;
@@ -5672,7 +5905,8 @@ export class LayoutPass {
       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);
+      // The Mac's message is the body text (13), as large as the title.
+      const messageFont = resolveFont({ textStyle: m === MAC_ALERT_METRICS ? 'body' : 'subheadline' }, ctx.font, this.env);
       // Heights first (the card is centered), then the rects.
       let h = m.padTop;
       let titleBlock: { layout: TextLayout; height: number; top: number } | null = null;
@@ -5698,9 +5932,9 @@ export class LayoutPass {
       const headerHeight = h;
       const rows = buttons.length === 0 ? 1 : buttons.length === 2 ? 1 : buttons.length;
       h += rows * m.buttonHeight + (rows - 1) * m.buttonSpacing + m.padBottom;
-      // Centered in the safe area, as iOS does.
+      // Centered in the safe area, as iOS does; a Mac's panel in the window.
       const { safeArea: inset } = this.env;
-      const top = y + (y <= 0 ? inset.top : 0);
+      const top = y + (y <= 0 && m !== MAC_ALERT_METRICS ? 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;