@dxos/react-ui-canvas 0.8.4-staging.ac66bdf99f → 0.9.1-main.c7dcc2e112

package/dist/lib/browser/index.mjs

@@ -469,16 +469,795 @@ var Canvas = /* @__PURE__ */ forwardRef(({ children, classNames, scale: scalePro
       setProjection
     }
   }, /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
     ...props,
     className: mx2("absolute inset-0 overflow-hidden", classNames),
     ref
   }, ready ? children : null));
 });
 
-// src/components/FPS.tsx
-import React3, { useEffect as useEffect4, useReducer, useRef as useRef2 } from "react";
+// src/components/CellGrid/CellGrid.tsx
+import { RegistryContext } from "@effect-atom/atom-react";
+import React5, { useContext as useContext2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
+import { useResizeDetector as useResizeDetector2 } from "react-resize-detector";
+import { mx as mx5 } from "@dxos/ui-theme";
+
+// src/components/CellGrid/headers/Ruler.tsx
+import React3, { useMemo as useMemo2 } from "react";
 import { mx as mx3 } from "@dxos/ui-theme";
+
+// src/components/CellGrid/state/viewport.ts
+var cellKey = (col, row) => `${col},${row}`;
+var cellWidth = (viewport) => viewport.baseCellWidth * viewport.zoomX;
+var worldToScreen = (viewport, headers, coord) => {
+  const w = cellWidth(viewport);
+  return {
+    x: headers.left + coord.col * w - viewport.scrollX,
+    y: headers.top + coord.row * viewport.cellHeight - viewport.scrollY,
+    w: (coord.length ?? 1) * w,
+    h: viewport.cellHeight
+  };
+};
+var screenToWorld = (viewport, headers, point) => {
+  const w = cellWidth(viewport);
+  return {
+    col: (point.x - headers.left + viewport.scrollX) / w,
+    row: (point.y - headers.top + viewport.scrollY) / viewport.cellHeight
+  };
+};
+var hitTestCell = (viewport, headers, point) => {
+  if (point.x < headers.left || point.y < headers.top) {
+    return null;
+  }
+  const { col, row } = screenToWorld(viewport, headers, point);
+  if (col < 0 || row < 0) {
+    return null;
+  }
+  return {
+    col: Math.floor(col),
+    row: Math.floor(row)
+  };
+};
+var visibleCellRange = (viewport, headers, size) => {
+  const w = cellWidth(viewport);
+  const innerW = Math.max(0, size.width - headers.left);
+  const innerH = Math.max(0, size.height - headers.top);
+  const minCol = Math.max(0, Math.floor(viewport.scrollX / w));
+  const maxCol = Math.floor((viewport.scrollX + innerW) / w);
+  const minRow = Math.max(0, Math.floor(viewport.scrollY / viewport.cellHeight));
+  const maxRow = Math.floor((viewport.scrollY + innerH) / viewport.cellHeight);
+  return {
+    minCol,
+    maxCol,
+    minRow,
+    maxRow
+  };
+};
+var visibleCells = function* (cells, range) {
+  for (const cell of cells.values()) {
+    if (cell.row < range.minRow || cell.row > range.maxRow) {
+      continue;
+    }
+    const start = cell.col;
+    const end = cell.col + cell.length - 1;
+    if (end < range.minCol || start > range.maxCol) {
+      continue;
+    }
+    yield cell;
+  }
+};
+
+// src/components/CellGrid/headers/Ruler.tsx
+var Ruler = ({ viewport, headers, width, majorEvery = 4, classNames }) => {
+  const safeMajorEvery = Math.max(1, Math.floor(majorEvery));
+  const ticks = useMemo2(() => {
+    const w = cellWidth(viewport);
+    if (w < 1 || width <= headers.left) {
+      return [];
+    }
+    const innerWidth = width - headers.left;
+    const startCol = Math.floor(viewport.scrollX / w);
+    const endCol = Math.ceil((viewport.scrollX + innerWidth) / w);
+    const result = [];
+    for (let col = startCol; col <= endCol; col++) {
+      result.push({
+        col,
+        x: headers.left + col * w - viewport.scrollX,
+        major: col % safeMajorEvery === 0
+      });
+    }
+    return result;
+  }, [
+    viewport,
+    headers.left,
+    width,
+    safeMajorEvery
+  ]);
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: mx3("absolute top-0 left-0 right-0 border-b border-neutral-200 dark:border-neutral-700 bg-baseSurface select-none overflow-hidden", classNames),
+    style: {
+      height: headers.top
+    }
+  }, ticks.map(({ col, x, major }) => /* @__PURE__ */ React3.createElement("div", {
+    key: col,
+    className: mx3("absolute top-0 bottom-0 text-[10px] text-neutral-500 dark:text-neutral-400", major ? "border-l border-neutral-400 dark:border-neutral-500" : "border-l border-neutral-200 dark:border-neutral-700"),
+    style: {
+      transform: `translateX(${x}px)`
+    }
+  }, major ? /* @__PURE__ */ React3.createElement("span", {
+    className: "absolute left-1 top-0"
+  }, col) : null)));
+};
+
+// src/components/CellGrid/headers/TrackHeader.tsx
+import React4 from "react";
+import { mx as mx4 } from "@dxos/ui-theme";
+var TrackHeader = ({ viewport, headers, rows, height, classNames }) => {
+  return /* @__PURE__ */ React4.createElement("div", {
+    className: mx4("absolute left-0 border-r border-neutral-200 dark:border-neutral-700 select-none overflow-hidden", classNames),
+    style: {
+      top: headers.top,
+      width: headers.left,
+      height: Math.max(0, height - headers.top)
+    }
+  }, /* @__PURE__ */ React4.createElement("div", {
+    style: {
+      transform: `translateY(${-viewport.scrollY}px)`
+    }
+  }, rows.map((row, index) => /* @__PURE__ */ React4.createElement("div", {
+    key: row.id,
+    className: "flex items-center px-2 text-xs text-neutral-700 dark:text-neutral-300",
+    style: {
+      height: viewport.cellHeight,
+      // Match the canvas's row-band: a translucent gray overlay on odd rows,
+      // transparent on even rows. The container's overall background bleeds
+      // through, so the labels stay legible in both themes.
+      backgroundColor: index % 2 === 0 ? "transparent" : "rgba(128, 128, 128, 0.08)",
+      // Match the canvas gridline color (rgba(128, 128, 128, 0.25)). Use a
+      // half-pixel inset to keep crisp single-pixel rendering on retina.
+      boxShadow: "inset 0 -1px 0 rgba(128, 128, 128, 0.25)"
+    }
+  }, row.label ?? row.id))));
+};
+
+// src/components/CellGrid/input/pointer.ts
+var attachPointerHandlers = (element, { registry, atoms, headers, handlers }) => {
+  let drag = null;
+  const local = (event) => {
+    const rect = element.getBoundingClientRect();
+    return {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+  };
+  const tryCapture = (pointerId) => {
+    try {
+      element.setPointerCapture(pointerId);
+    } catch {
+    }
+  };
+  const onPointerDown = (event) => {
+    if (event.button === 1 || event.button === 0 && event.altKey) {
+      drag = {
+        kind: "pan",
+        lastX: event.clientX,
+        lastY: event.clientY
+      };
+      tryCapture(event.pointerId);
+      event.preventDefault();
+      return;
+    }
+    if (event.button !== 0) {
+      return;
+    }
+    const viewport = registry.get(atoms.viewport);
+    const point = local(event);
+    const coord = hitTestCell(viewport, headers, point);
+    if (!coord) {
+      return;
+    }
+    const tool = registry.get(atoms.tool);
+    tryCapture(event.pointerId);
+    switch (tool) {
+      case "toggle":
+      case "resize": {
+        const cells = registry.get(atoms.cells);
+        const key = cellKey(coord.col, coord.row);
+        const mode = cells.has(key) ? "unset" : "set";
+        handlers.onCellToggle?.(coord, mode);
+        drag = {
+          kind: "toggle",
+          mode,
+          touched: /* @__PURE__ */ new Set([
+            key
+          ])
+        };
+        break;
+      }
+      case "edit": {
+        drag = {
+          kind: "draw",
+          startCoord: coord,
+          endCoord: coord
+        };
+        handlers.onDrawUpdate?.(coord, coord);
+        break;
+      }
+      case "delete": {
+        const key = cellKey(coord.col, coord.row);
+        handlers.onCellToggle?.(coord, "unset");
+        drag = {
+          kind: "toggle",
+          mode: "unset",
+          touched: /* @__PURE__ */ new Set([
+            key
+          ])
+        };
+        break;
+      }
+      case "select": {
+        drag = {
+          kind: "select",
+          origin: coord
+        };
+        registry.set(atoms.selection, {
+          range: {
+            col0: coord.col,
+            row0: coord.row,
+            col1: coord.col,
+            row1: coord.row
+          }
+        });
+        break;
+      }
+    }
+  };
+  const onPointerMove = (event) => {
+    if (!drag) {
+      return;
+    }
+    if (drag.kind === "pan") {
+      const dx = event.clientX - drag.lastX;
+      const dy = event.clientY - drag.lastY;
+      drag.lastX = event.clientX;
+      drag.lastY = event.clientY;
+      registry.update(atoms.viewport, (current) => ({
+        ...current,
+        scrollX: Math.max(0, current.scrollX - dx),
+        scrollY: Math.max(0, current.scrollY - dy)
+      }));
+      return;
+    }
+    const viewport = registry.get(atoms.viewport);
+    const coord = hitTestCell(viewport, headers, local(event));
+    if (!coord) {
+      return;
+    }
+    if (drag.kind === "toggle") {
+      const key = cellKey(coord.col, coord.row);
+      if (!drag.touched.has(key)) {
+        drag.touched.add(key);
+        handlers.onCellToggle?.(coord, drag.mode);
+      }
+    } else if (drag.kind === "draw") {
+      const constrainedCol = coord.col;
+      if (constrainedCol !== drag.endCoord.col) {
+        drag.endCoord = {
+          col: constrainedCol,
+          row: drag.startCoord.row
+        };
+        handlers.onDrawUpdate?.(drag.startCoord, drag.endCoord);
+      }
+    } else if (drag.kind === "select") {
+      registry.set(atoms.selection, {
+        range: {
+          col0: drag.origin.col,
+          row0: drag.origin.row,
+          col1: coord.col,
+          row1: coord.row
+        }
+      });
+    }
+  };
+  const releaseCapture = (event) => {
+    if (element.hasPointerCapture(event.pointerId)) {
+      element.releasePointerCapture(event.pointerId);
+    }
+  };
+  const onPointerUp = (event) => {
+    if (!drag) {
+      return;
+    }
+    if (drag.kind === "draw") {
+      handlers.onDrawCommit?.(drag.startCoord, drag.endCoord);
+    } else if (drag.kind === "select") {
+      const range = registry.get(atoms.selection).range;
+      if (range) {
+        handlers.onSelectionCommit?.(range);
+      }
+    }
+    drag = null;
+    releaseCapture(event);
+  };
+  const onPointerCancel = (event) => {
+    drag = null;
+    releaseCapture(event);
+  };
+  element.addEventListener("pointerdown", onPointerDown);
+  element.addEventListener("pointermove", onPointerMove);
+  element.addEventListener("pointerup", onPointerUp);
+  element.addEventListener("pointercancel", onPointerCancel);
+  return () => {
+    element.removeEventListener("pointerdown", onPointerDown);
+    element.removeEventListener("pointermove", onPointerMove);
+    element.removeEventListener("pointerup", onPointerUp);
+    element.removeEventListener("pointercancel", onPointerCancel);
+  };
+};
+var toggleCell = (registry, atoms, coord, factory, mode = "toggle") => {
+  registry.update(atoms.cells, (current) => {
+    const next = new Map(current);
+    const key = cellKey(coord.col, coord.row);
+    const exists = next.has(key);
+    if (mode === "set" || mode === "toggle" && !exists) {
+      next.set(key, factory(coord));
+    } else if (mode === "unset" || mode === "toggle" && exists) {
+      next.delete(key);
+    }
+    return next;
+  });
+};
+
+// src/components/CellGrid/input/wheel.ts
+var MIN_ZOOM = 0.25;
+var MAX_ZOOM = 8;
+var attachWheelHandlers = (element, { registry, atoms, headers }) => {
+  const onWheel = (event) => {
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault();
+      const rect = element.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const factor = Math.exp(-event.deltaY / 200);
+      registry.update(atoms.viewport, (current2) => {
+        const nextZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, current2.zoomX * factor));
+        if (nextZoom === current2.zoomX) {
+          return current2;
+        }
+        const w = cellWidth(current2);
+        const worldX = (x - headers.left + current2.scrollX) / w;
+        const nextW = current2.baseCellWidth * nextZoom;
+        const nextScrollX2 = Math.max(0, worldX * nextW - (x - headers.left));
+        return {
+          ...current2,
+          zoomX: nextZoom,
+          scrollX: nextScrollX2
+        };
+      });
+      return;
+    }
+    const dx = event.shiftKey ? event.deltaY : event.deltaX;
+    const dy = event.shiftKey ? 0 : event.deltaY;
+    const current = registry.get(atoms.viewport);
+    const nextScrollX = Math.max(0, current.scrollX + dx);
+    const nextScrollY = Math.max(0, current.scrollY + dy);
+    if (nextScrollX === current.scrollX && nextScrollY === current.scrollY) {
+      return;
+    }
+    event.preventDefault();
+    registry.set(atoms.viewport, {
+      ...current,
+      scrollX: nextScrollX,
+      scrollY: nextScrollY
+    });
+  };
+  element.addEventListener("wheel", onWheel, {
+    passive: false
+  });
+  return () => element.removeEventListener("wheel", onWheel);
+};
+
+// src/components/CellGrid/render/overlay-layer.ts
+var drawOverlay = ({ ctx, size, viewport, headers, selection, playhead, style }) => {
+  ctx.clearRect(0, 0, size.width, size.height);
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(headers.left, headers.top, size.width - headers.left, size.height - headers.top);
+  ctx.clip();
+  if (selection.range) {
+    const { col0, row0, col1, row1 } = selection.range;
+    const minCol = Math.min(col0, col1);
+    const maxCol = Math.max(col0, col1);
+    const minRow = Math.min(row0, row1);
+    const maxRow = Math.max(row0, row1);
+    const tl = worldToScreen(viewport, headers, {
+      col: minCol,
+      row: minRow
+    });
+    const br = worldToScreen(viewport, headers, {
+      col: maxCol + 1,
+      row: maxRow + 1
+    });
+    ctx.fillStyle = style.selectionFill;
+    ctx.fillRect(tl.x, tl.y, br.x - tl.x, br.y - tl.y);
+    ctx.strokeStyle = style.selectionStroke;
+    ctx.setLineDash([
+      4,
+      3
+    ]);
+    ctx.lineWidth = 1;
+    ctx.strokeRect(tl.x + 0.5, tl.y + 0.5, br.x - tl.x - 1, br.y - tl.y - 1);
+    ctx.setLineDash([]);
+  }
+  if (playhead !== null) {
+    const w = cellWidth(viewport);
+    const x = headers.left + playhead * w - viewport.scrollX;
+    if (x >= headers.left && x <= size.width) {
+      ctx.strokeStyle = style.playhead;
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(x, headers.top);
+      ctx.lineTo(x, size.height);
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+};
+
+// src/components/CellGrid/render/static-layer.ts
+var drawCells = ({ ctx, size, viewport, headers, rows, cells, renderCell, style }) => {
+  ctx.clearRect(0, 0, size.width, size.height);
+  if (style.background) {
+    ctx.fillStyle = style.background;
+    ctx.fillRect(0, 0, size.width, size.height);
+  }
+  const range = visibleCellRange(viewport, headers, size);
+  const w = cellWidth(viewport);
+  const h = viewport.cellHeight;
+  if (style.rowBand) {
+    ctx.fillStyle = style.rowBand;
+    for (let row = range.minRow; row <= Math.min(range.maxRow, rows.length - 1); row++) {
+      if (row % 2 === 0) {
+        continue;
+      }
+      const y = headers.top + row * h - viewport.scrollY;
+      ctx.fillRect(headers.left, y, size.width - headers.left, h);
+    }
+  }
+  ctx.strokeStyle = style.gridLine;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  for (let col = range.minCol; col <= range.maxCol + 1; col++) {
+    const x = Math.floor(headers.left + col * w - viewport.scrollX) + 0.5;
+    if (x < headers.left) {
+      continue;
+    }
+    ctx.moveTo(x, headers.top);
+    ctx.lineTo(x, size.height);
+  }
+  for (let row = range.minRow; row <= Math.min(range.maxRow + 1, rows.length); row++) {
+    const y = Math.floor(headers.top + row * h - viewport.scrollY) + 0.5;
+    if (y < headers.top) {
+      continue;
+    }
+    ctx.moveTo(headers.left, y);
+    ctx.lineTo(size.width, y);
+  }
+  ctx.stroke();
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(headers.left, headers.top, size.width - headers.left, size.height - headers.top);
+  ctx.clip();
+  for (const cell of visibleCells(cells, range)) {
+    if (cell.row >= rows.length) {
+      continue;
+    }
+    const rect = worldToScreen(viewport, headers, cell);
+    renderCell({
+      ctx,
+      ...rect,
+      cell
+    });
+  }
+  ctx.restore();
+};
+
+// src/components/CellGrid/CellGrid.tsx
+var defaultHeaders = {
+  left: 80,
+  top: 24
+};
+var defaultStaticStyle = {
+  gridLine: "rgba(128,128,128,0.25)",
+  rowBand: "rgba(128,128,128,0.06)"
+};
+var defaultOverlayStyle = {
+  playhead: "rgb(220, 38, 38)",
+  selectionFill: "rgba(59, 130, 246, 0.15)",
+  selectionStroke: "rgb(59, 130, 246)"
+};
+var setupCanvas = (canvas, width, height) => {
+  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;
+};
+var CellGrid = ({ atoms, rows, renderCell, headers: headersProp, staticStyle: staticStyleProp, overlayStyle: overlayStyleProp, classNames, onCellToggle, onSelectionCommit, onDrawUpdate, onDrawCommit }) => {
+  const registry = useContext2(RegistryContext);
+  const headers = useMemo3(() => {
+    if (headersProp === false) {
+      return {
+        left: 0,
+        top: 0
+      };
+    }
+    return {
+      ...defaultHeaders,
+      ...headersProp ?? {}
+    };
+  }, [
+    headersProp
+  ]);
+  const staticStyle = useMemo3(() => ({
+    ...defaultStaticStyle,
+    ...staticStyleProp ?? {}
+  }), [
+    staticStyleProp
+  ]);
+  const overlayStyle = useMemo3(() => ({
+    ...defaultOverlayStyle,
+    ...overlayStyleProp ?? {}
+  }), [
+    overlayStyleProp
+  ]);
+  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector2();
+  const staticCanvasRef = useRef2(null);
+  const overlayCanvasRef = useRef2(null);
+  const overlayInputRef = useRef2(null);
+  const [staticCtx, setStaticCtx] = useState2(null);
+  const [overlayCtx, setOverlayCtx] = useState2(null);
+  const [viewportState, setViewportState] = useState2(() => registry.get(atoms.viewport));
+  useEffect4(() => {
+    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
+  ]);
+  useEffect4(() => registry.subscribe(atoms.viewport, (next) => setViewportState(next)), [
+    registry,
+    atoms.viewport
+  ]);
+  useEffect4(() => {
+    if (!staticCtx || !width || !height) {
+      return;
+    }
+    let raf = 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
+  ]);
+  useEffect4(() => {
+    if (!overlayCtx || !width || !height) {
+      return;
+    }
+    let raf = 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
+  ]);
+  const callbacksRef = useRef2({
+    onCellToggle,
+    onSelectionCommit,
+    onDrawUpdate,
+    onDrawCommit
+  });
+  callbacksRef.current = {
+    onCellToggle,
+    onSelectionCommit,
+    onDrawUpdate,
+    onDrawCommit
+  };
+  useEffect4(() => {
+    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),
+        onDrawUpdate: (start, end) => callbacksRef.current.onDrawUpdate?.(start, end),
+        onDrawCommit: (start, end) => callbacksRef.current.onDrawCommit?.(start, end)
+      }
+    });
+    const detachWheel = attachWheelHandlers(element, {
+      registry,
+      atoms,
+      headers
+    });
+    return () => {
+      detachPointer();
+      detachWheel();
+    };
+  }, [
+    registry,
+    atoms,
+    headers
+  ]);
+  return /* @__PURE__ */ React5.createElement("div", {
+    ref: containerRef,
+    className: mx5("relative w-full h-full overflow-hidden bg-baseSurface", classNames)
+  }, /* @__PURE__ */ React5.createElement("canvas", {
+    ref: staticCanvasRef,
+    className: "absolute inset-0 pointer-events-none",
+    style: {
+      top: -1,
+      left: -1
+    }
+  }), /* @__PURE__ */ React5.createElement("canvas", {
+    ref: overlayCanvasRef,
+    className: "absolute inset-0 pointer-events-none",
+    style: {
+      top: -1,
+      left: -1
+    }
+  }), /* @__PURE__ */ React5.createElement("div", {
+    ref: overlayInputRef,
+    className: "absolute inset-0 touch-none",
+    style: {
+      paddingLeft: headers.left,
+      paddingTop: headers.top
+    }
+  }), headers.top > 0 && /* @__PURE__ */ React5.createElement(Ruler, {
+    viewport: viewportState,
+    headers,
+    width
+  }), headers.left > 0 && /* @__PURE__ */ React5.createElement(TrackHeader, {
+    viewport: viewportState,
+    headers,
+    rows,
+    height
+  }), headers.top > 0 && headers.left > 0 && /* @__PURE__ */ React5.createElement("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
+    }
+  }));
+};
+
+// src/components/CellGrid/state/atoms.ts
+import { Atom } from "@effect-atom/atom-react";
+var defaultViewport = (options = {}) => ({
+  scrollX: 0,
+  scrollY: 0,
+  baseCellWidth: options.cellWidth ?? 24,
+  cellHeight: options.cellHeight ?? 24,
+  zoomX: 1
+});
+var createCellGridAtoms = (options = {}) => ({
+  cells: Atom.keepAlive(Atom.make(/* @__PURE__ */ new Map())),
+  viewport: Atom.keepAlive(Atom.make(defaultViewport(options))),
+  selection: Atom.keepAlive(Atom.make({
+    range: null
+  })),
+  playhead: Atom.keepAlive(Atom.make(null)),
+  tool: Atom.keepAlive(Atom.make("toggle"))
+});
+
+// src/components/FPS.tsx
+import React6, { useEffect as useEffect5, useReducer, useRef as useRef3 } from "react";
+import { mx as mx6 } from "@dxos/ui-theme";
 var SEC = 1e3;
 var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
   const [{ fps, max, len }, dispatch] = useReducer((state) => {
@@ -511,12 +1290,12 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
     frames: 0,
     prevTime: Date.now()
   });
-  const requestRef = useRef2(null);
+  const requestRef = useRef3(null);
   const tick = () => {
     dispatch();
     requestRef.current = requestAnimationFrame(tick);
   };
-  useEffect4(() => {
+  useEffect5(() => {
     requestRef.current = requestAnimationFrame(tick);
     return () => {
       if (requestRef.current) {
@@ -524,17 +1303,17 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     style: {
       width: width + 6
     },
-    className: mx3("relative flex flex-col p-0.5", "bg-base-surface text-xs text-subdued font-thin pointer-events-none border border-separator", classNames)
-  }, /* @__PURE__ */ React3.createElement("div", null, fps[len - 1], " FPS"), /* @__PURE__ */ React3.createElement("div", {
+    className: mx6("relative flex flex-col p-0.5", "bg-base-surface text-xs text-subdued font-thin pointer-events-none border border-separator", classNames)
+  }, /* @__PURE__ */ React6.createElement("div", null, fps[len - 1], " FPS"), /* @__PURE__ */ React6.createElement("div", {
     className: "w-full relative",
     style: {
       height
     }
-  }, fps.map((frame, i) => /* @__PURE__ */ React3.createElement("div", {
+  }, fps.map((frame, i) => /* @__PURE__ */ React6.createElement("div", {
     key: `fps-${i}`,
     className: bar,
     style: {
@@ -548,9 +1327,9 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
 };
 
 // src/components/Grid/Grid.tsx
-import React4, { forwardRef as forwardRef2, useId, useMemo as useMemo2 } from "react";
+import React7, { forwardRef as forwardRef2, useId, useMemo as useMemo4 } from "react";
 import { useForwardedRef } from "@dxos/react-ui";
-import { mx as mx4 } from "@dxos/ui-theme";
+import { mx as mx7 } from "@dxos/ui-theme";
 var gridRatios = [
   1 / 4,
   1,
@@ -565,7 +1344,7 @@ var defaultOffset = {
 var createId = (parent, grid) => `dx-canvas-grid-${parent}-${grid}`;
 var Grid = (props) => {
   const { scale, offset } = useCanvasContext();
-  return /* @__PURE__ */ React4.createElement(GridComponent, {
+  return /* @__PURE__ */ React7.createElement(GridComponent, {
     ...props,
     scale,
     offset
@@ -575,35 +1354,35 @@ var GridComponent = /* @__PURE__ */ forwardRef2(({ size: gridSize = defaultGridS
   const svgRef = useForwardedRef(forwardedRef);
   const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
   const instanceId = useId();
-  const grids = useMemo2(() => gridRatios.map((ratio) => ({
+  const grids = useMemo4(() => gridRatios.map((ratio) => ({
     id: ratio,
     size: ratio * gridSize * scale
   })).filter(({ size }) => size >= gridSize && size <= 128), [
     gridSize,
     scale
   ]);
-  return /* @__PURE__ */ React4.createElement("svg", {
+  return /* @__PURE__ */ React7.createElement("svg", {
     ...testId("dx-canvas-grid"),
     ref: svgRef,
-    className: mx4("dx-fullscreen pointer-events-none touch-none select-none", "stroke-neutral-500", classNames)
-  }, /* @__PURE__ */ React4.createElement("defs", null, grids.map(({ id, size }) => /* @__PURE__ */ React4.createElement(GridPattern, {
+    className: mx7("dx-fullscreen pointer-events-none touch-none select-none", "stroke-neutral-500", classNames)
+  }, /* @__PURE__ */ React7.createElement("defs", null, grids.map(({ id, size }) => /* @__PURE__ */ React7.createElement(GridPattern, {
     key: id,
     id: createId(instanceId, id),
     offset,
     size
-  }))), showAxes && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("line", {
+  }))), showAxes && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("line", {
     x1: 0,
     y1: offset.y,
     x2: width,
     y2: offset.y,
     className: "stroke-neutral-500 opacity-40"
-  }), /* @__PURE__ */ React4.createElement("line", {
+  }), /* @__PURE__ */ React7.createElement("line", {
     x1: offset.x,
     y1: 0,
     x2: offset.x,
     y2: height,
     className: "stroke-neutral-500 opacity-40"
-  })), /* @__PURE__ */ React4.createElement("g", null, grids.map(({ id }, i) => /* @__PURE__ */ React4.createElement("rect", {
+  })), /* @__PURE__ */ React7.createElement("g", null, grids.map(({ id }, i) => /* @__PURE__ */ React7.createElement("rect", {
     key: id,
     opacity: 0.1 + i * 0.05,
     fill: `url(#${createId(instanceId, id)})`,
@@ -627,6 +1406,7 @@ export {
   Arrow,
   Canvas,
   CanvasContext,
+  CellGrid,
   DATA_TEST_ID,
   Dimension,
   FPS,
@@ -638,15 +1418,31 @@ export {
   Point,
   ProjectionMapper,
   Rect,
+  Ruler,
+  TrackHeader,
+  attachPointerHandlers,
+  attachWheelHandlers,
+  cellKey,
+  cellWidth,
+  createCellGridAtoms,
   createPath,
   defaultOrigin,
+  defaultViewport,
+  drawCells,
+  drawOverlay,
   getRelativePoint,
   getZoomTransform,
+  hitTestCell,
   inspectElement,
+  screenToWorld,
   testId,
+  toggleCell,
   useCanvasContext,
   useDrag,
   useWheel,
+  visibleCellRange,
+  visibleCells,
+  worldToScreen,
   zoomInPlace,
   zoomTo
 };