@swiftbrowser/web 0.9.2 → 0.9.4

package/README.md

@@ -292,6 +292,25 @@ remains for the landing page and for `/app/` without a parameter. In the
 `/manifest.webmanifest` is the app's, and the page is titled by the app's
 display name alone.
 
+## Browser history
+
+`src/browserHistory.ts` mirrors the app's navigation in the browser's history
+on the app page: pushing a screen or presenting a sheet adds an entry, and the
+browser's back (a phone's edge swipe, the toolbar button, Alt+Left) pops or
+dismisses it through the same `tap` the bar's back button and the sheet's
+scrim send, so Swift's state stays the source of truth. A pop the app makes
+itself takes the history back with it, and forward returns to the entry that
+matches rather than re-pushing. Depth is read from the DOM after every
+`commit`: the presented sheets plus the pushed screens of each visible stack
+(the selected tab's, both columns of a split view, the top sheet's). The URL
+is left alone. While it is on, the renderer's own edge swipe ignores touch and
+pen: the browser's edge swipe is the swipe back, and it arrives as a
+`popstate` (a mouse drag from the edge still pops through the renderer).
+Its own `history.go` after a pop the app made itself is remembered until the
+`popstate` lands, so commits meanwhile do not go back again.
+An island has it on by default and opts out with `mount(..., { history: false })`
+(`<SwiftUIView history={false}>` in @swiftbrowser/react).
+
 ## Deploying (Cloudflare Pages)
 
 `npm run build` writes a static site to `dist/`: `index.html`, `app/index.html`,

package/package.json

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

@@ -0,0 +1,199 @@
+/**
+ * The browser's history as the app's navigation: pushing a screen or
+ * presenting a sheet adds a history entry, and the browser's back (a
+ * phone's edge swipe, the toolbar button, Alt+Left) pops or dismisses it,
+ * as the bar's own back button would. Forward cannot re-push a screen, so a
+ * forward step lands back where the app is.
+ *
+ * Depth is read from the DOM after every commit: the presented sheets, plus
+ * the pushed screens of every visible stack (the selected tab's, both
+ * columns of a split view, the top sheet's). Pops go through the same event
+ * the back button and the scrim send, so the app's own state stays the
+ * source of truth; the page's URL is never touched, and an app that maps
+ * screens to paths should set them with `replaceState` on the entry the
+ * renderer made.
+ *
+ * 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
+ * still pops through the renderer, since no browser turns one into history.
+ */
+import type { Renderer } from './renderer';
+
+interface HistoryState {
+  /** Our marker; entries without it belong to the page or the app. */
+  sbHistory: true;
+  /** How many levels (screens and sheets) are above the base in this entry. */
+  sbDepth: number;
+}
+
+/** What the renderer's elements need to say for this to read them (`sbId`, `sbDepth` datasets). */
+const stateOf = (value: unknown): HistoryState | null => (typeof value === 'object' && value !== null && (value as HistoryState).sbHistory === true ? (value as HistoryState) : null);
+
+function shown(win: Window, el: HTMLElement): boolean {
+  if (el.hidden || el.getClientRects().length === 0) return false;
+  return win.getComputedStyle(el).visibility !== 'hidden';
+}
+
+export class BrowserHistory {
+  private readonly win: Window;
+  /** Levels the latest `popstate` still asks to dismiss, one commit at a time. */
+  private pendingPops = 0;
+  /** `popstate` events to ignore: the ones our own `history.go` causes. */
+  private ignorePops = 0;
+  /**
+   * The depth our own `history.go` is travelling to while its `popstate` is
+   * still on its way (`go` is asynchronous): commits meanwhile compare
+   * against it, so a second commit does not go back a second time.
+   */
+  private movingTo: number | null = null;
+  private movingTimer: ReturnType<typeof setTimeout> | null = null;
+  private enabled = false;
+
+  constructor(
+    private readonly renderer: Renderer,
+    private readonly root: HTMLElement,
+    win: Window = window,
+  ) {
+    this.win = win;
+  }
+
+  /** Marks the current entry as the base and starts mirroring pushes and pops. */
+  enable(): void {
+    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 }, '');
+    this.renderer.interaction.nativeBackGesture = true;
+    this.root.addEventListener('sb:commit', this.onCommit);
+    this.win.addEventListener('popstate', this.onPopState);
+    this.sync();
+  }
+
+  dispose(): void {
+    if (!this.enabled) return;
+    this.enabled = false;
+    this.renderer.interaction.nativeBackGesture = false;
+    if (this.movingTimer) clearTimeout(this.movingTimer);
+    this.movingTo = null;
+    this.root.removeEventListener('sb:commit', this.onCommit);
+    this.win.removeEventListener('popstate', this.onPopState);
+  }
+
+  /** The levels above the base the app shows now: sheets, plus pushed screens in each visible stack of the top layer. */
+  depth(): number {
+    const sheets = this.sheets();
+    const top = sheets.at(-1) ?? this.root;
+    let depth = sheets.length;
+    for (const stack of this.stacks(top)) depth += this.topDepth(stack);
+    return depth;
+  }
+
+  private sheets(): HTMLElement[] {
+    return [...this.root.querySelectorAll<HTMLElement>(':scope > .sb-sheet')].filter((sheet) => shown(this.win, sheet));
+  }
+
+  /** The visible navigation stacks within `container`, not those inside a deeper sheet. */
+  private stacks(container: HTMLElement): HTMLElement[] {
+    return [...container.querySelectorAll<HTMLElement>('.sb-navstack')].filter((stack) => shown(this.win, stack) && stack.closest('.sb-sheet') === (container.classList.contains('sb-sheet') ? container : null));
+  }
+
+  private topScreen(stack: HTMLElement): HTMLElement | null {
+    const screens = stack.querySelectorAll<HTMLElement>(':scope > .sb-slot > .sb-navscreen');
+    return screens.length ? screens[screens.length - 1]! : null;
+  }
+
+  private topDepth(stack: HTMLElement): number {
+    const top = this.topScreen(stack);
+    return top ? Number(top.dataset['sbDepth'] ?? '0') || 0 : 0;
+  }
+
+  /** Asks the app to dismiss one level: the top sheet when nothing is pushed inside it, else the deepest visible stack's top screen. */
+  private dismissOne(): boolean {
+    const sheets = this.sheets();
+    const top = sheets.at(-1) ?? this.root;
+    const stacks = this.stacks(top)
+      .map((stack) => ({ stack, depth: this.topDepth(stack) }))
+      .filter((s) => s.depth > 0)
+      .sort((a, b) => b.depth - a.depth);
+    const deepest = stacks[0];
+    if (deepest) {
+      const screen = this.topScreen(deepest.stack);
+      const id = Number(screen?.dataset['sbId']);
+      if (!Number.isInteger(id)) return false;
+      this.renderer.tap(id); // what the back button sends
+      return true;
+    }
+    const sheet = sheets.at(-1);
+    const id = Number(sheet?.dataset['sbId']);
+    if (!Number.isInteger(id)) return false;
+    this.renderer.tap(id); // a dismiss request, as the scrim's tap
+    return true;
+  }
+
+  private recorded(): number {
+    return this.movingTo ?? stateOf(this.win.history.state)?.sbDepth ?? 0;
+  }
+
+  /** 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;
+    this.movingTo = to;
+    if (this.movingTimer) clearTimeout(this.movingTimer);
+    this.movingTimer = setTimeout(() => {
+      if (this.movingTo === null) return;
+      this.movingTo = null;
+      this.ignorePops = Math.max(0, this.ignorePops - 1);
+    }, 1000);
+    this.win.history.go(delta);
+  }
+
+  private arrived(): void {
+    this.movingTo = null;
+    if (this.movingTimer) clearTimeout(this.movingTimer);
+    this.movingTimer = null;
+  }
+
+  private readonly onCommit = (): void => this.sync();
+
+  /** After a commit: new levels get entries; levels the app dismissed itself take the history back with them. */
+  sync(): void {
+    if (!this.enabled) return;
+    const depth = this.depth();
+    const recorded = this.recorded();
+    if (this.pendingPops > 0) {
+      // Dismissing for a `popstate`: the entry already names the target depth.
+      if (depth > recorded) {
+        if (!this.dismissOne()) this.pendingPops = 0;
+        else this.pendingPops -= 1;
+      } else this.pendingPops = 0;
+      return;
+    }
+    if (depth > recorded) {
+      for (let level = recorded + 1; level <= depth; level++) this.win.history.pushState({ sbHistory: true, sbDepth: level } satisfies HistoryState, '');
+    } else if (depth < recorded) {
+      // The app popped or dismissed on its own (back button, swipe, code): leave those entries.
+      this.go(depth - recorded, depth);
+    }
+  }
+
+  private readonly onPopState = (event: PopStateEvent): void => {
+    if (this.ignorePops > 0) {
+      this.ignorePops -= 1;
+      this.arrived();
+      return;
+    }
+    const target = stateOf(event.state);
+    if (!target) return; // an entry of the page's own (before the base, or the app's router): not ours
+    const depth = this.depth();
+    if (target.sbDepth < depth) {
+      // Back: dismiss one level now, the rest as each commit lands.
+      this.pendingPops = depth - target.sbDepth;
+      if (!this.dismissOne()) this.pendingPops = 0;
+      else this.pendingPops -= 1;
+    } else if (target.sbDepth > depth) {
+      // Forward: a screen cannot be re-pushed; return to the entry that matches.
+      this.go(depth - target.sbDepth, depth);
+    }
+  };
+}

package/src/interaction.ts

@@ -202,6 +202,14 @@ export class InteractionController {
   private session: Session | null = null;
   private openSwipe: OpenSwipe | null = null;
   private swipeBack: SwipeBackState | null = null;
+  /**
+   * The browser's own back gesture is in charge (browserHistory.ts mirrors
+   * navigation in the history): the renderer's edge swipe then ignores touch
+   * and pen, whose edge swipe the browser turns into a `popstate` that pops,
+   * so running both would pop twice. A mouse drag from the edge still pops
+   * here: no browser navigates on one.
+   */
+  nativeBackGesture = false;
   /** Wheel-driven swipe of a row: the host, its live offset and the idle timer that settles it. */
   private wheelSwipe: { host: SwipeHost; offset: number; timer: number } | null = null;
   /** Wheel-driven pull at the top of a refreshable scroller. */
@@ -426,7 +434,8 @@ export class InteractionController {
     }
     const byPress = event.pointerType !== 'mouse';
     const screen = target.closest<HTMLElement>('.sb-navscreen');
-    if (screen && screen.dataset['sbNavPosition'] === 'top' && Number(screen.dataset['sbDepth'] ?? '0') > 0 && !this.swipeBack) {
+    const browserSwipes = this.nativeBackGesture && event.pointerType !== 'mouse';
+    if (!browserSwipes && screen && screen.dataset['sbNavPosition'] === 'top' && Number(screen.dataset['sbDepth'] ?? '0') > 0 && !this.swipeBack) {
       const rect = screen.getBoundingClientRect();
       const id = Number(screen.dataset[ID_ATTR]);
       if (event.clientX - rect.left <= SWIPE_BACK_EDGE && Number.isInteger(id)) {

package/src/layout/engine.ts

@@ -3130,6 +3130,9 @@ export class LayoutPass {
         this.placeDatePicker(node, ctx, p, x, y, size);
         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);
         return;
       case 'swipeactions':
       case 'contextmenu': {

package/src/layoutDom.ts

@@ -492,6 +492,30 @@ function padIntoFrame(el: HTMLElement, box: Rect, frame: Rect, shift = 0): void
   if (s.paddingBottom !== paddingBottom) s.paddingBottom = paddingBottom;
 }
 
+/**
+ * A vertical field's textarea draws every line a leading apart, where the
+ * engine sized it as a Text: its first line a line height tall, the rest a
+ * leading apart. The textarea's lines need the difference more (2 px for
+ * the body style); without it they overflow by that much, and the textarea
+ * scrolls its text up while it is edited. The difference comes out of the
+ * padding below the lines (a list row's, a rounded border's), else the box
+ * reaches that much further down (into the space below it, which its lines
+ * leave empty).
+ */
+function fitFieldLines(el: HTMLTextAreaElement, font: ResolvedFont, box: Rect, frame: Rect): void {
+  const extra = Math.ceil(font.leading - font.lineHeight - 0.01);
+  if (extra <= 0) return;
+  const s = el.style;
+  const below = box.y + box.height - (frame.y + frame.height);
+  const padding = below > 0 ? below : el.dataset['sbStyle'] === 'roundedBorder' ? ROUNDED_FIELD_INSET : 0;
+  s.paddingBottom = `${Math.max(0, padding - extra)}px`;
+  const height = `${box.height + Math.max(0, extra - padding)}px`;
+  if (s.height !== height) s.height = height;
+}
+
+/** A rounded border field's padding above and below its lines (styles.css: the engine's inset of 6, less the 1 px border). */
+const ROUNDED_FIELD_INSET = 5;
+
 const fieldCapShifts = new Map<string, number>();
 
 /**
@@ -597,6 +621,7 @@ function applyChrome(
           ? fieldCapShift(font) + (line ? line.y - frame.y - (frame.height - font.lineHeight) / 2 : 0)
           : 0;
       padIntoFrame(el, box, frame, shift);
+      if (el instanceof HTMLTextAreaElement && node.kind === 'textfield' && font) fitFieldLines(el, font, box, frame);
       return;
     }
     // Phase 8 controls: their chrome sits at the engine's rects inside the element's box.

package/src/main.ts

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

package/src/renderer.ts

@@ -433,10 +433,35 @@ export class Renderer {
   /** The highest `scrollTo` serial seen: a command keeps its serial until the reader re-runs, and runs once. */
   private scrollSerial = 0;
 
+  /**
+   * A row that taps its button (`rowAction`) highlights while pressed, as a
+   * row that is a button does (`:active`, styles.css): until the pointer is
+   * released or the press turns into a scroll.
+   */
+  private readonly onRowPress = (event: PointerEvent): void => {
+    const hit = event.target as HTMLElement | null;
+    if (!hit || !event.isPrimary || hit.closest('.sb-button, .sb-navlink')) return;
+    const button = rowAction(hit, this.root);
+    const row = button ? listRowOf(button, this.root) : null;
+    if (!row) return;
+    row.dataset['sbRowPressed'] = '';
+    const release = (): void => {
+      delete row.dataset['sbRowPressed'];
+      window.removeEventListener('pointerup', release, true);
+      window.removeEventListener('pointercancel', release, true);
+      this.root.removeEventListener('scroll', release, true);
+    };
+    window.addEventListener('pointerup', release, true);
+    window.addEventListener('pointercancel', release, true);
+    this.root.addEventListener('scroll', release, true);
+  };
+
   private readonly onClick = (event: MouseEvent): void => {
     // `closest` picks the innermost control, so a button inside a
-    // `tapgesture` (or a menu label) handles the click alone.
-    const target = (event.target as HTMLElement | null)?.closest<HTMLElement>(
+    // `tapgesture` (or a menu label) handles the click alone. Elsewhere in
+    // a list row, the row's one button (`rowAction`).
+    const hit = event.target as HTMLElement | null;
+    const target = hit?.closest<HTMLElement>(
       '.sb-button, .sb-navlink, .sb-navbar-back, .sb-navbar-more, .sb-navsplit-toggle, .sb-switch, .sb-sheet-scrim, ' +
         '.sb-tabbar-item, .sb-segment, .sb-picker-option, .sb-picker-menu-item, .sb-picker[data-sb-style="menu"], ' +
         '.sb-menu, .sb-tapgesture, .sb-stepper-button, .sb-alert-scrim, .sb-alert-ok, ' +
@@ -444,7 +469,7 @@ export class Renderer {
         '.sb-swipe-action, .sb-listrow-control, .sb-listrow[data-sb-selectable], ' +
         // A link in a rich text: innermost, so it wins over a tappable row around the text
         '.sb-link',
-    );
+    ) ?? (hit ? rowAction(hit, this.root) : null);
     if (!target || !this.root.contains(target)) return;
     if (target.classList.contains('sb-link')) {
       const text = target.closest<HTMLElement>('.sb-text');
@@ -820,6 +845,7 @@ export class Renderer {
     // Delegated listeners instead of one per control: elements can be
     // created detached and moved around freely.
     root.addEventListener('click', this.onClick);
+    root.addEventListener('pointerdown', this.onRowPress);
     root.addEventListener('keydown', this.onKeyDown);
     root.addEventListener('input', this.onInput);
     root.addEventListener('focusin', this.onFocusChange);
@@ -1216,6 +1242,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
@@ -1502,6 +1537,7 @@ export class Renderer {
   dispose(): void {
     this.closeMenu();
     this.root.removeEventListener('click', this.onClick);
+    this.root.removeEventListener('pointerdown', this.onRowPress);
     this.root.removeEventListener('keydown', this.onKeyDown);
     this.root.removeEventListener('input', this.onInput);
     this.root.removeEventListener('focusin', this.onFocusChange);
@@ -1688,12 +1724,17 @@ export class Renderer {
     // props produced before applying the new ones. The layout box is kept:
     // the engine re-lays out at `commit`, and removals recorded later in the
     // pass measure their old position against intact ancestors.
-    const { left, top, width, height } = el.style;
-    el.removeAttribute('style');
-    if (left) el.style.left = left;
-    if (top) el.style.top = top;
-    if (width) el.style.width = width;
-    if (height) el.style.height = height;
+    // A text input's props produce no inline style (layout sets its box,
+    // font and padding), and it is updated on every keystroke while it is
+    // being edited: its style stays as it is.
+    if (kind !== 'textfield' && kind !== 'texteditor') {
+      const { left, top, width, height } = el.style;
+      el.removeAttribute('style');
+      if (left) el.style.left = left;
+      if (top) el.style.top = top;
+      if (width) el.style.width = width;
+      if (height) el.style.height = height;
+    }
     for (const key of Object.keys(el.dataset)) {
       if (key !== ID_ATTR && key !== KIND_ATTR) delete el.dataset[key];
     }
@@ -2510,6 +2551,38 @@ function createShell(kind: ElementKind): HTMLElement {
   }
 }
 
+/** The list row `el` is in (a direct child of a section's rows or a list's content), or null. */
+function listRowOf(el: HTMLElement, root: HTMLElement): HTMLElement | null {
+  for (let node: HTMLElement | null = el; node && node !== root; node = node.parentElement) {
+    const parent = node.parentElement;
+    if (parent?.classList.contains('sb-section-rows') || parent?.classList.contains('sb-list-content')) return node;
+  }
+  return null;
+}
+
+/** Controls a row may hold besides its button for the row to stay the button's: none. */
+const ROW_CONTROLS =
+  'input, textarea, .sb-navlink, .sb-switch, .sb-picker, .sb-stepper, .sb-slider, .sb-menu, .sb-tapgesture, .sb-link, .sb-datepicker';
+
+/**
+ * A list row holding one button (with other views beside it, or under a
+ * modifier) taps the button wherever it is tapped, as a UITableView cell
+ * does on iOS; a row that is the button itself is that already. Not a
+ * `.plain` or `.borderless` button (both arrive as `plain`), which SwiftUI
+ * keeps to its own label in a row, a disabled one, or a row with other
+ * controls.
+ */
+function rowAction(el: HTMLElement, root: HTMLElement): HTMLElement | null {
+  const row = listRowOf(el, root);
+  if (!row || row.matches('.sb-button, .sb-navlink, .sb-listrow[data-sb-selectable]')) return null;
+  const buttons = row.querySelectorAll<HTMLElement>('.sb-button');
+  if (buttons.length !== 1) return null;
+  const button = buttons[0]!;
+  if (button.dataset['sbStyle'] === 'plain' || button.closest('[data-sb-disabled]')) return null;
+  if (row.querySelector(ROW_CONTROLS)) return null;
+  return button;
+}
+
 /** A vertical `textfield`: a `<textarea>` the layout sizes to its lines. */
 function createMultilineField(): HTMLTextAreaElement {
   const el = document.createElement('textarea');
@@ -3565,7 +3638,8 @@ function applyTextField(input: HTMLInputElement | HTMLTextAreaElement, props: Te
   // A vertical field is a `<textarea>`, which has no type.
   if (input instanceof HTMLInputElement) input.type = props.secure ? 'password' : 'text';
   else input.dataset['sbAxis'] = 'vertical';
-  input.placeholder = props.placeholder ?? '';
+  const placeholder = props.placeholder ?? '';
+  if (input.placeholder !== placeholder) input.placeholder = placeholder;
   input.dataset['sbStyle'] = props.style ?? 'plain';
   const text = props.text ?? '';
   // Leave the caret alone when Swift echoes the value the field already shows.

package/src/styles.css

@@ -196,6 +196,14 @@
 
 .device {
   position: relative;
+  /* iOS Safari inflates the text of wide multi-line blocks it judges hard to
+     read ("text autosizing"): a wrapped section footer or paragraph would draw
+     a size up from the one the engine measured it at and run into what
+     follows. page.css pins this on the document in device mode; an island
+     (@swiftbrowser/react) lives in a page that may not, so pin it here too.
+     Inherited, so it covers everything the frame draws. */
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 /* The iPhone's size and bezel: the frame's only. An island (`.sb-island`,
@@ -759,6 +767,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   color: var(--sb-color-placeholder);
 }
 
+/* A UITextField's rounded rect: the same with the focus as without (iOS
+   draws no focus ring or tinted border on it). */
 .sb-textfield[data-sb-style="roundedBorder"] {
   padding: 0 7px;
   border: 1px solid var(--sb-color-field-border);
@@ -766,11 +776,6 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   background: var(--sb-color-field-background);
 }
 
-.sb-textfield[data-sb-style="roundedBorder"]:focus-visible {
-  border-color: var(--sb-color-accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sb-color-accent) 30%, transparent);
-}
-
 /* Toggle: the label children are positioned by their frames; the switch sits
    at the engine's `switch` rect (51×31 at the trailing edge). */
 .sb-switch {
@@ -969,6 +974,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   background: var(--sb-color-fill);
 }
 
+/* A row whose one button it taps (renderer.ts `rowAction`), while pressed. */
+.sb-section-rows > [data-sb-row-pressed],
+.sb-list-content > [data-sb-row-pressed] {
+  background: var(--sb-color-fill);
+}
+
 /* ---------------------------------------------------------------------------
    Phase 2: navigation
    ------------------------------------------------------------------------- */
@@ -2901,6 +2912,14 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: auto;
 }
 
+/* A list row is content however it is made (a stack, a modifier box): its
+   empty space is the cell's, and a tap there taps the row's one button
+   (renderer.ts `rowAction`), as on iOS. */
+.sb-section-rows > [data-sb-kind],
+.sb-list-content > [data-sb-kind] {
+  pointer-events: auto;
+}
+
 .sb-styled[data-sb-background] {
   pointer-events: auto;
 }
@@ -3749,14 +3768,17 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 }
 
 /* ---------------------------------------------------------------------------
-   Text editor: a borderless textarea filling its frame in the body font (its
-   parent provides any frame or background).
+   Text editor: a borderless textarea filling its frame in its context's font
+   (layoutDom.ts; its parent provides any frame or background). Its text is
+   inset as a UITextView's is: 8 above and below (`textContainerInset`), 5 at
+   the sides (`lineFragmentPadding`).
    ------------------------------------------------------------------------- */
 .sb-texteditor {
   appearance: none;
   display: block;
+  box-sizing: border-box;
   margin: 0;
-  padding: 0;
+  padding: 8px 5px;
   border: 0;
   outline: none;
   resize: none;

package/src/symbols.ts

@@ -577,6 +577,20 @@ const QUESTIONMARK: IconNode = [
   ['path', { d: 'M12 20.5h.01' }],
 ];
 
+/**
+ * `tray.fill`: the tray's silhouette (lucide's `Inbox`) filled, split along
+ * its opening's edge, the line with the notch, by a gap: the well above,
+ * the front below. A real gap, not a stroke in the background color, so
+ * whatever is behind the glyph (a selected tab's capsule) shows through.
+ * The pieces' edges along it sit 1.75 from that line, so with their 2 wide
+ * stroke they leave 1.5 between them, the notch's slants offset square to
+ * their direction.
+ */
+const TRAY_FILL: IconNode = [
+  ['path', { d: 'M2.88 10.25 5.45 5.11A2 2 0 0 1 7.24 4h9.52a2 2 0 0 1 1.79 1.11l2.57 5.14h-6.06l-2 3h-2.12l-2-3z' }],
+  ['path', { d: 'M2 13.75h5.06l2 3h5.88l2-3H22V18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z' }],
+];
+
 const outline = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'outline' });
 const knockout = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'knockout' });
 const solid = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'solid' });
@@ -1083,7 +1097,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'envelope.badge': outline(MailWarning),
   'envelope.open.fill': outline(MailOpen),
   'tray.full': outline(Inbox),
-  'tray.fill': solid(Inbox),
+  'tray.fill': solid(TRAY_FILL),
   'tray.and.arrow.down': outline(Inbox),
   'tray.and.arrow.up': outline(Inbox),
   'phone.arrow.up.right': outline(PhoneOutgoing),