react-x11 2.18.5 → 2.19.0

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/nodes/window/size.js

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

package/src/nodes/window/window.js

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

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