@designa8/vibedesign-stripe-deepseek-85ea 0.1.1 → 0.1.3

package/README.md

@@ -1,6 +1,6 @@
 # @designa8/vibedesign-stripe-deepseek-85ea
 
-Complete design system generated by Atoms Design, version **0.1.1**.
+Complete design system generated by Atoms Design, version **0.1.3**.
 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,7 @@ var SCENE_H = 342;
 var PLANE_H = 372;
 var PLANE_PAD = 18;
 var PANEL_W = 296;
+var SNAP = 8;
 var DEFAULT_NODES = [
   {
     id: "source",
@@ -12218,6 +12220,7 @@ var DEFAULT_SAMPLES = [
     ]
   }
 ];
+var DEFAULT_SELECTION = ["brand"];
 var computeIssues = (nodes, edges) => {
   const issues = [];
   const seenFields = /* @__PURE__ */ new Map();
@@ -12256,6 +12259,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 +12267,9 @@ var PaymentRoutingCanvas = React62.forwardRef(
     onNodesChange,
     onEdgesChange,
     onNodeSelect,
+    selectedNodeIds,
+    defaultSelectedNodeIds,
+    onSelectionChange,
     sampleTransaction,
     onSimulationStep,
     onValidationChange,
@@ -12273,7 +12280,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,11 +12298,23 @@ 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 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]);
@@ -12366,69 +12385,148 @@ 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 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 });
     };
     const beginPan = (event) => {
       if (event.button !== 0) return;
+      if (nodeDragActive.current) return;
       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 });
     };
@@ -12456,7 +12554,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];
@@ -12548,12 +12646,26 @@ var PaymentRoutingCanvas = React62.forwardRef(
                   ref: planeRef,
                   role: "application",
                   "aria-label": "Payment routing graph",
+                  "aria-describedby": "routing-selection-status",
                   tabIndex: 0,
                   onPointerDown: beginPan,
                   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();
                       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));
@@ -12578,6 +12690,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",
                       {
@@ -12622,6 +12735,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
                               (issue) => issue.kind === "no-fallback"
                             );
                             const active = traversed.has(node.id);
+                            const isSelected = selectionSet.has(node.id);
                             return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                               "div",
                               {
@@ -12639,31 +12753,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);
                                       }
                                     }
                                   }
@@ -12699,8 +12817,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 });
                       }
                     }