@nice2dev/ui-video 1.2.0 → 1.2.1

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { jsxs as t, jsx as e, Fragment as le } from "react/jsx-runtime";
-import { NiceAppShell as he } from "@nice2dev/ui";
-import { NiceIcon as u, NiceTutorialButton as pe, resolveTutorial as ve, createId as $ } from "@nice2dev/ui-core";
-import { useState as b, useRef as M, useEffect as oe, useCallback as de } from "react";
+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: $(),
   name: "Untitled Project",
@@ -45,7 +45,7 @@ const fe = {
   { type: "chromaKey", name: "Chroma Key", icon: "layers" },
   { type: "crop", name: "Crop", icon: "crop" },
   { type: "zoom", name: "Zoom", icon: "search" }
-], ge = [
+], ye = [
   { type: "fade", name: "Fade" },
   { type: "dissolve", name: "Dissolve" },
   { type: "wipe", name: "Wipe" },
@@ -62,72 +62,72 @@ const fe = {
     placement: "auto"
   }
 ], ze = ({
-  project: R,
-  onProjectChange: z,
-  onExport: P,
-  onAssetUpload: F,
-  className: V = "",
-  tutorial: T
+  project: E,
+  onProjectChange: R,
+  onExport: F,
+  onAssetUpload: L,
+  className: O = "",
+  tutorial: I
 }) => {
-  const [d, s] = b(R || fe), [A, N] = b(
+  const { t: b } = me(), [r, s] = g(E || fe), [A, y] = g(
     "timeline"
-  ), [H, h] = b(null), [k, y] = b(null), [D, w] = b(0), [O, B] = b(!1), [C, j] = b(1), [K, I] = b(!0), [_, L] = b(null), ee = M(null), ae = M(null), S = M(null);
-  oe(() => {
-    R && s(R);
-  }, [R]), oe(() => () => {
-    S.current && clearInterval(S.current);
+  ), [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);
+  le(() => {
+    E && s(E);
+  }, [E]), le(() => () => {
+    x.current && clearInterval(x.current);
   }, []);
-  const g = de(
-    (n) => {
-      const l = { ...d, ...n };
-      s(l), z == null || z(l);
+  const f = ue(
+    (a) => {
+      const o = { ...r, ...a };
+      s(o), R == null || R(o);
     },
-    [d, z]
-  ), f = async (n) => {
-    const l = [];
-    for (const i of Array.from(n)) {
-      const c = i.type.startsWith("video/") ? "video" : i.type.startsWith("audio/") ? "audio" : "image";
-      let m;
-      F ? m = await F(i) : m = {
+    [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: $(),
-        type: c,
-        name: i.name,
-        url: URL.createObjectURL(i),
-        size: i.size
-      }, l.push(m);
+        type: d,
+        name: n.name,
+        url: URL.createObjectURL(n),
+        size: n.size
+      }, o.push(u);
     }
-    g({ assets: [...d.assets, ...l] });
-  }, U = (n) => {
-    const l = {
+    f({ assets: [...r.assets, ...o] });
+  }, V = (a) => {
+    const o = {
       id: $(),
-      type: n,
-      name: `${n.charAt(0).toUpperCase() + n.slice(1)} ${d.tracks.filter((i) => i.type === n).length + 1}`,
+      type: a,
+      name: `${a.charAt(0).toUpperCase() + a.slice(1)} ${r.tracks.filter((n) => n.type === a).length + 1}`,
       items: [],
       muted: !1,
       locked: !1,
       visible: !0
     };
-    g({ tracks: [...d.tracks, l] });
-  }, G = (n) => {
-    g({ tracks: d.tracks.filter((l) => l.id !== n) }), H === n && h(null);
-  }, W = (n) => {
-    g({
-      tracks: d.tracks.map((l) => l.id === n ? { ...l, muted: !l.muted } : l)
+    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)
     });
-  }, Q = (n) => {
-    g({
-      tracks: d.tracks.map((l) => l.id === n ? { ...l, locked: !l.locked } : l)
+  }, X = (a) => {
+    f({
+      tracks: r.tracks.map((o) => o.id === a ? { ...o, locked: !o.locked } : o)
     });
-  }, x = (n, l) => {
-    const i = d.tracks.find((v) => v.id === n);
-    if (!i || i.locked)
+  }, S = (a, o) => {
+    const n = r.tracks.find((p) => p.id === a);
+    if (!n || n.locked)
       return;
-    const c = i.items[i.items.length - 1], m = c ? c.startTime + c.duration : 0, p = {
+    const d = n.items[n.items.length - 1], u = d ? d.startTime + d.duration : 0, h = {
       id: $(),
-      assetId: l.id,
-      type: l.type,
-      startTime: m,
-      duration: l.duration || 5,
+      assetId: o.id,
+      type: o.type,
+      startTime: u,
+      duration: o.duration || 5,
       offset: 0,
       properties: {
         x: 0,
@@ -139,47 +139,47 @@ const fe = {
       effects: [],
       transitions: []
     };
-    g({
-      tracks: d.tracks.map(
-        (v) => v.id === n ? { ...v, items: [...v.items, p] } : v
+    f({
+      tracks: r.tracks.map(
+        (p) => p.id === a ? { ...p, items: [...p.items, h] } : p
       )
     });
-  }, Y = (n, l, i) => {
-    const c = {
+  }, Z = (a, o, n) => {
+    const d = {
       id: $(),
-      type: i,
-      name: i.charAt(0).toUpperCase() + i.slice(1),
-      parameters: te(i)
+      type: n,
+      name: n.charAt(0).toUpperCase() + n.slice(1),
+      parameters: ne(n)
     };
-    g({
-      tracks: d.tracks.map(
-        (m) => m.id === n ? {
-          ...m,
-          items: m.items.map(
-            (p) => p.id === l ? { ...p, effects: [...p.effects, c] } : p
+    f({
+      tracks: r.tracks.map(
+        (u) => u.id === a ? {
+          ...u,
+          items: u.items.map(
+            (h) => h.id === o ? { ...h, effects: [...h.effects, d] } : h
           )
-        } : m
+        } : u
       )
     });
-  }, E = (n, l, i, c) => {
-    const m = {
+  }, P = (a, o, n, d) => {
+    const u = {
       id: $(),
-      type: i,
+      type: n,
       duration: 0.5,
-      position: c
+      position: d
     };
-    g({
-      tracks: d.tracks.map(
-        (p) => p.id === n ? {
-          ...p,
-          items: p.items.map(
-            (v) => v.id === l ? { ...v, transitions: [...v.transitions, m] } : v
+    f({
+      tracks: r.tracks.map(
+        (h) => h.id === a ? {
+          ...h,
+          items: h.items.map(
+            (p) => p.id === o ? { ...p, transitions: [...p.transitions, u] } : p
           )
-        } : p
+        } : h
       )
     });
-  }, te = (n) => {
-    switch (n) {
+  }, ne = (a) => {
+    switch (a) {
       case "blur":
         return { radius: 5 };
       case "brightness":
@@ -201,104 +201,104 @@ const fe = {
       default:
         return {};
     }
-  }, ie = () => {
-    O ? (S.current && clearInterval(S.current), B(!1)) : (S.current = setInterval(() => {
-      w((n) => {
-        const l = Math.max(
-          ...d.tracks.flatMap((i) => i.items.map((c) => c.startTime + c.duration)),
+  }, 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)),
           0
         );
-        return n >= l ? (clearInterval(S.current), B(!1), 0) : n + 1 / d.frameRate;
+        return a >= o ? (clearInterval(x.current), K(!1), 0) : a + 1 / r.frameRate;
       });
-    }, 1e3 / d.frameRate), B(!0));
-  }, Z = (n) => {
-    w(Math.max(0, n));
-  }, J = async () => {
-    if (P) {
-      L(0);
+    }, 1e3 / r.frameRate), K(!0));
+  }, J = (a) => {
+    w(Math.max(0, a));
+  }, Q = async () => {
+    if (F) {
+      U(0);
       try {
-        const n = setInterval(() => {
-          L((l) => l !== null && l < 90 ? l + Math.random() * 10 : l);
+        const a = setInterval(() => {
+          U((o) => o !== null && o < 90 ? o + Math.random() * 10 : o);
         }, 500);
-        await P(d, d.settings.video.codec), clearInterval(n), L(100), setTimeout(() => L(null), 2e3);
-      } catch (n) {
-        L(null), console.error("Export failed:", n);
+        await F(r, r.settings.video.codec), clearInterval(a), U(100), setTimeout(() => U(null), 2e3);
+      } catch (a) {
+        U(null), console.error("Export failed:", a);
       }
     }
-  }, X = (n) => {
-    const l = Math.floor(n / 60), i = Math.floor(n % 60), c = Math.floor(n % 1 * d.frameRate);
-    return `${l.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}:${c.toString().padStart(2, "0")}`;
-  }, q = () => {
-    for (const n of d.tracks) {
-      const l = n.items.find((i) => i.id === k);
-      if (l)
-        return { track: n, item: l };
+  }, 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")}`;
+  }, j = () => {
+    for (const a of r.tracks) {
+      const o = a.items.find((n) => n.id === k);
+      if (o)
+        return { track: a, item: o };
     }
     return null;
-  }, ne = /* @__PURE__ */ t("header", { className: "video-editor__header", children: [
-    /* @__PURE__ */ t("div", { className: "header__project-info", children: [
+  }, se = /* @__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: d.name,
-          onChange: (n) => g({ name: n.target.value }),
-          className: "project-name-input"
+          value: r.name,
+          onChange: (a) => f({ name: a.target.value }),
+          className: "nice-video-studio__project-name-input"
         }
       ),
-      /* @__PURE__ */ t("span", { className: "project-settings", children: [
-        d.resolution.width,
+      /* @__PURE__ */ t("span", { className: "nice-video-studio__project-settings", children: [
+        r.resolution.width,
         "x",
-        d.resolution.height,
+        r.resolution.height,
         " • ",
-        d.frameRate,
+        r.frameRate,
         "fps"
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: "header__tabs", children: ["timeline", "effects", "transitions", "export"].map((n) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: "nice-video-studio__header-tabs", children: ["timeline", "effects", "transitions", "export"].map((a) => /* @__PURE__ */ e(
       "button",
       {
-        className: `tab-button ${A === n ? "tab-button--active" : ""}`,
-        onClick: () => N(n),
-        children: n.charAt(0).toUpperCase() + n.slice(1)
+        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)
       },
-      n
+      a
     )) }),
-    /* @__PURE__ */ e("div", { className: "header__actions", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: "nice-video-studio__header-actions", children: /* @__PURE__ */ e(
       "button",
       {
-        className: "action-button action-button--primary",
-        onClick: J,
-        disabled: _ !== null,
-        children: _ !== null ? `Exporting ${Math.round(_)}%` : "Export"
+        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"
       }
     ) })
-  ] }), se = k && A !== "export" ? (() => {
-    const n = q();
-    if (!n)
+  ] }), re = k && A !== "export" ? (() => {
+    const a = j();
+    if (!a)
       return null;
-    const { track: l, item: i } = n;
-    return /* @__PURE__ */ t("div", { className: "item-inspector", children: [
-      /* @__PURE__ */ e("h4", { children: "Item Properties" }),
-      /* @__PURE__ */ t("div", { className: "inspector-section", children: [
+    const { track: o, item: n } = a;
+    return /* @__PURE__ */ t("div", { className: "nice-video-studio__item-inspector", children: [
+      /* @__PURE__ */ e("h4", { children: b("videoEditor.itemProperties", "Item Properties") }),
+      /* @__PURE__ */ t("div", { className: "nice-video-studio__inspector-section", children: [
         /* @__PURE__ */ t("label", { children: [
-          "Start Time",
+          b("videoEditor.startTime", "Start Time"),
           /* @__PURE__ */ e(
             "input",
             {
               type: "number",
               step: "0.1",
-              value: i.startTime,
-              onChange: (c) => {
-                const m = parseFloat(c.target.value);
-                g({
-                  tracks: d.tracks.map(
-                    (p) => p.id === l.id ? {
-                      ...p,
-                      items: p.items.map(
-                        (v) => v.id === i.id ? { ...v, startTime: m } : v
+              value: n.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
                       )
-                    } : p
+                    } : h
                   )
                 });
               }
@@ -306,23 +306,23 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          "Duration",
+          b("videoEditor.duration", "Duration"),
           /* @__PURE__ */ e(
             "input",
             {
               type: "number",
               step: "0.1",
-              value: i.duration,
-              onChange: (c) => {
-                const m = parseFloat(c.target.value);
-                g({
-                  tracks: d.tracks.map(
-                    (p) => p.id === l.id ? {
-                      ...p,
-                      items: p.items.map(
-                        (v) => v.id === i.id ? { ...v, duration: m } : v
+              value: n.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
                       )
-                    } : p
+                    } : h
                   )
                 });
               }
@@ -330,7 +330,7 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          "Opacity",
+          b("videoEditor.opacity", "Opacity"),
           /* @__PURE__ */ e(
             "input",
             {
@@ -338,20 +338,20 @@ const fe = {
               min: "0",
               max: "1",
               step: "0.1",
-              value: i.properties.opacity ?? 1,
-              onChange: (c) => {
-                const m = parseFloat(c.target.value);
-                g({
-                  tracks: d.tracks.map(
-                    (p) => p.id === l.id ? {
-                      ...p,
-                      items: p.items.map(
-                        (v) => v.id === i.id ? {
-                          ...v,
-                          properties: { ...v.properties, opacity: m }
-                        } : v
+              value: n.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
                       )
-                    } : p
+                    } : h
                   )
                 });
               }
@@ -361,240 +361,261 @@ const fe = {
       ] }),
       /* @__PURE__ */ t("h4", { children: [
         "Effects (",
-        i.effects.length,
+        n.effects.length,
         ")"
       ] }),
-      /* @__PURE__ */ e("div", { className: "effects-list", children: i.effects.map((c) => /* @__PURE__ */ e("div", { className: "effect-badge", children: c.name }, c.id)) })
+      /* @__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)) })
     ] });
-  })() : null, a = K ? /* @__PURE__ */ t("aside", { className: "video-editor__asset-library", children: [
-    /* @__PURE__ */ t("div", { className: "asset-library__header", children: [
-      /* @__PURE__ */ e("h3", { children: "Assets" }),
+  })() : 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(
         "button",
         {
-          "aria-label": "Close",
-          className: "close-button",
-          onClick: () => I(!1),
-          children: /* @__PURE__ */ e(u, { name: "close", size: 16 })
+          "aria-label": b("videoEditor.close", "Close"),
+          className: "nice-video-studio__close-button",
+          onClick: () => z(!1),
+          children: /* @__PURE__ */ e(m, { name: "close", size: 16 })
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "asset-library__upload", children: /* @__PURE__ */ t("label", { className: "upload-zone", children: [
+    /* @__PURE__ */ e("div", { className: "nice-video-studio__asset-library-upload", children: /* @__PURE__ */ t("label", { className: "nice-video-studio__upload-zone", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "file",
           multiple: !0,
           accept: "video/*,audio/*,image/*",
-          onChange: (n) => n.target.files && f(n.target.files),
+          onChange: (a) => a.target.files && _(a.target.files),
           hidden: !0
         }
       ),
-      /* @__PURE__ */ e("span", { className: "upload-icon", children: "+" }),
-      /* @__PURE__ */ e("span", { children: "Drop files or click to upload" })
+      /* @__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("div", { className: "asset-library__list", children: d.assets.map((n) => /* @__PURE__ */ t(
+    /* @__PURE__ */ e("div", { className: "nice-video-studio__asset-library-list", children: r.assets.map((a) => /* @__PURE__ */ t(
       "div",
       {
-        className: "asset-item",
+        className: "nice-video-studio__asset-item",
         draggable: !0,
-        onDragStart: (l) => l.dataTransfer.setData("assetId", n.id),
+        onDragStart: (o) => o.dataTransfer.setData("assetId", a.id),
         children: [
-          /* @__PURE__ */ e("div", { className: "asset-thumbnail", children: n.thumbnail ? /* @__PURE__ */ e("img", { src: n.thumbnail, alt: n.name }) : /* @__PURE__ */ e("span", { className: "asset-type-icon", children: /* @__PURE__ */ e(
-            u,
+          /* @__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(
+            m,
             {
-              name: n.type === "video" ? "video" : n.type === "audio" ? "music" : "image",
+              name: a.type === "video" ? "video" : a.type === "audio" ? "music" : "image",
               size: 24
             }
           ) }) }),
-          /* @__PURE__ */ t("div", { className: "asset-info", children: [
-            /* @__PURE__ */ e("span", { className: "asset-name", children: n.name }),
-            /* @__PURE__ */ t("span", { className: "asset-meta", children: [
-              (n.size / 1024 / 1024).toFixed(1),
+          /* @__PURE__ */ t("div", { className: "nice-video-studio__asset-info", children: [
+            /* @__PURE__ */ e("span", { className: "nice-video-studio__asset-name", children: a.name }),
+            /* @__PURE__ */ t("span", { className: "nice-video-studio__asset-meta", children: [
+              (a.size / 1024 / 1024).toFixed(1),
               "MB"
             ] })
           ] })
         ]
       },
-      n.id
+      a.id
     )) })
-  ] }) : void 0, r = /* @__PURE__ */ e("div", { className: "video-editor__preview-area", children: /* @__PURE__ */ t("div", { className: "preview-container", children: [
+  ] }) : void 0, c = /* @__PURE__ */ e("div", { className: "nice-video-studio__preview-area", children: /* @__PURE__ */ t("div", { className: "nice-video-studio__preview-container", children: [
     /* @__PURE__ */ t(
       "div",
       {
-        className: "preview-canvas",
-        style: { aspectRatio: `${d.resolution.width}/${d.resolution.height}` },
+        className: "nice-video-studio__preview-canvas",
+        style: { aspectRatio: `${r.resolution.width}/${r.resolution.height}` },
         children: [
-          /* @__PURE__ */ e("video", { ref: ae, className: "preview-video" }),
-          /* @__PURE__ */ e("div", { className: "preview-overlay", children: !K && /* @__PURE__ */ e(
+          /* @__PURE__ */ e("video", { ref: te, className: "nice-video-studio__preview-video" }),
+          /* @__PURE__ */ e("div", { className: "nice-video-studio__preview-overlay", children: !W && /* @__PURE__ */ e(
             "button",
             {
-              className: "toggle-library-button",
-              onClick: () => I(!0),
-              "aria-label": "Show asset library",
-              children: /* @__PURE__ */ e(u, { name: "folder", size: 16 })
+              className: "nice-video-studio__toggle-library-button",
+              onClick: () => z(!0),
+              "aria-label": b("videoEditor.showAssetLibrary", "Show asset library"),
+              children: /* @__PURE__ */ e(m, { name: "folder", size: 16 })
             }
           ) })
         ]
       }
     ),
-    /* @__PURE__ */ t("div", { className: "playback-controls", children: [
-      /* @__PURE__ */ e("button", { onClick: () => Z(0), "aria-label": "Go to start", children: /* @__PURE__ */ e(u, { name: "skip-back", size: 16 }) }),
+    /* @__PURE__ */ t("div", { className: "nice-video-studio__playback-controls", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => J(0),
+          "aria-label": b("videoEditor.goToStart", "Go to start"),
+          children: /* @__PURE__ */ e(m, { name: "skip-back", size: 16 })
+        }
+      ),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => Z(D - 1 / d.frameRate),
-          "aria-label": "Previous frame",
-          children: /* @__PURE__ */ e(u, { name: "chevron-left", size: 16 })
+          onClick: () => J(D - 1 / r.frameRate),
+          "aria-label": b("videoEditor.previousFrame", "Previous frame"),
+          children: /* @__PURE__ */ e(m, { name: "chevron-left", size: 16 })
         }
       ),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: ie,
-          className: "play-button",
-          "aria-label": O ? "Pause" : "Play",
-          children: /* @__PURE__ */ e(u, { name: O ? "pause" : "play", size: 18 })
+          onClick: ae,
+          className: "nice-video-studio__play-button",
+          "aria-label": B ? "Pause" : "Play",
+          children: /* @__PURE__ */ e(m, { name: B ? "pause" : "play", size: 18 })
         }
       ),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => Z(D + 1 / d.frameRate),
-          "aria-label": "Next frame",
-          children: /* @__PURE__ */ e(u, { name: "chevron-right", size: 16 })
+          onClick: () => J(D + 1 / r.frameRate),
+          "aria-label": b("videoEditor.nextFrame", "Next frame"),
+          children: /* @__PURE__ */ e(m, { name: "chevron-right", size: 16 })
         }
       ),
-      /* @__PURE__ */ e("span", { className: "time-display", children: X(D) })
+      /* @__PURE__ */ e("span", { className: "nice-video-studio__time-display", children: ee(D) })
     ] })
-  ] }) }), o = /* @__PURE__ */ t("div", { className: "video-editor__panel", children: [
-    A === "timeline" && /* @__PURE__ */ t("div", { className: "timeline-panel", children: [
-      /* @__PURE__ */ t("div", { className: "timeline-toolbar", children: [
-        /* @__PURE__ */ t("div", { className: "track-buttons", children: [
-          /* @__PURE__ */ e("button", { onClick: () => U("video"), children: "+ Video Track" }),
-          /* @__PURE__ */ e("button", { onClick: () => U("audio"), children: "+ Audio Track" }),
-          /* @__PURE__ */ e("button", { onClick: () => U("text"), children: "+ Text Track" })
+  ] }) }), l = /* @__PURE__ */ t("div", { className: "nice-video-studio__panel", children: [
+    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__ */ t("div", { className: "zoom-controls", children: [
-          /* @__PURE__ */ e("button", { onClick: () => j(Math.max(0.25, C - 0.25)), children: "-" }),
+        /* @__PURE__ */ t("div", { className: "nice-video-studio__zoom-controls", children: [
+          /* @__PURE__ */ e("button", { onClick: () => G(Math.max(0.25, C - 0.25)), children: "-" }),
           /* @__PURE__ */ t("span", { children: [
             Math.round(C * 100),
             "%"
           ] }),
-          /* @__PURE__ */ e("button", { onClick: () => j(Math.min(4, C + 0.25)), children: "+" })
+          /* @__PURE__ */ e("button", { onClick: () => G(Math.min(4, C + 0.25)), children: "+" })
         ] })
       ] }),
-      /* @__PURE__ */ t("div", { className: "timeline-container", ref: ee, children: [
-        /* @__PURE__ */ e("div", { className: "timeline-ruler", children: Array.from({ length: Math.ceil(30 / C) }).map((n, l) => /* @__PURE__ */ e("div", { className: "ruler-mark", style: { left: `${l * 50 * C}px` }, children: X(l) }, l)) }),
-        /* @__PURE__ */ e("div", { className: "timeline-playhead", style: { left: `${D * 50 * C}px` } }),
-        /* @__PURE__ */ e("div", { className: "timeline-tracks", children: d.tracks.map((n) => /* @__PURE__ */ t(
+      /* @__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(
+          "div",
+          {
+            className: "nice-video-studio__ruler-mark",
+            style: { left: `${o * 50 * C}px` },
+            children: ee(o)
+          },
+          o
+        )) }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: "nice-video-studio__timeline-playhead",
+            style: { left: `${D * 50 * C}px` }
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "nice-video-studio__timeline-tracks", children: r.tracks.map((a) => /* @__PURE__ */ t(
           "div",
           {
-            className: `timeline-track ${H === n.id ? "timeline-track--selected" : ""} ${n.locked ? "timeline-track--locked" : ""}`,
-            onClick: () => h(n.id),
-            onDrop: (l) => {
-              l.preventDefault();
-              const i = l.dataTransfer.getData("assetId"), c = d.assets.find((m) => m.id === i);
-              c && x(n.id, c);
+            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);
             },
-            onDragOver: (l) => l.preventDefault(),
+            onDragOver: (o) => o.preventDefault(),
             children: [
-              /* @__PURE__ */ t("div", { className: "track-header", children: [
-                /* @__PURE__ */ e("span", { className: "track-name", children: n.name }),
-                /* @__PURE__ */ t("div", { className: "track-controls", children: [
+              /* @__PURE__ */ t("div", { className: "nice-video-studio__track-header", children: [
+                /* @__PURE__ */ e("span", { className: "nice-video-studio__track-name", children: a.name }),
+                /* @__PURE__ */ t("div", { className: "nice-video-studio__track-controls", children: [
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      className: n.muted ? "active" : "",
-                      onClick: (l) => {
-                        l.stopPropagation(), W(n.id);
+                      className: `nice-video-studio__track-toggle ${a.muted ? "nice-video-studio__track-toggle--active" : ""}`,
+                      onClick: (o) => {
+                        o.stopPropagation(), q(a.id);
                       },
-                      children: /* @__PURE__ */ e(u, { name: n.muted ? "volume-off" : "volume", size: 14 })
+                      children: /* @__PURE__ */ e(m, { name: a.muted ? "volume-off" : "volume", size: 14 })
                     }
                   ),
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      className: n.locked ? "active" : "",
-                      onClick: (l) => {
-                        l.stopPropagation(), Q(n.id);
+                      className: `nice-video-studio__track-toggle ${a.locked ? "nice-video-studio__track-toggle--active" : ""}`,
+                      onClick: (o) => {
+                        o.stopPropagation(), X(a.id);
                       },
-                      children: /* @__PURE__ */ e(u, { name: n.locked ? "lock" : "unlock", size: 14 })
+                      children: /* @__PURE__ */ e(m, { name: a.locked ? "lock" : "unlock", size: 14 })
                     }
                   ),
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      onClick: (l) => {
-                        l.stopPropagation(), G(n.id);
+                      onClick: (o) => {
+                        o.stopPropagation(), Y(a.id);
                       },
-                      "aria-label": "Remove track",
-                      children: /* @__PURE__ */ e(u, { name: "trash", size: 14 })
+                      "aria-label": b("videoEditor.removeTrack", "Remove track"),
+                      children: /* @__PURE__ */ e(m, { name: "trash", size: 14 })
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ e("div", { className: "track-items", children: n.items.map((l) => {
-                const i = d.assets.find((c) => c.id === l.assetId);
+              /* @__PURE__ */ e("div", { className: "nice-video-studio__track-items", children: a.items.map((o) => {
+                const n = r.assets.find((d) => d.id === o.assetId);
                 return /* @__PURE__ */ t(
                   "div",
                   {
-                    className: `track-item track-item--${l.type} ${k === l.id ? "track-item--selected" : ""}`,
+                    className: `nice-video-studio__track-item nice-video-studio__track-item--${o.type} ${k === o.id ? "nice-video-studio__track-item--selected" : ""}`,
                     style: {
-                      left: `${l.startTime * 50 * C}px`,
-                      width: `${l.duration * 50 * C}px`
+                      left: `${o.startTime * 50 * C}px`,
+                      width: `${o.duration * 50 * C}px`
                     },
-                    onClick: (c) => {
-                      c.stopPropagation(), y(l.id);
+                    onClick: (d) => {
+                      d.stopPropagation(), N(o.id);
                     },
                     children: [
-                      /* @__PURE__ */ e("span", { className: "item-name", children: (i == null ? void 0 : i.name) || "Untitled" }),
-                      l.transitions.length > 0 && /* @__PURE__ */ e("span", { className: "item-transitions", children: /* @__PURE__ */ e(u, { name: "wand", size: 12 }) }),
-                      l.effects.length > 0 && /* @__PURE__ */ e("span", { className: "item-effects", children: /* @__PURE__ */ e(u, { name: "palette", size: 12 }) })
+                      /* @__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 }) })
                     ]
                   },
-                  l.id
+                  o.id
                 );
               }) })
             ]
           },
-          n.id
+          a.id
         )) })
       ] })
     ] }),
-    A === "effects" && /* @__PURE__ */ t("div", { className: "effects-panel", children: [
-      /* @__PURE__ */ e("h3", { children: "Video Effects" }),
-      /* @__PURE__ */ e("p", { className: "panel-hint", children: "Select a clip to apply effects" }),
-      /* @__PURE__ */ e("div", { className: "effects-grid", children: be.map((n) => /* @__PURE__ */ t(
+    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(
         "button",
         {
-          className: "effect-preset",
+          className: "nice-video-studio__effect-preset",
           disabled: !k,
           onClick: () => {
-            const l = q();
-            l && Y(l.track.id, l.item.id, n.type);
+            const o = j();
+            o && Z(o.track.id, o.item.id, a.type);
           },
           children: [
-            /* @__PURE__ */ e("span", { className: "effect-icon", children: /* @__PURE__ */ e(u, { name: n.icon, size: 16 }) }),
-            /* @__PURE__ */ e("span", { className: "effect-name", children: n.name })
+            /* @__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 })
           ]
         },
-        n.type
+        a.type
       )) })
     ] }),
-    A === "transitions" && /* @__PURE__ */ t("div", { className: "transitions-panel", children: [
-      /* @__PURE__ */ e("h3", { children: "Transitions" }),
-      /* @__PURE__ */ e("p", { className: "panel-hint", children: "Select a clip and add transitions between clips" }),
-      /* @__PURE__ */ e("div", { className: "transitions-grid", children: ge.map((n) => /* @__PURE__ */ t("div", { className: "transition-preset", children: [
-        /* @__PURE__ */ e("span", { className: "transition-name", children: n.name }),
-        /* @__PURE__ */ t("div", { className: "transition-buttons", children: [
+    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__ */ t("div", { className: "nice-video-studio__transition-buttons", children: [
           /* @__PURE__ */ e(
             "button",
             {
               disabled: !k,
               onClick: () => {
-                const l = q();
-                l && E(l.track.id, l.item.id, n.type, "start");
+                const o = j();
+                o && P(o.track.id, o.item.id, a.type, "start");
               },
               children: "In"
             }
@@ -604,27 +625,27 @@ const fe = {
             {
               disabled: !k,
               onClick: () => {
-                const l = q();
-                l && E(l.track.id, l.item.id, n.type, "end");
+                const o = j();
+                o && P(o.track.id, o.item.id, a.type, "end");
               },
               children: "Out"
             }
           )
         ] })
-      ] }, n.type)) })
+      ] }, a.type)) })
     ] }),
-    A === "export" && /* @__PURE__ */ t("div", { className: "export-panel", children: [
-      /* @__PURE__ */ e("h3", { children: "Export Settings" }),
-      /* @__PURE__ */ t("div", { className: "export-settings", children: [
-        /* @__PURE__ */ t("div", { className: "setting-group", children: [
-          /* @__PURE__ */ e("label", { children: "Resolution" }),
+    A === "export" && /* @__PURE__ */ t("div", { className: "nice-video-studio__export-panel", children: [
+      /* @__PURE__ */ e("h3", { children: b("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__ */ t(
             "select",
             {
-              value: `${d.resolution.width}x${d.resolution.height}`,
-              onChange: (n) => {
-                const [l, i] = n.target.value.split("x").map(Number);
-                g({ resolution: { width: l, height: i } });
+              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 } });
               },
               children: [
                 /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
@@ -635,13 +656,13 @@ const fe = {
             }
           )
         ] }),
-        /* @__PURE__ */ t("div", { className: "setting-group", children: [
-          /* @__PURE__ */ e("label", { children: "Frame Rate" }),
+        /* @__PURE__ */ t("div", { className: "nice-video-studio__setting-group", children: [
+          /* @__PURE__ */ e("label", { children: b("videoEditor.frameRate", "Frame Rate") }),
           /* @__PURE__ */ t(
             "select",
             {
-              value: d.frameRate,
-              onChange: (n) => g({ frameRate: parseInt(n.target.value) }),
+              value: r.frameRate,
+              onChange: (a) => f({ frameRate: parseInt(a.target.value) }),
               children: [
                 /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
                 /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
@@ -651,18 +672,18 @@ const fe = {
             }
           )
         ] }),
-        /* @__PURE__ */ t("div", { className: "setting-group", children: [
-          /* @__PURE__ */ e("label", { children: "Video Codec" }),
+        /* @__PURE__ */ t("div", { className: "nice-video-studio__setting-group", children: [
+          /* @__PURE__ */ e("label", { children: b("videoEditor.videoCodec", "Video Codec") }),
           /* @__PURE__ */ t(
             "select",
             {
-              value: d.settings.video.codec,
-              onChange: (n) => g({
+              value: r.settings.video.codec,
+              onChange: (a) => f({
                 settings: {
-                  ...d.settings,
+                  ...r.settings,
                   video: {
-                    ...d.settings.video,
-                    codec: n.target.value
+                    ...r.settings.video,
+                    codec: a.target.value
                   }
                 }
               }),
@@ -675,19 +696,19 @@ const fe = {
             }
           )
         ] }),
-        /* @__PURE__ */ t("div", { className: "setting-group", children: [
+        /* @__PURE__ */ t("div", { className: "nice-video-studio__setting-group", children: [
           /* @__PURE__ */ e("label", { children: "Video Bitrate (Mbps)" }),
           /* @__PURE__ */ e(
             "input",
             {
               type: "number",
-              value: d.settings.video.bitrate / 1e3,
-              onChange: (n) => g({
+              value: r.settings.video.bitrate / 1e3,
+              onChange: (a) => f({
                 settings: {
-                  ...d.settings,
+                  ...r.settings,
                   video: {
-                    ...d.settings.video,
-                    bitrate: parseFloat(n.target.value) * 1e3
+                    ...r.settings.video,
+                    bitrate: parseFloat(a.target.value) * 1e3
                   }
                 }
               }),
@@ -700,33 +721,39 @@ const fe = {
       /* @__PURE__ */ e(
         "button",
         {
-          className: "export-button",
-          onClick: J,
-          disabled: _ !== null,
-          children: _ !== null ? `Exporting... ${Math.round(_)}%` : "Export Video"
+          className: "nice-video-studio__export-button",
+          onClick: Q,
+          disabled: T !== null,
+          children: T !== null ? `Exporting... ${Math.round(T)}%` : "Export Video"
         }
       ),
-      _ !== null && /* @__PURE__ */ e("div", { className: "export-progress", children: /* @__PURE__ */ e("div", { className: "export-progress-bar", style: { width: `${_}%` } }) })
+      T !== null && /* @__PURE__ */ e("div", { className: "nice-video-studio__export-progress", children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: "nice-video-studio__export-progress-bar",
+          style: { width: `${T}%` }
+        }
+      ) })
     ] })
   ] });
   return /* @__PURE__ */ t(
-    he,
+    pe,
     {
       flush: !0,
-      className: `nice-video-editor ${V}`,
+      className: `nice-video-editor nice-video-studio ${O}`,
       height: "100%",
       style: { position: "relative", minHeight: 600 },
-      toolbar: ne,
-      sidebar: a,
-      rightSidebar: se ?? void 0,
-      bottomPanel: o,
+      toolbar: se,
+      sidebar: i,
+      rightSidebar: re ?? void 0,
+      bottomPanel: l,
       children: [
-        /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(pe, { steps: ve(T, Ne) }) }),
-        r
+        /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(_e, { steps: ge(I, Ne) }) }),
+        c
       ]
     }
   );
-}, ye = {
+}, ke = {
   video: {
     source: "screen",
     showCursor: !0,
@@ -743,43 +770,43 @@ const fe = {
     format: "webm",
     quality: "high"
   }
-}, Ie = ({
-  options: R,
-  onRecordingStart: z,
-  onRecordingStop: P,
-  onRecordingPause: F,
-  onRecordingResume: V,
-  onError: T,
-  className: d = ""
+}, Te = ({
+  options: E,
+  onRecordingStart: R,
+  onRecordingStop: F,
+  onRecordingPause: L,
+  onRecordingResume: O,
+  onError: I,
+  className: b = ""
 }) => {
-  var n, l;
-  const [s, A] = b({
-    ...ye,
-    ...R
-  }), [N, H] = b(null), [h, k] = b("idle"), [y, D] = b([]), [w, O] = b(null), [B, C] = b(null), [j, K] = b(!1), [I, _] = b(!1), [L, ee] = b(
+  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(
     "pen"
-  ), [ae, S] = b("var(--nice-danger, #ff0000)"), g = M(null), f = M([]), U = M(null), G = M(null), W = M(null), Q = M(0);
-  oe(() => () => {
-    w && w.getTracks().forEach((i) => i.stop()), W.current && clearInterval(W.current);
+  ), [te, x] = g("var(--nice-danger, #ff0000)"), f = M(null), _ = M([]), V = M(null), Y = M(null), q = M(null), X = M(0);
+  le(() => () => {
+    w && w.getTracks().forEach((n) => n.stop()), q.current && clearInterval(q.current);
   }, [w]);
-  const x = (i) => {
-    A((c) => ({
-      ...c,
-      ...i,
-      video: { ...c.video, ...i.video },
-      audio: { ...c.audio, ...i.audio },
-      output: { ...c.output, ...i.output }
+  const S = (n) => {
+    A((d) => ({
+      ...d,
+      ...n,
+      video: { ...d.video, ...n.video },
+      audio: { ...d.audio, ...n.audio },
+      output: { ...d.output, ...n.output }
     }));
-  }, Y = async () => {
+  }, Z = async () => {
     try {
       k("preparing");
-      const i = {
+      const n = {
         video: {
           cursor: s.video.showCursor ? "always" : "never",
           frameRate: s.video.frameRate
         },
         audio: s.audio.source === "system" || s.audio.source === "both"
-      }, c = await navigator.mediaDevices.getDisplayMedia(i);
+      }, d = await navigator.mediaDevices.getDisplayMedia(n);
       if (s.audio.enabled && (s.audio.source === "microphone" || s.audio.source === "both"))
         try {
           (await navigator.mediaDevices.getUserMedia({
@@ -787,34 +814,34 @@ const fe = {
               echoCancellation: s.audio.echoCancellation,
               noiseSuppression: s.audio.noiseSuppression
             }
-          })).getAudioTracks().forEach((p) => c.addTrack(p));
-        } catch (m) {
-          console.warn("Could not access microphone:", m);
+          })).getAudioTracks().forEach((h) => d.addTrack(h));
+        } catch (u) {
+          console.warn("Could not access microphone:", u);
         }
-      O(c), U.current && (U.current.srcObject = c, U.current.play()), k("idle");
-    } catch (i) {
-      k("error"), T == null || T(i instanceof Error ? i : new Error("Failed to start preview"));
+      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"));
     }
-  }, E = async () => {
-    w || await Y();
-    for (let i = 3; i > 0; i--)
-      C(i), await new Promise((c) => setTimeout(c, 1e3));
+  }, P = async () => {
+    w || await Z();
+    for (let n = 3; n > 0; n--)
+      C(n), await new Promise((d) => setTimeout(d, 1e3));
     C(null);
     try {
-      const i = w || await te();
-      if (!i)
+      const n = w || await ne();
+      if (!n)
         throw new Error("No stream available");
-      const c = ne(s.output.format), m = new MediaRecorder(i, {
-        mimeType: c,
-        videoBitsPerSecond: se(s.output.quality)
+      const d = se(s.output.format), u = new MediaRecorder(n, {
+        mimeType: d,
+        videoBitsPerSecond: re(s.output.quality)
       });
-      f.current = [], m.ondataavailable = (v) => {
-        v.data.size > 0 && f.current.push(v.data);
-      }, m.onstop = () => {
-        const v = new Blob(f.current, { type: c });
-        N && (P == null || P({ ...N, status: "stopped" }, v));
-      }, g.current = m, m.start(1e3), Q.current = Date.now();
-      const p = {
+      _.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: $(),
         status: "recording",
         startTime: /* @__PURE__ */ new Date(),
@@ -823,41 +850,41 @@ const fe = {
         options: s,
         chunks: []
       };
-      H(p), k("recording"), z == null || z(p), W.current = setInterval(() => {
+      H(h), k("recording"), R == null || R(h), q.current = setInterval(() => {
         H(
-          (v) => v ? {
-            ...v,
-            duration: (Date.now() - Q.current) / 1e3,
-            size: f.current.reduce((ue, me) => ue + me.size, 0)
+          (p) => p ? {
+            ...p,
+            duration: (Date.now() - X.current) / 1e3,
+            size: _.current.reduce((ve, he) => ve + he.size, 0)
           } : null
         );
       }, 100);
-    } catch (i) {
-      k("error"), T == null || T(i instanceof Error ? i : new Error("Failed to start recording"));
+    } catch (n) {
+      k("error"), I == null || I(n instanceof Error ? n : new Error("Failed to start recording"));
     }
-  }, te = async () => (await Y(), w), ie = () => {
-    g.current && h === "recording" && (g.current.pause(), k("paused"), F == null || F());
-  }, Z = () => {
-    g.current && h === "paused" && (g.current.resume(), k("recording"), V == null || V());
+  }, ne = async () => (await Z(), w), ae = () => {
+    f.current && v === "recording" && (f.current.pause(), k("paused"), L == null || L());
   }, J = () => {
-    W.current && clearInterval(W.current), g.current && (h === "recording" || h === "paused") && (g.current.stop(), k("stopped")), w && (w.getTracks().forEach((i) => i.stop()), O(null));
-  }, X = de(
-    (i) => {
-      if (h !== "recording")
+    f.current && v === "paused" && (f.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")
         return;
-      const c = {
+      const d = {
         id: $(),
-        time: (N == null ? void 0 : N.duration) || 0,
-        label: i || `Marker ${y.length + 1}`,
-        color: a()
+        time: (y == null ? void 0 : y.duration) || 0,
+        label: n || `Marker ${N.length + 1}`,
+        color: i()
       };
-      D((m) => [...m, c]);
+      D((u) => [...u, d]);
     },
-    [h, N == null ? void 0 : N.duration, y.length]
-  ), q = (i) => {
-    D((c) => c.filter((m) => m.id !== i));
-  }, ne = (i) => {
-    switch (i) {
+    [v, y == null ? void 0 : y.duration, N.length]
+  ), j = (n) => {
+    D((d) => d.filter((u) => u.id !== n));
+  }, se = (n) => {
+    switch (n) {
       case "mp4":
         return "video/mp4";
       case "mkv":
@@ -865,8 +892,8 @@ const fe = {
       default:
         return "video/webm;codecs=vp9";
     }
-  }, se = (i) => {
-    switch (i) {
+  }, re = (n) => {
+    switch (n) {
       case "low":
         return 25e5;
       case "medium":
@@ -876,130 +903,174 @@ const fe = {
       default:
         return 8e6;
     }
-  }, a = () => {
-    const i = [
+  }, i = () => {
+    const n = [
       "var(--nice-danger, #ff4444)",
+      // audit-allow: literal-color +5 — annotation pens drawn into the recording
       "#44ff44",
       "#4444ff",
       "#ffff44",
       "#ff44ff",
       "#44ffff"
     ];
-    return i[Math.floor(Math.random() * i.length)];
-  }, r = (i) => {
-    const c = Math.floor(i / 3600), m = Math.floor(i % 3600 / 60), p = Math.floor(i % 60), v = Math.floor(i % 1 * 100);
-    return c > 0 ? `${c}:${m.toString().padStart(2, "0")}:${p.toString().padStart(2, "0")}` : `${m.toString().padStart(2, "0")}:${p.toString().padStart(2, "0")}.${v.toString().padStart(2, "0")}`;
-  }, o = (i) => i < 1024 ? `${i} B` : i < 1024 * 1024 ? `${(i / 1024).toFixed(1)} KB` : `${(i / 1024 / 1024).toFixed(1)} MB`;
-  return /* @__PURE__ */ t("div", { className: `nice-screen-recorder ${d}`, children: [
-    /* @__PURE__ */ t("div", { className: "recorder__preview", children: [
-      B !== null && /* @__PURE__ */ e("div", { className: "countdown-overlay", children: /* @__PURE__ */ e("span", { className: "countdown-number", children: B }) }),
-      /* @__PURE__ */ e("video", { ref: U, className: "preview-video", muted: !0, playsInline: !0 }),
-      I && /* @__PURE__ */ e("canvas", { ref: G, className: "annotation-canvas" }),
-      !w && h === "idle" && /* @__PURE__ */ e("div", { className: "preview-placeholder", children: /* @__PURE__ */ t("button", { className: "start-preview-button", onClick: Y, children: [
-        /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "monitor", size: 18 }) }),
-        /* @__PURE__ */ e("span", { children: "Select Screen to Record" })
+    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: [
+    /* @__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(
+        "video",
+        {
+          ref: V,
+          className: "nice-screen-recorder__preview-video",
+          muted: !0,
+          playsInline: !0
+        }
+      ),
+      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: [
+        /* @__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") })
       ] }) }),
-      h === "recording" && /* @__PURE__ */ t("div", { className: "recording-indicator", children: [
-        /* @__PURE__ */ e("span", { className: "recording-dot" }),
+      v === "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__ */ t("div", { className: "recorder__controls", children: [
-      /* @__PURE__ */ t("div", { className: "controls__main", children: [
-        h === "idle" && /* @__PURE__ */ t(
+    /* @__PURE__ */ t("div", { className: "nice-screen-recorder__controls", children: [
+      /* @__PURE__ */ t("div", { className: "nice-screen-recorder__controls-main", children: [
+        v === "idle" && /* @__PURE__ */ t(
           "button",
           {
-            className: "control-button control-button--record",
-            onClick: E,
-            disabled: !!B,
+            className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--record",
+            onClick: P,
+            disabled: !!K,
             children: [
-              /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "circle", size: 18 }) }),
-              /* @__PURE__ */ e("span", { children: "Start Recording" })
+              /* @__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") })
             ]
           }
         ),
-        h === "recording" && /* @__PURE__ */ t(le, { children: [
-          /* @__PURE__ */ t("button", { className: "control-button control-button--pause", onClick: ie, children: [
-            /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "pause", size: 18 }) }),
-            /* @__PURE__ */ e("span", { children: "Pause" })
-          ] }),
-          /* @__PURE__ */ t("button", { className: "control-button control-button--stop", onClick: J, children: [
-            /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "stop", size: 18 }) }),
-            /* @__PURE__ */ e("span", { children: "Stop" })
-          ] })
+        v === "recording" && /* @__PURE__ */ t(oe, { children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--pause",
+              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__ */ t(
+            "button",
+            {
+              className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--stop",
+              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") })
+              ]
+            }
+          )
         ] }),
-        h === "paused" && /* @__PURE__ */ t(le, { children: [
-          /* @__PURE__ */ t("button", { className: "control-button control-button--resume", onClick: Z, children: [
-            /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "play", size: 18 }) }),
-            /* @__PURE__ */ e("span", { children: "Resume" })
-          ] }),
-          /* @__PURE__ */ t("button", { className: "control-button control-button--stop", onClick: J, children: [
-            /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "stop", size: 18 }) }),
-            /* @__PURE__ */ e("span", { children: "Stop" })
-          ] })
+        v === "paused" && /* @__PURE__ */ t(oe, { children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--resume",
+              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__ */ t(
+            "button",
+            {
+              className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--stop",
+              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") })
+              ]
+            }
+          )
         ] }),
-        h === "stopped" && /* @__PURE__ */ t(
+        v === "stopped" && /* @__PURE__ */ t(
           "button",
           {
-            className: "control-button control-button--new",
+            className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--new",
             onClick: () => {
               k("idle"), H(null), D([]);
             },
             children: [
-              /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "refresh", size: 18 }) }),
-              /* @__PURE__ */ e("span", { children: "New Recording" })
+              /* @__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__ */ t("div", { className: "controls__secondary", children: [
-        (h === "recording" || h === "paused") && /* @__PURE__ */ t("button", { className: "control-button control-button--marker", onClick: () => X(), children: [
-          /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "tag", size: 18 }) }),
-          /* @__PURE__ */ e("span", { children: "Add Marker" })
-        ] }),
+      /* @__PURE__ */ t("div", { className: "nice-screen-recorder__controls-secondary", children: [
+        (v === "recording" || v === "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__ */ t(
           "button",
           {
-            className: `control-button ${I ? "control-button--active" : ""}`,
-            onClick: () => _(!I),
-            disabled: h !== "recording",
+            className: `nice-screen-recorder__control-button ${z ? "nice-screen-recorder__control-button--active" : ""}`,
+            onClick: () => T(!z),
+            disabled: v !== "recording",
             children: [
-              /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "pen", size: 18 }) }),
-              /* @__PURE__ */ e("span", { children: "Annotate" })
+              /* @__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(
           "button",
           {
-            className: "control-button control-button--settings",
-            onClick: () => K(!j),
-            disabled: h === "recording",
-            "aria-label": "Settings",
-            children: /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "settings", size: 18 }) })
+            className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--settings",
+            onClick: () => W(!G),
+            disabled: v === "recording",
+            "aria-label": r("screenRecorder.settings", "Settings"),
+            children: /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "settings", size: 18 }) })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ t("div", { className: "recorder__status", children: [
-      /* @__PURE__ */ t("div", { className: "status__info", children: [
-        /* @__PURE__ */ t("span", { className: "status-item", children: [
+    /* @__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:" }),
           " ",
-          r((N == null ? void 0 : N.duration) || 0)
+          c((y == null ? void 0 : y.duration) || 0)
         ] }),
-        /* @__PURE__ */ t("span", { className: "status-item", children: [
+        /* @__PURE__ */ t("span", { className: "nice-screen-recorder__status-item", children: [
           /* @__PURE__ */ e("strong", { children: "Size:" }),
           " ",
-          o((N == null ? void 0 : N.size) || 0)
+          l((y == null ? void 0 : y.size) || 0)
         ] }),
-        /* @__PURE__ */ t("span", { className: "status-item", children: [
+        /* @__PURE__ */ t("span", { className: "nice-screen-recorder__status-item", children: [
           /* @__PURE__ */ e("strong", { children: "Markers:" }),
           " ",
-          y.length
+          N.length
         ] })
       ] }),
-      /* @__PURE__ */ t("div", { className: "status__quality", children: [
+      /* @__PURE__ */ t("div", { className: "nice-screen-recorder__status-quality", children: [
         s.video.resolution && /* @__PURE__ */ t("span", { children: [
           s.video.resolution.width,
           "x",
@@ -1009,125 +1080,131 @@ const fe = {
           s.video.frameRate,
           "fps"
         ] }),
-        /* @__PURE__ */ e("span", { className: s.audio.enabled ? "audio-on" : "audio-off", children: /* @__PURE__ */ e(u, { name: s.audio.enabled ? "volume" : "volume-off", size: 14 }) })
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: `nice-screen-recorder__audio-status nice-screen-recorder__audio-status--${s.audio.enabled ? "on" : "off"}`,
+            children: /* @__PURE__ */ e(m, { name: s.audio.enabled ? "volume" : "volume-off", size: 14 })
+          }
+        )
       ] })
     ] }),
-    I && h === "recording" && /* @__PURE__ */ t("div", { className: "recorder__annotation-tools", children: [
-      /* @__PURE__ */ e("div", { className: "tool-group", children: ["pen", "arrow", "rectangle", "text"].map((i) => /* @__PURE__ */ e(
+    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(
         "button",
         {
-          className: `tool-button ${L === i ? "tool-button--active" : ""}`,
-          onClick: () => ee(i),
-          "aria-label": i,
+          className: `nice-screen-recorder__tool-button ${U === n ? "nice-screen-recorder__tool-button--active" : ""}`,
+          onClick: () => ie(n),
+          "aria-label": n,
           children: /* @__PURE__ */ e(
-            u,
+            m,
             {
-              name: i === "pen" ? "pen" : i === "arrow" ? "arrow-right" : i === "rectangle" ? "square" : "type",
+              name: n === "pen" ? "pen" : n === "arrow" ? "arrow-right" : n === "rectangle" ? "square" : "type",
               size: 16
             }
           )
         },
-        i
+        n
       )) }),
-      /* @__PURE__ */ e("div", { className: "color-group", children: [
+      /* @__PURE__ */ e("div", { className: "nice-screen-recorder__color-group", children: [
         "var(--nice-danger, #ff0000)",
         "var(--nice-success, #00ff00)",
         "var(--nice-primary, #0000ff)",
         "var(--nice-warning, #ffff00)",
         "var(--nice-bg, #fff)",
         "var(--nice-text, #000000)"
-      ].map((i) => /* @__PURE__ */ e(
+      ].map((n) => /* @__PURE__ */ e(
         "button",
         {
-          className: `color-button ${ae === i ? "color-button--active" : ""}`,
-          style: { backgroundColor: i },
-          onClick: () => S(i)
+          className: `nice-screen-recorder__color-button ${te === n ? "nice-screen-recorder__color-button--active" : ""}`,
+          style: { backgroundColor: n },
+          onClick: () => x(n)
         },
-        i
+        n
       )) })
     ] }),
-    y.length > 0 && /* @__PURE__ */ t("div", { className: "recorder__markers", children: [
-      /* @__PURE__ */ e("h4", { children: "Markers" }),
-      /* @__PURE__ */ e("div", { className: "markers-list", children: y.map((i) => /* @__PURE__ */ t(
+    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(
         "div",
         {
-          className: "marker-item",
-          style: { borderLeftColor: i.color },
+          className: "nice-screen-recorder__marker-item",
+          style: { borderLeftColor: n.color },
           children: [
-            /* @__PURE__ */ e("span", { className: "marker-time", children: r(i.time) }),
+            /* @__PURE__ */ e("span", { className: "nice-screen-recorder__marker-time", children: c(n.time) }),
             /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
-                value: i.label,
-                onChange: (c) => {
+                value: n.label,
+                onChange: (d) => {
                   D(
-                    (m) => m.map((p) => p.id === i.id ? { ...p, label: c.target.value } : p)
+                    (u) => u.map((h) => h.id === n.id ? { ...h, label: d.target.value } : h)
                   );
                 },
-                className: "marker-label"
+                className: "nice-screen-recorder__marker-label"
               }
             ),
             /* @__PURE__ */ e(
               "button",
               {
-                "aria-label": "Close",
-                className: "marker-remove",
-                onClick: () => q(i.id),
-                children: /* @__PURE__ */ e(u, { name: "close", size: 16 })
+                "aria-label": r("screenRecorder.close", "Close"),
+                className: "nice-screen-recorder__marker-remove",
+                onClick: () => j(n.id),
+                children: /* @__PURE__ */ e(m, { name: "close", size: 16 })
               }
             )
           ]
         },
-        i.id
+        n.id
       )) })
     ] }),
-    j && /* @__PURE__ */ t("div", { className: "recorder__settings", children: [
-      /* @__PURE__ */ t("div", { className: "settings-header", children: [
-        /* @__PURE__ */ e("h3", { children: "Recording Settings" }),
+    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(
           "button",
           {
-            "aria-label": "Close",
-            className: "close-button",
-            onClick: () => K(!1),
-            children: /* @__PURE__ */ e(u, { name: "close", size: 16 })
+            "aria-label": r("screenRecorder.close", "Close"),
+            className: "nice-screen-recorder__close-button",
+            onClick: () => W(!1),
+            children: /* @__PURE__ */ e(m, { name: "close", size: 16 })
           }
         )
       ] }),
-      /* @__PURE__ */ t("div", { className: "settings-section", children: [
-        /* @__PURE__ */ e("h4", { children: "Video" }),
+      /* @__PURE__ */ t("div", { className: "nice-screen-recorder__settings-section", children: [
+        /* @__PURE__ */ e("h4", { children: r("screenRecorder.video", "Video") }),
         /* @__PURE__ */ t("label", { children: [
-          "Source",
+          r("screenRecorder.source", "Source"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.video.source,
-              onChange: (i) => x({
+              onChange: (n) => S({
                 video: {
                   ...s.video,
-                  source: i.target.value
+                  source: n.target.value
                 }
               }),
               children: [
-                /* @__PURE__ */ e("option", { value: "screen", children: "Entire Screen" }),
-                /* @__PURE__ */ e("option", { value: "window", children: "Application Window" }),
-                /* @__PURE__ */ e("option", { value: "tab", children: "Browser Tab" }),
-                /* @__PURE__ */ e("option", { value: "camera", children: "Camera" })
+                /* @__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__ */ t("label", { children: [
-          "Resolution",
+          r("screenRecorder.resolution", "Resolution"),
           /* @__PURE__ */ t(
             "select",
             {
-              value: `${(n = s.video.resolution) == null ? void 0 : n.width}x${(l = s.video.resolution) == null ? void 0 : l.height}`,
-              onChange: (i) => {
-                const [c, m] = i.target.value.split("x").map(Number);
-                x({
-                  video: { ...s.video, resolution: { width: c, height: m } }
+              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 } }
                 });
               },
               children: [
@@ -1140,13 +1217,13 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          "Frame Rate",
+          r("screenRecorder.frameRate", "Frame Rate"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.video.frameRate,
-              onChange: (i) => x({
-                video: { ...s.video, frameRate: parseInt(i.target.value) }
+              onChange: (n) => S({
+                video: { ...s.video, frameRate: parseInt(n.target.value) }
               }),
               children: [
                 /* @__PURE__ */ e("option", { value: "15", children: "15 fps" }),
@@ -1157,94 +1234,94 @@ const fe = {
             }
           )
         ] }),
-        /* @__PURE__ */ t("label", { className: "checkbox-label", children: [
+        /* @__PURE__ */ t("label", { className: "nice-screen-recorder__checkbox-label", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
               checked: s.video.showCursor,
-              onChange: (i) => x({
-                video: { ...s.video, showCursor: i.target.checked }
+              onChange: (n) => S({
+                video: { ...s.video, showCursor: n.target.checked }
               })
             }
           ),
-          "Show Cursor"
+          r("screenRecorder.showCursor", "Show Cursor")
         ] })
       ] }),
-      /* @__PURE__ */ t("div", { className: "settings-section", children: [
-        /* @__PURE__ */ e("h4", { children: "Audio" }),
-        /* @__PURE__ */ t("label", { className: "checkbox-label", children: [
+      /* @__PURE__ */ t("div", { className: "nice-screen-recorder__settings-section", children: [
+        /* @__PURE__ */ e("h4", { children: r("screenRecorder.audio", "Audio") }),
+        /* @__PURE__ */ t("label", { className: "nice-screen-recorder__checkbox-label", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
               checked: s.audio.enabled,
-              onChange: (i) => x({
-                audio: { ...s.audio, enabled: i.target.checked }
+              onChange: (n) => S({
+                audio: { ...s.audio, enabled: n.target.checked }
               })
             }
           ),
-          "Enable Audio"
+          r("screenRecorder.enableAudio", "Enable Audio")
         ] }),
-        s.audio.enabled && /* @__PURE__ */ t(le, { children: [
+        s.audio.enabled && /* @__PURE__ */ t(oe, { children: [
           /* @__PURE__ */ t("label", { children: [
-            "Source",
+            r("screenRecorder.source", "Source"),
             /* @__PURE__ */ t(
               "select",
               {
                 value: s.audio.source,
-                onChange: (i) => x({
+                onChange: (n) => S({
                   audio: {
                     ...s.audio,
-                    source: i.target.value
+                    source: n.target.value
                   }
                 }),
                 children: [
-                  /* @__PURE__ */ e("option", { value: "system", children: "System Audio" }),
-                  /* @__PURE__ */ e("option", { value: "microphone", children: "Microphone" }),
-                  /* @__PURE__ */ e("option", { value: "both", children: "Both" })
+                  /* @__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__ */ t("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ t("label", { className: "nice-screen-recorder__checkbox-label", children: [
             /* @__PURE__ */ e(
               "input",
               {
                 type: "checkbox",
                 checked: s.audio.echoCancellation,
-                onChange: (i) => x({
-                  audio: { ...s.audio, echoCancellation: i.target.checked }
+                onChange: (n) => S({
+                  audio: { ...s.audio, echoCancellation: n.target.checked }
                 })
               }
             ),
-            "Echo Cancellation"
+            r("screenRecorder.echoCancellation", "Echo Cancellation")
           ] }),
-          /* @__PURE__ */ t("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ t("label", { className: "nice-screen-recorder__checkbox-label", children: [
             /* @__PURE__ */ e(
               "input",
               {
                 type: "checkbox",
                 checked: s.audio.noiseSuppression,
-                onChange: (i) => x({
-                  audio: { ...s.audio, noiseSuppression: i.target.checked }
+                onChange: (n) => S({
+                  audio: { ...s.audio, noiseSuppression: n.target.checked }
                 })
               }
             ),
-            "Noise Suppression"
+            r("screenRecorder.noiseSuppression", "Noise Suppression")
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ t("div", { className: "settings-section", children: [
-        /* @__PURE__ */ e("h4", { children: "Output" }),
+      /* @__PURE__ */ t("div", { className: "nice-screen-recorder__settings-section", children: [
+        /* @__PURE__ */ e("h4", { children: r("screenRecorder.output", "Output") }),
         /* @__PURE__ */ t("label", { children: [
-          "Format",
+          r("screenRecorder.format", "Format"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.output.format,
-              onChange: (i) => x({
-                output: { ...s.output, format: i.target.value }
+              onChange: (n) => S({
+                output: { ...s.output, format: n.target.value }
               }),
               children: [
                 /* @__PURE__ */ e("option", { value: "webm", children: "WebM (Best Web)" }),
@@ -1255,20 +1332,20 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          "Quality",
+          r("screenRecorder.quality", "Quality"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.output.quality,
-              onChange: (i) => x({
+              onChange: (n) => S({
                 output: {
                   ...s.output,
-                  quality: i.target.value
+                  quality: n.target.value
                 }
               }),
               children: [
                 /* @__PURE__ */ e("option", { value: "low", children: "Low (Smaller file)" }),
-                /* @__PURE__ */ e("option", { value: "medium", children: "Medium" }),
+                /* @__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)" })
               ]
@@ -1278,7 +1355,7 @@ const fe = {
       ] })
     ] })
   ] });
-}, ke = {
+}, we = {
   id: $(),
   name: "My Stream",
   protocol: "rtmp",
@@ -1306,7 +1383,7 @@ const fe = {
       codec: "aac"
     }
   }
-}, ce = [
+}, de = [
   {
     platform: "youtube",
     name: "YouTube",
@@ -1322,7 +1399,7 @@ const fe = {
   },
   { platform: "custom-rtmp", name: "Custom RTMP", icon: "link", defaultUrl: "" },
   { platform: "custom-srt", name: "Custom SRT", icon: "lock", defaultUrl: "" }
-], re = [
+], ce = [
   { type: "camera", name: "Camera", icon: "camera" },
   { type: "screen", name: "Screen Capture", icon: "monitor" },
   { type: "window", name: "Window Capture", icon: "window" },
@@ -1331,18 +1408,18 @@ const fe = {
   { type: "video", name: "Video", icon: "video" },
   { type: "microphone", name: "Microphone", icon: "mic" },
   { type: "system-audio", name: "System Audio", icon: "volume" }
-], _e = ({
-  config: R,
-  onConfigChange: z,
-  onStreamStart: P,
-  onStreamStop: F,
-  onStatsUpdate: V,
-  onError: T,
-  className: d = ""
+], Ie = ({
+  config: E,
+  onConfigChange: R,
+  onStreamStart: F,
+  onStreamStop: L,
+  onStatsUpdate: O,
+  onError: I,
+  className: b = ""
 }) => {
-  const [s, A] = b(R || ke), [N, H] = b(
+  const { t: r } = me(), [s, A] = g(E || we), [y, H] = g(
     "sources"
-  ), [h, k] = b(!1), [y, D] = b({
+  ), [v, k] = g(!1), [N, D] = g({
     duration: 0,
     viewers: 0,
     peakViewers: 0,
@@ -1351,155 +1428,155 @@ const fe = {
     droppedFrames: 0,
     cpuUsage: 0,
     memoryUsage: 0
-  }), [w, O] = b(null), [B, C] = b(!1), [j, K] = b(!1), [I, _] = b([s.layout]), [L, ee] = b(0), ae = M(null), S = M(null), g = M(0);
-  oe(() => {
-    R && A(R);
-  }, [R]), oe(() => () => {
-    S.current && clearInterval(S.current);
+  }), [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);
+  le(() => {
+    E && A(E);
+  }, [E]), le(() => () => {
+    x.current && clearInterval(x.current);
   }, []);
-  const f = de(
-    (a) => {
-      const r = { ...s, ...a };
-      A(r), z == null || z(r);
+  const _ = ue(
+    (i) => {
+      const c = { ...s, ...i };
+      A(c), R == null || R(c);
     },
-    [s, z]
-  ), U = (a) => {
-    const r = ce.find((n) => n.platform === a), o = {
+    [s, R]
+  ), V = (i) => {
+    const c = de.find((a) => a.platform === i), l = {
       id: $(),
-      name: (r == null ? void 0 : r.name) || "Custom",
-      platform: a,
-      url: (r == null ? void 0 : r.defaultUrl) || "",
+      name: (c == null ? void 0 : c.name) || "Custom",
+      platform: i,
+      url: (c == null ? void 0 : c.defaultUrl) || "",
       streamKey: "",
       enabled: !0,
       status: "idle"
     };
-    f({ destinations: [...s.destinations, o] }), K(!1);
-  }, G = (a, r) => {
-    f({
-      destinations: s.destinations.map((o) => o.id === a ? { ...o, ...r } : o)
+    _({ destinations: [...s.destinations, l] }), W(!1);
+  }, Y = (i, c) => {
+    _({
+      destinations: s.destinations.map((l) => l.id === i ? { ...l, ...c } : l)
     });
-  }, W = (a) => {
-    f({ destinations: s.destinations.filter((r) => r.id !== a) });
-  }, Q = async (a) => {
-    const r = re.find((l) => l.type === a), o = {
+  }, q = (i) => {
+    _({ destinations: s.destinations.filter((c) => c.id !== i) });
+  }, X = async (i) => {
+    const c = ce.find((o) => o.type === i), l = {
       id: $(),
-      type: a,
-      name: `${(r == null ? void 0 : r.name) || a} ${s.sources.filter((l) => l.type === a).length + 1}`,
+      type: i,
+      name: `${(c == null ? void 0 : c.name) || i} ${s.sources.filter((o) => o.type === i).length + 1}`,
       settings: {},
       volume: 1,
       muted: !1
     };
     try {
-      if (a === "camera" || a === "microphone") {
-        const l = a === "camera" ? { video: !0 } : { audio: !0 }, c = (await navigator.mediaDevices.enumerateDevices()).filter(
-          (m) => a === "camera" ? m.kind === "videoinput" : m.kind === "audioinput"
+      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"
         );
-        c.length > 0 && (o.settings.deviceId = c[0].deviceId);
-      } else (a === "screen" || a === "window") && await navigator.mediaDevices.getDisplayMedia({ video: !0 });
-    } catch (l) {
-      console.warn(`Could not access ${a}:`, l);
+        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);
     }
-    f({ sources: [...s.sources, o] });
-    const n = {
+    _({ sources: [...s.sources, l] });
+    const a = {
       id: $(),
-      sourceId: o.id,
+      sourceId: l.id,
       position: { x: 0, y: 0 },
       size: { width: s.layout.canvas.width, height: s.layout.canvas.height },
       visible: !0,
       opacity: 1,
       zIndex: s.layout.layers.length
     };
-    f({
+    _({
       layout: {
         ...s.layout,
-        layers: [...s.layout.layers, n]
+        layers: [...s.layout.layers, a]
       }
     }), C(!1);
-  }, x = (a, r) => {
-    f({
-      sources: s.sources.map((o) => o.id === a ? { ...o, ...r } : o)
+  }, S = (i, c) => {
+    _({
+      sources: s.sources.map((l) => l.id === i ? { ...l, ...c } : l)
     });
-  }, Y = (a) => {
-    f({
-      sources: s.sources.filter((r) => r.id !== a),
+  }, Z = (i) => {
+    _({
+      sources: s.sources.filter((c) => c.id !== i),
       layout: {
         ...s.layout,
-        layers: s.layout.layers.filter((r) => r.sourceId !== a)
+        layers: s.layout.layers.filter((c) => c.sourceId !== i)
       }
     });
-  }, E = (a, r) => {
-    f({
+  }, P = (i, c) => {
+    _({
       layout: {
         ...s.layout,
-        layers: s.layout.layers.map((o) => o.id === a ? { ...o, ...r } : o)
+        layers: s.layout.layers.map((l) => l.id === i ? { ...l, ...c } : l)
       }
     });
-  }, te = (a) => {
-    const r = s.layout.layers.findIndex((o) => o.id === a);
-    if (r < s.layout.layers.length - 1) {
-      const o = [...s.layout.layers];
-      [o[r], o[r + 1]] = [o[r + 1], o[r]], o.forEach((n, l) => {
-        n.zIndex = l;
-      }), f({ layout: { ...s.layout, layers: o } });
+  }, ne = (i) => {
+    const c = s.layout.layers.findIndex((l) => l.id === i);
+    if (c < 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 } });
     }
-  }, ie = (a) => {
-    const r = s.layout.layers.findIndex((o) => o.id === a);
-    if (r > 0) {
-      const o = [...s.layout.layers];
-      [o[r], o[r - 1]] = [o[r - 1], o[r]], o.forEach((n, l) => {
-        n.zIndex = l;
-      }), f({ layout: { ...s.layout, layers: o } });
+  }, ae = (i) => {
+    const c = s.layout.layers.findIndex((l) => l.id === i);
+    if (c > 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 } });
     }
-  }, Z = () => {
-    const a = {
-      name: `Scene ${I.length + 1}`,
+  }, J = () => {
+    const i = {
+      name: `Scene ${z.length + 1}`,
       canvas: { ...s.layout.canvas },
       layers: []
     };
-    _([...I, a]);
-  }, J = (a) => {
-    const r = [...I];
-    r[L] = s.layout, _(r), ee(a), f({ layout: I[a] });
-  }, X = async () => {
+    T([...z, i]);
+  }, Q = (i) => {
+    const c = [...z];
+    c[U] = s.layout, T(c), ie(i), _({ layout: z[i] });
+  }, ee = async () => {
     try {
-      f({
+      _({
         destinations: s.destinations.map(
-          (a) => a.enabled ? { ...a, status: "connecting" } : a
+          (i) => i.enabled ? { ...i, status: "connecting" } : i
         )
-      }), await new Promise((a) => setTimeout(a, 2e3)), f({
+      }), await new Promise((i) => setTimeout(i, 2e3)), _({
         destinations: s.destinations.map(
-          (a) => a.enabled ? { ...a, status: "live" } : a
+          (i) => i.enabled ? { ...i, status: "live" } : i
         )
-      }), k(!0), g.current = Date.now(), P == null || P(), S.current = setInterval(() => {
-        const a = {
-          duration: (Date.now() - g.current) / 1e3,
-          viewers: Math.floor(Math.random() * 100) + y.viewers,
-          peakViewers: Math.max(y.peakViewers, y.viewers),
+      }), k(!0), f.current = Date.now(), F == null || F(), x.current = setInterval(() => {
+        const i = {
+          duration: (Date.now() - f.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),
           fps: s.settings.video.frameRate - Math.random() * 2,
-          droppedFrames: y.droppedFrames + (Math.random() > 0.95 ? 1 : 0),
+          droppedFrames: N.droppedFrames + (Math.random() > 0.95 ? 1 : 0),
           cpuUsage: 15 + Math.random() * 30,
           memoryUsage: 40 + Math.random() * 20
         };
-        D(a), V == null || V(a);
+        D(i), O == null || O(i);
       }, 1e3);
-    } catch (a) {
-      T == null || T(a instanceof Error ? a : new Error("Failed to start stream")), f({
-        destinations: s.destinations.map((r) => ({
-          ...r,
+    } catch (i) {
+      I == null || I(i instanceof Error ? i : new Error("Failed to start stream")), _({
+        destinations: s.destinations.map((c) => ({
+          ...c,
           status: "error"
         }))
       });
     }
-  }, q = () => {
-    S.current && clearInterval(S.current), f({
-      destinations: s.destinations.map((a) => ({ ...a, status: "idle" }))
-    }), k(!1), F == null || F();
-  }, ne = (a) => {
-    const r = Math.floor(a / 3600), o = Math.floor(a % 3600 / 60), n = Math.floor(a % 60);
-    return `${r.toString().padStart(2, "0")}:${o.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}`;
-  }, se = (a) => {
-    switch (a) {
+  }, j = () => {
+    x.current && clearInterval(x.current), _({
+      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) => {
+    switch (i) {
       case "live":
         return "var(--nice-success, #00ff00)";
       case "connecting":
@@ -1510,258 +1587,273 @@ const fe = {
         return "var(--nice-text-secondary, #888888)";
     }
   };
-  return /* @__PURE__ */ t("div", { className: `nice-live-streaming ${d}`, children: [
-    /* @__PURE__ */ t("header", { className: "streaming__header", children: [
-      /* @__PURE__ */ t("div", { className: "header__title", children: [
+  return /* @__PURE__ */ t("div", { className: `nice-live-streaming ${b}`, children: [
+    /* @__PURE__ */ t("header", { className: "nice-live-streaming__header", children: [
+      /* @__PURE__ */ t("div", { className: "nice-live-streaming__header-title", children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "text",
             value: s.name,
-            onChange: (a) => f({ name: a.target.value }),
-            className: "stream-name-input"
+            onChange: (i) => _({ name: i.target.value }),
+            className: "nice-live-streaming__stream-name-input"
           }
         ),
-        h && /* @__PURE__ */ t("span", { className: "live-badge", children: [
-          /* @__PURE__ */ e("span", { className: "live-dot" }),
-          " LIVE"
+        v && /* @__PURE__ */ t("span", { className: "nice-live-streaming__live-badge", children: [
+          /* @__PURE__ */ e("span", { className: "nice-live-streaming__live-dot" }),
+          " ",
+          r("liveStreaming.live", "LIVE")
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: "header__stats", children: h && /* @__PURE__ */ t(le, { children: [
-        /* @__PURE__ */ t("span", { className: "stat-item", children: [
-          /* @__PURE__ */ e(u, { name: "clock", size: 14 }),
+      /* @__PURE__ */ e("div", { className: "nice-live-streaming__header-stats", children: v && /* @__PURE__ */ t(oe, { children: [
+        /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat-item", children: [
+          /* @__PURE__ */ e(m, { name: "clock", size: 14 }),
           " ",
-          ne(y.duration)
+          se(N.duration)
         ] }),
-        /* @__PURE__ */ t("span", { className: "stat-item", children: [
-          /* @__PURE__ */ e(u, { name: "users", size: 14 }),
+        /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat-item", children: [
+          /* @__PURE__ */ e(m, { name: "users", size: 14 }),
           " ",
-          y.viewers
+          N.viewers
         ] }),
-        /* @__PURE__ */ t("span", { className: "stat-item", children: [
-          /* @__PURE__ */ e(u, { name: "bar-chart", size: 14 }),
+        /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat-item", children: [
+          /* @__PURE__ */ e(m, { name: "bar-chart", size: 14 }),
           " ",
-          Math.round(y.bitrate),
+          Math.round(N.bitrate),
           " kbps"
         ] }),
-        /* @__PURE__ */ t("span", { className: "stat-item", children: [
-          /* @__PURE__ */ e(u, { name: "video", size: 14 }),
+        /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat-item", children: [
+          /* @__PURE__ */ e(m, { name: "video", size: 14 }),
           " ",
-          y.fps.toFixed(1),
+          N.fps.toFixed(1),
           " fps"
         ] })
       ] }) }),
-      /* @__PURE__ */ e("div", { className: "header__actions", children: h ? /* @__PURE__ */ e("button", { className: "action-button action-button--stop", onClick: q, children: "End Stream" }) : /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "nice-live-streaming__header-actions", children: v ? /* @__PURE__ */ e(
+        "button",
+        {
+          className: "nice-live-streaming__action-button nice-live-streaming__action-button--stop",
+          onClick: j,
+          children: r("liveStreaming.endStream", "End Stream")
+        }
+      ) : /* @__PURE__ */ e(
         "button",
         {
-          className: "action-button action-button--go-live",
-          onClick: X,
-          disabled: s.destinations.filter((a) => a.enabled).length === 0,
-          children: "Go Live"
+          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")
         }
       ) })
     ] }),
-    /* @__PURE__ */ t("div", { className: "streaming__main", children: [
-      /* @__PURE__ */ t("div", { className: "streaming__preview", children: [
-        /* @__PURE__ */ t("div", { className: "scenes-bar", children: [
-          I.map((a, r) => /* @__PURE__ */ e(
+    /* @__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(
             "button",
             {
-              className: `scene-button ${L === r ? "scene-button--active" : ""}`,
-              onClick: () => J(r),
-              children: a.name
+              className: `nice-live-streaming__scene-button ${U === c ? "nice-live-streaming__scene-button--active" : ""}`,
+              onClick: () => Q(c),
+              children: i.name
             },
-            r
+            c
           )),
-          /* @__PURE__ */ e("button", { className: "scene-button scene-button--add", onClick: Z, children: "+" })
+          /* @__PURE__ */ e(
+            "button",
+            {
+              className: "nice-live-streaming__scene-button nice-live-streaming__scene-button--add",
+              onClick: J,
+              children: "+"
+            }
+          )
         ] }),
         /* @__PURE__ */ e(
           "div",
           {
-            ref: ae,
-            className: "preview-canvas",
+            ref: te,
+            className: "nice-live-streaming__preview-canvas",
             style: {
               aspectRatio: `${s.layout.canvas.width}/${s.layout.canvas.height}`,
               backgroundColor: s.layout.canvas.backgroundColor
             },
-            children: s.layout.layers.sort((a, r) => a.zIndex - r.zIndex).map((a) => {
-              var o;
-              const r = s.sources.find((n) => n.id === a.sourceId);
-              return !a.visible || !r ? null : /* @__PURE__ */ e(
+            children: s.layout.layers.sort((i, c) => i.zIndex - c.zIndex).map((i) => {
+              var l;
+              const c = s.sources.find((a) => a.id === i.sourceId);
+              return !i.visible || !c ? null : /* @__PURE__ */ e(
                 "div",
                 {
-                  className: `canvas-layer ${w === a.id ? "canvas-layer--selected" : ""}`,
+                  className: `nice-live-streaming__canvas-layer ${w === i.id ? "nice-live-streaming__canvas-layer--selected" : ""}`,
                   style: {
-                    left: `${a.position.x / s.layout.canvas.width * 100}%`,
-                    top: `${a.position.y / s.layout.canvas.height * 100}%`,
-                    width: `${a.size.width / s.layout.canvas.width * 100}%`,
-                    height: `${a.size.height / s.layout.canvas.height * 100}%`,
-                    opacity: a.opacity,
-                    zIndex: a.zIndex
+                    left: `${i.position.x / s.layout.canvas.width * 100}%`,
+                    top: `${i.position.y / s.layout.canvas.height * 100}%`,
+                    width: `${i.size.width / s.layout.canvas.width * 100}%`,
+                    height: `${i.size.height / s.layout.canvas.height * 100}%`,
+                    opacity: i.opacity,
+                    zIndex: i.zIndex
                   },
-                  onClick: () => O(a.id),
-                  children: /* @__PURE__ */ t("div", { className: "layer-content", children: [
-                    /* @__PURE__ */ e("span", { className: "layer-icon", children: /* @__PURE__ */ e(
-                      u,
+                  onClick: () => B(i.id),
+                  children: /* @__PURE__ */ t("div", { className: "nice-live-streaming__layer-content", children: [
+                    /* @__PURE__ */ e("span", { className: "nice-live-streaming__layer-icon", children: /* @__PURE__ */ e(
+                      m,
                       {
-                        name: ((o = re.find((n) => n.type === r.type)) == null ? void 0 : o.icon) ?? "box",
+                        name: ((l = ce.find((a) => a.type === c.type)) == null ? void 0 : l.icon) ?? "box",
                         size: 16
                       }
                     ) }),
-                    /* @__PURE__ */ e("span", { className: "layer-name", children: r.name })
+                    /* @__PURE__ */ e("span", { className: "nice-live-streaming__layer-name", children: c.name })
                   ] })
                 },
-                a.id
+                i.id
               );
             })
           }
         )
       ] }),
-      /* @__PURE__ */ t("aside", { className: "streaming__panel", children: [
-        /* @__PURE__ */ e("div", { className: "panel-tabs", children: ["sources", "audio", "destinations", "settings"].map((a) => /* @__PURE__ */ e(
+      /* @__PURE__ */ t("aside", { className: "nice-live-streaming__panel", children: [
+        /* @__PURE__ */ e("div", { className: "nice-live-streaming__panel-tabs", children: ["sources", "audio", "destinations", "settings"].map((i) => /* @__PURE__ */ e(
           "button",
           {
-            className: `panel-tab ${N === a ? "panel-tab--active" : ""}`,
-            onClick: () => H(a),
-            children: a.charAt(0).toUpperCase() + a.slice(1)
+            className: `nice-live-streaming__panel-tab ${y === i ? "nice-live-streaming__panel-tab--active" : ""}`,
+            onClick: () => H(i),
+            children: i.charAt(0).toUpperCase() + i.slice(1)
           },
-          a
+          i
         )) }),
-        /* @__PURE__ */ t("div", { className: "panel-content", children: [
-          N === "sources" && /* @__PURE__ */ t("div", { className: "sources-panel", children: [
-            /* @__PURE__ */ t("div", { className: "panel-header", children: [
-              /* @__PURE__ */ e("h3", { children: "Sources" }),
+        /* @__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(
                 "button",
                 {
-                  className: "add-button",
+                  className: "nice-live-streaming__add-button",
                   onClick: () => C(!0),
-                  disabled: h,
+                  disabled: v,
                   children: "+ Add"
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "sources-list", children: s.sources.filter((a) => a.type !== "microphone" && a.type !== "system-audio").map((a) => {
-              var o;
-              const r = s.layout.layers.find((n) => n.sourceId === a.id);
+            /* @__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);
               return /* @__PURE__ */ t(
                 "div",
                 {
-                  className: `source-item ${w === (r == null ? void 0 : r.id) ? "source-item--selected" : ""}`,
-                  onClick: () => r && O(r.id),
+                  className: `nice-live-streaming__source-item ${w === (c == null ? void 0 : c.id) ? "nice-live-streaming__source-item--selected" : ""}`,
+                  onClick: () => c && B(c.id),
                   children: [
-                    /* @__PURE__ */ e("span", { className: "source-icon", children: /* @__PURE__ */ e(
-                      u,
+                    /* @__PURE__ */ e("span", { className: "nice-live-streaming__source-icon", children: /* @__PURE__ */ e(
+                      m,
                       {
-                        name: ((o = re.find((n) => n.type === a.type)) == null ? void 0 : o.icon) ?? "box",
+                        name: ((l = ce.find((a) => a.type === i.type)) == null ? void 0 : l.icon) ?? "box",
                         size: 16
                       }
                     ) }),
-                    /* @__PURE__ */ e("span", { className: "source-name", children: a.name }),
-                    /* @__PURE__ */ t("div", { className: "source-controls", children: [
+                    /* @__PURE__ */ e("span", { className: "nice-live-streaming__source-name", children: i.name }),
+                    /* @__PURE__ */ t("div", { className: "nice-live-streaming__source-controls", children: [
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          className: r != null && r.visible ? "" : "inactive",
-                          onClick: (n) => {
-                            n.stopPropagation(), r && E(r.id, { visible: !r.visible });
+                          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 });
                           },
-                          children: /* @__PURE__ */ e(u, { name: r != null && r.visible ? "eye" : "eye-off", size: 14 })
+                          children: /* @__PURE__ */ e(m, { name: c != null && c.visible ? "eye" : "eye-off", size: 14 })
                         }
                       ),
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (n) => {
-                            n.stopPropagation(), r && te(r.id);
+                          onClick: (a) => {
+                            a.stopPropagation(), c && ne(c.id);
                           },
-                          children: /* @__PURE__ */ e(u, { name: "arrow-up", size: 14 })
+                          children: /* @__PURE__ */ e(m, { name: "arrow-up", size: 14 })
                         }
                       ),
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (n) => {
-                            n.stopPropagation(), r && ie(r.id);
+                          onClick: (a) => {
+                            a.stopPropagation(), c && ae(c.id);
                           },
-                          children: /* @__PURE__ */ e(u, { name: "arrow-down", size: 14 })
+                          children: /* @__PURE__ */ e(m, { name: "arrow-down", size: 14 })
                         }
                       ),
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (n) => {
-                            n.stopPropagation(), Y(a.id);
+                          onClick: (a) => {
+                            a.stopPropagation(), Z(i.id);
                           },
-                          disabled: h,
-                          children: /* @__PURE__ */ e(u, { name: "trash", size: 14 })
+                          disabled: v,
+                          children: /* @__PURE__ */ e(m, { name: "trash", size: 14 })
                         }
                       )
                     ] })
                   ]
                 },
-                a.id
+                i.id
               );
             }) }),
-            w && /* @__PURE__ */ t("div", { className: "layer-properties", children: [
-              /* @__PURE__ */ e("h4", { children: "Properties" }),
+            w && /* @__PURE__ */ t("div", { className: "nice-live-streaming__layer-properties", children: [
+              /* @__PURE__ */ e("h4", { children: r("liveStreaming.properties", "Properties") }),
               (() => {
-                const a = s.layout.layers.find((r) => r.id === w);
-                return a ? /* @__PURE__ */ t(le, { children: [
+                const i = s.layout.layers.find((c) => c.id === w);
+                return i ? /* @__PURE__ */ t(oe, { children: [
                   /* @__PURE__ */ t("label", { children: [
-                    "X Position",
+                    r("liveStreaming.xPosition", "X Position"),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: a.position.x,
-                        onChange: (r) => E(a.id, {
-                          position: { ...a.position, x: parseInt(r.target.value) || 0 }
+                        value: i.position.x,
+                        onChange: (c) => P(i.id, {
+                          position: { ...i.position, x: parseInt(c.target.value) || 0 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    "Y Position",
+                    r("liveStreaming.yPosition", "Y Position"),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: a.position.y,
-                        onChange: (r) => E(a.id, {
-                          position: { ...a.position, y: parseInt(r.target.value) || 0 }
+                        value: i.position.y,
+                        onChange: (c) => P(i.id, {
+                          position: { ...i.position, y: parseInt(c.target.value) || 0 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    "Width",
+                    r("liveStreaming.width", "Width"),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: a.size.width,
-                        onChange: (r) => E(a.id, {
-                          size: { ...a.size, width: parseInt(r.target.value) || 100 }
+                        value: i.size.width,
+                        onChange: (c) => P(i.id, {
+                          size: { ...i.size, width: parseInt(c.target.value) || 100 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    "Height",
+                    r("liveStreaming.height", "Height"),
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: a.size.height,
-                        onChange: (r) => E(a.id, {
-                          size: { ...a.size, height: parseInt(r.target.value) || 100 }
+                        value: i.size.height,
+                        onChange: (c) => P(i.id, {
+                          size: { ...i.size, height: parseInt(c.target.value) || 100 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    "Opacity",
+                    r("liveStreaming.opacity", "Opacity"),
                     /* @__PURE__ */ e(
                       "input",
                       {
@@ -1769,9 +1861,9 @@ const fe = {
                         min: "0",
                         max: "1",
                         step: "0.1",
-                        value: a.opacity,
-                        onChange: (r) => E(a.id, {
-                          opacity: parseFloat(r.target.value)
+                        value: i.opacity,
+                        onChange: (c) => P(i.id, {
+                          opacity: parseFloat(c.target.value)
                         })
                       }
                     )
@@ -1780,46 +1872,46 @@ const fe = {
               })()
             ] })
           ] }),
-          N === "audio" && /* @__PURE__ */ t("div", { className: "audio-panel", children: [
-            /* @__PURE__ */ t("div", { className: "panel-header", children: [
-              /* @__PURE__ */ e("h3", { children: "Audio Mixer" }),
+          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(
                 "button",
                 {
-                  className: "add-button",
+                  className: "nice-live-streaming__add-button",
                   onClick: () => {
                     C(!0);
                   },
-                  disabled: h,
+                  disabled: v,
                   children: "+ Add"
                 }
               )
             ] }),
-            /* @__PURE__ */ t("div", { className: "audio-sources", children: [
+            /* @__PURE__ */ t("div", { className: "nice-live-streaming__audio-sources", children: [
               s.sources.filter(
-                (a) => a.type === "microphone" || a.type === "system-audio" || a.type === "video"
-              ).map((a) => {
-                var r;
-                return /* @__PURE__ */ t("div", { className: "audio-source", children: [
-                  /* @__PURE__ */ t("div", { className: "audio-header", children: [
-                    /* @__PURE__ */ e("span", { className: "audio-icon", children: /* @__PURE__ */ e(
-                      u,
+                (i) => i.type === "microphone" || i.type === "system-audio" || i.type === "video"
+              ).map((i) => {
+                var c;
+                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: ((r = re.find((o) => o.type === a.type)) == null ? void 0 : r.icon) ?? "box",
+                        name: ((c = ce.find((l) => l.type === i.type)) == null ? void 0 : c.icon) ?? "box",
                         size: 16
                       }
                     ) }),
-                    /* @__PURE__ */ e("span", { className: "audio-name", children: a.name }),
+                    /* @__PURE__ */ e("span", { className: "nice-live-streaming__audio-name", children: i.name }),
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        className: a.muted ? "muted" : "",
-                        onClick: () => x(a.id, { muted: !a.muted }),
-                        children: /* @__PURE__ */ e(u, { name: a.muted ? "volume-off" : "volume", size: 14 })
+                        className: `nice-live-streaming__mute-toggle ${i.muted ? "nice-live-streaming__mute-toggle--muted" : ""}`,
+                        onClick: () => S(i.id, { muted: !i.muted }),
+                        children: /* @__PURE__ */ e(m, { name: i.muted ? "volume-off" : "volume", size: 14 })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ t("div", { className: "audio-slider", children: [
+                  /* @__PURE__ */ t("div", { className: "nice-live-streaming__audio-slider", children: [
                     /* @__PURE__ */ e(
                       "input",
                       {
@@ -1827,100 +1919,100 @@ const fe = {
                         min: "0",
                         max: "1",
                         step: "0.01",
-                        value: a.volume ?? 1,
-                        onChange: (o) => x(a.id, { volume: parseFloat(o.target.value) }),
-                        disabled: a.muted
+                        value: i.volume ?? 1,
+                        onChange: (l) => S(i.id, { volume: parseFloat(l.target.value) }),
+                        disabled: i.muted
                       }
                     ),
-                    /* @__PURE__ */ t("span", { className: "volume-value", children: [
-                      Math.round((a.volume ?? 1) * 100),
+                    /* @__PURE__ */ t("span", { className: "nice-live-streaming__volume-value", children: [
+                      Math.round((i.volume ?? 1) * 100),
                       "%"
                     ] })
                   ] }),
-                  /* @__PURE__ */ e("div", { className: "audio-meter", children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { className: "nice-live-streaming__audio-meter", children: /* @__PURE__ */ e(
                     "div",
                     {
-                      className: "meter-fill",
-                      style: { width: `${(a.volume ?? 1) * 70 + Math.random() * 30}%` }
+                      className: "nice-live-streaming__meter-fill",
+                      style: { width: `${(i.volume ?? 1) * 70 + Math.random() * 30}%` }
                     }
                   ) })
-                ] }, a.id);
+                ] }, i.id);
               }),
               s.sources.filter(
-                (a) => a.type === "microphone" || a.type === "system-audio"
-              ).length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No audio sources added" })
+                (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") })
             ] })
           ] }),
-          N === "destinations" && /* @__PURE__ */ t("div", { className: "destinations-panel", children: [
-            /* @__PURE__ */ t("div", { className: "panel-header", children: [
-              /* @__PURE__ */ e("h3", { children: "Destinations" }),
+          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(
                 "button",
                 {
-                  className: "add-button",
-                  onClick: () => K(!0),
-                  disabled: h,
+                  className: "nice-live-streaming__add-button",
+                  onClick: () => W(!0),
+                  disabled: v,
                   children: "+ Add"
                 }
               )
             ] }),
-            /* @__PURE__ */ t("div", { className: "destinations-list", children: [
-              s.destinations.map((a) => {
-                var r;
-                return /* @__PURE__ */ t("div", { className: "destination-item", children: [
-                  /* @__PURE__ */ t("div", { className: "destination-header", children: [
+            /* @__PURE__ */ t("div", { className: "nice-live-streaming__destinations-list", children: [
+              s.destinations.map((i) => {
+                var c;
+                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: "status-indicator",
-                        style: { backgroundColor: se(a.status) }
+                        className: "nice-live-streaming__status-indicator",
+                        style: { backgroundColor: re(i.status) }
                       }
                     ),
-                    /* @__PURE__ */ e("span", { className: "destination-icon", children: /* @__PURE__ */ e(
-                      u,
+                    /* @__PURE__ */ e("span", { className: "nice-live-streaming__destination-icon", children: /* @__PURE__ */ e(
+                      m,
                       {
-                        name: ((r = ce.find((o) => o.platform === a.platform)) == null ? void 0 : r.icon) ?? "link",
+                        name: ((c = de.find((l) => l.platform === i.platform)) == null ? void 0 : c.icon) ?? "link",
                         size: 16
                       }
                     ) }),
-                    /* @__PURE__ */ e("span", { className: "destination-name", children: a.name }),
-                    /* @__PURE__ */ t("label", { className: "toggle", children: [
+                    /* @__PURE__ */ e("span", { className: "nice-live-streaming__destination-name", children: i.name }),
+                    /* @__PURE__ */ t("label", { className: "nice-live-streaming__toggle", children: [
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "checkbox",
-                          checked: a.enabled,
-                          onChange: (o) => G(a.id, { enabled: o.target.checked }),
-                          disabled: h
+                          checked: i.enabled,
+                          onChange: (l) => Y(i.id, { enabled: l.target.checked }),
+                          disabled: v
                         }
                       ),
-                      /* @__PURE__ */ e("span", { className: "toggle-slider" })
+                      /* @__PURE__ */ e("span", { className: "nice-live-streaming__toggle-slider" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ t("div", { className: "destination-config", children: [
+                  /* @__PURE__ */ t("div", { className: "nice-live-streaming__destination-config", children: [
                     /* @__PURE__ */ t("label", { children: [
-                      "Server URL",
+                      r("liveStreaming.serverUrl", "Server URL"),
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "text",
-                          value: a.url,
-                          onChange: (o) => G(a.id, { url: o.target.value }),
-                          placeholder: "rtmp://...",
-                          disabled: h
+                          value: i.url,
+                          onChange: (l) => Y(i.id, { url: l.target.value }),
+                          placeholder: r("liveStreaming.rtmp", "rtmp://..."),
+                          disabled: v
                         }
                       )
                     ] }),
                     /* @__PURE__ */ t("label", { children: [
-                      "Stream Key",
+                      r("liveStreaming.streamKey", "Stream Key"),
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "password",
-                          value: a.streamKey || "",
-                          onChange: (o) => G(a.id, { streamKey: o.target.value }),
-                          placeholder: "Enter stream key",
-                          disabled: h
+                          value: i.streamKey || "",
+                          onChange: (l) => Y(i.id, { streamKey: l.target.value }),
+                          placeholder: r("liveStreaming.enterStreamKey", "Enter stream key"),
+                          disabled: v
                         }
                       )
                     ] })
@@ -1928,40 +2020,40 @@ const fe = {
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      className: "remove-button",
-                      onClick: () => W(a.id),
-                      disabled: h,
-                      children: "Remove"
+                      className: "nice-live-streaming__remove-button",
+                      onClick: () => q(i.id),
+                      disabled: v,
+                      children: r("liveStreaming.remove", "Remove")
                     }
                   )
-                ] }, a.id);
+                ] }, i.id);
               }),
-              s.destinations.length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No destinations configured" })
+              s.destinations.length === 0 && /* @__PURE__ */ e("p", { className: "nice-live-streaming__empty-message", children: r("liveStreaming.noDestinationsConfigured", "No destinations configured") })
             ] })
           ] }),
-          N === "settings" && /* @__PURE__ */ t("div", { className: "settings-panel", children: [
-            /* @__PURE__ */ t("div", { className: "setting-section", children: [
-              /* @__PURE__ */ e("h4", { children: "Video" }),
+          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__ */ t("label", { children: [
-                "Resolution",
+                r("liveStreaming.resolution", "Resolution"),
                 /* @__PURE__ */ t(
                   "select",
                   {
                     value: `${s.settings.video.resolution.width}x${s.settings.video.resolution.height}`,
-                    onChange: (a) => {
-                      const [r, o] = a.target.value.split("x").map(Number);
-                      f({
+                    onChange: (i) => {
+                      const [c, l] = i.target.value.split("x").map(Number);
+                      _({
                         settings: {
                           ...s.settings,
-                          video: { ...s.settings.video, resolution: { width: r, height: o } }
+                          video: { ...s.settings.video, resolution: { width: c, height: l } }
                         },
                         layout: {
                           ...s.layout,
-                          canvas: { ...s.layout.canvas, width: r, height: o }
+                          canvas: { ...s.layout.canvas, width: c, height: l }
                         }
                       });
                     },
-                    disabled: h,
+                    disabled: v,
                     children: [
                       /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
                       /* @__PURE__ */ e("option", { value: "1280x720", children: "720p (1280x720)" }),
@@ -1971,21 +2063,21 @@ const fe = {
                 )
               ] }),
               /* @__PURE__ */ t("label", { children: [
-                "Frame Rate",
+                r("liveStreaming.frameRate", "Frame Rate"),
                 /* @__PURE__ */ t(
                   "select",
                   {
                     value: s.settings.video.frameRate,
-                    onChange: (a) => f({
+                    onChange: (i) => _({
                       settings: {
                         ...s.settings,
                         video: {
                           ...s.settings.video,
-                          frameRate: parseInt(a.target.value)
+                          frameRate: parseInt(i.target.value)
                         }
                       }
                     }),
-                    disabled: h,
+                    disabled: v,
                     children: [
                       /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
                       /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
@@ -2001,18 +2093,18 @@ const fe = {
                   {
                     type: "number",
                     value: s.settings.video.bitrate,
-                    onChange: (a) => f({
+                    onChange: (i) => _({
                       settings: {
                         ...s.settings,
                         video: {
                           ...s.settings.video,
-                          bitrate: parseInt(a.target.value) || 6e3
+                          bitrate: parseInt(i.target.value) || 6e3
                         }
                       }
                     }),
                     min: "1000",
                     max: "50000",
-                    disabled: h
+                    disabled: v
                   }
                 )
               ] }),
@@ -2023,40 +2115,40 @@ const fe = {
                   {
                     type: "number",
                     value: s.settings.video.keyframe,
-                    onChange: (a) => f({
+                    onChange: (i) => _({
                       settings: {
                         ...s.settings,
                         video: {
                           ...s.settings.video,
-                          keyframe: parseInt(a.target.value) || 2
+                          keyframe: parseInt(i.target.value) || 2
                         }
                       }
                     }),
                     min: "1",
                     max: "10",
-                    disabled: h
+                    disabled: v
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ t("div", { className: "setting-section", children: [
-              /* @__PURE__ */ e("h4", { children: "Audio" }),
+            /* @__PURE__ */ t("div", { className: "nice-live-streaming__setting-section", children: [
+              /* @__PURE__ */ e("h4", { children: r("liveStreaming.audio", "Audio") }),
               /* @__PURE__ */ t("label", { children: [
-                "Sample Rate",
+                r("liveStreaming.sampleRate", "Sample Rate"),
                 /* @__PURE__ */ t(
                   "select",
                   {
                     value: s.settings.audio.sampleRate,
-                    onChange: (a) => f({
+                    onChange: (i) => _({
                       settings: {
                         ...s.settings,
                         audio: {
                           ...s.settings.audio,
-                          sampleRate: parseInt(a.target.value)
+                          sampleRate: parseInt(i.target.value)
                         }
                       }
                     }),
-                    disabled: h,
+                    disabled: v,
                     children: [
                       /* @__PURE__ */ e("option", { value: "44100", children: "44.1 kHz" }),
                       /* @__PURE__ */ e("option", { value: "48000", children: "48 kHz" })
@@ -2070,13 +2162,13 @@ const fe = {
                   "select",
                   {
                     value: s.settings.audio.bitrate,
-                    onChange: (a) => f({
+                    onChange: (i) => _({
                       settings: {
                         ...s.settings,
-                        audio: { ...s.settings.audio, bitrate: parseInt(a.target.value) }
+                        audio: { ...s.settings.audio, bitrate: parseInt(i.target.value) }
                       }
                     }),
-                    disabled: h,
+                    disabled: v,
                     children: [
                       /* @__PURE__ */ e("option", { value: "96", children: "96 kbps" }),
                       /* @__PURE__ */ e("option", { value: "128", children: "128 kbps" }),
@@ -2091,86 +2183,86 @@ const fe = {
         ] })
       ] })
     ] }),
-    h && /* @__PURE__ */ e("footer", { className: "streaming__footer", children: /* @__PURE__ */ t("div", { className: "footer-stats", children: [
-      /* @__PURE__ */ t("span", { className: "stat", children: [
+    v && /* @__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: "value", children: [
-          y.cpuUsage.toFixed(1),
+        /* @__PURE__ */ t("span", { className: "nice-live-streaming__value", children: [
+          N.cpuUsage.toFixed(1),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ t("span", { className: "stat", children: [
-        /* @__PURE__ */ e("label", { children: "Memory" }),
-        /* @__PURE__ */ t("span", { className: "value", children: [
-          y.memoryUsage.toFixed(1),
+      /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat", children: [
+        /* @__PURE__ */ e("label", { children: r("liveStreaming.memory", "Memory") }),
+        /* @__PURE__ */ t("span", { className: "nice-live-streaming__value", children: [
+          N.memoryUsage.toFixed(1),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ t("span", { className: "stat", children: [
-        /* @__PURE__ */ e("label", { children: "Dropped" }),
-        /* @__PURE__ */ e("span", { className: "value", children: y.droppedFrames })
+      /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat", children: [
+        /* @__PURE__ */ e("label", { children: r("liveStreaming.dropped", "Dropped") }),
+        /* @__PURE__ */ e("span", { className: "nice-live-streaming__value", children: N.droppedFrames })
       ] }),
-      /* @__PURE__ */ t("span", { className: "stat", children: [
-        /* @__PURE__ */ e("label", { children: "Peak Viewers" }),
-        /* @__PURE__ */ e("span", { className: "value", children: y.peakViewers })
+      /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat", children: [
+        /* @__PURE__ */ e("label", { children: r("liveStreaming.peakViewers", "Peak Viewers") }),
+        /* @__PURE__ */ e("span", { className: "nice-live-streaming__value", children: N.peakViewers })
       ] })
     ] }) }),
-    B && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ t("div", { className: "modal", children: [
-      /* @__PURE__ */ t("div", { className: "modal-header", children: [
-        /* @__PURE__ */ e("h3", { children: "Add Source" }),
+    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(
           "button",
           {
-            "aria-label": "Close",
-            className: "close-button",
+            "aria-label": r("liveStreaming.close", "Close"),
+            className: "nice-live-streaming__close-button",
             onClick: () => C(!1),
-            children: /* @__PURE__ */ e(u, { name: "close", size: 16 })
+            children: /* @__PURE__ */ e(m, { name: "close", size: 16 })
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "source-type-grid", children: re.map((a) => /* @__PURE__ */ t(
+      /* @__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(
         "button",
         {
-          className: "source-type-button",
-          onClick: () => Q(a.type),
+          className: "nice-live-streaming__source-type-button",
+          onClick: () => X(i.type),
           children: [
-            /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: a.icon, size: 24 }) }),
-            /* @__PURE__ */ e("span", { className: "name", children: a.name })
+            /* @__PURE__ */ e("span", { className: "nice-live-streaming__icon", children: /* @__PURE__ */ e(m, { name: i.icon, size: 24 }) }),
+            /* @__PURE__ */ e("span", { className: "nice-live-streaming__name", children: i.name })
           ]
         },
-        a.type
+        i.type
       )) }) })
     ] }) }),
-    j && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ t("div", { className: "modal", children: [
-      /* @__PURE__ */ t("div", { className: "modal-header", children: [
-        /* @__PURE__ */ e("h3", { children: "Add Destination" }),
+    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(
           "button",
           {
-            "aria-label": "Close",
-            className: "close-button",
-            onClick: () => K(!1),
-            children: /* @__PURE__ */ e(u, { name: "close", size: 16 })
+            "aria-label": r("liveStreaming.close", "Close"),
+            className: "nice-live-streaming__close-button",
+            onClick: () => W(!1),
+            children: /* @__PURE__ */ e(m, { name: "close", size: 16 })
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "platform-grid", children: ce.map((a) => /* @__PURE__ */ t(
+      /* @__PURE__ */ e("div", { className: "nice-live-streaming__modal-content", children: /* @__PURE__ */ e("div", { className: "nice-live-streaming__platform-grid", children: de.map((i) => /* @__PURE__ */ t(
         "button",
         {
-          className: "platform-button",
-          onClick: () => U(a.platform),
+          className: "nice-live-streaming__platform-button",
+          onClick: () => V(i.platform),
           children: [
-            /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: a.icon, size: 24 }) }),
-            /* @__PURE__ */ e("span", { className: "name", children: a.name })
+            /* @__PURE__ */ e("span", { className: "nice-live-streaming__icon", children: /* @__PURE__ */ e(m, { name: i.icon, size: 24 }) }),
+            /* @__PURE__ */ e("span", { className: "nice-live-streaming__name", children: i.name })
           ]
         },
-        a.platform
+        i.platform
       )) }) })
     ] }) })
   ] });
 };
 export {
-  _e as NiceLiveStreaming,
-  Ie as NiceScreenRecorder,
+  Ie as NiceLiveStreaming,
+  Te as NiceScreenRecorder,
   ze as NiceVideoEditor
 };