@swiftbrowser/web 0.17.2 → 0.17.4

package/README.md

@@ -36,6 +36,7 @@ src/imageOps.ts     Core Image's steps (sepia, crystallize, edges, blur, pixella
 src/hostContent.ts  `host` elements: the registry of the page's own DOM elements the renderer adopts (docs/ops-protocol.md, "Host elements")
 src/pointerEffects.ts Hover events, tooltips, cursors and symbol effects for page-side producers; frame reports' safe-area overlap (docs/ops-protocol.md, "Pointer, effects, matched geometry and frames on screen")
 src/press.ts        iOS 26 press feedback: the Liquid Glass under a pressed bar button or glass button swells and springs back
+src/barMorph.ts     iOS 26 navigation: one bar through a push, pop or swipe back; the capsules change shape and the items come and go on an overlay while the screens slide
 src/styles.css      iOS tokens, device frame, device mode, element styles, host boxes and islands
 src/page.css        The app page around the frame: its toolbar, stage, error banner, device-mode chrome
 node/               Node side: apps.ts (the AppSpec registry type), config.ts (Vite config from specs),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.17.2",
+  "version": "0.17.4",
   "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/barMorph.ts

@@ -0,0 +1,411 @@
+/**
+ * iOS 26: one navigation bar through a push or pop.
+ *
+ * Each screen draws its own bar (the back and More circles in `.sb-navbar`,
+ * the glass capsules `.sb-bar-glass` and the `leading` / `trailing` toolbar
+ * items laid out on them, src/layoutDom.ts), and a screen slides as a whole,
+ * so the bar's items slid with it. On iOS 26 the navigation controller draws
+ * one bar: through a push or pop the items stay in it, a capsule both screens
+ * have changes shape from the one's to the other's, the old screen's items
+ * scale and fade out as the new screen's scale and fade in (the bar's own
+ * transition for an item that comes or goes, src/animation.ts), an item both
+ * screens draw the same at the same place stays as it is, and the back button
+ * appears or goes with the depth. The titles still travel with their screens
+ * (the large title with the content it heads), as the content does.
+ *
+ * The morph is an overlay on the stack (`.sb-navbar-morph`, styles.css: above
+ * the screens and the pop clone, taking no input) holding visual clones of
+ * both screens' bar parts, while the parts themselves are hidden
+ * (`data-sb-bar-morph`) for the slide. The renderer builds it at the commit
+ * that holds the push or pop, in the frame the slide starts (the layout has
+ * placed the new screen's parts by then), and it drops itself when the slide
+ * ends. A swipe back builds it when the drag claims the pointer and scrubs it
+ * with the drag; the release plays the rest forward (the pop, from the pop
+ * clone the screen leaves behind) or back (the snap back) over the slide's
+ * duration, as the screens move.
+ */
+
+import { TOOLBAR_TRANSITION, transitionStart } from './animation';
+import { ghostClone } from './ghost';
+import type { Rect } from './layout';
+
+/** On a screen's bar part the morph stands in for: hidden while it runs (styles.css). */
+export const BAR_MORPH_ATTR = 'data-sb-bar-morph';
+/** The overlay's class (styles.css). */
+export const BAR_MORPH_CLASS = 'sb-navbar-morph';
+/** The slide's duration under `prefers-reduced-motion` (styles.css: 0.01s). */
+const REDUCED_MOTION_MS = 10;
+/** The slide's easing (styles.css `--sb-nav-easing`), read from the stack; this when it cannot be. */
+const NAV_EASING = 'cubic-bezier(0.32, 0.72, 0, 1)';
+/** Two boxes this close are one place. */
+const RECT_EPSILON = 0.5;
+/** A drag this close to an end has nothing left to play. */
+const PROGRESS_EPSILON = 0.01;
+
+export type BarPlacement = 'leading' | 'trailing';
+export type BarPartKind = 'glass' | 'back' | 'more' | 'item';
+
+/** A part of a screen's bar, as the plan sees it. */
+export interface BarPart {
+  kind: BarPartKind;
+  /** The run an item or capsule belongs to; the back and More circles have none. */
+  placement: BarPlacement | null;
+  /** Its box, relative to the screen. */
+  rect: Rect;
+  /** What it draws, without element ids (two items that draw the same at the same place are one): `signatureOf`. */
+  signature: string;
+}
+
+export type MorphPhase = 'keep' | 'move' | 'exit' | 'enter';
+
+/** One clone of the morph: the part drawn (the arriving screen's, or the leaving screen's for `exit`) and how it goes from `from` to `to`. */
+export interface MorphStep<T extends BarPart> {
+  part: T;
+  from: Rect;
+  to: Rect;
+  phase: MorphPhase;
+}
+
+function sameRect(a: Rect, b: Rect): boolean {
+  return (
+    Math.abs(a.x - b.x) < RECT_EPSILON &&
+    Math.abs(a.y - b.y) < RECT_EPSILON &&
+    Math.abs(a.width - b.width) < RECT_EPSILON &&
+    Math.abs(a.height - b.height) < RECT_EPSILON
+  );
+}
+
+/**
+ * How the leaving screen's bar parts (`from`) become the arriving screen's
+ * (`to`): the capsules first (drawn under the rest), each run of a placement
+ * meeting the run in its place on the other screen, leading runs counted
+ * from the leading edge and trailing runs from the trailing edge, where the
+ * bar anchors them (a capsule with none opposite scales and fades as the
+ * items do); then the back and More circles, one each; then the items, an
+ * item the other screen draws the same at the same place staying as it is
+ * and every other leaving or arriving.
+ */
+export function planBarMorph<T extends BarPart>(from: readonly T[], to: readonly T[]): MorphStep<T>[] {
+  const steps: MorphStep<T>[] = [];
+  const pair = (old: T | undefined, arriving: T | undefined): void => {
+    if (old && arriving) {
+      steps.push({ part: arriving, from: old.rect, to: arriving.rect, phase: sameRect(old.rect, arriving.rect) ? 'keep' : 'move' });
+    } else if (old) {
+      steps.push({ part: old, from: old.rect, to: old.rect, phase: 'exit' });
+    } else if (arriving) {
+      steps.push({ part: arriving, from: arriving.rect, to: arriving.rect, phase: 'enter' });
+    }
+  };
+  for (const placement of ['leading', 'trailing'] as const) {
+    const olds = from.filter((part) => part.kind === 'glass' && part.placement === placement);
+    const news = to.filter((part) => part.kind === 'glass' && part.placement === placement);
+    const count = Math.max(olds.length, news.length);
+    for (let i = 0; i < count; i++) {
+      const at = (list: readonly T[]): T | undefined => (placement === 'leading' ? list[i] : list[list.length - 1 - i]);
+      pair(at(olds), at(news));
+    }
+  }
+  for (const kind of ['back', 'more'] as const) {
+    pair(
+      from.find((part) => part.kind === kind),
+      to.find((part) => part.kind === kind),
+    );
+  }
+  const arriving = to.filter((part) => part.kind === 'item');
+  const kept = new Set<T>();
+  for (const old of from) {
+    if (old.kind !== 'item') continue;
+    const twin = arriving.find(
+      (item) => !kept.has(item) && item.placement === old.placement && sameRect(old.rect, item.rect) && item.signature === old.signature,
+    );
+    if (twin) {
+      kept.add(twin);
+      steps.push({ part: twin, from: twin.rect, to: twin.rect, phase: 'keep' });
+    } else {
+      steps.push({ part: old, from: old.rect, to: old.rect, phase: 'exit' });
+    }
+  }
+  for (const item of arriving) {
+    if (!kept.has(item)) steps.push({ part: item, from: item.rect, to: item.rect, phase: 'enter' });
+  }
+  return steps;
+}
+
+// ---------------------------------------------------------------------------
+// The screens' parts
+// ---------------------------------------------------------------------------
+
+interface ScreenPart extends BarPart {
+  el: HTMLElement;
+}
+
+function placementOf(el: HTMLElement): BarPlacement | null {
+  const placement = el.dataset['sbPlacement'];
+  return placement === 'leading' || placement === 'trailing' ? placement : null;
+}
+
+/** A screen's (or pop clone's) glass capsules in the navigation bar, in the bar's order. */
+function capsulesOf(screen: HTMLElement): HTMLElement[] {
+  return Array.from(screen.querySelectorAll<HTMLElement>(':scope > .sb-bar-glass:not([data-sb-exiting])')).filter((el) => placementOf(el) !== null);
+}
+
+/** Its `leading` and `trailing` toolbar groups the bar draws. */
+function groupsOf(screen: HTMLElement): HTMLElement[] {
+  return Array.from(screen.querySelectorAll<HTMLElement>(':scope > .sb-navscreen-body > .sb-navscreen-content > .sb-toolbar')).filter(
+    (el) => placementOf(el) !== null && !el.hidden && !el.hasAttribute('data-sb-spacer'),
+  );
+}
+
+/** Its back and More circles, those shown. */
+function circlesOf(screen: HTMLElement): { kind: 'back' | 'more'; el: HTMLElement }[] {
+  const out: { kind: 'back' | 'more'; el: HTMLElement }[] = [];
+  for (const kind of ['back', 'more'] as const) {
+    const el = screen.querySelector<HTMLElement>(`:scope > .sb-navbar > .sb-navbar-${kind}`);
+    if (el && !el.hidden) out.push({ kind, el });
+  }
+  return out;
+}
+
+/** The elements of a screen's bar the morph stands in for (hidden while it runs): the capsules, the circles and the groups with their items. */
+function barElementsOf(screen: HTMLElement): HTMLElement[] {
+  return [...capsulesOf(screen), ...circlesOf(screen).map((circle) => circle.el), ...groupsOf(screen)];
+}
+
+/** An element's markup as the plan compares it: without element ids, the morph's own mark, or where its toolbar put it. */
+function signatureOf(el: HTMLElement): string {
+  const copy = el.cloneNode(true) as HTMLElement;
+  for (const node of [copy, ...copy.querySelectorAll('*')]) {
+    node.removeAttribute('data-sb-id');
+    node.removeAttribute('data-sb-ghost');
+    node.removeAttribute(BAR_MORPH_ATTR);
+  }
+  copy.style.left = '';
+  copy.style.top = '';
+  return copy.outerHTML;
+}
+
+/** The parts of a screen's bar with their boxes relative to the screen (wherever its slide has it). */
+function partsOf(screen: HTMLElement): ScreenPart[] {
+  const base = screen.getBoundingClientRect();
+  // The frame may be scaled to fit the page: boxes in the screen's own pixels.
+  const scale = screen.offsetWidth > 0 && base.width > 0 ? base.width / screen.offsetWidth : 1;
+  const rectOf = (el: HTMLElement): Rect => {
+    const r = el.getBoundingClientRect();
+    return { x: (r.left - base.left) / scale, y: (r.top - base.top) / scale, width: r.width / scale, height: r.height / scale };
+  };
+  const out: ScreenPart[] = [];
+  const add = (kind: BarPartKind, placement: BarPlacement | null, el: HTMLElement, signature = ''): void => {
+    const rect = rectOf(el);
+    if (rect.width === 0 && rect.height === 0) return;
+    out.push({ kind, placement, rect, signature, el });
+  };
+  for (const capsule of capsulesOf(screen)) add('glass', placementOf(capsule), capsule);
+  for (const circle of circlesOf(screen)) add(circle.kind, null, circle.el);
+  for (const group of groupsOf(screen)) {
+    const placement = placementOf(group);
+    for (const item of group.querySelectorAll<HTMLElement>(':scope > [data-sb-id], :scope > [data-sb-ghost]')) {
+      if (!item.hidden) add('item', placement, item, signatureOf(item));
+    }
+  }
+  return out;
+}
+
+function reducedMotion(): boolean {
+  return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function navEasing(stack: HTMLElement): string {
+  const easing = getComputedStyle(stack).getPropertyValue('--sb-nav-easing').trim();
+  return easing.length > 0 ? easing : NAV_EASING;
+}
+
+/** Put a clone at `rect` in the overlay (the screen's coordinates), free of what its own layout gave it. */
+function place(clone: HTMLElement, rect: Rect): void {
+  const s = clone.style;
+  s.position = 'absolute';
+  s.left = `${rect.x}px`;
+  s.top = `${rect.y}px`;
+  s.width = `${rect.width}px`;
+  s.height = `${rect.height}px`;
+  s.margin = '0';
+  s.maxWidth = 'none';
+}
+
+const px = (value: number): string => `${value}px`;
+
+// ---------------------------------------------------------------------------
+// The morph
+// ---------------------------------------------------------------------------
+
+export interface BarMorphOptions {
+  /** The slide's duration in ms (reduced motion shortens it as the stylesheet does). */
+  duration: number;
+  /** A swipe back: built paused at its start, moved by `scrub`, then played on (`finish`) or back (`cancel`). */
+  interactive: boolean;
+  /** Called once the morph has dropped itself. */
+  onDone?: () => void;
+}
+
+export class BarMorph {
+  /** The screen (or its pop clone) whose bar leaves. */
+  from: HTMLElement;
+  /** The screen whose bar arrives. */
+  readonly to: HTMLElement;
+  private readonly overlay: HTMLElement;
+  private readonly animations: globalThis.Animation[] = [];
+  /** The screens' own parts, hidden until the morph is done. */
+  private readonly held = new Set<HTMLElement>();
+  private readonly duration: number;
+  private readonly onDone: (() => void) | undefined;
+  /** Paused and scrubbed by a drag (until the release plays it). */
+  private interactive: boolean;
+  /** Where a drag has it, 0 to 1. */
+  private progress = 0;
+  private disposed = false;
+  private timer: number | null = null;
+
+  /**
+   * Builds the morph of the bar of `from` into the bar of `to`, both screens
+   * of `stack`, from where their parts are now, and starts it (or holds it
+   * for a drag); null when neither screen has a bar part.
+   */
+  static begin(stack: HTMLElement, from: HTMLElement, to: HTMLElement, options: BarMorphOptions): BarMorph | null {
+    const steps = planBarMorph(partsOf(from), partsOf(to));
+    if (steps.length === 0) return null;
+    return new BarMorph(stack, from, to, steps, options);
+  }
+
+  private constructor(stack: HTMLElement, from: HTMLElement, to: HTMLElement, steps: readonly MorphStep<ScreenPart>[], options: BarMorphOptions) {
+    this.from = from;
+    this.to = to;
+    this.onDone = options.onDone;
+    this.interactive = options.interactive;
+    this.duration = reducedMotion() ? REDUCED_MOTION_MS : options.duration;
+    const easing = options.interactive ? 'linear' : navEasing(stack);
+    const overlay = document.createElement('div');
+    overlay.className = BAR_MORPH_CLASS;
+    overlay.setAttribute('aria-hidden', 'true');
+    overlay.inert = true;
+    // Over the arriving screen's box in the stack (its slide aside).
+    place(overlay, { x: to.offsetLeft, y: to.offsetTop, width: to.offsetWidth, height: to.offsetHeight });
+    for (const step of steps) {
+      const clone = ghostClone(step.part.el);
+      clone.removeAttribute(BAR_MORPH_ATTR);
+      if (step.part.kind === 'item') clone.dataset['sbBarItem'] = step.part.placement ?? '';
+      place(clone, step.to);
+      const animation = this.animate(clone, step, easing);
+      if (animation) this.animations.push(animation);
+      overlay.append(clone);
+    }
+    this.overlay = overlay;
+    for (const el of [...barElementsOf(from), ...barElementsOf(to)]) this.hold(el);
+    stack.append(overlay);
+    if (!options.interactive) this.settle();
+  }
+
+  /** The clone's tween: its box from the leaving part's to the arriving part's, and the bar's item transition in or out. */
+  private animate(clone: HTMLElement, step: MorphStep<ScreenPart>, easing: string): globalThis.Animation | null {
+    const start: Keyframe = {};
+    const end: Keyframe = {};
+    if (step.phase === 'move') {
+      start['left'] = px(step.from.x);
+      start['top'] = px(step.from.y);
+      start['width'] = px(step.from.width);
+      start['height'] = px(step.from.height);
+      end['left'] = px(step.to.x);
+      end['top'] = px(step.to.y);
+      end['width'] = px(step.to.width);
+      end['height'] = px(step.to.height);
+    }
+    if (step.phase === 'enter' || step.phase === 'exit') {
+      const gone = transitionStart(TOOLBAR_TRANSITION, step.phase === 'exit');
+      const own = clone.style.transform;
+      const goneTransform = gone.transform === undefined ? own || 'none' : own ? `${own} ${gone.transform}` : gone.transform;
+      const [away, here] = step.phase === 'enter' ? [start, end] : [end, start];
+      away['opacity'] = gone.opacity ?? 0;
+      away['transform'] = goneTransform;
+      here['opacity'] = 1;
+      here['transform'] = own || 'none';
+    }
+    if (Object.keys(start).length === 0) return null;
+    const animation = clone.animate([start, end], { duration: this.duration, easing, fill: 'both' });
+    if (this.interactive) {
+      animation.pause();
+      animation.currentTime = 0;
+    }
+    return animation;
+  }
+
+  private hold(el: HTMLElement): void {
+    el.setAttribute(BAR_MORPH_ATTR, '');
+    this.held.add(el);
+  }
+
+  /** A drag has the slide at `progress` (0: as before, 1: done): the morph follows. */
+  scrub(progress: number): void {
+    if (this.disposed || !this.interactive) return;
+    this.progress = Math.min(1, Math.max(0, progress));
+    const time = this.progress * this.duration;
+    for (const animation of this.animations) animation.currentTime = time;
+  }
+
+  /**
+   * The screen the drag was popping has left, `clone` sliding out in its
+   * place (renderer.ts `animatePop`): the clone's bar parts hide too, and the
+   * rest of the morph plays over the slide's duration, as the screens move.
+   */
+  popped(clone: HTMLElement): void {
+    if (this.disposed) return;
+    for (const el of barElementsOf(clone)) this.hold(el);
+    this.from = clone;
+    this.finish();
+  }
+
+  /** Plays the rest of a scrubbed morph forward over the slide's duration. */
+  finish(): void {
+    if (this.disposed || !this.interactive) return;
+    this.play(1 - this.progress);
+  }
+
+  /** Plays a scrubbed morph back to its start over the slide's duration (the snap back), then drops it. */
+  cancel(): void {
+    if (this.disposed || !this.interactive) return;
+    this.play(-this.progress);
+  }
+
+  /** The rest of the morph at `rate` (negative: back to the start), taking the slide's duration. */
+  private play(rate: number): void {
+    this.interactive = false;
+    if (Math.abs(rate) <= PROGRESS_EPSILON) {
+      this.dispose();
+      return;
+    }
+    for (const animation of this.animations) {
+      animation.playbackRate = rate;
+      animation.play();
+    }
+    this.settle();
+  }
+
+  /** Drops the morph once its tweens have ended (or after the slide's duration, with none, or should they never end). */
+  private settle(): void {
+    const done = (): void => this.dispose();
+    if (this.animations.length > 0) Promise.allSettled(this.animations.map((animation) => animation.finished)).then(done, done);
+    this.timer = window.setTimeout(done, this.duration + 100);
+  }
+
+  /** Removes the overlay and shows the screens' own parts again. */
+  dispose(): void {
+    if (this.disposed) return;
+    this.disposed = true;
+    if (this.timer !== null) {
+      window.clearTimeout(this.timer);
+      this.timer = null;
+    }
+    for (const animation of this.animations) animation.cancel();
+    this.overlay.remove();
+    for (const el of this.held) el.removeAttribute(BAR_MORPH_ATTR);
+    this.held.clear();
+    this.onDone?.();
+  }
+}

package/src/interaction.ts

@@ -102,6 +102,14 @@ export interface InteractionHost {
   /** Whether the popover of element `id` is open. */
   isMenuOpen(id: ElementId): boolean;
   closeMenu(): void;
+  /**
+   * iOS 26 (src/barMorph.ts): a swipe back of `screen` has started, with
+   * `below` about to show: its bar morphs into the screen below's with the
+   * drag (`barMorphScrub`, 0 to 1), and back should the screen snap back.
+   */
+  barMorphBegin(screen: HTMLElement, below: HTMLElement): void;
+  barMorphScrub(screen: HTMLElement, progress: number): void;
+  barMorphSnapBack(screen: HTMLElement): void;
 }
 
 interface Sample {
@@ -564,6 +572,7 @@ export class InteractionController {
           this.host.revealScreen(c.below);
           c.below.style.transition = 'none';
           c.below.style.visibility = 'visible';
+          this.host.barMorphBegin(c.screen, c.below);
         }
         this.swipeBack = { screen: c.screen, below: c.below, completing: false, timer: null };
         break;
@@ -626,6 +635,7 @@ export class InteractionController {
         if (c.below) {
           c.below.style.transform = `translateX(${-30 * (1 - progress)}%)`;
           c.below.style.setProperty('--sb-nav-dim', String(round2(0.12 * (1 - progress))));
+          this.host.barMorphScrub(c.screen, progress);
         }
         return;
       }
@@ -1187,6 +1197,7 @@ export class InteractionController {
     delete screen.dataset['sbSwipeDragging'];
     delete screen.dataset['sbSwipePop'];
     screen.style.removeProperty('--sb-nav-from');
+    this.host.barMorphSnapBack(screen);
     // Dropping the inline transforms lets the stylesheet's 0.4 s transition
     // carry each screen from where it is to its resting transform.
     void screen.offsetWidth;

package/src/layout/engine.ts

@@ -162,6 +162,10 @@ const NAV_BAR_HEIGHT = 44;
 const NAV_BAR_INLINE_BOTTOM = 10;
 // iOS 26: the large title's row is 62 (52 before).
 const LARGE_TITLE_HEIGHT = 62;
+// iOS 26: `.largeTitle` toolbar items take the title's place 10 below the
+// bar's 44 row, in a row exactly their height: the content starts right
+// under them (measured in the iOS 26 simulator, Native's LargeTitleTests).
+const LARGE_TITLE_ITEM_TOP = 10;
 const SHEET_GRABBER_ROW = 20;
 const SHEET_GRABBER: Size = { width: 36, height: 5 };
 const SHEET_GRABBER_TOP = 8;
@@ -3390,8 +3394,9 @@ 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); `bottom` toolbars float their items on glass in a 48 row 28
+   * title, or 10 and the height of its `.largeTitle` items); a Phase 6
+   * `searchfield` is a capsule floating above the bottom (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 in the 44 row: adjacent `leading` (or `trailing`)
@@ -3403,6 +3408,18 @@ export class LayoutPass {
    * inline title (`chrome.title`) is centered and truncated to the room the
    * bar items leave.
    */
+  /** The tallest `.largeTitle` toolbar item at its ideal size, or null when the screen has none (the text title shows). */
+  private largeTitleItemsHeight(toolbars: readonly LayoutNode[], cctx: Context, width: number): number | null {
+    let height: number | null = null;
+    for (const toolbar of toolbars) {
+      if (str(toolbar.props['placement']) !== 'largeTitle' || str(toolbar.props['spacer']) !== null) continue;
+      const itemCtx = this.childContext(toolbar, cctx);
+      const room: Proposal = { width: Math.max(0, width - 2 * NAV_ITEM_MARGIN), height: null };
+      for (const item of toolbar.children) height = Math.max(height ?? 0, this.measure(item, itemCtx, room).height);
+    }
+    return height;
+  }
+
   private placeNavScreen(node: LayoutNode, cctx: Context, x: number, y: number, size: Size): void {
     const { safeArea, screen, dynamicTypeSize } = this.env;
     const statusBar = y <= 0 ? safeArea.top : (cctx.barInset ?? 0);
@@ -3410,10 +3427,12 @@ export class LayoutPass {
     const depth = num(node.props['depth']) ?? 0;
     const large = displayMode === 'large' || (displayMode === 'automatic' && depth === 0);
     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;
+    // `.largeTitle` items size the large title row; the text title is 62.
+    const titleItemsHeight = large ? this.largeTitleItemsHeight(parts.toolbars, cctx, size.width) : null;
+    const largeHeight = !large ? 0 : titleItemsHeight !== null ? LARGE_TITLE_ITEM_TOP + titleItemsHeight : LARGE_TITLE_HEIGHT;
     const bottomToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'bottom');
     const searchMargin = reachesBottom ? SEARCH_BOTTOM_MARGIN : SEARCH_BOTTOM_MARGIN_INSET;
     const bottomBarHeight = bottomToolbars.some((t) => !isSpacer(t))
@@ -3443,7 +3462,7 @@ export class LayoutPass {
       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 };
+    if (large) chrome['largeTitle'] = { x, y: y + barHeight, width: size.width, height: largeHeight };
     if (parts.search) {
       const marginH = searchOnTop ? SEARCH_FIELD_MARGIN_H : SEARCH_BOTTOM_MARGIN_H;
       chrome['searchField'] = {
@@ -3711,9 +3730,11 @@ export class LayoutPass {
       const itemCtx = this.childContext(toolbar, cctx);
       const room: Proposal = { width: Math.max(0, row.width - 2 * NAV_ITEM_MARGIN), height: null };
       let cursor = row.x + NAV_ITEM_MARGIN;
+      // The items' band: the row below its 10 top, as tall as the tallest item.
+      const band = row.height - LARGE_TITLE_ITEM_TOP;
       for (const item of toolbar.children) {
         const itemSize = this.measure(item, itemCtx, room);
-        this.place(item, itemCtx, room, cursor, row.y + (row.height - itemSize.height) / 2);
+        this.place(item, itemCtx, room, cursor, row.y + LARGE_TITLE_ITEM_TOP + (band - itemSize.height) / 2);
         cursor += itemSize.width + NAV_ITEM_SPACING;
       }
       this.setFrame(toolbar, row.x, row.y, { width: row.width, height: row.height });

package/src/layoutDom.ts

@@ -944,6 +944,9 @@ function applyChrome(
       applyChartChrome(el, node, result, box);
       return;
     case 'listrow':
+      // A selectable or editable row is the list's row: the engine reads a
+      // badge through it and puts the badge's rect on it, so it draws it.
+      applyBadge(result, node, el, box);
       // Phase 8: the edit-mode control (selection circle / minus) at the
       // engine's `editControl` rect and the reorder grip at `reorderControl`;
       // hidden when the list is not editing.

package/src/renderer.ts

@@ -59,6 +59,7 @@ import { createGaugeRing, isCircularGauge, updateGaugeRing } from './gaugeRing';
 import { bitmapStore, showBitmap } from './bitmaps';
 import { clearRichText, runTemplates } from './richText';
 import { applyLayout, setTabHidden, type BoxChange } from './layoutDom';
+import { BarMorph } from './barMorph';
 import { ghostClone } from './ghost';
 import { ExternalDrops } from './dragDrop';
 import { InteractionController, type InteractionHost } from './interaction';
@@ -897,6 +898,13 @@ export class Renderer {
       revealScreen: (screen) => this.revealScreen(screen),
       isMenuOpen: (id) => this.menu?.anchorId === id,
       closeMenu: () => this.closeMenu(),
+      // iOS 26: the bar morphs with a swipe back (src/barMorph.ts).
+      barMorphBegin: (screen, below) => {
+        const stack = screen.closest<HTMLElement>('.sb-navstack');
+        if (stack) this.beginBarMorph(stack, screen, below, true);
+      },
+      barMorphScrub: (screen, progress) => this.swipeBackMorphOf(screen)?.scrub(progress),
+      barMorphSnapBack: (screen) => this.swipeBackMorphOf(screen)?.cancel(),
     };
     this.interaction = new InteractionController(host);
     // iOS 26: the glass under a pressed bar button swells and springs back (src/press.ts).
@@ -1070,6 +1078,7 @@ export class Renderer {
           this.root.dispatchEvent(new CustomEvent('sb:precommit', { detail: { commits: this.commits + 1 } }));
           const changes = this.layout();
           this.animator.commitNextFrame(pass, op.animation, changes);
+          this.beginBarMorphsNextFrame();
           this.commits += 1;
           this.syncFocus();
           this.performScrolls(op.animation != null);
@@ -1153,6 +1162,8 @@ export class Renderer {
   /** Detach everything under the root and forget all non-root elements. */
   reset(): void {
     stopVideos(this.root);
+    for (const morph of Array.from(this.barMorphs.values())) morph.dispose();
+    this.pendingBarMorphs = [];
     this.root.replaceChildren();
     this.elements.clear();
     this.elements.set(ROOT_ID, this.root);
@@ -1316,6 +1327,55 @@ export class Renderer {
    */
   private instantPops = new Set<ElementId>();
 
+  /**
+   * iOS 26: one bar through a push or pop (src/barMorph.ts). The morph in
+   * flight on each stack, and the pushes and pops this pass started, whose
+   * morphs begin once the commit's layout has placed the screens.
+   */
+  private readonly barMorphs = new Map<HTMLElement, BarMorph>();
+  private pendingBarMorphs: { stack: HTMLElement; from: HTMLElement; to: HTMLElement }[] = [];
+
+  /** Begins the morph of the bar of `from` into the bar of `to` on `stack`, in place of any in flight there. */
+  private beginBarMorph(stack: HTMLElement, from: HTMLElement, to: HTMLElement, interactive: boolean): BarMorph | null {
+    this.barMorphs.get(stack)?.dispose();
+    if (!from.isConnected || !to.isConnected) return null;
+    // (a push or pop that another in the same pass overtook: the later one's morph)
+    if (!interactive && to.dataset['sbNavPosition'] !== 'top') return null;
+    const morph = BarMorph.begin(stack, from, to, {
+      duration: NAV_TRANSITION_MS,
+      interactive,
+      onDone: () => {
+        if (this.barMorphs.get(stack) === morph) this.barMorphs.delete(stack);
+      },
+    });
+    if (morph) this.barMorphs.set(stack, morph);
+    return morph;
+  }
+
+  /** The morph a swipe back of `screen` drives, if one is in flight. */
+  private swipeBackMorphOf(screen: HTMLElement): BarMorph | null {
+    const stack = screen.closest<HTMLElement>('.sb-navstack');
+    const morph = stack ? this.barMorphs.get(stack) : undefined;
+    return morph && morph.from === screen ? morph : null;
+  }
+
+  /**
+   * Begins the morphs of this pass's pushes and pops in the frame their
+   * slides start, after the Animator's commit (`commitNextFrame`), from where
+   * the layout has put the bars' parts; the last push or pop of a stack in
+   * the pass is the one shown.
+   */
+  private beginBarMorphsNextFrame(): void {
+    if (this.pendingBarMorphs.length === 0) return;
+    const pending = new Map(this.pendingBarMorphs.map((entry) => [entry.stack, entry]));
+    this.pendingBarMorphs = [];
+    const begin = (): void => {
+      for (const { stack, from, to } of pending.values()) this.beginBarMorph(stack, from, to, false);
+    };
+    if (typeof requestAnimationFrame !== 'function' || (typeof document !== 'undefined' && document.hidden)) begin();
+    else requestAnimationFrame(begin);
+  }
+
   /**
    * The next removal of screen `id` is a pop the browser has already shown
    * (its back swipe or button, `browserHistory.ts`): the screen goes without
@@ -2186,7 +2246,14 @@ export class Renderer {
       this.engine?.invalidateDown(node);
     }
     if (el.classList.contains('sb-navscreen') && parent.classList.contains('sb-navstack')) {
-      if (container.children.length > 1 && previousParent !== container) animatePush(el);
+      if (container.children.length > 1 && previousParent !== container) {
+        animatePush(el);
+        // iOS 26: the bar of the screen it covers morphs into its bar (at commit).
+        const covered = el.previousElementSibling;
+        if (covered instanceof HTMLElement && covered.classList.contains('sb-navscreen')) {
+          this.pendingBarMorphs.push({ stack: parent, from: covered, to: el });
+        }
+      }
       refreshNavStack(parent);
     }
     if (previousParent) {
@@ -2233,6 +2300,10 @@ export class Renderer {
     const parent = el.parentElement;
     // Clones of what left this subtree earlier (a bar group's, src/animation.ts) go with it.
     this.animator.dropExitClonesIn(el);
+    // So does the bar morph of a stack in it (its overlay is in the stack).
+    for (const [stack, morph] of this.barMorphs) {
+      if (stack === el || el.contains(stack)) morph.dispose();
+    }
     const stack = parent?.classList.contains('sb-navstack-screens')
       ? parent.parentElement
       : null;
@@ -2240,9 +2311,19 @@ export class Renderer {
       // Phase 8: after a swipe back the clone starts where the drag left the
       // screen (`--sb-nav-from`), and the screen below is handed back to the
       // stylesheet so it finishes its slide to 0 as the new top screen.
+      const uncovered = el.previousElementSibling as HTMLElement;
       this.interaction.screenRemoved(el);
-      if (this.instantPops.delete(id)) settleWithoutTransition(stack);
-      else animatePop(stack, el);
+      const morph = this.barMorphs.get(stack);
+      if (this.instantPops.delete(id)) {
+        settleWithoutTransition(stack);
+        morph?.dispose();
+      } else {
+        const clone = animatePop(stack, el);
+        // iOS 26: its bar morphs into the uncovered screen's: on from where a
+        // swipe back has it, else from the start, at commit.
+        if (morph && morph.from === el) morph.popped(clone);
+        else this.pendingBarMorphs.push({ stack, from: clone, to: uncovered });
+      }
     }
     const isSheet = el.classList.contains('sb-sheet');
     if (isSheet && parent) animateSheetOut(parent, el);
@@ -3074,13 +3155,14 @@ function settleWithoutTransition(stack: HTMLElement): void {
   requestAnimationFrame(() => requestAnimationFrame(() => delete stack.dataset['sbInstant']));
 }
 
-function animatePop(stack: HTMLElement, screen: HTMLElement): void {
+function animatePop(stack: HTMLElement, screen: HTMLElement): HTMLElement {
   const clone = ghostClone(screen);
   clone.removeAttribute('inert');
   clone.setAttribute('aria-hidden', 'true');
   clone.classList.add('sb-navscreen--pop');
   stack.append(clone);
   afterAnimation(clone, NAV_TRANSITION_MS, () => clone.remove());
+  return clone;
 }
 
 // ---------------------------------------------------------------------------

package/src/styles.css

@@ -1100,6 +1100,30 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   }
 }
 
+/* iOS 26: one bar through a push or pop (src/barMorph.ts). The morph is an
+   overlay on the stack, above the screens and the pop clone, holding clones
+   of both screens' bar parts (the capsules under the circles and the items)
+   while the screens slide under it; the parts themselves are hidden for the
+   slide. It takes no input. */
+.sb-navbar-morph {
+  position: absolute;
+  z-index: 3;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Its clones of the circles and the items go over the capsule clones (z 2,
+   as in a screen), as their toolbars (z 3) put them there. */
+.sb-navbar-morph > .sb-navbar-back,
+.sb-navbar-morph > .sb-navbar-more,
+.sb-navbar-morph > [data-sb-bar-item] {
+  z-index: 3;
+}
+
+[data-sb-bar-morph] {
+  visibility: hidden;
+}
+
 /* Navigation bar: the engine's `bar` rect (status bar + 44); the renderer
    pads the status bar height so the 44px row sits at the bottom. */
 .sb-navbar {
@@ -2597,13 +2621,16 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   }
 }
 
-/* The exit clone of a bar item (src/animation.ts) is drawn as its toolbar
+/* The exit clone of a bar item (src/animation.ts), and an item's clone in
+   the bar morph of a push or pop (src/barMorph.ts), is drawn as its toolbar
    drew it: the bar's symbol size and weight, the label color. */
-.sb-exit-clone[data-sb-bar-item] {
+.sb-exit-clone[data-sb-bar-item],
+.sb-navbar-morph [data-sb-bar-item] {
   --sb-color-accent: var(--sb-color-primary);
 }
 
-.sb-exit-clone[data-sb-bar-item] .sb-image > svg {
+.sb-exit-clone[data-sb-bar-item] .sb-image > svg,
+.sb-navbar-morph [data-sb-bar-item] .sb-image > svg {
   width: 1.57em;
   height: 1.57em;
   stroke-width: 1.85;
@@ -3037,9 +3064,9 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: auto;
 }
 
-:is([data-sb-hidden], [data-sb-disabled], [data-sb-hit-testing="false"], .sb-navscreen--pop, .sb-exit-clone, .sb-sheet--out, .sb-alert--out, .sb-tab[data-sb-tab-hidden]) [data-sb-kind],
-:is([data-sb-hidden], [data-sb-disabled], [data-sb-hit-testing="false"], .sb-navscreen--pop, .sb-exit-clone, .sb-sheet--out, .sb-alert--out, .sb-tab[data-sb-tab-hidden]) .sb-navbar > *,
-:is([data-sb-hidden], [data-sb-disabled], [data-sb-hit-testing="false"], .sb-navscreen--pop, .sb-exit-clone, .sb-sheet--out, .sb-alert--out, .sb-tab[data-sb-tab-hidden]) .sb-image[data-sb-web] > img {
+:is([data-sb-hidden], [data-sb-disabled], [data-sb-hit-testing="false"], .sb-navscreen--pop, .sb-exit-clone, .sb-navbar-morph, .sb-sheet--out, .sb-alert--out, .sb-tab[data-sb-tab-hidden]) [data-sb-kind],
+:is([data-sb-hidden], [data-sb-disabled], [data-sb-hit-testing="false"], .sb-navscreen--pop, .sb-exit-clone, .sb-navbar-morph, .sb-sheet--out, .sb-alert--out, .sb-tab[data-sb-tab-hidden]) .sb-navbar > *,
+:is([data-sb-hidden], [data-sb-disabled], [data-sb-hit-testing="false"], .sb-navscreen--pop, .sb-exit-clone, .sb-navbar-morph, .sb-sheet--out, .sb-alert--out, .sb-tab[data-sb-tab-hidden]) .sb-image[data-sb-web] > img {
   pointer-events: none !important;
 }