react-x11 2.5.0 → 2.6.1

package/src/nodes.js

@@ -250,6 +250,10 @@ const NO_DAMAGE = Symbol('no-damage');
 // against it.
 const DAMAGE_SLOP = 1;
 
+/** Stale bounds are undebuggable, and every other cache here has an escape
+ * hatch — see NO_SCROLL_BLIT and the paint cache's DISABLED. */
+const NO_BOUNDS_CACHE = process.env.REACT_X11_NO_BOUNDS_CACHE === '1';
+
 // While a bounded frame's layout pass runs, every node whose absolute rect
 // comes out different reports its old and new rects here (each already
 // inflated by that node's own paint reach) — which is what lets a layout
@@ -279,6 +283,7 @@ const INVALIDATE_REASONS = new Set([
   'outline', // …and the same for an outline a style swap took away
   'theme', // a theme/token change restyled a subtree
   'direction', // the reading direction moved: sides, glyph order, bar edge
+  'scale', // a `scale` prop zoomed a subtree: every length in it moved
   'animation', // a transition frame
   'scroll', // scrollTo/scrollBy/scrollIntoView, textarea/textinput panning
   'text', // text content, input value or caret editing
@@ -405,7 +410,7 @@ function insetRect(rect, by) {
 }
 
 /** The overlap of two rects, or null when they have none. */
-function intersectRects(a, b) {
+export function intersectRects(a, b) {
   const x = Math.max(a.x, b.x);
   const y = Math.max(a.y, b.y);
   const right = Math.min(a.x + a.width, b.x + b.width);
@@ -548,13 +553,13 @@ function coalesceRects(rects) {
  * neighbours go first and far-apart rects last. That merge can itself overlap a
  * third rect, so the result is coalesced again.
  */
-function addDamageRect(rects, add) {
+export function addDamageRect(rects, add, cap = MAX_DAMAGE_RECTS) {
   let out = coalesceRects(
     (rects ?? []).concat([
       { x: add.x, y: add.y, width: add.width, height: add.height },
     ]),
   );
-  while (out.length > MAX_DAMAGE_RECTS) {
+  while (out.length > cap) {
     let bestI = 0;
     let bestJ = 1;
     let bestWaste = Infinity;
@@ -587,7 +592,7 @@ function addDamageRect(rects, add) {
  * answers cover every claimed pixel, so this is a cost decision and never a
  * correctness one.
  */
-function damageToPaint(rects) {
+export function damageToPaint(rects) {
   if (rects.length < 2) return rects;
   const box = rectsBounds(rects);
   let sum = 0;
@@ -946,6 +951,9 @@ function assertWindowSize(props, kind) {
  * pass run with no height on offer the row came out at nothing, taking its
  * leaves down with it. A container in that position is recovered by looking
  * inside it; a leaf has nothing inside, which is what this is for.
+ *
+ * Only the leaves the measurement is going to ask about: the walk goes
+ * through the nodes whose height extent is stale and no others.
  */
 function captureLeafHeights(node, out) {
   let leaf = true;
@@ -953,7 +961,7 @@ function captureLeafHeights(node, out) {
     if (!child.yoga || child.isWindow) continue;
     if (child.style.display === 'none') continue;
     if (child.style.position !== 'absolute') leaf = false;
-    captureLeafHeights(child, out);
+    if (child._floorH === undefined) captureLeafHeights(child, out);
   }
   if (leaf) out.set(node, node.yoga.getComputedHeight());
 }
@@ -991,7 +999,7 @@ function namesOwnFloor(node, axis) {
  * answer, so there is no need to look inside it. Everything that names a
  * floor, plus the two other ways a style can bound itself: a **size**, which
  * a min-content measurement here keeps rather than shrinking past (see
- * `writeContentFloors`), and a **ceiling**, since CSS clamps the content
+ * `writeFloors`), and a **ceiling**, since CSS clamps the content
  * suggestion by the specified `max-*` too.
  */
 function declaresOwnMinimum(node, axis) {
@@ -1024,6 +1032,144 @@ const mainAxisOf = (node) => {
     : 'height';
 };
 
+/**
+ * Whether `child` is one the floors are **written on** along `axis`: a flex
+ * item on its container's main axis whose author left the minimum to the
+ * 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) {
+  const parent = child.parent;
+  if (!parent || mainAxisOf(parent) !== axis || !inFlow(child)) return false;
+  const own = axis === 'width' ? 'minWidth' : 'minHeight';
+  return typeof child.style[own] !== 'number';
+}
+
+/**
+ * Find what the last measurement can no longer answer for, before a layout
+ * pass clears the evidence.
+ *
+ * The floors are content, and yoga already keeps the exact record of which
+ * content moved: a style setter that changed something, a child that came
+ * or went, a text that asked to be re-measured all mark their node dirty
+ * and every node above it, and the next `calculateLayout` clears the lot.
+ * So this walks the dirty part of the tree — and only that part, since a
+ * clean node has clean children — and takes the cached extents off every
+ * node it finds (`_floorW`/`_floorH`), which is what "stale" means from
+ * here on. The dirty nodes are listed for `writeFloors`: they are the
+ * nodes whose children's floors can have moved — as is, later, every node
+ * `contentSpan` measures a child of, since a window's natural-size
+ * measurement (`_measure`) clears yoga's record before the first floors
+ * pass, and a scroll pane's rows measured through a clean scroll pane still
+ * need their floors written.
+ *
+ * `found` records whether any stale node is one a floor is written on: if
+ * none is, no measurement is owed on that axis at all, whatever changed —
+ * the extents that moved are ones nobody reads. An extent nobody read
+ * stays unmeasured, on a clean node, for as long as nobody does; it is
+ * asked for at the one moment it can start to matter, which is when its
+ * parent changes (a column that turns into a row), and its parent is dirty
+ * then. So the children of a dirty node are all looked at, and only the
+ * dirty ones are descended into.
+ *
+ * Until the first floors pass has settled both axes (`sweep`), the walk
+ * also goes down through nodes that were never measured, dirty or not: a
+ * window's natural-size measurement (`_measure`) lays the tree out before
+ * the first floors pass and clears yoga's record on the way, and a scroll
+ * pane that names its own minimum receives no floor while the rows inside
+ * it do. After that pass every reachable node has an extent on any axis
+ * that had a floor to write, and the dirty path is the whole story.
+ *
+ * A `display: 'none'` subtree is marked and left: it takes part in no
+ * layout, and a change inside it is still there when it is shown again,
+ * because yoga clears a hidden node's own flag but never its children's.
+ */
+function collectFloorStale(node, stale, found, sweep) {
+  for (const child of node.children) {
+    if (!child.yoga || child.isWindow) continue;
+    const dirty = child.yoga.isDirty();
+    if (dirty) {
+      child._floorW = undefined;
+      child._floorH = undefined;
+      // the minimum yoga holds may not be ours any more: a style change on
+      // this node went through `applyLayoutStyle`, which writes the
+      // author's minimum over whatever floor was there
+      child._floorMinW = null;
+      child._floorMinH = null;
+    }
+    if (child.style.display === 'none') continue;
+    if (child._floorW === undefined && receivesFloor(child, 'width')) {
+      found.width = true;
+    }
+    if (child._floorH === undefined && receivesFloor(child, 'height')) {
+      found.height = true;
+    }
+    if (dirty) stale.add(child);
+    else if (
+      !sweep ||
+      (child._floorW !== undefined && child._floorH !== undefined)
+    ) {
+      continue;
+    }
+    collectFloorStale(child, stale, found, sweep);
+  }
+}
+
+/**
+ * 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.
+ *
+ * Walks down through every node whose width moved — a clean subtree whose
+ * root is still the width it was measured at holds no surprises, so the
+ * walk stops there — and asks each leaf it reaches the one question that
+ * matters, in JavaScript rather than through a layout pass: is your height
+ * at this width the height you had at the old one? A paragraph that still
+ * fits on its line says no, and so does every unwrapped label in a grid
+ * whose cells just moved a pixel, which is what makes a relayout of a large
+ * tree one pass instead of four. A leaf that wraps differently is marked
+ * stale with everything above it, and `hit.owed` says whether any of those
+ * is a node a floor is written on.
+ *
+ * Widths are compared with a pixel of slack: the measuring passes run with
+ * the pixel grid off and the real one with it on, so the same layout reads
+ * a fraction apart between them.
+ */
+function probeHeightFloors(node, root, hit) {
+  for (const child of node.children) {
+    if (!child.yoga || child.isWindow) continue;
+    if (child.style.display === 'none') continue;
+    const stale = child._floorH === undefined;
+    const width = child.yoga.getComputedWidth();
+    const at = child._floorAtW;
+    if (!stale && at !== undefined && Math.abs(width - at) < 1) continue;
+    if (child._measureFn) {
+      if (
+        !stale &&
+        at !== undefined &&
+        child._heightForWidth(width) !== child._heightForWidth(at)
+      ) {
+        markHeightStale(child, root, hit);
+      }
+    } else {
+      probeHeightFloors(child, root, hit);
+    }
+    // whatever the extent is, it is the extent for this width now — a
+    // stale one is about to be measured here, a clean one was just checked
+    child._floorAtW = width;
+  }
+}
+
+/** A leaf whose height moved takes every extent above it with it. */
+function markHeightStale(node, root, hit) {
+  hit.marked = true;
+  for (let n = node; n && n !== root; n = n.parent) {
+    if (n._floorH === undefined) continue;
+    n._floorH = undefined;
+    root._floorsStale.add(n);
+    if (receivesFloor(n, 'height')) hit.owed = true;
+  }
+}
+
 /**
  * Put the tree in the state a **min-content** measurement means: a node that
  * has said how small it can be is let go all the way down to it, and a node
@@ -1034,27 +1180,38 @@ const mainAxisOf = (node) => {
  * own `flexShrink: 0` default. Now that the default is CSS's `1` (#249) the
  * pass has to be told, or every node would shrink to nothing and answer that
  * the content needs no room — which is true of no content anywhere.
+ *
+ * Every child of a node being measured is told, so that the node's own
+ * layout is the one it always was; below a child whose extent is still
+ * good nothing is, since nothing in there is read. `out` collects what was
+ * written so `restoreShrink` can put back exactly that.
  */
-function setMeasuringShrink(node, axis) {
+function setMeasuringShrink(node, axis, out) {
   for (const child of node.children) {
     if (!child.yoga || child.isWindow) continue;
-    child.yoga.setFlexShrink(namesOwnFloor(child, axis) ? 1 : 0);
     // …and not into a `display: 'none'` subtree, which the measurement does
-    // not read and `writeContentFloors` therefore does not walk back through
+    // not read and the floors are not written back through
     if (child.style.display === 'none') continue;
-    setMeasuringShrink(child, axis);
+    const shrink = namesOwnFloor(child, axis) ? 1 : 0;
+    if ((child.style.flexShrink ?? 1) !== shrink) {
+      child.yoga.setFlexShrink(shrink);
+      out.push(child);
+    }
+    if (floorStale(child, axis)) setMeasuringShrink(child, axis, out);
   }
 }
 
 /** …and back to the layout everything else is run from. */
-function restoreShrink(node) {
-  for (const child of node.children) {
-    if (!child.yoga || child.isWindow) continue;
+function restoreShrink(shrunk) {
+  for (const child of shrunk) {
     child.yoga.setFlexShrink(child.style.flexShrink ?? 1);
-    restoreShrink(child);
   }
 }
 
+/** Whether `node`'s extent along `axis` has to be measured again. */
+const floorStale = (node, axis) =>
+  (axis === 'width' ? node._floorW : node._floorH) === undefined;
+
 /**
  * Pin every box under `node` at the width the pass just settled it at, so
  * that the collapse which follows can only take **height** away.
@@ -1080,27 +1237,25 @@ function restoreShrink(node) {
  * else the pass is doing, and its children are laid out inside that. It costs
  * nothing either: every leaf is offered the width it was already measured at,
  * so the paragraphs the first pass shaped come back out of the layout cache.
+ *
+ * Pinned as far as the measurement reads, like the shrink: the children of
+ * every node whose extent is being measured, and no further.
  */
-function freezeWidths(node) {
+function freezeWidths(node, out) {
   for (const child of node.children) {
     if (!child.yoga || child.isWindow) continue;
     // as in `setMeasuringShrink`: a `display: 'none'` subtree was not laid
     // out, so there is no width in there to keep
     if (child.style.display === 'none') continue;
     child.yoga.setWidth(child.yoga.getComputedWidth());
-    freezeWidths(child);
+    out.push(child);
+    if (child._floorH === undefined) freezeWidths(child, out);
   }
 }
 
-/** …and back to the width the style asks for. Walks what `freezeWidths`
- *  walked, so a box it never pinned is never written to either. */
-function restoreWidths(node) {
-  for (const child of node.children) {
-    if (!child.yoga || child.isWindow) continue;
-    if (child.style.display === 'none') continue;
-    child.yoga.setWidth(child.style.width);
-    restoreWidths(child);
-  }
+/** …and back to the width the style asks for, on exactly what was pinned. */
+function restoreWidths(frozen) {
+  for (const child of frozen) child.yoga.setWidth(child.style.width);
 }
 
 /**
@@ -1124,16 +1279,23 @@ function restoreWidths(node) {
  * needs it. A container that came out at nothing is recovered by looking
  * inside it; a leaf has nothing inside, so it has to be remembered.
  *
- * `out` collects, for every node on the way, **the extent it contributes to
- * the box around it** — which is exactly that node's automatic minimum size,
- * so one pass and one walk give the whole tree its floors (#249) instead of
- * a measurement per node. The recursion is therefore over all the children,
- * even the ones whose own content does not count towards this one's: a
- * scroll pane contributes nothing to the floor above it and still needs
- * floors written *inside* it, or the column of rows it holds would shrink to
- * the viewport and there would be nothing left to scroll.
+ * What every node contributes to the box around it — which is exactly that
+ * node's automatic minimum size — is written onto the node (`_floorW`,
+ * `_floorH`), so one pass and one walk give the whole tree its floors (#249)
+ * instead of a measurement per node, and so that the next measurement can
+ * **read it back instead of looking again**: a child whose extent is still
+ * there is taken at that number, and nothing under it is visited. The
+ * extent is a function of the subtree alone — its content and its styles —
+ * which is what makes the cache honest: `collectFloorStale` takes it off
+ * every node whose subtree changed, and for a height the width it was
+ * measured at is kept beside it (`_floorAtW`) for `probeHeightFloors` to
+ * check. The recursion is therefore over the stale children only, and
+ * still through the ones whose own content does not count towards this
+ * one's: a scroll pane contributes nothing to the floor above it and still
+ * needs floors written *inside* it, or the column of rows it holds would
+ * shrink to the viewport and there would be nothing left to scroll.
  */
-function contentSpan(node, axis, intrinsic, out) {
+function contentSpan(node, axis, intrinsic, root) {
   const yoga = node.yoga;
   const horizontal = axis === 'width';
   const own = horizontal ? yoga.getComputedWidth() : yoga.getComputedHeight();
@@ -1153,19 +1315,31 @@ function contentSpan(node, axis, intrinsic, out) {
     // by itself, and a <text> span has no box of its own
     if (!child.yoga || child.isWindow) continue;
     if (child.style.display === 'none') continue;
-    const span = contentSpan(child, axis, intrinsic, out);
     const laidOut = horizontal
       ? child.yoga.getComputedWidth()
       : child.yoga.getComputedHeight();
-    // What the child needs from this box. A node that has said how small it
-    // can be is taken at its word — the measuring pass already let it shrink
-    // to exactly that — and anything else is asked what is inside it. Its
-    // laid-out size is deliberately *not* a floor under that answer: nothing
-    // shrank in this pass, so a box that measures its own content is sitting
-    // at its **max**-content size, which is the width a label would like to
-    // be rather than the width it can be squeezed to.
-    const extent = declaresOwnMinimum(child, axis) ? laidOut : span;
-    out?.set(child, extent);
+    let extent = horizontal ? child._floorW : child._floorH;
+    if (extent === undefined) {
+      const span = contentSpan(child, axis, intrinsic, root);
+      // What the child needs from this box. A node that has said how small
+      // it can be is taken at its word — the measuring pass already let it
+      // shrink to exactly that — and anything else is asked what is inside
+      // it. Its laid-out size is deliberately *not* a floor under that
+      // answer: nothing shrank in this pass, so a box that measures its own
+      // content is sitting at its **max**-content size, which is the width
+      // a label would like to be rather than the width it can be squeezed
+      // to.
+      extent = declaresOwnMinimum(child, axis) ? laidOut : span;
+      if (horizontal) child._floorW = extent;
+      else {
+        child._floorH = extent;
+        child._floorAtW = child.yoga.getComputedWidth();
+      }
+      root._floorsMeasured += 1;
+      // a fresh extent is a floor to write, whether or not this node was
+      // dirty: see `collectFloorStale`
+      root._floorsStale.add(node);
+    }
     if (child.style.position === 'absolute') continue;
     const at =
       (horizontal
@@ -1211,9 +1385,8 @@ function contentSpan(node, axis, intrinsic, out) {
 }
 
 /**
- * Write CSS's **automatic minimum size** onto every flex item under `node`:
- * a floor of the extent it needs, along the axis its container lays out on,
- * and restore the `flexShrink` the measurement borrowed on the way past.
+ * Write CSS's **automatic minimum size** onto the flex items in `node`: a
+ * floor of the extent each needs, along the axis its container lays out on.
  *
  * This is the other half of `flexShrink` defaulting to `1` (#249), and
  * neither half is any good without the other. Yoga implements the shrink and
@@ -1226,7 +1399,10 @@ function contentSpan(node, axis, intrinsic, out) {
  *
  * Only the **main** axis, as in CSS: shrinking happens along the axis the
  * container packs on, and on the other one an item is stretched or fits its
- * content either way.
+ * content either way. On the other axis the child gets its style's minimum
+ * back — which is what takes a floor off a child whose container turned
+ * from a column into a row, since the floor it needs now is on the other
+ * axis.
  *
  * Where this deliberately parts company with CSS is a node that named a
  * size: CSS floors that at `min(the size, the content)`, so a `height: 40`
@@ -1238,10 +1414,14 @@ function contentSpan(node, axis, intrinsic, out) {
  * that was named is a size that is kept**, and `minHeight: 0` is how an
  * author says otherwise.
  *
- * `mins` is what every node contributes to the box around it, measured in
- * one pass by `contentSpan`. `floored` collects what was written so the next
- * measurement can take it back off — a floor left in place would be read
- * back as content that cannot give, and could then only ratchet upwards.
+ * One node's children, from the extents on them (`contentSpan`): the
+ * callers run it over every node whose children's extents may have moved,
+ * and nothing else — a floor that did not change is not written again, so a
+ * clean subtree is neither visited nor dirtied. What was written is kept
+ * (`_floorMinW`/`_floorMinH`) so that the next write can tell; a stale
+ * extent writes the style's own minimum, which is how a floor comes off a
+ * node that is about to be measured, and which is why measuring a node
+ * that carries one cannot read it back as content the tree cannot give up.
  *
  * A floor is written **unrounded**, and the measurement it came from ran
  * with the pixel grid off (`measuringExactly`) for the reason given there:
@@ -1256,28 +1436,29 @@ function contentSpan(node, axis, intrinsic, out) {
  * tall (issue #411). Whole pixels cancel exactly, which is why the text
  * measures here answer in them (`TextNode._trim`).
  */
-function writeContentFloors(node, axis, mins, floored) {
+function writeFloors(node, axis) {
+  const horizontal = axis === 'width';
   const axisIsMain = mainAxisOf(node) === axis;
-  const own = axis === 'width' ? 'minWidth' : 'minHeight';
+  const own = horizontal ? 'minWidth' : 'minHeight';
   for (const child of node.children) {
     if (!child.yoga || child.isWindow) continue;
-    child.yoga.setFlexShrink(child.style.flexShrink ?? 1);
-    if (child.style.display === 'none') continue;
+    let floor;
     // A floor of 0 is what yoga does anyway, and an author who named their
     // own `minWidth`/`minHeight` has already answered — overwriting it would
     // put a measurement of ours above a number they wrote.
-    const floor = mins.get(child) ?? 0;
-    if (
-      axisIsMain &&
-      inFlow(child) &&
-      floor > 0 &&
-      typeof child.style[own] !== 'number'
-    ) {
-      if (axis === 'width') child.yoga.setMinWidth(floor);
-      else child.yoga.setMinHeight(floor);
-      floored.add(child);
+    if (axisIsMain && inFlow(child) && typeof child.style[own] !== 'number') {
+      const extent = horizontal ? child._floorW : child._floorH;
+      if (extent > 0) floor = extent;
+    }
+    if ((horizontal ? child._floorMinW : child._floorMinH) === floor) continue;
+    const value = floor ?? child.style[own];
+    if (horizontal) {
+      child.yoga.setMinWidth(value);
+      child._floorMinW = floor;
+    } else {
+      child.yoga.setMinHeight(value);
+      child._floorMinH = floor;
     }
-    writeContentFloors(child, axis, mins, floored);
   }
 }
 
@@ -1432,6 +1613,46 @@ const WINDOW_SEMANTIC_NAMES = new Set([
  * are not: an element that wrote `widthMode === 0` would be pinned to
  * yoga's ABI through us, which is exactly what the seam exists to stop.
  */
+/**
+ * Text smaller than this many logical pixels is painted as a strip in its
+ * ink instead of as glyphs (`TextNode._paintsStrip`). Six is under the
+ * smallest size any UI sets on purpose and over what a zoomed-out view
+ * shrinks its labels to; `createRoot({ textStripBelow })` is the seam.
+ */
+export const TEXT_STRIP_BELOW = 6;
+// The band a strip covers, in ems around the baseline — the x-height and a
+// little of the ascenders above it, the descenders below — and the share of
+// the ink it is painted at, which is roughly how much of that band small
+// text actually inks.
+const STRIP_ABOVE_BASELINE = 0.6;
+const STRIP_BELOW_BASELINE = 0.1;
+const STRIP_COVERAGE = 0.45;
+
+const textStripBelow = new WeakMap();
+
+/** The size under which this connection's text is painted as strips. */
+export function setTextStripBelow(app, below) {
+  if (below === undefined) return;
+  if (typeof below !== 'number' || !(below >= 0)) {
+    throw new Error(
+      `react-x11: createRoot({ textStripBelow: ${JSON.stringify(below)} }) ` +
+        '— a size in logical pixels, or 0 to paint glyphs at every size.',
+    );
+  }
+  textStripBelow.set(app, below);
+}
+
+// `REACT_X11_TEXT_STRIP_BELOW` is the same line for a process that cannot
+// reach `createRoot` — a bench comparing the strip against glyphs, an app
+// run under a harness — read once
+const textStripBelowEnv = Number(process.env.REACT_X11_TEXT_STRIP_BELOW);
+
+const textStripBelowFor = (app) =>
+  textStripBelow.get(app) ??
+  (Number.isFinite(textStripBelowEnv) && textStripBelowEnv >= 0
+    ? textStripBelowEnv
+    : TEXT_STRIP_BELOW);
+
 const MEASURE_MODES = [];
 MEASURE_MODES[Yoga.MEASURE_MODE_UNDEFINED] = 'unconstrained';
 MEASURE_MODES[Yoga.MEASURE_MODE_EXACTLY] = 'exactly';
@@ -1502,6 +1723,33 @@ function shallowEqual(a, b) {
   return ka.length === kb.length && ka.every((k) => a[k] === b[k]);
 }
 
+/**
+ * A node's own `scale` prop as a factor: what it multiplies the scale it
+ * inherits by (`Node.scale`). Absent means 1, which is every node in a tree
+ * that never mentions it.
+ *
+ * A zero, a negative or a NaN is a mistake rather than a design — it would
+ * lay the subtree out at nothing, or at infinity — and in development it
+ * says so where the mistake is, rather than as a blank pane three frames
+ * later. Production falls back to 1 for the same reason a bad token keeps
+ * the property dropped: a GUI that carries on is worth more than one that
+ * dies on a fraction somebody divided by.
+ */
+function scaleFactorOf(props, kind) {
+  const own = props?.scale;
+  if (own === undefined) return 1;
+  if (typeof own === 'number' && Number.isFinite(own) && own > 0) return own;
+  if (DEV) {
+    throw new Error(
+      `react-x11: <${kind} scale={${JSON.stringify(own)}}> — a subtree ` +
+        'scale is a positive number, the factor this subtree is zoomed by ' +
+        '(2 draws it twice the size, 0.5 half), and leaving it out means 1. ' +
+        'See docs/scale.md, "A subtree of its own".',
+    );
+  }
+  return 1;
+}
+
 /** The half of `Node._joinsYoga` that is about the child alone — a real X
  * window (`<window>`, `<popup>`) or a node built without a box at all (a text
  * chunk) sits outside whatever parent it lands in. This is what
@@ -1515,16 +1763,93 @@ export class Node {
   }
 
   /**
-   * Device pixels per logical pixel for this node's connection — resolved
-   * once by `createRoot` (src/scale.js) and constant for the node's life,
-   * which is what makes the instance cache below sound. `this.style` and
-   * `this.abs` are already device pixels; this is for the values that never
-   * pass through a style — a paint constant like the caret's width, or an
-   * event coordinate on its way back to logical. A registered element that
-   * draws with its own constants multiplies them by this.
+   * Device pixels per logical pixel **for this node** — the display scale
+   * `createRoot` resolved (src/scale.js), times every `scale` prop between
+   * this node and its window. `this.style` and `this.abs` are already
+   * device pixels; this is for the values that never pass through a style —
+   * a paint constant like the caret's width, or an event coordinate on its
+   * way back to logical. A registered element that draws with its own
+   * constants multiplies them by this.
+   *
+   * The `scale` prop is CSS `zoom`, not a transform: it multiplies the
+   * inherited factor, and the node's *own* style scales with it. So
+   * everything downstream of the style funnel follows with no second
+   * mechanism — yoga lays out the scaled numbers like any others, paint
+   * reads the scaled style, the caret and the scrollbar read this getter,
+   * and text is shaped at the size it will be drawn at rather than
+   * rasterized once and stretched (docs/scale.md, "A subtree of its own").
+   *
+   * **A real X window is its own root.** `<window>` and `<popup>` geometry
+   * is the server's, in the display's pixels — `scaleWindowGeometry` reads
+   * `scaleOf(app)` directly and a WM sees no zoom — so the cascade stops
+   * there and a menu opened from a zoomed card comes up at the app's own
+   * size. Everything else inherits, including `<glarea>` and `<foreign>`,
+   * whose boxes are laid out by the parent like any other child's.
+   *
+   * Cached per node, dropped by `_rescaleSubtree` — the same contract
+   * `theme` and `direction` have, for the same reason.
    */
   get scale() {
-    return (this._scaleCache ??= scaleOf(this.app));
+    if (this._scaleCache !== undefined) return this._scaleCache;
+    if (this.isWindow) return (this._scaleCache = scaleOf(this.app));
+    const base = this.parent ? this.parent.scale : scaleOf(this.app);
+    return (this._scaleCache = base * scaleFactorOf(this.props, this.kind));
+  }
+
+  /**
+   * The effective scale of this node moved — its own `scale` prop changed,
+   * or it was attached under an ancestor whose scale is not the one it
+   * resolved against while detached.
+   *
+   * Everything below inherits, so the whole subtree is restyled; the early
+   * out is the answer not having moved, which is what makes the call at
+   * each of the attach sites free in the overwhelmingly common case of a
+   * tree with no `scale` prop in it at all.
+   *
+   * `mounting` is `insertBefore` attaching a subtree that has never been in
+   * the tree, and means the same thing it means to `_themeChanged`: resolve
+   * everything, claim nothing (issue #402). A node that has never painted
+   * has no stale pixels to cover, and where it lands is claimed by the
+   * child-list protocol.
+   */
+  _rescaleSubtree(mounting = false) {
+    if (!this._rescaleMoved()) return;
+    // One claim for the whole walk: `_invalidateLayout` bounds the subtree
+    // as it stands and queues the after-layout claim, so the per-node
+    // repeats the recursion below would make are the same rect over again.
+    if (!mounting) this._invalidateLayout('scale');
+    this._rescaled(mounting);
+  }
+
+  /** Drop the cached scale and re-ask; true when the answer moved. The
+   *  getter is the only place the rule lives, so a `<window>` — which
+   *  resolves the display scale whatever it is written inside — answers
+   *  false here and the walk stops at it. */
+  _rescaleMoved() {
+    const before = this._scaleCache;
+    this._scaleCache = undefined;
+    return this.scale !== before;
+  }
+
+  /** …the walk itself, for a node whose scale is already known to have
+   *  moved. Restyle in the new unit, then carry it down: an ordinary
+   *  descendant's scale is a product of this one, so it moved too. */
+  _rescaled(mounting) {
+    // both hold a size in device pixels at the old scale
+    this._textBase = undefined;
+    this._textScaled = null;
+    const prevStyle = this.style;
+    const style = this._syncStyle(this.props, mounting);
+    if (this.yoga && style !== prevStyle) {
+      applyLayoutStyle(this.yoga, style, prevStyle);
+    }
+    if (localTextStyleChanged(style, prevStyle)) this._textContentChanged();
+    // its own claims are bounded, so this runs on a mount too — the same
+    // rule `_themeChanged` follows
+    this._retext();
+    for (const child of this.children) {
+      if (child._rescaleMoved()) child._rescaled(mounting);
+    }
   }
 
   constructor(kind, props, app, { yoga = true } = {}) {
@@ -1547,6 +1872,20 @@ export class Node {
     // that a second mutation reuses the rect instead of walking the subtree
     // again. Lives exactly as long as membership in `root._reflowed`.
     this._reflowBefore = null;
+    // The automatic minimum size (#249), cached per node: what this node
+    // contributes to the box around it on each axis (`contentSpan`), the
+    // width the height was measured for (`probeHeightFloors`), and the
+    // floor yoga currently holds from us on each axis (`writeFloors`).
+    // `undefined` on an extent means it has to be measured again; `null`
+    // on a written floor means yoga's minimum may not be ours any more.
+    this._floorW = undefined;
+    this._floorH = undefined;
+    this._floorAtW = undefined;
+    this._floorMinW = undefined;
+    this._floorMinH = undefined;
+    // the width mode yoga last measured this leaf in with no height on
+    // offer — the question `_heightForWidth` repeats
+    this._floorMeasureMode = null;
     this.root = null; // owning WindowNode once attached
     this.hidden = false;
     this.destroyed = false;
@@ -1579,6 +1918,11 @@ export class Node {
     // inherits. Undefined means "never asked", which is load-bearing — see
     // `_retext`
     this._resolvedText = undefined;
+    // `inheritedTextStyle`'s cache at a *scale boundary* — a node whose
+    // `scale` prop puts it in a different unit from its parent, so the
+    // device size it inherits has to be re-expressed. Null everywhere else,
+    // which is every node in a tree with no `scale` prop in it.
+    this._textScaled = null;
     // `direction`'s cache, same contract as `_resolvedText`'s: undefined means
     // "never asked", which is what lets `_redirectSubtree` stop at a node
     // nothing below has resolved through
@@ -1762,6 +2106,10 @@ export class Node {
     this.style = this._anim?.size
       ? { ...target, ...this._animatedValues() }
       : target;
+    // The paint reach reads the style now in force — a shadow's spread, an
+    // outline's width — so it is dropped on every swap, here, before the
+    // old-extent claims below measure the new reach against the old one.
+    this._clearPaintBounds();
     // `hitSlop` feeds the cached hit reach and `overflow` decides where its
     // invalidation walks stop, so a swap that changes either clears here —
     // the one funnel every style path goes through. Animation ticks never
@@ -2014,6 +2362,9 @@ export class Node {
   setStyleState(name, on) {
     if (this.states[name] === on) return;
     this.states[name] = on;
+    // the focus ring's reach is read off `:focus-visible` whether or not
+    // the node has a state block of its own (`_outlineExtent`)
+    this._clearPaintBounds();
     if (!this._stateful || this.destroyed) return;
     const next = scaleResolvedStyle(
       resolveComputedStyle(resolveStyleStates(this._baseStyle, this.states)),
@@ -2194,7 +2545,26 @@ export class Node {
    * `insertBefore` re-resolves the subtree against the real one.
    */
   get inheritedTextStyle() {
-    if (this.parent) return this.parent.resolvedTextStyle();
+    if (this.parent) {
+      const inherited = this.parent.resolvedTextStyle();
+      // A **scale boundary** — this node's `scale` prop, or a `<popup>`
+      // written inside a zoomed subtree, which goes back to the display's
+      // own unit. What comes down the cascade is already device pixels at
+      // the parent's scale (that is the point of resolving the theme's size
+      // once, at the root), so re-expressing it here is the only place a
+      // second multiply is right: a `fontSize: 14` theme inside a
+      // `scale={2}` box is 28 logical, 28 device at 1x, and the descendants
+      // below inherit that without compounding it again.
+      const from = this.parent.scale;
+      const to = this.scale;
+      if (from === to) return inherited;
+      const size = (inherited.size * to) / from;
+      const cached = this._textScaled;
+      if (cached?.from !== inherited || cached.style.size !== size) {
+        this._textScaled = { from: inherited, style: { ...inherited, size } };
+      }
+      return this._textScaled.style;
+    }
     const theme = this.theme;
     const color = theme.text;
     // A palette can reach a node as a bare `theme` **prop** rather than a
@@ -2469,6 +2839,24 @@ export class Node {
     this.yoga.setMeasureFunc(measure);
   }
 
+  /**
+   * The height this leaf takes at `width` with nothing bounding its height
+   * — the answer yoga gets from the measuring pass that settles the height
+   * floors, asked directly. `probeHeightFloors` asks it twice, for the width
+   * a leaf was measured at and the one it has now, to find out whether a
+   * relayout that moved the leaf changed what it needs; a paragraph answers
+   * from its layout cache, and the elements whose height is not a function
+   * of their width at all answer at once.
+   */
+  _heightForWidth(width) {
+    return this.measureContent({
+      width,
+      height: Infinity,
+      widthMode: this._floorMeasureMode ?? 'at-most',
+      heightMode: 'unconstrained',
+    })?.height;
+  }
+
   /**
    * Hand `measureContent` to layout, translated: the modes arrive as words,
    * an axis with no bound arrives as `Infinity` rather than as yoga's null,
@@ -2477,6 +2865,9 @@ export class Node {
    */
   _useMeasureContent() {
     this._setMeasureFunc((width, widthMode, height, heightMode) => {
+      if (heightMode === Yoga.MEASURE_MODE_UNDEFINED) {
+        this._floorMeasureMode = MEASURE_MODES[widthMode];
+      }
       const size = this.measureContent({
         width: measureOffer(width, widthMode),
         height: measureOffer(height, heightMode),
@@ -2626,6 +3017,9 @@ export class Node {
     // it can see its ancestors now, so any token in its style can resolve.
     // With no theme anywhere there is nothing to resolve and nothing to walk
     if (this.theme || child.props.theme) child._themeChanged(mounting);
+    // …and the same for the scale: a subtree styled while detached resolved
+    // against the app's, and only now can see the `scale` props above it.
+    child._rescaleSubtree(mounting);
     this._textContentChanged();
     this._childListChanged(before);
     a11yHooks.attached?.(this, child);
@@ -2818,6 +3212,11 @@ export class Node {
     const themeChanged = newProps.theme !== prev.theme;
     this.props = newProps;
     if (themeChanged) this._themeChanged();
+    // Ahead of the `_syncStyle` below, because the funnel that runs
+    // multiplies by `this.scale` and this is what makes it read the new
+    // factor. The walk restyles this node too, so the call after it hits
+    // the identity check and costs nothing twice.
+    if (newProps.scale !== prev.scale) this._rescaleSubtree();
     const style = this._syncStyle(newProps);
     let layoutChanged = false;
     // hoisted styles hit the identity check and skip the whole update
@@ -3249,6 +3648,9 @@ export class Node {
    * invalid, whose own clear walked the rest of the way up.
    */
   _clearHitBounds() {
+    // what moves a hit reach moves the paint reach — first, because the
+    // walk below returns from wherever it finds an ancestor already clear
+    this._clearPaintBounds();
     this._hitBoundsCache = null;
     for (let n = this.parent; n; n = n.parent) {
       if (n.clipsChildren() || n._hitBoundsCache === null) return;
@@ -3392,6 +3794,13 @@ export class Node {
     const abs = this.abs;
     abs.x += dx;
     abs.y += dy;
+    // the paint reach rides along the same way — unless it *is* `abs`,
+    // which just moved
+    const p = this._paintBoundsCache;
+    if (p && p !== abs) {
+      p.x += dx;
+      p.y += dy;
+    }
     const b = this._hitBoundsCache;
     if (b) {
       b.left += dx;
@@ -3449,6 +3858,10 @@ export class Node {
     // a layout change may grow what an enclosing scroll pane has to scroll,
     // through a route yoga never sees (issue #405)
     if (layoutChanged) this._markScrollMeasureDirty();
+    // a node that says its appearance changed may have changed how far it
+    // reaches — a shadow, an outline, a scene element's ink — so its cached
+    // paint reach goes with the claim
+    if (damage === this || damage === null) this._clearPaintBounds();
     this.root?.invalidate(layoutChanged, damage, reason);
   }
 
@@ -3682,16 +4095,44 @@ export class Node {
    * almost nothing.
    */
   _subtreeBounds() {
+    // Cached like the hit reach (`_hitBounds`), and for the same reason: a
+    // bounded frame asks every subtree on the way to its rect whether it
+    // reaches in, and answering by walking the subtree made a one-cell
+    // repaint cost the whole tree — a millisecond at four thousand nodes,
+    // five at fourteen thousand, every frame. The cache is dropped up the
+    // chain by whatever changes a reach: a rect assigned by layout, a
+    // child list mutation (`_clearHitBounds`), and every change a node
+    // announces about itself (`invalidate`, `setStyleState`) — so a stale
+    // answer would need a change nobody announced, which is already a
+    // repaint bug.
+    const cached = this._paintBoundsCache;
+    if (cached && !NO_BOUNDS_CACHE) return cached;
     let bounds = this._ownPaintBounds();
-    if (this.clipsChildren()) return bounds;
-    for (const child of this.children) {
-      if (child.isWindow || !child.yoga || child.hidden) continue;
-      if (child.style?.display === 'none') continue;
-      bounds = unionRect(bounds, child._subtreeBounds());
+    if (!this.clipsChildren()) {
+      for (const child of this.children) {
+        if (child.isWindow || !child.yoga || child.hidden) continue;
+        if (child.style?.display === 'none') continue;
+        bounds = unionRect(bounds, child._subtreeBounds());
+      }
     }
+    this._paintBoundsCache = bounds;
     return bounds;
   }
 
+  /**
+   * This node's paint reach changed: drop the cached union here and up the
+   * chain, stopping where `_clearHitBounds` stops and for the same reasons
+   * — a clipping ancestor's reach is its own rect, and an ancestor already
+   * cleared has cleared the rest of the way up.
+   */
+  _clearPaintBounds() {
+    this._paintBoundsCache = null;
+    for (let n = this.parent; n; n = n.parent) {
+      if (n.clipsChildren() || n._paintBoundsCache === null) return;
+      n._paintBoundsCache = null;
+    }
+  }
+
   /**
    * This node's own rect, grown by anything it draws outside it — the
    * outline and the shadow, the only two. Per node rather than once at the
@@ -4443,11 +4884,17 @@ export class Node {
    *     format,          // 'argb32', or 'a8' for coverage that gets tinted
    *     tint,            // the colour an 'a8' surface is painted through
    *   }
-   *   paintCached(ctx, box) -> void   // draw at the origin of `box`
+   *   paintCached(ctx, box, ink) -> void   // draw at the origin of `box`
    *
    * Returning null opts out for this frame, which is the right answer
    * whenever the paint depends on something the key cannot see.
    *
+   * `ink` is the colour a mono drawing — one that asked for `'a8'` — must
+   * paint in: white where the surface is coverage and the tint arrives at
+   * blit time, the tint itself on a backend without coverage surfaces,
+   * where the cache bakes the colour into an argb32 entry and puts it in
+   * the key (src/paintcache.js). A multi-colour drawing ignores it.
+   *
    * **The key is the entire correctness surface.** It must name every input
    * `paintCached` reads, derived from the same values `applyProps` compares
    * so the two cannot drift. Never cache a paint that depends on state
@@ -4494,6 +4941,11 @@ export class Node {
   }
 
   _paintChildren(ctx) {
+    // A retained presenter replays a node's `paint` into a visual of that
+    // node's own — its children have visuals of their own, so it sets this
+    // for the duration of the call (src/cocoa/presenter.js, `paintSelf`).
+    // Never set on the X11 or surface paths, where a frame is one walk.
+    if (this._ownPaintOnly) return;
     const order = this.paintOrder();
     if (order.length === 0) return;
     const clip = this.clipsChildren() && this._childrenCanOverflow();
@@ -4995,7 +5447,7 @@ export class TextNode extends Node {
    * that should have cancelled to zero; a fraction that is not exact in
    * binary leaves a rounding residue there instead, and dividing by it laid
    * the section titles of `examples/configurator` out 5.6 billion pixels
-   * tall. See `writeContentFloors`, which is the other end of it.
+   * tall. See `writeFloors`, which is the other end of it.
    */
   _trim(layout) {
     if (this.style.textBoxTrim !== 'cap-alphabetic') return null;
@@ -5081,9 +5533,60 @@ export class TextNode extends Node {
     const placed = this._placedLayout();
     if (!placed) return;
     this._paintSelection(ctx);
+    if (this._paintsStrip()) {
+      this._paintStrip(ctx, placed);
+      return;
+    }
     placed.layout.draw(ctx, placed.x, placed.y);
   }
 
+  /**
+   * Whether this paragraph is too small to read, and is painted as a strip
+   * where its lines are instead of as glyphs (`_paintStrip`).
+   *
+   * A zoomed-out view — a minimap, a graph at a tenth of its size, a grid
+   * of five thousand cells — is a screen full of labels nobody can read,
+   * each of which costs a `CTLineDraw` or a glyph-run composite at exactly
+   * the price of a legible one. Below a legible size a label is a smudge
+   * of its ink, and a strip of that ink at the coverage of small text is
+   * the same smudge for one fill. The size is in logical pixels: what is
+   * legible is a physical question, and a 5px label is the same size on a
+   * 2x panel as on a 1x monitor. `textStripBelow` on `createRoot` moves
+   * the line, and `0` keeps glyphs at every size.
+   */
+  _paintsStrip() {
+    const below = textStripBelowFor(this.app);
+    return below > 0 && this.resolvedTextStyle().size / this.scale < below;
+  }
+
+  /**
+   * One rectangle per line, over the band the letters sit in — from a
+   * little above the x-height down past the baseline — in the ink at a
+   * coverage that reads the way small text does: solid ink would be a bar,
+   * and a paragraph is mostly white space at any size.
+   */
+  _paintStrip(ctx, { layout, x, y }) {
+    const lines = layout.lines;
+    if (!lines?.length) return;
+    const style = this.resolvedTextStyle();
+    const em = style.size;
+    const ink = cssColorStraight(style.color);
+    if (!ink) return;
+    const rects = [];
+    for (const line of lines) {
+      if (!(line.width > 0)) continue;
+      rects.push(
+        x + line.x,
+        y + line.baseline - em * STRIP_ABOVE_BASELINE,
+        line.width,
+        em * (STRIP_ABOVE_BASELINE + STRIP_BELOW_BASELINE),
+      );
+    }
+    if (!rects.length) return;
+    ctx.fillStyle = `rgba(${Math.round(ink[0] * 255)}, ${Math.round(ink[1] * 255)}, ${Math.round(ink[2] * 255)}, ${ink[3] * STRIP_COVERAGE})`;
+    ctx.fillRects(rects);
+  }
+
   /** The band under the glyphs, when a document selection reaches this
    * paragraph. Drawn from the same accessors a registered element would use,
    * so the built-in and the custom surface cannot drift apart. */
@@ -6419,7 +6922,7 @@ export class CanvasNode extends Node {
     };
   }
 
-  paintCached(ctx, box) {
+  paintCached(ctx, box, ink = '#ffffff') {
     const onDraw = this.props.onDraw;
     if (typeof onDraw !== 'function') return;
     ctx.save();
@@ -6428,8 +6931,9 @@ export class CanvasNode extends Node {
     ctx.clip();
     ctx.translate(box.x, box.y);
     // Into a coverage surface only the alpha of a paint survives and the
-    // tint arrives at blit time, so any opaque colour renders the same mask.
-    if (this.props.mono) this._presetMono(ctx, '#ffffff');
+    // tint arrives at blit time, so any opaque colour renders the same mask
+    // — and the cache says white then, or the tint where it bakes colour.
+    if (this.props.mono) this._presetMono(ctx, ink);
     try {
       onDraw(ctx, {
         width: box.width,
@@ -8509,12 +9013,21 @@ export class WindowNode extends Scrollable(Node) {
     // it moves (see _sendSizeHints for why the size is part of it)
     this._sentHints = null;
     this._sentHintsAt = null;
-    // The automatic minimum size (#249): the nodes carrying a floor this
-    // window measured, whether the floors are still the answer, and the
-    // width the height half of them was measured for.
-    this._floored = new Set();
+    // The automatic minimum size (#249): whether the floors are still the
+    // answer, the width the height half of them was measured for, the nodes
+    // this frame found stale (`collectFloorStale`), and two counters the
+    // tests read — layout passes over the root and nodes measured.
     this._floorsDirty = true;
     this._floorsWidth = null;
+    this._floorsStale = new Set();
+    // whether the first floors pass has run (`collectFloorStale`'s sweep)
+    this._floorsSwept = false;
+    this._floorsMeasured = 0;
+    this._layoutPasses = 0;
+    // whether the tree's CONTENT moved since the floors were measured — a
+    // resize alone does not, which is what lets a live resize defer them
+    this._floorsContentDirty = true;
+    this._floorsCatchUp = false;
   }
 
   /**
@@ -8567,7 +9080,19 @@ export class WindowNode extends Scrollable(Node) {
     this.invalidate(true, null, 'direction');
   }
 
-  _measureContentSpans(axis, forWidth, out) {
+  /**
+   * One measuring pass over the tree, read back into the extents of every
+   * node still to be measured (`contentSpan`), and the root's own span
+   * returned — the number a `minWidth="auto"` window sends as its hint.
+   *
+   * `forWidth` is the width the heights are measured for; `probe` says
+   * whether the widths that pass settles are still to be checked against
+   * the ones the height floors were measured at (`probeHeightFloors`) —
+   * they are when nothing has looked yet this frame, and a leaf the probe
+   * finds moved has its floor taken off and the pass run again, since a
+   * floor still on a node being measured would be read back as content.
+   */
+  _measureContentSpans(axis, forWidth, probe = false) {
     const yoga = this.yoga;
     const dir = this._rootDirection;
     // The root carries whatever size the last pass pinned on it, and an
@@ -8575,9 +9100,13 @@ export class WindowNode extends Scrollable(Node) {
     yoga.setWidth(undefined);
     yoga.setHeight(undefined);
     if (axis === 'width') {
-      setMeasuringShrink(this, axis);
+      const shrunk = [];
+      setMeasuringShrink(this, axis, shrunk);
+      this._layoutPasses += 1;
       yoga.calculateLayout(0, undefined, dir);
-      return contentSpan(this, axis, undefined, out);
+      const span = contentSpan(this, axis, null, this);
+      restoreShrink(shrunk);
+      return span;
     }
     // Height takes two passes. The first is the tree at its real width with
     // no bound on the height, which is where every leaf reports the height
@@ -8588,36 +9117,108 @@ export class WindowNode extends Scrollable(Node) {
     // stretches: those are the ones the map above puts back. The widths the
     // first pass settled are held across the second (`freezeWidths`), which
     // is the only thing keeping it a collapse rather than a second opinion.
+    this._layoutPasses += 1;
     yoga.calculateLayout(forWidth, undefined, dir);
+    if (probe && this._probeHeightFloors().marked) {
+      this._writeFloors('height');
+      this._layoutPasses += 1;
+      yoga.calculateLayout(forWidth, undefined, dir);
+    }
     const intrinsic = new Map();
     captureLeafHeights(this, intrinsic);
-    freezeWidths(this);
-    setMeasuringShrink(this, axis);
+    const frozen = [];
+    freezeWidths(this, frozen);
+    const shrunk = [];
+    setMeasuringShrink(this, axis, shrunk);
+    this._layoutPasses += 1;
     yoga.calculateLayout(forWidth, 0, dir);
-    const span = contentSpan(this, axis, intrinsic, out);
-    restoreWidths(this);
+    const span = contentSpan(this, axis, intrinsic, this);
+    restoreWidths(frozen);
+    restoreShrink(shrunk);
+    return span;
+  }
+
+  /**
+   * What the last measurement can no longer answer for, taken off the
+   * nodes and listed (`collectFloorStale`). Run ahead of anything that lays
+   * the tree out, since a pass clears yoga's record of what changed — and
+   * cheap enough to run twice in a frame, because the second walk finds the
+   * marks the first one left.
+   */
+  _collectFloorStale() {
+    const found = { width: false, height: false };
+    this._floorsStale.clear();
+    // the root's own children are written from here too, and its direction
+    // can move like any node's
+    this._floorsStale.add(this);
+    collectFloorStale(this, this._floorsStale, found, !this._floorsSwept);
+    return found;
+  }
+
+  /** The floors on the children of every node found stale, from the extents
+   *  they carry — `writeFloors` for each. */
+  _writeFloors(axis) {
+    for (const node of this._floorsStale) {
+      if (!node.destroyed) writeFloors(node, axis);
+    }
+  }
+
+  /** `probeHeightFloors` over this window's tree. */
+  _probeHeightFloors() {
+    const hit = { marked: false, owed: false };
+    probeHeightFloors(this, this, hit);
+    return hit;
+  }
+
+  /**
+   * Measure the width extents that are stale and write the width floors
+   * from them. The floors on the nodes about to be measured come off first
+   * (a stale extent writes the style's own minimum), which is what keeps a
+   * floor from ratcheting: read back as content, it could only ever grow.
+   */
+  _measureWidthFloors() {
+    this._writeFloors('width');
+    const span = this._measureContentSpans('width');
+    this._writeFloors('width');
+    return span;
+  }
+
+  /** The same for the heights, at `forWidth`. */
+  _measureHeightFloors(forWidth, probe) {
+    this._writeFloors('height');
+    const span = this._measureContentSpans('height', forWidth, probe);
+    this._writeFloors('height');
     return span;
   }
 
   _measureMinimum(axis, forWidth) {
-    // Measured from the styles alone, so the floors this window wrote itself
-    // have to come off first: they were derived from this same measurement,
-    // and left in place they would be read back as content the tree cannot
-    // give up — a floor that could only ever ratchet upwards.
-    this._resetContentFloors();
-    const min = measuringExactly(() =>
-      Math.ceil(this._measureContentSpans(axis, forWidth)),
+    // Measured from the styles alone: the stale nodes' own floors come off
+    // in the measurement, and a clean node's extent was measured the same
+    // way before it was floored.
+    this._collectFloorStale();
+    return measuringExactly(() =>
+      Math.ceil(
+        axis === 'width'
+          ? this._measureWidthFloors()
+          : this._measureHeightFloors(forWidth, true),
+      ),
     );
-    restoreShrink(this);
-    return min;
+  }
+
+  /** The real layout pass: the tree at the window's size, on the pixel grid. */
+  _layoutRoot(width, height) {
+    this._layoutPasses += 1;
+    this.yoga.setWidth(width);
+    this.yoga.setHeight(height);
+    this.yoga.calculateLayout(width, height, this._rootDirection);
   }
 
   /**
    * Give every flex item in this window's tree the floor CSS calls its
    * automatic minimum size, so that `flexShrink`'s default of `1` squeezes a
    * row into the space it has without squeezing its contents out of
-   * existence. See `writeContentFloors` for what that means and why both
-   * halves are needed.
+   * existence, and lay the tree out with them. See `writeFloors` for what
+   * that means and why both halves are needed.
    *
    * Two measurements, in this order because they depend that way round: the
    * widths from a pass with no room on offer at all, then — with those floors
@@ -8626,34 +9227,113 @@ export class WindowNode extends Scrollable(Node) {
    *
    * Nothing about this is per frame: the floors are content, so they survive
    * every frame that did not change any (`_floorsDirty`), which is what keeps
-   * a wheel notch to the one layout pass it always was.
-   */
-  _applyContentFloors(width) {
-    if (!this._floorsDirty && this._floorsWidth === width) return;
-    this._resetContentFloors();
+   * a wheel notch to the one layout pass it always was. And nothing about
+   * it is per node either: every node keeps the extent it was last measured
+   * at, and a measurement re-reads only the nodes whose subtree changed
+   * (`collectFloorStale`), taking the rest at the number they carry. So a
+   * padding change on a container measures the container and nothing
+   * below it, a row that mounts measures itself alone, and a colour change
+   * measures nothing.
+   *
+   * The passes are paid for only where a floor is going to be **written**
+   * from what they find. The width pass runs when a stale node is one on a
+   * row's main axis; and the heights are settled the other way round — the
+   * real layout runs first, `probeHeightFloors` walks the nodes it moved
+   * and asks each leaf whether its height at its new width is the height
+   * it had, and only if one says otherwise (or content changed under a
+   * node a floor is written on) do the two height passes run and the
+   * layout with them. A relayout of a large tree whose labels all still
+   * fit — a panel toggle, a theme switch, a resize that wraps nothing — is
+   * one pass over yoga where it was four.
+   */
+  _applyContentFloors(width, height) {
+    const found = this._collectFloorStale();
     measuringExactly(() => {
-      const widths = new Map();
-      this._measureContentSpans('width', undefined, widths);
-      writeContentFloors(this, 'width', widths, this._floored);
-      const heights = new Map();
-      this._measureContentSpans('height', width, heights);
-      writeContentFloors(this, 'height', heights, this._floored);
+      if (found.width) this._measureWidthFloors();
+      else this._writeFloors('width');
+      // from the extents on hand; a stale one writes the style's minimum,
+      // which is the floor coming off ahead of its measurement below
+      this._writeFloors('height');
     });
+    let heights = found.height;
+    let probed = false;
+    if (!heights) {
+      this._layoutRoot(width, height);
+      heights = this._probeHeightFloors().owed;
+      probed = true;
+    }
+    if (heights) {
+      measuringExactly(() => this._measureHeightFloors(width, !probed));
+      this._layoutRoot(width, height);
+    }
     this._floorsDirty = false;
+    this._floorsContentDirty = false;
+    this._floorsSwept = true;
     this._floorsWidth = width;
   }
 
-  /** Take the measured floors back off, leaving each node with whatever its
-   *  own style says. */
-  _resetContentFloors() {
-    if (!this._floored.size) return;
-    for (const node of this._floored) {
-      if (node.destroyed || !node.yoga) continue;
-      node.yoga.setMinWidth(node.style.minWidth);
-      node.yoga.setMinHeight(node.style.minHeight);
-    }
-    this._floored.clear();
-    this._floorsDirty = true;
+  /**
+   * Answer a live resize with the floors already in hand, and measure fresh
+   * ones once the drag is over.
+   *
+   * The floors were half of a relayout on a large tree — three extra layout
+   * passes and their walks, measured at 21 of a 44ms frame on 3,600 nodes
+   * (`npm run bench:presenters -- --scenario=layout`) before they were
+   * measured incrementally — and a resize is the one layout change they
+   * cannot follow at input rate: AppKit's resize loop calls the frame for
+   * every pointer move, from inside the event, and the next move waits for
+   * the frame. So a tick of a drag lays the tree out against the floors the
+   * last measurement left, which are exact along the main axis (a
+   * min-content width is content, and the content did not move) and a
+   * frame stale for wrapped text along the other, and the frame after the
+   * release measures once and lays out again — "answer the input, then
+   * catch up". Only while the window says it is being resized live
+   * (`liveResizing`, the Cocoa window's reading of AppKit's flag; an X
+   * window has no such thing and takes the measured path every time), only
+   * when the floors exist to reuse, and never over a content change the
+   * floors have not seen — a row that mounted mid-drag has no floor at all,
+   * and no floor is the collapse #249 exists to prevent.
+   */
+  _deferContentFloors(width) {
+    // nothing to measure: `_applyContentFloors` returns at once, and a
+    // catch-up frame would owe nothing
+    if (!this._floorsDirty && this._floorsWidth === width) return false;
+    return (
+      this.window?.liveResizing === true &&
+      this._floorsWidth != null &&
+      !this._floorsContentDirty
+    );
+  }
+
+  /**
+   * The frame a deferred measurement owes: a full relayout with fresh
+   * floors, run on the first frame tick after the live resize ends. One at
+   * a time — a drag is many ticks, and the catch-up waits for the last of
+   * them rather than following each.
+   */
+  _scheduleFloorsCatchUp() {
+    if (this._floorsCatchUp) return;
+    this._floorsCatchUp = true;
+    const schedule =
+      typeof this.window?.requestAnimationFrame === 'function'
+        ? (cb) => this.window.requestAnimationFrame(cb)
+        : (cb) => setImmediate(cb);
+    const run = () => {
+      if (this.destroyed || !this.window) {
+        this._floorsCatchUp = false;
+        return;
+      }
+      // still dragging (a pump tick inside a pause of the drag): wait on
+      if (this.window.liveResizing) {
+        schedule(run);
+        return;
+      }
+      this._floorsCatchUp = false;
+      this._floorsDirty = true;
+      this.invalidate(true, null, 'resize');
+      this.flush();
+    };
+    schedule(run);
   }
 
   /**
@@ -10536,6 +11216,9 @@ export class WindowNode extends Scrollable(Node) {
       // offset applied during `absolutize` and leaves every yoga node exactly
       // as it was, at input rate, on the biggest trees in any app.
       if (reason !== 'scroll') this._floorsDirty = true;
+      if (reason !== 'scroll' && reason !== 'resize') {
+        this._floorsContentDirty = true;
+      }
     }
     // A layout change with no bound named repaints everything, because a
     // reflow can move any node and one that moved leaves stale pixels at a
@@ -10627,7 +11310,7 @@ export class WindowNode extends Scrollable(Node) {
       // as a list of rects rather than one box around them all, so two changes
       // at opposite corners of the window no longer repaint everything
       // between them.
-      this._damage = addDamageRect(this._damage, bounds);
+      this._damage = addDamageRect(this._damage, bounds, this._damageRectCap());
     }
     this.needsPaint = true;
     // Recorded before the `_scheduled` gate, not inside it: the debt is
@@ -10673,7 +11356,12 @@ export class WindowNode extends Scrollable(Node) {
     // A window that realized after a loop registered has one now
     if (this._loopNodes.size && !this._loopWatch) this._watchLoops();
     this._advanceAnimations(now());
-    if (this.needsLayout) this._refit();
+    if (this.needsLayout) {
+      // before `_refit` lays anything out: a pass clears yoga's record of
+      // which subtrees changed, and the floors are measured from that record
+      this._collectFloorStale();
+      this._refit();
+    }
     const width = this.window.width ?? this._requestedSize?.width ?? 0;
     const height = this.window.height ?? this._requestedSize?.height ?? 0;
     let layoutMoved = false;
@@ -10687,24 +11375,30 @@ export class WindowNode extends Scrollable(Node) {
       // ledger's rect moves with the shift (issue #398).
       this._laidOut = true;
       this._resolveSizeQueries(width, height);
-      this._applyContentFloors(width);
-      this.yoga.setWidth(width);
-      this.yoga.setHeight(height);
-      this.yoga.calculateLayout(width, height, this._rootDirection);
+      if (!this._floorsDirty && this._floorsWidth === width) {
+        this._layoutRoot(width, height);
+      } else if (this._deferContentFloors(width)) {
+        this._scheduleFloorsCatchUp();
+        this._layoutRoot(width, height);
+      } else {
+        this._applyContentFloors(width, height);
+      }
       this.abs = { x: 0, y: 0, width, height };
       this._placed = true;
       // the root's rect is written here, not through _assignAbs, so its
       // cached hit reach is dropped here too (children bubble their own)
       this._hitBoundsCache = null;
+      this._paintBoundsCache = null;
       // A bounded frame watches the walk: whatever this pass actually moved
       // claims its old and new rects through the sink, and the frame stays
       // a few rects instead of the whole window. An unbounded frame skips
       // the bookkeeping — it repaints everything anyway.
       if (this._damage !== FULL_DAMAGE) {
+        const cap = this._damageRectCap();
         layoutDiffSink = (rect) => {
           if (this._damage === FULL_DAMAGE) return;
           layoutMoved = true;
-          this._damage = addDamageRect(this._damage, rect);
+          this._damage = addDamageRect(this._damage, rect, cap);
         };
       }
       try {
@@ -10736,7 +11430,11 @@ export class WindowNode extends Scrollable(Node) {
         if (sv && !sv._recordBlitClaim(after)) {
           sv._pendingBlitFrom = BLIT_POISONED;
         }
-        this._damage = addDamageRect(this._damage, after);
+        this._damage = addDamageRect(
+          this._damage,
+          after,
+          this._damageRectCap(),
+        );
       }
       this._reflowed.clear();
     } else if (this._reflowed.size) {
@@ -11458,6 +12156,19 @@ export class WindowNode extends Scrollable(Node) {
    * has to clear the flag, so it degrades to a full repaint rather than
    * painting nothing.
    */
+  /**
+   * How many rects a frame's damage may hold before `addDamageRect` merges
+   * the closest pair. Four on X11 (`MAX_DAMAGE_RECTS`), where every pass
+   * costs the server a clip mask; a backend whose pass is a client-side
+   * clip and a culled walk says so on its window (`damageRectCap`) and
+   * keeps more of them — a clock, a graph and a status row ticking in one
+   * frame stay three small rects instead of the box around all three.
+   */
+  _damageRectCap() {
+    const cap = this.window?.damageRectCap;
+    return Number.isInteger(cap) && cap > 0 ? cap : MAX_DAMAGE_RECTS;
+  }
+
   _takeDamage(width, height) {
     const damage = this._damage;
     this._damage = null;