@react-x11/components 0.7.0 → 0.8.0

package/src/color-picker/ColorPicker.ts

@@ -491,7 +491,16 @@ export function ColorPicker(props: ColorPickerProps): ReactElement {
     node: DrawnNode | null,
     ev: MouseEvent,
   ): { x: number; y: number } | null => {
-    const box = node?.abs;
+    // `getClientRects()`, not `abs`. `abs` is **device** pixels and an
+    // event's `x`/`y` are **logical** — react-x11's docs/scale.md — so
+    // subtracting one from the other is only right at scale 1. On a retina
+    // panel a press at the middle of this box read as a press a quarter of
+    // the way in from its corner: the thumb sat near the corner however the
+    // pointer moved, and the far side of every axis was unreachable. The
+    // client rect is the same box already divided by the node's scale,
+    // which is the unit the pointer arrives in, so the arithmetic below is
+    // the arithmetic it always was.
+    const [box] = node?.getClientRects() ?? [];
     if (!box?.width || !box.height) return null;
     return {
       x: clamp01((ev.x - box.x) / box.width),
@@ -658,6 +667,41 @@ export function ColorPicker(props: ColorPickerProps): ReactElement {
     onKeyDown: focusable ? handleKey : undefined,
   });
 
+  /**
+   * The gradient and its border, as one element *under* the thumb.
+   *
+   * Core paints a node's children first and its border after them, so a
+   * border on the box the thumb lives in is painted across the thumb — the
+   * grey line over the white handle. On a sibling below it, the thumb wins,
+   * which is the order a handle wants: it is the thing being pointed at.
+   *
+   * It fixes the geometry too. An absolutely positioned child is laid out
+   * from its parent's *padding* box, so a border on the axis box shifted
+   * every thumb by its width — a strip handle overhung the top by 1px and
+   * the bottom by 3, and sat 1px right of the colour it was naming. Here
+   * the thumb's parent has no border, so `left` and `top` mean what they
+   * say: the same outer box `fractionIn` measures a press against.
+   */
+  const framed = (
+    axis: 'area' | 'hue' | 'alpha',
+    pane: ReactElement,
+  ): ReactElement =>
+    hx(
+      'box',
+      {
+        key: 'frame',
+        style: [
+          s.pane,
+          {
+            borderWidth: theme.borderWidth,
+            borderColor:
+              cursorShown && active === axis ? theme.borderFocus : theme.border,
+          },
+        ],
+      },
+      pane,
+    );
+
   const renderArea = (): ReactElement =>
     hx(
       'box',
@@ -671,40 +715,34 @@ export function ColorPicker(props: ColorPickerProps): ReactElement {
           model.s * 100,
           100,
         ),
-        style: [
-          s.area,
-          {
-            borderWidth: theme.borderWidth,
-            borderColor:
-              cursorShown && active === 'area'
-                ? theme.borderFocus
-                : theme.border,
-          },
-        ],
+        style: s.area,
         ...track('area', areaTo),
       },
-      hx('canvas', {
-        style: s.pane,
-        // Everything the drawing reads: the hue, and the size, which is a
-        // constant here precisely so this key can name it.
-        cacheKey: `sv:${Math.round(model.h)}:${CONTENT}x${AREA_H}`,
-        onDraw: (ctx, { width, height }) => {
-          ctx.fillStyle = hue;
-          ctx.fillRect(0, 0, width, height);
-          // Legacy comma spelling in the stops, for the same reason
-          // `formatColor` emits it: it is what ntk's parser understands.
-          const white = ctx.createLinearGradient(0, 0, width, 0);
-          white.addColorStop(0, 'rgb(255, 255, 255)');
-          white.addColorStop(1, 'rgba(255, 255, 255, 0)');
-          ctx.fillStyle = white;
-          ctx.fillRect(0, 0, width, height);
-          const black = ctx.createLinearGradient(0, 0, 0, height);
-          black.addColorStop(0, 'rgba(0, 0, 0, 0)');
-          black.addColorStop(1, 'rgb(0, 0, 0)');
-          ctx.fillStyle = black;
-          ctx.fillRect(0, 0, width, height);
-        },
-      }),
+      framed(
+        'area',
+        hx('canvas', {
+          style: s.pane,
+          // Everything the drawing reads: the hue, and the size, which is a
+          // constant here precisely so this key can name it.
+          cacheKey: `sv:${Math.round(model.h)}:${CONTENT}x${AREA_H}`,
+          onDraw: (ctx, { width, height }) => {
+            ctx.fillStyle = hue;
+            ctx.fillRect(0, 0, width, height);
+            // Legacy comma spelling in the stops, for the same reason
+            // `formatColor` emits it: it is what ntk's parser understands.
+            const white = ctx.createLinearGradient(0, 0, width, 0);
+            white.addColorStop(0, 'rgb(255, 255, 255)');
+            white.addColorStop(1, 'rgba(255, 255, 255, 0)');
+            ctx.fillStyle = white;
+            ctx.fillRect(0, 0, width, height);
+            const black = ctx.createLinearGradient(0, 0, 0, height);
+            black.addColorStop(0, 'rgba(0, 0, 0, 0)');
+            black.addColorStop(1, 'rgb(0, 0, 0)');
+            ctx.fillStyle = black;
+            ctx.fillRect(0, 0, width, height);
+          },
+        }),
+      ),
       hx('box', {
         style: [
           s.areaThumb,
@@ -730,33 +768,27 @@ export function ColorPicker(props: ColorPickerProps): ReactElement {
           model.h,
           360,
         ),
-        style: [
-          s.strip,
-          {
-            borderWidth: theme.borderWidth,
-            borderColor:
-              cursorShown && active === 'hue'
-                ? theme.borderFocus
-                : theme.border,
-          },
-        ],
+        style: s.strip,
         ...track('hue', hueTo),
       },
-      hx('canvas', {
-        style: s.pane,
-        cacheKey: `hue:${CONTENT}x${STRIP_H}`,
-        onDraw: (ctx, { width, height }) => {
-          const ramp = ctx.createLinearGradient(0, 0, width, 0);
-          for (let stop = 0; stop <= 6; stop += 1) {
-            ramp.addColorStop(
-              stop / 6,
-              opaqueHex(channelsFromHsv(stop * 60, 1, 1)),
-            );
-          }
-          ctx.fillStyle = ramp;
-          ctx.fillRect(0, 0, width, height);
-        },
-      }),
+      framed(
+        'hue',
+        hx('canvas', {
+          style: s.pane,
+          cacheKey: `hue:${CONTENT}x${STRIP_H}`,
+          onDraw: (ctx, { width, height }) => {
+            const ramp = ctx.createLinearGradient(0, 0, width, 0);
+            for (let stop = 0; stop <= 6; stop += 1) {
+              ramp.addColorStop(
+                stop / 6,
+                opaqueHex(channelsFromHsv(stop * 60, 1, 1)),
+              );
+            }
+            ctx.fillStyle = ramp;
+            ctx.fillRect(0, 0, width, height);
+          },
+        }),
+      ),
       hx('box', {
         style: [
           s.stripThumb,
@@ -778,31 +810,25 @@ export function ColorPicker(props: ColorPickerProps): ReactElement {
           model.a * 100,
           100,
         ),
-        style: [
-          s.strip,
-          {
-            borderWidth: theme.borderWidth,
-            borderColor:
-              cursorShown && active === 'alpha'
-                ? theme.borderFocus
-                : theme.border,
-          },
-        ],
+        style: s.strip,
         ...track('alpha', alphaTo),
       },
-      hx('canvas', {
-        style: s.pane,
-        cacheKey: `alpha:${opaqueHex(model)}:${CONTENT}x${STRIP_H}`,
-        onDraw: (ctx, { width, height }) => {
-          drawChecker(ctx, width, height);
-          const ramp = ctx.createLinearGradient(0, 0, width, 0);
-          const { r, g, b } = model;
-          ramp.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0)`);
-          ramp.addColorStop(1, `rgb(${r}, ${g}, ${b})`);
-          ctx.fillStyle = ramp;
-          ctx.fillRect(0, 0, width, height);
-        },
-      }),
+      framed(
+        'alpha',
+        hx('canvas', {
+          style: s.pane,
+          cacheKey: `alpha:${opaqueHex(model)}:${CONTENT}x${STRIP_H}`,
+          onDraw: (ctx, { width, height }) => {
+            drawChecker(ctx, width, height);
+            const ramp = ctx.createLinearGradient(0, 0, width, 0);
+            const { r, g, b } = model;
+            ramp.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0)`);
+            ramp.addColorStop(1, `rgb(${r}, ${g}, ${b})`);
+            ctx.fillStyle = ramp;
+            ctx.fillRect(0, 0, width, height);
+          },
+        }),
+      ),
       hx('box', {
         style: [
           s.stripThumb,

package/src/html/dom.ts

@@ -157,6 +157,11 @@ export type SheetRef =
  * an extension resets the parser, because a mid-document edit can change the
  * tree arbitrarily and pretending otherwise is how a streaming renderer
  * shows a document nobody wrote.
+ *
+ * That delta is available only until the source says it is `complete`: an
+ * ended parse cannot be extended, so every later change re-parses. A caller
+ * that wants the append path — a stream, a `<Markdown partial>` — keeps
+ * `complete` false until the last chunk, which is what the flag is for.
  */
 export class HtmlSource {
   /** The tree, live: it grows as chunks are written. */
@@ -178,12 +183,22 @@ export class HtmlSource {
     this.document = handler.root;
   }
 
-  /** Set the whole source. Appends when it can; re-parses when it cannot. */
+  /** Set the whole source. Appends when it can — an extension of what was
+   *  written, into a parser that has not been ended — and re-parses when it
+   *  cannot. */
   setSource(source: string, complete: boolean): boolean {
     let changed = false;
     if (source === this._written) {
       changed = false;
-    } else if (source.startsWith(this._written)) {
+    } else if (!this.complete && source.startsWith(this._written)) {
+      // The append path is open only while the parser is. `end()` runs the
+      // tokenizer's EOF, and htmlparser2 answers any later chunk with
+      // `.write() after done!`, so a completed parse re-parses like any other
+      // edit. Without the guard the failure landed far from its cause: `<Html
+      // partial={false}>` passes `complete` on *every* render, so whether an
+      // edit crashed depended on the caret — one in the middle of the document
+      // is not a prefix and took the reset path, one at the end was a prefix,
+      // took this branch, and threw inside the reconciler's commit.
       this._parser.write(source.slice(this._written.length));
       this._written = source;
       changed = true;

package/src/html/index.ts

@@ -87,6 +87,10 @@ export interface HtmlProps {
    * that extends the last one is written as a delta, so the nodes already
    * parsed keep their identity and their layout. Set false when the stream
    * ends.
+   *
+   * False ends the parse, and that is final: a later `source` re-parses even
+   * when it extends the last one. An editor handing over the whole document
+   * on every keystroke wants the default.
    */
   partial?: boolean;
   /** Mouse selection, Ctrl+A / Ctrl+C, PRIMARY. Default true. */

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);