@nice2dev/ui-video 1.2.1 → 1.3.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { jsxs as t, jsx as e, Fragment as oe } from "react/jsx-runtime";
-import { NiceAppShell as pe } from "@nice2dev/ui";
-import { useNiceTranslation as me, NiceIcon as m, NiceTutorialButton as _e, resolveTutorial as ge, createId as $ } from "@nice2dev/ui-core";
-import { useState as g, useRef as M, useEffect as le, useCallback as ue } from "react";
-const fe = {
-  id: $(),
+import { jsxs as t, jsx as e, Fragment as ce } from "react/jsx-runtime";
+import { NiceAppShell as _e } from "@nice2dev/ui";
+import { useNiceTranslation as ue, NiceIcon as m, clickOnActivationKey as me, NiceTutorialButton as ge, resolveTutorial as fe, createId as M } from "@nice2dev/ui-core";
+import { useState as f, useRef as I, useEffect as le, useCallback as ve } from "react";
+const be = {
+  id: M(),
   name: "Untitled Project",
   resolution: { width: 1920, height: 1080, label: "1080p" },
   frameRate: 30,
@@ -35,7 +35,7 @@ const fe = {
     audio: { sampleRate: 48e3, channels: 2, bitrate: 320 },
     video: { codec: "h264", bitrate: 8e3, profile: "high" }
   }
-}, be = [
+}, ye = [
   { type: "blur", name: "Blur", icon: "droplet" },
   { type: "brightness", name: "Brightness", icon: "sun" },
   { type: "contrast", name: "Contrast", icon: "moon" },
@@ -45,14 +45,14 @@ const fe = {
   { type: "chromaKey", name: "Chroma Key", icon: "layers" },
   { type: "crop", name: "Crop", icon: "crop" },
   { type: "zoom", name: "Zoom", icon: "search" }
-], ye = [
+], Ne = [
   { type: "fade", name: "Fade" },
   { type: "dissolve", name: "Dissolve" },
   { type: "wipe", name: "Wipe" },
   { type: "slide", name: "Slide" },
   { type: "zoom", name: "Zoom" },
   { type: "push", name: "Push" }
-], Ne = [
+], ke = [
   {
     target: ".nice-video-editor",
     titleKey: "tutorial.videoEditorPro.intro.title",
@@ -61,73 +61,73 @@ const fe = {
     content: "Add media to the timeline, arrange and trim clips, apply effects and transitions, then configure and run the export.",
     placement: "auto"
   }
-], ze = ({
-  project: E,
+], Ee = ({
+  project: $,
   onProjectChange: R,
   onExport: F,
   onAssetUpload: L,
   className: O = "",
-  tutorial: I
+  tutorial: T
 }) => {
-  const { t: b } = me(), [r, s] = g(E || fe), [A, y] = g(
+  const { t: u } = ue(), [n, s] = f($ || be), [A, y] = f(
     "timeline"
-  ), [H, v] = g(null), [k, N] = g(null), [D, w] = g(0), [B, K] = g(!1), [C, G] = g(1), [W, z] = g(!0), [T, U] = g(null), ie = M(null), te = M(null), x = M(null);
+  ), [q, h] = f(null), [k, N] = f(null), [D, w] = f(0), [B, K] = f(!1), [S, G] = f(1), [W, z] = f(!0), [E, U] = f(null), ie = I(null), te = I(null), x = I(null);
   le(() => {
-    E && s(E);
-  }, [E]), le(() => () => {
+    $ && s($);
+  }, [$]), le(() => () => {
     x.current && clearInterval(x.current);
   }, []);
-  const f = ue(
-    (a) => {
-      const o = { ...r, ...a };
-      s(o), R == null || R(o);
+  const b = ve(
+    (r) => {
+      const c = { ...n, ...r };
+      s(c), R == null || R(c);
     },
-    [r, R]
-  ), _ = async (a) => {
-    const o = [];
-    for (const n of Array.from(a)) {
-      const d = n.type.startsWith("video/") ? "video" : n.type.startsWith("audio/") ? "audio" : "image";
-      let u;
-      L ? u = await L(n) : u = {
-        id: $(),
+    [n, R]
+  ), g = async (r) => {
+    const c = [];
+    for (const a of Array.from(r)) {
+      const d = a.type.startsWith("video/") ? "video" : a.type.startsWith("audio/") ? "audio" : "image";
+      let v;
+      L ? v = await L(a) : v = {
+        id: M(),
         type: d,
-        name: n.name,
-        url: URL.createObjectURL(n),
-        size: n.size
-      }, o.push(u);
+        name: a.name,
+        url: URL.createObjectURL(a),
+        size: a.size
+      }, c.push(v);
     }
-    f({ assets: [...r.assets, ...o] });
-  }, V = (a) => {
-    const o = {
-      id: $(),
-      type: a,
-      name: `${a.charAt(0).toUpperCase() + a.slice(1)} ${r.tracks.filter((n) => n.type === a).length + 1}`,
+    b({ assets: [...n.assets, ...c] });
+  }, V = (r) => {
+    const c = {
+      id: M(),
+      type: r,
+      name: `${r.charAt(0).toUpperCase() + r.slice(1)} ${n.tracks.filter((a) => a.type === r).length + 1}`,
       items: [],
       muted: !1,
       locked: !1,
       visible: !0
     };
-    f({ tracks: [...r.tracks, o] });
-  }, Y = (a) => {
-    f({ tracks: r.tracks.filter((o) => o.id !== a) }), H === a && v(null);
-  }, q = (a) => {
-    f({
-      tracks: r.tracks.map((o) => o.id === a ? { ...o, muted: !o.muted } : o)
+    b({ tracks: [...n.tracks, c] });
+  }, Y = (r) => {
+    b({ tracks: n.tracks.filter((c) => c.id !== r) }), q === r && h(null);
+  }, H = (r) => {
+    b({
+      tracks: n.tracks.map((c) => c.id === r ? { ...c, muted: !c.muted } : c)
     });
-  }, X = (a) => {
-    f({
-      tracks: r.tracks.map((o) => o.id === a ? { ...o, locked: !o.locked } : o)
+  }, X = (r) => {
+    b({
+      tracks: n.tracks.map((c) => c.id === r ? { ...c, locked: !c.locked } : c)
     });
-  }, S = (a, o) => {
-    const n = r.tracks.find((p) => p.id === a);
-    if (!n || n.locked)
+  }, C = (r, c) => {
+    const a = n.tracks.find((_) => _.id === r);
+    if (!a || a.locked)
       return;
-    const d = n.items[n.items.length - 1], u = d ? d.startTime + d.duration : 0, h = {
-      id: $(),
-      assetId: o.id,
-      type: o.type,
-      startTime: u,
-      duration: o.duration || 5,
+    const d = a.items[a.items.length - 1], v = d ? d.startTime + d.duration : 0, p = {
+      id: M(),
+      assetId: c.id,
+      type: c.type,
+      startTime: v,
+      duration: c.duration || 5,
       offset: 0,
       properties: {
         x: 0,
@@ -139,47 +139,47 @@ const fe = {
       effects: [],
       transitions: []
     };
-    f({
-      tracks: r.tracks.map(
-        (p) => p.id === a ? { ...p, items: [...p.items, h] } : p
+    b({
+      tracks: n.tracks.map(
+        (_) => _.id === r ? { ..._, items: [..._.items, p] } : _
       )
     });
-  }, Z = (a, o, n) => {
+  }, Z = (r, c, a) => {
     const d = {
-      id: $(),
-      type: n,
-      name: n.charAt(0).toUpperCase() + n.slice(1),
-      parameters: ne(n)
+      id: M(),
+      type: a,
+      name: a.charAt(0).toUpperCase() + a.slice(1),
+      parameters: ne(a)
     };
-    f({
-      tracks: r.tracks.map(
-        (u) => u.id === a ? {
-          ...u,
-          items: u.items.map(
-            (h) => h.id === o ? { ...h, effects: [...h.effects, d] } : h
+    b({
+      tracks: n.tracks.map(
+        (v) => v.id === r ? {
+          ...v,
+          items: v.items.map(
+            (p) => p.id === c ? { ...p, effects: [...p.effects, d] } : p
           )
-        } : u
+        } : v
       )
     });
-  }, P = (a, o, n, d) => {
-    const u = {
-      id: $(),
-      type: n,
+  }, P = (r, c, a, d) => {
+    const v = {
+      id: M(),
+      type: a,
       duration: 0.5,
       position: d
     };
-    f({
-      tracks: r.tracks.map(
-        (h) => h.id === a ? {
-          ...h,
-          items: h.items.map(
-            (p) => p.id === o ? { ...p, transitions: [...p.transitions, u] } : p
+    b({
+      tracks: n.tracks.map(
+        (p) => p.id === r ? {
+          ...p,
+          items: p.items.map(
+            (_) => _.id === c ? { ..._, transitions: [..._.transitions, v] } : _
           )
-        } : h
+        } : p
       )
     });
-  }, ne = (a) => {
-    switch (a) {
+  }, ne = (r) => {
+    switch (r) {
       case "blur":
         return { radius: 5 };
       case "brightness":
@@ -203,102 +203,105 @@ const fe = {
     }
   }, ae = () => {
     B ? (x.current && clearInterval(x.current), K(!1)) : (x.current = setInterval(() => {
-      w((a) => {
-        const o = Math.max(
-          ...r.tracks.flatMap((n) => n.items.map((d) => d.startTime + d.duration)),
+      w((r) => {
+        const c = Math.max(
+          ...n.tracks.flatMap((a) => a.items.map((d) => d.startTime + d.duration)),
           0
         );
-        return a >= o ? (clearInterval(x.current), K(!1), 0) : a + 1 / r.frameRate;
+        return r >= c ? (clearInterval(x.current), K(!1), 0) : r + 1 / n.frameRate;
       });
-    }, 1e3 / r.frameRate), K(!0));
-  }, J = (a) => {
-    w(Math.max(0, a));
+    }, 1e3 / n.frameRate), K(!0));
+  }, J = (r) => {
+    w(Math.max(0, r));
   }, Q = async () => {
     if (F) {
       U(0);
       try {
-        const a = setInterval(() => {
-          U((o) => o !== null && o < 90 ? o + Math.random() * 10 : o);
+        const r = setInterval(() => {
+          U((c) => c !== null && c < 90 ? c + Math.random() * 10 : c);
         }, 500);
-        await F(r, r.settings.video.codec), clearInterval(a), U(100), setTimeout(() => U(null), 2e3);
-      } catch (a) {
-        U(null), console.error("Export failed:", a);
+        await F(n, n.settings.video.codec), clearInterval(r), U(100), setTimeout(() => U(null), 2e3);
+      } catch (r) {
+        U(null), console.error("Export failed:", r);
       }
     }
-  }, ee = (a) => {
-    const o = Math.floor(a / 60), n = Math.floor(a % 60), d = Math.floor(a % 1 * r.frameRate);
-    return `${o.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}:${d.toString().padStart(2, "0")}`;
+  }, ee = (r) => {
+    const c = Math.floor(r / 60), a = Math.floor(r % 60), d = Math.floor(r % 1 * n.frameRate);
+    return `${c.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}:${d.toString().padStart(2, "0")}`;
   }, j = () => {
-    for (const a of r.tracks) {
-      const o = a.items.find((n) => n.id === k);
-      if (o)
-        return { track: a, item: o };
+    for (const r of n.tracks) {
+      const c = r.items.find((a) => a.id === k);
+      if (c)
+        return { track: r, item: c };
     }
     return null;
-  }, se = /* @__PURE__ */ t("header", { className: "nice-video-studio__header", children: [
+  }, re = /* @__PURE__ */ t("header", { className: "nice-video-studio__header", children: [
     /* @__PURE__ */ t("div", { className: "nice-video-studio__header-project-info", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "text",
-          value: r.name,
-          onChange: (a) => f({ name: a.target.value }),
+          value: n.name,
+          onChange: (r) => b({ name: r.target.value }),
           className: "nice-video-studio__project-name-input"
         }
       ),
       /* @__PURE__ */ t("span", { className: "nice-video-studio__project-settings", children: [
-        r.resolution.width,
+        n.resolution.width,
         "x",
-        r.resolution.height,
+        n.resolution.height,
         " • ",
-        r.frameRate,
+        n.frameRate,
         "fps"
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: "nice-video-studio__header-tabs", children: ["timeline", "effects", "transitions", "export"].map((a) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: "nice-video-studio__header-tabs", children: ["timeline", "effects", "transitions", "export"].map((r) => /* @__PURE__ */ e(
       "button",
       {
-        className: `nice-video-studio__tab-button ${A === a ? "nice-video-studio__tab-button--active" : ""}`,
-        onClick: () => y(a),
-        children: a.charAt(0).toUpperCase() + a.slice(1)
+        className: `nice-video-studio__tab-button ${A === r ? "nice-video-studio__tab-button--active" : ""}`,
+        onClick: () => y(r),
+        children: r.charAt(0).toUpperCase() + r.slice(1)
       },
-      a
+      r
     )) }),
     /* @__PURE__ */ e("div", { className: "nice-video-studio__header-actions", children: /* @__PURE__ */ e(
       "button",
       {
         className: "nice-video-studio__action-button nice-video-studio__action-button--primary",
         onClick: Q,
-        disabled: T !== null,
-        children: T !== null ? `Exporting ${Math.round(T)}%` : "Export"
+        disabled: E !== null,
+        children: E !== null ? u("videoEditor.exporting", "Exporting {exportProgress}%").replace(
+          "{exportProgress}",
+          String(Math.round(E))
+        ) : u("videoEditor.export", "Export")
       }
     ) })
-  ] }), re = k && A !== "export" ? (() => {
-    const a = j();
-    if (!a)
+  ] }), se = k && A !== "export" ? (() => {
+    const r = j();
+    if (!r)
       return null;
-    const { track: o, item: n } = a;
+    const { track: c, item: a } = r;
     return /* @__PURE__ */ t("div", { className: "nice-video-studio__item-inspector", children: [
-      /* @__PURE__ */ e("h4", { children: b("videoEditor.itemProperties", "Item Properties") }),
+      /* @__PURE__ */ e("h4", { children: u("videoEditor.itemProperties", "Item Properties") }),
       /* @__PURE__ */ t("div", { className: "nice-video-studio__inspector-section", children: [
         /* @__PURE__ */ t("label", { children: [
-          b("videoEditor.startTime", "Start Time"),
+          u("videoEditor.startTime", "Start Time"),
           /* @__PURE__ */ e(
             "input",
             {
               type: "number",
               step: "0.1",
-              value: n.startTime,
+              value: a.startTime,
               onChange: (d) => {
-                const u = parseFloat(d.target.value);
-                f({
-                  tracks: r.tracks.map(
-                    (h) => h.id === o.id ? {
-                      ...h,
-                      items: h.items.map(
-                        (p) => p.id === n.id ? { ...p, startTime: u } : p
+                const v = parseFloat(d.target.value);
+                b({
+                  tracks: n.tracks.map(
+                    (p) => p.id === c.id ? {
+                      ...p,
+                      items: p.items.map(
+                        (_) => _.id === a.id ? { ..._, startTime: v } : _
                       )
-                    } : h
+                    } : p
                   )
                 });
               }
@@ -306,23 +309,23 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          b("videoEditor.duration", "Duration"),
+          u("videoEditor.duration", "Duration"),
           /* @__PURE__ */ e(
             "input",
             {
               type: "number",
               step: "0.1",
-              value: n.duration,
+              value: a.duration,
               onChange: (d) => {
-                const u = parseFloat(d.target.value);
-                f({
-                  tracks: r.tracks.map(
-                    (h) => h.id === o.id ? {
-                      ...h,
-                      items: h.items.map(
-                        (p) => p.id === n.id ? { ...p, duration: u } : p
+                const v = parseFloat(d.target.value);
+                b({
+                  tracks: n.tracks.map(
+                    (p) => p.id === c.id ? {
+                      ...p,
+                      items: p.items.map(
+                        (_) => _.id === a.id ? { ..._, duration: v } : _
                       )
-                    } : h
+                    } : p
                   )
                 });
               }
@@ -330,7 +333,7 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          b("videoEditor.opacity", "Opacity"),
+          u("videoEditor.opacity", "Opacity"),
           /* @__PURE__ */ e(
             "input",
             {
@@ -338,20 +341,20 @@ const fe = {
               min: "0",
               max: "1",
               step: "0.1",
-              value: n.properties.opacity ?? 1,
+              value: a.properties.opacity ?? 1,
               onChange: (d) => {
-                const u = parseFloat(d.target.value);
-                f({
-                  tracks: r.tracks.map(
-                    (h) => h.id === o.id ? {
-                      ...h,
-                      items: h.items.map(
-                        (p) => p.id === n.id ? {
-                          ...p,
-                          properties: { ...p.properties, opacity: u }
-                        } : p
+                const v = parseFloat(d.target.value);
+                b({
+                  tracks: n.tracks.map(
+                    (p) => p.id === c.id ? {
+                      ...p,
+                      items: p.items.map(
+                        (_) => _.id === a.id ? {
+                          ..._,
+                          properties: { ..._.properties, opacity: v }
+                        } : _
                       )
-                    } : h
+                    } : p
                   )
                 });
               }
@@ -359,20 +362,19 @@ const fe = {
           )
         ] })
       ] }),
-      /* @__PURE__ */ t("h4", { children: [
-        "Effects (",
-        n.effects.length,
-        ")"
-      ] }),
-      /* @__PURE__ */ e("div", { className: "nice-video-studio__effects-list", children: n.effects.map((d) => /* @__PURE__ */ e("div", { className: "nice-video-studio__effect-badge", children: d.name }, d.id)) })
+      /* @__PURE__ */ e("h4", { children: u("videoEditor.effects", "Effects ({effects})").replace(
+        "{effects}",
+        String(a.effects.length)
+      ) }),
+      /* @__PURE__ */ e("div", { className: "nice-video-studio__effects-list", children: a.effects.map((d) => /* @__PURE__ */ e("div", { className: "nice-video-studio__effect-badge", children: d.name }, d.id)) })
     ] });
   })() : null, i = W ? /* @__PURE__ */ t("aside", { className: "nice-video-studio__asset-library", children: [
     /* @__PURE__ */ t("div", { className: "nice-video-studio__asset-library-header", children: [
-      /* @__PURE__ */ e("h3", { children: b("videoEditor.assets", "Assets") }),
+      /* @__PURE__ */ e("h3", { children: u("videoEditor.assets", "Assets") }),
       /* @__PURE__ */ e(
         "button",
         {
-          "aria-label": b("videoEditor.close", "Close"),
+          "aria-label": u("videoEditor.close", "Close"),
           className: "nice-video-studio__close-button",
           onClick: () => z(!1),
           children: /* @__PURE__ */ e(m, { name: "close", size: 16 })
@@ -386,44 +388,44 @@ const fe = {
           type: "file",
           multiple: !0,
           accept: "video/*,audio/*,image/*",
-          onChange: (a) => a.target.files && _(a.target.files),
+          onChange: (r) => r.target.files && g(r.target.files),
           hidden: !0
         }
       ),
       /* @__PURE__ */ e("span", { className: "nice-video-studio__upload-icon", children: "+" }),
-      /* @__PURE__ */ e("span", { children: b("videoEditor.dropFilesOrClickTo", "Drop files or click to upload") })
+      /* @__PURE__ */ e("span", { children: u("videoEditor.dropFilesOrClickTo", "Drop files or click to upload") })
     ] }) }),
-    /* @__PURE__ */ e("div", { className: "nice-video-studio__asset-library-list", children: r.assets.map((a) => /* @__PURE__ */ t(
+    /* @__PURE__ */ e("div", { className: "nice-video-studio__asset-library-list", children: n.assets.map((r) => /* @__PURE__ */ t(
       "div",
       {
         className: "nice-video-studio__asset-item",
         draggable: !0,
-        onDragStart: (o) => o.dataTransfer.setData("assetId", a.id),
+        onDragStart: (c) => c.dataTransfer.setData("assetId", r.id),
         children: [
-          /* @__PURE__ */ e("div", { className: "nice-video-studio__asset-thumbnail", children: a.thumbnail ? /* @__PURE__ */ e("img", { src: a.thumbnail, alt: a.name }) : /* @__PURE__ */ e("span", { className: "nice-video-studio__asset-type-icon", children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "nice-video-studio__asset-thumbnail", children: r.thumbnail ? /* @__PURE__ */ e("img", { src: r.thumbnail, alt: r.name }) : /* @__PURE__ */ e("span", { className: "nice-video-studio__asset-type-icon", children: /* @__PURE__ */ e(
             m,
             {
-              name: a.type === "video" ? "video" : a.type === "audio" ? "music" : "image",
+              name: r.type === "video" ? "video" : r.type === "audio" ? "music" : "image",
               size: 24
             }
           ) }) }),
           /* @__PURE__ */ t("div", { className: "nice-video-studio__asset-info", children: [
-            /* @__PURE__ */ e("span", { className: "nice-video-studio__asset-name", children: a.name }),
+            /* @__PURE__ */ e("span", { className: "nice-video-studio__asset-name", children: r.name }),
             /* @__PURE__ */ t("span", { className: "nice-video-studio__asset-meta", children: [
-              (a.size / 1024 / 1024).toFixed(1),
+              (r.size / 1024 / 1024).toFixed(1),
               "MB"
             ] })
           ] })
         ]
       },
-      a.id
+      r.id
     )) })
-  ] }) : void 0, c = /* @__PURE__ */ e("div", { className: "nice-video-studio__preview-area", children: /* @__PURE__ */ t("div", { className: "nice-video-studio__preview-container", children: [
+  ] }) : void 0, o = /* @__PURE__ */ e("div", { className: "nice-video-studio__preview-area", children: /* @__PURE__ */ t("div", { className: "nice-video-studio__preview-container", children: [
     /* @__PURE__ */ t(
       "div",
       {
         className: "nice-video-studio__preview-canvas",
-        style: { aspectRatio: `${r.resolution.width}/${r.resolution.height}` },
+        style: { aspectRatio: `${n.resolution.width}/${n.resolution.height}` },
         children: [
           /* @__PURE__ */ e("video", { ref: te, className: "nice-video-studio__preview-video" }),
           /* @__PURE__ */ e("div", { className: "nice-video-studio__preview-overlay", children: !W && /* @__PURE__ */ e(
@@ -431,7 +433,7 @@ const fe = {
             {
               className: "nice-video-studio__toggle-library-button",
               onClick: () => z(!0),
-              "aria-label": b("videoEditor.showAssetLibrary", "Show asset library"),
+              "aria-label": u("videoEditor.showAssetLibrary", "Show asset library"),
               children: /* @__PURE__ */ e(m, { name: "folder", size: 16 })
             }
           ) })
@@ -443,15 +445,15 @@ const fe = {
         "button",
         {
           onClick: () => J(0),
-          "aria-label": b("videoEditor.goToStart", "Go to start"),
+          "aria-label": u("videoEditor.goToStart", "Go to start"),
           children: /* @__PURE__ */ e(m, { name: "skip-back", size: 16 })
         }
       ),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => J(D - 1 / r.frameRate),
-          "aria-label": b("videoEditor.previousFrame", "Previous frame"),
+          onClick: () => J(D - 1 / n.frameRate),
+          "aria-label": u("videoEditor.previousFrame", "Previous frame"),
           children: /* @__PURE__ */ e(m, { name: "chevron-left", size: 16 })
         }
       ),
@@ -460,15 +462,15 @@ const fe = {
         {
           onClick: ae,
           className: "nice-video-studio__play-button",
-          "aria-label": B ? "Pause" : "Play",
+          "aria-label": B ? u("videoEditor.pause", "Pause") : u("videoEditor.play", "Play"),
           children: /* @__PURE__ */ e(m, { name: B ? "pause" : "play", size: 18 })
         }
       ),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => J(D + 1 / r.frameRate),
-          "aria-label": b("videoEditor.nextFrame", "Next frame"),
+          onClick: () => J(D + 1 / n.frameRate),
+          "aria-label": u("videoEditor.nextFrame", "Next frame"),
           children: /* @__PURE__ */ e(m, { name: "chevron-right", size: 16 })
         }
       ),
@@ -478,146 +480,152 @@ const fe = {
     A === "timeline" && /* @__PURE__ */ t("div", { className: "nice-video-studio__timeline-panel", children: [
       /* @__PURE__ */ t("div", { className: "nice-video-studio__timeline-toolbar", children: [
         /* @__PURE__ */ t("div", { className: "nice-video-studio__track-buttons", children: [
-          /* @__PURE__ */ e("button", { onClick: () => V("video"), children: "+ Video Track" }),
-          /* @__PURE__ */ e("button", { onClick: () => V("audio"), children: "+ Audio Track" }),
-          /* @__PURE__ */ e("button", { onClick: () => V("text"), children: "+ Text Track" })
+          /* @__PURE__ */ e("button", { onClick: () => V("video"), children: u("videoEditor.videoTrack", "+ Video Track") }),
+          /* @__PURE__ */ e("button", { onClick: () => V("audio"), children: u("videoEditor.audioTrack", "+ Audio Track") }),
+          /* @__PURE__ */ e("button", { onClick: () => V("text"), children: u("videoEditor.textTrack", "+ Text Track") })
         ] }),
         /* @__PURE__ */ t("div", { className: "nice-video-studio__zoom-controls", children: [
-          /* @__PURE__ */ e("button", { onClick: () => G(Math.max(0.25, C - 0.25)), children: "-" }),
+          /* @__PURE__ */ e("button", { onClick: () => G(Math.max(0.25, S - 0.25)), children: "-" }),
           /* @__PURE__ */ t("span", { children: [
-            Math.round(C * 100),
+            Math.round(S * 100),
             "%"
           ] }),
-          /* @__PURE__ */ e("button", { onClick: () => G(Math.min(4, C + 0.25)), children: "+" })
+          /* @__PURE__ */ e("button", { onClick: () => G(Math.min(4, S + 0.25)), children: "+" })
         ] })
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-video-studio__timeline-container", ref: ie, children: [
-        /* @__PURE__ */ e("div", { className: "nice-video-studio__timeline-ruler", children: Array.from({ length: Math.ceil(30 / C) }).map((a, o) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "nice-video-studio__timeline-ruler", children: Array.from({ length: Math.ceil(30 / S) }).map((r, c) => /* @__PURE__ */ e(
           "div",
           {
             className: "nice-video-studio__ruler-mark",
-            style: { left: `${o * 50 * C}px` },
-            children: ee(o)
+            style: { left: `${c * 50 * S}px` },
+            children: ee(c)
           },
-          o
+          c
         )) }),
         /* @__PURE__ */ e(
           "div",
           {
             className: "nice-video-studio__timeline-playhead",
-            style: { left: `${D * 50 * C}px` }
+            style: { left: `${D * 50 * S}px` }
           }
         ),
-        /* @__PURE__ */ e("div", { className: "nice-video-studio__timeline-tracks", children: r.tracks.map((a) => /* @__PURE__ */ t(
+        /* @__PURE__ */ e("div", { className: "nice-video-studio__timeline-tracks", children: n.tracks.map((r) => /* @__PURE__ */ t(
           "div",
           {
-            className: `nice-video-studio__timeline-track ${H === a.id ? "nice-video-studio__timeline-track--selected" : ""} ${a.locked ? "nice-video-studio__timeline-track--locked" : ""}`,
-            onClick: () => v(a.id),
-            onDrop: (o) => {
-              o.preventDefault();
-              const n = o.dataTransfer.getData("assetId"), d = r.assets.find((u) => u.id === n);
-              d && S(a.id, d);
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: me,
+            className: `nice-video-studio__timeline-track ${q === r.id ? "nice-video-studio__timeline-track--selected" : ""} ${r.locked ? "nice-video-studio__timeline-track--locked" : ""}`,
+            onClick: () => h(r.id),
+            onDrop: (c) => {
+              c.preventDefault();
+              const a = c.dataTransfer.getData("assetId"), d = n.assets.find((v) => v.id === a);
+              d && C(r.id, d);
             },
-            onDragOver: (o) => o.preventDefault(),
+            onDragOver: (c) => c.preventDefault(),
             children: [
               /* @__PURE__ */ t("div", { className: "nice-video-studio__track-header", children: [
-                /* @__PURE__ */ e("span", { className: "nice-video-studio__track-name", children: a.name }),
+                /* @__PURE__ */ e("span", { className: "nice-video-studio__track-name", children: r.name }),
                 /* @__PURE__ */ t("div", { className: "nice-video-studio__track-controls", children: [
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      className: `nice-video-studio__track-toggle ${a.muted ? "nice-video-studio__track-toggle--active" : ""}`,
-                      onClick: (o) => {
-                        o.stopPropagation(), q(a.id);
+                      className: `nice-video-studio__track-toggle ${r.muted ? "nice-video-studio__track-toggle--active" : ""}`,
+                      onClick: (c) => {
+                        c.stopPropagation(), H(r.id);
                       },
-                      children: /* @__PURE__ */ e(m, { name: a.muted ? "volume-off" : "volume", size: 14 })
+                      children: /* @__PURE__ */ e(m, { name: r.muted ? "volume-off" : "volume", size: 14 })
                     }
                   ),
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      className: `nice-video-studio__track-toggle ${a.locked ? "nice-video-studio__track-toggle--active" : ""}`,
-                      onClick: (o) => {
-                        o.stopPropagation(), X(a.id);
+                      className: `nice-video-studio__track-toggle ${r.locked ? "nice-video-studio__track-toggle--active" : ""}`,
+                      onClick: (c) => {
+                        c.stopPropagation(), X(r.id);
                       },
-                      children: /* @__PURE__ */ e(m, { name: a.locked ? "lock" : "unlock", size: 14 })
+                      children: /* @__PURE__ */ e(m, { name: r.locked ? "lock" : "unlock", size: 14 })
                     }
                   ),
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      onClick: (o) => {
-                        o.stopPropagation(), Y(a.id);
+                      onClick: (c) => {
+                        c.stopPropagation(), Y(r.id);
                       },
-                      "aria-label": b("videoEditor.removeTrack", "Remove track"),
+                      "aria-label": u("videoEditor.removeTrack", "Remove track"),
                       children: /* @__PURE__ */ e(m, { name: "trash", size: 14 })
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ e("div", { className: "nice-video-studio__track-items", children: a.items.map((o) => {
-                const n = r.assets.find((d) => d.id === o.assetId);
+              /* @__PURE__ */ e("div", { className: "nice-video-studio__track-items", children: r.items.map((c) => {
+                const a = n.assets.find((d) => d.id === c.assetId);
                 return /* @__PURE__ */ t(
                   "div",
                   {
-                    className: `nice-video-studio__track-item nice-video-studio__track-item--${o.type} ${k === o.id ? "nice-video-studio__track-item--selected" : ""}`,
+                    role: "button",
+                    tabIndex: 0,
+                    onKeyDown: me,
+                    className: `nice-video-studio__track-item nice-video-studio__track-item--${c.type} ${k === c.id ? "nice-video-studio__track-item--selected" : ""}`,
                     style: {
-                      left: `${o.startTime * 50 * C}px`,
-                      width: `${o.duration * 50 * C}px`
+                      left: `${c.startTime * 50 * S}px`,
+                      width: `${c.duration * 50 * S}px`
                     },
                     onClick: (d) => {
-                      d.stopPropagation(), N(o.id);
+                      d.stopPropagation(), N(c.id);
                     },
                     children: [
-                      /* @__PURE__ */ e("span", { className: "nice-video-studio__item-name", children: (n == null ? void 0 : n.name) || "Untitled" }),
-                      o.transitions.length > 0 && /* @__PURE__ */ e("span", { className: "nice-video-studio__item-transitions", children: /* @__PURE__ */ e(m, { name: "wand", size: 12 }) }),
-                      o.effects.length > 0 && /* @__PURE__ */ e("span", { className: "nice-video-studio__item-effects", children: /* @__PURE__ */ e(m, { name: "palette", size: 12 }) })
+                      /* @__PURE__ */ e("span", { className: "nice-video-studio__item-name", children: (a == null ? void 0 : a.name) || u("videoEditor.untitled", "Untitled") }),
+                      c.transitions.length > 0 && /* @__PURE__ */ e("span", { className: "nice-video-studio__item-transitions", children: /* @__PURE__ */ e(m, { name: "wand", size: 12 }) }),
+                      c.effects.length > 0 && /* @__PURE__ */ e("span", { className: "nice-video-studio__item-effects", children: /* @__PURE__ */ e(m, { name: "palette", size: 12 }) })
                     ]
                   },
-                  o.id
+                  c.id
                 );
               }) })
             ]
           },
-          a.id
+          r.id
         )) })
       ] })
     ] }),
     A === "effects" && /* @__PURE__ */ t("div", { className: "nice-video-studio__effects-panel", children: [
-      /* @__PURE__ */ e("h3", { children: b("videoEditor.videoEffects", "Video Effects") }),
-      /* @__PURE__ */ e("p", { className: "nice-video-studio__panel-hint", children: b("videoEditor.selectAClipToApply", "Select a clip to apply effects") }),
-      /* @__PURE__ */ e("div", { className: "nice-video-studio__effects-grid", children: be.map((a) => /* @__PURE__ */ t(
+      /* @__PURE__ */ e("h3", { children: u("videoEditor.videoEffects", "Video Effects") }),
+      /* @__PURE__ */ e("p", { className: "nice-video-studio__panel-hint", children: u("videoEditor.selectAClipToApply", "Select a clip to apply effects") }),
+      /* @__PURE__ */ e("div", { className: "nice-video-studio__effects-grid", children: ye.map((r) => /* @__PURE__ */ t(
         "button",
         {
           className: "nice-video-studio__effect-preset",
           disabled: !k,
           onClick: () => {
-            const o = j();
-            o && Z(o.track.id, o.item.id, a.type);
+            const c = j();
+            c && Z(c.track.id, c.item.id, r.type);
           },
           children: [
-            /* @__PURE__ */ e("span", { className: "nice-video-studio__effect-icon", children: /* @__PURE__ */ e(m, { name: a.icon, size: 16 }) }),
-            /* @__PURE__ */ e("span", { className: "nice-video-studio__effect-name", children: a.name })
+            /* @__PURE__ */ e("span", { className: "nice-video-studio__effect-icon", children: /* @__PURE__ */ e(m, { name: r.icon, size: 16 }) }),
+            /* @__PURE__ */ e("span", { className: "nice-video-studio__effect-name", children: r.name })
           ]
         },
-        a.type
+        r.type
       )) })
     ] }),
     A === "transitions" && /* @__PURE__ */ t("div", { className: "nice-video-studio__transitions-panel", children: [
-      /* @__PURE__ */ e("h3", { children: b("videoEditor.transitions", "Transitions") }),
-      /* @__PURE__ */ e("p", { className: "nice-video-studio__panel-hint", children: b("videoEditor.selectAClipAndAdd", "Select a clip and add transitions between clips") }),
-      /* @__PURE__ */ e("div", { className: "nice-video-studio__transitions-grid", children: ye.map((a) => /* @__PURE__ */ t("div", { className: "nice-video-studio__transition-preset", children: [
-        /* @__PURE__ */ e("span", { className: "nice-video-studio__transition-name", children: a.name }),
+      /* @__PURE__ */ e("h3", { children: u("videoEditor.transitions", "Transitions") }),
+      /* @__PURE__ */ e("p", { className: "nice-video-studio__panel-hint", children: u("videoEditor.selectAClipAndAdd", "Select a clip and add transitions between clips") }),
+      /* @__PURE__ */ e("div", { className: "nice-video-studio__transitions-grid", children: Ne.map((r) => /* @__PURE__ */ t("div", { className: "nice-video-studio__transition-preset", children: [
+        /* @__PURE__ */ e("span", { className: "nice-video-studio__transition-name", children: r.name }),
         /* @__PURE__ */ t("div", { className: "nice-video-studio__transition-buttons", children: [
           /* @__PURE__ */ e(
             "button",
             {
               disabled: !k,
               onClick: () => {
-                const o = j();
-                o && P(o.track.id, o.item.id, a.type, "start");
+                const c = j();
+                c && P(c.track.id, c.item.id, r.type, "start");
               },
-              children: "In"
+              children: u("videoEditor.in", "In")
             }
           ),
           /* @__PURE__ */ e(
@@ -625,27 +633,27 @@ const fe = {
             {
               disabled: !k,
               onClick: () => {
-                const o = j();
-                o && P(o.track.id, o.item.id, a.type, "end");
+                const c = j();
+                c && P(c.track.id, c.item.id, r.type, "end");
               },
-              children: "Out"
+              children: u("videoEditor.out", "Out")
             }
           )
         ] })
-      ] }, a.type)) })
+      ] }, r.type)) })
     ] }),
     A === "export" && /* @__PURE__ */ t("div", { className: "nice-video-studio__export-panel", children: [
-      /* @__PURE__ */ e("h3", { children: b("videoEditor.exportSettings", "Export Settings") }),
+      /* @__PURE__ */ e("h3", { children: u("videoEditor.exportSettings", "Export Settings") }),
       /* @__PURE__ */ t("div", { className: "nice-video-studio__export-settings", children: [
         /* @__PURE__ */ t("div", { className: "nice-video-studio__setting-group", children: [
-          /* @__PURE__ */ e("label", { children: b("videoEditor.resolution", "Resolution") }),
+          /* @__PURE__ */ e("label", { children: u("videoEditor.resolution", "Resolution") }),
           /* @__PURE__ */ t(
             "select",
             {
-              value: `${r.resolution.width}x${r.resolution.height}`,
-              onChange: (a) => {
-                const [o, n] = a.target.value.split("x").map(Number);
-                f({ resolution: { width: o, height: n } });
+              value: `${n.resolution.width}x${n.resolution.height}`,
+              onChange: (r) => {
+                const [c, a] = r.target.value.split("x").map(Number);
+                b({ resolution: { width: c, height: a } });
               },
               children: [
                 /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
@@ -657,12 +665,12 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("div", { className: "nice-video-studio__setting-group", children: [
-          /* @__PURE__ */ e("label", { children: b("videoEditor.frameRate", "Frame Rate") }),
+          /* @__PURE__ */ e("label", { children: u("videoEditor.frameRate", "Frame Rate") }),
           /* @__PURE__ */ t(
             "select",
             {
-              value: r.frameRate,
-              onChange: (a) => f({ frameRate: parseInt(a.target.value) }),
+              value: n.frameRate,
+              onChange: (r) => b({ frameRate: parseInt(r.target.value) }),
               children: [
                 /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
                 /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
@@ -673,42 +681,42 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("div", { className: "nice-video-studio__setting-group", children: [
-          /* @__PURE__ */ e("label", { children: b("videoEditor.videoCodec", "Video Codec") }),
+          /* @__PURE__ */ e("label", { children: u("videoEditor.videoCodec", "Video Codec") }),
           /* @__PURE__ */ t(
             "select",
             {
-              value: r.settings.video.codec,
-              onChange: (a) => f({
+              value: n.settings.video.codec,
+              onChange: (r) => b({
                 settings: {
-                  ...r.settings,
+                  ...n.settings,
                   video: {
-                    ...r.settings.video,
-                    codec: a.target.value
+                    ...n.settings.video,
+                    codec: r.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__ */ e("option", { value: "h264", children: u("videoEditor.h264BestCompatibility", "H.264 (Best Compatibility)") }),
+                /* @__PURE__ */ e("option", { value: "h265", children: u("videoEditor.h265HevcSmallerSize", "H.265/HEVC (Smaller Size)") }),
+                /* @__PURE__ */ e("option", { value: "vp9", children: u("videoEditor.vp9WebOptimized", "VP9 (Web Optimized)") }),
+                /* @__PURE__ */ e("option", { value: "av1", children: u("videoEditor.av1FutureStandard", "AV1 (Future Standard)") })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ t("div", { className: "nice-video-studio__setting-group", children: [
-          /* @__PURE__ */ e("label", { children: "Video Bitrate (Mbps)" }),
+          /* @__PURE__ */ e("label", { children: u("videoEditor.videoBitrateMbps", "Video Bitrate (Mbps)") }),
           /* @__PURE__ */ e(
             "input",
             {
               type: "number",
-              value: r.settings.video.bitrate / 1e3,
-              onChange: (a) => f({
+              value: n.settings.video.bitrate / 1e3,
+              onChange: (r) => b({
                 settings: {
-                  ...r.settings,
+                  ...n.settings,
                   video: {
-                    ...r.settings.video,
-                    bitrate: parseFloat(a.target.value) * 1e3
+                    ...n.settings.video,
+                    bitrate: parseFloat(r.target.value) * 1e3
                   }
                 }
               }),
@@ -723,37 +731,40 @@ const fe = {
         {
           className: "nice-video-studio__export-button",
           onClick: Q,
-          disabled: T !== null,
-          children: T !== null ? `Exporting... ${Math.round(T)}%` : "Export Video"
+          disabled: E !== null,
+          children: E !== null ? u("videoEditor.exporting2", "Exporting... {exportProgress}%").replace(
+            "{exportProgress}",
+            String(Math.round(E))
+          ) : u("videoEditor.exportVideo", "Export Video")
         }
       ),
-      T !== null && /* @__PURE__ */ e("div", { className: "nice-video-studio__export-progress", children: /* @__PURE__ */ e(
+      E !== null && /* @__PURE__ */ e("div", { className: "nice-video-studio__export-progress", children: /* @__PURE__ */ e(
         "div",
         {
           className: "nice-video-studio__export-progress-bar",
-          style: { width: `${T}%` }
+          style: { width: `${E}%` }
         }
       ) })
     ] })
   ] });
   return /* @__PURE__ */ t(
-    pe,
+    _e,
     {
       flush: !0,
       className: `nice-video-editor nice-video-studio ${O}`,
       height: "100%",
       style: { position: "relative", minHeight: 600 },
-      toolbar: se,
+      toolbar: re,
       sidebar: i,
-      rightSidebar: re ?? void 0,
+      rightSidebar: se ?? void 0,
       bottomPanel: l,
       children: [
-        /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(_e, { steps: ge(I, Ne) }) }),
-        c
+        /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(ge, { steps: fe(T, ke) }) }),
+        o
       ]
     }
   );
-}, ke = {
+}, we = {
   video: {
     source: "screen",
     showCursor: !0,
@@ -771,42 +782,42 @@ const fe = {
     quality: "high"
   }
 }, Te = ({
-  options: E,
+  options: $,
   onRecordingStart: R,
   onRecordingStop: F,
   onRecordingPause: L,
   onRecordingResume: O,
-  onError: I,
-  className: b = ""
+  onError: T,
+  className: u = ""
 }) => {
-  var a, o;
-  const { t: r } = me(), [s, A] = g({
-    ...ke,
-    ...E
-  }), [y, H] = g(null), [v, k] = g("idle"), [N, D] = g([]), [w, B] = g(null), [K, C] = g(null), [G, W] = g(!1), [z, T] = g(!1), [U, ie] = g(
+  var r, c;
+  const { t: n } = ue(), [s, A] = f({
+    ...we,
+    ...$
+  }), [y, q] = f(null), [h, k] = f("idle"), [N, D] = f([]), [w, B] = f(null), [K, S] = f(null), [G, W] = f(!1), [z, E] = f(!1), [U, ie] = f(
     "pen"
-  ), [te, x] = g("var(--nice-danger, #ff0000)"), f = M(null), _ = M([]), V = M(null), Y = M(null), q = M(null), X = M(0);
+  ), [te, x] = f("var(--nice-danger, #ff0000)"), b = I(null), g = I([]), V = I(null), Y = I(null), H = I(null), X = I(0);
   le(() => () => {
-    w && w.getTracks().forEach((n) => n.stop()), q.current && clearInterval(q.current);
+    w && w.getTracks().forEach((a) => a.stop()), H.current && clearInterval(H.current);
   }, [w]);
-  const S = (n) => {
+  const C = (a) => {
     A((d) => ({
       ...d,
-      ...n,
-      video: { ...d.video, ...n.video },
-      audio: { ...d.audio, ...n.audio },
-      output: { ...d.output, ...n.output }
+      ...a,
+      video: { ...d.video, ...a.video },
+      audio: { ...d.audio, ...a.audio },
+      output: { ...d.output, ...a.output }
     }));
   }, Z = async () => {
     try {
       k("preparing");
-      const n = {
+      const a = {
         video: {
           cursor: s.video.showCursor ? "always" : "never",
           frameRate: s.video.frameRate
         },
         audio: s.audio.source === "system" || s.audio.source === "both"
-      }, d = await navigator.mediaDevices.getDisplayMedia(n);
+      }, d = await navigator.mediaDevices.getDisplayMedia(a);
       if (s.audio.enabled && (s.audio.source === "microphone" || s.audio.source === "both"))
         try {
           (await navigator.mediaDevices.getUserMedia({
@@ -814,35 +825,35 @@ const fe = {
               echoCancellation: s.audio.echoCancellation,
               noiseSuppression: s.audio.noiseSuppression
             }
-          })).getAudioTracks().forEach((h) => d.addTrack(h));
-        } catch (u) {
-          console.warn("Could not access microphone:", u);
+          })).getAudioTracks().forEach((p) => d.addTrack(p));
+        } catch (v) {
+          console.warn("Could not access microphone:", v);
         }
       B(d), V.current && (V.current.srcObject = d, V.current.play()), k("idle");
-    } catch (n) {
-      k("error"), I == null || I(n instanceof Error ? n : new Error("Failed to start preview"));
+    } catch (a) {
+      k("error"), T == null || T(a instanceof Error ? a : new Error("Failed to start preview"));
     }
   }, P = async () => {
     w || await Z();
-    for (let n = 3; n > 0; n--)
-      C(n), await new Promise((d) => setTimeout(d, 1e3));
-    C(null);
+    for (let a = 3; a > 0; a--)
+      S(a), await new Promise((d) => setTimeout(d, 1e3));
+    S(null);
     try {
-      const n = w || await ne();
-      if (!n)
+      const a = w || await ne();
+      if (!a)
         throw new Error("No stream available");
-      const d = se(s.output.format), u = new MediaRecorder(n, {
+      const d = re(s.output.format), v = new MediaRecorder(a, {
         mimeType: d,
-        videoBitsPerSecond: re(s.output.quality)
+        videoBitsPerSecond: se(s.output.quality)
       });
-      _.current = [], u.ondataavailable = (p) => {
-        p.data.size > 0 && _.current.push(p.data);
-      }, u.onstop = () => {
-        const p = new Blob(_.current, { type: d });
-        y && (F == null || F({ ...y, status: "stopped" }, p));
-      }, f.current = u, u.start(1e3), X.current = Date.now();
-      const h = {
-        id: $(),
+      g.current = [], v.ondataavailable = (_) => {
+        _.data.size > 0 && g.current.push(_.data);
+      }, v.onstop = () => {
+        const _ = new Blob(g.current, { type: d });
+        y && (F == null || F({ ...y, status: "stopped" }, _));
+      }, b.current = v, v.start(1e3), X.current = Date.now();
+      const p = {
+        id: M(),
         status: "recording",
         startTime: /* @__PURE__ */ new Date(),
         duration: 0,
@@ -850,41 +861,44 @@ const fe = {
         options: s,
         chunks: []
       };
-      H(h), k("recording"), R == null || R(h), q.current = setInterval(() => {
-        H(
-          (p) => p ? {
-            ...p,
+      q(p), k("recording"), R == null || R(p), H.current = setInterval(() => {
+        q(
+          (_) => _ ? {
+            ..._,
             duration: (Date.now() - X.current) / 1e3,
-            size: _.current.reduce((ve, he) => ve + he.size, 0)
+            size: g.current.reduce((he, pe) => he + pe.size, 0)
           } : null
         );
       }, 100);
-    } catch (n) {
-      k("error"), I == null || I(n instanceof Error ? n : new Error("Failed to start recording"));
+    } catch (a) {
+      k("error"), T == null || T(a instanceof Error ? a : new Error("Failed to start recording"));
     }
   }, ne = async () => (await Z(), w), ae = () => {
-    f.current && v === "recording" && (f.current.pause(), k("paused"), L == null || L());
+    b.current && h === "recording" && (b.current.pause(), k("paused"), L == null || L());
   }, J = () => {
-    f.current && v === "paused" && (f.current.resume(), k("recording"), O == null || O());
+    b.current && h === "paused" && (b.current.resume(), k("recording"), O == null || O());
   }, Q = () => {
-    q.current && clearInterval(q.current), f.current && (v === "recording" || v === "paused") && (f.current.stop(), k("stopped")), w && (w.getTracks().forEach((n) => n.stop()), B(null));
-  }, ee = ue(
-    (n) => {
-      if (v !== "recording")
+    H.current && clearInterval(H.current), b.current && (h === "recording" || h === "paused") && (b.current.stop(), k("stopped")), w && (w.getTracks().forEach((a) => a.stop()), B(null));
+  }, ee = ve(
+    (a) => {
+      if (h !== "recording")
         return;
       const d = {
-        id: $(),
+        id: M(),
         time: (y == null ? void 0 : y.duration) || 0,
-        label: n || `Marker ${N.length + 1}`,
+        label: a || n("screenRecorder.marker", "Marker {markers}").replace(
+          "{markers}",
+          String(N.length + 1)
+        ),
         color: i()
       };
-      D((u) => [...u, d]);
+      D((v) => [...v, d]);
     },
-    [v, y == null ? void 0 : y.duration, N.length]
-  ), j = (n) => {
-    D((d) => d.filter((u) => u.id !== n));
-  }, se = (n) => {
-    switch (n) {
+    [h, y == null ? void 0 : y.duration, N.length, n]
+  ), j = (a) => {
+    D((d) => d.filter((v) => v.id !== a));
+  }, re = (a) => {
+    switch (a) {
       case "mp4":
         return "video/mp4";
       case "mkv":
@@ -892,8 +906,8 @@ const fe = {
       default:
         return "video/webm;codecs=vp9";
     }
-  }, re = (n) => {
-    switch (n) {
+  }, se = (a) => {
+    switch (a) {
       case "low":
         return 25e5;
       case "medium":
@@ -904,7 +918,7 @@ const fe = {
         return 8e6;
     }
   }, i = () => {
-    const n = [
+    const a = [
       "var(--nice-danger, #ff4444)",
       // audit-allow: literal-color +5 — annotation pens drawn into the recording
       "#44ff44",
@@ -913,12 +927,12 @@ const fe = {
       "#ff44ff",
       "#44ffff"
     ];
-    return n[Math.floor(Math.random() * n.length)];
-  }, c = (n) => {
-    const d = Math.floor(n / 3600), u = Math.floor(n % 3600 / 60), h = Math.floor(n % 60), p = Math.floor(n % 1 * 100);
-    return d > 0 ? `${d}:${u.toString().padStart(2, "0")}:${h.toString().padStart(2, "0")}` : `${u.toString().padStart(2, "0")}:${h.toString().padStart(2, "0")}.${p.toString().padStart(2, "0")}`;
-  }, l = (n) => n < 1024 ? `${n} B` : n < 1024 * 1024 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1024 / 1024).toFixed(1)} MB`;
-  return /* @__PURE__ */ t("div", { className: `nice-screen-recorder ${b}`, children: [
+    return a[Math.floor(Math.random() * a.length)];
+  }, o = (a) => {
+    const d = Math.floor(a / 3600), v = Math.floor(a % 3600 / 60), p = Math.floor(a % 60), _ = Math.floor(a % 1 * 100);
+    return d > 0 ? `${d}:${v.toString().padStart(2, "0")}:${p.toString().padStart(2, "0")}` : `${v.toString().padStart(2, "0")}:${p.toString().padStart(2, "0")}.${_.toString().padStart(2, "0")}`;
+  }, l = (a) => a < 1024 ? `${a} B` : a < 1024 * 1024 ? `${(a / 1024).toFixed(1)} KB` : `${(a / 1024 / 1024).toFixed(1)} MB`;
+  return /* @__PURE__ */ t("div", { className: `nice-screen-recorder ${u}`, children: [
     /* @__PURE__ */ t("div", { className: "nice-screen-recorder__preview", children: [
       K !== null && /* @__PURE__ */ e("div", { className: "nice-screen-recorder__countdown-overlay", children: /* @__PURE__ */ e("span", { className: "nice-screen-recorder__countdown-number", children: K }) }),
       /* @__PURE__ */ e(
@@ -931,18 +945,18 @@ const fe = {
         }
       ),
       z && /* @__PURE__ */ e("canvas", { ref: Y, className: "nice-screen-recorder__annotation-canvas" }),
-      !w && v === "idle" && /* @__PURE__ */ e("div", { className: "nice-screen-recorder__preview-placeholder", children: /* @__PURE__ */ t("button", { className: "nice-screen-recorder__start-preview-button", onClick: Z, children: [
+      !w && h === "idle" && /* @__PURE__ */ e("div", { className: "nice-screen-recorder__preview-placeholder", children: /* @__PURE__ */ t("button", { className: "nice-screen-recorder__start-preview-button", onClick: Z, children: [
         /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "monitor", size: 18 }) }),
-        /* @__PURE__ */ e("span", { children: r("screenRecorder.selectScreenToRecord", "Select Screen to Record") })
+        /* @__PURE__ */ e("span", { children: n("screenRecorder.selectScreenToRecord", "Select Screen to Record") })
       ] }) }),
-      v === "recording" && /* @__PURE__ */ t("div", { className: "nice-screen-recorder__recording-indicator", children: [
+      h === "recording" && /* @__PURE__ */ t("div", { className: "nice-screen-recorder__recording-indicator", children: [
         /* @__PURE__ */ e("span", { className: "nice-screen-recorder__recording-dot" }),
-        /* @__PURE__ */ e("span", { children: "REC" })
+        /* @__PURE__ */ e("span", { children: n("screenRecorder.rec", "REC") })
       ] })
     ] }),
     /* @__PURE__ */ t("div", { className: "nice-screen-recorder__controls", children: [
       /* @__PURE__ */ t("div", { className: "nice-screen-recorder__controls-main", children: [
-        v === "idle" && /* @__PURE__ */ t(
+        h === "idle" && /* @__PURE__ */ t(
           "button",
           {
             className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--record",
@@ -950,11 +964,11 @@ const fe = {
             disabled: !!K,
             children: [
               /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "circle", size: 18 }) }),
-              /* @__PURE__ */ e("span", { children: r("screenRecorder.startRecording", "Start Recording") })
+              /* @__PURE__ */ e("span", { children: n("screenRecorder.startRecording", "Start Recording") })
             ]
           }
         ),
-        v === "recording" && /* @__PURE__ */ t(oe, { children: [
+        h === "recording" && /* @__PURE__ */ t(ce, { children: [
           /* @__PURE__ */ t(
             "button",
             {
@@ -962,7 +976,7 @@ const fe = {
               onClick: ae,
               children: [
                 /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "pause", size: 18 }) }),
-                /* @__PURE__ */ e("span", { children: r("screenRecorder.pause", "Pause") })
+                /* @__PURE__ */ e("span", { children: n("screenRecorder.pause", "Pause") })
               ]
             }
           ),
@@ -973,12 +987,12 @@ const fe = {
               onClick: Q,
               children: [
                 /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "stop", size: 18 }) }),
-                /* @__PURE__ */ e("span", { children: r("screenRecorder.stop", "Stop") })
+                /* @__PURE__ */ e("span", { children: n("screenRecorder.stop", "Stop") })
               ]
             }
           )
         ] }),
-        v === "paused" && /* @__PURE__ */ t(oe, { children: [
+        h === "paused" && /* @__PURE__ */ t(ce, { children: [
           /* @__PURE__ */ t(
             "button",
             {
@@ -986,7 +1000,7 @@ const fe = {
               onClick: J,
               children: [
                 /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "play", size: 18 }) }),
-                /* @__PURE__ */ e("span", { children: r("screenRecorder.resume", "Resume") })
+                /* @__PURE__ */ e("span", { children: n("screenRecorder.resume", "Resume") })
               ]
             }
           ),
@@ -997,34 +1011,34 @@ const fe = {
               onClick: Q,
               children: [
                 /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "stop", size: 18 }) }),
-                /* @__PURE__ */ e("span", { children: r("screenRecorder.stop", "Stop") })
+                /* @__PURE__ */ e("span", { children: n("screenRecorder.stop", "Stop") })
               ]
             }
           )
         ] }),
-        v === "stopped" && /* @__PURE__ */ t(
+        h === "stopped" && /* @__PURE__ */ t(
           "button",
           {
             className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--new",
             onClick: () => {
-              k("idle"), H(null), D([]);
+              k("idle"), q(null), D([]);
             },
             children: [
               /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "refresh", size: 18 }) }),
-              /* @__PURE__ */ e("span", { children: r("screenRecorder.newRecording", "New Recording") })
+              /* @__PURE__ */ e("span", { children: n("screenRecorder.newRecording", "New Recording") })
             ]
           }
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-screen-recorder__controls-secondary", children: [
-        (v === "recording" || v === "paused") && /* @__PURE__ */ t(
+        (h === "recording" || h === "paused") && /* @__PURE__ */ t(
           "button",
           {
             className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--marker",
             onClick: () => ee(),
             children: [
               /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "tag", size: 18 }) }),
-              /* @__PURE__ */ e("span", { children: r("screenRecorder.addMarker", "Add Marker") })
+              /* @__PURE__ */ e("span", { children: n("screenRecorder.addMarker", "Add Marker") })
             ]
           }
         ),
@@ -1032,11 +1046,11 @@ const fe = {
           "button",
           {
             className: `nice-screen-recorder__control-button ${z ? "nice-screen-recorder__control-button--active" : ""}`,
-            onClick: () => T(!z),
-            disabled: v !== "recording",
+            onClick: () => E(!z),
+            disabled: h !== "recording",
             children: [
               /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "pen", size: 18 }) }),
-              /* @__PURE__ */ e("span", { children: r("screenRecorder.annotate", "Annotate") })
+              /* @__PURE__ */ e("span", { children: n("screenRecorder.annotate", "Annotate") })
             ]
           }
         ),
@@ -1045,8 +1059,8 @@ const fe = {
           {
             className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--settings",
             onClick: () => W(!G),
-            disabled: v === "recording",
-            "aria-label": r("screenRecorder.settings", "Settings"),
+            disabled: h === "recording",
+            "aria-label": n("screenRecorder.settings", "Settings"),
             children: /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "settings", size: 18 }) })
           }
         )
@@ -1055,17 +1069,17 @@ const fe = {
     /* @__PURE__ */ t("div", { className: "nice-screen-recorder__status", children: [
       /* @__PURE__ */ t("div", { className: "nice-screen-recorder__status-info", children: [
         /* @__PURE__ */ t("span", { className: "nice-screen-recorder__status-item", children: [
-          /* @__PURE__ */ e("strong", { children: "Duration:" }),
+          /* @__PURE__ */ e("strong", { children: n("screenRecorder.duration", "Duration:") }),
           " ",
-          c((y == null ? void 0 : y.duration) || 0)
+          o((y == null ? void 0 : y.duration) || 0)
         ] }),
         /* @__PURE__ */ t("span", { className: "nice-screen-recorder__status-item", children: [
-          /* @__PURE__ */ e("strong", { children: "Size:" }),
+          /* @__PURE__ */ e("strong", { children: n("screenRecorder.size", "Size:") }),
           " ",
           l((y == null ? void 0 : y.size) || 0)
         ] }),
         /* @__PURE__ */ t("span", { className: "nice-screen-recorder__status-item", children: [
-          /* @__PURE__ */ e("strong", { children: "Markers:" }),
+          /* @__PURE__ */ e("strong", { children: n("screenRecorder.markers2", "Markers:") }),
           " ",
           N.length
         ] })
@@ -1089,22 +1103,22 @@ const fe = {
         )
       ] })
     ] }),
-    z && v === "recording" && /* @__PURE__ */ t("div", { className: "nice-screen-recorder__annotation-tools", children: [
-      /* @__PURE__ */ e("div", { className: "nice-screen-recorder__tool-group", children: ["pen", "arrow", "rectangle", "text"].map((n) => /* @__PURE__ */ e(
+    z && h === "recording" && /* @__PURE__ */ t("div", { className: "nice-screen-recorder__annotation-tools", children: [
+      /* @__PURE__ */ e("div", { className: "nice-screen-recorder__tool-group", children: ["pen", "arrow", "rectangle", "text"].map((a) => /* @__PURE__ */ e(
         "button",
         {
-          className: `nice-screen-recorder__tool-button ${U === n ? "nice-screen-recorder__tool-button--active" : ""}`,
-          onClick: () => ie(n),
-          "aria-label": n,
+          className: `nice-screen-recorder__tool-button ${U === a ? "nice-screen-recorder__tool-button--active" : ""}`,
+          onClick: () => ie(a),
+          "aria-label": a,
           children: /* @__PURE__ */ e(
             m,
             {
-              name: n === "pen" ? "pen" : n === "arrow" ? "arrow-right" : n === "rectangle" ? "square" : "type",
+              name: a === "pen" ? "pen" : a === "arrow" ? "arrow-right" : a === "rectangle" ? "square" : "type",
               size: 16
             }
           )
         },
-        n
+        a
       )) }),
       /* @__PURE__ */ e("div", { className: "nice-screen-recorder__color-group", children: [
         "var(--nice-danger, #ff0000)",
@@ -1113,33 +1127,33 @@ const fe = {
         "var(--nice-warning, #ffff00)",
         "var(--nice-bg, #fff)",
         "var(--nice-text, #000000)"
-      ].map((n) => /* @__PURE__ */ e(
+      ].map((a) => /* @__PURE__ */ e(
         "button",
         {
-          className: `nice-screen-recorder__color-button ${te === n ? "nice-screen-recorder__color-button--active" : ""}`,
-          style: { backgroundColor: n },
-          onClick: () => x(n)
+          className: `nice-screen-recorder__color-button ${te === a ? "nice-screen-recorder__color-button--active" : ""}`,
+          style: { backgroundColor: a },
+          onClick: () => x(a)
         },
-        n
+        a
       )) })
     ] }),
     N.length > 0 && /* @__PURE__ */ t("div", { className: "nice-screen-recorder__markers", children: [
-      /* @__PURE__ */ e("h4", { children: r("screenRecorder.markers", "Markers") }),
-      /* @__PURE__ */ e("div", { className: "nice-screen-recorder__markers-list", children: N.map((n) => /* @__PURE__ */ t(
+      /* @__PURE__ */ e("h4", { children: n("screenRecorder.markers", "Markers") }),
+      /* @__PURE__ */ e("div", { className: "nice-screen-recorder__markers-list", children: N.map((a) => /* @__PURE__ */ t(
         "div",
         {
           className: "nice-screen-recorder__marker-item",
-          style: { borderLeftColor: n.color },
+          style: { borderLeftColor: a.color },
           children: [
-            /* @__PURE__ */ e("span", { className: "nice-screen-recorder__marker-time", children: c(n.time) }),
+            /* @__PURE__ */ e("span", { className: "nice-screen-recorder__marker-time", children: o(a.time) }),
             /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
-                value: n.label,
+                value: a.label,
                 onChange: (d) => {
                   D(
-                    (u) => u.map((h) => h.id === n.id ? { ...h, label: d.target.value } : h)
+                    (v) => v.map((p) => p.id === a.id ? { ...p, label: d.target.value } : p)
                   );
                 },
                 className: "nice-screen-recorder__marker-label"
@@ -1148,24 +1162,24 @@ const fe = {
             /* @__PURE__ */ e(
               "button",
               {
-                "aria-label": r("screenRecorder.close", "Close"),
+                "aria-label": n("screenRecorder.close", "Close"),
                 className: "nice-screen-recorder__marker-remove",
-                onClick: () => j(n.id),
+                onClick: () => j(a.id),
                 children: /* @__PURE__ */ e(m, { name: "close", size: 16 })
               }
             )
           ]
         },
-        n.id
+        a.id
       )) })
     ] }),
     G && /* @__PURE__ */ t("div", { className: "nice-screen-recorder__settings", children: [
       /* @__PURE__ */ t("div", { className: "nice-screen-recorder__settings-header", children: [
-        /* @__PURE__ */ e("h3", { children: r("screenRecorder.recordingSettings", "Recording Settings") }),
+        /* @__PURE__ */ e("h3", { children: n("screenRecorder.recordingSettings", "Recording Settings") }),
         /* @__PURE__ */ e(
           "button",
           {
-            "aria-label": r("screenRecorder.close", "Close"),
+            "aria-label": n("screenRecorder.close", "Close"),
             className: "nice-screen-recorder__close-button",
             onClick: () => W(!1),
             children: /* @__PURE__ */ e(m, { name: "close", size: 16 })
@@ -1173,38 +1187,38 @@ const fe = {
         )
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-screen-recorder__settings-section", children: [
-        /* @__PURE__ */ e("h4", { children: r("screenRecorder.video", "Video") }),
+        /* @__PURE__ */ e("h4", { children: n("screenRecorder.video", "Video") }),
         /* @__PURE__ */ t("label", { children: [
-          r("screenRecorder.source", "Source"),
+          n("screenRecorder.source", "Source"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.video.source,
-              onChange: (n) => S({
+              onChange: (a) => C({
                 video: {
                   ...s.video,
-                  source: n.target.value
+                  source: a.target.value
                 }
               }),
               children: [
-                /* @__PURE__ */ e("option", { value: "screen", children: r("screenRecorder.entireScreen", "Entire Screen") }),
-                /* @__PURE__ */ e("option", { value: "window", children: r("screenRecorder.applicationWindow", "Application Window") }),
-                /* @__PURE__ */ e("option", { value: "tab", children: r("screenRecorder.browserTab", "Browser Tab") }),
-                /* @__PURE__ */ e("option", { value: "camera", children: r("screenRecorder.camera", "Camera") })
+                /* @__PURE__ */ e("option", { value: "screen", children: n("screenRecorder.entireScreen", "Entire Screen") }),
+                /* @__PURE__ */ e("option", { value: "window", children: n("screenRecorder.applicationWindow", "Application Window") }),
+                /* @__PURE__ */ e("option", { value: "tab", children: n("screenRecorder.browserTab", "Browser Tab") }),
+                /* @__PURE__ */ e("option", { value: "camera", children: n("screenRecorder.camera", "Camera") })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          r("screenRecorder.resolution", "Resolution"),
+          n("screenRecorder.resolution", "Resolution"),
           /* @__PURE__ */ t(
             "select",
             {
-              value: `${(a = s.video.resolution) == null ? void 0 : a.width}x${(o = s.video.resolution) == null ? void 0 : o.height}`,
-              onChange: (n) => {
-                const [d, u] = n.target.value.split("x").map(Number);
-                S({
-                  video: { ...s.video, resolution: { width: d, height: u } }
+              value: `${(r = s.video.resolution) == null ? void 0 : r.width}x${(c = s.video.resolution) == null ? void 0 : c.height}`,
+              onChange: (a) => {
+                const [d, v] = a.target.value.split("x").map(Number);
+                C({
+                  video: { ...s.video, resolution: { width: d, height: v } }
                 });
               },
               children: [
@@ -1217,13 +1231,13 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          r("screenRecorder.frameRate", "Frame Rate"),
+          n("screenRecorder.frameRate", "Frame Rate"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.video.frameRate,
-              onChange: (n) => S({
-                video: { ...s.video, frameRate: parseInt(n.target.value) }
+              onChange: (a) => C({
+                video: { ...s.video, frameRate: parseInt(a.target.value) }
               }),
               children: [
                 /* @__PURE__ */ e("option", { value: "15", children: "15 fps" }),
@@ -1240,46 +1254,46 @@ const fe = {
             {
               type: "checkbox",
               checked: s.video.showCursor,
-              onChange: (n) => S({
-                video: { ...s.video, showCursor: n.target.checked }
+              onChange: (a) => C({
+                video: { ...s.video, showCursor: a.target.checked }
               })
             }
           ),
-          r("screenRecorder.showCursor", "Show Cursor")
+          n("screenRecorder.showCursor", "Show Cursor")
         ] })
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-screen-recorder__settings-section", children: [
-        /* @__PURE__ */ e("h4", { children: r("screenRecorder.audio", "Audio") }),
+        /* @__PURE__ */ e("h4", { children: n("screenRecorder.audio", "Audio") }),
         /* @__PURE__ */ t("label", { className: "nice-screen-recorder__checkbox-label", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
               checked: s.audio.enabled,
-              onChange: (n) => S({
-                audio: { ...s.audio, enabled: n.target.checked }
+              onChange: (a) => C({
+                audio: { ...s.audio, enabled: a.target.checked }
               })
             }
           ),
-          r("screenRecorder.enableAudio", "Enable Audio")
+          n("screenRecorder.enableAudio", "Enable Audio")
         ] }),
-        s.audio.enabled && /* @__PURE__ */ t(oe, { children: [
+        s.audio.enabled && /* @__PURE__ */ t(ce, { children: [
           /* @__PURE__ */ t("label", { children: [
-            r("screenRecorder.source", "Source"),
+            n("screenRecorder.source", "Source"),
             /* @__PURE__ */ t(
               "select",
               {
                 value: s.audio.source,
-                onChange: (n) => S({
+                onChange: (a) => C({
                   audio: {
                     ...s.audio,
-                    source: n.target.value
+                    source: a.target.value
                   }
                 }),
                 children: [
-                  /* @__PURE__ */ e("option", { value: "system", children: r("screenRecorder.systemAudio", "System Audio") }),
-                  /* @__PURE__ */ e("option", { value: "microphone", children: r("screenRecorder.microphone", "Microphone") }),
-                  /* @__PURE__ */ e("option", { value: "both", children: r("screenRecorder.both", "Both") })
+                  /* @__PURE__ */ e("option", { value: "system", children: n("screenRecorder.systemAudio", "System Audio") }),
+                  /* @__PURE__ */ e("option", { value: "microphone", children: n("screenRecorder.microphone", "Microphone") }),
+                  /* @__PURE__ */ e("option", { value: "both", children: n("screenRecorder.both", "Both") })
                 ]
               }
             )
@@ -1290,12 +1304,12 @@ const fe = {
               {
                 type: "checkbox",
                 checked: s.audio.echoCancellation,
-                onChange: (n) => S({
-                  audio: { ...s.audio, echoCancellation: n.target.checked }
+                onChange: (a) => C({
+                  audio: { ...s.audio, echoCancellation: a.target.checked }
                 })
               }
             ),
-            r("screenRecorder.echoCancellation", "Echo Cancellation")
+            n("screenRecorder.echoCancellation", "Echo Cancellation")
           ] }),
           /* @__PURE__ */ t("label", { className: "nice-screen-recorder__checkbox-label", children: [
             /* @__PURE__ */ e(
@@ -1303,51 +1317,51 @@ const fe = {
               {
                 type: "checkbox",
                 checked: s.audio.noiseSuppression,
-                onChange: (n) => S({
-                  audio: { ...s.audio, noiseSuppression: n.target.checked }
+                onChange: (a) => C({
+                  audio: { ...s.audio, noiseSuppression: a.target.checked }
                 })
               }
             ),
-            r("screenRecorder.noiseSuppression", "Noise Suppression")
+            n("screenRecorder.noiseSuppression", "Noise Suppression")
           ] })
         ] })
       ] }),
       /* @__PURE__ */ t("div", { className: "nice-screen-recorder__settings-section", children: [
-        /* @__PURE__ */ e("h4", { children: r("screenRecorder.output", "Output") }),
+        /* @__PURE__ */ e("h4", { children: n("screenRecorder.output", "Output") }),
         /* @__PURE__ */ t("label", { children: [
-          r("screenRecorder.format", "Format"),
+          n("screenRecorder.format", "Format"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.output.format,
-              onChange: (n) => S({
-                output: { ...s.output, format: n.target.value }
+              onChange: (a) => C({
+                output: { ...s.output, format: a.target.value }
               }),
               children: [
-                /* @__PURE__ */ e("option", { value: "webm", children: "WebM (Best Web)" }),
-                /* @__PURE__ */ e("option", { value: "mp4", children: "MP4 (Most Compatible)" }),
-                /* @__PURE__ */ e("option", { value: "mkv", children: "MKV (Lossless)" })
+                /* @__PURE__ */ e("option", { value: "webm", children: n("screenRecorder.webmBestWeb", "WebM (Best Web)") }),
+                /* @__PURE__ */ e("option", { value: "mp4", children: n("screenRecorder.mp4MostCompatible", "MP4 (Most Compatible)") }),
+                /* @__PURE__ */ e("option", { value: "mkv", children: n("screenRecorder.mkvLossless", "MKV (Lossless)") })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          r("screenRecorder.quality", "Quality"),
+          n("screenRecorder.quality", "Quality"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.output.quality,
-              onChange: (n) => S({
+              onChange: (a) => C({
                 output: {
                   ...s.output,
-                  quality: n.target.value
+                  quality: a.target.value
                 }
               }),
               children: [
-                /* @__PURE__ */ e("option", { value: "low", children: "Low (Smaller file)" }),
-                /* @__PURE__ */ e("option", { value: "medium", children: r("screenRecorder.medium", "Medium") }),
-                /* @__PURE__ */ e("option", { value: "high", children: "High (Recommended)" }),
-                /* @__PURE__ */ e("option", { value: "lossless", children: "Lossless (Largest file)" })
+                /* @__PURE__ */ e("option", { value: "low", children: n("screenRecorder.lowSmallerFile", "Low (Smaller file)") }),
+                /* @__PURE__ */ e("option", { value: "medium", children: n("screenRecorder.medium", "Medium") }),
+                /* @__PURE__ */ e("option", { value: "high", children: n("screenRecorder.highRecommended", "High (Recommended)") }),
+                /* @__PURE__ */ e("option", { value: "lossless", children: n("screenRecorder.losslessLargestFile", "Lossless (Largest file)") })
               ]
             }
           )
@@ -1355,8 +1369,8 @@ const fe = {
       ] })
     ] })
   ] });
-}, we = {
-  id: $(),
+}, Se = {
+  id: M(),
   name: "My Stream",
   protocol: "rtmp",
   destinations: [],
@@ -1399,7 +1413,7 @@ const fe = {
   },
   { platform: "custom-rtmp", name: "Custom RTMP", icon: "link", defaultUrl: "" },
   { platform: "custom-srt", name: "Custom SRT", icon: "lock", defaultUrl: "" }
-], ce = [
+], oe = [
   { type: "camera", name: "Camera", icon: "camera" },
   { type: "screen", name: "Screen Capture", icon: "monitor" },
   { type: "window", name: "Window Capture", icon: "window" },
@@ -1409,17 +1423,17 @@ const fe = {
   { type: "microphone", name: "Microphone", icon: "mic" },
   { type: "system-audio", name: "System Audio", icon: "volume" }
 ], Ie = ({
-  config: E,
+  config: $,
   onConfigChange: R,
   onStreamStart: F,
   onStreamStop: L,
   onStatsUpdate: O,
-  onError: I,
-  className: b = ""
+  onError: T,
+  className: u = ""
 }) => {
-  const { t: r } = me(), [s, A] = g(E || we), [y, H] = g(
+  const { t: n } = ue(), [s, A] = f($ || Se), [y, q] = f(
     "sources"
-  ), [v, k] = g(!1), [N, D] = g({
+  ), [h, k] = f(!1), [N, D] = f({
     duration: 0,
     viewers: 0,
     peakViewers: 0,
@@ -1428,57 +1442,57 @@ const fe = {
     droppedFrames: 0,
     cpuUsage: 0,
     memoryUsage: 0
-  }), [w, B] = g(null), [K, C] = g(!1), [G, W] = g(!1), [z, T] = g([s.layout]), [U, ie] = g(0), te = M(null), x = M(null), f = M(0);
+  }), [w, B] = f(null), [K, S] = f(!1), [G, W] = f(!1), [z, E] = f([s.layout]), [U, ie] = f(0), te = I(null), x = I(null), b = I(0);
   le(() => {
-    E && A(E);
-  }, [E]), le(() => () => {
+    $ && A($);
+  }, [$]), le(() => () => {
     x.current && clearInterval(x.current);
   }, []);
-  const _ = ue(
+  const g = ve(
     (i) => {
-      const c = { ...s, ...i };
-      A(c), R == null || R(c);
+      const o = { ...s, ...i };
+      A(o), R == null || R(o);
     },
     [s, R]
   ), V = (i) => {
-    const c = de.find((a) => a.platform === i), l = {
-      id: $(),
-      name: (c == null ? void 0 : c.name) || "Custom",
+    const o = de.find((r) => r.platform === i), l = {
+      id: M(),
+      name: (o == null ? void 0 : o.name) || "Custom",
       platform: i,
-      url: (c == null ? void 0 : c.defaultUrl) || "",
+      url: (o == null ? void 0 : o.defaultUrl) || "",
       streamKey: "",
       enabled: !0,
       status: "idle"
     };
-    _({ destinations: [...s.destinations, l] }), W(!1);
-  }, Y = (i, c) => {
-    _({
-      destinations: s.destinations.map((l) => l.id === i ? { ...l, ...c } : l)
+    g({ destinations: [...s.destinations, l] }), W(!1);
+  }, Y = (i, o) => {
+    g({
+      destinations: s.destinations.map((l) => l.id === i ? { ...l, ...o } : l)
     });
-  }, q = (i) => {
-    _({ destinations: s.destinations.filter((c) => c.id !== i) });
+  }, H = (i) => {
+    g({ destinations: s.destinations.filter((o) => o.id !== i) });
   }, X = async (i) => {
-    const c = ce.find((o) => o.type === i), l = {
-      id: $(),
+    const o = oe.find((c) => c.type === i), l = {
+      id: M(),
       type: i,
-      name: `${(c == null ? void 0 : c.name) || i} ${s.sources.filter((o) => o.type === i).length + 1}`,
+      name: `${(o == null ? void 0 : o.name) || i} ${s.sources.filter((c) => c.type === i).length + 1}`,
       settings: {},
       volume: 1,
       muted: !1
     };
     try {
       if (i === "camera" || i === "microphone") {
-        const o = i === "camera" ? { video: !0 } : { audio: !0 }, d = (await navigator.mediaDevices.enumerateDevices()).filter(
-          (u) => i === "camera" ? u.kind === "videoinput" : u.kind === "audioinput"
+        const c = i === "camera" ? { video: !0 } : { audio: !0 }, d = (await navigator.mediaDevices.enumerateDevices()).filter(
+          (v) => i === "camera" ? v.kind === "videoinput" : v.kind === "audioinput"
         );
         d.length > 0 && (l.settings.deviceId = d[0].deviceId);
       } else (i === "screen" || i === "window") && await navigator.mediaDevices.getDisplayMedia({ video: !0 });
-    } catch (o) {
-      console.warn(`Could not access ${i}:`, o);
+    } catch (c) {
+      console.warn(`Could not access ${i}:`, c);
     }
-    _({ sources: [...s.sources, l] });
-    const a = {
-      id: $(),
+    g({ sources: [...s.sources, l] });
+    const r = {
+      id: M(),
       sourceId: l.id,
       position: { x: 0, y: 0 },
       size: { width: s.layout.canvas.width, height: s.layout.canvas.height },
@@ -1486,46 +1500,46 @@ const fe = {
       opacity: 1,
       zIndex: s.layout.layers.length
     };
-    _({
+    g({
       layout: {
         ...s.layout,
-        layers: [...s.layout.layers, a]
+        layers: [...s.layout.layers, r]
       }
-    }), C(!1);
-  }, S = (i, c) => {
-    _({
-      sources: s.sources.map((l) => l.id === i ? { ...l, ...c } : l)
+    }), S(!1);
+  }, C = (i, o) => {
+    g({
+      sources: s.sources.map((l) => l.id === i ? { ...l, ...o } : l)
     });
   }, Z = (i) => {
-    _({
-      sources: s.sources.filter((c) => c.id !== i),
+    g({
+      sources: s.sources.filter((o) => o.id !== i),
       layout: {
         ...s.layout,
-        layers: s.layout.layers.filter((c) => c.sourceId !== i)
+        layers: s.layout.layers.filter((o) => o.sourceId !== i)
       }
     });
-  }, P = (i, c) => {
-    _({
+  }, P = (i, o) => {
+    g({
       layout: {
         ...s.layout,
-        layers: s.layout.layers.map((l) => l.id === i ? { ...l, ...c } : l)
+        layers: s.layout.layers.map((l) => l.id === i ? { ...l, ...o } : l)
       }
     });
   }, ne = (i) => {
-    const c = s.layout.layers.findIndex((l) => l.id === i);
-    if (c < s.layout.layers.length - 1) {
+    const o = s.layout.layers.findIndex((l) => l.id === i);
+    if (o < s.layout.layers.length - 1) {
       const l = [...s.layout.layers];
-      [l[c], l[c + 1]] = [l[c + 1], l[c]], l.forEach((a, o) => {
-        a.zIndex = o;
-      }), _({ layout: { ...s.layout, layers: l } });
+      [l[o], l[o + 1]] = [l[o + 1], l[o]], l.forEach((r, c) => {
+        r.zIndex = c;
+      }), g({ layout: { ...s.layout, layers: l } });
     }
   }, ae = (i) => {
-    const c = s.layout.layers.findIndex((l) => l.id === i);
-    if (c > 0) {
+    const o = s.layout.layers.findIndex((l) => l.id === i);
+    if (o > 0) {
       const l = [...s.layout.layers];
-      [l[c], l[c - 1]] = [l[c - 1], l[c]], l.forEach((a, o) => {
-        a.zIndex = o;
-      }), _({ layout: { ...s.layout, layers: l } });
+      [l[o], l[o - 1]] = [l[o - 1], l[o]], l.forEach((r, c) => {
+        r.zIndex = c;
+      }), g({ layout: { ...s.layout, layers: l } });
     }
   }, J = () => {
     const i = {
@@ -1533,23 +1547,23 @@ const fe = {
       canvas: { ...s.layout.canvas },
       layers: []
     };
-    T([...z, i]);
+    E([...z, i]);
   }, Q = (i) => {
-    const c = [...z];
-    c[U] = s.layout, T(c), ie(i), _({ layout: z[i] });
+    const o = [...z];
+    o[U] = s.layout, E(o), ie(i), g({ layout: z[i] });
   }, ee = async () => {
     try {
-      _({
+      g({
         destinations: s.destinations.map(
           (i) => i.enabled ? { ...i, status: "connecting" } : i
         )
-      }), await new Promise((i) => setTimeout(i, 2e3)), _({
+      }), await new Promise((i) => setTimeout(i, 2e3)), g({
         destinations: s.destinations.map(
           (i) => i.enabled ? { ...i, status: "live" } : i
         )
-      }), k(!0), f.current = Date.now(), F == null || F(), x.current = setInterval(() => {
+      }), k(!0), b.current = Date.now(), F == null || F(), x.current = setInterval(() => {
         const i = {
-          duration: (Date.now() - f.current) / 1e3,
+          duration: (Date.now() - b.current) / 1e3,
           viewers: Math.floor(Math.random() * 100) + N.viewers,
           peakViewers: Math.max(N.peakViewers, N.viewers),
           bitrate: s.settings.video.bitrate + Math.floor(Math.random() * 500 - 250),
@@ -1561,21 +1575,21 @@ const fe = {
         D(i), O == null || O(i);
       }, 1e3);
     } catch (i) {
-      I == null || I(i instanceof Error ? i : new Error("Failed to start stream")), _({
-        destinations: s.destinations.map((c) => ({
-          ...c,
+      T == null || T(i instanceof Error ? i : new Error("Failed to start stream")), g({
+        destinations: s.destinations.map((o) => ({
+          ...o,
           status: "error"
         }))
       });
     }
   }, j = () => {
-    x.current && clearInterval(x.current), _({
+    x.current && clearInterval(x.current), g({
       destinations: s.destinations.map((i) => ({ ...i, status: "idle" }))
     }), k(!1), L == null || L();
-  }, se = (i) => {
-    const c = Math.floor(i / 3600), l = Math.floor(i % 3600 / 60), a = Math.floor(i % 60);
-    return `${c.toString().padStart(2, "0")}:${l.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}`;
   }, re = (i) => {
+    const o = Math.floor(i / 3600), l = Math.floor(i % 3600 / 60), r = Math.floor(i % 60);
+    return `${o.toString().padStart(2, "0")}:${l.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+  }, se = (i) => {
     switch (i) {
       case "live":
         return "var(--nice-success, #00ff00)";
@@ -1587,7 +1601,7 @@ const fe = {
         return "var(--nice-text-secondary, #888888)";
     }
   };
-  return /* @__PURE__ */ t("div", { className: `nice-live-streaming ${b}`, children: [
+  return /* @__PURE__ */ t("div", { className: `nice-live-streaming ${u}`, children: [
     /* @__PURE__ */ t("header", { className: "nice-live-streaming__header", children: [
       /* @__PURE__ */ t("div", { className: "nice-live-streaming__header-title", children: [
         /* @__PURE__ */ e(
@@ -1595,21 +1609,21 @@ const fe = {
           {
             type: "text",
             value: s.name,
-            onChange: (i) => _({ name: i.target.value }),
+            onChange: (i) => g({ name: i.target.value }),
             className: "nice-live-streaming__stream-name-input"
           }
         ),
-        v && /* @__PURE__ */ t("span", { className: "nice-live-streaming__live-badge", children: [
+        h && /* @__PURE__ */ t("span", { className: "nice-live-streaming__live-badge", children: [
           /* @__PURE__ */ e("span", { className: "nice-live-streaming__live-dot" }),
           " ",
-          r("liveStreaming.live", "LIVE")
+          n("liveStreaming.live", "LIVE")
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: "nice-live-streaming__header-stats", children: v && /* @__PURE__ */ t(oe, { children: [
+      /* @__PURE__ */ e("div", { className: "nice-live-streaming__header-stats", children: h && /* @__PURE__ */ t(ce, { children: [
         /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat-item", children: [
           /* @__PURE__ */ e(m, { name: "clock", size: 14 }),
           " ",
-          se(N.duration)
+          re(N.duration)
         ] }),
         /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat-item", children: [
           /* @__PURE__ */ e(m, { name: "users", size: 14 }),
@@ -1619,8 +1633,10 @@ const fe = {
         /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat-item", children: [
           /* @__PURE__ */ e(m, { name: "bar-chart", size: 14 }),
           " ",
-          Math.round(N.bitrate),
-          " kbps"
+          n("liveStreaming.kbps", "{bitrate} kbps").replace(
+            "{bitrate}",
+            String(Math.round(N.bitrate))
+          )
         ] }),
         /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat-item", children: [
           /* @__PURE__ */ e(m, { name: "video", size: 14 }),
@@ -1629,12 +1645,12 @@ const fe = {
           " fps"
         ] })
       ] }) }),
-      /* @__PURE__ */ e("div", { className: "nice-live-streaming__header-actions", children: v ? /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "nice-live-streaming__header-actions", children: h ? /* @__PURE__ */ e(
         "button",
         {
           className: "nice-live-streaming__action-button nice-live-streaming__action-button--stop",
           onClick: j,
-          children: r("liveStreaming.endStream", "End Stream")
+          children: n("liveStreaming.endStream", "End Stream")
         }
       ) : /* @__PURE__ */ e(
         "button",
@@ -1642,21 +1658,21 @@ const fe = {
           className: "nice-live-streaming__action-button nice-live-streaming__action-button--go-live",
           onClick: ee,
           disabled: s.destinations.filter((i) => i.enabled).length === 0,
-          children: r("liveStreaming.goLive", "Go Live")
+          children: n("liveStreaming.goLive", "Go Live")
         }
       ) })
     ] }),
     /* @__PURE__ */ t("div", { className: "nice-live-streaming__main", children: [
       /* @__PURE__ */ t("div", { className: "nice-live-streaming__preview", children: [
         /* @__PURE__ */ t("div", { className: "nice-live-streaming__scenes-bar", children: [
-          z.map((i, c) => /* @__PURE__ */ e(
+          z.map((i, o) => /* @__PURE__ */ e(
             "button",
             {
-              className: `nice-live-streaming__scene-button ${U === c ? "nice-live-streaming__scene-button--active" : ""}`,
-              onClick: () => Q(c),
+              className: `nice-live-streaming__scene-button ${U === o ? "nice-live-streaming__scene-button--active" : ""}`,
+              onClick: () => Q(o),
               children: i.name
             },
-            c
+            o
           )),
           /* @__PURE__ */ e(
             "button",
@@ -1676,12 +1692,13 @@ const fe = {
               aspectRatio: `${s.layout.canvas.width}/${s.layout.canvas.height}`,
               backgroundColor: s.layout.canvas.backgroundColor
             },
-            children: s.layout.layers.sort((i, c) => i.zIndex - c.zIndex).map((i) => {
+            children: s.layout.layers.sort((i, o) => i.zIndex - o.zIndex).map((i) => {
               var l;
-              const c = s.sources.find((a) => a.id === i.sourceId);
-              return !i.visible || !c ? null : /* @__PURE__ */ e(
+              const o = s.sources.find((r) => r.id === i.sourceId);
+              return !i.visible || !o ? null : /* @__PURE__ */ e(
                 "div",
                 {
+                  role: "presentation",
                   className: `nice-live-streaming__canvas-layer ${w === i.id ? "nice-live-streaming__canvas-layer--selected" : ""}`,
                   style: {
                     left: `${i.position.x / s.layout.canvas.width * 100}%`,
@@ -1696,11 +1713,11 @@ const fe = {
                     /* @__PURE__ */ e("span", { className: "nice-live-streaming__layer-icon", children: /* @__PURE__ */ e(
                       m,
                       {
-                        name: ((l = ce.find((a) => a.type === c.type)) == null ? void 0 : l.icon) ?? "box",
+                        name: ((l = oe.find((r) => r.type === o.type)) == null ? void 0 : l.icon) ?? "box",
                         size: 16
                       }
                     ) }),
-                    /* @__PURE__ */ e("span", { className: "nice-live-streaming__layer-name", children: c.name })
+                    /* @__PURE__ */ e("span", { className: "nice-live-streaming__layer-name", children: o.name })
                   ] })
                 },
                 i.id
@@ -1714,7 +1731,7 @@ const fe = {
           "button",
           {
             className: `nice-live-streaming__panel-tab ${y === i ? "nice-live-streaming__panel-tab--active" : ""}`,
-            onClick: () => H(i),
+            onClick: () => q(i),
             children: i.charAt(0).toUpperCase() + i.slice(1)
           },
           i
@@ -1722,30 +1739,33 @@ const fe = {
         /* @__PURE__ */ t("div", { className: "nice-live-streaming__panel-content", children: [
           y === "sources" && /* @__PURE__ */ t("div", { className: "nice-live-streaming__sources-panel", children: [
             /* @__PURE__ */ t("div", { className: "nice-live-streaming__panel-header", children: [
-              /* @__PURE__ */ e("h3", { children: r("liveStreaming.sources", "Sources") }),
+              /* @__PURE__ */ e("h3", { children: n("liveStreaming.sources", "Sources") }),
               /* @__PURE__ */ e(
                 "button",
                 {
                   className: "nice-live-streaming__add-button",
-                  onClick: () => C(!0),
-                  disabled: v,
-                  children: "+ Add"
+                  onClick: () => S(!0),
+                  disabled: h,
+                  children: n("liveStreaming.add", "+ Add")
                 }
               )
             ] }),
             /* @__PURE__ */ e("div", { className: "nice-live-streaming__sources-list", children: s.sources.filter((i) => i.type !== "microphone" && i.type !== "system-audio").map((i) => {
               var l;
-              const c = s.layout.layers.find((a) => a.sourceId === i.id);
+              const o = s.layout.layers.find((r) => r.sourceId === i.id);
               return /* @__PURE__ */ t(
                 "div",
                 {
-                  className: `nice-live-streaming__source-item ${w === (c == null ? void 0 : c.id) ? "nice-live-streaming__source-item--selected" : ""}`,
-                  onClick: () => c && B(c.id),
+                  role: o ? "button" : void 0,
+                  tabIndex: o ? 0 : void 0,
+                  onKeyDown: o ? me : void 0,
+                  className: `nice-live-streaming__source-item ${w === (o == null ? void 0 : o.id) ? "nice-live-streaming__source-item--selected" : ""}`,
+                  onClick: () => o && B(o.id),
                   children: [
                     /* @__PURE__ */ e("span", { className: "nice-live-streaming__source-icon", children: /* @__PURE__ */ e(
                       m,
                       {
-                        name: ((l = ce.find((a) => a.type === i.type)) == null ? void 0 : l.icon) ?? "box",
+                        name: ((l = oe.find((r) => r.type === i.type)) == null ? void 0 : l.icon) ?? "box",
                         size: 16
                       }
                     ) }),
@@ -1754,18 +1774,18 @@ const fe = {
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          className: `nice-live-streaming__visibility-toggle ${c != null && c.visible ? "" : "nice-live-streaming__visibility-toggle--hidden"}`,
-                          onClick: (a) => {
-                            a.stopPropagation(), c && P(c.id, { visible: !c.visible });
+                          className: `nice-live-streaming__visibility-toggle ${o != null && o.visible ? "" : "nice-live-streaming__visibility-toggle--hidden"}`,
+                          onClick: (r) => {
+                            r.stopPropagation(), o && P(o.id, { visible: !o.visible });
                           },
-                          children: /* @__PURE__ */ e(m, { name: c != null && c.visible ? "eye" : "eye-off", size: 14 })
+                          children: /* @__PURE__ */ e(m, { name: o != null && o.visible ? "eye" : "eye-off", size: 14 })
                         }
                       ),
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (a) => {
-                            a.stopPropagation(), c && ne(c.id);
+                          onClick: (r) => {
+                            r.stopPropagation(), o && ne(o.id);
                           },
                           children: /* @__PURE__ */ e(m, { name: "arrow-up", size: 14 })
                         }
@@ -1773,8 +1793,8 @@ const fe = {
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (a) => {
-                            a.stopPropagation(), c && ae(c.id);
+                          onClick: (r) => {
+                            r.stopPropagation(), o && ae(o.id);
                           },
                           children: /* @__PURE__ */ e(m, { name: "arrow-down", size: 14 })
                         }
@@ -1782,10 +1802,10 @@ const fe = {
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (a) => {
-                            a.stopPropagation(), Z(i.id);
+                          onClick: (r) => {
+                            r.stopPropagation(), Z(i.id);
                           },
-                          disabled: v,
+                          disabled: h,
                           children: /* @__PURE__ */ e(m, { name: "trash", size: 14 })
                         }
                       )
@@ -1796,64 +1816,64 @@ const fe = {
               );
             }) }),
             w && /* @__PURE__ */ t("div", { className: "nice-live-streaming__layer-properties", children: [
-              /* @__PURE__ */ e("h4", { children: r("liveStreaming.properties", "Properties") }),
+              /* @__PURE__ */ e("h4", { children: n("liveStreaming.properties", "Properties") }),
               (() => {
-                const i = s.layout.layers.find((c) => c.id === w);
-                return i ? /* @__PURE__ */ t(oe, { children: [
+                const i = s.layout.layers.find((o) => o.id === w);
+                return i ? /* @__PURE__ */ t(ce, { children: [
                   /* @__PURE__ */ t("label", { children: [
-                    r("liveStreaming.xPosition", "X Position"),
+                    n("liveStreaming.xPosition", "X Position"),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
                         value: i.position.x,
-                        onChange: (c) => P(i.id, {
-                          position: { ...i.position, x: parseInt(c.target.value) || 0 }
+                        onChange: (o) => P(i.id, {
+                          position: { ...i.position, x: parseInt(o.target.value) || 0 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    r("liveStreaming.yPosition", "Y Position"),
+                    n("liveStreaming.yPosition", "Y Position"),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
                         value: i.position.y,
-                        onChange: (c) => P(i.id, {
-                          position: { ...i.position, y: parseInt(c.target.value) || 0 }
+                        onChange: (o) => P(i.id, {
+                          position: { ...i.position, y: parseInt(o.target.value) || 0 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    r("liveStreaming.width", "Width"),
+                    n("liveStreaming.width", "Width"),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
                         value: i.size.width,
-                        onChange: (c) => P(i.id, {
-                          size: { ...i.size, width: parseInt(c.target.value) || 100 }
+                        onChange: (o) => P(i.id, {
+                          size: { ...i.size, width: parseInt(o.target.value) || 100 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    r("liveStreaming.height", "Height"),
+                    n("liveStreaming.height", "Height"),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
                         value: i.size.height,
-                        onChange: (c) => P(i.id, {
-                          size: { ...i.size, height: parseInt(c.target.value) || 100 }
+                        onChange: (o) => P(i.id, {
+                          size: { ...i.size, height: parseInt(o.target.value) || 100 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    r("liveStreaming.opacity", "Opacity"),
+                    n("liveStreaming.opacity", "Opacity"),
                     /* @__PURE__ */ e(
                       "input",
                       {
@@ -1862,8 +1882,8 @@ const fe = {
                         max: "1",
                         step: "0.1",
                         value: i.opacity,
-                        onChange: (c) => P(i.id, {
-                          opacity: parseFloat(c.target.value)
+                        onChange: (o) => P(i.id, {
+                          opacity: parseFloat(o.target.value)
                         })
                       }
                     )
@@ -1874,16 +1894,16 @@ const fe = {
           ] }),
           y === "audio" && /* @__PURE__ */ t("div", { className: "nice-live-streaming__audio-panel", children: [
             /* @__PURE__ */ t("div", { className: "nice-live-streaming__panel-header", children: [
-              /* @__PURE__ */ e("h3", { children: r("liveStreaming.audioMixer", "Audio Mixer") }),
+              /* @__PURE__ */ e("h3", { children: n("liveStreaming.audioMixer", "Audio Mixer") }),
               /* @__PURE__ */ e(
                 "button",
                 {
                   className: "nice-live-streaming__add-button",
                   onClick: () => {
-                    C(!0);
+                    S(!0);
                   },
-                  disabled: v,
-                  children: "+ Add"
+                  disabled: h,
+                  children: n("liveStreaming.add", "+ Add")
                 }
               )
             ] }),
@@ -1891,13 +1911,13 @@ const fe = {
               s.sources.filter(
                 (i) => i.type === "microphone" || i.type === "system-audio" || i.type === "video"
               ).map((i) => {
-                var c;
+                var o;
                 return /* @__PURE__ */ t("div", { className: "nice-live-streaming__audio-source", children: [
                   /* @__PURE__ */ t("div", { className: "nice-live-streaming__audio-header", children: [
                     /* @__PURE__ */ e("span", { className: "nice-live-streaming__audio-icon", children: /* @__PURE__ */ e(
                       m,
                       {
-                        name: ((c = ce.find((l) => l.type === i.type)) == null ? void 0 : c.icon) ?? "box",
+                        name: ((o = oe.find((l) => l.type === i.type)) == null ? void 0 : o.icon) ?? "box",
                         size: 16
                       }
                     ) }),
@@ -1906,7 +1926,7 @@ const fe = {
                       "button",
                       {
                         className: `nice-live-streaming__mute-toggle ${i.muted ? "nice-live-streaming__mute-toggle--muted" : ""}`,
-                        onClick: () => S(i.id, { muted: !i.muted }),
+                        onClick: () => C(i.id, { muted: !i.muted }),
                         children: /* @__PURE__ */ e(m, { name: i.muted ? "volume-off" : "volume", size: 14 })
                       }
                     )
@@ -1920,7 +1940,7 @@ const fe = {
                         max: "1",
                         step: "0.01",
                         value: i.volume ?? 1,
-                        onChange: (l) => S(i.id, { volume: parseFloat(l.target.value) }),
+                        onChange: (l) => C(i.id, { volume: parseFloat(l.target.value) }),
                         disabled: i.muted
                       }
                     ),
@@ -1940,38 +1960,38 @@ const fe = {
               }),
               s.sources.filter(
                 (i) => i.type === "microphone" || i.type === "system-audio"
-              ).length === 0 && /* @__PURE__ */ e("p", { className: "nice-live-streaming__empty-message", children: r("liveStreaming.noAudioSourcesAdded", "No audio sources added") })
+              ).length === 0 && /* @__PURE__ */ e("p", { className: "nice-live-streaming__empty-message", children: n("liveStreaming.noAudioSourcesAdded", "No audio sources added") })
             ] })
           ] }),
           y === "destinations" && /* @__PURE__ */ t("div", { className: "nice-live-streaming__destinations-panel", children: [
             /* @__PURE__ */ t("div", { className: "nice-live-streaming__panel-header", children: [
-              /* @__PURE__ */ e("h3", { children: r("liveStreaming.destinations", "Destinations") }),
+              /* @__PURE__ */ e("h3", { children: n("liveStreaming.destinations", "Destinations") }),
               /* @__PURE__ */ e(
                 "button",
                 {
                   className: "nice-live-streaming__add-button",
                   onClick: () => W(!0),
-                  disabled: v,
-                  children: "+ Add"
+                  disabled: h,
+                  children: n("liveStreaming.add", "+ Add")
                 }
               )
             ] }),
             /* @__PURE__ */ t("div", { className: "nice-live-streaming__destinations-list", children: [
               s.destinations.map((i) => {
-                var c;
+                var o;
                 return /* @__PURE__ */ t("div", { className: "nice-live-streaming__destination-item", children: [
                   /* @__PURE__ */ t("div", { className: "nice-live-streaming__destination-header", children: [
                     /* @__PURE__ */ e(
                       "span",
                       {
                         className: "nice-live-streaming__status-indicator",
-                        style: { backgroundColor: re(i.status) }
+                        style: { backgroundColor: se(i.status) }
                       }
                     ),
                     /* @__PURE__ */ e("span", { className: "nice-live-streaming__destination-icon", children: /* @__PURE__ */ e(
                       m,
                       {
-                        name: ((c = de.find((l) => l.platform === i.platform)) == null ? void 0 : c.icon) ?? "link",
+                        name: ((o = de.find((l) => l.platform === i.platform)) == null ? void 0 : o.icon) ?? "link",
                         size: 16
                       }
                     ) }),
@@ -1983,7 +2003,7 @@ const fe = {
                           type: "checkbox",
                           checked: i.enabled,
                           onChange: (l) => Y(i.id, { enabled: l.target.checked }),
-                          disabled: v
+                          disabled: h
                         }
                       ),
                       /* @__PURE__ */ e("span", { className: "nice-live-streaming__toggle-slider" })
@@ -1991,28 +2011,28 @@ const fe = {
                   ] }),
                   /* @__PURE__ */ t("div", { className: "nice-live-streaming__destination-config", children: [
                     /* @__PURE__ */ t("label", { children: [
-                      r("liveStreaming.serverUrl", "Server URL"),
+                      n("liveStreaming.serverUrl", "Server URL"),
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "text",
                           value: i.url,
                           onChange: (l) => Y(i.id, { url: l.target.value }),
-                          placeholder: r("liveStreaming.rtmp", "rtmp://..."),
-                          disabled: v
+                          placeholder: n("liveStreaming.rtmp", "rtmp://..."),
+                          disabled: h
                         }
                       )
                     ] }),
                     /* @__PURE__ */ t("label", { children: [
-                      r("liveStreaming.streamKey", "Stream Key"),
+                      n("liveStreaming.streamKey", "Stream Key"),
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "password",
                           value: i.streamKey || "",
                           onChange: (l) => Y(i.id, { streamKey: l.target.value }),
-                          placeholder: r("liveStreaming.enterStreamKey", "Enter stream key"),
-                          disabled: v
+                          placeholder: n("liveStreaming.enterStreamKey", "Enter stream key"),
+                          disabled: h
                         }
                       )
                     ] })
@@ -2021,39 +2041,39 @@ const fe = {
                     "button",
                     {
                       className: "nice-live-streaming__remove-button",
-                      onClick: () => q(i.id),
-                      disabled: v,
-                      children: r("liveStreaming.remove", "Remove")
+                      onClick: () => H(i.id),
+                      disabled: h,
+                      children: n("liveStreaming.remove", "Remove")
                     }
                   )
                 ] }, i.id);
               }),
-              s.destinations.length === 0 && /* @__PURE__ */ e("p", { className: "nice-live-streaming__empty-message", children: r("liveStreaming.noDestinationsConfigured", "No destinations configured") })
+              s.destinations.length === 0 && /* @__PURE__ */ e("p", { className: "nice-live-streaming__empty-message", children: n("liveStreaming.noDestinationsConfigured", "No destinations configured") })
             ] })
           ] }),
           y === "settings" && /* @__PURE__ */ t("div", { className: "nice-live-streaming__settings-panel", children: [
             /* @__PURE__ */ t("div", { className: "nice-live-streaming__setting-section", children: [
-              /* @__PURE__ */ e("h4", { children: r("liveStreaming.video", "Video") }),
+              /* @__PURE__ */ e("h4", { children: n("liveStreaming.video", "Video") }),
               /* @__PURE__ */ t("label", { children: [
-                r("liveStreaming.resolution", "Resolution"),
+                n("liveStreaming.resolution", "Resolution"),
                 /* @__PURE__ */ t(
                   "select",
                   {
                     value: `${s.settings.video.resolution.width}x${s.settings.video.resolution.height}`,
                     onChange: (i) => {
-                      const [c, l] = i.target.value.split("x").map(Number);
-                      _({
+                      const [o, l] = i.target.value.split("x").map(Number);
+                      g({
                         settings: {
                           ...s.settings,
-                          video: { ...s.settings.video, resolution: { width: c, height: l } }
+                          video: { ...s.settings.video, resolution: { width: o, height: l } }
                         },
                         layout: {
                           ...s.layout,
-                          canvas: { ...s.layout.canvas, width: c, height: l }
+                          canvas: { ...s.layout.canvas, width: o, height: l }
                         }
                       });
                     },
-                    disabled: v,
+                    disabled: h,
                     children: [
                       /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
                       /* @__PURE__ */ e("option", { value: "1280x720", children: "720p (1280x720)" }),
@@ -2063,12 +2083,12 @@ const fe = {
                 )
               ] }),
               /* @__PURE__ */ t("label", { children: [
-                r("liveStreaming.frameRate", "Frame Rate"),
+                n("liveStreaming.frameRate", "Frame Rate"),
                 /* @__PURE__ */ t(
                   "select",
                   {
                     value: s.settings.video.frameRate,
-                    onChange: (i) => _({
+                    onChange: (i) => g({
                       settings: {
                         ...s.settings,
                         video: {
@@ -2077,7 +2097,7 @@ const fe = {
                         }
                       }
                     }),
-                    disabled: v,
+                    disabled: h,
                     children: [
                       /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
                       /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
@@ -2087,13 +2107,13 @@ const fe = {
                 )
               ] }),
               /* @__PURE__ */ t("label", { children: [
-                "Bitrate (kbps)",
+                n("liveStreaming.bitrateKbps", "Bitrate (kbps)"),
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "number",
                     value: s.settings.video.bitrate,
-                    onChange: (i) => _({
+                    onChange: (i) => g({
                       settings: {
                         ...s.settings,
                         video: {
@@ -2104,18 +2124,18 @@ const fe = {
                     }),
                     min: "1000",
                     max: "50000",
-                    disabled: v
+                    disabled: h
                   }
                 )
               ] }),
               /* @__PURE__ */ t("label", { children: [
-                "Keyframe Interval (sec)",
+                n("liveStreaming.keyframeIntervalSec", "Keyframe Interval (sec)"),
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "number",
                     value: s.settings.video.keyframe,
-                    onChange: (i) => _({
+                    onChange: (i) => g({
                       settings: {
                         ...s.settings,
                         video: {
@@ -2126,20 +2146,20 @@ const fe = {
                     }),
                     min: "1",
                     max: "10",
-                    disabled: v
+                    disabled: h
                   }
                 )
               ] })
             ] }),
             /* @__PURE__ */ t("div", { className: "nice-live-streaming__setting-section", children: [
-              /* @__PURE__ */ e("h4", { children: r("liveStreaming.audio", "Audio") }),
+              /* @__PURE__ */ e("h4", { children: n("liveStreaming.audio", "Audio") }),
               /* @__PURE__ */ t("label", { children: [
-                r("liveStreaming.sampleRate", "Sample Rate"),
+                n("liveStreaming.sampleRate", "Sample Rate"),
                 /* @__PURE__ */ t(
                   "select",
                   {
                     value: s.settings.audio.sampleRate,
-                    onChange: (i) => _({
+                    onChange: (i) => g({
                       settings: {
                         ...s.settings,
                         audio: {
@@ -2148,7 +2168,7 @@ const fe = {
                         }
                       }
                     }),
-                    disabled: v,
+                    disabled: h,
                     children: [
                       /* @__PURE__ */ e("option", { value: "44100", children: "44.1 kHz" }),
                       /* @__PURE__ */ e("option", { value: "48000", children: "48 kHz" })
@@ -2157,18 +2177,18 @@ const fe = {
                 )
               ] }),
               /* @__PURE__ */ t("label", { children: [
-                "Audio Bitrate (kbps)",
+                n("liveStreaming.audioBitrateKbps", "Audio Bitrate (kbps)"),
                 /* @__PURE__ */ t(
                   "select",
                   {
                     value: s.settings.audio.bitrate,
-                    onChange: (i) => _({
+                    onChange: (i) => g({
                       settings: {
                         ...s.settings,
                         audio: { ...s.settings.audio, bitrate: parseInt(i.target.value) }
                       }
                     }),
-                    disabled: v,
+                    disabled: h,
                     children: [
                       /* @__PURE__ */ e("option", { value: "96", children: "96 kbps" }),
                       /* @__PURE__ */ e("option", { value: "128", children: "128 kbps" }),
@@ -2183,7 +2203,7 @@ const fe = {
         ] })
       ] })
     ] }),
-    v && /* @__PURE__ */ e("footer", { className: "nice-live-streaming__footer", children: /* @__PURE__ */ t("div", { className: "nice-live-streaming__footer-stats", children: [
+    h && /* @__PURE__ */ e("footer", { className: "nice-live-streaming__footer", children: /* @__PURE__ */ t("div", { className: "nice-live-streaming__footer-stats", children: [
       /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat", children: [
         /* @__PURE__ */ e("label", { children: "CPU" }),
         /* @__PURE__ */ t("span", { className: "nice-live-streaming__value", children: [
@@ -2192,35 +2212,35 @@ const fe = {
         ] })
       ] }),
       /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat", children: [
-        /* @__PURE__ */ e("label", { children: r("liveStreaming.memory", "Memory") }),
+        /* @__PURE__ */ e("label", { children: n("liveStreaming.memory", "Memory") }),
         /* @__PURE__ */ t("span", { className: "nice-live-streaming__value", children: [
           N.memoryUsage.toFixed(1),
           "%"
         ] })
       ] }),
       /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat", children: [
-        /* @__PURE__ */ e("label", { children: r("liveStreaming.dropped", "Dropped") }),
+        /* @__PURE__ */ e("label", { children: n("liveStreaming.dropped", "Dropped") }),
         /* @__PURE__ */ e("span", { className: "nice-live-streaming__value", children: N.droppedFrames })
       ] }),
       /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat", children: [
-        /* @__PURE__ */ e("label", { children: r("liveStreaming.peakViewers", "Peak Viewers") }),
+        /* @__PURE__ */ e("label", { children: n("liveStreaming.peakViewers", "Peak Viewers") }),
         /* @__PURE__ */ e("span", { className: "nice-live-streaming__value", children: N.peakViewers })
       ] })
     ] }) }),
     K && /* @__PURE__ */ e("div", { className: "nice-live-streaming__modal-overlay", children: /* @__PURE__ */ t("div", { className: "nice-live-streaming__modal", children: [
       /* @__PURE__ */ t("div", { className: "nice-live-streaming__modal-header", children: [
-        /* @__PURE__ */ e("h3", { children: r("liveStreaming.addSource", "Add Source") }),
+        /* @__PURE__ */ e("h3", { children: n("liveStreaming.addSource", "Add Source") }),
         /* @__PURE__ */ e(
           "button",
           {
-            "aria-label": r("liveStreaming.close", "Close"),
+            "aria-label": n("liveStreaming.close", "Close"),
             className: "nice-live-streaming__close-button",
-            onClick: () => C(!1),
+            onClick: () => S(!1),
             children: /* @__PURE__ */ e(m, { name: "close", size: 16 })
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "nice-live-streaming__modal-content", children: /* @__PURE__ */ e("div", { className: "nice-live-streaming__source-type-grid", children: ce.map((i) => /* @__PURE__ */ t(
+      /* @__PURE__ */ e("div", { className: "nice-live-streaming__modal-content", children: /* @__PURE__ */ e("div", { className: "nice-live-streaming__source-type-grid", children: oe.map((i) => /* @__PURE__ */ t(
         "button",
         {
           className: "nice-live-streaming__source-type-button",
@@ -2235,11 +2255,11 @@ const fe = {
     ] }) }),
     G && /* @__PURE__ */ e("div", { className: "nice-live-streaming__modal-overlay", children: /* @__PURE__ */ t("div", { className: "nice-live-streaming__modal", children: [
       /* @__PURE__ */ t("div", { className: "nice-live-streaming__modal-header", children: [
-        /* @__PURE__ */ e("h3", { children: r("liveStreaming.addDestination", "Add Destination") }),
+        /* @__PURE__ */ e("h3", { children: n("liveStreaming.addDestination", "Add Destination") }),
         /* @__PURE__ */ e(
           "button",
           {
-            "aria-label": r("liveStreaming.close", "Close"),
+            "aria-label": n("liveStreaming.close", "Close"),
             className: "nice-live-streaming__close-button",
             onClick: () => W(!1),
             children: /* @__PURE__ */ e(m, { name: "close", size: 16 })
@@ -2264,5 +2284,5 @@ const fe = {
 export {
   Ie as NiceLiveStreaming,
   Te as NiceScreenRecorder,
-  ze as NiceVideoEditor
+  Ee as NiceVideoEditor
 };