@swiftbrowser/web 0.17.8 → 0.18.1

package/src/layout/engine.ts

@@ -87,6 +87,8 @@ export interface Context {
   splitSidebar: boolean;
   /** Inside a leading or trailing item of a navigation bar (a segmented picker there is the bar's own capsule). */
   navBarItem?: boolean;
+  /** Inside an item of a bottom toolbar (a bordered or prominent button there takes the bar's sizes). */
+  bottomBarItem?: boolean;
   /** Rows of a `sidebar`-style list (iPadOS): its links have no chevron. */
   sidebarList?: boolean;
   /**
@@ -125,6 +127,8 @@ export interface Context {
    * a vertical text field is at least this many lines tall. Absent for 1.
    */
   minLines?: number;
+  /** `.scrollDisabled(true)` above: a `texteditor` is as tall as its lines. */
+  scrollDisabled?: boolean;
 }
 
 // Constants from the spec.
@@ -321,6 +325,11 @@ function navSlot(item: LayoutNode, width: number): number {
 // more width gives it a little more room (not text's 18 a side). Alone in its
 // group it is a circle only if it fits an icon's slot; wider, a capsule.
 const BOTTOM_GLASS_HEIGHT = 48;
+/** A `keyboard` toolbar's bar (the input accessory view): 44 across the screen, directly above the keyboard, its items 16 in. */
+/** The keyboard bar (iOS 26's Notes): a 48 glass capsule, 10 in from the screen's sides, 10 above the keyboard. */
+const KEYBOARD_BAR_HEIGHT = 48;
+const KEYBOARD_BAR_MARGIN_H = 10;
+const KEYBOARD_BAR_GAP = 10;
 const BOTTOM_GLASS_MARGIN_H = 28;
 const BOTTOM_ICON_SLOT = 50;
 const BOTTOM_TEXT_PAD_H = 18;
@@ -328,6 +337,58 @@ const BOTTOM_ICON_PAD_H = 8;
 const BOTTOM_ITEM_GAP = 6;
 /** A fixed `ToolbarSpacer` between two bottom groups. */
 const BOTTOM_FIXED_SPACER = 8;
+// A bordered button in a bottom bar stays in its capsule, its slot 2 wider
+// and its fill the slot less 10 (5 a side), 34 tall; a prominent or glass
+// one leaves the capsule for a 48 circle of its own, 12 from the next
+// capsule (measured in the iOS 26.2 simulator, Native BarButtonStyleTests).
+const BOTTOM_BORDERED_GROWTH = 2;
+const BOTTOM_BORDERED_INSET = 10;
+const BOTTOM_BORDERED_HEIGHT = 34;
+const BOTTOM_GROUP_GAP = 12;
+// A `.toggleStyle(.button)` toggle in a bottom bar takes a slot 24 wider
+// than a button's, its pill (drawn while on) the slot less 8 and 50 tall,
+// on or off; its capsule is 60 tall about the same center (iOS 26.2,
+// Native ToolbarToggleTests).
+const BOTTOM_TOGGLE_GROWTH = 24;
+const BOTTOM_TOGGLE_INSET = 8;
+const BOTTOM_TOGGLE_HEIGHT = 50;
+const BOTTOM_TOGGLE_GLASS_HEIGHT = 60;
+
+/** A toggle drawn as a button (`.toggleStyle(.button)`). */
+function isButtonToggle(node: LayoutNode): boolean {
+  return node.kind === 'toggle' && str(node.props['style']) === 'button';
+}
+
+// A toggle of the automatic style in a bar is no switch: it takes a plain
+// button's slot, and while on fills a pill under its label, 10 wider on
+// each side and 36 tall, with the accent (iOS 26.2, Native
+// ToolbarToggleTests: the pen's 42×36, the bar 230 wide on or off).
+const BAR_TOGGLE_PAD_H = 10;
+const BAR_TOGGLE_HEIGHT = 36;
+
+/** A toggle the bar draws as its own (any style but `button` and `switch`). */
+function isBarToggle(node: LayoutNode, ctx: Context): boolean {
+  if (node.kind !== 'toggle' || !(ctx.bottomBarItem || ctx.navBarItem)) return false;
+  const style = str(node.props['style']);
+  return style !== 'button' && style !== 'switch';
+}
+
+/** A bottom bar item's slot in its capsule, from what it draws. */
+function bottomSlot(node: LayoutNode, size: Size): number {
+  if (!hasText(node)) return Math.max(BOTTOM_ICON_SLOT, size.width + 2 * BOTTOM_ICON_PAD_H);
+  return size.width < NAV_GLASS_SIZE ? BOTTOM_ICON_SLOT : size.width + 2 * BOTTOM_TEXT_PAD_H;
+}
+
+/** How a bottom bar item's button is styled: bordered, prominent (or glass), a button toggle, a bar's own toggle, or none of them. */
+function bottomBarStyle(item: LayoutNode): 'bordered' | 'prominent' | 'toggle' | 'barToggle' | null {
+  const inner = unwrapStyled(item);
+  if (isButtonToggle(inner)) return 'toggle';
+  if (inner.kind === 'toggle' && str(inner.props['style']) !== 'switch') return 'barToggle';
+  if (inner.kind !== 'button') return null;
+  const style = str(inner.props['style']);
+  if (style === 'bordered') return 'bordered';
+  return style === 'borderedProminent' || style === 'glass' ? 'prominent' : null;
+}
 const SEARCH_FIELD_HEIGHT = 36;
 const SEARCH_FIELD_MARGIN_H = 16;
 // iOS 26: a navigation stack's search field is a 48-tall glass capsule
@@ -381,6 +442,8 @@ const DATEPICKER_CAPSULE_GAP = 8;
 const DATEPICKER_GAP = 8;
 /** A `texteditor` fills the proposal; 100 high when proposed nil. */
 const TEXTEDITOR_DEFAULT_HEIGHT = 100;
+/** UITextView's insets around a `texteditor`'s lines (`textContainerInset`, `lineFragmentPadding`; styles.css). */
+const TEXTEDITOR_INSET = { horizontal: 5, vertical: 8 };
 /**
  * `alert` style (iOS 26): a 320 wide card centered in the safe area, its
  * title and message leading-aligned 30 in, its buttons 46 tall capsules 16
@@ -397,6 +460,10 @@ const ALERT_BUTTON_SPACING = 8;
 /** Gap between the alert title and its message. */
 const ALERT_TITLE_GAP = 6;
 const ALERT_BUTTON_HEIGHT = 46;
+/** An alert's `textfield` children: 36 tall rows inset as the buttons are, 8 apart, 16 below the message. */
+const ALERT_FIELD_HEIGHT = 36;
+const ALERT_FIELD_SPACING = 8;
+const ALERT_FIELDS_GAP = 16;
 /** Gap between an action sheet's title and its message. */
 const DIALOG_TITLE_GAP = 4;
 /** An action sheet's button labels are inset this much from its rows. */
@@ -527,6 +594,13 @@ function flexibleFrameLength(proposed: number | null, child: number, min: number
   return length;
 }
 
+/** Whether `id` is the node or one of its descendants (a screen asking whether the focused text input is its own). */
+function subtreeHas(node: LayoutNode, id: number): boolean {
+  if (node.id === id) return true;
+  for (const child of node.children) if (subtreeHas(child, id)) return true;
+  return false;
+}
+
 /** Whether a root (through its `styled` wrappers) carries `ignoresKeyboard`: it keeps the keyboardless height. */
 function ignoresKeyboard(node: LayoutNode): boolean {
   let current = node;
@@ -664,6 +738,7 @@ function listRowVPad(row: LayoutNode, sidebar: boolean): number {
     case 'picker':
       return str(row.props['style']) === 'segmented' ? LIST_ROW_SEGMENTED_VPAD : 0;
     case 'toggle':
+      return isButtonToggle(row) ? (sidebar ? LIST_SIDEBAR_ROW_VPAD : LIST_ROW_VPAD) : LIST_ROW_CONTROL_VPAD;
     case 'stepper':
       return LIST_ROW_CONTROL_VPAD;
     default:
@@ -1562,6 +1637,7 @@ export class LayoutPass {
         }
         const imageScale = str(style['imageScale']);
         if (imageScale !== null) next = { ...next, imageScale: IMAGE_SCALES[imageScale] ?? 1 };
+        if (typeof style['scrollDisabled'] === 'boolean') next = { ...next, scrollDisabled: style['scrollDisabled'] };
         return next;
       }
       case 'vstack':
@@ -1579,8 +1655,9 @@ export class LayoutPass {
       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 };
+        const bottomBarItem = placement === 'bottom';
+        if (ctx.stackAxis === null && !ctx.listRow && ctx.navBarItem === navBarItem && ctx.bottomBarItem === bottomBarItem) return ctx;
+        return { ...ctx, stackAxis: null, listRow: false, navBarItem, bottomBarItem };
       }
       case 'gesture':
       case 'swipeactions':
@@ -1742,7 +1819,9 @@ export class LayoutPass {
       case 'datepicker':
         return this.datePickerPlan(node, ctx, p).size;
       case 'texteditor':
-        // A textarea filling the proposal (flexible on an infinite axis, like a shape).
+        // Not scrolling, as tall as its lines; else a textarea filling the
+        // proposal (flexible on an infinite axis, like a shape).
+        if (ctx.scrollDisabled) return this.measureFittingEditor(node, ctx, p);
         return { width: p.width ?? TEXTFIELD_DEFAULT_WIDTH, height: p.height ?? TEXTEDITOR_DEFAULT_HEIGHT };
       case 'layout':
         return this.measureLayout(node, ctx, p);
@@ -1812,6 +1891,41 @@ export class LayoutPass {
     return { width, height: textHeight(lines, ctx.font) + 2 * inset.vertical };
   }
 
+  /**
+   * A `texteditor` under `.scrollDisabled(true)`: the proposed width (200
+   * when unconstrained) and its lines, a leading apart (as the DOM spaces
+   * them), inside UITextView's insets; one line when empty.
+   *
+   * Every line is the context font's leading tall, whatever its runs' fonts
+   * (`richTextPlan`'s own per-line heights, a line height then a leading
+   * per line, with a larger run's font making its line taller, are not
+   * used): the DOM gives the editor one line height, which every run's span
+   * inherits (richEditor.ts `layOutRichEditor`), so its lines are evenly
+   * spaced and the box is as tall as the DOM draws it.
+   */
+  private measureFittingEditor(node: LayoutNode, ctx: Context, p: Proposal): Size {
+    const width = finite(p.width) ? p.width : TEXTFIELD_DEFAULT_WIDTH;
+    const runs = node.props['runs'];
+    const lines = Array.isArray(runs)
+      ? this.editorRunsPlan(node, ctx, p, runs, width).layout.lines.length
+      : wrapText(str(node.props['text']) ?? '', ctx.font, Math.max(1, width - 2 * TEXTEDITOR_INSET.horizontal), null, this.measurer).lines.length;
+    return { width, height: Math.max(1, lines) * ctx.font.leading + 2 * TEXTEDITOR_INSET.vertical };
+  }
+
+  /**
+   * A rich `texteditor`'s runs wrapped inside the insets of a `width` wide
+   * editor, with no line limit (an editor shows every line). Memoized under
+   * the editor's proposal like a text's plan: the measurement of a fitting
+   * editor and the layout the DOM draws (`place`) wrap the runs once per
+   * layout pass, where they used to wrap them twice.
+   */
+  private editorRunsPlan(node: LayoutNode, ctx: Context, p: Proposal, runs: unknown[], width: number): TextPlan {
+    return this.plan(node, ctx, p, () => {
+      const inner = Math.max(1, width - 2 * TEXTEDITOR_INSET.horizontal);
+      return this.richTextPlan(runs, { ...ctx, lineLimit: null }, { width: inner, height: null });
+    });
+  }
+
   private textPlan(node: LayoutNode, ctx: Context, p: Proposal): TextPlan {
     return this.plan(node, ctx, p, () => {
       const runs = node.props['runs'];
@@ -1898,6 +2012,28 @@ export class LayoutPass {
     return { width, height };
   }
 
+  /**
+   * A link row with a badge: iOS draws the count before the chevron
+   * (`Inbox  12 ›`), the chevron at the row's trailing edge. The row was laid
+   * out with the badge's room at the trailing edge, after the link's
+   * chevron; the two trade places.
+   */
+  private badgeBeforeChevron(rowNode: LayoutNode): void {
+    const rowChrome = rowNode.id >= 0 ? this.chrome.get(rowNode.id) : undefined;
+    const badge = rowChrome?.['badge'];
+    if (!badge) return;
+    // Through the row's wrappers (a context menu's content is its first child).
+    const wrappers = new Set(['styled', 'listrow', 'contextmenu', 'swipeactions', 'gesture']);
+    let link: LayoutNode | undefined = rowNode;
+    while (link && link.kind !== 'navlink') link = wrappers.has(link.kind) ? link.children[0] : undefined;
+    const linkChrome = link && link.id >= 0 ? this.chrome.get(link.id) : undefined;
+    const chevron = linkChrome?.['chevron'];
+    if (!chevron || chevron.x > badge.x) return;
+    const end = badge.x + badge.width;
+    linkChrome['chevron'] = { ...chevron, x: end - chevron.width };
+    rowChrome['badge'] = { ...badge, x: end - chevron.width - badge.width };
+  }
+
   private buttonIsBordered(node: LayoutNode): boolean {
     const style = str(node.props['style']);
     return style === 'bordered' || style === 'borderedProminent' || style === 'glass';
@@ -1907,6 +2043,14 @@ export class LayoutPass {
     const label = this.contentOf(node);
     if (!this.buttonIsBordered(node)) return label ? this.measure(label, this.childContext(node, ctx), p) : ZERO;
     const cctx = this.borderedLabelContext(node, ctx);
+    if (ctx.bottomBarItem) {
+      // In a bottom bar (measured in the iOS 26.2 simulator, Native
+      // BarButtonStyleTests): a prominent or glass button is its own 48
+      // circle; a bordered one fills its slot less 10, 34 tall.
+      if (bottomBarStyle(node) === 'prominent') return { width: BOTTOM_GLASS_HEIGHT, height: BOTTOM_GLASS_HEIGHT };
+      const size = label ? this.measure(label, cctx, { width: null, height: null }) : ZERO;
+      return { width: bottomSlot(label ?? node, size) + BOTTOM_BORDERED_GROWTH - BOTTOM_BORDERED_INSET, height: BOTTOM_BORDERED_HEIGHT };
+    }
     const { padV, padH, minHeight } = this.borderedMetrics(node);
     const inner: Proposal = {
       width: shrink(p.width, 2 * padH),
@@ -1936,6 +2080,20 @@ export class LayoutPass {
 
   private measureToggle(node: LayoutNode, ctx: Context, p: Proposal): Size {
     const label = this.contentOf(node);
+    if (isBarToggle(node, ctx)) {
+      const size = label ? this.measure(label, this.childContext(node, ctx), { width: null, height: null }) : ZERO;
+      return { width: size.width + 2 * BAR_TOGGLE_PAD_H, height: BAR_TOGGLE_HEIGHT };
+    }
+    if (isButtonToggle(node)) {
+      if (ctx.bottomBarItem) {
+        const size = label ? this.measure(label, this.childContext(node, ctx), { width: null, height: null }) : ZERO;
+        return { width: bottomSlot(label ?? node, size) + BOTTOM_TOGGLE_GROWTH - BOTTOM_TOGGLE_INSET, height: BOTTOM_TOGGLE_HEIGHT };
+      }
+      // sized as a bordered button, on or off
+      const inner: Proposal = { width: shrink(p.width, 2 * BORDERED_PAD_H), height: shrink(p.height, 2 * BORDERED_PAD_V) };
+      const size = label ? this.measure(label, this.childContext(node, ctx), inner) : ZERO;
+      return { width: size.width + 2 * BORDERED_PAD_H, height: Math.max(BORDERED_MIN_HEIGHT, size.height + 2 * BORDERED_PAD_V) };
+    }
     const labelSize = label
       ? this.measure(label, this.childContext(node, ctx), this.toggleLabelProposal(p))
       : ZERO;
@@ -3002,6 +3160,32 @@ export class LayoutPass {
       }
       case 'toggle': {
         const label = this.contentOf(node);
+        if (isBarToggle(node, ctx)) {
+          // the label centered on its pill (the switch's element, filled while on)
+          const labelSize = label ? this.measure(label, cctx, { width: null, height: null }) : ZERO;
+          const { dx, dy } = alignIn(size, labelSize, 'center');
+          if (label) this.place(label, cctx, { width: null, height: null }, x + dx, y + dy);
+          const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+          this.setChrome(node, {
+            ...existing,
+            label: { x: x + dx, y: y + dy, width: labelSize.width, height: labelSize.height },
+            switch: { x, y, width: size.width, height: size.height },
+          });
+          return;
+        }
+        if (isButtonToggle(node)) {
+          // the label centered in the button (its fill, while on, the toggle's frame)
+          if (!label) return;
+          const inner: Proposal = ctx.bottomBarItem
+            ? { width: null, height: null }
+            : { width: shrink(p.width, 2 * BORDERED_PAD_H), height: shrink(p.height, 2 * BORDERED_PAD_V) };
+          const labelSize = this.measure(label, cctx, inner);
+          const { dx, dy } = alignIn(size, labelSize, 'center');
+          this.place(label, cctx, inner, x + dx, y + dy);
+          const existing = node.id >= 0 ? this.chrome.get(node.id) : undefined;
+          this.setChrome(node, { ...existing, label: { x: x + dx, y: y + dy, width: labelSize.width, height: labelSize.height } });
+          return;
+        }
         const labelProposal = this.toggleLabelProposal(p);
         const labelSize = label ? this.measure(label, cctx, labelProposal) : ZERO;
         const labelY = y + (size.height - labelSize.height) / 2;
@@ -3222,8 +3406,14 @@ export class LayoutPass {
         return;
       case 'texteditor':
         // It draws in the context font, as a field does (the page's own
-        // font otherwise: a serif where the page sets none).
-        if (node.id >= 0) this.fonts.set(node.id, ctx.font);
+        // font otherwise: a serif where the page sets none); a rich one's
+        // runs in theirs.
+        if (node.id < 0) return;
+        this.fonts.set(node.id, ctx.font);
+        if (Array.isArray(node.props['runs'])) {
+          // The plan a fitting editor was measured from (`measureFittingEditor`, memoized).
+          this.text.set(node.id, this.editorRunsPlan(node, ctx, p, node.props['runs'], size.width).layout);
+        }
         return;
       case 'swipeactions':
       case 'contextmenu': {
@@ -3367,6 +3557,7 @@ export class LayoutPass {
           : undefined;
         this.setChrome(row.node, own ? { ...own, ...chrome } : chrome);
         this.place(row.node, rowCtx, row.proposal, rowX, rowY);
+        if (row.badge) this.badgeBeforeChevron(row.node);
         // iOS 26: the separator under a row starts where its first text
         // starts (after a Label's icon), else at the row's content.
         const placed = row.node.id >= 0 ? this.chrome.get(row.node.id) : undefined;
@@ -3434,6 +3625,12 @@ export class LayoutPass {
     const titleItemsHeight = large ? this.largeTitleItemsHeight(parts.toolbars, cctx, size.width) : null;
     const largeHeight = !large ? 0 : titleItemsHeight !== null ? LARGE_TITLE_ITEM_TOP + titleItemsHeight : LARGE_TITLE_HEIGHT;
     const bottomToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'bottom');
+    // `keyboard` toolbars: a glass capsule floating above the keyboard while a
+    // text input of this screen is being edited (as Notes' format bar on
+    // iOS 26; SwiftUI's input accessory view); nothing otherwise.
+    const keyboardToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'keyboard');
+    const focusedField = this.env.focusedField;
+    const keyboardBarShown = keyboardToolbars.some((t) => !isSpacer(t)) && focusedField !== undefined && subtreeHas(node, focusedField);
     const searchMargin = reachesBottom ? SEARCH_BOTTOM_MARGIN : SEARCH_BOTTOM_MARGIN_INSET;
     const bottomBarHeight = bottomToolbars.some((t) => !isSpacer(t))
       ? Math.min(size.height, BOTTOM_GLASS_HEIGHT + searchMargin)
@@ -3447,7 +3644,11 @@ export class LayoutPass {
     // bottom search field rises above it, as iOS 26 docks it on the
     // keyboard, so what is typed into it can be seen; the bars stay put,
     // covered.
-    const keyboard = reachesBottom ? this.keyboard : 0;
+    // With a keyboard bar the keyboard is the bar and its gap taller to the
+    // content; a keyboard the page did not measure (frame mode) is the bottom
+    // safe area.
+    const keyboardAlone = reachesBottom ? this.keyboard : 0;
+    const keyboard = keyboardBarShown ? KEYBOARD_BAR_HEIGHT + KEYBOARD_BAR_GAP + (keyboardAlone > 0 ? keyboardAlone : reachesBottom ? safeArea.bottom : 0) : keyboardAlone;
     const searchLift = searchBottom > 0 ? keyboard : 0;
     const contentTop = barHeight + largeHeight + searchRow;
     const content: Rect = {
@@ -3478,6 +3679,9 @@ export class LayoutPass {
     if (bottomBarHeight > 0) {
       chrome['bottomBar'] = { x, y: y + size.height - bottomBarHeight, width: size.width, height: bottomBarHeight };
     }
+    if (keyboardBarShown) {
+      chrome['keyboardBar'] = { x: x + KEYBOARD_BAR_MARGIN_H, y: y + size.height - keyboard, width: Math.max(0, size.width - 2 * KEYBOARD_BAR_MARGIN_H), height: KEYBOARD_BAR_HEIGHT };
+    }
     const title = str(node.props['title']) ?? '';
     const titleFont = makeFont('system', textStyleSize('headline', dynamicTypeSize), 600);
     const largeTitleFont = makeFont('system', textStyleSize('largeTitle', dynamicTypeSize), 700);
@@ -3498,7 +3702,7 @@ export class LayoutPass {
     for (const spacer of parts.toolbars.filter(isSpacer)) this.hide(spacer, node);
     const barToolbars = parts.toolbars.filter((t) => {
       const placement = str(t.props['placement']);
-      return placement !== 'bottom' && placement !== 'secondary' && placement !== 'largeTitle' && !isSpacer(t);
+      return placement !== 'bottom' && placement !== 'secondary' && placement !== 'largeTitle' && placement !== 'keyboard' && !isSpacer(t);
     });
     const secondaryToolbars = parts.toolbars.filter((t) => str(t.props['placement']) === 'secondary' && !isSpacer(t));
     const groups: Group[] = barToolbars.map((toolbar) => {
@@ -3742,6 +3946,9 @@ export class LayoutPass {
     if (bottomBarHeight > 0) {
       this.placeBottomToolbars(bottomToolbars, cctx, chrome, x, y + size.height - bottomBarHeight, size.width);
     }
+    const keyboardBar = chrome['keyboardBar'];
+    if (keyboardBar) this.placeKeyboardToolbars(keyboardToolbars, cctx, keyboardBar);
+    else for (const toolbar of keyboardToolbars) this.hide(toolbar, node);
     if (parts.search) {
       // The field is the whole capsule (its own measure is a 36pt field).
       const field = chrome['searchField'] as Rect;
@@ -3904,6 +4111,29 @@ export class LayoutPass {
    * `bottomGlass0` … (drawn under the items); each toolbar's frame spans its
    * items.
    */
+  /**
+   * `keyboard` toolbars (`ToolbarItemGroup(placement: .keyboard)`): their
+   * items in one row across the bar, 16 in from either edge, as SwiftUI
+   * lays them out, an `HStack` of the items in the toolbars' order in which
+   * a `Spacer` (a child, or a `ToolbarSpacer` of the placement) takes the
+   * room left over; each toolbar's frame is the bar.
+   */
+  private placeKeyboardToolbars(toolbars: LayoutNode[], cctx: Context, bar: Rect): void {
+    const items: LayoutNode[] = [];
+    for (const toolbar of toolbars) {
+      if (str(toolbar.props['spacer']) !== null) items.push({ id: -1, kind: 'spacer', props: { minLength: str(toolbar.props['spacer']) === 'fixed' ? BOTTOM_FIXED_SPACER : null }, children: [] });
+      else items.push(...toolbar.children);
+    }
+    const row: LayoutNode = { id: -1, kind: 'hstack', props: { spacing: null, alignment: 'center' }, children: items };
+    const first = toolbars.find((toolbar) => str(toolbar.props['spacer']) === null) ?? (toolbars[0] as LayoutNode);
+    const itemCtx = this.childContext(first, cctx);
+    const inner = Math.max(0, bar.width - 2 * NAV_ITEM_MARGIN);
+    const proposal: Proposal = { width: inner, height: bar.height };
+    const rowSize = this.measure(row, itemCtx, proposal);
+    this.place(row, itemCtx, proposal, bar.x + NAV_ITEM_MARGIN, bar.y + (bar.height - rowSize.height) / 2);
+    for (const toolbar of toolbars) this.setFrame(toolbar, bar.x, bar.y, { width: bar.width, height: bar.height });
+  }
+
   private placeBottomToolbars(
     toolbars: LayoutNode[],
     cctx: Context,
@@ -3941,28 +4171,45 @@ export class LayoutPass {
       const itemCtx = this.childContext(toolbar, cctx);
       for (const node of toolbar.children) {
         const size = this.measure(node, itemCtx, { width: null, height: null });
-        const slot = !hasText(node)
-          ? Math.max(BOTTOM_ICON_SLOT, size.width + 2 * BOTTOM_ICON_PAD_H)
-          : size.width < NAV_GLASS_SIZE
-            ? BOTTOM_ICON_SLOT
-            : size.width + 2 * BOTTOM_TEXT_PAD_H;
+        const style = bottomBarStyle(node);
+        if (style === 'prominent') {
+          // its own circle, between the capsules of the items around it
+          close();
+          tokens.push({ kind: 'group', items: [{ node, toolbar, size, slot: BOTTOM_GLASS_HEIGHT }], width: BOTTOM_GLASS_HEIGHT });
+          continue;
+        }
+        // A bar's own toggle takes its label's slot, as a plain button does.
+        const slot =
+          style === 'bordered'
+            ? size.width + BOTTOM_BORDERED_INSET
+            : style === 'toggle'
+              ? size.width + BOTTOM_TOGGLE_INSET
+              : style === 'barToggle'
+                ? bottomSlot(node, { width: size.width - 2 * BAR_TOGGLE_PAD_H, height: size.height })
+                : bottomSlot(node, size);
         open.push({ node, toolbar, size, slot });
       }
     }
     close();
     const inner = Math.max(0, width - 2 * BOTTOM_GLASS_MARGIN_H);
+    // Two capsules with no spacer between them (a prominent item's circle
+    // beside the rest) sit 12 apart.
+    const gapBefore = (index: number): number =>
+      index > 0 && tokens[index]?.kind === 'group' && tokens[index - 1]?.kind === 'group' ? BOTTOM_GROUP_GAP : 0;
     let used = 0;
     let flexible = 0;
-    for (const token of tokens) {
+    tokens.forEach((token, index) => {
+      used += gapBefore(index);
       if (token.kind === 'group') used += token.width;
       else if (token.kind === 'fixed') used += BOTTOM_FIXED_SPACER;
       else flexible += 1;
-    }
+    });
     const share = flexible > 0 ? Math.max(0, inner - used) / flexible : 0;
     let cursor = flexible > 0 ? x + BOTTOM_GLASS_MARGIN_H : x + (width - used) / 2;
     const spans = new Map<LayoutNode, { start: number; end: number }>();
     let glass = 0;
-    for (const token of tokens) {
+    for (const [index, token] of tokens.entries()) {
+      cursor += gapBefore(index);
       if (token.kind === 'flexible') {
         cursor += share;
         continue;
@@ -3971,7 +4218,9 @@ export class LayoutPass {
         cursor += BOTTOM_FIXED_SPACER;
         continue;
       }
-      chrome[`bottomGlass${glass}`] = { x: cursor, y: top, width: token.width, height: BOTTOM_GLASS_HEIGHT };
+      // A button toggle's capsule is taller, about the row's center.
+      const height = token.items.some((item) => bottomBarStyle(item.node) === 'toggle') ? BOTTOM_TOGGLE_GLASS_HEIGHT : BOTTOM_GLASS_HEIGHT;
+      chrome[`bottomGlass${glass}`] = { x: cursor, y: top - (height - BOTTOM_GLASS_HEIGHT) / 2, width: token.width, height };
       glass += 1;
       for (const item of token.items) {
         const itemCtx = this.childContext(item.toolbar, cctx);
@@ -4433,6 +4682,21 @@ export class LayoutPass {
     const chrome: Record<string, Rect> = {};
     const texts: Record<string, TextLayout> = {};
     const roleOf = (child: LayoutNode): string | null => str(unwrapStyled(child).props['role']);
+    // `textfield` children (`.alert { TextField(...); Button(...) }`) go in
+    // the card between the message and the buttons, in their order.
+    const fields = node.children.filter((child) => unwrapStyled(child).kind === 'textfield');
+    const buttons = node.children.filter((child) => !fields.includes(child));
+    const placeFields = (top: number, left: number, width: number): void => {
+      fields.forEach((field, i) => {
+        const rect: Rect = { x: left, y: top + i * (ALERT_FIELD_HEIGHT + ALERT_FIELD_SPACING), width, height: ALERT_FIELD_HEIGHT };
+        chrome[`field${i}`] = rect;
+        const proposal: Proposal = { width: rect.width, height: rect.height };
+        const fieldSize = this.measure(field, cctx, proposal);
+        this.place(field, cctx, proposal, rect.x, rect.y + (rect.height - fieldSize.height) / 2);
+        this.setFrame(field, rect.x, rect.y, { width: rect.width, height: rect.height });
+      });
+    };
+    const fieldsHeight = fields.length > 0 ? fields.length * ALERT_FIELD_HEIGHT + (fields.length - 1) * ALERT_FIELD_SPACING : 0;
 
     const block = (text: string, font: ResolvedFont, width: number, alignment: 'center' | 'leading'): { layout: TextLayout; height: number } => {
       const wrapped = wrapText(text, font, width, null, this.measurer);
@@ -4463,9 +4727,14 @@ export class LayoutPass {
         messageBlock = { ...b, top: h };
         h += b.height;
       }
+      let fieldsTop: number | null = null;
+      if (fields.length > 0) {
+        if (titleBlock || messageBlock) h += ALERT_FIELDS_GAP;
+        fieldsTop = h;
+        h += fieldsHeight;
+      }
       h += ALERT_BUTTONS_GAP;
       const headerHeight = h;
-      const buttons = node.children;
       const rows = buttons.length === 0 ? 1 : buttons.length === 2 ? 1 : buttons.length;
       h += rows * ALERT_BUTTON_HEIGHT + (rows - 1) * ALERT_BUTTON_SPACING + ALERT_PAD_BOTTOM;
       // Centered in the safe area, as iOS does.
@@ -4485,6 +4754,7 @@ export class LayoutPass {
       const buttonsTop = card.y + headerHeight;
       const buttonsX = card.x + ALERT_BUTTON_INSET;
       const buttonsWidth = Math.max(0, cardWidth - 2 * ALERT_BUTTON_INSET);
+      if (fieldsTop !== null) placeFields(card.y + fieldsTop, buttonsX, buttonsWidth);
       if (buttons.length === 0) {
         chrome['ok'] = { x: buttonsX, y: buttonsTop, width: buttonsWidth, height: ALERT_BUTTON_HEIGHT };
       } else if (buttons.length === 2) {
@@ -4534,9 +4804,14 @@ export class LayoutPass {
         }
         h += DIALOG_HEADER_PAD_V;
       }
+      let fieldsTop: number | null = null;
+      if (fields.length > 0) {
+        fieldsTop = h;
+        h += fieldsHeight + DIALOG_HEADER_PAD_V;
+      }
       const headerHeight = h;
-      const cancel = node.children.find((child) => roleOf(child) === 'cancel') ?? null;
-      const others = node.children.filter((child) => child !== cancel);
+      const cancel = buttons.find((child) => roleOf(child) === 'cancel') ?? null;
+      const others = buttons.filter((child) => child !== cancel);
       const rows = others.length === 0 && !cancel ? 1 : others.length;
       h += rows * DIALOG_BUTTON_HEIGHT;
       const bottom = y + size.height - safeArea.bottom - DIALOG_MARGIN;
@@ -4559,6 +4834,7 @@ export class LayoutPass {
         texts['message'] = messageBlock.layout;
       }
       const buttonsTop = card.y + headerHeight;
+      if (fieldsTop !== null) placeFields(card.y + fieldsTop, card.x + DIALOG_HEADER_PAD_H, textWidth);
       if (others.length === 0 && !cancel) {
         chrome['ok'] = { x: card.x, y: buttonsTop, width: cardWidth, height: DIALOG_BUTTON_HEIGHT };
       }

package/src/layout/types.ts

@@ -118,6 +118,12 @@ export interface LayoutEnvironment {
    * under it.
    */
   keyboard?: number;
+  /**
+   * The element id of the text input being edited (a `textfield`, a
+   * `texteditor` or a `searchfield`), when one is: a `navscreen` holding it
+   * shows its `keyboard` toolbars above the keyboard.
+   */
+  focusedField?: number;
 }
 
 export type TextAlignment = 'leading' | 'center' | 'trailing';

package/src/layoutDom.ts

@@ -41,6 +41,7 @@ import type { ShapeStyle } from './protocol';
 import { applyChartChrome } from './chartDom';
 import { bitmapLaidOut } from './bitmaps';
 import { drawRichText } from './richText';
+import { isRichEditor, layOutRichEditor } from './richEditor';
 import { bindScrollUnderBar, largeTitleOf, largeTitleScrolls, largeTitleTextOf } from './largeTitle';
 import { bindScrollEdgeBottom } from './scrollEdge';
 import { beginScrollSyncBatch, flushScrollSyncBatch, type ScrollExtent } from './scrollSync';
@@ -480,7 +481,10 @@ function setTextLayout(el: HTMLElement, layout: TextLayout): void {
  */
 function applyBadge(result: LayoutResult, node: LayoutNode, el: HTMLElement, box: Rect): void {
   const badgeRect = result.chrome.get(node.id)?.['badge'];
-  let badge = el.querySelector<HTMLElement>(':scope > .sb-badge');
+  // A swipeable row draws its content on a layer that slides over its
+  // actions; the badge is part of that content.
+  const host = el.querySelector<HTMLElement>(':scope > .sb-swipe-content') ?? el;
+  let badge = host.querySelector<HTMLElement>(':scope > .sb-badge');
   if (!badgeRect) {
     badge?.remove();
     return;
@@ -489,7 +493,7 @@ function applyBadge(result: LayoutResult, node: LayoutNode, el: HTMLElement, box
     badge = el.ownerDocument.createElement('span');
     badge.className = 'sb-badge';
     badge.setAttribute('aria-hidden', 'true');
-    el.append(badge);
+    host.append(badge);
   }
   placeChrome(badge, badgeRect, box);
   const layout = result.chromeText.get(node.id)?.['badge'];
@@ -673,10 +677,10 @@ function applyChrome(
     }
     case 'textfield':
     case 'texteditor': {
-      // A field draws in its context's font (a vertical one, the font its
-      // lines were measured in, a leading apart).
+      // A field draws in its context's font (a vertical one, or a rich
+      // editor, the font its lines were measured in, a leading apart).
       const font = result.fonts.get(node.id);
-      setFont(el, font, el instanceof HTMLTextAreaElement ? 2 : 1);
+      setFont(el, font, el instanceof HTMLInputElement ? 1 : 2);
       // A one-line field's text sits where a centered Text's would (the
       // engine's `text` rect, snapped as a label beside it is): the input
       // centers its line in the frame, so move it by the difference.
@@ -687,6 +691,8 @@ function applyChrome(
           : 0;
       padIntoFrame(el, box, frame, shift);
       if (el instanceof HTMLTextAreaElement && node.kind === 'textfield' && font) fitFieldLines(el, font, box, frame);
+      // A rich editor's runs, each in the font it was measured in.
+      if (isRichEditor(el)) layOutRichEditor(el, result.text.get(node.id));
       return;
     }
     // Phase 8 controls: their chrome sits at the engine's rects inside the element's box.
@@ -844,6 +850,8 @@ function applyChrome(
         bar.style.paddingBottom = `${bottom}px`;
       }
       syncBarGlass(result, node, el, chrome, frame, isNew, changes);
+      // The `keyboard` toolbars' bar above the keyboard while a text input of the screen is focused.
+      placeChrome(el.querySelector<HTMLElement>(':scope > .sb-navscreen-body > .sb-keyboard-bar'), chrome?.['keyboardBar'], frame);
       // iOS 26 in a tab view: the search field under the title (styles.css).
       setFlag(el, 'sbSearchTop', chrome?.['searchTop'] ? '' : null);
       const largeRect = chrome?.['largeTitle'];

package/src/main.ts

@@ -20,6 +20,7 @@ import { withBlockedHosts } from './blockedHosts';
 import { withCORSProxy } from './corsProxy';
 import { browserEnvironment, installPushService } from './hostRequests';
 import { locateBundleFiles } from './media';
+import { relayUndo } from './undo';
 import { callbackPageURL } from './webAuth';
 import { bitmapStore } from './bitmaps';
 import { DEFAULT_TYPE_SIZE, applyTypeSizeVariables } from './typography';
@@ -640,6 +641,9 @@ async function boot(): Promise<void> {
       ),
       assetURL: (name) => assets.images[name]?.src,
       bitmapFile: (recipe) => bitmapStore.png(recipe),
+      // The app's undo manager reports its state in `undo` requests; the
+      // keyboard's undo and redo go back to it as events (undo.ts).
+      ...(browserEnvironment.undoManager ? { undoManager: relayUndo(browserEnvironment.undoManager, dispatch) } : {}),
     },
     onSwiftData: (op) => {
       swiftData?.apply(op).catch((error: unknown) => console.warn('[sb] could not save to IndexedDB', error));