@swiftbrowser/web 0.3.1 → 0.5.0

package/src/renderer.ts

@@ -56,6 +56,7 @@ import { bitmapStore, showBitmap } from './bitmaps';
 import { clearRichText, runTemplates } from './richText';
 import { applyLayout, setTabHidden, type BoxChange } from './layoutDom';
 import { ghostClone } from './ghost';
+import { ExternalDrops } from './dragDrop';
 import { InteractionController, type InteractionHost } from './interaction';
 import { symbolOf, textOf, unwrapStyledNode } from './nodeQueries';
 import {
@@ -85,9 +86,12 @@ import {
   type HStackProps,
   type LayoutEvent,
   type LazyVGridProps,
+  type LazyHGridProps,
   type ImageProps,
+  type InspectorProps,
   type ListProps,
   type ListRowProps,
+  type DropDestinationProps,
   type NavLinkProps,
   type TapGestureProps,
   type NavScreenProps,
@@ -105,6 +109,7 @@ import {
   type SwipeActionsProps,
   type TabProps,
   type TabViewProps,
+  type HostProps,
   type TextFieldProps,
   type TextProps,
   type TextRun,
@@ -144,7 +149,11 @@ 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 { hostContent, onHostContentChange } from './hostContent';
+import { HoverTracker, applyPointerAndEffects, safeAreaOverlap } from './pointerEffects';
 import { colorMultiplyFilter } from './colorMultiply';
+import { largeTitleOf } from './largeTitle';
+import { applyEdgeEffect } from './scrollEdge';
 import { DEFAULT_TYPE_SIZE, TEXT_STYLE_WEIGHT, resolveTextStyle, textStyleVar } from './typography';
 
 export type EventCallback = (event: RendererEvent) => void;
@@ -161,6 +170,23 @@ const ID_ATTR = 'sbId';
 /** `animationToken` of a `styled` box, kept across `update` to detect changes. */
 const ANIMATION_TOKEN = 'sbAnimationToken';
 
+/**
+ * Kinds whose own changes animate even outside `withAnimation`: their token
+ * changes with what they present (an inspector's `presented`).
+ */
+const IMPLICITLY_ANIMATED: ReadonlySet<ElementKind> = new Set(['inspector']);
+
+/**
+ * The animation token an element of `kind` has with `props`: a `styled`
+ * box's `animationToken` (`.animation(_:value:)`), an inspector's
+ * `presented`. An `update` that changes it animates its subtree.
+ */
+function animationTokenOf(kind: ElementKind | undefined, props: unknown): string | undefined {
+  if (kind === 'inspector') return (props as InspectorProps | null)?.presented === true ? 'shown' : 'hidden';
+  const token = (props as { style?: { animationToken?: number | null } } | null)?.style?.animationToken;
+  return token == null ? undefined : String(token);
+}
+
 /** Duration of the navigation push/pop slide; keep in sync with styles.css (`--sb-nav-easing`). */
 export const NAV_TRANSITION_MS = 400;
 /** Duration of the sheet present/dismiss slide; keep in sync with styles.css. */
@@ -169,6 +195,7 @@ export const SHEET_TRANSITION_MS = 400;
 export { SHEET_DISMISS_DRAG } from './interaction';
 
 const ALL_KINDS: ReadonlySet<string> = new Set<ElementKind>([
+  'host',
   'text',
   'vstack',
   'hstack',
@@ -197,6 +224,7 @@ const ALL_KINDS: ReadonlySet<string> = new Set<ElementKind>([
   'grid',
   'gridrow',
   'lazyvgrid',
+  'lazyhgrid',
   'gauge',
   'decorated',
   'menu',
@@ -205,6 +233,8 @@ const ALL_KINDS: ReadonlySet<string> = new Set<ElementKind>([
   'tapgesture',
   // Phase 7
   'navsplit',
+  'inspector',
+  'inspectorpanel',
   'viewthatfits',
   'chart',
   'chartitem',
@@ -297,11 +327,33 @@ export class Renderer {
    */
   private rootSize: { width: number; height: number } | null = null;
   private readonly resizeObserver: ResizeObserver | null = null;
+  /**
+   * `host` elements (src/hostContent.ts): their content elements, observed
+   * for size changes, and the measurements of the current layout pass.
+   */
+  private readonly hostObserver: ResizeObserver | null = null;
+  /** `hover` events for boxes whose style asks for them (pointerEffects.ts). */
+  private readonly hover: HoverTracker;
+  /** A frame check of the `reportsFrame` readers is queued for the next animation frame (after a scroll). */
+  private frameCheckQueued = false;
+  private readonly hostContents = new Map<ElementId, HTMLElement>();
+  /** The `host` elements, adopted or still waiting for their content. */
+  private readonly hosts = new Set<ElementId>();
+  private readonly hostSizes = new WeakMap<HTMLElement, { width: number; height: number }>();
+  private readonly hostMeasures = new Map<string, { width: number; height: number }>();
+  private readonly stopHostChanges: () => void;
+  /**
+   * The root takes its content's height (`LayoutEnvironment.contentHeight`):
+   * a SwiftUI island in a page's own layout. Set before the first commit.
+   */
+  contentHeight = false;
   /**
    * 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;
+  /** Text, links and files dragged in from outside the page (src/dragDrop.ts). */
+  private readonly externalDrops: ExternalDrops;
   /** `video` elements' media events, as `video` events (src/video.ts). */
   private readonly videoEvents: VideoEvents;
   private readonly measurer = new CanvasTextMeasurer();
@@ -329,7 +381,7 @@ export class Renderer {
   /** 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 }>();
+  private readonly reportedGeometry = new Map<ElementId, { width: number; height: number; key: string }>();
   /** `geometry` and `layout` events collected by layout passes, sent once the ops are applied. */
   private pendingGeometry: (GeometryEvent | LayoutEvent)[] = [];
   /** Phase 6: dedupes `layout` events per element (src/layoutEvents.ts). */
@@ -349,7 +401,7 @@ export class Renderer {
     // `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>(
-      '.sb-button, .sb-navlink, .sb-navbar-back, .sb-switch, .sb-sheet-scrim, ' +
+      '.sb-button, .sb-navlink, .sb-navbar-back, .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, ' +
         // Phase 8: swipe action buttons, the edit-mode row control and selectable rows (the row sends `tap` itself)
@@ -450,6 +502,14 @@ export class Renderer {
       this.onEvent({ type: 'tap', id });
       return;
     }
+    if (target.classList.contains('sb-navsplit-toggle')) {
+      const split = target.closest<HTMLElement>('.sb-navsplit');
+      const id = Number(split?.dataset[ID_ATTR]);
+      if (!split || !Number.isInteger(id)) return;
+      event.preventDefault();
+      this.onEvent({ type: 'tap', id });
+      return;
+    }
     if (target.classList.contains('sb-navbar-back')) {
       const id = Number(target.dataset['sbTarget']);
       if (!Number.isInteger(id)) return;
@@ -728,6 +788,7 @@ export class Renderer {
       closeMenu: () => this.closeMenu(),
     };
     this.interaction = new InteractionController(host);
+    this.externalDrops = new ExternalDrops(host);
     root.addEventListener('change', this.onChange);
     root.addEventListener('pointerdown', this.onSliderPointerDown);
     if (typeof ResizeObserver !== 'undefined') {
@@ -740,6 +801,92 @@ export class Renderer {
       });
       this.resizeObserver.observe(root);
     }
+    this.measurer.measureHost = (content, width) => this.measureHostContent(content, width);
+    if (typeof ResizeObserver !== 'undefined') {
+      this.hostObserver = new ResizeObserver((entries) => {
+        let changed = false;
+        for (const entry of entries) {
+          const el = entry.target as HTMLElement;
+          const size = { width: el.offsetWidth, height: el.offsetHeight };
+          const last = this.hostSizes.get(el);
+          if (last && last.width === size.width && last.height === size.height) continue;
+          this.hostSizes.set(el, size);
+          changed = true;
+        }
+        if (changed) this.hostContentChanged();
+      });
+    }
+    this.stopHostChanges = onHostContentChange(() => this.hostContentChanged());
+    this.hover = new HoverTracker(root, (id, value) => this.onEvent({ type: 'hover', id, value }));
+    root.addEventListener('scroll', this.queueFrameCheck, { capture: true, passive: true });
+  }
+
+  /**
+   * Geometry readers with `reportsFrame` report where they are on screen,
+   * which scrolling changes without a layout pass: after a scroll their
+   * frames are checked once per animation frame.
+   */
+  private readonly queueFrameCheck = (): void => {
+    if (this.frameCheckQueued || this.commits === 0) return;
+    this.frameCheckQueued = true;
+    requestAnimationFrame(() => {
+      this.frameCheckQueued = false;
+      if (!this.layoutResult) return;
+      this.collectGeometry(this.layoutResult, true);
+      if (this.applying === 0) this.flushGeometry();
+    });
+  };
+
+  /**
+   * A `host` element's content changed (the page said so, or it resized):
+   * the hosts are measured again and the tree laid out. A host whose content
+   * was not registered when its element was created (a page that registers
+   * from an effect, after its commit) adopts it now.
+   */
+  private hostContentChanged(): void {
+    if (this.commits === 0) return;
+    for (const id of this.hosts) {
+      if (this.hostContents.has(id)) continue;
+      const el = this.elements.get(id);
+      const node = this.nodes.get(id);
+      if (el && node) this.adoptHostContent(id, el, node.props as unknown as HostProps);
+    }
+    if (this.hostContents.size === 0) return;
+    for (const id of this.hostContents.keys()) {
+      const node = this.nodes.get(id);
+      if (node) this.engine?.invalidate(node);
+    }
+    this.layout();
+  }
+
+  /**
+   * The host measurer (src/layout, `measureHost`): the content element laid
+   * out at `width`, or at its own ideal width when null. Measured in place,
+   * so the content sees the device's tokens and fonts; the styles it needs
+   * for the measurement are restored right after.
+   */
+  private measureHostContent(content: string, width: number | null): { width: number; height: number } {
+    const key = `${content}\u0000${width ?? ''}`;
+    const cached = this.hostMeasures.get(key);
+    if (cached) return cached;
+    const el = hostContent(content);
+    if (!el) return { width: 0, height: 0 };
+    const { style } = el;
+    const saved = { width: style.width, height: style.height, maxWidth: style.maxWidth };
+    style.height = 'auto';
+    if (width === null) {
+      style.width = 'max-content';
+      style.maxWidth = 'none';
+    } else {
+      style.width = `${width}px`;
+    }
+    const rect = el.getBoundingClientRect();
+    const size = { width: Math.ceil(rect.width), height: Math.ceil(rect.height) };
+    style.width = saved.width;
+    style.height = saved.height;
+    style.maxWidth = saved.maxWidth;
+    this.hostMeasures.set(key, size);
+    return size;
   }
 
   /** Apply a batch of ops in order. Throws `RendererError` on an invalid op. */
@@ -818,10 +965,10 @@ export class Renderer {
       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;
+      const token = animationTokenOf(el?.dataset[KIND_ATTR] as ElementKind | undefined, op.props);
+      if (token == null) continue;
+      if (!el || el.dataset[ANIMATION_TOKEN] !== token) return true;
     }
     return true;
   }
@@ -946,6 +1093,7 @@ export class Renderer {
       devicePixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,
       colorScheme: this.environment.colorScheme,
       assets: this.assets,
+      ...(this.contentHeight ? { contentHeight: true } : {}),
     };
   }
 
@@ -968,6 +1116,7 @@ export class Renderer {
   layout(): BoxChange[] {
     const root = this.nodes.get(ROOT_ID);
     if (!root) return [];
+    this.hostMeasures.clear();
     const env = this.layoutEnvironment();
     const envKey = JSON.stringify({ ...env, assets: undefined });
     if (!this.engine || envKey !== this.engineEnvKey) {
@@ -991,6 +1140,15 @@ export class Renderer {
     };
     const changes = applyLayout(ctx, result);
     this.boxes = ctx.boxes;
+    if (this.contentHeight) {
+      // The island's root is as tall as its content.
+      let bottom = 0;
+      for (const child of root.children) {
+        const frame = result.frames.get(child.id);
+        if (frame) bottom = Math.max(bottom, frame.y + frame.height);
+      }
+      this.root.style.height = `${bottom + env.safeArea.bottom}px`;
+    }
     this.collectGeometry(result);
     this.collectLayouts(result);
     if (this.applying === 0) this.flushGeometry();
@@ -1004,17 +1162,49 @@ export class Renderer {
    * (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 {
+  private collectGeometry(result: LayoutResult, framesOnly = false): void {
+    let rootRect: DOMRect | null = null;
     for (const [id, node] of this.nodes) {
       if (node.kind !== 'geometry' && node.props['reportsSize'] !== true) continue;
+      const reportsFrame = node.props['reportsFrame'] === true;
+      if (framesOnly && !reportsFrame) continue;
       const frame = result.frames.get(id);
       if (!frame) continue; // e.g. inside a hidden tab
       const width = Math.round(frame.width);
       const height = Math.round(frame.height);
+      const event: GeometryEvent = { type: 'geometry', id, width, height };
+      let key = `${width}x${height}`;
+      if (reportsFrame) {
+        // Where it is drawn now (scrolled), in the root's coordinates.
+        const el = this.elements.get(id);
+        rootRect ??= this.root.getBoundingClientRect();
+        const rect = el?.getBoundingClientRect();
+        const x = rect ? Math.round(rect.left - rootRect.left) : Math.round(frame.x);
+        const y = rect ? Math.round(rect.top - rootRect.top) : Math.round(frame.y);
+        const env = this.layoutEnvironment();
+        event.x = x;
+        event.y = y;
+        event.safeArea = safeAreaOverlap({ x, y, width, height }, env.screen, env.safeArea);
+        key += `@${x},${y}/${event.safeArea.top},${event.safeArea.leading},${event.safeArea.bottom},${event.safeArea.trailing}`;
+        // The visible rectangle of the scroll view (or list) the reader is in.
+        const scroller = el?.parentElement?.closest<HTMLElement>('.sb-scrollview, .sb-list');
+        if (scroller) {
+          const view = scroller.getBoundingClientRect();
+          event.scrollView = {
+            x: Math.round(view.left - rootRect.left),
+            y: Math.round(view.top - rootRect.top),
+            width: Math.round(view.width),
+            height: Math.round(view.height),
+            axis: scroller.dataset['sbAxes'] === 'horizontal' ? 'horizontal' : 'vertical',
+          };
+          const v = event.scrollView;
+          key += `/${v.x},${v.y},${v.width},${v.height},${v.axis}`;
+        }
+      }
       const last = this.reportedGeometry.get(id);
-      if (last && last.width === width && last.height === height) continue;
-      this.reportedGeometry.set(id, { width, height });
-      this.pendingGeometry.push({ type: 'geometry', id, width, height });
+      if (last && last.key === key) continue;
+      this.reportedGeometry.set(id, { width, height, key });
+      this.pendingGeometry.push(event);
     }
   }
 
@@ -1193,8 +1383,13 @@ export class Renderer {
     this.root.removeEventListener('focusout', this.onFocusChange);
     this.root.removeEventListener('scroll', this.onScrollDismissKeyboard, true);
     this.interaction.dispose();
+    this.externalDrops.dispose();
     this.videoEvents.dispose();
     this.resizeObserver?.disconnect();
+    this.hostObserver?.disconnect();
+    this.stopHostChanges();
+    this.hover.dispose();
+    this.root.removeEventListener('scroll', this.queueFrameCheck, true);
     this.root.removeEventListener('change', this.onChange);
     this.root.removeEventListener('pointerdown', this.onSliderPointerDown);
     this.reset();
@@ -1218,6 +1413,27 @@ export class Renderer {
     applyProps(el, kind, props, this.assets);
     this.noteScroll(id, kind, props);
     if (kind === 'lazyspacer') this.lazySpacers.add(id);
+    if (kind === 'host') {
+      this.hosts.add(id);
+      this.adoptHostContent(id, el, props as HostProps);
+    }
+  }
+
+  /** A `host` element takes the page's content element (src/hostContent.ts) and watches its size. */
+  private adoptHostContent(id: ElementId, el: HTMLElement, props: HostProps): void {
+    const content = hostContent(props.content);
+    const previous = this.hostContents.get(id);
+    if (previous && previous !== content) {
+      this.hostObserver?.unobserve(previous);
+      previous.remove();
+      this.hostContents.delete(id);
+    }
+    if (!content) return;
+    if (content.parentElement !== el) el.appendChild(content);
+    if (previous !== content) {
+      this.hostContents.set(id, content);
+      this.hostObserver?.observe(content);
+    }
   }
 
   /** After a scroll, the lazy spacers are checked on the next frame (once per frame). */
@@ -1291,6 +1507,24 @@ export class Renderer {
     if (!el) throw new RendererError(`Cannot update unknown element ${id}`, op);
     const kind = el.dataset[KIND_ATTR] as ElementKind;
     const node = this.nodes.get(id);
+    // `.contentTransition`: a text changing under one keeps a copy of how it
+    // looked, for the Animator to play the change with (when the pass animates).
+    if (kind === 'text' && node && this.passAnimates !== false && (props as TextProps).text !== node.props['text']) {
+      const host = el.closest<HTMLElement>('[data-sb-content-transition]');
+      if (host && this.root.contains(host)) {
+        this.passRootRect ??= this.animator.rootRect();
+        const rect = this.animator.rectOf(el, this.passRootRect);
+        if (rect) {
+          this.pass.contentChanges.push({
+            el,
+            clone: ghostClone(el),
+            rect,
+            kind: host.dataset['sbContentTransition'] as 'numericText' | 'opacity' | 'interpolate',
+            countsDown: countsDown(host.dataset['sbCountsDown'], String(node.props['text'] ?? ''), String((props as TextProps).text ?? '')),
+          });
+        }
+      }
+    }
     if (node) {
       node.props = asRecord(props);
       // Phase 9: the next layout re-measures this subtree and its ancestors;
@@ -1324,9 +1558,11 @@ export class Renderer {
     if (kind === 'text') el.textContent = '';
     applyProps(el, kind, props, this.assets);
     this.noteScroll(id, kind, props);
+    if (kind === 'host') this.adoptHostContent(id, el, props as HostProps);
     const newToken = el.dataset[ANIMATION_TOKEN];
     const tokenChanged = (previous?.tokenChanged ?? false) || (newToken !== undefined && newToken !== oldToken);
     const record: UpdatedRecord = { el, before, tokenChanged };
+    if (IMPLICITLY_ANIMATED.has(kind)) record.implicit = true;
     const animation = ANIMATIONS.get(el);
     if (animation) record.animation = animation;
     this.pass.updated.set(el, record);
@@ -1450,11 +1686,19 @@ export class Renderer {
       const ancestors: HTMLElement[] = [];
       for (let a = parent; a && a !== this.root; a = a.parentElement!) ancestors.push(a);
       let rect: DOMRect | null = null;
+      const matched: { id: string; el: HTMLElement; rect: DOMRect }[] = [];
       if (this.passAnimates !== false) {
         this.passRootRect ??= this.animator.rootRect();
         rect = this.animator.rectOf(el, this.passRootRect);
+        // `.matchedGeometryEffect`: where the matched boxes in the subtree were.
+        const candidates = el.dataset['sbMatched'] !== undefined ? [el] : [];
+        candidates.push(...el.querySelectorAll<HTMLElement>('[data-sb-matched]'));
+        for (const box of candidates) {
+          const boxRect = this.animator.rectOf(box, this.passRootRect);
+          if (boxRect) matched.push({ id: box.dataset['sbMatched']!, el: box, rect: boxRect });
+        }
       }
-      this.pass.removed.push({ el, ancestors, rect, transition: transitionOf(el) });
+      this.pass.removed.push({ el, ancestors, rect, transition: transitionOf(el), ...(matched.length ? { matched } : {}) });
     }
     this.pass.inserted.delete(el);
     this.pass.updated.delete(el);
@@ -1480,6 +1724,12 @@ export class Renderer {
 
   /** Forget an element in every map; detaches its node from the tree. */
   private forget(id: ElementId): void {
+    const content = this.hostContents.get(id);
+    if (content) {
+      this.hostObserver?.unobserve(content);
+      this.hostContents.delete(id);
+    }
+    this.hosts.delete(id);
     this.elements.delete(id);
     this.boxes.delete(id);
     this.dirty.delete(id);
@@ -1705,6 +1955,9 @@ function div(className: string): HTMLDivElement {
 /** Create the element and any chrome it owns; props are applied separately. */
 function createShell(kind: ElementKind): HTMLElement {
   switch (kind) {
+    case 'host':
+      // The page's content element is adopted by the renderer (`adoptHostContent`).
+      return div('sb-host');
     case 'button': {
       const el = document.createElement('button');
       el.type = 'button';
@@ -1912,6 +2165,15 @@ function createShell(kind: ElementKind): HTMLElement {
     }
     case 'tapgesture':
       return document.createElement('div');
+    case 'inspector': {
+      // The content and the panel go into the slot; the panel draws the
+      // hairline before it (styles.css), so it slides with the panel.
+      const el = document.createElement('div');
+      const slot = div('sb-slot sb-inspector-columns');
+      el.append(slot);
+      SLOTS.set(el, slot);
+      return el;
+    }
     case 'navsplit': {
       // Phase 7: the two columns go into the slot; the separator is chrome
       // positioned from the engine's `separator` rect.
@@ -1919,15 +2181,25 @@ function createShell(kind: ElementKind): HTMLElement {
       const slot = div('sb-slot sb-navsplit-columns');
       const separator = div('sb-navsplit-separator');
       separator.setAttribute('aria-hidden', 'true');
-      el.append(slot, separator);
+      // iPadOS: the sidebar toggle, at the engine's `toggle` rect; a tap
+      // asks Swift to show or hide the sidebar.
+      const toggle = document.createElement('button');
+      toggle.type = 'button';
+      toggle.className = 'sb-navsplit-toggle';
+      toggle.setAttribute('aria-label', 'Toggle Sidebar');
+      const symbol = renderSymbol('sidebar.left');
+      if (symbol) toggle.append(symbol);
+      el.append(slot, separator, toggle);
       SLOTS.set(el, slot);
       return el;
     }
     case 'viewthatfits':
       return document.createElement('div');
-    // Phase 8: gestures, rows, navigation
+    // Phase 8: gestures, rows, navigation; drag and drop
     case 'gesture':
     case 'contextmenu':
+    case 'draggable':
+    case 'dropdestination':
       return document.createElement('div');
     case 'swipeactions':
     case 'listrow': {
@@ -1958,6 +2230,15 @@ function createShell(kind: ElementKind): HTMLElement {
         }
         control.append(circle);
         el.append(control);
+        // The reorder grip of a movable row (`chrome.reorderControl`), at the
+        // trailing edge: three lines, as iOS draws it. It lives in the content
+        // slot, so it slides with the content when the minus (or a swipe)
+        // reveals Delete; the control above stays, as on iOS.
+        const grip = div('sb-listrow-grip');
+        grip.hidden = true;
+        grip.setAttribute('aria-label', 'Reorder');
+        grip.append(gripGlyph());
+        slot.append(grip);
       }
       return el;
     }
@@ -2064,6 +2345,22 @@ function isSectionSupplement(el: HTMLElement): boolean {
   return el.classList.contains('sb-sectionheader') || el.classList.contains('sb-sectionfooter');
 }
 
+/** The reorder grip as iOS draws it: three 21 pt lines, 1.33 thick, 4.67 apart. */
+function gripGlyph(): SVGSVGElement {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('viewBox', '0 0 21 11');
+  svg.setAttribute('aria-hidden', 'true');
+  for (const y of [0.67, 5.33, 10]) {
+    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    line.setAttribute('x1', '0');
+    line.setAttribute('x2', '21');
+    line.setAttribute('y1', String(y));
+    line.setAttribute('y2', String(y));
+    svg.append(line);
+  }
+  return svg;
+}
+
 function span(className: string): HTMLSpanElement {
   const el = document.createElement('span');
   el.className = className;
@@ -2413,6 +2710,9 @@ function applyTextEditor(area: HTMLTextAreaElement, props: TextEditorProps): voi
 
 function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, assets: AssetCatalog): void {
   switch (kind) {
+    case 'host':
+      el.dataset['sbSizing'] = (props as HostProps).sizing;
+      break;
     case 'text':
       applyText(el, props as TextProps, assets);
       break;
@@ -2447,8 +2747,15 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
     case 'navstack':
     case 'geometry':
     case 'menu':
+    case 'inspector':
+      // The engine reads `presented`. Showing or hiding the panel animates
+      // by default, as in SwiftUI (`animationTokenOf`).
+      el.dataset[ANIMATION_TOKEN] = animationTokenOf(kind, props)!;
+      break;
+    case 'inspectorpanel':
+      break;
     case 'navsplit':
-      // No props.
+      // No props (a navsplit's `sidebarVisible` is read by the engine and layoutDom).
       break;
     case 'navlink':
       // Phase 7: a selected row (inside a `List(selection:)`) gets a rounded fill.
@@ -2463,6 +2770,8 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
       const placement = (props as ToolbarProps).placement;
       el.dataset['sbPlacement'] =
         placement === 'leading' || placement === 'principal' || placement === 'bottom' ? placement : 'trailing';
+      // A `ToolbarSpacer`: draws nothing.
+      el.toggleAttribute('data-sb-spacer', typeof (props as ToolbarProps).spacer === 'string');
       break;
     }
     case 'searchfield':
@@ -2477,6 +2786,7 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
       // `.scrollContentBackground(.hidden)`: no grouped background (styles.css).
       if (list.background === 'hidden') el.dataset['sbBackground'] = 'hidden';
       if (list.dismissesKeyboard === true) el.dataset['sbDismissesKeyboard'] = 'true';
+      applyEdgeEffect(el, list.edgeEffect);
       break;
     }
     case 'tabview': {
@@ -2505,6 +2815,7 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
       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';
+      applyEdgeEffect(el, scroll.edgeEffect);
       break;
     }
     case 'section':
@@ -2547,6 +2858,12 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
       el.dataset['sbColumns'] = String(Array.isArray(grid.columns) ? grid.columns.length : 0);
       break;
     }
+    case 'lazyhgrid': {
+      const grid = props as LazyHGridProps;
+      el.dataset['sbAlignment'] = grid.alignment ?? 'center';
+      el.dataset['sbRows'] = String(Array.isArray(grid.rows) ? grid.rows.length : 0);
+      break;
+    }
     case 'gauge':
       applyGauge(el, props as GaugeProps);
       break;
@@ -2587,11 +2904,19 @@ function applyProps(el: HTMLElement, kind: ElementKind, props: ElementProps, ass
     }
     case 'contextmenu':
       break;
+    case 'draggable':
+      break;
+    case 'dropdestination': {
+      const accepts = (props as DropDestinationProps | undefined)?.accepts;
+      el.dataset['sbAccepts'] = Array.isArray(accepts) ? accepts.filter((a) => typeof a === 'string').join(' ') : '';
+      break;
+    }
     case 'listrow': {
       const row = (props as ListRowProps | undefined) ?? {};
       el.toggleAttribute('data-sb-selectable', row.selectable === true);
       el.toggleAttribute('data-sb-selected', row.selected === true);
       el.toggleAttribute('data-sb-deletable', row.deletable === true);
+      el.toggleAttribute('data-sb-movable', row.movable === true);
       if (row.selectable) el.setAttribute('aria-selected', String(row.selected === true));
       else el.removeAttribute('aria-selected');
       const control = el.querySelector<HTMLElement>(':scope > .sb-listrow-control');
@@ -3051,7 +3376,7 @@ function applyNavScreen(el: HTMLElement, props: NavScreenProps): void {
   el.dataset['sbDepth'] = String(depth);
   el.dataset['sbDisplay'] = large ? 'large' : 'inline';
   const inlineTitle = el.querySelector<HTMLElement>(':scope > .sb-navbar > .sb-navbar-title');
-  const largeTitle = el.querySelector<HTMLElement>(':scope > .sb-navscreen-body > .sb-navbar-large-title');
+  const largeTitle = largeTitleOf(el);
   // A large title that scrolls away collapses into the inline one (shown
   // with `data-sb-collapsed`, src/largeTitle.ts).
   if (inlineTitle) inlineTitle.textContent = title;
@@ -3201,7 +3526,7 @@ export function applyStyle(el: HTMLElement, style: Style): void {
       // typography.ts); the fallbacks are the Large sizes.
       const large = resolveTextStyle(textStyle, DEFAULT_TYPE_SIZE);
       s.fontSize = `var(${textStyleVar(textStyle, 'size')}, ${large.fontSize}px)`;
-      s.lineHeight = `var(${textStyleVar(textStyle, 'lh')}, ${large.lineHeight}px)`;
+      s.lineHeight = `var(${textStyleVar(textStyle, 'lh')}, ${Math.round(large.lineHeight * 100) / 100}px)`;
       el.dataset['sbTextStyle'] = textStyle;
       const implied = TEXT_STYLE_WEIGHT[textStyle];
       if (!weight && implied) s.fontWeight = FONT_WEIGHT[implied];
@@ -3309,6 +3634,8 @@ export function applyStyle(el: HTMLElement, style: Style): void {
     s.pointerEvents = 'none';
     el.dataset['sbHitTesting'] = 'false';
   }
+  // Hover, tooltips, cursors, symbol effects and matched geometry ids (pointerEffects.ts).
+  applyPointerAndEffects(el, style);
 
   let opacity = style.opacity;
   if (style.disabled) {
@@ -3439,3 +3766,16 @@ function lazySpacerIsNear(el: HTMLElement): boolean {
   }
   return rect.top < view.bottom + view.height && rect.bottom > view.top - view.height;
 }
+
+/**
+ * Which way a `.numericText` change rolls: the direction it names, or else
+ * down when the new text reads as a smaller number than the old one (as
+ * SwiftUI's `numericText(value:)` decides from the value).
+ */
+export function countsDown(named: string | undefined, before: string, after: string): boolean {
+  if (named !== undefined) return named === 'true';
+  const number = (text: string): number => Number.parseFloat(text.replace(/[^\d.+-]/g, ''));
+  const from = number(before);
+  const to = number(after);
+  return Number.isFinite(from) && Number.isFinite(to) && to < from;
+}