@swiftbrowser/web 0.9.4 → 0.9.6

package/README.md

@@ -247,7 +247,38 @@ chrome, `#screen` fills `100dvw × 100dvh` at (0, 0), the layout environment's
 `getComputedStyle` (`renderer.setSafeArea`). They are non-zero only in
 standalone (home screen) mode or landscape, which is what a native app would
 get. `resize`, `orientationchange` and `visualViewport` resizes re-run the
-engine (debounced 100ms, `renderer.viewportChanged`). The color scheme follows
+engine (debounced 100ms, `renderer.viewportChanged`). The on-screen keyboard
+does not resize `#screen` in iOS Safari (nor in a browser whose
+`interactive-widget` is `resizes-visual`): the layout viewport keeps its
+height and the browser shrinks (and pans) the visual viewport instead. (A
+browser that does shrink the layout viewport for the keyboard goes through
+the resize path above, and measures no keyboard.) `watchKeyboard` measures the
+keyboard as the layout viewport's height less the visual one's, on every
+`visualViewport` resize or scroll (once per frame, not debounced: the iOS
+keyboard animates over a quarter of a second). The layout viewport's height
+is `#device`'s (`100dvh`), not `window.innerHeight`, which iOS Safari shrinks
+to the visual viewport's height while the keyboard is up. The browser's pan
+to the focused field is not subtracted (Safari pans by the keyboard's whole
+height for a field at the screen's bottom, which would read as no keyboard)
+but undone: the page is scrolled back to its origin once the pan has held
+still for a few frames, since Safari animates it with the keyboard's slide
+and scrolling against that showed as a judder. Better still, the pan
+mostly never happens: Safari pans only when the keyboard would cover the
+field, so on focus the keyboard's last measured height (kept per layout
+height in `localStorage`, so the next page load has it too) is reported at
+once and the content is laid out above the keyboard before it shows; the
+measurement then confirms or corrects it, and a reading of 0 in the second
+after the focus is the keyboard not up yet. When the field loses focus and
+no other text input takes it, 0 is reported as the keyboard starts down.
+For a second after a text input gains or loses focus the viewport is read
+every frame as well, in case its events come late or not at all;
+`?debug=viewport` shows the numbers read, over the app, for checking a
+phone's browser. The height goes to
+`renderer.setKeyboard`, which the engine takes as a bottom safe-area inset
+(`LayoutEnvironment.keyboard`; docs/ops-protocol.md, `ignoresKeyboard`): a
+field or a chat's composer rises above the keyboard and a scroll view
+anchored to its end keeps the last line in view, as on iOS, while a tab bar
+under the keyboard stays put. The color scheme follows
 `prefers-color-scheme` (and its changes), the Dynamic Type size is `large`, and
 the `environment` event carries both as usual. `touch-action: manipulation`
 and `-webkit-text-size-adjust: 100%` stop double-tap zoom and text inflation;

package/package.json

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

@@ -13,6 +13,13 @@
  * screens to paths should set them with `replaceState` on the entry the
  * renderer made.
  *
+ * 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
+ * (one the selection moves to, not the first choice) adds one, and back or
+ * forward taps the row the entry recorded, through the same `tap` a finger
+ * sends. In a compact width the selection pushes the detail, a level like
+ * any other.
+ *
  * While enabled, the renderer's own edge swipe to pop is off for touch and
  * 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
@@ -25,6 +32,8 @@ interface HistoryState {
   sbHistory: true;
   /** How many levels (screens and sheets) are above the base in this entry. */
   sbDepth: number;
+  /** The selected sidebar rows of the visible two-column split views (`sbId`s, comma-separated; absent or empty for none). */
+  sbSelection?: string;
 }
 
 /** What the renderer's elements need to say for this to read them (`sbId`, `sbDepth` datasets). */
@@ -48,6 +57,8 @@ export class BrowserHistory {
    */
   private movingTo: number | null = null;
   private movingTimer: ReturnType<typeof setTimeout> | null = null;
+  /** A `popstate` asked for the entry's sidebar selection: the change it brings is recorded, not pushed. */
+  private restoringSelection = false;
   private enabled = false;
 
   constructor(
@@ -63,7 +74,7 @@ export class BrowserHistory {
     if (this.enabled) return;
     this.enabled = true;
     const current = stateOf(this.win.history.state);
-    if (!current) this.win.history.replaceState({ ...(this.win.history.state ?? {}), sbHistory: true, sbDepth: 0 }, '');
+    if (!current) this.win.history.replaceState({ ...(this.win.history.state ?? {}), ...this.entry(0, this.selection()) }, '');
     this.renderer.interaction.nativeBackGesture = true;
     this.root.addEventListener('sb:commit', this.onCommit);
     this.win.addEventListener('popstate', this.onPopState);
@@ -89,6 +100,36 @@ export class BrowserHistory {
     return depth;
   }
 
+  /** The selected sidebar rows of the visible two-column split views, as an entry records them. */
+  selection(): string {
+    const ids: string[] = [];
+    for (const split of this.root.querySelectorAll<HTMLElement>('.sb-navsplit')) {
+      if (!shown(this.win, split)) continue;
+      // The sidebar column is the first stack; its selectable rows carry the selection.
+      const sidebar = split.querySelector<HTMLElement>('.sb-navstack');
+      if (!sidebar) continue;
+      for (const row of sidebar.querySelectorAll<HTMLElement>('.sb-listrow[data-sb-selectable][data-sb-selected]')) {
+        const id = row.dataset['sbId'];
+        if (id !== undefined) ids.push(id);
+      }
+    }
+    return ids.join(',');
+  }
+
+  /** Taps the sidebar rows an entry recorded as selected that are not selected now; false when none can be. */
+  private selectRows(recorded: string): boolean {
+    const current = new Set(this.selection().split(',').filter(Boolean));
+    let tapped = false;
+    for (const id of recorded.split(',').filter(Boolean)) {
+      if (current.has(id)) continue;
+      const row = this.root.querySelector<HTMLElement>(`.sb-listrow[data-sb-selectable][data-sb-id="${id}"]`);
+      if (!row || !shown(this.win, row)) continue;
+      this.renderer.tap(Number(id));
+      tapped = true;
+    }
+    return tapped;
+  }
+
   private sheets(): HTMLElement[] {
     return [...this.root.querySelectorAll<HTMLElement>(':scope > .sb-sheet')].filter((sheet) => shown(this.win, sheet));
   }
@@ -135,6 +176,14 @@ export class BrowserHistory {
     return this.movingTo ?? stateOf(this.win.history.state)?.sbDepth ?? 0;
   }
 
+  private recordedSelection(): string {
+    return stateOf(this.win.history.state)?.sbSelection ?? '';
+  }
+
+  private entry(depth: number, selection: string): HistoryState {
+    return selection ? { sbHistory: true, sbDepth: depth, sbSelection: selection } : { sbHistory: true, sbDepth: depth };
+  }
+
   /** Our own `history.go`, remembered until its `popstate` lands (or a moment passes without one: a `go` past the ends fires none). */
   private go(delta: number, to: number): void {
     this.ignorePops += 1;
@@ -156,11 +205,12 @@ export class BrowserHistory {
 
   private readonly onCommit = (): void => this.sync();
 
-  /** After a commit: new levels get entries; levels the app dismissed itself take the history back with them. */
+  /** 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 {
     if (!this.enabled) return;
     const depth = this.depth();
     const recorded = this.recorded();
+    const selection = this.selection();
     if (this.pendingPops > 0) {
       // Dismissing for a `popstate`: the entry already names the target depth.
       if (depth > recorded) {
@@ -170,11 +220,21 @@ export class BrowserHistory {
       return;
     }
     if (depth > recorded) {
-      for (let level = recorded + 1; level <= depth; level++) this.win.history.pushState({ sbHistory: true, sbDepth: level } satisfies HistoryState, '');
+      for (let level = recorded + 1; level <= depth; level++) this.win.history.pushState(this.entry(level, selection), '');
     } else if (depth < recorded) {
       // 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()) {
+      // The same levels, another sidebar selection. The first choice (from
+      // none) and the one a `popstate` asked for belong to the entry at hand;
+      // a move from one row to another is a new entry.
+      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) }, '');
+      } else history.pushState(this.entry(depth, selection), '');
     }
+    this.restoringSelection = false;
   }
 
   private readonly onPopState = (event: PopStateEvent): void => {
@@ -194,6 +254,15 @@ export class BrowserHistory {
     } else if (target.sbDepth > depth) {
       // Forward: a screen cannot be re-pushed; return to the entry that matches.
       this.go(depth - target.sbDepth, depth);
+      return;
+    }
+    // The entry's sidebar selection, where it differs: tap the rows it names
+    // (back and forward alike, a row can be chosen again). What the app
+    // shows after that is recorded on this entry rather than pushed.
+    const recorded = target.sbSelection ?? '';
+    if (recorded !== this.selection()) {
+      this.restoringSelection = true;
+      this.selectRows(recorded);
     }
   };
 }

package/src/deviceMode.ts

@@ -85,3 +85,242 @@ export function watchViewport(onChange: () => void, debounceMs = 100): () => voi
     vv?.removeEventListener('resize', schedule);
   };
 }
+
+/** What `keyboardHeight` reads of the visual viewport (`window.visualViewport`). */
+export interface VisualViewportLike {
+  height: number;
+  scale: number;
+}
+
+/**
+ * The height of the on-screen keyboard over the bottom of the layout
+ * viewport, in CSS px: 0 while it is down. `layoutHeight` is the layout
+ * viewport's height: the height of the root element that fills it
+ * (`100dvh`), not `window.innerHeight`, which iOS Safari shrinks to the
+ * visual viewport's height while the keyboard is up (an iPhone read inner
+ * 352, visual 352, and the root still 692 tall). iOS Safari (and a browser
+ * whose `interactive-widget` is `resizes-visual`) does not shrink the layout
+ * viewport for the keyboard; it shrinks the visual viewport to the part of
+ * the screen above the keyboard and pans it down the page so the focused
+ * field shows. The keyboard is therefore the difference of the two heights.
+ * The pan (`offsetTop`) is not subtracted: Safari pans by the keyboard's
+ * full height when the field is at the bottom of the screen, which would
+ * read as no keyboard at all; `watchKeyboard` undoes the pan instead. A
+ * browser that shrinks the layout viewport for the keyboard measures 0 here
+ * and resizes the root. A pinch zoom shrinks the visual viewport too, so a
+ * scale other than 1 counts as no keyboard.
+ */
+export function keyboardHeight(layoutHeight: number, vv: VisualViewportLike | null | undefined): number {
+  if (!vv || !Number.isFinite(vv.height) || !Number.isFinite(layoutHeight) || Math.abs((vv.scale || 1) - 1) > 0.01) return 0;
+  const covered = layoutHeight - vv.height;
+  return covered > 0 ? Math.round(covered) : 0;
+}
+
+export interface WatchKeyboardOptions {
+  /** The element that fills the layout viewport (`#device`): its height is the layout viewport's. */
+  root: HTMLElement;
+  /** Gets every reading (the `?debug=viewport` readout). */
+  onRead?: ((reading: ViewportReading) => void) | undefined;
+  /** Where the last measured height is kept for the next focus (and the next page load); `localStorage` by default, null for none. */
+  storage?: Pick<Storage, 'getItem' | 'setItem'> | null | undefined;
+}
+
+/**
+ * Call `onChange` with the keyboard's height (`keyboardHeight`) whenever the
+ * visual viewport resizes or pans, once per animation frame: the iOS
+ * keyboard animates over a quarter of a second and sends several resizes,
+ * so unlike `watchViewport` this does not debounce. A text input gaining or
+ * losing focus is what raises or drops the keyboard, so for a second after
+ * either the viewport is read every frame as well, in case its events come
+ * late or not at all.
+ *
+ * The browser pans the page to the focused field when the keyboard would
+ * cover it, which would leave the top of the screen (the navigation bar)
+ * scrolled off, and it does so while the keyboard slides, so undoing the
+ * pan as it happens shows as a judder. Better that it never happens: on
+ * focus the keyboard's last measured height (kept per layout height, in
+ * `localStorage` so the next page load has it too) is reported at once,
+ * before the keyboard shows, so the app has laid its content out above the
+ * keyboard, field included, by the time the browser decides whether to pan.
+ * The measurement then confirms or corrects it; a reading of 0 during the
+ * second after the focus is the keyboard not up yet, not a correction. A
+ * pan that does happen (the first focus ever, a keyboard taller than the
+ * last) is scrolled back, once it has held still for a few frames: Safari
+ * animates its pan with the keyboard's slide, and scrolling against that
+ * animation showed as a judder. (Safari's pan is a window scroll, `scrollY`
+ * 340 for a 340 keyboard on an iPhone; moving the root to counter a pan read
+ * from `visualViewport.offsetTop` was tried and dipped the content mid-slide
+ * on passing offsets.) When the field loses focus and no other text input
+ * has it, 0 is reported at once too, as the keyboard starts down. Returns a
+ * function that stops listening.
+ */
+export function watchKeyboard(onChange: (height: number) => void, options: WatchKeyboardOptions): () => void {
+  const vv = window.visualViewport;
+  if (!vv) return () => {};
+  const { root, onRead } = options;
+  const storage = options.storage === undefined ? safeLocalStorage() : options.storage;
+  let frame: number | undefined;
+  let last = 0;
+  /** While set, the viewport is read every frame until this time (performance.now() ms). */
+  let pollUntil = 0;
+  /** While set, a reading of 0 is the keyboard not up yet (a focus just reported the known height). */
+  let anticipatingUntil = 0;
+  let blurTimer: ReturnType<typeof setTimeout> | undefined;
+  let lastEvent = '';
+  /** The pan read last frame (`scrollY:offsetTop`) and for how many frames in a row it has held. */
+  let lastPan = '';
+  let panHeld = 0;
+  const storageKey = (): string => `sb-keyboard-${root.clientHeight}`;
+  const knownHeight = (): number => {
+    const value = Number(storage?.getItem(storageKey()) ?? 0);
+    return Number.isFinite(value) && value > 0 ? value : 0;
+  };
+  const remember = (height: number): void => {
+    try {
+      storage?.setItem(storageKey(), String(height));
+    } catch {
+      // Storage full or blocked: the next focus measures instead of anticipating.
+    }
+  };
+  const report = (height: number): void => {
+    if (height === last) return;
+    last = height;
+    onChange(height);
+  };
+  const update = (): void => {
+    frame = undefined;
+    const layoutHeight = root.clientHeight;
+    const height = keyboardHeight(layoutHeight, vv);
+    const up = height > 0 || (last > 0 && performance.now() < anticipatingUntil);
+    const panNow = `${Math.round(window.scrollY)}:${Math.round(vv.offsetTop)}`;
+    panHeld = panNow === lastPan ? panHeld + 1 : 0;
+    lastPan = panNow;
+    const settled = panHeld >= PAN_SETTLE_FRAMES;
+    if (up && settled && (window.scrollY !== 0 || window.scrollX !== 0)) window.scrollTo(0, 0);
+    onRead?.({
+      layoutHeight,
+      innerHeight: window.innerHeight,
+      visualHeight: vv.height,
+      scale: vv.scale,
+      offsetTop: vv.offsetTop,
+      pageTop: vv.pageTop,
+      scrollY: window.scrollY,
+      keyboard: height,
+      event: lastEvent,
+    });
+    // The readout wants every frame; otherwise only the second after a focus change.
+    if (onRead || performance.now() < pollUntil) schedule();
+    if (height > 0) {
+      anticipatingUntil = 0;
+      remember(height);
+      report(height);
+    } else if (performance.now() >= anticipatingUntil) {
+      report(0);
+    }
+  };
+  const schedule = (): void => {
+    if (frame === undefined) frame = requestAnimationFrame(update);
+  };
+  const onViewport = (event: Event): void => {
+    lastEvent = `visualViewport ${event.type}`;
+    // Read on for a moment after a change, to see the pan hold still.
+    pollUntil = Math.max(pollUntil, performance.now() + PAN_SETTLE_MS);
+    schedule();
+  };
+  const isTextInput = (target: EventTarget | Element | null): boolean =>
+    target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
+  const onFocus = (event: FocusEvent): void => {
+    if (!isTextInput(event.target)) return;
+    lastEvent = event.type;
+    pollUntil = performance.now() + FOCUS_POLL_MS;
+    if (blurTimer !== undefined) clearTimeout(blurTimer);
+    blurTimer = undefined;
+    if (event.type === 'focusin') {
+      const known = knownHeight();
+      if (known > 0) {
+        anticipatingUntil = pollUntil;
+        report(known);
+      }
+    } else {
+      anticipatingUntil = 0;
+      // The focus may be moving to another text input (its `focusin` follows at once): wait a moment.
+      blurTimer = setTimeout(() => {
+        blurTimer = undefined;
+        if (!isTextInput(document.activeElement)) report(0);
+      }, BLUR_SETTLE_MS);
+    }
+    schedule();
+  };
+  vv.addEventListener('resize', onViewport);
+  vv.addEventListener('scroll', onViewport);
+  document.addEventListener('focusin', onFocus);
+  document.addEventListener('focusout', onFocus);
+  return () => {
+    if (frame !== undefined) cancelAnimationFrame(frame);
+    if (blurTimer !== undefined) clearTimeout(blurTimer);
+    pollUntil = 0;
+    anticipatingUntil = 0;
+    vv.removeEventListener('resize', onViewport);
+    vv.removeEventListener('scroll', onViewport);
+    document.removeEventListener('focusin', onFocus);
+    document.removeEventListener('focusout', onFocus);
+  };
+}
+
+/** `localStorage`, or null where reading it throws (a private window, blocked site data). */
+function safeLocalStorage(): Storage | null {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+/** After a text input loses focus, how long to wait for another to take it before reporting the keyboard down. */
+const BLUR_SETTLE_MS = 60;
+
+/** How many frames in a row the browser's pan must hold still before it is scrolled back. */
+const PAN_SETTLE_FRAMES = 3;
+
+/** How long after a visual viewport event the viewport keeps being read every frame, to see the pan settle. */
+const PAN_SETTLE_MS = 250;
+
+/** How long after a text input gains or loses focus the viewport is read every frame (the keyboard's animation and some). */
+const FOCUS_POLL_MS = 1000;
+
+/** One reading of the viewport, for the `?debug=viewport` readout. */
+export interface ViewportReading {
+  /** The root's height: the layout viewport's. */
+  layoutHeight: number;
+  innerHeight: number;
+  visualHeight: number;
+  scale: number;
+  /** The visual viewport's offset within the layout viewport: the browser's pan to the focused field. */
+  offsetTop: number;
+  pageTop: number;
+  scrollY: number;
+  keyboard: number;
+  /** The event that led to this reading (`visualViewport resize`, `focusin`…), empty before the first. */
+  event: string;
+}
+
+/**
+ * `?debug=viewport`: a small readout over the app with the numbers the
+ * keyboard measurement reads, for checking a phone's browser (which has no
+ * console to hand). It follows the visual viewport (a fixed element is
+ * panned with the layout viewport, off the top of the screen, when the
+ * browser pans to a field). Returns the function that updates it.
+ */
+export function installViewportReadout(): (reading: ViewportReading) => void {
+  const el = document.createElement('pre');
+  el.className = 'sb-viewport-readout';
+  el.setAttribute('aria-hidden', 'true');
+  document.body.appendChild(el);
+  return (r) => {
+    el.style.transform = `translateY(${Math.round(r.offsetTop)}px)`;
+    el.textContent =
+      `root ${window.innerWidth}×${r.layoutHeight}  inner ${r.innerHeight}  visual ${Math.round(r.visualHeight)}  scale ${r.scale.toFixed(3)}\n` +
+      `offsetTop ${Math.round(r.offsetTop)}  pageTop ${Math.round(r.pageTop)}  scrollY ${Math.round(r.scrollY)}\n` +
+      `keyboard ${r.keyboard}  ${r.event || 'no event yet'}  ${new Date().toLocaleTimeString()}`;
+  };
+}

package/src/hostInset.ts

@@ -0,0 +1,26 @@
+/**
+ * A `host` that is a list row is drawn in the row's box (the card's width,
+ * the row's height with its padding), as every row is, while the engine
+ * measured and placed its content in the row's content frame inside it.
+ * The content element goes back into that frame, as a text row's text is
+ * padded into its own (layoutDom.ts), so DOM content that fills its box
+ * (`sizing: "fill"`, `height: 100%`) fills what it was measured for and
+ * not the row's padding too.
+ */
+
+import type { Rect } from './layout';
+
+export interface HostContentInset {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+/** Where the content sits inside the element's box; null when the box is the frame (nothing to set). */
+export function hostContentInset(box: Rect, frame: Rect): HostContentInset | null {
+  const left = frame.x - box.x;
+  const top = frame.y - box.y;
+  if (left === 0 && top === 0 && frame.width === box.width && frame.height === box.height) return null;
+  return { left, top, width: frame.width, height: frame.height };
+}

package/src/layout/engine.ts

@@ -507,6 +507,17 @@ function flexibleFrameLength(proposed: number | null, child: number, min: number
   return length;
 }
 
+/** Whether a root (through its `styled` wrappers) carries `ignoresKeyboard`: it keeps the keyboardless height. */
+function ignoresKeyboard(node: LayoutNode): boolean {
+  let current = node;
+  while (current.kind === 'styled') {
+    if (styleOf(current)['ignoresKeyboard'] === true) return true;
+    if (current.children.length !== 1) return false;
+    current = current.children[0] as LayoutNode;
+  }
+  return false;
+}
+
 /** The element under a chain of `styled` wrappers. */
 function unwrapStyled(node: LayoutNode): LayoutNode {
   let current = node;
@@ -1260,6 +1271,12 @@ export class LayoutPass {
     };
   }
 
+  /** The on-screen keyboard's height over the screen's bottom (device mode, a field being edited); 0 while it is down. */
+  private get keyboard(): number {
+    const keyboard = this.env.keyboard;
+    return typeof keyboard === 'number' && Number.isFinite(keyboard) && keyboard > 0 ? keyboard : 0;
+  }
+
   run(roots: readonly LayoutNode[]): LayoutResult {
     this.runId += 1;
     this.touched = new Set();
@@ -1285,9 +1302,12 @@ export class LayoutPass {
         const size = this.measure(root, ctx, proposal);
         this.place(root, ctx, proposal, insetH, screen.height - insetBottom - size.height);
       } else {
+        // The keyboard (device mode) is a bottom inset too, unless the root
+        // ignores it (`.ignoresSafeArea(.keyboard)`: the screen keeps its height).
+        const keyboard = ignoresKeyboard(root) ? 0 : this.keyboard;
         const safe: Size = {
           width: Math.max(0, screen.width - safeArea.leading - safeArea.trailing),
-          height: Math.max(0, screen.height - safeArea.top - safeArea.bottom),
+          height: Math.max(0, screen.height - safeArea.top - Math.max(safeArea.bottom, keyboard)),
         };
         if (this.env.contentHeight) {
           // An island: the root takes its content's height and sits at the top.
@@ -3591,7 +3611,9 @@ export class LayoutPass {
       this.setFrame(parts.search, field.x, field.y, { width: field.width, height: field.height });
     }
 
-    // The inline title: centered, no wider than 56% of the bar, and clear of
+    // The inline title: centered, in a compact width no wider than 56% of the
+    // bar (as UIKit keeps it on a phone; a wide bar on an iPad or in a split
+    // view's column gives a title all the room its items leave), and clear of
     // whatever the back button and the bar items occupy on either side. Its
     // width is rounded up to whole pixels: snapping floors both edges, which
     // takes up to a pixel off a fractional width at a fractional origin, and
@@ -3615,9 +3637,10 @@ export class LayoutPass {
       // each side), and truncated only when it does not fit even there.
       const roomStart = x + leftUsed + 8;
       const roomEnd = x + size.width - rightUsed - 8;
+      const compactCap = screen.width < REGULAR_WIDTH ? Math.floor(size.width * 0.56) : Infinity;
       const titleWidth = Math.min(
         Math.ceil(this.measurer.measureWidth(title, titleFont) - 0.001),
-        Math.floor(size.width * 0.56),
+        compactCap,
         Math.floor(Math.max(0, roomEnd - roomStart)),
       );
       const centered = x + (size.width - titleWidth) / 2;
@@ -3651,8 +3674,13 @@ export class LayoutPass {
     const bottomCover = Math.max(bottomBarHeight, searchBottom);
     // Under a tab bar the bar (which includes the bottom safe area) is what
     // non-scrolling content must clear; a bottom toolbar already excluded it.
-    const bottomInset =
-      bottomBarHeight === 0 && y + size.height >= screen.height ? Math.max(safeArea.bottom, cctx.bottomBar) : 0;
+    const clears = bottomBarHeight === 0 && y + size.height >= screen.height ? Math.max(safeArea.bottom, cctx.bottomBar) : 0;
+    // The on-screen keyboard (device mode) covers the screen's bottom, the
+    // bars with it: the content stops above it as on iOS (the bars stay
+    // put, covered), and a scroll view runs under only the part of a bar
+    // still showing above it.
+    const keyboard = reachesBottom ? this.keyboard : 0;
+    const bottomInset = Math.max(clears, keyboard - bottomCover);
     // Phase 8: `.ignoresSafeArea` content grows up under the bar (and the
     // large title / search field), which is transparent over it.
     const contentCtx: Context = {
@@ -3663,6 +3691,10 @@ export class LayoutPass {
       barAbove: undefined,
       ...(bottomCover > 0 ? { bottomBar: bottomCover, bottomEdge: y + size.height } : {}),
     };
+    if (keyboard > 0) {
+      contentCtx.bottomBar = Math.max(0, (bottomCover > 0 ? bottomCover : cctx.bottomBar) - keyboard);
+      contentCtx.bottomEdge = y + size.height - keyboard;
+    }
     if (scroller) {
       // iOS 26: the scroll view starts at the top of the screen and its
       // content scrolls under the bar (and the large title moves with it);
@@ -3674,7 +3706,7 @@ export class LayoutPass {
         largeTitle: titleScrolls ? (chrome['largeTitle'] as Rect) : null,
         search: searchRow,
       });
-      this.place(child, contentCtx, { width: content.width, height: content.height + top + bottomCover }, content.x, y);
+      this.place(child, contentCtx, { width: content.width, height: Math.max(0, content.height + top + bottomCover - keyboard) }, content.x, y);
       return;
     }
     if (direct) this.scrollInsets.delete(direct);
@@ -3683,7 +3715,11 @@ export class LayoutPass {
     // One that reaches the bottom of the content runs down under all the
     // content clears there.
     if (!large) contentCtx.barAbove = { top: content.y, height: content.y - y, x, width: size.width };
-    if (bottomCover > 0) contentCtx.bottomBar = bottomCover + bottomInset;
+    if (keyboard > 0) {
+      contentCtx.bottomBar = Math.max(0, (bottomCover > 0 ? bottomCover + clears : cctx.bottomBar) - keyboard);
+    } else if (bottomCover > 0) {
+      contentCtx.bottomBar = bottomCover + clears;
+    }
     if (direct && direct.kind === 'scrollview') {
       this.place(child, contentCtx, { width: content.width, height: content.height }, content.x, content.y);
       return;
@@ -3872,13 +3908,16 @@ export class LayoutPass {
    * centered between the status bar and the tab bar.
    */
   private placeTabContent(tab: LayoutNode, cctx: Context, x: number, y: number, size: Size, barHeight: number): void {
-    const { safeArea } = this.env;
+    const { safeArea, screen } = this.env;
     const topInset = y <= 0 ? safeArea.top : 0;
+    // The keyboard (device mode) covers the tab bar: the content stops above
+    // whichever is taller (a `navstack` handles the keyboard in its screens).
+    const keyboard = y + size.height >= screen.height - EPSILON ? this.keyboard : 0;
     const area: Rect = {
       x,
       y: y + topInset,
       width: size.width,
-      height: Math.max(0, size.height - topInset - barHeight),
+      height: Math.max(0, size.height - topInset - Math.max(barHeight, keyboard)),
     };
     this.setChrome(tab, { content: area });
     const child = this.contentOf(tab);
@@ -3889,8 +3928,9 @@ export class LayoutPass {
       return;
     }
     if (kind === 'list' || kind === 'scrollview') {
-      const height = Math.max(0, size.height - topInset);
-      this.place(child, cctx, { width: size.width, height }, x, y + topInset);
+      const height = Math.max(0, size.height - topInset - keyboard);
+      const ctx: Context = keyboard > 0 ? { ...cctx, bottomBar: Math.max(0, barHeight - keyboard), bottomEdge: y + size.height - keyboard } : cctx;
+      this.place(child, ctx, { width: size.width, height }, x, y + topInset);
       return;
     }
     const proposal: Proposal = { width: area.width, height: area.height };
@@ -4044,20 +4084,23 @@ export class LayoutPass {
    * box touches (or is inside) that safe-area inset band; null when nothing grows.
    */
   private safeAreaExtension(node: LayoutNode, ctx: Context, x: number, y: number, size: Size): EdgeInsets | null {
-    const raw = styleOf(node)['ignoresSafeArea'];
-    if (raw === undefined || raw === null) return null;
+    const style = styleOf(node);
+    const raw = style['ignoresSafeArea'];
     const edges: string[] = raw === 'all' ? [...SAFE_AREA_EDGES] : Array.isArray(raw) ? raw.map(str).filter((e): e is string => e !== null) : [];
-    if (edges.length === 0) return null;
+    // `.ignoresSafeArea(.keyboard)`: the box runs down under the keyboard
+    // the content above it stopped at (device mode, while it is up).
+    const keyboard = style['ignoresKeyboard'] === true ? this.keyboard : 0;
+    if (edges.length === 0 && keyboard === 0) return null;
     const { screen, safeArea } = this.env;
     // Inside a `navscreen` the bar is what the content clears (`ctx.safeTop`);
     // under a tab bar, the bar (`ctx.bottomBar`, which includes the bottom
     // safe area).
     const top = ctx.safeTop;
-    const bottom = Math.max(safeArea.bottom, ctx.bottomBar);
+    const bottom = Math.max(edges.includes('bottom') ? Math.max(safeArea.bottom, ctx.bottomBar) : 0, keyboard);
     const ext: EdgeInsets = { top: 0, leading: 0, bottom: 0, trailing: 0 };
     if (edges.includes('top') && top > 0 && y <= top + EPSILON) ext.top = Math.max(0, y);
     if (edges.includes('leading') && safeArea.leading > 0 && x <= safeArea.leading + EPSILON) ext.leading = Math.max(0, x);
-    if (edges.includes('bottom') && bottom > 0 && y + size.height >= screen.height - bottom - EPSILON) {
+    if (bottom > 0 && y + size.height >= screen.height - bottom - EPSILON) {
       ext.bottom = Math.max(0, screen.height - (y + size.height));
     }
     if (edges.includes('trailing') && safeArea.trailing > 0 && x + size.width >= screen.width - safeArea.trailing - EPSILON) {
@@ -4451,7 +4494,10 @@ export class LayoutPass {
     this.setChrome(node, chrome);
     const child = this.contentOf(node);
     if (!child) return;
-    const proposal: Proposal = { width: content.width, height: content.height };
+    // The keyboard (device mode) covers the sheet's bottom too: a list, a
+    // scroll view or plain content stops above it (a navigation stack's
+    // screens handle it themselves).
+    const covered = Math.max(0, y + size.height - (this.env.screen.height - this.keyboard));
     const kind = unwrapStyled(child).kind;
     if (kind === 'navstack') {
       this.place(child, { ...cctx, barInset: grabberRow }, { width: size.width, height: size.height }, x, y);
@@ -4460,12 +4506,14 @@ export class LayoutPass {
     if (kind === 'list' || kind === 'scrollview') {
       // A scrolling view fills the sheet below the grabber row, if any.
       const top = grabber ? SHEET_GRABBER_ROW : 0;
-      this.place(child, cctx, { width: size.width, height: size.height - top }, x, y + top);
+      this.place(child, cctx, { width: size.width, height: Math.max(0, size.height - top - covered) }, x, y + top);
       return;
     }
+    const area: Rect = { ...content, height: Math.max(0, content.height - covered) };
+    const proposal: Proposal = { width: area.width, height: area.height };
     const childSize = this.measure(child, cctx, proposal);
-    const { dx, dy } = alignIn(content, childSize, 'center');
-    this.place(child, cctx, proposal, content.x + dx, content.y + dy);
+    const { dx, dy } = alignIn(area, childSize, 'center');
+    this.place(child, cctx, proposal, area.x + dx, area.y + dy);
   }
 
   // -------------------------------------------------------------------------

package/src/layout/measure.ts

@@ -30,7 +30,7 @@ export class CanvasTextMeasurer implements TextMeasurer {
 
   measureWidth(text: string, font: ResolvedFont): number {
     if (text.length === 0) return 0;
-    const key = `${font.css}\u0000${text}`;
+    const key = `${font.css}\u0000${font.monospacedDigit ? 'T' : ''}\u0000${text}`;
     const cached = this.cache.get(key);
     if (cached !== undefined) return cached;
     const context = this.acquireContext();
@@ -41,7 +41,9 @@ export class CanvasTextMeasurer implements TextMeasurer {
         context.font = css;
         this.currentFont = css;
       }
-      width = context.measureText(text).width;
+      // A canvas has no `font-variant-numeric`: tabular digits are measured
+      // as the font's widest digit, which is the width a tabular figure takes.
+      width = context.measureText(font.monospacedDigit ? text.replace(/[0-9]/g, this.widestDigit(context, css)) : text).width;
     } else {
       width = this.fallback.measureWidth(text, font);
     }
@@ -50,9 +52,29 @@ export class CanvasTextMeasurer implements TextMeasurer {
     return width;
   }
 
+  private readonly widestDigits = new Map<string, string>();
+
+  /** The font's widest digit (its `font` already set on `context`). */
+  private widestDigit(context: Canvas2D, css: string): string {
+    const known = this.widestDigits.get(css);
+    if (known !== undefined) return known;
+    let widest = '0';
+    let max = -1;
+    for (const digit of '0123456789') {
+      const width = context.measureText(digit).width;
+      if (width > max) {
+        max = width;
+        widest = digit;
+      }
+    }
+    this.widestDigits.set(css, widest);
+    return widest;
+  }
+
   /** Drop cached widths (call when web fonts finish loading). */
   clearCache(): void {
     this.cache.clear();
+    this.widestDigits.clear();
   }
 
   private acquireContext(): Canvas2D | null {

package/src/layout/types.ts

@@ -76,6 +76,8 @@ export interface ResolvedFont {
    */
   weightModifier?: number;
   familyModifier?: FontFamily;
+  /** `.monospacedDigit()`: digits at one width, drawn as `tabular-nums` and measured as the font's widest digit. */
+  monospacedDigit?: boolean;
 }
 
 export interface TextMeasurer {
@@ -108,6 +110,14 @@ export interface LayoutEnvironment {
    * navigation and tab roots still fill the screen.
    */
   contentHeight?: boolean;
+  /**
+   * The height of the on-screen keyboard covering the screen's bottom (device
+   * mode, while a field is being edited), 0 or absent when it is down. As on
+   * iOS it is a bottom safe-area inset: content stops above it (a bar under
+   * it stays put, covered), and a `styled` box with `ignoresKeyboard` runs
+   * under it.
+   */
+  keyboard?: number;
 }
 
 export type TextAlignment = 'leading' | 'center' | 'trailing';

package/src/layout/typography.ts

@@ -155,13 +155,14 @@ export function makeFont(
   family: FontFamily,
   size: number,
   weight: number,
-  modifiers: { weightModifier?: number | undefined; familyModifier?: FontFamily | undefined } = {},
+  modifiers: { weightModifier?: number | undefined; familyModifier?: FontFamily | undefined; monospacedDigit?: boolean | undefined } = {},
 ): ResolvedFont {
   const lineHeight = lineHeightFor(size);
   const css = `${weight} ${formatPx(size)}/${formatPx(lineHeight)} ${FONT_FAMILIES[family]}`;
   const font: ResolvedFont = { family, size, weight, lineHeight, leading: leadingFor(size), css };
   if (modifiers.weightModifier !== undefined) font.weightModifier = modifiers.weightModifier;
   if (modifiers.familyModifier !== undefined) font.familyModifier = modifiers.familyModifier;
+  if (modifiers.monospacedDigit) font.monospacedDigit = true;
   return font;
 }
 
@@ -218,8 +219,17 @@ export function resolveFont(
   // A weight or design without a new font is a modifier the text further in keeps.
   const weightModifier = !isNewFont && explicitWeight !== undefined ? explicitWeight : inherited.weightModifier;
   const familyModifier = !isNewFont && explicitFamily !== undefined ? explicitFamily : inherited.familyModifier;
-  if (!isNewFont && weight === inherited.weight && family === inherited.family && weightModifier === inherited.weightModifier && familyModifier === inherited.familyModifier) {
+  // Tabular digits stay on until a font says otherwise, like a weight modifier.
+  const monospacedDigit = typeof font['monospacedDigit'] === 'boolean' ? font['monospacedDigit'] : inherited.monospacedDigit === true;
+  if (
+    !isNewFont &&
+    weight === inherited.weight &&
+    family === inherited.family &&
+    weightModifier === inherited.weightModifier &&
+    familyModifier === inherited.familyModifier &&
+    monospacedDigit === (inherited.monospacedDigit === true)
+  ) {
     return inherited;
   }
-  return makeFont(family, size, weight, { weightModifier, familyModifier });
+  return makeFont(family, size, weight, { weightModifier, familyModifier, monospacedDigit });
 }

package/src/layoutDom.ts

@@ -34,6 +34,7 @@
  */
 
 import type { LayoutEnvironment, LayoutNode, LayoutResult, Rect, ResolvedFont, TextLayout } from './layout';
+import { hostContentInset } from './hostInset';
 import { listRowBackgroundOf } from './layout';
 import { styleToCSS } from './styles';
 import type { ShapeStyle } from './protocol';
@@ -118,15 +119,8 @@ function applyFrames(ctx: LayoutDomContext, result: LayoutResult, changes: BoxCh
     ids = result.frames.keys();
   }
 
-  for (const id of ids) {
-    const frame = result.frames.get(id);
-    const el = ctx.elements.get(id);
-    const node = ctx.nodes.get(id);
-    if (!el || !node) continue;
-    if (!frame) {
-      boxes.delete(id);
-      continue;
-    }
+  /** 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 relative = { x: box.x - origin.x, y: box.y - origin.y, width: box.width, height: box.height };
@@ -138,11 +132,37 @@ function applyFrames(ctx: LayoutDomContext, result: LayoutResult, changes: BoxCh
       if (node.kind === 'sheet') positionSheetCard(el, box);
       else positionBox(el, box, origin);
     }
+    return { box, moved, previous };
+  };
+
+  const visited = result.changed ? new Set(ids) : null;
+  for (const id of ids) {
+    const frame = result.frames.get(id);
+    const el = ctx.elements.get(id);
+    const node = ctx.nodes.get(id);
+    if (!el || !node) continue;
+    if (!frame) {
+      boxes.delete(id);
+      continue;
+    }
+    const { box, moved, previous } = applyBox(id, node, el, frame);
     // A former menu item that is laid out again (moved out of the menu), or a
     // `viewthatfits` candidate chosen again, shows again.
     if (el.hidden) el.hidden = false;
     applyChrome(result, node, el, box, frame, scrollBottomInset(ctx, result, node, frame), previous === null, changes);
     if (node.kind === 'tab') setTabHidden(el, result.hidden.has(id));
+    // A child the engine did not touch kept its screen frame, but if this
+    // element's box moved, the child's `left`/`top` (relative to it) did
+    // not: the plus button at the bottom of a chat's composer stays put on
+    // screen while the composer grows upwards around it. Re-place such
+    // children; their own subtrees are relative to them and unchanged.
+    if (!moved || !visited) continue;
+    for (const child of node.children) {
+      if (visited.has(child.id)) continue;
+      const childFrame = result.frames.get(child.id);
+      const childEl = ctx.elements.get(child.id);
+      if (childFrame && childEl) applyBox(child.id, child, childEl, childFrame);
+    }
   }
 
   // Phase 6: menu items are hidden without a frame (tabs keep theirs, above);
@@ -414,6 +434,9 @@ function setFont(el: HTMLElement, font: ResolvedFont | undefined, lines = 1): vo
   if (!font) return;
   const css = lines > 1 ? font.css.replace(/\/[\d.]+px /, `/${Math.round(font.leading * 100) / 100}px `) : font.css;
   if (el.style.font !== css) el.style.font = css;
+  // The `font` shorthand resets the variant, so it goes after it.
+  const variant = font.monospacedDigit ? 'tabular-nums' : '';
+  if (el.style.fontVariantNumeric !== variant) el.style.fontVariantNumeric = variant;
 }
 
 const TEXT_ALIGN: Record<string, string> = { leading: 'left', center: 'center', trailing: 'right' };
@@ -466,6 +489,26 @@ function setFlag(el: HTMLElement, key: string, value: string | null): void {
   }
 }
 
+/**
+ * A host's content element goes back into the engine's frame when the host
+ * is drawn in a bigger box (a list row's): src/hostInset.ts. In its own
+ * frame the stylesheet's `width: 100%` (and `height: 100%` for `fill`) hold.
+ */
+function positionHostContent(el: HTMLElement, box: Rect, frame: Rect): void {
+  const content = el.querySelector<HTMLElement>(':scope > .sb-host-content');
+  if (!content) return;
+  const inset = hostContentInset(box, frame);
+  const s = content.style;
+  const left = inset ? `${inset.left}px` : '';
+  const top = inset ? `${inset.top}px` : '';
+  const width = inset ? `${inset.width}px` : '';
+  const height = inset ? `${inset.height}px` : '';
+  if (s.left !== left) s.left = left;
+  if (s.top !== top) s.top = top;
+  if (s.width !== width) s.width = width;
+  if (s.height !== height) s.height = height;
+}
+
 /**
  * For leaf rows: pad the content frame back into place inside the row box.
  * `shift` moves vertically centered content (a one-line field's text) down
@@ -595,6 +638,9 @@ function applyChrome(
       padIntoFrame(el, box, frame);
       return;
     }
+    case 'host':
+      positionHostContent(el, box, frame);
+      return;
     case 'image': {
       const font = result.fonts.get(node.id);
       if (font) {

package/src/main.ts

@@ -2,7 +2,7 @@
 import { easingFor, springEasing, timingFor } from './animation';
 import type { BuildEndPayload, BuildErrorPayload, BuildStartPayload } from './devEvents';
 import { ChromeColor } from './chromeColor';
-import { applyPageMode, decidePageMode, readViewportInsets, watchViewport, type PageMode } from './deviceMode';
+import { applyPageMode, decidePageMode, installViewportReadout, readViewportInsets, watchKeyboard, watchViewport, type PageMode } from './deviceMode';
 import { EMPTY_CATALOG, catalogPath, isAssetCatalog, type AssetCatalog } from './assets';
 import { createMockApp } from './mock';
 import {
@@ -250,6 +250,13 @@ if (deviceMode) {
     // A rotation or window resize may cross the compact / regular threshold.
     if (sentSizeClass !== null && currentSizeClass() !== sentSizeClass) sendEnvironment();
   });
+  // The on-screen keyboard does not shrink `#screen` (the layout viewport
+  // keeps its height); it covers the screen's bottom. The engine gets its
+  // height as a bottom inset, so a field or a chat's composer rises above
+  // it and a scroll view keeps its end in view, as on iOS.
+  // `?debug=viewport` shows the numbers the measurement reads, over the app.
+  const readout = new URLSearchParams(location.search).get('debug') === 'viewport' ? installViewportReadout() : undefined;
+  watchKeyboard((height) => renderer.setKeyboard(height), { root: device, onRead: readout });
 }
 
 // ---------------------------------------------------------------------------

package/src/protocol.ts

@@ -223,6 +223,8 @@ export interface Font {
   relativeTo?: TextStyle;
   weight?: FontWeight;
   design?: FontDesign;
+  /** `.monospacedDigit()`: digits of one width (`font-variant-numeric: tabular-nums`). */
+  monospacedDigit?: boolean;
 }
 
 export type FrameAlignment =
@@ -2140,6 +2142,13 @@ export interface Style {
    * child's proposal and position are unchanged (the extension is background).
    */
   ignoresSafeArea?: 'all' | Edge[];
+  /**
+   * `.ignoresSafeArea(.keyboard)` (and `.all`, the default): while the
+   * on-screen keyboard is up (device mode), the engine extends the box down
+   * under it instead of stopping above it, and a root that carries it keeps
+   * the keyboardless height.
+   */
+  ignoresKeyboard?: boolean;
 }
 
 /** `.repeatCount(_:autoreverses:)` / `.repeatForever(autoreverses:)`. */
@@ -2197,6 +2206,12 @@ export interface ScrollViewProps {
   dismissesKeyboard?: boolean;
   /** As for `list`. */
   edgeEffect?: EdgeEffectProps;
+  /**
+   * `.defaultScrollAnchor(_:)`: the content starts with this point of it at
+   * the same point of the viewport (`{x: 0.5, y: 1}`: the end in view), and
+   * keeps it when the content grows while the viewer is at it (src/scrollAnchor.ts).
+   */
+  defaultScrollAnchor?: UnitPoint;
 }
 
 /**

package/src/renderer.ts

@@ -151,6 +151,7 @@ import { VideoEvents, applyVideo, stopVideos } from './video';
 import { PinchController } from './pinch';
 import { applyCanvas, createCanvasElement } from './canvasDrawing';
 import { scrollToTarget } from './scrollTo';
+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';
@@ -406,6 +407,8 @@ export class Renderer {
   private assetStyle: HTMLStyleElement | null = null;
   /** Safe-area insets; read from the device tokens on first use unless `setSafeArea` set them. */
   private safeArea: LayoutEnvironment['safeArea'] | null = null;
+  /** Device mode: the on-screen keyboard's height over the screen's bottom (`setKeyboard`), 0 while it is down. */
+  private keyboard = 0;
   /** DOM boxes applied by the last layout, by id (see layoutDom.ts). */
   private boxes = new Map<ElementId, Rect>();
   /** Elements whose inline style was reset since the last layout. */
@@ -1208,6 +1211,19 @@ export class Renderer {
     if (this.commits > 0) this.layout();
   }
 
+  /**
+   * Device mode: the on-screen keyboard covers `height` CSS px of the
+   * screen's bottom (0: it is down). The engine treats it as a bottom
+   * safe-area inset, as iOS does: content stops above it, a bar under it
+   * stays put. Re-lays the tree out when it changed.
+   */
+  setKeyboard(height: number): void {
+    const next = Number.isFinite(height) && height > 0 ? Math.round(height) : 0;
+    if (next === this.keyboard) return;
+    this.keyboard = next;
+    if (this.commits > 0) this.layout();
+  }
+
   /**
    * The root's size changed (device mode: a resize or rotation): re-read it
    * and re-lay out now rather than when the ResizeObserver reports it.
@@ -1229,6 +1245,7 @@ export class Renderer {
       colorScheme: this.environment.colorScheme,
       assets: this.assets,
       ...(this.contentHeight ? { contentHeight: true } : {}),
+      ...(this.keyboard > 0 ? { keyboard: this.keyboard } : {}),
     };
   }
 
@@ -1284,6 +1301,8 @@ export class Renderer {
     };
     const changes = applyLayout(ctx, result);
     this.boxes = ctx.boxes;
+    // `.defaultScrollAnchor`: scroll views that keep their end (or another point) in view as they grow.
+    keepScrollAnchors();
     if (this.contentHeight) {
       // The island's root is as tall as its content.
       let bottom = 0;
@@ -3114,6 +3133,7 @@ function applyKindProps(el: HTMLElement, kind: ElementKind, props: ElementProps,
       else delete el.dataset['sbSnap'];
       if (scroll.dismissesKeyboard === true) el.dataset['sbDismissesKeyboard'] = 'true';
       applyEdgeEffect(el, scroll.edgeEffect);
+      applyDefaultScrollAnchor(el, scroll.defaultScrollAnchor);
       break;
     }
     case 'section':
@@ -3826,7 +3846,7 @@ export function applyStyle(el: HTMLElement, style: Style): void {
   }
 
   if (style.font) {
-    const { size, weight, design, textStyle, relativeTo } = style.font;
+    const { size, weight, design, textStyle, relativeTo, monospacedDigit } = style.font;
     if (size != null) {
       // A fixed size; `relativeTo` scales it like that text style (the
       // scale factor is a CSS variable the page sets per Dynamic Type size).
@@ -3849,6 +3869,8 @@ export function applyStyle(el: HTMLElement, style: Style): void {
     else if (design === 'rounded') s.fontFamily = FONT_FAMILY_ROUNDED;
     else if (design === 'serif') s.fontFamily = FONT_FAMILY_SERIF;
     else if (design === 'default') s.fontFamily = 'var(--sb-font-family)';
+    // Inherited by the DOM inside; the engine's text fonts carry it too (setFont).
+    if (monospacedDigit !== undefined) s.fontVariantNumeric = monospacedDigit ? 'tabular-nums' : 'normal';
   }
 
   if (style.foreground) {

package/src/richText.ts

@@ -20,7 +20,7 @@ const drawn = new WeakMap<HTMLElement, { templates: HTMLElement[]; key: string }
 /** Draws the engine's lines of a rich text into its element. */
 export function drawRichText(el: HTMLElement, rich: RichTextLayout): void {
   const templates = runTemplates.get(el) ?? [];
-  const key = JSON.stringify([rich.lines, rich.heights, rich.fonts.map((font) => font.css)]);
+  const key = JSON.stringify([rich.lines, rich.heights, rich.fonts.map((font) => [font.css, font.monospacedDigit === true])]);
   const last = drawn.get(el);
   if (last && last.templates === templates && last.key === key) return;
   drawn.set(el, { templates, key });
@@ -48,7 +48,10 @@ export function drawRichText(el: HTMLElement, rich: RichTextLayout): void {
       }
       const span = (template?.cloneNode(false) as HTMLElement | undefined) ?? doc.createElement('span');
       const font = rich.fonts[fragment.run];
-      if (font) span.style.font = font.css;
+      if (font) {
+        span.style.font = font.css;
+        if (font.monospacedDigit) span.style.fontVariantNumeric = 'tabular-nums';
+      }
       // Every fragment shares the line's baseline (its height is the tallest run's).
       span.style.lineHeight = 'inherit';
       span.textContent = fragment.text;

package/src/scrollAnchor.ts

@@ -0,0 +1,110 @@
+/**
+ * `.defaultScrollAnchor(_:)` on a `ScrollView` (docs/ops-protocol.md, "Default
+ * scroll anchor"): the scroll view carries `defaultScrollAnchor`, a unit
+ * point. The content starts there (`.bottom`: the end is in view, as a chat
+ * opens on its latest message), and when the content or the viewport changes
+ * size in a pass, the anchor is kept *if the viewer was at it* before the
+ * pass: new lines at the end of a chat keep the end in view, while a viewer
+ * who scrolled up to read stays where they are. The offset before the pass
+ * is the one scrollSync.ts read for it, so a pass's own writes do not count
+ * as the viewer's scrolling.
+ */
+
+import type { UnitPoint } from './protocol';
+import { scrollTopOf } from './scrollSync';
+
+/** The scroll offset on one axis that puts the anchor fraction of the content at the same fraction of the viewport. */
+export function anchoredOffset(content: number, viewport: number, anchor: number): number {
+  return Math.max(0, Math.round((content - viewport) * anchor));
+}
+
+/** Within a couple of pixels of the anchor: browsers round offsets, and a smooth scroll may stop short. */
+export const ANCHOR_TOLERANCE = 2;
+
+export function isAtAnchor(offset: number, content: number, viewport: number, anchor: number): boolean {
+  return Math.abs(offset - anchoredOffset(content, viewport, anchor)) <= ANCHOR_TOLERANCE;
+}
+
+/** What `keepAnchor` reads and writes on a scrolling element; `HTMLElement` fits. */
+export interface AnchoredScroller {
+  scrollTop: number;
+  scrollLeft: number;
+  scrollHeight: number;
+  scrollWidth: number;
+  clientHeight: number;
+  clientWidth: number;
+}
+
+/** The extents a scroller had after the last pass. */
+interface Extents {
+  content: { width: number; height: number };
+  viewport: { width: number; height: number };
+}
+
+/**
+ * After a pass laid the scroller out: on its first pass the content goes to
+ * the anchor; after that, an axis whose extents changed keeps the anchor
+ * when `offsetBefore` (the viewer's position before the pass) was at it.
+ * Returns the extents to remember for the next pass.
+ */
+export function keepAnchor(
+  el: AnchoredScroller,
+  anchor: UnitPoint,
+  axes: { horizontal: boolean; vertical: boolean },
+  before: Extents | undefined,
+  offsetBefore: { top: number; left: number },
+): Extents {
+  const now: Extents = { content: { width: el.scrollWidth, height: el.scrollHeight }, viewport: { width: el.clientWidth, height: el.clientHeight } };
+  if (axes.vertical) {
+    const changed = !before || before.content.height !== now.content.height || before.viewport.height !== now.viewport.height;
+    const wasAt = !before || isAtAnchor(offsetBefore.top, before.content.height, before.viewport.height, anchor.y);
+    if (changed && wasAt) el.scrollTop = anchoredOffset(now.content.height, now.viewport.height, anchor.y);
+  }
+  if (axes.horizontal) {
+    const changed = !before || before.content.width !== now.content.width || before.viewport.width !== now.viewport.width;
+    const wasAt = !before || isAtAnchor(offsetBefore.left, before.content.width, before.viewport.width, anchor.x);
+    if (changed && wasAt) el.scrollLeft = anchoredOffset(now.content.width, now.viewport.width, anchor.x);
+  }
+  return now;
+}
+
+const anchors = new WeakMap<HTMLElement, UnitPoint>();
+const extents = new WeakMap<HTMLElement, Extents>();
+const anchored = new Set<HTMLElement>();
+
+/** A scroll view's `defaultScrollAnchor` prop, kept for the passes to come (none: the view scrolls as any other). */
+export function applyDefaultScrollAnchor(el: HTMLElement, anchor: UnitPoint | undefined): void {
+  if (anchor && typeof anchor.x === 'number' && typeof anchor.y === 'number') {
+    anchors.set(el, { x: anchor.x, y: anchor.y });
+    anchored.add(el);
+  } else {
+    anchors.delete(el);
+    extents.delete(el);
+    anchored.delete(el);
+  }
+}
+
+/** The axes a `scrollview` element scrolls on, from its `data-sb-axes`. */
+function axesOf(el: HTMLElement): { horizontal: boolean; vertical: boolean } {
+  const axes = el.dataset['sbAxes'] ?? 'vertical';
+  return { horizontal: axes === 'horizontal' || axes === 'both', vertical: axes !== 'horizontal' };
+}
+
+/** Called by the renderer after each pass's frames are applied: every anchored scroll view keeps (or takes) its anchor. */
+export function keepScrollAnchors(): void {
+  for (const el of anchored) {
+    if (!el.isConnected) {
+      anchored.delete(el);
+      extents.delete(el);
+      continue;
+    }
+    const anchor = anchors.get(el);
+    if (!anchor) continue;
+    extents.set(el, keepAnchor(el, anchor, axesOf(el), extents.get(el), { top: scrollTopOf(el), left: el.scrollLeft }));
+  }
+}
+
+/** For tests: forget every anchored scroller. */
+export function resetScrollAnchors(): void {
+  anchored.clear();
+}

package/src/styles.css

@@ -396,6 +396,22 @@ html[data-sb-mode="device"] .device {
   box-shadow: none;
 }
 
+/* `?debug=viewport` (src/deviceMode.ts installViewportReadout): the viewport
+   numbers the keyboard measurement reads, over the app, under the status bar. */
+.sb-viewport-readout {
+  position: fixed;
+  top: calc(var(--sb-inset-top) + 4px);
+  left: 8px;
+  z-index: 1000;
+  margin: 0;
+  padding: 4px 6px;
+  font: 11px/1.3 ui-monospace, Menlo, monospace;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 6px;
+  pointer-events: none;
+}
+
 html[data-sb-mode="device"] .device::before,
 html[data-sb-mode="device"] .device::after,
 html[data-sb-mode="device"] .dynamic-island,
@@ -1162,12 +1178,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 
 .sb-navbar-title {
   /* Positioned at the engine's `title` rect (Phase 6), centered and truncated
-     to the room the back button and the toolbar items leave. Not a grid item:
-     an absolutely positioned grid child would be placed against its grid
-     area, not the bar's padding box. */
+     to the room the back button and the toolbar items leave; the rect is the
+     only limit on its width (a wide bar on an iPad gives a long title the
+     room). Not a grid item: an absolutely positioned grid child would be
+     placed against its grid area, not the bar's padding box. */
   position: absolute;
   display: block;
-  max-width: 220px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;