@swiftbrowser/web 0.3.0 → 0.4.0

package/src/layout/engine.ts

@@ -19,7 +19,7 @@
  * those.
  */
 
-import { FONT_FAMILIES, defaultFont, makeFont, resolveFont, textStyleSize } from './typography';
+import { FONT_FAMILIES, defaultFont, makeFont, resolveFont, textHeight, textStyleSize } from './typography';
 import { wrapRuns, wrapText, type TextRunInput } from './text';
 import { formatPickerDate, formatPickerTime, sliderFraction } from './controls';
 import { videoSize } from './video';
@@ -65,13 +65,33 @@ export interface Context {
   /**
    * Height of the bar covering the bottom of the screen above the subtree
    * (a `tabview`'s bar plus the bottom safe area), 0 outside tabs. Scrolling
-   * views that reach the screen bottom inset their content by it.
+   * views that reach the screen bottom inset their content by it. Inside a
+   * `navscreen` with a bottom toolbar or search field, the room they take
+   * (up from `bottomEdge`).
    */
   bottomBar: number;
+  /** Where the bar `bottomBar` measures ends: the screen's bottom unless set (a `navscreen`'s bottom). */
+  bottomEdge?: number | undefined;
+  /**
+   * iOS 26: inside a `navscreen` whose content is not itself a list or scroll
+   * view, its bar (the band from the screen's top to `top`, `x` to `x + width`):
+   * a vertical list or scroll view whose top edge touches it across the
+   * screen runs up under it (`scrollEdgeGrowth`).
+   */
+  barAbove?: { top: number; height: number; x: number; width: number } | undefined;
   /** Phase 6 `imageScale`: symbol images measure this fraction of the line height (1 by default). */
   imageScale: number;
   /** Phase 7: true inside the sidebar column of a `navsplit` (a selected `navlink` row drops its chevron there). */
   splitSidebar: boolean;
+  /** Rows of a `sidebar`-style list (iPadOS): its links have no chevron. */
+  sidebarList?: boolean;
+  /**
+   * Inside a list row (the whole subtree): a `Label` lays out in iOS's icon
+   * column, its icon centred 28 from the card's edge and its title 40 past
+   * the content edge, so titles and separators line up across rows whatever
+   * the symbols' widths, and with the edit-mode controls.
+   */
+  labelColumn?: 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
@@ -85,6 +105,12 @@ export interface Context {
    * bar does at the root. Only the stack's own screens see it.
    */
   barInset?: number;
+  /**
+   * The room a split view's sidebar toggle takes at the leading edge of the
+   * bar row of the column it sits in (that column's stack's screens shift
+   * their back button and leading items past it).
+   */
+  barLeading?: number;
   /**
    * Phase 12: the size of the nearest container (`containerRelativeFrame`):
    * the screen at the root, a scroll view's viewport inside one.
@@ -127,6 +153,9 @@ const TEXTFIELD_HEIGHT_PLAIN = 22;
 /** A vertical `roundedBorder` field's text inset: 7 + the 1px border across, (34 - 22) / 2 down. */
 const TEXTFIELD_ROUNDED_INSET = { horizontal: 8, vertical: 6 };
 const NAV_BAR_HEIGHT = 44;
+// iOS 26: under an inline title the content starts 10 below the bar's 44
+// row (measured in the iOS 26.2 simulator); in a sheet it does not.
+const NAV_BAR_INLINE_BOTTOM = 10;
 // iOS 26: the large title's row is 62 (52 before).
 const LARGE_TITLE_HEIGHT = 62;
 /** Chevron glyph plus its gap, in px. */
@@ -146,18 +175,29 @@ const SHEET_MEDIUM_HEIGHT = 433;
 const SHEET_CONTENT_TOP = 16;
 const LIST_INSET = 16;
 const LIST_CELL_PADDING = 16;
-// iOS 26 (measured in the iOS 26.2 simulator, Examples/Fidelity): rows are
-// at least 52 tall with 13 above and below their content; a section's header
-// is a sentence-case headline-sized line that starts 9 into the 35 gap
-// between cards and ends 10 above its card.
-const LIST_ROW_VPAD = 13;
+// iOS 26 (measured in the iOS 26.2 simulator, Examples/Fidelity, in thirds
+// of a point): rows are at least 52 tall with 15 above and below their text;
+// a section's header is a sentence-case headline-sized line that starts 8
+// into the 35.67 gap between cards and ends 10 above its card; a footer is
+// 7.33 below its card.
+const LIST_ROW_VPAD = 15;
+// A row holding just a toggle or a stepper has 10 above and below it (so
+// both come out 52 tall), a segmented picker 14.5 (61).
+const LIST_ROW_CONTROL_VPAD = 10;
+const LIST_ROW_SEGMENTED_VPAD = 14.5;
 const LIST_ROW_MIN_HEIGHT = 52;
+// iPadOS sidebar rows (`sidebar` style): at least 44 tall, 11 above and
+// below their text.
+const LIST_SIDEBAR_ROW_MIN_HEIGHT = 44;
+const LIST_SIDEBAR_ROW_VPAD = 11;
 const LIST_TOP = 18;
 const LIST_BOTTOM = 20;
-const LIST_HEADER_LIFT = 9;
+const LIST_HEADER_LIFT = 8;
 const LIST_HEADER_GAP = 10;
-const LIST_FOOTER_GAP = 6;
-const LIST_SECTION_GAP = 35;
+const LIST_FOOTER_GAP = 22 / 3;
+const LIST_SECTION_GAP = 107 / 3;
+// Below a section's footer the gap to the next section is 11 shorter.
+const LIST_SECTION_GAP_AFTER_FOOTER = 74 / 3;
 const LIST_CHEVRON_WIDTH = 20;
 // Phase 4.
 // iOS 26: the tab bar is a 62-tall glass capsule floating 21 from the sides
@@ -219,15 +259,19 @@ const NAVSPLIT_SIDEBAR_WIDTH = 320;
 /** The sidebar never takes more than this share of the split view's width. */
 const NAVSPLIT_SIDEBAR_MAX_FRACTION = 0.4;
 const NAVSPLIT_SEPARATOR_WIDTH = 1;
+/** `.inspector`: the trailing column's default width, and at most this share of the width. */
+const INSPECTOR_WIDTH = 320;
+const INSPECTOR_MAX_FRACTION = 0.5;
 const EPSILON = 1e-6;
 // Phase 8 (docs/ops-protocol.md, "Phase 8: interaction": alerts and controls).
 /** The segmented −/+ control of a `stepper`, trailing. */
 const STEPPER_WIDTH = 94;
 const STEPPER_HEIGHT = 32;
 const STEPPER_GAP = 8;
-/** A `slider` is 35 high (its label row, when present, sits above). */
-// iOS 26: a 6pt track and a 38 × 24 pill knob in a 35 row.
-const SLIDER_HEIGHT = 35;
+/** A `slider` is 31 high (its label row, when present, sits above). */
+// iOS 26: a 6pt track and a 38 × 24 pill knob in a 31 row (a form row
+// holding one is 61: 31 + 2 × 15).
+const SLIDER_HEIGHT = 31;
 const SLIDER_TRACK_HEIGHT = 6;
 const SLIDER_THUMB = 38;
 const SLIDER_THUMB_HEIGHT = 24;
@@ -460,6 +504,19 @@ function cellStyle(node: LayoutNode, key: string): unknown {
   return undefined;
 }
 
+/** The default vertical padding above and below a list row's content. */
+function listRowVPad(row: LayoutNode, sidebar: boolean): number {
+  switch (row.kind) {
+    case 'picker':
+      return str(row.props['style']) === 'segmented' ? LIST_ROW_SEGMENTED_VPAD : 0;
+    case 'toggle':
+    case 'stepper':
+      return LIST_ROW_CONTROL_VPAD;
+    default:
+      return sidebar ? LIST_SIDEBAR_ROW_VPAD : LIST_ROW_VPAD;
+  }
+}
+
 /** `gridCellColumns` of a grid cell (at least 1). */
 function gridSpanOf(node: LayoutNode): number {
   const span = num(cellStyle(node, 'gridCellColumns'));
@@ -472,6 +529,20 @@ function gridAnchorOf(node: LayoutNode): [number, number] | null {
   return point ? [point.x, point.y] : null;
 }
 
+/** `gridColumnAlignment` of a grid cell as a horizontal unit anchor. */
+function gridColumnAnchorOf(node: LayoutNode): number | null {
+  switch (str(cellStyle(node, 'gridColumnAlignment'))) {
+    case 'leading':
+      return 0;
+    case 'center':
+      return 0.5;
+    case 'trailing':
+      return 1;
+    default:
+      return null;
+  }
+}
+
 /** Vertical anchor of a `gridrow` alignment (null → the grid's). */
 function rowAnchor(alignment: string | null, gridAlignment: string): number {
   switch (alignment) {
@@ -576,7 +647,7 @@ function rowHintsOf(node: LayoutNode): RowHints {
 }
 
 /** Phase 8 wrappers whose first child is the row content they stand for. */
-const ROW_WRAPPERS: ReadonlySet<string> = new Set(['listrow', 'swipeactions', 'contextmenu', 'gesture', 'tapgesture']);
+const ROW_WRAPPERS: ReadonlySet<string> = new Set(['listrow', 'swipeactions', 'contextmenu', 'gesture', 'tapgesture', 'draggable', 'dropdestination']);
 
 /**
  * Phase 8: the `listrow` a list row is (or wraps, through `styled` and the
@@ -592,8 +663,32 @@ function listRowOf(node: LayoutNode): LayoutNode | null {
   return null;
 }
 
-/** Phase 8 edit mode: the width of a `listrow`'s leading control, by which its content shifts right. */
+/** A list row's `Label`: where its icon is centred, and where its title starts, past the row content's leading edge (iOS). */
+const LIST_LABEL_ICON_CENTER = 12;
+const LIST_LABEL_TITLE_X = 40;
+
+/**
+ * A `Label` in its default style: an hstack of the marked icon (`labelIcon`
+ * on its `styled` wrapper) then the title. In a list row it takes iOS's icon
+ * column instead of the stack's spacing.
+ */
+function labelColumnOf(node: LayoutNode): { icon: LayoutNode; title: LayoutNode } | null {
+  if (node.kind !== 'hstack' || node.children.length !== 2) return null;
+  const [icon, title] = node.children as [LayoutNode, LayoutNode];
+  const style = icon.kind === 'styled' ? (icon.props['style'] as Record<string, unknown> | undefined) : undefined;
+  if (style?.['labelIcon'] !== true) return null;
+  return { icon, title };
+}
+
+/** Phase 8 edit mode: the width of a `listrow`'s leading control (the selection circle / minus) and of a movable row's trailing grip. */
 export const LIST_EDIT_CONTROL_WIDTH = 44;
+/**
+ * Edit mode: how far a control sits in from the card's edge (its 22 pt glyph
+ * is centred 28 from the edge, as iOS draws it) and by how much the content
+ * shifts right of the leading control, or narrows for the trailing grip.
+ */
+export const LIST_EDIT_CONTROL_INSET = 6;
+export const LIST_EDIT_CONTROL_SHIFT = 40;
 
 /** `font` with every metric multiplied by `scale` (for `imageScale`d symbols). */
 function scaledFont(font: ResolvedFont, scale: number): ResolvedFont {
@@ -601,7 +696,7 @@ function scaledFont(font: ResolvedFont, scale: number): ResolvedFont {
   const size = font.size * scale;
   const lineHeight = font.lineHeight * scale;
   const px = (v: number): string => `${Math.round(v * 100) / 100}px`;
-  return { ...font, size, lineHeight, css: `${font.weight} ${px(size)}/${px(lineHeight)} ${FONT_FAMILIES[font.family]}` };
+  return { ...font, size, lineHeight, leading: font.leading * scale, css: `${font.weight} ${px(size)}/${px(lineHeight)} ${FONT_FAMILIES[font.family]}` };
 }
 
 // ---------------------------------------------------------------------------
@@ -814,8 +909,12 @@ interface ListRowPlan {
   content: Rect;
   /** Phase 6 `.badge`: trailing text in the row (rect relative to the list origin). */
   badge: { rect: Rect; layout: TextLayout } | null;
-  /** Phase 8 edit mode: the `listrow` the row is and its 44px leading control rect (relative to the list origin). */
-  edit: { listRow: LayoutNode; control: Rect } | null;
+  /**
+   * Phase 8 edit mode: the `listrow` the row is, its 44px leading control
+   * rect (a selectable or deletable row) and its 44px trailing grip rect (a
+   * movable row), relative to the list origin.
+   */
+  edit: { listRow: LayoutNode; control: Rect | null; reorder: Rect | null } | null;
   /** `.listRowSeparator(.hidden)`: the row's separator edges left out. */
   separatorHidden?: { top: boolean; bottom: boolean } | null;
 }
@@ -892,6 +991,8 @@ interface GridPlan {
   size: Size;
   columns: number[];
   columnX: number[];
+  /** Horizontal unit anchor per column from a cell's `gridColumnAlignment` (null → the grid's). */
+  columnAnchors: (number | null)[];
   rows: GridRowPlan[];
 }
 
@@ -971,11 +1072,13 @@ export class LayoutPass {
   /** Previous screen title per navscreen node, for the back button label. */
   private readonly previousTitles = new Map<LayoutNode, string>();
   /**
-   * A large-title screen's root list or vertical scroll view starts under the
-   * bar and insets its content by the title row, which scrolls with it
-   * (iOS): the inset, by scroll node, set by `placeNavScreen`.
+   * A navigation screen's root list or vertical scroll view starts at the top
+   * of the screen and scrolls under its bar (`bar` tall): its content starts
+   * below the bar and the large title row that scrolls with it, if any.
+   * `nested`: a scroll view deeper in the screen's content that touches the
+   * bar (`scrollEdgeGrowth`), rather than the screen's own content.
    */
-  private readonly titleInsets = new WeakMap<LayoutNode, Rect>();
+  private readonly scrollInsets = new WeakMap<LayoutNode, { bar: number; largeTitle: Rect | null; nested?: boolean }>();
 
   private readonly memo = new Map<LayoutNode, Map<string, unknown>>();
   private readonly implicit = new Map<LayoutNode, LayoutNode>();
@@ -1020,10 +1123,17 @@ export class LayoutPass {
     const { screen, safeArea } = this.env;
     const ctx = this.rootContext;
     for (const root of roots) {
-      if (root.kind === 'navstack' || root.kind === 'tabview' || root.kind === 'navsplit' || root.kind === 'alert') {
-        // All three ignore the safe areas: the tab bar and navigation bars
+      if (
+        root.kind === 'navstack' ||
+        root.kind === 'tabview' ||
+        root.kind === 'navsplit' ||
+        root.kind === 'inspector' ||
+        root.kind === 'alert'
+      ) {
+        // These ignore the safe areas: the tab bar and navigation bars
         // extend into them and the content is inset instead (a `navsplit`
-        // hands the horizontal insets to its columns, see `placeNavSplit`).
+        // hands the horizontal insets to its columns, see `placeNavSplit`;
+        // an `inspector` its trailing one to its panel).
         // Phase 8: an `alert` is a full-screen layer too (scrim + card).
         this.place(root, ctx, { width: screen.width, height: screen.height }, 0, 0);
       } else if (root.kind === 'sheet') {
@@ -1038,6 +1148,14 @@ export class LayoutPass {
           width: Math.max(0, screen.width - safeArea.leading - safeArea.trailing),
           height: Math.max(0, screen.height - safeArea.top - safeArea.bottom),
         };
+        if (this.env.contentHeight) {
+          // An island: the root takes its content's height and sits at the top.
+          const proposal: Proposal = { width: safe.width, height: null };
+          const size = this.measure(root, ctx, proposal);
+          const { dx } = alignIn(safe, size, 'center');
+          this.place(root, ctx, proposal, safeArea.leading + dx, safeArea.top);
+          continue;
+        }
         const proposal: Proposal = { width: safe.width, height: safe.height };
         const size = this.measure(root, ctx, proposal);
         const { dx, dy } = alignIn(safe, size, 'center');
@@ -1047,6 +1165,32 @@ export class LayoutPass {
     return this.finish();
   }
 
+  /**
+   * A `host` element (src/hostContent.ts): the page's DOM, measured by the
+   * host measurer. `fill` takes the proposal and the content's own size on an
+   * unconstrained axis; `content` takes the content's ideal width capped by
+   * the proposal and its height at that width, like text. Without a measurer
+   * (headless) it is a 10×10 placeholder, like a shape with no proposal.
+   */
+  private measureHost(node: LayoutNode, p: Proposal): Size {
+    const props = node.props as { sizing?: string; content?: string };
+    const bounded = (value: number | null): number | null => (value !== null && Number.isFinite(value) ? value : null);
+    const width = bounded(p.width);
+    const height = bounded(p.height);
+    const measure = this.measurer.measureHost?.bind(this.measurer);
+    if (!measure || typeof props.content !== 'string') {
+      return { width: width ?? SHAPE_DEFAULT, height: height ?? SHAPE_DEFAULT };
+    }
+    if (props.sizing === 'fill') {
+      if (width !== null && height !== null) return { width, height };
+      const natural = measure(props.content, width);
+      return { width: width ?? natural.width, height: height ?? natural.height };
+    }
+    const ideal = measure(props.content, null);
+    if (width === null || ideal.width <= width) return ideal;
+    return { width, height: measure(props.content, width).height };
+  }
+
   private finish(): LayoutResult {
     // Only what this run produced needs snapping; the rest was snapped when
     // it was produced.
@@ -1208,10 +1352,20 @@ export class LayoutPass {
         return { ...ctx, stackAxis: 'vertical', listRow: false };
       case 'hstack':
         return { ...ctx, stackAxis: 'horizontal', listRow: false };
+      case 'list':
+      case 'scrollview':
+      case 'sheet': {
+        // A bar above is the outermost scroll view's to run under; what a
+        // scroll view or a sheet holds is clear of it.
+        if (ctx.barAbove === undefined && ctx.stackAxis === null && !ctx.listRow) return ctx;
+        return { ...ctx, barAbove: undefined, stackAxis: null, listRow: false };
+      }
       case 'gesture':
       case 'swipeactions':
       case 'contextmenu':
       case 'listrow':
+      case 'draggable':
+      case 'dropdestination':
         // Phase 8 wrappers are transparent: a `navlink` under them is still
         // the list row (its chevron, its selected fill).
         return ctx.stackAxis === null ? ctx : { ...ctx, stackAxis: null };
@@ -1292,8 +1446,11 @@ export class LayoutPass {
         return { width: finite(p.width) ? p.width : 0, height: 1 };
       case 'vstack':
         return this.stackPlan(node, ctx, p, 'vertical').size;
-      case 'hstack':
+      case 'hstack': {
+        const label = ctx.labelColumn ? labelColumnOf(node) : null;
+        if (label) return this.labelColumnPlan(label, this.childContext(node, ctx), p).size;
         return this.stackPlan(node, ctx, p, 'horizontal').size;
+      }
       case 'zstack':
         return this.measureZStack(node, ctx, p);
       case 'styled':
@@ -1310,8 +1467,15 @@ export class LayoutPass {
           height: style === 'plain' ? TEXTFIELD_HEIGHT_PLAIN : TEXTFIELD_HEIGHT_ROUNDED,
         };
       }
-      case 'color':
       case 'shape':
+        if (node.props['shape'] === 'circle') {
+          // SwiftUI's `Circle` is the largest square in the proposal (so in a
+          // stack it gives the leftover width to its siblings).
+          // An open axis counts as SHAPE_DEFAULT, as for the other shapes.
+          return square(Math.min(p.width ?? SHAPE_DEFAULT, p.height ?? SHAPE_DEFAULT));
+        }
+        return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
+      case 'color':
       case 'canvas':
         return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
       case 'video':
@@ -1328,6 +1492,8 @@ export class LayoutPass {
       case 'tabview':
       case 'tab':
       case 'navsplit':
+      case 'inspector':
+      case 'inspectorpanel':
         return {
           width: p.width ?? this.env.screen.width,
           height: p.height ?? this.env.screen.height,
@@ -1336,6 +1502,8 @@ export class LayoutPass {
         return this.viewThatFitsPlan(node, ctx, p).size;
       case 'picker':
         return this.pickerPlan(node, ctx, p).size;
+      case 'host':
+        return this.measureHost(node, p);
       case 'geometry':
         // GeometryReader: the proposal, 10 on unconstrained axes.
         return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
@@ -1393,6 +1561,8 @@ export class LayoutPass {
       case 'gesture':
       case 'listrow':
       case 'tapgesture':
+      case 'draggable':
+      case 'dropdestination':
       default: {
         // `tapgesture` (its child's size), `toolbar` outside a navscreen,
         // `section` outside a list and unknown kinds: lay the children out as a vstack.
@@ -1415,7 +1585,7 @@ export class LayoutPass {
     const min = Math.max(1, ctx.minLines ?? 1);
     const max = Math.max(min, ctx.lineLimit ?? Infinity);
     const lines = Math.min(Math.max(wrapped.lines.length, min), max);
-    return { width, height: lines * ctx.font.lineHeight + 2 * inset.vertical };
+    return { width, height: textHeight(lines, ctx.font) + 2 * inset.vertical };
   }
 
   private textPlan(node: LayoutNode, ctx: Context, p: Proposal): TextPlan {
@@ -1425,7 +1595,7 @@ export class LayoutPass {
       const text = str(node.props['text']) ?? '';
       const wrapped = wrapText(text, ctx.font, p.width, ctx.lineLimit, this.measurer);
       return {
-        size: { width: wrapped.width, height: wrapped.lines.length * ctx.font.lineHeight },
+        size: { width: wrapped.width, height: textHeight(wrapped.lines.length, ctx.font) },
         layout: {
           font: ctx.font,
           lines: wrapped.lines,
@@ -1464,16 +1634,16 @@ export class LayoutPass {
     };
   }
 
-  /** An image in a text: a bitmap or remote image at its size, a symbol a square of the line height. */
+  /** An image in a text: a bitmap or remote image at its size, a symbol its font's symbol square. */
   private inlineImageSize(props: Record<string, unknown>, font: ResolvedFont): Size {
     if (typeof props['url'] === 'string' || typeof props['bitmap'] === 'object') {
       return { width: num(props['width']) ?? 0, height: num(props['height']) ?? 0 };
     }
     const name = str(props['name']);
-    if (name === null) return square(font.lineHeight);
+    if (name === null) return square(font.leading);
     const asset = this.env.assets?.images[name];
     if (!asset) return square(UNKNOWN_IMAGE_SIDE);
-    if (asset.kind === 'symbol') return square(font.lineHeight);
+    if (asset.kind === 'symbol') return square(font.leading);
     return { width: num(asset.width) ?? 0, height: num(asset.height) ?? 0 };
   }
 
@@ -1733,6 +1903,25 @@ export class LayoutPass {
    * even split gave Ice Cubes' quoted posts half their card). With a `null`
    * axis proposal every child is proposed `null` and the stack sizes to the sum.
    */
+  /** A list row's `Label` in iOS's icon column: the icon at its own size, the title in what is left past 40. */
+  private labelColumnPlan(
+    label: { icon: LayoutNode; title: LayoutNode },
+    cctx: Context,
+    p: Proposal,
+  ): { size: Size; icon: Size; title: Size; iconProposal: Proposal; titleProposal: Proposal } {
+    const iconProposal: Proposal = { width: null, height: p.height };
+    const icon = this.measure(label.icon, cctx, iconProposal);
+    const titleProposal: Proposal = { width: finite(p.width) ? Math.max(0, p.width - LIST_LABEL_TITLE_X) : p.width, height: p.height };
+    const title = this.measure(label.title, cctx, titleProposal);
+    return {
+      size: { width: LIST_LABEL_TITLE_X + title.width, height: Math.max(icon.height, title.height) },
+      icon,
+      title,
+      iconProposal,
+      titleProposal,
+    };
+  }
+
   private layoutStack(
     children: readonly LayoutNode[],
     cctx: Context,
@@ -1905,10 +2094,10 @@ export class LayoutPass {
       return { width: p.width ?? width, height: p.height ?? height };
     }
     const name = str(node.props['name']);
-    if (name === null) return square(ctx.font.lineHeight * ctx.imageScale);
+    if (name === null) return square(ctx.font.leading * ctx.imageScale);
     const asset = this.env.assets?.images[name];
     if (!asset) return square(UNKNOWN_IMAGE_SIDE);
-    if (asset.kind === 'symbol') return square(ctx.font.lineHeight * ctx.imageScale);
+    if (asset.kind === 'symbol') return square(ctx.font.leading * ctx.imageScale);
     const width = num(asset.width) ?? 0;
     const height = num(asset.height) ?? 0;
     if (node.props['resizable'] !== true) return { width, height };
@@ -2111,11 +2300,13 @@ export class LayoutPass {
       const layoutWidth = Number.isFinite(width) ? width : screen.width;
       // `insetGrouped` (default) insets the cards 16; `grouped` and `plain`
       // sections are full width. `plain` also drops the top/bottom gaps and
-      // the space between sections.
+      // 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';
-      // `.environment(\.defaultMinListRowHeight, _)`; 52 by default.
-      const minRowHeight = num(node.props['minRowHeight']) ?? LIST_ROW_MIN_HEIGHT;
-      const inset = listStyle === 'insetGrouped' ? LIST_INSET : 0;
+      const sidebarStyle = listStyle === 'sidebar';
+      // `.environment(\.defaultMinListRowHeight, _)`; 52 by default (44 in a sidebar).
+      const minRowHeight = num(node.props['minRowHeight']) ?? (sidebarStyle ? LIST_SIDEBAR_ROW_MIN_HEIGHT : LIST_ROW_MIN_HEIGHT);
+      const inset = listStyle === 'insetGrouped' || sidebarStyle ? LIST_INSET : 0;
       const plain = listStyle === 'plain';
       const listTop = plain ? 0 : LIST_TOP;
       const listBottom = plain ? 0 : LIST_BOTTOM;
@@ -2135,9 +2326,10 @@ export class LayoutPass {
         textStyleSize('footnote', this.env.dynamicTypeSize),
         400,
       );
-      const rowCtx: Context = { ...this.childContext(node, ctx), listRow: true };
-      // Phase 8: in edit mode every `listrow` gains a 44 leading control and
-      // its content shifts right by as much.
+      const rowCtx: Context = { ...this.childContext(node, ctx), listRow: true, labelColumn: true, sidebarList: str(node.props['style']) === 'sidebar' };
+      // Phase 8: in edit mode a selectable or deletable `listrow` gains a 44
+      // leading control (6 in from the card's edge) and its content shifts
+      // right by 40; a movable one a trailing grip, which narrows it by 40.
       const editing = node.props['editing'] === true;
 
       // Group consecutive plain rows into an implicit section. A section's
@@ -2173,12 +2365,16 @@ export class LayoutPass {
         const wrapped = wrapText(text, font, contentWidth, null, this.measurer);
         return {
           layout: { font, lines: wrapped.lines, alignment: 'leading', truncated: false },
-          size: { width: wrapped.width, height: wrapped.lines.length * font.lineHeight },
+          size: { width: wrapped.width, height: textHeight(wrapped.lines.length, font) },
         };
       };
       for (let g = 0; g < groupsSource.length; g++) {
         const source = groupsSource[g] as GroupSource;
-        if (g > 0) y += sectionGap;
+        const previous = groups[g - 1];
+        if (previous) {
+          const footed = previous.footer !== null || (previous.footerView !== null && previous.footerView.rect.height > 0);
+          y += plain ? sectionGap : footed ? LIST_SECTION_GAP_AFTER_FOOTER : sectionGap;
+        }
         const top = y;
         let header: ListGroupPlan['header'] = null;
         let footer: ListGroupPlan['footer'] = null;
@@ -2205,13 +2401,12 @@ export class LayoutPass {
             continue;
           }
           // A menu or inline picker already reports its row height (44 for
-          // a menu, 44 per option inline); other rows (a segmented picker
-          // too) get the 13px vertical padding. Phase 6
+          // a menu, 44 per option inline); a toggle, stepper or segmented
+          // picker has its own vertical padding, other rows 13. Phase 6
           // `listRowInsets` replaces all four insets; a `badge` reserves its
           // width (plus a gap) at the trailing edge.
           const hints = rowHintsOf(rowNode);
-          const unwrappedRow = unwrapStyled(rowNode);
-          const defaultVPad = unwrappedRow.kind === 'picker' && str(unwrappedRow.props['style']) !== 'segmented' ? 0 : LIST_ROW_VPAD;
+          const defaultVPad = listRowVPad(unwrapStyled(rowNode), sidebarStyle);
           const insets: EdgeInsets = hints.insets ?? {
             top: defaultVPad,
             leading: LIST_CELL_PADDING,
@@ -2220,10 +2415,16 @@ export class LayoutPass {
           };
           const badgeWidth = hints.badge !== null ? this.measurer.measureWidth(hints.badge, rowCtx.font) : 0;
           const badgeReserve = hints.badge !== null ? badgeWidth + BADGE_GAP : 0;
+          // Phase 8 edit mode: a selectable or deletable `listrow` gains a
+          // leading control and its content shifts right; a movable one a
+          // trailing grip, which narrows its content.
           const listRow = editing ? listRowOf(rowNode) : null;
-          const editShift = listRow ? LIST_EDIT_CONTROL_WIDTH : 0;
+          const hasControl = listRow !== null && (listRow.props['selectable'] === true || listRow.props['deletable'] === true);
+          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);
+          const rowContentWidth = Math.max(0, cardWidth - insets.leading - insets.trailing - badgeReserve - editShift - gripReserve);
           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);
@@ -2246,7 +2447,15 @@ export class LayoutPass {
                     layout: { font: rowCtx.font, lines: [hints.badge], alignment: 'trailing', truncated: false },
                   }
                 : null,
-            edit: listRow ? { listRow, control: { x: cardX, y, width: LIST_EDIT_CONTROL_WIDTH, height: rowHeight } } : null,
+            edit: listRow
+              ? {
+                  listRow,
+                  control: hasControl ? { x: cardX + LIST_EDIT_CONTROL_INSET, y, width: LIST_EDIT_CONTROL_WIDTH, height: rowHeight } : null,
+                  reorder: hasGrip
+                    ? { x: cardX + cardWidth - LIST_EDIT_CONTROL_INSET - LIST_EDIT_CONTROL_WIDTH, y, width: LIST_EDIT_CONTROL_WIDTH, height: rowHeight }
+                    : null,
+                }
+              : null,
             separatorHidden: hints.separatorHidden,
           });
           y += rowHeight;
@@ -2316,6 +2525,11 @@ export class LayoutPass {
       }
       this.hiddenBy.delete(node);
     }
+    const grown = this.scrollEdgeGrowth(node, ctx, p, x, y);
+    if (grown) {
+      p = grown.p;
+      y = grown.y;
+    }
     const size = this.measure(node, ctx, p);
     this.setFrame(node, x, y, size);
     const cctx = this.childContext(node, ctx);
@@ -2337,9 +2551,18 @@ export class LayoutPass {
       case 'shape':
       case 'canvas':
       case 'video':
+      case 'host':
         return;
       case 'vstack':
       case 'hstack': {
+        const label = node.kind === 'hstack' && ctx.labelColumn ? labelColumnOf(node) : null;
+        if (label) {
+          // iOS's list icon column: the icon centred at 12, the title at 40.
+          const plan = this.labelColumnPlan(label, cctx, p);
+          this.place(label.icon, cctx, plan.iconProposal, x + LIST_LABEL_ICON_CENTER - plan.icon.width / 2, y + (size.height - plan.icon.height) / 2);
+          this.place(label.title, cctx, plan.titleProposal, x + LIST_LABEL_TITLE_X, y + (size.height - plan.title.height) / 2);
+          return;
+        }
         const axis: Axis = node.kind === 'vstack' ? 'vertical' : 'horizontal';
         const plan = this.stackPlan(node, ctx, p, axis);
         const spacing = num(node.props['spacing']) ?? DEFAULT_SPACING;
@@ -2458,8 +2681,9 @@ export class LayoutPass {
           };
           // Phase 7: the selected row of a `navsplit` sidebar has no chevron
           // (its label still reserves the chevron's width so selecting a row
-          // never reflows it); elsewhere `selected` keeps the chevron.
-          if (!(node.props['selected'] === true && ctx.splitSidebar)) {
+          // never reflows it); elsewhere `selected` keeps the chevron. No row
+          // of a `sidebar`-style list has one (iPadOS).
+          if (!(node.props['selected'] === true && ctx.splitSidebar) && !ctx.sidebarList) {
             chrome['chevron'] = {
               x: x + size.width - LIST_CHEVRON_WIDTH,
               y,
@@ -2479,18 +2703,20 @@ export class LayoutPass {
         // centered on the other axes when smaller than the viewport.
         const dx = axes.horizontal ? 0 : safeOffset(size.width, plan.contentSize.width, 0.5);
         const dy = axes.vertical ? 0 : safeOffset(size.height, plan.contentSize.height, 0.5);
-        // Under a large title that scrolls with it, the content starts below it.
-        const titleRect = axes.vertical ? this.titleInsets.get(node) : undefined;
+        // Under its screen's bar (and the large title that scrolls with it),
+        // the content starts below them.
+        const inset = axes.vertical ? this.scrollInsets.get(node) : undefined;
         const content: Rect = {
           x: x + dx,
-          y: y + dy + (titleRect?.height ?? 0),
+          y: y + dy + (inset ? inset.bar + (inset.largeTitle?.height ?? 0) : 0),
           width: plan.contentSize.width,
           height: plan.contentSize.height,
         };
         const covered = this.coveredBottom(ctx, x, y, size);
         const scrollChrome: Record<string, Rect> = { content };
         if (covered) scrollChrome['bottomInset'] = covered;
-        if (titleRect) scrollChrome['largeTitle'] = titleRect;
+        if (inset) scrollChrome['topInset'] = { x, y, width: size.width, height: inset.bar };
+        if (inset?.largeTitle) scrollChrome['largeTitle'] = inset.largeTitle;
         this.setChrome(node, scrollChrome);
         if (plan.content) this.place(plan.content, cctx, plan.contentProposal, content.x, content.y);
         return;
@@ -2514,6 +2740,12 @@ export class LayoutPass {
       case 'navsplit':
         this.placeNavSplit(node, cctx, x, y, size);
         return;
+      case 'inspector':
+        this.placeInspector(node, cctx, x, y, size);
+        return;
+      case 'inspectorpanel':
+        this.placeInspectorPanel(node, cctx, x, y, size);
+        return;
       case 'viewthatfits': {
         // Phase 7: only the chosen candidate is placed (at the origin, the
         // element is its size); the others have no frame and are hidden.
@@ -2609,8 +2841,10 @@ export class LayoutPass {
       case 'gesture':
       case 'listrow':
       case 'tapgesture':
+      case 'draggable':
+      case 'dropdestination':
       default: {
-        // `tapgesture`, `gesture`, `listrow` (child at the same origin), `toolbar` outside a navscreen,
+        // `tapgesture`, `gesture`, `listrow`, `draggable`, `dropdestination` (child at the same origin), `toolbar` outside a navscreen,
         // `tab` outside a tabview, `section` outside a list and unknown kinds.
         const content = this.contentOf(node);
         if (content) this.place(content, cctx, p, x, y);
@@ -2619,26 +2853,71 @@ export class LayoutPass {
     }
   }
 
-  /** The part of a scrolling view's frame that a tab bar covers (chrome `bottomInset`). */
+  /**
+   * The part of a scrolling view's frame that a tab bar (or its screen's
+   * bottom toolbar or search field) covers (chrome `bottomInset`).
+   */
   private coveredBottom(ctx: Context, x: number, y: number, size: Size): Rect | null {
     if (ctx.bottomBar <= 0) return null;
     const bottom = y + size.height;
-    if (bottom < this.env.screen.height - EPSILON) return null;
+    if (bottom < (ctx.bottomEdge ?? this.env.screen.height) - EPSILON) return null;
     const height = Math.min(size.height, ctx.bottomBar);
     return { x, y: bottom - height, width: size.width, height };
   }
 
+  /**
+   * iOS 26: a vertical list or scroll view deeper in a screen's content
+   * whose top edge touches the screen's bar across the screen (`barAbove`)
+   * runs up under it, and one whose bottom edge touches a bar covering the
+   * bottom (`bottomBar`: a tab bar, a bottom toolbar or search field) runs
+   * down under that, as the screen's own scroll view does: the proposal and
+   * frame grow by the bar (the parent's layout is unchanged, as for
+   * `.ignoresSafeArea`) and the content is inset by it (chrome `topInset` /
+   * `bottomInset`), so it scrolls under the bar, where the scroll edge
+   * effect shows (styles.css). Null when nothing grows.
+   */
+  private scrollEdgeGrowth(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): { p: Proposal; y: number } | null {
+    if (node.kind !== 'list' && !(node.kind === 'scrollview' && this.scrollAxes(node).vertical)) return null;
+    const inset = this.scrollInsets.get(node);
+    const bar = ctx.barAbove;
+    // The screen's own scroll view is inset by `placeNavScreen` (no bar above
+    // here); a nested one that no longer touches the bar loses its inset.
+    if (inset?.nested) this.scrollInsets.delete(node);
+    if (!finite(p.height)) return null;
+    const size = this.measure(node, ctx, p);
+    let top = 0;
+    if (
+      bar &&
+      !(inset && !inset.nested) &&
+      Math.abs(y - bar.top) <= EPSILON &&
+      x <= bar.x + EPSILON &&
+      x + size.width >= bar.x + bar.width - EPSILON
+    ) {
+      top = bar.height;
+      this.scrollInsets.set(node, { bar: top, largeTitle: null, nested: true });
+    }
+    let bottom = 0;
+    if (ctx.bottomBar > 0) {
+      const edge = ctx.bottomEdge ?? this.env.screen.height;
+      if (Math.abs(y + size.height - (edge - ctx.bottomBar)) <= EPSILON) bottom = ctx.bottomBar;
+    }
+    if (top === 0 && bottom === 0) return null;
+    return { p: { width: p.width, height: size.height + top + bottom }, y: y - top };
+  }
+
   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 };
+    const rowCtx: Context = { ...this.childContext(node, ctx), listRow: true, labelColumn: true, sidebarList: str(node.props['style']) === 'sidebar' };
     const covered = this.coveredBottom(ctx, x, y, plan.size);
-    // Under a large title that scrolls with it, the rows start below it.
-    const titleRect = this.titleInsets.get(node);
+    // 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> = {};
     if (covered) listChrome['bottomInset'] = covered;
-    if (titleRect) listChrome['largeTitle'] = titleRect;
+    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 = titleRect?.height ?? 0;
+    const inset = scrollInset ? scrollInset.bar + (scrollInset.largeTitle?.height ?? 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 });
@@ -2678,8 +2957,11 @@ export class LayoutPass {
         // Phase 8: the edit control belongs to the `listrow`, which is the
         // row itself or sits under its wrappers (its own place() keeps chrome).
         if (row.edit) {
-          if (row.edit.listRow === row.node) chrome['editControl'] = offset(row.edit.control);
-          else this.setChrome(row.edit.listRow, { editControl: offset(row.edit.control) });
+          const controls: Record<string, Rect> = {};
+          if (row.edit.control) controls['editControl'] = offset(row.edit.control);
+          if (row.edit.reorder) controls['reorderControl'] = offset(row.edit.reorder);
+          if (row.edit.listRow === row.node) Object.assign(chrome, controls);
+          else this.setChrome(row.edit.listRow, controls);
         }
         const rowX = x + row.content.x;
         const rowY = y + row.content.y;
@@ -2732,7 +3014,7 @@ export class LayoutPass {
     const displayMode = str(node.props['displayMode']) ?? 'automatic';
     const depth = num(node.props['depth']) ?? 0;
     const large = displayMode === 'large' || (displayMode === 'automatic' && depth === 0);
-    const barHeight = statusBar + NAV_BAR_HEIGHT;
+    const barHeight = statusBar + NAV_BAR_HEIGHT + (!large && y <= 0 ? NAV_BAR_INLINE_BOTTOM : 0);
     const largeHeight = large ? LARGE_TITLE_HEIGHT : 0;
     const parts = this.navScreenParts(node);
     const reachesBottom = y + size.height >= screen.height - EPSILON;
@@ -2750,6 +3032,8 @@ export class LayoutPass {
     };
     const chrome: Record<string, Rect> = {
       bar: { x, y, width: size.width, height: barHeight },
+      // The 44 row the bar's items sit in, under the status bar.
+      barRow: { x, y: y + statusBar, width: size.width, height: NAV_BAR_HEIGHT },
       content,
     };
     if (large) chrome['largeTitle'] = { x, y: y + barHeight, width: size.width, height: LARGE_TITLE_HEIGHT };
@@ -2799,13 +3083,14 @@ export class LayoutPass {
     // Back button, iOS 26: the chevron alone in a glass circle (the previous
     // title no longer shows).
     const backLabel = '';
+    const leadingStart = x + NAV_ITEM_MARGIN + (cctx.barLeading ?? 0);
     if (depth > 0) {
-      chrome['back'] = { x: x + NAV_ITEM_MARGIN, y: rowY, width: NAV_GLASS_SIZE, height: NAV_GLASS_SIZE };
+      chrome['back'] = { x: leadingStart, y: rowY, width: NAV_GLASS_SIZE, height: NAV_GLASS_SIZE };
     }
 
     // Place the toolbar groups and remember how much of the row they occupy.
     const back = chrome['back'];
-    let leadingCursor = back ? back.x + back.width + NAV_GROUP_SPACING : x + NAV_ITEM_MARGIN;
+    let leadingCursor = back ? back.x + back.width + NAV_GROUP_SPACING : leadingStart;
     let trailingEdge = x + size.width - NAV_ITEM_MARGIN;
     const placeGroup = (group: Group, startX: number, top: number, rowHeight: number, spacing: number): void => {
       const itemCtx = this.childContext(group.toolbar, cctx);
@@ -2876,7 +3161,11 @@ export class LayoutPass {
     // A large title that scrolls away collapses into the inline title, which
     // the renderer shows once it has (`data-sb-collapsed`).
     if ((!large || titleScrolls) && !principal) {
-      const leftUsed = Math.max(back ? back.x + back.width - x : 0, leadingWidth > 0 ? leadingCursor - NAV_GROUP_SPACING - x : 0);
+      const 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,
+      );
       const rightUsed = trailingWidth > 0 ? x + size.width - (trailingEdge + NAV_GROUP_SPACING) : 0;
       const side = Math.max(leftUsed, rightUsed) + 8;
       const available = Math.max(0, size.width - 2 * side);
@@ -2905,23 +3194,46 @@ export class LayoutPass {
 
     const child = parts.content;
     if (!child) return;
+    // The room a bottom toolbar or search field takes; scroll views run under
+    // it (iOS 26), other content stops above it.
+    const bottomCover = Math.max(bottomBarHeight, searchBottom);
     // Under a tab bar the bar (which includes the bottom safe area) is what
     // non-scrolling content must clear; a bottom toolbar already excluded it.
     const bottomInset =
       bottomBarHeight === 0 && y + size.height >= screen.height ? Math.max(safeArea.bottom, cctx.bottomBar) : 0;
     // Phase 8: `.ignoresSafeArea` content grows up under the bar (and the
     // large title / search field), which is transparent over it.
-    const contentCtx: Context = { ...cctx, safeTop: content.y, barInset: 0 };
-    if (scroller && titleScrolls) {
-      // The scroll view starts under the bar; its content starts under the
-      // large title, which moves with it.
-      const top = content.y - largeHeight;
-      this.titleInsets.set(scroller, chrome['largeTitle'] as Rect);
-      this.place(child, contentCtx, { width: content.width, height: content.height + largeHeight }, content.x, top);
+    const contentCtx: Context = {
+      ...cctx,
+      safeTop: content.y,
+      barInset: 0,
+      barLeading: 0,
+      barAbove: undefined,
+      ...(bottomCover > 0 ? { bottomBar: bottomCover, bottomEdge: y + size.height } : {}),
+    };
+    const scrollsUnderBar =
+      scroller !== null && (scroller.kind === 'list' || (scroller.kind === 'scrollview' && this.scrollAxes(scroller).vertical));
+    if (scroller && scrollsUnderBar) {
+      // iOS 26: the scroll view starts at the top of the screen and its
+      // content scrolls under the bar (and the large title moves with it);
+      // the content starts below them. It runs to the bottom of the screen,
+      // under a bottom toolbar or search field too.
+      const top = content.y - y;
+      this.scrollInsets.set(scroller, {
+        bar: barHeight,
+        largeTitle: titleScrolls ? (chrome['largeTitle'] as Rect) : null,
+      });
+      this.place(child, contentCtx, { width: content.width, height: content.height + top + bottomCover }, content.x, y);
       return;
     }
-    if (scroller) this.titleInsets.delete(scroller);
-    if (scroller && (scroller.kind === 'list' || scroller.kind === 'scrollview')) {
+    if (scroller) this.scrollInsets.delete(scroller);
+    // A scroll view deeper in the content that touches the bar runs under it
+    // (`scrollEdgeGrowth`); not under a large title, which stays put then.
+    // One that reaches the bottom of the content runs down under all the
+    // content clears there.
+    if (!large) contentCtx.barAbove = { top: content.y, height: content.y - y, x, width: size.width };
+    if (bottomCover > 0) contentCtx.bottomBar = bottomCover + bottomInset;
+    if (scroller && scroller.kind === 'scrollview') {
       this.place(child, contentCtx, { width: content.width, height: content.height }, content.x, content.y);
       return;
     }
@@ -2968,7 +3280,7 @@ export class LayoutPass {
     }
     this.setChrome(node, chrome);
     const selected = readSelected(node, n);
-    const tabCtx: Context = { ...cctx, bottomBar: barHeight };
+    const tabCtx: Context = { ...cctx, bottomBar: barHeight, bottomEdge: undefined, barAbove: undefined };
     tabs.forEach((tab, i) => {
       this.setFrame(tab, x, y, size);
       if (i !== selected) {
@@ -3026,6 +3338,12 @@ export class LayoutPass {
    * to the detail column (when the split view touches those screen edges):
    * the column rects (`chrome.sidebar` / `chrome.detail`) include them, the
    * navstacks start / end at them.
+   *
+   * iPadOS: a sidebar toggle (a 44 glass circle, chrome `toggle`) sits at the
+   * leading edge of the bar row, in the sidebar's bar or, with the sidebar
+   * hidden (`sidebarVisible: false`), in the detail's; that column's screens
+   * start their back button and leading items after it. A hidden sidebar
+   * slides off the leading edge and the detail column takes the width.
    */
   private placeNavSplit(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
     const { screen, safeArea } = this.env;
@@ -3033,27 +3351,81 @@ export class LayoutPass {
     const trailing = x + size.width >= screen.width - EPSILON ? safeArea.trailing : 0;
     const usable = Math.max(0, size.width - leading - trailing);
     const sidebarWidth = Math.min(NAVSPLIT_SIDEBAR_WIDTH, usable * NAVSPLIT_SIDEBAR_MAX_FRACTION);
-    const separatorX = x + leading + sidebarWidth;
-    const detailX = separatorX + NAVSPLIT_SEPARATOR_WIDTH;
+    const visible = node.props['sidebarVisible'] !== false;
+    // Hidden, the sidebar and its separator sit just off the leading edge.
+    const sidebarX = visible ? x + leading : x - sidebarWidth - NAVSPLIT_SEPARATOR_WIDTH;
+    const separatorX = sidebarX + sidebarWidth;
+    const detailX = visible ? separatorX + NAVSPLIT_SEPARATOR_WIDTH : x + leading;
     const detailWidth = Math.max(0, x + size.width - trailing - detailX);
+    const statusBar = y <= 0 ? safeArea.top : 0;
     const chrome: Record<string, Rect> = {
-      sidebar: { x, y, width: leading + sidebarWidth, height: size.height },
+      sidebar: { x: visible ? x : sidebarX, y, width: visible ? leading + sidebarWidth : sidebarWidth, height: size.height },
       separator: { x: separatorX, y, width: NAVSPLIT_SEPARATOR_WIDTH, height: size.height },
-      detail: { x: detailX, y, width: Math.max(0, x + size.width - detailX), height: size.height },
+      detail: { x: visible ? detailX : x, y, width: Math.max(0, x + size.width - (visible ? detailX : x)), height: size.height },
+      toggle: { x: x + leading + NAV_ITEM_MARGIN, y: y + statusBar, width: NAV_GLASS_SIZE, height: NAV_GLASS_SIZE },
     };
     this.setChrome(node, chrome);
+    const toggleRoom = NAV_GLASS_SIZE + 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 }, proposal, x + leading, y);
+      this.place(sidebar, { ...cctx, splitSidebar: true, barLeading: visible ? toggleRoom : 0 }, proposal, sidebarX, y);
     }
     if (detail) {
       const proposal: Proposal = { width: detailWidth, height: size.height };
-      this.place(detail, { ...cctx, splitSidebar: false }, proposal, detailX, y);
+      this.place(detail, { ...cctx, splitSidebar: false, barLeading: visible ? 0 : toggleRoom }, proposal, detailX, y);
     }
     for (const extra of rest) this.hide(extra, node);
   }
 
+  /**
+   * `.inspector` (regular width): the children are the content, then the
+   * `inspectorpanel`. The panel is a trailing column, 320 wide (its
+   * content's `inspectorColumnWidth`, at most half the width) plus the
+   * trailing safe-area inset when it touches that edge, with a 1px gap
+   * before it (the panel draws the hairline there); the content is proposed the rest (each content child is
+   * centered in it, as a root view is). With `presented: false` the panel
+   * sits just off the trailing edge (so it slides) and the content takes the
+   * whole width.
+   */
+  private placeInspector(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
+    const { screen, safeArea } = this.env;
+    const last = node.children[node.children.length - 1];
+    const panel = last && last.kind === 'inspectorpanel' ? last : null;
+    const main = panel ? node.children.slice(0, -1) : node.children;
+    const presented = node.props['presented'] === true;
+    const trailing = x + size.width >= screen.width - EPSILON ? safeArea.trailing : 0;
+    const requested = panel?.children[0] ? num(cellStyle(panel.children[0], 'inspectorColumnWidth')) : null;
+    const columnWidth = Math.min(requested ?? INSPECTOR_WIDTH, size.width * INSPECTOR_MAX_FRACTION);
+    const panelWidth = columnWidth + trailing;
+    const panelX = presented ? x + size.width - panelWidth : x + size.width + NAVSPLIT_SEPARATOR_WIDTH;
+    const mainWidth = presented ? Math.max(0, panelX - NAVSPLIT_SEPARATOR_WIDTH - x) : size.width;
+    const area: Size = { width: mainWidth, height: size.height };
+    for (const child of main) {
+      const childSize = this.measure(child, cctx, area);
+      const { dx, dy } = alignIn(area, childSize, 'center');
+      this.place(child, cctx, area, x + dx, y + dy);
+    }
+    if (panel) this.place(panel, cctx, { width: panelWidth, height: size.height }, panelX, y);
+  }
+
+  /**
+   * The inspector column: its content below the status bar (at the top of
+   * the screen) and clear of the trailing inset, top-aligned and centered
+   * horizontally (a list or form fills it).
+   */
+  private placeInspectorPanel(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
+    const { screen, safeArea } = this.env;
+    const top = y <= 0 ? safeArea.top : 0;
+    const trailing = x + size.width >= screen.width - EPSILON ? safeArea.trailing : 0;
+    const area: Size = { width: Math.max(0, size.width - trailing), height: Math.max(0, size.height - top) };
+    for (const child of node.children) {
+      const childSize = this.measure(child, cctx, area);
+      const { dx } = alignIn(area, childSize, 'center');
+      this.place(child, cctx, area, x + dx, y + top);
+    }
+  }
+
   /**
    * Phase 7 `ViewThatFits`: the first child whose ideal size fits the
    * proposal on the restricted axes (a nil or infinite proposal axis always
@@ -3305,7 +3677,7 @@ export class LayoutPass {
       const wrapped = wrapText(text, font, width, null, this.measurer);
       return {
         layout: { font, lines: wrapped.lines, alignment, truncated: wrapped.truncated ?? false },
-        height: wrapped.lines.length * font.lineHeight,
+        height: textHeight(wrapped.lines.length, font),
       };
     };
     const centered = (text: string, font: ResolvedFont, width: number) => block(text, font, width, 'center');
@@ -3613,8 +3985,12 @@ export class LayoutPass {
    * whose non-spanning cells are all flexible (or that has none) is flexible;
    * the others take the largest ideal width of their non-spanning cells. The
    * flexible columns share what is left of the proposal width equally (their
-   * ideal width with a nil proposal). Row heights come from measuring every
-   * cell at its cell width; a non-`gridrow` child is one full-span cell.
+   * ideal width with a nil proposal). A non-`gridrow` child is one full-span
+   * cell; one wider than the columns (a `Divider` takes the whole proposal)
+   * widens the grid, every column by the same amount (unless it has
+   * `gridCellUnsizedAxes(.horizontal)`). Row heights come from
+   * measuring every cell at its cell width. A cell's `gridColumnAlignment`
+   * aligns its whole column.
    */
   private gridPlan(node: LayoutNode, ctx: Context, p: Proposal): GridPlan {
     return this.plan(node, p, () => {
@@ -3677,6 +4053,30 @@ export class LayoutPass {
           if (flexible[j]) columns[j] = flexibleCount > 0 ? remaining / flexibleCount : 0;
         }
       }
+      // Full-span children wider than the columns widen every column alike.
+      const fullProposal: Proposal = { width: finite(p.width) ? p.width : null, height: null };
+      let fullWidth = 0;
+      for (const source of sources) {
+        if (!source.full) continue;
+        const cctx = this.gridCellContext(node, null, ctx);
+        for (const cell of source.cells) {
+          if (cellStyle(cell.node, 'gridCellUnsizedAxes') === true) continue;
+          fullWidth = Math.max(fullWidth, this.measure(cell.node, cctx, fullProposal).width);
+        }
+      }
+      const columnsWidth = columns.reduce((sum, w) => sum + w, 0) + hSpacing * (columnCount - 1);
+      if (fullWidth > columnsWidth + EPSILON) {
+        const extra = (fullWidth - columnsWidth) / columnCount;
+        for (let j = 0; j < columnCount; j++) columns[j] = (columns[j] as number) + extra;
+      }
+      const columnAnchors = new Array<number | null>(columnCount).fill(null);
+      for (const source of sources) {
+        if (source.full) continue;
+        for (const cell of source.cells) {
+          const anchor = cell.span === 1 ? gridColumnAnchorOf(cell.node) : null;
+          if (anchor !== null && columnAnchors[cell.column] === null) columnAnchors[cell.column] = anchor;
+        }
+      }
       const columnX = new Array<number>(columnCount).fill(0);
       for (let j = 1; j < columnCount; j++) {
         columnX[j] = (columnX[j - 1] as number) + (columns[j - 1] as number) + hSpacing;
@@ -3713,7 +4113,7 @@ export class LayoutPass {
         y += height + vSpacing;
       }
       const gridHeight = rows.length > 0 ? y - vSpacing : 0;
-      return { size: { width: gridWidth, height: gridHeight }, columns, columnX, rows };
+      return { size: { width: gridWidth, height: gridHeight }, columns, columnX, columnAnchors, rows };
     });
   }
 
@@ -3727,7 +4127,8 @@ export class LayoutPass {
       const rowY = rowAnchor(row.alignment, gridAlignment);
       for (const cell of row.cells) {
         const box: Size = { width: cell.width, height: row.height };
-        const [ax, ay] = gridAnchorOf(cell.node) ?? [gridX, rowY];
+        const columnX = cell.full ? null : (plan.columnAnchors[cell.column] ?? null);
+        const [ax, ay] = gridAnchorOf(cell.node) ?? [columnX ?? gridX, rowY];
         const dx = safeOffset(box.width, cell.size.width, ax);
         const dy = safeOffset(box.height, cell.size.height, ay);
         const cellX = cell.full ? 0 : (plan.columnX[cell.column] ?? 0);