@react-x11/components 0.9.0 → 0.10.0

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 {

package/src/terminal-output/index.ts

@@ -48,6 +48,7 @@ import {
 } from '../codeblock/index.js';
 import { documentRuns } from './runs.js';
 import { hx } from './hx.js';
+import { useFontPrewarm } from '../internal/prewarm.js';
 
 const h = React.createElement;
 
@@ -257,6 +258,7 @@ export function TerminalOutput(props: TerminalOutputProps): ReactElement {
       }),
     [theme, props.fontSize, props.monoFamily],
   );
+  useFontPrewarm(look.family);
 
   // The colour maths (dim, inverse, conceal) resolves against the *page*
   // rather than against the block's tint: the tint is translucent, and an
@@ -277,7 +279,10 @@ export function TerminalOutput(props: TerminalOutputProps): ReactElement {
     [document, look.family, look.size, palette],
   );
 
-  const outputProps: RichTextProps = { runs, style: codeTextStyle(look) };
+  const outputProps: RichTextProps = {
+    runs,
+    style: codeTextStyle(look, wrap),
+  };
   if (!wrap) outputProps.wrap = false;
 
   const lineCount = document.lines.length;

package/src/three/canvas.ts

@@ -3,7 +3,9 @@
 //
 // The division of labour: `<glarea>` owns everything that is renderer
 // internals — the child X window on a GL visual, the context, the frame
-// clock, the swap — and exposes it as `onCreated`/`onDraw`/`frameLoop`.
+// clock, the swap — and exposes it as `onCreated`/`onDraw`/`frameLoop`. On
+// a core with react-x11#545 the pointer over the surface is the tree's too,
+// dispatched at the `<glarea>` like the pointer over any node.
 // This component owns everything that is scene: the second reconciler
 // rendering `children` into the object graph, the store `useThree`/`useFrame`
 // read, the backend-appropriate renderer, picking, and post-processing.
@@ -24,7 +26,7 @@ import {
 } from 'react';
 import type { ReactNode, Ref } from 'react';
 import { useSupports } from 'react-x11';
-import type { ReactX11Elements } from 'react-x11';
+import type { ReactX11Elements, SyntheticEvent } from 'react-x11';
 // Loads the module the JSX augmentation in jsx.ts targets (see flow/index.ts
 // for the same pattern). Type-only, so it is erased.
 import type {} from 'react-x11/jsx-runtime';
@@ -42,9 +44,10 @@ import { IndirectRenderer } from './renderer-indirect.js';
 import { DirectRenderer } from './renderer-direct.js';
 import { PostProcessor } from './postprocess.js';
 import type { EffectComposer } from './passes.js';
-import { ScenePointer, type ThreeEvent } from './events.js';
+import { ForwardedPointer, ScenePointer, type ThreeEvent } from './events.js';
 import { sceneWantsPointer } from './raycast.js';
 import { now, warn } from './globals.js';
+import { scaleOf } from '../internal/units.js';
 
 /**
  * Failures that mean "one thing in this scene is broken", not "this machine
@@ -64,12 +67,43 @@ type GlAreaProps = ReactX11Elements['glarea'];
 /** The glarea node surface this component reaches through its ref. */
 interface SurfaceNode {
   requestFrame?: () => void;
+  /** `true` where core dispatches the pointer over the surface at this node,
+   *  through the tree (react-x11#545); absent on a core that does not. */
+  forwardsPointer?: boolean;
+  /** The node's box, which is the surface's: device pixels, in the owning
+   *  window's space. */
+  abs?: { x: number; y: number };
   window?: {
+    /** The X window's id — the Cocoa backend's surface is a layer, and has
+     *  none. */
+    id?: unknown;
     on(name: string, handler: (event: { x: number; y: number }) => void): void;
+    /** The cursor X shows over the window. The Cocoa backend's layer has
+     *  none: there the only cursor is the owning window's, and core's. */
     setCursor?(cursor: string | null): void;
   } | null;
 }
 
+/**
+ * A pointer event where the scene measures it: device pixels from the
+ * surface's corner, as the surface's own X window reports them. Core hands a
+ * handler the point in the window's logical pixels — divided by the node's
+ * scale — while the surface covers the node's box, `abs`, in device pixels:
+ * so the point goes back to device pixels and the box's corner comes off.
+ * (The content box's corner would be out by any padding or border, which the
+ * surface covers too.)
+ */
+function surfacePoint(
+  node: SurfaceNode | null,
+  ev: { x: number; y: number },
+): { x: number; y: number } {
+  const scale = scaleOf(node);
+  return {
+    x: ev.x * scale - (node?.abs?.x ?? 0),
+    y: ev.y * scale - (node?.abs?.y ?? 0),
+  };
+}
+
 interface DrawInfo {
   width: number;
   height: number;
@@ -119,6 +153,8 @@ interface CanvasKit {
   store: ThreeStore;
   container: SceneContainer;
   pointer: ScenePointer;
+  /** The pointer as core forwards it, which the surface's handlers feed. */
+  forwarded: ForwardedPointer;
   renderer: IndirectRenderer | DirectRenderer | null;
   post: PostProcessor | null;
   gl: unknown;
@@ -148,6 +184,9 @@ export function Canvas({
   const supportsShaders = useSupports('shaders');
   const [error, setError] = useState<Error | null>(null);
   const areaRef = useRef<unknown>(null);
+  // The hovered object's cursor, where the surface cannot wear it itself
+  // (`forwarded` below).
+  const [sceneCursor, setSceneCursor] = useState<string | null>(null);
 
   // Everything with the canvas's lifetime, made once. The camera the scene
   // starts with is the default one; `<perspectiveCamera makeDefault>`
@@ -193,6 +232,23 @@ export function Canvas({
           missedRef.current?.(event);
         },
       }),
+      // Where a hovered object's cursor goes. An X window wears a cursor of
+      // its own, and X shows it over the window — or, while it is null, the
+      // parent's, which is core's — so on X11 the scene's goes straight
+      // onto the surface: on at once, and off again onto whatever the tree
+      // asked for. The Cocoa backend's surface is a layer, and there the
+      // only cursor is the window's, which core puts on from the style of
+      // the node under the pointer and remembers having put on. Set behind
+      // core's back, it would outlast the hover wherever core saw nothing
+      // to change. So there the scene's becomes the `<glarea>`'s own
+      // `cursor`, and core applies it like any other: from the motion after
+      // the one the scene heard, because core picks the window's cursor
+      // before it dispatches the motion.
+      forwarded: new ForwardedPointer((cursor) => {
+        const surface = (areaRef.current as SurfaceNode | null)?.window;
+        if (typeof surface?.setCursor === 'function') surface.setCursor(cursor);
+        else setSceneCursor(cursor);
+      }),
       renderer: null,
       post: null,
       gl: null,
@@ -359,14 +415,24 @@ export function Canvas({
       clock.delta = delta;
       store.runFrames(store.getState(), delta);
 
-      // pointer events are only worth selecting on the X window when
-      // something in the scene listens — checked when the tree said it
-      // changed, attached the first time it is true
+      // The pointer is only worth taking when something in the scene
+      // listens — checked when the tree said it changed, attached the first
+      // time it is true. Where core forwards it (react-x11#545) it comes from
+      // the surface's own handlers and nowhere else: a listener on the
+      // surface's X window would select the events there, and X would
+      // deliver every press, and the wheel, to that window rather than to
+      // the tree. An older core delivers nothing over the surface, so there
+      // it is the X window's own events — X11 only, since the Cocoa surface
+      // is a layer, with no X window id and no pointer events of its own.
       if (store.eventsDirty) {
         store.eventsDirty = false;
         if (!kit.pointer.attached && sceneWantsPointer(kit.scene.children)) {
           const node = areaRef.current as SurfaceNode | null;
-          if (node?.window) kit.pointer.attach(node.window);
+          if (node?.forwardsPointer === true) {
+            kit.pointer.attach(kit.forwarded);
+          } else if (node?.window && typeof node.window.id === 'number') {
+            kit.pointer.attach(node.window);
+          }
         }
       }
 
@@ -425,6 +491,31 @@ export function Canvas({
     [kit],
   );
 
+  // The pointer core dispatches at the surface, into the scene — through
+  // `kit.forwarded`, which passes it on only once the frame loop attached
+  // the scene to it. Where the pointer comes from the surface's X window
+  // instead, these hear nothing of it and pass nothing on.
+  const pointerHandlers = useMemo(() => {
+    const at = (ev: SyntheticEvent) =>
+      surfacePoint(areaRef.current as SurfaceNode | null, ev);
+    return {
+      onMouseDown: (ev: SyntheticEvent) => {
+        // Held until the release, as X's grab held it for the surface's
+        // window: a drag that leaves the canvas still reaches the scene.
+        if (kit.forwarded.emit('mousedown', at(ev))) ev.capturePointer();
+      },
+      onMouseMove: (ev: SyntheticEvent) => {
+        kit.forwarded.emit('mousemove', at(ev));
+      },
+      onMouseUp: (ev: SyntheticEvent) => {
+        kit.forwarded.emit('mouseup', at(ev));
+      },
+      onMouseLeave: (ev: SyntheticEvent) => {
+        kit.forwarded.emit('mouseout', at(ev));
+      },
+    };
+  }, [kit]);
+
   if (error && fallback !== undefined) {
     return hx(
       'box',
@@ -440,12 +531,15 @@ export function Canvas({
 
   return hx('glarea', {
     ref: areaRef as Ref<never>,
-    style,
+    // over the canvas's own, as a child's cursor is over its parent's: the
+    // object is what the pointer is on
+    style: sceneCursor === null ? style : [style, { cursor: sceneCursor }],
     clearColor,
     glx,
     frameLoop: loop,
     onCreated: handleCreated as GlAreaProps['onCreated'],
     onDraw: handleDraw as GlAreaProps['onDraw'],
     onError: handleError,
+    ...pointerHandlers,
   });
 }

package/src/three/events.ts

@@ -1,8 +1,14 @@
-// Pointer events for the scene: X mouse events on the `<glarea>`'s child
-// window, raycast against the CPU-side geometry, dispatched to the object
-// they hit and bubbled up its ancestors — a port of react-x11's
-// `src/pointer3d.js` onto the object graph, with the event shaped the way
-// r3f handlers expect (`object`, `point`, `distance`, `stopPropagation`).
+// Pointer events for the scene: the pointer over the `<glarea>`, raycast
+// against the CPU-side geometry, dispatched to the object it hit and
+// bubbled up its ancestors — a port of react-x11's `src/pointer3d.js` onto
+// the object graph, with the event shaped the way r3f handlers expect
+// (`object`, `point`, `distance`, `stopPropagation`).
+//
+// Where the pointer comes from is the canvas's to say (canvas.ts): the
+// `<glarea>`'s own handlers, on a core that dispatches the pointer over a
+// surface through the tree (react-x11#545), or the surface's child X window
+// on one that does not. Either way it arrives here as a `PointerSource`, in
+// device pixels from the surface's corner.
 import type { Mesh, Object3D, Scene } from './objects.js';
 import { raycast } from './raycast.js';
 import type { RayHit } from './raycast.js';
@@ -37,6 +43,40 @@ export interface PointerSource {
   setCursor?(cursor: string | null): void;
 }
 
+/**
+ * The pointer a core dispatches through the tree, as a `PointerSource`: the
+ * canvas's `<glarea>` handlers `emit` what they are handed, already in the
+ * surface's device pixels, and the scene subscribes to it as it would to a
+ * window. Where a hovered object's cursor goes is the canvas's to say, as
+ * where the pointer comes from is: onto the surface's own X window, or,
+ * where the surface is a layer that cannot wear one, into the `<glarea>`'s
+ * style.
+ */
+export class ForwardedPointer implements PointerSource {
+  private handlers = new Map<string, (event: NativeMouse) => void>();
+  private applyCursor: (cursor: string | null) => void;
+
+  constructor(applyCursor: (cursor: string | null) => void) {
+    this.applyCursor = applyCursor;
+  }
+
+  on(name: string, handler: (event: NativeMouse) => void): void {
+    this.handlers.set(name, handler);
+  }
+
+  /** Hand an event to the scene: false while nothing has subscribed. */
+  emit(name: string, event: NativeMouse): boolean {
+    const handler = this.handlers.get(name);
+    if (!handler) return false;
+    handler(event);
+    return true;
+  }
+
+  setCursor(cursor: string | null): void {
+    this.applyCursor(cursor);
+  }
+}
+
 /** The dispatch path: the object that was hit, then its ancestors. */
 function bubblePath(node: Object3D, scene: Scene): Object3D[] {
   const path: Object3D[] = [];
@@ -51,10 +91,10 @@ function bubblePath(node: Object3D, scene: Scene): Object3D[] {
 }
 
 /**
- * One canvas's pointer pipeline. The canvas attaches it to the surface's
- * child X window once anything in the scene listens; hover and press state
- * live here so enter/leave pairs and click (down and up on the same object)
- * come out right.
+ * One canvas's pointer pipeline. The canvas attaches it to where the pointer
+ * comes from — the tree, or the surface's child X window — once anything in
+ * the scene listens; hover and press state live here so enter/leave pairs
+ * and click (down and up on the same object) come out right.
  */
 export class ScenePointer {
   private scene: Scene;

package/src/tree/index.ts

@@ -919,6 +919,24 @@ export function Tree<T = TreeItem>({
   const index = heights;
   index.sync(rows, estimate);
 
+  /**
+   * 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).
+   */
+  const measureDrawn = useCallback(
+    (id: TreeItemId, at: number): boolean => {
+      const drawn = rowNodes.current.get(id);
+      if (!drawn || drawn.at !== at) return false;
+      heights.measure(id, at, drawn.node.abs.height / scaleOf(drawn.node));
+      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 `<Table>` (`../internal/window.ts`). */
   const win = useVirtualWindow({
@@ -934,6 +952,7 @@ export function Tree<T = TreeItem>({
     threshold: catchup?.threshold ?? SKELETON_THRESHOLD,
     burstBudget: catchup?.burst ?? BURST_BUDGET,
     settleBudget: catchup?.settle ?? SETTLE_BUDGET,
+    measure: measureDrawn,
   });
   const { view, viewRef } = win;
   /** Whether the fast-scroll pill is up — kept across renders so it does not