@nice2dev/ui-video 1.1.10 → 1.2.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { jsxs as t, jsx as e, Fragment as re } from "react/jsx-runtime";
-import { NiceAppShell as me } from "@nice2dev/ui";
-import { NiceIcon as u, NiceTutorialButton as he, resolveTutorial as pe } from "@nice2dev/ui-core";
-import { useState as b, useRef as M, useEffect as oe, useCallback as ce } from "react";
-const ve = {
-  id: crypto.randomUUID(),
+import { jsxs as t, jsx as e, Fragment as le } from "react/jsx-runtime";
+import { NiceAppShell as he } from "@nice2dev/ui";
+import { NiceIcon as u, NiceTutorialButton as pe, resolveTutorial as ve, createId as $ } from "@nice2dev/ui-core";
+import { useState as b, useRef as M, useEffect as oe, useCallback as de } from "react";
+const fe = {
+  id: $(),
   name: "Untitled Project",
   resolution: { width: 1920, height: 1080, label: "1080p" },
   frameRate: 30,
@@ -35,7 +35,7 @@ const ve = {
     audio: { sampleRate: 48e3, channels: 2, bitrate: 320 },
     video: { codec: "h264", bitrate: 8e3, profile: "high" }
   }
-}, fe = [
+}, be = [
   { type: "blur", name: "Blur", icon: "droplet" },
   { type: "brightness", name: "Brightness", icon: "sun" },
   { type: "contrast", name: "Contrast", icon: "moon" },
@@ -45,14 +45,14 @@ const ve = {
   { type: "chromaKey", name: "Chroma Key", icon: "layers" },
   { type: "crop", name: "Crop", icon: "crop" },
   { type: "zoom", name: "Zoom", icon: "search" }
-], be = [
+], ge = [
   { 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 = [
+], Ne = [
   {
     target: ".nice-video-editor",
     titleKey: "tutorial.videoEditorPro.intro.title",
@@ -61,45 +61,45 @@ const ve = {
     content: "Add media to the timeline, arrange and trim clips, apply effects and transitions, then configure and run the export.",
     placement: "auto"
   }
-], Se = ({
-  project: $,
-  onProjectChange: I,
-  onExport: A,
-  onAssetUpload: E,
-  className: L = "",
+], ze = ({
+  project: R,
+  onProjectChange: z,
+  onExport: P,
+  onAssetUpload: F,
+  className: V = "",
   tutorial: T
 }) => {
-  const [d, s] = b($ || ve), [D, y] = b(
+  const [d, s] = b(R || fe), [A, N] = b(
     "timeline"
-  ), [W, h] = b(null), [k, N] = b(null), [R, w] = b(0), [V, O] = b(!1), [C, q] = b(1), [B, z] = b(!0), [_, P] = b(null), X = M(null), ee = M(null), S = M(null);
+  ), [H, h] = b(null), [k, y] = b(null), [D, w] = b(0), [O, B] = b(!1), [C, j] = b(1), [K, I] = b(!0), [_, L] = b(null), ee = M(null), ae = M(null), S = M(null);
   oe(() => {
-    $ && s($);
-  }, [$]), oe(() => () => {
+    R && s(R);
+  }, [R]), oe(() => () => {
     S.current && clearInterval(S.current);
   }, []);
-  const g = ce(
+  const g = de(
     (n) => {
-      const o = { ...d, ...n };
-      s(o), I == null || I(o);
+      const l = { ...d, ...n };
+      s(l), z == null || z(l);
     },
-    [d, I]
+    [d, z]
   ), f = async (n) => {
-    const o = [];
+    const l = [];
     for (const i of Array.from(n)) {
       const c = i.type.startsWith("video/") ? "video" : i.type.startsWith("audio/") ? "audio" : "image";
       let m;
-      E ? m = await E(i) : m = {
-        id: crypto.randomUUID(),
+      F ? m = await F(i) : m = {
+        id: $(),
         type: c,
         name: i.name,
         url: URL.createObjectURL(i),
         size: i.size
-      }, o.push(m);
+      }, l.push(m);
     }
-    g({ assets: [...d.assets, ...o] });
-  }, F = (n) => {
-    const o = {
-      id: crypto.randomUUID(),
+    g({ assets: [...d.assets, ...l] });
+  }, U = (n) => {
+    const l = {
+      id: $(),
       type: n,
       name: `${n.charAt(0).toUpperCase() + n.slice(1)} ${d.tracks.filter((i) => i.type === n).length + 1}`,
       items: [],
@@ -107,27 +107,27 @@ const ve = {
       locked: !1,
       visible: !0
     };
-    g({ tracks: [...d.tracks, o] });
-  }, j = (n) => {
-    g({ tracks: d.tracks.filter((o) => o.id !== n) }), W === n && h(null);
-  }, K = (n) => {
+    g({ tracks: [...d.tracks, l] });
+  }, G = (n) => {
+    g({ tracks: d.tracks.filter((l) => l.id !== n) }), H === n && h(null);
+  }, W = (n) => {
     g({
-      tracks: d.tracks.map((o) => o.id === n ? { ...o, muted: !o.muted } : o)
+      tracks: d.tracks.map((l) => l.id === n ? { ...l, muted: !l.muted } : l)
     });
-  }, J = (n) => {
+  }, Q = (n) => {
     g({
-      tracks: d.tracks.map((o) => o.id === n ? { ...o, locked: !o.locked } : o)
+      tracks: d.tracks.map((l) => l.id === n ? { ...l, locked: !l.locked } : l)
     });
-  }, x = (n, o) => {
+  }, x = (n, l) => {
     const i = d.tracks.find((v) => v.id === n);
     if (!i || i.locked)
       return;
     const c = i.items[i.items.length - 1], m = c ? c.startTime + c.duration : 0, p = {
-      id: crypto.randomUUID(),
-      assetId: o.id,
-      type: o.type,
+      id: $(),
+      assetId: l.id,
+      type: l.type,
       startTime: m,
-      duration: o.duration || 5,
+      duration: l.duration || 5,
       offset: 0,
       properties: {
         x: 0,
@@ -144,26 +144,26 @@ const ve = {
         (v) => v.id === n ? { ...v, items: [...v.items, p] } : v
       )
     });
-  }, G = (n, o, i) => {
+  }, Y = (n, l, i) => {
     const c = {
-      id: crypto.randomUUID(),
+      id: $(),
       type: i,
       name: i.charAt(0).toUpperCase() + i.slice(1),
-      parameters: ae(i)
+      parameters: te(i)
     };
     g({
       tracks: d.tracks.map(
         (m) => m.id === n ? {
           ...m,
           items: m.items.map(
-            (p) => p.id === o ? { ...p, effects: [...p.effects, c] } : p
+            (p) => p.id === l ? { ...p, effects: [...p.effects, c] } : p
           )
         } : m
       )
     });
-  }, U = (n, o, i, c) => {
+  }, E = (n, l, i, c) => {
     const m = {
-      id: crypto.randomUUID(),
+      id: $(),
       type: i,
       duration: 0.5,
       position: c
@@ -173,12 +173,12 @@ const ve = {
         (p) => p.id === n ? {
           ...p,
           items: p.items.map(
-            (v) => v.id === o ? { ...v, transitions: [...v.transitions, m] } : v
+            (v) => v.id === l ? { ...v, transitions: [...v.transitions, m] } : v
           )
         } : p
       )
     });
-  }, ae = (n) => {
+  }, te = (n) => {
     switch (n) {
       case "blur":
         return { radius: 5 };
@@ -201,41 +201,41 @@ const ve = {
       default:
         return {};
     }
-  }, te = () => {
-    V ? (S.current && clearInterval(S.current), O(!1)) : (S.current = setInterval(() => {
+  }, ie = () => {
+    O ? (S.current && clearInterval(S.current), B(!1)) : (S.current = setInterval(() => {
       w((n) => {
-        const o = Math.max(
+        const l = Math.max(
           ...d.tracks.flatMap((i) => i.items.map((c) => c.startTime + c.duration)),
           0
         );
-        return n >= o ? (clearInterval(S.current), O(!1), 0) : n + 1 / d.frameRate;
+        return n >= l ? (clearInterval(S.current), B(!1), 0) : n + 1 / d.frameRate;
       });
-    }, 1e3 / d.frameRate), O(!0));
-  }, Y = (n) => {
+    }, 1e3 / d.frameRate), B(!0));
+  }, Z = (n) => {
     w(Math.max(0, n));
-  }, Z = async () => {
-    if (A) {
-      P(0);
+  }, J = async () => {
+    if (P) {
+      L(0);
       try {
         const n = setInterval(() => {
-          P((o) => o !== null && o < 90 ? o + Math.random() * 10 : o);
+          L((l) => l !== null && l < 90 ? l + Math.random() * 10 : l);
         }, 500);
-        await A(d, d.settings.video.codec), clearInterval(n), P(100), setTimeout(() => P(null), 2e3);
+        await P(d, d.settings.video.codec), clearInterval(n), L(100), setTimeout(() => L(null), 2e3);
       } catch (n) {
-        P(null), console.error("Export failed:", n);
+        L(null), console.error("Export failed:", n);
       }
     }
-  }, Q = (n) => {
-    const o = Math.floor(n / 60), i = Math.floor(n % 60), c = Math.floor(n % 1 * d.frameRate);
-    return `${o.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}:${c.toString().padStart(2, "0")}`;
-  }, H = () => {
+  }, X = (n) => {
+    const l = Math.floor(n / 60), i = Math.floor(n % 60), c = Math.floor(n % 1 * d.frameRate);
+    return `${l.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}:${c.toString().padStart(2, "0")}`;
+  }, q = () => {
     for (const n of d.tracks) {
-      const o = n.items.find((i) => i.id === k);
-      if (o)
-        return { track: n, item: o };
+      const l = n.items.find((i) => i.id === k);
+      if (l)
+        return { track: n, item: l };
     }
     return null;
-  }, ie = /* @__PURE__ */ t("header", { className: "video-editor__header", children: [
+  }, ne = /* @__PURE__ */ t("header", { className: "video-editor__header", children: [
     /* @__PURE__ */ t("div", { className: "header__project-info", children: [
       /* @__PURE__ */ e(
         "input",
@@ -258,8 +258,8 @@ const ve = {
     /* @__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: () => y(n),
+        className: `tab-button ${A === n ? "tab-button--active" : ""}`,
+        onClick: () => N(n),
         children: n.charAt(0).toUpperCase() + n.slice(1)
       },
       n
@@ -268,16 +268,16 @@ const ve = {
       "button",
       {
         className: "action-button action-button--primary",
-        onClick: Z,
+        onClick: J,
         disabled: _ !== null,
         children: _ !== null ? `Exporting ${Math.round(_)}%` : "Export"
       }
     ) })
-  ] }), ne = k && D !== "export" ? (() => {
-    const n = H();
+  ] }), se = k && A !== "export" ? (() => {
+    const n = q();
     if (!n)
       return null;
-    const { track: o, item: i } = n;
+    const { track: l, item: i } = n;
     return /* @__PURE__ */ t("div", { className: "item-inspector", children: [
       /* @__PURE__ */ e("h4", { children: "Item Properties" }),
       /* @__PURE__ */ t("div", { className: "inspector-section", children: [
@@ -293,7 +293,7 @@ const ve = {
                 const m = parseFloat(c.target.value);
                 g({
                   tracks: d.tracks.map(
-                    (p) => p.id === o.id ? {
+                    (p) => p.id === l.id ? {
                       ...p,
                       items: p.items.map(
                         (v) => v.id === i.id ? { ...v, startTime: m } : v
@@ -317,7 +317,7 @@ const ve = {
                 const m = parseFloat(c.target.value);
                 g({
                   tracks: d.tracks.map(
-                    (p) => p.id === o.id ? {
+                    (p) => p.id === l.id ? {
                       ...p,
                       items: p.items.map(
                         (v) => v.id === i.id ? { ...v, duration: m } : v
@@ -343,7 +343,7 @@ const ve = {
                 const m = parseFloat(c.target.value);
                 g({
                   tracks: d.tracks.map(
-                    (p) => p.id === o.id ? {
+                    (p) => p.id === l.id ? {
                       ...p,
                       items: p.items.map(
                         (v) => v.id === i.id ? {
@@ -366,7 +366,7 @@ const ve = {
       ] }),
       /* @__PURE__ */ e("div", { className: "effects-list", children: i.effects.map((c) => /* @__PURE__ */ e("div", { className: "effect-badge", children: c.name }, c.id)) })
     ] });
-  })() : null, a = B ? /* @__PURE__ */ t("aside", { className: "video-editor__asset-library", children: [
+  })() : null, a = K ? /* @__PURE__ */ t("aside", { className: "video-editor__asset-library", children: [
     /* @__PURE__ */ t("div", { className: "asset-library__header", children: [
       /* @__PURE__ */ e("h3", { children: "Assets" }),
       /* @__PURE__ */ e(
@@ -374,7 +374,7 @@ const ve = {
         {
           "aria-label": "Close",
           className: "close-button",
-          onClick: () => z(!1),
+          onClick: () => I(!1),
           children: /* @__PURE__ */ e(u, { name: "close", size: 16 })
         }
       )
@@ -398,7 +398,7 @@ const ve = {
       {
         className: "asset-item",
         draggable: !0,
-        onDragStart: (o) => o.dataTransfer.setData("assetId", n.id),
+        onDragStart: (l) => l.dataTransfer.setData("assetId", n.id),
         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: /* @__PURE__ */ e(
             u,
@@ -425,12 +425,12 @@ const ve = {
         className: "preview-canvas",
         style: { aspectRatio: `${d.resolution.width}/${d.resolution.height}` },
         children: [
-          /* @__PURE__ */ e("video", { ref: ee, className: "preview-video" }),
-          /* @__PURE__ */ e("div", { className: "preview-overlay", children: !B && /* @__PURE__ */ e(
+          /* @__PURE__ */ e("video", { ref: ae, className: "preview-video" }),
+          /* @__PURE__ */ e("div", { className: "preview-overlay", children: !K && /* @__PURE__ */ e(
             "button",
             {
               className: "toggle-library-button",
-              onClick: () => z(!0),
+              onClick: () => I(!0),
               "aria-label": "Show asset library",
               children: /* @__PURE__ */ e(u, { name: "folder", size: 16 })
             }
@@ -439,11 +439,11 @@ const ve = {
       }
     ),
     /* @__PURE__ */ t("div", { className: "playback-controls", children: [
-      /* @__PURE__ */ e("button", { onClick: () => Y(0), "aria-label": "Go to start", children: /* @__PURE__ */ e(u, { name: "skip-back", size: 16 }) }),
+      /* @__PURE__ */ e("button", { onClick: () => Z(0), "aria-label": "Go to start", children: /* @__PURE__ */ e(u, { name: "skip-back", size: 16 }) }),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => Y(R - 1 / d.frameRate),
+          onClick: () => Z(D - 1 / d.frameRate),
           "aria-label": "Previous frame",
           children: /* @__PURE__ */ e(u, { name: "chevron-left", size: 16 })
         }
@@ -451,53 +451,53 @@ const ve = {
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: te,
+          onClick: ie,
           className: "play-button",
-          "aria-label": V ? "Pause" : "Play",
-          children: /* @__PURE__ */ e(u, { name: V ? "pause" : "play", size: 18 })
+          "aria-label": O ? "Pause" : "Play",
+          children: /* @__PURE__ */ e(u, { name: O ? "pause" : "play", size: 18 })
         }
       ),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => Y(R + 1 / d.frameRate),
+          onClick: () => Z(D + 1 / d.frameRate),
           "aria-label": "Next frame",
           children: /* @__PURE__ */ e(u, { name: "chevron-right", size: 16 })
         }
       ),
-      /* @__PURE__ */ e("span", { className: "time-display", children: Q(R) })
+      /* @__PURE__ */ e("span", { className: "time-display", children: X(D) })
     ] })
-  ] }) }), l = /* @__PURE__ */ t("div", { className: "video-editor__panel", children: [
-    D === "timeline" && /* @__PURE__ */ t("div", { className: "timeline-panel", children: [
+  ] }) }), o = /* @__PURE__ */ t("div", { className: "video-editor__panel", children: [
+    A === "timeline" && /* @__PURE__ */ t("div", { className: "timeline-panel", children: [
       /* @__PURE__ */ t("div", { className: "timeline-toolbar", children: [
         /* @__PURE__ */ t("div", { className: "track-buttons", children: [
-          /* @__PURE__ */ e("button", { onClick: () => F("video"), children: "+ Video Track" }),
-          /* @__PURE__ */ e("button", { onClick: () => F("audio"), children: "+ Audio Track" }),
-          /* @__PURE__ */ e("button", { onClick: () => F("text"), children: "+ Text Track" })
+          /* @__PURE__ */ e("button", { onClick: () => U("video"), children: "+ Video Track" }),
+          /* @__PURE__ */ e("button", { onClick: () => U("audio"), children: "+ Audio Track" }),
+          /* @__PURE__ */ e("button", { onClick: () => U("text"), children: "+ Text Track" })
         ] }),
         /* @__PURE__ */ t("div", { className: "zoom-controls", children: [
-          /* @__PURE__ */ e("button", { onClick: () => q(Math.max(0.25, C - 0.25)), children: "-" }),
+          /* @__PURE__ */ e("button", { onClick: () => j(Math.max(0.25, C - 0.25)), children: "-" }),
           /* @__PURE__ */ t("span", { children: [
             Math.round(C * 100),
             "%"
           ] }),
-          /* @__PURE__ */ e("button", { onClick: () => q(Math.min(4, C + 0.25)), children: "+" })
+          /* @__PURE__ */ e("button", { onClick: () => j(Math.min(4, C + 0.25)), children: "+" })
         ] })
       ] }),
-      /* @__PURE__ */ t("div", { className: "timeline-container", ref: X, children: [
-        /* @__PURE__ */ e("div", { className: "timeline-ruler", children: Array.from({ length: Math.ceil(30 / C) }).map((n, o) => /* @__PURE__ */ e("div", { className: "ruler-mark", style: { left: `${o * 50 * C}px` }, children: Q(o) }, o)) }),
-        /* @__PURE__ */ e("div", { className: "timeline-playhead", style: { left: `${R * 50 * C}px` } }),
+      /* @__PURE__ */ t("div", { className: "timeline-container", ref: ee, children: [
+        /* @__PURE__ */ e("div", { className: "timeline-ruler", children: Array.from({ length: Math.ceil(30 / C) }).map((n, l) => /* @__PURE__ */ e("div", { className: "ruler-mark", style: { left: `${l * 50 * C}px` }, children: X(l) }, l)) }),
+        /* @__PURE__ */ e("div", { className: "timeline-playhead", style: { left: `${D * 50 * C}px` } }),
         /* @__PURE__ */ e("div", { className: "timeline-tracks", children: d.tracks.map((n) => /* @__PURE__ */ t(
           "div",
           {
-            className: `timeline-track ${W === n.id ? "timeline-track--selected" : ""} ${n.locked ? "timeline-track--locked" : ""}`,
+            className: `timeline-track ${H === n.id ? "timeline-track--selected" : ""} ${n.locked ? "timeline-track--locked" : ""}`,
             onClick: () => h(n.id),
-            onDrop: (o) => {
-              o.preventDefault();
-              const i = o.dataTransfer.getData("assetId"), c = d.assets.find((m) => m.id === i);
+            onDrop: (l) => {
+              l.preventDefault();
+              const i = l.dataTransfer.getData("assetId"), c = d.assets.find((m) => m.id === i);
               c && x(n.id, c);
             },
-            onDragOver: (o) => o.preventDefault(),
+            onDragOver: (l) => l.preventDefault(),
             children: [
               /* @__PURE__ */ t("div", { className: "track-header", children: [
                 /* @__PURE__ */ e("span", { className: "track-name", children: n.name }),
@@ -506,8 +506,8 @@ const ve = {
                     "button",
                     {
                       className: n.muted ? "active" : "",
-                      onClick: (o) => {
-                        o.stopPropagation(), K(n.id);
+                      onClick: (l) => {
+                        l.stopPropagation(), W(n.id);
                       },
                       children: /* @__PURE__ */ e(u, { name: n.muted ? "volume-off" : "volume", size: 14 })
                     }
@@ -516,8 +516,8 @@ const ve = {
                     "button",
                     {
                       className: n.locked ? "active" : "",
-                      onClick: (o) => {
-                        o.stopPropagation(), J(n.id);
+                      onClick: (l) => {
+                        l.stopPropagation(), Q(n.id);
                       },
                       children: /* @__PURE__ */ e(u, { name: n.locked ? "lock" : "unlock", size: 14 })
                     }
@@ -525,8 +525,8 @@ const ve = {
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      onClick: (o) => {
-                        o.stopPropagation(), j(n.id);
+                      onClick: (l) => {
+                        l.stopPropagation(), G(n.id);
                       },
                       "aria-label": "Remove track",
                       children: /* @__PURE__ */ e(u, { name: "trash", size: 14 })
@@ -534,26 +534,26 @@ const ve = {
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ e("div", { className: "track-items", children: n.items.map((o) => {
-                const i = d.assets.find((c) => c.id === o.assetId);
+              /* @__PURE__ */ e("div", { className: "track-items", children: n.items.map((l) => {
+                const i = d.assets.find((c) => c.id === l.assetId);
                 return /* @__PURE__ */ t(
                   "div",
                   {
-                    className: `track-item track-item--${o.type} ${k === o.id ? "track-item--selected" : ""}`,
+                    className: `track-item track-item--${l.type} ${k === l.id ? "track-item--selected" : ""}`,
                     style: {
-                      left: `${o.startTime * 50 * C}px`,
-                      width: `${o.duration * 50 * C}px`
+                      left: `${l.startTime * 50 * C}px`,
+                      width: `${l.duration * 50 * C}px`
                     },
                     onClick: (c) => {
-                      c.stopPropagation(), N(o.id);
+                      c.stopPropagation(), y(l.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: /* @__PURE__ */ e(u, { name: "wand", size: 12 }) }),
-                      o.effects.length > 0 && /* @__PURE__ */ e("span", { className: "item-effects", children: /* @__PURE__ */ e(u, { name: "palette", size: 12 }) })
+                      l.transitions.length > 0 && /* @__PURE__ */ e("span", { className: "item-transitions", children: /* @__PURE__ */ e(u, { name: "wand", size: 12 }) }),
+                      l.effects.length > 0 && /* @__PURE__ */ e("span", { className: "item-effects", children: /* @__PURE__ */ e(u, { name: "palette", size: 12 }) })
                     ]
                   },
-                  o.id
+                  l.id
                 );
               }) })
             ]
@@ -562,17 +562,17 @@ const ve = {
         )) })
       ] })
     ] }),
-    D === "effects" && /* @__PURE__ */ t("div", { className: "effects-panel", children: [
+    A === "effects" && /* @__PURE__ */ t("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: fe.map((n) => /* @__PURE__ */ t(
+      /* @__PURE__ */ e("div", { className: "effects-grid", children: be.map((n) => /* @__PURE__ */ t(
         "button",
         {
           className: "effect-preset",
           disabled: !k,
           onClick: () => {
-            const o = H();
-            o && G(o.track.id, o.item.id, n.type);
+            const l = q();
+            l && Y(l.track.id, l.item.id, n.type);
           },
           children: [
             /* @__PURE__ */ e("span", { className: "effect-icon", children: /* @__PURE__ */ e(u, { name: n.icon, size: 16 }) }),
@@ -582,10 +582,10 @@ const ve = {
         n.type
       )) })
     ] }),
-    D === "transitions" && /* @__PURE__ */ t("div", { className: "transitions-panel", children: [
+    A === "transitions" && /* @__PURE__ */ t("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: be.map((n) => /* @__PURE__ */ t("div", { className: "transition-preset", children: [
+      /* @__PURE__ */ e("div", { className: "transitions-grid", children: ge.map((n) => /* @__PURE__ */ t("div", { className: "transition-preset", children: [
         /* @__PURE__ */ e("span", { className: "transition-name", children: n.name }),
         /* @__PURE__ */ t("div", { className: "transition-buttons", children: [
           /* @__PURE__ */ e(
@@ -593,8 +593,8 @@ const ve = {
             {
               disabled: !k,
               onClick: () => {
-                const o = H();
-                o && U(o.track.id, o.item.id, n.type, "start");
+                const l = q();
+                l && E(l.track.id, l.item.id, n.type, "start");
               },
               children: "In"
             }
@@ -604,8 +604,8 @@ const ve = {
             {
               disabled: !k,
               onClick: () => {
-                const o = H();
-                o && U(o.track.id, o.item.id, n.type, "end");
+                const l = q();
+                l && E(l.track.id, l.item.id, n.type, "end");
               },
               children: "Out"
             }
@@ -613,7 +613,7 @@ const ve = {
         ] })
       ] }, n.type)) })
     ] }),
-    D === "export" && /* @__PURE__ */ t("div", { className: "export-panel", children: [
+    A === "export" && /* @__PURE__ */ t("div", { className: "export-panel", children: [
       /* @__PURE__ */ e("h3", { children: "Export Settings" }),
       /* @__PURE__ */ t("div", { className: "export-settings", children: [
         /* @__PURE__ */ t("div", { className: "setting-group", children: [
@@ -623,8 +623,8 @@ const ve = {
             {
               value: `${d.resolution.width}x${d.resolution.height}`,
               onChange: (n) => {
-                const [o, i] = n.target.value.split("x").map(Number);
-                g({ resolution: { width: o, height: i } });
+                const [l, i] = n.target.value.split("x").map(Number);
+                g({ resolution: { width: l, height: i } });
               },
               children: [
                 /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
@@ -701,7 +701,7 @@ const ve = {
         "button",
         {
           className: "export-button",
-          onClick: Z,
+          onClick: J,
           disabled: _ !== null,
           children: _ !== null ? `Exporting... ${Math.round(_)}%` : "Export Video"
         }
@@ -710,18 +710,18 @@ const ve = {
     ] })
   ] });
   return /* @__PURE__ */ t(
-    me,
+    he,
     {
       flush: !0,
-      className: `nice-video-editor ${L}`,
+      className: `nice-video-editor ${V}`,
       height: "100%",
       style: { position: "relative", minHeight: 600 },
-      toolbar: ie,
+      toolbar: ne,
       sidebar: a,
-      rightSidebar: ne ?? void 0,
-      bottomPanel: l,
+      rightSidebar: se ?? void 0,
+      bottomPanel: o,
       children: [
-        /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(he, { steps: pe(T, ge) }) }),
+        /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(pe, { steps: ve(T, Ne) }) }),
         r
       ]
     }
@@ -744,33 +744,33 @@ const ve = {
     quality: "high"
   }
 }, Ie = ({
-  options: $,
-  onRecordingStart: I,
-  onRecordingStop: A,
-  onRecordingPause: E,
-  onRecordingResume: L,
+  options: R,
+  onRecordingStart: z,
+  onRecordingStop: P,
+  onRecordingPause: F,
+  onRecordingResume: V,
   onError: T,
   className: d = ""
 }) => {
-  var n, o;
-  const [s, D] = b({
+  var n, l;
+  const [s, A] = b({
     ...ye,
-    ...$
-  }), [y, W] = b(null), [h, k] = b("idle"), [N, R] = b([]), [w, V] = b(null), [O, C] = b(null), [q, B] = b(!1), [z, _] = b(!1), [P, X] = b(
+    ...R
+  }), [N, H] = b(null), [h, k] = b("idle"), [y, D] = b([]), [w, O] = b(null), [B, C] = b(null), [j, K] = b(!1), [I, _] = b(!1), [L, ee] = b(
     "pen"
-  ), [ee, S] = b("var(--nice-danger, #ff0000)"), g = M(null), f = M([]), F = M(null), j = M(null), K = M(null), J = M(0);
+  ), [ae, S] = b("var(--nice-danger, #ff0000)"), g = M(null), f = M([]), U = M(null), G = M(null), W = M(null), Q = M(0);
   oe(() => () => {
-    w && w.getTracks().forEach((i) => i.stop()), K.current && clearInterval(K.current);
+    w && w.getTracks().forEach((i) => i.stop()), W.current && clearInterval(W.current);
   }, [w]);
   const x = (i) => {
-    D((c) => ({
+    A((c) => ({
       ...c,
       ...i,
       video: { ...c.video, ...i.video },
       audio: { ...c.audio, ...i.audio },
       output: { ...c.output, ...i.output }
     }));
-  }, G = async () => {
+  }, Y = async () => {
     try {
       k("preparing");
       const i = {
@@ -791,31 +791,31 @@ const ve = {
         } catch (m) {
           console.warn("Could not access microphone:", m);
         }
-      V(c), F.current && (F.current.srcObject = c, F.current.play()), k("idle");
+      O(c), U.current && (U.current.srcObject = c, U.current.play()), k("idle");
     } catch (i) {
       k("error"), T == null || T(i instanceof Error ? i : new Error("Failed to start preview"));
     }
-  }, U = async () => {
-    w || await G();
+  }, E = async () => {
+    w || await Y();
     for (let i = 3; i > 0; i--)
       C(i), await new Promise((c) => setTimeout(c, 1e3));
     C(null);
     try {
-      const i = w || await ae();
+      const i = w || await te();
       if (!i)
         throw new Error("No stream available");
-      const c = ie(s.output.format), m = new MediaRecorder(i, {
+      const c = ne(s.output.format), m = new MediaRecorder(i, {
         mimeType: c,
-        videoBitsPerSecond: ne(s.output.quality)
+        videoBitsPerSecond: se(s.output.quality)
       });
       f.current = [], m.ondataavailable = (v) => {
         v.data.size > 0 && f.current.push(v.data);
       }, m.onstop = () => {
         const v = new Blob(f.current, { type: c });
-        y && (A == null || A({ ...y, status: "stopped" }, v));
-      }, g.current = m, m.start(1e3), J.current = Date.now();
+        N && (P == null || P({ ...N, status: "stopped" }, v));
+      }, g.current = m, m.start(1e3), Q.current = Date.now();
       const p = {
-        id: crypto.randomUUID(),
+        id: $(),
         status: "recording",
         startTime: /* @__PURE__ */ new Date(),
         duration: 0,
@@ -823,40 +823,40 @@ const ve = {
         options: s,
         chunks: []
       };
-      W(p), k("recording"), I == null || I(p), K.current = setInterval(() => {
-        W(
+      H(p), k("recording"), z == null || z(p), W.current = setInterval(() => {
+        H(
           (v) => v ? {
             ...v,
-            duration: (Date.now() - J.current) / 1e3,
-            size: f.current.reduce((de, ue) => de + ue.size, 0)
+            duration: (Date.now() - Q.current) / 1e3,
+            size: f.current.reduce((ue, me) => ue + me.size, 0)
           } : null
         );
       }, 100);
     } catch (i) {
       k("error"), T == null || T(i instanceof Error ? i : new Error("Failed to start recording"));
     }
-  }, ae = async () => (await G(), w), te = () => {
-    g.current && h === "recording" && (g.current.pause(), k("paused"), E == null || E());
-  }, Y = () => {
-    g.current && h === "paused" && (g.current.resume(), k("recording"), L == null || L());
+  }, te = async () => (await Y(), w), ie = () => {
+    g.current && h === "recording" && (g.current.pause(), k("paused"), F == null || F());
   }, Z = () => {
-    K.current && clearInterval(K.current), g.current && (h === "recording" || h === "paused") && (g.current.stop(), k("stopped")), w && (w.getTracks().forEach((i) => i.stop()), V(null));
-  }, Q = ce(
+    g.current && h === "paused" && (g.current.resume(), k("recording"), V == null || V());
+  }, J = () => {
+    W.current && clearInterval(W.current), g.current && (h === "recording" || h === "paused") && (g.current.stop(), k("stopped")), w && (w.getTracks().forEach((i) => i.stop()), O(null));
+  }, X = de(
     (i) => {
       if (h !== "recording")
         return;
       const c = {
-        id: crypto.randomUUID(),
-        time: (y == null ? void 0 : y.duration) || 0,
-        label: i || `Marker ${N.length + 1}`,
+        id: $(),
+        time: (N == null ? void 0 : N.duration) || 0,
+        label: i || `Marker ${y.length + 1}`,
         color: a()
       };
-      R((m) => [...m, c]);
+      D((m) => [...m, c]);
     },
-    [h, y == null ? void 0 : y.duration, N.length]
-  ), H = (i) => {
-    R((c) => c.filter((m) => m.id !== i));
-  }, ie = (i) => {
+    [h, N == null ? void 0 : N.duration, y.length]
+  ), q = (i) => {
+    D((c) => c.filter((m) => m.id !== i));
+  }, ne = (i) => {
     switch (i) {
       case "mp4":
         return "video/mp4";
@@ -865,7 +865,7 @@ const ve = {
       default:
         return "video/webm;codecs=vp9";
     }
-  }, ne = (i) => {
+  }, se = (i) => {
     switch (i) {
       case "low":
         return 25e5;
@@ -889,13 +889,13 @@ const ve = {
   }, r = (i) => {
     const c = Math.floor(i / 3600), m = Math.floor(i % 3600 / 60), p = Math.floor(i % 60), v = Math.floor(i % 1 * 100);
     return c > 0 ? `${c}:${m.toString().padStart(2, "0")}:${p.toString().padStart(2, "0")}` : `${m.toString().padStart(2, "0")}:${p.toString().padStart(2, "0")}.${v.toString().padStart(2, "0")}`;
-  }, l = (i) => i < 1024 ? `${i} B` : i < 1024 * 1024 ? `${(i / 1024).toFixed(1)} KB` : `${(i / 1024 / 1024).toFixed(1)} MB`;
+  }, o = (i) => i < 1024 ? `${i} B` : i < 1024 * 1024 ? `${(i / 1024).toFixed(1)} KB` : `${(i / 1024 / 1024).toFixed(1)} MB`;
   return /* @__PURE__ */ t("div", { className: `nice-screen-recorder ${d}`, children: [
     /* @__PURE__ */ t("div", { className: "recorder__preview", children: [
-      O !== null && /* @__PURE__ */ e("div", { className: "countdown-overlay", children: /* @__PURE__ */ e("span", { className: "countdown-number", children: O }) }),
-      /* @__PURE__ */ e("video", { ref: F, className: "preview-video", muted: !0, playsInline: !0 }),
-      z && /* @__PURE__ */ e("canvas", { ref: j, className: "annotation-canvas" }),
-      !w && h === "idle" && /* @__PURE__ */ e("div", { className: "preview-placeholder", children: /* @__PURE__ */ t("button", { className: "start-preview-button", onClick: G, children: [
+      B !== null && /* @__PURE__ */ e("div", { className: "countdown-overlay", children: /* @__PURE__ */ e("span", { className: "countdown-number", children: B }) }),
+      /* @__PURE__ */ e("video", { ref: U, className: "preview-video", muted: !0, playsInline: !0 }),
+      I && /* @__PURE__ */ e("canvas", { ref: G, className: "annotation-canvas" }),
+      !w && h === "idle" && /* @__PURE__ */ e("div", { className: "preview-placeholder", children: /* @__PURE__ */ t("button", { className: "start-preview-button", onClick: Y, children: [
         /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "monitor", size: 18 }) }),
         /* @__PURE__ */ e("span", { children: "Select Screen to Record" })
       ] }) }),
@@ -910,30 +910,30 @@ const ve = {
           "button",
           {
             className: "control-button control-button--record",
-            onClick: U,
-            disabled: !!O,
+            onClick: E,
+            disabled: !!B,
             children: [
               /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "circle", size: 18 }) }),
               /* @__PURE__ */ e("span", { children: "Start Recording" })
             ]
           }
         ),
-        h === "recording" && /* @__PURE__ */ t(re, { children: [
-          /* @__PURE__ */ t("button", { className: "control-button control-button--pause", onClick: te, children: [
+        h === "recording" && /* @__PURE__ */ t(le, { children: [
+          /* @__PURE__ */ t("button", { className: "control-button control-button--pause", onClick: ie, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "pause", size: 18 }) }),
             /* @__PURE__ */ e("span", { children: "Pause" })
           ] }),
-          /* @__PURE__ */ t("button", { className: "control-button control-button--stop", onClick: Z, children: [
+          /* @__PURE__ */ t("button", { className: "control-button control-button--stop", onClick: J, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "stop", size: 18 }) }),
             /* @__PURE__ */ e("span", { children: "Stop" })
           ] })
         ] }),
-        h === "paused" && /* @__PURE__ */ t(re, { children: [
-          /* @__PURE__ */ t("button", { className: "control-button control-button--resume", onClick: Y, children: [
+        h === "paused" && /* @__PURE__ */ t(le, { children: [
+          /* @__PURE__ */ t("button", { className: "control-button control-button--resume", onClick: Z, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "play", size: 18 }) }),
             /* @__PURE__ */ e("span", { children: "Resume" })
           ] }),
-          /* @__PURE__ */ t("button", { className: "control-button control-button--stop", onClick: Z, children: [
+          /* @__PURE__ */ t("button", { className: "control-button control-button--stop", onClick: J, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "stop", size: 18 }) }),
             /* @__PURE__ */ e("span", { children: "Stop" })
           ] })
@@ -943,7 +943,7 @@ const ve = {
           {
             className: "control-button control-button--new",
             onClick: () => {
-              k("idle"), W(null), R([]);
+              k("idle"), H(null), D([]);
             },
             children: [
               /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "refresh", size: 18 }) }),
@@ -953,15 +953,15 @@ const ve = {
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "controls__secondary", children: [
-        (h === "recording" || h === "paused") && /* @__PURE__ */ t("button", { className: "control-button control-button--marker", onClick: () => Q(), children: [
+        (h === "recording" || h === "paused") && /* @__PURE__ */ t("button", { className: "control-button control-button--marker", onClick: () => X(), children: [
           /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "tag", size: 18 }) }),
           /* @__PURE__ */ e("span", { children: "Add Marker" })
         ] }),
         /* @__PURE__ */ t(
           "button",
           {
-            className: `control-button ${z ? "control-button--active" : ""}`,
-            onClick: () => _(!z),
+            className: `control-button ${I ? "control-button--active" : ""}`,
+            onClick: () => _(!I),
             disabled: h !== "recording",
             children: [
               /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "pen", size: 18 }) }),
@@ -973,7 +973,7 @@ const ve = {
           "button",
           {
             className: "control-button control-button--settings",
-            onClick: () => B(!q),
+            onClick: () => K(!j),
             disabled: h === "recording",
             "aria-label": "Settings",
             children: /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "settings", size: 18 }) })
@@ -986,17 +986,17 @@ const ve = {
         /* @__PURE__ */ t("span", { className: "status-item", children: [
           /* @__PURE__ */ e("strong", { children: "Duration:" }),
           " ",
-          r((y == null ? void 0 : y.duration) || 0)
+          r((N == null ? void 0 : N.duration) || 0)
         ] }),
         /* @__PURE__ */ t("span", { className: "status-item", children: [
           /* @__PURE__ */ e("strong", { children: "Size:" }),
           " ",
-          l((y == null ? void 0 : y.size) || 0)
+          o((N == null ? void 0 : N.size) || 0)
         ] }),
         /* @__PURE__ */ t("span", { className: "status-item", children: [
           /* @__PURE__ */ e("strong", { children: "Markers:" }),
           " ",
-          N.length
+          y.length
         ] })
       ] }),
       /* @__PURE__ */ t("div", { className: "status__quality", children: [
@@ -1012,12 +1012,12 @@ const ve = {
         /* @__PURE__ */ e("span", { className: s.audio.enabled ? "audio-on" : "audio-off", children: /* @__PURE__ */ e(u, { name: s.audio.enabled ? "volume" : "volume-off", size: 14 }) })
       ] })
     ] }),
-    z && h === "recording" && /* @__PURE__ */ t("div", { className: "recorder__annotation-tools", children: [
+    I && h === "recording" && /* @__PURE__ */ t("div", { className: "recorder__annotation-tools", children: [
       /* @__PURE__ */ e("div", { className: "tool-group", children: ["pen", "arrow", "rectangle", "text"].map((i) => /* @__PURE__ */ e(
         "button",
         {
-          className: `tool-button ${P === i ? "tool-button--active" : ""}`,
-          onClick: () => X(i),
+          className: `tool-button ${L === i ? "tool-button--active" : ""}`,
+          onClick: () => ee(i),
           "aria-label": i,
           children: /* @__PURE__ */ e(
             u,
@@ -1039,16 +1039,16 @@ const ve = {
       ].map((i) => /* @__PURE__ */ e(
         "button",
         {
-          className: `color-button ${ee === i ? "color-button--active" : ""}`,
+          className: `color-button ${ae === i ? "color-button--active" : ""}`,
           style: { backgroundColor: i },
           onClick: () => S(i)
         },
         i
       )) })
     ] }),
-    N.length > 0 && /* @__PURE__ */ t("div", { className: "recorder__markers", children: [
+    y.length > 0 && /* @__PURE__ */ t("div", { className: "recorder__markers", children: [
       /* @__PURE__ */ e("h4", { children: "Markers" }),
-      /* @__PURE__ */ e("div", { className: "markers-list", children: N.map((i) => /* @__PURE__ */ t(
+      /* @__PURE__ */ e("div", { className: "markers-list", children: y.map((i) => /* @__PURE__ */ t(
         "div",
         {
           className: "marker-item",
@@ -1061,7 +1061,7 @@ const ve = {
                 type: "text",
                 value: i.label,
                 onChange: (c) => {
-                  R(
+                  D(
                     (m) => m.map((p) => p.id === i.id ? { ...p, label: c.target.value } : p)
                   );
                 },
@@ -1073,7 +1073,7 @@ const ve = {
               {
                 "aria-label": "Close",
                 className: "marker-remove",
-                onClick: () => H(i.id),
+                onClick: () => q(i.id),
                 children: /* @__PURE__ */ e(u, { name: "close", size: 16 })
               }
             )
@@ -1082,7 +1082,7 @@ const ve = {
         i.id
       )) })
     ] }),
-    q && /* @__PURE__ */ t("div", { className: "recorder__settings", children: [
+    j && /* @__PURE__ */ t("div", { className: "recorder__settings", children: [
       /* @__PURE__ */ t("div", { className: "settings-header", children: [
         /* @__PURE__ */ e("h3", { children: "Recording Settings" }),
         /* @__PURE__ */ e(
@@ -1090,7 +1090,7 @@ const ve = {
           {
             "aria-label": "Close",
             className: "close-button",
-            onClick: () => B(!1),
+            onClick: () => K(!1),
             children: /* @__PURE__ */ e(u, { name: "close", size: 16 })
           }
         )
@@ -1123,7 +1123,7 @@ const ve = {
           /* @__PURE__ */ t(
             "select",
             {
-              value: `${(n = s.video.resolution) == null ? void 0 : n.width}x${(o = s.video.resolution) == null ? void 0 : o.height}`,
+              value: `${(n = s.video.resolution) == null ? void 0 : n.width}x${(l = s.video.resolution) == null ? void 0 : l.height}`,
               onChange: (i) => {
                 const [c, m] = i.target.value.split("x").map(Number);
                 x({
@@ -1186,7 +1186,7 @@ const ve = {
           ),
           "Enable Audio"
         ] }),
-        s.audio.enabled && /* @__PURE__ */ t(re, { children: [
+        s.audio.enabled && /* @__PURE__ */ t(le, { children: [
           /* @__PURE__ */ t("label", { children: [
             "Source",
             /* @__PURE__ */ t(
@@ -1278,8 +1278,8 @@ const ve = {
       ] })
     ] })
   ] });
-}, Ne = {
-  id: crypto.randomUUID(),
+}, ke = {
+  id: $(),
   name: "My Stream",
   protocol: "rtmp",
   destinations: [],
@@ -1306,7 +1306,7 @@ const ve = {
       codec: "aac"
     }
   }
-}, le = [
+}, ce = [
   {
     platform: "youtube",
     name: "YouTube",
@@ -1322,7 +1322,7 @@ const ve = {
   },
   { platform: "custom-rtmp", name: "Custom RTMP", icon: "link", defaultUrl: "" },
   { platform: "custom-srt", name: "Custom SRT", icon: "lock", defaultUrl: "" }
-], se = [
+], re = [
   { type: "camera", name: "Camera", icon: "camera" },
   { type: "screen", name: "Screen Capture", icon: "monitor" },
   { type: "window", name: "Window Capture", icon: "window" },
@@ -1331,18 +1331,18 @@ const ve = {
   { type: "video", name: "Video", icon: "video" },
   { type: "microphone", name: "Microphone", icon: "mic" },
   { type: "system-audio", name: "System Audio", icon: "volume" }
-], ze = ({
-  config: $,
-  onConfigChange: I,
-  onStreamStart: A,
-  onStreamStop: E,
-  onStatsUpdate: L,
+], _e = ({
+  config: R,
+  onConfigChange: z,
+  onStreamStart: P,
+  onStreamStop: F,
+  onStatsUpdate: V,
   onError: T,
   className: d = ""
 }) => {
-  const [s, D] = b($ || Ne), [y, W] = b(
+  const [s, A] = b(R || ke), [N, H] = b(
     "sources"
-  ), [h, k] = b(!1), [N, R] = b({
+  ), [h, k] = b(!1), [y, D] = b({
     duration: 0,
     viewers: 0,
     peakViewers: 0,
@@ -1351,21 +1351,21 @@ const ve = {
     droppedFrames: 0,
     cpuUsage: 0,
     memoryUsage: 0
-  }), [w, V] = b(null), [O, C] = b(!1), [q, B] = b(!1), [z, _] = b([s.layout]), [P, X] = b(0), ee = M(null), S = M(null), g = M(0);
+  }), [w, O] = b(null), [B, C] = b(!1), [j, K] = b(!1), [I, _] = b([s.layout]), [L, ee] = b(0), ae = M(null), S = M(null), g = M(0);
   oe(() => {
-    $ && D($);
-  }, [$]), oe(() => () => {
+    R && A(R);
+  }, [R]), oe(() => () => {
     S.current && clearInterval(S.current);
   }, []);
-  const f = ce(
+  const f = de(
     (a) => {
       const r = { ...s, ...a };
-      D(r), I == null || I(r);
+      A(r), z == null || z(r);
     },
-    [s, I]
-  ), F = (a) => {
-    const r = le.find((n) => n.platform === a), l = {
-      id: crypto.randomUUID(),
+    [s, z]
+  ), U = (a) => {
+    const r = ce.find((n) => n.platform === a), o = {
+      id: $(),
       name: (r == null ? void 0 : r.name) || "Custom",
       platform: a,
       url: (r == null ? void 0 : r.defaultUrl) || "",
@@ -1373,36 +1373,36 @@ const ve = {
       enabled: !0,
       status: "idle"
     };
-    f({ destinations: [...s.destinations, l] }), B(!1);
-  }, j = (a, r) => {
+    f({ destinations: [...s.destinations, o] }), K(!1);
+  }, G = (a, r) => {
     f({
-      destinations: s.destinations.map((l) => l.id === a ? { ...l, ...r } : l)
+      destinations: s.destinations.map((o) => o.id === a ? { ...o, ...r } : o)
     });
-  }, K = (a) => {
+  }, W = (a) => {
     f({ destinations: s.destinations.filter((r) => r.id !== a) });
-  }, J = async (a) => {
-    const r = se.find((o) => o.type === a), l = {
-      id: crypto.randomUUID(),
+  }, Q = async (a) => {
+    const r = re.find((l) => l.type === a), o = {
+      id: $(),
       type: a,
-      name: `${(r == null ? void 0 : r.name) || a} ${s.sources.filter((o) => o.type === a).length + 1}`,
+      name: `${(r == null ? void 0 : r.name) || a} ${s.sources.filter((l) => l.type === a).length + 1}`,
       settings: {},
       volume: 1,
       muted: !1
     };
     try {
       if (a === "camera" || a === "microphone") {
-        const o = a === "camera" ? { video: !0 } : { audio: !0 }, c = (await navigator.mediaDevices.enumerateDevices()).filter(
+        const l = a === "camera" ? { video: !0 } : { audio: !0 }, c = (await navigator.mediaDevices.enumerateDevices()).filter(
           (m) => a === "camera" ? m.kind === "videoinput" : m.kind === "audioinput"
         );
-        c.length > 0 && (l.settings.deviceId = c[0].deviceId);
+        c.length > 0 && (o.settings.deviceId = c[0].deviceId);
       } else (a === "screen" || a === "window") && await navigator.mediaDevices.getDisplayMedia({ video: !0 });
-    } catch (o) {
-      console.warn(`Could not access ${a}:`, o);
+    } catch (l) {
+      console.warn(`Could not access ${a}:`, l);
     }
-    f({ sources: [...s.sources, l] });
+    f({ sources: [...s.sources, o] });
     const n = {
-      id: crypto.randomUUID(),
-      sourceId: l.id,
+      id: $(),
+      sourceId: o.id,
       position: { x: 0, y: 0 },
       size: { width: s.layout.canvas.width, height: s.layout.canvas.height },
       visible: !0,
@@ -1417,9 +1417,9 @@ const ve = {
     }), C(!1);
   }, x = (a, r) => {
     f({
-      sources: s.sources.map((l) => l.id === a ? { ...l, ...r } : l)
+      sources: s.sources.map((o) => o.id === a ? { ...o, ...r } : o)
     });
-  }, G = (a) => {
+  }, Y = (a) => {
     f({
       sources: s.sources.filter((r) => r.id !== a),
       layout: {
@@ -1427,40 +1427,40 @@ const ve = {
         layers: s.layout.layers.filter((r) => r.sourceId !== a)
       }
     });
-  }, U = (a, r) => {
+  }, E = (a, r) => {
     f({
       layout: {
         ...s.layout,
-        layers: s.layout.layers.map((l) => l.id === a ? { ...l, ...r } : l)
+        layers: s.layout.layers.map((o) => o.id === a ? { ...o, ...r } : o)
       }
     });
-  }, ae = (a) => {
-    const r = s.layout.layers.findIndex((l) => l.id === a);
+  }, te = (a) => {
+    const r = s.layout.layers.findIndex((o) => o.id === a);
     if (r < s.layout.layers.length - 1) {
-      const l = [...s.layout.layers];
-      [l[r], l[r + 1]] = [l[r + 1], l[r]], l.forEach((n, o) => {
-        n.zIndex = o;
-      }), f({ layout: { ...s.layout, layers: l } });
+      const o = [...s.layout.layers];
+      [o[r], o[r + 1]] = [o[r + 1], o[r]], o.forEach((n, l) => {
+        n.zIndex = l;
+      }), f({ layout: { ...s.layout, layers: o } });
     }
-  }, te = (a) => {
-    const r = s.layout.layers.findIndex((l) => l.id === a);
+  }, ie = (a) => {
+    const r = s.layout.layers.findIndex((o) => o.id === a);
     if (r > 0) {
-      const l = [...s.layout.layers];
-      [l[r], l[r - 1]] = [l[r - 1], l[r]], l.forEach((n, o) => {
-        n.zIndex = o;
-      }), f({ layout: { ...s.layout, layers: l } });
+      const o = [...s.layout.layers];
+      [o[r], o[r - 1]] = [o[r - 1], o[r]], o.forEach((n, l) => {
+        n.zIndex = l;
+      }), f({ layout: { ...s.layout, layers: o } });
     }
-  }, Y = () => {
+  }, Z = () => {
     const a = {
-      name: `Scene ${z.length + 1}`,
+      name: `Scene ${I.length + 1}`,
       canvas: { ...s.layout.canvas },
       layers: []
     };
-    _([...z, a]);
-  }, Z = (a) => {
-    const r = [...z];
-    r[P] = s.layout, _(r), X(a), f({ layout: z[a] });
-  }, Q = async () => {
+    _([...I, a]);
+  }, J = (a) => {
+    const r = [...I];
+    r[L] = s.layout, _(r), ee(a), f({ layout: I[a] });
+  }, X = async () => {
     try {
       f({
         destinations: s.destinations.map(
@@ -1470,18 +1470,18 @@ const ve = {
         destinations: s.destinations.map(
           (a) => a.enabled ? { ...a, status: "live" } : a
         )
-      }), k(!0), g.current = Date.now(), A == null || A(), S.current = setInterval(() => {
+      }), k(!0), g.current = Date.now(), P == null || P(), S.current = setInterval(() => {
         const a = {
           duration: (Date.now() - g.current) / 1e3,
-          viewers: Math.floor(Math.random() * 100) + N.viewers,
-          peakViewers: Math.max(N.peakViewers, N.viewers),
+          viewers: Math.floor(Math.random() * 100) + y.viewers,
+          peakViewers: Math.max(y.peakViewers, y.viewers),
           bitrate: s.settings.video.bitrate + Math.floor(Math.random() * 500 - 250),
           fps: s.settings.video.frameRate - Math.random() * 2,
-          droppedFrames: N.droppedFrames + (Math.random() > 0.95 ? 1 : 0),
+          droppedFrames: y.droppedFrames + (Math.random() > 0.95 ? 1 : 0),
           cpuUsage: 15 + Math.random() * 30,
           memoryUsage: 40 + Math.random() * 20
         };
-        R(a), L == null || L(a);
+        D(a), V == null || V(a);
       }, 1e3);
     } catch (a) {
       T == null || T(a instanceof Error ? a : new Error("Failed to start stream")), f({
@@ -1491,14 +1491,14 @@ const ve = {
         }))
       });
     }
-  }, H = () => {
+  }, q = () => {
     S.current && clearInterval(S.current), f({
       destinations: s.destinations.map((a) => ({ ...a, status: "idle" }))
-    }), k(!1), E == null || E();
-  }, ie = (a) => {
-    const r = Math.floor(a / 3600), l = Math.floor(a % 3600 / 60), n = Math.floor(a % 60);
-    return `${r.toString().padStart(2, "0")}:${l.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}`;
+    }), k(!1), F == null || F();
   }, ne = (a) => {
+    const r = Math.floor(a / 3600), o = Math.floor(a % 3600 / 60), n = Math.floor(a % 60);
+    return `${r.toString().padStart(2, "0")}:${o.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}`;
+  }, se = (a) => {
     switch (a) {
       case "live":
         return "var(--nice-success, #00ff00)";
@@ -1527,35 +1527,35 @@ const ve = {
           " LIVE"
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: "header__stats", children: h && /* @__PURE__ */ t(re, { children: [
+      /* @__PURE__ */ e("div", { className: "header__stats", children: h && /* @__PURE__ */ t(le, { children: [
         /* @__PURE__ */ t("span", { className: "stat-item", children: [
           /* @__PURE__ */ e(u, { name: "clock", size: 14 }),
           " ",
-          ie(N.duration)
+          ne(y.duration)
         ] }),
         /* @__PURE__ */ t("span", { className: "stat-item", children: [
           /* @__PURE__ */ e(u, { name: "users", size: 14 }),
           " ",
-          N.viewers
+          y.viewers
         ] }),
         /* @__PURE__ */ t("span", { className: "stat-item", children: [
           /* @__PURE__ */ e(u, { name: "bar-chart", size: 14 }),
           " ",
-          Math.round(N.bitrate),
+          Math.round(y.bitrate),
           " kbps"
         ] }),
         /* @__PURE__ */ t("span", { className: "stat-item", children: [
           /* @__PURE__ */ e(u, { name: "video", size: 14 }),
           " ",
-          N.fps.toFixed(1),
+          y.fps.toFixed(1),
           " fps"
         ] })
       ] }) }),
-      /* @__PURE__ */ e("div", { className: "header__actions", children: h ? /* @__PURE__ */ e("button", { className: "action-button action-button--stop", onClick: H, children: "End Stream" }) : /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "header__actions", children: h ? /* @__PURE__ */ e("button", { className: "action-button action-button--stop", onClick: q, children: "End Stream" }) : /* @__PURE__ */ e(
         "button",
         {
           className: "action-button action-button--go-live",
-          onClick: Q,
+          onClick: X,
           disabled: s.destinations.filter((a) => a.enabled).length === 0,
           children: "Go Live"
         }
@@ -1564,28 +1564,28 @@ const ve = {
     /* @__PURE__ */ t("div", { className: "streaming__main", children: [
       /* @__PURE__ */ t("div", { className: "streaming__preview", children: [
         /* @__PURE__ */ t("div", { className: "scenes-bar", children: [
-          z.map((a, r) => /* @__PURE__ */ e(
+          I.map((a, r) => /* @__PURE__ */ e(
             "button",
             {
-              className: `scene-button ${P === r ? "scene-button--active" : ""}`,
-              onClick: () => Z(r),
+              className: `scene-button ${L === r ? "scene-button--active" : ""}`,
+              onClick: () => J(r),
               children: a.name
             },
             r
           )),
-          /* @__PURE__ */ e("button", { className: "scene-button scene-button--add", onClick: Y, children: "+" })
+          /* @__PURE__ */ e("button", { className: "scene-button scene-button--add", onClick: Z, children: "+" })
         ] }),
         /* @__PURE__ */ e(
           "div",
           {
-            ref: ee,
+            ref: ae,
             className: "preview-canvas",
             style: {
               aspectRatio: `${s.layout.canvas.width}/${s.layout.canvas.height}`,
               backgroundColor: s.layout.canvas.backgroundColor
             },
             children: s.layout.layers.sort((a, r) => a.zIndex - r.zIndex).map((a) => {
-              var l;
+              var o;
               const r = s.sources.find((n) => n.id === a.sourceId);
               return !a.visible || !r ? null : /* @__PURE__ */ e(
                 "div",
@@ -1599,12 +1599,12 @@ const ve = {
                     opacity: a.opacity,
                     zIndex: a.zIndex
                   },
-                  onClick: () => V(a.id),
+                  onClick: () => O(a.id),
                   children: /* @__PURE__ */ t("div", { className: "layer-content", children: [
                     /* @__PURE__ */ e("span", { className: "layer-icon", children: /* @__PURE__ */ e(
                       u,
                       {
-                        name: ((l = se.find((n) => n.type === r.type)) == null ? void 0 : l.icon) ?? "box",
+                        name: ((o = re.find((n) => n.type === r.type)) == null ? void 0 : o.icon) ?? "box",
                         size: 16
                       }
                     ) }),
@@ -1621,14 +1621,14 @@ const ve = {
         /* @__PURE__ */ e("div", { className: "panel-tabs", children: ["sources", "audio", "destinations", "settings"].map((a) => /* @__PURE__ */ e(
           "button",
           {
-            className: `panel-tab ${y === a ? "panel-tab--active" : ""}`,
-            onClick: () => W(a),
+            className: `panel-tab ${N === a ? "panel-tab--active" : ""}`,
+            onClick: () => H(a),
             children: a.charAt(0).toUpperCase() + a.slice(1)
           },
           a
         )) }),
         /* @__PURE__ */ t("div", { className: "panel-content", children: [
-          y === "sources" && /* @__PURE__ */ t("div", { className: "sources-panel", children: [
+          N === "sources" && /* @__PURE__ */ t("div", { className: "sources-panel", children: [
             /* @__PURE__ */ t("div", { className: "panel-header", children: [
               /* @__PURE__ */ e("h3", { children: "Sources" }),
               /* @__PURE__ */ e(
@@ -1642,18 +1642,18 @@ const ve = {
               )
             ] }),
             /* @__PURE__ */ e("div", { className: "sources-list", children: s.sources.filter((a) => a.type !== "microphone" && a.type !== "system-audio").map((a) => {
-              var l;
+              var o;
               const r = s.layout.layers.find((n) => n.sourceId === a.id);
               return /* @__PURE__ */ t(
                 "div",
                 {
                   className: `source-item ${w === (r == null ? void 0 : r.id) ? "source-item--selected" : ""}`,
-                  onClick: () => r && V(r.id),
+                  onClick: () => r && O(r.id),
                   children: [
                     /* @__PURE__ */ e("span", { className: "source-icon", children: /* @__PURE__ */ e(
                       u,
                       {
-                        name: ((l = se.find((n) => n.type === a.type)) == null ? void 0 : l.icon) ?? "box",
+                        name: ((o = re.find((n) => n.type === a.type)) == null ? void 0 : o.icon) ?? "box",
                         size: 16
                       }
                     ) }),
@@ -1664,7 +1664,7 @@ const ve = {
                         {
                           className: r != null && r.visible ? "" : "inactive",
                           onClick: (n) => {
-                            n.stopPropagation(), r && U(r.id, { visible: !r.visible });
+                            n.stopPropagation(), r && E(r.id, { visible: !r.visible });
                           },
                           children: /* @__PURE__ */ e(u, { name: r != null && r.visible ? "eye" : "eye-off", size: 14 })
                         }
@@ -1673,7 +1673,7 @@ const ve = {
                         "button",
                         {
                           onClick: (n) => {
-                            n.stopPropagation(), r && ae(r.id);
+                            n.stopPropagation(), r && te(r.id);
                           },
                           children: /* @__PURE__ */ e(u, { name: "arrow-up", size: 14 })
                         }
@@ -1682,7 +1682,7 @@ const ve = {
                         "button",
                         {
                           onClick: (n) => {
-                            n.stopPropagation(), r && te(r.id);
+                            n.stopPropagation(), r && ie(r.id);
                           },
                           children: /* @__PURE__ */ e(u, { name: "arrow-down", size: 14 })
                         }
@@ -1691,7 +1691,7 @@ const ve = {
                         "button",
                         {
                           onClick: (n) => {
-                            n.stopPropagation(), G(a.id);
+                            n.stopPropagation(), Y(a.id);
                           },
                           disabled: h,
                           children: /* @__PURE__ */ e(u, { name: "trash", size: 14 })
@@ -1707,7 +1707,7 @@ const ve = {
               /* @__PURE__ */ e("h4", { children: "Properties" }),
               (() => {
                 const a = s.layout.layers.find((r) => r.id === w);
-                return a ? /* @__PURE__ */ t(re, { children: [
+                return a ? /* @__PURE__ */ t(le, { children: [
                   /* @__PURE__ */ t("label", { children: [
                     "X Position",
                     /* @__PURE__ */ e(
@@ -1715,7 +1715,7 @@ const ve = {
                       {
                         type: "number",
                         value: a.position.x,
-                        onChange: (r) => U(a.id, {
+                        onChange: (r) => E(a.id, {
                           position: { ...a.position, x: parseInt(r.target.value) || 0 }
                         })
                       }
@@ -1728,7 +1728,7 @@ const ve = {
                       {
                         type: "number",
                         value: a.position.y,
-                        onChange: (r) => U(a.id, {
+                        onChange: (r) => E(a.id, {
                           position: { ...a.position, y: parseInt(r.target.value) || 0 }
                         })
                       }
@@ -1741,7 +1741,7 @@ const ve = {
                       {
                         type: "number",
                         value: a.size.width,
-                        onChange: (r) => U(a.id, {
+                        onChange: (r) => E(a.id, {
                           size: { ...a.size, width: parseInt(r.target.value) || 100 }
                         })
                       }
@@ -1754,7 +1754,7 @@ const ve = {
                       {
                         type: "number",
                         value: a.size.height,
-                        onChange: (r) => U(a.id, {
+                        onChange: (r) => E(a.id, {
                           size: { ...a.size, height: parseInt(r.target.value) || 100 }
                         })
                       }
@@ -1770,7 +1770,7 @@ const ve = {
                         max: "1",
                         step: "0.1",
                         value: a.opacity,
-                        onChange: (r) => U(a.id, {
+                        onChange: (r) => E(a.id, {
                           opacity: parseFloat(r.target.value)
                         })
                       }
@@ -1780,7 +1780,7 @@ const ve = {
               })()
             ] })
           ] }),
-          y === "audio" && /* @__PURE__ */ t("div", { className: "audio-panel", children: [
+          N === "audio" && /* @__PURE__ */ t("div", { className: "audio-panel", children: [
             /* @__PURE__ */ t("div", { className: "panel-header", children: [
               /* @__PURE__ */ e("h3", { children: "Audio Mixer" }),
               /* @__PURE__ */ e(
@@ -1805,7 +1805,7 @@ const ve = {
                     /* @__PURE__ */ e("span", { className: "audio-icon", children: /* @__PURE__ */ e(
                       u,
                       {
-                        name: ((r = se.find((l) => l.type === a.type)) == null ? void 0 : r.icon) ?? "box",
+                        name: ((r = re.find((o) => o.type === a.type)) == null ? void 0 : r.icon) ?? "box",
                         size: 16
                       }
                     ) }),
@@ -1828,7 +1828,7 @@ const ve = {
                         max: "1",
                         step: "0.01",
                         value: a.volume ?? 1,
-                        onChange: (l) => x(a.id, { volume: parseFloat(l.target.value) }),
+                        onChange: (o) => x(a.id, { volume: parseFloat(o.target.value) }),
                         disabled: a.muted
                       }
                     ),
@@ -1851,14 +1851,14 @@ const ve = {
               ).length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No audio sources added" })
             ] })
           ] }),
-          y === "destinations" && /* @__PURE__ */ t("div", { className: "destinations-panel", children: [
+          N === "destinations" && /* @__PURE__ */ t("div", { className: "destinations-panel", children: [
             /* @__PURE__ */ t("div", { className: "panel-header", children: [
               /* @__PURE__ */ e("h3", { children: "Destinations" }),
               /* @__PURE__ */ e(
                 "button",
                 {
                   className: "add-button",
-                  onClick: () => B(!0),
+                  onClick: () => K(!0),
                   disabled: h,
                   children: "+ Add"
                 }
@@ -1873,13 +1873,13 @@ const ve = {
                       "span",
                       {
                         className: "status-indicator",
-                        style: { backgroundColor: ne(a.status) }
+                        style: { backgroundColor: se(a.status) }
                       }
                     ),
                     /* @__PURE__ */ e("span", { className: "destination-icon", children: /* @__PURE__ */ e(
                       u,
                       {
-                        name: ((r = le.find((l) => l.platform === a.platform)) == null ? void 0 : r.icon) ?? "link",
+                        name: ((r = ce.find((o) => o.platform === a.platform)) == null ? void 0 : r.icon) ?? "link",
                         size: 16
                       }
                     ) }),
@@ -1890,7 +1890,7 @@ const ve = {
                         {
                           type: "checkbox",
                           checked: a.enabled,
-                          onChange: (l) => j(a.id, { enabled: l.target.checked }),
+                          onChange: (o) => G(a.id, { enabled: o.target.checked }),
                           disabled: h
                         }
                       ),
@@ -1905,7 +1905,7 @@ const ve = {
                         {
                           type: "text",
                           value: a.url,
-                          onChange: (l) => j(a.id, { url: l.target.value }),
+                          onChange: (o) => G(a.id, { url: o.target.value }),
                           placeholder: "rtmp://...",
                           disabled: h
                         }
@@ -1918,7 +1918,7 @@ const ve = {
                         {
                           type: "password",
                           value: a.streamKey || "",
-                          onChange: (l) => j(a.id, { streamKey: l.target.value }),
+                          onChange: (o) => G(a.id, { streamKey: o.target.value }),
                           placeholder: "Enter stream key",
                           disabled: h
                         }
@@ -1929,7 +1929,7 @@ const ve = {
                     "button",
                     {
                       className: "remove-button",
-                      onClick: () => K(a.id),
+                      onClick: () => W(a.id),
                       disabled: h,
                       children: "Remove"
                     }
@@ -1939,7 +1939,7 @@ const ve = {
               s.destinations.length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No destinations configured" })
             ] })
           ] }),
-          y === "settings" && /* @__PURE__ */ t("div", { className: "settings-panel", children: [
+          N === "settings" && /* @__PURE__ */ t("div", { className: "settings-panel", children: [
             /* @__PURE__ */ t("div", { className: "setting-section", children: [
               /* @__PURE__ */ e("h4", { children: "Video" }),
               /* @__PURE__ */ t("label", { children: [
@@ -1949,15 +1949,15 @@ const ve = {
                   {
                     value: `${s.settings.video.resolution.width}x${s.settings.video.resolution.height}`,
                     onChange: (a) => {
-                      const [r, l] = a.target.value.split("x").map(Number);
+                      const [r, o] = a.target.value.split("x").map(Number);
                       f({
                         settings: {
                           ...s.settings,
-                          video: { ...s.settings.video, resolution: { width: r, height: l } }
+                          video: { ...s.settings.video, resolution: { width: r, height: o } }
                         },
                         layout: {
                           ...s.layout,
-                          canvas: { ...s.layout.canvas, width: r, height: l }
+                          canvas: { ...s.layout.canvas, width: r, height: o }
                         }
                       });
                     },
@@ -2095,27 +2095,27 @@ const ve = {
       /* @__PURE__ */ t("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "CPU" }),
         /* @__PURE__ */ t("span", { className: "value", children: [
-          N.cpuUsage.toFixed(1),
+          y.cpuUsage.toFixed(1),
           "%"
         ] })
       ] }),
       /* @__PURE__ */ t("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "Memory" }),
         /* @__PURE__ */ t("span", { className: "value", children: [
-          N.memoryUsage.toFixed(1),
+          y.memoryUsage.toFixed(1),
           "%"
         ] })
       ] }),
       /* @__PURE__ */ t("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "Dropped" }),
-        /* @__PURE__ */ e("span", { className: "value", children: N.droppedFrames })
+        /* @__PURE__ */ e("span", { className: "value", children: y.droppedFrames })
       ] }),
       /* @__PURE__ */ t("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "Peak Viewers" }),
-        /* @__PURE__ */ e("span", { className: "value", children: N.peakViewers })
+        /* @__PURE__ */ e("span", { className: "value", children: y.peakViewers })
       ] })
     ] }) }),
-    O && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ t("div", { className: "modal", children: [
+    B && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ t("div", { className: "modal", children: [
       /* @__PURE__ */ t("div", { className: "modal-header", children: [
         /* @__PURE__ */ e("h3", { children: "Add Source" }),
         /* @__PURE__ */ e(
@@ -2128,11 +2128,11 @@ const ve = {
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "source-type-grid", children: se.map((a) => /* @__PURE__ */ t(
+      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "source-type-grid", children: re.map((a) => /* @__PURE__ */ t(
         "button",
         {
           className: "source-type-button",
-          onClick: () => J(a.type),
+          onClick: () => Q(a.type),
           children: [
             /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: a.icon, size: 24 }) }),
             /* @__PURE__ */ e("span", { className: "name", children: a.name })
@@ -2141,7 +2141,7 @@ const ve = {
         a.type
       )) }) })
     ] }) }),
-    q && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ t("div", { className: "modal", children: [
+    j && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ t("div", { className: "modal", children: [
       /* @__PURE__ */ t("div", { className: "modal-header", children: [
         /* @__PURE__ */ e("h3", { children: "Add Destination" }),
         /* @__PURE__ */ e(
@@ -2149,16 +2149,16 @@ const ve = {
           {
             "aria-label": "Close",
             className: "close-button",
-            onClick: () => B(!1),
+            onClick: () => K(!1),
             children: /* @__PURE__ */ e(u, { name: "close", size: 16 })
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "platform-grid", children: le.map((a) => /* @__PURE__ */ t(
+      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "platform-grid", children: ce.map((a) => /* @__PURE__ */ t(
         "button",
         {
           className: "platform-button",
-          onClick: () => F(a.platform),
+          onClick: () => U(a.platform),
           children: [
             /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: a.icon, size: 24 }) }),
             /* @__PURE__ */ e("span", { className: "name", children: a.name })
@@ -2170,7 +2170,7 @@ const ve = {
   ] });
 };
 export {
-  ze as NiceLiveStreaming,
+  _e as NiceLiveStreaming,
   Ie as NiceScreenRecorder,
-  Se as NiceVideoEditor
+  ze as NiceVideoEditor
 };