@nice2dev/ui-video 1.2.0 → 1.2.2

package/dist/index.mjs

@@ -1,9 +1,9 @@
-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 ce } 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 M } from "@nice2dev/ui-core";
+import { useState as f, useRef as I, useEffect as le, useCallback as ue } from "react";
 const fe = {
-  id: $(),
+  id: M(),
   name: "Untitled Project",
   resolution: { width: 1920, height: 1080, label: "1080p" },
   frameRate: 30,
@@ -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 = "",
+  project: $,
+  onProjectChange: R,
+  onExport: F,
+  onAssetUpload: L,
+  className: O = "",
   tutorial: T
 }) => {
-  const [d, s] = b(R || fe), [A, N] = b(
+  const { t: u } = me(), [n, s] = f($ || fe), [A, y] = f(
     "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);
+  ), [q, h] = f(null), [k, N] = f(null), [D, w] = f(0), [B, K] = f(!1), [S, G] = f(1), [W, z] = f(!0), [E, U] = f(null), ie = I(null), te = I(null), x = I(null);
+  le(() => {
+    $ && s($);
+  }, [$]), le(() => () => {
+    x.current && clearInterval(x.current);
   }, []);
-  const g = de(
-    (n) => {
-      const l = { ...d, ...n };
-      s(l), z == null || z(l);
+  const b = ue(
+    (r) => {
+      const c = { ...n, ...r };
+      s(c), R == null || R(c);
     },
-    [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 = {
-        id: $(),
-        type: c,
-        name: i.name,
-        url: URL.createObjectURL(i),
-        size: i.size
-      }, l.push(m);
+    [n, R]
+  ), g = async (r) => {
+    const c = [];
+    for (const a of Array.from(r)) {
+      const d = a.type.startsWith("video/") ? "video" : a.type.startsWith("audio/") ? "audio" : "image";
+      let v;
+      L ? v = await L(a) : v = {
+        id: M(),
+        type: d,
+        name: a.name,
+        url: URL.createObjectURL(a),
+        size: a.size
+      }, c.push(v);
     }
-    g({ assets: [...d.assets, ...l] });
-  }, U = (n) => {
-    const l = {
-      id: $(),
-      type: n,
-      name: `${n.charAt(0).toUpperCase() + n.slice(1)} ${d.tracks.filter((i) => i.type === n).length + 1}`,
+    b({ assets: [...n.assets, ...c] });
+  }, V = (r) => {
+    const c = {
+      id: M(),
+      type: r,
+      name: `${r.charAt(0).toUpperCase() + r.slice(1)} ${n.tracks.filter((a) => a.type === r).length + 1}`,
       items: [],
       muted: !1,
       locked: !1,
       visible: !0
     };
-    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)
+    b({ tracks: [...n.tracks, c] });
+  }, Y = (r) => {
+    b({ tracks: n.tracks.filter((c) => c.id !== r) }), q === r && h(null);
+  }, H = (r) => {
+    b({
+      tracks: n.tracks.map((c) => c.id === r ? { ...c, muted: !c.muted } : c)
     });
-  }, Q = (n) => {
-    g({
-      tracks: d.tracks.map((l) => l.id === n ? { ...l, locked: !l.locked } : l)
+  }, X = (r) => {
+    b({
+      tracks: n.tracks.map((c) => c.id === r ? { ...c, locked: !c.locked } : c)
     });
-  }, x = (n, l) => {
-    const i = d.tracks.find((v) => v.id === n);
-    if (!i || i.locked)
+  }, C = (r, c) => {
+    const a = n.tracks.find((_) => _.id === r);
+    if (!a || a.locked)
       return;
-    const c = i.items[i.items.length - 1], m = c ? c.startTime + c.duration : 0, p = {
-      id: $(),
-      assetId: l.id,
-      type: l.type,
-      startTime: m,
-      duration: l.duration || 5,
+    const d = a.items[a.items.length - 1], v = d ? d.startTime + d.duration : 0, p = {
+      id: M(),
+      assetId: c.id,
+      type: c.type,
+      startTime: v,
+      duration: c.duration || 5,
       offset: 0,
       properties: {
         x: 0,
@@ -139,47 +139,47 @@ const fe = {
       effects: [],
       transitions: []
     };
-    g({
-      tracks: d.tracks.map(
-        (v) => v.id === n ? { ...v, items: [...v.items, p] } : v
+    b({
+      tracks: n.tracks.map(
+        (_) => _.id === r ? { ..._, items: [..._.items, p] } : _
       )
     });
-  }, Y = (n, l, i) => {
-    const c = {
-      id: $(),
-      type: i,
-      name: i.charAt(0).toUpperCase() + i.slice(1),
-      parameters: te(i)
+  }, Z = (r, c, a) => {
+    const d = {
+      id: M(),
+      type: a,
+      name: a.charAt(0).toUpperCase() + a.slice(1),
+      parameters: ne(a)
     };
-    g({
-      tracks: d.tracks.map(
-        (m) => m.id === n ? {
-          ...m,
-          items: m.items.map(
-            (p) => p.id === l ? { ...p, effects: [...p.effects, c] } : p
+    b({
+      tracks: n.tracks.map(
+        (v) => v.id === r ? {
+          ...v,
+          items: v.items.map(
+            (p) => p.id === c ? { ...p, effects: [...p.effects, d] } : p
           )
-        } : m
+        } : v
       )
     });
-  }, E = (n, l, i, c) => {
-    const m = {
-      id: $(),
-      type: i,
+  }, P = (r, c, a, d) => {
+    const v = {
+      id: M(),
+      type: a,
       duration: 0.5,
-      position: c
+      position: d
     };
-    g({
-      tracks: d.tracks.map(
-        (p) => p.id === n ? {
+    b({
+      tracks: n.tracks.map(
+        (p) => p.id === r ? {
           ...p,
           items: p.items.map(
-            (v) => v.id === l ? { ...v, transitions: [...v.transitions, m] } : v
+            (_) => _.id === c ? { ..._, transitions: [..._.transitions, v] } : _
           )
         } : p
       )
     });
-  }, te = (n) => {
-    switch (n) {
+  }, ne = (r) => {
+    switch (r) {
       case "blur":
         return { radius: 5 };
       case "brightness":
@@ -201,102 +201,105 @@ 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((r) => {
+        const c = Math.max(
+          ...n.tracks.flatMap((a) => a.items.map((d) => d.startTime + d.duration)),
           0
         );
-        return n >= l ? (clearInterval(S.current), B(!1), 0) : n + 1 / d.frameRate;
+        return r >= c ? (clearInterval(x.current), K(!1), 0) : r + 1 / n.frameRate;
       });
-    }, 1e3 / d.frameRate), B(!0));
-  }, Z = (n) => {
-    w(Math.max(0, n));
-  }, J = async () => {
-    if (P) {
-      L(0);
+    }, 1e3 / n.frameRate), K(!0));
+  }, J = (r) => {
+    w(Math.max(0, r));
+  }, Q = async () => {
+    if (F) {
+      U(0);
       try {
-        const n = setInterval(() => {
-          L((l) => l !== null && l < 90 ? l + Math.random() * 10 : l);
+        const r = setInterval(() => {
+          U((c) => c !== null && c < 90 ? c + Math.random() * 10 : c);
         }, 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(n, n.settings.video.codec), clearInterval(r), U(100), setTimeout(() => U(null), 2e3);
+      } catch (r) {
+        U(null), console.error("Export failed:", r);
       }
     }
-  }, 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 = (r) => {
+    const c = Math.floor(r / 60), a = Math.floor(r % 60), d = Math.floor(r % 1 * n.frameRate);
+    return `${c.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}:${d.toString().padStart(2, "0")}`;
+  }, j = () => {
+    for (const r of n.tracks) {
+      const c = r.items.find((a) => a.id === k);
+      if (c)
+        return { track: r, item: c };
     }
     return null;
-  }, ne = /* @__PURE__ */ t("header", { className: "video-editor__header", children: [
-    /* @__PURE__ */ t("div", { className: "header__project-info", children: [
+  }, re = /* @__PURE__ */ t("header", { className: "nice-video-studio__header", children: [
+    /* @__PURE__ */ t("div", { className: "nice-video-studio__header-project-info", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "text",
-          value: d.name,
-          onChange: (n) => g({ name: n.target.value }),
-          className: "project-name-input"
+          value: n.name,
+          onChange: (r) => b({ name: r.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: [
+        n.resolution.width,
         "x",
-        d.resolution.height,
+        n.resolution.height,
         " • ",
-        d.frameRate,
+        n.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((r) => /* @__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 === r ? "nice-video-studio__tab-button--active" : ""}`,
+        onClick: () => y(r),
+        children: r.charAt(0).toUpperCase() + r.slice(1)
       },
-      n
+      r
     )) }),
-    /* @__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: E !== null,
+        children: E !== null ? u("videoEditor.exporting", "Exporting {exportProgress}%").replace(
+          "{exportProgress}",
+          String(Math.round(E))
+        ) : u("videoEditor.export", "Export")
       }
     ) })
   ] }), se = k && A !== "export" ? (() => {
-    const n = q();
-    if (!n)
+    const r = j();
+    if (!r)
       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: c, item: a } = r;
+    return /* @__PURE__ */ t("div", { className: "nice-video-studio__item-inspector", children: [
+      /* @__PURE__ */ e("h4", { children: u("videoEditor.itemProperties", "Item Properties") }),
+      /* @__PURE__ */ t("div", { className: "nice-video-studio__inspector-section", children: [
         /* @__PURE__ */ t("label", { children: [
-          "Start Time",
+          u("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 ? {
+              value: a.startTime,
+              onChange: (d) => {
+                const v = parseFloat(d.target.value);
+                b({
+                  tracks: n.tracks.map(
+                    (p) => p.id === c.id ? {
                       ...p,
                       items: p.items.map(
-                        (v) => v.id === i.id ? { ...v, startTime: m } : v
+                        (_) => _.id === a.id ? { ..._, startTime: v } : _
                       )
                     } : p
                   )
@@ -306,21 +309,21 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          "Duration",
+          u("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 ? {
+              value: a.duration,
+              onChange: (d) => {
+                const v = parseFloat(d.target.value);
+                b({
+                  tracks: n.tracks.map(
+                    (p) => p.id === c.id ? {
                       ...p,
                       items: p.items.map(
-                        (v) => v.id === i.id ? { ...v, duration: m } : v
+                        (_) => _.id === a.id ? { ..._, duration: v } : _
                       )
                     } : p
                   )
@@ -330,7 +333,7 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          "Opacity",
+          u("videoEditor.opacity", "Opacity"),
           /* @__PURE__ */ e(
             "input",
             {
@@ -338,18 +341,18 @@ 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 ? {
+              value: a.properties.opacity ?? 1,
+              onChange: (d) => {
+                const v = parseFloat(d.target.value);
+                b({
+                  tracks: n.tracks.map(
+                    (p) => p.id === c.id ? {
                       ...p,
                       items: p.items.map(
-                        (v) => v.id === i.id ? {
-                          ...v,
-                          properties: { ...v.properties, opacity: m }
-                        } : v
+                        (_) => _.id === a.id ? {
+                          ..._,
+                          properties: { ..._.properties, opacity: v }
+                        } : _
                       )
                     } : p
                   )
@@ -359,244 +362,264 @@ const fe = {
           )
         ] })
       ] }),
-      /* @__PURE__ */ t("h4", { children: [
-        "Effects (",
-        i.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("h4", { children: u("videoEditor.effects", "Effects ({effects})").replace(
+        "{effects}",
+        String(a.effects.length)
+      ) }),
+      /* @__PURE__ */ e("div", { className: "nice-video-studio__effects-list", children: a.effects.map((d) => /* @__PURE__ */ e("div", { className: "nice-video-studio__effect-badge", children: d.name }, d.id)) })
     ] });
-  })() : null, 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: u("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": u("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: (r) => r.target.files && g(r.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: u("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: n.assets.map((r) => /* @__PURE__ */ t(
       "div",
       {
-        className: "asset-item",
+        className: "nice-video-studio__asset-item",
         draggable: !0,
-        onDragStart: (l) => l.dataTransfer.setData("assetId", n.id),
+        onDragStart: (c) => c.dataTransfer.setData("assetId", r.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: r.thumbnail ? /* @__PURE__ */ e("img", { src: r.thumbnail, alt: r.name }) : /* @__PURE__ */ e("span", { className: "nice-video-studio__asset-type-icon", children: /* @__PURE__ */ e(
+            m,
             {
-              name: n.type === "video" ? "video" : n.type === "audio" ? "music" : "image",
+              name: r.type === "video" ? "video" : r.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: r.name }),
+            /* @__PURE__ */ t("span", { className: "nice-video-studio__asset-meta", children: [
+              (r.size / 1024 / 1024).toFixed(1),
               "MB"
             ] })
           ] })
         ]
       },
-      n.id
+      r.id
     )) })
-  ] }) : void 0, r = /* @__PURE__ */ e("div", { className: "video-editor__preview-area", children: /* @__PURE__ */ t("div", { className: "preview-container", children: [
+  ] }) : void 0, o = /* @__PURE__ */ e("div", { className: "nice-video-studio__preview-area", children: /* @__PURE__ */ t("div", { className: "nice-video-studio__preview-container", children: [
     /* @__PURE__ */ t(
       "div",
       {
-        className: "preview-canvas",
-        style: { aspectRatio: `${d.resolution.width}/${d.resolution.height}` },
+        className: "nice-video-studio__preview-canvas",
+        style: { aspectRatio: `${n.resolution.width}/${n.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": u("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": u("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 / n.frameRate),
+          "aria-label": u("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 ? u("videoEditor.pause", "Pause") : u("videoEditor.play", "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 / n.frameRate),
+          "aria-label": u("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: u("videoEditor.videoTrack", "+ Video Track") }),
+          /* @__PURE__ */ e("button", { onClick: () => V("audio"), children: u("videoEditor.audioTrack", "+ Audio Track") }),
+          /* @__PURE__ */ e("button", { onClick: () => V("text"), children: u("videoEditor.textTrack", "+ Text Track") })
         ] }),
-        /* @__PURE__ */ t("div", { className: "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, S - 0.25)), children: "-" }),
           /* @__PURE__ */ t("span", { children: [
-            Math.round(C * 100),
+            Math.round(S * 100),
             "%"
           ] }),
-          /* @__PURE__ */ e("button", { onClick: () => j(Math.min(4, C + 0.25)), children: "+" })
+          /* @__PURE__ */ e("button", { onClick: () => G(Math.min(4, S + 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 / S) }).map((r, c) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: "nice-video-studio__ruler-mark",
+            style: { left: `${c * 50 * S}px` },
+            children: ee(c)
+          },
+          c
+        )) }),
+        /* @__PURE__ */ e(
           "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-playhead",
+            style: { left: `${D * 50 * S}px` }
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "nice-video-studio__timeline-tracks", children: n.tracks.map((r) => /* @__PURE__ */ t(
+          "div",
+          {
+            className: `nice-video-studio__timeline-track ${q === r.id ? "nice-video-studio__timeline-track--selected" : ""} ${r.locked ? "nice-video-studio__timeline-track--locked" : ""}`,
+            onClick: () => h(r.id),
+            onDrop: (c) => {
+              c.preventDefault();
+              const a = c.dataTransfer.getData("assetId"), d = n.assets.find((v) => v.id === a);
+              d && C(r.id, d);
             },
-            onDragOver: (l) => l.preventDefault(),
+            onDragOver: (c) => c.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: r.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 ${r.muted ? "nice-video-studio__track-toggle--active" : ""}`,
+                      onClick: (c) => {
+                        c.stopPropagation(), H(r.id);
                       },
-                      children: /* @__PURE__ */ e(u, { name: n.muted ? "volume-off" : "volume", size: 14 })
+                      children: /* @__PURE__ */ e(m, { name: r.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 ${r.locked ? "nice-video-studio__track-toggle--active" : ""}`,
+                      onClick: (c) => {
+                        c.stopPropagation(), X(r.id);
                       },
-                      children: /* @__PURE__ */ e(u, { name: n.locked ? "lock" : "unlock", size: 14 })
+                      children: /* @__PURE__ */ e(m, { name: r.locked ? "lock" : "unlock", size: 14 })
                     }
                   ),
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      onClick: (l) => {
-                        l.stopPropagation(), G(n.id);
+                      onClick: (c) => {
+                        c.stopPropagation(), Y(r.id);
                       },
-                      "aria-label": "Remove track",
-                      children: /* @__PURE__ */ e(u, { name: "trash", size: 14 })
+                      "aria-label": u("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: r.items.map((c) => {
+                const a = n.assets.find((d) => d.id === c.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--${c.type} ${k === c.id ? "nice-video-studio__track-item--selected" : ""}`,
                     style: {
-                      left: `${l.startTime * 50 * C}px`,
-                      width: `${l.duration * 50 * C}px`
+                      left: `${c.startTime * 50 * S}px`,
+                      width: `${c.duration * 50 * S}px`
                     },
-                    onClick: (c) => {
-                      c.stopPropagation(), y(l.id);
+                    onClick: (d) => {
+                      d.stopPropagation(), N(c.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: (a == null ? void 0 : a.name) || u("videoEditor.untitled", "Untitled") }),
+                      c.transitions.length > 0 && /* @__PURE__ */ e("span", { className: "nice-video-studio__item-transitions", children: /* @__PURE__ */ e(m, { name: "wand", size: 12 }) }),
+                      c.effects.length > 0 && /* @__PURE__ */ e("span", { className: "nice-video-studio__item-effects", children: /* @__PURE__ */ e(m, { name: "palette", size: 12 }) })
                     ]
                   },
-                  l.id
+                  c.id
                 );
               }) })
             ]
           },
-          n.id
+          r.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: u("videoEditor.videoEffects", "Video Effects") }),
+      /* @__PURE__ */ e("p", { className: "nice-video-studio__panel-hint", children: u("videoEditor.selectAClipToApply", "Select a clip to apply effects") }),
+      /* @__PURE__ */ e("div", { className: "nice-video-studio__effects-grid", children: be.map((r) => /* @__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 c = j();
+            c && Z(c.track.id, c.item.id, r.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: r.icon, size: 16 }) }),
+            /* @__PURE__ */ e("span", { className: "nice-video-studio__effect-name", children: r.name })
           ]
         },
-        n.type
+        r.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: u("videoEditor.transitions", "Transitions") }),
+      /* @__PURE__ */ e("p", { className: "nice-video-studio__panel-hint", children: u("videoEditor.selectAClipAndAdd", "Select a clip and add transitions between clips") }),
+      /* @__PURE__ */ e("div", { className: "nice-video-studio__transitions-grid", children: ye.map((r) => /* @__PURE__ */ t("div", { className: "nice-video-studio__transition-preset", children: [
+        /* @__PURE__ */ e("span", { className: "nice-video-studio__transition-name", children: r.name }),
+        /* @__PURE__ */ t("div", { className: "nice-video-studio__transition-buttons", children: [
           /* @__PURE__ */ e(
             "button",
             {
               disabled: !k,
               onClick: () => {
-                const l = q();
-                l && E(l.track.id, l.item.id, n.type, "start");
+                const c = j();
+                c && P(c.track.id, c.item.id, r.type, "start");
               },
-              children: "In"
+              children: u("videoEditor.in", "In")
             }
           ),
           /* @__PURE__ */ e(
@@ -604,27 +627,27 @@ const fe = {
             {
               disabled: !k,
               onClick: () => {
-                const l = q();
-                l && E(l.track.id, l.item.id, n.type, "end");
+                const c = j();
+                c && P(c.track.id, c.item.id, r.type, "end");
               },
-              children: "Out"
+              children: u("videoEditor.out", "Out")
             }
           )
         ] })
-      ] }, n.type)) })
+      ] }, r.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: u("videoEditor.exportSettings", "Export Settings") }),
+      /* @__PURE__ */ t("div", { className: "nice-video-studio__export-settings", children: [
+        /* @__PURE__ */ t("div", { className: "nice-video-studio__setting-group", children: [
+          /* @__PURE__ */ e("label", { children: u("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: `${n.resolution.width}x${n.resolution.height}`,
+              onChange: (r) => {
+                const [c, a] = r.target.value.split("x").map(Number);
+                b({ resolution: { width: c, height: a } });
               },
               children: [
                 /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
@@ -635,13 +658,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: u("videoEditor.frameRate", "Frame Rate") }),
           /* @__PURE__ */ t(
             "select",
             {
-              value: d.frameRate,
-              onChange: (n) => g({ frameRate: parseInt(n.target.value) }),
+              value: n.frameRate,
+              onChange: (r) => b({ frameRate: parseInt(r.target.value) }),
               children: [
                 /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
                 /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
@@ -651,43 +674,43 @@ 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: u("videoEditor.videoCodec", "Video Codec") }),
           /* @__PURE__ */ t(
             "select",
             {
-              value: d.settings.video.codec,
-              onChange: (n) => g({
+              value: n.settings.video.codec,
+              onChange: (r) => b({
                 settings: {
-                  ...d.settings,
+                  ...n.settings,
                   video: {
-                    ...d.settings.video,
-                    codec: n.target.value
+                    ...n.settings.video,
+                    codec: r.target.value
                   }
                 }
               }),
               children: [
-                /* @__PURE__ */ e("option", { value: "h264", children: "H.264 (Best Compatibility)" }),
-                /* @__PURE__ */ e("option", { value: "h265", children: "H.265/HEVC (Smaller Size)" }),
-                /* @__PURE__ */ e("option", { value: "vp9", children: "VP9 (Web Optimized)" }),
-                /* @__PURE__ */ e("option", { value: "av1", children: "AV1 (Future Standard)" })
+                /* @__PURE__ */ e("option", { value: "h264", children: u("videoEditor.h264BestCompatibility", "H.264 (Best Compatibility)") }),
+                /* @__PURE__ */ e("option", { value: "h265", children: u("videoEditor.h265HevcSmallerSize", "H.265/HEVC (Smaller Size)") }),
+                /* @__PURE__ */ e("option", { value: "vp9", children: u("videoEditor.vp9WebOptimized", "VP9 (Web Optimized)") }),
+                /* @__PURE__ */ e("option", { value: "av1", children: u("videoEditor.av1FutureStandard", "AV1 (Future Standard)") })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ t("div", { className: "setting-group", children: [
-          /* @__PURE__ */ e("label", { children: "Video Bitrate (Mbps)" }),
+        /* @__PURE__ */ t("div", { className: "nice-video-studio__setting-group", children: [
+          /* @__PURE__ */ e("label", { children: u("videoEditor.videoBitrateMbps", "Video Bitrate (Mbps)") }),
           /* @__PURE__ */ e(
             "input",
             {
               type: "number",
-              value: d.settings.video.bitrate / 1e3,
-              onChange: (n) => g({
+              value: n.settings.video.bitrate / 1e3,
+              onChange: (r) => b({
                 settings: {
-                  ...d.settings,
+                  ...n.settings,
                   video: {
-                    ...d.settings.video,
-                    bitrate: parseFloat(n.target.value) * 1e3
+                    ...n.settings.video,
+                    bitrate: parseFloat(r.target.value) * 1e3
                   }
                 }
               }),
@@ -700,33 +723,42 @@ 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: E !== null,
+          children: E !== null ? u("videoEditor.exporting2", "Exporting... {exportProgress}%").replace(
+            "{exportProgress}",
+            String(Math.round(E))
+          ) : u("videoEditor.exportVideo", "Export Video")
         }
       ),
-      _ !== null && /* @__PURE__ */ e("div", { className: "export-progress", children: /* @__PURE__ */ e("div", { className: "export-progress-bar", style: { width: `${_}%` } }) })
+      E !== null && /* @__PURE__ */ e("div", { className: "nice-video-studio__export-progress", children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: "nice-video-studio__export-progress-bar",
+          style: { width: `${E}%` }
+        }
+      ) })
     ] })
   ] });
   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,
+      toolbar: re,
+      sidebar: i,
       rightSidebar: se ?? void 0,
-      bottomPanel: o,
+      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(T, Ne) }) }),
+        o
       ]
     }
   );
-}, ye = {
+}, ke = {
   video: {
     source: "screen",
     showCursor: !0,
@@ -743,43 +775,43 @@ const fe = {
     format: "webm",
     quality: "high"
   }
-}, Ie = ({
-  options: R,
-  onRecordingStart: z,
-  onRecordingStop: P,
-  onRecordingPause: F,
-  onRecordingResume: V,
+}, Ee = ({
+  options: $,
+  onRecordingStart: R,
+  onRecordingStop: F,
+  onRecordingPause: L,
+  onRecordingResume: O,
   onError: T,
-  className: d = ""
+  className: u = ""
 }) => {
-  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 r, c;
+  const { t: n } = me(), [s, A] = f({
+    ...ke,
+    ...$
+  }), [y, q] = f(null), [h, k] = f("idle"), [N, D] = f([]), [w, B] = f(null), [K, S] = f(null), [G, W] = f(!1), [z, E] = f(!1), [U, ie] = f(
     "pen"
-  ), [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] = f("var(--nice-danger, #ff0000)"), b = I(null), g = I([]), V = I(null), Y = I(null), H = I(null), X = I(0);
+  le(() => () => {
+    w && w.getTracks().forEach((a) => a.stop()), H.current && clearInterval(H.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 C = (a) => {
+    A((d) => ({
+      ...d,
+      ...a,
+      video: { ...d.video, ...a.video },
+      audio: { ...d.audio, ...a.audio },
+      output: { ...d.output, ...a.output }
     }));
-  }, Y = async () => {
+  }, Z = async () => {
     try {
       k("preparing");
-      const i = {
+      const a = {
         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(a);
       if (s.audio.enabled && (s.audio.source === "microphone" || s.audio.source === "both"))
         try {
           (await navigator.mediaDevices.getUserMedia({
@@ -787,35 +819,35 @@ 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((p) => d.addTrack(p));
+        } catch (v) {
+          console.warn("Could not access microphone:", v);
         }
-      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 (a) {
+      k("error"), T == null || T(a instanceof Error ? a : 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));
-    C(null);
+  }, P = async () => {
+    w || await Z();
+    for (let a = 3; a > 0; a--)
+      S(a), await new Promise((d) => setTimeout(d, 1e3));
+    S(null);
     try {
-      const i = w || await te();
-      if (!i)
+      const a = w || await ne();
+      if (!a)
         throw new Error("No stream available");
-      const c = ne(s.output.format), m = new MediaRecorder(i, {
-        mimeType: c,
+      const d = re(s.output.format), v = new MediaRecorder(a, {
+        mimeType: d,
         videoBitsPerSecond: se(s.output.quality)
       });
-      f.current = [], m.ondataavailable = (v) => {
-        v.data.size > 0 && f.current.push(v.data);
-      }, m.onstop = () => {
-        const v = new Blob(f.current, { type: c });
-        N && (P == null || P({ ...N, status: "stopped" }, v));
-      }, g.current = m, m.start(1e3), Q.current = Date.now();
+      g.current = [], v.ondataavailable = (_) => {
+        _.data.size > 0 && g.current.push(_.data);
+      }, v.onstop = () => {
+        const _ = new Blob(g.current, { type: d });
+        y && (F == null || F({ ...y, status: "stopped" }, _));
+      }, b.current = v, v.start(1e3), X.current = Date.now();
       const p = {
-        id: $(),
+        id: M(),
         status: "recording",
         startTime: /* @__PURE__ */ new Date(),
         duration: 0,
@@ -823,41 +855,44 @@ const fe = {
         options: s,
         chunks: []
       };
-      H(p), k("recording"), z == null || z(p), W.current = setInterval(() => {
-        H(
-          (v) => v ? {
-            ...v,
-            duration: (Date.now() - Q.current) / 1e3,
-            size: f.current.reduce((ue, me) => ue + me.size, 0)
+      q(p), k("recording"), R == null || R(p), H.current = setInterval(() => {
+        q(
+          (_) => _ ? {
+            ..._,
+            duration: (Date.now() - X.current) / 1e3,
+            size: g.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 (a) {
+      k("error"), T == null || T(a instanceof Error ? a : 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 = () => {
+    b.current && h === "recording" && (b.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) => {
+    b.current && h === "paused" && (b.current.resume(), k("recording"), O == null || O());
+  }, Q = () => {
+    H.current && clearInterval(H.current), b.current && (h === "recording" || h === "paused") && (b.current.stop(), k("stopped")), w && (w.getTracks().forEach((a) => a.stop()), B(null));
+  }, ee = ue(
+    (a) => {
       if (h !== "recording")
         return;
-      const c = {
-        id: $(),
-        time: (N == null ? void 0 : N.duration) || 0,
-        label: i || `Marker ${y.length + 1}`,
-        color: a()
+      const d = {
+        id: M(),
+        time: (y == null ? void 0 : y.duration) || 0,
+        label: a || n("screenRecorder.marker", "Marker {markers}").replace(
+          "{markers}",
+          String(N.length + 1)
+        ),
+        color: i()
       };
-      D((m) => [...m, c]);
+      D((v) => [...v, d]);
     },
-    [h, N == null ? void 0 : N.duration, y.length]
-  ), q = (i) => {
-    D((c) => c.filter((m) => m.id !== i));
-  }, ne = (i) => {
-    switch (i) {
+    [h, y == null ? void 0 : y.duration, N.length, n]
+  ), j = (a) => {
+    D((d) => d.filter((v) => v.id !== a));
+  }, re = (a) => {
+    switch (a) {
       case "mp4":
         return "video/mp4";
       case "mkv":
@@ -865,8 +900,8 @@ const fe = {
       default:
         return "video/webm;codecs=vp9";
     }
-  }, se = (i) => {
-    switch (i) {
+  }, se = (a) => {
+    switch (a) {
       case "low":
         return 25e5;
       case "medium":
@@ -876,130 +911,174 @@ const fe = {
       default:
         return 8e6;
     }
-  }, a = () => {
-    const i = [
+  }, i = () => {
+    const a = [
       "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 a[Math.floor(Math.random() * a.length)];
+  }, o = (a) => {
+    const d = Math.floor(a / 3600), v = Math.floor(a % 3600 / 60), p = Math.floor(a % 60), _ = Math.floor(a % 1 * 100);
+    return d > 0 ? `${d}:${v.toString().padStart(2, "0")}:${p.toString().padStart(2, "0")}` : `${v.toString().padStart(2, "0")}:${p.toString().padStart(2, "0")}.${_.toString().padStart(2, "0")}`;
+  }, l = (a) => a < 1024 ? `${a} B` : a < 1024 * 1024 ? `${(a / 1024).toFixed(1)} KB` : `${(a / 1024 / 1024).toFixed(1)} MB`;
+  return /* @__PURE__ */ t("div", { className: `nice-screen-recorder ${u}`, children: [
+    /* @__PURE__ */ t("div", { className: "nice-screen-recorder__preview", children: [
+      K !== null && /* @__PURE__ */ e("div", { className: "nice-screen-recorder__countdown-overlay", children: /* @__PURE__ */ e("span", { className: "nice-screen-recorder__countdown-number", children: K }) }),
+      /* @__PURE__ */ e(
+        "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 && h === "idle" && /* @__PURE__ */ e("div", { className: "nice-screen-recorder__preview-placeholder", children: /* @__PURE__ */ t("button", { className: "nice-screen-recorder__start-preview-button", onClick: Z, children: [
+        /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "monitor", size: 18 }) }),
+        /* @__PURE__ */ e("span", { children: n("screenRecorder.selectScreenToRecord", "Select Screen to Record") })
       ] }) }),
-      h === "recording" && /* @__PURE__ */ t("div", { className: "recording-indicator", children: [
-        /* @__PURE__ */ e("span", { className: "recording-dot" }),
-        /* @__PURE__ */ e("span", { children: "REC" })
+      h === "recording" && /* @__PURE__ */ t("div", { className: "nice-screen-recorder__recording-indicator", children: [
+        /* @__PURE__ */ e("span", { className: "nice-screen-recorder__recording-dot" }),
+        /* @__PURE__ */ e("span", { children: n("screenRecorder.rec", "REC") })
       ] })
     ] }),
-    /* @__PURE__ */ t("div", { className: "recorder__controls", children: [
-      /* @__PURE__ */ t("div", { className: "controls__main", children: [
+    /* @__PURE__ */ t("div", { className: "nice-screen-recorder__controls", children: [
+      /* @__PURE__ */ t("div", { className: "nice-screen-recorder__controls-main", children: [
         h === "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: n("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" })
-          ] })
+        h === "recording" && /* @__PURE__ */ t(ce, { 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: n("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: n("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" })
-          ] })
+        h === "paused" && /* @__PURE__ */ t(ce, { 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: n("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: n("screenRecorder.stop", "Stop") })
+              ]
+            }
+          )
         ] }),
         h === "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([]);
+              k("idle"), q(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: n("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: [
+        (h === "recording" || h === "paused") && /* @__PURE__ */ t(
+          "button",
+          {
+            className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--marker",
+            onClick: () => ee(),
+            children: [
+              /* @__PURE__ */ e("span", { className: "nice-screen-recorder__icon", children: /* @__PURE__ */ e(m, { name: "tag", size: 18 }) }),
+              /* @__PURE__ */ e("span", { children: n("screenRecorder.addMarker", "Add Marker") })
+            ]
+          }
+        ),
         /* @__PURE__ */ t(
           "button",
           {
-            className: `control-button ${I ? "control-button--active" : ""}`,
-            onClick: () => _(!I),
+            className: `nice-screen-recorder__control-button ${z ? "nice-screen-recorder__control-button--active" : ""}`,
+            onClick: () => E(!z),
             disabled: h !== "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: n("screenRecorder.annotate", "Annotate") })
             ]
           }
         ),
         /* @__PURE__ */ e(
           "button",
           {
-            className: "control-button control-button--settings",
-            onClick: () => K(!j),
+            className: "nice-screen-recorder__control-button nice-screen-recorder__control-button--settings",
+            onClick: () => W(!G),
             disabled: h === "recording",
-            "aria-label": "Settings",
-            children: /* @__PURE__ */ e("span", { className: "icon", children: /* @__PURE__ */ e(u, { name: "settings", size: 18 }) })
+            "aria-label": n("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__ */ e("strong", { children: "Duration:" }),
+    /* @__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: n("screenRecorder.duration", "Duration:") }),
           " ",
-          r((N == null ? void 0 : N.duration) || 0)
+          o((y == null ? void 0 : y.duration) || 0)
         ] }),
-        /* @__PURE__ */ t("span", { className: "status-item", children: [
-          /* @__PURE__ */ e("strong", { children: "Size:" }),
+        /* @__PURE__ */ t("span", { className: "nice-screen-recorder__status-item", children: [
+          /* @__PURE__ */ e("strong", { children: n("screenRecorder.size", "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__ */ e("strong", { children: "Markers:" }),
+        /* @__PURE__ */ t("span", { className: "nice-screen-recorder__status-item", children: [
+          /* @__PURE__ */ e("strong", { children: n("screenRecorder.markers2", "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 +1088,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 && h === "recording" && /* @__PURE__ */ t("div", { className: "nice-screen-recorder__annotation-tools", children: [
+      /* @__PURE__ */ e("div", { className: "nice-screen-recorder__tool-group", children: ["pen", "arrow", "rectangle", "text"].map((a) => /* @__PURE__ */ e(
         "button",
         {
-          className: `tool-button ${L === i ? "tool-button--active" : ""}`,
-          onClick: () => ee(i),
-          "aria-label": i,
+          className: `nice-screen-recorder__tool-button ${U === a ? "nice-screen-recorder__tool-button--active" : ""}`,
+          onClick: () => ie(a),
+          "aria-label": a,
           children: /* @__PURE__ */ e(
-            u,
+            m,
             {
-              name: i === "pen" ? "pen" : i === "arrow" ? "arrow-right" : i === "rectangle" ? "square" : "type",
+              name: a === "pen" ? "pen" : a === "arrow" ? "arrow-right" : a === "rectangle" ? "square" : "type",
               size: 16
             }
           )
         },
-        i
+        a
       )) }),
-      /* @__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((a) => /* @__PURE__ */ e(
         "button",
         {
-          className: `color-button ${ae === i ? "color-button--active" : ""}`,
-          style: { backgroundColor: i },
-          onClick: () => S(i)
+          className: `nice-screen-recorder__color-button ${te === a ? "nice-screen-recorder__color-button--active" : ""}`,
+          style: { backgroundColor: a },
+          onClick: () => x(a)
         },
-        i
+        a
       )) })
     ] }),
-    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: n("screenRecorder.markers", "Markers") }),
+      /* @__PURE__ */ e("div", { className: "nice-screen-recorder__markers-list", children: N.map((a) => /* @__PURE__ */ t(
         "div",
         {
-          className: "marker-item",
-          style: { borderLeftColor: i.color },
+          className: "nice-screen-recorder__marker-item",
+          style: { borderLeftColor: a.color },
           children: [
-            /* @__PURE__ */ e("span", { className: "marker-time", children: r(i.time) }),
+            /* @__PURE__ */ e("span", { className: "nice-screen-recorder__marker-time", children: o(a.time) }),
             /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
-                value: i.label,
-                onChange: (c) => {
+                value: a.label,
+                onChange: (d) => {
                   D(
-                    (m) => m.map((p) => p.id === i.id ? { ...p, label: c.target.value } : p)
+                    (v) => v.map((p) => p.id === a.id ? { ...p, label: d.target.value } : p)
                   );
                 },
-                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": n("screenRecorder.close", "Close"),
+                className: "nice-screen-recorder__marker-remove",
+                onClick: () => j(a.id),
+                children: /* @__PURE__ */ e(m, { name: "close", size: 16 })
               }
             )
           ]
         },
-        i.id
+        a.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: n("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": n("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: n("screenRecorder.video", "Video") }),
         /* @__PURE__ */ t("label", { children: [
-          "Source",
+          n("screenRecorder.source", "Source"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.video.source,
-              onChange: (i) => x({
+              onChange: (a) => C({
                 video: {
                   ...s.video,
-                  source: i.target.value
+                  source: a.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: n("screenRecorder.entireScreen", "Entire Screen") }),
+                /* @__PURE__ */ e("option", { value: "window", children: n("screenRecorder.applicationWindow", "Application Window") }),
+                /* @__PURE__ */ e("option", { value: "tab", children: n("screenRecorder.browserTab", "Browser Tab") }),
+                /* @__PURE__ */ e("option", { value: "camera", children: n("screenRecorder.camera", "Camera") })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          "Resolution",
+          n("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: `${(r = s.video.resolution) == null ? void 0 : r.width}x${(c = s.video.resolution) == null ? void 0 : c.height}`,
+              onChange: (a) => {
+                const [d, v] = a.target.value.split("x").map(Number);
+                C({
+                  video: { ...s.video, resolution: { width: d, height: v } }
                 });
               },
               children: [
@@ -1140,13 +1225,13 @@ const fe = {
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          "Frame Rate",
+          n("screenRecorder.frameRate", "Frame Rate"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.video.frameRate,
-              onChange: (i) => x({
-                video: { ...s.video, frameRate: parseInt(i.target.value) }
+              onChange: (a) => C({
+                video: { ...s.video, frameRate: parseInt(a.target.value) }
               }),
               children: [
                 /* @__PURE__ */ e("option", { value: "15", children: "15 fps" }),
@@ -1157,120 +1242,120 @@ 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: (a) => C({
+                video: { ...s.video, showCursor: a.target.checked }
               })
             }
           ),
-          "Show Cursor"
+          n("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: n("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: (a) => C({
+                audio: { ...s.audio, enabled: a.target.checked }
               })
             }
           ),
-          "Enable Audio"
+          n("screenRecorder.enableAudio", "Enable Audio")
         ] }),
-        s.audio.enabled && /* @__PURE__ */ t(le, { children: [
+        s.audio.enabled && /* @__PURE__ */ t(ce, { children: [
           /* @__PURE__ */ t("label", { children: [
-            "Source",
+            n("screenRecorder.source", "Source"),
             /* @__PURE__ */ t(
               "select",
               {
                 value: s.audio.source,
-                onChange: (i) => x({
+                onChange: (a) => C({
                   audio: {
                     ...s.audio,
-                    source: i.target.value
+                    source: a.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: n("screenRecorder.systemAudio", "System Audio") }),
+                  /* @__PURE__ */ e("option", { value: "microphone", children: n("screenRecorder.microphone", "Microphone") }),
+                  /* @__PURE__ */ e("option", { value: "both", children: n("screenRecorder.both", "Both") })
                 ]
               }
             )
           ] }),
-          /* @__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: (a) => C({
+                  audio: { ...s.audio, echoCancellation: a.target.checked }
                 })
               }
             ),
-            "Echo Cancellation"
+            n("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: (a) => C({
+                  audio: { ...s.audio, noiseSuppression: a.target.checked }
                 })
               }
             ),
-            "Noise Suppression"
+            n("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: n("screenRecorder.output", "Output") }),
         /* @__PURE__ */ t("label", { children: [
-          "Format",
+          n("screenRecorder.format", "Format"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.output.format,
-              onChange: (i) => x({
-                output: { ...s.output, format: i.target.value }
+              onChange: (a) => C({
+                output: { ...s.output, format: a.target.value }
               }),
               children: [
-                /* @__PURE__ */ e("option", { value: "webm", children: "WebM (Best Web)" }),
-                /* @__PURE__ */ e("option", { value: "mp4", children: "MP4 (Most Compatible)" }),
-                /* @__PURE__ */ e("option", { value: "mkv", children: "MKV (Lossless)" })
+                /* @__PURE__ */ e("option", { value: "webm", children: n("screenRecorder.webmBestWeb", "WebM (Best Web)") }),
+                /* @__PURE__ */ e("option", { value: "mp4", children: n("screenRecorder.mp4MostCompatible", "MP4 (Most Compatible)") }),
+                /* @__PURE__ */ e("option", { value: "mkv", children: n("screenRecorder.mkvLossless", "MKV (Lossless)") })
               ]
             }
           )
         ] }),
         /* @__PURE__ */ t("label", { children: [
-          "Quality",
+          n("screenRecorder.quality", "Quality"),
           /* @__PURE__ */ t(
             "select",
             {
               value: s.output.quality,
-              onChange: (i) => x({
+              onChange: (a) => C({
                 output: {
                   ...s.output,
-                  quality: i.target.value
+                  quality: a.target.value
                 }
               }),
               children: [
-                /* @__PURE__ */ e("option", { value: "low", children: "Low (Smaller file)" }),
-                /* @__PURE__ */ e("option", { value: "medium", children: "Medium" }),
-                /* @__PURE__ */ e("option", { value: "high", children: "High (Recommended)" }),
-                /* @__PURE__ */ e("option", { value: "lossless", children: "Lossless (Largest file)" })
+                /* @__PURE__ */ e("option", { value: "low", children: n("screenRecorder.lowSmallerFile", "Low (Smaller file)") }),
+                /* @__PURE__ */ e("option", { value: "medium", children: n("screenRecorder.medium", "Medium") }),
+                /* @__PURE__ */ e("option", { value: "high", children: n("screenRecorder.highRecommended", "High (Recommended)") }),
+                /* @__PURE__ */ e("option", { value: "lossless", children: n("screenRecorder.losslessLargestFile", "Lossless (Largest file)") })
               ]
             }
           )
@@ -1278,8 +1363,8 @@ const fe = {
       ] })
     ] })
   ] });
-}, ke = {
-  id: $(),
+}, we = {
+  id: M(),
   name: "My Stream",
   protocol: "rtmp",
   destinations: [],
@@ -1306,7 +1391,7 @@ const fe = {
       codec: "aac"
     }
   }
-}, ce = [
+}, de = [
   {
     platform: "youtube",
     name: "YouTube",
@@ -1322,7 +1407,7 @@ const fe = {
   },
   { platform: "custom-rtmp", name: "Custom RTMP", icon: "link", defaultUrl: "" },
   { platform: "custom-srt", name: "Custom SRT", icon: "lock", defaultUrl: "" }
-], re = [
+], oe = [
   { type: "camera", name: "Camera", icon: "camera" },
   { type: "screen", name: "Screen Capture", icon: "monitor" },
   { type: "window", name: "Window Capture", icon: "window" },
@@ -1331,18 +1416,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,
+], Te = ({
+  config: $,
+  onConfigChange: R,
+  onStreamStart: F,
+  onStreamStop: L,
+  onStatsUpdate: O,
   onError: T,
-  className: d = ""
+  className: u = ""
 }) => {
-  const [s, A] = b(R || ke), [N, H] = b(
+  const { t: n } = me(), [s, A] = f($ || we), [y, q] = f(
     "sources"
-  ), [h, k] = b(!1), [y, D] = b({
+  ), [h, k] = f(!1), [N, D] = f({
     duration: 0,
     viewers: 0,
     peakViewers: 0,
@@ -1351,155 +1436,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] = f(null), [K, S] = f(!1), [G, W] = f(!1), [z, E] = f([s.layout]), [U, ie] = f(0), te = I(null), x = I(null), b = I(0);
+  le(() => {
+    $ && A($);
+  }, [$]), le(() => () => {
+    x.current && clearInterval(x.current);
   }, []);
-  const f = de(
-    (a) => {
-      const r = { ...s, ...a };
-      A(r), z == null || z(r);
+  const g = ue(
+    (i) => {
+      const o = { ...s, ...i };
+      A(o), R == null || R(o);
     },
-    [s, z]
-  ), U = (a) => {
-    const r = ce.find((n) => n.platform === a), o = {
-      id: $(),
-      name: (r == null ? void 0 : r.name) || "Custom",
-      platform: a,
-      url: (r == null ? void 0 : r.defaultUrl) || "",
+    [s, R]
+  ), V = (i) => {
+    const o = de.find((r) => r.platform === i), l = {
+      id: M(),
+      name: (o == null ? void 0 : o.name) || "Custom",
+      platform: i,
+      url: (o == null ? void 0 : o.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)
+    g({ destinations: [...s.destinations, l] }), W(!1);
+  }, Y = (i, o) => {
+    g({
+      destinations: s.destinations.map((l) => l.id === i ? { ...l, ...o } : l)
     });
-  }, W = (a) => {
-    f({ destinations: s.destinations.filter((r) => r.id !== a) });
-  }, Q = async (a) => {
-    const r = re.find((l) => l.type === a), o = {
-      id: $(),
-      type: a,
-      name: `${(r == null ? void 0 : r.name) || a} ${s.sources.filter((l) => l.type === a).length + 1}`,
+  }, H = (i) => {
+    g({ destinations: s.destinations.filter((o) => o.id !== i) });
+  }, X = async (i) => {
+    const o = oe.find((c) => c.type === i), l = {
+      id: M(),
+      type: i,
+      name: `${(o == null ? void 0 : o.name) || i} ${s.sources.filter((c) => c.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 c = i === "camera" ? { video: !0 } : { audio: !0 }, d = (await navigator.mediaDevices.enumerateDevices()).filter(
+          (v) => i === "camera" ? v.kind === "videoinput" : v.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 (c) {
+      console.warn(`Could not access ${i}:`, c);
     }
-    f({ sources: [...s.sources, o] });
-    const n = {
-      id: $(),
-      sourceId: o.id,
+    g({ sources: [...s.sources, l] });
+    const r = {
+      id: M(),
+      sourceId: l.id,
       position: { x: 0, y: 0 },
       size: { width: s.layout.canvas.width, height: s.layout.canvas.height },
       visible: !0,
       opacity: 1,
       zIndex: s.layout.layers.length
     };
-    f({
+    g({
       layout: {
         ...s.layout,
-        layers: [...s.layout.layers, n]
+        layers: [...s.layout.layers, r]
       }
-    }), C(!1);
-  }, x = (a, r) => {
-    f({
-      sources: s.sources.map((o) => o.id === a ? { ...o, ...r } : o)
+    }), S(!1);
+  }, C = (i, o) => {
+    g({
+      sources: s.sources.map((l) => l.id === i ? { ...l, ...o } : l)
     });
-  }, Y = (a) => {
-    f({
-      sources: s.sources.filter((r) => r.id !== a),
+  }, Z = (i) => {
+    g({
+      sources: s.sources.filter((o) => o.id !== i),
       layout: {
         ...s.layout,
-        layers: s.layout.layers.filter((r) => r.sourceId !== a)
+        layers: s.layout.layers.filter((o) => o.sourceId !== i)
       }
     });
-  }, E = (a, r) => {
-    f({
+  }, P = (i, o) => {
+    g({
       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, ...o } : 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 o = s.layout.layers.findIndex((l) => l.id === i);
+    if (o < s.layout.layers.length - 1) {
+      const l = [...s.layout.layers];
+      [l[o], l[o + 1]] = [l[o + 1], l[o]], l.forEach((r, c) => {
+        r.zIndex = c;
+      }), g({ 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 o = s.layout.layers.findIndex((l) => l.id === i);
+    if (o > 0) {
+      const l = [...s.layout.layers];
+      [l[o], l[o - 1]] = [l[o - 1], l[o]], l.forEach((r, c) => {
+        r.zIndex = c;
+      }), g({ 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 () => {
+    E([...z, i]);
+  }, Q = (i) => {
+    const o = [...z];
+    o[U] = s.layout, E(o), ie(i), g({ layout: z[i] });
+  }, ee = async () => {
     try {
-      f({
+      g({
         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)), g({
         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), b.current = Date.now(), F == null || F(), x.current = setInterval(() => {
+        const i = {
+          duration: (Date.now() - b.current) / 1e3,
+          viewers: Math.floor(Math.random() * 100) + N.viewers,
+          peakViewers: Math.max(N.peakViewers, N.viewers),
           bitrate: s.settings.video.bitrate + Math.floor(Math.random() * 500 - 250),
           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) {
+      T == null || T(i instanceof Error ? i : new Error("Failed to start stream")), g({
+        destinations: s.destinations.map((o) => ({
+          ...o,
           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), g({
+      destinations: s.destinations.map((i) => ({ ...i, status: "idle" }))
+    }), k(!1), L == null || L();
+  }, re = (i) => {
+    const o = Math.floor(i / 3600), l = Math.floor(i % 3600 / 60), r = Math.floor(i % 60);
+    return `${o.toString().padStart(2, "0")}:${l.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}`;
+  }, se = (i) => {
+    switch (i) {
       case "live":
         return "var(--nice-success, #00ff00)";
       case "connecting":
@@ -1510,258 +1595,275 @@ 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 ${u}`, 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) => g({ 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"
+        h && /* @__PURE__ */ t("span", { className: "nice-live-streaming__live-badge", children: [
+          /* @__PURE__ */ e("span", { className: "nice-live-streaming__live-dot" }),
+          " ",
+          n("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: h && /* @__PURE__ */ t(ce, { children: [
+        /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat-item", children: [
+          /* @__PURE__ */ e(m, { name: "clock", size: 14 }),
           " ",
-          ne(y.duration)
+          re(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),
-          " kbps"
+          n("liveStreaming.kbps", "{bitrate} kbps").replace(
+            "{bitrate}",
+            String(Math.round(N.bitrate))
+          )
         ] }),
-        /* @__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: h ? /* @__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--stop",
+          onClick: j,
+          children: n("liveStreaming.endStream", "End Stream")
+        }
+      ) : /* @__PURE__ */ e(
+        "button",
+        {
+          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: n("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, o) => /* @__PURE__ */ e(
             "button",
             {
-              className: `scene-button ${L === r ? "scene-button--active" : ""}`,
-              onClick: () => J(r),
-              children: a.name
+              className: `nice-live-streaming__scene-button ${U === o ? "nice-live-streaming__scene-button--active" : ""}`,
+              onClick: () => Q(o),
+              children: i.name
             },
-            r
+            o
           )),
-          /* @__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, o) => i.zIndex - o.zIndex).map((i) => {
+              var l;
+              const o = s.sources.find((r) => r.id === i.sourceId);
+              return !i.visible || !o ? 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 = oe.find((r) => r.type === o.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: o.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: () => q(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: n("liveStreaming.sources", "Sources") }),
               /* @__PURE__ */ e(
                 "button",
                 {
-                  className: "add-button",
-                  onClick: () => C(!0),
+                  className: "nice-live-streaming__add-button",
+                  onClick: () => S(!0),
                   disabled: h,
-                  children: "+ Add"
+                  children: n("liveStreaming.add", "+ 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 o = s.layout.layers.find((r) => r.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 === (o == null ? void 0 : o.id) ? "nice-live-streaming__source-item--selected" : ""}`,
+                  onClick: () => o && B(o.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 = oe.find((r) => r.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 ${o != null && o.visible ? "" : "nice-live-streaming__visibility-toggle--hidden"}`,
+                          onClick: (r) => {
+                            r.stopPropagation(), o && P(o.id, { visible: !o.visible });
                           },
-                          children: /* @__PURE__ */ e(u, { name: r != null && r.visible ? "eye" : "eye-off", size: 14 })
+                          children: /* @__PURE__ */ e(m, { name: o != null && o.visible ? "eye" : "eye-off", size: 14 })
                         }
                       ),
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (n) => {
-                            n.stopPropagation(), r && te(r.id);
+                          onClick: (r) => {
+                            r.stopPropagation(), o && ne(o.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: (r) => {
+                            r.stopPropagation(), o && ae(o.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: (r) => {
+                            r.stopPropagation(), Z(i.id);
                           },
                           disabled: h,
-                          children: /* @__PURE__ */ e(u, { name: "trash", size: 14 })
+                          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: n("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((o) => o.id === w);
+                return i ? /* @__PURE__ */ t(ce, { children: [
                   /* @__PURE__ */ t("label", { children: [
-                    "X Position",
+                    n("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: (o) => P(i.id, {
+                          position: { ...i.position, x: parseInt(o.target.value) || 0 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    "Y Position",
+                    n("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: (o) => P(i.id, {
+                          position: { ...i.position, y: parseInt(o.target.value) || 0 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    "Width",
+                    n("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: (o) => P(i.id, {
+                          size: { ...i.size, width: parseInt(o.target.value) || 100 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    "Height",
+                    n("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: (o) => P(i.id, {
+                          size: { ...i.size, height: parseInt(o.target.value) || 100 }
                         })
                       }
                     )
                   ] }),
                   /* @__PURE__ */ t("label", { children: [
-                    "Opacity",
+                    n("liveStreaming.opacity", "Opacity"),
                     /* @__PURE__ */ e(
                       "input",
                       {
@@ -1769,9 +1871,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: (o) => P(i.id, {
+                          opacity: parseFloat(o.target.value)
                         })
                       }
                     )
@@ -1780,46 +1882,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: n("liveStreaming.audioMixer", "Audio Mixer") }),
               /* @__PURE__ */ e(
                 "button",
                 {
-                  className: "add-button",
+                  className: "nice-live-streaming__add-button",
                   onClick: () => {
-                    C(!0);
+                    S(!0);
                   },
                   disabled: h,
-                  children: "+ Add"
+                  children: n("liveStreaming.add", "+ 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 o;
+                return /* @__PURE__ */ t("div", { className: "nice-live-streaming__audio-source", children: [
+                  /* @__PURE__ */ t("div", { className: "nice-live-streaming__audio-header", children: [
+                    /* @__PURE__ */ e("span", { className: "nice-live-streaming__audio-icon", children: /* @__PURE__ */ e(
+                      m,
                       {
-                        name: ((r = re.find((o) => o.type === a.type)) == null ? void 0 : r.icon) ?? "box",
+                        name: ((o = oe.find((l) => l.type === i.type)) == null ? void 0 : o.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: () => C(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,99 +1929,99 @@ 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) => C(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: n("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: n("liveStreaming.destinations", "Destinations") }),
               /* @__PURE__ */ e(
                 "button",
                 {
-                  className: "add-button",
-                  onClick: () => K(!0),
+                  className: "nice-live-streaming__add-button",
+                  onClick: () => W(!0),
                   disabled: h,
-                  children: "+ Add"
+                  children: n("liveStreaming.add", "+ 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 o;
+                return /* @__PURE__ */ t("div", { className: "nice-live-streaming__destination-item", children: [
+                  /* @__PURE__ */ t("div", { className: "nice-live-streaming__destination-header", children: [
                     /* @__PURE__ */ e(
                       "span",
                       {
-                        className: "status-indicator",
-                        style: { backgroundColor: se(a.status) }
+                        className: "nice-live-streaming__status-indicator",
+                        style: { backgroundColor: se(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: ((o = de.find((l) => l.platform === i.platform)) == null ? void 0 : o.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 }),
+                          checked: i.enabled,
+                          onChange: (l) => Y(i.id, { enabled: l.target.checked }),
                           disabled: h
                         }
                       ),
-                      /* @__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",
+                      n("liveStreaming.serverUrl", "Server URL"),
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "text",
-                          value: a.url,
-                          onChange: (o) => G(a.id, { url: o.target.value }),
-                          placeholder: "rtmp://...",
+                          value: i.url,
+                          onChange: (l) => Y(i.id, { url: l.target.value }),
+                          placeholder: n("liveStreaming.rtmp", "rtmp://..."),
                           disabled: h
                         }
                       )
                     ] }),
                     /* @__PURE__ */ t("label", { children: [
-                      "Stream Key",
+                      n("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",
+                          value: i.streamKey || "",
+                          onChange: (l) => Y(i.id, { streamKey: l.target.value }),
+                          placeholder: n("liveStreaming.enterStreamKey", "Enter stream key"),
                           disabled: h
                         }
                       )
@@ -1928,36 +2030,36 @@ const fe = {
                   /* @__PURE__ */ e(
                     "button",
                     {
-                      className: "remove-button",
-                      onClick: () => W(a.id),
+                      className: "nice-live-streaming__remove-button",
+                      onClick: () => H(i.id),
                       disabled: h,
-                      children: "Remove"
+                      children: n("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: n("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: n("liveStreaming.video", "Video") }),
               /* @__PURE__ */ t("label", { children: [
-                "Resolution",
+                n("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 [o, l] = i.target.value.split("x").map(Number);
+                      g({
                         settings: {
                           ...s.settings,
-                          video: { ...s.settings.video, resolution: { width: r, height: o } }
+                          video: { ...s.settings.video, resolution: { width: o, height: l } }
                         },
                         layout: {
                           ...s.layout,
-                          canvas: { ...s.layout.canvas, width: r, height: o }
+                          canvas: { ...s.layout.canvas, width: o, height: l }
                         }
                       });
                     },
@@ -1971,17 +2073,17 @@ const fe = {
                 )
               ] }),
               /* @__PURE__ */ t("label", { children: [
-                "Frame Rate",
+                n("liveStreaming.frameRate", "Frame Rate"),
                 /* @__PURE__ */ t(
                   "select",
                   {
                     value: s.settings.video.frameRate,
-                    onChange: (a) => f({
+                    onChange: (i) => g({
                       settings: {
                         ...s.settings,
                         video: {
                           ...s.settings.video,
-                          frameRate: parseInt(a.target.value)
+                          frameRate: parseInt(i.target.value)
                         }
                       }
                     }),
@@ -1995,18 +2097,18 @@ const fe = {
                 )
               ] }),
               /* @__PURE__ */ t("label", { children: [
-                "Bitrate (kbps)",
+                n("liveStreaming.bitrateKbps", "Bitrate (kbps)"),
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "number",
                     value: s.settings.video.bitrate,
-                    onChange: (a) => f({
+                    onChange: (i) => g({
                       settings: {
                         ...s.settings,
                         video: {
                           ...s.settings.video,
-                          bitrate: parseInt(a.target.value) || 6e3
+                          bitrate: parseInt(i.target.value) || 6e3
                         }
                       }
                     }),
@@ -2017,18 +2119,18 @@ const fe = {
                 )
               ] }),
               /* @__PURE__ */ t("label", { children: [
-                "Keyframe Interval (sec)",
+                n("liveStreaming.keyframeIntervalSec", "Keyframe Interval (sec)"),
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "number",
                     value: s.settings.video.keyframe,
-                    onChange: (a) => f({
+                    onChange: (i) => g({
                       settings: {
                         ...s.settings,
                         video: {
                           ...s.settings.video,
-                          keyframe: parseInt(a.target.value) || 2
+                          keyframe: parseInt(i.target.value) || 2
                         }
                       }
                     }),
@@ -2039,20 +2141,20 @@ const fe = {
                 )
               ] })
             ] }),
-            /* @__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: n("liveStreaming.audio", "Audio") }),
               /* @__PURE__ */ t("label", { children: [
-                "Sample Rate",
+                n("liveStreaming.sampleRate", "Sample Rate"),
                 /* @__PURE__ */ t(
                   "select",
                   {
                     value: s.settings.audio.sampleRate,
-                    onChange: (a) => f({
+                    onChange: (i) => g({
                       settings: {
                         ...s.settings,
                         audio: {
                           ...s.settings.audio,
-                          sampleRate: parseInt(a.target.value)
+                          sampleRate: parseInt(i.target.value)
                         }
                       }
                     }),
@@ -2065,15 +2167,15 @@ const fe = {
                 )
               ] }),
               /* @__PURE__ */ t("label", { children: [
-                "Audio Bitrate (kbps)",
+                n("liveStreaming.audioBitrateKbps", "Audio Bitrate (kbps)"),
                 /* @__PURE__ */ t(
                   "select",
                   {
                     value: s.settings.audio.bitrate,
-                    onChange: (a) => f({
+                    onChange: (i) => g({
                       settings: {
                         ...s.settings,
-                        audio: { ...s.settings.audio, bitrate: parseInt(a.target.value) }
+                        audio: { ...s.settings.audio, bitrate: parseInt(i.target.value) }
                       }
                     }),
                     disabled: h,
@@ -2091,86 +2193,86 @@ const fe = {
         ] })
       ] })
     ] }),
-    h && /* @__PURE__ */ e("footer", { className: "streaming__footer", children: /* @__PURE__ */ t("div", { className: "footer-stats", children: [
-      /* @__PURE__ */ t("span", { className: "stat", children: [
+    h && /* @__PURE__ */ e("footer", { className: "nice-live-streaming__footer", children: /* @__PURE__ */ t("div", { className: "nice-live-streaming__footer-stats", children: [
+      /* @__PURE__ */ t("span", { className: "nice-live-streaming__stat", children: [
         /* @__PURE__ */ e("label", { children: "CPU" }),
-        /* @__PURE__ */ t("span", { className: "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: n("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: n("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: n("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: n("liveStreaming.addSource", "Add Source") }),
         /* @__PURE__ */ e(
           "button",
           {
-            "aria-label": "Close",
-            className: "close-button",
-            onClick: () => C(!1),
-            children: /* @__PURE__ */ e(u, { name: "close", size: 16 })
+            "aria-label": n("liveStreaming.close", "Close"),
+            className: "nice-live-streaming__close-button",
+            onClick: () => S(!1),
+            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: oe.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: n("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": n("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,
+  Te as NiceLiveStreaming,
+  Ee as NiceScreenRecorder,
   ze as NiceVideoEditor
 };