system-canvas-standalone 0.2.3 → 0.2.5

package/dist/system-canvas.js

@@ -12759,12 +12759,12 @@ var SystemCanvas = (() => {
     render: () => render,
     themes: () => themes
   });
-  var import_react24 = __toESM(require_react(), 1);
+  var import_react26 = __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_react25 = __toESM(require_react(), 1);
 
   // ../core/dist/themes/dark.js
   var darkTheme = {
@@ -14646,11 +14646,244 @@ var SystemCanvas = (() => {
     };
   }
 
-  // ../react/dist/hooks/useCanvasInteraction.js
+  // ../react/dist/hooks/useKeyboardShortcuts.js
   var import_react2 = __toESM(require_react(), 1);
+  function useKeyboardShortcuts(options) {
+    const { editable, editingId, editingEdgeId, selectedIds, selectedEdgeId, nodesRef, edgesRef, theme, currentCanvasRef, contextMenuState, wrappedOnNodeAdd, wrappedOnEdgeAdd, wrappedOnNodeUpdate, wrappedOnNodesUpdate, wrappedOnNodeDelete, wrappedOnNodesDelete, wrappedOnEdgeDelete, onNodesUpdate, beginBatch, endBatch, undo, redo, selectNode, selectMultiple, selectAll, clearSelection, setEditingId, setEditingEdgeId, setSelectedEdgeId, setContextMenuState, cancelDrag } = options;
+    const handleKeyDown = (0, import_react2.useCallback)((e) => {
+      if (!editable)
+        return;
+      if (e.key === "Escape") {
+        if (contextMenuState) {
+          setContextMenuState(null);
+          return;
+        }
+        if (editingId || editingEdgeId) {
+          setEditingId(null);
+          setEditingEdgeId(null);
+          return;
+        }
+        if (selectedIds.size > 0 || selectedEdgeId) {
+          clearSelection();
+          setSelectedEdgeId(null);
+          cancelDrag();
+          return;
+        }
+        return;
+      }
+      if (editingId || editingEdgeId)
+        return;
+      const meta = e.metaKey;
+      const ctrl = e.ctrlKey;
+      const shift = e.shiftKey;
+      const key = e.key;
+      if ((meta || ctrl) && !shift && key === "z") {
+        e.preventDefault();
+        undo();
+        return;
+      }
+      if ((meta || ctrl) && shift && key === "z") {
+        e.preventDefault();
+        redo();
+        return;
+      }
+      if ((meta || ctrl) && key === "a") {
+        e.preventDefault();
+        selectAll();
+        return;
+      }
+      if (key === "Delete" || key === "Backspace") {
+        if (selectedIds.size > 1) {
+          e.preventDefault();
+          wrappedOnNodesDelete(Array.from(selectedIds), currentCanvasRef);
+          clearSelection();
+        } else if (selectedIds.size === 1) {
+          const id2 = Array.from(selectedIds)[0];
+          e.preventDefault();
+          wrappedOnNodeDelete(id2, currentCanvasRef);
+          clearSelection();
+        } else if (selectedEdgeId) {
+          e.preventDefault();
+          wrappedOnEdgeDelete(selectedEdgeId, currentCanvasRef);
+          setSelectedEdgeId(null);
+        }
+        return;
+      }
+      if (key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight") {
+        if (selectedIds.size === 0)
+          return;
+        const gridSize = theme.grid?.size ?? 40;
+        const nudge = shift ? gridSize * 10 : gridSize;
+        const dx = key === "ArrowLeft" ? -nudge : key === "ArrowRight" ? nudge : 0;
+        const dy = key === "ArrowUp" ? -nudge : key === "ArrowDown" ? nudge : 0;
+        const nodes = nodesRef.current ?? [];
+        const updates = [];
+        for (const id2 of selectedIds) {
+          const node = nodes.find((n) => n.id === id2);
+          if (node) {
+            updates.push({ id: id2, patch: { x: node.x + dx, y: node.y + dy } });
+          }
+        }
+        if (updates.length === 0)
+          return;
+        if (onNodesUpdate) {
+          wrappedOnNodesUpdate(updates, currentCanvasRef);
+        } else {
+          for (const { id: id2, patch } of updates) {
+            wrappedOnNodeUpdate(id2, patch, currentCanvasRef);
+          }
+        }
+        e.preventDefault();
+        return;
+      }
+      if (key === "Tab") {
+        const nodes = nodesRef.current ?? [];
+        if (nodes.length === 0)
+          return;
+        const sorted = [...nodes].sort((a, b) => a.y !== b.y ? a.y - b.y : a.x - b.x);
+        if (selectedIds.size === 0) {
+          selectNode(sorted[0].id);
+        } else {
+          const currentId = Array.from(selectedIds)[0];
+          const index = sorted.findIndex((n) => n.id === currentId);
+          const nextIndex = (index + (shift ? -1 : 1) + sorted.length) % sorted.length;
+          selectNode(sorted[nextIndex].id);
+        }
+        e.preventDefault();
+        return;
+      }
+      if ((meta || ctrl) && !shift && key === "d") {
+        if (selectedIds.size === 0)
+          return;
+        e.preventDefault();
+        const nodes = nodesRef.current ?? [];
+        const edges = edgesRef.current ?? [];
+        const gridSize = theme.grid?.size ?? 40;
+        const oldToNew = /* @__PURE__ */ new Map();
+        for (const id2 of selectedIds) {
+          oldToNew.set(id2, generateNodeId());
+        }
+        const clonedNodes = [];
+        for (const id2 of selectedIds) {
+          const node = nodes.find((n) => n.id === id2);
+          if (!node)
+            continue;
+          const newId2 = oldToNew.get(id2);
+          clonedNodes.push({
+            ...structuredClone(node),
+            id: newId2,
+            x: node.x + gridSize,
+            y: node.y + gridSize
+          });
+        }
+        const clonedEdges = [];
+        for (const edge of edges) {
+          if (selectedIds.has(edge.fromNode) && selectedIds.has(edge.toNode)) {
+            clonedEdges.push({
+              ...structuredClone(edge),
+              id: generateEdgeId(),
+              fromNode: oldToNew.get(edge.fromNode),
+              toNode: oldToNew.get(edge.toNode)
+            });
+          }
+        }
+        beginBatch();
+        for (const node of clonedNodes) {
+          wrappedOnNodeAdd(node, currentCanvasRef);
+        }
+        for (const edge of clonedEdges) {
+          wrappedOnEdgeAdd(edge, currentCanvasRef);
+        }
+        endBatch();
+        selectMultiple([...oldToNew.values()]);
+        return;
+      }
+      if ((meta || ctrl) && shift && key === "g") {
+        if (selectedIds.size !== 1)
+          return;
+        const nodeId = Array.from(selectedIds)[0];
+        const nodes = nodesRef.current ?? [];
+        const node = nodes.find((n) => n.id === nodeId);
+        if (!node || node.type !== "group")
+          return;
+        e.preventDefault();
+        wrappedOnNodeDelete(node.id, currentCanvasRef);
+        clearSelection();
+        return;
+      }
+      if ((meta || ctrl) && !shift && key === "g") {
+        if (selectedIds.size < 2)
+          return;
+        e.preventDefault();
+        const nodes = nodesRef.current ?? [];
+        const selectedNodes = nodes.filter((n) => selectedIds.has(n.id));
+        if (selectedNodes.length < 2)
+          return;
+        const gridSize = theme.grid?.size ?? 40;
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const node of selectedNodes) {
+          minX = Math.min(minX, node.x);
+          minY = Math.min(minY, node.y);
+          maxX = Math.max(maxX, node.x + node.width);
+          maxY = Math.max(maxY, node.y + node.height);
+        }
+        const groupNode = {
+          id: generateNodeId(),
+          type: "group",
+          x: minX - gridSize,
+          y: minY - gridSize,
+          width: maxX - minX + 2 * gridSize,
+          height: maxY - minY + 2 * gridSize,
+          label: ""
+        };
+        wrappedOnNodeAdd(groupNode, currentCanvasRef);
+        selectNode(groupNode.id);
+        return;
+      }
+    }, [
+      editable,
+      editingId,
+      editingEdgeId,
+      selectedIds,
+      selectedEdgeId,
+      nodesRef,
+      edgesRef,
+      theme,
+      currentCanvasRef,
+      contextMenuState,
+      wrappedOnNodeAdd,
+      wrappedOnEdgeAdd,
+      wrappedOnNodeUpdate,
+      wrappedOnNodesUpdate,
+      wrappedOnNodeDelete,
+      wrappedOnNodesDelete,
+      wrappedOnEdgeDelete,
+      onNodesUpdate,
+      beginBatch,
+      endBatch,
+      undo,
+      redo,
+      selectNode,
+      selectMultiple,
+      selectAll,
+      clearSelection,
+      setEditingId,
+      setEditingEdgeId,
+      setSelectedEdgeId,
+      setContextMenuState,
+      cancelDrag
+    ]);
+    return handleKeyDown;
+  }
+
+  // ../react/dist/hooks/useCanvasInteraction.js
+  var import_react3 = __toESM(require_react(), 1);
   function useCanvasInteraction(options) {
     const { onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onNavigableNodeClick, viewport, editable, onSelect, onToggleSelect, onBeginEdit, onSelectEdge, onBeginEditEdge } = options;
-    const handleNodeClick = (0, import_react2.useCallback)((node, event) => {
+    const handleNodeClick = (0, import_react3.useCallback)((node, event) => {
       event.stopPropagation();
       if (editable) {
         if (event.shiftKey && onToggleSelect) {
@@ -14662,19 +14895,19 @@ var SystemCanvas = (() => {
       }
       onNodeClick?.(node);
     }, [editable, onNodeClick, onSelect, onToggleSelect, onSelectEdge]);
-    const handleNodeDoubleClick = (0, import_react2.useCallback)((node, event) => {
+    const handleNodeDoubleClick = (0, import_react3.useCallback)((node, event) => {
       event.stopPropagation();
       onNodeDoubleClick?.(node);
       if (editable) {
         onBeginEdit?.(node);
       }
     }, [editable, onNodeDoubleClick, onBeginEdit]);
-    const handleNodeNavigate = (0, import_react2.useCallback)((node, _event) => {
+    const handleNodeNavigate = (0, import_react3.useCallback)((node, _event) => {
       if (node.isNavigable) {
         onNavigableNodeClick?.(node);
       }
     }, [onNavigableNodeClick]);
-    const handleEdgeClick = (0, import_react2.useCallback)((edge, event) => {
+    const handleEdgeClick = (0, import_react3.useCallback)((edge, event) => {
       event.stopPropagation();
       if (editable) {
         onSelectEdge?.(edge.id);
@@ -14682,14 +14915,14 @@ var SystemCanvas = (() => {
       }
       onEdgeClick?.(edge);
     }, [editable, onEdgeClick, onSelectEdge, onSelect]);
-    const handleEdgeDoubleClick = (0, import_react2.useCallback)((edge, event) => {
+    const handleEdgeDoubleClick = (0, import_react3.useCallback)((edge, event) => {
       event.stopPropagation();
       onEdgeDoubleClick?.(edge);
       if (editable) {
         onBeginEditEdge?.(edge);
       }
     }, [editable, onEdgeDoubleClick, onBeginEditEdge]);
-    const createContextMenuHandler = (0, import_react2.useCallback)((type, target) => {
+    const createContextMenuHandler = (0, import_react3.useCallback)((type, target) => {
       return (event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -14708,16 +14941,16 @@ var SystemCanvas = (() => {
         });
       };
     }, [onContextMenu, viewport]);
-    const handleCanvasContextMenu = (0, import_react2.useCallback)((event) => {
+    const handleCanvasContextMenu = (0, import_react3.useCallback)((event) => {
       createContextMenuHandler("canvas")(event);
     }, [createContextMenuHandler]);
-    const handleNodeContextMenu = (0, import_react2.useCallback)((node, event) => {
+    const handleNodeContextMenu = (0, import_react3.useCallback)((node, event) => {
       createContextMenuHandler("node", node)(event);
     }, [createContextMenuHandler]);
-    const handleEdgeContextMenu = (0, import_react2.useCallback)((edge, event) => {
+    const handleEdgeContextMenu = (0, import_react3.useCallback)((edge, event) => {
       createContextMenuHandler("edge", edge)(event);
     }, [createContextMenuHandler]);
-    const handleCanvasClick = (0, import_react2.useCallback)((_event) => {
+    const handleCanvasClick = (0, import_react3.useCallback)((_event) => {
       if (editable) {
         onSelect?.(null);
         onSelectEdge?.(null);
@@ -14737,25 +14970,25 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/hooks/useNodeDrag.js
-  var import_react3 = __toESM(require_react(), 1);
+  var import_react4 = __toESM(require_react(), 1);
   var DRAG_THRESHOLD = 3;
   function useNodeDrag(options) {
     const { viewport, nodesRef, onCommit, svgRef, canDropNodeOn, onNodeDrop, selectedIdsRef } = options;
-    const [dragOverrides, setDragOverrides] = (0, import_react3.useState)(() => /* @__PURE__ */ new Map());
-    const [isDragging, setIsDragging] = (0, import_react3.useState)(false);
-    const [dropTargetId, setDropTargetId] = (0, import_react3.useState)(null);
-    const stateRef = (0, import_react3.useRef)(null);
-    const movedRef = (0, import_react3.useRef)(false);
-    const canDropNodeOnRef = (0, import_react3.useRef)(canDropNodeOn);
+    const [dragOverrides, setDragOverrides] = (0, import_react4.useState)(() => /* @__PURE__ */ new Map());
+    const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
+    const [dropTargetId, setDropTargetId] = (0, import_react4.useState)(null);
+    const stateRef = (0, import_react4.useRef)(null);
+    const movedRef = (0, import_react4.useRef)(false);
+    const canDropNodeOnRef = (0, import_react4.useRef)(canDropNodeOn);
     canDropNodeOnRef.current = canDropNodeOn;
-    const onNodeDropRef = (0, import_react3.useRef)(onNodeDrop);
+    const onNodeDropRef = (0, import_react4.useRef)(onNodeDrop);
     onNodeDropRef.current = onNodeDrop;
-    const svgRefRef = (0, import_react3.useRef)(svgRef);
+    const svgRefRef = (0, import_react4.useRef)(svgRef);
     svgRefRef.current = svgRef;
-    const emptySetRef = (0, import_react3.useRef)(/* @__PURE__ */ new Set());
+    const emptySetRef = (0, import_react4.useRef)(/* @__PURE__ */ new Set());
     const effectiveSelectedIdsRef = selectedIdsRef ?? emptySetRef;
-    const dropTargetIdRef = (0, import_react3.useRef)(null);
-    const computeDropTarget = (0, import_react3.useCallback)((clientX, clientY) => {
+    const dropTargetIdRef = (0, import_react4.useRef)(null);
+    const computeDropTarget = (0, import_react4.useCallback)((clientX, clientY) => {
       const cb = canDropNodeOnRef.current;
       const st = stateRef.current;
       const nodes = nodesRef.current;
@@ -14779,7 +15012,7 @@ var SystemCanvas = (() => {
       }
       return null;
     }, [nodesRef, viewport]);
-    const onPointerMove = (0, import_react3.useCallback)((event) => {
+    const onPointerMove = (0, import_react4.useCallback)((event) => {
       const st = stateRef.current;
       if (!st || event.pointerId !== st.pointerId)
         return;
@@ -14806,7 +15039,7 @@ var SystemCanvas = (() => {
         setDropTargetId(nextTarget);
       }
     }, [viewport, computeDropTarget]);
-    const finishDrag = (0, import_react3.useCallback)((commit) => {
+    const finishDrag = (0, import_react4.useCallback)((commit) => {
       const st = stateRef.current;
       if (!st)
         return;
@@ -14850,25 +15083,25 @@ var SystemCanvas = (() => {
       setDragOverrides(/* @__PURE__ */ new Map());
       setDropTargetId(null);
     }, [onPointerMove, onCommit, nodesRef]);
-    const dragOverridesRef = (0, import_react3.useRef)(dragOverrides);
+    const dragOverridesRef = (0, import_react4.useRef)(dragOverrides);
     dragOverridesRef.current = dragOverrides;
-    const onPointerUpRef = (0, import_react3.useRef)(null);
-    const onPointerCancelRef = (0, import_react3.useRef)(null);
-    const onPointerUp = (0, import_react3.useCallback)((event) => {
+    const onPointerUpRef = (0, import_react4.useRef)(null);
+    const onPointerCancelRef = (0, import_react4.useRef)(null);
+    const onPointerUp = (0, import_react4.useCallback)((event) => {
       const st = stateRef.current;
       if (!st || event.pointerId !== st.pointerId)
         return;
       finishDrag(true);
     }, [finishDrag]);
     onPointerUpRef.current = onPointerUp;
-    const onPointerCancel = (0, import_react3.useCallback)((event) => {
+    const onPointerCancel = (0, import_react4.useCallback)((event) => {
       const st = stateRef.current;
       if (!st || event.pointerId !== st.pointerId)
         return;
       finishDrag(false);
     }, [finishDrag]);
     onPointerCancelRef.current = onPointerCancel;
-    const onPointerDown = (0, import_react3.useCallback)((node, event) => {
+    const onPointerDown = (0, import_react4.useCallback)((node, event) => {
       if (event.button !== 0)
         return;
       if (stateRef.current)
@@ -14913,20 +15146,24 @@ var SystemCanvas = (() => {
       window.addEventListener("pointerup", onPointerUp);
       window.addEventListener("pointercancel", onPointerCancel);
     }, [nodesRef, onPointerMove, onPointerUp, onPointerCancel]);
-    return { dragOverrides, dropTargetId, onPointerDown, isDragging };
+    const cancelDrag = (0, import_react4.useCallback)(() => {
+      if (stateRef.current)
+        finishDrag(false);
+    }, [finishDrag]);
+    return { dragOverrides, dropTargetId, onPointerDown, isDragging, cancelDrag };
   }
 
   // ../react/dist/hooks/useNodeResize.js
-  var import_react4 = __toESM(require_react(), 1);
+  var import_react5 = __toESM(require_react(), 1);
   var DEFAULT_MIN_SIZE = 40;
   function useNodeResize(options) {
     const { viewport, onCommit, minSize = DEFAULT_MIN_SIZE } = options;
-    const [resizeOverrides, setResizeOverrides] = (0, import_react4.useState)(() => /* @__PURE__ */ new Map());
-    const [isResizing, setIsResizing] = (0, import_react4.useState)(false);
-    const stateRef = (0, import_react4.useRef)(null);
-    const overridesRef = (0, import_react4.useRef)(resizeOverrides);
+    const [resizeOverrides, setResizeOverrides] = (0, import_react5.useState)(() => /* @__PURE__ */ new Map());
+    const [isResizing, setIsResizing] = (0, import_react5.useState)(false);
+    const stateRef = (0, import_react5.useRef)(null);
+    const overridesRef = (0, import_react5.useRef)(resizeOverrides);
     overridesRef.current = resizeOverrides;
-    const onPointerMove = (0, import_react4.useCallback)((event) => {
+    const onPointerMove = (0, import_react5.useCallback)((event) => {
       const st = stateRef.current;
       if (!st || event.pointerId !== st.pointerId)
         return;
@@ -14974,9 +15211,9 @@ var SystemCanvas = (() => {
       if (!isResizing)
         setIsResizing(true);
     }, [viewport, isResizing]);
-    const onPointerUpRef = (0, import_react4.useRef)(null);
-    const onPointerCancelRef = (0, import_react4.useRef)(null);
-    const finish = (0, import_react4.useCallback)((commit) => {
+    const onPointerUpRef = (0, import_react5.useRef)(null);
+    const onPointerCancelRef = (0, import_react5.useRef)(null);
+    const finish = (0, import_react5.useCallback)((commit) => {
       const st = stateRef.current;
       if (!st)
         return;
@@ -15003,21 +15240,21 @@ var SystemCanvas = (() => {
       setIsResizing(false);
       setResizeOverrides(/* @__PURE__ */ new Map());
     }, [onPointerMove, onCommit]);
-    const onPointerUp = (0, import_react4.useCallback)((event) => {
+    const onPointerUp = (0, import_react5.useCallback)((event) => {
       const st = stateRef.current;
       if (!st || event.pointerId !== st.pointerId)
         return;
       finish(true);
     }, [finish]);
     onPointerUpRef.current = onPointerUp;
-    const onPointerCancel = (0, import_react4.useCallback)((event) => {
+    const onPointerCancel = (0, import_react5.useCallback)((event) => {
       const st = stateRef.current;
       if (!st || event.pointerId !== st.pointerId)
         return;
       finish(false);
     }, [finish]);
     onPointerCancelRef.current = onPointerCancel;
-    const onHandlePointerDown = (0, import_react4.useCallback)((node, corner, event) => {
+    const onHandlePointerDown = (0, import_react5.useCallback)((node, corner, event) => {
       if (event.button !== 0)
         return;
       if (stateRef.current)
@@ -15049,7 +15286,7 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/hooks/useEdgeCreate.js
-  var import_react5 = __toESM(require_react(), 1);
+  var import_react6 = __toESM(require_react(), 1);
   var DROP_PADDING = 10;
   function hitTestNodes(nodes, x, y) {
     const pad = DROP_PADDING;
@@ -15067,18 +15304,18 @@ var SystemCanvas = (() => {
   }
   function useEdgeCreate(options) {
     const { svgRef, viewport, nodesRef, onCreate } = options;
-    const [pending, setPending] = (0, import_react5.useState)(null);
-    const pendingRef = (0, import_react5.useRef)(null);
+    const [pending, setPending] = (0, import_react6.useState)(null);
+    const pendingRef = (0, import_react6.useRef)(null);
     pendingRef.current = pending;
-    const pointerIdRef = (0, import_react5.useRef)(null);
-    const toCanvasPoint = (0, import_react5.useCallback)((clientX, clientY) => {
+    const pointerIdRef = (0, import_react6.useRef)(null);
+    const toCanvasPoint = (0, import_react6.useCallback)((clientX, clientY) => {
       const rect = svgRef.current?.getBoundingClientRect();
       const sx = clientX - (rect?.left ?? 0);
       const sy = clientY - (rect?.top ?? 0);
       const vp = viewport.current ?? { x: 0, y: 0, zoom: 1 };
       return screenToCanvas(sx, sy, vp);
     }, [svgRef, viewport]);
-    const handleMove = (0, import_react5.useCallback)((event) => {
+    const handleMove = (0, import_react6.useCallback)((event) => {
       if (pointerIdRef.current !== event.pointerId)
         return;
       const curr = pendingRef.current;
@@ -15090,11 +15327,11 @@ var SystemCanvas = (() => {
       const hoveredTargetId = hit ? hit.id : null;
       setPending({ ...curr, cursor, hoveredTargetId });
     }, [nodesRef, toCanvasPoint]);
-    const cleanup = (0, import_react5.useCallback)(() => {
+    const cleanup = (0, import_react6.useCallback)(() => {
       pointerIdRef.current = null;
       setPending(null);
     }, []);
-    const handleUp = (0, import_react5.useCallback)((event) => {
+    const handleUp = (0, import_react6.useCallback)((event) => {
       if (pointerIdRef.current !== event.pointerId)
         return;
       const curr = pendingRef.current;
@@ -15116,12 +15353,12 @@ var SystemCanvas = (() => {
       }
       cleanup();
     }, [cleanup, nodesRef, onCreate, toCanvasPoint]);
-    const handleCancel = (0, import_react5.useCallback)((event) => {
+    const handleCancel = (0, import_react6.useCallback)((event) => {
       if (pointerIdRef.current !== event.pointerId)
         return;
       cleanup();
     }, [cleanup]);
-    (0, import_react5.useEffect)(() => {
+    (0, import_react6.useEffect)(() => {
       if (!pending)
         return;
       window.addEventListener("pointermove", handleMove);
@@ -15133,7 +15370,7 @@ var SystemCanvas = (() => {
         window.removeEventListener("pointercancel", handleCancel);
       };
     }, [pending, handleMove, handleUp, handleCancel]);
-    const onHandlePointerDown = (0, import_react5.useCallback)((node, side, event) => {
+    const onHandlePointerDown = (0, import_react6.useCallback)((node, side, event) => {
       if (event.button !== 0)
         return;
       if (pointerIdRef.current !== null)
@@ -15151,21 +15388,21 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/hooks/useMultiSelect.js
-  var import_react6 = __toESM(require_react(), 1);
+  var import_react7 = __toESM(require_react(), 1);
   function useMultiSelect(options) {
     const { svgRef, viewport, nodesRef, containerRef, enabled } = options;
-    const [selectedIds, setSelectedIds] = (0, import_react6.useState)(() => /* @__PURE__ */ new Set());
-    const [marqueeRect, setMarqueeRect] = (0, import_react6.useState)(null);
-    const marqueeActiveRef = (0, import_react6.useRef)(false);
-    const isDrawingRef = (0, import_react6.useRef)(false);
-    const startScreenRef = (0, import_react6.useRef)(null);
-    const pointerIdRef = (0, import_react6.useRef)(null);
-    const selectedIdsRef = (0, import_react6.useRef)(selectedIds);
+    const [selectedIds, setSelectedIds] = (0, import_react7.useState)(() => /* @__PURE__ */ new Set());
+    const [marqueeRect, setMarqueeRect] = (0, import_react7.useState)(null);
+    const marqueeActiveRef = (0, import_react7.useRef)(false);
+    const isDrawingRef = (0, import_react7.useRef)(false);
+    const startScreenRef = (0, import_react7.useRef)(null);
+    const pointerIdRef = (0, import_react7.useRef)(null);
+    const selectedIdsRef = (0, import_react7.useRef)(selectedIds);
     selectedIdsRef.current = selectedIds;
-    const selectNode = (0, import_react6.useCallback)((id2) => {
+    const selectNode = (0, import_react7.useCallback)((id2) => {
       setSelectedIds(/* @__PURE__ */ new Set([id2]));
     }, []);
-    const toggleNode = (0, import_react6.useCallback)((id2) => {
+    const toggleNode = (0, import_react7.useCallback)((id2) => {
       setSelectedIds((prev) => {
         const next = new Set(prev);
         if (next.has(id2)) {
@@ -15176,16 +15413,19 @@ var SystemCanvas = (() => {
         return next;
       });
     }, []);
-    const selectAll = (0, import_react6.useCallback)(() => {
+    const selectAll = (0, import_react7.useCallback)(() => {
       const nodes = nodesRef.current;
       if (!nodes)
         return;
       setSelectedIds(new Set(nodes.map((n) => n.id)));
     }, [nodesRef]);
-    const clearSelection = (0, import_react6.useCallback)(() => {
+    const clearSelection = (0, import_react7.useCallback)(() => {
       setSelectedIds(/* @__PURE__ */ new Set());
     }, []);
-    (0, import_react6.useEffect)(() => {
+    const selectMultiple = (0, import_react7.useCallback)((ids) => {
+      setSelectedIds(new Set(ids));
+    }, []);
+    (0, import_react7.useEffect)(() => {
       if (!enabled)
         return;
       const container = containerRef.current;
@@ -15219,7 +15459,7 @@ var SystemCanvas = (() => {
         container.removeEventListener("keyup", onKeyUp);
       };
     }, [enabled, containerRef]);
-    (0, import_react6.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (!enabled)
         return;
       const container = containerRef.current;
@@ -15240,7 +15480,7 @@ var SystemCanvas = (() => {
         container.removeEventListener("keydown", onKeyDown);
       };
     }, [enabled, containerRef, selectAll]);
-    (0, import_react6.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (!enabled)
         return;
       const container = containerRef.current;
@@ -15340,25 +15580,30 @@ var SystemCanvas = (() => {
       toggleNode,
       selectAll,
       clearSelection,
+      selectMultiple,
       marqueeRect,
       marqueeActiveRef
     };
   }
 
   // ../react/dist/hooks/useMultiSelectClipboard.js
-  var import_react7 = __toESM(require_react(), 1);
+  var import_react8 = __toESM(require_react(), 1);
   var clipboardSnapshot = null;
   function useMultiSelectClipboard(options) {
-    const { selectedIdsRef, nodesRef, edgesRef, viewport, onNodeAdd, onEdgeAdd, canvasRef, getCursorScreenPos } = options;
-    const getCursorScreenPosRef = (0, import_react7.useRef)(getCursorScreenPos);
+    const { selectedIdsRef, nodesRef, edgesRef, viewport, onNodeAdd, onEdgeAdd, canvasRef, getCursorScreenPos, onBeginBatch, onEndBatch } = options;
+    const getCursorScreenPosRef = (0, import_react8.useRef)(getCursorScreenPos);
     getCursorScreenPosRef.current = getCursorScreenPos;
-    const onNodeAddRef = (0, import_react7.useRef)(onNodeAdd);
+    const onNodeAddRef = (0, import_react8.useRef)(onNodeAdd);
     onNodeAddRef.current = onNodeAdd;
-    const onEdgeAddRef = (0, import_react7.useRef)(onEdgeAdd);
+    const onEdgeAddRef = (0, import_react8.useRef)(onEdgeAdd);
     onEdgeAddRef.current = onEdgeAdd;
-    const canvasRefRef = (0, import_react7.useRef)(canvasRef);
+    const canvasRefRef = (0, import_react8.useRef)(canvasRef);
     canvasRefRef.current = canvasRef;
-    (0, import_react7.useEffect)(() => {
+    const onBeginBatchRef = (0, import_react8.useRef)(onBeginBatch);
+    onBeginBatchRef.current = onBeginBatch;
+    const onEndBatchRef = (0, import_react8.useRef)(onEndBatch);
+    onEndBatchRef.current = onEndBatch;
+    (0, import_react8.useEffect)(() => {
       const handler = (e) => {
         const active = document.activeElement;
         if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable) {
@@ -15430,12 +15675,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 +15694,298 @@ var SystemCanvas = (() => {
     }, [selectedIdsRef, nodesRef, edgesRef, viewport]);
   }
 
+  // ../react/dist/hooks/useCommandHistory.js
+  var import_react9 = __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_react9.useRef)(onNodeAdd);
+    onNodeAddRef.current = onNodeAdd;
+    const onNodeUpdateRef = (0, import_react9.useRef)(onNodeUpdate);
+    onNodeUpdateRef.current = onNodeUpdate;
+    const onNodesUpdateRef = (0, import_react9.useRef)(onNodesUpdate);
+    onNodesUpdateRef.current = onNodesUpdate;
+    const onNodeDeleteRef = (0, import_react9.useRef)(onNodeDelete);
+    onNodeDeleteRef.current = onNodeDelete;
+    const onNodesDeleteRef = (0, import_react9.useRef)(onNodesDelete);
+    onNodesDeleteRef.current = onNodesDelete;
+    const onEdgeAddRef = (0, import_react9.useRef)(onEdgeAdd);
+    onEdgeAddRef.current = onEdgeAdd;
+    const onEdgeUpdateRef = (0, import_react9.useRef)(onEdgeUpdate);
+    onEdgeUpdateRef.current = onEdgeUpdate;
+    const onEdgeDeleteRef = (0, import_react9.useRef)(onEdgeDelete);
+    onEdgeDeleteRef.current = onEdgeDelete;
+    const undoStack = (0, import_react9.useRef)([]);
+    const redoStack = (0, import_react9.useRef)([]);
+    const isUndoingRef = (0, import_react9.useRef)(false);
+    const pendingBatchRef = (0, import_react9.useRef)(null);
+    const [canUndo, setCanUndo] = (0, import_react9.useState)(false);
+    const [canRedo, setCanRedo] = (0, import_react9.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_react9.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_react9.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_react9.useCallback)(() => {
+      if (!enabled)
+        return;
+      pendingBatchRef.current = [];
+    }, [enabled]);
+    const endBatch = (0, import_react9.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_react9.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_react9.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_react9.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_react9.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_react9.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_react9.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_react9.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_react9.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_react8 = __toESM(require_react(), 1);
+  var import_react10 = __toESM(require_react(), 1);
   function expandRect(rect, factor) {
     if (factor === 1)
       return rect;
@@ -15486,16 +16023,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_react10.useRef)(false);
+    (0, import_react10.useEffect)(() => {
       committingRef.current = false;
     }, [currentCanvas]);
-    const exitArmedRef = (0, import_react8.useRef)(false);
-    (0, import_react8.useEffect)(() => {
+    const exitArmedRef = (0, import_react10.useRef)(false);
+    (0, import_react10.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_react10.useRef)(/* @__PURE__ */ new Map());
+    const prefetch = (0, import_react10.useCallback)((ref) => {
       if (!onResolveCanvas)
         return;
       if (canvases?.[ref])
@@ -15513,7 +16050,7 @@ var SystemCanvas = (() => {
         state.loading = false;
       });
     }, [canvases, onResolveCanvas, onSeedCanvas]);
-    const handleViewportChange = (0, import_react8.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react10.useCallback)((vp) => {
       if (!enabled)
         return;
       if (committingRef.current)
@@ -15652,7 +16189,7 @@ var SystemCanvas = (() => {
       onEnter,
       onExit
     ]);
-    const clearCommitting = (0, import_react8.useCallback)(() => {
+    const clearCommitting = (0, import_react10.useCallback)(() => {
       committingRef.current = false;
     }, []);
     return { handleViewportChange, clearCommitting };
@@ -15660,10 +16197,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_react19 = __toESM(require_react(), 1);
 
   // ../react/dist/hooks/useViewport.js
-  var import_react9 = __toESM(require_react(), 1);
+  var import_react11 = __toESM(require_react(), 1);
 
   // ../../node_modules/d3-dispatch/src/dispatch.js
   var noop = { value: () => {
@@ -18406,13 +18943,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_react11.useRef)(null);
+    const groupRef = (0, import_react11.useRef)(null);
+    const viewport = (0, import_react11.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
+    const zoomBehaviorRef = (0, import_react11.useRef)(null);
+    const onViewportChangeRef = (0, import_react11.useRef)(onViewportChange);
     onViewportChangeRef.current = onViewportChange;
-    (0, import_react9.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       const svg = svgRef.current;
       const group = groupRef.current;
       if (!svg || !group)
@@ -18452,7 +18989,7 @@ var SystemCanvas = (() => {
         selection2.on(".zoom", null);
       };
     }, [minZoom, maxZoom]);
-    const fitToContent = (0, import_react9.useCallback)((nodes, animate = true) => {
+    const fitToContent = (0, import_react11.useCallback)((nodes, animate = true) => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current || nodes.length === 0)
         return;
@@ -18465,13 +19002,13 @@ var SystemCanvas = (() => {
         select_default2(svg).call(zoomBehaviorRef.current.transform, t);
       }
     }, []);
-    const resetZoom = (0, import_react9.useCallback)(() => {
+    const resetZoom = (0, import_react11.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_react11.useCallback)((transform2, options2) => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current)
         return;
@@ -18483,7 +19020,7 @@ var SystemCanvas = (() => {
         sel.call(zoomBehaviorRef.current.transform, t);
       }
     }, []);
-    const zoomToNode = (0, import_react9.useCallback)((node, onComplete, options2) => {
+    const zoomToNode = (0, import_react11.useCallback)((node, onComplete, options2) => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current) {
         onComplete?.();
@@ -18677,9 +19214,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_react12 = __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_react12.useState)(false);
     const iconKind = theme.node.refIndicator.icon;
     if (iconKind === "none")
       return null;
@@ -18750,7 +19287,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_react14 = __toESM(require_react(), 1);
 
   // ../react/dist/primitives/NodeColorFill.js
   var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
@@ -18870,9 +19407,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_react13 = __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_react13.useId)();
     const safeId = reactId.replace(/:/g, "");
     if (!value)
       return null;
@@ -18946,8 +19483,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_react14.useMemo)(() => computeCategorySlotRegions(node, theme, slots), [node, theme, slots]);
+    const reactId = (0, import_react14.useId)();
     const clipId = `sc-edge-clip-${reactId.replace(/:/g, "")}`;
     if (!slots)
       return null;
@@ -19180,7 +19717,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_react15 = __toESM(require_react(), 1);
   var HANDLE_SIZE = 7;
   var CORNERS = [
     { corner: "nw", cursor: "nwse-resize", anchor: "nw" },
@@ -19191,7 +19728,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_react15.useState)(null);
     const handleColor = node.resolvedStroke ?? theme.node.labelColor;
     const i = cornerInset(node.resolvedCornerRadius);
     const anchorPos = (anchor) => {
@@ -19302,7 +19839,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_react16 = __toESM(require_react(), 1);
   function NodeEditor({ node, theme, onCommit, onCancel }) {
     const editableFields = useCategoryFields(node, theme);
     if (editableFields) {
@@ -19321,11 +19858,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_react16.useState)(initial);
+    const textareaRef = (0, import_react16.useRef)(null);
+    const inputRef = (0, import_react16.useRef)(null);
+    const committedRef = (0, import_react16.useRef)(false);
+    (0, import_react16.useEffect)(() => {
       const el = textareaRef.current ?? inputRef.current;
       if (el) {
         el.focus();
@@ -19421,10 +19958,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_react16.useMemo)(() => readInitialValues(node, fields), [node, fields]);
+    const [values, setValues] = (0, import_react16.useState)(initial);
+    const committedRef = (0, import_react16.useRef)(false);
+    const panelRef = (0, import_react16.useRef)(null);
     const width = Math.max(node.width, 240);
     const height = Math.max(node.height, 36 + fields.length * 44);
     const commit = () => {
@@ -19453,7 +19990,7 @@ var SystemCanvas = (() => {
     const stopPointer = (e) => {
       e.stopPropagation();
     };
-    (0, import_react14.useEffect)(() => {
+    (0, import_react16.useEffect)(() => {
       const el = panelRef.current;
       if (!el)
         return;
@@ -19583,13 +20120,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_react17 = __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_react17.useState)(initialLabel);
+    const inputRef = (0, import_react17.useRef)(null);
+    const committedRef = (0, import_react17.useRef)(false);
+    (0, import_react17.useEffect)(() => {
       const el = inputRef.current;
       if (el) {
         el.focus();
@@ -19644,7 +20181,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_react18 = __toESM(require_react(), 1);
   var SIDES = ["top", "right", "bottom", "left"];
   var HANDLE_RADIUS = 4;
   var HANDLE_HIT_RADIUS = 10;
@@ -19653,9 +20190,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_react18.useState)(!!immediate);
+    const [hoveredSide, setHoveredSide] = (0, import_react18.useState)(null);
+    (0, import_react18.useEffect)(() => {
       if (immediate) {
         setVisible(true);
         return;
@@ -19742,7 +20279,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_react19.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 +20287,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_react19.useRef)(false);
+    const fadeRafRef = (0, import_react19.useRef)(null);
+    const fadeTimeoutRef = (0, import_react19.useRef)(null);
+    const triggerFade = (0, import_react19.useCallback)((durationMs) => {
       if (durationMs <= 0)
         return;
       const g = groupRef.current;
@@ -19776,7 +20313,7 @@ var SystemCanvas = (() => {
         }, durationMs + 16);
       });
     }, []);
-    (0, import_react17.useEffect)(() => {
+    (0, import_react19.useEffect)(() => {
       return () => {
         if (fadeRafRef.current !== null)
           cancelAnimationFrame(fadeRafRef.current);
@@ -19784,10 +20321,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_react19.useState)(null);
+    const [hoveredSide, setHoveredSide] = (0, import_react19.useState)(null);
+    const cursorPosRef = (0, import_react19.useRef)(null);
+    (0, import_react19.useImperativeHandle)(ref, () => ({
       zoomToNode: (node, onComplete, options) => {
         navigatingRef.current = true;
         zoomToNode(node, onComplete, options);
@@ -19798,7 +20335,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_react19.useMemo)(() => {
       const hasDrag = dragOverrides && dragOverrides.size > 0;
       const hasResize = resizeOverrides && resizeOverrides.size > 0;
       if (!hasDrag && !hasResize)
@@ -19811,7 +20348,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_react19.useMemo)(() => {
       const hasDrag = dragOverrides && dragOverrides.size > 0;
       const hasResize = resizeOverrides && resizeOverrides.size > 0;
       if (!hasDrag && !hasResize)
@@ -19822,11 +20359,11 @@ var SystemCanvas = (() => {
       }
       return m;
     }, [renderNodes, nodeMap, dragOverrides, resizeOverrides]);
-    const latestNodesRef = (0, import_react17.useRef)(nodes);
-    (0, import_react17.useEffect)(() => {
+    const latestNodesRef = (0, import_react19.useRef)(nodes);
+    (0, import_react19.useEffect)(() => {
       latestNodesRef.current = nodes;
     }, [nodes]);
-    const fitNow = (0, import_react17.useCallback)(() => {
+    const fitNow = (0, import_react19.useCallback)(() => {
       const current = latestNodesRef.current;
       if (current.length === 0)
         return;
@@ -19836,7 +20373,7 @@ var SystemCanvas = (() => {
         fitToContent(current, animate);
       });
     }, [fitToContent]);
-    (0, import_react17.useEffect)(() => {
+    (0, import_react19.useEffect)(() => {
       if (defaultViewport)
         return;
       if (autoFit !== "always")
@@ -19845,8 +20382,8 @@ var SystemCanvas = (() => {
         return;
       fitNow();
     }, [nodes, autoFit, defaultViewport, fitNow]);
-    const fittedForRef = (0, import_react17.useRef)(null);
-    (0, import_react17.useEffect)(() => {
+    const fittedForRef = (0, import_react19.useRef)(null);
+    (0, import_react19.useEffect)(() => {
       if (defaultViewport)
         return;
       if (autoFit !== "canvas-change" && autoFit !== "initial")
@@ -19878,7 +20415,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_react19.useCallback)((event) => {
       const svg = svgRef.current;
       if (!svg)
         return;
@@ -19930,7 +20467,7 @@ var SystemCanvas = (() => {
         setHoveredSide((prev) => prev === null ? prev : null);
       }
     }, [edgeCreateEnabled, renderNodes, svgRef, viewport]);
-    const handleSvgPointerLeave = (0, import_react17.useCallback)(() => {
+    const handleSvgPointerLeave = (0, import_react19.useCallback)(() => {
       setHoveredNodeId(null);
       setHoveredSide(null);
       cursorPosRef.current = null;
@@ -19969,7 +20506,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_react20 = __toESM(require_react(), 1);
   function Breadcrumbs({ breadcrumbs, theme, onNavigate }) {
     if (breadcrumbs.length <= 1)
       return null;
@@ -19990,7 +20527,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_react20.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 +20551,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_react21 = __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_react21.useState)(false);
+    const rootRef = (0, import_react21.useRef)(null);
+    (0, import_react21.useEffect)(() => {
       if (!open)
         return;
       function onDocClick(e) {
@@ -20107,7 +20644,7 @@ var SystemCanvas = (() => {
     } });
   }
   function MenuRow({ theme, option, onClick }) {
-    const [hover, setHover] = (0, import_react19.useState)(false);
+    const [hover, setHover] = (0, import_react21.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 +20680,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_react22 = __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_react22.useState)(() => getViewport());
+    (0, import_react22.useEffect)(() => {
       if (!hasColumns && !hasRows)
         return;
       let raf = 0;
@@ -20222,7 +20759,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_react23 = __toESM(require_react(), 1);
   var NODE_GAP = 10;
   var FLIP_MARGIN = 8;
   var PADDING = 6;
@@ -20231,8 +20768,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_react23.useState)(() => getViewport());
+    (0, import_react23.useEffect)(() => {
       let raf = 0;
       let lastX = -Infinity;
       let lastY = -Infinity;
@@ -20252,7 +20789,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_react23.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 +20806,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_react23.useRef)(null);
+    const [size, setSize] = (0, import_react23.useState)({ width: 0, height: 0 });
+    (0, import_react23.useEffect)(() => {
       const el = toolbarRef.current;
       if (!el)
         return;
@@ -20331,7 +20868,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_react23.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 +20882,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_react23.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 +20894,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_react23.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 +20905,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_react23.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_react23.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 +20974,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_react23.useState)(false);
+    const wrapRef = (0, import_react23.useRef)(null);
+    (0, import_react23.useEffect)(() => {
       if (!open)
         return;
       const onDown = (e) => {
@@ -20526,18 +21063,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_react24 = __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_react24.useRef)(null);
+    const [hoveredId, setHoveredId] = (0, import_react24.useState)(null);
+    (0, import_react24.useEffect)(() => {
       if (state)
         setHoveredId(null);
     }, [state]);
-    (0, import_react22.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       if (!state)
         return;
       function onDown(e) {
@@ -20645,8 +21182,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_react25.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_react25.useMemo)(() => {
       const defaults = {
         enterThreshold: 0.66,
         exitThreshold: 0.33,
@@ -20671,16 +21208,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_react25.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_react25.useState)([]);
+    const [pendingHandoff, setPendingHandoff] = (0, import_react25.useState)(null);
+    const suppressNextHandoffClearRef = (0, import_react25.useRef)(false);
+    const handleBreadcrumbClick = (0, import_react25.useCallback)((index) => {
       setParentFrames((prev) => prev.slice(0, index));
       if (suppressNextHandoffClearRef.current) {
         suppressNextHandoffClearRef.current = false;
@@ -20697,10 +21234,10 @@ var SystemCanvas = (() => {
       onNavigate,
       onBreadcrumbClick: handleBreadcrumbClick
     });
-    (0, import_react23.useEffect)(() => {
+    (0, import_react25.useEffect)(() => {
       onBreadcrumbsChange?.(breadcrumbs);
     }, [breadcrumbs, onBreadcrumbsChange]);
-    const theme = (0, import_react23.useMemo)(() => {
+    const theme = (0, import_react25.useMemo)(() => {
       const registry = { ...themes, ...customThemes };
       const resolveByName = (name) => name && registry[name] ? registry[name] : null;
       if (themeProp) {
@@ -20711,22 +21248,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_react25.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_react25.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_react25.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
+    const viewportHandleRef = (0, import_react25.useRef)(null);
+    const navigateToRefRef = (0, import_react25.useRef)(navigateToRef);
     navigateToRefRef.current = navigateToRef;
-    const navigateToBreadcrumbRef = (0, import_react23.useRef)(navigateToBreadcrumb);
+    const navigateToBreadcrumbRef = (0, import_react25.useRef)(navigateToBreadcrumb);
     navigateToBreadcrumbRef.current = navigateToBreadcrumb;
-    const breadcrumbsRef = (0, import_react23.useRef)(breadcrumbs);
+    const breadcrumbsRef = (0, import_react25.useRef)(breadcrumbs);
     breadcrumbsRef.current = breadcrumbs;
-    (0, import_react23.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react25.useImperativeHandle)(forwardedRef, () => ({
       zoomIntoNode: (nodeId, options) => {
         return new Promise((resolve) => {
           const node = nodesRef.current.find((n) => n.id === nodeId);
@@ -20758,49 +21295,67 @@ 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 { selectedIds, selectNode, toggleNode, selectAll, clearSelection, marqueeRect, marqueeActiveRef } = useMultiSelect({
+    const [editingId, setEditingId] = (0, import_react25.useState)(null);
+    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react25.useState)(null);
+    const [editingEdgeId, setEditingEdgeId] = (0, import_react25.useState)(null);
+    const svgProxyRef = (0, import_react25.useRef)(null);
+    const containerRef = (0, import_react25.useRef)(null);
+    const { selectedIds, selectNode, toggleNode, selectAll, clearSelection, selectMultiple, marqueeRect, marqueeActiveRef } = useMultiSelect({
       svgRef: svgProxyRef,
       viewport: viewportStateRef,
       nodesRef,
       containerRef,
       enabled: editable
     });
-    const selectedIdsRef = (0, import_react23.useRef)(selectedIds);
-    (0, import_react23.useEffect)(() => {
+    const selectedIdsRef = (0, import_react25.useRef)(selectedIds);
+    (0, import_react25.useEffect)(() => {
       selectedIdsRef.current = selectedIds;
     }, [selectedIds]);
-    const edgesRef = (0, import_react23.useRef)(edges);
-    (0, import_react23.useEffect)(() => {
+    const edgesRef = (0, import_react25.useRef)(edges);
+    (0, import_react25.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_react25.useEffect)(() => {
       clearSelection();
       setEditingId(null);
       setSelectedEdgeId(null);
       setEditingEdgeId(null);
     }, [currentCanvasRef]);
-    const onSelectionChangeRef = (0, import_react23.useRef)(onSelectionChange);
-    (0, import_react23.useEffect)(() => {
+    const onSelectionChangeRef = (0, import_react25.useRef)(onSelectionChange);
+    (0, import_react25.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_react25.useRef)({ kind: null, id: null, multiIds: null, canvasRef: void 0 });
+    (0, import_react25.useEffect)(() => {
       const cb = onSelectionChangeRef.current;
       let next = null;
       if (selectedIds.size > 1) {
@@ -20842,8 +21397,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_react25.useState)({ width: 0, height: 0 });
+    (0, import_react25.useEffect)(() => {
       const el = containerRef.current;
       if (!el)
         return;
@@ -20858,8 +21413,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_react25.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
+    const applyLaneSnap = (0, import_react25.useCallback)((id2, patch) => {
       if (!snapToLanes)
         return patch;
       const cols = currentCanvas.columns;
@@ -20884,28 +21439,28 @@ 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_react25.useCallback)((id2, patch) => {
+      wrappedOnNodeUpdate(id2, applyLaneSnap(id2, patch), currentCanvasRef);
+    }, [wrappedOnNodeUpdate, currentCanvasRef, applyLaneSnap]);
+    const commitDragBatch = (0, import_react25.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_react25.useCallback)((sources, target) => {
       onNodeDrop?.(sources, target, { canvasRef: currentCanvasRef });
     }, [onNodeDrop, currentCanvasRef]);
-    const { dragOverrides, dropTargetId, onPointerDown: onNodePointerDown } = useNodeDrag({
+    const { dragOverrides, dropTargetId, onPointerDown: onNodePointerDown, cancelDrag } = useNodeDrag({
       viewport: viewportStateRef,
       nodesRef,
       onCommit: commitDragBatch,
@@ -20919,7 +21474,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_react25.useMemo)(() => {
       if (!singleSelectedId)
         return null;
       const base = nodeMap.get(singleSelectedId);
@@ -20936,16 +21491,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_react25.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_react25.useCallback)((node) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -20972,7 +21527,7 @@ var SystemCanvas = (() => {
         navigateToRef(node);
       }
     }, [navigateToRef, currentCanvasRef, zoomNavConfig.enabled]);
-    const handleZoomEnter = (0, import_react23.useCallback)((node, targetTransform) => {
+    const handleZoomEnter = (0, import_react25.useCallback)((node, targetTransform) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -20986,7 +21541,7 @@ var SystemCanvas = (() => {
       setPendingHandoff(targetTransform);
       navigateToRef(node);
     }, [currentCanvasRef, navigateToRef]);
-    const handleZoomExit = (0, import_react23.useCallback)((targetTransform) => {
+    const handleZoomExit = (0, import_react25.useCallback)((targetTransform) => {
       setPendingHandoff(targetTransform);
       suppressNextHandoffClearRef.current = true;
       navigateToBreadcrumb(breadcrumbs.length - 2);
@@ -21013,26 +21568,26 @@ var SystemCanvas = (() => {
       onEnter: handleZoomEnter,
       onExit: handleZoomExit
     });
-    const handleViewportChange = (0, import_react23.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react25.useCallback)((vp) => {
       viewportStateRef.current = vp;
       handleZoomNavViewportChange(vp);
       onViewportChange?.(vp);
     }, [handleZoomNavViewportChange, onViewportChange]);
-    const handleHandoffApplied = (0, import_react23.useCallback)(() => {
+    const handleHandoffApplied = (0, import_react25.useCallback)(() => {
       setPendingHandoff(null);
       clearZoomNavCommitting();
     }, [clearZoomNavCommitting]);
-    const handleBeginEdit = (0, import_react23.useCallback)((node) => {
+    const handleBeginEdit = (0, import_react25.useCallback)((node) => {
       setEditingId(node.id);
     }, []);
-    const handleBeginEditEdge = (0, import_react23.useCallback)((edge) => {
+    const handleBeginEditEdge = (0, import_react25.useCallback)((edge) => {
       setEditingEdgeId(edge.id);
     }, []);
-    const [contextMenuState, setContextMenuState] = (0, import_react23.useState)(null);
-    (0, import_react23.useEffect)(() => {
+    const [contextMenuState, setContextMenuState] = (0, import_react25.useState)(null);
+    (0, import_react25.useEffect)(() => {
       setContextMenuState(null);
     }, [currentCanvasRef]);
-    const handleContextMenu = (0, import_react23.useCallback)((event) => {
+    const handleContextMenu = (0, import_react25.useCallback)((event) => {
       onContextMenu?.(event);
       if (!nodeContextMenu)
         return;
@@ -21075,27 +21630,27 @@ var SystemCanvas = (() => {
       onSelectEdge: setSelectedEdgeId,
       onBeginEditEdge: handleBeginEditEdge
     });
-    const handleEditorCommit = (0, import_react23.useCallback)((patch) => {
+    const handleEditorCommit = (0, import_react25.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_react25.useCallback)(() => {
       setEditingId(null);
     }, []);
-    const handleEdgeEditorCommit = (0, import_react23.useCallback)((patch) => {
+    const handleEdgeEditorCommit = (0, import_react25.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_react25.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_react25.useRef)(null);
+    const menuOptions = (0, import_react25.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
+    const addNode2 = (0, import_react25.useCallback)((option, position) => {
       let x, y;
       if (position) {
         x = position.x;
@@ -21125,54 +21680,42 @@ 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) => {
-      if (!editable)
-        return;
-      if (e.key === "Escape") {
-        setEditingId(null);
-        clearSelection();
-        setEditingEdgeId(null);
-        setSelectedEdgeId(null);
-        return;
-      }
-      if (editingId || editingEdgeId)
-        return;
-      if ((e.metaKey || e.ctrlKey) && e.key === "a") {
-        e.preventDefault();
-        selectAll();
-        return;
-      }
-      if (e.key === "Delete" || e.key === "Backspace") {
-        if (selectedIds.size > 1) {
-          e.preventDefault();
-          onNodesDelete?.(Array.from(selectedIds), currentCanvasRef);
-          clearSelection();
-        } else if (selectedIds.size === 1) {
-          const id2 = Array.from(selectedIds)[0];
-          e.preventDefault();
-          onNodeDelete?.(id2, currentCanvasRef);
-          clearSelection();
-        } else if (selectedEdgeId) {
-          e.preventDefault();
-          onEdgeDelete?.(selectedEdgeId, currentCanvasRef);
-          setSelectedEdgeId(null);
-        }
-      }
-    }, [
+      wrappedOnNodeAdd(node, currentCanvasRef);
+    }, [wrappedOnNodeAdd, currentCanvasRef, theme]);
+    const handleKeyDown = useKeyboardShortcuts({
       editable,
       editingId,
       editingEdgeId,
       selectedIds,
       selectedEdgeId,
-      onNodeDelete,
-      onNodesDelete,
-      onEdgeDelete,
+      nodesRef,
+      edgesRef,
+      theme,
       currentCanvasRef,
+      contextMenuState,
+      setContextMenuState,
+      wrappedOnNodeAdd,
+      wrappedOnEdgeAdd,
+      wrappedOnNodeUpdate,
+      wrappedOnNodesUpdate,
+      wrappedOnNodeDelete,
+      wrappedOnNodesDelete,
+      wrappedOnEdgeDelete,
+      onNodesUpdate,
+      onNodeUpdate,
+      beginBatch,
+      endBatch,
+      undo,
+      redo,
+      selectNode,
+      selectMultiple,
+      selectAll,
       clearSelection,
-      selectAll
-    ]);
+      setEditingId,
+      setEditingEdgeId,
+      setSelectedEdgeId,
+      cancelDrag
+    });
     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: {
       position: "relative",
@@ -21194,9 +21737,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 +21749,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 +21866,7 @@ var SystemCanvas = (() => {
         onEdgeUpdate: handleEdgeUpdate,
         onEdgeDelete: handleEdgeDelete
       };
-      root2.render(import_react24.default.createElement(SystemCanvas, props));
+      root2.render(import_react26.default.createElement(SystemCanvas, props));
     };
     doRender();
     return {