react-x11 2.49.0 → 2.50.0

package/src/decorations.js

@@ -37,6 +37,8 @@
 import { cssColorStraight } from 'ntk/color';
 import { shadowReach, shadowSigma } from 'ntk/shadow-math';
 
+import { isCurrentColor } from './currentcolor.js';
+
 /** A number, with or without the `px` CSS wants and this vocabulary does not. */
 const LENGTH = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:px)?$/i;
 /** …and the same thing as a percentage, which colour stops also take. */
@@ -50,9 +52,11 @@ const HORIZONTAL = new Set(['left', 'right']);
 /**
  * Split on `,` or on whitespace, but only at the top level: a stop is
  * `rgba(0, 0, 0, .4)` as often as it is `#333`, and every naive split on
- * this vocabulary gets that wrong.
+ * this vocabulary gets that wrong. The shorthands split by it too
+ * (src/shorthands.js) — `border: '1px solid rgba(0, 0, 0, .1)'` is three
+ * values, not six.
  */
-function splitTop(text, byComma) {
+export function splitTop(text, byComma) {
   const out = [];
   let depth = 0;
   let start = 0;
@@ -207,14 +211,16 @@ function readStop(part, value) {
   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. */
+/** A stop's colour, which RENDER is handed as written once a `currentColor`
+ *  is resolved (`_backgroundGradient`) — 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)",
+      "'tomato', 'rgba(0, 0, 0, .4)' or 'currentColor', or a $token, before " +
+      'its position)',
   );
 }
 
@@ -223,10 +229,15 @@ function stopColor(color, value) {
  * 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).
+ * rather than throwing (see "memoized parsing" below). `currentColor` is
+ * the node's ink, which only the paint knows (`Node.resolveColor`).
  */
 function isColorOrToken(color) {
-  return color.includes('$') || cssColorStraight(color) !== null;
+  return (
+    color.includes('$') ||
+    cssColorStraight(color) !== null ||
+    isCurrentColor(color)
+  );
 }
 
 /**
@@ -349,7 +360,8 @@ function resolveStopOffsets(stops, length) {
  * renderer draws the list back to front.
  *
  * `color` may be null, which is CSS's `currentColor` — the node's own ink,
- * which the caller resolves because only it knows the cascade.
+ * which the caller resolves because only it knows the cascade. The keyword
+ * written out reads as null too, so a shadow has one way to say it.
  *
  * Throws on `inset` and on anything unparseable; see the note at the top of
  * this file for why a shadow that silently does the wrong thing is worse
@@ -394,7 +406,7 @@ function readShadow(part, value) {
   }
   const [dx, dy, blur = 0, spread = 0] = lengths;
   if (blur < 0) throw bad('has a negative blur radius');
-  return { dx, dy, blur, spread, color };
+  return { dx, dy, blur, spread, color: isCurrentColor(color) ? null : color };
 }
 
 /**

package/src/editor.js

@@ -0,0 +1,151 @@
+// Source locations and the editor that opens them: reading a stack trace
+// into frames, telling the frames of an app's own code from React's and this
+// renderer's, and handing a file and line to the developer's editor. Shared by
+// click-to-component (an Alt+Click on an element) and `react-x11 dev`'s error
+// window (a click on a frame), so the two open the same editor the same way.
+// A leaf: nothing here reaches the renderer or React DevTools.
+import { spawn } from 'node:child_process';
+import { dirname, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export const STACK_FRAME = /^\s*at\s+(?:(.+?)\s+\()?(.+?):(\d+):(\d+)\)?\s*$/;
+
+// The frames to walk past before the JSX call site itself: React captures
+// the Error inside `jsxDEV`/`createElement`, and an element created by this
+// renderer (or by node internals) is never what a click means. `SELF_DIR` is
+// whichever copy of react-x11 is running — the repo's own `src/` for the
+// examples and tests, an installed `node_modules/react-x11/src` for an app.
+//
+// Everything *else* in `node_modules` is deliberately not skipped here: a
+// frame inside an installed package is a real call site, it is just not one
+// in the application's source, and telling the two apart is what lets
+// `resolveOwnedLocation` climb to the owner that is. Skipping every
+// `node_modules` frame instead would walk straight past the library
+// component and land on whatever application frame happens to be deeper in
+// the render stack — usually the `render()` call at startup, which looks
+// like an answer and isn't.
+const REACT_RUNTIME =
+  /[\\/]node_modules[\\/](react|react-dom|react-reconciler|react-refresh|scheduler)[\\/]/;
+const SELF_DIR = dirname(fileURLToPath(import.meta.url)) + sep;
+
+export function isInternalFrame(file) {
+  return (
+    file.startsWith('node:') ||
+    file === '<anonymous>' ||
+    file.startsWith(SELF_DIR) ||
+    REACT_RUNTIME.test(file)
+  );
+}
+
+// GUI editors: navigate their registered URI scheme (same idea as
+// https://github.com/sidorares/show-component, minus the browser) instead of
+// spawning their CLI shim. The CLI wrapper (e.g. `cursor -g ...`) round-trips
+// through a shell script that re-detects and re-execs the real app, which is
+// visibly slower than the OS handing the URL straight to the already-running
+// instance via Launch Services (macOS) / xdg-open (Linux).
+const EDITOR_SCHEMES = {
+  cursor: 'cursor',
+  code: 'vscode',
+  vscode: 'vscode',
+  'code-insiders': 'vscode-insiders',
+  'vscode-insiders': 'vscode-insiders',
+  windsurf: 'windsurf',
+};
+
+// Terminal editors have no URI scheme to navigate — spawn them directly.
+const EDITOR_CLI = {
+  vim: (file, line, column) => [
+    'vim',
+    [`+call cursor(${line},${column})`, file],
+  ],
+  nvim: (file, line, column) => [
+    'nvim',
+    [`+call cursor(${line},${column})`, file],
+  ],
+};
+
+const OPEN_URI_COMMAND = process.platform === 'darwin' ? 'open' : 'xdg-open';
+
+function editorUri(scheme, file, line, column) {
+  return `${scheme}://file${encodeURI(file)}:${line}:${column}`;
+}
+
+export function openInEditor({ file, line, column }) {
+  const name = editorName();
+  let bin, args;
+  if (EDITOR_CLI[name]) {
+    [bin, args] = EDITOR_CLI[name](file, line, column);
+  } else {
+    // an unrecognized name is assumed to be a URI scheme itself, so any
+    // editor that registers one works without a matching entry above
+    const scheme = EDITOR_SCHEMES[name] || name;
+    bin = OPEN_URI_COMMAND;
+    args = [editorUri(scheme, file, line, column)];
+  }
+  // stderr is kept (rather than the whole stdio ignored) for one reason:
+  // `open`/`xdg-open` exit non-zero and print *there* when nothing claims
+  // the scheme — an editor that isn't installed, or one whose URL handler
+  // was never registered. Swallowing that is what makes click-to-component
+  // look like it only logs: the location resolves, the console line prints,
+  // and the editor silently never opens.
+  const child = spawn(bin, args, {
+    detached: true,
+    stdio: ['ignore', 'ignore', 'pipe'],
+  });
+  let stderr = '';
+  // ...and unref'd, so keeping it does not keep the process alive: a pipe is
+  // a ref'd handle, and an editor that outlives the app it was launched from
+  // is the normal case, not a reason to hold the event loop open.
+  child.stderr.unref();
+  child.stderr.on('data', (chunk) => {
+    stderr += chunk;
+  });
+  child.on('error', (err) => {
+    console.warn(
+      `react-x11: could not launch "${bin}" to open ${file}:${line} (${err.code ?? err.message}). ` +
+        'Set REACT_X11_EDITOR to your editor CLI (cursor, code, code-insiders, windsurf, vim, nvim).',
+    );
+  });
+  child.on('exit', (code) => {
+    if (!code) return;
+    console.warn(
+      `react-x11: opening ${file}:${line} — \`${bin} ${args.join(' ')}\` exited ${code}. ` +
+        (stderr.trim() ? `${stderr.trim()} ` : '') +
+        `Set REACT_X11_EDITOR to the editor you actually use (currently "${name}"; ` +
+        'cursor, code, code-insiders, windsurf, vim, nvim, or any registered URI scheme).',
+    );
+  });
+  child.unref();
+}
+
+/** The editor `openInEditor` opens: `REACT_X11_EDITOR`, else `cursor`. */
+export function editorName() {
+  return process.env.REACT_X11_EDITOR || 'cursor';
+}
+
+/**
+ * A stack trace's frames, in order: where each one is, what it is called, and
+ * whether it is React's, Node's or this renderer's own (`internal`) or inside
+ * an installed package (`installed`). Lines that are not frames — the message,
+ * a `[cause]` — are not in the list.
+ */
+export function stackFrames(stack) {
+  const frames = [];
+  for (const text of String(stack ?? '').split('\n')) {
+    const match = text.match(STACK_FRAME);
+    if (!match) continue;
+    const [, functionName, rawFile, lineStr, columnStr] = match;
+    const file = rawFile.startsWith('file://')
+      ? fileURLToPath(rawFile)
+      : rawFile;
+    frames.push({
+      functionName: functionName ?? null,
+      file,
+      line: Number(lineStr),
+      column: Number(columnStr),
+      internal: isInternalFrame(file),
+      installed: file.includes(`${sep}node_modules${sep}`),
+    });
+  }
+  return frames;
+}

package/src/foreignnodes.js

@@ -482,12 +482,19 @@ export class ForeignNode extends Node {
   _applyBackground() {
     const wnd = this.socket?.window;
     if (typeof wnd?.setBackgroundPixel !== 'function') return;
-    const pixel = pixelFor(this.style.backgroundColor);
+    const pixel = pixelFor(this.resolveColor(this.style.backgroundColor));
     if (pixel === null || pixel === this._backgroundPixel) return;
     this._backgroundPixel = pixel;
     wnd.setBackgroundPixel(pixel);
   }
 
+  /** …which a `currentColor` takes from the ink, and the ink can move with
+   *  no commit here. */
+  _inkMoved() {
+    super._inkMoved();
+    this._applyBackground();
+  }
+
   /** The client's window is a window of the display system over this one,
    *  so it follows the whole subtree's visibility — see
    *  `GlAreaNode._syncSurfaceVisibility`, which answers the same call. */

package/src/gloverlay.js

@@ -86,6 +86,7 @@
 import { cssColorStraight } from 'ntk/color';
 
 import { FULL_DAMAGE, addDamageRect } from './nodes/damage.js';
+import { radiusOf } from './styles.js';
 import {
   innerPixels,
   intersectRects,
@@ -1200,7 +1201,7 @@ export class GlOverlay {
     }
     const area = this.area;
     // a rounded surface clips its children to an arc, and the arc stays put
-    if ((area.style?.borderRadius ?? 0) > 0) return false;
+    if (radiusOf(area.style, area.abs) > 0) return false;
     // the whole pixels of the surface's box: a fractional edge is an
     // antialiased clip, and that does not move either
     const box = innerPixels(area.abs);

package/src/node.d.ts

@@ -624,6 +624,11 @@ export declare class Node {
    * with none of its own is set in. An element that draws text inherits
    * exactly what `<text>` inherits by asking. */
   resolvedTextStyle(): TextStyle;
+  /** A colour from this node's style as one a context can paint: the value
+   * itself, or — for `currentColor` — the node's ink, the colour
+   * `resolvedTextStyle()` resolves. Everything core paints from a style
+   * colour asks here; an element painting one of its own should too. */
+  resolveColor<T>(value: T): T | string;
   /** The flattened `style` prop with the active state blocks overlaid.
    * Everything that paints or lays out reads this, never `props`. */
   readonly style: Style;

package/src/nodes/animation.js

@@ -11,9 +11,11 @@ import {
   transitionFor,
   interpolate,
   ease,
+  isColor,
   isLayoutProp,
   TEXT_LAYOUT_PROPS,
 } from '../styles.js';
+import { isCurrentColor } from '../currentcolor.js';
 import { GRID_CONTAINER_PROPS, GRID_ITEM_PROPS } from '../grid.js';
 import { isPlaced } from '../layouts.js';
 import { desktopSettings, watchDesktopSettings } from '../desktopsettings.js';
@@ -85,11 +87,16 @@ export class NodeAnimation {
     // transitions start on later changes, which is CSS's rule too.
     if (this._placed) {
       for (const prop of Object.keys(target)) {
-        const to = target[prop];
-        const from = displayed[prop];
+        let to = target[prop];
+        let from = displayed[prop];
         if (from === to || from === undefined) continue;
         const duration = transitionFor(target, prop);
         if (duration <= 0) continue;
+        if (isCurrentColor(from) || isCurrentColor(to)) {
+          from = this._swapInk(prop, from, displayed);
+          to = this._swapInk(prop, to, target);
+          if (from === to) continue;
+        }
         if (interpolate(from, to, 0.5) === null) continue; // no midpoint: snap
         const entry = {
           from,
@@ -260,6 +267,27 @@ export class NodeAnimation {
     return this.style;
   }
 
+  /**
+   * A `currentColor` end of a transition as the colour it is at the swap:
+   * the ink `style` gives this node, or on `color` itself the ink it
+   * inherits. The keyword has no midpoint of its own, so the transition
+   * runs between the two colours as they are now — and lands on the style,
+   * where the keyword follows the ink again. An ink that moves mid-flight
+   * is caught up with at the end, not chased: a `color` that should carry
+   * a border with it is the property to transition.
+   */
+  _swapInk(prop, value, style) {
+    if (!isCurrentColor(value)) return value;
+    const inherited = this.inheritedTextStyle.color;
+    if (prop === 'color') return inherited;
+    // the displayed style's ink is cached; the target's is not yet
+    return style === this.style
+      ? this.resolvedTextStyle().color
+      : isColor(style.color)
+        ? style.color
+        : inherited;
+  }
+
   _animatedValues() {
     const values = {};
     for (const [prop, a] of this._anim) {
@@ -388,7 +416,7 @@ export class NodeAnimation {
     const specs =
       target.animation == null
         ? null
-        : animationsOf(target, 'a style', this.scale);
+        : animationsOf(target, 'a style', this.scale, this._units);
     if (!specs && !this._loops) return false;
     this._loops = specs;
     if (!specs) this.root?._forgetLoopNode(this);

package/src/nodes/boxpaint.js

@@ -5,9 +5,11 @@
 import {
   DEFAULT_FOCUS_RING,
   isColor,
+  radiusOf,
   resolveBorderWidths,
   resolveBorderColors,
 } from '../styles.js';
+import { isCurrentColor } from '../currentcolor.js';
 import {
   blurKernel,
   gradientSpec,
@@ -61,6 +63,19 @@ let warnedSideRadius = false;
 
 /** Box decorations, installed onto `Node.prototype` by node.js. */
 export class NodeBoxPaint {
+  /**
+   * A colour from this node's style as a colour a context can paint: the
+   * value itself, or — for CSS's `currentColor` — this node's resolved ink,
+   * its own `color` over what it inherits. Everything that paints a style
+   * colour asks here, on every backend, so the keyword means one thing
+   * wherever it is written; a registered element painting a colour of its
+   * own style asks the same. A node whose style paints in the keyword
+   * repaints when its ink moves (`_inkMoved`).
+   */
+  resolveColor(value) {
+    return isCurrentColor(value) ? this.resolvedTextStyle().color : value;
+  }
+
   /**
    * The focus ring this node would draw: its own `outline*` style, falling
    * back to the theme's focus-ring tokens for anything it leaves out. Null
@@ -80,7 +95,9 @@ export class NodeBoxPaint {
     if (!(resolved > 0)) return null;
     return {
       width: resolved,
-      color: style.outlineColor ?? theme?.focusRing ?? DEFAULT_FOCUS_RING.color,
+      color: this.resolveColor(
+        style.outlineColor ?? theme?.focusRing ?? DEFAULT_FOCUS_RING.color,
+      ),
       offset:
         style.outlineOffset ??
         theme?.focusRingOffset ??
@@ -138,7 +155,7 @@ export class NodeBoxPaint {
     // stroked centred on the path, like the border, so half the width sits
     // inside the offset gap and half outside it
     const grow = offset + width / 2;
-    const radius = this.style.borderRadius ?? 0;
+    const radius = radiusOf(this.style, this.abs);
     ctx.strokeStyle = outline.color;
     ctx.lineWidth = width;
     ctx.beginPath();
@@ -162,7 +179,8 @@ export class NodeBoxPaint {
     // under an element that covers this pass with opaque pixels, this fill
     // is never seen (`WindowNode._coverFor`)
     if (this.root?._coverChain?.has(this)) return;
-    const { backgroundColor, borderRadius = 0 } = this.style;
+    const backgroundColor = this.resolveColor(this.style.backgroundColor);
+    const borderRadius = radiusOf(this.style, this.abs);
     const fill = (style) => {
       ctx.fillStyle = style;
       if (borderRadius > 0) {
@@ -202,7 +220,11 @@ export class NodeBoxPaint {
     const spec = gradientSpec(value, this.scale);
     if (!spec) return null;
     const { x, y, width, height } = rect;
-    const key = `${value}|${x},${y},${width},${height}`;
+    // a stop in `currentColor` is the ink, which can move under a value
+    // that did not, so the ink is part of what the gradient is keyed by
+    const inked = spec.stops.some((stop) => isCurrentColor(stop.color));
+    const ink = inked ? this.resolvedTextStyle().color : '';
+    const key = `${value}|${x},${y},${width},${height}|${ink}`;
     if (this._gradient?.key === key) return this._gradient.value;
     const line = linearGradientGeometry(spec, rect);
     if (!line) return null;
@@ -213,7 +235,7 @@ export class NodeBoxPaint {
       line.y1,
     );
     for (const [offset, color] of line.stops)
-      gradient.addColorStop(offset, color);
+      gradient.addColorStop(offset, inked ? this.resolveColor(color) : color);
     this._gradient = { key, value: gradient };
     return gradient;
   }
@@ -235,7 +257,7 @@ export class NodeBoxPaint {
     if (!value || value === 'none') return;
     const shadows = shadowSpecs(value, this.scale);
     if (!shadows?.length) return;
-    const radius = this.style.borderRadius ?? 0;
+    const radius = radiusOf(this.style, this.abs);
     for (let i = shadows.length - 1; i >= 0; i--) {
       const shadow = shadows[i];
       // CSS's `currentColor`: this node's *resolved* ink, its own `color`
@@ -404,11 +426,15 @@ export class NodeBoxPaint {
   }
 
   _paintBorder(ctx) {
-    const { borderRadius = 0 } = this.style;
+    const borderRadius = radiusOf(this.style, this.abs);
     // Both through the node's resolved direction: a `borderStartWidth` lays
     // out on one side and has to paint on the same one.
     const w = resolveBorderWidths(this.style, this.direction);
     const colors = resolveBorderColors(this.style, this.direction);
+    colors.top = this.resolveColor(colors.top);
+    colors.right = this.resolveColor(colors.right);
+    colors.bottom = this.resolveColor(colors.bottom);
+    colors.left = this.resolveColor(colors.left);
     const uniform =
       w.top === w.right &&
       w.top === w.bottom &&
@@ -469,7 +495,7 @@ export class NodeBoxPaint {
    * strokes halfway.
    */
   _paintBorderSides(ctx, w, colors) {
-    if (DEV && (this.style.borderRadius ?? 0) > 0 && !warnedSideRadius) {
+    if (DEV && radiusOf(this.style, this.abs) > 0 && !warnedSideRadius) {
       warnedSideRadius = true;
       console.warn(
         'react-x11: borderRadius needs uniform borders — same width and ' +

package/src/nodes/cascade.js

@@ -5,12 +5,14 @@
 import {
   applyLayoutStyle,
   isColor,
+  paintsCurrentColor,
   textStyleFrom,
   DEFAULT_TEXT_STYLE,
   localTextStyleChanged,
   resolvedTextDelta,
   TEXT_REMEASURE,
 } from '../styles.js';
+import { UNIT_EM, UNIT_REM } from '../shorthands.js';
 import { Yoga } from '../yoga.js';
 import { scaleOf } from '../scale.js';
 import { baseTheme } from '../palette.js';
@@ -372,8 +374,22 @@ export class NodeCascade {
     const before = this._resolvedText;
     if (before === undefined) return 0;
     this._resolvedText = undefined;
-    const cost = resolvedTextDelta(before, this.resolvedTextStyle());
-    if (cost !== 0) this._textStyleMoved(cost);
+    // A length in `em` is a length in the font size this node inherits,
+    // which is what this walk exists because of — so a node that wrote one
+    // resolves its style again here, before its own text is, since a
+    // `fontSize: '1.5em'` is part of what that text is set in.
+    if (this._emMoved()) this._unitsMoved();
+    const after = this.resolvedTextStyle();
+    const cost = resolvedTextDelta(before, after);
+    if (cost !== 0) {
+      this._textStyleMoved(cost);
+      // A node painting in `currentColor` resolved its ink to do it, so the
+      // walk reaches it — and its own style says nothing about the change,
+      // which was written on an ancestor or in its own `color`.
+      if (before.color !== after.color && paintsCurrentColor(this.style)) {
+        this._inkMoved();
+      }
+    }
     return cost;
   }
 
@@ -405,6 +421,19 @@ export class NodeCascade {
     }
   }
 
+  /**
+   * The ink moved under a node that paints something in it — a border, a
+   * fill, a gradient stop or a shadow in `currentColor`. A repaint of the
+   * node, bounded to it, and a box needs it although it draws no text
+   * (`BoxNode._textStyleMoved`): the ancestor whose `color` moved claimed
+   * its own box, which covers this one on a surface but names no node to a
+   * retained presenter re-rastering by node, and no other window to a
+   * `<popup>` written under it.
+   */
+  _inkMoved() {
+    this.root?.invalidate(false, this, 'ink');
+  }
+
   /**
    * Whether this node's ancestry is complete, so a `$token` that does not
    * resolve is a mistake rather than a node that has not been placed yet.
@@ -508,7 +537,9 @@ export class NodeCascade {
       // and the server's copy of that colour has to follow with it — otherwise
       // the next resize fills the new area in the old scheme.
       if (this.isWindow) this._syncWindowBackground();
-      if (this._usesTokens) {
+      // A relative length reads the palette too: `rem` is its `fontSize`,
+      // and `em` is what that size became by the time it reached this node.
+      if (this._usesTokens || this._unitDeps & (UNIT_REM | UNIT_EM)) {
         const before = this.style;
         this._syncStyle(this.props, mounting);
         // a token change reaches the node without React re-rendering it, so
@@ -516,6 +547,15 @@ export class NodeCascade {
         if (localTextStyleChanged(this.style, before)) {
           this._textContentChanged();
         }
+        // …and so does the layout half. A token in a layout value —
+        // `padding: '$gutter'` — resolves right here, on attach or on a
+        // palette swap, and yoga was last handed the style the constructor
+        // had, with its tokens stripped. Same tail as `_sizeQueriesChanged`
+        // and `_rescaled`; without it a themed gutter reached `this.style`
+        // and the paint, and the layout kept the un-themed value.
+        if (this.yoga && this.style !== before) {
+          applyLayoutStyle(this.yoga, this.style, before);
+        }
         if (!mounting) this.root?.invalidate(true, null, 'theme');
       }
       // The palette is the floor under the cascade, so a theme swap moves the
@@ -624,4 +664,11 @@ export class WindowCascade {
   /** Like a `<box>`: a window fills and never letters, so it is the top of
    * the cascade rather than a reader of it. */
   _textStyleMoved() {}
+
+  /** …except a fill in `currentColor`, which the server keeps a copy of for
+   *  what a resize exposes. */
+  _inkMoved() {
+    this._syncWindowBackground();
+    this.invalidate(false, null, 'ink');
+  }
 }

package/src/nodes/damage.js

@@ -86,8 +86,10 @@ export const INVALIDATE_REASONS = new Set([
   'shadow', // a boxShadow got smaller: where it *was* still owes a repaint
   'outline', // …and the same for an outline a style swap took away
   'theme', // a theme/token change restyled a subtree
+  'ink', // the ink under a currentColor moved: its `color` or an ancestor's
   'direction', // the reading direction moved: sides, glyph order, bar edge
   'scale', // a `scale` prop zoomed a subtree: every length in it moved
+  'units', // a font size an `em` length read moved, and the style with it
   'animation', // a transition frame
   'scroll', // scrollTo/scrollBy/scrollIntoView, textarea/textinput panning
   'text', // text content, input value or caret editing

package/src/nodes/layout.js

@@ -5,7 +5,7 @@
 import { Yoga } from '../yoga.js';
 import { callHandler } from '../errors.js';
 import { DAMAGE_SLOP, layoutDiff } from './damage.js';
-import { resolveBorderWidths } from '../styles.js';
+import { radiusOf, resolveBorderWidths } from '../styles.js';
 import { insetRect, intersectRects, outerPixels, outside } from './rects.js';
 import { DEV } from './util.js';
 
@@ -612,25 +612,17 @@ export class NodeLayout {
     // (`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;
+    // A percentage radius moves with the box for the same reason: it is a
+    // share of the shorter side (`radiusOf`), read off each rect.
     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 corner = (rect) =>
+      Math.min(radiusOf(style, rect), rect.width / 2, rect.height / 2);
+    const radius = Math.max(radiusOf(style, old), radiusOf(style, now));
+    if (radius > 0 && corner(old) !== corner(now)) return null;
     const bw = resolveBorderWidths(style, this.direction);
     const reach =
-      Math.max(
-        style.borderRadius ?? 0,
-        bw.top,
-        bw.right,
-        bw.bottom,
-        bw.left,
-        grow,
-      ) + DAMAGE_SLOP;
+      Math.max(radius, bw.top, bw.right, bw.bottom, bw.left, grow) +
+      DAMAGE_SLOP;
     const bands = [];
     const oldBottom = old.y + old.height;
     const newBottom = now.y + now.height;

package/src/nodes/moveblit.js

@@ -16,7 +16,7 @@
 // mistake it can make is not firing.
 
 import { cssColorStraight } from 'ntk/color';
-import { EMPTY_STYLE, resolveBorderWidths } from '../styles.js';
+import { EMPTY_STYLE, radiusOf, resolveBorderWidths } from '../styles.js';
 import { isPaintedColor } from './boxpaint.js';
 import { DAMAGE_SLOP, FULL_DAMAGE, addDamageRect } from './damage.js';
 import { NodePaint } from './paint.js';
@@ -100,7 +100,7 @@ function cornerSquares(box, radius) {
  * Null when nothing is left.
  */
 function clipBoxOf(node) {
-  const radius = node.style?.borderRadius ?? 0;
+  const radius = radiusOf(node.style, node.abs);
   return innerPixels(radius > 0 ? insetRect(node.abs, radius) : node.abs);
 }
 
@@ -166,9 +166,9 @@ export class NodeMoveBlit {
       const style = node.style ?? EMPTY_STYLE;
       if (style.display === 'none') return null;
       if (style.opacity !== undefined && !(style.opacity >= 1)) return null;
-      const radius = style.borderRadius ?? 0;
+      const radius = radiusOf(style, node.abs);
       let own = null;
-      if (isOpaqueColor(style.backgroundColor)) {
+      if (isOpaqueColor(node.resolveColor(style.backgroundColor))) {
         own = node.abs;
         holes.push(...cornerSquares(node.abs, radius));
       } else {
@@ -581,7 +581,7 @@ export class WindowMoveBlit {
         if (ring > 0) {
           const inner = insetRect(
             n.abs,
-            Math.max(ring, style.borderRadius ?? 0) + DAMAGE_SLOP,
+            Math.max(ring, radiusOf(style, n.abs)) + DAMAGE_SLOP,
           );
           const outer = insetRect(n.abs, -DAMAGE_SLOP);
           for (const piece of outside(outer, inner)) over(piece);