@genfeedai/workflow-ui 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/canvas.js +11 -10
  2. package/dist/canvas.mjs +5 -4
  3. package/dist/{chunk-DICI5FSP.js → chunk-3TMV3K34.js} +3 -3
  4. package/dist/chunk-4MZ62VMF.js +37 -0
  5. package/dist/{chunk-EYL6J4MW.mjs → chunk-7P2JWDC7.mjs} +2 -2
  6. package/dist/{chunk-3PMLER6D.mjs → chunk-AOTUCJMA.mjs} +1 -1
  7. package/dist/{chunk-XOC5ETTX.mjs → chunk-AUZR6REQ.mjs} +1 -1
  8. package/dist/{chunk-DUZLPHRC.js → chunk-AXFOCPPP.js} +1 -1
  9. package/dist/{chunk-PVWLMJGZ.js → chunk-BMFRA6GK.js} +13 -13
  10. package/dist/{chunk-PFHFGSM5.mjs → chunk-E3YBVMYZ.mjs} +389 -10
  11. package/dist/{chunk-H3JOHAS5.js → chunk-ECD5J2BA.js} +450 -71
  12. package/dist/{chunk-I3GNO2SR.mjs → chunk-HCXI63ME.mjs} +1 -1
  13. package/dist/{chunk-HWY6IBWT.js → chunk-KDIWRSYV.js} +5 -5
  14. package/dist/{chunk-OZNYKFMX.js → chunk-SEV2DWKF.js} +18 -18
  15. package/dist/{chunk-73V6SUEO.mjs → chunk-SQK4JDYY.mjs} +1 -1
  16. package/dist/chunk-ZJWP5KGZ.mjs +33 -0
  17. package/dist/hooks.js +12 -11
  18. package/dist/hooks.mjs +3 -2
  19. package/dist/index.js +38 -37
  20. package/dist/index.mjs +7 -6
  21. package/dist/lib.js +1 -0
  22. package/dist/lib.mjs +1 -0
  23. package/dist/nodes.js +37 -36
  24. package/dist/nodes.mjs +4 -3
  25. package/dist/panels.js +6 -5
  26. package/dist/panels.mjs +3 -2
  27. package/dist/provider.js +1 -0
  28. package/dist/provider.mjs +1 -0
  29. package/dist/stores.js +6 -5
  30. package/dist/stores.mjs +2 -1
  31. package/dist/toolbar.js +9 -8
  32. package/dist/toolbar.mjs +3 -2
  33. package/dist/ui.js +1 -0
  34. package/dist/ui.mjs +1 -0
  35. package/dist/{workflowStore-ZCSVIZQF.mjs → workflowStore-7SDJC4UR.mjs} +1 -0
  36. package/dist/{workflowStore-32ZH5REM.js → workflowStore-LNJQ5RZG.js} +1 -0
  37. package/package.json +3 -3
@@ -1,25 +1,302 @@
1
1
  import { Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Slider, Label, Input, GridPositionSelector, ComparisonSlider } from './chunk-ZJD5WMR3.mjs';
2
2
  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';
3
- import { useNodeExecution, useCanGenerate, useModelSelection, useAutoLoadModelSchema, useAIGenNode, useAIGenNodeHeader, useMediaUpload, usePromptAutocomplete, useRequiredInputs } from './chunk-3PMLER6D.mjs';
3
+ import { useNodeExecution, useCanGenerate, useModelSelection, useAutoLoadModelSchema, useAIGenNode, useAIGenNodeHeader, useMediaUpload, usePromptAutocomplete, useRequiredInputs } from './chunk-AOTUCJMA.mjs';
4
4
  import { Button } from './chunk-7SKSRSS7.mjs';
5
5
  import { getImageDimensions, getVideoMetadata } from './chunk-EFXQT23N.mjs';
6
6
  import { usePromptEditorStore, useAnnotationStore } from './chunk-CV4M7CNU.mjs';
7
- import { useUIStore, useExecutionStore } from './chunk-73V6SUEO.mjs';
7
+ import { useUIStore, useExecutionStore } from './chunk-SQK4JDYY.mjs';
8
8
  import { useWorkflowStore } from './chunk-RIGVIEYB.mjs';
9
9
  import { useWorkflowUIConfig } from './chunk-FT33LFII.mjs';
10
10
  import { usePromptLibraryStore } from './chunk-VRN3UWE5.mjs';
11
+ import { __commonJS, __require, __toESM } from './chunk-ZJWP5KGZ.mjs';
11
12
  import { NODE_DEFINITIONS, NodeStatusEnum } from '@genfeedai/types';
12
13
  import { useUpdateNodeInternals, NodeResizer, Handle, Position } from '@xyflow/react';
13
14
  import { clsx } from 'clsx';
14
15
  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';
15
- import { memo, useRef, useState, useMemo, useEffect, useCallback, Component } from 'react';
16
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
16
+ import { memo, forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle, useMemo, useLayoutEffect, Component } from 'react';
17
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
17
18
  import Image4 from 'next/image';
18
19
  import { createPortal } from 'react-dom';
19
- import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
20
20
  import { useShallow } from 'zustand/react/shallow';
21
- import { LUMA_ASPECT_RATIOS } from '@genfeedai/core';
22
21
 
22
+ // ../core/dist/chunk-OAAW6BNW.js
23
+ var require_chunk_OAAW6BNW = __commonJS({
24
+ "../core/dist/chunk-OAAW6BNW.js"(exports$1) {
25
+ function topologicalSort(nodes, edges) {
26
+ const inDegree = /* @__PURE__ */ new Map();
27
+ const adjList = /* @__PURE__ */ new Map();
28
+ for (const node of nodes) {
29
+ inDegree.set(node.id, 0);
30
+ adjList.set(node.id, []);
31
+ }
32
+ for (const edge of edges) {
33
+ adjList.get(edge.source)?.push(edge.target);
34
+ inDegree.set(edge.target, (inDegree.get(edge.target) ?? 0) + 1);
35
+ }
36
+ const queue = [];
37
+ for (const [nodeId, degree] of inDegree) {
38
+ if (degree === 0) {
39
+ queue.push(nodeId);
40
+ }
41
+ }
42
+ const result = [];
43
+ while (queue.length > 0) {
44
+ const node = queue.shift();
45
+ result.push(node);
46
+ for (const neighbor of adjList.get(node) ?? []) {
47
+ inDegree.set(neighbor, (inDegree.get(neighbor) ?? 1) - 1);
48
+ if (inDegree.get(neighbor) === 0) {
49
+ queue.push(neighbor);
50
+ }
51
+ }
52
+ }
53
+ return result;
54
+ }
55
+ function buildDependencyMap(nodes, edges) {
56
+ const deps = /* @__PURE__ */ new Map();
57
+ for (const node of nodes) {
58
+ deps.set(node.id, []);
59
+ }
60
+ for (const edge of edges) {
61
+ const existing = deps.get(edge.target) ?? [];
62
+ deps.set(edge.target, [...existing, edge.source]);
63
+ }
64
+ return deps;
65
+ }
66
+ exports$1.buildDependencyMap = buildDependencyMap;
67
+ exports$1.topologicalSort = topologicalSort;
68
+ }
69
+ });
70
+
71
+ // ../core/dist/chunk-FZCK5A7S.js
72
+ var require_chunk_FZCK5A7S = __commonJS({
73
+ "../core/dist/chunk-FZCK5A7S.js"(exports$1) {
74
+ var types = __require("@genfeedai/types");
75
+ function detectCycles(nodes, edges) {
76
+ const visited = /* @__PURE__ */ new Set();
77
+ const recStack = /* @__PURE__ */ new Set();
78
+ function hasCycle(nodeId) {
79
+ if (recStack.has(nodeId)) return true;
80
+ if (visited.has(nodeId)) return false;
81
+ visited.add(nodeId);
82
+ recStack.add(nodeId);
83
+ const outgoing = edges.filter((e) => e.source === nodeId);
84
+ for (const edge of outgoing) {
85
+ if (hasCycle(edge.target)) return true;
86
+ }
87
+ recStack.delete(nodeId);
88
+ return false;
89
+ }
90
+ for (const node of nodes) {
91
+ if (hasCycle(node.id)) return true;
92
+ }
93
+ return false;
94
+ }
95
+ function validateWorkflow(nodes, edges) {
96
+ const errors = [];
97
+ const warnings = [];
98
+ for (const node of nodes) {
99
+ const nodeDef = types.NODE_DEFINITIONS[node.type];
100
+ if (!nodeDef) continue;
101
+ const incomingEdges = edges.filter((e) => e.target === node.id);
102
+ for (const input of nodeDef.inputs) {
103
+ if (input.required) {
104
+ const hasConnection = incomingEdges.some((e) => e.targetHandle === input.id);
105
+ if (!hasConnection) {
106
+ errors.push({
107
+ nodeId: node.id,
108
+ message: `Missing required input: ${input.label}`,
109
+ severity: "error"
110
+ });
111
+ }
112
+ }
113
+ }
114
+ if (node.type === "download") {
115
+ const hasMediaInput = incomingEdges.some(
116
+ (e) => e.targetHandle === "image" || e.targetHandle === "video"
117
+ );
118
+ if (!hasMediaInput) {
119
+ errors.push({
120
+ nodeId: node.id,
121
+ message: "Output node requires at least one Media input (image or video)",
122
+ severity: "error"
123
+ });
124
+ }
125
+ }
126
+ }
127
+ if (detectCycles(nodes, edges)) {
128
+ errors.push({
129
+ nodeId: nodes[0]?.id ?? "unknown",
130
+ message: "Workflow contains a cycle",
131
+ severity: "error"
132
+ });
133
+ }
134
+ return {
135
+ isValid: errors.length === 0,
136
+ errors,
137
+ warnings
138
+ };
139
+ }
140
+ function getHandleType(nodeType, handleId, direction) {
141
+ const nodeDef = types.NODE_DEFINITIONS[nodeType];
142
+ if (!nodeDef) return null;
143
+ const handles = direction === "source" ? nodeDef.outputs : nodeDef.inputs;
144
+ const handle = handles.find((h) => h.id === handleId);
145
+ return handle?.type ?? null;
146
+ }
147
+ function isValidConnection(sourceNodeType, sourceHandle, targetNodeType, targetHandle) {
148
+ const sourceType = getHandleType(sourceNodeType, sourceHandle, "source");
149
+ const targetType = getHandleType(targetNodeType, targetHandle, "target");
150
+ if (!sourceType || !targetType) return false;
151
+ return types.CONNECTION_RULES[sourceType]?.includes(targetType) ?? false;
152
+ }
153
+ function getCompatibleHandles(handleType) {
154
+ return types.CONNECTION_RULES[handleType] ?? [];
155
+ }
156
+ exports$1.detectCycles = detectCycles;
157
+ exports$1.getCompatibleHandles = getCompatibleHandles;
158
+ exports$1.getHandleType = getHandleType;
159
+ exports$1.isValidConnection = isValidConnection;
160
+ exports$1.validateWorkflow = validateWorkflow;
161
+ }
162
+ });
163
+
164
+ // ../core/dist/index.js
165
+ var require_dist = __commonJS({
166
+ "../core/dist/index.js"(exports$1) {
167
+ var chunkOAAW6BNW_js = require_chunk_OAAW6BNW();
168
+ var chunkFZCK5A7S_js = require_chunk_FZCK5A7S();
169
+ var PRICING = {
170
+ // Image generation (per image)
171
+ "nano-banana": 0.039,
172
+ "nano-banana-pro": {
173
+ "1K": 0.15,
174
+ "2K": 0.15,
175
+ "4K": 0.3
176
+ },
177
+ // Legacy aliases
178
+ "imagen-4-fast": 0.039,
179
+ "imagen-4": 0.15,
180
+ // Video generation (per second)
181
+ "veo-3.1-fast": { withAudio: 0.15, withoutAudio: 0.1 },
182
+ "veo-3.1": { withAudio: 0.4, withoutAudio: 0.2 },
183
+ // Legacy aliases
184
+ "veo-3-fast": { withAudio: 0.15, withoutAudio: 0.1 },
185
+ "veo-3": { withAudio: 0.4, withoutAudio: 0.2 },
186
+ // LLM (per token, derived from $9.50/million)
187
+ llama: 95e-7,
188
+ // Luma Reframe
189
+ "luma-reframe-image": {
190
+ "photon-flash-1": 0.01,
191
+ "photon-1": 0.03
192
+ },
193
+ "luma-reframe-video": 0.06,
194
+ // per second
195
+ // Topaz Upscale (tiered by megapixels)
196
+ "topaz-image-upscale": [
197
+ { maxMP: 1, price: 0.05 },
198
+ { maxMP: 4, price: 0.08 },
199
+ { maxMP: 9, price: 0.16 },
200
+ { maxMP: 16, price: 0.27 },
201
+ { maxMP: 25, price: 0.41 },
202
+ { maxMP: Infinity, price: 0.82 }
203
+ ],
204
+ // Topaz Video (per 5 seconds based on resolution and fps)
205
+ "topaz-video-upscale": {
206
+ "720p-15": 0.014,
207
+ "720p-24": 0.022,
208
+ "720p-30": 0.027,
209
+ "720p-60": 0.054,
210
+ "1080p-15": 0.051,
211
+ "1080p-24": 0.081,
212
+ "1080p-30": 0.101,
213
+ "1080p-60": 0.203,
214
+ "4k-15": 0.187,
215
+ "4k-24": 0.299,
216
+ "4k-30": 0.373,
217
+ "4k-60": 0.747
218
+ }
219
+ };
220
+ var IMAGE_NODE_TYPES = ["imageGen", "image-gen", "ImageGenNode"];
221
+ var VIDEO_NODE_TYPES = ["videoGen", "video-gen", "VideoGenNode"];
222
+ var LUMA_NODE_TYPES = ["reframe", "lumaReframeImage", "lumaReframeVideo"];
223
+ var TOPAZ_NODE_TYPES = ["upscale", "topazImageUpscale", "topazVideoUpscale"];
224
+ var DEFAULT_VIDEO_DURATION = 8;
225
+ var ASPECT_RATIOS3 = [
226
+ "1:1",
227
+ "16:9",
228
+ "9:16",
229
+ "4:3",
230
+ "3:4",
231
+ "4:5",
232
+ "5:4",
233
+ "2:3",
234
+ "3:2",
235
+ "21:9"
236
+ ];
237
+ var VIDEO_ASPECT_RATIOS = ["16:9", "9:16"];
238
+ var RESOLUTIONS2 = ["1K", "2K", "4K"];
239
+ var VIDEO_RESOLUTIONS = ["720p", "1080p"];
240
+ var VIDEO_DURATIONS = [4, 6, 8];
241
+ var OUTPUT_FORMATS2 = ["jpg", "png", "webp"];
242
+ var LUMA_ASPECT_RATIOS2 = ["1:1", "3:4", "4:3", "9:16", "16:9", "9:21", "21:9"];
243
+ Object.defineProperty(exports$1, "buildDependencyMap", {
244
+ enumerable: true,
245
+ get: function() {
246
+ return chunkOAAW6BNW_js.buildDependencyMap;
247
+ }
248
+ });
249
+ Object.defineProperty(exports$1, "topologicalSort", {
250
+ enumerable: true,
251
+ get: function() {
252
+ return chunkOAAW6BNW_js.topologicalSort;
253
+ }
254
+ });
255
+ Object.defineProperty(exports$1, "detectCycles", {
256
+ enumerable: true,
257
+ get: function() {
258
+ return chunkFZCK5A7S_js.detectCycles;
259
+ }
260
+ });
261
+ Object.defineProperty(exports$1, "getCompatibleHandles", {
262
+ enumerable: true,
263
+ get: function() {
264
+ return chunkFZCK5A7S_js.getCompatibleHandles;
265
+ }
266
+ });
267
+ Object.defineProperty(exports$1, "getHandleType", {
268
+ enumerable: true,
269
+ get: function() {
270
+ return chunkFZCK5A7S_js.getHandleType;
271
+ }
272
+ });
273
+ Object.defineProperty(exports$1, "isValidConnection", {
274
+ enumerable: true,
275
+ get: function() {
276
+ return chunkFZCK5A7S_js.isValidConnection;
277
+ }
278
+ });
279
+ Object.defineProperty(exports$1, "validateWorkflow", {
280
+ enumerable: true,
281
+ get: function() {
282
+ return chunkFZCK5A7S_js.validateWorkflow;
283
+ }
284
+ });
285
+ exports$1.ASPECT_RATIOS = ASPECT_RATIOS3;
286
+ exports$1.DEFAULT_VIDEO_DURATION = DEFAULT_VIDEO_DURATION;
287
+ exports$1.IMAGE_NODE_TYPES = IMAGE_NODE_TYPES;
288
+ exports$1.LUMA_ASPECT_RATIOS = LUMA_ASPECT_RATIOS2;
289
+ exports$1.LUMA_NODE_TYPES = LUMA_NODE_TYPES;
290
+ exports$1.OUTPUT_FORMATS = OUTPUT_FORMATS2;
291
+ exports$1.PRICING = PRICING;
292
+ exports$1.RESOLUTIONS = RESOLUTIONS2;
293
+ exports$1.TOPAZ_NODE_TYPES = TOPAZ_NODE_TYPES;
294
+ exports$1.VIDEO_ASPECT_RATIOS = VIDEO_ASPECT_RATIOS;
295
+ exports$1.VIDEO_DURATIONS = VIDEO_DURATIONS;
296
+ exports$1.VIDEO_NODE_TYPES = VIDEO_NODE_TYPES;
297
+ exports$1.VIDEO_RESOLUTIONS = VIDEO_RESOLUTIONS;
298
+ }
299
+ });
23
300
  var NodeErrorBoundary = class extends Component {
24
301
  constructor(props) {
25
302
  super(props);
@@ -3807,6 +4084,105 @@ function AnnotationNodeComponent(props) {
3807
4084
  ] }) });
3808
4085
  }
3809
4086
  var AnnotationNode = memo(AnnotationNodeComponent);
4087
+ var B = forwardRef(({ transition: e, ...t }, r) => {
4088
+ 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" };
4089
+ return jsx("div", { ...t, style: o, "data-rcs": "clip-item", ref: r });
4090
+ });
4091
+ B.displayName = "ContainerClip";
4092
+ var W = forwardRef(({ children: e, disabled: t, portrait: r, position: o, transition: i }, m) => {
4093
+ 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 };
4094
+ 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 });
4095
+ });
4096
+ W.displayName = "ThisHandleContainer";
4097
+ 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 } });
4098
+ var F = ({ className: e = "__rcs-handle-root", disabled: t, buttonStyle: r, linesStyle: o, portrait: i, style: m, ...C }) => {
4099
+ 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 };
4100
+ 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 })] });
4101
+ };
4102
+ var $ = ((i) => (i.ARROW_LEFT = "ArrowLeft", i.ARROW_RIGHT = "ArrowRight", i.ARROW_UP = "ArrowUp", i.ARROW_DOWN = "ArrowDown", i))($ || {});
4103
+ 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 });
4104
+ var oe = (e) => {
4105
+ let t = useRef(e);
4106
+ return useEffect(() => {
4107
+ t.current = e;
4108
+ }), t.current;
4109
+ };
4110
+ var U = (e, t, r, o) => {
4111
+ let i = useRef();
4112
+ useEffect(() => {
4113
+ i.current = t;
4114
+ }, [t]), useEffect(() => {
4115
+ if (!(r && r.addEventListener)) return;
4116
+ let m = (C) => i.current && i.current(C);
4117
+ return r.addEventListener(e, m, o), () => {
4118
+ r.removeEventListener(e, m, o);
4119
+ };
4120
+ }, [e, r, o]);
4121
+ };
4122
+ var Te = typeof window < "u" && typeof window.document < "u" && typeof window.document.createElement < "u" ? useLayoutEffect : useEffect;
4123
+ var ie = (e, t) => {
4124
+ let r = useRef(), o = useCallback(() => {
4125
+ e.current && r.current && r.current.observe(e.current);
4126
+ }, [e]);
4127
+ Te(() => (r.current = new ResizeObserver(([i]) => t(i.contentRect)), o(), () => {
4128
+ r.current && r.current.disconnect();
4129
+ }), [t, o]);
4130
+ };
4131
+ var I = { capture: false, passive: true };
4132
+ var X4 = { capture: true, passive: false };
4133
+ var Me = (e) => {
4134
+ e.preventDefault(), e.currentTarget.focus();
4135
+ };
4136
+ 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) => {
4137
+ 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 }) {
4138
+ let b = p.current, A = f.current, D = j.current, { width: h, height: S, left: Pe, top: Ee } = b.getBoundingClientRect();
4139
+ if (h === 0 || S === 0) return;
4140
+ 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);
4141
+ 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);
4142
+ }, [e, y, a, t]);
4143
+ useEffect(() => {
4144
+ let { width: n, height: s } = p.current.getBoundingClientRect(), c = g === J ? d.current : g;
4145
+ l({ x: n / 100 * c, y: s / 100 * c });
4146
+ }, [e, g, a, J, l]);
4147
+ let Re = useCallback((n) => {
4148
+ n.preventDefault(), !(o || n.button !== 0) && (l({ isOffset: true, x: n.pageX, y: n.pageY }), q(true), x(true));
4149
+ }, [o, l]), v = useCallback(function(s) {
4150
+ l({ isOffset: true, x: s.pageX, y: s.pageY }), x(false);
4151
+ }, [l]), T = useCallback(() => {
4152
+ q(false), x(true);
4153
+ }, []), Se = useCallback(({ width: n, height: s }) => {
4154
+ let { width: c, height: R } = p.current.getBoundingClientRect();
4155
+ l({ x: n / 100 * d.current * c / n, y: s / 100 * d.current * R / s });
4156
+ }, [l]), Ce = useCallback((n) => {
4157
+ if (!Object.values($).includes(n.key)) return;
4158
+ n.preventDefault(), x(true);
4159
+ 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);
4160
+ l({ x: a ? c : R * S / 100, y: a ? b * S / 100 : s });
4161
+ }, [u, a, l]);
4162
+ useEffect(() => {
4163
+ fe(E ? f.current : p.current);
4164
+ }, [E]), useEffect(() => {
4165
+ let n = p.current, s = () => {
4166
+ L || T();
4167
+ };
4168
+ return r && (n.addEventListener("pointermove", v, I), n.addEventListener("pointerleave", s, I)), () => {
4169
+ n.removeEventListener("pointermove", v), n.removeEventListener("pointerleave", s);
4170
+ };
4171
+ }, [r, v, T, L]), useEffect(() => (L && !w.current && (t.addEventListener("pointermove", v, I), t.addEventListener("pointerup", T, I), w.current = true), () => {
4172
+ w.current && (t.removeEventListener("pointermove", v), t.removeEventListener("pointerup", T), w.current = false);
4173
+ }), [v, T, L, t]), useImperativeHandle(de, () => ({ rootContainer: p.current, handleContainer: f.current, setPosition(n) {
4174
+ let { width: s, height: c } = p.current.getBoundingClientRect();
4175
+ l({ x: s / 100 * n, y: c / 100 * n });
4176
+ } }), [l]), ie(p, Se), U("keydown", Ce, f.current, X4), U("click", Me, f.current, X4), U("pointerdown", Re, ue, X4);
4177
+ 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 };
4178
+ 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 })] });
4179
+ });
4180
+ se.displayName = "ReactCompareSlider";
4181
+ var ae = forwardRef(({ style: e, ...t }, r) => {
4182
+ let o = G(e);
4183
+ return jsx("img", { ref: r, ...t, style: o, "data-rcs": "image" });
4184
+ });
4185
+ ae.displayName = "ReactCompareSliderImage";
3810
4186
  function ImageCompareNodeComponent(props) {
3811
4187
  const { id, data } = props;
3812
4188
  const nodeData = data;
@@ -3841,10 +4217,10 @@ function ImageCompareNodeComponent(props) {
3841
4217
  const imageB = displayImages[1] || nodeData.imageB || null;
3842
4218
  return /* @__PURE__ */ jsx(BaseNode, { ...props, children: imageA && imageB ? /* @__PURE__ */ jsxs("div", { className: "flex-1 relative nodrag nopan nowheel min-h-[200px]", children: [
3843
4219
  /* @__PURE__ */ jsx(
3844
- ReactCompareSlider,
4220
+ se,
3845
4221
  {
3846
4222
  itemOne: /* @__PURE__ */ jsx(
3847
- ReactCompareSliderImage,
4223
+ ae,
3848
4224
  {
3849
4225
  src: imageA,
3850
4226
  alt: "Image A",
@@ -3852,7 +4228,7 @@ function ImageCompareNodeComponent(props) {
3852
4228
  }
3853
4229
  ),
3854
4230
  itemTwo: /* @__PURE__ */ jsx(
3855
- ReactCompareSliderImage,
4231
+ ae,
3856
4232
  {
3857
4233
  src: imageB,
3858
4234
  alt: "Image B",
@@ -4512,6 +4888,9 @@ function ReframeNodeComponent(props) {
4512
4888
  ] }) });
4513
4889
  }
4514
4890
  var ReframeNode = memo(ReframeNodeComponent);
4891
+
4892
+ // src/nodes/processing/ResizeNode.tsx
4893
+ var import_core = __toESM(require_dist());
4515
4894
  var MODELS2 = {
4516
4895
  image: { id: "photon-flash-1", label: "Luma Photon Flash", price: "$0.01" },
4517
4896
  video: { id: "luma-reframe", label: "Luma Reframe", price: "$0.05" }
@@ -4575,7 +4954,7 @@ function ResizeNodeComponent(props) {
4575
4954
  /* @__PURE__ */ jsx(Label, { className: "text-xs", children: "Target Aspect Ratio" }),
4576
4955
  /* @__PURE__ */ jsxs(Select, { value: nodeData.targetAspectRatio, onValueChange: handleAspectRatioChange, children: [
4577
4956
  /* @__PURE__ */ jsx(SelectTrigger, { className: "nodrag h-9 w-full", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
4578
- /* @__PURE__ */ jsx(SelectContent, { children: LUMA_ASPECT_RATIOS.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio, children: ratio }, ratio)) })
4957
+ /* @__PURE__ */ jsx(SelectContent, { children: import_core.LUMA_ASPECT_RATIOS.map((ratio) => /* @__PURE__ */ jsx(SelectItem, { value: ratio, children: ratio }, ratio)) })
4579
4958
  ] })
4580
4959
  ] }),
4581
4960
  /* @__PURE__ */ jsx(