@swiftbrowser/web 0.9.13 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.9.13",
+  "version": "0.10.1",
   "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

@@ -28,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';
 
@@ -48,10 +54,19 @@ function shown(win: Window, el: HTMLElement): boolean {
   return win.getComputedStyle(el).visibility !== 'hidden';
 }
 
+/** How long a back the browser made waits for the app to pop a level before what it shows is recorded as it is. */
+const DISMISS_WAIT_MS = 1000;
+
 export class BrowserHistory {
   private readonly win: Window;
-  /** Levels the latest `popstate` still asks to dismiss, one commit at a time. */
-  private pendingPops = 0;
+  /**
+   * A back the browser made, while the app pops to it: the depth the entry
+   * names, the depth the latest dismissal started from, and until when the
+   * app's pop is waited for. A pop can take more than one commit (a compact
+   * split view clears its sidebar selection first, and the detail goes on
+   * the next), so a commit that still shows the level is not a new one.
+   */
+  private dismissing: { target: number; from: number; until: number } | null = null;
   /** `popstate` events to ignore: the ones our own `history.go` causes. */
   private ignorePops = 0;
   /**
@@ -199,6 +214,15 @@ export class BrowserHistory {
     return top ? Number(top.dataset['sbDepth'] ?? '0') || 0 : 0;
   }
 
+  /** Dismisses the level above `depth` for the back in progress, and waits for the app's pop. */
+  private dismissFrom(depth: number): void {
+    const dismissing = this.dismissing;
+    if (!dismissing) return;
+    dismissing.from = depth;
+    dismissing.until = performance.now() + DISMISS_WAIT_MS;
+    if (!this.dismissOne()) this.dismissing = null;
+  }
+
   /** Asks the app to dismiss one level: the top sheet when nothing is pushed inside it, else the deepest visible stack's top screen. */
   private dismissOne(): boolean {
     const sheets = this.sheets();
@@ -276,13 +300,16 @@ export class BrowserHistory {
     const depth = this.depth();
     const recorded = this.recorded();
     const selection = this.selection();
-    if (this.pendingPops > 0) {
+    const dismissing = this.dismissing;
+    if (dismissing) {
       // Dismissing for a `popstate`: the entry already names the target depth.
-      if (depth > recorded) {
-        if (!this.dismissOne()) this.pendingPops = 0;
-        else this.pendingPops -= 1;
-      } else this.pendingPops = 0;
-      return;
+      if (depth > dismissing.target && performance.now() < dismissing.until) {
+        // The latest dismissal landed: the next level. Otherwise the app has not popped yet.
+        if (depth < dismissing.from) this.dismissFrom(depth);
+        return;
+      }
+      // Arrived, or the app kept the level (it is then recorded as any other).
+      this.dismissing = null;
     }
     if (depth > recorded) {
       // Under our own pending `go`, a push would land relative to wherever the browser is when it runs (and
@@ -317,12 +344,15 @@ 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();
+    // A move the browser makes replaces any back still in progress.
+    this.dismissing = null;
     if (target.sbDepth < depth) {
-      // Back: dismiss one level now, the rest as each commit lands.
-      this.pendingPops = depth - target.sbDepth;
-      if (!this.dismissOne()) this.pendingPops = 0;
-      else this.pendingPops -= 1;
+      // Back: dismiss one level now, the rest as each pop lands.
+      this.dismissing = { target: target.sbDepth, from: depth, until: 0 };
+      this.dismissFrom(depth);
     } else if (target.sbDepth > depth) {
       // Forward: a screen cannot be re-pushed; return to the entry that matches.
       this.go(depth - target.sbDepth, depth);

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
@@ -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;

package/src/layoutDom.ts

@@ -953,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;
@@ -918,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

package/src/renderer.ts

@@ -217,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.
@@ -1294,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
@@ -1584,6 +1640,7 @@ export class Renderer {
   }
 
   dispose(): void {
+    this.stopRepainting();
     this.closeMenu();
     this.root.removeEventListener('click', this.onClick);
     this.root.removeEventListener('pointerdown', this.onRowPress);
@@ -1875,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;
@@ -3798,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);
       }
@@ -3808,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'];
@@ -3922,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). */

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/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 {
@@ -1914,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;
@@ -2998,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();