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

package/dist/lib/node-esm/index.mjs

@@ -1,32 +1,31 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
 // src/components/Canvas/Canvas.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2, { forwardRef, useEffect as useEffect2, useImperativeHandle, useMemo, useState } from "react";
+import React2, { forwardRef, useEffect as useEffect3, useImperativeHandle, useMemo, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import { mx as mx2 } from "@dxos/ui-theme";
 
 // src/hooks/projection.tsx
 import { easeSinOut, interpolate, interpolateObject, transition } from "d3";
 import { applyToPoints, compose, identity, inverse, scale as scaleMatrix, translate as translateMatrix } from "transformation-matrix";
-function _define_property(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
 var defaultOrigin = {
   x: 0,
   y: 0
 };
 var ProjectionMapper = class {
+  _bounds = {
+    width: 0,
+    height: 0
+  };
+  _scale = 1;
+  _offset = defaultOrigin;
+  _toScreen = identity();
+  _toModel = identity();
+  constructor(bounds, scale, offset) {
+    if (bounds && scale && offset) {
+      this.update(bounds, scale, offset);
+    }
+  }
   update(bounds, scale, offset) {
     this._bounds = bounds;
     this._scale = scale;
@@ -54,19 +53,6 @@ var ProjectionMapper = class {
   toModel(points) {
     return applyToPoints(this._toModel, points);
   }
-  constructor(bounds, scale, offset) {
-    _define_property(this, "_bounds", {
-      width: 0,
-      height: 0
-    });
-    _define_property(this, "_scale", 1);
-    _define_property(this, "_offset", defaultOrigin);
-    _define_property(this, "_toScreen", identity());
-    _define_property(this, "_toModel", identity());
-    if (bounds && scale && offset) {
-      this.update(bounds, scale, offset);
-    }
-  }
 };
 var getZoomTransform = ({ scale, offset, pos, newScale }) => {
   return {
@@ -119,14 +105,81 @@ var useCanvasContext = () => {
   return useContext(CanvasContext) ?? raise(new Error("Missing CanvasContext"));
 };
 
+// src/hooks/useDrag.tsx
+import { bind } from "bind-event-listener";
+import { useEffect, useRef } from "react";
+var useDrag = (_options = {}) => {
+  const { root, setProjection } = useCanvasContext();
+  const state = useRef({
+    panning: false,
+    x: 0,
+    y: 0
+  });
+  useEffect(() => {
+    if (!root) {
+      return;
+    }
+    return bind(root, {
+      type: "pointerdown",
+      listener: (ev) => {
+        if (ev.button !== 0) {
+          return;
+        }
+        if (ev.defaultPrevented) {
+          return;
+        }
+        if (ev.target !== root || ev.shiftKey) {
+          return;
+        }
+        ev.preventDefault();
+        root.setPointerCapture(ev.pointerId);
+        state.current = {
+          panning: true,
+          x: ev.clientX,
+          y: ev.clientY
+        };
+        const moveUnbind = bind(root, {
+          type: "pointermove",
+          listener: (ev2) => {
+            if (!state.current.panning) {
+              return;
+            }
+            const dx = ev2.clientX - state.current.x;
+            const dy = ev2.clientY - state.current.y;
+            state.current.x = ev2.clientX;
+            state.current.y = ev2.clientY;
+            setProjection((prev) => ({
+              ...prev,
+              offset: {
+                x: prev.offset.x + dx,
+                y: prev.offset.y + dy
+              }
+            }));
+          }
+        });
+        const upUnbind = bind(root, {
+          type: "pointerup",
+          listener: (ev2) => {
+            state.current.panning = false;
+            root.releasePointerCapture(ev2.pointerId);
+            moveUnbind();
+            upUnbind();
+          }
+        });
+      }
+    });
+  }, [
+    root
+  ]);
+};
+
 // src/hooks/useWheel.tsx
 import { bindAll } from "bind-event-listener";
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 
 // src/util/svg.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React from "react";
-import { mx } from "@dxos/react-ui-theme";
+import { mx } from "@dxos/ui-theme";
 var createPath = (points, join = false) => {
   return [
     "M",
@@ -135,144 +188,118 @@ var createPath = (points, join = false) => {
   ].join(" ");
 };
 var Markers = ({ id = "dx-marker", classNames }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Arrow, {
-      id: `${id}-arrow-start`,
-      dir: "start",
-      classNames
-    }), /* @__PURE__ */ React.createElement(Arrow, {
-      id: `${id}-arrow-end`,
-      dir: "end",
-      classNames
-    }), /* @__PURE__ */ React.createElement(Arrow, {
-      id: `${id}-triangle-start`,
-      dir: "start",
-      closed: true,
-      classNames
-    }), /* @__PURE__ */ React.createElement(Arrow, {
-      id: `${id}-triangle-end`,
-      dir: "end",
-      closed: true,
-      classNames
-    }), /* @__PURE__ */ React.createElement(Marker, {
-      id: `${id}-circle`,
-      pos: {
-        x: 8,
-        y: 8
-      },
-      size: {
-        width: 16,
-        height: 16
-      }
-    }, /* @__PURE__ */ React.createElement("circle", {
-      cx: 8,
-      cy: 8,
-      r: 5,
-      stroke: "context-stroke",
-      className: mx(classNames)
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var Marker = ({ id, className, children, pos: { x: refX, y: refY }, size: { width: markerWidth, height: markerHeight }, fill, ...rest }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("marker", {
-      id,
-      className,
-      refX,
-      refY,
-      markerWidth,
-      markerHeight,
-      markerUnits: "strokeWidth",
-      orient: "auto",
-      ...rest
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var Arrow = ({ classNames, id, size = 16, dir = "end", closed = false }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(Marker, {
-      id,
-      size: {
-        width: size,
-        height: size
-      },
-      pos: dir === "end" ? {
-        x: size,
-        y: size / 2
-      } : {
-        x: 0,
-        y: size / 2
-      }
-    }, /* @__PURE__ */ React.createElement("path", {
-      fill: closed ? void 0 : "none",
-      stroke: "context-stroke",
-      className: mx(classNames),
-      d: createPath(dir === "end" ? [
-        {
-          x: 1,
-          y: 1
-        },
-        {
-          x: size,
-          y: size / 2
-        },
-        {
-          x: 1,
-          y: size - 1
-        }
-      ] : [
-        {
-          x: size - 1,
-          y: 1
-        },
-        {
-          x: 0,
-          y: size / 2
-        },
-        {
-          x: size - 1,
-          y: size - 1
-        }
-      ], closed)
-    }));
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Arrow, {
+    id: `${id}-arrow-start`,
+    dir: "start",
+    classNames
+  }), /* @__PURE__ */ React.createElement(Arrow, {
+    id: `${id}-arrow-end`,
+    dir: "end",
+    classNames
+  }), /* @__PURE__ */ React.createElement(Arrow, {
+    id: `${id}-triangle-start`,
+    dir: "start",
+    closed: true,
+    classNames
+  }), /* @__PURE__ */ React.createElement(Arrow, {
+    id: `${id}-triangle-end`,
+    dir: "end",
+    closed: true,
+    classNames
+  }), /* @__PURE__ */ React.createElement(Marker, {
+    id: `${id}-circle`,
+    pos: {
+      x: 8,
+      y: 8
+    },
+    size: {
+      width: 16,
+      height: 16
+    }
+  }, /* @__PURE__ */ React.createElement("circle", {
+    cx: 8,
+    cy: 8,
+    r: 5,
+    stroke: "context-stroke",
+    className: mx(classNames)
+  })));
 };
-var GridPattern = ({ classNames, id, size, offset }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("pattern", {
-      id,
-      x: (size / 2 + offset.x) % size,
-      y: (size / 2 + offset.y) % size,
-      width: size,
-      height: size,
-      patternUnits: "userSpaceOnUse"
-    }, /* @__PURE__ */ React.createElement("g", {
-      className: mx(classNames)
-    }, /* @__PURE__ */ React.createElement("line", {
-      x1: 0,
-      y1: size / 2,
-      x2: size,
-      y2: size / 2
-    }), /* @__PURE__ */ React.createElement("line", {
-      x1: size / 2,
-      y1: 0,
-      x2: size / 2,
-      y2: size
-    })));
-  } finally {
-    _effect.f();
+var Marker = ({ id, className, children, pos: { x: refX, y: refY }, size: { width: markerWidth, height: markerHeight }, fill, ...rest }) => /* @__PURE__ */ React.createElement("marker", {
+  id,
+  className,
+  refX,
+  refY,
+  markerWidth,
+  markerHeight,
+  markerUnits: "strokeWidth",
+  orient: "auto",
+  ...rest
+}, children);
+var Arrow = ({ classNames, id, size = 16, dir = "end", closed = false }) => /* @__PURE__ */ React.createElement(Marker, {
+  id,
+  size: {
+    width: size,
+    height: size
+  },
+  pos: dir === "end" ? {
+    x: size,
+    y: size / 2
+  } : {
+    x: 0,
+    y: size / 2
   }
-};
+}, /* @__PURE__ */ React.createElement("path", {
+  fill: closed ? void 0 : "none",
+  stroke: "context-stroke",
+  className: mx(classNames),
+  d: createPath(dir === "end" ? [
+    {
+      x: 1,
+      y: 1
+    },
+    {
+      x: size,
+      y: size / 2
+    },
+    {
+      x: 1,
+      y: size - 1
+    }
+  ] : [
+    {
+      x: size - 1,
+      y: 1
+    },
+    {
+      x: 0,
+      y: size / 2
+    },
+    {
+      x: size - 1,
+      y: size - 1
+    }
+  ], closed)
+}));
+var GridPattern = ({ classNames, id, size, offset }) => /* @__PURE__ */ React.createElement("pattern", {
+  id,
+  x: (size / 2 + offset.x) % size,
+  y: (size / 2 + offset.y) % size,
+  width: size,
+  height: size,
+  patternUnits: "userSpaceOnUse"
+}, /* @__PURE__ */ React.createElement("g", {
+  className: mx(classNames)
+}, /* @__PURE__ */ React.createElement("line", {
+  x1: 0,
+  y1: size / 2,
+  x2: size,
+  y2: size / 2
+}), /* @__PURE__ */ React.createElement("line", {
+  x1: size / 2,
+  y1: 0,
+  x2: size / 2,
+  y2: size
+})));
 
 // src/util/util.ts
 var logged = false;
@@ -315,7 +342,7 @@ var defaultOptions = {
 };
 var useWheel = (options = defaultOptions) => {
   const { root, setProjection } = useCanvasContext();
-  useEffect(() => {
+  useEffect2(() => {
     if (!root) {
       return;
     }
@@ -328,9 +355,6 @@ var useWheel = (options = defaultOptions) => {
         },
         listener: (ev) => {
           const zooming = isWheelZooming(ev);
-          if (!hasFocus(root) && !zooming) {
-            return;
-          }
           ev.preventDefault();
           if (zooming && !options.zoom) {
             return;
@@ -374,191 +398,902 @@ var isWheelZooming = (ev) => {
   }
   return false;
 };
-var hasFocus = (element) => {
-  const activeElement = document.activeElement;
-  if (!activeElement) {
-    return false;
+
+// src/components/Canvas/Canvas.tsx
+var Canvas = /* @__PURE__ */ forwardRef(({ children, classNames, scale: scaleProp = 1, offset: offsetProp = defaultOrigin, ...props }, forwardedRef) => {
+  const { ref, width = 0, height = 0 } = useResizeDetector();
+  const [ready, setReady] = useState(false);
+  const [{ scale, offset }, setProjection] = useState({
+    scale: scaleProp,
+    offset: offsetProp
+  });
+  useEffect3(() => {
+    if (width && height && offset === defaultOrigin) {
+      setProjection({
+        scale,
+        offset: {
+          x: width / 2,
+          y: height / 2
+        }
+      });
+    }
+  }, [
+    width,
+    height,
+    scale,
+    offset
+  ]);
+  const projection = useMemo(() => new ProjectionMapper(), []);
+  useEffect3(() => {
+    projection.update({
+      width,
+      height
+    }, scale, offset);
+    if (offset !== defaultOrigin) {
+      setReady(true);
+    }
+  }, [
+    projection,
+    scale,
+    offset,
+    width,
+    height
+  ]);
+  const styles = useMemo(() => {
+    return {
+      // NOTE: Order is important.
+      transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+      visibility: width && height ? "visible" : "hidden"
+    };
+  }, [
+    scale,
+    offset
+  ]);
+  useImperativeHandle(forwardedRef, () => {
+    return {
+      setProjection: async (projection2) => {
+        setProjection(projection2);
+      }
+    };
+  }, [
+    ref
+  ]);
+  return /* @__PURE__ */ React2.createElement(CanvasContext.Provider, {
+    value: {
+      root: ref.current,
+      ready,
+      width,
+      height,
+      scale,
+      offset,
+      styles,
+      projection,
+      setProjection
+    }
+  }, /* @__PURE__ */ React2.createElement("div", {
+    ...props,
+    className: mx2("absolute inset-0 overflow-hidden", classNames),
+    ref
+  }, ready ? children : null));
+});
+
+// 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;
   }
-  let shadowActive = activeElement;
-  while (shadowActive?.shadowRoot?.activeElement) {
-    shadowActive = shadowActive.shadowRoot.activeElement;
+  const { col, row } = screenToWorld(viewport, headers, point);
+  if (col < 0 || row < 0) {
+    return null;
   }
-  let current = element;
-  while (current) {
-    if (current === activeElement || current === shadowActive) {
-      return true;
+  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;
     }
-    current = current.parentElement;
+    const start = cell.col;
+    const end = cell.col + cell.length - 1;
+    if (end < range.minCol || start > range.maxCol) {
+      continue;
+    }
+    yield cell;
   }
-  return false;
 };
 
-// src/components/Canvas/Canvas.tsx
-var Canvas = /* @__PURE__ */ forwardRef(({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {
-  var _effect = _useSignals2();
-  try {
-    const { ref, width = 0, height = 0 } = useResizeDetector();
-    const [ready, setReady] = useState(false);
-    const [{ scale, offset }, setProjection] = useState({
-      scale: _scale,
-      offset: _offset
-    });
-    useEffect2(() => {
-      if (width && height && offset === defaultOrigin) {
-        setProjection({
-          scale,
-          offset: {
-            x: width / 2,
-            y: height / 2
+// 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 "select": {
+        drag = {
+          kind: "select",
+          origin: coord
+        };
+        registry.set(atoms.selection, {
+          range: {
+            col0: coord.col,
+            row0: coord.row,
+            col1: coord.col,
+            row1: coord.row
           }
         });
+        break;
       }
-    }, [
-      width,
-      height,
-      scale,
-      offset
-    ]);
-    const projection = useMemo(() => new ProjectionMapper(), []);
-    useEffect2(() => {
-      projection.update({
-        width,
-        height
-      }, scale, offset);
-      if (offset !== defaultOrigin) {
-        setReady(true);
+    }
+  };
+  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);
       }
-    }, [
-      projection,
-      scale,
-      offset,
-      width,
-      height
-    ]);
-    const styles = useMemo(() => {
-      return {
-        // NOTE: Order is important.
-        transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
-        visibility: width && height ? "visible" : "hidden"
-      };
-    }, [
-      scale,
-      offset
-    ]);
-    useImperativeHandle(forwardedRef, () => {
-      return {
-        setProjection: async (projection2) => {
-          setProjection(projection2);
+    } else if (drag.kind === "select") {
+      registry.set(atoms.selection, {
+        range: {
+          col0: drag.origin.col,
+          row0: drag.origin.row,
+          col1: coord.col,
+          row1: coord.row
         }
-      };
-    }, [
-      ref
-    ]);
-    return /* @__PURE__ */ React2.createElement(CanvasContext.Provider, {
-      value: {
-        root: ref.current,
-        ready,
-        width,
-        height,
-        scale,
-        offset,
-        styles,
-        projection,
-        setProjection
+      });
+    }
+  };
+  const releaseCapture = (event) => {
+    if (element.hasPointerCapture(event.pointerId)) {
+      element.releasePointerCapture(event.pointerId);
+    }
+  };
+  const onPointerUp = (event) => {
+    if (!drag) {
+      return;
+    }
+    if (drag.kind === "select") {
+      const range = registry.get(atoms.selection).range;
+      if (range) {
+        handlers.onSelectionCommit?.(range);
       }
-    }, /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      ...props,
-      className: mx2("absolute inset-0 overflow-hidden", classNames),
-      ref
-    }, ready ? children : null));
-  } finally {
-    _effect.f();
-  }
-});
+    }
+    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/FPS.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import React3, { useEffect as useEffect3, useReducer, useRef } from "react";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-var SEC = 1e3;
-var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
-  var _effect = _useSignals3();
-  try {
-    const [{ fps, max, len }, dispatch] = useReducer((state) => {
-      const currentTime = Date.now();
-      if (currentTime > state.prevTime + SEC) {
-        const nextFPS = [
-          ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),
-          Math.max(1, Math.round(state.frames * SEC / (currentTime - state.prevTime)))
-        ];
+// 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 {
-          max: Math.max(state.max, ...nextFPS),
-          len: Math.min(state.len + nextFPS.length, width),
-          fps: [
-            ...state.fps,
-            ...nextFPS
-          ].slice(-width),
-          frames: 1,
-          prevTime: currentTime
+          ...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 }) => {
+  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 {
-        return {
-          ...state,
-          frames: state.frames + 1
-        };
+        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
+  });
+  callbacksRef.current = {
+    onCellToggle,
+    onSelectionCommit
+  };
+  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)
       }
-    }, {
-      max: 0,
-      len: 0,
-      fps: [],
-      frames: 0,
-      prevTime: Date.now()
     });
-    const requestRef = useRef(null);
-    const tick = () => {
-      dispatch();
-      requestRef.current = requestAnimationFrame(tick);
+    const detachWheel = attachWheelHandlers(element, {
+      registry,
+      atoms,
+      headers
+    });
+    return () => {
+      detachPointer();
+      detachWheel();
     };
-    useEffect3(() => {
-      requestRef.current = requestAnimationFrame(tick);
-      return () => {
-        if (requestRef.current) {
-          cancelAnimationFrame(requestRef.current);
-        }
+  }, [
+    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) => {
+    const currentTime = Date.now();
+    if (currentTime > state.prevTime + SEC) {
+      const nextFPS = [
+        ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),
+        Math.max(1, Math.round(state.frames * SEC / (currentTime - state.prevTime)))
+      ];
+      return {
+        max: Math.max(state.max, ...nextFPS),
+        len: Math.min(state.len + nextFPS.length, width),
+        fps: [
+          ...state.fps,
+          ...nextFPS
+        ].slice(-width),
+        frames: 1,
+        prevTime: currentTime
       };
-    }, []);
-    return /* @__PURE__ */ React3.createElement("div", {
-      style: {
-        width: width + 6
-      },
-      className: mx3("relative flex flex-col p-0.5", "bg-baseSurface 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: "w-full relative",
-      style: {
-        height
-      }
-    }, fps.map((frame, i) => /* @__PURE__ */ React3.createElement("div", {
-      key: `fps-${i}`,
-      className: bar,
-      style: {
-        position: "absolute",
-        bottom: 0,
-        right: `${len - 1 - i}px`,
-        height: `${height * frame / max}px`,
-        width: 1
+    } else {
+      return {
+        ...state,
+        frames: state.frames + 1
+      };
+    }
+  }, {
+    max: 0,
+    len: 0,
+    fps: [],
+    frames: 0,
+    prevTime: Date.now()
+  });
+  const requestRef = useRef3(null);
+  const tick = () => {
+    dispatch();
+    requestRef.current = requestAnimationFrame(tick);
+  };
+  useEffect5(() => {
+    requestRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (requestRef.current) {
+        cancelAnimationFrame(requestRef.current);
       }
-    }))));
-  } finally {
-    _effect.f();
-  }
+    };
+  }, []);
+  return /* @__PURE__ */ React6.createElement("div", {
+    style: {
+      width: width + 6
+    },
+    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__ */ React6.createElement("div", {
+    key: `fps-${i}`,
+    className: bar,
+    style: {
+      position: "absolute",
+      bottom: 0,
+      right: `${len - 1 - i}px`,
+      height: `${height * frame / max}px`,
+      width: 1
+    }
+  }))));
 };
 
 // src/components/Grid/Grid.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-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/react-ui-theme";
+import { mx as mx7 } from "@dxos/ui-theme";
 var gridRatios = [
   1 / 4,
   1,
@@ -571,64 +1306,54 @@ var defaultOffset = {
   y: 0
 };
 var createId = (parent, grid) => `dx-canvas-grid-${parent}-${grid}`;
-var GridComponent = /* @__PURE__ */ forwardRef2(({ size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames }, forwardedRef) => {
-  var _effect = _useSignals4();
-  try {
-    const svgRef = useForwardedRef(forwardedRef);
-    const instanceId = useId();
-    const grids = useMemo2(() => gridRatios.map((ratio) => ({
-      id: ratio,
-      size: ratio * gridSize * scale
-    })).filter(({ size }) => size >= gridSize && size <= 256), [
-      gridSize,
-      scale
-    ]);
-    const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
-    return /* @__PURE__ */ React4.createElement("svg", {
-      ...testId("dx-canvas-grid"),
-      ref: svgRef,
-      className: mx4("absolute inset-0 w-full h-full pointer-events-none touch-none select-none", "stroke-neutral-500", classNames)
-    }, /* @__PURE__ */ React4.createElement("defs", null, grids.map(({ id, size }) => /* @__PURE__ */ React4.createElement(GridPattern, {
-      key: id,
-      id: createId(instanceId, id),
-      offset,
-      size
-    }))), showAxes && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("line", {
-      x1: 0,
-      y1: offset.y,
-      x2: width,
-      y2: offset.y,
-      className: "stroke-neutral-500 opacity-40"
-    }), /* @__PURE__ */ React4.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", {
-      key: id,
-      opacity: 0.1 + i * 0.05,
-      fill: `url(#${createId(instanceId, id)})`,
-      width: "100%",
-      height: "100%"
-    }))));
-  } finally {
-    _effect.f();
-  }
-});
 var Grid = (props) => {
-  var _effect = _useSignals4();
-  try {
-    const { scale, offset } = useCanvasContext();
-    return /* @__PURE__ */ React4.createElement(GridComponent, {
-      ...props,
-      scale,
-      offset
-    });
-  } finally {
-    _effect.f();
-  }
+  const { scale, offset } = useCanvasContext();
+  return /* @__PURE__ */ React7.createElement(GridComponent, {
+    ...props,
+    scale,
+    offset
+  });
 };
+var GridComponent = /* @__PURE__ */ forwardRef2(({ size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames }, forwardedRef) => {
+  const svgRef = useForwardedRef(forwardedRef);
+  const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
+  const instanceId = useId();
+  const grids = useMemo4(() => gridRatios.map((ratio) => ({
+    id: ratio,
+    size: ratio * gridSize * scale
+  })).filter(({ size }) => size >= gridSize && size <= 128), [
+    gridSize,
+    scale
+  ]);
+  return /* @__PURE__ */ React7.createElement("svg", {
+    ...testId("dx-canvas-grid"),
+    ref: svgRef,
+    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__ */ 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__ */ React7.createElement("line", {
+    x1: offset.x,
+    y1: 0,
+    x2: offset.x,
+    y2: height,
+    className: "stroke-neutral-500 opacity-40"
+  })), /* @__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)})`,
+    width: "100%",
+    height: "100%"
+  }))));
+});
 
 // src/types.ts
 import * as Schema from "effect/Schema";
@@ -645,6 +1370,7 @@ export {
   Arrow,
   Canvas,
   CanvasContext,
+  CellGrid,
   DATA_TEST_ID,
   Dimension,
   FPS,
@@ -656,14 +1382,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
 };