@genfeedai/workflow-ui 0.2.6 → 0.2.7

package/dist/{chunk-72UIUFXH.mjs → chunk-55JFUNLR.mjs}

@@ -10,11 +10,11 @@ import { useWorkflowStore } from './chunk-7DJHFOIW.mjs';
 import { usePromptLibraryStore } from './chunk-4JOFNZW6.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, Children, Component, useLayoutEffect } from 'react';
+import { memo, createContext, useRef, useState, useMemo, Children, useEffect, useCallback, Component, useLayoutEffect, useContext } from 'react';
 import { NODE_DEFINITIONS, NodeStatusEnum } from '@genfeedai/types';
 import { useUpdateNodeInternals, NodeResizer, Handle, Position } from '@xyflow/react';
 import { clsx } from 'clsx';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { useShallow } from 'zustand/react/shallow';
 import { LUMA_ASPECT_RATIOS } from '@genfeedai/core';
@@ -275,8 +275,8 @@ function BaseNodeComponent({
     (state) => state.activeNodeExecutions.has(id)
   );
   const handleRetry = useCallback(
-    (e) => {
-      e.stopPropagation();
+    (e3) => {
+      e3.stopPropagation();
       if (!nodeExecuting) {
         updateNodeData(id, {
           error: void 0,
@@ -288,8 +288,8 @@ function BaseNodeComponent({
     [id, nodeExecuting, executeNode, updateNodeData]
   );
   const handleStopNode = useCallback(
-    (e) => {
-      e.stopPropagation();
+    (e3) => {
+      e3.stopPropagation();
       if (isRunning) {
         stopExecution();
       } else if (nodeExecuting) {
@@ -308,8 +308,8 @@ function BaseNodeComponent({
     ]
   );
   const handleCopyError = useCallback(
-    async (e) => {
-      e.stopPropagation();
+    async (e3) => {
+      e3.stopPropagation();
       if (nodeData.error) {
         if (navigator.clipboard) {
           await navigator.clipboard.writeText(nodeData.error);
@@ -353,8 +353,8 @@ function BaseNodeComponent({
   const Icon = ICON_MAP[nodeDef.icon] ?? Sparkles;
   const isSelected = selected || selectedNodeId === id;
   const isLocked = isNodeLocked(id);
-  const handleLockToggle = (e) => {
-    e.stopPropagation();
+  const handleLockToggle = (e3) => {
+    e3.stopPropagation();
     toggleNodeLock(id);
   };
   const categoryCssVars = {
@@ -557,8 +557,8 @@ function arePropsEqual(prev, next) {
   const prevDisabled = prev.disabledInputs ?? [];
   const nextDisabled = next.disabledInputs ?? [];
   if (prevDisabled.length !== nextDisabled.length) return false;
-  for (let i = 0; i < prevDisabled.length; i++) {
-    if (prevDisabled[i] !== nextDisabled[i]) return false;
+  for (let i3 = 0; i3 < prevDisabled.length; i3++) {
+    if (prevDisabled[i3] !== nextDisabled[i3]) return false;
   }
   const prevData = prev.data;
   const nextData = next.data;
@@ -715,7 +715,7 @@ function NegativePromptSelectorComponent({
           {
             type: "text",
             value: customText,
-            onChange: (e) => handleCustomChange(e.target.value),
+            onChange: (e3) => handleCustomChange(e3.target.value),
             placeholder: "ugly, deformed, ...",
             className: "nodrag nopan w-full h-7 rounded-md border border-input bg-background px-2 text-xs shadow-sm placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           }
@@ -796,7 +796,7 @@ function getEnumKey(refPath) {
 }
 function formatLabel(key, title) {
   if (title) return title;
-  return key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  return key.replace(/_/g, " ").replace(/\b\w/g, (c3) => c3.toUpperCase());
 }
 function EnumSelect({
   propertyKey,
@@ -852,7 +852,7 @@ function SliderInput({
           max,
           step,
           value: currentValue,
-          onChange: (e) => onChange(Number(e.target.value)),
+          onChange: (e3) => onChange(Number(e3.target.value)),
           className: "nodrag nopan w-16 h-7 rounded-md border border-input bg-background px-2 text-xs text-center shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
         }
       )
@@ -905,8 +905,8 @@ function NumberInput({
         type: "number",
         value: currentValue ?? "",
         placeholder: property.nullable ? "Random" : void 0,
-        onChange: (e) => {
-          const val = e.target.value;
+        onChange: (e3) => {
+          const val = e3.target.value;
           onChange(val === "" ? null : Number(val));
         },
         className: "nodrag nopan w-full h-8 rounded-md border border-input bg-background px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
@@ -930,9 +930,9 @@ function SchemaInputsComponent({
   );
   const sortedProperties = useMemo(() => {
     if (!schema) return [];
-    return Object.entries(schema).filter(([key]) => !CONNECTION_FIELDS.has(key)).sort((a, b) => {
-      const orderA = a[1]["x-order"] ?? 999;
-      const orderB = b[1]["x-order"] ?? 999;
+    return Object.entries(schema).filter(([key]) => !CONNECTION_FIELDS.has(key)).sort((a4, b2) => {
+      const orderA = a4[1]["x-order"] ?? 999;
+      const orderB = b2[1]["x-order"] ?? 999;
       return orderA - orderB;
     });
   }, [schema]);
@@ -950,7 +950,7 @@ function SchemaInputsComponent({
             NegativePromptSelector,
             {
               value: value ?? "",
-              onChange: (v) => handleChange(key, v)
+              onChange: (v2) => handleChange(key, v2)
             },
             key
           );
@@ -968,13 +968,13 @@ function SchemaInputsComponent({
                 property,
                 value,
                 options,
-                onChange: (v) => {
+                onChange: (v2) => {
                   if (enumType === "integer") {
-                    handleChange(key, Number.parseInt(v, 10));
+                    handleChange(key, Number.parseInt(v2, 10));
                   } else if (enumType === "number") {
-                    handleChange(key, Number.parseFloat(v));
+                    handleChange(key, Number.parseFloat(v2));
                   } else {
-                    handleChange(key, v);
+                    handleChange(key, v2);
                   }
                 }
               },
@@ -990,7 +990,7 @@ function SchemaInputsComponent({
               property,
               value,
               options: property.enum,
-              onChange: (v) => handleChange(key, v)
+              onChange: (v2) => handleChange(key, v2)
             },
             key
           );
@@ -1002,7 +1002,7 @@ function SchemaInputsComponent({
               propertyKey: key,
               property,
               value,
-              onChange: (v) => handleChange(key, v)
+              onChange: (v2) => handleChange(key, v2)
             },
             key
           );
@@ -1014,7 +1014,7 @@ function SchemaInputsComponent({
               propertyKey: key,
               property,
               value,
-              onChange: (v) => handleChange(key, v)
+              onChange: (v2) => handleChange(key, v2)
             },
             key
           );
@@ -1026,7 +1026,7 @@ function SchemaInputsComponent({
               propertyKey: key,
               property,
               value,
-              onChange: (v) => handleChange(key, v)
+              onChange: (v2) => handleChange(key, v2)
             },
             key
           );
@@ -1067,7 +1067,7 @@ function ImageGenNodeComponent(props) {
   );
   const handleDownloadAll = useCallback(() => {
     const images = nodeData.outputImages ?? [];
-    images.forEach((_, index) => {
+    images.forEach((_2, index) => {
       setTimeout(() => handleDownload(index), index * 100);
     });
   }, [nodeData.outputImages, handleDownload]);
@@ -1099,7 +1099,7 @@ function ImageGenNodeComponent(props) {
     openNodeDetailModal(id, "preview", selectedPreview ?? 0);
   }, [id, openNodeDetailModal, selectedPreview]);
   const modelDisplayName = useMemo(
-    () => nodeData.selectedModel?.displayName || IMAGE_MODELS.find((m) => m.value === nodeData.model)?.label || nodeData.model,
+    () => nodeData.selectedModel?.displayName || IMAGE_MODELS.find((m2) => m2.value === nodeData.model)?.label || nodeData.model,
     [nodeData.selectedModel?.displayName, nodeData.model]
   );
   const isProcessing = nodeData.status === "processing";
@@ -1160,17 +1160,17 @@ function ImageGenNodeComponent(props) {
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", children: nodeData.outputImages.map((img, i) => /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", children: nodeData.outputImages.map((img, i3) => /* @__PURE__ */ jsxs(
               "div",
               {
                 className: "relative group aspect-square rounded overflow-hidden border border-border cursor-pointer",
-                onClick: () => setSelectedPreview(selectedPreview === i ? null : i),
+                onClick: () => setSelectedPreview(selectedPreview === i3 ? null : i3),
                 children: [
                   /* @__PURE__ */ jsx(
                     Image4,
                     {
                       src: img,
-                      alt: `Generated ${i + 1}`,
+                      alt: `Generated ${i3 + 1}`,
                       fill: true,
                       sizes: "150px",
                       className: "object-cover",
@@ -1183,17 +1183,17 @@ function ImageGenNodeComponent(props) {
                       variant: "ghost",
                       size: "icon-sm",
                       className: "h-6 w-6 bg-white/20 hover:bg-white/30",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        handleDownload(i);
+                      onClick: (e3) => {
+                        e3.stopPropagation();
+                        handleDownload(i3);
                       },
                       children: /* @__PURE__ */ jsx(Download, { className: "w-3 h-3 text-white" })
                     }
                   ) }),
-                  /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-black/50 text-white text-[8px] text-center py-0.5", children: i + 1 })
+                  /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-black/50 text-white text-[8px] text-center py-0.5", children: i3 + 1 })
                 ]
               },
-              i
+              i3
             )) }),
             selectedPreview !== null && nodeData.outputImages[selectedPreview] && /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/3] rounded overflow-hidden", children: [
               /* @__PURE__ */ jsx(
@@ -1295,7 +1295,7 @@ function LipSyncNodeComponent(props) {
   const handleExpand = useCallback(() => {
     openNodeDetailModal(id, "preview");
   }, [id, openNodeDetailModal]);
-  const currentModel = LIPSYNC_MODELS.find((m) => m.value === nodeData.model);
+  const currentModel = LIPSYNC_MODELS.find((m2) => m2.value === nodeData.model);
   const isSyncModel = nodeData.model.startsWith("sync/");
   const supportsImage = currentModel?.supportsImage ?? false;
   const headerActions = useMemo(
@@ -1437,8 +1437,8 @@ function LLMNodeComponent(props) {
     selectedModel: nodeData.selectedModel
   });
   const handleSystemPromptChange = useCallback(
-    (e) => {
-      updateNodeData(id, { systemPrompt: e.target.value });
+    (e3) => {
+      updateNodeData(id, { systemPrompt: e3.target.value });
     },
     [id, updateNodeData]
   );
@@ -1449,9 +1449,9 @@ function LLMNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleMaxTokensChange = useCallback(
-    (e) => {
+    (e3) => {
       updateNodeData(id, {
-        maxTokens: parseInt(e.target.value, 10)
+        maxTokens: parseInt(e3.target.value, 10)
       });
     },
     [id, updateNodeData]
@@ -1460,7 +1460,7 @@ function LLMNodeComponent(props) {
     openNodeDetailModal(id, "preview");
   }, [id, openNodeDetailModal]);
   const modelDisplayName = useMemo(
-    () => nodeData.selectedModel?.displayName || LLM_MODELS.find((m) => m.value === nodeData.model)?.label || nodeData.model || "Llama 3.1 405B",
+    () => nodeData.selectedModel?.displayName || LLM_MODELS.find((m2) => m2.value === nodeData.model)?.label || nodeData.model || "Llama 3.1 405B",
     [nodeData.selectedModel?.displayName, nodeData.model]
   );
   const isProcessing = nodeData.status === "processing";
@@ -1808,7 +1808,7 @@ function MotionControlNodeComponent(props) {
               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__ */ jsx(SelectContent, { children: DURATIONS.map((d3) => /* @__PURE__ */ jsx(SelectItem, { value: String(d3.value), children: d3.label }, d3.value)) })
               ]
             }
           )
@@ -2264,7 +2264,7 @@ function VideoGenNodeComponent(props) {
     openNodeDetailModal(id, "preview");
   }, [id, openNodeDetailModal]);
   const modelDisplayName = useMemo(
-    () => nodeData.selectedModel?.displayName || VIDEO_MODELS.find((m) => m.value === nodeData.model)?.label || nodeData.model,
+    () => nodeData.selectedModel?.displayName || VIDEO_MODELS.find((m2) => m2.value === nodeData.model)?.label || nodeData.model,
     [nodeData.selectedModel?.displayName, nodeData.model]
   );
   const isProcessing = nodeData.status === "processing";
@@ -2483,10 +2483,10 @@ function WorkflowInputNodeComponent(props) {
   const nodeData = data;
   const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
   const handleNameChange = useCallback(
-    (e) => {
+    (e3) => {
       updateNodeData(id, {
-        inputName: e.target.value,
-        label: `Input: ${e.target.value}`
+        inputName: e3.target.value,
+        label: `Input: ${e3.target.value}`
       });
     },
     [id, updateNodeData]
@@ -2510,9 +2510,9 @@ function WorkflowInputNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleDescriptionChange = useCallback(
-    (e) => {
+    (e3) => {
       updateNodeData(id, {
-        description: e.target.value
+        description: e3.target.value
       });
     },
     [id, updateNodeData]
@@ -2592,10 +2592,10 @@ function WorkflowOutputNodeComponent(props) {
   const videoRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const handleNameChange = useCallback(
-    (e) => {
+    (e3) => {
       updateNodeData(id, {
-        label: `Output: ${e.target.value}`,
-        outputName: e.target.value
+        label: `Output: ${e3.target.value}`,
+        outputName: e3.target.value
       });
     },
     [id, updateNodeData]
@@ -2609,9 +2609,9 @@ function WorkflowOutputNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleDescriptionChange = useCallback(
-    (e) => {
+    (e3) => {
       updateNodeData(id, {
-        description: e.target.value
+        description: e3.target.value
       });
     },
     [id, updateNodeData]
@@ -2949,7 +2949,7 @@ function WorkflowRefNodeComponent(props) {
             ] }),
             nodeData.cachedInterface.inputs.length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-[10px]", children: [
               /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Inputs: " }),
-              nodeData.cachedInterface.inputs.map((input, i) => /* @__PURE__ */ jsxs("span", { children: [
+              nodeData.cachedInterface.inputs.map((input, i3) => /* @__PURE__ */ jsxs("span", { children: [
                 /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
                   input.name,
                   /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
@@ -2958,12 +2958,12 @@ function WorkflowRefNodeComponent(props) {
                   ] }),
                   input.required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
                 ] }),
-                i < nodeData.cachedInterface.inputs.length - 1 && ", "
+                i3 < nodeData.cachedInterface.inputs.length - 1 && ", "
               ] }, input.nodeId))
             ] }),
             nodeData.cachedInterface.outputs.length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-[10px]", children: [
               /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Outputs: " }),
-              nodeData.cachedInterface.outputs.map((output, i) => /* @__PURE__ */ jsxs("span", { children: [
+              nodeData.cachedInterface.outputs.map((output, i3) => /* @__PURE__ */ jsxs("span", { children: [
                 /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
                   output.name,
                   /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
@@ -2971,7 +2971,7 @@ function WorkflowRefNodeComponent(props) {
                     output.type
                   ] })
                 ] }),
-                i < nodeData.cachedInterface.outputs.length - 1 && ", "
+                i3 < nodeData.cachedInterface.outputs.length - 1 && ", "
               ] }, output.nodeId))
             ] })
           ] }),
@@ -3012,8 +3012,8 @@ function AudioInputNodeComponent(props) {
   const [showUrlInput, setShowUrlInput] = useState(false);
   const [urlValue, setUrlValue] = useState(nodeData.url || "");
   const handleFileSelect = useCallback(
-    (e) => {
-      const file = e.target.files?.[0];
+    (e3) => {
+      const file = e3.target.files?.[0];
       if (!file) return;
       const reader = new FileReader();
       reader.onload = (event) => {
@@ -3068,10 +3068,10 @@ function AudioInputNodeComponent(props) {
     audio.src = urlValue;
   }, [id, updateNodeData, urlValue]);
   const handleUrlKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Enter") {
+    (e3) => {
+      if (e3.key === "Enter") {
         handleUrlSubmit();
-      } else if (e.key === "Escape") {
+      } else if (e3.key === "Escape") {
         setShowUrlInput(false);
         setUrlValue(nodeData.url || "");
       }
@@ -3139,7 +3139,7 @@ function AudioInputNodeComponent(props) {
         {
           type: "url",
           value: urlValue,
-          onChange: (e) => setUrlValue(e.target.value),
+          onChange: (e3) => setUrlValue(e3.target.value),
           onKeyDown: handleUrlKeyDown,
           placeholder: "https://...",
           className: "nodrag nopan flex-1 h-7 px-2 text-xs rounded-md border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary"
@@ -3287,7 +3287,7 @@ function ImageInputNodeComponent(props) {
         {
           type: "url",
           value: urlValue,
-          onChange: (e) => setUrlValue(e.target.value),
+          onChange: (e3) => setUrlValue(e3.target.value),
           onKeyDown: handleUrlKeyDown,
           placeholder: "https://...",
           className: "nodrag nopan flex-1 h-7 px-2 text-xs rounded-md border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary"
@@ -3365,8 +3365,8 @@ 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((e3) => e3.target === id && e3.targetHandle === "text").map((e3) => nodes.find((n2) => n2.id === e3.source)).filter(
+      (n2) => n2 !== void 0 && n2.type === "prompt"
     );
     const vars = [];
     connectedPromptNodes.forEach((promptNode) => {
@@ -3402,7 +3402,7 @@ function PromptConstructorNodeComponent(props) {
     const varPattern = /@(\w+)/g;
     const unresolved = [];
     const matches = localTemplate.matchAll(varPattern);
-    const availableNames = new Set(availableVariables.map((v) => v.name));
+    const availableNames = new Set(availableVariables.map((v2) => v2.name));
     for (const match of matches) {
       const varName = match[1];
       if (!availableNames.has(varName) && !unresolved.includes(varName)) {
@@ -3413,15 +3413,15 @@ function PromptConstructorNodeComponent(props) {
   }, [localTemplate, availableVariables]);
   const resolvedPreview = useMemo(() => {
     let resolved = localTemplate;
-    availableVariables.forEach((v) => {
-      resolved = resolved.replace(new RegExp(`@${v.name}`, "g"), v.value);
+    availableVariables.forEach((v2) => {
+      resolved = resolved.replace(new RegExp(`@${v2.name}`, "g"), v2.value);
     });
     return resolved;
   }, [localTemplate, availableVariables]);
   useEffect(() => {
     let resolved = nodeData.template;
-    availableVariables.forEach((v) => {
-      resolved = resolved.replace(new RegExp(`@${v.name}`, "g"), v.value);
+    availableVariables.forEach((v2) => {
+      resolved = resolved.replace(new RegExp(`@${v2.name}`, "g"), v2.value);
     });
     const outputValue = resolved || null;
     if (outputValue !== nodeData.outputText) {
@@ -3453,7 +3453,7 @@ function PromptConstructorNodeComponent(props) {
     unresolvedVars.length > 0 && /* @__PURE__ */ jsxs("div", { className: "px-2 py-1 bg-amber-900/30 border border-amber-700/50 rounded text-[10px] text-amber-400", children: [
       /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Unresolved:" }),
       " ",
-      unresolvedVars.map((v) => `@${v}`).join(", ")
+      unresolvedVars.map((v2) => `@${v2}`).join(", ")
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex flex-col", children: [
       /* @__PURE__ */ jsx(
@@ -3481,8 +3481,8 @@ function PromptConstructorNodeComponent(props) {
           children: filteredAutocompleteVars.map((variable, index) => /* @__PURE__ */ jsxs(
             "button",
             {
-              onMouseDown: (e) => {
-                e.preventDefault();
+              onMouseDown: (e3) => {
+                e3.preventDefault();
                 handleAutocompleteSelect(variable.name);
               },
               className: `w-full px-3 py-2 text-left text-[11px] flex flex-col gap-0.5 transition-colors ${index === selectedAutocompleteIndex ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent"}`,
@@ -3501,7 +3501,7 @@ function PromptConstructorNodeComponent(props) {
     ] }),
     availableVariables.length > 0 && /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-muted-foreground px-2", children: [
       "Available: ",
-      availableVariables.map((v) => `@${v.name}`).join(", ")
+      availableVariables.map((v2) => `@${v2.name}`).join(", ")
     ] })
   ] }) });
 }
@@ -3514,8 +3514,8 @@ function PromptNodeComponent(props) {
   const { openCreateModal } = usePromptLibraryStore();
   const { openEditor } = usePromptEditorStore();
   const handlePromptChange = useCallback(
-    (e) => {
-      updateNodeData(id, { prompt: e.target.value });
+    (e3) => {
+      updateNodeData(id, { prompt: e3.target.value });
     },
     [id, updateNodeData]
   );
@@ -3712,7 +3712,7 @@ function VideoInputNodeComponent(props) {
         {
           type: "url",
           value: urlValue,
-          onChange: (e) => setUrlValue(e.target.value),
+          onChange: (e3) => setUrlValue(e3.target.value),
           onKeyDown: handleUrlKeyDown,
           placeholder: "https://...",
           className: "nodrag nopan flex-1 h-7 px-2 text-xs rounded-md border border-border bg-background focus:outline-none focus:ring-1 focus:ring-primary"
@@ -3828,25 +3828,25 @@ function NodeDetailModal() {
     setCurrentIndex(nodeDetailStartIndex);
   }, [nodeDetailNodeId, nodeDetailStartIndex]);
   useEffect(() => {
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (e3) => {
       if (activeModal !== "nodeDetail") return;
-      if (e.key === "Escape") {
+      if (e3.key === "Escape") {
         closeNodeDetailModal();
       }
-      if (e.key === "+" || e.key === "=") {
+      if (e3.key === "+" || e3.key === "=") {
         setZoomLevel((prev) => Math.min(prev + 0.25, 4));
       }
-      if (e.key === "-") {
+      if (e3.key === "-") {
         setZoomLevel((prev) => Math.max(prev - 0.25, 0.25));
       }
-      if (e.key === "0") {
+      if (e3.key === "0") {
         setZoomLevel(1);
         setPanOffset({ x: 0, y: 0 });
       }
-      if (e.key === "ArrowLeft") {
+      if (e3.key === "ArrowLeft") {
         goToPrevious();
       }
-      if (e.key === "ArrowRight") {
+      if (e3.key === "ArrowRight") {
         goToNext();
       }
     };
@@ -3854,20 +3854,20 @@ function NodeDetailModal() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [activeModal, closeNodeDetailModal, goToPrevious, goToNext]);
   const handleMouseDown = useCallback(
-    (e) => {
+    (e3) => {
       if (zoomLevel > 1) {
         setIsPanning(true);
-        setPanStart({ x: e.clientX - panOffset.x, y: e.clientY - panOffset.y });
+        setPanStart({ x: e3.clientX - panOffset.x, y: e3.clientY - panOffset.y });
       }
     },
     [zoomLevel, panOffset]
   );
   const handleMouseMove = useCallback(
-    (e) => {
+    (e3) => {
       if (isPanning) {
         setPanOffset({
-          x: e.clientX - panStart.x,
-          y: e.clientY - panStart.y
+          x: e3.clientX - panStart.x,
+          y: e3.clientY - panStart.y
         });
       }
     },
@@ -4072,8 +4072,8 @@ function DownloadNodeComponent(props) {
   const activeType = nodeData.inputVideo ? "video" : nodeData.inputImage ? "image" : null;
   const fileExtension = activeMedia ? getExtensionFromUrl(activeMedia, activeType || "image") : "png";
   const handleFilenameChange = useCallback(
-    (e) => {
-      updateNodeData(id, { outputName: e.target.value });
+    (e3) => {
+      updateNodeData(id, { outputName: e3.target.value });
     },
     [id, updateNodeData]
   );
@@ -4270,7 +4270,7 @@ function AnimationNodeComponent(props) {
       CubicBezierEditor,
       {
         value: curve,
-        onChange: (v) => updateNodeData(id, { customCurve: v }),
+        onChange: (v2) => updateNodeData(id, { customCurve: v2 }),
         disabled: nodeData.status === "processing"
       }
     ),
@@ -4453,105 +4453,111 @@ function AnnotationNodeComponent(props) {
   ] }) });
 }
 var AnnotationNode = memo(AnnotationNodeComponent);
-var B = forwardRef(({ transition: e, ...t }, r) => {
-  let o = { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", transition: e ? `clip-path ${e}` : void 0, userSelect: "none", willChange: "clip-path, transition", KhtmlUserSelect: "none", MozUserSelect: "none", WebkitUserSelect: "none" };
-  return jsx("div", { ...t, style: o, "data-rcs": "clip-item", ref: r });
-});
-B.displayName = "ContainerClip";
-var W = forwardRef(({ children: e, disabled: t, portrait: r, position: o, transition: i }, m) => {
-  let u = { position: "absolute", top: 0, width: r ? "100%" : void 0, height: r ? void 0 : "100%", background: "none", border: 0, padding: 0, pointerEvents: "all", appearance: "none", WebkitAppearance: "none", MozAppearance: "none", outline: 0, transform: r ? "translate3d(0, -50% ,0)" : "translate3d(-50%, 0, 0)", transition: i ? `${r ? "top" : "left"} ${i}` : void 0 };
-  return jsx("button", { ref: m, "aria-label": "Drag to move or focus and use arrow keys", "aria-orientation": r ? "vertical" : "horizontal", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": o, "data-rcs": "handle-container", disabled: t, role: "slider", style: u, children: e });
-});
-W.displayName = "ThisHandleContainer";
-var re = ({ flip: e }) => jsx("div", { className: "__rcs-handle-arrow", style: { width: 0, height: 0, borderTop: "8px solid transparent", borderRight: "10px solid", borderBottom: "8px solid transparent", transform: e ? "rotate(180deg)" : void 0 } });
-var F = ({ className: e = "__rcs-handle-root", disabled: t, buttonStyle: r, linesStyle: o, portrait: i, style: m, ...C }) => {
-  let u = { display: "flex", flexDirection: i ? "row" : "column", placeItems: "center", height: "100%", cursor: t ? "not-allowed" : i ? "ns-resize" : "ew-resize", pointerEvents: "none", color: "#fff", ...m }, E = { flexGrow: 1, height: i ? 2 : "100%", width: i ? "100%" : 2, backgroundColor: "currentColor", pointerEvents: "auto", boxShadow: "0 0 4px rgba(0,0,0,.5)", ...o }, y = { display: "grid", gridAutoFlow: "column", gap: 8, placeContent: "center", flexShrink: 0, width: 56, height: 56, borderRadius: "50%", borderStyle: "solid", borderWidth: 2, pointerEvents: "auto", backdropFilter: "blur(7px)", WebkitBackdropFilter: "blur(7px)", backgroundColor: "rgba(0, 0, 0, 0.125)", boxShadow: "0 0 4px rgba(0,0,0,.35)", transform: i ? "rotate(90deg)" : void 0, ...r };
-  return jsxs("div", { ...C, className: e, style: u, children: [jsx("div", { className: "__rcs-handle-line", style: E }), jsxs("div", { className: "__rcs-handle-button", style: y, children: [jsx(re, {}), jsx(re, { flip: true })] }), jsx("div", { className: "__rcs-handle-line", style: E })] });
-};
-var $ = ((i) => (i.ARROW_LEFT = "ArrowLeft", i.ARROW_RIGHT = "ArrowRight", i.ARROW_UP = "ArrowUp", i.ARROW_DOWN = "ArrowDown", i))($ || {});
-var G = ({ boxSizing: e = "border-box", objectFit: t = "cover", objectPosition: r = "center center", ...o } = {}) => ({ display: "block", width: "100%", height: "100%", maxWidth: "100%", boxSizing: e, objectFit: t, objectPosition: r, ...o });
-var oe = (e) => {
-  let t = useRef(e);
-  return useEffect(() => {
-    t.current = e;
-  }), t.current;
-};
-var U = (e, t, r, o) => {
-  let i = useRef();
+
+// ../node_modules/.bun/react-compare-slider@4.0.0+bf16f8eded5e12ee/node_modules/react-compare-slider/dist/consts.mjs
+var e = { all: `all`, itemOne: `itemOne`, itemTwo: `itemTwo` };
+var t = { rawPosition: `--rcs-raw-position`, currentPosition: `--rcs-current-position`, boundsPadding: `--rcs-bounds-padding`, handleColor: `--rcs-handle-color` };
+var n = { capture: false, passive: true };
+var r = { capture: true, passive: false };
+var i = (function(e3) {
+  return e3.ARROW_LEFT = `ArrowLeft`, e3.ARROW_RIGHT = `ArrowRight`, e3.ARROW_UP = `ArrowUp`, e3.ARROW_DOWN = `ArrowDown`, e3;
+})({});
+var a = (n2, r3, i3, a4) => {
+  let o3 = useRef(void 0);
   useEffect(() => {
-    i.current = t;
-  }, [t]), useEffect(() => {
-    if (!(r && r.addEventListener)) return;
-    let m = (C) => i.current && i.current(C);
-    return r.addEventListener(e, m, o), () => {
-      r.removeEventListener(e, m, o);
+    o3.current = r3;
+  }, [r3]), useEffect(() => {
+    if (!i3?.addEventListener) return;
+    let e3 = (e4) => o3.current?.(e4);
+    return i3.addEventListener(n2, e3, a4), () => {
+      i3.removeEventListener(n2, e3, a4);
     };
-  }, [e, r, o]);
+  }, [n2, i3, a4]);
 };
-var Te = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u" ? useLayoutEffect : useEffect;
-var ie = (e, t) => {
-  let r = useRef(), o = useCallback(() => {
-    e.current && r.current && r.current.observe(e.current);
-  }, [e]);
-  Te(() => (r.current = new ResizeObserver(([i]) => t(i.contentRect)), o(), () => {
-    r.current && r.current.disconnect();
-  }), [t, o]);
+var u = createContext(null);
+var d = ({ children: e3, ...t3 }) => jsx(u.Provider, { value: t3, children: e3 });
+var f = () => {
+  let e3 = useContext(u);
+  if (!e3) throw Error(`useReactCompareSliderContext must be used within the Provider component`);
+  return e3;
 };
-var I = { capture: false, passive: true };
-var X5 = { capture: true, passive: false };
-var Me = (e) => {
-  e.preventDefault(), e.currentTarget.focus();
+var p = ({ flip: e3 }) => {
+  let n2 = { width: `0.85rem`, height: `0.85rem`, clipPath: `polygon(100% 0%, 100% 100%, 30% 50%)`, rotate: e3 ? `180deg` : `0deg`, outline: `0.5rem solid var(${t.handleColor})`, outlineOffset: `-0.5rem` };
+  return jsx(`div`, { "aria-hidden": `true`, className: `__rcs-handle-arrow`, style: n2 });
 };
-var se = forwardRef(({ boundsPadding: e = 0, browsingContext: t = globalThis, changePositionOnHover: r = false, disabled: o = false, handle: i, itemOne: m, itemTwo: C, keyboardIncrement: u = "5%", onlyHandleDraggable: E = false, onPositionChange: y, portrait: a = false, position: g = 50, style: le, transition: ce, ...pe }, de) => {
-  let p = useRef(null), j = useRef(null), f = useRef(null), d = useRef(g), [L, q] = useState(false), [me, x] = useState(true), w = useRef(false), [ue, fe] = useState(), J = oe(g), l = useCallback(function({ x: s, y: c, isOffset: R }) {
-    let b = p.current, A = f.current, D = j.current, { width: h, height: S, left: Pe, top: Ee } = b.getBoundingClientRect();
-    if (h === 0 || S === 0) return;
-    let ye = a ? R ? c - Ee - t.scrollY : c : R ? s - Pe - t.scrollX : s, Q = Math.min(Math.max(ye / (a ? S : h) * 100, 0), 100), z = a ? S / (b.offsetHeight || 1) : h / (b.offsetWidth || 1), Z = e * z / (a ? S : h) * 100, _ = Math.min(Math.max(Q, Z * z), 100 - Z * z);
-    d.current = Q, A.setAttribute("aria-valuenow", `${Math.round(d.current)}`), A.style.top = a ? `${_}%` : "0", A.style.left = a ? "0" : `${_}%`, D.style.clipPath = a ? `inset(${_}% 0 0 0)` : `inset(0 0 0 ${_}%)`, y && y(d.current);
-  }, [e, y, a, t]);
-  useEffect(() => {
-    let { width: n, height: s } = p.current.getBoundingClientRect(), c = g === J ? d.current : g;
-    l({ x: n / 100 * c, y: s / 100 * c });
-  }, [e, g, a, J, l]);
-  let Re = useCallback((n) => {
-    n.preventDefault(), !(o || n.button !== 0) && (l({ isOffset: true, x: n.pageX, y: n.pageY }), q(true), x(true));
-  }, [o, l]), v = useCallback(function(s) {
-    l({ isOffset: true, x: s.pageX, y: s.pageY }), x(false);
-  }, [l]), T = useCallback(() => {
-    q(false), x(true);
-  }, []), Se = useCallback(({ width: n, height: s }) => {
-    let { width: c, height: R } = p.current.getBoundingClientRect();
-    l({ x: n / 100 * d.current * c / n, y: s / 100 * d.current * R / s });
-  }, [l]), Ce = useCallback((n) => {
-    if (!Object.values($).includes(n.key)) return;
-    n.preventDefault(), x(true);
-    let { top: s, left: c } = f.current.getBoundingClientRect(), { width: R, height: b } = p.current.getBoundingClientRect(), D = typeof u == "string" ? parseFloat(u) : u / R * 100, h = a ? n.key === "ArrowLeft" || n.key === "ArrowDown" : n.key === "ArrowRight" || n.key === "ArrowUp", S = Math.min(Math.max(h ? d.current + D : d.current - D, 0), 100);
-    l({ x: a ? c : R * S / 100, y: a ? b * S / 100 : s });
-  }, [u, a, l]);
-  useEffect(() => {
-    fe(E ? f.current : p.current);
-  }, [E]), useEffect(() => {
-    let n = p.current, s = () => {
-      L || T();
+var m = ({ className: e3 = `__rcs-handle-root`, buttonStyle: n2, linesStyle: r3, style: i3, ...a4 }) => {
+  let { disabled: o3, portrait: s3 } = f(), u3 = { boxSizing: `border-box`, position: `relative`, display: `inline-flex`, flexDirection: s3 ? `row` : `column`, placeItems: `center`, width: s3 ? `100%` : void 0, height: s3 ? void 0 : `100%`, cursor: o3 ? `not-allowed` : s3 ? `ns-resize` : `ew-resize`, pointerEvents: `none`, [t.handleColor]: `rgba(255, 255, 255, 1)`, ...i3 }, d3 = { flexGrow: 1, height: s3 ? 2 : `100%`, width: s3 ? `100%` : 2, outline: `1px solid var(${t.handleColor})`, outlineOffset: -1, pointerEvents: `auto`, boxShadow: `0 0 4px rgba(0,0,0,.5)`, ...r3 }, m2 = { direction: `ltr`, display: `grid`, gridAutoFlow: `column`, gap: `0.5rem`, placeContent: `center`, flexShrink: 0, width: `3.5rem`, height: `3.5rem`, borderRadius: `50%`, border: `2px solid var(${t.handleColor})`, color: `inherit`, pointerEvents: `auto`, backdropFilter: `blur(0.5rem)`, WebkitBackdropFilter: `blur(0.5rem)`, backgroundColor: `rgba(0, 0, 0, 0.125)`, boxShadow: `0 0 4px rgba(0,0,0,.35)`, transform: s3 ? `rotate(90deg)` : void 0, ...n2 };
+  return jsxs(`div`, { "data-rcs": `handle`, ...a4, className: e3, style: u3, children: [jsx(`div`, { className: `__rcs-handle-line`, style: d3 }), jsxs(`div`, { className: `__rcs-handle-button`, style: m2, children: [jsx(p, {}), jsx(p, { flip: true })] }), jsx(`div`, { className: `__rcs-handle-line`, style: d3 })] });
+};
+var h = ({ display: e3 = `block`, width: t3 = `100%`, height: n2 = `100%`, maxWidth: r3 = `100%`, boxSizing: i3 = `border-box`, objectFit: a4 = `cover`, objectPosition: o3 = `center center`, ...s3 } = {}) => ({ display: e3, width: t3, height: n2, maxWidth: r3, boxSizing: i3, objectFit: a4, objectPosition: o3, ...s3 });
+var g = ({ alt: e3, style: t3, ...n2 }) => {
+  let r3 = h(t3);
+  return jsx(`img`, { "data-rcs": `image`, ...n2, alt: e3, style: r3 });
+};
+var _ = ({ style: e3, ...r3 }) => {
+  let { disabled: a4, portrait: o3, position: s3, handleRootRef: l3, onHandleRootClick: u3, onHandleRootKeyDown: d3 } = f(), p3 = { WebkitAppearance: `none`, MozAppearance: `none`, WebkitTapHighlightColor: `transparent`, boxSizing: `border-box`, position: `absolute`, display: `flex`, flexDirection: o3 ? `row` : `column`, placeItems: `center`, contain: `layout`, top: o3 ? `-50%` : void 0, left: o3 ? void 0 : `-50%`, width: `100%`, height: `100%`, background: `none`, border: 0, padding: 0, pointerEvents: `none`, appearance: `none`, outline: 0, zIndex: 1, translate: o3 ? `0 var(${t.currentPosition}) 0` : `var(${t.currentPosition}) 0 0`, backfaceVisibility: `hidden`, willChange: `translate`, ...e3 };
+  return a(`keydown`, d3, l3.current, r), a(`click`, u3, l3.current, r), jsx(`div`, { ref: l3, tabIndex: 0, "aria-label": `Click and drag or focus and use arrow keys to change the position of the slider`, "aria-orientation": o3 ? `vertical` : `horizontal`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": s3.current, "aria-disabled": a4, "data-rcs": `handle-root`, role: `slider`, style: p3, ...r3 });
+};
+var v = ({ itemClip: n2, portrait: r3 }) => n2 === e.itemOne ? r3 ? `inset(0px 0px calc(100% - var(${t.currentPosition})) 0px)` : `inset(0px calc(100% - var(${t.currentPosition})) 0px 0px)` : n2 === e.itemTwo ? r3 ? `inset(var(${t.currentPosition}) 0px 0px 0px)` : `inset(0px 0px 0px var(${t.currentPosition}))` : `none`;
+var y = ({ item: t3, style: n2, ...r3 }) => {
+  let { clip: i3, portrait: a4 } = f(), o3 = { KhtmlUserSelect: `none`, MozUserSelect: `none`, WebkitUserSelect: `none`, backfaceVisibility: `hidden`, WebkitBackfaceVisibility: `hidden`, gridArea: `1 / 1`, maxWidth: `100%`, overflow: `hidden`, clipPath: v({ itemClip: i3 === e.all || i3 === t3 ? t3 : void 0, portrait: a4 }), boxSizing: `border-box`, transform: `translateZ(0)`, userSelect: `none`, zIndex: t3 === e.itemOne ? 1 : void 0, willChange: `clip-path`, ...n2 };
+  return jsx(`div`, { "data-rcs": `item`, "data-rcs-item": t3, ...r3, style: o3 });
+};
+var b = `clamp(var(${t.boundsPadding}), var(${t.rawPosition}) - var(${t.boundsPadding}) + var(${t.boundsPadding}), calc(100% - var(${t.boundsPadding})))`;
+var x = ({ style: e3, ...a4 }) => {
+  let { browsingContext: o3, boundsPadding: l3, changePositionOnHover: u3, clip: d3, isDragging: p3, portrait: m2, position: h2, onTouchEnd: g2, onPointerDown: _2, onPointerMove: v2, onPointerUp: y2, interactiveTarget: x2, rootRef: S, transition: C, canTransition: w } = f(), T = { position: `relative`, boxSizing: `border-box`, display: `grid`, maxWidth: `100%`, maxHeight: `100%`, overflow: `hidden`, cursor: p3 ? m2 ? `ns-resize` : `ew-resize` : void 0, touchAction: `pan-y`, userSelect: `none`, KhtmlUserSelect: `none`, msUserSelect: `none`, MozUserSelect: `none`, WebkitUserSelect: `none`, transition: w && C ? `${t.rawPosition} ${C}` : `none`, [t.rawPosition]: `${h2.current}%`, [t.boundsPadding]: l3, [t.currentPosition]: b, ...e3 };
+  return a(`touchend`, g2, x2, r), a(`pointerdown`, _2, x2, r), useEffect(() => {
+    let e4 = S.current, t3 = (e5) => {
+      p3 || y2(e5);
     };
-    return r && (n.addEventListener("pointermove", v, I), n.addEventListener("pointerleave", s, I)), () => {
-      n.removeEventListener("pointermove", v), n.removeEventListener("pointerleave", s);
+    return u3 && (e4.addEventListener(`pointermove`, v2, n), e4.addEventListener(`pointerleave`, t3, n)), () => {
+      e4.removeEventListener(`pointermove`, v2), e4.removeEventListener(`pointerleave`, t3);
     };
-  }, [r, v, T, L]), useEffect(() => (L && !w.current && (t.addEventListener("pointermove", v, I), t.addEventListener("pointerup", T, I), w.current = true), () => {
-    w.current && (t.removeEventListener("pointermove", v), t.removeEventListener("pointerup", T), w.current = false);
-  }), [v, T, L, t]), useImperativeHandle(de, () => ({ rootContainer: p.current, handleContainer: f.current, setPosition(n) {
-    let { width: s, height: c } = p.current.getBoundingClientRect();
-    l({ x: s / 100 * n, y: c / 100 * n });
-  } }), [l]), ie(p, Se), U("keydown", Ce, f.current, X5), U("click", Me, f.current, X5), U("pointerdown", Re, ue, X5);
-  let ve = i || jsx(F, { disabled: o, portrait: a }), K = me ? ce : void 0, he = { position: "relative", display: "flex", overflow: "hidden", cursor: L ? a ? "ns-resize" : "ew-resize" : void 0, touchAction: "none", userSelect: "none", KhtmlUserSelect: "none", msUserSelect: "none", MozUserSelect: "none", WebkitUserSelect: "none", ...le };
-  return jsxs("div", { ...pe, ref: p, style: he, "data-rcs": "root", children: [m, jsx(B, { ref: j, transition: K, children: C }), jsx(W, { disabled: o, portrait: a, position: Math.round(d.current), ref: f, transition: K, children: ve })] });
-});
-se.displayName = "ReactCompareSlider";
-var ae = forwardRef(({ style: e, ...t }, r) => {
-  let o = G(e);
-  return jsx("img", { ref: r, ...t, style: o, "data-rcs": "image" });
-});
-ae.displayName = "ReactCompareSliderImage";
+  }, [u3, v2, y2, p3, S]), useEffect(() => {
+    if (p3) return o3.addEventListener(`pointermove`, v2, n), o3.addEventListener(`pointerup`, y2, n), () => {
+      o3?.removeEventListener(`pointermove`, v2), o3?.removeEventListener(`pointerup`, y2);
+    };
+  }, [v2, y2, p3, o3]), jsx(`div`, { ref: S, style: T, "data-rcs": `root`, "data-rcs-clip": d3, ...a4 });
+};
+(() => {
+  try {
+    typeof CSS < `u` && CSS.registerProperty({ name: t.rawPosition, syntax: `<percentage>`, inherits: true, initialValue: `50%` });
+  } catch (e3) {
+    console.debug(`[react-compare-slider] register CSS property:`, e3);
+  }
+})();
+var c2 = () => globalThis.matchMedia?.(`(prefers-reduced-motion: no-preference)`)?.matches ? `0.15s ease-out` : `none`;
+var l2 = () => !!globalThis.matchMedia?.(`(pointer: coarse)`)?.matches;
+var u2 = ({ boundsPadding: u3 = `0px`, browsingContext: d3 = globalThis, changePositionOnHover: f3 = false, clip: p3 = e.all, defaultPosition: m2 = 50, disabled: h2 = false, keyboardIncrement: g2 = `5%`, onlyHandleDraggable: _2 = l2(), onPositionChange: v2, portrait: y2 = false, transition: b2 = c2() } = {}) => {
+  let x2 = useRef(null), S = useRef(null), C = useRef(m2), [w, T] = useState(false), [E, D] = useState(true), [O, k] = useState(null), A = useCallback((e3) => {
+    let n2 = Math.min(Math.max(e3, 0), 100);
+    x2.current?.style.setProperty(t.rawPosition, `${n2}%`), S.current?.setAttribute(`aria-valuenow`, `${Math.round(n2)}`), C.current = n2, v2?.(n2);
+  }, [v2]), j = useCallback(function({ x: e3, y: t3 }) {
+    let { width: n2, height: r3, top: i3, left: a4 } = x2.current.getBoundingClientRect();
+    n2 === 0 || r3 === 0 || A((y2 ? t3 - i3 - d3.scrollY : e3 - a4 - d3.scrollX) / (y2 ? r3 : n2) * 100);
+  }, [d3, y2, A]), M = useCallback((e3) => {
+    e3.preventDefault(), !(h2 || e3.button !== 0) && (j({ x: e3.pageX, y: e3.pageY }), T(true), D(true));
+  }, [h2, j]), N = useCallback(function(e3) {
+    D(false), j({ x: e3.pageX, y: e3.pageY });
+  }, [j]), P = useCallback((e3) => {
+    T(false), D(true);
+  }, []), F = useCallback((e3) => {
+    T(false), D(true);
+  }, []), I = useCallback((e3) => {
+    e3.preventDefault(), e3.currentTarget?.focus();
+  }, []), L = useCallback((e3) => {
+    if (!Object.values(i).includes(e3.key)) return;
+    e3.preventDefault(), D(true);
+    let t3 = typeof g2 == `string` ? Number.parseFloat(g2) : g2 / x2.current?.getBoundingClientRect().width * 100;
+    A((y2 ? e3.key === i.ARROW_LEFT || e3.key === i.ARROW_DOWN : e3.key === i.ARROW_RIGHT || e3.key === i.ARROW_UP) ? C.current + t3 : C.current - t3);
+  }, [g2, y2, A]);
+  return useLayoutEffect(() => {
+    k(_2 ? S.current : x2.current);
+  }, [_2]), useEffect(() => {
+    A(m2);
+  }, [m2, A]), { boundsPadding: u3, browsingContext: d3, changePositionOnHover: f3, clip: p3, defaultPosition: m2, disabled: h2, keyboardIncrement: g2, onlyHandleDraggable: _2, portrait: y2, transition: b2, onHandleRootKeyDown: L, onPointerDown: M, onPointerMove: N, onPointerUp: P, onTouchEnd: F, onHandleRootClick: I, canTransition: E, isDragging: w, position: C, setPosition: A, setPositionFromBounds: j, rootRef: x2, handleRootRef: S, interactiveTarget: O };
+};
+var p2 = ({ boundsPadding: e3, browsingContext: t3, changePositionOnHover: n2, clip: c3, defaultPosition: l3, disabled: p3, handle: m2, itemOne: h2, itemTwo: g2, keyboardIncrement: _2, onPositionChange: v2, onlyHandleDraggable: y2, portrait: b2, transition: x2, ...S }) => jsx(d, { ...u2({ boundsPadding: e3, browsingContext: t3, changePositionOnHover: n2, clip: c3, defaultPosition: l3, disabled: p3, keyboardIncrement: _2, onPositionChange: v2, onlyHandleDraggable: y2, portrait: b2, transition: x2 }), children: jsxs(x, { ...S, children: [jsx(y, { item: `itemOne`, children: h2 }), jsx(y, { item: `itemTwo`, children: g2 }), jsx(_, { children: m2 || jsx(m, {}) })] }) });
 function ImageCompareNodeComponent(props) {
   const { id, data } = props;
   const nodeData = data;
@@ -4559,13 +4565,13 @@ function ImageCompareNodeComponent(props) {
   const nodes = useWorkflowStore((state) => state.nodes);
   const displayImages = useMemo(() => {
     const connectedImages = [];
-    const sortedEdges = edges.filter((edge) => edge.target === id).sort((a, b) => {
-      const aTime = a.data?.createdAt || 0;
-      const bTime = b.data?.createdAt || 0;
+    const sortedEdges = edges.filter((edge) => edge.target === id).sort((a4, b2) => {
+      const aTime = a4.data?.createdAt || 0;
+      const bTime = b2.data?.createdAt || 0;
       return aTime - bTime;
     });
     sortedEdges.forEach((edge) => {
-      const sourceNode = nodes.find((n) => n.id === edge.source);
+      const sourceNode = nodes.find((n2) => n2.id === edge.source);
       if (!sourceNode) return;
       const sourceData = sourceNode.data;
       let image = null;
@@ -4586,10 +4592,10 @@ function ImageCompareNodeComponent(props) {
   const imageB = displayImages[1] || nodeData.imageB || null;
   return /* @__PURE__ */ jsx(BaseNode, { ...props, children: imageA && imageB ? /* @__PURE__ */ jsxs("div", { className: "flex-1 relative nodrag nopan nowheel min-h-[200px]", children: [
     /* @__PURE__ */ jsx(
-      se,
+      p2,
       {
         itemOne: /* @__PURE__ */ jsx(
-          ae,
+          g,
           {
             src: imageA,
             alt: "Image A",
@@ -4597,7 +4603,7 @@ function ImageCompareNodeComponent(props) {
           }
         ),
         itemTwo: /* @__PURE__ */ jsx(
-          ae,
+          g,
           {
             src: imageB,
             alt: "Image B",
@@ -4629,20 +4635,20 @@ function ImageGridSplitNodeComponent(props) {
   const executeNode = useExecutionStore((state) => state.executeNode);
   const [selectedPreview, setSelectedPreview] = useState(null);
   const handleRowsChange = useCallback(
-    (e) => {
+    (e3) => {
       const value = Math.min(
         10,
-        Math.max(1, Number.parseInt(e.target.value, 10) || 1)
+        Math.max(1, Number.parseInt(e3.target.value, 10) || 1)
       );
       updateNodeData(id, { gridRows: value });
     },
     [id, updateNodeData]
   );
   const handleColsChange = useCallback(
-    (e) => {
+    (e3) => {
       const value = Math.min(
         10,
-        Math.max(1, Number.parseInt(e.target.value, 10) || 1)
+        Math.max(1, Number.parseInt(e3.target.value, 10) || 1)
       );
       updateNodeData(id, { gridCols: value });
     },
@@ -4690,7 +4696,7 @@ function ImageGridSplitNodeComponent(props) {
     [nodeData.outputImages, nodeData.outputFormat]
   );
   const handleDownloadAll = useCallback(() => {
-    nodeData.outputImages.forEach((_, index) => {
+    nodeData.outputImages.forEach((_2, index) => {
       setTimeout(() => handleDownload(index), index * 100);
     });
   }, [nodeData.outputImages, handleDownload]);
@@ -4745,13 +4751,13 @@ function ImageGridSplitNodeComponent(props) {
             gridTemplateColumns: `repeat(${nodeData.gridCols}, 1fr)`,
             gridTemplateRows: `repeat(${nodeData.gridRows}, 1fr)`
           },
-          children: Array.from({ length: totalCells }).map((_, i) => /* @__PURE__ */ jsx(
+          children: Array.from({ length: totalCells }).map((_2, i3) => /* @__PURE__ */ jsx(
             "div",
             {
               className: "bg-[var(--primary)]/20 text-[8px] flex items-center justify-center text-[var(--primary)]",
-              children: i + 1
+              children: i3 + 1
             },
-            i
+            i3
           ))
         }
       )
@@ -4783,7 +4789,7 @@ function ImageGridSplitNodeComponent(props) {
             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__ */ jsx(SelectContent, { children: OUTPUT_FORMATS.map((f3) => /* @__PURE__ */ jsx(SelectItem, { value: f3.value, children: f3.label }, f3.value)) })
             ]
           }
         )
@@ -4853,8 +4859,8 @@ function ImageGridSplitNodeComponent(props) {
                   {
                     variant: "ghost",
                     size: "icon-sm",
-                    onClick: (e) => {
-                      e.stopPropagation();
+                    onClick: (e3) => {
+                      e3.stopPropagation();
                       handleDownload(index);
                     },
                     className: "h-6 w-6 bg-white/20 hover:bg-white/30",
@@ -4933,7 +4939,7 @@ function OutputGalleryNodeComponent(props) {
     const executionImages = [...nodeData.images || []];
     const connectedImages = [];
     edges.filter((edge) => edge.target === id).forEach((edge) => {
-      const sourceNode = nodes.find((n) => n.id === edge.source);
+      const sourceNode = nodes.find((n2) => n2.id === edge.source);
       if (!sourceNode) return;
       const sourceData = sourceNode.data;
       const images = sourceData.outputImages;
@@ -4999,7 +5005,7 @@ function OutputGalleryNodeComponent(props) {
           canvas.height = img.naturalHeight;
           const ctx = canvas.getContext("2d");
           ctx?.drawImage(img, 0, 0);
-          canvas.toBlob((b) => resolve(b || blob), "image/png");
+          canvas.toBlob((b2) => resolve(b2 || blob), "image/png");
         };
         img.onerror = () => resolve(blob);
         img.src = image;
@@ -5012,8 +5018,8 @@ function OutputGalleryNodeComponent(props) {
   }, [lightboxIndex]);
   useEffect(() => {
     if (!isLightboxOpen) return;
-    const handleKeyDown = (e) => {
-      switch (e.key) {
+    const handleKeyDown = (e3) => {
+      switch (e3.key) {
         case "Escape":
           closeLightbox();
           break;
@@ -5051,12 +5057,12 @@ 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(),
+          onContextMenu: (e3) => e3.stopPropagation(),
           children: /* @__PURE__ */ jsxs(
             "div",
             {
               className: "relative max-w-full max-h-full",
-              onClick: (e) => e.stopPropagation(),
+              onClick: (e3) => e3.stopPropagation(),
               children: [
                 /* @__PURE__ */ jsx(
                   "img",
@@ -5169,8 +5175,8 @@ function ReframeNodeComponent(props) {
     [id, updateNodeData]
   );
   const handlePromptChange = useCallback(
-    (e) => {
-      updateNodeData(id, { prompt: e.target.value });
+    (e3) => {
+      updateNodeData(id, { prompt: e3.target.value });
     },
     [id, updateNodeData]
   );
@@ -5339,8 +5345,8 @@ function ResizeNodeComponent(props) {
     [id, updateNodeData]
   );
   const handlePromptChange = useCallback(
-    (e) => {
-      updateNodeData(id, { prompt: e.target.value });
+    (e3) => {
+      updateNodeData(id, { prompt: e3.target.value });
     },
     [id, updateNodeData]
   );
@@ -5489,8 +5495,8 @@ function SubtitleNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleFontColorChange = useCallback(
-    (e) => {
-      updateNodeData(id, { fontColor: e.target.value });
+    (e3) => {
+      updateNodeData(id, { fontColor: e3.target.value });
     },
     [id, updateNodeData]
   );
@@ -6162,7 +6168,7 @@ function VideoStitchNodeComponent(props) {
         "Input Videos: ",
         inputVideos.length
       ] }),
-      inputVideos.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex gap-1 flex-wrap", children: inputVideos.map((_, index) => /* @__PURE__ */ jsx(
+      inputVideos.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 flex gap-1 flex-wrap", children: inputVideos.map((_2, index) => /* @__PURE__ */ jsx(
         "div",
         {
           className: "w-6 h-6 bg-[var(--primary)]/20 rounded text-xs flex items-center justify-center text-[var(--primary)]",
@@ -6180,7 +6186,7 @@ function VideoStitchNodeComponent(props) {
           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__ */ jsx(SelectContent, { children: TRANSITIONS.map((t3) => /* @__PURE__ */ jsx(SelectItem, { value: t3.value, children: t3.label }, t3.value)) })
           ]
         }
       )
@@ -6318,15 +6324,15 @@ function VideoTrimNodeComponent(props) {
   const openNodeDetailModal = useUIStore((state) => state.openNodeDetailModal);
   const hasRequiredInputs = !!nodeData.inputVideo;
   const handleStartTimeChange = useCallback(
-    (e) => {
-      const value = parseTime(e.target.value);
+    (e3) => {
+      const value = parseTime(e3.target.value);
       updateNodeData(id, { startTime: value });
     },
     [id, updateNodeData]
   );
   const handleEndTimeChange = useCallback(
-    (e) => {
-      const value = parseTime(e.target.value);
+    (e3) => {
+      const value = parseTime(e3.target.value);
       updateNodeData(id, { endTime: value });
     },
     [id, updateNodeData]
@@ -6507,5 +6513,5 @@ var nodeTypes = {
 };
 
 export { AnimationNode, AnnotationNode, AudioInputNode, BaseNode, DownloadNode, ImageCompareNode, ImageGenNode, ImageGridSplitNode, ImageInputNode, LLMNode, LipSyncNode, MotionControlNode, NodeDetailModal, OutputGalleryNode, OutputNode, PromptConstructorNode, PromptNode, ReframeNode, ResizeNode, SubtitleNode, TextToSpeechNode, TranscribeNode, UpscaleNode, VideoFrameExtractNode, VideoGenNode, VideoInputNode, VideoStitchNode, VideoTrimNode, VoiceChangeNode, WorkflowInputNode, WorkflowOutputNode, WorkflowRefNode, nodeTypes, setWorkflowRefApi };
-//# sourceMappingURL=chunk-72UIUFXH.mjs.map
-//# sourceMappingURL=chunk-72UIUFXH.mjs.map
+//# sourceMappingURL=chunk-55JFUNLR.mjs.map
+//# sourceMappingURL=chunk-55JFUNLR.mjs.map