@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.
- package/dist/canvas.js +11 -10
- package/dist/canvas.mjs +5 -4
- package/dist/{chunk-DICI5FSP.js → chunk-3TMV3K34.js} +3 -3
- package/dist/chunk-4MZ62VMF.js +37 -0
- package/dist/{chunk-EYL6J4MW.mjs → chunk-7P2JWDC7.mjs} +2 -2
- package/dist/{chunk-3PMLER6D.mjs → chunk-AOTUCJMA.mjs} +1 -1
- package/dist/{chunk-XOC5ETTX.mjs → chunk-AUZR6REQ.mjs} +1 -1
- package/dist/{chunk-DUZLPHRC.js → chunk-AXFOCPPP.js} +1 -1
- package/dist/{chunk-PVWLMJGZ.js → chunk-BMFRA6GK.js} +13 -13
- package/dist/{chunk-PFHFGSM5.mjs → chunk-E3YBVMYZ.mjs} +389 -10
- package/dist/{chunk-H3JOHAS5.js → chunk-ECD5J2BA.js} +450 -71
- package/dist/{chunk-I3GNO2SR.mjs → chunk-HCXI63ME.mjs} +1 -1
- package/dist/{chunk-HWY6IBWT.js → chunk-KDIWRSYV.js} +5 -5
- package/dist/{chunk-OZNYKFMX.js → chunk-SEV2DWKF.js} +18 -18
- package/dist/{chunk-73V6SUEO.mjs → chunk-SQK4JDYY.mjs} +1 -1
- package/dist/chunk-ZJWP5KGZ.mjs +33 -0
- package/dist/hooks.js +12 -11
- package/dist/hooks.mjs +3 -2
- package/dist/index.js +38 -37
- package/dist/index.mjs +7 -6
- package/dist/lib.js +1 -0
- package/dist/lib.mjs +1 -0
- package/dist/nodes.js +37 -36
- package/dist/nodes.mjs +4 -3
- package/dist/panels.js +6 -5
- package/dist/panels.mjs +3 -2
- package/dist/provider.js +1 -0
- package/dist/provider.mjs +1 -0
- package/dist/stores.js +6 -5
- package/dist/stores.mjs +2 -1
- package/dist/toolbar.js +9 -8
- package/dist/toolbar.mjs +3 -2
- package/dist/ui.js +1 -0
- package/dist/ui.mjs +1 -0
- package/dist/{workflowStore-ZCSVIZQF.mjs → workflowStore-7SDJC4UR.mjs} +1 -0
- package/dist/{workflowStore-32ZH5REM.js → workflowStore-LNJQ5RZG.js} +1 -0
- 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-
|
|
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-
|
|
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,
|
|
16
|
-
import { jsxs, Fragment
|
|
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
|
-
|
|
4220
|
+
se,
|
|
3845
4221
|
{
|
|
3846
4222
|
itemOne: /* @__PURE__ */ jsx(
|
|
3847
|
-
|
|
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
|
-
|
|
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(
|