@swiftbrowser/web 0.6.0 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "type": "module",
   "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
   "repository": {

package/src/animation.ts

@@ -287,8 +287,8 @@ export const DEFAULT_TRANSITION: Transition = { kind: 'opacity' };
 /** The spring a bar toolbar's groups change with (iOS 26), and how its items come and go. */
 export const TOOLBAR_ANIMATION: Animation = { type: 'spring', duration: 0.5, bounce: 0.2 };
 export const TOOLBAR_TRANSITION: Transition = { kind: 'scale', scale: 0.6 };
-/** The `kind` of a bottom bar glass capsule's frame change (src/layoutDom.ts): chrome, not an element. */
-export const BOTTOM_GLASS_KIND = 'bottomglass';
+/** The `kind` of a bar glass capsule's frame change (src/layoutDom.ts): chrome, not an element. */
+export const BAR_GLASS_KIND = 'barglass';
 
 const BAR_PLACEMENTS: ReadonlySet<string> = new Set(['leading', 'trailing', 'principal', 'bottom']);
 
@@ -316,18 +316,24 @@ function implicitTransitionOf(el: HTMLElement, parent: Element | null = el.paren
 /**
  * The bar toolbars whose groups this pass changed, each with its screen: one
  * that gained or lost an item (or came or went itself, on a screen already
- * there), or whose capsule or an item of it resized. A group that only
- * moved (the screen resized, a More button appeared beside it) is not one:
- * its items are as they were.
+ * there), or whose capsule or an item of it resized; and a group that only
+ * moved because another of its screen's changed, which slides over with
+ * it, as its capsule does. A group that only moved on its own (the screen
+ * resized, a More button appeared beside it) is not one: its items are as
+ * they were.
  */
 export function implicitToolbars(pass: PassRecord, frames: readonly FrameChange[]): Map<HTMLElement, Element | null> {
   const out = new Map<HTMLElement, Element | null>();
+  const moved = new Map<HTMLElement, Element | null>();
   const isNew = (toolbar: HTMLElement): boolean => pass.inserted.has(toolbar) || hasAncestorIn(toolbar, pass.inserted);
   for (const change of frames) {
     const toolbar = barToolbarOf(change.el);
     if (!toolbar || !change.from || !change.el.isConnected || isNew(toolbar)) continue;
     const { from, to } = change;
-    if (change.el === toolbar && from.width === to.width && from.height === to.height) continue;
+    if (change.el === toolbar && from.width === to.width && from.height === to.height) {
+      moved.set(toolbar, toolbar.closest('.sb-navscreen'));
+      continue;
+    }
     out.set(toolbar, toolbar.closest('.sb-navscreen'));
   }
   for (const el of pass.inserted) {
@@ -343,6 +349,11 @@ export function implicitToolbars(pass: PassRecord, frames: readonly FrameChange[
     // A removed group is detached: its screen is among the ancestors it had.
     out.set(toolbar, toolbar.isConnected ? toolbar.closest('.sb-navscreen') : (rec.ancestors.find((a) => a.classList.contains('sb-navscreen')) ?? null));
   }
+  // (a group the bar does not draw, `secondary` items collapsed into the More button, moves nothing beside it)
+  const changedScreens = new Set(Array.from(out).filter(([toolbar]) => !toolbar.hidden).map(([, screen]) => screen));
+  for (const [toolbar, screen] of moved) {
+    if (!out.has(toolbar) && changedScreens.has(screen)) out.set(toolbar, screen);
+  }
   return out;
 }
 
@@ -495,12 +506,19 @@ export class Animator {
       if (rec.tokenChanged) tokenRoots.set(el, rec.implicit ? commitAnimation : rec.animation);
     }
     // iOS 26: a bar toolbar's groups change with a spring of their own (see
-    // the top of the file); the bottom bar's glass capsules, beside their
-    // toolbars rather than around them, follow the screen's bottom toolbars.
+    // the top of the file); the bar's glass capsules, beside their toolbars
+    // rather than around them, follow the screen's bar toolbars.
+    // The spring moves the groups and their items, not what is inside an
+    // item: a button whose label changes (a tool selected, its symbol now
+    // on a tinted disc) changes in place, as UIKit redraws a bar item.
     const glassScreens = new Set<Element | null>();
+    const groupsOnly = new Set<HTMLElement>();
     for (const [toolbar, screen] of implicitToolbars(pass, frames)) {
-      if (!tokenRoots.has(toolbar)) tokenRoots.set(toolbar, commitAnimation ?? TOOLBAR_ANIMATION);
-      if (toolbar.dataset['sbPlacement'] === 'bottom') glassScreens.add(screen);
+      if (!tokenRoots.has(toolbar)) {
+        tokenRoots.set(toolbar, commitAnimation ?? TOOLBAR_ANIMATION);
+        if (!commitAnimation) groupsOnly.add(toolbar);
+      }
+      glassScreens.add(screen);
     }
     if (!commitAnimation && tokenRoots.size === 0) {
       // Not animated: frames still tweening toward a box this pass replaced
@@ -517,8 +535,14 @@ export class Animator {
     const matchedTo = new Map<RemovedRecord, { from: DOMRect; to: DOMRect }>();
 
     const animationFor = (chain: Iterable<HTMLElement>): Animation | undefined | false => {
+      let depth = 0;
       for (const el of chain) {
-        if (tokenRoots.has(el)) return tokenRoots.get(el) ?? { type: 'default' };
+        if (tokenRoots.has(el)) {
+          // (below an item of a group the bar's own spring moves: not animated)
+          if (groupsOnly.has(el) && depth > 1) return false;
+          return tokenRoots.get(el) ?? { type: 'default' };
+        }
+        depth++;
       }
       return commitAnimation ?? false;
     };
@@ -549,9 +573,12 @@ export class Animator {
       if (!from || !el.isConnected || pass.inserted.has(el)) continue;
       if (this.selfAnimating.has(change.kind)) continue;
       let animation = animationFor(ancestorsAndSelf(el));
-      if (animation === false && change.kind === BOTTOM_GLASS_KIND && glassScreens.has(el.parentElement)) {
+      if (animation === false && change.kind === BAR_GLASS_KIND && glassScreens.has(el.parentElement)) {
         animation = TOOLBAR_ANIMATION;
       }
+      // An item of such a group that only resized about its own center (its
+      // label changed, its slot stayed) is redrawn in place, not tweened.
+      if (animation !== false && groupsOnly.has(el.parentElement as HTMLElement) && sameCenter(from, to)) animation = false;
       if (animation === false) {
         // Moved in place, unless it carries on with a tween of its own.
         if (!this.retargetFrame(change, null)) jumped.set(el, { x: to.x - from.x, y: to.y - from.y });
@@ -975,6 +1002,11 @@ function jumpAbove(
 }
 
 /** The element's ancestors, nearest first. */
+/** Whether two boxes share their center (to within a point: each edge is snapped to a whole point). */
+function sameCenter(a: FrameRect, b: FrameRect): boolean {
+  return Math.abs(a.x + a.width / 2 - (b.x + b.width / 2)) <= 1 && Math.abs(a.y + a.height / 2 - (b.y + b.height / 2)) <= 1;
+}
+
 function ancestorsOf(el: HTMLElement): HTMLElement[] {
   const out: HTMLElement[] = [];
   for (let a = el.parentElement; a; a = a.parentElement) out.push(a);

package/src/chartDom.ts

@@ -135,11 +135,15 @@ function buildPlot(doc: Document, props: Partial<ChartProps>, plot: Rect, box: R
   const grid = svg(doc, 'g', { class: 'sb-chart-grid' });
   for (const u of gridLines(props.xAxis)) {
     const x = r2(Math.floor(mapX(local, u)) + 0.5);
-    grid.append(svg(doc, 'line', { class: 'sb-chart-gridline', 'data-sb-axis': 'x', x1: x, y1: 0, x2: x, y2: h }));
+    const line = svg(doc, 'line', { class: 'sb-chart-gridline', 'data-sb-axis': 'x', x1: x, y1: 0, x2: x, y2: h });
+    if (props.xAxis?.dashed) line.dataset['sbDashed'] = '';
+    grid.append(line);
   }
   for (const u of gridLines(props.yAxis)) {
     const y = r2(Math.floor(mapY(local, u)) + 0.5);
-    grid.append(svg(doc, 'line', { class: 'sb-chart-gridline', 'data-sb-axis': 'y', x1: 0, y1: y, x2: w, y2: y }));
+    const line = svg(doc, 'line', { class: 'sb-chart-gridline', 'data-sb-axis': 'y', x1: 0, y1: y, x2: w, y2: y });
+    if (props.yAxis?.dashed) line.dataset['sbDashed'] = '';
+    grid.append(line);
   }
   root.append(grid);
 

package/src/layout/engine.ts

@@ -252,21 +252,38 @@ const NAV_ITEM_MARGIN = 16;
 // iOS 26: the back button is a 44pt glass circle 16 from the leading edge,
 // and the bar's leading and trailing items sit in glass capsules 44 tall,
 // each item in a slot: a symbol the 44 circle, anything else (text, a
-// label) its width and 12 either side, at least 44; the groups 8 apart.
+// label) its width and 12 either side, at least 44. Adjacent items of one
+// placement share a capsule (a run; a `ToolbarSpacer` of that placement ends
+// one), their slots 12 apart and the capsule a point past the end slots; the
+// capsules, the back button and the More button sit 12 apart (measured in
+// the iOS 26 simulator, Examples/Fidelity `topbar*`).
 const NAV_GLASS_SIZE = 44;
 const NAV_GLASS_PAD_H = 12;
-const NAV_GROUP_SPACING = 8;
+const NAV_GROUP_SPACING = 12;
+const NAV_RUN_GAP = 12;
+const NAV_RUN_PAD = 1;
+
+/**
+ * The children an item draws in the bar: a menu or context menu draws its
+ * label (the first child) and lists the rest in its popover, so its items
+ * (which a lazy menu only builds when it opens) do not make it wider or a
+ * text item.
+ */
+function drawnChildren(node: LayoutNode): LayoutNode[] {
+  return node.kind === 'menu' || node.kind === 'contextmenu' ? node.children.slice(0, 1) : node.children;
+}
 
 /** Whether any text is laid out in an item (a bottom bar pads text items as text). */
 function hasText(item: LayoutNode): boolean {
-  return item.kind === 'text' || item.children.some(hasText);
+  return item.kind === 'text' || drawnChildren(item).some(hasText);
 }
 
 /** A bar item that is only a symbol (an `image`, or a button, menu or link around one). */
 function isSymbolItem(item: LayoutNode): boolean {
   const inner = unwrapStyled(item);
   if (inner.kind === 'image') return true;
-  return inner.children.length === 1 && isSymbolItem(inner.children[0] as LayoutNode);
+  const drawn = drawnChildren(inner);
+  return drawn.length === 1 && isSymbolItem(drawn[0] as LayoutNode);
 }
 
 /** A bar item's slot in its glass capsule. */
@@ -294,9 +311,11 @@ 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
-// floating 16 from the sides and 28 above the screen bottom (8 above a view
-// that ends higher); the content stops above it.
+// floating 28 from the sides (measured in the simulator: x 28.67…364.33 on the
+// Fidelity `search` screen and Food Truck's Donuts) and 28 above the screen
+// bottom (8 above a view that ends higher); the content stops above it.
 const SEARCH_BOTTOM_HEIGHT = 48;
+const SEARCH_BOTTOM_MARGIN_H = 28;
 const SEARCH_BOTTOM_MARGIN = 28;
 const SEARCH_BOTTOM_MARGIN_INSET = 8;
 const SEARCH_FIELD_DEFAULT_WIDTH = 200;
@@ -2094,6 +2113,17 @@ export class LayoutPass {
         const child = edge === 'top' ? node.children[0] : node.children[node.children.length - 1];
         return child && !isSpacer(child) ? this.textEdge(child, this.childContext(node, ctx), edge, depth + 1) : null;
       }
+      case 'hstack': {
+        // A row with text in it (Food Truck's flavor line: a symbol and its
+        // name) is spaced as its largest text, as iOS 26 spaces it.
+        const cctx = this.childContext(node, ctx);
+        let font: ResolvedFont | null = null;
+        for (const child of node.children) {
+          const found = this.textEdge(child, cctx, edge, depth + 1);
+          if (found && (!font || found.size > font.size)) font = found;
+        }
+        return font;
+      }
       default:
         return null;
     }
@@ -3242,11 +3272,14 @@ export class LayoutPass {
    * (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.
+   * 26 glass capsules in the 44 row: adjacent `leading` (or `trailing`)
+   * toolbars share one (a run, chrome `leadingGlass0` …, `trailingGlass0` …;
+   * a `ToolbarSpacer` of the placement ends one), their items in 44-tall
+   * slots 12 apart, the capsules 12 apart (`leading` after the back button,
+   * `trailing` ending 16 from the trailing edge, in their order in the
+   * content); a `principal` group is centered in place of the title. 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;
@@ -3284,10 +3317,11 @@ export class LayoutPass {
     };
     if (large) chrome['largeTitle'] = { x, y: y + barHeight, width: size.width, height: LARGE_TITLE_HEIGHT };
     if (parts.search) {
+      const marginH = searchOnTop ? SEARCH_FIELD_MARGIN_H : SEARCH_BOTTOM_MARGIN_H;
       chrome['searchField'] = {
-        x: x + SEARCH_FIELD_MARGIN_H,
+        x: x + marginH,
         y: searchOnTop ? y + barHeight + largeHeight + SEARCH_TOP_ABOVE : y + size.height - searchBottom,
-        width: Math.max(0, size.width - 2 * SEARCH_FIELD_MARGIN_H),
+        width: Math.max(0, size.width - 2 * marginH),
         height: searchOnTop ? SEARCH_TOP_HEIGHT : SEARCH_BOTTOM_HEIGHT,
       };
       // The page draws a field under the title as the bar's (a gray capsule)
@@ -3331,10 +3365,45 @@ export class LayoutPass {
       const total = sizes.reduce((sum, s) => sum + s.width, 0) + Math.max(0, sizes.length - 1) * NAV_ITEM_SPACING;
       return { toolbar, placement, sizes, slots: null, total };
     });
-    const groupWidth = (placement: string): number =>
-      groups.filter((g) => g.placement === placement).reduce((sum, g) => sum + g.total + NAV_GROUP_SPACING, 0);
-    const leadingWidth = groupWidth('leading');
-    const trailingWidth = groupWidth('trailing');
+    // The leading and trailing runs: consecutive toolbars of one placement
+    // share a capsule, a spacer of that placement ends one.
+    interface Run {
+      placement: 'leading' | 'trailing';
+      groups: Group[];
+      /** The capsule's width: the slots 12 apart, a point past the end slots (none for a lone item). */
+      width: number;
+    }
+    const groupOf = new Map(groups.map((g) => [g.toolbar, g]));
+    const runs: Run[] = [];
+    const open: Partial<Record<'leading' | 'trailing', Run>> = {};
+    const runWidth = (run: Run): number => {
+      const slots = run.groups.flatMap((g) => g.slots ?? []);
+      if (slots.length === 0) return 0;
+      const inner = slots.reduce((sum, w) => sum + w, 0) + (slots.length - 1) * NAV_RUN_GAP;
+      return slots.length > 1 ? inner + 2 * NAV_RUN_PAD : inner;
+    };
+    for (const toolbar of parts.toolbars) {
+      const placement = str(toolbar.props['placement']);
+      if (placement !== 'leading' && placement !== 'trailing') continue;
+      if (isSpacer(toolbar)) {
+        delete open[placement];
+        continue;
+      }
+      const group = groupOf.get(toolbar);
+      if (!group) continue;
+      let run = open[placement];
+      if (!run) {
+        run = { placement, groups: [], width: 0 };
+        open[placement] = run;
+        runs.push(run);
+      }
+      run.groups.push(group);
+    }
+    for (const run of runs) run.width = runWidth(run);
+    const runsWidth = (placement: string): number =>
+      runs.filter((r) => r.placement === placement && r.width > 0).reduce((sum, r) => sum + r.width + NAV_GROUP_SPACING, 0);
+    const leadingWidth = runsWidth('leading');
+    const trailingWidth = runsWidth('trailing');
     const principal = groups.some((g) => g.placement === 'principal');
 
     // `.secondaryAction` items (placement `secondary`), as iOS treats them:
@@ -3356,7 +3425,7 @@ export class LayoutPass {
         return { toolbar, item, size: itemSize, slot: navSlot(item, itemSize.width) };
       });
     });
-    // Items of one toolbar share its glass capsule; separate toolbars sit 8 apart, as the trailing groups do.
+    // Items of one toolbar share its glass capsule; separate toolbars sit 12 apart, as the trailing runs do.
     const secondaryGap = (previous: SecondaryItem | undefined, entry: SecondaryItem): number =>
       previous && previous.toolbar !== entry.toolbar ? NAV_GROUP_SPACING : 0;
     const secondaryWidth = (entries: readonly SecondaryItem[]): number =>
@@ -3413,28 +3482,46 @@ export class LayoutPass {
         cursor += (slot ?? itemSize.width) + spacing;
       });
     };
-    for (const group of groups) {
-      switch (group.placement) {
-        case 'leading': {
-          this.setFrame(group.toolbar, leadingCursor, rowY, { width: group.total, height: NAV_BAR_HEIGHT });
-          placeGroup(group, leadingCursor, rowY, NAV_BAR_HEIGHT, 0);
-          leadingCursor += group.total + NAV_GROUP_SPACING;
-          break;
-        }
-        case 'principal': {
-          const startX = x + (size.width - group.total) / 2;
-          this.setFrame(group.toolbar, startX, rowY, { width: group.total, height: NAV_BAR_HEIGHT });
-          placeGroup(group, startX, rowY, NAV_BAR_HEIGHT, NAV_ITEM_SPACING);
-          break;
-        }
-        default: {
-          const startX = trailingEdge - group.total;
-          this.setFrame(group.toolbar, startX, rowY, { width: group.total, height: NAV_BAR_HEIGHT });
-          placeGroup(group, startX, rowY, NAV_BAR_HEIGHT, 0);
-          trailingEdge = startX - NAV_GROUP_SPACING;
-          break;
-        }
+    // A run's capsule (chrome `leadingGlass0` …, `trailingGlass0` …) and its
+    // items, in slots 12 apart from `startX`; each toolbar's frame spans its
+    // own items' slots. Runs of a placement follow their order in the
+    // content, leading-to-trailing.
+    const placeRun = (run: Run, startX: number, index: number): void => {
+      chrome[`${run.placement}Glass${index}`] = { x: startX, y: rowY, width: run.width, height: NAV_BAR_HEIGHT };
+      const count = run.groups.reduce((sum, g) => sum + (g.slots?.length ?? 0), 0);
+      let cursor = startX + (count > 1 ? NAV_RUN_PAD : 0);
+      for (const group of run.groups) {
+        const itemCtx = this.childContext(group.toolbar, cctx);
+        const first = cursor;
+        group.toolbar.children.forEach((item, i) => {
+          const itemSize = group.sizes[i] as Size;
+          const slot = group.slots?.[i] ?? itemSize.width;
+          this.place(item, itemCtx, { width: null, height: null }, cursor + (slot - itemSize.width) / 2, rowY + (NAV_BAR_HEIGHT - itemSize.height) / 2);
+          cursor += slot + NAV_RUN_GAP;
+        });
+        const last = group.toolbar.children.length > 0 ? cursor - NAV_RUN_GAP : first;
+        this.setFrame(group.toolbar, first, rowY, { width: last - first, height: NAV_BAR_HEIGHT });
       }
+    };
+    let leadingIndex = 0;
+    for (const run of runs.filter((r) => r.placement === 'leading')) {
+      if (run.width === 0) continue;
+      placeRun(run, leadingCursor, leadingIndex++);
+      leadingCursor += run.width + NAV_GROUP_SPACING;
+    }
+    const trailingRuns = runs.filter((r) => r.placement === 'trailing' && r.width > 0);
+    let trailingCursor = trailingEdge - (trailingWidth > 0 ? trailingWidth - NAV_GROUP_SPACING : 0);
+    const trailingStart = trailingCursor;
+    trailingRuns.forEach((run, index) => {
+      placeRun(run, trailingCursor, index);
+      trailingCursor += run.width + NAV_GROUP_SPACING;
+    });
+    if (trailingRuns.length > 0) trailingEdge = trailingStart - NAV_GROUP_SPACING;
+    for (const group of groups) {
+      if (group.placement !== 'principal') continue;
+      const startX = x + (size.width - group.total) / 2;
+      this.setFrame(group.toolbar, startX, rowY, { width: group.total, height: NAV_BAR_HEIGHT });
+      placeGroup(group, startX, rowY, NAV_BAR_HEIGHT, NAV_ITEM_SPACING);
     }
     // The inline secondary items, right-aligned before the trailing groups,
     // each toolbar framed around its own; the collapsed ones are hidden (the
@@ -3475,11 +3562,9 @@ export class LayoutPass {
     // takes up to a pixel off a fractional width at a fractional origin, and
     // the title truncates with an ellipsis ("Animati…") when its box is any
     // narrower than its text.
-    const scroller = parts.content ? unwrapStyled(parts.content) : null;
-    const titleScrolls =
-      large &&
-      scroller !== null &&
-      (scroller.kind === 'list' || (scroller.kind === 'scrollview' && this.scrollAxes(scroller).vertical));
+    const direct = parts.content ? unwrapStyled(parts.content) : null;
+    const scroller = parts.content ? this.screenScroller(parts.content) : null;
+    const titleScrolls = large && scroller !== null;
     // A large title that scrolls away collapses into the inline title, which
     // the renderer shows once it has (`data-sb-collapsed`).
     if ((!large || titleScrolls) && !principal) {
@@ -3543,9 +3628,7 @@ export class LayoutPass {
       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) {
+    if (scroller) {
       // 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,
@@ -3559,14 +3642,14 @@ export class LayoutPass {
       this.place(child, contentCtx, { width: content.width, height: content.height + top + bottomCover }, content.x, y);
       return;
     }
-    if (scroller) this.scrollInsets.delete(scroller);
+    if (direct) this.scrollInsets.delete(direct);
     // 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') {
+    if (direct && direct.kind === 'scrollview') {
       this.place(child, contentCtx, { width: content.width, height: content.height }, content.x, content.y);
       return;
     }
@@ -3577,6 +3660,30 @@ export class LayoutPass {
     this.place(child, contentCtx, proposal, content.x + dx, content.y + dy);
   }
 
+  /**
+   * The list or vertical scroll view that is a screen's content: through
+   * modifiers and wrappers that put their child at their own origin and size
+   * (a `GeometryReader`'s or a one-child `ZStack`'s child, a decoration's
+   * content), as UIKit finds a screen's
+   * scroll view. Food Truck's Truck page is a `GeometryReader` around its
+   * `ScrollView`, its Donuts page a `ZStack` with a background around one:
+   * their large titles scroll and collapse as on iOS. Null when there is none.
+   */
+  private screenScroller(node: LayoutNode): LayoutNode | null {
+    let current: LayoutNode | undefined = node;
+    for (let depth = 0; current && depth < 32; depth++) {
+      if (current.kind === 'list' || (current.kind === 'scrollview' && this.scrollAxes(current).vertical)) return current;
+      if ((current.kind === 'styled' || current.kind === 'geometry' || current.kind === 'zstack') && current.children.length === 1) {
+        current = current.children[0];
+      } else if (current.kind === 'decorated') {
+        current = current.children[0];
+      } else {
+        return null;
+      }
+    }
+    return null;
+  }
+
   /**
    * 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
@@ -3843,7 +3950,10 @@ export class LayoutPass {
   /**
    * 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).
+   * horizontally (a list or form fills it). A navigation stack fills the
+   * column from its top instead, as the split view's columns do, so its bar
+   * takes the status bar's room and is as tall as theirs (with the 10 under
+   * an inline title) and its content starts level with theirs.
    */
   private placeInspectorPanel(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
     const { screen, safeArea } = this.env;
@@ -3851,6 +3961,10 @@ export class LayoutPass {
     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) {
+      if (unwrapStyled(child).kind === 'navstack') {
+        this.place(child, cctx, { width: area.width, height: size.height }, x, y);
+        continue;
+      }
       const childSize = this.measure(child, cctx, area);
       const { dx } = alignIn(area, childSize, 'center');
       this.place(child, cctx, area, x + dx, y + top);

package/src/layout/index.ts

@@ -9,7 +9,7 @@
  *
  * | kind                | keys |
  * |---------------------|------|
- * | `navscreen`         | `bar` (status bar + 44), `largeTitle` (only when the title is large), `back` (only when depth > 0), `title` (Phase 6: the centered inline title's rect, truncated to the room the bar items leave; absent for a large title or a `principal` toolbar), `searchField` (Phase 6: the 36px field of a `searchfield` child), `bottomBar` (iOS 26: the band from a `bottom` toolbar's 48 glass row to the screen bottom, when one is present), `bottomGlass0` … (its glass capsules, in order), `content` |
+ * | `navscreen`         | `bar` (status bar + 44), `largeTitle` (only when the title is large), `back` (only when depth > 0), `title` (Phase 6: the centered inline title's rect, truncated to the room the bar items leave; absent for a large title or a `principal` toolbar), `searchField` (Phase 6: the 36px field of a `searchfield` child), `leadingGlass0` …, `trailingGlass0` … (iOS 26: the bar's glass capsules, one per run of adjacent `leading` / `trailing` toolbars, in order), `bottomBar` (iOS 26: the band from a `bottom` toolbar's 48 glass row to the screen bottom, when one is present), `bottomGlass0` … (its glass capsules, in order), `content` |
  * | `sheet`             | `grabber` (36×5), `content` (below the 20px grabber row) |
  * | `toggle`            | `label`, `switch` (51×31 at the trailing edge) |
  * | `button` (bordered) | `label` |

package/src/layoutDom.ts

@@ -42,7 +42,7 @@ import { bitmapLaidOut } from './bitmaps';
 import { drawRichText } from './richText';
 import { bindScrollUnderBar, largeTitleOf, largeTitleScrolls } from './largeTitle';
 import { bindScrollEdgeBottom } from './scrollEdge';
-import { BOTTOM_GLASS_KIND, TOOLBAR_ANIMATION, TOOLBAR_TRANSITION, baseTiming, timingFor, transitionStart } from './animation';
+import { BAR_GLASS_KIND, TOOLBAR_ANIMATION, TOOLBAR_TRANSITION, baseTiming, timingFor, transitionStart } from './animation';
 
 export interface LayoutDomContext {
   root: HTMLElement;
@@ -263,17 +263,21 @@ function placeEditControl(node: HTMLElement | null, rect: Rect | undefined, orig
 }
 
 /**
- * iOS 26: the glass a screen's bottom toolbar items float on, one element
- * per capsule (engine `bottomGlass0` …), under the items (styles.css). A
- * capsule is known by the bottom toolbars drawn on it (`data-sb-toolbars`:
- * the ids of those whose frames lie in it), not by its index, so a group
- * that goes takes its own capsule with it and the groups after it keep
- * theirs. A capsule that moves or resizes is reported in `changes` (kind
- * `bottomglass`, no id) so the Animator tweens it with the toolbar's items;
- * one that appears on a screen already there, or goes, scales and fades as
- * the items do (`TOOLBAR_TRANSITION`), in the toolbar's own spring.
+ * iOS 26: the glass a screen's bar items float on, one element per capsule
+ * (`.sb-bar-glass`, styles.css): the navigation bar's runs of leading and
+ * trailing items (engine `leadingGlass0` …, `trailingGlass0` …) and the
+ * bottom bar's (`bottomGlass0` …), under the items. A capsule is known by
+ * the toolbars drawn on it (`data-sb-toolbars`: the ids of those of its
+ * placement whose frames lie in it), not by its index, so a group that goes
+ * takes its own capsule with it and the groups after it keep theirs, and an
+ * item swapped for another (its toolbar's element kept, Toolbar.swift)
+ * changes on a capsule that stays. A capsule that moves or resizes is
+ * reported in `changes` (kind `barglass`, no id) so the Animator tweens it
+ * with the toolbar's items; one that appears on a screen already there, or
+ * goes, scales and fades as the items do (`TOOLBAR_TRANSITION`), in the
+ * toolbar's own spring.
  */
-function syncBottomGlass(
+function syncBarGlass(
   result: LayoutResult,
   node: LayoutNode,
   screen: HTMLElement,
@@ -282,28 +286,31 @@ function syncBottomGlass(
   screenIsNew: boolean,
   changes: BoxChange[],
 ): void {
-  const unmatched = new Set(screen.querySelectorAll<HTMLElement>(':scope > .sb-bottom-glass:not([data-sb-exiting])'));
-  const toolbars = node.children.filter((child) => child.kind === 'toolbar' && child.props['placement'] === 'bottom');
-  for (let count = 0, rect = chrome?.['bottomGlass0']; rect; rect = chrome?.[`bottomGlass${++count}`]) {
-    const capsule = rect;
-    const ids = toolbars.filter((toolbar) => centeredIn(result.frames.get(toolbar.id), capsule)).map((toolbar) => String(toolbar.id));
-    const relative = { x: rect.x - frame.x, y: rect.y - frame.y, width: rect.width, height: rect.height };
-    let glass = Array.from(unmatched).find((candidate) => (candidate.dataset['sbToolbars'] ?? '').split(' ').some((id) => ids.includes(id)));
-    if (glass) {
-      unmatched.delete(glass);
-      const from = glassBox(glass);
-      if (!sameRect(from, relative)) changes.push({ id: -1, el: glass, kind: BOTTOM_GLASS_KIND, from, to: relative });
-    } else {
-      glass = document.createElement('div');
-      glass.className = 'sb-bottom-glass';
-      screen.append(glass);
-      if (!screenIsNew) transitionGlass(glass, false);
-      changes.push({ id: -1, el: glass, kind: BOTTOM_GLASS_KIND, from: null, to: relative });
+  for (const placement of ['leading', 'trailing', 'bottom'] as const) {
+    const unmatched = new Set(screen.querySelectorAll<HTMLElement>(`:scope > .sb-bar-glass[data-sb-placement="${placement}"]:not([data-sb-exiting])`));
+    const toolbars = node.children.filter((child) => child.kind === 'toolbar' && child.props['placement'] === placement);
+    for (let count = 0, rect = chrome?.[`${placement}Glass0`]; rect; rect = chrome?.[`${placement}Glass${++count}`]) {
+      const capsule = rect;
+      const ids = toolbars.filter((toolbar) => centeredIn(result.frames.get(toolbar.id), capsule)).map((toolbar) => String(toolbar.id));
+      const relative = { x: rect.x - frame.x, y: rect.y - frame.y, width: rect.width, height: rect.height };
+      let glass = Array.from(unmatched).find((candidate) => (candidate.dataset['sbToolbars'] ?? '').split(' ').some((id) => ids.includes(id)));
+      if (glass) {
+        unmatched.delete(glass);
+        const from = glassBox(glass);
+        if (!sameRect(from, relative)) changes.push({ id: -1, el: glass, kind: BAR_GLASS_KIND, from, to: relative });
+      } else {
+        glass = document.createElement('div');
+        glass.className = 'sb-bar-glass';
+        glass.dataset['sbPlacement'] = placement;
+        screen.append(glass);
+        if (!screenIsNew) transitionGlass(glass, false);
+        changes.push({ id: -1, el: glass, kind: BAR_GLASS_KIND, from: null, to: relative });
+      }
+      glass.dataset['sbToolbars'] = ids.join(' ');
+      placeChrome(glass, rect, frame);
     }
-    glass.dataset['sbToolbars'] = ids.join(' ');
-    placeChrome(glass, rect, frame);
+    for (const extra of unmatched) transitionGlass(extra, true);
   }
-  for (const extra of unmatched) transitionGlass(extra, true);
 }
 
 /** Whether `rect`'s center lies in `area` (a toolbar's frame spans its items, all on one capsule). */
@@ -320,7 +327,7 @@ function glassBox(glass: HTMLElement): Rect {
   return { x: parseFloat(s.left) || 0, y: parseFloat(s.top) || 0, width: parseFloat(s.width) || 0, height: parseFloat(s.height) || 0 };
 }
 
-/** Scales and fades a bottom bar capsule in, or out (then removes it), as its toolbar's items do. */
+/** Scales and fades a bar capsule in, or out (then removes it), as its toolbar's items do. */
 function transitionGlass(glass: HTMLElement, exit: boolean): void {
   const timing = baseTiming(timingFor(TOOLBAR_ANIMATION));
   const gone = transitionStart(TOOLBAR_TRANSITION, exit);
@@ -705,7 +712,7 @@ function applyChrome(
         bar.style.paddingTop = `${top}px`;
         bar.style.paddingBottom = `${bottom}px`;
       }
-      syncBottomGlass(result, node, el, chrome, frame, isNew, changes);
+      syncBarGlass(result, node, el, chrome, frame, isNew, changes);
       // iOS 26 in a tab view: the search field under the title (styles.css).
       setFlag(el, 'sbSearchTop', chrome?.['searchTop'] ? '' : null);
       const largeRect = chrome?.['largeTitle'];