@react-x11/components 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-x11/components",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Components for react-x11 that do not belong in the core package",
   "keywords": [
     "react",
@@ -164,6 +164,7 @@
     "docs": "npm --prefix website start",
     "docs:build": "npm --prefix website run build",
     "bench:zengarden": "node --import tsx scripts/zengarden/run.ts",
+    "bench:zengarden:scroll": "node --import tsx scripts/zengarden/scroll.tsx",
     "examples:browser": "node --import tsx examples/browser/browser.tsx",
     "examples:calendar": "node --import tsx examples/calendar.tsx",
     "examples:charts": "node --import tsx examples/charts.tsx",
@@ -198,6 +199,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
+    "bidi-js": "^1.0.3",
     "css-select": "^7.0.0",
     "domhandler": "^6.0.0",
     "domutils": "^4.0.0",
@@ -219,7 +221,7 @@
     "@lydell/node-pty": "^1.0.0",
     "node-pty": "^1.0.0",
     "react": "^19.0.0",
-    "react-x11": "^2.23.0"
+    "react-x11": "^2.26.0"
   },
   "peerDependenciesMeta": {
     "@lezer/highlight": {
@@ -246,7 +248,7 @@
     "pngjs": "^7.0.0",
     "prettier": "^3.6.0",
     "react": "^19.2.8",
-    "react-x11": "^2.23.0",
+    "react-x11": "^2.26.0",
     "tsx": "^4.23.1",
     "typescript": "^7.0.2",
     "y-prosemirror": "^1.3.7",

package/src/code/index.ts

@@ -17,21 +17,18 @@ import type { ReactElement } from 'react';
 import { useTheme } from 'react-x11';
 import type { Style } from 'react-x11/style';
 
-import {
-  registerRichText,
-  RICHTEXT_ELEMENT,
-  useSelectionMenu,
-} from '../richtext/index.js';
-import type { RichTextProps, TextRun } from '../richtext/index.js';
+import { registerRichText, useSelectionMenu } from '../richtext/index.js';
+import type { TextRun } from '../richtext/index.js';
 import {
   codeBlockLook,
-  codeBlockRuns,
+  CodeBlockRunCache,
   codeBlockStyle,
   codeTextStyle,
 } from '../codeblock/index.js';
 import type { Language, TokenStyles } from '../code-language/index.js';
 import { hx } from './hx.js';
 import { useFontPrewarm } from '../internal/prewarm.js';
+import { CodeGutter, CodeLines } from '../internal/codelines.js';
 
 const h = React.createElement;
 
@@ -107,39 +104,44 @@ export function Code(props: CodeProps): ReactElement {
   );
   useFontPrewarm(look.family);
 
+  // Kept between renders, so a source that changes at its end is tokenized
+  // again from the line that changed (`CodeBlockRunCache`).
+  const runCache = React.useRef<CodeBlockRunCache | null>(null);
+  runCache.current ??= new CodeBlockRunCache();
+  React.useEffect(() => () => runCache.current?.dispose(), []);
   const runs: TextRun[] = React.useMemo(
-    () => codeBlockRuns(source, look, { lang, language, resolveLanguage }),
+    () =>
+      runCache.current!.runs(source, look, { lang, language, resolveLanguage }),
     [source, lang, language, resolveLanguage, look],
   );
 
   const lineCount = React.useMemo(() => source.split('\n').length, [source]);
 
-  const codeProps: RichTextProps = { runs, style: codeTextStyle(look, wrap) };
-  if (!wrap) codeProps.wrap = false;
+  // In blocks of lines, so a change lays out the blocks it touches
+  // (`../internal/codelines.ts`).
+  const code = h(CodeLines, { runs, style: codeTextStyle(look, wrap), wrap });
 
   const gutter = lineNumbers
-    ? h(RICHTEXT_ELEMENT, {
-        // one richtext for all the numbers: same font, same line height, so
-        // it stays in register with the code beside it. `selectable={false}`
-        // is what keeps it out of a drag and out of the copied text — the
-        // numbering is chrome, and CSS spells that `user-select: none`.
-        selectable: false,
-        runs: Array.from({ length: lineCount }, (_, i) => ({
-          text: `${i + 1}\n`,
-          family: look.family,
-          size: look.size,
-          color: look.dim,
-        })),
-        wrap: false,
-        style: {
-          lineHeight: look.lineHeight,
-          textAlign: 'right',
-          minWidth:
-            Math.max(String(lineCount).length, 2) * Math.ceil(look.size * 0.62),
-          marginRight: look.padding,
-          flexShrink: 0,
+    ? hx(
+        'box',
+        {
+          style: {
+            flexDirection: 'column',
+            minWidth:
+              Math.max(String(lineCount).length, 2) *
+              Math.ceil(look.size * 0.62),
+            marginRight: look.padding,
+            flexShrink: 0,
+          },
         },
-      } as Record<string, unknown>)
+        // numbers in the same font and line height as the code, blocked the
+        // same way, so the two stay in register
+        h(CodeGutter, {
+          lines: lineCount,
+          run: { family: look.family, size: look.size, color: look.dim },
+          style: { lineHeight: look.lineHeight, textAlign: 'right' },
+        }),
+      )
     : null;
 
   const rootStyle: Style = {
@@ -170,7 +172,7 @@ export function Code(props: CodeProps): ReactElement {
     hx(
       'box',
       { style: { overflow: 'scroll', flexDirection: 'column', flexGrow: 1 } },
-      h(RICHTEXT_ELEMENT, codeProps as unknown as Record<string, unknown>),
+      code,
     ),
   );
 }

package/src/code-language/index.ts

@@ -34,7 +34,7 @@ export {
 } from './theme.js';
 
 export { languageForTag, tokenizeText } from './registry.js';
-export { codeRuns } from './runs.js';
+export { codeRuns, CodeRunCache } from './runs.js';
 export type { CodeRun, CodeRunOptions } from './runs.js';
 
 export { TOKEN_FALLBACK } from './types.js';

package/src/code-language/runs.ts

@@ -23,7 +23,7 @@
 // AGENTS.md on tree-shaking, and `textmate.ts` for the same shape.
 import { languageForTag, tokenizeText } from './registry.js';
 import { tokenStyleFor } from './theme.js';
-import type { Language, TokenStyles } from './types.js';
+import type { Language, Token, Tokenizer, TokenStyles } from './types.js';
 
 /** One styled run of code. Structurally a `<richtext>` run. */
 export interface CodeRun {
@@ -126,3 +126,113 @@ function push(
     out.push(run);
   }
 }
+
+/**
+ * `codeRuns`, kept between calls for a text that changes a little at a
+ * time: a fence being streamed, a source being appended to.
+ *
+ * One tokenizer lives as long as the cache. It is told which lines changed
+ * (`Tokenizer.edit`, the interface `<CodeEditor>` already drives) and asked
+ * again only for those and the lines after them its state has to walk
+ * through, and every other line keeps the runs it had. `codeRuns` tokenized
+ * the whole text afresh: at 5,000 lines, most of the time an appended line
+ * took on the client.
+ *
+ * The runs are the same text in the same colours `codeRuns` gives, cut a
+ * little differently: a line's runs never reach into the next, and each
+ * newline is a run of its own, so that a line keeps its runs while others
+ * change. `decorate` is applied to every run once, when it is made — the
+ * family and size a block of code is set in, say.
+ *
+ * Call `dispose()` when done with it: an engine may keep timers.
+ */
+export class CodeRunCache<R = CodeRun> {
+  private key: readonly unknown[] | null = null;
+  private tokenizer: Tokenizer | null = null;
+  private lines: string[] = [];
+  private tokens: (readonly Token[] | undefined)[] = [];
+  private lineRuns: (R[] | undefined)[] = [];
+  private newline: R | null = null;
+
+  constructor(
+    private readonly decorate: (run: CodeRun) => R = (run) => run as R,
+  ) {}
+
+  runs(text: string, tag: string, opts: CodeRunOptions): R[] {
+    if (text.length === 0)
+      return [this.decorate({ text: '', color: opts.color })];
+    const language =
+      opts.language ??
+      (tag ? (opts.resolveLanguage?.(tag) ?? languageForTag(tag)) : null);
+    if (!language) return [this.decorate({ text, color: opts.color })];
+
+    const key = [language, opts.styles, opts.color, opts.resolveToken];
+    if (!this.key || key.some((part, i) => part !== this.key![i])) {
+      this.dispose();
+      this.key = key;
+      this.lines = [];
+      this.tokens = [];
+      this.lineRuns = [];
+      this.newline = this.decorate({ text: '\n', color: opts.color });
+      this.tokenizer = language.createTokenizer({ invalidate: () => {} });
+      this.tokenizer.setLines(this.lines);
+    }
+    const tokenizer = this.tokenizer!;
+
+    // the lines the text shares with the last one, from the top: the edit
+    // is everything after them
+    const next = text.split('\n');
+    const lines = this.lines;
+    const shared = Math.min(lines.length, next.length);
+    let from = 0;
+    while (from < shared && lines[from] === next[from]) from++;
+    if (from < lines.length || from < next.length) {
+      const removed = lines.length - from;
+      const inserted = next.length - from;
+      lines.length = from;
+      for (let i = from; i < next.length; i++) lines.push(next[i]!);
+      tokenizer.edit({ fromLine: from, removed, inserted });
+      this.tokens.length = from;
+      this.lineRuns.length = from;
+    }
+
+    // Asked in order from the top, so a stream engine walks its frontier
+    // line by line and answers each exactly, never from a guess.
+    const out: R[] = [];
+    for (let i = 0; i < lines.length; i++) {
+      if (i > 0) out.push(this.newline!);
+      const tokens = tokenizer.lineTokens(i);
+      let runs = this.lineRuns[i];
+      if (!runs || this.tokens[i] !== tokens) {
+        runs = lineRuns(lines[i]!, tokens, opts).map(this.decorate);
+        this.lineRuns[i] = runs;
+        this.tokens[i] = tokens;
+      }
+      for (const run of runs) out.push(run);
+    }
+    return out;
+  }
+
+  dispose(): void {
+    this.tokenizer?.dispose?.();
+    this.tokenizer = null;
+    this.key = null;
+  }
+}
+
+/** One line's runs, as `codeRuns` makes them, up to its end. */
+function lineRuns(
+  line: string,
+  tokens: readonly Token[],
+  opts: CodeRunOptions,
+): CodeRun[] {
+  const out: CodeRun[] = [];
+  let at = 0;
+  for (const t of tokens) {
+    if (t.from > at) push(out, line.slice(at, t.from), undefined, opts);
+    push(out, line.slice(t.from, t.to), t.type, opts);
+    at = t.to;
+  }
+  if (at < line.length) push(out, line.slice(at), undefined, opts);
+  return out;
+}

package/src/codeblock/index.ts

@@ -15,7 +15,11 @@
 // A shared module, not a component: no element registration, no React, and
 // nothing imported from either of its consumers (a component never imports
 // another component).
-import { codeRuns, autoTokenStyles } from '../code-language/index.js';
+import {
+  codeRuns,
+  autoTokenStyles,
+  CodeRunCache,
+} from '../code-language/index.js';
 import type { Language, TokenStyles } from '../code-language/index.js';
 import type { TextRun } from '../richtext/index.js';
 import { tint } from 'react-x11/style';
@@ -130,6 +134,49 @@ export function codeBlockRuns(
   }).map((run) => ({ ...run, family: look.family, size: look.size }));
 }
 
+/**
+ * `codeBlockRuns` kept between calls, for a block of code that changes a
+ * little at a time — a fence being streamed, a source being appended to:
+ * the tokenizer is told which lines changed and the rest keep their runs
+ * (`CodeRunCache`). Call `dispose()` when done with it.
+ */
+export class CodeBlockRunCache {
+  private cache: CodeRunCache<TextRun> | null = null;
+  private family: string | undefined;
+  private size: number | undefined;
+
+  runs(
+    source: string,
+    look: CodeBlockLook,
+    options: CodeBlockRunOptions = {},
+  ): TextRun[] {
+    if (!this.cache || this.family !== look.family || this.size !== look.size) {
+      this.cache?.dispose();
+      const { family, size } = look;
+      this.family = family;
+      this.size = size;
+      this.cache = new CodeRunCache<TextRun>((run) => ({
+        ...run,
+        family,
+        size,
+      }));
+    }
+    const { lang = '', language, resolveLanguage, highlight = true } = options;
+    return this.cache.runs(source, highlight ? lang : '', {
+      styles: look.styles,
+      color: look.color,
+      ...(highlight && language ? { language } : null),
+      ...(highlight && resolveLanguage ? { resolveLanguage } : null),
+      resolveToken: look.resolveToken,
+    });
+  }
+
+  dispose(): void {
+    this.cache?.dispose();
+    this.cache = null;
+  }
+}
+
 /** The block's own box: fill, radius, padding. What surrounds it — a row
  *  with a gutter, a column in a document — is the component's. */
 export function codeBlockStyle(look: CodeBlockLook): Style {

package/src/flow/node.ts

@@ -215,8 +215,6 @@ interface PanelCanvas {
  * global that wandered in would become an implicit `@types/node` dependency
  * a consumer has to satisfy. */
 const timers = globalThis as {
-  setInterval?(fn: () => void, ms: number): unknown;
-  clearInterval?(id: unknown): void;
   setTimeout?(fn: () => void, ms: number): unknown;
   clearTimeout?(id: unknown): void;
 };
@@ -301,14 +299,28 @@ const VISUAL_PROPS = [
 const clock = globalThis as { performance?: { now(): number } };
 
 /**
- * The pane's time: what a pan is stamped with, and what the dashes' march
- * reads to decide it has held still. A test holds it (test/flow.test.ts):
- * a runner that spends longer than the dashes' wait over one step of a pan
- * lets them march in the middle of it — as they should — and a test of the
- * pan cannot tell that from a march it should not have made.
+ * The pane's time and the dashes' timer: what a pan is stamped with, what
+ * the dashes' march reads to decide it has held still, and what takes the
+ * march's steps. A test holds both (`holdClock` in test/held-clock.ts). On
+ * the real clock a runner that spends longer than the dashes' wait over one
+ * step of a pan lets them march in the middle of it, as they should, and
+ * one that stalls before the pan lets a tick claim the dashes the first step
+ * copies, which declines the copy. A test of the pan cannot tell either from
+ * a march it should not have made.
+ *
+ * The shape of the map's `glideClock`. Exported from this module and not
+ * from `./index.ts`: this is for the tests.
  */
 export const flowClock = {
-  now: (): number => clock.performance?.now() ?? Date.now(),
+  now(): number {
+    return clock.performance?.now() ?? Date.now();
+  },
+  arm(step: () => void, ms: number): unknown {
+    return timers.setTimeout?.(step, ms) ?? null;
+  },
+  disarm(handle: unknown): void {
+    timers.clearTimeout?.(handle);
+  },
 };
 const now = (): number => flowClock.now();
 
@@ -3230,67 +3242,71 @@ export class FlowGraphNode extends Node implements FlowInstance {
 
   private _startAnimation(): void {
     if (this._animTimer != null) return;
-    this._animTimer =
-      timers.setInterval?.(() => {
-        // A pan that blits copies the pane's pixels, dashes and all, and a
-        // tick claims the dashes inside the band it copies — which declines
-        // the copy: every frame a tick landed in repainted the whole pane,
-        // a sixth of a pan's frames and all of its stutter. So the dashes
-        // sit the pan out, phase and all, and what the pan copies and what
-        // it draws agree; they march again once it has held still.
-        //
-        // And the view moving at all is what they wait out, not a blit that
-        // happened: a tick declines the blit it lands beside, so a pan
-        // whose frames ran past the wait had its ticks back, each one
-        // cancelling the next blit and repainting the pane — over the
-        // stress example's widgets in a large window, 2 frames a second,
-        // ticks and pan steps taking turns. A step since the last tick, or
-        // one within two ticks, holds the dashes still whatever a frame
-        // costs. Under GL a tick is a uniform and blits nothing, and they
-        // march through a pan as before.
-        //
-        // A 2D tick is a repaint of the box the dashes are in, which over a
-        // dense graph in a large window is most of the pane: 75 ms a tick on
-        // XQuartz, against a timer of 60. So the wait scales with what
-        // frames cost: the view held still for two frames' worth, and one
-        // tick every two frames at most — the dashes slow down before the
-        // thread is theirs, and a pan whose frames come slowly still sees
-        // them hold still.
-        const t = now();
-        const lastTick = this._tickAt;
-        this._tickAt = t;
-        if (t - this._blittedPanAt < ANIMATION_MS * 2) return;
-        let steps = 1;
-        if (!this._gl) {
-          const cost = this._tickCost * 2;
-          const still = Math.max(ANIMATION_MS * 2, cost);
-          if (this._viewMovedAt > lastTick || t - this._viewMovedAt < still) {
-            return;
-          }
-          // a tick under ANIMATION_MS apart, less a millisecond of timer
-          // slop; further while ticks are dear — and then the dashes cover
-          // the ground the skipped ticks would have, so they slow down in
-          // steps and not in speed
-          const since = t - this._marchedAt;
-          if (since < Math.max(ANIMATION_MS, cost) - 1) return;
-          steps = Math.min(4, Math.max(1, Math.round(since / ANIMATION_MS)));
+    const tick = (): void => {
+      // A step at a time rather than an interval, so that a test can hold
+      // the timer (`flowClock`), and armed again before anything else,
+      // which is when an interval would have been.
+      this._animTimer = flowClock.arm(tick, ANIMATION_MS);
+      // A pan that blits copies the pane's pixels, dashes and all, and a
+      // tick claims the dashes inside the band it copies — which declines
+      // the copy: every frame a tick landed in repainted the whole pane,
+      // a sixth of a pan's frames and all of its stutter. So the dashes
+      // sit the pan out, phase and all, and what the pan copies and what
+      // it draws agree; they march again once it has held still.
+      //
+      // And the view moving at all is what they wait out, not a blit that
+      // happened: a tick declines the blit it lands beside, so a pan
+      // whose frames ran past the wait had its ticks back, each one
+      // cancelling the next blit and repainting the pane — over the
+      // stress example's widgets in a large window, 2 frames a second,
+      // ticks and pan steps taking turns. A step since the last tick, or
+      // one within two ticks, holds the dashes still whatever a frame
+      // costs. Under GL a tick is a uniform and blits nothing, and they
+      // march through a pan as before.
+      //
+      // A 2D tick is a repaint of the box the dashes are in, which over a
+      // dense graph in a large window is most of the pane: 75 ms a tick on
+      // XQuartz, against a timer of 60. So the wait scales with what
+      // frames cost: the view held still for two frames' worth, and one
+      // tick every two frames at most — the dashes slow down before the
+      // thread is theirs, and a pan whose frames come slowly still sees
+      // them hold still.
+      const t = now();
+      const lastTick = this._tickAt;
+      this._tickAt = t;
+      if (t - this._blittedPanAt < ANIMATION_MS * 2) return;
+      let steps = 1;
+      if (!this._gl) {
+        const cost = this._tickCost * 2;
+        const still = Math.max(ANIMATION_MS * 2, cost);
+        if (this._viewMovedAt > lastTick || t - this._viewMovedAt < still) {
+          return;
         }
-        this._marchedAt = t;
-        this._dashPhase += ANIMATION_SPEED * steps;
-        // the box the last paint saw animated edges in, not the pane: a
-        // marching dash should not cost a full grid repaint per tick. And
-        // only the part of it the pane shows — an edge on its way out of
-        // the pane takes the box past it, and claimed whole, a tick
-        // repainted everything the window has beside the graph.
-        const box = this._animBox ? this._device(this._animBox) : this.abs;
-        const shown = intersectRects(box, this.contentBox());
-        if (shown) this.invalidate(false, shown, 'animation');
-      }, ANIMATION_MS) ?? null;
+        // a tick under ANIMATION_MS apart, less a millisecond of timer
+        // slop; further while ticks are dear — and then the dashes cover
+        // the ground the skipped ticks would have, so they slow down in
+        // steps and not in speed
+        const since = t - this._marchedAt;
+        if (since < Math.max(ANIMATION_MS, cost) - 1) return;
+        steps = Math.min(4, Math.max(1, Math.round(since / ANIMATION_MS)));
+      }
+      this._marchedAt = t;
+      this._dashPhase += ANIMATION_SPEED * steps;
+      // the box the last paint saw animated edges in, not the pane: a
+      // marching dash should not cost a full grid repaint per tick. And
+      // only the part of it the pane shows — an edge on its way out of
+      // the pane takes the box past it, and claimed whole, a tick
+      // repainted everything the window has beside the graph.
+      const box = this._animBox ? this._device(this._animBox) : this.abs;
+      const shown = intersectRects(box, this.contentBox());
+      if (shown) this.invalidate(false, shown, 'animation');
+    };
+    this._animTimer = flowClock.arm(tick, ANIMATION_MS);
   }
 
   private _stopAnimation(): void {
     if (this._animTimer == null) return;
-    timers.clearInterval?.(this._animTimer);
+    flowClock.disarm(this._animTimer);
     this._animTimer = null;
   }
 

package/src/html/controls.ts

@@ -24,7 +24,7 @@ import type { Element } from 'domhandler';
 import { attr, tagOf } from './dom.js';
 import type { ComputedStyle } from './css/style.js';
 import { isTransparent } from './css/values.js';
-import type { BoxTree, ReplacedKind } from './layout/boxes.js';
+import type { Box, BoxTree, ReplacedKind } from './layout/boxes.js';
 import type { FontsLike } from './layout/inline.js';
 
 /** The palette numbers a control's box has to reserve room for. */
@@ -48,15 +48,24 @@ export interface ControlRect {
   width: number;
   height: number;
   /**
-   * Set on a text field whose own box the author styled — gave it a border
-   * or a background (`styledField`). The document draws that box, and the
-   * widget goes bare inside its content box, here, with no frame or fill
-   * of its own and its text in the element's colour and font.
+   * Set on a text field or a `<select>` whose own box the author styled —
+   * gave it a border or a background (`styledField`). The document draws
+   * that box, and the widget goes bare inside its content box, here, with
+   * no frame or fill of its own and its text in the element's colour and
+   * font.
    */
   bare?: BareField;
+  /**
+   * How opaque the widget is drawn, where it is less than 1: the element's
+   * own `opacity` times every ancestor's, since each fades what is in it as
+   * a group. At 0 the widget is not seen and still takes a press, as the
+   * element does in a browser — the checkbox a CSS-only dropdown lays,
+   * invisible, over its label.
+   */
+  opacity?: number;
 }
 
-/** Where a styled text field's widget goes, and how its text looks. */
+/** Where a styled field's widget goes, and how its text looks. */
 export interface BareField {
   x: number;
   y: number;
@@ -65,6 +74,12 @@ export interface BareField {
   color: string;
   fontFamily: string;
   fontSize: number;
+  /**
+   * A `<select>`'s: whether it draws its arrow. It does unless the page set
+   * `appearance: none`, which is how a page that draws its own arrow — as a
+   * background image, most often — says so.
+   */
+  chevron?: boolean;
 }
 
 /** The rectangles every control in a laid-out document landed on. */
@@ -73,6 +88,8 @@ export function controlRectsOf(tree: BoxTree): ControlRect[] {
   for (const box of tree.controls) {
     if (!box.el) continue;
     if (box.width <= 0 || box.height <= 0) continue;
+    // a hidden element draws nothing and takes no press (CSS 2.1 11.2)
+    if (box.style.visibility !== 'visible') continue;
     const rect: ControlRect = {
       element: box.el,
       kind: box.replaced,
@@ -81,6 +98,11 @@ export function controlRectsOf(tree: BoxTree): ControlRect[] {
       width: box.width,
       height: box.height,
     };
+    let opacity = 1;
+    for (let at: Box | null = box; at; at = at.parent) {
+      opacity *= at.style.opacity;
+    }
+    if (opacity < 1) rect.opacity = Math.max(0, opacity);
     if (styledField(box.replaced, box.style)) {
       rect.bare = {
         x: box.contentX,
@@ -90,6 +112,9 @@ export function controlRectsOf(tree: BoxTree): ControlRect[] {
         color: box.style.color,
         fontFamily: box.style.fontFamily,
         fontSize: box.style.fontSize,
+        ...(box.replaced === 'select' && {
+          chevron: box.style.appearance !== 'none',
+        }),
       };
     }
     out.push(rect);
@@ -98,17 +123,23 @@ export function controlRectsOf(tree: BoxTree): ControlRect[] {
 }
 
 /**
- * Whether a text field's box is the author's to draw: one given a border or
- * a background of its own, which the UA sheet gives no control, or set to
+ * Whether a field's box is the author's to draw: one given a border or a
+ * background of its own, which the UA sheet gives no control, or set to
  * `appearance: none`, which says so outright. A browser drops a field's
  * native look for the author's then (CSS UI 4 7.1, `appearance`), and so
  * does this: the widget's frame and fill would hide the author's, and what
  * they would draw is the theme's rather than the page's. `appearance: none`
  * is how a design system writes every field it has — meetup.com's search
  * pill holds two with no background, only one of them with a border.
+ *
+ * A `<select>` is one too. A browser keeps its arrow when the page gave it a
+ * border or a background (Blink's `menulist-button`), and leaves that out
+ * as well at `appearance: none` — `BareField.chevron`.
  */
 export function styledField(kind: ReplacedKind, style: ComputedStyle): boolean {
-  if (kind !== 'input' && kind !== 'textarea') return false;
+  if (kind !== 'input' && kind !== 'textarea' && kind !== 'select') {
+    return false;
+  }
   return (
     style.appearance === 'none' ||
     !isTransparent(style.backgroundColor) ||
@@ -168,6 +199,16 @@ export function measureControl(
     }
     case 'select': {
       const widest = optionWidths(el);
+      // a select the page styled is its widest option and its arrow, and
+      // the room around them is the page's
+      if (styledField(kind, style)) {
+        return {
+          width: Math.round(
+            ch * widest + (style.appearance === 'none' ? 0 : em),
+          ),
+          height: lineHeight,
+        };
+      }
       // The room for the chevron is the widget's, not the document's, but
       // the document has to reserve it or the last letter of the widest
       // option sits under it.