@genfeedai/workflow-ui 0.1.3 → 0.1.5

package/dist/chunk-BMFRA6GK.js

@@ -1,1546 +0,0 @@
-'use strict';
-
-var chunkECD5J2BA_js = require('./chunk-ECD5J2BA.js');
-var chunk3YFFDHC5_js = require('./chunk-3YFFDHC5.js');
-var chunkEMGXUNBL_js = require('./chunk-EMGXUNBL.js');
-var chunk5HJFQVUR_js = require('./chunk-5HJFQVUR.js');
-var chunk6DOEUDD5_js = require('./chunk-6DOEUDD5.js');
-var chunkAXFOCPPP_js = require('./chunk-AXFOCPPP.js');
-var chunkIHF35QZD_js = require('./chunk-IHF35QZD.js');
-var react$1 = require('@xyflow/react');
-var lucideReact = require('lucide-react');
-var react = require('react');
-require('@xyflow/react/dist/style.css');
-var types = require('@genfeedai/types');
-var clsx = require('clsx');
-var jsxRuntime = require('react/jsx-runtime');
-var Image = require('next/image');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var Image__default = /*#__PURE__*/_interopDefault(Image);
-
-// 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__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: clsx.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 } = react$1.useReactFlow();
-  const { toggleGroupLock, deleteGroup, setGroupColor, setDirty, renameGroup } = chunkIHF35QZD_js.useWorkflowStore();
-  const [showColorPicker, setShowColorPicker] = react.useState(false);
-  const [isEditing, setIsEditing] = react.useState(false);
-  const [editName, setEditName] = react.useState(group.name);
-  const inputRef = react.useRef(null);
-  const colorPickerRef = react.useRef(null);
-  const [isDragging, setIsDragging] = react.useState(false);
-  const dragStartRef = react.useRef(null);
-  const nodeStartPositionsRef = react.useRef(/* @__PURE__ */ new Map());
-  react.useEffect(() => {
-    if (!isEditing) {
-      setEditName(group.name);
-    }
-  }, [group.name, isEditing]);
-  react.useEffect(() => {
-    if (isEditing && inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-    }
-  }, [isEditing]);
-  react.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 = react.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 = react.useCallback(
-    (e) => {
-      if (e.key === "Enter") {
-        handleNameSubmit();
-      } else if (e.key === "Escape") {
-        setEditName(group.name);
-        setIsEditing(false);
-      }
-    },
-    [handleNameSubmit, group.name]
-  );
-  const handleMouseDown = react.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]
-  );
-  react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        onMouseDown: handleMouseDown,
-        className: clsx.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__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "text",
-              value: editName,
-              onChange: (e) => setEditName(e.target.value),
-              onBlur: handleNameSubmit,
-              onKeyDown: handleKeyDown,
-              className: clsx.clsx(
-                "flex-1 bg-transparent border-none outline-none text-sm font-medium px-0 py-0",
-                colors.text
-              ),
-              style: { minWidth: 0 }
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: clsx.clsx("font-medium truncate cursor-text", colors.text),
-              style: { fontSize: 14 },
-              onClick: () => setIsEditing(true),
-              children: group.name
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: colorPickerRef, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setShowColorPicker(!showColorPicker);
-                  },
-                  className: clsx.clsx("p-1 rounded hover:bg-white/10 transition-colors", colors.text),
-                  title: "Change group color",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { className: "w-4 h-4" })
-                }
-              ),
-              showColorPicker && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleColorSelect(color);
-                  },
-                  className: clsx.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__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  toggleGroupLock(group.id);
-                },
-                className: clsx.clsx("p-1 rounded hover:bg-white/10 transition-colors", colors.text),
-                title: group.isLocked ? "Unlock group" : "Lock group",
-                children: group.isLocked ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Lock, { className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Unlock, { className: "w-4 h-4" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  deleteGroup(group.id);
-                },
-                className: clsx.clsx("p-1 rounded hover:bg-white/10 transition-colors", colors.text),
-                title: "Delete group",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    group.isLocked && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: clsx.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 } = chunkIHF35QZD_js.useWorkflowStore();
-  const nodes = react$1.useNodes();
-  const nodeMap = react.useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
-  const groupBounds = react.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__ */ jsxRuntime.jsx(react$1.ViewportPortal, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GroupBackground, { group, bounds }, group.id);
-  }) }) });
-}
-function GroupControlsOverlayComponent() {
-  const { groups } = chunkIHF35QZD_js.useWorkflowStore();
-  const nodes = react$1.useNodes();
-  const { zoom } = react$1.useViewport();
-  const nodeMap = react.useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
-  const groupBounds = react.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__ */ jsxRuntime.jsx(react$1.ViewportPortal, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      GroupControls,
-      {
-        group,
-        bounds,
-        nodeMap,
-        zoom
-      },
-      group.id
-    );
-  }) }) });
-}
-var GroupBackgroundsPortal = react.memo(GroupBackgroundsPortalComponent);
-var GroupControlsOverlay = react.memo(GroupControlsOverlayComponent);
-function GroupOverlayComponent() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(GroupBackgroundsPortal, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(GroupControlsOverlay, {})
-  ] });
-}
-var GroupOverlay = react.memo(GroupOverlayComponent);
-var SNAP_THRESHOLD = 5;
-function HelperLinesComponent({ draggingNodeId }) {
-  const [lines, setLines] = react.useState([]);
-  const nodes = chunkIHF35QZD_js.useWorkflowStore((state) => state.nodes);
-  const transform = react$1.useStore((state) => state.transform);
-  const calculateHelperLines = react.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]
-  );
-  react.useEffect(() => {
-    if (draggingNodeId) {
-      calculateHelperLines(draggingNodeId);
-    } else {
-      setLines([]);
-    }
-  }, [draggingNodeId, calculateHelperLines]);
-  if (lines.length === 0) return null;
-  const [tx, ty, zoom] = transform;
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-            "line",
-            {
-              x1,
-              y1: y,
-              x2,
-              y2: y,
-              stroke: "#3b82f6",
-              strokeWidth: 1,
-              strokeDasharray: "4 2"
-            },
-            `h-${index}`
-          );
-        }
-      })
-    }
-  );
-}
-var HelperLines = react.memo(HelperLinesComponent);
-function NodeSearch() {
-  const { activeModal, closeModal } = chunkAXFOCPPP_js.useUIStore();
-  const { nodes, setSelectedNodeIds } = chunkIHF35QZD_js.useWorkflowStore();
-  const reactFlow = react$1.useReactFlow();
-  const [search, setSearch] = react.useState("");
-  const [selectedIndex, setSelectedIndex] = react.useState(0);
-  const listRef = react.useRef(null);
-  const backdropRef = react.useRef(null);
-  const inputRef = react.useRef(null);
-  const isOpen = activeModal === "nodeSearch";
-  react.useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isOpen]);
-  const filteredNodes = react.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 = types.NODE_DEFINITIONS[node.type]?.label?.toLowerCase() || "";
-      return label.includes(query) || type.includes(query) || comment.includes(query) || nodeDefLabel.includes(query);
-    });
-  }, [nodes, search]);
-  react.useEffect(() => {
-    setSelectedIndex(0);
-  }, []);
-  react.useEffect(() => {
-    if (listRef.current) {
-      const selectedItem = listRef.current.children[selectedIndex];
-      selectedItem?.scrollIntoView({ block: "nearest" });
-    }
-  }, [selectedIndex]);
-  const handleSelectNode = react.useCallback(
-    (node) => {
-      setSelectedNodeIds([node.id]);
-      reactFlow.fitView({
-        nodes: [node],
-        padding: 0.5,
-        duration: 300
-      });
-      closeModal();
-      setSearch("");
-    },
-    [setSelectedNodeIds, reactFlow, closeModal]
-  );
-  const handleKeyDown = react.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-[var(--border)]", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "w-4 h-4 text-[var(--muted-foreground)]" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Find Node" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: handleClose,
-                  className: "p-1 rounded hover:bg-[var(--secondary)] transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", onKeyDown: handleKeyDown, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: listRef, className: "max-h-[300px] overflow-y-auto space-y-1", children: filteredNodes.length === 0 ? /* @__PURE__ */ jsxRuntime.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 = types.NODE_DEFINITIONS[node.type];
-                const comment = node.data.comment;
-                return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium truncate text-sm", children: node.data.label }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground truncate", children: [
-                          nodeDef?.label || node.type,
-                          comment && ` \xB7 ${comment}`
-                        ] })
-                      ] })
-                    ]
-                  },
-                  node.id
-                );
-              }) }),
-              filteredNodes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 pt-3 border-t border-border text-xs text-muted-foreground flex gap-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-1.5 py-0.5 bg-secondary rounded", children: "up/down" }),
-                  " Navigate"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "px-1.5 py-0.5 bg-secondary rounded", children: "Enter" }),
-                  " Select"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  /* @__PURE__ */ jsxRuntime.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 } = chunkAXFOCPPP_js.useUIStore();
-  const [searchQuery, setSearchQuery] = react.useState("");
-  const backdropRef = react.useRef(null);
-  const inputRef = react.useRef(null);
-  const isOpen = activeModal === "shortcutHelp";
-  const filteredShortcuts = react.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 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-[var(--border)]", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, { className: "w-4 h-4 text-[var(--muted-foreground)]" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Keyboard Shortcuts" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: handleClose,
-                  className: "p-1 rounded hover:bg-[var(--secondary)] transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mb-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "max-h-[60vh] overflow-y-auto space-y-6 pr-2", children: [
-                Object.entries(groupedShortcuts).map(([category, shortcuts]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-muted-foreground mb-2", children: category }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: shortcuts.map((shortcut) => /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      className: "flex items-center justify-between py-1.5 px-2 rounded hover:bg-secondary/50",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: shortcut.description }),
-                        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-center text-muted-foreground py-8", children: [
-                  'No shortcuts found for "',
-                  searchQuery,
-                  '"'
-                ] })
-              ] })
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}
-var PROMPT_NODE_TYPES = ["prompt"];
-function NodeDetailModal() {
-  const { activeModal, nodeDetailNodeId, nodeDetailStartIndex, closeNodeDetailModal } = chunkAXFOCPPP_js.useUIStore();
-  const { getNodeById } = chunkIHF35QZD_js.useWorkflowStore();
-  const { openEditor } = chunk6DOEUDD5_js.usePromptEditorStore();
-  const [zoomLevel, setZoomLevel] = react.useState(1);
-  const [panOffset, setPanOffset] = react.useState({ x: 0, y: 0 });
-  const [isPanning, setIsPanning] = react.useState(false);
-  const [panStart, setPanStart] = react.useState({ x: 0, y: 0 });
-  const [currentIndex, setCurrentIndex] = react.useState(0);
-  const node = react.useMemo(() => {
-    if (!nodeDetailNodeId) return null;
-    return getNodeById(nodeDetailNodeId);
-  }, [nodeDetailNodeId, getNodeById]);
-  react.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 = react.useMemo(() => {
-    if (!node) return { url: null, type: null };
-    return chunk3YFFDHC5_js.getMediaFromNode(node.type, node.data);
-  }, [node]);
-  const nodeDef = react.useMemo(() => {
-    if (!node) return null;
-    return types.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 = react.useCallback(() => {
-    setCurrentIndex((prev) => Math.max(prev - 1, 0));
-    setZoomLevel(1);
-    setPanOffset({ x: 0, y: 0 });
-  }, []);
-  const goToNext = react.useCallback(() => {
-    setCurrentIndex((prev) => Math.min(prev + 1, imageUrls.length - 1));
-    setZoomLevel(1);
-    setPanOffset({ x: 0, y: 0 });
-  }, [imageUrls.length]);
-  react.useEffect(() => {
-    setZoomLevel(1);
-    setPanOffset({ x: 0, y: 0 });
-    setCurrentIndex(nodeDetailStartIndex);
-  }, [nodeDetailNodeId, nodeDetailStartIndex]);
-  react.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 = react.useCallback(
-    (e) => {
-      if (zoomLevel > 1) {
-        setIsPanning(true);
-        setPanStart({ x: e.clientX - panOffset.x, y: e.clientY - panOffset.y });
-      }
-    },
-    [zoomLevel, panOffset]
-  );
-  const handleMouseMove = react.useCallback(
-    (e) => {
-      if (isPanning) {
-        setPanOffset({
-          x: e.clientX - panStart.x,
-          y: e.clientY - panStart.y
-        });
-      }
-    },
-    [isPanning, panStart]
-  );
-  const handleMouseUp = react.useCallback(() => {
-    setIsPanning(false);
-  }, []);
-  const handleDownload = react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 bg-black/80", onClick: closeNodeDetailModal }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-4 z-50 flex flex-col bg-card rounded-lg border border-border shadow-xl overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-medium text-foreground", children: nodeData.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground bg-secondary px-2 py-0.5 rounded", children: nodeDef.label })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          displayUrl && /* @__PURE__ */ jsxRuntime.jsxs(chunk5HJFQVUR_js.Button, { variant: "outline", size: "sm", onClick: handleDownload, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4 mr-1" }),
-            "Download"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunk5HJFQVUR_js.Button, { variant: "ghost", size: "icon-sm", onClick: closeNodeDetailModal, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                    Image__default.default,
-                    {
-                      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__ */ jsxRuntime.jsx(
-                    "video",
-                    {
-                      src: displayUrl,
-                      controls: true,
-                      autoPlay: true,
-                      loop: true,
-                      className: "max-h-[calc(100vh-200px)] max-w-[calc(100vw-100px)] rounded-lg"
-                    }
-                  )
-                ]
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground text-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg", children: "No preview available" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", children: "Generate content to see the preview" })
-            ] }),
-            hasMultipleImages && currentIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              chunk5HJFQVUR_js.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__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-5 h-5" })
-              }
-            ),
-            hasMultipleImages && currentIndex < imageUrls.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
-              chunk5HJFQVUR_js.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-5 h-5" })
-              }
-            ),
-            hasMultipleImages && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-4 right-4 flex items-center gap-2 bg-card border border-border rounded-lg p-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                chunk5HJFQVUR_js.Button,
-                {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: () => setZoomLevel((prev) => Math.max(prev - 0.25, 0.25)),
-                  title: "Zoom out (-)",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomOut, { className: "w-4 h-4" })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground w-12 text-center", children: [
-                Math.round(zoomLevel * 100),
-                "%"
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                chunk5HJFQVUR_js.Button,
-                {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: () => setZoomLevel((prev) => Math.min(prev + 0.25, 4)),
-                  title: "Zoom in (+)",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomIn, { className: "w-4 h-4" })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                chunk5HJFQVUR_js.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 = types.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
-  } = chunkIHF35QZD_js.useWorkflowStore();
-  const {
-    selectNode,
-    setHighlightedNodeIds,
-    highlightedNodeIds,
-    showPalette,
-    togglePalette,
-    openModal
-  } = chunkAXFOCPPP_js.useUIStore();
-  const reactFlow = react$1.useReactFlow();
-  const { edgeStyle, showMinimap } = chunkAXFOCPPP_js.useSettingsStore();
-  const isRunning = chunkAXFOCPPP_js.useExecutionStore((state) => state.isRunning);
-  const currentNodeId = chunkAXFOCPPP_js.useExecutionStore((state) => state.currentNodeId);
-  const executingNodeIds = chunkAXFOCPPP_js.useExecutionStore((state) => state.executingNodeIds);
-  const activeNodeExecutions = chunkAXFOCPPP_js.useExecutionStore((state) => state.activeNodeExecutions);
-  const hasActiveNodeExecutions = chunkAXFOCPPP_js.useExecutionStore((state) => state.activeNodeExecutions.size > 0);
-  const [isMinimapVisible, setIsMinimapVisible] = react.useState(false);
-  const [draggingNodeId, setDraggingNodeId] = react.useState(null);
-  const hideTimeoutRef = react.useRef(null);
-  const MINIMAP_HIDE_DELAY = 1500;
-  const openShortcutHelp = react.useCallback(() => openModal("shortcutHelp"), [openModal]);
-  const openNodeSearch = react.useCallback(() => openModal("nodeSearch"), [openModal]);
-  chunkEMGXUNBL_js.useCanvasKeyboardShortcuts({
-    selectedNodeIds,
-    groups,
-    nodes,
-    toggleNodeLock,
-    createGroup,
-    deleteGroup,
-    unlockAllNodes,
-    addNode,
-    togglePalette,
-    fitView: reactFlow.fitView,
-    openShortcutHelp,
-    openNodeSearch
-  });
-  react.useEffect(() => {
-    if (selectedNodeIds.length === 0) {
-      setHighlightedNodeIds([]);
-    } else {
-      const connectedIds = getConnectedNodeIds(selectedNodeIds);
-      setHighlightedNodeIds(connectedIds);
-    }
-  }, [selectedNodeIds, getConnectedNodeIds, setHighlightedNodeIds]);
-  const nodeMap = react.useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);
-  const isEdgeTargetingDisabledInput = react.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 = react.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 = react.useCallback(
-    (_event, node) => {
-      selectNode(node.id);
-    },
-    [selectNode]
-  );
-  const handlePaneClick = react.useCallback(() => {
-    selectNode(null);
-    setSelectedNodeIds([]);
-  }, [selectNode, setSelectedNodeIds]);
-  const handleSelectionChange = react.useCallback(
-    ({ nodes: selectedNodes }) => {
-      setSelectedNodeIds(selectedNodes.map((n) => n.id));
-    },
-    [setSelectedNodeIds]
-  );
-  const handleNodeContextMenu = react.useCallback(
-    (event, node) => {
-      event.preventDefault();
-    },
-    [selectedNodeIds]
-  );
-  const handleEdgeContextMenu = react.useCallback(
-    (event, edge) => {
-      event.preventDefault();
-    },
-    []
-  );
-  const handlePaneContextMenu = react.useCallback(
-    (event) => {
-      event.preventDefault();
-    },
-    []
-  );
-  const handleSelectionContextMenu = react.useCallback(
-    (event, selectedNodes) => {
-      event.preventDefault();
-    },
-    []
-  );
-  const handleDrop = react.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 = react.useCallback((event) => {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = "move";
-  }, []);
-  const handleNodeDragStart = react.useCallback((_event, node) => {
-    setDraggingNodeId(node.id);
-  }, []);
-  const handleNodeDrag = react.useCallback((_event, node) => {
-    setDraggingNodeId(node.id);
-  }, []);
-  const handleNodeDragStop = react.useCallback(() => {
-    setDraggingNodeId(null);
-  }, []);
-  const handleConnectEnd = react.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 = react.useCallback(
-    (connection) => {
-      const conn = {
-        source: connection.source,
-        target: connection.target,
-        sourceHandle: connection.sourceHandle ?? null,
-        targetHandle: connection.targetHandle ?? null
-      };
-      return isValidConnection(conn);
-    },
-    [isValidConnection]
-  );
-  const handleMoveStart = react.useCallback(() => {
-    if (!showMinimap) return;
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-      hideTimeoutRef.current = null;
-    }
-    setIsMinimapVisible(true);
-  }, [showMinimap]);
-  const handleMoveEnd = react.useCallback(() => {
-    if (!showMinimap) return;
-    if (hideTimeoutRef.current) {
-      clearTimeout(hideTimeoutRef.current);
-    }
-    hideTimeoutRef.current = setTimeout(() => {
-      setIsMinimapVisible(false);
-      hideTimeoutRef.current = null;
-    }, MINIMAP_HIDE_DELAY);
-  }, [showMinimap]);
-  react.useEffect(() => {
-    return () => {
-      if (hideTimeoutRef.current) {
-        clearTimeout(hideTimeoutRef.current);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full relative", onDrop: handleDrop, onDragOver: handleDragOver, children: [
-    !showPalette && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { className: "w-4 h-4 text-[var(--muted-foreground)] group-hover:text-[var(--foreground)]" })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      react$1.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 ?? chunkECD5J2BA_js.nodeTypes,
-        fitView: true,
-        snapToGrid: true,
-        snapGrid: [16, 16],
-        connectionMode: react$1.ConnectionMode.Loose,
-        selectionMode: react$1.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__ */ jsxRuntime.jsx(GroupOverlay, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            react$1.Background,
-            {
-              variant: react$1.BackgroundVariant.Dots,
-              gap: 16,
-              size: 1,
-              color: "rgba(255, 255, 255, 0.08)"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(react$1.Controls, {}),
-          showMinimap && /* @__PURE__ */ jsxRuntime.jsx(
-            react$1.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__ */ jsxRuntime.jsx(HelperLines, { draggingNodeId })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(NodeDetailModal, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(ShortcutHelpModal, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(NodeSearch, {})
-  ] });
-}
-function PauseEdgeComponent({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  style = {},
-  markerEnd,
-  data
-}) {
-  const [edgePath, labelX, labelY] = react$1.getBezierPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition
-  });
-  const hasPause = data?.hasPause === true;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      react$1.BaseEdge,
-      {
-        path: edgePath,
-        markerEnd,
-        style: {
-          ...style,
-          ...hasPause && {
-            strokeDasharray: "5 5",
-            stroke: "#f59e0b"
-          }
-        }
-      }
-    ),
-    hasPause && /* @__PURE__ */ jsxRuntime.jsx(
-      "foreignObject",
-      {
-        width: 20,
-        height: 20,
-        x: labelX - 10,
-        y: labelY - 10,
-        className: "pointer-events-none",
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-5 h-5 rounded-full bg-amber-500 text-white", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, { className: "w-3 h-3" }) })
-      }
-    )
-  ] });
-}
-var PauseEdge = react.memo(PauseEdgeComponent);
-
-exports.DEFAULT_GROUP_COLORS = DEFAULT_GROUP_COLORS;
-exports.GROUP_COLORS = GROUP_COLORS;
-exports.GroupOverlay = GroupOverlay;
-exports.HelperLines = HelperLines;
-exports.NodeSearch = NodeSearch;
-exports.PauseEdge = PauseEdge;
-exports.ShortcutHelpModal = ShortcutHelpModal;
-exports.WorkflowCanvas = WorkflowCanvas;