@swiftbrowser/web 0.9.12 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.9.12",
+  "version": "0.10.0",
   "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/browserHistory.ts

@@ -11,7 +11,11 @@
  * the back button and the scrim send, so the app's own state stays the
  * source of truth; the page's URL is never touched, and an app that maps
  * screens to paths should set them with `replaceState` on the entry the
- * renderer made.
+ * renderer made. When the app pops on its own, the renderer's `history.go`
+ * back is asynchronous and the app's `replaceState` for the screen it shows
+ * now runs before the move lands, on the entry being left; the renderer
+ * applies that URL again to the entry it arrives at, so the address bar
+ * follows the bar's back button as it follows the browser's.
  *
  * A two-column split view pushes nothing when its sidebar's selection
  * changes, so that is an entry of its own: choosing another sidebar row
@@ -24,6 +28,12 @@
  * pen: the browser's edge swipe (Safari's, Android's back gesture) is the
  * swipe back, and it lands here as a `popstate`. A mouse drag from the edge
  * still pops through the renderer, since no browser turns one into history.
+ *
+ * Every `popstate` the browser makes also starts the renderer's repaint
+ * keep-alive (`Renderer.keepRepainting`): Safari's swipe shows a snapshot of
+ * the entry and, once its animation ends, hides the live page until a new
+ * frame is committed, so a pop that finished animating by then would stay
+ * under the snapshot for Safari's 3 s watchdog, taking the touches unseen.
  */
 import type { Renderer } from './renderer';
 
@@ -60,6 +70,13 @@ export class BrowserHistory {
   /** A `popstate` asked for the entry's sidebar selection: the change it brings is recorded, not pushed. */
   private restoringSelection = false;
   private enabled = false;
+  /** The page's own `replaceState`, while ours stands in for it. */
+  private pageReplaceState: History['replaceState'] | null = null;
+  private pageReplaceStateWasOwn = false;
+  /** A URL the page set while our own `history.go` was on its way: meant for the entry it lands on. */
+  private landingUrl: string | URL | null = null;
+  /** A level appeared while our own `history.go` was on its way: its entry is pushed once the move lands. */
+  private syncOnArrival = false;
 
   constructor(
     private readonly renderer: Renderer,
@@ -75,10 +92,15 @@ export class BrowserHistory {
     this.enabled = true;
     const current = stateOf(this.win.history.state);
     if (!current) this.win.history.replaceState({ ...(this.win.history.state ?? {}), ...this.entry(0, this.selection()) }, '');
+    this.watchReplaceState();
     this.renderer.interaction.nativeBackGesture = true;
     this.root.addEventListener('sb:commit', this.onCommit);
     this.win.addEventListener('popstate', this.onPopState);
-    this.sync();
+    // Enabled before the first commit (a mount, or a remount such as React's
+    // StrictMode makes in development) the screen is not drawn yet: fewer
+    // levels than the entry records is not the app popping, so only the
+    // levels already shown are pushed here and the first commit settles the rest.
+    this.sync(true);
   }
 
   dispose(): void {
@@ -87,10 +109,44 @@ export class BrowserHistory {
     this.renderer.interaction.nativeBackGesture = false;
     if (this.movingTimer) clearTimeout(this.movingTimer);
     this.movingTo = null;
+    this.landingUrl = null;
+    this.syncOnArrival = false;
+    this.unwatchReplaceState();
     this.root.removeEventListener('sb:commit', this.onCommit);
     this.win.removeEventListener('popstate', this.onPopState);
   }
 
+  /**
+   * Stands in for the page's `replaceState`: it still runs at once, and a
+   * URL given while our own `go` is on its way is remembered for the entry
+   * the move lands on.
+   */
+  private watchReplaceState(): void {
+    const history = this.win.history;
+    const original = history.replaceState;
+    this.pageReplaceState = original;
+    this.pageReplaceStateWasOwn = Object.prototype.hasOwnProperty.call(history, 'replaceState');
+    history.replaceState = (data: unknown, unused: string, url?: string | URL | null): void => {
+      if (this.movingTo !== null && url !== undefined && url !== null) this.landingUrl = url;
+      original.call(history, data, unused, url);
+    };
+  }
+
+  private unwatchReplaceState(): void {
+    const original = this.pageReplaceState;
+    if (!original) return;
+    const history = this.win.history;
+    // A browser's is the prototype's: removing ours uncovers it. A stand-in's own property is put back.
+    if (this.pageReplaceStateWasOwn) history.replaceState = original;
+    else delete (history as Partial<History>).replaceState;
+    this.pageReplaceState = null;
+  }
+
+  /** `replaceState` as the page had it, for our own entries. */
+  private replaceEntry(data: unknown, url?: string | URL | null): void {
+    (this.pageReplaceState ?? this.win.history.replaceState).call(this.win.history, data, '', url);
+  }
+
   /** The levels above the base the app shows now: sheets, plus pushed screens in each visible stack of the top layer. */
   depth(): number {
     const sheets = this.sheets();
@@ -192,7 +248,13 @@ export class BrowserHistory {
     this.movingTimer = setTimeout(() => {
       if (this.movingTo === null) return;
       this.movingTo = null;
+      // No move (a go past the ends fires nothing): the URL already sits on the entry at hand.
+      this.landingUrl = null;
       this.ignorePops = Math.max(0, this.ignorePops - 1);
+      if (this.syncOnArrival) {
+        this.syncOnArrival = false;
+        this.sync();
+      }
     }, 1000);
     this.win.history.go(delta);
   }
@@ -201,12 +263,21 @@ export class BrowserHistory {
     this.movingTo = null;
     if (this.movingTimer) clearTimeout(this.movingTimer);
     this.movingTimer = null;
+    // The page's URL for what it shows now, set on the entry we left: it belongs here.
+    const url = this.landingUrl;
+    this.landingUrl = null;
+    if (url !== null) this.replaceEntry(this.win.history.state, url);
+    // Levels that appeared during the move get their entries now.
+    if (this.syncOnArrival) {
+      this.syncOnArrival = false;
+      this.sync();
+    }
   }
 
   private readonly onCommit = (): void => this.sync();
 
-  /** After a commit: new levels get entries; levels the app dismissed itself take the history back with them; a moved sidebar selection is an entry too. */
-  sync(): void {
+  /** After a commit: new levels get entries; levels the app dismissed itself take the history back with them; a moved sidebar selection is an entry too. `enabling`: nothing is drawn yet, so no level is taken as dismissed. */
+  sync(enabling = false): void {
     if (!this.enabled) return;
     const depth = this.depth();
     const recorded = this.recorded();
@@ -220,8 +291,15 @@ export class BrowserHistory {
       return;
     }
     if (depth > recorded) {
+      // Under our own pending `go`, a push would land relative to wherever the browser is when it runs (and
+      // Chrome moves back past it), leaving the app on an entry below what it shows: push once the move lands.
+      if (this.movingTo !== null) {
+        this.syncOnArrival = true;
+        return;
+      }
       for (let level = recorded + 1; level <= depth; level++) this.win.history.pushState(this.entry(level, selection), '');
     } else if (depth < recorded) {
+      if (enabling) return;
       // The app popped or dismissed on its own (back button, swipe, code): leave those entries.
       this.go(depth - recorded, depth);
     } else if (this.movingTo === null && selection !== this.recordedSelection()) {
@@ -231,7 +309,7 @@ export class BrowserHistory {
       const history = this.win.history;
       if (this.restoringSelection || !this.recordedSelection()) {
         const { sbSelection: _, ...rest } = (history.state ?? {}) as Partial<HistoryState>;
-        history.replaceState({ ...rest, ...this.entry(depth, selection) }, '');
+        this.replaceEntry({ ...rest, ...this.entry(depth, selection) });
       } else history.pushState(this.entry(depth, selection), '');
     }
     this.restoringSelection = false;
@@ -245,6 +323,8 @@ export class BrowserHistory {
     }
     const target = stateOf(event.state);
     if (!target) return; // an entry of the page's own (before the base, or the app's router): not ours
+    // The browser moved on its own (a swipe, a button): keep painting past its transition.
+    this.renderer.keepRepainting();
     const depth = this.depth();
     if (target.sbDepth < depth) {
       // Back: dismiss one level now, the rest as each commit lands.

package/src/largeTitle.ts

@@ -42,6 +42,20 @@ export function largeTitleOf(screen: HTMLElement): HTMLElement | null {
   return title;
 }
 
+/**
+ * The large title's text: a span of its own, as the title element also
+ * holds a `.largeTitle` toolbar (which then hides the text, styles.css).
+ */
+export function largeTitleTextOf(title: HTMLElement): HTMLElement {
+  let text = title.querySelector<HTMLElement>(':scope > .sb-navbar-large-title-text');
+  if (!text) {
+    text = document.createElement('span');
+    text.className = 'sb-navbar-large-title-text';
+    title.prepend(text);
+  }
+  return text;
+}
+
 /** Whether a screen's large title currently scrolls inside one of its scroll views. */
 export function largeTitleScrolls(screen: HTMLElement, title: HTMLElement): boolean {
   return title.parentElement !== null && !title.parentElement.classList.contains('sb-navscreen-body') && screen.contains(title);

package/src/layout/engine.ts

@@ -85,6 +85,8 @@ export interface Context {
   imageScale: number;
   /** Phase 7: true inside the sidebar column of a `navsplit` (a selected `navlink` row drops its chevron there). */
   splitSidebar: boolean;
+  /** Inside a leading or trailing item of a navigation bar (a segmented picker there is the bar's own capsule). */
+  navBarItem?: boolean;
   /** Rows of a `sidebar`-style list (iPadOS): its links have no chevron. */
   sidebarList?: boolean;
   /**
@@ -219,6 +221,17 @@ const TAB_BAR_ITEM_INSET = 4;
 const PICKER_SEGMENTED_HEIGHT = 32;
 const PICKER_SEGMENT_PAD = 20;
 const PICKER_SEGMENT_FONT_SIZE = 13;
+// iOS 26, a segmented picker in a navigation bar item (measured in the
+// simulator, Examples/Fidelity `topbarsegmented`, with the item's shared
+// glass hidden): the control is a 44-tall glass capsule itself, no track;
+// the selected segment a 36-tall gray capsule inset 4 (no shadow); labels
+// 15 regular; segments of equal width, the widest label and 21 either side.
+// The capsule keeps 4 clear of the bar's other capsules beyond their usual
+// 12 (it sits 16 from the next one).
+const BAR_SEGMENTED_FONT_SIZE = 15;
+const BAR_SEGMENT_PAD = 42;
+const BAR_SEGMENTED_INSET = 4;
+const BAR_SEGMENTED_MARGIN = 4;
 const PICKER_MENU_ROW_HEIGHT = 44;
 const PICKER_MENU_HEIGHT = 34;
 /** `chevron.up.chevron.down` glyph width plus the gap to the value text. */
@@ -290,6 +303,7 @@ function isSymbolItem(item: LayoutNode): boolean {
 
 /** A bar item's slot in its glass capsule. */
 function navSlot(item: LayoutNode, width: number): number {
+  if (isSegmentedItem(item)) return width + 2 * BAR_SEGMENTED_MARGIN;
   if (isSymbolItem(item) && width <= NAV_GLASS_SIZE) return NAV_GLASS_SIZE;
   return Math.max(NAV_GLASS_SIZE, width + 2 * NAV_GLASS_PAD_H);
 }
@@ -521,6 +535,12 @@ function ignoresKeyboard(node: LayoutNode): boolean {
 }
 
 /** The element under a chain of `styled` wrappers. */
+/** A segmented picker as a navigation bar item (under its styled wrappers): it is a capsule of its own. */
+function isSegmentedItem(item: LayoutNode): boolean {
+  const inner = unwrapStyled(item);
+  return inner.kind === 'picker' && str(inner.props['style']) === 'segmented';
+}
+
 function unwrapStyled(node: LayoutNode): LayoutNode {
   let current = node;
   while (current.kind === 'styled' && current.children.length === 1) {
@@ -1131,6 +1151,8 @@ interface PickerPlan {
   valueWidth: number;
   /** Inline style: whether a label row precedes the options. */
   labelRow: boolean;
+  /** Segmented style in a navigation bar item: the bar's glass capsule, its segments inset. */
+  bar?: boolean;
 }
 
 // Phase 6 plans.
@@ -1550,6 +1572,12 @@ export class LayoutPass {
         if (ctx.barAbove === undefined && ctx.stackAxis === null && !ctx.listRow) return ctx;
         return { ...ctx, barAbove: undefined, stackAxis: null, listRow: false };
       }
+      case 'toolbar': {
+        const placement = str(node.props['placement']);
+        const navBarItem = placement === 'leading' || placement === 'trailing';
+        if (ctx.stackAxis === null && !ctx.listRow && ctx.navBarItem === navBarItem) return ctx;
+        return { ...ctx, stackAxis: null, listRow: false, navBarItem };
+      }
       case 'gesture':
       case 'swipeactions':
       case 'contextmenu':
@@ -2014,6 +2042,23 @@ export class LayoutPass {
           labelRow,
         };
       }
+      if (style === 'segmented' && ctx.navBarItem) {
+        const font = makeFont('system', BAR_SEGMENTED_FONT_SIZE, 400);
+        let widest = 0;
+        for (const option of options) widest = Math.max(widest, this.measurer.measureWidth(option, font));
+        const natural = options.length * (widest + BAR_SEGMENT_PAD) + 2 * BAR_SEGMENTED_INSET;
+        return {
+          size: { width: finite(p.width) ? p.width : natural, height: NAV_GLASS_SIZE },
+          style: 'segmented',
+          font,
+          options,
+          selected,
+          labelWidth: 0,
+          valueWidth: 0,
+          labelRow: false,
+          bar: true,
+        };
+      }
       if (style === 'segmented') {
         const font = makeFont('system', PICKER_SEGMENT_FONT_SIZE, 600);
         let natural = 0;
@@ -2057,9 +2102,14 @@ export class LayoutPass {
     const chrome: Record<string, Rect> = { ...existing };
     if (plan.style === 'segmented') {
       const n = Math.max(1, plan.options.length);
-      const segmentWidth = size.width / n;
+      // In a bar the segments sit inside the capsule, inset all round; `bar` (the
+      // control's frame) tells the page to draw it as the bar draws it.
+      const inset = plan.bar ? BAR_SEGMENTED_INSET : 0;
+      if (plan.bar) chrome['bar'] = { x, y, width: size.width, height: size.height };
+      else delete chrome['bar'];
+      const segmentWidth = Math.max(0, size.width - 2 * inset) / n;
       for (let i = 0; i < plan.options.length; i++) {
-        chrome[`segment${i}`] = { x: x + i * segmentWidth, y, width: segmentWidth, height: size.height };
+        chrome[`segment${i}`] = { x: x + inset + i * segmentWidth, y: y + inset, width: segmentWidth, height: Math.max(0, size.height - 2 * inset) };
       }
     } else if (plan.style === 'inline') {
       // Rows span the list row when there is one (the hit area and the
@@ -3429,7 +3479,7 @@ export class LayoutPass {
     for (const spacer of parts.toolbars.filter(isSpacer)) this.hide(spacer, node);
     const barToolbars = parts.toolbars.filter((t) => {
       const placement = str(t.props['placement']);
-      return placement !== 'bottom' && placement !== 'secondary' && !isSpacer(t);
+      return placement !== 'bottom' && placement !== 'secondary' && placement !== 'largeTitle' && !isSpacer(t);
     });
     const secondaryToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'secondary' && !isSpacer(t));
     const groups: Group[] = barToolbars.map((toolbar) => {
@@ -3448,6 +3498,10 @@ export class LayoutPass {
     interface Run {
       placement: 'leading' | 'trailing';
       groups: Group[];
+      /** A segmented picker's own run: the glass is the control, inside its margin. */
+      segmented?: boolean;
+      /** `.sharedBackgroundVisibility(.hidden)`: a run of its own with no glass. */
+      bare?: boolean;
       /** The capsule's width: the slots 12 apart, a point past the end slots (none for a lone item). */
       width: number;
     }
@@ -3469,6 +3523,20 @@ export class LayoutPass {
       }
       const group = groupOf.get(toolbar);
       if (!group) continue;
+      // A segmented picker is a capsule of its own: it neither joins nor is joined (iOS 26
+      // draws its glass, and an item's shared glass around it would show as a second capsule).
+      if (toolbar.children.some(isSegmentedItem)) {
+        delete open[placement];
+        runs.push({ placement, groups: [group], width: 0, segmented: true });
+        continue;
+      }
+      // An item that hides the bar's shared glass stands alone, at its own width.
+      if (str(toolbar.props['sharedBackground']) === 'hidden') {
+        delete open[placement];
+        group.slots = group.sizes.map((s) => s.width);
+        runs.push({ placement, groups: [group], width: 0, bare: true });
+        continue;
+      }
       let run = open[placement];
       if (!run) {
         run = { placement, groups: [], width: 0 };
@@ -3564,8 +3632,13 @@ export class LayoutPass {
     // 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 };
+    // The capsules are numbered as they are drawn (the page reads them until one is missing).
+    const glassCount = { leading: 0, trailing: 0 };
+    const placeRun = (run: Run, startX: number): void => {
+      const margin = run.segmented ? BAR_SEGMENTED_MARGIN : 0;
+      if (!run.bare) {
+        chrome[`${run.placement}Glass${glassCount[run.placement]++}`] = { x: startX + margin, y: rowY, width: Math.max(0, run.width - 2 * margin), 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) {
@@ -3581,19 +3654,18 @@ export class LayoutPass {
         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++);
+      placeRun(run, leadingCursor);
       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);
+    for (const run of trailingRuns) {
+      placeRun(run, trailingCursor);
       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;
@@ -3624,6 +3696,28 @@ export class LayoutPass {
       if (!inlineSecondary.some((entry) => entry.toolbar === toolbar)) this.hide(toolbar, node);
       else for (const item of items) if (collapsedSecondary.some((entry) => entry.item === item)) this.hide(item, node);
     }
+    // `.largeTitle` items (iOS 26): in the large title row, in place of the
+    // title's text, from its leading margin and centered in the row; the
+    // renderer moves the toolbar into the title element, so they scroll with
+    // the content as the title does, and the bar shows the title once the row
+    // has gone under it. While the title is inline there is no row: hidden.
+    for (const toolbar of parts.toolbars) {
+      if (str(toolbar.props['placement']) !== 'largeTitle' || isSpacer(toolbar)) continue;
+      const row = chrome['largeTitle'];
+      if (!row) {
+        this.hide(toolbar, node);
+        continue;
+      }
+      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;
+      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);
+        cursor += itemSize.width + NAV_ITEM_SPACING;
+      }
+      this.setFrame(toolbar, row.x, row.y, { width: row.width, height: row.height });
+    }
     if (bottomBarHeight > 0) {
       this.placeBottomToolbars(bottomToolbars, cctx, chrome, x, y + size.height - bottomBarHeight, size.width);
     }

package/src/layoutDom.ts

@@ -41,7 +41,7 @@ import type { ShapeStyle } from './protocol';
 import { applyChartChrome } from './chartDom';
 import { bitmapLaidOut } from './bitmaps';
 import { drawRichText } from './richText';
-import { bindScrollUnderBar, largeTitleOf, largeTitleScrolls } from './largeTitle';
+import { bindScrollUnderBar, largeTitleOf, largeTitleScrolls, largeTitleTextOf } from './largeTitle';
 import { bindScrollEdgeBottom } from './scrollEdge';
 import { beginScrollSyncBatch, flushScrollSyncBatch, type ScrollExtent } from './scrollSync';
 import { BAR_GLASS_KIND, TOOLBAR_ANIMATION, TOOLBAR_TRANSITION, baseTiming, timingFor, transitionStart } from './animation';
@@ -122,7 +122,14 @@ function applyFrames(ctx: LayoutDomContext, result: LayoutResult, changes: BoxCh
   /** The element's box relative to the origin its `left`/`top` use; applied when it differs from the last pass's. */
   const applyBox = (id: number, node: LayoutNode, el: HTMLElement, frame: Rect): { box: Rect; moved: boolean; previous: Rect | null } => {
     const box = drawnBox(node, boxOf(ctx, result, node, frame));
-    const origin = node.kind === 'sheet' ? { x: 0, y: 0 } : isSectionSupplement(node) ? supplementOrigin(ctx, result, id) : originOf(ctx, result, ctx.parents.get(id) ?? ROOT_ID);
+    const origin =
+      node.kind === 'sheet'
+        ? { x: 0, y: 0 }
+        : isSectionSupplement(node)
+          ? supplementOrigin(ctx, result, id)
+          : isLargeTitleToolbar(node)
+            ? largeTitleToolbarOrigin(ctx, result, id)
+            : originOf(ctx, result, ctx.parents.get(id) ?? ROOT_ID);
     const relative = { x: box.x - origin.x, y: box.y - origin.y, width: box.width, height: box.height };
     const previous = ctx.boxes.get(id) ?? null;
     boxes.set(id, relative);
@@ -233,6 +240,18 @@ function supplementOrigin(ctx: LayoutDomContext, result: LayoutResult, id: numbe
   return boxOf(ctx, result, parent, frame);
 }
 
+/** A `.largeTitle` toolbar: the renderer keeps it in its screen's large title element. */
+export function isLargeTitleToolbar(node: LayoutNode): boolean {
+  return node.kind === 'toolbar' && node.props['placement'] === 'largeTitle';
+}
+
+/** A `.largeTitle` toolbar sits in the large title element, which is placed at the screen's `largeTitle` row. */
+function largeTitleToolbarOrigin(ctx: LayoutDomContext, result: LayoutResult, id: number): { x: number; y: number } {
+  const parentId = ctx.parents.get(id) ?? ROOT_ID;
+  const row = result.chrome.get(parentId)?.['largeTitle'];
+  return row ?? originOf(ctx, result, parentId);
+}
+
 /** Screen-coordinate origin that the children of `parentId` are positioned against. */
 export function originOf(ctx: LayoutDomContext, result: LayoutResult, parentId: number): { x: number; y: number } {
   if (parentId === ROOT_ID) return { x: 0, y: 0 };
@@ -837,7 +856,8 @@ function applyChrome(
           if (texts?.['largeTitle']) {
             setFont(largeTitle, texts['largeTitle'].font);
             const line = texts['largeTitle'].lines.join('\n');
-            if (largeTitle.textContent !== line) largeTitle.textContent = line;
+            const text = largeTitleTextOf(largeTitle);
+            if (text.textContent !== line) text.textContent = line;
           }
         } else {
           largeTitle.hidden = true;
@@ -933,6 +953,8 @@ function applyChrome(
     case 'picker': {
       setFont(el, result.fonts.get(node.id));
       if (node.props['style'] === 'segmented') {
+        // In a navigation bar item the control is the bar's glass capsule (engine `bar`).
+        el.toggleAttribute('data-sb-bar', chrome?.['bar'] !== undefined);
         placeChrome(el.querySelector<HTMLElement>(':scope > .sb-segment-track'), frame, box);
         const segments = el.querySelectorAll<HTMLElement>(':scope > .sb-segment');
         segments.forEach((segment, i) => placeChrome(segment, chrome?.[`segment${i}`], box));

package/src/protocol.ts

@@ -489,6 +489,8 @@ export type ButtonRole = 'destructive' | 'cancel' | null;
 export interface ButtonProps {
   style?: ButtonStyle;
   role?: ButtonRole;
+  /** An `EditButton`: the edit mode it shows ("Done" / "Edit") and flips. A native renderer draws the platform's edit button from it. */
+  editMode?: 'active' | 'inactive';
 }
 export interface StyledProps {
   style: Style;
@@ -539,6 +541,13 @@ export interface UrlImageProps {
   resizable: boolean;
   width: number;
   height: number;
+  /**
+   * React's opt-in (`AsyncImage webInteractions`): the `<img>` keeps the
+   * browser's own image interactions (a long press's Save / Share / Copy on
+   * iOS, dragging it out, the right-click menu) instead of being inert as a
+   * SwiftUI image is. Swift apps never send it.
+   */
+  webInteractions?: boolean;
 }
 /**
  * A `UIImage` / `CGImage` bitmap (`Image(uiImage:)`): a recipe the page draws
@@ -620,6 +629,14 @@ export interface TextFieldProps {
   submit?: boolean;
   /** Phase 12 `.submitLabel`: the return key's label (`enterkeyhint`). */
   submitLabel?: string;
+  /** `.keyboardType(_:)`: a `UIKeyboardType` case name (`emailAddress`, `URL`, `numberPad`…), the on-screen keyboard (`inputmode`). */
+  keyboard?: string;
+  /** `.textContentType(_:)`: a `UITextContentType` name (`emailAddress`, `oneTimeCode`…), what autofill offers (`autocomplete`). */
+  contentType?: string;
+  /** `.textInputAutocapitalization(_:)` (`autocapitalize`). */
+  autocapitalization?: 'never' | 'words' | 'sentences' | 'characters';
+  /** `.autocorrectionDisabled()` (`autocorrect="off"`). */
+  autocorrectionDisabled?: boolean;
 }
 export interface ToggleProps {
   isOn: boolean;
@@ -897,7 +914,13 @@ export interface DecoratedProps {
 export interface MenuProps {
   deferred?: boolean;
 }
-export type ToolbarPlacement = 'trailing' | 'leading' | 'principal' | 'bottom' | 'secondary';
+/**
+ * `largeTitle` (iOS 26 `.largeTitle`): the items take the large title row in
+ * place of the title's text, scrolling with the content as the title does;
+ * the bar shows the title once the row has gone under it. Hidden while the
+ * screen's title is inline.
+ */
+export type ToolbarPlacement = 'trailing' | 'leading' | 'principal' | 'bottom' | 'secondary' | 'largeTitle';
 /**
  * `.toolbar { ToolbarItem(placement:) { ... } }`, an extra child of a
  * `navscreen` after its content. The children are the items, laid out at
@@ -912,6 +935,12 @@ export interface ToolbarProps {
    * apart; fixed ones are 8 wide.
    */
   spacer?: 'flexible' | 'fixed';
+  /**
+   * `.sharedBackgroundVisibility(.hidden)`: a leading or trailing group of
+   * the navigation bar draws no glass of the bar's and is a run of its own
+   * (a segmented picker is drawn as its own glass capsule either way).
+   */
+  sharedBackground?: 'hidden';
 }
 /**
  * `.searchable(text:)`, an extra child of a `navscreen`: a 36pt rounded
@@ -1884,6 +1913,16 @@ export interface Style {
   hitTesting?: boolean;
 }
 
+export interface Style {
+  /**
+   * `.onScrollVisibilityChange(threshold:_:)`: the page sends
+   * `scrollvisibility` to the box when the share of it inside its scroll
+   * view's visible area (below a bar the view scrolls under, above a bar
+   * covering its bottom) crosses `threshold` (src/scrollVisibility.ts).
+   */
+  scrollVisibility?: { threshold: number };
+}
+
 export interface Style {
   /** `.blendMode`: the CSS `mix-blend-mode` the box is composited with. */
   blendMode?: string;
@@ -1957,6 +1996,16 @@ export interface ScrollPositionEvent {
   type: 'scrollposition';
   id: ElementId;
 }
+/**
+ * Sent to a `styled` box with `scrollVisibility`: the share of it inside its
+ * scroll view's visible area came to the threshold or above (`visible`), or
+ * fell below it. The first check after the box appears says where it is.
+ */
+export interface ScrollVisibilityEvent {
+  type: 'scrollvisibility';
+  id: ElementId;
+  visible: boolean;
+}
 /**
  * A movable `listrow` was dragged to a new place: `to` is the index among
  * its container's children (the `list`'s, or its `section`'s) before which
@@ -2002,7 +2051,7 @@ export interface DropEvent {
 }
 
 /** The Phase 8 events (merged into `RendererEvent` above). */
-export type InteractionEvent = DragEvent | PinchEvent | LongPressEvent | DeleteEvent | RefreshEvent | ScrollPositionEvent | MoveEvent | DragStartEvent | DragEndEvent | DropEvent;
+export type InteractionEvent = DragEvent | PinchEvent | LongPressEvent | DeleteEvent | RefreshEvent | ScrollPositionEvent | ScrollVisibilityEvent | MoveEvent | DragStartEvent | DragEndEvent | DropEvent;
 // Phase 8: alerts, controls, effects
 // (docs/ops-protocol.md, "Phase 8: interaction"; gestures, swipe actions,
 // context menus, list rows and refresh live in their own block)

package/src/renderer.ts

@@ -153,13 +153,14 @@ import { applyCanvas, createCanvasElement } from './canvasDrawing';
 import { scrollToTarget } from './scrollTo';
 import { POSITION_SETTLE_MS, POSITION_SNAP_WAITS, anchorPoint, positionTarget, restsOnSnapPoint, type PositionCandidate } from './scrollPosition';
 import { TouchPaging } from './touchPaging';
+import { isScrollVisible } from './scrollVisibility';
 import { applyDefaultScrollAnchor, keepScrollAnchors } from './scrollAnchor';
 import { EMPTY_CATALOG, assetColorVar, type AssetCatalog } from './assets';
 import { HIERARCHY_OPACITY, colorToCSS, effectsCSS, styleToCSS, type PaintCSS } from './styles';
 import { hostContent, onHostContentChange } from './hostContent';
 import { HoverTracker, applyPointerAndEffects, safeAreaOverlap } from './pointerEffects';
 import { colorMultiplyFilter } from './colorMultiply';
-import { largeTitleOf } from './largeTitle';
+import { largeTitleOf, largeTitleTextOf } from './largeTitle';
 import { applyEdgeEffect } from './scrollEdge';
 import { discardScrollOffsets, readScrollOffsets, trackScroller } from './scrollSync';
 import { DEFAULT_TYPE_SIZE, TEXT_STYLE_WEIGHT, resolveTextStyle, textStyleVar } from './typography';
@@ -216,6 +217,16 @@ function dismissMenu(menu: HTMLElement): void {
 
 /** Duration of the navigation push/pop slide; keep in sync with styles.css (`--sb-nav-easing`). */
 export const NAV_TRANSITION_MS = 400;
+/**
+ * How long `keepRepainting` paints after a browser history navigation:
+ * through Safari's 3 s snapshot-removal watchdog, with room for a slow
+ * device. Measured on an iPhone: painting for 1.5 s (past the swipe
+ * animation alone) removed the stall but left a single freeze of the touch
+ * in progress at the 3 s mark; 5 s left none.
+ */
+export const REPAINT_KEEPALIVE_MS = 5000;
+/** Between two repaints of the keep-alive: a few frames, so the cost is nothing and the first frame after Safari hides the page is near. */
+const REPAINT_KEEPALIVE_INTERVAL_MS = 50;
 /** Duration of the sheet present/dismiss slide; keep in sync with styles.css. */
 export const SHEET_TRANSITION_MS = 400;
 // Phase 8: the sheet drag (and every other pointer gesture) lives in src/interaction.ts.
@@ -440,6 +451,10 @@ export class Renderer {
   private pendingScrolls: ElementId[] = [];
   /** Lazy rows: the `lazyspacer`s on the page, and those already reported near the visible area. */
   private lazySpacers = new Set<ElementId>();
+  /** `styled` boxes with `scrollVisibility`, and what each was last told (src/scrollVisibility.ts). */
+  private readonly visibilityTargets = new Map<ElementId, number>();
+  private readonly visibilityReported = new Map<ElementId, boolean>();
+  private visibilityCheckQueued = false;
   private lazyReported = new Set<ElementId>();
   private lazyCheckQueued = false;
   /** The highest `scrollTo` serial seen: a command keeps its serial until the reader re-runs, and runs once. */
@@ -864,6 +879,7 @@ export class Renderer {
     root.addEventListener('focusout', this.onFocusChange);
     root.addEventListener('scroll', this.onScrollDismissKeyboard, true);
     root.addEventListener('scroll', this.queueLazyCheck, { capture: true, passive: true });
+    root.addEventListener('scroll', this.queueVisibilityCheck, { capture: true, passive: true });
     root.addEventListener('scroll', this.onPositionScroll, { capture: true, passive: true });
     root.addEventListener('scrollend', this.onPositionScrollEnd, { capture: true, passive: true });
     root.addEventListener('touchstart', this.onPositionTouchStart, { capture: true, passive: true });
@@ -1288,6 +1304,52 @@ export class Renderer {
     this.onEvent({ type: 'tap', id });
   }
 
+  /** The repaint keep-alive (`keepRepainting`): its box, timer and deadline while it runs. */
+  private repaintKeepAlive: { el: HTMLElement; timer: number; until: number; on: boolean } | null = null;
+
+  /**
+   * Keeps the page painting for `duration` ms: a 1 px box in the root
+   * alternates between two near-identical colors every few frames, so each
+   * frame carries a real repaint. Safari's back and forward swipe shows a
+   * snapshot of the entry it goes to and, once its own animation ends, hides
+   * the live page until the page commits a new frame; a pop that has already
+   * finished animating by then leaves nothing to commit, and Safari keeps the
+   * snapshot (a still image, under which the live page takes the touches)
+   * until a 3 s watchdog; and a page that stops painting before that
+   * watchdog has a touch in progress interrupted when it fires, so the
+   * painting runs through it. Called from browserHistory.ts for every
+   * history navigation the browser makes; a call while one runs extends it.
+   */
+  keepRepainting(duration = REPAINT_KEEPALIVE_MS): void {
+    const until = performance.now() + duration;
+    if (this.repaintKeepAlive) {
+      this.repaintKeepAlive.until = Math.max(this.repaintKeepAlive.until, until);
+      return;
+    }
+    const el = document.createElement('div');
+    el.setAttribute('aria-hidden', 'true');
+    el.style.cssText = 'position:fixed;left:0;top:0;width:1px;height:1px;pointer-events:none;z-index:2147483647;background:rgba(127,127,127,0.02)';
+    this.root.append(el);
+    const state = { el, timer: 0, until, on: false };
+    this.repaintKeepAlive = state;
+    state.timer = window.setInterval(() => {
+      if (performance.now() >= state.until) {
+        this.stopRepainting();
+        return;
+      }
+      state.on = !state.on;
+      el.style.background = state.on ? 'rgba(127,127,127,0.03)' : 'rgba(127,127,127,0.02)';
+    }, REPAINT_KEEPALIVE_INTERVAL_MS);
+  }
+
+  private stopRepainting(): void {
+    const state = this.repaintKeepAlive;
+    if (!state) return;
+    this.repaintKeepAlive = null;
+    window.clearInterval(state.timer);
+    state.el.remove();
+  }
+
   /**
    * Run the layout engine over the current tree and position every element.
    * Returns the elements whose box changed. Runs at every `commit`; call it
@@ -1335,6 +1397,7 @@ export class Renderer {
     this.collectGeometry(result);
     this.collectLayouts(result);
     if (this.applying === 0) this.flushGeometry();
+    this.queueVisibilityCheck();
     this.afterLayout?.();
     return changes;
   }
@@ -1577,6 +1640,7 @@ export class Renderer {
   }
 
   dispose(): void {
+    this.stopRepainting();
     this.closeMenu();
     this.root.removeEventListener('click', this.onClick);
     this.root.removeEventListener('pointerdown', this.onRowPress);
@@ -1585,6 +1649,7 @@ export class Renderer {
     this.root.removeEventListener('focusin', this.onFocusChange);
     this.root.removeEventListener('focusout', this.onFocusChange);
     this.root.removeEventListener('scroll', this.onScrollDismissKeyboard, true);
+    this.root.removeEventListener('scroll', this.queueVisibilityCheck, true);
     this.root.removeEventListener('scroll', this.onPositionScroll, true);
     this.root.removeEventListener('scrollend', this.onPositionScrollEnd, true);
     this.root.removeEventListener('touchstart', this.onPositionTouchStart, true);
@@ -1626,6 +1691,7 @@ export class Renderer {
     if (kind === 'geometry' || (props as { reportsSize?: unknown }).reportsSize === true) this.geometryReporters.add(id);
     applyProps(el, kind, props, this.assets);
     this.noteScroll(id, kind, props);
+    this.noteVisibility(id, kind, props);
     if (kind === 'list' || kind === 'scrollview') trackScroller(el);
     if (kind === 'lazyspacer') this.lazySpacers.add(id);
     if (kind === 'host') {
@@ -1634,6 +1700,18 @@ export class Renderer {
     }
   }
 
+  /** A toolbar whose placement changed to or from `largeTitle` moves between its screen's content slot and large title. */
+  private rehomeToolbar(id: ElementId, el: HTMLElement, op: Op): void {
+    const parentId = this.parents.get(id);
+    const parent = parentId === undefined ? undefined : this.elements.get(parentId);
+    if (parentId === undefined || !parent || !parent.classList.contains('sb-navscreen') || !el.isConnected) return;
+    const expected = el.dataset['sbPlacement'] === 'largeTitle' ? (largeTitleOf(parent) ?? slotOf(parent)) : slotOf(parent);
+    if (el.parentElement === expected) return;
+    const node = this.nodes.get(id);
+    const index = node ? (this.nodes.get(parentId)?.children.indexOf(node) ?? -1) : -1;
+    if (index >= 0) this.insert(parentId, id, index, op);
+  }
+
   /** A `host` element takes the page's content element (src/hostContent.ts) and watches its size. */
   private adoptHostContent(id: ElementId, el: HTMLElement, props: HostProps): void {
     const content = hostContent(props.content);
@@ -1680,6 +1758,64 @@ export class Renderer {
     }
   }
 
+  // -------------------------------------------------------------------------
+  // `.onScrollVisibilityChange` (src/scrollVisibility.ts)
+  // -------------------------------------------------------------------------
+
+  /** A `styled` box with `scrollVisibility` is watched; any other forgets it was. */
+  private noteVisibility(id: ElementId, kind: ElementKind, props: ElementProps): void {
+    const spec = kind === 'styled' ? (props as Partial<StyledProps>)?.style?.scrollVisibility : undefined;
+    if (spec && typeof spec.threshold === 'number') {
+      this.visibilityTargets.set(id, spec.threshold);
+      return;
+    }
+    this.visibilityTargets.delete(id);
+    this.visibilityReported.delete(id);
+  }
+
+  /** After a scroll or a layout, the watched boxes are checked on the next frame (once per frame). */
+  private readonly queueVisibilityCheck = (): void => {
+    if (this.visibilityCheckQueued || this.visibilityTargets.size === 0) return;
+    this.visibilityCheckQueued = true;
+    requestAnimationFrame(() => {
+      this.visibilityCheckQueued = false;
+      this.checkVisibility();
+    });
+  };
+
+  /**
+   * Each watched box against its scroll view's visible area (the view's box
+   * less the bars it runs under), or the root's outside one: told when it
+   * comes into view or leaves it, and once when first checked.
+   */
+  private checkVisibility(): void {
+    for (const [id, threshold] of this.visibilityTargets) {
+      const el = this.elements.get(id);
+      if (!el || !el.isConnected) {
+        this.visibilityTargets.delete(id);
+        this.visibilityReported.delete(id);
+        continue;
+      }
+      const box = el.getBoundingClientRect();
+      if (box.width === 0 && box.height === 0) continue;
+      const scroller = el.parentElement?.closest<HTMLElement>('.sb-scrollview, .sb-list') ?? null;
+      const area = (scroller ?? this.root).getBoundingClientRect();
+      const viewport = { x: area.left, y: area.top, width: area.width, height: area.height };
+      if (scroller) {
+        const chrome = this.layoutResult?.chrome.get(Number(scroller.dataset[ID_ATTR]));
+        const top = chrome?.['topInset']?.height ?? 0;
+        const covered = chrome?.['bottomInset'];
+        viewport.y += top;
+        viewport.height -= top;
+        if (covered) viewport.height = Math.max(0, viewport.height - covered.height);
+      }
+      const visible = isScrollVisible({ x: box.left, y: box.top, width: box.width, height: box.height }, viewport, threshold);
+      if (this.visibilityReported.get(id) === visible) continue;
+      this.visibilityReported.set(id, visible);
+      this.onEvent({ type: 'scrollvisibility', id, visible });
+    }
+  }
+
   // -------------------------------------------------------------------------
   // `.scrollPosition(id:)` reading back (src/scrollPosition.ts)
   // -------------------------------------------------------------------------
@@ -1796,6 +1932,29 @@ export class Renderer {
     this.pendingScrolls.push(id);
   }
 
+  /**
+   * `ScrollContext.animateScroll` (src/scrollTo.ts): an animated `scrollTo`
+   * of a snapping scroll view on one axis runs as the touch pager's run (the
+   * snap off until it rests, the last frame writing the offset), held from
+   * reporting its position until then as a finger's drive is, so an app
+   * re-centring its pages on the page it reports does so once, at rest.
+   */
+  animateScroll(el: HTMLElement, left: number, top: number): boolean {
+    if (el.dataset['sbSnap'] === undefined) return false;
+    const axes = el.dataset['sbAxes'];
+    if (axes !== 'horizontal' && axes !== 'vertical') return false;
+    if (el.dataset['sbReportsPosition'] !== undefined) {
+      this.heldScrolls.add(el);
+      const pending = this.positionTimers.get(el);
+      if (pending !== undefined) {
+        window.clearTimeout(pending);
+        this.positionTimers.delete(el);
+      }
+    }
+    this.touchPaging.animateTo(el, axes === 'horizontal', axes === 'horizontal' ? left : top);
+    return true;
+  }
+
   /** `ScrollViewProxy.scrollTo`: scroll to the targets this pass marked (src/scrollTo.ts). */
   private performScrolls(animated: boolean): void {
     if (this.pendingScrolls.length === 0) return;
@@ -1910,7 +2069,9 @@ export class Renderer {
     if (kind === 'text') el.textContent = '';
     applyProps(el, kind, props, this.assets);
     this.noteScroll(id, kind, props);
+    this.noteVisibility(id, kind, props);
     if (kind === 'host') this.adoptHostContent(id, el, props as HostProps);
+    if (kind === 'toolbar') this.rehomeToolbar(id, el, op);
     const newToken = el.dataset[ANIMATION_TOKEN];
     const tokenChanged = (previous?.tokenChanged ?? false) || (newToken !== undefined && newToken !== oldToken);
     const record: UpdatedRecord = { el, before, tokenChanged };
@@ -1951,7 +2112,9 @@ export class Renderer {
     // A section's view header / footer lives beside its rows' card, in the
     // section element itself; the rows after a header are one DOM slot lower.
     const supplement = isSectionSupplement(el);
-    const container = supplement && parent.classList.contains('sb-section') ? parent : slotOf(parent);
+    // A `.largeTitle` toolbar lives in its screen's large title element, which scrolls with the content.
+    const inLargeTitle = el.dataset['sbPlacement'] === 'largeTitle' && parent.classList.contains('sb-navscreen');
+    const container = supplement && parent.classList.contains('sb-section') ? parent : inLargeTitle ? (largeTitleOf(parent) ?? slotOf(parent)) : slotOf(parent);
     // Moves: `index` is the element's position in the parent's child list
     // *after* the op is applied. Detaching first makes the index arithmetic
     // identical for fresh inserts and for moves within the same parent.
@@ -1963,9 +2126,21 @@ export class Renderer {
       const first = this.nodes.get(parentId)?.children.find((child) => child.id !== id);
       if (first?.kind === 'sectionheader') slotIndex -= 1;
     }
+    // A screen's children may live in two containers (its content slot and
+    // its large title): the next sibling in the same container is the reference.
+    const screenReference = (): Element | null => {
+      const siblings = (this.nodes.get(parentId)?.children ?? []).filter((child) => child.id !== id);
+      for (const sibling of siblings.slice(index)) {
+        const sib = this.elements.get(sibling.id);
+        if (sib && sib.parentElement === container) return sib;
+      }
+      return null;
+    };
     const reference = supplement
       ? el.classList.contains('sb-sectionheader') ? container.firstChild : null
-      : (container.children[slotIndex] ?? null);
+      : parent.classList.contains('sb-navscreen')
+        ? screenReference()
+        : (container.children[slotIndex] ?? null);
     container.insertBefore(el, reference);
     if (!wasAttached) this.pass.inserted.add(el);
     // Mirror the move in the layout tree.
@@ -3234,7 +3409,7 @@ function applyKindProps(el: HTMLElement, kind: ElementKind, props: ElementProps,
       const placement = (props as ToolbarProps).placement;
       // `secondary` items shown in the bar look like the trailing ones (glass capsules).
       el.dataset['sbPlacement'] =
-        placement === 'leading' || placement === 'principal' || placement === 'bottom' ? placement : 'trailing';
+        placement === 'leading' || placement === 'principal' || placement === 'bottom' || placement === 'largeTitle' ? placement : 'trailing';
       // A `ToolbarSpacer`: draws nothing.
       el.toggleAttribute('data-sb-spacer', typeof (props as ToolbarProps).spacer === 'string');
       break;
@@ -3703,8 +3878,12 @@ function applyImage(el: HTMLElement, props: ImageProps, assets: AssetCatalog): v
     el.dataset['sbUrl'] = props.url;
     if (props.resizable) el.dataset['sbResizable'] = '';
     else delete el.dataset['sbResizable'];
+    // React's opt-in to the browser's own image interactions (styles.css).
+    const web = props.webInteractions === true;
+    el.toggleAttribute('data-sb-web', web);
     const existing = el.firstElementChild;
     if (existing instanceof HTMLImageElement) {
+      existing.draggable = web;
       if (existing.getAttribute('src') !== props.url && existing.dataset['sbPending'] !== props.url) {
         swapImageSource(existing, props.url);
       }
@@ -3713,12 +3892,13 @@ function applyImage(el: HTMLElement, props: ImageProps, assets: AssetCatalog): v
     const img = document.createElement('img');
     img.src = props.url;
     img.alt = '';
-    img.draggable = false;
+    img.draggable = web;
     img.decoding = 'async';
     found(props.url, img);
     return;
   }
   delete el.dataset['sbUrl'];
+  el.removeAttribute('data-sb-web');
   if (isAssetImage(props)) {
     const name = props.name ?? '';
     delete el.dataset['sbSymbol'];
@@ -3827,6 +4007,54 @@ function applyTextField(input: HTMLInputElement | HTMLTextAreaElement, props: Te
   else delete input.dataset['sbSubmit'];
   if (typeof props.submitLabel === 'string' && props.submitLabel.length > 0) input.enterKeyHint = props.submitLabel;
   else input.removeAttribute('enterkeyhint');
+  applyTextInputHints(input, props);
+}
+
+/** `UIKeyboardType` → `inputmode`: the browser's nearest on-screen keyboard. */
+const INPUT_MODES: Record<string, string> = {
+  emailAddress: 'email',
+  URL: 'url',
+  numberPad: 'numeric',
+  asciiCapableNumberPad: 'numeric',
+  decimalPad: 'decimal',
+  phonePad: 'tel',
+  namePhonePad: 'tel',
+  webSearch: 'search',
+};
+
+/** `UITextContentType` → `autocomplete`: what autofill offers. */
+const AUTOCOMPLETE: Record<string, string> = {
+  name: 'name',
+  givenName: 'given-name',
+  familyName: 'family-name',
+  emailAddress: 'email',
+  telephoneNumber: 'tel',
+  username: 'username',
+  password: 'current-password',
+  newPassword: 'new-password',
+  oneTimeCode: 'one-time-code',
+  URL: 'url',
+  fullStreetAddress: 'street-address',
+  postalCode: 'postal-code',
+  creditCardNumber: 'cc-number',
+};
+
+/**
+ * `.keyboardType`, `.textContentType`, `.textInputAutocapitalization` and
+ * `.autocorrectionDisabled` as the input's attributes (docs/ops-protocol.md,
+ * "Text input hints"). Without a content type autofill stays off, as a field
+ * in an app does not offer the page's saved values.
+ */
+function applyTextInputHints(input: HTMLInputElement | HTMLTextAreaElement, props: TextFieldProps): void {
+  const mode = props.keyboard ? INPUT_MODES[props.keyboard] : undefined;
+  if (mode) input.inputMode = mode;
+  else input.removeAttribute('inputmode');
+  input.autocomplete = ((props.contentType ? AUTOCOMPLETE[props.contentType] : undefined) ?? 'off') as AutoFill;
+  const capitalize = props.autocapitalization === 'never' ? 'none' : props.autocapitalization;
+  if (capitalize) input.setAttribute('autocapitalize', capitalize);
+  else input.removeAttribute('autocapitalize');
+  if (props.autocorrectionDisabled === true) input.setAttribute('autocorrect', 'off');
+  else input.removeAttribute('autocorrect');
 }
 
 /** Phase 12 `.scrollTargetLayout()`: the stack's children snap (styles.css). */
@@ -3864,9 +4092,17 @@ function applyNavScreen(el: HTMLElement, props: NavScreenProps): void {
   const largeTitle = largeTitleOf(el);
   // A large title that scrolls away collapses into the inline one (shown
   // with `data-sb-collapsed`, src/largeTitle.ts).
-  if (inlineTitle) inlineTitle.textContent = title;
+  if (inlineTitle) {
+    const appearing = inlineTitle.textContent === '' && title !== '' && inlineTitle.isConnected;
+    inlineTitle.textContent = title;
+    // An inline title given to an empty bar (a header row that has scrolled
+    // under it handing the bar its name) fades in as a collapsing large title does.
+    if (appearing && !large && typeof inlineTitle.animate === 'function') {
+      inlineTitle.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, easing: 'ease' });
+    }
+  }
   if (largeTitle) {
-    largeTitle.textContent = large ? title : '';
+    largeTitleTextOf(largeTitle).textContent = large ? title : '';
     largeTitle.hidden = !large;
   }
   el.setAttribute('aria-label', title);

package/src/scrollTo.ts

@@ -49,6 +49,14 @@ export interface ScrollContext {
   nodes: Map<number, LayoutNode>;
   parents: Map<number, number>;
   elements: Map<number, HTMLElement>;
+  /**
+   * Runs an animated scroll of `el` to the offsets itself, returning false
+   * to leave it to the browser's smooth scrolling. The renderer takes the
+   * snapping scroll views (`scrollTargetBehavior`): a browser animating a
+   * scroll-snapped container may snap it again once the animation ends or
+   * the content moves (Safari does), so they run as a finger's page does.
+   */
+  animateScroll?: (el: HTMLElement, left: number, top: number) => boolean;
 }
 
 function anchorOf(command: ScrollToCommand | undefined): UnitPoint | null {
@@ -116,7 +124,9 @@ export function scrollToTarget(
       changed = true;
     }
     if (changed) {
-      if (smooth && typeof el.scrollTo === 'function') {
+      if (smooth && ctx.animateScroll?.(el, left, top)) {
+        // Run by the context (a snapping scroll view).
+      } else if (smooth && typeof el.scrollTo === 'function') {
         el.scrollTo({ left, top, behavior: 'smooth' });
       } else {
         el.scrollLeft = left;

package/src/scrollVisibility.ts

@@ -0,0 +1,38 @@
+/**
+ * `.onScrollVisibilityChange(threshold:_:)` (iOS 18; docs/ops-protocol.md,
+ * "Scroll visibility"): a `styled` box with `scrollVisibility` is told when
+ * the share of it inside its scroll view's visible area crosses its
+ * threshold. The visible area is the scroll view's box less a bar it scrolls
+ * under (its `topInset`) and a bar covering its bottom (`bottomInset`), as
+ * content under a bar is not in view; outside a scroll view it is the root.
+ */
+
+export interface Span {
+  start: number;
+  length: number;
+}
+
+/** The share (0...1) of `target` along an axis inside `viewport`; 0 for a target of no extent. */
+export function visibleShare(target: Span, viewport: Span): number {
+  if (target.length <= 0) return 0;
+  const start = Math.max(target.start, viewport.start);
+  const end = Math.min(target.start + target.length, viewport.start + viewport.length);
+  return Math.max(0, end - start) / target.length;
+}
+
+/**
+ * Whether a box is visible: some of it is in view, and at least `threshold`
+ * of it along the scroll axes (both shares multiplied for a view scrolling
+ * both ways, the other axis counted too, as a box off to the side is not in
+ * view).
+ */
+export function isScrollVisible(
+  target: { x: number; y: number; width: number; height: number },
+  viewport: { x: number; y: number; width: number; height: number },
+  threshold: number,
+): boolean {
+  const horizontal = visibleShare({ start: target.x, length: target.width }, { start: viewport.x, length: viewport.width });
+  const vertical = visibleShare({ start: target.y, length: target.height }, { start: viewport.y, length: viewport.height });
+  const share = horizontal * vertical;
+  return share > 0 && share >= Math.min(1, Math.max(0, threshold));
+}

package/src/styles.css

@@ -666,6 +666,17 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   -webkit-user-select: none;
 }
 
+/* React's `AsyncImage webInteractions`: the picture is a web page's image
+   again, with the browser's long press (Save / Share / Copy on iOS), drag
+   out and right-click menu. */
+.sb-image[data-sb-web] > img {
+  pointer-events: auto;
+  user-select: auto;
+  -webkit-user-select: auto;
+  -webkit-touch-callout: default;
+  -webkit-user-drag: auto;
+}
+
 /* `.interpolation(.none)`: a QR code's modules stay sharp when scaled up. */
 .sb-image[data-sb-interpolation='none'] > img,
 .sb-image[data-sb-interpolation='none'] > canvas {
@@ -1253,6 +1264,22 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   display: none;
 }
 
+/* A `.largeTitle` toolbar (iOS 26) takes the row in place of the title's
+   text, which the bar still shows once the row has scrolled under it. Its
+   items are content, drawn as anywhere else and answering touches. */
+.sb-navbar-large-title:has(> .sb-toolbar[data-sb-placement="largeTitle"]:not([hidden])) > .sb-navbar-large-title-text {
+  visibility: hidden;
+}
+
+.sb-navbar-large-title > .sb-toolbar {
+  font-size: var(--sb-font-size-body);
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: normal;
+  white-space: normal;
+  pointer-events: auto;
+}
+
 /* The large title scrolls with the screen's root list or scroll view
    (src/largeTitle.ts moves it into it); drags on it scroll that view. There
    it is content, under the bar. */
@@ -1898,6 +1925,28 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   max-width: calc(100% - 8px);
 }
 
+/* iOS 26: a segmented picker in a navigation bar item is the bar's glass
+   capsule itself (the run's glass behind it, engine `bar`): no track, the
+   labels in the engine's font (15 regular), the selected segment a gray
+   capsule the glass tints, with no shadow, 2 in from its neighbours. */
+.sb-picker[data-sb-style="segmented"][data-sb-bar] > .sb-segment-track {
+  display: none;
+}
+
+.sb-picker[data-sb-style="segmented"][data-sb-bar] > .sb-segment {
+  font: inherit;
+  letter-spacing: normal;
+}
+
+.sb-picker[data-sb-style="segmented"][data-sb-bar] > .sb-segment::before {
+  inset: 0 2px;
+}
+
+.sb-picker[data-sb-style="segmented"][data-sb-bar] > .sb-segment[aria-checked="true"]::before {
+  background: var(--sb-glass-selected);
+  box-shadow: none;
+}
+
 .sb-segment:focus-visible {
   outline: 2px solid var(--sb-color-accent);
   outline-offset: -2px;
@@ -2982,7 +3031,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 :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-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 {
   pointer-events: none !important;
 }
 

package/src/touchPaging.ts

@@ -334,6 +334,22 @@ export class TouchPaging {
     this.runTo(el, g.horizontal, offset, destination);
   };
 
+  /**
+   * The app scrolls `el` to `to` with an animation (`withAnimation` around
+   * `ScrollViewProxy.scrollTo`): the same eased run a finger's page ends
+   * with, the snap off until it rests, the last frame writing `to` itself
+   * and `onRest` reporting the page. A browser's own smooth scroll of a
+   * snapping container is left to snap it again when it likes; Safari does,
+   * after the animation or when the app re-centres its pages.
+   */
+  animateTo(el: HTMLElement, horizontal: boolean, to: number): void {
+    this.stopRun();
+    const max = horizontal ? el.scrollWidth - el.clientWidth : el.scrollHeight - el.clientHeight;
+    const target = Math.min(Math.max(0, max), Math.max(0, to));
+    el.style.scrollSnapType = 'none';
+    this.runTo(el, horizontal, horizontal ? el.scrollLeft : el.scrollTop, target);
+  }
+
   /** Runs the offset to `to` with an ease-out, then lets the container snap again. */
   private runTo(el: HTMLElement, horizontal: boolean, from: number, to: number): void {
     this.stopRun();