@designa8/vibedesign-stripe-deepseek-85ea 0.1.2 → 0.1.4

package/README.md

@@ -1,6 +1,6 @@
 # @designa8/vibedesign-stripe-deepseek-85ea
 
-Complete design system generated by Atoms Design, version **0.1.2**.
+Complete design system generated by Atoms Design, version **0.1.4**.
 Tokens, atoms, molecules, organisms, and templates — import from the package root;
 never hardcode visual values in consumer code.
 

package/dist/index.cjs

@@ -11854,7 +11854,7 @@ var RoutingNode = React60.forwardRef(
     ...rest
   }, ref) => {
     const glyph5 = icon ?? defaultIconByType[type];
-    const flagged = selected || active;
+    const highlighted = selected || active;
     return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       "div",
       {
@@ -11863,6 +11863,7 @@ var RoutingNode = React60.forwardRef(
         style: { width: NODE_WIDTH, ...style },
         "data-node-type": type,
         "data-selected": selected || void 0,
+        "data-active": active || void 0,
         ...rest,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
@@ -11871,8 +11872,8 @@ var RoutingNode = React60.forwardRef(
               className: cn52(
                 "flex items-stretch overflow-hidden rounded-md border bg-surface",
                 "transition duration-150 ease-out",
-                disabled ? "border-hairline-soft opacity-50" : unreachable ? "border-dashed border-semantic-warning" : selected || active ? "border-primary ring-2 ring-primary/25" : conflict ? "border-semantic-error/50" : "border-hairline",
-                dragging ? "shadow-lg" : flagged ? "shadow-md" : "shadow-sm",
+                disabled ? "border-hairline-soft opacity-50" : selected && unreachable ? "border-dashed border-semantic-warning ring-2 ring-primary" : selected ? "border-primary ring-2 ring-primary" : unreachable ? "border-dashed border-semantic-warning" : active ? "border-primary ring-2 ring-primary/25" : conflict ? "border-semantic-error/50" : "border-hairline",
+                dragging ? "shadow-lg" : highlighted ? "shadow-md" : "shadow-sm",
                 disabled ? "" : "group-hover/node:border-hairline-strong group-hover/node:shadow-md"
               ),
               children: [
@@ -11928,7 +11929,7 @@ var RoutingNode = React60.forwardRef(
               "aria-hidden": "true",
               className: cn52(
                 "absolute -left-xs top-1/2 size-sm -translate-y-1/2 rounded-full border-2 transition-colors duration-150 ease-out",
-                flagged ? "border-primary bg-primary" : "border-hairline-strong bg-surface"
+                highlighted ? "border-primary bg-primary" : "border-hairline-strong bg-surface"
               )
             }
           ),
@@ -11938,7 +11939,7 @@ var RoutingNode = React60.forwardRef(
               "aria-hidden": "true",
               className: cn52(
                 "absolute -right-xs top-1/2 size-sm -translate-y-1/2 rounded-full border-2 transition-colors duration-150 ease-out",
-                flagged ? "border-primary bg-primary" : "border-hairline-strong bg-surface"
+                highlighted ? "border-primary bg-primary" : "border-hairline-strong bg-surface"
               )
             }
           ),
@@ -11961,7 +11962,7 @@ var RoutingNode = React60.forwardRef(
               size: "inline",
               disabled,
               "aria-label": ariaLabel ?? `${eyebrowByType2[type]}, ${title}`,
-              "aria-current": selected || void 0,
+              "aria-pressed": selected,
               onClick: onNodeSelect,
               className: "absolute inset-0 rounded-md focus-visible:ring-focus-blue focus-visible:ring-offset-0",
               children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "sr-only", children: title })
@@ -12106,6 +12107,10 @@ var SCENE_H = 342;
 var PLANE_H = 372;
 var PLANE_PAD = 18;
 var PANEL_W = 296;
+var SNAP = 8;
+var MARQUEE_MIN = 4;
+var clampTo = (value, min, max) => Math.min(Math.max(value, min), max);
+var boxesIntersect = (a, b) => a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
 var DEFAULT_NODES = [
   {
     id: "source",
@@ -12218,6 +12223,7 @@ var DEFAULT_SAMPLES = [
     ]
   }
 ];
+var DEFAULT_SELECTION = ["brand"];
 var computeIssues = (nodes, edges) => {
   const issues = [];
   const seenFields = /* @__PURE__ */ new Map();
@@ -12256,6 +12262,7 @@ var computeIssues = (nodes, edges) => {
   });
   return issues;
 };
+var sameIds = (a, b) => a.length === b.length && a.every((id, index) => id === b[index]);
 var PaymentRoutingCanvas = React62.forwardRef(
   ({
     nodes,
@@ -12263,6 +12270,9 @@ var PaymentRoutingCanvas = React62.forwardRef(
     onNodesChange,
     onEdgesChange,
     onNodeSelect,
+    selectedNodeIds,
+    defaultSelectedNodeIds,
+    onSelectionChange,
     sampleTransaction,
     onSimulationStep,
     onValidationChange,
@@ -12273,7 +12283,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
     const graphEdges = edges ?? DEFAULT_EDGES;
     const samples = sampleTransaction ?? DEFAULT_SAMPLES;
     const [localNodes, setLocalNodes] = React62.useState(incomingNodes);
-    const [selectedId, setSelectedId] = React62.useState("brand");
+    const [panelNodeId, setPanelNodeId] = React62.useState("brand");
     const [panelOpen, setPanelOpen] = React62.useState(true);
     const [zoom, setZoom] = React62.useState(1);
     const [fit, setFit] = React62.useState(1);
@@ -12291,15 +12301,42 @@ var PaymentRoutingCanvas = React62.forwardRef(
     const [replaying, setReplaying] = React62.useState(false);
     const [focusedId, setFocusedId] = React62.useState(null);
     const [anchor, setAnchor] = React62.useState({ top: 0, right: 16 });
+    const controlledSelection = selectedNodeIds !== void 0;
+    const [internalSelection, setInternalSelection] = React62.useState(
+      () => defaultSelectedNodeIds ?? DEFAULT_SELECTION
+    );
+    const selection = controlledSelection ? selectedNodeIds : internalSelection;
+    const selectionRef = React62.useRef(selection);
+    selectionRef.current = selection;
+    const onSelectionChangeRef = React62.useRef(onSelectionChange);
+    onSelectionChangeRef.current = onSelectionChange;
+    const [marqueeBox, setMarqueeBox] = React62.useState(null);
+    const [marqueeIds, setMarqueeIds] = React62.useState(null);
+    const marqueeRef = React62.useRef(null);
+    const [modifierHeld, setModifierHeld] = React62.useState(false);
     const rootRef = React62.useRef(null);
     const planeRef = React62.useRef(null);
     const triggerRef = React62.useRef(null);
     const nodeRefs = React62.useRef({});
     const suppressClick = React62.useRef(false);
     const nodeDragActive = React62.useRef(false);
+    const nodesRef = React62.useRef(localNodes);
+    nodesRef.current = localNodes;
     React62.useEffect(() => {
       setLocalNodes(incomingNodes);
     }, [incomingNodes]);
+    React62.useEffect(() => {
+      const syncModifier = (event) => setModifierHeld(Boolean(event.metaKey || event.ctrlKey));
+      const releaseModifier = () => setModifierHeld(false);
+      window.addEventListener("keydown", syncModifier);
+      window.addEventListener("keyup", syncModifier);
+      window.addEventListener("blur", releaseModifier);
+      return () => {
+        window.removeEventListener("keydown", syncModifier);
+        window.removeEventListener("keyup", syncModifier);
+        window.removeEventListener("blur", releaseModifier);
+      };
+    }, []);
     React62.useEffect(() => {
       const plane = planeRef.current;
       if (!plane) return;
@@ -12367,56 +12404,127 @@ var PaymentRoutingCanvas = React62.forwardRef(
       x: node.x + (side === "out" ? NODE_W : 0),
       y: node.y + (node.h ?? NODE_H) / 2
     });
-    const focusedNode = selectedId ? nodeById.get(selectedId) : void 0;
+    const focusedNode = panelNodeId ? nodeById.get(panelNodeId) : void 0;
+    const selectionSet = React62.useMemo(() => new Set(selection), [selection]);
+    const marqueeSet = React62.useMemo(() => new Set(marqueeIds ?? []), [marqueeIds]);
+    const commitSelection = React62.useCallback(
+      (next) => {
+        const unique = next.filter((id, index) => next.indexOf(id) === index);
+        if (sameIds(unique, selectionRef.current)) return;
+        selectionRef.current = unique;
+        if (!controlledSelection) setInternalSelection(unique);
+        onSelectionChangeRef.current?.(unique);
+      },
+      [controlledSelection]
+    );
+    const openNodePanel = (node) => {
+      commitSelection([node.id]);
+      setPanelNodeId(node.id);
+      setPanelOpen(true);
+      onNodeSelect?.(node);
+    };
     const selectNode = (node) => {
       if (suppressClick.current) {
         suppressClick.current = false;
         return;
       }
-      setSelectedId(node.id);
-      setPanelOpen(true);
-      onNodeSelect?.(node);
+      openNodePanel(node);
     };
     const closePanel = () => {
-      const previous = selectedId;
+      const previous = panelNodeId;
       setPanelOpen(false);
-      setSelectedId(null);
+      setPanelNodeId(null);
       onNodeSelect?.(null);
       if (previous) nodeRefs.current[previous]?.querySelector("button")?.focus();
     };
+    const clearSelection = () => {
+      commitSelection([]);
+      if (panelOpen) {
+        setPanelOpen(false);
+        setPanelNodeId(null);
+        onNodeSelect?.(null);
+      }
+    };
+    const nudgeSelection = (key) => {
+      const ids = new Set(selectionRef.current);
+      if (ids.size === 0) return;
+      const dx = key === "ArrowLeft" ? -SNAP : key === "ArrowRight" ? SNAP : 0;
+      const dy = key === "ArrowUp" ? -SNAP : key === "ArrowDown" ? SNAP : 0;
+      if (!dx && !dy) return;
+      const next = nodesRef.current.map(
+        (node) => ids.has(node.id) ? { ...node, x: node.x + dx, y: node.y + dy } : node
+      );
+      setLocalNodes(next);
+      onNodesChange?.(next);
+      onEdgesChange?.(graphEdges);
+    };
     const beginDrag = (event, node) => {
       if (event.button !== 0) return;
       event.stopPropagation();
+      suppressClick.current = false;
       nodeDragActive.current = true;
+      const additive = event.metaKey || event.ctrlKey;
+      const current = selectionRef.current;
+      const isIn = current.includes(node.id);
+      let dragIds;
+      let deselectOnClick = false;
+      let openOnClick = false;
+      if (additive) {
+        if (isIn) {
+          dragIds = current;
+          deselectOnClick = true;
+        } else {
+          dragIds = [...current, node.id];
+          commitSelection(dragIds);
+        }
+      } else if (isIn && current.length > 1) {
+        dragIds = current;
+        openOnClick = true;
+      } else {
+        dragIds = [node.id];
+        if (!(current.length === 1 && current[0] === node.id)) commitSelection([node.id]);
+        openOnClick = true;
+      }
+      const dragged = new Set(dragIds);
+      const origins = /* @__PURE__ */ new Map();
+      nodesRef.current.forEach((item) => {
+        if (dragged.has(item.id)) origins.set(item.id, { x: item.x, y: item.y });
+      });
       const startX = event.clientX;
       const startY = event.clientY;
       const scale2 = fit * zoom || 1;
       let moved = false;
+      let finalNodes = null;
       const move = (moveEvent) => {
-        const dx = (moveEvent.clientX - startX) / scale2;
-        const dy = (moveEvent.clientY - startY) / scale2;
-        if (!moved && Math.abs(dx) + Math.abs(dy) < 4) return;
+        const rawX = (moveEvent.clientX - startX) / scale2;
+        const rawY = (moveEvent.clientY - startY) / scale2;
+        if (!moved && Math.abs(rawX) + Math.abs(rawY) < 4) return;
         moved = true;
-        setLocalNodes(
-          (current) => current.map(
-            (item) => item.id === node.id ? {
-              ...item,
-              x: Math.round((node.x + dx) / 8) * 8,
-              y: Math.round((node.y + dy) / 8) * 8
-            } : item
-          )
-        );
+        const dx = Math.round(rawX / SNAP) * SNAP;
+        const dy = Math.round(rawY / SNAP) * SNAP;
+        const next = nodesRef.current.map((item) => {
+          const origin = origins.get(item.id);
+          return origin ? { ...item, x: origin.x + dx, y: origin.y + dy } : item;
+        });
+        finalNodes = next;
+        setLocalNodes(next);
       };
       const end = () => {
         nodeDragActive.current = false;
         window.removeEventListener("pointermove", move);
-        if (!moved) return;
         suppressClick.current = true;
-        setLocalNodes((current) => {
-          onNodesChange?.(current);
-          onEdgesChange?.(graphEdges);
-          return current;
-        });
+        if (moved) {
+          if (finalNodes) {
+            onNodesChange?.(finalNodes);
+            onEdgesChange?.(graphEdges);
+          }
+          return;
+        }
+        if (deselectOnClick) {
+          commitSelection(selectionRef.current.filter((id) => id !== node.id));
+          return;
+        }
+        if (openOnClick) openNodePanel(node);
       };
       window.addEventListener("pointermove", move);
       window.addEventListener("pointerup", end, { once: true });
@@ -12427,16 +12535,106 @@ var PaymentRoutingCanvas = React62.forwardRef(
       const startX = event.clientX;
       const startY = event.clientY;
       const origin = pan;
+      let moved = false;
       const move = (moveEvent) => {
-        setPan({
-          x: origin.x + (moveEvent.clientX - startX),
-          y: origin.y + (moveEvent.clientY - startY)
-        });
+        const dx = moveEvent.clientX - startX;
+        const dy = moveEvent.clientY - startY;
+        if (!moved && Math.abs(dx) + Math.abs(dy) < 4) return;
+        moved = true;
+        setPan({ x: origin.x + dx, y: origin.y + dy });
+      };
+      const end = () => {
+        window.removeEventListener("pointermove", move);
+        if (!moved) clearSelection();
       };
-      const end = () => window.removeEventListener("pointermove", move);
       window.addEventListener("pointermove", move);
       window.addEventListener("pointerup", end, { once: true });
     };
+    const beginMarquee = (event) => {
+      if (event.button !== 0) return;
+      if (nodeDragActive.current) return;
+      const plane = planeRef.current;
+      if (!plane) return;
+      const box = plane.getBoundingClientRect();
+      if (!box.width || !box.height) return;
+      const gestureScale = fit * zoom || 1;
+      const originX = clampTo(event.clientX - box.left, 0, box.width);
+      const originY = clampTo(event.clientY - box.top, 0, box.height);
+      const gesture = {
+        originX,
+        originY,
+        box: { left: box.left, top: box.top, width: box.width, height: box.height },
+        offsetX: PLANE_PAD + pan.x,
+        offsetY: Math.max((planeHeight - SCENE_H * gestureScale) / 2, 0) + pan.y,
+        scale: gestureScale,
+        base: selectionRef.current,
+        rect: { x: originX, y: originY, w: 0, h: 0 }
+      };
+      marqueeRef.current = gesture;
+      setMarqueeBox(gesture.rect);
+      setMarqueeIds([]);
+      const hitsFor = (rect) => {
+        const scene = {
+          x: (rect.x - gesture.offsetX) / gesture.scale,
+          y: (rect.y - gesture.offsetY) / gesture.scale,
+          w: rect.w / gesture.scale,
+          h: rect.h / gesture.scale
+        };
+        return nodesRef.current.filter(
+          (node) => boxesIntersect(scene, {
+            x: node.x,
+            y: node.y,
+            w: NODE_W,
+            h: node.h ?? NODE_H
+          })
+        ).map((node) => node.id);
+      };
+      const cleanup = () => {
+        window.removeEventListener("pointermove", move);
+        window.removeEventListener("pointerup", end);
+        window.removeEventListener("pointercancel", cancel);
+        window.removeEventListener("keydown", onKeyDown);
+      };
+      const settle = () => {
+        cleanup();
+        marqueeRef.current = null;
+        setMarqueeBox(null);
+        setMarqueeIds(null);
+      };
+      function cancel() {
+        settle();
+      }
+      function onKeyDown(keyEvent) {
+        if (keyEvent.key !== "Escape") return;
+        keyEvent.preventDefault();
+        cancel();
+      }
+      function move(moveEvent) {
+        const x = clampTo(moveEvent.clientX - gesture.box.left, 0, gesture.box.width);
+        const y = clampTo(moveEvent.clientY - gesture.box.top, 0, gesture.box.height);
+        const rect = {
+          x: Math.min(gesture.originX, x),
+          y: Math.min(gesture.originY, y),
+          w: Math.abs(x - gesture.originX),
+          h: Math.abs(y - gesture.originY)
+        };
+        gesture.rect = rect;
+        setMarqueeBox(rect);
+        setMarqueeIds(hitsFor(rect));
+      }
+      function end() {
+        const rect = gesture.rect;
+        settle();
+        if (Math.max(rect.w, rect.h) < MARQUEE_MIN) return;
+        const hits = hitsFor(rect);
+        if (hits.length === 0) return;
+        commitSelection([...gesture.base, ...hits]);
+      }
+      window.addEventListener("pointermove", move);
+      window.addEventListener("pointerup", end);
+      window.addEventListener("pointercancel", cancel);
+      window.addEventListener("keydown", onKeyDown);
+    };
     const moveFocus = (node, key) => {
       const column = localNodes.filter((item) => Math.abs(item.x - node.x) < 1).sort((a, b) => a.y - b.y);
       let target;
@@ -12461,7 +12659,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
       y: Math.min(Math.max(node.y / SCENE_H * 100 + 2, 2), 82),
       w: 21,
       h: 18,
-      highlighted: node.id === selectedId || traversed.has(node.id)
+      highlighted: selectionSet.has(node.id) || traversed.has(node.id)
     }));
     const issueByNode = (nodeId) => issues.filter((issue) => issue.nodeId === nodeId);
     const currentStep = steps[stepIndex];
@@ -12553,12 +12751,30 @@ var PaymentRoutingCanvas = React62.forwardRef(
                   ref: planeRef,
                   role: "application",
                   "aria-label": "Payment routing graph",
+                  "aria-describedby": "routing-selection-status",
                   tabIndex: 0,
-                  onPointerDown: beginPan,
+                  onPointerDown: (event) => {
+                    if (event.metaKey || event.ctrlKey) beginMarquee(event);
+                    else beginPan(event);
+                  },
                   onKeyDown: (event) => {
+                    const modifier = event.metaKey || event.ctrlKey;
+                    if (modifier && (event.key === "a" || event.key === "A")) {
+                      event.preventDefault();
+                      commitSelection(localNodes.map((item) => item.id));
+                      return;
+                    }
                     if (event.key === "Escape") {
+                      event.preventDefault();
+                      if (marqueeRef.current) return;
                       setIssuesOpen(false);
-                      if (panelOpen) closePanel();
+                      clearSelection();
+                      return;
+                    }
+                    if (event.shiftKey && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+                      event.preventDefault();
+                      nudgeSelection(event.key);
+                      return;
                     }
                     if (event.key === "+" || event.key === "=") {
                       setZoom((current) => Math.min(current + 0.1, 1.6));
@@ -12572,7 +12788,9 @@ var PaymentRoutingCanvas = React62.forwardRef(
                     }
                   },
                   className: cn54(
-                    "relative min-h-0 min-w-0 flex-1 cursor-grab overflow-hidden bg-canvas",
+                    "relative min-h-0 min-w-0 flex-1 overflow-hidden bg-canvas",
+                    // Held Cmd / Ctrl over the background means "drag to select".
+                    modifierHeld || marqueeBox ? "cursor-crosshair" : "cursor-grab",
                     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-blue focus-visible:ring-inset"
                   ),
                   style: {
@@ -12583,6 +12801,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
                     backgroundSize: "16px 16px"
                   },
                   children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { id: "routing-selection-status", role: "status", "aria-live": "polite", className: "sr-only", children: selection.length === 0 ? "No nodes selected" : `${selection.length} node${selection.length === 1 ? "" : "s"} selected` }),
                     /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
                       "div",
                       {
@@ -12627,6 +12846,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
                               (issue) => issue.kind === "no-fallback"
                             );
                             const active = traversed.has(node.id);
+                            const isSelected = selectionSet.has(node.id) || marqueeSet.has(node.id);
                             return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                               "div",
                               {
@@ -12644,31 +12864,35 @@ var PaymentRoutingCanvas = React62.forwardRef(
                                     metric: node.metric,
                                     trailing: node.trailing,
                                     icon: node.icon,
-                                    selected: selectedId === node.id,
+                                    selected: isSelected,
                                     active: active && !unreachable,
                                     unreachable,
                                     noFallback,
                                     conflict: conflict ? "Conflicts with Priority 2" : void 0,
                                     disabled: node.disabled,
-                                    showHint: focusedId === node.id && selectedId === node.id,
-                                    ariaLabel: `${node.type}, ${node.title}${node.metric ? `, ${node.metric}` : ""}${unreachable ? ", unreachable" : ""}`,
+                                    showHint: focusedId === node.id && isSelected,
+                                    ariaLabel: `${node.type}, ${node.title}${node.metric ? `, ${node.metric}` : ""}${isSelected ? ", selected" : ""}${unreachable ? ", unreachable" : ""}`,
                                     onNodeSelect: () => selectNode(node),
                                     onFocus: () => setFocusedId(node.id),
                                     onKeyDown: (event) => {
+                                      if (event.shiftKey && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+                                        return;
+                                      }
                                       if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight") {
                                         event.preventDefault();
                                         moveFocus(node, event.key);
+                                        return;
                                       }
-                                      if (event.key === "Enter" || event.key === " ") {
+                                      if (event.key === " " || event.shiftKey && event.key === "Enter") {
                                         event.preventDefault();
-                                        setSelectedId(node.id);
-                                        setPanelOpen(true);
-                                        onNodeSelect?.(node);
+                                        commitSelection(
+                                          selectionRef.current.includes(node.id) ? selectionRef.current.filter((id) => id !== node.id) : [...selectionRef.current, node.id]
+                                        );
+                                        return;
                                       }
-                                      if (event.key === "Escape") {
+                                      if (event.key === "Enter") {
                                         event.preventDefault();
-                                        setIssuesOpen(false);
-                                        if (panelOpen) closePanel();
+                                        openNodePanel(node);
                                       }
                                     }
                                   }
@@ -12680,6 +12904,25 @@ var PaymentRoutingCanvas = React62.forwardRef(
                         ]
                       }
                     ),
+                    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        "data-state": marqueeBox ? "active" : "idle",
+                        className: cn54(
+                          "pointer-events-none absolute rounded-xs border border-dashed border-primary bg-primary/10",
+                          "transition-opacity duration-150 ease-out",
+                          marqueeBox ? "opacity-100" : "opacity-0"
+                        ),
+                        style: {
+                          left: marqueeBox?.x ?? 0,
+                          top: marqueeBox?.y ?? 0,
+                          width: marqueeBox?.w ?? 0,
+                          height: marqueeBox?.h ?? 0,
+                          zIndex: "var(--z-sticky, 1100)"
+                        }
+                      }
+                    ),
                     /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ol", { className: "sr-only", children: graphEdges.map((edge) => {
                       const from = nodeById.get(edge.from);
                       const to = nodeById.get(edge.to);
@@ -12704,8 +12947,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
                       onJump: (id) => {
                         const target = localNodes.find((node) => node.title === id);
                         if (!target) return;
-                        setSelectedId(target.id);
-                        setPanelOpen(true);
+                        openNodePanel(target);
                         setPan({ x: PLANE_PAD - target.x, y: -target.y });
                       }
                     }