system-canvas-standalone 0.2.35 → 0.2.37

package/dist/system-canvas.js

@@ -15107,6 +15107,9 @@ var SystemCanvas = (() => {
       }
       if (editingId || editingEdgeId)
         return;
+      const tag = e.target?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA")
+        return;
       if ((meta || ctrl) && !shift && key === "z") {
         e.preventDefault();
         undo();
@@ -20214,7 +20217,7 @@ var SystemCanvas = (() => {
   }
 
   // ../react/dist/components/NodeRenderer.js
-  function NodeRenderer({ nodes, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, selectedIds, editingId, onResizeHandlePointerDown, canvases, only, dimmedNodeIds, highlightedNodeIds }) {
+  function NodeRenderer({ nodes, theme, onClick, onDoubleClick, onContextMenu, onNavigate, onPointerDown, selectedIds, editingId, onResizeHandlePointerDown, canvases, only, dimmedNodeIds, highlightedNodeIds, activeMatchNodeId }) {
     const groups = nodes.filter((n) => n.type === "group");
     const others = nodes.filter((n) => n.type !== "group");
     const common = (node) => {
@@ -20248,12 +20251,14 @@ var SystemCanvas = (() => {
     return (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [only !== "non-groups" && groups.map((node) => {
       const isDimmed = dimmedNodeIds?.has(node.id) ?? false;
       const isHighlighted = highlightedNodeIds?.has(node.id) ?? false;
-      return (0, import_jsx_runtime15.jsxs)("g", { opacity: isDimmed ? 0.15 : 1, children: [isHighlighted && (0, import_jsx_runtime15.jsx)("rect", { x: node.x - 4, y: node.y - 4, width: node.width + 8, height: node.height + 8, rx: 6, fill: "none", stroke: theme.node.labelColor, strokeWidth: 2, opacity: 0.6, pointerEvents: "none" }), (0, import_jsx_runtime15.jsx)(GroupNode, { ...common(node) })] }, node.id);
+      const isActiveMatch = node.id === activeMatchNodeId;
+      return (0, import_jsx_runtime15.jsxs)("g", { opacity: isDimmed ? 0.15 : 1, children: [isHighlighted && (0, import_jsx_runtime15.jsx)("rect", { x: node.x - 4, y: node.y - 4, width: node.width + 8, height: node.height + 8, rx: 6, fill: "none", stroke: theme.node.labelColor, strokeWidth: isActiveMatch ? 3.5 : 2, opacity: isActiveMatch ? 1 : 0.6, pointerEvents: "none" }), (0, import_jsx_runtime15.jsx)(GroupNode, { ...common(node) })] }, node.id);
     }), only !== "groups" && others.map((node) => {
       const Component = getNodeComponent(node.type);
       const isDimmed = dimmedNodeIds?.has(node.id) ?? false;
       const isHighlighted = highlightedNodeIds?.has(node.id) ?? false;
-      return (0, import_jsx_runtime15.jsxs)("g", { opacity: isDimmed ? 0.15 : 1, children: [isHighlighted && (0, import_jsx_runtime15.jsx)("rect", { x: node.x - 4, y: node.y - 4, width: node.width + 8, height: node.height + 8, rx: 6, fill: "none", stroke: theme.node.labelColor, strokeWidth: 2, opacity: 0.6, pointerEvents: "none" }), (0, import_jsx_runtime15.jsx)(Component, { ...common(node) })] }, node.id);
+      const isActiveMatch = node.id === activeMatchNodeId;
+      return (0, import_jsx_runtime15.jsxs)("g", { opacity: isDimmed ? 0.15 : 1, children: [isHighlighted && (0, import_jsx_runtime15.jsx)("rect", { x: node.x - 4, y: node.y - 4, width: node.width + 8, height: node.height + 8, rx: 6, fill: "none", stroke: theme.node.labelColor, strokeWidth: isActiveMatch ? 3.5 : 2, opacity: isActiveMatch ? 1 : 0.6, pointerEvents: "none" }), (0, import_jsx_runtime15.jsx)(Component, { ...common(node) })] }, node.id);
     }), renderResizeHandles && (0, import_jsx_runtime15.jsx)(ResizeHandles, { node: selectedNode, theme, onHandlePointerDown: onResizeHandlePointerDown }), renderResizeHandles && (() => {
       const slots = getCategorySlots(selectedNode, theme);
       if (!slots?.topRightOuter)
@@ -21156,7 +21161,7 @@ var SystemCanvas = (() => {
   // ../react/dist/components/Viewport.js
   var HOVER_PADDING = 10;
   var EDGE_PROXIMITY = 16;
-  var Viewport = (0, import_react22.forwardRef)(function Viewport2({ nodes, edges, nodeMap, theme, edgeStyle, columns, rows, canvases, minZoom, maxZoom, defaultViewport, panMode, 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, onEdgeWaypointUpdate, pendingEdge, onConnectionHandlePointerDown, edgeCreateEnabled, alignmentGuides, dimmedNodeIds, highlightedNodeIds, viewportState, autoFit = "canvas-change", canvasRef, handoffTransform, onHandoffApplied, handoffFadeMs = 0 }, ref) {
+  var Viewport = (0, import_react22.forwardRef)(function Viewport2({ nodes, edges, nodeMap, theme, edgeStyle, columns, rows, canvases, minZoom, maxZoom, defaultViewport, panMode, 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, onEdgeWaypointUpdate, pendingEdge, onConnectionHandlePointerDown, edgeCreateEnabled, alignmentGuides, dimmedNodeIds, highlightedNodeIds, activeMatchNodeId, viewportState, autoFit = "canvas-change", canvasRef, handoffTransform, onHandoffApplied, handoffFadeMs = 0 }, ref) {
     const { svgRef, groupRef, viewport, fitToContent, zoomToNode, setTransform } = useViewport({
       minZoom,
       maxZoom,
@@ -21399,7 +21404,7 @@ var SystemCanvas = (() => {
       WebkitUserSelect: "none",
       MozUserSelect: "none",
       msUserSelect: "none"
-    }, onClick: onCanvasClick, onContextMenu: onCanvasContextMenu, onPointerMove: handleSvgPointerMove, onPointerLeave: handleSvgPointerLeave, children: [(0, import_jsx_runtime24.jsx)("defs", { children: (0, import_jsx_runtime24.jsx)("pattern", { id: "system-canvas-grid", width: theme.grid.size, height: theme.grid.size, patternUnits: "userSpaceOnUse", children: (0, import_jsx_runtime24.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_runtime24.jsx)("rect", { x: "-50000", y: "-50000", width: "100000", height: "100000", fill: "url(#system-canvas-grid)" }), (0, import_jsx_runtime24.jsxs)("g", { ref: groupRef, children: [(0, import_jsx_runtime24.jsx)(LanesBackground, { columns, rows, theme }), (0, import_jsx_runtime24.jsx)(NodeRenderer, { nodes: visibleNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedIds, editingId, canvases, only: "groups", dimmedNodeIds, highlightedNodeIds }), (0, import_jsx_runtime24.jsx)(EdgeRenderer, { edges, nodeMap: renderNodeMap, theme, defaultEdgeStyle: edgeStyle, onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, selectedId: selectedEdgeId, editingId: editingEdgeId, dimmedNodeIds, parallelGroups, editable: !!onNodePointerDown, onWaypointCommit: onEdgeWaypointUpdate ? (id2, wps) => onEdgeWaypointUpdate(id2, { waypoints: wps }) : void 0, viewportRef: viewport }), (0, import_jsx_runtime24.jsx)(NodeRenderer, { nodes: visibleNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedIds, editingId, onResizeHandlePointerDown, canvases, only: "non-groups", dimmedNodeIds, highlightedNodeIds }), (0, import_jsx_runtime24.jsx)(RevealsLayer, { nodes: visibleNodes, theme, canvases, getViewport }), pendingTargetNode && (0, import_jsx_runtime24.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_runtime24.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) => {
+    }, onClick: onCanvasClick, onContextMenu: onCanvasContextMenu, onPointerMove: handleSvgPointerMove, onPointerLeave: handleSvgPointerLeave, children: [(0, import_jsx_runtime24.jsx)("defs", { children: (0, import_jsx_runtime24.jsx)("pattern", { id: "system-canvas-grid", width: theme.grid.size, height: theme.grid.size, patternUnits: "userSpaceOnUse", children: (0, import_jsx_runtime24.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_runtime24.jsx)("rect", { x: "-50000", y: "-50000", width: "100000", height: "100000", fill: "url(#system-canvas-grid)" }), (0, import_jsx_runtime24.jsxs)("g", { ref: groupRef, children: [(0, import_jsx_runtime24.jsx)(LanesBackground, { columns, rows, theme }), (0, import_jsx_runtime24.jsx)(NodeRenderer, { nodes: visibleNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedIds, editingId, canvases, only: "groups", dimmedNodeIds, highlightedNodeIds, activeMatchNodeId }), (0, import_jsx_runtime24.jsx)(EdgeRenderer, { edges, nodeMap: renderNodeMap, theme, defaultEdgeStyle: edgeStyle, onClick: onEdgeClick, onDoubleClick: onEdgeDoubleClick, onContextMenu: onEdgeContextMenu, selectedId: selectedEdgeId, editingId: editingEdgeId, dimmedNodeIds, parallelGroups, editable: !!onNodePointerDown, onWaypointCommit: onEdgeWaypointUpdate ? (id2, wps) => onEdgeWaypointUpdate(id2, { waypoints: wps }) : void 0, viewportRef: viewport }), (0, import_jsx_runtime24.jsx)(NodeRenderer, { nodes: visibleNodes, theme, onClick: onNodeClick, onDoubleClick: onNodeDoubleClick, onContextMenu: onNodeContextMenu, onNavigate: onNodeNavigate, onPointerDown: onNodePointerDown, selectedIds, editingId, onResizeHandlePointerDown, canvases, only: "non-groups", dimmedNodeIds, highlightedNodeIds, activeMatchNodeId }), (0, import_jsx_runtime24.jsx)(RevealsLayer, { nodes: visibleNodes, theme, canvases, getViewport }), pendingTargetNode && (0, import_jsx_runtime24.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_runtime24.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;
@@ -22247,7 +22252,7 @@ var SystemCanvas = (() => {
   // ../react/dist/components/SearchOverlay.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, totalCount, onClose, onPanToMatch }) {
+  function SearchOverlay({ open, query, onQueryChange, theme, hiddenCategories, onToggleCategory, matchCount, matchIndex, onNext, onPrev, onClose }) {
     const inputRef = (0, import_react30.useRef)(null);
     (0, import_react30.useEffect)(() => {
       if (open) {
@@ -22265,9 +22270,12 @@ var SystemCanvas = (() => {
       if (e.key === "Escape") {
         e.preventDefault();
         onClose();
-      } else if (e.key === "Enter") {
+      } else if (e.key === "Enter" || e.key === "ArrowDown") {
+        e.preventDefault();
+        onNext();
+      } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        onPanToMatch();
+        onPrev();
       }
     };
     return (0, import_jsx_runtime31.jsxs)("div", { style: {
@@ -22301,14 +22309,41 @@ var SystemCanvas = (() => {
       fontSize: 13,
       width: 160,
       caretColor: textColor
-    } }), query.length > 0 && (0, import_jsx_runtime31.jsxs)("span", { style: {
+    } }), query.length > 0 && matchCount > 0 && (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [(0, import_jsx_runtime31.jsx)("button", { onClick: onPrev, style: {
+      background: "transparent",
+      border: "none",
+      cursor: "pointer",
+      padding: "2px 3px",
+      display: "flex",
+      alignItems: "center",
+      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: {
       fontSize: 11,
       fontFamily,
       color: textColor,
       opacity: 0.7,
       whiteSpace: "nowrap",
       flexShrink: 0
-    }, children: [matchCount, " of ", totalCount] }), (0, import_jsx_runtime31.jsx)("button", { onClick: onClose, style: {
+    }, children: [matchIndex + 1, "/", matchCount] }), (0, import_jsx_runtime31.jsx)("button", { onClick: onNext, style: {
+      background: "transparent",
+      border: "none",
+      cursor: "pointer",
+      padding: "2px 3px",
+      display: "flex",
+      alignItems: "center",
+      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: {
+      fontSize: 11,
+      fontFamily,
+      color: textColor,
+      opacity: 0.5,
+      whiteSpace: "nowrap",
+      flexShrink: 0
+    }, children: "No matches" }), (0, import_jsx_runtime31.jsx)("button", { onClick: onClose, style: {
       background: "transparent",
       border: "none",
       cursor: "pointer",
@@ -22738,7 +22773,7 @@ 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, onBreadcrumbClick, onBreadcrumbsChange, onNodeClick, onNodeDoubleClick, onEdgeClick, onEdgeDoubleClick, onContextMenu, onSelectionChange, nodeContextMenu, edgeContextMenu, editable = false, onNodeAdd, onNodeUpdate, onNodesUpdate, onNodeDelete, onNodesDelete, onEdgeUpdate, onEdgeDelete, onEdgeAdd, canDropNodeOn, onNodeDrop, renderAddNodeButton, showExportButton = true, 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) {
+  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 = true, 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)(() => {
       const defaults = {
         enterThreshold: 0.66,
@@ -22861,6 +22896,7 @@ var SystemCanvas = (() => {
     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);
@@ -22921,13 +22957,7 @@ var SystemCanvas = (() => {
       const onKey = (e) => {
         if ((e.metaKey || e.ctrlKey) && e.key === "f") {
           e.preventDefault();
-          setSearchOpen((prev) => {
-            if (prev) {
-              setSearchQuery("");
-              setHiddenCategories(/* @__PURE__ */ new Set());
-            }
-            return !prev;
-          });
+          setSearchOpen((prev) => !prev);
         }
       };
       window.addEventListener("keydown", onKey);
@@ -23012,11 +23042,16 @@ var SystemCanvas = (() => {
     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 panToFirstMatch = (0, import_react33.useCallback)(() => {
-      if (matchingIds.size === 0)
+    const matchingIdsArray = (0, import_react33.useMemo)(() => Array.from(matchingIds), [matchingIds]);
+    const activeMatchId = matchingIdsArray[searchIndex];
+    (0, import_react33.useEffect)(() => {
+      setSearchIndex(0);
+    }, [matchingIds]);
+    const panToMatch = (0, import_react33.useCallback)((index) => {
+      const id2 = matchingIdsArray[index];
+      if (!id2)
         return;
-      const firstId = matchingIds.values().next().value;
-      const node = nodesRef.current.find((n) => n.id === firstId);
+      const node = nodesRef.current.find((n) => n.id === id2);
       const handle = viewportHandleRef.current;
       if (!node || !handle)
         return;
@@ -23025,7 +23060,21 @@ var SystemCanvas = (() => {
         targetZoom: Math.max(currentZoom, 1.5),
         durationMs: 400
       });
-    }, [matchingIds]);
+    }, [matchingIdsArray]);
+    const goNextMatch = (0, import_react33.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)(() => {
+      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) => {
       if (!snapToLanes)
         return patch;
@@ -23121,6 +23170,11 @@ var SystemCanvas = (() => {
       onCreate: handleEdgeCreated
     });
     const handleNavigableNodeClick = (0, import_react33.useCallback)((node) => {
+      if (externalNavigation) {
+        if (node.ref)
+          onNavigate?.(node.ref);
+        return;
+      }
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
         parentNodeRect: {
@@ -23146,7 +23200,7 @@ var SystemCanvas = (() => {
       } else {
         navigateToRef(node);
       }
-    }, [navigateToRef, currentCanvasRef, zoomNavConfig.enabled]);
+    }, [navigateToRef, currentCanvasRef, zoomNavConfig.enabled, externalNavigation, onNavigate]);
     const handleZoomEnter = (0, import_react33.useCallback)((node, targetTransform) => {
       const frame2 = {
         parentCanvasRef: currentCanvasRef,
@@ -23558,7 +23612,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, viewportState: collaboratorViewport }), collaborators.length > 0 || flashNodeIds.size > 0 ? (0, import_jsx_runtime34.jsx)(CollaboratorsOverlay, { collaborators, viewport: collaboratorViewport, nodeMap, flashNodeIds }) : 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_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 }) : 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) => {
       wrappedOnNodeUpdate(selectedResolvedNode.id, update, currentCanvasRef);
     }, onDelete: () => {
       wrappedOnNodeDelete(selectedResolvedNode.id, currentCanvasRef);
@@ -23590,11 +23644,7 @@ var SystemCanvas = (() => {
       const next = new Set(prev);
       next.has(cat) ? next.delete(cat) : next.add(cat);
       return next;
-    }), matchCount: matchingIds.size, totalCount: nodes.length, onClose: () => {
-      setSearchOpen(false);
-      setSearchQuery("");
-      setHiddenCategories(/* @__PURE__ */ new Set());
-    }, onPanToMatch: panToFirstMatch })] });
+    }), matchCount: matchingIds.size, matchIndex: searchIndex, onNext: goNextMatch, onPrev: goPrevMatch, onClose: () => setSearchOpen(false) })] });
   });
 
   // src/index.tsx