react-x11 2.18.4 → 2.18.5

package/package.json

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

package/src/backend/context2d.js

@@ -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;
   }
 
@@ -670,6 +681,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 +746,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 +794,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 +802,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/gloverlay.js

@@ -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/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;
       }
     }

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

package/src/nodes/scrollblit.js

@@ -970,12 +970,22 @@ export class WindowScrollBlit {
         if (ancestors.has(child)) {
           // on the path down: its solid background under the viewport is
           // translation-invariant, its border ring and corners are not.
-          // The widest side is conservative for a non-uniform border
+          // The widest side is conservative for a non-uniform border.
+          //
+          // Rounded, because that is where the ring ends for what is
+          // inside it: at a fractional scale a 1px border is 1.25 or 1.5
+          // device pixels, and layout puts the children at the rounded
+          // inner edge — so the column the ring reaches a quarter of the
+          // way into is a child's, painted over whole. Tested exactly, that
+          // column refused every blit under a bordered box at 125%, the
+          // scale most Windows laptops run at.
           const bw = resolveBorderWidths(
             child.style ?? EMPTY_STYLE,
             child.direction,
           );
-          const ring = Math.max(bw.top, bw.right, bw.bottom, bw.left);
+          const ring = Math.round(
+            Math.max(bw.top, bw.right, bw.bottom, bw.left),
+          );
           if (ring > 0 && !rectContains(insetRect(child.abs, ring), vp)) {
             return false;
           }

package/src/nodes/window/flush.js

@@ -326,9 +326,26 @@ export class WindowFlush {
     // list was still taken (its bookkeeping is what keeps the two paths one
     // code) and is simply not consumed; the presenter diffs at the layer.
     if (typeof this.window.presentFrame === 'function') {
-      // the panes are no presenter's: they paint from their damage either way
-      if (this._overlaid.size !== 0) this._paintOverlays(paneDamage);
-      this.window.presentFrame(this, damage);
+      // A presenter whose frame is the ordinary paint walk — a pass per
+      // damage rect into a context, the Windows window's — paints through
+      // the paint cache as an ntk window does, and says so
+      // (`usesPaintCache`). Without it every `<canvas cacheKey>` drew
+      // afresh in every pass that reached it, and a shadow, which is only
+      // ever baked into the cache (issue #413), was not drawn at all. The
+      // retained layer presenter paints nodes onto layers of their own and
+      // keeps to itself.
+      const cache = this.window.usesPaintCache
+        ? (this._paintCache ??= paintCacheFor(this.app))
+        : null;
+      cache?.beginFrame();
+      try {
+        // the panes are no presenter's: they paint from their damage either
+        // way
+        if (this._overlaid.size !== 0) this._paintOverlays(paneDamage);
+        this.window.presentFrame(this, damage);
+      } finally {
+        cache?.endFrame();
+      }
       this.app._reactX11Startup?.painted();
       return true;
     }

package/src/win32/a11y.js

@@ -36,6 +36,22 @@ import { onApp } from '../trace-registry.js';
 
 const TRACE = process.env.REACT_X11_TRACE_A11Y === '1';
 
+/**
+ * How often commits may push the mirror, in ms. A commit that follows a
+ * quiet spell pushes at once; a stream of them — a pan, a drag, a value
+ * ticking — pushes once per interval, the last of them catching up.
+ *
+ * UIA's clients are almost always listening on a desktop Windows (the
+ * touch keyboard, the text services and others ask for the tree), so the
+ * push is not the rare case the listening gate makes it elsewhere: a walk
+ * of the window and a marshalled diff, on every commit. For a graph pane
+ * whose every item moves on every step of a pan that was 1.6 ms of each
+ * frame. A screen reader reads positions on demand and does not need
+ * sixty of them a second; a focus change, which it is waiting on, still
+ * pushes at once (`hooks.focus`), as does an announcement.
+ */
+const COMMIT_PUSH_MS = 100;
+
 // --------------------------------------------------------------------------
 // The one translation that is Windows' own
 // --------------------------------------------------------------------------
@@ -300,6 +316,9 @@ export class Win32Accessibility {
     this._pushed = new Set();
     this._unsubscribes = [];
     this.dead = false;
+    /** When a commit last pushed, and the push a stream of commits owes. */
+    this._lastCommitPush = -Infinity;
+    this._trailing = null;
   }
 
   _idOf(node) {
@@ -388,15 +407,29 @@ export class Win32Accessibility {
    * commit and paying nothing — the same shape as the AT-SPI bridge's "no
    * bus, no work".
    *
+   * *Nobody* is asked per window where the bridge can say (`uiaActive`):
+   * whether a client has read this window's tree in the last few seconds.
+   * UIA's own answer, `UiaClientsAreListening`, is whether any client on
+   * the desktop is subscribed to anything, and on a Windows running the
+   * touch keyboard or the text services that is always yes — so every
+   * commit walked and diffed the window for a mirror nobody read. A client
+   * that comes back after a quiet spell is noticed on its first read and
+   * asks for a fresh push (`wanted`). `global` keeps the desktop-wide answer
+   * for a focus change and an announcement: a client subscribed to focus
+   * events reads the focused element the moment it hears of it, before
+   * any read of ours could say it was there.
+   *
    * With one exception, which is what makes the gate safe: **every window is
    * pushed once regardless.** A client's first `WM_GETOBJECT` has to find a
    * tree, and it arrives before anything in this process knows a client
    * exists. After that first push the mirror is live, and a client attaching
    * later asks for a fresh one (`uia-wanted`).
    */
-  flush({ force = false } = {}) {
+  flush({ force = false, global = false } = {}) {
     if (this.dead || this._dirty.size === 0) return;
-    const listening = force || this._native.uiaListening();
+    const perWindow =
+      !force && !global && typeof this._native.uiaActive === 'function';
+    const listening = force || (!perWindow && this._native.uiaListening());
     const windows = [...this._dirty];
     this._dirty.clear();
     for (const win of windows) {
@@ -409,12 +442,37 @@ export class Win32Accessibility {
         this._dirty.add(win);
         continue;
       }
-      if (!listening && this._pushed.has(wnd.id)) continue;
+      if (
+        !listening &&
+        this._pushed.has(wnd.id) &&
+        !(perWindow && this._native.uiaActive(wnd.id))
+      ) {
+        continue;
+      }
       this._pushed.add(wnd.id);
       this._push(win);
     }
   }
 
+  /** A commit's push, at most once per `COMMIT_PUSH_MS`. */
+  _commitFlush() {
+    if (this.dead || this._dirty.size === 0) return;
+    const now = performance.now();
+    const wait = this._lastCommitPush + COMMIT_PUSH_MS - now;
+    if (wait <= 0) {
+      this._lastCommitPush = now;
+      this.flush();
+      return;
+    }
+    if (this._trailing) return;
+    this._trailing = setTimeout(() => {
+      this._trailing = null;
+      this._lastCommitPush = performance.now();
+      this.flush();
+    }, wait);
+    this._trailing.unref?.();
+  }
+
   /** A window's HWND exists now, so what is owed for it can be pushed. */
   windowReady(wnd) {
     const win = this.toplevels.find((w) => w.window === wnd);
@@ -546,12 +604,12 @@ export class Win32Accessibility {
       // Pushed now rather than at the next commit: a focus change is what a
       // screen reader is waiting for, and the event has to follow an update
       // that already carries the new state or the client reads the old one.
-      this.flush();
+      this.flush({ global: true });
       const wnd = this._windowOf(win);
       if (wnd && next) this._native.uiaFocusChanged(wnd.id, this._idOf(next));
     };
     hooks.windowFocus = (win) => this._dirty.add(win);
-    hooks.commit = () => this.flush();
+    hooks.commit = () => this._commitFlush();
     hooks.announce = (text, opts) => {
       const win =
         this.toplevels.find((w) => w.events?.windowFocused) ??
@@ -562,7 +620,7 @@ export class Win32Accessibility {
       // The window must be in the mirror before anything can be announced
       // from it, which on the first announcement of a session it may not be.
       this._dirty.add(win);
-      this.flush();
+      this.flush({ global: true });
       return Boolean(
         this._native.uiaAnnounce(wnd.id, String(text), !opts?.assertive),
       );
@@ -579,6 +637,8 @@ export class Win32Accessibility {
   bury() {
     if (this.dead) return;
     this.dead = true;
+    if (this._trailing) clearTimeout(this._trailing);
+    this._trailing = null;
     for (const key of Object.keys(hooks)) hooks[key] = null;
     for (const unsubscribe of this._unsubscribes) unsubscribe();
     this._unsubscribes = [];

package/src/win32/app.js

@@ -16,6 +16,8 @@ import { setScreensForTests } from '../screens.js';
 import { createBezels } from './bezels.js';
 import { Win32InputMethod } from './ime.js';
 import { decodeKey, modifierMask } from './keymap.js';
+import { refuseOverlay } from '../gloverlay.js';
+import { Win32OverlayPane } from './overlay.js';
 import { Win32PaneHost } from './panehost.js';
 import { Win32PaneWindow } from './panewindow.js';
 import { Win32Surface } from './surface.js';
@@ -80,6 +82,8 @@ export class Win32App {
     // an in-app drop reads to keep `e.items` by reference (src/dnd.js).
     this._activeDrag = null;
     this._rafQueue = [];
+    /** Windows holding input for the next frame (`Win32Window._queueInput`). */
+    this._inputHeld = new Set();
     this._frameTimer = null;
     /** A frame has been asked for and not yet delivered — one outstanding
      *  request at a time, whether the clock or the timer is answering it. */
@@ -118,6 +122,7 @@ export class Win32App {
     this.nativeBezels = null;
 
     this.fonts = new Win32FontManager(native);
+    this._installOverlay();
 
     const screens = native.listScreens?.() ?? [];
     const primary = screens[0] ?? {
@@ -275,10 +280,19 @@ export class Win32App {
    * A copy of the set is walked because `onDismiss` is what unmounts the
    * popup, and unmounting runs `ungrabPointer` — which deletes from the set
    * this loop would otherwise still be reading.
+   *
+   * `open` is the popups to judge — for a press, the ones that were open
+   * *before* it (`_route`). The press is delivered first, and a press that
+   * opens a menu — a `<Select>`, a menu button — opens it and takes its
+   * grab synchronously, in the same dispatch; judged afterwards, the new
+   * menu heard the press that opened it as a press outside itself and
+   * closed at once. Every `<Select>` did that. An X11 grab taken during a
+   * press does not see that press either.
    */
-  _dismissOutsidePopups(pressed) {
+  _dismissOutsidePopups(pressed, open = null) {
     if (this._dismissOnOutside.size === 0) return;
-    for (const wnd of [...this._dismissOnOutside]) {
+    for (const wnd of open ?? [...this._dismissOnOutside]) {
+      if (!this._dismissOnOutside.has(wnd)) continue;
       if (wnd === pressed) continue;
       if (wnd.destroyed) {
         this._dismissOnOutside.delete(wnd);
@@ -367,6 +381,29 @@ export class Win32App {
     return new Win32PaneHost(this, wnd);
   }
 
+  /**
+   * The pane a `<glarea>`'s children are drawn on (src/gloverlay.js): a
+   * composited layer above the window's swap chains, where the children's
+   * transparent pixels show the GL frame (src/win32/overlay.js). Having this
+   * at all is how the overlay knows it composites — and the X11 fallback it
+   * would otherwise reach for, a plain child window, is a GL surface here.
+   * Installed in the constructor where the bridge has layers.
+   */
+  _installOverlay() {
+    if (typeof this._native.layerCreate === 'function') {
+      this.createOverlayPane = (attributes) =>
+        new Win32OverlayPane(this, attributes);
+      return;
+    }
+    refuseOverlay(
+      this,
+      "this @windowkit/win32 predates layers, which are what a <glarea>'s " +
+        'children are drawn on here, and a child window on this backend is ' +
+        'a GL surface of its own. Update the bridge, or draw the overlay ' +
+        'beside the surface',
+    );
+  }
+
   /**
    * The pane process's end of the frame channel: geometry and input in,
    * presents out. Feature-detected by the pane bootstrap
@@ -421,7 +458,18 @@ export class Win32App {
 
   _requestFrame(cb, wnd = null) {
     this._rafQueue.push({ cb, wnd });
-    if (this._framePending || this._closed) return this._rafQueue.length;
+    this._armFrame();
+    return this._rafQueue.length;
+  }
+
+  /** A window is holding input for the next frame: there has to be one. */
+  _holdInput(wnd) {
+    this._inputHeld.add(wnd);
+    this._armFrame();
+  }
+
+  _armFrame() {
+    if (this._framePending || this._closed) return;
     this._framePending = true;
     // One tick, from the compositor if this Windows has a clock to wait on.
     // It answers false when it has not, and then — and only then — a timer.
@@ -434,7 +482,7 @@ export class Win32App {
         this._tickFrames();
       }, CLOCK_WATCHDOG_MS);
       this._frameTimer.unref?.();
-      return this._rafQueue.length;
+      return;
     }
     this._frameTimer = setTimeout(() => {
       this._frameTimer = null;
@@ -442,10 +490,24 @@ export class Win32App {
       this._tickFrames();
     }, FRAME_INTERVAL_MS);
     this._frameTimer.unref?.();
-    return this._rafQueue.length;
   }
 
   _tickFrames() {
+    // The input held for this frame goes first: what it changes is what the
+    // frame paints, and the frames its handlers ask for are this one —
+    // the callbacks are taken after it.
+    if (this._inputHeld.size !== 0) {
+      const held = [...this._inputHeld];
+      this._inputHeld.clear();
+      for (const wnd of held) {
+        if (wnd.destroyed) continue;
+        try {
+          wnd._flushInput();
+        } catch (err) {
+          if (process.env.NODE_ENV !== 'production') console.error(err);
+        }
+      }
+    }
     const due = this._rafQueue;
     this._rafQueue = [];
     const now = performance.now();
@@ -515,6 +577,11 @@ export class Win32App {
 
     const wnd = this._windows.get(event.id);
     if (!wnd) return;
+    // Whatever this is happened after the motion and the wheel the window is
+    // holding for its next frame, so they go first (`_queueInput`).
+    if (event.type !== 'mousemove' && event.type !== 'wheel') {
+      wnd._flushInput?.();
+    }
     switch (event.type) {
       case 'window-ready':
         wnd._onReady(event.a, event.b);
@@ -533,7 +600,7 @@ export class Win32App {
         break;
       }
       case 'mousemove':
-        wnd.emit('mousemove', {
+        wnd._queueInput('mousemove', {
           x: event.a,
           y: event.b,
           ...rootOf(wnd, event),
@@ -545,7 +612,7 @@ export class Win32App {
       case 'wheel': {
         const deltaX = event.c;
         const deltaY = event.d;
-        wnd.emit('wheel', {
+        wnd._queueInput('wheel', {
           name: 'wheel',
           x: event.a,
           y: event.b,
@@ -564,7 +631,13 @@ export class Win32App {
         break;
       }
       case 'mousedown':
-      case 'mouseup':
+      case 'mouseup': {
+        // the menus this press may close: those open before it (see
+        // `_dismissOutsidePopups`)
+        const open =
+          event.type === 'mousedown' && this._dismissOnOutside.size !== 0
+            ? [...this._dismissOnOutside]
+            : null;
         // `keycode` is the button, numbered as X numbers them — the bridge
         // already speaks that vocabulary. It used to be hardcoded to 1, so
         // a right-click arrived as a left-click and no context menu ever
@@ -579,8 +652,9 @@ export class Win32App {
         // A press in one window is a press *outside* every open menu but the
         // one it landed in — which on X11 the grab would have delivered to
         // the menu instead of to this window.
-        if (event.type === 'mousedown') this._dismissOutsidePopups(wnd);
+        if (open) this._dismissOutsidePopups(wnd, open);
         break;
+      }
       case 'keydown':
       case 'keyup': {
         // The bridge asked the active layout what the key types before the

package/src/win32/fonts.js

@@ -187,13 +187,25 @@ class Win32Face {
     this.italic = style === 'italic' || style === 'oblique';
   }
 
+  /**
+   * Kept per size: a face's metrics never change, and the bridge answers
+   * each call by resolving the family through DirectWrite again. A trimmed
+   * `<text>` asks on every placement of its layout (`_trim`), which on a
+   * graph of widget cards was every body on every step of a drag.
+   */
   metrics(size) {
-    return this._manager._native.fontMetrics(
-      this.family,
-      size,
-      this.weight,
-      this.italic,
-    );
+    this._metrics ??= new Map();
+    let m = this._metrics.get(size);
+    if (m === undefined) {
+      m = this._manager._native.fontMetrics(
+        this.family,
+        size,
+        this.weight,
+        this.italic,
+      );
+      this._metrics.set(size, m);
+    }
+    return m;
   }
 
   /**
@@ -474,7 +486,14 @@ export class Win32FontManager {
   }
 
   match(family, options = {}) {
-    const name = familyOf(this._native, family);
+    // the stack resolved once: a named family is a DirectWrite lookup, and
+    // every text layout asks
+    this._families ??= new Map();
+    let name = this._families.get(family);
+    if (name === undefined) {
+      name = familyOf(this._native, family);
+      this._families.set(family, name);
+    }
     const key = `${name}|${weightOf(options.weight)}|${options.style ?? 'normal'}`;
     let face = this._faces.get(key);
     if (!face) {

package/src/win32/overlay.js

@@ -0,0 +1,244 @@
+// The pane a `<glarea>`'s children are drawn on, on the Windows backend: a
+// DirectComposition visual with a premultiplied surface of its own, above
+// every swap chain in the window's tree (src/gloverlay.js; the bridge's
+// src/layer.cc).
+//
+// Without it a pane was whatever `app.createWindow({ parent })` answers,
+// which here is a GL surface (src/win32/glarea.js) — a WGL context and a
+// swap chain per pane, and no 2D context at all. The children were laid out,
+// claimed and painted nowhere, and a component that drew their cards under
+// them had nothing left on screen where they were.
+//
+// Composited, like the Cocoa pane (src/cocoa/overlay.js): what the children
+// leave transparent shows the GL frame, and a translucent fill, an
+// antialiased edge or a shadow blends with it. Text on it is grayscale
+// rather than ClearType, which Direct2D does on any surface with alpha
+// (docs/windows.md §Text).
+//
+// Drawn like the window it lives in (src/win32/window.js): a DirectComposition
+// surface hands out a context per `BeginDraw`, valid until `EndDraw`, so the
+// overlay's passes come through `paintPasses` — one `BeginDraw` each — rather
+// than through a context that is always there. `present` asks for the commit
+// the window's own frame makes, so a pane and the window land together.
+import { BackendContext2D } from '../backend/context2d.js';
+
+export class Win32OverlayPane {
+  constructor(app, options) {
+    this.app = app;
+    this.parent = options.parent;
+    this._native = app._native;
+    this.destroyed = false;
+    this.rect = {
+      x: options.x ?? 0,
+      y: options.y ?? 0,
+      width: options.width ?? 1,
+      height: options.height ?? 1,
+    };
+    // the bridge's layer, made once the window has a composition tree to
+    // hang it in — the tree renders before the window is ready
+    this._layer = 0;
+    this._visible = true;
+    // non-zero only between a pass's BeginDraw and its EndDraw
+    this._surface = 0;
+    this._gen = 0;
+    this._ctx = null;
+    this._handlers = {};
+    this._ensureLayer();
+  }
+
+  get width() {
+    return this.rect.width;
+  }
+
+  get height() {
+    return this.rect.height;
+  }
+
+  on(name, fn) {
+    (this._handlers[name] ??= []).push(fn);
+  }
+
+  emit(name, ev) {
+    for (const fn of this._handlers[name] ?? []) fn(ev);
+  }
+
+  _ensureLayer() {
+    if (this._layer || this.destroyed) return this._layer;
+    if (!this.parent?._composed || this.parent.destroyed) return 0;
+    const { x, y, width, height } = this.rect;
+    this._layer = this._native.layerCreate(
+      this.parent.id,
+      Math.round(x),
+      Math.round(y),
+      Math.max(1, Math.round(width)),
+      Math.max(1, Math.round(height)),
+    );
+    if (this._layer && !this._visible) {
+      this._native.layerSetVisible(this._layer, false);
+    }
+    return this._layer;
+  }
+
+  /** Geometry in device px, the unit the overlay's rects are in. */
+  setState(rect) {
+    if (this.destroyed) return;
+    this.rect = rect;
+    if (!this._layer) return;
+    this._native.layerSetRect(
+      this._layer,
+      Math.round(rect.x),
+      Math.round(rect.y),
+      Math.max(1, Math.round(rect.width)),
+      Math.max(1, Math.round(rect.height)),
+    );
+    this._owe();
+  }
+
+  map() {
+    this._setVisible(true);
+  }
+
+  unmap() {
+    this._setVisible(false);
+  }
+
+  _setVisible(on) {
+    if (this._visible === on) return;
+    this._visible = on;
+    if (!this._layer || this.destroyed) return;
+    this._native.layerSetVisible(this._layer, on);
+    this._owe();
+  }
+
+  getContext() {
+    if (!this._ctx) {
+      this._ctx = new BackendContext2D(
+        this._native,
+        () => this._surface,
+        () => this._gen,
+      );
+      this._ctx._fonts = this.app.fonts;
+    }
+    return this._ctx;
+  }
+
+  /**
+   * The overlay's passes, each its own `BeginDraw` — `rect`s in window
+   * coordinates, each painted by `paint(ctx, rect)` with the context drawing
+   * in window coordinates too. A pass is grown to whole pixels first:
+   * everything inside a `BeginDraw` rect is undefined until it is painted,
+   * so the rect the painter clears and the rect the surface hands out have
+   * to be the same one.
+   */
+  paintPasses(passes, paint) {
+    if (this.destroyed) return;
+    if (!this._ensureLayer()) {
+      // Nothing to draw into yet. The overlay believes these passes landed,
+      // so it is told they did not: all of the pane is owed, on the next
+      // frame, when the window will have a tree to hang the layer in.
+      setImmediate(() => {
+        if (!this.destroyed) this.emit('draw', {});
+      });
+      return;
+    }
+    const ctx = this.getContext();
+    const ox = Math.round(this.rect.x);
+    const oy = Math.round(this.rect.y);
+    let drawn = false;
+    for (const pass of passes) {
+      const x0 = Math.max(Math.floor(pass.x), ox);
+      const y0 = Math.max(Math.floor(pass.y), oy);
+      const x1 = Math.min(
+        Math.ceil(pass.x + pass.width),
+        ox + Math.max(1, Math.round(this.rect.width)),
+      );
+      const y1 = Math.min(
+        Math.ceil(pass.y + pass.height),
+        oy + Math.max(1, Math.round(this.rect.height)),
+      );
+      if (x1 <= x0 || y1 <= y0) continue;
+      const handle = this._native.layerBeginDraw(
+        this._layer,
+        x0 - ox,
+        y0 - oy,
+        x1 - x0,
+        y1 - y0,
+      );
+      if (!handle) continue;
+      this._surface = handle;
+      this._gen++;
+      try {
+        // the surface draws in the layer's own coordinates; the painter
+        // draws in the window's
+        ctx.save();
+        try {
+          ctx.translate(-ox, -oy);
+          paint(ctx, { x: x0, y: y0, width: x1 - x0, height: y1 - y0 });
+        } finally {
+          ctx.restore();
+        }
+        drawn = true;
+      } finally {
+        this._surface = 0;
+        this._native.layerEndDraw(this._layer);
+      }
+    }
+    if (drawn) this._owe();
+  }
+
+  /**
+   * Move the pixels of `rect` (pane coordinates, device px) by (dx, dy) —
+   * ntk `Window.scrollRegion`'s contract: the band that survives the shift
+   * inside `rect` moves, the rest of it is left as it was, and false means
+   * nothing moved, so the caller repaints instead (issue #644).
+   */
+  scrollRegion(rect, dx, dy) {
+    if (this.destroyed || !this._layer) return false;
+    if (!Number.isInteger(dx) || !Number.isInteger(dy)) return false;
+    const moved = this._native.layerScroll(
+      this._layer,
+      Math.round(rect.x),
+      Math.round(rect.y),
+      Math.round(rect.width),
+      Math.round(rect.height),
+      dx,
+      dy,
+    );
+    if (moved) this._owe();
+    return Boolean(moved);
+  }
+
+  /** What was painted or moved, onto the screen with the window's frame. */
+  present() {
+    this._owe();
+  }
+
+  /**
+   * A commit is owed. The window's frame makes one after the overlay has
+   * painted (`presentFrame`, src/win32/window.js), so a pane's pixels and
+   * the window's land together; a change made outside a frame — a pane
+   * hidden between two — is committed on a microtask instead, once.
+   */
+  _owe() {
+    const wnd = this.parent;
+    if (!wnd || wnd.destroyed) return;
+    if (wnd._owesCommit) return;
+    wnd._owesCommit = true;
+    queueMicrotask(() => {
+      if (!wnd._owesCommit) return;
+      wnd._owesCommit = false;
+      if (!wnd.destroyed) this._native.commit();
+    });
+  }
+
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this._ctx = null;
+    if (this._layer) {
+      this._native.layerDestroy(this._layer);
+      this._layer = 0;
+      this._owe();
+    }
+  }
+}

package/src/win32/panewindow.js

@@ -287,6 +287,12 @@ export class Win32PaneWindow {
     }
   }
 
+  /** The frame is the ordinary paint walk, so it paints through core's
+   * paint cache (src/nodes/window/flush.js), as the window does. */
+  get usesPaintCache() {
+    return true;
+  }
+
   /**
    * No scroll blit. The fast path moves a band of pixels *within the surface
    * being drawn into*, and this one is `STALE_FRAMES` frames behind — the

package/src/win32/window.js

@@ -53,6 +53,11 @@ export class Win32Window {
     this._pendingFrames = [];
     this._owesFullPaint = false;
     this._dirty = false;
+    // a pane over a `<glarea>` here changed and its commit is this frame's
+    // (src/win32/overlay.js)
+    this._owesCommit = false;
+    // pointer motion and wheel held for the next frame (`_queueInput`)
+    this._pendingInput = null;
 
     // `overrideRedirect` is how a `<popup>` says what it is — a menu, a
     // select's list, a tooltip. On X11 it means "the window manager does not
@@ -104,6 +109,58 @@ export class Win32Window {
     for (const fn of this._handlers[name] ?? []) fn(ev);
   }
 
+  /**
+   * Hold a pointer motion or a wheel for the next frame, merged with any
+   * already held: ntk's coalescing on X11 (its lib/window.js,
+   * `_deliverEvent`), which the rest of the event path was written against
+   * — src/events.js paces motion on the strength of it.
+   *
+   * Windows merges WM_MOUSEMOVE itself, but only while a queue waits to be
+   * read, and the bridge reads its messages on a UI thread of its own and
+   * posts every one of them to the loop. So a mouse reporting a thousand
+   * times a second was a thousand events on the loop, and a handler slower
+   * than a millisecond fell behind the pointer — then replayed every
+   * position it had missed, a frame of work each, long after the pointer
+   * had stopped: a box selection over a large graph trailed the pointer by
+   * seconds. Held here, a burst is one event a frame: the newest motion,
+   * with the rest riding along in `ev.coalesced`, and the wheel's deltas
+   * added up at its last position.
+   */
+  _queueInput(name, ev) {
+    const pending = (this._pendingInput ??= new Map());
+    const prev = pending.get(name);
+    if (!prev) {
+      ev.coalesced = [ev];
+      pending.set(name, ev);
+    } else if (name === 'wheel') {
+      // scroll distance adds up — the last delta alone would throw away all
+      // but the final step of a fast scroll
+      prev.coalesced.push(ev);
+      prev.deltaX += ev.deltaX;
+      prev.deltaY += ev.deltaY;
+      prev.x = ev.x;
+      prev.y = ev.y;
+      prev.rootx = ev.rootx;
+      prev.rooty = ev.rooty;
+      prev.smooth = prev.smooth || ev.smooth;
+    } else {
+      ev.coalesced = prev.coalesced;
+      ev.coalesced.push(ev);
+      pending.set(name, ev);
+    }
+    this.app._holdInput(this);
+  }
+
+  /** Deliver what `_queueInput` held: at the top of the next frame, and
+   *  before any other event of this window's, so a handler sees events in
+   *  the order they happened — a drag its last move, then the release. */
+  _flushInput() {
+    const pending = this._pendingInput;
+    if (pending === null) return;
+    this._pendingInput = null;
+    for (const [name, ev] of pending) this.emit(name, ev);
+  }
+
   /**
    * The bridge says the HWND exists. Composition is set up here and not at
    * construction because there is no HWND to target until now — the command
@@ -168,6 +225,7 @@ export class Win32Window {
   destroy() {
     if (this.destroyed) return;
     this.destroyed = true;
+    this._pendingInput = null;
     this._native.destroyWindow?.(this.id);
     this.app._unregister(this);
   }
@@ -577,7 +635,13 @@ export class Win32Window {
         this._native.endDraw(this.id);
       }
     }
-    if (painted) this._native.commit();
+    // …and the panes over a `<glarea>` in this window, painted before this
+    // (src/win32/overlay.js), in the same commit: a frame whose only change
+    // was theirs still owes one
+    if (painted || this._owesCommit) {
+      this._owesCommit = false;
+      this._native.commit();
+    }
   }
 
   /**
@@ -604,6 +668,12 @@ export class Win32Window {
     );
   }
 
+  /** The frame is the ordinary paint walk, a pass per damage rect, so it
+   * paints through core's paint cache (src/nodes/window/flush.js). */
+  get usesPaintCache() {
+    return true;
+  }
+
   /** DirectComposition does not hold a frame back the way an X server's fence
    * or a WindowServer's buffer does: Commit is asynchronous and the surface
    * retains its own pixels. So there is never a frame in flight to wait for. */