fix(vanilla): re-measure canvas pointer rects on pointerenter

The rect cache added in 529ebb8 invalidated on scroll and resize, but an
element can move without either firing: content above the chart
expanding, an accordion opening, a web font loading and reflowing the
page. Any of those left stale boxes and offset hit-testing until the
next scroll. Invalidating on pointerenter starts every hover session
with a fresh measurement, bounding staleness to mid-hover layout shifts.
The new test shifts the chart with no scroll event and asserts the next
hover session hits against the moved box.

Also flattens an empty-stops gradient to 'transparent' instead of
'none' in scatter-canvas/state.ts. 'none' is not a canvas color:
assigning it to fillStyle is silently ignored, so the previous fill
color would keep painting. Defensive only -- the compiler never emits an
empty stop list.

Author: rileyhilliard

packages/vanilla/src/scatter-canvas/__tests__/interactions-rect-cache.test.ts

@@ -119,6 +119,23 @@ describe('pointer rect caching', () => {
     expect(canvasRectCalls).toBeGreaterThan(1);
   });
 
+  it('re-measures on pointerenter, so a scroll-less layout shift cannot strand the cache', () => {
+    move(layer.canvas, 100, 100);
+    expect(layer.state.hoverIndex).toBe(0);
+    expect(canvasRectCalls).toBe(1);
+
+    // The chart moves 50px without any scroll or resize event (content above
+    // it expanded). The pointer re-entering the canvas must trigger a fresh
+    // measurement so the next move hit-tests against the new box.
+    layer.state.hoverIndex = -1;
+    scrollY = 50;
+    layer.canvas.dispatchEvent(new Event('pointerenter'));
+
+    move(layer.canvas, 100, 50);
+    expect(layer.state.hoverIndex).toBe(0);
+    expect(canvasRectCalls).toBe(2);
+  });
+
   it('stops listening for scroll once cleaned up', () => {
     move(layer.canvas, 100, 100);
     const before = canvasRectCalls;

packages/vanilla/src/scatter-canvas/__tests__/state.test.ts

@@ -36,8 +36,8 @@ describe('flattenFill', () => {
     expect(flattenFill(gradient)).toBe('#111111');
   });
 
-  it('falls back to none for an empty gradient', () => {
-    expect(flattenFill({ gradient: 'linear', stops: [] } as GradientDef)).toBe('none');
+  it('falls back to transparent (a valid canvas color) for an empty gradient', () => {
+    expect(flattenFill({ gradient: 'linear', stops: [] } as GradientDef)).toBe('transparent');
   });
 });
 

packages/vanilla/src/scatter-canvas/interactions.ts

@@ -47,10 +47,13 @@ export function wireCanvasInteractions({
    * `getBoundingClientRect()` forces layout, and reading two of them on every
    * `pointermove` is exactly the per-event cost this layer exists to avoid.
    * Neither box moves on its own: a container resize tears the layer down and
-   * `render()` rebuilds it, so within one layer's life the only thing that
-   * shifts these is the viewport scrolling underneath them. Invalidate on
-   * scroll (capture phase, so ancestor scroll containers count) and on resize,
-   * then re-measure lazily on the next event that needs a box.
+   * `render()` rebuilds it, so within one layer's life the boxes shift only
+   * when the page moves underneath them. Invalidate on scroll (capture phase,
+   * so ancestor scroll containers count), on resize, and on `pointerenter` —
+   * a layout shift with no scroll and no resize (content above the chart
+   * expanding, a font loading) still moves the boxes, and starting each hover
+   * session with a fresh measurement bounds that staleness to mid-hover
+   * shifts. Re-measure lazily on the next event that needs a box.
    */
   let svgRect: DOMRect | null = null;
   let canvasRect: DOMRect | null = null;
@@ -143,6 +146,7 @@ export function wireCanvasInteractions({
   canvas.addEventListener('pointermove', handlePointerMove);
   canvas.addEventListener('pointerdown', handlePointerDown);
   canvas.addEventListener('pointerleave', handlePointerLeave);
+  canvas.addEventListener('pointerenter', invalidateRects);
   // Capture phase: a scroll in any ancestor moves our boxes, and scroll events
   // from those do not bubble.
   window.addEventListener('scroll', invalidateRects, true);
@@ -152,6 +156,7 @@ export function wireCanvasInteractions({
     canvas.removeEventListener('pointermove', handlePointerMove);
     canvas.removeEventListener('pointerdown', handlePointerDown);
     canvas.removeEventListener('pointerleave', handlePointerLeave);
+    canvas.removeEventListener('pointerenter', invalidateRects);
     window.removeEventListener('scroll', invalidateRects, true);
     window.removeEventListener('resize', invalidateRects);
   };

packages/vanilla/src/scatter-canvas/state.ts

@@ -21,7 +21,9 @@ import type { CanvasGridline, CanvasRect, ScatterCanvasState, ScatterPointsSoA }
  */
 export function flattenFill(fill: string | GradientDef): string {
   if (typeof fill === 'string') return fill;
-  return fill.stops[0]?.color ?? 'none';
+  // 'transparent', not 'none': canvas silently ignores invalid fillStyle
+  // assignments, so 'none' would leave the previous fill color in effect.
+  return fill.stops[0]?.color ?? 'transparent';
 }
 
 /** Collect gridlines from one axis into canvas-space records. */