react-x11 2.18.4 → 2.18.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.18.4",
+  "version": "2.18.6",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -103,14 +103,14 @@
   "dependencies": {
     "ical.js": "^2.2.1",
     "linebreak": "^1.1.0",
-    "ntk": "^8.9.0",
+    "ntk": "^8.10.0",
     "react-reconciler": "^0.34.0",
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
     "@windowkit/appkit": "^0.12.0",
     "@windowkit/wayland": "^3.1.1",
-    "@windowkit/win32": "^0.0.1",
+    "@windowkit/win32": "^0.0.2",
     "dbus-native": "^0.15.1",
     "x11-dri": "^0.9.0"
   },

package/src/Reconciler.js

@@ -7,7 +7,6 @@
 import { createRequire } from 'node:module';
 import React from 'react';
 import ReactReconciler from 'react-reconciler';
-import { createClient } from 'ntk';
 
 import {
   ConcurrentRoot,
@@ -22,6 +21,7 @@ import {
   flushWindowMaps,
   flushWindowRestacks,
 } from './nodes/window/window.js';
+import { loadNtk } from './ntkroot.js';
 import { PopupNode } from './nodes/window/popup.js';
 import { BoxNode } from './nodes/box.js';
 import { THEME_SCOPE } from './nodes/kinds.js';
@@ -629,6 +629,8 @@ function loadIntegrations() {
  * anyone hits and the least self-explanatory failure in the library.
  */
 async function connect(options) {
+  // ntk's root is the X11 backend's, and loads with it (src/ntkroot.js)
+  const { createClient } = await loadNtk();
   try {
     return await createClient(options);
   } catch (err) {
@@ -822,7 +824,12 @@ export async function createRoot(options = {}) {
   const win32Asked =
     rest.backend === 'win32' || process.env.REACT_X11_BACKEND === 'win32';
   const connecting = !owned
-    ? Promise.resolve(borrowed)
+    ? // an ntk app could only have come from ntk's own createClient: the
+      // root is imported already, and this hands it to the code that reads
+      // it synchronously (src/ntkroot.js)
+      isNtkApp(borrowed)
+      ? loadNtk().then(() => borrowed)
+      : Promise.resolve(borrowed)
     : backend === 'wayland'
       ? // Opt-in only, never through 'auto': X11 stays the default on Linux
         // because the remote case (docs/remote.md) is the flagship reason

package/src/backend/context2d.js

@@ -23,7 +23,7 @@
 // class keeps the JS-visible state (fillStyle strings, gradient objects,
 // dash arrays) and re-syncs it when the backing surface is replaced after a
 // resize — `_gen` is that generation.
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 const BLACK = [0, 0, 0, 1];
 
@@ -324,6 +324,17 @@ export class BackendContext2D {
     // chunked stroke leaves only its last chunk behind)
     this._cmds = [];
     this._pathStale = false;
+    // A bridge that takes a whole path in one call (`ctxPath`, the Windows
+    // bridge's) is handed it that way when something paints it: the verbs
+    // below only record. A graph's edges are tens of thousands of `lineTo`s
+    // a frame, and a call across the boundary for each was milliseconds of
+    // every frame spent on the crossing. A bridge without it is handed the
+    // path a point at a time, as it is built, exactly as before.
+    // Asked with `in` as well: a test's bridge that answers every name with
+    // a no-op must not look like one that takes paths whole.
+    this._bulkPaths =
+      'ctxPath' in native && typeof native.ctxPath === 'function';
+    this._pathBuf = null;
     this._strokeChunking = !NO_STROKE_CHUNKING;
   }
 
@@ -547,13 +558,36 @@ export class BackendContext2D {
 
   setLineDash(segments) {
     this._state.dash = Array.isArray(segments) ? segments : [];
-    this._native.ctxSetLineDash(this._s(), this._state.dash, 0);
+    // the offset is state of its own, and a new pattern keeps it
+    this._native.ctxSetLineDash(
+      this._s(),
+      this._state.dash,
+      this._state.dashOffset,
+    );
   }
 
   getLineDash() {
     return [...this._state.dash];
   }
 
+  /**
+   * Where along the pattern a stroke starts — the phase a marching dash
+   * moves. Missing here, a caller that asks `'lineDashOffset' in ctx` found
+   * no such thing and every stroke started its pattern at nought: the
+   * dashes of an animated edge were repainted sixteen times a second and
+   * never moved.
+   */
+  get lineDashOffset() {
+    return this._state.dashOffset;
+  }
+
+  set lineDashOffset(value) {
+    // canvas ignores anything that is not a finite number
+    if (typeof value !== 'number' || !Number.isFinite(value)) return;
+    this._state.dashOffset = value;
+    this._native.ctxSetLineDash(this._s(), this._state.dash, value);
+  }
+
   save() {
     // Sync before pushing: a fresh surface empties the stack on its way in,
     // and a state pushed ahead of that sync was lost to it — the first
@@ -670,6 +704,21 @@ export class BackendContext2D {
   _emit(surface, from, to) {
     const c = this._cmds;
     const n = this._native;
+    if (this._bulkPaths) {
+      // one call, through a buffer kept between paths — the record is the
+      // same stream the bridge parses, arguments and all
+      const count = to - from;
+      if (count <= 0) return;
+      let buf = this._pathBuf;
+      if (!buf || buf.length < count) {
+        buf = this._pathBuf = new Float64Array(
+          Math.max(count, (buf?.length ?? 512) * 2),
+        );
+      }
+      for (let i = 0; i < count; i++) buf[i] = c[from + i];
+      n.ctxPath(surface, buf.subarray(0, count));
+      return;
+    }
     for (let i = from; i < to;) {
       const op = c[i];
       const a = i + 1;
@@ -720,26 +769,44 @@ export class BackendContext2D {
 
   beginPath() {
     this._cmds.length = 0;
+    if (this._bulkPaths) {
+      this._s();
+      // uploaded, empty or not, when something paints it
+      this._pathStale = true;
+      return;
+    }
     this._pathStale = false;
     this._native.ctxBeginPath(this._s());
   }
 
+  /**
+   * The surface to add a path command to now, or null where the path is
+   * only recorded and handed over whole when painted (`_bulkPaths`). Either
+   * way a fresh surface drops the path first, as `_s` has always done.
+   */
+  _pathFor() {
+    if (!this._bulkPaths) return this._path();
+    this._s();
+    this._pathStale = true;
+    return null;
+  }
+
   moveTo(x, y) {
-    const surface = this._path();
+    const surface = this._pathFor();
     this._cmds.push(P_MOVE, x, y);
-    this._native.ctxMoveTo(surface, x, y);
+    if (surface !== null) this._native.ctxMoveTo(surface, x, y);
   }
 
   lineTo(x, y) {
-    const surface = this._path();
+    const surface = this._pathFor();
     this._cmds.push(P_LINE, x, y);
-    this._native.ctxLineTo(surface, x, y);
+    if (surface !== null) this._native.ctxLineTo(surface, x, y);
   }
 
   rect(x, y, w, h) {
-    const surface = this._path();
+    const surface = this._pathFor();
     this._cmds.push(P_RECT, x, y, w, h);
-    this._native.ctxRect(surface, x, y, w, h);
+    if (surface !== null) this._native.ctxRect(surface, x, y, w, h);
   }
 
   roundRect(x, y, w, h, radii) {
@@ -750,7 +817,7 @@ export class BackendContext2D {
     else if (r.length === 3) r = [r[0], r[1], r[2], r[1]];
     const cap = Math.min(Math.abs(w) / 2, Math.abs(h) / 2);
     const clamp = (v) => Math.max(0, Math.min(Number(v) || 0, cap));
-    const surface = this._path();
+    const surface = this._pathFor();
     const [r0, r1, r2, r3] = [
       clamp(r[0]),
       clamp(r[1]),
@@ -758,37 +825,40 @@ export class BackendContext2D {
       clamp(r[3]),
     ];
     this._cmds.push(P_ROUND, x, y, w, h, r0, r1, r2, r3);
-    this._native.ctxRoundRect(surface, x, y, w, h, r0, r1, r2, r3);
+    if (surface !== null)
+      this._native.ctxRoundRect(surface, x, y, w, h, r0, r1, r2, r3);
   }
 
   arc(x, y, radius, start, end, anticlockwise = false) {
-    const surface = this._path();
+    const surface = this._pathFor();
     this._cmds.push(P_ARC, x, y, radius, start, end, anticlockwise ? 1 : 0);
-    this._native.ctxArc(surface, x, y, radius, start, end, anticlockwise);
+    if (surface !== null)
+      this._native.ctxArc(surface, x, y, radius, start, end, anticlockwise);
   }
 
   ellipse(x, y, rx, ry) {
-    const surface = this._path();
+    const surface = this._pathFor();
     this._cmds.push(P_ELLIPSE, x, y, rx, ry);
-    this._native.ctxEllipse(surface, x, y, rx, ry);
+    if (surface !== null) this._native.ctxEllipse(surface, x, y, rx, ry);
   }
 
   bezierCurveTo(c1x, c1y, c2x, c2y, x, y) {
-    const surface = this._path();
+    const surface = this._pathFor();
     this._cmds.push(P_CURVE, c1x, c1y, c2x, c2y, x, y);
-    this._native.ctxCurveTo(surface, c1x, c1y, c2x, c2y, x, y);
+    if (surface !== null)
+      this._native.ctxCurveTo(surface, c1x, c1y, c2x, c2y, x, y);
   }
 
   quadraticCurveTo(cx, cy, x, y) {
-    const surface = this._path();
+    const surface = this._pathFor();
     this._cmds.push(P_QUAD, cx, cy, x, y);
-    this._native.ctxQuadTo(surface, cx, cy, x, y);
+    if (surface !== null) this._native.ctxQuadTo(surface, cx, cy, x, y);
   }
 
   closePath() {
-    const surface = this._path();
+    const surface = this._pathFor();
     this._cmds.push(P_CLOSE);
-    this._native.ctxClosePath(surface);
+    if (surface !== null) this._native.ctxClosePath(surface);
   }
 
   // --- painting ------------------------------------------------------------

package/src/cocoa/app.js

@@ -16,7 +16,7 @@
 // (`_routeBatch`) with no pump at all (docs/macos.md §"JS on a worker").
 import { isMainThread } from 'node:worker_threads';
 
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 import { deliverActivate, deliverOpen } from '../application.js';
 import { flushPendingFrames } from '../frames.js';

package/src/cocoa/fonts.js

@@ -26,7 +26,8 @@ import { readFileSync } from 'node:fs';
 import { inflateSync } from 'node:zlib';
 
 import LineBreaker from 'linebreak';
-import { cssColorStraight, Font } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
+import Font from 'ntk/font';
 
 import { loadNative } from './native.js';
 

package/src/cocoa/presenter.js

@@ -24,7 +24,7 @@
 // named repaints everything" rule the X11 damage model has), and geometry
 // is re-diffed every frame because comparing four numbers is cheaper than
 // knowing.
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 import { Node } from '../nodes/node.js';
 import { addDamageRect, damageToPaint } from '../nodes/damage.js';

package/src/decorations.js

@@ -34,7 +34,7 @@
 // derives is the padding a coverage surface has to carry. Both are pure
 // functions — no connection, nothing drawn — so this module stays testable
 // without a server.
-import { shadowReach, shadowSigma } from 'ntk';
+import { shadowReach, shadowSigma } from 'ntk/shadow-math';
 
 /** A number, with or without the `px` CSS wants and this vocabulary does not. */
 const LENGTH = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:px)?$/i;

package/src/fonts.js

@@ -37,7 +37,7 @@
 
 import { basename, extname } from 'node:path';
 
-import { Font } from 'ntk';
+import Font from 'ntk/font';
 
 /**
  * Per-app bookkeeping. Keyed on the app rather than stored on it, like

package/src/foreignnodes.js

@@ -30,7 +30,7 @@
 // save set, **never destroyed**. Destroying somebody else's window because a
 // React tree changed is the failure mode this element is most able to cause,
 // and `test/foreign.test.js` asserts against it first.
-import { XEMBED, XEmbedSocket } from 'ntk';
+import { x11Ntk } from './ntkroot.js';
 
 import { isFocusable } from './a11y.js';
 import { canEmbed } from './embedding.js';
@@ -161,6 +161,8 @@ export class ForeignNode extends Node {
     if (!canEmbed(this.app)) return this._refuse();
     const rect = this._geometry();
     this.rect = rect;
+    // `<foreign>` embeds on an X connection only, where ntk's root is loaded
+    const { XEmbedSocket } = x11Ntk('<foreign>');
     const socket = new XEmbedSocket(parent, {
       ...rect,
       // react-x11 has a focus manager; a socket that answered
@@ -318,6 +320,8 @@ export class ForeignNode extends Node {
   defaultFocus(info) {
     const socket = this.socket;
     if (!socket || !this.client) return;
+    // a socket is an X connection's, so ntk's root is loaded (src/ntkroot.js)
+    const { XEMBED } = x11Ntk('<foreign>');
     const time = lastInputTime(this.app);
     socket.activate(true, { time });
     const detail =
@@ -338,6 +342,7 @@ export class ForeignNode extends Node {
     if (!socket) return;
     const time = lastInputTime(this.app);
     if (this._focusSent) {
+      const { XEMBED } = x11Ntk('<foreign>');
       socket.send(XEMBED.FOCUS_OUT, 0, 0, 0, { time });
       this._focusSent = false;
     }

package/src/glbackend.js

@@ -19,7 +19,7 @@
 // `appcontext.js` (for `useSupports('shaders')`) and the node layer can use
 // it without the two importing each other.
 
-import { GLError } from 'ntk';
+import { GLError } from 'ntk/gl';
 
 /** Does this connection's policy ever choose the direct backend? */
 const wantsDirect = (app) => {

package/src/glnodes.js

@@ -5,7 +5,7 @@
 // (NEXT_STEPS §4), sized and positioned by the parent's yoga layout like any
 // other drawn node. Everything about the surface is here; the scene graph
 // that draws into it comes later (docs/glx-plan.md).
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 // re-exported so the GL element layer stays one import for consumers
 export { directGLFailure, hasDirectGL } from './glbackend.js';

package/src/gloverlay.js

@@ -60,7 +60,7 @@
 // A leaf module, like src/embedding.js: `appcontext.js` asks `canOverlay`
 // for `useSupports('glOverlay')`, and it imports nothing of ours but the
 // damage model's arithmetic, which imports nothing at all.
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 import { FULL_DAMAGE, addDamageRect } from './nodes/damage.js';
 import {
@@ -114,6 +114,18 @@ export function overlayRefusal(app) {
   return (app && refusals.get(app)) ?? null;
 }
 
+/**
+ * A backend saying nothing can be drawn over a GL surface on this app, and
+ * why: one whose child windows are not X windows, and that has no
+ * composited pane either — on Windows a window with a parent is a GL
+ * surface of its own (src/win32/glarea.js), and a bridge without layers has
+ * nothing else to offer. Before the first render, like `beginGlOverlay`, so
+ * `useSupports('glOverlay')` never changes its answer.
+ */
+export function refuseOverlay(app, reason) {
+  if (app) refusals.set(app, reason);
+}
+
 /**
  * Is this an X server where nothing can be drawn over a GL surface? Asked
  * in `createRoot`, with the other startup probes and before the first
@@ -654,35 +666,46 @@ export class GlOverlay {
   _paintPane(pane, passes) {
     const area = this.area;
     const root = area.root;
-    const ctx = pane.context();
-    if (!ctx || !root) return;
+    if (!root) return;
     // an opaque pane is filled with what the surface starts its frames from;
     // a composited one is cleared, and shows the frame itself
     const ground = pane.transparent ? null : groundOf(area.props);
-    ctx.save();
-    try {
-      ctx.translate(-pane.rect.x, -pane.rect.y);
-      for (const pass of passes) {
-        ctx.save();
-        try {
-          ctx.beginPath();
-          ctx.rect(pass.x, pass.y, pass.width, pass.height);
-          ctx.clip();
-          if (ground) {
-            ctx.fillStyle = ground;
-            ctx.fillRect(pass.x, pass.y, pass.width, pass.height);
-          } else {
-            ctx.clearRect(pass.x, pass.y, pass.width, pass.height);
-          }
-          root._paintDamage = pass;
-          area._paintChildren(ctx);
-        } finally {
-          root._paintDamage = null;
-          ctx.restore();
+    // one pass, drawn by a context in window coordinates
+    const paintPass = (ctx, pass) => {
+      ctx.save();
+      try {
+        ctx.beginPath();
+        ctx.rect(pass.x, pass.y, pass.width, pass.height);
+        ctx.clip();
+        if (ground) {
+          ctx.fillStyle = ground;
+          ctx.fillRect(pass.x, pass.y, pass.width, pass.height);
+        } else {
+          ctx.clearRect(pass.x, pass.y, pass.width, pass.height);
         }
+        root._paintDamage = pass;
+        area._paintChildren(ctx);
+      } finally {
+        root._paintDamage = null;
+        ctx.restore();
+      }
+    };
+    if (typeof pane.wnd.paintPasses === 'function') {
+      // A pane drawn a rect at a time — a DirectComposition surface hands
+      // out a context per `BeginDraw`, valid until `EndDraw` — opens each
+      // pass itself (src/win32/overlay.js), the way such a window takes its
+      // frame through `presentFrame`.
+      pane.wnd.paintPasses(passes, paintPass);
+    } else {
+      const ctx = pane.context();
+      if (!ctx) return;
+      ctx.save();
+      try {
+        ctx.translate(-pane.rect.x, -pane.rect.y);
+        for (const pass of passes) paintPass(ctx, pass);
+      } finally {
+        ctx.restore();
       }
-    } finally {
-      ctx.restore();
     }
     // A layer's contents are a copy the bitmap is pushed to; an X window's
     // backing store is blitted by ntk on its own, from the paint above

package/src/imagesource.js

@@ -6,7 +6,9 @@
 // and the `cacheKey` cache live here, where a test needs no server; the node
 // half in nodes/image.js is only lifecycle — when to resolve, when to claim
 // damage, when to let go.
-import { Image, Picture, decodeImage } from 'ntk';
+import { Image, decodeImage } from 'ntk/image';
+
+import { x11Ntk } from './ntkroot.js';
 
 /**
  * A client-side object the 2d context composites as-is: an ntk `Image` or
@@ -429,6 +431,7 @@ export class DrawableSource {
   picture() {
     if (!this._picture) {
       const Render = this.app.display.Render;
+      const { Picture } = x11Ntk('<image> on a server-side picture');
       this._picture = new Picture(this.app, {
         drawable: { id: this.id },
         format: Render[DEPTH_FORMATS[this.depth]],

package/src/node.d.ts

@@ -100,6 +100,9 @@ export interface Context2D {
   };
   setLineDash(segments: number[]): void;
   getLineDash(): number[];
+  /** Where along the dash pattern a stroke starts, in the same units as the
+   * pattern — the phase a marching dash moves. */
+  lineDashOffset: number;
   beginPath(): void;
   closePath(): void;
   moveTo(x: number, y: number): void;

package/src/nodes/boxpaint.js

@@ -18,7 +18,7 @@ import {
 // `paintcache.js`: a named import of something an older ntk does not export
 // is a *load-time* SyntaxError, which would take the renderer down rather
 // than the one feature that needs it.
-import * as ntk from 'ntk';
+import { ntkRoot, x11Ntk } from '../ntkroot.js';
 import { isFocusable as a11yFocusable } from '../a11y.js';
 import { DEV } from './util.js';
 
@@ -320,7 +320,7 @@ export class NodeBoxPaint {
         );
         sctx.fill();
       },
-      after: (surface) => ntk.blurCoverage(surface, sigma),
+      after: (surface) => x11Ntk('a baked shadow').blurCoverage(surface, sigma),
       live: () => this._paintShadowLive(ctx, plan),
     };
     const cache = this.root?._paintCache;
@@ -338,7 +338,9 @@ export class NodeBoxPaint {
    * a k x k kernel, by the ratio of 2k to k squared.
    */
   _paintShadowLive(ctx, plan) {
-    if (typeof ntk.Surface !== 'function' || !this.app?.display?.Render) return;
+    const ntk = ntkRoot();
+    if (typeof ntk?.Surface !== 'function' || !this.app?.display?.Render)
+      return;
     let surface = null;
     try {
       surface = new ntk.Surface(this.app, {

package/src/nodes/image.js

@@ -20,7 +20,7 @@ import {
 // `paintcache.js`: a named import of something an older ntk does not export
 // is a *load-time* SyntaxError, which would take the renderer down rather
 // than the one feature that needs it.
-import * as ntk from 'ntk';
+import { loadImage } from 'ntk/image';
 import { symbolWeight, symbolsFor, warnOnce } from '../symbols.js';
 import { intrinsicSize } from './layout.js';
 import { Node } from './node.js';
@@ -164,7 +164,7 @@ export class ImageNode extends Node {
   _loadEntry(src) {
     if (isPathImageSource(src)) {
       return {
-        promise: ntk.loadImage(toLoadablePath(src)).then(
+        promise: loadImage(toLoadablePath(src)).then(
           (image) => image,
           (err) => {
             console.error(
@@ -196,7 +196,7 @@ export class ImageNode extends Node {
   async _loadFile(src) {
     const token = ++this._loadToken;
     try {
-      const image = await ntk.loadImage(toLoadablePath(src));
+      const image = await loadImage(toLoadablePath(src));
       if (token !== this._loadToken || this.destroyed) return;
       this._ownedImage = image;
       this._setImage(image);

package/src/nodes/invalidate.js

@@ -314,8 +314,16 @@ export class WindowInvalidate {
       // the whole reason this is not just `needsLayout`: a scroll moves an
       // 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') {
+      //
+      // Nor does a box that only moved (`'position'`, from `applyProps`):
+      // absolutely positioned and sized by its own width and height, it is
+      // out of every ancestor's flow and sizes nothing inside it by its
+      // insets. A card dragged across a graph — or a thousand of them
+      // panned — was a full measurement of the content floors a step.
+      if (reason !== 'scroll' && reason !== 'position') {
+        this._floorsDirty = true;
+      }
+      if (reason !== 'scroll' && reason !== 'resize' && reason !== 'position') {
         this._floorsContentDirty = true;
       }
     }
@@ -469,6 +477,27 @@ export class WindowInvalidate {
     return WINDOW_ONLY;
   }
 
+  /**
+   * One rect the layout diff says a node moved through (`layoutDiff.sink`,
+   * nodes/window/flush.js), to the lists that paint that node — the same
+   * reach a claim of it has (`_paneReach`). A node inside a surface is the
+   * panes' alone: the window's pass under the surface would repaint pixels
+   * no child of it ever had, and it went to both, so a card dragged across
+   * a graph drawn through GL was a window pass under the surface on every
+   * step. Answers whether the window's list took it.
+   */
+  _claimLayoutMove(rect, node, cap) {
+    const reach =
+      this._overlaid.size !== 0 ? this._paneReach(node ?? null) : WINDOW_ONLY;
+    let windowTook = false;
+    if (reach !== PANES_ONLY && this._damage !== FULL_DAMAGE) {
+      this._damage = addDamageRect(this._damage, rect, cap);
+      windowTook = true;
+    }
+    if (reach !== WINDOW_ONLY) this._addPaneDamage(rect);
+    return windowTook;
+  }
+
   /** One rect more for the panes, unless they repaint whole already. */
   _addPaneDamage(rect) {
     if (this._paneDamage === FULL_DAMAGE) return;

package/src/nodes/layout.js

@@ -313,17 +313,17 @@ export class NodeLayout {
         ) {
           return;
         }
-        if (had) layoutDiff.sink(insetRect(was, -grow));
+        if (had) layoutDiff.sink(insetRect(was, -grow), this);
         if (width > 0 && height > 0) {
-          layoutDiff.sink(insetRect(this.abs, -grow));
+          layoutDiff.sink(insetRect(this.abs, -grow), this);
         }
         return;
       }
       if (had) {
-        layoutDiff.sink(insetRect(old, -grow));
+        layoutDiff.sink(insetRect(old, -grow), this);
       }
       if (width > 0 && height > 0) {
-        layoutDiff.sink(insetRect(this.abs, -grow));
+        layoutDiff.sink(insetRect(this.abs, -grow), this);
       }
     }
   }

package/src/nodes/node.js

@@ -605,6 +605,18 @@ export class Node {
     // which is what keeps a commit from widening the region to every node
     // it touched.
     if (layoutChanged) {
+      const moved = onlyInsetsChanged(style, prevStyle);
+      // An absolutely positioned box of a set size that moved and changed
+      // nothing else is out of its ancestors' flow and sized by its width
+      // and height rather than its insets, so no content floor anywhere
+      // moved with it (src/nodes/invalidate.js, `'position'`).
+      const reason =
+        moved &&
+        style.position === 'absolute' &&
+        typeof style.width === 'number' &&
+        typeof style.height === 'number'
+          ? 'position'
+          : 'props';
       // A child of a `<glarea>` that only moved (issue #644): its pixels are
       // on a pane, one shift away, and the layout pass reports the move to
       // the overlay rather than claiming it (src/glnodes.js). A claim of the
@@ -613,12 +625,12 @@ export class Node {
       // whenever the overlay cannot move the pixels.
       if (
         this.parent?.isGlArea &&
-        onlyInsetsChanged(style, prevStyle) &&
+        moved &&
         !this.paintChanged(newProps, prev)
       ) {
-        this.invalidate(true, NO_DAMAGE, 'props');
+        this.invalidate(true, NO_DAMAGE, reason);
       } else {
-        this._invalidateLayout('props');
+        this._invalidateLayout(reason);
       }
     } else {
       // The style half is asked here rather than inside `paintChanged`, and