@dxos/react-ui-canvas 0.8.4-main.ead640a → 0.8.4-main.f466a3d56e

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@dxos/react-ui-canvas",
-  "version": "0.8.4-main.ead640a",
+  "version": "0.8.4-main.f466a3d56e",
   "description": "A canvas component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "type": "module",
   "exports": {
@@ -16,45 +20,41 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.12.1",
+    "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/react-context": "1.1.1",
     "bind-event-listener": "^3.0.0",
     "d3": "^7.9.0",
     "react-resize-detector": "^11.0.1",
     "transformation-matrix": "^2.16.1",
-    "@dxos/debug": "0.8.4-main.ead640a",
-    "@dxos/invariant": "0.8.4-main.ead640a",
-    "@dxos/log": "0.8.4-main.ead640a",
-    "@dxos/util": "0.8.4-main.ead640a"
+    "@dxos/debug": "0.8.4-main.f466a3d56e",
+    "@dxos/log": "0.8.4-main.f466a3d56e",
+    "@dxos/invariant": "0.8.4-main.f466a3d56e",
+    "@dxos/util": "0.8.4-main.f466a3d56e"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
-    "effect": "3.18.3",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.ead640a",
-    "@dxos/react-ui": "0.8.4-main.ead640a",
-    "@dxos/react-ui-theme": "0.8.4-main.ead640a",
-    "@dxos/storybook-utils": "0.8.4-main.ead640a"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.13",
+    "@dxos/random": "0.8.4-main.f466a3d56e",
+    "@dxos/react-ui": "0.8.4-main.f466a3d56e",
+    "@dxos/storybook-utils": "0.8.4-main.f466a3d56e",
+    "@dxos/ui-theme": "0.8.4-main.f466a3d56e"
   },
   "peerDependencies": {
-    "effect": "3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.ead640a",
-    "@dxos/react-ui-theme": "0.8.4-main.ead640a"
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/ui-theme": "0.8.4-main.f466a3d56e",
+    "@dxos/react-ui": "0.8.4-main.f466a3d56e"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Canvas/Canvas.stories.tsx

@@ -5,13 +5,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { useCanvasContext, useWheel } from '../../hooks';
+import { useCanvasContext, useDrag, useWheel } from '../../hooks';
 import { type Point } from '../../types';
 import { testId } from '../../util';
 import { Grid, type GridProps } from '../Grid';
-
 import { Canvas } from './Canvas';
 
 const size = 128;
@@ -32,7 +31,7 @@ const DefaultStory = (props: GridProps) => {
 
 const TwoCanvases = (props: GridProps) => {
   return (
-    <div className='grid grid-cols-2 gap-2 w-full h-full'>
+    <div className='grid grid-cols-2 gap-2 h-full w-full'>
       <div className='h-full relative'>
         <Canvas>
           <Grid {...props} />
@@ -51,6 +50,7 @@ const TwoCanvases = (props: GridProps) => {
 
 const Content = () => {
   useWheel();
+  useDrag();
   return (
     <div>
       {points.map(({ x, y }, i) => (
@@ -91,7 +91,7 @@ const meta = {
   title: 'ui/react-ui-canvas/Canvas',
   component: Grid,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -106,6 +106,6 @@ export const Default: Story = {
 };
 
 export const SideBySide: Story = {
-  args: { size: 16 },
   render: TwoCanvases,
+  args: { size: 16 },
 };

package/src/components/Canvas/Canvas.tsx

@@ -15,7 +15,7 @@ import React, {
 import { useResizeDetector } from 'react-resize-detector';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { CanvasContext, ProjectionMapper, type ProjectionState, defaultOrigin } from '../../hooks';
 
@@ -30,7 +30,7 @@ export type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionSt
  * Manages CSS projection.
  */
 export const Canvas = forwardRef<CanvasController, CanvasProps>(
-  ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {
+  ({ children, classNames, scale: scaleProp = 1, offset: offsetProp = defaultOrigin, ...props }, forwardedRef) => {
     // Size.
     const { ref, width = 0, height = 0 } = useResizeDetector();
 
@@ -38,7 +38,7 @@ export const Canvas = forwardRef<CanvasController, CanvasProps>(
     const [ready, setReady] = useState(false);
 
     // Projection.
-    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });
+    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: scaleProp, offset: offsetProp });
     useEffect(() => {
       if (width && height && offset === defaultOrigin) {
         setProjection({ scale, offset: { x: width / 2, y: height / 2 } });
@@ -76,7 +76,7 @@ export const Canvas = forwardRef<CanvasController, CanvasProps>(
       <CanvasContext.Provider
         value={{ root: ref.current, ready, width, height, scale, offset, styles, projection, setProjection }}
       >
-        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>
+        <div {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>
           {ready ? children : null}
         </div>
       </CanvasContext.Provider>

package/src/components/CellGrid/CellGrid.stories.tsx

@@ -0,0 +1,238 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { RegistryContext, Registry } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { CellGrid, type CellGridProps } from './CellGrid';
+import { toggleCell } from './input';
+import { type RenderCell } from './render';
+import { createCellGridAtoms } from './state/atoms';
+import type { Cell, CellCoord, Row, Tool } from './state/types';
+
+type SequencerData = { velocity: number };
+
+const trackColors = [
+  '#ef4444', // red
+  '#f97316', // orange
+  '#eab308', // yellow
+  '#22c55e', // green
+  '#06b6d4', // cyan
+  '#3b82f6', // blue
+  '#a855f7', // purple
+  '#ec4899', // pink
+];
+
+const renderSequencerCell: RenderCell<SequencerData> = ({ ctx, x, y, w, h, cell }) => {
+  const inset = 1;
+  const radius = 4;
+  const color = trackColors[cell.row % trackColors.length];
+  const velocity = cell.data?.velocity ?? 0.8;
+  ctx.fillStyle = color;
+  ctx.globalAlpha = 0.3 + velocity * 0.7;
+  roundedRect(ctx, x + inset, y + inset, w - inset * 2, h - inset * 2, radius);
+  ctx.fill();
+  ctx.globalAlpha = 1;
+};
+
+const renderDataVizCell: RenderCell<{ magnitude: number }> = ({ ctx, x, y, w, h, cell }) => {
+  const magnitude = cell.data?.magnitude ?? 0.5;
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  const r = Math.max(2, (Math.min(w, h) / 2 - 2) * magnitude);
+  ctx.fillStyle = `hsl(${(cell.row * 30) % 360}, 70%, 55%)`;
+  ctx.globalAlpha = 0.85;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.globalAlpha = 1;
+};
+
+const roundedRect = (ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number): void => {
+  const radius = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + w - radius, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
+  ctx.lineTo(x + w, y + h - radius);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
+  ctx.lineTo(x + radius, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
+  ctx.lineTo(x, y + radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
+  ctx.closePath();
+};
+
+// Deterministic 0..1 random — Linear Congruential Generator. Used in story
+// seeding so the same args produce the same grid every render.
+const makeLcg = (seed: number) => {
+  let state = seed >>> 0;
+  return () => {
+    state = (state * 1664525 + 1013904223) >>> 0;
+    return state / 0xffffffff;
+  };
+};
+
+type Variant = 'sequencer' | 'data-viz';
+
+type StoryProps = Pick<CellGridProps, 'headers'> & {
+  variant: Variant;
+  tool: Tool;
+  numCols: number;
+  numRows: number;
+  cellWidth: number;
+  cellHeight: number;
+  playback: boolean;
+};
+
+const DefaultStory = ({ variant, tool, numCols, numRows, cellWidth, cellHeight, playback, headers }: StoryProps) => {
+  const registry = useContext(RegistryContext);
+
+  const atoms = useMemo(
+    () => createCellGridAtoms<SequencerData | { magnitude: number }>({ cellWidth, cellHeight }),
+    [cellWidth, cellHeight],
+  );
+  const rows: Row[] = useMemo(
+    () =>
+      Array.from({ length: numRows }, (_, index) => ({
+        id: `r${index}`,
+        label: variant === 'sequencer' ? `Track ${index + 1}` : `Series ${index + 1}`,
+      })),
+    [numRows, variant],
+  );
+
+  // Set tool whenever it changes.
+  useEffect(() => {
+    registry.set(atoms.tool, tool);
+  }, [registry, atoms.tool, tool]);
+
+  // Seed with sample data. Use a deterministic LCG instead of Math.random so
+  // story renders are stable across runs (helpful for visual review / snapshots).
+  useEffect(() => {
+    const next = new Map<string, Cell<SequencerData | { magnitude: number }>>();
+    const lcg = makeLcg(0xc0ffee);
+    if (variant === 'sequencer') {
+      for (let row = 0; row < numRows; row++) {
+        for (let col = 0; col < numCols; col += row + 2) {
+          if (col % (row + 1) === 0) {
+            next.set(`${col},${row}`, { col, row, length: 1, data: { velocity: 0.5 + lcg() * 0.5 } });
+          }
+        }
+      }
+    } else {
+      for (let row = 0; row < numRows; row++) {
+        for (let col = 0; col < numCols; col++) {
+          if (lcg() < 0.35) {
+            next.set(`${col},${row}`, { col, row, length: 1, data: { magnitude: lcg() } });
+          }
+        }
+      }
+    }
+    registry.set(atoms.cells, next);
+  }, [registry, atoms.cells, variant, numCols, numRows]);
+
+  // Animated playhead.
+  const playRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (!playback) {
+      registry.set(atoms.playhead, null);
+      return;
+    }
+    const start = performance.now();
+    const period = 4_000; // ms to traverse numCols.
+    const tick = (now: number) => {
+      const t = ((now - start) % period) / period;
+      registry.set(atoms.playhead, t * numCols);
+      playRef.current = requestAnimationFrame(tick);
+    };
+    playRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (playRef.current !== null) {
+        cancelAnimationFrame(playRef.current);
+      }
+      registry.set(atoms.playhead, null);
+    };
+  }, [registry, atoms.playhead, playback, numCols]);
+
+  const renderCell = variant === 'sequencer' ? (renderSequencerCell as RenderCell) : (renderDataVizCell as RenderCell);
+
+  const handleToggle = (coord: CellCoord) => {
+    toggleCell(registry, atoms, coord, ({ col, row }) => ({
+      col,
+      row,
+      length: 1,
+      data: variant === 'sequencer' ? { velocity: 0.8 } : { magnitude: 0.7 },
+    }));
+  };
+
+  return (
+    <div className='absolute inset-0'>
+      <CellGrid
+        atoms={atoms as any}
+        rows={rows}
+        renderCell={renderCell}
+        headers={headers}
+        onCellToggle={handleToggle}
+      />
+    </div>
+  );
+};
+
+const RegistryWrapper = ({ children }: { children: React.ReactNode }) => {
+  const [registry] = useState(() => Registry.make());
+  return <RegistryContext.Provider value={registry}>{children}</RegistryContext.Provider>;
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-canvas/CellGrid',
+  component: DefaultStory,
+  render: (args) => (
+    <RegistryWrapper>
+      <DefaultStory {...args} />
+    </RegistryWrapper>
+  ),
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    variant: { control: { type: 'inline-radio' }, options: ['sequencer', 'data-viz'] },
+    // 'resize' is deferred (PR description "Deferred / out of v1") — hide from controls.
+    tool: { control: { type: 'inline-radio' }, options: ['toggle', 'select'] },
+    numCols: { control: { type: 'number', min: 16, max: 1024, step: 16 } },
+    numRows: { control: { type: 'number', min: 1, max: 64, step: 1 } },
+    cellWidth: { control: { type: 'number', min: 8, max: 64, step: 1 } },
+    cellHeight: { control: { type: 'number', min: 12, max: 64, step: 1 } },
+    playback: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Sequencer: Story = {
+  args: {
+    variant: 'sequencer',
+    tool: 'toggle',
+    numCols: 64,
+    numRows: 8,
+    cellWidth: 24,
+    cellHeight: 24,
+    playback: true,
+  },
+};
+
+export const DataViz: Story = {
+  args: {
+    variant: 'data-viz',
+    tool: 'select',
+    numCols: 256,
+    numRows: 12,
+    cellWidth: 20,
+    cellHeight: 20,
+    playback: false,
+  },
+};

package/src/components/CellGrid/CellGrid.tsx

@@ -0,0 +1,266 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { RegistryContext } from '@effect-atom/atom-react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import type { ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { Ruler, TrackHeader } from './headers';
+import { attachPointerHandlers, attachWheelHandlers, type PointerHandlers } from './input';
+import { drawCells, drawOverlay, type OverlayStyle, type RenderCell, type StaticLayerStyle } from './render';
+import type { CellGridAtoms } from './state/atoms';
+import type { Cell, Headers, Row } from './state/types';
+
+export type CellGridProps<T = unknown> = ThemedClassName<
+  PointerHandlers & {
+    atoms: CellGridAtoms<T>;
+    rows: ReadonlyArray<Row>;
+    renderCell: RenderCell<T>;
+    headers?: Partial<Headers> | false;
+    staticStyle?: Partial<StaticLayerStyle>;
+    overlayStyle?: Partial<OverlayStyle>;
+  }
+>;
+
+const defaultHeaders: Headers = { left: 80, top: 24 };
+
+const defaultStaticStyle: StaticLayerStyle = {
+  gridLine: 'rgba(128,128,128,0.25)',
+  rowBand: 'rgba(128,128,128,0.06)',
+};
+
+const defaultOverlayStyle: OverlayStyle = {
+  playhead: 'rgb(220, 38, 38)',
+  selectionFill: 'rgba(59, 130, 246, 0.15)',
+  selectionStroke: 'rgb(59, 130, 246)',
+};
+
+const setupCanvas = (canvas: HTMLCanvasElement, width: number, height: number): CanvasRenderingContext2D | null => {
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = Math.max(1, Math.floor(width * dpr));
+  canvas.height = Math.max(1, Math.floor(height * dpr));
+  canvas.style.width = `${width}px`;
+  canvas.style.height = `${height}px`;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return null;
+  }
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  return ctx;
+};
+
+/**
+ * Canvas-based 2D grid where cells contain pluggable shapes. Suitable for music sequencers,
+ * time-series data viz, and similar workloads at ~1k visible cells per viewport.
+ */
+export const CellGrid = <T,>({
+  atoms,
+  rows,
+  renderCell,
+  headers: headersProp,
+  staticStyle: staticStyleProp,
+  overlayStyle: overlayStyleProp,
+  classNames,
+  onCellToggle,
+  onSelectionCommit,
+}: CellGridProps<T>) => {
+  const registry = useContext(RegistryContext);
+
+  const headers = useMemo<Headers>(() => {
+    if (headersProp === false) {
+      return { left: 0, top: 0 };
+    }
+    return { ...defaultHeaders, ...(headersProp ?? {}) };
+  }, [headersProp]);
+
+  const staticStyle = useMemo<StaticLayerStyle>(
+    () => ({ ...defaultStaticStyle, ...(staticStyleProp ?? {}) }),
+    [staticStyleProp],
+  );
+  const overlayStyle = useMemo<OverlayStyle>(
+    () => ({ ...defaultOverlayStyle, ...(overlayStyleProp ?? {}) }),
+    [overlayStyleProp],
+  );
+
+  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector<HTMLDivElement>();
+  const staticCanvasRef = useRef<HTMLCanvasElement>(null);
+  const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
+  const overlayInputRef = useRef<HTMLDivElement>(null);
+
+  const [staticCtx, setStaticCtx] = useState<CanvasRenderingContext2D | null>(null);
+  const [overlayCtx, setOverlayCtx] = useState<CanvasRenderingContext2D | null>(null);
+
+  // Track header rerenders for the React-side ruler/track-header.
+  const [viewportState, setViewportState] = useState(() => registry.get(atoms.viewport));
+
+  // Resize canvases on container resize.
+  useEffect(() => {
+    if (!width || !height) {
+      return;
+    }
+    if (staticCanvasRef.current) {
+      const ctx = setupCanvas(staticCanvasRef.current, width, height);
+      setStaticCtx(ctx);
+    }
+    if (overlayCanvasRef.current) {
+      const ctx = setupCanvas(overlayCanvasRef.current, width, height);
+      setOverlayCtx(ctx);
+    }
+  }, [width, height]);
+
+  // Mirror viewport into React state so headers re-render on scroll/zoom.
+  useEffect(() => registry.subscribe(atoms.viewport, (next) => setViewportState(next)), [registry, atoms.viewport]);
+
+  // Static-layer redraw on (cells, viewport, rows, headers, style, size) change.
+  useEffect(() => {
+    if (!staticCtx || !width || !height) {
+      return;
+    }
+    let raf: number | null = null;
+    const schedule = () => {
+      if (raf !== null) {
+        return;
+      }
+      raf = requestAnimationFrame(() => {
+        raf = null;
+        drawCells({
+          ctx: staticCtx,
+          size: { width, height },
+          viewport: registry.get(atoms.viewport),
+          headers,
+          rows,
+          cells: registry.get(atoms.cells),
+          renderCell,
+          style: staticStyle,
+        });
+      });
+    };
+    schedule();
+    const unsubCells = registry.subscribe(atoms.cells, schedule);
+    const unsubViewport = registry.subscribe(atoms.viewport, schedule);
+    return () => {
+      if (raf !== null) {
+        cancelAnimationFrame(raf);
+      }
+      unsubCells();
+      unsubViewport();
+    };
+  }, [staticCtx, width, height, registry, atoms.cells, atoms.viewport, headers, rows, renderCell, staticStyle]);
+
+  // Overlay rAF loop while playhead or active selection drag.
+  useEffect(() => {
+    if (!overlayCtx || !width || !height) {
+      return;
+    }
+    let raf: number | null = null;
+    let stopped = false;
+
+    const paint = () => {
+      drawOverlay({
+        ctx: overlayCtx,
+        size: { width, height },
+        viewport: registry.get(atoms.viewport),
+        headers,
+        selection: registry.get(atoms.selection),
+        playhead: registry.get(atoms.playhead),
+        style: overlayStyle,
+      });
+    };
+
+    const isAnimating = () => registry.get(atoms.playhead) !== null;
+
+    const loop = () => {
+      if (stopped) {
+        return;
+      }
+      paint();
+      if (isAnimating()) {
+        raf = requestAnimationFrame(loop);
+      } else {
+        raf = null;
+      }
+    };
+
+    const kick = () => {
+      paint();
+      if (raf === null && isAnimating()) {
+        raf = requestAnimationFrame(loop);
+      }
+    };
+
+    kick();
+    const unsubSelection = registry.subscribe(atoms.selection, () => paint());
+    const unsubPlayhead = registry.subscribe(atoms.playhead, kick);
+    const unsubViewport = registry.subscribe(atoms.viewport, () => paint());
+
+    return () => {
+      stopped = true;
+      if (raf !== null) {
+        cancelAnimationFrame(raf);
+      }
+      unsubSelection();
+      unsubPlayhead();
+      unsubViewport();
+    };
+  }, [overlayCtx, width, height, registry, atoms.selection, atoms.playhead, atoms.viewport, headers, overlayStyle]);
+
+  // Input wiring. Keep the callbacks in a ref so the listener attachment is stable
+  // across consumer re-renders — otherwise an in-progress drag is torn down when
+  // the parent's onCellToggle identity changes (e.g. after the very mutation we
+  // just triggered), and subsequent pointermove events see drag === null.
+  const callbacksRef = useRef<PointerHandlers>({ onCellToggle, onSelectionCommit });
+  callbacksRef.current = { onCellToggle, onSelectionCommit };
+  useEffect(() => {
+    const element = overlayInputRef.current;
+    if (!element) {
+      return;
+    }
+    const detachPointer = attachPointerHandlers(element, {
+      registry,
+      atoms,
+      headers,
+      handlers: {
+        onCellToggle: (coord, mode) => callbacksRef.current.onCellToggle?.(coord, mode),
+        onSelectionCommit: (range) => callbacksRef.current.onSelectionCommit?.(range),
+      },
+    });
+    const detachWheel = attachWheelHandlers(element, { registry, atoms, headers });
+    return () => {
+      detachPointer();
+      detachWheel();
+    };
+  }, [registry, atoms, headers]);
+
+  return (
+    <div ref={containerRef} className={mx('relative w-full h-full overflow-hidden bg-baseSurface', classNames)}>
+      {/*
+        Canvases are nudged up + left 1 CSS pixel so the gridlines (drawn at the TOP
+        and LEFT edges of each cell) sit on top of the frozen header dividers — the
+        TrackHeader's right border and bottom-row box-shadow, which both render 1px
+        inside the box. Without this offset the canvas gridlines land 1px down/right
+        of the header dividers and the columns read as misaligned.
+      */}
+      <canvas ref={staticCanvasRef} className='absolute inset-0 pointer-events-none' style={{ top: -1, left: -1 }} />
+      <canvas ref={overlayCanvasRef} className='absolute inset-0 pointer-events-none' style={{ top: -1, left: -1 }} />
+      <div
+        ref={overlayInputRef}
+        className='absolute inset-0 touch-none'
+        style={{ paddingLeft: headers.left, paddingTop: headers.top }}
+      />
+      {headers.top > 0 && <Ruler viewport={viewportState} headers={headers} width={width} />}
+      {headers.left > 0 && <TrackHeader viewport={viewportState} headers={headers} rows={rows} height={height} />}
+      {headers.top > 0 && headers.left > 0 && (
+        <div
+          className='absolute top-0 left-0 border-b border-r border-neutral-200 dark:border-neutral-700 bg-baseSurface'
+          style={{ width: headers.left, height: headers.top }}
+        />
+      )}
+    </div>
+  );
+};
+
+export type { Cell };