@react-x11/components 0.9.0 → 0.11.0

package/src/richtext/node.ts

@@ -82,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;
   /**
@@ -101,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;
@@ -178,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
@@ -212,9 +344,38 @@ 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;
 
   /**
    * `kind` is for a subclass registered under a name of its own — the rich
@@ -266,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
@@ -305,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,
     );
   }
 
@@ -327,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();
@@ -440,6 +648,19 @@ export class RichTextNode extends Node {
     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

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/index.ts

@@ -69,6 +69,7 @@ import { useForeignTitle } from './title.js';
 import { hx } from './hx.js';
 import type { PtyHost } from './vt/pty.js';
 import type { VtHandle, VtTerminalProps } from './vt/index.js';
+import { useFontPrewarm } from '../internal/prewarm.js';
 
 export {
   TERMINAL_BACKENDS,
@@ -412,6 +413,9 @@ export function Terminal(props: TerminalProps): ReactElement {
   const [vtFallback, setVtFallback] = useState(false);
   const vt =
     backend === 'vt' || (backend === 'auto' && (vtFallback || !embeddable));
+  // the grid is drawn in this family, and loading the emulator is the head
+  // start; an embedded emulator brings fonts of its own
+  useFontPrewarm(vt ? (props.fontFamily ?? 'monospace') : null);
   useEffect(() => {
     if (backend !== 'auto') setVtFallback(false);
   }, [backend]);

package/src/terminal/vt/pty.ts

@@ -201,11 +201,25 @@ function nodeProcess(): {
   return g.process ?? null;
 }
 
-/** The user's login shell, or the last-resort `sh`. */
+/**
+ * The user's login shell, or the platform's last resort.
+ *
+ * `$SHELL` first wherever it is set, because it is the user's own answer —
+ * and it is set under a POSIX shell on Windows too (git-bash, MSYS), where it
+ * is still the right one. Failing that the fallback has to be the platform's:
+ * `/bin/sh` is not a path on Windows, and a terminal that opens on "file not
+ * found" is indistinguishable from one whose pty could not start.
+ *
+ * `%COMSPEC%` rather than a spelled-out `cmd.exe`, since that is where Windows
+ * says which command processor this system has.
+ */
 export function defaultShell(
   env: Record<string, string | undefined> = nodeProcess()?.env ?? {},
+  platform: string = nodeProcess()?.platform ?? '',
 ): string {
-  return env.SHELL || '/bin/sh';
+  if (env.SHELL) return env.SHELL;
+  if (platform === 'win32') return env.COMSPEC || 'cmd.exe';
+  return '/bin/sh';
 }
 
 class NodePtySession implements PtySession {