@react-x11/components 0.8.0 → 0.10.0

package/src/richtext/node.ts

@@ -37,6 +37,7 @@ import {
   paintRunBackgrounds,
   paintRunRules,
 } from './runs.js';
+import type { FillContext } from './runs.js';
 import { codeUnitOffsets } from '../internal/text.js';
 
 /** The element name — registration key, `node.kind` and JSX tag alike. */
@@ -81,6 +82,10 @@ export interface TextRun {
   weight?: number | 'normal' | 'bold';
   style?: 'normal' | 'italic';
   color?: string;
+  /** Pixels added after every glyph — CSS's `letter-spacing`. Both text
+   *  engines take it on a span, and it passes through to them as the rest
+   *  of the ntk vocabulary does. */
+  letterSpacing?: number;
   /** Fill painted behind the run — the inline-code chip. */
   bg?: string;
   /**
@@ -100,16 +105,37 @@ export interface TextRun {
    *  sub-parameters, which a captured terminal session carries. Ignored
    *  without `underline`, which is what says the rule exists at all. */
   underlineStyle?: 'single' | 'double' | 'curly' | 'dotted' | 'dashed';
+  /** How far below the baseline the underline's top is, and how thick it
+   *  is, in the unit `size` is in — CSS's `text-underline-offset` and
+   *  `text-decoration-thickness`. Unset, two pixels below and one thick. */
+  underlineOffset?: number;
+  underlineThickness?: number;
   /** 1px rule through the x-height, in this colour — `~~del~~`. */
   strike?: string;
   /** Link target. `null` is a link still streaming in (not clickable). */
   href?: string | null;
+  /** OpenType features the run is shaped with, by tag — `{ tnum: 1 }`,
+   *  `{ liga: 0 }` — which both text engines take on a span. A run's fields
+   *  are compared by identity (`sameRuns`), so the same features should be
+   *  the same object. */
+  features?: Readonly<Record<string, number>>;
+  /** Runs that share a truthy `nowrap` have no break inside them or between
+   *  them — the text of one element with `white-space: nowrap`, the element
+   *  being the value. ntk's, from 8.13.0; CoreText breaks as it would. */
+  nowrap?: unknown;
+  /** Shaped on its own: ntk shapes a word that runs across spans shaped
+   *  alike as one, kerned and joined across them, and a run marked so is
+   *  kept apart from the ones either side of it — as CSS keeps the text
+   *  either side of an inline box's margin, border or padding. ntk's, from
+   *  8.14.2. */
+  shapeApart?: boolean;
 }
 
 /** The props `<richtext>` takes. */
 export interface RichTextProps {
-  /** The styled runs. Give a stable array identity — the layout cache and
-   *  the streaming path both key off it. */
+  /** The styled runs. Give a stable array identity where you can — the
+   *  streaming path keys off it; an equal new array keeps its layout, for
+   *  one pass over the runs (`sameRuns`). */
   runs: TextRun[];
   /** False lays the text out at its natural width, unwrapped — code. */
   wrap?: boolean;
@@ -177,6 +203,113 @@ interface FontsLike {
   ): TextLayoutLike;
 }
 
+/** Spacing that tells runs apart and moves nothing: an engine that merges
+ *  adjacent runs alike (CoreText) keeps a tab's space to itself. */
+const HAIR = 1e-6;
+
+/**
+ * The runs with each tab laid out as a space of its own, letter-spaced to
+ * the next stop: every eight spaces from its line's start, and past one
+ * less than half a "0" on (CSS Text 3, 4.2's `tab-size`). Neither engine
+ * sets a tab so — ntk has no glyph for one and draws a box, and CoreText
+ * stops every 28 points — so a tab-indented fence in `<Markdown>` or a
+ * `<Code>` block came out boxed or ragged. The space is the tab's length,
+ * so every offset holds, and the text a selection copies keeps its tabs.
+ * Placed from a first layout that has each tab as an unspaced space; a
+ * later tab on a line moves by what the ones before it added.
+ */
+function tabbedRuns(
+  fonts: FontsLike,
+  runs: TextRun[],
+  base: Record<string, unknown>,
+): TextRun[] {
+  const out: TextRun[] = [];
+  const tabs: { at: number; index: number }[] = [];
+  let units = 0;
+  for (const run of runs) {
+    const text = run.text;
+    if (!text.includes('\t')) {
+      out.push(run);
+      units += text.length;
+      continue;
+    }
+    let done = 0;
+    for (let p = text.indexOf('\t'); p >= 0; p = text.indexOf('\t', p + 1)) {
+      if (p > done) out.push({ ...run, text: text.slice(done, p) });
+      tabs.push({ at: units + p, index: out.length });
+      out.push({
+        ...run,
+        text: ' ',
+        letterSpacing: (run.letterSpacing ?? 0) + tabs.length * HAIR,
+      });
+      done = p + 1;
+    }
+    if (done < text.length) out.push({ ...run, text: text.slice(done) });
+    units += text.length;
+  }
+  const natural = fonts.layout(out, base, {});
+  const found = new Map<number, { x: number; line: number }>();
+  natural.lines.forEach((line, i) => {
+    for (const run of line.runs ?? []) {
+      found.set(run.start, { x: line.x + run.x, line: i });
+    }
+  });
+  /** The room tabs have added to each line so far. */
+  const added = new Map<number, number>();
+  for (const tab of tabs) {
+    const run = out[tab.index];
+    const face = {
+      ...base,
+      ...(run.family !== undefined ? { family: run.family } : null),
+      ...(run.size !== undefined ? { size: run.size } : null),
+      ...(run.weight !== undefined ? { weight: run.weight } : null),
+      ...(run.style !== undefined ? { style: run.style } : null),
+    };
+    const space = advanceOf(fonts, face, ' ');
+    const every = 8 * space;
+    const own = space + (run.letterSpacing ?? 0);
+    const at = found.get(tab.at) ?? natural.caretPosition(tab.at);
+    const before = added.get(at.line) ?? 0;
+    const x = at.x + before;
+    let advance = own;
+    if (every > 0) {
+      let stop = (Math.floor(x / every) + 1) * every;
+      if (stop - x < advanceOf(fonts, face, '0') / 2) stop += every;
+      advance = stop - x;
+    }
+    out[tab.index] = {
+      ...run,
+      letterSpacing: (run.letterSpacing ?? 0) + advance - own,
+    };
+    added.set(at.line, before + advance - own);
+  }
+  return out;
+}
+
+/** A character's advance in a face: between two letters, so that no engine
+ *  drops it as a line's end. Kept per engine and face: a file indented with
+ *  tabs asks for it thousands of times. */
+function advanceOf(
+  fonts: FontsLike,
+  face: Record<string, unknown>,
+  char: string,
+): number {
+  let kept = ADVANCES.get(fonts);
+  if (!kept) ADVANCES.set(fonts, (kept = new Map()));
+  const key = `${face.family}|${face.size}|${face.weight}|${face.style}|${char}`;
+  let advance = kept.get(key);
+  if (advance === undefined) {
+    advance =
+      fonts.layout([{ ...face, text: `x${char}x` } as TextRun], face, {})
+        .width -
+      fonts.layout([{ ...face, text: 'xx' } as TextRun], face, {}).width;
+    kept.set(key, advance);
+  }
+  return advance;
+}
+
+const ADVANCES = new WeakMap<FontsLike, Map<string, number>>();
+
 /**
  * The bands a highlight over `[start, end)` fills, in layout coordinates —
  * one per line, and more than one on a line that changes direction. The
@@ -211,12 +344,51 @@ function rangeBands(
   return bands;
 }
 
+/**
+ * Whether two `runs` props say the same thing. A component that builds its
+ * runs in render hands over a new array whenever it renders, whether or not
+ * the text changed — the rich text editor does on every keystroke, for
+ * paragraphs the keystroke never reached — and the array's identity was
+ * all a layout cache cleared on. A run's fields are all primitives, so one
+ * shallow pass decides it, where the layout it spares is a paragraph shaped
+ * and broken again.
+ */
+function sameRuns(a: unknown, b: unknown): boolean {
+  if (a === b) return true;
+  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0; i < a.length; i++) {
+    const x = a[i] as Record<string, unknown>;
+    const y = b[i] as Record<string, unknown>;
+    if (x === y) continue;
+    if (!x || !y) return false;
+    const keys = Object.keys(x);
+    if (keys.length !== Object.keys(y).length) return false;
+    for (const key of keys) if (x[key] !== y[key]) return false;
+  }
+  return true;
+}
+
 export class RichTextNode extends Node {
   private _layouts = new Map<string, TextLayoutLike | null>();
   private _text: string | null = null;
+  /** The runs as laid out where a tab is among them, and what from. */
+  private _tabbed: { from: TextRun[]; scale: number; to: TextRun[] } | null =
+    null;
 
-  constructor(props: Record<string, unknown>, app: NtkApp) {
-    super(ELEMENT, props, app);
+  /**
+   * `kind` is for a subclass registered under a name of its own — the rich
+   * text editor's text blocks are `<richtext>` plus a caret and a selection
+   * the editor owns (`src/rich-text-editor/nodes.ts`). A node's `kind` must be
+   * the name it was registered under, so the subclass passes its own.
+   */
+  constructor(
+    props: Record<string, unknown>,
+    app: NtkApp,
+    kind: string = ELEMENT,
+  ) {
+    super(kind, props, app);
   }
 
   /**
@@ -255,21 +427,36 @@ export class RichTextNode extends Node {
     let layout: TextLayoutLike | null = null;
     if (fonts) {
       const s = this._scale;
-      layout = fonts.layout(
-        this._deviceRuns(s),
-        { family: 'sans-serif', size: 14 * s },
-        {
-          maxWidth: Number.isFinite(maxWidth) ? maxWidth : undefined,
-          lineHeight: this.style.lineHeight,
-          align: this.style.textAlign,
-        },
-      );
+      const base = { family: 'sans-serif', size: 14 * s };
+      layout = fonts.layout(this._tabRuns(fonts, base, s), base, {
+        maxWidth: Number.isFinite(maxWidth) ? maxWidth : undefined,
+        lineHeight: this.style.lineHeight,
+        align: this.style.textAlign,
+      });
     }
     if (this._layouts.size > 32) this._layouts.clear();
     this._layouts.set(key, layout);
     return layout;
   }
 
+  /** The runs with their tabs set to their stops (`tabbedRuns`), found
+   *  once for a list of runs: most have none, and are handed on as they
+   *  are. */
+  private _tabRuns(
+    fonts: FontsLike,
+    base: Record<string, unknown>,
+    scale: number,
+  ): TextRun[] {
+    const from = this._runs();
+    const runs = this._deviceRuns(scale);
+    if (!runs.some((run) => run.text.includes('\t'))) return runs;
+    const kept = this._tabbed;
+    if (kept && kept.from === from && kept.scale === scale) return kept.to;
+    const to = tabbedRuns(fonts, runs, base);
+    this._tabbed = { from, scale, to };
+    return to;
+  }
+
   // --- units ---------------------------------------------------------------
   //
   // The layout, `abs` and the paint are device pixels (react-x11's
@@ -294,7 +481,20 @@ export class RichTextNode extends Node {
     const runs = this._runs();
     if (scale === 1) return runs;
     return runs.map((r) =>
-      typeof r.size === 'number' ? { ...r, size: r.size * scale } : r,
+      typeof r.size === 'number' ||
+      r.underlineOffset !== undefined ||
+      r.underlineThickness !== undefined
+        ? {
+            ...r,
+            ...(typeof r.size === 'number' ? { size: r.size * scale } : null),
+            ...(r.underlineOffset !== undefined
+              ? { underlineOffset: r.underlineOffset * scale }
+              : null),
+            ...(r.underlineThickness !== undefined
+              ? { underlineThickness: r.underlineThickness * scale }
+              : null),
+          }
+        : r,
     );
   }
 
@@ -302,8 +502,10 @@ export class RichTextNode extends Node {
    * The layout this node is currently painted with — and, because it is the
    * one thing every accessor below answers from, the reason a caret rect and
    * a glyph cannot disagree (docs/extending.md, "answer from what you draw").
+   * Protected rather than private for the editor's subclass, whose line-wise
+   * caret motion reads the lines off the same layout the glyphs came from.
    */
-  private _paintLayout(): TextLayoutLike | null {
+  protected paintLayout(): TextLayoutLike | null {
     const wrap = (this.props as unknown as RichTextProps).wrap !== false;
     return this._layoutFor(wrap ? this.abs.width : Infinity);
   }
@@ -314,15 +516,34 @@ export class RichTextNode extends Node {
   ): void {
     super.applyProps(nextProps, prevProps);
     if (
-      nextProps.runs !== prevProps.runs ||
-      nextProps.wrap !== prevProps.wrap
+      nextProps.wrap !== prevProps.wrap ||
+      !sameRuns(nextProps.runs, prevProps.runs)
     ) {
       this._layouts.clear();
       this._text = null;
+      this._tabbed = null;
       this.invalidateMeasure('content');
     }
   }
 
+  /** A new `runs` array that says what the last one said changes nothing
+   *  drawn — see `sameRuns`. */
+  override paintChanged(
+    nextProps: Record<string, unknown>,
+    prevProps: Record<string, unknown>,
+  ): boolean {
+    if (
+      nextProps.runs !== prevProps.runs &&
+      sameRuns(nextProps.runs, prevProps.runs)
+    ) {
+      return super.paintChanged(
+        { ...nextProps, runs: prevProps.runs },
+        prevProps,
+      );
+    }
+    return super.paintChanged(nextProps, prevProps);
+  }
+
   override destroySubtree(): void {
     this._layouts.clear();
     super.destroySubtree();
@@ -347,14 +568,14 @@ export class RichTextNode extends Node {
   }
 
   override textIndexAt(x: number, y: number): number {
-    const layout = this._paintLayout();
+    const layout = this.paintLayout();
     if (!layout) return 0;
     const i = layout.indexAt(x - this.abs.x, y - this.abs.y);
     return Math.max(0, Math.min([...this.textContent()].length, i));
   }
 
   override textCaretRect(index: number): Rect | null {
-    const layout = this._paintLayout();
+    const layout = this.paintLayout();
     if (!layout) return null;
     const caret = layout.caretPosition(index);
     return {
@@ -366,7 +587,7 @@ export class RichTextNode extends Node {
   }
 
   override textRangeRects(start: number, end: number): Rect[] {
-    const layout = this._paintLayout();
+    const layout = this.paintLayout();
     if (!layout) return [];
     return rangeBands(layout, this.textContent(), start, end).map((band) => ({
       x: this.abs.x + band.x,
@@ -381,7 +602,7 @@ export class RichTextNode extends Node {
    *  selection seam: core deliberately left hover and `cursorAt` out of
    *  #291, so following a link stays this package's. */
   hrefAtPoint(x: number, y: number): string | null {
-    const layout = this._paintLayout();
+    const layout = this.paintLayout();
     if (!layout) return null;
     const s = this._scale;
     const lx = x * s - this.abs.x;
@@ -401,7 +622,7 @@ export class RichTextNode extends Node {
 
   override paint(ctx: Context2D): void {
     super.paint(ctx); // background, border, clip to `abs`
-    const layout = this._paintLayout();
+    const layout = this.paintLayout();
     if (!layout || !canFill(ctx)) return;
     const { x, y } = this.abs;
     const s = this._scale;
@@ -412,28 +633,8 @@ export class RichTextNode extends Node {
     //    terminal's cell backgrounds
     for (const line of layout.lines) paintRunBackgrounds(ctx, line, x, y, s);
 
-    // 2. the band the document selection has claimed of this element's text,
-    //    translucent so the ink keeps its contrast on either palette (the
-    //    same reasoning as `<textarea>`'s). The range and the colour both
-    //    arrive from the surface above; `textRangeRects` is what a custom
-    //    element and core's own `<text>` both fill, so they cannot drift.
-    const range = this.selectionRange;
-    // The colour is the condition, not just the range: core types it
-    // `string | null` and defines it as what to fill the rectangles with
-    // *while a selection is set*, so a null one is "nothing to draw"
-    // rather than a band in the default ink.
-    const selectionColor = this.selectionColor;
-    if (selectionColor && range && range.end > range.start) {
-      ctx.fillStyle = selectionColor;
-      for (const r of this.textRangeRects(range.start, range.end)) {
-        ctx.fillRect(
-          Math.round(r.x),
-          Math.round(r.y),
-          Math.ceil(r.width),
-          Math.ceil(r.height),
-        );
-      }
-    }
+    // 2. the band a selection has claimed of this element's text
+    this.paintSelection(ctx);
 
     // 3. the ink
     layout.draw(ctx, x, y);
@@ -441,6 +642,55 @@ export class RichTextNode extends Node {
     // 4. rules over the ink: link underlines, strikethrough
     for (const line of layout.lines) paintRunRules(ctx, line, x, y, s);
 
+    // 5. anything that belongs over everything — a subclass's caret
+    this.paintOverlay(ctx);
+
     ctx.restore();
   }
+
+  /**
+   * How far this element draws past its box: a code chip is padded two
+   * pixels past the run behind it (`paintRunBackgrounds`), and at the start
+   * or the end of a line the pad is outside the box. Said for every
+   * paragraph, chips or not — core reads it when it rebuilds the paint
+   * bounds a claim covers, and the claim after an edit that took the last
+   * chip away still has to cover the chip the frame before drew. An older
+   * core never asks.
+   */
+  override paintOverhang(): number {
+    return Math.round(2 * this.scale);
+  }
+
+  /**
+   * The selection band, between the run backgrounds and the ink. The default
+   * is core's document selection: the band the `selectable` surface above
+   * has claimed of this element's text, translucent so the ink keeps its
+   * contrast on either palette (the same reasoning as `<textarea>`'s). The
+   * range and the colour both arrive from that surface; `textRangeRects` is
+   * what a custom element and core's own `<text>` both fill, so they cannot
+   * drift. An element with a selection of its own — the editor's text
+   * blocks — overrides this and fills that one instead.
+   */
+  protected paintSelection(ctx: FillContext): void {
+    const range = this.selectionRange;
+    // The colour is the condition, not just the range: core types it
+    // `string | null` and defines it as what to fill the rectangles with
+    // *while a selection is set*, so a null one is "nothing to draw"
+    // rather than a band in the default ink.
+    const selectionColor = this.selectionColor;
+    if (!selectionColor || !range || range.end <= range.start) return;
+    ctx.fillStyle = selectionColor;
+    for (const r of this.textRangeRects(range.start, range.end)) {
+      ctx.fillRect(
+        Math.round(r.x),
+        Math.round(r.y),
+        Math.ceil(r.width),
+        Math.ceil(r.height),
+      );
+    }
+  }
+
+  /** Drawn last, over the ink and the rules: nothing here, a caret in the
+   *  editor's subclass. Inside the same save/restore as the rest. */
+  protected paintOverlay(_ctx: FillContext): void {}
 }

package/src/richtext/runs.ts

@@ -34,10 +34,10 @@ export function canFill(ctx: unknown): ctx is FillContext {
  *
  * `span` and `run` are what ntk's layout hands back and what every
  * decoration is read from: the span the run came from, markers and all, and
- * the face it was shaped with. Both are optional because react-x11's Cocoa
- * engine (2.3.x) reports only a run's geometry — `{ x, width, start, end }`
- * — and a paint that assumed the rest threw on the first paragraph on
- * macOS. A run without its span has no decoration to draw; a run without
+ * the face it was shaped with. Both are optional because an engine may
+ * report only a run's geometry — `{ x, width, start, end }` — as react-x11's
+ * Windows engine does and its Cocoa engine did before 2.22.8, and a paint
+ * that assumed the rest threw on the first paragraph on macOS. A run without its span has no decoration to draw; a run without
  * its face takes its vertical extent from the line, which both engines
  * report.
  */
@@ -102,7 +102,8 @@ let warnedSpanless = false;
  * Say so, once, when a laid-out run arrives without the span it came from:
  * every decoration is read off that span, so none will be drawn, and a
  * document that suddenly has no code chips or link underlines should not be
- * a mystery. react-x11's Cocoa engine (2.3.x) is the one that does this.
+ * a mystery. react-x11's Windows engine does this, and its Cocoa engine did
+ * before 2.22.8.
  *
  * `process` and `console` come off `globalThis` because `src/` compiles
  * with `types: []` — a Node global that wandered in would fail the build
@@ -120,7 +121,8 @@ function warnSpanless(): void {
     '@react-x11/components: the text engine handed back laid-out runs ' +
       'without their spans, so run decorations (backgrounds, underlines, ' +
       "strikethrough) and inline link hit-testing are off. react-x11's " +
-      "Cocoa text engine (2.3.x) does this; ntk's does not.",
+      'Windows text engine does this, as its Cocoa engine did before ' +
+      "2.22.8; ntk's does not.",
   );
 }
 
@@ -174,30 +176,39 @@ export function paintRunBackgrounds(
   }
 }
 
-/** The rules that sit **over** the glyphs: link underlines, strikethrough.
- *  A rule is one logical pixel thick — `scale` device pixels, so a link on a
- *  2x panel is underlined as heavily as on a 1x one, not with a hairline. */
+/** The rules drawn with a run: its underline and its strikethrough. A rule
+ *  is one logical pixel thick — `scale` device pixels, so a link on a 2x
+ *  panel is underlined as heavily as on a 1x one, not with a hairline —
+ *  and an underline two below the baseline, where the run sets neither
+ *  (`underlineThickness`, `underlineOffset`, in device pixels by now).
+ *  `rules` picks a pass: CSS draws an underline under the glyphs and a
+ *  line through over them (CSS 2.1 Appendix E), which is two passes around
+ *  the glyphs'; drawn in one, both go over. */
 export function paintRunRules(
   ctx: FillContext,
   line: LaidLine,
   dx: number,
   dy: number,
   scale = 1,
+  rules: 'under' | 'over' | 'all' = 'all',
 ): void {
   const t = ruleThickness(scale);
   for (const r of line.runs) {
     const span = r.span;
     if (!span) continue;
-    const { underline, strike } = span;
+    const underline = rules !== 'over' ? span.underline : undefined;
+    const strike = rules !== 'under' ? span.strike : undefined;
     if (underline) {
       ctx.fillStyle = underline;
       underlineRule(
         ctx,
         Math.round(dx + line.x + r.x),
-        Math.round(dy + line.baseline + 2 * t),
+        Math.round(dy + line.baseline + (span.underlineOffset ?? 2 * t)),
         Math.ceil(r.width),
         span.underlineStyle ?? 'single',
-        t,
+        span.underlineThickness === undefined
+          ? t
+          : Math.max(1, Math.round(span.underlineThickness)),
       );
     }
     if (strike) {

package/src/table/index.ts

@@ -82,6 +82,7 @@ import {
   SETTLE_BUDGET,
   useVirtualWindow,
 } from '../internal/window.js';
+import type { VirtualViewport } from '../internal/window.js';
 import {
   MIN_COLUMN,
   columnValue,
@@ -887,6 +888,33 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
     virtual === true ||
     (virtual === 'auto' && ordered.length > VIRTUAL_THRESHOLD);
 
+  /**
+   * One drawn row into the height index, for the window's trim: it may drop
+   * a row only once the index knows the height the row is laid out at, and
+   * a flick reaches the trailing rows long before `measureRows` does (see
+   * `measure` on the window's inputs). The gates are `measureRows`'s, for
+   * its reasons — no viewport yet, a row drawn against a list that has
+   * moved, a row laid out against a grid the columns no longer resolve to.
+   */
+  const measureDrawn = useCallback(
+    (id: TableRowId, at: number, viewport: VirtualViewport): boolean => {
+      const drawn = rowNodes.current.get(id);
+      if (!drawn || drawn.at !== at || viewport.width <= 0) return false;
+      const expected = resolveWidths(
+        columnsRef.current,
+        userWidthsRef.current,
+        Math.max(0, viewport.width - rowInsetRef.current * 2),
+      ).total;
+      const s = scaleOf(drawn.node);
+      if (Math.abs(drawn.node.abs.width / s - expected) >= 1) return false;
+      heights.measure(id, at, drawn.node.abs.height / s);
+      return heights.isMeasured(at);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `heights` is a
+    // stable instance
+    [],
+  );
+
   /** The viewport, and the slice worth building from it — the machinery
    *  shared with `<Tree>` (`../internal/window.ts`). */
   const win = useVirtualWindow({
@@ -902,6 +930,7 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
     threshold: catchup?.threshold ?? SKELETON_THRESHOLD,
     burstBudget: catchup?.burst ?? BURST_BUDGET,
     settleBudget: catchup?.settle ?? SETTLE_BUDGET,
+    measure: measureDrawn,
   });
   const { view, viewRef } = win;
   const { first, last, above, below } = win.slice;

package/src/table/rows.ts

@@ -7,6 +7,7 @@
 // answer, and the tests assert on the answer directly.
 
 import type { ReactNode } from 'react';
+import { compareText } from '../internal/collate.js';
 
 /** What a row is keyed by. Numbers are allowed because a row often comes
  *  from a database, and stringifying an id is a chance to lose one. */
@@ -108,11 +109,12 @@ export function columnValue<Row>(row: Row, column: TableColumn<Row>): unknown {
     : (row as Record<string, unknown>)[column.id];
 }
 
-/** Core's comparator, verbatim: numbers numerically, everything else as
- *  text, with `null`/`undefined` sorting as the empty string. */
+/** Core's comparator: numbers numerically, everything else as text, with
+ *  `null`/`undefined` sorting as the empty string. The text half is
+ *  `localeCompare`'s, through one collator (`../internal/collate.ts`). */
 export function defaultCompare(a: unknown, b: unknown): number {
   if (typeof a === 'number' && typeof b === 'number') return a - b;
-  return String(a ?? '').localeCompare(String(b ?? ''));
+  return compareText(String(a ?? ''), String(b ?? ''));
 }
 
 /**
@@ -165,11 +167,19 @@ export function orderRows<Row>(
     sort && !presorted ? columns.find((c) => c.id === sort.column) : undefined;
   if (sort && column) {
     const sign = sort.direction === 'desc' ? -1 : 1;
-    const compare =
-      column.compare ??
-      ((a: Row, b: Row) =>
-        defaultCompare(columnValue(a, column), columnValue(b, column)));
-    entries.sort((a, b) => sign * compare(a.row, b.row));
+    const compare = column.compare;
+    if (compare) {
+      entries.sort((a, b) => sign * compare(a.row, b.row));
+    } else {
+      // each row's value read once rather than twice a comparison: a sort
+      // asks for about 17 of them a row at 100,000 rows
+      const keyed = entries.map((entry) => ({
+        entry,
+        key: columnValue(entry.row, column),
+      }));
+      keyed.sort((a, b) => sign * defaultCompare(a.key, b.key));
+      for (let i = 0; i < keyed.length; i++) entries[i] = keyed[i].entry;
+    }
     entries.forEach((entry, index) => {
       entry.index = index;
     });

package/src/terminal/backends.ts

@@ -21,7 +21,10 @@
  * program installed and is the only backend `write()` can work on.
  *
  * `'auto'` takes the first embeddable emulator that is installed and falls
- * back to `'vt'`. That order — rather than vt first — is deliberate: an
+ * back to `'vt'` — and on a react-x11 backend that cannot host an embedded
+ * window at all (the native macOS one) it takes `'vt'` without looking for
+ * the other three, because an emulator found on `PATH` there is one this app
+ * cannot show. That order — rather than vt first — is deliberate: an
  * external emulator is battle-tested, and a user who installed one expressed
  * a preference. Moving vt to the front is a later, deliberate decision.
  */