@swiftbrowser/web 0.6.3 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "type": "module",
   "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
   "repository": {

package/src/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)';
@@ -534,6 +539,25 @@ 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;
+    };
+
     const animationFor = (chain: Iterable<HTMLElement>): Animation | undefined | false => {
       let depth = 0;
       for (const el of chain) {
@@ -549,7 +573,7 @@ export class Animator {
 
     // Style changes.
     for (const [el, rec] of pass.updated) {
-      if (!rec.before || !el.isConnected) continue;
+      if (!rec.before || !el.isConnected || hidden(el)) continue;
       const animation = animationFor(ancestorsAndSelf(el));
       if (animation === false) continue;
       this.animateChanges(el, rec.before, animation);
@@ -558,7 +582,7 @@ 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;
+        if (!el.isConnected || hidden(el)) continue;
         const animation = animationFor(ancestorsAndSelf(el));
         if (animation !== false) this.playOwnFrames(el, animation);
       }
@@ -572,6 +596,12 @@ export class Animator {
       const { el, from, to } = change;
       if (!from || !el.isConnected || pass.inserted.has(el)) continue;
       if (this.selfAnimating.has(change.kind)) continue;
+      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 = animationFor(ancestorsAndSelf(el));
       if (animation === false && change.kind === BAR_GLASS_KIND && glassScreens.has(el.parentElement)) {
         animation = TOOLBAR_ANIMATION;
@@ -590,8 +620,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,7 +657,7 @@ 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));
       if (animation === false) continue;
@@ -635,7 +666,7 @@ export class Animator {
 
     // Content transitions: the old text leaves as the new one arrives.
     for (const change of pass.contentChanges) {
-      if (!change.el.isConnected) continue;
+      if (!change.el.isConnected || hidden(change.el)) continue;
       const animation = animationFor(ancestorsAndSelf(change.el));
       if (animation === false) continue;
       this.transitionContent(change, animation);

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, 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 : scroller.scrollTop),
+    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 } 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 {
@@ -754,6 +789,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,
@@ -340,6 +340,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
@@ -820,6 +828,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(),
     };
@@ -943,7 +952,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,6 +983,8 @@ 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.commits += 1;
@@ -1011,6 +1025,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,6 +1083,8 @@ export class Renderer {
     this.pass = emptyPass();
     this.passAnimates = null;
     this.passRootRect = null;
+    this.preSnapshots.clear();
+    this.preRects.clear();
     this.closeMenu();
     this.reportedGeometry.clear();
     this.layoutReporter.clear();
@@ -1604,7 +1662,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 +1829,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.

package/src/scrollEdge.ts

@@ -17,6 +17,7 @@
 
 import type { EdgeEffectProps } from './protocol';
 import type { Rect } from './layout';
+import { runScrollSync, type ScrollSync } from './scrollSync';
 
 /**
  * How far content has to be under a bar for its edge effect to be at full
@@ -77,13 +78,24 @@ export function bindScrollEdgeBottom(scroller: HTMLElement, covered: Rect | unde
 }
 
 export function syncScrollEdgeBottom(scroller: HTMLElement): void {
-  if (scroller.dataset['sbUnderBottom'] === undefined) return;
+  runScrollSync(scrollEdgeBottomSync(scroller));
+}
+
+/** The sync as a read (the scroll metrics) and the writes from it (scrollSync.ts). */
+function scrollEdgeBottomSync(scroller: HTMLElement): ScrollSync<number | null> {
+  return {
+    // Content is under the bar until the end has scrolled clear of it (the
+    // inset is room past the content's end).
+    measure: () =>
+      scroller.dataset['sbUnderBottom'] === undefined || !ownerOf(scroller) ? null : scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop,
+    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,36 @@
+/**
+ * Scroll-state syncs batched into one read phase.
+ *
+ * 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, so they share one layout.
+ */
+
+export interface ScrollSync<T> {
+  measure(): T;
+  apply(value: T): void;
+}
+
+let batch: ScrollSync<unknown>[] | null = null;
+
+/** 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());
+}
+
+export function beginScrollSyncBatch(): void {
+  batch ??= [];
+}
+
+/** Measure every queued sync, then apply them all; closes the batch. */
+export function flushScrollSyncBatch(): void {
+  const queued = batch;
+  batch = null;
+  if (!queued) return;
+  const values = queued.map((sync) => sync.measure());
+  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;