@genfeedai/workflow-ui 0.1.3 → 0.1.4

package/dist/{chunk-E3YBVMYZ.mjs → chunk-PANZDSP6.mjs}

@@ -1,302 +1,24 @@
 import { Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Slider, Label, Input, GridPositionSelector, ComparisonSlider } from './chunk-ZJD5WMR3.mjs';
-import { generateHandlesFromSchema, DEFAULT_IMAGE_MODEL, IMAGE_MODEL_MAP, IMAGE_MODEL_ID_MAP, IMAGE_MODELS, LIPSYNC_MODELS, LIPSYNC_SYNC_MODES, DEFAULT_LLM_MODEL, LLM_MODEL_MAP, LLM_MODEL_ID_MAP, LLM_MODELS, DEFAULT_VIDEO_MODEL, VIDEO_MODEL_MAP, VIDEO_MODEL_ID_MAP, VIDEO_MODELS, EASING_PRESETS, getMediaFromNode } from './chunk-E323WAZG.mjs';
-import { useNodeExecution, useCanGenerate, useModelSelection, useAutoLoadModelSchema, useAIGenNode, useAIGenNodeHeader, useMediaUpload, usePromptAutocomplete, useRequiredInputs } from './chunk-AOTUCJMA.mjs';
+import { generateHandlesFromSchema, DEFAULT_IMAGE_MODEL, IMAGE_MODEL_MAP, IMAGE_MODEL_ID_MAP, IMAGE_MODELS, LIPSYNC_MODELS, LIPSYNC_SYNC_MODES, DEFAULT_LLM_MODEL, LLM_MODEL_MAP, LLM_MODEL_ID_MAP, LLM_MODELS, DEFAULT_VIDEO_MODEL, VIDEO_MODEL_MAP, VIDEO_MODEL_ID_MAP, VIDEO_MODELS, EASING_PRESETS, CubicBezierEditor, getMediaFromNode } from './chunk-6PSJTBNV.mjs';
+import { LUMA_ASPECT_RATIOS } from './chunk-OY7BRSGG.mjs';
+import { useNodeExecution, useCanGenerate, useModelSelection, useAutoLoadModelSchema, useAIGenNode, useAIGenNodeHeader, useMediaUpload, usePromptAutocomplete, useRequiredInputs } from './chunk-GWBGK3KL.mjs';
 import { Button } from './chunk-7SKSRSS7.mjs';
 import { getImageDimensions, getVideoMetadata } from './chunk-EFXQT23N.mjs';
 import { usePromptEditorStore, useAnnotationStore } from './chunk-CV4M7CNU.mjs';
-import { useUIStore, useExecutionStore } from './chunk-SQK4JDYY.mjs';
-import { useWorkflowStore } from './chunk-RIGVIEYB.mjs';
+import { useUIStore, useExecutionStore } from './chunk-LT3ZJJL6.mjs';
+import { useWorkflowStore } from './chunk-R727OFBR.mjs';
 import { useWorkflowUIConfig } from './chunk-FT33LFII.mjs';
 import { usePromptLibraryStore } from './chunk-VRN3UWE5.mjs';
-import { __commonJS, __require, __toESM } from './chunk-ZJWP5KGZ.mjs';
 import { NODE_DEFINITIONS, NodeStatusEnum } from '@genfeedai/types';
 import { useUpdateNodeInternals, NodeResizer, Handle, Position } from '@xyflow/react';
 import { clsx } from 'clsx';
-import { GitBranch, ArrowLeftFromLine, ArrowRightToLine, Subtitles, Pencil, Columns2, LayoutGrid, Grid3X3, Puzzle, Navigation, Volume2, AudioLines, Mic, Maximize, Crop, RefreshCw, AtSign, Download, Eye, CheckCircle, Share2, Scissors, Layers, Wand2, Maximize2, Brain, Video, Sparkles, Film, FileVideo, FileText, MessageSquare, Image as Image$1, Square, Lock, Unlock, Copy, RotateCcw, Loader2, ChevronDown, ChevronRight, AlertCircle, ImageIcon, Expand, Play, AlertTriangle, CheckCircle2, Upload, Link, X, Music, Save, Clock, Shapes, ChevronLeft, SplitSquareHorizontal, Zap } from 'lucide-react';
+import { GitBranch, ArrowLeftFromLine, ArrowRightToLine, Subtitles, Pencil, Columns2, LayoutGrid, Grid3X3, Puzzle, Navigation, Volume2, AudioLines, Mic, Maximize, Crop, RefreshCw, AtSign, Download, Eye, CheckCircle, Share2, Scissors, Layers, Wand2, Maximize2, Brain, Video, Sparkles, Film, FileVideo, FileText, MessageSquare, Image as Image$1, Square, Lock, Unlock, Copy, RotateCcw, Loader2, ChevronDown, ChevronRight, AlertCircle, ImageIcon, Expand, Play, AlertTriangle, CheckCircle2, Upload, Link, X, Music, Save, Clock, Shapes, ChevronLeft, SplitSquareHorizontal, Zap, ZoomOut, ZoomIn } from 'lucide-react';
 import { memo, forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle, useMemo, useLayoutEffect, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Image4 from 'next/image';
 import { createPortal } from 'react-dom';
 import { useShallow } from 'zustand/react/shallow';
 
-// ../core/dist/chunk-OAAW6BNW.js
-var require_chunk_OAAW6BNW = __commonJS({
-  "../core/dist/chunk-OAAW6BNW.js"(exports$1) {
-    function topologicalSort(nodes, edges) {
-      const inDegree = /* @__PURE__ */ new Map();
-      const adjList = /* @__PURE__ */ new Map();
-      for (const node of nodes) {
-        inDegree.set(node.id, 0);
-        adjList.set(node.id, []);
-      }
-      for (const edge of edges) {
-        adjList.get(edge.source)?.push(edge.target);
-        inDegree.set(edge.target, (inDegree.get(edge.target) ?? 0) + 1);
-      }
-      const queue = [];
-      for (const [nodeId, degree] of inDegree) {
-        if (degree === 0) {
-          queue.push(nodeId);
-        }
-      }
-      const result = [];
-      while (queue.length > 0) {
-        const node = queue.shift();
-        result.push(node);
-        for (const neighbor of adjList.get(node) ?? []) {
-          inDegree.set(neighbor, (inDegree.get(neighbor) ?? 1) - 1);
-          if (inDegree.get(neighbor) === 0) {
-            queue.push(neighbor);
-          }
-        }
-      }
-      return result;
-    }
-    function buildDependencyMap(nodes, edges) {
-      const deps = /* @__PURE__ */ new Map();
-      for (const node of nodes) {
-        deps.set(node.id, []);
-      }
-      for (const edge of edges) {
-        const existing = deps.get(edge.target) ?? [];
-        deps.set(edge.target, [...existing, edge.source]);
-      }
-      return deps;
-    }
-    exports$1.buildDependencyMap = buildDependencyMap;
-    exports$1.topologicalSort = topologicalSort;
-  }
-});
-
-// ../core/dist/chunk-FZCK5A7S.js
-var require_chunk_FZCK5A7S = __commonJS({
-  "../core/dist/chunk-FZCK5A7S.js"(exports$1) {
-    var types = __require("@genfeedai/types");
-    function detectCycles(nodes, edges) {
-      const visited = /* @__PURE__ */ new Set();
-      const recStack = /* @__PURE__ */ new Set();
-      function hasCycle(nodeId) {
-        if (recStack.has(nodeId)) return true;
-        if (visited.has(nodeId)) return false;
-        visited.add(nodeId);
-        recStack.add(nodeId);
-        const outgoing = edges.filter((e) => e.source === nodeId);
-        for (const edge of outgoing) {
-          if (hasCycle(edge.target)) return true;
-        }
-        recStack.delete(nodeId);
-        return false;
-      }
-      for (const node of nodes) {
-        if (hasCycle(node.id)) return true;
-      }
-      return false;
-    }
-    function validateWorkflow(nodes, edges) {
-      const errors = [];
-      const warnings = [];
-      for (const node of nodes) {
-        const nodeDef = types.NODE_DEFINITIONS[node.type];
-        if (!nodeDef) continue;
-        const incomingEdges = edges.filter((e) => e.target === node.id);
-        for (const input of nodeDef.inputs) {
-          if (input.required) {
-            const hasConnection = incomingEdges.some((e) => e.targetHandle === input.id);
-            if (!hasConnection) {
-              errors.push({
-                nodeId: node.id,
-                message: `Missing required input: ${input.label}`,
-                severity: "error"
-              });
-            }
-          }
-        }
-        if (node.type === "download") {
-          const hasMediaInput = incomingEdges.some(
-            (e) => e.targetHandle === "image" || e.targetHandle === "video"
-          );
-          if (!hasMediaInput) {
-            errors.push({
-              nodeId: node.id,
-              message: "Output node requires at least one Media input (image or video)",
-              severity: "error"
-            });
-          }
-        }
-      }
-      if (detectCycles(nodes, edges)) {
-        errors.push({
-          nodeId: nodes[0]?.id ?? "unknown",
-          message: "Workflow contains a cycle",
-          severity: "error"
-        });
-      }
-      return {
-        isValid: errors.length === 0,
-        errors,
-        warnings
-      };
-    }
-    function getHandleType(nodeType, handleId, direction) {
-      const nodeDef = types.NODE_DEFINITIONS[nodeType];
-      if (!nodeDef) return null;
-      const handles = direction === "source" ? nodeDef.outputs : nodeDef.inputs;
-      const handle = handles.find((h) => h.id === handleId);
-      return handle?.type ?? null;
-    }
-    function isValidConnection(sourceNodeType, sourceHandle, targetNodeType, targetHandle) {
-      const sourceType = getHandleType(sourceNodeType, sourceHandle, "source");
-      const targetType = getHandleType(targetNodeType, targetHandle, "target");
-      if (!sourceType || !targetType) return false;
-      return types.CONNECTION_RULES[sourceType]?.includes(targetType) ?? false;
-    }
-    function getCompatibleHandles(handleType) {
-      return types.CONNECTION_RULES[handleType] ?? [];
-    }
-    exports$1.detectCycles = detectCycles;
-    exports$1.getCompatibleHandles = getCompatibleHandles;
-    exports$1.getHandleType = getHandleType;
-    exports$1.isValidConnection = isValidConnection;
-    exports$1.validateWorkflow = validateWorkflow;
-  }
-});
-
-// ../core/dist/index.js
-var require_dist = __commonJS({
-  "../core/dist/index.js"(exports$1) {
-    var chunkOAAW6BNW_js = require_chunk_OAAW6BNW();
-    var chunkFZCK5A7S_js = require_chunk_FZCK5A7S();
-    var PRICING = {
-      // Image generation (per image)
-      "nano-banana": 0.039,
-      "nano-banana-pro": {
-        "1K": 0.15,
-        "2K": 0.15,
-        "4K": 0.3
-      },
-      // Legacy aliases
-      "imagen-4-fast": 0.039,
-      "imagen-4": 0.15,
-      // Video generation (per second)
-      "veo-3.1-fast": { withAudio: 0.15, withoutAudio: 0.1 },
-      "veo-3.1": { withAudio: 0.4, withoutAudio: 0.2 },
-      // Legacy aliases
-      "veo-3-fast": { withAudio: 0.15, withoutAudio: 0.1 },
-      "veo-3": { withAudio: 0.4, withoutAudio: 0.2 },
-      // LLM (per token, derived from $9.50/million)
-      llama: 95e-7,
-      // Luma Reframe
-      "luma-reframe-image": {
-        "photon-flash-1": 0.01,
-        "photon-1": 0.03
-      },
-      "luma-reframe-video": 0.06,
-      // per second
-      // Topaz Upscale (tiered by megapixels)
-      "topaz-image-upscale": [
-        { maxMP: 1, price: 0.05 },
-        { maxMP: 4, price: 0.08 },
-        { maxMP: 9, price: 0.16 },
-        { maxMP: 16, price: 0.27 },
-        { maxMP: 25, price: 0.41 },
-        { maxMP: Infinity, price: 0.82 }
-      ],
-      // Topaz Video (per 5 seconds based on resolution and fps)
-      "topaz-video-upscale": {
-        "720p-15": 0.014,
-        "720p-24": 0.022,
-        "720p-30": 0.027,
-        "720p-60": 0.054,
-        "1080p-15": 0.051,
-        "1080p-24": 0.081,
-        "1080p-30": 0.101,
-        "1080p-60": 0.203,
-        "4k-15": 0.187,
-        "4k-24": 0.299,
-        "4k-30": 0.373,
-        "4k-60": 0.747
-      }
-    };
-    var IMAGE_NODE_TYPES = ["imageGen", "image-gen", "ImageGenNode"];
-    var VIDEO_NODE_TYPES = ["videoGen", "video-gen", "VideoGenNode"];
-    var LUMA_NODE_TYPES = ["reframe", "lumaReframeImage", "lumaReframeVideo"];
-    var TOPAZ_NODE_TYPES = ["upscale", "topazImageUpscale", "topazVideoUpscale"];
-    var DEFAULT_VIDEO_DURATION = 8;
-    var ASPECT_RATIOS3 = [
-      "1:1",
-      "16:9",
-      "9:16",
-      "4:3",
-      "3:4",
-      "4:5",
-      "5:4",
-      "2:3",
-      "3:2",
-      "21:9"
-    ];
-    var VIDEO_ASPECT_RATIOS = ["16:9", "9:16"];
-    var RESOLUTIONS2 = ["1K", "2K", "4K"];
-    var VIDEO_RESOLUTIONS = ["720p", "1080p"];
-    var VIDEO_DURATIONS = [4, 6, 8];
-    var OUTPUT_FORMATS2 = ["jpg", "png", "webp"];
-    var LUMA_ASPECT_RATIOS2 = ["1:1", "3:4", "4:3", "9:16", "16:9", "9:21", "21:9"];
-    Object.defineProperty(exports$1, "buildDependencyMap", {
-      enumerable: true,
-      get: function() {
-        return chunkOAAW6BNW_js.buildDependencyMap;
-      }
-    });
-    Object.defineProperty(exports$1, "topologicalSort", {
-      enumerable: true,
-      get: function() {
-        return chunkOAAW6BNW_js.topologicalSort;
-      }
-    });
-    Object.defineProperty(exports$1, "detectCycles", {
-      enumerable: true,
-      get: function() {
-        return chunkFZCK5A7S_js.detectCycles;
-      }
-    });
-    Object.defineProperty(exports$1, "getCompatibleHandles", {
-      enumerable: true,
-      get: function() {
-        return chunkFZCK5A7S_js.getCompatibleHandles;
-      }
-    });
-    Object.defineProperty(exports$1, "getHandleType", {
-      enumerable: true,
-      get: function() {
-        return chunkFZCK5A7S_js.getHandleType;
-      }
-    });
-    Object.defineProperty(exports$1, "isValidConnection", {
-      enumerable: true,
-      get: function() {
-        return chunkFZCK5A7S_js.isValidConnection;
-      }
-    });
-    Object.defineProperty(exports$1, "validateWorkflow", {
-      enumerable: true,
-      get: function() {
-        return chunkFZCK5A7S_js.validateWorkflow;
-      }
-    });
-    exports$1.ASPECT_RATIOS = ASPECT_RATIOS3;
-    exports$1.DEFAULT_VIDEO_DURATION = DEFAULT_VIDEO_DURATION;
-    exports$1.IMAGE_NODE_TYPES = IMAGE_NODE_TYPES;
-    exports$1.LUMA_ASPECT_RATIOS = LUMA_ASPECT_RATIOS2;
-    exports$1.LUMA_NODE_TYPES = LUMA_NODE_TYPES;
-    exports$1.OUTPUT_FORMATS = OUTPUT_FORMATS2;
-    exports$1.PRICING = PRICING;
-    exports$1.RESOLUTIONS = RESOLUTIONS2;
-    exports$1.TOPAZ_NODE_TYPES = TOPAZ_NODE_TYPES;
-    exports$1.VIDEO_ASPECT_RATIOS = VIDEO_ASPECT_RATIOS;
-    exports$1.VIDEO_DURATIONS = VIDEO_DURATIONS;
-    exports$1.VIDEO_NODE_TYPES = VIDEO_NODE_TYPES;
-    exports$1.VIDEO_RESOLUTIONS = VIDEO_RESOLUTIONS;
-  }
-});
 var NodeErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -917,7 +639,7 @@ function NegativePromptSelectorComponent({ value, onChange }) {
             value: customText,
             onChange: (e) => handleCustomChange(e.target.value),
             placeholder: "ugly, deformed, ...",
-            className: "w-full h-7 rounded-md border border-input bg-background px-2 text-xs shadow-sm placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: "nodrag nopan w-full h-7 rounded-md border border-input bg-background px-2 text-xs shadow-sm placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           }
         )
       ] })
@@ -1042,7 +764,7 @@ function SliderInput({
           step,
           value: currentValue,
           onChange: (e) => onChange(Number(e.target.value)),
-          className: "w-16 h-7 rounded-md border border-input bg-background px-2 text-xs text-center shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className: "nodrag nopan w-16 h-7 rounded-md border border-input bg-background px-2 text-xs text-center shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         }
       )
     ] })
@@ -1091,7 +813,7 @@ function NumberInput({
           const val = e.target.value;
           onChange(val === "" ? null : Number(val));
         },
-        className: "w-full h-8 rounded-md border border-input bg-background px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        className: "nodrag nopan w-full h-8 rounded-md border border-input bg-background px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
       }
     )
   ] });
@@ -2516,6 +2238,254 @@ function VoiceChangeNodeComponent(props) {
   ] }) });
 }
 var VoiceChangeNode = memo(VoiceChangeNodeComponent);
+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 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(
+                    Image4,
+                    {
+                      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 INPUT_TYPES = [
   { value: "image", label: "Image" },
   { value: "video", label: "Video" },
@@ -3150,7 +3120,7 @@ function AudioInputNodeComponent(props) {
           onChange: (e) => setUrlValue(e.target.value),
           onKeyDown: handleUrlKeyDown,
           placeholder: "https://...",
-          className: "flex-1 h-7 px-2 text-xs rounded-md border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary"
+          className: "nodrag nopan flex-1 h-7 px-2 text-xs rounded-md border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary"
         }
       ),
       /* @__PURE__ */ jsx(
@@ -3289,7 +3259,7 @@ function ImageInputNodeComponent(props) {
           onChange: (e) => setUrlValue(e.target.value),
           onKeyDown: handleUrlKeyDown,
           placeholder: "https://...",
-          className: "flex-1 h-7 px-2 text-xs rounded-md border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary"
+          className: "nodrag nopan flex-1 h-7 px-2 text-xs rounded-md border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary"
         }
       ),
       /* @__PURE__ */ jsx(
@@ -3554,7 +3524,7 @@ function PromptNodeComponent(props) {
       value: nodeData.prompt || "",
       onChange: handlePromptChange,
       placeholder: "Enter your prompt...",
-      className: "w-full flex-1 min-h-[80px] px-2 py-1.5 text-sm bg-background border border-border rounded resize-none focus:outline-none focus:ring-1 focus:ring-primary"
+      className: "nodrag nopan w-full flex-1 min-h-[80px] px-2 py-1.5 text-sm bg-background border border-border rounded resize-none focus:outline-none focus:ring-1 focus:ring-primary"
     }
   ) });
 }
@@ -3676,7 +3646,7 @@ function VideoInputNodeComponent(props) {
           onChange: (e) => setUrlValue(e.target.value),
           onKeyDown: handleUrlKeyDown,
           placeholder: "https://...",
-          className: "flex-1 h-7 px-2 text-xs rounded-md border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary"
+          className: "nodrag nopan flex-1 h-7 px-2 text-xs rounded-md border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary"
         }
       ),
       /* @__PURE__ */ jsx(
@@ -3938,13 +3908,15 @@ function AnimationNodeComponent(props) {
         /* @__PURE__ */ jsx(SelectContent, { children: PRESET_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
       ] })
     ] }),
-    nodeData.curveType === "custom" && /* @__PURE__ */ jsxs("div", { className: "text-xs text-[var(--muted-foreground)]", children: [
-      "Bezier: [",
-      curve.map((v) => v.toFixed(2)).join(", "),
-      "]",
-      /* @__PURE__ */ jsx("div", { className: "mt-1 text-[var(--primary)] cursor-pointer hover:underline", children: "Edit in panel \u2192" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "h-20 bg-[var(--background)] rounded border border-[var(--border)] p-2", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "w-full h-full", children: [
+    nodeData.curveType === "custom" && /* @__PURE__ */ jsx(
+      CubicBezierEditor,
+      {
+        value: curve,
+        onChange: (v) => updateNodeData(id, { customCurve: v }),
+        disabled: nodeData.status === "processing"
+      }
+    ),
+    nodeData.curveType === "preset" && /* @__PURE__ */ jsx("div", { className: "h-20 bg-[var(--background)] rounded border border-[var(--border)] p-2", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "w-full h-full", children: [
       /* @__PURE__ */ jsx("path", { d: pathD, fill: "none", stroke: "var(--primary)", strokeWidth: "2" }),
       /* @__PURE__ */ jsx("circle", { cx: "0", cy: "100", r: "3", fill: "var(--foreground)" }),
       /* @__PURE__ */ jsx("circle", { cx: "100", cy: "0", r: "3", fill: "var(--foreground)" }),
@@ -4129,7 +4101,7 @@ var ie = (e, t) => {
   }), [t, o]);
 };
 var I = { capture: false, passive: true };
-var X4 = { capture: true, passive: false };
+var X5 = { capture: true, passive: false };
 var Me = (e) => {
   e.preventDefault(), e.currentTarget.focus();
 };
@@ -4173,7 +4145,7 @@ var se = forwardRef(({ boundsPadding: e = 0, browsingContext: t = globalThis, ch
   }), [v, T, L, t]), useImperativeHandle(de, () => ({ rootContainer: p.current, handleContainer: f.current, setPosition(n) {
     let { width: s, height: c } = p.current.getBoundingClientRect();
     l({ x: s / 100 * n, y: c / 100 * n });
-  } }), [l]), ie(p, Se), U("keydown", Ce, f.current, X4), U("click", Me, f.current, X4), U("pointerdown", Re, ue, X4);
+  } }), [l]), ie(p, Se), U("keydown", Ce, f.current, X5), U("click", Me, f.current, X5), U("pointerdown", Re, ue, X5);
   let ve = i || jsx(F, { disabled: o, portrait: a }), K = me ? ce : void 0, he = { position: "relative", display: "flex", overflow: "hidden", cursor: L ? a ? "ns-resize" : "ew-resize" : void 0, touchAction: "none", userSelect: "none", KhtmlUserSelect: "none", msUserSelect: "none", MozUserSelect: "none", WebkitUserSelect: "none", ...le };
   return jsxs("div", { ...pe, ref: p, style: he, "data-rcs": "root", children: [m, jsx(B, { ref: j, transition: K, children: C }), jsx(W, { disabled: o, portrait: a, position: Math.round(d.current), ref: f, transition: K, children: ve })] });
 });
@@ -4888,9 +4860,6 @@ function ReframeNodeComponent(props) {
   ] }) });
 }
 var ReframeNode = memo(ReframeNodeComponent);
-
-// src/nodes/processing/ResizeNode.tsx
-var import_core = __toESM(require_dist());
 var MODELS2 = {
   image: { id: "photon-flash-1", label: "Luma Photon Flash", price: "$0.01" },
   video: { id: "luma-reframe", label: "Luma Reframe", price: "$0.05" }
@@ -4954,7 +4923,7 @@ function ResizeNodeComponent(props) {
       /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Target Aspect Ratio" }),
       /* @__PURE__ */ jsxs(Select, { value: nodeData.targetAspectRatio, onValueChange: handleAspectRatioChange, children: [
         /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: import_core.LUMA_ASPECT_RATIOS.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio, children: ratio }, ratio)) })
+        /* @__PURE__ */ jsx(SelectContent, { children: LUMA_ASPECT_RATIOS.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio, children: ratio }, ratio)) })
       ] })
     ] }),
     /* @__PURE__ */ jsx(
@@ -5981,4 +5950,4 @@ var nodeTypes = {
   workflowRef: WorkflowRefNode
 };
 
-export { AnimationNode, AnnotationNode, AudioInputNode, BaseNode, DownloadNode, ImageCompareNode, ImageGenNode, ImageGridSplitNode, ImageInputNode, LLMNode, LipSyncNode, MotionControlNode, OutputGalleryNode, OutputNode, PromptConstructorNode, PromptNode, ReframeNode, ResizeNode, SubtitleNode, TextToSpeechNode, TranscribeNode, UpscaleNode, VideoFrameExtractNode, VideoGenNode, VideoInputNode, VideoStitchNode, VideoTrimNode, VoiceChangeNode, WorkflowInputNode, WorkflowOutputNode, WorkflowRefNode, nodeTypes, setWorkflowRefApi };
+export { AnimationNode, AnnotationNode, AudioInputNode, BaseNode, DownloadNode, ImageCompareNode, ImageGenNode, ImageGridSplitNode, ImageInputNode, LLMNode, LipSyncNode, MotionControlNode, NodeDetailModal, OutputGalleryNode, OutputNode, PromptConstructorNode, PromptNode, ReframeNode, ResizeNode, SubtitleNode, TextToSpeechNode, TranscribeNode, UpscaleNode, VideoFrameExtractNode, VideoGenNode, VideoInputNode, VideoStitchNode, VideoTrimNode, VoiceChangeNode, WorkflowInputNode, WorkflowOutputNode, WorkflowRefNode, nodeTypes, setWorkflowRefApi };