react-x11 2.22.11 → 2.22.13

package/package.json

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

package/src/Reconciler.js

@@ -75,6 +75,7 @@ import {
 } from './registry.js';
 import { SvgNode, SvgChildNode } from './svgnodes.js';
 import { loadLayout } from './yoga.js';
+import { warmWidgetFaces } from './faces.js';
 
 // The renderer name and version DevTools shows. Read from package.json so
 // they cannot drift — but **guarded**, because a single-file bundle has no
@@ -880,6 +881,9 @@ export async function createRoot(options = {}) {
   const layout = loadLayout();
   const integrations = loadIntegrations(); // null when there is nothing to install
   const [app] = await Promise.all([connecting, layout, integrations]);
+  // The faces the widgets set text in beyond a family's four, matched now
+  // rather than in the first frame that sets one (src/faces.js).
+  warmWidgetFaces(app);
 
   const container = Renderer.createContainer(
     app,

package/src/atspi.js

@@ -71,6 +71,9 @@ const NODE_PATH = '/org/a11y/atspi/accessible/';
 const NULL_PATH = '/org/a11y/atspi/null';
 const CACHE_PATH = '/org/a11y/atspi/cache';
 const REGISTRY_NAME = 'org.a11y.atspi.Registry';
+const REGISTRY_PATH = '/org/a11y/atspi/registry';
+const REGISTRY_IFACE = 'org.a11y.atspi.Registry';
+const DBUS_NAME = 'org.freedesktop.DBus';
 
 const IFACE = {
   ACCESSIBLE: 'org.a11y.atspi.Accessible',
@@ -754,6 +757,18 @@ const EditableTextImpl = {
 // The bridge
 // --------------------------------------------------------------------------
 
+/** What the renderer has said since the last push. */
+function emptyPending() {
+  return {
+    attach: new Set(),
+    remove: [],
+    props: new Set(),
+    text: new Set(),
+    focus: [],
+    window: [],
+  };
+}
+
 class AtspiBridge {
   constructor(bus, toolkitVersion) {
     this.bus = bus;
@@ -770,25 +785,32 @@ class AtspiBridge {
     this._unsubscribes = [];
     // batched renderer notifications, flushed in a microtask once the pacer
     // says so (src/a11ypace.js), and at once for what the user waits on
-    this._pending = {
-      attach: new Set(),
-      remove: [],
-      props: new Set(),
-      text: new Set(),
-      focus: [],
-      window: [],
-    };
+    this._pending = emptyPending();
     this._flushScheduled = false;
     this._pacer = new A11yPacer();
     /** The focused node, whose own changes are not paced. */
     this._focused = null;
+    /**
+     * Whether anything may be listening, and so whether the bridge speaks
+     * at all (`watchListeners`). True until the registry says nobody is.
+     */
+    this.audience = true;
+    /** Something has listened or asked, and the bridge speaks for good. */
+    this._heard = false;
+    /** The registry's unique name, once known: its calls are not an AT's. */
+    this._registryOwner = null;
+    /** Who has called in before the registry was asked who listens. */
+    this._callers = new Set();
     // Pushes are paced, reads are not: whatever the pacer is holding is
     // flushed before dbus-native dispatches an AT's call, so the objects and
     // interfaces it asks about exist as the tree has them now. A node React
     // reused as a slider still exported a button's interfaces until the
-    // next push, and a Value read of it failed.
+    // next push, and a Value read of it failed. A call is also how an AT
+    // that registered for nothing shows it is there.
     bus.connection?.prependListener?.('message', (msg) => {
-      if (msg.type === METHOD_CALL && this._hasPending()) this.flush();
+      if (msg.type !== METHOD_CALL) return;
+      if (msg.sender) this._calledBy(msg.sender);
+      if (this._hasPending()) this.flush();
     });
   }
 
@@ -1116,7 +1138,7 @@ class AtspiBridge {
   // ---- signals ---------------------------------------------------------
 
   _signal(path, iface, member, detail, detail1, detail2, anyData) {
-    if (this.dead) return;
+    if (this.dead || !this.audience) return;
     try {
       this.bus.sendSignal(path, iface, member, EVENT_SIGNATURE, [
         detail,
@@ -1172,7 +1194,7 @@ class AtspiBridge {
   }
 
   emitCacheAdd(node) {
-    if (this.dead) return;
+    if (this.dead || !this.audience) return;
     try {
       this.bus.sendSignal(
         CACHE_PATH,
@@ -1187,7 +1209,7 @@ class AtspiBridge {
   }
 
   emitCacheRemove(ref) {
-    if (this.dead) return;
+    if (this.dead || !this.audience) return;
     try {
       this.bus.sendSignal(CACHE_PATH, IFACE.CACHE, 'RemoveAccessible', '(so)', [
         ref,
@@ -1207,7 +1229,7 @@ class AtspiBridge {
    * finds them gone, and the removal finds nothing the AT ever saw.
    */
   _schedule() {
-    if (this._flushScheduled || this.dead) return;
+    if (this._flushScheduled || this.dead || !this.audience) return;
     if (this._pacer.ready(() => this.flush())) this._flushSoon();
   }
 
@@ -1240,34 +1262,43 @@ class AtspiBridge {
     return false;
   }
 
+  // Nothing is queued with nobody to tell: the tree an AT reads when it
+  // arrives is the live one, and it starts from there (`_silence`).
+
   queueAttach(node) {
+    if (!this.audience) return;
     this._pending.attach.add(node);
     this._schedule();
   }
 
   queueRemove(parent, child, index) {
+    if (!this.audience) return;
     this._pending.remove.push({ parent, child, index });
     this._schedule();
   }
 
   queueProps(node) {
+    if (!this.audience) return;
     this._pending.props.add(node);
     if (node === this._focused) this._urgent();
     else this._schedule();
   }
 
   queueText(node) {
+    if (!this.audience) return;
     this._pending.text.add(node);
     if (node === this._focused) this._urgent();
     else this._schedule();
   }
 
   queueFocus(previous, next) {
+    if (!this.audience) return;
     this._pending.focus.push({ previous, next });
     this._urgent();
   }
 
   queueWindowFocus(win, focused) {
+    if (!this.audience) return;
     this._pending.window.push({ win, focused });
     this._urgent();
   }
@@ -1288,19 +1319,12 @@ class AtspiBridge {
     if (this.dead) return;
     this._flushScheduled = false;
     const p = this._pending;
-    if (!this._hasPending()) return;
+    if (!this.audience || !this._hasPending()) return;
     // this push takes what a stream was owed, and the next interval runs
     // from here
     this._pacer.cancel();
     this._pacer.pushed();
-    this._pending = {
-      attach: new Set(),
-      remove: [],
-      props: new Set(),
-      text: new Set(),
-      focus: [],
-      window: [],
-    };
+    this._pending = emptyPending();
 
     // Removals first: a node that left and came back in one batch reads as
     // its add, never as a stale remove.
@@ -1723,10 +1747,120 @@ class AtspiBridge {
     );
     this.bus.signals.on(key, (body) => {
       const newOwner = body?.[2];
-      if (newOwner) this.embed().catch(() => {});
+      if (!newOwner) return;
+      // a restarted registry calls in under its new name, and is still
+      // not an AT
+      if (this._registryOwner !== null) this._registryOwner = newOwner;
+      this.embed().catch(() => {});
     });
   }
 
+  // ---- nobody listening ------------------------------------------------
+
+  /**
+   * Speak only with somebody to hear it. An accessibility bus runs in most
+   * Linux sessions whether or not an assistive technology does, and with
+   * none there every signal the bridge sends, and every object it exports
+   * to name in them, is paid for by nobody: a quarter of the frame rate of
+   * a thumb dragged down a 100,000-row `<Table>`.
+   *
+   * The registry knows. An AT registers the events it wants with it
+   * (`RegisterEvent`), and it answers `GetRegisteredEvents` and announces
+   * each new listener (`EventListenerRegistered`), which is how GTK 4 and
+   * at-spi2-atk hold back the events nobody asked for. Both still send the
+   * cache's signals and children-changed regardless, because libatspi
+   * listens for those in every client without registering. So an empty list
+   * is not the whole answer. An AT that registered for nothing still has to
+   * call in to read anything, and a call from anybody but the registry
+   * counts as well.
+   *
+   * With neither, the bridge falls silent: nothing queued, nothing pushed,
+   * nothing exported. It speaks again for good at the first listener or the
+   * first call, and an AT arriving then reads the tree as it is, which is
+   * where it would start anyway. The one thing silence costs is an
+   * announcement, which `announce()` then reports as unheard.
+   */
+  async watchListeners() {
+    const bus = this.bus;
+    await bus.addMatch(
+      `type='signal',interface='${REGISTRY_IFACE}',` +
+        "member='EventListenerRegistered'",
+    );
+    bus.signals.on(
+      bus.mangle(REGISTRY_PATH, REGISTRY_IFACE, 'EventListenerRegistered'),
+      () => this._hearFrom(),
+    );
+    const owner = await bus.invoke({
+      destination: DBUS_NAME,
+      path: '/org/freedesktop/DBus',
+      interface: DBUS_NAME,
+      member: 'GetNameOwner',
+      signature: 's',
+      body: [REGISTRY_NAME],
+    });
+    const events = await bus.invoke({
+      destination: REGISTRY_NAME,
+      path: REGISTRY_PATH,
+      interface: REGISTRY_IFACE,
+      member: 'GetRegisteredEvents',
+    });
+    // A listener that registered after the answer was sent may already
+    // have been heard, in the same read as the reply.
+    if (this._heard || this.dead) return;
+    this._registryOwner = owner;
+    const asked = [...this._callers].some((sender) => this._isPeer(sender));
+    this._callers.clear();
+    if (asked || !Array.isArray(events) || events.length > 0) {
+      this._hearFrom();
+      return;
+    }
+    this._silence();
+  }
+
+  /** A method call has come in from `sender`. */
+  _calledBy(sender) {
+    if (this._heard) return;
+    if (this._registryOwner === null) this._callers.add(sender);
+    else if (this._isPeer(sender)) this._hearFrom();
+  }
+
+  /** Anybody but the registry, the bus, or this connection. */
+  _isPeer(sender) {
+    return (
+      sender !== this._registryOwner &&
+      sender !== DBUS_NAME &&
+      sender !== this.bus.name
+    );
+  }
+
+  /** Somebody listens or asks: speak, from now on. */
+  _hearFrom() {
+    this._heard = true;
+    this._callers.clear();
+    if (!this.audience && process.env.REACT_X11_A11Y) {
+      console.warn('react-x11: accessibility bridge speaking — heard an AT');
+    }
+    this.audience = true;
+  }
+
+  /**
+   * Nobody listens: stop. What the bus was shown before the registry
+   * answered goes too, so silence has nothing exported to keep in step and
+   * nothing to take back.
+   */
+  _silence() {
+    if (process.env.REACT_X11_A11Y) {
+      console.warn(
+        'react-x11: accessibility bridge quiet — nothing listens or asks yet',
+      );
+    }
+    this.audience = false;
+    this._pacer.cancel();
+    this._flushScheduled = false;
+    this._pending = emptyPending();
+    for (const node of [...this.exported.keys()]) this._unexport(node);
+  }
+
   // ---- wiring into the renderer ---------------------------------------
 
   install() {
@@ -1741,11 +1875,14 @@ class AtspiBridge {
       this.toplevels.splice(index, 1);
       this.queueRemove(null, win, index);
     };
+    // The walks below are skipped with nobody listening: silence exports
+    // nothing, so there is nothing a detach has to take back either.
     hooks.attached = (parent, child) => {
-      if (!this._live(parent)) return;
+      if (!this.audience || !this._live(parent)) return;
       this.queueAttach(child);
     };
     hooks.detach = (parent, child) => {
+      if (!this.audience) return;
       const exported = this.exported.has(child);
       if (!exported && !this._live(parent)) return;
       // the index is for the AT's children-changed, which only a child it
@@ -1760,6 +1897,7 @@ class AtspiBridge {
       if (this.exported.has(node)) this.queueProps(node);
     };
     hooks.textContent = (chunk) => {
+      if (!this.audience) return;
       let text = chunk.parent;
       while (text && text.kind === 'text' && text.isSpan) text = text.parent;
       if (!text) return;
@@ -1784,6 +1922,9 @@ class AtspiBridge {
     // hook above has already asked for the one it needs
     hooks.commit = () => this._schedule();
     hooks.announce = (text, opts) => {
+      // `announce()`'s false: nobody is listening, and the app may want to
+      // show it instead
+      if (!this.audience) return false;
       // spoken from the active window, which is the context the user is in
       const target =
         this.toplevels.find((win) => win.events?.windowFocused) ??
@@ -1989,6 +2130,9 @@ export async function start() {
     }
   }
   b.watchRegistry().catch(() => {});
+  // A registry that cannot say who listens is taken to have somebody
+  // listening, as GTK takes one it cannot ask.
+  b.watchListeners().catch(() => b._hearFrom());
   b.install();
   bridge = b;
   if (loud) {

package/src/cocoa/main.js

@@ -17,6 +17,11 @@
 // import's). Anywhere else it does nothing, so one command line serves
 // every platform: on Linux the entry runs as it would without it, and so
 // does a Worker the app starts itself (it inherits this `--import`).
+//
+// Of the checks it skips, it keeps one: a `<Frame>` pane stays where it is.
+// The host forks the pane with the node flags it started with, this
+// `--import` among them, and a pane on a worker has no IPC channel to its
+// host (src/cocoa/relaunch.js, `relaunchVeto`).
 import { isMainThread, workerData } from 'node:worker_threads';
 
 import { loadNative } from './native.js';
@@ -24,7 +29,11 @@ import { bootstrapWorker, relaunch } from './relaunch.js';
 
 if (!isMainThread && workerData?.reactX11State) {
   bootstrapWorker(workerData.reactX11State);
-} else if (isMainThread && process.platform === 'darwin') {
+} else if (
+  isMainThread &&
+  process.platform === 'darwin' &&
+  process.env.REACT_X11_FRAME !== '1'
+) {
   const entry = process.argv[1];
   if (!entry) {
     throw new Error(

package/src/cocoa/relaunch.js

@@ -67,6 +67,13 @@ export function relaunchVeto({
   if (env.REACT_X11_BACKEND && env.REACT_X11_BACKEND !== 'cocoa') {
     return `REACT_X11_BACKEND=${env.REACT_X11_BACKEND}`;
   }
+  // A `<Frame>` pane (REACT_X11_FRAME is what the host sets on the fork)
+  // has no AppKit for the main thread to keep — its pixels reach the host
+  // through shared IOSurfaces (src/cocoa/panewindow.js) — and its entry
+  // talks to the host over the IPC channel fork() sets up, which is the
+  // main thread's: on a worker there is no `process.send`, and the pane
+  // exited as it started (src/frame/child.js).
+  if (env.REACT_X11_FRAME === '1') return 'a <Frame> pane';
   // a REPL, `node -e`, or an entry that is not a file a worker can load
   if (!entry) return 'no entry script';
   // a single executable carries its entry inside the binary, where a worker

package/src/components/Menu.js

@@ -28,6 +28,7 @@ import { useGlobalMenu } from '../globalmenu.js';
 import { acceleratedItem } from '../accelerators.js';
 import { useAcceleratorEntry } from '../acceleratorhooks.js';
 import { useTopLevelWindow } from '../windowid.js';
+import { MENU_TEXT_WEIGHT } from '../faces.js';
 import {
   ariaKeyShortcuts,
   checkShortcut,
@@ -212,8 +213,10 @@ const MENU_GUTTER = MENU_ICON_SIZE + MENU_ICON_GAP;
 //
 // Every label measured for a popup's width is measured at this weight too
 // (`measureLabel` takes it), since a menu sized in regular for rows drawn in
-// medium is a menu whose own labels run into its shortcuts.
-const MENU_TEXT_WEIGHT = 500;
+// medium is a menu whose own labels run into its shortcuts. The weight,
+// `MENU_TEXT_WEIGHT`, is in ../faces.js, which a root warms as it connects:
+// a face outside a family's four is otherwise matched in the first frame
+// that sets it.
 
 const MENU_SHORTCUT_GAP = 24;
 // menus size to their content rather than scrolling, so a page is a fixed

package/src/faces.js

@@ -0,0 +1,24 @@
+// The faces the widgets set text in beyond the four a font source warms for
+// a family by itself — regular, bold, italic and bold italic — so that a
+// root can have them matched while it connects (`warmWidgetFaces`, from
+// createRoot) rather than in the first frame that sets one.
+//
+// With fontconfig, a face nobody warmed is a synchronous `fc-match` inside
+// that frame: a menu bar's titles, set in the medium below, cost 34 ms of a
+// Linux desktop's first frame, and the matcher alone takes 80–150 ms on
+// XQuartz. The weight is here rather than in components/Menu.js because the
+// renderer is what warms it, and the renderer does not import widgets.
+import { DefaultTheme } from './palette.js';
+
+/** The weight a menu's titles and rows are set in (components/Menu.js). */
+export const MENU_TEXT_WEIGHT = 500;
+
+/**
+ * Start matching the widget faces in the default family, off the event loop
+ * (ntk's `FontManager#prewarm`). Fonts with nothing to look up — CoreText,
+ * DirectWrite, faces handed over in memory — ignore it, as does an ntk older
+ * than the method, and it never throws.
+ */
+export function warmWidgetFaces(app) {
+  app.fonts?.prewarm?.(DefaultTheme.fontFamily, [{ weight: MENU_TEXT_WEIGHT }]);
+}

package/src/frame/child.js

@@ -4,12 +4,20 @@
 // `process`. Kept import-light and JSX-free on purpose: it runs before
 // anything decided what loaders this process has.
 
+import { isMainThread } from 'node:worker_threads';
+
 import { runFrameChild } from './childmain.js';
 
 if (typeof process.send !== 'function') {
   console.error(
-    'react-x11: frame/child.js is the entry a <Frame> forks — it needs the ' +
-      'IPC channel fork() sets up, and cannot be run directly.',
+    isMainThread
+      ? 'react-x11: frame/child.js is the entry a <Frame> forks — it needs ' +
+          'the IPC channel fork() sets up, and cannot be run directly.'
+      : // the channel is the main thread's, and something moved the pane
+        // off it (src/cocoa/relaunch.js keeps a pane where it is)
+        'react-x11: frame/child.js is running on a worker thread, which ' +
+          'has no IPC channel — a <Frame> pane has to stay on the main ' +
+          'thread of its process.',
   );
   process.exit(1);
 }

package/src/nodes/damage.js

@@ -66,6 +66,13 @@ export const layoutDiff = {
   // asked to: a scroll moves boxes without a pass, and the walk is what
   // carries the offset down to them (`WindowNode._walkWhole`).
   skipUnreached: false,
+
+  // The boxes a scroll pane's measure read on this walk (`contentReach`),
+  // left for the `absolutize` that places each one later in the same walk
+  // (`laidBox`): no pass runs in between, so what yoga said is what it
+  // says. A Map for the length of the window's walk and null outside it,
+  // where a pane that re-measures (`_placeNodes` moving one) reads its own.
+  boxes: null,
 };
 
 // What an invalidate() may name as its reason — a small closed set, so the

package/src/nodes/layout.js

@@ -83,6 +83,20 @@ export function offsetInParent(node) {
   };
 }
 
+/**
+ * Where layout put `node`'s box — yoga's `{ left, top, width, height }`,
+ * in one call where four getters cost four crossings into the wasm module —
+ * or the box a scroll pane's measure already read on this walk
+ * (`layoutDiff.boxes`), which no pass has touched since. A pane that
+ * measures its content reads every box in it, and the walk that places
+ * them read each one again: on an edit to a 600 KB document, 1,704 blocks'
+ * worth of numbers read twice every frame.
+ */
+export function laidBox(node) {
+  const box = layoutDiff.boxes?.get(node);
+  return box === undefined ? node.yoga.getComputedLayout() : box;
+}
+
 /** What a leaf a width pass reads nothing from answers with. */
 const UNREAD_SIZE = Object.freeze({ width: 0, height: 0 });
 
@@ -206,10 +220,11 @@ export class NodeLayout {
     // its own — counts as on screen too
     this._placed = true;
     if (!this.yoga) return;
-    const x = originX + this.yoga.getComputedLeft();
-    const y = originY + this.yoga.getComputedTop();
-    const width = this.yoga.getComputedWidth();
-    const height = this.yoga.getComputedHeight();
+    const box = laidBox(this);
+    const x = originX + box.left;
+    const y = originY + box.top;
+    const width = box.width;
+    const height = box.height;
     const wasX = this.abs.x;
     const wasY = this.abs.y;
     const move = this._beginRigidMove(x, y, width, height);

package/src/nodes/node.js

@@ -108,6 +108,9 @@ export class Node {
     this._floorAtW = undefined;
     this._floorMinW = undefined;
     this._floorMinH = undefined;
+    // this box's top and bottom margins as a column's floor sums them
+    // (`marginsDown`), with the style object they were read under
+    this._marginsDown = null;
     // the width mode yoga last measured this leaf in with no height on
     // offer — the question `_heightForWidth` repeats
     this._floorMeasureMode = null;

package/src/nodes/scrollable.js

@@ -17,7 +17,7 @@ import {
   XK_SPACE,
 } from '../keysyms.js';
 import { DAMAGE_SLOP, layoutDiff } from './damage.js';
-import { describeSize, offsetInParent } from './layout.js';
+import { describeSize, laidBox, offsetInParent } from './layout.js';
 import { insetRect, intersectRects, rectsOverlap } from './rects.js';
 import {
   SCROLLBAR_WIDTH,
@@ -55,31 +55,63 @@ function contentReach(node, top) {
     cached !== undefined &&
     node._host === null &&
     node.parent?._host === null &&
-    !node.yoga.hasNewLayout()
+    (!node.yoga.hasNewLayout() || childrenSettled(node, cached))
   ) {
     return cached;
   }
   let left = Infinity;
   let right = -Infinity;
   let bottom = -Infinity;
+  // a child a layout algorithm placed sits in its slot (`offsetInParent`)
+  const hosted = node._host !== null;
+  const boxes = layoutDiff.boxes;
   for (const child of node.children) {
     if (child.isWindow || !child.yoga || child.hidden) continue;
-    const offset = offsetInParent(child);
-    left = Math.min(left, offset.x);
-    right = Math.max(right, offset.x + child.yoga.getComputedWidth());
-    bottom = Math.max(bottom, offset.y + child.yoga.getComputedHeight());
+    const box = child.yoga.getComputedLayout();
+    // …for the walk that places this child, later in the same one
+    boxes?.set(child, box);
+    const slot = hosted ? child._hostSlot : null;
+    const x = slot === null ? box.left : box.left + slot.x;
+    const y = slot === null ? box.top : box.top + slot.y;
+    left = Math.min(left, x);
+    right = Math.max(right, x + box.width);
+    bottom = Math.max(bottom, y + box.height);
     if (!child.clipsChildren()) {
       const inner = contentReach(child, false);
-      left = Math.min(left, offset.x + inner.left);
-      right = Math.max(right, offset.x + inner.right);
-      bottom = Math.max(bottom, offset.y + inner.bottom);
+      left = Math.min(left, x + inner.left);
+      right = Math.max(right, x + inner.right);
+      bottom = Math.max(bottom, y + inner.bottom);
     }
   }
-  const reach = { left, right, bottom };
+  const reach = { left, right, bottom, children: node.children.length };
   if (!top) node._contentReach = reach;
   return reach;
 }
 
+/**
+ * Whether what `node` holds sits where it did, relative to `node`: the same
+ * children, none of them laid out again. The flag on `node` itself says only
+ * that the pass reached it, and a pass reaches every child of a box it lays
+ * out — a column laid out again for one block that grew flags all of its
+ * blocks, though every one of them holds what it held, where it held it. Each
+ * child's own flag is the witness for that: a pass that moved, resized,
+ * showed, hid or clipped a child laid it out, and one that added or took a
+ * child away laid out its parent, which flags every child left, or changed
+ * the count when none was.
+ *
+ * It saves reading each child's place and size back out of yoga, four
+ * calls a child, to find the answer `node` already has: an edit to a 600 KB
+ * document was 1,704 blocks' worth of them every frame.
+ */
+function childrenSettled(node, cached) {
+  const children = node.children;
+  if (children.length !== cached.children) return false;
+  for (const child of children) {
+    if (child.yoga && child.yoga.hasNewLayout()) return false;
+  }
+  return true;
+}
+
 /**
  * One axis of a scroll request held for a pass
  * (`Scrollable._holdScrollTo`): `{ base, steps }`, the request the extent in
@@ -194,10 +226,11 @@ export const Scrollable = (Base) =>
     absolutize(originX, originY) {
       this._placed = true;
       if (!this.yoga) return;
-      const x = originX + this.yoga.getComputedLeft();
-      const y = originY + this.yoga.getComputedTop();
-      const width = this.yoga.getComputedWidth();
-      const height = this.yoga.getComputedHeight();
+      const box = laidBox(this);
+      const x = originX + box.left;
+      const y = originY + box.top;
+      const width = box.width;
+      const height = box.height;
       // 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;

package/src/nodes/window/floors.js

@@ -340,8 +340,7 @@ export function columnHeightSpan(node) {
     if (!inFlow(child)) continue;
     const extent = child._floorH;
     if (extent === undefined) return undefined;
-    const top = marginDown(child.yoga, Yoga.EDGE_TOP);
-    const bottom = marginDown(child.yoga, Yoga.EDGE_BOTTOM);
+    const { top, bottom } = marginsDown(child);
     if (!(top >= 0 && bottom >= 0)) return undefined;
     span += count === 0 ? extent : trailing + top + extent;
     trailing = bottom;
@@ -360,6 +359,27 @@ export function columnHeightSpan(node) {
   );
 }
 
+/**
+ * `marginDown` for both edges of a box, kept on the box with the style object
+ * it was read under. A margin reaches yoga only from the style
+ * (`applyLayoutStyle`), and a style that changes is a new object, so while
+ * the object is the same, so are the margins. Asking yoga is up to six calls
+ * that each build an object, for every child of every column a spine sums,
+ * on every pass: 2 ms of an edit to a document of 1,700 blocks, for margins
+ * that had not changed.
+ */
+function marginsDown(child) {
+  const kept = child._marginsDown;
+  if (kept !== null && kept.style === child.style) return kept;
+  const read = {
+    style: child.style,
+    top: marginDown(child.yoga, Yoga.EDGE_TOP),
+    bottom: marginDown(child.yoga, Yoga.EDGE_BOTTOM),
+  };
+  child._marginsDown = read;
+  return read;
+}
+
 /**
  * A box's margin on one edge down the page, from its style as yoga resolves
  * it — the edge, else the vertical pair, else all four — rather than from a

package/src/nodes/window/flush.js

@@ -161,9 +161,11 @@ export class WindowFlush {
     if (this._loopNodes.size && !this._loopWatch) this._watchLoops();
     this._advanceAnimations(now());
     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();
+      // before anything lays the tree out: a pass clears yoga's record of
+      // which subtrees changed, and the floors are measured from that record.
+      // Owed to that pass rather than taken here (`_collectOwedFloorStale`),
+      // so a frame whose first pass is the floors' own collects once.
+      this._floorsCollectOwed = true;
       this._refit();
     }
     const width = this.window.width ?? this._requestedSize?.width ?? 0;
@@ -215,6 +217,7 @@ export class WindowFlush {
       // a subtree no pass reached and nothing scrolled in is where the last
       // walk left it (`_followParent`)
       layoutDiff.skipUnreached = !this._walkWhole;
+      layoutDiff.boxes = new Map();
       try {
         // `_absolutizeChildren`, not the loop it wraps: a `<window
         // style={{overflow: 'scroll'}}>` is a scroll container like any box,
@@ -223,6 +226,7 @@ export class WindowFlush {
       } finally {
         layoutDiff.sink = null;
         layoutDiff.skipUnreached = false;
+        layoutDiff.boxes = null;
       }
       this._walkWhole = false;
       // …and placed nodes against the arrangement that walk produced: where

package/src/nodes/window/size.js

@@ -148,11 +148,12 @@ export class WindowSize {
    * marks the first one left.
    */
   _collectFloorStale() {
+    this._floorsCollectOwed = false;
     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
+    // between the two calls a frame can make — 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();
@@ -204,6 +205,21 @@ export class WindowSize {
     return found;
   }
 
+  /**
+   * The collection a flush owes (`_floorsCollectOwed`), taken just before
+   * the first pass that would clear what it reads: a natural-size
+   * measurement (`_refit`), or a layout that measures no floors. The floors'
+   * own measurement collects anyway (`_applyContentFloors`), and nothing in
+   * a flush before it lays anything out — a size query that resolves only
+   * restyles, which adds to yoga's record — so that frame collects once.
+   * Collecting on the way in as well read every block of a long column
+   * twice: 1,704 of them, a millisecond a frame, on an edit to a 600 KB
+   * document.
+   */
+  _collectOwedFloorStale() {
+    if (this._floorsCollectOwed) this._collectFloorStale();
+  }
+
   /**
    * The boxes the changes since the last measurement are confined to, or
    * null when a measurement has to look at the whole tree.
@@ -485,6 +501,7 @@ export class WindowSize {
 
   /** The real layout pass: the tree at the window's size, on the pixel grid. */
   _layoutRoot(width, height) {
+    this._collectOwedFloorStale();
     this._sweepLayoutHosts();
     this._layoutPasses += 1;
     this.yoga.setWidth(width);
@@ -915,6 +932,8 @@ export class WindowSize {
       isContentBound(props[key]),
     );
     if (!tracking && !bounded) return;
+    // the natural size is a pass over the tree
+    this._collectOwedFloorStale();
     const asked = this._requestedSize;
     const measured = this._measure();
     this._sendSizeHints(props, measured.hints);

package/src/nodes/window/spine.js

@@ -166,11 +166,11 @@ export function spineScope(root, sources, listOnly) {
   // Every other child of a summed column answers from the extent it carries.
   for (const column of spine) {
     for (const child of column.children) {
-      if (!inFlow(child) || roots.has(child) || spine.has(child)) continue;
-      if (child._floorH === undefined) return null;
-      if (MARGINS.some((key) => typeof child.style[key] === 'string')) {
-        return null;
-      }
+      if (!child.yoga || child.isWindow) continue;
+      if (roots.has(child) || spine.has(child)) continue;
+      const flags = styleFlags(child.style);
+      if (flags & OUT_OF_FLOW) continue;
+      if (child._floorH === undefined || flags & RELATIVE_MARGIN) return null;
     }
   }
   const depth = (node) => {
@@ -185,6 +185,33 @@ export function spineScope(root, sources, listOnly) {
   };
 }
 
+const OUT_OF_FLOW = 1;
+const RELATIVE_MARGIN = 2;
+const STYLE_FLAGS = new WeakMap();
+
+/**
+ * What the summing asks of a block's style — out of its column's flow
+ * (`inFlow`'s half that is style), or a margin that is not a length — kept
+ * per style object. A resolved style is replaced when it changes, never
+ * edited (`_retarget`), and a column of 1,704 blocks is a handful of
+ * styles asked a dozen names each, most of them unset: 20,000 lookups of
+ * properties no block has, on every edit to a long document.
+ */
+function styleFlags(style) {
+  let flags = STYLE_FLAGS.get(style);
+  if (flags === undefined) {
+    flags =
+      (style.position === 'absolute' || style.display === 'none'
+        ? OUT_OF_FLOW
+        : 0) |
+      (MARGINS.some((key) => typeof style[key] === 'string')
+        ? RELATIVE_MARGIN
+        : 0);
+    STYLE_FLAGS.set(style, flags);
+  }
+  return flags;
+}
+
 /** The children of a node that gained or lost some: the ones yoga has a
  *  change on record for, and the ones never measured. */
 function staleChildren(node) {

package/src/nodes/window/window.js

@@ -287,6 +287,9 @@ export class WindowNode extends Scrollable(Node) {
     this._readEveryWidth = false;
     this._floorsScopeNow = null;
     this._floorsSpineNow = null;
+    // whether a flush's collection of what changed is still owed to the
+    // first pass that lays the tree out (`_collectOwedFloorStale`)
+    this._floorsCollectOwed = false;
     // whether the next layout walk must visit every box (`invalidate`)
     this._walkWhole = true;
     this._scopedFloorPasses = 0;

package/src/styles.js

@@ -199,8 +199,8 @@ const LAYOUT_APPLIERS = {
   paddingStart: (n, v) => n.setPadding(Yoga.EDGE_START, v),
   paddingEnd: (n, v) => n.setPadding(Yoga.EDGE_END, v),
   gap: (n, v) => n.setGap(Yoga.GUTTER_ALL, v ?? 0),
-  rowGap: (n, v) => n.setGap(Yoga.GUTTER_ROW, v ?? 0),
-  columnGap: (n, v) => n.setGap(Yoga.GUTTER_COLUMN, v ?? 0),
+  rowGap: (n, v) => n.setGap(Yoga.GUTTER_ROW, v),
+  columnGap: (n, v) => n.setGap(Yoga.GUTTER_COLUMN, v),
   aspectRatio: (n, v) => n.setAspectRatio(v),
   display: (n, v) =>
     n.setDisplay(pick(DISPLAY, v, 'display') ?? Yoga.DISPLAY_FLEX),
@@ -1995,32 +1995,59 @@ export function applyLayoutDefaults(yogaNode) {
   yogaNode.setFlexShrink(1);
 }
 
+/** Each layout prop's applier, by name — `LAYOUT_APPLIERS` without its
+ *  prototype, so a style key that is not a layout prop finds nothing. */
+const LAYOUT_APPLIER_OF = new Map(Object.entries(LAYOUT_APPLIERS));
+
+const NO_STYLE = Object.freeze({});
+
 /**
  * Apply changed layout props to a yoga node.
+ *
+ * Walks the keys the two styles carry rather than every property yoga
+ * knows: a style names a handful of the fifty-odd, and a property neither
+ * names is `undefined` in both, which is no change. Every applier sets a
+ * field of its own, so the order they run in does not matter. Asking every
+ * name of both styles was most of the cost of a node that mounts — a
+ * virtualized list replaces its rows at input rate.
+ *
  * @returns true if any layout-affecting prop changed
  */
-export function applyLayoutStyle(yogaNode, props, oldProps = {}) {
+export function applyLayoutStyle(yogaNode, props, oldProps = NO_STYLE) {
   let changed = false;
   // A placed node's insets — sticky's thresholds, or whatever a registered
   // position reads them as — are the placement's, never offsets: yoga gets
-  // `undefined` for them, and a node that becomes placed (or stops) has all
-  // six re-sent whether or not they changed. The flip still counts as a
-  // change: the pass it asks for is what places the node.
+  // `undefined` for them, and a node that becomes placed (or stops) has
+  // every inset it names re-sent whether or not it changed.
   const placed = isPlacedPosition(props.position);
   const flipped = placed !== isPlacedPosition(oldProps.position);
-  for (const key of Object.keys(LAYOUT_APPLIERS)) {
+  for (const key in props) {
+    const applier = LAYOUT_APPLIER_OF.get(key);
+    if (applier === undefined) continue;
+    const inset = INSETS.has(key);
     const moved =
       key === 'position'
         ? !samePosition(props.position, oldProps.position)
         : props[key] !== oldProps[key];
-    if (moved || (flipped && INSETS.has(key))) {
-      LAYOUT_APPLIERS[key](
-        yogaNode,
-        placed && INSETS.has(key) ? undefined : props[key],
-      );
-      changed = true;
-    }
+    if (!moved && !(flipped && inset)) continue;
+    applier(yogaNode, placed && inset ? undefined : props[key]);
+    changed = true;
+  }
+  // …and the ones the new style dropped, which go back to yoga's default
+  for (const key in oldProps) {
+    if (key in props) continue;
+    const applier = LAYOUT_APPLIER_OF.get(key);
+    if (applier === undefined) continue;
+    const moved =
+      key === 'position'
+        ? !samePosition(undefined, oldProps.position)
+        : oldProps[key] !== undefined;
+    if (!moved && !(flipped && INSETS.has(key))) continue;
+    applier(yogaNode, undefined);
+    changed = true;
   }
+  // An inset neither style names is unset in yoga already, and a flip is a
+  // change to `position` itself, so it is counted above.
   return changed;
 }
 

package/src/yoga.js

@@ -109,6 +109,50 @@ for (const name of ['Node', 'Config']) {
 
 let loading = null;
 
+/**
+ * The assembly, compiled from the bytes yoga-layout embeds — or null where
+ * they cannot be read off the disk (a bundle, a single executable: see
+ * docs/packaging.md), and `loadYoga()` loads it the stock way.
+ *
+ * yoga-layout ships its WebAssembly only as a base64 data URL inside its
+ * loader, and the loader, handed nothing, fetches that URL: Node loads undici
+ * for `fetch` and compiles the module through a streamed Response. That was
+ * 36–50 ms of every app's startup, where the same bytes handed over as
+ * `wasmBinary` compile in 9–13.
+ */
+async function embeddedAssembly() {
+  try {
+    const [{ createRequire }, { readFileSync }, path, { pathToFileURL }] =
+      await Promise.all([
+        import('node:module'),
+        import('node:fs'),
+        import('node:path'),
+        import('node:url'),
+      ]);
+    const src = path.dirname(
+      createRequire(import.meta.url).resolve('yoga-layout/load'),
+    );
+    const loader = path.join(src, '..', 'binaries', 'yoga-wasm-base64-esm.js');
+    const embedded =
+      /"data:application\/octet-stream;base64,([A-Za-z0-9+/=]+)"/.exec(
+        readFileSync(loader, 'utf8'),
+      );
+    if (!embedded) return null;
+    const [{ default: factory }, { default: wrapAssembly }] = await Promise.all(
+      [
+        import(pathToFileURL(loader).href),
+        import(pathToFileURL(path.join(src, 'wrapAssembly.js')).href),
+      ],
+    );
+    return wrapAssembly(
+      await factory({ wasmBinary: Buffer.from(embedded[1], 'base64') }),
+    );
+  } catch {
+    // a layout the next yoga-layout moved, or no disk to read it from
+    return null;
+  }
+}
+
 /**
  * Load the layout engine's WebAssembly. Idempotent, and resolves with the
  * same `Yoga` object this module exports — `createRoot()` awaits it, so
@@ -117,11 +161,13 @@ let loading = null;
  */
 export function loadLayout() {
   if (!loading) {
-    loading = loadYoga().then((assembly) => {
-      for (const name of ['Node', 'Config']) delete Yoga[name]; // drop the throwing getters
-      Object.assign(Yoga, assembly);
-      return Yoga;
-    });
+    loading = embeddedAssembly()
+      .then((assembly) => assembly ?? loadYoga())
+      .then((assembly) => {
+        for (const name of ['Node', 'Config']) delete Yoga[name]; // drop the throwing getters
+        Object.assign(Yoga, assembly);
+        return Yoga;
+      });
   }
   return loading;
 }