react-x11 2.23.0 → 2.23.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.23.0",
+  "version": "2.23.2",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -103,7 +103,7 @@
   "dependencies": {
     "ical.js": "^2.2.1",
     "linebreak": "^1.1.0",
-    "ntk": "^8.10.0",
+    "ntk": "^8.14.3",
     "react-reconciler": "^0.34.0",
     "yoga-layout": "^3.2.1"
   },

package/src/cocoa/app.js

@@ -762,7 +762,7 @@ export class CocoaApp {
   /**
    * The pane's end of the frame channel (childmain hands it over,
    * feature-detected so the X11 pane path never notices): geometry and
-   * input come in, pane-present goes out.
+   * input come in, pane-present and pane-cursor go out.
    */
   attachPaneChannel(channel) {
     if (!this._paneMode) return;

package/src/cocoa/panewindow.js

@@ -12,8 +12,8 @@
 // What the node tree sees is the ordinary window contract: getContext,
 // present, scrollRegion, noteFrameDamage, requestAnimationFrame, events
 // via emit. Geometry and input arrive as channel messages (the host owns
-// layout and hit-testing — this is CPU offloading, not isolation), and the
-// only outbound traffic is pane-present.
+// layout and hit-testing — this is CPU offloading, not isolation), and what
+// goes out is pane-present, and pane-cursor for the cursor the host shows.
 import { BackendContext2D } from '../backend/context2d.js';
 
 let nextPaneId = 1;
@@ -95,6 +95,17 @@ export class CocoaPaneWindow {
 
   setTitle() {}
 
+  /**
+   * The cursor this pane's tree names, sent to the host. A pane has no
+   * window the pointer is over — the host's window is — so the host shows
+   * it (`<Frame>`'s pane box, src/frame/index.js). Core asks only when the
+   * cursor changes, so this is a message per change, not per motion.
+   */
+  setCursor(name) {
+    if (this.destroyed) return;
+    this.app._paneSend?.({ type: 'pane-cursor', cursor: name ?? null });
+  }
+
   requestAnimationFrame(cb) {
     return this.app._requestFrame(cb);
   }
@@ -252,7 +263,6 @@ export class CocoaPaneWindow {
     this._dirty = false;
     const shown = this._ring[this._drawIndex];
     this._native.surfaceUnlock(shown.handle);
-    const damage = this._flushDamage;
     this._flushDamage = null;
     this.app._paneSend?.({
       type: 'pane-present',
@@ -270,16 +280,17 @@ export class CocoaPaneWindow {
     this._surface = next.handle;
     this._surfaceGen++;
     this._native.surfaceLock(next.handle);
-    // A full-repaint frame overwrites everything next, so no catch-up is
-    // needed. A partial frame paints only its damage, so `next` must first
-    // hold the last complete frame underneath — and the WHOLE of it, not
-    // just this frame's rects, because in a three-buffer ring `next` was
-    // last drawn two presents ago and is stale everywhere. A full copy of
-    // the just-shown buffer is the complete background; the safe target is
-    // what triple buffering buys.
-    if (damage !== 'full' && damage) {
-      this._native.copySurfaceRegion(shown.handle, next.handle, null);
-    }
+    // The next frame may paint only its damage, so `next` must first hold
+    // the last complete frame underneath — and the WHOLE of it, not just
+    // this frame's rects, because in a three-buffer ring `next` was last
+    // drawn two presents ago and is stale everywhere. A full copy of the
+    // just-shown buffer is the complete background; the safe target is what
+    // triple buffering buys. After a full frame as much as a partial one:
+    // what a frame was says nothing of what the next will be, and skipping
+    // the copy there had a partial frame after a full one — a status line,
+    // a hover's underline — drawn over the page as it was two frames back.
+    // The copy is wasted only where the next frame is full as well.
+    this._native.copySurfaceRegion(shown.handle, next.handle, null);
   }
 
   snapshot() {

package/src/decorations.js

@@ -34,6 +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 { cssColorStraight } from 'ntk/color';
 import { shadowReach, shadowSigma } from 'ntk/shadow-math';
 
 /** A number, with or without the `px` CSS wants and this vocabulary does not. */
@@ -199,11 +200,33 @@ function readStop(part, value) {
   if (pieces.length > 1 && (PERCENT.test(last) || LENGTH.test(last))) {
     pieces.pop();
     return {
-      color: pieces.join(' '),
+      color: stopColor(pieces.join(' '), value),
       position: { value: number(last), unit: PERCENT.test(last) ? '%' : 'px' },
     };
   }
-  return { color: part, position: null };
+  return { color: stopColor(part, value), position: null };
+}
+
+/** A stop's colour, which RENDER is handed as written — and ntk throws on
+ *  one it cannot parse from inside the frame, where nothing can catch it. */
+function stopColor(color, value) {
+  if (isColorOrToken(color)) return color;
+  throw new Error(
+    `react-x11: backgroundImage ${JSON.stringify(value)} has a colour stop ` +
+      `that is not a colour ("${color}"; expected one like '#2980b9', ` +
+      "'tomato' or 'rgba(0, 0, 0, .4)', or a $token, before its position)",
+  );
+}
+
+/**
+ * Whether a piece of a gradient or a shadow can stand where its colour does.
+ * One that mentions a `$token` is let through where the style is written,
+ * since the token means nothing yet; the paint parses the value it resolves
+ * to, and a colour that is still not one drops the whole decoration there
+ * rather than throwing (see "memoized parsing" below).
+ */
+function isColorOrToken(color) {
+  return color.includes('$') || cssColorStraight(color) !== null;
 }
 
 /**
@@ -366,6 +389,9 @@ function readShadow(part, value) {
     color = piece;
   }
   if (lengths.length < 2) throw bad('needs an x and a y offset');
+  if (color !== null && !isColorOrToken(color)) {
+    throw bad(`has "${color}", which is neither a length nor a colour`);
+  }
   const [dx, dy, blur = 0, spread = 0] = lengths;
   if (blur < 0) throw bad('has a negative blur radius');
   return { dx, dy, blur, spread, color };

package/src/events.js

@@ -1322,6 +1322,19 @@ export class EventManager {
     callHandler(node, 'unstable_onAttention', handler, ev);
   }
 
+  /**
+   * Apply the cursor again with no motion: for a node whose cursor changed
+   * under a pointer standing still — a `<Frame>` pane's, which arrives from
+   * the pane's process after the motion that changed it was answered here.
+   * A point cursor is not asked again, as there is no new point: each node
+   * keeps what it last named. Nothing, once the window is gone — a pane's
+   * box lets go of its cursor as it unmounts.
+   */
+  refreshCursor() {
+    if (this.node.destroyed || !this.node.window) return;
+    this._updateCursor(this.hoverPath);
+  }
+
   /** Apply the deepest hovered node's cursor to the window: its `cursor`
    * style, or what it says of the point under the pointer (`cursorAt`), or
    * its `defaultCursor` — and failing all three, its parent's. Asked on

package/src/frame/index.js

@@ -569,10 +569,20 @@ function PaneHostView({
       if (msg?.type === 'pane-present') {
         host.setRect(node.abs);
         host.present(msg.id);
+      } else if (msg?.type === 'pane-cursor') {
+        // The pane names its cursor as an element that draws names one for
+        // a point: this box is the node the host's pointer is over, so the
+        // cursor is its default — a `cursor` style on the <Frame> still
+        // wins — and it is shown now, because the motion that changed it
+        // was answered in the host before the pane had said
+        node.defaultCursor = msg.cursor ?? undefined;
+        node.root?.events?.refreshCursor();
       }
     });
     return () => {
       off();
+      node.defaultCursor = undefined;
+      node.root?.events?.refreshCursor();
       node.absolutize = origAbsolutize;
       if (origShift) node._shiftAbs = origShift;
       if (s.paneHost === host) s.paneHost = null;

package/src/nodes/boxpaint.js

@@ -4,6 +4,7 @@
 
 import {
   DEFAULT_FOCUS_RING,
+  isColor,
   resolveBorderWidths,
   resolveBorderColors,
 } from '../styles.js';
@@ -22,11 +23,14 @@ import { ntkRoot, x11Ntk } from '../ntkroot.js';
 import { isFocusable as a11yFocusable } from '../a11y.js';
 import { DEV } from './util.js';
 
-/** CSS's `transparent` keyword means "paint nothing". ntk's colour parser
- *  does not know it and throws deep inside the 2d context, taking the whole
- *  frame with it, so filter it out at the source alongside null/''. */
+/** Whether a style's colour paints anything. CSS's `transparent` keyword
+ *  means "paint nothing" and is filtered out at the source alongside
+ *  null/'', and so is a value that is not a colour at all (`isColor`): ntk
+ *  throws on one deep inside the 2d context, taking the whole frame with
+ *  it. Everything that plans a paint asks this too — the blits deciding
+ *  what a box covers — so a colour that is dropped is dropped everywhere. */
 export function isPaintedColor(color) {
-  return Boolean(color) && color !== 'transparent';
+  return Boolean(color) && color !== 'transparent' && isColor(color);
 }
 
 /**

package/src/nodes/cascade.js

@@ -4,6 +4,7 @@
 
 import {
   applyLayoutStyle,
+  isColor,
   textStyleFrom,
   DEFAULT_TEXT_STYLE,
   localTextStyleChanged,
@@ -332,7 +333,9 @@ export class NodeCascade {
       return this._textScaled.style;
     }
     const theme = this.theme;
-    const color = theme.text;
+    // a palette is app-written, and an ink no engine parses would throw from
+    // every paragraph's draw (`isColor`)
+    const color = isColor(theme.text) ? theme.text : DEFAULT_TEXT_STYLE.color;
     // A palette can reach a node as a bare `theme` **prop** rather than a
     // resolved one — `<box theme={{ text: 'red' }}>` merges and derives
     // nothing (styling.md) — so neither of these is guaranteed to be there.

package/src/nodes/layout.js

@@ -510,6 +510,8 @@ export class NodeLayout {
       return;
     }
     this.abs = { x, y, width, height };
+    const placed = this._absAssigned;
+    this._absAssigned = true;
     // moving or resizing changes where this subtree can be hit, and the
     // cached unions all the way up with it
     this._clearHitBounds();
@@ -517,10 +519,16 @@ export class NodeLayout {
       // the reach `_ownPaintBounds` names, ring and shadow alike: a card
       // pushed down by a row above it leaves its old shadow on the surface
       // unless the claim for where it was covers that shadow too
-      const grow =
-        Math.max(this._outlineExtent(), this._shadowExtent()) + DAMAGE_SLOP;
+      const reach = Math.max(this._outlineExtent(), this._shadowExtent());
+      const grow = reach + DAMAGE_SLOP;
       const shift = layoutDiff.shift;
-      const had = old.width > 0 && old.height > 0;
+      // A rect of no area has no pixels of its own — but an outline or a
+      // shadow is drawn round it all the same, and a box of no height
+      // arriving with a ring round it claimed nothing, and was never drawn.
+      // The old rect counts only once layout has placed the node at all:
+      // before that it is the origin, where it never was.
+      const had =
+        (old.width > 0 && old.height > 0) || (reach > 0 && placed === true);
       if (shift) {
         // Riding a blit (issue #398): the rect this node *would* have had if
         // nothing but the scroll had happened. Landing there is the blit's
@@ -555,7 +563,7 @@ export class NodeLayout {
           return;
         }
         if (had) layoutDiff.sink(insetRect(was, -grow), this);
-        if (width > 0 && height > 0) {
+        if ((width > 0 && height > 0) || reach > 0) {
           layoutDiff.sink(insetRect(this.abs, -grow), this);
         }
         return;
@@ -573,7 +581,7 @@ export class NodeLayout {
       if (had) {
         layoutDiff.sink(insetRect(old, -grow), this);
       }
-      if (width > 0 && height > 0) {
+      if ((width > 0 && height > 0) || reach > 0) {
         layoutDiff.sink(insetRect(this.abs, -grow), this);
       }
     }
@@ -600,6 +608,19 @@ export class NodeLayout {
     const style = this.style;
     if (style.backgroundImage) return null;
     if (style.opacity !== undefined && style.opacity < 1) return null;
+    // A radius the box is too small for is drawn at half its shorter side
+    // (`roundedCorners`), so a resize that moves that moves all four
+    // corners — and their outline and shadow with them — and the ones at the
+    // edges that held are in no band along the edges that moved.
+    const radius = style.borderRadius ?? 0;
+    const now = this.abs;
+    if (
+      radius > 0 &&
+      Math.min(radius, old.width / 2, old.height / 2) !==
+        Math.min(radius, now.width / 2, now.height / 2)
+    ) {
+      return null;
+    }
     const bw = resolveBorderWidths(style, this.direction);
     const reach =
       Math.max(
@@ -610,7 +631,6 @@ export class NodeLayout {
         bw.left,
         grow,
       ) + DAMAGE_SLOP;
-    const now = this.abs;
     const bands = [];
     const oldBottom = old.y + old.height;
     const newBottom = now.y + now.height;

package/src/nodes/node.js

@@ -31,7 +31,7 @@ import { dropVisibleSelection, selectionSurfaceOf } from '../textselection.js';
 import { NodeAnimation } from './animation.js';
 import { NodeBoxPaint } from './boxpaint.js';
 import { NodeCascade } from './cascade.js';
-import { NO_DAMAGE } from './damage.js';
+import { DAMAGE_SLOP, NO_DAMAGE } from './damage.js';
 import { NodeHitTest } from './hittest.js';
 import { installMethods } from './install.js';
 import { NodeInvalidate } from './invalidate.js';
@@ -40,6 +40,7 @@ import { NodeLayout } from './layout.js';
 import { NodeLayoutHost } from './layouthost.js';
 import { NodeMoveBlit } from './moveblit.js';
 import { NodePaint } from './paint.js';
+import { unionRect } from './rects.js';
 import { NodePosition } from './position.js';
 import { NodeQueries } from './queries.js';
 import { NodeScrollBlit } from './scrollblit.js';
@@ -66,6 +67,9 @@ const NO_SELF_DAMAGED = new Set();
  * `_nonYogaKids` counts, so the count stays right for a parent that has no
  * box of its own either. */
 const outsideYoga = (child) => !child.yoga || child.isWindow;
+// Drawn by the box it is in: a `<text>`'s characters, a span. A popup has no
+// box here either, but draws in a window of its own.
+const isBoxless = (child) => !child.yoga && !child.isPopup;
 
 export class Node {
   get ownerDocument() {
@@ -126,6 +130,8 @@ export class Node {
     this.destroyed = false;
     // absolute rect within the owning window, filled by absolutize()
     this.abs = { x: 0, y: 0, width: 0, height: 0 };
+    // whether layout has ever given this node a rect (`_assignAbs`)
+    this._absAssigned = false;
     // node states that style blocks can react to, owned by EventManager
     this.states = {
       ':hover': false,
@@ -392,8 +398,9 @@ export class Node {
     // nothing vacating — the child being added had no pixels — and the
     // layout diff claims where it lands, so it names no region at all. A
     // child already here is a move, and says so (`_childListFine`).
-    const fine = this._childListFine(child.parent !== this);
-    const before = fine ? null : this._childListBefore();
+    const boxless = isBoxless(child);
+    const fine = !boxless && this._childListFine(child.parent !== this);
+    const before = fine || boxless ? null : this._childListBefore();
     // a move has to leave the yoga tree too — yoga aborts on insertChild of
     // a node that still has a parent
     if (child.parent === this && this._joinsYoga(child)) {
@@ -422,7 +429,8 @@ export class Node {
     // against the app's, and only now can see the `scale` props above it.
     child._rescaleSubtree(mounting);
     this._textContentChanged();
-    this._childListChanged(before, fine);
+    if (boxless) this._boxlessChildChanged();
+    else this._childListChanged(before, fine);
     a11yHooks.attached?.(this, child);
   }
 
@@ -535,10 +543,13 @@ export class Node {
     // captured while the child is still attached, so it covers the rect the
     // child is about to stop occupying — the child's own, for a viewport
     // mid-blit, where this node's box is the whole scrolled band
-    const fine = this._childListFine(true);
-    const before = fine
-      ? (child._claimBounds() ?? NO_DAMAGE)
-      : this._childListBefore();
+    const boxless = isBoxless(child);
+    const fine = !boxless && this._childListFine(true);
+    const before = boxless
+      ? null
+      : fine
+        ? (child._claimBounds() ?? NO_DAMAGE)
+        : this._childListBefore();
     this.children.splice(index, 1);
     if (outsideYoga(child)) this._nonYogaKids--;
     if (this._joinsYoga(child)) {
@@ -557,7 +568,30 @@ export class Node {
       child.yoga = null;
     }
     this._textContentChanged();
-    this._childListChanged(before, fine);
+    if (boxless) this._boxlessChildChanged();
+    else this._childListChanged(before, fine);
+  }
+
+  /**
+   * A child with no box of its own — a `<text>`'s run of characters, or a
+   * `<text>` nested in one — arrived or left. It is drawn by the nearest box
+   * above it, so what changed is that box's pixels, and no rect: the box
+   * claims where it is now and again once layout has run, the way a string
+   * that changes in place claims (`TextChunkNode.setText`).
+   *
+   * Not through `_childListChanged`. Under a scroll pane its claims are the
+   * finer ones (`_childListFine`): the leaving child's own rect, and the
+   * layout diff's claim of where an arriving one lands. A boxless child has
+   * neither, so a label emptied or filled inside a pane claimed nothing, and
+   * its old glyphs stayed on the screen. And a span that gains a child has
+   * no rect of its own to claim either.
+   */
+  _boxlessChildChanged() {
+    this._clearHitBounds();
+    let owner = this;
+    while (owner && !owner.yoga) owner = owner.parent;
+    if (owner) owner._invalidateLayout('text');
+    else this.root?.invalidate(true, null, 'text');
   }
 
   /** Destroy real resources (X windows) in this subtree. Yoga nodes are
@@ -623,7 +657,10 @@ export class Node {
     // factor. The walk restyles this node too, so the call after it hits
     // the identity check and costs nothing twice.
     if (newProps.scale !== prev.scale) this._rescaleSubtree();
+    // asked of the style still in force: see `_clipStarted`
+    const clipped = this.clipsChildren();
     const style = this._syncStyle(newProps);
+    if (!clipped && this.clipsChildren()) this._clipStarted();
     let layoutChanged = false;
     // hoisted styles hit the identity check and skip the whole update
     if (this.yoga && style !== prevStyle) {
@@ -696,6 +733,34 @@ export class Node {
     a11yHooks.propsChanged?.(this);
   }
 
+  /**
+   * This node started clipping what it holds (`overflow: 'hidden'` or
+   * `'scroll'`), so whatever its children drew past its box is gone, and
+   * nothing moved for the layout diff to notice. Its own claims are made
+   * after the new style is in, when its paint bounds already stop at its
+   * box, so the old reach is claimed here: what the children drew, which is
+   * theirs, and the same whether or not this node clips them.
+   *
+   * The other way — a box that stops clipping — needs nothing of its own:
+   * the claim once layout has run reaches as far as the children now do.
+   */
+  _clipStarted() {
+    let reach = null;
+    for (const child of this.children) {
+      if (child.isWindow || !child.yoga || child.hidden) continue;
+      if (child.style?.display === 'none') continue;
+      const bounds = child._subtreeBounds();
+      reach = reach ? unionRect(reach, bounds) : bounds;
+    }
+    if (!reach) return;
+    this.invalidate(false, {
+      x: reach.x - DAMAGE_SLOP,
+      y: reach.y - DAMAGE_SLOP,
+      width: reach.width + 2 * DAMAGE_SLOP,
+      height: reach.height + 2 * DAMAGE_SLOP,
+    });
+  }
+
   /**
    * Did anything this node *draws* change? Answering true damages the whole
    * node; answering false contributes no damage at all.

package/src/nodes/paint.js

@@ -681,7 +681,7 @@ export class WindowPaint {
     // repainting the background only where it is about to be drawn over is
     // the other half of the win: a full-window fill is a full-window
     // composite however little changed
-    fill(backgroundColor || this.theme.background, false);
+    fill(this._windowBackground(), false);
     if (gradient) fill(gradient, false);
   }
 }

package/src/nodes/scrollbars.js

@@ -66,6 +66,12 @@ export function scrollbarGeometry({
   // carries `scale` so the track, the hit slop and the thumb's corner
   // radius downstream draw from the same number.
   const barWidth = SCROLLBAR_WIDTH * scale;
+  // …and never wider than the pane across: a pane thinner than the bar and
+  // its inset shows none. Laid a bar's width in from its far edge, the bar
+  // of a pane four pixels tall stood four pixels above it, painted past the
+  // pane's box where none of the pane's claims reach — the same stray ink as
+  // a thumb run past its track, below, the other way round.
+  if (crossSize < barWidth + inset) return null;
   const rtl = direction === 'rtl';
   // Never longer than the track: a pane shorter than the minimum gets a
   // thumb that fills it and has no travel. The bar paints outside the

package/src/nodes/text.js

@@ -9,8 +9,9 @@ import {
 import { cssColorStraight } from 'ntk/color';
 import { hooks as a11yHooks } from '../a11y.js';
 import { codePointAtOffset, codeUnitOffsets } from '../textrange.js';
-import { NO_DAMAGE } from './damage.js';
+import { DAMAGE_SLOP, NO_DAMAGE, layoutDiff } from './damage.js';
 import { Node } from './node.js';
+import { insetRect, unionRect } from './rects.js';
 
 /**
  * Yoga's measure modes, in words. Indexed by the integer yoga hands a
@@ -37,6 +38,20 @@ const STRIP_COVERAGE = 0.45;
 
 const textStripBelow = new WeakMap();
 
+/** `ink`, when any of it lies outside `box`; else null. */
+function outside(ink, box) {
+  if (!ink) return null;
+  return ink.x < box.x ||
+    ink.y < box.y ||
+    ink.x + ink.width > box.x + box.width ||
+    ink.y + ink.height > box.y + box.height
+    ? ink
+    : null;
+}
+
+/** `TextNode._trim`'s answer, per layout. */
+const trims = new WeakMap();
+
 /** The size under which this connection's text is painted as strips. */
 export function setTextStripBelow(app, below) {
   if (below === undefined) return;
@@ -183,6 +198,8 @@ export class TextNode extends Node {
     super('text', props, app, { yoga: !span });
     this.isSpan = span;
     this._layouts = new Map();
+    // how far the ink of the last paint reached past the box (`_keepInkReach`)
+    this._inkReach = null;
   }
 
   /** Height for a width: the paragraph shaped into whatever is on offer.
@@ -214,6 +231,8 @@ export class TextNode extends Node {
       return;
     }
     this._layouts.clear();
+    // the ink goes with the layout it was placed from (`_ownPaintBounds`)
+    this._clearPaintBounds();
     if (this.yoga) this.yoga.markDirty();
   }
 
@@ -233,6 +252,7 @@ export class TextNode extends Node {
       return;
     }
     this._layouts.clear();
+    this._clearPaintBounds();
   }
 
   /**
@@ -405,18 +425,37 @@ export class TextNode extends Node {
     return this._elides() ? maxWidth : Infinity;
   }
 
-  _layoutFor(maxWidth) {
+  /** The layout at `maxWidth`: kept, or shaped now. With `shape` false, only
+   *  a kept one — for a question that must not cost a shaping, such as how
+   *  far a paragraph not yet painted will ink (`_inkPlaced`). */
+  _layoutFor(maxWidth, shape = true) {
     const fonts = this.app?.fonts;
     if (!fonts) return null; // mock container in tests: no text metrics
     const maxLines = this._maxLines();
     const overflow = this.style.textOverflow;
-    // Both truncation options are inputs to the shaping, so both belong in
-    // the key. They can only change with the style, which clears the whole
-    // map on its way past — but a cache keyed on less than it depends on is
-    // one refactor away from answering with the wrong paragraph, and the
-    // wrong paragraph here is glyphs on screen that no error mentions.
-    const key = `${maxWidth}|${maxLines}|${overflow ?? ''}`;
-    let layout = this._layouts.get(key);
+    // Both truncation options are inputs to the shaping, so a hit has to
+    // match them as well as the width. They can only change with the style,
+    // which clears the whole map on its way past — but a cache keyed on less
+    // than it depends on is one refactor away from answering with the wrong
+    // paragraph, and the wrong paragraph here is glyphs on screen that no
+    // error mentions.
+    //
+    // The width is the key as the number it is, and the other two are
+    // checked on the entry, rather than all three spelled into one string: a
+    // layout pass measures every label several times over, and turning a
+    // fractional width into text cost more than the rest of a hit together.
+    const entry = this._layouts.get(maxWidth);
+    let layout =
+      entry !== undefined &&
+      entry.maxLines === maxLines &&
+      entry.overflow === overflow
+        ? entry.layout
+        : null;
+    if (!layout) {
+      layout = this._shapedWider(maxWidth, maxLines, overflow);
+      if (layout) this._layouts.set(maxWidth, { layout, maxLines, overflow });
+    }
+    if (!layout && !shape) return null;
     if (!layout) {
       const spans = this.collectSpans([]);
       const base = this.resolvedTextStyle();
@@ -440,11 +479,52 @@ export class TextNode extends Node {
         direction: this.direction,
       });
       if (this._layouts.size > 32) this._layouts.clear();
-      this._layouts.set(key, layout);
+      this._layouts.set(maxWidth, { layout, maxLines, overflow });
     }
     return layout;
   }
 
+  /**
+   * A layout this paragraph already has at a wider width that shaping it at
+   * `maxWidth` would come out the same as, or null.
+   *
+   * ntk fills lines greedily: a line takes tokens while they fit. So if
+   * every line a wider layout made fits `maxWidth` as well, the narrower
+   * layout breaks at the same tokens — each line was the longest run that
+   * fit the wider width, and so is the longest that fits a narrower one it
+   * still fits in — and a word too wide for either is cut at the same
+   * cluster. Past the breaks, only two things read the width, and both are
+   * ruled out here: placing a line anywhere but at the left edge (centred,
+   * right-aligned, or the start of a right-to-left paragraph), and eliding
+   * one. A line within a thousandth of a pixel of the width is left to be
+   * shaped, since the sum the fill tests and the width the line reports are
+   * added up in different orders.
+   *
+   * The paint's request is the common one: a label is laid out in a box the
+   * width it measured, a pixel or less narrower than the width it was
+   * measured at, and was shaped again for it — 37% of the layouts a fling
+   * down a <Tree> built.
+   *
+   * ntk's layouts only. CoreText and DirectWrite break lines their own way,
+   * and their layouts carry no `baseLevel`.
+   */
+  _shapedWider(maxWidth, maxLines, overflow) {
+    if (overflow === 'ellipsis') return null;
+    const align = this.style.textAlign;
+    if (align !== undefined && align !== 'start' && align !== 'left') {
+      return null;
+    }
+    const fits = maxWidth - 0.001;
+    for (const [width, entry] of this._layouts) {
+      if (!(width > maxWidth)) continue;
+      if (entry.maxLines !== maxLines || entry.overflow !== overflow) continue;
+      const layout = entry.layout;
+      if (layout?.baseLevel !== 0) continue;
+      if (layout.lines.every((line) => line.width <= fits)) return layout;
+    }
+    return null;
+  }
+
   /**
    * `textBoxTrim: 'cap-alphabetic'` — CSS's `text-box-trim: trim-both` with
    * `text-box-edge: cap alphabetic`. How much of the line box to take off
@@ -482,6 +562,22 @@ export class TextNode extends Node {
     if (this.style.textBoxTrim !== 'cap-alphabetic') return null;
     const lines = layout?.lines;
     if (!lines?.length) return null;
+    // Once per layout rather than once per measure, which a layout pass asks
+    // for several times over. A layout never changes once it is shaped, and
+    // the face and size read below are the ones it was shaped in: a style
+    // that moves either drops every layout on its way past
+    // (`_textContentChanged`), so the answer cannot go stale while its layout
+    // is still being handed out.
+    let trim = trims.get(layout);
+    if (trim === undefined) {
+      trim = this._trimOf(layout, lines);
+      trims.set(layout, trim);
+    }
+    return trim;
+  }
+
+  /** `_trim`'s answer, worked out. */
+  _trimOf(layout, lines) {
     const base = this.resolvedTextStyle();
     const font = this.app?.fonts?.match?.(base.family, {
       weight: base.weight,
@@ -510,9 +606,12 @@ export class TextNode extends Node {
    * a differently-placed layout is a caret in the wrong place, and nothing
    * about it would look like a bug in this function.
    */
-  _placedLayout() {
+  _placedLayout(shape = true) {
     const content = this.contentBox();
-    const layout = this._layoutFor(this._wrapWidth(content.width || Infinity));
+    const layout = this._layoutFor(
+      this._wrapWidth(content.width || Infinity),
+      shape,
+    );
     if (!layout) return null;
     // the box was shortened from the top, so the glyphs come up with it
     const trim = this._trim(layout);
@@ -566,6 +665,7 @@ export class TextNode extends Node {
   paintContent(ctx) {
     const placed = this._placedLayout();
     if (!placed) return;
+    this._keepInkReach(placed);
     this._paintSelection(ctx);
     if (this._paintsStrip()) {
       this._paintStrip(ctx, placed);
@@ -574,6 +674,146 @@ export class TextNode extends Node {
     placed.layout.draw(ctx, placed.x, placed.y);
   }
 
+  /**
+   * Where this paragraph puts ink, when that is outside its box: the box
+   * grown by the ink it has on the screen now, before a layout pass, and by
+   * the ink the frame is about to draw, after one.
+   *
+   * The glyphs are drawn where the layout puts them, and two things put them
+   * past the box. A word too wide for the box and with nowhere to break is
+   * drawn whole, across the box's edge. And a box trimmed to its capitals
+   * (`textBoxTrim`) leaves every descender and every ascender taller than a
+   * capital outside it, by design. A change that repaints the paragraph —
+   * its colour, its characters — claimed the box, so the ink outside it kept
+   * the old colour, or stayed after the word was gone.
+   */
+  _ownPaintBounds() {
+    let bounds = super._ownPaintBounds();
+    // Both, whenever it is asked. A claim made before this frame's layout
+    // wants the ink on the screen, one made after it the ink about to be
+    // drawn — and so does everything the paint sizes from these bounds,
+    // which asks before this paragraph has ever drawn: an ancestor's
+    // `opacity` draws the subtree into a surface this big, and one sized
+    // before the ink was known cut a word's overflow off at the box, on the
+    // first frame only. The union is never smaller than either.
+    const shown = this._inkOnScreen();
+    if (shown) bounds = unionRect(bounds, shown);
+    const placed = this._inkPlaced();
+    if (placed) bounds = unionRect(bounds, placed);
+    return bounds;
+  }
+
+  /**
+   * A paragraph that moved claims its ink past its box, where it was and
+   * where it lands, beside the claims the box makes (`Node._assignAbs`).
+   *
+   * Those are the box's rect, grown by its outline and shadow, and a rect
+   * of no area claims nothing — there were, or will be, no pixels there. A
+   * paragraph squeezed to no height by the row it sits in still draws its
+   * lines, though, below a box of none: moved along by a sibling, it left
+   * its old glyphs on the screen and drew its new ones nowhere.
+   */
+  _assignAbs(x, y, width, height) {
+    const old = this.abs;
+    const shown = this._inkOnScreen();
+    super._assignAbs(x, y, width, height);
+    if (this.abs === old || !layoutDiff.sink) return;
+    const shift = layoutDiff.shift;
+    // riding a blit: the ink moved with the pixels, and claims nothing
+    if (
+      shift &&
+      old.x + shift.x === x &&
+      old.y + shift.y === y &&
+      old.width === width &&
+      old.height === height
+    ) {
+      return;
+    }
+    if (shown) {
+      const was = shift
+        ? { ...shown, x: shown.x + shift.x, y: shown.y + shift.y }
+        : shown;
+      layoutDiff.sink(insetRect(was, -DAMAGE_SLOP), this);
+    }
+    const placed = this._inkPlaced();
+    if (placed) layoutDiff.sink(insetRect(placed, -DAMAGE_SLOP), this);
+  }
+
+  /** The rect the lines of a placed layout cover, in window coordinates. */
+  _inkOf({ layout, x, y }) {
+    const lines = layout.lines;
+    if (!lines?.length) return null;
+    let left = Infinity;
+    let right = -Infinity;
+    for (const line of lines) {
+      left = Math.min(left, line.x);
+      right = Math.max(right, line.x + line.width);
+    }
+    return {
+      x: x + left,
+      y,
+      width: right - left,
+      height: layout.height,
+    };
+  }
+
+  /** The ink the frame will draw, where it reaches past the box. */
+  _inkPlaced() {
+    // a paragraph not laid out yet has no box to be placed in
+    const box = this.abs;
+    if (!(box.width > 0 || box.height > 0)) return null;
+    // Shaped only once this frame's layout has run, when the paint is about
+    // to need the very same layout: before it, a claim at the commit would
+    // shape every string a batch of input passes through, painted or not.
+    // The measure pass does not always make the one the paint draws — a
+    // box of no width is drawn unwrapped — and a paragraph moved into one
+    // claimed none of its new ink.
+    const placed = this._placedLayout(this.root?._laidOut === true);
+    return placed ? outside(this._inkOf(placed), box) : null;
+  }
+
+  /** The ink on the screen, where it reaches past the box: kept by the last
+   *  paint as distances from the box's edges, so it rides a scroll's shift
+   *  with the box. */
+  _inkOnScreen() {
+    const reach = this._inkReach;
+    if (!reach) return null;
+    const box = this.abs;
+    return {
+      x: box.x - reach.left,
+      y: box.y - reach.top,
+      width: box.width + reach.left + reach.right,
+      height: box.height + reach.top + reach.bottom,
+    };
+  }
+
+  /** Remember how far past the box this paint's ink reaches. A reach that
+   *  changed is a changed paint bound, so the cached ones above it go. */
+  _keepInkReach(placed) {
+    const ink = outside(this._inkOf(placed), this.abs);
+    const box = this.abs;
+    const reach = ink && {
+      left: Math.max(0, box.x - ink.x),
+      top: Math.max(0, box.y - ink.y),
+      right: Math.max(0, ink.x + ink.width - (box.x + box.width)),
+      bottom: Math.max(0, ink.y + ink.height - (box.y + box.height)),
+    };
+    const was = this._inkReach;
+    if (
+      reach === was ||
+      (reach &&
+        was &&
+        reach.left === was.left &&
+        reach.top === was.top &&
+        reach.right === was.right &&
+        reach.bottom === was.bottom)
+    ) {
+      return;
+    }
+    this._inkReach = reach;
+    this._clearPaintBounds();
+  }
+
   /**
    * Whether this paragraph is too small to read, and is painted as a strip
    * where its lines are instead of as glyphs (`_paintStrip`).

package/src/nodes/window/capabilities.js

@@ -8,6 +8,7 @@ import {
   transparencyDisabled,
   watchCompositing,
 } from '../../compositing.js';
+import { isColor } from '../../styles.js';
 import { DEV } from '../util.js';
 
 /**
@@ -129,9 +130,17 @@ export class WindowCapabilities {
    * window that cannot be transparent is a square opaque one, not a broken
    * one — and the alternative, black corners, is worse than square.
    */
-  /** What this window paints as its background — its own, or the palette's. */
+  /**
+   * What this window paints as its background — its own, or the palette's.
+   * A colour that does not parse is not one named (`isColor`), and a window
+   * has to answer with one: an opaque window cannot paint nothing, since
+   * whatever it skipped would show the last frame's pixels.
+   */
   _windowBackground() {
-    return this.style.backgroundColor || this.theme.background;
+    const own = this.style.backgroundColor;
+    if (isColor(own)) return own;
+    const palette = this.theme.background;
+    return isColor(palette) ? palette : 'white';
   }
 
   /**

package/src/nodes/window/spine.js

@@ -27,8 +27,8 @@
 //   are left unmeasured, which is what the floors do with every extent
 //   nobody reads (`collectFloorStale`).
 //
-// Anything else — a row on the way, a margin across the block, a width
-// that is not a length — is not a spine, and the tree is measured whole.
+// Anything else — a row on the way, a margin or a width that is not a
+// length — is not a spine, and the tree is measured whole.
 
 import { declaresOwnMinimum, inFlow, mainAxisOf } from './floors.js';
 import { Yoga } from '../../yoga.js';
@@ -118,6 +118,7 @@ export function spineScope(root, sources, listOnly) {
   const roots = new Map();
   const spine = new Set();
   const stops = new Set();
+  const offered = new OfferedWidths(root);
   for (const source of sources) {
     const list = listOnly(source);
     // the way up to where the change stops mattering
@@ -148,7 +149,7 @@ export function spineScope(root, sources, listOnly) {
       if (!child.yoga || child.isWindow || child.style.display === 'none') {
         continue;
       }
-      const widths = rootWidths(child, root);
+      const widths = rootWidths(child, offered);
       if (widths === null) return null;
       roots.set(child, widths);
     }
@@ -225,30 +226,90 @@ function staleChildren(node) {
 
 /**
  * The widths a box is measured alone at, or null when it cannot be: in flow
- * and stretched across its column with no margin, width or ceiling of its
- * own across it, so that it is exactly as wide as the column's content box.
- * `width` is that box now — the width its heights are for — and
- * `widthPass` the one the width pass over the whole tree would give it
+ * and stretched across its column with no width or ceiling of its own
+ * across it, so that it is as wide as the column's content box less its
+ * margins across. `width` is that box now — the width its heights are for —
+ * and `widthPass` the one the width pass over the whole tree would give it
  * (`widthPassWidth`), null where only a pass knows.
+ *
+ * Both are the width the box is laid out *in*, not its own: yoga lays a
+ * root with no width of its own out at the width on offer less its margins,
+ * which is what stretching it across the column does. So a margin across is
+ * a number the layout takes off either way — a list whose rows are inset
+ * from its edges, as a menu's are, is still a spine — and only a margin
+ * that is not a length, a percentage or `auto`, ends one: `auto` centres the
+ * box instead of stretching it.
  */
-function rootWidths(node, root) {
+function rootWidths(node, offered) {
   const style = node.style;
   const parent = node.parent;
   if (!parent || !inFlow(node) || node._host !== null) return null;
   if (style.width !== undefined || style.maxWidth !== undefined) return null;
   if (typeof style.minWidth === 'string') return null;
   if (!stretched(node)) return null;
-  if (
-    LENGTHS_ACROSS.some((key) => style[key] !== undefined && style[key] !== 0)
-  ) {
-    return null;
-  }
   if (MARGINS.some((key) => typeof style[key] === 'string')) return null;
   if (PADDINGS.some((key) => typeof style[key] === 'string')) return null;
-  return {
-    width: contentWidth(parent),
-    widthPass: widthPassContent(parent, root),
-  };
+  return offered.in(parent);
+}
+
+/**
+ * The widths a column offers the roots in it (`rootWidths`), worked out once
+ * a column rather than once a root.
+ *
+ * Every root in a column is offered the same two, and working out the width
+ * pass's walks the way up to the window, with four yoga reads a box for its
+ * padding and border across (`insetAcross`). Asked afresh for each root, a
+ * fling down a list of rows — a dozen arriving a frame, every one of them a
+ * root in the same column — spent 1.8 ms of a 5.9 ms frame on it. Kept for
+ * one `spineScope` call, which lays nothing out, so nothing it has read can
+ * move under it.
+ */
+class OfferedWidths {
+  constructor(root) {
+    this.root = root;
+    this.offers = new Map();
+    this.insets = new Map();
+    this.passWidths = new Map();
+  }
+
+  /** `{ width, widthPass }` for a root in `column`: its content box now,
+   *  and in the width pass over the whole tree. */
+  in(column) {
+    let offer = this.offers.get(column);
+    if (offer === undefined) {
+      offer = {
+        width: Math.max(0, column.yoga.getComputedWidth() - this.inset(column)),
+        widthPass: this.passContent(column),
+      };
+      this.offers.set(column, offer);
+    }
+    return offer;
+  }
+
+  inset(node) {
+    let inset = this.insets.get(node);
+    if (inset === undefined) {
+      inset = insetAcross(node);
+      this.insets.set(node, inset);
+    }
+    return inset;
+  }
+
+  /** `widthPassWidth`, once a box. */
+  passWidth(node) {
+    let width = this.passWidths.get(node);
+    if (width === undefined) {
+      width = widthPassWidth(node, this);
+      this.passWidths.set(node, width);
+    }
+    return width;
+  }
+
+  /** …and the content box inside it. */
+  passContent(node) {
+    const width = this.passWidth(node);
+    return width === null ? null : Math.max(0, width - this.inset(node));
+  }
 }
 
 /** Stretched across its parent's column — `alignSelf`, or the column's
@@ -274,11 +335,6 @@ function insetAcross(node) {
   );
 }
 
-/** A box's content width in the last pass. */
-function contentWidth(node) {
-  return Math.max(0, node.yoga.getComputedWidth() - insetAcross(node));
-}
-
 /**
  * How wide `node` is in the width pass over the whole tree
  * (`_measureContentSpans('width')`), worked out on the way down rather than
@@ -288,8 +344,8 @@ function contentWidth(node) {
  * the way down is anything else: a row, whose children are as wide as the
  * pass decides.
  */
-function widthPassWidth(node, root) {
-  if (node === root) return insetAcross(node);
+function widthPassWidth(node, offered) {
+  if (node === offered.root) return offered.inset(node);
   const style = node.style;
   let width;
   if (typeof style.width === 'number') width = style.width;
@@ -297,7 +353,7 @@ function widthPassWidth(node, root) {
   else {
     if (!inFlow(node) || !stretched(node)) return null;
     if (MARGINS.some((key) => typeof style[key] === 'string')) return null;
-    const inner = widthPassContent(node.parent, root);
+    const inner = offered.passContent(node.parent);
     if (inner === null) return null;
     const yoga = node.yoga;
     width =
@@ -311,11 +367,5 @@ function widthPassWidth(node, root) {
   if (typeof style.minWidth === 'number')
     width = Math.max(width, style.minWidth);
   else if (style.minWidth !== undefined) return null;
-  return Math.max(width, insetAcross(node));
-}
-
-/** …and the content box inside it. */
-function widthPassContent(node, root) {
-  const width = widthPassWidth(node, root);
-  return width === null ? null : Math.max(0, width - insetAcross(node));
+  return Math.max(width, offered.inset(node));
 }

package/src/styles.js

@@ -841,6 +841,20 @@ function queryMatches(q, size, supports, containers) {
 
 const GRID_VALUES = new Set([...GRID_CONTAINER_PROPS, ...GRID_ITEM_PROPS]);
 
+// The properties whose value is one colour.
+const COLOR_PROPS = new Set([
+  'backgroundColor',
+  'borderColor',
+  'borderTopColor',
+  'borderRightColor',
+  'borderBottomColor',
+  'borderLeftColor',
+  'borderStartColor',
+  'borderEndColor',
+  'outlineColor',
+  'color',
+]);
+
 /**
  * The style values that are a small language rather than a number — a
  * gradient, a shadow, and grid's track lists, areas and lines — and
@@ -851,8 +865,13 @@ const GRID_VALUES = new Set([...GRID_CONTAINER_PROPS, ...GRID_ITEM_PROPS]);
  * instead of as a blank panel three commits later. A grid value goes through
  * the parser the layout itself runs (src/grid.js), so the two agree.
  *
+ * A colour is the smallest of these languages and is checked the same way,
+ * on its own and inside a gradient or a shadow: `'nonsense'` or `7` used to
+ * pass here and throw from the frame, where no boundary could catch it.
  * Tokens are still unresolved here (`$accent` is a colour as far as the
- * grammar is concerned), so this checks the shape and never the colours.
+ * grammar is concerned), so a colour is checked only where it is written
+ * out; one a token resolves to is dropped at the paint if it does not parse
+ * (`isColor`), since a theme is not a call site.
  */
 function validateValue(key, value, where) {
   const text = TEXT_VALUE_CHECKS.get(key);
@@ -868,6 +887,17 @@ function validateValue(key, value, where) {
     }
     return;
   }
+  if (COLOR_PROPS.has(key)) {
+    // unset, the way a conditional writes it — `on ? accent : undefined`,
+    // or `''`, which has always painted nothing
+    if (value == null || value === '') return;
+    if (isColor(value) || isToken(value) || mentionsToken(value)) return;
+    throw new Error(
+      `react-x11: invalid ${key} ${JSON.stringify(value)} in ${where} ` +
+        "(expected a CSS colour — '#2980b9', 'tomato', 'rgba(0, 0, 0, 0.5)' " +
+        "or 'transparent' — or a $token)",
+    );
+  }
   if (key === 'letterSpacing') {
     if (
       value != null &&
@@ -1569,6 +1599,34 @@ export function tint(color, alpha) {
   return rgba([c[0], c[1], c[2], c[3] * alpha]);
 }
 
+// The answer per spelling, kept apart from the parse's own cache because
+// this is asked once a fill on every paint and wants no copy of the
+// components. Bounded and dropped whole, like that one: a palette is a few
+// dozen strings.
+const colorAnswers = new Map();
+const COLOR_ANSWERS_MAX = 512;
+
+/**
+ * Whether `value` is a colour the backends can paint: a string ntk's parser
+ * reads, which is the grammar every context here parses with.
+ *
+ * What is not one is dropped where a style is painted, as CSS drops a
+ * declaration it cannot parse — no fill, no stroke, the inherited ink for
+ * text. The alternatives were worse and differed per backend: ntk throws
+ * from the frame, taking the process with it, and the shared context paints
+ * black. Development says so at the commit instead (`validateValue`).
+ */
+export function isColor(value) {
+  if (typeof value !== 'string') return false;
+  let known = colorAnswers.get(value);
+  if (known === undefined) {
+    known = cssColorStraight(value) !== null;
+    if (colorAnswers.size >= COLOR_ANSWERS_MAX) colorAnswers.clear();
+    colorAnswers.set(value, known);
+  }
+  return known;
+}
+
 // ease-out cubic: fast to start, settles gently — the shape almost every UI
 // toolkit defaults to for state changes
 export const ease = (t) => 1 - (1 - t) ** 3;
@@ -2298,7 +2356,9 @@ export function textStyleFrom(props, inherited) {
     // property, like every other name in this vocabulary
     variations: props.fontVariationSettings ?? inherited.variations,
     textRendering: props.textRendering ?? inherited.textRendering,
-    color: props.color ?? inherited.color,
+    // an ink no engine can parse is not an ink: the one above is inherited,
+    // as CSS inherits past a `color` it could not read
+    color: isColor(props.color) ? props.color : inherited.color,
     letterSpacing: props.letterSpacing ?? inherited.letterSpacing,
     // Inherited apart, as CSS inherits the two properties apart — a child's
     // `fontVariantNumeric` replaces the keyword above it and leaves an

package/src/wayland/context2d.js

@@ -42,6 +42,7 @@
 import { createRequire } from 'node:module';
 import path from 'node:path';
 import { pathToFileURL } from 'node:url';
+import { cssColor } from 'ntk/color';
 import { Image as NtkImage } from 'ntk/image';
 import { Path2D } from 'ntk/path';
 import { glDevice } from './device.js';
@@ -238,63 +239,19 @@ const BLACK = Object.freeze([0, 0, 0, 1]);
 const CLEAR = Object.freeze([0, 0, 0, 0]);
 const OPAQUE = Object.freeze([1, 1, 1, 1]);
 
+// ntk's parser, which is the one the other backends read a colour with, so
+// one spelling paints one colour everywhere: this context had a parser of its
+// own, which knew fifteen names and painted `tomato` black. What is not a
+// colour is black here, as it is in the shared context, and core does not
+// hand one over from a style (`isColor` in src/styles.js).
 function parseColorUncached(value) {
   const s = value.trim();
-  if (s[0] === '#') {
-    const h = s.slice(1);
-    const n = h.length;
-    const q = (i, len) =>
-      parseInt(len === 1 ? h[i] + h[i] : h.slice(i * 2, i * 2 + 2), 16) / 255;
-    if (n === 3 || n === 4)
-      return premul(q(0, 1), q(1, 1), q(2, 1), n === 4 ? q(3, 1) : 1);
-    if (n === 6 || n === 8)
-      return premul(q(0, 2), q(1, 2), q(2, 2), n === 8 ? q(3, 2) : 1);
-  }
-  const m = s.match(/^rgba?\(([^)]+)\)$/i);
-  if (m) {
-    const p = m[1].split(/[,\s/]+/).filter(Boolean);
-    const chan = (v) =>
-      (v.endsWith('%') ? parseFloat(v) * 2.55 : parseFloat(v)) / 255;
-    const alpha =
-      p.length > 3
-        ? p[3].endsWith('%')
-          ? parseFloat(p[3]) / 100
-          : parseFloat(p[3])
-        : 1;
-    return premul(
-      chan(p[0] || '0'),
-      chan(p[1] || '0'),
-      chan(p[2] || '0'),
-      Number.isFinite(alpha) ? alpha : 1,
-    );
-  }
-  if (s === 'transparent' || s === 'none') return CLEAR;
-  const named = NAMED[s.toLowerCase()];
-  if (named) return named;
-  return BLACK;
+  // SVG's word for no paint, which this context has always read as clear
+  if (s === 'none') return CLEAR;
+  const c = cssColor(s);
+  return c ? Object.freeze(c) : BLACK;
 }
 
-function premul(r, g, b, a) {
-  return Object.freeze([r * a, g * a, b * a, a]);
-}
-
-const NAMED = {
-  black: BLACK,
-  white: premul(1, 1, 1, 1),
-  red: premul(1, 0, 0, 1),
-  green: premul(0, 128 / 255, 0, 1),
-  blue: premul(0, 0, 1, 1),
-  gray: premul(128 / 255, 128 / 255, 128 / 255, 1),
-  grey: premul(128 / 255, 128 / 255, 128 / 255, 1),
-  yellow: premul(1, 1, 0, 1),
-  orange: premul(1, 165 / 255, 0, 1),
-  purple: premul(128 / 255, 0, 128 / 255, 1),
-  cyan: premul(0, 1, 1, 1),
-  magenta: premul(1, 0, 1, 1),
-  silver: premul(192 / 255, 192 / 255, 192 / 255, 1),
-  currentcolor: BLACK,
-};
-
 /**
  * A gradient: stops, and a 256-texel ramp texture baked from them on first
  * use. Interpolated premultiplied, which is what keeps a fade to transparent

package/src/win32/app.js

@@ -416,7 +416,7 @@ export class Win32App {
 
   /**
    * The pane process's end of the frame channel: geometry and input in,
-   * presents out. Feature-detected by the pane bootstrap
+   * presents and the cursor out. Feature-detected by the pane bootstrap
    * (src/frame/childmain.js), and a no-op in a process that is not a pane.
    */
   attachPaneChannel(channel) {

package/src/win32/panewindow.js

@@ -205,6 +205,15 @@ export class Win32PaneWindow {
     this.title = title;
   }
 
+  /** The cursor this pane's tree names, sent to the host, which shows it:
+   *  the pointer is over the host's window, not this one (the Cocoa pane's
+   *  `setCursor`). */
+  setCursor(name) {
+    this.cursor = name;
+    if (this.destroyed) return;
+    this.app._paneSend?.({ type: 'pane-cursor', cursor: name ?? null });
+  }
+
   setSizeHints() {}
 
   /** The host sizes a pane, not the pane itself: a `<Frame>`'s box is laid