@swiftbrowser/web 0.26.3 → 0.26.5

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
@@ -120,6 +122,12 @@ export interface Context {
    * bar, `actions`, when the sheet has one.
    */
   macSheet?: { actions: Rect | null };
+  /**
+   * The Mac idiom: a row of a form in the columns style. A control whose
+   * label went to the label column (a stepper's, a date picker's, a
+   * picker's) draws without it, at the row's leading edge.
+   */
+  formColumn?: boolean;
   /**
    * Phase 8: the y (screen coordinates) where content clears the bars above
    * it: the top safe area at the root, the bottom of a `navscreen`'s bar (and
@@ -314,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
@@ -350,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;
@@ -376,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;
@@ -392,22 +426,77 @@ const MAC_LIST_HEADER_TOP = 4;
 const MAC_LIST_HEADER_GAP = 9;
 const MAC_LIST_FIRST_ROWS_GAP = 10;
 const MAC_LIST_FOOTER_GAP = 8;
+// A Mac's Form (measured in the Mac app): the columns style, with no
+// insets of its own and centered vertically in the room it gets. The labels
+// (13) right-aligned in a column as wide as the widest, from the leading
+// edge; the controls in a column 10 after it that runs to the trailing
+// edge; a section header and a footer (13 regular, the label color) in the
+// controls column; 8 under a header, rows 7 apart, sections touching, a
+// header 4 under the rows before it (right under a footer), a footer 2
+// under the last row.
+const MAC_FORM_LABEL_GAP = 10;
+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;
+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;
@@ -654,25 +743,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;
@@ -1449,10 +1538,24 @@ interface ListGroupPlan {
   outlines: { group: LayoutNode; frame: Rect }[];
 }
 
+/** A Mac form's label column entry: text the page draws (`layout`), or a view (`node`) placed at the rect. */
+interface FormLabelPlan {
+  /** Relative to the list origin at scroll 0; a view's rect is its own size, at the column's trailing edge. */
+  rect: Rect;
+  layout: TextLayout | null;
+  node: LayoutNode | null;
+  ctx: Context;
+}
+
 interface ListPlan {
   size: Size;
   contentSize: Size;
   groups: ListGroupPlan[];
+  /** The Mac idiom's columns form: its label column's entries. */
+  labels?: FormLabelPlan[];
+  columns?: boolean;
+  /** The columns form's controls column: where it starts (relative to the list origin) and its width. */
+  column?: { x: number; width: number };
 }
 
 interface ScrollPlan {
@@ -1906,7 +2009,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;
@@ -2350,8 +2453,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 };
   }
@@ -2448,6 +2553,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) => {
@@ -2548,12 +2664,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;
-        // A Mac shows the picker's label before the control.
-        const labelText = mac ? (str(node.props['label']) ?? '') : '';
+        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,
@@ -2564,17 +2691,21 @@ export class LayoutPass {
         };
       }
       const font = ctx.font;
-      const labelWidth = this.measurer.measureWidth(str(node.props['label']) ?? '', font);
+      // In a Mac form's row the label is in the label column and the pop-up spans the controls column.
+      const labelWidth = ctx.formColumn ? 0 : this.measurer.measureWidth(str(node.props['label']) ?? '', font);
       const value = options[selected] ?? '';
       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 popup = mac && (!ctx.listRow || ctx.formColumn === true);
+      // 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,
-          height: ctx.listRow ? (mac ? MAC_PICKER_MENU_ROW_HEIGHT : PICKER_MENU_ROW_HEIGHT) : mac ? MAC_PICKER_MENU_HEIGHT : PICKER_MENU_HEIGHT,
+          // 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',
         font,
@@ -2635,7 +2766,8 @@ export class LayoutPass {
       const room = Math.max(0, size.width - PICKER_MENU_GAP);
       let labelWidth = plan.labelWidth;
       let valueWidth = plan.valueWidth;
-      if (labelWidth + valueWidth > room) {
+      // In a Mac form's controls column the pop-up spans the column (its label is in the label column).
+      if (!ctx.formColumn && labelWidth + valueWidth > room) {
         if (labelWidth <= valueWidth) {
           labelWidth = Math.min(labelWidth, room / 2);
           valueWidth = room - labelWidth;
@@ -2648,7 +2780,7 @@ export class LayoutPass {
       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'];
+      if (this.env.platform === 'macos' && (!ctx.listRow || ctx.formColumn === true)) chrome['popup'] = chrome['value'];
       else delete chrome['popup'];
     }
     this.setChrome(node, chrome);
@@ -2692,7 +2824,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++) {
@@ -3159,8 +3291,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 && 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;
@@ -3168,39 +3307,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(
@@ -3209,7 +3360,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.
@@ -3246,6 +3405,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);
@@ -3261,6 +3422,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;
@@ -3273,10 +3436,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[] = [];
@@ -3294,7 +3459,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
@@ -3307,7 +3474,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
@@ -3317,8 +3486,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);
@@ -3338,7 +3511,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
@@ -3353,7 +3526,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'] = [];
@@ -3368,10 +3551,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;
@@ -3393,7 +3576,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 } : {}) };
     });
   }
 
@@ -3647,6 +3830,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);
         }
@@ -3915,24 +4101,238 @@ export class LayoutPass {
     return { p: { width: p.width, height: size.height + top + bottom }, y: y - top };
   }
 
+  /** The labeled control a form row's stack is shifted to (the form's alignment guide), if it has one. */
+  private macFormGuide(row: LayoutNode): LayoutNode | null {
+    const inner = unwrapStyled(row);
+    if (inner.kind !== 'hstack') return null;
+    return inner.children.find((child) => MAC_FORM_LABELED_KINDS.includes(unwrapStyled(child).kind)) ?? null;
+  }
+
+  /**
+   * The Mac idiom's `Form` (MAC_FORM_* above, docs/notes/macos.md): the
+   * columns style. A row whose control carries a label (a text field's
+   * title, a picker's, a stepper's, a date picker's, a slider's) puts it
+   * in the label column, right-aligned, and the control in the controls
+   * column at the control's own height; a toggle, a button, text and other
+   * rows go in the controls column whole. A stack row with such a control
+   * in it is shifted so the control starts at the controls column, what is
+   * before it reaching into the label column, as the form's alignment guide
+   * does on a Mac. Headers and footers are 13-point text in the controls
+   * column. No cards, no separators.
+   */
+  private macFormPlan(node: LayoutNode, ctx: Context, p: Proposal): ListPlan {
+    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;
+    const rowCtx: Context = { ...this.childContext(node, ctx), listRow: true, labelColumn: false, listCell: true, formColumn: true, sidebarList: false };
+    const font = rowCtx.font;
+    const textFont = makeFont('system', textStyleSize('body', this.env.dynamicTypeSize, 'macos'), 400);
+    type Row = { node: LayoutNode; label: string | null; labelNode: LayoutNode | null; guide: LayoutNode | null };
+    type Source = { section: LayoutNode | null; rows: Row[]; headerView: LayoutNode | null; footerView: LayoutNode | null };
+    // The rows, each with what goes in the label column.
+    const classify = (row: LayoutNode): Row => {
+      const inner = unwrapStyled(row);
+      switch (inner.kind) {
+        case 'textfield':
+          return { node: row, label: str(inner.props['placeholder']) || null, labelNode: null, guide: null };
+        case 'picker':
+          return { node: row, label: str(inner.props['label']) || null, labelNode: null, guide: null };
+        case 'stepper':
+        case 'datepicker':
+          return { node: row, label: null, labelNode: inner.props['labelsHidden'] === true ? null : this.contentOf(inner), guide: null };
+        case 'slider': {
+          const names = Array.isArray(inner.props['labels']) ? inner.props['labels'].map(str) : [];
+          const at = names.indexOf('label');
+          return { node: row, label: null, labelNode: at >= 0 ? (inner.children[at] ?? null) : null, guide: null };
+        }
+        default:
+          return { node: row, label: null, labelNode: null, guide: this.macFormGuide(row) };
+      }
+    };
+    const sources: Source[] = [];
+    for (const child of node.children) {
+      if (child.kind === 'section') {
+        const rows = child.children.filter((row) => row.kind !== 'sectionheader' && row.kind !== 'sectionfooter').map(classify);
+        sources.push({ section: child, rows, headerView: child.children.find((row) => row.kind === 'sectionheader') ?? null, footerView: child.children.find((row) => row.kind === 'sectionfooter') ?? null });
+      } else {
+        const last = sources[sources.length - 1];
+        if (last && last.section === null) last.rows.push(classify(child));
+        else sources.push({ section: null, rows: [classify(child)], headerView: null, footerView: null });
+      }
+    }
+    // The label column: as wide as the widest label (a view label at its ideal size).
+    const labelCtx: Context = { ...this.childContext(node, ctx), stackAxis: null, listRow: false, listCell: true };
+    let labelWidth = 0;
+    const labelSizes = new Map<LayoutNode, Size>();
+    for (const source of sources) {
+      for (const row of source.rows) {
+        if (row.label !== null) labelWidth = Math.max(labelWidth, this.measurer.measureWidth(row.label, font));
+        else if (row.labelNode) {
+          const size = this.measure(row.labelNode, labelCtx, { width: null, height: null });
+          labelSizes.set(row.labelNode, size);
+          labelWidth = Math.max(labelWidth, size.width);
+        }
+      }
+    }
+    labelWidth = Math.ceil(labelWidth);
+    const controlX = labelWidth + MAC_FORM_LABEL_GAP;
+    const controlWidth = Math.max(0, layoutWidth - controlX);
+    const textCtx: Context = { ...labelCtx, font: textFont };
+    const makeText = (text: string): { layout: TextLayout; size: Size } => {
+      const wrapped = wrapText(text, textFont, controlWidth, null, this.measurer);
+      return { layout: { font: textFont, lines: wrapped.lines, alignment: 'leading', truncated: false }, size: { width: wrapped.width, height: textHeight(wrapped.lines.length, textFont) } };
+    };
+    const supplement = (view: LayoutNode | null, y: number): ListSupplementPlan | null => {
+      if (!view) return null;
+      const proposal: Proposal = { width: controlWidth, height: null };
+      const size = this.measure(view, textCtx, proposal);
+      return { node: view, ctx: textCtx, proposal, rect: { x: controlX, y, width: size.width, height: size.height } };
+    };
+    // Built from a top, then again centered in the room when the rows are shorter than it.
+    const build = (startY: number): { groups: ListGroupPlan[]; labels: FormLabelPlan[]; end: number } => {
+    const groups: ListGroupPlan[] = [];
+    const labels: FormLabelPlan[] = [];
+    let y = startY;
+    for (let g = 0; g < sources.length; g++) {
+      const source = sources[g] as Source;
+      const previous = groups[g - 1];
+      const headerText = source.section ? str(source.section.props['header']) : null;
+      const footerText = source.section ? str(source.section.props['footer']) : null;
+      const hasHeader = (headerText !== null && headerText.length > 0) || (source.headerView !== null && this.measure(source.headerView, textCtx, { width: controlWidth, height: null }).height > 0);
+      // A header after rows is 4 under them; right under a footer.
+      if (previous && hasHeader && previous.footer === null && !(previous.footerView !== null && previous.footerView.rect.height > 0)) y += MAC_FORM_HEADER_TOP;
+      const top = y;
+      let header: ListGroupPlan['header'] = null;
+      let footer: ListGroupPlan['footer'] = null;
+      const headerView = supplement(source.headerView, y);
+      if (headerView && headerView.rect.height > 0) y += headerView.rect.height + MAC_FORM_HEADER_GAP;
+      if (headerText !== null && headerText.length > 0) {
+        const { layout, size } = makeText(headerText);
+        header = { rect: { x: controlX, y, width: controlWidth, height: size.height }, layout };
+        y += size.height + MAC_FORM_HEADER_GAP;
+      }
+      const cardTop = y;
+      const rows: ListRowPlan[] = [];
+      source.rows.forEach((row, i) => {
+        if (i > 0) y += MAC_FORM_ROW_GAP;
+        if (row.node.kind === 'lazyspacer') {
+          const rect: Rect = { x: controlX, y, width: controlWidth, height: 0 };
+          rows.push({ node: row.node, proposal: { width: controlWidth, height: 0 }, contentSize: ZERO, row: rect, content: rect, badge: null, edit: null });
+          return;
+        }
+        // A shifted stack is proposed the whole row less the trailing inset; its place is set when the list is placed.
+        // A shifted stack is proposed the whole row; its place and width are set when the list is placed.
+        const proposal: Proposal = { width: row.guide ? layoutWidth : controlWidth, height: null };
+        const contentSize = this.measure(row.node, rowCtx, proposal);
+        const labelSize = row.labelNode ? labelSizes.get(row.labelNode) ?? ZERO : row.label !== null ? { width: this.measurer.measureWidth(row.label, font), height: font.lineHeight } : ZERO;
+        const rowHeight = Math.max(contentSize.height, labelSize.height);
+        // A text field's row is the field itself (the page draws the Mac's bezel on the row element); the others span the form.
+        const field = unwrapStyled(row.node).kind === 'textfield';
+        rows.push({
+          node: row.node,
+          proposal,
+          contentSize,
+          row: field ? { x: controlX, y, width: controlWidth, height: rowHeight } : { x: 0, y, width: layoutWidth, height: rowHeight },
+          content: { x: row.guide ? 0 : controlX, y: y + (rowHeight - contentSize.height) / 2, width: contentSize.width, height: contentSize.height },
+          badge: null,
+          edit: null,
+          separatorHidden: { top: true, bottom: true },
+        });
+        if (row.label !== null) {
+          labels.push({
+            rect: { x: 0, y: y + (rowHeight - labelSize.height) / 2, width: labelWidth, height: labelSize.height },
+            layout: { font, lines: [row.label], alignment: 'trailing', truncated: false },
+            node: null,
+            ctx: labelCtx,
+          });
+        } else if (row.labelNode) {
+          labels.push({
+            rect: { x: labelWidth - labelSize.width, y: y + (rowHeight - labelSize.height) / 2, width: labelSize.width, height: labelSize.height },
+            layout: null,
+            node: row.labelNode,
+            ctx: labelCtx,
+          });
+        }
+        y += rowHeight;
+      });
+      // The rows' card spans the form: the label column is drawn in it too.
+      const card: Rect = { x: 0, y: cardTop, width: layoutWidth, height: y - cardTop };
+      if (footerText !== null && footerText.length > 0) {
+        y += MAC_FORM_FOOTER_GAP;
+        const { layout, size } = makeText(footerText);
+        footer = { rect: { x: controlX, y, width: controlWidth, height: size.height }, layout };
+        y += size.height;
+      }
+      let footerView = supplement(source.footerView, y + MAC_FORM_FOOTER_GAP);
+      if (footerView && footerView.rect.height > 0) y += MAC_FORM_FOOTER_GAP + footerView.rect.height;
+      else if (footerView) footerView = { ...footerView, rect: { ...footerView.rect, y } };
+      groups.push({ section: source.section, frame: { x: 0, y: top, width: layoutWidth, height: y - top }, header, footer, headerView, footerView, card, rows, outlines: [] });
+    }
+    return { groups, labels, end: y };
+    };
+    let built = build(0);
+    // Centered in the room under the bar when shorter than it (the Mac's columns form does not scroll).
+    const scrollInset = this.scrollInsets.get(node);
+    const inset = scrollInset ? scrollInset.bar + (scrollInset.largeTitle?.height ?? 0) + (scrollInset.search ?? 0) : 0;
+    const room = finite(p.height) ? p.height - inset : null;
+    if (room !== null && room > built.end) built = build((room - built.end) / 2);
+    const contentHeight = built.end;
+    return {
+      size: { width, height: p.height === null ? contentHeight : p.height },
+      contentSize: { width: layoutWidth, height: contentHeight },
+      groups: built.groups,
+      labels: built.labels,
+      columns: true,
+      column: { x: controlX, width: controlWidth },
+    };
+  }
+
   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: this.env.platform !== 'macos', listCell: this.env.platform === 'macos', sidebarList: str(node.props['style']) === 'sidebar' };
+    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: 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.
     const scrollInset = this.scrollInsets.get(node);
     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;
-    if (Object.keys(listChrome).length > 0) this.setChrome(node, listChrome);
     const inset = scrollInset ? scrollInset.bar + (scrollInset.largeTitle?.height ?? 0) + (scrollInset.search ?? 0) : 0;
     if (node.id >= 0) this.contentSizes.set(node.id, { width: plan.contentSize.width, height: plan.contentSize.height + inset });
     y += inset;
     const offset = (r: Rect): Rect => ({ x: x + r.x, y: y + r.y, width: r.width, height: r.height });
+    // 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 };
+    {
+      (plan.labels ?? []).forEach((label, i) => {
+        if (label.layout) {
+          listChrome[`formLabel${i}`] = offset(label.rect);
+          listTexts[`formLabel${i}`] = label.layout;
+        }
+      });
+    }
+    if (Object.keys(listChrome).length > 0) this.setChrome(node, listChrome);
+    if (node.id >= 0 && Object.keys(listTexts).length > 0) this.chromeText.set(node.id, listTexts);
     for (const group of plan.groups) {
       if (group.section) {
         const chrome: Record<string, Rect> = { rows: offset(group.card) };
@@ -4004,15 +4404,31 @@ export class LayoutPass {
           if (row.edit.listRow === row.node) Object.assign(chrome, controls);
           else this.setChrome(row.edit.listRow, controls);
         }
-        const rowX = x + row.content.x;
+        let rowX = x + row.content.x;
         const rowY = y + row.content.y;
+        // A columns form's shifted stack: placed, then moved so its labeled
+        // control starts at the controls column (the form's alignment guide).
+        // Placed once to find the control's offset in it, then proposed the
+        // width that ends it at the trailing edge, from where the control
+        // lands at the column.
+        const guide = columns ? this.macFormGuide(row.node) : null;
+        let proposal = row.proposal;
+        if (guide && plan.column) {
+          this.place(row.node, rowCtx, row.proposal, rowX, rowY);
+          const placed = this.frames.get(unwrapStyled(guide).id);
+          if (placed) {
+            const offset = placed.x - rowX;
+            rowX = x + plan.column.x - offset;
+            proposal = { width: Math.max(0, plan.size.width - (plan.column.x - offset)), height: row.proposal.height };
+          }
+        }
         // A row that is skipped keeps the chrome it set itself when it was
         // placed (a link's chevron and label); only the list's keys are new.
-        const own = this.placedAlready(row.node, rowCtx, row.proposal, rowX, rowY) && row.node.id >= 0
+        const own = this.placedAlready(row.node, rowCtx, proposal, rowX, rowY) && row.node.id >= 0
           ? this.chrome.get(row.node.id)
           : undefined;
         this.setChrome(row.node, own ? { ...own, ...chrome } : chrome);
-        this.place(row.node, rowCtx, row.proposal, rowX, rowY);
+        this.place(row.node, rowCtx, proposal, rowX, rowY);
         if (row.badge) this.badgeBeforeChevron(row.node);
         // iOS 26: the separator under a row starts where its first text
         // starts (after a Label's icon), else at the row's content.
@@ -4032,6 +4448,12 @@ export class LayoutPass {
         }
       }
     }
+    // The label column's views (a stepper's, a slider's, a date picker's label) go where the plan put them, after the rows (which do not draw them).
+    if (columns) {
+      for (const label of plan.labels ?? []) {
+        if (label.node) this.place(label.node, label.ctx, { width: null, height: null }, x + label.rect.x, y + label.rect.y);
+      }
+    }
   }
 
   /** The x of the first text (in tree order) placed under `node`, if any. */
@@ -4103,10 +4525,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;
@@ -4118,13 +4542,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;
@@ -4147,8 +4572,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
@@ -4181,12 +4606,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.
@@ -4199,7 +4624,12 @@ 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']) ?? '';
+    // `.navigationSubtitle`: a second line under the title in a Mac's unified
+    // title bar (11 regular, secondary); after the title in a plain one.
     const { platform } = this.env;
+    const subtitle = mac ? (str(node.props['subtitle']) ?? '') : '';
+    const shownTitle = subtitle.length > 0 && !unified && !sheetBar ? `${title} — ${subtitle}` : title;
+    const subtitleFont = makeFont('system', textStyleSize('subheadline', dynamicTypeSize, platform), 400);
     // 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);
@@ -4247,7 +4677,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) };
@@ -4274,10 +4704,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];
@@ -4292,6 +4722,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];
@@ -4309,7 +4745,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');
@@ -4335,7 +4771,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[] = [];
@@ -4344,7 +4780,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[] = [];
@@ -4357,7 +4793,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));
 
@@ -4367,7 +4803,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 };
@@ -4375,20 +4811,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);
@@ -4414,7 +4851,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;
@@ -4422,31 +4859,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;
@@ -4469,7 +4909,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;
@@ -4528,24 +4968,38 @@ 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)));
-      chrome['title'] = { x: titleX, y: rowY, width: titleWidth, height: rowHeight };
+      if (subtitle.length > 0) {
+        // The title and the subtitle stacked, centered in the row.
+        const block = titleFont.lineHeight + subtitleFont.lineHeight;
+        const top = rowY + (rowHeight - block) / 2;
+        chrome['title'] = { x: titleX, y: top, width: titleWidth, height: titleFont.lineHeight };
+        const subtitleWidth = Math.min(Math.ceil(this.measurer.measureWidth(subtitle, subtitleFont) - 0.001), Math.floor(Math.max(0, roomEnd - titleX)));
+        chrome['subtitle'] = { x: titleX, y: top + titleFont.lineHeight, width: subtitleWidth, height: subtitleFont.lineHeight };
+      } else {
+        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,
-        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.
@@ -4553,12 +5007,14 @@ export class LayoutPass {
       const roomEnd = x + size.width - rightUsed - 8;
       const compactCap = screen.width < REGULAR_WIDTH ? Math.floor(size.width * 0.56) : Infinity;
       const titleWidth = Math.min(
-        Math.ceil(this.measurer.measureWidth(title, titleFont) - 0.001),
+        Math.ceil(this.measurer.measureWidth(shownTitle, titleFont) - 0.001),
         compactCap,
         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);
@@ -4566,8 +5022,9 @@ export class LayoutPass {
     if (node.id >= 0) {
       this.fonts.set(node.id, large ? largeTitleFont : titleFont);
       const texts: Record<string, TextLayout> = {
-        title: { font: titleFont, lines: [title], 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 };
       if (large) {
         const wrapped = wrapText(title, largeTitleFont, size.width - 32, 1, this.measurer);
@@ -4860,38 +5317,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);
@@ -4984,33 +5437,41 @@ 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 sidebarWidth = Math.min(mac ? MAC_NAVSPLIT_SIDEBAR_WIDTH : NAVSPLIT_SIDEBAR_WIDTH, usable * NAVSPLIT_SIDEBAR_MAX_FRACTION);
     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) };
     this.setChrome(node, chrome);
-    const toggleRoom = toggleSize + NAV_GROUP_SPACING;
+    const toggleRoom = toggleSize + (mac ? MAC_BAR_GROUP_GAP : 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, 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 };
@@ -5157,6 +5618,8 @@ export class LayoutPass {
   private measureStepper(node: LayoutNode, ctx: Context, p: Proposal): Size {
     const label = this.contentOf(node);
     const control = this.stepperMetrics();
+    // A Mac form's row: the label is in the label column; the control alone.
+    if (ctx.formColumn) return { width: control.width, height: control.height };
     const labelSize = label ? this.measure(label, this.childContext(node, ctx), this.stepperLabelProposal(p)) : ZERO;
     return {
       width: finite(p.width) ? p.width : labelSize.width + control.gap + control.width,
@@ -5168,11 +5631,12 @@ export class LayoutPass {
     const cctx = this.childContext(node, ctx);
     const label = this.contentOf(node);
     const labelProposal = this.stepperLabelProposal(p);
-    const labelSize = label ? this.measure(label, cctx, labelProposal) : ZERO;
+    const labelSize = label && !ctx.formColumn ? this.measure(label, cctx, labelProposal) : ZERO;
     const labelY = y + (size.height - labelSize.height) / 2;
-    if (label) this.place(label, cctx, labelProposal, x, labelY);
+    // A Mac form's row: the label is in the label column (the form places it), the control at the leading edge.
+    if (label && !ctx.formColumn) this.place(label, cctx, labelProposal, x, labelY);
     const control = this.stepperMetrics();
-    const controlX = x + size.width - control.width;
+    const controlX = ctx.formColumn ? x : 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.
@@ -5232,11 +5696,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;
-    if (plan.label) 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;
@@ -5289,10 +5762,11 @@ export class LayoutPass {
       const dateWidth = capsule(dateText);
       const timeWidth = capsule(timeText);
       const capsulesWidth = dateWidth + timeWidth + (dateText !== null && timeText !== null ? capsuleGap : 0);
-      const label = node.props['labelsHidden'] === true ? null : this.contentOf(node);
+      // A Mac form's row: the label is in the label column; the fields alone.
+      const label = node.props['labelsHidden'] === true || ctx.formColumn ? 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;
+      const width = ctx.formColumn ? capsulesWidth : finite(p.width) ? p.width : labelSize.width + (label ? DATEPICKER_GAP : 0) + capsulesWidth;
       return {
         size: { width, height: Math.max(labelSize.height, mac ? MAC_DATEPICKER_HEIGHT : DATEPICKER_HEIGHT) },
         label,
@@ -5308,8 +5782,8 @@ export class LayoutPass {
 
   private placeDatePicker(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number, size: Size): void {
     const plan = this.datePickerPlan(node, ctx, p);
-    if (!plan.label) {
-      // `labelsHidden`: the label child exists but is not shown.
+    if (!plan.label && (!ctx.formColumn || node.props['labelsHidden'] === true)) {
+      // `labelsHidden`: the label child exists but is not shown (a Mac form places it in its label column).
       for (const child of node.children) this.hide(child, node);
     }
     const labelY = y + (size.height - plan.labelSize.height) / 2;
@@ -5390,7 +5864,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;
@@ -5416,9 +5891,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;