system-canvas-standalone 0.2.40 → 0.2.41

package/dist/system-canvas.js

@@ -12759,12 +12759,12 @@ var SystemCanvas = (() => {
     render: () => render,
     themes: () => themes
   });
-  var import_react34 = __toESM(require_react(), 1);
+  var import_react35 = __toESM(require_react(), 1);
   var import_client = __toESM(require_client(), 1);
 
   // ../react/dist/components/SystemCanvas.js
-  var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
-  var import_react33 = __toESM(require_react(), 1);
+  var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1);
+  var import_react34 = __toESM(require_react(), 1);
 
   // ../core/dist/themes/dark.js
   var darkTheme = {
@@ -15068,7 +15068,7 @@ var SystemCanvas = (() => {
   // ../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, edgeContextMenuState, setEdgeContextMenuState, cancelDrag, fitSelection } = 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, edgeContextMenuState, setEdgeContextMenuState, canvasContextMenuState, setCanvasContextMenuState, cancelDrag, fitSelection } = options;
     const handleKeyDown = (0, import_react2.useCallback)((e) => {
       const meta = e.metaKey;
       const ctrl = e.ctrlKey;
@@ -15084,6 +15084,10 @@ var SystemCanvas = (() => {
       if (!editable)
         return;
       if (e.key === "Escape") {
+        if (canvasContextMenuState) {
+          setCanvasContextMenuState(null);
+          return;
+        }
         if (contextMenuState) {
           setContextMenuState(null);
           return;
@@ -15308,6 +15312,8 @@ var SystemCanvas = (() => {
       setEditingEdgeId,
       setSelectedEdgeId,
       setContextMenuState,
+      canvasContextMenuState,
+      setCanvasContextMenuState,
       cancelDrag,
       fitSelection
     ]);
@@ -22249,12 +22255,120 @@ var SystemCanvas = (() => {
     }) });
   }
 
-  // ../react/dist/components/SearchOverlay.js
+  // ../react/dist/components/CanvasContextMenuOverlay.js
   var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1);
   var import_react30 = __toESM(require_react(), 1);
-  function SearchOverlay({ open, query, onQueryChange, theme, hiddenCategories, onToggleCategory, matchCount, matchIndex, onNext, onPrev, onClose }) {
-    const inputRef = (0, import_react30.useRef)(null);
+  var ESTIMATED_MENU_WIDTH3 = 200;
+  var MIN_MENU_WIDTH3 = 160;
+  var VIEWPORT_MARGIN3 = 8;
+  function CanvasContextMenuOverlay({ state, config, theme, onClose }) {
+    const rootRef = (0, import_react30.useRef)(null);
+    const [hoveredId, setHoveredId] = (0, import_react30.useState)(null);
     (0, import_react30.useEffect)(() => {
+      if (state)
+        setHoveredId(null);
+    }, [state]);
+    (0, import_react30.useEffect)(() => {
+      if (!state)
+        return;
+      function onDown(e) {
+        const root2 = rootRef.current;
+        if (!root2)
+          return;
+        if (root2.contains(e.target))
+          return;
+        onClose();
+      }
+      function onKey(e) {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onClose();
+        }
+      }
+      function onScroll() {
+        onClose();
+      }
+      window.addEventListener("mousedown", onDown);
+      window.addEventListener("keydown", onKey);
+      window.addEventListener("scroll", onScroll, true);
+      window.addEventListener("blur", onClose);
+      return () => {
+        window.removeEventListener("mousedown", onDown);
+        window.removeEventListener("keydown", onKey);
+        window.removeEventListener("scroll", onScroll, true);
+        window.removeEventListener("blur", onClose);
+      };
+    }, [state, onClose]);
+    if (!state)
+      return null;
+    const cm = theme.contextMenu;
+    if (!cm)
+      return null;
+    const vw = typeof window !== "undefined" ? window.innerWidth : 0;
+    const vh = typeof window !== "undefined" ? window.innerHeight : 0;
+    const sepCount = state.items.filter((i) => i.id === "__sep__").length;
+    const rowCount = state.items.length - sepCount;
+    const itemHeight = cm.itemPaddingY * 2 + cm.fontSize + 4;
+    const estimatedHeight = rowCount * itemHeight + sepCount * 9 + cm.paddingY * 2;
+    const left = vw ? Math.min(state.screenPosition.x, vw - ESTIMATED_MENU_WIDTH3 - VIEWPORT_MARGIN3) : state.screenPosition.x;
+    const top = vh ? Math.min(state.screenPosition.y, vh - estimatedHeight - VIEWPORT_MARGIN3) : state.screenPosition.y;
+    const anyIcon = state.items.some((item) => item.id !== "__sep__" && !!item.icon);
+    return (0, import_jsx_runtime31.jsx)("div", { ref: rootRef, role: "menu", onContextMenu: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, style: {
+      position: "fixed",
+      left,
+      top,
+      zIndex: 1e3,
+      minWidth: MIN_MENU_WIDTH3,
+      padding: `${cm.paddingY}px ${cm.paddingX}px`,
+      background: cm.background,
+      color: cm.itemColor,
+      border: `1px solid ${cm.borderColor}`,
+      borderRadius: cm.borderRadius,
+      boxShadow: cm.shadow,
+      fontFamily: cm.fontFamily,
+      fontSize: cm.fontSize,
+      backdropFilter: "blur(10px)",
+      userSelect: "none",
+      pointerEvents: "auto"
+    }, children: state.items.map((item, idx) => {
+      if (item.id === "__sep__") {
+        return (0, import_jsx_runtime31.jsx)("hr", { style: {
+          border: "none",
+          borderTop: `1px solid ${theme.breadcrumbs?.separatorColor ?? cm.borderColor}`,
+          margin: `4px 0`
+        } }, `__sep__${idx}`);
+      }
+      const isHovered = hoveredId === item.id;
+      const color2 = item.destructive ? cm.destructiveItemColor : cm.itemColor;
+      return (0, import_jsx_runtime31.jsxs)("div", { role: "menuitem", onMouseEnter: () => setHoveredId(item.id), onMouseLeave: () => setHoveredId((id2) => id2 === item.id ? null : id2), onClick: () => {
+        config.onSelect(item.id, {
+          canvasRef: state.canvasRef,
+          position: state.position,
+          screenPosition: state.screenPosition
+        });
+        onClose();
+      }, style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: `${cm.itemPaddingY}px ${cm.itemPaddingX}px`,
+        borderRadius: Math.max(0, cm.borderRadius - 4),
+        cursor: "pointer",
+        background: isHovered ? cm.itemHoverBackground : "transparent",
+        color: color2
+      }, children: [item.icon ? (0, import_jsx_runtime31.jsx)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", style: { flexShrink: 0, overflow: "visible" }, children: (0, import_jsx_runtime31.jsx)(NodeIcon, { icon: item.icon, x: 0, y: 0, size: 14, color: color2, opacity: 1, customIcons: theme.icons }) }) : anyIcon ? (0, import_jsx_runtime31.jsx)("span", { style: { width: 14, flexShrink: 0 }, "aria-hidden": true }) : null, (0, import_jsx_runtime31.jsx)("span", { children: item.label })] }, item.id);
+    }) });
+  }
+
+  // ../react/dist/components/SearchOverlay.js
+  var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
+  var import_react31 = __toESM(require_react(), 1);
+  function SearchOverlay({ open, query, onQueryChange, theme, hiddenCategories, onToggleCategory, matchCount, matchIndex, onNext, onPrev, onClose }) {
+    const inputRef = (0, import_react31.useRef)(null);
+    (0, import_react31.useEffect)(() => {
       if (open) {
         inputRef.current?.focus();
       }
@@ -22278,7 +22392,7 @@ var SystemCanvas = (() => {
         onPrev();
       }
     };
-    return (0, import_jsx_runtime31.jsxs)("div", { style: {
+    return (0, import_jsx_runtime32.jsxs)("div", { style: {
       position: "absolute",
       top: 12,
       left: "50%",
@@ -22289,7 +22403,7 @@ var SystemCanvas = (() => {
       alignItems: "center",
       gap: 6,
       pointerEvents: "none"
-    }, children: [(0, import_jsx_runtime31.jsxs)("div", { style: {
+    }, children: [(0, import_jsx_runtime32.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: 8,
@@ -22300,7 +22414,7 @@ var SystemCanvas = (() => {
       boxShadow: "0 2px 12px rgba(0,0,0,0.25)",
       pointerEvents: "all",
       minWidth: 220
-    }, children: [(0, import_jsx_runtime31.jsxs)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", fill: "none", stroke: textColor, strokeWidth: 1.5, style: { opacity: 0.6, flexShrink: 0 }, children: [(0, import_jsx_runtime31.jsx)("circle", { cx: 6.5, cy: 6.5, r: 5 }), (0, import_jsx_runtime31.jsx)("line", { x1: 10.5, y1: 10.5, x2: 14, y2: 14 })] }), (0, import_jsx_runtime31.jsx)("input", { ref: inputRef, value: query, onChange: (e) => onQueryChange(e.target.value), onKeyDown: handleKeyDown, placeholder: "Search nodes\\u2026", style: {
+    }, children: [(0, import_jsx_runtime32.jsxs)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", fill: "none", stroke: textColor, strokeWidth: 1.5, style: { opacity: 0.6, flexShrink: 0 }, children: [(0, import_jsx_runtime32.jsx)("circle", { cx: 6.5, cy: 6.5, r: 5 }), (0, import_jsx_runtime32.jsx)("line", { x1: 10.5, y1: 10.5, x2: 14, y2: 14 })] }), (0, import_jsx_runtime32.jsx)("input", { ref: inputRef, value: query, onChange: (e) => onQueryChange(e.target.value), onKeyDown: handleKeyDown, placeholder: "Search nodes\\u2026", style: {
       background: "transparent",
       border: "none",
       outline: "none",
@@ -22309,7 +22423,7 @@ var SystemCanvas = (() => {
       fontSize: 13,
       width: 160,
       caretColor: textColor
-    } }), query.length > 0 && matchCount > 0 && (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [(0, import_jsx_runtime31.jsx)("button", { onClick: onPrev, style: {
+    } }), query.length > 0 && matchCount > 0 && (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [(0, import_jsx_runtime32.jsx)("button", { onClick: onPrev, style: {
       background: "transparent",
       border: "none",
       cursor: "pointer",
@@ -22319,14 +22433,14 @@ var SystemCanvas = (() => {
       color: textColor,
       opacity: 0.7,
       flexShrink: 0
-    }, title: "Previous match (\u2191)", children: (0, import_jsx_runtime31.jsx)("svg", { width: 10, height: 10, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: (0, import_jsx_runtime31.jsx)("polyline", { points: "2,7 5,3 8,7" }) }) }), (0, import_jsx_runtime31.jsxs)("span", { style: {
+    }, title: "Previous match (\u2191)", children: (0, import_jsx_runtime32.jsx)("svg", { width: 10, height: 10, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: (0, import_jsx_runtime32.jsx)("polyline", { points: "2,7 5,3 8,7" }) }) }), (0, import_jsx_runtime32.jsxs)("span", { style: {
       fontSize: 11,
       fontFamily,
       color: textColor,
       opacity: 0.7,
       whiteSpace: "nowrap",
       flexShrink: 0
-    }, children: [matchIndex + 1, "/", matchCount] }), (0, import_jsx_runtime31.jsx)("button", { onClick: onNext, style: {
+    }, children: [matchIndex + 1, "/", matchCount] }), (0, import_jsx_runtime32.jsx)("button", { onClick: onNext, style: {
       background: "transparent",
       border: "none",
       cursor: "pointer",
@@ -22336,14 +22450,14 @@ var SystemCanvas = (() => {
       color: textColor,
       opacity: 0.7,
       flexShrink: 0
-    }, title: "Next match (\u2193)", children: (0, import_jsx_runtime31.jsx)("svg", { width: 10, height: 10, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: (0, import_jsx_runtime31.jsx)("polyline", { points: "2,3 5,7 8,3" }) }) })] }), query.length > 0 && matchCount === 0 && (0, import_jsx_runtime31.jsx)("span", { style: {
+    }, title: "Next match (\u2193)", children: (0, import_jsx_runtime32.jsx)("svg", { width: 10, height: 10, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: (0, import_jsx_runtime32.jsx)("polyline", { points: "2,3 5,7 8,3" }) }) })] }), query.length > 0 && matchCount === 0 && (0, import_jsx_runtime32.jsx)("span", { style: {
       fontSize: 11,
       fontFamily,
       color: textColor,
       opacity: 0.5,
       whiteSpace: "nowrap",
       flexShrink: 0
-    }, children: "No matches" }), (0, import_jsx_runtime31.jsx)("button", { onClick: onClose, style: {
+    }, children: "No matches" }), (0, import_jsx_runtime32.jsx)("button", { onClick: onClose, style: {
       background: "transparent",
       border: "none",
       cursor: "pointer",
@@ -22353,7 +22467,7 @@ var SystemCanvas = (() => {
       color: textColor,
       opacity: 0.6,
       flexShrink: 0
-    }, title: "Close search (Esc)", children: (0, import_jsx_runtime31.jsxs)("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: [(0, import_jsx_runtime31.jsx)("line", { x1: 1, y1: 1, x2: 11, y2: 11 }), (0, import_jsx_runtime31.jsx)("line", { x1: 11, y1: 1, x2: 1, y2: 11 })] }) })] }), hasCats && (0, import_jsx_runtime31.jsx)("div", { style: {
+    }, title: "Close search (Esc)", children: (0, import_jsx_runtime32.jsxs)("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, children: [(0, import_jsx_runtime32.jsx)("line", { x1: 1, y1: 1, x2: 11, y2: 11 }), (0, import_jsx_runtime32.jsx)("line", { x1: 11, y1: 1, x2: 1, y2: 11 })] }) })] }), hasCats && (0, import_jsx_runtime32.jsx)("div", { style: {
       display: "flex",
       gap: 6,
       flexWrap: "wrap",
@@ -22362,7 +22476,7 @@ var SystemCanvas = (() => {
     }, children: Object.entries(categories).map(([key, def]) => {
       const isHidden = hiddenCategories.has(key);
       const accentColor = def.fill ?? def.stroke ?? textColor;
-      return (0, import_jsx_runtime31.jsx)("button", { onClick: () => onToggleCategory(key), style: {
+      return (0, import_jsx_runtime32.jsx)("button", { onClick: () => onToggleCategory(key), style: {
         padding: "3px 10px",
         borderRadius: 12,
         border: `1.5px solid ${accentColor}`,
@@ -22380,8 +22494,8 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/CollaboratorsOverlay.js
-  var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1);
-  var import_react31 = __toESM(require_react(), 1);
+  var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
+  var import_react32 = __toESM(require_react(), 1);
   var CLIP_GUARD_MARGIN = 100;
   var STYLE_ID = "system-canvas-collab-keyframes";
   function ensureKeyframes() {
@@ -22404,7 +22518,7 @@ var SystemCanvas = (() => {
     document.head.appendChild(style);
   }
   function CollaboratorsOverlay({ collaborators, viewport, nodeMap, flashNodeIds, containerWidth = Infinity, containerHeight = Infinity }) {
-    const keyframesInjected = (0, import_react31.useRef)(false);
+    const keyframesInjected = (0, import_react32.useRef)(false);
     if (!keyframesInjected.current) {
       ensureKeyframes();
       keyframesInjected.current = true;
@@ -22419,7 +22533,7 @@ var SystemCanvas = (() => {
         halosByNode.set(collab.selectedNodeId, arr);
       }
     }
-    return (0, import_jsx_runtime32.jsxs)("div", { style: {
+    return (0, import_jsx_runtime33.jsxs)("div", { style: {
       position: "absolute",
       inset: 0,
       pointerEvents: "none",
@@ -22432,7 +22546,7 @@ var SystemCanvas = (() => {
       const screenRect = canvasRectToScreenRect({ x: node.x, y: node.y, width: node.width, height: node.height }, viewport);
       return collabList.map((collab, idx) => {
         const outset = 3 + idx * 2;
-        return (0, import_jsx_runtime32.jsxs)("div", { children: [(0, import_jsx_runtime32.jsx)("div", { style: {
+        return (0, import_jsx_runtime33.jsxs)("div", { children: [(0, import_jsx_runtime33.jsx)("div", { style: {
           position: "absolute",
           left: screenRect.x - outset,
           top: screenRect.y - outset,
@@ -22442,7 +22556,7 @@ var SystemCanvas = (() => {
           borderRadius: 6 + outset,
           opacity: 0.55,
           boxSizing: "border-box"
-        } }), (0, import_jsx_runtime32.jsx)("div", { style: {
+        } }), (0, import_jsx_runtime33.jsx)("div", { style: {
           position: "absolute",
           left: screenRect.x - outset,
           top: screenRect.y - outset - 18,
@@ -22464,13 +22578,13 @@ var SystemCanvas = (() => {
       if (screen.x < -CLIP_GUARD_MARGIN || screen.x > containerWidth + CLIP_GUARD_MARGIN || screen.y < -CLIP_GUARD_MARGIN || screen.y > containerHeight + CLIP_GUARD_MARGIN) {
         return null;
       }
-      return (0, import_jsx_runtime32.jsxs)("div", { style: {
+      return (0, import_jsx_runtime33.jsxs)("div", { style: {
         position: "absolute",
         left: screen.x,
         top: screen.y,
         transform: "translate(0, 0)",
         userSelect: "none"
-      }, children: [(0, import_jsx_runtime32.jsx)("svg", { width: "16", height: "20", viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime32.jsx)("path", { d: "M1 1L1 15L5 11L8 18L10 17L7 10L13 10L1 1Z", fill: collab.color, stroke: "#fff", strokeWidth: "1.5", strokeLinejoin: "round" }) }), (0, import_jsx_runtime32.jsxs)("div", { style: {
+      }, children: [(0, import_jsx_runtime33.jsx)("svg", { width: "16", height: "20", viewBox: "0 0 16 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime33.jsx)("path", { d: "M1 1L1 15L5 11L8 18L10 17L7 10L13 10L1 1Z", fill: collab.color, stroke: "#fff", strokeWidth: "1.5", strokeLinejoin: "round" }) }), (0, import_jsx_runtime33.jsxs)("div", { style: {
         position: "absolute",
         top: 18,
         left: 8,
@@ -22483,7 +22597,7 @@ var SystemCanvas = (() => {
         boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
         whiteSpace: "nowrap",
         fontFamily: "sans-serif"
-      }, children: [(0, import_jsx_runtime32.jsx)("div", { style: {
+      }, children: [(0, import_jsx_runtime33.jsx)("div", { style: {
         width: 16,
         height: 16,
         borderRadius: "50%",
@@ -22493,7 +22607,7 @@ var SystemCanvas = (() => {
         alignItems: "center",
         justifyContent: "center",
         background: collab.image ? "transparent" : collab.color
-      }, children: collab.image ? (0, import_jsx_runtime32.jsx)("img", { src: collab.image, width: 16, height: 16, style: { objectFit: "cover", borderRadius: "50%" } }) : (0, import_jsx_runtime32.jsx)("div", { style: {
+      }, children: collab.image ? (0, import_jsx_runtime33.jsx)("img", { src: collab.image, width: 16, height: 16, style: { objectFit: "cover", borderRadius: "50%" } }) : (0, import_jsx_runtime33.jsx)("div", { style: {
         width: 16,
         height: 16,
         display: "flex",
@@ -22503,7 +22617,7 @@ var SystemCanvas = (() => {
         color: "#fff",
         fontSize: 9,
         fontWeight: 700
-      }, children: collab.name ? collab.name[0].toUpperCase() : "?" }) }), (0, import_jsx_runtime32.jsx)("span", { style: {
+      }, children: collab.name ? collab.name[0].toUpperCase() : "?" }) }), (0, import_jsx_runtime33.jsx)("span", { style: {
         fontSize: 11,
         lineHeight: "16px",
         color: "#fff",
@@ -22514,7 +22628,7 @@ var SystemCanvas = (() => {
       if (!node)
         return null;
       const screenRect = canvasRectToScreenRect({ x: node.x, y: node.y, width: node.width, height: node.height }, viewport);
-      return (0, import_jsx_runtime32.jsx)("div", { style: {
+      return (0, import_jsx_runtime33.jsx)("div", { style: {
         position: "absolute",
         left: screenRect.x,
         top: screenRect.y,
@@ -22528,12 +22642,12 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/ExportButton.js
-  var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1);
-  var import_react32 = __toESM(require_react(), 1);
+  var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
+  var import_react33 = __toESM(require_react(), 1);
   function ExportButton({ onExportJSON, onExportPNG, onExportSVG, theme }) {
-    const [open, setOpen] = (0, import_react32.useState)(false);
-    const rootRef = (0, import_react32.useRef)(null);
-    (0, import_react32.useEffect)(() => {
+    const [open, setOpen] = (0, import_react33.useState)(false);
+    const rootRef = (0, import_react33.useRef)(null);
+    (0, import_react33.useEffect)(() => {
       if (!open)
         return;
       function onDocClick(e) {
@@ -22580,12 +22694,12 @@ var SystemCanvas = (() => {
         }
       });
     }
-    return (0, import_jsx_runtime33.jsxs)("div", { ref: rootRef, className: "system-canvas-export-button", style: {
+    return (0, import_jsx_runtime34.jsxs)("div", { ref: rootRef, className: "system-canvas-export-button", style: {
       position: "relative",
       fontFamily: theme.breadcrumbs.fontFamily,
       fontSize: theme.breadcrumbs.fontSize,
       userSelect: "none"
-    }, children: [open && (0, import_jsx_runtime33.jsx)("div", { style: {
+    }, children: [open && (0, import_jsx_runtime34.jsx)("div", { style: {
       position: "absolute",
       bottom: 52,
       right: 0,
@@ -22596,7 +22710,7 @@ var SystemCanvas = (() => {
       borderRadius: 10,
       boxShadow: "0 8px 24px rgba(0,0,0,0.35)",
       backdropFilter: "blur(10px)"
-    }, children: rows.map((row) => (0, import_jsx_runtime33.jsx)("button", { type: "button", onClick: () => void row.onClick(), style: {
+    }, children: rows.map((row) => (0, import_jsx_runtime34.jsx)("button", { type: "button", onClick: () => void row.onClick(), style: {
       display: "block",
       width: "100%",
       textAlign: "left",
@@ -22614,7 +22728,7 @@ var SystemCanvas = (() => {
     }, onMouseLeave: (e) => {
       ;
       e.currentTarget.style.background = "transparent";
-    }, children: row.label }, row.label)) }), (0, import_jsx_runtime33.jsx)("button", { type: "button", "aria-label": open ? "Close export menu" : "Export canvas", onClick: () => setOpen((v) => !v), style: {
+    }, children: row.label }, row.label)) }), (0, import_jsx_runtime34.jsx)("button", { type: "button", "aria-label": open ? "Close export menu" : "Export canvas", onClick: () => setOpen((v) => !v), style: {
       width: 44,
       height: 44,
       borderRadius: 22,
@@ -22629,7 +22743,7 @@ var SystemCanvas = (() => {
       alignItems: "center",
       justifyContent: "center",
       backdropFilter: "blur(10px)"
-    }, children: (0, import_jsx_runtime33.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, import_jsx_runtime33.jsx)("line", { x1: "10", y1: "15", x2: "10", y2: "5" }), (0, import_jsx_runtime33.jsx)("polyline", { points: "5,10 10,5 15,10" })] }) })] });
+    }, children: (0, import_jsx_runtime34.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, import_jsx_runtime34.jsx)("line", { x1: "10", y1: "15", x2: "10", y2: "5" }), (0, import_jsx_runtime34.jsx)("polyline", { points: "5,10 10,5 15,10" })] }) })] });
   }
 
   // ../react/dist/export/utils.js
@@ -22801,8 +22915,8 @@ var SystemCanvas = (() => {
   // ../react/dist/components/SystemCanvas.js
   var CASCADE_WINDOW_MS = 1500;
   var CASCADE_OFFSET = 20;
-  var SystemCanvas = (0, import_react33.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, externalNavigation = false, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, edgeContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, onEdgeUpdate, onEdgeDelete, onEdgeAdd, canDropNodeOn, onNodeDrop, renderAddNodeButton, showExportButton = false, renderExportButton, onImport, showNodeToolbar = true, renderNodeToolbar, theme: themeProp, themes: customThemes, edgeStyle = "bezier", defaultViewport, minZoom: minZoomProp, maxZoom, onViewportChange, panMode = "drag", autoFit = "canvas-change", laneHeaders = "pinned", snapToLanes = false, zoomNavigation = false, snapGrid, guideThreshold, alignDistributeMenu, historyDepth, onUndo, onRedo, collaborators = [], className, style }, forwardedRef) {
-    const zoomNavConfig = (0, import_react33.useMemo)(() => {
+  var SystemCanvas = (0, import_react34.forwardRef)(function SystemCanvas2({ canvas, onResolveCanvas, canvases, rootLabel = "Home", onNavigate, externalNavigation = false, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, edgeContextMenu, canvasContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, onEdgeUpdate, onEdgeDelete, onEdgeAdd, canDropNodeOn, onNodeDrop, renderAddNodeButton, showExportButton = false, renderExportButton, onImport, showNodeToolbar = true, renderNodeToolbar, theme: themeProp, themes: customThemes, edgeStyle = "bezier", defaultViewport, minZoom: minZoomProp, maxZoom, onViewportChange, panMode = "drag", autoFit = "canvas-change", laneHeaders = "pinned", snapToLanes = false, zoomNavigation = false, snapGrid, guideThreshold, alignDistributeMenu, historyDepth, onUndo, onRedo, collaborators = [], className, style }, forwardedRef) {
+    const zoomNavConfig = (0, import_react34.useMemo)(() => {
       const defaults = {
         enterThreshold: 0.66,
         exitThreshold: 0.33,
@@ -22827,16 +22941,16 @@ var SystemCanvas = (() => {
     }, [zoomNavigation]);
     const effectiveMaxZoom = maxZoom ?? (zoomNavConfig.enabled ? 16 : 4);
     const effectiveMinZoom = minZoomProp ?? (zoomNavConfig.enabled ? 0.01 : 0.1);
-    (0, import_react33.useEffect)(() => {
+    (0, import_react34.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_react33.useState)([]);
-    const [pendingHandoff, setPendingHandoff] = (0, import_react33.useState)(null);
-    const suppressNextHandoffClearRef = (0, import_react33.useRef)(false);
-    const handleBreadcrumbClick = (0, import_react33.useCallback)((index) => {
+    const [parentFrames, setParentFrames] = (0, import_react34.useState)([]);
+    const [pendingHandoff, setPendingHandoff] = (0, import_react34.useState)(null);
+    const suppressNextHandoffClearRef = (0, import_react34.useRef)(false);
+    const handleBreadcrumbClick = (0, import_react34.useCallback)((index) => {
       setParentFrames((prev) => prev.slice(0, index));
       if (suppressNextHandoffClearRef.current) {
         suppressNextHandoffClearRef.current = false;
@@ -22853,10 +22967,10 @@ var SystemCanvas = (() => {
       onNavigate,
       onBreadcrumbClick: handleBreadcrumbClick
     });
-    (0, import_react33.useEffect)(() => {
+    (0, import_react34.useEffect)(() => {
       onBreadcrumbsChange?.(breadcrumbs);
     }, [breadcrumbs, onBreadcrumbsChange]);
-    const theme = (0, import_react33.useMemo)(() => {
+    const theme = (0, import_react34.useMemo)(() => {
       const registry = { ...themes, ...customThemes };
       const resolveByName = (name) => name && registry[name] ? registry[name] : null;
       if (themeProp) {
@@ -22868,24 +22982,24 @@ var SystemCanvas = (() => {
       return resolveByName(currentCanvas.theme?.base) ?? resolveByName(canvas.theme?.base) ?? darkTheme;
     }, [themeProp, customThemes, currentCanvas.theme?.base, canvas.theme?.base]);
     const snapGridSize = snapGrid === true ? theme.grid.size : typeof snapGrid === "number" ? snapGrid : 0;
-    const { nodes, edges, nodeMap } = (0, import_react33.useMemo)(() => {
+    const { nodes, edges, nodeMap } = (0, import_react34.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_react33.useRef)(nodes);
+    const nodesRef = (0, import_react34.useRef)(nodes);
     nodesRef.current = nodes;
-    const viewportStateRef = (0, import_react33.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
-    const viewportHandleRef = (0, import_react33.useRef)(null);
-    const [collaboratorViewport, setCollaboratorViewport] = (0, import_react33.useState)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
-    const [flashNodeIds, setFlashNodeIds] = (0, import_react33.useState)(/* @__PURE__ */ new Map());
-    const navigateToRefRef = (0, import_react33.useRef)(navigateToRef);
+    const viewportStateRef = (0, import_react34.useRef)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
+    const viewportHandleRef = (0, import_react34.useRef)(null);
+    const [collaboratorViewport, setCollaboratorViewport] = (0, import_react34.useState)(defaultViewport ?? { x: 0, y: 0, zoom: 1 });
+    const [flashNodeIds, setFlashNodeIds] = (0, import_react34.useState)(/* @__PURE__ */ new Map());
+    const navigateToRefRef = (0, import_react34.useRef)(navigateToRef);
     navigateToRefRef.current = navigateToRef;
-    const navigateToBreadcrumbRef = (0, import_react33.useRef)(navigateToBreadcrumb);
+    const navigateToBreadcrumbRef = (0, import_react34.useRef)(navigateToBreadcrumb);
     navigateToBreadcrumbRef.current = navigateToBreadcrumb;
-    const breadcrumbsRef = (0, import_react33.useRef)(breadcrumbs);
+    const breadcrumbsRef = (0, import_react34.useRef)(breadcrumbs);
     breadcrumbsRef.current = breadcrumbs;
-    (0, import_react33.useImperativeHandle)(forwardedRef, () => ({
+    (0, import_react34.useImperativeHandle)(forwardedRef, () => ({
       zoomIntoNode: (nodeId, options) => {
         return new Promise((resolve) => {
           const node = nodesRef.current.find((n) => n.id === nodeId);
@@ -22919,16 +23033,16 @@ var SystemCanvas = (() => {
       getViewport: () => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 },
       getSvgElement: () => viewportHandleRef.current?.getSvgElement() ?? null
     }), [forwardedRef]);
-    const [editingId, setEditingId] = (0, import_react33.useState)(null);
-    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react33.useState)(null);
-    const [editingEdgeId, setEditingEdgeId] = (0, import_react33.useState)(null);
-    const [searchOpen, setSearchOpen] = (0, import_react33.useState)(false);
-    const [searchQuery, setSearchQuery] = (0, import_react33.useState)("");
-    const [hiddenCategories, setHiddenCategories] = (0, import_react33.useState)(/* @__PURE__ */ new Set());
-    const [searchIndex, setSearchIndex] = (0, import_react33.useState)(0);
-    const [importError, setImportError] = (0, import_react33.useState)(null);
-    const svgProxyRef = (0, import_react33.useRef)(null);
-    const containerRef = (0, import_react33.useRef)(null);
+    const [editingId, setEditingId] = (0, import_react34.useState)(null);
+    const [selectedEdgeId, setSelectedEdgeId] = (0, import_react34.useState)(null);
+    const [editingEdgeId, setEditingEdgeId] = (0, import_react34.useState)(null);
+    const [searchOpen, setSearchOpen] = (0, import_react34.useState)(false);
+    const [searchQuery, setSearchQuery] = (0, import_react34.useState)("");
+    const [hiddenCategories, setHiddenCategories] = (0, import_react34.useState)(/* @__PURE__ */ new Set());
+    const [searchIndex, setSearchIndex] = (0, import_react34.useState)(0);
+    const [importError, setImportError] = (0, import_react34.useState)(null);
+    const svgProxyRef = (0, import_react34.useRef)(null);
+    const containerRef = (0, import_react34.useRef)(null);
     const { selectedIds, selectNode, toggleNode, selectAll, clearSelection, selectMultiple, marqueeRect, marqueeActiveRef } = useMultiSelect({
       svgRef: svgProxyRef,
       viewport: viewportStateRef,
@@ -22936,12 +23050,12 @@ var SystemCanvas = (() => {
       containerRef,
       enabled: editable
     });
-    const selectedIdsRef = (0, import_react33.useRef)(selectedIds);
-    (0, import_react33.useEffect)(() => {
+    const selectedIdsRef = (0, import_react34.useRef)(selectedIds);
+    (0, import_react34.useEffect)(() => {
       selectedIdsRef.current = selectedIds;
     }, [selectedIds]);
-    const edgesRef = (0, import_react33.useRef)(edges);
-    (0, import_react33.useEffect)(() => {
+    const edgesRef = (0, import_react34.useRef)(edges);
+    (0, import_react34.useEffect)(() => {
       edgesRef.current = edges;
     }, [edges]);
     const { wrappedOnNodeAdd, wrappedOnNodeUpdate, wrappedOnNodesUpdate, wrappedOnNodeDelete, wrappedOnNodesDelete, wrappedOnEdgeAdd, wrappedOnEdgeUpdate, wrappedOnEdgeDelete, beginBatch, endBatch, undo, redo } = useCommandHistory({
@@ -22973,7 +23087,7 @@ var SystemCanvas = (() => {
       onBeginBatch: beginBatch,
       onEndBatch: endBatch
     });
-    (0, import_react33.useEffect)(() => {
+    (0, import_react34.useEffect)(() => {
       clearSelection();
       setEditingId(null);
       setSelectedEdgeId(null);
@@ -22982,7 +23096,7 @@ var SystemCanvas = (() => {
       setSearchQuery("");
       setHiddenCategories(/* @__PURE__ */ new Set());
     }, [currentCanvasRef]);
-    (0, import_react33.useEffect)(() => {
+    (0, import_react34.useEffect)(() => {
       const onKey = (e) => {
         if ((e.metaKey || e.ctrlKey) && e.key === "f") {
           e.preventDefault();
@@ -22992,7 +23106,7 @@ var SystemCanvas = (() => {
       window.addEventListener("keydown", onKey);
       return () => window.removeEventListener("keydown", onKey);
     }, []);
-    (0, import_react33.useEffect)(() => {
+    (0, import_react34.useEffect)(() => {
       const onKey = async (e) => {
         if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "c") {
           e.preventDefault();
@@ -23006,12 +23120,12 @@ var SystemCanvas = (() => {
       window.addEventListener("keydown", onKey);
       return () => window.removeEventListener("keydown", onKey);
     }, [selectedIds, nodes]);
-    const onSelectionChangeRef = (0, import_react33.useRef)(onSelectionChange);
-    (0, import_react33.useEffect)(() => {
+    const onSelectionChangeRef = (0, import_react34.useRef)(onSelectionChange);
+    (0, import_react34.useEffect)(() => {
       onSelectionChangeRef.current = onSelectionChange;
     }, [onSelectionChange]);
-    const lastEmittedSelectionRef = (0, import_react33.useRef)({ kind: null, id: null, multiIds: null, canvasRef: void 0 });
-    (0, import_react33.useEffect)(() => {
+    const lastEmittedSelectionRef = (0, import_react34.useRef)({ kind: null, id: null, multiIds: null, canvasRef: void 0 });
+    (0, import_react34.useEffect)(() => {
       const cb = onSelectionChangeRef.current;
       let next = null;
       if (selectedIds.size > 1) {
@@ -23053,8 +23167,8 @@ var SystemCanvas = (() => {
       }
       cb?.(next);
     }, [selectedIds, selectedEdgeId, currentCanvasRef, nodeMap, edges]);
-    const [containerSize, setContainerSize] = (0, import_react33.useState)({ width: 0, height: 0 });
-    (0, import_react33.useEffect)(() => {
+    const [containerSize, setContainerSize] = (0, import_react34.useState)({ width: 0, height: 0 });
+    (0, import_react34.useEffect)(() => {
       const el = containerRef.current;
       if (!el)
         return;
@@ -23069,14 +23183,14 @@ 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_react33.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
-    const { matchingIds, dimmedIds } = (0, import_react33.useMemo)(() => computeNodeFilter(nodes, searchOpen ? searchQuery : "", hiddenCategories), [nodes, searchQuery, searchOpen, hiddenCategories]);
-    const matchingIdsArray = (0, import_react33.useMemo)(() => Array.from(matchingIds), [matchingIds]);
+    const getViewportState = (0, import_react34.useCallback)(() => viewportStateRef.current ?? { x: 0, y: 0, zoom: 1 }, []);
+    const { matchingIds, dimmedIds } = (0, import_react34.useMemo)(() => computeNodeFilter(nodes, searchOpen ? searchQuery : "", hiddenCategories), [nodes, searchQuery, searchOpen, hiddenCategories]);
+    const matchingIdsArray = (0, import_react34.useMemo)(() => Array.from(matchingIds), [matchingIds]);
     const activeMatchId = matchingIdsArray[searchIndex];
-    (0, import_react33.useEffect)(() => {
+    (0, import_react34.useEffect)(() => {
       setSearchIndex(0);
     }, [matchingIds]);
-    const panToMatch = (0, import_react33.useCallback)((index) => {
+    const panToMatch = (0, import_react34.useCallback)((index) => {
       const id2 = matchingIdsArray[index];
       if (!id2)
         return;
@@ -23090,21 +23204,21 @@ var SystemCanvas = (() => {
         durationMs: 400
       });
     }, [matchingIdsArray]);
-    const goNextMatch = (0, import_react33.useCallback)(() => {
+    const goNextMatch = (0, import_react34.useCallback)(() => {
       if (matchingIdsArray.length === 0)
         return;
       const next = (searchIndex + 1) % matchingIdsArray.length;
       setSearchIndex(next);
       panToMatch(next);
     }, [matchingIdsArray, searchIndex, panToMatch]);
-    const goPrevMatch = (0, import_react33.useCallback)(() => {
+    const goPrevMatch = (0, import_react34.useCallback)(() => {
       if (matchingIdsArray.length === 0)
         return;
       const prev = (searchIndex - 1 + matchingIdsArray.length) % matchingIdsArray.length;
       setSearchIndex(prev);
       panToMatch(prev);
     }, [matchingIdsArray, searchIndex, panToMatch]);
-    const applyLaneSnap = (0, import_react33.useCallback)((id2, patch) => {
+    const applyLaneSnap = (0, import_react34.useCallback)((id2, patch) => {
       if (!snapToLanes)
         return patch;
       const cols = currentCanvas.columns;
@@ -23129,10 +23243,10 @@ var SystemCanvas = (() => {
       }
       return final;
     }, [snapToLanes, currentCanvas.columns, currentCanvas.rows]);
-    const commitResize = (0, import_react33.useCallback)((id2, patch) => {
+    const commitResize = (0, import_react34.useCallback)((id2, patch) => {
       wrappedOnNodeUpdate(id2, applyLaneSnap(id2, patch), currentCanvasRef);
     }, [wrappedOnNodeUpdate, currentCanvasRef, applyLaneSnap]);
-    const commitDragBatch = (0, import_react33.useCallback)((updates) => {
+    const commitDragBatch = (0, import_react34.useCallback)((updates) => {
       const final = updates.map((u) => ({
         id: u.id,
         patch: applyLaneSnap(u.id, u.patch)
@@ -23147,7 +23261,7 @@ var SystemCanvas = (() => {
         wrappedOnNodeUpdate(id2, patch, currentCanvasRef);
       }
     }, [wrappedOnNodeUpdate, wrappedOnNodesUpdate, onNodeUpdate, onNodesUpdate, currentCanvasRef, applyLaneSnap]);
-    const handleNodeDrop = (0, import_react33.useCallback)((sources, target) => {
+    const handleNodeDrop = (0, import_react34.useCallback)((sources, target) => {
       onNodeDrop?.(sources, target, { canvasRef: currentCanvasRef });
     }, [onNodeDrop, currentCanvasRef]);
     const { dragOverrides, dropTargetId, onPointerDown: onNodePointerDown, cancelDrag, isDragging } = useNodeDrag({
@@ -23172,7 +23286,7 @@ var SystemCanvas = (() => {
       threshold: guideThreshold ?? 4
     });
     const singleSelectedId = selectedIds.size === 1 ? Array.from(selectedIds)[0] : null;
-    const selectedResolvedNode = (0, import_react33.useMemo)(() => {
+    const selectedResolvedNode = (0, import_react34.useMemo)(() => {
       if (!singleSelectedId)
         return null;
       const base = nodeMap.get(singleSelectedId);
@@ -23189,7 +23303,7 @@ var SystemCanvas = (() => {
       return base;
     }, [singleSelectedId, nodeMap, dragOverrides, resizeOverrides]);
     svgProxyRef.current = viewportHandleRef.current?.getSvgElement() ?? null;
-    const handleEdgeCreated = (0, import_react33.useCallback)((edge) => {
+    const handleEdgeCreated = (0, import_react34.useCallback)((edge) => {
       wrappedOnEdgeAdd(edge, currentCanvasRef);
     }, [wrappedOnEdgeAdd, currentCanvasRef]);
     const { pending: pendingEdge, onHandlePointerDown: onConnectionHandlePointerDown } = useEdgeCreate({
@@ -23198,7 +23312,7 @@ var SystemCanvas = (() => {
       nodesRef,
       onCreate: handleEdgeCreated
     });
-    const handleNavigableNodeClick = (0, import_react33.useCallback)((node) => {
+    const handleNavigableNodeClick = (0, import_react34.useCallback)((node) => {
       if (externalNavigation) {
         if (node.ref)
           onNavigate?.(node.ref);
@@ -23230,7 +23344,7 @@ var SystemCanvas = (() => {
         navigateToRef(node);
       }
     }, [navigateToRef, currentCanvasRef, zoomNavConfig.enabled, externalNavigation, onNavigate]);
-    const handleZoomEnter = (0, import_react33.useCallback)((node, targetTransform) => {
+    const handleZoomEnter = (0, import_react34.useCallback)((node, targetTransform) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -23244,7 +23358,7 @@ var SystemCanvas = (() => {
       setPendingHandoff(targetTransform);
       navigateToRef(node);
     }, [currentCanvasRef, navigateToRef]);
-    const handleZoomExit = (0, import_react33.useCallback)((targetTransform) => {
+    const handleZoomExit = (0, import_react34.useCallback)((targetTransform) => {
       setPendingHandoff(targetTransform);
       suppressNextHandoffClearRef.current = true;
       navigateToBreadcrumb(breadcrumbs.length - 2);
@@ -23271,41 +23385,43 @@ var SystemCanvas = (() => {
       onEnter: handleZoomEnter,
       onExit: handleZoomExit
     });
-    const handleViewportChange = (0, import_react33.useCallback)((vp) => {
+    const handleViewportChange = (0, import_react34.useCallback)((vp) => {
       viewportStateRef.current = vp;
       setCollaboratorViewport(vp);
       handleZoomNavViewportChange(vp);
       onViewportChange?.(vp);
     }, [handleZoomNavViewportChange, onViewportChange]);
-    const handleHandoffApplied = (0, import_react33.useCallback)(() => {
+    const handleHandoffApplied = (0, import_react34.useCallback)(() => {
       setPendingHandoff(null);
       clearZoomNavCommitting();
     }, [clearZoomNavCommitting]);
-    const handleBeginEdit = (0, import_react33.useCallback)((node) => {
+    const handleBeginEdit = (0, import_react34.useCallback)((node) => {
       setEditingId(node.id);
     }, []);
-    const handleBeginEditEdge = (0, import_react33.useCallback)((edge) => {
+    const handleBeginEditEdge = (0, import_react34.useCallback)((edge) => {
       setEditingEdgeId(edge.id);
     }, []);
-    const handleAlign = (0, import_react33.useCallback)((direction) => {
+    const handleAlign = (0, import_react34.useCallback)((direction) => {
       const selectedNodes = Array.from(selectedIds).map((id2) => nodesRef.current.find((n) => n.id === id2)).filter((n) => n != null);
       const updates = alignNodes(selectedNodes, direction);
       if (updates.length > 0)
         wrappedOnNodesUpdate(updates, currentCanvasRef);
     }, [selectedIds, nodesRef, wrappedOnNodesUpdate, currentCanvasRef]);
-    const handleDistribute = (0, import_react33.useCallback)((axis) => {
+    const handleDistribute = (0, import_react34.useCallback)((axis) => {
       const selectedNodes = Array.from(selectedIds).map((id2) => nodesRef.current.find((n) => n.id === id2)).filter((n) => n != null);
       const updates = distributeNodes(selectedNodes, axis);
       if (updates.length > 0)
         wrappedOnNodesUpdate(updates, currentCanvasRef);
     }, [selectedIds, nodesRef, wrappedOnNodesUpdate, currentCanvasRef]);
-    const [contextMenuState, setContextMenuState] = (0, import_react33.useState)(null);
-    const [edgeContextMenuState, setEdgeContextMenuState] = (0, import_react33.useState)(null);
-    (0, import_react33.useEffect)(() => {
+    const [contextMenuState, setContextMenuState] = (0, import_react34.useState)(null);
+    const [edgeContextMenuState, setEdgeContextMenuState] = (0, import_react34.useState)(null);
+    const [canvasContextMenuState, setCanvasContextMenuState] = (0, import_react34.useState)(null);
+    (0, import_react34.useEffect)(() => {
       setContextMenuState(null);
       setEdgeContextMenuState(null);
+      setCanvasContextMenuState(null);
     }, [currentCanvasRef]);
-    const handleContextMenu = (0, import_react33.useCallback)((event) => {
+    const handleContextMenu = (0, import_react34.useCallback)((event) => {
       onContextMenu?.(event);
       if (event.type === "node") {
         if (!nodeContextMenu && !alignDistributeMenu)
@@ -23363,9 +23479,16 @@ var SystemCanvas = (() => {
           screenPosition: event.screenPosition,
           canvasRef: currentCanvasRef ?? null
         });
+      } else if (event.type === "canvas" && canvasContextMenu && canvasContextMenu.items.length > 0) {
+        setCanvasContextMenuState({
+          items: canvasContextMenu.items,
+          screenPosition: event.screenPosition,
+          position: event.position,
+          canvasRef: currentCanvasRef ?? null
+        });
       }
-    }, [onContextMenu, nodeContextMenu, edgeContextMenu, currentCanvasRef, alignDistributeMenu, selectedIds]);
-    const effectiveNodeContextMenu = (0, import_react33.useMemo)(() => {
+    }, [onContextMenu, nodeContextMenu, edgeContextMenu, canvasContextMenu, currentCanvasRef, alignDistributeMenu, selectedIds]);
+    const effectiveNodeContextMenu = (0, import_react34.useMemo)(() => {
       if (!nodeContextMenu && !alignDistributeMenu)
         return null;
       const baseItems = nodeContextMenu?.items ?? [];
@@ -23426,30 +23549,30 @@ var SystemCanvas = (() => {
       onSelectEdge: setSelectedEdgeId,
       onBeginEditEdge: handleBeginEditEdge
     });
-    const handleEditorCommit = (0, import_react33.useCallback)((patch) => {
+    const handleEditorCommit = (0, import_react34.useCallback)((patch) => {
       if (editingId) {
         wrappedOnNodeUpdate(editingId, patch, currentCanvasRef);
       }
       setEditingId(null);
     }, [editingId, wrappedOnNodeUpdate, currentCanvasRef]);
-    const handleEditorCancel = (0, import_react33.useCallback)(() => {
+    const handleEditorCancel = (0, import_react34.useCallback)(() => {
       setEditingId(null);
     }, []);
-    const handleEdgeEditorCommit = (0, import_react33.useCallback)((patch) => {
+    const handleEdgeEditorCommit = (0, import_react34.useCallback)((patch) => {
       if (editingEdgeId) {
         wrappedOnEdgeUpdate(editingEdgeId, patch, currentCanvasRef);
       }
       setEditingEdgeId(null);
     }, [editingEdgeId, wrappedOnEdgeUpdate, currentCanvasRef]);
-    const handleEdgeEditorCancel = (0, import_react33.useCallback)(() => {
+    const handleEdgeEditorCancel = (0, import_react34.useCallback)(() => {
       setEditingEdgeId(null);
     }, []);
-    const handleEdgeWaypointUpdate = (0, import_react33.useCallback)((edgeId, patch) => {
+    const handleEdgeWaypointUpdate = (0, import_react34.useCallback)((edgeId, patch) => {
       wrappedOnEdgeUpdate(edgeId, patch, currentCanvasRef);
     }, [wrappedOnEdgeUpdate, currentCanvasRef]);
-    const lastAddRef = (0, import_react33.useRef)(null);
-    const menuOptions = (0, import_react33.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
-    const addNode2 = (0, import_react33.useCallback)((option, position) => {
+    const lastAddRef = (0, import_react34.useRef)(null);
+    const menuOptions = (0, import_react34.useMemo)(() => getNodeMenuOptions(currentCanvas, theme), [currentCanvas, theme]);
+    const addNode2 = (0, import_react34.useCallback)((option, position) => {
       let x, y;
       if (position) {
         x = position.x;
@@ -23481,7 +23604,7 @@ var SystemCanvas = (() => {
       const node = createNodeFromOption(option, Math.round(x), Math.round(y), void 0, theme);
       wrappedOnNodeAdd(node, currentCanvasRef);
     }, [wrappedOnNodeAdd, currentCanvasRef, theme]);
-    const fitSelection = (0, import_react33.useCallback)(() => {
+    const fitSelection = (0, import_react34.useCallback)(() => {
       const handle = viewportHandleRef.current;
       if (!handle)
         return;
@@ -23529,6 +23652,8 @@ var SystemCanvas = (() => {
       setEditingId,
       setEditingEdgeId,
       setSelectedEdgeId,
+      canvasContextMenuState,
+      setCanvasContextMenuState,
       cancelDrag,
       fitSelection
     });
@@ -23547,8 +23672,8 @@ var SystemCanvas = (() => {
       },
       theme
     };
-    const prevNodePositionsRef = (0, import_react33.useRef)(/* @__PURE__ */ new Map());
-    (0, import_react33.useEffect)(() => {
+    const prevNodePositionsRef = (0, import_react34.useRef)(/* @__PURE__ */ new Map());
+    (0, import_react34.useEffect)(() => {
       const collaboratorSelectedNodeIds = new Set(collaborators.map((c) => c.selectedNodeId).filter((id2) => !!id2));
       if (collaboratorSelectedNodeIds.size === 0) {
         prevNodePositionsRef.current = new Map(nodes.map((n) => [n.id, { x: n.x, y: n.y }]));
@@ -23586,7 +23711,7 @@ var SystemCanvas = (() => {
         }, 620);
       }
     }, [nodes, collaborators]);
-    return (0, import_jsx_runtime34.jsxs)("div", { ref: containerRef, className: `system-canvas ${className ?? ""}`, tabIndex: editable ? 0 : -1, onKeyDown: handleKeyDown, onDragOver: onImport ? (e) => e.preventDefault() : void 0, onDrop: onImport ? (e) => {
+    return (0, import_jsx_runtime35.jsxs)("div", { ref: containerRef, className: `system-canvas ${className ?? ""}`, tabIndex: editable ? 0 : -1, onKeyDown: handleKeyDown, onDragOver: onImport ? (e) => e.preventDefault() : void 0, onDrop: onImport ? (e) => {
       e.preventDefault();
       const file = e.dataTransfer.files?.[0];
       if (!file)
@@ -23604,7 +23729,7 @@ var SystemCanvas = (() => {
       overflow: "hidden",
       outline: "none",
       ...style
-    }, children: [(0, import_jsx_runtime34.jsx)(Breadcrumbs, { breadcrumbs, theme: theme.breadcrumbs, onNavigate: navigateToBreadcrumb }), importError && (0, import_jsx_runtime34.jsxs)("div", { className: "system-canvas-import-error", style: {
+    }, children: [(0, import_jsx_runtime35.jsx)(Breadcrumbs, { breadcrumbs, theme: theme.breadcrumbs, onNavigate: navigateToBreadcrumb }), importError && (0, import_jsx_runtime35.jsxs)("div", { className: "system-canvas-import-error", style: {
       position: "absolute",
       top: 12,
       left: 12,
@@ -23620,7 +23745,7 @@ var SystemCanvas = (() => {
       fontSize: 12,
       backdropFilter: "blur(8px)",
       maxWidth: 320
-    }, children: [(0, import_jsx_runtime34.jsx)("span", { style: { flex: 1 }, children: importError }), (0, import_jsx_runtime34.jsx)("button", { type: "button", "aria-label": "Dismiss", onClick: () => setImportError(null), style: {
+    }, children: [(0, import_jsx_runtime35.jsx)("span", { style: { flex: 1 }, children: importError }), (0, import_jsx_runtime35.jsx)("button", { type: "button", "aria-label": "Dismiss", onClick: () => setImportError(null), style: {
       background: "none",
       border: "none",
       cursor: "pointer",
@@ -23629,7 +23754,7 @@ var SystemCanvas = (() => {
       fontSize: 14,
       lineHeight: 1,
       opacity: 0.7
-    }, children: "\xD7" })] }), isLoading && (0, import_jsx_runtime34.jsx)("div", { className: "system-canvas-loading", style: {
+    }, children: "\xD7" })] }), isLoading && (0, import_jsx_runtime35.jsx)("div", { className: "system-canvas-loading", style: {
       position: "absolute",
       top: 12,
       right: 12,
@@ -23641,7 +23766,7 @@ var SystemCanvas = (() => {
       fontFamily: theme.node.fontFamily,
       fontSize: 12,
       backdropFilter: "blur(8px)"
-    }, children: "Loading..." }), (0, import_jsx_runtime34.jsx)(Viewport, { ref: viewportHandleRef, nodes, edges, nodeMap, theme, edgeStyle, columns: currentCanvas.columns, rows: currentCanvas.rows, canvases, minZoom: effectiveMinZoom, maxZoom: effectiveMaxZoom, defaultViewport, panMode, 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, onEdgeWaypointUpdate: editable ? handleEdgeWaypointUpdate : void 0, pendingEdge: editable ? pendingEdge : null, onConnectionHandlePointerDown: editable ? onConnectionHandlePointerDown : void 0, edgeCreateEnabled: editable, alignmentGuides: editable ? alignmentGuides : void 0, dimmedNodeIds: dimmedIds, highlightedNodeIds: matchingIds, activeMatchNodeId: activeMatchId, viewportState: collaboratorViewport }), collaborators.length > 0 || flashNodeIds.size > 0 ? (0, import_jsx_runtime34.jsx)(CollaboratorsOverlay, { collaborators, viewport: collaboratorViewport, nodeMap, flashNodeIds, containerWidth: containerSize.width, containerHeight: containerSize.height }) : null, showLaneHeaders && (0, import_jsx_runtime34.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_runtime34.jsx)(NodeToolbar, { node: selectedResolvedNode, theme, onPatch: (update) => {
+    }, children: "Loading..." }), (0, import_jsx_runtime35.jsx)(Viewport, { ref: viewportHandleRef, nodes, edges, nodeMap, theme, edgeStyle, columns: currentCanvas.columns, rows: currentCanvas.rows, canvases, minZoom: effectiveMinZoom, maxZoom: effectiveMaxZoom, defaultViewport, panMode, 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, onEdgeWaypointUpdate: editable ? handleEdgeWaypointUpdate : void 0, pendingEdge: editable ? pendingEdge : null, onConnectionHandlePointerDown: editable ? onConnectionHandlePointerDown : void 0, edgeCreateEnabled: editable, alignmentGuides: editable ? alignmentGuides : void 0, dimmedNodeIds: dimmedIds, highlightedNodeIds: matchingIds, activeMatchNodeId: activeMatchId, viewportState: collaboratorViewport }), collaborators.length > 0 || flashNodeIds.size > 0 ? (0, import_jsx_runtime35.jsx)(CollaboratorsOverlay, { collaborators, viewport: collaboratorViewport, nodeMap, flashNodeIds, containerWidth: containerSize.width, containerHeight: containerSize.height }) : null, showLaneHeaders && (0, import_jsx_runtime35.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_runtime35.jsx)(NodeToolbar, { node: selectedResolvedNode, theme, onPatch: (update) => {
       wrappedOnNodeUpdate(selectedResolvedNode.id, update, currentCanvasRef);
     }, onDelete: () => {
       wrappedOnNodeDelete(selectedResolvedNode.id, currentCanvasRef);
@@ -23651,7 +23776,7 @@ var SystemCanvas = (() => {
       if (selectedResolvedNodes.length === 0)
         return null;
       const anchorNode = selectedResolvedNodes[0];
-      return (0, import_jsx_runtime34.jsx)(NodeToolbar, { node: anchorNode, selectedNodes: selectedResolvedNodes, theme, onPatch: () => {
+      return (0, import_jsx_runtime35.jsx)(NodeToolbar, { node: anchorNode, selectedNodes: selectedResolvedNodes, theme, onPatch: () => {
       }, onMultiPatch: (patch) => {
         const updates = Array.from(selectedIds).map((id2) => ({ id: id2, patch }));
         wrappedOnNodesUpdate(updates, currentCanvasRef);
@@ -23659,7 +23784,7 @@ var SystemCanvas = (() => {
         wrappedOnNodesDelete(Array.from(selectedIds), currentCanvasRef);
         clearSelection();
       }, getViewport: getViewportState, containerWidth: containerSize.width, containerHeight: containerSize.height, onAlign: handleAlign, onDistribute: handleDistribute });
-    })(), (0, import_jsx_runtime34.jsxs)("div", { style: {
+    })(), (0, import_jsx_runtime35.jsxs)("div", { style: {
       position: "absolute",
       bottom: 16,
       right: 16,
@@ -23669,7 +23794,7 @@ var SystemCanvas = (() => {
       gap: 8,
       zIndex: 15,
       pointerEvents: "none"
-    }, children: [editable && (renderAddNodeButton ? (0, import_jsx_runtime34.jsx)("div", { style: { pointerEvents: "auto" }, children: renderAddNodeButton(renderProps) }) : (0, import_jsx_runtime34.jsx)("div", { style: { pointerEvents: "auto" }, children: (0, import_jsx_runtime34.jsx)(AddNodeButton, { ...renderProps }) })), showExportButton && (renderExportButton ? (0, import_jsx_runtime34.jsx)("div", { style: { pointerEvents: "auto" }, children: renderExportButton(exportRenderProps) }) : (0, import_jsx_runtime34.jsx)("div", { style: { pointerEvents: "auto" }, children: (0, import_jsx_runtime34.jsx)(ExportButton, { ...exportRenderProps }) }))] }), effectiveNodeContextMenu && (0, import_jsx_runtime34.jsx)(NodeContextMenuOverlay, { state: contextMenuState, config: effectiveNodeContextMenu, theme, onClose: () => setContextMenuState(null) }), edgeContextMenu && (0, import_jsx_runtime34.jsx)(EdgeContextMenuOverlay, { state: edgeContextMenuState, config: edgeContextMenu, theme, onClose: () => setEdgeContextMenuState(null) }), (0, import_jsx_runtime34.jsx)(SearchOverlay, { open: searchOpen, query: searchQuery, onQueryChange: setSearchQuery, theme, hiddenCategories, onToggleCategory: (cat) => setHiddenCategories((prev) => {
+    }, children: [editable && (renderAddNodeButton ? (0, import_jsx_runtime35.jsx)("div", { style: { pointerEvents: "auto" }, children: renderAddNodeButton(renderProps) }) : (0, import_jsx_runtime35.jsx)("div", { style: { pointerEvents: "auto" }, children: (0, import_jsx_runtime35.jsx)(AddNodeButton, { ...renderProps }) })), showExportButton && (renderExportButton ? (0, import_jsx_runtime35.jsx)("div", { style: { pointerEvents: "auto" }, children: renderExportButton(exportRenderProps) }) : (0, import_jsx_runtime35.jsx)("div", { style: { pointerEvents: "auto" }, children: (0, import_jsx_runtime35.jsx)(ExportButton, { ...exportRenderProps }) }))] }), effectiveNodeContextMenu && (0, import_jsx_runtime35.jsx)(NodeContextMenuOverlay, { state: contextMenuState, config: effectiveNodeContextMenu, theme, onClose: () => setContextMenuState(null) }), edgeContextMenu && (0, import_jsx_runtime35.jsx)(EdgeContextMenuOverlay, { state: edgeContextMenuState, config: edgeContextMenu, theme, onClose: () => setEdgeContextMenuState(null) }), canvasContextMenu && (0, import_jsx_runtime35.jsx)(CanvasContextMenuOverlay, { state: canvasContextMenuState, config: canvasContextMenu, theme, onClose: () => setCanvasContextMenuState(null) }), (0, import_jsx_runtime35.jsx)(SearchOverlay, { open: searchOpen, query: searchQuery, onQueryChange: setSearchQuery, theme, hiddenCategories, onToggleCategory: (cat) => setHiddenCategories((prev) => {
       const next = new Set(prev);
       next.has(cat) ? next.delete(cat) : next.add(cat);
       return next;
@@ -23784,7 +23909,7 @@ var SystemCanvas = (() => {
         onEdgeUpdate: handleEdgeUpdate,
         onEdgeDelete: handleEdgeDelete
       };
-      root2.render(import_react34.default.createElement(SystemCanvas, props));
+      root2.render(import_react35.default.createElement(SystemCanvas, props));
     };
     doRender();
     return {