@react-x11/components 0.11.0 → 0.12.0

package/src/html/surfaces.ts

@@ -8,7 +8,7 @@
 import { Surface } from 'react-x11/ntk';
 
 /** ntk's `Surface`, as this uses it. */
-interface SurfaceLike {
+export interface SurfaceLike {
   getContext(kind: '2d'): unknown;
   destroy?(): void;
 }
@@ -18,6 +18,26 @@ interface Kept {
   pixels: number;
 }
 
+/**
+ * A transparent surface of its own, the caller's to destroy once drawn: a
+ * masked element is drawn on one and composited. Null where the backend
+ * has no offscreen surface — the headless mock.
+ */
+export function newSurface(
+  app: unknown,
+  width: number,
+  height: number,
+): SurfaceLike | null {
+  try {
+    return new Surface(app as never, {
+      width,
+      height,
+    }) as unknown as SurfaceLike;
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Surfaces by key, the least recently drawn given up first once they hold
  * more than `budget` pixels. One too large for a quarter of the budget is

package/src/internal/window.ts

@@ -99,6 +99,34 @@ const VEL_GAP_MS = 250;
  *  settle. */
 const FAST_V = 1.5;
 
+/**
+ * The window's time and its timer: what a scroll's speed is measured with,
+ * and what decides it has stopped (`IDLE_MS`) and paces the band's growth
+ * after it (`GROW_MS`). A test holds both (`holdClock` in
+ * test/held-clock.ts). On the real clock a runner that spends longer than
+ * `IDLE_MS` over one step of a flick ends the flick there, and the settle
+ * that follows measures the rows and moves the scroll by what they
+ * measured — outside the `act` the step ran in, so a look at the rows finds
+ * the new offset against the layout before it, every row a few pixels off.
+ * A test of a flick cannot tell that from rows that moved.
+ *
+ * Not the catch-up's clock: `catchupSince` is epoch milliseconds, which a
+ * scroll hint is handed as `since`. The shape of the map's `glideClock`,
+ * and exported from this module only, which has no subpath: this is for
+ * the tests.
+ */
+export const windowClock = {
+  now(): number {
+    return Date.now();
+  },
+  arm(step: () => void, ms: number): DelayTick {
+    return later(step, ms);
+  },
+  disarm(handle: DelayTick): void {
+    cancelLater(handle);
+  },
+};
+
 /** More rows than this entering the window in one render is a flood — a
  *  teleport or a hard flick — and floods build skeletons first. An ordinary
  *  notch brings in a handful and never trips this. */
@@ -302,7 +330,7 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
     // estimate adaptation) runs on.
     bump((n) => n + 1);
     if (wantsGrowth.current) {
-      idleTimer.current = later(tick, GROW_MS);
+      idleTimer.current = windowClock.arm(tick, GROW_MS);
     }
   }, []);
 
@@ -312,7 +340,7 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
       // one has no slice to rebuild, and re-rendering it on a scroll it
       // already drew would be work for nothing.
       if (!inp.current.virtualizing) return;
-      const now = Date.now();
+      const now = windowClock.now();
       const s = vel.current;
       const dt = now - s.t;
       if (dt > 0 && dt < VEL_GAP_MS) {
@@ -325,8 +353,8 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
       s.t = now;
       s.top = top;
       active.current = true;
-      cancelLater(idleTimer.current);
-      idleTimer.current = later(tick, IDLE_MS);
+      windowClock.disarm(idleTimer.current);
+      idleTimer.current = windowClock.arm(tick, IDLE_MS);
       setView((prev) => (prev.top === top ? prev : { ...prev, top }));
     },
     [tick],
@@ -365,13 +393,13 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
   // idle delay to fill them in would be a visible pause.
   useEffect(() => {
     if (hasSkeletons.current) {
-      cancelLater(idleTimer.current);
-      idleTimer.current = later(tick, GROW_MS);
+      windowClock.disarm(idleTimer.current);
+      idleTimer.current = windowClock.arm(tick, GROW_MS);
     } else if (wantsGrowth.current && idleTimer.current === null) {
-      idleTimer.current = later(tick, IDLE_MS);
+      idleTimer.current = windowClock.arm(tick, IDLE_MS);
     }
   });
-  useEffect(() => () => cancelLater(idleTimer.current), []);
+  useEffect(() => () => windowClock.disarm(idleTimer.current), []);
 
   const {
     heights,

package/src/richtext/node.ts

@@ -129,6 +129,13 @@ export interface TextRun {
    *  either side of an inline box's margin, border or padding. ntk's, from
    *  8.14.2. */
   shapeApart?: boolean;
+  /** Kerned with the runs either side of it though its letter spacing is
+   *  not theirs: the spacing a justified line or `word-spacing` gives a
+   *  space is in addition to kerning and no element's (CSS Text 3, 7.2,
+   *  7.3), where a run of an element's own letter spacing is shaped apart,
+   *  as a browser shapes it. ntk's, from 8.15.0; CoreText takes a spaced
+   *  glyph's spacing in place of its pairs either way. */
+  kernAcross?: boolean;
 }
 
 /** The props `<richtext>` takes. */