@swiftbrowser/web 0.6.3 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "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/animation.ts

@@ -116,6 +116,11 @@ export interface FrameChange {
   to: FrameRect;
 }
 
+/** A screen below the top of its navigation stack (the renderer marks it). */
+const BELOW_SCREEN = '.sb-navscreen[data-sb-nav-position="below"]';
+/** A push or pop in progress in a stack: its top screen sliding in, or a popped screen's clone sliding out. */
+const NAV_IN_FLIGHT = ':scope > .sb-slot > .sb-navscreen--push, :scope > .sb-navscreen--pop';
+
 export const DEFAULT_DURATION = 0.35;
 export const EASE_IN_OUT = 'cubic-bezier(0.42, 0, 0.58, 1)';
 export const EASE_IN = 'cubic-bezier(0.42, 0, 1, 1)';
@@ -464,6 +469,39 @@ export class Animator {
     this.playOwnFrames = options.playOwnFrames;
   }
 
+  /** Commits waiting for the next animation frame (`commitNextFrame`), in order. */
+  private pending: { pass: PassRecord; animation: Animation | undefined; frames: readonly FrameChange[] }[] = [];
+  private pendingFrame: number | null = null;
+
+  /**
+   * `commit` in the next animation frame's callback, before the frame
+   * paints. A commit reads what the pass just wrote (the updated elements'
+   * computed styles, the removed boxes' places): read in the pass, they
+   * make the browser lay its frames out once more; read in the frame's
+   * callback, they cost the frame its one layout and the tweens still start
+   * on it. In a hidden page nothing paints, so the commit runs now.
+   */
+  commitNextFrame(pass: PassRecord, animation: Animation | undefined, frames: readonly FrameChange[] = []): void {
+    if (typeof requestAnimationFrame !== 'function' || (typeof document !== 'undefined' && document.hidden)) {
+      this.flushCommits();
+      this.commit(pass, animation, frames);
+      return;
+    }
+    this.pending.push({ pass, animation, frames });
+    this.pendingFrame ??= requestAnimationFrame(() => this.flushCommits());
+  }
+
+  /** Run the commits waiting for the next frame now, in order. */
+  flushCommits(): void {
+    if (this.pendingFrame !== null) {
+      cancelAnimationFrame(this.pendingFrame);
+      this.pendingFrame = null;
+    }
+    const pending = this.pending;
+    this.pending = [];
+    for (const { pass, animation, frames } of pending) this.commit(pass, animation, frames);
+  }
+
   /** Computed values of the animated properties, or null when not rendered. */
   snapshot(el: HTMLElement): StyleSnapshot | null {
     if (!el.isConnected) return null;
@@ -534,14 +572,44 @@ export class Animator {
     const matchedPairs = this.matchedPairs(pass);
     const matchedTo = new Map<RemovedRecord, { from: DOMRect; to: DOMRect }>();
 
+    // What a screen below the top of its stack holds is not drawn once the
+    // push has settled (styles.css: `visibility: hidden`), so it is not
+    // animated: it jumps to its new boxes, as the rows of a list a pushed
+    // screen covers do when a split view's sidebar slides. During a push or
+    // pop the lower screen shows, sliding, so then it animates as usual.
+    const hiddenScreens = new Map<HTMLElement, boolean>();
+    const hidden = (el: HTMLElement): boolean => {
+      for (let screen = el.closest<HTMLElement>(BELOW_SCREEN); screen; screen = screen.parentElement?.closest<HTMLElement>(BELOW_SCREEN) ?? null) {
+        let settled = hiddenScreens.get(screen);
+        if (settled === undefined) {
+          const stack = screen.closest<HTMLElement>('.sb-navstack');
+          settled = stack !== null && stack.querySelector(NAV_IN_FLIGHT) === null;
+          hiddenScreens.set(screen, settled);
+        }
+        if (settled) return true;
+      }
+      return false;
+    };
+
+    // The animation of the token root `el`, found `depth` levels up.
+    const rootAnimation = (el: HTMLElement, depth: number): Animation | undefined | false => {
+      // (below an item of a group the bar's own spring moves: not animated)
+      if (groupsOnly.has(el) && depth > 1) return false;
+      return tokenRoots.get(el) ?? { type: 'default' };
+    };
     const animationFor = (chain: Iterable<HTMLElement>): Animation | undefined | false => {
       let depth = 0;
       for (const el of chain) {
-        if (tokenRoots.has(el)) {
-          // (below an item of a group the bar's own spring moves: not animated)
-          if (groupsOnly.has(el) && depth > 1) return false;
-          return tokenRoots.get(el) ?? { type: 'default' };
-        }
+        if (tokenRoots.has(el)) return rootAnimation(el, depth);
+        depth++;
+      }
+      return commitAnimation ?? false;
+    };
+    // The same for an element in the page, up its ancestors (no chain built).
+    const animationAt = (el: HTMLElement): Animation | undefined | false => {
+      let depth = 0;
+      for (let node: HTMLElement | null = el; node; node = node.parentElement) {
+        if (tokenRoots.has(node)) return rootAnimation(node, depth);
         depth++;
       }
       return commitAnimation ?? false;
@@ -549,8 +617,8 @@ export class Animator {
 
     // Style changes.
     for (const [el, rec] of pass.updated) {
-      if (!rec.before || !el.isConnected) continue;
-      const animation = animationFor(ancestorsAndSelf(el));
+      if (!rec.before || !el.isConnected || hidden(el)) continue;
+      const animation = animationAt(el);
       if (animation === false) continue;
       this.animateChanges(el, rec.before, animation);
     }
@@ -558,8 +626,8 @@ export class Animator {
     // What elements animate themselves (a custom shape's path).
     if (this.playOwnFrames) {
       for (const el of pass.updated.keys()) {
-        if (!el.isConnected) continue;
-        const animation = animationFor(ancestorsAndSelf(el));
+        if (!el.isConnected || hidden(el)) continue;
+        const animation = animationAt(el);
         if (animation !== false) this.playOwnFrames(el, animation);
       }
     }
@@ -572,7 +640,13 @@ export class Animator {
       const { el, from, to } = change;
       if (!from || !el.isConnected || pass.inserted.has(el)) continue;
       if (this.selfAnimating.has(change.kind)) continue;
-      let animation = animationFor(ancestorsAndSelf(el));
+      if (hidden(el)) {
+        // Not drawn: a tween still running on it (from a pass before the
+        // push settled) carries on to the new box; otherwise it jumps.
+        this.retargetFrame(change, null);
+        continue;
+      }
+      let animation = animationAt(el);
       if (animation === false && change.kind === BAR_GLASS_KIND && glassScreens.has(el.parentElement)) {
         animation = TOOLBAR_ANIMATION;
       }
@@ -590,8 +664,9 @@ export class Animator {
     // change still moves with an ancestor that jumped.
     const changed = new Set(frames.map((change) => change.el));
     for (const [el, animation] of tokenRoots) {
-      if (changed.has(el) || !el.isConnected || pass.inserted.has(el)) continue;
-      const box = { x: parseFloat(el.style.left) || 0, y: parseFloat(el.style.top) || 0, width: el.offsetWidth, height: el.offsetHeight };
+      if (changed.has(el) || !el.isConnected || pass.inserted.has(el) || hidden(el)) continue;
+      // (the inline frame the layout applied: no layout read mid-commit)
+      const box = { x: parseFloat(el.style.left) || 0, y: parseFloat(el.style.top) || 0, width: parseFloat(el.style.width) || 0, height: parseFloat(el.style.height) || 0 };
       tweens.push({ change: { el, kind: el.dataset['sbKind'] ?? '', from: box, to: box }, from: box, animation: animation ?? { type: 'default' }, moved: false });
     }
     // An animated element under an ancestor that jumps (outside the animated
@@ -626,17 +701,17 @@ export class Animator {
     // Inserted elements: only subtree roots (a nested fade would compound).
     for (const el of pass.inserted) {
       if (!el.isConnected || pass.updated.has(el)) continue;
-      if (hasAncestorIn(el, pass.inserted)) continue;
+      if (hasAncestorIn(el, pass.inserted) || hidden(el)) continue;
       if (this.selfAnimating.has(el.dataset['sbKind'] ?? '')) continue;
-      const animation = animationFor(ancestorsAndSelf(el));
+      const animation = animationAt(el);
       if (animation === false) continue;
       this.enter(el, transitionOf(el) ?? implicitTransitionOf(el), animation);
     }
 
     // Content transitions: the old text leaves as the new one arrives.
     for (const change of pass.contentChanges) {
-      if (!change.el.isConnected) continue;
-      const animation = animationFor(ancestorsAndSelf(change.el));
+      if (!change.el.isConnected || hidden(change.el)) continue;
+      const animation = animationAt(change.el);
       if (animation === false) continue;
       this.transitionContent(change, animation);
     }
@@ -968,10 +1043,6 @@ export function transitionOf(root: HTMLElement): Transition | undefined {
   return undefined;
 }
 
-function* ancestorsAndSelf(el: HTMLElement): Generator<HTMLElement> {
-  for (let node: HTMLElement | null = el; node; node = node.parentElement) yield node;
-}
-
 function hasAncestorIn(el: HTMLElement, set: ReadonlySet<HTMLElement>): boolean {
   for (let node = el.parentElement; node; node = node.parentElement) {
     if (set.has(node)) return true;

package/src/interaction.ts

@@ -97,6 +97,8 @@ export interface InteractionHost {
   nodeOf(id: ElementId): LayoutNode | undefined;
   /** Open the popover of a `contextmenu` element anchored to it. */
   openContextMenu(anchor: HTMLElement, id: ElementId): void;
+  /** A covered screen is about to show (a back swipe starts): lay it out if it is stale. */
+  revealScreen(screen: HTMLElement): void;
   /** Whether the popover of element `id` is open. */
   isMenuOpen(id: ElementId): boolean;
   closeMenu(): void;
@@ -550,6 +552,7 @@ export class InteractionController {
         c.screen.dataset['sbSwipeDragging'] = '';
         c.screen.style.transition = 'none';
         if (c.below) {
+          this.host.revealScreen(c.below);
           c.below.style.transition = 'none';
           c.below.style.visibility = 'visible';
         }

package/src/largeTitle.ts

@@ -20,6 +20,7 @@
 
 import type { Rect } from './layout';
 import { edgeStrength, setProperty, setValue } from './scrollEdge';
+import { runScrollSync, scrollTopOf, type ScrollSync } from './scrollSync';
 
 /** The scroll offset past which the title has gone under the bar. */
 const COLLAPSE_OFFSET = 44;
@@ -102,16 +103,24 @@ function releaseTitle(screen: HTMLElement, scroller: HTMLElement): void {
 }
 
 export function syncScrollUnderBar(scroller: HTMLElement): void {
-  if (scroller.dataset['sbUnderBar'] === undefined) return;
-  const screen = screenOf(scroller);
-  if (!screen) return;
-  const offset = scroller.scrollTop;
-  setFlag(screen, 'sbScrolled', offset > 0);
-  // The edge effect's strength ramps up over the first `EDGE_RAMP` px.
-  setProperty(screen, '--sb-edge-top', edgeStrength(offset));
-  const title = titles.get(screen);
-  const carries = title !== undefined && title.parentElement === scroller;
-  setFlag(screen, 'sbCollapsed', carries && offset > COLLAPSE_OFFSET);
+  runScrollSync(scrollUnderBarSync(scroller));
+}
+
+/** The sync as a read (`scrollTop`) and the writes from it (scrollSync.ts). */
+function scrollUnderBarSync(scroller: HTMLElement): ScrollSync<number | null> {
+  return {
+    measure: () => (scroller.dataset['sbUnderBar'] === undefined || !screenOf(scroller) ? null : scrollTopOf(scroller)),
+    apply: (offset) => {
+      const screen = screenOf(scroller);
+      if (offset === null || !screen) return;
+      setFlag(screen, 'sbScrolled', offset > 0);
+      // The edge effect's strength ramps up over the first `EDGE_RAMP` px.
+      setProperty(screen, '--sb-edge-top', edgeStrength(offset));
+      const title = titles.get(screen);
+      const carries = title !== undefined && title.parentElement === scroller;
+      setFlag(screen, 'sbCollapsed', carries && offset > COLLAPSE_OFFSET);
+    },
+  };
 }
 
 function setFlag(el: HTMLElement, key: string, on: boolean): void {

package/src/layout/engine.ts

@@ -1228,6 +1228,8 @@ export class LayoutPass {
   private readonly rootContext: Context;
   /** Phase 9: where (and for what proposal) every node was last placed. */
   private readonly placed = new Map<LayoutNode, { key: string; x: number; y: number }>();
+  /** Covered screens to lay out anyway (`uncover`): one a back swipe is about to show. */
+  private readonly uncovered = new Set<LayoutNode>();
   /** Phase 9: the ids each node hid when it was last placed (menu items, tabs, ...). */
   private readonly hiddenBy = new Map<LayoutNode, number[]>();
   /** Phase 9: ids placed or hidden in the current `run`; what the DOM pass must visit. */
@@ -1389,9 +1391,22 @@ export class LayoutPass {
     for (const child of node.children) this.invalidateDown(child);
   }
 
+  /**
+   * A covered screen is about to show without a pop (a back swipe drags
+   * the top screen aside): lay it out on the next run even though it is
+   * covered, in case the stack resized or its content changed meanwhile.
+   */
+  uncover(screen: LayoutNode): void {
+    this.uncovered.add(screen);
+    // The run must reach the stack: its ancestors' plans go (not the
+    // screen's own, so one nothing changed under is still skipped as placed).
+    for (let current = this.parentOf(screen); current; current = this.parentOf(current)) this.forgetPlan(current);
+  }
+
   /** `node` left the tree: drop everything its subtree produced. */
   remove(node: LayoutNode): void {
     this.forgetPlan(node);
+    this.uncovered.delete(node);
     if (node.id >= 0) {
       this.frames.delete(node.id);
       this.text.delete(node.id);
@@ -2996,7 +3011,24 @@ export class LayoutPass {
           const previous = index > 0 ? node.children[index - 1] : undefined;
           this.previousTitles.set(child, previous ? (str(previous.props['title']) ?? '') : '');
         });
-        for (const child of node.children) this.place(child, cctx, screenProposal, x, y);
+        // A screen below the top one is not drawn once its push has settled
+        // (the page hides it), so a screen that was laid out once keeps the
+        // frames it has while it is covered, however the stack resizes or
+        // its content changes meanwhile: on Food Truck's order detail the
+        // covered Orders list is 89% of the boxes. Its plan is left as it
+        // is, so when a pop uncovers it, `placedAlready` passes only if
+        // nothing changed since those frames were made, else it is laid
+        // out afresh. A screen never laid out (pushed under another in one
+        // pass) is placed, so it has frames to show when uncovered.
+        const top = node.children[node.children.length - 1];
+        for (const child of node.children) {
+          if (child !== top && child.id >= 0 && this.frames.has(child.id) && !this.uncovered.has(child)) {
+            this.stats.skipped += 1;
+            continue;
+          }
+          if (child === top) this.uncovered.delete(child);
+          this.place(child, cctx, screenProposal, x, y);
+        }
         return;
       }
       case 'navscreen':

package/src/layoutDom.ts

@@ -42,6 +42,7 @@ import { bitmapLaidOut } from './bitmaps';
 import { drawRichText } from './richText';
 import { bindScrollUnderBar, largeTitleOf, largeTitleScrolls } from './largeTitle';
 import { bindScrollEdgeBottom } from './scrollEdge';
+import { beginScrollSyncBatch, flushScrollSyncBatch, type ScrollExtent } from './scrollSync';
 import { BAR_GLASS_KIND, TOOLBAR_ANIMATION, TOOLBAR_TRANSITION, baseTiming, timingFor, transitionStart } from './animation';
 
 export interface LayoutDomContext {
@@ -80,8 +81,31 @@ const SWITCH_SIZE = { width: 51, height: 31 };
 const CHEVRON_SIZE = 14;
 const NAV_BAR_HEIGHT = 44;
 
+/**
+ * The changes of the layout being applied, for `placeChrome` to report the
+ * chrome it moves (null outside `applyLayout`).
+ */
+let chromeChanges: BoxChange[] | null = null;
+
+/** Kind of a chrome node's `BoxChange` (no id): tweened with its element's pass. */
+export const CHROME_KIND = 'chrome';
+
 export function applyLayout(ctx: LayoutDomContext, result: LayoutResult): BoxChange[] {
   const changes: BoxChange[] = [];
+  chromeChanges = changes;
+  // The scroll views' state syncs read scroll metrics; batched, they share
+  // one layout after the pass's writes instead of forcing one each.
+  beginScrollSyncBatch();
+  try {
+    applyFrames(ctx, result, changes);
+  } finally {
+    chromeChanges = null;
+    flushScrollSyncBatch();
+  }
+  return changes;
+}
+
+function applyFrames(ctx: LayoutDomContext, result: LayoutResult, changes: BoxChange[]): void {
   // Phase 9: an incremental result names what it touched; everything else
   // kept its frame, chrome and box. A one-off result is visited whole.
   const boxes = result.changed ? ctx.boxes : new Map<number, Rect>();
@@ -132,7 +156,6 @@ export function applyLayout(ctx: LayoutDomContext, result: LayoutResult): BoxCha
 
   ctx.boxes = boxes;
   ctx.dirty.clear();
-  return changes;
 }
 
 const LIST_ROW_MIN_HEIGHT = 44;
@@ -307,7 +330,7 @@ function syncBarGlass(
         changes.push({ id: -1, el: glass, kind: BAR_GLASS_KIND, from: null, to: relative });
       }
       glass.dataset['sbToolbars'] = ids.join(' ');
-      placeChrome(glass, rect, frame);
+      placeChrome(glass, rect, frame, false);
     }
     for (const extra of unmatched) transitionGlass(extra, true);
   }
@@ -346,19 +369,31 @@ function transitionGlass(glass: HTMLElement, exit: boolean): void {
   window.setTimeout(done, timing.duration + timing.delay + 100);
 }
 
-function placeChrome(node: HTMLElement | null, rect: Rect | undefined, origin: Rect): void {
+/**
+ * Position a chrome node inside its element: `rect` is in screen coordinates.
+ * A node that was shown and moves or resizes is reported (kind `chrome`), so
+ * an animated pass tweens it with the boxes around it: a section's card, a
+ * row's badge or chevron follow their row as a split view's column widens,
+ * instead of jumping to the end (`report` false: the caller reports it).
+ */
+function placeChrome(node: HTMLElement | null, rect: Rect | undefined, origin: Rect, report = true): void {
   if (!node) return;
   if (!rect) {
     node.hidden = true;
     return;
   }
-  node.hidden = false;
   const s = node.style;
+  const to = { x: rect.x - origin.x, y: rect.y - origin.y, width: rect.width, height: rect.height };
+  if (report && chromeChanges && !node.hidden && s.position === 'absolute') {
+    const from = { x: parseFloat(s.left) || 0, y: parseFloat(s.top) || 0, width: parseFloat(s.width) || 0, height: parseFloat(s.height) || 0 };
+    if (!sameRect(from, to)) chromeChanges.push({ id: -1, el: node, kind: CHROME_KIND, from, to });
+  }
+  node.hidden = false;
   s.position = 'absolute';
-  s.left = `${rect.x - origin.x}px`;
-  s.top = `${rect.y - origin.y}px`;
-  s.width = `${rect.width}px`;
-  s.height = `${rect.height}px`;
+  s.left = `${to.x}px`;
+  s.top = `${to.y}px`;
+  s.width = `${to.width}px`;
+  s.height = `${to.height}px`;
 }
 
 function positionSheetCard(sheet: HTMLElement, frame: Rect): void {
@@ -661,19 +696,22 @@ function applyChrome(
     case 'list': {
       const content = el.querySelector<HTMLElement>(':scope > .sb-list-content');
       const size = result.contentSizes.get(node.id);
+      let extent: ScrollExtent | undefined;
       if (content && size) {
         content.style.width = `${size.width}px`;
         // Extra scrollable space at the end (the engine's frames are unchanged).
         content.style.height = `${size.height + bottomInset}px`;
+        extent = { content: size.height + bottomInset, viewport: frame.height };
       }
       bindScrollUnderBar(el, frame, chrome?.['topInset'], chrome?.['largeTitle']);
-      bindScrollEdgeBottom(el, chrome?.['bottomInset']);
+      bindScrollEdgeBottom(el, chrome?.['bottomInset'], extent);
       return;
     }
     case 'scrollview': {
       const content = el.querySelector<HTMLElement>(':scope > .sb-scroll-content');
       const size = result.contentSizes.get(node.id);
       const rect = chrome?.['content'];
+      let extent: ScrollExtent | undefined;
       if (content && size) {
         const s = content.style;
         const axes = String(node.props['axes'] ?? 'vertical');
@@ -691,9 +729,12 @@ function applyChrome(
         s.marginTop = `${rect ? rect.y - frame.y : 0}px`;
         el.style.scrollPaddingLeft = before ? `${before}px` : '';
         el.style.scrollPaddingRight = after ? `${after}px` : '';
+        if (axes !== 'horizontal') {
+          extent = { content: (rect ? rect.y - frame.y : 0) + size.height + bottomInset, viewport: frame.height };
+        }
       }
       bindScrollUnderBar(el, frame, chrome?.['topInset'], chrome?.['largeTitle']);
-      bindScrollEdgeBottom(el, String(node.props['axes'] ?? 'vertical') === 'horizontal' ? undefined : chrome?.['bottomInset']);
+      bindScrollEdgeBottom(el, String(node.props['axes'] ?? 'vertical') === 'horizontal' ? undefined : chrome?.['bottomInset'], extent);
       return;
     }
     case 'navscreen': {
@@ -754,6 +795,13 @@ function applyChrome(
         // The bar pads its row 16 (styles.css); a split view's sidebar
         // toggle can push the back button further in (chrome.back).
         const indent = barRect ? Math.max(0, backRect.x - barRect.x - 16) : 0;
+        const was = parseFloat(back.style.marginLeft) || 0;
+        // A split view's sidebar sliding in or out moves it in with the
+        // column (tweened as an offset: it is laid out in the bar's row).
+        if (indent !== was && !isNew && chromeChanges) {
+          const size = { y: 0, width: backRect.width, height: backRect.height };
+          chromeChanges.push({ id: -1, el: back, kind: CHROME_KIND, from: { x: was, ...size }, to: { x: indent, ...size } });
+        }
         back.style.marginLeft = indent > 0 ? `${indent}px` : '';
         backLabel.dataset['sbLayoutLabel'] = text;
         if (backLabel.textContent !== text) backLabel.textContent = text;

package/src/renderer.ts

@@ -43,7 +43,7 @@ import {
   transitionOf,
   type PassRecord,
   type UpdatedRecord,
-} from './animation';
+ type StyleSnapshot } from './animation';
 import {
   CanvasTextMeasurer,
   LayoutPass,
@@ -157,6 +157,7 @@ import { HoverTracker, applyPointerAndEffects, safeAreaOverlap } from './pointer
 import { colorMultiplyFilter } from './colorMultiply';
 import { largeTitleOf } from './largeTitle';
 import { applyEdgeEffect } from './scrollEdge';
+import { discardScrollOffsets, readScrollOffsets, trackScroller } from './scrollSync';
 import { DEFAULT_TYPE_SIZE, TEXT_STYLE_WEIGHT, resolveTextStyle, textStyleVar } from './typography';
 
 export type EventCallback = (event: RendererEvent) => void;
@@ -340,6 +341,14 @@ export class Renderer {
   private passAnimates: boolean | null = null;
   /** The animation root's rectangle, read once per pass that animates. */
   private passRootRect: DOMRect | null = null;
+  /**
+   * What the Animator needs from before the pass, read in one go before its
+   * first write (`prereadPass`): the style snapshots of the elements its
+   * updates change and the rectangles of those its removes take out. Read
+   * op by op, between writes, each forced a style recalculation or layout.
+   */
+  private readonly preSnapshots = new Map<HTMLElement, StyleSnapshot | null>();
+  private readonly preRects = new Map<HTMLElement, { rect: DOMRect | null; matched: { id: string; el: HTMLElement; rect: DOMRect }[] }>();
   /**
    * 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
@@ -405,6 +414,8 @@ export class Renderer {
   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; key: string }>();
+  /** The elements whose size is reported (`geometry`, or `reportsSize` props): what `collectGeometry` visits. */
+  private readonly geometryReporters = new Set<ElementId>();
   /** `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). */
@@ -820,6 +831,7 @@ export class Renderer {
       send: (event) => this.onEvent(event),
       nodeOf: (id) => this.nodes.get(id),
       openContextMenu: (anchor, id) => this.openContextMenu(anchor, id),
+      revealScreen: (screen) => this.revealScreen(screen),
       isMenuOpen: (id) => this.menu?.anchorId === id,
       closeMenu: () => this.closeMenu(),
     };
@@ -929,11 +941,16 @@ export class Renderer {
 
   /** Apply a batch of ops in order. Throws `RendererError` on an invalid op. */
   applyOps(ops: readonly Op[]): void {
+    // The scroll views' offsets, read while nothing is waiting to be laid
+    // out: the pass's syncs use them (scrollSync.ts) instead of reading
+    // after its writes.
+    if (this.applying === 0 && ops.length > 0) readScrollOffsets();
     this.applying += 1;
     try {
       this.applyAll(ops);
     } finally {
       this.applying -= 1;
+      if (this.applying === 0) discardScrollOffsets();
     }
     // Geometry events go out after the whole batch (one batch per layout
     // pass); Swift's answer re-enters `applyOps` with the next pass.
@@ -943,7 +960,10 @@ export class Renderer {
   private applyAll(ops: readonly Op[]): void {
     for (let index = 0; index < ops.length; index++) {
       const op = ops[index]!;
-      if (this.passAnimates === null) this.passAnimates = this.passCanAnimate(ops, index);
+      if (this.passAnimates === null) {
+        this.passAnimates = this.passCanAnimate(ops, index);
+        if (this.passAnimates) this.prereadPass(ops, index);
+      }
       switch (op.op) {
         case 'create':
           this.create(op.id, op.kind, op.props, op);
@@ -971,8 +991,10 @@ export class Renderer {
           this.pass = emptyPass();
           this.passAnimates = null;
           this.passRootRect = null;
+          this.preSnapshots.clear();
+          this.preRects.clear();
           const changes = this.layout();
-          this.animator.commit(pass, op.animation, changes);
+          this.animator.commitNextFrame(pass, op.animation, changes);
           this.commits += 1;
           this.syncFocus();
           this.performScrolls(op.animation != null);
@@ -1011,6 +1033,48 @@ export class Renderer {
     return true;
   }
 
+  /**
+   * A covered screen is about to show without a pop (a back swipe): the
+   * engine leaves covered screens as they were, so lay this one out now if
+   * the stack resized or its content changed while it was covered.
+   */
+  private revealScreen(screen: HTMLElement): void {
+    const id = Number(screen.dataset[ID_ATTR]);
+    const node = Number.isInteger(id) ? this.nodes.get(id) : undefined;
+    if (!node || !this.engine) return;
+    this.engine.uncover(node);
+    this.layout();
+  }
+
+  /**
+   * Before a pass that can animate writes anything: snapshot the styles of
+   * the elements its updates will change and read the rectangles of those
+   * its removes will take out, so the reads share the one clean layout
+   * instead of each forcing a new one between the writes.
+   */
+  private prereadPass(ops: readonly Op[], start: number): void {
+    for (let index = start; index < ops.length; index++) {
+      const op = ops[index]!;
+      if (op.op === 'commit') return;
+      if (op.op === 'update') {
+        const el = this.elements.get(op.id);
+        if (el && !this.preSnapshots.has(el)) this.preSnapshots.set(el, this.animator.snapshot(el));
+      } else if (op.op === 'remove') {
+        const el = this.elements.get(op.id);
+        if (!el || !el.parentElement || this.preRects.has(el)) continue;
+        this.passRootRect ??= this.animator.rootRect();
+        const matched: { id: string; el: HTMLElement; rect: DOMRect }[] = [];
+        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.preRects.set(el, { rect: this.animator.rectOf(el, this.passRootRect), matched });
+      }
+    }
+  }
+
   /** Detach everything under the root and forget all non-root elements. */
   reset(): void {
     stopVideos(this.root);
@@ -1027,8 +1091,11 @@ export class Renderer {
     this.pass = emptyPass();
     this.passAnimates = null;
     this.passRootRect = null;
+    this.preSnapshots.clear();
+    this.preRects.clear();
     this.closeMenu();
     this.reportedGeometry.clear();
+    this.geometryReporters.clear();
     this.layoutReporter.clear();
     this.pendingGeometry = [];
     refreshSheets(this.root);
@@ -1202,8 +1269,9 @@ export class Renderer {
    */
   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;
+    for (const id of this.geometryReporters) {
+      const node = this.nodes.get(id);
+      if (!node) continue;
       const reportsFrame = node.props['reportsFrame'] === true;
       if (framesOnly && !reportsFrame) continue;
       const frame = result.frames.get(id);
@@ -1464,8 +1532,10 @@ export class Renderer {
     el.dataset[KIND_ATTR] = kind;
     this.elements.set(id, el);
     this.nodes.set(id, { id, kind, props: asRecord(props), children: [] });
+    if (kind === 'geometry' || (props as { reportsSize?: unknown }).reportsSize === true) this.geometryReporters.add(id);
     applyProps(el, kind, props, this.assets);
     this.noteScroll(id, kind, props);
+    if (kind === 'list' || kind === 'scrollview') trackScroller(el);
     if (kind === 'lazyspacer') this.lazySpacers.add(id);
     if (kind === 'host') {
       this.hosts.add(id);
@@ -1589,8 +1659,11 @@ export class Renderer {
       // Another Swift view now reads this element's size (a `geometry`
       // element kept for a new page's reader): it knows no size yet, so the
       // next layout pass reports the size even when it is unchanged.
-      if ((kind === 'geometry' || next['reportsSize'] === true) && next['reader'] !== node.props['reader']) {
-        this.reportedGeometry.delete(id);
+      if (kind === 'geometry' || next['reportsSize'] === true) {
+        this.geometryReporters.add(id);
+        if (next['reader'] !== node.props['reader']) this.reportedGeometry.delete(id);
+      } else {
+        this.geometryReporters.delete(id);
       }
       node.props = next;
       // Phase 9: the next layout re-measures this subtree and its ancestors;
@@ -1604,7 +1677,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.passAnimates !== false ? this.animator.snapshot(el) : null;
+    const before = previous ? previous.before : this.preSnapshots.has(el) ? this.preSnapshots.get(el)! : 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:
@@ -1771,10 +1844,14 @@ 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 }[] = [];
+      let matched: { id: string; el: HTMLElement; rect: DOMRect }[] = [];
+      const preread = this.preRects.get(el);
       // A bar toolbar's items (and the toolbar) leave with a transition of
       // their own in any pass (src/animation.ts, `implicitToolbars`).
-      if (this.passAnimates !== false || barToolbarOf(el, parent)) {
+      if (preread) {
+        rect = preread.rect;
+        matched = preread.matched;
+      } else if (this.passAnimates !== false || barToolbarOf(el, parent)) {
         this.passRootRect ??= this.animator.rootRect();
         rect = this.animator.rectOf(el, this.passRootRect);
         // `.matchedGeometryEffect`: where the matched boxes in the subtree were.
@@ -1821,6 +1898,7 @@ export class Renderer {
     this.boxes.delete(id);
     this.dirty.delete(id);
     this.reportedGeometry.delete(id);
+    this.geometryReporters.delete(id);
     this.layoutReporter.forget(id);
     const node = this.nodes.get(id);
     const parentId = this.parents.get(id);

package/src/scrollEdge.ts

@@ -17,6 +17,7 @@
 
 import type { EdgeEffectProps } from './protocol';
 import type { Rect } from './layout';
+import { runScrollSync, scrollTopOf, type ScrollExtent, type ScrollSync } from './scrollSync';
 
 /**
  * How far content has to be under a bar for its edge effect to be at full
@@ -58,9 +59,10 @@ function ownerOf(scroller: HTMLElement): HTMLElement | null {
 
 /**
  * Called for every list and scroll view the layout reaches with the engine's
- * `bottomInset` rect (absent when no bar covers its bottom).
+ * `bottomInset` rect (absent when no bar covers its bottom) and the extent
+ * the pass gave it, so the sync needs no scroll metric the writes change.
  */
-export function bindScrollEdgeBottom(scroller: HTMLElement, covered: Rect | undefined): void {
+export function bindScrollEdgeBottom(scroller: HTMLElement, covered: Rect | undefined, extent?: ScrollExtent): void {
   const owner = ownerOf(scroller);
   if (covered === undefined || covered.height <= 0) {
     if (scroller.dataset['sbUnderBottom'] !== undefined) delete scroller.dataset['sbUnderBottom'];
@@ -73,17 +75,31 @@ export function bindScrollEdgeBottom(scroller: HTMLElement, covered: Rect | unde
     bound.add(scroller);
     scroller.addEventListener('scroll', () => syncScrollEdgeBottom(scroller), { passive: true });
   }
-  syncScrollEdgeBottom(scroller);
+  syncScrollEdgeBottom(scroller, extent);
 }
 
-export function syncScrollEdgeBottom(scroller: HTMLElement): void {
-  if (scroller.dataset['sbUnderBottom'] === undefined) return;
+export function syncScrollEdgeBottom(scroller: HTMLElement, extent?: ScrollExtent): void {
+  runScrollSync(scrollEdgeBottomSync(scroller, extent));
+}
+
+/** The sync as a read (the scroll metrics) and the writes from it (scrollSync.ts). */
+function scrollEdgeBottomSync(scroller: HTMLElement, extent: ScrollExtent | undefined): ScrollSync<number | null> {
+  // Content is under the bar until the end has scrolled clear of it (the
+  // inset is room past the content's end). From a layout pass the lengths
+  // are the pass's own; from a scroll event they are read.
+  const remaining = extent
+    ? () => Math.max(extent.content, extent.viewport) - extent.viewport - scrollTopOf(scroller)
+    : () => scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
+  return {
+    measure: () => (scroller.dataset['sbUnderBottom'] === undefined || !ownerOf(scroller) ? null : remaining()),
+    apply: (remaining) => applyScrollEdgeBottom(scroller, remaining),
+  };
+}
+
+function applyScrollEdgeBottom(scroller: HTMLElement, remaining: number | null): void {
   const owner = ownerOf(scroller);
-  if (!owner) return;
+  if (remaining === null || !owner) return;
   claimedBy.set(owner, scroller);
-  // Content is under the bar until the end has scrolled clear of it (the
-  // inset is room past the content's end).
-  const remaining = scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
   setValue(owner, 'sbScrolledBottom', remaining > 1 ? '' : null);
   setProperty(owner, '--sb-edge-bottom', edgeStrength(remaining));
   setValue(owner, 'sbEdgeBottom', scroller.dataset['sbEdgeBottom'] ?? null);

package/src/scrollSync.ts

@@ -0,0 +1,89 @@
+/**
+ * Scroll-state syncs batched into one read phase, before the pass writes.
+ *
+ * Binding a scroll view's under-bar and bottom-edge state (largeTitle.ts,
+ * scrollEdge.ts) reads its scroll metrics and writes flags from them. Done
+ * in the middle of a layout pass, each read follows DOM writes and forces
+ * the browser to lay out again (six times on a split-view toggle with three
+ * lists). While a batch is open the syncs are queued instead, and `flush`
+ * measures all of them before applying any.
+ *
+ * The one metric the pass cannot know, the scroll offset, is read for every
+ * scroll view when the batch opens, before any frame is written: a frame
+ * does not move the offset, so the read costs the layout of what the ops
+ * changed rather than of every frame the pass applied. (A pass that makes
+ * the content shorter than the offset has the browser clamp it afterwards,
+ * which fires `scroll`, and the sync on it catches up.) The extents the
+ * frames change are the pass's own numbers (`ScrollExtent`).
+ */
+
+export interface ScrollSync<T> {
+  measure(): T;
+  apply(value: T): void;
+}
+
+/** A scroll view's content and viewport lengths on its axis, as the pass sets them. */
+export interface ScrollExtent {
+  content: number;
+  viewport: number;
+}
+
+let batch: ScrollSync<unknown>[] | null = null;
+const scrollers = new Set<HTMLElement>();
+let offsets: Map<HTMLElement, number> | null = null;
+
+/** Reads this scroll view's offset before each pass (a view made in a pass starts at 0). */
+export function trackScroller(scroller: HTMLElement): void {
+  scrollers.add(scroller);
+  if (offsets && !offsets.has(scroller)) offsets.set(scroller, 0);
+}
+
+/**
+ * Reads every tracked scroll view's offset: the renderer calls this before a
+ * pass's first op touches the page, where nothing is waiting to be laid out.
+ */
+export function readScrollOffsets(): void {
+  offsets = new Map();
+  for (const scroller of scrollers) {
+    if (!scroller.isConnected) {
+      scrollers.delete(scroller);
+      continue;
+    }
+    offsets.set(scroller, scroller.scrollTop);
+  }
+}
+
+/** Forgets the offsets read for a pass (a pass that did not lay out). */
+export function discardScrollOffsets(): void {
+  offsets = null;
+}
+
+/** The scroll offset read when the batch opened, else read now. */
+export function scrollTopOf(scroller: HTMLElement): number {
+  return offsets?.get(scroller) ?? scroller.scrollTop;
+}
+
+/** Run `sync` now, or queue it while a batch is open. */
+export function runScrollSync<T>(sync: ScrollSync<T>): void {
+  if (batch) batch.push(sync as ScrollSync<unknown>);
+  else sync.apply(sync.measure());
+}
+
+/** Opens a batch, reading the offsets now unless the pass read them before its writes. */
+export function beginScrollSyncBatch(): void {
+  batch ??= [];
+  if (!offsets) readScrollOffsets();
+}
+
+/** Measure every queued sync, then apply them all; closes the batch. */
+export function flushScrollSyncBatch(): void {
+  const queued = batch;
+  batch = null;
+  if (!queued) {
+    discardScrollOffsets();
+    return;
+  }
+  const values = queued.map((sync) => sync.measure());
+  discardScrollOffsets();
+  queued.forEach((sync, i) => sync.apply(values[i]));
+}

package/src/styles.css

@@ -1059,6 +1059,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 
 .sb-navbar-back {
   appearance: none;
+  /* Offset by a `left` tween while a split view's sidebar slides (layoutDom). */
+  position: relative;
   grid-column: 1;
   justify-self: start;
   display: inline-flex;