@nice2dev/ui-video 1.0.30 → 1.1.6

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/index.mjs CHANGED
@@ -1,3879 +1,6 @@
1
- import { jsxs as a, jsx as e, Fragment as le } from "react/jsx-runtime";
2
- import { forwardRef as He, useContext as ye, createContext as $, memo as Te, useState as w, useEffect as re, useRef as L, useCallback as me } from "react";
3
- const he = He(
4
- ({
5
- menubar: d,
6
- toolbar: f,
7
- sidebar: l,
8
- sidebarWidth: C = 220,
9
- rightSidebar: H,
10
- rightSidebarWidth: I = 280,
11
- children: p,
12
- bottomPanel: n,
13
- bottomPanelHeight: R,
14
- statusBar: b,
15
- height: D = "100%",
16
- flush: y = !1,
17
- className: x,
18
- style: S,
19
- id: A,
20
- "data-testid": _
21
- }, O) => {
22
- const F = `nice-app-shell__sidebar${y ? " nice-app-shell__sidebar--flush" : ""}`;
23
- return /* @__PURE__ */ a(
24
- "div",
25
- {
26
- ref: O,
27
- id: A,
28
- "data-testid": _,
29
- className: `nice-app-shell${x ? ` ${x}` : ""}`,
30
- style: { height: D, ...S },
31
- children: [
32
- d != null && /* @__PURE__ */ e(
33
- "div",
34
- {
35
- className: `nice-app-shell__menubar${y ? " nice-app-shell__chrome--flush" : ""}`,
36
- children: d
37
- }
38
- ),
39
- f != null && /* @__PURE__ */ e(
40
- "div",
41
- {
42
- className: `nice-app-shell__toolbar${y ? " nice-app-shell__chrome--flush" : ""}`,
43
- children: f
44
- }
45
- ),
46
- /* @__PURE__ */ a("div", { className: "nice-app-shell__body", children: [
47
- l != null && /* @__PURE__ */ e("aside", { className: F, style: y ? void 0 : { width: C }, children: l }),
48
- /* @__PURE__ */ e("main", { className: "nice-app-shell__content", children: p }),
49
- H != null && /* @__PURE__ */ e(
50
- "aside",
51
- {
52
- className: `${F} nice-app-shell__sidebar--right`,
53
- style: y ? void 0 : { width: I },
54
- children: H
55
- }
56
- )
57
- ] }),
58
- n != null && /* @__PURE__ */ e(
59
- "div",
60
- {
61
- className: `nice-app-shell__bottom${y ? " nice-app-shell__bottom--flush" : ""}`,
62
- style: R != null ? { height: R } : void 0,
63
- children: n
64
- }
65
- ),
66
- b != null && /* @__PURE__ */ e("div", { className: "nice-app-shell__status", children: b })
67
- ]
68
- }
69
- );
70
- }
71
- );
72
- he.displayName = "NiceAppShell";
73
- const Ie = (d, f) => f, _e = $(Ie);
74
- function Re() {
75
- return { t: ye(_e) };
76
- }
77
- $({
78
- dir: "ltr",
79
- isRTL: !1,
80
- flip: (d) => d,
81
- value: (d) => d.ltr
82
- });
83
- $(null);
84
- $(null);
85
- const Me = {
86
- radius: "md",
87
- shadow: "md",
88
- fill: "solid",
89
- buttonStyle: "flat",
90
- inputStyle: "bordered",
91
- cardStyle: "elevated",
92
- badgeStyle: "solid",
93
- tabStyle: "underline",
94
- toggleStyle: "default",
95
- tooltipStyle: "dark",
96
- modalStyle: "default",
97
- tableStyle: "default",
98
- menuStyle: "default",
99
- animation: "normal",
100
- density: "normal"
101
- };
102
- $({
103
- displayStyle: "default",
104
- variantConfig: Me,
105
- setDisplayStyle: () => {
106
- }
107
- });
108
- $({});
109
- $({
110
- direction: "ltr",
111
- isRTL: !1,
112
- flip: (d) => d,
113
- flipStyle: (d, f) => ({ [d]: f })
114
- });
115
- $({
116
- permissions: {},
117
- getAccessMode: () => "full"
118
- });
119
- $(null);
120
- const $e = process.env.NODE_ENV === "development";
121
- let be = {
122
- enabled: $e,
123
- slowRenderThreshold: 16
124
- };
125
- const ve = [], pe = /* @__PURE__ */ new Map(), ge = /* @__PURE__ */ new Map();
126
- function De() {
127
- ve.length = 0, pe.clear(), ge.clear();
128
- }
129
- function Ae(d) {
130
- const f = be.slowRenderThreshold;
131
- return ve.filter((l) => l.actualDuration > f);
132
- }
133
- function X(d) {
134
- return d < 1 ? `${(d * 1e3).toFixed(0)}μs` : d < 1e3 ? `${d.toFixed(2)}ms` : `${(d / 1e3).toFixed(2)}s`;
135
- }
136
- function Ee() {
137
- const d = Array.from(pe.values()), f = Ae(), l = d.reduce((I, p) => I + p.renderCount, 0), C = d.length > 0 ? d.reduce((I, p) => I + p.avgRenderTime, 0) / d.length : 0, H = Array.from(ge.values());
138
- return { stats: d, slowRenders: f, totalRenders: l, avgRenderTime: C, marks: H };
139
- }
140
- function ze() {
141
- const d = Ee();
142
- console.group(
143
- "%c[Nice2Dev Performance Report]",
144
- "color: var(--nice-info, #6366f1); font-weight: bold; font-size: 14px"
145
- ), console.log(`Total renders: ${d.totalRenders}`), console.log(`Average render time: ${X(d.avgRenderTime)}`), console.log(`Slow renders: ${d.slowRenders.length}`), console.group("Component Stats"), console.table(
146
- d.stats.sort((f, l) => l.totalRenderTime - f.totalRenderTime).map((f) => ({
147
- Name: f.componentName,
148
- Renders: f.renderCount,
149
- "Avg Time": X(f.avgRenderTime),
150
- "Max Time": X(f.maxRenderTime),
151
- "Total Time": X(f.totalRenderTime),
152
- "Slow Renders": f.slowRenderCount
153
- }))
154
- ), console.groupEnd(), d.slowRenders.length > 0 && (console.group("Slow Renders (last 10)"), console.table(
155
- d.slowRenders.slice(-10).map((f) => ({
156
- Component: f.componentName,
157
- Phase: f.phase,
158
- Duration: X(f.actualDuration),
159
- Time: new Date(f.timestamp).toLocaleTimeString()
160
- }))
161
- ), console.groupEnd()), d.marks.length > 0 && (console.group("Custom Marks"), console.table(
162
- d.marks.filter((f) => f.duration).map((f) => ({
163
- Name: f.name,
164
- Duration: X(f.duration)
165
- }))
166
- ), console.groupEnd()), console.groupEnd();
167
- }
168
- const Pe = Te(
169
- ({ position: d = "bottom-right", defaultCollapsed: f = !0 }) => {
170
- const [l, C] = w(f), [H, I] = w([]), [p, n] = w({ used: 0, total: 0 });
171
- if (re(() => {
172
- const b = () => {
173
- const y = Array.from(pe.values());
174
- I(y.sort((S, A) => A.totalRenderTime - S.totalRenderTime).slice(0, 10));
175
- const x = window.performance;
176
- x.memory && n({
177
- used: x.memory.usedJSHeapSize / 1024 / 1024,
178
- total: x.memory.totalJSHeapSize / 1024 / 1024
179
- });
180
- };
181
- b();
182
- const D = setInterval(b, 2e3);
183
- return () => clearInterval(D);
184
- }, []), !be.enabled)
185
- return null;
186
- const R = {
187
- position: "fixed",
188
- zIndex: 99999,
189
- ...d.includes("top") ? { top: 8 } : { bottom: 8 },
190
- ...d.includes("left") ? { left: 8 } : { right: 8 }
191
- };
192
- return /* @__PURE__ */ a(
193
- "div",
194
- {
195
- style: {
196
- ...R,
197
- background: "var(--nice-overlay-85, rgba(0, 0, 0, 0.85))",
198
- color: "var(--bg-primary, #fff)",
199
- borderRadius: 8,
200
- fontSize: 11,
201
- fontFamily: "Monaco, Consolas, monospace",
202
- padding: l ? "4px 8px" : 8,
203
- maxWidth: l ? "auto" : 300,
204
- maxHeight: l ? "auto" : 400,
205
- overflow: "auto"
206
- },
207
- children: [
208
- /* @__PURE__ */ a(
209
- "div",
210
- {
211
- style: { cursor: "pointer", display: "flex", alignItems: "center", gap: 8 },
212
- onClick: () => C((b) => !b),
213
- children: [
214
- /* @__PURE__ */ e("span", { style: { color: "var(--color-success, #22c55e)" }, children: "●" }),
215
- /* @__PURE__ */ e("span", { children: "Profiler" }),
216
- p.used > 0 && /* @__PURE__ */ a(
217
- "span",
218
- {
219
- style: {
220
- color: p.used > 100 ? "var(--color-warning, #f59e0b)" : "var(--text-muted, #64748b)"
221
- },
222
- children: [
223
- p.used.toFixed(0),
224
- "MB"
225
- ]
226
- }
227
- ),
228
- /* @__PURE__ */ e("span", { style: { marginLeft: "auto", opacity: 0.5 }, children: l ? "▼" : "▲" })
229
- ]
230
- }
231
- ),
232
- !l && /* @__PURE__ */ a("div", { style: { marginTop: 8 }, children: [
233
- /* @__PURE__ */ e(
234
- "div",
235
- {
236
- style: {
237
- borderBottom: "1px solid var(--border-color, #333)",
238
- paddingBottom: 4,
239
- marginBottom: 8
240
- },
241
- children: /* @__PURE__ */ e("strong", { children: "Top Components" })
242
- }
243
- ),
244
- H.map((b) => /* @__PURE__ */ a("div", { style: { marginBottom: 4, display: "flex", gap: 8 }, children: [
245
- /* @__PURE__ */ e("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: b.componentName }),
246
- /* @__PURE__ */ e(
247
- "span",
248
- {
249
- style: {
250
- color: b.avgRenderTime > 16 ? "var(--color-warning, #f59e0b)" : "var(--color-success, #22c55e)"
251
- },
252
- children: X(b.avgRenderTime)
253
- }
254
- ),
255
- /* @__PURE__ */ a(
256
- "span",
257
- {
258
- style: { color: "var(--text-muted, #64748b)", minWidth: 30, textAlign: "right" },
259
- children: [
260
- "x",
261
- b.renderCount
262
- ]
263
- }
264
- )
265
- ] }, b.componentName)),
266
- /* @__PURE__ */ a("div", { style: { marginTop: 8, display: "flex", gap: 8 }, children: [
267
- /* @__PURE__ */ e(
268
- "button",
269
- {
270
- onClick: ze,
271
- style: {
272
- flex: 1,
273
- padding: "4px 8px",
274
- background: "var(--bg-tertiary, #333)",
275
- border: "none",
276
- borderRadius: 4,
277
- color: "var(--bg-primary, #fff)",
278
- cursor: "pointer",
279
- fontSize: 10
280
- },
281
- children: "Print Report"
282
- }
283
- ),
284
- /* @__PURE__ */ e(
285
- "button",
286
- {
287
- onClick: De,
288
- style: {
289
- flex: 1,
290
- padding: "4px 8px",
291
- background: "var(--bg-tertiary, #333)",
292
- border: "none",
293
- borderRadius: 4,
294
- color: "var(--bg-primary, #fff)",
295
- cursor: "pointer",
296
- fontSize: 10
297
- },
298
- children: "Clear"
299
- }
300
- )
301
- ] })
302
- ] })
303
- ]
304
- }
305
- );
306
- }
307
- );
308
- Pe.displayName = "ProfilerOverlay";
309
- process.env.NODE_ENV;
310
- $(null);
311
- const Ue = $({
312
- enabled: !0,
313
- active: !1,
314
- run: () => {
315
- }
316
- });
317
- function Fe() {
318
- return ye(Ue);
319
- }
320
- function Le(d, f) {
321
- if (!d)
322
- return null;
323
- if (d === !0)
324
- return f && f.length > 0 ? f : null;
325
- if (Array.isArray(d))
326
- return d.length > 0 ? d : null;
327
- const l = d.steps ?? f;
328
- return l && l.length > 0 ? l : null;
329
- }
330
- function Ve(d, f) {
331
- return d.map((l) => ({
332
- target: l.target,
333
- title: l.titleKey ? f(l.titleKey, l.title ?? "") : l.title ?? "",
334
- content: l.contentKey ? f(l.contentKey, l.content ?? "") : l.content ?? "",
335
- placement: l.placement,
336
- highlightPadding: l.highlightPadding,
337
- showArrow: l.showArrow,
338
- scrollIntoView: l.scrollIntoView,
339
- disableInteraction: l.disableInteraction
340
- }));
341
- }
342
- const Oe = ({
343
- steps: d,
344
- autoStart: f,
345
- label: l,
346
- size: C = "md",
347
- className: H,
348
- style: I,
349
- "data-testid": p
350
- }) => {
351
- const { enabled: n, run: R } = Fe(), { t: b } = Re();
352
- if (!n || !d || d.length === 0)
353
- return null;
354
- const D = l ?? b("tutorial.startAria", "Start tutorial");
355
- return /* @__PURE__ */ e(
356
- "button",
357
- {
358
- type: "button",
359
- className: `nice-tutorial-button nice-tutorial-button--${C}` + (H ? ` ${H}` : ""),
360
- style: I,
361
- "data-testid": p,
362
- "aria-label": D,
363
- title: D,
364
- onClick: () => R(Ve(d, b), { autoStart: f }),
365
- children: "?"
366
- }
367
- );
368
- }, ue = "nice-tutorial-button-styles";
369
- if (typeof document < "u" && !document.getElementById(ue)) {
370
- const d = document.createElement("style");
371
- d.id = ue, d.textContent = `
372
- .nice-tutorial-button {
373
- display: inline-flex;
374
- align-items: center;
375
- justify-content: center;
376
- border: 1px solid var(--nice-border, #cbd5e1);
377
- background: var(--nice-bg, #fff);
378
- color: var(--nice-text-secondary, #475569);
379
- border-radius: var(--nice-radius-full, 9999px);
380
- cursor: help;
381
- font-weight: 700;
382
- line-height: 1;
383
- padding: 0;
384
- transition: background var(--nice-transition, 200ms ease), color var(--nice-transition, 200ms ease), border-color var(--nice-transition, 200ms ease);
385
- }
386
- .nice-tutorial-button:hover {
387
- background: var(--nice-primary, #2563eb);
388
- border-color: var(--nice-primary, #2563eb);
389
- color: var(--nice-text-inverse, #fff);
390
- }
391
- .nice-tutorial-button:focus-visible {
392
- outline: none;
393
- box-shadow: 0 0 0 2px var(--nice-bg, #fff), 0 0 0 4px var(--nice-primary, #2563eb);
394
- }
395
- .nice-tutorial-button--sm { width: 16px; height: 16px; font-size: 11px; }
396
- .nice-tutorial-button--md { width: 20px; height: 20px; font-size: 12px; }
397
- `, document.head.appendChild(d);
398
- }
399
- $(null);
400
- $(null);
401
- $(null);
402
- const we = {
403
- space1: "4px",
404
- space2: "8px",
405
- space3: "12px",
406
- space4: "16px",
407
- space5: "20px",
408
- space6: "24px",
409
- space8: "32px"
410
- }, Ne = {
411
- fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
412
- fontSizeXs: "0.75rem",
413
- fontSizeSm: "0.8125rem",
414
- fontSizeMd: "0.875rem",
415
- fontSizeLg: "1rem",
416
- fontSizeXl: "1.125rem",
417
- fontWeightNormal: 400,
418
- fontWeightMedium: 500,
419
- fontWeightSemibold: 600,
420
- fontWeightBold: 700,
421
- lineHeight: 1.5
422
- }, ke = { fast: "120ms ease", normal: "200ms ease", slow: "300ms ease" }, xe = (d) => ({
423
- color: d,
424
- radiusSm: "4px",
425
- radiusMd: "6px",
426
- radiusLg: "8px",
427
- radiusXl: "12px",
428
- radiusFull: "9999px"
429
- }), Be = {
430
- sm: "0 1px 2px rgba(0,0,0,0.05)",
431
- md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
432
- lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
433
- xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)"
434
- }, We = {
435
- sm: "0 1px 2px rgba(0,0,0,0.3)",
436
- md: "0 4px 6px -1px rgba(0,0,0,0.4)",
437
- lg: "0 10px 15px -3px rgba(0,0,0,0.4)",
438
- xl: "0 20px 25px -5px rgba(0,0,0,0.4)"
439
- };
440
- function c(d, f, l, C, H) {
441
- return {
442
- name: d,
443
- darkMode: "light",
444
- colors: {
445
- ...f,
446
- surface: f.surface ?? l.primary,
447
- surfaceHover: f.surfaceHover ?? l.secondary
448
- },
449
- backgrounds: {
450
- ...l,
451
- elevated: l.elevated ?? l.primary,
452
- inset: l.inset ?? l.tertiary,
453
- canvas: l.canvas ?? l.primary
454
- },
455
- text: { ...C, inverse: C.inverse ?? "#ffffff" },
456
- borders: xe(H),
457
- shadows: Be,
458
- spacing: we,
459
- typography: Ne,
460
- transitions: ke
461
- };
462
- }
463
- function T(d, f, l, C, H) {
464
- return {
465
- name: d,
466
- darkMode: "dark",
467
- colors: {
468
- ...f,
469
- surface: f.surface ?? l.secondary,
470
- surfaceHover: f.surfaceHover ?? l.tertiary
471
- },
472
- backgrounds: {
473
- ...l,
474
- elevated: l.elevated ?? l.secondary,
475
- inset: l.inset ?? l.primary,
476
- canvas: l.canvas ?? l.primary
477
- },
478
- text: { ...C, inverse: C.inverse ?? "#0f172a" },
479
- borders: xe(H),
480
- shadows: We,
481
- spacing: we,
482
- typography: Ne,
483
- transitions: ke
484
- };
485
- }
486
- c(
487
- "Slate",
488
- {
489
- primary: "#64748b",
490
- primaryHover: "#475569",
491
- success: "#10b981",
492
- warning: "#f59e0b",
493
- error: "#ef4444",
494
- info: "#06b6d4"
495
- },
496
- { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
497
- { primary: "#1e293b", secondary: "#475569", muted: "#94a3b8" },
498
- "#cbd5e1"
499
- );
500
- c(
501
- "Zinc",
502
- {
503
- primary: "#71717a",
504
- primaryHover: "#52525b",
505
- success: "#22c55e",
506
- warning: "#eab308",
507
- error: "#ef4444",
508
- info: "#06b6d4"
509
- },
510
- { primary: "#fafafa", secondary: "#f4f4f5", tertiary: "#e4e4e7", hover: "#e4e4e7" },
511
- { primary: "#18181b", secondary: "#3f3f46", muted: "#a1a1aa" },
512
- "#d4d4d8"
513
- );
514
- c(
515
- "Stone",
516
- {
517
- primary: "#78716c",
518
- primaryHover: "#57534e",
519
- success: "#16a34a",
520
- warning: "#ca8a04",
521
- error: "#dc2626",
522
- info: "#0891b2"
523
- },
524
- { primary: "#fafaf9", secondary: "#f5f5f4", tertiary: "#e7e5e4", hover: "#e7e5e4" },
525
- { primary: "#1c1917", secondary: "#44403c", muted: "#a8a29e" },
526
- "#d6d3d1"
527
- );
528
- c(
529
- "Cool Gray",
530
- {
531
- primary: "#6b7280",
532
- primaryHover: "#4b5563",
533
- success: "#10b981",
534
- warning: "#f59e0b",
535
- error: "#ef4444",
536
- info: "#3b82f6"
537
- },
538
- { primary: "#f9fafb", secondary: "#f3f4f6", tertiary: "#e5e7eb", hover: "#e5e7eb" },
539
- { primary: "#111827", secondary: "#374151", muted: "#9ca3af" },
540
- "#d1d5db"
541
- );
542
- c(
543
- "Warm Gray",
544
- {
545
- primary: "#7c7568",
546
- primaryHover: "#5c564c",
547
- success: "#4d7c0f",
548
- warning: "#a16207",
549
- error: "#b91c1c",
550
- info: "#0e7490"
551
- },
552
- { primary: "#faf9f7", secondary: "#f5f4f0", tertiary: "#e8e6e1", hover: "#e8e6e1" },
553
- { primary: "#1f1d19", secondary: "#4a463d", muted: "#a09888" },
554
- "#d4d0c8"
555
- );
556
- c(
557
- "Silver",
558
- {
559
- primary: "#94a3b8",
560
- primaryHover: "#64748b",
561
- success: "#10b981",
562
- warning: "#f59e0b",
563
- error: "#ef4444",
564
- info: "#38bdf8"
565
- },
566
- { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
567
- { primary: "#334155", secondary: "#64748b", muted: "#94a3b8" },
568
- "#cbd5e1"
569
- );
570
- c(
571
- "Charcoal",
572
- {
573
- primary: "#374151",
574
- primaryHover: "#1f2937",
575
- success: "#059669",
576
- warning: "#d97706",
577
- error: "#dc2626",
578
- info: "#0284c7"
579
- },
580
- { primary: "#f9fafb", secondary: "#f3f4f6", tertiary: "#e5e7eb", hover: "#e5e7eb" },
581
- { primary: "#111827", secondary: "#374151", muted: "#6b7280" },
582
- "#d1d5db"
583
- );
584
- c(
585
- "Ivory",
586
- {
587
- primary: "#92876d",
588
- primaryHover: "#7a6f55",
589
- success: "#4d7c0f",
590
- warning: "#a16207",
591
- error: "#b91c1c",
592
- info: "#0e7490"
593
- },
594
- { primary: "#fffef7", secondary: "#faf6eb", tertiary: "#f0ead6", hover: "#f0ead6" },
595
- { primary: "#2b2517", secondary: "#5c5340", muted: "#9c9280" },
596
- "#ddd8c4"
597
- );
598
- c(
599
- "Rose",
600
- {
601
- primary: "#e11d48",
602
- primaryHover: "#be123c",
603
- success: "#16a34a",
604
- warning: "#ea580c",
605
- error: "#dc2626",
606
- info: "#0891b2"
607
- },
608
- { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
609
- { primary: "#4c0519", secondary: "#881337", muted: "#f43f5e" },
610
- "#fda4af"
611
- );
612
- c(
613
- "Emerald",
614
- {
615
- primary: "#059669",
616
- primaryHover: "#047857",
617
- success: "#16a34a",
618
- warning: "#d97706",
619
- error: "#dc2626",
620
- info: "#0891b2"
621
- },
622
- { primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
623
- { primary: "#064e3b", secondary: "#065f46", muted: "#34d399" },
624
- "#6ee7b7"
625
- );
626
- c(
627
- "Amber",
628
- {
629
- primary: "#d97706",
630
- primaryHover: "#b45309",
631
- success: "#16a34a",
632
- warning: "#ca8a04",
633
- error: "#dc2626",
634
- info: "#0284c7"
635
- },
636
- { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
637
- { primary: "#451a03", secondary: "#78350f", muted: "#f59e0b" },
638
- "#fcd34d"
639
- );
640
- c(
641
- "Violet",
642
- {
643
- primary: "#7c3aed",
644
- primaryHover: "#6d28d9",
645
- success: "#10b981",
646
- warning: "#f59e0b",
647
- error: "#ef4444",
648
- info: "#06b6d4"
649
- },
650
- { primary: "#f5f3ff", secondary: "#ede9fe", tertiary: "#ddd6fe", hover: "#ede9fe" },
651
- { primary: "#2e1065", secondary: "#4c1d95", muted: "#a78bfa" },
652
- "#c4b5fd"
653
- );
654
- c(
655
- "Teal",
656
- {
657
- primary: "#0d9488",
658
- primaryHover: "#0f766e",
659
- success: "#16a34a",
660
- warning: "#d97706",
661
- error: "#dc2626",
662
- info: "#0284c7"
663
- },
664
- { primary: "#f0fdfa", secondary: "#ccfbf1", tertiary: "#99f6e4", hover: "#ccfbf1" },
665
- { primary: "#134e4a", secondary: "#115e59", muted: "#2dd4bf" },
666
- "#5eead4"
667
- );
668
- c(
669
- "Indigo",
670
- {
671
- primary: "#4f46e5",
672
- primaryHover: "#4338ca",
673
- success: "#10b981",
674
- warning: "#f59e0b",
675
- error: "#ef4444",
676
- info: "#06b6d4"
677
- },
678
- { primary: "#eef2ff", secondary: "#e0e7ff", tertiary: "#c7d2fe", hover: "#e0e7ff" },
679
- { primary: "#1e1b4b", secondary: "#312e81", muted: "#818cf8" },
680
- "#a5b4fc"
681
- );
682
- c(
683
- "Cyan",
684
- {
685
- primary: "#0891b2",
686
- primaryHover: "#0e7490",
687
- success: "#10b981",
688
- warning: "#f59e0b",
689
- error: "#ef4444",
690
- info: "#0284c7"
691
- },
692
- { primary: "#ecfeff", secondary: "#cffafe", tertiary: "#a5f3fc", hover: "#cffafe" },
693
- { primary: "#164e63", secondary: "#155e75", muted: "#22d3ee" },
694
- "#67e8f9"
695
- );
696
- c(
697
- "Lime",
698
- {
699
- primary: "#65a30d",
700
- primaryHover: "#4d7c0f",
701
- success: "#16a34a",
702
- warning: "#ca8a04",
703
- error: "#dc2626",
704
- info: "#0891b2"
705
- },
706
- { primary: "#f7fee7", secondary: "#ecfccb", tertiary: "#d9f99d", hover: "#ecfccb" },
707
- { primary: "#1a2e05", secondary: "#365314", muted: "#84cc16" },
708
- "#bef264"
709
- );
710
- c(
711
- "Pink",
712
- {
713
- primary: "#db2777",
714
- primaryHover: "#be185d",
715
- success: "#10b981",
716
- warning: "#f59e0b",
717
- error: "#dc2626",
718
- info: "#06b6d4"
719
- },
720
- { primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
721
- { primary: "#500724", secondary: "#831843", muted: "#f472b6" },
722
- "#f9a8d4"
723
- );
724
- c(
725
- "Orange",
726
- {
727
- primary: "#ea580c",
728
- primaryHover: "#c2410c",
729
- success: "#16a34a",
730
- warning: "#ca8a04",
731
- error: "#dc2626",
732
- info: "#0891b2"
733
- },
734
- { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
735
- { primary: "#431407", secondary: "#7c2d12", muted: "#fb923c" },
736
- "#fdba74"
737
- );
738
- c(
739
- "Fuchsia",
740
- {
741
- primary: "#c026d3",
742
- primaryHover: "#a21caf",
743
- success: "#10b981",
744
- warning: "#eab308",
745
- error: "#ef4444",
746
- info: "#06b6d4"
747
- },
748
- { primary: "#fdf4ff", secondary: "#fae8ff", tertiary: "#f5d0fe", hover: "#fae8ff" },
749
- { primary: "#4a044e", secondary: "#701a75", muted: "#d946ef" },
750
- "#e879f9"
751
- );
752
- c(
753
- "Sky",
754
- {
755
- primary: "#0284c7",
756
- primaryHover: "#0369a1",
757
- success: "#10b981",
758
- warning: "#f59e0b",
759
- error: "#ef4444",
760
- info: "#06b6d4"
761
- },
762
- { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
763
- { primary: "#0c4a6e", secondary: "#075985", muted: "#38bdf8" },
764
- "#7dd3fc"
765
- );
766
- c(
767
- "Ruby",
768
- {
769
- primary: "#be123c",
770
- primaryHover: "#9f1239",
771
- success: "#059669",
772
- warning: "#d97706",
773
- error: "#dc2626",
774
- info: "#0284c7"
775
- },
776
- { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
777
- { primary: "#4c0519", secondary: "#881337", muted: "#fb7185" },
778
- "#fda4af"
779
- );
780
- c(
781
- "Coral",
782
- {
783
- primary: "#f97316",
784
- primaryHover: "#ea580c",
785
- success: "#10b981",
786
- warning: "#eab308",
787
- error: "#ef4444",
788
- info: "#06b6d4"
789
- },
790
- { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
791
- { primary: "#431407", secondary: "#9a3412", muted: "#fb923c" },
792
- "#fdba74"
793
- );
794
- T(
795
- "Midnight",
796
- {
797
- primary: "#818cf8",
798
- primaryHover: "#6366f1",
799
- success: "#34d399",
800
- warning: "#fbbf24",
801
- error: "#f87171",
802
- info: "#22d3ee"
803
- },
804
- { primary: "#020617", secondary: "#0f172a", tertiary: "#1e293b", hover: "#1e293b" },
805
- { primary: "#f1f5f9", secondary: "#94a3b8", muted: "#475569" },
806
- "#1e293b"
807
- );
808
- T(
809
- "Obsidian",
810
- {
811
- primary: "#a78bfa",
812
- primaryHover: "#8b5cf6",
813
- success: "#4ade80",
814
- warning: "#facc15",
815
- error: "#fb7185",
816
- info: "#38bdf8"
817
- },
818
- { primary: "#09090b", secondary: "#18181b", tertiary: "#27272a", hover: "#27272a" },
819
- { primary: "#fafafa", secondary: "#a1a1aa", muted: "#52525b" },
820
- "#3f3f46"
821
- );
822
- T(
823
- "Eclipse",
824
- {
825
- primary: "#c084fc",
826
- primaryHover: "#a855f7",
827
- success: "#34d399",
828
- warning: "#fbbf24",
829
- error: "#f87171",
830
- info: "#67e8f9"
831
- },
832
- { primary: "#0c0a1d", secondary: "#1a1533", tertiary: "#2a2248", hover: "#2a2248" },
833
- { primary: "#f5f3ff", secondary: "#a78bfa", muted: "#6d5eac" },
834
- "#3b3266"
835
- );
836
- T(
837
- "Onyx",
838
- {
839
- primary: "#60a5fa",
840
- primaryHover: "#3b82f6",
841
- success: "#4ade80",
842
- warning: "#fbbf24",
843
- error: "#f87171",
844
- info: "#22d3ee"
845
- },
846
- { primary: "#000000", secondary: "#0a0a0a", tertiary: "#171717", hover: "#171717" },
847
- { primary: "#ffffff", secondary: "#a3a3a3", muted: "#525252" },
848
- "#262626"
849
- );
850
- T(
851
- "Carbon",
852
- {
853
- primary: "#38bdf8",
854
- primaryHover: "#0ea5e9",
855
- success: "#4ade80",
856
- warning: "#facc15",
857
- error: "#f87171",
858
- info: "#67e8f9"
859
- },
860
- { primary: "#161616", secondary: "#262626", tertiary: "#393939", hover: "#393939" },
861
- { primary: "#f4f4f4", secondary: "#c6c6c6", muted: "#6f6f6f" },
862
- "#525252"
863
- );
864
- T(
865
- "Cosmos",
866
- {
867
- primary: "#6366f1",
868
- primaryHover: "#4f46e5",
869
- success: "#34d399",
870
- warning: "#fbbf24",
871
- error: "#f87171",
872
- info: "#22d3ee"
873
- },
874
- { primary: "#030712", secondary: "#111827", tertiary: "#1f2937", hover: "#1f2937" },
875
- { primary: "#e5e7eb", secondary: "#9ca3af", muted: "#4b5563" },
876
- "#374151"
877
- );
878
- T(
879
- "Nebula",
880
- {
881
- primary: "#e879f9",
882
- primaryHover: "#d946ef",
883
- success: "#4ade80",
884
- warning: "#fbbf24",
885
- error: "#fb7185",
886
- info: "#67e8f9"
887
- },
888
- { primary: "#0d0117", secondary: "#1a0533", tertiary: "#2d0a52", hover: "#2d0a52" },
889
- { primary: "#fae8ff", secondary: "#d8b4fe", muted: "#7c3aed" },
890
- "#581c87"
891
- );
892
- T(
893
- "Abyss",
894
- {
895
- primary: "#22d3ee",
896
- primaryHover: "#06b6d4",
897
- success: "#34d399",
898
- warning: "#fbbf24",
899
- error: "#f87171",
900
- info: "#38bdf8"
901
- },
902
- { primary: "#001219", secondary: "#002a3a", tertiary: "#003e54", hover: "#003e54" },
903
- { primary: "#e0f2fe", secondary: "#7dd3fc", muted: "#0369a1" },
904
- "#075985"
905
- );
906
- T(
907
- "Shadow",
908
- {
909
- primary: "#a3a3a3",
910
- primaryHover: "#737373",
911
- success: "#4ade80",
912
- warning: "#facc15",
913
- error: "#f87171",
914
- info: "#38bdf8"
915
- },
916
- { primary: "#171717", secondary: "#1f1f1f", tertiary: "#2a2a2a", hover: "#2a2a2a" },
917
- { primary: "#e5e5e5", secondary: "#a3a3a3", muted: "#525252" },
918
- "#404040"
919
- );
920
- T(
921
- "Emerald Dark",
922
- {
923
- primary: "#34d399",
924
- primaryHover: "#10b981",
925
- success: "#4ade80",
926
- warning: "#fbbf24",
927
- error: "#f87171",
928
- info: "#22d3ee"
929
- },
930
- { primary: "#022c22", secondary: "#064e3b", tertiary: "#065f46", hover: "#065f46" },
931
- { primary: "#ecfdf5", secondary: "#6ee7b7", muted: "#047857" },
932
- "#047857"
933
- );
934
- c(
935
- "Forest",
936
- {
937
- primary: "#166534",
938
- primaryHover: "#14532d",
939
- success: "#22c55e",
940
- warning: "#ca8a04",
941
- error: "#dc2626",
942
- info: "#0891b2"
943
- },
944
- { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
945
- { primary: "#052e16", secondary: "#166534", muted: "#4ade80" },
946
- "#86efac"
947
- );
948
- c(
949
- "Ocean",
950
- {
951
- primary: "#0369a1",
952
- primaryHover: "#075985",
953
- success: "#059669",
954
- warning: "#d97706",
955
- error: "#dc2626",
956
- info: "#0284c7"
957
- },
958
- { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
959
- { primary: "#0c4a6e", secondary: "#0369a1", muted: "#38bdf8" },
960
- "#7dd3fc"
961
- );
962
- c(
963
- "Desert",
964
- {
965
- primary: "#b45309",
966
- primaryHover: "#92400e",
967
- success: "#4d7c0f",
968
- warning: "#a16207",
969
- error: "#b91c1c",
970
- info: "#0e7490"
971
- },
972
- { primary: "#fefce8", secondary: "#fef9c3", tertiary: "#fef08a", hover: "#fef9c3" },
973
- { primary: "#422006", secondary: "#713f12", muted: "#ca8a04" },
974
- "#fde047"
975
- );
976
- c(
977
- "Sunset",
978
- {
979
- primary: "#ea580c",
980
- primaryHover: "#c2410c",
981
- success: "#16a34a",
982
- warning: "#d97706",
983
- error: "#dc2626",
984
- info: "#0891b2"
985
- },
986
- { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
987
- { primary: "#431407", secondary: "#9a3412", muted: "#f97316" },
988
- "#fdba74"
989
- );
990
- c(
991
- "Aurora",
992
- {
993
- primary: "#0d9488",
994
- primaryHover: "#0f766e",
995
- success: "#22c55e",
996
- warning: "#eab308",
997
- error: "#ef4444",
998
- info: "#06b6d4"
999
- },
1000
- { primary: "#f0fdfa", secondary: "#ccfbf1", tertiary: "#99f6e4", hover: "#ccfbf1" },
1001
- { primary: "#134e4a", secondary: "#115e59", muted: "#2dd4bf" },
1002
- "#5eead4"
1003
- );
1004
- c(
1005
- "Lavender",
1006
- {
1007
- primary: "#7e22ce",
1008
- primaryHover: "#6b21a8",
1009
- success: "#16a34a",
1010
- warning: "#d97706",
1011
- error: "#dc2626",
1012
- info: "#0891b2"
1013
- },
1014
- { primary: "#faf5ff", secondary: "#f3e8ff", tertiary: "#e9d5ff", hover: "#f3e8ff" },
1015
- { primary: "#3b0764", secondary: "#581c87", muted: "#a855f7" },
1016
- "#d8b4fe"
1017
- );
1018
- c(
1019
- "Autumn",
1020
- {
1021
- primary: "#c2410c",
1022
- primaryHover: "#9a3412",
1023
- success: "#4d7c0f",
1024
- warning: "#a16207",
1025
- error: "#b91c1c",
1026
- info: "#0e7490"
1027
- },
1028
- { primary: "#fef2f2", secondary: "#fee2e2", tertiary: "#fecaca", hover: "#fee2e2" },
1029
- { primary: "#450a0a", secondary: "#7f1d1d", muted: "#f87171" },
1030
- "#fca5a5"
1031
- );
1032
- c(
1033
- "Spring",
1034
- {
1035
- primary: "#16a34a",
1036
- primaryHover: "#15803d",
1037
- success: "#22c55e",
1038
- warning: "#eab308",
1039
- error: "#ef4444",
1040
- info: "#06b6d4"
1041
- },
1042
- { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
1043
- { primary: "#14532d", secondary: "#166534", muted: "#4ade80" },
1044
- "#86efac"
1045
- );
1046
- c(
1047
- "Arctic",
1048
- {
1049
- primary: "#0ea5e9",
1050
- primaryHover: "#0284c7",
1051
- success: "#10b981",
1052
- warning: "#f59e0b",
1053
- error: "#ef4444",
1054
- info: "#06b6d4"
1055
- },
1056
- { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
1057
- { primary: "#0c4a6e", secondary: "#0369a1", muted: "#7dd3fc" },
1058
- "#bae6fd"
1059
- );
1060
- c(
1061
- "Tropical",
1062
- {
1063
- primary: "#0d9488",
1064
- primaryHover: "#0f766e",
1065
- success: "#16a34a",
1066
- warning: "#f59e0b",
1067
- error: "#ef4444",
1068
- info: "#06b6d4"
1069
- },
1070
- { primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
1071
- { primary: "#064e3b", secondary: "#065f46", muted: "#6ee7b7" },
1072
- "#a7f3d0"
1073
- );
1074
- c(
1075
- "Pastel Rose",
1076
- {
1077
- primary: "#f472b6",
1078
- primaryHover: "#ec4899",
1079
- success: "#4ade80",
1080
- warning: "#fcd34d",
1081
- error: "#fb7185",
1082
- info: "#67e8f9"
1083
- },
1084
- { primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
1085
- { primary: "#831843", secondary: "#9d174d", muted: "#f9a8d4" },
1086
- "#f9a8d4"
1087
- );
1088
- c(
1089
- "Pastel Sky",
1090
- {
1091
- primary: "#38bdf8",
1092
- primaryHover: "#0ea5e9",
1093
- success: "#4ade80",
1094
- warning: "#fcd34d",
1095
- error: "#fb7185",
1096
- info: "#67e8f9"
1097
- },
1098
- { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
1099
- { primary: "#075985", secondary: "#0369a1", muted: "#7dd3fc" },
1100
- "#bae6fd"
1101
- );
1102
- c(
1103
- "Pastel Mint",
1104
- {
1105
- primary: "#34d399",
1106
- primaryHover: "#10b981",
1107
- success: "#4ade80",
1108
- warning: "#fcd34d",
1109
- error: "#fb7185",
1110
- info: "#67e8f9"
1111
- },
1112
- { primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
1113
- { primary: "#065f46", secondary: "#047857", muted: "#6ee7b7" },
1114
- "#a7f3d0"
1115
- );
1116
- c(
1117
- "Pastel Peach",
1118
- {
1119
- primary: "#fb923c",
1120
- primaryHover: "#f97316",
1121
- success: "#4ade80",
1122
- warning: "#fcd34d",
1123
- error: "#fb7185",
1124
- info: "#67e8f9"
1125
- },
1126
- { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
1127
- { primary: "#7c2d12", secondary: "#9a3412", muted: "#fdba74" },
1128
- "#fed7aa"
1129
- );
1130
- c(
1131
- "Pastel Lavender",
1132
- {
1133
- primary: "#a78bfa",
1134
- primaryHover: "#8b5cf6",
1135
- success: "#4ade80",
1136
- warning: "#fcd34d",
1137
- error: "#fb7185",
1138
- info: "#67e8f9"
1139
- },
1140
- { primary: "#f5f3ff", secondary: "#ede9fe", tertiary: "#ddd6fe", hover: "#ede9fe" },
1141
- { primary: "#4c1d95", secondary: "#5b21b6", muted: "#c4b5fd" },
1142
- "#ddd6fe"
1143
- );
1144
- c(
1145
- "Pastel Lemon",
1146
- {
1147
- primary: "#facc15",
1148
- primaryHover: "#eab308",
1149
- success: "#4ade80",
1150
- warning: "#fcd34d",
1151
- error: "#fb7185",
1152
- info: "#67e8f9"
1153
- },
1154
- { primary: "#fefce8", secondary: "#fef9c3", tertiary: "#fef08a", hover: "#fef9c3" },
1155
- { primary: "#713f12", secondary: "#854d0e", muted: "#fde047" },
1156
- "#fef08a"
1157
- );
1158
- c(
1159
- "Pastel Sage",
1160
- {
1161
- primary: "#86efac",
1162
- primaryHover: "#4ade80",
1163
- success: "#22c55e",
1164
- warning: "#fcd34d",
1165
- error: "#fb7185",
1166
- info: "#67e8f9"
1167
- },
1168
- { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
1169
- { primary: "#166534", secondary: "#15803d", muted: "#86efac" },
1170
- "#bbf7d0"
1171
- );
1172
- c(
1173
- "Pastel Coral",
1174
- {
1175
- primary: "#fb7185",
1176
- primaryHover: "#f43f5e",
1177
- success: "#4ade80",
1178
- warning: "#fcd34d",
1179
- error: "#ef4444",
1180
- info: "#67e8f9"
1181
- },
1182
- { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
1183
- { primary: "#881337", secondary: "#9f1239", muted: "#fda4af" },
1184
- "#fecdd3"
1185
- );
1186
- c(
1187
- "Banking",
1188
- {
1189
- primary: "#1e3a5f",
1190
- primaryHover: "#152c4a",
1191
- success: "#059669",
1192
- warning: "#d97706",
1193
- error: "#dc2626",
1194
- info: "#0891b2"
1195
- },
1196
- { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
1197
- { primary: "#0f172a", secondary: "#334155", muted: "#94a3b8" },
1198
- "#cbd5e1"
1199
- );
1200
- c(
1201
- "Healthcare",
1202
- {
1203
- primary: "#0891b2",
1204
- primaryHover: "#0e7490",
1205
- success: "#059669",
1206
- warning: "#d97706",
1207
- error: "#dc2626",
1208
- info: "#0284c7"
1209
- },
1210
- { primary: "#f0fdfa", secondary: "#e0f7fa", tertiary: "#b2ebf2", hover: "#e0f7fa" },
1211
- { primary: "#134e4a", secondary: "#1a6b6a", muted: "#80cbc4" },
1212
- "#b2dfdb"
1213
- );
1214
- c(
1215
- "Legal",
1216
- {
1217
- primary: "#1e293b",
1218
- primaryHover: "#0f172a",
1219
- success: "#059669",
1220
- warning: "#d97706",
1221
- error: "#dc2626",
1222
- info: "#0284c7"
1223
- },
1224
- { primary: "#fafaf9", secondary: "#f5f5f4", tertiary: "#e7e5e4", hover: "#e7e5e4" },
1225
- { primary: "#0f172a", secondary: "#44403c", muted: "#a8a29e" },
1226
- "#d6d3d1"
1227
- );
1228
- c(
1229
- "Tech Startup",
1230
- {
1231
- primary: "#7c3aed",
1232
- primaryHover: "#6d28d9",
1233
- success: "#10b981",
1234
- warning: "#f59e0b",
1235
- error: "#ef4444",
1236
- info: "#06b6d4"
1237
- },
1238
- { primary: "#faf5ff", secondary: "#f3e8ff", tertiary: "#e9d5ff", hover: "#f3e8ff" },
1239
- { primary: "#1e1b4b", secondary: "#4c1d95", muted: "#a78bfa" },
1240
- "#c4b5fd"
1241
- );
1242
- c(
1243
- "Enterprise",
1244
- {
1245
- primary: "#1e40af",
1246
- primaryHover: "#1e3a8a",
1247
- success: "#059669",
1248
- warning: "#d97706",
1249
- error: "#dc2626",
1250
- info: "#0891b2"
1251
- },
1252
- { primary: "#eff6ff", secondary: "#dbeafe", tertiary: "#bfdbfe", hover: "#dbeafe" },
1253
- { primary: "#1e3a5f", secondary: "#1e40af", muted: "#60a5fa" },
1254
- "#93c5fd"
1255
- );
1256
- c(
1257
- "Government",
1258
- {
1259
- primary: "#1d4ed8",
1260
- primaryHover: "#1e40af",
1261
- success: "#059669",
1262
- warning: "#d97706",
1263
- error: "#dc2626",
1264
- info: "#0891b2"
1265
- },
1266
- { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
1267
- { primary: "#0f172a", secondary: "#1e293b", muted: "#64748b" },
1268
- "#cbd5e1"
1269
- );
1270
- c(
1271
- "Education",
1272
- {
1273
- primary: "#059669",
1274
- primaryHover: "#047857",
1275
- success: "#16a34a",
1276
- warning: "#f59e0b",
1277
- error: "#ef4444",
1278
- info: "#0891b2"
1279
- },
1280
- { primary: "#f0fdf9", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
1281
- { primary: "#064e3b", secondary: "#065f46", muted: "#6ee7b7" },
1282
- "#a7f3d0"
1283
- );
1284
- c(
1285
- "Real Estate",
1286
- {
1287
- primary: "#92400e",
1288
- primaryHover: "#78350f",
1289
- success: "#059669",
1290
- warning: "#b45309",
1291
- error: "#dc2626",
1292
- info: "#0891b2"
1293
- },
1294
- { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
1295
- { primary: "#422006", secondary: "#713f12", muted: "#d97706" },
1296
- "#fcd34d"
1297
- );
1298
- c(
1299
- "Nord",
1300
- {
1301
- primary: "#5e81ac",
1302
- primaryHover: "#4c6b90",
1303
- success: "#a3be8c",
1304
- warning: "#ebcb8b",
1305
- error: "#bf616a",
1306
- info: "#88c0d0"
1307
- },
1308
- { primary: "#eceff4", secondary: "#e5e9f0", tertiary: "#d8dee9", hover: "#d8dee9" },
1309
- { primary: "#2e3440", secondary: "#3b4252", muted: "#4c566a" },
1310
- "#d8dee9"
1311
- );
1312
- T(
1313
- "Dracula",
1314
- {
1315
- primary: "#bd93f9",
1316
- primaryHover: "#9d79d9",
1317
- success: "#50fa7b",
1318
- warning: "#f1fa8c",
1319
- error: "#ff5555",
1320
- info: "#8be9fd"
1321
- },
1322
- { primary: "#282a36", secondary: "#343746", tertiary: "#44475a", hover: "#44475a" },
1323
- { primary: "#f8f8f2", secondary: "#c0c0c0", muted: "#6272a4" },
1324
- "#44475a"
1325
- );
1326
- c(
1327
- "Solarized Light",
1328
- {
1329
- primary: "#268bd2",
1330
- primaryHover: "#1a6da0",
1331
- success: "#859900",
1332
- warning: "#b58900",
1333
- error: "#dc322f",
1334
- info: "#2aa198"
1335
- },
1336
- { primary: "#fdf6e3", secondary: "#eee8d5", tertiary: "#e0dbc7", hover: "#eee8d5" },
1337
- { primary: "#073642", secondary: "#586e75", muted: "#93a1a1" },
1338
- "#eee8d5"
1339
- );
1340
- T(
1341
- "Solarized Dark",
1342
- {
1343
- primary: "#268bd2",
1344
- primaryHover: "#3d98db",
1345
- success: "#859900",
1346
- warning: "#b58900",
1347
- error: "#dc322f",
1348
- info: "#2aa198"
1349
- },
1350
- { primary: "#002b36", secondary: "#073642", tertiary: "#0a4858", hover: "#073642" },
1351
- { primary: "#eee8d5", secondary: "#93a1a1", muted: "#586e75" },
1352
- "#073642"
1353
- );
1354
- T(
1355
- "Monokai",
1356
- {
1357
- primary: "#66d9ef",
1358
- primaryHover: "#45c0d6",
1359
- success: "#a6e22e",
1360
- warning: "#e6db74",
1361
- error: "#f92672",
1362
- info: "#66d9ef"
1363
- },
1364
- { primary: "#272822", secondary: "#34352e", tertiary: "#3e3d32", hover: "#3e3d32" },
1365
- { primary: "#f8f8f2", secondary: "#cfcfc2", muted: "#75715e" },
1366
- "#3e3d32"
1367
- );
1368
- T(
1369
- "One Dark",
1370
- {
1371
- primary: "#61afef",
1372
- primaryHover: "#4b9ee0",
1373
- success: "#98c379",
1374
- warning: "#e5c07b",
1375
- error: "#e06c75",
1376
- info: "#56b6c2"
1377
- },
1378
- { primary: "#282c34", secondary: "#2c313a", tertiary: "#353b45", hover: "#353b45" },
1379
- { primary: "#abb2bf", secondary: "#828997", muted: "#545862" },
1380
- "#3e4452"
1381
- );
1382
- T(
1383
- "Synthwave",
1384
- {
1385
- primary: "#ff7edb",
1386
- primaryHover: "#e660c2",
1387
- success: "#72f1b8",
1388
- warning: "#fede5d",
1389
- error: "#fe4450",
1390
- info: "#36f9f6"
1391
- },
1392
- { primary: "#241b2f", secondary: "#2d2140", tertiary: "#362a50", hover: "#362a50" },
1393
- { primary: "#f0e4fc", secondary: "#b4a0cc", muted: "#6c5c84" },
1394
- "#4a3866"
1395
- );
1396
- c(
1397
- "Vaporwave",
1398
- {
1399
- primary: "#ff71ce",
1400
- primaryHover: "#e655b5",
1401
- success: "#78dcca",
1402
- warning: "#ffb86c",
1403
- error: "#ff5555",
1404
- info: "#76e8fc"
1405
- },
1406
- { primary: "#fce4f7", secondary: "#e8d0f4", tertiary: "#d4bcf0", hover: "#e8d0f4" },
1407
- { primary: "#4a1a4e", secondary: "#7b3f7d", muted: "#c080c0" },
1408
- "#d8a8e8"
1409
- );
1410
- T(
1411
- "Terminal Green",
1412
- {
1413
- primary: "#00ff41",
1414
- primaryHover: "#00cc34",
1415
- success: "#00ff41",
1416
- warning: "#ffff00",
1417
- error: "#ff0000",
1418
- info: "#00ffff"
1419
- },
1420
- { primary: "#0a0a0a", secondary: "#0d1a0d", tertiary: "#1a2e1a", hover: "#1a2e1a" },
1421
- { primary: "#00ff41", secondary: "#00cc33", muted: "#008822" },
1422
- "#003300"
1423
- );
1424
- c(
1425
- "Sepia",
1426
- {
1427
- primary: "#8b6914",
1428
- primaryHover: "#704f10",
1429
- success: "#6b8e23",
1430
- warning: "#cd853f",
1431
- error: "#b22222",
1432
- info: "#5f9ea0"
1433
- },
1434
- { primary: "#faf0e6", secondary: "#f5e6d3", tertiary: "#eddcc7", hover: "#f5e6d3" },
1435
- { primary: "#3e2723", secondary: "#5d4037", muted: "#a1887f" },
1436
- "#d7ccc8"
1437
- );
1438
- c(
1439
- "Vintage",
1440
- {
1441
- primary: "#8d6e63",
1442
- primaryHover: "#6d4c41",
1443
- success: "#66bb6a",
1444
- warning: "#ffb300",
1445
- error: "#e53935",
1446
- info: "#29b6f6"
1447
- },
1448
- { primary: "#efebe9", secondary: "#d7ccc8", tertiary: "#bcaaa4", hover: "#d7ccc8" },
1449
- { primary: "#3e2723", secondary: "#5d4037", muted: "#a1887f" },
1450
- "#bcaaa4"
1451
- );
1452
- T(
1453
- "Cyberpunk",
1454
- {
1455
- primary: "#00f0ff",
1456
- primaryHover: "#00c8d4",
1457
- success: "#39ff14",
1458
- warning: "#ffff00",
1459
- error: "#ff003c",
1460
- info: "#bf00ff"
1461
- },
1462
- { primary: "#0a0e17", secondary: "#131824", tertiary: "#1c2333", hover: "#1c2333" },
1463
- { primary: "#e0fbfc", secondary: "#80d4dd", muted: "#3a6b72" },
1464
- "#1c3a44"
1465
- );
1466
- T(
1467
- "Neon",
1468
- {
1469
- primary: "#ff00ff",
1470
- primaryHover: "#cc00cc",
1471
- success: "#00ff00",
1472
- warning: "#ffff00",
1473
- error: "#ff0000",
1474
- info: "#00ffff"
1475
- },
1476
- { primary: "#0d0d0d", secondary: "#1a1a1a", tertiary: "#262626", hover: "#262626" },
1477
- { primary: "#ffffff", secondary: "#cccccc", muted: "#666666" },
1478
- "#333333"
1479
- );
1480
- T(
1481
- "Retrowave",
1482
- {
1483
- primary: "#f77fbe",
1484
- primaryHover: "#e462a3",
1485
- success: "#72f1b8",
1486
- warning: "#ffe261",
1487
- error: "#ff4444",
1488
- info: "#79e8fb"
1489
- },
1490
- { primary: "#1b0a2e", secondary: "#261440", tertiary: "#321e52", hover: "#321e52" },
1491
- { primary: "#ffe6f7", secondary: "#c9a0c9", muted: "#6b4c7a" },
1492
- "#4a2d66"
1493
- );
1494
- c(
1495
- "Christmas",
1496
- {
1497
- primary: "#c41e3a",
1498
- primaryHover: "#a01830",
1499
- success: "#228b22",
1500
- warning: "#ffd700",
1501
- error: "#dc2626",
1502
- info: "#0891b2"
1503
- },
1504
- { primary: "#fef2f2", secondary: "#fde8e8", tertiary: "#f8d0d0", hover: "#fde8e8" },
1505
- { primary: "#3b0a0a", secondary: "#7f1d1d", muted: "#dc6868" },
1506
- "#e8a0a0"
1507
- );
1508
- T(
1509
- "Halloween",
1510
- {
1511
- primary: "#ff6600",
1512
- primaryHover: "#e05500",
1513
- success: "#4ade80",
1514
- warning: "#fbbf24",
1515
- error: "#ff0000",
1516
- info: "#9333ea"
1517
- },
1518
- { primary: "#1a0a00", secondary: "#2d1500", tertiary: "#402000", hover: "#402000" },
1519
- { primary: "#ffedd5", secondary: "#fdba74", muted: "#9a5c28" },
1520
- "#5c3400"
1521
- );
1522
- c(
1523
- "Valentine",
1524
- {
1525
- primary: "#e11d48",
1526
- primaryHover: "#be123c",
1527
- success: "#10b981",
1528
- warning: "#f59e0b",
1529
- error: "#dc2626",
1530
- info: "#ec4899"
1531
- },
1532
- { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
1533
- { primary: "#4c0519", secondary: "#881337", muted: "#f9a8d4" },
1534
- "#fda4af"
1535
- );
1536
- c(
1537
- "Easter",
1538
- {
1539
- primary: "#a78bfa",
1540
- primaryHover: "#8b5cf6",
1541
- success: "#4ade80",
1542
- warning: "#fcd34d",
1543
- error: "#fb7185",
1544
- info: "#67e8f9"
1545
- },
1546
- { primary: "#fef9ff", secondary: "#f3e8ff", tertiary: "#e8d5ff", hover: "#f3e8ff" },
1547
- { primary: "#581c87", secondary: "#6d28d9", muted: "#c4b5fd" },
1548
- "#ddd6fe"
1549
- );
1550
- c(
1551
- "Summer Beach",
1552
- {
1553
- primary: "#0ea5e9",
1554
- primaryHover: "#0284c7",
1555
- success: "#10b981",
1556
- warning: "#f59e0b",
1557
- error: "#ef4444",
1558
- info: "#06b6d4"
1559
- },
1560
- { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
1561
- { primary: "#0c4a6e", secondary: "#0369a1", muted: "#7dd3fc" },
1562
- "#fcd34d"
1563
- );
1564
- c(
1565
- "Winter Frost",
1566
- {
1567
- primary: "#3b82f6",
1568
- primaryHover: "#2563eb",
1569
- success: "#10b981",
1570
- warning: "#f59e0b",
1571
- error: "#ef4444",
1572
- info: "#06b6d4"
1573
- },
1574
- { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
1575
- { primary: "#1e3a5f", secondary: "#1e40af", muted: "#93c5fd" },
1576
- "#bfdbfe"
1577
- );
1578
- c(
1579
- "Cherry Blossom",
1580
- {
1581
- primary: "#ec4899",
1582
- primaryHover: "#db2777",
1583
- success: "#10b981",
1584
- warning: "#f59e0b",
1585
- error: "#ef4444",
1586
- info: "#06b6d4"
1587
- },
1588
- { primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
1589
- { primary: "#831843", secondary: "#9d174d", muted: "#f9a8d4" },
1590
- "#fbcfe8"
1591
- );
1592
- c(
1593
- "Harvest",
1594
- {
1595
- primary: "#b45309",
1596
- primaryHover: "#92400e",
1597
- success: "#4d7c0f",
1598
- warning: "#a16207",
1599
- error: "#b91c1c",
1600
- info: "#0e7490"
1601
- },
1602
- { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
1603
- { primary: "#451a03", secondary: "#78350f", muted: "#d97706" },
1604
- "#fcd34d"
1605
- );
1606
- c(
1607
- "Japanese Zen",
1608
- {
1609
- primary: "#6b7280",
1610
- primaryHover: "#4b5563",
1611
- success: "#6b8e23",
1612
- warning: "#d4a017",
1613
- error: "#c0392b",
1614
- info: "#5f9ea0"
1615
- },
1616
- { primary: "#faf9f6", secondary: "#f0ece3", tertiary: "#e6e0d4", hover: "#f0ece3" },
1617
- { primary: "#2c2c2c", secondary: "#5c5c5c", muted: "#a0998a" },
1618
- "#d5cec0"
1619
- );
1620
- c(
1621
- "Moroccan",
1622
- {
1623
- primary: "#c2410c",
1624
- primaryHover: "#9a3412",
1625
- success: "#15803d",
1626
- warning: "#ca8a04",
1627
- error: "#b91c1c",
1628
- info: "#0e7490"
1629
- },
1630
- { primary: "#fffbf0", secondary: "#fef3e0", tertiary: "#fde6c4", hover: "#fef3e0" },
1631
- { primary: "#3a1a00", secondary: "#7c2d12", muted: "#d97706" },
1632
- "#f5d0a0"
1633
- );
1634
- c(
1635
- "Scandinavian",
1636
- {
1637
- primary: "#4b5563",
1638
- primaryHover: "#374151",
1639
- success: "#059669",
1640
- warning: "#d97706",
1641
- error: "#dc2626",
1642
- info: "#0891b2"
1643
- },
1644
- { primary: "#ffffff", secondary: "#f9fafb", tertiary: "#f3f4f6", hover: "#f3f4f6" },
1645
- { primary: "#111827", secondary: "#374151", muted: "#9ca3af" },
1646
- "#e5e7eb"
1647
- );
1648
- c(
1649
- "Mediterranean",
1650
- {
1651
- primary: "#1e40af",
1652
- primaryHover: "#1e3a8a",
1653
- success: "#059669",
1654
- warning: "#d97706",
1655
- error: "#dc2626",
1656
- info: "#0891b2"
1657
- },
1658
- { primary: "#eff6ff", secondary: "#dbeafe", tertiary: "#bfdbfe", hover: "#dbeafe" },
1659
- { primary: "#1e3a5f", secondary: "#2563eb", muted: "#93c5fd" },
1660
- "#bfdbfe"
1661
- );
1662
- c(
1663
- "Chinese New Year",
1664
- {
1665
- primary: "#dc2626",
1666
- primaryHover: "#b91c1c",
1667
- success: "#16a34a",
1668
- warning: "#d4a017",
1669
- error: "#ef4444",
1670
- info: "#0891b2"
1671
- },
1672
- { primary: "#fef2f2", secondary: "#fee2e2", tertiary: "#fecaca", hover: "#fee2e2" },
1673
- { primary: "#450a0a", secondary: "#991b1b", muted: "#f87171" },
1674
- "#fca5a5"
1675
- );
1676
- c(
1677
- "Indian Festive",
1678
- {
1679
- primary: "#d97706",
1680
- primaryHover: "#b45309",
1681
- success: "#16a34a",
1682
- warning: "#ca8a04",
1683
- error: "#dc2626",
1684
- info: "#7c3aed"
1685
- },
1686
- { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
1687
- { primary: "#451a03", secondary: "#92400e", muted: "#f59e0b" },
1688
- "#fcd34d"
1689
- );
1690
- c(
1691
- "Brazilian Carnival",
1692
- {
1693
- primary: "#16a34a",
1694
- primaryHover: "#15803d",
1695
- success: "#22c55e",
1696
- warning: "#facc15",
1697
- error: "#ef4444",
1698
- info: "#0ea5e9"
1699
- },
1700
- { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
1701
- { primary: "#052e16", secondary: "#166534", muted: "#4ade80" },
1702
- "#86efac"
1703
- );
1704
- c(
1705
- "African Earth",
1706
- {
1707
- primary: "#92400e",
1708
- primaryHover: "#78350f",
1709
- success: "#4d7c0f",
1710
- warning: "#a16207",
1711
- error: "#b91c1c",
1712
- info: "#0e7490"
1713
- },
1714
- { primary: "#faf5f0", secondary: "#f0e6d6", tertiary: "#e6d5bb", hover: "#f0e6d6" },
1715
- { primary: "#2b1a0e", secondary: "#5c3d1e", muted: "#a08060" },
1716
- "#d4b896"
1717
- );
1718
- T(
1719
- "High Contrast Dark",
1720
- {
1721
- primary: "#ffff00",
1722
- primaryHover: "#cccc00",
1723
- success: "#00ff00",
1724
- warning: "#ff8c00",
1725
- error: "#ff0000",
1726
- info: "#00ffff"
1727
- },
1728
- { primary: "#000000", secondary: "#1a1a1a", tertiary: "#333333", hover: "#333333" },
1729
- { primary: "#ffffff", secondary: "#ffffff", muted: "#cccccc" },
1730
- "#ffffff"
1731
- );
1732
- c(
1733
- "Monochrome",
1734
- {
1735
- primary: "#404040",
1736
- primaryHover: "#262626",
1737
- success: "#4d7c0f",
1738
- warning: "#a16207",
1739
- error: "#b91c1c",
1740
- info: "#0e7490"
1741
- },
1742
- { primary: "#fafafa", secondary: "#f0f0f0", tertiary: "#e0e0e0", hover: "#e0e0e0" },
1743
- { primary: "#1a1a1a", secondary: "#404040", muted: "#808080" },
1744
- "#c0c0c0"
1745
- );
1746
- c(
1747
- "Enhanced Contrast",
1748
- {
1749
- primary: "#0050b3",
1750
- primaryHover: "#003d8c",
1751
- success: "#006400",
1752
- warning: "#cc7000",
1753
- error: "#cc0000",
1754
- info: "#006680"
1755
- },
1756
- { primary: "#ffffff", secondary: "#f5f5f5", tertiary: "#ebebeb", hover: "#ebebeb" },
1757
- { primary: "#000000", secondary: "#1a1a1a", muted: "#595959" },
1758
- "#8c8c8c"
1759
- );
1760
- c(
1761
- "Minimalist",
1762
- {
1763
- primary: "#18181b",
1764
- primaryHover: "#27272a",
1765
- success: "#22c55e",
1766
- warning: "#eab308",
1767
- error: "#ef4444",
1768
- info: "#3b82f6"
1769
- },
1770
- { primary: "#ffffff", secondary: "#fafafa", tertiary: "#f5f5f5", hover: "#f5f5f5" },
1771
- { primary: "#0a0a0a", secondary: "#404040", muted: "#a3a3a3" },
1772
- "#e5e5e5"
1773
- );
1774
- T(
1775
- "Warm Dark",
1776
- {
1777
- primary: "#f59e0b",
1778
- primaryHover: "#d97706",
1779
- success: "#10b981",
1780
- warning: "#fbbf24",
1781
- error: "#f87171",
1782
- info: "#38bdf8"
1783
- },
1784
- { primary: "#1c1917", secondary: "#292524", tertiary: "#44403c", hover: "#44403c" },
1785
- { primary: "#fafaf9", secondary: "#d6d3d1", muted: "#78716c" },
1786
- "#57534e"
1787
- );
1788
- T(
1789
- "Soft Dark",
1790
- {
1791
- primary: "#a78bfa",
1792
- primaryHover: "#8b5cf6",
1793
- success: "#34d399",
1794
- warning: "#fcd34d",
1795
- error: "#fb7185",
1796
- info: "#67e8f9"
1797
- },
1798
- { primary: "#1e1e2e", secondary: "#262637", tertiary: "#313147", hover: "#313147" },
1799
- { primary: "#e8e8f0", secondary: "#a0a0b8", muted: "#5c5c74" },
1800
- "#3e3e58"
1801
- );
1802
- c(
1803
- "Coffee",
1804
- {
1805
- primary: "#6f4e37",
1806
- primaryHover: "#5c3d28",
1807
- success: "#4d7c0f",
1808
- warning: "#a16207",
1809
- error: "#b91c1c",
1810
- info: "#0e7490"
1811
- },
1812
- { primary: "#faf6f1", secondary: "#f0e8dc", tertiary: "#e6d8c6", hover: "#f0e8dc" },
1813
- { primary: "#2c1a0e", secondary: "#5c3d28", muted: "#a08868" },
1814
- "#d4c4a8"
1815
- );
1816
- c(
1817
- "Wine",
1818
- {
1819
- primary: "#7f1d1d",
1820
- primaryHover: "#641717",
1821
- success: "#059669",
1822
- warning: "#d97706",
1823
- error: "#dc2626",
1824
- info: "#0891b2"
1825
- },
1826
- { primary: "#fef2f2", secondary: "#fde8e8", tertiary: "#f8d0d0", hover: "#fde8e8" },
1827
- { primary: "#3b0a0a", secondary: "#7f1d1d", muted: "#dc6868" },
1828
- "#e8a0a0"
1829
- );
1830
- $(null);
1831
- $(null);
1832
- const Ke = {
1833
- id: crypto.randomUUID(),
1834
- name: "Untitled Project",
1835
- resolution: { width: 1920, height: 1080, label: "1080p" },
1836
- frameRate: 30,
1837
- duration: 0,
1838
- tracks: [
1839
- {
1840
- id: "1",
1841
- type: "video",
1842
- name: "Video 1",
1843
- items: [],
1844
- muted: !1,
1845
- locked: !1,
1846
- visible: !0
1847
- },
1848
- {
1849
- id: "2",
1850
- type: "audio",
1851
- name: "Audio 1",
1852
- items: [],
1853
- muted: !1,
1854
- locked: !1,
1855
- visible: !0
1856
- }
1857
- ],
1858
- assets: [],
1859
- settings: {
1860
- backgroundColor: "var(--nice-text, #000000)",
1861
- audio: { sampleRate: 48e3, channels: 2, bitrate: 320 },
1862
- video: { codec: "h264", bitrate: 8e3, profile: "high" }
1863
- }
1864
- }, Ge = [
1865
- { type: "blur", name: "Blur", icon: "🔵" },
1866
- { type: "brightness", name: "Brightness", icon: "☀️" },
1867
- { type: "contrast", name: "Contrast", icon: "◐" },
1868
- { type: "saturation", name: "Saturation", icon: "🎨" },
1869
- { type: "grayscale", name: "Grayscale", icon: "⬛" },
1870
- { type: "sepia", name: "Sepia", icon: "🟤" },
1871
- { type: "chromaKey", name: "Chroma Key", icon: "🟢" },
1872
- { type: "crop", name: "Crop", icon: "✂️" },
1873
- { type: "zoom", name: "Zoom", icon: "🔍" }
1874
- ], je = [
1875
- { type: "fade", name: "Fade" },
1876
- { type: "dissolve", name: "Dissolve" },
1877
- { type: "wipe", name: "Wipe" },
1878
- { type: "slide", name: "Slide" },
1879
- { type: "zoom", name: "Zoom" },
1880
- { type: "push", name: "Push" }
1881
- ], Ze = [
1882
- {
1883
- target: ".nice-video-editor",
1884
- titleKey: "tutorial.videoEditorPro.intro.title",
1885
- title: "Video editor",
1886
- contentKey: "tutorial.videoEditorPro.intro.content",
1887
- content: "Add media to the timeline, arrange and trim clips, apply effects and transitions, then configure and run the export.",
1888
- placement: "auto"
1889
- }
1890
- ], Xe = ({
1891
- project: d,
1892
- onProjectChange: f,
1893
- onExport: l,
1894
- onAssetUpload: C,
1895
- className: H = "",
1896
- tutorial: I
1897
- }) => {
1898
- const [p, n] = w(d || Ke), [R, b] = w(
1899
- "timeline"
1900
- ), [D, y] = w(null), [x, S] = w(null), [A, _] = w(0), [O, F] = w(!1), [M, Z] = w(1), [K, P] = w(!0), [U, B] = w(null), ie = L(null), te = L(null), z = L(null);
1901
- re(() => {
1902
- d && n(d);
1903
- }, [d]), re(() => () => {
1904
- z.current && clearInterval(z.current);
1905
- }, []);
1906
- const k = me(
1907
- (t) => {
1908
- const o = { ...p, ...t };
1909
- n(o), f == null || f(o);
1910
- },
1911
- [p, f]
1912
- ), N = async (t) => {
1913
- const o = [];
1914
- for (const i of Array.from(t)) {
1915
- const u = i.type.startsWith("video/") ? "video" : i.type.startsWith("audio/") ? "audio" : "image";
1916
- let h;
1917
- C ? h = await C(i) : h = {
1918
- id: crypto.randomUUID(),
1919
- type: u,
1920
- name: i.name,
1921
- url: URL.createObjectURL(i),
1922
- size: i.size
1923
- }, o.push(h);
1924
- }
1925
- k({ assets: [...p.assets, ...o] });
1926
- }, W = (t) => {
1927
- const o = {
1928
- id: crypto.randomUUID(),
1929
- type: t,
1930
- name: `${t.charAt(0).toUpperCase() + t.slice(1)} ${p.tracks.filter((i) => i.type === t).length + 1}`,
1931
- items: [],
1932
- muted: !1,
1933
- locked: !1,
1934
- visible: !0
1935
- };
1936
- k({ tracks: [...p.tracks, o] });
1937
- }, q = (t) => {
1938
- k({ tracks: p.tracks.filter((o) => o.id !== t) }), D === t && y(null);
1939
- }, G = (t) => {
1940
- k({
1941
- tracks: p.tracks.map((o) => o.id === t ? { ...o, muted: !o.muted } : o)
1942
- });
1943
- }, ee = (t) => {
1944
- k({
1945
- tracks: p.tracks.map((o) => o.id === t ? { ...o, locked: !o.locked } : o)
1946
- });
1947
- }, E = (t, o) => {
1948
- const i = p.tracks.find((g) => g.id === t);
1949
- if (!i || i.locked)
1950
- return;
1951
- const u = i.items[i.items.length - 1], h = u ? u.startTime + u.duration : 0, v = {
1952
- id: crypto.randomUUID(),
1953
- assetId: o.id,
1954
- type: o.type,
1955
- startTime: h,
1956
- duration: o.duration || 5,
1957
- offset: 0,
1958
- properties: {
1959
- x: 0,
1960
- y: 0,
1961
- opacity: 1,
1962
- scale: 1,
1963
- volume: 1
1964
- },
1965
- effects: [],
1966
- transitions: []
1967
- };
1968
- k({
1969
- tracks: p.tracks.map(
1970
- (g) => g.id === t ? { ...g, items: [...g.items, v] } : g
1971
- )
1972
- });
1973
- }, Y = (t, o, i) => {
1974
- const u = {
1975
- id: crypto.randomUUID(),
1976
- type: i,
1977
- name: i.charAt(0).toUpperCase() + i.slice(1),
1978
- parameters: ne(i)
1979
- };
1980
- k({
1981
- tracks: p.tracks.map(
1982
- (h) => h.id === t ? {
1983
- ...h,
1984
- items: h.items.map(
1985
- (v) => v.id === o ? { ...v, effects: [...v.effects, u] } : v
1986
- )
1987
- } : h
1988
- )
1989
- });
1990
- }, V = (t, o, i, u) => {
1991
- const h = {
1992
- id: crypto.randomUUID(),
1993
- type: i,
1994
- duration: 0.5,
1995
- position: u
1996
- };
1997
- k({
1998
- tracks: p.tracks.map(
1999
- (v) => v.id === t ? {
2000
- ...v,
2001
- items: v.items.map(
2002
- (g) => g.id === o ? { ...g, transitions: [...g.transitions, h] } : g
2003
- )
2004
- } : v
2005
- )
2006
- });
2007
- }, ne = (t) => {
2008
- switch (t) {
2009
- case "blur":
2010
- return { radius: 5 };
2011
- case "brightness":
2012
- return { value: 100 };
2013
- case "contrast":
2014
- return { value: 100 };
2015
- case "saturation":
2016
- return { value: 100 };
2017
- case "grayscale":
2018
- return { amount: 100 };
2019
- case "sepia":
2020
- return { amount: 100 };
2021
- case "chromaKey":
2022
- return { color: "var(--nice-success, #00ff00)", threshold: 40 };
2023
- case "crop":
2024
- return { top: 0, right: 0, bottom: 0, left: 0 };
2025
- case "zoom":
2026
- return { scale: 1, x: 0, y: 0 };
2027
- default:
2028
- return {};
2029
- }
2030
- }, se = () => {
2031
- O ? (z.current && clearInterval(z.current), F(!1)) : (z.current = setInterval(() => {
2032
- _((t) => {
2033
- const o = Math.max(
2034
- ...p.tracks.flatMap((i) => i.items.map((u) => u.startTime + u.duration)),
2035
- 0
2036
- );
2037
- return t >= o ? (clearInterval(z.current), F(!1), 0) : t + 1 / p.frameRate;
2038
- });
2039
- }, 1e3 / p.frameRate), F(!0));
2040
- }, J = (t) => {
2041
- _(Math.max(0, t));
2042
- }, Q = async () => {
2043
- if (l) {
2044
- B(0);
2045
- try {
2046
- const t = setInterval(() => {
2047
- B((o) => o !== null && o < 90 ? o + Math.random() * 10 : o);
2048
- }, 500);
2049
- await l(p, p.settings.video.codec), clearInterval(t), B(100), setTimeout(() => B(null), 2e3);
2050
- } catch (t) {
2051
- B(null), console.error("Export failed:", t);
2052
- }
2053
- }
2054
- }, ae = (t) => {
2055
- const o = Math.floor(t / 60), i = Math.floor(t % 60), u = Math.floor(t % 1 * p.frameRate);
2056
- return `${o.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}:${u.toString().padStart(2, "0")}`;
2057
- }, j = () => {
2058
- for (const t of p.tracks) {
2059
- const o = t.items.find((i) => i.id === x);
2060
- if (o)
2061
- return { track: t, item: o };
2062
- }
2063
- return null;
2064
- }, oe = /* @__PURE__ */ a("header", { className: "video-editor__header", children: [
2065
- /* @__PURE__ */ a("div", { className: "header__project-info", children: [
2066
- /* @__PURE__ */ e(
2067
- "input",
2068
- {
2069
- type: "text",
2070
- value: p.name,
2071
- onChange: (t) => k({ name: t.target.value }),
2072
- className: "project-name-input"
2073
- }
2074
- ),
2075
- /* @__PURE__ */ a("span", { className: "project-settings", children: [
2076
- p.resolution.width,
2077
- "x",
2078
- p.resolution.height,
2079
- " • ",
2080
- p.frameRate,
2081
- "fps"
2082
- ] })
2083
- ] }),
2084
- /* @__PURE__ */ e("div", { className: "header__tabs", children: ["timeline", "effects", "transitions", "export"].map((t) => /* @__PURE__ */ e(
2085
- "button",
2086
- {
2087
- className: `tab-button ${R === t ? "tab-button--active" : ""}`,
2088
- onClick: () => b(t),
2089
- children: t.charAt(0).toUpperCase() + t.slice(1)
2090
- },
2091
- t
2092
- )) }),
2093
- /* @__PURE__ */ e("div", { className: "header__actions", children: /* @__PURE__ */ e(
2094
- "button",
2095
- {
2096
- className: "action-button action-button--primary",
2097
- onClick: Q,
2098
- disabled: U !== null,
2099
- children: U !== null ? `Exporting ${Math.round(U)}%` : "Export"
2100
- }
2101
- ) })
2102
- ] }), ce = x && R !== "export" ? (() => {
2103
- const t = j();
2104
- if (!t)
2105
- return null;
2106
- const { track: o, item: i } = t;
2107
- return /* @__PURE__ */ a("div", { className: "item-inspector", children: [
2108
- /* @__PURE__ */ e("h4", { children: "Item Properties" }),
2109
- /* @__PURE__ */ a("div", { className: "inspector-section", children: [
2110
- /* @__PURE__ */ a("label", { children: [
2111
- "Start Time",
2112
- /* @__PURE__ */ e(
2113
- "input",
2114
- {
2115
- type: "number",
2116
- step: "0.1",
2117
- value: i.startTime,
2118
- onChange: (u) => {
2119
- const h = parseFloat(u.target.value);
2120
- k({
2121
- tracks: p.tracks.map(
2122
- (v) => v.id === o.id ? {
2123
- ...v,
2124
- items: v.items.map(
2125
- (g) => g.id === i.id ? { ...g, startTime: h } : g
2126
- )
2127
- } : v
2128
- )
2129
- });
2130
- }
2131
- }
2132
- )
2133
- ] }),
2134
- /* @__PURE__ */ a("label", { children: [
2135
- "Duration",
2136
- /* @__PURE__ */ e(
2137
- "input",
2138
- {
2139
- type: "number",
2140
- step: "0.1",
2141
- value: i.duration,
2142
- onChange: (u) => {
2143
- const h = parseFloat(u.target.value);
2144
- k({
2145
- tracks: p.tracks.map(
2146
- (v) => v.id === o.id ? {
2147
- ...v,
2148
- items: v.items.map(
2149
- (g) => g.id === i.id ? { ...g, duration: h } : g
2150
- )
2151
- } : v
2152
- )
2153
- });
2154
- }
2155
- }
2156
- )
2157
- ] }),
2158
- /* @__PURE__ */ a("label", { children: [
2159
- "Opacity",
2160
- /* @__PURE__ */ e(
2161
- "input",
2162
- {
2163
- type: "range",
2164
- min: "0",
2165
- max: "1",
2166
- step: "0.1",
2167
- value: i.properties.opacity ?? 1,
2168
- onChange: (u) => {
2169
- const h = parseFloat(u.target.value);
2170
- k({
2171
- tracks: p.tracks.map(
2172
- (v) => v.id === o.id ? {
2173
- ...v,
2174
- items: v.items.map(
2175
- (g) => g.id === i.id ? {
2176
- ...g,
2177
- properties: { ...g.properties, opacity: h }
2178
- } : g
2179
- )
2180
- } : v
2181
- )
2182
- });
2183
- }
2184
- }
2185
- )
2186
- ] })
2187
- ] }),
2188
- /* @__PURE__ */ a("h4", { children: [
2189
- "Effects (",
2190
- i.effects.length,
2191
- ")"
2192
- ] }),
2193
- /* @__PURE__ */ e("div", { className: "effects-list", children: i.effects.map((u) => /* @__PURE__ */ e("div", { className: "effect-badge", children: u.name }, u.id)) })
2194
- ] });
2195
- })() : null, r = K ? /* @__PURE__ */ a("aside", { className: "video-editor__asset-library", children: [
2196
- /* @__PURE__ */ a("div", { className: "asset-library__header", children: [
2197
- /* @__PURE__ */ e("h3", { children: "Assets" }),
2198
- /* @__PURE__ */ e("button", { className: "close-button", onClick: () => P(!1), children: "×" })
2199
- ] }),
2200
- /* @__PURE__ */ e("div", { className: "asset-library__upload", children: /* @__PURE__ */ a("label", { className: "upload-zone", children: [
2201
- /* @__PURE__ */ e(
2202
- "input",
2203
- {
2204
- type: "file",
2205
- multiple: !0,
2206
- accept: "video/*,audio/*,image/*",
2207
- onChange: (t) => t.target.files && N(t.target.files),
2208
- hidden: !0
2209
- }
2210
- ),
2211
- /* @__PURE__ */ e("span", { className: "upload-icon", children: "+" }),
2212
- /* @__PURE__ */ e("span", { children: "Drop files or click to upload" })
2213
- ] }) }),
2214
- /* @__PURE__ */ e("div", { className: "asset-library__list", children: p.assets.map((t) => /* @__PURE__ */ a(
2215
- "div",
2216
- {
2217
- className: "asset-item",
2218
- draggable: !0,
2219
- onDragStart: (o) => o.dataTransfer.setData("assetId", t.id),
2220
- children: [
2221
- /* @__PURE__ */ e("div", { className: "asset-thumbnail", children: t.thumbnail ? /* @__PURE__ */ e("img", { src: t.thumbnail, alt: t.name }) : /* @__PURE__ */ e("span", { className: "asset-type-icon", children: t.type === "video" ? "🎬" : t.type === "audio" ? "🎵" : "🖼️" }) }),
2222
- /* @__PURE__ */ a("div", { className: "asset-info", children: [
2223
- /* @__PURE__ */ e("span", { className: "asset-name", children: t.name }),
2224
- /* @__PURE__ */ a("span", { className: "asset-meta", children: [
2225
- (t.size / 1024 / 1024).toFixed(1),
2226
- "MB"
2227
- ] })
2228
- ] })
2229
- ]
2230
- },
2231
- t.id
2232
- )) })
2233
- ] }) : void 0, s = /* @__PURE__ */ e("div", { className: "video-editor__preview-area", children: /* @__PURE__ */ a("div", { className: "preview-container", children: [
2234
- /* @__PURE__ */ a(
2235
- "div",
2236
- {
2237
- className: "preview-canvas",
2238
- style: { aspectRatio: `${p.resolution.width}/${p.resolution.height}` },
2239
- children: [
2240
- /* @__PURE__ */ e("video", { ref: te, className: "preview-video" }),
2241
- /* @__PURE__ */ e("div", { className: "preview-overlay", children: !K && /* @__PURE__ */ e("button", { className: "toggle-library-button", onClick: () => P(!0), children: "📁" }) })
2242
- ]
2243
- }
2244
- ),
2245
- /* @__PURE__ */ a("div", { className: "playback-controls", children: [
2246
- /* @__PURE__ */ e("button", { onClick: () => J(0), children: "⏮️" }),
2247
- /* @__PURE__ */ e("button", { onClick: () => J(A - 1 / p.frameRate), children: "⏪" }),
2248
- /* @__PURE__ */ e("button", { onClick: se, className: "play-button", children: O ? "⏸️" : "▶️" }),
2249
- /* @__PURE__ */ e("button", { onClick: () => J(A + 1 / p.frameRate), children: "⏩" }),
2250
- /* @__PURE__ */ e("span", { className: "time-display", children: ae(A) })
2251
- ] })
2252
- ] }) }), m = /* @__PURE__ */ a("div", { className: "video-editor__panel", children: [
2253
- R === "timeline" && /* @__PURE__ */ a("div", { className: "timeline-panel", children: [
2254
- /* @__PURE__ */ a("div", { className: "timeline-toolbar", children: [
2255
- /* @__PURE__ */ a("div", { className: "track-buttons", children: [
2256
- /* @__PURE__ */ e("button", { onClick: () => W("video"), children: "+ Video Track" }),
2257
- /* @__PURE__ */ e("button", { onClick: () => W("audio"), children: "+ Audio Track" }),
2258
- /* @__PURE__ */ e("button", { onClick: () => W("text"), children: "+ Text Track" })
2259
- ] }),
2260
- /* @__PURE__ */ a("div", { className: "zoom-controls", children: [
2261
- /* @__PURE__ */ e("button", { onClick: () => Z(Math.max(0.25, M - 0.25)), children: "-" }),
2262
- /* @__PURE__ */ a("span", { children: [
2263
- Math.round(M * 100),
2264
- "%"
2265
- ] }),
2266
- /* @__PURE__ */ e("button", { onClick: () => Z(Math.min(4, M + 0.25)), children: "+" })
2267
- ] })
2268
- ] }),
2269
- /* @__PURE__ */ a("div", { className: "timeline-container", ref: ie, children: [
2270
- /* @__PURE__ */ e("div", { className: "timeline-ruler", children: Array.from({ length: Math.ceil(30 / M) }).map((t, o) => /* @__PURE__ */ e("div", { className: "ruler-mark", style: { left: `${o * 50 * M}px` }, children: ae(o) }, o)) }),
2271
- /* @__PURE__ */ e("div", { className: "timeline-playhead", style: { left: `${A * 50 * M}px` } }),
2272
- /* @__PURE__ */ e("div", { className: "timeline-tracks", children: p.tracks.map((t) => /* @__PURE__ */ a(
2273
- "div",
2274
- {
2275
- className: `timeline-track ${D === t.id ? "timeline-track--selected" : ""} ${t.locked ? "timeline-track--locked" : ""}`,
2276
- onClick: () => y(t.id),
2277
- onDrop: (o) => {
2278
- o.preventDefault();
2279
- const i = o.dataTransfer.getData("assetId"), u = p.assets.find((h) => h.id === i);
2280
- u && E(t.id, u);
2281
- },
2282
- onDragOver: (o) => o.preventDefault(),
2283
- children: [
2284
- /* @__PURE__ */ a("div", { className: "track-header", children: [
2285
- /* @__PURE__ */ e("span", { className: "track-name", children: t.name }),
2286
- /* @__PURE__ */ a("div", { className: "track-controls", children: [
2287
- /* @__PURE__ */ e(
2288
- "button",
2289
- {
2290
- className: t.muted ? "active" : "",
2291
- onClick: (o) => {
2292
- o.stopPropagation(), G(t.id);
2293
- },
2294
- children: t.muted ? "🔇" : "🔊"
2295
- }
2296
- ),
2297
- /* @__PURE__ */ e(
2298
- "button",
2299
- {
2300
- className: t.locked ? "active" : "",
2301
- onClick: (o) => {
2302
- o.stopPropagation(), ee(t.id);
2303
- },
2304
- children: t.locked ? "🔒" : "🔓"
2305
- }
2306
- ),
2307
- /* @__PURE__ */ e(
2308
- "button",
2309
- {
2310
- onClick: (o) => {
2311
- o.stopPropagation(), q(t.id);
2312
- },
2313
- children: "🗑️"
2314
- }
2315
- )
2316
- ] })
2317
- ] }),
2318
- /* @__PURE__ */ e("div", { className: "track-items", children: t.items.map((o) => {
2319
- const i = p.assets.find((u) => u.id === o.assetId);
2320
- return /* @__PURE__ */ a(
2321
- "div",
2322
- {
2323
- className: `track-item track-item--${o.type} ${x === o.id ? "track-item--selected" : ""}`,
2324
- style: {
2325
- left: `${o.startTime * 50 * M}px`,
2326
- width: `${o.duration * 50 * M}px`
2327
- },
2328
- onClick: (u) => {
2329
- u.stopPropagation(), S(o.id);
2330
- },
2331
- children: [
2332
- /* @__PURE__ */ e("span", { className: "item-name", children: (i == null ? void 0 : i.name) || "Untitled" }),
2333
- o.transitions.length > 0 && /* @__PURE__ */ e("span", { className: "item-transitions", children: "✨" }),
2334
- o.effects.length > 0 && /* @__PURE__ */ e("span", { className: "item-effects", children: "🎨" })
2335
- ]
2336
- },
2337
- o.id
2338
- );
2339
- }) })
2340
- ]
2341
- },
2342
- t.id
2343
- )) })
2344
- ] })
2345
- ] }),
2346
- R === "effects" && /* @__PURE__ */ a("div", { className: "effects-panel", children: [
2347
- /* @__PURE__ */ e("h3", { children: "Video Effects" }),
2348
- /* @__PURE__ */ e("p", { className: "panel-hint", children: "Select a clip to apply effects" }),
2349
- /* @__PURE__ */ e("div", { className: "effects-grid", children: Ge.map((t) => /* @__PURE__ */ a(
2350
- "button",
2351
- {
2352
- className: "effect-preset",
2353
- disabled: !x,
2354
- onClick: () => {
2355
- const o = j();
2356
- o && Y(o.track.id, o.item.id, t.type);
2357
- },
2358
- children: [
2359
- /* @__PURE__ */ e("span", { className: "effect-icon", children: t.icon }),
2360
- /* @__PURE__ */ e("span", { className: "effect-name", children: t.name })
2361
- ]
2362
- },
2363
- t.type
2364
- )) })
2365
- ] }),
2366
- R === "transitions" && /* @__PURE__ */ a("div", { className: "transitions-panel", children: [
2367
- /* @__PURE__ */ e("h3", { children: "Transitions" }),
2368
- /* @__PURE__ */ e("p", { className: "panel-hint", children: "Select a clip and add transitions between clips" }),
2369
- /* @__PURE__ */ e("div", { className: "transitions-grid", children: je.map((t) => /* @__PURE__ */ a("div", { className: "transition-preset", children: [
2370
- /* @__PURE__ */ e("span", { className: "transition-name", children: t.name }),
2371
- /* @__PURE__ */ a("div", { className: "transition-buttons", children: [
2372
- /* @__PURE__ */ e(
2373
- "button",
2374
- {
2375
- disabled: !x,
2376
- onClick: () => {
2377
- const o = j();
2378
- o && V(o.track.id, o.item.id, t.type, "start");
2379
- },
2380
- children: "In"
2381
- }
2382
- ),
2383
- /* @__PURE__ */ e(
2384
- "button",
2385
- {
2386
- disabled: !x,
2387
- onClick: () => {
2388
- const o = j();
2389
- o && V(o.track.id, o.item.id, t.type, "end");
2390
- },
2391
- children: "Out"
2392
- }
2393
- )
2394
- ] })
2395
- ] }, t.type)) })
2396
- ] }),
2397
- R === "export" && /* @__PURE__ */ a("div", { className: "export-panel", children: [
2398
- /* @__PURE__ */ e("h3", { children: "Export Settings" }),
2399
- /* @__PURE__ */ a("div", { className: "export-settings", children: [
2400
- /* @__PURE__ */ a("div", { className: "setting-group", children: [
2401
- /* @__PURE__ */ e("label", { children: "Resolution" }),
2402
- /* @__PURE__ */ a(
2403
- "select",
2404
- {
2405
- value: `${p.resolution.width}x${p.resolution.height}`,
2406
- onChange: (t) => {
2407
- const [o, i] = t.target.value.split("x").map(Number);
2408
- k({ resolution: { width: o, height: i } });
2409
- },
2410
- children: [
2411
- /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
2412
- /* @__PURE__ */ e("option", { value: "2560x1440", children: "1440p (2560x1440)" }),
2413
- /* @__PURE__ */ e("option", { value: "3840x2160", children: "4K (3840x2160)" }),
2414
- /* @__PURE__ */ e("option", { value: "1280x720", children: "720p (1280x720)" })
2415
- ]
2416
- }
2417
- )
2418
- ] }),
2419
- /* @__PURE__ */ a("div", { className: "setting-group", children: [
2420
- /* @__PURE__ */ e("label", { children: "Frame Rate" }),
2421
- /* @__PURE__ */ a(
2422
- "select",
2423
- {
2424
- value: p.frameRate,
2425
- onChange: (t) => k({ frameRate: parseInt(t.target.value) }),
2426
- children: [
2427
- /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
2428
- /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
2429
- /* @__PURE__ */ e("option", { value: "60", children: "60 fps" }),
2430
- /* @__PURE__ */ e("option", { value: "120", children: "120 fps" })
2431
- ]
2432
- }
2433
- )
2434
- ] }),
2435
- /* @__PURE__ */ a("div", { className: "setting-group", children: [
2436
- /* @__PURE__ */ e("label", { children: "Video Codec" }),
2437
- /* @__PURE__ */ a(
2438
- "select",
2439
- {
2440
- value: p.settings.video.codec,
2441
- onChange: (t) => k({
2442
- settings: {
2443
- ...p.settings,
2444
- video: {
2445
- ...p.settings.video,
2446
- codec: t.target.value
2447
- }
2448
- }
2449
- }),
2450
- children: [
2451
- /* @__PURE__ */ e("option", { value: "h264", children: "H.264 (Best Compatibility)" }),
2452
- /* @__PURE__ */ e("option", { value: "h265", children: "H.265/HEVC (Smaller Size)" }),
2453
- /* @__PURE__ */ e("option", { value: "vp9", children: "VP9 (Web Optimized)" }),
2454
- /* @__PURE__ */ e("option", { value: "av1", children: "AV1 (Future Standard)" })
2455
- ]
2456
- }
2457
- )
2458
- ] }),
2459
- /* @__PURE__ */ a("div", { className: "setting-group", children: [
2460
- /* @__PURE__ */ e("label", { children: "Video Bitrate (Mbps)" }),
2461
- /* @__PURE__ */ e(
2462
- "input",
2463
- {
2464
- type: "number",
2465
- value: p.settings.video.bitrate / 1e3,
2466
- onChange: (t) => k({
2467
- settings: {
2468
- ...p.settings,
2469
- video: {
2470
- ...p.settings.video,
2471
- bitrate: parseFloat(t.target.value) * 1e3
2472
- }
2473
- }
2474
- }),
2475
- min: "1",
2476
- max: "100"
2477
- }
2478
- )
2479
- ] })
2480
- ] }),
2481
- /* @__PURE__ */ e(
2482
- "button",
2483
- {
2484
- className: "export-button",
2485
- onClick: Q,
2486
- disabled: U !== null,
2487
- children: U !== null ? `Exporting... ${Math.round(U)}%` : "Export Video"
2488
- }
2489
- ),
2490
- U !== null && /* @__PURE__ */ e("div", { className: "export-progress", children: /* @__PURE__ */ e("div", { className: "export-progress-bar", style: { width: `${U}%` } }) })
2491
- ] })
2492
- ] });
2493
- return /* @__PURE__ */ a(
2494
- he,
2495
- {
2496
- flush: !0,
2497
- className: `nice-video-editor ${H}`,
2498
- height: "100%",
2499
- style: { position: "relative", minHeight: 600 },
2500
- toolbar: oe,
2501
- sidebar: r,
2502
- rightSidebar: ce ?? void 0,
2503
- bottomPanel: m,
2504
- children: [
2505
- /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(Oe, { steps: Le(I, Ze) }) }),
2506
- s
2507
- ]
2508
- }
2509
- );
2510
- }, qe = {
2511
- video: {
2512
- source: "screen",
2513
- showCursor: !0,
2514
- frameRate: 30,
2515
- resolution: { width: 1920, height: 1080 }
2516
- },
2517
- audio: {
2518
- enabled: !0,
2519
- source: "both",
2520
- echoCancellation: !0,
2521
- noiseSuppression: !0
2522
- },
2523
- output: {
2524
- format: "webm",
2525
- quality: "high"
2526
- }
2527
- }, ea = ({
2528
- options: d,
2529
- onRecordingStart: f,
2530
- onRecordingStop: l,
2531
- onRecordingPause: C,
2532
- onRecordingResume: H,
2533
- onError: I,
2534
- className: p = ""
2535
- }) => {
2536
- var t, o;
2537
- const [n, R] = w({
2538
- ...qe,
2539
- ...d
2540
- }), [b, D] = w(null), [y, x] = w("idle"), [S, A] = w([]), [_, O] = w(null), [F, M] = w(null), [Z, K] = w(!1), [P, U] = w(!1), [B, ie] = w(
2541
- "pen"
2542
- ), [te, z] = w("var(--nice-danger, #ff0000)"), k = L(null), N = L([]), W = L(null), q = L(null), G = L(null), ee = L(0);
2543
- re(() => () => {
2544
- _ && _.getTracks().forEach((i) => i.stop()), G.current && clearInterval(G.current);
2545
- }, [_]);
2546
- const E = (i) => {
2547
- R((u) => ({
2548
- ...u,
2549
- ...i,
2550
- video: { ...u.video, ...i.video },
2551
- audio: { ...u.audio, ...i.audio },
2552
- output: { ...u.output, ...i.output }
2553
- }));
2554
- }, Y = async () => {
2555
- try {
2556
- x("preparing");
2557
- const i = {
2558
- video: {
2559
- cursor: n.video.showCursor ? "always" : "never",
2560
- frameRate: n.video.frameRate
2561
- },
2562
- audio: n.audio.source === "system" || n.audio.source === "both"
2563
- }, u = await navigator.mediaDevices.getDisplayMedia(i);
2564
- if (n.audio.enabled && (n.audio.source === "microphone" || n.audio.source === "both"))
2565
- try {
2566
- (await navigator.mediaDevices.getUserMedia({
2567
- audio: {
2568
- echoCancellation: n.audio.echoCancellation,
2569
- noiseSuppression: n.audio.noiseSuppression
2570
- }
2571
- })).getAudioTracks().forEach((v) => u.addTrack(v));
2572
- } catch (h) {
2573
- console.warn("Could not access microphone:", h);
2574
- }
2575
- O(u), W.current && (W.current.srcObject = u, W.current.play()), x("idle");
2576
- } catch (i) {
2577
- x("error"), I == null || I(i instanceof Error ? i : new Error("Failed to start preview"));
2578
- }
2579
- }, V = async () => {
2580
- _ || await Y();
2581
- for (let i = 3; i > 0; i--)
2582
- M(i), await new Promise((u) => setTimeout(u, 1e3));
2583
- M(null);
2584
- try {
2585
- const i = _ || await ne();
2586
- if (!i)
2587
- throw new Error("No stream available");
2588
- const u = oe(n.output.format), h = new MediaRecorder(i, {
2589
- mimeType: u,
2590
- videoBitsPerSecond: ce(n.output.quality)
2591
- });
2592
- N.current = [], h.ondataavailable = (g) => {
2593
- g.data.size > 0 && N.current.push(g.data);
2594
- }, h.onstop = () => {
2595
- const g = new Blob(N.current, { type: u });
2596
- b && (l == null || l({ ...b, status: "stopped" }, g));
2597
- }, k.current = h, h.start(1e3), ee.current = Date.now();
2598
- const v = {
2599
- id: crypto.randomUUID(),
2600
- status: "recording",
2601
- startTime: /* @__PURE__ */ new Date(),
2602
- duration: 0,
2603
- size: 0,
2604
- options: n,
2605
- chunks: []
2606
- };
2607
- D(v), x("recording"), f == null || f(v), G.current = setInterval(() => {
2608
- D(
2609
- (g) => g ? {
2610
- ...g,
2611
- duration: (Date.now() - ee.current) / 1e3,
2612
- size: N.current.reduce((Ce, Se) => Ce + Se.size, 0)
2613
- } : null
2614
- );
2615
- }, 100);
2616
- } catch (i) {
2617
- x("error"), I == null || I(i instanceof Error ? i : new Error("Failed to start recording"));
2618
- }
2619
- }, ne = async () => (await Y(), _), se = () => {
2620
- k.current && y === "recording" && (k.current.pause(), x("paused"), C == null || C());
2621
- }, J = () => {
2622
- k.current && y === "paused" && (k.current.resume(), x("recording"), H == null || H());
2623
- }, Q = () => {
2624
- G.current && clearInterval(G.current), k.current && (y === "recording" || y === "paused") && (k.current.stop(), x("stopped")), _ && (_.getTracks().forEach((i) => i.stop()), O(null));
2625
- }, ae = me(
2626
- (i) => {
2627
- if (y !== "recording")
2628
- return;
2629
- const u = {
2630
- id: crypto.randomUUID(),
2631
- time: (b == null ? void 0 : b.duration) || 0,
2632
- label: i || `Marker ${S.length + 1}`,
2633
- color: r()
2634
- };
2635
- A((h) => [...h, u]);
2636
- },
2637
- [y, b == null ? void 0 : b.duration, S.length]
2638
- ), j = (i) => {
2639
- A((u) => u.filter((h) => h.id !== i));
2640
- }, oe = (i) => {
2641
- switch (i) {
2642
- case "mp4":
2643
- return "video/mp4";
2644
- case "mkv":
2645
- return "video/x-matroska";
2646
- default:
2647
- return "video/webm;codecs=vp9";
2648
- }
2649
- }, ce = (i) => {
2650
- switch (i) {
2651
- case "low":
2652
- return 25e5;
2653
- case "medium":
2654
- return 5e6;
2655
- case "lossless":
2656
- return 2e7;
2657
- default:
2658
- return 8e6;
2659
- }
2660
- }, r = () => {
2661
- const i = ["var(--nice-danger, #ff4444)", "#44ff44", "#4444ff", "#ffff44", "#ff44ff", "#44ffff"];
2662
- return i[Math.floor(Math.random() * i.length)];
2663
- }, s = (i) => {
2664
- const u = Math.floor(i / 3600), h = Math.floor(i % 3600 / 60), v = Math.floor(i % 60), g = Math.floor(i % 1 * 100);
2665
- return u > 0 ? `${u}:${h.toString().padStart(2, "0")}:${v.toString().padStart(2, "0")}` : `${h.toString().padStart(2, "0")}:${v.toString().padStart(2, "0")}.${g.toString().padStart(2, "0")}`;
2666
- }, m = (i) => i < 1024 ? `${i} B` : i < 1024 * 1024 ? `${(i / 1024).toFixed(1)} KB` : `${(i / 1024 / 1024).toFixed(1)} MB`;
2667
- return /* @__PURE__ */ a("div", { className: `nice-screen-recorder ${p}`, children: [
2668
- /* @__PURE__ */ a("div", { className: "recorder__preview", children: [
2669
- F !== null && /* @__PURE__ */ e("div", { className: "countdown-overlay", children: /* @__PURE__ */ e("span", { className: "countdown-number", children: F }) }),
2670
- /* @__PURE__ */ e("video", { ref: W, className: "preview-video", muted: !0, playsInline: !0 }),
2671
- P && /* @__PURE__ */ e("canvas", { ref: q, className: "annotation-canvas" }),
2672
- !_ && y === "idle" && /* @__PURE__ */ e("div", { className: "preview-placeholder", children: /* @__PURE__ */ a("button", { className: "start-preview-button", onClick: Y, children: [
2673
- /* @__PURE__ */ e("span", { className: "icon", children: "🖥️" }),
2674
- /* @__PURE__ */ e("span", { children: "Select Screen to Record" })
2675
- ] }) }),
2676
- y === "recording" && /* @__PURE__ */ a("div", { className: "recording-indicator", children: [
2677
- /* @__PURE__ */ e("span", { className: "recording-dot" }),
2678
- /* @__PURE__ */ e("span", { children: "REC" })
2679
- ] })
2680
- ] }),
2681
- /* @__PURE__ */ a("div", { className: "recorder__controls", children: [
2682
- /* @__PURE__ */ a("div", { className: "controls__main", children: [
2683
- y === "idle" && /* @__PURE__ */ a(
2684
- "button",
2685
- {
2686
- className: "control-button control-button--record",
2687
- onClick: V,
2688
- disabled: !!F,
2689
- children: [
2690
- /* @__PURE__ */ e("span", { className: "icon", children: "⏺️" }),
2691
- /* @__PURE__ */ e("span", { children: "Start Recording" })
2692
- ]
2693
- }
2694
- ),
2695
- y === "recording" && /* @__PURE__ */ a(le, { children: [
2696
- /* @__PURE__ */ a("button", { className: "control-button control-button--pause", onClick: se, children: [
2697
- /* @__PURE__ */ e("span", { className: "icon", children: "⏸️" }),
2698
- /* @__PURE__ */ e("span", { children: "Pause" })
2699
- ] }),
2700
- /* @__PURE__ */ a("button", { className: "control-button control-button--stop", onClick: Q, children: [
2701
- /* @__PURE__ */ e("span", { className: "icon", children: "⏹️" }),
2702
- /* @__PURE__ */ e("span", { children: "Stop" })
2703
- ] })
2704
- ] }),
2705
- y === "paused" && /* @__PURE__ */ a(le, { children: [
2706
- /* @__PURE__ */ a("button", { className: "control-button control-button--resume", onClick: J, children: [
2707
- /* @__PURE__ */ e("span", { className: "icon", children: "▶️" }),
2708
- /* @__PURE__ */ e("span", { children: "Resume" })
2709
- ] }),
2710
- /* @__PURE__ */ a("button", { className: "control-button control-button--stop", onClick: Q, children: [
2711
- /* @__PURE__ */ e("span", { className: "icon", children: "⏹️" }),
2712
- /* @__PURE__ */ e("span", { children: "Stop" })
2713
- ] })
2714
- ] }),
2715
- y === "stopped" && /* @__PURE__ */ a(
2716
- "button",
2717
- {
2718
- className: "control-button control-button--new",
2719
- onClick: () => {
2720
- x("idle"), D(null), A([]);
2721
- },
2722
- children: [
2723
- /* @__PURE__ */ e("span", { className: "icon", children: "🔄" }),
2724
- /* @__PURE__ */ e("span", { children: "New Recording" })
2725
- ]
2726
- }
2727
- )
2728
- ] }),
2729
- /* @__PURE__ */ a("div", { className: "controls__secondary", children: [
2730
- (y === "recording" || y === "paused") && /* @__PURE__ */ a("button", { className: "control-button control-button--marker", onClick: () => ae(), children: [
2731
- /* @__PURE__ */ e("span", { className: "icon", children: "🚩" }),
2732
- /* @__PURE__ */ e("span", { children: "Add Marker" })
2733
- ] }),
2734
- /* @__PURE__ */ a(
2735
- "button",
2736
- {
2737
- className: `control-button ${P ? "control-button--active" : ""}`,
2738
- onClick: () => U(!P),
2739
- disabled: y !== "recording",
2740
- children: [
2741
- /* @__PURE__ */ e("span", { className: "icon", children: "✏️" }),
2742
- /* @__PURE__ */ e("span", { children: "Annotate" })
2743
- ]
2744
- }
2745
- ),
2746
- /* @__PURE__ */ e(
2747
- "button",
2748
- {
2749
- className: "control-button control-button--settings",
2750
- onClick: () => K(!Z),
2751
- disabled: y === "recording",
2752
- children: /* @__PURE__ */ e("span", { className: "icon", children: "⚙️" })
2753
- }
2754
- )
2755
- ] })
2756
- ] }),
2757
- /* @__PURE__ */ a("div", { className: "recorder__status", children: [
2758
- /* @__PURE__ */ a("div", { className: "status__info", children: [
2759
- /* @__PURE__ */ a("span", { className: "status-item", children: [
2760
- /* @__PURE__ */ e("strong", { children: "Duration:" }),
2761
- " ",
2762
- s((b == null ? void 0 : b.duration) || 0)
2763
- ] }),
2764
- /* @__PURE__ */ a("span", { className: "status-item", children: [
2765
- /* @__PURE__ */ e("strong", { children: "Size:" }),
2766
- " ",
2767
- m((b == null ? void 0 : b.size) || 0)
2768
- ] }),
2769
- /* @__PURE__ */ a("span", { className: "status-item", children: [
2770
- /* @__PURE__ */ e("strong", { children: "Markers:" }),
2771
- " ",
2772
- S.length
2773
- ] })
2774
- ] }),
2775
- /* @__PURE__ */ a("div", { className: "status__quality", children: [
2776
- n.video.resolution && /* @__PURE__ */ a("span", { children: [
2777
- n.video.resolution.width,
2778
- "x",
2779
- n.video.resolution.height
2780
- ] }),
2781
- /* @__PURE__ */ a("span", { children: [
2782
- n.video.frameRate,
2783
- "fps"
2784
- ] }),
2785
- /* @__PURE__ */ e("span", { className: n.audio.enabled ? "audio-on" : "audio-off", children: n.audio.enabled ? "🔊" : "🔇" })
2786
- ] })
2787
- ] }),
2788
- P && y === "recording" && /* @__PURE__ */ a("div", { className: "recorder__annotation-tools", children: [
2789
- /* @__PURE__ */ e("div", { className: "tool-group", children: ["pen", "arrow", "rectangle", "text"].map((i) => /* @__PURE__ */ a(
2790
- "button",
2791
- {
2792
- className: `tool-button ${B === i ? "tool-button--active" : ""}`,
2793
- onClick: () => ie(i),
2794
- children: [
2795
- i === "pen" && "✏️",
2796
- i === "arrow" && "➡️",
2797
- i === "rectangle" && "⬜",
2798
- i === "text" && "T"
2799
- ]
2800
- },
2801
- i
2802
- )) }),
2803
- /* @__PURE__ */ e("div", { className: "color-group", children: ["var(--nice-danger, #ff0000)", "var(--nice-success, #00ff00)", "var(--nice-primary, #0000ff)", "var(--nice-warning, #ffff00)", "var(--nice-bg, #fff)", "var(--nice-text, #000000)"].map((i) => /* @__PURE__ */ e(
2804
- "button",
2805
- {
2806
- className: `color-button ${te === i ? "color-button--active" : ""}`,
2807
- style: { backgroundColor: i },
2808
- onClick: () => z(i)
2809
- },
2810
- i
2811
- )) })
2812
- ] }),
2813
- S.length > 0 && /* @__PURE__ */ a("div", { className: "recorder__markers", children: [
2814
- /* @__PURE__ */ e("h4", { children: "Markers" }),
2815
- /* @__PURE__ */ e("div", { className: "markers-list", children: S.map((i) => /* @__PURE__ */ a(
2816
- "div",
2817
- {
2818
- className: "marker-item",
2819
- style: { borderLeftColor: i.color },
2820
- children: [
2821
- /* @__PURE__ */ e("span", { className: "marker-time", children: s(i.time) }),
2822
- /* @__PURE__ */ e(
2823
- "input",
2824
- {
2825
- type: "text",
2826
- value: i.label,
2827
- onChange: (u) => {
2828
- A(
2829
- (h) => h.map((v) => v.id === i.id ? { ...v, label: u.target.value } : v)
2830
- );
2831
- },
2832
- className: "marker-label"
2833
- }
2834
- ),
2835
- /* @__PURE__ */ e("button", { className: "marker-remove", onClick: () => j(i.id), children: "×" })
2836
- ]
2837
- },
2838
- i.id
2839
- )) })
2840
- ] }),
2841
- Z && /* @__PURE__ */ a("div", { className: "recorder__settings", children: [
2842
- /* @__PURE__ */ a("div", { className: "settings-header", children: [
2843
- /* @__PURE__ */ e("h3", { children: "Recording Settings" }),
2844
- /* @__PURE__ */ e("button", { className: "close-button", onClick: () => K(!1), children: "×" })
2845
- ] }),
2846
- /* @__PURE__ */ a("div", { className: "settings-section", children: [
2847
- /* @__PURE__ */ e("h4", { children: "Video" }),
2848
- /* @__PURE__ */ a("label", { children: [
2849
- "Source",
2850
- /* @__PURE__ */ a(
2851
- "select",
2852
- {
2853
- value: n.video.source,
2854
- onChange: (i) => E({
2855
- video: {
2856
- ...n.video,
2857
- source: i.target.value
2858
- }
2859
- }),
2860
- children: [
2861
- /* @__PURE__ */ e("option", { value: "screen", children: "Entire Screen" }),
2862
- /* @__PURE__ */ e("option", { value: "window", children: "Application Window" }),
2863
- /* @__PURE__ */ e("option", { value: "tab", children: "Browser Tab" }),
2864
- /* @__PURE__ */ e("option", { value: "camera", children: "Camera" })
2865
- ]
2866
- }
2867
- )
2868
- ] }),
2869
- /* @__PURE__ */ a("label", { children: [
2870
- "Resolution",
2871
- /* @__PURE__ */ a(
2872
- "select",
2873
- {
2874
- value: `${(t = n.video.resolution) == null ? void 0 : t.width}x${(o = n.video.resolution) == null ? void 0 : o.height}`,
2875
- onChange: (i) => {
2876
- const [u, h] = i.target.value.split("x").map(Number);
2877
- E({
2878
- video: { ...n.video, resolution: { width: u, height: h } }
2879
- });
2880
- },
2881
- children: [
2882
- /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
2883
- /* @__PURE__ */ e("option", { value: "2560x1440", children: "1440p (2560x1440)" }),
2884
- /* @__PURE__ */ e("option", { value: "3840x2160", children: "4K (3840x2160)" }),
2885
- /* @__PURE__ */ e("option", { value: "1280x720", children: "720p (1280x720)" })
2886
- ]
2887
- }
2888
- )
2889
- ] }),
2890
- /* @__PURE__ */ a("label", { children: [
2891
- "Frame Rate",
2892
- /* @__PURE__ */ a(
2893
- "select",
2894
- {
2895
- value: n.video.frameRate,
2896
- onChange: (i) => E({
2897
- video: { ...n.video, frameRate: parseInt(i.target.value) }
2898
- }),
2899
- children: [
2900
- /* @__PURE__ */ e("option", { value: "15", children: "15 fps" }),
2901
- /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
2902
- /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
2903
- /* @__PURE__ */ e("option", { value: "60", children: "60 fps" })
2904
- ]
2905
- }
2906
- )
2907
- ] }),
2908
- /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
2909
- /* @__PURE__ */ e(
2910
- "input",
2911
- {
2912
- type: "checkbox",
2913
- checked: n.video.showCursor,
2914
- onChange: (i) => E({
2915
- video: { ...n.video, showCursor: i.target.checked }
2916
- })
2917
- }
2918
- ),
2919
- "Show Cursor"
2920
- ] })
2921
- ] }),
2922
- /* @__PURE__ */ a("div", { className: "settings-section", children: [
2923
- /* @__PURE__ */ e("h4", { children: "Audio" }),
2924
- /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
2925
- /* @__PURE__ */ e(
2926
- "input",
2927
- {
2928
- type: "checkbox",
2929
- checked: n.audio.enabled,
2930
- onChange: (i) => E({
2931
- audio: { ...n.audio, enabled: i.target.checked }
2932
- })
2933
- }
2934
- ),
2935
- "Enable Audio"
2936
- ] }),
2937
- n.audio.enabled && /* @__PURE__ */ a(le, { children: [
2938
- /* @__PURE__ */ a("label", { children: [
2939
- "Source",
2940
- /* @__PURE__ */ a(
2941
- "select",
2942
- {
2943
- value: n.audio.source,
2944
- onChange: (i) => E({
2945
- audio: {
2946
- ...n.audio,
2947
- source: i.target.value
2948
- }
2949
- }),
2950
- children: [
2951
- /* @__PURE__ */ e("option", { value: "system", children: "System Audio" }),
2952
- /* @__PURE__ */ e("option", { value: "microphone", children: "Microphone" }),
2953
- /* @__PURE__ */ e("option", { value: "both", children: "Both" })
2954
- ]
2955
- }
2956
- )
2957
- ] }),
2958
- /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
2959
- /* @__PURE__ */ e(
2960
- "input",
2961
- {
2962
- type: "checkbox",
2963
- checked: n.audio.echoCancellation,
2964
- onChange: (i) => E({
2965
- audio: { ...n.audio, echoCancellation: i.target.checked }
2966
- })
2967
- }
2968
- ),
2969
- "Echo Cancellation"
2970
- ] }),
2971
- /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
2972
- /* @__PURE__ */ e(
2973
- "input",
2974
- {
2975
- type: "checkbox",
2976
- checked: n.audio.noiseSuppression,
2977
- onChange: (i) => E({
2978
- audio: { ...n.audio, noiseSuppression: i.target.checked }
2979
- })
2980
- }
2981
- ),
2982
- "Noise Suppression"
2983
- ] })
2984
- ] })
2985
- ] }),
2986
- /* @__PURE__ */ a("div", { className: "settings-section", children: [
2987
- /* @__PURE__ */ e("h4", { children: "Output" }),
2988
- /* @__PURE__ */ a("label", { children: [
2989
- "Format",
2990
- /* @__PURE__ */ a(
2991
- "select",
2992
- {
2993
- value: n.output.format,
2994
- onChange: (i) => E({
2995
- output: { ...n.output, format: i.target.value }
2996
- }),
2997
- children: [
2998
- /* @__PURE__ */ e("option", { value: "webm", children: "WebM (Best Web)" }),
2999
- /* @__PURE__ */ e("option", { value: "mp4", children: "MP4 (Most Compatible)" }),
3000
- /* @__PURE__ */ e("option", { value: "mkv", children: "MKV (Lossless)" })
3001
- ]
3002
- }
3003
- )
3004
- ] }),
3005
- /* @__PURE__ */ a("label", { children: [
3006
- "Quality",
3007
- /* @__PURE__ */ a(
3008
- "select",
3009
- {
3010
- value: n.output.quality,
3011
- onChange: (i) => E({
3012
- output: {
3013
- ...n.output,
3014
- quality: i.target.value
3015
- }
3016
- }),
3017
- children: [
3018
- /* @__PURE__ */ e("option", { value: "low", children: "Low (Smaller file)" }),
3019
- /* @__PURE__ */ e("option", { value: "medium", children: "Medium" }),
3020
- /* @__PURE__ */ e("option", { value: "high", children: "High (Recommended)" }),
3021
- /* @__PURE__ */ e("option", { value: "lossless", children: "Lossless (Largest file)" })
3022
- ]
3023
- }
3024
- )
3025
- ] })
3026
- ] })
3027
- ] })
3028
- ] });
3029
- }, Ye = {
3030
- id: crypto.randomUUID(),
3031
- name: "My Stream",
3032
- protocol: "rtmp",
3033
- destinations: [],
3034
- sources: [],
3035
- layout: {
3036
- name: "Default",
3037
- canvas: { width: 1920, height: 1080, backgroundColor: "var(--nice-text, #000000)" },
3038
- layers: []
3039
- },
3040
- settings: {
3041
- video: {
3042
- resolution: { width: 1920, height: 1080 },
3043
- frameRate: 30,
3044
- codec: "h264",
3045
- bitrate: 6e3,
3046
- keyframe: 2,
3047
- profile: "high"
3048
- },
3049
- audio: {
3050
- sampleRate: 48e3,
3051
- bitrate: 160,
3052
- channels: 2,
3053
- codec: "aac"
3054
- }
3055
- }
3056
- }, fe = [
3057
- {
3058
- platform: "youtube",
3059
- name: "YouTube",
3060
- icon: "📺",
3061
- defaultUrl: "rtmp://a.rtmp.youtube.com/live2"
3062
- },
3063
- { platform: "twitch", name: "Twitch", icon: "🎮", defaultUrl: "rtmp://live.twitch.tv/app" },
3064
- {
3065
- platform: "facebook",
3066
- name: "Facebook",
3067
- icon: "📘",
3068
- defaultUrl: "rtmps://live-api-s.facebook.com:443/rtmp"
3069
- },
3070
- { platform: "custom-rtmp", name: "Custom RTMP", icon: "🔗", defaultUrl: "" },
3071
- { platform: "custom-srt", name: "Custom SRT", icon: "🔒", defaultUrl: "" }
3072
- ], de = [
3073
- { type: "camera", name: "Camera", icon: "📷" },
3074
- { type: "screen", name: "Screen Capture", icon: "🖥️" },
3075
- { type: "window", name: "Window Capture", icon: "🪟" },
3076
- { type: "browser", name: "Browser Source", icon: "🌐" },
3077
- { type: "image", name: "Image", icon: "🖼️" },
3078
- { type: "video", name: "Video", icon: "🎬" },
3079
- { type: "microphone", name: "Microphone", icon: "🎤" },
3080
- { type: "system-audio", name: "System Audio", icon: "🔊" }
3081
- ], aa = ({
3082
- config: d,
3083
- onConfigChange: f,
3084
- onStreamStart: l,
3085
- onStreamStop: C,
3086
- onStatsUpdate: H,
3087
- onError: I,
3088
- className: p = ""
3089
- }) => {
3090
- const [n, R] = w(d || Ye), [b, D] = w(
3091
- "sources"
3092
- ), [y, x] = w(!1), [S, A] = w({
3093
- duration: 0,
3094
- viewers: 0,
3095
- peakViewers: 0,
3096
- bitrate: 0,
3097
- fps: 0,
3098
- droppedFrames: 0,
3099
- cpuUsage: 0,
3100
- memoryUsage: 0
3101
- }), [_, O] = w(null), [F, M] = w(!1), [Z, K] = w(!1), [P, U] = w([n.layout]), [B, ie] = w(0), te = L(null), z = L(null), k = L(0);
3102
- re(() => {
3103
- d && R(d);
3104
- }, [d]), re(() => () => {
3105
- z.current && clearInterval(z.current);
3106
- }, []);
3107
- const N = me(
3108
- (r) => {
3109
- const s = { ...n, ...r };
3110
- R(s), f == null || f(s);
3111
- },
3112
- [n, f]
3113
- ), W = (r) => {
3114
- const s = fe.find((t) => t.platform === r), m = {
3115
- id: crypto.randomUUID(),
3116
- name: (s == null ? void 0 : s.name) || "Custom",
3117
- platform: r,
3118
- url: (s == null ? void 0 : s.defaultUrl) || "",
3119
- streamKey: "",
3120
- enabled: !0,
3121
- status: "idle"
3122
- };
3123
- N({ destinations: [...n.destinations, m] }), K(!1);
3124
- }, q = (r, s) => {
3125
- N({
3126
- destinations: n.destinations.map((m) => m.id === r ? { ...m, ...s } : m)
3127
- });
3128
- }, G = (r) => {
3129
- N({ destinations: n.destinations.filter((s) => s.id !== r) });
3130
- }, ee = async (r) => {
3131
- const s = de.find((o) => o.type === r), m = {
3132
- id: crypto.randomUUID(),
3133
- type: r,
3134
- name: `${(s == null ? void 0 : s.name) || r} ${n.sources.filter((o) => o.type === r).length + 1}`,
3135
- settings: {},
3136
- volume: 1,
3137
- muted: !1
3138
- };
3139
- try {
3140
- if (r === "camera" || r === "microphone") {
3141
- const o = r === "camera" ? { video: !0 } : { audio: !0 }, u = (await navigator.mediaDevices.enumerateDevices()).filter(
3142
- (h) => r === "camera" ? h.kind === "videoinput" : h.kind === "audioinput"
3143
- );
3144
- u.length > 0 && (m.settings.deviceId = u[0].deviceId);
3145
- } else (r === "screen" || r === "window") && await navigator.mediaDevices.getDisplayMedia({ video: !0 });
3146
- } catch (o) {
3147
- console.warn(`Could not access ${r}:`, o);
3148
- }
3149
- N({ sources: [...n.sources, m] });
3150
- const t = {
3151
- id: crypto.randomUUID(),
3152
- sourceId: m.id,
3153
- position: { x: 0, y: 0 },
3154
- size: { width: n.layout.canvas.width, height: n.layout.canvas.height },
3155
- visible: !0,
3156
- opacity: 1,
3157
- zIndex: n.layout.layers.length
3158
- };
3159
- N({
3160
- layout: {
3161
- ...n.layout,
3162
- layers: [...n.layout.layers, t]
3163
- }
3164
- }), M(!1);
3165
- }, E = (r, s) => {
3166
- N({
3167
- sources: n.sources.map((m) => m.id === r ? { ...m, ...s } : m)
3168
- });
3169
- }, Y = (r) => {
3170
- N({
3171
- sources: n.sources.filter((s) => s.id !== r),
3172
- layout: {
3173
- ...n.layout,
3174
- layers: n.layout.layers.filter((s) => s.sourceId !== r)
3175
- }
3176
- });
3177
- }, V = (r, s) => {
3178
- N({
3179
- layout: {
3180
- ...n.layout,
3181
- layers: n.layout.layers.map((m) => m.id === r ? { ...m, ...s } : m)
3182
- }
3183
- });
3184
- }, ne = (r) => {
3185
- const s = n.layout.layers.findIndex((m) => m.id === r);
3186
- if (s < n.layout.layers.length - 1) {
3187
- const m = [...n.layout.layers];
3188
- [m[s], m[s + 1]] = [m[s + 1], m[s]], m.forEach((t, o) => {
3189
- t.zIndex = o;
3190
- }), N({ layout: { ...n.layout, layers: m } });
3191
- }
3192
- }, se = (r) => {
3193
- const s = n.layout.layers.findIndex((m) => m.id === r);
3194
- if (s > 0) {
3195
- const m = [...n.layout.layers];
3196
- [m[s], m[s - 1]] = [m[s - 1], m[s]], m.forEach((t, o) => {
3197
- t.zIndex = o;
3198
- }), N({ layout: { ...n.layout, layers: m } });
3199
- }
3200
- }, J = () => {
3201
- const r = {
3202
- name: `Scene ${P.length + 1}`,
3203
- canvas: { ...n.layout.canvas },
3204
- layers: []
3205
- };
3206
- U([...P, r]);
3207
- }, Q = (r) => {
3208
- const s = [...P];
3209
- s[B] = n.layout, U(s), ie(r), N({ layout: P[r] });
3210
- }, ae = async () => {
3211
- try {
3212
- N({
3213
- destinations: n.destinations.map(
3214
- (r) => r.enabled ? { ...r, status: "connecting" } : r
3215
- )
3216
- }), await new Promise((r) => setTimeout(r, 2e3)), N({
3217
- destinations: n.destinations.map(
3218
- (r) => r.enabled ? { ...r, status: "live" } : r
3219
- )
3220
- }), x(!0), k.current = Date.now(), l == null || l(), z.current = setInterval(() => {
3221
- const r = {
3222
- duration: (Date.now() - k.current) / 1e3,
3223
- viewers: Math.floor(Math.random() * 100) + S.viewers,
3224
- peakViewers: Math.max(S.peakViewers, S.viewers),
3225
- bitrate: n.settings.video.bitrate + Math.floor(Math.random() * 500 - 250),
3226
- fps: n.settings.video.frameRate - Math.random() * 2,
3227
- droppedFrames: S.droppedFrames + (Math.random() > 0.95 ? 1 : 0),
3228
- cpuUsage: 15 + Math.random() * 30,
3229
- memoryUsage: 40 + Math.random() * 20
3230
- };
3231
- A(r), H == null || H(r);
3232
- }, 1e3);
3233
- } catch (r) {
3234
- I == null || I(r instanceof Error ? r : new Error("Failed to start stream")), N({
3235
- destinations: n.destinations.map((s) => ({
3236
- ...s,
3237
- status: "error"
3238
- }))
3239
- });
3240
- }
3241
- }, j = () => {
3242
- z.current && clearInterval(z.current), N({
3243
- destinations: n.destinations.map((r) => ({ ...r, status: "idle" }))
3244
- }), x(!1), C == null || C();
3245
- }, oe = (r) => {
3246
- const s = Math.floor(r / 3600), m = Math.floor(r % 3600 / 60), t = Math.floor(r % 60);
3247
- return `${s.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}:${t.toString().padStart(2, "0")}`;
3248
- }, ce = (r) => {
3249
- switch (r) {
3250
- case "live":
3251
- return "var(--nice-success, #00ff00)";
3252
- case "connecting":
3253
- return "var(--nice-warning, #ffff00)";
3254
- case "error":
3255
- return "var(--nice-danger, #ff0000)";
3256
- default:
3257
- return "var(--nice-text-secondary, #888888)";
3258
- }
3259
- };
3260
- return /* @__PURE__ */ a("div", { className: `nice-live-streaming ${p}`, children: [
3261
- /* @__PURE__ */ a("header", { className: "streaming__header", children: [
3262
- /* @__PURE__ */ a("div", { className: "header__title", children: [
3263
- /* @__PURE__ */ e(
3264
- "input",
3265
- {
3266
- type: "text",
3267
- value: n.name,
3268
- onChange: (r) => N({ name: r.target.value }),
3269
- className: "stream-name-input"
3270
- }
3271
- ),
3272
- y && /* @__PURE__ */ a("span", { className: "live-badge", children: [
3273
- /* @__PURE__ */ e("span", { className: "live-dot" }),
3274
- " LIVE"
3275
- ] })
3276
- ] }),
3277
- /* @__PURE__ */ e("div", { className: "header__stats", children: y && /* @__PURE__ */ a(le, { children: [
3278
- /* @__PURE__ */ a("span", { className: "stat-item", children: [
3279
- "⏱️ ",
3280
- oe(S.duration)
3281
- ] }),
3282
- /* @__PURE__ */ a("span", { className: "stat-item", children: [
3283
- "👥 ",
3284
- S.viewers
3285
- ] }),
3286
- /* @__PURE__ */ a("span", { className: "stat-item", children: [
3287
- "📊 ",
3288
- Math.round(S.bitrate),
3289
- " kbps"
3290
- ] }),
3291
- /* @__PURE__ */ a("span", { className: "stat-item", children: [
3292
- "🎬 ",
3293
- S.fps.toFixed(1),
3294
- " fps"
3295
- ] })
3296
- ] }) }),
3297
- /* @__PURE__ */ e("div", { className: "header__actions", children: y ? /* @__PURE__ */ e("button", { className: "action-button action-button--stop", onClick: j, children: "End Stream" }) : /* @__PURE__ */ e(
3298
- "button",
3299
- {
3300
- className: "action-button action-button--go-live",
3301
- onClick: ae,
3302
- disabled: n.destinations.filter((r) => r.enabled).length === 0,
3303
- children: "Go Live"
3304
- }
3305
- ) })
3306
- ] }),
3307
- /* @__PURE__ */ a("div", { className: "streaming__main", children: [
3308
- /* @__PURE__ */ a("div", { className: "streaming__preview", children: [
3309
- /* @__PURE__ */ a("div", { className: "scenes-bar", children: [
3310
- P.map((r, s) => /* @__PURE__ */ e(
3311
- "button",
3312
- {
3313
- className: `scene-button ${B === s ? "scene-button--active" : ""}`,
3314
- onClick: () => Q(s),
3315
- children: r.name
3316
- },
3317
- s
3318
- )),
3319
- /* @__PURE__ */ e("button", { className: "scene-button scene-button--add", onClick: J, children: "+" })
3320
- ] }),
3321
- /* @__PURE__ */ e(
3322
- "div",
3323
- {
3324
- ref: te,
3325
- className: "preview-canvas",
3326
- style: {
3327
- aspectRatio: `${n.layout.canvas.width}/${n.layout.canvas.height}`,
3328
- backgroundColor: n.layout.canvas.backgroundColor
3329
- },
3330
- children: n.layout.layers.sort((r, s) => r.zIndex - s.zIndex).map((r) => {
3331
- var m;
3332
- const s = n.sources.find((t) => t.id === r.sourceId);
3333
- return !r.visible || !s ? null : /* @__PURE__ */ e(
3334
- "div",
3335
- {
3336
- className: `canvas-layer ${_ === r.id ? "canvas-layer--selected" : ""}`,
3337
- style: {
3338
- left: `${r.position.x / n.layout.canvas.width * 100}%`,
3339
- top: `${r.position.y / n.layout.canvas.height * 100}%`,
3340
- width: `${r.size.width / n.layout.canvas.width * 100}%`,
3341
- height: `${r.size.height / n.layout.canvas.height * 100}%`,
3342
- opacity: r.opacity,
3343
- zIndex: r.zIndex
3344
- },
3345
- onClick: () => O(r.id),
3346
- children: /* @__PURE__ */ a("div", { className: "layer-content", children: [
3347
- /* @__PURE__ */ e("span", { className: "layer-icon", children: ((m = de.find((t) => t.type === s.type)) == null ? void 0 : m.icon) || "📦" }),
3348
- /* @__PURE__ */ e("span", { className: "layer-name", children: s.name })
3349
- ] })
3350
- },
3351
- r.id
3352
- );
3353
- })
3354
- }
3355
- )
3356
- ] }),
3357
- /* @__PURE__ */ a("aside", { className: "streaming__panel", children: [
3358
- /* @__PURE__ */ e("div", { className: "panel-tabs", children: ["sources", "audio", "destinations", "settings"].map((r) => /* @__PURE__ */ e(
3359
- "button",
3360
- {
3361
- className: `panel-tab ${b === r ? "panel-tab--active" : ""}`,
3362
- onClick: () => D(r),
3363
- children: r.charAt(0).toUpperCase() + r.slice(1)
3364
- },
3365
- r
3366
- )) }),
3367
- /* @__PURE__ */ a("div", { className: "panel-content", children: [
3368
- b === "sources" && /* @__PURE__ */ a("div", { className: "sources-panel", children: [
3369
- /* @__PURE__ */ a("div", { className: "panel-header", children: [
3370
- /* @__PURE__ */ e("h3", { children: "Sources" }),
3371
- /* @__PURE__ */ e(
3372
- "button",
3373
- {
3374
- className: "add-button",
3375
- onClick: () => M(!0),
3376
- disabled: y,
3377
- children: "+ Add"
3378
- }
3379
- )
3380
- ] }),
3381
- /* @__PURE__ */ e("div", { className: "sources-list", children: n.sources.filter((r) => r.type !== "microphone" && r.type !== "system-audio").map((r) => {
3382
- var m;
3383
- const s = n.layout.layers.find((t) => t.sourceId === r.id);
3384
- return /* @__PURE__ */ a(
3385
- "div",
3386
- {
3387
- className: `source-item ${_ === (s == null ? void 0 : s.id) ? "source-item--selected" : ""}`,
3388
- onClick: () => s && O(s.id),
3389
- children: [
3390
- /* @__PURE__ */ e("span", { className: "source-icon", children: (m = de.find((t) => t.type === r.type)) == null ? void 0 : m.icon }),
3391
- /* @__PURE__ */ e("span", { className: "source-name", children: r.name }),
3392
- /* @__PURE__ */ a("div", { className: "source-controls", children: [
3393
- /* @__PURE__ */ e(
3394
- "button",
3395
- {
3396
- className: s != null && s.visible ? "" : "inactive",
3397
- onClick: (t) => {
3398
- t.stopPropagation(), s && V(s.id, { visible: !s.visible });
3399
- },
3400
- children: s != null && s.visible ? "👁️" : "👁️‍🗨️"
3401
- }
3402
- ),
3403
- /* @__PURE__ */ e(
3404
- "button",
3405
- {
3406
- onClick: (t) => {
3407
- t.stopPropagation(), s && ne(s.id);
3408
- },
3409
- children: "⬆️"
3410
- }
3411
- ),
3412
- /* @__PURE__ */ e(
3413
- "button",
3414
- {
3415
- onClick: (t) => {
3416
- t.stopPropagation(), s && se(s.id);
3417
- },
3418
- children: "⬇️"
3419
- }
3420
- ),
3421
- /* @__PURE__ */ e(
3422
- "button",
3423
- {
3424
- onClick: (t) => {
3425
- t.stopPropagation(), Y(r.id);
3426
- },
3427
- disabled: y,
3428
- children: "🗑️"
3429
- }
3430
- )
3431
- ] })
3432
- ]
3433
- },
3434
- r.id
3435
- );
3436
- }) }),
3437
- _ && /* @__PURE__ */ a("div", { className: "layer-properties", children: [
3438
- /* @__PURE__ */ e("h4", { children: "Properties" }),
3439
- (() => {
3440
- const r = n.layout.layers.find((s) => s.id === _);
3441
- return r ? /* @__PURE__ */ a(le, { children: [
3442
- /* @__PURE__ */ a("label", { children: [
3443
- "X Position",
3444
- /* @__PURE__ */ e(
3445
- "input",
3446
- {
3447
- type: "number",
3448
- value: r.position.x,
3449
- onChange: (s) => V(r.id, {
3450
- position: { ...r.position, x: parseInt(s.target.value) || 0 }
3451
- })
3452
- }
3453
- )
3454
- ] }),
3455
- /* @__PURE__ */ a("label", { children: [
3456
- "Y Position",
3457
- /* @__PURE__ */ e(
3458
- "input",
3459
- {
3460
- type: "number",
3461
- value: r.position.y,
3462
- onChange: (s) => V(r.id, {
3463
- position: { ...r.position, y: parseInt(s.target.value) || 0 }
3464
- })
3465
- }
3466
- )
3467
- ] }),
3468
- /* @__PURE__ */ a("label", { children: [
3469
- "Width",
3470
- /* @__PURE__ */ e(
3471
- "input",
3472
- {
3473
- type: "number",
3474
- value: r.size.width,
3475
- onChange: (s) => V(r.id, {
3476
- size: { ...r.size, width: parseInt(s.target.value) || 100 }
3477
- })
3478
- }
3479
- )
3480
- ] }),
3481
- /* @__PURE__ */ a("label", { children: [
3482
- "Height",
3483
- /* @__PURE__ */ e(
3484
- "input",
3485
- {
3486
- type: "number",
3487
- value: r.size.height,
3488
- onChange: (s) => V(r.id, {
3489
- size: { ...r.size, height: parseInt(s.target.value) || 100 }
3490
- })
3491
- }
3492
- )
3493
- ] }),
3494
- /* @__PURE__ */ a("label", { children: [
3495
- "Opacity",
3496
- /* @__PURE__ */ e(
3497
- "input",
3498
- {
3499
- type: "range",
3500
- min: "0",
3501
- max: "1",
3502
- step: "0.1",
3503
- value: r.opacity,
3504
- onChange: (s) => V(r.id, {
3505
- opacity: parseFloat(s.target.value)
3506
- })
3507
- }
3508
- )
3509
- ] })
3510
- ] }) : null;
3511
- })()
3512
- ] })
3513
- ] }),
3514
- b === "audio" && /* @__PURE__ */ a("div", { className: "audio-panel", children: [
3515
- /* @__PURE__ */ a("div", { className: "panel-header", children: [
3516
- /* @__PURE__ */ e("h3", { children: "Audio Mixer" }),
3517
- /* @__PURE__ */ e(
3518
- "button",
3519
- {
3520
- className: "add-button",
3521
- onClick: () => {
3522
- M(!0);
3523
- },
3524
- disabled: y,
3525
- children: "+ Add"
3526
- }
3527
- )
3528
- ] }),
3529
- /* @__PURE__ */ a("div", { className: "audio-sources", children: [
3530
- n.sources.filter(
3531
- (r) => r.type === "microphone" || r.type === "system-audio" || r.type === "video"
3532
- ).map((r) => {
3533
- var s;
3534
- return /* @__PURE__ */ a("div", { className: "audio-source", children: [
3535
- /* @__PURE__ */ a("div", { className: "audio-header", children: [
3536
- /* @__PURE__ */ e("span", { className: "audio-icon", children: (s = de.find((m) => m.type === r.type)) == null ? void 0 : s.icon }),
3537
- /* @__PURE__ */ e("span", { className: "audio-name", children: r.name }),
3538
- /* @__PURE__ */ e(
3539
- "button",
3540
- {
3541
- className: r.muted ? "muted" : "",
3542
- onClick: () => E(r.id, { muted: !r.muted }),
3543
- children: r.muted ? "🔇" : "🔊"
3544
- }
3545
- )
3546
- ] }),
3547
- /* @__PURE__ */ a("div", { className: "audio-slider", children: [
3548
- /* @__PURE__ */ e(
3549
- "input",
3550
- {
3551
- type: "range",
3552
- min: "0",
3553
- max: "1",
3554
- step: "0.01",
3555
- value: r.volume ?? 1,
3556
- onChange: (m) => E(r.id, { volume: parseFloat(m.target.value) }),
3557
- disabled: r.muted
3558
- }
3559
- ),
3560
- /* @__PURE__ */ a("span", { className: "volume-value", children: [
3561
- Math.round((r.volume ?? 1) * 100),
3562
- "%"
3563
- ] })
3564
- ] }),
3565
- /* @__PURE__ */ e("div", { className: "audio-meter", children: /* @__PURE__ */ e(
3566
- "div",
3567
- {
3568
- className: "meter-fill",
3569
- style: { width: `${(r.volume ?? 1) * 70 + Math.random() * 30}%` }
3570
- }
3571
- ) })
3572
- ] }, r.id);
3573
- }),
3574
- n.sources.filter(
3575
- (r) => r.type === "microphone" || r.type === "system-audio"
3576
- ).length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No audio sources added" })
3577
- ] })
3578
- ] }),
3579
- b === "destinations" && /* @__PURE__ */ a("div", { className: "destinations-panel", children: [
3580
- /* @__PURE__ */ a("div", { className: "panel-header", children: [
3581
- /* @__PURE__ */ e("h3", { children: "Destinations" }),
3582
- /* @__PURE__ */ e(
3583
- "button",
3584
- {
3585
- className: "add-button",
3586
- onClick: () => K(!0),
3587
- disabled: y,
3588
- children: "+ Add"
3589
- }
3590
- )
3591
- ] }),
3592
- /* @__PURE__ */ a("div", { className: "destinations-list", children: [
3593
- n.destinations.map((r) => {
3594
- var s;
3595
- return /* @__PURE__ */ a("div", { className: "destination-item", children: [
3596
- /* @__PURE__ */ a("div", { className: "destination-header", children: [
3597
- /* @__PURE__ */ e(
3598
- "span",
3599
- {
3600
- className: "status-indicator",
3601
- style: { backgroundColor: ce(r.status) }
3602
- }
3603
- ),
3604
- /* @__PURE__ */ e("span", { className: "destination-icon", children: (s = fe.find((m) => m.platform === r.platform)) == null ? void 0 : s.icon }),
3605
- /* @__PURE__ */ e("span", { className: "destination-name", children: r.name }),
3606
- /* @__PURE__ */ a("label", { className: "toggle", children: [
3607
- /* @__PURE__ */ e(
3608
- "input",
3609
- {
3610
- type: "checkbox",
3611
- checked: r.enabled,
3612
- onChange: (m) => q(r.id, { enabled: m.target.checked }),
3613
- disabled: y
3614
- }
3615
- ),
3616
- /* @__PURE__ */ e("span", { className: "toggle-slider" })
3617
- ] })
3618
- ] }),
3619
- /* @__PURE__ */ a("div", { className: "destination-config", children: [
3620
- /* @__PURE__ */ a("label", { children: [
3621
- "Server URL",
3622
- /* @__PURE__ */ e(
3623
- "input",
3624
- {
3625
- type: "text",
3626
- value: r.url,
3627
- onChange: (m) => q(r.id, { url: m.target.value }),
3628
- placeholder: "rtmp://...",
3629
- disabled: y
3630
- }
3631
- )
3632
- ] }),
3633
- /* @__PURE__ */ a("label", { children: [
3634
- "Stream Key",
3635
- /* @__PURE__ */ e(
3636
- "input",
3637
- {
3638
- type: "password",
3639
- value: r.streamKey || "",
3640
- onChange: (m) => q(r.id, { streamKey: m.target.value }),
3641
- placeholder: "Enter stream key",
3642
- disabled: y
3643
- }
3644
- )
3645
- ] })
3646
- ] }),
3647
- /* @__PURE__ */ e(
3648
- "button",
3649
- {
3650
- className: "remove-button",
3651
- onClick: () => G(r.id),
3652
- disabled: y,
3653
- children: "Remove"
3654
- }
3655
- )
3656
- ] }, r.id);
3657
- }),
3658
- n.destinations.length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No destinations configured" })
3659
- ] })
3660
- ] }),
3661
- b === "settings" && /* @__PURE__ */ a("div", { className: "settings-panel", children: [
3662
- /* @__PURE__ */ a("div", { className: "setting-section", children: [
3663
- /* @__PURE__ */ e("h4", { children: "Video" }),
3664
- /* @__PURE__ */ a("label", { children: [
3665
- "Resolution",
3666
- /* @__PURE__ */ a(
3667
- "select",
3668
- {
3669
- value: `${n.settings.video.resolution.width}x${n.settings.video.resolution.height}`,
3670
- onChange: (r) => {
3671
- const [s, m] = r.target.value.split("x").map(Number);
3672
- N({
3673
- settings: {
3674
- ...n.settings,
3675
- video: { ...n.settings.video, resolution: { width: s, height: m } }
3676
- },
3677
- layout: {
3678
- ...n.layout,
3679
- canvas: { ...n.layout.canvas, width: s, height: m }
3680
- }
3681
- });
3682
- },
3683
- disabled: y,
3684
- children: [
3685
- /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
3686
- /* @__PURE__ */ e("option", { value: "1280x720", children: "720p (1280x720)" }),
3687
- /* @__PURE__ */ e("option", { value: "2560x1440", children: "1440p (2560x1440)" })
3688
- ]
3689
- }
3690
- )
3691
- ] }),
3692
- /* @__PURE__ */ a("label", { children: [
3693
- "Frame Rate",
3694
- /* @__PURE__ */ a(
3695
- "select",
3696
- {
3697
- value: n.settings.video.frameRate,
3698
- onChange: (r) => N({
3699
- settings: {
3700
- ...n.settings,
3701
- video: {
3702
- ...n.settings.video,
3703
- frameRate: parseInt(r.target.value)
3704
- }
3705
- }
3706
- }),
3707
- disabled: y,
3708
- children: [
3709
- /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
3710
- /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
3711
- /* @__PURE__ */ e("option", { value: "60", children: "60 fps" })
3712
- ]
3713
- }
3714
- )
3715
- ] }),
3716
- /* @__PURE__ */ a("label", { children: [
3717
- "Bitrate (kbps)",
3718
- /* @__PURE__ */ e(
3719
- "input",
3720
- {
3721
- type: "number",
3722
- value: n.settings.video.bitrate,
3723
- onChange: (r) => N({
3724
- settings: {
3725
- ...n.settings,
3726
- video: {
3727
- ...n.settings.video,
3728
- bitrate: parseInt(r.target.value) || 6e3
3729
- }
3730
- }
3731
- }),
3732
- min: "1000",
3733
- max: "50000",
3734
- disabled: y
3735
- }
3736
- )
3737
- ] }),
3738
- /* @__PURE__ */ a("label", { children: [
3739
- "Keyframe Interval (sec)",
3740
- /* @__PURE__ */ e(
3741
- "input",
3742
- {
3743
- type: "number",
3744
- value: n.settings.video.keyframe,
3745
- onChange: (r) => N({
3746
- settings: {
3747
- ...n.settings,
3748
- video: {
3749
- ...n.settings.video,
3750
- keyframe: parseInt(r.target.value) || 2
3751
- }
3752
- }
3753
- }),
3754
- min: "1",
3755
- max: "10",
3756
- disabled: y
3757
- }
3758
- )
3759
- ] })
3760
- ] }),
3761
- /* @__PURE__ */ a("div", { className: "setting-section", children: [
3762
- /* @__PURE__ */ e("h4", { children: "Audio" }),
3763
- /* @__PURE__ */ a("label", { children: [
3764
- "Sample Rate",
3765
- /* @__PURE__ */ a(
3766
- "select",
3767
- {
3768
- value: n.settings.audio.sampleRate,
3769
- onChange: (r) => N({
3770
- settings: {
3771
- ...n.settings,
3772
- audio: {
3773
- ...n.settings.audio,
3774
- sampleRate: parseInt(r.target.value)
3775
- }
3776
- }
3777
- }),
3778
- disabled: y,
3779
- children: [
3780
- /* @__PURE__ */ e("option", { value: "44100", children: "44.1 kHz" }),
3781
- /* @__PURE__ */ e("option", { value: "48000", children: "48 kHz" })
3782
- ]
3783
- }
3784
- )
3785
- ] }),
3786
- /* @__PURE__ */ a("label", { children: [
3787
- "Audio Bitrate (kbps)",
3788
- /* @__PURE__ */ a(
3789
- "select",
3790
- {
3791
- value: n.settings.audio.bitrate,
3792
- onChange: (r) => N({
3793
- settings: {
3794
- ...n.settings,
3795
- audio: { ...n.settings.audio, bitrate: parseInt(r.target.value) }
3796
- }
3797
- }),
3798
- disabled: y,
3799
- children: [
3800
- /* @__PURE__ */ e("option", { value: "96", children: "96 kbps" }),
3801
- /* @__PURE__ */ e("option", { value: "128", children: "128 kbps" }),
3802
- /* @__PURE__ */ e("option", { value: "160", children: "160 kbps" }),
3803
- /* @__PURE__ */ e("option", { value: "320", children: "320 kbps" })
3804
- ]
3805
- }
3806
- )
3807
- ] })
3808
- ] })
3809
- ] })
3810
- ] })
3811
- ] })
3812
- ] }),
3813
- y && /* @__PURE__ */ e("footer", { className: "streaming__footer", children: /* @__PURE__ */ a("div", { className: "footer-stats", children: [
3814
- /* @__PURE__ */ a("span", { className: "stat", children: [
3815
- /* @__PURE__ */ e("label", { children: "CPU" }),
3816
- /* @__PURE__ */ a("span", { className: "value", children: [
3817
- S.cpuUsage.toFixed(1),
3818
- "%"
3819
- ] })
3820
- ] }),
3821
- /* @__PURE__ */ a("span", { className: "stat", children: [
3822
- /* @__PURE__ */ e("label", { children: "Memory" }),
3823
- /* @__PURE__ */ a("span", { className: "value", children: [
3824
- S.memoryUsage.toFixed(1),
3825
- "%"
3826
- ] })
3827
- ] }),
3828
- /* @__PURE__ */ a("span", { className: "stat", children: [
3829
- /* @__PURE__ */ e("label", { children: "Dropped" }),
3830
- /* @__PURE__ */ e("span", { className: "value", children: S.droppedFrames })
3831
- ] }),
3832
- /* @__PURE__ */ a("span", { className: "stat", children: [
3833
- /* @__PURE__ */ e("label", { children: "Peak Viewers" }),
3834
- /* @__PURE__ */ e("span", { className: "value", children: S.peakViewers })
3835
- ] })
3836
- ] }) }),
3837
- F && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ a("div", { className: "modal", children: [
3838
- /* @__PURE__ */ a("div", { className: "modal-header", children: [
3839
- /* @__PURE__ */ e("h3", { children: "Add Source" }),
3840
- /* @__PURE__ */ e("button", { className: "close-button", onClick: () => M(!1), children: "×" })
3841
- ] }),
3842
- /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "source-type-grid", children: de.map((r) => /* @__PURE__ */ a(
3843
- "button",
3844
- {
3845
- className: "source-type-button",
3846
- onClick: () => ee(r.type),
3847
- children: [
3848
- /* @__PURE__ */ e("span", { className: "icon", children: r.icon }),
3849
- /* @__PURE__ */ e("span", { className: "name", children: r.name })
3850
- ]
3851
- },
3852
- r.type
3853
- )) }) })
3854
- ] }) }),
3855
- Z && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ a("div", { className: "modal", children: [
3856
- /* @__PURE__ */ a("div", { className: "modal-header", children: [
3857
- /* @__PURE__ */ e("h3", { children: "Add Destination" }),
3858
- /* @__PURE__ */ e("button", { className: "close-button", onClick: () => K(!1), children: "×" })
3859
- ] }),
3860
- /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "platform-grid", children: fe.map((r) => /* @__PURE__ */ a(
3861
- "button",
3862
- {
3863
- className: "platform-button",
3864
- onClick: () => W(r.platform),
3865
- children: [
3866
- /* @__PURE__ */ e("span", { className: "icon", children: r.icon }),
3867
- /* @__PURE__ */ e("span", { className: "name", children: r.name })
3868
- ]
3869
- },
3870
- r.platform
3871
- )) }) })
3872
- ] }) })
3873
- ] });
3874
- };
1
+ import { N as r, a, b as c } from "./index-C8x_yquz.js";
3875
2
  export {
3876
- aa as NiceLiveStreaming,
3877
- ea as NiceScreenRecorder,
3878
- Xe as NiceVideoEditor
3
+ r as NiceLiveStreaming,
4
+ a as NiceScreenRecorder,
5
+ c as NiceVideoEditor
3879
6
  };