@swiftbrowser/web 0.1.0 → 0.2.0

package/src/renderer.ts

@@ -51,6 +51,9 @@ import {
   type Rect,
 } from './layout';
 import { LayoutReporter } from './layoutEvents';
+import { createGaugeRing, isCircularGauge, updateGaugeRing } from './gaugeRing';
+import { bitmapStore, showBitmap } from './bitmaps';
+import { clearRichText, runTemplates } from './richText';
 import { applyLayout, setTabHidden, type BoxChange } from './layoutDom';
 import { ghostClone } from './ghost';
 import { InteractionController, type InteractionHost } from './interaction';
@@ -59,6 +62,8 @@ import {
   INTERACTION_KINDS,
   ROOT_ID,
   isAssetImage,
+  isBitmapImage,
+  isUrlImage,
   type Animation,
   type ButtonProps,
   type ChartItemProps,
@@ -84,6 +89,7 @@ import {
   type ListProps,
   type ListRowProps,
   type NavLinkProps,
+  type TapGestureProps,
   type NavScreenProps,
   type Op,
   type PickerProps,
@@ -101,6 +107,8 @@ import {
   type TabViewProps,
   type TextFieldProps,
   type TextProps,
+  type TextRun,
+  type ShapeStyle,
   type ToggleProps,
   type ToolbarProps,
   type ViewThatFitsProps,
@@ -113,6 +121,11 @@ import {
   type StepperProps,
   type TextEditorProps,
   type RootProps,
+  type ScrollToCommand,
+  type VideoProps,
+  type CanvasProps,
+  type Color,
+  type LazySpacerProps,
 } from './protocol';
 import {
   combineDateSeconds,
@@ -125,8 +138,13 @@ import {
   timeInputValue,
 } from './layout';
 import { renderSymbol } from './symbols';
+import { applyPathShape, hasPathFrames, playPathFrames } from './pathShape';
+import { VideoEvents, applyVideo, stopVideos } from './video';
+import { applyCanvas, createCanvasElement } from './canvasDrawing';
+import { scrollToTarget } from './scrollTo';
 import { EMPTY_CATALOG, assetColorVar, type AssetCatalog } from './assets';
 import { colorToCSS, effectsCSS, styleToCSS, type PaintCSS } from './styles';
+import { colorMultiplyFilter } from './colorMultiply';
 import { DEFAULT_TYPE_SIZE, TEXT_STYLE_WEIGHT, resolveTextStyle, textStyleVar } from './typography';
 
 export type EventCallback = (event: RendererEvent) => void;
@@ -198,6 +216,14 @@ const ALL_KINDS: ReadonlySet<string> = new Set<ElementKind>([
   'slider',
   'datepicker',
   'texteditor',
+  // A `Section`'s view header / footer
+  'sectionheader',
+  'sectionfooter',
+  // An `AVPlayer` shown by a view (src/video.ts)
+  'video',
+  'lazyspacer',
+  // A `Canvas`'s drawing (src/canvasDrawing.ts)
+  'canvas',
 ]);
 
 /** Duration of the alert / dialog fade (Phase 8); keep in sync with styles.css. */
@@ -253,11 +279,31 @@ export class Renderer {
   layoutResult: LayoutResult | null = null;
   /** What the current render pass did so far (handed to the Animator at `commit`). */
   private pass: PassRecord = emptyPass();
+  /**
+   * Whether the current pass can animate (see `passCanAnimate`), decided at
+   * its first op; null between passes. A pass that cannot skips the style
+   * snapshots and rectangles the Animator would only need to animate, each
+   * of which forces a style recalculation.
+   */
+  private passAnimates: boolean | null = null;
+  /** The animation root's rectangle, read once per pass that animates. */
+  private passRootRect: DOMRect | null = null;
+  /**
+   * The root's size as the engine last read it; null when it must be read
+   * again. Reading it after a pass changed the DOM forces a style and layout
+   * recalculation, so it is read once and then only after the root resized
+   * (`resizeObserver`, `viewportChanged`). Without a ResizeObserver it is
+   * read on every pass.
+   */
+  private rootSize: { width: number; height: number } | null = null;
+  private readonly resizeObserver: ResizeObserver | null = null;
   /**
    * Phase 8: owns every pointer gesture (drags, long presses, swipe rows,
    * swipe back, the sheet drag, pull to refresh) and arbitrates between them.
    */
   readonly interaction: InteractionController;
+  /** `video` elements' media events, as `video` events (src/video.ts). */
+  private readonly videoEvents: VideoEvents;
   private readonly measurer = new CanvasTextMeasurer();
   /**
    * Phase 9: the layout pass lives across commits and is told what changed
@@ -280,6 +326,8 @@ export class Renderer {
   private readonly dirty = new Set<ElementId>();
   /** The open popover (of a `menu` picker or a `menu` element), if any. */
   private menu: OpenMenu | null = null;
+  /** Lazy menus: a menu the viewer opened whose items Swift is building. */
+  private pendingMenu: { anchor: HTMLElement; id: ElementId; kind: 'menu' | 'contextmenu' } | null = null;
   /** Size last reported for every `geometry` element (whole px). */
   private readonly reportedGeometry = new Map<ElementId, { width: number; height: number }>();
   /** `geometry` and `layout` events collected by layout passes, sent once the ops are applied. */
@@ -288,6 +336,14 @@ export class Renderer {
   private readonly layoutReporter = new LayoutReporter();
   /** Nesting depth of `applyOps` (events are flushed when it returns to 0). */
   private applying = 0;
+  /** `styled` elements whose props in this pass carry a new `scrollTo` command (src/scrollTo.ts). */
+  private pendingScrolls: ElementId[] = [];
+  /** Lazy rows: the `lazyspacer`s on the page, and those already reported near the visible area. */
+  private lazySpacers = new Set<ElementId>();
+  private lazyReported = new Set<ElementId>();
+  private lazyCheckQueued = false;
+  /** The highest `scrollTo` serial seen: a command keeps its serial until the reader re-runs, and runs once. */
+  private scrollSerial = 0;
 
   private readonly onClick = (event: MouseEvent): void => {
     // `closest` picks the innermost control, so a button inside a
@@ -297,9 +353,20 @@ export class Renderer {
         '.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, ' +
         // Phase 8: swipe action buttons, the edit-mode row control and selectable rows (the row sends `tap` itself)
-        '.sb-swipe-action, .sb-listrow-control, .sb-listrow[data-sb-selectable]',
+        '.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',
     );
     if (!target || !this.root.contains(target)) return;
+    if (target.classList.contains('sb-link')) {
+      const text = target.closest<HTMLElement>('.sb-text');
+      const id = Number(text?.dataset[ID_ATTR]);
+      const url = target.dataset['sbLink'];
+      if (!text || !Number.isInteger(id) || url === undefined) return;
+      event.preventDefault();
+      this.onEvent({ type: 'link', id, value: url });
+      return;
+    }
     if (this.interaction.handleClick(target)) {
       event.preventDefault();
       return;
@@ -370,7 +437,7 @@ export class Renderer {
       if (!Number.isInteger(id)) return;
       event.preventDefault();
       if (this.menu?.anchorId === id) this.closeMenu();
-      else if (target.classList.contains('sb-menu')) this.openMenu(target, id, this.menuRows(id));
+      else if (target.classList.contains('sb-menu')) this.openMenuWhenBuilt(target, id, 'menu');
       else this.openMenu(target, id, this.pickerRows(id));
       return;
     }
@@ -405,6 +472,16 @@ export class Renderer {
     const id = Number(target.dataset[ID_ATTR]);
     if (!Number.isInteger(id)) return;
     event.preventDefault();
+    if (target.hasAttribute('data-sb-tap-location')) {
+      // `onTapGesture { point in }`: the point in the element's own
+      // coordinates (points; the device frame may be scaled).
+      const rect = target.getBoundingClientRect();
+      const scale = target.offsetWidth > 0 ? rect.width / target.offsetWidth : 1;
+      const x = Math.round(((event.clientX - rect.left) / (scale || 1)) * 100) / 100;
+      const y = Math.round(((event.clientY - rect.top) / (scale || 1)) * 100) / 100;
+      this.onEvent({ type: 'tap', id, x, y });
+      return;
+    }
     this.onEvent({ type: 'tap', id });
   };
 
@@ -415,17 +492,33 @@ export class Renderer {
    */
   private syncFocus(): void {
     const active = document.activeElement;
-    for (const input of this.root.querySelectorAll<HTMLInputElement>('.sb-textfield[data-sb-focus]')) {
+    for (const input of this.root.querySelectorAll<HTMLElement>('.sb-textfield[data-sb-focus], .sb-texteditor[data-sb-focus]')) {
       const wanted = input.dataset['sbFocus'] === 'true';
       if (wanted && active !== input) input.focus();
       else if (!wanted && active === input) input.blur();
     }
   }
 
+  /**
+   * `.scrollDismissesKeyboard`: scrolling a list or scroll view marked
+   * `data-sb-dismisses-keyboard` takes the focus from the text input being
+   * edited inside it (a bound field then reports the blur as usual).
+   */
+  private readonly onScrollDismissKeyboard = (event: Event): void => {
+    const scroller = event.target;
+    if (!(scroller instanceof HTMLElement) || scroller.dataset['sbDismissesKeyboard'] !== 'true') return;
+    const active = document.activeElement;
+    if ((active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) && scroller.contains(active)) active.blur();
+  };
+
   /** Phase 12: a bound field (`data-sb-focus`) reports focus changes. */
   private readonly onFocusChange = (event: FocusEvent): void => {
-    const input = event.target as HTMLInputElement | null;
-    if (!input || !(input instanceof HTMLInputElement) || !input.classList.contains('sb-textfield')) return;
+    // A bound `texteditor` (UIKit's text views) reports focus like a field.
+    const input = event.target as HTMLElement | null;
+    const isField =
+      (input instanceof HTMLInputElement || input instanceof HTMLTextAreaElement) && input.classList.contains('sb-textfield');
+    const isEditor = input instanceof HTMLTextAreaElement && input.classList.contains('sb-texteditor');
+    if (!input || (!isField && !isEditor)) return;
     if (input.dataset['sbFocus'] === undefined || !this.root.contains(input)) return;
     const id = Number(input.dataset[ID_ATTR]);
     if (!Number.isInteger(id)) return;
@@ -445,7 +538,12 @@ export class Renderer {
     const target = event.target as HTMLElement | null;
     if (!target) return;
     // Phase 12: Enter in a text field under `.onSubmit`.
-    if (event.key === 'Enter' && target.classList.contains('sb-textfield') && target.dataset['sbSubmit'] === 'true') {
+    if (
+      event.key === 'Enter' &&
+      target.classList.contains('sb-textfield') &&
+      target.dataset['sbSubmit'] === 'true' &&
+      !(event.shiftKey && target instanceof HTMLTextAreaElement)
+    ) {
       const id = Number(target.dataset[ID_ATTR]);
       if (Number.isInteger(id)) {
         event.preventDefault();
@@ -606,7 +704,10 @@ export class Renderer {
     root.dataset[KIND_ATTR] = 'root';
     this.elements.set(ROOT_ID, root);
     this.nodes.set(ROOT_ID, { id: ROOT_ID, kind: 'root', props: {}, children: [] });
-    this.animator = new Animator(root, { selfAnimatingKinds: SELF_ANIMATING });
+    this.animator = new Animator(root, {
+      selfAnimatingKinds: SELF_ANIMATING,
+      playOwnFrames: (el, animation) => hasPathFrames(el) && playPathFrames(el, animation),
+    });
     // Delegated listeners instead of one per control: elements can be
     // created detached and moved around freely.
     root.addEventListener('click', this.onClick);
@@ -614,6 +715,9 @@ export class Renderer {
     root.addEventListener('input', this.onInput);
     root.addEventListener('focusin', this.onFocusChange);
     root.addEventListener('focusout', this.onFocusChange);
+    root.addEventListener('scroll', this.onScrollDismissKeyboard, true);
+    root.addEventListener('scroll', this.queueLazyCheck, { capture: true, passive: true });
+    this.videoEvents = new VideoEvents(root, (event) => this.onEvent(event));
     // Phase 8: pointer gestures (the sheet drag among them) are delegated too.
     const host: InteractionHost = {
       root,
@@ -626,6 +730,16 @@ export class Renderer {
     this.interaction = new InteractionController(host);
     root.addEventListener('change', this.onChange);
     root.addEventListener('pointerdown', this.onSliderPointerDown);
+    if (typeof ResizeObserver !== 'undefined') {
+      this.resizeObserver = new ResizeObserver(() => {
+        const before = this.rootSize;
+        this.rootSize = null;
+        if (!before || this.commits === 0) return;
+        const now = this.readRootSize();
+        if (now.width !== before.width || now.height !== before.height) this.layout();
+      });
+      this.resizeObserver.observe(root);
+    }
   }
 
   /** Apply a batch of ops in order. Throws `RendererError` on an invalid op. */
@@ -642,7 +756,9 @@ export class Renderer {
   }
 
   private applyAll(ops: readonly Op[]): void {
-    for (const op of ops) {
+    for (let index = 0; index < ops.length; index++) {
+      const op = ops[index]!;
+      if (this.passAnimates === null) this.passAnimates = this.passCanAnimate(ops, index);
       switch (op.op) {
         case 'create':
           this.create(op.id, op.kind, op.props, op);
@@ -657,15 +773,26 @@ export class Renderer {
           this.remove(op.id, op);
           break;
         case 'defaults':
+        case 'request':
+        case 'swiftdata':
           // Consumed by the loader (wasm.ts); nothing to render.
           break;
+        case 'imagedata':
+          // A bitmap's source, kept for the `image` elements that draw it (src/bitmaps.ts).
+          bitmapStore.add(op);
+          break;
         case 'commit': {
           const pass = this.pass;
           this.pass = emptyPass();
+          this.passAnimates = null;
+          this.passRootRect = null;
           const changes = this.layout();
           this.animator.commit(pass, op.animation, changes);
           this.commits += 1;
           this.syncFocus();
+          this.performScrolls(op.animation != null);
+          this.checkLazySpacers();
+          this.openPendingMenu();
           this.root.dispatchEvent(
             new CustomEvent('sb:commit', { detail: { commits: this.commits, animation: op.animation ?? null } }),
           );
@@ -679,8 +806,29 @@ export class Renderer {
     }
   }
 
+  /**
+   * Whether the pass starting at `ops[start]` can animate: its `commit` has
+   * an animation, or one of its updates changes an `animationToken`
+   * (`.animation(_:value:)`). Otherwise the Animator only retargets running
+   * frame tweens, which needs nothing recorded before the changes. A pass
+   * whose `commit` is not in this batch is assumed to animate.
+   */
+  private passCanAnimate(ops: readonly Op[], start: number): boolean {
+    for (let index = start; index < ops.length; index++) {
+      const op = ops[index]!;
+      if (op.op === 'commit') return op.animation != null;
+      if (op.op !== 'update') continue;
+      const token = (op.props as { style?: { animationToken?: number | null } } | null)?.style?.animationToken;
+      if (token == null) continue;
+      const el = this.elements.get(op.id);
+      if (!el || el.dataset[ANIMATION_TOKEN] !== String(token)) return true;
+    }
+    return true;
+  }
+
   /** Detach everything under the root and forget all non-root elements. */
   reset(): void {
+    stopVideos(this.root);
     this.root.replaceChildren();
     this.elements.clear();
     this.elements.set(ROOT_ID, this.root);
@@ -692,6 +840,8 @@ export class Renderer {
     this.layoutResult = null;
     this.engine = null;
     this.pass = emptyPass();
+    this.passAnimates = null;
+    this.passRootRect = null;
     this.closeMenu();
     this.reportedGeometry.clear();
     this.layoutReporter.clear();
@@ -777,20 +927,20 @@ export class Renderer {
   }
 
   /**
-   * The root's size changed (device mode: a resize or rotation). The engine
-   * reads `#screen`'s current size on every pass, so this just re-lays out.
+   * 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.
    */
   viewportChanged(): void {
+    this.rootSize = null;
     if (this.commits > 0) this.layout();
   }
 
   /** The environment the engine lays out for. */
   layoutEnvironment(): LayoutEnvironment {
-    const width = this.root.clientWidth || DEFAULT_SCREEN.width;
-    const height = this.root.clientHeight || DEFAULT_SCREEN.height;
+    const screen = this.resizeObserver ? (this.rootSize ??= this.readRootSize()) : this.readRootSize();
     if (!this.safeArea) this.safeArea = readSafeArea(this.root);
     return {
-      screen: { width, height },
+      screen: { ...screen },
       safeArea: this.safeArea,
       dynamicTypeSize: this.environment.dynamicTypeSize,
       devicePixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,
@@ -799,6 +949,16 @@ export class Renderer {
     };
   }
 
+  private readRootSize(): { width: number; height: number } {
+    return {
+      width: this.root.clientWidth || DEFAULT_SCREEN.width,
+      height: this.root.clientHeight || DEFAULT_SCREEN.height,
+    };
+  }
+
+  /** Called after each layout pass (main.ts keeps the browser chrome's color in step). */
+  afterLayout: (() => void) | null = null;
+
   /**
    * Run the layout engine over the current tree and position every element.
    * Returns the elements whose box changed. Runs at every `commit`; call it
@@ -834,17 +994,19 @@ export class Renderer {
     this.collectGeometry(result);
     this.collectLayouts(result);
     if (this.applying === 0) this.flushGeometry();
+    this.afterLayout?.();
     return changes;
   }
 
   /**
-   * Queue a `geometry` event for every `geometry` element whose laid-out size
+   * Queue a `geometry` event for every `geometry` element (and every element
+   * whose props set `reportsSize`, an anchor preference's) whose laid-out size
    * (whole px) differs from the one last reported. Nothing is queued for an
    * unchanged size, which is what lets the Swift re-render loop converge.
    */
   private collectGeometry(result: LayoutResult): void {
     for (const [id, node] of this.nodes) {
-      if (node.kind !== 'geometry') continue;
+      if (node.kind !== 'geometry' && node.props['reportsSize'] !== true) continue;
       const frame = result.frames.get(id);
       if (!frame) continue; // e.g. inside a hidden tab
       const width = Math.round(frame.width);
@@ -947,9 +1109,47 @@ export class Renderer {
    */
   openContextMenu(anchor: HTMLElement, id: ElementId): void {
     if (this.menu?.anchorId === id) return;
+    if (!this.nodes.has(id) || !this.root.contains(anchor)) return;
+    this.openMenuWhenBuilt(anchor, id, 'contextmenu');
+  }
+
+  /**
+   * Lazy menus: a `deferred` menu asks Swift for its items (`menu` event,
+   * `open: true`) and opens once they are there, which is usually as soon as
+   * the event returns (the app answers with the ops at once), else at the
+   * commit that brings them.
+   */
+  private openMenuWhenBuilt(anchor: HTMLElement, id: ElementId, kind: 'menu' | 'contextmenu'): void {
+    const node = this.nodes.get(id);
+    if (!node) return;
+    if (node.props['deferred'] !== true) {
+      this.showMenu(anchor, id, kind);
+      return;
+    }
+    this.closeMenu();
+    this.pendingMenu = { anchor, id, kind };
+    this.onEvent({ type: 'menu', id, open: true });
+    this.openPendingMenu();
+  }
+
+  private showMenu(anchor: HTMLElement, id: ElementId, kind: 'menu' | 'contextmenu'): void {
     const node = this.nodes.get(id);
-    if (!node || !this.root.contains(anchor)) return;
-    this.openMenu(anchor, id, collectMenuRows(node.children.slice(1)));
+    if (!node) return;
+    this.openMenu(anchor, id, kind === 'menu' ? this.menuRows(id) : collectMenuRows(node.children.slice(1)));
+  }
+
+  /** Opens the menu waiting for its items once they arrived (dropped when its element left). */
+  private openPendingMenu(): void {
+    const pending = this.pendingMenu;
+    if (!pending) return;
+    const node = this.nodes.get(pending.id);
+    if (!node || !pending.anchor.isConnected) {
+      this.pendingMenu = null;
+      return;
+    }
+    if (node.props['deferred'] === true) return;
+    this.pendingMenu = null;
+    this.showMenu(pending.anchor, pending.id, pending.kind);
   }
 
   /** Close the open popover (no-op when none is open). */
@@ -960,6 +1160,16 @@ export class Renderer {
     document.removeEventListener('click', this.onDocumentClick, true);
     menu.el.remove();
     menu.anchor.setAttribute('aria-expanded', 'false');
+    // Lazy menus: Swift drops the items. After the current task, so that the
+    // tap of the item chosen (sent right after closing) reaches its button.
+    const id = menu.anchorId;
+    if (this.nodes.get(id)?.props['deferred'] === false) {
+      queueMicrotask(() => {
+        if (this.nodes.get(id)?.props['deferred'] === false && this.menu?.anchorId !== id) {
+          this.onEvent({ type: 'menu', id, open: false });
+        }
+      });
+    }
   }
 
   /** The open popover element (for tests), or null. */
@@ -981,7 +1191,10 @@ export class Renderer {
     this.root.removeEventListener('input', this.onInput);
     this.root.removeEventListener('focusin', this.onFocusChange);
     this.root.removeEventListener('focusout', this.onFocusChange);
+    this.root.removeEventListener('scroll', this.onScrollDismissKeyboard, true);
     this.interaction.dispose();
+    this.videoEvents.dispose();
+    this.resizeObserver?.disconnect();
     this.root.removeEventListener('change', this.onChange);
     this.root.removeEventListener('pointerdown', this.onSliderPointerDown);
     this.reset();
@@ -995,13 +1208,72 @@ export class Renderer {
     if (id === ROOT_ID) throw new RendererError('Element 0 is the root and cannot be created', op);
     if (this.elements.has(id)) throw new RendererError(`Element ${id} already exists`, op);
     if (!ALL_KINDS.has(kind)) throw new RendererError(`Unknown element kind ${String(kind)}`, op);
-    const el = createShell(kind);
+    // A vertical `textfield` is a `<textarea>` (its axis is fixed at creation).
+    const el = kind === 'textfield' && (props as TextFieldProps).axis === 'vertical' ? createMultilineField() : createShell(kind);
     el.className = `sb-${kind}`;
     el.dataset[ID_ATTR] = String(id);
     el.dataset[KIND_ATTR] = kind;
     this.elements.set(id, el);
     this.nodes.set(id, { id, kind, props: asRecord(props), children: [] });
     applyProps(el, kind, props, this.assets);
+    this.noteScroll(id, kind, props);
+    if (kind === 'lazyspacer') this.lazySpacers.add(id);
+  }
+
+  /** After a scroll, the lazy spacers are checked on the next frame (once per frame). */
+  private readonly queueLazyCheck = (): void => {
+    if (this.lazyCheckQueued || this.lazySpacers.size === 0) return;
+    this.lazyCheckQueued = true;
+    requestAnimationFrame(() => {
+      this.lazyCheckQueued = false;
+      this.checkLazySpacers();
+    });
+  };
+
+  /**
+   * Lazy rows: a `lazyspacer` within a screen of its scroll view's visible
+   * area asks Swift for the next rows (a `lazy` event), once; the next batch
+   * comes with a new spacer, which is checked after that pass's layout.
+   */
+  private checkLazySpacers(): void {
+    for (const id of this.lazySpacers) {
+      const el = this.elements.get(id);
+      if (!el || !el.isConnected) {
+        this.lazySpacers.delete(id);
+        this.lazyReported.delete(id);
+        continue;
+      }
+      if (this.lazyReported.has(id) || !lazySpacerIsNear(el)) continue;
+      this.lazyReported.add(id);
+      this.onEvent({ type: 'lazy', id });
+    }
+  }
+
+  /** A `styled` whose style carries a `scrollTo` not seen before is scrolled to after this pass's layout. */
+  private noteScroll(id: ElementId, kind: ElementKind, props: ElementProps): void {
+    if (kind !== 'styled') return;
+    const serial = (props as StyledProps)?.style?.scrollTo?.serial;
+    if (typeof serial !== 'number' || serial <= this.scrollSerial) return;
+    this.pendingScrolls.push(id);
+  }
+
+  /** `ScrollViewProxy.scrollTo`: scroll to the targets this pass marked (src/scrollTo.ts). */
+  private performScrolls(animated: boolean): void {
+    if (this.pendingScrolls.length === 0) return;
+    const ids = this.pendingScrolls;
+    this.pendingScrolls = [];
+    const result = this.layoutResult;
+    if (!result) return;
+    // Several commands in one pass: the latest wins (it scrolls last).
+    const commands = ids
+      .map((id) => ({ id, command: (this.nodes.get(id)?.props as Partial<StyledProps> | undefined)?.style?.scrollTo }))
+      .filter((entry): entry is { id: ElementId; command: ScrollToCommand } => entry.command !== undefined)
+      .sort((a, b) => a.command.serial - b.command.serial);
+    for (const { id, command } of commands) {
+      if (command.serial <= this.scrollSerial) continue;
+      scrollToTarget(this, result, id, command, animated);
+    }
+    for (const { command } of commands) this.scrollSerial = Math.max(this.scrollSerial, command.serial);
   }
 
   private update(id: ElementId, props: ElementProps, op: Op): void {
@@ -1032,7 +1304,7 @@ export class Renderer {
     }
     // Remember how the element looked before, in case the pass is animated.
     const previous = this.pass.updated.get(el);
-    const before = previous ? previous.before : this.animator.snapshot(el);
+    const before = previous ? previous.before : this.passAnimates !== false ? this.animator.snapshot(el) : null;
     const oldToken = el.dataset[ANIMATION_TOKEN];
     // `update` replaces the props entirely, so drop whatever the previous
     // props produced before applying the new ones. The layout box is kept:
@@ -1051,6 +1323,7 @@ export class Renderer {
     setTransition(el, undefined);
     if (kind === 'text') el.textContent = '';
     applyProps(el, kind, props, this.assets);
+    this.noteScroll(id, kind, props);
     const newToken = el.dataset[ANIMATION_TOKEN];
     const tokenChanged = (previous?.tokenChanged ?? false) || (newToken !== undefined && newToken !== oldToken);
     const record: UpdatedRecord = { el, before, tokenChanged };
@@ -1085,14 +1358,24 @@ export class Renderer {
     if (!Number.isInteger(index) || index < 0) {
       throw new RendererError(`Invalid child index ${index}`, op);
     }
-    const container = slotOf(parent);
+    // A section's view header / footer lives beside its rows' card, in the
+    // section element itself; the rows after a header are one DOM slot lower.
+    const supplement = isSectionSupplement(el);
+    const container = supplement && parent.classList.contains('sb-section') ? parent : slotOf(parent);
     // Moves: `index` is the element's position in the parent's child list
     // *after* the op is applied. Detaching first makes the index arithmetic
     // identical for fresh inserts and for moves within the same parent.
     const previousParent = el.parentElement;
     const wasAttached = el.isConnected;
     el.remove();
-    const reference = container.children[index] ?? null;
+    let slotIndex = index;
+    if (!supplement && index > 0 && parent.classList.contains('sb-section')) {
+      const first = this.nodes.get(parentId)?.children.find((child) => child.id !== id);
+      if (first?.kind === 'sectionheader') slotIndex -= 1;
+    }
+    const reference = supplement
+      ? el.classList.contains('sb-sectionheader') ? container.firstChild : null
+      : (container.children[slotIndex] ?? null);
     container.insertBefore(el, reference);
     if (!wasAttached) this.pass.inserted.add(el);
     // Mirror the move in the layout tree.
@@ -1166,10 +1449,17 @@ export class Renderer {
       // `commit` whether the pass is animated.
       const ancestors: HTMLElement[] = [];
       for (let a = parent; a && a !== this.root; a = a.parentElement!) ancestors.push(a);
-      this.pass.removed.push({ el, ancestors, rect: this.animator.rectOf(el), transition: transitionOf(el) });
+      let rect: DOMRect | null = null;
+      if (this.passAnimates !== false) {
+        this.passRootRect ??= this.animator.rootRect();
+        rect = this.animator.rectOf(el, this.passRootRect);
+      }
+      this.pass.removed.push({ el, ancestors, rect, transition: transitionOf(el) });
     }
     this.pass.inserted.delete(el);
     this.pass.updated.delete(el);
+    // A detached <video> would keep playing its sound.
+    stopVideos(el);
     el.remove();
     // Phase 9: the layout pass drops the subtree's output; the parent re-measures.
     const removedNode = this.nodes.get(id);
@@ -1282,6 +1572,14 @@ function collectMenuRows(items: readonly LayoutNode[], rows: MenuRow[] = []): Me
         collectMenuRows(base.children, rows);
         break;
       }
+      case 'sectionheader': {
+        // A view header: its text as the caption.
+        const text = textOf(base);
+        if (text.length > 0) rows.push({ kind: 'caption', text });
+        break;
+      }
+      case 'sectionfooter':
+        break;
       case 'text':
         rows.push({ kind: 'text', text: textOf(base) });
         break;
@@ -1561,7 +1859,8 @@ function createShell(kind: ElementKind): HTMLElement {
       track.setAttribute('aria-hidden', 'true');
       const fill = div('sb-gauge-fill');
       fill.setAttribute('aria-hidden', 'true');
-      el.append(slot, track, fill);
+      // A circular style's ring (gaugeRing.ts), placed from the `ring` rect.
+      el.append(slot, track, fill, createGaugeRing());
       SLOTS.set(el, slot);
       return el;
     }
@@ -1739,6 +2038,8 @@ function createShell(kind: ElementKind): HTMLElement {
       SLOTS.set(el, slot);
       return el;
     }
+    case 'canvas':
+      return createCanvasElement();
     case 'texteditor': {
       const el = document.createElement('textarea');
       el.autocomplete = 'off';
@@ -1750,6 +2051,19 @@ function createShell(kind: ElementKind): HTMLElement {
   }
 }
 
+/** A vertical `textfield`: a `<textarea>` the layout sizes to its lines. */
+function createMultilineField(): HTMLTextAreaElement {
+  const el = document.createElement('textarea');
+  el.autocomplete = 'off';
+  el.spellcheck = false;
+  el.rows = 1;
+  return el;
+}
+
+function isSectionSupplement(el: HTMLElement): boolean {
+  return el.classList.contains('sb-sectionheader') || el.classList.contains('sb-sectionfooter');
+}
+
 function span(className: string): HTMLSpanElement {
   const el = document.createElement('span');
   el.className = className;
@@ -1873,7 +2187,7 @@ function refreshTabBar(tabview: HTMLElement): void {
     item.type = 'button';
     item.className = 'sb-tabbar-item';
     item.setAttribute('role', 'tab');
-    item.append(span('sb-tabbar-icon'), span('sb-tabbar-title'));
+    item.append(span('sb-tabbar-icon'), span('sb-tabbar-title'), span('sb-tabbar-badge'));
     bar.append(item);
   }
   tabs.forEach((tab, i) => {
@@ -1896,6 +2210,14 @@ function refreshTabBar(tabview: HTMLElement): void {
     }
     const label = item.querySelector<HTMLElement>(':scope > .sb-tabbar-title');
     if (label && label.textContent !== title) label.textContent = title;
+    // `Tab(…).badge(…)` and `Tab(role: .search)` (the iOS 18 tab API).
+    const badge = item.querySelector<HTMLElement>(':scope > .sb-tabbar-badge');
+    const badgeText = tab.dataset['sbBadge'] ?? '';
+    if (badge && badge.textContent !== badgeText) badge.textContent = badgeText;
+    if (badge) badge.hidden = badgeText === '';
+    const role = tab.dataset['sbRole'];
+    if (role) item.dataset['sbRole'] = role;
+    else delete item.dataset['sbRole'];
     setTabHidden(tab, !isSelected);
   });
 }
@@ -1954,7 +2276,9 @@ function animateSheetOut(container: HTMLElement, sheet: HTMLElement): void {
 function applySheet(el: HTMLElement, props: SheetProps): void {
   const detents = Array.isArray(props.detents) && props.detents.length ? props.detents : ['large'];
   // Phase 8: `full` is `.fullScreenCover` (no radius, grabber or drag; the presenting tree keeps its scale).
-  const first = detents[0] === 'medium' ? 'medium' : detents[0] === 'full' ? 'full' : 'large';
+  // A custom height (`height:` / `fraction:`) leaves the presenting tree unscaled, like `medium`.
+  const custom = typeof detents[0] === 'string' && /^(height|fraction):/.test(detents[0]);
+  const first = detents[0] === 'medium' || custom ? 'medium' : detents[0] === 'full' ? 'full' : 'large';
   el.dataset['sbDetent'] = first;
   el.dataset['sbDetents'] = detents.join(' ');
 }
@@ -2077,6 +2401,9 @@ function setDatePickerValue(el: HTMLElement, seconds: number): void {
 function applyTextEditor(area: HTMLTextAreaElement, props: TextEditorProps): void {
   const text = props.text ?? '';
   if (area.value !== text) area.value = text;
+  // Bound focus, as for a `textfield` (moved in `syncFocus` after the commit).
+  if (typeof props.focused === 'boolean') area.dataset['sbFocus'] = String(props.focused);
+  else delete area.dataset['sbFocus'];
 }
 
 // ---------------------------------------------------------------------------
@@ -2086,7 +2413,7 @@ function applyTextEditor(area: HTMLTextAreaElement, props: TextEditorProps): voi
 function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, assets: AssetCatalog): void {
   switch (kind) {
     case 'text':
-      applyText(el, props as TextProps);
+      applyText(el, props as TextProps, assets);
       break;
     case 'vstack':
       applyVStack(el, props as VStackProps);
@@ -2111,11 +2438,14 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
     case 'image':
       applyImage(el, props as ImageProps, assets);
       break;
+    case 'tapgesture':
+      // `location`: the tap is sent with its point (`onTapGesture { point in }`).
+      el.toggleAttribute('data-sb-tap-location', (props as TapGestureProps | undefined)?.location === true);
+      break;
     case 'divider':
     case 'navstack':
     case 'geometry':
     case 'menu':
-    case 'tapgesture':
     case 'navsplit':
       // No props.
       break;
@@ -2143,6 +2473,9 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
       // Phase 8: edit mode (the engine shifts `listrow` content) and pull to refresh.
       el.toggleAttribute('data-sb-editing', list.editing === true);
       applyRefreshable(el, list.refreshable === true, list.refreshing === true);
+      // `.scrollContentBackground(.hidden)`: no grouped background (styles.css).
+      if (list.background === 'hidden') el.dataset['sbBackground'] = 'hidden';
+      if (list.dismissesKeyboard === true) el.dataset['sbDismissesKeyboard'] = 'true';
       break;
     }
     case 'tabview': {
@@ -2151,9 +2484,13 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
       break;
     }
     case 'tab': {
-      const { title, systemImage } = props as TabProps;
+      const { title, systemImage, badge, role } = props as TabProps;
       el.dataset['sbTitle'] = title ?? '';
       el.dataset['sbSymbol'] = systemImage ?? '';
+      if (badge) el.dataset['sbBadge'] = badge;
+      else delete el.dataset['sbBadge'];
+      if (role) el.dataset['sbRole'] = role;
+      else delete el.dataset['sbRole'];
       el.setAttribute('aria-label', title ?? '');
       break;
     }
@@ -2166,13 +2503,14 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
       applyRefreshable(el, scroll.refreshable === true, scroll.refreshing === true);
       if (scroll.snap === 'viewAligned' || scroll.snap === 'paging') el.dataset['sbSnap'] = scroll.snap;
       else delete el.dataset['sbSnap'];
+      if (scroll.dismissesKeyboard === true) el.dataset['sbDismissesKeyboard'] = 'true';
       break;
     }
     case 'section':
       applySection(el, props as SectionProps);
       break;
     case 'textfield':
-      applyTextField(el as HTMLInputElement, props as TextFieldProps);
+      applyTextField(el as HTMLInputElement | HTMLTextAreaElement, props as TextFieldProps);
       break;
     case 'toggle':
       setSwitchState(el, Boolean((props as ToggleProps).isOn));
@@ -2275,6 +2613,19 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
     case 'texteditor':
       applyTextEditor(el as HTMLTextAreaElement, (props as TextEditorProps) ?? {});
       break;
+    case 'sectionheader':
+    case 'sectionfooter':
+      // Pure containers: the list layout positions them.
+      break;
+    case 'video':
+      applyVideo(el, props as VideoProps);
+      break;
+    case 'canvas':
+      applyCanvas(el, props as CanvasProps, assets);
+      break;
+    case 'lazyspacer':
+      el.dataset['axis'] = (props as LazySpacerProps).axis === 'horizontal' ? 'horizontal' : 'vertical';
+      break;
     default: {
       const unknown: never = kind;
       throw new RendererError(`Unknown element kind ${String(unknown)}`);
@@ -2282,8 +2633,59 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
   }
 }
 
-function applyText(el: HTMLElement, props: TextProps): void {
-  el.textContent = props.text ?? '';
+function applyText(el: HTMLElement, props: TextProps, assets: AssetCatalog): void {
+  if (!Array.isArray(props.runs)) {
+    runTemplates.delete(el);
+    delete el.dataset['sbRich'];
+    clearRichText(el);
+    el.textContent = props.text ?? '';
+    return;
+  }
+  // Rich text: a template per run; the layout pass draws the lines (src/richText.ts).
+  el.dataset['sbRich'] = '';
+  runTemplates.set(el, props.runs.map((run) => runTemplate(run, assets)));
+}
+
+/** A rich text run's span (or inline image element) with its style; the layout pass sets the font. */
+function runTemplate(run: TextRun, assets: AssetCatalog): HTMLElement {
+  let el: HTMLElement;
+  if (run.image) {
+    el = createShell('image');
+    el.className = 'sb-image sb-text-image';
+    applyImage(el, run.image, assets);
+    // A symbol is a glyph: centered on the line like text, not stood on the baseline.
+    if (!isBitmapImage(run.image) && !isUrlImage(run.image)) el.classList.add('sb-text-symbol');
+  } else {
+    el = document.createElement('span');
+    el.className = 'sb-text-run';
+  }
+  const s = el.style;
+  if (run.foreground !== undefined) s.color = styleToCSS(run.foreground as ShapeStyle, 'text').solid;
+  const lines: string[] = [];
+  let lineColor: unknown;
+  if (run.underline) {
+    lines.push('underline');
+    lineColor = run.underline.color;
+  }
+  if (run.strikethrough) {
+    lines.push('line-through');
+    lineColor ??= run.strikethrough.color;
+  }
+  if (lines.length > 0) {
+    s.textDecorationLine = lines.join(' ');
+    if (lineColor !== undefined) s.textDecorationColor = styleToCSS(lineColor as ShapeStyle, 'text').solid;
+  }
+  if (typeof run.kerning === 'number' && run.kerning !== 0) s.letterSpacing = `${run.kerning}px`;
+  if (typeof run.baselineOffset === 'number' && run.baselineOffset !== 0) {
+    s.position = 'relative';
+    s.top = `${-run.baselineOffset}px`;
+  }
+  if (typeof run.link === 'string') {
+    el.classList.add('sb-link');
+    el.dataset['sbLink'] = run.link;
+    el.setAttribute('role', 'link');
+  }
+  return el;
 }
 
 /**
@@ -2313,6 +2715,8 @@ function applyGauge(el: HTMLElement, props: GaugeProps): void {
   el.dataset['sbStyle'] = props.style ?? 'automatic';
   el.dataset['sbValue'] = String(value);
   el.setAttribute('aria-valuenow', String(value));
+  const ring = el.querySelector<HTMLElement>(':scope > .sb-gauge-ring');
+  if (ring && isCircularGauge(props.style)) updateGaugeRing(ring, props.style, value);
 }
 
 function applyColor(el: HTMLElement, props: ColorProps): void {
@@ -2320,7 +2724,7 @@ function applyColor(el: HTMLElement, props: ColorProps): void {
 }
 
 /** Radius that turns a box into each shape (the layout engine sizes it). */
-const SHAPE_RADIUS: Record<ShapeProps['shape'], (cornerRadius: number) => string> = {
+const SHAPE_RADIUS: Record<Exclude<ShapeProps['shape'], 'path'>, (cornerRadius: number) => string> = {
   rectangle: () => '0px',
   roundedRectangle: (r) => `${Math.max(0, r)}px`,
   circle: () => '50%',
@@ -2340,7 +2744,13 @@ const SHAPE_RADIUS: Record<ShapeProps['shape'], (cornerRadius: number) => string
  * and `data-sb-stroke` records which one it was.
  */
 function applyShape(el: HTMLElement, props: ShapeProps): void {
-  const shape = props.shape in SHAPE_RADIUS ? props.shape : 'rectangle';
+  if (props.shape === 'path') {
+    // A custom shape: an SVG of its path (src/pathShape.ts).
+    el.dataset['sbShape'] = 'path';
+    applyPathShape(el, props);
+    return;
+  }
+  const shape = props.shape in SHAPE_RADIUS ? (props.shape as keyof typeof SHAPE_RADIUS) : 'rectangle';
   const s = el.style;
   el.dataset['sbShape'] = shape;
   s.borderRadius = SHAPE_RADIUS[shape](Number(props.cornerRadius) || 0);
@@ -2354,6 +2764,48 @@ function applyShape(el: HTMLElement, props: ShapeProps): void {
     s.border = `${width}px solid ${color}`;
     el.dataset['sbStroke'] = stroke.inset ? 'inset' : 'center';
   }
+  // A fill with a drop shadow (`.shadow(.drop(…))` on the style).
+  const shadow = (props.fill as { shadow?: ShapeShadow } | null)?.shadow;
+  s.filter = shadow && typeof shadow === 'object' ? shapeShadowCSS(shadow) : '';
+  const mask = shapeTrimMask(props.trim);
+  if (mask) {
+    s.setProperty('mask-image', mask);
+    s.setProperty('-webkit-mask-image', mask);
+  } else if (el.dataset['sbTrim']) {
+    s.removeProperty('mask-image');
+    s.removeProperty('-webkit-mask-image');
+  }
+  if (mask) el.dataset['sbTrim'] = `${props.trim!.from},${props.trim!.to}`;
+  else delete el.dataset['sbTrim'];
+}
+
+/** A style's drop shadow (`ShadowStyle.drop`). */
+interface ShapeShadow {
+  color?: Color;
+  radius?: number;
+  x?: number;
+  y?: number;
+}
+
+function shapeShadowCSS(shadow: ShapeShadow): string {
+  const n = (v: number | undefined) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+  const color = shadow.color ? colorToCSS(shadow.color) : 'rgba(0, 0, 0, 0.33)';
+  return `drop-shadow(${n(shadow.x)}px ${n(shadow.y)}px ${Math.max(0, n(shadow.radius))}px ${color})`;
+}
+
+/**
+ * `.trim(from:to:)`: a conic gradient opaque between the fractions, starting
+ * at 3 o'clock (CSS's 90deg) and turning clockwise like SwiftUI's circle path.
+ * Undefined for an untrimmed (or fully kept) shape.
+ */
+export function shapeTrimMask(trim: ShapeProps['trim']): string | undefined {
+  if (!trim) return undefined;
+  const from = Math.min(1, Math.max(0, Number(trim.from) || 0));
+  const to = Math.min(1, Math.max(0, Number(trim.to) || 0));
+  if (from <= 0 && to >= 1) return undefined;
+  const a = Math.round(from * 36000) / 100;
+  const b = Math.round(Math.max(from, to) * 36000) / 100;
+  return `conic-gradient(from 90deg, transparent ${a}deg, #000 ${a}deg, #000 ${b}deg, transparent ${b}deg)`;
 }
 
 /** Paint an area with a resolved ShapeStyle: a color, a gradient image or a material over a blurred backdrop. */
@@ -2417,6 +2869,50 @@ function applyImage(el: HTMLElement, props: ImageProps, assets: AssetCatalog): v
     el.setAttribute('aria-label', name);
     delete el.dataset['sbMissing'];
   };
+  // `.interpolation(.none)`: scaled without smoothing (styles.css).
+  if ((props as { interpolation?: string }).interpolation === 'none') el.dataset['sbInterpolation'] = 'none';
+  else delete el.dataset['sbInterpolation'];
+  if (isBitmapImage(props)) {
+    // A `UIImage` bitmap: a canvas the recipe is drawn on once the layout
+    // engine has sized the box (src/bitmaps.ts).
+    delete el.dataset['sbSymbol'];
+    delete el.dataset['sbAsset'];
+    delete el.dataset['sbUrl'];
+    if (props.resizable) el.dataset['sbResizable'] = '';
+    else delete el.dataset['sbResizable'];
+    let canvas = el.firstElementChild;
+    if (!(canvas instanceof HTMLCanvasElement)) {
+      canvas = document.createElement('canvas');
+      found('', canvas);
+      el.removeAttribute('aria-label');
+    }
+    showBitmap(canvas as HTMLCanvasElement, props.bitmap);
+    return;
+  }
+  if (isUrlImage(props)) {
+    // Phase 13: the page decoded this URL for `AsyncImage` already, so the
+    // <img> shows at once; the layout engine sized the box from the props.
+    delete el.dataset['sbSymbol'];
+    delete el.dataset['sbAsset'];
+    el.dataset['sbUrl'] = props.url;
+    if (props.resizable) el.dataset['sbResizable'] = '';
+    else delete el.dataset['sbResizable'];
+    const existing = el.firstElementChild;
+    if (existing instanceof HTMLImageElement) {
+      if (existing.getAttribute('src') !== props.url && existing.dataset['sbPending'] !== props.url) {
+        swapImageSource(existing, props.url);
+      }
+      return;
+    }
+    const img = document.createElement('img');
+    img.src = props.url;
+    img.alt = '';
+    img.draggable = false;
+    img.decoding = 'async';
+    found(props.url, img);
+    return;
+  }
+  delete el.dataset['sbUrl'];
   if (isAssetImage(props)) {
     const name = props.name ?? '';
     delete el.dataset['sbSymbol'];
@@ -2499,8 +2995,10 @@ function applySection(el: HTMLElement, props: SectionProps): void {
   }
 }
 
-function applyTextField(input: HTMLInputElement, props: TextFieldProps): void {
-  input.type = props.secure ? 'password' : 'text';
+function applyTextField(input: HTMLInputElement | HTMLTextAreaElement, props: TextFieldProps): void {
+  // 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 ?? '';
   input.dataset['sbStyle'] = props.style ?? 'plain';
   const text = props.text ?? '';
@@ -2736,6 +3234,15 @@ export function applyStyle(el: HTMLElement, style: Style): void {
     }
   }
 
+  // View `.underline()` / `.strikethrough()` / `.italic()`: inherited by the
+  // texts below (`.sb-text` reads the decoration properties; `initial` turns
+  // an ancestor's off).
+  if (style.underline != null) s.setProperty('--sb-text-underline', style.underline ? 'underline' : 'initial');
+  if (style.strikethrough != null) {
+    s.setProperty('--sb-text-strikethrough', style.strikethrough ? 'line-through' : 'initial');
+  }
+  if (style.italic != null) s.fontStyle = style.italic ? 'italic' : 'normal';
+
   if (style.background) {
     applyPaint(el, styleToCSS(style.background, 'paint'));
     // A painted background is a view of its own: hittable (styles.css).
@@ -2760,6 +3267,9 @@ export function applyStyle(el: HTMLElement, style: Style): void {
   if (style.cornerRadius != null) {
     s.borderRadius = `${style.cornerRadius}px`;
     s.overflow = 'hidden';
+  } else if (style.backgroundCornerRadius != null) {
+    // The background in its container's shape, without clipping the content.
+    s.borderRadius = `${style.backgroundCornerRadius}px`;
   }
 
   // Phase 6 visual effects: CSS only, the layout engine never sees them.
@@ -2767,6 +3277,11 @@ export function applyStyle(el: HTMLElement, style: Style): void {
   if (effects.transform) s.transform = effects.transform;
   if (effects.transformOrigin) s.transformOrigin = effects.transformOrigin;
   if (effects.filter) s.filter = effects.filter;
+  // `.colorMultiply`: an SVG filter, first so the other filters see its colors.
+  if (style.colorMultiply) {
+    const multiply = colorMultiplyFilter(style.colorMultiply, el);
+    s.filter = effects.filter ? `${multiply} ${effects.filter}` : multiply;
+  }
   // Phase 7: `.hidden()` keeps the box (the engine lays it out) but draws
   // nothing and takes no input; `.mask { }` clips the box to a style's alpha.
   if (effects.hidden) {
@@ -2804,6 +3319,13 @@ export function applyStyle(el: HTMLElement, style: Style): void {
   if (opacity != null) {
     s.opacity = String(opacity);
   }
+  // `.blendMode`: blends the box with what is behind it.
+  if (style.blendMode) s.mixBlendMode = style.blendMode;
+  else if (s.mixBlendMode) s.mixBlendMode = '';
+  // `.zIndex`: in front of siblings with a lower index (boxes are positioned).
+  // CSS takes integers; ×1000 keeps fractional indices (0.5) apart.
+  if (style.zIndex != null && Number.isFinite(style.zIndex)) s.zIndex = String(Math.round(style.zIndex * 1000));
+  else if (s.zIndex) s.zIndex = '';
 
   // Phase 3 text and layout hints (the engine reads them from the node tree).
   if (style.layoutPriority != null && Number.isFinite(style.layoutPriority)) {
@@ -2825,6 +3347,8 @@ export function applyStyle(el: HTMLElement, style: Style): void {
     el.dataset['sbAspectRatio'] = `${ratio ?? 'auto'} ${contentMode ?? 'fit'}`;
   }
   if (style.animationToken != null) el.dataset[ANIMATION_TOKEN] = String(style.animationToken);
+  // A `Label`'s icon: tinted in list rows (styles.css).
+  if (style.labelIcon) el.dataset['sbLabelIcon'] = '';
   if (style.animation) ANIMATIONS.set(el, style.animation);
   if (style.transition) setTransition(el, style.transition);
 
@@ -2858,6 +3382,7 @@ export { colorToCSS, styleToCSS } from './styles';
 export function assetColorsCSS(catalog: AssetCatalog): string {
   const names = Object.keys(catalog.colors).sort();
   if (names.length === 0) return '';
+  const accent = catalog.colors[ACCENT_COLOR_NAME];
   const declarations = (scheme: 'light' | 'dark'): string =>
     names
       .map((name) => {
@@ -2866,13 +3391,19 @@ export function assetColorsCSS(catalog: AssetCatalog): string {
         const value = scheme === 'dark' ? (color.dark ?? color.light) : color.light;
         return `  ${assetColorVar(name)}: ${sanitizeColor(value)};\n`;
       })
-      .join('');
+      .join('') +
+    // The app's accent color, as Xcode's global accent setting (`AccentColor`
+    // in its templates) makes it on iOS: buttons, links, toggles, selection.
+    (accent ? `  --sb-color-accent: var(${assetColorVar(ACCENT_COLOR_NAME)});\n` : '');
   return (
     `.device[data-theme="light"] {\n${declarations('light')}}\n` +
     `.device[data-theme="dark"] {\n${declarations('dark')}}\n`
   );
 }
 
+/** The catalog color that is the app's accent (Xcode's `ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME` default). */
+const ACCENT_COLOR_NAME = 'AccentColor';
+
 /** A manifest color value is injected into a stylesheet: keep only CSS color syntax characters. */
 function sanitizeColor(value: string): string {
   return /^[A-Za-z0-9#(),.%\s/-]+$/.test(value) ? value : 'magenta';
@@ -2880,3 +3411,20 @@ function sanitizeColor(value: string): string {
 
 // Re-exported so callers can build typed fixtures without importing protocol.ts.
 export type { Op, ElementKind, ElementPropsByKind, RendererEvent };
+
+/**
+ * Whether a `lazyspacer` is within one screen of the visible area of the
+ * scroll view (or list) it is in, along its axis; the page's viewport when it
+ * is in none. Spacers in hidden tabs, menus or candidates are not.
+ */
+function lazySpacerIsNear(el: HTMLElement): boolean {
+  if (el.closest('[data-sb-tab-hidden], [hidden]')) return false;
+  const rect = el.getBoundingClientRect();
+  const scroller = el.closest<HTMLElement>('.sb-scrollview, .sb-list');
+  const view = scroller ? scroller.getBoundingClientRect() : new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+  if (view.width <= 0 || view.height <= 0) return false;
+  if (el.dataset['axis'] === 'horizontal') {
+    return rect.left < view.right + view.width && rect.right > view.left - view.width;
+  }
+  return rect.top < view.bottom + view.height && rect.bottom > view.top - view.height;
+}