system-canvas-standalone 0.2.4 → 0.2.6

package/dist/system-canvas.js

@@ -12759,12 +12759,12 @@ var SystemCanvas = (() => {
     render: () => render,
     themes: () => themes
   });
-  var import_react25 = __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_react24 = __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,29 +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, onBeginBatch, onEndBatch } = options;
-    const getCursorScreenPosRef = (0, import_react7.useRef)(getCursorScreenPos);
+    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;
-    const onBeginBatchRef = (0, import_react7.useRef)(onBeginBatch);
+    const onBeginBatchRef = (0, import_react8.useRef)(onBeginBatch);
     onBeginBatchRef.current = onBeginBatch;
-    const onEndBatchRef = (0, import_react7.useRef)(onEndBatch);
+    const onEndBatchRef = (0, import_react8.useRef)(onEndBatch);
     onEndBatchRef.current = onEndBatch;
-    (0, import_react7.useEffect)(() => {
+    (0, import_react8.useEffect)(() => {
       const handler = (e) => {
         const active = document.activeElement;
         if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable) {
@@ -15454,7 +15695,7 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/hooks/useCommandHistory.js
-  var import_react8 = __toESM(require_react(), 1);
+  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;
@@ -15463,28 +15704,28 @@ var SystemCanvas = (() => {
   }
   function useCommandHistory(options) {
     const { nodesRef, edgesRef, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, onEdgeAdd, onEdgeUpdate, onEdgeDelete, maxDepth = 50, enabled = true, onUndo, onRedo } = options;
-    const onNodeAddRef = (0, import_react8.useRef)(onNodeAdd);
+    const onNodeAddRef = (0, import_react9.useRef)(onNodeAdd);
     onNodeAddRef.current = onNodeAdd;
-    const onNodeUpdateRef = (0, import_react8.useRef)(onNodeUpdate);
+    const onNodeUpdateRef = (0, import_react9.useRef)(onNodeUpdate);
     onNodeUpdateRef.current = onNodeUpdate;
-    const onNodesUpdateRef = (0, import_react8.useRef)(onNodesUpdate);
+    const onNodesUpdateRef = (0, import_react9.useRef)(onNodesUpdate);
     onNodesUpdateRef.current = onNodesUpdate;
-    const onNodeDeleteRef = (0, import_react8.useRef)(onNodeDelete);
+    const onNodeDeleteRef = (0, import_react9.useRef)(onNodeDelete);
     onNodeDeleteRef.current = onNodeDelete;
-    const onNodesDeleteRef = (0, import_react8.useRef)(onNodesDelete);
+    const onNodesDeleteRef = (0, import_react9.useRef)(onNodesDelete);
     onNodesDeleteRef.current = onNodesDelete;
-    const onEdgeAddRef = (0, import_react8.useRef)(onEdgeAdd);
+    const onEdgeAddRef = (0, import_react9.useRef)(onEdgeAdd);
     onEdgeAddRef.current = onEdgeAdd;
-    const onEdgeUpdateRef = (0, import_react8.useRef)(onEdgeUpdate);
+    const onEdgeUpdateRef = (0, import_react9.useRef)(onEdgeUpdate);
     onEdgeUpdateRef.current = onEdgeUpdate;
-    const onEdgeDeleteRef = (0, import_react8.useRef)(onEdgeDelete);
+    const onEdgeDeleteRef = (0, import_react9.useRef)(onEdgeDelete);
     onEdgeDeleteRef.current = onEdgeDelete;
-    const undoStack = (0, import_react8.useRef)([]);
-    const redoStack = (0, import_react8.useRef)([]);
-    const isUndoingRef = (0, import_react8.useRef)(false);
-    const pendingBatchRef = (0, import_react8.useRef)(null);
-    const [canUndo, setCanUndo] = (0, import_react8.useState)(false);
-    const [canRedo, setCanRedo] = (0, import_react8.useState)(false);
+    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);
@@ -15568,7 +15809,7 @@ var SystemCanvas = (() => {
           break;
       }
     }
-    const undo = (0, import_react8.useCallback)(() => {
+    const undo = (0, import_react9.useCallback)(() => {
       if (!enabled)
         return;
       const cmd = undoStack.current.pop();
@@ -15581,7 +15822,7 @@ var SystemCanvas = (() => {
       syncBooleans();
       onUndo?.(getCanvasRef(cmd));
     }, [enabled, onUndo]);
-    const redo = (0, import_react8.useCallback)(() => {
+    const redo = (0, import_react9.useCallback)(() => {
       if (!enabled)
         return;
       const cmd = redoStack.current.pop();
@@ -15596,12 +15837,12 @@ var SystemCanvas = (() => {
       syncBooleans();
       onRedo?.(getCanvasRef(cmd));
     }, [enabled, onRedo, maxDepth]);
-    const beginBatch = (0, import_react8.useCallback)(() => {
+    const beginBatch = (0, import_react9.useCallback)(() => {
       if (!enabled)
         return;
       pendingBatchRef.current = [];
     }, [enabled]);
-    const endBatch = (0, import_react8.useCallback)(() => {
+    const endBatch = (0, import_react9.useCallback)(() => {
       if (!enabled)
         return;
       const cmds = pendingBatchRef.current;
@@ -15618,7 +15859,7 @@ var SystemCanvas = (() => {
       redoStack.current = [];
       syncBooleans();
     }, [enabled, maxDepth]);
-    const wrappedOnNodeAdd = (0, import_react8.useCallback)(
+    const wrappedOnNodeAdd = (0, import_react9.useCallback)(
       (node, canvasRef) => {
         if (enabled && !isUndoingRef.current) {
           pushCommand({ type: "node:add", node, canvasRef });
@@ -15628,7 +15869,7 @@ var SystemCanvas = (() => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [enabled]
     );
-    const wrappedOnNodeUpdate = (0, import_react8.useCallback)(
+    const wrappedOnNodeUpdate = (0, import_react9.useCallback)(
       (id2, patch, canvasRef) => {
         if (enabled && !isUndoingRef.current) {
           const node = nodesRef.current?.find((n) => n.id === id2);
@@ -15642,7 +15883,7 @@ var SystemCanvas = (() => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [enabled, nodesRef]
     );
-    const wrappedOnNodesUpdate = (0, import_react8.useCallback)(
+    const wrappedOnNodesUpdate = (0, import_react9.useCallback)(
       (updates, canvasRef) => {
         if (enabled && !isUndoingRef.current) {
           const enriched = [];
@@ -15662,7 +15903,7 @@ var SystemCanvas = (() => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [enabled, nodesRef]
     );
-    const wrappedOnNodeDelete = (0, import_react8.useCallback)(
+    const wrappedOnNodeDelete = (0, import_react9.useCallback)(
       (nodeId, canvasRef) => {
         if (enabled && !isUndoingRef.current) {
           const node = nodesRef.current?.find((n) => n.id === nodeId);
@@ -15675,7 +15916,7 @@ var SystemCanvas = (() => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [enabled, nodesRef]
     );
-    const wrappedOnNodesDelete = (0, import_react8.useCallback)(
+    const wrappedOnNodesDelete = (0, import_react9.useCallback)(
       (nodeIds, canvasRef) => {
         if (enabled && !isUndoingRef.current) {
           const nodes = nodesRef.current?.filter((n) => nodeIds.includes(n.id)) ?? [];
@@ -15688,7 +15929,7 @@ var SystemCanvas = (() => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [enabled, nodesRef]
     );
-    const wrappedOnEdgeAdd = (0, import_react8.useCallback)(
+    const wrappedOnEdgeAdd = (0, import_react9.useCallback)(
       (edge, canvasRef) => {
         if (enabled && !isUndoingRef.current) {
           pushCommand({ type: "edge:add", edge, canvasRef });
@@ -15698,7 +15939,7 @@ var SystemCanvas = (() => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [enabled]
     );
-    const wrappedOnEdgeUpdate = (0, import_react8.useCallback)(
+    const wrappedOnEdgeUpdate = (0, import_react9.useCallback)(
       (id2, patch, canvasRef) => {
         if (enabled && !isUndoingRef.current) {
           const edge = edgesRef.current?.find((e) => e.id === id2);
@@ -15712,7 +15953,7 @@ var SystemCanvas = (() => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [enabled, edgesRef]
     );
-    const wrappedOnEdgeDelete = (0, import_react8.useCallback)(
+    const wrappedOnEdgeDelete = (0, import_react9.useCallback)(
       (edgeId, canvasRef) => {
         if (enabled && !isUndoingRef.current) {
           const edge = edgesRef.current?.find((e) => e.id === edgeId);
@@ -15744,7 +15985,7 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/hooks/useZoomNavigation.js
-  var import_react9 = __toESM(require_react(), 1);
+  var import_react10 = __toESM(require_react(), 1);
   function expandRect(rect, factor) {
     if (factor === 1)
       return rect;
@@ -15782,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_react9.useRef)(false);
-    (0, import_react9.useEffect)(() => {
+    const committingRef = (0, import_react10.useRef)(false);
+    (0, import_react10.useEffect)(() => {
       committingRef.current = false;
     }, [currentCanvas]);
-    const exitArmedRef = (0, import_react9.useRef)(false);
-    (0, import_react9.useEffect)(() => {
+    const exitArmedRef = (0, import_react10.useRef)(false);
+    (0, import_react10.useEffect)(() => {
       exitArmedRef.current = false;
     }, [currentCanvas, parentFrame]);
-    const prefetchRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
-    const prefetch = (0, import_react9.useCallback)((ref) => {
+    const prefetchRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
+    const prefetch = (0, import_react10.useCallback)((ref) => {
       if (!onResolveCanvas)
         return;
       if (canvases?.[ref])
@@ -15809,7 +16050,7 @@ var SystemCanvas = (() => {
         state.loading = false;
       });
     }, [canvases, onResolveCanvas, onSeedCanvas]);
-    const handleViewportChange = (0, import_react9.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react10.useCallback)((vp) => {
       if (!enabled)
         return;
       if (committingRef.current)
@@ -15948,7 +16189,7 @@ var SystemCanvas = (() => {
       onEnter,
       onExit
     ]);
-    const clearCommitting = (0, import_react9.useCallback)(() => {
+    const clearCommitting = (0, import_react10.useCallback)(() => {
       committingRef.current = false;
     }, []);
     return { handleViewportChange, clearCommitting };
@@ -15956,10 +16197,10 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/Viewport.js
   var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
-  var import_react18 = __toESM(require_react(), 1);
+  var import_react19 = __toESM(require_react(), 1);
 
   // ../react/dist/hooks/useViewport.js
-  var import_react10 = __toESM(require_react(), 1);
+  var import_react11 = __toESM(require_react(), 1);
 
   // ../../node_modules/d3-dispatch/src/dispatch.js
   var noop = { value: () => {
@@ -18702,13 +18943,13 @@ var SystemCanvas = (() => {
   // ../react/dist/hooks/useViewport.js
   function useViewport(options) {
     const { minZoom, maxZoom, defaultViewport, onViewportChange, marqueeActiveRef } = options;
-    const svgRef = (0, import_react10.useRef)(null);
-    const groupRef = (0, import_react10.useRef)(null);
-    const viewport = (0, import_react10.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
-    const zoomBehaviorRef = (0, import_react10.useRef)(null);
-    const onViewportChangeRef = (0, import_react10.useRef)(onViewportChange);
+    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_react10.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       const svg = svgRef.current;
       const group = groupRef.current;
       if (!svg || !group)
@@ -18748,7 +18989,7 @@ var SystemCanvas = (() => {
         selection2.on(".zoom", null);
       };
     }, [minZoom, maxZoom]);
-    const fitToContent = (0, import_react10.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;
@@ -18761,13 +19002,13 @@ var SystemCanvas = (() => {
         select_default2(svg).call(zoomBehaviorRef.current.transform, t);
       }
     }, []);
-    const resetZoom = (0, import_react10.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_react10.useCallback)((transform2, options2) => {
+    const setTransform = (0, import_react11.useCallback)((transform2, options2) => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current)
         return;
@@ -18779,7 +19020,7 @@ var SystemCanvas = (() => {
         sel.call(zoomBehaviorRef.current.transform, t);
       }
     }, []);
-    const zoomToNode = (0, import_react10.useCallback)((node, onComplete, options2) => {
+    const zoomToNode = (0, import_react11.useCallback)((node, onComplete, options2) => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current) {
         onComplete?.();
@@ -18973,9 +19214,9 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/RefIndicator.js
   var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
-  var import_react11 = __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_react11.useState)(false);
+    const [hover, setHover] = (0, import_react12.useState)(false);
     const iconKind = theme.node.refIndicator.icon;
     if (iconKind === "none")
       return null;
@@ -19046,7 +19287,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/CategorySlotsLayer.js
   var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
-  var import_react13 = __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);
@@ -19166,9 +19407,9 @@ var SystemCanvas = (() => {
 
   // ../react/dist/primitives/NodeText.js
   var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
-  var import_react12 = __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_react12.useId)();
+    const reactId = (0, import_react13.useId)();
     const safeId = reactId.replace(/:/g, "");
     if (!value)
       return null;
@@ -19242,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_react13.useMemo)(() => computeCategorySlotRegions(node, theme, slots), [node, theme, slots]);
-    const reactId = (0, import_react13.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;
@@ -19476,7 +19717,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/ResizeHandles.js
   var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
-  var import_react14 = __toESM(require_react(), 1);
+  var import_react15 = __toESM(require_react(), 1);
   var HANDLE_SIZE = 7;
   var CORNERS = [
     { corner: "nw", cursor: "nwse-resize", anchor: "nw" },
@@ -19487,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_react14.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) => {
@@ -19598,7 +19839,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/NodeEditor.js
   var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
-  var import_react15 = __toESM(require_react(), 1);
+  var import_react16 = __toESM(require_react(), 1);
   function NodeEditor({ node, theme, onCommit, onCancel }) {
     const editableFields = useCategoryFields(node, theme);
     if (editableFields) {
@@ -19617,11 +19858,11 @@ var SystemCanvas = (() => {
   }
   function SingleFieldEditor({ node, theme, onCommit, onCancel }) {
     const initial = getInitialValue(node);
-    const [value, setValue] = (0, import_react15.useState)(initial);
-    const textareaRef = (0, import_react15.useRef)(null);
-    const inputRef = (0, import_react15.useRef)(null);
-    const committedRef = (0, import_react15.useRef)(false);
-    (0, import_react15.useEffect)(() => {
+    const [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();
@@ -19717,10 +19958,10 @@ var SystemCanvas = (() => {
     }
   }
   function FormEditor({ node, theme, fields, onCommit, onCancel }) {
-    const initial = (0, import_react15.useMemo)(() => readInitialValues(node, fields), [node, fields]);
-    const [values, setValues] = (0, import_react15.useState)(initial);
-    const committedRef = (0, import_react15.useRef)(false);
-    const panelRef = (0, import_react15.useRef)(null);
+    const 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 = () => {
@@ -19749,7 +19990,7 @@ var SystemCanvas = (() => {
     const stopPointer = (e) => {
       e.stopPropagation();
     };
-    (0, import_react15.useEffect)(() => {
+    (0, import_react16.useEffect)(() => {
       const el = panelRef.current;
       if (!el)
         return;
@@ -19879,13 +20120,13 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/EdgeLabelEditor.js
   var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
-  var import_react16 = __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_react16.useState)(initialLabel);
-    const inputRef = (0, import_react16.useRef)(null);
-    const committedRef = (0, import_react16.useRef)(false);
-    (0, import_react16.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();
@@ -19940,7 +20181,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/ConnectionHandles.js
   var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
-  var import_react17 = __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;
@@ -19949,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_react17.useState)(!!immediate);
-    const [hoveredSide, setHoveredSide] = (0, import_react17.useState)(null);
-    (0, import_react17.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;
@@ -20038,7 +20279,7 @@ var SystemCanvas = (() => {
   // ../react/dist/components/Viewport.js
   var HOVER_PADDING = 10;
   var EDGE_PROXIMITY = 16;
-  var Viewport = (0, import_react18.forwardRef)(function Viewport2({ nodes, edges, nodeMap, theme, edgeStyle, columns, rows, canvases, minZoom, maxZoom, defaultViewport, onViewportChange, onNodeClick, onNodeDoubleClick, onNodeNavigate, onEdgeClick, onEdgeDoubleClick, onCanvasClick, onCanvasContextMenu, onNodeContextMenu, onEdgeContextMenu, onNodePointerDown, selectedIds, editingId, selectedEdgeId, editingEdgeId, dragOverrides, dropTargetId, marqueeRect, marqueeActiveRef, resizeOverrides, onResizeHandlePointerDown, onEditorCommit, onEditorCancel, onEdgeEditorCommit, onEdgeEditorCancel, pendingEdge, onConnectionHandlePointerDown, edgeCreateEnabled, autoFit = "canvas-change", canvasRef, handoffTransform, onHandoffApplied, handoffFadeMs = 0 }, ref) {
+  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,
@@ -20046,10 +20287,10 @@ var SystemCanvas = (() => {
       onViewportChange,
       marqueeActiveRef
     });
-    const navigatingRef = (0, import_react18.useRef)(false);
-    const fadeRafRef = (0, import_react18.useRef)(null);
-    const fadeTimeoutRef = (0, import_react18.useRef)(null);
-    const triggerFade = (0, import_react18.useCallback)((durationMs) => {
+    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;
@@ -20072,7 +20313,7 @@ var SystemCanvas = (() => {
         }, durationMs + 16);
       });
     }, []);
-    (0, import_react18.useEffect)(() => {
+    (0, import_react19.useEffect)(() => {
       return () => {
         if (fadeRafRef.current !== null)
           cancelAnimationFrame(fadeRafRef.current);
@@ -20080,10 +20321,10 @@ var SystemCanvas = (() => {
           clearTimeout(fadeTimeoutRef.current);
       };
     }, []);
-    const [hoveredNodeId, setHoveredNodeId] = (0, import_react18.useState)(null);
-    const [hoveredSide, setHoveredSide] = (0, import_react18.useState)(null);
-    const cursorPosRef = (0, import_react18.useRef)(null);
-    (0, import_react18.useImperativeHandle)(ref, () => ({
+    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);
@@ -20094,7 +20335,7 @@ var SystemCanvas = (() => {
       getViewport: () => viewport.current ?? { x: 0, y: 0, zoom: 1 },
       getCursorScreenPos: () => cursorPosRef.current
     }));
-    const renderNodes = (0, import_react18.useMemo)(() => {
+    const renderNodes = (0, import_react19.useMemo)(() => {
       const hasDrag = dragOverrides && dragOverrides.size > 0;
       const hasResize = resizeOverrides && resizeOverrides.size > 0;
       if (!hasDrag && !hasResize)
@@ -20107,7 +20348,7 @@ var SystemCanvas = (() => {
         return d ? { ...n, x: d.x, y: d.y } : n;
       });
     }, [nodes, dragOverrides, resizeOverrides]);
-    const renderNodeMap = (0, import_react18.useMemo)(() => {
+    const renderNodeMap = (0, import_react19.useMemo)(() => {
       const hasDrag = dragOverrides && dragOverrides.size > 0;
       const hasResize = resizeOverrides && resizeOverrides.size > 0;
       if (!hasDrag && !hasResize)
@@ -20118,11 +20359,11 @@ var SystemCanvas = (() => {
       }
       return m;
     }, [renderNodes, nodeMap, dragOverrides, resizeOverrides]);
-    const latestNodesRef = (0, import_react18.useRef)(nodes);
-    (0, import_react18.useEffect)(() => {
+    const latestNodesRef = (0, import_react19.useRef)(nodes);
+    (0, import_react19.useEffect)(() => {
       latestNodesRef.current = nodes;
     }, [nodes]);
-    const fitNow = (0, import_react18.useCallback)(() => {
+    const fitNow = (0, import_react19.useCallback)(() => {
       const current = latestNodesRef.current;
       if (current.length === 0)
         return;
@@ -20132,7 +20373,7 @@ var SystemCanvas = (() => {
         fitToContent(current, animate);
       });
     }, [fitToContent]);
-    (0, import_react18.useEffect)(() => {
+    (0, import_react19.useEffect)(() => {
       if (defaultViewport)
         return;
       if (autoFit !== "always")
@@ -20141,8 +20382,8 @@ var SystemCanvas = (() => {
         return;
       fitNow();
     }, [nodes, autoFit, defaultViewport, fitNow]);
-    const fittedForRef = (0, import_react18.useRef)(null);
-    (0, import_react18.useEffect)(() => {
+    const fittedForRef = (0, import_react19.useRef)(null);
+    (0, import_react19.useEffect)(() => {
       if (defaultViewport)
         return;
       if (autoFit !== "canvas-change" && autoFit !== "initial")
@@ -20174,7 +20415,7 @@ var SystemCanvas = (() => {
       triggerFade
     ]);
     const editingNode = editingId ? renderNodes.find((n) => n.id === editingId) ?? null : null;
-    const handleSvgPointerMove = (0, import_react18.useCallback)((event) => {
+    const handleSvgPointerMove = (0, import_react19.useCallback)((event) => {
       const svg = svgRef.current;
       if (!svg)
         return;
@@ -20226,7 +20467,7 @@ var SystemCanvas = (() => {
         setHoveredSide((prev) => prev === null ? prev : null);
       }
     }, [edgeCreateEnabled, renderNodes, svgRef, viewport]);
-    const handleSvgPointerLeave = (0, import_react18.useCallback)(() => {
+    const handleSvgPointerLeave = (0, import_react19.useCallback)(() => {
       setHoveredNodeId(null);
       setHoveredSide(null);
       cursorPosRef.current = null;
@@ -20265,7 +20506,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/Breadcrumbs.js
   var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
-  var import_react19 = __toESM(require_react(), 1);
+  var import_react20 = __toESM(require_react(), 1);
   function Breadcrumbs({ breadcrumbs, theme, onNavigate }) {
     if (breadcrumbs.length <= 1)
       return null;
@@ -20286,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_react19.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: {
@@ -20310,11 +20551,11 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/AddNodeButton.js
   var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
-  var import_react20 = __toESM(require_react(), 1);
+  var import_react21 = __toESM(require_react(), 1);
   function AddNodeButton({ options, addNode: addNode2, theme }) {
-    const [open, setOpen] = (0, import_react20.useState)(false);
-    const rootRef = (0, import_react20.useRef)(null);
-    (0, import_react20.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) {
@@ -20403,7 +20644,7 @@ var SystemCanvas = (() => {
     } });
   }
   function MenuRow({ theme, option, onClick }) {
-    const [hover, setHover] = (0, import_react20.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",
@@ -20439,12 +20680,12 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/LaneHeaders.js
   var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
-  var import_react21 = __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_react21.useState)(() => getViewport());
-    (0, import_react21.useEffect)(() => {
+    const [viewport, setViewport] = (0, import_react22.useState)(() => getViewport());
+    (0, import_react22.useEffect)(() => {
       if (!hasColumns && !hasRows)
         return;
       let raf = 0;
@@ -20518,7 +20759,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/NodeToolbar.js
   var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
-  var import_react22 = __toESM(require_react(), 1);
+  var import_react23 = __toESM(require_react(), 1);
   var NODE_GAP = 10;
   var FLIP_MARGIN = 8;
   var PADDING = 6;
@@ -20527,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_react22.useState)(() => getViewport());
-    (0, import_react22.useEffect)(() => {
+    const [viewport, setViewport] = (0, import_react23.useState)(() => getViewport());
+    (0, import_react23.useEffect)(() => {
       let raf = 0;
       let lastX = -Infinity;
       let lastY = -Infinity;
@@ -20548,7 +20789,7 @@ var SystemCanvas = (() => {
     }, [getViewport]);
     const isMulti = selectedNodes != null && selectedNodes.length > 1;
     const align = theme.toolbarAlign ?? "center";
-    const { anchorTopY, anchorBottomY, anchorX } = (0, import_react22.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));
@@ -20565,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_react22.useRef)(null);
-    const [size, setSize] = (0, import_react22.useState)({ width: 0, height: 0 });
-    (0, import_react22.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;
@@ -20627,7 +20868,7 @@ var SystemCanvas = (() => {
   }
   function MultiToolbarContent({ selectedNodes, theme, onMultiPatch, onDelete }) {
     const representativeNode = selectedNodes[0];
-    const groups = (0, import_react22.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");
@@ -20641,7 +20882,7 @@ var SystemCanvas = (() => {
       const actions = filterActionsForNode(group, representativeNode);
       if (actions.length === 0)
         return null;
-      return (0, import_jsx_runtime26.jsxs)(import_react22.default.Fragment, { children: [i > 0 && (0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
+      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);
@@ -20653,7 +20894,7 @@ var SystemCanvas = (() => {
       const actions = filterActionsForNode(group, representativeNode);
       if (actions.length === 0)
         return null;
-      return (0, import_jsx_runtime26.jsxs)(import_react22.default.Fragment, { children: [(0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)("div", { style: { display: "flex", alignItems: "center", gap: BUTTON_GAP }, children: actions.map((action) => {
+      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);
@@ -20664,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_react22.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_react22.default.Fragment, { children: [i > 0 && (0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)(ActionGroupView, { group, node, theme, onPatch })] }, group.id)), showDelete && (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [(0, import_jsx_runtime26.jsx)(Divider2, { theme }), (0, import_jsx_runtime26.jsx)(DeleteButton, { theme, onDelete })] })] });
+    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: {
@@ -20733,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_react22.useState)(false);
-    const wrapRef = (0, import_react22.useRef)(null);
-    (0, import_react22.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) => {
@@ -20822,18 +21063,18 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/NodeContextMenuOverlay.js
   var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
-  var import_react23 = __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_react23.useRef)(null);
-    const [hoveredId, setHoveredId] = (0, import_react23.useState)(null);
-    (0, import_react23.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_react23.useEffect)(() => {
+    (0, import_react24.useEffect)(() => {
       if (!state)
         return;
       function onDown(e) {
@@ -20941,8 +21182,8 @@ var SystemCanvas = (() => {
   // ../react/dist/components/SystemCanvas.js
   var CASCADE_WINDOW_MS = 1500;
   var CASCADE_OFFSET = 20;
-  var SystemCanvas = (0, import_react24.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, onEdgeUpdate, onEdgeDelete, onEdgeAdd, canDropNodeOn, onNodeDrop, renderAddNodeButton, showNodeToolbar = true, renderNodeToolbar, theme: themeProp, themes: customThemes, edgeStyle = "bezier", defaultViewport, minZoom: minZoomProp, maxZoom, onViewportChange, autoFit = "canvas-change", laneHeaders = "pinned", snapToLanes = false, zoomNavigation = false, historyDepth, onUndo, onRedo, className, style }, forwardedRef) {
-    const zoomNavConfig = (0, import_react24.useMemo)(() => {
+  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,
@@ -20967,16 +21208,16 @@ var SystemCanvas = (() => {
     }, [zoomNavigation]);
     const effectiveMaxZoom = maxZoom ?? (zoomNavConfig.enabled ? 16 : 4);
     const effectiveMinZoom = minZoomProp ?? (zoomNavConfig.enabled ? 0.01 : 0.1);
-    (0, import_react24.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_react24.useState)([]);
-    const [pendingHandoff, setPendingHandoff] = (0, import_react24.useState)(null);
-    const suppressNextHandoffClearRef = (0, import_react24.useRef)(false);
-    const handleBreadcrumbClick = (0, import_react24.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;
@@ -20993,10 +21234,10 @@ var SystemCanvas = (() => {
       onNavigate,
       onBreadcrumbClick: handleBreadcrumbClick
     });
-    (0, import_react24.useEffect)(() => {
+    (0, import_react25.useEffect)(() => {
       onBreadcrumbsChange?.(breadcrumbs);
     }, [breadcrumbs, onBreadcrumbsChange]);
-    const theme = (0, import_react24.useMemo)(() => {
+    const theme = (0, import_react25.useMemo)(() => {
       const registry = { ...themes, ...customThemes };
       const resolveByName = (name) => name && registry[name] ? registry[name] : null;
       if (themeProp) {
@@ -21007,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_react24.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_react24.useRef)(nodes);
+    const nodesRef = (0, import_react25.useRef)(nodes);
     nodesRef.current = nodes;
-    const viewportStateRef = (0, import_react24.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
-    const viewportHandleRef = (0, import_react24.useRef)(null);
-    const navigateToRefRef = (0, import_react24.useRef)(navigateToRef);
+    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_react24.useRef)(navigateToBreadcrumb);
+    const navigateToBreadcrumbRef = (0, import_react25.useRef)(navigateToBreadcrumb);
     navigateToBreadcrumbRef.current = navigateToBreadcrumb;
-    const breadcrumbsRef = (0, import_react24.useRef)(breadcrumbs);
+    const breadcrumbsRef = (0, import_react25.useRef)(breadcrumbs);
     breadcrumbsRef.current = breadcrumbs;
-    (0, import_react24.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react25.useImperativeHandle)(forwardedRef, () => ({
       zoomIntoNode: (nodeId, options) => {
         return new Promise((resolve) => {
           const node = nodesRef.current.find((n) => n.id === nodeId);
@@ -21054,24 +21295,24 @@ var SystemCanvas = (() => {
         navigateToBreadcrumbRef.current(0);
       }
     }), [forwardedRef]);
-    const [editingId, setEditingId] = (0, import_react24.useState)(null);
-    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react24.useState)(null);
-    const [editingEdgeId, setEditingEdgeId] = (0, import_react24.useState)(null);
-    const svgProxyRef = (0, import_react24.useRef)(null);
-    const containerRef = (0, import_react24.useRef)(null);
-    const { selectedIds, selectNode, toggleNode, selectAll, clearSelection, marqueeRect, marqueeActiveRef } = useMultiSelect({
+    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_react24.useRef)(selectedIds);
-    (0, import_react24.useEffect)(() => {
+    const selectedIdsRef = (0, import_react25.useRef)(selectedIds);
+    (0, import_react25.useEffect)(() => {
       selectedIdsRef.current = selectedIds;
     }, [selectedIds]);
-    const edgesRef = (0, import_react24.useRef)(edges);
-    (0, import_react24.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({
@@ -21103,18 +21344,18 @@ var SystemCanvas = (() => {
       onBeginBatch: beginBatch,
       onEndBatch: endBatch
     });
-    (0, import_react24.useEffect)(() => {
+    (0, import_react25.useEffect)(() => {
       clearSelection();
       setEditingId(null);
       setSelectedEdgeId(null);
       setEditingEdgeId(null);
     }, [currentCanvasRef]);
-    const onSelectionChangeRef = (0, import_react24.useRef)(onSelectionChange);
-    (0, import_react24.useEffect)(() => {
+    const onSelectionChangeRef = (0, import_react25.useRef)(onSelectionChange);
+    (0, import_react25.useEffect)(() => {
       onSelectionChangeRef.current = onSelectionChange;
     }, [onSelectionChange]);
-    const lastEmittedSelectionRef = (0, import_react24.useRef)({ kind: null, id: null, multiIds: null, canvasRef: void 0 });
-    (0, import_react24.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) {
@@ -21156,8 +21397,8 @@ var SystemCanvas = (() => {
       }
       cb?.(next);
     }, [selectedIds, selectedEdgeId, currentCanvasRef, nodeMap, edges]);
-    const [containerSize, setContainerSize] = (0, import_react24.useState)({ width: 0, height: 0 });
-    (0, import_react24.useEffect)(() => {
+    const [containerSize, setContainerSize] = (0, import_react25.useState)({ width: 0, height: 0 });
+    (0, import_react25.useEffect)(() => {
       const el = containerRef.current;
       if (!el)
         return;
@@ -21172,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_react24.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
-    const applyLaneSnap = (0, import_react24.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;
@@ -21198,10 +21439,10 @@ var SystemCanvas = (() => {
       }
       return final;
     }, [snapToLanes, currentCanvas.columns, currentCanvas.rows]);
-    const commitResize = (0, import_react24.useCallback)((id2, patch) => {
+    const commitResize = (0, import_react25.useCallback)((id2, patch) => {
       wrappedOnNodeUpdate(id2, applyLaneSnap(id2, patch), currentCanvasRef);
     }, [wrappedOnNodeUpdate, currentCanvasRef, applyLaneSnap]);
-    const commitDragBatch = (0, import_react24.useCallback)((updates) => {
+    const commitDragBatch = (0, import_react25.useCallback)((updates) => {
       const final = updates.map((u) => ({
         id: u.id,
         patch: applyLaneSnap(u.id, u.patch)
@@ -21216,10 +21457,10 @@ var SystemCanvas = (() => {
         wrappedOnNodeUpdate(id2, patch, currentCanvasRef);
       }
     }, [wrappedOnNodeUpdate, wrappedOnNodesUpdate, onNodeUpdate, onNodesUpdate, currentCanvasRef, applyLaneSnap]);
-    const handleNodeDrop = (0, import_react24.useCallback)((sources, target) => {
+    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,
@@ -21233,7 +21474,7 @@ var SystemCanvas = (() => {
       onCommit: commitResize
     });
     const singleSelectedId = selectedIds.size === 1 ? Array.from(selectedIds)[0] : null;
-    const selectedResolvedNode = (0, import_react24.useMemo)(() => {
+    const selectedResolvedNode = (0, import_react25.useMemo)(() => {
       if (!singleSelectedId)
         return null;
       const base = nodeMap.get(singleSelectedId);
@@ -21250,7 +21491,7 @@ var SystemCanvas = (() => {
       return base;
     }, [singleSelectedId, nodeMap, dragOverrides, resizeOverrides]);
     svgProxyRef.current = viewportHandleRef.current?.getSvgElement() ?? null;
-    const handleEdgeCreated = (0, import_react24.useCallback)((edge) => {
+    const handleEdgeCreated = (0, import_react25.useCallback)((edge) => {
       wrappedOnEdgeAdd(edge, currentCanvasRef);
     }, [wrappedOnEdgeAdd, currentCanvasRef]);
     const { pending: pendingEdge, onHandlePointerDown: onConnectionHandlePointerDown } = useEdgeCreate({
@@ -21259,7 +21500,7 @@ var SystemCanvas = (() => {
       nodesRef,
       onCreate: handleEdgeCreated
     });
-    const handleNavigableNodeClick = (0, import_react24.useCallback)((node) => {
+    const handleNavigableNodeClick = (0, import_react25.useCallback)((node) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -21286,7 +21527,7 @@ var SystemCanvas = (() => {
         navigateToRef(node);
       }
     }, [navigateToRef, currentCanvasRef, zoomNavConfig.enabled]);
-    const handleZoomEnter = (0, import_react24.useCallback)((node, targetTransform) => {
+    const handleZoomEnter = (0, import_react25.useCallback)((node, targetTransform) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -21300,7 +21541,7 @@ var SystemCanvas = (() => {
       setPendingHandoff(targetTransform);
       navigateToRef(node);
     }, [currentCanvasRef, navigateToRef]);
-    const handleZoomExit = (0, import_react24.useCallback)((targetTransform) => {
+    const handleZoomExit = (0, import_react25.useCallback)((targetTransform) => {
       setPendingHandoff(targetTransform);
       suppressNextHandoffClearRef.current = true;
       navigateToBreadcrumb(breadcrumbs.length - 2);
@@ -21327,26 +21568,26 @@ var SystemCanvas = (() => {
       onEnter: handleZoomEnter,
       onExit: handleZoomExit
     });
-    const handleViewportChange = (0, import_react24.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react25.useCallback)((vp) => {
       viewportStateRef.current = vp;
       handleZoomNavViewportChange(vp);
       onViewportChange?.(vp);
     }, [handleZoomNavViewportChange, onViewportChange]);
-    const handleHandoffApplied = (0, import_react24.useCallback)(() => {
+    const handleHandoffApplied = (0, import_react25.useCallback)(() => {
       setPendingHandoff(null);
       clearZoomNavCommitting();
     }, [clearZoomNavCommitting]);
-    const handleBeginEdit = (0, import_react24.useCallback)((node) => {
+    const handleBeginEdit = (0, import_react25.useCallback)((node) => {
       setEditingId(node.id);
     }, []);
-    const handleBeginEditEdge = (0, import_react24.useCallback)((edge) => {
+    const handleBeginEditEdge = (0, import_react25.useCallback)((edge) => {
       setEditingEdgeId(edge.id);
     }, []);
-    const [contextMenuState, setContextMenuState] = (0, import_react24.useState)(null);
-    (0, import_react24.useEffect)(() => {
+    const [contextMenuState, setContextMenuState] = (0, import_react25.useState)(null);
+    (0, import_react25.useEffect)(() => {
       setContextMenuState(null);
     }, [currentCanvasRef]);
-    const handleContextMenu = (0, import_react24.useCallback)((event) => {
+    const handleContextMenu = (0, import_react25.useCallback)((event) => {
       onContextMenu?.(event);
       if (!nodeContextMenu)
         return;
@@ -21389,27 +21630,27 @@ var SystemCanvas = (() => {
       onSelectEdge: setSelectedEdgeId,
       onBeginEditEdge: handleBeginEditEdge
     });
-    const handleEditorCommit = (0, import_react24.useCallback)((patch) => {
+    const handleEditorCommit = (0, import_react25.useCallback)((patch) => {
       if (editingId) {
         wrappedOnNodeUpdate(editingId, patch, currentCanvasRef);
       }
       setEditingId(null);
     }, [editingId, wrappedOnNodeUpdate, currentCanvasRef]);
-    const handleEditorCancel = (0, import_react24.useCallback)(() => {
+    const handleEditorCancel = (0, import_react25.useCallback)(() => {
       setEditingId(null);
     }, []);
-    const handleEdgeEditorCommit = (0, import_react24.useCallback)((patch) => {
+    const handleEdgeEditorCommit = (0, import_react25.useCallback)((patch) => {
       if (editingEdgeId) {
         wrappedOnEdgeUpdate(editingEdgeId, patch, currentCanvasRef);
       }
       setEditingEdgeId(null);
     }, [editingEdgeId, wrappedOnEdgeUpdate, currentCanvasRef]);
-    const handleEdgeEditorCancel = (0, import_react24.useCallback)(() => {
+    const handleEdgeEditorCancel = (0, import_react25.useCallback)(() => {
       setEditingEdgeId(null);
     }, []);
-    const lastAddRef = (0, import_react24.useRef)(null);
-    const menuOptions = (0, import_react24.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
-    const addNode2 = (0, import_react24.useCallback)((option, position) => {
+    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;
@@ -21441,64 +21682,40 @@ var SystemCanvas = (() => {
       const node = createNodeFromOption(option, Math.round(x), Math.round(y), void 0, theme);
       wrappedOnNodeAdd(node, currentCanvasRef);
     }, [wrappedOnNodeAdd, currentCanvasRef, theme]);
-    const handleKeyDown = (0, import_react24.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.shiftKey && e.key === "z") {
-        e.preventDefault();
-        undo();
-        return;
-      }
-      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "z") {
-        e.preventDefault();
-        redo();
-        return;
-      }
-      if ((e.metaKey || e.ctrlKey) && e.key === "a") {
-        e.preventDefault();
-        selectAll();
-        return;
-      }
-      if (e.key === "Delete" || e.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);
-        }
-      }
-    }, [
+    const handleKeyDown = useKeyboardShortcuts({
       editable,
       editingId,
       editingEdgeId,
       selectedIds,
       selectedEdgeId,
+      nodesRef,
+      edgesRef,
+      theme,
+      currentCanvasRef,
+      contextMenuState,
+      setContextMenuState,
+      wrappedOnNodeAdd,
+      wrappedOnEdgeAdd,
+      wrappedOnNodeUpdate,
+      wrappedOnNodesUpdate,
       wrappedOnNodeDelete,
       wrappedOnNodesDelete,
       wrappedOnEdgeDelete,
-      currentCanvasRef,
-      clearSelection,
-      selectAll,
+      onNodesUpdate,
+      onNodeUpdate,
+      beginBatch,
+      endBatch,
       undo,
-      redo
-    ]);
+      redo,
+      selectNode,
+      selectMultiple,
+      selectAll,
+      clearSelection,
+      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",
@@ -21649,7 +21866,7 @@ var SystemCanvas = (() => {
         onEdgeUpdate: handleEdgeUpdate,
         onEdgeDelete: handleEdgeDelete
       };
-      root2.render(import_react25.default.createElement(SystemCanvas, props));
+      root2.render(import_react26.default.createElement(SystemCanvas, props));
     };
     doRender();
     return {