system-canvas-standalone 0.2.1 → 0.2.3

package/dist/system-canvas.js

@@ -12759,12 +12759,12 @@ var SystemCanvas = (() => {
     render: () => render,
     themes: () => themes
   });
-  var import_react22 = __toESM(require_react(), 1);
+  var import_react24 = __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_react21 = __toESM(require_react(), 1);
+  var import_react23 = __toESM(require_react(), 1);
 
   // ../core/dist/themes/dark.js
   var darkTheme = {
@@ -14649,15 +14649,19 @@ var SystemCanvas = (() => {
   // ../react/dist/hooks/useCanvasInteraction.js
   var import_react2 = __toESM(require_react(), 1);
   function useCanvasInteraction(options) {
-    const { onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onNavigableNodeClick, viewport, editable, onSelect, onBeginEdit, onSelectEdge, onBeginEditEdge } = options;
+    const { onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onNavigableNodeClick, viewport, editable, onSelect, onToggleSelect, onBeginEdit, onSelectEdge, onBeginEditEdge } = options;
     const handleNodeClick = (0, import_react2.useCallback)((node, event) => {
       event.stopPropagation();
       if (editable) {
-        onSelect?.(node.id);
-        onSelectEdge?.(null);
+        if (event.shiftKey && onToggleSelect) {
+          onToggleSelect(node.id);
+        } else {
+          onSelect?.(node.id);
+          onSelectEdge?.(null);
+        }
       }
       onNodeClick?.(node);
-    }, [editable, onNodeClick, onSelect, onSelectEdge]);
+    }, [editable, onNodeClick, onSelect, onToggleSelect, onSelectEdge]);
     const handleNodeDoubleClick = (0, import_react2.useCallback)((node, event) => {
       event.stopPropagation();
       onNodeDoubleClick?.(node);
@@ -14736,7 +14740,7 @@ var SystemCanvas = (() => {
   var import_react3 = __toESM(require_react(), 1);
   var DRAG_THRESHOLD = 3;
   function useNodeDrag(options) {
-    const { viewport, nodesRef, onCommit, svgRef, canDropNodeOn, onNodeDrop } = 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);
@@ -14748,6 +14752,8 @@ var SystemCanvas = (() => {
     onNodeDropRef.current = onNodeDrop;
     const svgRefRef = (0, import_react3.useRef)(svgRef);
     svgRefRef.current = svgRef;
+    const emptySetRef = (0, import_react3.useRef)(/* @__PURE__ */ new Set());
+    const effectiveSelectedIdsRef = selectedIdsRef ?? emptySetRef;
     const dropTargetIdRef = (0, import_react3.useRef)(null);
     const computeDropTarget = (0, import_react3.useCallback)((clientX, clientY) => {
       const cb = canDropNodeOnRef.current;
@@ -14869,12 +14875,22 @@ var SystemCanvas = (() => {
         return;
       event.stopPropagation();
       const moving = /* @__PURE__ */ new Map();
-      moving.set(node.id, { startX: node.x, startY: node.y });
-      if (node.type === "group" && nodesRef.current) {
-        const children2 = getGroupChildren(node, nodesRef.current);
-        for (const c of children2) {
-          if (!moving.has(c.id)) {
-            moving.set(c.id, { startX: c.x, startY: c.y });
+      const sel = effectiveSelectedIdsRef.current;
+      if (sel && sel.size > 1 && sel.has(node.id) && nodesRef.current) {
+        for (const id2 of sel) {
+          const n = nodesRef.current.find((r) => r.id === id2);
+          if (n) {
+            moving.set(id2, { startX: n.x, startY: n.y });
+          }
+        }
+      } else {
+        moving.set(node.id, { startX: node.x, startY: node.y });
+        if (node.type === "group" && nodesRef.current) {
+          const children2 = getGroupChildren(node, nodesRef.current);
+          for (const c of children2) {
+            if (!moving.has(c.id)) {
+              moving.set(c.id, { startX: c.x, startY: c.y });
+            }
           }
         }
       }
@@ -15134,8 +15150,305 @@ var SystemCanvas = (() => {
     return { pending, onHandlePointerDown };
   }
 
-  // ../react/dist/hooks/useZoomNavigation.js
+  // ../react/dist/hooks/useMultiSelect.js
   var import_react6 = __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);
+    selectedIdsRef.current = selectedIds;
+    const selectNode = (0, import_react6.useCallback)((id2) => {
+      setSelectedIds(/* @__PURE__ */ new Set([id2]));
+    }, []);
+    const toggleNode = (0, import_react6.useCallback)((id2) => {
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        if (next.has(id2)) {
+          next.delete(id2);
+        } else {
+          next.add(id2);
+        }
+        return next;
+      });
+    }, []);
+    const selectAll = (0, import_react6.useCallback)(() => {
+      const nodes = nodesRef.current;
+      if (!nodes)
+        return;
+      setSelectedIds(new Set(nodes.map((n) => n.id)));
+    }, [nodesRef]);
+    const clearSelection = (0, import_react6.useCallback)(() => {
+      setSelectedIds(/* @__PURE__ */ new Set());
+    }, []);
+    (0, import_react6.useEffect)(() => {
+      if (!enabled)
+        return;
+      const container = containerRef.current;
+      if (!container)
+        return;
+      const onKeyDown = (e) => {
+        if (e.code === "Space" && !e.repeat) {
+          const active = document.activeElement;
+          if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable) {
+            return;
+          }
+          e.preventDefault();
+          marqueeActiveRef.current = true;
+        }
+      };
+      const onKeyUp = (e) => {
+        if (e.code === "Space") {
+          marqueeActiveRef.current = false;
+          if (isDrawingRef.current) {
+            isDrawingRef.current = false;
+            startScreenRef.current = null;
+            pointerIdRef.current = null;
+            setMarqueeRect(null);
+          }
+        }
+      };
+      container.addEventListener("keydown", onKeyDown);
+      container.addEventListener("keyup", onKeyUp);
+      return () => {
+        container.removeEventListener("keydown", onKeyDown);
+        container.removeEventListener("keyup", onKeyUp);
+      };
+    }, [enabled, containerRef]);
+    (0, import_react6.useEffect)(() => {
+      if (!enabled)
+        return;
+      const container = containerRef.current;
+      if (!container)
+        return;
+      const onKeyDown = (e) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === "a") {
+          const active = document.activeElement;
+          if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable) {
+            return;
+          }
+          e.preventDefault();
+          selectAll();
+        }
+      };
+      container.addEventListener("keydown", onKeyDown);
+      return () => {
+        container.removeEventListener("keydown", onKeyDown);
+      };
+    }, [enabled, containerRef, selectAll]);
+    (0, import_react6.useEffect)(() => {
+      if (!enabled)
+        return;
+      const container = containerRef.current;
+      if (!container)
+        return;
+      const onPointerDown = (e) => {
+        if (!marqueeActiveRef.current)
+          return;
+        if (e.button !== 0)
+          return;
+        const target = e.target;
+        if (target && typeof target.closest === "function") {
+          if (target.closest(".system-canvas-node"))
+            return;
+        }
+        const svg = svgRef.current;
+        if (!svg)
+          return;
+        const rect = svg.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        startScreenRef.current = { x, y };
+        isDrawingRef.current = true;
+        pointerIdRef.current = e.pointerId;
+        setMarqueeRect({ x1: x, y1: y, x2: x, y2: y });
+        try {
+          container.setPointerCapture(e.pointerId);
+        } catch {
+        }
+        e.preventDefault();
+        e.stopPropagation();
+      };
+      const onPointerMove = (e) => {
+        if (!isDrawingRef.current)
+          return;
+        if (e.pointerId !== pointerIdRef.current)
+          return;
+        const svg = svgRef.current;
+        if (!svg)
+          return;
+        const rect = svg.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const start2 = startScreenRef.current;
+        setMarqueeRect({ x1: start2.x, y1: start2.y, x2: x, y2: y });
+      };
+      const onPointerUp = (e) => {
+        if (!isDrawingRef.current)
+          return;
+        if (e.pointerId !== pointerIdRef.current)
+          return;
+        const svg = svgRef.current;
+        if (!svg)
+          return;
+        const rect = svg.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const start2 = startScreenRef.current;
+        const vp = viewport.current ?? { x: 0, y: 0, zoom: 1 };
+        const topLeft = screenToCanvas(Math.min(start2.x, x), Math.min(start2.y, y), vp);
+        const bottomRight = screenToCanvas(Math.max(start2.x, x), Math.max(start2.y, y), vp);
+        const rectLeft = topLeft.x;
+        const rectTop = topLeft.y;
+        const rectRight = bottomRight.x;
+        const rectBottom = bottomRight.y;
+        const nodes = nodesRef.current ?? [];
+        const matched = /* @__PURE__ */ new Set();
+        for (const node of nodes) {
+          const nRight = node.x + node.width;
+          const nBottom = node.y + node.height;
+          if (node.x < rectRight && nRight > rectLeft && node.y < rectBottom && nBottom > rectTop) {
+            matched.add(node.id);
+          }
+        }
+        setSelectedIds(matched);
+        setMarqueeRect(null);
+        isDrawingRef.current = false;
+        startScreenRef.current = null;
+        pointerIdRef.current = null;
+        try {
+          container.releasePointerCapture(e.pointerId);
+        } catch {
+        }
+      };
+      container.addEventListener("pointerdown", onPointerDown);
+      container.addEventListener("pointermove", onPointerMove);
+      container.addEventListener("pointerup", onPointerUp);
+      return () => {
+        container.removeEventListener("pointerdown", onPointerDown);
+        container.removeEventListener("pointermove", onPointerMove);
+        container.removeEventListener("pointerup", onPointerUp);
+      };
+    }, [enabled, containerRef, svgRef, viewport, nodesRef]);
+    return {
+      selectedIds,
+      selectNode,
+      toggleNode,
+      selectAll,
+      clearSelection,
+      marqueeRect,
+      marqueeActiveRef
+    };
+  }
+
+  // ../react/dist/hooks/useMultiSelectClipboard.js
+  var import_react7 = __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);
+    getCursorScreenPosRef.current = getCursorScreenPos;
+    const onNodeAddRef = (0, import_react7.useRef)(onNodeAdd);
+    onNodeAddRef.current = onNodeAdd;
+    const onEdgeAddRef = (0, import_react7.useRef)(onEdgeAdd);
+    onEdgeAddRef.current = onEdgeAdd;
+    const canvasRefRef = (0, import_react7.useRef)(canvasRef);
+    canvasRefRef.current = canvasRef;
+    (0, import_react7.useEffect)(() => {
+      const handler = (e) => {
+        const active = document.activeElement;
+        if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement || active instanceof HTMLElement && active.isContentEditable) {
+          return;
+        }
+        const isMod = e.metaKey || e.ctrlKey;
+        if (isMod && e.key === "c") {
+          const selectedIds = selectedIdsRef.current;
+          if (!selectedIds || selectedIds.size === 0)
+            return;
+          const nodes = nodesRef.current ?? [];
+          const edges = edgesRef.current ?? [];
+          const vp = viewport.current ?? { x: 0, y: 0, zoom: 1 };
+          const copiedNodes = nodes.filter((n) => selectedIds.has(n.id));
+          if (copiedNodes.length === 0)
+            return;
+          const copiedEdges = edges.filter((edge) => selectedIds.has(edge.fromNode) && selectedIds.has(edge.toNode));
+          clipboardSnapshot = {
+            nodes: copiedNodes,
+            edges: copiedEdges,
+            viewportAtCopy: { ...vp }
+          };
+          e.preventDefault();
+          return;
+        }
+        if (isMod && e.key === "v") {
+          if (!clipboardSnapshot)
+            return;
+          const { nodes: srcNodes, edges: srcEdges } = clipboardSnapshot;
+          if (srcNodes.length === 0)
+            return;
+          const oldToNew = /* @__PURE__ */ new Map();
+          for (const n of srcNodes) {
+            oldToNew.set(n.id, generateNodeId());
+          }
+          let minX = Infinity;
+          let minY = Infinity;
+          let maxX = -Infinity;
+          let maxY = -Infinity;
+          for (const n of srcNodes) {
+            minX = Math.min(minX, n.x);
+            minY = Math.min(minY, n.y);
+            maxX = Math.max(maxX, n.x + (n.width ?? 0));
+            maxY = Math.max(maxY, n.y + (n.height ?? 0));
+          }
+          const clusterCx = (minX + maxX) / 2;
+          const clusterCy = (minY + maxY) / 2;
+          const vp = viewport.current ?? { x: 0, y: 0, zoom: 1 };
+          const cursorScreen = getCursorScreenPosRef.current?.();
+          let targetCanvas;
+          if (cursorScreen) {
+            targetCanvas = screenToCanvas(cursorScreen.x, cursorScreen.y, vp);
+          } else {
+            targetCanvas = screenToCanvas(0, 0, vp);
+            targetCanvas = { x: targetCanvas.x + 40, y: targetCanvas.y + 40 };
+          }
+          const dx = targetCanvas.x - clusterCx;
+          const dy = targetCanvas.y - clusterCy;
+          const clonedNodes = srcNodes.map((n) => ({
+            ...structuredClone(n),
+            id: oldToNew.get(n.id),
+            x: n.x + dx,
+            y: n.y + dy
+          }));
+          const clonedEdges = srcEdges.filter((edge) => oldToNew.has(edge.fromNode) && oldToNew.has(edge.toNode)).map((edge) => ({
+            ...structuredClone(edge),
+            id: generateEdgeId(),
+            fromNode: oldToNew.get(edge.fromNode),
+            toNode: oldToNew.get(edge.toNode)
+          }));
+          const ref = canvasRefRef.current;
+          for (const node of clonedNodes) {
+            onNodeAddRef.current(node, ref);
+          }
+          for (const edge of clonedEdges) {
+            onEdgeAddRef.current(edge, ref);
+          }
+          e.preventDefault();
+          return;
+        }
+      };
+      document.addEventListener("keydown", handler);
+      return () => {
+        document.removeEventListener("keydown", handler);
+      };
+    }, [selectedIdsRef, nodesRef, edgesRef, viewport]);
+  }
+
+  // ../react/dist/hooks/useZoomNavigation.js
+  var import_react8 = __toESM(require_react(), 1);
   function expandRect(rect, factor) {
     if (factor === 1)
       return rect;
@@ -15173,16 +15486,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_react6.useRef)(false);
-    (0, import_react6.useEffect)(() => {
+    const committingRef = (0, import_react8.useRef)(false);
+    (0, import_react8.useEffect)(() => {
       committingRef.current = false;
     }, [currentCanvas]);
-    const exitArmedRef = (0, import_react6.useRef)(false);
-    (0, import_react6.useEffect)(() => {
+    const exitArmedRef = (0, import_react8.useRef)(false);
+    (0, import_react8.useEffect)(() => {
       exitArmedRef.current = false;
     }, [currentCanvas, parentFrame]);
-    const prefetchRef = (0, import_react6.useRef)(/* @__PURE__ */ new Map());
-    const prefetch = (0, import_react6.useCallback)((ref) => {
+    const prefetchRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
+    const prefetch = (0, import_react8.useCallback)((ref) => {
       if (!onResolveCanvas)
         return;
       if (canvases?.[ref])
@@ -15200,7 +15513,7 @@ var SystemCanvas = (() => {
         state.loading = false;
       });
     }, [canvases, onResolveCanvas, onSeedCanvas]);
-    const handleViewportChange = (0, import_react6.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react8.useCallback)((vp) => {
       if (!enabled)
         return;
       if (committingRef.current)
@@ -15339,7 +15652,7 @@ var SystemCanvas = (() => {
       onEnter,
       onExit
     ]);
-    const clearCommitting = (0, import_react6.useCallback)(() => {
+    const clearCommitting = (0, import_react8.useCallback)(() => {
       committingRef.current = false;
     }, []);
     return { handleViewportChange, clearCommitting };
@@ -15347,10 +15660,10 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/Viewport.js
   var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
-  var import_react15 = __toESM(require_react(), 1);
+  var import_react17 = __toESM(require_react(), 1);
 
   // ../react/dist/hooks/useViewport.js
-  var import_react7 = __toESM(require_react(), 1);
+  var import_react9 = __toESM(require_react(), 1);
 
   // ../../node_modules/d3-dispatch/src/dispatch.js
   var noop = { value: () => {
@@ -18092,19 +18405,21 @@ var SystemCanvas = (() => {
 
   // ../react/dist/hooks/useViewport.js
   function useViewport(options) {
-    const { minZoom, maxZoom, defaultViewport, onViewportChange } = options;
-    const svgRef = (0, import_react7.useRef)(null);
-    const groupRef = (0, import_react7.useRef)(null);
-    const viewport = (0, import_react7.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
-    const zoomBehaviorRef = (0, import_react7.useRef)(null);
-    const onViewportChangeRef = (0, import_react7.useRef)(onViewportChange);
+    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);
     onViewportChangeRef.current = onViewportChange;
-    (0, import_react7.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       const svg = svgRef.current;
       const group = groupRef.current;
       if (!svg || !group)
         return;
       const zoomBehavior = zoom_default2().scaleExtent([minZoom, maxZoom]).filter((event) => {
+        if (marqueeActiveRef?.current && event.type !== "wheel")
+          return false;
         if (event.button)
           return false;
         if (event.type === "wheel")
@@ -18137,7 +18452,7 @@ var SystemCanvas = (() => {
         selection2.on(".zoom", null);
       };
     }, [minZoom, maxZoom]);
-    const fitToContent = (0, import_react7.useCallback)((nodes, animate = true) => {
+    const fitToContent = (0, import_react9.useCallback)((nodes, animate = true) => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current || nodes.length === 0)
         return;
@@ -18150,13 +18465,13 @@ var SystemCanvas = (() => {
         select_default2(svg).call(zoomBehaviorRef.current.transform, t);
       }
     }, []);
-    const resetZoom = (0, import_react7.useCallback)(() => {
+    const resetZoom = (0, import_react9.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_react7.useCallback)((transform2, options2) => {
+    const setTransform = (0, import_react9.useCallback)((transform2, options2) => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current)
         return;
@@ -18168,7 +18483,7 @@ var SystemCanvas = (() => {
         sel.call(zoomBehaviorRef.current.transform, t);
       }
     }, []);
-    const zoomToNode = (0, import_react7.useCallback)((node, onComplete, options2) => {
+    const zoomToNode = (0, import_react9.useCallback)((node, onComplete, options2) => {
       const svg = svgRef.current;
       if (!svg || !zoomBehaviorRef.current) {
         onComplete?.();
@@ -18362,9 +18677,9 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/RefIndicator.js
   var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
-  var import_react8 = __toESM(require_react(), 1);
+  var import_react10 = __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_react8.useState)(false);
+    const [hover, setHover] = (0, import_react10.useState)(false);
     const iconKind = theme.node.refIndicator.icon;
     if (iconKind === "none")
       return null;
@@ -18435,7 +18750,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/CategorySlotsLayer.js
   var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
-  var import_react10 = __toESM(require_react(), 1);
+  var import_react12 = __toESM(require_react(), 1);
 
   // ../react/dist/primitives/NodeColorFill.js
   var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
@@ -18555,9 +18870,9 @@ var SystemCanvas = (() => {
 
   // ../react/dist/primitives/NodeText.js
   var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
-  var import_react9 = __toESM(require_react(), 1);
+  var import_react11 = __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_react9.useId)();
+    const reactId = (0, import_react11.useId)();
     const safeId = reactId.replace(/:/g, "");
     if (!value)
       return null;
@@ -18631,8 +18946,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_react10.useMemo)(() => computeCategorySlotRegions(node, theme, slots), [node, theme, slots]);
-    const reactId = (0, import_react10.useId)();
+    const regions = (0, import_react12.useMemo)(() => computeCategorySlotRegions(node, theme, slots), [node, theme, slots]);
+    const reactId = (0, import_react12.useId)();
     const clipId = `sc-edge-clip-${reactId.replace(/:/g, "")}`;
     if (!slots)
       return null;
@@ -18865,7 +19180,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/ResizeHandles.js
   var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
-  var import_react11 = __toESM(require_react(), 1);
+  var import_react13 = __toESM(require_react(), 1);
   var HANDLE_SIZE = 7;
   var CORNERS = [
     { corner: "nw", cursor: "nwse-resize", anchor: "nw" },
@@ -18876,7 +19191,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_react11.useState)(null);
+    const [hoveredCorner, setHoveredCorner] = (0, import_react13.useState)(null);
     const handleColor = node.resolvedStroke ?? theme.node.labelColor;
     const i = cornerInset(node.resolvedCornerRadius);
     const anchorPos = (anchor) => {
@@ -18901,7 +19216,7 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/NodeRenderer.js
-  function NodeRenderer({ nodes, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, selectedId, editingId, onResizeHandlePointerDown, canvases, only }) {
+  function NodeRenderer({ nodes, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, selectedIds, editingId, onResizeHandlePointerDown, canvases, only }) {
     const groups = nodes.filter((n) => n.type === "group");
     const others = nodes.filter((n) => n.type !== "group");
     const common = (node) => {
@@ -18917,7 +19232,7 @@ var SystemCanvas = (() => {
         onContextMenu,
         onNavigate,
         onPointerDown,
-        isSelected: selectedId === node.id,
+        isSelected: selectedIds?.has(node.id) ?? false,
         isEditing: editingId === node.id,
         slots,
         canvases,
@@ -18928,7 +19243,8 @@ var SystemCanvas = (() => {
         refCorner
       };
     };
-    const selectedNode = selectedId && editingId !== selectedId ? nodes.find((n) => n.id === selectedId) : void 0;
+    const singleSelectedId = selectedIds?.size === 1 ? Array.from(selectedIds)[0] : null;
+    const selectedNode = singleSelectedId && editingId !== singleSelectedId ? nodes.find((n) => n.id === singleSelectedId) : void 0;
     const renderResizeHandles = only !== "groups" && selectedNode && onResizeHandlePointerDown;
     return (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [only !== "non-groups" && groups.map((node) => (0, import_jsx_runtime15.jsx)(GroupNode, { ...common(node) }, node.id)), only !== "groups" && others.map((node) => {
       const Component = getNodeComponent(node.type);
@@ -18986,7 +19302,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/NodeEditor.js
   var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
-  var import_react12 = __toESM(require_react(), 1);
+  var import_react14 = __toESM(require_react(), 1);
   function NodeEditor({ node, theme, onCommit, onCancel }) {
     const editableFields = useCategoryFields(node, theme);
     if (editableFields) {
@@ -19005,11 +19321,11 @@ var SystemCanvas = (() => {
   }
   function SingleFieldEditor({ node, theme, onCommit, onCancel }) {
     const initial = getInitialValue(node);
-    const [value, setValue] = (0, import_react12.useState)(initial);
-    const textareaRef = (0, import_react12.useRef)(null);
-    const inputRef = (0, import_react12.useRef)(null);
-    const committedRef = (0, import_react12.useRef)(false);
-    (0, import_react12.useEffect)(() => {
+    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 el = textareaRef.current ?? inputRef.current;
       if (el) {
         el.focus();
@@ -19105,10 +19421,10 @@ var SystemCanvas = (() => {
     }
   }
   function FormEditor({ node, theme, fields, onCommit, onCancel }) {
-    const initial = (0, import_react12.useMemo)(() => readInitialValues(node, fields), [node, fields]);
-    const [values, setValues] = (0, import_react12.useState)(initial);
-    const committedRef = (0, import_react12.useRef)(false);
-    const panelRef = (0, import_react12.useRef)(null);
+    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 width = Math.max(node.width, 240);
     const height = Math.max(node.height, 36 + fields.length * 44);
     const commit = () => {
@@ -19137,7 +19453,7 @@ var SystemCanvas = (() => {
     const stopPointer = (e) => {
       e.stopPropagation();
     };
-    (0, import_react12.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       const el = panelRef.current;
       if (!el)
         return;
@@ -19267,13 +19583,13 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/EdgeLabelEditor.js
   var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
-  var import_react13 = __toESM(require_react(), 1);
+  var import_react15 = __toESM(require_react(), 1);
   var EDITOR_WIDTH = 110;
   function EdgeLabelEditor({ initialLabel, midpoint, theme, onCommit, onCancel }) {
-    const [value, setValue] = (0, import_react13.useState)(initialLabel);
-    const inputRef = (0, import_react13.useRef)(null);
-    const committedRef = (0, import_react13.useRef)(false);
-    (0, import_react13.useEffect)(() => {
+    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 el = inputRef.current;
       if (el) {
         el.focus();
@@ -19328,7 +19644,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/ConnectionHandles.js
   var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
-  var import_react14 = __toESM(require_react(), 1);
+  var import_react16 = __toESM(require_react(), 1);
   var SIDES = ["top", "right", "bottom", "left"];
   var HANDLE_RADIUS = 4;
   var HANDLE_HIT_RADIUS = 10;
@@ -19337,9 +19653,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_react14.useState)(!!immediate);
-    const [hoveredSide, setHoveredSide] = (0, import_react14.useState)(null);
-    (0, import_react14.useEffect)(() => {
+    const [visible, setVisible] = (0, import_react16.useState)(!!immediate);
+    const [hoveredSide, setHoveredSide] = (0, import_react16.useState)(null);
+    (0, import_react16.useEffect)(() => {
       if (immediate) {
         setVisible(true);
         return;
@@ -19426,17 +19742,18 @@ var SystemCanvas = (() => {
   // ../react/dist/components/Viewport.js
   var HOVER_PADDING = 10;
   var EDGE_PROXIMITY = 16;
-  var Viewport = (0, import_react15.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, selectedId, editingId, selectedEdgeId, editingEdgeId, dragOverrides, dropTargetId, resizeOverrides, onResizeHandlePointerDown, onEditorCommit, onEditorCancel, onEdgeEditorCommit, onEdgeEditorCancel, pendingEdge, onConnectionHandlePointerDown, edgeCreateEnabled, autoFit = "canvas-change", canvasRef, handoffTransform, onHandoffApplied, handoffFadeMs = 0 }, ref) {
+  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) {
     const { svgRef, groupRef, viewport, fitToContent, zoomToNode, setTransform } = useViewport({
       minZoom,
       maxZoom,
       defaultViewport,
-      onViewportChange
+      onViewportChange,
+      marqueeActiveRef
     });
-    const navigatingRef = (0, import_react15.useRef)(false);
-    const fadeRafRef = (0, import_react15.useRef)(null);
-    const fadeTimeoutRef = (0, import_react15.useRef)(null);
-    const triggerFade = (0, import_react15.useCallback)((durationMs) => {
+    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) => {
       if (durationMs <= 0)
         return;
       const g = groupRef.current;
@@ -19459,7 +19776,7 @@ var SystemCanvas = (() => {
         }, durationMs + 16);
       });
     }, []);
-    (0, import_react15.useEffect)(() => {
+    (0, import_react17.useEffect)(() => {
       return () => {
         if (fadeRafRef.current !== null)
           cancelAnimationFrame(fadeRafRef.current);
@@ -19467,10 +19784,10 @@ var SystemCanvas = (() => {
           clearTimeout(fadeTimeoutRef.current);
       };
     }, []);
-    const [hoveredNodeId, setHoveredNodeId] = (0, import_react15.useState)(null);
-    const [hoveredSide, setHoveredSide] = (0, import_react15.useState)(null);
-    const cursorPosRef = (0, import_react15.useRef)(null);
-    (0, import_react15.useImperativeHandle)(ref, () => ({
+    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, () => ({
       zoomToNode: (node, onComplete, options) => {
         navigatingRef.current = true;
         zoomToNode(node, onComplete, options);
@@ -19481,7 +19798,7 @@ var SystemCanvas = (() => {
       getViewport: () => viewport.current ?? { x: 0, y: 0, zoom: 1 },
       getCursorScreenPos: () => cursorPosRef.current
     }));
-    const renderNodes = (0, import_react15.useMemo)(() => {
+    const renderNodes = (0, import_react17.useMemo)(() => {
       const hasDrag = dragOverrides && dragOverrides.size > 0;
       const hasResize = resizeOverrides && resizeOverrides.size > 0;
       if (!hasDrag && !hasResize)
@@ -19494,7 +19811,7 @@ var SystemCanvas = (() => {
         return d ? { ...n, x: d.x, y: d.y } : n;
       });
     }, [nodes, dragOverrides, resizeOverrides]);
-    const renderNodeMap = (0, import_react15.useMemo)(() => {
+    const renderNodeMap = (0, import_react17.useMemo)(() => {
       const hasDrag = dragOverrides && dragOverrides.size > 0;
       const hasResize = resizeOverrides && resizeOverrides.size > 0;
       if (!hasDrag && !hasResize)
@@ -19505,11 +19822,11 @@ var SystemCanvas = (() => {
       }
       return m;
     }, [renderNodes, nodeMap, dragOverrides, resizeOverrides]);
-    const latestNodesRef = (0, import_react15.useRef)(nodes);
-    (0, import_react15.useEffect)(() => {
+    const latestNodesRef = (0, import_react17.useRef)(nodes);
+    (0, import_react17.useEffect)(() => {
       latestNodesRef.current = nodes;
     }, [nodes]);
-    const fitNow = (0, import_react15.useCallback)(() => {
+    const fitNow = (0, import_react17.useCallback)(() => {
       const current = latestNodesRef.current;
       if (current.length === 0)
         return;
@@ -19519,7 +19836,7 @@ var SystemCanvas = (() => {
         fitToContent(current, animate);
       });
     }, [fitToContent]);
-    (0, import_react15.useEffect)(() => {
+    (0, import_react17.useEffect)(() => {
       if (defaultViewport)
         return;
       if (autoFit !== "always")
@@ -19528,8 +19845,8 @@ var SystemCanvas = (() => {
         return;
       fitNow();
     }, [nodes, autoFit, defaultViewport, fitNow]);
-    const fittedForRef = (0, import_react15.useRef)(null);
-    (0, import_react15.useEffect)(() => {
+    const fittedForRef = (0, import_react17.useRef)(null);
+    (0, import_react17.useEffect)(() => {
       if (defaultViewport)
         return;
       if (autoFit !== "canvas-change" && autoFit !== "initial")
@@ -19561,7 +19878,7 @@ var SystemCanvas = (() => {
       triggerFade
     ]);
     const editingNode = editingId ? renderNodes.find((n) => n.id === editingId) ?? null : null;
-    const handleSvgPointerMove = (0, import_react15.useCallback)((event) => {
+    const handleSvgPointerMove = (0, import_react17.useCallback)((event) => {
       const svg = svgRef.current;
       if (!svg)
         return;
@@ -19613,7 +19930,7 @@ var SystemCanvas = (() => {
         setHoveredSide((prev) => prev === null ? prev : null);
       }
     }, [edgeCreateEnabled, renderNodes, svgRef, viewport]);
-    const handleSvgPointerLeave = (0, import_react15.useCallback)(() => {
+    const handleSvgPointerLeave = (0, import_react17.useCallback)(() => {
       setHoveredNodeId(null);
       setHoveredSide(null);
       cursorPosRef.current = null;
@@ -19642,12 +19959,17 @@ var SystemCanvas = (() => {
       WebkitUserSelect: "none",
       MozUserSelect: "none",
       msUserSelect: "none"
-    }, onClick: onCanvasClick, onContextMenu: onCanvasContextMenu, onPointerMove: handleSvgPointerMove, onPointerLeave: handleSvgPointerLeave, children: [(0, import_jsx_runtime22.jsx)("defs", { children: (0, import_jsx_runtime22.jsx)("pattern", { id: "system-canvas-grid", width: theme.grid.size, height: theme.grid.size, patternUnits: "userSpaceOnUse", children: (0, import_jsx_runtime22.jsx)("path", { d: `M ${theme.grid.size} 0 L 0 0 0 ${theme.grid.size}`, fill: "none", stroke: theme.grid.color, strokeWidth: theme.grid.strokeWidth }) }) }), (0, import_jsx_runtime22.jsx)("rect", { x: "-50000", y: "-50000", width: "100000", height: "100000", fill: "url(#system-canvas-grid)" }), (0, import_jsx_runtime22.jsxs)("g", { ref: groupRef, children: [(0, import_jsx_runtime22.jsx)(LanesBackground, { columns, rows, theme }), (0, import_jsx_runtime22.jsx)(NodeRenderer, { nodes: renderNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedId, editingId, canvases, only: "groups" }), (0, import_jsx_runtime22.jsx)(EdgeRenderer, { edges, nodeMap: renderNodeMap, theme, defaultEdgeStyle: edgeStyle, onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, selectedId: selectedEdgeId, editingId: editingEdgeId }), (0, import_jsx_runtime22.jsx)(NodeRenderer, { nodes: renderNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedId, editingId, onResizeHandlePointerDown, canvases, only: "non-groups" }), pendingTargetNode && (0, import_jsx_runtime22.jsx)("rect", { className: "system-canvas-drop-target", x: pendingTargetNode.x - 4, y: pendingTargetNode.y - 4, width: pendingTargetNode.width + 8, height: pendingTargetNode.height + 8, rx: pendingTargetNode.resolvedCornerRadius + 4, fill: "none", stroke: theme.node.labelColor, strokeWidth: 2, opacity: 0.85, pointerEvents: "none" }), dropTargetNode && (0, import_jsx_runtime22.jsx)("rect", { className: "system-canvas-drop-target system-canvas-node-drop-target", x: dropTargetNode.x - 4, y: dropTargetNode.y - 4, width: dropTargetNode.width + 8, height: dropTargetNode.height + 8, rx: dropTargetNode.resolvedCornerRadius + 4, fill: "none", stroke: theme.node.labelColor, strokeWidth: 2, strokeDasharray: "6 4", opacity: 0.9, pointerEvents: "none" }), pendingEdge && pendingSourceNode && (0, import_jsx_runtime22.jsx)(PendingEdgeRenderer, { sourceNode: pendingSourceNode, sourceSide: pendingEdge.sourceSide, cursor: pendingEdge.cursor, targetNode: pendingTargetNode, theme, defaultEdgeStyle: edgeStyle }), handlesNode && onConnectionHandlePointerDown && (0, import_jsx_runtime22.jsx)(ConnectionHandles, { node: handlesNode, theme, onHandlePointerDown: onConnectionHandlePointerDown, immediate: !!pendingEdge, activeSide: hoveredSide }), editingNode && onEditorCommit && onEditorCancel && (0, import_jsx_runtime22.jsx)(NodeEditor, { node: editingNode, theme, onCommit: onEditorCommit, onCancel: onEditorCancel }), editingEdge && editingEdgeMidpoint && onEdgeEditorCommit && onEdgeEditorCancel && (0, import_jsx_runtime22.jsx)(EdgeLabelEditor, { initialLabel: editingEdge.label ?? "", midpoint: editingEdgeMidpoint, theme, onCommit: onEdgeEditorCommit, onCancel: onEdgeEditorCancel })] })] });
+    }, onClick: onCanvasClick, onContextMenu: onCanvasContextMenu, onPointerMove: handleSvgPointerMove, onPointerLeave: handleSvgPointerLeave, children: [(0, import_jsx_runtime22.jsx)("defs", { children: (0, import_jsx_runtime22.jsx)("pattern", { id: "system-canvas-grid", width: theme.grid.size, height: theme.grid.size, patternUnits: "userSpaceOnUse", children: (0, import_jsx_runtime22.jsx)("path", { d: `M ${theme.grid.size} 0 L 0 0 0 ${theme.grid.size}`, fill: "none", stroke: theme.grid.color, strokeWidth: theme.grid.strokeWidth }) }) }), (0, import_jsx_runtime22.jsx)("rect", { x: "-50000", y: "-50000", width: "100000", height: "100000", fill: "url(#system-canvas-grid)" }), (0, import_jsx_runtime22.jsxs)("g", { ref: groupRef, children: [(0, import_jsx_runtime22.jsx)(LanesBackground, { columns, rows, theme }), (0, import_jsx_runtime22.jsx)(NodeRenderer, { nodes: renderNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedIds, editingId, canvases, only: "groups" }), (0, import_jsx_runtime22.jsx)(EdgeRenderer, { edges, nodeMap: renderNodeMap, theme, defaultEdgeStyle: edgeStyle, onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, selectedId: selectedEdgeId, editingId: editingEdgeId }), (0, import_jsx_runtime22.jsx)(NodeRenderer, { nodes: renderNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedIds, editingId, onResizeHandlePointerDown, canvases, only: "non-groups" }), pendingTargetNode && (0, import_jsx_runtime22.jsx)("rect", { className: "system-canvas-drop-target", x: pendingTargetNode.x - 4, y: pendingTargetNode.y - 4, width: pendingTargetNode.width + 8, height: pendingTargetNode.height + 8, rx: pendingTargetNode.resolvedCornerRadius + 4, fill: "none", stroke: theme.node.labelColor, strokeWidth: 2, opacity: 0.85, pointerEvents: "none" }), dropTargetNode && (0, import_jsx_runtime22.jsx)("rect", { className: "system-canvas-drop-target system-canvas-node-drop-target", x: dropTargetNode.x - 4, y: dropTargetNode.y - 4, width: dropTargetNode.width + 8, height: dropTargetNode.height + 8, rx: dropTargetNode.resolvedCornerRadius + 4, fill: "none", stroke: theme.node.labelColor, strokeWidth: 2, strokeDasharray: "6 4", opacity: 0.9, pointerEvents: "none" }), selectedIds && selectedIds.size > 0 && Array.from(selectedIds).map((id2) => {
+      const node = renderNodeMap.get(id2);
+      if (!node)
+        return null;
+      return (0, import_jsx_runtime22.jsx)("rect", { x: node.x - 3, y: node.y - 3, width: node.width + 6, height: node.height + 6, rx: (node.resolvedCornerRadius ?? 0) + 3, fill: "none", stroke: theme.node.labelColor, strokeWidth: 1.5, opacity: 0.7, pointerEvents: "none" }, `halo-${id2}`);
+    }), pendingEdge && pendingSourceNode && (0, import_jsx_runtime22.jsx)(PendingEdgeRenderer, { sourceNode: pendingSourceNode, sourceSide: pendingEdge.sourceSide, cursor: pendingEdge.cursor, targetNode: pendingTargetNode, theme, defaultEdgeStyle: edgeStyle }), handlesNode && onConnectionHandlePointerDown && (0, import_jsx_runtime22.jsx)(ConnectionHandles, { node: handlesNode, theme, onHandlePointerDown: onConnectionHandlePointerDown, immediate: !!pendingEdge, activeSide: hoveredSide }), editingNode && onEditorCommit && onEditorCancel && (0, import_jsx_runtime22.jsx)(NodeEditor, { node: editingNode, theme, onCommit: onEditorCommit, onCancel: onEditorCancel }), editingEdge && editingEdgeMidpoint && onEdgeEditorCommit && onEdgeEditorCancel && (0, import_jsx_runtime22.jsx)(EdgeLabelEditor, { initialLabel: editingEdge.label ?? "", midpoint: editingEdgeMidpoint, theme, onCommit: onEdgeEditorCommit, onCancel: onEdgeEditorCancel })] }), marqueeRect && (0, import_jsx_runtime22.jsx)("rect", { x: Math.min(marqueeRect.x1, marqueeRect.x2), y: Math.min(marqueeRect.y1, marqueeRect.y2), width: Math.abs(marqueeRect.x2 - marqueeRect.x1), height: Math.abs(marqueeRect.y2 - marqueeRect.y1), fill: theme.node.labelColor + "18", stroke: theme.node.labelColor, strokeWidth: 1, opacity: 0.9, pointerEvents: "none" })] });
   });
 
   // ../react/dist/components/Breadcrumbs.js
   var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
-  var import_react16 = __toESM(require_react(), 1);
+  var import_react18 = __toESM(require_react(), 1);
   function Breadcrumbs({ breadcrumbs, theme, onNavigate }) {
     if (breadcrumbs.length <= 1)
       return null;
@@ -19668,7 +19990,7 @@ var SystemCanvas = (() => {
       backdropFilter: "blur(8px)"
     }, children: breadcrumbs.map((crumb, index) => {
       const isLast = index === breadcrumbs.length - 1;
-      return (0, import_jsx_runtime23.jsxs)(import_react16.default.Fragment, { children: [index > 0 && (0, import_jsx_runtime23.jsx)("span", { style: {
+      return (0, import_jsx_runtime23.jsxs)(import_react18.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: {
@@ -19692,11 +20014,11 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/AddNodeButton.js
   var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
-  var import_react17 = __toESM(require_react(), 1);
+  var import_react19 = __toESM(require_react(), 1);
   function AddNodeButton({ options, addNode: addNode2, theme }) {
-    const [open, setOpen] = (0, import_react17.useState)(false);
-    const rootRef = (0, import_react17.useRef)(null);
-    (0, import_react17.useEffect)(() => {
+    const [open, setOpen] = (0, import_react19.useState)(false);
+    const rootRef = (0, import_react19.useRef)(null);
+    (0, import_react19.useEffect)(() => {
       if (!open)
         return;
       function onDocClick(e) {
@@ -19785,7 +20107,7 @@ var SystemCanvas = (() => {
     } });
   }
   function MenuRow({ theme, option, onClick }) {
-    const [hover, setHover] = (0, import_react17.useState)(false);
+    const [hover, setHover] = (0, import_react19.useState)(false);
     const swatchSize = 18;
     return (0, import_jsx_runtime24.jsxs)("div", { role: "button", onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), style: {
       display: "flex",
@@ -19821,12 +20143,12 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/LaneHeaders.js
   var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
-  var import_react18 = __toESM(require_react(), 1);
+  var import_react20 = __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_react18.useState)(() => getViewport());
-    (0, import_react18.useEffect)(() => {
+    const [viewport, setViewport] = (0, import_react20.useState)(() => getViewport());
+    (0, import_react20.useEffect)(() => {
       if (!hasColumns && !hasRows)
         return;
       let raf = 0;
@@ -19900,7 +20222,7 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/NodeToolbar.js
   var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1);
-  var import_react19 = __toESM(require_react(), 1);
+  var import_react21 = __toESM(require_react(), 1);
   var NODE_GAP = 10;
   var FLIP_MARGIN = 8;
   var PADDING = 6;
@@ -19908,9 +20230,9 @@ var SystemCanvas = (() => {
   var SWATCH_SIZE = 16;
   var BUTTON_SIZE = 28;
   var DELETE_SIZE = 14;
-  function NodeToolbar({ node, theme, onPatch, onDelete, getViewport, containerWidth, containerHeight, render: render2 }) {
-    const [viewport, setViewport] = (0, import_react19.useState)(() => getViewport());
-    (0, import_react19.useEffect)(() => {
+  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)(() => {
       let raf = 0;
       let lastX = -Infinity;
       let lastY = -Infinity;
@@ -19928,13 +20250,28 @@ var SystemCanvas = (() => {
       raf = requestAnimationFrame(tick);
       return () => cancelAnimationFrame(raf);
     }, [getViewport]);
+    const isMulti = selectedNodes != null && selectedNodes.length > 1;
     const align = theme.toolbarAlign ?? "center";
-    const anchorCanvasX = align === "left" ? node.x : align === "right" ? node.x + node.width : node.x + node.width / 2;
-    const topAnchor = canvasToScreen(anchorCanvasX, node.y, viewport);
-    const bottomAnchor = canvasToScreen(anchorCanvasX, node.y + node.height, viewport);
-    const toolbarRef = (0, import_react19.useRef)(null);
-    const [size, setSize] = (0, import_react19.useState)({ width: 0, height: 0 });
-    (0, import_react19.useEffect)(() => {
+    const { anchorTopY, anchorBottomY, anchorX } = (0, import_react21.useMemo)(() => {
+      if (isMulti && selectedNodes) {
+        const minX = Math.min(...selectedNodes.map((n) => n.x));
+        const maxX = Math.max(...selectedNodes.map((n) => n.x + n.width));
+        const minY = Math.min(...selectedNodes.map((n) => n.y));
+        const maxY = Math.max(...selectedNodes.map((n) => n.y + n.height));
+        return {
+          anchorX: (minX + maxX) / 2,
+          anchorTopY: minY,
+          anchorBottomY: maxY
+        };
+      }
+      const x = align === "left" ? node.x : align === "right" ? node.x + node.width : node.x + node.width / 2;
+      return { anchorX: x, anchorTopY: node.y, anchorBottomY: node.y + node.height };
+    }, [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 el = toolbarRef.current;
       if (!el)
         return;
@@ -19947,7 +20284,12 @@ var SystemCanvas = (() => {
       ro.observe(el);
       return () => ro.disconnect();
     }, []);
-    let left = align === "left" ? topAnchor.x : align === "right" ? topAnchor.x - size.width : topAnchor.x - size.width / 2;
+    let left;
+    if (isMulti) {
+      left = topAnchor.x - size.width / 2;
+    } else {
+      left = align === "left" ? topAnchor.x : align === "right" ? topAnchor.x - size.width : topAnchor.x - size.width / 2;
+    }
     let top = topAnchor.y - size.height - NODE_GAP;
     if (top < FLIP_MARGIN) {
       top = bottomAnchor.y + NODE_GAP;
@@ -19984,13 +20326,51 @@ var SystemCanvas = (() => {
         userSelect: "none",
         whiteSpace: "nowrap"
       },
-      children: render2 ? render2({ node, theme, patch, deleteNode }) : (0, import_jsx_runtime26.jsx)(DefaultToolbarContent, { node, theme, onPatch: patch, onDelete: deleteNode })
+      children: isMulti && selectedNodes && onMultiPatch ? (0, import_jsx_runtime26.jsx)(MultiToolbarContent, { selectedNodes, theme, onMultiPatch, onDelete: deleteNode }) : render2 ? render2({ node, theme, patch, deleteNode }) : (0, import_jsx_runtime26.jsx)(DefaultToolbarContent, { node, theme, onPatch: patch, onDelete: deleteNode })
     });
   }
+  function MultiToolbarContent({ selectedNodes, theme, onMultiPatch, onDelete }) {
+    const representativeNode = selectedNodes[0];
+    const groups = (0, import_react21.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");
+    return (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [(0, import_jsx_runtime26.jsxs)("span", { style: {
+      fontSize: 11,
+      color: theme.breadcrumbs.textColor,
+      opacity: 0.75,
+      paddingRight: BUTTON_GAP,
+      whiteSpace: "nowrap"
+    }, children: [selectedNodes.length, " nodes"] }), swatchGroups.map((group, i) => {
+      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) => {
+        const active = action.isActive?.(representativeNode) ?? false;
+        const handleClick = () => {
+          const patch = resolveActionPatch(action, representativeNode);
+          onMultiPatch(patch);
+        };
+        return (0, import_jsx_runtime26.jsx)(SwatchButton, { action, active, theme, onClick: handleClick }, action.id);
+      }) })] }, group.id);
+    }), otherGroups.map((group) => {
+      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) => {
+        const active = action.isActive?.(representativeNode) ?? false;
+        const handleClick = () => {
+          const patch = resolveActionPatch(action, representativeNode);
+          onMultiPatch(patch);
+        };
+        return (0, import_jsx_runtime26.jsx)(IconButton, { action, active, theme, onClick: handleClick }, action.id);
+      }) })] }, 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 DefaultToolbarContent({ node, theme, onPatch, onDelete }) {
-    const groups = (0, import_react19.useMemo)(() => getNodeActionsForNode(node, theme), [node, theme]);
+    const groups = (0, import_react21.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_react19.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_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 })] })] });
   }
   function Divider2({ theme }) {
     return (0, import_jsx_runtime26.jsx)("div", { style: {
@@ -20057,9 +20437,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_react19.useState)(false);
-    const wrapRef = (0, import_react19.useRef)(null);
-    (0, import_react19.useEffect)(() => {
+    const [open, setOpen] = (0, import_react21.useState)(false);
+    const wrapRef = (0, import_react21.useRef)(null);
+    (0, import_react21.useEffect)(() => {
       if (!open)
         return;
       const onDown = (e) => {
@@ -20146,18 +20526,18 @@ var SystemCanvas = (() => {
 
   // ../react/dist/components/NodeContextMenuOverlay.js
   var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1);
-  var import_react20 = __toESM(require_react(), 1);
+  var import_react22 = __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_react20.useRef)(null);
-    const [hoveredId, setHoveredId] = (0, import_react20.useState)(null);
-    (0, import_react20.useEffect)(() => {
+    const rootRef = (0, import_react22.useRef)(null);
+    const [hoveredId, setHoveredId] = (0, import_react22.useState)(null);
+    (0, import_react22.useEffect)(() => {
       if (state)
         setHoveredId(null);
     }, [state]);
-    (0, import_react20.useEffect)(() => {
+    (0, import_react22.useEffect)(() => {
       if (!state)
         return;
       function onDown(e) {
@@ -20265,8 +20645,8 @@ var SystemCanvas = (() => {
   // ../react/dist/components/SystemCanvas.js
   var CASCADE_WINDOW_MS = 1500;
   var CASCADE_OFFSET = 20;
-  var SystemCanvas = (0, import_react21.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, 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_react21.useMemo)(() => {
+  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)(() => {
       const defaults = {
         enterThreshold: 0.66,
         exitThreshold: 0.33,
@@ -20291,16 +20671,16 @@ var SystemCanvas = (() => {
     }, [zoomNavigation]);
     const effectiveMaxZoom = maxZoom ?? (zoomNavConfig.enabled ? 16 : 4);
     const effectiveMinZoom = minZoomProp ?? (zoomNavConfig.enabled ? 0.01 : 0.1);
-    (0, import_react21.useEffect)(() => {
+    (0, import_react23.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_react21.useState)([]);
-    const [pendingHandoff, setPendingHandoff] = (0, import_react21.useState)(null);
-    const suppressNextHandoffClearRef = (0, import_react21.useRef)(false);
-    const handleBreadcrumbClick = (0, import_react21.useCallback)((index) => {
+    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) => {
       setParentFrames((prev) => prev.slice(0, index));
       if (suppressNextHandoffClearRef.current) {
         suppressNextHandoffClearRef.current = false;
@@ -20317,10 +20697,10 @@ var SystemCanvas = (() => {
       onNavigate,
       onBreadcrumbClick: handleBreadcrumbClick
     });
-    (0, import_react21.useEffect)(() => {
+    (0, import_react23.useEffect)(() => {
       onBreadcrumbsChange?.(breadcrumbs);
     }, [breadcrumbs, onBreadcrumbsChange]);
-    const theme = (0, import_react21.useMemo)(() => {
+    const theme = (0, import_react23.useMemo)(() => {
       const registry = { ...themes, ...customThemes };
       const resolveByName = (name) => name && registry[name] ? registry[name] : null;
       if (themeProp) {
@@ -20331,22 +20711,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_react21.useMemo)(() => {
+    const { nodes, edges, nodeMap } = (0, import_react23.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_react21.useRef)(nodes);
+    const nodesRef = (0, import_react23.useRef)(nodes);
     nodesRef.current = nodes;
-    const viewportStateRef = (0, import_react21.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
-    const viewportHandleRef = (0, import_react21.useRef)(null);
-    const navigateToRefRef = (0, import_react21.useRef)(navigateToRef);
+    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);
     navigateToRefRef.current = navigateToRef;
-    const navigateToBreadcrumbRef = (0, import_react21.useRef)(navigateToBreadcrumb);
+    const navigateToBreadcrumbRef = (0, import_react23.useRef)(navigateToBreadcrumb);
     navigateToBreadcrumbRef.current = navigateToBreadcrumb;
-    const breadcrumbsRef = (0, import_react21.useRef)(breadcrumbs);
+    const breadcrumbsRef = (0, import_react23.useRef)(breadcrumbs);
     breadcrumbsRef.current = breadcrumbs;
-    (0, import_react21.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react23.useImperativeHandle)(forwardedRef, () => ({
       zoomIntoNode: (nodeId, options) => {
         return new Promise((resolve) => {
           const node = nodesRef.current.find((n) => n.id === nodeId);
@@ -20378,26 +20758,64 @@ var SystemCanvas = (() => {
         navigateToBreadcrumbRef.current(0);
       }
     }), [forwardedRef]);
-    const [selectedId, setSelectedId] = (0, import_react21.useState)(null);
-    const [editingId, setEditingId] = (0, import_react21.useState)(null);
-    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react21.useState)(null);
-    const [editingEdgeId, setEditingEdgeId] = (0, import_react21.useState)(null);
-    (0, import_react21.useEffect)(() => {
-      setSelectedId(null);
+    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({
+      svgRef: svgProxyRef,
+      viewport: viewportStateRef,
+      nodesRef,
+      containerRef,
+      enabled: editable
+    });
+    const selectedIdsRef = (0, import_react23.useRef)(selectedIds);
+    (0, import_react23.useEffect)(() => {
+      selectedIdsRef.current = selectedIds;
+    }, [selectedIds]);
+    const edgesRef = (0, import_react23.useRef)(edges);
+    (0, import_react23.useEffect)(() => {
+      edgesRef.current = edges;
+    }, [edges]);
+    useMultiSelectClipboard({
+      selectedIdsRef,
+      nodesRef,
+      edgesRef,
+      viewport: viewportStateRef,
+      canvasContainerRef: containerRef,
+      onNodeAdd: (node) => onNodeAdd?.(node, currentCanvasRef),
+      onEdgeAdd: (edge) => onEdgeAdd?.(edge, currentCanvasRef),
+      canvasRef: currentCanvasRef,
+      getCursorScreenPos: () => viewportHandleRef.current?.getCursorScreenPos() ?? null
+    });
+    (0, import_react23.useEffect)(() => {
+      clearSelection();
       setEditingId(null);
       setSelectedEdgeId(null);
       setEditingEdgeId(null);
     }, [currentCanvasRef]);
-    const onSelectionChangeRef = (0, import_react21.useRef)(onSelectionChange);
-    (0, import_react21.useEffect)(() => {
+    const onSelectionChangeRef = (0, import_react23.useRef)(onSelectionChange);
+    (0, import_react23.useEffect)(() => {
       onSelectionChangeRef.current = onSelectionChange;
     }, [onSelectionChange]);
-    const lastEmittedSelectionRef = (0, import_react21.useRef)({ kind: null, id: null, canvasRef: void 0 });
-    (0, import_react21.useEffect)(() => {
+    const lastEmittedSelectionRef = (0, import_react23.useRef)({ kind: null, id: null, multiIds: null, canvasRef: void 0 });
+    (0, import_react23.useEffect)(() => {
       const cb = onSelectionChangeRef.current;
       let next = null;
-      if (selectedId) {
-        const node = nodeMap.get(selectedId);
+      if (selectedIds.size > 1) {
+        const resolvedNodes = [];
+        for (const id2 of selectedIds) {
+          const n = nodeMap.get(id2);
+          if (n)
+            resolvedNodes.push(n);
+        }
+        if (resolvedNodes.length > 0) {
+          next = { kind: "multi", nodes: resolvedNodes, canvasRef: currentCanvasRef };
+        }
+      } else if (selectedIds.size === 1) {
+        const id2 = Array.from(selectedIds)[0];
+        const node = nodeMap.get(id2);
         if (node)
           next = { kind: "node", node, canvasRef: currentCanvasRef };
       }
@@ -20408,21 +20826,24 @@ var SystemCanvas = (() => {
       }
       const last = lastEmittedSelectionRef.current;
       const nextKind = next?.kind ?? null;
-      const nextId = next ? next.kind === "node" ? next.node.id : next.edge.id : null;
       const nextRef = next?.canvasRef;
-      if (last.kind === nextKind && last.id === nextId && last.canvasRef === nextRef) {
-        return;
+      if (nextKind === "multi" && next?.kind === "multi") {
+        const sortedIds = next.nodes.map((n) => n.id).sort().join(",");
+        if (last.kind === "multi" && last.multiIds === sortedIds && last.canvasRef === nextRef) {
+          return;
+        }
+        lastEmittedSelectionRef.current = { kind: "multi", id: null, multiIds: sortedIds, canvasRef: nextRef };
+      } else {
+        const nextId = next ? next.kind === "node" ? next.node.id : next.kind === "edge" ? next.edge.id : null : null;
+        if (last.kind === nextKind && last.id === nextId && last.canvasRef === nextRef) {
+          return;
+        }
+        lastEmittedSelectionRef.current = { kind: nextKind, id: nextId, multiIds: null, canvasRef: nextRef };
       }
-      lastEmittedSelectionRef.current = {
-        kind: nextKind,
-        id: nextId,
-        canvasRef: nextRef
-      };
       cb?.(next);
-    }, [selectedId, selectedEdgeId, currentCanvasRef, nodeMap, edges]);
-    const containerRef = (0, import_react21.useRef)(null);
-    const [containerSize, setContainerSize] = (0, import_react21.useState)({ width: 0, height: 0 });
-    (0, import_react21.useEffect)(() => {
+    }, [selectedIds, selectedEdgeId, currentCanvasRef, nodeMap, edges]);
+    const [containerSize, setContainerSize] = (0, import_react23.useState)({ width: 0, height: 0 });
+    (0, import_react23.useEffect)(() => {
       const el = containerRef.current;
       if (!el)
         return;
@@ -20437,8 +20858,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_react21.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
-    const applyLaneSnap = (0, import_react21.useCallback)((id2, patch) => {
+    const getViewportState = (0, import_react23.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
+    const applyLaneSnap = (0, import_react23.useCallback)((id2, patch) => {
       if (!snapToLanes)
         return patch;
       const cols = currentCanvas.columns;
@@ -20463,10 +20884,10 @@ var SystemCanvas = (() => {
       }
       return final;
     }, [snapToLanes, currentCanvas.columns, currentCanvas.rows]);
-    const commitResize = (0, import_react21.useCallback)((id2, patch) => {
+    const commitResize = (0, import_react23.useCallback)((id2, patch) => {
       onNodeUpdate?.(id2, applyLaneSnap(id2, patch), currentCanvasRef);
     }, [onNodeUpdate, currentCanvasRef, applyLaneSnap]);
-    const commitDragBatch = (0, import_react21.useCallback)((updates) => {
+    const commitDragBatch = (0, import_react23.useCallback)((updates) => {
       const final = updates.map((u) => ({
         id: u.id,
         patch: applyLaneSnap(u.id, u.patch)
@@ -20481,8 +20902,7 @@ var SystemCanvas = (() => {
         onNodeUpdate(id2, patch, currentCanvasRef);
       }
     }, [onNodeUpdate, onNodesUpdate, currentCanvasRef, applyLaneSnap]);
-    const svgProxyRef = (0, import_react21.useRef)(null);
-    const handleNodeDrop = (0, import_react21.useCallback)((sources, target) => {
+    const handleNodeDrop = (0, import_react23.useCallback)((sources, target) => {
       onNodeDrop?.(sources, target, { canvasRef: currentCanvasRef });
     }, [onNodeDrop, currentCanvasRef]);
     const { dragOverrides, dropTargetId, onPointerDown: onNodePointerDown } = useNodeDrag({
@@ -20491,30 +20911,32 @@ var SystemCanvas = (() => {
       onCommit: commitDragBatch,
       svgRef: svgProxyRef,
       canDropNodeOn,
-      onNodeDrop: handleNodeDrop
+      onNodeDrop: handleNodeDrop,
+      selectedIdsRef
     });
     const { resizeOverrides, onHandlePointerDown: onResizeHandlePointerDown } = useNodeResize({
       viewport: viewportStateRef,
       onCommit: commitResize
     });
-    const selectedResolvedNode = (0, import_react21.useMemo)(() => {
-      if (!selectedId)
+    const singleSelectedId = selectedIds.size === 1 ? Array.from(selectedIds)[0] : null;
+    const selectedResolvedNode = (0, import_react23.useMemo)(() => {
+      if (!singleSelectedId)
         return null;
-      const base = nodeMap.get(selectedId);
+      const base = nodeMap.get(singleSelectedId);
       if (!base)
         return null;
-      const resize = resizeOverrides.get(selectedId);
+      const resize = resizeOverrides.get(singleSelectedId);
       if (resize) {
         return { ...base, x: resize.x, y: resize.y, width: resize.width, height: resize.height };
       }
-      const drag = dragOverrides.get(selectedId);
+      const drag = dragOverrides.get(singleSelectedId);
       if (drag) {
         return { ...base, x: drag.x, y: drag.y };
       }
       return base;
-    }, [selectedId, nodeMap, dragOverrides, resizeOverrides]);
+    }, [singleSelectedId, nodeMap, dragOverrides, resizeOverrides]);
     svgProxyRef.current = viewportHandleRef.current?.getSvgElement() ?? null;
-    const handleEdgeCreated = (0, import_react21.useCallback)((edge) => {
+    const handleEdgeCreated = (0, import_react23.useCallback)((edge) => {
       onEdgeAdd?.(edge, currentCanvasRef);
     }, [onEdgeAdd, currentCanvasRef]);
     const { pending: pendingEdge, onHandlePointerDown: onConnectionHandlePointerDown } = useEdgeCreate({
@@ -20523,7 +20945,7 @@ var SystemCanvas = (() => {
       nodesRef,
       onCreate: handleEdgeCreated
     });
-    const handleNavigableNodeClick = (0, import_react21.useCallback)((node) => {
+    const handleNavigableNodeClick = (0, import_react23.useCallback)((node) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -20550,7 +20972,7 @@ var SystemCanvas = (() => {
         navigateToRef(node);
       }
     }, [navigateToRef, currentCanvasRef, zoomNavConfig.enabled]);
-    const handleZoomEnter = (0, import_react21.useCallback)((node, targetTransform) => {
+    const handleZoomEnter = (0, import_react23.useCallback)((node, targetTransform) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -20564,7 +20986,7 @@ var SystemCanvas = (() => {
       setPendingHandoff(targetTransform);
       navigateToRef(node);
     }, [currentCanvasRef, navigateToRef]);
-    const handleZoomExit = (0, import_react21.useCallback)((targetTransform) => {
+    const handleZoomExit = (0, import_react23.useCallback)((targetTransform) => {
       setPendingHandoff(targetTransform);
       suppressNextHandoffClearRef.current = true;
       navigateToBreadcrumb(breadcrumbs.length - 2);
@@ -20591,26 +21013,26 @@ var SystemCanvas = (() => {
       onEnter: handleZoomEnter,
       onExit: handleZoomExit
     });
-    const handleViewportChange = (0, import_react21.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react23.useCallback)((vp) => {
       viewportStateRef.current = vp;
       handleZoomNavViewportChange(vp);
       onViewportChange?.(vp);
     }, [handleZoomNavViewportChange, onViewportChange]);
-    const handleHandoffApplied = (0, import_react21.useCallback)(() => {
+    const handleHandoffApplied = (0, import_react23.useCallback)(() => {
       setPendingHandoff(null);
       clearZoomNavCommitting();
     }, [clearZoomNavCommitting]);
-    const handleBeginEdit = (0, import_react21.useCallback)((node) => {
+    const handleBeginEdit = (0, import_react23.useCallback)((node) => {
       setEditingId(node.id);
     }, []);
-    const handleBeginEditEdge = (0, import_react21.useCallback)((edge) => {
+    const handleBeginEditEdge = (0, import_react23.useCallback)((edge) => {
       setEditingEdgeId(edge.id);
     }, []);
-    const [contextMenuState, setContextMenuState] = (0, import_react21.useState)(null);
-    (0, import_react21.useEffect)(() => {
+    const [contextMenuState, setContextMenuState] = (0, import_react23.useState)(null);
+    (0, import_react23.useEffect)(() => {
       setContextMenuState(null);
     }, [currentCanvasRef]);
-    const handleContextMenu = (0, import_react21.useCallback)((event) => {
+    const handleContextMenu = (0, import_react23.useCallback)((event) => {
       onContextMenu?.(event);
       if (!nodeContextMenu)
         return;
@@ -20642,32 +21064,38 @@ var SystemCanvas = (() => {
       onNavigableNodeClick: handleNavigableNodeClick,
       viewport: viewportStateRef,
       editable,
-      onSelect: setSelectedId,
+      onSelect: (id2) => {
+        if (id2)
+          selectNode(id2);
+        else
+          clearSelection();
+      },
+      onToggleSelect: toggleNode,
       onBeginEdit: handleBeginEdit,
       onSelectEdge: setSelectedEdgeId,
       onBeginEditEdge: handleBeginEditEdge
     });
-    const handleEditorCommit = (0, import_react21.useCallback)((patch) => {
+    const handleEditorCommit = (0, import_react23.useCallback)((patch) => {
       if (editingId) {
         onNodeUpdate?.(editingId, patch, currentCanvasRef);
       }
       setEditingId(null);
     }, [editingId, onNodeUpdate, currentCanvasRef]);
-    const handleEditorCancel = (0, import_react21.useCallback)(() => {
+    const handleEditorCancel = (0, import_react23.useCallback)(() => {
       setEditingId(null);
     }, []);
-    const handleEdgeEditorCommit = (0, import_react21.useCallback)((patch) => {
+    const handleEdgeEditorCommit = (0, import_react23.useCallback)((patch) => {
       if (editingEdgeId) {
         onEdgeUpdate?.(editingEdgeId, patch, currentCanvasRef);
       }
       setEditingEdgeId(null);
     }, [editingEdgeId, onEdgeUpdate, currentCanvasRef]);
-    const handleEdgeEditorCancel = (0, import_react21.useCallback)(() => {
+    const handleEdgeEditorCancel = (0, import_react23.useCallback)(() => {
       setEditingEdgeId(null);
     }, []);
-    const lastAddRef = (0, import_react21.useRef)(null);
-    const menuOptions = (0, import_react21.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
-    const addNode2 = (0, import_react21.useCallback)((option, position) => {
+    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) => {
       let x, y;
       if (position) {
         x = position.x;
@@ -20699,23 +21127,33 @@ var SystemCanvas = (() => {
       const node = createNodeFromOption(option, Math.round(x), Math.round(y), void 0, theme);
       onNodeAdd?.(node, currentCanvasRef);
     }, [onNodeAdd, currentCanvasRef, theme]);
-    const handleKeyDown = (0, import_react21.useCallback)((e) => {
+    const handleKeyDown = (0, import_react23.useCallback)((e) => {
       if (!editable)
         return;
       if (e.key === "Escape") {
         setEditingId(null);
-        setSelectedId(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 (selectedId) {
+        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?.(selectedId, currentCanvasRef);
-          setSelectedId(null);
+          onNodeDelete?.(id2, currentCanvasRef);
+          clearSelection();
         } else if (selectedEdgeId) {
           e.preventDefault();
           onEdgeDelete?.(selectedEdgeId, currentCanvasRef);
@@ -20726,11 +21164,14 @@ var SystemCanvas = (() => {
       editable,
       editingId,
       editingEdgeId,
-      selectedId,
+      selectedIds,
       selectedEdgeId,
       onNodeDelete,
+      onNodesDelete,
       onEdgeDelete,
-      currentCanvasRef
+      currentCanvasRef,
+      clearSelection,
+      selectAll
     ]);
     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: {
@@ -20752,12 +21193,26 @@ var SystemCanvas = (() => {
       fontFamily: theme.node.fontFamily,
       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, selectedId: editable ? selectedId : null, 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 && selectedResolvedNode && !editingId && (0, import_jsx_runtime28.jsx)(NodeToolbar, { node: selectedResolvedNode, theme, onPatch: (update) => {
+    }, 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);
     }, onDelete: () => {
       onNodeDelete?.(selectedResolvedNode.id, currentCanvasRef);
-      setSelectedId(null);
-    }, getViewport: getViewportState, containerWidth: containerSize.width, containerHeight: containerSize.height, render: renderNodeToolbar }), 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) })] });
+      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);
+      if (selectedResolvedNodes.length === 0)
+        return null;
+      const anchorNode = selectedResolvedNodes[0];
+      return (0, import_jsx_runtime28.jsx)(NodeToolbar, { node: anchorNode, selectedNodes: selectedResolvedNodes, theme, onPatch: () => {
+      }, onMultiPatch: (patch) => {
+        for (const id2 of selectedIds) {
+          onNodeUpdate?.(id2, patch, currentCanvasRef);
+        }
+      }, onDelete: () => {
+        onNodesDelete?.(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) })] });
   });
 
   // src/index.tsx
@@ -20868,7 +21323,7 @@ var SystemCanvas = (() => {
         onEdgeUpdate: handleEdgeUpdate,
         onEdgeDelete: handleEdgeDelete
       };
-      root2.render(import_react22.default.createElement(SystemCanvas, props));
+      root2.render(import_react24.default.createElement(SystemCanvas, props));
     };
     doRender();
     return {