@swiftbrowser/web 0.9.3 → 0.9.5

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

@@ -118,15 +118,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 +131,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 +433,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' };

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 {
@@ -14,6 +14,7 @@ import {
   type RendererEvent,
   type ScenePhase,
 } from './protocol';
+import { BrowserHistory } from './browserHistory';
 import { Renderer, RendererError } from './renderer';
 import { withBlockedHosts } from './blockedHosts';
 import { withCORSProxy } from './corsProxy';
@@ -97,6 +98,9 @@ function dispatch(event: RendererEvent): void {
 
 const renderer = new Renderer(screen, dispatch);
 
+// The browser's back pops the app's screens and dismisses its sheets (browserHistory.ts).
+new BrowserHistory(renderer, screen).enable();
+
 // On a phone the browser's status bar strip and safe areas take the color the
 // app draws at its top edge (chromeColor.ts).
 const chromeColor = deviceMode ? new ChromeColor(device, screen) : null;
@@ -246,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 } : {}),
     };
   }
 
@@ -1242,6 +1259,15 @@ export class Renderer {
   /** Called after each layout pass (main.ts keeps the browser chrome's color in step). */
   afterLayout: (() => void) | null = null;
 
+  /**
+   * Sends a tap for an element, as a click on it would: a `navscreen` pops
+   * it (the back button's tap), a `sheet` asks to be dismissed (the scrim's).
+   * For the page's own controls, such as the browser's history (browserHistory.ts).
+   */
+  tap(id: ElementId): void {
+    this.onEvent({ type: 'tap', id });
+  }
+
   /**
    * Run the layout engine over the current tree and position every element.
    * Returns the elements whose box changed. Runs at every `commit`; call it
@@ -1275,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;
@@ -3105,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':
@@ -3817,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).
@@ -3840,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;