react-x11 2.18.6 → 2.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.18.6",
+  "version": "2.20.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -110,7 +110,7 @@
   "optionalDependencies": {
     "@windowkit/appkit": "^0.12.0",
     "@windowkit/wayland": "^3.1.1",
-    "@windowkit/win32": "^0.0.2",
+    "@windowkit/win32": "^0.0.3",
     "dbus-native": "^0.15.1",
     "x11-dri": "^0.9.0"
   },

package/src/backend/context2d.js

@@ -577,6 +577,20 @@ export class BackendContext2D {
    * dashes of an animated edge were repainted sixteen times a second and
    * never moved.
    */
+  /**
+   * Text drawn under a transform that scales is drawn scaled, glyphs and
+   * all: both bridges lay a text layout out once and draw its outlines
+   * through the context's matrix (Direct2D's `DrawTextLayout`, CoreText's
+   * `CTFrameDraw`). ntk's context on X11 cannot — its glyphs come out of a
+   * cache rasterized at the size they were shaped at, and a transform
+   * moves where each lands, not how big it is — and says nothing, which is
+   * the same answer. So an element that would rather draw a layout it has
+   * than shape a new one at every step of a zoom asks this first.
+   */
+  get scalesText() {
+    return true;
+  }
+
   get lineDashOffset() {
     return this._state.dashOffset;
   }

package/src/glnodes.js

@@ -379,8 +379,10 @@ export class GlAreaNode extends Node {
     // `_assignAbs` keeps the object when nothing changed
     const still = this.abs === was;
     const { x, y } = this.abs;
+    const dx = x - was.x;
+    const dy = y - was.y;
     for (const child of this.children) {
-      if (child.isWindow) continue;
+      if (child.isWindow || child._followParent(dx, dy)) continue;
       if (still) this._absolutizeChild(child, x, y, overlay);
       else child.absolutize(x, y);
     }

package/src/node.d.ts

@@ -142,6 +142,15 @@ export interface Context2D {
   strokeRect(x: number, y: number, width: number, height: number): void;
   clearRect(x: number, y: number, width: number, height: number): void;
   fillText(text: string, x: number, y: number): void;
+  /**
+   * `true` where text drawn under a transform that scales is drawn scaled,
+   * glyphs and all — the Windows and macOS contexts. Absent on X11, where
+   * ntk rasterizes glyphs at the size the text was shaped at and a
+   * transform moves only where each one lands. An element that would draw
+   * a layout it already has at another size, rather than shape a new one,
+   * asks this first.
+   */
+  readonly scalesText?: boolean;
   measureText(text: string): { width: number; [key: string]: unknown };
   /**
    * Composite an offscreen `Surface` (`react-x11/ntk`) — whole at a point,
@@ -536,8 +545,21 @@ export declare class Node {
    * coordinates and inside this node. The return says whether the frame is
    * still a blit candidate; the gates that matter close at frame time, and
    * every one of them falls back to repainting `rect`.
+   *
+   * `riders` are other nodes whose pixels in `rect` are part of what moves —
+   * a layer of widgets the element lays out over its own drawing and pans
+   * with it. Each is to move by exactly (dx, dy) in this frame's layout pass
+   * and change nothing else; then it does not decline the blit, and only
+   * what it leaves or reaches outside `rect` is repainted, so keep what it
+   * can paint inside the element (a box that clips it). Anything else it
+   * does is claimed as usual, which declines the blit.
    */
-  scrollContents(rect: Rect, dx: number, dy: number): boolean;
+  scrollContents(
+    rect: Rect,
+    dx: number,
+    dy: number,
+    riders?: Iterable<Node>,
+  ): boolean;
   /**
    * Did anything this node draws change? True damages the whole node, false
    * contributes no damage at all, and the default answers true for any prop

package/src/nodes/animation.js

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

package/src/nodes/invalidate.js

@@ -322,6 +322,11 @@ export class WindowInvalidate {
       // panned — was a full measurement of the content floors a step.
       if (reason !== 'scroll' && reason !== 'position') {
         this._floorsDirty = true;
+        // …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 (reason !== 'scroll' && reason !== 'resize' && reason !== 'position') {
         this._floorsContentDirty = true;

package/src/nodes/layout.js

@@ -5,9 +5,54 @@
 import { Yoga } from '../yoga.js';
 import { callHandler } from '../errors.js';
 import { DAMAGE_SLOP, layoutDiff } from './damage.js';
-import { insetRect } from './rects.js';
+import { insetRect, intersectRects, outerPixels } from './rects.js';
 import { DEV } from './util.js';
 
+/** The parts of `rect` outside `hole`: up to four bands, full width above
+ *  and below, the rest beside. */
+function outside(rect, hole) {
+  const cut = intersectRects(rect, hole);
+  if (!cut) return [rect];
+  const out = [];
+  const right = rect.x + rect.width;
+  const bottom = rect.y + rect.height;
+  if (cut.y > rect.y) {
+    out.push({
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: cut.y - rect.y,
+    });
+  }
+  const cutBottom = cut.y + cut.height;
+  if (cutBottom < bottom) {
+    out.push({
+      x: rect.x,
+      y: cutBottom,
+      width: rect.width,
+      height: bottom - cutBottom,
+    });
+  }
+  if (cut.x > rect.x) {
+    out.push({
+      x: rect.x,
+      y: cut.y,
+      width: cut.x - rect.x,
+      height: cut.height,
+    });
+  }
+  const cutRight = cut.x + cut.width;
+  if (cutRight < right) {
+    out.push({
+      x: cutRight,
+      y: cut.y,
+      width: right - cutRight,
+      height: cut.height,
+    });
+  }
+  return out;
+}
+
 export const MEASURE_MODES = [];
 MEASURE_MODES[Yoga.MEASURE_MODE_UNDEFINED] = 'unconstrained';
 MEASURE_MODES[Yoga.MEASURE_MODE_EXACTLY] = 'exactly';
@@ -198,20 +243,200 @@ export class NodeLayout {
     // its own — counts as on screen too
     this._placed = true;
     if (!this.yoga) return;
-    this._assignAbs(
-      originX + this.yoga.getComputedLeft(),
-      originY + this.yoga.getComputedTop(),
-      this.yoga.getComputedWidth(),
-      this.yoga.getComputedHeight(),
-    );
-    if (this.props.onLayout) this._reportLayout();
-    if (this._host !== null) {
-      this._absolutizeHostChildren();
+    const x = originX + this.yoga.getComputedLeft();
+    const y = originY + this.yoga.getComputedTop();
+    const width = this.yoga.getComputedWidth();
+    const height = this.yoga.getComputedHeight();
+    const wasX = this.abs.x;
+    const wasY = this.abs.y;
+    const move = this._beginRigidMove(x, y, width, height);
+    try {
+      this._assignAbs(x, y, width, height);
+      if (this.props.onLayout) this._reportLayout();
+      if (this._host !== null) {
+        this._absolutizeHostChildren();
+      } else {
+        const dx = this.abs.x - wasX;
+        const dy = this.abs.y - wasY;
+        for (const child of this.children) {
+          if (child.isWindow || child._followParent(dx, dy)) continue;
+          child.absolutize(this.abs.x, this.abs.y);
+        }
+      }
+    } finally {
+      if (move) layoutDiff.shift = null;
+    }
+    if (move) this._claimRigidMove(move);
+  }
+
+  /**
+   * 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.
+   *
+   * 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).
+   *
+   * 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,
+   * on every step of a pan that moved the one box they sit in.
+   *
+   * A move it rode — the diff's `shift`, where the pixels are carried —
+   * claims nothing, as the walk would not have. A move of its own claims
+   * where the subtree's pixels were and where they are, which is what the
+   * 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;
+    }
+    const sink = layoutDiff.sink;
+    const shift = layoutDiff.shift;
+    if (
+      sink &&
+      !(shift && shift.x === dx && shift.y === dy) &&
+      !this.hidden &&
+      this.style?.display !== 'none'
+    ) {
+      const reach = this.paintBounds();
+      // where the walk's `_assignAbs` puts the near end: after the shift a
+      // scroll blit is about to make, when one is riding (issue #398)
+      sink(
+        shift
+          ? {
+              x: reach.x + shift.x,
+              y: reach.y + shift.y,
+              width: reach.width,
+              height: reach.height,
+            }
+          : reach,
+        this,
+      );
+      sink(
+        {
+          x: reach.x + dx,
+          y: reach.y + dy,
+          width: reach.width,
+          height: reach.height,
+        },
+        this,
+      );
+    }
+    this._shiftAbs(dx, dy);
+    return true;
+  }
+
+  /**
+   * The start of a move that changed nothing but where this subtree sits:
+   * the same size, somewhere else, in a bounded frame's layout diff that no
+   * shift is riding already. The walk below then runs with the diff's
+   * `shift` set to the move, so every descendant that lands where it was
+   * plus the move claims nothing — and one that lands anywhere else claims
+   * both ends of its own, as under a scroll blit (issue #398).
+   *
+   * What the subtree is owed instead is two claims: where its pixels were,
+   * and where they went (`_claimRigidMove`). Walked node by node, a moved
+   * card of fifty widgets claimed a hundred rects, the frame's cap merged
+   * them into their box, and the box of pieces reaching past every clipping
+   * ancestor was the whole window — a panned layer of such cards made every
+   * step of the pan a full repaint, header and all.
+   *
+   * Null when the move is not of that kind, or no diff is listening; the
+   * walk is then the plain one.
+   */
+  _beginRigidMove(x, y, width, height) {
+    if (!layoutDiff.sink || layoutDiff.shift) return null;
+    const old = this.abs;
+    if (width !== old.width || height !== old.height) return null;
+    if (x === old.x && y === old.y) return null;
+    if (!(old.width > 0 && old.height > 0)) return null;
+    if (this.hidden || this.style?.display === 'none') return null;
+    // a placement moves it again after the walk (src/nodes/position.js)
+    if (this.root?._placedNodes?.has(this)) return null;
+    const shift = { x: x - old.x, y: y - old.y };
+    // before anything under it moves: every pixel it had
+    const was = this.paintBounds();
+    layoutDiff.shift = shift;
+    // Carried by an element's blit (`scrollContents`'s riders), when the
+    // move is the blit's own: then the pixels inside its rect are moved
+    // for it, and only what lies outside is owed.
+    const contents = this._ridesBlitOf?._pendingBlitContents;
+    const carried =
+      contents && contents.dx === shift.x && contents.dy === shift.y
+        ? contents.rect
+        : null;
+    return { sink: layoutDiff.sink, was, shift, carried };
+  }
+
+  /**
+   * Both ends of a rigid move, each clipped to what the clipping ancestors
+   * let reach the surface. The far end is the near one moved: every
+   * descendant that rode the move is inside it, and one that did not has
+   * claimed where it went itself.
+   *
+   * Named for the node that moved, which is what sends each claim to the
+   * lists that paint it (`_paneReach`): the panes alone inside a
+   * `<glarea>`, both for a subtree holding one.
+   */
+  _claimRigidMove({ sink, was, shift, carried }) {
+    const root = this.root;
+    const to = {
+      x: was.x + shift.x,
+      y: was.y + shift.y,
+      width: was.width,
+      height: was.height,
+    };
+    if (carried) {
+      // Straight to the window's list rather than through the diff, whose
+      // claims read as "this frame is not a pure scroll": what is outside
+      // the rect is beside it, and the blit stands.
+      const cap = root._damageRectCap();
+      for (const end of [was, to]) {
+        const clipped = this._clippedByAncestors(end);
+        if (!clipped) continue;
+        for (const piece of outside(clipped, carried)) {
+          root._claimLayoutMove(piece, this, cap);
+        }
+      }
       return;
     }
-    for (const child of this.children) {
-      if (!child.isWindow) child.absolutize(this.abs.x, this.abs.y);
+    const from = this._clippedByAncestors(was);
+    if (from) sink(from, this);
+    const at = this._clippedByAncestors(to);
+    if (at) sink(at, this);
+  }
+
+  /**
+   * `rect` less whatever the ancestors that clip their children cut away,
+   * up to the window: pixels outside one never reach the surface, so a
+   * claim of them repaints what cannot change. Null when nothing is left.
+   * Each clip is the whole pixels the ancestor's box touches — its clip
+   * antialiases a fractional edge over the pixel it cuts, and on a box on
+   * whole pixels cuts exactly; a clip it skips is one nothing inside
+   * reaches (`_childrenCanOverflow`).
+   */
+  _clippedByAncestors(rect) {
+    let out = rect;
+    for (let n = this.parent; n && out; n = n.parent) {
+      if (n.isWindow) break;
+      if (!n.clipsChildren()) continue;
+      out = intersectRects(out, outerPixels(n.abs));
     }
+    return out;
   }
 
   /**

package/src/nodes/layouthost.js

@@ -415,6 +415,7 @@ export class NodeLayoutHost {
       // content floors were measured from, as any style change is
       root._floorsDirty = true;
       root._floorsContentDirty = true;
+      root._floorsUnscoped = true;
     }
   }
 
@@ -944,6 +945,7 @@ export class WindowLayoutHost {
     this._failedHosts.clear();
     this._floorsDirty = true;
     this._floorsContentDirty = true;
+    this._floorsUnscoped = true;
     return true;
   }
 }

package/src/nodes/node.js

@@ -140,6 +140,9 @@ export class Node {
     // palette with one against the app's own — and none of those is a
     // *change* the user saw, so no transition may start from it.
     this._placed = false;
+    // the element whose pending `scrollContents` carries this node's pixels
+    // this frame (src/nodes/scrollblit.js), or null
+    this._ridesBlitOf = null;
     // the loops this node's style declares, whether or not they are running
     this._loops = null;
     // `resolvedTextStyle()`'s cache: this node's own text style over what it
@@ -623,8 +626,12 @@ export class Node {
       // subtree here, before and after, would be the repaint the overlay
       // exists to skip — and the pass claims both ends of the move itself
       // whenever the overlay cannot move the pixels.
+      //
+      // …and so is a node an element's pan carries (`scrollContents`'s
+      // riders): its pixels move with the region the frame blits, and the
+      // pass claims what they leave outside it (src/nodes/layout.js).
       if (
-        this.parent?.isGlArea &&
+        (this.parent?.isGlArea || this._ridesBlitOf !== null) &&
         moved &&
         !this.paintChanged(newProps, prev)
       ) {

package/src/nodes/queries.js

@@ -196,6 +196,7 @@ export class NodeQueries {
       if (applyLayoutStyle(this.yoga, this.style, before) && this.root) {
         this.root._floorsDirty = true;
         this.root._floorsContentDirty = true;
+        this.root._floorsSources.add(this);
       }
     }
   }
@@ -233,6 +234,7 @@ export class WindowQueries {
     // a query block may carry layout properties, so the floors measured from
     // the styles it is replacing are not the answer any more
     this._floorsDirty = true;
+    this._floorsUnscoped = true;
     for (const node of [...this._sizeQueryNodes]) {
       if (node.destroyed) this._sizeQueryNodes.delete(node);
       else node._sizeQueriesChanged();
@@ -324,7 +326,10 @@ export class WindowQueries {
     // a block may carry layout properties, so the floors measured from the
     // styles it is replacing are not the answer any more — the same debt a
     // window query leaves (`_resolveSizeQueries`)
-    if (changed) this._floorsDirty = true;
+    if (changed) {
+      this._floorsDirty = true;
+      this._floorsUnscoped = true;
+    }
     return changed;
   }
 }

package/src/nodes/rects.js

@@ -34,6 +34,19 @@ export function innerPixels(rect) {
   return { x, y, width: right - x, height: bottom - y };
 }
 
+/** The whole pixels `rect` touches — a fractional edge taken whole, which is
+ * where antialiasing can put ink. */
+export function outerPixels(rect) {
+  const x = Math.floor(rect.x);
+  const y = Math.floor(rect.y);
+  return {
+    x,
+    y,
+    width: Math.ceil(rect.x + rect.width) - x,
+    height: Math.ceil(rect.y + rect.height) - y,
+  };
+}
+
 /** The overlap of two rects, or null when they have none. */
 export function intersectRects(a, b) {
   const x = Math.max(a.x, b.x);

package/src/nodes/scrollable.js

@@ -144,14 +144,28 @@ export const Scrollable = (Base) =>
     absolutize(originX, originY) {
       this._placed = true;
       if (!this.yoga) return;
-      this._assignAbs(
-        originX + this.yoga.getComputedLeft(),
-        originY + this.yoga.getComputedTop(),
-        this.yoga.getComputedWidth(),
-        this.yoga.getComputedHeight(),
-      );
-      if (this.props.onLayout) this._reportLayout();
-      this._absolutizeChildren(this.abs.x, this.abs.y);
+      const x = originX + this.yoga.getComputedLeft();
+      const y = originY + this.yoga.getComputedTop();
+      const width = this.yoga.getComputedWidth();
+      const height = this.yoga.getComputedHeight();
+      // a box that moved and changed nothing else claims where it was and
+      // where it went, once — not once per node inside it (`Node`'s)
+      const wasX = this.abs.x;
+      const wasY = this.abs.y;
+      const move = this._beginRigidMove(x, y, width, height);
+      try {
+        this._assignAbs(x, y, width, height);
+        if (this.props.onLayout) this._reportLayout();
+        this._absolutizeChildren(
+          this.abs.x,
+          this.abs.y,
+          this.abs.x - wasX,
+          this.abs.y - wasY,
+        );
+      } finally {
+        if (move) layoutDiff.shift = null;
+      }
+      if (move) this._claimRigidMove(move);
     }
 
     /**
@@ -159,8 +173,11 @@ export const Scrollable = (Base) =>
      * Split out of `absolutize` because a `<window>` writes its own `abs`
      * during flush and then walks its children from (0, 0) — the same walk,
      * reached by a different route.
+     *
+     * `dx`/`dy` is how far this box moved in this pass, which is how far a
+     * child yoga did not lay out again moves with it (`_followParent`).
      */
-    _absolutizeChildren(originX, originY) {
+    _absolutizeChildren(originX, originY, dx = 0, dy = 0) {
       if (!this.isScroller()) {
         // a layout host's children go where its algorithm put them
         if (this._host !== null) {
@@ -168,7 +185,8 @@ export const Scrollable = (Base) =>
           return;
         }
         for (const child of this.children) {
-          if (!child.isWindow) child.absolutize(originX, originY);
+          if (child.isWindow || child._followParent(dx, dy)) continue;
+          child.absolutize(originX, originY);
         }
         return;
       }

package/src/nodes/scrollblit.js

@@ -20,6 +20,7 @@ import {
   cornerSquaresOverlap,
   rectsOverlap,
 } from './rects.js';
+import { isPaintedColor } from './boxpaint.js';
 import { scrollbarTrackRect } from './scrollbars.js';
 import { debugPaint } from './window/debugpaint.js';
 
@@ -336,11 +337,22 @@ export class NodeScrollBlit {
    * and claims it as ordinary damage. Those claims land beside the rect and
    * the frame stays a blit.
    *
+   * `riders` are the other way round: nodes that are not this one whose
+   * pixels in `rect` are part of what moves — a layer of widgets an element
+   * lays out over its own drawing and pans with it (a graph's node bodies).
+   * Each is to move by exactly (dx, dy) in this frame's layout pass and to
+   * change nothing else. Doing that, it does not decline the blit by being
+   * over the rect, its commit claims nothing, and its move claims only
+   * what it leaves or reaches outside the rect (`_claimRigidMove`) — so
+   * keep what it can paint inside the element's box, a box that clips it
+   * being the way. Doing anything else, it is claimed like any other node,
+   * which declines the blit; the rect then repaints, riders and all.
+   *
    * Returns whether the frame is still a blit candidate. The real answer
    * arrives as `paintDamage()`, because most of the gates cannot be decided
    * until the frame closes; a `false` here is only the ones that can.
    */
-  scrollContents(rect, dx, dy) {
+  scrollContents(rect, dx, dy, riders) {
     const root = this.root;
     if (
       !root ||
@@ -403,6 +415,13 @@ export class NodeScrollBlit {
     // coalescing scrollTo gets from recording an origin
     state.dx += dx;
     state.dy += dy;
+    if (riders) {
+      for (const rider of riders) {
+        if (!rider || rider === this || rider.destroyed) continue;
+        (state.riders ??= new Set()).add(rider);
+        rider._ridesBlitOf = this;
+      }
+    }
     this._pendingBlitFrom ??= BLIT_CONTENTS;
     (root._pendingScrolls ??= new Set()).add(this);
     // ...and the claim about to be recorded is the shift itself, not a
@@ -426,15 +445,34 @@ export class NodeScrollBlit {
    * own, leave `_blitKeptDamage` a damage rect many times the viewport to
    * refuse. Null when the clip left nothing.
    *
-   * Only while a blit is pending — outside that this is `paintBounds()` and
-   * one property read. Clipping every claim to every clipping ancestor
-   * would be correct too, and is a bigger change than the frame this is
-   * about.
+   * And clipped to every other clipping ancestor too, for the same reason
+   * without the blit: a claim past an `overflow: 'hidden'` box repaints
+   * pixels nothing inside it can reach. A layer of cards panned inside a
+   * clipped graph pane reaches past the pane on every side, and its
+   * claims, unclipped, were the whole window.
    */
   _claimBounds() {
     const bounds = this.paintBounds();
     const sv = this._blitViewport();
-    return sv ? intersectRects(bounds, sv.paintBounds()) : bounds;
+    const clipped = sv ? intersectRects(bounds, sv.paintBounds()) : bounds;
+    return clipped && this._clippedByAncestors(clipped);
+  }
+
+  /**
+   * Whether this node puts no pixels of its own on the surface — a plain
+   * box with no fill, border, shadow or outline, holding what is under it
+   * and nothing more. Conservative: anything but a box answers false.
+   */
+  _paintsNothingOwn() {
+    if (this.kind !== 'box' || this.isScroller?.()) return false;
+    const style = this.style ?? EMPTY_STYLE;
+    if (isPaintedColor(style.backgroundColor) || style.backgroundImage) {
+      return false;
+    }
+    if (style.opacity !== undefined && style.opacity < 1) return false;
+    if (this._outlineExtent() > 0 || this._shadowExtent() > 0) return false;
+    const bw = resolveBorderWidths(style, this.direction);
+    return !(bw.top > 0 || bw.right > 0 || bw.bottom > 0 || bw.left > 0);
   }
 
   /** The scroll container above this node that is waiting to blit, if there
@@ -473,6 +511,10 @@ export class WindowScrollBlit {
     const contents = nodes[0]._pendingBlitContents;
     const ledger = nodes[0]._blitLedger;
     for (const n of nodes) {
+      // the pass that needed them is over: a rider is a rider for a frame
+      for (const rider of n._pendingBlitContents?.riders ?? []) {
+        if (rider._ridesBlitOf === n) rider._ridesBlitOf = null;
+      }
       n._pendingBlitFrom = null;
       n._pendingBlitContents = null;
       n._blitLedger = null;
@@ -801,7 +843,13 @@ export class WindowScrollBlit {
    * balloon back towards the whole viewport. With no bars the L is two
    * disjoint rects and stays two.
    */
-  _applyContentsBlit(node, { rect: vp, dx, dy }, width, height, target) {
+  _applyContentsBlit(
+    node,
+    { rect: vp, dx, dy, riders },
+    width,
+    height,
+    target,
+  ) {
     // only a whole-pixel shift of a whole-pixel region is a copy
     if (!isIntegerRect(vp)) return;
     if (!Number.isInteger(dx) || !Number.isInteger(dy)) return;
@@ -870,7 +918,7 @@ export class WindowScrollBlit {
     ) {
       return;
     }
-    if (!this._scrollBlitSafe(node, shifted, target.top)) return;
+    if (!this._scrollBlitSafe(node, shifted, target.top, riders)) return;
     // the element's deltas are already how far the pixels moved, the sense
     // scrollRegion takes (0 + x rather than x: a caller's -0 would survive
     // into request buffers and test comparisons)
@@ -954,7 +1002,7 @@ export class WindowScrollBlit {
    * only its own children — what the window draws under the surface was
    * never in the pane's pixels.
    */
-  _scrollBlitSafe(scroller, vp, top = this) {
+  _scrollBlitSafe(scroller, vp, top = this, riders = null) {
     // the window itself scrolls: everything inside it *is* the scrolled
     // content, so there is nothing that could be dragged along
     if (scroller === this) return true;
@@ -1012,7 +1060,14 @@ export class WindowScrollBlit {
         // be dragged along — a pulsing toast over a list is what promotion
         // is for, and this is the half of it that keeps the pan a blit.
         if (child._promoted) continue;
-        if (rectsOverlap(child._subtreeBounds(), vp)) return false;
+        // …and a node the blit carries has pixels that move with it
+        // (`scrollContents`'s riders)
+        if (riders?.has(child)) continue;
+        if (!rectsOverlap(child._subtreeBounds(), vp)) continue;
+        // A box that paints nothing of its own is its children, and as
+        // safe as they are: the box that clips a rider to its element.
+        if (child._paintsNothingOwn() && check(child)) continue;
+        return false;
       }
       return true;
     };

package/src/nodes/window/floors.js

@@ -197,6 +197,88 @@ export function collectFloorStale(node, stale, found, sweep) {
   }
 }
 
+/**
+ * Whether `node` is a box its content cannot size and its surroundings cannot
+ * size either — an edge a floor measurement may stop at
+ * (`WindowNode._floorsScope`).
+ *
+ * Absolutely positioned, with a width and a height its style names as
+ * numbers: it is out of its parent's flow, so nothing measured inside it
+ * reaches anything above it (`contentSpan` skips it, and no floor is written
+ * on it), and every pass lays it out at those numbers wherever it sits, so
+ * what is inside it is measured the same in a pass over the window and in a
+ * pass over it alone. Nothing in its own box resolves against its parent —
+ * a percentage of padding would — and neither it nor its parent is a layout
+ * host, whose children are measured tree by tree.
+ *
+ * A card on a graph, a popover laid out inside the window, a sized overlay:
+ * the boxes a change inside is most often confined to. An in-flow box with a
+ * size of its own would do as well along its cross axis, but on its main
+ * axis a flex line can grow it past its width or shrink it under a minimum
+ * the author named, and that is a question about its siblings.
+ */
+export function isFloorBoundary(node) {
+  const style = node.style;
+  return (
+    node.yoga != null &&
+    !node.isWindow &&
+    style.position === 'absolute' &&
+    style.display !== 'none' &&
+    typeof style.width === 'number' &&
+    typeof style.height === 'number' &&
+    typeof style.minWidth !== 'string' &&
+    typeof style.minHeight !== 'string' &&
+    typeof style.maxWidth !== 'string' &&
+    typeof style.maxHeight !== 'string' &&
+    !PADDINGS.some((key) => typeof style[key] === 'string') &&
+    node._host === null &&
+    (node.parent?._host ?? null) === null
+  );
+}
+
+const PADDINGS = [
+  'padding',
+  'paddingTop',
+  'paddingRight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingHorizontal',
+  'paddingVertical',
+  'paddingStart',
+  'paddingEnd',
+];
+
+/**
+ * The box that holds a change to `node` in (`isFloorBoundary`), or null when
+ * none does below `root`. Looked for from the parent up: a node that changed
+ * may have changed its own size, and it is what is *around* the change that
+ * has to hold still.
+ */
+export function floorBoundaryOf(node, root) {
+  for (let n = node.parent; n && n !== root; n = n.parent) {
+    if (n.isWindow) return null;
+    if (isFloorBoundary(n)) return n;
+  }
+  return null;
+}
+
+/**
+ * Whether yoga has a change on record anywhere but inside `boundaries` and on
+ * the way down to them (`paths`) — something that changed with no node
+ * saying so, which a measurement confined to the boundaries would miss. A
+ * dirty node's ancestors are dirty too, so the walk goes down dirty nodes
+ * only, and a clean one has nothing under it to find.
+ */
+export function dirtyOutside(node, boundaries, paths) {
+  for (const child of node.children) {
+    if (!child.yoga || child.isWindow || !child.yoga.isDirty()) continue;
+    if (boundaries.has(child)) continue;
+    if (!paths.has(child)) return true;
+    if (dirtyOutside(child, boundaries, paths)) return true;
+  }
+  return false;
+}
+
 /**
  * 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.
@@ -216,7 +298,7 @@ export function collectFloorStale(node, stale, found, sweep) {
  * the pixel grid off and the real one with it on, so the same layout reads
  * a fraction apart between them.
  */
-export function probeHeightFloors(node, root, hit) {
+export function probeHeightFloors(node, root, hit, stop = root) {
   for (const child of node.children) {
     if (!child.yoga || child.isWindow) continue;
     if (child.style.display === 'none') continue;
@@ -230,10 +312,10 @@ export function probeHeightFloors(node, root, hit) {
         at !== undefined &&
         child._heightForWidth(width) !== child._heightForWidth(at)
       ) {
-        markHeightStale(child, root, hit);
+        markHeightStale(child, root, hit, stop);
       }
     } else {
-      probeHeightFloors(child, root, hit);
+      probeHeightFloors(child, root, hit, stop);
     }
     // 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
@@ -241,10 +323,12 @@ export function probeHeightFloors(node, root, hit) {
   }
 }
 
-/** A leaf whose height moved takes every extent above it with it. */
-function markHeightStale(node, root, hit) {
+/** A leaf whose height moved takes every extent above it with it — up to
+ *  `stop`, a box that sizes itself (`isFloorBoundary`), whose extent is its
+ *  style's whatever moved inside it. */
+function markHeightStale(node, root, hit, stop = root) {
   hit.marked = true;
-  for (let n = node; n && n !== root; n = n.parent) {
+  for (let n = node; n && n !== stop; n = n.parent) {
     if (n._floorH === undefined) continue;
     n._floorH = undefined;
     root._floorsStale.add(n);

package/src/nodes/window/size.js

@@ -4,9 +4,12 @@
 
 import { measuringExactly } from '../../styles.js';
 import { availableArea } from '../../screens.js';
+import { Yoga } from '../../yoga.js';
 import {
   captureLeafHeights,
   collectFloorStale,
+  dirtyOutside,
+  floorBoundaryOf,
   probeHeightFloors,
   setMeasuringShrink,
   restoreShrink,
@@ -27,6 +30,26 @@ import {
   scaleWindowGeometry,
 } from './hints.js';
 
+// Escape hatch, read once like the others: for measuring the scoped floors
+// against the whole-tree ones on the same build, and as first aid if a
+// change inside a card is ever measured wrong. `=== '1'` for the reason
+// 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);
+}
+
 /** Content-sized windows, installed onto `WindowNode.prototype` by window.js. */
 export class WindowSize {
   /**
@@ -102,6 +125,21 @@ export class WindowSize {
     this._sweepLayoutHosts();
     const found = { width: false, height: false };
     this._floorsStale.clear();
+    // Decided afresh on every call rather than once a frame: something
+    // between the two calls a frame makes — a size query resolving — can
+    // turn a scoped change into one that is not, and the wider collection
+    // is the one that is always right.
+    const scope = this._floorsScope();
+    this._floorsScopeNow = scope;
+    if (scope !== null) {
+      for (const boundary of scope) {
+        // its children's floors are written from here; its own extent is
+        // its style's, and stands
+        this._floorsStale.add(boundary);
+        collectFloorStale(boundary, this._floorsStale, found, false);
+      }
+      return found;
+    }
     // the root's own children are written from here too, and its direction
     // can move like any node's
     this._floorsStale.add(this);
@@ -109,6 +147,123 @@ export class WindowSize {
     return found;
   }
 
+  /**
+   * The boxes the changes since the last measurement are confined to, or
+   * null when a measurement has to look at the whole tree.
+   *
+   * Every change to a box tree announces itself through `invalidate` with
+   * the node it changed (`_floorsSources`), and every node above it is
+   * dirty in yoga for it — which is all `collectFloorStale` can see, so a
+   * text that changed inside a card took every extent from the card up to
+   * the window with it, and the measurement that followed laid the whole
+   * tree out three times to read them back. A box that sizes itself
+   * (`isFloorBoundary`) holds the change in: its extent is its style's, the
+   * extents above it are what they were, and what is inside it can be
+   * measured by laying it out alone.
+   *
+   * Scoped only when all of that is known to hold: every change has such a
+   * box around it, yoga has nothing dirty outside them and the way down to
+   * them (a change nobody named), the tree has been measured once already,
+   * the window is the width it was measured at and sizes itself from no
+   * content, and no layout host or container query is in play. Anything
+   * else is the whole tree, as it always was.
+   */
+  _floorsScope() {
+    const sources = this._floorsSources;
+    if (
+      NO_SCOPED_FLOORS ||
+      this._floorsUnscoped ||
+      sources.size === 0 ||
+      !this._floorsSwept ||
+      this._layoutHosts.size !== 0 ||
+      this._containerQueryNodes.size !== 0 ||
+      this._floorsWidth !== (this.window?.width ?? this._requestedSize?.width)
+    ) {
+      return null;
+    }
+    const props = this.props;
+    if (
+      isAutoSize(props.width) ||
+      isAutoSize(props.height) ||
+      CONTENT_BOUND_PROPS.some((key) => isContentBound(props[key]))
+    ) {
+      return null;
+    }
+    const boundaries = new Set();
+    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 (boundaries.size === 0) return null;
+    // the outermost of nested ones: measuring it measures what it holds
+    const paths = new Set();
+    for (const boundary of [...boundaries]) {
+      for (let n = boundary.parent; n && n !== this; n = n.parent) {
+        if (boundaries.has(n)) {
+          boundaries.delete(boundary);
+          break;
+        }
+      }
+    }
+    for (const boundary of boundaries) {
+      for (let n = boundary.parent; n && n !== this; n = n.parent) {
+        paths.add(n);
+      }
+    }
+    if (dirtyOutside(this, boundaries, paths)) return null;
+    return boundaries;
+  }
+
+  /**
+   * One boundary's floors, measured with it laid out alone — the passes
+   * `_measureContentSpans` runs over the whole tree, run over the box: its
+   * size is its style's in either, so the space everything inside it is
+   * laid out in is the same. `probe` is the height measurement's check for
+   * leaves whose width moved, stopped at the box, whose own extent stands.
+   */
+  _measureBoundary(boundary, axis, probe = false) {
+    const yoga = boundary.yoga;
+    const dir =
+      boundary.direction === 'rtl' ? Yoga.DIRECTION_RTL : Yoga.DIRECTION_LTR;
+    if (axis === 'width') {
+      const shrunk = [];
+      setMeasuringShrink(boundary, axis, shrunk);
+      this._scopedFloorPasses += 1;
+      yoga.calculateLayout(undefined, undefined, dir);
+      contentSpan(boundary, axis, null, this);
+      restoreShrink(shrunk);
+      relayOut(boundary);
+      return;
+    }
+    this._scopedFloorPasses += 1;
+    yoga.calculateLayout(undefined, undefined, dir);
+    if (probe) {
+      const hit = { marked: false, owed: false };
+      probeHeightFloors(boundary, this, hit, boundary);
+      if (hit.marked) {
+        this._writeFloors('height');
+        this._scopedFloorPasses += 1;
+        yoga.calculateLayout(undefined, undefined, dir);
+      }
+    }
+    const intrinsic = new Map();
+    captureLeafHeights(boundary, intrinsic);
+    const frozen = [];
+    freezeWidths(boundary, frozen);
+    const shrunk = [];
+    setMeasuringShrink(boundary, axis, shrunk);
+    this._scopedFloorPasses += 1;
+    yoga.calculateLayout(undefined, 0, dir);
+    contentSpan(boundary, axis, intrinsic, this);
+    restoreWidths(frozen);
+    restoreShrink(shrunk);
+    relayOut(boundary);
+  }
+
   /** The floors on the children of every node found stale, from the extents
    *  they carry — `writeFloors` for each. */
   _writeFloors(axis) {
@@ -203,28 +358,77 @@ export class WindowSize {
    */
   _applyContentFloors(width, height) {
     const found = this._collectFloorStale();
+    const scope = this._floorsScopeNow;
+    if (scope !== null) {
+      this._applyScopedFloors(scope, found, width, height);
+    } else {
+      measuringExactly(() => {
+        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;
+    this._floorsSources.clear();
+    this._floorsUnscoped = false;
+    this._floorsScopeNow = null;
+  }
+
+  /**
+   * `_applyContentFloors` for changes confined to boxes that size
+   * themselves (`_floorsScope`): the same measurements in the same order,
+   * each over one box laid out alone rather than over the window, and the
+   * window's one real pass after them — which yoga answers from its cache
+   * everywhere but the boxes and the way down to them.
+   */
+  _applyScopedFloors(boundaries, found, width, height) {
     measuringExactly(() => {
-      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
+      if (found.width) {
+        this._writeFloors('width');
+        for (const boundary of boundaries) {
+          this._measureBoundary(boundary, 'width');
+        }
+      }
+      this._writeFloors('width');
       this._writeFloors('height');
     });
     let heights = found.height;
     let probed = false;
     if (!heights) {
       this._layoutRoot(width, height);
-      heights = this._probeHeightFloors().owed;
+      const hit = { marked: false, owed: false };
+      for (const boundary of boundaries) {
+        probeHeightFloors(boundary, this, hit, boundary);
+      }
+      heights = hit.owed;
       probed = true;
     }
     if (heights) {
-      measuringExactly(() => this._measureHeightFloors(width, !probed));
+      measuringExactly(() => {
+        this._writeFloors('height');
+        for (const boundary of boundaries) {
+          this._measureBoundary(boundary, 'height', !probed);
+        }
+        this._writeFloors('height');
+      });
       this._layoutRoot(width, height);
     }
-    this._floorsDirty = false;
-    this._floorsContentDirty = false;
-    this._floorsSwept = true;
-    this._floorsWidth = width;
   }
 
   /**

package/src/nodes/window/window.js

@@ -267,6 +267,12 @@ export class WindowNode extends Scrollable(Node) {
     this._floorsDirty = true;
     this._floorsWidth = null;
     this._floorsStale = new Set();
+    // the nodes whose changes the next measurement owes, and whether one
+    // came with no node to name (`_floorsScope`)
+    this._floorsSources = new Set();
+    this._floorsUnscoped = false;
+    this._floorsScopeNow = null;
+    this._scopedFloorPasses = 0;
     // whether the first floors pass has run (`collectFloorStale`'s sweep)
     this._floorsSwept = false;
     this._floorsMeasured = 0;

package/src/paintcache.js

@@ -83,19 +83,26 @@ const MAX_ITEM_PIXELS = 256 * 256;
  * grow this forever; the cost of forgetting is one extra live paint. */
 const MAX_PENDING = 4096;
 
-/** Whether a context is drawing 1:1 into device space.
- *
- * A cached surface is pixels at a fixed size and orientation. Under a scaled
- * or rotated CTM, compositing it would *resample* those pixels where a live
- * paint would re-rasterize at the right size, so the cache has to stand
- * aside. react-x11 only ever translates during paint, and only inside
- * `<canvas>`, so this is insurance rather than a live case.
+/**
+ * Whether `ctx` draws on the device's pixel grid, wherever its origin is: a
+ * surface rendered at device resolution composites through it pixel for
+ * pixel. An integer translation keeps that — and it is how an overlay pane
+ * over a `<glarea>` draws, from the window's coordinates into its layer's
+ * (src/win32/overlay.js) — so declining it painted every cached drawing on a
+ * surface's children live, every time a pane repainted: every card of a
+ * graph, on every step of a pan. A scale, a rotation or a fraction of a
+ * pixel does not, and paints live.
  */
 function isDeviceSpace(ctx) {
   const m = ctx.getTransform?.();
   if (!m) return true;
   return (
-    m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1 && m.e === 0 && m.f === 0
+    m.a === 1 &&
+    m.b === 0 &&
+    m.c === 0 &&
+    m.d === 1 &&
+    Number.isInteger(m.e) &&
+    Number.isInteger(m.f)
   );
 }