@swiftbrowser/web 0.3.1 → 0.5.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,30 +175,38 @@ 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 has 14 (60 tall).
+// both come out 52 tall), a segmented picker 14.5 (61).
 const LIST_ROW_CONTROL_VPAD = 10;
-const LIST_ROW_SEGMENTED_VPAD = 14;
+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;
-// Below a section's footer the gap to the next section is 12 shorter.
-const LIST_SECTION_GAP_AFTER_FOOTER = 23;
+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
-// and 22 above the bottom edge (8 when the tab view ends above the screen
-// bottom), its items in equal slots inside a 4 inset.
+// iOS 26: the tab bar is a 62-tall glass capsule floating 22 above the bottom
+// edge (8 when the tab view ends above the screen bottom), its items in equal
+// slots inside a 4 inset. It is as wide as its tabs (268/3 each, measured in
+// the 26.2 simulator: two tabs make a 186.67 capsule), centered, and at most
+// the width less 21 either side (four tabs fill that on an iPhone).
 const TAB_BAR_HEIGHT = 62;
+const TAB_BAR_ITEM_WIDTH = 268 / 3;
 const TAB_BAR_MARGIN_H = 21;
 const TAB_BAR_MARGIN_BOTTOM = 22;
 const TAB_BAR_MARGIN_BOTTOM_INSET = 8;
@@ -209,7 +246,18 @@ const NAV_ITEM_MARGIN = 16;
 const NAV_GLASS_SIZE = 44;
 const NAV_GLASS_PAD_H = 12;
 const NAV_GROUP_SPACING = 8;
-const BOTTOM_BAR_HEIGHT = 49;
+// iOS 26 (measured in the 26.2 simulator, Examples/Fidelity `bottombar*`): a
+// bottom toolbar's items float on Liquid Glass in a 48 row 28 above the
+// screen bottom (as the search field does) and 28 in from the sides.
+// Consecutive items share a capsule: an icon takes a 50 slot, text its width
+// and 18 either side, 6 between slots; a lone icon is a 48 circle.
+const BOTTOM_GLASS_HEIGHT = 48;
+const BOTTOM_GLASS_MARGIN_H = 28;
+const BOTTOM_ICON_SLOT = 50;
+const BOTTOM_TEXT_PAD_H = 18;
+const BOTTOM_ITEM_GAP = 6;
+/** A fixed `ToolbarSpacer` between two bottom groups. */
+const BOTTOM_FIXED_SPACER = 8;
 const SEARCH_FIELD_HEIGHT = 36;
 const SEARCH_FIELD_MARGIN_H = 16;
 // iOS 26: a navigation stack's search field is a 48-tall glass capsule
@@ -225,15 +273,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;
@@ -467,7 +519,7 @@ function cellStyle(node: LayoutNode, key: string): unknown {
 }
 
 /** The default vertical padding above and below a list row's content. */
-function listRowVPad(row: LayoutNode): number {
+function listRowVPad(row: LayoutNode, sidebar: boolean): number {
   switch (row.kind) {
     case 'picker':
       return str(row.props['style']) === 'segmented' ? LIST_ROW_SEGMENTED_VPAD : 0;
@@ -475,7 +527,7 @@ function listRowVPad(row: LayoutNode): number {
     case 'stepper':
       return LIST_ROW_CONTROL_VPAD;
     default:
-      return LIST_ROW_VPAD;
+      return sidebar ? LIST_SIDEBAR_ROW_VPAD : LIST_ROW_VPAD;
   }
 }
 
@@ -530,7 +582,7 @@ interface GridItemSpec {
   alignment: string | null;
 }
 
-/** `columns` of a `lazyvgrid` (untrusted JSON); an empty list is one flexible column. */
+/** `columns` of a `lazyvgrid` or `rows` of a `lazyhgrid` (untrusted JSON); an empty list is one flexible track. */
 function readGridItems(value: unknown): GridItemSpec[] {
   const items: GridItemSpec[] = [];
   if (Array.isArray(value)) {
@@ -609,7 +661,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
@@ -625,8 +677,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 {
@@ -634,7 +710,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]}` };
 }
 
 // ---------------------------------------------------------------------------
@@ -847,8 +923,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;
 }
@@ -1006,11 +1086,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>();
@@ -1055,10 +1137,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') {
@@ -1073,6 +1162,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');
@@ -1082,6 +1179,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.
@@ -1243,10 +1366,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 };
@@ -1327,8 +1460,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':
@@ -1370,6 +1506,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,
@@ -1378,6 +1516,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 };
@@ -1400,6 +1540,7 @@ export class LayoutPass {
       case 'grid':
         return this.gridPlan(node, ctx, p).size;
       case 'lazyvgrid':
+      case 'lazyhgrid':
         return this.lazyGridPlan(node, ctx, p).size;
       case 'gauge':
         return this.gaugePlan(node, ctx, p).size;
@@ -1435,6 +1576,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.
@@ -1457,7 +1600,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 {
@@ -1467,7 +1610,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,
@@ -1506,16 +1649,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 };
   }
 
@@ -1775,6 +1918,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,
@@ -1947,10 +2109,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 };
@@ -2153,11 +2315,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;
@@ -2177,9 +2341,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
@@ -2215,7 +2380,7 @@ 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++) {
@@ -2256,7 +2421,7 @@ 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));
+          const defaultVPad = listRowVPad(unwrapStyled(rowNode), sidebarStyle);
           const insets: EdgeInsets = hints.insets ?? {
             top: defaultVPad,
             leading: LIST_CELL_PADDING,
@@ -2265,10 +2430,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);
@@ -2291,7 +2462,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;
@@ -2361,6 +2540,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);
@@ -2382,9 +2566,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;
@@ -2503,8 +2696,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,
@@ -2524,18 +2718,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;
@@ -2559,6 +2755,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.
@@ -2591,6 +2793,7 @@ export class LayoutPass {
         this.placeGrid(node, ctx, p, x, y);
         return;
       case 'lazyvgrid':
+      case 'lazyhgrid':
         this.placeLazyGrid(node, ctx, p, x, y);
         return;
       case 'gauge':
@@ -2654,8 +2857,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);
@@ -2664,26 +2869,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 });
@@ -2723,8 +2973,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;
@@ -2763,13 +3016,14 @@ export class LayoutPass {
   /**
    * The navigation bar is the status bar plus a 44 row (plus 62 for a large
    * title); a Phase 6 `searchfield` is a capsule floating above the bottom
-   * (iOS 26); a `bottom` toolbar is a 49 bar plus the bottom safe area; the
-   * content is proposed the rest. Toolbar
-   * items are measured at their ideal size and laid out in iOS 26 glass
-   * capsules (44-tall slots, groups 8 apart) in the 44 row (`leading` after the back button, `trailing` 16 from the
-   * trailing edge, `principal` centered in place of the title) or spread
-   * evenly across the bottom bar. The inline title (`chrome.title`) is
-   * centered and truncated to the room the bar items leave.
+   * (iOS 26); `bottom` toolbars float their items on glass in a 48 row 28
+   * above the bottom (`placeBottomToolbars`); the content is proposed the
+   * rest. Toolbar items are measured at their ideal size and laid out in iOS
+   * 26 glass capsules (44-tall slots, groups 8 apart) in the 44 row
+   * (`leading` after the back button, `trailing` 16 from the trailing edge,
+   * `principal` centered in place of the title). A `ToolbarSpacer` (an empty
+   * toolbar with `spacer`) only separates groups there. The inline title
+   * (`chrome.title`) is centered and truncated to the room the bar items leave.
    */
   private placeNavScreen(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
     const { safeArea, screen, dynamicTypeSize } = this.env;
@@ -2777,14 +3031,16 @@ 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;
+    const isSpacer = (t: LayoutNode): boolean => str(t.props['spacer']) !== null;
     const bottomToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'bottom');
-    const bottomBarHeight =
-      bottomToolbars.length > 0 ? Math.min(size.height, BOTTOM_BAR_HEIGHT + (reachesBottom ? safeArea.bottom : 0)) : 0;
     const searchMargin = reachesBottom ? SEARCH_BOTTOM_MARGIN : SEARCH_BOTTOM_MARGIN_INSET;
+    const bottomBarHeight = bottomToolbars.some((t) => !isSpacer(t))
+      ? Math.min(size.height, BOTTOM_GLASS_HEIGHT + searchMargin)
+      : 0;
     const searchBottom = parts.search ? SEARCH_BOTTOM_HEIGHT + searchMargin : 0;
     const contentTop = barHeight + largeHeight;
     const content: Rect = {
@@ -2795,6 +3051,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 };
@@ -2824,7 +3082,11 @@ export class LayoutPass {
       slots: number[] | null;
       total: number;
     }
-    const groups: Group[] = parts.toolbars.map((toolbar) => {
+    // The navigation bar's groups; spacers there only separate them (the
+    // groups are 8 apart anyway) and draw nothing.
+    for (const spacer of parts.toolbars.filter(isSpacer)) this.hide(spacer, node);
+    const barToolbars = parts.toolbars.filter((t) => str(t.props['placement']) !== 'bottom' && !isSpacer(t));
+    const groups: Group[] = barToolbars.map((toolbar) => {
       const itemCtx = this.childContext(toolbar, cctx);
       const sizes = toolbar.children.map((item) => this.measure(item, itemCtx, { width: null, height: null }));
       const placement = str(toolbar.props['placement']) ?? 'trailing';
@@ -2844,13 +3106,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);
@@ -2878,19 +3141,6 @@ export class LayoutPass {
           placeGroup(group, startX, rowY, NAV_BAR_HEIGHT, NAV_ITEM_SPACING);
           break;
         }
-        case 'bottom': {
-          const bar = chrome['bottomBar'] as Rect;
-          this.setFrame(group.toolbar, bar.x, bar.y, bar);
-          const n = group.sizes.length;
-          const inner = Math.max(0, size.width - 2 * NAV_ITEM_MARGIN);
-          const itemsWidth = group.total - Math.max(0, n - 1) * NAV_ITEM_SPACING;
-          if (n === 1) placeGroup(group, x + (size.width - itemsWidth) / 2, bar.y, BOTTOM_BAR_HEIGHT, 0);
-          else if (n > 1) {
-            const gap = Math.max(NAV_ITEM_SPACING, (inner - itemsWidth) / (n - 1));
-            placeGroup(group, x + NAV_ITEM_MARGIN, bar.y, BOTTOM_BAR_HEIGHT, gap);
-          }
-          break;
-        }
         default: {
           const startX = trailingEdge - group.total;
           this.setFrame(group.toolbar, startX, rowY, { width: group.total, height: NAV_BAR_HEIGHT });
@@ -2900,6 +3150,9 @@ export class LayoutPass {
         }
       }
     }
+    if (bottomBarHeight > 0) {
+      this.placeBottomToolbars(bottomToolbars, cctx, chrome, x, y + size.height - bottomBarHeight, size.width);
+    }
     if (parts.search) {
       // The field is the whole capsule (its own measure is a 36pt field).
       const field = chrome['searchField'] as Rect;
@@ -2921,7 +3174,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);
@@ -2950,23 +3207,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;
     }
@@ -2977,9 +3257,101 @@ export class LayoutPass {
     this.place(child, contentCtx, proposal, content.x + dx, content.y + dy);
   }
 
+  /**
+   * iOS 26's bottom toolbar: the items of the `bottom` toolbars, in order,
+   * float on Liquid Glass in a 48 row at the top of the bottom bar's band
+   * (`top`), 28 in from the sides. Consecutive items share a capsule; a
+   * `ToolbarSpacer` (an empty toolbar with `spacer`) ends one. Flexible
+   * spacers share the room the groups leave (with none the row is centered)
+   * and fixed ones are 8 wide. An icon takes a 50 slot (a lone one is a 48
+   * circle), text its width and 18 either side, 6 between slots; each item
+   * is centered in its slot. The capsules are the screen's chrome
+   * `bottomGlass0` … (drawn under the items); each toolbar's frame spans its
+   * items.
+   */
+  private placeBottomToolbars(
+    toolbars: LayoutNode[],
+    cctx: Context,
+    chrome: Record<string, Rect>,
+    x: number,
+    top: number,
+    width: number,
+  ): void {
+    interface Item {
+      node: LayoutNode;
+      toolbar: LayoutNode;
+      size: Size;
+      slot: number;
+    }
+    type Token = { kind: 'group'; items: Item[]; width: number } | { kind: 'flexible' } | { kind: 'fixed' };
+    const tokens: Token[] = [];
+    let open: Item[] = [];
+    const close = (): void => {
+      if (open.length === 0) return;
+      const icon = (item: Item): boolean => item.size.width < NAV_GLASS_SIZE;
+      const lone = open.length === 1 && icon(open[0] as Item);
+      if (lone) (open[0] as Item).slot = BOTTOM_GLASS_HEIGHT;
+      const slots = open.reduce((sum, item) => sum + item.slot, 0);
+      tokens.push({ kind: 'group', items: open, width: slots + (open.length - 1) * BOTTOM_ITEM_GAP });
+      open = [];
+    };
+    for (const toolbar of toolbars) {
+      const spacer = str(toolbar.props['spacer']);
+      if (spacer !== null) {
+        close();
+        tokens.push({ kind: spacer === 'fixed' ? 'fixed' : 'flexible' });
+        continue;
+      }
+      const itemCtx = this.childContext(toolbar, cctx);
+      for (const node of toolbar.children) {
+        const size = this.measure(node, itemCtx, { width: null, height: null });
+        const slot = size.width < NAV_GLASS_SIZE ? BOTTOM_ICON_SLOT : size.width + 2 * BOTTOM_TEXT_PAD_H;
+        open.push({ node, toolbar, size, slot });
+      }
+    }
+    close();
+    const inner = Math.max(0, width - 2 * BOTTOM_GLASS_MARGIN_H);
+    let used = 0;
+    let flexible = 0;
+    for (const token of tokens) {
+      if (token.kind === 'group') used += token.width;
+      else if (token.kind === 'fixed') used += BOTTOM_FIXED_SPACER;
+      else flexible += 1;
+    }
+    const share = flexible > 0 ? Math.max(0, inner - used) / flexible : 0;
+    let cursor = flexible > 0 ? x + BOTTOM_GLASS_MARGIN_H : x + (width - used) / 2;
+    const spans = new Map<LayoutNode, { start: number; end: number }>();
+    let glass = 0;
+    for (const token of tokens) {
+      if (token.kind === 'flexible') {
+        cursor += share;
+        continue;
+      }
+      if (token.kind === 'fixed') {
+        cursor += BOTTOM_FIXED_SPACER;
+        continue;
+      }
+      chrome[`bottomGlass${glass}`] = { x: cursor, y: top, width: token.width, height: BOTTOM_GLASS_HEIGHT };
+      glass += 1;
+      for (const item of token.items) {
+        const itemCtx = this.childContext(item.toolbar, cctx);
+        this.place(item.node, itemCtx, { width: null, height: null }, cursor + (item.slot - item.size.width) / 2, top + (BOTTOM_GLASS_HEIGHT - item.size.height) / 2);
+        const span = spans.get(item.toolbar);
+        spans.set(item.toolbar, { start: span ? span.start : cursor, end: cursor + item.slot });
+        cursor += item.slot + BOTTOM_ITEM_GAP;
+      }
+      cursor -= BOTTOM_ITEM_GAP;
+    }
+    for (const toolbar of toolbars) {
+      const span = spans.get(toolbar);
+      if (span) this.setFrame(toolbar, span.start, top, { width: span.end - span.start, height: BOTTOM_GLASS_HEIGHT });
+    }
+  }
+
   /**
    * The tab bar (iOS 26) is a glass capsule floating over the bottom of the
-   * content (TAB_BAR_* above), with one equal-width item per tab; what it
+   * content (TAB_BAR_* above), as wide as its equal-width items (one per tab)
+   * up to the width less the margins, centered; what it
    * covers (the capsule and the gap under it) is the content's bottom inset.
    * Every `tab` gets the tab view's frame; only the selected one lays its
    * content out, the others are reported in `hidden`.
@@ -2989,18 +3361,19 @@ export class LayoutPass {
     const marginBottom = y + size.height >= screen.height - EPSILON ? TAB_BAR_MARGIN_BOTTOM : TAB_BAR_MARGIN_BOTTOM_INSET;
     const barHeight = Math.min(size.height, TAB_BAR_HEIGHT + marginBottom);
     const capsuleHeight = Math.min(TAB_BAR_HEIGHT, barHeight);
+    const tabs = node.children;
+    const n = tabs.length;
+    const width = Math.min(Math.max(0, size.width - 2 * TAB_BAR_MARGIN_H), n * TAB_BAR_ITEM_WIDTH + 2 * TAB_BAR_ITEM_INSET);
     const bar: Rect = {
-      x: x + TAB_BAR_MARGIN_H,
+      x: x + (size.width - width) / 2,
       y: y + size.height - barHeight,
-      width: Math.max(0, size.width - 2 * TAB_BAR_MARGIN_H),
+      width,
       height: capsuleHeight,
     };
     const chrome: Record<string, Rect> = {
       bar,
       content: { x, y, width: size.width, height: size.height - barHeight },
     };
-    const tabs = node.children;
-    const n = tabs.length;
     const inner = Math.max(0, bar.width - 2 * TAB_BAR_ITEM_INSET);
     for (let i = 0; i < n; i++) {
       const itemWidth = inner / n;
@@ -3013,7 +3386,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) {
@@ -3071,6 +3444,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;
@@ -3078,27 +3457,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
@@ -3350,7 +3783,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');
@@ -3823,22 +4256,33 @@ export class LayoutPass {
    * clamped. With no width the flexible columns take the cells' largest ideal
    * width and an adaptive item is one column. Cells fill rows left to right.
    */
+  /**
+   * `lazyvgrid` and `lazyhgrid`. Written for the vertical grid: its columns
+   * share the proposed width and its cells fill them row by row. A horizontal
+   * grid is the same along the other axis (its rows share the proposed
+   * height and the cells fill them column by column), so the plan's
+   * `columns` are the tracks across the grid (`x`, `width`: cross axis) and
+   * its `rows` the lines along it (`y`, `height`: main axis).
+   */
   private lazyGridPlan(node: LayoutNode, ctx: Context, p: Proposal): LazyGridPlan {
     return this.plan(node, p, () => {
-      const items = readGridItems(node.props['columns']);
-      const rowSpacing = num(node.props['spacing']) ?? DEFAULT_SPACING;
+      const horizontal = node.kind === 'lazyhgrid';
+      const crossOf = (size: { width: number | null; height: number | null }): number | null => (horizontal ? size.height : size.width);
+      const items = readGridItems(node.props[horizontal ? 'rows' : 'columns']);
+      const lineSpacing = num(node.props['spacing']) ?? DEFAULT_SPACING;
       const cctx = this.childContext(node, ctx);
       const cells = node.children;
+      const cross = crossOf(p);
       let idealCell: number | null = null;
       const ideal = (): number => {
         if (idealCell === null) {
           idealCell = 0;
-          for (const cell of cells) idealCell = Math.max(idealCell, this.measure(cell, cctx, NIL_PROPOSAL).width);
+          for (const cell of cells) idealCell = Math.max(idealCell, crossOf(this.measure(cell, cctx, NIL_PROPOSAL)) ?? 0);
         }
         return idealCell;
       };
       const widths = items.map((item): number[] => (item.kind === 'fixed' ? [item.value] : []));
-      if (!finite(p.width)) {
+      if (!finite(cross)) {
         items.forEach((item, i) => {
           if (item.kind !== 'fixed') widths[i] = [clamp(ideal(), item.minimum, item.maximum)];
         });
@@ -3848,7 +4292,7 @@ export class LayoutPass {
         let fixed = 0;
         for (const item of items) if (item.kind === 'fixed') fixed += item.value;
         const sharing = items.filter((item) => item.kind !== 'fixed').length;
-        const remaining = Math.max(0, p.width - fixed - gaps);
+        const remaining = Math.max(0, cross - fixed - gaps);
         const share = sharing > 0 ? remaining / sharing : 0;
         let flexibleTotal = 0;
         let adaptiveCount = 0;
@@ -3882,9 +4326,9 @@ export class LayoutPass {
         });
       });
       const used = cursor;
-      const gridWidth = finite(p.width) ? p.width : used;
+      const gridCross = finite(cross) ? cross : used;
       const alignment = str(node.props['alignment']) ?? 'center';
-      const offset = safeOffset(gridWidth, used, alignmentAnchors(alignment)[0]);
+      const offset = safeOffset(gridCross, used, alignmentAnchors(alignment)[horizontal ? 1 : 0]);
       for (const column of columns) column.x += offset;
 
       const rows: LazyGridPlan['rows'] = [];
@@ -3896,28 +4340,31 @@ export class LayoutPass {
         for (let k = 0; k < perRow && start + k < cells.length; k++) {
           const cell = cells[start + k] as LayoutNode;
           const column = columns[k] as LazyColumnPlan;
-          const size = this.measure(cell, cctx, { width: column.width, height: null });
-          height = Math.max(height, size.height);
+          const size = this.measure(cell, cctx, horizontal ? { width: null, height: column.width } : { width: column.width, height: null });
+          height = Math.max(height, horizontal ? size.width : size.height);
           rowCells.push({ node: cell, column: k, size });
         }
         rows.push({ y, height, cells: rowCells });
-        y += height + rowSpacing;
+        y += height + lineSpacing;
       }
-      const gridHeight = rows.length > 0 ? y - rowSpacing : 0;
-      return { size: { width: gridWidth, height: gridHeight }, columns, rows };
+      const gridMain = rows.length > 0 ? y - lineSpacing : 0;
+      const size = horizontal ? { width: gridMain, height: gridCross } : { width: gridCross, height: gridMain };
+      return { size, columns, rows };
     });
   }
 
   private placeLazyGrid(node: LayoutNode, ctx: Context, p: Proposal, x: number, y: number): void {
     const plan = this.lazyGridPlan(node, ctx, p);
+    const horizontal = node.kind === 'lazyhgrid';
     const cctx = this.childContext(node, ctx);
     const gridAlignment = str(node.props['alignment']) ?? 'center';
     for (const row of plan.rows) {
       for (const cell of row.cells) {
         const column = plan.columns[cell.column] as LazyColumnPlan;
-        const box: Size = { width: column.width, height: row.height };
+        const box: Size = horizontal ? { width: row.height, height: column.width } : { width: column.width, height: row.height };
         const { dx, dy } = alignIn(box, cell.size, column.alignment ?? gridAlignment);
-        this.place(cell.node, cctx, { width: column.width, height: null }, x + column.x + dx, y + row.y + dy);
+        if (horizontal) this.place(cell.node, cctx, { width: null, height: column.width }, x + row.y + dx, y + column.x + dy);
+        else this.place(cell.node, cctx, { width: column.width, height: null }, x + column.x + dx, y + row.y + dy);
       }
     }
   }