@designa8/vibedesign-stripe-deepseek-85ea 0.1.3 → 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.3**.
+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

@@ -12108,6 +12108,9 @@ 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",
@@ -12307,6 +12310,10 @@ var PaymentRoutingCanvas = React62.forwardRef(
     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);
@@ -12318,6 +12325,18 @@ var PaymentRoutingCanvas = React62.forwardRef(
     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;
@@ -12387,6 +12406,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
     });
     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);
@@ -12530,6 +12550,91 @@ var PaymentRoutingCanvas = React62.forwardRef(
       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;
@@ -12648,7 +12753,10 @@ var PaymentRoutingCanvas = React62.forwardRef(
                   "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")) {
@@ -12658,6 +12766,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
                     }
                     if (event.key === "Escape") {
                       event.preventDefault();
+                      if (marqueeRef.current) return;
                       setIssuesOpen(false);
                       clearSelection();
                       return;
@@ -12679,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: {
@@ -12735,7 +12846,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
                               (issue) => issue.kind === "no-fallback"
                             );
                             const active = traversed.has(node.id);
-                            const isSelected = selectionSet.has(node.id);
+                            const isSelected = selectionSet.has(node.id) || marqueeSet.has(node.id);
                             return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
                               "div",
                               {
@@ -12793,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);

package/dist/index.js

@@ -11972,6 +11972,9 @@ 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",
@@ -12171,6 +12174,10 @@ var PaymentRoutingCanvas = React62.forwardRef(
     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);
@@ -12182,6 +12189,18 @@ var PaymentRoutingCanvas = React62.forwardRef(
     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;
@@ -12251,6 +12270,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
     });
     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);
@@ -12394,6 +12414,91 @@ var PaymentRoutingCanvas = React62.forwardRef(
       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;
@@ -12512,7 +12617,10 @@ var PaymentRoutingCanvas = React62.forwardRef(
                   "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")) {
@@ -12522,6 +12630,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
                     }
                     if (event.key === "Escape") {
                       event.preventDefault();
+                      if (marqueeRef.current) return;
                       setIssuesOpen(false);
                       clearSelection();
                       return;
@@ -12543,7 +12652,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: {
@@ -12599,7 +12710,7 @@ var PaymentRoutingCanvas = React62.forwardRef(
                               (issue) => issue.kind === "no-fallback"
                             );
                             const active = traversed.has(node.id);
-                            const isSelected = selectionSet.has(node.id);
+                            const isSelected = selectionSet.has(node.id) || marqueeSet.has(node.id);
                             return /* @__PURE__ */ jsx62(
                               "div",
                               {
@@ -12657,6 +12768,25 @@ var PaymentRoutingCanvas = React62.forwardRef(
                         ]
                       }
                     ),
+                    /* @__PURE__ */ jsx62(
+                      "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__ */ jsx62("ol", { className: "sr-only", children: graphEdges.map((edge) => {
                       const from = nodeById.get(edge.from);
                       const to = nodeById.get(edge.to);

package/dist/styles.css

@@ -1183,6 +1183,9 @@
   .animate-spin {
     animation: var(--animate-spin);
   }
+  .cursor-crosshair {
+    cursor: crosshair;
+  }
   .cursor-default {
     cursor: default;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designa8/vibedesign-stripe-deepseek-85ea",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Complete design system \"My Project stripe-deepseek\" generated by Atoms Design.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/atoms/PaymentRoutingCanvas/PaymentRoutingCanvas.tsx

@@ -29,6 +29,42 @@ const PLANE_PAD = 18;
 const PANEL_W = 296;
 /** Drag and keyboard nudge both land on this grid. */
 const SNAP = 8;
+/** A rubber-band narrower than this on both axes is a background click. */
+const MARQUEE_MIN = 4;
+
+/** A rectangle in whatever space the caller is working in. */
+interface Box {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+const clampTo = (value: number, min: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
+const boxesIntersect = (a: Box, b: Box) =>
+  a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+
+/**
+ * One rubber-band gesture. The plane transform is captured at pointer-down so
+ * the screen-space rectangle can be mapped back into scene coordinates at any
+ * zoom / pan level without re-reading layout mid-drag.
+ */
+interface MarqueeGesture {
+  /** Pointer-down point, in plane-local screen coordinates. */
+  originX: number;
+  originY: number;
+  box: { left: number; top: number; width: number; height: number };
+  /** Plane-local x of the scene origin. */
+  offsetX: number;
+  /** Plane-local y of the scene origin. */
+  offsetY: number;
+  scale: number;
+  /** Selection the marquee is added to on release. */
+  base: string[];
+  rect: Box;
+}
 
 export interface CanvasNode {
   id: string;
@@ -334,6 +370,14 @@ export const PaymentRoutingCanvas = React.forwardRef<
     const onSelectionChangeRef = React.useRef(onSelectionChange);
     onSelectionChangeRef.current = onSelectionChange;
 
+    /** The rubber-band rectangle, in plane-local screen coordinates. */
+    const [marqueeBox, setMarqueeBox] = React.useState<Box | null>(null);
+    /** Live preview of what the rubber-band currently covers. */
+    const [marqueeIds, setMarqueeIds] = React.useState<string[] | null>(null);
+    const marqueeRef = React.useRef<MarqueeGesture | null>(null);
+    /** True while Cmd / Ctrl is held, so the plane can show a crosshair. */
+    const [modifierHeld, setModifierHeld] = React.useState(false);
+
     const rootRef = React.useRef<HTMLDivElement>(null);
     const planeRef = React.useRef<HTMLDivElement>(null);
     const triggerRef = React.useRef<HTMLButtonElement>(null);
@@ -348,6 +392,20 @@ export const PaymentRoutingCanvas = React.forwardRef<
       setLocalNodes(incomingNodes);
     }, [incomingNodes]);
 
+    React.useEffect(() => {
+      const syncModifier = (event: KeyboardEvent) =>
+        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);
+      };
+    }, []);
+
     React.useEffect(() => {
       const plane = planeRef.current;
       if (!plane) return;
@@ -428,6 +486,8 @@ export const PaymentRoutingCanvas = React.forwardRef<
 
     const focusedNode = panelNodeId ? nodeById.get(panelNodeId) : undefined;
     const selectionSet = React.useMemo(() => new Set(selection), [selection]);
+    /** Nodes under the rubber-band preview as selected before the release. */
+    const marqueeSet = React.useMemo(() => new Set(marqueeIds ?? []), [marqueeIds]);
 
     /** Single funnel for selection writes — keeps the controlled path honest. */
     const commitSelection = React.useCallback(
@@ -606,6 +666,118 @@ export const PaymentRoutingCanvas = React.forwardRef<
       window.addEventListener("pointerup", end, { once: true });
     };
 
+    /**
+     * Rubber-band selection. Cmd (macOS) / Ctrl elsewhere plus a pointer-down on
+     * empty plane background draws a rectangle instead of panning. The gesture
+     * tracks through window listeners so it keeps following the pointer outside
+     * the plane, with the drawn rectangle clamped to the plane bounds.
+     */
+    const beginMarquee = (event: React.PointerEvent) => {
+      if (event.button !== 0) return;
+      // A node gesture owns the pointer — never start a marquee over it.
+      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: MarqueeGesture = {
+        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([]);
+
+      /** Screen-space rectangle → the scene-space ids whose card box it covers. */
+      const hitsFor = (rect: Box) => {
+        const scene: Box = {
+          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() {
+        // Escape abandons the gesture. Nothing was committed during the drag, so
+        // the selection from before the marquee is still in place.
+        settle();
+      }
+
+      function onKeyDown(keyEvent: KeyboardEvent) {
+        if (keyEvent.key !== "Escape") return;
+        keyEvent.preventDefault();
+        cancel();
+      }
+
+      function move(moveEvent: PointerEvent) {
+        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: Box = {
+          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();
+        // Too small to be a marquee — treat it as a click on the background and
+        // leave the selection exactly as it was.
+        if (Math.max(rect.w, rect.h) < MARQUEE_MIN) return;
+        const hits = hitsFor(rect);
+        if (hits.length === 0) return;
+        // Cmd / Ctrl marquee is additive: extend what was already selected.
+        commitSelection([...gesture.base, ...hits]);
+      }
+
+      window.addEventListener("pointermove", move);
+      window.addEventListener("pointerup", end);
+      window.addEventListener("pointercancel", cancel);
+      window.addEventListener("keydown", onKeyDown);
+    };
+
     const moveFocus = (node: CanvasNode, key: string) => {
       const column = localNodes
         .filter((item) => Math.abs(item.x - node.x) < 1)
@@ -733,7 +905,12 @@ export const PaymentRoutingCanvas = React.forwardRef<
               aria-label="Payment routing graph"
               aria-describedby="routing-selection-status"
               tabIndex={0}
-              onPointerDown={beginPan}
+              onPointerDown={(event) => {
+                // Cmd / Ctrl on empty background draws a rubber band; a plain
+                // drag keeps panning the plane.
+                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")) {
@@ -743,6 +920,9 @@ export const PaymentRoutingCanvas = React.forwardRef<
                 }
                 if (event.key === "Escape") {
                   event.preventDefault();
+                  // A live marquee cancels itself and restores the selection it
+                  // started from — do not also clear the selection here.
+                  if (marqueeRef.current) return;
                   setIssuesOpen(false);
                   clearSelection();
                   return;
@@ -770,7 +950,9 @@ export const PaymentRoutingCanvas = React.forwardRef<
                 }
               }}
               className={cn(
-                "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={{
@@ -840,7 +1022,7 @@ export const PaymentRoutingCanvas = React.forwardRef<
                     (issue) => issue.kind === "no-fallback",
                   );
                   const active = traversed.has(node.id);
-                  const isSelected = selectionSet.has(node.id);
+                  const isSelected = selectionSet.has(node.id) || marqueeSet.has(node.id);
 
                   return (
                     <div
@@ -912,6 +1094,24 @@ export const PaymentRoutingCanvas = React.forwardRef<
                 })}
               </div>
 
+              {/* Rubber band — screen space, above the edges and the cards. */}
+              <div
+                aria-hidden="true"
+                data-state={marqueeBox ? "active" : "idle"}
+                className={cn(
+                  "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)",
+                }}
+              />
+
               <ol className="sr-only">
                 {graphEdges.map((edge) => {
                   const from = nodeById.get(edge.from);

package/src/atoms/PaymentRoutingCanvas/preview.tsx

@@ -21,6 +21,11 @@ export default function Preview() {
           node moves the whole group. Cmd/Ctrl + A selects every node, Shift + arrows
           nudge the selection, and Escape or a click on empty canvas clears it.
         </p>
+        <p className="text-caption text-muted">
+          Hold Cmd (macOS) or Ctrl, then drag from empty background to draw a
+          selection rectangle — every card it touches is added to the selection on
+          release. Escape during the drag cancels it.
+        </p>
       </div>
 
       <PaymentRoutingCanvas