@dxos/react-ui-canvas 0.8.3 → 0.8.4-main.1068cf700f

package/dist/lib/browser/index.mjs

@@ -1,26 +1,25 @@
-// packages/ui/react-ui-canvas/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";
+// 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/react-ui-theme";
+import { mx as mx2 } from "@dxos/ui-theme";
 
-// packages/ui/react-ui-canvas/src/hooks/projection.tsx
-import { interpolate, interpolateObject, transition, easeSinOut } from "d3";
+// 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) {
-    this._bounds = {
-      width: 0,
-      height: 0
-    };
-    this._scale = 1;
-    this._offset = defaultOrigin;
-    this._toScreen = identity();
-    this._toModel = identity();
     if (bounds && scale && offset) {
       this.update(bounds, scale, offset);
     }
@@ -96,7 +95,7 @@ var zoomTo = (setTransform, current, next, delay = 200, cb = noop) => {
   }).on("end", cb);
 };
 
-// packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx
+// src/hooks/useCanvasContext.tsx
 import { createContext, useContext } from "react";
 import { raise } from "@dxos/debug";
 var CanvasContext = /* @__PURE__ */ createContext(null);
@@ -104,14 +103,81 @@ var useCanvasContext = () => {
   return useContext(CanvasContext) ?? raise(new Error("Missing CanvasContext"));
 };
 
-// packages/ui/react-ui-canvas/src/hooks/useWheel.tsx
+// 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";
 
-// packages/ui/react-ui-canvas/src/util/svg.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+// src/util/svg.tsx
 import React from "react";
-import { mx } from "@dxos/react-ui-theme";
+import { mx } from "@dxos/ui-theme";
 var createPath = (points, join = false) => {
   return [
     "M",
@@ -120,146 +186,120 @@ 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
+})));
 
-// packages/ui/react-ui-canvas/src/util/util.ts
+// src/util/util.ts
 var logged = false;
 var getRelativePoint = (el, ev) => {
   const rect = el.getBoundingClientRect();
@@ -294,13 +334,13 @@ var inspectElement = (el) => {
 };
 var DATA_TEST_ID = "data-test-id";
 
-// packages/ui/react-ui-canvas/src/hooks/useWheel.tsx
+// src/hooks/useWheel.tsx
 var defaultOptions = {
   zoom: true
 };
 var useWheel = (options = defaultOptions) => {
   const { root, setProjection } = useCanvasContext();
-  useEffect(() => {
+  useEffect2(() => {
     if (!root) {
       return;
     }
@@ -313,9 +353,6 @@ var useWheel = (options = defaultOptions) => {
         },
         listener: (ev) => {
           const zooming = isWheelZooming(ev);
-          if (!hasFocus(root) && !zooming) {
-            return;
-          }
           ev.preventDefault();
           if (zooming && !options.zoom) {
             return;
@@ -359,191 +396,161 @@ var isWheelZooming = (ev) => {
   }
   return false;
 };
-var hasFocus = (element) => {
-  const activeElement = document.activeElement;
-  if (!activeElement) {
-    return false;
-  }
-  let shadowActive = activeElement;
-  while (shadowActive?.shadowRoot?.activeElement) {
-    shadowActive = shadowActive.shadowRoot.activeElement;
-  }
-  let current = element;
-  while (current) {
-    if (current === activeElement || current === shadowActive) {
-      return true;
-    }
-    current = current.parentElement;
-  }
-  return false;
-};
 
-// packages/ui/react-ui-canvas/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/Canvas/Canvas.tsx
+var Canvas = /* @__PURE__ */ forwardRef(({ children, classNames, scale: _scale = 1, offset: offsetProp = defaultOrigin, ...props }, forwardedRef) => {
+  const { ref, width = 0, height = 0 } = useResizeDetector();
+  const [ready, setReady] = useState(false);
+  const [{ scale, offset }, setProjection] = useState({
+    scale: _scale,
+    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
-    ]);
-    const projection = useMemo(() => new ProjectionMapper(), []);
-    useEffect2(() => {
-      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", {
-      role: "none",
-      ...props,
-      className: mx2("absolute inset-0 overflow-hidden", classNames),
-      ref
-    }, ready ? children : null));
-  } finally {
-    _effect.f();
-  }
+      styles,
+      projection,
+      setProjection
+    }
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    ...props,
+    className: mx2("absolute inset-0 overflow-hidden", classNames),
+    ref
+  }, ready ? children : null));
 });
 
-// packages/ui/react-ui-canvas/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";
+// src/components/FPS.tsx
+import React3, { useEffect as useEffect4, useReducer, useRef as useRef2 } from "react";
+import { mx as mx3 } from "@dxos/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)))
-        ];
-        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 = useRef();
-    const tick = () => {
-      dispatch();
-      requestRef.current = requestAnimationFrame(tick);
-    };
-    useEffect3(() => {
-      requestRef.current = requestAnimationFrame(tick);
-      return () => {
-        if (requestRef.current) {
-          cancelAnimationFrame(requestRef.current);
-        }
+  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 = useRef2(null);
+  const tick = () => {
+    dispatch();
+    requestRef.current = requestAnimationFrame(tick);
+  };
+  useEffect4(() => {
+    requestRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (requestRef.current) {
+        cancelAnimationFrame(requestRef.current);
       }
-    }))));
-  } finally {
-    _effect.f();
-  }
+    };
+  }, []);
+  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: "is-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
+    }
+  }))));
 };
 
-// packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4, { forwardRef as forwardRef2, useMemo as useMemo2, useId } from "react";
+// src/components/Grid/Grid.tsx
+import React4, { forwardRef as forwardRef2, useId, useMemo as useMemo2 } from "react";
 import { useForwardedRef } from "@dxos/react-ui";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { mx as mx4 } from "@dxos/ui-theme";
 var gridRatios = [
   1 / 4,
   1,
@@ -556,67 +563,57 @@ 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__ */ React4.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 = useMemo2(() => gridRatios.map((ratio) => ({
+    id: ratio,
+    size: ratio * gridSize * scale
+  })).filter(({ size }) => size >= gridSize && size <= 128), [
+    gridSize,
+    scale
+  ]);
+  return /* @__PURE__ */ React4.createElement("svg", {
+    ...testId("dx-canvas-grid"),
+    ref: svgRef,
+    className: mx4("absolute inset-0 is-full bs-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%"
+  }))));
+});
 
-// packages/ui/react-ui-canvas/src/types.ts
-import { Schema } from "effect";
+// src/types.ts
+import * as Schema from "effect/Schema";
 var Point = Schema.Struct({
   x: Schema.Number,
   y: Schema.Number
@@ -648,6 +645,7 @@ export {
   inspectElement,
   testId,
   useCanvasContext,
+  useDrag,
   useWheel,
   zoomInPlace,
   zoomTo