@nice2dev/ui-video 1.0.28 → 1.0.30

package/dist/index.mjs

@@ -1,18 +1,88 @@
-import { jsx as e, jsxs as r, Fragment as ie } from "react/jsx-runtime";
-import { useContext as ye, createContext as $, memo as Se, useState as v, useEffect as ne, useRef as F, useCallback as me } from "react";
-const He = (l, m) => m, Te = $(He);
-function Ie() {
-  return { t: ye(Te) };
+import { jsxs as a, jsx as e, Fragment as le } from "react/jsx-runtime";
+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";
+const he = He(
+  ({
+    menubar: d,
+    toolbar: f,
+    sidebar: l,
+    sidebarWidth: C = 220,
+    rightSidebar: H,
+    rightSidebarWidth: I = 280,
+    children: p,
+    bottomPanel: n,
+    bottomPanelHeight: R,
+    statusBar: b,
+    height: D = "100%",
+    flush: y = !1,
+    className: x,
+    style: S,
+    id: A,
+    "data-testid": _
+  }, O) => {
+    const F = `nice-app-shell__sidebar${y ? " nice-app-shell__sidebar--flush" : ""}`;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: O,
+        id: A,
+        "data-testid": _,
+        className: `nice-app-shell${x ? ` ${x}` : ""}`,
+        style: { height: D, ...S },
+        children: [
+          d != null && /* @__PURE__ */ e(
+            "div",
+            {
+              className: `nice-app-shell__menubar${y ? " nice-app-shell__chrome--flush" : ""}`,
+              children: d
+            }
+          ),
+          f != null && /* @__PURE__ */ e(
+            "div",
+            {
+              className: `nice-app-shell__toolbar${y ? " nice-app-shell__chrome--flush" : ""}`,
+              children: f
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "nice-app-shell__body", children: [
+            l != null && /* @__PURE__ */ e("aside", { className: F, style: y ? void 0 : { width: C }, children: l }),
+            /* @__PURE__ */ e("main", { className: "nice-app-shell__content", children: p }),
+            H != null && /* @__PURE__ */ e(
+              "aside",
+              {
+                className: `${F} nice-app-shell__sidebar--right`,
+                style: y ? void 0 : { width: I },
+                children: H
+              }
+            )
+          ] }),
+          n != null && /* @__PURE__ */ e(
+            "div",
+            {
+              className: `nice-app-shell__bottom${y ? " nice-app-shell__bottom--flush" : ""}`,
+              style: R != null ? { height: R } : void 0,
+              children: n
+            }
+          ),
+          b != null && /* @__PURE__ */ e("div", { className: "nice-app-shell__status", children: b })
+        ]
+      }
+    );
+  }
+);
+he.displayName = "NiceAppShell";
+const Ie = (d, f) => f, _e = $(Ie);
+function Re() {
+  return { t: ye(_e) };
 }
 $({
   dir: "ltr",
   isRTL: !1,
-  flip: (l) => l,
-  value: (l) => l.ltr
+  flip: (d) => d,
+  value: (d) => d.ltr
 });
 $(null);
 $(null);
-const Re = {
+const Me = {
   radius: "md",
   shadow: "md",
   fill: "solid",
@@ -31,7 +101,7 @@ const Re = {
 };
 $({
   displayStyle: "default",
-  variantConfig: Re,
+  variantConfig: Me,
   setDisplayStyle: () => {
   }
 });
@@ -39,103 +109,103 @@ $({});
 $({
   direction: "ltr",
   isRTL: !1,
-  flip: (l) => l,
-  flipStyle: (l, m) => ({ [l]: m })
+  flip: (d) => d,
+  flipStyle: (d, f) => ({ [d]: f })
 });
 $({
   permissions: {},
   getAccessMode: () => "full"
 });
 $(null);
-const Me = process.env.NODE_ENV === "development";
-let he = {
-  enabled: Me,
+const $e = process.env.NODE_ENV === "development";
+let be = {
+  enabled: $e,
   slowRenderThreshold: 16
 };
-const be = [], pe = /* @__PURE__ */ new Map(), ve = /* @__PURE__ */ new Map();
+const ve = [], pe = /* @__PURE__ */ new Map(), ge = /* @__PURE__ */ new Map();
 function De() {
-  be.length = 0, pe.clear(), ve.clear();
+  ve.length = 0, pe.clear(), ge.clear();
 }
-function _e(l) {
-  const m = he.slowRenderThreshold;
-  return be.filter((f) => f.actualDuration > m);
+function Ae(d) {
+  const f = be.slowRenderThreshold;
+  return ve.filter((l) => l.actualDuration > f);
 }
-function ae(l) {
-  return l < 1 ? `${(l * 1e3).toFixed(0)}μs` : l < 1e3 ? `${l.toFixed(2)}ms` : `${(l / 1e3).toFixed(2)}s`;
+function X(d) {
+  return d < 1 ? `${(d * 1e3).toFixed(0)}μs` : d < 1e3 ? `${d.toFixed(2)}ms` : `${(d / 1e3).toFixed(2)}s`;
 }
-function $e() {
-  const l = Array.from(pe.values()), m = _e(), f = l.reduce((I, p) => I + p.renderCount, 0), C = l.length > 0 ? l.reduce((I, p) => I + p.avgRenderTime, 0) / l.length : 0, T = Array.from(ve.values());
-  return { stats: l, slowRenders: m, totalRenders: f, avgRenderTime: C, marks: T };
+function Ee() {
+  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());
+  return { stats: d, slowRenders: f, totalRenders: l, avgRenderTime: C, marks: H };
 }
-function Ae() {
-  const l = $e();
+function ze() {
+  const d = Ee();
   console.group(
     "%c[Nice2Dev Performance Report]",
     "color: var(--nice-info, #6366f1); font-weight: bold; font-size: 14px"
-  ), console.log(`Total renders: ${l.totalRenders}`), console.log(`Average render time: ${ae(l.avgRenderTime)}`), console.log(`Slow renders: ${l.slowRenders.length}`), console.group("Component Stats"), console.table(
-    l.stats.sort((m, f) => f.totalRenderTime - m.totalRenderTime).map((m) => ({
-      Name: m.componentName,
-      Renders: m.renderCount,
-      "Avg Time": ae(m.avgRenderTime),
-      "Max Time": ae(m.maxRenderTime),
-      "Total Time": ae(m.totalRenderTime),
-      "Slow Renders": m.slowRenderCount
+  ), 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(
+    d.stats.sort((f, l) => l.totalRenderTime - f.totalRenderTime).map((f) => ({
+      Name: f.componentName,
+      Renders: f.renderCount,
+      "Avg Time": X(f.avgRenderTime),
+      "Max Time": X(f.maxRenderTime),
+      "Total Time": X(f.totalRenderTime),
+      "Slow Renders": f.slowRenderCount
     }))
-  ), console.groupEnd(), l.slowRenders.length > 0 && (console.group("Slow Renders (last 10)"), console.table(
-    l.slowRenders.slice(-10).map((m) => ({
-      Component: m.componentName,
-      Phase: m.phase,
-      Duration: ae(m.actualDuration),
-      Time: new Date(m.timestamp).toLocaleTimeString()
+  ), console.groupEnd(), d.slowRenders.length > 0 && (console.group("Slow Renders (last 10)"), console.table(
+    d.slowRenders.slice(-10).map((f) => ({
+      Component: f.componentName,
+      Phase: f.phase,
+      Duration: X(f.actualDuration),
+      Time: new Date(f.timestamp).toLocaleTimeString()
     }))
-  ), console.groupEnd()), l.marks.length > 0 && (console.group("Custom Marks"), console.table(
-    l.marks.filter((m) => m.duration).map((m) => ({
-      Name: m.name,
-      Duration: ae(m.duration)
+  ), console.groupEnd()), d.marks.length > 0 && (console.group("Custom Marks"), console.table(
+    d.marks.filter((f) => f.duration).map((f) => ({
+      Name: f.name,
+      Duration: X(f.duration)
     }))
   ), console.groupEnd()), console.groupEnd();
 }
-const Ee = Se(
-  ({ position: l = "bottom-right", defaultCollapsed: m = !0 }) => {
-    const [f, C] = v(m), [T, I] = v([]), [p, i] = v({ used: 0, total: 0 });
-    if (ne(() => {
+const Pe = Te(
+  ({ position: d = "bottom-right", defaultCollapsed: f = !0 }) => {
+    const [l, C] = w(f), [H, I] = w([]), [p, n] = w({ used: 0, total: 0 });
+    if (re(() => {
       const b = () => {
         const y = Array.from(pe.values());
-        I(y.sort((S, z) => z.totalRenderTime - S.totalRenderTime).slice(0, 10));
-        const k = window.performance;
-        k.memory && i({
-          used: k.memory.usedJSHeapSize / 1024 / 1024,
-          total: k.memory.totalJSHeapSize / 1024 / 1024
+        I(y.sort((S, A) => A.totalRenderTime - S.totalRenderTime).slice(0, 10));
+        const x = window.performance;
+        x.memory && n({
+          used: x.memory.usedJSHeapSize / 1024 / 1024,
+          total: x.memory.totalJSHeapSize / 1024 / 1024
         });
       };
       b();
-      const E = setInterval(b, 2e3);
-      return () => clearInterval(E);
-    }, []), !he.enabled)
+      const D = setInterval(b, 2e3);
+      return () => clearInterval(D);
+    }, []), !be.enabled)
       return null;
-    const D = {
+    const R = {
       position: "fixed",
       zIndex: 99999,
-      ...l.includes("top") ? { top: 8 } : { bottom: 8 },
-      ...l.includes("left") ? { left: 8 } : { right: 8 }
+      ...d.includes("top") ? { top: 8 } : { bottom: 8 },
+      ...d.includes("left") ? { left: 8 } : { right: 8 }
     };
-    return /* @__PURE__ */ r(
+    return /* @__PURE__ */ a(
       "div",
       {
         style: {
-          ...D,
+          ...R,
           background: "var(--nice-overlay-85, rgba(0, 0, 0, 0.85))",
           color: "var(--bg-primary, #fff)",
           borderRadius: 8,
           fontSize: 11,
           fontFamily: "Monaco, Consolas, monospace",
-          padding: f ? "4px 8px" : 8,
-          maxWidth: f ? "auto" : 300,
-          maxHeight: f ? "auto" : 400,
+          padding: l ? "4px 8px" : 8,
+          maxWidth: l ? "auto" : 300,
+          maxHeight: l ? "auto" : 400,
           overflow: "auto"
         },
         children: [
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
             "div",
             {
               style: { cursor: "pointer", display: "flex", alignItems: "center", gap: 8 },
@@ -143,7 +213,7 @@ const Ee = Se(
               children: [
                 /* @__PURE__ */ e("span", { style: { color: "var(--color-success, #22c55e)" }, children: "●" }),
                 /* @__PURE__ */ e("span", { children: "Profiler" }),
-                p.used > 0 && /* @__PURE__ */ r(
+                p.used > 0 && /* @__PURE__ */ a(
                   "span",
                   {
                     style: {
@@ -155,11 +225,11 @@ const Ee = Se(
                     ]
                   }
                 ),
-                /* @__PURE__ */ e("span", { style: { marginLeft: "auto", opacity: 0.5 }, children: f ? "▼" : "▲" })
+                /* @__PURE__ */ e("span", { style: { marginLeft: "auto", opacity: 0.5 }, children: l ? "▼" : "▲" })
               ]
             }
           ),
-          !f && /* @__PURE__ */ r("div", { style: { marginTop: 8 }, children: [
+          !l && /* @__PURE__ */ a("div", { style: { marginTop: 8 }, children: [
             /* @__PURE__ */ e(
               "div",
               {
@@ -171,7 +241,7 @@ const Ee = Se(
                 children: /* @__PURE__ */ e("strong", { children: "Top Components" })
               }
             ),
-            T.map((b) => /* @__PURE__ */ r("div", { style: { marginBottom: 4, display: "flex", gap: 8 }, children: [
+            H.map((b) => /* @__PURE__ */ a("div", { style: { marginBottom: 4, display: "flex", gap: 8 }, children: [
               /* @__PURE__ */ e("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: b.componentName }),
               /* @__PURE__ */ e(
                 "span",
@@ -179,10 +249,10 @@ const Ee = Se(
                   style: {
                     color: b.avgRenderTime > 16 ? "var(--color-warning, #f59e0b)" : "var(--color-success, #22c55e)"
                   },
-                  children: ae(b.avgRenderTime)
+                  children: X(b.avgRenderTime)
                 }
               ),
-              /* @__PURE__ */ r(
+              /* @__PURE__ */ a(
                 "span",
                 {
                   style: { color: "var(--text-muted, #64748b)", minWidth: 30, textAlign: "right" },
@@ -193,11 +263,11 @@ const Ee = Se(
                 }
               )
             ] }, b.componentName)),
-            /* @__PURE__ */ r("div", { style: { marginTop: 8, display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ a("div", { style: { marginTop: 8, display: "flex", gap: 8 }, children: [
               /* @__PURE__ */ e(
                 "button",
                 {
-                  onClick: Ae,
+                  onClick: ze,
                   style: {
                     flex: 1,
                     padding: "4px 8px",
@@ -235,70 +305,70 @@ const Ee = Se(
     );
   }
 );
-Ee.displayName = "ProfilerOverlay";
+Pe.displayName = "ProfilerOverlay";
 process.env.NODE_ENV;
 $(null);
-const ze = $({
+const Ue = $({
   enabled: !0,
   active: !1,
   run: () => {
   }
 });
-function Pe() {
-  return ye(ze);
+function Fe() {
+  return ye(Ue);
 }
-function Ue(l, m) {
-  if (!l)
+function Le(d, f) {
+  if (!d)
     return null;
-  if (l === !0)
-    return m && m.length > 0 ? m : null;
-  if (Array.isArray(l))
-    return l.length > 0 ? l : null;
-  const f = l.steps ?? m;
-  return f && f.length > 0 ? f : null;
+  if (d === !0)
+    return f && f.length > 0 ? f : null;
+  if (Array.isArray(d))
+    return d.length > 0 ? d : null;
+  const l = d.steps ?? f;
+  return l && l.length > 0 ? l : null;
 }
-function Fe(l, m) {
-  return l.map((f) => ({
-    target: f.target,
-    title: f.titleKey ? m(f.titleKey, f.title ?? "") : f.title ?? "",
-    content: f.contentKey ? m(f.contentKey, f.content ?? "") : f.content ?? "",
-    placement: f.placement,
-    highlightPadding: f.highlightPadding,
-    showArrow: f.showArrow,
-    scrollIntoView: f.scrollIntoView,
-    disableInteraction: f.disableInteraction
+function Ve(d, f) {
+  return d.map((l) => ({
+    target: l.target,
+    title: l.titleKey ? f(l.titleKey, l.title ?? "") : l.title ?? "",
+    content: l.contentKey ? f(l.contentKey, l.content ?? "") : l.content ?? "",
+    placement: l.placement,
+    highlightPadding: l.highlightPadding,
+    showArrow: l.showArrow,
+    scrollIntoView: l.scrollIntoView,
+    disableInteraction: l.disableInteraction
   }));
 }
-const Le = ({
-  steps: l,
-  autoStart: m,
-  label: f,
+const Oe = ({
+  steps: d,
+  autoStart: f,
+  label: l,
   size: C = "md",
-  className: T,
+  className: H,
   style: I,
   "data-testid": p
 }) => {
-  const { enabled: i, run: D } = Pe(), { t: b } = Ie();
-  if (!i || !l || l.length === 0)
+  const { enabled: n, run: R } = Fe(), { t: b } = Re();
+  if (!n || !d || d.length === 0)
     return null;
-  const E = f ?? b("tutorial.startAria", "Start tutorial");
+  const D = l ?? b("tutorial.startAria", "Start tutorial");
   return /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      className: `nice-tutorial-button nice-tutorial-button--${C}` + (T ? ` ${T}` : ""),
+      className: `nice-tutorial-button nice-tutorial-button--${C}` + (H ? ` ${H}` : ""),
       style: I,
       "data-testid": p,
-      "aria-label": E,
-      title: E,
-      onClick: () => D(Fe(l, b), { autoStart: m }),
+      "aria-label": D,
+      title: D,
+      onClick: () => R(Ve(d, b), { autoStart: f }),
       children: "?"
     }
   );
 }, ue = "nice-tutorial-button-styles";
 if (typeof document < "u" && !document.getElementById(ue)) {
-  const l = document.createElement("style");
-  l.id = ue, l.textContent = `
+  const d = document.createElement("style");
+  d.id = ue, d.textContent = `
     .nice-tutorial-button {
       display: inline-flex;
       align-items: center;
@@ -324,12 +394,12 @@ if (typeof document < "u" && !document.getElementById(ue)) {
     }
     .nice-tutorial-button--sm { width: 16px; height: 16px; font-size: 11px; }
     .nice-tutorial-button--md { width: 20px; height: 20px; font-size: 12px; }
-  `, document.head.appendChild(l);
+  `, document.head.appendChild(d);
 }
 $(null);
 $(null);
 $(null);
-const ge = {
+const we = {
   space1: "4px",
   space2: "8px",
   space3: "12px",
@@ -337,7 +407,7 @@ const ge = {
   space5: "20px",
   space6: "24px",
   space8: "32px"
-}, we = {
+}, Ne = {
   fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
   fontSizeXs: "0.75rem",
   fontSizeSm: "0.8125rem",
@@ -349,71 +419,71 @@ const ge = {
   fontWeightSemibold: 600,
   fontWeightBold: 700,
   lineHeight: 1.5
-}, Ne = { fast: "120ms ease", normal: "200ms ease", slow: "300ms ease" }, ke = (l) => ({
-  color: l,
+}, ke = { fast: "120ms ease", normal: "200ms ease", slow: "300ms ease" }, xe = (d) => ({
+  color: d,
   radiusSm: "4px",
   radiusMd: "6px",
   radiusLg: "8px",
   radiusXl: "12px",
   radiusFull: "9999px"
-}), Ve = {
+}), Be = {
   sm: "0 1px 2px rgba(0,0,0,0.05)",
   md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
   lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
   xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)"
-}, Oe = {
+}, We = {
   sm: "0 1px 2px rgba(0,0,0,0.3)",
   md: "0 4px 6px -1px rgba(0,0,0,0.4)",
   lg: "0 10px 15px -3px rgba(0,0,0,0.4)",
   xl: "0 20px 25px -5px rgba(0,0,0,0.4)"
 };
-function d(l, m, f, C, T) {
+function c(d, f, l, C, H) {
   return {
-    name: l,
+    name: d,
     darkMode: "light",
     colors: {
-      ...m,
-      surface: m.surface ?? f.primary,
-      surfaceHover: m.surfaceHover ?? f.secondary
+      ...f,
+      surface: f.surface ?? l.primary,
+      surfaceHover: f.surfaceHover ?? l.secondary
     },
     backgrounds: {
-      ...f,
-      elevated: f.elevated ?? f.primary,
-      inset: f.inset ?? f.tertiary,
-      canvas: f.canvas ?? f.primary
+      ...l,
+      elevated: l.elevated ?? l.primary,
+      inset: l.inset ?? l.tertiary,
+      canvas: l.canvas ?? l.primary
     },
     text: { ...C, inverse: C.inverse ?? "#ffffff" },
-    borders: ke(T),
-    shadows: Ve,
-    spacing: ge,
-    typography: we,
-    transitions: Ne
+    borders: xe(H),
+    shadows: Be,
+    spacing: we,
+    typography: Ne,
+    transitions: ke
   };
 }
-function x(l, m, f, C, T) {
+function T(d, f, l, C, H) {
   return {
-    name: l,
+    name: d,
     darkMode: "dark",
     colors: {
-      ...m,
-      surface: m.surface ?? f.secondary,
-      surfaceHover: m.surfaceHover ?? f.tertiary
+      ...f,
+      surface: f.surface ?? l.secondary,
+      surfaceHover: f.surfaceHover ?? l.tertiary
     },
     backgrounds: {
-      ...f,
-      elevated: f.elevated ?? f.secondary,
-      inset: f.inset ?? f.primary,
-      canvas: f.canvas ?? f.primary
+      ...l,
+      elevated: l.elevated ?? l.secondary,
+      inset: l.inset ?? l.primary,
+      canvas: l.canvas ?? l.primary
     },
     text: { ...C, inverse: C.inverse ?? "#0f172a" },
-    borders: ke(T),
-    shadows: Oe,
-    spacing: ge,
-    typography: we,
-    transitions: Ne
+    borders: xe(H),
+    shadows: We,
+    spacing: we,
+    typography: Ne,
+    transitions: ke
   };
 }
-d(
+c(
   "Slate",
   {
     primary: "#64748b",
@@ -427,7 +497,7 @@ d(
   { primary: "#1e293b", secondary: "#475569", muted: "#94a3b8" },
   "#cbd5e1"
 );
-d(
+c(
   "Zinc",
   {
     primary: "#71717a",
@@ -441,7 +511,7 @@ d(
   { primary: "#18181b", secondary: "#3f3f46", muted: "#a1a1aa" },
   "#d4d4d8"
 );
-d(
+c(
   "Stone",
   {
     primary: "#78716c",
@@ -455,7 +525,7 @@ d(
   { primary: "#1c1917", secondary: "#44403c", muted: "#a8a29e" },
   "#d6d3d1"
 );
-d(
+c(
   "Cool Gray",
   {
     primary: "#6b7280",
@@ -469,7 +539,7 @@ d(
   { primary: "#111827", secondary: "#374151", muted: "#9ca3af" },
   "#d1d5db"
 );
-d(
+c(
   "Warm Gray",
   {
     primary: "#7c7568",
@@ -483,7 +553,7 @@ d(
   { primary: "#1f1d19", secondary: "#4a463d", muted: "#a09888" },
   "#d4d0c8"
 );
-d(
+c(
   "Silver",
   {
     primary: "#94a3b8",
@@ -497,7 +567,7 @@ d(
   { primary: "#334155", secondary: "#64748b", muted: "#94a3b8" },
   "#cbd5e1"
 );
-d(
+c(
   "Charcoal",
   {
     primary: "#374151",
@@ -511,7 +581,7 @@ d(
   { primary: "#111827", secondary: "#374151", muted: "#6b7280" },
   "#d1d5db"
 );
-d(
+c(
   "Ivory",
   {
     primary: "#92876d",
@@ -525,7 +595,7 @@ d(
   { primary: "#2b2517", secondary: "#5c5340", muted: "#9c9280" },
   "#ddd8c4"
 );
-d(
+c(
   "Rose",
   {
     primary: "#e11d48",
@@ -539,7 +609,7 @@ d(
   { primary: "#4c0519", secondary: "#881337", muted: "#f43f5e" },
   "#fda4af"
 );
-d(
+c(
   "Emerald",
   {
     primary: "#059669",
@@ -553,7 +623,7 @@ d(
   { primary: "#064e3b", secondary: "#065f46", muted: "#34d399" },
   "#6ee7b7"
 );
-d(
+c(
   "Amber",
   {
     primary: "#d97706",
@@ -567,7 +637,7 @@ d(
   { primary: "#451a03", secondary: "#78350f", muted: "#f59e0b" },
   "#fcd34d"
 );
-d(
+c(
   "Violet",
   {
     primary: "#7c3aed",
@@ -581,7 +651,7 @@ d(
   { primary: "#2e1065", secondary: "#4c1d95", muted: "#a78bfa" },
   "#c4b5fd"
 );
-d(
+c(
   "Teal",
   {
     primary: "#0d9488",
@@ -595,7 +665,7 @@ d(
   { primary: "#134e4a", secondary: "#115e59", muted: "#2dd4bf" },
   "#5eead4"
 );
-d(
+c(
   "Indigo",
   {
     primary: "#4f46e5",
@@ -609,7 +679,7 @@ d(
   { primary: "#1e1b4b", secondary: "#312e81", muted: "#818cf8" },
   "#a5b4fc"
 );
-d(
+c(
   "Cyan",
   {
     primary: "#0891b2",
@@ -623,7 +693,7 @@ d(
   { primary: "#164e63", secondary: "#155e75", muted: "#22d3ee" },
   "#67e8f9"
 );
-d(
+c(
   "Lime",
   {
     primary: "#65a30d",
@@ -637,7 +707,7 @@ d(
   { primary: "#1a2e05", secondary: "#365314", muted: "#84cc16" },
   "#bef264"
 );
-d(
+c(
   "Pink",
   {
     primary: "#db2777",
@@ -651,7 +721,7 @@ d(
   { primary: "#500724", secondary: "#831843", muted: "#f472b6" },
   "#f9a8d4"
 );
-d(
+c(
   "Orange",
   {
     primary: "#ea580c",
@@ -665,7 +735,7 @@ d(
   { primary: "#431407", secondary: "#7c2d12", muted: "#fb923c" },
   "#fdba74"
 );
-d(
+c(
   "Fuchsia",
   {
     primary: "#c026d3",
@@ -679,7 +749,7 @@ d(
   { primary: "#4a044e", secondary: "#701a75", muted: "#d946ef" },
   "#e879f9"
 );
-d(
+c(
   "Sky",
   {
     primary: "#0284c7",
@@ -693,7 +763,7 @@ d(
   { primary: "#0c4a6e", secondary: "#075985", muted: "#38bdf8" },
   "#7dd3fc"
 );
-d(
+c(
   "Ruby",
   {
     primary: "#be123c",
@@ -707,7 +777,7 @@ d(
   { primary: "#4c0519", secondary: "#881337", muted: "#fb7185" },
   "#fda4af"
 );
-d(
+c(
   "Coral",
   {
     primary: "#f97316",
@@ -721,7 +791,7 @@ d(
   { primary: "#431407", secondary: "#9a3412", muted: "#fb923c" },
   "#fdba74"
 );
-x(
+T(
   "Midnight",
   {
     primary: "#818cf8",
@@ -735,7 +805,7 @@ x(
   { primary: "#f1f5f9", secondary: "#94a3b8", muted: "#475569" },
   "#1e293b"
 );
-x(
+T(
   "Obsidian",
   {
     primary: "#a78bfa",
@@ -749,7 +819,7 @@ x(
   { primary: "#fafafa", secondary: "#a1a1aa", muted: "#52525b" },
   "#3f3f46"
 );
-x(
+T(
   "Eclipse",
   {
     primary: "#c084fc",
@@ -763,7 +833,7 @@ x(
   { primary: "#f5f3ff", secondary: "#a78bfa", muted: "#6d5eac" },
   "#3b3266"
 );
-x(
+T(
   "Onyx",
   {
     primary: "#60a5fa",
@@ -777,7 +847,7 @@ x(
   { primary: "#ffffff", secondary: "#a3a3a3", muted: "#525252" },
   "#262626"
 );
-x(
+T(
   "Carbon",
   {
     primary: "#38bdf8",
@@ -791,7 +861,7 @@ x(
   { primary: "#f4f4f4", secondary: "#c6c6c6", muted: "#6f6f6f" },
   "#525252"
 );
-x(
+T(
   "Cosmos",
   {
     primary: "#6366f1",
@@ -805,7 +875,7 @@ x(
   { primary: "#e5e7eb", secondary: "#9ca3af", muted: "#4b5563" },
   "#374151"
 );
-x(
+T(
   "Nebula",
   {
     primary: "#e879f9",
@@ -819,7 +889,7 @@ x(
   { primary: "#fae8ff", secondary: "#d8b4fe", muted: "#7c3aed" },
   "#581c87"
 );
-x(
+T(
   "Abyss",
   {
     primary: "#22d3ee",
@@ -833,7 +903,7 @@ x(
   { primary: "#e0f2fe", secondary: "#7dd3fc", muted: "#0369a1" },
   "#075985"
 );
-x(
+T(
   "Shadow",
   {
     primary: "#a3a3a3",
@@ -847,7 +917,7 @@ x(
   { primary: "#e5e5e5", secondary: "#a3a3a3", muted: "#525252" },
   "#404040"
 );
-x(
+T(
   "Emerald Dark",
   {
     primary: "#34d399",
@@ -861,7 +931,7 @@ x(
   { primary: "#ecfdf5", secondary: "#6ee7b7", muted: "#047857" },
   "#047857"
 );
-d(
+c(
   "Forest",
   {
     primary: "#166534",
@@ -875,7 +945,7 @@ d(
   { primary: "#052e16", secondary: "#166534", muted: "#4ade80" },
   "#86efac"
 );
-d(
+c(
   "Ocean",
   {
     primary: "#0369a1",
@@ -889,7 +959,7 @@ d(
   { primary: "#0c4a6e", secondary: "#0369a1", muted: "#38bdf8" },
   "#7dd3fc"
 );
-d(
+c(
   "Desert",
   {
     primary: "#b45309",
@@ -903,7 +973,7 @@ d(
   { primary: "#422006", secondary: "#713f12", muted: "#ca8a04" },
   "#fde047"
 );
-d(
+c(
   "Sunset",
   {
     primary: "#ea580c",
@@ -917,7 +987,7 @@ d(
   { primary: "#431407", secondary: "#9a3412", muted: "#f97316" },
   "#fdba74"
 );
-d(
+c(
   "Aurora",
   {
     primary: "#0d9488",
@@ -931,7 +1001,7 @@ d(
   { primary: "#134e4a", secondary: "#115e59", muted: "#2dd4bf" },
   "#5eead4"
 );
-d(
+c(
   "Lavender",
   {
     primary: "#7e22ce",
@@ -945,7 +1015,7 @@ d(
   { primary: "#3b0764", secondary: "#581c87", muted: "#a855f7" },
   "#d8b4fe"
 );
-d(
+c(
   "Autumn",
   {
     primary: "#c2410c",
@@ -959,7 +1029,7 @@ d(
   { primary: "#450a0a", secondary: "#7f1d1d", muted: "#f87171" },
   "#fca5a5"
 );
-d(
+c(
   "Spring",
   {
     primary: "#16a34a",
@@ -973,7 +1043,7 @@ d(
   { primary: "#14532d", secondary: "#166534", muted: "#4ade80" },
   "#86efac"
 );
-d(
+c(
   "Arctic",
   {
     primary: "#0ea5e9",
@@ -987,7 +1057,7 @@ d(
   { primary: "#0c4a6e", secondary: "#0369a1", muted: "#7dd3fc" },
   "#bae6fd"
 );
-d(
+c(
   "Tropical",
   {
     primary: "#0d9488",
@@ -1001,7 +1071,7 @@ d(
   { primary: "#064e3b", secondary: "#065f46", muted: "#6ee7b7" },
   "#a7f3d0"
 );
-d(
+c(
   "Pastel Rose",
   {
     primary: "#f472b6",
@@ -1015,7 +1085,7 @@ d(
   { primary: "#831843", secondary: "#9d174d", muted: "#f9a8d4" },
   "#f9a8d4"
 );
-d(
+c(
   "Pastel Sky",
   {
     primary: "#38bdf8",
@@ -1029,7 +1099,7 @@ d(
   { primary: "#075985", secondary: "#0369a1", muted: "#7dd3fc" },
   "#bae6fd"
 );
-d(
+c(
   "Pastel Mint",
   {
     primary: "#34d399",
@@ -1043,7 +1113,7 @@ d(
   { primary: "#065f46", secondary: "#047857", muted: "#6ee7b7" },
   "#a7f3d0"
 );
-d(
+c(
   "Pastel Peach",
   {
     primary: "#fb923c",
@@ -1057,7 +1127,7 @@ d(
   { primary: "#7c2d12", secondary: "#9a3412", muted: "#fdba74" },
   "#fed7aa"
 );
-d(
+c(
   "Pastel Lavender",
   {
     primary: "#a78bfa",
@@ -1071,7 +1141,7 @@ d(
   { primary: "#4c1d95", secondary: "#5b21b6", muted: "#c4b5fd" },
   "#ddd6fe"
 );
-d(
+c(
   "Pastel Lemon",
   {
     primary: "#facc15",
@@ -1085,7 +1155,7 @@ d(
   { primary: "#713f12", secondary: "#854d0e", muted: "#fde047" },
   "#fef08a"
 );
-d(
+c(
   "Pastel Sage",
   {
     primary: "#86efac",
@@ -1099,7 +1169,7 @@ d(
   { primary: "#166534", secondary: "#15803d", muted: "#86efac" },
   "#bbf7d0"
 );
-d(
+c(
   "Pastel Coral",
   {
     primary: "#fb7185",
@@ -1113,7 +1183,7 @@ d(
   { primary: "#881337", secondary: "#9f1239", muted: "#fda4af" },
   "#fecdd3"
 );
-d(
+c(
   "Banking",
   {
     primary: "#1e3a5f",
@@ -1127,7 +1197,7 @@ d(
   { primary: "#0f172a", secondary: "#334155", muted: "#94a3b8" },
   "#cbd5e1"
 );
-d(
+c(
   "Healthcare",
   {
     primary: "#0891b2",
@@ -1141,7 +1211,7 @@ d(
   { primary: "#134e4a", secondary: "#1a6b6a", muted: "#80cbc4" },
   "#b2dfdb"
 );
-d(
+c(
   "Legal",
   {
     primary: "#1e293b",
@@ -1155,7 +1225,7 @@ d(
   { primary: "#0f172a", secondary: "#44403c", muted: "#a8a29e" },
   "#d6d3d1"
 );
-d(
+c(
   "Tech Startup",
   {
     primary: "#7c3aed",
@@ -1169,7 +1239,7 @@ d(
   { primary: "#1e1b4b", secondary: "#4c1d95", muted: "#a78bfa" },
   "#c4b5fd"
 );
-d(
+c(
   "Enterprise",
   {
     primary: "#1e40af",
@@ -1183,7 +1253,7 @@ d(
   { primary: "#1e3a5f", secondary: "#1e40af", muted: "#60a5fa" },
   "#93c5fd"
 );
-d(
+c(
   "Government",
   {
     primary: "#1d4ed8",
@@ -1197,7 +1267,7 @@ d(
   { primary: "#0f172a", secondary: "#1e293b", muted: "#64748b" },
   "#cbd5e1"
 );
-d(
+c(
   "Education",
   {
     primary: "#059669",
@@ -1211,7 +1281,7 @@ d(
   { primary: "#064e3b", secondary: "#065f46", muted: "#6ee7b7" },
   "#a7f3d0"
 );
-d(
+c(
   "Real Estate",
   {
     primary: "#92400e",
@@ -1225,7 +1295,7 @@ d(
   { primary: "#422006", secondary: "#713f12", muted: "#d97706" },
   "#fcd34d"
 );
-d(
+c(
   "Nord",
   {
     primary: "#5e81ac",
@@ -1239,7 +1309,7 @@ d(
   { primary: "#2e3440", secondary: "#3b4252", muted: "#4c566a" },
   "#d8dee9"
 );
-x(
+T(
   "Dracula",
   {
     primary: "#bd93f9",
@@ -1253,7 +1323,7 @@ x(
   { primary: "#f8f8f2", secondary: "#c0c0c0", muted: "#6272a4" },
   "#44475a"
 );
-d(
+c(
   "Solarized Light",
   {
     primary: "#268bd2",
@@ -1267,7 +1337,7 @@ d(
   { primary: "#073642", secondary: "#586e75", muted: "#93a1a1" },
   "#eee8d5"
 );
-x(
+T(
   "Solarized Dark",
   {
     primary: "#268bd2",
@@ -1281,7 +1351,7 @@ x(
   { primary: "#eee8d5", secondary: "#93a1a1", muted: "#586e75" },
   "#073642"
 );
-x(
+T(
   "Monokai",
   {
     primary: "#66d9ef",
@@ -1295,7 +1365,7 @@ x(
   { primary: "#f8f8f2", secondary: "#cfcfc2", muted: "#75715e" },
   "#3e3d32"
 );
-x(
+T(
   "One Dark",
   {
     primary: "#61afef",
@@ -1309,7 +1379,7 @@ x(
   { primary: "#abb2bf", secondary: "#828997", muted: "#545862" },
   "#3e4452"
 );
-x(
+T(
   "Synthwave",
   {
     primary: "#ff7edb",
@@ -1323,7 +1393,7 @@ x(
   { primary: "#f0e4fc", secondary: "#b4a0cc", muted: "#6c5c84" },
   "#4a3866"
 );
-d(
+c(
   "Vaporwave",
   {
     primary: "#ff71ce",
@@ -1337,7 +1407,7 @@ d(
   { primary: "#4a1a4e", secondary: "#7b3f7d", muted: "#c080c0" },
   "#d8a8e8"
 );
-x(
+T(
   "Terminal Green",
   {
     primary: "#00ff41",
@@ -1351,7 +1421,7 @@ x(
   { primary: "#00ff41", secondary: "#00cc33", muted: "#008822" },
   "#003300"
 );
-d(
+c(
   "Sepia",
   {
     primary: "#8b6914",
@@ -1365,7 +1435,7 @@ d(
   { primary: "#3e2723", secondary: "#5d4037", muted: "#a1887f" },
   "#d7ccc8"
 );
-d(
+c(
   "Vintage",
   {
     primary: "#8d6e63",
@@ -1379,7 +1449,7 @@ d(
   { primary: "#3e2723", secondary: "#5d4037", muted: "#a1887f" },
   "#bcaaa4"
 );
-x(
+T(
   "Cyberpunk",
   {
     primary: "#00f0ff",
@@ -1393,7 +1463,7 @@ x(
   { primary: "#e0fbfc", secondary: "#80d4dd", muted: "#3a6b72" },
   "#1c3a44"
 );
-x(
+T(
   "Neon",
   {
     primary: "#ff00ff",
@@ -1407,7 +1477,7 @@ x(
   { primary: "#ffffff", secondary: "#cccccc", muted: "#666666" },
   "#333333"
 );
-x(
+T(
   "Retrowave",
   {
     primary: "#f77fbe",
@@ -1421,7 +1491,7 @@ x(
   { primary: "#ffe6f7", secondary: "#c9a0c9", muted: "#6b4c7a" },
   "#4a2d66"
 );
-d(
+c(
   "Christmas",
   {
     primary: "#c41e3a",
@@ -1435,7 +1505,7 @@ d(
   { primary: "#3b0a0a", secondary: "#7f1d1d", muted: "#dc6868" },
   "#e8a0a0"
 );
-x(
+T(
   "Halloween",
   {
     primary: "#ff6600",
@@ -1449,7 +1519,7 @@ x(
   { primary: "#ffedd5", secondary: "#fdba74", muted: "#9a5c28" },
   "#5c3400"
 );
-d(
+c(
   "Valentine",
   {
     primary: "#e11d48",
@@ -1463,7 +1533,7 @@ d(
   { primary: "#4c0519", secondary: "#881337", muted: "#f9a8d4" },
   "#fda4af"
 );
-d(
+c(
   "Easter",
   {
     primary: "#a78bfa",
@@ -1477,7 +1547,7 @@ d(
   { primary: "#581c87", secondary: "#6d28d9", muted: "#c4b5fd" },
   "#ddd6fe"
 );
-d(
+c(
   "Summer Beach",
   {
     primary: "#0ea5e9",
@@ -1491,7 +1561,7 @@ d(
   { primary: "#0c4a6e", secondary: "#0369a1", muted: "#7dd3fc" },
   "#fcd34d"
 );
-d(
+c(
   "Winter Frost",
   {
     primary: "#3b82f6",
@@ -1505,7 +1575,7 @@ d(
   { primary: "#1e3a5f", secondary: "#1e40af", muted: "#93c5fd" },
   "#bfdbfe"
 );
-d(
+c(
   "Cherry Blossom",
   {
     primary: "#ec4899",
@@ -1519,7 +1589,7 @@ d(
   { primary: "#831843", secondary: "#9d174d", muted: "#f9a8d4" },
   "#fbcfe8"
 );
-d(
+c(
   "Harvest",
   {
     primary: "#b45309",
@@ -1533,7 +1603,7 @@ d(
   { primary: "#451a03", secondary: "#78350f", muted: "#d97706" },
   "#fcd34d"
 );
-d(
+c(
   "Japanese Zen",
   {
     primary: "#6b7280",
@@ -1547,7 +1617,7 @@ d(
   { primary: "#2c2c2c", secondary: "#5c5c5c", muted: "#a0998a" },
   "#d5cec0"
 );
-d(
+c(
   "Moroccan",
   {
     primary: "#c2410c",
@@ -1561,7 +1631,7 @@ d(
   { primary: "#3a1a00", secondary: "#7c2d12", muted: "#d97706" },
   "#f5d0a0"
 );
-d(
+c(
   "Scandinavian",
   {
     primary: "#4b5563",
@@ -1575,7 +1645,7 @@ d(
   { primary: "#111827", secondary: "#374151", muted: "#9ca3af" },
   "#e5e7eb"
 );
-d(
+c(
   "Mediterranean",
   {
     primary: "#1e40af",
@@ -1589,7 +1659,7 @@ d(
   { primary: "#1e3a5f", secondary: "#2563eb", muted: "#93c5fd" },
   "#bfdbfe"
 );
-d(
+c(
   "Chinese New Year",
   {
     primary: "#dc2626",
@@ -1603,7 +1673,7 @@ d(
   { primary: "#450a0a", secondary: "#991b1b", muted: "#f87171" },
   "#fca5a5"
 );
-d(
+c(
   "Indian Festive",
   {
     primary: "#d97706",
@@ -1617,7 +1687,7 @@ d(
   { primary: "#451a03", secondary: "#92400e", muted: "#f59e0b" },
   "#fcd34d"
 );
-d(
+c(
   "Brazilian Carnival",
   {
     primary: "#16a34a",
@@ -1631,7 +1701,7 @@ d(
   { primary: "#052e16", secondary: "#166534", muted: "#4ade80" },
   "#86efac"
 );
-d(
+c(
   "African Earth",
   {
     primary: "#92400e",
@@ -1645,7 +1715,7 @@ d(
   { primary: "#2b1a0e", secondary: "#5c3d1e", muted: "#a08060" },
   "#d4b896"
 );
-x(
+T(
   "High Contrast Dark",
   {
     primary: "#ffff00",
@@ -1659,7 +1729,7 @@ x(
   { primary: "#ffffff", secondary: "#ffffff", muted: "#cccccc" },
   "#ffffff"
 );
-d(
+c(
   "Monochrome",
   {
     primary: "#404040",
@@ -1673,7 +1743,7 @@ d(
   { primary: "#1a1a1a", secondary: "#404040", muted: "#808080" },
   "#c0c0c0"
 );
-d(
+c(
   "Enhanced Contrast",
   {
     primary: "#0050b3",
@@ -1687,7 +1757,7 @@ d(
   { primary: "#000000", secondary: "#1a1a1a", muted: "#595959" },
   "#8c8c8c"
 );
-d(
+c(
   "Minimalist",
   {
     primary: "#18181b",
@@ -1701,7 +1771,7 @@ d(
   { primary: "#0a0a0a", secondary: "#404040", muted: "#a3a3a3" },
   "#e5e5e5"
 );
-x(
+T(
   "Warm Dark",
   {
     primary: "#f59e0b",
@@ -1715,7 +1785,7 @@ x(
   { primary: "#fafaf9", secondary: "#d6d3d1", muted: "#78716c" },
   "#57534e"
 );
-x(
+T(
   "Soft Dark",
   {
     primary: "#a78bfa",
@@ -1729,7 +1799,7 @@ x(
   { primary: "#e8e8f0", secondary: "#a0a0b8", muted: "#5c5c74" },
   "#3e3e58"
 );
-d(
+c(
   "Coffee",
   {
     primary: "#6f4e37",
@@ -1743,7 +1813,7 @@ d(
   { primary: "#2c1a0e", secondary: "#5c3d28", muted: "#a08868" },
   "#d4c4a8"
 );
-d(
+c(
   "Wine",
   {
     primary: "#7f1d1d",
@@ -1758,7 +1828,8 @@ d(
   "#e8a0a0"
 );
 $(null);
-const Be = {
+$(null);
+const Ke = {
   id: crypto.randomUUID(),
   name: "Untitled Project",
   resolution: { width: 1920, height: 1080, label: "1080p" },
@@ -1790,7 +1861,7 @@ const Be = {
     audio: { sampleRate: 48e3, channels: 2, bitrate: 320 },
     video: { codec: "h264", bitrate: 8e3, profile: "high" }
   }
-}, Ke = [
+}, Ge = [
   { type: "blur", name: "Blur", icon: "🔵" },
   { type: "brightness", name: "Brightness", icon: "☀️" },
   { type: "contrast", name: "Contrast", icon: "◐" },
@@ -1800,14 +1871,14 @@ const Be = {
   { type: "chromaKey", name: "Chroma Key", icon: "🟢" },
   { type: "crop", name: "Crop", icon: "✂️" },
   { type: "zoom", name: "Zoom", icon: "🔍" }
-], We = [
+], je = [
   { type: "fade", name: "Fade" },
   { type: "dissolve", name: "Dissolve" },
   { type: "wipe", name: "Wipe" },
   { type: "slide", name: "Slide" },
   { type: "zoom", name: "Zoom" },
   { type: "push", name: "Push" }
-], Ge = [
+], Ze = [
   {
     target: ".nice-video-editor",
     titleKey: "tutorial.videoEditorPro.intro.title",
@@ -1816,72 +1887,72 @@ const Be = {
     content: "Add media to the timeline, arrange and trim clips, apply effects and transitions, then configure and run the export.",
     placement: "auto"
   }
-], Ye = ({
-  project: l,
-  onProjectChange: m,
-  onExport: f,
+], Xe = ({
+  project: d,
+  onProjectChange: f,
+  onExport: l,
   onAssetUpload: C,
-  className: T = "",
+  className: H = "",
   tutorial: I
 }) => {
-  const [p, i] = v(l || Be), [D, b] = v(
+  const [p, n] = w(d || Ke), [R, b] = w(
     "timeline"
-  ), [E, y] = v(null), [k, S] = v(null), [z, R] = v(0), [q, K] = v(!1), [M, J] = v(1), [W, P] = v(!0), [U, O] = v(null), oe = F(null), se = F(null), A = F(null);
-  ne(() => {
-    l && i(l);
-  }, [l]), ne(() => () => {
-    A.current && clearInterval(A.current);
+  ), [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);
+  re(() => {
+    d && n(d);
+  }, [d]), re(() => () => {
+    z.current && clearInterval(z.current);
   }, []);
-  const w = me(
-    (n) => {
-      const o = { ...p, ...n };
-      i(o), m == null || m(o);
+  const k = me(
+    (t) => {
+      const o = { ...p, ...t };
+      n(o), f == null || f(o);
     },
-    [p, m]
-  ), g = async (n) => {
+    [p, f]
+  ), N = async (t) => {
     const o = [];
-    for (const a of Array.from(n)) {
-      const t = a.type.startsWith("video/") ? "video" : a.type.startsWith("audio/") ? "audio" : "image";
-      let c;
-      C ? c = await C(a) : c = {
+    for (const i of Array.from(t)) {
+      const u = i.type.startsWith("video/") ? "video" : i.type.startsWith("audio/") ? "audio" : "image";
+      let h;
+      C ? h = await C(i) : h = {
         id: crypto.randomUUID(),
-        type: t,
-        name: a.name,
-        url: URL.createObjectURL(a),
-        size: a.size
-      }, o.push(c);
+        type: u,
+        name: i.name,
+        url: URL.createObjectURL(i),
+        size: i.size
+      }, o.push(h);
     }
-    w({ assets: [...p.assets, ...o] });
-  }, B = (n) => {
+    k({ assets: [...p.assets, ...o] });
+  }, W = (t) => {
     const o = {
       id: crypto.randomUUID(),
-      type: n,
-      name: `${n.charAt(0).toUpperCase() + n.slice(1)} ${p.tracks.filter((a) => a.type === n).length + 1}`,
+      type: t,
+      name: `${t.charAt(0).toUpperCase() + t.slice(1)} ${p.tracks.filter((i) => i.type === t).length + 1}`,
       items: [],
       muted: !1,
       locked: !1,
       visible: !0
     };
-    w({ tracks: [...p.tracks, o] });
-  }, Y = (n) => {
-    w({ tracks: p.tracks.filter((o) => o.id !== n) }), E === n && y(null);
-  }, G = (n) => {
-    w({
-      tracks: p.tracks.map((o) => o.id === n ? { ...o, muted: !o.muted } : o)
+    k({ tracks: [...p.tracks, o] });
+  }, q = (t) => {
+    k({ tracks: p.tracks.filter((o) => o.id !== t) }), D === t && y(null);
+  }, G = (t) => {
+    k({
+      tracks: p.tracks.map((o) => o.id === t ? { ...o, muted: !o.muted } : o)
     });
-  }, re = (n) => {
-    w({
-      tracks: p.tracks.map((o) => o.id === n ? { ...o, locked: !o.locked } : o)
+  }, ee = (t) => {
+    k({
+      tracks: p.tracks.map((o) => o.id === t ? { ...o, locked: !o.locked } : o)
     });
-  }, _ = (n, o) => {
-    const a = p.tracks.find((h) => h.id === n);
-    if (!a || a.locked)
+  }, E = (t, o) => {
+    const i = p.tracks.find((g) => g.id === t);
+    if (!i || i.locked)
       return;
-    const t = a.items[a.items.length - 1], c = t ? t.startTime + t.duration : 0, u = {
+    const u = i.items[i.items.length - 1], h = u ? u.startTime + u.duration : 0, v = {
       id: crypto.randomUUID(),
       assetId: o.id,
       type: o.type,
-      startTime: c,
+      startTime: h,
       duration: o.duration || 5,
       offset: 0,
       properties: {
@@ -1894,47 +1965,47 @@ const Be = {
       effects: [],
       transitions: []
     };
-    w({
+    k({
       tracks: p.tracks.map(
-        (h) => h.id === n ? { ...h, items: [...h.items, u] } : h
+        (g) => g.id === t ? { ...g, items: [...g.items, v] } : g
       )
     });
-  }, X = (n, o, a) => {
-    const t = {
+  }, Y = (t, o, i) => {
+    const u = {
       id: crypto.randomUUID(),
-      type: a,
-      name: a.charAt(0).toUpperCase() + a.slice(1),
-      parameters: ce(a)
+      type: i,
+      name: i.charAt(0).toUpperCase() + i.slice(1),
+      parameters: ne(i)
     };
-    w({
+    k({
       tracks: p.tracks.map(
-        (c) => c.id === n ? {
-          ...c,
-          items: c.items.map(
-            (u) => u.id === o ? { ...u, effects: [...u.effects, t] } : u
+        (h) => h.id === t ? {
+          ...h,
+          items: h.items.map(
+            (v) => v.id === o ? { ...v, effects: [...v.effects, u] } : v
           )
-        } : c
+        } : h
       )
     });
-  }, L = (n, o, a, t) => {
-    const c = {
+  }, V = (t, o, i, u) => {
+    const h = {
       id: crypto.randomUUID(),
-      type: a,
+      type: i,
       duration: 0.5,
-      position: t
+      position: u
     };
-    w({
+    k({
       tracks: p.tracks.map(
-        (u) => u.id === n ? {
-          ...u,
-          items: u.items.map(
-            (h) => h.id === o ? { ...h, transitions: [...h.transitions, c] } : h
+        (v) => v.id === t ? {
+          ...v,
+          items: v.items.map(
+            (g) => g.id === o ? { ...g, transitions: [...g.transitions, h] } : g
           )
-        } : u
+        } : v
       )
     });
-  }, ce = (n) => {
-    switch (n) {
+  }, ne = (t) => {
+    switch (t) {
       case "blur":
         return { radius: 5 };
       case "brightness":
@@ -1956,494 +2027,487 @@ const Be = {
       default:
         return {};
     }
-  }, de = () => {
-    q ? (A.current && clearInterval(A.current), K(!1)) : (A.current = setInterval(() => {
-      R((n) => {
+  }, se = () => {
+    O ? (z.current && clearInterval(z.current), F(!1)) : (z.current = setInterval(() => {
+      _((t) => {
         const o = Math.max(
-          ...p.tracks.flatMap((a) => a.items.map((t) => t.startTime + t.duration)),
+          ...p.tracks.flatMap((i) => i.items.map((u) => u.startTime + u.duration)),
           0
         );
-        return n >= o ? (clearInterval(A.current), K(!1), 0) : n + 1 / p.frameRate;
+        return t >= o ? (clearInterval(z.current), F(!1), 0) : t + 1 / p.frameRate;
       });
-    }, 1e3 / p.frameRate), K(!0));
-  }, Q = (n) => {
-    R(Math.max(0, n));
-  }, ee = async () => {
-    if (f) {
-      O(0);
+    }, 1e3 / p.frameRate), F(!0));
+  }, J = (t) => {
+    _(Math.max(0, t));
+  }, Q = async () => {
+    if (l) {
+      B(0);
       try {
-        const n = setInterval(() => {
-          O((o) => o !== null && o < 90 ? o + Math.random() * 10 : o);
+        const t = setInterval(() => {
+          B((o) => o !== null && o < 90 ? o + Math.random() * 10 : o);
         }, 500);
-        await f(p, p.settings.video.codec), clearInterval(n), O(100), setTimeout(() => O(null), 2e3);
-      } catch (n) {
-        O(null), console.error("Export failed:", n);
+        await l(p, p.settings.video.codec), clearInterval(t), B(100), setTimeout(() => B(null), 2e3);
+      } catch (t) {
+        B(null), console.error("Export failed:", t);
       }
     }
-  }, te = (n) => {
-    const o = Math.floor(n / 60), a = Math.floor(n % 60), t = Math.floor(n % 1 * p.frameRate);
-    return `${o.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}:${t.toString().padStart(2, "0")}`;
-  }, Z = () => {
-    for (const n of p.tracks) {
-      const o = n.items.find((a) => a.id === k);
+  }, ae = (t) => {
+    const o = Math.floor(t / 60), i = Math.floor(t % 60), u = Math.floor(t % 1 * p.frameRate);
+    return `${o.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}:${u.toString().padStart(2, "0")}`;
+  }, j = () => {
+    for (const t of p.tracks) {
+      const o = t.items.find((i) => i.id === x);
       if (o)
-        return { track: n, item: o };
+        return { track: t, item: o };
     }
     return null;
-  };
-  return /* @__PURE__ */ r("div", { className: `nice-video-editor ${T}`, style: { position: "relative" }, children: [
-    /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(Le, { steps: Ue(I, Ge) }) }),
-    /* @__PURE__ */ r("header", { className: "video-editor__header", children: [
-      /* @__PURE__ */ r("div", { className: "header__project-info", children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "text",
-            value: p.name,
-            onChange: (n) => w({ name: n.target.value }),
-            className: "project-name-input"
-          }
-        ),
-        /* @__PURE__ */ r("span", { className: "project-settings", children: [
-          p.resolution.width,
-          "x",
-          p.resolution.height,
-          " • ",
-          p.frameRate,
-          "fps"
-        ] })
-      ] }),
-      /* @__PURE__ */ e("div", { className: "header__tabs", children: ["timeline", "effects", "transitions", "export"].map((n) => /* @__PURE__ */ e(
-        "button",
-        {
-          className: `tab-button ${D === n ? "tab-button--active" : ""}`,
-          onClick: () => b(n),
-          children: n.charAt(0).toUpperCase() + n.slice(1)
-        },
-        n
-      )) }),
-      /* @__PURE__ */ e("div", { className: "header__actions", children: /* @__PURE__ */ e(
-        "button",
+  }, oe = /* @__PURE__ */ a("header", { className: "video-editor__header", children: [
+    /* @__PURE__ */ a("div", { className: "header__project-info", children: [
+      /* @__PURE__ */ e(
+        "input",
         {
-          className: "action-button action-button--primary",
-          onClick: ee,
-          disabled: U !== null,
-          children: U !== null ? `Exporting ${Math.round(U)}%` : "Export"
+          type: "text",
+          value: p.name,
+          onChange: (t) => k({ name: t.target.value }),
+          className: "project-name-input"
         }
-      ) })
+      ),
+      /* @__PURE__ */ a("span", { className: "project-settings", children: [
+        p.resolution.width,
+        "x",
+        p.resolution.height,
+        " • ",
+        p.frameRate,
+        "fps"
+      ] })
     ] }),
-    /* @__PURE__ */ r("div", { className: "video-editor__main", children: [
-      W && /* @__PURE__ */ r("aside", { className: "video-editor__asset-library", children: [
-        /* @__PURE__ */ r("div", { className: "asset-library__header", children: [
-          /* @__PURE__ */ e("h3", { children: "Assets" }),
-          /* @__PURE__ */ e("button", { className: "close-button", onClick: () => P(!1), children: "×" })
+    /* @__PURE__ */ e("div", { className: "header__tabs", children: ["timeline", "effects", "transitions", "export"].map((t) => /* @__PURE__ */ e(
+      "button",
+      {
+        className: `tab-button ${R === t ? "tab-button--active" : ""}`,
+        onClick: () => b(t),
+        children: t.charAt(0).toUpperCase() + t.slice(1)
+      },
+      t
+    )) }),
+    /* @__PURE__ */ e("div", { className: "header__actions", children: /* @__PURE__ */ e(
+      "button",
+      {
+        className: "action-button action-button--primary",
+        onClick: Q,
+        disabled: U !== null,
+        children: U !== null ? `Exporting ${Math.round(U)}%` : "Export"
+      }
+    ) })
+  ] }), ce = x && R !== "export" ? (() => {
+    const t = j();
+    if (!t)
+      return null;
+    const { track: o, item: i } = t;
+    return /* @__PURE__ */ a("div", { className: "item-inspector", children: [
+      /* @__PURE__ */ e("h4", { children: "Item Properties" }),
+      /* @__PURE__ */ a("div", { className: "inspector-section", children: [
+        /* @__PURE__ */ a("label", { children: [
+          "Start Time",
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "number",
+              step: "0.1",
+              value: i.startTime,
+              onChange: (u) => {
+                const h = parseFloat(u.target.value);
+                k({
+                  tracks: p.tracks.map(
+                    (v) => v.id === o.id ? {
+                      ...v,
+                      items: v.items.map(
+                        (g) => g.id === i.id ? { ...g, startTime: h } : g
+                      )
+                    } : v
+                  )
+                });
+              }
+            }
+          )
         ] }),
-        /* @__PURE__ */ e("div", { className: "asset-library__upload", children: /* @__PURE__ */ r("label", { className: "upload-zone", children: [
+        /* @__PURE__ */ a("label", { children: [
+          "Duration",
           /* @__PURE__ */ e(
             "input",
             {
-              type: "file",
-              multiple: !0,
-              accept: "video/*,audio/*,image/*",
-              onChange: (n) => n.target.files && g(n.target.files),
-              hidden: !0
+              type: "number",
+              step: "0.1",
+              value: i.duration,
+              onChange: (u) => {
+                const h = parseFloat(u.target.value);
+                k({
+                  tracks: p.tracks.map(
+                    (v) => v.id === o.id ? {
+                      ...v,
+                      items: v.items.map(
+                        (g) => g.id === i.id ? { ...g, duration: h } : g
+                      )
+                    } : v
+                  )
+                });
+              }
             }
-          ),
-          /* @__PURE__ */ e("span", { className: "upload-icon", children: "+" }),
-          /* @__PURE__ */ e("span", { children: "Drop files or click to upload" })
-        ] }) }),
-        /* @__PURE__ */ e("div", { className: "asset-library__list", children: p.assets.map((n) => /* @__PURE__ */ r(
+          )
+        ] }),
+        /* @__PURE__ */ a("label", { children: [
+          "Opacity",
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "range",
+              min: "0",
+              max: "1",
+              step: "0.1",
+              value: i.properties.opacity ?? 1,
+              onChange: (u) => {
+                const h = parseFloat(u.target.value);
+                k({
+                  tracks: p.tracks.map(
+                    (v) => v.id === o.id ? {
+                      ...v,
+                      items: v.items.map(
+                        (g) => g.id === i.id ? {
+                          ...g,
+                          properties: { ...g.properties, opacity: h }
+                        } : g
+                      )
+                    } : v
+                  )
+                });
+              }
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a("h4", { children: [
+        "Effects (",
+        i.effects.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ e("div", { className: "effects-list", children: i.effects.map((u) => /* @__PURE__ */ e("div", { className: "effect-badge", children: u.name }, u.id)) })
+    ] });
+  })() : null, r = K ? /* @__PURE__ */ a("aside", { className: "video-editor__asset-library", children: [
+    /* @__PURE__ */ a("div", { className: "asset-library__header", children: [
+      /* @__PURE__ */ e("h3", { children: "Assets" }),
+      /* @__PURE__ */ e("button", { className: "close-button", onClick: () => P(!1), children: "×" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "asset-library__upload", children: /* @__PURE__ */ a("label", { className: "upload-zone", children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "file",
+          multiple: !0,
+          accept: "video/*,audio/*,image/*",
+          onChange: (t) => t.target.files && N(t.target.files),
+          hidden: !0
+        }
+      ),
+      /* @__PURE__ */ e("span", { className: "upload-icon", children: "+" }),
+      /* @__PURE__ */ e("span", { children: "Drop files or click to upload" })
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: "asset-library__list", children: p.assets.map((t) => /* @__PURE__ */ a(
+      "div",
+      {
+        className: "asset-item",
+        draggable: !0,
+        onDragStart: (o) => o.dataTransfer.setData("assetId", t.id),
+        children: [
+          /* @__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" ? "🎵" : "🖼️" }) }),
+          /* @__PURE__ */ a("div", { className: "asset-info", children: [
+            /* @__PURE__ */ e("span", { className: "asset-name", children: t.name }),
+            /* @__PURE__ */ a("span", { className: "asset-meta", children: [
+              (t.size / 1024 / 1024).toFixed(1),
+              "MB"
+            ] })
+          ] })
+        ]
+      },
+      t.id
+    )) })
+  ] }) : void 0, s = /* @__PURE__ */ e("div", { className: "video-editor__preview-area", children: /* @__PURE__ */ a("div", { className: "preview-container", children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: "preview-canvas",
+        style: { aspectRatio: `${p.resolution.width}/${p.resolution.height}` },
+        children: [
+          /* @__PURE__ */ e("video", { ref: te, className: "preview-video" }),
+          /* @__PURE__ */ e("div", { className: "preview-overlay", children: !K && /* @__PURE__ */ e("button", { className: "toggle-library-button", onClick: () => P(!0), children: "📁" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: "playback-controls", children: [
+      /* @__PURE__ */ e("button", { onClick: () => J(0), children: "⏮️" }),
+      /* @__PURE__ */ e("button", { onClick: () => J(A - 1 / p.frameRate), children: "⏪" }),
+      /* @__PURE__ */ e("button", { onClick: se, className: "play-button", children: O ? "⏸️" : "▶️" }),
+      /* @__PURE__ */ e("button", { onClick: () => J(A + 1 / p.frameRate), children: "⏩" }),
+      /* @__PURE__ */ e("span", { className: "time-display", children: ae(A) })
+    ] })
+  ] }) }), m = /* @__PURE__ */ a("div", { className: "video-editor__panel", children: [
+    R === "timeline" && /* @__PURE__ */ a("div", { className: "timeline-panel", children: [
+      /* @__PURE__ */ a("div", { className: "timeline-toolbar", children: [
+        /* @__PURE__ */ a("div", { className: "track-buttons", children: [
+          /* @__PURE__ */ e("button", { onClick: () => W("video"), children: "+ Video Track" }),
+          /* @__PURE__ */ e("button", { onClick: () => W("audio"), children: "+ Audio Track" }),
+          /* @__PURE__ */ e("button", { onClick: () => W("text"), children: "+ Text Track" })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "zoom-controls", children: [
+          /* @__PURE__ */ e("button", { onClick: () => Z(Math.max(0.25, M - 0.25)), children: "-" }),
+          /* @__PURE__ */ a("span", { children: [
+            Math.round(M * 100),
+            "%"
+          ] }),
+          /* @__PURE__ */ e("button", { onClick: () => Z(Math.min(4, M + 0.25)), children: "+" })
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "timeline-container", ref: ie, children: [
+        /* @__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)) }),
+        /* @__PURE__ */ e("div", { className: "timeline-playhead", style: { left: `${A * 50 * M}px` } }),
+        /* @__PURE__ */ e("div", { className: "timeline-tracks", children: p.tracks.map((t) => /* @__PURE__ */ a(
           "div",
           {
-            className: "asset-item",
-            draggable: !0,
-            onDragStart: (o) => o.dataTransfer.setData("assetId", n.id),
+            className: `timeline-track ${D === t.id ? "timeline-track--selected" : ""} ${t.locked ? "timeline-track--locked" : ""}`,
+            onClick: () => y(t.id),
+            onDrop: (o) => {
+              o.preventDefault();
+              const i = o.dataTransfer.getData("assetId"), u = p.assets.find((h) => h.id === i);
+              u && E(t.id, u);
+            },
+            onDragOver: (o) => o.preventDefault(),
             children: [
-              /* @__PURE__ */ e("div", { className: "asset-thumbnail", children: n.thumbnail ? /* @__PURE__ */ e("img", { src: n.thumbnail, alt: n.name }) : /* @__PURE__ */ e("span", { className: "asset-type-icon", children: n.type === "video" ? "🎬" : n.type === "audio" ? "🎵" : "🖼️" }) }),
-              /* @__PURE__ */ r("div", { className: "asset-info", children: [
-                /* @__PURE__ */ e("span", { className: "asset-name", children: n.name }),
-                /* @__PURE__ */ r("span", { className: "asset-meta", children: [
-                  (n.size / 1024 / 1024).toFixed(1),
-                  "MB"
+              /* @__PURE__ */ a("div", { className: "track-header", children: [
+                /* @__PURE__ */ e("span", { className: "track-name", children: t.name }),
+                /* @__PURE__ */ a("div", { className: "track-controls", children: [
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      className: t.muted ? "active" : "",
+                      onClick: (o) => {
+                        o.stopPropagation(), G(t.id);
+                      },
+                      children: t.muted ? "🔇" : "🔊"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      className: t.locked ? "active" : "",
+                      onClick: (o) => {
+                        o.stopPropagation(), ee(t.id);
+                      },
+                      children: t.locked ? "🔒" : "🔓"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      onClick: (o) => {
+                        o.stopPropagation(), q(t.id);
+                      },
+                      children: "🗑️"
+                    }
+                  )
                 ] })
-              ] })
+              ] }),
+              /* @__PURE__ */ e("div", { className: "track-items", children: t.items.map((o) => {
+                const i = p.assets.find((u) => u.id === o.assetId);
+                return /* @__PURE__ */ a(
+                  "div",
+                  {
+                    className: `track-item track-item--${o.type} ${x === o.id ? "track-item--selected" : ""}`,
+                    style: {
+                      left: `${o.startTime * 50 * M}px`,
+                      width: `${o.duration * 50 * M}px`
+                    },
+                    onClick: (u) => {
+                      u.stopPropagation(), S(o.id);
+                    },
+                    children: [
+                      /* @__PURE__ */ e("span", { className: "item-name", children: (i == null ? void 0 : i.name) || "Untitled" }),
+                      o.transitions.length > 0 && /* @__PURE__ */ e("span", { className: "item-transitions", children: "✨" }),
+                      o.effects.length > 0 && /* @__PURE__ */ e("span", { className: "item-effects", children: "🎨" })
+                    ]
+                  },
+                  o.id
+                );
+              }) })
             ]
           },
-          n.id
+          t.id
         )) })
-      ] }),
-      /* @__PURE__ */ r("div", { className: "video-editor__preview-area", children: [
-        /* @__PURE__ */ r("div", { className: "preview-container", children: [
-          /* @__PURE__ */ r(
-            "div",
+      ] })
+    ] }),
+    R === "effects" && /* @__PURE__ */ a("div", { className: "effects-panel", children: [
+      /* @__PURE__ */ e("h3", { children: "Video Effects" }),
+      /* @__PURE__ */ e("p", { className: "panel-hint", children: "Select a clip to apply effects" }),
+      /* @__PURE__ */ e("div", { className: "effects-grid", children: Ge.map((t) => /* @__PURE__ */ a(
+        "button",
+        {
+          className: "effect-preset",
+          disabled: !x,
+          onClick: () => {
+            const o = j();
+            o && Y(o.track.id, o.item.id, t.type);
+          },
+          children: [
+            /* @__PURE__ */ e("span", { className: "effect-icon", children: t.icon }),
+            /* @__PURE__ */ e("span", { className: "effect-name", children: t.name })
+          ]
+        },
+        t.type
+      )) })
+    ] }),
+    R === "transitions" && /* @__PURE__ */ a("div", { className: "transitions-panel", children: [
+      /* @__PURE__ */ e("h3", { children: "Transitions" }),
+      /* @__PURE__ */ e("p", { className: "panel-hint", children: "Select a clip and add transitions between clips" }),
+      /* @__PURE__ */ e("div", { className: "transitions-grid", children: je.map((t) => /* @__PURE__ */ a("div", { className: "transition-preset", children: [
+        /* @__PURE__ */ e("span", { className: "transition-name", children: t.name }),
+        /* @__PURE__ */ a("div", { className: "transition-buttons", children: [
+          /* @__PURE__ */ e(
+            "button",
             {
-              className: "preview-canvas",
-              style: { aspectRatio: `${p.resolution.width}/${p.resolution.height}` },
+              disabled: !x,
+              onClick: () => {
+                const o = j();
+                o && V(o.track.id, o.item.id, t.type, "start");
+              },
+              children: "In"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              disabled: !x,
+              onClick: () => {
+                const o = j();
+                o && V(o.track.id, o.item.id, t.type, "end");
+              },
+              children: "Out"
+            }
+          )
+        ] })
+      ] }, t.type)) })
+    ] }),
+    R === "export" && /* @__PURE__ */ a("div", { className: "export-panel", children: [
+      /* @__PURE__ */ e("h3", { children: "Export Settings" }),
+      /* @__PURE__ */ a("div", { className: "export-settings", children: [
+        /* @__PURE__ */ a("div", { className: "setting-group", children: [
+          /* @__PURE__ */ e("label", { children: "Resolution" }),
+          /* @__PURE__ */ a(
+            "select",
+            {
+              value: `${p.resolution.width}x${p.resolution.height}`,
+              onChange: (t) => {
+                const [o, i] = t.target.value.split("x").map(Number);
+                k({ resolution: { width: o, height: i } });
+              },
               children: [
-                /* @__PURE__ */ e("video", { ref: se, className: "preview-video" }),
-                /* @__PURE__ */ e("div", { className: "preview-overlay", children: !W && /* @__PURE__ */ e(
-                  "button",
-                  {
-                    className: "toggle-library-button",
-                    onClick: () => P(!0),
-                    children: "📁"
-                  }
-                ) })
+                /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
+                /* @__PURE__ */ e("option", { value: "2560x1440", children: "1440p (2560x1440)" }),
+                /* @__PURE__ */ e("option", { value: "3840x2160", children: "4K (3840x2160)" }),
+                /* @__PURE__ */ e("option", { value: "1280x720", children: "720p (1280x720)" })
               ]
             }
-          ),
-          /* @__PURE__ */ r("div", { className: "playback-controls", children: [
-            /* @__PURE__ */ e("button", { onClick: () => Q(0), children: "⏮️" }),
-            /* @__PURE__ */ e("button", { onClick: () => Q(z - 1 / p.frameRate), children: "⏪" }),
-            /* @__PURE__ */ e("button", { onClick: de, className: "play-button", children: q ? "⏸️" : "▶️" }),
-            /* @__PURE__ */ e("button", { onClick: () => Q(z + 1 / p.frameRate), children: "⏩" }),
-            /* @__PURE__ */ e("span", { className: "time-display", children: te(z) })
-          ] })
+          )
         ] }),
-        k && D !== "export" && /* @__PURE__ */ e("div", { className: "item-inspector", children: (() => {
-          const n = Z();
-          if (!n)
-            return null;
-          const { track: o, item: a } = n;
-          return /* @__PURE__ */ r(ie, { children: [
-            /* @__PURE__ */ e("h4", { children: "Item Properties" }),
-            /* @__PURE__ */ r("div", { className: "inspector-section", children: [
-              /* @__PURE__ */ r("label", { children: [
-                "Start Time",
-                /* @__PURE__ */ e(
-                  "input",
-                  {
-                    type: "number",
-                    step: "0.1",
-                    value: a.startTime,
-                    onChange: (t) => {
-                      const c = parseFloat(t.target.value);
-                      w({
-                        tracks: p.tracks.map(
-                          (u) => u.id === o.id ? {
-                            ...u,
-                            items: u.items.map(
-                              (h) => h.id === a.id ? { ...h, startTime: c } : h
-                            )
-                          } : u
-                        )
-                      });
-                    }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ r("label", { children: [
-                "Duration",
-                /* @__PURE__ */ e(
-                  "input",
-                  {
-                    type: "number",
-                    step: "0.1",
-                    value: a.duration,
-                    onChange: (t) => {
-                      const c = parseFloat(t.target.value);
-                      w({
-                        tracks: p.tracks.map(
-                          (u) => u.id === o.id ? {
-                            ...u,
-                            items: u.items.map(
-                              (h) => h.id === a.id ? { ...h, duration: c } : h
-                            )
-                          } : u
-                        )
-                      });
-                    }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ r("label", { children: [
-                "Opacity",
-                /* @__PURE__ */ e(
-                  "input",
-                  {
-                    type: "range",
-                    min: "0",
-                    max: "1",
-                    step: "0.1",
-                    value: a.properties.opacity ?? 1,
-                    onChange: (t) => {
-                      const c = parseFloat(t.target.value);
-                      w({
-                        tracks: p.tracks.map(
-                          (u) => u.id === o.id ? {
-                            ...u,
-                            items: u.items.map(
-                              (h) => h.id === a.id ? {
-                                ...h,
-                                properties: { ...h.properties, opacity: c }
-                              } : h
-                            )
-                          } : u
-                        )
-                      });
-                    }
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ r("h4", { children: [
-              "Effects (",
-              a.effects.length,
-              ")"
-            ] }),
-            /* @__PURE__ */ e("div", { className: "effects-list", children: a.effects.map((t) => /* @__PURE__ */ e("div", { className: "effect-badge", children: t.name }, t.id)) })
-          ] });
-        })() })
-      ] })
-    ] }),
-    /* @__PURE__ */ r("div", { className: "video-editor__panel", children: [
-      D === "timeline" && /* @__PURE__ */ r("div", { className: "timeline-panel", children: [
-        /* @__PURE__ */ r("div", { className: "timeline-toolbar", children: [
-          /* @__PURE__ */ r("div", { className: "track-buttons", children: [
-            /* @__PURE__ */ e("button", { onClick: () => B("video"), children: "+ Video Track" }),
-            /* @__PURE__ */ e("button", { onClick: () => B("audio"), children: "+ Audio Track" }),
-            /* @__PURE__ */ e("button", { onClick: () => B("text"), children: "+ Text Track" })
-          ] }),
-          /* @__PURE__ */ r("div", { className: "zoom-controls", children: [
-            /* @__PURE__ */ e("button", { onClick: () => J(Math.max(0.25, M - 0.25)), children: "-" }),
-            /* @__PURE__ */ r("span", { children: [
-              Math.round(M * 100),
-              "%"
-            ] }),
-            /* @__PURE__ */ e("button", { onClick: () => J(Math.min(4, M + 0.25)), children: "+" })
-          ] })
+        /* @__PURE__ */ a("div", { className: "setting-group", children: [
+          /* @__PURE__ */ e("label", { children: "Frame Rate" }),
+          /* @__PURE__ */ a(
+            "select",
+            {
+              value: p.frameRate,
+              onChange: (t) => k({ frameRate: parseInt(t.target.value) }),
+              children: [
+                /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
+                /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
+                /* @__PURE__ */ e("option", { value: "60", children: "60 fps" }),
+                /* @__PURE__ */ e("option", { value: "120", children: "120 fps" })
+              ]
+            }
+          )
         ] }),
-        /* @__PURE__ */ r("div", { className: "timeline-container", ref: oe, children: [
-          /* @__PURE__ */ e("div", { className: "timeline-ruler", children: Array.from({ length: Math.ceil(30 / M) }).map((n, o) => /* @__PURE__ */ e("div", { className: "ruler-mark", style: { left: `${o * 50 * M}px` }, children: te(o) }, o)) }),
-          /* @__PURE__ */ e("div", { className: "timeline-playhead", style: { left: `${z * 50 * M}px` } }),
-          /* @__PURE__ */ e("div", { className: "timeline-tracks", children: p.tracks.map((n) => /* @__PURE__ */ r(
-            "div",
+        /* @__PURE__ */ a("div", { className: "setting-group", children: [
+          /* @__PURE__ */ e("label", { children: "Video Codec" }),
+          /* @__PURE__ */ a(
+            "select",
             {
-              className: `timeline-track ${E === n.id ? "timeline-track--selected" : ""} ${n.locked ? "timeline-track--locked" : ""}`,
-              onClick: () => y(n.id),
-              onDrop: (o) => {
-                o.preventDefault();
-                const a = o.dataTransfer.getData("assetId"), t = p.assets.find((c) => c.id === a);
-                t && _(n.id, t);
-              },
-              onDragOver: (o) => o.preventDefault(),
+              value: p.settings.video.codec,
+              onChange: (t) => k({
+                settings: {
+                  ...p.settings,
+                  video: {
+                    ...p.settings.video,
+                    codec: t.target.value
+                  }
+                }
+              }),
               children: [
-                /* @__PURE__ */ r("div", { className: "track-header", children: [
-                  /* @__PURE__ */ e("span", { className: "track-name", children: n.name }),
-                  /* @__PURE__ */ r("div", { className: "track-controls", children: [
-                    /* @__PURE__ */ e(
-                      "button",
-                      {
-                        className: n.muted ? "active" : "",
-                        onClick: (o) => {
-                          o.stopPropagation(), G(n.id);
-                        },
-                        children: n.muted ? "🔇" : "🔊"
-                      }
-                    ),
-                    /* @__PURE__ */ e(
-                      "button",
-                      {
-                        className: n.locked ? "active" : "",
-                        onClick: (o) => {
-                          o.stopPropagation(), re(n.id);
-                        },
-                        children: n.locked ? "🔒" : "🔓"
-                      }
-                    ),
-                    /* @__PURE__ */ e(
-                      "button",
-                      {
-                        onClick: (o) => {
-                          o.stopPropagation(), Y(n.id);
-                        },
-                        children: "🗑️"
-                      }
-                    )
-                  ] })
-                ] }),
-                /* @__PURE__ */ e("div", { className: "track-items", children: n.items.map((o) => {
-                  const a = p.assets.find((t) => t.id === o.assetId);
-                  return /* @__PURE__ */ r(
-                    "div",
-                    {
-                      className: `track-item track-item--${o.type} ${k === o.id ? "track-item--selected" : ""}`,
-                      style: {
-                        left: `${o.startTime * 50 * M}px`,
-                        width: `${o.duration * 50 * M}px`
-                      },
-                      onClick: (t) => {
-                        t.stopPropagation(), S(o.id);
-                      },
-                      children: [
-                        /* @__PURE__ */ e("span", { className: "item-name", children: (a == null ? void 0 : a.name) || "Untitled" }),
-                        o.transitions.length > 0 && /* @__PURE__ */ e("span", { className: "item-transitions", children: "✨" }),
-                        o.effects.length > 0 && /* @__PURE__ */ e("span", { className: "item-effects", children: "🎨" })
-                      ]
-                    },
-                    o.id
-                  );
-                }) })
+                /* @__PURE__ */ e("option", { value: "h264", children: "H.264 (Best Compatibility)" }),
+                /* @__PURE__ */ e("option", { value: "h265", children: "H.265/HEVC (Smaller Size)" }),
+                /* @__PURE__ */ e("option", { value: "vp9", children: "VP9 (Web Optimized)" }),
+                /* @__PURE__ */ e("option", { value: "av1", children: "AV1 (Future Standard)" })
               ]
-            },
-            n.id
-          )) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { className: "setting-group", children: [
+          /* @__PURE__ */ e("label", { children: "Video Bitrate (Mbps)" }),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "number",
+              value: p.settings.video.bitrate / 1e3,
+              onChange: (t) => k({
+                settings: {
+                  ...p.settings,
+                  video: {
+                    ...p.settings.video,
+                    bitrate: parseFloat(t.target.value) * 1e3
+                  }
+                }
+              }),
+              min: "1",
+              max: "100"
+            }
+          )
         ] })
       ] }),
-      D === "effects" && /* @__PURE__ */ r("div", { className: "effects-panel", children: [
-        /* @__PURE__ */ e("h3", { children: "Video Effects" }),
-        /* @__PURE__ */ e("p", { className: "panel-hint", children: "Select a clip to apply effects" }),
-        /* @__PURE__ */ e("div", { className: "effects-grid", children: Ke.map((n) => /* @__PURE__ */ r(
-          "button",
-          {
-            className: "effect-preset",
-            disabled: !k,
-            onClick: () => {
-              const o = Z();
-              o && X(o.track.id, o.item.id, n.type);
-            },
-            children: [
-              /* @__PURE__ */ e("span", { className: "effect-icon", children: n.icon }),
-              /* @__PURE__ */ e("span", { className: "effect-name", children: n.name })
-            ]
-          },
-          n.type
-        )) })
-      ] }),
-      D === "transitions" && /* @__PURE__ */ r("div", { className: "transitions-panel", children: [
-        /* @__PURE__ */ e("h3", { children: "Transitions" }),
-        /* @__PURE__ */ e("p", { className: "panel-hint", children: "Select a clip and add transitions between clips" }),
-        /* @__PURE__ */ e("div", { className: "transitions-grid", children: We.map((n) => /* @__PURE__ */ r("div", { className: "transition-preset", children: [
-          /* @__PURE__ */ e("span", { className: "transition-name", children: n.name }),
-          /* @__PURE__ */ r("div", { className: "transition-buttons", children: [
-            /* @__PURE__ */ e(
-              "button",
-              {
-                disabled: !k,
-                onClick: () => {
-                  const o = Z();
-                  o && L(
-                    o.track.id,
-                    o.item.id,
-                    n.type,
-                    "start"
-                  );
-                },
-                children: "In"
-              }
-            ),
-            /* @__PURE__ */ e(
-              "button",
-              {
-                disabled: !k,
-                onClick: () => {
-                  const o = Z();
-                  o && L(o.track.id, o.item.id, n.type, "end");
-                },
-                children: "Out"
-              }
-            )
-          ] })
-        ] }, n.type)) })
-      ] }),
-      D === "export" && /* @__PURE__ */ r("div", { className: "export-panel", children: [
-        /* @__PURE__ */ e("h3", { children: "Export Settings" }),
-        /* @__PURE__ */ r("div", { className: "export-settings", children: [
-          /* @__PURE__ */ r("div", { className: "setting-group", children: [
-            /* @__PURE__ */ e("label", { children: "Resolution" }),
-            /* @__PURE__ */ r(
-              "select",
-              {
-                value: `${p.resolution.width}x${p.resolution.height}`,
-                onChange: (n) => {
-                  const [o, a] = n.target.value.split("x").map(Number);
-                  w({ resolution: { width: o, height: a } });
-                },
-                children: [
-                  /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
-                  /* @__PURE__ */ e("option", { value: "2560x1440", children: "1440p (2560x1440)" }),
-                  /* @__PURE__ */ e("option", { value: "3840x2160", children: "4K (3840x2160)" }),
-                  /* @__PURE__ */ e("option", { value: "1280x720", children: "720p (1280x720)" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ r("div", { className: "setting-group", children: [
-            /* @__PURE__ */ e("label", { children: "Frame Rate" }),
-            /* @__PURE__ */ r(
-              "select",
-              {
-                value: p.frameRate,
-                onChange: (n) => w({ frameRate: parseInt(n.target.value) }),
-                children: [
-                  /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
-                  /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
-                  /* @__PURE__ */ e("option", { value: "60", children: "60 fps" }),
-                  /* @__PURE__ */ e("option", { value: "120", children: "120 fps" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ r("div", { className: "setting-group", children: [
-            /* @__PURE__ */ e("label", { children: "Video Codec" }),
-            /* @__PURE__ */ r(
-              "select",
-              {
-                value: p.settings.video.codec,
-                onChange: (n) => w({
-                  settings: {
-                    ...p.settings,
-                    video: {
-                      ...p.settings.video,
-                      codec: n.target.value
-                    }
-                  }
-                }),
-                children: [
-                  /* @__PURE__ */ e("option", { value: "h264", children: "H.264 (Best Compatibility)" }),
-                  /* @__PURE__ */ e("option", { value: "h265", children: "H.265/HEVC (Smaller Size)" }),
-                  /* @__PURE__ */ e("option", { value: "vp9", children: "VP9 (Web Optimized)" }),
-                  /* @__PURE__ */ e("option", { value: "av1", children: "AV1 (Future Standard)" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ r("div", { className: "setting-group", children: [
-            /* @__PURE__ */ e("label", { children: "Video Bitrate (Mbps)" }),
-            /* @__PURE__ */ e(
-              "input",
-              {
-                type: "number",
-                value: p.settings.video.bitrate / 1e3,
-                onChange: (n) => w({
-                  settings: {
-                    ...p.settings,
-                    video: {
-                      ...p.settings.video,
-                      bitrate: parseFloat(n.target.value) * 1e3
-                    }
-                  }
-                }),
-                min: "1",
-                max: "100"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ e(
-          "button",
-          {
-            className: "export-button",
-            onClick: ee,
-            disabled: U !== null,
-            children: U !== null ? `Exporting... ${Math.round(U)}%` : "Export Video"
-          }
-        ),
-        U !== null && /* @__PURE__ */ e("div", { className: "export-progress", children: /* @__PURE__ */ e("div", { className: "export-progress-bar", style: { width: `${U}%` } }) })
-      ] })
+      /* @__PURE__ */ e(
+        "button",
+        {
+          className: "export-button",
+          onClick: Q,
+          disabled: U !== null,
+          children: U !== null ? `Exporting... ${Math.round(U)}%` : "Export Video"
+        }
+      ),
+      U !== null && /* @__PURE__ */ e("div", { className: "export-progress", children: /* @__PURE__ */ e("div", { className: "export-progress-bar", style: { width: `${U}%` } }) })
     ] })
   ] });
-}, je = {
+  return /* @__PURE__ */ a(
+    he,
+    {
+      flush: !0,
+      className: `nice-video-editor ${H}`,
+      height: "100%",
+      style: { position: "relative", minHeight: 600 },
+      toolbar: oe,
+      sidebar: r,
+      rightSidebar: ce ?? void 0,
+      bottomPanel: m,
+      children: [
+        /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(Oe, { steps: Le(I, Ze) }) }),
+        s
+      ]
+    }
+  );
+}, qe = {
   video: {
     source: "screen",
     showCursor: !0,
@@ -2460,121 +2524,121 @@ const Be = {
     format: "webm",
     quality: "high"
   }
-}, Xe = ({
-  options: l,
-  onRecordingStart: m,
-  onRecordingStop: f,
+}, ea = ({
+  options: d,
+  onRecordingStart: f,
+  onRecordingStop: l,
   onRecordingPause: C,
-  onRecordingResume: T,
+  onRecordingResume: H,
   onError: I,
   className: p = ""
 }) => {
-  var u, h;
-  const [i, D] = v({
-    ...je,
-    ...l
-  }), [b, E] = v(null), [y, k] = v("idle"), [S, z] = v([]), [R, q] = v(null), [K, M] = v(null), [J, W] = v(!1), [P, U] = v(!1), [O, oe] = v(
+  var t, o;
+  const [n, R] = w({
+    ...qe,
+    ...d
+  }), [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(
     "pen"
-  ), [se, A] = v("var(--nice-danger, #ff0000)"), w = F(null), g = F([]), B = F(null), Y = F(null), G = F(null), re = F(0);
-  ne(() => () => {
-    R && R.getTracks().forEach((s) => s.stop()), G.current && clearInterval(G.current);
-  }, [R]);
-  const _ = (s) => {
-    D((N) => ({
-      ...N,
-      ...s,
-      video: { ...N.video, ...s.video },
-      audio: { ...N.audio, ...s.audio },
-      output: { ...N.output, ...s.output }
+  ), [te, z] = w("var(--nice-danger, #ff0000)"), k = L(null), N = L([]), W = L(null), q = L(null), G = L(null), ee = L(0);
+  re(() => () => {
+    _ && _.getTracks().forEach((i) => i.stop()), G.current && clearInterval(G.current);
+  }, [_]);
+  const E = (i) => {
+    R((u) => ({
+      ...u,
+      ...i,
+      video: { ...u.video, ...i.video },
+      audio: { ...u.audio, ...i.audio },
+      output: { ...u.output, ...i.output }
     }));
-  }, X = async () => {
+  }, Y = async () => {
     try {
-      k("preparing");
-      const s = {
+      x("preparing");
+      const i = {
         video: {
-          cursor: i.video.showCursor ? "always" : "never",
-          frameRate: i.video.frameRate
+          cursor: n.video.showCursor ? "always" : "never",
+          frameRate: n.video.frameRate
         },
-        audio: i.audio.source === "system" || i.audio.source === "both"
-      }, N = await navigator.mediaDevices.getDisplayMedia(s);
-      if (i.audio.enabled && (i.audio.source === "microphone" || i.audio.source === "both"))
+        audio: n.audio.source === "system" || n.audio.source === "both"
+      }, u = await navigator.mediaDevices.getDisplayMedia(i);
+      if (n.audio.enabled && (n.audio.source === "microphone" || n.audio.source === "both"))
         try {
           (await navigator.mediaDevices.getUserMedia({
             audio: {
-              echoCancellation: i.audio.echoCancellation,
-              noiseSuppression: i.audio.noiseSuppression
+              echoCancellation: n.audio.echoCancellation,
+              noiseSuppression: n.audio.noiseSuppression
             }
-          })).getAudioTracks().forEach((V) => N.addTrack(V));
-        } catch (H) {
-          console.warn("Could not access microphone:", H);
+          })).getAudioTracks().forEach((v) => u.addTrack(v));
+        } catch (h) {
+          console.warn("Could not access microphone:", h);
         }
-      q(N), B.current && (B.current.srcObject = N, B.current.play()), k("idle");
-    } catch (s) {
-      k("error"), I == null || I(s instanceof Error ? s : new Error("Failed to start preview"));
+      O(u), W.current && (W.current.srcObject = u, W.current.play()), x("idle");
+    } catch (i) {
+      x("error"), I == null || I(i instanceof Error ? i : new Error("Failed to start preview"));
     }
-  }, L = async () => {
-    R || await X();
-    for (let s = 3; s > 0; s--)
-      M(s), await new Promise((N) => setTimeout(N, 1e3));
+  }, V = async () => {
+    _ || await Y();
+    for (let i = 3; i > 0; i--)
+      M(i), await new Promise((u) => setTimeout(u, 1e3));
     M(null);
     try {
-      const s = R || await ce();
-      if (!s)
+      const i = _ || await ne();
+      if (!i)
         throw new Error("No stream available");
-      const N = n(i.output.format), H = new MediaRecorder(s, {
-        mimeType: N,
-        videoBitsPerSecond: o(i.output.quality)
+      const u = oe(n.output.format), h = new MediaRecorder(i, {
+        mimeType: u,
+        videoBitsPerSecond: ce(n.output.quality)
       });
-      g.current = [], H.ondataavailable = (j) => {
-        j.data.size > 0 && g.current.push(j.data);
-      }, H.onstop = () => {
-        const j = new Blob(g.current, { type: N });
-        b && (f == null || f({ ...b, status: "stopped" }, j));
-      }, w.current = H, H.start(1e3), re.current = Date.now();
-      const V = {
+      N.current = [], h.ondataavailable = (g) => {
+        g.data.size > 0 && N.current.push(g.data);
+      }, h.onstop = () => {
+        const g = new Blob(N.current, { type: u });
+        b && (l == null || l({ ...b, status: "stopped" }, g));
+      }, k.current = h, h.start(1e3), ee.current = Date.now();
+      const v = {
         id: crypto.randomUUID(),
         status: "recording",
         startTime: /* @__PURE__ */ new Date(),
         duration: 0,
         size: 0,
-        options: i,
+        options: n,
         chunks: []
       };
-      E(V), k("recording"), m == null || m(V), G.current = setInterval(() => {
-        E(
-          (j) => j ? {
-            ...j,
-            duration: (Date.now() - re.current) / 1e3,
-            size: g.current.reduce((xe, Ce) => xe + Ce.size, 0)
+      D(v), x("recording"), f == null || f(v), G.current = setInterval(() => {
+        D(
+          (g) => g ? {
+            ...g,
+            duration: (Date.now() - ee.current) / 1e3,
+            size: N.current.reduce((Ce, Se) => Ce + Se.size, 0)
           } : null
         );
       }, 100);
-    } catch (s) {
-      k("error"), I == null || I(s instanceof Error ? s : new Error("Failed to start recording"));
+    } catch (i) {
+      x("error"), I == null || I(i instanceof Error ? i : new Error("Failed to start recording"));
     }
-  }, ce = async () => (await X(), R), de = () => {
-    w.current && y === "recording" && (w.current.pause(), k("paused"), C == null || C());
+  }, ne = async () => (await Y(), _), se = () => {
+    k.current && y === "recording" && (k.current.pause(), x("paused"), C == null || C());
+  }, J = () => {
+    k.current && y === "paused" && (k.current.resume(), x("recording"), H == null || H());
   }, Q = () => {
-    w.current && y === "paused" && (w.current.resume(), k("recording"), T == null || T());
-  }, ee = () => {
-    G.current && clearInterval(G.current), w.current && (y === "recording" || y === "paused") && (w.current.stop(), k("stopped")), R && (R.getTracks().forEach((s) => s.stop()), q(null));
-  }, te = me(
-    (s) => {
+    G.current && clearInterval(G.current), k.current && (y === "recording" || y === "paused") && (k.current.stop(), x("stopped")), _ && (_.getTracks().forEach((i) => i.stop()), O(null));
+  }, ae = me(
+    (i) => {
       if (y !== "recording")
         return;
-      const N = {
+      const u = {
         id: crypto.randomUUID(),
         time: (b == null ? void 0 : b.duration) || 0,
-        label: s || `Marker ${S.length + 1}`,
-        color: a()
+        label: i || `Marker ${S.length + 1}`,
+        color: r()
       };
-      z((H) => [...H, N]);
+      A((h) => [...h, u]);
     },
     [y, b == null ? void 0 : b.duration, S.length]
-  ), Z = (s) => {
-    z((N) => N.filter((H) => H.id !== s));
-  }, n = (s) => {
-    switch (s) {
+  ), j = (i) => {
+    A((u) => u.filter((h) => h.id !== i));
+  }, oe = (i) => {
+    switch (i) {
       case "mp4":
         return "video/mp4";
       case "mkv":
@@ -2582,8 +2646,8 @@ const Be = {
       default:
         return "video/webm;codecs=vp9";
     }
-  }, o = (s) => {
-    switch (s) {
+  }, ce = (i) => {
+    switch (i) {
       case "low":
         return 25e5;
       case "medium":
@@ -2593,67 +2657,67 @@ const Be = {
       default:
         return 8e6;
     }
-  }, a = () => {
-    const s = ["var(--nice-danger, #ff4444)", "#44ff44", "#4444ff", "#ffff44", "#ff44ff", "#44ffff"];
-    return s[Math.floor(Math.random() * s.length)];
-  }, t = (s) => {
-    const N = Math.floor(s / 3600), H = Math.floor(s % 3600 / 60), V = Math.floor(s % 60), j = Math.floor(s % 1 * 100);
-    return N > 0 ? `${N}:${H.toString().padStart(2, "0")}:${V.toString().padStart(2, "0")}` : `${H.toString().padStart(2, "0")}:${V.toString().padStart(2, "0")}.${j.toString().padStart(2, "0")}`;
-  }, c = (s) => s < 1024 ? `${s} B` : s < 1024 * 1024 ? `${(s / 1024).toFixed(1)} KB` : `${(s / 1024 / 1024).toFixed(1)} MB`;
-  return /* @__PURE__ */ r("div", { className: `nice-screen-recorder ${p}`, children: [
-    /* @__PURE__ */ r("div", { className: "recorder__preview", children: [
-      K !== null && /* @__PURE__ */ e("div", { className: "countdown-overlay", children: /* @__PURE__ */ e("span", { className: "countdown-number", children: K }) }),
-      /* @__PURE__ */ e("video", { ref: B, className: "preview-video", muted: !0, playsInline: !0 }),
-      P && /* @__PURE__ */ e("canvas", { ref: Y, className: "annotation-canvas" }),
-      !R && y === "idle" && /* @__PURE__ */ e("div", { className: "preview-placeholder", children: /* @__PURE__ */ r("button", { className: "start-preview-button", onClick: X, children: [
+  }, r = () => {
+    const i = ["var(--nice-danger, #ff4444)", "#44ff44", "#4444ff", "#ffff44", "#ff44ff", "#44ffff"];
+    return i[Math.floor(Math.random() * i.length)];
+  }, s = (i) => {
+    const u = Math.floor(i / 3600), h = Math.floor(i % 3600 / 60), v = Math.floor(i % 60), g = Math.floor(i % 1 * 100);
+    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")}`;
+  }, m = (i) => i < 1024 ? `${i} B` : i < 1024 * 1024 ? `${(i / 1024).toFixed(1)} KB` : `${(i / 1024 / 1024).toFixed(1)} MB`;
+  return /* @__PURE__ */ a("div", { className: `nice-screen-recorder ${p}`, children: [
+    /* @__PURE__ */ a("div", { className: "recorder__preview", children: [
+      F !== null && /* @__PURE__ */ e("div", { className: "countdown-overlay", children: /* @__PURE__ */ e("span", { className: "countdown-number", children: F }) }),
+      /* @__PURE__ */ e("video", { ref: W, className: "preview-video", muted: !0, playsInline: !0 }),
+      P && /* @__PURE__ */ e("canvas", { ref: q, className: "annotation-canvas" }),
+      !_ && y === "idle" && /* @__PURE__ */ e("div", { className: "preview-placeholder", children: /* @__PURE__ */ a("button", { className: "start-preview-button", onClick: Y, children: [
         /* @__PURE__ */ e("span", { className: "icon", children: "🖥️" }),
         /* @__PURE__ */ e("span", { children: "Select Screen to Record" })
       ] }) }),
-      y === "recording" && /* @__PURE__ */ r("div", { className: "recording-indicator", children: [
+      y === "recording" && /* @__PURE__ */ a("div", { className: "recording-indicator", children: [
         /* @__PURE__ */ e("span", { className: "recording-dot" }),
         /* @__PURE__ */ e("span", { children: "REC" })
       ] })
     ] }),
-    /* @__PURE__ */ r("div", { className: "recorder__controls", children: [
-      /* @__PURE__ */ r("div", { className: "controls__main", children: [
-        y === "idle" && /* @__PURE__ */ r(
+    /* @__PURE__ */ a("div", { className: "recorder__controls", children: [
+      /* @__PURE__ */ a("div", { className: "controls__main", children: [
+        y === "idle" && /* @__PURE__ */ a(
           "button",
           {
             className: "control-button control-button--record",
-            onClick: L,
-            disabled: !!K,
+            onClick: V,
+            disabled: !!F,
             children: [
               /* @__PURE__ */ e("span", { className: "icon", children: "⏺️" }),
               /* @__PURE__ */ e("span", { children: "Start Recording" })
             ]
           }
         ),
-        y === "recording" && /* @__PURE__ */ r(ie, { children: [
-          /* @__PURE__ */ r("button", { className: "control-button control-button--pause", onClick: de, children: [
+        y === "recording" && /* @__PURE__ */ a(le, { children: [
+          /* @__PURE__ */ a("button", { className: "control-button control-button--pause", onClick: se, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: "⏸️" }),
             /* @__PURE__ */ e("span", { children: "Pause" })
           ] }),
-          /* @__PURE__ */ r("button", { className: "control-button control-button--stop", onClick: ee, children: [
+          /* @__PURE__ */ a("button", { className: "control-button control-button--stop", onClick: Q, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: "⏹️" }),
             /* @__PURE__ */ e("span", { children: "Stop" })
           ] })
         ] }),
-        y === "paused" && /* @__PURE__ */ r(ie, { children: [
-          /* @__PURE__ */ r("button", { className: "control-button control-button--resume", onClick: Q, children: [
+        y === "paused" && /* @__PURE__ */ a(le, { children: [
+          /* @__PURE__ */ a("button", { className: "control-button control-button--resume", onClick: J, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: "▶️" }),
             /* @__PURE__ */ e("span", { children: "Resume" })
           ] }),
-          /* @__PURE__ */ r("button", { className: "control-button control-button--stop", onClick: ee, children: [
+          /* @__PURE__ */ a("button", { className: "control-button control-button--stop", onClick: Q, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: "⏹️" }),
             /* @__PURE__ */ e("span", { children: "Stop" })
           ] })
         ] }),
-        y === "stopped" && /* @__PURE__ */ r(
+        y === "stopped" && /* @__PURE__ */ a(
           "button",
           {
             className: "control-button control-button--new",
             onClick: () => {
-              k("idle"), E(null), z([]);
+              x("idle"), D(null), A([]);
             },
             children: [
               /* @__PURE__ */ e("span", { className: "icon", children: "🔄" }),
@@ -2662,12 +2726,12 @@ const Be = {
           }
         )
       ] }),
-      /* @__PURE__ */ r("div", { className: "controls__secondary", children: [
-        (y === "recording" || y === "paused") && /* @__PURE__ */ r("button", { className: "control-button control-button--marker", onClick: () => te(), children: [
+      /* @__PURE__ */ a("div", { className: "controls__secondary", children: [
+        (y === "recording" || y === "paused") && /* @__PURE__ */ a("button", { className: "control-button control-button--marker", onClick: () => ae(), children: [
           /* @__PURE__ */ e("span", { className: "icon", children: "🚩" }),
           /* @__PURE__ */ e("span", { children: "Add Marker" })
         ] }),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ a(
           "button",
           {
             className: `control-button ${P ? "control-button--active" : ""}`,
@@ -2683,114 +2747,114 @@ const Be = {
           "button",
           {
             className: "control-button control-button--settings",
-            onClick: () => W(!J),
+            onClick: () => K(!Z),
             disabled: y === "recording",
             children: /* @__PURE__ */ e("span", { className: "icon", children: "⚙️" })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ r("div", { className: "recorder__status", children: [
-      /* @__PURE__ */ r("div", { className: "status__info", children: [
-        /* @__PURE__ */ r("span", { className: "status-item", children: [
+    /* @__PURE__ */ a("div", { className: "recorder__status", children: [
+      /* @__PURE__ */ a("div", { className: "status__info", children: [
+        /* @__PURE__ */ a("span", { className: "status-item", children: [
           /* @__PURE__ */ e("strong", { children: "Duration:" }),
           " ",
-          t((b == null ? void 0 : b.duration) || 0)
+          s((b == null ? void 0 : b.duration) || 0)
         ] }),
-        /* @__PURE__ */ r("span", { className: "status-item", children: [
+        /* @__PURE__ */ a("span", { className: "status-item", children: [
           /* @__PURE__ */ e("strong", { children: "Size:" }),
           " ",
-          c((b == null ? void 0 : b.size) || 0)
+          m((b == null ? void 0 : b.size) || 0)
         ] }),
-        /* @__PURE__ */ r("span", { className: "status-item", children: [
+        /* @__PURE__ */ a("span", { className: "status-item", children: [
           /* @__PURE__ */ e("strong", { children: "Markers:" }),
           " ",
           S.length
         ] })
       ] }),
-      /* @__PURE__ */ r("div", { className: "status__quality", children: [
-        i.video.resolution && /* @__PURE__ */ r("span", { children: [
-          i.video.resolution.width,
+      /* @__PURE__ */ a("div", { className: "status__quality", children: [
+        n.video.resolution && /* @__PURE__ */ a("span", { children: [
+          n.video.resolution.width,
           "x",
-          i.video.resolution.height
+          n.video.resolution.height
         ] }),
-        /* @__PURE__ */ r("span", { children: [
-          i.video.frameRate,
+        /* @__PURE__ */ a("span", { children: [
+          n.video.frameRate,
           "fps"
         ] }),
-        /* @__PURE__ */ e("span", { className: i.audio.enabled ? "audio-on" : "audio-off", children: i.audio.enabled ? "🔊" : "🔇" })
+        /* @__PURE__ */ e("span", { className: n.audio.enabled ? "audio-on" : "audio-off", children: n.audio.enabled ? "🔊" : "🔇" })
       ] })
     ] }),
-    P && y === "recording" && /* @__PURE__ */ r("div", { className: "recorder__annotation-tools", children: [
-      /* @__PURE__ */ e("div", { className: "tool-group", children: ["pen", "arrow", "rectangle", "text"].map((s) => /* @__PURE__ */ r(
+    P && y === "recording" && /* @__PURE__ */ a("div", { className: "recorder__annotation-tools", children: [
+      /* @__PURE__ */ e("div", { className: "tool-group", children: ["pen", "arrow", "rectangle", "text"].map((i) => /* @__PURE__ */ a(
         "button",
         {
-          className: `tool-button ${O === s ? "tool-button--active" : ""}`,
-          onClick: () => oe(s),
+          className: `tool-button ${B === i ? "tool-button--active" : ""}`,
+          onClick: () => ie(i),
           children: [
-            s === "pen" && "✏️",
-            s === "arrow" && "➡️",
-            s === "rectangle" && "⬜",
-            s === "text" && "T"
+            i === "pen" && "✏️",
+            i === "arrow" && "➡️",
+            i === "rectangle" && "⬜",
+            i === "text" && "T"
           ]
         },
-        s
+        i
       )) }),
-      /* @__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((s) => /* @__PURE__ */ e(
+      /* @__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(
         "button",
         {
-          className: `color-button ${se === s ? "color-button--active" : ""}`,
-          style: { backgroundColor: s },
-          onClick: () => A(s)
+          className: `color-button ${te === i ? "color-button--active" : ""}`,
+          style: { backgroundColor: i },
+          onClick: () => z(i)
         },
-        s
+        i
       )) })
     ] }),
-    S.length > 0 && /* @__PURE__ */ r("div", { className: "recorder__markers", children: [
+    S.length > 0 && /* @__PURE__ */ a("div", { className: "recorder__markers", children: [
       /* @__PURE__ */ e("h4", { children: "Markers" }),
-      /* @__PURE__ */ e("div", { className: "markers-list", children: S.map((s) => /* @__PURE__ */ r(
+      /* @__PURE__ */ e("div", { className: "markers-list", children: S.map((i) => /* @__PURE__ */ a(
         "div",
         {
           className: "marker-item",
-          style: { borderLeftColor: s.color },
+          style: { borderLeftColor: i.color },
           children: [
-            /* @__PURE__ */ e("span", { className: "marker-time", children: t(s.time) }),
+            /* @__PURE__ */ e("span", { className: "marker-time", children: s(i.time) }),
             /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
-                value: s.label,
-                onChange: (N) => {
-                  z(
-                    (H) => H.map((V) => V.id === s.id ? { ...V, label: N.target.value } : V)
+                value: i.label,
+                onChange: (u) => {
+                  A(
+                    (h) => h.map((v) => v.id === i.id ? { ...v, label: u.target.value } : v)
                   );
                 },
                 className: "marker-label"
               }
             ),
-            /* @__PURE__ */ e("button", { className: "marker-remove", onClick: () => Z(s.id), children: "×" })
+            /* @__PURE__ */ e("button", { className: "marker-remove", onClick: () => j(i.id), children: "×" })
           ]
         },
-        s.id
+        i.id
       )) })
     ] }),
-    J && /* @__PURE__ */ r("div", { className: "recorder__settings", children: [
-      /* @__PURE__ */ r("div", { className: "settings-header", children: [
+    Z && /* @__PURE__ */ a("div", { className: "recorder__settings", children: [
+      /* @__PURE__ */ a("div", { className: "settings-header", children: [
         /* @__PURE__ */ e("h3", { children: "Recording Settings" }),
-        /* @__PURE__ */ e("button", { className: "close-button", onClick: () => W(!1), children: "×" })
+        /* @__PURE__ */ e("button", { className: "close-button", onClick: () => K(!1), children: "×" })
       ] }),
-      /* @__PURE__ */ r("div", { className: "settings-section", children: [
+      /* @__PURE__ */ a("div", { className: "settings-section", children: [
         /* @__PURE__ */ e("h4", { children: "Video" }),
-        /* @__PURE__ */ r("label", { children: [
+        /* @__PURE__ */ a("label", { children: [
           "Source",
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
             "select",
             {
-              value: i.video.source,
-              onChange: (s) => _({
+              value: n.video.source,
+              onChange: (i) => E({
                 video: {
-                  ...i.video,
-                  source: s.target.value
+                  ...n.video,
+                  source: i.target.value
                 }
               }),
               children: [
@@ -2802,16 +2866,16 @@ const Be = {
             }
           )
         ] }),
-        /* @__PURE__ */ r("label", { children: [
+        /* @__PURE__ */ a("label", { children: [
           "Resolution",
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
             "select",
             {
-              value: `${(u = i.video.resolution) == null ? void 0 : u.width}x${(h = i.video.resolution) == null ? void 0 : h.height}`,
-              onChange: (s) => {
-                const [N, H] = s.target.value.split("x").map(Number);
-                _({
-                  video: { ...i.video, resolution: { width: N, height: H } }
+              value: `${(t = n.video.resolution) == null ? void 0 : t.width}x${(o = n.video.resolution) == null ? void 0 : o.height}`,
+              onChange: (i) => {
+                const [u, h] = i.target.value.split("x").map(Number);
+                E({
+                  video: { ...n.video, resolution: { width: u, height: h } }
                 });
               },
               children: [
@@ -2823,14 +2887,14 @@ const Be = {
             }
           )
         ] }),
-        /* @__PURE__ */ r("label", { children: [
+        /* @__PURE__ */ a("label", { children: [
           "Frame Rate",
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
             "select",
             {
-              value: i.video.frameRate,
-              onChange: (s) => _({
-                video: { ...i.video, frameRate: parseInt(s.target.value) }
+              value: n.video.frameRate,
+              onChange: (i) => E({
+                video: { ...n.video, frameRate: parseInt(i.target.value) }
               }),
               children: [
                 /* @__PURE__ */ e("option", { value: "15", children: "15 fps" }),
@@ -2841,46 +2905,46 @@ const Be = {
             }
           )
         ] }),
-        /* @__PURE__ */ r("label", { className: "checkbox-label", children: [
+        /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
-              checked: i.video.showCursor,
-              onChange: (s) => _({
-                video: { ...i.video, showCursor: s.target.checked }
+              checked: n.video.showCursor,
+              onChange: (i) => E({
+                video: { ...n.video, showCursor: i.target.checked }
               })
             }
           ),
           "Show Cursor"
         ] })
       ] }),
-      /* @__PURE__ */ r("div", { className: "settings-section", children: [
+      /* @__PURE__ */ a("div", { className: "settings-section", children: [
         /* @__PURE__ */ e("h4", { children: "Audio" }),
-        /* @__PURE__ */ r("label", { className: "checkbox-label", children: [
+        /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
-              checked: i.audio.enabled,
-              onChange: (s) => _({
-                audio: { ...i.audio, enabled: s.target.checked }
+              checked: n.audio.enabled,
+              onChange: (i) => E({
+                audio: { ...n.audio, enabled: i.target.checked }
               })
             }
           ),
           "Enable Audio"
         ] }),
-        i.audio.enabled && /* @__PURE__ */ r(ie, { children: [
-          /* @__PURE__ */ r("label", { children: [
+        n.audio.enabled && /* @__PURE__ */ a(le, { children: [
+          /* @__PURE__ */ a("label", { children: [
             "Source",
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ a(
               "select",
               {
-                value: i.audio.source,
-                onChange: (s) => _({
+                value: n.audio.source,
+                onChange: (i) => E({
                   audio: {
-                    ...i.audio,
-                    source: s.target.value
+                    ...n.audio,
+                    source: i.target.value
                   }
                 }),
                 children: [
@@ -2891,27 +2955,27 @@ const Be = {
               }
             )
           ] }),
-          /* @__PURE__ */ r("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
             /* @__PURE__ */ e(
               "input",
               {
                 type: "checkbox",
-                checked: i.audio.echoCancellation,
-                onChange: (s) => _({
-                  audio: { ...i.audio, echoCancellation: s.target.checked }
+                checked: n.audio.echoCancellation,
+                onChange: (i) => E({
+                  audio: { ...n.audio, echoCancellation: i.target.checked }
                 })
               }
             ),
             "Echo Cancellation"
           ] }),
-          /* @__PURE__ */ r("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
             /* @__PURE__ */ e(
               "input",
               {
                 type: "checkbox",
-                checked: i.audio.noiseSuppression,
-                onChange: (s) => _({
-                  audio: { ...i.audio, noiseSuppression: s.target.checked }
+                checked: n.audio.noiseSuppression,
+                onChange: (i) => E({
+                  audio: { ...n.audio, noiseSuppression: i.target.checked }
                 })
               }
             ),
@@ -2919,16 +2983,16 @@ const Be = {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ r("div", { className: "settings-section", children: [
+      /* @__PURE__ */ a("div", { className: "settings-section", children: [
         /* @__PURE__ */ e("h4", { children: "Output" }),
-        /* @__PURE__ */ r("label", { children: [
+        /* @__PURE__ */ a("label", { children: [
           "Format",
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
             "select",
             {
-              value: i.output.format,
-              onChange: (s) => _({
-                output: { ...i.output, format: s.target.value }
+              value: n.output.format,
+              onChange: (i) => E({
+                output: { ...n.output, format: i.target.value }
               }),
               children: [
                 /* @__PURE__ */ e("option", { value: "webm", children: "WebM (Best Web)" }),
@@ -2938,16 +3002,16 @@ const Be = {
             }
           )
         ] }),
-        /* @__PURE__ */ r("label", { children: [
+        /* @__PURE__ */ a("label", { children: [
           "Quality",
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ a(
             "select",
             {
-              value: i.output.quality,
-              onChange: (s) => _({
+              value: n.output.quality,
+              onChange: (i) => E({
                 output: {
-                  ...i.output,
-                  quality: s.target.value
+                  ...n.output,
+                  quality: i.target.value
                 }
               }),
               children: [
@@ -2962,7 +3026,7 @@ const Be = {
       ] })
     ] })
   ] });
-}, qe = {
+}, Ye = {
   id: crypto.randomUUID(),
   name: "My Stream",
   protocol: "rtmp",
@@ -3005,7 +3069,7 @@ const Be = {
   },
   { platform: "custom-rtmp", name: "Custom RTMP", icon: "🔗", defaultUrl: "" },
   { platform: "custom-srt", name: "Custom SRT", icon: "🔒", defaultUrl: "" }
-], le = [
+], de = [
   { type: "camera", name: "Camera", icon: "📷" },
   { type: "screen", name: "Screen Capture", icon: "🖥️" },
   { type: "window", name: "Window Capture", icon: "🪟" },
@@ -3014,18 +3078,18 @@ const Be = {
   { type: "video", name: "Video", icon: "🎬" },
   { type: "microphone", name: "Microphone", icon: "🎤" },
   { type: "system-audio", name: "System Audio", icon: "🔊" }
-], Qe = ({
-  config: l,
-  onConfigChange: m,
-  onStreamStart: f,
+], aa = ({
+  config: d,
+  onConfigChange: f,
+  onStreamStart: l,
   onStreamStop: C,
-  onStatsUpdate: T,
+  onStatsUpdate: H,
   onError: I,
   className: p = ""
 }) => {
-  const [i, D] = v(l || qe), [b, E] = v(
+  const [n, R] = w(d || Ye), [b, D] = w(
     "sources"
-  ), [y, k] = v(!1), [S, z] = v({
+  ), [y, x] = w(!1), [S, A] = w({
     duration: 0,
     viewers: 0,
     peakViewers: 0,
@@ -3034,155 +3098,155 @@ const Be = {
     droppedFrames: 0,
     cpuUsage: 0,
     memoryUsage: 0
-  }), [R, q] = v(null), [K, M] = v(!1), [J, W] = v(!1), [P, U] = v([i.layout]), [O, oe] = v(0), se = F(null), A = F(null), w = F(0);
-  ne(() => {
-    l && D(l);
-  }, [l]), ne(() => () => {
-    A.current && clearInterval(A.current);
+  }), [_, 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);
+  re(() => {
+    d && R(d);
+  }, [d]), re(() => () => {
+    z.current && clearInterval(z.current);
   }, []);
-  const g = me(
-    (a) => {
-      const t = { ...i, ...a };
-      D(t), m == null || m(t);
+  const N = me(
+    (r) => {
+      const s = { ...n, ...r };
+      R(s), f == null || f(s);
     },
-    [i, m]
-  ), B = (a) => {
-    const t = fe.find((u) => u.platform === a), c = {
+    [n, f]
+  ), W = (r) => {
+    const s = fe.find((t) => t.platform === r), m = {
       id: crypto.randomUUID(),
-      name: (t == null ? void 0 : t.name) || "Custom",
-      platform: a,
-      url: (t == null ? void 0 : t.defaultUrl) || "",
+      name: (s == null ? void 0 : s.name) || "Custom",
+      platform: r,
+      url: (s == null ? void 0 : s.defaultUrl) || "",
       streamKey: "",
       enabled: !0,
       status: "idle"
     };
-    g({ destinations: [...i.destinations, c] }), W(!1);
-  }, Y = (a, t) => {
-    g({
-      destinations: i.destinations.map((c) => c.id === a ? { ...c, ...t } : c)
+    N({ destinations: [...n.destinations, m] }), K(!1);
+  }, q = (r, s) => {
+    N({
+      destinations: n.destinations.map((m) => m.id === r ? { ...m, ...s } : m)
     });
-  }, G = (a) => {
-    g({ destinations: i.destinations.filter((t) => t.id !== a) });
-  }, re = async (a) => {
-    const t = le.find((h) => h.type === a), c = {
+  }, G = (r) => {
+    N({ destinations: n.destinations.filter((s) => s.id !== r) });
+  }, ee = async (r) => {
+    const s = de.find((o) => o.type === r), m = {
       id: crypto.randomUUID(),
-      type: a,
-      name: `${(t == null ? void 0 : t.name) || a} ${i.sources.filter((h) => h.type === a).length + 1}`,
+      type: r,
+      name: `${(s == null ? void 0 : s.name) || r} ${n.sources.filter((o) => o.type === r).length + 1}`,
       settings: {},
       volume: 1,
       muted: !1
     };
     try {
-      if (a === "camera" || a === "microphone") {
-        const h = a === "camera" ? { video: !0 } : { audio: !0 }, N = (await navigator.mediaDevices.enumerateDevices()).filter(
-          (H) => a === "camera" ? H.kind === "videoinput" : H.kind === "audioinput"
+      if (r === "camera" || r === "microphone") {
+        const o = r === "camera" ? { video: !0 } : { audio: !0 }, u = (await navigator.mediaDevices.enumerateDevices()).filter(
+          (h) => r === "camera" ? h.kind === "videoinput" : h.kind === "audioinput"
         );
-        N.length > 0 && (c.settings.deviceId = N[0].deviceId);
-      } else (a === "screen" || a === "window") && await navigator.mediaDevices.getDisplayMedia({ video: !0 });
-    } catch (h) {
-      console.warn(`Could not access ${a}:`, h);
+        u.length > 0 && (m.settings.deviceId = u[0].deviceId);
+      } else (r === "screen" || r === "window") && await navigator.mediaDevices.getDisplayMedia({ video: !0 });
+    } catch (o) {
+      console.warn(`Could not access ${r}:`, o);
     }
-    g({ sources: [...i.sources, c] });
-    const u = {
+    N({ sources: [...n.sources, m] });
+    const t = {
       id: crypto.randomUUID(),
-      sourceId: c.id,
+      sourceId: m.id,
       position: { x: 0, y: 0 },
-      size: { width: i.layout.canvas.width, height: i.layout.canvas.height },
+      size: { width: n.layout.canvas.width, height: n.layout.canvas.height },
       visible: !0,
       opacity: 1,
-      zIndex: i.layout.layers.length
+      zIndex: n.layout.layers.length
     };
-    g({
+    N({
       layout: {
-        ...i.layout,
-        layers: [...i.layout.layers, u]
+        ...n.layout,
+        layers: [...n.layout.layers, t]
       }
     }), M(!1);
-  }, _ = (a, t) => {
-    g({
-      sources: i.sources.map((c) => c.id === a ? { ...c, ...t } : c)
+  }, E = (r, s) => {
+    N({
+      sources: n.sources.map((m) => m.id === r ? { ...m, ...s } : m)
     });
-  }, X = (a) => {
-    g({
-      sources: i.sources.filter((t) => t.id !== a),
+  }, Y = (r) => {
+    N({
+      sources: n.sources.filter((s) => s.id !== r),
       layout: {
-        ...i.layout,
-        layers: i.layout.layers.filter((t) => t.sourceId !== a)
+        ...n.layout,
+        layers: n.layout.layers.filter((s) => s.sourceId !== r)
       }
     });
-  }, L = (a, t) => {
-    g({
+  }, V = (r, s) => {
+    N({
       layout: {
-        ...i.layout,
-        layers: i.layout.layers.map((c) => c.id === a ? { ...c, ...t } : c)
+        ...n.layout,
+        layers: n.layout.layers.map((m) => m.id === r ? { ...m, ...s } : m)
       }
     });
-  }, ce = (a) => {
-    const t = i.layout.layers.findIndex((c) => c.id === a);
-    if (t < i.layout.layers.length - 1) {
-      const c = [...i.layout.layers];
-      [c[t], c[t + 1]] = [c[t + 1], c[t]], c.forEach((u, h) => {
-        u.zIndex = h;
-      }), g({ layout: { ...i.layout, layers: c } });
+  }, ne = (r) => {
+    const s = n.layout.layers.findIndex((m) => m.id === r);
+    if (s < n.layout.layers.length - 1) {
+      const m = [...n.layout.layers];
+      [m[s], m[s + 1]] = [m[s + 1], m[s]], m.forEach((t, o) => {
+        t.zIndex = o;
+      }), N({ layout: { ...n.layout, layers: m } });
     }
-  }, de = (a) => {
-    const t = i.layout.layers.findIndex((c) => c.id === a);
-    if (t > 0) {
-      const c = [...i.layout.layers];
-      [c[t], c[t - 1]] = [c[t - 1], c[t]], c.forEach((u, h) => {
-        u.zIndex = h;
-      }), g({ layout: { ...i.layout, layers: c } });
+  }, se = (r) => {
+    const s = n.layout.layers.findIndex((m) => m.id === r);
+    if (s > 0) {
+      const m = [...n.layout.layers];
+      [m[s], m[s - 1]] = [m[s - 1], m[s]], m.forEach((t, o) => {
+        t.zIndex = o;
+      }), N({ layout: { ...n.layout, layers: m } });
     }
-  }, Q = () => {
-    const a = {
+  }, J = () => {
+    const r = {
       name: `Scene ${P.length + 1}`,
-      canvas: { ...i.layout.canvas },
+      canvas: { ...n.layout.canvas },
       layers: []
     };
-    U([...P, a]);
-  }, ee = (a) => {
-    const t = [...P];
-    t[O] = i.layout, U(t), oe(a), g({ layout: P[a] });
-  }, te = async () => {
+    U([...P, r]);
+  }, Q = (r) => {
+    const s = [...P];
+    s[B] = n.layout, U(s), ie(r), N({ layout: P[r] });
+  }, ae = async () => {
     try {
-      g({
-        destinations: i.destinations.map(
-          (a) => a.enabled ? { ...a, status: "connecting" } : a
+      N({
+        destinations: n.destinations.map(
+          (r) => r.enabled ? { ...r, status: "connecting" } : r
         )
-      }), await new Promise((a) => setTimeout(a, 2e3)), g({
-        destinations: i.destinations.map(
-          (a) => a.enabled ? { ...a, status: "live" } : a
+      }), await new Promise((r) => setTimeout(r, 2e3)), N({
+        destinations: n.destinations.map(
+          (r) => r.enabled ? { ...r, status: "live" } : r
         )
-      }), k(!0), w.current = Date.now(), f == null || f(), A.current = setInterval(() => {
-        const a = {
-          duration: (Date.now() - w.current) / 1e3,
+      }), x(!0), k.current = Date.now(), l == null || l(), z.current = setInterval(() => {
+        const r = {
+          duration: (Date.now() - k.current) / 1e3,
           viewers: Math.floor(Math.random() * 100) + S.viewers,
           peakViewers: Math.max(S.peakViewers, S.viewers),
-          bitrate: i.settings.video.bitrate + Math.floor(Math.random() * 500 - 250),
-          fps: i.settings.video.frameRate - Math.random() * 2,
+          bitrate: n.settings.video.bitrate + Math.floor(Math.random() * 500 - 250),
+          fps: n.settings.video.frameRate - Math.random() * 2,
           droppedFrames: S.droppedFrames + (Math.random() > 0.95 ? 1 : 0),
           cpuUsage: 15 + Math.random() * 30,
           memoryUsage: 40 + Math.random() * 20
         };
-        z(a), T == null || T(a);
+        A(r), H == null || H(r);
       }, 1e3);
-    } catch (a) {
-      I == null || I(a instanceof Error ? a : new Error("Failed to start stream")), g({
-        destinations: i.destinations.map((t) => ({
-          ...t,
+    } catch (r) {
+      I == null || I(r instanceof Error ? r : new Error("Failed to start stream")), N({
+        destinations: n.destinations.map((s) => ({
+          ...s,
           status: "error"
         }))
       });
     }
-  }, Z = () => {
-    A.current && clearInterval(A.current), g({
-      destinations: i.destinations.map((a) => ({ ...a, status: "idle" }))
-    }), k(!1), C == null || C();
-  }, n = (a) => {
-    const t = Math.floor(a / 3600), c = Math.floor(a % 3600 / 60), u = Math.floor(a % 60);
-    return `${t.toString().padStart(2, "0")}:${c.toString().padStart(2, "0")}:${u.toString().padStart(2, "0")}`;
-  }, o = (a) => {
-    switch (a) {
+  }, j = () => {
+    z.current && clearInterval(z.current), N({
+      destinations: n.destinations.map((r) => ({ ...r, status: "idle" }))
+    }), x(!1), C == null || C();
+  }, oe = (r) => {
+    const s = Math.floor(r / 3600), m = Math.floor(r % 3600 / 60), t = Math.floor(r % 60);
+    return `${s.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}:${t.toString().padStart(2, "0")}`;
+  }, ce = (r) => {
+    switch (r) {
       case "live":
         return "var(--nice-success, #00ff00)";
       case "connecting":
@@ -3193,116 +3257,116 @@ const Be = {
         return "var(--nice-text-secondary, #888888)";
     }
   };
-  return /* @__PURE__ */ r("div", { className: `nice-live-streaming ${p}`, children: [
-    /* @__PURE__ */ r("header", { className: "streaming__header", children: [
-      /* @__PURE__ */ r("div", { className: "header__title", children: [
+  return /* @__PURE__ */ a("div", { className: `nice-live-streaming ${p}`, children: [
+    /* @__PURE__ */ a("header", { className: "streaming__header", children: [
+      /* @__PURE__ */ a("div", { className: "header__title", children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "text",
-            value: i.name,
-            onChange: (a) => g({ name: a.target.value }),
+            value: n.name,
+            onChange: (r) => N({ name: r.target.value }),
             className: "stream-name-input"
           }
         ),
-        y && /* @__PURE__ */ r("span", { className: "live-badge", children: [
+        y && /* @__PURE__ */ a("span", { className: "live-badge", children: [
           /* @__PURE__ */ e("span", { className: "live-dot" }),
           " LIVE"
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: "header__stats", children: y && /* @__PURE__ */ r(ie, { children: [
-        /* @__PURE__ */ r("span", { className: "stat-item", children: [
+      /* @__PURE__ */ e("div", { className: "header__stats", children: y && /* @__PURE__ */ a(le, { children: [
+        /* @__PURE__ */ a("span", { className: "stat-item", children: [
           "⏱️ ",
-          n(S.duration)
+          oe(S.duration)
         ] }),
-        /* @__PURE__ */ r("span", { className: "stat-item", children: [
+        /* @__PURE__ */ a("span", { className: "stat-item", children: [
           "👥 ",
           S.viewers
         ] }),
-        /* @__PURE__ */ r("span", { className: "stat-item", children: [
+        /* @__PURE__ */ a("span", { className: "stat-item", children: [
           "📊 ",
           Math.round(S.bitrate),
           " kbps"
         ] }),
-        /* @__PURE__ */ r("span", { className: "stat-item", children: [
+        /* @__PURE__ */ a("span", { className: "stat-item", children: [
           "🎬 ",
           S.fps.toFixed(1),
           " fps"
         ] })
       ] }) }),
-      /* @__PURE__ */ e("div", { className: "header__actions", children: y ? /* @__PURE__ */ e("button", { className: "action-button action-button--stop", onClick: Z, children: "End Stream" }) : /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "header__actions", children: y ? /* @__PURE__ */ e("button", { className: "action-button action-button--stop", onClick: j, children: "End Stream" }) : /* @__PURE__ */ e(
         "button",
         {
           className: "action-button action-button--go-live",
-          onClick: te,
-          disabled: i.destinations.filter((a) => a.enabled).length === 0,
+          onClick: ae,
+          disabled: n.destinations.filter((r) => r.enabled).length === 0,
           children: "Go Live"
         }
       ) })
     ] }),
-    /* @__PURE__ */ r("div", { className: "streaming__main", children: [
-      /* @__PURE__ */ r("div", { className: "streaming__preview", children: [
-        /* @__PURE__ */ r("div", { className: "scenes-bar", children: [
-          P.map((a, t) => /* @__PURE__ */ e(
+    /* @__PURE__ */ a("div", { className: "streaming__main", children: [
+      /* @__PURE__ */ a("div", { className: "streaming__preview", children: [
+        /* @__PURE__ */ a("div", { className: "scenes-bar", children: [
+          P.map((r, s) => /* @__PURE__ */ e(
             "button",
             {
-              className: `scene-button ${O === t ? "scene-button--active" : ""}`,
-              onClick: () => ee(t),
-              children: a.name
+              className: `scene-button ${B === s ? "scene-button--active" : ""}`,
+              onClick: () => Q(s),
+              children: r.name
             },
-            t
+            s
           )),
-          /* @__PURE__ */ e("button", { className: "scene-button scene-button--add", onClick: Q, children: "+" })
+          /* @__PURE__ */ e("button", { className: "scene-button scene-button--add", onClick: J, children: "+" })
         ] }),
         /* @__PURE__ */ e(
           "div",
           {
-            ref: se,
+            ref: te,
             className: "preview-canvas",
             style: {
-              aspectRatio: `${i.layout.canvas.width}/${i.layout.canvas.height}`,
-              backgroundColor: i.layout.canvas.backgroundColor
+              aspectRatio: `${n.layout.canvas.width}/${n.layout.canvas.height}`,
+              backgroundColor: n.layout.canvas.backgroundColor
             },
-            children: i.layout.layers.sort((a, t) => a.zIndex - t.zIndex).map((a) => {
-              var c;
-              const t = i.sources.find((u) => u.id === a.sourceId);
-              return !a.visible || !t ? null : /* @__PURE__ */ e(
+            children: n.layout.layers.sort((r, s) => r.zIndex - s.zIndex).map((r) => {
+              var m;
+              const s = n.sources.find((t) => t.id === r.sourceId);
+              return !r.visible || !s ? null : /* @__PURE__ */ e(
                 "div",
                 {
-                  className: `canvas-layer ${R === a.id ? "canvas-layer--selected" : ""}`,
+                  className: `canvas-layer ${_ === r.id ? "canvas-layer--selected" : ""}`,
                   style: {
-                    left: `${a.position.x / i.layout.canvas.width * 100}%`,
-                    top: `${a.position.y / i.layout.canvas.height * 100}%`,
-                    width: `${a.size.width / i.layout.canvas.width * 100}%`,
-                    height: `${a.size.height / i.layout.canvas.height * 100}%`,
-                    opacity: a.opacity,
-                    zIndex: a.zIndex
+                    left: `${r.position.x / n.layout.canvas.width * 100}%`,
+                    top: `${r.position.y / n.layout.canvas.height * 100}%`,
+                    width: `${r.size.width / n.layout.canvas.width * 100}%`,
+                    height: `${r.size.height / n.layout.canvas.height * 100}%`,
+                    opacity: r.opacity,
+                    zIndex: r.zIndex
                   },
-                  onClick: () => q(a.id),
-                  children: /* @__PURE__ */ r("div", { className: "layer-content", children: [
-                    /* @__PURE__ */ e("span", { className: "layer-icon", children: ((c = le.find((u) => u.type === t.type)) == null ? void 0 : c.icon) || "📦" }),
-                    /* @__PURE__ */ e("span", { className: "layer-name", children: t.name })
+                  onClick: () => O(r.id),
+                  children: /* @__PURE__ */ a("div", { className: "layer-content", children: [
+                    /* @__PURE__ */ e("span", { className: "layer-icon", children: ((m = de.find((t) => t.type === s.type)) == null ? void 0 : m.icon) || "📦" }),
+                    /* @__PURE__ */ e("span", { className: "layer-name", children: s.name })
                   ] })
                 },
-                a.id
+                r.id
               );
             })
           }
         )
       ] }),
-      /* @__PURE__ */ r("aside", { className: "streaming__panel", children: [
-        /* @__PURE__ */ e("div", { className: "panel-tabs", children: ["sources", "audio", "destinations", "settings"].map((a) => /* @__PURE__ */ e(
+      /* @__PURE__ */ a("aside", { className: "streaming__panel", children: [
+        /* @__PURE__ */ e("div", { className: "panel-tabs", children: ["sources", "audio", "destinations", "settings"].map((r) => /* @__PURE__ */ e(
           "button",
           {
-            className: `panel-tab ${b === a ? "panel-tab--active" : ""}`,
-            onClick: () => E(a),
-            children: a.charAt(0).toUpperCase() + a.slice(1)
+            className: `panel-tab ${b === r ? "panel-tab--active" : ""}`,
+            onClick: () => D(r),
+            children: r.charAt(0).toUpperCase() + r.slice(1)
           },
-          a
+          r
         )) }),
-        /* @__PURE__ */ r("div", { className: "panel-content", children: [
-          b === "sources" && /* @__PURE__ */ r("div", { className: "sources-panel", children: [
-            /* @__PURE__ */ r("div", { className: "panel-header", children: [
+        /* @__PURE__ */ a("div", { className: "panel-content", children: [
+          b === "sources" && /* @__PURE__ */ a("div", { className: "sources-panel", children: [
+            /* @__PURE__ */ a("div", { className: "panel-header", children: [
               /* @__PURE__ */ e("h3", { children: "Sources" }),
               /* @__PURE__ */ e(
                 "button",
@@ -3314,33 +3378,33 @@ const Be = {
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "sources-list", children: i.sources.filter((a) => a.type !== "microphone" && a.type !== "system-audio").map((a) => {
-              var c;
-              const t = i.layout.layers.find((u) => u.sourceId === a.id);
-              return /* @__PURE__ */ r(
+            /* @__PURE__ */ e("div", { className: "sources-list", children: n.sources.filter((r) => r.type !== "microphone" && r.type !== "system-audio").map((r) => {
+              var m;
+              const s = n.layout.layers.find((t) => t.sourceId === r.id);
+              return /* @__PURE__ */ a(
                 "div",
                 {
-                  className: `source-item ${R === (t == null ? void 0 : t.id) ? "source-item--selected" : ""}`,
-                  onClick: () => t && q(t.id),
+                  className: `source-item ${_ === (s == null ? void 0 : s.id) ? "source-item--selected" : ""}`,
+                  onClick: () => s && O(s.id),
                   children: [
-                    /* @__PURE__ */ e("span", { className: "source-icon", children: (c = le.find((u) => u.type === a.type)) == null ? void 0 : c.icon }),
-                    /* @__PURE__ */ e("span", { className: "source-name", children: a.name }),
-                    /* @__PURE__ */ r("div", { className: "source-controls", children: [
+                    /* @__PURE__ */ e("span", { className: "source-icon", children: (m = de.find((t) => t.type === r.type)) == null ? void 0 : m.icon }),
+                    /* @__PURE__ */ e("span", { className: "source-name", children: r.name }),
+                    /* @__PURE__ */ a("div", { className: "source-controls", children: [
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          className: t != null && t.visible ? "" : "inactive",
-                          onClick: (u) => {
-                            u.stopPropagation(), t && L(t.id, { visible: !t.visible });
+                          className: s != null && s.visible ? "" : "inactive",
+                          onClick: (t) => {
+                            t.stopPropagation(), s && V(s.id, { visible: !s.visible });
                           },
-                          children: t != null && t.visible ? "👁️" : "👁️‍🗨️"
+                          children: s != null && s.visible ? "👁️" : "👁️‍🗨️"
                         }
                       ),
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (u) => {
-                            u.stopPropagation(), t && ce(t.id);
+                          onClick: (t) => {
+                            t.stopPropagation(), s && ne(s.id);
                           },
                           children: "⬆️"
                         }
@@ -3348,8 +3412,8 @@ const Be = {
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (u) => {
-                            u.stopPropagation(), t && de(t.id);
+                          onClick: (t) => {
+                            t.stopPropagation(), s && se(s.id);
                           },
                           children: "⬇️"
                         }
@@ -3357,8 +3421,8 @@ const Be = {
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (u) => {
-                            u.stopPropagation(), X(a.id);
+                          onClick: (t) => {
+                            t.stopPropagation(), Y(r.id);
                           },
                           disabled: y,
                           children: "🗑️"
@@ -3367,67 +3431,67 @@ const Be = {
                     ] })
                   ]
                 },
-                a.id
+                r.id
               );
             }) }),
-            R && /* @__PURE__ */ r("div", { className: "layer-properties", children: [
+            _ && /* @__PURE__ */ a("div", { className: "layer-properties", children: [
               /* @__PURE__ */ e("h4", { children: "Properties" }),
               (() => {
-                const a = i.layout.layers.find((t) => t.id === R);
-                return a ? /* @__PURE__ */ r(ie, { children: [
-                  /* @__PURE__ */ r("label", { children: [
+                const r = n.layout.layers.find((s) => s.id === _);
+                return r ? /* @__PURE__ */ a(le, { children: [
+                  /* @__PURE__ */ a("label", { children: [
                     "X Position",
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: a.position.x,
-                        onChange: (t) => L(a.id, {
-                          position: { ...a.position, x: parseInt(t.target.value) || 0 }
+                        value: r.position.x,
+                        onChange: (s) => V(r.id, {
+                          position: { ...r.position, x: parseInt(s.target.value) || 0 }
                         })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ r("label", { children: [
+                  /* @__PURE__ */ a("label", { children: [
                     "Y Position",
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: a.position.y,
-                        onChange: (t) => L(a.id, {
-                          position: { ...a.position, y: parseInt(t.target.value) || 0 }
+                        value: r.position.y,
+                        onChange: (s) => V(r.id, {
+                          position: { ...r.position, y: parseInt(s.target.value) || 0 }
                         })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ r("label", { children: [
+                  /* @__PURE__ */ a("label", { children: [
                     "Width",
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: a.size.width,
-                        onChange: (t) => L(a.id, {
-                          size: { ...a.size, width: parseInt(t.target.value) || 100 }
+                        value: r.size.width,
+                        onChange: (s) => V(r.id, {
+                          size: { ...r.size, width: parseInt(s.target.value) || 100 }
                         })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ r("label", { children: [
+                  /* @__PURE__ */ a("label", { children: [
                     "Height",
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: a.size.height,
-                        onChange: (t) => L(a.id, {
-                          size: { ...a.size, height: parseInt(t.target.value) || 100 }
+                        value: r.size.height,
+                        onChange: (s) => V(r.id, {
+                          size: { ...r.size, height: parseInt(s.target.value) || 100 }
                         })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ r("label", { children: [
+                  /* @__PURE__ */ a("label", { children: [
                     "Opacity",
                     /* @__PURE__ */ e(
                       "input",
@@ -3436,9 +3500,9 @@ const Be = {
                         min: "0",
                         max: "1",
                         step: "0.1",
-                        value: a.opacity,
-                        onChange: (t) => L(a.id, {
-                          opacity: parseFloat(t.target.value)
+                        value: r.opacity,
+                        onChange: (s) => V(r.id, {
+                          opacity: parseFloat(s.target.value)
                         })
                       }
                     )
@@ -3447,8 +3511,8 @@ const Be = {
               })()
             ] })
           ] }),
-          b === "audio" && /* @__PURE__ */ r("div", { className: "audio-panel", children: [
-            /* @__PURE__ */ r("div", { className: "panel-header", children: [
+          b === "audio" && /* @__PURE__ */ a("div", { className: "audio-panel", children: [
+            /* @__PURE__ */ a("div", { className: "panel-header", children: [
               /* @__PURE__ */ e("h3", { children: "Audio Mixer" }),
               /* @__PURE__ */ e(
                 "button",
@@ -3462,25 +3526,25 @@ const Be = {
                 }
               )
             ] }),
-            /* @__PURE__ */ r("div", { className: "audio-sources", children: [
-              i.sources.filter(
-                (a) => a.type === "microphone" || a.type === "system-audio" || a.type === "video"
-              ).map((a) => {
-                var t;
-                return /* @__PURE__ */ r("div", { className: "audio-source", children: [
-                  /* @__PURE__ */ r("div", { className: "audio-header", children: [
-                    /* @__PURE__ */ e("span", { className: "audio-icon", children: (t = le.find((c) => c.type === a.type)) == null ? void 0 : t.icon }),
-                    /* @__PURE__ */ e("span", { className: "audio-name", children: a.name }),
+            /* @__PURE__ */ a("div", { className: "audio-sources", children: [
+              n.sources.filter(
+                (r) => r.type === "microphone" || r.type === "system-audio" || r.type === "video"
+              ).map((r) => {
+                var s;
+                return /* @__PURE__ */ a("div", { className: "audio-source", children: [
+                  /* @__PURE__ */ a("div", { className: "audio-header", children: [
+                    /* @__PURE__ */ e("span", { className: "audio-icon", children: (s = de.find((m) => m.type === r.type)) == null ? void 0 : s.icon }),
+                    /* @__PURE__ */ e("span", { className: "audio-name", children: r.name }),
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        className: a.muted ? "muted" : "",
-                        onClick: () => _(a.id, { muted: !a.muted }),
-                        children: a.muted ? "🔇" : "🔊"
+                        className: r.muted ? "muted" : "",
+                        onClick: () => E(r.id, { muted: !r.muted }),
+                        children: r.muted ? "🔇" : "🔊"
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ r("div", { className: "audio-slider", children: [
+                  /* @__PURE__ */ a("div", { className: "audio-slider", children: [
                     /* @__PURE__ */ e(
                       "input",
                       {
@@ -3488,13 +3552,13 @@ const Be = {
                         min: "0",
                         max: "1",
                         step: "0.01",
-                        value: a.volume ?? 1,
-                        onChange: (c) => _(a.id, { volume: parseFloat(c.target.value) }),
-                        disabled: a.muted
+                        value: r.volume ?? 1,
+                        onChange: (m) => E(r.id, { volume: parseFloat(m.target.value) }),
+                        disabled: r.muted
                       }
                     ),
-                    /* @__PURE__ */ r("span", { className: "volume-value", children: [
-                      Math.round((a.volume ?? 1) * 100),
+                    /* @__PURE__ */ a("span", { className: "volume-value", children: [
+                      Math.round((r.volume ?? 1) * 100),
                       "%"
                     ] })
                   ] }),
@@ -3502,78 +3566,78 @@ const Be = {
                     "div",
                     {
                       className: "meter-fill",
-                      style: { width: `${(a.volume ?? 1) * 70 + Math.random() * 30}%` }
+                      style: { width: `${(r.volume ?? 1) * 70 + Math.random() * 30}%` }
                     }
                   ) })
-                ] }, a.id);
+                ] }, r.id);
               }),
-              i.sources.filter(
-                (a) => a.type === "microphone" || a.type === "system-audio"
+              n.sources.filter(
+                (r) => r.type === "microphone" || r.type === "system-audio"
               ).length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No audio sources added" })
             ] })
           ] }),
-          b === "destinations" && /* @__PURE__ */ r("div", { className: "destinations-panel", children: [
-            /* @__PURE__ */ r("div", { className: "panel-header", children: [
+          b === "destinations" && /* @__PURE__ */ a("div", { className: "destinations-panel", children: [
+            /* @__PURE__ */ a("div", { className: "panel-header", children: [
               /* @__PURE__ */ e("h3", { children: "Destinations" }),
               /* @__PURE__ */ e(
                 "button",
                 {
                   className: "add-button",
-                  onClick: () => W(!0),
+                  onClick: () => K(!0),
                   disabled: y,
                   children: "+ Add"
                 }
               )
             ] }),
-            /* @__PURE__ */ r("div", { className: "destinations-list", children: [
-              i.destinations.map((a) => {
-                var t;
-                return /* @__PURE__ */ r("div", { className: "destination-item", children: [
-                  /* @__PURE__ */ r("div", { className: "destination-header", children: [
+            /* @__PURE__ */ a("div", { className: "destinations-list", children: [
+              n.destinations.map((r) => {
+                var s;
+                return /* @__PURE__ */ a("div", { className: "destination-item", children: [
+                  /* @__PURE__ */ a("div", { className: "destination-header", children: [
                     /* @__PURE__ */ e(
                       "span",
                       {
                         className: "status-indicator",
-                        style: { backgroundColor: o(a.status) }
+                        style: { backgroundColor: ce(r.status) }
                       }
                     ),
-                    /* @__PURE__ */ e("span", { className: "destination-icon", children: (t = fe.find((c) => c.platform === a.platform)) == null ? void 0 : t.icon }),
-                    /* @__PURE__ */ e("span", { className: "destination-name", children: a.name }),
-                    /* @__PURE__ */ r("label", { className: "toggle", children: [
+                    /* @__PURE__ */ e("span", { className: "destination-icon", children: (s = fe.find((m) => m.platform === r.platform)) == null ? void 0 : s.icon }),
+                    /* @__PURE__ */ e("span", { className: "destination-name", children: r.name }),
+                    /* @__PURE__ */ a("label", { className: "toggle", children: [
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "checkbox",
-                          checked: a.enabled,
-                          onChange: (c) => Y(a.id, { enabled: c.target.checked }),
+                          checked: r.enabled,
+                          onChange: (m) => q(r.id, { enabled: m.target.checked }),
                           disabled: y
                         }
                       ),
                       /* @__PURE__ */ e("span", { className: "toggle-slider" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ r("div", { className: "destination-config", children: [
-                    /* @__PURE__ */ r("label", { children: [
+                  /* @__PURE__ */ a("div", { className: "destination-config", children: [
+                    /* @__PURE__ */ a("label", { children: [
                       "Server URL",
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "text",
-                          value: a.url,
-                          onChange: (c) => Y(a.id, { url: c.target.value }),
+                          value: r.url,
+                          onChange: (m) => q(r.id, { url: m.target.value }),
                           placeholder: "rtmp://...",
                           disabled: y
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ r("label", { children: [
+                    /* @__PURE__ */ a("label", { children: [
                       "Stream Key",
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "password",
-                          value: a.streamKey || "",
-                          onChange: (c) => Y(a.id, { streamKey: c.target.value }),
+                          value: r.streamKey || "",
+                          onChange: (m) => q(r.id, { streamKey: m.target.value }),
                           placeholder: "Enter stream key",
                           disabled: y
                         }
@@ -3584,35 +3648,35 @@ const Be = {
                     "button",
                     {
                       className: "remove-button",
-                      onClick: () => G(a.id),
+                      onClick: () => G(r.id),
                       disabled: y,
                       children: "Remove"
                     }
                   )
-                ] }, a.id);
+                ] }, r.id);
               }),
-              i.destinations.length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No destinations configured" })
+              n.destinations.length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No destinations configured" })
             ] })
           ] }),
-          b === "settings" && /* @__PURE__ */ r("div", { className: "settings-panel", children: [
-            /* @__PURE__ */ r("div", { className: "setting-section", children: [
+          b === "settings" && /* @__PURE__ */ a("div", { className: "settings-panel", children: [
+            /* @__PURE__ */ a("div", { className: "setting-section", children: [
               /* @__PURE__ */ e("h4", { children: "Video" }),
-              /* @__PURE__ */ r("label", { children: [
+              /* @__PURE__ */ a("label", { children: [
                 "Resolution",
-                /* @__PURE__ */ r(
+                /* @__PURE__ */ a(
                   "select",
                   {
-                    value: `${i.settings.video.resolution.width}x${i.settings.video.resolution.height}`,
-                    onChange: (a) => {
-                      const [t, c] = a.target.value.split("x").map(Number);
-                      g({
+                    value: `${n.settings.video.resolution.width}x${n.settings.video.resolution.height}`,
+                    onChange: (r) => {
+                      const [s, m] = r.target.value.split("x").map(Number);
+                      N({
                         settings: {
-                          ...i.settings,
-                          video: { ...i.settings.video, resolution: { width: t, height: c } }
+                          ...n.settings,
+                          video: { ...n.settings.video, resolution: { width: s, height: m } }
                         },
                         layout: {
-                          ...i.layout,
-                          canvas: { ...i.layout.canvas, width: t, height: c }
+                          ...n.layout,
+                          canvas: { ...n.layout.canvas, width: s, height: m }
                         }
                       });
                     },
@@ -3625,18 +3689,18 @@ const Be = {
                   }
                 )
               ] }),
-              /* @__PURE__ */ r("label", { children: [
+              /* @__PURE__ */ a("label", { children: [
                 "Frame Rate",
-                /* @__PURE__ */ r(
+                /* @__PURE__ */ a(
                   "select",
                   {
-                    value: i.settings.video.frameRate,
-                    onChange: (a) => g({
+                    value: n.settings.video.frameRate,
+                    onChange: (r) => N({
                       settings: {
-                        ...i.settings,
+                        ...n.settings,
                         video: {
-                          ...i.settings.video,
-                          frameRate: parseInt(a.target.value)
+                          ...n.settings.video,
+                          frameRate: parseInt(r.target.value)
                         }
                       }
                     }),
@@ -3649,19 +3713,19 @@ const Be = {
                   }
                 )
               ] }),
-              /* @__PURE__ */ r("label", { children: [
+              /* @__PURE__ */ a("label", { children: [
                 "Bitrate (kbps)",
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "number",
-                    value: i.settings.video.bitrate,
-                    onChange: (a) => g({
+                    value: n.settings.video.bitrate,
+                    onChange: (r) => N({
                       settings: {
-                        ...i.settings,
+                        ...n.settings,
                         video: {
-                          ...i.settings.video,
-                          bitrate: parseInt(a.target.value) || 6e3
+                          ...n.settings.video,
+                          bitrate: parseInt(r.target.value) || 6e3
                         }
                       }
                     }),
@@ -3671,19 +3735,19 @@ const Be = {
                   }
                 )
               ] }),
-              /* @__PURE__ */ r("label", { children: [
+              /* @__PURE__ */ a("label", { children: [
                 "Keyframe Interval (sec)",
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "number",
-                    value: i.settings.video.keyframe,
-                    onChange: (a) => g({
+                    value: n.settings.video.keyframe,
+                    onChange: (r) => N({
                       settings: {
-                        ...i.settings,
+                        ...n.settings,
                         video: {
-                          ...i.settings.video,
-                          keyframe: parseInt(a.target.value) || 2
+                          ...n.settings.video,
+                          keyframe: parseInt(r.target.value) || 2
                         }
                       }
                     }),
@@ -3694,20 +3758,20 @@ const Be = {
                 )
               ] })
             ] }),
-            /* @__PURE__ */ r("div", { className: "setting-section", children: [
+            /* @__PURE__ */ a("div", { className: "setting-section", children: [
               /* @__PURE__ */ e("h4", { children: "Audio" }),
-              /* @__PURE__ */ r("label", { children: [
+              /* @__PURE__ */ a("label", { children: [
                 "Sample Rate",
-                /* @__PURE__ */ r(
+                /* @__PURE__ */ a(
                   "select",
                   {
-                    value: i.settings.audio.sampleRate,
-                    onChange: (a) => g({
+                    value: n.settings.audio.sampleRate,
+                    onChange: (r) => N({
                       settings: {
-                        ...i.settings,
+                        ...n.settings,
                         audio: {
-                          ...i.settings.audio,
-                          sampleRate: parseInt(a.target.value)
+                          ...n.settings.audio,
+                          sampleRate: parseInt(r.target.value)
                         }
                       }
                     }),
@@ -3719,16 +3783,16 @@ const Be = {
                   }
                 )
               ] }),
-              /* @__PURE__ */ r("label", { children: [
+              /* @__PURE__ */ a("label", { children: [
                 "Audio Bitrate (kbps)",
-                /* @__PURE__ */ r(
+                /* @__PURE__ */ a(
                   "select",
                   {
-                    value: i.settings.audio.bitrate,
-                    onChange: (a) => g({
+                    value: n.settings.audio.bitrate,
+                    onChange: (r) => N({
                       settings: {
-                        ...i.settings,
-                        audio: { ...i.settings.audio, bitrate: parseInt(a.target.value) }
+                        ...n.settings,
+                        audio: { ...n.settings.audio, bitrate: parseInt(r.target.value) }
                       }
                     }),
                     disabled: y,
@@ -3746,70 +3810,70 @@ const Be = {
         ] })
       ] })
     ] }),
-    y && /* @__PURE__ */ e("footer", { className: "streaming__footer", children: /* @__PURE__ */ r("div", { className: "footer-stats", children: [
-      /* @__PURE__ */ r("span", { className: "stat", children: [
+    y && /* @__PURE__ */ e("footer", { className: "streaming__footer", children: /* @__PURE__ */ a("div", { className: "footer-stats", children: [
+      /* @__PURE__ */ a("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "CPU" }),
-        /* @__PURE__ */ r("span", { className: "value", children: [
+        /* @__PURE__ */ a("span", { className: "value", children: [
           S.cpuUsage.toFixed(1),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ r("span", { className: "stat", children: [
+      /* @__PURE__ */ a("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "Memory" }),
-        /* @__PURE__ */ r("span", { className: "value", children: [
+        /* @__PURE__ */ a("span", { className: "value", children: [
           S.memoryUsage.toFixed(1),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ r("span", { className: "stat", children: [
+      /* @__PURE__ */ a("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "Dropped" }),
         /* @__PURE__ */ e("span", { className: "value", children: S.droppedFrames })
       ] }),
-      /* @__PURE__ */ r("span", { className: "stat", children: [
+      /* @__PURE__ */ a("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "Peak Viewers" }),
         /* @__PURE__ */ e("span", { className: "value", children: S.peakViewers })
       ] })
     ] }) }),
-    K && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ r("div", { className: "modal", children: [
-      /* @__PURE__ */ r("div", { className: "modal-header", children: [
+    F && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ a("div", { className: "modal", children: [
+      /* @__PURE__ */ a("div", { className: "modal-header", children: [
         /* @__PURE__ */ e("h3", { children: "Add Source" }),
         /* @__PURE__ */ e("button", { className: "close-button", onClick: () => M(!1), children: "×" })
       ] }),
-      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "source-type-grid", children: le.map((a) => /* @__PURE__ */ r(
+      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "source-type-grid", children: de.map((r) => /* @__PURE__ */ a(
         "button",
         {
           className: "source-type-button",
-          onClick: () => re(a.type),
+          onClick: () => ee(r.type),
           children: [
-            /* @__PURE__ */ e("span", { className: "icon", children: a.icon }),
-            /* @__PURE__ */ e("span", { className: "name", children: a.name })
+            /* @__PURE__ */ e("span", { className: "icon", children: r.icon }),
+            /* @__PURE__ */ e("span", { className: "name", children: r.name })
           ]
         },
-        a.type
+        r.type
       )) }) })
     ] }) }),
-    J && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ r("div", { className: "modal", children: [
-      /* @__PURE__ */ r("div", { className: "modal-header", children: [
+    Z && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ a("div", { className: "modal", children: [
+      /* @__PURE__ */ a("div", { className: "modal-header", children: [
         /* @__PURE__ */ e("h3", { children: "Add Destination" }),
-        /* @__PURE__ */ e("button", { className: "close-button", onClick: () => W(!1), children: "×" })
+        /* @__PURE__ */ e("button", { className: "close-button", onClick: () => K(!1), children: "×" })
       ] }),
-      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "platform-grid", children: fe.map((a) => /* @__PURE__ */ r(
+      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "platform-grid", children: fe.map((r) => /* @__PURE__ */ a(
         "button",
         {
           className: "platform-button",
-          onClick: () => B(a.platform),
+          onClick: () => W(r.platform),
           children: [
-            /* @__PURE__ */ e("span", { className: "icon", children: a.icon }),
-            /* @__PURE__ */ e("span", { className: "name", children: a.name })
+            /* @__PURE__ */ e("span", { className: "icon", children: r.icon }),
+            /* @__PURE__ */ e("span", { className: "name", children: r.name })
           ]
         },
-        a.platform
+        r.platform
       )) }) })
     ] }) })
   ] });
 };
 export {
-  Qe as NiceLiveStreaming,
-  Xe as NiceScreenRecorder,
-  Ye as NiceVideoEditor
+  aa as NiceLiveStreaming,
+  ea as NiceScreenRecorder,
+  Xe as NiceVideoEditor
 };