@genfeedai/workflow-ui 0.1.0 → 0.1.2

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

@@ -1,27 +1,302 @@
 import { Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Slider, Label, Input, GridPositionSelector, ComparisonSlider } from './chunk-ZJD5WMR3.mjs';
 import { generateHandlesFromSchema, DEFAULT_IMAGE_MODEL, IMAGE_MODEL_MAP, IMAGE_MODEL_ID_MAP, IMAGE_MODELS, LIPSYNC_MODELS, LIPSYNC_SYNC_MODES, DEFAULT_LLM_MODEL, LLM_MODEL_MAP, LLM_MODEL_ID_MAP, LLM_MODELS, DEFAULT_VIDEO_MODEL, VIDEO_MODEL_MAP, VIDEO_MODEL_ID_MAP, VIDEO_MODELS, EASING_PRESETS, getMediaFromNode } from './chunk-E323WAZG.mjs';
-import { useNodeExecution, useCanGenerate, useModelSelection, useAutoLoadModelSchema, useAIGenNode, useAIGenNodeHeader, useMediaUpload, usePromptAutocomplete, useRequiredInputs } from './chunk-FT64PCUP.mjs';
+import { useNodeExecution, useCanGenerate, useModelSelection, useAutoLoadModelSchema, useAIGenNode, useAIGenNodeHeader, useMediaUpload, usePromptAutocomplete, useRequiredInputs } from './chunk-AOTUCJMA.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-CSUBLSKZ.mjs';
-import { require_dist, useWorkflowStore } from './chunk-BJ3R5R32.mjs';
+import { useUIStore, useExecutionStore } from './chunk-SQK4JDYY.mjs';
+import { useWorkflowStore } from './chunk-RIGVIEYB.mjs';
 import { useWorkflowUIConfig } from './chunk-FT33LFII.mjs';
 import { usePromptLibraryStore } from './chunk-VRN3UWE5.mjs';
-import { __toESM } from './chunk-AC6TWLRT.mjs';
+import { __commonJS, __require, __toESM } from './chunk-ZJWP5KGZ.mjs';
+import { NODE_DEFINITIONS, NodeStatusEnum } from '@genfeedai/types';
 import { useUpdateNodeInternals, NodeResizer, Handle, Position } from '@xyflow/react';
 import { clsx } from 'clsx';
 import { GitBranch, ArrowLeftFromLine, ArrowRightToLine, Subtitles, Pencil, Columns2, LayoutGrid, Grid3X3, Puzzle, Navigation, Volume2, AudioLines, Mic, Maximize, Crop, RefreshCw, AtSign, Download, Eye, CheckCircle, Share2, Scissors, Layers, Wand2, Maximize2, Brain, Video, Sparkles, Film, FileVideo, FileText, MessageSquare, Image as Image$1, Square, Lock, Unlock, Copy, RotateCcw, Loader2, ChevronDown, ChevronRight, AlertCircle, ImageIcon, Expand, Play, AlertTriangle, CheckCircle2, Upload, Link, X, Music, Save, Clock, Shapes, ChevronLeft, SplitSquareHorizontal, Zap } from 'lucide-react';
-import { memo, useRef, useState, useMemo, useEffect, useCallback, Component } from 'react';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle, useMemo, useLayoutEffect, Component } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Image4 from 'next/image';
 import { createPortal } from 'react-dom';
-import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 import { useShallow } from 'zustand/react/shallow';
-import { LUMA_ASPECT_RATIOS } from '@genfeedai/core';
 
-// src/nodes/BaseNode.tsx
-var import_types = __toESM(require_dist());
+// ../core/dist/chunk-OAAW6BNW.js
+var require_chunk_OAAW6BNW = __commonJS({
+  "../core/dist/chunk-OAAW6BNW.js"(exports$1) {
+    function topologicalSort(nodes, edges) {
+      const inDegree = /* @__PURE__ */ new Map();
+      const adjList = /* @__PURE__ */ new Map();
+      for (const node of nodes) {
+        inDegree.set(node.id, 0);
+        adjList.set(node.id, []);
+      }
+      for (const edge of edges) {
+        adjList.get(edge.source)?.push(edge.target);
+        inDegree.set(edge.target, (inDegree.get(edge.target) ?? 0) + 1);
+      }
+      const queue = [];
+      for (const [nodeId, degree] of inDegree) {
+        if (degree === 0) {
+          queue.push(nodeId);
+        }
+      }
+      const result = [];
+      while (queue.length > 0) {
+        const node = queue.shift();
+        result.push(node);
+        for (const neighbor of adjList.get(node) ?? []) {
+          inDegree.set(neighbor, (inDegree.get(neighbor) ?? 1) - 1);
+          if (inDegree.get(neighbor) === 0) {
+            queue.push(neighbor);
+          }
+        }
+      }
+      return result;
+    }
+    function buildDependencyMap(nodes, edges) {
+      const deps = /* @__PURE__ */ new Map();
+      for (const node of nodes) {
+        deps.set(node.id, []);
+      }
+      for (const edge of edges) {
+        const existing = deps.get(edge.target) ?? [];
+        deps.set(edge.target, [...existing, edge.source]);
+      }
+      return deps;
+    }
+    exports$1.buildDependencyMap = buildDependencyMap;
+    exports$1.topologicalSort = topologicalSort;
+  }
+});
+
+// ../core/dist/chunk-FZCK5A7S.js
+var require_chunk_FZCK5A7S = __commonJS({
+  "../core/dist/chunk-FZCK5A7S.js"(exports$1) {
+    var types = __require("@genfeedai/types");
+    function detectCycles(nodes, edges) {
+      const visited = /* @__PURE__ */ new Set();
+      const recStack = /* @__PURE__ */ new Set();
+      function hasCycle(nodeId) {
+        if (recStack.has(nodeId)) return true;
+        if (visited.has(nodeId)) return false;
+        visited.add(nodeId);
+        recStack.add(nodeId);
+        const outgoing = edges.filter((e) => e.source === nodeId);
+        for (const edge of outgoing) {
+          if (hasCycle(edge.target)) return true;
+        }
+        recStack.delete(nodeId);
+        return false;
+      }
+      for (const node of nodes) {
+        if (hasCycle(node.id)) return true;
+      }
+      return false;
+    }
+    function validateWorkflow(nodes, edges) {
+      const errors = [];
+      const warnings = [];
+      for (const node of nodes) {
+        const nodeDef = types.NODE_DEFINITIONS[node.type];
+        if (!nodeDef) continue;
+        const incomingEdges = edges.filter((e) => e.target === node.id);
+        for (const input of nodeDef.inputs) {
+          if (input.required) {
+            const hasConnection = incomingEdges.some((e) => e.targetHandle === input.id);
+            if (!hasConnection) {
+              errors.push({
+                nodeId: node.id,
+                message: `Missing required input: ${input.label}`,
+                severity: "error"
+              });
+            }
+          }
+        }
+        if (node.type === "download") {
+          const hasMediaInput = incomingEdges.some(
+            (e) => e.targetHandle === "image" || e.targetHandle === "video"
+          );
+          if (!hasMediaInput) {
+            errors.push({
+              nodeId: node.id,
+              message: "Output node requires at least one Media input (image or video)",
+              severity: "error"
+            });
+          }
+        }
+      }
+      if (detectCycles(nodes, edges)) {
+        errors.push({
+          nodeId: nodes[0]?.id ?? "unknown",
+          message: "Workflow contains a cycle",
+          severity: "error"
+        });
+      }
+      return {
+        isValid: errors.length === 0,
+        errors,
+        warnings
+      };
+    }
+    function getHandleType(nodeType, handleId, direction) {
+      const nodeDef = types.NODE_DEFINITIONS[nodeType];
+      if (!nodeDef) return null;
+      const handles = direction === "source" ? nodeDef.outputs : nodeDef.inputs;
+      const handle = handles.find((h) => h.id === handleId);
+      return handle?.type ?? null;
+    }
+    function isValidConnection(sourceNodeType, sourceHandle, targetNodeType, targetHandle) {
+      const sourceType = getHandleType(sourceNodeType, sourceHandle, "source");
+      const targetType = getHandleType(targetNodeType, targetHandle, "target");
+      if (!sourceType || !targetType) return false;
+      return types.CONNECTION_RULES[sourceType]?.includes(targetType) ?? false;
+    }
+    function getCompatibleHandles(handleType) {
+      return types.CONNECTION_RULES[handleType] ?? [];
+    }
+    exports$1.detectCycles = detectCycles;
+    exports$1.getCompatibleHandles = getCompatibleHandles;
+    exports$1.getHandleType = getHandleType;
+    exports$1.isValidConnection = isValidConnection;
+    exports$1.validateWorkflow = validateWorkflow;
+  }
+});
+
+// ../core/dist/index.js
+var require_dist = __commonJS({
+  "../core/dist/index.js"(exports$1) {
+    var chunkOAAW6BNW_js = require_chunk_OAAW6BNW();
+    var chunkFZCK5A7S_js = require_chunk_FZCK5A7S();
+    var PRICING = {
+      // Image generation (per image)
+      "nano-banana": 0.039,
+      "nano-banana-pro": {
+        "1K": 0.15,
+        "2K": 0.15,
+        "4K": 0.3
+      },
+      // Legacy aliases
+      "imagen-4-fast": 0.039,
+      "imagen-4": 0.15,
+      // Video generation (per second)
+      "veo-3.1-fast": { withAudio: 0.15, withoutAudio: 0.1 },
+      "veo-3.1": { withAudio: 0.4, withoutAudio: 0.2 },
+      // Legacy aliases
+      "veo-3-fast": { withAudio: 0.15, withoutAudio: 0.1 },
+      "veo-3": { withAudio: 0.4, withoutAudio: 0.2 },
+      // LLM (per token, derived from $9.50/million)
+      llama: 95e-7,
+      // Luma Reframe
+      "luma-reframe-image": {
+        "photon-flash-1": 0.01,
+        "photon-1": 0.03
+      },
+      "luma-reframe-video": 0.06,
+      // per second
+      // Topaz Upscale (tiered by megapixels)
+      "topaz-image-upscale": [
+        { maxMP: 1, price: 0.05 },
+        { maxMP: 4, price: 0.08 },
+        { maxMP: 9, price: 0.16 },
+        { maxMP: 16, price: 0.27 },
+        { maxMP: 25, price: 0.41 },
+        { maxMP: Infinity, price: 0.82 }
+      ],
+      // Topaz Video (per 5 seconds based on resolution and fps)
+      "topaz-video-upscale": {
+        "720p-15": 0.014,
+        "720p-24": 0.022,
+        "720p-30": 0.027,
+        "720p-60": 0.054,
+        "1080p-15": 0.051,
+        "1080p-24": 0.081,
+        "1080p-30": 0.101,
+        "1080p-60": 0.203,
+        "4k-15": 0.187,
+        "4k-24": 0.299,
+        "4k-30": 0.373,
+        "4k-60": 0.747
+      }
+    };
+    var IMAGE_NODE_TYPES = ["imageGen", "image-gen", "ImageGenNode"];
+    var VIDEO_NODE_TYPES = ["videoGen", "video-gen", "VideoGenNode"];
+    var LUMA_NODE_TYPES = ["reframe", "lumaReframeImage", "lumaReframeVideo"];
+    var TOPAZ_NODE_TYPES = ["upscale", "topazImageUpscale", "topazVideoUpscale"];
+    var DEFAULT_VIDEO_DURATION = 8;
+    var ASPECT_RATIOS3 = [
+      "1:1",
+      "16:9",
+      "9:16",
+      "4:3",
+      "3:4",
+      "4:5",
+      "5:4",
+      "2:3",
+      "3:2",
+      "21:9"
+    ];
+    var VIDEO_ASPECT_RATIOS = ["16:9", "9:16"];
+    var RESOLUTIONS2 = ["1K", "2K", "4K"];
+    var VIDEO_RESOLUTIONS = ["720p", "1080p"];
+    var VIDEO_DURATIONS = [4, 6, 8];
+    var OUTPUT_FORMATS2 = ["jpg", "png", "webp"];
+    var LUMA_ASPECT_RATIOS2 = ["1:1", "3:4", "4:3", "9:16", "16:9", "9:21", "21:9"];
+    Object.defineProperty(exports$1, "buildDependencyMap", {
+      enumerable: true,
+      get: function() {
+        return chunkOAAW6BNW_js.buildDependencyMap;
+      }
+    });
+    Object.defineProperty(exports$1, "topologicalSort", {
+      enumerable: true,
+      get: function() {
+        return chunkOAAW6BNW_js.topologicalSort;
+      }
+    });
+    Object.defineProperty(exports$1, "detectCycles", {
+      enumerable: true,
+      get: function() {
+        return chunkFZCK5A7S_js.detectCycles;
+      }
+    });
+    Object.defineProperty(exports$1, "getCompatibleHandles", {
+      enumerable: true,
+      get: function() {
+        return chunkFZCK5A7S_js.getCompatibleHandles;
+      }
+    });
+    Object.defineProperty(exports$1, "getHandleType", {
+      enumerable: true,
+      get: function() {
+        return chunkFZCK5A7S_js.getHandleType;
+      }
+    });
+    Object.defineProperty(exports$1, "isValidConnection", {
+      enumerable: true,
+      get: function() {
+        return chunkFZCK5A7S_js.isValidConnection;
+      }
+    });
+    Object.defineProperty(exports$1, "validateWorkflow", {
+      enumerable: true,
+      get: function() {
+        return chunkFZCK5A7S_js.validateWorkflow;
+      }
+    });
+    exports$1.ASPECT_RATIOS = ASPECT_RATIOS3;
+    exports$1.DEFAULT_VIDEO_DURATION = DEFAULT_VIDEO_DURATION;
+    exports$1.IMAGE_NODE_TYPES = IMAGE_NODE_TYPES;
+    exports$1.LUMA_ASPECT_RATIOS = LUMA_ASPECT_RATIOS2;
+    exports$1.LUMA_NODE_TYPES = LUMA_NODE_TYPES;
+    exports$1.OUTPUT_FORMATS = OUTPUT_FORMATS2;
+    exports$1.PRICING = PRICING;
+    exports$1.RESOLUTIONS = RESOLUTIONS2;
+    exports$1.TOPAZ_NODE_TYPES = TOPAZ_NODE_TYPES;
+    exports$1.VIDEO_ASPECT_RATIOS = VIDEO_ASPECT_RATIOS;
+    exports$1.VIDEO_DURATIONS = VIDEO_DURATIONS;
+    exports$1.VIDEO_NODE_TYPES = VIDEO_NODE_TYPES;
+    exports$1.VIDEO_RESOLUTIONS = VIDEO_RESOLUTIONS;
+  }
+});
 var NodeErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -209,7 +484,7 @@ function BaseNodeComponent({
   const stopExecution = useExecutionStore((state) => state.stopExecution);
   const stopNodeExecution = useExecutionStore((state) => state.stopNodeExecution);
   const updateNodeInternals = useUpdateNodeInternals();
-  const nodeDef = import_types.NODE_DEFINITIONS[type];
+  const nodeDef = NODE_DEFINITIONS[type];
   const nodeData = data;
   const nodeRef = useRef(null);
   const hoverTimeoutRef = useRef(null);
@@ -239,7 +514,7 @@ function BaseNodeComponent({
     (e) => {
       e.stopPropagation();
       if (!nodeExecuting) {
-        updateNodeData(id, { error: void 0, status: import_types.NodeStatusEnum.PROCESSING });
+        updateNodeData(id, { error: void 0, status: NodeStatusEnum.PROCESSING });
         executeNode(id);
       }
     },
@@ -253,7 +528,7 @@ function BaseNodeComponent({
       } else if (nodeExecuting) {
         stopNodeExecution(id);
       } else {
-        updateNodeData(id, { status: import_types.NodeStatusEnum.IDLE, error: void 0 });
+        updateNodeData(id, { status: NodeStatusEnum.IDLE, error: void 0 });
       }
     },
     [id, isRunning, nodeExecuting, stopExecution, stopNodeExecution, updateNodeData]
@@ -1898,9 +2173,6 @@ function TextToSpeechNodeComponent(props) {
   ] }) });
 }
 var TextToSpeechNode = memo(TextToSpeechNodeComponent);
-
-// src/nodes/ai/TranscribeNode.tsx
-var import_types2 = __toESM(require_dist());
 var LANGUAGES = [
   { value: "auto", label: "Auto-detect" },
   { value: "en", label: "English" },
@@ -1937,7 +2209,7 @@ function TranscribeNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleTranscribe = useCallback(() => {
-    updateNodeData(id, { status: import_types2.NodeStatusEnum.PROCESSING });
+    updateNodeData(id, { status: NodeStatusEnum.PROCESSING });
     executeNode(id);
   }, [id, executeNode, updateNodeData]);
   const handleExpand = useCallback(() => {
@@ -2126,9 +2398,6 @@ function VideoGenNodeComponent(props) {
   );
 }
 var VideoGenNode = memo(VideoGenNodeComponent);
-
-// src/nodes/ai/VoiceChangeNode.tsx
-var import_types3 = __toESM(require_dist());
 function VoiceChangeNodeComponent(props) {
   const { id, type, data } = props;
   const nodeData = data;
@@ -2154,7 +2423,7 @@ function VoiceChangeNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleProcess = useCallback(() => {
-    updateNodeData(id, { status: import_types3.NodeStatusEnum.PROCESSING });
+    updateNodeData(id, { status: NodeStatusEnum.PROCESSING });
     executeNode(id);
   }, [id, executeNode, updateNodeData]);
   const handleExpand = useCallback(() => {
@@ -3584,9 +3853,6 @@ function DownloadNodeComponent(props) {
 }
 var DownloadNode = memo(DownloadNodeComponent);
 var OutputNode = DownloadNode;
-
-// src/nodes/processing/AnimationNode.tsx
-var import_types4 = __toESM(require_dist());
 var PRESET_OPTIONS = [
   { value: "linear", label: "Linear" },
   { value: "easeIn", label: "Ease In" },
@@ -3634,7 +3900,7 @@ function AnimationNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleProcess = useCallback(() => {
-    updateNodeData(id, { status: import_types4.NodeStatusEnum.PROCESSING });
+    updateNodeData(id, { status: NodeStatusEnum.PROCESSING });
     executeNode(id);
   }, [id, executeNode, updateNodeData]);
   const handleExpand = useCallback(() => {
@@ -3818,6 +4084,105 @@ 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();
+  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);
+    };
+  }, [e, r, o]);
+};
+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 I = { capture: false, passive: true };
+var X4 = { capture: true, passive: false };
+var Me = (e) => {
+  e.preventDefault(), e.currentTarget.focus();
+};
+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();
+    };
+    return r && (n.addEventListener("pointermove", v, I), n.addEventListener("pointerleave", s, I)), () => {
+      n.removeEventListener("pointermove", v), n.removeEventListener("pointerleave", s);
+    };
+  }, [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, X4), U("click", Me, f.current, X4), U("pointerdown", Re, ue, X4);
+  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";
 function ImageCompareNodeComponent(props) {
   const { id, data } = props;
   const nodeData = data;
@@ -3852,10 +4217,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(
-      ReactCompareSlider,
+      se,
       {
         itemOne: /* @__PURE__ */ jsx(
-          ReactCompareSliderImage,
+          ae,
           {
             src: imageA,
             alt: "Image A",
@@ -3863,7 +4228,7 @@ function ImageCompareNodeComponent(props) {
           }
         ),
         itemTwo: /* @__PURE__ */ jsx(
-          ReactCompareSliderImage,
+          ae,
           {
             src: imageB,
             alt: "Image B",
@@ -3883,9 +4248,6 @@ function ImageCompareNodeComponent(props) {
   ] }) });
 }
 var ImageCompareNode = memo(ImageCompareNodeComponent);
-
-// src/nodes/processing/ImageGridSplitNode.tsx
-var import_types5 = __toESM(require_dist());
 var OUTPUT_FORMATS = [
   { value: "jpg", label: "JPEG" },
   { value: "png", label: "PNG" },
@@ -3936,7 +4298,7 @@ function ImageGridSplitNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleProcess = useCallback(() => {
-    updateNodeData(id, { status: import_types5.NodeStatusEnum.PROCESSING });
+    updateNodeData(id, { status: NodeStatusEnum.PROCESSING });
     executeNode(id);
   }, [id, executeNode, updateNodeData]);
   const handleDownload = useCallback(
@@ -4351,9 +4713,6 @@ function OutputGalleryNodeComponent(props) {
   ] });
 }
 var OutputGalleryNode = memo(OutputGalleryNodeComponent);
-
-// src/nodes/processing/ReframeNode.tsx
-var import_types6 = __toESM(require_dist());
 var MODELS = [
   { value: "photon-flash-1", label: "Photon Flash", price: "$0.01" },
   { value: "photon-1", label: "Photon", price: "$0.03" }
@@ -4406,7 +4765,7 @@ function ReframeNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleProcess = useCallback(() => {
-    updateNodeData(id, { status: import_types6.NodeStatusEnum.PROCESSING });
+    updateNodeData(id, { status: NodeStatusEnum.PROCESSING });
     executeNode(id);
   }, [id, executeNode, updateNodeData]);
   const togglePlayback = useCallback(() => {
@@ -4531,7 +4890,7 @@ function ReframeNodeComponent(props) {
 var ReframeNode = memo(ReframeNodeComponent);
 
 // src/nodes/processing/ResizeNode.tsx
-var import_types7 = __toESM(require_dist());
+var import_core = __toESM(require_dist());
 var MODELS2 = {
   image: { id: "photon-flash-1", label: "Luma Photon Flash", price: "$0.01" },
   video: { id: "luma-reframe", label: "Luma Reframe", price: "$0.05" }
@@ -4572,7 +4931,7 @@ function ResizeNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleProcess = useCallback(() => {
-    updateNodeData(id, { status: import_types7.NodeStatusEnum.PROCESSING });
+    updateNodeData(id, { status: NodeStatusEnum.PROCESSING });
     executeNode(id);
   }, [id, executeNode, updateNodeData]);
   return /* @__PURE__ */ jsx(BaseNode, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
@@ -4595,7 +4954,7 @@ function ResizeNodeComponent(props) {
       /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Target Aspect Ratio" }),
       /* @__PURE__ */ jsxs(Select, { value: nodeData.targetAspectRatio, onValueChange: handleAspectRatioChange, children: [
         /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-        /* @__PURE__ */ jsx(SelectContent, { children: LUMA_ASPECT_RATIOS.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio, children: ratio }, ratio)) })
+        /* @__PURE__ */ jsx(SelectContent, { children: import_core.LUMA_ASPECT_RATIOS.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio, children: ratio }, ratio)) })
       ] })
     ] }),
     /* @__PURE__ */ jsx(
@@ -4666,9 +5025,6 @@ function ResizeNodeComponent(props) {
   ] }) });
 }
 var ResizeNode = memo(ResizeNodeComponent);
-
-// src/nodes/processing/SubtitleNode.tsx
-var import_types8 = __toESM(require_dist());
 var STYLE_OPTIONS = [
   { value: "modern", label: "Modern" },
   { value: "default", label: "Default" },
@@ -4710,7 +5066,7 @@ function SubtitleNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleProcess = useCallback(() => {
-    updateNodeData(id, { status: import_types8.NodeStatusEnum.PROCESSING });
+    updateNodeData(id, { status: NodeStatusEnum.PROCESSING });
     executeNode(id);
   }, [id, executeNode, updateNodeData]);
   const hasRequiredInputs = nodeData.inputVideo && nodeData.inputText;
@@ -4791,9 +5147,6 @@ function SubtitleNodeComponent(props) {
   ] }) });
 }
 var SubtitleNode = memo(SubtitleNodeComponent);
-
-// src/nodes/processing/UpscaleNode.tsx
-var import_types9 = __toESM(require_dist());
 var IMAGE_MODELS2 = [
   { value: "topaz-standard-v2", label: "Standard V2" },
   { value: "topaz-low-res-v2", label: "Low Resolution V2" },
@@ -4902,7 +5255,7 @@ function UpscaleNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleProcess = useCallback(() => {
-    updateNodeData(id, { status: import_types9.NodeStatusEnum.PROCESSING });
+    updateNodeData(id, { status: NodeStatusEnum.PROCESSING });
     executeNode(id);
   }, [id, executeNode, updateNodeData]);
   const handleExpand = useCallback(() => {
@@ -5164,9 +5517,6 @@ function UpscaleNodeComponent(props) {
   ] }) });
 }
 var UpscaleNode = memo(UpscaleNodeComponent);
-
-// src/nodes/processing/VideoFrameExtractNode.tsx
-var import_types10 = __toESM(require_dist());
 var SELECTION_MODES = [
   { value: "last", label: "Last Frame" },
   { value: "first", label: "First Frame" }
@@ -5188,7 +5538,7 @@ function VideoFrameExtractNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleProcess = useCallback(() => {
-    updateNodeData(id, { status: import_types10.NodeStatusEnum.PROCESSING });
+    updateNodeData(id, { status: NodeStatusEnum.PROCESSING });
     executeNode(id);
   }, [id, executeNode, updateNodeData]);
   return /* @__PURE__ */ jsx(BaseNode, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -5240,9 +5590,6 @@ function VideoFrameExtractNodeComponent(props) {
   ] }) });
 }
 var VideoFrameExtractNode = memo(VideoFrameExtractNodeComponent);
-
-// src/nodes/processing/VideoStitchNode.tsx
-var import_types11 = __toESM(require_dist());
 var TRANSITIONS = [
   { value: "cut", label: "Cut (No transition)" },
   { value: "crossfade", label: "Crossfade" },
@@ -5304,7 +5651,7 @@ function VideoStitchNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleProcess = useCallback(() => {
-    updateNodeData(id, { status: import_types11.NodeStatusEnum.PROCESSING });
+    updateNodeData(id, { status: NodeStatusEnum.PROCESSING });
     executeNode(id);
   }, [id, executeNode, updateNodeData]);
   return /* @__PURE__ */ jsx(BaseNode, { ...props, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -5438,9 +5785,6 @@ function VideoStitchNodeComponent(props) {
   ] }) });
 }
 var VideoStitchNode = memo(VideoStitchNodeComponent);
-
-// src/nodes/processing/VideoTrimNode.tsx
-var import_types12 = __toESM(require_dist());
 function formatTime2(seconds) {
   const mins = Math.floor(seconds / 60);
   const secs = Math.floor(seconds % 60);
@@ -5484,7 +5828,7 @@ function VideoTrimNodeComponent(props) {
     [id, updateNodeData]
   );
   const handleProcess = useCallback(() => {
-    updateNodeData(id, { status: import_types12.NodeStatusEnum.PROCESSING });
+    updateNodeData(id, { status: NodeStatusEnum.PROCESSING });
     executeNode(id);
   }, [id, executeNode, updateNodeData]);
   const handleExpand = useCallback(() => {