@pixerate/editor-react 0.5.1 → 0.6.0

package/dist/canvas/index.cjs

@@ -0,0 +1,824 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/canvas/index.ts
+var canvas_exports = {};
+__export(canvas_exports, {
+  AgentPresenceLayer: () => AgentPresenceLayer,
+  boundsOf: () => import_canvas6.boundsOf,
+  calculateDagreReflowDisplacement: () => import_canvas6.calculateDagreReflowDisplacement,
+  calculateDirectionalDisplacement: () => import_canvas6.calculateDirectionalDisplacement,
+  centerNodes: () => import_canvas6.centerNodes,
+  centre: () => import_canvas6.centre,
+  computeNodesBoundingBox: () => import_canvas6.computeNodesBoundingBox,
+  createBezierTrajectory: () => import_canvas6.createBezierTrajectory,
+  createFanOutTrajectory: () => import_canvas6.createFanOutTrajectory,
+  defaultEasing: () => import_canvas6.defaultEasing,
+  ensureLayout: () => import_canvas6.ensureLayout,
+  estimateNodeSize: () => import_canvas6.estimateNodeSize,
+  flowSide: () => import_canvas6.flowSide,
+  getCenteredNodePosition: () => import_canvas6.getCenteredNodePosition,
+  getLayoutedNodes: () => import_canvas6.getLayoutedNodes,
+  isEventFromTextInput: () => import_canvas6.isEventFromTextInput,
+  isValidCanvasNode: () => import_canvas6.isValidCanvasNode,
+  isValidUrl: () => import_canvas6.isValidUrl,
+  linearPositionTrajectory: () => import_canvas6.linearPositionTrajectory,
+  linearTrajectory: () => import_canvas6.linearTrajectory,
+  overlaps: () => import_canvas6.overlaps,
+  parseCanvasClipboardData: () => import_canvas6.parseCanvasClipboardData,
+  placeBeside: () => import_canvas6.placeBeside,
+  remapPastedNodes: () => import_canvas6.remapPastedNodes,
+  repositionNodesTo: () => import_canvas6.repositionNodesTo,
+  runMultiNodeTransition: () => import_canvas6.runMultiNodeTransition,
+  serializeCanvasNodes: () => import_canvas6.serializeCanvasNodes,
+  useCanvasClipboard: () => useCanvasClipboard,
+  useCanvasDocking: () => useCanvasDocking,
+  useCanvasExplosion: () => useCanvasExplosion,
+  useCanvasGraph: () => useCanvasGraph,
+  useCanvasLayout: () => useCanvasLayout,
+  useCanvasShortcuts: () => useCanvasShortcuts,
+  useStreamingCanvas: () => useStreamingCanvas
+});
+module.exports = __toCommonJS(canvas_exports);
+
+// src/canvas/AgentPresenceLayer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function AgentPresenceLayer({ presences, className = "" }) {
+  if (!presences || presences.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: `pixerate-agent-presence-layer pointer-events-none absolute inset-0 z-50 overflow-hidden ${className}`,
+      "aria-hidden": "true",
+      children: presences.map((agent) => {
+        if (!agent.cursorPosition) return null;
+        const { x, y } = agent.cursorPosition;
+        const color = agent.color || "#3b82f6";
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "absolute transition-transform duration-75 ease-out",
+            style: {
+              transform: `translate3d(${x}px, ${y}px, 0)`
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "svg",
+                {
+                  className: "h-5 w-5 drop-shadow-md",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "path",
+                    {
+                      d: "M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z",
+                      fill: color,
+                      stroke: "white",
+                      strokeWidth: "1"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: "mt-1 flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-md whitespace-nowrap",
+                  style: { backgroundColor: color },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: agent.name }),
+                    agent.statusMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "opacity-80 text-[10px]", children: [
+                      "(",
+                      agent.statusMessage,
+                      ")"
+                    ] })
+                  ]
+                }
+              )
+            ]
+          },
+          agent.agentId
+        );
+      })
+    }
+  );
+}
+
+// src/canvas/useStreamingCanvas.ts
+var import_react = require("react");
+var import_canvas = require("@pixerate/editor/canvas");
+function useStreamingCanvas(options) {
+  const managerRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const manager = new import_canvas.StreamingLayoutManager({
+      throttleMs: options.throttleMs,
+      glideDurationMs: options.glideDurationMs,
+      layoutOptions: options.layoutOptions,
+      onLayoutUpdated: options.onPositionsChange
+    });
+    managerRef.current = manager;
+    return () => {
+      manager.destroy();
+      managerRef.current = null;
+    };
+  }, [options.throttleMs, options.glideDurationMs, options.onPositionsChange]);
+  const pushStreamUpdate = (0, import_react.useCallback)(
+    (nodes, edges, currentPositions) => {
+      managerRef.current?.pushStreamUpdate(nodes, edges, currentPositions);
+    },
+    []
+  );
+  const flush = (0, import_react.useCallback)(
+    (nodes, edges, currentPositions) => {
+      managerRef.current?.flush(nodes, edges, currentPositions);
+    },
+    []
+  );
+  return {
+    pushStreamUpdate,
+    flush
+  };
+}
+
+// src/canvas/useCanvasGraph.ts
+var import_react2 = require("react");
+function useCanvasGraph(options = {}) {
+  const [nodes, setNodesState] = (0, import_react2.useState)(options.initialNodes ?? []);
+  const [edges, setEdgesState] = (0, import_react2.useState)(options.initialEdges ?? []);
+  const baselineNodesRef = (0, import_react2.useRef)(options.initialNodes ?? []);
+  const baselineEdgesRef = (0, import_react2.useRef)(options.initialEdges ?? []);
+  const setNodes = (0, import_react2.useCallback)(
+    (updater) => {
+      setNodesState((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        options.onNodesChange?.(next);
+        return next;
+      });
+    },
+    [options.onNodesChange]
+  );
+  const setEdges = (0, import_react2.useCallback)(
+    (updater) => {
+      setEdgesState((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        options.onEdgesChange?.(next);
+        return next;
+      });
+    },
+    [options.onEdgesChange]
+  );
+  const addNode = (0, import_react2.useCallback)(
+    (node) => {
+      setNodes((prev) => [...prev, node]);
+    },
+    [setNodes]
+  );
+  const removeNodes = (0, import_react2.useCallback)(
+    (ids) => {
+      const idSet = new Set(ids);
+      setNodes((prev) => prev.filter((n) => !idSet.has(n.id)));
+      setEdges((prev) => prev.filter((e) => !idSet.has(e.source) && !idSet.has(e.target)));
+    },
+    [setNodes, setEdges]
+  );
+  const updateNodeData = (0, import_react2.useCallback)(
+    (id, patch) => {
+      setNodes(
+        (prev) => prev.map((node) => {
+          if (node.id !== id) return node;
+          return {
+            ...node,
+            data: { ...node.data, ...patch }
+          };
+        })
+      );
+    },
+    [setNodes]
+  );
+  const updateNodePosition = (0, import_react2.useCallback)(
+    (id, position) => {
+      setNodes(
+        (prev) => prev.map((node) => {
+          if (node.id !== id) return node;
+          return {
+            ...node,
+            position: { ...position }
+          };
+        })
+      );
+    },
+    [setNodes]
+  );
+  const addEdge = (0, import_react2.useCallback)(
+    (edge) => {
+      setEdges((prev) => [...prev, edge]);
+    },
+    [setEdges]
+  );
+  const removeEdges = (0, import_react2.useCallback)(
+    (ids) => {
+      const idSet = new Set(ids);
+      setEdges((prev) => prev.filter((e) => !idSet.has(e.id)));
+    },
+    [setEdges]
+  );
+  const resetBaseline = (0, import_react2.useCallback)(() => {
+    baselineNodesRef.current = nodes;
+    baselineEdgesRef.current = edges;
+  }, [nodes, edges]);
+  const getDifferences = (0, import_react2.useCallback)(() => {
+    const currentNodesMap = new Map(nodes.map((n) => [n.id, n]));
+    const currentEdgesMap = new Map(edges.map((e) => [e.id, e]));
+    const baselineNodesMap = new Map(baselineNodesRef.current.map((n) => [n.id, n]));
+    const baselineEdgesMap = new Map(baselineEdgesRef.current.map((e) => [e.id, e]));
+    const changedNodes = [];
+    const removedNodes = [];
+    const changedEdges = [];
+    const removedEdges = [];
+    for (const [id, node] of currentNodesMap) {
+      const base = baselineNodesMap.get(id);
+      if (!base || base.position.x !== node.position.x || base.position.y !== node.position.y) {
+        changedNodes.push(node);
+      }
+    }
+    for (const [id, node] of baselineNodesMap) {
+      if (!currentNodesMap.has(id)) {
+        removedNodes.push(node);
+      }
+    }
+    for (const [id, edge] of currentEdgesMap) {
+      const base = baselineEdgesMap.get(id);
+      if (!base || base.source !== edge.source || base.target !== edge.target) {
+        changedEdges.push(edge);
+      }
+    }
+    for (const [id, edge] of baselineEdgesMap) {
+      if (!currentEdgesMap.has(id)) {
+        removedEdges.push(edge);
+      }
+    }
+    return { changedNodes, changedEdges, removedNodes, removedEdges };
+  }, [nodes, edges]);
+  return {
+    nodes,
+    edges,
+    setNodes,
+    setEdges,
+    addNode,
+    removeNodes,
+    updateNodeData,
+    updateNodePosition,
+    addEdge,
+    removeEdges,
+    resetBaseline,
+    getDifferences
+  };
+}
+
+// src/canvas/useCanvasLayout.ts
+var import_react3 = require("react");
+var import_canvas2 = require("@pixerate/editor/canvas");
+function useCanvasLayout(options) {
+  const { nodes, edges, setNodes, getNodesBounds, screenToFlowPosition } = options;
+  const applyLayout = (0, import_react3.useCallback)(
+    (layoutOptions = {}) => {
+      const layouted = (0, import_canvas2.getLayoutedNodes)(nodes, edges, getNodesBounds, layoutOptions);
+      setNodes(layouted);
+      return layouted;
+    },
+    [nodes, edges, getNodesBounds, setNodes]
+  );
+  const applyIncrementalLayout = (0, import_react3.useCallback)(
+    (incrementalOptions = {}) => {
+      const storedPositions = incrementalOptions.storedPositions ?? Object.fromEntries(nodes.map((n) => [n.id, n.position]));
+      const blended = (0, import_canvas2.ensureLayout)(nodes, edges, {
+        ...incrementalOptions,
+        storedPositions
+      });
+      setNodes(blended);
+      return blended;
+    },
+    [nodes, edges, setNodes]
+  );
+  const center = (0, import_react3.useCallback)(
+    (screenDimensions) => {
+      if (!screenToFlowPosition || !getNodesBounds) {
+        console.warn(
+          "[useCanvasLayout] Centering requires screenToFlowPosition and getNodesBounds options."
+        );
+        return;
+      }
+      const centered = (0, import_canvas2.centerNodes)(nodes, screenToFlowPosition, getNodesBounds, screenDimensions);
+      setNodes(centered);
+    },
+    [nodes, screenToFlowPosition, getNodesBounds, setNodes]
+  );
+  const getPlacementPosition = (0, import_react3.useCallback)(
+    (size, side = "right", nearNodeId, placementOptions = {}) => {
+      const rects = {};
+      for (const node of nodes) {
+        const width = node.measured?.width ?? node.width ?? 200;
+        const height = node.measured?.height ?? node.height ?? 60;
+        rects[node.id] = {
+          x: node.position.x,
+          y: node.position.y,
+          width,
+          height
+        };
+      }
+      return (0, import_canvas2.placeBeside)(rects, size, side, nearNodeId, placementOptions);
+    },
+    [nodes]
+  );
+  return {
+    applyLayout,
+    applyIncrementalLayout,
+    center,
+    getPlacementPosition,
+    getCenteredNodePosition: import_canvas2.getCenteredNodePosition
+  };
+}
+
+// src/canvas/useCanvasClipboard.ts
+var import_react4 = require("react");
+var import_canvas3 = require("@pixerate/editor/canvas");
+function useCanvasClipboard(options = {}) {
+  const copySelectedNodes = (0, import_react4.useCallback)(
+    (selectedNodes, connectedEdges, event) => {
+      const native = event && "nativeEvent" in event ? event.nativeEvent : event;
+      if (native && (0, import_canvas3.isEventFromTextInput)(native)) {
+        return false;
+      }
+      if (selectedNodes.length === 0) return false;
+      const serialized = (0, import_canvas3.serializeCanvasNodes)(selectedNodes, connectedEdges);
+      const clipboardData = event?.clipboardData || native?.clipboardData;
+      if (clipboardData) {
+        clipboardData.setData("application/json", serialized);
+        clipboardData.setData("text/plain", serialized);
+        event?.preventDefault?.();
+      } else if (typeof navigator !== "undefined" && navigator.clipboard) {
+        navigator.clipboard.writeText(serialized).catch(() => {
+        });
+      }
+      return true;
+    },
+    []
+  );
+  const handlePasteEvent = (0, import_react4.useCallback)(
+    async (event) => {
+      const native = "nativeEvent" in event ? event.nativeEvent : event;
+      if ((0, import_canvas3.isEventFromTextInput)(native)) {
+        return false;
+      }
+      const clipboardData = native?.clipboardData || event?.clipboardData;
+      if (!clipboardData) return false;
+      const prevent = () => {
+        event?.preventDefault?.();
+        native?.preventDefault?.();
+      };
+      const jsonText = clipboardData.getData("application/json");
+      if (jsonText) {
+        const parsed = (0, import_canvas3.parseCanvasClipboardData)(jsonText);
+        if (parsed && parsed.nodes.length > 0) {
+          prevent();
+          const remapped = (0, import_canvas3.remapPastedNodes)(parsed.nodes, parsed.edges);
+          await options.onPasteNodes?.(remapped.nodes, remapped.edges);
+          return true;
+        }
+      }
+      const text = clipboardData.getData("text/plain")?.trim();
+      if (text) {
+        const parsed = (0, import_canvas3.parseCanvasClipboardData)(text);
+        if (parsed && parsed.nodes.length > 0) {
+          prevent();
+          const remapped = (0, import_canvas3.remapPastedNodes)(parsed.nodes, parsed.edges);
+          await options.onPasteNodes?.(remapped.nodes, remapped.edges);
+          return true;
+        }
+        if ((0, import_canvas3.isValidUrl)(text)) {
+          prevent();
+          options.onPasteUrl?.(text);
+          return true;
+        }
+        if (options.onPasteText) {
+          prevent();
+          options.onPasteText(text);
+          return true;
+        }
+      }
+      return false;
+    },
+    [options]
+  );
+  return {
+    copySelectedNodes,
+    handlePasteEvent
+  };
+}
+
+// src/canvas/useCanvasShortcuts.ts
+var import_react5 = require("react");
+var import_canvas4 = require("@pixerate/editor/canvas");
+function useCanvasShortcuts(options = {}) {
+  const {
+    targetElement,
+    enabled = true,
+    onCopy,
+    onCut,
+    onPaste,
+    onDelete,
+    onDuplicate,
+    onSelectAll,
+    onGroup,
+    onUngroup,
+    onZoomIn,
+    onZoomOut,
+    onFitView,
+    getSelectedNodes
+  } = options;
+  (0, import_react5.useEffect)(() => {
+    if (!enabled) return;
+    const target = targetElement ?? (typeof window !== "undefined" ? window : null);
+    if (!target) return;
+    function handleKeyDown(event) {
+      const keyboardEvent = event;
+      if ((0, import_canvas4.isEventFromTextInput)(keyboardEvent)) {
+        return;
+      }
+      const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+      const isMod = isMac ? keyboardEvent.metaKey : keyboardEvent.ctrlKey;
+      const key = keyboardEvent.key.toLowerCase();
+      const selectedNodes = getSelectedNodes ? getSelectedNodes() : [];
+      if ((keyboardEvent.key === "Backspace" || keyboardEvent.key === "Delete") && !isMod) {
+        if (selectedNodes.length > 0 && onDelete) {
+          keyboardEvent.preventDefault();
+          onDelete(selectedNodes);
+        }
+        return;
+      }
+      if (isMod && key === "d") {
+        if (selectedNodes.length > 0 && onDuplicate) {
+          keyboardEvent.preventDefault();
+          onDuplicate(selectedNodes);
+        }
+        return;
+      }
+      if (isMod && key === "a" && onSelectAll) {
+        keyboardEvent.preventDefault();
+        onSelectAll();
+        return;
+      }
+      if (isMod && key === "g" && !keyboardEvent.shiftKey && onGroup) {
+        if (selectedNodes.length > 0) {
+          keyboardEvent.preventDefault();
+          onGroup(selectedNodes);
+        }
+        return;
+      }
+      if (isMod && key === "g" && keyboardEvent.shiftKey && onUngroup) {
+        if (selectedNodes.length > 0) {
+          keyboardEvent.preventDefault();
+          onUngroup(selectedNodes);
+        }
+        return;
+      }
+      if (isMod && (key === "+" || key === "=") && onZoomIn) {
+        keyboardEvent.preventDefault();
+        onZoomIn();
+        return;
+      }
+      if (isMod && key === "-" && onZoomOut) {
+        keyboardEvent.preventDefault();
+        onZoomOut();
+        return;
+      }
+      if (isMod && key === "0" && onFitView) {
+        keyboardEvent.preventDefault();
+        onFitView();
+        return;
+      }
+    }
+    target.addEventListener("keydown", handleKeyDown);
+    return () => {
+      target.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [
+    targetElement,
+    enabled,
+    onCopy,
+    onCut,
+    onPaste,
+    onDelete,
+    onDuplicate,
+    onSelectAll,
+    onGroup,
+    onUngroup,
+    onZoomIn,
+    onZoomOut,
+    onFitView,
+    getSelectedNodes
+  ]);
+}
+
+// src/canvas/useCanvasDocking.ts
+var import_react6 = require("react");
+function useCanvasDocking(options = {}) {
+  const {
+    strategy = "center-point",
+    dockableTypes,
+    targetTypes,
+    onDockHover,
+    onDockLeave,
+    onDockDrop
+  } = options;
+  const activeDockTargetRef = (0, import_react6.useRef)(null);
+  const isDockable = (0, import_react6.useCallback)(
+    (node) => {
+      if (!dockableTypes || dockableTypes.length === 0) return true;
+      return !!node.type && dockableTypes.includes(node.type);
+    },
+    [dockableTypes]
+  );
+  const isTarget = (0, import_react6.useCallback)(
+    (node) => {
+      if (!targetTypes || targetTypes.length === 0) return true;
+      return !!node.type && targetTypes.includes(node.type);
+    },
+    [targetTypes]
+  );
+  const findDockTarget = (0, import_react6.useCallback)(
+    (draggedNode, candidates, cursorPos) => {
+      if (!isDockable(draggedNode)) return null;
+      const draggedWidth = draggedNode.measured?.width ?? draggedNode.width ?? 200;
+      const draggedHeight = draggedNode.measured?.height ?? draggedNode.height ?? 60;
+      const draggedCenter = {
+        x: draggedNode.position.x + draggedWidth / 2,
+        y: draggedNode.position.y + draggedHeight / 2
+      };
+      const validCandidates = candidates.filter(
+        (c) => c.id !== draggedNode.id && isTarget(c)
+      );
+      let bestTarget = null;
+      let maxIntersectionArea = 0;
+      let minDistance = Infinity;
+      for (const candidate of validCandidates) {
+        const candWidth = candidate.measured?.width ?? candidate.width ?? 200;
+        const candHeight = candidate.measured?.height ?? candidate.height ?? 60;
+        const candRect = {
+          x: candidate.position.x,
+          y: candidate.position.y,
+          width: candWidth,
+          height: candHeight
+        };
+        const overlapX = Math.max(
+          0,
+          Math.min(draggedNode.position.x + draggedWidth, candRect.x + candRect.width) - Math.max(draggedNode.position.x, candRect.x)
+        );
+        const overlapY = Math.max(
+          0,
+          Math.min(draggedNode.position.y + draggedHeight, candRect.y + candRect.height) - Math.max(draggedNode.position.y, candRect.y)
+        );
+        const overlapArea = overlapX * overlapY;
+        if (strategy === "max-overlap") {
+          if (overlapArea > maxIntersectionArea) {
+            maxIntersectionArea = overlapArea;
+            bestTarget = candidate;
+          }
+        } else if (strategy === "center-point") {
+          const candCenter = {
+            x: candRect.x + candRect.width / 2,
+            y: candRect.y + candRect.height / 2
+          };
+          const dist = Math.hypot(
+            draggedCenter.x - candCenter.x,
+            draggedCenter.y - candCenter.y
+          );
+          if (overlapArea > 0 && dist < minDistance) {
+            minDistance = dist;
+            bestTarget = candidate;
+          }
+        } else if (strategy === "first") {
+          if (overlapArea > 0) return candidate;
+        }
+      }
+      return bestTarget;
+    },
+    [isDockable, isTarget, strategy]
+  );
+  const updateDragOver = (0, import_react6.useCallback)(
+    (draggedNode, candidates, cursorPos) => {
+      const target = findDockTarget(draggedNode, candidates, cursorPos);
+      if (target?.id !== activeDockTargetRef.current?.id) {
+        if (activeDockTargetRef.current) {
+          onDockLeave?.(activeDockTargetRef.current, draggedNode);
+        }
+        activeDockTargetRef.current = target;
+        if (target) {
+          onDockHover?.(target, draggedNode);
+        }
+      }
+    },
+    [findDockTarget, onDockHover, onDockLeave]
+  );
+  const finalizeDock = (0, import_react6.useCallback)(
+    (draggedNode) => {
+      if (activeDockTargetRef.current) {
+        onDockDrop?.(activeDockTargetRef.current, draggedNode);
+        activeDockTargetRef.current = null;
+      }
+    },
+    [onDockDrop]
+  );
+  return {
+    findDockTarget,
+    updateDragOver,
+    finalizeDock,
+    getActiveDockTarget: () => activeDockTargetRef.current
+  };
+}
+
+// src/canvas/useCanvasExplosion.ts
+var import_react7 = require("react");
+var import_canvas5 = require("@pixerate/editor/canvas");
+function useCanvasExplosion(target) {
+  const snapshotsRef = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
+  const explodeNode = (0, import_react7.useCallback)(
+    (parentNodeId, options) => {
+      const { nodes, edges, setNodes, setEdges } = target;
+      const parent = nodes.find((n) => n.id === parentNodeId);
+      if (!parent || options.childNodes.length === 0) return;
+      const originPos = { ...parent.position };
+      const displacedMap = options.displacementStrategy === "directional" ? (0, import_canvas5.calculateDirectionalDisplacement)({
+        existingNodes: nodes,
+        originNode: parent,
+        childNodes: options.childNodes,
+        options: options.directionalOptions
+      }) : /* @__PURE__ */ new Map();
+      const snapshot = {
+        parentId: parentNodeId,
+        childNodeIds: options.childNodes.map((c) => c.id),
+        childEdgeIds: (options.childEdges ?? []).map((e) => e.id),
+        displacedNodes: Array.from(displacedMap.entries()).map(([id]) => {
+          const node = nodes.find((n) => n.id === id);
+          return { id, originalPosition: { ...node.position } };
+        }),
+        timestamp: Date.now()
+      };
+      snapshotsRef.current.set(parentNodeId, snapshot);
+      const initialChildren = options.childNodes.map((child) => ({
+        ...child,
+        position: { ...originPos }
+      }));
+      const mergedNodes = [...nodes, ...initialChildren];
+      setNodes(mergedNodes);
+      if (options.childEdges && options.childEdges.length > 0) {
+        setEdges((prev) => [...prev, ...options.childEdges]);
+      }
+      const trajectory = options.trajectory ?? (0, import_canvas5.createFanOutTrajectory)();
+      const transitions = [];
+      options.childNodes.forEach((child, index) => {
+        const liveChild = mergedNodes.find((n) => n.id === child.id);
+        if (liveChild) {
+          transitions.push({
+            node: liveChild,
+            from: originPos,
+            to: child.position,
+            trajectory,
+            index,
+            total: options.childNodes.length,
+            duration: options.duration ?? 400,
+            easing: options.easing
+          });
+        }
+      });
+      displacedMap.forEach((targetPos, nodeId) => {
+        const node = mergedNodes.find((n) => n.id === nodeId);
+        if (node) {
+          transitions.push({
+            node,
+            from: { ...node.position },
+            to: targetPos,
+            trajectory: import_canvas5.linearPositionTrajectory,
+            duration: options.duration ?? 400,
+            easing: options.easing
+          });
+        }
+      });
+      (0, import_canvas5.runMultiNodeTransition)(transitions, {
+        onUpdate: () => setNodes([...mergedNodes]),
+        onComplete: options.onComplete
+      });
+    },
+    [target]
+  );
+  const collapseNode = (0, import_react7.useCallback)(
+    (parentNodeId, options = {}) => {
+      const { nodes, setNodes, setEdges } = target;
+      const snapshot = snapshotsRef.current.get(parentNodeId);
+      if (!snapshot) return;
+      const parent = nodes.find((n) => n.id === parentNodeId);
+      const originPos = parent ? { ...parent.position } : { x: 0, y: 0 };
+      const childIdSet = new Set(snapshot.childNodeIds);
+      const edgeIdSet = new Set(snapshot.childEdgeIds);
+      const transitions = [];
+      nodes.forEach((node) => {
+        if (childIdSet.has(node.id)) {
+          transitions.push({
+            node,
+            from: { ...node.position },
+            to: originPos,
+            duration: options.duration ?? 300,
+            easing: options.easing,
+            trajectory: options.trajectory
+          });
+        }
+      });
+      snapshot.displacedNodes.forEach((disp) => {
+        const node = nodes.find((n) => n.id === disp.id);
+        if (node) {
+          transitions.push({
+            node,
+            from: { ...node.position },
+            to: disp.originalPosition,
+            duration: options.duration ?? 300,
+            easing: options.easing,
+            trajectory: import_canvas5.linearPositionTrajectory
+          });
+        }
+      });
+      (0, import_canvas5.runMultiNodeTransition)(transitions, {
+        onUpdate: () => setNodes([...nodes]),
+        onComplete: () => {
+          setNodes((prev) => prev.filter((n) => !childIdSet.has(n.id)));
+          setEdges((prev) => prev.filter((e) => !edgeIdSet.has(e.id)));
+          snapshotsRef.current.delete(parentNodeId);
+          options.onComplete?.();
+        }
+      });
+    },
+    [target]
+  );
+  return {
+    explodeNode,
+    collapseNode,
+    isExploded: (parentNodeId) => snapshotsRef.current.has(parentNodeId),
+    getSnapshot: (parentNodeId) => snapshotsRef.current.get(parentNodeId)
+  };
+}
+
+// src/canvas/index.ts
+var import_canvas6 = require("@pixerate/editor/canvas");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AgentPresenceLayer,
+  boundsOf,
+  calculateDagreReflowDisplacement,
+  calculateDirectionalDisplacement,
+  centerNodes,
+  centre,
+  computeNodesBoundingBox,
+  createBezierTrajectory,
+  createFanOutTrajectory,
+  defaultEasing,
+  ensureLayout,
+  estimateNodeSize,
+  flowSide,
+  getCenteredNodePosition,
+  getLayoutedNodes,
+  isEventFromTextInput,
+  isValidCanvasNode,
+  isValidUrl,
+  linearPositionTrajectory,
+  linearTrajectory,
+  overlaps,
+  parseCanvasClipboardData,
+  placeBeside,
+  remapPastedNodes,
+  repositionNodesTo,
+  runMultiNodeTransition,
+  serializeCanvasNodes,
+  useCanvasClipboard,
+  useCanvasDocking,
+  useCanvasExplosion,
+  useCanvasGraph,
+  useCanvasLayout,
+  useCanvasShortcuts,
+  useStreamingCanvas
+});
+//# sourceMappingURL=index.cjs.map