@dxos/react-ui-canvas 0.10.0 → 0.11.0

package/dist/lib/browser/index.mjs

@@ -1,1451 +0,0 @@
-// src/components/Canvas/Canvas.tsx
-import React2, { forwardRef, useEffect as useEffect3, useImperativeHandle, useMemo, useState } from "react";
-import { useResizeDetector } from "react-resize-detector";
-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";
-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;
-    this._offset = offset;
-    this._toScreen = compose(
-      // NOTE: Order is important.
-      translateMatrix(this._offset.x, this._offset.y),
-      scaleMatrix(this._scale)
-    );
-    this._toModel = inverse(this._toScreen);
-    return this;
-  }
-  get bounds() {
-    return this._bounds;
-  }
-  get scale() {
-    return this._scale;
-  }
-  get offset() {
-    return this._offset;
-  }
-  toScreen(points) {
-    return applyToPoints(this._toScreen, points);
-  }
-  toModel(points) {
-    return applyToPoints(this._toModel, points);
-  }
-};
-var getZoomTransform = ({ scale, offset, pos, newScale }) => {
-  return {
-    scale: newScale,
-    offset: {
-      x: pos.x - (pos.x - offset.x) * (newScale / scale),
-      y: pos.y - (pos.y - offset.y) * (newScale / scale)
-    }
-  };
-};
-var zoomInPlace = (setTransform, pos, offset, current, next, delay = 200) => {
-  const is = interpolate(current, next);
-  transition().ease(easeSinOut).duration(delay).tween("zoom", () => (t) => {
-    const newScale = is(t);
-    setTransform(getZoomTransform({
-      scale: current,
-      newScale,
-      offset,
-      pos
-    }));
-  });
-};
-var noop = () => {
-};
-var zoomTo = (setTransform, current, next, delay = 200, cb = noop) => {
-  const is = interpolateObject({
-    scale: current.scale,
-    ...current.offset
-  }, {
-    scale: next.scale,
-    ...next.offset
-  });
-  transition().ease(easeSinOut).duration(delay).tween("zoom", () => (t) => {
-    const { scale, x, y } = is(t);
-    setTransform({
-      scale,
-      offset: {
-        x,
-        y
-      }
-    });
-  }).on("end", cb);
-};
-
-// src/hooks/useCanvasContext.tsx
-import { createContext, useContext } from "react";
-import { raise } from "@dxos/debug";
-var CanvasContext = /* @__PURE__ */ createContext(null);
-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 as useEffect2 } from "react";
-
-// src/util/svg.tsx
-import React from "react";
-import { mx } from "@dxos/ui-theme";
-var createPath = (points, join = false) => {
-  return [
-    "M",
-    points.map(({ x, y }) => `${x},${y}`).join(" L "),
-    join ? "Z" : ""
-  ].join(" ");
-};
-var Markers = ({ id = "dx-marker", classNames }) => {
-  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 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;
-var getRelativePoint = (el, ev) => {
-  const rect = el.getBoundingClientRect();
-  return {
-    x: ev.clientX - rect.x,
-    y: ev.clientY - rect.top
-  };
-};
-var testId = (id, inspect = false) => {
-  if (inspect) {
-    if (!logged) {
-      console.log("Open storybook in expanded window;\nthen run INSPECT()");
-      logged = true;
-    }
-    window.INSPECT = () => {
-      const el = document.querySelector(`[data-test-id="${id}"]`);
-      window.inspect(el);
-      console.log(el);
-    };
-  }
-  return {
-    [DATA_TEST_ID]: id
-  };
-};
-var inspectElement = (el) => {
-  window.INSPECT = () => {
-    window.inspect(el);
-    window.element = el;
-    console.log("Open storybook in expanded window;\nthen run INSPECT()");
-    console.log(el);
-  };
-};
-var DATA_TEST_ID = "data-test-id";
-
-// src/hooks/useWheel.tsx
-var defaultOptions = {
-  zoom: true
-};
-var useWheel = (options = defaultOptions) => {
-  const { root, setProjection } = useCanvasContext();
-  useEffect2(() => {
-    if (!root) {
-      return;
-    }
-    return bindAll(root, [
-      {
-        type: "wheel",
-        options: {
-          capture: true,
-          passive: false
-        },
-        listener: (ev) => {
-          const zooming = isWheelZooming(ev);
-          ev.preventDefault();
-          if (zooming && !options.zoom) {
-            return;
-          }
-          if (ev.ctrlKey) {
-            if (!root) {
-              return;
-            }
-            setProjection(({ scale, offset }) => {
-              const pos = getRelativePoint(root, ev);
-              const scaleSensitivity = 0.01;
-              const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);
-              return getZoomTransform({
-                scale,
-                offset,
-                newScale,
-                pos
-              });
-            });
-          } else {
-            setProjection(({ scale, offset: { x, y } }) => {
-              return {
-                scale,
-                offset: {
-                  x: x - ev.deltaX,
-                  y: y - ev.deltaY
-                }
-              };
-            });
-          }
-        }
-      }
-    ]);
-  }, [
-    root
-  ]);
-};
-var isWheelZooming = (ev) => {
-  if (ev.ctrlKey || ev.metaKey) {
-    return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;
-  }
-  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;
-  }
-  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) => {
-    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
-      };
-    } 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);
-      }
-    };
-  }, []);
-  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 React7, { forwardRef as forwardRef2, useId, useMemo as useMemo4 } from "react";
-import { useForwardedRef } from "@dxos/react-ui";
-import { mx as mx7 } from "@dxos/ui-theme";
-var gridRatios = [
-  1 / 4,
-  1,
-  4,
-  16
-];
-var defaultGridSize = 16;
-var defaultOffset = {
-  x: 0,
-  y: 0
-};
-var createId = (parent, grid) => `dx-canvas-grid-${parent}-${grid}`;
-var Grid = (props) => {
-  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,
-    // `dx-fullscreen` (absolute inset-0) does not stretch a replaced <svg> element — without an explicit
-    // size it falls back to the intrinsic 300x150, clipping the 100%-sized grid rects. Force full size.
-    className: mx7("dx-fullscreen w-full h-full 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";
-var Point = Schema.Struct({
-  x: Schema.Number,
-  y: Schema.Number
-});
-var Dimension = Schema.Struct({
-  width: Schema.Number,
-  height: Schema.Number
-});
-var Rect = Schema.extend(Point, Dimension);
-export {
-  Arrow,
-  Canvas,
-  CanvasContext,
-  CellGrid,
-  DATA_TEST_ID,
-  Dimension,
-  FPS,
-  Grid,
-  GridComponent,
-  GridPattern,
-  Marker,
-  Markers,
-  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
-};
-//# sourceMappingURL=index.mjs.map