@genfeedai/workflow-ui 0.2.3 → 0.2.4

package/dist/{chunk-ZD2BADZO.mjs → chunk-ORVDYXDP.mjs}

@@ -1,13 +1,13 @@
-import { selectNodes, selectEdges, selectRemoveNode, selectDuplicateNode, selectAddNode, useContextMenuStore, selectToggleNodeLock, selectCreateGroup, selectWorkflowId, selectSetSelectedNodeIds, selectUpdateNodeData } from './chunk-PCIWWD37.mjs';
-import { useSettingsStore } from './chunk-LT3ZJJL6.mjs';
-import { useWorkflowStore } from './chunk-R727OFBR.mjs';
-import { useWorkflowUIConfig } from './chunk-FT33LFII.mjs';
+import { useWorkflowUIConfig } from './chunk-YUIK4AHM.mjs';
+import { selectNodes, selectEdges, selectRemoveNode, selectDuplicateNode, selectAddNode, useContextMenuStore, selectToggleNodeLock, selectCreateGroup, selectWorkflowId, selectSetSelectedNodeIds, selectUpdateNodeData } from './chunk-7LV4UAUS.mjs';
+import { useSettingsStore } from './chunk-OJWVEEMM.mjs';
+import { useWorkflowStore } from './chunk-GPYIIWD5.mjs';
 import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
 import { nanoid } from 'nanoid';
 import { useReactFlow } from '@xyflow/react';
 import Dagre from '@dagrejs/dagre';
 import { getNodesByCategory, NODE_DEFINITIONS } from '@genfeedai/types';
-import { ChevronRight, Group, Copy, Lock, LockOpen, AlignHorizontalJustifyCenter, AlignVerticalJustifyCenter, Trash2, GitBranch, ArrowLeftFromLine, ArrowRightToLine, CheckCircle, Subtitles, Pencil, Grid3X3, Maximize, Crop, Film, Scissors, Layers, Wand2, Maximize2, Navigation, AudioLines, Mic, Brain, Video, Sparkles, FileVideo, Volume2, FileText, MessageSquare, Image, Monitor, Clipboard, LayoutGrid, Palette } from 'lucide-react';
+import { ChevronRight, Group, Copy, Lock, LockOpen, AlignHorizontalJustifyCenter, AlignVerticalJustifyCenter, Trash2, Wand2, Volume2, Video, Subtitles, Sparkles, Scissors, Pencil, Navigation, Mic, MessageSquare, Maximize2, Maximize, Layers, Image, Grid3X3, GitBranch, Film, FileVideo, FileText, Crop, CheckCircle, Brain, AudioLines, ArrowRightToLine, ArrowLeftFromLine, Monitor, Clipboard, LayoutGrid, Palette } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function useCanvasKeyboardShortcuts({
@@ -45,10 +45,12 @@ function useCanvasKeyboardShortcuts({
       if (e.key === "f" && !isMod && !e.shiftKey) {
         e.preventDefault();
         if (selectedNodeIds.length > 0) {
-          const selectedNodes = nodes.filter((n) => selectedNodeIds.includes(n.id));
-          fitView({ nodes: selectedNodes, padding: 0.3, duration: 200 });
+          const selectedNodes = nodes.filter(
+            (n) => selectedNodeIds.includes(n.id)
+          );
+          fitView({ duration: 200, nodes: selectedNodes, padding: 0.3 });
         } else {
-          fitView({ padding: 0.2, duration: 200 });
+          fitView({ duration: 200, padding: 0.2 });
         }
       }
       if (e.key === "?" && e.shiftKey && !isMod) {
@@ -87,22 +89,34 @@ function useCanvasKeyboardShortcuts({
       }
       if (e.key === "I" && e.shiftKey && !isMod) {
         e.preventDefault();
-        const position = { x: window.innerWidth / 2 - 150, y: window.innerHeight / 2 - 150 };
+        const position = {
+          x: window.innerWidth / 2 - 150,
+          y: window.innerHeight / 2 - 150
+        };
         addNode("imageGen", position);
       }
       if (e.key === "V" && e.shiftKey && !isMod) {
         e.preventDefault();
-        const position = { x: window.innerWidth / 2 - 150, y: window.innerHeight / 2 - 150 };
+        const position = {
+          x: window.innerWidth / 2 - 150,
+          y: window.innerHeight / 2 - 150
+        };
         addNode("videoGen", position);
       }
       if (e.key === "P" && e.shiftKey && !isMod) {
         e.preventDefault();
-        const position = { x: window.innerWidth / 2 - 150, y: window.innerHeight / 2 - 150 };
+        const position = {
+          x: window.innerWidth / 2 - 150,
+          y: window.innerHeight / 2 - 150
+        };
         addNode("prompt", position);
       }
       if ((e.key === "L" || e.key === "l") && e.shiftKey && !isMod) {
         e.preventDefault();
-        const position = { x: window.innerWidth / 2 - 150, y: window.innerHeight / 2 - 150 };
+        const position = {
+          x: window.innerWidth / 2 - 150,
+          y: window.innerHeight / 2 - 150
+        };
         addNode("llm", position);
       }
       if (e.key === "z" && isMod && !e.shiftKey) {
@@ -142,18 +156,18 @@ function createPastePayload(clipboard, offsetX, offsetY) {
   const minY = Math.min(...clipboardNodes.map((n) => n.position.y));
   const newNodes = clipboardNodes.map((node) => ({
     ...node,
+    data: {
+      ...node.data,
+      error: void 0,
+      jobId: null,
+      status: "idle"
+    },
     id: idMap.get(node.id),
     position: {
       x: node.position.x - minX + offsetX,
       y: node.position.y - minY + offsetY
     },
-    selected: true,
-    data: {
-      ...node.data,
-      status: "idle",
-      jobId: null,
-      error: void 0
-    }
+    selected: true
   }));
   const newEdges = clipboardEdges.map((edge) => ({
     ...edge,
@@ -161,7 +175,7 @@ function createPastePayload(clipboard, offsetX, offsetY) {
     source: idMap.get(edge.source),
     target: idMap.get(edge.target)
   }));
-  return { nodes: newNodes, edges: newEdges };
+  return { edges: newEdges, nodes: newNodes };
 }
 function useNodeActions() {
   const nodes = useWorkflowStore(selectNodes);
@@ -185,7 +199,7 @@ function useNodeActions() {
     (nodeId) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (node) {
-        setClipboard({ nodes: [node], edges: [], isCut: false });
+        setClipboard({ edges: [], isCut: false, nodes: [node] });
       }
     },
     [nodes]
@@ -194,9 +208,11 @@ function useNodeActions() {
     (nodeIds) => {
       const nodeSet = new Set(nodeIds);
       const nodesToCopy = nodes.filter((n) => nodeSet.has(n.id));
-      const edgesToCopy = edges.filter((e) => nodeSet.has(e.source) && nodeSet.has(e.target));
+      const edgesToCopy = edges.filter(
+        (e) => nodeSet.has(e.source) && nodeSet.has(e.target)
+      );
       if (nodesToCopy.length > 0) {
-        setClipboard({ nodes: nodesToCopy, edges: edgesToCopy, isCut: false });
+        setClipboard({ edges: edgesToCopy, isCut: false, nodes: nodesToCopy });
       }
     },
     [nodes, edges]
@@ -205,7 +221,7 @@ function useNodeActions() {
     (nodeId) => {
       const node = nodes.find((n) => n.id === nodeId);
       if (node) {
-        setClipboard({ nodes: [node], edges: [], isCut: true });
+        setClipboard({ edges: [], isCut: true, nodes: [node] });
         removeNode(nodeId);
       }
     },
@@ -215,9 +231,11 @@ function useNodeActions() {
     (nodeIds) => {
       const nodeSet = new Set(nodeIds);
       const nodesToCut = nodes.filter((n) => nodeSet.has(n.id));
-      const edgesToCut = edges.filter((e) => nodeSet.has(e.source) && nodeSet.has(e.target));
+      const edgesToCut = edges.filter(
+        (e) => nodeSet.has(e.source) && nodeSet.has(e.target)
+      );
       if (nodesToCut.length > 0) {
-        setClipboard({ nodes: nodesToCut, edges: edgesToCut, isCut: true });
+        setClipboard({ edges: edgesToCut, isCut: true, nodes: nodesToCut });
         for (const nodeId of nodeIds) {
           removeNode(nodeId);
         }
@@ -254,8 +272,8 @@ function useNodeActions() {
         setClipboard(null);
       }
       return {
-        nodeIds: payload.nodes.map((n) => n.id),
-        edgeIds: payload.edges.map((e) => e.id)
+        edgeIds: payload.edges.map((e) => e.id),
+        nodeIds: payload.nodes.map((n) => n.id)
       };
     },
     [clipboard]
@@ -273,16 +291,16 @@ function useNodeActions() {
   );
   return {
     clipboard,
-    deleteNode,
-    duplicate,
-    copyNode,
     copyMultipleNodes,
-    cutNode,
+    copyNode,
     cutMultipleNodes,
+    cutNode,
     deleteMultipleNodes,
+    deleteNode,
+    duplicate,
     duplicateMultipleNodes,
-    pasteNodes,
-    getPasteData
+    getPasteData,
+    pasteNodes
   };
 }
 var DEFAULT_NODE_WIDTH = 280;
@@ -290,10 +308,10 @@ var DEFAULT_NODE_HEIGHT = 200;
 var MIN_GAP = 40;
 function getNodeRect(node) {
   return {
-    x: node.position.x,
-    y: node.position.y,
+    height: node.measured?.height ?? DEFAULT_NODE_HEIGHT,
     width: node.measured?.width ?? DEFAULT_NODE_WIDTH,
-    height: node.measured?.height ?? DEFAULT_NODE_HEIGHT
+    x: node.position.x,
+    y: node.position.y
   };
 }
 function getInputHandleIndex(nodeType, handleId) {
@@ -334,11 +352,14 @@ function reorderByHandlePosition(nodes, edges) {
     for (const edge of targetEdges) {
       const sourceNode = nodeMap.get(edge.source);
       if (!sourceNode) continue;
-      const handleIndex = getInputHandleIndex(targetNode.type, edge.targetHandle ?? "");
+      const handleIndex = getInputHandleIndex(
+        targetNode.type,
+        edge.targetHandle ?? ""
+      );
       sourceInfos.push({
-        nodeId: edge.source,
+        currentY: sourceNode.position.y,
         handleIndex,
-        currentY: sourceNode.position.y
+        nodeId: edge.source
       });
     }
     if (sourceInfos.length < 2) continue;
@@ -403,18 +424,18 @@ function getLayoutedNodes(nodes, edges, options = {}) {
   const { direction = "LR", nodeSpacing = 50, rankSpacing = 120 } = options;
   const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   graph.setGraph({
-    rankdir: direction,
-    nodesep: nodeSpacing,
-    ranksep: rankSpacing,
+    acyclicer: "greedy",
     marginx: 50,
     marginy: 50,
+    nodesep: nodeSpacing,
+    rankdir: direction,
     ranker: "network-simplex",
-    acyclicer: "greedy"
+    ranksep: rankSpacing
   });
   for (const node of nodes) {
     const width = node.measured?.width ?? DEFAULT_NODE_WIDTH;
     const height = node.measured?.height ?? DEFAULT_NODE_HEIGHT;
-    graph.setNode(node.id, { width, height });
+    graph.setNode(node.id, { height, width });
   }
   for (const edge of edges) {
     graph.setEdge(edge.source, edge.target);
@@ -442,7 +463,10 @@ function usePaneActions() {
   const reactFlow = useReactFlow();
   const addNodeAtPosition = useCallback(
     (type, screenX, screenY) => {
-      const position = reactFlow.screenToFlowPosition({ x: screenX, y: screenY });
+      const position = reactFlow.screenToFlowPosition({
+        x: screenX,
+        y: screenY
+      });
       addNode(type, position);
     },
     [addNode, reactFlow]
@@ -463,7 +487,9 @@ function usePaneActions() {
       const edgeStyle = useSettingsStore.getState().edgeStyle;
       const currentNodes = reactFlow.getNodes();
       const currentEdges = reactFlow.getEdges();
-      const layoutedNodes = getLayoutedNodes(currentNodes, currentEdges, { direction });
+      const layoutedNodes = getLayoutedNodes(currentNodes, currentEdges, {
+        direction
+      });
       reactFlow.setNodes(layoutedNodes);
       reactFlow.setEdges(
         (eds) => eds.map((edge) => ({
@@ -479,18 +505,21 @@ function usePaneActions() {
   );
   return {
     addNodeAtPosition,
-    selectAll,
+    autoLayout,
     fitView,
-    autoLayout
+    selectAll
   };
 }
-function getEdgeMenuItems({ edgeId, onDelete }) {
+function getEdgeMenuItems({
+  edgeId,
+  onDelete
+}) {
   return [
     {
+      danger: true,
+      icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
       id: "delete",
       label: "Delete Connection",
-      icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
-      danger: true,
       onClick: () => onDelete(edgeId)
     }
   ];
@@ -730,28 +759,38 @@ function ContextMenu({ x, y, items, onClose }) {
   );
 }
 var NODE_COLOR_VALUES = {
-  none: null,
-  purple: "#a855f7",
   blue: "#3b82f6",
+  gray: "#6b7280",
   green: "#22c55e",
-  yellow: "#eab308",
+  none: null,
   orange: "#f97316",
-  red: "#ef4444",
   pink: "#ec4899",
-  gray: "#6b7280"
+  purple: "#a855f7",
+  red: "#ef4444",
+  yellow: "#eab308"
 };
 var NODE_COLOR_LABELS = {
-  none: "Default",
-  purple: "Purple",
   blue: "Blue",
+  gray: "Gray",
   green: "Green",
-  yellow: "Yellow",
+  none: "Default",
   orange: "Orange",
-  red: "Red",
   pink: "Pink",
-  gray: "Gray"
+  purple: "Purple",
+  red: "Red",
+  yellow: "Yellow"
 };
-var NODE_COLORS = ["none", "purple", "blue", "green", "yellow", "orange", "red", "pink", "gray"];
+var NODE_COLORS = [
+  "none",
+  "purple",
+  "blue",
+  "green",
+  "yellow",
+  "orange",
+  "red",
+  "pink",
+  "gray"
+];
 function getNodeMenuItems({
   nodeId,
   isLocked,
@@ -768,18 +807,18 @@ function getNodeMenuItems({
 }) {
   const items = [
     {
+      icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
       id: "duplicate",
       label: "Duplicate",
-      icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
-      shortcut: "\u2318D",
-      onClick: () => onDuplicate(nodeId)
+      onClick: () => onDuplicate(nodeId),
+      shortcut: "\u2318D"
     }
   ];
   if (hasMediaOutput && onSetAsThumbnail) {
     items.push({
+      icon: /* @__PURE__ */ jsx(Image, { className: "w-4 h-4" }),
       id: "setThumbnail",
       label: "Set as Thumbnail",
-      icon: /* @__PURE__ */ jsx(Image, { className: "w-4 h-4" }),
       onClick: () => onSetAsThumbnail(nodeId)
     });
   }
@@ -788,8 +827,6 @@ function getNodeMenuItems({
       const colorValue = NODE_COLOR_VALUES[color];
       const isSelected = colorValue === currentColor || color === "none" && !currentColor;
       return {
-        id: `color-${color}`,
-        label: `${isSelected ? "\u2713 " : ""}${NODE_COLOR_LABELS[color]}`,
         icon: /* @__PURE__ */ jsx(
           "div",
           {
@@ -797,100 +834,102 @@ function getNodeMenuItems({
             style: { backgroundColor: colorValue || "transparent" }
           }
         ),
+        id: `color-${color}`,
+        label: `${isSelected ? "\u2713 " : ""}${NODE_COLOR_LABELS[color]}`,
         onClick: () => onSetColor(nodeId, colorValue)
       };
     });
     items.push({
+      icon: /* @__PURE__ */ jsx(Palette, { className: "w-4 h-4" }),
       id: "setColor",
       label: "Set Color",
-      icon: /* @__PURE__ */ jsx(Palette, { className: "w-4 h-4" }),
       submenu: colorSubmenu
     });
   }
   items.push(createSeparator("separator-1"));
   items.push(
     isLocked ? {
+      icon: /* @__PURE__ */ jsx(LockOpen, { className: "w-4 h-4" }),
       id: "unlock",
       label: "Unlock Node",
-      icon: /* @__PURE__ */ jsx(LockOpen, { className: "w-4 h-4" }),
-      shortcut: "L",
-      onClick: () => onUnlock(nodeId)
+      onClick: () => onUnlock(nodeId),
+      shortcut: "L"
     } : {
+      icon: /* @__PURE__ */ jsx(Lock, { className: "w-4 h-4" }),
       id: "lock",
       label: "Lock Node",
-      icon: /* @__PURE__ */ jsx(Lock, { className: "w-4 h-4" }),
-      shortcut: "L",
-      onClick: () => onLock(nodeId)
+      onClick: () => onLock(nodeId),
+      shortcut: "L"
     }
   );
   items.push(createSeparator("separator-2"));
   items.push(
     {
+      icon: /* @__PURE__ */ jsx(Scissors, { className: "w-4 h-4" }),
       id: "cut",
       label: "Cut",
-      icon: /* @__PURE__ */ jsx(Scissors, { className: "w-4 h-4" }),
-      shortcut: "\u2318X",
-      onClick: () => onCut(nodeId)
+      onClick: () => onCut(nodeId),
+      shortcut: "\u2318X"
     },
     {
+      icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
       id: "copy",
       label: "Copy",
-      icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
-      shortcut: "\u2318C",
-      onClick: () => onCopy(nodeId)
+      onClick: () => onCopy(nodeId),
+      shortcut: "\u2318C"
     }
   );
   items.push(createSeparator("separator-3"));
   items.push({
+    danger: true,
+    icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
     id: "delete",
     label: "Delete",
-    icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
-    shortcut: "\u232B",
-    danger: true,
-    onClick: () => onDelete(nodeId)
+    onClick: () => onDelete(nodeId),
+    shortcut: "\u232B"
   });
   return items;
 }
 var NODE_ICONS = {
-  Image: Image,
-  MessageSquare,
+  ArrowLeftFromLine,
+  ArrowRightToLine,
+  AudioLines,
+  Brain,
+  CheckCircle,
+  Crop,
   FileText,
-  Volume2,
   FileVideo,
-  Sparkles,
-  Video,
-  Brain,
-  Mic,
-  AudioLines,
-  Navigation,
-  Maximize2,
-  Wand2,
-  Layers,
-  Scissors: Scissors,
   Film,
-  Crop,
-  Maximize,
+  GitBranch,
   Grid3X3,
+  Image: Image,
+  Layers,
+  Maximize,
+  Maximize2,
+  MessageSquare,
+  Mic,
+  Navigation,
   Pencil,
+  Scissors: Scissors,
+  Sparkles,
   Subtitles,
-  CheckCircle,
-  ArrowRightToLine,
-  ArrowLeftFromLine,
-  GitBranch
+  Video,
+  Volume2,
+  Wand2
 };
 var CATEGORY_LABELS = {
-  input: "Input",
   ai: "AI Generation",
-  processing: "Processing",
+  composition: "Composition",
+  input: "Input",
   output: "Output",
-  composition: "Composition"
+  processing: "Processing"
 };
 var CATEGORY_ICONS = {
-  input: Image,
   ai: Sparkles,
-  processing: Wand2,
+  composition: GitBranch,
+  input: Image,
   output: Monitor,
-  composition: GitBranch
+  processing: Wand2
 };
 function getPaneMenuItems({
   screenX,
@@ -908,15 +947,15 @@ function getPaneMenuItems({
     const CategoryIcon = CATEGORY_ICONS[category];
     const nodes = nodesByCategory[category];
     return {
+      icon: /* @__PURE__ */ jsx(CategoryIcon, { className: "w-4 h-4" }),
       id: `add-${category}`,
       label: CATEGORY_LABELS[category],
-      icon: /* @__PURE__ */ jsx(CategoryIcon, { className: "w-4 h-4" }),
       submenu: nodes.map((node) => {
         const NodeIcon = NODE_ICONS[node.icon] ?? Sparkles;
         return {
+          icon: /* @__PURE__ */ jsx(NodeIcon, { className: "w-4 h-4" }),
           id: `add-${node.type}`,
           label: node.label,
-          icon: /* @__PURE__ */ jsx(NodeIcon, { className: "w-4 h-4" }),
           onClick: () => onAddNode(node.type, screenX, screenY)
         };
       })
@@ -926,33 +965,33 @@ function getPaneMenuItems({
     ...addNodeItems,
     createSeparator("separator-1"),
     {
+      disabled: !hasClipboard,
+      icon: /* @__PURE__ */ jsx(Clipboard, { className: "w-4 h-4" }),
       id: "paste",
       label: "Paste",
-      icon: /* @__PURE__ */ jsx(Clipboard, { className: "w-4 h-4" }),
-      shortcut: "\u2318V",
-      disabled: !hasClipboard,
-      onClick: onPaste
+      onClick: onPaste,
+      shortcut: "\u2318V"
     },
     createSeparator("separator-2"),
     {
       id: "select-all",
       label: "Select All",
-      shortcut: "\u2318A",
-      onClick: onSelectAll
+      onClick: onSelectAll,
+      shortcut: "\u2318A"
     },
     {
+      icon: /* @__PURE__ */ jsx(Maximize, { className: "w-4 h-4" }),
       id: "fit-view",
       label: "Fit View",
-      icon: /* @__PURE__ */ jsx(Maximize, { className: "w-4 h-4" }),
-      shortcut: "F",
-      onClick: onFitView
+      onClick: onFitView,
+      shortcut: "F"
     },
     {
+      icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "w-4 h-4" }),
       id: "auto-layout",
       label: "Auto-layout Nodes",
-      icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "w-4 h-4" }),
-      shortcut: "L",
-      onClick: onAutoLayout
+      onClick: onAutoLayout,
+      shortcut: "L"
     }
   ];
 }
@@ -969,54 +1008,54 @@ function getSelectionMenuItems({
   const count = nodeIds.length;
   return [
     {
+      icon: /* @__PURE__ */ jsx(Group, { className: "w-4 h-4" }),
       id: "group",
       label: "Create Group",
-      icon: /* @__PURE__ */ jsx(Group, { className: "w-4 h-4" }),
-      shortcut: "\u2318G",
-      onClick: () => onGroup(nodeIds)
+      onClick: () => onGroup(nodeIds),
+      shortcut: "\u2318G"
     },
     {
+      icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
       id: "duplicate-all",
       label: `Duplicate ${count} Nodes`,
-      icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
-      shortcut: "\u2318D",
-      onClick: () => onDuplicateAll(nodeIds)
+      onClick: () => onDuplicateAll(nodeIds),
+      shortcut: "\u2318D"
     },
     createSeparator("separator-1"),
     {
+      icon: /* @__PURE__ */ jsx(Lock, { className: "w-4 h-4" }),
       id: "lock-all",
       label: "Lock All",
-      icon: /* @__PURE__ */ jsx(Lock, { className: "w-4 h-4" }),
-      shortcut: "L",
-      onClick: () => onLockAll(nodeIds)
+      onClick: () => onLockAll(nodeIds),
+      shortcut: "L"
     },
     {
+      icon: /* @__PURE__ */ jsx(LockOpen, { className: "w-4 h-4" }),
       id: "unlock-all",
       label: "Unlock All",
-      icon: /* @__PURE__ */ jsx(LockOpen, { className: "w-4 h-4" }),
       onClick: () => onUnlockAll(nodeIds)
     },
     createSeparator("separator-2"),
     {
+      icon: /* @__PURE__ */ jsx(AlignHorizontalJustifyCenter, { className: "w-4 h-4" }),
       id: "align-horizontal",
       label: "Align Horizontally",
-      icon: /* @__PURE__ */ jsx(AlignHorizontalJustifyCenter, { className: "w-4 h-4" }),
       onClick: () => onAlignHorizontal(nodeIds)
     },
     {
+      icon: /* @__PURE__ */ jsx(AlignVerticalJustifyCenter, { className: "w-4 h-4" }),
       id: "align-vertical",
       label: "Align Vertically",
-      icon: /* @__PURE__ */ jsx(AlignVerticalJustifyCenter, { className: "w-4 h-4" }),
       onClick: () => onAlignVertical(nodeIds)
     },
     createSeparator("separator-3"),
     {
+      danger: true,
+      icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
       id: "delete-all",
       label: `Delete ${count} Nodes`,
-      icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
-      shortcut: "\u232B",
-      danger: true,
-      onClick: () => onDeleteAll(nodeIds)
+      onClick: () => onDeleteAll(nodeIds),
+      shortcut: "\u232B"
     }
   ];
 }
@@ -1057,30 +1096,30 @@ function useContextMenu() {
   const { addNodeAtPosition, selectAll, fitView, autoLayout } = usePaneActions();
   const reactFlow = useReactFlow();
   const stableHandlersRef = useRef({
-    duplicate,
+    addNodeAtPosition,
+    autoLayout,
     copyNode,
     cutNode,
-    deleteNode,
     deleteMultipleNodes,
+    deleteNode,
+    duplicate,
     duplicateMultipleNodes,
-    removeEdge,
-    addNodeAtPosition,
-    selectAll,
     fitView,
-    autoLayout
+    removeEdge,
+    selectAll
   });
   stableHandlersRef.current = {
-    duplicate,
+    addNodeAtPosition,
+    autoLayout,
     copyNode,
     cutNode,
-    deleteNode,
     deleteMultipleNodes,
+    deleteNode,
+    duplicate,
     duplicateMultipleNodes,
-    removeEdge,
-    addNodeAtPosition,
-    selectAll,
     fitView,
-    autoLayout
+    removeEdge,
+    selectAll
   };
   const lockNode = useCallback(
     (nodeId) => {
@@ -1168,7 +1207,14 @@ function useContextMenu() {
     if (!pasteData) return;
     addNodesAndEdges(pasteData.nodes, pasteData.edges);
     setSelectedNodeIds(pasteData.nodes.map((n) => n.id));
-  }, [clipboard, position, reactFlow, getPasteData, addNodesAndEdges, setSelectedNodeIds]);
+  }, [
+    clipboard,
+    position,
+    reactFlow,
+    getPasteData,
+    addNodesAndEdges,
+    setSelectedNodeIds
+  ]);
   const setNodeColor = useCallback(
     (nodeId, color) => {
       updateNodeData(nodeId, { color: color || void 0 });
@@ -1210,18 +1256,18 @@ function useContextMenu() {
         const nodeHasMediaOutput = hasMediaOutput(targetId);
         const currentColor = node?.data?.color;
         return getNodeMenuItems({
-          nodeId: targetId,
-          isLocked,
-          hasMediaOutput: nodeHasMediaOutput,
           currentColor,
-          onDuplicate: handlers.duplicate,
-          onLock: lockNode,
-          onUnlock: unlockNode,
-          onCut: handlers.cutNode,
+          hasMediaOutput: nodeHasMediaOutput,
+          isLocked,
+          nodeId: targetId,
           onCopy: handlers.copyNode,
+          onCut: handlers.cutNode,
           onDelete: handlers.deleteNode,
+          onDuplicate: handlers.duplicate,
+          onLock: lockNode,
           onSetAsThumbnail: workflowId && workflowsApi ? setAsThumbnail : void 0,
-          onSetColor: setNodeColor
+          onSetColor: setNodeColor,
+          onUnlock: unlockNode
         });
       }
       case "edge":
@@ -1232,26 +1278,26 @@ function useContextMenu() {
         });
       case "pane":
         return getPaneMenuItems({
-          screenX: position.x,
-          screenY: position.y,
           hasClipboard: !!clipboard,
           onAddNode: handlers.addNodeAtPosition,
+          onAutoLayout: () => handlers.autoLayout("LR"),
+          onFitView: handlers.fitView,
           onPaste: pasteNodes,
           onSelectAll: handlers.selectAll,
-          onFitView: handlers.fitView,
-          onAutoLayout: () => handlers.autoLayout("LR")
+          screenX: position.x,
+          screenY: position.y
         });
       case "selection":
         if (!targetIds || targetIds.length === 0) return [];
         return getSelectionMenuItems({
           nodeIds: targetIds,
-          onGroup: groupNodes,
-          onDuplicateAll: handlers.duplicateMultipleNodes,
-          onLockAll: lockAllNodes,
-          onUnlockAll: unlockAllNodes,
           onAlignHorizontal: alignNodesHorizontally,
           onAlignVertical: alignNodesVertically,
-          onDeleteAll: handlers.deleteMultipleNodes
+          onDeleteAll: handlers.deleteMultipleNodes,
+          onDuplicateAll: handlers.duplicateMultipleNodes,
+          onGroup: groupNodes,
+          onLockAll: lockAllNodes,
+          onUnlockAll: unlockAllNodes
         });
       default:
         return [];
@@ -1279,15 +1325,15 @@ function useContextMenu() {
   ]);
   const menuItems = useMemo(() => getMenuItems(), [getMenuItems]);
   return {
+    close,
     isOpen,
-    position,
-    menuType,
     menuItems,
-    openNodeMenu,
+    menuType,
     openEdgeMenu,
+    openNodeMenu,
     openPaneMenu,
     openSelectionMenu,
-    close
+    position
   };
 }