system-canvas-standalone 0.2.3 → 0.2.4

package/dist/system-canvas.js

@@ -12759,12 +12759,12 @@ var SystemCanvas = (() => {
     render: () => render,
     themes: () => themes
   });
-  var import_react24 = __toESM(require_react(), 1);
+  var import_react25 = __toESM(require_react(), 1);
   var import_client = __toESM(require_client(), 1);
 
   // ../react/dist/components/SystemCanvas.js
   var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1);
-  var import_react23 = __toESM(require_react(), 1);
+  var import_react24 = __toESM(require_react(), 1);
 
   // ../core/dist/themes/dark.js
   var darkTheme = {
@@ -15349,7 +15349,7 @@ var SystemCanvas = (() => {
   var import_react7 = __toESM(require_react(), 1);
   var clipboardSnapshot = null;
   function useMultiSelectClipboard(options) {
-    const { selectedIdsRef, nodesRef, edgesRef, viewport, onNodeAdd, onEdgeAdd, canvasRef, getCursorScreenPos } = options;
+    const { selectedIdsRef, nodesRef, edgesRef, viewport, onNodeAdd, onEdgeAdd, canvasRef, getCursorScreenPos, onBeginBatch, onEndBatch } = options;
     const getCursorScreenPosRef = (0, import_react7.useRef)(getCursorScreenPos);
     getCursorScreenPosRef.current = getCursorScreenPos;
     const onNodeAddRef = (0, import_react7.useRef)(onNodeAdd);
@@ -15358,6 +15358,10 @@ var SystemCanvas = (() => {
     onEdgeAddRef.current = onEdgeAdd;
     const canvasRefRef = (0, import_react7.useRef)(canvasRef);
     canvasRefRef.current = canvasRef;
+    const onBeginBatchRef = (0, import_react7.useRef)(onBeginBatch);
+    onBeginBatchRef.current = onBeginBatch;
+    const onEndBatchRef = (0, import_react7.useRef)(onEndBatch);
+    onEndBatchRef.current = onEndBatch;
     (0, import_react7.useEffect)(() => {
       const handler = (e) => {
         const active = document.activeElement;
@@ -15430,12 +15434,14 @@ var SystemCanvas = (() => {
             toNode: oldToNew.get(edge.toNode)
           }));
           const ref = canvasRefRef.current;
+          onBeginBatchRef.current?.();
           for (const node of clonedNodes) {
             onNodeAddRef.current(node, ref);
           }
           for (const edge of clonedEdges) {
             onEdgeAddRef.current(edge, ref);
           }
+          onEndBatchRef.current?.();
           e.preventDefault();
           return;
         }
@@ -15447,8 +15453,298 @@ var SystemCanvas = (() => {
     }, [selectedIdsRef, nodesRef, edgesRef, viewport]);
   }
 
-  // ../react/dist/hooks/useZoomNavigation.js
+  // ../react/dist/hooks/useCommandHistory.js
   var import_react8 = __toESM(require_react(), 1);
+  function getCanvasRef(cmd) {
+    if (cmd.type === "batch") {
+      return cmd.commands.length > 0 ? getCanvasRef(cmd.commands[0]) : void 0;
+    }
+    return cmd.canvasRef;
+  }
+  function useCommandHistory(options) {
+    const { nodesRef, edgesRef, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, onEdgeAdd, onEdgeUpdate, onEdgeDelete, maxDepth = 50, enabled = true, onUndo, onRedo } = options;
+    const onNodeAddRef = (0, import_react8.useRef)(onNodeAdd);
+    onNodeAddRef.current = onNodeAdd;
+    const onNodeUpdateRef = (0, import_react8.useRef)(onNodeUpdate);
+    onNodeUpdateRef.current = onNodeUpdate;
+    const onNodesUpdateRef = (0, import_react8.useRef)(onNodesUpdate);
+    onNodesUpdateRef.current = onNodesUpdate;
+    const onNodeDeleteRef = (0, import_react8.useRef)(onNodeDelete);
+    onNodeDeleteRef.current = onNodeDelete;
+    const onNodesDeleteRef = (0, import_react8.useRef)(onNodesDelete);
+    onNodesDeleteRef.current = onNodesDelete;
+    const onEdgeAddRef = (0, import_react8.useRef)(onEdgeAdd);
+    onEdgeAddRef.current = onEdgeAdd;
+    const onEdgeUpdateRef = (0, import_react8.useRef)(onEdgeUpdate);
+    onEdgeUpdateRef.current = onEdgeUpdate;
+    const onEdgeDeleteRef = (0, import_react8.useRef)(onEdgeDelete);
+    onEdgeDeleteRef.current = onEdgeDelete;
+    const undoStack = (0, import_react8.useRef)([]);
+    const redoStack = (0, import_react8.useRef)([]);
+    const isUndoingRef = (0, import_react8.useRef)(false);
+    const pendingBatchRef = (0, import_react8.useRef)(null);
+    const [canUndo, setCanUndo] = (0, import_react8.useState)(false);
+    const [canRedo, setCanRedo] = (0, import_react8.useState)(false);
+    function syncBooleans() {
+      setCanUndo(undoStack.current.length > 0);
+      setCanRedo(redoStack.current.length > 0);
+    }
+    function pushCommand(cmd) {
+      if (pendingBatchRef.current) {
+        pendingBatchRef.current.push(cmd);
+        return;
+      }
+      undoStack.current.push(cmd);
+      if (undoStack.current.length > maxDepth)
+        undoStack.current.shift();
+      redoStack.current = [];
+      syncBooleans();
+    }
+    function applyInverse(cmd) {
+      switch (cmd.type) {
+        case "node:add":
+          onNodeDeleteRef.current?.(cmd.node.id, cmd.canvasRef);
+          break;
+        case "node:delete":
+          onNodeAddRef.current?.(cmd.node, cmd.canvasRef);
+          break;
+        case "node:update":
+          onNodeUpdateRef.current?.(cmd.id, cmd.prev, cmd.canvasRef);
+          break;
+        case "nodes:update":
+          onNodesUpdateRef.current?.(cmd.updates.map((u) => ({ id: u.id, patch: u.prev })), cmd.canvasRef);
+          break;
+        case "nodes:delete":
+          for (const node of cmd.nodes) {
+            onNodeAddRef.current?.(node, cmd.canvasRef);
+          }
+          break;
+        case "edge:add":
+          onEdgeDeleteRef.current?.(cmd.edge.id, cmd.canvasRef);
+          break;
+        case "edge:delete":
+          onEdgeAddRef.current?.(cmd.edge, cmd.canvasRef);
+          break;
+        case "edge:update":
+          onEdgeUpdateRef.current?.(cmd.id, cmd.prev, cmd.canvasRef);
+          break;
+        case "batch":
+          for (let i = cmd.commands.length - 1; i >= 0; i--) {
+            applyInverse(cmd.commands[i]);
+          }
+          break;
+      }
+    }
+    function applyForward(cmd) {
+      switch (cmd.type) {
+        case "node:add":
+          onNodeAddRef.current?.(cmd.node, cmd.canvasRef);
+          break;
+        case "node:delete":
+          onNodeDeleteRef.current?.(cmd.node.id, cmd.canvasRef);
+          break;
+        case "node:update":
+          onNodeUpdateRef.current?.(cmd.id, cmd.patch, cmd.canvasRef);
+          break;
+        case "nodes:update":
+          onNodesUpdateRef.current?.(cmd.updates.map((u) => ({ id: u.id, patch: u.patch })), cmd.canvasRef);
+          break;
+        case "nodes:delete":
+          onNodesDeleteRef.current?.(cmd.nodes.map((n) => n.id), cmd.canvasRef);
+          break;
+        case "edge:add":
+          onEdgeAddRef.current?.(cmd.edge, cmd.canvasRef);
+          break;
+        case "edge:delete":
+          onEdgeDeleteRef.current?.(cmd.edge.id, cmd.canvasRef);
+          break;
+        case "edge:update":
+          onEdgeUpdateRef.current?.(cmd.id, cmd.patch, cmd.canvasRef);
+          break;
+        case "batch":
+          for (const c of cmd.commands) {
+            applyForward(c);
+          }
+          break;
+      }
+    }
+    const undo = (0, import_react8.useCallback)(() => {
+      if (!enabled)
+        return;
+      const cmd = undoStack.current.pop();
+      if (!cmd)
+        return;
+      isUndoingRef.current = true;
+      applyInverse(cmd);
+      isUndoingRef.current = false;
+      redoStack.current.push(cmd);
+      syncBooleans();
+      onUndo?.(getCanvasRef(cmd));
+    }, [enabled, onUndo]);
+    const redo = (0, import_react8.useCallback)(() => {
+      if (!enabled)
+        return;
+      const cmd = redoStack.current.pop();
+      if (!cmd)
+        return;
+      isUndoingRef.current = true;
+      applyForward(cmd);
+      isUndoingRef.current = false;
+      undoStack.current.push(cmd);
+      if (undoStack.current.length > maxDepth)
+        undoStack.current.shift();
+      syncBooleans();
+      onRedo?.(getCanvasRef(cmd));
+    }, [enabled, onRedo, maxDepth]);
+    const beginBatch = (0, import_react8.useCallback)(() => {
+      if (!enabled)
+        return;
+      pendingBatchRef.current = [];
+    }, [enabled]);
+    const endBatch = (0, import_react8.useCallback)(() => {
+      if (!enabled)
+        return;
+      const cmds = pendingBatchRef.current;
+      pendingBatchRef.current = null;
+      if (!cmds || cmds.length === 0)
+        return;
+      if (cmds.length === 1) {
+        pushCommand(cmds[0]);
+        return;
+      }
+      undoStack.current.push({ type: "batch", commands: cmds });
+      if (undoStack.current.length > maxDepth)
+        undoStack.current.shift();
+      redoStack.current = [];
+      syncBooleans();
+    }, [enabled, maxDepth]);
+    const wrappedOnNodeAdd = (0, import_react8.useCallback)(
+      (node, canvasRef) => {
+        if (enabled && !isUndoingRef.current) {
+          pushCommand({ type: "node:add", node, canvasRef });
+        }
+        onNodeAddRef.current?.(node, canvasRef);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [enabled]
+    );
+    const wrappedOnNodeUpdate = (0, import_react8.useCallback)(
+      (id2, patch, canvasRef) => {
+        if (enabled && !isUndoingRef.current) {
+          const node = nodesRef.current?.find((n) => n.id === id2);
+          if (node) {
+            const prev = Object.fromEntries(Object.keys(patch).map((k) => [k, node[k]]));
+            pushCommand({ type: "node:update", id: id2, prev, patch, canvasRef });
+          }
+        }
+        onNodeUpdateRef.current?.(id2, patch, canvasRef);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [enabled, nodesRef]
+    );
+    const wrappedOnNodesUpdate = (0, import_react8.useCallback)(
+      (updates, canvasRef) => {
+        if (enabled && !isUndoingRef.current) {
+          const enriched = [];
+          for (const u of updates) {
+            const node = nodesRef.current?.find((n) => n.id === u.id);
+            if (node) {
+              const prev = Object.fromEntries(Object.keys(u.patch).map((k) => [k, node[k]]));
+              enriched.push({ id: u.id, prev, patch: u.patch });
+            }
+          }
+          if (enriched.length > 0) {
+            pushCommand({ type: "nodes:update", updates: enriched, canvasRef });
+          }
+        }
+        onNodesUpdateRef.current?.(updates, canvasRef);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [enabled, nodesRef]
+    );
+    const wrappedOnNodeDelete = (0, import_react8.useCallback)(
+      (nodeId, canvasRef) => {
+        if (enabled && !isUndoingRef.current) {
+          const node = nodesRef.current?.find((n) => n.id === nodeId);
+          if (node) {
+            pushCommand({ type: "node:delete", node, canvasRef });
+          }
+        }
+        onNodeDeleteRef.current?.(nodeId, canvasRef);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [enabled, nodesRef]
+    );
+    const wrappedOnNodesDelete = (0, import_react8.useCallback)(
+      (nodeIds, canvasRef) => {
+        if (enabled && !isUndoingRef.current) {
+          const nodes = nodesRef.current?.filter((n) => nodeIds.includes(n.id)) ?? [];
+          if (nodes.length > 0) {
+            pushCommand({ type: "nodes:delete", nodes, canvasRef });
+          }
+        }
+        onNodesDeleteRef.current?.(nodeIds, canvasRef);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [enabled, nodesRef]
+    );
+    const wrappedOnEdgeAdd = (0, import_react8.useCallback)(
+      (edge, canvasRef) => {
+        if (enabled && !isUndoingRef.current) {
+          pushCommand({ type: "edge:add", edge, canvasRef });
+        }
+        onEdgeAddRef.current?.(edge, canvasRef);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [enabled]
+    );
+    const wrappedOnEdgeUpdate = (0, import_react8.useCallback)(
+      (id2, patch, canvasRef) => {
+        if (enabled && !isUndoingRef.current) {
+          const edge = edgesRef.current?.find((e) => e.id === id2);
+          if (edge) {
+            const prev = Object.fromEntries(Object.keys(patch).map((k) => [k, edge[k]]));
+            pushCommand({ type: "edge:update", id: id2, prev, patch, canvasRef });
+          }
+        }
+        onEdgeUpdateRef.current?.(id2, patch, canvasRef);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [enabled, edgesRef]
+    );
+    const wrappedOnEdgeDelete = (0, import_react8.useCallback)(
+      (edgeId, canvasRef) => {
+        if (enabled && !isUndoingRef.current) {
+          const edge = edgesRef.current?.find((e) => e.id === edgeId);
+          if (edge) {
+            pushCommand({ type: "edge:delete", edge, canvasRef });
+          }
+        }
+        onEdgeDeleteRef.current?.(edgeId, canvasRef);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [enabled, edgesRef]
+    );
+    return {
+      wrappedOnNodeAdd,
+      wrappedOnNodeUpdate,
+      wrappedOnNodesUpdate,
+      wrappedOnNodeDelete,
+      wrappedOnNodesDelete,
+      wrappedOnEdgeAdd,
+      wrappedOnEdgeUpdate,
+      wrappedOnEdgeDelete,
+      beginBatch,
+      endBatch,
+      undo,
+      redo,
+      canUndo,
+      canRedo
+    };
+  }
+
+  // ../react/dist/hooks/useZoomNavigation.js
+  var import_react9 = __toESM(require_react(), 1);
   function expandRect(rect, factor) {
     if (factor === 1)
       return rect;
@@ -15486,16 +15782,16 @@ var SystemCanvas = (() => {
   }
   function useZoomNavigation(options) {
     const { enabled, config, nodes, currentCanvas, parentFrame, canvases, onResolveCanvas, onSeedCanvas, theme, getViewportSize, getCursorScreenPos, onEnter, onExit } = options;
-    const committingRef = (0, import_react8.useRef)(false);
-    (0, import_react8.useEffect)(() => {
+    const committingRef = (0, import_react9.useRef)(false);
+    (0, import_react9.useEffect)(() => {
       committingRef.current = false;
     }, [currentCanvas]);
-    const exitArmedRef = (0, import_react8.useRef)(false);
-    (0, import_react8.useEffect)(() => {
+    const exitArmedRef = (0, import_react9.useRef)(false);
+    (0, import_react9.useEffect)(() => {
       exitArmedRef.current = false;
     }, [currentCanvas, parentFrame]);
-    const prefetchRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
-    const prefetch = (0, import_react8.useCallback)((ref) => {
+    const prefetchRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+    const prefetch = (0, import_react9.useCallback)((ref) => {
       if (!onResolveCanvas)
         return;
       if (canvases?.[ref])
@@ -15513,7 +15809,7 @@ var SystemCanvas = (() => {
         state.loading = false;
       });
     }, [canvases, onResolveCanvas, onSeedCanvas]);
-    const handleViewportChange = (0, import_react8.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react9.useCallback)((vp) => {
       if (!enabled)
         return;
       if (committingRef.current)
@@ -15652,7 +15948,7 @@ var SystemCanvas = (() => {
       onEnter,
       onExit
     ]);
-    const clearCommitting = (0, import_react8.useCallback)(() => {
+    const clearCommitting = (0, import_react9.useCallback)(() => {
       committingRef.current = false;
     }, []);
     return { handleViewportChange, clearCommitting };
@@ -15660,10 +15956,10 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/Viewport.js
   var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
-  var import_react17 = __toESM(require_react(), 1);
+  var import_react18 = __toESM(require_react(), 1);
 
   // ../react/dist/hooks/useViewport.js
-  var import_react9 = __toESM(require_react(), 1);
+  var import_react10 = __toESM(require_react(), 1);
 
   // ../../node_modules/d3-dispatch/src/dispatch.js
   var noop = { value: () => {
@@ -18406,13 +18702,13 @@ var SystemCanvas = (() => {
   // ../react/dist/hooks/useViewport.js
   function useViewport(options) {
     const { minZoom, maxZoom, defaultViewport, onViewportChange, marqueeActiveRef } = options;
-    const svgRef = (0, import_react9.useRef)(null);
-    const groupRef = (0, import_react9.useRef)(null);
-    const viewport = (0, import_react9.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
-    const zoomBehaviorRef = (0, import_react9.useRef)(null);
-    const onViewportChangeRef = (0, import_react9.useRef)(onViewportChange);
+    const svgRef = (0, import_react10.useRef)(null);
+    const groupRef = (0, import_react10.useRef)(null);
+    const viewport = (0, import_react10.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
+    const zoomBehaviorRef = (0, import_react10.useRef)(null);
+    const onViewportChangeRef = (0, import_react10.useRef)(onViewportChange);
     onViewportChangeRef.current = onViewportChange;
-    (0, import_react9.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       const svg = svgRef.current;
       const group = groupRef.current;
       if (!svg || !group)
@@ -18452,7 +18748,7 @@ var SystemCanvas = (() => {
         selection2.on(".zoom", null);
       };
     }, [minZoom, maxZoom]);
-    const fitToContent = (0, import_react9.useCallback)((nodes, animate = true) => {
+    const fitToContent = (0, import_react10.useCallback)((nodes, animate = true) => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current || nodes.length === 0)
         return;
@@ -18465,13 +18761,13 @@ var SystemCanvas = (() => {
         select_default2(svg).call(zoomBehaviorRef.current.transform, t);
       }
     }, []);
-    const resetZoom = (0, import_react9.useCallback)(() => {
+    const resetZoom = (0, import_react10.useCallback)(() => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current)
         return;
       select_default2(svg).transition().duration(400).call(zoomBehaviorRef.current.transform, identity2);
     }, []);
-    const setTransform = (0, import_react9.useCallback)((transform2, options2) => {
+    const setTransform = (0, import_react10.useCallback)((transform2, options2) => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current)
         return;
@@ -18483,7 +18779,7 @@ var SystemCanvas = (() => {
         sel.call(zoomBehaviorRef.current.transform, t);
       }
     }, []);
-    const zoomToNode = (0, import_react9.useCallback)((node, onComplete, options2) => {
+    const zoomToNode = (0, import_react10.useCallback)((node, onComplete, options2) => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current) {
         onComplete?.();
@@ -18677,9 +18973,9 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/RefIndicator.js
   var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
-  var import_react10 = __toESM(require_react(), 1);
+  var import_react11 = __toESM(require_react(), 1);
   function RefIndicator({ node, theme, nodeX, nodeY, nodeWidth, nodeHeight, strokeColor, strokeWidth, corner = "bottom-right", size: sizeProp, onNavigate }) {
-    const [hover, setHover] = (0, import_react10.useState)(false);
+    const [hover, setHover] = (0, import_react11.useState)(false);
     const iconKind = theme.node.refIndicator.icon;
     if (iconKind === "none")
       return null;
@@ -18750,7 +19046,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/CategorySlotsLayer.js
   var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
-  var import_react12 = __toESM(require_react(), 1);
+  var import_react13 = __toESM(require_react(), 1);
 
   // ../react/dist/primitives/NodeColorFill.js
   var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
@@ -18870,9 +19166,9 @@ var SystemCanvas = (() => {
 
   // ../react/dist/primitives/NodeText.js
   var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
-  var import_react11 = __toESM(require_react(), 1);
+  var import_react12 = __toESM(require_react(), 1);
   function NodeText({ region, value, theme, color: color2, fill, align = "start", fontWeight = 500, uppercase = false, useLabelFont = false, fontFamily, fontSize: fontSizeProp, wrap = false, maxLines, lineHeight: lineHeightProp, verticalAlign = "top" }) {
-    const reactId = (0, import_react11.useId)();
+    const reactId = (0, import_react12.useId)();
     const safeId = reactId.replace(/:/g, "");
     if (!value)
       return null;
@@ -18946,8 +19242,8 @@ var SystemCanvas = (() => {
   // ../react/dist/components/CategorySlotsLayer.js
   function CategorySlotsLayer({ node, theme, canvases, slots: slotsProp }) {
     const slots = slotsProp ?? getCategorySlots(node, theme);
-    const regions = (0, import_react12.useMemo)(() => computeCategorySlotRegions(node, theme, slots), [node, theme, slots]);
-    const reactId = (0, import_react12.useId)();
+    const regions = (0, import_react13.useMemo)(() => computeCategorySlotRegions(node, theme, slots), [node, theme, slots]);
+    const reactId = (0, import_react13.useId)();
     const clipId = `sc-edge-clip-${reactId.replace(/:/g, "")}`;
     if (!slots)
       return null;
@@ -19180,7 +19476,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/ResizeHandles.js
   var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
-  var import_react13 = __toESM(require_react(), 1);
+  var import_react14 = __toESM(require_react(), 1);
   var HANDLE_SIZE = 7;
   var CORNERS = [
     { corner: "nw", cursor: "nwse-resize", anchor: "nw" },
@@ -19191,7 +19487,7 @@ var SystemCanvas = (() => {
   var cornerInset = (cornerRadius) => Math.min(cornerRadius * 0.25, 3);
   function ResizeHandles({ node, theme, onHandlePointerDown }) {
     const { x, y, width, height } = node;
-    const [hoveredCorner, setHoveredCorner] = (0, import_react13.useState)(null);
+    const [hoveredCorner, setHoveredCorner] = (0, import_react14.useState)(null);
     const handleColor = node.resolvedStroke ?? theme.node.labelColor;
     const i = cornerInset(node.resolvedCornerRadius);
     const anchorPos = (anchor) => {
@@ -19302,7 +19598,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/NodeEditor.js
   var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
-  var import_react14 = __toESM(require_react(), 1);
+  var import_react15 = __toESM(require_react(), 1);
   function NodeEditor({ node, theme, onCommit, onCancel }) {
     const editableFields = useCategoryFields(node, theme);
     if (editableFields) {
@@ -19321,11 +19617,11 @@ var SystemCanvas = (() => {
   }
   function SingleFieldEditor({ node, theme, onCommit, onCancel }) {
     const initial = getInitialValue(node);
-    const [value, setValue] = (0, import_react14.useState)(initial);
-    const textareaRef = (0, import_react14.useRef)(null);
-    const inputRef = (0, import_react14.useRef)(null);
-    const committedRef = (0, import_react14.useRef)(false);
-    (0, import_react14.useEffect)(() => {
+    const [value, setValue] = (0, import_react15.useState)(initial);
+    const textareaRef = (0, import_react15.useRef)(null);
+    const inputRef = (0, import_react15.useRef)(null);
+    const committedRef = (0, import_react15.useRef)(false);
+    (0, import_react15.useEffect)(() => {
       const el = textareaRef.current ?? inputRef.current;
       if (el) {
         el.focus();
@@ -19421,10 +19717,10 @@ var SystemCanvas = (() => {
     }
   }
   function FormEditor({ node, theme, fields, onCommit, onCancel }) {
-    const initial = (0, import_react14.useMemo)(() => readInitialValues(node, fields), [node, fields]);
-    const [values, setValues] = (0, import_react14.useState)(initial);
-    const committedRef = (0, import_react14.useRef)(false);
-    const panelRef = (0, import_react14.useRef)(null);
+    const initial = (0, import_react15.useMemo)(() => readInitialValues(node, fields), [node, fields]);
+    const [values, setValues] = (0, import_react15.useState)(initial);
+    const committedRef = (0, import_react15.useRef)(false);
+    const panelRef = (0, import_react15.useRef)(null);
     const width = Math.max(node.width, 240);
     const height = Math.max(node.height, 36 + fields.length * 44);
     const commit = () => {
@@ -19453,7 +19749,7 @@ var SystemCanvas = (() => {
     const stopPointer = (e) => {
       e.stopPropagation();
     };
-    (0, import_react14.useEffect)(() => {
+    (0, import_react15.useEffect)(() => {
       const el = panelRef.current;
       if (!el)
         return;
@@ -19583,13 +19879,13 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/EdgeLabelEditor.js
   var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
-  var import_react15 = __toESM(require_react(), 1);
+  var import_react16 = __toESM(require_react(), 1);
   var EDITOR_WIDTH = 110;
   function EdgeLabelEditor({ initialLabel, midpoint, theme, onCommit, onCancel }) {
-    const [value, setValue] = (0, import_react15.useState)(initialLabel);
-    const inputRef = (0, import_react15.useRef)(null);
-    const committedRef = (0, import_react15.useRef)(false);
-    (0, import_react15.useEffect)(() => {
+    const [value, setValue] = (0, import_react16.useState)(initialLabel);
+    const inputRef = (0, import_react16.useRef)(null);
+    const committedRef = (0, import_react16.useRef)(false);
+    (0, import_react16.useEffect)(() => {
       const el = inputRef.current;
       if (el) {
         el.focus();
@@ -19644,7 +19940,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/ConnectionHandles.js
   var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
-  var import_react16 = __toESM(require_react(), 1);
+  var import_react17 = __toESM(require_react(), 1);
   var SIDES = ["top", "right", "bottom", "left"];
   var HANDLE_RADIUS = 4;
   var HANDLE_HIT_RADIUS = 10;
@@ -19653,9 +19949,9 @@ var SystemCanvas = (() => {
   var HOVER_SCALE = 1.42;
   var HOVER_TRANSITION_MS = 120;
   function ConnectionHandles({ node, theme, onHandlePointerDown, immediate, activeSide }) {
-    const [visible, setVisible] = (0, import_react16.useState)(!!immediate);
-    const [hoveredSide, setHoveredSide] = (0, import_react16.useState)(null);
-    (0, import_react16.useEffect)(() => {
+    const [visible, setVisible] = (0, import_react17.useState)(!!immediate);
+    const [hoveredSide, setHoveredSide] = (0, import_react17.useState)(null);
+    (0, import_react17.useEffect)(() => {
       if (immediate) {
         setVisible(true);
         return;
@@ -19742,7 +20038,7 @@ var SystemCanvas = (() => {
   // ../react/dist/components/Viewport.js
   var HOVER_PADDING = 10;
   var EDGE_PROXIMITY = 16;
-  var Viewport = (0, import_react17.forwardRef)(function Viewport2({ nodes, edges, nodeMap, theme, edgeStyle, columns, rows, canvases, minZoom, maxZoom, defaultViewport, onViewportChange, onNodeClick, onNodeDoubleClick, onNodeNavigate, onEdgeClick, onEdgeDoubleClick, onCanvasClick, onCanvasContextMenu, onNodeContextMenu, onEdgeContextMenu, onNodePointerDown, selectedIds, editingId, selectedEdgeId, editingEdgeId, dragOverrides, dropTargetId, marqueeRect, marqueeActiveRef, resizeOverrides, onResizeHandlePointerDown, onEditorCommit, onEditorCancel, onEdgeEditorCommit, onEdgeEditorCancel, pendingEdge, onConnectionHandlePointerDown, edgeCreateEnabled, autoFit = "canvas-change", canvasRef, handoffTransform, onHandoffApplied, handoffFadeMs = 0 }, ref) {
+  var Viewport = (0, import_react18.forwardRef)(function Viewport2({ nodes, edges, nodeMap, theme, edgeStyle, columns, rows, canvases, minZoom, maxZoom, defaultViewport, onViewportChange, onNodeClick, onNodeDoubleClick, onNodeNavigate, onEdgeClick, onEdgeDoubleClick, onCanvasClick, onCanvasContextMenu, onNodeContextMenu, onEdgeContextMenu, onNodePointerDown, selectedIds, editingId, selectedEdgeId, editingEdgeId, dragOverrides, dropTargetId, marqueeRect, marqueeActiveRef, resizeOverrides, onResizeHandlePointerDown, onEditorCommit, onEditorCancel, onEdgeEditorCommit, onEdgeEditorCancel, pendingEdge, onConnectionHandlePointerDown, edgeCreateEnabled, autoFit = "canvas-change", canvasRef, handoffTransform, onHandoffApplied, handoffFadeMs = 0 }, ref) {
     const { svgRef, groupRef, viewport, fitToContent, zoomToNode, setTransform } = useViewport({
       minZoom,
       maxZoom,
@@ -19750,10 +20046,10 @@ var SystemCanvas = (() => {
       onViewportChange,
       marqueeActiveRef
     });
-    const navigatingRef = (0, import_react17.useRef)(false);
-    const fadeRafRef = (0, import_react17.useRef)(null);
-    const fadeTimeoutRef = (0, import_react17.useRef)(null);
-    const triggerFade = (0, import_react17.useCallback)((durationMs) => {
+    const navigatingRef = (0, import_react18.useRef)(false);
+    const fadeRafRef = (0, import_react18.useRef)(null);
+    const fadeTimeoutRef = (0, import_react18.useRef)(null);
+    const triggerFade = (0, import_react18.useCallback)((durationMs) => {
       if (durationMs <= 0)
         return;
       const g = groupRef.current;
@@ -19776,7 +20072,7 @@ var SystemCanvas = (() => {
         }, durationMs + 16);
       });
     }, []);
-    (0, import_react17.useEffect)(() => {
+    (0, import_react18.useEffect)(() => {
       return () => {
         if (fadeRafRef.current !== null)
           cancelAnimationFrame(fadeRafRef.current);
@@ -19784,10 +20080,10 @@ var SystemCanvas = (() => {
           clearTimeout(fadeTimeoutRef.current);
       };
     }, []);
-    const [hoveredNodeId, setHoveredNodeId] = (0, import_react17.useState)(null);
-    const [hoveredSide, setHoveredSide] = (0, import_react17.useState)(null);
-    const cursorPosRef = (0, import_react17.useRef)(null);
-    (0, import_react17.useImperativeHandle)(ref, () => ({
+    const [hoveredNodeId, setHoveredNodeId] = (0, import_react18.useState)(null);
+    const [hoveredSide, setHoveredSide] = (0, import_react18.useState)(null);
+    const cursorPosRef = (0, import_react18.useRef)(null);
+    (0, import_react18.useImperativeHandle)(ref, () => ({
       zoomToNode: (node, onComplete, options) => {
         navigatingRef.current = true;
         zoomToNode(node, onComplete, options);
@@ -19798,7 +20094,7 @@ var SystemCanvas = (() => {
       getViewport: () => viewport.current ?? { x: 0, y: 0, zoom: 1 },
       getCursorScreenPos: () => cursorPosRef.current
     }));
-    const renderNodes = (0, import_react17.useMemo)(() => {
+    const renderNodes = (0, import_react18.useMemo)(() => {
       const hasDrag = dragOverrides && dragOverrides.size > 0;
       const hasResize = resizeOverrides && resizeOverrides.size > 0;
       if (!hasDrag && !hasResize)
@@ -19811,7 +20107,7 @@ var SystemCanvas = (() => {
         return d ? { ...n, x: d.x, y: d.y } : n;
       });
     }, [nodes, dragOverrides, resizeOverrides]);
-    const renderNodeMap = (0, import_react17.useMemo)(() => {
+    const renderNodeMap = (0, import_react18.useMemo)(() => {
       const hasDrag = dragOverrides && dragOverrides.size > 0;
       const hasResize = resizeOverrides && resizeOverrides.size > 0;
       if (!hasDrag && !hasResize)
@@ -19822,11 +20118,11 @@ var SystemCanvas = (() => {
       }
       return m;
     }, [renderNodes, nodeMap, dragOverrides, resizeOverrides]);
-    const latestNodesRef = (0, import_react17.useRef)(nodes);
-    (0, import_react17.useEffect)(() => {
+    const latestNodesRef = (0, import_react18.useRef)(nodes);
+    (0, import_react18.useEffect)(() => {
       latestNodesRef.current = nodes;
     }, [nodes]);
-    const fitNow = (0, import_react17.useCallback)(() => {
+    const fitNow = (0, import_react18.useCallback)(() => {
       const current = latestNodesRef.current;
       if (current.length === 0)
         return;
@@ -19836,7 +20132,7 @@ var SystemCanvas = (() => {
         fitToContent(current, animate);
       });
     }, [fitToContent]);
-    (0, import_react17.useEffect)(() => {
+    (0, import_react18.useEffect)(() => {
       if (defaultViewport)
         return;
       if (autoFit !== "always")
@@ -19845,8 +20141,8 @@ var SystemCanvas = (() => {
         return;
       fitNow();
     }, [nodes, autoFit, defaultViewport, fitNow]);
-    const fittedForRef = (0, import_react17.useRef)(null);
-    (0, import_react17.useEffect)(() => {
+    const fittedForRef = (0, import_react18.useRef)(null);
+    (0, import_react18.useEffect)(() => {
       if (defaultViewport)
         return;
       if (autoFit !== "canvas-change" && autoFit !== "initial")
@@ -19878,7 +20174,7 @@ var SystemCanvas = (() => {
       triggerFade
     ]);
     const editingNode = editingId ? renderNodes.find((n) => n.id === editingId) ?? null : null;
-    const handleSvgPointerMove = (0, import_react17.useCallback)((event) => {
+    const handleSvgPointerMove = (0, import_react18.useCallback)((event) => {
       const svg = svgRef.current;
       if (!svg)
         return;
@@ -19930,7 +20226,7 @@ var SystemCanvas = (() => {
         setHoveredSide((prev) => prev === null ? prev : null);
       }
     }, [edgeCreateEnabled, renderNodes, svgRef, viewport]);
-    const handleSvgPointerLeave = (0, import_react17.useCallback)(() => {
+    const handleSvgPointerLeave = (0, import_react18.useCallback)(() => {
       setHoveredNodeId(null);
       setHoveredSide(null);
       cursorPosRef.current = null;
@@ -19969,7 +20265,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/Breadcrumbs.js
   var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
-  var import_react18 = __toESM(require_react(), 1);
+  var import_react19 = __toESM(require_react(), 1);
   function Breadcrumbs({ breadcrumbs, theme, onNavigate }) {
     if (breadcrumbs.length <= 1)
       return null;
@@ -19990,7 +20286,7 @@ var SystemCanvas = (() => {
       backdropFilter: "blur(8px)"
     }, children: breadcrumbs.map((crumb, index) => {
       const isLast = index === breadcrumbs.length - 1;
-      return (0, import_jsx_runtime23.jsxs)(import_react18.default.Fragment, { children: [index > 0 && (0, import_jsx_runtime23.jsx)("span", { style: {
+      return (0, import_jsx_runtime23.jsxs)(import_react19.default.Fragment, { children: [index > 0 && (0, import_jsx_runtime23.jsx)("span", { style: {
         color: theme.separatorColor,
         margin: "0 2px"
       }, children: "/" }), (0, import_jsx_runtime23.jsx)("span", { onClick: isLast ? void 0 : () => onNavigate(index), style: {
@@ -20014,11 +20310,11 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/AddNodeButton.js
   var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
-  var import_react19 = __toESM(require_react(), 1);
+  var import_react20 = __toESM(require_react(), 1);
   function AddNodeButton({ options, addNode: addNode2, theme }) {
-    const [open, setOpen] = (0, import_react19.useState)(false);
-    const rootRef = (0, import_react19.useRef)(null);
-    (0, import_react19.useEffect)(() => {
+    const [open, setOpen] = (0, import_react20.useState)(false);
+    const rootRef = (0, import_react20.useRef)(null);
+    (0, import_react20.useEffect)(() => {
       if (!open)
         return;
       function onDocClick(e) {
@@ -20107,7 +20403,7 @@ var SystemCanvas = (() => {
     } });
   }
   function MenuRow({ theme, option, onClick }) {
-    const [hover, setHover] = (0, import_react19.useState)(false);
+    const [hover, setHover] = (0, import_react20.useState)(false);
     const swatchSize = 18;
     return (0, import_jsx_runtime24.jsxs)("div", { role: "button", onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: {
       display: "flex",
@@ -20143,12 +20439,12 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/LaneHeaders.js
   var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
-  var import_react20 = __toESM(require_react(), 1);
+  var import_react21 = __toESM(require_react(), 1);
   function LaneHeaders({ columns, rows, theme, getViewport, width, height, pinned = true }) {
     const hasColumns = columns && columns.length > 0;
     const hasRows = rows && rows.length > 0;
-    const [viewport, setViewport] = (0, import_react20.useState)(() => getViewport());
-    (0, import_react20.useEffect)(() => {
+    const [viewport, setViewport] = (0, import_react21.useState)(() => getViewport());
+    (0, import_react21.useEffect)(() => {
       if (!hasColumns && !hasRows)
         return;
       let raf = 0;
@@ -20222,7 +20518,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/NodeToolbar.js
   var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
-  var import_react21 = __toESM(require_react(), 1);
+  var import_react22 = __toESM(require_react(), 1);
   var NODE_GAP = 10;
   var FLIP_MARGIN = 8;
   var PADDING = 6;
@@ -20231,8 +20527,8 @@ var SystemCanvas = (() => {
   var BUTTON_SIZE = 28;
   var DELETE_SIZE = 14;
   function NodeToolbar({ node, theme, onPatch, onDelete, getViewport, containerWidth, containerHeight, render: render2, selectedNodes, onMultiPatch }) {
-    const [viewport, setViewport] = (0, import_react21.useState)(() => getViewport());
-    (0, import_react21.useEffect)(() => {
+    const [viewport, setViewport] = (0, import_react22.useState)(() => getViewport());
+    (0, import_react22.useEffect)(() => {
       let raf = 0;
       let lastX = -Infinity;
       let lastY = -Infinity;
@@ -20252,7 +20548,7 @@ var SystemCanvas = (() => {
     }, [getViewport]);
     const isMulti = selectedNodes != null && selectedNodes.length > 1;
     const align = theme.toolbarAlign ?? "center";
-    const { anchorTopY, anchorBottomY, anchorX } = (0, import_react21.useMemo)(() => {
+    const { anchorTopY, anchorBottomY, anchorX } = (0, import_react22.useMemo)(() => {
       if (isMulti && selectedNodes) {
         const minX = Math.min(...selectedNodes.map((n) => n.x));
         const maxX = Math.max(...selectedNodes.map((n) => n.x + n.width));
@@ -20269,9 +20565,9 @@ var SystemCanvas = (() => {
     }, [isMulti, selectedNodes, align, node]);
     const topAnchor = canvasToScreen(anchorX, anchorTopY, viewport);
     const bottomAnchor = canvasToScreen(anchorX, anchorBottomY, viewport);
-    const toolbarRef = (0, import_react21.useRef)(null);
-    const [size, setSize] = (0, import_react21.useState)({ width: 0, height: 0 });
-    (0, import_react21.useEffect)(() => {
+    const toolbarRef = (0, import_react22.useRef)(null);
+    const [size, setSize] = (0, import_react22.useState)({ width: 0, height: 0 });
+    (0, import_react22.useEffect)(() => {
       const el = toolbarRef.current;
       if (!el)
         return;
@@ -20331,7 +20627,7 @@ var SystemCanvas = (() => {
   }
   function MultiToolbarContent({ selectedNodes, theme, onMultiPatch, onDelete }) {
     const representativeNode = selectedNodes[0];
-    const groups = (0, import_react21.useMemo)(() => getNodeActionsForNode(representativeNode, theme), [representativeNode, theme]);
+    const groups = (0, import_react22.useMemo)(() => getNodeActionsForNode(representativeNode, theme), [representativeNode, theme]);
     const showDelete = theme.showToolbarDelete === true;
     const swatchGroups = groups.filter((g) => g.kind === "swatches" || g.kind == null);
     const otherGroups = groups.filter((g) => g.kind !== "swatches" && g.kind != null && g.kind !== "menu");
@@ -20345,7 +20641,7 @@ var SystemCanvas = (() => {
       const actions = filterActionsForNode(group, representativeNode);
       if (actions.length === 0)
         return null;
-      return (0, import_jsx_runtime26.jsxs)(import_react21.default.Fragment, { children: [i > 0 && (0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
+      return (0, import_jsx_runtime26.jsxs)(import_react22.default.Fragment, { children: [i > 0 && (0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
         const active = action.isActive?.(representativeNode) ?? false;
         const handleClick = () => {
           const patch = resolveActionPatch(action, representativeNode);
@@ -20357,7 +20653,7 @@ var SystemCanvas = (() => {
       const actions = filterActionsForNode(group, representativeNode);
       if (actions.length === 0)
         return null;
-      return (0, import_jsx_runtime26.jsxs)(import_react21.default.Fragment, { children: [(0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
+      return (0, import_jsx_runtime26.jsxs)(import_react22.default.Fragment, { children: [(0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
         const active = action.isActive?.(representativeNode) ?? false;
         const handleClick = () => {
           const patch = resolveActionPatch(action, representativeNode);
@@ -20368,9 +20664,9 @@ var SystemCanvas = (() => {
     }), showDelete && (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [(0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)(DeleteButton, { theme, onDelete })] })] });
   }
   function DefaultToolbarContent({ node, theme, onPatch, onDelete }) {
-    const groups = (0, import_react21.useMemo)(() => getNodeActionsForNode(node, theme), [node, theme]);
+    const groups = (0, import_react22.useMemo)(() => getNodeActionsForNode(node, theme), [node, theme]);
     const showDelete = theme.showToolbarDelete === true;
-    return (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [groups.map((group, i) => (0, import_jsx_runtime26.jsxs)(import_react21.default.Fragment, { children: [i > 0 && (0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)(ActionGroupView, { group, node, theme, onPatch })] }, group.id)), showDelete && (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [(0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)(DeleteButton, { theme, onDelete })] })] });
+    return (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [groups.map((group, i) => (0, import_jsx_runtime26.jsxs)(import_react22.default.Fragment, { children: [i > 0 && (0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)(ActionGroupView, { group, node, theme, onPatch })] }, group.id)), showDelete && (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [(0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)(DeleteButton, { theme, onDelete })] })] });
   }
   function Divider2({ theme }) {
     return (0, import_jsx_runtime26.jsx)("div", { style: {
@@ -20437,9 +20733,9 @@ var SystemCanvas = (() => {
     } }) : (0, import_jsx_runtime26.jsx)("span", { style: { fontSize: 10 }, children: action.label.slice(0, 2) }) });
   }
   function MenuGroup({ group, actions, node, theme, onPatch }) {
-    const [open, setOpen] = (0, import_react21.useState)(false);
-    const wrapRef = (0, import_react21.useRef)(null);
-    (0, import_react21.useEffect)(() => {
+    const [open, setOpen] = (0, import_react22.useState)(false);
+    const wrapRef = (0, import_react22.useRef)(null);
+    (0, import_react22.useEffect)(() => {
       if (!open)
         return;
       const onDown = (e) => {
@@ -20526,18 +20822,18 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/NodeContextMenuOverlay.js
   var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
-  var import_react22 = __toESM(require_react(), 1);
+  var import_react23 = __toESM(require_react(), 1);
   var ESTIMATED_MENU_WIDTH = 200;
   var MIN_MENU_WIDTH = 160;
   var VIEWPORT_MARGIN = 8;
   function NodeContextMenuOverlay({ state, config, theme, onClose }) {
-    const rootRef = (0, import_react22.useRef)(null);
-    const [hoveredId, setHoveredId] = (0, import_react22.useState)(null);
-    (0, import_react22.useEffect)(() => {
+    const rootRef = (0, import_react23.useRef)(null);
+    const [hoveredId, setHoveredId] = (0, import_react23.useState)(null);
+    (0, import_react23.useEffect)(() => {
       if (state)
         setHoveredId(null);
     }, [state]);
-    (0, import_react22.useEffect)(() => {
+    (0, import_react23.useEffect)(() => {
       if (!state)
         return;
       function onDown(e) {
@@ -20645,8 +20941,8 @@ var SystemCanvas = (() => {
   // ../react/dist/components/SystemCanvas.js
   var CASCADE_WINDOW_MS = 1500;
   var CASCADE_OFFSET = 20;
-  var SystemCanvas = (0, import_react23.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, onEdgeUpdate, onEdgeDelete, onEdgeAdd, canDropNodeOn, onNodeDrop, renderAddNodeButton, showNodeToolbar = true, renderNodeToolbar, theme: themeProp, themes: customThemes, edgeStyle = "bezier", defaultViewport, minZoom: minZoomProp, maxZoom, onViewportChange, autoFit = "canvas-change", laneHeaders = "pinned", snapToLanes = false, zoomNavigation = false, className, style }, forwardedRef) {
-    const zoomNavConfig = (0, import_react23.useMemo)(() => {
+  var SystemCanvas = (0, import_react24.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, onEdgeUpdate, onEdgeDelete, onEdgeAdd, canDropNodeOn, onNodeDrop, renderAddNodeButton, showNodeToolbar = true, renderNodeToolbar, theme: themeProp, themes: customThemes, edgeStyle = "bezier", defaultViewport, minZoom: minZoomProp, maxZoom, onViewportChange, autoFit = "canvas-change", laneHeaders = "pinned", snapToLanes = false, zoomNavigation = false, historyDepth, onUndo, onRedo, className, style }, forwardedRef) {
+    const zoomNavConfig = (0, import_react24.useMemo)(() => {
       const defaults = {
         enterThreshold: 0.66,
         exitThreshold: 0.33,
@@ -20671,16 +20967,16 @@ var SystemCanvas = (() => {
     }, [zoomNavigation]);
     const effectiveMaxZoom = maxZoom ?? (zoomNavConfig.enabled ? 16 : 4);
     const effectiveMinZoom = minZoomProp ?? (zoomNavConfig.enabled ? 0.01 : 0.1);
-    (0, import_react23.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       const env = globalThis.process?.env?.NODE_ENV;
       if (editable && !canvases && env !== "production") {
         console.warn("[system-canvas] `editable` is enabled but `canvases` prop is missing. Edits to sub-canvases will not be reflected without a synchronous ref \u2192 CanvasData map.");
       }
     }, [editable, canvases]);
-    const [parentFrames, setParentFrames] = (0, import_react23.useState)([]);
-    const [pendingHandoff, setPendingHandoff] = (0, import_react23.useState)(null);
-    const suppressNextHandoffClearRef = (0, import_react23.useRef)(false);
-    const handleBreadcrumbClick = (0, import_react23.useCallback)((index) => {
+    const [parentFrames, setParentFrames] = (0, import_react24.useState)([]);
+    const [pendingHandoff, setPendingHandoff] = (0, import_react24.useState)(null);
+    const suppressNextHandoffClearRef = (0, import_react24.useRef)(false);
+    const handleBreadcrumbClick = (0, import_react24.useCallback)((index) => {
       setParentFrames((prev) => prev.slice(0, index));
       if (suppressNextHandoffClearRef.current) {
         suppressNextHandoffClearRef.current = false;
@@ -20697,10 +20993,10 @@ var SystemCanvas = (() => {
       onNavigate,
       onBreadcrumbClick: handleBreadcrumbClick
     });
-    (0, import_react23.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       onBreadcrumbsChange?.(breadcrumbs);
     }, [breadcrumbs, onBreadcrumbsChange]);
-    const theme = (0, import_react23.useMemo)(() => {
+    const theme = (0, import_react24.useMemo)(() => {
       const registry = { ...themes, ...customThemes };
       const resolveByName = (name) => name && registry[name] ? registry[name] : null;
       if (themeProp) {
@@ -20711,22 +21007,22 @@ var SystemCanvas = (() => {
       }
       return resolveByName(currentCanvas.theme?.base) ?? resolveByName(canvas.theme?.base) ?? darkTheme;
     }, [themeProp, customThemes, currentCanvas.theme?.base, canvas.theme?.base]);
-    const { nodes, edges, nodeMap } = (0, import_react23.useMemo)(() => {
+    const { nodes, edges, nodeMap } = (0, import_react24.useMemo)(() => {
       const resolved = resolveCanvas(currentCanvas, theme);
       const map = buildNodeMap(resolved.nodes);
       return { nodes: resolved.nodes, edges: resolved.edges, nodeMap: map };
     }, [currentCanvas, theme]);
-    const nodesRef = (0, import_react23.useRef)(nodes);
+    const nodesRef = (0, import_react24.useRef)(nodes);
     nodesRef.current = nodes;
-    const viewportStateRef = (0, import_react23.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
-    const viewportHandleRef = (0, import_react23.useRef)(null);
-    const navigateToRefRef = (0, import_react23.useRef)(navigateToRef);
+    const viewportStateRef = (0, import_react24.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
+    const viewportHandleRef = (0, import_react24.useRef)(null);
+    const navigateToRefRef = (0, import_react24.useRef)(navigateToRef);
     navigateToRefRef.current = navigateToRef;
-    const navigateToBreadcrumbRef = (0, import_react23.useRef)(navigateToBreadcrumb);
+    const navigateToBreadcrumbRef = (0, import_react24.useRef)(navigateToBreadcrumb);
     navigateToBreadcrumbRef.current = navigateToBreadcrumb;
-    const breadcrumbsRef = (0, import_react23.useRef)(breadcrumbs);
+    const breadcrumbsRef = (0, import_react24.useRef)(breadcrumbs);
     breadcrumbsRef.current = breadcrumbs;
-    (0, import_react23.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react24.useImperativeHandle)(forwardedRef, () => ({
       zoomIntoNode: (nodeId, options) => {
         return new Promise((resolve) => {
           const node = nodesRef.current.find((n) => n.id === nodeId);
@@ -20758,11 +21054,11 @@ var SystemCanvas = (() => {
         navigateToBreadcrumbRef.current(0);
       }
     }), [forwardedRef]);
-    const [editingId, setEditingId] = (0, import_react23.useState)(null);
-    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react23.useState)(null);
-    const [editingEdgeId, setEditingEdgeId] = (0, import_react23.useState)(null);
-    const svgProxyRef = (0, import_react23.useRef)(null);
-    const containerRef = (0, import_react23.useRef)(null);
+    const [editingId, setEditingId] = (0, import_react24.useState)(null);
+    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react24.useState)(null);
+    const [editingEdgeId, setEditingEdgeId] = (0, import_react24.useState)(null);
+    const svgProxyRef = (0, import_react24.useRef)(null);
+    const containerRef = (0, import_react24.useRef)(null);
     const { selectedIds, selectNode, toggleNode, selectAll, clearSelection, marqueeRect, marqueeActiveRef } = useMultiSelect({
       svgRef: svgProxyRef,
       viewport: viewportStateRef,
@@ -20770,37 +21066,55 @@ var SystemCanvas = (() => {
       containerRef,
       enabled: editable
     });
-    const selectedIdsRef = (0, import_react23.useRef)(selectedIds);
-    (0, import_react23.useEffect)(() => {
+    const selectedIdsRef = (0, import_react24.useRef)(selectedIds);
+    (0, import_react24.useEffect)(() => {
       selectedIdsRef.current = selectedIds;
     }, [selectedIds]);
-    const edgesRef = (0, import_react23.useRef)(edges);
-    (0, import_react23.useEffect)(() => {
+    const edgesRef = (0, import_react24.useRef)(edges);
+    (0, import_react24.useEffect)(() => {
       edgesRef.current = edges;
     }, [edges]);
+    const { wrappedOnNodeAdd, wrappedOnNodeUpdate, wrappedOnNodesUpdate, wrappedOnNodeDelete, wrappedOnNodesDelete, wrappedOnEdgeAdd, wrappedOnEdgeUpdate, wrappedOnEdgeDelete, beginBatch, endBatch, undo, redo } = useCommandHistory({
+      nodesRef,
+      edgesRef,
+      onNodeAdd,
+      onNodeUpdate,
+      onNodesUpdate,
+      onNodeDelete,
+      onNodesDelete,
+      onEdgeAdd,
+      onEdgeUpdate,
+      onEdgeDelete,
+      maxDepth: historyDepth ?? 50,
+      enabled: editable,
+      onUndo,
+      onRedo
+    });
     useMultiSelectClipboard({
       selectedIdsRef,
       nodesRef,
       edgesRef,
       viewport: viewportStateRef,
       canvasContainerRef: containerRef,
-      onNodeAdd: (node) => onNodeAdd?.(node, currentCanvasRef),
-      onEdgeAdd: (edge) => onEdgeAdd?.(edge, currentCanvasRef),
+      onNodeAdd: (node) => wrappedOnNodeAdd(node, currentCanvasRef),
+      onEdgeAdd: (edge) => wrappedOnEdgeAdd(edge, currentCanvasRef),
       canvasRef: currentCanvasRef,
-      getCursorScreenPos: () => viewportHandleRef.current?.getCursorScreenPos() ?? null
+      getCursorScreenPos: () => viewportHandleRef.current?.getCursorScreenPos() ?? null,
+      onBeginBatch: beginBatch,
+      onEndBatch: endBatch
     });
-    (0, import_react23.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       clearSelection();
       setEditingId(null);
       setSelectedEdgeId(null);
       setEditingEdgeId(null);
     }, [currentCanvasRef]);
-    const onSelectionChangeRef = (0, import_react23.useRef)(onSelectionChange);
-    (0, import_react23.useEffect)(() => {
+    const onSelectionChangeRef = (0, import_react24.useRef)(onSelectionChange);
+    (0, import_react24.useEffect)(() => {
       onSelectionChangeRef.current = onSelectionChange;
     }, [onSelectionChange]);
-    const lastEmittedSelectionRef = (0, import_react23.useRef)({ kind: null, id: null, multiIds: null, canvasRef: void 0 });
-    (0, import_react23.useEffect)(() => {
+    const lastEmittedSelectionRef = (0, import_react24.useRef)({ kind: null, id: null, multiIds: null, canvasRef: void 0 });
+    (0, import_react24.useEffect)(() => {
       const cb = onSelectionChangeRef.current;
       let next = null;
       if (selectedIds.size > 1) {
@@ -20842,8 +21156,8 @@ var SystemCanvas = (() => {
       }
       cb?.(next);
     }, [selectedIds, selectedEdgeId, currentCanvasRef, nodeMap, edges]);
-    const [containerSize, setContainerSize] = (0, import_react23.useState)({ width: 0, height: 0 });
-    (0, import_react23.useEffect)(() => {
+    const [containerSize, setContainerSize] = (0, import_react24.useState)({ width: 0, height: 0 });
+    (0, import_react24.useEffect)(() => {
       const el = containerRef.current;
       if (!el)
         return;
@@ -20858,8 +21172,8 @@ var SystemCanvas = (() => {
     }, []);
     const hasLanes = currentCanvas.columns && currentCanvas.columns.length > 0 || currentCanvas.rows && currentCanvas.rows.length > 0;
     const showLaneHeaders = hasLanes && laneHeaders !== "none";
-    const getViewportState = (0, import_react23.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
-    const applyLaneSnap = (0, import_react23.useCallback)((id2, patch) => {
+    const getViewportState = (0, import_react24.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
+    const applyLaneSnap = (0, import_react24.useCallback)((id2, patch) => {
       if (!snapToLanes)
         return patch;
       const cols = currentCanvas.columns;
@@ -20884,25 +21198,25 @@ var SystemCanvas = (() => {
       }
       return final;
     }, [snapToLanes, currentCanvas.columns, currentCanvas.rows]);
-    const commitResize = (0, import_react23.useCallback)((id2, patch) => {
-      onNodeUpdate?.(id2, applyLaneSnap(id2, patch), currentCanvasRef);
-    }, [onNodeUpdate, currentCanvasRef, applyLaneSnap]);
-    const commitDragBatch = (0, import_react23.useCallback)((updates) => {
+    const commitResize = (0, import_react24.useCallback)((id2, patch) => {
+      wrappedOnNodeUpdate(id2, applyLaneSnap(id2, patch), currentCanvasRef);
+    }, [wrappedOnNodeUpdate, currentCanvasRef, applyLaneSnap]);
+    const commitDragBatch = (0, import_react24.useCallback)((updates) => {
       const final = updates.map((u) => ({
         id: u.id,
         patch: applyLaneSnap(u.id, u.patch)
       }));
       if (onNodesUpdate) {
-        onNodesUpdate(final, currentCanvasRef);
+        wrappedOnNodesUpdate(final, currentCanvasRef);
         return;
       }
       if (!onNodeUpdate)
         return;
       for (const { id: id2, patch } of final) {
-        onNodeUpdate(id2, patch, currentCanvasRef);
+        wrappedOnNodeUpdate(id2, patch, currentCanvasRef);
       }
-    }, [onNodeUpdate, onNodesUpdate, currentCanvasRef, applyLaneSnap]);
-    const handleNodeDrop = (0, import_react23.useCallback)((sources, target) => {
+    }, [wrappedOnNodeUpdate, wrappedOnNodesUpdate, onNodeUpdate, onNodesUpdate, currentCanvasRef, applyLaneSnap]);
+    const handleNodeDrop = (0, import_react24.useCallback)((sources, target) => {
       onNodeDrop?.(sources, target, { canvasRef: currentCanvasRef });
     }, [onNodeDrop, currentCanvasRef]);
     const { dragOverrides, dropTargetId, onPointerDown: onNodePointerDown } = useNodeDrag({
@@ -20919,7 +21233,7 @@ var SystemCanvas = (() => {
       onCommit: commitResize
     });
     const singleSelectedId = selectedIds.size === 1 ? Array.from(selectedIds)[0] : null;
-    const selectedResolvedNode = (0, import_react23.useMemo)(() => {
+    const selectedResolvedNode = (0, import_react24.useMemo)(() => {
       if (!singleSelectedId)
         return null;
       const base = nodeMap.get(singleSelectedId);
@@ -20936,16 +21250,16 @@ var SystemCanvas = (() => {
       return base;
     }, [singleSelectedId, nodeMap, dragOverrides, resizeOverrides]);
     svgProxyRef.current = viewportHandleRef.current?.getSvgElement() ?? null;
-    const handleEdgeCreated = (0, import_react23.useCallback)((edge) => {
-      onEdgeAdd?.(edge, currentCanvasRef);
-    }, [onEdgeAdd, currentCanvasRef]);
+    const handleEdgeCreated = (0, import_react24.useCallback)((edge) => {
+      wrappedOnEdgeAdd(edge, currentCanvasRef);
+    }, [wrappedOnEdgeAdd, currentCanvasRef]);
     const { pending: pendingEdge, onHandlePointerDown: onConnectionHandlePointerDown } = useEdgeCreate({
       svgRef: svgProxyRef,
       viewport: viewportStateRef,
       nodesRef,
       onCreate: handleEdgeCreated
     });
-    const handleNavigableNodeClick = (0, import_react23.useCallback)((node) => {
+    const handleNavigableNodeClick = (0, import_react24.useCallback)((node) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -20972,7 +21286,7 @@ var SystemCanvas = (() => {
         navigateToRef(node);
       }
     }, [navigateToRef, currentCanvasRef, zoomNavConfig.enabled]);
-    const handleZoomEnter = (0, import_react23.useCallback)((node, targetTransform) => {
+    const handleZoomEnter = (0, import_react24.useCallback)((node, targetTransform) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -20986,7 +21300,7 @@ var SystemCanvas = (() => {
       setPendingHandoff(targetTransform);
       navigateToRef(node);
     }, [currentCanvasRef, navigateToRef]);
-    const handleZoomExit = (0, import_react23.useCallback)((targetTransform) => {
+    const handleZoomExit = (0, import_react24.useCallback)((targetTransform) => {
       setPendingHandoff(targetTransform);
       suppressNextHandoffClearRef.current = true;
       navigateToBreadcrumb(breadcrumbs.length - 2);
@@ -21013,26 +21327,26 @@ var SystemCanvas = (() => {
       onEnter: handleZoomEnter,
       onExit: handleZoomExit
     });
-    const handleViewportChange = (0, import_react23.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react24.useCallback)((vp) => {
       viewportStateRef.current = vp;
       handleZoomNavViewportChange(vp);
       onViewportChange?.(vp);
     }, [handleZoomNavViewportChange, onViewportChange]);
-    const handleHandoffApplied = (0, import_react23.useCallback)(() => {
+    const handleHandoffApplied = (0, import_react24.useCallback)(() => {
       setPendingHandoff(null);
       clearZoomNavCommitting();
     }, [clearZoomNavCommitting]);
-    const handleBeginEdit = (0, import_react23.useCallback)((node) => {
+    const handleBeginEdit = (0, import_react24.useCallback)((node) => {
       setEditingId(node.id);
     }, []);
-    const handleBeginEditEdge = (0, import_react23.useCallback)((edge) => {
+    const handleBeginEditEdge = (0, import_react24.useCallback)((edge) => {
       setEditingEdgeId(edge.id);
     }, []);
-    const [contextMenuState, setContextMenuState] = (0, import_react23.useState)(null);
-    (0, import_react23.useEffect)(() => {
+    const [contextMenuState, setContextMenuState] = (0, import_react24.useState)(null);
+    (0, import_react24.useEffect)(() => {
       setContextMenuState(null);
     }, [currentCanvasRef]);
-    const handleContextMenu = (0, import_react23.useCallback)((event) => {
+    const handleContextMenu = (0, import_react24.useCallback)((event) => {
       onContextMenu?.(event);
       if (!nodeContextMenu)
         return;
@@ -21075,27 +21389,27 @@ var SystemCanvas = (() => {
       onSelectEdge: setSelectedEdgeId,
       onBeginEditEdge: handleBeginEditEdge
     });
-    const handleEditorCommit = (0, import_react23.useCallback)((patch) => {
+    const handleEditorCommit = (0, import_react24.useCallback)((patch) => {
       if (editingId) {
-        onNodeUpdate?.(editingId, patch, currentCanvasRef);
+        wrappedOnNodeUpdate(editingId, patch, currentCanvasRef);
       }
       setEditingId(null);
-    }, [editingId, onNodeUpdate, currentCanvasRef]);
-    const handleEditorCancel = (0, import_react23.useCallback)(() => {
+    }, [editingId, wrappedOnNodeUpdate, currentCanvasRef]);
+    const handleEditorCancel = (0, import_react24.useCallback)(() => {
       setEditingId(null);
     }, []);
-    const handleEdgeEditorCommit = (0, import_react23.useCallback)((patch) => {
+    const handleEdgeEditorCommit = (0, import_react24.useCallback)((patch) => {
       if (editingEdgeId) {
-        onEdgeUpdate?.(editingEdgeId, patch, currentCanvasRef);
+        wrappedOnEdgeUpdate(editingEdgeId, patch, currentCanvasRef);
       }
       setEditingEdgeId(null);
-    }, [editingEdgeId, onEdgeUpdate, currentCanvasRef]);
-    const handleEdgeEditorCancel = (0, import_react23.useCallback)(() => {
+    }, [editingEdgeId, wrappedOnEdgeUpdate, currentCanvasRef]);
+    const handleEdgeEditorCancel = (0, import_react24.useCallback)(() => {
       setEditingEdgeId(null);
     }, []);
-    const lastAddRef = (0, import_react23.useRef)(null);
-    const menuOptions = (0, import_react23.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
-    const addNode2 = (0, import_react23.useCallback)((option, position) => {
+    const lastAddRef = (0, import_react24.useRef)(null);
+    const menuOptions = (0, import_react24.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
+    const addNode2 = (0, import_react24.useCallback)((option, position) => {
       let x, y;
       if (position) {
         x = position.x;
@@ -21125,9 +21439,9 @@ var SystemCanvas = (() => {
         lastAddRef.current = { t: now2, offset: nextOffset };
       }
       const node = createNodeFromOption(option, Math.round(x), Math.round(y), void 0, theme);
-      onNodeAdd?.(node, currentCanvasRef);
-    }, [onNodeAdd, currentCanvasRef, theme]);
-    const handleKeyDown = (0, import_react23.useCallback)((e) => {
+      wrappedOnNodeAdd(node, currentCanvasRef);
+    }, [wrappedOnNodeAdd, currentCanvasRef, theme]);
+    const handleKeyDown = (0, import_react24.useCallback)((e) => {
       if (!editable)
         return;
       if (e.key === "Escape") {
@@ -21139,6 +21453,16 @@ var SystemCanvas = (() => {
       }
       if (editingId || editingEdgeId)
         return;
+      if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key === "z") {
+        e.preventDefault();
+        undo();
+        return;
+      }
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "z") {
+        e.preventDefault();
+        redo();
+        return;
+      }
       if ((e.metaKey || e.ctrlKey) && e.key === "a") {
         e.preventDefault();
         selectAll();
@@ -21147,16 +21471,16 @@ var SystemCanvas = (() => {
       if (e.key === "Delete" || e.key === "Backspace") {
         if (selectedIds.size > 1) {
           e.preventDefault();
-          onNodesDelete?.(Array.from(selectedIds), currentCanvasRef);
+          wrappedOnNodesDelete(Array.from(selectedIds), currentCanvasRef);
           clearSelection();
         } else if (selectedIds.size === 1) {
           const id2 = Array.from(selectedIds)[0];
           e.preventDefault();
-          onNodeDelete?.(id2, currentCanvasRef);
+          wrappedOnNodeDelete(id2, currentCanvasRef);
           clearSelection();
         } else if (selectedEdgeId) {
           e.preventDefault();
-          onEdgeDelete?.(selectedEdgeId, currentCanvasRef);
+          wrappedOnEdgeDelete(selectedEdgeId, currentCanvasRef);
           setSelectedEdgeId(null);
         }
       }
@@ -21166,12 +21490,14 @@ var SystemCanvas = (() => {
       editingEdgeId,
       selectedIds,
       selectedEdgeId,
-      onNodeDelete,
-      onNodesDelete,
-      onEdgeDelete,
+      wrappedOnNodeDelete,
+      wrappedOnNodesDelete,
+      wrappedOnEdgeDelete,
       currentCanvasRef,
       clearSelection,
-      selectAll
+      selectAll,
+      undo,
+      redo
     ]);
     const renderProps = { options: menuOptions, addNode: addNode2, theme };
     return (0, import_jsx_runtime28.jsxs)("div", { ref: containerRef, className: `system-canvas ${className ?? ""}`, tabIndex: editable ? 0 : -1, onKeyDown: handleKeyDown, style: {
@@ -21194,9 +21520,9 @@ var SystemCanvas = (() => {
       fontSize: 12,
       backdropFilter: "blur(8px)"
     }, children: "Loading..." }), (0, import_jsx_runtime28.jsx)(Viewport, { ref: viewportHandleRef, nodes, edges, nodeMap, theme, edgeStyle, columns: currentCanvas.columns, rows: currentCanvas.rows, canvases, minZoom: effectiveMinZoom, maxZoom: effectiveMaxZoom, defaultViewport, autoFit, canvasRef: currentCanvasRef, handoffTransform: pendingHandoff, onHandoffApplied: handleHandoffApplied, handoffFadeMs: zoomNavConfig.fadeDuration, onViewportChange: handleViewportChange, onNodeClick: handleNodeClick, onNodeDoubleClick: handleNodeDoubleClick, onNodeNavigate: handleNodeNavigate, onEdgeClick: handleEdgeClick, onEdgeDoubleClick: handleEdgeDoubleClick, onCanvasClick: editable ? handleCanvasClick : void 0, onCanvasContextMenu: handleCanvasContextMenu, onNodeContextMenu: handleNodeContextMenu, onEdgeContextMenu: handleEdgeContextMenu, onNodePointerDown: editable ? onNodePointerDown : void 0, selectedIds: editable ? selectedIds : void 0, marqueeRect: editable ? marqueeRect : null, marqueeActiveRef: editable ? marqueeActiveRef : void 0, editingId: editable ? editingId : null, selectedEdgeId: editable ? selectedEdgeId : null, editingEdgeId: editable ? editingEdgeId : null, dragOverrides, dropTargetId, resizeOverrides, onResizeHandlePointerDown: editable ? onResizeHandlePointerDown : void 0, onEditorCommit: handleEditorCommit, onEditorCancel: handleEditorCancel, onEdgeEditorCommit: handleEdgeEditorCommit, onEdgeEditorCancel: handleEdgeEditorCancel, pendingEdge: editable ? pendingEdge : null, onConnectionHandlePointerDown: editable ? onConnectionHandlePointerDown : void 0, edgeCreateEnabled: editable }), showLaneHeaders && (0, import_jsx_runtime28.jsx)(LaneHeaders, { columns: currentCanvas.columns, rows: currentCanvas.rows, theme, getViewport: getViewportState, width: containerSize.width, height: containerSize.height, pinned: laneHeaders === "pinned" }), editable && showNodeToolbar && selectedIds.size === 1 && selectedResolvedNode && !editingId && (0, import_jsx_runtime28.jsx)(NodeToolbar, { node: selectedResolvedNode, theme, onPatch: (update) => {
-      onNodeUpdate?.(selectedResolvedNode.id, update, currentCanvasRef);
+      wrappedOnNodeUpdate(selectedResolvedNode.id, update, currentCanvasRef);
     }, onDelete: () => {
-      onNodeDelete?.(selectedResolvedNode.id, currentCanvasRef);
+      wrappedOnNodeDelete(selectedResolvedNode.id, currentCanvasRef);
       clearSelection();
     }, getViewport: getViewportState, containerWidth: containerSize.width, containerHeight: containerSize.height, render: renderNodeToolbar }), editable && showNodeToolbar && selectedIds.size > 1 && !editingId && (() => {
       const selectedResolvedNodes = Array.from(selectedIds).map((id2) => nodeMap.get(id2)).filter((n) => n != null);
@@ -21206,10 +21532,10 @@ var SystemCanvas = (() => {
       return (0, import_jsx_runtime28.jsx)(NodeToolbar, { node: anchorNode, selectedNodes: selectedResolvedNodes, theme, onPatch: () => {
       }, onMultiPatch: (patch) => {
         for (const id2 of selectedIds) {
-          onNodeUpdate?.(id2, patch, currentCanvasRef);
+          wrappedOnNodeUpdate(id2, patch, currentCanvasRef);
         }
       }, onDelete: () => {
-        onNodesDelete?.(Array.from(selectedIds), currentCanvasRef);
+        wrappedOnNodesDelete(Array.from(selectedIds), currentCanvasRef);
         clearSelection();
       }, getViewport: getViewportState, containerWidth: containerSize.width, containerHeight: containerSize.height });
     })(), editable && (renderAddNodeButton ? renderAddNodeButton(renderProps) : (0, import_jsx_runtime28.jsx)(AddNodeButton, { ...renderProps })), nodeContextMenu && (0, import_jsx_runtime28.jsx)(NodeContextMenuOverlay, { state: contextMenuState, config: nodeContextMenu, theme, onClose: () => setContextMenuState(null) })] });
@@ -21323,7 +21649,7 @@ var SystemCanvas = (() => {
         onEdgeUpdate: handleEdgeUpdate,
         onEdgeDelete: handleEdgeDelete
       };
-      root2.render(import_react24.default.createElement(SystemCanvas, props));
+      root2.render(import_react25.default.createElement(SystemCanvas, props));
     };
     doRender();
     return {