@genfeedai/workflow-ui 0.2.2 → 0.2.4

package/dist/{chunk-4VEN4UN7.mjs → chunk-53XDE62A.mjs}

@@ -1,25 +1,31 @@
-import { nodeTypes, NodeDetailModal } from './chunk-WBR34V4L.mjs';
-import { calculateWorkflowCost, formatCost } from './chunk-2JQSKIWR.mjs';
-import { useContextMenu, useCanvasKeyboardShortcuts, ContextMenu } from './chunk-ZD2BADZO.mjs';
-import { useUIStore, useSettingsStore, useExecutionStore } from './chunk-LT3ZJJL6.mjs';
-import { useWorkflowStore, getHandleType } from './chunk-R727OFBR.mjs';
+import { useContextMenu, useCanvasKeyboardShortcuts, ContextMenu } from './chunk-ORVDYXDP.mjs';
+import { calculateWorkflowCost, formatCost } from './chunk-MGLAKMDP.mjs';
+import { nodeTypes, NodeDetailModal } from './chunk-2FUPL67V.mjs';
+import { useUIStore, useSettingsStore, useExecutionStore } from './chunk-OJWVEEMM.mjs';
+import { useWorkflowStore, getHandleType } from './chunk-GPYIIWD5.mjs';
+import { CONNECTION_RULES, getNodesByCategory, NODE_DEFINITIONS } from '@genfeedai/types';
 import { useReactFlow, getBezierPath, BaseEdge, useNodes, ViewportPortal, useViewport, useStore, ReactFlow, SelectionMode, ConnectionMode, Background, BackgroundVariant, Controls, MiniMap } from '@xyflow/react';
-import { Plus, Search, Pause, Play, Trash2, AlignHorizontalSpaceAround, AlignVerticalSpaceAround, Grid3X3, Ungroup, Group, Palette, Lock, Unlock, X, Keyboard, PanelLeft, XCircle, AlertTriangle, CheckCircle, Info, Check, Copy, DollarSign } from 'lucide-react';
+import { Plus, Search, Play, Pause, Trash2, AlignHorizontalSpaceAround, AlignVerticalSpaceAround, Grid3X3, Ungroup, Group, Palette, Lock, Unlock, X, Keyboard, PanelLeft, AlertTriangle, CheckCircle, Info, XCircle, Check, Copy, DollarSign } from 'lucide-react';
 import { memo, useState, useRef, useMemo, useEffect, useCallback } from 'react';
-import '@xyflow/react/dist/style.css';
-import { CONNECTION_RULES, getNodesByCategory, NODE_DEFINITIONS } from '@genfeedai/types';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
+import '@xyflow/react/dist/style.css';
 import { createPortal } from 'react-dom';
 
 var CATEGORY_LABELS = {
-  input: "Input",
   ai: "AI",
-  processing: "Processing",
+  composition: "Composition",
+  input: "Input",
   output: "Output",
-  composition: "Composition"
+  processing: "Processing"
 };
-var CATEGORY_ORDER = ["input", "ai", "processing", "output", "composition"];
+var CATEGORY_ORDER = [
+  "input",
+  "ai",
+  "processing",
+  "output",
+  "composition"
+];
 function ConnectionDropMenuComponent() {
   const { connectionDropMenu, closeConnectionDropMenu } = useUIStore();
   const { addNode, findCompatibleHandle, onConnect } = useWorkflowStore();
@@ -44,9 +50,9 @@ function ConnectionDropMenuComponent() {
         );
         if (hasCompatibleInput) {
           result.push({
-            type: def.type,
+            category,
             label: def.label,
-            category
+            type: def.type
           });
         }
       }
@@ -108,13 +114,22 @@ function ConnectionDropMenuComponent() {
       }
       closeConnectionDropMenu();
     },
-    [connectionDropMenu, reactFlow, addNode, findCompatibleHandle, onConnect, closeConnectionDropMenu]
+    [
+      connectionDropMenu,
+      reactFlow,
+      addNode,
+      findCompatibleHandle,
+      onConnect,
+      closeConnectionDropMenu
+    ]
   );
   const handleKeyDown = useCallback(
     (e) => {
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setSelectedIndex((prev) => Math.min(prev + 1, filteredNodes.length - 1));
+        setSelectedIndex(
+          (prev) => Math.min(prev + 1, filteredNodes.length - 1)
+        );
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         setSelectedIndex((prev) => Math.max(prev - 1, 0));
@@ -135,81 +150,152 @@ function ConnectionDropMenuComponent() {
   };
   if (!isOpen || !connectionDropMenu) return null;
   const menuStyle = {
-    position: "fixed",
     left: connectionDropMenu.screenPosition.x,
+    position: "fixed",
     top: connectionDropMenu.screenPosition.y,
     zIndex: 50
   };
   let flatIndex = 0;
-  return /* @__PURE__ */ jsx("div", { ref: backdropRef, className: "fixed inset-0 z-40", onClick: handleBackdropClick, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      style: menuStyle,
-      className: "bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-xl w-64 max-h-80 flex flex-col",
-      role: "dialog",
-      "aria-label": "Add Node",
+      ref: backdropRef,
+      className: "fixed inset-0 z-40",
+      onClick: handleBackdropClick,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: menuStyle,
+          className: "bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-xl w-64 max-h-80 flex flex-col",
+          role: "dialog",
+          "aria-label": "Add Node",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-[var(--border)]", children: [
+              /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5 text-[var(--muted-foreground)]" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: "Add Connected Node" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "px-3 py-2", onKeyDown: handleKeyDown, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[var(--muted-foreground)]" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "text",
+                  placeholder: "Search compatible nodes...",
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value),
+                  className: "w-full pl-7 pr-2 py-1.5 text-xs bg-[var(--secondary)] border border-[var(--border)] rounded-md outline-none focus:ring-1 focus:ring-[var(--ring)]"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: listRef,
+                className: "flex-1 overflow-y-auto px-1.5 pb-1.5",
+                onKeyDown: handleKeyDown,
+                children: filteredNodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-[var(--muted-foreground)] text-xs py-4", children: "No compatible nodes found" }) : Object.entries(groupedNodes).map(([category, nodes]) => {
+                  if (!nodes || nodes.length === 0) return null;
+                  return /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold text-[var(--muted-foreground)] uppercase tracking-wider px-2 py-1", children: CATEGORY_LABELS[category] }),
+                    nodes.map((node) => {
+                      const currentIndex = flatIndex++;
+                      return /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          "data-node-item": true,
+                          onClick: () => handleSelect(node.type),
+                          className: `w-full text-left px-2 py-1.5 rounded text-xs transition-colors ${currentIndex === selectedIndex ? "bg-[var(--primary)]/10 text-[var(--foreground)]" : "text-[var(--foreground)] hover:bg-[var(--secondary)]"}`,
+                          children: node.label
+                        },
+                        node.type
+                      );
+                    })
+                  ] }, category);
+                })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var ConnectionDropMenu = memo(ConnectionDropMenuComponent);
+function EdgeToolbarComponent() {
+  const { selectedEdgeId, selectEdge } = useUIStore();
+  const { edges, toggleEdgePause, removeEdge } = useWorkflowStore();
+  const reactFlow = useReactFlow();
+  const selectedEdge = useMemo(
+    () => selectedEdgeId ? edges.find((e) => e.id === selectedEdgeId) : null,
+    [selectedEdgeId, edges]
+  );
+  const position = useMemo(() => {
+    if (!selectedEdge) return null;
+    const sourceNode = reactFlow.getNode(selectedEdge.source);
+    const targetNode = reactFlow.getNode(selectedEdge.target);
+    if (!sourceNode || !targetNode) return null;
+    const midX = (sourceNode.position.x + (sourceNode.measured?.width ?? 280) / 2 + (targetNode.position.x + (targetNode.measured?.width ?? 280) / 2)) / 2;
+    const midY = (sourceNode.position.y + (sourceNode.measured?.height ?? 200) / 2 + (targetNode.position.y + (targetNode.measured?.height ?? 200) / 2)) / 2;
+    return reactFlow.flowToScreenPosition({ x: midX, y: midY });
+  }, [selectedEdge, reactFlow]);
+  if (!selectedEdge || !position) return null;
+  const hasPause = selectedEdge.data?.hasPause === true;
+  const handleTogglePause = (e) => {
+    e.stopPropagation();
+    toggleEdgePause(selectedEdge.id);
+  };
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    removeEdge(selectedEdge.id);
+    selectEdge(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed z-30 flex items-center gap-1 bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-lg px-1.5 py-1",
+      style: {
+        left: position.x,
+        top: position.y - 40,
+        transform: "translateX(-50%)"
+      },
+      onMouseDown: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-[var(--border)]", children: [
-          /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5 text-[var(--muted-foreground)]" }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: "Add Connected Node" })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "px-3 py-2", onKeyDown: handleKeyDown, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[var(--muted-foreground)]" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "text",
-              placeholder: "Search compatible nodes...",
-              value: search,
-              onChange: (e) => setSearch(e.target.value),
-              className: "w-full pl-7 pr-2 py-1.5 text-xs bg-[var(--secondary)] border border-[var(--border)] rounded-md outline-none focus:ring-1 focus:ring-[var(--ring)]"
-            }
-          )
-        ] }) }),
         /* @__PURE__ */ jsx(
-          "div",
+          "button",
           {
-            ref: listRef,
-            className: "flex-1 overflow-y-auto px-1.5 pb-1.5",
-            onKeyDown: handleKeyDown,
-            children: filteredNodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-[var(--muted-foreground)] text-xs py-4", children: "No compatible nodes found" }) : Object.entries(groupedNodes).map(([category, nodes]) => {
-              if (!nodes || nodes.length === 0) return null;
-              return /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
-                /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold text-[var(--muted-foreground)] uppercase tracking-wider px-2 py-1", children: CATEGORY_LABELS[category] }),
-                nodes.map((node) => {
-                  const currentIndex = flatIndex++;
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      "data-node-item": true,
-                      onClick: () => handleSelect(node.type),
-                      className: `w-full text-left px-2 py-1.5 rounded text-xs transition-colors ${currentIndex === selectedIndex ? "bg-[var(--primary)]/10 text-[var(--foreground)]" : "text-[var(--foreground)] hover:bg-[var(--secondary)]"}`,
-                      children: node.label
-                    },
-                    node.type
-                  );
-                })
-              ] }, category);
-            })
+            onClick: handleTogglePause,
+            title: hasPause ? "Resume edge" : "Pause edge",
+            className: "flex h-7 w-7 items-center justify-center rounded text-[var(--muted-foreground)] transition hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+            children: hasPause ? /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Pause, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-[var(--border)]" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleDelete,
+            title: "Delete edge",
+            className: "flex h-7 w-7 items-center justify-center rounded text-[var(--muted-foreground)] transition hover:bg-red-500/10 hover:text-red-500",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
           }
         )
       ]
     }
-  ) });
+  );
 }
-var ConnectionDropMenu = memo(ConnectionDropMenuComponent);
+var EdgeToolbar = memo(EdgeToolbarComponent);
 var DATA_TYPE_COLORS = {
+  audio: ["#f97316", "#fb923c"],
+  // orange
   image: ["#3b82f6", "#60a5fa"],
   // blue
-  video: ["#8b5cf6", "#a78bfa"],
-  // purple
+  number: ["#6b7280", "#9ca3af"],
+  // gray
   text: ["#22c55e", "#4ade80"],
   // green
-  audio: ["#f97316", "#fb923c"],
-  // orange
-  number: ["#6b7280", "#9ca3af"]
-  // gray
+  video: ["#8b5cf6", "#a78bfa"]
+  // purple
 };
 var DEFAULT_COLORS = ["#6b7280", "#9ca3af"];
 function EditableEdgeComponent({
@@ -226,12 +312,12 @@ function EditableEdgeComponent({
   selected
 }) {
   const [edgePath, labelX, labelY] = getBezierPath({
+    sourcePosition,
     sourceX,
     sourceY,
-    sourcePosition,
+    targetPosition,
     targetX,
-    targetY,
-    targetPosition
+    targetY
   });
   const hasPause = data?.hasPause === true;
   const dataType = data?.dataType ?? null;
@@ -298,201 +384,48 @@ function EditableEdgeComponent({
   ] });
 }
 var EditableEdge = memo(EditableEdgeComponent);
-function EdgeToolbarComponent() {
-  const { selectedEdgeId, selectEdge } = useUIStore();
-  const { edges, toggleEdgePause, removeEdge } = useWorkflowStore();
-  const reactFlow = useReactFlow();
-  const selectedEdge = useMemo(
-    () => selectedEdgeId ? edges.find((e) => e.id === selectedEdgeId) : null,
-    [selectedEdgeId, edges]
-  );
-  const position = useMemo(() => {
-    if (!selectedEdge) return null;
-    const sourceNode = reactFlow.getNode(selectedEdge.source);
-    const targetNode = reactFlow.getNode(selectedEdge.target);
-    if (!sourceNode || !targetNode) return null;
-    const midX = (sourceNode.position.x + (sourceNode.measured?.width ?? 280) / 2 + (targetNode.position.x + (targetNode.measured?.width ?? 280) / 2)) / 2;
-    const midY = (sourceNode.position.y + (sourceNode.measured?.height ?? 200) / 2 + (targetNode.position.y + (targetNode.measured?.height ?? 200) / 2)) / 2;
-    return reactFlow.flowToScreenPosition({ x: midX, y: midY });
-  }, [selectedEdge, reactFlow]);
-  if (!selectedEdge || !position) return null;
-  const hasPause = selectedEdge.data?.hasPause === true;
-  const handleTogglePause = (e) => {
-    e.stopPropagation();
-    toggleEdgePause(selectedEdge.id);
-  };
-  const handleDelete = (e) => {
-    e.stopPropagation();
-    removeEdge(selectedEdge.id);
-    selectEdge(null);
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "fixed z-30 flex items-center gap-1 bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-lg px-1.5 py-1",
-      style: {
-        left: position.x,
-        top: position.y - 40,
-        transform: "translateX(-50%)"
-      },
-      onMouseDown: (e) => e.stopPropagation(),
-      children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleTogglePause,
-            title: hasPause ? "Resume edge" : "Pause edge",
-            className: "flex h-7 w-7 items-center justify-center rounded text-[var(--muted-foreground)] transition hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
-            children: hasPause ? /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Pause, { className: "h-3.5 w-3.5" })
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-[var(--border)]" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleDelete,
-            title: "Delete edge",
-            className: "flex h-7 w-7 items-center justify-center rounded text-[var(--muted-foreground)] transition hover:bg-red-500/10 hover:text-red-500",
-            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
-          }
-        )
-      ]
-    }
-  );
-}
-var EdgeToolbar = memo(EdgeToolbarComponent);
-var REFERENCE_COLOR = "#52525b";
-function ReferenceEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  style,
-  markerEnd,
-  source,
-  target
-}) {
-  const nodes = useWorkflowStore((state) => state.nodes);
-  const isConnectedToSelection = useMemo(() => {
-    const selectedNodes = nodes.filter((n) => n.selected);
-    if (selectedNodes.length === 0) return false;
-    return selectedNodes.some((n) => n.id === source || n.id === target);
-  }, [nodes, source, target]);
-  const [edgePath] = useMemo(() => {
-    return getBezierPath({
-      sourceX,
-      sourceY,
-      sourcePosition,
-      targetX,
-      targetY,
-      targetPosition,
-      curvature: 0.25
-    });
-  }, [sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition]);
-  const gradientId = useMemo(() => {
-    const selectionKey = isConnectedToSelection ? "active" : "dimmed";
-    return `reference-gradient-${selectionKey}-${id}`;
-  }, [isConnectedToSelection, id]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-      /* @__PURE__ */ jsx(
-        "stop",
-        {
-          offset: "0%",
-          stopColor: REFERENCE_COLOR,
-          stopOpacity: isConnectedToSelection ? 1 : 0.25
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "stop",
-        {
-          offset: "50%",
-          stopColor: REFERENCE_COLOR,
-          stopOpacity: isConnectedToSelection ? 0.55 : 0.1
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "stop",
-        {
-          offset: "100%",
-          stopColor: REFERENCE_COLOR,
-          stopOpacity: isConnectedToSelection ? 1 : 0.25
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx(
-      BaseEdge,
-      {
-        id,
-        path: edgePath,
-        markerEnd,
-        style: {
-          ...style,
-          stroke: `url(#${gradientId})`,
-          strokeWidth: 2,
-          strokeDasharray: "6 4",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: edgePath,
-        fill: "none",
-        strokeWidth: 10,
-        stroke: "transparent",
-        className: "react-flow__edge-interaction"
-      }
-    )
-  ] });
-}
 
 // src/types/groups.ts
 var GROUP_COLORS = {
-  purple: {
-    bg: "bg-purple-500/10",
-    border: "border-purple-500/30",
-    text: "text-purple-400"
-  },
   blue: {
     bg: "bg-blue-500/10",
     border: "border-blue-500/30",
     text: "text-blue-400"
   },
+  gray: {
+    bg: "bg-gray-500/10",
+    border: "border-gray-500/30",
+    text: "text-gray-400"
+  },
   green: {
     bg: "bg-green-500/10",
     border: "border-green-500/30",
     text: "text-green-400"
   },
-  yellow: {
-    bg: "bg-yellow-500/10",
-    border: "border-yellow-500/30",
-    text: "text-yellow-400"
-  },
   orange: {
     bg: "bg-orange-500/10",
     border: "border-orange-500/30",
     text: "text-orange-400"
   },
-  red: {
-    bg: "bg-red-500/10",
-    border: "border-red-500/30",
-    text: "text-red-400"
-  },
   pink: {
     bg: "bg-pink-500/10",
     border: "border-pink-500/30",
     text: "text-pink-400"
   },
-  gray: {
-    bg: "bg-gray-500/10",
-    border: "border-gray-500/30",
-    text: "text-gray-400"
+  purple: {
+    bg: "bg-purple-500/10",
+    border: "border-purple-500/30",
+    text: "text-purple-400"
+  },
+  red: {
+    bg: "bg-red-500/10",
+    border: "border-red-500/30",
+    text: "text-red-400"
+  },
+  yellow: {
+    bg: "bg-yellow-500/10",
+    border: "border-yellow-500/30",
+    text: "text-yellow-400"
   }
 };
 var DEFAULT_GROUP_COLORS = [
@@ -527,10 +460,10 @@ function calculateGroupBounds(nodeIds, nodeMap) {
   if (!foundAny) return null;
   const padding = 24;
   return {
-    x: minX - padding,
-    y: minY - padding - HEADER_HEIGHT,
+    height: maxY - minY + padding * 2 + HEADER_HEIGHT,
     width: maxX - minX + padding * 2,
-    height: maxY - minY + padding * 2 + HEADER_HEIGHT
+    x: minX - padding,
+    y: minY - padding - HEADER_HEIGHT
   };
 }
 function GroupBackground({ group, bounds }) {
@@ -545,10 +478,10 @@ function GroupBackground({ group, bounds }) {
         group.isLocked && "opacity-60"
       ),
       style: {
+        height: bounds.height,
         left: bounds.x,
         top: bounds.y,
-        width: bounds.width,
-        height: bounds.height
+        width: bounds.width
       }
     }
   );
@@ -563,7 +496,9 @@ function GroupControls({ group, bounds, nodeMap, zoom }) {
   const colorPickerRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const dragStartRef = useRef(null);
-  const nodeStartPositionsRef = useRef(/* @__PURE__ */ new Map());
+  const nodeStartPositionsRef = useRef(
+    /* @__PURE__ */ new Map()
+  );
   useEffect(() => {
     if (!isEditing) {
       setEditName(group.name);
@@ -678,10 +613,10 @@ function GroupControls({ group, bounds, nodeMap, zoom }) {
           group.isLocked && "opacity-60"
         ),
         style: {
+          height: HEADER_HEIGHT,
           left: bounds.x,
           top: bounds.y,
-          width: bounds.width,
-          height: HEADER_HEIGHT
+          width: bounds.width
         },
         children: [
           isEditing ? /* @__PURE__ */ jsx(
@@ -717,7 +652,10 @@ function GroupControls({ group, bounds, nodeMap, zoom }) {
                     e.stopPropagation();
                     setShowColorPicker(!showColorPicker);
                   },
-                  className: clsx("p-1 rounded hover:bg-white/10 transition-colors", colors.text),
+                  className: clsx(
+                    "p-1 rounded hover:bg-white/10 transition-colors",
+                    colors.text
+                  ),
                   title: "Change group color",
                   children: /* @__PURE__ */ jsx(Palette, { className: "w-4 h-4" })
                 }
@@ -746,7 +684,10 @@ function GroupControls({ group, bounds, nodeMap, zoom }) {
                   e.stopPropagation();
                   toggleGroupLock(group.id);
                 },
-                className: clsx("p-1 rounded hover:bg-white/10 transition-colors", colors.text),
+                className: clsx(
+                  "p-1 rounded hover:bg-white/10 transition-colors",
+                  colors.text
+                ),
                 title: group.isLocked ? "Unlock group" : "Lock group",
                 children: group.isLocked ? /* @__PURE__ */ jsx(Lock, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Unlock, { className: "w-4 h-4" })
               }
@@ -758,7 +699,10 @@ function GroupControls({ group, bounds, nodeMap, zoom }) {
                   e.stopPropagation();
                   deleteGroup(group.id);
                 },
-                className: clsx("p-1 rounded hover:bg-white/10 transition-colors", colors.text),
+                className: clsx(
+                  "p-1 rounded hover:bg-white/10 transition-colors",
+                  colors.text
+                ),
                 title: "Delete group",
                 children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
               }
@@ -799,11 +743,23 @@ function GroupBackgroundsPortalComponent() {
     return result;
   }, [groups, nodeMap]);
   if (groups.length === 0) return null;
-  return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 0, left: 0, zIndex: -1, pointerEvents: "none" }, children: groups.map((group) => {
-    const bounds = groupBounds.get(group.id);
-    if (!bounds) return null;
-    return /* @__PURE__ */ jsx(GroupBackground, { group, bounds }, group.id);
-  }) }) });
+  return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        left: 0,
+        pointerEvents: "none",
+        position: "absolute",
+        top: 0,
+        zIndex: -1
+      },
+      children: groups.map((group) => {
+        const bounds = groupBounds.get(group.id);
+        if (!bounds) return null;
+        return /* @__PURE__ */ jsx(GroupBackground, { group, bounds }, group.id);
+      })
+    }
+  ) });
 }
 function GroupControlsOverlayComponent() {
   const { groups } = useWorkflowStore();
@@ -821,20 +777,32 @@ function GroupControlsOverlayComponent() {
     return result;
   }, [groups, nodeMap]);
   if (groups.length === 0) return null;
-  return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 0, left: 0, zIndex: 1e3, pointerEvents: "none" }, children: groups.map((group) => {
-    const bounds = groupBounds.get(group.id);
-    if (!bounds) return null;
-    return /* @__PURE__ */ jsx(
-      GroupControls,
-      {
-        group,
-        bounds,
-        nodeMap,
-        zoom
+  return /* @__PURE__ */ jsx(ViewportPortal, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        left: 0,
+        pointerEvents: "none",
+        position: "absolute",
+        top: 0,
+        zIndex: 1e3
       },
-      group.id
-    );
-  }) }) });
+      children: groups.map((group) => {
+        const bounds = groupBounds.get(group.id);
+        if (!bounds) return null;
+        return /* @__PURE__ */ jsx(
+          GroupControls,
+          {
+            group,
+            bounds,
+            nodeMap,
+            zoom
+          },
+          group.id
+        );
+      })
+    }
+  ) });
 }
 var GroupBackgroundsPortal = memo(GroupBackgroundsPortalComponent);
 var GroupControlsOverlay = memo(GroupControlsOverlayComponent);
@@ -857,7 +825,9 @@ function HelperLinesComponent({ draggingNodeId }) {
         setLines([]);
         return;
       }
-      const otherNodes = nodes.filter((n) => n.id !== draggingId && !n.selected);
+      const otherNodes = nodes.filter(
+        (n) => n.id !== draggingId && !n.selected
+      );
       if (otherNodes.length === 0) {
         setLines([]);
         return;
@@ -881,36 +851,44 @@ function HelperLinesComponent({ draggingNodeId }) {
         const nodeCenterX = nodeLeft + nodeWidth / 2;
         const nodeCenterY = nodeTop + nodeHeight / 2;
         const verticalChecks = [
-          { dragPos: dragLeft, nodePos: nodeLeft, label: "left-left" },
-          { dragPos: dragLeft, nodePos: nodeRight, label: "left-right" },
-          { dragPos: dragRight, nodePos: nodeLeft, label: "right-left" },
-          { dragPos: dragRight, nodePos: nodeRight, label: "right-right" },
-          { dragPos: dragCenterX, nodePos: nodeCenterX, label: "center-center-x" }
+          { dragPos: dragLeft, label: "left-left", nodePos: nodeLeft },
+          { dragPos: dragLeft, label: "left-right", nodePos: nodeRight },
+          { dragPos: dragRight, label: "right-left", nodePos: nodeLeft },
+          { dragPos: dragRight, label: "right-right", nodePos: nodeRight },
+          {
+            dragPos: dragCenterX,
+            label: "center-center-x",
+            nodePos: nodeCenterX
+          }
         ];
         for (const check of verticalChecks) {
           if (Math.abs(check.dragPos - check.nodePos) <= SNAP_THRESHOLD) {
             newLines.push({
-              type: "vertical",
+              end: Math.max(dragBottom, nodeBottom) + 20,
               position: check.nodePos,
               start: Math.min(dragTop, nodeTop) - 20,
-              end: Math.max(dragBottom, nodeBottom) + 20
+              type: "vertical"
             });
           }
         }
         const horizontalChecks = [
-          { dragPos: dragTop, nodePos: nodeTop, label: "top-top" },
-          { dragPos: dragTop, nodePos: nodeBottom, label: "top-bottom" },
-          { dragPos: dragBottom, nodePos: nodeTop, label: "bottom-top" },
-          { dragPos: dragBottom, nodePos: nodeBottom, label: "bottom-bottom" },
-          { dragPos: dragCenterY, nodePos: nodeCenterY, label: "center-center-y" }
+          { dragPos: dragTop, label: "top-top", nodePos: nodeTop },
+          { dragPos: dragTop, label: "top-bottom", nodePos: nodeBottom },
+          { dragPos: dragBottom, label: "bottom-top", nodePos: nodeTop },
+          { dragPos: dragBottom, label: "bottom-bottom", nodePos: nodeBottom },
+          {
+            dragPos: dragCenterY,
+            label: "center-center-y",
+            nodePos: nodeCenterY
+          }
         ];
         for (const check of horizontalChecks) {
           if (Math.abs(check.dragPos - check.nodePos) <= SNAP_THRESHOLD) {
             newLines.push({
-              type: "horizontal",
+              end: Math.max(dragRight, nodeRight) + 20,
               position: check.nodePos,
               start: Math.min(dragLeft, nodeLeft) - 20,
-              end: Math.max(dragRight, nodeRight) + 20
+              type: "horizontal"
             });
           }
         }
@@ -949,7 +927,7 @@ function HelperLinesComponent({ draggingNodeId }) {
     "svg",
     {
       className: "absolute inset-0 pointer-events-none z-[1000]",
-      style: { width: "100%", height: "100%", overflow: "visible" },
+      style: { height: "100%", overflow: "visible", width: "100%" },
       children: lines.map((line, index) => {
         if (line.type === "vertical") {
           const x = line.position * zoom + tx;
@@ -1030,9 +1008,9 @@ function NodeSearch() {
     (node) => {
       setSelectedNodeIds([node.id]);
       reactFlow.fitView({
+        duration: 300,
         nodes: [node],
-        padding: 0.5,
-        duration: 300
+        padding: 0.5
       });
       closeModal();
       setSearch("");
@@ -1043,7 +1021,9 @@ function NodeSearch() {
     (e) => {
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        setSelectedIndex((prev) => Math.min(prev + 1, filteredNodes.length - 1));
+        setSelectedIndex(
+          (prev) => Math.min(prev + 1, filteredNodes.length - 1)
+        );
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         setSelectedIndex((prev) => Math.max(prev - 1, 0));
@@ -1078,117 +1058,302 @@ function NodeSearch() {
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-xl w-full max-w-lg",
-          role: "dialog",
-          "aria-label": "Find Node",
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-[var(--border)]", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(Search, { className: "w-4 h-4 text-[var(--muted-foreground)]" }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Find Node" })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: handleClose,
-                  className: "p-1 rounded hover:bg-[var(--secondary)] transition-colors",
-                  children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "p-4", onKeyDown: handleKeyDown, children: [
-              /* @__PURE__ */ jsxs("div", { className: "relative mb-3", children: [
-                /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref: inputRef,
-                    type: "text",
-                    placeholder: "Search nodes by name, type, or comment...",
-                    value: search,
-                    onChange: (e) => setSearch(e.target.value),
-                    className: "w-full pl-9 pr-3 py-2 text-sm bg-[var(--secondary)] border border-[var(--border)] rounded-md outline-none focus:ring-1 focus:ring-[var(--ring)]",
-                    autoFocus: true
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("div", { ref: listRef, className: "max-h-[300px] overflow-y-auto space-y-1", children: filteredNodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-muted-foreground py-8", children: search ? `No nodes found for "${search}"` : "No nodes in workflow" }) : filteredNodes.map((node, index) => {
-                const nodeDef = NODE_DEFINITIONS[node.type];
-                const comment = node.data.comment;
-                return /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => handleSelectNode(node),
-                    className: `w-full flex items-center gap-3 p-2 rounded text-left transition-colors ${index === selectedIndex ? "bg-primary/10 border border-primary/30" : "hover:bg-secondary/50 border border-transparent"}`,
-                    children: [
-                      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded bg-secondary flex items-center justify-center text-xs font-medium", children: nodeDef?.label?.charAt(0) || "?" }),
-                      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                        /* @__PURE__ */ jsx("div", { className: "font-medium truncate text-sm", children: node.data.label }),
-                        /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground truncate", children: [
-                          nodeDef?.label || node.type,
-                          comment && ` \xB7 ${comment}`
-                        ] })
-                      ] })
-                    ]
-                  },
-                  node.id
-                );
-              }) }),
-              filteredNodes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 pt-3 border-t border-border text-xs text-muted-foreground flex gap-4", children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-secondary rounded", children: "up/down" }),
-                  " Navigate"
-                ] }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-secondary rounded", children: "Enter" }),
-                  " Select"
-                ] }),
-                /* @__PURE__ */ jsxs("span", { children: [
-                  /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-secondary rounded", children: "Esc" }),
-                  " Close"
-                ] })
-              ] })
-            ] })
-          ]
+          className: "bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-xl w-full max-w-lg",
+          role: "dialog",
+          "aria-label": "Find Node",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-[var(--border)]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Search, { className: "w-4 h-4 text-[var(--muted-foreground)]" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Find Node" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleClose,
+                  className: "p-1 rounded hover:bg-[var(--secondary)] transition-colors",
+                  children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "p-4", onKeyDown: handleKeyDown, children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative mb-3", children: [
+                /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    placeholder: "Search nodes by name, type, or comment...",
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value),
+                    className: "w-full pl-9 pr-3 py-2 text-sm bg-[var(--secondary)] border border-[var(--border)] rounded-md outline-none focus:ring-1 focus:ring-[var(--ring)]",
+                    autoFocus: true
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: listRef,
+                  className: "max-h-[300px] overflow-y-auto space-y-1",
+                  children: filteredNodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-muted-foreground py-8", children: search ? `No nodes found for "${search}"` : "No nodes in workflow" }) : filteredNodes.map((node, index) => {
+                    const nodeDef = NODE_DEFINITIONS[node.type];
+                    const comment = node.data.comment;
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => handleSelectNode(node),
+                        className: `w-full flex items-center gap-3 p-2 rounded text-left transition-colors ${index === selectedIndex ? "bg-primary/10 border border-primary/30" : "hover:bg-secondary/50 border border-transparent"}`,
+                        children: [
+                          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-8 h-8 rounded bg-secondary flex items-center justify-center text-xs font-medium", children: nodeDef?.label?.charAt(0) || "?" }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                            /* @__PURE__ */ jsx("div", { className: "font-medium truncate text-sm", children: node.data.label }),
+                            /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground truncate", children: [
+                              nodeDef?.label || node.type,
+                              comment && ` \xB7 ${comment}`
+                            ] })
+                          ] })
+                        ]
+                      },
+                      node.id
+                    );
+                  })
+                }
+              ),
+              filteredNodes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3 pt-3 border-t border-border text-xs text-muted-foreground flex gap-4", children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-secondary rounded", children: "up/down" }),
+                  " ",
+                  "Navigate"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-secondary rounded", children: "Enter" }),
+                  " ",
+                  "Select"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-secondary rounded", children: "Esc" }),
+                  " ",
+                  "Close"
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function PauseEdgeComponent({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+  data
+}) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourcePosition,
+    sourceX,
+    sourceY,
+    targetPosition,
+    targetX,
+    targetY
+  });
+  const hasPause = data?.hasPause === true;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        path: edgePath,
+        markerEnd,
+        style: {
+          ...style,
+          ...hasPause && {
+            stroke: "#f59e0b",
+            strokeDasharray: "5 5"
+          }
+        }
+      }
+    ),
+    hasPause && /* @__PURE__ */ jsx(
+      "foreignObject",
+      {
+        width: 20,
+        height: 20,
+        x: labelX - 10,
+        y: labelY - 10,
+        className: "pointer-events-none",
+        children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-5 h-5 rounded-full bg-amber-500 text-white", children: /* @__PURE__ */ jsx(Pause, { className: "w-3 h-3" }) })
+      }
+    )
+  ] });
+}
+var PauseEdge = memo(PauseEdgeComponent);
+var REFERENCE_COLOR = "#52525b";
+function ReferenceEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style,
+  markerEnd,
+  source,
+  target
+}) {
+  const nodes = useWorkflowStore((state) => state.nodes);
+  const isConnectedToSelection = useMemo(() => {
+    const selectedNodes = nodes.filter((n) => n.selected);
+    if (selectedNodes.length === 0) return false;
+    return selectedNodes.some((n) => n.id === source || n.id === target);
+  }, [nodes, source, target]);
+  const [edgePath] = useMemo(() => {
+    return getBezierPath({
+      curvature: 0.25,
+      sourcePosition,
+      sourceX,
+      sourceY,
+      targetPosition,
+      targetX,
+      targetY
+    });
+  }, [sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition]);
+  const gradientId = useMemo(() => {
+    const selectionKey = isConnectedToSelection ? "active" : "dimmed";
+    return `reference-gradient-${selectionKey}-${id}`;
+  }, [isConnectedToSelection, id]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+      /* @__PURE__ */ jsx(
+        "stop",
+        {
+          offset: "0%",
+          stopColor: REFERENCE_COLOR,
+          stopOpacity: isConnectedToSelection ? 1 : 0.25
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "stop",
+        {
+          offset: "50%",
+          stopColor: REFERENCE_COLOR,
+          stopOpacity: isConnectedToSelection ? 0.55 : 0.1
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "stop",
+        {
+          offset: "100%",
+          stopColor: REFERENCE_COLOR,
+          stopOpacity: isConnectedToSelection ? 1 : 0.25
         }
       )
-    }
-  );
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        id,
+        path: edgePath,
+        markerEnd,
+        style: {
+          ...style,
+          stroke: `url(#${gradientId})`,
+          strokeDasharray: "6 4",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        strokeWidth: 10,
+        stroke: "transparent",
+        className: "react-flow__edge-interaction"
+      }
+    )
+  ] });
 }
 var SHORTCUTS = [
   // Navigation
-  { keys: "Scroll", description: "Pan canvas", category: "Navigation" },
-  { keys: "Ctrl + Scroll", description: "Zoom in/out", category: "Navigation" },
-  { keys: "F", description: "Fit view to selection (or all)", category: "Navigation" },
-  { keys: "M", description: "Toggle sidebar", category: "Navigation" },
+  { category: "Navigation", description: "Pan canvas", keys: "Scroll" },
+  { category: "Navigation", description: "Zoom in/out", keys: "Ctrl + Scroll" },
+  {
+    category: "Navigation",
+    description: "Fit view to selection (or all)",
+    keys: "F"
+  },
+  { category: "Navigation", description: "Toggle sidebar", keys: "M" },
   // Selection
-  { keys: "Click", description: "Select node", category: "Selection" },
-  { keys: "Shift + Click", description: "Add to selection", category: "Selection" },
-  { keys: "Drag", description: "Marquee select", category: "Selection" },
-  { keys: "Ctrl + A", description: "Select all nodes", category: "Selection" },
-  { keys: "Ctrl + F", description: "Search nodes", category: "Selection" },
+  { category: "Selection", description: "Select node", keys: "Click" },
+  {
+    category: "Selection",
+    description: "Add to selection",
+    keys: "Shift + Click"
+  },
+  { category: "Selection", description: "Marquee select", keys: "Drag" },
+  { category: "Selection", description: "Select all nodes", keys: "Ctrl + A" },
+  { category: "Selection", description: "Search nodes", keys: "Ctrl + F" },
   // Editing
-  { keys: "Ctrl + Z", description: "Undo", category: "Editing" },
-  { keys: "Ctrl + Shift + Z", description: "Redo", category: "Editing" },
-  { keys: "Ctrl + C", description: "Copy", category: "Editing" },
-  { keys: "Ctrl + X", description: "Cut", category: "Editing" },
-  { keys: "Ctrl + V", description: "Paste", category: "Editing" },
-  { keys: "Ctrl + D", description: "Duplicate", category: "Editing" },
-  { keys: "Delete / Backspace", description: "Delete selected", category: "Editing" },
+  { category: "Editing", description: "Undo", keys: "Ctrl + Z" },
+  { category: "Editing", description: "Redo", keys: "Ctrl + Shift + Z" },
+  { category: "Editing", description: "Copy", keys: "Ctrl + C" },
+  { category: "Editing", description: "Cut", keys: "Ctrl + X" },
+  { category: "Editing", description: "Paste", keys: "Ctrl + V" },
+  { category: "Editing", description: "Duplicate", keys: "Ctrl + D" },
+  {
+    category: "Editing",
+    description: "Delete selected",
+    keys: "Delete / Backspace"
+  },
   // Nodes
-  { keys: "Shift + I", description: "Add Image Gen node", category: "Nodes" },
-  { keys: "Shift + V", description: "Add Video Gen node", category: "Nodes" },
-  { keys: "Shift + P", description: "Add Prompt node", category: "Nodes" },
-  { keys: "Shift + L", description: "Add LLM node", category: "Nodes" },
+  { category: "Nodes", description: "Add Image Gen node", keys: "Shift + I" },
+  { category: "Nodes", description: "Add Video Gen node", keys: "Shift + V" },
+  { category: "Nodes", description: "Add Prompt node", keys: "Shift + P" },
+  { category: "Nodes", description: "Add LLM node", keys: "Shift + L" },
   // Organization
-  { keys: "L", description: "Toggle lock on selected", category: "Organization" },
-  { keys: "Ctrl + G", description: "Group selected nodes", category: "Organization" },
-  { keys: "Ctrl + Shift + G", description: "Ungroup", category: "Organization" },
-  { keys: "Ctrl + Shift + L", description: "Unlock all nodes", category: "Organization" },
+  {
+    category: "Organization",
+    description: "Toggle lock on selected",
+    keys: "L"
+  },
+  {
+    category: "Organization",
+    description: "Group selected nodes",
+    keys: "Ctrl + G"
+  },
+  {
+    category: "Organization",
+    description: "Ungroup",
+    keys: "Ctrl + Shift + G"
+  },
+  {
+    category: "Organization",
+    description: "Unlock all nodes",
+    keys: "Ctrl + Shift + L"
+  },
   // Help
-  { keys: "?", description: "Show this help", category: "Help" }
+  { category: "Help", description: "Show this help", keys: "?" }
+];
+var CATEGORIES = [
+  "Navigation",
+  "Selection",
+  "Editing",
+  "Nodes",
+  "Organization",
+  "Help"
 ];
-var CATEGORIES = ["Navigation", "Selection", "Editing", "Nodes", "Organization", "Help"];
 function ShortcutHelpModal() {
   const { activeModal, closeModal } = useUIStore();
   const [searchQuery, setSearchQuery] = useState("");
@@ -1346,7 +1511,7 @@ function CostModal() {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "p-4", children: breakdown.nodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-[var(--muted-foreground)] py-8", children: "No billable nodes in workflow" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "p-4", children: breakdown.items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-[var(--muted-foreground)] py-8", children: "No billable nodes in workflow" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("div", { className: "max-h-[40vh] overflow-y-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
                 /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-left text-xs text-[var(--muted-foreground)] border-b border-[var(--border)]", children: [
                   /* @__PURE__ */ jsx("th", { className: "pb-2 font-medium", children: "Node" }),
@@ -1354,15 +1519,22 @@ function CostModal() {
                   /* @__PURE__ */ jsx("th", { className: "pb-2 font-medium", children: "Unit" }),
                   /* @__PURE__ */ jsx("th", { className: "pb-2 font-medium text-right", children: "Cost" })
                 ] }) }),
-                /* @__PURE__ */ jsx("tbody", { children: breakdown.nodes.map((estimate) => /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx("tbody", { children: breakdown.items.map((estimate) => /* @__PURE__ */ jsxs(
                   "tr",
                   {
                     className: "border-b border-[var(--border)] last:border-0",
                     children: [
-                      /* @__PURE__ */ jsx("td", { className: "py-2 truncate max-w-[120px]", title: estimate.nodeLabel, children: estimate.nodeLabel }),
+                      /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          className: "py-2 truncate max-w-[120px]",
+                          title: estimate.nodeLabel,
+                          children: estimate.nodeLabel
+                        }
+                      ),
                       /* @__PURE__ */ jsx("td", { className: "py-2 text-[var(--muted-foreground)] font-mono text-xs", children: estimate.model }),
                       /* @__PURE__ */ jsx("td", { className: "py-2 text-[var(--muted-foreground)] text-xs", children: estimate.unit }),
-                      /* @__PURE__ */ jsx("td", { className: "py-2 text-right font-mono", children: formatCost(estimate.cost) })
+                      /* @__PURE__ */ jsx("td", { className: "py-2 text-right font-mono", children: formatCost(estimate.subtotal) })
                     ]
                   },
                   estimate.nodeId
@@ -1527,7 +1699,14 @@ function HistorySidebar({
                       viewBox: "0 0 24 24",
                       stroke: "currentColor",
                       strokeWidth: 2,
-                      children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          d: "M6 18L18 6M6 6l12 12"
+                        }
+                      )
                     }
                   )
                 }
@@ -1573,8 +1752,12 @@ function GlobalImageHistory() {
   const [showSidebar, setShowSidebar] = useState(false);
   const drawerRef = useRef(null);
   const triggerRef = useRef(null);
-  const history = useWorkflowStore((state) => state.globalImageHistory ?? EMPTY_HISTORY);
-  const clearGlobalHistory = useWorkflowStore((state) => state.clearGlobalHistory);
+  const history = useWorkflowStore(
+    (state) => state.globalImageHistory ?? EMPTY_HISTORY
+  );
+  const clearGlobalHistory = useWorkflowStore(
+    (state) => state.clearGlobalHistory
+  );
   const fanItems = history.slice(0, 10);
   const hasOverflow = history.length > 10;
   useEffect(() => {
@@ -1603,21 +1786,24 @@ function GlobalImageHistory() {
     }
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, showSidebar]);
-  const handleDragStart = useCallback((e, item) => {
-    e.dataTransfer.setData(
-      "application/history-image",
-      JSON.stringify({
-        image: item.image,
-        prompt: item.prompt,
-        timestamp: item.timestamp
-      })
-    );
-    e.dataTransfer.effectAllowed = "copy";
-    setTimeout(() => {
-      setIsOpen(false);
-      setShowSidebar(false);
-    }, 0);
-  }, []);
+  const handleDragStart = useCallback(
+    (e, item) => {
+      e.dataTransfer.setData(
+        "application/history-image",
+        JSON.stringify({
+          image: item.image,
+          prompt: item.prompt,
+          timestamp: item.timestamp
+        })
+      );
+      e.dataTransfer.effectAllowed = "copy";
+      setTimeout(() => {
+        setIsOpen(false);
+        setShowSidebar(false);
+      }, 0);
+    },
+    []
+  );
   const handleShowAll = useCallback(() => {
     setIsOpen(false);
     setShowSidebar(true);
@@ -1679,7 +1865,10 @@ function GlobalImageHistory() {
             item.id
           )) }),
           hasOverflow && (() => {
-            const topItemPos = calculateFanPosition(fanItems.length - 1, fanItems.length);
+            const topItemPos = calculateFanPosition(
+              fanItems.length - 1,
+              fanItems.length
+            );
             return /* @__PURE__ */ jsxs(
               "button",
               {
@@ -1716,8 +1905,17 @@ function GlobalImageHistory() {
 var NODE_GAP = 32;
 var EST_NODE_WIDTH = 280;
 var EST_NODE_HEIGHT = 200;
-function MultiSelectToolbarComponent({ onDownloadAsZip }) {
-  const { nodes, selectedNodeIds, onNodesChange, createGroup, deleteGroup, groups } = useWorkflowStore();
+function MultiSelectToolbarComponent({
+  onDownloadAsZip
+}) {
+  const {
+    nodes,
+    selectedNodeIds,
+    onNodesChange,
+    createGroup,
+    deleteGroup,
+    groups
+  } = useWorkflowStore();
   const reactFlow = useReactFlow();
   const selectedNodes = useMemo(
     () => nodes.filter((n) => selectedNodeIds.includes(n.id)),
@@ -1725,7 +1923,9 @@ function MultiSelectToolbarComponent({ onDownloadAsZip }) {
   );
   const selectedGroup = useMemo(() => {
     if (selectedNodes.length < 2) return null;
-    return groups.find((g) => selectedNodeIds.every((id) => g.nodeIds.includes(id))) ?? null;
+    return groups.find(
+      (g) => selectedNodeIds.every((id) => g.nodeIds.includes(id))
+    ) ?? null;
   }, [groups, selectedNodeIds, selectedNodes.length]);
   const toolbarPosition = useMemo(() => {
     if (selectedNodes.length < 2) return null;
@@ -1746,29 +1946,33 @@ function MultiSelectToolbarComponent({ onDownloadAsZip }) {
   }, [selectedNodes, reactFlow]);
   const stackHorizontal = useCallback(() => {
     if (selectedNodes.length < 2) return;
-    const sorted = [...selectedNodes].sort((a, b) => a.position.x - b.position.x);
+    const sorted = [...selectedNodes].sort(
+      (a, b) => a.position.x - b.position.x
+    );
     const baseY = sorted[0].position.y;
     const changes = sorted.map((node, i) => ({
-      type: "position",
       id: node.id,
       position: {
         x: sorted[0].position.x + i * (EST_NODE_WIDTH + NODE_GAP),
         y: baseY
-      }
+      },
+      type: "position"
     }));
     onNodesChange(changes);
   }, [selectedNodes, onNodesChange]);
   const stackVertical = useCallback(() => {
     if (selectedNodes.length < 2) return;
-    const sorted = [...selectedNodes].sort((a, b) => a.position.y - b.position.y);
+    const sorted = [...selectedNodes].sort(
+      (a, b) => a.position.y - b.position.y
+    );
     const baseX = sorted[0].position.x;
     const changes = sorted.map((node, i) => ({
-      type: "position",
       id: node.id,
       position: {
         x: baseX,
         y: sorted[0].position.y + i * (EST_NODE_HEIGHT + NODE_GAP)
-      }
+      },
+      type: "position"
     }));
     onNodesChange(changes);
   }, [selectedNodes, onNodesChange]);
@@ -1783,12 +1987,12 @@ function MultiSelectToolbarComponent({ onDownloadAsZip }) {
     const baseX = sorted[0].position.x;
     const baseY = sorted[0].position.y;
     const changes = sorted.map((node, i) => ({
-      type: "position",
       id: node.id,
       position: {
         x: baseX + i % cols * (EST_NODE_WIDTH + NODE_GAP),
         y: baseY + Math.floor(i / cols) * (EST_NODE_HEIGHT + NODE_GAP)
-      }
+      },
+      type: "position"
     }));
     onNodesChange(changes);
   }, [selectedNodes, onNodesChange]);
@@ -1865,16 +2069,16 @@ function MultiSelectToolbarComponent({ onDownloadAsZip }) {
 }
 var MultiSelectToolbar = memo(MultiSelectToolbarComponent);
 var typeStyles = {
+  error: "bg-red-900 border-red-700 text-red-100",
   info: "bg-neutral-800 border-neutral-600 text-neutral-100",
   success: "bg-green-900 border-green-700 text-green-100",
-  warning: "bg-orange-900 border-orange-600 text-orange-100",
-  error: "bg-red-900 border-red-700 text-red-100"
+  warning: "bg-orange-900 border-orange-600 text-orange-100"
 };
 var typeIcons = {
+  error: XCircle,
   info: Info,
   success: CheckCircle,
-  warning: AlertTriangle,
-  error: XCircle
+  warning: AlertTriangle
 };
 function NotificationItem({
   id,
@@ -1955,11 +2159,14 @@ function getEdgeDataType(edge, nodeMap) {
   return sourceHandle?.type ?? null;
 }
 var edgeTypesMap = {
-  default: EditableEdge,
   bezier: EditableEdge,
+  default: EditableEdge,
   reference: ReferenceEdge
 };
-function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
+function WorkflowCanvas({
+  nodeTypes: nodeTypesProp,
+  onDownloadAsZip
+} = {}) {
   const {
     nodes,
     edges,
@@ -1993,8 +2200,12 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
   const isRunning = useExecutionStore((state) => state.isRunning);
   const currentNodeId = useExecutionStore((state) => state.currentNodeId);
   const executingNodeIds = useExecutionStore((state) => state.executingNodeIds);
-  const activeNodeExecutions = useExecutionStore((state) => state.activeNodeExecutions);
-  const hasActiveNodeExecutions = useExecutionStore((state) => state.activeNodeExecutions.size > 0);
+  const activeNodeExecutions = useExecutionStore(
+    (state) => state.activeNodeExecutions
+  );
+  const hasActiveNodeExecutions = useExecutionStore(
+    (state) => state.activeNodeExecutions.size > 0
+  );
   const [isMinimapVisible, setIsMinimapVisible] = useState(false);
   const [draggingNodeId, setDraggingNodeId] = useState(null);
   const hideTimeoutRef = useRef(null);
@@ -2009,32 +2220,42 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
     openSelectionMenu,
     close: closeContextMenu
   } = useContextMenu();
-  const openShortcutHelp = useCallback(() => openModal("shortcutHelp"), [openModal]);
-  const openNodeSearch = useCallback(() => openModal("nodeSearch"), [openModal]);
+  const openShortcutHelp = useCallback(
+    () => openModal("shortcutHelp"),
+    [openModal]
+  );
+  const openNodeSearch = useCallback(
+    () => openModal("nodeSearch"),
+    [openModal]
+  );
   const deleteSelectedElements = useCallback(() => {
     const nodesToDelete = nodes.filter((n) => selectedNodeIds.includes(n.id));
     const edgesToDelete = edges.filter((e) => e.selected);
     if (nodesToDelete.length > 0) {
-      onNodesChange(nodesToDelete.map((n) => ({ type: "remove", id: n.id })));
+      onNodesChange(
+        nodesToDelete.map((n) => ({ id: n.id, type: "remove" }))
+      );
     }
     if (edgesToDelete.length > 0) {
-      onEdgesChange(edgesToDelete.map((e) => ({ type: "remove", id: e.id })));
+      onEdgesChange(
+        edgesToDelete.map((e) => ({ id: e.id, type: "remove" }))
+      );
     }
   }, [nodes, edges, selectedNodeIds, onNodesChange, onEdgesChange]);
   useCanvasKeyboardShortcuts({
-    selectedNodeIds,
-    groups,
-    nodes,
-    toggleNodeLock,
+    addNode,
     createGroup,
     deleteGroup,
-    unlockAllNodes,
-    addNode,
-    togglePalette,
+    deleteSelectedElements,
     fitView: reactFlow.fitView,
-    openShortcutHelp,
+    groups,
+    nodes,
     openNodeSearch,
-    deleteSelectedElements
+    openShortcutHelp,
+    selectedNodeIds,
+    toggleNodeLock,
+    togglePalette,
+    unlockAllNodes
   });
   useEffect(() => {
     if (selectedNodeIds.length === 0) {
@@ -2051,13 +2272,17 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
       if (!targetNode) return false;
       if (targetNode.type === "imageGen" && edge.targetHandle === "images") {
         const nodeData = targetNode.data;
-        const hasImageSupport = supportsImageInput(nodeData?.selectedModel?.inputSchema);
+        const hasImageSupport = supportsImageInput(
+          nodeData?.selectedModel?.inputSchema
+        );
         return !hasImageSupport;
       }
       if (targetNode.type === "videoGen") {
         if (edge.targetHandle === "image" || edge.targetHandle === "lastFrame") {
           const nodeData = targetNode.data;
-          const hasImageSupport = supportsImageInput(nodeData?.selectedModel?.inputSchema);
+          const hasImageSupport = supportsImageInput(
+            nodeData?.selectedModel?.inputSchema
+          );
           return !hasImageSupport;
         }
       }
@@ -2078,9 +2303,9 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
         if (isActiveEdge && !isDisabledTarget) {
           return {
             ...edge,
-            data: enrichedData,
             animated: false,
-            className: `${typeClass} executing`.trim()
+            className: `${typeClass} executing`.trim(),
+            data: enrichedData
           };
         }
       }
@@ -2090,45 +2315,45 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
         if (isDisabledTarget) {
           return {
             ...edge,
-            data: enrichedData,
             animated: false,
-            className: `${typeClass} edge-disabled`.trim()
+            className: `${typeClass} edge-disabled`.trim(),
+            data: enrichedData
           };
         }
         if (!isInExecutionScope) {
           return {
             ...edge,
-            data: enrichedData,
             animated: false,
-            className: typeClass
+            className: typeClass,
+            data: enrichedData
           };
         }
         return {
           ...edge,
-          data: enrichedData,
           animated: false,
-          className: `${typeClass} ${isExecutingEdge ? "executing" : "active-pipe"}`.trim()
+          className: `${typeClass} ${isExecutingEdge ? "executing" : "active-pipe"}`.trim(),
+          data: enrichedData
         };
       }
       if (isDisabledTarget) {
         return {
           ...edge,
-          data: enrichedData,
-          className: `${typeClass} edge-disabled`.trim()
+          className: `${typeClass} edge-disabled`.trim(),
+          data: enrichedData
         };
       }
       if (highlightedSet) {
         const isConnected = highlightedSet.has(edge.source) && highlightedSet.has(edge.target);
         return {
           ...edge,
-          data: enrichedData,
-          className: `${typeClass} ${isConnected ? "highlighted" : "dimmed"}`.trim()
+          className: `${typeClass} ${isConnected ? "highlighted" : "dimmed"}`.trim(),
+          data: enrichedData
         };
       }
       return {
         ...edge,
-        data: enrichedData,
-        className: typeClass
+        className: typeClass,
+        data: enrichedData
       };
     });
   }, [
@@ -2201,7 +2426,9 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
   const handleDrop = useCallback(
     (event) => {
       event.preventDefault();
-      const historyData = event.dataTransfer.getData("application/history-image");
+      const historyData = event.dataTransfer.getData(
+        "application/history-image"
+      );
       if (historyData) {
         try {
           const parsed = JSON.parse(historyData);
@@ -2232,9 +2459,12 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
     event.preventDefault();
     event.dataTransfer.dropEffect = "move";
   }, []);
-  const handleNodeDragStart = useCallback((_event, node) => {
-    setDraggingNodeId(node.id);
-  }, []);
+  const handleNodeDragStart = useCallback(
+    (_event, node) => {
+      setDraggingNodeId(node.id);
+    },
+    []
+  );
   const handleNodeDrag = useCallback((_event, node) => {
     setDraggingNodeId(node.id);
   }, []);
@@ -2260,13 +2490,16 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
         if (!sourceHandleType) return;
         const clientX = "clientX" in event ? event.clientX : event.touches?.[0]?.clientX ?? 0;
         const clientY = "clientY" in event ? event.clientY : event.touches?.[0]?.clientY ?? 0;
-        const flowPosition = reactFlow.screenToFlowPosition({ x: clientX, y: clientY });
+        const flowPosition = reactFlow.screenToFlowPosition({
+          x: clientX,
+          y: clientY
+        });
         openConnectionDropMenu({
           position: flowPosition,
           screenPosition: { x: clientX, y: clientY },
-          sourceNodeId,
           sourceHandleId,
-          sourceHandleType
+          sourceHandleType,
+          sourceNodeId
         });
         return;
       }
@@ -2274,7 +2507,11 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
       if (!targetNodeId || targetNodeId === sourceNodeId) return;
       const droppedOnHandle = target.closest(".react-flow__handle");
       if (droppedOnHandle) return;
-      const compatibleHandle = findCompatibleHandle(sourceNodeId, sourceHandleId, targetNodeId);
+      const compatibleHandle = findCompatibleHandle(
+        sourceNodeId,
+        sourceHandleId,
+        targetNodeId
+      );
       if (!compatibleHandle) return;
       onConnect({
         source: sourceNodeId,
@@ -2289,8 +2526,8 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
     (connection) => {
       const conn = {
         source: connection.source,
-        target: connection.target,
         sourceHandle: connection.sourceHandle ?? null,
+        target: connection.target,
         targetHandle: connection.targetHandle ?? null
       };
       return isValidConnection(conn);
@@ -2322,156 +2559,114 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
       }
     };
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full relative", onDrop: handleDrop, onDragOver: handleDragOver, children: [
-    !showPalette && /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: togglePalette,
-        className: "absolute top-3 left-3 z-10 p-1.5 bg-[var(--background)] border border-[var(--border)] rounded-md hover:bg-[var(--secondary)] transition-colors group",
-        title: "Open sidebar (M)",
-        children: /* @__PURE__ */ jsx(PanelLeft, { className: "w-4 h-4 text-[var(--muted-foreground)] group-hover:text-[var(--foreground)]" })
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      ReactFlow,
-      {
-        nodes,
-        edges: styledEdges,
-        onNodesChange,
-        onEdgesChange,
-        onConnect,
-        onConnectEnd: handleConnectEnd,
-        onNodeClick: handleNodeClick,
-        onPaneClick: handlePaneClick,
-        onSelectionChange: handleSelectionChange,
-        onNodeContextMenu: handleNodeContextMenu,
-        onEdgeContextMenu: handleEdgeContextMenu,
-        onPaneContextMenu: handlePaneContextMenu,
-        onSelectionContextMenu: handleSelectionContextMenu,
-        onNodeDragStart: handleNodeDragStart,
-        onNodeDrag: handleNodeDrag,
-        onNodeDragStop: handleNodeDragStop,
-        onEdgeClick: handleEdgeClick,
-        isValidConnection: checkValidConnection,
-        nodeTypes: nodeTypesProp ?? nodeTypes,
-        edgeTypes: edgeTypesMap,
-        fitView: true,
-        snapToGrid: true,
-        snapGrid: [16, 16],
-        minZoom: 0.1,
-        maxZoom: 4,
-        nodeDragThreshold: 5,
-        connectionMode: ConnectionMode.Loose,
-        selectionMode: SelectionMode.Partial,
-        selectionOnDrag: true,
-        panOnDrag: [1, 2],
-        onMoveStart: handleMoveStart,
-        onMoveEnd: handleMoveEnd,
-        deleteKeyCode: ["Backspace", "Delete"],
-        defaultEdgeOptions: {
-          type: edgeStyle,
-          animated: false
-        },
-        edgesFocusable: true,
-        edgesReconnectable: true,
-        proOptions: { hideAttribution: true },
-        onlyRenderVisibleElements: nodes.length > 50,
-        children: [
-          /* @__PURE__ */ jsx(GroupOverlay, {}),
-          /* @__PURE__ */ jsx(
-            Background,
-            {
-              variant: BackgroundVariant.Dots,
-              gap: 16,
-              size: 1,
-              color: "rgba(255, 255, 255, 0.08)"
-            }
-          ),
-          /* @__PURE__ */ jsx(Controls, {}),
-          showMinimap && /* @__PURE__ */ jsx(
-            MiniMap,
-            {
-              nodeStrokeWidth: 0,
-              nodeColor: () => DEFAULT_NODE_COLOR,
-              zoomable: true,
-              pannable: true,
-              maskColor: "rgba(0, 0, 0, 0.8)",
-              className: `!bg-transparent !border-[var(--border)] !rounded-lg transition-opacity duration-300 ${isMinimapVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`
-            }
-          ),
-          /* @__PURE__ */ jsx(HelperLines, { draggingNodeId })
-        ]
-      }
-    ),
-    isContextMenuOpen && /* @__PURE__ */ jsx(
-      ContextMenu,
-      {
-        x: contextMenuPosition.x,
-        y: contextMenuPosition.y,
-        items: contextMenuItems,
-        onClose: closeContextMenu
-      }
-    ),
-    /* @__PURE__ */ jsx(EdgeToolbar, {}),
-    /* @__PURE__ */ jsx(MultiSelectToolbar, { onDownloadAsZip }),
-    /* @__PURE__ */ jsx(NodeDetailModal, {}),
-    /* @__PURE__ */ jsx(ShortcutHelpModal, {}),
-    /* @__PURE__ */ jsx(NodeSearch, {}),
-    /* @__PURE__ */ jsx(ConnectionDropMenu, {}),
-    /* @__PURE__ */ jsx(CostModal, {}),
-    /* @__PURE__ */ jsx(NotificationToast, {}),
-    /* @__PURE__ */ jsx(GlobalImageHistory, {})
-  ] });
-}
-function PauseEdgeComponent({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  style = {},
-  markerEnd,
-  data
-}) {
-  const [edgePath, labelX, labelY] = getBezierPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition
-  });
-  const hasPause = data?.hasPause === true;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      BaseEdge,
-      {
-        path: edgePath,
-        markerEnd,
-        style: {
-          ...style,
-          ...hasPause && {
-            strokeDasharray: "5 5",
-            stroke: "#f59e0b"
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "w-full h-full relative",
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      children: [
+        !showPalette && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: togglePalette,
+            className: "absolute top-3 left-3 z-10 p-1.5 bg-[var(--background)] border border-[var(--border)] rounded-md hover:bg-[var(--secondary)] transition-colors group",
+            title: "Open sidebar (M)",
+            children: /* @__PURE__ */ jsx(PanelLeft, { className: "w-4 h-4 text-[var(--muted-foreground)] group-hover:text-[var(--foreground)]" })
           }
-        }
-      }
-    ),
-    hasPause && /* @__PURE__ */ jsx(
-      "foreignObject",
-      {
-        width: 20,
-        height: 20,
-        x: labelX - 10,
-        y: labelY - 10,
-        className: "pointer-events-none",
-        children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-5 h-5 rounded-full bg-amber-500 text-white", children: /* @__PURE__ */ jsx(Pause, { className: "w-3 h-3" }) })
-      }
-    )
-  ] });
+        ),
+        /* @__PURE__ */ jsxs(
+          ReactFlow,
+          {
+            nodes,
+            edges: styledEdges,
+            onNodesChange,
+            onEdgesChange,
+            onConnect,
+            onConnectEnd: handleConnectEnd,
+            onNodeClick: handleNodeClick,
+            onPaneClick: handlePaneClick,
+            onSelectionChange: handleSelectionChange,
+            onNodeContextMenu: handleNodeContextMenu,
+            onEdgeContextMenu: handleEdgeContextMenu,
+            onPaneContextMenu: handlePaneContextMenu,
+            onSelectionContextMenu: handleSelectionContextMenu,
+            onNodeDragStart: handleNodeDragStart,
+            onNodeDrag: handleNodeDrag,
+            onNodeDragStop: handleNodeDragStop,
+            onEdgeClick: handleEdgeClick,
+            isValidConnection: checkValidConnection,
+            nodeTypes: nodeTypesProp ?? nodeTypes,
+            edgeTypes: edgeTypesMap,
+            fitView: true,
+            snapToGrid: true,
+            snapGrid: [16, 16],
+            minZoom: 0.1,
+            maxZoom: 4,
+            nodeDragThreshold: 5,
+            connectionMode: ConnectionMode.Loose,
+            selectionMode: SelectionMode.Partial,
+            selectionOnDrag: true,
+            panOnDrag: [1, 2],
+            onMoveStart: handleMoveStart,
+            onMoveEnd: handleMoveEnd,
+            deleteKeyCode: ["Backspace", "Delete"],
+            defaultEdgeOptions: {
+              animated: false,
+              type: edgeStyle
+            },
+            edgesFocusable: true,
+            edgesReconnectable: true,
+            proOptions: { hideAttribution: true },
+            onlyRenderVisibleElements: nodes.length > 50,
+            children: [
+              /* @__PURE__ */ jsx(GroupOverlay, {}),
+              /* @__PURE__ */ jsx(
+                Background,
+                {
+                  variant: BackgroundVariant.Dots,
+                  gap: 16,
+                  size: 1,
+                  color: "rgba(255, 255, 255, 0.08)"
+                }
+              ),
+              /* @__PURE__ */ jsx(Controls, {}),
+              showMinimap && /* @__PURE__ */ jsx(
+                MiniMap,
+                {
+                  nodeStrokeWidth: 0,
+                  nodeColor: () => DEFAULT_NODE_COLOR,
+                  zoomable: true,
+                  pannable: true,
+                  maskColor: "rgba(0, 0, 0, 0.8)",
+                  className: `!bg-transparent !border-[var(--border)] !rounded-lg transition-opacity duration-300 ${isMinimapVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`
+                }
+              ),
+              /* @__PURE__ */ jsx(HelperLines, { draggingNodeId })
+            ]
+          }
+        ),
+        isContextMenuOpen && /* @__PURE__ */ jsx(
+          ContextMenu,
+          {
+            x: contextMenuPosition.x,
+            y: contextMenuPosition.y,
+            items: contextMenuItems,
+            onClose: closeContextMenu
+          }
+        ),
+        /* @__PURE__ */ jsx(EdgeToolbar, {}),
+        /* @__PURE__ */ jsx(MultiSelectToolbar, { onDownloadAsZip }),
+        /* @__PURE__ */ jsx(NodeDetailModal, {}),
+        /* @__PURE__ */ jsx(ShortcutHelpModal, {}),
+        /* @__PURE__ */ jsx(NodeSearch, {}),
+        /* @__PURE__ */ jsx(ConnectionDropMenu, {}),
+        /* @__PURE__ */ jsx(CostModal, {}),
+        /* @__PURE__ */ jsx(NotificationToast, {}),
+        /* @__PURE__ */ jsx(GlobalImageHistory, {})
+      ]
+    }
+  );
 }
-var PauseEdge = memo(PauseEdgeComponent);
 
 export { ConnectionDropMenu, DEFAULT_GROUP_COLORS, EdgeToolbar, EditableEdge, GROUP_COLORS, GlobalImageHistory, GroupOverlay, HelperLines, NodeSearch, NotificationToast, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas };