react-x11 2.23.0 → 2.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.23.0",
+  "version": "2.23.1",
   "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/panewindow.js

@@ -252,7 +252,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 +269,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/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/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/text.js

@@ -37,6 +37,9 @@ const STRIP_COVERAGE = 0.45;
 
 const textStripBelow = new WeakMap();
 
+/** `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;
@@ -410,13 +413,28 @@ export class TextNode extends Node {
     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) {
       const spans = this.collectSpans([]);
       const base = this.resolvedTextStyle();
@@ -440,11 +458,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 +541,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,

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