react-x11 2.18.5 → 2.18.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.18.5",
+  "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];
 
@@ -558,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

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 {

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

@@ -477,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/paint.js

@@ -3,7 +3,7 @@
 // window, background first.
 
 import { isPlaced } from '../layouts.js';
-import { Surface } from '../ntk.js';
+import { Surface } from '../offscreen.js';
 import { isPaintedColor } from './boxpaint.js';
 import { DAMAGE_SLOP } from './damage.js';
 import { DRAWN_KINDS } from './kinds.js';

package/src/nodes/scrollable.js

@@ -301,11 +301,11 @@ export const Scrollable = (Base) =>
             // for a `<glarea>` child's move that this pane rides (issue
             // #644): its box claimed nothing, and a pane laid out again may
             // have moved rows the move's copy carries where they were.
-            if (clamped || layoutDiff.ride) outer(vp);
+            if (clamped || layoutDiff.ride) outer(vp, this);
           } else {
-            layoutDiff.sink = (rect) => {
+            layoutDiff.sink = (rect, node) => {
               const clipped = intersectRects(rect, vp);
-              if (clipped) outer(clipped);
+              if (clipped) outer(clipped, node);
             };
           }
           this._claimThumbs(thumbsWere, outer);
@@ -863,8 +863,8 @@ export const Scrollable = (Base) =>
         if (sameThumb(before, after)) continue;
         // a pixel of slop for the rounded corners' antialiasing, as the
         // blit's own thumb repair takes
-        if (before) sink(insetRect(before, -1));
-        if (after) sink(insetRect(after, -1));
+        if (before) sink(insetRect(before, -1), this);
+        if (after) sink(insetRect(after, -1), this);
       }
     }
 

package/src/nodes/text.js

@@ -2,7 +2,7 @@
 // selection paints, and the glyph strip.
 
 import { localTextStyleChanged, TEXT_REMEASURE } from '../styles.js';
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 import { hooks as a11yHooks } from '../a11y.js';
 import { codePointAtOffset, codeUnitOffsets } from '../textrange.js';
 import { NO_DAMAGE } from './damage.js';

package/src/nodes/window/capabilities.js

@@ -1,7 +1,7 @@
 // What a window can paint: compositing and ARGB transparency, the window
 // background, and the capabilities `@supports` blocks read.
 
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 import {
   argbVisual,
   compositingActive,

package/src/nodes/window/flush.js

@@ -6,7 +6,7 @@ import { resolveFramePolicy } from '../../pacing.js';
 import { paintCacheFor } from '../../paintcache.js';
 import { hooks as traceHooks } from '../../trace-registry.js';
 import { now } from '../animation.js';
-import { FULL_DAMAGE, layoutDiff, addDamageRect } from '../damage.js';
+import { FULL_DAMAGE, layoutDiff } from '../damage.js';
 import { BLIT_POISONED } from '../scrollblit.js';
 import { debugPaint } from './debugpaint.js';
 
@@ -204,12 +204,10 @@ export class WindowFlush {
         (panes && this._paneDamage !== FULL_DAMAGE)
       ) {
         const cap = this._damageRectCap();
-        layoutDiff.sink = (rect) => {
-          if (this._damage !== FULL_DAMAGE) {
-            layoutMoved = true;
-            this._damage = addDamageRect(this._damage, rect, cap);
-          }
-          if (panes) this._addPaneDamage(rect);
+        // each to the lists that paint the node that moved
+        // (`_claimLayoutMove`): a move inside a `<glarea>` is its panes'
+        layoutDiff.sink = (rect, node) => {
+          if (this._claimLayoutMove(rect, node, cap)) layoutMoved = true;
         };
       }
       try {
@@ -259,14 +257,8 @@ export class WindowFlush {
         if (sv && !sv._recordBlitClaim(after)) {
           sv._pendingBlitFrom = BLIT_POISONED;
         }
-        if (this._damage !== FULL_DAMAGE) {
-          this._damage = addDamageRect(
-            this._damage,
-            after,
-            this._damageRectCap(),
-          );
-        }
-        if (panes) this._addPaneDamage(after);
+        // to the lists that paint it, as the layout diff's claims go
+        this._claimLayoutMove(after, node, this._damageRectCap());
       }
       this._reflowed.clear();
     } else if (this._reflowed.size) {

package/src/ntk.js

@@ -22,43 +22,20 @@
 // `@react-x11/components` (`<Markdown>`, `<Formula>`). `SvgView` is still
 // here; a drawing is not a document.
 //
-// One name is not a plain re-export. `Surface` below asks the app it is
+// One name is not a plain re-export. `Surface` (src/offscreen.js) asks the app it is
 // handed for the implementation, because ntk's own is a pixmap and a
 // Picture — an X connection's — and a component allocates its buffer
 // without knowing which backend it was mounted on. This subpath is where a
 // drawing-adjacent name gets its backend-neutral answer; the X-only names
 // (`createClient`, `Pixmap`, `Picture`, `XEmbedSocket`) stay X-only.
-import { Surface as NtkSurface } from 'ntk';
+import * as ntk from 'ntk';
+
+import { adoptNtk } from './ntkroot.js';
 
 export * from 'ntk';
 export { default } from 'ntk';
+export { Surface } from './offscreen.js';
 
-/**
- * ntk's offscreen `Surface`, on whichever backend `app` is.
- *
- * An app that makes its own surfaces answers `createSurface(options)` —
- * the Cocoa app does, over a CG bitmap (src/cocoa/surface.js), the Wayland
- * app over a GL render target (src/wayland/surface.js) — and an ntk
- * connection has no such method and gets ntk's pixmap. The result is
- * whichever implementation answered, not an instance of this class: the
- * contract is the shape — `width`/`height`, `getContext('2d')`, `render`,
- * `clear`, `copyWithin`, `destroy`, and `ctx.drawImage(surface, …)` —
- * (docs/extending.md "Scrolling the pixels, not just the offset"), and
- * nothing needs `instanceof`.
- *
- * Part of that shape is that a context may be **held**: ntk tells a caller
- * doing many draws to take `getContext('2d')` once rather than one per
- * frame, and that holds on every backend here, including the ones where a
- * surface is a GPU target sharing a device with the window (#566). Draws
- * through a held context land in the surface whenever they are made, and
- * leave nothing for the caller to restore; `render(fn)` is the scoped form,
- * for a caller that wants a frame's clean transform and clip.
- */
-export class Surface {
-  constructor(app, options) {
-    if (typeof app?.createSurface === 'function') {
-      return app.createSurface(options);
-    }
-    return new NtkSurface(app, options);
-  }
-}
+// what src/ntkroot.js would load, already loaded: handed over rather than
+// imported twice
+adoptNtk(ntk);

package/src/ntkroot.js

@@ -0,0 +1,50 @@
+// ntk's package root — the X11 client, ntk's windows and their contexts, the
+// GL rungs, fontconfig and the rest of what the X11 backend draws with —
+// loaded where an X connection is made rather than wherever react-x11 is
+// imported.
+//
+// Only that backend needs it. The Cocoa, Windows and Wayland backends use a
+// colour parser, the shadow arithmetic, the image and SVG decoders and the
+// font parser of ntk's, each from a subpath of its own (`ntk/color`,
+// `ntk/shadow-math`, `ntk/image`, `ntk/svg`, `ntk/font`, …), and importing
+// the root for them was ~210 ms of module loading on Windows before the first
+// window of an app that never opens an X connection.
+//
+// `createRoot` loads it on the X11 path, before the connection, and for an
+// ntk app it is handed rather than makes — an app that could only have come
+// from ntk's own `createClient`, so the import is already done and this is a
+// lookup. `react-x11/ntk` hands over the root it imports. After that, the
+// code that only ever runs against an X connection reads it synchronously.
+let root = null;
+let loading = null;
+
+/** Load ntk's root, once; resolves to the module. */
+export function loadNtk() {
+  return (loading ??= import('ntk').then((mod) => (root = mod)));
+}
+
+/** A root imported some other way (`react-x11/ntk`): the same module, so
+ *  nothing is loaded twice by taking it. */
+export function adoptNtk(mod) {
+  root ??= mod;
+  loading ??= Promise.resolve(mod);
+}
+
+/** ntk's root, or null while no X connection has been made. */
+export function ntkRoot() {
+  return root;
+}
+
+/**
+ * ntk's root, for code that only runs against an X connection — which
+ * `createRoot` has loaded it for. Throws where it is not: reaching for an X
+ * resource on a backend that has none is the mistake, and this says so
+ * rather than failing inside ntk on an app that is not its own.
+ */
+export function x11Ntk(what) {
+  if (root) return root;
+  throw new Error(
+    `react-x11: ${what} needs an X connection, and this process has none ` +
+      '(ntk loads with the X11 backend, in createRoot).',
+  );
+}

package/src/offscreen.js

@@ -0,0 +1,33 @@
+// An offscreen surface on whichever backend an app is — what the paint cache,
+// a group's opacity and the symbol icons draw into, and what `react-x11/ntk`
+// hands a component as `Surface`.
+//
+// An app that makes its own surfaces answers `createSurface(options)` — the
+// Cocoa app over a CG bitmap (src/cocoa/surface.js), the Windows app over a
+// Direct2D bitmap, the Wayland app over a GL render target
+// (src/wayland/surface.js) — and an X connection has no such method and gets
+// ntk's pixmap, from ntk's root, which only an X connection loads
+// (src/ntkroot.js). The result is whichever implementation answered, not an
+// instance of this class: the contract is the shape — `width`/`height`,
+// `getContext('2d')`, `render`, `clear`, `copyWithin`, `destroy`, and
+// `ctx.drawImage(surface, …)` — (docs/extending.md "Scrolling the pixels, not
+// just the offset"), and nothing needs `instanceof`.
+//
+// Part of that shape is that a context may be **held**: ntk tells a caller
+// doing many draws to take `getContext('2d')` once rather than one per frame,
+// and that holds on every backend here, including the ones where a surface is
+// a GPU target sharing a device with the window (#566). Draws through a held
+// context land in the surface whenever they are made, and leave nothing for
+// the caller to restore; `render(fn)` is the scoped form, for a caller that
+// wants a frame's clean transform and clip.
+import { x11Ntk } from './ntkroot.js';
+
+export class Surface {
+  constructor(app, options) {
+    if (typeof app?.createSurface === 'function') {
+      return app.createSurface(options);
+    }
+    const { Surface: NtkSurface } = x11Ntk('an offscreen surface');
+    return new NtkSurface(app, options);
+  }
+}

package/src/paintcache.js

@@ -42,13 +42,13 @@
 // this package pins, and a named import of something absent is a *load-time*
 // SyntaxError — the whole renderer, not just the cache. Same shape as the
 // `typeof wnd?.scrollRegion !== 'function'` guard for ntk without #139.
-import * as ntk from 'ntk';
 
 // The surface this cache draws into is `react-x11/ntk`'s: ntk's pixmap on
 // an X connection, the app's own (`app.createSurface`) on a backend that
 // makes them — the Cocoa backend's CG bitmap. One import, so the cache
 // names neither.
-import { Surface } from './ntk.js';
+import { ntkRoot } from './ntkroot.js';
+import { Surface } from './offscreen.js';
 
 /** Stale pixels are undebuggable, and every other optimization here has an
  * escape hatch — see NO_SCROLL_BLIT. */
@@ -415,15 +415,19 @@ export class PaintCache {
   }
 }
 
-/** Whether the installed ntk can make the surfaces this needs. Older ones
- * cannot, and the answer is simply that nothing is cached. */
-export const paintCacheSupported = () => typeof ntk.Surface === 'function';
+/** Whether the installed ntk can make the surfaces this needs on an X
+ * connection — ntk's root, which only an X connection loads
+ * (src/ntkroot.js). Older ones cannot, and the answer is simply that nothing
+ * is cached there. */
+export const paintCacheSupported = () =>
+  typeof ntkRoot()?.Surface === 'function';
 
 /** Whether `app` can make an offscreen surface at all: an X connection
  * with the Render extension (ntk's pixmap surface), or a backend with a
  * surface of its own — the Cocoa app's `createSurface` (docs/macos.md). */
 const canMakeSurfaces = (app) =>
-  Boolean(app?.display?.Render) || typeof app?.createSurface === 'function';
+  (Boolean(app?.display?.Render) && paintCacheSupported()) ||
+  typeof app?.createSurface === 'function';
 
 /**
  * The cache for an app, created on first use. Null when caching is off, when
@@ -432,6 +436,6 @@ const canMakeSurfaces = (app) =>
  * there must paint live.
  */
 export function paintCacheFor(app) {
-  if (DISABLED || !paintCacheSupported() || !canMakeSurfaces(app)) return null;
+  if (DISABLED || !canMakeSurfaces(app)) return null;
   return (app._paintCache ??= new PaintCache(app));
 }

package/src/refresh/loader.js

@@ -326,6 +326,28 @@ function buildTransformer({ babel, jsxTransform, refreshTransform }, options) {
 
 let registered = false;
 
+/**
+ * Which files stay out of the hot graph: every package in node_modules,
+ * react-x11's own src/, and whatever the app's `ignore` names.
+ *
+ * Compared with forward slashes, whichever the path arrives with: on
+ * Windows a file path's separators are backslashes, and a forward-slash
+ * test let every package in node_modules into the hot graph — where the
+ * HMR layer's rewrite of a package's modules could leave one reading an
+ * import before it was bound (entities, under htmlparser2).
+ */
+export function hotIgnoreFor(ignore, srcDir = SRC_DIR) {
+  const src = srcDir.replaceAll('\\', '/');
+  return (path) => {
+    const slashed = path.replaceAll('\\', '/');
+    return (
+      slashed.includes('/node_modules/') ||
+      slashed.startsWith(src) ||
+      (ignore ? ignore(path) === true : false)
+    );
+  };
+}
+
 /**
  * Register the hot-reload loader. `react-x11/refresh/register` calls this
  * with no options; a tool that needs the seams writes its own two-line
@@ -362,10 +384,7 @@ export async function registerRefresh(options = {}) {
   const { ignore } = validated;
   registered = true;
 
-  const hotIgnore = (path) =>
-    path.includes('/node_modules/') ||
-    path.startsWith(SRC_DIR) ||
-    (ignore ? ignore(path) === true : false);
+  const hotIgnore = hotIgnoreFor(ignore);
 
   nodeModule.registerHooks({
     load(url, context, nextLoad) {

package/src/screencolor.js

@@ -56,7 +56,7 @@
 // and losing the grab to someone else is detected (the server says so, with
 // a LeaveNotify of mode Ungrab) rather than waited out.
 
-import { pixelLayout, toStraightRgba } from 'ntk';
+import { pixelLayout, toStraightRgba } from 'ntk/imagedata';
 
 import { sessionBus } from './bus.js';
 import { XK_ESCAPE, XK_KP_ENTER, XK_RETURN, XK_SPACE } from './keysyms.js';

package/src/styles.js

@@ -3,7 +3,7 @@
 // Numbers are pixels; strings like '50%' / 'auto' pass through to yoga.
 // The engine is ours (`./yoga.js`) — the enum tables below are built at
 // module scope, which is what that module's synchronous half is for.
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 import { parseBoxShadow, parseLinearGradient } from './decorations.js';
 import {

package/src/svgnodes.js

@@ -10,7 +10,7 @@
 // `<Formula>`), composed from public host elements. `<svg>` stays here
 // because it is not a document — it is a drawing, and one node is the right
 // grain for it.
-import { SvgView } from 'ntk';
+import SvgView from 'ntk/svg';
 
 import { Node } from './nodes/node.js';
 import { intrinsicSize } from './nodes/layout.js';

package/src/symbols.js

@@ -17,11 +17,13 @@
 // the same bargain a tray icon's name makes — so an app that runs on both
 // picks its names by platform, as it does for the tray.
 
-import { cssColorStraight, decodeImage, SvgView } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
+import { decodeImage } from 'ntk/image';
+import SvgView from 'ntk/svg';
 import * as nodeFs from 'node:fs';
 
 import { IconTheme } from './icontheme.js';
-import { Surface } from './ntk.js';
+import { Surface } from './offscreen.js';
 import { xsettings } from './xsettings.js';
 
 /** A `fontWeight` as the number both icon systems configure with. */

package/src/trayhooks.js

@@ -54,7 +54,7 @@
 // frame is not available for anything that has to ask the desktop.
 
 import { useEffect, useRef, useState } from 'react';
-import { decodeImage } from 'ntk';
+import { decodeImage } from 'ntk/image';
 
 import { useAppOrNull } from './appcontext.js';
 import { currentRegistration } from './application.js';

package/src/wayland/context2d.js

@@ -42,7 +42,8 @@
 import { createRequire } from 'node:module';
 import path from 'node:path';
 import { pathToFileURL } from 'node:url';
-import { Path2D, Image as NtkImage } from 'ntk';
+import { Image as NtkImage } from 'ntk/image';
+import { Path2D } from 'ntk/path';
 import { glDevice } from './device.js';
 import { GlyphAtlas } from './glyphatlas.js';
 import { GLTarget } from './target.js';

package/src/wayland/decorations.js

@@ -32,7 +32,7 @@
 // buttons do what they say. input.js routes; this answers where things are.
 
 import fs from 'node:fs';
-import { Path2D } from 'ntk';
+import { Path2D } from 'ntk/path';
 import { RESIZE_EDGE, TOPLEVEL_STATE } from './window.js';
 import { DEFAULTS, parseButtonLayout, titleFont } from './framestyle.js';
 

package/src/win32/fonts.js

@@ -15,7 +15,7 @@
 // `indexAt()` returns code points, which is what the selection and the caret
 // speak. DirectWrite is UTF-16 end to end, like CoreText, so the conversion
 // happens at this boundary and nowhere else.
-import { cssColorStraight } from 'ntk';
+import { cssColorStraight } from 'ntk/color';
 
 // REACT_X11_WIN32_DEBUG=1 reports the size each paragraph is shaped at, which
 // is how to tell a scale that never reached the text engine from one that did.