react-x11 2.22.2 → 2.22.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.22.2",
+  "version": "2.22.4",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [

package/src/nodes/animation.js

@@ -491,6 +491,7 @@ export class NodeAnimation {
         this.root.needsLayout = true;
         this.root._floorsDirty = true;
         this.root._floorsSources.add(this);
+        this.root._floorsOtherSources.add(this);
       }
     }
     // A tick writes `this.style` without going through `_retarget`, so it

package/src/nodes/damage.js

@@ -59,6 +59,13 @@ export const layoutDiff = {
   // would have claimed its children — claims its own box instead, since the
   // move claimed nothing for it.
   ride: false,
+
+  // Whether this walk may leave alone a subtree yoga did not reach under a
+  // parent that did not move (`Node._followParent`) — everything in it is
+  // where the last walk put it. False on a frame something scrolled on, or
+  // asked to: a scroll moves boxes without a pass, and the walk is what
+  // carries the offset down to them (`WindowNode._walkWhole`).
+  skipUnreached: false,
 };
 
 // What an invalidate() may name as its reason — a small closed set, so the

package/src/nodes/invalidate.js

@@ -309,6 +309,11 @@ export class WindowInvalidate {
     const windowToo = reach !== PANES_ONLY;
     if (layoutChanged) {
       this.needsLayout = true;
+      // What the next walk may skip (`layoutDiff.skipUnreached`): nothing,
+      // after a scroll or a change that names no node.
+      if (reason === 'scroll' || !source || source === this) {
+        this._walkWhole = true;
+      }
       // The content floors are measured from the tree, so anything that
       // changed it has to give them up — and **scrolling does not**, which is
       // the whole reason this is not just `needsLayout`: a scroll moves an
@@ -325,8 +330,10 @@ export class WindowInvalidate {
         // …and which node changed, so that a change inside a box that sizes
         // itself measures that box and nothing around it (`_floorsScope`).
         // A claim that names no node, or names the window, is the tree's.
-        if (source && source !== this) this._floorsSources.add(source);
-        else this._floorsUnscoped = true;
+        if (source && source !== this) {
+          this._floorsSources.add(source);
+          if (reason !== 'child-list') this._floorsOtherSources.add(source);
+        } else this._floorsUnscoped = true;
       }
       if (reason !== 'scroll' && reason !== 'resize' && reason !== 'position') {
         this._floorsContentDirty = true;

package/src/nodes/layout.js

@@ -228,22 +228,29 @@ export class NodeLayout {
   }
 
   /**
-   * A child of a node that moved this pass, which yoga did not lay out
-   * again: its box and everything under it sit exactly where the last pass
-   * put them relative to their parents, so the whole subtree moves by
-   * however far its parent did (`dx`, `dy`) — `_shiftAbs`, the scroll fast
-   * path's translation (issue #405), instead of the walk. Answers whether
-   * it was handled; false means walk it.
+   * A child yoga did not lay out again: its box and everything under it
+   * sit exactly where the last pass put them relative to their parents, so
+   * the whole subtree moves by however far its parent did (`dx`, `dy`) —
+   * `_shiftAbs`, the scroll fast path's translation (issue #405), instead
+   * of the walk — and where its parent did not move, it has not moved at
+   * all, and there is nothing to do, unless something scrolled since the
+   * last walk (`layoutDiff.skipUnreached`): a scroll moves boxes with no
+   * pass, and it is the walk that carries the new offset down to them.
+   * Answers whether it was handled; false means walk it.
    *
    * The witness is yoga's has-new-layout flag, the one that fast path
    * reads: a pass sets it on every node it lays out and on every child of
    * one, cached or not, so a child it is clear on was not reached, nor was
    * anything under it. Cleared here when it is found set, just before the
    * walk that reads what the pass left — no pass runs in between — so the
-   * next move of the same subtree finds it clear. Nothing else pays for
-   * it: a child of a node that did not move is walked as it always was,
-   * and a scroll pane always is, since its flag is its own (and a scroll
-   * moves its children with no pass at all).
+   * next look at the same subtree finds it clear. A scroll pane is always
+   * walked, since its flag is its own (and a scroll moves its children
+   * with no pass at all).
+   *
+   * Walking a subtree nothing moved was the whole tree for a change in one
+   * place: a block that arrived at the end of a document of 13,000 boxes
+   * was laid out alone, and the walk still read four numbers out of yoga
+   * for every box in the document — 30 ms of a 60 ms frame.
    *
    * Walking such a subtree read four numbers out of yoga per node and wrote
    * them back unchanged: the bodies of a graph's cards, fifty widgets deep,
@@ -255,13 +262,13 @@ export class NodeLayout {
    * walk's claims came to.
    */
   _followParent(dx, dy) {
-    if (dx === 0 && dy === 0) return false;
     const yoga = this.yoga;
     if (!yoga || !this._placed || this.isScroller?.()) return false;
     if (yoga.hasNewLayout()) {
       yoga.markLayoutSeen();
       return false;
     }
+    if (dx === 0 && dy === 0) return layoutDiff.skipUnreached;
     const sink = layoutDiff.sink;
     const shift = layoutDiff.shift;
     if (

package/src/nodes/queries.js

@@ -197,6 +197,7 @@ export class NodeQueries {
         this.root._floorsDirty = true;
         this.root._floorsContentDirty = true;
         this.root._floorsSources.add(this);
+        this.root._floorsOtherSources.add(this);
       }
     }
   }

package/src/nodes/scrollable.js

@@ -30,6 +30,56 @@ import { BLIT_POISONED } from './scrollblit.js';
 
 const clampScroll = (v, max) => Math.min(Math.max(0, v), max);
 
+/**
+ * How far everything under `node` reaches from its origin — the leftmost
+ * edge, the rightmost, the lowest — through every box that does not clip
+ * what it holds: the walk `measureScrollContent` sums a pane's extent from.
+ *
+ * Kept on each box (`_contentReach`) and reused while yoga has laid nothing
+ * under it out again. Its has-new-layout flag is set on every box a pass
+ * lays out and on each child of one, and a change anywhere below dirties
+ * every box above it, so a clear flag is a subtree whose boxes sit where
+ * they did relative to it — the same witness `_followParent` reads, read
+ * here before the walk that clears it. Hiding a box, or clipping one, goes
+ * through yoga too (`display`, `overflow`). A layout host places its
+ * children where yoga cannot see, so neither it nor they keep one.
+ *
+ * Walked whole, a pane's content cost every box in it on every pass that
+ * laid out any of it: a block arriving at the end of a document of 13,000
+ * boxes read three numbers out of yoga for each of them.
+ */
+function contentReach(node, top) {
+  const cached = node._contentReach;
+  if (
+    !top &&
+    cached !== undefined &&
+    node._host === null &&
+    node.parent?._host === null &&
+    !node.yoga.hasNewLayout()
+  ) {
+    return cached;
+  }
+  let left = Infinity;
+  let right = -Infinity;
+  let bottom = -Infinity;
+  for (const child of node.children) {
+    if (child.isWindow || !child.yoga || child.hidden) continue;
+    const offset = offsetInParent(child);
+    left = Math.min(left, offset.x);
+    right = Math.max(right, offset.x + child.yoga.getComputedWidth());
+    bottom = Math.max(bottom, offset.y + child.yoga.getComputedHeight());
+    if (!child.clipsChildren()) {
+      const inner = contentReach(child, false);
+      left = Math.min(left, offset.x + inner.left);
+      right = Math.max(right, offset.x + inner.right);
+      bottom = Math.max(bottom, offset.y + inner.bottom);
+    }
+  }
+  const reach = { left, right, bottom };
+  if (!top) node._contentReach = reach;
+  return reach;
+}
+
 /**
  * One axis of a scroll request held for a pass
  * (`Scrollable._holdScrollTo`): `{ base, steps }`, the request the extent in
@@ -435,21 +485,9 @@ export const Scrollable = (Base) =>
     measureScrollContent() {
       const rtl = this.direction === 'rtl';
       const width = this.yoga.getComputedWidth();
-      let start = 0;
-      let bottom = 0;
-      const walk = (node, dx, dy) => {
-        for (const child of node.children) {
-          if (child.isWindow || !child.yoga || child.hidden) continue;
-          const offset = offsetInParent(child);
-          const x = dx + offset.x;
-          const y = dy + offset.y;
-          const w = child.yoga.getComputedWidth();
-          start = Math.max(start, rtl ? width - x : x + w);
-          bottom = Math.max(bottom, y + child.yoga.getComputedHeight());
-          if (!child.clipsChildren()) walk(child, x, y);
-        }
-      };
-      walk(this, 0, 0);
+      const reach = contentReach(this, true);
+      const start = Math.max(0, rtl ? width - reach.left : reach.right);
+      const bottom = Math.max(0, reach.bottom);
       // the end padding is part of the content box a browser scrolls to, and
       // it is the one part of it yoga has already resolved for us — on the
       // left in RTL, since that is the end there
@@ -942,7 +980,16 @@ export const Scrollable = (Base) =>
       const ny = ev.nativeEvent?.y ?? ev.y * this.scale;
       const at = along(bar, nx, ny) - this._barGrab.offset - bar.trackStart;
       const from = bar.reversed ? bar.travel - at : at;
-      const to = (from / bar.travel) * bar.range;
+      // Whole device pixels, as a wheel's default action moves (events.js).
+      // The pointer's share of the travel times the range is a fraction at
+      // almost every position, and a fractional offset costs the scroll blit,
+      // which can only shift by whole pixels, and draws everything in the
+      // pane off the pixel grid, where the X11 backend fills an edge or a
+      // rounded box through a coverage mask it uploads shape by shape. A
+      // thumb dragged through a 100,000-row table ran at 25 fps on XQuartz,
+      // with two thirds of the server's time in those masks, and at 52 once
+      // the offset was whole.
+      const to = Math.round((from / bar.travel) * bar.range);
       this._scrollToDevice(bar.axis === 'x' ? { x: to } : { y: to });
     }
 

package/src/nodes/window/exactcopy.js

@@ -0,0 +1,65 @@
+// Measuring a box alone without unsettling the tree around it.
+//
+// The renderer lays everything out in one yoga config, rounded to the pixel
+// grid, and a measurement switches the rounding off (`measuringExactly`,
+// styles.js), which yoga answers by treating every layout it has cached as
+// stale: the pass after any measurement lays the whole tree out again. On a
+// document of 13,000 boxes that pass is 58 ms, where one yoga answers from
+// its cache is 0.05 ms. A measurement over the whole tree pays it anyway,
+// having just laid everything out three times; a box measured alone — a
+// card (`_measureBoundary`), a block on a column spine
+// (`_measureSpineRoot`) — is a few dozen boxes, and made the pass after it
+// cost the whole tree.
+//
+// So a box measured alone is measured on copies: its boxes and everything
+// under them, copied into a config that is never rounded
+// (`exactLayoutConfig`), laid out there, read, and freed. The config the tree
+// is laid out in never changes, and yoga's record of the real boxes — their
+// caches, what is dirty — is not touched.
+
+import { Yoga } from '../../yoga.js';
+import { exactLayoutConfig, measuringInExactConfig } from '../../styles.js';
+
+/**
+ * Run `measure` with `root` and everything under it standing on copies of
+ * their boxes: every node's `yoga` is its copy for the duration, so the
+ * floors code measures, reads and writes extents exactly as it would on the
+ * real boxes.
+ *
+ * What a measurement writes on a node stays — its extents. What it writes on
+ * a box — a floor taken off to measure what is under it, a shrink it
+ * borrows, a width it pins — goes with the copy, so the floors' record of
+ * what each real box holds (`_floorMinW`/`_floorMinH`) is put back, and the
+ * floors written after the measurement are judged against the real box.
+ */
+export function onExactCopy(root, measure) {
+  const swapped = [];
+  const copy = (node) => {
+    const real = node.yoga;
+    const box = Yoga.Node.create(exactLayoutConfig());
+    box.copyStyle(real);
+    if (node._measureFn) box.setMeasureFunc(node._measureFn);
+    swapped.push({ node, real, minW: node._floorMinW, minH: node._floorMinH });
+    let at = 0;
+    // the same children yoga has (`Node._joinsYoga`)
+    if (node._host === null) {
+      for (const child of node.children) {
+        if (!child.yoga || child.isWindow) continue;
+        box.insertChild(copy(child), at++);
+      }
+    }
+    node.yoga = box;
+    return box;
+  };
+  const top = copy(root);
+  try {
+    return measuringInExactConfig(measure);
+  } finally {
+    for (const { node, real, minW, minH } of swapped) {
+      node.yoga = real;
+      node._floorMinW = minW;
+      node._floorMinH = minH;
+    }
+    top.freeRecursive();
+  }
+}

package/src/nodes/window/floors.js

@@ -94,7 +94,7 @@ export function inFlow(node) {
 }
 
 /** Which axis this node lays its children out along. */
-const mainAxisOf = (node) => {
+export const mainAxisOf = (node) => {
   const direction = node.style.flexDirection ?? 'column';
   return direction === 'row' || direction === 'row-reverse'
     ? 'width'
@@ -107,7 +107,7 @@ const mainAxisOf = (node) => {
  * content. The same test `writeFloors` applies, asked ahead of time — it is
  * what decides whether a stale extent is one anybody will read.
  */
-function receivesFloor(child, axis) {
+export function receivesFloor(child, axis) {
   const parent = child.parent;
   if (
     !parent ||
@@ -279,6 +279,80 @@ export function dirtyOutside(node, boundaries, paths) {
   return false;
 }
 
+/**
+ * `contentSpan`'s height for a column, from the extents its children
+ * already carry rather than from a measuring pass — the sum a column spine
+ * (`spine.js`) is recomputed with, bottom up, where a pass would lay the
+ * whole tree out to read it.
+ *
+ * It is the same number. In a measuring pass `contentSpan` places each
+ * child at the sum of the extents before it (its `shift`), so what it reads
+ * back is every in-flow child's extent, the margins *between* them — the
+ * first child's leading margin and the last one's trailing margin fall
+ * outside the span, which runs from the first box to the last — the gap
+ * between each pair, and the column's own padding and border. That holds
+ * for a column whose height is its content's, which is the only kind a
+ * spine sums (`isSummableColumn`): with no height of its own the pass has
+ * no free space to justify into, and nothing in it to squash.
+ *
+ * Undefined where it cannot be summed: a child with no extent on hand, a
+ * negative margin (the boxes would overlap, and the last would not have to
+ * be the lowest), or nothing in flow at all — a leaf's answer, which is
+ * `contentSpan`'s to give.
+ */
+export function columnHeightSpan(node) {
+  const yoga = node.yoga;
+  let span = 0;
+  let count = 0;
+  let trailing = 0;
+  for (const child of node.children) {
+    if (!inFlow(child)) continue;
+    const extent = child._floorH;
+    if (extent === undefined) return undefined;
+    const top = marginDown(child.yoga, Yoga.EDGE_TOP);
+    const bottom = marginDown(child.yoga, Yoga.EDGE_BOTTOM);
+    if (!(top >= 0 && bottom >= 0)) return undefined;
+    span += count === 0 ? extent : trailing + top + extent;
+    trailing = bottom;
+    count += 1;
+  }
+  if (count === 0) return undefined;
+  const gap = columnGap(node);
+  if (gap === undefined) return undefined;
+  return (
+    span +
+    gap * (count - 1) +
+    yoga.getComputedPadding(Yoga.EDGE_TOP) +
+    yoga.getComputedPadding(Yoga.EDGE_BOTTOM) +
+    yoga.getComputedBorder(Yoga.EDGE_TOP) +
+    yoga.getComputedBorder(Yoga.EDGE_BOTTOM)
+  );
+}
+
+/**
+ * A box's margin on one edge down the page, from its style as yoga resolves
+ * it — the edge, else the vertical pair, else all four — rather than from a
+ * pass: a box that has just arrived has never been laid out in the tree, and
+ * its computed margins read 0 until it is. Undefined where it is not a
+ * length (a percentage, `auto`).
+ */
+function marginDown(yoga, edge) {
+  for (const at of [edge, Yoga.EDGE_VERTICAL, Yoga.EDGE_ALL]) {
+    const value = yoga.getMargin(at);
+    if (value.unit === Yoga.UNIT_POINT) return value.value;
+    if (value.unit !== Yoga.UNIT_UNDEFINED) return undefined;
+  }
+  return 0;
+}
+
+/** The gap a column leaves between its rows, as yoga resolves it — the row
+ *  gutter, else the both-ways one — or undefined where it is not a length. */
+function columnGap(node) {
+  const style = node.style;
+  const gap = style.rowGap ?? style.gap ?? 0;
+  return typeof gap === 'number' ? gap : undefined;
+}
+
 /**
  * After a pass that settled the widths: which of the height floors, each a
  * height *for a width*, were measured for a width their node no longer has.

package/src/nodes/window/flush.js

@@ -212,6 +212,9 @@ export class WindowFlush {
       }
       // the moves this walk hands over to be copied are this frame's alone
       this._rigidMoves = null;
+      // a subtree no pass reached and nothing scrolled in is where the last
+      // walk left it (`_followParent`)
+      layoutDiff.skipUnreached = !this._walkWhole;
       try {
         // `_absolutizeChildren`, not the loop it wraps: a `<window
         // style={{overflow: 'scroll'}}>` is a scroll container like any box,
@@ -219,7 +222,9 @@ export class WindowFlush {
         this._absolutizeChildren(0, 0);
       } finally {
         layoutDiff.sink = null;
+        layoutDiff.skipUnreached = false;
       }
+      this._walkWhole = false;
       // …and placed nodes against the arrangement that walk produced: where
       // one goes depends on where its pane and its parent landed
       if (this._placedNodes.size !== 0) this._placeNodes();

package/src/nodes/window/size.js

@@ -8,9 +8,12 @@ import { Yoga } from '../../yoga.js';
 import {
   captureLeafHeights,
   collectFloorStale,
+  columnHeightSpan,
+  declaresOwnMinimum,
   dirtyOutside,
   floorBoundaryOf,
   probeHeightFloors,
+  receivesFloor,
   setMeasuringShrink,
   restoreShrink,
   freezeWidths,
@@ -18,6 +21,8 @@ import {
   contentSpan,
   writeFloors,
 } from './floors.js';
+import { spineScope } from './spine.js';
+import { onExactCopy } from './exactcopy.js';
 import {
   MAX_WINDOW_EXTENT,
   clampExtent,
@@ -36,18 +41,14 @@ import {
 // REACT_X11_NO_SCROLL_BLIT gives.
 const NO_SCOPED_FLOORS = process.env.REACT_X11_NO_SCOPED_FLOORS === '1';
 
-/**
- * Mark a box laid out alone (`_measureBoundary`) for the window's pass to lay
- * out again. It was laid out at the size that pass will give it, so yoga
- * would answer from its cache and keep what the measurement left inside —
- * placed off the pixel grid, with the shrink borrowed. A style set to
- * something else and back is how a box with no measure function says it
- * changed.
- */
-function relayOut(node) {
-  const shrink = node.style.flexShrink ?? 1;
-  node.yoga.setFlexShrink(shrink + 1);
-  node.yoga.setFlexShrink(shrink);
+/** Take a node's extents off, as `collectFloorStale` does a dirty child's:
+ *  both are measured again, and the minimum yoga holds may no longer be
+ *  the one the floors wrote. */
+function forgetExtents(node) {
+  node._floorW = undefined;
+  node._floorH = undefined;
+  node._floorMinW = null;
+  node._floorMinH = null;
 }
 
 /** Content-sized windows, installed onto `WindowNode.prototype` by window.js. */
@@ -132,12 +133,43 @@ export class WindowSize {
     const scope = this._floorsScope();
     this._floorsScopeNow = scope;
     if (scope !== null) {
+      const spine = this._floorsSpineNow;
       for (const boundary of scope) {
-        // its children's floors are written from here; its own extent is
-        // its style's, and stands
+        if (spine?.roots.has(boundary)) {
+          // A spine's root is measured with what is inside it, unlike a box
+          // that sizes itself, and its column writes the floor it gets.
+          forgetExtents(boundary);
+          if (receivesFloor(boundary, 'width')) found.width = true;
+          if (receivesFloor(boundary, 'height')) found.height = true;
+          this._floorsStale.add(boundary.parent);
+        }
+        // its children's floors are written from here; a sized box's own
+        // extent is its style's, and stands
         this._floorsStale.add(boundary);
         collectFloorStale(boundary, this._floorsStale, found, false);
       }
+      if (spine !== null) {
+        // the columns the roots sit in are summed again (`_sumSpine`), and
+        // every one of them writes its children's floors, as the box each
+        // spine stops at does
+        for (const column of spine.spine) {
+          column._floorW = undefined;
+          column._floorH = undefined;
+          this._floorsStale.add(column);
+          if (receivesFloor(column, 'height')) found.height = true;
+        }
+        for (const stop of spine.stops) this._floorsStale.add(stop);
+        // How wide a root is in the width pass is worked out on the way
+        // down from the window (spine.js), and past a row only a pass over
+        // the whole tree knows. A width owed there is the whole tree's.
+        if (found.width) {
+          for (const widths of spine.roots.values()) {
+            if (widths.widthPass !== null) continue;
+            this._floorsUnscoped = true;
+            return this._collectFloorStale();
+          }
+        }
+      }
       return found;
     }
     // the root's own children are written from here too, and its direction
@@ -189,16 +221,37 @@ export class WindowSize {
     ) {
       return null;
     }
+    this._floorsSpineNow = null;
     const boundaries = new Set();
+    // the changes no sized box holds, which a column spine may (spine.js)
+    const loose = [];
     for (const source of sources) {
       // gone, or moved to another window: its old parent's child list is
       // the change that counts, and that parent said so itself
       if (source.destroyed || source.root !== this) continue;
       const boundary = floorBoundaryOf(source, this);
-      if (boundary === null) return null;
-      boundaries.add(boundary);
+      if (boundary === null) loose.push(source);
+      else boundaries.add(boundary);
+    }
+    let spine = null;
+    if (loose.length !== 0) {
+      spine = spineScope(
+        this,
+        loose,
+        (node) => !this._floorsOtherSources.has(node),
+      );
+      if (spine === null) return null;
+      // a sized box inside a root is measured with the root
+      for (const boundary of [...boundaries]) {
+        for (let n = boundary.parent; n && n !== this; n = n.parent) {
+          if (spine.roots.has(n)) {
+            boundaries.delete(boundary);
+            break;
+          }
+        }
+      }
     }
-    if (boundaries.size === 0) return null;
+    if (boundaries.size === 0 && spine === null) return null;
     // the outermost of nested ones: measuring it measures what it holds
     const paths = new Set();
     for (const boundary of [...boundaries]) {
@@ -214,10 +267,94 @@ export class WindowSize {
         paths.add(n);
       }
     }
+    if (spine !== null) {
+      for (const root of spine.roots.keys()) {
+        boundaries.add(root);
+        for (let n = root.parent; n && n !== this; n = n.parent) paths.add(n);
+      }
+      // the columns summed, and the stops with the way down to them: a
+      // child that left one is a change to it, and nothing below it
+      for (const column of spine.spine) paths.add(column);
+      for (const stop of spine.stops) {
+        for (let n = stop; n && n !== this; n = n.parent) paths.add(n);
+      }
+    }
     if (dirtyOutside(this, boundaries, paths)) return null;
+    this._floorsSpineNow = spine;
     return boundaries;
   }
 
+  /**
+   * One spine root's floors, measured with it laid out alone — at the width
+   * it has in each of the passes over the whole tree (`spine.js`), and with
+   * no height on offer in either height pass, because down a column whose
+   * height is its content's the pass over the whole tree has none to offer
+   * it either. Its own extents are written here: unlike a box that sizes
+   * itself, a root's are its content's, and the column it sits in is summed
+   * from them (`_sumSpine`).
+   */
+  _measureSpineRoot(root, widths, axis, probe = false) {
+    onExactCopy(root, () =>
+      this._measureSpineRootOnCopy(root, widths, axis, probe),
+    );
+  }
+
+  _measureSpineRootOnCopy(root, widths, axis, probe) {
+    const yoga = root.yoga;
+    const dir =
+      root.direction === 'rtl' ? Yoga.DIRECTION_RTL : Yoga.DIRECTION_LTR;
+    if (axis === 'width') {
+      const shrunk = [];
+      setMeasuringShrink(root, axis, shrunk);
+      this._scopedFloorPasses += 1;
+      yoga.calculateLayout(widths.widthPass, undefined, dir);
+      const span = contentSpan(root, axis, null, this);
+      root._floorW = declaresOwnMinimum(root, axis)
+        ? yoga.getComputedWidth()
+        : span;
+      restoreShrink(shrunk);
+      return;
+    }
+    this._scopedFloorPasses += 1;
+    yoga.calculateLayout(widths.width, undefined, dir);
+    if (probe) {
+      const hit = { marked: false, owed: false };
+      probeHeightFloors(root, this, hit, root);
+      if (hit.marked) {
+        this._writeFloors('height');
+        this._scopedFloorPasses += 1;
+        yoga.calculateLayout(widths.width, undefined, dir);
+      }
+    }
+    const intrinsic = new Map();
+    captureLeafHeights(root, intrinsic);
+    const frozen = [];
+    freezeWidths(root, frozen);
+    const shrunk = [];
+    setMeasuringShrink(root, axis, shrunk);
+    this._scopedFloorPasses += 1;
+    yoga.calculateLayout(widths.width, undefined, dir);
+    const span = contentSpan(root, axis, intrinsic, this);
+    root._floorH = declaresOwnMinimum(root, axis)
+      ? yoga.getComputedHeight()
+      : span;
+    root._floorAtW = yoga.getComputedWidth();
+    this._floorsMeasured += 1;
+    restoreWidths(frozen);
+    restoreShrink(shrunk);
+  }
+
+  /** The columns of this frame's spines, deepest first, summed from their
+   *  children's extents (`columnHeightSpan`) — their widths are the last
+   *  pass's, which is what a height is for. */
+  _sumSpine(columns) {
+    for (const column of columns) {
+      column._floorH = columnHeightSpan(column);
+      column._floorAtW = column.yoga.getComputedWidth();
+      this._floorsMeasured += 1;
+    }
+  }
+
   /**
    * One boundary's floors, measured with it laid out alone — the passes
    * `_measureContentSpans` runs over the whole tree, run over the box: its
@@ -226,6 +363,15 @@ export class WindowSize {
    * leaves whose width moved, stopped at the box, whose own extent stands.
    */
   _measureBoundary(boundary, axis, probe = false) {
+    // on copies of its boxes (exactcopy.js): the tree's own are left as the
+    // last pass cached them, which is what keeps the pass after this one
+    // from laying the whole tree out again
+    onExactCopy(boundary, () =>
+      this._measureBoundaryOnCopy(boundary, axis, probe),
+    );
+  }
+
+  _measureBoundaryOnCopy(boundary, axis, probe) {
     const yoga = boundary.yoga;
     const dir =
       boundary.direction === 'rtl' ? Yoga.DIRECTION_RTL : Yoga.DIRECTION_LTR;
@@ -236,7 +382,6 @@ export class WindowSize {
       yoga.calculateLayout(undefined, undefined, dir);
       contentSpan(boundary, axis, null, this);
       restoreShrink(shrunk);
-      relayOut(boundary);
       return;
     }
     this._scopedFloorPasses += 1;
@@ -261,7 +406,6 @@ export class WindowSize {
     contentSpan(boundary, axis, intrinsic, this);
     restoreWidths(frozen);
     restoreShrink(shrunk);
-    relayOut(boundary);
   }
 
   /** The floors on the children of every node found stale, from the extents
@@ -386,8 +530,10 @@ export class WindowSize {
     this._floorsSwept = true;
     this._floorsWidth = width;
     this._floorsSources.clear();
+    this._floorsOtherSources.clear();
     this._floorsUnscoped = false;
     this._floorsScopeNow = null;
+    this._floorsSpineNow = null;
   }
 
   /**
@@ -398,16 +544,21 @@ export class WindowSize {
    * everywhere but the boxes and the way down to them.
    */
   _applyScopedFloors(boundaries, found, width, height) {
-    measuringExactly(() => {
-      if (found.width) {
-        this._writeFloors('width');
-        for (const boundary of boundaries) {
-          this._measureBoundary(boundary, 'width');
-        }
-      }
+    const spine = this._floorsSpineNow;
+    const measure = (boundary, axis, probe) => {
+      const widths = spine?.roots.get(boundary);
+      if (widths) this._measureSpineRoot(boundary, widths, axis, probe);
+      else this._measureBoundary(boundary, axis, probe);
+    };
+    // Measured on copies in the exact config (exactcopy.js), so the
+    // renderer's config never leaves the grid, and the pass below answers
+    // from its cache everywhere these boxes and the way down to them are not.
+    if (found.width) {
       this._writeFloors('width');
-      this._writeFloors('height');
-    });
+      for (const boundary of boundaries) measure(boundary, 'width');
+    }
+    this._writeFloors('width');
+    this._writeFloors('height');
     let heights = found.height;
     let probed = false;
     if (!heights) {
@@ -420,13 +571,12 @@ export class WindowSize {
       probed = true;
     }
     if (heights) {
-      measuringExactly(() => {
-        this._writeFloors('height');
-        for (const boundary of boundaries) {
-          this._measureBoundary(boundary, 'height', !probed);
-        }
-        this._writeFloors('height');
-      });
+      this._writeFloors('height');
+      for (const boundary of boundaries) {
+        measure(boundary, 'height', !probed);
+      }
+      if (spine !== null) this._sumSpine(spine.spine);
+      this._writeFloors('height');
       this._layoutRoot(width, height);
     }
   }

package/src/nodes/window/spine.js

@@ -0,0 +1,294 @@
+// Column spines: the scope a change outside every sized box can still be
+// measured in (`WindowNode._floorsScope`), when what stands between it and a
+// box that sizes itself is a run of columns whose height is their content's.
+//
+// A document, a log, a chat transcript, a feed: one scroll pane, one column
+// in it, thousands of blocks in the column. A block that arrives or changes
+// there is confined to nothing `isFloorBoundary` recognises, so it used to
+// be measured with the whole tree — three layout passes over every block,
+// each evicting the one yoga cached for the pass before — to learn the
+// extents of one block and the column it sits in. A spine measures the
+// block alone and sums the column: `columnHeightSpan` over the extents its
+// other children already carry.
+//
+// Three facts make that the same answer the whole tree gives:
+//
+// - Down a column whose height is its content's, the measuring passes have
+//   no free space to squash into, so a block in it is laid out at its
+//   content height in every pass. Laid out alone with no height on offer,
+//   it comes out the same.
+// - Across, a block stretched over its column is as wide as the column's
+//   content box, in every pass: now, at the width the heights are measured
+//   for, and in the width pass, whose width the way down from the root
+//   decides (`widthPassWidth`).
+// - Only heights travel up a spine. A column writes floors down its main
+//   axis, and the box a spine stops at names its own size on both axes
+//   (`isSpineStop`), so no width extent above the block is ever read. They
+//   are left unmeasured, which is what the floors do with every extent
+//   nobody reads (`collectFloorStale`).
+//
+// Anything else — a row on the way, a margin across the block, a width
+// that is not a length — is not a spine, and the tree is measured whole.
+
+import { declaresOwnMinimum, inFlow, mainAxisOf } from './floors.js';
+import { Yoga } from '../../yoga.js';
+
+const LENGTHS_ACROSS = [
+  'margin',
+  'marginHorizontal',
+  'marginLeft',
+  'marginRight',
+  'marginStart',
+  'marginEnd',
+];
+const MARGINS = [
+  ...LENGTHS_ACROSS,
+  'marginVertical',
+  'marginTop',
+  'marginBottom',
+];
+const PADDINGS = [
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingHorizontal',
+  'paddingVertical',
+  'paddingStart',
+  'paddingEnd',
+];
+
+/**
+ * A column a spine can sum (`columnHeightSpan`): laid out by flex down its
+ * main axis without wrapping, and with a height that is its content's —
+ * nothing named on the height axis (`declaresOwnMinimum`), so neither a
+ * size, a floor, a ceiling nor a clip stands between its children and its
+ * extent.
+ */
+export function isSummableColumn(node) {
+  const style = node.style;
+  return (
+    node.yoga != null &&
+    !node.isWindow &&
+    node._host === null &&
+    style.display !== 'none' &&
+    mainAxisOf(node) === 'height' &&
+    style.flexDirection !== 'column-reverse' &&
+    (style.flexWrap == null || style.flexWrap === 'nowrap') &&
+    !declaresOwnMinimum(node, 'height')
+  );
+}
+
+/**
+ * Where a change stops mattering on its way up: the window, or a column
+ * whose extent on both axes is its style's — a scroll pane is the common
+ * one — so that what changed inside it moves nothing above it. A column,
+ * because it writes its children's floors down its main axis, and a spine
+ * only works out heights.
+ */
+export function isSpineStop(node) {
+  if (node.isWindow) return true;
+  return (
+    node.yoga != null &&
+    node._host === null &&
+    mainAxisOf(node) === 'height' &&
+    declaresOwnMinimum(node, 'height') &&
+    declaresOwnMinimum(node, 'width')
+  );
+}
+
+/**
+ * The spine scope of this frame's changes, or null when one of them has
+ * none. `sources` are the nodes that changed and are inside no sized box;
+ * `listOnly(node)` says whether all a node did was gain or lose children.
+ *
+ * A change is measured from the highest box on its way up that no column
+ * above it can sum — a text inside a row inside a list is measured with the
+ * row — and everything above that is summed. A column that only gained or
+ * lost children is not measured itself: the children that are new or
+ * changed are, and it is summed with the rest.
+ *
+ * Answers `{ roots, spine, stops }`: the boxes measured alone, with the
+ * widths to measure each at (`rootWidths`); the columns summed, deepest
+ * first; and the boxes each spine ends at, whose children's floors are
+ * written.
+ */
+export function spineScope(root, sources, listOnly) {
+  const roots = new Map();
+  const spine = new Set();
+  const stops = new Set();
+  for (const source of sources) {
+    const list = listOnly(source);
+    // the way up to where the change stops mattering
+    const path = [];
+    let node = source;
+    while (!isSpineStop(node)) {
+      path.push(node);
+      node = node.parent;
+      if (!node) return null;
+    }
+    if (node !== root && node.root !== root) return null;
+    // a stop changed in itself: its padding, its direction — everything it
+    // holds is laid out anew, which is the whole tree's measurement
+    if (path.length === 0 && !list) return null;
+    stops.add(node);
+    // the highest box on the way that a column above it cannot sum
+    let top = -1;
+    for (let i = path.length - 1; i >= 0; i--) {
+      const summed = i > 0 || list;
+      if (!summed || !isSummableColumn(path[i])) {
+        top = i;
+        break;
+      }
+    }
+    for (const column of path.slice(top + 1)) spine.add(column);
+    const changed = top === -1 ? staleChildren(source) : [path[top]];
+    for (const child of changed) {
+      if (!child.yoga || child.isWindow || child.style.display === 'none') {
+        continue;
+      }
+      const widths = rootWidths(child, root);
+      if (widths === null) return null;
+      roots.set(child, widths);
+    }
+  }
+  // A root inside another root is measured with it, and so is a column it
+  // would have been summed through.
+  const within = (node) => {
+    for (let n = node.parent; n; n = n.parent) if (roots.has(n)) return true;
+    return false;
+  };
+  for (const node of [...roots.keys()]) if (within(node)) roots.delete(node);
+  for (const node of [...spine]) {
+    if (roots.has(node) || within(node)) spine.delete(node);
+  }
+  // Every other child of a summed column answers from the extent it carries.
+  for (const column of spine) {
+    for (const child of column.children) {
+      if (!inFlow(child) || roots.has(child) || spine.has(child)) continue;
+      if (child._floorH === undefined) return null;
+      if (MARGINS.some((key) => typeof child.style[key] === 'string')) {
+        return null;
+      }
+    }
+  }
+  const depth = (node) => {
+    let d = 0;
+    for (let n = node; n; n = n.parent) d += 1;
+    return d;
+  };
+  return {
+    roots,
+    spine: [...spine].sort((a, b) => depth(b) - depth(a)),
+    stops,
+  };
+}
+
+/** The children of a node that gained or lost some: the ones yoga has a
+ *  change on record for, and the ones never measured. */
+function staleChildren(node) {
+  const out = [];
+  for (const child of node.children) {
+    if (!child.yoga || child.isWindow) continue;
+    if (child.yoga.isDirty() || child._floorH === undefined) out.push(child);
+  }
+  return out;
+}
+
+/**
+ * The widths a box is measured alone at, or null when it cannot be: in flow
+ * and stretched across its column with no margin, width or ceiling of its
+ * own across it, so that it is exactly as wide as the column's content box.
+ * `width` is that box now — the width its heights are for — and
+ * `widthPass` the one the width pass over the whole tree would give it
+ * (`widthPassWidth`), null where only a pass knows.
+ */
+function rootWidths(node, root) {
+  const style = node.style;
+  const parent = node.parent;
+  if (!parent || !inFlow(node) || node._host !== null) return null;
+  if (style.width !== undefined || style.maxWidth !== undefined) return null;
+  if (typeof style.minWidth === 'string') return null;
+  if (!stretched(node)) return null;
+  if (
+    LENGTHS_ACROSS.some((key) => style[key] !== undefined && style[key] !== 0)
+  ) {
+    return null;
+  }
+  if (MARGINS.some((key) => typeof style[key] === 'string')) return null;
+  if (PADDINGS.some((key) => typeof style[key] === 'string')) return null;
+  return {
+    width: contentWidth(parent),
+    widthPass: widthPassContent(parent, root),
+  };
+}
+
+/** Stretched across its parent's column — `alignSelf`, or the column's
+ *  `alignItems` when the box leaves it to them. */
+function stretched(node) {
+  const parent = node.parent;
+  if (!parent || mainAxisOf(parent) !== 'height') return false;
+  const self = node.style.alignSelf ?? 'auto';
+  if (self === 'stretch') return true;
+  return (
+    self === 'auto' && (parent.style.alignItems ?? 'stretch') === 'stretch'
+  );
+}
+
+/** Padding and border across, as the last pass resolved them. */
+function insetAcross(node) {
+  const yoga = node.yoga;
+  return (
+    yoga.getComputedPadding(Yoga.EDGE_LEFT) +
+    yoga.getComputedPadding(Yoga.EDGE_RIGHT) +
+    yoga.getComputedBorder(Yoga.EDGE_LEFT) +
+    yoga.getComputedBorder(Yoga.EDGE_RIGHT)
+  );
+}
+
+/** A box's content width in the last pass. */
+function contentWidth(node) {
+  return Math.max(0, node.yoga.getComputedWidth() - insetAcross(node));
+}
+
+/**
+ * How wide `node` is in the width pass over the whole tree
+ * (`_measureContentSpans('width')`), worked out on the way down rather than
+ * laid out: the root at nothing, and each box below it either the width its
+ * style names or stretched over its column's content box — clamped as yoga
+ * clamps it, and never narrower than its own padding and border. Null where
+ * the way down is anything else: a row, whose children are as wide as the
+ * pass decides.
+ */
+function widthPassWidth(node, root) {
+  if (node === root) return insetAcross(node);
+  const style = node.style;
+  let width;
+  if (typeof style.width === 'number') width = style.width;
+  else if (style.width !== undefined) return null;
+  else {
+    if (!inFlow(node) || !stretched(node)) return null;
+    if (MARGINS.some((key) => typeof style[key] === 'string')) return null;
+    const inner = widthPassContent(node.parent, root);
+    if (inner === null) return null;
+    const yoga = node.yoga;
+    width =
+      inner -
+      yoga.getComputedMargin(Yoga.EDGE_LEFT) -
+      yoga.getComputedMargin(Yoga.EDGE_RIGHT);
+  }
+  if (typeof style.maxWidth === 'number')
+    width = Math.min(width, style.maxWidth);
+  else if (style.maxWidth !== undefined) return null;
+  if (typeof style.minWidth === 'number')
+    width = Math.max(width, style.minWidth);
+  else if (style.minWidth !== undefined) return null;
+  return Math.max(width, insetAcross(node));
+}
+
+/** …and the content box inside it. */
+function widthPassContent(node, root) {
+  const width = widthPassWidth(node, root);
+  return width === null ? null : Math.max(0, width - insetAcross(node));
+}

package/src/nodes/window/window.js

@@ -277,8 +277,15 @@ export class WindowNode extends Scrollable(Node) {
     // the nodes whose changes the next measurement owes, and whether one
     // came with no node to name (`_floorsScope`)
     this._floorsSources = new Set();
+    // …the ones that changed for any reason but their child list, which
+    // are measured themselves rather than through the children they gained
+    // (spine.js), and the spines this frame's measurement runs on
+    this._floorsOtherSources = new Set();
     this._floorsUnscoped = false;
     this._floorsScopeNow = null;
+    this._floorsSpineNow = null;
+    // whether the next layout walk must visit every box (`invalidate`)
+    this._walkWhole = true;
     this._scopedFloorPasses = 0;
     // whether the first floors pass has run (`collectFloorStale`'s sweep)
     this._floorsSwept = false;

package/src/styles.js

@@ -1950,6 +1950,34 @@ let exactDepth = 0;
  *  here is not the size the same layout comes to on it. */
 export const isMeasuringExactly = () => exactDepth > 0;
 
+/**
+ * A second config, never rounded, for measuring a box on copies of its
+ * boxes (nodes/window/exactcopy.js). Switching the renderer's config off the
+ * grid and back is a change yoga answers by treating every layout it has
+ * cached as stale, so the pass after any `measuringExactly` lays the whole
+ * tree out again; a measurement confined to one box is made in this config
+ * instead, and leaves the renderer's, and its caches, alone.
+ */
+let exactConfig = null;
+export const exactLayoutConfig = () => {
+  if (exactConfig === null) {
+    exactConfig = Yoga.Config.create();
+    exactConfig.setPointScaleFactor(0);
+  }
+  return exactConfig;
+};
+
+/** `measure` for layouts made in the exact config: off the grid as far as
+ *  `isMeasuringExactly` is concerned, with nothing to switch. */
+export function measuringInExactConfig(measure) {
+  exactDepth++;
+  try {
+    return measure();
+  } finally {
+    exactDepth--;
+  }
+}
+
 /**
  * The yoga defaults that are not CSS's, written once per node.
  *