react-x11 2.22.13 → 2.23.1

package/package.json

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

@@ -1213,7 +1213,7 @@ export class EventManager {
       n.props.onMouseEnter?.(this._makeEvent('mouseEnter', native, n));
     }
     this.hoverPath = newPath;
-    this._updateCursor(newPath);
+    this._updateCursor(newPath, native);
   }
 
   /**
@@ -1322,14 +1322,32 @@ export class EventManager {
     callHandler(node, 'unstable_onAttention', handler, ev);
   }
 
-  /** Apply the deepest hovered node's `cursor` prop to the window.
-   * Feature-detected: needs ntk with Window.setCursor (> 3.1.0). */
-  _updateCursor(path) {
+  /** 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
+   * every motion. Feature-detected: needs ntk with Window.setCursor
+   * (> 3.1.0). */
+  _updateCursor(path, native = null) {
     const wnd = this.node.window;
     if (typeof wnd.setCursor !== 'function') return;
+    // An element that draws what is inside it — a document, a graph, an
+    // editor — is one node with many cursors, and only it knows which part
+    // is a link, a handle or text: it answers for the point, in the device
+    // pixels `abs` is in, as `textIndexAt` does. While a capture holds the
+    // pointer it is not asked — hover is frozen for the gesture and the
+    // point may be anywhere — and keeps what it named where the gesture
+    // began, while a style the press changed still shows.
+    const asking = native != null && !this._captured();
+    const named = (this._pointCursors ??= new WeakMap());
     let cursor = null;
     for (let i = path.length - 1; i >= 0; i--) {
-      const c = path[i].style.cursor ?? path[i].defaultCursor;
+      const node = path[i];
+      let c = node.style.cursor;
+      if (c == null && node.cursorAt) {
+        if (asking) named.set(node, node.cursorAt(native.x, native.y) ?? null);
+        c = named.get(node) ?? null;
+      }
+      c ??= node.defaultCursor;
       if (c != null) {
         cursor = c;
         break;
@@ -1687,7 +1705,11 @@ export class EventManager {
       // …and nothing scrolls to meet it either: the node is coming back to
       // the arrangement it left, and this reveal's layout has not run, so a
       // scroll here would be computed from a rect that does not exist yet.
-      if (!restoring) this._scrollIntoView(node);
+      // Nor for a press: the node is under the pointer, so the part that
+      // matters is on screen already, and a document taller than its pane
+      // was scrolled to its top by every click on it — the drag that
+      // followed selecting from there.
+      if (!restoring && reason !== 'pointer') this._scrollIntoView(node);
       if (this.keyboardFocused) {
         this._defaultFocusOn = true;
         node.defaultFocus?.({ reason, backwards });

package/src/frame/index.js

@@ -45,6 +45,7 @@ import React, {
 
 import { useAppOrNull } from '../appcontext.js';
 import { canEmbed } from '../embedding.js';
+import { WHEEL_NOTCH_PX } from '../events.js';
 import { FrameEnv } from './env.js';
 import { CallbackTable, PROTOCOL } from './protocol.js';
 
@@ -607,9 +608,13 @@ function PaneHostView({
     onMouseDown: forward('mousedown', (ev) => ({ keycode: ev.button ?? 1 })),
     onMouseUp: forward('mouseup', (ev) => ({ keycode: ev.button ?? 1 })),
     onMouseMove: forward('mousemove', () => ({})),
+    // The host's event is in pixels — events.js turned each notch into
+    // WHEEL_NOTCH_PX of them — and the pane's window turns what it is sent
+    // into pixels again, so it is sent notches: sent the pixels, one notch
+    // scrolled a page 2304 of them.
     onWheel: forward('wheel', (ev) => ({
-      deltaX: ev.deltaX ?? 0,
-      deltaY: ev.deltaY ?? 0,
+      deltaX: (ev.deltaX ?? 0) / WHEEL_NOTCH_PX,
+      deltaY: (ev.deltaY ?? 0) / WHEEL_NOTCH_PX,
       deltaMode: ev.deltaMode ?? 'line',
       smooth: Boolean(ev.smooth),
       source: 'forwarded',

package/src/node.d.ts

@@ -699,6 +699,15 @@ export declare class Node {
   /** The cursor to show over this element when nothing in the style says
    * otherwise — `'text'` for something editable. A `cursor` style wins. */
   defaultCursor?: string;
+  /**
+   * The cursor for a point inside this element, for one that draws parts
+   * only it can tell apart — a link in a document, a handle in a graph, the
+   * text in an editor. Asked on every motion over it, with the pointer in
+   * device pixels, the unit `abs` is in. Null says nothing in particular is
+   * there, and `defaultCursor` answers. A `cursor` style still wins, and a
+   * capture holding the pointer freezes the cursor with the rest of hover.
+   */
+  cursorAt?(x: number, y: number): string | null;
   /**
    * The ARIA role this element is when the application writes none — the
    * registered-element counterpart of `<textinput>` defaulting to

package/src/nodes/animation.js

@@ -138,8 +138,14 @@ export class NodeAnimation {
     }
     // A grid reads its tracks off the style, where yoga never sees them, so
     // a change to one asks the algorithm again — and gives one that threw
-    // another go.
-    if (this.yoga && gridContainerMoved(displayed, this.style)) {
+    // another go. Asked of a layout host alone, the only node it acts on:
+    // seven properties read off two styles of every shape is a scan every
+    // node paid on each of the several swaps a mount makes, 3% of it.
+    if (
+      this.yoga &&
+      (this._host !== null || this._layoutAbandoned !== null) &&
+      gridContainerMoved(displayed, this.style)
+    ) {
       if (this._host !== null) this._hostChanged();
       else if (this._layoutAbandoned !== null) {
         this._layoutAbandoned = 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/layouthost.js

@@ -8,6 +8,7 @@ import {
   createLayoutNode,
   isMeasuringExactly,
   measuringExactly,
+  setLayoutValue,
 } from '../styles.js';
 import { Yoga } from '../yoga.js';
 import {
@@ -342,11 +343,11 @@ export class NodeLayoutHost {
     // A floor written while it was a flex item means nothing to a layout,
     // which sizes the child itself — and would outlast it as a minimum.
     if (child._floorMinW != null) {
-      cy.setMinWidth(child.style.minWidth);
+      setLayoutValue(cy, 'minWidth', child.style.minWidth);
       child._floorMinW = undefined;
     }
     if (child._floorMinH != null) {
-      cy.setMinHeight(child.style.minHeight);
+      setLayoutValue(cy, 'minHeight', child.style.minHeight);
       child._floorMinH = undefined;
     }
     child._hostSlot = null;

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/queries.js

@@ -7,6 +7,7 @@ import {
   localTextStyleChanged,
   containerAnswers,
 } from '../styles.js';
+import { reportStyleProblem } from '../errors.js';
 import { DEV } from './util.js';
 
 /** How many extra layout passes a flush spends settling `@container` blocks
@@ -193,7 +194,25 @@ export class NodeQueries {
       // catch-up looks the dirty flags are spent and no leaf's height moved
       // — so the floor of a card that turned from a row into a column would
       // stay the row's, and yoga would squeeze the column down to it.
-      if (applyLayoutStyle(this.yoga, this.style, before) && this.root) {
+      //
+      // This runs in a frame, so a value the layout refuses is dropped and
+      // reported rather than thrown: nothing would catch it.
+      const refused = [];
+      const moved = applyLayoutStyle(this.yoga, this.style, before, refused);
+      for (const { key, value, error } of refused) {
+        // an enum's own message already says what it is and what it takes
+        const said = error.message.startsWith('react-x11:')
+          ? error.message
+          : `react-x11: invalid ${key} ${JSON.stringify(value)} ` +
+            `(${error.message})`;
+        reportStyleProblem(
+          this,
+          `${said} in <${this.kind} style>, applied when a query block ` +
+            'started matching',
+          'The declaration is dropped, as CSS drops one it cannot parse',
+        );
+      }
+      if (moved && this.root) {
         this.root._floorsDirty = true;
         this.root._floorsContentDirty = true;
         this.root._floorsSources.add(this);

package/src/nodes/scrollable.js

@@ -889,14 +889,8 @@ export const Scrollable = (Base) =>
           ? this.yoga.getComputedWidth() - left - w
           : left;
       const far = near + w;
-      if (bottom > this.scrollY + this.abs.height) {
-        this.scrollY = bottom - this.abs.height;
-      }
-      if (top < this.scrollY) this.scrollY = top;
-      if (far > this.scrollX + this.abs.width) {
-        this.scrollX = far - this.abs.width;
-      }
-      if (near < this.scrollX) this.scrollX = near;
+      this.scrollY = nearestScroll(this.scrollY, this.abs.height, top, bottom);
+      this.scrollX = nearestScroll(this.scrollX, this.abs.width, near, far);
     }
 
     paint(ctx) {
@@ -1035,6 +1029,23 @@ export const Scrollable = (Base) =>
     }
   };
 
+/**
+ * Where one axis of a viewport scrolls to bring `[start, end)` into view,
+ * the way CSSOM View's `block: nearest` does it: a span already inside, or
+ * one that covers the viewport, leaves it where it is — nothing more of it
+ * can be shown — and one partly or wholly out comes in by the edge that
+ * moves it least, which is its near edge where it fits and its far edge
+ * where it is the larger. A document taller than its pane was scrolled to
+ * its top, wherever it had been read to.
+ */
+function nearestScroll(scroll, size, start, end) {
+  const before = start < scroll;
+  const after = end > scroll + size;
+  if (before === after) return scroll;
+  const larger = end - start > size;
+  return before !== larger ? start : end - size;
+}
+
 // An arrow key scrolls by a wheel notch — literally the one events.js
 // converts a notch into, so the two input routes agree about what one step
 // is however far a notch turns out to be.

package/src/nodes/text.js

@@ -1,7 +1,11 @@
 // <text> and its chunks: shaped, wrapped and elided text, the line bands a
 // selection paints, and the glyph strip.
 
-import { localTextStyleChanged, TEXT_REMEASURE } from '../styles.js';
+import {
+  lineHeightOf,
+  localTextStyleChanged,
+  TEXT_REMEASURE,
+} from '../styles.js';
 import { cssColorStraight } from 'ntk/color';
 import { hooks as a11yHooks } from '../a11y.js';
 import { codePointAtOffset, codeUnitOffsets } from '../textrange.js';
@@ -33,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;
@@ -406,20 +413,35 @@ 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();
       layout = fonts.layout(spans, base, {
         maxWidth: Number.isFinite(maxWidth) ? maxWidth : undefined,
         align: this.style.textAlign,
-        lineHeight: this.style.lineHeight,
+        lineHeight: lineHeightOf(this.style.lineHeight),
         maxLines: Number.isFinite(maxLines) ? maxLines : undefined,
         // 'clip' is ntk's default, so an unset property and the CSS default
         // are the same request rather than two paths through the layout.
@@ -436,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
@@ -478,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/floors.js

@@ -3,6 +3,7 @@
 // minimums. Free functions over nodes; WindowNode drives them from size.js,
 // and a layout host from layouthost.js.
 
+import { setLayoutValue } from '../../styles.js';
 import { Yoga } from '../../yoga.js';
 import { NO_CHILDREN } from '../util.js';
 
@@ -688,7 +689,9 @@ export function freezeWidths(node, out) {
 
 /** …and back to the width the style asks for, on exactly what was pinned. */
 export function restoreWidths(frozen) {
-  for (const child of frozen) child.yoga.setWidth(child.style.width);
+  for (const child of frozen) {
+    setLayoutValue(child.yoga, 'width', child.style.width);
+  }
 }
 
 /**
@@ -909,14 +912,9 @@ export function writeFloors(node, axis) {
       if (extent > 0) floor = extent;
     }
     if ((horizontal ? child._floorMinW : child._floorMinH) === floor) continue;
-    const value = floor ?? child.style[own];
-    if (horizontal) {
-      child.yoga.setMinWidth(value);
-      child._floorMinW = floor;
-    } else {
-      child.yoga.setMinHeight(value);
-      child._floorMinH = floor;
-    }
+    setLayoutValue(child.yoga, own, floor ?? child.style[own]);
+    if (horizontal) child._floorMinW = floor;
+    else child._floorMinH = floor;
   }
 }
 

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/palette.js

@@ -503,6 +503,25 @@ const desktopPalettes = new Map();
  * `'no-preference'` means *use your own default*, which is the light one.
  */
 export function paletteFor(appearance) {
+  // An appearance is a frozen snapshot, replaced whole when the desktop
+  // changes (appearance.js), so the last one asked about answers by
+  // identity. `baseTheme()` asks with the same snapshot for every node
+  // created — each one detached, with no theme above it yet — and spelling
+  // the key to the palettes below was 200 ns of each on a desktop with an
+  // accent: a thousand rows scrolling into a table, a document mounting.
+  if (appearance === lastAppearance) return lastPalette;
+  const palette = paletteOf(appearance);
+  if (Object.isFrozen(appearance)) {
+    lastAppearance = appearance;
+    lastPalette = palette;
+  }
+  return palette;
+}
+
+let lastAppearance = null;
+let lastPalette = null;
+
+function paletteOf(appearance) {
   const scheme = appearance.colorScheme === 'dark' ? DarkTheme : DefaultTheme;
   if (appearance.palette) return withDesktopPalette(scheme, appearance.palette);
   const { accent, accentText, selection } = appearance;

package/src/styles.js

@@ -11,7 +11,7 @@ import {
   GRID_CONTAINER_PROPS,
   GRID_ITEM_PROPS,
 } from './grid.js';
-import { Yoga } from './yoga.js';
+import { Yoga, layoutLoaded } from './yoga.js';
 
 const FLEX_DIRECTION = {
   row: Yoga.FLEX_DIRECTION_ROW,
@@ -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,10 +865,39 @@ 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);
+  if (text !== undefined) {
+    // unset, the way a conditional writes it
+    if (value == null || value === '' || isToken(value)) return;
+    const [valid, expected] = text;
+    if (!valid(value)) {
+      throw new Error(
+        `react-x11: invalid ${key} ${JSON.stringify(value)} in ${where} ` +
+          `(expected ${expected})`,
+      );
+    }
+    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 &&
@@ -913,6 +956,26 @@ function validateValue(key, value, where) {
     }
     return;
   }
+  // A layout value the layout cannot take — `width: 'hidden'`, `padding:
+  // 'auto'`, `flexDirection: 'sideways'` — throws where it is applied, and
+  // inside a query block that is a frame, not a commit: a block that starts
+  // matching on a resize took the process down. So it is asked here, of the
+  // same appliers, wherever it is written. A `$token` is not a length until
+  // it resolves, and is answered by the frame then (`_sizeQueriesChanged`).
+  const refused =
+    isToken(value) || mentionsToken(value) ? null : layoutRefusal(key, value);
+  if (refused) {
+    // an enum's own message lists the choices; yoga's names only itself
+    if (refused.message.startsWith('react-x11:')) {
+      refused.message += `\n  in ${where}`;
+      throw refused;
+    }
+    const auto = layoutRefusal(key, 'auto') === null ? ", or 'auto'" : '';
+    throw new Error(
+      `react-x11: invalid ${key} ${JSON.stringify(value)} in ${where} ` +
+        `(expected a number of pixels or a percentage like '50%'${auto})`,
+    );
+  }
   const grid = GRID_VALUES.has(key);
   if (!grid && key !== 'backgroundImage' && key !== 'boxShadow') return;
   try {
@@ -1536,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;
@@ -1566,11 +1657,15 @@ const TOKEN_IN_VALUE = /\$[A-Za-z_][A-Za-z0-9_-]*/g;
 const mentionsToken = (v) =>
   typeof v === 'string' && v.charCodeAt(0) !== 36 && v.includes('$');
 
-/** The nested blocks a token can hide in, one level down: a state block,
- *  whose values are style values, and `animation`, whose values are the
- *  per-property declarations *whose* values are style values. Both are
- *  walked by everything that looks for a `$name`, so a themed loop resolves
- *  by the same rules as a themed hover. */
+/** The nested blocks a token can hide in, one level down: a state block or
+ *  a query block, whose values are style values, and `animation`, whose
+ *  values are the per-property declarations *whose* values are style
+ *  values. All are walked by everything that looks for a `$name`, so a
+ *  themed loop resolves by the same rules as a themed hover — and a themed
+ *  wide layout too. The query blocks were missed: `'@width >= 600':
+ *  { padding: '$gutter' }` handed yoga the string `'$gutter'` the moment
+ *  it matched, which threw from the frame. */
+const holdsStyle = (key) => isState(key) || isQuery(key);
 const animationBlocks = (style) =>
   style.animation && typeof style.animation === 'object'
     ? Object.values(style.animation).filter((e) => e && typeof e === 'object')
@@ -1580,7 +1675,7 @@ export function styleUsesTokens(style) {
   for (const key of Object.keys(style)) {
     const v = style[key];
     if (isToken(v) || mentionsToken(v)) return true;
-    if (key.charCodeAt(0) === 58 && v && styleUsesTokens(v)) return true;
+    if (holdsStyle(key) && v && styleUsesTokens(v)) return true;
   }
   return animationBlocks(style).some(styleUsesTokens);
 }
@@ -1594,7 +1689,7 @@ export function tokenNames(style, out = new Set()) {
     if (isToken(v)) out.add(v);
     else if (mentionsToken(v))
       for (const m of v.match(TOKEN_IN_VALUE) ?? []) out.add(m);
-    else if (key.charCodeAt(0) === 58 && v) tokenNames(v, out);
+    else if (holdsStyle(key) && v) tokenNames(v, out);
   }
   for (const block of animationBlocks(style)) tokenNames(block, out);
   return out;
@@ -1624,7 +1719,7 @@ export function stripTokens(style) {
     if (key === 'animation' && animationBlocks(style).some(styleUsesTokens)) {
       continue;
     }
-    out[key] = key.charCodeAt(0) === 58 && v ? stripTokens(v) : v;
+    out[key] = holdsStyle(key) && v ? stripTokens(v) : v;
   }
   return out;
 }
@@ -1691,7 +1786,7 @@ export function resolveTokens(
       else if (strict) {
         found.push(unknownToken(unknown, theme, `${where} ${key}`));
       }
-    } else if (key.charCodeAt(0) === 58 && v) {
+    } else if (holdsStyle(key) && v) {
       out[key] = resolveTokens(v, theme, `${where} ${key}`, strict, found);
     } else if (key === 'animation' && v && typeof v === 'object') {
       const loops = {};
@@ -2011,9 +2106,22 @@ const NO_STYLE = Object.freeze({});
  * name of both styles was most of the cost of a node that mounts — a
  * virtualized list replaces its rows at input rate.
  *
+ * `problems` is for a caller React is not under — a query block that
+ * starts matching mid-frame — where a throw would leave the frame and take
+ * the process with it. A value the layout cannot take is then dropped, the
+ * property going back to its default as CSS drops a declaration it cannot
+ * parse, and `{ key, value, error }` is pushed for the caller to report.
+ * Without it the value throws, which is what a commit wants: React routes
+ * it to a boundary.
+ *
  * @returns true if any layout-affecting prop changed
  */
-export function applyLayoutStyle(yogaNode, props, oldProps = NO_STYLE) {
+export function applyLayoutStyle(
+  yogaNode,
+  props,
+  oldProps = NO_STYLE,
+  problems = null,
+) {
   let changed = false;
   // A placed node's insets — sticky's thresholds, or whatever a registered
   // position reads them as — are the placement's, never offsets: yoga gets
@@ -2030,7 +2138,12 @@ export function applyLayoutStyle(yogaNode, props, oldProps = NO_STYLE) {
         ? !samePosition(props.position, oldProps.position)
         : props[key] !== oldProps[key];
     if (!moved && !(flipped && inset)) continue;
-    applier(yogaNode, placed && inset ? undefined : props[key]);
+    const value = placed && inset ? undefined : props[key];
+    // `null` is unset, the way a conditional writes it — `wide ? 240 :
+    // null` — and as it is for every other property in this vocabulary;
+    // yoga's own setters throw on it
+    if (problems === null) applier(yogaNode, value ?? undefined);
+    else applyOrDrop(applier, yogaNode, key, value ?? undefined, problems);
     changed = true;
   }
   // …and the ones the new style dropped, which go back to yoga's default
@@ -2051,6 +2164,72 @@ export function applyLayoutStyle(yogaNode, props, oldProps = NO_STYLE) {
   return changed;
 }
 
+/**
+ * One layout property set on its own — a width put back after the content
+ * floors pinned it, a minimum restored under a floor — by the rules
+ * `applyLayoutStyle` sets it by: `null` is unset, and a value the layout
+ * refuses is dropped. A refused one was reported where it was first
+ * applied, and throwing here would throw from inside a layout pass.
+ */
+export function setLayoutValue(yogaNode, key, value) {
+  const applier = LAYOUT_APPLIER_OF.get(key);
+  try {
+    applier(yogaNode, value ?? undefined);
+  } catch {
+    applier(yogaNode, undefined);
+  }
+}
+
+/** One declaration, dropped rather than thrown when the layout refuses it
+ *  (`applyLayoutStyle`'s `problems`). */
+function applyOrDrop(applier, yogaNode, key, value, problems) {
+  try {
+    applier(yogaNode, value);
+  } catch (error) {
+    applier(yogaNode, undefined);
+    problems.push({ key, value, error });
+  }
+}
+
+// A yoga node no layout runs on, for development to ask whether a value is
+// one the layout can take: the question the frame asks, so the two cannot
+// disagree about what a length is.
+let scratchNode = null;
+
+// What the layout has already taken, per property, so development asks
+// yoga once per spelling rather than once per style it checks: a list of a
+// thousand rows checks the same six values a thousand times, and a setter
+// is a call into WebAssembly. A property that takes one number takes them
+// all — a length, a factor — and one that refuses them is an enum, so
+// numbers are remembered as one entry.
+const takenValues = new Map(
+  [...LAYOUT_APPLIER_OF.keys()].map((key) => [key, new Set()]),
+);
+const NUMBERS = Symbol('numbers');
+const TAKEN_MAX = 256;
+
+/** What applying `value` to `key` throws, or null when the layout takes
+ *  it — and for a key that is not a layout property. */
+function layoutRefusal(key, value) {
+  const taken = takenValues.get(key);
+  if (taken === undefined || value == null) return null;
+  if (taken.has(typeof value === 'number' ? NUMBERS : value)) return null;
+  if (scratchNode === null) {
+    // `createStyles` validates at module scope, before `createRoot` has
+    // loaded the engine — and the commit validates the same style again
+    if (!layoutLoaded()) return null;
+    scratchNode = Yoga.Node.create();
+  }
+  try {
+    LAYOUT_APPLIER_OF.get(key)(scratchNode, value);
+  } catch (error) {
+    return error;
+  }
+  if (typeof value === 'number') taken.add(NUMBERS);
+  else if (taken.size < TAKEN_MAX) taken.add(value);
+  return null;
+}
+
 /** Two `position` values asking for the same thing. A registered one written
  *  with its options is an object, and an inline object is a new one every
  *  render — which must not cost a layout pass per commit. */
@@ -2098,21 +2277,88 @@ export function paintPropsChanged(props, oldProps = {}) {
   );
 }
 
+// The text values a style can get wrong in a way the engines do not survive:
+// a `fontStyle` of `7` threw from inside ntk's face matching, a `lineHeight`
+// of `'24px'` made a paragraph NaN pixels tall — thrown from the layout
+// pass, where nothing catches it — and a `fontSize` of `'20px'` set no text
+// at all. A number is a number or a numeric string, the way the coercion
+// these always went through read one; anything else is not the property,
+// and text inherits past it, as CSS inherits past a declaration it cannot
+// parse. Development says so where the style is written (`validateValue`).
+const NUMERIC_TEXT = /^\s*[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?\s*$/i;
+const numericOf = (v) =>
+  typeof v === 'number'
+    ? v
+    : typeof v === 'string' && NUMERIC_TEXT.test(v)
+      ? Number(v)
+      : NaN;
+const FONT_WEIGHT_WORDS = new Set(['normal', 'bold', 'bolder', 'lighter']);
+const FONT_STYLE = /^(?:normal|italic|oblique)\b/;
+
+const isFontSize = (v) => {
+  const n = numericOf(v);
+  return n >= 0 && n < Infinity;
+};
+const isFontWeight = (v) => {
+  if (FONT_WEIGHT_WORDS.has(v)) return true;
+  const n = numericOf(v);
+  return n >= 1 && n <= 1000;
+};
+const isFontStyle = (v) => typeof v === 'string' && FONT_STYLE.test(v);
+const isFontFamily = (v) => typeof v === 'string' && v.trim() !== '';
+
+/** A `lineHeight` a layout can multiply by, or undefined for the font's own. */
+export function lineHeightOf(value) {
+  const n = numericOf(value);
+  return n >= 0 && n < Infinity ? n : undefined;
+}
+
+/** What each of them is, for development's message. */
+const TEXT_VALUE_CHECKS = new Map([
+  ['fontSize', [isFontSize, 'a number of pixels, like fontSize: 14']],
+  [
+    'fontWeight',
+    [
+      isFontWeight,
+      "a weight from 1 to 1000, like 600, or 'normal', 'bold', 'bolder' or " +
+        "'lighter'",
+    ],
+  ],
+  ['fontStyle', [isFontStyle, "'normal', 'italic' or 'oblique'"]],
+  [
+    'fontFamily',
+    [isFontFamily, "a family's name, like 'Inter' or 'monospace'"],
+  ],
+  [
+    'lineHeight',
+    [
+      (v) => lineHeightOf(v) !== undefined,
+      "a multiple of the font's own line height, like lineHeight: 1.5",
+    ],
+  ],
+]);
+
 /** Resolved text style (TextLayout base style) from props + inherited. */
 export function textStyleFrom(props, inherited) {
   const variantNumeric = props.fontVariantNumeric ?? inherited.variantNumeric;
   const featureSettings =
     props.fontFeatureSettings ?? inherited.featureSettings;
   return {
-    family: props.fontFamily ?? inherited.family,
-    size: props.fontSize ?? inherited.size,
-    weight: props.fontWeight ?? inherited.weight,
-    style: props.fontStyle ?? inherited.style,
+    family: isFontFamily(props.fontFamily)
+      ? props.fontFamily
+      : inherited.family,
+    size: isFontSize(props.fontSize) ? props.fontSize : inherited.size,
+    weight: isFontWeight(props.fontWeight)
+      ? props.fontWeight
+      : inherited.weight,
+    style: isFontStyle(props.fontStyle) ? props.fontStyle : inherited.style,
     // ntk's name for it is `variations`; the prop is spelled after the CSS
     // 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/types/nodes.d.ts

@@ -148,7 +148,8 @@ export interface ScrollableNode extends DrawnNode {
   canScroll(dx: number, dy: number): boolean;
   /**
    * Scroll the minimum amount on both axes that makes a descendant fully
-   * visible. Safe to call right after that node mounts — the request is
+   * visible; one larger than the viewport is left where it covers it and
+   * otherwise brought in by its nearer edge (CSSOM View's `nearest`). Safe to call right after that node mounts — the request is
    * resolved on the next layout pass, when it has geometry, and `onScroll`
    * reports the move once that pass is over.
    */

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