@react-x11/components 0.7.1 → 0.8.0

package/src/internal/scroll.ts

@@ -44,6 +44,7 @@ import type { DrawnNode, ScrollableNode } from 'react-x11';
 import type { RowHeights, RowKey } from './heights.js';
 import { afterLayout, cancelAfterLayout } from './timers.js';
 import type { LayoutTick } from './timers.js';
+import { scaleOf } from './units.js';
 
 /** All a reveal needs of a row: `<TreeRow>` and `<TableRow>` are both this. */
 interface Keyed {
@@ -148,13 +149,17 @@ export function useReveal(sources: RevealSources): Reveal {
   const scrollTo = useCallback((y: number): void => {
     const box = src.current.box.current;
     if (!box) return;
+    // `y` is logical, like everything the reveal computes with; the raw
+    // node properties are device (../internal/units.ts), divided here so the
+    // clamp and the early-out speak the caller's unit.
+    const s = scaleOf(box);
     // Clamped here rather than left to the container, so what comes back on
     // `onScroll` is the number that was asked for and can be recognised.
     const to = Math.min(
       Math.max(0, y),
-      Math.max(0, box.contentHeight - box.abs.height),
+      Math.max(0, (box.contentHeight - box.abs.height) / s),
     );
-    if (to === box.scrollY) return;
+    if (to === box.scrollY / s) return;
     asked.current = to;
     box.scrollTo({ y: to });
   }, []);
@@ -166,9 +171,10 @@ export function useReveal(sources: RevealSources): Reveal {
     const box = src.current.box.current;
     const want = owedShift.current;
     if (!box || want === 0) return;
-    const was = box.scrollY;
+    const s = scaleOf(box);
+    const was = box.scrollY / s;
     scrollTo(was + want);
-    owedShift.current = want - (box.scrollY - was);
+    owedShift.current = want - (box.scrollY / s - was);
   }, [scrollTo]);
 
   const nudge = useCallback(
@@ -208,7 +214,10 @@ export function useReveal(sources: RevealSources): Reveal {
         settled.current = null;
         return;
       }
-      const viewport = box.abs.height;
+      // Logical, like the height index the unmounted arithmetic mixes with —
+      // the raw properties are device (../internal/units.ts).
+      const s = scaleOf(box);
+      const viewport = box.abs.height / s;
       if (viewport <= 0) return; // nothing laid out to scroll inside yet
 
       // How far the row is outside the pane, in pixels of scrolling. The row's
@@ -223,16 +232,20 @@ export function useReveal(sources: RevealSources): Reveal {
           : null;
       const placed = mounted
         ? {
-            above: box.abs.y - mounted.abs.y,
-            below: mounted.abs.y + mounted.abs.height - (box.abs.y + viewport),
-            height: mounted.abs.height,
+            above: (box.abs.y - mounted.abs.y) / s,
+            below:
+              (mounted.abs.y +
+                mounted.abs.height -
+                (box.abs.y + box.abs.height)) /
+              s,
+            height: mounted.abs.height / s,
           }
         : {
-            above: box.scrollY - heights.offsetAt(at),
+            above: box.scrollY / s - heights.offsetAt(at),
             below:
               heights.offsetAt(at) +
               heights.heightAt(at) -
-              (box.scrollY + viewport),
+              (box.scrollY / s + viewport),
             height: heights.heightAt(at),
           };
       /**
@@ -254,8 +267,8 @@ export function useReveal(sources: RevealSources): Reveal {
        */
       let certain = mounted !== null || heights.isMeasured(at);
       if (certain && heights.hasMeasurements()) {
-        const from = Math.min(at, heights.indexAt(box.scrollY));
-        const to = Math.max(at, heights.indexAt(box.scrollY + viewport));
+        const from = Math.min(at, heights.indexAt(box.scrollY / s));
+        const to = Math.max(at, heights.indexAt(box.scrollY / s + viewport));
         for (let i = from; i <= to && certain; i++) {
           certain = heights.isMeasured(i);
         }
@@ -283,8 +296,10 @@ export function useReveal(sources: RevealSources): Reveal {
       }
       // A move the pane cannot make yet leaves the debt standing: the layout
       // that admits the rows just appended is the one that will let it finish.
+      // `was` in device, compared against the same raw property — whether it
+      // moved is unit-free; the request itself goes through logical scrollTo.
       const was = box.scrollY;
-      scrollTo(was + move);
+      scrollTo(was / s + move);
       if (box.scrollY !== was) {
         stuck.current = null; // it moved; the scroll it caused brings us back
         return;
@@ -323,8 +338,12 @@ export function useReveal(sources: RevealSources): Reveal {
 
   const heard = useCallback((scrollY: number): void => {
     // A scroll this component did not ask for ends the whole chase, not just
-    // the outstanding half of it.
-    if (scrollY !== asked.current) {
+    // the outstanding half of it. Within half a pixel is ours: the payload
+    // is the device offset divided back to logical, and at a fractional
+    // scale that round trip need not be bit-identical to what was asked.
+    const ours =
+      asked.current !== null && Math.abs(scrollY - asked.current) < 0.5;
+    if (!ours) {
       owed.current = null;
       settled.current = null;
       owedShift.current = 0;

package/src/internal/units.ts

@@ -0,0 +1,34 @@
+// One logical pixel is `scale` device pixels — react-x11's docs/scale.md.
+//
+// **Shared between `<Tree>` and `<Table>`** like the rest of this directory;
+// see the header of `./heights.ts` for why it is internal rather than a
+// shared module with a subpath.
+//
+// The virtualizers keep their whole model in logical pixels: style lengths,
+// the `onScroll`/`onViewport` payloads, the height index, and the props
+// (`rowHeight`, `estimatedRowHeight`) are all logical. But the **raw node
+// properties** they read back between events — `scrollY`, `contentHeight`,
+// `abs` — are device pixels. At scale 1 the two units coincide, which is how
+// every harness test and every Xvfb check passed while a retina display
+// doubled every raw read: the offset re-read after layout landed at twice
+// the logical value, the slice was rebuilt a viewport below where the user
+// was looking, and the table example went blank on a flick (and stayed
+// blank after an append-and-reveal). Every raw read goes through this
+// divisor so the arithmetic stays in one unit.
+//
+// **A pointer is the other half of this.** An event's `x`/`y` are logical,
+// so a gesture measured against a laid-out box wants the box in that unit:
+// `node.getClientRects()[0]`, which is `abs` already divided, rather than
+// `abs` and a multiply. `<ColorPicker>` compared the two directly and put
+// its thumb a quarter of the way from the corner on every retina panel.
+// Reach for `scaleOf` where there is no rect to ask for — a raw `scrollY`,
+// a `contentHeight`, a constant that never passes through a style.
+//
+// `scale` is on every retained node at run time but not on the public
+// `DrawnNode` type — hence the structural read, and `object` rather than
+// `{ scale?: unknown }` in the signature: a weak type with no property in
+// common with `DrawnNode` fails TS2559 at every call site.
+export function scaleOf(node: object | null | undefined): number {
+  const s = node ? (node as { scale?: unknown }).scale : undefined;
+  return typeof s === 'number' && s > 0 ? s : 1;
+}

package/src/internal/window.ts

@@ -48,6 +48,7 @@ import type { ScrollableNode } from 'react-x11';
 import type { RowHeights, RowKey } from './heights.js';
 import { cancelLater, later } from './timers.js';
 import type { DelayTick } from './timers.js';
+import { scaleOf } from './units.js';
 
 /** All this needs of a row — `TreeRow` and `TableRow` are both this. */
 interface Keyed {
@@ -298,7 +299,6 @@ 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;
-      (globalThis as any).__scrolls = ((globalThis as any).__scrolls ?? 0) + 1;
       const now = Date.now();
       const s = vel.current;
       const dt = now - s.t;
@@ -332,7 +332,9 @@ export function useVirtualWindow(inputs: VirtualWindowInputs): VirtualWindow {
     const { box, virtualizing } = inp.current;
     const node = box.current;
     if (!node || !virtualizing) return;
-    const y = node.scrollY;
+    // The raw property is device pixels; the viewport model — like the
+    // `onScroll` payload `scrolled` is fed — is logical (../internal/units.ts).
+    const y = node.scrollY / scaleOf(node);
     setView((prev) => (prev.top === y ? prev : { ...prev, top: y }));
   }, []);
 

package/src/table/index.ts

@@ -70,6 +70,7 @@ import {
   cancelLater,
   later,
 } from '../internal/timers.js';
+import { scaleOf } from '../internal/units.js';
 import type { DelayTick } from '../internal/timers.js';
 import { useReveal } from '../internal/scroll.js';
 import {
@@ -953,7 +954,10 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
   const syncScroll = useCallback((): void => {
     const box = body.current;
     if (!box) return;
-    const x = box.scrollX;
+    // Device on the raw property; the header margin it feeds is a style
+    // length, logical — the same division every raw read here makes
+    // (../internal/units.ts).
+    const x = box.scrollX / scaleOf(box);
     setScrollX((prev) => (prev === x ? prev : x));
     winSync();
   }, [winSync]);
@@ -992,13 +996,18 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
     ).total;
     const box = body.current;
     const rows = orderedRef.current;
-    const anchor = box ? heights.indexAt(box.scrollY) : 0;
+    const anchor = box ? heights.indexAt(box.scrollY / scaleOf(box)) : 0;
     let shift = 0;
     let changed = false;
     for (const [id, { node, at }] of rowNodes.current) {
       if (rows[at]?.id !== id) continue; // drawn against a list that moved
-      if (node.abs.width !== expected) continue;
-      const height = node.abs.height;
+      // `abs` is device; the resolved widths and the height index are
+      // logical. Within a pixel rather than exact: a fractional scale
+      // rounds the device width to the pixel grid, and the stale-width
+      // layouts this gate exists for are whole columns off, not fractions.
+      const s = scaleOf(node);
+      if (Math.abs(node.abs.width / s - expected) >= 1) continue;
+      const height = node.abs.height / s;
       const was = heights.heightAt(at);
       if (!heights.measure(id, at, height)) continue;
       changed = true;
@@ -1026,7 +1035,7 @@ export function Table<Row = any>(props: TableProps<Row>): ReactElement {
     if (uniform || !virtualizing) return false;
     const box = body.current;
     if (!box) return false;
-    const anchor = heights.indexAt(box.scrollY);
+    const anchor = heights.indexAt(box.scrollY / scaleOf(box));
     const before = heights.offsetAt(anchor);
     if (!heights.adapt()) return false;
     reveal.nudge(heights.offsetAt(anchor) - before);

package/src/terminal/vt/node.ts

@@ -15,7 +15,7 @@ import type {
   MeasureConstraints,
   MeasuredSize,
 } from 'react-x11/node';
-import type { KeyboardEvent, MouseEvent, WheelEvent } from 'react-x11';
+import type { KeyboardEvent, MouseEvent, Rect, WheelEvent } from 'react-x11';
 import type { Style } from 'react-x11/style';
 import { Surface } from 'react-x11/ntk';
 import {
@@ -127,6 +127,21 @@ interface ClipboardLike {
 
 type Grid = { col: number; row: number };
 
+/** Where the grid is drawn and how big it is — `_gridGeometry`. */
+interface GridGeometry {
+  /** The top-left corner, in window coordinates, on whole pixels. */
+  x: number;
+  y: number;
+  cols: number;
+  rows: number;
+  /** `cols * cellWidth` and `rows * cellHeight`. */
+  width: number;
+  height: number;
+  /** Whether the whole grid lies inside the content box — the condition
+   *  under which it can be promised opaque. */
+  fits: boolean;
+}
+
 export class VtTermNode extends Node {
   private _term: XtermTerminal | null = null;
   private _disposables: XtermDisposable[] = [];
@@ -195,9 +210,11 @@ export class VtTermNode extends Node {
       this._paletteKey = key;
       this._palette = buildPalette(paletteColors(props));
       // The palette generation is a signature input, so the ordinary diff
-      // repaints every cell whose colours actually moved. Nothing else here
-      // needs to know a theme changed.
-      this._repaint();
+      // repaints every cell whose colours actually moved. The one thing
+      // outside the diff's reach is the padding ring around the grid — the
+      // node's own background, and outside the rect `_repaint` claims — so
+      // this is the claim that covers the whole node.
+      this._repaintAll('props');
     }
 
     const { family, size } = this._fontStyle();
@@ -205,7 +222,7 @@ export class VtTermNode extends Node {
       this._fonts = null;
       this._mirror.invalidate();
       this.invalidateMeasure('measure');
-      this._repaint();
+      this._repaintAll('props');
     }
     if (props.cursorBlink !== (prev.cursorBlink as boolean | undefined)) {
       this._syncBlink();
@@ -224,7 +241,17 @@ export class VtTermNode extends Node {
   // --- the emulator --------------------------------------------------------
 
   /**
-   * Subscribe to everything that means "the screen may look different".
+   * Subscribe to what means "the screen may look different".
+   *
+   * One event carries every change program output can make: `onWriteParsed`
+   * fires once per parsed batch, after the text, the scroll and the cursor
+   * move it caused have all landed in the buffer. `onScroll` fires once per
+   * scrolled *line* — a 300,000-line flood was 336,000 claims — and
+   * `onCursorMove` once per parse, and each only ever announced what
+   * `onWriteParsed` was about to; core coalesces the claims, but at 2% of a
+   * flood's wall time they were the untidiest thing in it. The scrolls this
+   * node performs itself — `handleWheel`, `scrollLines`, `_typed`, a drag
+   * past an edge — repaint on their own.
    *
    * Only render-relevant events: the component keeps `onData`, `onTitleChange`
    * and `onBell`, which are about the process rather than about pixels.
@@ -234,14 +261,14 @@ export class VtTermNode extends Node {
     this._term = term;
     this._mirror.invalidate();
     if (!term) return;
-    const dirty = (): void => this._repaint();
     this._disposables.push(
-      term.onWriteParsed(dirty),
-      term.onScroll(dirty),
-      term.onCursorMove(dirty),
+      term.onWriteParsed(() => this._repaint()),
       term.onResize(() => {
         this._mirror.invalidate();
-        this._repaint();
+        // The grid may have changed shape, and the strip a smaller one no
+        // longer covers owes its background — a fill that a claim inside
+        // the opaque rect would skip.
+        this._repaintAll('text');
       }),
       term.buffer.onBufferChange(() => {
         // The alternate screen is a different buffer with a different
@@ -451,18 +478,95 @@ export class VtTermNode extends Node {
 
   // --- painting ------------------------------------------------------------
 
+  /**
+   * The screen may look different: claim the grid.
+   *
+   * The grid rect rather than a tighter one, because which cells are dirty
+   * is not known until the diff runs inside paint — damage is a clip and a
+   * cull bound rather than a promise to redraw everything, and the diff still
+   * decides what is *rendered*, which is where the cost is. And the rect
+   * rather than the node: a node claim is inflated by a pixel of slop that
+   * lies outside `opaqueRect()`, so the fills core skips under an opaque
+   * pass — the window's background and this node's own, 0.7ms of a 6ms
+   * Cocoa frame — would be painted after all. Before the first paint there
+   * is no cover to promise and the node is the claim.
+   */
   private _repaint(): void {
     if (this.destroyed) return;
-    // The grid rect, not a tighter one: which cells are dirty is not known
-    // until the diff runs inside paint. Damage is a clip and a cull bound
-    // rather than a promise to redraw everything, and the diff still decides
-    // what is *rendered* — which is where the cost is.
-    this.invalidate(false, this, 'text');
+    this.invalidate(false, this.opaqueRect() ?? this, 'text');
+  }
+
+  /** Everything, ring included: the palette or the grid's shape changed. */
+  private _repaintAll(reason: 'props' | 'text'): void {
+    if (this.destroyed) return;
+    this.invalidate(false, this, reason);
+  }
+
+  /**
+   * Where the grid goes and how big it is, in window coordinates.
+   *
+   * The content box's corner and as many whole cells as fit both the box and
+   * the emulator — which resizes a beat later, through the component and off
+   * the paint stack, so until it catches up the grid is the intersection.
+   * The corner is snapped to whole pixels: cells are integers, the composite
+   * is a copy of whole pixels, and a half-pixel of drift against the box is
+   * invisible where a resampled composite is not. `fits` is whether those
+   * cells lie inside the box on whole pixels, which is the condition for
+   * promising them opaque; a box smaller than one cell still draws one,
+   * clipped, and promises nothing.
+   */
+  private _gridGeometry(fonts: FontSet, term: XtermTerminal): GridGeometry {
+    const box = this.contentBox();
+    const { cellWidth, cellHeight } = fonts.metrics;
+    const cols = Math.max(
+      1,
+      Math.min(Math.floor(box.width / cellWidth), term.cols),
+    );
+    const rows = Math.max(
+      1,
+      Math.min(Math.floor(box.height / cellHeight), term.rows),
+    );
+    const width = cols * cellWidth;
+    const height = rows * cellHeight;
+    return {
+      x: Math.round(box.x),
+      y: Math.round(box.y),
+      cols,
+      rows,
+      width,
+      height,
+      fits:
+        Number.isInteger(box.x) &&
+        Number.isInteger(box.y) &&
+        width <= box.width &&
+        height <= box.height,
+    };
+  }
+
+  /**
+   * The grid — what the renderer writes every pixel of, every paint.
+   *
+   * Core's word for it (react-x11#497): a pass inside this rect is painted
+   * without the fills that would be under it, and the composite in
+   * `present()` replaces those pixels rather than blending over them. Null
+   * until the first paint has built a renderer — the mock backend never
+   * does, and a promise about pixels nothing will draw is a hole where the
+   * background should be — null without fonts or an emulator, when
+   * `paintContent` draws nothing, and null when the grid does not fit the
+   * box on whole pixels, because the answer is taken literally: an
+   * antialiased edge is not opaque.
+   */
+  override opaqueRect(): Rect | null {
+    const term = this._term;
+    if (!term || !this._renderer) return null;
+    const fonts = this._fontSet();
+    if (!fonts) return null;
+    const grid = this._gridGeometry(fonts, term);
+    if (!grid.fits) return null;
+    return { x: grid.x, y: grid.y, width: grid.width, height: grid.height };
   }
 
-  override paint(ctx: Context2D): void {
-    // background, border, and the clip to this node's rect
-    super.paint(ctx);
+  override paintContent(ctx: Context2D): void {
     const fonts = this._fontSet();
     if (!fonts) return;
     // Before the `term` check on purpose: the component sizes the emulator it
@@ -477,14 +581,8 @@ export class VtTermNode extends Node {
     const renderer = this._ensureRenderer(cell);
     if (!renderer) return; // mock backend: no pixel API, so nothing to draw
 
-    const box = this.contentBox();
-    const { cellWidth, cellHeight } = fonts.metrics;
-    const fitCols = Math.max(1, Math.floor(box.width / cellWidth));
-    const fitRows = Math.max(1, Math.floor(box.height / cellHeight));
-    // The emulator resizes a beat later (through the component, off this
-    // stack), so draw the intersection until it catches up.
-    const cols = Math.max(1, Math.min(fitCols, term.cols));
-    const rows = Math.max(1, Math.min(fitRows, term.rows));
+    const grid = this._gridGeometry(fonts, term);
+    const { cols, rows } = grid;
     this._cols = cols;
     this._rows = rows;
 
@@ -512,8 +610,8 @@ export class VtTermNode extends Node {
 
     const result = this._mirror.diff(snapshot);
     renderer.begin(cell, {
-      originX: box.x,
-      originY: box.y,
+      originX: grid.x,
+      originY: grid.y,
       cols,
       rows,
       metrics: fonts.metrics,
@@ -838,6 +936,7 @@ export class VtTermNode extends Node {
     if (!term) return;
     if (term.buffer.active.viewportY !== term.buffer.active.baseY) {
       term.scrollToBottom();
+      this._repaint();
     }
     if (this._selection) this.clearSelection();
   }

package/src/terminal/vt/renderer.ts

@@ -22,6 +22,15 @@
 // `ctx.drawGlyphs` per colour (one `CompositeGlyphs` covering every run in
 // the call). That is what keeps "the terminal scrolled" at a handful of
 // requests rather than a few thousand.
+//
+// The retained renderer's composite is a `copy`, not a blend. Every cell of
+// the grid is filled before it is shown, so replacing the window's pixels
+// with the surface's is the same picture as compositing over them — and
+// saying so is what lets the Cocoa backend send it as a row memcpy instead
+// of building a CGImage and blending it (react-x11#501: 0.42ms against 1.37
+// for a 125x45 grid at 2x), and X11 as `PictOp.Src`. Together with the
+// node's `opaqueRect()` it is why a streaming frame no longer pays for
+// pixels nobody sees.
 import type { CellMetrics, GlyphRun } from './fonts.js';
 
 /** What `ctx.drawGlyphs` takes: a run and where its baseline starts. */
@@ -34,6 +43,10 @@ export interface PositionedRun {
 /** The slice of ntk's 2d context the renderers draw through. */
 export interface CellContext {
   fillStyle: unknown;
+  /** Canvas's compositing operator. `'copy'` replaces rather than blends;
+   *  a backend that cannot draw it refuses the assignment, so read it back
+   *  rather than assume. Absent on a context with no notion of it. */
+  globalCompositeOperation?: string;
   fillRect(x: number, y: number, w: number, h: number): void;
   fillRects?(rects: number[]): void;
   drawGlyphs?(op: number, src: unknown, positioned: PositionedRun[]): void;
@@ -459,11 +472,19 @@ export class RetainedRenderer extends BatchingRenderer {
     const width = frame.cols * frame.metrics.cellWidth;
     const height = frame.rows * frame.metrics.cellHeight;
     if (width <= 0 || height <= 0) return;
-    // The whole grid, one composite. It is the whole grid rather than the
-    // frame's dirty bands because `Node.paint` has just filled this node's
-    // background across everything the damage clip covers, and the damage we
-    // claimed is the grid rect — the diff decides what is *rendered*, which
-    // is where the cost is, and the blit is one request either way.
+    // The whole grid, one composite, clipped by the pass: the damage the
+    // node claimed is the grid rect, the diff decided what was *rendered*
+    // into the surface — which is where the cost is — and the composite is
+    // one request either way.
+    //
+    // As a `copy`: the grid is opaque, every cell filled, so replacing the
+    // pixels under it is the same picture as blending over them, and it is
+    // the shape the Cocoa backend turns into a row memcpy (react-x11#501)
+    // and X11 into `PictOp.Src`. Context state, on the window's context, so
+    // it goes back afterwards; a backend that cannot draw it refuses the
+    // assignment and blends, which is the same pixels.
+    const op = ctx.globalCompositeOperation;
+    ctx.globalCompositeOperation = 'copy';
     ctx.drawImage(
       surface,
       0,
@@ -475,6 +496,7 @@ export class RetainedRenderer extends BatchingRenderer {
       width,
       height,
     );
+    ctx.globalCompositeOperation = op ?? 'source-over';
     this.count('blits');
   }
 

package/src/tree/index.ts

@@ -70,6 +70,7 @@ import {
   later,
 } from '../internal/timers.js';
 import type { DelayTick } from '../internal/timers.js';
+import { scaleOf } from '../internal/units.js';
 import { useReveal } from '../internal/scroll.js';
 import {
   BURST_BUDGET,
@@ -1012,12 +1013,14 @@ export function Tree<T = TreeItem>({
     // under it, so their total change is what has to come back out of the
     // scroll offset — otherwise measuring a row you have already scrolled
     // past yanks the list under the pointer.
-    const anchor = box ? idx.indexAt(box.scrollY) : 0;
+    const anchor = box ? idx.indexAt(box.scrollY / scaleOf(box)) : 0;
     let shift = 0;
     let changed = false;
     for (const [id, { node, at }] of rowNodes.current) {
       if (rows[at]?.id !== id) continue; // drawn against a list that has moved
-      const height = node.abs.height;
+      // `abs` is device; the height index — like every style length — is
+      // logical (../internal/units.ts).
+      const height = node.abs.height / scaleOf(node);
       const was = idx.heightAt(at);
       if (!idx.measure(id, at, height)) continue;
       changed = true;
@@ -1043,7 +1046,7 @@ export function Tree<T = TreeItem>({
     if (!virtualizing) return false;
     const box = scroller.current;
     if (!box) return false;
-    const anchor = heights.indexAt(box.scrollY);
+    const anchor = heights.indexAt(box.scrollY / scaleOf(box));
     const before = heights.offsetAt(anchor);
     if (!heights.adapt()) return false;
     reveal.nudge(heights.offsetAt(anchor) - before);
@@ -1075,7 +1078,6 @@ export function Tree<T = TreeItem>({
     let look: DelayTick = null;
     let tries = 0;
     const pass = (): void => {
-      (globalThis as any).__ticks = ((globalThis as any).__ticks ?? 0) + 1;
       // `measureRows` first, and its answer handed on: a pass that moved the
       // heights has not settled anything, and an owed scroll judged against
       // the layout it is about to invalidate is not owed any less. During a