@dxos/react-ui-canvas 0.8.2-staging.7ac8446 → 0.8.2

package/dist/lib/browser/index.mjs

@@ -1,10 +1,11 @@
 // 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";
 import { useResizeDetector } from "react-resize-detector";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-canvas/src/hooks/projection.tsx
-import * as d3 from "d3";
+import { interpolate, interpolateObject, transition, easeSinOut } from "d3";
 import { applyToPoints, compose, identity, inverse, scale as scaleMatrix, translate as translateMatrix } from "transformation-matrix";
 var defaultOrigin = {
   x: 0,
@@ -62,8 +63,8 @@ var getZoomTransform = ({ scale, offset, pos, newScale }) => {
   };
 };
 var zoomInPlace = (setTransform, pos, offset, current, next, delay = 200) => {
-  const is = d3.interpolate(current, next);
-  d3.transition().ease(d3.easeSinOut).duration(delay).tween("zoom", () => (t) => {
+  const is = interpolate(current, next);
+  transition().ease(easeSinOut).duration(delay).tween("zoom", () => (t) => {
     const newScale = is(t);
     setTransform(getZoomTransform({
       scale: current,
@@ -76,14 +77,14 @@ var zoomInPlace = (setTransform, pos, offset, current, next, delay = 200) => {
 var noop = () => {
 };
 var zoomTo = (setTransform, current, next, delay = 200, cb = noop) => {
-  const is = d3.interpolateObject({
+  const is = interpolateObject({
     scale: current.scale,
     ...current.offset
   }, {
     scale: next.scale,
     ...next.offset
   });
-  d3.transition().ease(d3.easeSinOut).duration(delay).tween("zoom", () => (t) => {
+  transition().ease(easeSinOut).duration(delay).tween("zoom", () => (t) => {
     const { scale, x, y } = is(t);
     setTransform({
       scale,
@@ -108,6 +109,7 @@ import { bindAll } from "bind-event-listener";
 import { useEffect } from "react";
 
 // packages/ui/react-ui-canvas/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";
 var createPath = (points, join = false) => {
@@ -118,118 +120,144 @@ var createPath = (points, join = false) => {
   ].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 _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 }) => /* @__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
+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();
   }
-}, /* @__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
-})));
+};
+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();
+  }
+};
+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();
+  }
+};
 
 // packages/ui/react-ui-canvas/src/util/util.ts
 var logged = false;
@@ -352,155 +380,167 @@ var hasFocus = (element) => {
 
 // packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx
 var Canvas = /* @__PURE__ */ forwardRef(({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {
-  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
-        }
-      });
-    }
-  }, [
-    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);
+  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
+          }
+        });
       }
-    };
-  }, [
-    ref
-  ]);
-  return /* @__PURE__ */ React2.createElement(CanvasContext.Provider, {
-    value: {
-      root: ref.current,
-      ready,
+    }, [
       width,
       height,
       scale,
-      offset,
-      styles,
+      offset
+    ]);
+    const projection = useMemo(() => new ProjectionMapper(), []);
+    useEffect2(() => {
+      projection.update({
+        width,
+        height
+      }, scale, offset);
+      if (offset !== defaultOrigin) {
+        setReady(true);
+      }
+    }, [
       projection,
-      setProjection
-    }
-  }, /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    ...props,
-    className: mx2("absolute inset-0 overflow-hidden", classNames),
-    ref
-  }, ready ? children : null));
+      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();
+  }
 });
 
 // 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";
 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 = useRef();
-  const tick = () => {
-    dispatch();
-    requestRef.current = requestAnimationFrame(tick);
-  };
-  useEffect3(() => {
-    requestRef.current = requestAnimationFrame(tick);
-    return () => {
-      if (requestRef.current) {
-        cancelAnimationFrame(requestRef.current);
+  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);
     };
-  }, []);
-  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
-    }
-  }))));
+    useEffect3(() => {
+      requestRef.current = requestAnimationFrame(tick);
+      return () => {
+        if (requestRef.current) {
+          cancelAnimationFrame(requestRef.current);
+        }
+      };
+    }, []);
+    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
+      }
+    }))));
+  } finally {
+    _effect.f();
+  }
 };
 
 // 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";
 import { useForwardedRef } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/react-ui-theme";
@@ -517,65 +557,75 @@ var defaultOffset = {
 };
 var createId = (parent, grid) => `dx-canvas-grid-${parent}-${grid}`;
 var GridComponent = /* @__PURE__ */ forwardRef2(({ size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames }, forwardedRef) => {
-  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%"
-  }))));
+  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) => {
-  const { scale, offset } = useCanvasContext();
-  return /* @__PURE__ */ React4.createElement(GridComponent, {
-    ...props,
-    scale,
-    offset
-  });
+  var _effect = _useSignals4();
+  try {
+    const { scale, offset } = useCanvasContext();
+    return /* @__PURE__ */ React4.createElement(GridComponent, {
+      ...props,
+      scale,
+      offset
+    });
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/ui/react-ui-canvas/src/types.ts
-import { Schema as S } from "effect";
-var Point = S.Struct({
-  x: S.Number,
-  y: S.Number
+import { Schema } from "effect";
+var Point = Schema.Struct({
+  x: Schema.Number,
+  y: Schema.Number
 });
-var Dimension = S.Struct({
-  width: S.Number,
-  height: S.Number
+var Dimension = Schema.Struct({
+  width: Schema.Number,
+  height: Schema.Number
 });
-var Rect = S.extend(Point, Dimension);
+var Rect = Schema.extend(Point, Dimension);
 export {
   Arrow,
   Canvas,