@genfeedai/workflow-ui 0.1.3 → 0.1.4

package/dist/chunk-ZD2BADZO.mjs

@@ -0,0 +1,1294 @@
+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 { 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 { jsx, jsxs } from 'react/jsx-runtime';
+
+function useCanvasKeyboardShortcuts({
+  selectedNodeIds,
+  groups,
+  nodes,
+  toggleNodeLock,
+  createGroup,
+  deleteGroup,
+  unlockAllNodes,
+  addNode,
+  togglePalette,
+  fitView,
+  openShortcutHelp,
+  openNodeSearch,
+  deleteSelectedElements
+}) {
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target?.contentEditable === "true" || e.target?.closest?.(
+        '[role="textbox"], [role="combobox"], [role="searchbox"]'
+      )) {
+        return;
+      }
+      const isMod = e.ctrlKey || e.metaKey;
+      if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        deleteSelectedElements();
+        return;
+      }
+      if (e.key === "m" && !isMod && !e.shiftKey) {
+        e.preventDefault();
+        togglePalette();
+      }
+      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 });
+        } else {
+          fitView({ padding: 0.2, duration: 200 });
+        }
+      }
+      if (e.key === "?" && e.shiftKey && !isMod) {
+        e.preventDefault();
+        openShortcutHelp();
+      }
+      if (e.key === "f" && isMod && !e.shiftKey) {
+        e.preventDefault();
+        openNodeSearch();
+      }
+      if (e.key === "l" && !isMod && !e.shiftKey) {
+        e.preventDefault();
+        for (const nodeId of selectedNodeIds) {
+          toggleNodeLock(nodeId);
+        }
+      }
+      if (e.key === "g" && isMod && !e.shiftKey) {
+        e.preventDefault();
+        if (selectedNodeIds.length > 1) {
+          createGroup(selectedNodeIds);
+        }
+      }
+      if (e.key === "g" && isMod && e.shiftKey) {
+        e.preventDefault();
+        for (const nodeId of selectedNodeIds) {
+          const group = groups.find((g) => g.nodeIds.includes(nodeId));
+          if (group) {
+            deleteGroup(group.id);
+            break;
+          }
+        }
+      }
+      if (e.key === "l" && isMod && e.shiftKey) {
+        e.preventDefault();
+        unlockAllNodes();
+      }
+      if (e.key === "I" && e.shiftKey && !isMod) {
+        e.preventDefault();
+        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 };
+        addNode("videoGen", position);
+      }
+      if (e.key === "P" && e.shiftKey && !isMod) {
+        e.preventDefault();
+        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 };
+        addNode("llm", position);
+      }
+      if (e.key === "z" && isMod && !e.shiftKey) {
+        e.preventDefault();
+        useWorkflowStore.temporal.getState().undo();
+      }
+      if (e.key === "z" && isMod && e.shiftKey) {
+        e.preventDefault();
+        useWorkflowStore.temporal.getState().redo();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    selectedNodeIds,
+    toggleNodeLock,
+    createGroup,
+    deleteGroup,
+    unlockAllNodes,
+    groups,
+    nodes,
+    addNode,
+    togglePalette,
+    fitView,
+    openShortcutHelp,
+    openNodeSearch,
+    deleteSelectedElements
+  ]);
+}
+function createPastePayload(clipboard, offsetX, offsetY) {
+  const { nodes: clipboardNodes, edges: clipboardEdges } = clipboard;
+  const idMap = /* @__PURE__ */ new Map();
+  for (const node of clipboardNodes) {
+    idMap.set(node.id, nanoid(8));
+  }
+  const minX = Math.min(...clipboardNodes.map((n) => n.position.x));
+  const minY = Math.min(...clipboardNodes.map((n) => n.position.y));
+  const newNodes = clipboardNodes.map((node) => ({
+    ...node,
+    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
+    }
+  }));
+  const newEdges = clipboardEdges.map((edge) => ({
+    ...edge,
+    id: nanoid(8),
+    source: idMap.get(edge.source),
+    target: idMap.get(edge.target)
+  }));
+  return { nodes: newNodes, edges: newEdges };
+}
+function useNodeActions() {
+  const nodes = useWorkflowStore(selectNodes);
+  const edges = useWorkflowStore(selectEdges);
+  const removeNode = useWorkflowStore(selectRemoveNode);
+  const duplicateNode = useWorkflowStore(selectDuplicateNode);
+  const [clipboard, setClipboard] = useState(null);
+  const deleteNode = useCallback(
+    (nodeId) => {
+      removeNode(nodeId);
+    },
+    [removeNode]
+  );
+  const duplicate = useCallback(
+    (nodeId) => {
+      return duplicateNode(nodeId);
+    },
+    [duplicateNode]
+  );
+  const copyNode = useCallback(
+    (nodeId) => {
+      const node = nodes.find((n) => n.id === nodeId);
+      if (node) {
+        setClipboard({ nodes: [node], edges: [], isCut: false });
+      }
+    },
+    [nodes]
+  );
+  const copyMultipleNodes = useCallback(
+    (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));
+      if (nodesToCopy.length > 0) {
+        setClipboard({ nodes: nodesToCopy, edges: edgesToCopy, isCut: false });
+      }
+    },
+    [nodes, edges]
+  );
+  const cutNode = useCallback(
+    (nodeId) => {
+      const node = nodes.find((n) => n.id === nodeId);
+      if (node) {
+        setClipboard({ nodes: [node], edges: [], isCut: true });
+        removeNode(nodeId);
+      }
+    },
+    [nodes, removeNode]
+  );
+  const cutMultipleNodes = useCallback(
+    (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));
+      if (nodesToCut.length > 0) {
+        setClipboard({ nodes: nodesToCut, edges: edgesToCut, isCut: true });
+        for (const nodeId of nodeIds) {
+          removeNode(nodeId);
+        }
+      }
+    },
+    [nodes, edges, removeNode]
+  );
+  const deleteMultipleNodes = useCallback(
+    (nodeIds) => {
+      for (const nodeId of nodeIds) {
+        removeNode(nodeId);
+      }
+    },
+    [removeNode]
+  );
+  const duplicateMultipleNodes = useCallback(
+    (nodeIds) => {
+      const newIds = [];
+      for (const nodeId of nodeIds) {
+        const newId = duplicateNode(nodeId);
+        if (newId) {
+          newIds.push(newId);
+        }
+      }
+      return newIds;
+    },
+    [duplicateNode]
+  );
+  const pasteNodes = useCallback(
+    (offsetX, offsetY) => {
+      if (!clipboard || clipboard.nodes.length === 0) return null;
+      const payload = createPastePayload(clipboard, offsetX, offsetY);
+      if (clipboard.isCut) {
+        setClipboard(null);
+      }
+      return {
+        nodeIds: payload.nodes.map((n) => n.id),
+        edgeIds: payload.edges.map((e) => e.id)
+      };
+    },
+    [clipboard]
+  );
+  const getPasteData = useCallback(
+    (offsetX, offsetY) => {
+      if (!clipboard || clipboard.nodes.length === 0) return null;
+      const payload = createPastePayload(clipboard, offsetX, offsetY);
+      if (clipboard.isCut) {
+        setClipboard(null);
+      }
+      return payload;
+    },
+    [clipboard]
+  );
+  return {
+    clipboard,
+    deleteNode,
+    duplicate,
+    copyNode,
+    copyMultipleNodes,
+    cutNode,
+    cutMultipleNodes,
+    deleteMultipleNodes,
+    duplicateMultipleNodes,
+    pasteNodes,
+    getPasteData
+  };
+}
+var DEFAULT_NODE_WIDTH = 280;
+var DEFAULT_NODE_HEIGHT = 200;
+var MIN_GAP = 40;
+function getNodeRect(node) {
+  return {
+    x: node.position.x,
+    y: node.position.y,
+    width: node.measured?.width ?? DEFAULT_NODE_WIDTH,
+    height: node.measured?.height ?? DEFAULT_NODE_HEIGHT
+  };
+}
+function getInputHandleIndex(nodeType, handleId) {
+  const nodeDef = NODE_DEFINITIONS[nodeType];
+  if (!nodeDef) return 0;
+  const index = nodeDef.inputs.findIndex((h) => h.id === handleId);
+  return index === -1 ? 0 : index;
+}
+function rectsOverlap(a, b, gap) {
+  return a.x < b.x + b.width + gap && a.x + a.width + gap > b.x && a.y < b.y + b.height + gap && a.y + a.height + gap > b.y;
+}
+function getOverlap(a, b, gap) {
+  const aCenterX = a.x + a.width / 2;
+  const aCenterY = a.y + a.height / 2;
+  const bCenterX = b.x + b.width / 2;
+  const bCenterY = b.y + b.height / 2;
+  const dx = bCenterX - aCenterX;
+  const dy = bCenterY - aCenterY;
+  const minDistX = (a.width + b.width) / 2 + gap;
+  const minDistY = (a.height + b.height) / 2 + gap;
+  const overlapX = minDistX - Math.abs(dx);
+  const overlapY = minDistY - Math.abs(dy);
+  return { x: overlapX, y: overlapY };
+}
+function reorderByHandlePosition(nodes, edges) {
+  const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+  const edgesByTarget = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const existing = edgesByTarget.get(edge.target) ?? [];
+    existing.push(edge);
+    edgesByTarget.set(edge.target, existing);
+  }
+  for (const [targetId, targetEdges] of edgesByTarget) {
+    if (targetEdges.length < 2) continue;
+    const targetNode = nodeMap.get(targetId);
+    if (!targetNode) continue;
+    const sourceInfos = [];
+    for (const edge of targetEdges) {
+      const sourceNode = nodeMap.get(edge.source);
+      if (!sourceNode) continue;
+      const handleIndex = getInputHandleIndex(targetNode.type, edge.targetHandle ?? "");
+      sourceInfos.push({
+        nodeId: edge.source,
+        handleIndex,
+        currentY: sourceNode.position.y
+      });
+    }
+    if (sourceInfos.length < 2) continue;
+    sourceInfos.sort((a, b) => a.handleIndex - b.handleIndex);
+    const sortedYPositions = sourceInfos.map((s) => s.currentY).sort((a, b) => a - b);
+    for (let i = 0; i < sourceInfos.length; i++) {
+      const node = nodeMap.get(sourceInfos[i].nodeId);
+      if (node) {
+        node.position.y = sortedYPositions[i];
+      }
+    }
+  }
+  return nodes;
+}
+function resolveCollisions(nodes) {
+  const maxIterations = 100;
+  let iteration = 0;
+  let hasCollision = true;
+  while (hasCollision && iteration < maxIterations) {
+    hasCollision = false;
+    iteration++;
+    for (let i = 0; i < nodes.length; i++) {
+      for (let j = i + 1; j < nodes.length; j++) {
+        const nodeA = nodes[i];
+        const nodeB = nodes[j];
+        const rectA = getNodeRect(nodeA);
+        const rectB = getNodeRect(nodeB);
+        if (rectsOverlap(rectA, rectB, MIN_GAP)) {
+          hasCollision = true;
+          const overlap = getOverlap(rectA, rectB, MIN_GAP);
+          const aCenterX = rectA.x + rectA.width / 2;
+          const aCenterY = rectA.y + rectA.height / 2;
+          const bCenterX = rectB.x + rectB.width / 2;
+          const bCenterY = rectB.y + rectB.height / 2;
+          if (overlap.x < overlap.y && overlap.x > 0) {
+            const pushX = overlap.x / 2;
+            if (bCenterX >= aCenterX) {
+              nodeA.position.x -= pushX;
+              nodeB.position.x += pushX;
+            } else {
+              nodeA.position.x += pushX;
+              nodeB.position.x -= pushX;
+            }
+          } else if (overlap.y > 0) {
+            const pushY = overlap.y / 2;
+            if (bCenterY >= aCenterY) {
+              nodeA.position.y -= pushY;
+              nodeB.position.y += pushY;
+            } else {
+              nodeA.position.y += pushY;
+              nodeB.position.y -= pushY;
+            }
+          }
+        }
+      }
+    }
+  }
+  return nodes;
+}
+function getLayoutedNodes(nodes, edges, options = {}) {
+  if (nodes.length === 0) return nodes;
+  const { direction = "LR", nodeSpacing = 50, rankSpacing = 120 } = options;
+  const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+  graph.setGraph({
+    rankdir: direction,
+    nodesep: nodeSpacing,
+    ranksep: rankSpacing,
+    marginx: 50,
+    marginy: 50,
+    ranker: "network-simplex",
+    acyclicer: "greedy"
+  });
+  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 });
+  }
+  for (const edge of edges) {
+    graph.setEdge(edge.source, edge.target);
+  }
+  Dagre.layout(graph);
+  const layoutedNodes = nodes.map((node) => {
+    const nodeWithPosition = graph.node(node.id);
+    const width = node.measured?.width ?? DEFAULT_NODE_WIDTH;
+    const height = node.measured?.height ?? DEFAULT_NODE_HEIGHT;
+    return {
+      ...node,
+      position: {
+        x: nodeWithPosition.x - width / 2,
+        y: nodeWithPosition.y - height / 2
+      }
+    };
+  });
+  reorderByHandlePosition(layoutedNodes, edges);
+  return resolveCollisions(layoutedNodes);
+}
+
+// src/hooks/usePaneActions.ts
+function usePaneActions() {
+  const addNode = useWorkflowStore(selectAddNode);
+  const reactFlow = useReactFlow();
+  const addNodeAtPosition = useCallback(
+    (type, screenX, screenY) => {
+      const position = reactFlow.screenToFlowPosition({ x: screenX, y: screenY });
+      addNode(type, position);
+    },
+    [addNode, reactFlow]
+  );
+  const selectAll = useCallback(() => {
+    reactFlow.setNodes(
+      (nds) => nds.map((node) => ({
+        ...node,
+        selected: true
+      }))
+    );
+  }, [reactFlow]);
+  const fitView = useCallback(() => {
+    reactFlow.fitView({ padding: 0.2 });
+  }, [reactFlow]);
+  const autoLayout = useCallback(
+    (direction = "LR") => {
+      const edgeStyle = useSettingsStore.getState().edgeStyle;
+      const currentNodes = reactFlow.getNodes();
+      const currentEdges = reactFlow.getEdges();
+      const layoutedNodes = getLayoutedNodes(currentNodes, currentEdges, { direction });
+      reactFlow.setNodes(layoutedNodes);
+      reactFlow.setEdges(
+        (eds) => eds.map((edge) => ({
+          ...edge,
+          type: edgeStyle
+        }))
+      );
+      setTimeout(() => {
+        reactFlow.fitView({ padding: 0.2 });
+      }, 50);
+    },
+    [reactFlow]
+  );
+  return {
+    addNodeAtPosition,
+    selectAll,
+    fitView,
+    autoLayout
+  };
+}
+function getEdgeMenuItems({ edgeId, onDelete }) {
+  return [
+    {
+      id: "delete",
+      label: "Delete Connection",
+      icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
+      danger: true,
+      onClick: () => onDelete(edgeId)
+    }
+  ];
+}
+function ContextMenuSeparator() {
+  return /* @__PURE__ */ jsx("div", { className: "h-px bg-[var(--border)] my-1" });
+}
+function ContextMenuItem({
+  label,
+  icon,
+  shortcut,
+  disabled,
+  danger,
+  submenu,
+  onClick,
+  onClose,
+  isSelected
+}) {
+  const [showSubmenu, setShowSubmenu] = useState(false);
+  const itemRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const handleMouseEnter = useCallback(() => {
+    if (submenu && !disabled) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      setShowSubmenu(true);
+    }
+  }, [submenu, disabled]);
+  const handleMouseLeave = useCallback(() => {
+    if (submenu) {
+      timeoutRef.current = setTimeout(() => {
+        setShowSubmenu(false);
+      }, 100);
+    }
+  }, [submenu]);
+  const handleSubmenuClick = useCallback(
+    (item) => {
+      if (!item.disabled && item.onClick) {
+        item.onClick();
+        onClose?.();
+      }
+    },
+    [onClose]
+  );
+  const hasSubmenu = submenu && submenu.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: itemRef,
+      className: "relative",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: hasSubmenu ? void 0 : onClick,
+            disabled,
+            className: `
+          w-full flex items-center gap-3 px-3 py-2 text-left text-sm rounded-md
+          transition-colors outline-none
+          ${isSelected || showSubmenu ? "bg-[var(--secondary)]" : ""}
+          ${disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-[var(--secondary)] cursor-pointer"}
+          ${danger && !disabled ? "text-red-400 hover:text-red-300" : "text-[var(--foreground)]"}
+        `,
+            children: [
+              icon && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `w-4 h-4 flex items-center justify-center ${danger ? "text-red-400" : "text-[var(--muted-foreground)]"}`,
+                  children: icon
+                }
+              ),
+              label && /* @__PURE__ */ jsx("span", { className: "flex-1", children: label }),
+              shortcut && !hasSubmenu && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--muted-foreground)] ml-4", children: shortcut }),
+              hasSubmenu && /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-[var(--muted-foreground)]" })
+            ]
+          }
+        ),
+        hasSubmenu && showSubmenu && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute left-full top-0 ml-1 min-w-[200px] py-1 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg backdrop-blur-sm z-50",
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            children: submenu.map((item) => {
+              if (item.separator) {
+                return /* @__PURE__ */ jsx(ContextMenuSeparator, {}, item.id);
+              }
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handleSubmenuClick(item),
+                  disabled: item.disabled,
+                  className: `
+                  w-full flex items-center gap-3 px-3 py-2 text-left text-sm rounded-md
+                  transition-colors outline-none
+                  ${item.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-[var(--secondary)] cursor-pointer"}
+                  ${item.danger && !item.disabled ? "text-red-400 hover:text-red-300" : "text-[var(--foreground)]"}
+                `,
+                  children: [
+                    item.icon && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `w-4 h-4 flex items-center justify-center ${item.danger ? "text-red-400" : "text-[var(--muted-foreground)]"}`,
+                        children: item.icon
+                      }
+                    ),
+                    item.label && /* @__PURE__ */ jsx("span", { className: "flex-1", children: item.label }),
+                    item.shortcut && /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--muted-foreground)] ml-4", children: item.shortcut })
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function createSeparator(id) {
+  return { id, separator: true };
+}
+function ContextMenu({ x, y, items, onClose }) {
+  const menuRef = useRef(null);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [position, setPosition] = useState({ x, y });
+  useEffect(() => {
+    if (menuRef.current) {
+      const rect = menuRef.current.getBoundingClientRect();
+      const padding = 8;
+      let newX = x;
+      let newY = y;
+      if (x + rect.width + padding > window.innerWidth) {
+        newX = x - rect.width;
+      }
+      if (y + rect.height + padding > window.innerHeight) {
+        newY = y - rect.height;
+      }
+      newX = Math.max(padding, newX);
+      newY = Math.max(padding, newY);
+      setPosition({ x: newX, y: newY });
+    }
+  }, [x, y]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [onClose]);
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      const selectableIndices = items.map((item, index) => !item.separator && !item.disabled ? index : -1).filter((index) => index !== -1);
+      switch (event.key) {
+        case "Escape":
+          event.preventDefault();
+          onClose();
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          if (selectableIndices.length > 0) {
+            const currentSelectableIndex = selectableIndices.indexOf(selectedIndex);
+            const nextIndex = currentSelectableIndex === -1 ? 0 : (currentSelectableIndex + 1) % selectableIndices.length;
+            setSelectedIndex(selectableIndices[nextIndex]);
+          }
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          if (selectableIndices.length > 0) {
+            const currentSelectableIndex = selectableIndices.indexOf(selectedIndex);
+            const prevIndex = currentSelectableIndex === -1 ? selectableIndices.length - 1 : (currentSelectableIndex - 1 + selectableIndices.length) % selectableIndices.length;
+            setSelectedIndex(selectableIndices[prevIndex]);
+          }
+          break;
+        case "Enter":
+          event.preventDefault();
+          if (selectedIndex >= 0 && selectedIndex < items.length) {
+            const item = items[selectedIndex];
+            if (!item.separator && !item.disabled && item.onClick) {
+              item.onClick();
+              onClose();
+            }
+          }
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [items, selectedIndex, onClose]);
+  const handleItemClick = useCallback(
+    (item) => {
+      if (!item.disabled && item.onClick) {
+        item.onClick();
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menuRef,
+      className: "fixed z-50 min-w-[200px] py-1 bg-[var(--card)] border border-[var(--border)] rounded-lg shadow-lg backdrop-blur-sm",
+      style: { left: position.x, top: position.y },
+      children: items.map((item, index) => {
+        if (item.separator) {
+          return /* @__PURE__ */ jsx(ContextMenuSeparator, {}, item.id);
+        }
+        return /* @__PURE__ */ jsx(
+          ContextMenuItem,
+          {
+            id: item.id,
+            label: item.label,
+            icon: item.icon,
+            shortcut: item.shortcut,
+            disabled: item.disabled,
+            danger: item.danger,
+            submenu: item.submenu,
+            onClick: () => handleItemClick(item),
+            onClose,
+            isSelected: index === selectedIndex
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+var NODE_COLOR_VALUES = {
+  none: null,
+  purple: "#a855f7",
+  blue: "#3b82f6",
+  green: "#22c55e",
+  yellow: "#eab308",
+  orange: "#f97316",
+  red: "#ef4444",
+  pink: "#ec4899",
+  gray: "#6b7280"
+};
+var NODE_COLOR_LABELS = {
+  none: "Default",
+  purple: "Purple",
+  blue: "Blue",
+  green: "Green",
+  yellow: "Yellow",
+  orange: "Orange",
+  red: "Red",
+  pink: "Pink",
+  gray: "Gray"
+};
+var NODE_COLORS = ["none", "purple", "blue", "green", "yellow", "orange", "red", "pink", "gray"];
+function getNodeMenuItems({
+  nodeId,
+  isLocked,
+  hasMediaOutput,
+  currentColor,
+  onDuplicate,
+  onLock,
+  onUnlock,
+  onCut,
+  onCopy,
+  onDelete,
+  onSetAsThumbnail,
+  onSetColor
+}) {
+  const items = [
+    {
+      id: "duplicate",
+      label: "Duplicate",
+      icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
+      shortcut: "\u2318D",
+      onClick: () => onDuplicate(nodeId)
+    }
+  ];
+  if (hasMediaOutput && onSetAsThumbnail) {
+    items.push({
+      id: "setThumbnail",
+      label: "Set as Thumbnail",
+      icon: /* @__PURE__ */ jsx(Image, { className: "w-4 h-4" }),
+      onClick: () => onSetAsThumbnail(nodeId)
+    });
+  }
+  if (onSetColor) {
+    const colorSubmenu = NODE_COLORS.map((color) => {
+      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",
+          {
+            className: "w-4 h-4 rounded-sm border border-border",
+            style: { backgroundColor: colorValue || "transparent" }
+          }
+        ),
+        onClick: () => onSetColor(nodeId, colorValue)
+      };
+    });
+    items.push({
+      id: "setColor",
+      label: "Set Color",
+      icon: /* @__PURE__ */ jsx(Palette, { className: "w-4 h-4" }),
+      submenu: colorSubmenu
+    });
+  }
+  items.push(createSeparator("separator-1"));
+  items.push(
+    isLocked ? {
+      id: "unlock",
+      label: "Unlock Node",
+      icon: /* @__PURE__ */ jsx(LockOpen, { className: "w-4 h-4" }),
+      shortcut: "L",
+      onClick: () => onUnlock(nodeId)
+    } : {
+      id: "lock",
+      label: "Lock Node",
+      icon: /* @__PURE__ */ jsx(Lock, { className: "w-4 h-4" }),
+      shortcut: "L",
+      onClick: () => onLock(nodeId)
+    }
+  );
+  items.push(createSeparator("separator-2"));
+  items.push(
+    {
+      id: "cut",
+      label: "Cut",
+      icon: /* @__PURE__ */ jsx(Scissors, { className: "w-4 h-4" }),
+      shortcut: "\u2318X",
+      onClick: () => onCut(nodeId)
+    },
+    {
+      id: "copy",
+      label: "Copy",
+      icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
+      shortcut: "\u2318C",
+      onClick: () => onCopy(nodeId)
+    }
+  );
+  items.push(createSeparator("separator-3"));
+  items.push({
+    id: "delete",
+    label: "Delete",
+    icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
+    shortcut: "\u232B",
+    danger: true,
+    onClick: () => onDelete(nodeId)
+  });
+  return items;
+}
+var NODE_ICONS = {
+  Image: Image,
+  MessageSquare,
+  FileText,
+  Volume2,
+  FileVideo,
+  Sparkles,
+  Video,
+  Brain,
+  Mic,
+  AudioLines,
+  Navigation,
+  Maximize2,
+  Wand2,
+  Layers,
+  Scissors: Scissors,
+  Film,
+  Crop,
+  Maximize,
+  Grid3X3,
+  Pencil,
+  Subtitles,
+  CheckCircle,
+  ArrowRightToLine,
+  ArrowLeftFromLine,
+  GitBranch
+};
+var CATEGORY_LABELS = {
+  input: "Input",
+  ai: "AI Generation",
+  processing: "Processing",
+  output: "Output",
+  composition: "Composition"
+};
+var CATEGORY_ICONS = {
+  input: Image,
+  ai: Sparkles,
+  processing: Wand2,
+  output: Monitor,
+  composition: GitBranch
+};
+function getPaneMenuItems({
+  screenX,
+  screenY,
+  hasClipboard,
+  onAddNode,
+  onPaste,
+  onSelectAll,
+  onFitView,
+  onAutoLayout
+}) {
+  const nodesByCategory = getNodesByCategory();
+  const categories = ["input", "ai", "processing", "output", "composition"].filter((cat) => nodesByCategory[cat].length > 0);
+  const addNodeItems = categories.map((category) => {
+    const CategoryIcon = CATEGORY_ICONS[category];
+    const nodes = nodesByCategory[category];
+    return {
+      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 {
+          id: `add-${node.type}`,
+          label: node.label,
+          icon: /* @__PURE__ */ jsx(NodeIcon, { className: "w-4 h-4" }),
+          onClick: () => onAddNode(node.type, screenX, screenY)
+        };
+      })
+    };
+  });
+  return [
+    ...addNodeItems,
+    createSeparator("separator-1"),
+    {
+      id: "paste",
+      label: "Paste",
+      icon: /* @__PURE__ */ jsx(Clipboard, { className: "w-4 h-4" }),
+      shortcut: "\u2318V",
+      disabled: !hasClipboard,
+      onClick: onPaste
+    },
+    createSeparator("separator-2"),
+    {
+      id: "select-all",
+      label: "Select All",
+      shortcut: "\u2318A",
+      onClick: onSelectAll
+    },
+    {
+      id: "fit-view",
+      label: "Fit View",
+      icon: /* @__PURE__ */ jsx(Maximize, { className: "w-4 h-4" }),
+      shortcut: "F",
+      onClick: onFitView
+    },
+    {
+      id: "auto-layout",
+      label: "Auto-layout Nodes",
+      icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "w-4 h-4" }),
+      shortcut: "L",
+      onClick: onAutoLayout
+    }
+  ];
+}
+function getSelectionMenuItems({
+  nodeIds,
+  onGroup,
+  onDuplicateAll,
+  onLockAll,
+  onUnlockAll,
+  onAlignHorizontal,
+  onAlignVertical,
+  onDeleteAll
+}) {
+  const count = nodeIds.length;
+  return [
+    {
+      id: "group",
+      label: "Create Group",
+      icon: /* @__PURE__ */ jsx(Group, { className: "w-4 h-4" }),
+      shortcut: "\u2318G",
+      onClick: () => onGroup(nodeIds)
+    },
+    {
+      id: "duplicate-all",
+      label: `Duplicate ${count} Nodes`,
+      icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
+      shortcut: "\u2318D",
+      onClick: () => onDuplicateAll(nodeIds)
+    },
+    createSeparator("separator-1"),
+    {
+      id: "lock-all",
+      label: "Lock All",
+      icon: /* @__PURE__ */ jsx(Lock, { className: "w-4 h-4" }),
+      shortcut: "L",
+      onClick: () => onLockAll(nodeIds)
+    },
+    {
+      id: "unlock-all",
+      label: "Unlock All",
+      icon: /* @__PURE__ */ jsx(LockOpen, { className: "w-4 h-4" }),
+      onClick: () => onUnlockAll(nodeIds)
+    },
+    createSeparator("separator-2"),
+    {
+      id: "align-horizontal",
+      label: "Align Horizontally",
+      icon: /* @__PURE__ */ jsx(AlignHorizontalJustifyCenter, { className: "w-4 h-4" }),
+      onClick: () => onAlignHorizontal(nodeIds)
+    },
+    {
+      id: "align-vertical",
+      label: "Align Vertically",
+      icon: /* @__PURE__ */ jsx(AlignVerticalJustifyCenter, { className: "w-4 h-4" }),
+      onClick: () => onAlignVertical(nodeIds)
+    },
+    createSeparator("separator-3"),
+    {
+      id: "delete-all",
+      label: `Delete ${count} Nodes`,
+      icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
+      shortcut: "\u232B",
+      danger: true,
+      onClick: () => onDeleteAll(nodeIds)
+    }
+  ];
+}
+
+// src/hooks/useContextMenu.ts
+function useContextMenu() {
+  const {
+    isOpen,
+    position,
+    menuType,
+    targetId,
+    targetIds,
+    openNodeMenu,
+    openEdgeMenu,
+    openPaneMenu,
+    openSelectionMenu,
+    close
+  } = useContextMenuStore();
+  const { workflowsApi } = useWorkflowUIConfig();
+  const nodes = useWorkflowStore(selectNodes);
+  const removeEdge = useWorkflowStore((state) => state.removeEdge);
+  const toggleNodeLock = useWorkflowStore(selectToggleNodeLock);
+  const createGroup = useWorkflowStore(selectCreateGroup);
+  const workflowId = useWorkflowStore(selectWorkflowId);
+  const addNodesAndEdges = useWorkflowStore((state) => state.addNodesAndEdges);
+  const setSelectedNodeIds = useWorkflowStore(selectSetSelectedNodeIds);
+  const updateNodeData = useWorkflowStore(selectUpdateNodeData);
+  const {
+    clipboard,
+    deleteNode,
+    duplicate,
+    copyNode,
+    cutNode,
+    deleteMultipleNodes,
+    duplicateMultipleNodes,
+    getPasteData
+  } = useNodeActions();
+  const { addNodeAtPosition, selectAll, fitView, autoLayout } = usePaneActions();
+  const reactFlow = useReactFlow();
+  const stableHandlersRef = useRef({
+    duplicate,
+    copyNode,
+    cutNode,
+    deleteNode,
+    deleteMultipleNodes,
+    duplicateMultipleNodes,
+    removeEdge,
+    addNodeAtPosition,
+    selectAll,
+    fitView,
+    autoLayout
+  });
+  stableHandlersRef.current = {
+    duplicate,
+    copyNode,
+    cutNode,
+    deleteNode,
+    deleteMultipleNodes,
+    duplicateMultipleNodes,
+    removeEdge,
+    addNodeAtPosition,
+    selectAll,
+    fitView,
+    autoLayout
+  };
+  const lockNode = useCallback(
+    (nodeId) => {
+      const node = nodes.find((n) => n.id === nodeId);
+      if (node && !node.data.locked) {
+        toggleNodeLock(nodeId);
+      }
+    },
+    [nodes, toggleNodeLock]
+  );
+  const unlockNode = useCallback(
+    (nodeId) => {
+      const node = nodes.find((n) => n.id === nodeId);
+      if (node?.data.locked) {
+        toggleNodeLock(nodeId);
+      }
+    },
+    [nodes, toggleNodeLock]
+  );
+  const groupNodes = useCallback(
+    (nodeIds) => {
+      if (nodeIds.length > 1) {
+        createGroup(nodeIds);
+      }
+    },
+    [createGroup]
+  );
+  const lockAllNodes = useCallback(
+    (nodeIds) => {
+      for (const nodeId of nodeIds) {
+        const node = nodes.find((n) => n.id === nodeId);
+        if (node && !node.data.locked) {
+          toggleNodeLock(nodeId);
+        }
+      }
+    },
+    [nodes, toggleNodeLock]
+  );
+  const unlockAllNodes = useCallback(
+    (nodeIds) => {
+      for (const nodeId of nodeIds) {
+        const node = nodes.find((n) => n.id === nodeId);
+        if (node?.data.locked) {
+          toggleNodeLock(nodeId);
+        }
+      }
+    },
+    [nodes, toggleNodeLock]
+  );
+  const alignNodesHorizontally = useCallback(
+    (nodeIds) => {
+      if (nodeIds.length < 2) return;
+      const selectedNodes = nodes.filter((n) => nodeIds.includes(n.id));
+      if (selectedNodes.length < 2) return;
+      const avgY = selectedNodes.reduce((sum, n) => sum + n.position.y, 0) / selectedNodes.length;
+      reactFlow.setNodes(
+        (nds) => nds.map(
+          (node) => nodeIds.includes(node.id) ? { ...node, position: { ...node.position, y: avgY } } : node
+        )
+      );
+    },
+    [nodes, reactFlow]
+  );
+  const alignNodesVertically = useCallback(
+    (nodeIds) => {
+      if (nodeIds.length < 2) return;
+      const selectedNodes = nodes.filter((n) => nodeIds.includes(n.id));
+      if (selectedNodes.length < 2) return;
+      const avgX = selectedNodes.reduce((sum, n) => sum + n.position.x, 0) / selectedNodes.length;
+      reactFlow.setNodes(
+        (nds) => nds.map(
+          (node) => nodeIds.includes(node.id) ? { ...node, position: { ...node.position, x: avgX } } : node
+        )
+      );
+    },
+    [nodes, reactFlow]
+  );
+  const pasteNodes = useCallback(() => {
+    if (!clipboard) return;
+    const flowPosition = reactFlow.screenToFlowPosition({
+      x: position.x,
+      y: position.y
+    });
+    const pasteData = getPasteData(flowPosition.x, flowPosition.y);
+    if (!pasteData) return;
+    addNodesAndEdges(pasteData.nodes, pasteData.edges);
+    setSelectedNodeIds(pasteData.nodes.map((n) => n.id));
+  }, [clipboard, position, reactFlow, getPasteData, addNodesAndEdges, setSelectedNodeIds]);
+  const setNodeColor = useCallback(
+    (nodeId, color) => {
+      updateNodeData(nodeId, { color: color || void 0 });
+    },
+    [updateNodeData]
+  );
+  const setAsThumbnail = useCallback(
+    async (nodeId) => {
+      if (!workflowId || !workflowsApi) return;
+      const node = nodes.find((n) => n.id === nodeId);
+      if (!node) return;
+      const data = node.data;
+      const thumbnailUrl = data.outputVideo || data.outputImage;
+      if (!thumbnailUrl) return;
+      try {
+        await workflowsApi.setThumbnail(workflowId, thumbnailUrl, nodeId);
+      } catch {
+      }
+    },
+    [workflowId, workflowsApi, nodes]
+  );
+  const hasMediaOutput = useCallback(
+    (nodeId) => {
+      const node = nodes.find((n) => n.id === nodeId);
+      if (!node) return false;
+      const data = node.data;
+      return Boolean(data.outputVideo || data.outputImage);
+    },
+    [nodes]
+  );
+  const getMenuItems = useCallback(() => {
+    if (!menuType) return [];
+    const handlers = stableHandlersRef.current;
+    switch (menuType) {
+      case "node": {
+        if (!targetId) return [];
+        const node = nodes.find((n) => n.id === targetId);
+        const isLocked = Boolean(node?.data.locked);
+        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,
+          onCopy: handlers.copyNode,
+          onDelete: handlers.deleteNode,
+          onSetAsThumbnail: workflowId && workflowsApi ? setAsThumbnail : void 0,
+          onSetColor: setNodeColor
+        });
+      }
+      case "edge":
+        if (!targetId) return [];
+        return getEdgeMenuItems({
+          edgeId: targetId,
+          onDelete: handlers.removeEdge
+        });
+      case "pane":
+        return getPaneMenuItems({
+          screenX: position.x,
+          screenY: position.y,
+          hasClipboard: !!clipboard,
+          onAddNode: handlers.addNodeAtPosition,
+          onPaste: pasteNodes,
+          onSelectAll: handlers.selectAll,
+          onFitView: handlers.fitView,
+          onAutoLayout: () => handlers.autoLayout("LR")
+        });
+      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
+        });
+      default:
+        return [];
+    }
+  }, [
+    menuType,
+    targetId,
+    targetIds,
+    nodes,
+    position,
+    clipboard,
+    lockNode,
+    unlockNode,
+    pasteNodes,
+    groupNodes,
+    lockAllNodes,
+    unlockAllNodes,
+    alignNodesHorizontally,
+    alignNodesVertically,
+    hasMediaOutput,
+    setAsThumbnail,
+    setNodeColor,
+    workflowId,
+    workflowsApi
+  ]);
+  const menuItems = useMemo(() => getMenuItems(), [getMenuItems]);
+  return {
+    isOpen,
+    position,
+    menuType,
+    menuItems,
+    openNodeMenu,
+    openEdgeMenu,
+    openPaneMenu,
+    openSelectionMenu,
+    close
+  };
+}
+
+export { ContextMenu, useCanvasKeyboardShortcuts, useContextMenu, useNodeActions, usePaneActions };