react-x11 2.24.1 → 2.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.24.1",
+  "version": "2.26.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [
@@ -103,15 +103,15 @@
   "dependencies": {
     "ical.js": "^2.2.1",
     "linebreak": "^1.1.0",
-    "ntk": "^8.14.3",
+    "ntk": "^8.16.1",
     "react-reconciler": "^0.34.0",
     "yoga-layout": "^3.2.1"
   },
   "optionalDependencies": {
-    "@windowkit/appkit": "^0.16.0",
+    "@windowkit/appkit": "^0.17.0",
     "@windowkit/wayland": "^3.1.1",
-    "@windowkit/win32": "^0.0.5",
-    "dbus-native": "^0.15.1",
+    "@windowkit/win32": "^0.0.6",
+    "dbus-native": "^0.16.0",
     "x11-dri": "^0.9.0"
   },
   "peerDependencies": {

package/src/backend/context2d.js

@@ -25,6 +25,10 @@
 // resize — `_gen` is that generation.
 import { cssColorStraight } from 'ntk/color';
 
+import { normalizeRadii, planShadowTiles } from 'ntk/shadow-tiles';
+
+import { shadowTilesFor } from './shadowtiles.js';
+
 const BLACK = [0, 0, 0, 1];
 
 // A colour string is parsed once: a frame over a large tree sets the same
@@ -244,9 +248,56 @@ const P_RECT = 5;
 const P_ROUND = 6;
 const P_ARC = 7;
 const P_ELLIPSE = 8;
+/** A rounded rect whose corners are elliptical: x y w h, then each corner's
+ *  x and y radius, top left first. A bridge answering `ctxRoundRectXY`
+ *  reads it in `ctxPath` too; one that does not is sent the curves. */
+const P_ROUND_XY = 9;
 /** how many numbers each op carries, and what it costs a chunk's budget */
-const P_ARGS = [2, 2, 6, 4, 0, 4, 8, 6, 4];
-const P_POINTS = [1, 1, 3, 2, 0, 4, 8, 8, 4];
+const P_ARGS = [2, 2, 6, 4, 0, 4, 8, 6, 4, 12];
+const P_POINTS = [1, 1, 3, 2, 0, 4, 8, 8, 4, 8];
+
+/** A quarter ellipse as one cubic: how far along each tangent its handles
+ *  reach, as a fraction of the radius. */
+const KAPPA = 0.5522847498307936;
+
+/**
+ * An elliptical-cornered rounded rect as lines and curves, through `to` —
+ * a bridge with no `ctxRoundRectXY`. `c[a]…` is the op's twelve numbers.
+ */
+function roundRectCurves(to, c, a) {
+  const x = c[a];
+  const y = c[a + 1];
+  const r = x + c[a + 2];
+  const b = y + c[a + 3];
+  const [tlx, tly, trx, tRy, brx, bry, blx, bly] = [
+    c[a + 4],
+    c[a + 5],
+    c[a + 6],
+    c[a + 7],
+    c[a + 8],
+    c[a + 9],
+    c[a + 10],
+    c[a + 11],
+  ];
+  to.move(x + tlx, y);
+  to.line(r - trx, y);
+  if (trx > 0 && tRy > 0) {
+    to.curve(r - trx * (1 - KAPPA), y, r, y + tRy * (1 - KAPPA), r, y + tRy);
+  }
+  to.line(r, b - bry);
+  if (brx > 0 && bry > 0) {
+    to.curve(r, b - bry * (1 - KAPPA), r - brx * (1 - KAPPA), b, r - brx, b);
+  }
+  to.line(x + blx, b);
+  if (blx > 0 && bly > 0) {
+    to.curve(x + blx * (1 - KAPPA), b, x, b - bly * (1 - KAPPA), x, b - bly);
+  }
+  to.line(x, y + tly);
+  if (tlx > 0 && tly > 0) {
+    to.curve(x, y + tly * (1 - KAPPA), x + tlx * (1 - KAPPA), y, x + tlx, y);
+  }
+  to.close();
+}
 
 /**
  * A chunk closes at the first subpath boundary past either budget. Swept
@@ -265,6 +316,77 @@ const STROKE_CHUNK_SUBPATHS = 128;
  */
 const NO_STROKE_CHUNKING = process.env.REACT_X11_NO_STROKE_CHUNKING === '1';
 
+const SQUARE = Object.freeze([
+  { x: 0, y: 0 },
+  { x: 0, y: 0 },
+  { x: 0, y: 0 },
+  { x: 0, y: 0 },
+]);
+
+/**
+ * The shape the recorded op at `i` draws, where it is one a shadow tile
+ * knows — a `rect`, or a `roundRect` with circular or elliptical corners —
+ * as `{ x, y, w, h, corners, end }`, `end` the index of the op after it;
+ * null for any other op.
+ */
+function shapeAt(c, i) {
+  const op = c[i];
+  const end = i + 1 + P_ARGS[op];
+  if (op === P_RECT) {
+    let [x, y, w, h] = [c[i + 1], c[i + 2], c[i + 3], c[i + 4]];
+    if (w < 0) ((x += w), (w = -w));
+    if (h < 0) ((y += h), (h = -h));
+    return { x, y, w, h, corners: SQUARE, end };
+  }
+  if (op === P_ROUND) {
+    const r = (v) => ({ x: v, y: v });
+    return {
+      x: c[i + 1],
+      y: c[i + 2],
+      w: c[i + 3],
+      h: c[i + 4],
+      corners: [r(c[i + 5]), r(c[i + 6]), r(c[i + 7]), r(c[i + 8])],
+      end,
+    };
+  }
+  if (op === P_ROUND_XY) {
+    const r = (j) => ({ x: c[i + j], y: c[i + j + 1] });
+    return {
+      x: c[i + 1],
+      y: c[i + 2],
+      w: c[i + 3],
+      h: c[i + 4],
+      corners: [r(5), r(7), r(9), r(11)],
+      end,
+    };
+  }
+  return null;
+}
+
+/** Whether shape `b` lies inside shape `a`'s box. */
+function contains(a, b) {
+  return (
+    b.x >= a.x && b.y >= a.y && b.x + b.w <= a.x + a.w && b.y + b.h <= a.y + a.h
+  );
+}
+
+/** Whether two `{ x, y, width, height }` rects share any area. */
+function meets(a, b) {
+  return (
+    a.x < b.x + b.width &&
+    b.x < a.x + a.width &&
+    a.y < b.y + b.height &&
+    b.y < a.y + a.height
+  );
+}
+
+/**
+ * The off switch for shadow tiles (src/backend/shadowtiles.js): every
+ * shadow drawn by the bridge, as before them. For measuring the tiles
+ * against the live blur, and as first aid. Read once.
+ */
+const NO_SHADOW_TILES = process.env.REACT_X11_NO_SHADOW_TILES === '1';
+
 /**
  * A solid ink for `drawGlyphs` — ntk's `createSolidPicture` answers an
  * XRender picture; here it is the colour itself. Premultiplied 0..1 in, as
@@ -340,6 +462,13 @@ export class BackendContext2D {
       'ctxPath' in native && typeof native.ctxPath === 'function';
     this._pathBuf = null;
     this._strokeChunking = !NO_STROKE_CHUNKING;
+    // Elliptical corners go over whole where the bridge takes them; the
+    // count of them in the recorded path is what tells `_emit` whether a
+    // whole path handed to `ctxPath` needs them spelled as curves first.
+    this._roundXY =
+      'ctxRoundRectXY' in native && typeof native.ctxRoundRectXY === 'function';
+    this._xyOps = 0;
+    this._shadowTiles = !NO_SHADOW_TILES;
   }
 
   /**
@@ -388,6 +517,7 @@ export class BackendContext2D {
       // the path went with the surface it was built on; nothing may
       // replay it onto the new one
       this._cmds.length = 0;
+      this._xyOps = 0;
       this._pathStale = false;
     }
     return surface;
@@ -745,6 +875,11 @@ export class BackendContext2D {
     const c = this._cmds;
     const n = this._native;
     if (this._bulkPaths) {
+      if (this._xyOps > 0 && !this._roundXY) {
+        // a bridge that does not read op 9 would stop at it
+        n.ctxPath(surface, this._spelledPath(from, to));
+        return;
+      }
       // one call, through a buffer kept between paths — the record is the
       // same stream the bridge parses, arguments and all
       const count = to - from;
@@ -803,12 +938,36 @@ export class BackendContext2D {
         );
       else if (op === P_ELLIPSE)
         n.ctxEllipse(surface, c[a], c[a + 1], c[a + 2], c[a + 3]);
+      else if (op === P_ROUND_XY) this._emitRoundXY(surface, c, a);
       i += 1 + P_ARGS[op];
     }
   }
 
+  /** The record `[from, to)` as a stream for a bridge that does not know
+   *  op 9: each elliptical rounded rect spelled as the lines and curves
+   *  it is, everything else as it was. */
+  _spelledPath(from, to) {
+    const c = this._cmds;
+    const out = [];
+    const spell = {
+      move: (x, y) => out.push(P_MOVE, x, y),
+      line: (x, y) => out.push(P_LINE, x, y),
+      curve: (ax, ay, bx, by, x, y) => out.push(P_CURVE, ax, ay, bx, by, x, y),
+      close: () => out.push(P_CLOSE),
+    };
+    for (let i = from; i < to;) {
+      const op = c[i];
+      const end = i + 1 + P_ARGS[op];
+      if (op === P_ROUND_XY) roundRectCurves(spell, c, i + 1);
+      else for (let j = i; j < end; j++) out.push(c[j]);
+      i = end;
+    }
+    return new Float64Array(out);
+  }
+
   beginPath() {
     this._cmds.length = 0;
+    this._xyOps = 0;
     if (this._bulkPaths) {
       this._s();
       // uploaded, empty or not, when something paints it
@@ -849,24 +1008,93 @@ export class BackendContext2D {
     if (surface !== null) this._native.ctxRect(surface, x, y, w, h);
   }
 
+  /**
+   * Canvas's `roundRect`: `radii` a number, a `{ x, y }` point for an
+   * elliptical corner, or a list of one to four of either, scaled down
+   * together where two corners on a side would overlap (HTML, "roundRect").
+   * Circular corners go to the bridge as they always did; elliptical ones
+   * as `ctxRoundRectXY` where the bridge has it, and as curves where not.
+   */
   roundRect(x, y, w, h, radii) {
-    let r = radii ?? 0;
-    if (typeof r === 'number') r = [r, r, r, r];
-    else if (r.length === 1) r = [r[0], r[0], r[0], r[0]];
-    else if (r.length === 2) r = [r[0], r[1], r[0], r[1]];
-    else if (r.length === 3) r = [r[0], r[1], r[2], r[1]];
-    const cap = Math.min(Math.abs(w) / 2, Math.abs(h) / 2);
-    const clamp = (v) => Math.max(0, Math.min(Number(v) || 0, cap));
+    if (![x, y, w, h].every(Number.isFinite)) return;
+    // an ellipse with no extent on one axis is no curve at all: the corner
+    // is square, as the spec's arc of nothing leaves it
+    let corners = normalizeRadii(Math.abs(w), Math.abs(h), radii).map((r) =>
+      r.x > 0 && r.y > 0 ? r : { x: 0, y: 0 },
+    );
+    // a negative extent is the same box drawn from its other side: the
+    // corners swap across the axis it runs back along
+    if (w < 0) {
+      x += w;
+      w = -w;
+      corners = [corners[1], corners[0], corners[3], corners[2]];
+    }
+    if (h < 0) {
+      y += h;
+      h = -h;
+      corners = [corners[3], corners[2], corners[1], corners[0]];
+    }
+    const [tl, tr, br, bl] = corners;
     const surface = this._pathFor();
-    const [r0, r1, r2, r3] = [
-      clamp(r[0]),
-      clamp(r[1]),
-      clamp(r[2]),
-      clamp(r[3]),
-    ];
-    this._cmds.push(P_ROUND, x, y, w, h, r0, r1, r2, r3);
-    if (surface !== null)
-      this._native.ctxRoundRect(surface, x, y, w, h, r0, r1, r2, r3);
+    if (tl.x === tl.y && tr.x === tr.y && br.x === br.y && bl.x === bl.y) {
+      this._cmds.push(P_ROUND, x, y, w, h, tl.x, tr.x, br.x, bl.x);
+      if (surface !== null)
+        this._native.ctxRoundRect(surface, x, y, w, h, tl.x, tr.x, br.x, bl.x);
+      return;
+    }
+    const at = this._cmds.length + 1;
+    this._cmds.push(
+      P_ROUND_XY,
+      x,
+      y,
+      w,
+      h,
+      tl.x,
+      tl.y,
+      tr.x,
+      tr.y,
+      br.x,
+      br.y,
+      bl.x,
+      bl.y,
+    );
+    this._xyOps++;
+    if (surface !== null) this._emitRoundXY(surface, this._cmds, at);
+  }
+
+  /** One elliptical-cornered rounded rect, from the record at `a`, onto a
+   *  bridge's path: whole where it takes one, as curves where not. */
+  _emitRoundXY(surface, c, a) {
+    const n = this._native;
+    if (this._roundXY) {
+      n.ctxRoundRectXY(
+        surface,
+        c[a],
+        c[a + 1],
+        c[a + 2],
+        c[a + 3],
+        c[a + 4],
+        c[a + 5],
+        c[a + 6],
+        c[a + 7],
+        c[a + 8],
+        c[a + 9],
+        c[a + 10],
+        c[a + 11],
+      );
+      return;
+    }
+    roundRectCurves(
+      {
+        move: (px, py) => n.ctxMoveTo(surface, px, py),
+        line: (px, py) => n.ctxLineTo(surface, px, py),
+        curve: (ax, ay, bx, by, px, py) =>
+          n.ctxCurveTo(surface, ax, ay, bx, by, px, py),
+        close: () => n.ctxClosePath(surface),
+      },
+      c,
+      a,
+    );
   }
 
   arc(x, y, radius, start, end, anticlockwise = false) {
@@ -1020,6 +1248,13 @@ export class BackendContext2D {
     const hasPath = pathOrRule != null && typeof pathOrRule === 'object';
     const rule = hasPath ? maybeRule : pathOrRule;
     if (hasPath && !this._replayPath(pathOrRule)) return;
+    if (this._castsShadow() && this._tiledShadow(rule === 'evenodd')) {
+      this._unshadowed(() => this._fillPath(rule));
+    } else this._fillPath(rule);
+    this._dirty();
+  }
+
+  _fillPath(rule) {
     this._path();
     const style = this._state.fillStyle;
     if (style instanceof LinearGradient) {
@@ -1036,7 +1271,111 @@ export class BackendContext2D {
       this._applyFill();
       this._native.ctxFill(this._s(), rule === 'evenodd');
     }
-    this._dirty();
+  }
+
+  // --- shadows from tiles (src/backend/shadowtiles.js) -----------------------
+
+  /** Whether what is filled now casts a blurred shadow a tile could draw:
+   *  one there, in a colour, composited the ordinary way. */
+  _castsShadow() {
+    if (!this._shadowTiles) return false;
+    const st = this._state;
+    return (
+      st.shadowBlur > 0 &&
+      st.gco === 'source-over' &&
+      parseColor(st.shadowColor)[3] > 0
+    );
+  }
+
+  /**
+   * The current path's shadow, from a tile, where the path is a shape a
+   * tile draws: one `rect` or `roundRect`, or — filled `evenodd` — two of
+   * them one inside the other, the frame an inset box shadow is cast
+   * around. False for anything else, and the bridge draws it.
+   */
+  _tiledShadow(evenodd) {
+    const c = this._cmds;
+    const first = shapeAt(c, 0);
+    if (!first) return false;
+    if (first.end === c.length) return this._drawTiledShadow(first, null);
+    if (!evenodd) return false;
+    const second = shapeAt(c, first.end);
+    if (!second || second.end !== c.length) return false;
+    if (contains(first, second)) return this._drawTiledShadow(first, second);
+    if (contains(second, first)) return this._drawTiledShadow(second, first);
+    return false;
+  }
+
+  /**
+   * Draw the shadow of `outer` — less `inner`, where there is one — from a
+   * tile: in device pixels, moved by the shadow's offset, which, like its
+   * blur, the transform does not scale (HTML, "shadows"). A transform
+   * that rotates, skews or mirrors is not one a tile can follow.
+   */
+  _drawTiledShadow(outer, inner) {
+    const st = this._state;
+    const [a, b, c, d, e, f] = st.ctm;
+    if (b !== 0 || c !== 0 || !(a > 0) || !(d > 0)) return false;
+    const device = (r) => {
+      const x0 = Math.round(a * r.x + e + st.shadowOffsetX);
+      const y0 = Math.round(d * r.y + f + st.shadowOffsetY);
+      return {
+        x0,
+        y0,
+        x1: Math.round(a * (r.x + r.w) + e + st.shadowOffsetX),
+        y1: Math.round(d * (r.y + r.h) + f + st.shadowOffsetY),
+        corners: r.corners.map((k) => ({ x: k.x * a, y: k.y * d })),
+      };
+    };
+    const o = device(outer);
+    if (![o.x0, o.y0, o.x1, o.y1].every(Number.isFinite)) return false;
+    // a shape with nothing in it casts nothing
+    if (!(o.x1 > o.x0 && o.y1 > o.y0)) return true;
+    let hole = inner && device(inner);
+    if (hole && !(hole.x1 > hole.x0 && hole.y1 > hole.y0)) hole = null;
+    const plan = planShadowTiles(o, hole, st.shadowBlur);
+    if (!plan) return false;
+    const clip = st.clip === NON_RECT ? null : st.clip;
+    if (clip && !meets(plan.bounds, clip)) return true;
+    const tile = shadowTilesFor(this._native).get(
+      plan,
+      parseColor(st.shadowColor),
+    );
+    if (tile == null) return false;
+    const s = this._s();
+    const n = this._native;
+    n.ctxSave(s);
+    n.ctxSetShadow(s, 0, 0, 0, 0, 0, 0, 0);
+    for (const [sx, sy, sw, sh, dx, dy, dw, dh] of plan.pieces) {
+      if (clip && !meets({ x: dx, y: dy, width: dw, height: dh }, clip))
+        continue;
+      n.ctxDrawSurface(
+        s,
+        tile,
+        sx,
+        sy,
+        sw,
+        sh,
+        (dx - e) / a,
+        (dy - f) / d,
+        dw / a,
+        dh / d,
+      );
+    }
+    n.ctxRestore(s);
+    // the shape is filled next, from the record: nothing above may have
+    // left the bridge's own copy of the path as it was
+    this._pathStale = true;
+    return true;
+  }
+
+  /** `fn`'s drawing with no shadow: the tile has drawn it already. */
+  _unshadowed(fn) {
+    const s = this._s();
+    this._native.ctxSave(s);
+    this._native.ctxSetShadow(s, 0, 0, 0, 0, 0, 0, 0);
+    fn();
+    this._native.ctxRestore(s);
   }
 
   stroke(path) {
@@ -1129,6 +1468,16 @@ export class BackendContext2D {
 
   fillRect(x, y, w, h) {
     if (!(w > 0) || !(h > 0)) return;
+    if (
+      this._castsShadow() &&
+      this._drawTiledShadow({ x, y, w, h, corners: SQUARE }, null)
+    ) {
+      this._unshadowed(() => this._fillRectNow(x, y, w, h));
+    } else this._fillRectNow(x, y, w, h);
+    this._dirty();
+  }
+
+  _fillRectNow(x, y, w, h) {
     const style = this._state.fillStyle;
     if (style instanceof LinearGradient) {
       const { coords, flat } = style._normalized();
@@ -1148,7 +1497,6 @@ export class BackendContext2D {
       this._applyFill();
       this._native.ctxFillRect(this._s(), x, y, w, h);
     }
-    this._dirty();
   }
 
   fillRects(rects) {

package/src/backend/shadowtiles.js

@@ -0,0 +1,84 @@
+// The tiles blurred shadows are drawn from, on a bridge's own surfaces.
+//
+// A gaussian over a shape costs its area times its width, and CoreGraphics
+// pays it on every `fill` that has a shadow set — a header's
+// `box-shadow: inset 0 0 100px` was 130 to 380 ms of each scroll frame on a
+// 2x display, and a card's 200px hover shadow 110 ms, on every strip a
+// scroll exposed across it. Direct2D draws no live shadow at all (the win32
+// bridge records one and draws nothing). ntk's `ntk/shadow-tiles` plans
+// the shadow of a rect, a rounded rect or a rect with a rounded hole as a
+// small tile and nine pieces of it — the corners as they are, a straight
+// pixel stretched between them — and makes the tile's pixels; this keeps
+// the tiles, as surfaces of the bridge's, and `BackendContext2D` draws the
+// pieces (src/backend/context2d.js, `_drawTiledShadow`).
+//
+// A surface here has no coverage format to composite through a colour, as
+// X's `a8` does, so a tile is made in its colour and the colour is part of
+// its name: one per shadow colour in use, rather than one per shadow.
+
+import { rasterShadowTile } from 'ntk/shadow-tiles';
+
+/** What the tiles of one bridge may hold, least recently drawn let go
+ *  first. A card's tile is tens of kilobytes. */
+export const TILE_BUDGET = 8 << 20;
+
+/**
+ * The tiles made for one bridge, least recently drawn let go first once
+ * they hold more than `budget` bytes. There is one bridge in a process, so
+ * every window of an app shares them.
+ */
+export class ShadowTileCache {
+  constructor(native, budget = TILE_BUDGET) {
+    this._native = native;
+    this._budget = budget;
+    this._tiles = new Map();
+    this._bytes = 0;
+    this.stats = { made: 0, hits: 0, released: 0 };
+  }
+
+  /** The tile for `plan` in `rgba` (0..1 each), made now if it is not
+   *  held; null where the bridge made no surface. */
+  get(plan, rgba) {
+    const key = `${plan.key}|${rgba.join(',')}`;
+    const held = this._tiles.get(key);
+    if (held) {
+      this._tiles.delete(key);
+      this._tiles.set(key, held);
+      this.stats.hits++;
+      return held.handle;
+    }
+    const n = this._native;
+    const handle = n.createSurface(plan.width, plan.height, 1);
+    if (handle == null) return null;
+    const pixels = rasterShadowTile(plan, rgba);
+    n.ctxPutImageData(
+      handle,
+      Buffer.from(pixels.buffer, pixels.byteOffset, pixels.byteLength),
+      plan.width,
+      plan.height,
+      0,
+      0,
+    );
+    const bytes = plan.width * plan.height * 4;
+    this._tiles.set(key, { handle, bytes });
+    this._bytes += bytes;
+    this.stats.made++;
+    for (const [oldest, tile] of this._tiles) {
+      if (this._bytes <= this._budget || tile.handle === handle) break;
+      this._tiles.delete(oldest);
+      this._bytes -= tile.bytes;
+      this.stats.released++;
+      n.releaseSurface?.(tile.handle);
+    }
+    return handle;
+  }
+}
+
+const caches = new WeakMap();
+
+/** The one tile cache for a bridge. */
+export function shadowTilesFor(native) {
+  let cache = caches.get(native);
+  if (!cache) caches.set(native, (cache = new ShadowTileCache(native)));
+  return cache;
+}

package/src/components/Select.js

@@ -4,6 +4,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import { useAppOrNull } from '../appcontext.js';
+import { flattenStyle } from '../styles.js';
 import { capBand, capTrim, rowRadius, useTheme } from './theme.js';
 import { Icon } from './Icon.js';
 import {
@@ -282,6 +283,14 @@ function Option({
  * the active option with wrapping; Home/End jump to the ends; Enter/Space
  * pick the active option (or open the menu when closed); Escape closes.
  * The active option is scrolled into view.
+ *
+ * `labelStyle` and `chevronStyle` are style slots over the caption and the
+ * chevron, each merged over the part's own default, as `<Slider>`'s are over
+ * its parts — so a select that has to wear someone else's look, a toolbar's
+ * or a web page's, is the widget restyled, with `style` on the trigger. The
+ * caption's `fontSize` is read back: the chevron is as tall as the capitals
+ * beside it. Any slot also chooses the drawn trigger over the platform's
+ * popup bezel, whose pixels no style reaches.
  */
 export function Select({
   value,
@@ -291,11 +300,18 @@ export function Select({
   placeholder = 'Select…',
   native,
   style,
+  labelStyle,
+  chevronStyle,
   ...boxProps
 }) {
   const theme = useTheme();
   const app = useAppOrNull();
-  const nativeControls = useNativeControls(native);
+  const styled = Boolean(labelStyle || chevronStyle);
+  const nativeControls = useNativeControls(styled ? false : native);
+  // The size the caption is set in, where its slot names one: the chevron is
+  // measured against those capitals, and an `<Icon>`'s size does not inherit.
+  const ownSize = flattenStyle(labelStyle).fontSize;
+  const captionSize = typeof ownSize === 'number' ? ownSize : theme.fontSize;
   const [open, setOpen] = useState(false);
   const [anchor, setAnchor] = useState(null);
   const [focused, setFocused] = useState(false);
@@ -572,6 +588,7 @@ export function Select({
           ONE_LINE,
           nativeControls && nativeTitleStyle('regular'),
           { color: current ? theme.text : theme.textMuted },
+          labelStyle,
         ],
       },
       current ? current.label : placeholder,
@@ -593,8 +610,11 @@ export function Select({
         })
       : h(Icon, {
           name: 'chevronDown',
-          size: capBand(theme.fontSize),
+          size: capBand(captionSize),
           color: theme.textMuted,
+          // `display: 'none'` leaves it out, for a trigger whose arrow is
+          // drawn by something else
+          style: chevronStyle,
         }),
     open &&
       anchor &&

package/src/events.js

@@ -431,6 +431,10 @@ export class EventManager {
     this._wheelOwed = { x: 0, y: 0 };
     // the window's DragSession while a press has armed it (src/dnd.js)
     this._dragArmed = null;
+    // where the pointer last was over this window — the motion or the wheel
+    // that said so — for asking again what is under it once what is under
+    // it has moved (`refreshHover`). Null while the pointer is elsewhere.
+    this._pointer = null;
     // on a *top-level* window's manager: the chords bound anywhere in its
     // tree, newest last (`registerAccelerator`). Null until one is bound,
     // which is the common case and costs one null check per key.
@@ -792,6 +796,7 @@ export class EventManager {
    * render it started for the notch before.
    */
   _onWheel(native) {
+    this._pointer = native;
     // The first wheel is what says this window wants smooth scrolling. It was
     // created on core events — an XI2 selection costs four times as many
     // bytes per *pointer move*, which a window that is never scrolled would
@@ -1004,6 +1009,7 @@ export class EventManager {
   }
 
   _onMouseMove(native) {
+    this._pointer = native;
     if (inspectHandler) {
       inspectHandler('move', this._hit(native), native);
       return;
@@ -1090,6 +1096,7 @@ export class EventManager {
     // ancestor was told the pointer had gone and then that it was back, and
     // `onMouseOut` that it had left a window it was still in.
     if (this._leftIntoSurface(native)) return;
+    this._pointer = null;
     runWithPriority(ContinuousEventPriority, () => {
       this._updateHover([], native);
       // the pointer is somewhere else entirely: whatever it was heading for
@@ -1186,6 +1193,41 @@ export class EventManager {
     this.pressPath = path;
   }
 
+  /**
+   * Hover follows content. The pointer stayed where it was and what is
+   * under it moved — a scroll, or a layout that put something else there —
+   * so the question a motion asks is asked again at the point, as a browser
+   * asks it at the frame after a scroll: `:hover`, enter and leave change
+   * as a motion would change them, and the node under the pointer hears
+   * `defaultMouseMove` there, since an element that paints its own hover
+   * (a document, a graph) has content that moved under the point even where
+   * the node did not. The application's `onMouseMove` is not called: the
+   * pointer did not move. Nothing is asked while a press or a capture holds
+   * the pointer, where hover is frozen for the gesture.
+   *
+   * Called by the window after a frame that laid out (nodes/window/flush.js),
+   * which is every frame a scroll moves content in.
+   */
+  refreshHover() {
+    const at = this._pointer;
+    if (!at || inspectHandler || this.node.destroyed) return;
+    if (this._captured() || this.downNode || this._dragArmed) return;
+    runWithPriority(ContinuousEventPriority, () => {
+      const target = this._hit(at);
+      const path = this._path(target);
+      const old = this.hoverPath;
+      if (
+        path.length !== old.length ||
+        path.some((node, i) => node !== old[i])
+      ) {
+        this._updateHover(path, at);
+      }
+      if (typeof target.defaultMouseMove === 'function') {
+        target.defaultMouseMove(this._makeEvent('mouseMove', at, target));
+      }
+    });
+  }
+
   /** enter/leave do not propagate: each node on the diff gets its own call. */
   _updateHover(newPath, native) {
     const oldPath = this.hoverPath;

package/src/node.d.ts

@@ -48,6 +48,10 @@ export interface ImageDataLike {
  * Anything ntk documents beyond this is reachable at runtime and is
  * ntk's to change.
  */
+/** One corner's radius for `roundRect`: circular, or elliptical as a
+ * `DOMPointInit`. */
+export type RoundRectRadius = number | { x?: number; y?: number };
+
 export interface Context2D {
   fillStyle: string | CanvasGradientLike;
   strokeStyle: string | CanvasGradientLike;
@@ -125,12 +129,16 @@ export interface Context2D {
     anticlockwise?: boolean,
   ): void;
   rect(x: number, y: number, width: number, height: number): void;
+  /** Canvas's `roundRect`: a radius for every corner, a `{ x, y }` point
+   * for an elliptical one, or a list of one to four of either, clockwise
+   * from the top left. A shadowed `fill` of one — or of a `rect` less one,
+   * filled `'evenodd'` — is drawn from a shadow tile made once. */
   roundRect(
     x: number,
     y: number,
     width: number,
     height: number,
-    radii: number | number[],
+    radii: RoundRectRadius | RoundRectRadius[],
   ): void;
   fill(fillRule?: 'nonzero' | 'evenodd'): void;
   stroke(): void;
@@ -515,6 +523,17 @@ export declare class Node {
    * paint, whatever the props. A translucent element answers `null`.
    */
   opaqueRect(): Rect | null;
+  /**
+   * What this element draws that stays put in the viewport of the scroll
+   * pane it is in while the pane scrolls — a document's fixed background, a
+   * `position: fixed` header — as rects in window coordinates, device
+   * pixels, or null, the default, for drawing that moves with the content.
+   * A scroll of that pane that blits repaints them where they are and where
+   * the copy dragged their image; one that covers most of the viewport
+   * makes the scroll a repaint. Only the nearest scroll pane asks. Read on
+   * each scroll the pane blits, after layout.
+   */
+  viewportFixedRects(): Rect[] | null;
   /**
    * How far this element's own drawing reaches past its box, in device
    * pixels on every side — 0, the default, for an element that stays inside

package/src/nodes/boxpaint.js

@@ -267,10 +267,42 @@ export class NodeBoxPaint {
         ctx.fillShadow(rect, r, shadow.blur, color);
         continue;
       }
+      // No X server to bake a blur on — CoreGraphics, Direct2D: the
+      // context's own shadow, which draws a rounded rect's from a tile it
+      // keeps (src/backend/shadowtiles.js). The coverage route below needs
+      // RENDER and drew nothing there.
+      if (!this.app?.display?.Render) {
+        this._paintShadowOnContext(ctx, rect, r, shadow.blur, color);
+        continue;
+      }
       this._paintBlurredShadow(ctx, rect, r, shadow.blur, color);
     }
   }
 
+  /**
+   * One blurred shadow through the context's `shadowBlur`: the rounded rect
+   * filled clear of the surface to its left, and its shadow thrown back by
+   * as much, so that only the shadow lands. Offsets are device pixels and
+   * the shape moves in the context's own units, hence the scale between.
+   */
+  _paintShadowOnContext(ctx, rect, radius, blur, color) {
+    if (!('shadowBlur' in ctx) || typeof ctx.roundRect !== 'function') return;
+    const m = ctx.getTransform?.() ?? { a: 1, e: 0 };
+    const reach = Math.ceil(blur * 1.5) + 1;
+    const away =
+      Math.ceil(Math.abs(rect.x) + rect.width + Math.abs(m.e) + reach) + 1;
+    ctx.save();
+    ctx.shadowColor = color;
+    ctx.shadowBlur = blur;
+    ctx.shadowOffsetX = away * m.a;
+    ctx.shadowOffsetY = 0;
+    ctx.fillStyle = '#000000';
+    ctx.beginPath();
+    ctx.roundRect(rect.x - away, rect.y, rect.width, rect.height, radius);
+    ctx.fill();
+    ctx.restore();
+  }
+
   /**
    * One blurred shadow, through the paint cache when there is one.
    *

package/src/nodes/invalidate.js

@@ -114,6 +114,29 @@ export class NodeInvalidate {
     return null;
   }
 
+  /**
+   * What this element draws that stays put in the viewport of the scroll
+   * pane it is in while the pane scrolls, as rects in window coordinates,
+   * device pixels, like `abs` — or null, the default, for an element
+   * whose drawing moves with the content. A document's fixed background or
+   * `position: fixed` header is drawn where the pane's viewport is, not
+   * where the content under it is, and a scroll's blit copies the pane's
+   * pixels with the content: it dragged the header along, and left the
+   * background scrolling with the text.
+   *
+   * A pane scroll that blits repaints what these rects answer where they
+   * are and where the copy dragged their image, as it does the corners of
+   * a rounded box around the pane; one that covers most of the viewport
+   * makes the scroll a repaint. Only the nearest scroll pane's scroll is
+   * asked about: a pane further out moves the inner one, and what is fixed
+   * to it, with its content. Read on each scroll the pane blits, after
+   * layout, so it may follow `abs` and the pane's `contentBox()`; the
+   * element draws those rects in its `paint` from the same geometry.
+   */
+  viewportFixedRects() {
+    return null;
+  }
+
   /**
    * How far this element's own drawing reaches past its box — device
    * pixels, on every side — or 0, the default, for one that stays inside

package/src/nodes/node.js

@@ -607,6 +607,7 @@ export class Node {
     // nothing else ever asks for a frame
     this.root?._animating.delete(this);
     this.root?._opaqueNodes?.delete(this);
+    this.root?._viewportFixedNodes?.delete(this);
     // a surface that goes away takes its selection with it, and the app-wide
     // claim on being the one showing one goes with it too
     this._textSelection?.destroy();
@@ -625,11 +626,15 @@ export class Node {
       this.root?._layoutHosts?.delete(this);
       root?._layoutHosts?.add(this);
     }
-    // an element answering `opaqueRect()` is one the window asks per pass
+    // an element answering `opaqueRect()` is one the window asks per pass,
+    // and one answering `viewportFixedRects()` one it asks per scroll blit
     const opaque = this.opaqueRect !== Node.prototype.opaqueRect;
+    const fixed = this.viewportFixedRects !== Node.prototype.viewportFixedRects;
     if (opaque) this.root?._opaqueNodes?.delete(this);
+    if (fixed) this.root?._viewportFixedNodes?.delete(this);
     this.root = root;
     if (opaque) root?._opaqueNodes?.add(this);
+    if (fixed) root?._viewportFixedNodes?.add(this);
     // styled before it had a window, so this is where a placed node is
     // first registered (WindowNode._placeNodes)
     if (this.style && isPlaced(this.style)) root?._placedNodes?.add(this);

package/src/nodes/scrollblit.js

@@ -218,6 +218,13 @@ function unionIsBox(a, b) {
   );
 }
 
+/** Two lists of pins as one, either of which may be null. */
+function joinPins(a, b) {
+  if (!a) return b;
+  if (!b) return a;
+  return [...a, ...b];
+}
+
 /** Is `rect` inside one of `pins`, the furniture an element blit pinned —
  * repaired whole after the copy, whatever changed in it (issue #682)? */
 function insidePinned(rect, pins) {
@@ -862,7 +869,13 @@ export class WindowScrollBlit {
     // (issue #691) and repaired below, where they are and where the copy
     // dragged their image. Refused instead, a list or a document inside a
     // rounded frame repainted its whole viewport on every step of a scroll.
-    const corners = this._cornerPins(node, vp, target.top);
+    // …and so is what an element in the pane draws fixed to its viewport
+    // (`viewportFixedRects()`): a document's fixed background or header,
+    // which the copy would drag along with the text under it
+    const corners = joinPins(
+      this._cornerPins(node, vp, target.top),
+      this._viewportFixedPins(node, vp),
+    );
     if (!this._scrollBlitSafe(node, vp, target.top, null, corners)) return;
     // The band the scrolled bar's thumb travels in is repaired on its own.
     // The thumb's rects are thin and run along the viewport's edge, and a
@@ -1189,6 +1202,30 @@ export class WindowScrollBlit {
    * Ancestors below `upTo`, the node the blit's surface belongs to
    * (`_blitTarget`): a pane is a rectangle no corner above it clips.
    */
+  /**
+   * What the elements in scroll pane `node` draw fixed to its viewport
+   * (`viewportFixedRects()`), inside `vp` and out to whole pixels: pinned
+   * like a rounded ancestor's corners, repaired where they are and where the
+   * blit dragged their image. Asked only of an element whose nearest scroll
+   * pane is `node` — a pane further in moves with the content, and whatever
+   * is fixed to it with it — and not of one hidden or gone.
+   */
+  _viewportFixedPins(node, vp) {
+    let out = null;
+    for (const fixed of this._viewportFixedNodes ?? []) {
+      if (fixed.destroyed || fixed.hidden || fixed.root !== this) continue;
+      let pane = fixed.parent;
+      while (pane && !pane.isWindow && !pane.isScroller?.()) pane = pane.parent;
+      if (pane !== node) continue;
+      for (const rect of fixed.viewportFixedRects() ?? []) {
+        if (!rectsOverlap(rect, vp)) continue;
+        const inside = intersectRects(outerPixels(rect), vp);
+        if (inside) (out ??= []).push(inside);
+      }
+    }
+    return out;
+  }
+
   _cornerPins(node, vp, upTo = this) {
     let out = null;
     for (let n = node.parent; n && n !== upTo; n = n.parent) {

package/src/nodes/window/flush.js

@@ -138,6 +138,14 @@ export class WindowFlush {
         if (!this.destroyed) this._scheduleFrame();
       }
     }
+    // A frame that laid out may have moved what is under a pointer that did
+    // not move — a scroll does, every frame of it — and hover follows the
+    // content (`EventManager.refreshHover`). After the frame: what hover
+    // changes is the next frame's to paint.
+    if (this._hoverRecheck) {
+      this._hoverRecheck = false;
+      if (!this.destroyed) this.events?.refreshHover();
+    }
   }
 
   /** The frame itself. True when it painted or presented something. */
@@ -289,7 +297,11 @@ export class WindowFlush {
     // like `presentFrame`; an ntk window has no such half.
     this.window.prepareFrame?.(this, layoutRan);
     // any node this pass laid out may be what an open popup is anchored to
-    if (layoutRan) this._notifyAnchorChange();
+    // — or what a pointer that has not moved is over now (`flush`)
+    if (layoutRan) {
+      this._notifyAnchorChange();
+      this._hoverRecheck = true;
+    }
     // A subtree that only moved and covers its box opaquely is copied where
     // it went, and the frame paints around the copy — or its move is
     // claimed, where it was and where it is (nodes/moveblit.js). Once every

package/src/nodes/window/window.js

@@ -185,11 +185,17 @@ export class WindowNode extends Scrollable(Node) {
     // over and its cost is known (`flush`)
     this._inFlush = false;
     this._claimAfterFlush = false;
+    // a frame laid out, so what is under the pointer may have moved
+    // (`flush`, `EventManager.refreshHover`)
+    this._hoverRecheck = false;
     // the nodes answering `opaqueRect()`, and — during a paint pass one of
     // them covers — that node with its ancestors, whose fills are skipped
     // (`_coverFor`, `Node._paintBackground`)
     this._opaqueNodes = new Set();
     this._coverChain = null;
+    // the nodes answering `viewportFixedRects()`, whose rects a scroll pane
+    // they are in repairs when it blits (`_viewportFixedPins`)
+    this._viewportFixedNodes = new Set();
     // Nodes that want the `attention` event (ntk#37) — an
     // `unstable_onAttention` prop,
     // an `:attention` block, or both. Built before the EventManager so the

package/src/types/components.d.ts

@@ -511,6 +511,16 @@ export interface SelectProps<T = unknown>
   onChange?: (ev: WidgetChangeEvent<T>) => void;
   placeholder?: string;
   style?: StyleProp;
+  /**
+   * The caption's style — the value, or the placeholder — over the palette's
+   * `text` (`textMuted` for the placeholder). Its `fontSize`, as a number, is
+   * the one the chevron is sized against. Any slot chooses the drawn trigger
+   * over the platform's popup bezel.
+   */
+  labelStyle?: StyleProp;
+  /** The chevron's style, over `textMuted` at the caption's cap height.
+   *  `display: 'none'` leaves it out. */
+  chevronStyle?: StyleProp;
 }
 export function Select<T = unknown>(props: SelectProps<T>): ReactNode;