@genfeedai/workflow-ui 0.2.3 → 0.2.5

package/dist/{chunk-XPZAHIWY.mjs → chunk-2FUPL67V.mjs}

@@ -1,20 +1,20 @@
-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, CubicBezierEditor, getMediaFromNode } from './chunk-6PSJTBNV.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-LT3ZJJL6.mjs';
-import { useWorkflowStore } from './chunk-R727OFBR.mjs';
-import { useWorkflowUIConfig } from './chunk-FT33LFII.mjs';
-import { usePromptLibraryStore } from './chunk-VRN3UWE5.mjs';
+import { Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Slider, Label, Input, GridPositionSelector, ComparisonSlider } from './chunk-C6MQBJFC.mjs';
+import { useNodeExecution, useCanGenerate, useModelSelection, useAutoLoadModelSchema, useAIGenNode, useAIGenNodeHeader, useMediaUpload, usePromptAutocomplete, useRequiredInputs } from './chunk-FWJIAW2E.mjs';
+import { Button } from './chunk-B4EAAKYF.mjs';
+import { generateHandlesFromSchema, IMAGE_MODEL_MAP, DEFAULT_IMAGE_MODEL, IMAGE_MODEL_ID_MAP, IMAGE_MODELS, LIPSYNC_MODELS, LIPSYNC_SYNC_MODES, LLM_MODEL_MAP, DEFAULT_LLM_MODEL, LLM_MODEL_ID_MAP, LLM_MODELS, VIDEO_MODEL_MAP, DEFAULT_VIDEO_MODEL, VIDEO_MODEL_ID_MAP, VIDEO_MODELS, EASING_PRESETS, CubicBezierEditor, getMediaFromNode } from './chunk-U4QPE4CY.mjs';
+import { getImageDimensions, getVideoMetadata } from './chunk-VVQ4CH77.mjs';
+import { useWorkflowUIConfig } from './chunk-YUIK4AHM.mjs';
+import { usePromptEditorStore, useAnnotationStore } from './chunk-QQVHGJ2G.mjs';
+import { useUIStore, useExecutionStore } from './chunk-OJWVEEMM.mjs';
+import { useWorkflowStore } from './chunk-GPYIIWD5.mjs';
+import { usePromptLibraryStore } from './chunk-XRC3O5GK.mjs';
+import { Wand2, Volume2, Video, Subtitles, Sparkles, Share2, Scissors, RefreshCw, Puzzle, Pencil, Navigation, Mic, MessageSquare, Maximize2, Maximize, LayoutGrid, Layers, Image as Image$1, Grid3X3, GitBranch, Film, FileVideo, FileText, Eye, Download, Crop, Columns2, CheckCircle, Brain, AudioLines, AtSign, ArrowRightToLine, ArrowLeftFromLine, 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 Image4 from 'next/image';
+import { memo, forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle, useMemo, Component, useLayoutEffect } from 'react';
 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, ZoomOut, ZoomIn } from 'lucide-react';
-import { memo, forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle, useMemo, Component, useLayoutEffect } 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';
 import { LUMA_ASPECT_RATIOS } from '@genfeedai/core';
@@ -22,16 +22,20 @@ import { LUMA_ASPECT_RATIOS } from '@genfeedai/core';
 var NodeErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
-    this.state = { hasError: false, error: null };
+    this.state = { error: null, hasError: false };
   }
   static getDerivedStateFromError(error) {
-    return { hasError: true, error };
+    return { error, hasError: true };
   }
   componentDidCatch(error, errorInfo) {
-    console.error(`Node ${this.props.nodeId} (${this.props.nodeType}) crashed:`, error, errorInfo);
+    console.error(
+      `Node ${this.props.nodeId} (${this.props.nodeType}) crashed:`,
+      error,
+      errorInfo
+    );
   }
   handleRetry = () => {
-    this.setState({ hasError: false, error: null });
+    this.setState({ error: null, hasError: false });
   };
   render() {
     if (this.state.hasError) {
@@ -41,10 +45,19 @@ var NodeErrorBoundary = class extends Component {
           /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children: "Node Error" }),
           /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground max-w-[200px] truncate", children: this.state.error?.message ?? "An unexpected error occurred" })
         ] }),
-        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: this.handleRetry, className: "gap-1.5", children: [
-          /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" }),
-          "Retry"
-        ] })
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: this.handleRetry,
+            className: "gap-1.5",
+            children: [
+              /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" }),
+              "Retry"
+            ]
+          }
+        )
       ] });
     }
     return this.props.children;
@@ -60,10 +73,18 @@ function calculatePosition(anchorRect) {
   const placement = spaceAbove >= tooltipHeight + offset ? "top" : "bottom";
   const top = placement === "top" ? anchorRect.top - tooltipHeight - offset : anchorRect.bottom + offset;
   let left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2;
-  left = Math.max(padding, Math.min(left, viewportWidth - tooltipWidth - padding));
-  return { top, left, placement };
+  left = Math.max(
+    padding,
+    Math.min(left, viewportWidth - tooltipWidth - padding)
+  );
+  return { left, placement, top };
 }
-function PreviewTooltip({ nodeType, nodeData, anchorRect, isVisible }) {
+function PreviewTooltip({
+  nodeType,
+  nodeData,
+  anchorRect,
+  isVisible
+}) {
   const [mounted, setMounted] = useState(false);
   const tooltipRef = useRef(null);
   const mediaInfo = useMemo(() => {
@@ -86,15 +107,24 @@ function PreviewTooltip({ nodeType, nodeData, anchorRect, isVisible }) {
       ref: tooltipRef,
       className: "fixed z-[100] pointer-events-none",
       style: {
-        top: position.top,
         left: position.left,
         opacity: isVisible ? 1 : 0,
+        top: position.top,
         transform: `scale(${isVisible ? 1 : 0.95})`,
         transition: "opacity 150ms ease-out, transform 150ms ease-out"
       },
       children: /* @__PURE__ */ jsxs("div", { className: "w-[280px] bg-card border border-border rounded-lg shadow-xl overflow-hidden", children: [
         /* @__PURE__ */ jsxs("div", { className: "relative aspect-video bg-background", children: [
-          mediaInfo.type === "image" && /* @__PURE__ */ jsx(Image4, { src: mediaInfo.url, alt: "Preview", fill: true, className: "object-contain", unoptimized: true }),
+          mediaInfo.type === "image" && /* @__PURE__ */ jsx(
+            Image4,
+            {
+              src: mediaInfo.url,
+              alt: "Preview",
+              fill: true,
+              className: "object-contain",
+              unoptimized: true
+            }
+          ),
           mediaInfo.type === "video" && /* @__PURE__ */ jsx(
             "video",
             {
@@ -120,47 +150,47 @@ function PreviewTooltip({ nodeType, nodeData, anchorRect, isVisible }) {
   return createPortal(content, document.body);
 }
 var ICON_MAP = {
-  Image: Image$1,
-  MessageSquare,
+  ArrowLeftFromLine,
+  // Composition icons
+  ArrowRightToLine,
+  AtSign,
+  AudioLines,
+  Brain,
+  CheckCircle,
+  Columns2,
+  Crop,
+  Download,
+  Eye,
   FileText,
   FileVideo,
   Film,
-  Sparkles,
-  Video,
-  Brain,
-  Maximize2,
-  Wand2,
+  GitBranch,
+  Grid3X3,
+  Image: Image$1,
   Layers,
-  Scissors,
-  Share2,
-  CheckCircle,
-  Eye,
-  Download,
-  AtSign,
-  RefreshCw: RefreshCw,
-  Crop,
+  LayoutGrid,
   Maximize,
+  Maximize2,
+  MessageSquare,
   Mic,
-  AudioLines,
-  Volume2,
   Navigation,
-  Puzzle,
-  Grid3X3,
-  LayoutGrid,
-  Columns2,
   Pencil,
+  Puzzle,
+  RefreshCw: RefreshCw,
+  Scissors,
+  Share2,
+  Sparkles,
   Subtitles,
-  // Composition icons
-  ArrowRightToLine,
-  ArrowLeftFromLine,
-  GitBranch
+  Video,
+  Volume2,
+  Wand2
 };
 var HANDLE_COLORS = {
+  audio: "var(--handle-audio)",
   image: "var(--handle-image)",
-  video: "var(--handle-video)",
-  text: "var(--handle-text)",
   number: "var(--handle-number)",
-  audio: "var(--handle-audio)"
+  text: "var(--handle-text)",
+  video: "var(--handle-video)"
 };
 function StatusIndicator({ status }) {
   switch (status) {
@@ -204,7 +234,9 @@ function BaseNodeComponent({
   const executeNode = useExecutionStore((state) => state.executeNode);
   const isRunning = useExecutionStore((state) => state.isRunning);
   const stopExecution = useExecutionStore((state) => state.stopExecution);
-  const stopNodeExecution = useExecutionStore((state) => state.stopNodeExecution);
+  const stopNodeExecution = useExecutionStore(
+    (state) => state.stopNodeExecution
+  );
   const updateNodeInternals = useUpdateNodeInternals();
   const nodeDef = NODE_DEFINITIONS[type];
   const nodeData = data;
@@ -231,12 +263,17 @@ function BaseNodeComponent({
     return () => cancelAnimationFrame(rafId);
   }, [id, updateNodeInternals, handlesKey]);
   const isHighlighted = highlightedNodeIds.length === 0 || highlightedNodeIds.includes(id);
-  const nodeExecuting = useExecutionStore((state) => state.activeNodeExecutions.has(id));
+  const nodeExecuting = useExecutionStore(
+    (state) => state.activeNodeExecutions.has(id)
+  );
   const handleRetry = useCallback(
     (e) => {
       e.stopPropagation();
       if (!nodeExecuting) {
-        updateNodeData(id, { error: void 0, status: NodeStatusEnum.PROCESSING });
+        updateNodeData(id, {
+          error: void 0,
+          status: NodeStatusEnum.PROCESSING
+        });
         executeNode(id);
       }
     },
@@ -250,10 +287,17 @@ function BaseNodeComponent({
       } else if (nodeExecuting) {
         stopNodeExecution(id);
       } else {
-        updateNodeData(id, { status: NodeStatusEnum.IDLE, error: void 0 });
+        updateNodeData(id, { error: void 0, status: NodeStatusEnum.IDLE });
       }
     },
-    [id, isRunning, nodeExecuting, stopExecution, stopNodeExecution, updateNodeData]
+    [
+      id,
+      isRunning,
+      nodeExecuting,
+      stopExecution,
+      stopNodeExecution,
+      updateNodeData
+    ]
   );
   const handleCopyError = useCallback(
     async (e) => {
@@ -306,11 +350,11 @@ function BaseNodeComponent({
     toggleNodeLock(id);
   };
   const categoryCssVars = {
-    input: "var(--category-input)",
     ai: "var(--category-ai)",
-    processing: "var(--category-processing)",
+    composition: "var(--category-composition)",
+    input: "var(--category-input)",
     output: "var(--category-output)",
-    composition: "var(--category-composition)"
+    processing: "var(--category-processing)"
   };
   const categoryColor = categoryCssVars[nodeDef.category] ?? categoryCssVars.input;
   const customColor = nodeData.color;
@@ -355,8 +399,8 @@ function BaseNodeComponent({
           ...customColor && { borderColor: customColor },
           // When resized, use explicit dimensions
           ...isResized && {
-            width: width ? `${width}px` : void 0,
-            height: height ? `${height}px` : void 0
+            height: height ? `${height}px` : void 0,
+            width: width ? `${width}px` : void 0
           }
         },
         onClick: () => selectNode(id),
@@ -374,8 +418,8 @@ function BaseNodeComponent({
                 isConnectableEnd: !isDisabled,
                 className: clsx("!w-3 !h-3", isDisabled && "opacity-30"),
                 style: {
-                  top: `${(index + 1) / (sortedInputs.length + 1) * 100}%`,
-                  background: HANDLE_COLORS[input.type]
+                  background: HANDLE_COLORS[input.type],
+                  top: `${(index + 1) / (sortedInputs.length + 1) * 100}%`
                 }
               },
               input.id
@@ -388,85 +432,96 @@ function BaseNodeComponent({
               position: Position.Right,
               id: output.id,
               className: "!w-3 !h-3 handle-output",
-              style: { top: `${(index + 1) / (nodeDef.outputs.length + 1) * 100}%` }
+              style: {
+                top: `${(index + 1) / (nodeDef.outputs.length + 1) * 100}%`
+              }
             },
             output.id
           )),
-          /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-col", isResized && "flex-1 min-h-0 overflow-auto"), children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5 border-b border-border", children: [
-              /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-foreground" }),
-              titleElement ?? /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-sm font-medium text-left text-foreground", children: title ?? nodeData.label }),
-              !hideStatusIndicator && (isProcessing ? /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: handleStopNode,
-                  className: "text-destructive hover:bg-destructive/20 hover:text-destructive",
-                  title: isRunning ? "Stop execution" : nodeExecuting ? "Stop node" : "Reset node",
-                  children: /* @__PURE__ */ jsx(Square, { className: "h-3.5 w-3.5 fill-current" })
-                }
-              ) : /* @__PURE__ */ jsx(StatusIndicator, { status: nodeData.status })),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: handleLockToggle,
-                  className: isLocked ? "text-chart-3" : "text-muted-foreground",
-                  title: isLocked ? "Unlock node (L)" : "Lock node (L)",
-                  children: isLocked ? /* @__PURE__ */ jsx(Lock, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Unlock, { className: "h-4 w-4" })
-                }
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: clsx(
+                "flex flex-col",
+                isResized && "flex-1 min-h-0 overflow-auto"
               ),
-              headerActions
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col p-3 min-h-0", children: /* @__PURE__ */ jsxs(NodeErrorBoundary, { nodeId: id, nodeType: type, children: [
-              nodeData.error && /* @__PURE__ */ jsxs("div", { className: "mb-3 rounded-md border border-destructive/30 bg-destructive/10 p-2", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
-                  /* @__PURE__ */ jsx("p", { className: "flex-1 text-xs text-destructive break-all", children: nodeData.error }),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5 border-b border-border", children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-foreground" }),
+                  titleElement ?? /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-sm font-medium text-left text-foreground", children: title ?? nodeData.label }),
+                  !hideStatusIndicator && (isProcessing ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      onClick: handleStopNode,
+                      className: "text-destructive hover:bg-destructive/20 hover:text-destructive",
+                      title: isRunning ? "Stop execution" : nodeExecuting ? "Stop node" : "Reset node",
+                      children: /* @__PURE__ */ jsx(Square, { className: "h-3.5 w-3.5 fill-current" })
+                    }
+                  ) : /* @__PURE__ */ jsx(StatusIndicator, { status: nodeData.status })),
                   /* @__PURE__ */ jsx(
                     Button,
                     {
                       variant: "ghost",
                       size: "icon-sm",
-                      onClick: handleCopyError,
-                      className: "flex-shrink-0 h-5 w-5 text-destructive/70 hover:bg-destructive/20 hover:text-destructive",
-                      title: "Copy error",
-                      children: /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+                      onClick: handleLockToggle,
+                      className: isLocked ? "text-chart-3" : "text-muted-foreground",
+                      title: isLocked ? "Unlock node (L)" : "Lock node (L)",
+                      children: isLocked ? /* @__PURE__ */ jsx(Lock, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Unlock, { className: "h-4 w-4" })
                     }
-                  )
+                  ),
+                  headerActions
                 ] }),
-                /* @__PURE__ */ jsxs(
-                  Button,
-                  {
-                    variant: "destructive",
-                    size: "sm",
-                    onClick: handleRetry,
-                    disabled: nodeExecuting,
-                    className: "mt-2 w-full",
-                    children: [
-                      /* @__PURE__ */ jsx(RotateCcw, { className: "h-3 w-3" }),
-                      "Retry"
-                    ]
-                  }
-                )
-              ] }),
-              children,
-              nodeData.status === "processing" && nodeData.progress !== void 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
-                /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "h-full bg-primary transition-all duration-300",
-                    style: { width: `${nodeData.progress}%` }
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs("span", { className: "mt-1 text-xs text-muted-foreground", children: [
-                  nodeData.progress,
-                  "%"
-                ] })
-              ] })
-            ] }) })
-          ] }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col p-3 min-h-0", children: /* @__PURE__ */ jsxs(NodeErrorBoundary, { nodeId: id, nodeType: type, children: [
+                  nodeData.error && /* @__PURE__ */ jsxs("div", { className: "mb-3 rounded-md border border-destructive/30 bg-destructive/10 p-2", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
+                      /* @__PURE__ */ jsx("p", { className: "flex-1 text-xs text-destructive break-all", children: nodeData.error }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "icon-sm",
+                          onClick: handleCopyError,
+                          className: "flex-shrink-0 h-5 w-5 text-destructive/70 hover:bg-destructive/20 hover:text-destructive",
+                          title: "Copy error",
+                          children: /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: "destructive",
+                        size: "sm",
+                        onClick: handleRetry,
+                        disabled: nodeExecuting,
+                        className: "mt-2 w-full",
+                        children: [
+                          /* @__PURE__ */ jsx(RotateCcw, { className: "h-3 w-3" }),
+                          "Retry"
+                        ]
+                      }
+                    )
+                  ] }),
+                  children,
+                  nodeData.status === "processing" && nodeData.progress !== void 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+                    /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "h-full bg-primary transition-all duration-300",
+                        style: { width: `${nodeData.progress}%` }
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs("span", { className: "mt-1 text-xs text-muted-foreground", children: [
+                      nodeData.progress,
+                      "%"
+                    ] })
+                  ] })
+                ] }) })
+              ]
+            }
+          ),
           isLocked && /* @__PURE__ */ jsx("div", { className: "absolute -right-2 -top-2 rounded bg-chart-3 px-1.5 py-0.5 text-[10px] font-bold text-background", children: "LOCKED" })
         ]
       }
@@ -508,7 +563,10 @@ function arePropsEqual(prev, next) {
   return true;
 }
 var BaseNode = memo(BaseNodeComponent, arePropsEqual);
-function ProcessingOverlayComponent({ label = "Generating...", onStop }) {
+function ProcessingOverlayComponent({
+  label = "Generating...",
+  onStop
+}) {
   return /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60 backdrop-blur-sm rounded-md", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
     /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }),
     /* @__PURE__ */ jsx("span", { className: "text-xs text-white/80", children: label }),
@@ -520,14 +578,14 @@ function ProcessingOverlayComponent({ label = "Generating...", onStop }) {
 }
 var ProcessingOverlay = memo(ProcessingOverlayComponent);
 var NEGATIVE_PROMPT_OPTIONS = [
-  { value: "blurry", label: "Blurry" },
-  { value: "distorted", label: "Distorted" },
-  { value: "low quality", label: "Low Quality" },
-  { value: "watermark", label: "Watermark" },
-  { value: "text", label: "Text/Logos" },
-  { value: "artifacts", label: "Artifacts" },
-  { value: "grainy", label: "Grainy/Noisy" },
-  { value: "oversaturated", label: "Oversaturated" }
+  { label: "Blurry", value: "blurry" },
+  { label: "Distorted", value: "distorted" },
+  { label: "Low Quality", value: "low quality" },
+  { label: "Watermark", value: "watermark" },
+  { label: "Text/Logos", value: "text" },
+  { label: "Artifacts", value: "artifacts" },
+  { label: "Grainy/Noisy", value: "grainy" },
+  { label: "Oversaturated", value: "oversaturated" }
 ];
 function parseNegativePrompt(value) {
   if (!value) return /* @__PURE__ */ new Set();
@@ -537,7 +595,9 @@ function parseNegativePrompt(value) {
 }
 function isKnownTerm(term) {
   const lowerTerm = term.toLowerCase();
-  return NEGATIVE_PROMPT_OPTIONS.some((opt) => opt.value.toLowerCase() === lowerTerm);
+  return NEGATIVE_PROMPT_OPTIONS.some(
+    (opt) => opt.value.toLowerCase() === lowerTerm
+  );
 }
 function extractCustomTerms(value) {
   if (!value) return "";
@@ -558,7 +618,10 @@ function combineTerms(checkedValues, customText) {
   }
   return parts.join(", ");
 }
-function NegativePromptSelectorComponent({ value, onChange }) {
+function NegativePromptSelectorComponent({
+  value,
+  onChange
+}) {
   const [isExpanded, setIsExpanded] = useState(false);
   const checkedTerms = useMemo(() => parseNegativePrompt(value), [value]);
   const [customText, setCustomText] = useState(() => extractCustomTerms(value));
@@ -606,29 +669,36 @@ function NegativePromptSelectorComponent({ value, onChange }) {
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-3 gap-y-1.5", children: NEGATIVE_PROMPT_OPTIONS.map((option) => {
         const isChecked = checkedTerms.has(option.value.toLowerCase());
         const checkboxId = `negative-prompt-${option.value}`;
-        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 nodrag", children: [
-          /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              id: checkboxId,
-              checked: isChecked,
-              onCheckedChange: (checked) => {
-                if (typeof checked === "boolean") {
-                  handleCheckboxChange(option.value, checked);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center gap-1.5 nodrag",
+            children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  id: checkboxId,
+                  checked: isChecked,
+                  onCheckedChange: (checked) => {
+                    if (typeof checked === "boolean") {
+                      handleCheckboxChange(option.value, checked);
+                    }
+                  },
+                  className: "w-3.5 h-3.5"
                 }
-              },
-              className: "w-3.5 h-3.5"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "label",
-            {
-              htmlFor: checkboxId,
-              className: "text-sm text-foreground truncate cursor-pointer",
-              children: option.label
-            }
-          )
-        ] }, option.value);
+              ),
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: checkboxId,
+                  className: "text-sm text-foreground truncate cursor-pointer",
+                  children: option.label
+                }
+              )
+            ]
+          },
+          option.value
+        );
       }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 mt-1", children: [
         /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground", children: "Custom" }),
@@ -685,28 +755,32 @@ var DEFAULT_ENUM_VALUES = {
     "4:5",
     "5:4"
   ],
-  // Output formats
-  output_format: ["jpg", "png", "webp"],
-  // Resolution options
-  resolution: ["1K", "2K", "4K", "720p", "1080p"],
+  // Character orientation
+  character_orientation: ["image", "video"],
   // Video duration
   duration: ["4", "5", "6", "8", "10"],
   // Megapixels
   megapixels: ["0.25", "1", "2"],
+  // Video model mode
+  mode: ["std", "pro"],
+  // Luma models
+  model: ["photon-flash-1", "photon-1"],
+  // Output formats
+  output_format: ["jpg", "png", "webp"],
+  // Refine options
+  refine: ["no_refiner", "expert_ensemble_refiner", "base_image_refiner"],
+  // Resolution options
+  resolution: ["1K", "2K", "4K", "720p", "1080p"],
   // Safety filter level
-  safety_filter_level: ["block_only_high", "block_medium_and_above", "block_low_and_above"],
+  safety_filter_level: [
+    "block_only_high",
+    "block_medium_and_above",
+    "block_low_and_above"
+  ],
   // Scheduler options
   scheduler: ["K_EULER", "K_EULER_ANCESTRAL", "DDIM", "DPM_SOLVER", "PNDM"],
-  // Refine options
-  refine: ["no_refiner", "expert_ensemble_refiner", "base_image_refiner"],
-  // Video model mode
-  mode: ["std", "pro"],
-  // Character orientation
-  character_orientation: ["image", "video"],
   // Sync mode
-  sync_mode: ["loop", "bounce", "cut_off", "silence", "remap"],
-  // Luma models
-  model: ["photon-flash-1", "photon-1"]
+  sync_mode: ["loop", "bounce", "cut_off", "silence", "remap"]
 };
 function getEnumKey(refPath) {
   const parts = refPath.split("/");
@@ -725,10 +799,17 @@ function EnumSelect({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground", children: formatLabel(propertyKey, property.title) }),
-    /* @__PURE__ */ jsxs(Select, { value: String(value ?? property.default ?? options[0]), onValueChange: onChange, children: [
-      /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-      /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: opt }, opt)) })
-    ] })
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: String(value ?? property.default ?? options[0]),
+        onValueChange: onChange,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt, children: opt }, opt)) })
+        ]
+      }
+    )
   ] });
 }
 function SliderInput({
@@ -791,7 +872,14 @@ function CheckboxInput({
         }
       }
     ),
-    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text-sm text-foreground cursor-pointer", children: formatLabel(propertyKey, property.title) })
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "text-sm text-foreground cursor-pointer",
+        children: formatLabel(propertyKey, property.title)
+      }
+    )
   ] });
 }
 function NumberInput({
@@ -843,96 +931,102 @@ function SchemaInputsComponent({
   if (!schema || sortedProperties.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: `flex flex-col gap-2${disabled ? " pointer-events-none opacity-50" : ""}`, children: sortedProperties.map(([key, property]) => {
-    const value = values[key];
-    if (key === "negative_prompt" && property.type === "string") {
-      return /* @__PURE__ */ jsx(
-        NegativePromptSelector,
-        {
-          value: value ?? "",
-          onChange: (v) => handleChange(key, v)
-        },
-        key
-      );
-    }
-    if (property.allOf && property.allOf.length > 0) {
-      const enumKey = getEnumKey(property.allOf[0].$ref);
-      const options = enumValues?.[enumKey] ?? DEFAULT_ENUM_VALUES[enumKey] ?? [];
-      if (options.length > 0) {
-        const componentSchema = componentSchemas?.[enumKey];
-        const enumType = componentSchema?.type;
-        return /* @__PURE__ */ jsx(
-          EnumSelect,
-          {
-            propertyKey: key,
-            property,
-            value,
-            options,
-            onChange: (v) => {
-              if (enumType === "integer") {
-                handleChange(key, Number.parseInt(v, 10));
-              } else if (enumType === "number") {
-                handleChange(key, Number.parseFloat(v));
-              } else {
-                handleChange(key, v);
-              }
-            }
-          },
-          key
-        );
-      }
-    }
-    if (property.enum) {
-      return /* @__PURE__ */ jsx(
-        EnumSelect,
-        {
-          propertyKey: key,
-          property,
-          value,
-          options: property.enum,
-          onChange: (v) => handleChange(key, v)
-        },
-        key
-      );
-    }
-    if (property.type === "boolean") {
-      return /* @__PURE__ */ jsx(
-        CheckboxInput,
-        {
-          propertyKey: key,
-          property,
-          value,
-          onChange: (v) => handleChange(key, v)
-        },
-        key
-      );
-    }
-    if ((property.type === "integer" || property.type === "number") && property.minimum !== void 0 && property.maximum !== void 0) {
-      return /* @__PURE__ */ jsx(
-        SliderInput,
-        {
-          propertyKey: key,
-          property,
-          value,
-          onChange: (v) => handleChange(key, v)
-        },
-        key
-      );
-    }
-    if (property.type === "integer" || property.type === "number") {
-      return /* @__PURE__ */ jsx(
-        NumberInput,
-        {
-          propertyKey: key,
-          property,
-          value,
-          onChange: (v) => handleChange(key, v)
-        },
-        key
-      );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `flex flex-col gap-2${disabled ? " pointer-events-none opacity-50" : ""}`,
+      children: sortedProperties.map(([key, property]) => {
+        const value = values[key];
+        if (key === "negative_prompt" && property.type === "string") {
+          return /* @__PURE__ */ jsx(
+            NegativePromptSelector,
+            {
+              value: value ?? "",
+              onChange: (v) => handleChange(key, v)
+            },
+            key
+          );
+        }
+        if (property.allOf && property.allOf.length > 0) {
+          const enumKey = getEnumKey(property.allOf[0].$ref);
+          const options = enumValues?.[enumKey] ?? DEFAULT_ENUM_VALUES[enumKey] ?? [];
+          if (options.length > 0) {
+            const componentSchema = componentSchemas?.[enumKey];
+            const enumType = componentSchema?.type;
+            return /* @__PURE__ */ jsx(
+              EnumSelect,
+              {
+                propertyKey: key,
+                property,
+                value,
+                options,
+                onChange: (v) => {
+                  if (enumType === "integer") {
+                    handleChange(key, Number.parseInt(v, 10));
+                  } else if (enumType === "number") {
+                    handleChange(key, Number.parseFloat(v));
+                  } else {
+                    handleChange(key, v);
+                  }
+                }
+              },
+              key
+            );
+          }
+        }
+        if (property.enum) {
+          return /* @__PURE__ */ jsx(
+            EnumSelect,
+            {
+              propertyKey: key,
+              property,
+              value,
+              options: property.enum,
+              onChange: (v) => handleChange(key, v)
+            },
+            key
+          );
+        }
+        if (property.type === "boolean") {
+          return /* @__PURE__ */ jsx(
+            CheckboxInput,
+            {
+              propertyKey: key,
+              property,
+              value,
+              onChange: (v) => handleChange(key, v)
+            },
+            key
+          );
+        }
+        if ((property.type === "integer" || property.type === "number") && property.minimum !== void 0 && property.maximum !== void 0) {
+          return /* @__PURE__ */ jsx(
+            SliderInput,
+            {
+              propertyKey: key,
+              property,
+              value,
+              onChange: (v) => handleChange(key, v)
+            },
+            key
+          );
+        }
+        if (property.type === "integer" || property.type === "number") {
+          return /* @__PURE__ */ jsx(
+            NumberInput,
+            {
+              propertyKey: key,
+              property,
+              value,
+              onChange: (v) => handleChange(key, v)
+            },
+            key
+          );
+        }
+        return null;
+      })
     }
-    return null;
-  }) });
+  );
 }
 var SchemaInputs = memo(SchemaInputsComponent);
 function ImageGenNodeComponent(props) {
@@ -942,9 +1036,9 @@ function ImageGenNodeComponent(props) {
   const openNodeDetailModal = useUIStore((state) => state.openNodeDetailModal);
   const { handleGenerate, handleStop } = useNodeExecution(id);
   const { canGenerate } = useCanGenerate({
+    inputSchema: nodeData.selectedModel?.inputSchema,
     nodeId: id,
     nodeType: type,
-    inputSchema: nodeData.selectedModel?.inputSchema,
     schemaParams: nodeData.schemaParams
   });
   const [isModelBrowserOpen, setIsModelBrowserOpen] = useState(false);
@@ -969,16 +1063,18 @@ function ImageGenNodeComponent(props) {
       setTimeout(() => handleDownload(index), index * 100);
     });
   }, [nodeData.outputImages, handleDownload]);
-  const { handleModelSelect } = useModelSelection({
-    nodeId: id,
-    modelMap: IMAGE_MODEL_MAP,
-    fallbackModel: DEFAULT_IMAGE_MODEL
-  });
+  const { handleModelSelect } = useModelSelection(
+    {
+      fallbackModel: DEFAULT_IMAGE_MODEL,
+      modelMap: IMAGE_MODEL_MAP,
+      nodeId: id
+    }
+  );
   useAutoLoadModelSchema({
     currentModel: nodeData.model,
-    selectedModel: nodeData.selectedModel,
     modelIdMap: IMAGE_MODEL_ID_MAP,
-    onModelSelect: handleModelSelect
+    onModelSelect: handleModelSelect,
+    selectedModel: nodeData.selectedModel
   });
   const {
     schemaProperties,
@@ -988,8 +1084,8 @@ function ImageGenNodeComponent(props) {
     componentSchemas
   } = useAIGenNode({
     nodeId: id,
-    selectedModel: nodeData.selectedModel,
-    schemaParams: nodeData.schemaParams
+    schemaParams: nodeData.schemaParams,
+    selectedModel: nodeData.selectedModel
   });
   const handleExpand = useCallback(() => {
     openNodeDetailModal(id, "preview", selectedPreview ?? 0);
@@ -1001,14 +1097,14 @@ function ImageGenNodeComponent(props) {
   const isProcessing = nodeData.status === "processing";
   const handleModelBrowse = useCallback(() => setIsModelBrowserOpen(true), []);
   const { titleElement, headerActions } = useAIGenNodeHeader({
-    modelDisplayName,
-    isProcessing,
     canGenerate,
     hasOutput: !!nodeData.outputImage,
-    onModelBrowse: handleModelBrowse,
+    isProcessing,
+    modelDisplayName,
+    onExpand: handleExpand,
     onGenerate: handleGenerate,
-    onStop: handleStop,
-    onExpand: handleExpand
+    onModelBrowse: handleModelBrowse,
+    onStop: handleStop
   });
   return /* @__PURE__ */ jsxs(
     BaseNode,
@@ -1042,10 +1138,19 @@ function ImageGenNodeComponent(props) {
                 nodeData.outputImages.length,
                 " images)"
               ] }),
-              /* @__PURE__ */ jsxs(Button, { variant: "link", size: "sm", onClick: handleDownloadAll, className: "h-auto p-0", children: [
-                /* @__PURE__ */ jsx(Download, { className: "w-3 h-3" }),
-                "Download All"
-              ] })
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "link",
+                  size: "sm",
+                  onClick: handleDownloadAll,
+                  className: "h-auto p-0",
+                  children: [
+                    /* @__PURE__ */ jsx(Download, { className: "w-3 h-3" }),
+                    "Download All"
+                  ]
+                }
+              )
             ] }),
             /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", children: nodeData.outputImages.map((img, i) => /* @__PURE__ */ jsxs(
               "div",
@@ -1186,8 +1291,17 @@ function LipSyncNodeComponent(props) {
   const isSyncModel = nodeData.model.startsWith("sync/");
   const supportsImage = currentModel?.supportsImage ?? false;
   const headerActions = useMemo(
-    () => nodeData.outputVideo ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" }) }) : null,
-    [nodeData.outputVideo, handleExpand]
+    () => nodeData.outputVideo ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: handleExpand,
+        title: "Expand preview",
+        children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" })
+      }
+    ) : null,
+    [nodeData.outputVideo, handleExpand]
   );
   return /* @__PURE__ */ jsx(BaseNode, { ...props, headerActions, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { children: [
@@ -1199,10 +1313,17 @@ function LipSyncNodeComponent(props) {
     ] }),
     isSyncModel && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)]", children: "Sync Mode" }),
-      /* @__PURE__ */ jsxs(Select, { value: nodeData.syncMode, onValueChange: handleSyncModeChange, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: LIPSYNC_SYNC_MODES.map((mode) => /* @__PURE__ */ jsx(SelectItem, { value: mode.value, children: mode.label }, mode.value)) })
-      ] })
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: nodeData.syncMode,
+          onValueChange: handleSyncModeChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: LIPSYNC_SYNC_MODES.map((mode) => /* @__PURE__ */ jsx(SelectItem, { value: mode.value, children: mode.label }, mode.value)) })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("label", { className: "text-xs text-[var(--muted-foreground)]", children: [
@@ -1297,15 +1418,15 @@ function LLMNodeComponent(props) {
   const canGenerate = hasRequiredConnections && hasSystemPrompt && hasInputPrompt;
   const [isModelBrowserOpen, setIsModelBrowserOpen] = useState(false);
   const { handleModelSelect } = useModelSelection({
-    nodeId: id,
+    fallbackModel: DEFAULT_LLM_MODEL,
     modelMap: LLM_MODEL_MAP,
-    fallbackModel: DEFAULT_LLM_MODEL
+    nodeId: id
   });
   useAutoLoadModelSchema({
     currentModel: nodeData.model,
-    selectedModel: nodeData.selectedModel,
     modelIdMap: LLM_MODEL_ID_MAP,
-    onModelSelect: handleModelSelect
+    onModelSelect: handleModelSelect,
+    selectedModel: nodeData.selectedModel
   });
   const handleSystemPromptChange = useCallback(
     (e) => {
@@ -1321,7 +1442,9 @@ function LLMNodeComponent(props) {
   );
   const handleMaxTokensChange = useCallback(
     (e) => {
-      updateNodeData(id, { maxTokens: parseInt(e.target.value, 10) });
+      updateNodeData(id, {
+        maxTokens: parseInt(e.target.value, 10)
+      });
     },
     [id, updateNodeData]
   );
@@ -1335,14 +1458,14 @@ function LLMNodeComponent(props) {
   const isProcessing = nodeData.status === "processing";
   const handleModelBrowse = useCallback(() => setIsModelBrowserOpen(true), []);
   const { titleElement, headerActions } = useAIGenNodeHeader({
-    modelDisplayName,
-    isProcessing,
     canGenerate,
     hasOutput: !!nodeData.outputText,
-    onModelBrowse: handleModelBrowse,
+    isProcessing,
+    modelDisplayName,
+    onExpand: handleExpand,
     onGenerate: handleGenerate,
-    onStop: handleStop,
-    onExpand: handleExpand
+    onModelBrowse: handleModelBrowse,
+    onStop: handleStop
   });
   return /* @__PURE__ */ jsxs(
     BaseNode,
@@ -1461,31 +1584,35 @@ function LLMNodeComponent(props) {
 }
 var LLMNode = memo(LLMNodeComponent);
 var QUALITY_MODES = [
-  { value: "std", label: "Standard", description: "Faster processing" },
-  { value: "pro", label: "Pro", description: "Higher quality" }
+  { description: "Faster processing", label: "Standard", value: "std" },
+  { description: "Higher quality", label: "Pro", value: "pro" }
 ];
 var CHARACTER_ORIENTATIONS = [
-  { value: "image", label: "From Image" },
-  { value: "video", label: "From Video" }
+  { label: "From Image", value: "image" },
+  { label: "From Video", value: "video" }
 ];
 var MOTION_MODES = [
   {
-    value: "video_transfer",
+    description: "Apply motion from reference video",
     label: "Video Transfer",
-    description: "Apply motion from reference video"
+    value: "video_transfer"
+  },
+  { description: "Apply camera movements", label: "Camera", value: "camera" },
+  {
+    description: "Define motion path",
+    label: "Trajectory",
+    value: "trajectory"
   },
-  { value: "camera", label: "Camera", description: "Apply camera movements" },
-  { value: "trajectory", label: "Trajectory", description: "Define motion path" },
-  { value: "combined", label: "Combined", description: "Camera + Trajectory" }
+  { description: "Camera + Trajectory", label: "Combined", value: "combined" }
 ];
 var ASPECT_RATIOS = [
-  { value: "16:9", label: "16:9 (Landscape)" },
-  { value: "9:16", label: "9:16 (Portrait)" },
-  { value: "1:1", label: "1:1 (Square)" }
+  { label: "16:9 (Landscape)", value: "16:9" },
+  { label: "9:16 (Portrait)", value: "9:16" },
+  { label: "1:1 (Square)", value: "1:1" }
 ];
 var DURATIONS = [
-  { value: 5, label: "5 seconds" },
-  { value: 10, label: "10 seconds" }
+  { label: "5 seconds", value: 5 },
+  { label: "10 seconds", value: 10 }
 ];
 function MotionControlNodeComponent(props) {
   const { id, type, data } = props;
@@ -1499,7 +1626,9 @@ function MotionControlNodeComponent(props) {
   });
   const handleModeChange = useCallback(
     (value) => {
-      updateNodeData(id, { mode: value });
+      updateNodeData(id, {
+        mode: value
+      });
     },
     [id, updateNodeData]
   );
@@ -1538,7 +1667,9 @@ function MotionControlNodeComponent(props) {
   const handleKeepOriginalSoundToggle = useCallback(
     (checked) => {
       if (typeof checked === "boolean") {
-        updateNodeData(id, { keepOriginalSound: checked });
+        updateNodeData(id, {
+          keepOriginalSound: checked
+        });
       }
     },
     [id, updateNodeData]
@@ -1555,7 +1686,16 @@ function MotionControlNodeComponent(props) {
   const isVideoTransferMode = nodeData.mode === "video_transfer";
   const headerActions = useMemo(
     () => /* @__PURE__ */ jsxs(Fragment, { children: [
-      nodeData.outputVideo && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" }) }),
+      nodeData.outputVideo && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: handleExpand,
+          title: "Expand preview",
+          children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" })
+        }
+      ),
       nodeData.status === "processing" ? /* @__PURE__ */ jsxs(Button, { variant: "destructive", size: "sm", onClick: handleStop, children: [
         /* @__PURE__ */ jsx(Square, { className: "h-4 w-4 fill-current" }),
         "Generating"
@@ -1573,7 +1713,14 @@ function MotionControlNodeComponent(props) {
         }
       )
     ] }),
-    [nodeData.outputVideo, nodeData.status, handleGenerate, handleStop, handleExpand, canGenerate]
+    [
+      nodeData.outputVideo,
+      nodeData.status,
+      handleGenerate,
+      handleStop,
+      handleExpand,
+      canGenerate
+    ]
   );
   return /* @__PURE__ */ jsx(BaseNode, { ...props, headerActions, hideStatusIndicator: true, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsxs("div", { children: [
@@ -1586,14 +1733,21 @@ function MotionControlNodeComponent(props) {
     isVideoTransferMode && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)]", children: "Quality" }),
-        /* @__PURE__ */ jsxs(Select, { value: nodeData.qualityMode, onValueChange: handleQualityModeChange, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsx(SelectContent, { children: QUALITY_MODES.map((mode) => /* @__PURE__ */ jsxs(SelectItem, { value: mode.value, children: [
-            mode.label,
-            " - ",
-            mode.description
-          ] }, mode.value)) })
-        ] })
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: nodeData.qualityMode,
+            onValueChange: handleQualityModeChange,
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: QUALITY_MODES.map((mode) => /* @__PURE__ */ jsxs(SelectItem, { value: mode.value, children: [
+                mode.label,
+                " - ",
+                mode.description
+              ] }, mode.value)) })
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)]", children: "Character Orientation" }),
@@ -1604,7 +1758,14 @@ function MotionControlNodeComponent(props) {
             onValueChange: handleCharacterOrientationChange,
             children: [
               /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-              /* @__PURE__ */ jsx(SelectContent, { children: CHARACTER_ORIENTATIONS.map((orientation) => /* @__PURE__ */ jsx(SelectItem, { value: orientation.value, children: orientation.label }, orientation.value)) })
+              /* @__PURE__ */ jsx(SelectContent, { children: CHARACTER_ORIENTATIONS.map((orientation) => /* @__PURE__ */ jsx(
+                SelectItem,
+                {
+                  value: orientation.value,
+                  children: orientation.label
+                },
+                orientation.value
+              )) })
             ]
           }
         )
@@ -1632,17 +1793,31 @@ function MotionControlNodeComponent(props) {
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)]", children: "Duration" }),
-          /* @__PURE__ */ jsxs(Select, { value: String(nodeData.duration), onValueChange: handleDurationChange, children: [
-            /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: DURATIONS.map((d) => /* @__PURE__ */ jsx(SelectItem, { value: String(d.value), children: d.label }, d.value)) })
-          ] })
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: String(nodeData.duration),
+              onValueChange: handleDurationChange,
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: DURATIONS.map((d) => /* @__PURE__ */ jsx(SelectItem, { value: String(d.value), children: d.label }, d.value)) })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)]", children: "Aspect Ratio" }),
-          /* @__PURE__ */ jsxs(Select, { value: nodeData.aspectRatio, onValueChange: handleAspectRatioChange, children: [
-            /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: ASPECT_RATIOS.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio.value, children: ratio.label }, ratio.value)) })
-          ] })
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: nodeData.aspectRatio,
+              onValueChange: handleAspectRatioChange,
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: ASPECT_RATIOS.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio.value, children: ratio.label }, ratio.value)) })
+              ]
+            }
+          )
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
@@ -1702,27 +1877,35 @@ function MotionControlNodeComponent(props) {
 var MotionControlNode = memo(MotionControlNodeComponent);
 var TTS_ENABLED = process.env.NEXT_PUBLIC_TTS_ENABLED === "true";
 var PROVIDERS = [
-  { value: "elevenlabs", label: "ElevenLabs" },
-  { value: "openai", label: "OpenAI" }
+  { label: "ElevenLabs", value: "elevenlabs" },
+  { label: "OpenAI", value: "openai" }
 ];
 var VOICES = [
-  { value: "rachel", label: "Rachel", description: "American female, calm" },
-  { value: "drew", label: "Drew", description: "American male, confident" },
-  { value: "clyde", label: "Clyde", description: "American male, war veteran" },
-  { value: "paul", label: "Paul", description: "American male, narrative" },
-  { value: "domi", label: "Domi", description: "American female, assertive" },
-  { value: "dave", label: "Dave", description: "British male, conversational" },
-  { value: "fin", label: "Fin", description: "Irish male, sailor" },
-  { value: "sarah", label: "Sarah", description: "American female, soft" },
-  { value: "antoni", label: "Antoni", description: "American male, friendly" },
-  { value: "thomas", label: "Thomas", description: "American male, calm" },
-  { value: "charlie", label: "Charlie", description: "Australian male, casual" },
-  { value: "emily", label: "Emily", description: "American female, calm" },
-  { value: "dorothy", label: "Dorothy", description: "British female, pleasant" },
-  { value: "josh", label: "Josh", description: "American male, deep" },
-  { value: "arnold", label: "Arnold", description: "American male, narrator" },
-  { value: "adam", label: "Adam", description: "American male, deep" },
-  { value: "sam", label: "Sam", description: "American male, raspy" }
+  { description: "American female, calm", label: "Rachel", value: "rachel" },
+  { description: "American male, confident", label: "Drew", value: "drew" },
+  { description: "American male, war veteran", label: "Clyde", value: "clyde" },
+  { description: "American male, narrative", label: "Paul", value: "paul" },
+  { description: "American female, assertive", label: "Domi", value: "domi" },
+  { description: "British male, conversational", label: "Dave", value: "dave" },
+  { description: "Irish male, sailor", label: "Fin", value: "fin" },
+  { description: "American female, soft", label: "Sarah", value: "sarah" },
+  { description: "American male, friendly", label: "Antoni", value: "antoni" },
+  { description: "American male, calm", label: "Thomas", value: "thomas" },
+  {
+    description: "Australian male, casual",
+    label: "Charlie",
+    value: "charlie"
+  },
+  { description: "American female, calm", label: "Emily", value: "emily" },
+  {
+    description: "British female, pleasant",
+    label: "Dorothy",
+    value: "dorothy"
+  },
+  { description: "American male, deep", label: "Josh", value: "josh" },
+  { description: "American male, narrator", label: "Arnold", value: "arnold" },
+  { description: "American male, deep", label: "Adam", value: "adam" },
+  { description: "American male, raspy", label: "Sam", value: "sam" }
 ];
 function TextToSpeechNodeComponent(props) {
   const { id, type, data } = props;
@@ -1735,7 +1918,9 @@ function TextToSpeechNodeComponent(props) {
   });
   const handleProviderChange = useCallback(
     (value) => {
-      updateNodeData(id, { provider: value });
+      updateNodeData(id, {
+        provider: value
+      });
     },
     [id, updateNodeData]
   );
@@ -1783,9 +1968,11 @@ function TextToSpeechNodeComponent(props) {
       /* @__PURE__ */ jsxs("div", { className: "text-amber-500", children: [
         /* @__PURE__ */ jsx("p", { className: "font-medium", children: "ElevenLabs not configured" }),
         /* @__PURE__ */ jsxs("p", { className: "text-amber-500/80 mt-0.5", children: [
-          "Set ",
+          "Set",
+          " ",
           /* @__PURE__ */ jsx("code", { className: "bg-amber-500/20 px-1 rounded", children: "ELEVENLABS_API_KEY" }),
-          " in API and",
+          " ",
+          "in API and",
           " ",
           /* @__PURE__ */ jsx("code", { className: "bg-amber-500/20 px-1 rounded", children: "NEXT_PUBLIC_TTS_ENABLED=true" }),
           " ",
@@ -1795,10 +1982,17 @@ function TextToSpeechNodeComponent(props) {
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)]", children: "Provider" }),
-      /* @__PURE__ */ jsxs(Select, { value: nodeData.provider, onValueChange: handleProviderChange, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: PROVIDERS.map((provider) => /* @__PURE__ */ jsx(SelectItem, { value: provider.value, children: provider.label }, provider.value)) })
-      ] })
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: nodeData.provider,
+          onValueChange: handleProviderChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: PROVIDERS.map((provider) => /* @__PURE__ */ jsx(SelectItem, { value: provider.value, children: provider.label }, provider.value)) })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)]", children: "Voice" }),
@@ -1896,15 +2090,15 @@ function TextToSpeechNodeComponent(props) {
 }
 var TextToSpeechNode = memo(TextToSpeechNodeComponent);
 var LANGUAGES = [
-  { value: "auto", label: "Auto-detect" },
-  { value: "en", label: "English" },
-  { value: "es", label: "Spanish" },
-  { value: "fr", label: "French" },
-  { value: "de", label: "German" },
-  { value: "ja", label: "Japanese" },
-  { value: "zh", label: "Chinese" },
-  { value: "ko", label: "Korean" },
-  { value: "pt", label: "Portuguese" }
+  { label: "Auto-detect", value: "auto" },
+  { label: "English", value: "en" },
+  { label: "Spanish", value: "es" },
+  { label: "French", value: "fr" },
+  { label: "German", value: "de" },
+  { label: "Japanese", value: "ja" },
+  { label: "Chinese", value: "zh" },
+  { label: "Korean", value: "ko" },
+  { label: "Portuguese", value: "pt" }
 ];
 function TranscribeNodeComponent(props) {
   const { id, type, data } = props;
@@ -1918,7 +2112,9 @@ function TranscribeNodeComponent(props) {
   });
   const handleLanguageChange = useCallback(
     (value) => {
-      updateNodeData(id, { language: value });
+      updateNodeData(id, {
+        language: value
+      });
     },
     [id, updateNodeData]
   );
@@ -1938,17 +2134,33 @@ function TranscribeNodeComponent(props) {
     openNodeDetailModal(id, "preview");
   }, [id, openNodeDetailModal]);
   const headerActions = useMemo(
-    () => nodeData.outputText ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" }) }) : null,
+    () => nodeData.outputText ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: handleExpand,
+        title: "Expand preview",
+        children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" })
+      }
+    ) : null,
     [nodeData.outputText, handleExpand]
   );
   return /* @__PURE__ */ jsx(BaseNode, { ...props, headerActions, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--muted-foreground)]", children: "Using: Whisper Large V3" }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)]", children: "Language" }),
-      /* @__PURE__ */ jsxs(Select, { value: nodeData.language, onValueChange: handleLanguageChange, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: LANGUAGES.map((lang) => /* @__PURE__ */ jsx(SelectItem, { value: lang.value, children: lang.label }, lang.value)) })
-      ] })
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: nodeData.language,
+          onValueChange: handleLanguageChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: LANGUAGES.map((lang) => /* @__PURE__ */ jsx(SelectItem, { value: lang.value, children: lang.label }, lang.value)) })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 nodrag", children: [
       /* @__PURE__ */ jsx(
@@ -2010,22 +2222,24 @@ function VideoGenNodeComponent(props) {
   const openNodeDetailModal = useUIStore((state) => state.openNodeDetailModal);
   const { handleGenerate, handleStop } = useNodeExecution(id);
   const { canGenerate } = useCanGenerate({
+    inputSchema: nodeData.selectedModel?.inputSchema,
     nodeId: id,
     nodeType: type,
-    inputSchema: nodeData.selectedModel?.inputSchema,
     schemaParams: nodeData.schemaParams
   });
   const [isModelBrowserOpen, setIsModelBrowserOpen] = useState(false);
-  const { handleModelSelect } = useModelSelection({
-    nodeId: id,
-    modelMap: VIDEO_MODEL_MAP,
-    fallbackModel: DEFAULT_VIDEO_MODEL
-  });
+  const { handleModelSelect } = useModelSelection(
+    {
+      fallbackModel: DEFAULT_VIDEO_MODEL,
+      modelMap: VIDEO_MODEL_MAP,
+      nodeId: id
+    }
+  );
   useAutoLoadModelSchema({
     currentModel: nodeData.model,
-    selectedModel: nodeData.selectedModel,
     modelIdMap: VIDEO_MODEL_ID_MAP,
-    onModelSelect: handleModelSelect
+    onModelSelect: handleModelSelect,
+    selectedModel: nodeData.selectedModel
   });
   const {
     schemaProperties,
@@ -2035,8 +2249,8 @@ function VideoGenNodeComponent(props) {
     componentSchemas
   } = useAIGenNode({
     nodeId: id,
-    selectedModel: nodeData.selectedModel,
-    schemaParams: nodeData.schemaParams
+    schemaParams: nodeData.schemaParams,
+    selectedModel: nodeData.selectedModel
   });
   const handleExpand = useCallback(() => {
     openNodeDetailModal(id, "preview");
@@ -2048,14 +2262,14 @@ function VideoGenNodeComponent(props) {
   const isProcessing = nodeData.status === "processing";
   const handleModelBrowse = useCallback(() => setIsModelBrowserOpen(true), []);
   const { titleElement, headerActions } = useAIGenNodeHeader({
-    modelDisplayName,
-    isProcessing,
     canGenerate,
     hasOutput: !!nodeData.outputVideo,
-    onModelBrowse: handleModelBrowse,
+    isProcessing,
+    modelDisplayName,
+    onExpand: handleExpand,
     onGenerate: handleGenerate,
-    onStop: handleStop,
-    onExpand: handleExpand
+    onModelBrowse: handleModelBrowse,
+    onStop: handleStop
   });
   const disabledInputs = useMemo(() => {
     if (modelSupportsImageInput) return void 0;
@@ -2133,7 +2347,9 @@ function VoiceChangeNodeComponent(props) {
   const handlePreserveOriginalChange = useCallback(
     (checked) => {
       if (typeof checked === "boolean") {
-        updateNodeData(id, { preserveOriginalAudio: checked });
+        updateNodeData(id, {
+          preserveOriginalAudio: checked
+        });
       }
     },
     [id, updateNodeData]
@@ -2152,7 +2368,16 @@ function VoiceChangeNodeComponent(props) {
     openNodeDetailModal(id, "preview");
   }, [id, openNodeDetailModal]);
   const headerActions = useMemo(
-    () => nodeData.outputVideo ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" }) }) : null,
+    () => nodeData.outputVideo ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: handleExpand,
+        title: "Expand preview",
+        children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" })
+      }
+    ) : null,
     [nodeData.outputVideo, handleExpand]
   );
   return /* @__PURE__ */ jsx(BaseNode, { ...props, headerActions, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -2238,291 +2463,43 @@ 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(
+var INPUT_TYPES = [
+  { label: "Image", value: "image" },
+  { label: "Video", value: "video" },
+  { label: "Text", value: "text" },
+  { label: "Audio", value: "audio" },
+  { label: "Number", value: "number" }
+];
+function WorkflowInputNodeComponent(props) {
+  const { id, data } = props;
+  const nodeData = data;
+  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
+  const handleNameChange = useCallback(
     (e) => {
-      if (zoomLevel > 1) {
-        setIsPanning(true);
-        setPanStart({ x: e.clientX - panOffset.x, y: e.clientY - panOffset.y });
-      }
+      updateNodeData(id, {
+        inputName: e.target.value,
+        label: `Input: ${e.target.value}`
+      });
     },
-    [zoomLevel, panOffset]
+    [id, updateNodeData]
   );
-  const handleMouseMove = useCallback(
-    (e) => {
-      if (isPanning) {
-        setPanOffset({
-          x: e.clientX - panStart.x,
-          y: e.clientY - panStart.y
+  const handleTypeChange = useCallback(
+    (value) => {
+      updateNodeData(id, {
+        inputType: value
+      });
+    },
+    [id, updateNodeData]
+  );
+  const handleRequiredChange = useCallback(
+    (checked) => {
+      if (typeof checked === "boolean") {
+        updateNodeData(id, {
+          required: checked
         });
       }
     },
-    [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" },
-  { value: "text", label: "Text" },
-  { value: "audio", label: "Audio" },
-  { value: "number", label: "Number" }
-];
-function WorkflowInputNodeComponent(props) {
-  const { id, data } = props;
-  const nodeData = data;
-  const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
-  const handleNameChange = useCallback(
-    (e) => {
-      updateNodeData(id, {
-        inputName: e.target.value,
-        label: `Input: ${e.target.value}`
-      });
-    },
-    [id, updateNodeData]
-  );
-  const handleTypeChange = useCallback(
-    (value) => {
-      updateNodeData(id, {
-        inputType: value
-      });
-    },
-    [id, updateNodeData]
-  );
-  const handleRequiredChange = useCallback(
-    (checked) => {
-      if (typeof checked === "boolean") {
-        updateNodeData(id, {
-          required: checked
-        });
-      }
-    },
-    [id, updateNodeData]
+    [id, updateNodeData]
   );
   const handleDescriptionChange = useCallback(
     (e) => {
@@ -2549,10 +2526,17 @@ function WorkflowInputNodeComponent(props) {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
       /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Data Type" }),
-      /* @__PURE__ */ jsxs(Select, { value: nodeData.inputType || "image", onValueChange: handleTypeChange, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: INPUT_TYPES.map((type) => /* @__PURE__ */ jsx(SelectItem, { value: type.value, children: type.label }, type.value)) })
-      ] })
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: nodeData.inputType || "image",
+          onValueChange: handleTypeChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: INPUT_TYPES.map((type) => /* @__PURE__ */ jsx(SelectItem, { value: type.value, children: type.label }, type.value)) })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 nodrag", children: [
       /* @__PURE__ */ jsx(
@@ -2587,11 +2571,11 @@ function WorkflowInputNodeComponent(props) {
 }
 var WorkflowInputNode = memo(WorkflowInputNodeComponent);
 var OUTPUT_TYPES = [
-  { value: "image", label: "Image" },
-  { value: "video", label: "Video" },
-  { value: "text", label: "Text" },
-  { value: "audio", label: "Audio" },
-  { value: "number", label: "Number" }
+  { label: "Image", value: "image" },
+  { label: "Video", value: "video" },
+  { label: "Text", value: "text" },
+  { label: "Audio", value: "audio" },
+  { label: "Number", value: "number" }
 ];
 function WorkflowOutputNodeComponent(props) {
   const { id, data } = props;
@@ -2602,8 +2586,8 @@ function WorkflowOutputNodeComponent(props) {
   const handleNameChange = useCallback(
     (e) => {
       updateNodeData(id, {
-        outputName: e.target.value,
-        label: `Output: ${e.target.value}`
+        label: `Output: ${e.target.value}`,
+        outputName: e.target.value
       });
     },
     [id, updateNodeData]
@@ -2699,35 +2683,49 @@ function WorkflowOutputNodeComponent(props) {
         String(nodeData.inputValue).substring(0, 200),
         String(nodeData.inputValue).length > 200 && "..."
       ] }),
-      outputType === "audio" && /* @__PURE__ */ jsx("audio", { src: nodeData.inputValue, controls: true, className: "mt-1 w-full h-8" }),
+      outputType === "audio" && /* @__PURE__ */ jsx(
+        "audio",
+        {
+          src: nodeData.inputValue,
+          controls: true,
+          className: "mt-1 w-full h-8"
+        }
+      ),
       outputType === "number" && /* @__PURE__ */ jsx("div", { className: "mt-1 p-2 bg-secondary/50 rounded text-sm font-mono", children: String(nodeData.inputValue) })
     ] }),
     !hasValue && /* @__PURE__ */ jsx("div", { className: "mt-1 text-[10px] text-muted-foreground text-center", children: "Connect an input to define the workflow output" }),
     /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-muted-foreground text-center", children: [
-      "Input type: ",
+      "Input type:",
+      " ",
       /* @__PURE__ */ jsx("span", { className: "font-medium capitalize", children: outputType })
     ] })
   ] }) });
 }
 var WorkflowOutputNode = memo(WorkflowOutputNodeComponent);
 var HANDLE_COLORS2 = {
+  audio: "var(--handle-audio)",
   image: "var(--handle-image)",
-  video: "var(--handle-video)",
-  text: "var(--handle-text)",
   number: "var(--handle-number)",
-  audio: "var(--handle-audio)"
+  text: "var(--handle-text)",
+  video: "var(--handle-video)"
 };
 var noopApi = {
   fetchReferencableWorkflows: async () => {
-    console.warn("[workflow-ui] WorkflowRefApi not configured: fetchReferencableWorkflows");
+    console.warn(
+      "[workflow-ui] WorkflowRefApi not configured: fetchReferencableWorkflows"
+    );
     return [];
   },
-  validateReference: async () => {
-    console.warn("[workflow-ui] WorkflowRefApi not configured: validateReference");
-  },
   fetchWorkflowInterface: async () => {
-    console.warn("[workflow-ui] WorkflowRefApi not configured: fetchWorkflowInterface");
+    console.warn(
+      "[workflow-ui] WorkflowRefApi not configured: fetchWorkflowInterface"
+    );
     return { inputs: [], outputs: [] };
+  },
+  validateReference: async () => {
+    console.warn(
+      "[workflow-ui] WorkflowRefApi not configured: validateReference"
+    );
   }
 };
 var workflowRefApi = noopApi;
@@ -2767,11 +2765,11 @@ function WorkflowRefNodeComponent(props) {
     async (selectedId) => {
       if (!selectedId || selectedId === "none") {
         updateNodeData(id, {
-          referencedWorkflowId: null,
-          referencedWorkflowName: null,
           cachedInterface: null,
           inputMappings: {},
-          outputMappings: {}
+          outputMappings: {},
+          referencedWorkflowId: null,
+          referencedWorkflowName: null
         });
         return;
       }
@@ -2794,12 +2792,12 @@ function WorkflowRefNodeComponent(props) {
         outputMappings[output.name] = null;
       }
       updateNodeData(id, {
-        referencedWorkflowId: selectedId,
-        referencedWorkflowName: selectedWorkflow.name,
         cachedInterface: selectedWorkflow.interface,
         inputMappings,
+        label: `Subworkflow: ${selectedWorkflow.name}`,
         outputMappings,
-        label: `Subworkflow: ${selectedWorkflow.name}`
+        referencedWorkflowId: selectedId,
+        referencedWorkflowName: selectedWorkflow.name
       });
       setError(null);
     },
@@ -2812,13 +2810,17 @@ function WorkflowRefNodeComponent(props) {
       const response = await workflowRefApi.fetchWorkflowInterface(
         nodeData.referencedWorkflowId
       );
-      const inputMappings = { ...nodeData.inputMappings };
+      const inputMappings = {
+        ...nodeData.inputMappings
+      };
       for (const input of response.inputs) {
         if (!(input.name in inputMappings)) {
           inputMappings[input.name] = null;
         }
       }
-      const outputMappings = { ...nodeData.outputMappings };
+      const outputMappings = {
+        ...nodeData.outputMappings
+      };
       for (const output of response.outputs) {
         if (!(output.name in outputMappings)) {
           outputMappings[output.name] = null;
@@ -2841,21 +2843,17 @@ function WorkflowRefNodeComponent(props) {
     nodeData.outputMappings,
     updateNodeData
   ]);
-  const inputHandles = (nodeData.cachedInterface?.inputs ?? []).map(
-    (input) => ({
-      id: input.name,
-      type: input.type,
-      label: input.name,
-      required: input.required
-    })
-  );
-  const outputHandles = (nodeData.cachedInterface?.outputs ?? []).map(
-    (output) => ({
-      id: output.name,
-      type: output.type,
-      label: output.name
-    })
-  );
+  const inputHandles = (nodeData.cachedInterface?.inputs ?? []).map((input) => ({
+    id: input.name,
+    label: input.name,
+    required: input.required,
+    type: input.type
+  }));
+  const outputHandles = (nodeData.cachedInterface?.outputs ?? []).map((output) => ({
+    id: output.name,
+    label: output.name,
+    type: output.type
+  }));
   const isSelected = selected;
   const hasWorkflow = !!nodeData.referencedWorkflowId;
   const isProcessing = nodeData.status === "processing";
@@ -2870,7 +2868,9 @@ function WorkflowRefNodeComponent(props) {
       ),
       style: {
         "--node-color": "var(--category-composition)",
-        ...isSelected && { "--tw-ring-color": "var(--category-composition)" }
+        ...isSelected && {
+          "--tw-ring-color": "var(--category-composition)"
+        }
       },
       children: [
         inputHandles.map((input, index) => /* @__PURE__ */ jsx(
@@ -2881,8 +2881,8 @@ function WorkflowRefNodeComponent(props) {
             id: input.id,
             className: "!w-3 !h-3",
             style: {
-              top: `${(index + 1) / (inputHandles.length + 1) * 100}%`,
-              background: HANDLE_COLORS2[input.type]
+              background: HANDLE_COLORS2[input.type],
+              top: `${(index + 1) / (inputHandles.length + 1) * 100}%`
             },
             title: `${input.label} (${input.type})${input.required ? " - required" : ""}`
           },
@@ -2930,7 +2930,12 @@ function WorkflowRefNodeComponent(props) {
                   onClick: handleRefreshInterface,
                   disabled: isLoading,
                   title: "Refresh interface",
-                  children: /* @__PURE__ */ jsx(RefreshCw, { className: clsx("h-3 w-3", isLoading && "animate-spin") })
+                  children: /* @__PURE__ */ jsx(
+                    RefreshCw,
+                    {
+                      className: clsx("h-3 w-3", isLoading && "animate-spin")
+                    }
+                  )
                 }
               )
             ] }),
@@ -2978,8 +2983,8 @@ function WorkflowRefNodeComponent(props) {
             id: output.id,
             className: "!w-3 !h-3",
             style: {
-              top: `${(index + 1) / (outputHandles.length + 1) * 100}%`,
-              background: HANDLE_COLORS2[output.type]
+              background: HANDLE_COLORS2[output.type],
+              top: `${(index + 1) / (outputHandles.length + 1) * 100}%`
             },
             title: `${output.label} (${output.type})`
           },
@@ -3008,8 +3013,8 @@ function AudioInputNodeComponent(props) {
         audio.onloadedmetadata = () => {
           updateNodeData(id, {
             audio: event.target?.result,
-            filename: file.name,
             duration: audio.duration,
+            filename: file.name,
             source: "upload"
           });
         };
@@ -3022,8 +3027,8 @@ function AudioInputNodeComponent(props) {
   const handleRemoveAudio = useCallback(() => {
     updateNodeData(id, {
       audio: null,
-      filename: null,
       duration: null,
+      filename: null,
       url: void 0
     });
     setUrlValue("");
@@ -3035,8 +3040,8 @@ function AudioInputNodeComponent(props) {
     audio.onloadedmetadata = () => {
       updateNodeData(id, {
         audio: urlValue,
-        filename: urlValue.split("/").pop() || "url-audio",
         duration: audio.duration,
+        filename: urlValue.split("/").pop() || "url-audio",
         source: "url",
         url: urlValue
       });
@@ -3045,8 +3050,8 @@ function AudioInputNodeComponent(props) {
     audio.onerror = () => {
       updateNodeData(id, {
         audio: urlValue,
-        filename: urlValue.split("/").pop() || "url-audio",
         duration: null,
+        filename: urlValue.split("/").pop() || "url-audio",
         source: "url",
         url: urlValue
       });
@@ -3096,7 +3101,16 @@ function AudioInputNodeComponent(props) {
           children: /* @__PURE__ */ jsx(Link, { className: "h-3.5 w-3.5" })
         }
       ),
-      nodeData.audio && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" }) })
+      nodeData.audio && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: handleExpand,
+          title: "Expand preview",
+          children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" })
+        }
+      )
     ] }),
     [showUrlInput, nodeData.audio, handleExpand]
   );
@@ -3183,39 +3197,48 @@ function ImageInputNodeComponent(props) {
     handleUrlSubmit,
     handleUrlKeyDown
   } = useMediaUpload({
-    nodeId: id,
-    mediaType: "image",
-    initialUrl: nodeData.url || "",
-    getMetadata: async (src) => {
-      const dims = await getImageDimensions(src);
-      return dims;
-    },
+    buildRemoveUpdate: () => ({
+      dimensions: null,
+      filename: null,
+      image: null,
+      url: void 0
+    }),
     buildUploadUpdate: (url, filename, metadata) => ({
-      image: url,
-      filename,
       dimensions: metadata,
+      filename,
+      image: url,
       source: "upload"
     }),
     buildUrlUpdate: (url, metadata) => ({
-      image: url,
-      filename: url.split("/").pop() || "url-image",
       dimensions: metadata,
+      filename: url.split("/").pop() || "url-image",
+      image: url,
       source: "url",
       url
     }),
-    buildRemoveUpdate: () => ({
-      image: null,
-      filename: null,
-      dimensions: null,
-      url: void 0
-    })
+    getMetadata: async (src) => {
+      const dims = await getImageDimensions(src);
+      return dims;
+    },
+    initialUrl: nodeData.url || "",
+    mediaType: "image",
+    nodeId: id
   });
   const handleExpand = useCallback(() => {
     openNodeDetailModal(id, "preview");
   }, [id, openNodeDetailModal]);
   const headerActions = useMemo(
     () => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      nodeData.image && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" }) }),
+      nodeData.image && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: handleExpand,
+          title: "Expand preview",
+          children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" })
+        }
+      ),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -3334,7 +3357,9 @@ function PromptConstructorNodeComponent(props) {
     }
   }, [nodeData.template, isEditing]);
   const availableVariables = useMemo(() => {
-    const connectedPromptNodes = edges.filter((e) => e.target === id && e.targetHandle === "text").map((e) => nodes.find((n) => n.id === e.source)).filter((n) => n !== void 0 && n.type === "prompt");
+    const connectedPromptNodes = edges.filter((e) => e.target === id && e.targetHandle === "text").map((e) => nodes.find((n) => n.id === e.source)).filter(
+      (n) => n !== void 0 && n.type === "prompt"
+    );
     const vars = [];
     connectedPromptNodes.forEach((promptNode) => {
       const promptData = promptNode.data;
@@ -3342,8 +3367,8 @@ function PromptConstructorNodeComponent(props) {
       if (variableName) {
         vars.push({
           name: variableName,
-          value: promptData.prompt || "",
-          nodeId: promptNode.id
+          nodeId: promptNode.id,
+          value: promptData.prompt || ""
         });
       }
     });
@@ -3360,10 +3385,10 @@ function PromptConstructorNodeComponent(props) {
     closeAutocomplete
   } = usePromptAutocomplete({
     availableVariables,
-    textareaRef,
     localTemplate,
+    onTemplateCommit: (newTemplate) => updateNodeData(id, { template: newTemplate }),
     setLocalTemplate,
-    onTemplateCommit: (newTemplate) => updateNodeData(id, { template: newTemplate })
+    textareaRef
   });
   const unresolvedVars = useMemo(() => {
     const varPattern = /@(\w+)/g;
@@ -3392,16 +3417,26 @@ function PromptConstructorNodeComponent(props) {
     });
     const outputValue = resolved || null;
     if (outputValue !== nodeData.outputText) {
-      updateNodeData(id, { outputText: outputValue });
+      updateNodeData(id, {
+        outputText: outputValue
+      });
     }
-  }, [nodeData.template, availableVariables, id, updateNodeData, nodeData.outputText]);
+  }, [
+    nodeData.template,
+    availableVariables,
+    id,
+    updateNodeData,
+    nodeData.outputText
+  ]);
   const handleFocus = useCallback(() => {
     setIsEditing(true);
   }, []);
   const handleBlur = useCallback(() => {
     setIsEditing(false);
     if (localTemplate !== nodeData.template) {
-      updateNodeData(id, { template: localTemplate });
+      updateNodeData(id, {
+        template: localTemplate
+      });
     }
     setTimeout(() => closeAutocomplete(), 200);
   }, [id, localTemplate, nodeData.template, updateNodeData, closeAutocomplete]);
@@ -3432,8 +3467,8 @@ function PromptConstructorNodeComponent(props) {
         {
           className: "absolute z-10 bg-popover border border-border rounded shadow-xl max-h-40 overflow-y-auto",
           style: {
-            top: autocompletePosition.top,
-            left: autocompletePosition.left
+            left: autocompletePosition.left,
+            top: autocompletePosition.top
           },
           children: filteredAutocompleteVars.map((variable, index) => /* @__PURE__ */ jsxs(
             "button",
@@ -3486,18 +3521,18 @@ function PromptNodeComponent(props) {
     if (!nodeData.prompt) return;
     openCreateModal({
       _id: "",
-      name: "",
-      description: "",
-      promptText: nodeData.prompt,
-      styleSettings: {},
       category: "custom",
-      tags: [],
-      useCount: 0,
-      isFeatured: false,
-      isSystem: false,
-      isDeleted: false,
       createdAt: "",
-      updatedAt: ""
+      description: "",
+      isDeleted: false,
+      isFeatured: false,
+      isSystem: false,
+      name: "",
+      promptText: nodeData.prompt,
+      styleSettings: {},
+      tags: [],
+      updatedAt: "",
+      useCount: 0
     });
   }, [nodeData.prompt, openCreateModal]);
   const handleExpand = useCallback(() => {
@@ -3505,7 +3540,16 @@ function PromptNodeComponent(props) {
   }, [id, nodeData.prompt, openEditor]);
   const titleElement = PromptPicker ? /* @__PURE__ */ jsx(PromptPicker, { onSelect: handleSelectFromLibrary, label: "Prompt" }) : /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: "Prompt" });
   const headerActions = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand editor", children: /* @__PURE__ */ jsx(Expand, { className: "w-3.5 h-3.5" }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: handleExpand,
+        title: "Expand editor",
+        children: /* @__PURE__ */ jsx(Expand, { className: "w-3.5 h-3.5" })
+      }
+    ),
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -3518,15 +3562,23 @@ function PromptNodeComponent(props) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsx(BaseNode, { ...props, titleElement, headerActions, children: /* @__PURE__ */ jsx(
-    "textarea",
+  return /* @__PURE__ */ jsx(
+    BaseNode,
     {
-      value: nodeData.prompt || "",
-      onChange: handlePromptChange,
-      placeholder: "Enter your prompt...",
-      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"
+      ...props,
+      titleElement,
+      headerActions,
+      children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: nodeData.prompt || "",
+          onChange: handlePromptChange,
+          placeholder: "Enter your prompt...",
+          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"
+        }
+      )
     }
-  ) });
+  );
 }
 var PromptNode = memo(PromptNodeComponent);
 function VideoInputNodeComponent(props) {
@@ -3545,51 +3597,51 @@ function VideoInputNodeComponent(props) {
     handleUrlSubmit,
     handleUrlKeyDown
   } = useMediaUpload({
-    nodeId: id,
-    mediaType: "video",
-    initialUrl: nodeData.url || "",
-    getMetadata: async (src) => {
-      const meta = await getVideoMetadata(src);
-      return meta;
-    },
+    buildRemoveUpdate: () => ({
+      dimensions: null,
+      duration: null,
+      filename: null,
+      url: void 0,
+      video: null
+    }),
     buildUploadUpdate: (url, filename, metadata) => {
       const meta = metadata;
       return {
-        video: url,
-        filename,
-        duration: meta.duration,
         dimensions: meta.dimensions,
-        source: "upload"
+        duration: meta.duration,
+        filename,
+        source: "upload",
+        video: url
       };
     },
     buildUrlUpdate: (url, metadata) => {
       if (metadata) {
         const meta = metadata;
         return {
-          video: url,
-          filename: url.split("/").pop() || "url-video",
+          dimensions: { height: meta.height, width: meta.width },
           duration: meta.duration,
-          dimensions: { width: meta.width, height: meta.height },
+          filename: url.split("/").pop() || "url-video",
           source: "url",
-          url
+          url,
+          video: url
         };
       }
       return {
-        video: url,
-        filename: url.split("/").pop() || "url-video",
-        duration: null,
         dimensions: null,
+        duration: null,
+        filename: url.split("/").pop() || "url-video",
         source: "url",
-        url
+        url,
+        video: url
       };
     },
-    buildRemoveUpdate: () => ({
-      video: null,
-      filename: null,
-      duration: null,
-      dimensions: null,
-      url: void 0
-    })
+    getMetadata: async (src) => {
+      const meta = await getVideoMetadata(src);
+      return meta;
+    },
+    initialUrl: nodeData.url || "",
+    mediaType: "video",
+    nodeId: id
   });
   const formatDuration = (seconds) => {
     if (!seconds) return "";
@@ -3602,7 +3654,16 @@ function VideoInputNodeComponent(props) {
   }, [id, openNodeDetailModal]);
   const headerActions = useMemo(
     () => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      nodeData.video && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" }) }),
+      nodeData.video && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          onClick: handleExpand,
+          title: "Expand preview",
+          children: /* @__PURE__ */ jsx(Expand, { className: "h-3.5 w-3.5" })
+        }
+      ),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -3702,6 +3763,278 @@ function VideoInputNodeComponent(props) {
   ] });
 }
 var VideoInputNode = memo(VideoInputNodeComponent);
+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 { type: null, url: 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"
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
 function getExtensionFromUrl(url, inputType) {
   try {
     const urlPath = new URL(url).pathname;
@@ -3805,10 +4138,18 @@ function DownloadNodeComponent(props) {
         fileExtension
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(Button, { className: "w-full", onClick: handleDownload, disabled: isDownloading, children: [
-      isDownloading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
-      isDownloading ? "Downloading..." : "Download"
-    ] })
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: "w-full",
+        onClick: handleDownload,
+        disabled: isDownloading,
+        children: [
+          isDownloading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
+          isDownloading ? "Downloading..." : "Download"
+        ]
+      }
+    )
   ] }) : isConnected && isRunning ? /* @__PURE__ */ jsx("div", { className: "relative flex h-20 flex-col items-center justify-center rounded-md bg-black/20", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
     /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }),
     /* @__PURE__ */ jsx("span", { className: "text-xs text-white/80", children: "Generating..." })
@@ -3824,19 +4165,19 @@ function DownloadNodeComponent(props) {
 var DownloadNode = memo(DownloadNodeComponent);
 var OutputNode = DownloadNode;
 var PRESET_OPTIONS = [
-  { value: "linear", label: "Linear" },
-  { value: "easeIn", label: "Ease In" },
-  { value: "easeOut", label: "Ease Out" },
-  { value: "easeInOut", label: "Ease In Out" },
-  { value: "easeInQuad", label: "Ease In Quad" },
-  { value: "easeOutQuad", label: "Ease Out Quad" },
-  { value: "easeInOutQuad", label: "Ease In Out Quad" },
-  { value: "easeInCubic", label: "Ease In Cubic" },
-  { value: "easeOutCubic", label: "Ease Out Cubic" },
-  { value: "easeInOutCubic", label: "Ease In Out Cubic" },
-  { value: "easeInExpo", label: "Ease In Expo" },
-  { value: "easeOutExpo", label: "Ease Out Expo" },
-  { value: "easeInOutExpo", label: "Ease In Out Expo" }
+  { label: "Linear", value: "linear" },
+  { label: "Ease In", value: "easeIn" },
+  { label: "Ease Out", value: "easeOut" },
+  { label: "Ease In Out", value: "easeInOut" },
+  { label: "Ease In Quad", value: "easeInQuad" },
+  { label: "Ease Out Quad", value: "easeOutQuad" },
+  { label: "Ease In Out Quad", value: "easeInOutQuad" },
+  { label: "Ease In Cubic", value: "easeInCubic" },
+  { label: "Ease Out Cubic", value: "easeOutCubic" },
+  { label: "Ease In Out Cubic", value: "easeInOutCubic" },
+  { label: "Ease In Expo", value: "easeInExpo" },
+  { label: "Ease Out Expo", value: "easeOutExpo" },
+  { label: "Ease In Out Expo", value: "easeInOutExpo" }
 ];
 function AnimationNodeComponent(props) {
   const { id, type, data } = props;
@@ -3855,8 +4196,8 @@ function AnimationNodeComponent(props) {
     (value) => {
       const preset = value;
       updateNodeData(id, {
-        preset,
-        customCurve: EASING_PRESETS[preset]
+        customCurve: EASING_PRESETS[preset],
+        preset
       });
     },
     [id, updateNodeData]
@@ -3877,7 +4218,16 @@ function AnimationNodeComponent(props) {
     openNodeDetailModal(id, "preview");
   }, [id, openNodeDetailModal]);
   const headerActions = useMemo(
-    () => nodeData.outputVideo ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" }) }) : null,
+    () => nodeData.outputVideo ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: handleExpand,
+        title: "Expand preview",
+        children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" })
+      }
+    ) : null,
     [nodeData.outputVideo, handleExpand]
   );
   const curve = nodeData.customCurve ?? [0.645, 0.045, 0.355, 1];
@@ -3917,11 +4267,35 @@ function AnimationNodeComponent(props) {
       }
     ),
     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(
+        "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)" }),
-      /* @__PURE__ */ jsx("circle", { cx: curve[0] * 100, cy: 100 - curve[1] * 100, r: "2", fill: "var(--accent)" }),
-      /* @__PURE__ */ jsx("circle", { cx: curve[2] * 100, cy: 100 - curve[3] * 100, r: "2", fill: "var(--accent)" })
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: curve[0] * 100,
+          cy: 100 - curve[1] * 100,
+          r: "2",
+          fill: "var(--accent)"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: curve[2] * 100,
+          cy: 100 - curve[3] * 100,
+          r: "2",
+          fill: "var(--accent)"
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("label", { className: "text-xs text-[var(--muted-foreground)]", children: [
@@ -3992,26 +4366,41 @@ function AnnotationNodeComponent(props) {
   const nodeData = data;
   const openAnnotation = useAnnotationStore((state) => state.openAnnotation);
   const openNodeDetailModal = useUIStore((state) => state.openNodeDetailModal);
-  const getConnectedInputs = useWorkflowStore((state) => state.getConnectedInputs);
+  const getConnectedInputs = useWorkflowStore(
+    (state) => state.getConnectedInputs
+  );
   const connectedInputs = getConnectedInputs(id);
   const inputImage = connectedInputs.get("image") ?? nodeData.inputImage;
   const handleEditAnnotations = useCallback(() => {
     if (!inputImage) return;
     const shapes = nodeData.annotations?.map((ann) => ({
+      fillColor: ann.fillColor,
       id: ann.id,
-      type: ann.type,
       strokeColor: ann.strokeColor,
       strokeWidth: ann.strokeWidth,
-      fillColor: ann.fillColor,
+      type: ann.type,
       ...ann.props
     })) ?? [];
-    openAnnotation(id, inputImage, shapes);
+    openAnnotation(
+      id,
+      inputImage,
+      shapes
+    );
   }, [id, inputImage, nodeData.annotations, openAnnotation]);
   const handleExpand = useCallback(() => {
     openNodeDetailModal(id, "preview");
   }, [id, openNodeDetailModal]);
   const headerActions = useMemo(
-    () => inputImage ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" }) }) : null,
+    () => inputImage ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: handleExpand,
+        title: "Expand preview",
+        children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" })
+      }
+    ) : null,
     [inputImage, handleExpand]
   );
   return /* @__PURE__ */ jsx(BaseNode, { ...props, headerActions, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
@@ -4208,7 +4597,7 @@ function ImageCompareNodeComponent(props) {
           }
         ),
         portrait: false,
-        style: { width: "100%", height: "100%" }
+        style: { height: "100%", width: "100%" }
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 bg-black/50 text-white text-[10px] font-medium px-2 py-1 rounded pointer-events-none", children: "A" }),
@@ -4221,9 +4610,9 @@ function ImageCompareNodeComponent(props) {
 }
 var ImageCompareNode = memo(ImageCompareNodeComponent);
 var OUTPUT_FORMATS = [
-  { value: "jpg", label: "JPEG" },
-  { value: "png", label: "PNG" },
-  { value: "webp", label: "WebP" }
+  { label: "JPEG", value: "jpg" },
+  { label: "PNG", value: "png" },
+  { label: "WebP", value: "webp" }
 ];
 function ImageGridSplitNodeComponent(props) {
   const { id, data } = props;
@@ -4233,14 +4622,20 @@ function ImageGridSplitNodeComponent(props) {
   const [selectedPreview, setSelectedPreview] = useState(null);
   const handleRowsChange = useCallback(
     (e) => {
-      const value = Math.min(10, Math.max(1, Number.parseInt(e.target.value, 10) || 1));
+      const value = Math.min(
+        10,
+        Math.max(1, Number.parseInt(e.target.value, 10) || 1)
+      );
       updateNodeData(id, { gridRows: value });
     },
     [id, updateNodeData]
   );
   const handleColsChange = useCallback(
     (e) => {
-      const value = Math.min(10, Math.max(1, Number.parseInt(e.target.value, 10) || 1));
+      const value = Math.min(
+        10,
+        Math.max(1, Number.parseInt(e.target.value, 10) || 1)
+      );
       updateNodeData(id, { gridCols: value });
     },
     [id, updateNodeData]
@@ -4331,15 +4726,16 @@ function ImageGridSplitNodeComponent(props) {
         nodeData.gridRows,
         "\xD7",
         nodeData.gridCols,
-        " grid)"
+        " ",
+        "grid)"
       ] }),
       /* @__PURE__ */ jsx(
         "div",
         {
           className: "mt-2 grid gap-0.5 mx-auto w-20 aspect-square bg-[var(--border)] rounded overflow-hidden",
           style: {
-            gridTemplateRows: `repeat(${nodeData.gridRows}, 1fr)`,
-            gridTemplateColumns: `repeat(${nodeData.gridCols}, 1fr)`
+            gridTemplateColumns: `repeat(${nodeData.gridCols}, 1fr)`,
+            gridTemplateRows: `repeat(${nodeData.gridRows}, 1fr)`
           },
           children: Array.from({ length: totalCells }).map((_, i) => /* @__PURE__ */ jsx(
             "div",
@@ -4372,10 +4768,17 @@ function ImageGridSplitNodeComponent(props) {
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)]", children: "Format" }),
-        /* @__PURE__ */ jsxs(Select, { value: nodeData.outputFormat, onValueChange: handleFormatChange, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsx(SelectContent, { children: OUTPUT_FORMATS.map((f) => /* @__PURE__ */ jsx(SelectItem, { value: f.value, children: f.label }, f.value)) })
-        ] })
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: nodeData.outputFormat,
+            onValueChange: handleFormatChange,
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: OUTPUT_FORMATS.map((f) => /* @__PURE__ */ jsx(SelectItem, { value: f.value, children: f.label }, f.value)) })
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsxs("label", { className: "text-xs text-[var(--muted-foreground)]", children: [
@@ -4402,10 +4805,19 @@ function ImageGridSplitNodeComponent(props) {
           nodeData.outputImages.length,
           " images)"
         ] }),
-        /* @__PURE__ */ jsxs(Button, { variant: "link", size: "sm", onClick: handleDownloadAll, className: "h-auto p-0", children: [
-          /* @__PURE__ */ jsx(Download, { className: "w-3 h-3" }),
-          "Download All"
-        ] })
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "link",
+            size: "sm",
+            onClick: handleDownloadAll,
+            className: "h-auto p-0",
+            children: [
+              /* @__PURE__ */ jsx(Download, { className: "w-3 h-3" }),
+              "Download All"
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsx(
         "div",
@@ -4420,7 +4832,14 @@ function ImageGridSplitNodeComponent(props) {
               className: "relative group aspect-square rounded overflow-hidden border border-[var(--border)] cursor-pointer",
               onClick: () => setSelectedPreview(selectedPreview === index ? null : index),
               children: [
-                /* @__PURE__ */ jsx("img", { src: img, alt: `Cell ${index + 1}`, className: "w-full h-full object-cover" }),
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: img,
+                    alt: `Cell ${index + 1}`,
+                    className: "w-full h-full object-cover"
+                  }
+                ),
                 /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition flex items-center justify-center gap-1", children: /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -4538,7 +4957,8 @@ function OutputGalleryNodeComponent(props) {
     setLightboxIndex((prev) => {
       if (prev === null) return null;
       if (direction === "prev" && prev > 0) return prev - 1;
-      if (direction === "next" && prev < imageCountRef.current - 1) return prev + 1;
+      if (direction === "next" && prev < imageCountRef.current - 1)
+        return prev + 1;
       return prev;
     });
   }, []);
@@ -4576,7 +4996,9 @@ function OutputGalleryNodeComponent(props) {
         img.onerror = () => resolve(blob);
         img.src = image;
       });
-      await navigator.clipboard.write([new ClipboardItem({ "image/png": pngBlob })]);
+      await navigator.clipboard.write([
+        new ClipboardItem({ "image/png": pngBlob })
+      ]);
     } catch {
     }
   }, [lightboxIndex]);
@@ -4604,7 +5026,14 @@ function OutputGalleryNodeComponent(props) {
       {
         onClick: () => openLightbox(idx),
         className: "aspect-square rounded border border-border hover:border-primary overflow-hidden transition-colors",
-        children: /* @__PURE__ */ jsx("img", { src: img, alt: `Image ${idx + 1}`, className: "w-full h-full object-cover" })
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: img,
+            alt: `Image ${idx + 1}`,
+            className: "w-full h-full object-cover"
+          }
+        )
       },
       img
     )) }) }) }),
@@ -4615,69 +5044,76 @@ function OutputGalleryNodeComponent(props) {
           className: "fixed inset-0 bg-black/90 z-[100] flex items-center justify-center p-8",
           onClick: closeLightbox,
           onContextMenu: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-full max-h-full", onClick: (e) => e.stopPropagation(), children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: displayImages[lightboxIndex],
-                alt: `Gallery image ${lightboxIndex + 1}`,
-                className: "max-w-full max-h-[90vh] object-contain rounded"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: closeLightbox,
-                className: "absolute top-4 right-4 w-8 h-8 bg-white/10 hover:bg-white/20 rounded text-white text-sm transition-colors flex items-center justify-center",
-                children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "absolute top-4 left-4 flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: downloadImage,
-                  className: "px-3 py-1.5 bg-white/10 hover:bg-white/20 rounded text-white text-xs font-medium transition-colors flex items-center gap-1.5",
-                  children: [
-                    /* @__PURE__ */ jsx(Download, { className: "w-3.5 h-3.5" }),
-                    "Download"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: copyImage,
-                  className: "px-3 py-1.5 bg-white/10 hover:bg-white/20 rounded text-white text-xs font-medium transition-colors flex items-center gap-1.5",
-                  children: [
-                    /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5" }),
-                    "Copy"
-                  ]
-                }
-              )
-            ] }),
-            lightboxIndex > 0 && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => navigateLightbox("prev"),
-                className: "absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/10 hover:bg-white/20 rounded-full text-white transition-colors flex items-center justify-center",
-                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5" })
-              }
-            ),
-            lightboxIndex < displayImages.length - 1 && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => navigateLightbox("next"),
-                className: "absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/10 hover:bg-white/20 rounded-full text-white transition-colors flex items-center justify-center",
-                children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5" })
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 px-3 py-1.5 bg-black/50 rounded text-white text-xs font-medium", children: [
-              lightboxIndex + 1,
-              " / ",
-              displayImages.length
-            ] })
-          ] })
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "relative max-w-full max-h-full",
+              onClick: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: displayImages[lightboxIndex],
+                    alt: `Gallery image ${lightboxIndex + 1}`,
+                    className: "max-w-full max-h-[90vh] object-contain rounded"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: closeLightbox,
+                    className: "absolute top-4 right-4 w-8 h-8 bg-white/10 hover:bg-white/20 rounded text-white text-sm transition-colors flex items-center justify-center",
+                    children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "absolute top-4 left-4 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: downloadImage,
+                      className: "px-3 py-1.5 bg-white/10 hover:bg-white/20 rounded text-white text-xs font-medium transition-colors flex items-center gap-1.5",
+                      children: [
+                        /* @__PURE__ */ jsx(Download, { className: "w-3.5 h-3.5" }),
+                        "Download"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      onClick: copyImage,
+                      className: "px-3 py-1.5 bg-white/10 hover:bg-white/20 rounded text-white text-xs font-medium transition-colors flex items-center gap-1.5",
+                      children: [
+                        /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5" }),
+                        "Copy"
+                      ]
+                    }
+                  )
+                ] }),
+                lightboxIndex > 0 && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => navigateLightbox("prev"),
+                    className: "absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/10 hover:bg-white/20 rounded-full text-white transition-colors flex items-center justify-center",
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5" })
+                  }
+                ),
+                lightboxIndex < displayImages.length - 1 && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => navigateLightbox("next"),
+                    className: "absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/10 hover:bg-white/20 rounded-full text-white transition-colors flex items-center justify-center",
+                    children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 px-3 py-1.5 bg-black/50 rounded text-white text-xs font-medium", children: [
+                  lightboxIndex + 1,
+                  " / ",
+                  displayImages.length
+                ] })
+              ]
+            }
+          )
         }
       ),
       document.body
@@ -4686,17 +5122,17 @@ function OutputGalleryNodeComponent(props) {
 }
 var OutputGalleryNode = memo(OutputGalleryNodeComponent);
 var MODELS = [
-  { value: "photon-flash-1", label: "Photon Flash", price: "$0.01" },
-  { value: "photon-1", label: "Photon", price: "$0.03" }
+  { label: "Photon Flash", price: "$0.01", value: "photon-flash-1" },
+  { label: "Photon", price: "$0.03", value: "photon-1" }
 ];
 var ASPECT_RATIOS2 = [
-  { value: "9:16", label: "9:16 (TikTok/Reels)" },
-  { value: "16:9", label: "16:9 (YouTube)" },
-  { value: "1:1", label: "1:1 (Square)" },
-  { value: "4:3", label: "4:3" },
-  { value: "3:4", label: "3:4" },
-  { value: "9:21", label: "9:21" },
-  { value: "21:9", label: "21:9 (Ultrawide)" }
+  { label: "9:16 (TikTok/Reels)", value: "9:16" },
+  { label: "16:9 (YouTube)", value: "16:9" },
+  { label: "1:1 (Square)", value: "1:1" },
+  { label: "4:3", value: "4:3" },
+  { label: "3:4", value: "3:4" },
+  { label: "9:21", value: "9:21" },
+  { label: "21:9 (Ultrawide)", value: "21:9" }
 ];
 function ReframeNodeComponent(props) {
   const { id, data } = props;
@@ -4768,10 +5204,17 @@ function ReframeNodeComponent(props) {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
       /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Target Aspect Ratio" }),
-      /* @__PURE__ */ jsxs(Select, { value: nodeData.aspectRatio, onValueChange: handleAspectRatioChange, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: ASPECT_RATIOS2.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio.value, children: ratio.label }, ratio.value)) })
-      ] })
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: nodeData.aspectRatio,
+          onValueChange: handleAspectRatioChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: ASPECT_RATIOS2.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio.value, children: ratio.label }, ratio.value)) })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx(
       GridPositionSelector,
@@ -4921,10 +5364,17 @@ function ResizeNodeComponent(props) {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
       /* @__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: LUMA_ASPECT_RATIOS.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio, children: ratio }, 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: LUMA_ASPECT_RATIOS.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio, children: ratio }, ratio)) })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx(
       GridPositionSelector,
@@ -4995,15 +5445,15 @@ function ResizeNodeComponent(props) {
 }
 var ResizeNode = memo(ResizeNodeComponent);
 var STYLE_OPTIONS = [
-  { value: "modern", label: "Modern" },
-  { value: "default", label: "Default" },
-  { value: "minimal", label: "Minimal" },
-  { value: "bold", label: "Bold" }
+  { label: "Modern", value: "modern" },
+  { label: "Default", value: "default" },
+  { label: "Minimal", value: "minimal" },
+  { label: "Bold", value: "bold" }
 ];
 var POSITION_OPTIONS = [
-  { value: "bottom", label: "Bottom" },
-  { value: "center", label: "Center" },
-  { value: "top", label: "Top" }
+  { label: "Bottom", value: "bottom" },
+  { label: "Center", value: "center" },
+  { label: "Top", value: "top" }
 ];
 function SubtitleNodeComponent(props) {
   const { id, data } = props;
@@ -5018,7 +5468,9 @@ function SubtitleNodeComponent(props) {
   );
   const handlePositionChange = useCallback(
     (value) => {
-      updateNodeData(id, { position: value });
+      updateNodeData(id, {
+        position: value
+      });
     },
     [id, updateNodeData]
   );
@@ -5050,10 +5502,17 @@ function SubtitleNodeComponent(props) {
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)] block mb-1", children: "Position" }),
-      /* @__PURE__ */ jsxs(Select, { value: nodeData.position, onValueChange: handlePositionChange, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: POSITION_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
-      ] })
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: nodeData.position,
+          onValueChange: handlePositionChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: POSITION_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("label", { className: "text-xs text-[var(--muted-foreground)] block mb-1", children: [
@@ -5086,7 +5545,14 @@ function SubtitleNodeComponent(props) {
       /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--muted-foreground)]", children: nodeData.fontColor })
     ] }),
     nodeData.outputVideo && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("video", { src: nodeData.outputVideo, className: "w-full h-20 object-cover rounded", muted: true }),
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          src: nodeData.outputVideo,
+          className: "w-full h-20 object-cover rounded",
+          muted: true
+        }
+      ),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -5117,31 +5583,31 @@ function SubtitleNodeComponent(props) {
 }
 var SubtitleNode = memo(SubtitleNodeComponent);
 var IMAGE_MODELS2 = [
-  { value: "topaz-standard-v2", label: "Standard V2" },
-  { value: "topaz-low-res-v2", label: "Low Resolution V2" },
-  { value: "topaz-cgi", label: "CGI" },
-  { value: "topaz-high-fidelity-v2", label: "High Fidelity V2" },
-  { value: "topaz-text-refine", label: "Text Refine" }
+  { label: "Standard V2", value: "topaz-standard-v2" },
+  { label: "Low Resolution V2", value: "topaz-low-res-v2" },
+  { label: "CGI", value: "topaz-cgi" },
+  { label: "High Fidelity V2", value: "topaz-high-fidelity-v2" },
+  { label: "Text Refine", value: "topaz-text-refine" }
 ];
 var VIDEO_MODELS2 = [
-  { value: "topaz-video", label: "Topaz Video Upscale" }
+  { label: "Topaz Video Upscale", value: "topaz-video" }
 ];
 var UPSCALE_FACTORS = [
-  { value: "None", label: "None (enhance only)" },
-  { value: "2x", label: "2x" },
-  { value: "4x", label: "4x" },
-  { value: "6x", label: "6x" }
+  { label: "None (enhance only)", value: "None" },
+  { label: "2x", value: "2x" },
+  { label: "4x", value: "4x" },
+  { label: "6x", value: "6x" }
 ];
 var RESOLUTIONS = [
-  { value: "720p", label: "720p (HD)" },
-  { value: "1080p", label: "1080p (Full HD)" },
-  { value: "4k", label: "4K (Ultra HD)" }
+  { label: "720p (HD)", value: "720p" },
+  { label: "1080p (Full HD)", value: "1080p" },
+  { label: "4K (Ultra HD)", value: "4k" }
 ];
 var FPS_OPTIONS = [
-  { value: 15, label: "15 fps" },
-  { value: 24, label: "24 fps (Film)" },
-  { value: 30, label: "30 fps" },
-  { value: 60, label: "60 fps (Smooth)" }
+  { label: "15 fps", value: 15 },
+  { label: "24 fps (Film)", value: 24 },
+  { label: "30 fps", value: 30 },
+  { label: "60 fps (Smooth)", value: 60 }
 ];
 function UpscaleNodeComponent(props) {
   const { id, data } = props;
@@ -5162,19 +5628,25 @@ function UpscaleNodeComponent(props) {
   );
   const handleFactorChange = useCallback(
     (value) => {
-      updateNodeData(id, { upscaleFactor: value });
+      updateNodeData(id, {
+        upscaleFactor: value
+      });
     },
     [id, updateNodeData]
   );
   const handleFormatChange = useCallback(
     (value) => {
-      updateNodeData(id, { outputFormat: value });
+      updateNodeData(id, {
+        outputFormat: value
+      });
     },
     [id, updateNodeData]
   );
   const handleResolutionChange = useCallback(
     (value) => {
-      updateNodeData(id, { targetResolution: value });
+      updateNodeData(id, {
+        targetResolution: value
+      });
     },
     [id, updateNodeData]
   );
@@ -5241,6 +5713,10 @@ function UpscaleNodeComponent(props) {
   }, [isPlaying]);
   const getPriceEstimate = useCallback(() => {
     const priceMap = {
+      "4k-15": 0.187,
+      "4k-24": 0.299,
+      "4k-30": 0.373,
+      "4k-60": 0.747,
       "720p-15": 0.014,
       "720p-24": 0.022,
       "720p-30": 0.027,
@@ -5248,11 +5724,7 @@ function UpscaleNodeComponent(props) {
       "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
+      "1080p-60": 0.203
     };
     const key = `${nodeData.targetResolution}-${nodeData.targetFps}`;
     const perFiveSeconds = priceMap[key] ?? 0.101;
@@ -5260,7 +5732,16 @@ function UpscaleNodeComponent(props) {
   }, [nodeData.targetResolution, nodeData.targetFps]);
   const models = inputType === "video" ? VIDEO_MODELS2 : IMAGE_MODELS2;
   const headerActions = useMemo(
-    () => hasOutput ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" }) }) : null,
+    () => hasOutput ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: handleExpand,
+        title: "Expand preview",
+        children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" })
+      }
+    ) : null,
     [hasOutput, handleExpand]
   );
   return /* @__PURE__ */ jsx(BaseNode, { ...props, headerActions, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
@@ -5279,20 +5760,34 @@ function UpscaleNodeComponent(props) {
     inputType === "image" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
         /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Upscale Factor" }),
-        /* @__PURE__ */ jsxs(Select, { value: nodeData.upscaleFactor, onValueChange: handleFactorChange, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsx(SelectContent, { children: UPSCALE_FACTORS.map((factor) => /* @__PURE__ */ jsx(SelectItem, { value: factor.value, children: factor.label }, factor.value)) })
-        ] })
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: nodeData.upscaleFactor,
+            onValueChange: handleFactorChange,
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: UPSCALE_FACTORS.map((factor) => /* @__PURE__ */ jsx(SelectItem, { value: factor.value, children: factor.label }, factor.value)) })
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
         /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Output Format" }),
-        /* @__PURE__ */ jsxs(Select, { value: nodeData.outputFormat, onValueChange: handleFormatChange, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsxs(SelectContent, { children: [
-            /* @__PURE__ */ jsx(SelectItem, { value: "png", children: "PNG" }),
-            /* @__PURE__ */ jsx(SelectItem, { value: "jpg", children: "JPG" })
-          ] })
-        ] })
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: nodeData.outputFormat,
+            onValueChange: handleFormatChange,
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "png", children: "PNG" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "jpg", children: "JPG" })
+              ] })
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 nodrag", children: [
@@ -5304,7 +5799,14 @@ function UpscaleNodeComponent(props) {
               onCheckedChange: handleFaceEnhancementToggle
             }
           ),
-          /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-face-enhance`, className: "text-xs cursor-pointer", children: "Face Enhancement" })
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              htmlFor: `${id}-face-enhance`,
+              className: "text-xs cursor-pointer",
+              children: "Face Enhancement"
+            }
+          )
         ] }),
         nodeData.faceEnhancement && /* @__PURE__ */ jsxs("div", { className: "space-y-2 pl-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
@@ -5351,17 +5853,31 @@ function UpscaleNodeComponent(props) {
     inputType === "video" && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
         /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Target Resolution" }),
-        /* @__PURE__ */ jsxs(Select, { value: nodeData.targetResolution, onValueChange: handleResolutionChange, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsx(SelectContent, { children: RESOLUTIONS.map((res) => /* @__PURE__ */ jsx(SelectItem, { value: res.value, children: res.label }, res.value)) })
-        ] })
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: nodeData.targetResolution,
+            onValueChange: handleResolutionChange,
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: RESOLUTIONS.map((res) => /* @__PURE__ */ jsx(SelectItem, { value: res.value, children: res.label }, res.value)) })
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
         /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Target Frame Rate" }),
-        /* @__PURE__ */ jsxs(Select, { value: String(nodeData.targetFps), onValueChange: handleFpsChange, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsx(SelectContent, { children: FPS_OPTIONS.map((fps) => /* @__PURE__ */ jsx(SelectItem, { value: String(fps.value), children: fps.label }, fps.value)) })
-        ] })
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: String(nodeData.targetFps),
+            onValueChange: handleFpsChange,
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: FPS_OPTIONS.map((fps) => /* @__PURE__ */ jsx(SelectItem, { value: String(fps.value), children: fps.label }, fps.value)) })
+            ]
+          }
+        )
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-muted-foreground bg-secondary/50 rounded px-2 py-1", children: [
         "Estimated cost: ",
@@ -5487,8 +6003,8 @@ function UpscaleNodeComponent(props) {
 }
 var UpscaleNode = memo(UpscaleNodeComponent);
 var SELECTION_MODES = [
-  { value: "last", label: "Last Frame" },
-  { value: "first", label: "First Frame" }
+  { label: "Last Frame", value: "last" },
+  { label: "First Frame", value: "first" }
 ];
 function formatTime(seconds) {
   const mins = Math.floor(seconds / 60);
@@ -5502,7 +6018,9 @@ function VideoFrameExtractNodeComponent(props) {
   const executeNode = useExecutionStore((state) => state.executeNode);
   const handleModeChange = useCallback(
     (value) => {
-      updateNodeData(id, { selectionMode: value });
+      updateNodeData(id, {
+        selectionMode: value
+      });
     },
     [id, updateNodeData]
   );
@@ -5514,10 +6032,17 @@ function VideoFrameExtractNodeComponent(props) {
     /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--muted-foreground)]", children: nodeData.videoDuration ? `Source: ${formatTime(nodeData.videoDuration)}` : "Connect video to extract frame" }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)] block mb-1", children: "Frame Selection" }),
-      /* @__PURE__ */ jsxs(Select, { value: nodeData.selectionMode, onValueChange: handleModeChange, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: SELECTION_MODES.map((mode) => /* @__PURE__ */ jsx(SelectItem, { value: mode.value, children: mode.label }, mode.value)) })
-      ] })
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: nodeData.selectionMode,
+          onValueChange: handleModeChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: SELECTION_MODES.map((mode) => /* @__PURE__ */ jsx(SelectItem, { value: mode.value, children: mode.label }, mode.value)) })
+          ]
+        }
+      )
     ] }),
     nodeData.outputImage && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx(
@@ -5560,14 +6085,14 @@ function VideoFrameExtractNodeComponent(props) {
 }
 var VideoFrameExtractNode = memo(VideoFrameExtractNodeComponent);
 var TRANSITIONS = [
-  { value: "cut", label: "Cut (No transition)" },
-  { value: "crossfade", label: "Crossfade" },
-  { value: "fade", label: "Fade to Black" },
-  { value: "wipe", label: "Wipe" }
+  { label: "Cut (No transition)", value: "cut" },
+  { label: "Crossfade", value: "crossfade" },
+  { label: "Fade to Black", value: "fade" },
+  { label: "Wipe", value: "wipe" }
 ];
 var AUDIO_CODECS = [
-  { value: "aac", label: "AAC", hint: "Best compatibility" },
-  { value: "mp3", label: "MP3", hint: "Legacy fallback" }
+  { hint: "Best compatibility", label: "AAC", value: "aac" },
+  { hint: "Legacy fallback", label: "MP3", value: "mp3" }
 ];
 function VideoStitchNodeComponent(props) {
   const { id, data } = props;
@@ -5640,10 +6165,17 @@ function VideoStitchNodeComponent(props) {
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)]", children: "Transition" }),
-      /* @__PURE__ */ jsxs(Select, { value: nodeData.transitionType, onValueChange: handleTransitionChange, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: TRANSITIONS.map((t) => /* @__PURE__ */ jsx(SelectItem, { value: t.value, children: t.label }, t.value)) })
-      ] })
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: nodeData.transitionType,
+          onValueChange: handleTransitionChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: TRANSITIONS.map((t) => /* @__PURE__ */ jsx(SelectItem, { value: t.value, children: t.label }, t.value)) })
+          ]
+        }
+      )
     ] }),
     nodeData.transitionType !== "cut" && /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsxs("label", { className: "text-xs text-[var(--muted-foreground)]", children: [
@@ -5683,14 +6215,21 @@ function VideoStitchNodeComponent(props) {
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--muted-foreground)]", children: "Audio Codec" }),
-      /* @__PURE__ */ jsxs(Select, { value: nodeData.audioCodec, onValueChange: handleAudioCodecChange, children: [
-        /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: AUDIO_CODECS.map((codec) => /* @__PURE__ */ jsxs(SelectItem, { value: codec.value, children: [
-          codec.label,
-          " - ",
-          codec.hint
-        ] }, codec.value)) })
-      ] })
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: nodeData.audioCodec,
+          onValueChange: handleAudioCodecChange,
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-8 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: AUDIO_CODECS.map((codec) => /* @__PURE__ */ jsxs(SelectItem, { value: codec.value, children: [
+              codec.label,
+              " - ",
+              codec.hint
+            ] }, codec.value)) })
+          ]
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 nodrag", children: [
       /* @__PURE__ */ jsx(
@@ -5804,7 +6343,16 @@ function VideoTrimNodeComponent(props) {
     openNodeDetailModal(id, "preview");
   }, [id, openNodeDetailModal]);
   const headerActions = useMemo(
-    () => nodeData.outputVideo ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: handleExpand, title: "Expand preview", children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" }) }) : null,
+    () => nodeData.outputVideo ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: handleExpand,
+        title: "Expand preview",
+        children: /* @__PURE__ */ jsx(Expand, { className: "h-3 w-3" })
+      }
+    ) : null,
     [nodeData.outputVideo, handleExpand]
   );
   const trimDuration = nodeData.endTime - nodeData.startTime;
@@ -5914,36 +6462,36 @@ var VideoTrimNode = memo(VideoTrimNodeComponent);
 
 // src/nodes/index.ts
 var nodeTypes = {
+  animation: AnimationNode,
+  annotation: AnnotationNode,
   // Input nodes
   audioInput: AudioInputNode,
-  imageInput: ImageInputNode,
-  videoInput: VideoInputNode,
-  prompt: PromptNode,
-  promptConstructor: PromptConstructorNode,
+  // Output nodes
+  download: DownloadNode,
+  imageCompare: ImageCompareNode,
   // AI nodes
   imageGen: ImageGenNode,
-  videoGen: VideoGenNode,
-  llm: LLMNode,
+  imageGridSplit: ImageGridSplitNode,
+  imageInput: ImageInputNode,
   lipSync: LipSyncNode,
-  voiceChange: VoiceChangeNode,
-  textToSpeech: TextToSpeechNode,
-  transcribe: TranscribeNode,
+  llm: LLMNode,
   motionControl: MotionControlNode,
+  outputGallery: OutputGalleryNode,
+  prompt: PromptNode,
+  promptConstructor: PromptConstructorNode,
+  reframe: ReframeNode,
   // Processing nodes
   resize: ResizeNode,
-  animation: AnimationNode,
-  annotation: AnnotationNode,
-  imageGridSplit: ImageGridSplitNode,
-  outputGallery: OutputGalleryNode,
-  imageCompare: ImageCompareNode,
+  subtitle: SubtitleNode,
+  textToSpeech: TextToSpeechNode,
+  transcribe: TranscribeNode,
+  upscale: UpscaleNode,
+  videoFrameExtract: VideoFrameExtractNode,
+  videoGen: VideoGenNode,
+  videoInput: VideoInputNode,
   videoStitch: VideoStitchNode,
   videoTrim: VideoTrimNode,
-  videoFrameExtract: VideoFrameExtractNode,
-  reframe: ReframeNode,
-  upscale: UpscaleNode,
-  subtitle: SubtitleNode,
-  // Output nodes
-  download: DownloadNode,
+  voiceChange: VoiceChangeNode,
   // Composition nodes (workflow-as-node)
   workflowInput: WorkflowInputNode,
   workflowOutput: WorkflowOutputNode,