@genfeedai/workflow-ui 0.1.0

package/dist/chunk-VOGL2WCE.mjs

@@ -0,0 +1,1542 @@
+import { nodeTypes } from './chunk-XV5Z5XYR.mjs';
+import { getMediaFromNode } from './chunk-E323WAZG.mjs';
+import { useCanvasKeyboardShortcuts } from './chunk-UQQUWGHW.mjs';
+import { Button } from './chunk-7SKSRSS7.mjs';
+import { usePromptEditorStore } from './chunk-CV4M7CNU.mjs';
+import { useUIStore, useSettingsStore, useExecutionStore } from './chunk-CSUBLSKZ.mjs';
+import { require_dist, useWorkflowStore } from './chunk-BJ3R5R32.mjs';
+import { __toESM } from './chunk-AC6TWLRT.mjs';
+import { useNodes, ViewportPortal, useViewport, useStore, getBezierPath, BaseEdge, useReactFlow, ReactFlow, SelectionMode, ConnectionMode, Background, BackgroundVariant, Controls, MiniMap } from '@xyflow/react';
+import { Pause, Palette, Lock, Unlock, Trash2, Search, X, Keyboard, PanelLeft, Download, ChevronLeft, ChevronRight, ZoomOut, ZoomIn } from 'lucide-react';
+import { memo, useMemo, useState, useCallback, useEffect, useRef } from 'react';
+import '@xyflow/react/dist/style.css';
+import { clsx } from 'clsx';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Image from 'next/image';
+
+// src/canvas/WorkflowCanvas.tsx
+var import_types3 = __toESM(require_dist());
+
+// 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"
+  },
+  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"
+  }
+};
+var DEFAULT_GROUP_COLORS = [
+  "purple",
+  "blue",
+  "green",
+  "yellow",
+  "orange",
+  "red",
+  "pink",
+  "gray"
+];
+var HEADER_HEIGHT = 32;
+function calculateGroupBounds(nodeIds, nodeMap) {
+  if (nodeIds.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  let foundAny = false;
+  for (const nodeId of nodeIds) {
+    const node = nodeMap.get(nodeId);
+    if (!node) continue;
+    foundAny = true;
+    const width = node.measured?.width ?? 200;
+    const height = node.measured?.height ?? 100;
+    minX = Math.min(minX, node.position.x);
+    minY = Math.min(minY, node.position.y);
+    maxX = Math.max(maxX, node.position.x + width);
+    maxY = Math.max(maxY, node.position.y + height);
+  }
+  if (!foundAny) return null;
+  const padding = 24;
+  return {
+    x: minX - padding,
+    y: minY - padding - HEADER_HEIGHT,
+    width: maxX - minX + padding * 2,
+    height: maxY - minY + padding * 2 + HEADER_HEIGHT
+  };
+}
+function GroupBackground({ group, bounds }) {
+  const colors = GROUP_COLORS[group.color ?? "purple"];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "absolute rounded-lg border-2 border-dashed",
+        colors.bg,
+        colors.border,
+        group.isLocked && "opacity-60"
+      ),
+      style: {
+        left: bounds.x,
+        top: bounds.y,
+        width: bounds.width,
+        height: bounds.height
+      }
+    }
+  );
+}
+function GroupControls({ group, bounds, nodeMap, zoom }) {
+  const { setNodes } = useReactFlow();
+  const { toggleGroupLock, deleteGroup, setGroupColor, setDirty, renameGroup } = useWorkflowStore();
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editName, setEditName] = useState(group.name);
+  const inputRef = useRef(null);
+  const colorPickerRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartRef = useRef(null);
+  const nodeStartPositionsRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (!isEditing) {
+      setEditName(group.name);
+    }
+  }, [group.name, isEditing]);
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (colorPickerRef.current && !colorPickerRef.current.contains(e.target)) {
+        setShowColorPicker(false);
+      }
+    };
+    if (showColorPicker) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showColorPicker]);
+  const handleNameSubmit = useCallback(() => {
+    if (editName.trim() && editName !== group.name) {
+      renameGroup(group.id, editName.trim());
+    } else {
+      setEditName(group.name);
+    }
+    setIsEditing(false);
+  }, [editName, group.name, group.id, renameGroup]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        handleNameSubmit();
+      } else if (e.key === "Escape") {
+        setEditName(group.name);
+        setIsEditing(false);
+      }
+    },
+    [handleNameSubmit, group.name]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (group.isLocked) return;
+      if (e.target.closest("button") || e.target.closest("input")) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(true);
+      dragStartRef.current = { x: e.clientX, y: e.clientY };
+      const positions = /* @__PURE__ */ new Map();
+      for (const nodeId of group.nodeIds) {
+        const node = nodeMap.get(nodeId);
+        if (node) {
+          positions.set(nodeId, { x: node.position.x, y: node.position.y });
+        }
+      }
+      nodeStartPositionsRef.current = positions;
+    },
+    [group.isLocked, group.nodeIds, nodeMap]
+  );
+  useEffect(() => {
+    if (!isDragging) return;
+    const handleMouseMove = (e) => {
+      if (!dragStartRef.current) return;
+      const deltaX = (e.clientX - dragStartRef.current.x) / zoom;
+      const deltaY = (e.clientY - dragStartRef.current.y) / zoom;
+      setNodes(
+        (currentNodes) => currentNodes.map((node) => {
+          const startPos = nodeStartPositionsRef.current.get(node.id);
+          if (!startPos) return node;
+          return {
+            ...node,
+            position: {
+              x: startPos.x + deltaX,
+              y: startPos.y + deltaY
+            }
+          };
+        })
+      );
+    };
+    const handleMouseUp = () => {
+      setDirty(true);
+      setIsDragging(false);
+      dragStartRef.current = null;
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, zoom, setNodes, setDirty]);
+  const colors = GROUP_COLORS[group.color ?? "purple"];
+  const handleColorSelect = (color) => {
+    setGroupColor(group.id, color);
+    setShowColorPicker(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onMouseDown: handleMouseDown,
+        className: clsx(
+          "absolute flex items-center justify-between px-3 rounded-t-lg select-none pointer-events-auto",
+          colors.bg,
+          colors.border,
+          "border-2 border-b-0 border-dashed",
+          !group.isLocked && "cursor-grab",
+          isDragging && "cursor-grabbing",
+          group.isLocked && "opacity-60"
+        ),
+        style: {
+          left: bounds.x,
+          top: bounds.y,
+          width: bounds.width,
+          height: HEADER_HEIGHT
+        },
+        children: [
+          isEditing ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: editName,
+              onChange: (e) => setEditName(e.target.value),
+              onBlur: handleNameSubmit,
+              onKeyDown: handleKeyDown,
+              className: clsx(
+                "flex-1 bg-transparent border-none outline-none text-sm font-medium px-0 py-0",
+                colors.text
+              ),
+              style: { minWidth: 0 }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx("font-medium truncate cursor-text", colors.text),
+              style: { fontSize: 14 },
+              onClick: () => setIsEditing(true),
+              children: group.name
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative", ref: colorPickerRef, children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShowColorPicker(!showColorPicker);
+                  },
+                  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" })
+                }
+              ),
+              showColorPicker && /* @__PURE__ */ jsx("div", { className: "absolute top-8 right-0 z-50 bg-card border border-border rounded-lg shadow-lg p-2 flex gap-1 flex-wrap w-[120px]", children: DEFAULT_GROUP_COLORS.map((color) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleColorSelect(color);
+                  },
+                  className: clsx(
+                    "w-6 h-6 rounded-md border-2 transition-transform hover:scale-110",
+                    GROUP_COLORS[color].bg,
+                    color === group.color ? "border-white" : "border-transparent"
+                  ),
+                  title: color
+                },
+                color
+              )) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  toggleGroupLock(group.id);
+                },
+                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" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  deleteGroup(group.id);
+                },
+                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" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    group.isLocked && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          "absolute px-2 py-0.5 rounded text-xs font-medium pointer-events-none",
+          colors.bg,
+          colors.text
+        ),
+        style: {
+          left: bounds.x + 12,
+          top: bounds.y + HEADER_HEIGHT + 8
+        },
+        children: "LOCKED"
+      }
+    )
+  ] });
+}
+function GroupBackgroundsPortalComponent() {
+  const { groups } = useWorkflowStore();
+  const nodes = useNodes();
+  const nodeMap = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+  const groupBounds = useMemo(() => {
+    const result = /* @__PURE__ */ new Map();
+    for (const group of groups) {
+      const bounds = calculateGroupBounds(group.nodeIds, nodeMap);
+      if (bounds) {
+        result.set(group.id, bounds);
+      }
+    }
+    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);
+  }) }) });
+}
+function GroupControlsOverlayComponent() {
+  const { groups } = useWorkflowStore();
+  const nodes = useNodes();
+  const { zoom } = useViewport();
+  const nodeMap = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+  const groupBounds = useMemo(() => {
+    const result = /* @__PURE__ */ new Map();
+    for (const group of groups) {
+      const bounds = calculateGroupBounds(group.nodeIds, nodeMap);
+      if (bounds) {
+        result.set(group.id, bounds);
+      }
+    }
+    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
+      },
+      group.id
+    );
+  }) }) });
+}
+var GroupBackgroundsPortal = memo(GroupBackgroundsPortalComponent);
+var GroupControlsOverlay = memo(GroupControlsOverlayComponent);
+function GroupOverlayComponent() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(GroupBackgroundsPortal, {}),
+    /* @__PURE__ */ jsx(GroupControlsOverlay, {})
+  ] });
+}
+var GroupOverlay = memo(GroupOverlayComponent);
+var SNAP_THRESHOLD = 5;
+function HelperLinesComponent({ draggingNodeId }) {
+  const [lines, setLines] = useState([]);
+  const nodes = useWorkflowStore((state) => state.nodes);
+  const transform = useStore((state) => state.transform);
+  const calculateHelperLines = useCallback(
+    (draggingId) => {
+      const draggingNode = nodes.find((n) => n.id === draggingId);
+      if (!draggingNode) {
+        setLines([]);
+        return;
+      }
+      const otherNodes = nodes.filter((n) => n.id !== draggingId && !n.selected);
+      if (otherNodes.length === 0) {
+        setLines([]);
+        return;
+      }
+      const dragWidth = draggingNode.measured?.width ?? draggingNode.width ?? 220;
+      const dragHeight = draggingNode.measured?.height ?? draggingNode.height ?? 100;
+      const dragLeft = draggingNode.position.x;
+      const dragRight = dragLeft + dragWidth;
+      const dragTop = draggingNode.position.y;
+      const dragBottom = dragTop + dragHeight;
+      const dragCenterX = dragLeft + dragWidth / 2;
+      const dragCenterY = dragTop + dragHeight / 2;
+      const newLines = [];
+      for (const node of otherNodes) {
+        const nodeWidth = node.measured?.width ?? node.width ?? 220;
+        const nodeHeight = node.measured?.height ?? node.height ?? 100;
+        const nodeLeft = node.position.x;
+        const nodeRight = nodeLeft + nodeWidth;
+        const nodeTop = node.position.y;
+        const nodeBottom = nodeTop + nodeHeight;
+        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" }
+        ];
+        for (const check of verticalChecks) {
+          if (Math.abs(check.dragPos - check.nodePos) <= SNAP_THRESHOLD) {
+            newLines.push({
+              type: "vertical",
+              position: check.nodePos,
+              start: Math.min(dragTop, nodeTop) - 20,
+              end: Math.max(dragBottom, nodeBottom) + 20
+            });
+          }
+        }
+        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" }
+        ];
+        for (const check of horizontalChecks) {
+          if (Math.abs(check.dragPos - check.nodePos) <= SNAP_THRESHOLD) {
+            newLines.push({
+              type: "horizontal",
+              position: check.nodePos,
+              start: Math.min(dragLeft, nodeLeft) - 20,
+              end: Math.max(dragRight, nodeRight) + 20
+            });
+          }
+        }
+      }
+      const uniqueLines = [];
+      const seenPositions = /* @__PURE__ */ new Set();
+      for (const line of newLines) {
+        const key = `${line.type}-${Math.round(line.position)}`;
+        if (!seenPositions.has(key)) {
+          seenPositions.add(key);
+          const existingLine = uniqueLines.find(
+            (l) => l.type === line.type && Math.abs(l.position - line.position) < 1
+          );
+          if (existingLine) {
+            existingLine.start = Math.min(existingLine.start, line.start);
+            existingLine.end = Math.max(existingLine.end, line.end);
+          } else {
+            uniqueLines.push(line);
+          }
+        }
+      }
+      setLines(uniqueLines);
+    },
+    [nodes]
+  );
+  useEffect(() => {
+    if (draggingNodeId) {
+      calculateHelperLines(draggingNodeId);
+    } else {
+      setLines([]);
+    }
+  }, [draggingNodeId, calculateHelperLines]);
+  if (lines.length === 0) return null;
+  const [tx, ty, zoom] = transform;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "absolute inset-0 pointer-events-none z-[1000]",
+      style: { width: "100%", height: "100%", overflow: "visible" },
+      children: lines.map((line, index) => {
+        if (line.type === "vertical") {
+          const x = line.position * zoom + tx;
+          const y1 = line.start * zoom + ty;
+          const y2 = line.end * zoom + ty;
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: x,
+              y1,
+              x2: x,
+              y2,
+              stroke: "#3b82f6",
+              strokeWidth: 1,
+              strokeDasharray: "4 2"
+            },
+            `v-${index}`
+          );
+        } else {
+          const y = line.position * zoom + ty;
+          const x1 = line.start * zoom + tx;
+          const x2 = line.end * zoom + tx;
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1,
+              y1: y,
+              x2,
+              y2: y,
+              stroke: "#3b82f6",
+              strokeWidth: 1,
+              strokeDasharray: "4 2"
+            },
+            `h-${index}`
+          );
+        }
+      })
+    }
+  );
+}
+var HelperLines = memo(HelperLinesComponent);
+
+// src/canvas/NodeSearch.tsx
+var import_types = __toESM(require_dist());
+function NodeSearch() {
+  const { activeModal, closeModal } = useUIStore();
+  const { nodes, setSelectedNodeIds } = useWorkflowStore();
+  const reactFlow = useReactFlow();
+  const [search, setSearch] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const listRef = useRef(null);
+  const backdropRef = useRef(null);
+  const inputRef = useRef(null);
+  const isOpen = activeModal === "nodeSearch";
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+  const filteredNodes = useMemo(() => {
+    if (!search.trim()) return nodes;
+    const query = search.toLowerCase();
+    return nodes.filter((node) => {
+      const label = (node.data.label || "").toLowerCase();
+      const type = (node.type || "").toLowerCase();
+      const comment = (node.data.comment || "").toLowerCase();
+      const nodeDefLabel = import_types.NODE_DEFINITIONS[node.type]?.label?.toLowerCase() || "";
+      return label.includes(query) || type.includes(query) || comment.includes(query) || nodeDefLabel.includes(query);
+    });
+  }, [nodes, search]);
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, []);
+  useEffect(() => {
+    if (listRef.current) {
+      const selectedItem = listRef.current.children[selectedIndex];
+      selectedItem?.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedIndex]);
+  const handleSelectNode = useCallback(
+    (node) => {
+      setSelectedNodeIds([node.id]);
+      reactFlow.fitView({
+        nodes: [node],
+        padding: 0.5,
+        duration: 300
+      });
+      closeModal();
+      setSearch("");
+    },
+    [setSelectedNodeIds, reactFlow, closeModal]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((prev) => Math.min(prev + 1, filteredNodes.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === "Enter" && filteredNodes[selectedIndex]) {
+        e.preventDefault();
+        handleSelectNode(filteredNodes[selectedIndex]);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        handleClose();
+      }
+    },
+    [filteredNodes, selectedIndex, handleSelectNode]
+  );
+  const handleClose = () => {
+    closeModal();
+    setSearch("");
+    setSelectedIndex(0);
+  };
+  const handleBackdropClick = (e) => {
+    if (e.target === backdropRef.current) {
+      handleClose();
+    }
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: backdropRef,
+      onClick: handleBackdropClick,
+      className: "fixed inset-0 z-50 flex items-start justify-center pt-[20vh]",
+      style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+      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 = import_types.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"
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+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" },
+  // 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" },
+  // 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" },
+  // 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" },
+  // 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" },
+  // Help
+  { keys: "?", description: "Show this help", category: "Help" }
+];
+var CATEGORIES = ["Navigation", "Selection", "Editing", "Nodes", "Organization", "Help"];
+function ShortcutHelpModal() {
+  const { activeModal, closeModal } = useUIStore();
+  const [searchQuery, setSearchQuery] = useState("");
+  const backdropRef = useRef(null);
+  const inputRef = useRef(null);
+  const isOpen = activeModal === "shortcutHelp";
+  const filteredShortcuts = useMemo(() => {
+    if (!searchQuery.trim()) return SHORTCUTS;
+    const query = searchQuery.toLowerCase();
+    return SHORTCUTS.filter(
+      (shortcut) => shortcut.keys.toLowerCase().includes(query) || shortcut.description.toLowerCase().includes(query) || shortcut.category.toLowerCase().includes(query)
+    );
+  }, [searchQuery]);
+  const groupedShortcuts = useMemo(() => {
+    const grouped = {};
+    for (const category of CATEGORIES) {
+      const items = filteredShortcuts.filter((s) => s.category === category);
+      if (items.length > 0) {
+        grouped[category] = items;
+      }
+    }
+    return grouped;
+  }, [filteredShortcuts]);
+  const handleClose = () => {
+    closeModal();
+    setSearchQuery("");
+  };
+  const handleBackdropClick = (e) => {
+    if (e.target === backdropRef.current) {
+      handleClose();
+    }
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: backdropRef,
+      onClick: handleBackdropClick,
+      className: "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]",
+      style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-xl w-full max-w-2xl",
+          role: "dialog",
+          "aria-label": "Keyboard Shortcuts",
+          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(Keyboard, { className: "w-4 h-4 text-[var(--muted-foreground)]" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Keyboard Shortcuts" })
+              ] }),
+              /* @__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", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative mb-4", 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 shortcuts...",
+                    value: searchQuery,
+                    onChange: (e) => setSearchQuery(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__ */ jsxs("div", { className: "max-h-[60vh] overflow-y-auto space-y-6 pr-2", children: [
+                Object.entries(groupedShortcuts).map(([category, shortcuts]) => /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-muted-foreground mb-2", children: category }),
+                  /* @__PURE__ */ jsx("div", { className: "space-y-1", children: shortcuts.map((shortcut) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "flex items-center justify-between py-1.5 px-2 rounded hover:bg-secondary/50",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-sm", children: shortcut.description }),
+                        /* @__PURE__ */ jsx("kbd", { className: "px-2 py-1 text-xs font-mono bg-secondary rounded border border-border", children: shortcut.keys })
+                      ]
+                    },
+                    shortcut.keys
+                  )) })
+                ] }, category)),
+                filteredShortcuts.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-center text-muted-foreground py-8", children: [
+                  'No shortcuts found for "',
+                  searchQuery,
+                  '"'
+                ] })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/nodes/NodeDetailModal.tsx
+var import_types2 = __toESM(require_dist());
+var PROMPT_NODE_TYPES = ["prompt"];
+function NodeDetailModal() {
+  const { activeModal, nodeDetailNodeId, nodeDetailStartIndex, closeNodeDetailModal } = useUIStore();
+  const { getNodeById } = useWorkflowStore();
+  const { openEditor } = usePromptEditorStore();
+  const [zoomLevel, setZoomLevel] = useState(1);
+  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
+  const [isPanning, setIsPanning] = useState(false);
+  const [panStart, setPanStart] = useState({ x: 0, y: 0 });
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const node = useMemo(() => {
+    if (!nodeDetailNodeId) return null;
+    return getNodeById(nodeDetailNodeId);
+  }, [nodeDetailNodeId, getNodeById]);
+  useEffect(() => {
+    if (activeModal !== "nodeDetail" || !node) return;
+    if (PROMPT_NODE_TYPES.includes(node.type)) {
+      const promptData = node.data;
+      closeNodeDetailModal();
+      openEditor(node.id, promptData.prompt ?? "");
+    }
+  }, [activeModal, node, closeNodeDetailModal, openEditor]);
+  const mediaInfo = useMemo(() => {
+    if (!node) return { url: null, type: null };
+    return getMediaFromNode(node.type, node.data);
+  }, [node]);
+  const nodeDef = useMemo(() => {
+    if (!node) return null;
+    return import_types2.NODE_DEFINITIONS[node.type];
+  }, [node]);
+  const imageUrls = mediaInfo.urls ?? [];
+  const hasMultipleImages = imageUrls.length > 1;
+  const displayUrl = hasMultipleImages ? imageUrls[currentIndex] ?? mediaInfo.url : mediaInfo.url;
+  const goToPrevious = useCallback(() => {
+    setCurrentIndex((prev) => Math.max(prev - 1, 0));
+    setZoomLevel(1);
+    setPanOffset({ x: 0, y: 0 });
+  }, []);
+  const goToNext = useCallback(() => {
+    setCurrentIndex((prev) => Math.min(prev + 1, imageUrls.length - 1));
+    setZoomLevel(1);
+    setPanOffset({ x: 0, y: 0 });
+  }, [imageUrls.length]);
+  useEffect(() => {
+    setZoomLevel(1);
+    setPanOffset({ x: 0, y: 0 });
+    setCurrentIndex(nodeDetailStartIndex);
+  }, [nodeDetailNodeId, nodeDetailStartIndex]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (activeModal !== "nodeDetail") return;
+      if (e.key === "Escape") {
+        closeNodeDetailModal();
+      }
+      if (e.key === "+" || e.key === "=") {
+        setZoomLevel((prev) => Math.min(prev + 0.25, 4));
+      }
+      if (e.key === "-") {
+        setZoomLevel((prev) => Math.max(prev - 0.25, 0.25));
+      }
+      if (e.key === "0") {
+        setZoomLevel(1);
+        setPanOffset({ x: 0, y: 0 });
+      }
+      if (e.key === "ArrowLeft") {
+        goToPrevious();
+      }
+      if (e.key === "ArrowRight") {
+        goToNext();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [activeModal, closeNodeDetailModal, goToPrevious, goToNext]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (zoomLevel > 1) {
+        setIsPanning(true);
+        setPanStart({ x: e.clientX - panOffset.x, y: e.clientY - panOffset.y });
+      }
+    },
+    [zoomLevel, panOffset]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (isPanning) {
+        setPanOffset({
+          x: e.clientX - panStart.x,
+          y: e.clientY - panStart.y
+        });
+      }
+    },
+    [isPanning, panStart]
+  );
+  const handleMouseUp = useCallback(() => {
+    setIsPanning(false);
+  }, []);
+  const handleDownload = useCallback(() => {
+    const url = displayUrl ?? mediaInfo.url;
+    if (!url) return;
+    const link = document.createElement("a");
+    link.href = url;
+    const suffix = hasMultipleImages ? `_${currentIndex + 1}` : "";
+    link.download = `${node?.data.label || "output"}${suffix}.${mediaInfo.type === "video" ? "mp4" : "png"}`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }, [displayUrl, mediaInfo, node, hasMultipleImages, currentIndex]);
+  if (activeModal !== "nodeDetail" || !node || !nodeDef) {
+    return null;
+  }
+  if (PROMPT_NODE_TYPES.includes(node.type)) {
+    return null;
+  }
+  const nodeData = node.data;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 bg-black/80", onClick: closeNodeDetailModal }),
+    /* @__PURE__ */ jsxs("div", { className: "fixed inset-4 z-50 flex flex-col bg-card rounded-lg border border-border shadow-xl overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium text-foreground", children: nodeData.label }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground bg-secondary px-2 py-0.5 rounded", children: nodeDef.label })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          displayUrl && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: handleDownload, children: [
+            /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-1" }),
+            "Download"
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: closeNodeDetailModal, children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative w-full h-full flex items-center justify-center bg-background overflow-hidden",
+          onMouseDown: handleMouseDown,
+          onMouseMove: handleMouseMove,
+          onMouseUp: handleMouseUp,
+          onMouseLeave: handleMouseUp,
+          style: { cursor: zoomLevel > 1 ? isPanning ? "grabbing" : "grab" : "default" },
+          children: [
+            displayUrl ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "transition-transform duration-100",
+                style: {
+                  transform: `scale(${zoomLevel}) translate(${panOffset.x / zoomLevel}px, ${panOffset.y / zoomLevel}px)`
+                },
+                children: [
+                  mediaInfo.type === "image" && /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      src: displayUrl,
+                      alt: nodeData.label,
+                      width: 800,
+                      height: 600,
+                      className: "max-h-[calc(100vh-200px)] max-w-[calc(100vw-100px)] object-contain rounded-lg",
+                      unoptimized: true
+                    }
+                  ),
+                  mediaInfo.type === "video" && /* @__PURE__ */ jsx(
+                    "video",
+                    {
+                      src: displayUrl,
+                      controls: true,
+                      autoPlay: true,
+                      loop: true,
+                      className: "max-h-[calc(100vh-200px)] max-w-[calc(100vw-100px)] rounded-lg"
+                    }
+                  )
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-lg", children: "No preview available" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: "Generate content to see the preview" })
+            ] }),
+            hasMultipleImages && currentIndex > 0 && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                onClick: goToPrevious,
+                className: "absolute left-4 top-1/2 -translate-y-1/2 bg-card/80 hover:bg-card border border-border shadow-md",
+                title: "Previous image (\u2190)",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5" })
+              }
+            ),
+            hasMultipleImages && currentIndex < imageUrls.length - 1 && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon-sm",
+                onClick: goToNext,
+                className: "absolute right-4 top-1/2 -translate-y-1/2 bg-card/80 hover:bg-card border border-border shadow-md",
+                title: "Next image (\u2192)",
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5" })
+              }
+            ),
+            hasMultipleImages && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 bg-card/80 border border-border rounded-full px-3 py-1 text-xs text-muted-foreground shadow-md", children: [
+              currentIndex + 1,
+              " / ",
+              imageUrls.length
+            ] }),
+            displayUrl && mediaInfo.type === "image" && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 right-4 flex items-center gap-2 bg-card border border-border rounded-lg p-1", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => setZoomLevel((prev) => Math.max(prev - 0.25, 0.25)),
+                  title: "Zoom out (-)",
+                  children: /* @__PURE__ */ jsx(ZoomOut, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground w-12 text-center", children: [
+                Math.round(zoomLevel * 100),
+                "%"
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => setZoomLevel((prev) => Math.min(prev + 0.25, 4)),
+                  title: "Zoom in (+)",
+                  children: /* @__PURE__ */ jsx(ZoomIn, { className: "w-4 h-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => {
+                    setZoomLevel(1);
+                    setPanOffset({ x: 0, y: 0 });
+                  },
+                  title: "Reset zoom (0)",
+                  children: "Reset"
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+var DEFAULT_NODE_COLOR = "#6b7280";
+function supportsImageInput(schema) {
+  if (!schema) return true;
+  const properties = schema.properties;
+  if (!properties) return true;
+  return !!(properties.image || properties.image_input || properties.start_image || properties.first_frame_image || properties.reference_images);
+}
+function getEdgeDataType(edge, nodeMap) {
+  const sourceNode = nodeMap.get(edge.source);
+  if (!sourceNode) return null;
+  const nodeDef = import_types3.NODE_DEFINITIONS[sourceNode.type];
+  if (!nodeDef) return null;
+  const sourceHandle = nodeDef.outputs.find((h) => h.id === edge.sourceHandle);
+  return sourceHandle?.type ?? null;
+}
+function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
+  const {
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    onConnect,
+    isValidConnection,
+    findCompatibleHandle,
+    addNode,
+    selectedNodeIds,
+    setSelectedNodeIds,
+    toggleNodeLock,
+    createGroup,
+    deleteGroup,
+    unlockAllNodes,
+    groups,
+    getConnectedNodeIds
+  } = useWorkflowStore();
+  const {
+    selectNode,
+    setHighlightedNodeIds,
+    highlightedNodeIds,
+    showPalette,
+    togglePalette,
+    openModal
+  } = useUIStore();
+  const reactFlow = useReactFlow();
+  const { edgeStyle, showMinimap } = useSettingsStore();
+  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 [isMinimapVisible, setIsMinimapVisible] = useState(false);
+  const [draggingNodeId, setDraggingNodeId] = useState(null);
+  const hideTimeoutRef = useRef(null);
+  const MINIMAP_HIDE_DELAY = 1500;
+  const openShortcutHelp = useCallback(() => openModal("shortcutHelp"), [openModal]);
+  const openNodeSearch = useCallback(() => openModal("nodeSearch"), [openModal]);
+  useCanvasKeyboardShortcuts({
+    selectedNodeIds,
+    groups,
+    nodes,
+    toggleNodeLock,
+    createGroup,
+    deleteGroup,
+    unlockAllNodes,
+    addNode,
+    togglePalette,
+    fitView: reactFlow.fitView,
+    openShortcutHelp,
+    openNodeSearch
+  });
+  useEffect(() => {
+    if (selectedNodeIds.length === 0) {
+      setHighlightedNodeIds([]);
+    } else {
+      const connectedIds = getConnectedNodeIds(selectedNodeIds);
+      setHighlightedNodeIds(connectedIds);
+    }
+  }, [selectedNodeIds, getConnectedNodeIds, setHighlightedNodeIds]);
+  const nodeMap = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
+  const isEdgeTargetingDisabledInput = useCallback(
+    (edge) => {
+      const targetNode = nodeMap.get(edge.target);
+      if (!targetNode) return false;
+      if (targetNode.type === "imageGen" && edge.targetHandle === "images") {
+        const nodeData = targetNode.data;
+        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);
+          return !hasImageSupport;
+        }
+      }
+      return false;
+    },
+    [nodeMap]
+  );
+  const styledEdges = useMemo(() => {
+    const executionScope = executingNodeIds.length > 0 ? new Set(executingNodeIds) : null;
+    const highlightedSet = highlightedNodeIds.length > 0 ? new Set(highlightedNodeIds) : null;
+    return edges.map((edge) => {
+      const dataType = getEdgeDataType(edge, nodeMap);
+      const typeClass = dataType ? `edge-${dataType}` : "";
+      const isDisabledTarget = isEdgeTargetingDisabledInput(edge);
+      if (!isRunning && hasActiveNodeExecutions) {
+        const isActiveEdge = activeNodeExecutions.has(edge.source) || activeNodeExecutions.has(edge.target);
+        if (isActiveEdge && !isDisabledTarget) {
+          return {
+            ...edge,
+            animated: false,
+            className: `${typeClass} executing`.trim()
+          };
+        }
+      }
+      if (isRunning) {
+        const isInExecutionScope = !executionScope || executionScope.has(edge.source) || executionScope.has(edge.target);
+        const isExecutingEdge = currentNodeId && (edge.source === currentNodeId || edge.target === currentNodeId);
+        if (isDisabledTarget) {
+          return {
+            ...edge,
+            animated: false,
+            className: `${typeClass} edge-disabled`.trim()
+          };
+        }
+        if (!isInExecutionScope) {
+          return {
+            ...edge,
+            animated: false,
+            className: typeClass
+          };
+        }
+        return {
+          ...edge,
+          animated: false,
+          className: `${typeClass} ${isExecutingEdge ? "executing" : "active-pipe"}`.trim()
+        };
+      }
+      if (isDisabledTarget) {
+        return {
+          ...edge,
+          className: `${typeClass} edge-disabled`.trim()
+        };
+      }
+      if (highlightedSet) {
+        const isConnected = highlightedSet.has(edge.source) && highlightedSet.has(edge.target);
+        return {
+          ...edge,
+          className: `${typeClass} ${isConnected ? "highlighted" : "dimmed"}`.trim()
+        };
+      }
+      return {
+        ...edge,
+        className: typeClass
+      };
+    });
+  }, [
+    edges,
+    nodeMap,
+    highlightedNodeIds,
+    isRunning,
+    currentNodeId,
+    executingNodeIds,
+    activeNodeExecutions,
+    hasActiveNodeExecutions,
+    isEdgeTargetingDisabledInput
+  ]);
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      selectNode(node.id);
+    },
+    [selectNode]
+  );
+  const handlePaneClick = useCallback(() => {
+    selectNode(null);
+    setSelectedNodeIds([]);
+  }, [selectNode, setSelectedNodeIds]);
+  const handleSelectionChange = useCallback(
+    ({ nodes: selectedNodes }) => {
+      setSelectedNodeIds(selectedNodes.map((n) => n.id));
+    },
+    [setSelectedNodeIds]
+  );
+  const handleNodeContextMenu = useCallback(
+    (event, node) => {
+      event.preventDefault();
+    },
+    [selectedNodeIds]
+  );
+  const handleEdgeContextMenu = useCallback(
+    (event, edge) => {
+      event.preventDefault();
+    },
+    []
+  );
+  const handlePaneContextMenu = useCallback(
+    (event) => {
+      event.preventDefault();
+    },
+    []
+  );
+  const handleSelectionContextMenu = useCallback(
+    (event, selectedNodes) => {
+      event.preventDefault();
+    },
+    []
+  );
+  const handleDrop = useCallback(
+    (event) => {
+      event.preventDefault();
+      const nodeType = event.dataTransfer.getData("nodeType");
+      if (!nodeType) return;
+      const position = reactFlow.screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY
+      });
+      addNode(nodeType, position);
+    },
+    [addNode, reactFlow]
+  );
+  const handleDragOver = useCallback((event) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  }, []);
+  const handleNodeDragStart = useCallback((_event, node) => {
+    setDraggingNodeId(node.id);
+  }, []);
+  const handleNodeDrag = useCallback((_event, node) => {
+    setDraggingNodeId(node.id);
+  }, []);
+  const handleNodeDragStop = useCallback(() => {
+    setDraggingNodeId(null);
+  }, []);
+  const handleConnectEnd = useCallback(
+    (event, connectionState) => {
+      const state = connectionState;
+      const sourceNodeId = state.fromNode?.id;
+      const sourceHandleId = state.fromHandle?.id;
+      if (!sourceNodeId || !sourceHandleId) return;
+      const target = event.target;
+      const nodeElement = target.closest(".react-flow__node");
+      if (!nodeElement) return;
+      const targetNodeId = nodeElement.getAttribute("data-id");
+      if (!targetNodeId || targetNodeId === sourceNodeId) return;
+      const droppedOnHandle = target.closest(".react-flow__handle");
+      if (droppedOnHandle) return;
+      const compatibleHandle = findCompatibleHandle(sourceNodeId, sourceHandleId, targetNodeId);
+      if (!compatibleHandle) return;
+      onConnect({
+        source: sourceNodeId,
+        sourceHandle: sourceHandleId,
+        target: targetNodeId,
+        targetHandle: compatibleHandle
+      });
+    },
+    [findCompatibleHandle, onConnect]
+  );
+  const checkValidConnection = useCallback(
+    (connection) => {
+      const conn = {
+        source: connection.source,
+        target: connection.target,
+        sourceHandle: connection.sourceHandle ?? null,
+        targetHandle: connection.targetHandle ?? null
+      };
+      return isValidConnection(conn);
+    },
+    [isValidConnection]
+  );
+  const handleMoveStart = useCallback(() => {
+    if (!showMinimap) return;
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+    setIsMinimapVisible(true);
+  }, [showMinimap]);
+  const handleMoveEnd = useCallback(() => {
+    if (!showMinimap) return;
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+    }
+    hideTimeoutRef.current = setTimeout(() => {
+      setIsMinimapVisible(false);
+      hideTimeoutRef.current = null;
+    }, MINIMAP_HIDE_DELAY);
+  }, [showMinimap]);
+  useEffect(() => {
+    return () => {
+      if (hideTimeoutRef.current) {
+        clearTimeout(hideTimeoutRef.current);
+      }
+    };
+  }, []);
+  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,
+        isValidConnection: checkValidConnection,
+        nodeTypes: nodeTypesProp ?? nodeTypes,
+        fitView: true,
+        snapToGrid: true,
+        snapGrid: [16, 16],
+        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 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(NodeDetailModal, {}),
+    /* @__PURE__ */ jsx(ShortcutHelpModal, {}),
+    /* @__PURE__ */ jsx(NodeSearch, {})
+  ] });
+}
+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"
+          }
+        }
+      }
+    ),
+    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);
+
+export { DEFAULT_GROUP_COLORS, GROUP_COLORS, GroupOverlay, HelperLines, NodeSearch, PauseEdge, ShortcutHelpModal, WorkflowCanvas };