@nice2dev/ui-video 1.0.20 → 1.0.22

package/dist/index.mjs

@@ -1,6 +1,1764 @@
-import { jsxs as a, jsx as e, Fragment as ae } from "react/jsx-runtime";
-import { useState as p, useRef as T, useEffect as re, useCallback as le } from "react";
-const ue = {
+import { jsx as e, jsxs as r, Fragment as ie } from "react/jsx-runtime";
+import { useContext as ye, createContext as $, memo as Se, useState as v, useEffect as ne, useRef as F, useCallback as me } from "react";
+const He = (l, m) => m, Ie = $(He);
+function Te() {
+  return { t: ye(Ie) };
+}
+$({
+  dir: "ltr",
+  isRTL: !1,
+  flip: (l) => l,
+  value: (l) => l.ltr
+});
+$(null);
+$(null);
+const Re = {
+  radius: "md",
+  shadow: "md",
+  fill: "solid",
+  buttonStyle: "flat",
+  inputStyle: "bordered",
+  cardStyle: "elevated",
+  badgeStyle: "solid",
+  tabStyle: "underline",
+  toggleStyle: "default",
+  tooltipStyle: "dark",
+  modalStyle: "default",
+  tableStyle: "default",
+  menuStyle: "default",
+  animation: "normal",
+  density: "normal"
+};
+$({
+  displayStyle: "default",
+  variantConfig: Re,
+  setDisplayStyle: () => {
+  }
+});
+$({});
+$({
+  direction: "ltr",
+  isRTL: !1,
+  flip: (l) => l,
+  flipStyle: (l, m) => ({ [l]: m })
+});
+$({
+  permissions: {},
+  getAccessMode: () => "full"
+});
+$(null);
+const Me = process.env.NODE_ENV === "development";
+let he = {
+  enabled: Me,
+  slowRenderThreshold: 16
+};
+const be = [], pe = /* @__PURE__ */ new Map(), ve = /* @__PURE__ */ new Map();
+function De() {
+  be.length = 0, pe.clear(), ve.clear();
+}
+function _e(l) {
+  const m = he.slowRenderThreshold;
+  return be.filter((f) => f.actualDuration > m);
+}
+function ae(l) {
+  return l < 1 ? `${(l * 1e3).toFixed(0)}μs` : l < 1e3 ? `${l.toFixed(2)}ms` : `${(l / 1e3).toFixed(2)}s`;
+}
+function $e() {
+  const l = Array.from(pe.values()), m = _e(), f = l.reduce((T, p) => T + p.renderCount, 0), C = l.length > 0 ? l.reduce((T, p) => T + p.avgRenderTime, 0) / l.length : 0, I = Array.from(ve.values());
+  return { stats: l, slowRenders: m, totalRenders: f, avgRenderTime: C, marks: I };
+}
+function Ae() {
+  const l = $e();
+  console.group(
+    "%c[Nice2Dev Performance Report]",
+    "color: var(--nice-info, #6366f1); font-weight: bold; font-size: 14px"
+  ), console.log(`Total renders: ${l.totalRenders}`), console.log(`Average render time: ${ae(l.avgRenderTime)}`), console.log(`Slow renders: ${l.slowRenders.length}`), console.group("Component Stats"), console.table(
+    l.stats.sort((m, f) => f.totalRenderTime - m.totalRenderTime).map((m) => ({
+      Name: m.componentName,
+      Renders: m.renderCount,
+      "Avg Time": ae(m.avgRenderTime),
+      "Max Time": ae(m.maxRenderTime),
+      "Total Time": ae(m.totalRenderTime),
+      "Slow Renders": m.slowRenderCount
+    }))
+  ), console.groupEnd(), l.slowRenders.length > 0 && (console.group("Slow Renders (last 10)"), console.table(
+    l.slowRenders.slice(-10).map((m) => ({
+      Component: m.componentName,
+      Phase: m.phase,
+      Duration: ae(m.actualDuration),
+      Time: new Date(m.timestamp).toLocaleTimeString()
+    }))
+  ), console.groupEnd()), l.marks.length > 0 && (console.group("Custom Marks"), console.table(
+    l.marks.filter((m) => m.duration).map((m) => ({
+      Name: m.name,
+      Duration: ae(m.duration)
+    }))
+  ), console.groupEnd()), console.groupEnd();
+}
+const Ee = Se(
+  ({ position: l = "bottom-right", defaultCollapsed: m = !0 }) => {
+    const [f, C] = v(m), [I, T] = v([]), [p, i] = v({ used: 0, total: 0 });
+    if (ne(() => {
+      const b = () => {
+        const y = Array.from(pe.values());
+        T(y.sort((S, z) => z.totalRenderTime - S.totalRenderTime).slice(0, 10));
+        const k = window.performance;
+        k.memory && i({
+          used: k.memory.usedJSHeapSize / 1024 / 1024,
+          total: k.memory.totalJSHeapSize / 1024 / 1024
+        });
+      };
+      b();
+      const E = setInterval(b, 2e3);
+      return () => clearInterval(E);
+    }, []), !he.enabled)
+      return null;
+    const D = {
+      position: "fixed",
+      zIndex: 99999,
+      ...l.includes("top") ? { top: 8 } : { bottom: 8 },
+      ...l.includes("left") ? { left: 8 } : { right: 8 }
+    };
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        style: {
+          ...D,
+          background: "var(--nice-overlay-85, rgba(0, 0, 0, 0.85))",
+          color: "var(--bg-primary, #fff)",
+          borderRadius: 8,
+          fontSize: 11,
+          fontFamily: "Monaco, Consolas, monospace",
+          padding: f ? "4px 8px" : 8,
+          maxWidth: f ? "auto" : 300,
+          maxHeight: f ? "auto" : 400,
+          overflow: "auto"
+        },
+        children: [
+          /* @__PURE__ */ r(
+            "div",
+            {
+              style: { cursor: "pointer", display: "flex", alignItems: "center", gap: 8 },
+              onClick: () => C((b) => !b),
+              children: [
+                /* @__PURE__ */ e("span", { style: { color: "var(--color-success, #22c55e)" }, children: "●" }),
+                /* @__PURE__ */ e("span", { children: "Profiler" }),
+                p.used > 0 && /* @__PURE__ */ r(
+                  "span",
+                  {
+                    style: {
+                      color: p.used > 100 ? "var(--color-warning, #f59e0b)" : "var(--text-muted, #64748b)"
+                    },
+                    children: [
+                      p.used.toFixed(0),
+                      "MB"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e("span", { style: { marginLeft: "auto", opacity: 0.5 }, children: f ? "▼" : "▲" })
+              ]
+            }
+          ),
+          !f && /* @__PURE__ */ r("div", { style: { marginTop: 8 }, children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  borderBottom: "1px solid var(--border-color, #333)",
+                  paddingBottom: 4,
+                  marginBottom: 8
+                },
+                children: /* @__PURE__ */ e("strong", { children: "Top Components" })
+              }
+            ),
+            I.map((b) => /* @__PURE__ */ r("div", { style: { marginBottom: 4, display: "flex", gap: 8 }, children: [
+              /* @__PURE__ */ e("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: b.componentName }),
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  style: {
+                    color: b.avgRenderTime > 16 ? "var(--color-warning, #f59e0b)" : "var(--color-success, #22c55e)"
+                  },
+                  children: ae(b.avgRenderTime)
+                }
+              ),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  style: { color: "var(--text-muted, #64748b)", minWidth: 30, textAlign: "right" },
+                  children: [
+                    "x",
+                    b.renderCount
+                  ]
+                }
+              )
+            ] }, b.componentName)),
+            /* @__PURE__ */ r("div", { style: { marginTop: 8, display: "flex", gap: 8 }, children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: Ae,
+                  style: {
+                    flex: 1,
+                    padding: "4px 8px",
+                    background: "var(--bg-tertiary, #333)",
+                    border: "none",
+                    borderRadius: 4,
+                    color: "var(--bg-primary, #fff)",
+                    cursor: "pointer",
+                    fontSize: 10
+                  },
+                  children: "Print Report"
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: De,
+                  style: {
+                    flex: 1,
+                    padding: "4px 8px",
+                    background: "var(--bg-tertiary, #333)",
+                    border: "none",
+                    borderRadius: 4,
+                    color: "var(--bg-primary, #fff)",
+                    cursor: "pointer",
+                    fontSize: 10
+                  },
+                  children: "Clear"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Ee.displayName = "ProfilerOverlay";
+process.env.NODE_ENV;
+$(null);
+const ze = $({
+  enabled: !0,
+  active: !1,
+  run: () => {
+  }
+});
+function Pe() {
+  return ye(ze);
+}
+function Ue(l, m) {
+  if (!l)
+    return null;
+  if (l === !0)
+    return m && m.length > 0 ? m : null;
+  if (Array.isArray(l))
+    return l.length > 0 ? l : null;
+  const f = l.steps ?? m;
+  return f && f.length > 0 ? f : null;
+}
+function Fe(l, m) {
+  return l.map((f) => ({
+    target: f.target,
+    title: f.titleKey ? m(f.titleKey, f.title ?? "") : f.title ?? "",
+    content: f.contentKey ? m(f.contentKey, f.content ?? "") : f.content ?? "",
+    placement: f.placement,
+    highlightPadding: f.highlightPadding,
+    showArrow: f.showArrow,
+    scrollIntoView: f.scrollIntoView,
+    disableInteraction: f.disableInteraction
+  }));
+}
+const Le = ({
+  steps: l,
+  autoStart: m,
+  label: f,
+  size: C = "md",
+  className: I,
+  style: T,
+  "data-testid": p
+}) => {
+  const { enabled: i, run: D } = Pe(), { t: b } = Te();
+  if (!i || !l || l.length === 0)
+    return null;
+  const E = f ?? b("tutorial.startAria", "Start tutorial");
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: `nice-tutorial-button nice-tutorial-button--${C}` + (I ? ` ${I}` : ""),
+      style: T,
+      "data-testid": p,
+      "aria-label": E,
+      title: E,
+      onClick: () => D(Fe(l, b), { autoStart: m }),
+      children: "?"
+    }
+  );
+}, ue = "nice-tutorial-button-styles";
+if (typeof document < "u" && !document.getElementById(ue)) {
+  const l = document.createElement("style");
+  l.id = ue, l.textContent = `
+    .nice-tutorial-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--nice-border, #cbd5e1);
+      background: var(--nice-bg, #fff);
+      color: var(--nice-text-secondary, #475569);
+      border-radius: var(--nice-radius-full, 9999px);
+      cursor: help;
+      font-weight: 700;
+      line-height: 1;
+      padding: 0;
+      transition: background var(--nice-transition, 200ms ease), color var(--nice-transition, 200ms ease), border-color var(--nice-transition, 200ms ease);
+    }
+    .nice-tutorial-button:hover {
+      background: var(--nice-primary, #2563eb);
+      border-color: var(--nice-primary, #2563eb);
+      color: var(--nice-text-inverse, #fff);
+    }
+    .nice-tutorial-button:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--nice-bg, #fff), 0 0 0 4px var(--nice-primary, #2563eb);
+    }
+    .nice-tutorial-button--sm { width: 16px; height: 16px; font-size: 11px; }
+    .nice-tutorial-button--md { width: 20px; height: 20px; font-size: 12px; }
+  `, document.head.appendChild(l);
+}
+$(null);
+$(null);
+$(null);
+const ge = {
+  space1: "4px",
+  space2: "8px",
+  space3: "12px",
+  space4: "16px",
+  space5: "20px",
+  space6: "24px",
+  space8: "32px"
+}, we = {
+  fontFamily: "'Inter', system-ui, -apple-system, sans-serif",
+  fontSizeXs: "0.75rem",
+  fontSizeSm: "0.8125rem",
+  fontSizeMd: "0.875rem",
+  fontSizeLg: "1rem",
+  fontSizeXl: "1.125rem",
+  fontWeightNormal: 400,
+  fontWeightMedium: 500,
+  fontWeightSemibold: 600,
+  fontWeightBold: 700,
+  lineHeight: 1.5
+}, Ne = { fast: "120ms ease", normal: "200ms ease", slow: "300ms ease" }, ke = (l) => ({
+  color: l,
+  radiusSm: "4px",
+  radiusMd: "6px",
+  radiusLg: "8px",
+  radiusXl: "12px",
+  radiusFull: "9999px"
+}), Ve = {
+  sm: "0 1px 2px rgba(0,0,0,0.05)",
+  md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
+  lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
+  xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)"
+}, Oe = {
+  sm: "0 1px 2px rgba(0,0,0,0.3)",
+  md: "0 4px 6px -1px rgba(0,0,0,0.4)",
+  lg: "0 10px 15px -3px rgba(0,0,0,0.4)",
+  xl: "0 20px 25px -5px rgba(0,0,0,0.4)"
+};
+function d(l, m, f, C, I) {
+  return {
+    name: l,
+    darkMode: "light",
+    colors: {
+      ...m,
+      surface: m.surface ?? f.primary,
+      surfaceHover: m.surfaceHover ?? f.secondary
+    },
+    backgrounds: {
+      ...f,
+      elevated: f.elevated ?? f.primary,
+      inset: f.inset ?? f.tertiary,
+      canvas: f.canvas ?? f.primary
+    },
+    text: { ...C, inverse: C.inverse ?? "#ffffff" },
+    borders: ke(I),
+    shadows: Ve,
+    spacing: ge,
+    typography: we,
+    transitions: Ne
+  };
+}
+function x(l, m, f, C, I) {
+  return {
+    name: l,
+    darkMode: "dark",
+    colors: {
+      ...m,
+      surface: m.surface ?? f.secondary,
+      surfaceHover: m.surfaceHover ?? f.tertiary
+    },
+    backgrounds: {
+      ...f,
+      elevated: f.elevated ?? f.secondary,
+      inset: f.inset ?? f.primary,
+      canvas: f.canvas ?? f.primary
+    },
+    text: { ...C, inverse: C.inverse ?? "#0f172a" },
+    borders: ke(I),
+    shadows: Oe,
+    spacing: ge,
+    typography: we,
+    transitions: Ne
+  };
+}
+d(
+  "Slate",
+  {
+    primary: "#64748b",
+    primaryHover: "#475569",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
+  { primary: "#1e293b", secondary: "#475569", muted: "#94a3b8" },
+  "#cbd5e1"
+);
+d(
+  "Zinc",
+  {
+    primary: "#71717a",
+    primaryHover: "#52525b",
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#fafafa", secondary: "#f4f4f5", tertiary: "#e4e4e7", hover: "#e4e4e7" },
+  { primary: "#18181b", secondary: "#3f3f46", muted: "#a1a1aa" },
+  "#d4d4d8"
+);
+d(
+  "Stone",
+  {
+    primary: "#78716c",
+    primaryHover: "#57534e",
+    success: "#16a34a",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fafaf9", secondary: "#f5f5f4", tertiary: "#e7e5e4", hover: "#e7e5e4" },
+  { primary: "#1c1917", secondary: "#44403c", muted: "#a8a29e" },
+  "#d6d3d1"
+);
+d(
+  "Cool Gray",
+  {
+    primary: "#6b7280",
+    primaryHover: "#4b5563",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#3b82f6"
+  },
+  { primary: "#f9fafb", secondary: "#f3f4f6", tertiary: "#e5e7eb", hover: "#e5e7eb" },
+  { primary: "#111827", secondary: "#374151", muted: "#9ca3af" },
+  "#d1d5db"
+);
+d(
+  "Warm Gray",
+  {
+    primary: "#7c7568",
+    primaryHover: "#5c564c",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#faf9f7", secondary: "#f5f4f0", tertiary: "#e8e6e1", hover: "#e8e6e1" },
+  { primary: "#1f1d19", secondary: "#4a463d", muted: "#a09888" },
+  "#d4d0c8"
+);
+d(
+  "Silver",
+  {
+    primary: "#94a3b8",
+    primaryHover: "#64748b",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#38bdf8"
+  },
+  { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
+  { primary: "#334155", secondary: "#64748b", muted: "#94a3b8" },
+  "#cbd5e1"
+);
+d(
+  "Charcoal",
+  {
+    primary: "#374151",
+    primaryHover: "#1f2937",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#f9fafb", secondary: "#f3f4f6", tertiary: "#e5e7eb", hover: "#e5e7eb" },
+  { primary: "#111827", secondary: "#374151", muted: "#6b7280" },
+  "#d1d5db"
+);
+d(
+  "Ivory",
+  {
+    primary: "#92876d",
+    primaryHover: "#7a6f55",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fffef7", secondary: "#faf6eb", tertiary: "#f0ead6", hover: "#f0ead6" },
+  { primary: "#2b2517", secondary: "#5c5340", muted: "#9c9280" },
+  "#ddd8c4"
+);
+d(
+  "Rose",
+  {
+    primary: "#e11d48",
+    primaryHover: "#be123c",
+    success: "#16a34a",
+    warning: "#ea580c",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
+  { primary: "#4c0519", secondary: "#881337", muted: "#f43f5e" },
+  "#fda4af"
+);
+d(
+  "Emerald",
+  {
+    primary: "#059669",
+    primaryHover: "#047857",
+    success: "#16a34a",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
+  { primary: "#064e3b", secondary: "#065f46", muted: "#34d399" },
+  "#6ee7b7"
+);
+d(
+  "Amber",
+  {
+    primary: "#d97706",
+    primaryHover: "#b45309",
+    success: "#16a34a",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
+  { primary: "#451a03", secondary: "#78350f", muted: "#f59e0b" },
+  "#fcd34d"
+);
+d(
+  "Violet",
+  {
+    primary: "#7c3aed",
+    primaryHover: "#6d28d9",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f5f3ff", secondary: "#ede9fe", tertiary: "#ddd6fe", hover: "#ede9fe" },
+  { primary: "#2e1065", secondary: "#4c1d95", muted: "#a78bfa" },
+  "#c4b5fd"
+);
+d(
+  "Teal",
+  {
+    primary: "#0d9488",
+    primaryHover: "#0f766e",
+    success: "#16a34a",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#f0fdfa", secondary: "#ccfbf1", tertiary: "#99f6e4", hover: "#ccfbf1" },
+  { primary: "#134e4a", secondary: "#115e59", muted: "#2dd4bf" },
+  "#5eead4"
+);
+d(
+  "Indigo",
+  {
+    primary: "#4f46e5",
+    primaryHover: "#4338ca",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#eef2ff", secondary: "#e0e7ff", tertiary: "#c7d2fe", hover: "#e0e7ff" },
+  { primary: "#1e1b4b", secondary: "#312e81", muted: "#818cf8" },
+  "#a5b4fc"
+);
+d(
+  "Cyan",
+  {
+    primary: "#0891b2",
+    primaryHover: "#0e7490",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#0284c7"
+  },
+  { primary: "#ecfeff", secondary: "#cffafe", tertiary: "#a5f3fc", hover: "#cffafe" },
+  { primary: "#164e63", secondary: "#155e75", muted: "#22d3ee" },
+  "#67e8f9"
+);
+d(
+  "Lime",
+  {
+    primary: "#65a30d",
+    primaryHover: "#4d7c0f",
+    success: "#16a34a",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#f7fee7", secondary: "#ecfccb", tertiary: "#d9f99d", hover: "#ecfccb" },
+  { primary: "#1a2e05", secondary: "#365314", muted: "#84cc16" },
+  "#bef264"
+);
+d(
+  "Pink",
+  {
+    primary: "#db2777",
+    primaryHover: "#be185d",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#dc2626",
+    info: "#06b6d4"
+  },
+  { primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
+  { primary: "#500724", secondary: "#831843", muted: "#f472b6" },
+  "#f9a8d4"
+);
+d(
+  "Orange",
+  {
+    primary: "#ea580c",
+    primaryHover: "#c2410c",
+    success: "#16a34a",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
+  { primary: "#431407", secondary: "#7c2d12", muted: "#fb923c" },
+  "#fdba74"
+);
+d(
+  "Fuchsia",
+  {
+    primary: "#c026d3",
+    primaryHover: "#a21caf",
+    success: "#10b981",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#fdf4ff", secondary: "#fae8ff", tertiary: "#f5d0fe", hover: "#fae8ff" },
+  { primary: "#4a044e", secondary: "#701a75", muted: "#d946ef" },
+  "#e879f9"
+);
+d(
+  "Sky",
+  {
+    primary: "#0284c7",
+    primaryHover: "#0369a1",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
+  { primary: "#0c4a6e", secondary: "#075985", muted: "#38bdf8" },
+  "#7dd3fc"
+);
+d(
+  "Ruby",
+  {
+    primary: "#be123c",
+    primaryHover: "#9f1239",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
+  { primary: "#4c0519", secondary: "#881337", muted: "#fb7185" },
+  "#fda4af"
+);
+d(
+  "Coral",
+  {
+    primary: "#f97316",
+    primaryHover: "#ea580c",
+    success: "#10b981",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
+  { primary: "#431407", secondary: "#9a3412", muted: "#fb923c" },
+  "#fdba74"
+);
+x(
+  "Midnight",
+  {
+    primary: "#818cf8",
+    primaryHover: "#6366f1",
+    success: "#34d399",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#22d3ee"
+  },
+  { primary: "#020617", secondary: "#0f172a", tertiary: "#1e293b", hover: "#1e293b" },
+  { primary: "#f1f5f9", secondary: "#94a3b8", muted: "#475569" },
+  "#1e293b"
+);
+x(
+  "Obsidian",
+  {
+    primary: "#a78bfa",
+    primaryHover: "#8b5cf6",
+    success: "#4ade80",
+    warning: "#facc15",
+    error: "#fb7185",
+    info: "#38bdf8"
+  },
+  { primary: "#09090b", secondary: "#18181b", tertiary: "#27272a", hover: "#27272a" },
+  { primary: "#fafafa", secondary: "#a1a1aa", muted: "#52525b" },
+  "#3f3f46"
+);
+x(
+  "Eclipse",
+  {
+    primary: "#c084fc",
+    primaryHover: "#a855f7",
+    success: "#34d399",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#67e8f9"
+  },
+  { primary: "#0c0a1d", secondary: "#1a1533", tertiary: "#2a2248", hover: "#2a2248" },
+  { primary: "#f5f3ff", secondary: "#a78bfa", muted: "#6d5eac" },
+  "#3b3266"
+);
+x(
+  "Onyx",
+  {
+    primary: "#60a5fa",
+    primaryHover: "#3b82f6",
+    success: "#4ade80",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#22d3ee"
+  },
+  { primary: "#000000", secondary: "#0a0a0a", tertiary: "#171717", hover: "#171717" },
+  { primary: "#ffffff", secondary: "#a3a3a3", muted: "#525252" },
+  "#262626"
+);
+x(
+  "Carbon",
+  {
+    primary: "#38bdf8",
+    primaryHover: "#0ea5e9",
+    success: "#4ade80",
+    warning: "#facc15",
+    error: "#f87171",
+    info: "#67e8f9"
+  },
+  { primary: "#161616", secondary: "#262626", tertiary: "#393939", hover: "#393939" },
+  { primary: "#f4f4f4", secondary: "#c6c6c6", muted: "#6f6f6f" },
+  "#525252"
+);
+x(
+  "Cosmos",
+  {
+    primary: "#6366f1",
+    primaryHover: "#4f46e5",
+    success: "#34d399",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#22d3ee"
+  },
+  { primary: "#030712", secondary: "#111827", tertiary: "#1f2937", hover: "#1f2937" },
+  { primary: "#e5e7eb", secondary: "#9ca3af", muted: "#4b5563" },
+  "#374151"
+);
+x(
+  "Nebula",
+  {
+    primary: "#e879f9",
+    primaryHover: "#d946ef",
+    success: "#4ade80",
+    warning: "#fbbf24",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#0d0117", secondary: "#1a0533", tertiary: "#2d0a52", hover: "#2d0a52" },
+  { primary: "#fae8ff", secondary: "#d8b4fe", muted: "#7c3aed" },
+  "#581c87"
+);
+x(
+  "Abyss",
+  {
+    primary: "#22d3ee",
+    primaryHover: "#06b6d4",
+    success: "#34d399",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#38bdf8"
+  },
+  { primary: "#001219", secondary: "#002a3a", tertiary: "#003e54", hover: "#003e54" },
+  { primary: "#e0f2fe", secondary: "#7dd3fc", muted: "#0369a1" },
+  "#075985"
+);
+x(
+  "Shadow",
+  {
+    primary: "#a3a3a3",
+    primaryHover: "#737373",
+    success: "#4ade80",
+    warning: "#facc15",
+    error: "#f87171",
+    info: "#38bdf8"
+  },
+  { primary: "#171717", secondary: "#1f1f1f", tertiary: "#2a2a2a", hover: "#2a2a2a" },
+  { primary: "#e5e5e5", secondary: "#a3a3a3", muted: "#525252" },
+  "#404040"
+);
+x(
+  "Emerald Dark",
+  {
+    primary: "#34d399",
+    primaryHover: "#10b981",
+    success: "#4ade80",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#22d3ee"
+  },
+  { primary: "#022c22", secondary: "#064e3b", tertiary: "#065f46", hover: "#065f46" },
+  { primary: "#ecfdf5", secondary: "#6ee7b7", muted: "#047857" },
+  "#047857"
+);
+d(
+  "Forest",
+  {
+    primary: "#166534",
+    primaryHover: "#14532d",
+    success: "#22c55e",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
+  { primary: "#052e16", secondary: "#166534", muted: "#4ade80" },
+  "#86efac"
+);
+d(
+  "Ocean",
+  {
+    primary: "#0369a1",
+    primaryHover: "#075985",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
+  { primary: "#0c4a6e", secondary: "#0369a1", muted: "#38bdf8" },
+  "#7dd3fc"
+);
+d(
+  "Desert",
+  {
+    primary: "#b45309",
+    primaryHover: "#92400e",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fefce8", secondary: "#fef9c3", tertiary: "#fef08a", hover: "#fef9c3" },
+  { primary: "#422006", secondary: "#713f12", muted: "#ca8a04" },
+  "#fde047"
+);
+d(
+  "Sunset",
+  {
+    primary: "#ea580c",
+    primaryHover: "#c2410c",
+    success: "#16a34a",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
+  { primary: "#431407", secondary: "#9a3412", muted: "#f97316" },
+  "#fdba74"
+);
+d(
+  "Aurora",
+  {
+    primary: "#0d9488",
+    primaryHover: "#0f766e",
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f0fdfa", secondary: "#ccfbf1", tertiary: "#99f6e4", hover: "#ccfbf1" },
+  { primary: "#134e4a", secondary: "#115e59", muted: "#2dd4bf" },
+  "#5eead4"
+);
+d(
+  "Lavender",
+  {
+    primary: "#7e22ce",
+    primaryHover: "#6b21a8",
+    success: "#16a34a",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#faf5ff", secondary: "#f3e8ff", tertiary: "#e9d5ff", hover: "#f3e8ff" },
+  { primary: "#3b0764", secondary: "#581c87", muted: "#a855f7" },
+  "#d8b4fe"
+);
+d(
+  "Autumn",
+  {
+    primary: "#c2410c",
+    primaryHover: "#9a3412",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fef2f2", secondary: "#fee2e2", tertiary: "#fecaca", hover: "#fee2e2" },
+  { primary: "#450a0a", secondary: "#7f1d1d", muted: "#f87171" },
+  "#fca5a5"
+);
+d(
+  "Spring",
+  {
+    primary: "#16a34a",
+    primaryHover: "#15803d",
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
+  { primary: "#14532d", secondary: "#166534", muted: "#4ade80" },
+  "#86efac"
+);
+d(
+  "Arctic",
+  {
+    primary: "#0ea5e9",
+    primaryHover: "#0284c7",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
+  { primary: "#0c4a6e", secondary: "#0369a1", muted: "#7dd3fc" },
+  "#bae6fd"
+);
+d(
+  "Tropical",
+  {
+    primary: "#0d9488",
+    primaryHover: "#0f766e",
+    success: "#16a34a",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
+  { primary: "#064e3b", secondary: "#065f46", muted: "#6ee7b7" },
+  "#a7f3d0"
+);
+d(
+  "Pastel Rose",
+  {
+    primary: "#f472b6",
+    primaryHover: "#ec4899",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
+  { primary: "#831843", secondary: "#9d174d", muted: "#f9a8d4" },
+  "#f9a8d4"
+);
+d(
+  "Pastel Sky",
+  {
+    primary: "#38bdf8",
+    primaryHover: "#0ea5e9",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
+  { primary: "#075985", secondary: "#0369a1", muted: "#7dd3fc" },
+  "#bae6fd"
+);
+d(
+  "Pastel Mint",
+  {
+    primary: "#34d399",
+    primaryHover: "#10b981",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#ecfdf5", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
+  { primary: "#065f46", secondary: "#047857", muted: "#6ee7b7" },
+  "#a7f3d0"
+);
+d(
+  "Pastel Peach",
+  {
+    primary: "#fb923c",
+    primaryHover: "#f97316",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#fff7ed", secondary: "#ffedd5", tertiary: "#fed7aa", hover: "#ffedd5" },
+  { primary: "#7c2d12", secondary: "#9a3412", muted: "#fdba74" },
+  "#fed7aa"
+);
+d(
+  "Pastel Lavender",
+  {
+    primary: "#a78bfa",
+    primaryHover: "#8b5cf6",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#f5f3ff", secondary: "#ede9fe", tertiary: "#ddd6fe", hover: "#ede9fe" },
+  { primary: "#4c1d95", secondary: "#5b21b6", muted: "#c4b5fd" },
+  "#ddd6fe"
+);
+d(
+  "Pastel Lemon",
+  {
+    primary: "#facc15",
+    primaryHover: "#eab308",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#fefce8", secondary: "#fef9c3", tertiary: "#fef08a", hover: "#fef9c3" },
+  { primary: "#713f12", secondary: "#854d0e", muted: "#fde047" },
+  "#fef08a"
+);
+d(
+  "Pastel Sage",
+  {
+    primary: "#86efac",
+    primaryHover: "#4ade80",
+    success: "#22c55e",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
+  { primary: "#166534", secondary: "#15803d", muted: "#86efac" },
+  "#bbf7d0"
+);
+d(
+  "Pastel Coral",
+  {
+    primary: "#fb7185",
+    primaryHover: "#f43f5e",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#ef4444",
+    info: "#67e8f9"
+  },
+  { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
+  { primary: "#881337", secondary: "#9f1239", muted: "#fda4af" },
+  "#fecdd3"
+);
+d(
+  "Banking",
+  {
+    primary: "#1e3a5f",
+    primaryHover: "#152c4a",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
+  { primary: "#0f172a", secondary: "#334155", muted: "#94a3b8" },
+  "#cbd5e1"
+);
+d(
+  "Healthcare",
+  {
+    primary: "#0891b2",
+    primaryHover: "#0e7490",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#f0fdfa", secondary: "#e0f7fa", tertiary: "#b2ebf2", hover: "#e0f7fa" },
+  { primary: "#134e4a", secondary: "#1a6b6a", muted: "#80cbc4" },
+  "#b2dfdb"
+);
+d(
+  "Legal",
+  {
+    primary: "#1e293b",
+    primaryHover: "#0f172a",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0284c7"
+  },
+  { primary: "#fafaf9", secondary: "#f5f5f4", tertiary: "#e7e5e4", hover: "#e7e5e4" },
+  { primary: "#0f172a", secondary: "#44403c", muted: "#a8a29e" },
+  "#d6d3d1"
+);
+d(
+  "Tech Startup",
+  {
+    primary: "#7c3aed",
+    primaryHover: "#6d28d9",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#faf5ff", secondary: "#f3e8ff", tertiary: "#e9d5ff", hover: "#f3e8ff" },
+  { primary: "#1e1b4b", secondary: "#4c1d95", muted: "#a78bfa" },
+  "#c4b5fd"
+);
+d(
+  "Enterprise",
+  {
+    primary: "#1e40af",
+    primaryHover: "#1e3a8a",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#eff6ff", secondary: "#dbeafe", tertiary: "#bfdbfe", hover: "#dbeafe" },
+  { primary: "#1e3a5f", secondary: "#1e40af", muted: "#60a5fa" },
+  "#93c5fd"
+);
+d(
+  "Government",
+  {
+    primary: "#1d4ed8",
+    primaryHover: "#1e40af",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#f8fafc", secondary: "#f1f5f9", tertiary: "#e2e8f0", hover: "#e2e8f0" },
+  { primary: "#0f172a", secondary: "#1e293b", muted: "#64748b" },
+  "#cbd5e1"
+);
+d(
+  "Education",
+  {
+    primary: "#059669",
+    primaryHover: "#047857",
+    success: "#16a34a",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#0891b2"
+  },
+  { primary: "#f0fdf9", secondary: "#d1fae5", tertiary: "#a7f3d0", hover: "#d1fae5" },
+  { primary: "#064e3b", secondary: "#065f46", muted: "#6ee7b7" },
+  "#a7f3d0"
+);
+d(
+  "Real Estate",
+  {
+    primary: "#92400e",
+    primaryHover: "#78350f",
+    success: "#059669",
+    warning: "#b45309",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
+  { primary: "#422006", secondary: "#713f12", muted: "#d97706" },
+  "#fcd34d"
+);
+d(
+  "Nord",
+  {
+    primary: "#5e81ac",
+    primaryHover: "#4c6b90",
+    success: "#a3be8c",
+    warning: "#ebcb8b",
+    error: "#bf616a",
+    info: "#88c0d0"
+  },
+  { primary: "#eceff4", secondary: "#e5e9f0", tertiary: "#d8dee9", hover: "#d8dee9" },
+  { primary: "#2e3440", secondary: "#3b4252", muted: "#4c566a" },
+  "#d8dee9"
+);
+x(
+  "Dracula",
+  {
+    primary: "#bd93f9",
+    primaryHover: "#9d79d9",
+    success: "#50fa7b",
+    warning: "#f1fa8c",
+    error: "#ff5555",
+    info: "#8be9fd"
+  },
+  { primary: "#282a36", secondary: "#343746", tertiary: "#44475a", hover: "#44475a" },
+  { primary: "#f8f8f2", secondary: "#c0c0c0", muted: "#6272a4" },
+  "#44475a"
+);
+d(
+  "Solarized Light",
+  {
+    primary: "#268bd2",
+    primaryHover: "#1a6da0",
+    success: "#859900",
+    warning: "#b58900",
+    error: "#dc322f",
+    info: "#2aa198"
+  },
+  { primary: "#fdf6e3", secondary: "#eee8d5", tertiary: "#e0dbc7", hover: "#eee8d5" },
+  { primary: "#073642", secondary: "#586e75", muted: "#93a1a1" },
+  "#eee8d5"
+);
+x(
+  "Solarized Dark",
+  {
+    primary: "#268bd2",
+    primaryHover: "#3d98db",
+    success: "#859900",
+    warning: "#b58900",
+    error: "#dc322f",
+    info: "#2aa198"
+  },
+  { primary: "#002b36", secondary: "#073642", tertiary: "#0a4858", hover: "#073642" },
+  { primary: "#eee8d5", secondary: "#93a1a1", muted: "#586e75" },
+  "#073642"
+);
+x(
+  "Monokai",
+  {
+    primary: "#66d9ef",
+    primaryHover: "#45c0d6",
+    success: "#a6e22e",
+    warning: "#e6db74",
+    error: "#f92672",
+    info: "#66d9ef"
+  },
+  { primary: "#272822", secondary: "#34352e", tertiary: "#3e3d32", hover: "#3e3d32" },
+  { primary: "#f8f8f2", secondary: "#cfcfc2", muted: "#75715e" },
+  "#3e3d32"
+);
+x(
+  "One Dark",
+  {
+    primary: "#61afef",
+    primaryHover: "#4b9ee0",
+    success: "#98c379",
+    warning: "#e5c07b",
+    error: "#e06c75",
+    info: "#56b6c2"
+  },
+  { primary: "#282c34", secondary: "#2c313a", tertiary: "#353b45", hover: "#353b45" },
+  { primary: "#abb2bf", secondary: "#828997", muted: "#545862" },
+  "#3e4452"
+);
+x(
+  "Synthwave",
+  {
+    primary: "#ff7edb",
+    primaryHover: "#e660c2",
+    success: "#72f1b8",
+    warning: "#fede5d",
+    error: "#fe4450",
+    info: "#36f9f6"
+  },
+  { primary: "#241b2f", secondary: "#2d2140", tertiary: "#362a50", hover: "#362a50" },
+  { primary: "#f0e4fc", secondary: "#b4a0cc", muted: "#6c5c84" },
+  "#4a3866"
+);
+d(
+  "Vaporwave",
+  {
+    primary: "#ff71ce",
+    primaryHover: "#e655b5",
+    success: "#78dcca",
+    warning: "#ffb86c",
+    error: "#ff5555",
+    info: "#76e8fc"
+  },
+  { primary: "#fce4f7", secondary: "#e8d0f4", tertiary: "#d4bcf0", hover: "#e8d0f4" },
+  { primary: "#4a1a4e", secondary: "#7b3f7d", muted: "#c080c0" },
+  "#d8a8e8"
+);
+x(
+  "Terminal Green",
+  {
+    primary: "#00ff41",
+    primaryHover: "#00cc34",
+    success: "#00ff41",
+    warning: "#ffff00",
+    error: "#ff0000",
+    info: "#00ffff"
+  },
+  { primary: "#0a0a0a", secondary: "#0d1a0d", tertiary: "#1a2e1a", hover: "#1a2e1a" },
+  { primary: "#00ff41", secondary: "#00cc33", muted: "#008822" },
+  "#003300"
+);
+d(
+  "Sepia",
+  {
+    primary: "#8b6914",
+    primaryHover: "#704f10",
+    success: "#6b8e23",
+    warning: "#cd853f",
+    error: "#b22222",
+    info: "#5f9ea0"
+  },
+  { primary: "#faf0e6", secondary: "#f5e6d3", tertiary: "#eddcc7", hover: "#f5e6d3" },
+  { primary: "#3e2723", secondary: "#5d4037", muted: "#a1887f" },
+  "#d7ccc8"
+);
+d(
+  "Vintage",
+  {
+    primary: "#8d6e63",
+    primaryHover: "#6d4c41",
+    success: "#66bb6a",
+    warning: "#ffb300",
+    error: "#e53935",
+    info: "#29b6f6"
+  },
+  { primary: "#efebe9", secondary: "#d7ccc8", tertiary: "#bcaaa4", hover: "#d7ccc8" },
+  { primary: "#3e2723", secondary: "#5d4037", muted: "#a1887f" },
+  "#bcaaa4"
+);
+x(
+  "Cyberpunk",
+  {
+    primary: "#00f0ff",
+    primaryHover: "#00c8d4",
+    success: "#39ff14",
+    warning: "#ffff00",
+    error: "#ff003c",
+    info: "#bf00ff"
+  },
+  { primary: "#0a0e17", secondary: "#131824", tertiary: "#1c2333", hover: "#1c2333" },
+  { primary: "#e0fbfc", secondary: "#80d4dd", muted: "#3a6b72" },
+  "#1c3a44"
+);
+x(
+  "Neon",
+  {
+    primary: "#ff00ff",
+    primaryHover: "#cc00cc",
+    success: "#00ff00",
+    warning: "#ffff00",
+    error: "#ff0000",
+    info: "#00ffff"
+  },
+  { primary: "#0d0d0d", secondary: "#1a1a1a", tertiary: "#262626", hover: "#262626" },
+  { primary: "#ffffff", secondary: "#cccccc", muted: "#666666" },
+  "#333333"
+);
+x(
+  "Retrowave",
+  {
+    primary: "#f77fbe",
+    primaryHover: "#e462a3",
+    success: "#72f1b8",
+    warning: "#ffe261",
+    error: "#ff4444",
+    info: "#79e8fb"
+  },
+  { primary: "#1b0a2e", secondary: "#261440", tertiary: "#321e52", hover: "#321e52" },
+  { primary: "#ffe6f7", secondary: "#c9a0c9", muted: "#6b4c7a" },
+  "#4a2d66"
+);
+d(
+  "Christmas",
+  {
+    primary: "#c41e3a",
+    primaryHover: "#a01830",
+    success: "#228b22",
+    warning: "#ffd700",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fef2f2", secondary: "#fde8e8", tertiary: "#f8d0d0", hover: "#fde8e8" },
+  { primary: "#3b0a0a", secondary: "#7f1d1d", muted: "#dc6868" },
+  "#e8a0a0"
+);
+x(
+  "Halloween",
+  {
+    primary: "#ff6600",
+    primaryHover: "#e05500",
+    success: "#4ade80",
+    warning: "#fbbf24",
+    error: "#ff0000",
+    info: "#9333ea"
+  },
+  { primary: "#1a0a00", secondary: "#2d1500", tertiary: "#402000", hover: "#402000" },
+  { primary: "#ffedd5", secondary: "#fdba74", muted: "#9a5c28" },
+  "#5c3400"
+);
+d(
+  "Valentine",
+  {
+    primary: "#e11d48",
+    primaryHover: "#be123c",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#dc2626",
+    info: "#ec4899"
+  },
+  { primary: "#fff1f2", secondary: "#ffe4e6", tertiary: "#fecdd3", hover: "#ffe4e6" },
+  { primary: "#4c0519", secondary: "#881337", muted: "#f9a8d4" },
+  "#fda4af"
+);
+d(
+  "Easter",
+  {
+    primary: "#a78bfa",
+    primaryHover: "#8b5cf6",
+    success: "#4ade80",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#fef9ff", secondary: "#f3e8ff", tertiary: "#e8d5ff", hover: "#f3e8ff" },
+  { primary: "#581c87", secondary: "#6d28d9", muted: "#c4b5fd" },
+  "#ddd6fe"
+);
+d(
+  "Summer Beach",
+  {
+    primary: "#0ea5e9",
+    primaryHover: "#0284c7",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
+  { primary: "#0c4a6e", secondary: "#0369a1", muted: "#7dd3fc" },
+  "#fcd34d"
+);
+d(
+  "Winter Frost",
+  {
+    primary: "#3b82f6",
+    primaryHover: "#2563eb",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#f0f9ff", secondary: "#e0f2fe", tertiary: "#bae6fd", hover: "#e0f2fe" },
+  { primary: "#1e3a5f", secondary: "#1e40af", muted: "#93c5fd" },
+  "#bfdbfe"
+);
+d(
+  "Cherry Blossom",
+  {
+    primary: "#ec4899",
+    primaryHover: "#db2777",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#06b6d4"
+  },
+  { primary: "#fdf2f8", secondary: "#fce7f3", tertiary: "#fbcfe8", hover: "#fce7f3" },
+  { primary: "#831843", secondary: "#9d174d", muted: "#f9a8d4" },
+  "#fbcfe8"
+);
+d(
+  "Harvest",
+  {
+    primary: "#b45309",
+    primaryHover: "#92400e",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
+  { primary: "#451a03", secondary: "#78350f", muted: "#d97706" },
+  "#fcd34d"
+);
+d(
+  "Japanese Zen",
+  {
+    primary: "#6b7280",
+    primaryHover: "#4b5563",
+    success: "#6b8e23",
+    warning: "#d4a017",
+    error: "#c0392b",
+    info: "#5f9ea0"
+  },
+  { primary: "#faf9f6", secondary: "#f0ece3", tertiary: "#e6e0d4", hover: "#f0ece3" },
+  { primary: "#2c2c2c", secondary: "#5c5c5c", muted: "#a0998a" },
+  "#d5cec0"
+);
+d(
+  "Moroccan",
+  {
+    primary: "#c2410c",
+    primaryHover: "#9a3412",
+    success: "#15803d",
+    warning: "#ca8a04",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fffbf0", secondary: "#fef3e0", tertiary: "#fde6c4", hover: "#fef3e0" },
+  { primary: "#3a1a00", secondary: "#7c2d12", muted: "#d97706" },
+  "#f5d0a0"
+);
+d(
+  "Scandinavian",
+  {
+    primary: "#4b5563",
+    primaryHover: "#374151",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#ffffff", secondary: "#f9fafb", tertiary: "#f3f4f6", hover: "#f3f4f6" },
+  { primary: "#111827", secondary: "#374151", muted: "#9ca3af" },
+  "#e5e7eb"
+);
+d(
+  "Mediterranean",
+  {
+    primary: "#1e40af",
+    primaryHover: "#1e3a8a",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#eff6ff", secondary: "#dbeafe", tertiary: "#bfdbfe", hover: "#dbeafe" },
+  { primary: "#1e3a5f", secondary: "#2563eb", muted: "#93c5fd" },
+  "#bfdbfe"
+);
+d(
+  "Chinese New Year",
+  {
+    primary: "#dc2626",
+    primaryHover: "#b91c1c",
+    success: "#16a34a",
+    warning: "#d4a017",
+    error: "#ef4444",
+    info: "#0891b2"
+  },
+  { primary: "#fef2f2", secondary: "#fee2e2", tertiary: "#fecaca", hover: "#fee2e2" },
+  { primary: "#450a0a", secondary: "#991b1b", muted: "#f87171" },
+  "#fca5a5"
+);
+d(
+  "Indian Festive",
+  {
+    primary: "#d97706",
+    primaryHover: "#b45309",
+    success: "#16a34a",
+    warning: "#ca8a04",
+    error: "#dc2626",
+    info: "#7c3aed"
+  },
+  { primary: "#fffbeb", secondary: "#fef3c7", tertiary: "#fde68a", hover: "#fef3c7" },
+  { primary: "#451a03", secondary: "#92400e", muted: "#f59e0b" },
+  "#fcd34d"
+);
+d(
+  "Brazilian Carnival",
+  {
+    primary: "#16a34a",
+    primaryHover: "#15803d",
+    success: "#22c55e",
+    warning: "#facc15",
+    error: "#ef4444",
+    info: "#0ea5e9"
+  },
+  { primary: "#f0fdf4", secondary: "#dcfce7", tertiary: "#bbf7d0", hover: "#dcfce7" },
+  { primary: "#052e16", secondary: "#166534", muted: "#4ade80" },
+  "#86efac"
+);
+d(
+  "African Earth",
+  {
+    primary: "#92400e",
+    primaryHover: "#78350f",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#faf5f0", secondary: "#f0e6d6", tertiary: "#e6d5bb", hover: "#f0e6d6" },
+  { primary: "#2b1a0e", secondary: "#5c3d1e", muted: "#a08060" },
+  "#d4b896"
+);
+x(
+  "High Contrast Dark",
+  {
+    primary: "#ffff00",
+    primaryHover: "#cccc00",
+    success: "#00ff00",
+    warning: "#ff8c00",
+    error: "#ff0000",
+    info: "#00ffff"
+  },
+  { primary: "#000000", secondary: "#1a1a1a", tertiary: "#333333", hover: "#333333" },
+  { primary: "#ffffff", secondary: "#ffffff", muted: "#cccccc" },
+  "#ffffff"
+);
+d(
+  "Monochrome",
+  {
+    primary: "#404040",
+    primaryHover: "#262626",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#fafafa", secondary: "#f0f0f0", tertiary: "#e0e0e0", hover: "#e0e0e0" },
+  { primary: "#1a1a1a", secondary: "#404040", muted: "#808080" },
+  "#c0c0c0"
+);
+d(
+  "Enhanced Contrast",
+  {
+    primary: "#0050b3",
+    primaryHover: "#003d8c",
+    success: "#006400",
+    warning: "#cc7000",
+    error: "#cc0000",
+    info: "#006680"
+  },
+  { primary: "#ffffff", secondary: "#f5f5f5", tertiary: "#ebebeb", hover: "#ebebeb" },
+  { primary: "#000000", secondary: "#1a1a1a", muted: "#595959" },
+  "#8c8c8c"
+);
+d(
+  "Minimalist",
+  {
+    primary: "#18181b",
+    primaryHover: "#27272a",
+    success: "#22c55e",
+    warning: "#eab308",
+    error: "#ef4444",
+    info: "#3b82f6"
+  },
+  { primary: "#ffffff", secondary: "#fafafa", tertiary: "#f5f5f5", hover: "#f5f5f5" },
+  { primary: "#0a0a0a", secondary: "#404040", muted: "#a3a3a3" },
+  "#e5e5e5"
+);
+x(
+  "Warm Dark",
+  {
+    primary: "#f59e0b",
+    primaryHover: "#d97706",
+    success: "#10b981",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#38bdf8"
+  },
+  { primary: "#1c1917", secondary: "#292524", tertiary: "#44403c", hover: "#44403c" },
+  { primary: "#fafaf9", secondary: "#d6d3d1", muted: "#78716c" },
+  "#57534e"
+);
+x(
+  "Soft Dark",
+  {
+    primary: "#a78bfa",
+    primaryHover: "#8b5cf6",
+    success: "#34d399",
+    warning: "#fcd34d",
+    error: "#fb7185",
+    info: "#67e8f9"
+  },
+  { primary: "#1e1e2e", secondary: "#262637", tertiary: "#313147", hover: "#313147" },
+  { primary: "#e8e8f0", secondary: "#a0a0b8", muted: "#5c5c74" },
+  "#3e3e58"
+);
+d(
+  "Coffee",
+  {
+    primary: "#6f4e37",
+    primaryHover: "#5c3d28",
+    success: "#4d7c0f",
+    warning: "#a16207",
+    error: "#b91c1c",
+    info: "#0e7490"
+  },
+  { primary: "#faf6f1", secondary: "#f0e8dc", tertiary: "#e6d8c6", hover: "#f0e8dc" },
+  { primary: "#2c1a0e", secondary: "#5c3d28", muted: "#a08868" },
+  "#d4c4a8"
+);
+d(
+  "Wine",
+  {
+    primary: "#7f1d1d",
+    primaryHover: "#641717",
+    success: "#059669",
+    warning: "#d97706",
+    error: "#dc2626",
+    info: "#0891b2"
+  },
+  { primary: "#fef2f2", secondary: "#fde8e8", tertiary: "#f8d0d0", hover: "#fde8e8" },
+  { primary: "#3b0a0a", secondary: "#7f1d1d", muted: "#dc6868" },
+  "#e8a0a0"
+);
+$(null);
+const Be = {
   id: crypto.randomUUID(),
   name: "Untitled Project",
   resolution: { width: 1920, height: 1080, label: "1080p" },
@@ -32,7 +1790,7 @@ const ue = {
     audio: { sampleRate: 48e3, channels: 2, bitrate: 320 },
     video: { codec: "h264", bitrate: 8e3, profile: "high" }
   }
-}, me = [
+}, We = [
   { type: "blur", name: "Blur", icon: "🔵" },
   { type: "brightness", name: "Brightness", icon: "☀️" },
   { type: "contrast", name: "Contrast", icon: "◐" },
@@ -42,79 +1800,89 @@ const ue = {
   { type: "chromaKey", name: "Chroma Key", icon: "🟢" },
   { type: "crop", name: "Crop", icon: "✂️" },
   { type: "zoom", name: "Zoom", icon: "🔍" }
-], he = [
+], Ke = [
   { type: "fade", name: "Fade" },
   { type: "dissolve", name: "Dissolve" },
   { type: "wipe", name: "Wipe" },
   { type: "slide", name: "Slide" },
   { type: "zoom", name: "Zoom" },
   { type: "push", name: "Push" }
-], be = ({
-  project: M,
-  onProjectChange: S,
-  onExport: D,
-  onAssetUpload: R,
-  className: F = ""
+], Ge = [
+  {
+    target: ".nice-video-editor",
+    titleKey: "tutorial.videoEditorPro.intro.title",
+    title: "Video editor",
+    contentKey: "tutorial.videoEditorPro.intro.content",
+    content: "Add media to the timeline, arrange and trim clips, apply effects and transitions, then configure and run the export.",
+    placement: "auto"
+  }
+], Xe = ({
+  project: l,
+  onProjectChange: m,
+  onExport: f,
+  onAssetUpload: C,
+  className: I = "",
+  tutorial: T
 }) => {
-  const [c, J] = p(M || ue), [n, Q] = p(
+  const [p, i] = v(l || Be), [D, b] = v(
     "timeline"
-  ), [g, K] = p(null), [m, C] = p(null), [b, P] = p(0), [k, L] = p(!1), [x, U] = p(1), [q, V] = p(!0), [y, A] = p(null), X = T(null), ne = T(null), z = T(null);
-  re(() => {
-    M && J(M);
-  }, [M]), re(() => () => {
-    z.current && clearInterval(z.current);
+  ), [E, y] = v(null), [k, S] = v(null), [z, R] = v(0), [q, W] = v(!1), [M, J] = v(1), [K, P] = v(!0), [U, O] = v(null), oe = F(null), se = F(null), A = F(null);
+  ne(() => {
+    l && i(l);
+  }, [l]), ne(() => () => {
+    A.current && clearInterval(A.current);
   }, []);
-  const f = le(
-    (s) => {
-      const r = { ...c, ...s };
-      J(r), S == null || S(r);
+  const w = me(
+    (n) => {
+      const o = { ...p, ...n };
+      i(o), m == null || m(o);
     },
-    [c, S]
-  ), _ = async (s) => {
-    const r = [];
-    for (const u of Array.from(s)) {
-      const t = u.type.startsWith("video/") ? "video" : u.type.startsWith("audio/") ? "audio" : "image";
-      let i;
-      R ? i = await R(u) : i = {
+    [p, m]
+  ), g = async (n) => {
+    const o = [];
+    for (const a of Array.from(n)) {
+      const t = a.type.startsWith("video/") ? "video" : a.type.startsWith("audio/") ? "audio" : "image";
+      let c;
+      C ? c = await C(a) : c = {
         id: crypto.randomUUID(),
         type: t,
-        name: u.name,
-        url: URL.createObjectURL(u),
-        size: u.size
-      }, r.push(i);
+        name: a.name,
+        url: URL.createObjectURL(a),
+        size: a.size
+      }, o.push(c);
     }
-    f({ assets: [...c.assets, ...r] });
-  }, h = (s) => {
-    const r = {
+    w({ assets: [...p.assets, ...o] });
+  }, B = (n) => {
+    const o = {
       id: crypto.randomUUID(),
-      type: s,
-      name: `${s.charAt(0).toUpperCase() + s.slice(1)} ${c.tracks.filter((u) => u.type === s).length + 1}`,
+      type: n,
+      name: `${n.charAt(0).toUpperCase() + n.slice(1)} ${p.tracks.filter((a) => a.type === n).length + 1}`,
       items: [],
       muted: !1,
       locked: !1,
       visible: !0
     };
-    f({ tracks: [...c.tracks, r] });
-  }, W = (s) => {
-    f({ tracks: c.tracks.filter((r) => r.id !== s) }), g === s && K(null);
-  }, G = (s) => {
-    f({
-      tracks: c.tracks.map((r) => r.id === s ? { ...r, muted: !r.muted } : r)
+    w({ tracks: [...p.tracks, o] });
+  }, X = (n) => {
+    w({ tracks: p.tracks.filter((o) => o.id !== n) }), E === n && y(null);
+  }, G = (n) => {
+    w({
+      tracks: p.tracks.map((o) => o.id === n ? { ...o, muted: !o.muted } : o)
     });
-  }, O = (s) => {
-    f({
-      tracks: c.tracks.map((r) => r.id === s ? { ...r, locked: !r.locked } : r)
+  }, re = (n) => {
+    w({
+      tracks: p.tracks.map((o) => o.id === n ? { ...o, locked: !o.locked } : o)
     });
-  }, ee = (s, r) => {
-    const u = c.tracks.find((d) => d.id === s);
-    if (!u || u.locked)
+  }, _ = (n, o) => {
+    const a = p.tracks.find((h) => h.id === n);
+    if (!a || a.locked)
       return;
-    const t = u.items[u.items.length - 1], i = t ? t.startTime + t.duration : 0, o = {
+    const t = a.items[a.items.length - 1], c = t ? t.startTime + t.duration : 0, u = {
       id: crypto.randomUUID(),
-      assetId: r.id,
-      type: r.type,
-      startTime: i,
-      duration: r.duration || 5,
+      assetId: o.id,
+      type: o.type,
+      startTime: c,
+      duration: o.duration || 5,
       offset: 0,
       properties: {
         x: 0,
@@ -126,47 +1894,47 @@ const ue = {
       effects: [],
       transitions: []
     };
-    f({
-      tracks: c.tracks.map(
-        (d) => d.id === s ? { ...d, items: [...d.items, o] } : d
+    w({
+      tracks: p.tracks.map(
+        (h) => h.id === n ? { ...h, items: [...h.items, u] } : h
       )
     });
-  }, w = (s, r, u) => {
+  }, Y = (n, o, a) => {
     const t = {
       id: crypto.randomUUID(),
-      type: u,
-      name: u.charAt(0).toUpperCase() + u.slice(1),
-      parameters: E(u)
+      type: a,
+      name: a.charAt(0).toUpperCase() + a.slice(1),
+      parameters: ce(a)
     };
-    f({
-      tracks: c.tracks.map(
-        (i) => i.id === s ? {
-          ...i,
-          items: i.items.map(
-            (o) => o.id === r ? { ...o, effects: [...o.effects, t] } : o
+    w({
+      tracks: p.tracks.map(
+        (c) => c.id === n ? {
+          ...c,
+          items: c.items.map(
+            (u) => u.id === o ? { ...u, effects: [...u.effects, t] } : u
           )
-        } : i
+        } : c
       )
     });
-  }, H = (s, r, u, t) => {
-    const i = {
+  }, L = (n, o, a, t) => {
+    const c = {
       id: crypto.randomUUID(),
-      type: u,
+      type: a,
       duration: 0.5,
       position: t
     };
-    f({
-      tracks: c.tracks.map(
-        (o) => o.id === s ? {
-          ...o,
-          items: o.items.map(
-            (d) => d.id === r ? { ...d, transitions: [...d.transitions, i] } : d
+    w({
+      tracks: p.tracks.map(
+        (u) => u.id === n ? {
+          ...u,
+          items: u.items.map(
+            (h) => h.id === o ? { ...h, transitions: [...h.transitions, c] } : h
           )
-        } : o
+        } : u
       )
     });
-  }, E = (s) => {
-    switch (s) {
+  }, ce = (n) => {
+    switch (n) {
       case "blur":
         return { radius: 5 };
       case "brightness":
@@ -188,206 +1956,207 @@ const ue = {
       default:
         return {};
     }
-  }, ie = () => {
-    k ? (z.current && clearInterval(z.current), L(!1)) : (z.current = setInterval(() => {
-      P((s) => {
-        const r = Math.max(
-          ...c.tracks.flatMap((u) => u.items.map((t) => t.startTime + t.duration)),
+  }, de = () => {
+    q ? (A.current && clearInterval(A.current), W(!1)) : (A.current = setInterval(() => {
+      R((n) => {
+        const o = Math.max(
+          ...p.tracks.flatMap((a) => a.items.map((t) => t.startTime + t.duration)),
           0
         );
-        return s >= r ? (clearInterval(z.current), L(!1), 0) : s + 1 / c.frameRate;
+        return n >= o ? (clearInterval(A.current), W(!1), 0) : n + 1 / p.frameRate;
       });
-    }, 1e3 / c.frameRate), L(!0));
-  }, Y = (s) => {
-    P(Math.max(0, s));
-  }, te = async () => {
-    if (D) {
-      A(0);
+    }, 1e3 / p.frameRate), W(!0));
+  }, Q = (n) => {
+    R(Math.max(0, n));
+  }, ee = async () => {
+    if (f) {
+      O(0);
       try {
-        const s = setInterval(() => {
-          A((r) => r !== null && r < 90 ? r + Math.random() * 10 : r);
+        const n = setInterval(() => {
+          O((o) => o !== null && o < 90 ? o + Math.random() * 10 : o);
         }, 500);
-        await D(c, c.settings.video.codec), clearInterval(s), A(100), setTimeout(() => A(null), 2e3);
-      } catch (s) {
-        A(null), console.error("Export failed:", s);
+        await f(p, p.settings.video.codec), clearInterval(n), O(100), setTimeout(() => O(null), 2e3);
+      } catch (n) {
+        O(null), console.error("Export failed:", n);
       }
     }
-  }, Z = (s) => {
-    const r = Math.floor(s / 60), u = Math.floor(s % 60), t = Math.floor(s % 1 * c.frameRate);
-    return `${r.toString().padStart(2, "0")}:${u.toString().padStart(2, "0")}:${t.toString().padStart(2, "0")}`;
-  }, j = () => {
-    for (const s of c.tracks) {
-      const r = s.items.find((u) => u.id === m);
-      if (r)
-        return { track: s, item: r };
+  }, te = (n) => {
+    const o = Math.floor(n / 60), a = Math.floor(n % 60), t = Math.floor(n % 1 * p.frameRate);
+    return `${o.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}:${t.toString().padStart(2, "0")}`;
+  }, Z = () => {
+    for (const n of p.tracks) {
+      const o = n.items.find((a) => a.id === k);
+      if (o)
+        return { track: n, item: o };
     }
     return null;
   };
-  return /* @__PURE__ */ a("div", { className: `nice-video-editor ${F}`, children: [
-    /* @__PURE__ */ a("header", { className: "video-editor__header", children: [
-      /* @__PURE__ */ a("div", { className: "header__project-info", children: [
+  return /* @__PURE__ */ r("div", { className: `nice-video-editor ${I}`, style: { position: "relative" }, children: [
+    /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(Le, { steps: Ue(T, Ge) }) }),
+    /* @__PURE__ */ r("header", { className: "video-editor__header", children: [
+      /* @__PURE__ */ r("div", { className: "header__project-info", children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "text",
-            value: c.name,
-            onChange: (s) => f({ name: s.target.value }),
+            value: p.name,
+            onChange: (n) => w({ name: n.target.value }),
             className: "project-name-input"
           }
         ),
-        /* @__PURE__ */ a("span", { className: "project-settings", children: [
-          c.resolution.width,
+        /* @__PURE__ */ r("span", { className: "project-settings", children: [
+          p.resolution.width,
           "x",
-          c.resolution.height,
+          p.resolution.height,
           " • ",
-          c.frameRate,
+          p.frameRate,
           "fps"
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: "header__tabs", children: ["timeline", "effects", "transitions", "export"].map((s) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "header__tabs", children: ["timeline", "effects", "transitions", "export"].map((n) => /* @__PURE__ */ e(
         "button",
         {
-          className: `tab-button ${n === s ? "tab-button--active" : ""}`,
-          onClick: () => Q(s),
-          children: s.charAt(0).toUpperCase() + s.slice(1)
+          className: `tab-button ${D === n ? "tab-button--active" : ""}`,
+          onClick: () => b(n),
+          children: n.charAt(0).toUpperCase() + n.slice(1)
         },
-        s
+        n
       )) }),
       /* @__PURE__ */ e("div", { className: "header__actions", children: /* @__PURE__ */ e(
         "button",
         {
           className: "action-button action-button--primary",
-          onClick: te,
-          disabled: y !== null,
-          children: y !== null ? `Exporting ${Math.round(y)}%` : "Export"
+          onClick: ee,
+          disabled: U !== null,
+          children: U !== null ? `Exporting ${Math.round(U)}%` : "Export"
         }
       ) })
     ] }),
-    /* @__PURE__ */ a("div", { className: "video-editor__main", children: [
-      q && /* @__PURE__ */ a("aside", { className: "video-editor__asset-library", children: [
-        /* @__PURE__ */ a("div", { className: "asset-library__header", children: [
+    /* @__PURE__ */ r("div", { className: "video-editor__main", children: [
+      K && /* @__PURE__ */ r("aside", { className: "video-editor__asset-library", children: [
+        /* @__PURE__ */ r("div", { className: "asset-library__header", children: [
           /* @__PURE__ */ e("h3", { children: "Assets" }),
-          /* @__PURE__ */ e("button", { className: "close-button", onClick: () => V(!1), children: "×" })
+          /* @__PURE__ */ e("button", { className: "close-button", onClick: () => P(!1), children: "×" })
         ] }),
-        /* @__PURE__ */ e("div", { className: "asset-library__upload", children: /* @__PURE__ */ a("label", { className: "upload-zone", children: [
+        /* @__PURE__ */ e("div", { className: "asset-library__upload", children: /* @__PURE__ */ r("label", { className: "upload-zone", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "file",
               multiple: !0,
               accept: "video/*,audio/*,image/*",
-              onChange: (s) => s.target.files && _(s.target.files),
+              onChange: (n) => n.target.files && g(n.target.files),
               hidden: !0
             }
           ),
           /* @__PURE__ */ e("span", { className: "upload-icon", children: "+" }),
           /* @__PURE__ */ e("span", { children: "Drop files or click to upload" })
         ] }) }),
-        /* @__PURE__ */ e("div", { className: "asset-library__list", children: c.assets.map((s) => /* @__PURE__ */ a(
+        /* @__PURE__ */ e("div", { className: "asset-library__list", children: p.assets.map((n) => /* @__PURE__ */ r(
           "div",
           {
             className: "asset-item",
             draggable: !0,
-            onDragStart: (r) => r.dataTransfer.setData("assetId", s.id),
+            onDragStart: (o) => o.dataTransfer.setData("assetId", n.id),
             children: [
-              /* @__PURE__ */ e("div", { className: "asset-thumbnail", children: s.thumbnail ? /* @__PURE__ */ e("img", { src: s.thumbnail, alt: s.name }) : /* @__PURE__ */ e("span", { className: "asset-type-icon", children: s.type === "video" ? "🎬" : s.type === "audio" ? "🎵" : "🖼️" }) }),
-              /* @__PURE__ */ a("div", { className: "asset-info", children: [
-                /* @__PURE__ */ e("span", { className: "asset-name", children: s.name }),
-                /* @__PURE__ */ a("span", { className: "asset-meta", children: [
-                  (s.size / 1024 / 1024).toFixed(1),
+              /* @__PURE__ */ e("div", { className: "asset-thumbnail", children: n.thumbnail ? /* @__PURE__ */ e("img", { src: n.thumbnail, alt: n.name }) : /* @__PURE__ */ e("span", { className: "asset-type-icon", children: n.type === "video" ? "🎬" : n.type === "audio" ? "🎵" : "🖼️" }) }),
+              /* @__PURE__ */ r("div", { className: "asset-info", children: [
+                /* @__PURE__ */ e("span", { className: "asset-name", children: n.name }),
+                /* @__PURE__ */ r("span", { className: "asset-meta", children: [
+                  (n.size / 1024 / 1024).toFixed(1),
                   "MB"
                 ] })
               ] })
             ]
           },
-          s.id
+          n.id
         )) })
       ] }),
-      /* @__PURE__ */ a("div", { className: "video-editor__preview-area", children: [
-        /* @__PURE__ */ a("div", { className: "preview-container", children: [
-          /* @__PURE__ */ a(
+      /* @__PURE__ */ r("div", { className: "video-editor__preview-area", children: [
+        /* @__PURE__ */ r("div", { className: "preview-container", children: [
+          /* @__PURE__ */ r(
             "div",
             {
               className: "preview-canvas",
-              style: { aspectRatio: `${c.resolution.width}/${c.resolution.height}` },
+              style: { aspectRatio: `${p.resolution.width}/${p.resolution.height}` },
               children: [
-                /* @__PURE__ */ e("video", { ref: ne, className: "preview-video" }),
-                /* @__PURE__ */ e("div", { className: "preview-overlay", children: !q && /* @__PURE__ */ e(
+                /* @__PURE__ */ e("video", { ref: se, className: "preview-video" }),
+                /* @__PURE__ */ e("div", { className: "preview-overlay", children: !K && /* @__PURE__ */ e(
                   "button",
                   {
                     className: "toggle-library-button",
-                    onClick: () => V(!0),
+                    onClick: () => P(!0),
                     children: "📁"
                   }
                 ) })
               ]
             }
           ),
-          /* @__PURE__ */ a("div", { className: "playback-controls", children: [
-            /* @__PURE__ */ e("button", { onClick: () => Y(0), children: "⏮️" }),
-            /* @__PURE__ */ e("button", { onClick: () => Y(b - 1 / c.frameRate), children: "⏪" }),
-            /* @__PURE__ */ e("button", { onClick: ie, className: "play-button", children: k ? "⏸️" : "▶️" }),
-            /* @__PURE__ */ e("button", { onClick: () => Y(b + 1 / c.frameRate), children: "⏩" }),
-            /* @__PURE__ */ e("span", { className: "time-display", children: Z(b) })
+          /* @__PURE__ */ r("div", { className: "playback-controls", children: [
+            /* @__PURE__ */ e("button", { onClick: () => Q(0), children: "⏮️" }),
+            /* @__PURE__ */ e("button", { onClick: () => Q(z - 1 / p.frameRate), children: "⏪" }),
+            /* @__PURE__ */ e("button", { onClick: de, className: "play-button", children: q ? "⏸️" : "▶️" }),
+            /* @__PURE__ */ e("button", { onClick: () => Q(z + 1 / p.frameRate), children: "⏩" }),
+            /* @__PURE__ */ e("span", { className: "time-display", children: te(z) })
           ] })
         ] }),
-        m && n !== "export" && /* @__PURE__ */ e("div", { className: "item-inspector", children: (() => {
-          const s = j();
-          if (!s)
+        k && D !== "export" && /* @__PURE__ */ e("div", { className: "item-inspector", children: (() => {
+          const n = Z();
+          if (!n)
             return null;
-          const { track: r, item: u } = s;
-          return /* @__PURE__ */ a(ae, { children: [
+          const { track: o, item: a } = n;
+          return /* @__PURE__ */ r(ie, { children: [
             /* @__PURE__ */ e("h4", { children: "Item Properties" }),
-            /* @__PURE__ */ a("div", { className: "inspector-section", children: [
-              /* @__PURE__ */ a("label", { children: [
+            /* @__PURE__ */ r("div", { className: "inspector-section", children: [
+              /* @__PURE__ */ r("label", { children: [
                 "Start Time",
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "number",
                     step: "0.1",
-                    value: u.startTime,
+                    value: a.startTime,
                     onChange: (t) => {
-                      const i = parseFloat(t.target.value);
-                      f({
-                        tracks: c.tracks.map(
-                          (o) => o.id === r.id ? {
-                            ...o,
-                            items: o.items.map(
-                              (d) => d.id === u.id ? { ...d, startTime: i } : d
+                      const c = parseFloat(t.target.value);
+                      w({
+                        tracks: p.tracks.map(
+                          (u) => u.id === o.id ? {
+                            ...u,
+                            items: u.items.map(
+                              (h) => h.id === a.id ? { ...h, startTime: c } : h
                             )
-                          } : o
+                          } : u
                         )
                       });
                     }
                   }
                 )
               ] }),
-              /* @__PURE__ */ a("label", { children: [
+              /* @__PURE__ */ r("label", { children: [
                 "Duration",
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "number",
                     step: "0.1",
-                    value: u.duration,
+                    value: a.duration,
                     onChange: (t) => {
-                      const i = parseFloat(t.target.value);
-                      f({
-                        tracks: c.tracks.map(
-                          (o) => o.id === r.id ? {
-                            ...o,
-                            items: o.items.map(
-                              (d) => d.id === u.id ? { ...d, duration: i } : d
+                      const c = parseFloat(t.target.value);
+                      w({
+                        tracks: p.tracks.map(
+                          (u) => u.id === o.id ? {
+                            ...u,
+                            items: u.items.map(
+                              (h) => h.id === a.id ? { ...h, duration: c } : h
                             )
-                          } : o
+                          } : u
                         )
                       });
                     }
                   }
                 )
               ] }),
-              /* @__PURE__ */ a("label", { children: [
+              /* @__PURE__ */ r("label", { children: [
                 "Opacity",
                 /* @__PURE__ */ e(
                   "input",
@@ -396,20 +2165,20 @@ const ue = {
                     min: "0",
                     max: "1",
                     step: "0.1",
-                    value: u.properties.opacity ?? 1,
+                    value: a.properties.opacity ?? 1,
                     onChange: (t) => {
-                      const i = parseFloat(t.target.value);
-                      f({
-                        tracks: c.tracks.map(
-                          (o) => o.id === r.id ? {
-                            ...o,
-                            items: o.items.map(
-                              (d) => d.id === u.id ? {
-                                ...d,
-                                properties: { ...d.properties, opacity: i }
-                              } : d
+                      const c = parseFloat(t.target.value);
+                      w({
+                        tracks: p.tracks.map(
+                          (u) => u.id === o.id ? {
+                            ...u,
+                            items: u.items.map(
+                              (h) => h.id === a.id ? {
+                                ...h,
+                                properties: { ...h.properties, opacity: c }
+                              } : h
                             )
-                          } : o
+                          } : u
                         )
                       });
                     }
@@ -417,146 +2186,146 @@ const ue = {
                 )
               ] })
             ] }),
-            /* @__PURE__ */ a("h4", { children: [
+            /* @__PURE__ */ r("h4", { children: [
               "Effects (",
-              u.effects.length,
+              a.effects.length,
               ")"
             ] }),
-            /* @__PURE__ */ e("div", { className: "effects-list", children: u.effects.map((t) => /* @__PURE__ */ e("div", { className: "effect-badge", children: t.name }, t.id)) })
+            /* @__PURE__ */ e("div", { className: "effects-list", children: a.effects.map((t) => /* @__PURE__ */ e("div", { className: "effect-badge", children: t.name }, t.id)) })
           ] });
         })() })
       ] })
     ] }),
-    /* @__PURE__ */ a("div", { className: "video-editor__panel", children: [
-      n === "timeline" && /* @__PURE__ */ a("div", { className: "timeline-panel", children: [
-        /* @__PURE__ */ a("div", { className: "timeline-toolbar", children: [
-          /* @__PURE__ */ a("div", { className: "track-buttons", children: [
-            /* @__PURE__ */ e("button", { onClick: () => h("video"), children: "+ Video Track" }),
-            /* @__PURE__ */ e("button", { onClick: () => h("audio"), children: "+ Audio Track" }),
-            /* @__PURE__ */ e("button", { onClick: () => h("text"), children: "+ Text Track" })
+    /* @__PURE__ */ r("div", { className: "video-editor__panel", children: [
+      D === "timeline" && /* @__PURE__ */ r("div", { className: "timeline-panel", children: [
+        /* @__PURE__ */ r("div", { className: "timeline-toolbar", children: [
+          /* @__PURE__ */ r("div", { className: "track-buttons", children: [
+            /* @__PURE__ */ e("button", { onClick: () => B("video"), children: "+ Video Track" }),
+            /* @__PURE__ */ e("button", { onClick: () => B("audio"), children: "+ Audio Track" }),
+            /* @__PURE__ */ e("button", { onClick: () => B("text"), children: "+ Text Track" })
           ] }),
-          /* @__PURE__ */ a("div", { className: "zoom-controls", children: [
-            /* @__PURE__ */ e("button", { onClick: () => U(Math.max(0.25, x - 0.25)), children: "-" }),
-            /* @__PURE__ */ a("span", { children: [
-              Math.round(x * 100),
+          /* @__PURE__ */ r("div", { className: "zoom-controls", children: [
+            /* @__PURE__ */ e("button", { onClick: () => J(Math.max(0.25, M - 0.25)), children: "-" }),
+            /* @__PURE__ */ r("span", { children: [
+              Math.round(M * 100),
               "%"
             ] }),
-            /* @__PURE__ */ e("button", { onClick: () => U(Math.min(4, x + 0.25)), children: "+" })
+            /* @__PURE__ */ e("button", { onClick: () => J(Math.min(4, M + 0.25)), children: "+" })
           ] })
         ] }),
-        /* @__PURE__ */ a("div", { className: "timeline-container", ref: X, children: [
-          /* @__PURE__ */ e("div", { className: "timeline-ruler", children: Array.from({ length: Math.ceil(30 / x) }).map((s, r) => /* @__PURE__ */ e("div", { className: "ruler-mark", style: { left: `${r * 50 * x}px` }, children: Z(r) }, r)) }),
-          /* @__PURE__ */ e("div", { className: "timeline-playhead", style: { left: `${b * 50 * x}px` } }),
-          /* @__PURE__ */ e("div", { className: "timeline-tracks", children: c.tracks.map((s) => /* @__PURE__ */ a(
+        /* @__PURE__ */ r("div", { className: "timeline-container", ref: oe, children: [
+          /* @__PURE__ */ e("div", { className: "timeline-ruler", children: Array.from({ length: Math.ceil(30 / M) }).map((n, o) => /* @__PURE__ */ e("div", { className: "ruler-mark", style: { left: `${o * 50 * M}px` }, children: te(o) }, o)) }),
+          /* @__PURE__ */ e("div", { className: "timeline-playhead", style: { left: `${z * 50 * M}px` } }),
+          /* @__PURE__ */ e("div", { className: "timeline-tracks", children: p.tracks.map((n) => /* @__PURE__ */ r(
             "div",
             {
-              className: `timeline-track ${g === s.id ? "timeline-track--selected" : ""} ${s.locked ? "timeline-track--locked" : ""}`,
-              onClick: () => K(s.id),
-              onDrop: (r) => {
-                r.preventDefault();
-                const u = r.dataTransfer.getData("assetId"), t = c.assets.find((i) => i.id === u);
-                t && ee(s.id, t);
+              className: `timeline-track ${E === n.id ? "timeline-track--selected" : ""} ${n.locked ? "timeline-track--locked" : ""}`,
+              onClick: () => y(n.id),
+              onDrop: (o) => {
+                o.preventDefault();
+                const a = o.dataTransfer.getData("assetId"), t = p.assets.find((c) => c.id === a);
+                t && _(n.id, t);
               },
-              onDragOver: (r) => r.preventDefault(),
+              onDragOver: (o) => o.preventDefault(),
               children: [
-                /* @__PURE__ */ a("div", { className: "track-header", children: [
-                  /* @__PURE__ */ e("span", { className: "track-name", children: s.name }),
-                  /* @__PURE__ */ a("div", { className: "track-controls", children: [
+                /* @__PURE__ */ r("div", { className: "track-header", children: [
+                  /* @__PURE__ */ e("span", { className: "track-name", children: n.name }),
+                  /* @__PURE__ */ r("div", { className: "track-controls", children: [
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        className: s.muted ? "active" : "",
-                        onClick: (r) => {
-                          r.stopPropagation(), G(s.id);
+                        className: n.muted ? "active" : "",
+                        onClick: (o) => {
+                          o.stopPropagation(), G(n.id);
                         },
-                        children: s.muted ? "🔇" : "🔊"
+                        children: n.muted ? "🔇" : "🔊"
                       }
                     ),
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        className: s.locked ? "active" : "",
-                        onClick: (r) => {
-                          r.stopPropagation(), O(s.id);
+                        className: n.locked ? "active" : "",
+                        onClick: (o) => {
+                          o.stopPropagation(), re(n.id);
                         },
-                        children: s.locked ? "🔒" : "🔓"
+                        children: n.locked ? "🔒" : "🔓"
                       }
                     ),
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        onClick: (r) => {
-                          r.stopPropagation(), W(s.id);
+                        onClick: (o) => {
+                          o.stopPropagation(), X(n.id);
                         },
                         children: "🗑️"
                       }
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ e("div", { className: "track-items", children: s.items.map((r) => {
-                  const u = c.assets.find((t) => t.id === r.assetId);
-                  return /* @__PURE__ */ a(
+                /* @__PURE__ */ e("div", { className: "track-items", children: n.items.map((o) => {
+                  const a = p.assets.find((t) => t.id === o.assetId);
+                  return /* @__PURE__ */ r(
                     "div",
                     {
-                      className: `track-item track-item--${r.type} ${m === r.id ? "track-item--selected" : ""}`,
+                      className: `track-item track-item--${o.type} ${k === o.id ? "track-item--selected" : ""}`,
                       style: {
-                        left: `${r.startTime * 50 * x}px`,
-                        width: `${r.duration * 50 * x}px`
+                        left: `${o.startTime * 50 * M}px`,
+                        width: `${o.duration * 50 * M}px`
                       },
                       onClick: (t) => {
-                        t.stopPropagation(), C(r.id);
+                        t.stopPropagation(), S(o.id);
                       },
                       children: [
-                        /* @__PURE__ */ e("span", { className: "item-name", children: (u == null ? void 0 : u.name) || "Untitled" }),
-                        r.transitions.length > 0 && /* @__PURE__ */ e("span", { className: "item-transitions", children: "✨" }),
-                        r.effects.length > 0 && /* @__PURE__ */ e("span", { className: "item-effects", children: "🎨" })
+                        /* @__PURE__ */ e("span", { className: "item-name", children: (a == null ? void 0 : a.name) || "Untitled" }),
+                        o.transitions.length > 0 && /* @__PURE__ */ e("span", { className: "item-transitions", children: "✨" }),
+                        o.effects.length > 0 && /* @__PURE__ */ e("span", { className: "item-effects", children: "🎨" })
                       ]
                     },
-                    r.id
+                    o.id
                   );
                 }) })
               ]
             },
-            s.id
+            n.id
           )) })
         ] })
       ] }),
-      n === "effects" && /* @__PURE__ */ a("div", { className: "effects-panel", children: [
+      D === "effects" && /* @__PURE__ */ r("div", { className: "effects-panel", children: [
         /* @__PURE__ */ e("h3", { children: "Video Effects" }),
         /* @__PURE__ */ e("p", { className: "panel-hint", children: "Select a clip to apply effects" }),
-        /* @__PURE__ */ e("div", { className: "effects-grid", children: me.map((s) => /* @__PURE__ */ a(
+        /* @__PURE__ */ e("div", { className: "effects-grid", children: We.map((n) => /* @__PURE__ */ r(
           "button",
           {
             className: "effect-preset",
-            disabled: !m,
+            disabled: !k,
             onClick: () => {
-              const r = j();
-              r && w(r.track.id, r.item.id, s.type);
+              const o = Z();
+              o && Y(o.track.id, o.item.id, n.type);
             },
             children: [
-              /* @__PURE__ */ e("span", { className: "effect-icon", children: s.icon }),
-              /* @__PURE__ */ e("span", { className: "effect-name", children: s.name })
+              /* @__PURE__ */ e("span", { className: "effect-icon", children: n.icon }),
+              /* @__PURE__ */ e("span", { className: "effect-name", children: n.name })
             ]
           },
-          s.type
+          n.type
         )) })
       ] }),
-      n === "transitions" && /* @__PURE__ */ a("div", { className: "transitions-panel", children: [
+      D === "transitions" && /* @__PURE__ */ r("div", { className: "transitions-panel", children: [
         /* @__PURE__ */ e("h3", { children: "Transitions" }),
         /* @__PURE__ */ e("p", { className: "panel-hint", children: "Select a clip and add transitions between clips" }),
-        /* @__PURE__ */ e("div", { className: "transitions-grid", children: he.map((s) => /* @__PURE__ */ a("div", { className: "transition-preset", children: [
-          /* @__PURE__ */ e("span", { className: "transition-name", children: s.name }),
-          /* @__PURE__ */ a("div", { className: "transition-buttons", children: [
+        /* @__PURE__ */ e("div", { className: "transitions-grid", children: Ke.map((n) => /* @__PURE__ */ r("div", { className: "transition-preset", children: [
+          /* @__PURE__ */ e("span", { className: "transition-name", children: n.name }),
+          /* @__PURE__ */ r("div", { className: "transition-buttons", children: [
             /* @__PURE__ */ e(
               "button",
               {
-                disabled: !m,
+                disabled: !k,
                 onClick: () => {
-                  const r = j();
-                  r && H(
-                    r.track.id,
-                    r.item.id,
-                    s.type,
+                  const o = Z();
+                  o && L(
+                    o.track.id,
+                    o.item.id,
+                    n.type,
                     "start"
                   );
                 },
@@ -566,29 +2335,29 @@ const ue = {
             /* @__PURE__ */ e(
               "button",
               {
-                disabled: !m,
+                disabled: !k,
                 onClick: () => {
-                  const r = j();
-                  r && H(r.track.id, r.item.id, s.type, "end");
+                  const o = Z();
+                  o && L(o.track.id, o.item.id, n.type, "end");
                 },
                 children: "Out"
               }
             )
           ] })
-        ] }, s.type)) })
+        ] }, n.type)) })
       ] }),
-      n === "export" && /* @__PURE__ */ a("div", { className: "export-panel", children: [
+      D === "export" && /* @__PURE__ */ r("div", { className: "export-panel", children: [
         /* @__PURE__ */ e("h3", { children: "Export Settings" }),
-        /* @__PURE__ */ a("div", { className: "export-settings", children: [
-          /* @__PURE__ */ a("div", { className: "setting-group", children: [
+        /* @__PURE__ */ r("div", { className: "export-settings", children: [
+          /* @__PURE__ */ r("div", { className: "setting-group", children: [
             /* @__PURE__ */ e("label", { children: "Resolution" }),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ r(
               "select",
               {
-                value: `${c.resolution.width}x${c.resolution.height}`,
-                onChange: (s) => {
-                  const [r, u] = s.target.value.split("x").map(Number);
-                  f({ resolution: { width: r, height: u } });
+                value: `${p.resolution.width}x${p.resolution.height}`,
+                onChange: (n) => {
+                  const [o, a] = n.target.value.split("x").map(Number);
+                  w({ resolution: { width: o, height: a } });
                 },
                 children: [
                   /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
@@ -599,13 +2368,13 @@ const ue = {
               }
             )
           ] }),
-          /* @__PURE__ */ a("div", { className: "setting-group", children: [
+          /* @__PURE__ */ r("div", { className: "setting-group", children: [
             /* @__PURE__ */ e("label", { children: "Frame Rate" }),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ r(
               "select",
               {
-                value: c.frameRate,
-                onChange: (s) => f({ frameRate: parseInt(s.target.value) }),
+                value: p.frameRate,
+                onChange: (n) => w({ frameRate: parseInt(n.target.value) }),
                 children: [
                   /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
                   /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
@@ -615,18 +2384,18 @@ const ue = {
               }
             )
           ] }),
-          /* @__PURE__ */ a("div", { className: "setting-group", children: [
+          /* @__PURE__ */ r("div", { className: "setting-group", children: [
             /* @__PURE__ */ e("label", { children: "Video Codec" }),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ r(
               "select",
               {
-                value: c.settings.video.codec,
-                onChange: (s) => f({
+                value: p.settings.video.codec,
+                onChange: (n) => w({
                   settings: {
-                    ...c.settings,
+                    ...p.settings,
                     video: {
-                      ...c.settings.video,
-                      codec: s.target.value
+                      ...p.settings.video,
+                      codec: n.target.value
                     }
                   }
                 }),
@@ -639,19 +2408,19 @@ const ue = {
               }
             )
           ] }),
-          /* @__PURE__ */ a("div", { className: "setting-group", children: [
+          /* @__PURE__ */ r("div", { className: "setting-group", children: [
             /* @__PURE__ */ e("label", { children: "Video Bitrate (Mbps)" }),
             /* @__PURE__ */ e(
               "input",
               {
                 type: "number",
-                value: c.settings.video.bitrate / 1e3,
-                onChange: (s) => f({
+                value: p.settings.video.bitrate / 1e3,
+                onChange: (n) => w({
                   settings: {
-                    ...c.settings,
+                    ...p.settings,
                     video: {
-                      ...c.settings.video,
-                      bitrate: parseFloat(s.target.value) * 1e3
+                      ...p.settings.video,
+                      bitrate: parseFloat(n.target.value) * 1e3
                     }
                   }
                 }),
@@ -665,16 +2434,16 @@ const ue = {
           "button",
           {
             className: "export-button",
-            onClick: te,
-            disabled: y !== null,
-            children: y !== null ? `Exporting... ${Math.round(y)}%` : "Export Video"
+            onClick: ee,
+            disabled: U !== null,
+            children: U !== null ? `Exporting... ${Math.round(U)}%` : "Export Video"
           }
         ),
-        y !== null && /* @__PURE__ */ e("div", { className: "export-progress", children: /* @__PURE__ */ e("div", { className: "export-progress-bar", style: { width: `${y}%` } }) })
+        U !== null && /* @__PURE__ */ e("div", { className: "export-progress", children: /* @__PURE__ */ e("div", { className: "export-progress-bar", style: { width: `${U}%` } }) })
       ] })
     ] })
   ] });
-}, pe = {
+}, je = {
   video: {
     source: "screen",
     showCursor: !0,
@@ -691,121 +2460,121 @@ const ue = {
     format: "webm",
     quality: "high"
   }
-}, Ne = ({
-  options: M,
-  onRecordingStart: S,
-  onRecordingStop: D,
-  onRecordingPause: R,
-  onRecordingResume: F,
-  onError: c,
-  className: J = ""
+}, Ye = ({
+  options: l,
+  onRecordingStart: m,
+  onRecordingStop: f,
+  onRecordingPause: C,
+  onRecordingResume: I,
+  onError: T,
+  className: p = ""
 }) => {
-  var d, I;
-  const [n, Q] = p({
-    ...pe,
-    ...M
-  }), [g, K] = p(null), [m, C] = p("idle"), [b, P] = p([]), [k, L] = p(null), [x, U] = p(null), [q, V] = p(!1), [y, A] = p(!1), [X, ne] = p(
+  var u, h;
+  const [i, D] = v({
+    ...je,
+    ...l
+  }), [b, E] = v(null), [y, k] = v("idle"), [S, z] = v([]), [R, q] = v(null), [W, M] = v(null), [J, K] = v(!1), [P, U] = v(!1), [O, oe] = v(
     "pen"
-  ), [z, f] = p("var(--nice-danger, #ff0000)"), _ = T(null), h = T([]), W = T(null), G = T(null), O = T(null), ee = T(0);
-  re(() => () => {
-    k && k.getTracks().forEach((l) => l.stop()), O.current && clearInterval(O.current);
-  }, [k]);
-  const w = (l) => {
-    Q((v) => ({
-      ...v,
-      ...l,
-      video: { ...v.video, ...l.video },
-      audio: { ...v.audio, ...l.audio },
-      output: { ...v.output, ...l.output }
+  ), [se, A] = v("var(--nice-danger, #ff0000)"), w = F(null), g = F([]), B = F(null), X = F(null), G = F(null), re = F(0);
+  ne(() => () => {
+    R && R.getTracks().forEach((s) => s.stop()), G.current && clearInterval(G.current);
+  }, [R]);
+  const _ = (s) => {
+    D((N) => ({
+      ...N,
+      ...s,
+      video: { ...N.video, ...s.video },
+      audio: { ...N.audio, ...s.audio },
+      output: { ...N.output, ...s.output }
     }));
-  }, H = async () => {
+  }, Y = async () => {
     try {
-      C("preparing");
-      const l = {
+      k("preparing");
+      const s = {
         video: {
-          cursor: n.video.showCursor ? "always" : "never",
-          frameRate: n.video.frameRate
+          cursor: i.video.showCursor ? "always" : "never",
+          frameRate: i.video.frameRate
         },
-        audio: n.audio.source === "system" || n.audio.source === "both"
-      }, v = await navigator.mediaDevices.getDisplayMedia(l);
-      if (n.audio.enabled && (n.audio.source === "microphone" || n.audio.source === "both"))
+        audio: i.audio.source === "system" || i.audio.source === "both"
+      }, N = await navigator.mediaDevices.getDisplayMedia(s);
+      if (i.audio.enabled && (i.audio.source === "microphone" || i.audio.source === "both"))
         try {
           (await navigator.mediaDevices.getUserMedia({
             audio: {
-              echoCancellation: n.audio.echoCancellation,
-              noiseSuppression: n.audio.noiseSuppression
+              echoCancellation: i.audio.echoCancellation,
+              noiseSuppression: i.audio.noiseSuppression
             }
-          })).getAudioTracks().forEach(($) => v.addTrack($));
-        } catch (N) {
-          console.warn("Could not access microphone:", N);
+          })).getAudioTracks().forEach((V) => N.addTrack(V));
+        } catch (H) {
+          console.warn("Could not access microphone:", H);
         }
-      L(v), W.current && (W.current.srcObject = v, W.current.play()), C("idle");
-    } catch (l) {
-      C("error"), c == null || c(l instanceof Error ? l : new Error("Failed to start preview"));
+      q(N), B.current && (B.current.srcObject = N, B.current.play()), k("idle");
+    } catch (s) {
+      k("error"), T == null || T(s instanceof Error ? s : new Error("Failed to start preview"));
     }
-  }, E = async () => {
-    k || await H();
-    for (let l = 3; l > 0; l--)
-      U(l), await new Promise((v) => setTimeout(v, 1e3));
-    U(null);
+  }, L = async () => {
+    R || await Y();
+    for (let s = 3; s > 0; s--)
+      M(s), await new Promise((N) => setTimeout(N, 1e3));
+    M(null);
     try {
-      const l = k || await ie();
-      if (!l)
+      const s = R || await ce();
+      if (!s)
         throw new Error("No stream available");
-      const v = r(n.output.format), N = new MediaRecorder(l, {
-        mimeType: v,
-        videoBitsPerSecond: u(n.output.quality)
+      const N = n(i.output.format), H = new MediaRecorder(s, {
+        mimeType: N,
+        videoBitsPerSecond: o(i.output.quality)
       });
-      h.current = [], N.ondataavailable = (B) => {
-        B.data.size > 0 && h.current.push(B.data);
-      }, N.onstop = () => {
-        const B = new Blob(h.current, { type: v });
-        g && (D == null || D({ ...g, status: "stopped" }, B));
-      }, _.current = N, N.start(1e3), ee.current = Date.now();
-      const $ = {
+      g.current = [], H.ondataavailable = (j) => {
+        j.data.size > 0 && g.current.push(j.data);
+      }, H.onstop = () => {
+        const j = new Blob(g.current, { type: N });
+        b && (f == null || f({ ...b, status: "stopped" }, j));
+      }, w.current = H, H.start(1e3), re.current = Date.now();
+      const V = {
         id: crypto.randomUUID(),
         status: "recording",
         startTime: /* @__PURE__ */ new Date(),
         duration: 0,
         size: 0,
-        options: n,
+        options: i,
         chunks: []
       };
-      K($), C("recording"), S == null || S($), O.current = setInterval(() => {
-        K(
-          (B) => B ? {
-            ...B,
-            duration: (Date.now() - ee.current) / 1e3,
-            size: h.current.reduce((ce, de) => ce + de.size, 0)
+      E(V), k("recording"), m == null || m(V), G.current = setInterval(() => {
+        E(
+          (j) => j ? {
+            ...j,
+            duration: (Date.now() - re.current) / 1e3,
+            size: g.current.reduce((xe, Ce) => xe + Ce.size, 0)
           } : null
         );
       }, 100);
-    } catch (l) {
-      C("error"), c == null || c(l instanceof Error ? l : new Error("Failed to start recording"));
+    } catch (s) {
+      k("error"), T == null || T(s instanceof Error ? s : new Error("Failed to start recording"));
     }
-  }, ie = async () => (await H(), k), Y = () => {
-    _.current && m === "recording" && (_.current.pause(), C("paused"), R == null || R());
-  }, te = () => {
-    _.current && m === "paused" && (_.current.resume(), C("recording"), F == null || F());
-  }, Z = () => {
-    O.current && clearInterval(O.current), _.current && (m === "recording" || m === "paused") && (_.current.stop(), C("stopped")), k && (k.getTracks().forEach((l) => l.stop()), L(null));
-  }, j = le(
-    (l) => {
-      if (m !== "recording")
+  }, ce = async () => (await Y(), R), de = () => {
+    w.current && y === "recording" && (w.current.pause(), k("paused"), C == null || C());
+  }, Q = () => {
+    w.current && y === "paused" && (w.current.resume(), k("recording"), I == null || I());
+  }, ee = () => {
+    G.current && clearInterval(G.current), w.current && (y === "recording" || y === "paused") && (w.current.stop(), k("stopped")), R && (R.getTracks().forEach((s) => s.stop()), q(null));
+  }, te = me(
+    (s) => {
+      if (y !== "recording")
         return;
-      const v = {
+      const N = {
         id: crypto.randomUUID(),
-        time: (g == null ? void 0 : g.duration) || 0,
-        label: l || `Marker ${b.length + 1}`,
-        color: t()
+        time: (b == null ? void 0 : b.duration) || 0,
+        label: s || `Marker ${S.length + 1}`,
+        color: a()
       };
-      P((N) => [...N, v]);
+      z((H) => [...H, N]);
     },
-    [m, g == null ? void 0 : g.duration, b.length]
-  ), s = (l) => {
-    P((v) => v.filter((N) => N.id !== l));
-  }, r = (l) => {
-    switch (l) {
+    [y, b == null ? void 0 : b.duration, S.length]
+  ), Z = (s) => {
+    z((N) => N.filter((H) => H.id !== s));
+  }, n = (s) => {
+    switch (s) {
       case "mp4":
         return "video/mp4";
       case "mkv":
@@ -813,8 +2582,8 @@ const ue = {
       default:
         return "video/webm;codecs=vp9";
     }
-  }, u = (l) => {
-    switch (l) {
+  }, o = (s) => {
+    switch (s) {
       case "low":
         return 25e5;
       case "medium":
@@ -824,67 +2593,67 @@ const ue = {
       default:
         return 8e6;
     }
-  }, t = () => {
-    const l = ["var(--nice-danger, #ff4444)", "#44ff44", "#4444ff", "#ffff44", "#ff44ff", "#44ffff"];
-    return l[Math.floor(Math.random() * l.length)];
-  }, i = (l) => {
-    const v = Math.floor(l / 3600), N = Math.floor(l % 3600 / 60), $ = Math.floor(l % 60), B = Math.floor(l % 1 * 100);
-    return v > 0 ? `${v}:${N.toString().padStart(2, "0")}:${$.toString().padStart(2, "0")}` : `${N.toString().padStart(2, "0")}:${$.toString().padStart(2, "0")}.${B.toString().padStart(2, "0")}`;
-  }, o = (l) => l < 1024 ? `${l} B` : l < 1024 * 1024 ? `${(l / 1024).toFixed(1)} KB` : `${(l / 1024 / 1024).toFixed(1)} MB`;
-  return /* @__PURE__ */ a("div", { className: `nice-screen-recorder ${J}`, children: [
-    /* @__PURE__ */ a("div", { className: "recorder__preview", children: [
-      x !== null && /* @__PURE__ */ e("div", { className: "countdown-overlay", children: /* @__PURE__ */ e("span", { className: "countdown-number", children: x }) }),
-      /* @__PURE__ */ e("video", { ref: W, className: "preview-video", muted: !0, playsInline: !0 }),
-      y && /* @__PURE__ */ e("canvas", { ref: G, className: "annotation-canvas" }),
-      !k && m === "idle" && /* @__PURE__ */ e("div", { className: "preview-placeholder", children: /* @__PURE__ */ a("button", { className: "start-preview-button", onClick: H, children: [
+  }, a = () => {
+    const s = ["var(--nice-danger, #ff4444)", "#44ff44", "#4444ff", "#ffff44", "#ff44ff", "#44ffff"];
+    return s[Math.floor(Math.random() * s.length)];
+  }, t = (s) => {
+    const N = Math.floor(s / 3600), H = Math.floor(s % 3600 / 60), V = Math.floor(s % 60), j = Math.floor(s % 1 * 100);
+    return N > 0 ? `${N}:${H.toString().padStart(2, "0")}:${V.toString().padStart(2, "0")}` : `${H.toString().padStart(2, "0")}:${V.toString().padStart(2, "0")}.${j.toString().padStart(2, "0")}`;
+  }, c = (s) => s < 1024 ? `${s} B` : s < 1024 * 1024 ? `${(s / 1024).toFixed(1)} KB` : `${(s / 1024 / 1024).toFixed(1)} MB`;
+  return /* @__PURE__ */ r("div", { className: `nice-screen-recorder ${p}`, children: [
+    /* @__PURE__ */ r("div", { className: "recorder__preview", children: [
+      W !== null && /* @__PURE__ */ e("div", { className: "countdown-overlay", children: /* @__PURE__ */ e("span", { className: "countdown-number", children: W }) }),
+      /* @__PURE__ */ e("video", { ref: B, className: "preview-video", muted: !0, playsInline: !0 }),
+      P && /* @__PURE__ */ e("canvas", { ref: X, className: "annotation-canvas" }),
+      !R && y === "idle" && /* @__PURE__ */ e("div", { className: "preview-placeholder", children: /* @__PURE__ */ r("button", { className: "start-preview-button", onClick: Y, children: [
         /* @__PURE__ */ e("span", { className: "icon", children: "🖥️" }),
         /* @__PURE__ */ e("span", { children: "Select Screen to Record" })
       ] }) }),
-      m === "recording" && /* @__PURE__ */ a("div", { className: "recording-indicator", children: [
+      y === "recording" && /* @__PURE__ */ r("div", { className: "recording-indicator", children: [
         /* @__PURE__ */ e("span", { className: "recording-dot" }),
         /* @__PURE__ */ e("span", { children: "REC" })
       ] })
     ] }),
-    /* @__PURE__ */ a("div", { className: "recorder__controls", children: [
-      /* @__PURE__ */ a("div", { className: "controls__main", children: [
-        m === "idle" && /* @__PURE__ */ a(
+    /* @__PURE__ */ r("div", { className: "recorder__controls", children: [
+      /* @__PURE__ */ r("div", { className: "controls__main", children: [
+        y === "idle" && /* @__PURE__ */ r(
           "button",
           {
             className: "control-button control-button--record",
-            onClick: E,
-            disabled: !!x,
+            onClick: L,
+            disabled: !!W,
             children: [
               /* @__PURE__ */ e("span", { className: "icon", children: "⏺️" }),
               /* @__PURE__ */ e("span", { children: "Start Recording" })
             ]
           }
         ),
-        m === "recording" && /* @__PURE__ */ a(ae, { children: [
-          /* @__PURE__ */ a("button", { className: "control-button control-button--pause", onClick: Y, children: [
+        y === "recording" && /* @__PURE__ */ r(ie, { children: [
+          /* @__PURE__ */ r("button", { className: "control-button control-button--pause", onClick: de, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: "⏸️" }),
             /* @__PURE__ */ e("span", { children: "Pause" })
           ] }),
-          /* @__PURE__ */ a("button", { className: "control-button control-button--stop", onClick: Z, children: [
+          /* @__PURE__ */ r("button", { className: "control-button control-button--stop", onClick: ee, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: "⏹️" }),
             /* @__PURE__ */ e("span", { children: "Stop" })
           ] })
         ] }),
-        m === "paused" && /* @__PURE__ */ a(ae, { children: [
-          /* @__PURE__ */ a("button", { className: "control-button control-button--resume", onClick: te, children: [
+        y === "paused" && /* @__PURE__ */ r(ie, { children: [
+          /* @__PURE__ */ r("button", { className: "control-button control-button--resume", onClick: Q, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: "▶️" }),
             /* @__PURE__ */ e("span", { children: "Resume" })
           ] }),
-          /* @__PURE__ */ a("button", { className: "control-button control-button--stop", onClick: Z, children: [
+          /* @__PURE__ */ r("button", { className: "control-button control-button--stop", onClick: ee, children: [
             /* @__PURE__ */ e("span", { className: "icon", children: "⏹️" }),
             /* @__PURE__ */ e("span", { children: "Stop" })
           ] })
         ] }),
-        m === "stopped" && /* @__PURE__ */ a(
+        y === "stopped" && /* @__PURE__ */ r(
           "button",
           {
             className: "control-button control-button--new",
             onClick: () => {
-              C("idle"), K(null), P([]);
+              k("idle"), E(null), z([]);
             },
             children: [
               /* @__PURE__ */ e("span", { className: "icon", children: "🔄" }),
@@ -893,17 +2662,17 @@ const ue = {
           }
         )
       ] }),
-      /* @__PURE__ */ a("div", { className: "controls__secondary", children: [
-        (m === "recording" || m === "paused") && /* @__PURE__ */ a("button", { className: "control-button control-button--marker", onClick: () => j(), children: [
+      /* @__PURE__ */ r("div", { className: "controls__secondary", children: [
+        (y === "recording" || y === "paused") && /* @__PURE__ */ r("button", { className: "control-button control-button--marker", onClick: () => te(), children: [
           /* @__PURE__ */ e("span", { className: "icon", children: "🚩" }),
           /* @__PURE__ */ e("span", { children: "Add Marker" })
         ] }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ r(
           "button",
           {
-            className: `control-button ${y ? "control-button--active" : ""}`,
-            onClick: () => A(!y),
-            disabled: m !== "recording",
+            className: `control-button ${P ? "control-button--active" : ""}`,
+            onClick: () => U(!P),
+            disabled: y !== "recording",
             children: [
               /* @__PURE__ */ e("span", { className: "icon", children: "✏️" }),
               /* @__PURE__ */ e("span", { children: "Annotate" })
@@ -914,114 +2683,114 @@ const ue = {
           "button",
           {
             className: "control-button control-button--settings",
-            onClick: () => V(!q),
-            disabled: m === "recording",
+            onClick: () => K(!J),
+            disabled: y === "recording",
             children: /* @__PURE__ */ e("span", { className: "icon", children: "⚙️" })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ a("div", { className: "recorder__status", children: [
-      /* @__PURE__ */ a("div", { className: "status__info", children: [
-        /* @__PURE__ */ a("span", { className: "status-item", children: [
+    /* @__PURE__ */ r("div", { className: "recorder__status", children: [
+      /* @__PURE__ */ r("div", { className: "status__info", children: [
+        /* @__PURE__ */ r("span", { className: "status-item", children: [
           /* @__PURE__ */ e("strong", { children: "Duration:" }),
           " ",
-          i((g == null ? void 0 : g.duration) || 0)
+          t((b == null ? void 0 : b.duration) || 0)
         ] }),
-        /* @__PURE__ */ a("span", { className: "status-item", children: [
+        /* @__PURE__ */ r("span", { className: "status-item", children: [
           /* @__PURE__ */ e("strong", { children: "Size:" }),
           " ",
-          o((g == null ? void 0 : g.size) || 0)
+          c((b == null ? void 0 : b.size) || 0)
         ] }),
-        /* @__PURE__ */ a("span", { className: "status-item", children: [
+        /* @__PURE__ */ r("span", { className: "status-item", children: [
           /* @__PURE__ */ e("strong", { children: "Markers:" }),
           " ",
-          b.length
+          S.length
         ] })
       ] }),
-      /* @__PURE__ */ a("div", { className: "status__quality", children: [
-        n.video.resolution && /* @__PURE__ */ a("span", { children: [
-          n.video.resolution.width,
+      /* @__PURE__ */ r("div", { className: "status__quality", children: [
+        i.video.resolution && /* @__PURE__ */ r("span", { children: [
+          i.video.resolution.width,
           "x",
-          n.video.resolution.height
+          i.video.resolution.height
         ] }),
-        /* @__PURE__ */ a("span", { children: [
-          n.video.frameRate,
+        /* @__PURE__ */ r("span", { children: [
+          i.video.frameRate,
           "fps"
         ] }),
-        /* @__PURE__ */ e("span", { className: n.audio.enabled ? "audio-on" : "audio-off", children: n.audio.enabled ? "🔊" : "🔇" })
+        /* @__PURE__ */ e("span", { className: i.audio.enabled ? "audio-on" : "audio-off", children: i.audio.enabled ? "🔊" : "🔇" })
       ] })
     ] }),
-    y && m === "recording" && /* @__PURE__ */ a("div", { className: "recorder__annotation-tools", children: [
-      /* @__PURE__ */ e("div", { className: "tool-group", children: ["pen", "arrow", "rectangle", "text"].map((l) => /* @__PURE__ */ a(
+    P && y === "recording" && /* @__PURE__ */ r("div", { className: "recorder__annotation-tools", children: [
+      /* @__PURE__ */ e("div", { className: "tool-group", children: ["pen", "arrow", "rectangle", "text"].map((s) => /* @__PURE__ */ r(
         "button",
         {
-          className: `tool-button ${X === l ? "tool-button--active" : ""}`,
-          onClick: () => ne(l),
+          className: `tool-button ${O === s ? "tool-button--active" : ""}`,
+          onClick: () => oe(s),
           children: [
-            l === "pen" && "✏️",
-            l === "arrow" && "➡️",
-            l === "rectangle" && "⬜",
-            l === "text" && "T"
+            s === "pen" && "✏️",
+            s === "arrow" && "➡️",
+            s === "rectangle" && "⬜",
+            s === "text" && "T"
           ]
         },
-        l
+        s
       )) }),
-      /* @__PURE__ */ e("div", { className: "color-group", children: ["var(--nice-danger, #ff0000)", "var(--nice-success, #00ff00)", "var(--nice-primary, #0000ff)", "var(--nice-warning, #ffff00)", "var(--nice-bg, #fff)", "var(--nice-text, #000000)"].map((l) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "color-group", children: ["var(--nice-danger, #ff0000)", "var(--nice-success, #00ff00)", "var(--nice-primary, #0000ff)", "var(--nice-warning, #ffff00)", "var(--nice-bg, #fff)", "var(--nice-text, #000000)"].map((s) => /* @__PURE__ */ e(
         "button",
         {
-          className: `color-button ${z === l ? "color-button--active" : ""}`,
-          style: { backgroundColor: l },
-          onClick: () => f(l)
+          className: `color-button ${se === s ? "color-button--active" : ""}`,
+          style: { backgroundColor: s },
+          onClick: () => A(s)
         },
-        l
+        s
       )) })
     ] }),
-    b.length > 0 && /* @__PURE__ */ a("div", { className: "recorder__markers", children: [
+    S.length > 0 && /* @__PURE__ */ r("div", { className: "recorder__markers", children: [
       /* @__PURE__ */ e("h4", { children: "Markers" }),
-      /* @__PURE__ */ e("div", { className: "markers-list", children: b.map((l) => /* @__PURE__ */ a(
+      /* @__PURE__ */ e("div", { className: "markers-list", children: S.map((s) => /* @__PURE__ */ r(
         "div",
         {
           className: "marker-item",
-          style: { borderLeftColor: l.color },
+          style: { borderLeftColor: s.color },
           children: [
-            /* @__PURE__ */ e("span", { className: "marker-time", children: i(l.time) }),
+            /* @__PURE__ */ e("span", { className: "marker-time", children: t(s.time) }),
             /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
-                value: l.label,
-                onChange: (v) => {
-                  P(
-                    (N) => N.map(($) => $.id === l.id ? { ...$, label: v.target.value } : $)
+                value: s.label,
+                onChange: (N) => {
+                  z(
+                    (H) => H.map((V) => V.id === s.id ? { ...V, label: N.target.value } : V)
                   );
                 },
                 className: "marker-label"
               }
             ),
-            /* @__PURE__ */ e("button", { className: "marker-remove", onClick: () => s(l.id), children: "×" })
+            /* @__PURE__ */ e("button", { className: "marker-remove", onClick: () => Z(s.id), children: "×" })
           ]
         },
-        l.id
+        s.id
       )) })
     ] }),
-    q && /* @__PURE__ */ a("div", { className: "recorder__settings", children: [
-      /* @__PURE__ */ a("div", { className: "settings-header", children: [
+    J && /* @__PURE__ */ r("div", { className: "recorder__settings", children: [
+      /* @__PURE__ */ r("div", { className: "settings-header", children: [
         /* @__PURE__ */ e("h3", { children: "Recording Settings" }),
-        /* @__PURE__ */ e("button", { className: "close-button", onClick: () => V(!1), children: "×" })
+        /* @__PURE__ */ e("button", { className: "close-button", onClick: () => K(!1), children: "×" })
       ] }),
-      /* @__PURE__ */ a("div", { className: "settings-section", children: [
+      /* @__PURE__ */ r("div", { className: "settings-section", children: [
         /* @__PURE__ */ e("h4", { children: "Video" }),
-        /* @__PURE__ */ a("label", { children: [
+        /* @__PURE__ */ r("label", { children: [
           "Source",
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ r(
             "select",
             {
-              value: n.video.source,
-              onChange: (l) => w({
+              value: i.video.source,
+              onChange: (s) => _({
                 video: {
-                  ...n.video,
-                  source: l.target.value
+                  ...i.video,
+                  source: s.target.value
                 }
               }),
               children: [
@@ -1033,16 +2802,16 @@ const ue = {
             }
           )
         ] }),
-        /* @__PURE__ */ a("label", { children: [
+        /* @__PURE__ */ r("label", { children: [
           "Resolution",
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ r(
             "select",
             {
-              value: `${(d = n.video.resolution) == null ? void 0 : d.width}x${(I = n.video.resolution) == null ? void 0 : I.height}`,
-              onChange: (l) => {
-                const [v, N] = l.target.value.split("x").map(Number);
-                w({
-                  video: { ...n.video, resolution: { width: v, height: N } }
+              value: `${(u = i.video.resolution) == null ? void 0 : u.width}x${(h = i.video.resolution) == null ? void 0 : h.height}`,
+              onChange: (s) => {
+                const [N, H] = s.target.value.split("x").map(Number);
+                _({
+                  video: { ...i.video, resolution: { width: N, height: H } }
                 });
               },
               children: [
@@ -1054,14 +2823,14 @@ const ue = {
             }
           )
         ] }),
-        /* @__PURE__ */ a("label", { children: [
+        /* @__PURE__ */ r("label", { children: [
           "Frame Rate",
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ r(
             "select",
             {
-              value: n.video.frameRate,
-              onChange: (l) => w({
-                video: { ...n.video, frameRate: parseInt(l.target.value) }
+              value: i.video.frameRate,
+              onChange: (s) => _({
+                video: { ...i.video, frameRate: parseInt(s.target.value) }
               }),
               children: [
                 /* @__PURE__ */ e("option", { value: "15", children: "15 fps" }),
@@ -1072,46 +2841,46 @@ const ue = {
             }
           )
         ] }),
-        /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
+        /* @__PURE__ */ r("label", { className: "checkbox-label", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
-              checked: n.video.showCursor,
-              onChange: (l) => w({
-                video: { ...n.video, showCursor: l.target.checked }
+              checked: i.video.showCursor,
+              onChange: (s) => _({
+                video: { ...i.video, showCursor: s.target.checked }
               })
             }
           ),
           "Show Cursor"
         ] })
       ] }),
-      /* @__PURE__ */ a("div", { className: "settings-section", children: [
+      /* @__PURE__ */ r("div", { className: "settings-section", children: [
         /* @__PURE__ */ e("h4", { children: "Audio" }),
-        /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
+        /* @__PURE__ */ r("label", { className: "checkbox-label", children: [
           /* @__PURE__ */ e(
             "input",
             {
               type: "checkbox",
-              checked: n.audio.enabled,
-              onChange: (l) => w({
-                audio: { ...n.audio, enabled: l.target.checked }
+              checked: i.audio.enabled,
+              onChange: (s) => _({
+                audio: { ...i.audio, enabled: s.target.checked }
               })
             }
           ),
           "Enable Audio"
         ] }),
-        n.audio.enabled && /* @__PURE__ */ a(ae, { children: [
-          /* @__PURE__ */ a("label", { children: [
+        i.audio.enabled && /* @__PURE__ */ r(ie, { children: [
+          /* @__PURE__ */ r("label", { children: [
             "Source",
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ r(
               "select",
               {
-                value: n.audio.source,
-                onChange: (l) => w({
+                value: i.audio.source,
+                onChange: (s) => _({
                   audio: {
-                    ...n.audio,
-                    source: l.target.value
+                    ...i.audio,
+                    source: s.target.value
                   }
                 }),
                 children: [
@@ -1122,27 +2891,27 @@ const ue = {
               }
             )
           ] }),
-          /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ r("label", { className: "checkbox-label", children: [
             /* @__PURE__ */ e(
               "input",
               {
                 type: "checkbox",
-                checked: n.audio.echoCancellation,
-                onChange: (l) => w({
-                  audio: { ...n.audio, echoCancellation: l.target.checked }
+                checked: i.audio.echoCancellation,
+                onChange: (s) => _({
+                  audio: { ...i.audio, echoCancellation: s.target.checked }
                 })
               }
             ),
             "Echo Cancellation"
           ] }),
-          /* @__PURE__ */ a("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ r("label", { className: "checkbox-label", children: [
             /* @__PURE__ */ e(
               "input",
               {
                 type: "checkbox",
-                checked: n.audio.noiseSuppression,
-                onChange: (l) => w({
-                  audio: { ...n.audio, noiseSuppression: l.target.checked }
+                checked: i.audio.noiseSuppression,
+                onChange: (s) => _({
+                  audio: { ...i.audio, noiseSuppression: s.target.checked }
                 })
               }
             ),
@@ -1150,16 +2919,16 @@ const ue = {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ a("div", { className: "settings-section", children: [
+      /* @__PURE__ */ r("div", { className: "settings-section", children: [
         /* @__PURE__ */ e("h4", { children: "Output" }),
-        /* @__PURE__ */ a("label", { children: [
+        /* @__PURE__ */ r("label", { children: [
           "Format",
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ r(
             "select",
             {
-              value: n.output.format,
-              onChange: (l) => w({
-                output: { ...n.output, format: l.target.value }
+              value: i.output.format,
+              onChange: (s) => _({
+                output: { ...i.output, format: s.target.value }
               }),
               children: [
                 /* @__PURE__ */ e("option", { value: "webm", children: "WebM (Best Web)" }),
@@ -1169,16 +2938,16 @@ const ue = {
             }
           )
         ] }),
-        /* @__PURE__ */ a("label", { children: [
+        /* @__PURE__ */ r("label", { children: [
           "Quality",
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ r(
             "select",
             {
-              value: n.output.quality,
-              onChange: (l) => w({
+              value: i.output.quality,
+              onChange: (s) => _({
                 output: {
-                  ...n.output,
-                  quality: l.target.value
+                  ...i.output,
+                  quality: s.target.value
                 }
               }),
               children: [
@@ -1193,7 +2962,7 @@ const ue = {
       ] })
     ] })
   ] });
-}, ve = {
+}, qe = {
   id: crypto.randomUUID(),
   name: "My Stream",
   protocol: "rtmp",
@@ -1220,7 +2989,7 @@ const ue = {
       codec: "aac"
     }
   }
-}, oe = [
+}, fe = [
   {
     platform: "youtube",
     name: "YouTube",
@@ -1236,7 +3005,7 @@ const ue = {
   },
   { platform: "custom-rtmp", name: "Custom RTMP", icon: "🔗", defaultUrl: "" },
   { platform: "custom-srt", name: "Custom SRT", icon: "🔒", defaultUrl: "" }
-], se = [
+], le = [
   { type: "camera", name: "Camera", icon: "📷" },
   { type: "screen", name: "Screen Capture", icon: "🖥️" },
   { type: "window", name: "Window Capture", icon: "🪟" },
@@ -1245,18 +3014,18 @@ const ue = {
   { type: "video", name: "Video", icon: "🎬" },
   { type: "microphone", name: "Microphone", icon: "🎤" },
   { type: "system-audio", name: "System Audio", icon: "🔊" }
-], ye = ({
-  config: M,
-  onConfigChange: S,
-  onStreamStart: D,
-  onStreamStop: R,
-  onStatsUpdate: F,
-  onError: c,
-  className: J = ""
+], Qe = ({
+  config: l,
+  onConfigChange: m,
+  onStreamStart: f,
+  onStreamStop: C,
+  onStatsUpdate: I,
+  onError: T,
+  className: p = ""
 }) => {
-  const [n, Q] = p(M || ve), [g, K] = p(
+  const [i, D] = v(l || qe), [b, E] = v(
     "sources"
-  ), [m, C] = p(!1), [b, P] = p({
+  ), [y, k] = v(!1), [S, z] = v({
     duration: 0,
     viewers: 0,
     peakViewers: 0,
@@ -1265,155 +3034,155 @@ const ue = {
     droppedFrames: 0,
     cpuUsage: 0,
     memoryUsage: 0
-  }), [k, L] = p(null), [x, U] = p(!1), [q, V] = p(!1), [y, A] = p([n.layout]), [X, ne] = p(0), z = T(null), f = T(null), _ = T(0);
-  re(() => {
-    M && Q(M);
-  }, [M]), re(() => () => {
-    f.current && clearInterval(f.current);
+  }), [R, q] = v(null), [W, M] = v(!1), [J, K] = v(!1), [P, U] = v([i.layout]), [O, oe] = v(0), se = F(null), A = F(null), w = F(0);
+  ne(() => {
+    l && D(l);
+  }, [l]), ne(() => () => {
+    A.current && clearInterval(A.current);
   }, []);
-  const h = le(
-    (t) => {
-      const i = { ...n, ...t };
-      Q(i), S == null || S(i);
+  const g = me(
+    (a) => {
+      const t = { ...i, ...a };
+      D(t), m == null || m(t);
     },
-    [n, S]
-  ), W = (t) => {
-    const i = oe.find((d) => d.platform === t), o = {
+    [i, m]
+  ), B = (a) => {
+    const t = fe.find((u) => u.platform === a), c = {
       id: crypto.randomUUID(),
-      name: (i == null ? void 0 : i.name) || "Custom",
-      platform: t,
-      url: (i == null ? void 0 : i.defaultUrl) || "",
+      name: (t == null ? void 0 : t.name) || "Custom",
+      platform: a,
+      url: (t == null ? void 0 : t.defaultUrl) || "",
       streamKey: "",
       enabled: !0,
       status: "idle"
     };
-    h({ destinations: [...n.destinations, o] }), V(!1);
-  }, G = (t, i) => {
-    h({
-      destinations: n.destinations.map((o) => o.id === t ? { ...o, ...i } : o)
+    g({ destinations: [...i.destinations, c] }), K(!1);
+  }, X = (a, t) => {
+    g({
+      destinations: i.destinations.map((c) => c.id === a ? { ...c, ...t } : c)
     });
-  }, O = (t) => {
-    h({ destinations: n.destinations.filter((i) => i.id !== t) });
-  }, ee = async (t) => {
-    const i = se.find((I) => I.type === t), o = {
+  }, G = (a) => {
+    g({ destinations: i.destinations.filter((t) => t.id !== a) });
+  }, re = async (a) => {
+    const t = le.find((h) => h.type === a), c = {
       id: crypto.randomUUID(),
-      type: t,
-      name: `${(i == null ? void 0 : i.name) || t} ${n.sources.filter((I) => I.type === t).length + 1}`,
+      type: a,
+      name: `${(t == null ? void 0 : t.name) || a} ${i.sources.filter((h) => h.type === a).length + 1}`,
       settings: {},
       volume: 1,
       muted: !1
     };
     try {
-      if (t === "camera" || t === "microphone") {
-        const I = t === "camera" ? { video: !0 } : { audio: !0 }, v = (await navigator.mediaDevices.enumerateDevices()).filter(
-          (N) => t === "camera" ? N.kind === "videoinput" : N.kind === "audioinput"
+      if (a === "camera" || a === "microphone") {
+        const h = a === "camera" ? { video: !0 } : { audio: !0 }, N = (await navigator.mediaDevices.enumerateDevices()).filter(
+          (H) => a === "camera" ? H.kind === "videoinput" : H.kind === "audioinput"
         );
-        v.length > 0 && (o.settings.deviceId = v[0].deviceId);
-      } else (t === "screen" || t === "window") && await navigator.mediaDevices.getDisplayMedia({ video: !0 });
-    } catch (I) {
-      console.warn(`Could not access ${t}:`, I);
+        N.length > 0 && (c.settings.deviceId = N[0].deviceId);
+      } else (a === "screen" || a === "window") && await navigator.mediaDevices.getDisplayMedia({ video: !0 });
+    } catch (h) {
+      console.warn(`Could not access ${a}:`, h);
     }
-    h({ sources: [...n.sources, o] });
-    const d = {
+    g({ sources: [...i.sources, c] });
+    const u = {
       id: crypto.randomUUID(),
-      sourceId: o.id,
+      sourceId: c.id,
       position: { x: 0, y: 0 },
-      size: { width: n.layout.canvas.width, height: n.layout.canvas.height },
+      size: { width: i.layout.canvas.width, height: i.layout.canvas.height },
       visible: !0,
       opacity: 1,
-      zIndex: n.layout.layers.length
+      zIndex: i.layout.layers.length
     };
-    h({
+    g({
       layout: {
-        ...n.layout,
-        layers: [...n.layout.layers, d]
+        ...i.layout,
+        layers: [...i.layout.layers, u]
       }
-    }), U(!1);
-  }, w = (t, i) => {
-    h({
-      sources: n.sources.map((o) => o.id === t ? { ...o, ...i } : o)
+    }), M(!1);
+  }, _ = (a, t) => {
+    g({
+      sources: i.sources.map((c) => c.id === a ? { ...c, ...t } : c)
     });
-  }, H = (t) => {
-    h({
-      sources: n.sources.filter((i) => i.id !== t),
+  }, Y = (a) => {
+    g({
+      sources: i.sources.filter((t) => t.id !== a),
       layout: {
-        ...n.layout,
-        layers: n.layout.layers.filter((i) => i.sourceId !== t)
+        ...i.layout,
+        layers: i.layout.layers.filter((t) => t.sourceId !== a)
       }
     });
-  }, E = (t, i) => {
-    h({
+  }, L = (a, t) => {
+    g({
       layout: {
-        ...n.layout,
-        layers: n.layout.layers.map((o) => o.id === t ? { ...o, ...i } : o)
+        ...i.layout,
+        layers: i.layout.layers.map((c) => c.id === a ? { ...c, ...t } : c)
       }
     });
-  }, ie = (t) => {
-    const i = n.layout.layers.findIndex((o) => o.id === t);
-    if (i < n.layout.layers.length - 1) {
-      const o = [...n.layout.layers];
-      [o[i], o[i + 1]] = [o[i + 1], o[i]], o.forEach((d, I) => {
-        d.zIndex = I;
-      }), h({ layout: { ...n.layout, layers: o } });
+  }, ce = (a) => {
+    const t = i.layout.layers.findIndex((c) => c.id === a);
+    if (t < i.layout.layers.length - 1) {
+      const c = [...i.layout.layers];
+      [c[t], c[t + 1]] = [c[t + 1], c[t]], c.forEach((u, h) => {
+        u.zIndex = h;
+      }), g({ layout: { ...i.layout, layers: c } });
     }
-  }, Y = (t) => {
-    const i = n.layout.layers.findIndex((o) => o.id === t);
-    if (i > 0) {
-      const o = [...n.layout.layers];
-      [o[i], o[i - 1]] = [o[i - 1], o[i]], o.forEach((d, I) => {
-        d.zIndex = I;
-      }), h({ layout: { ...n.layout, layers: o } });
+  }, de = (a) => {
+    const t = i.layout.layers.findIndex((c) => c.id === a);
+    if (t > 0) {
+      const c = [...i.layout.layers];
+      [c[t], c[t - 1]] = [c[t - 1], c[t]], c.forEach((u, h) => {
+        u.zIndex = h;
+      }), g({ layout: { ...i.layout, layers: c } });
     }
-  }, te = () => {
-    const t = {
-      name: `Scene ${y.length + 1}`,
-      canvas: { ...n.layout.canvas },
+  }, Q = () => {
+    const a = {
+      name: `Scene ${P.length + 1}`,
+      canvas: { ...i.layout.canvas },
       layers: []
     };
-    A([...y, t]);
-  }, Z = (t) => {
-    const i = [...y];
-    i[X] = n.layout, A(i), ne(t), h({ layout: y[t] });
-  }, j = async () => {
+    U([...P, a]);
+  }, ee = (a) => {
+    const t = [...P];
+    t[O] = i.layout, U(t), oe(a), g({ layout: P[a] });
+  }, te = async () => {
     try {
-      h({
-        destinations: n.destinations.map(
-          (t) => t.enabled ? { ...t, status: "connecting" } : t
+      g({
+        destinations: i.destinations.map(
+          (a) => a.enabled ? { ...a, status: "connecting" } : a
         )
-      }), await new Promise((t) => setTimeout(t, 2e3)), h({
-        destinations: n.destinations.map(
-          (t) => t.enabled ? { ...t, status: "live" } : t
+      }), await new Promise((a) => setTimeout(a, 2e3)), g({
+        destinations: i.destinations.map(
+          (a) => a.enabled ? { ...a, status: "live" } : a
         )
-      }), C(!0), _.current = Date.now(), D == null || D(), f.current = setInterval(() => {
-        const t = {
-          duration: (Date.now() - _.current) / 1e3,
-          viewers: Math.floor(Math.random() * 100) + b.viewers,
-          peakViewers: Math.max(b.peakViewers, b.viewers),
-          bitrate: n.settings.video.bitrate + Math.floor(Math.random() * 500 - 250),
-          fps: n.settings.video.frameRate - Math.random() * 2,
-          droppedFrames: b.droppedFrames + (Math.random() > 0.95 ? 1 : 0),
+      }), k(!0), w.current = Date.now(), f == null || f(), A.current = setInterval(() => {
+        const a = {
+          duration: (Date.now() - w.current) / 1e3,
+          viewers: Math.floor(Math.random() * 100) + S.viewers,
+          peakViewers: Math.max(S.peakViewers, S.viewers),
+          bitrate: i.settings.video.bitrate + Math.floor(Math.random() * 500 - 250),
+          fps: i.settings.video.frameRate - Math.random() * 2,
+          droppedFrames: S.droppedFrames + (Math.random() > 0.95 ? 1 : 0),
           cpuUsage: 15 + Math.random() * 30,
           memoryUsage: 40 + Math.random() * 20
         };
-        P(t), F == null || F(t);
+        z(a), I == null || I(a);
       }, 1e3);
-    } catch (t) {
-      c == null || c(t instanceof Error ? t : new Error("Failed to start stream")), h({
-        destinations: n.destinations.map((i) => ({
-          ...i,
+    } catch (a) {
+      T == null || T(a instanceof Error ? a : new Error("Failed to start stream")), g({
+        destinations: i.destinations.map((t) => ({
+          ...t,
           status: "error"
         }))
       });
     }
-  }, s = () => {
-    f.current && clearInterval(f.current), h({
-      destinations: n.destinations.map((t) => ({ ...t, status: "idle" }))
-    }), C(!1), R == null || R();
-  }, r = (t) => {
-    const i = Math.floor(t / 3600), o = Math.floor(t % 3600 / 60), d = Math.floor(t % 60);
-    return `${i.toString().padStart(2, "0")}:${o.toString().padStart(2, "0")}:${d.toString().padStart(2, "0")}`;
-  }, u = (t) => {
-    switch (t) {
+  }, Z = () => {
+    A.current && clearInterval(A.current), g({
+      destinations: i.destinations.map((a) => ({ ...a, status: "idle" }))
+    }), k(!1), C == null || C();
+  }, n = (a) => {
+    const t = Math.floor(a / 3600), c = Math.floor(a % 3600 / 60), u = Math.floor(a % 60);
+    return `${t.toString().padStart(2, "0")}:${c.toString().padStart(2, "0")}:${u.toString().padStart(2, "0")}`;
+  }, o = (a) => {
+    switch (a) {
       case "live":
         return "var(--nice-success, #00ff00)";
       case "connecting":
@@ -1424,154 +3193,154 @@ const ue = {
         return "var(--nice-text-secondary, #888888)";
     }
   };
-  return /* @__PURE__ */ a("div", { className: `nice-live-streaming ${J}`, children: [
-    /* @__PURE__ */ a("header", { className: "streaming__header", children: [
-      /* @__PURE__ */ a("div", { className: "header__title", children: [
+  return /* @__PURE__ */ r("div", { className: `nice-live-streaming ${p}`, children: [
+    /* @__PURE__ */ r("header", { className: "streaming__header", children: [
+      /* @__PURE__ */ r("div", { className: "header__title", children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "text",
-            value: n.name,
-            onChange: (t) => h({ name: t.target.value }),
+            value: i.name,
+            onChange: (a) => g({ name: a.target.value }),
             className: "stream-name-input"
           }
         ),
-        m && /* @__PURE__ */ a("span", { className: "live-badge", children: [
+        y && /* @__PURE__ */ r("span", { className: "live-badge", children: [
           /* @__PURE__ */ e("span", { className: "live-dot" }),
           " LIVE"
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: "header__stats", children: m && /* @__PURE__ */ a(ae, { children: [
-        /* @__PURE__ */ a("span", { className: "stat-item", children: [
+      /* @__PURE__ */ e("div", { className: "header__stats", children: y && /* @__PURE__ */ r(ie, { children: [
+        /* @__PURE__ */ r("span", { className: "stat-item", children: [
           "⏱️ ",
-          r(b.duration)
+          n(S.duration)
         ] }),
-        /* @__PURE__ */ a("span", { className: "stat-item", children: [
+        /* @__PURE__ */ r("span", { className: "stat-item", children: [
           "👥 ",
-          b.viewers
+          S.viewers
         ] }),
-        /* @__PURE__ */ a("span", { className: "stat-item", children: [
+        /* @__PURE__ */ r("span", { className: "stat-item", children: [
           "📊 ",
-          Math.round(b.bitrate),
+          Math.round(S.bitrate),
           " kbps"
         ] }),
-        /* @__PURE__ */ a("span", { className: "stat-item", children: [
+        /* @__PURE__ */ r("span", { className: "stat-item", children: [
           "🎬 ",
-          b.fps.toFixed(1),
+          S.fps.toFixed(1),
           " fps"
         ] })
       ] }) }),
-      /* @__PURE__ */ e("div", { className: "header__actions", children: m ? /* @__PURE__ */ e("button", { className: "action-button action-button--stop", onClick: s, children: "End Stream" }) : /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "header__actions", children: y ? /* @__PURE__ */ e("button", { className: "action-button action-button--stop", onClick: Z, children: "End Stream" }) : /* @__PURE__ */ e(
         "button",
         {
           className: "action-button action-button--go-live",
-          onClick: j,
-          disabled: n.destinations.filter((t) => t.enabled).length === 0,
+          onClick: te,
+          disabled: i.destinations.filter((a) => a.enabled).length === 0,
           children: "Go Live"
         }
       ) })
     ] }),
-    /* @__PURE__ */ a("div", { className: "streaming__main", children: [
-      /* @__PURE__ */ a("div", { className: "streaming__preview", children: [
-        /* @__PURE__ */ a("div", { className: "scenes-bar", children: [
-          y.map((t, i) => /* @__PURE__ */ e(
+    /* @__PURE__ */ r("div", { className: "streaming__main", children: [
+      /* @__PURE__ */ r("div", { className: "streaming__preview", children: [
+        /* @__PURE__ */ r("div", { className: "scenes-bar", children: [
+          P.map((a, t) => /* @__PURE__ */ e(
             "button",
             {
-              className: `scene-button ${X === i ? "scene-button--active" : ""}`,
-              onClick: () => Z(i),
-              children: t.name
+              className: `scene-button ${O === t ? "scene-button--active" : ""}`,
+              onClick: () => ee(t),
+              children: a.name
             },
-            i
+            t
           )),
-          /* @__PURE__ */ e("button", { className: "scene-button scene-button--add", onClick: te, children: "+" })
+          /* @__PURE__ */ e("button", { className: "scene-button scene-button--add", onClick: Q, children: "+" })
         ] }),
         /* @__PURE__ */ e(
           "div",
           {
-            ref: z,
+            ref: se,
             className: "preview-canvas",
             style: {
-              aspectRatio: `${n.layout.canvas.width}/${n.layout.canvas.height}`,
-              backgroundColor: n.layout.canvas.backgroundColor
+              aspectRatio: `${i.layout.canvas.width}/${i.layout.canvas.height}`,
+              backgroundColor: i.layout.canvas.backgroundColor
             },
-            children: n.layout.layers.sort((t, i) => t.zIndex - i.zIndex).map((t) => {
-              var o;
-              const i = n.sources.find((d) => d.id === t.sourceId);
-              return !t.visible || !i ? null : /* @__PURE__ */ e(
+            children: i.layout.layers.sort((a, t) => a.zIndex - t.zIndex).map((a) => {
+              var c;
+              const t = i.sources.find((u) => u.id === a.sourceId);
+              return !a.visible || !t ? null : /* @__PURE__ */ e(
                 "div",
                 {
-                  className: `canvas-layer ${k === t.id ? "canvas-layer--selected" : ""}`,
+                  className: `canvas-layer ${R === a.id ? "canvas-layer--selected" : ""}`,
                   style: {
-                    left: `${t.position.x / n.layout.canvas.width * 100}%`,
-                    top: `${t.position.y / n.layout.canvas.height * 100}%`,
-                    width: `${t.size.width / n.layout.canvas.width * 100}%`,
-                    height: `${t.size.height / n.layout.canvas.height * 100}%`,
-                    opacity: t.opacity,
-                    zIndex: t.zIndex
+                    left: `${a.position.x / i.layout.canvas.width * 100}%`,
+                    top: `${a.position.y / i.layout.canvas.height * 100}%`,
+                    width: `${a.size.width / i.layout.canvas.width * 100}%`,
+                    height: `${a.size.height / i.layout.canvas.height * 100}%`,
+                    opacity: a.opacity,
+                    zIndex: a.zIndex
                   },
-                  onClick: () => L(t.id),
-                  children: /* @__PURE__ */ a("div", { className: "layer-content", children: [
-                    /* @__PURE__ */ e("span", { className: "layer-icon", children: ((o = se.find((d) => d.type === i.type)) == null ? void 0 : o.icon) || "📦" }),
-                    /* @__PURE__ */ e("span", { className: "layer-name", children: i.name })
+                  onClick: () => q(a.id),
+                  children: /* @__PURE__ */ r("div", { className: "layer-content", children: [
+                    /* @__PURE__ */ e("span", { className: "layer-icon", children: ((c = le.find((u) => u.type === t.type)) == null ? void 0 : c.icon) || "📦" }),
+                    /* @__PURE__ */ e("span", { className: "layer-name", children: t.name })
                   ] })
                 },
-                t.id
+                a.id
               );
             })
           }
         )
       ] }),
-      /* @__PURE__ */ a("aside", { className: "streaming__panel", children: [
-        /* @__PURE__ */ e("div", { className: "panel-tabs", children: ["sources", "audio", "destinations", "settings"].map((t) => /* @__PURE__ */ e(
+      /* @__PURE__ */ r("aside", { className: "streaming__panel", children: [
+        /* @__PURE__ */ e("div", { className: "panel-tabs", children: ["sources", "audio", "destinations", "settings"].map((a) => /* @__PURE__ */ e(
           "button",
           {
-            className: `panel-tab ${g === t ? "panel-tab--active" : ""}`,
-            onClick: () => K(t),
-            children: t.charAt(0).toUpperCase() + t.slice(1)
+            className: `panel-tab ${b === a ? "panel-tab--active" : ""}`,
+            onClick: () => E(a),
+            children: a.charAt(0).toUpperCase() + a.slice(1)
           },
-          t
+          a
         )) }),
-        /* @__PURE__ */ a("div", { className: "panel-content", children: [
-          g === "sources" && /* @__PURE__ */ a("div", { className: "sources-panel", children: [
-            /* @__PURE__ */ a("div", { className: "panel-header", children: [
+        /* @__PURE__ */ r("div", { className: "panel-content", children: [
+          b === "sources" && /* @__PURE__ */ r("div", { className: "sources-panel", children: [
+            /* @__PURE__ */ r("div", { className: "panel-header", children: [
               /* @__PURE__ */ e("h3", { children: "Sources" }),
               /* @__PURE__ */ e(
                 "button",
                 {
                   className: "add-button",
-                  onClick: () => U(!0),
-                  disabled: m,
+                  onClick: () => M(!0),
+                  disabled: y,
                   children: "+ Add"
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "sources-list", children: n.sources.filter((t) => t.type !== "microphone" && t.type !== "system-audio").map((t) => {
-              var o;
-              const i = n.layout.layers.find((d) => d.sourceId === t.id);
-              return /* @__PURE__ */ a(
+            /* @__PURE__ */ e("div", { className: "sources-list", children: i.sources.filter((a) => a.type !== "microphone" && a.type !== "system-audio").map((a) => {
+              var c;
+              const t = i.layout.layers.find((u) => u.sourceId === a.id);
+              return /* @__PURE__ */ r(
                 "div",
                 {
-                  className: `source-item ${k === (i == null ? void 0 : i.id) ? "source-item--selected" : ""}`,
-                  onClick: () => i && L(i.id),
+                  className: `source-item ${R === (t == null ? void 0 : t.id) ? "source-item--selected" : ""}`,
+                  onClick: () => t && q(t.id),
                   children: [
-                    /* @__PURE__ */ e("span", { className: "source-icon", children: (o = se.find((d) => d.type === t.type)) == null ? void 0 : o.icon }),
-                    /* @__PURE__ */ e("span", { className: "source-name", children: t.name }),
-                    /* @__PURE__ */ a("div", { className: "source-controls", children: [
+                    /* @__PURE__ */ e("span", { className: "source-icon", children: (c = le.find((u) => u.type === a.type)) == null ? void 0 : c.icon }),
+                    /* @__PURE__ */ e("span", { className: "source-name", children: a.name }),
+                    /* @__PURE__ */ r("div", { className: "source-controls", children: [
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          className: i != null && i.visible ? "" : "inactive",
-                          onClick: (d) => {
-                            d.stopPropagation(), i && E(i.id, { visible: !i.visible });
+                          className: t != null && t.visible ? "" : "inactive",
+                          onClick: (u) => {
+                            u.stopPropagation(), t && L(t.id, { visible: !t.visible });
                           },
-                          children: i != null && i.visible ? "👁️" : "👁️‍🗨️"
+                          children: t != null && t.visible ? "👁️" : "👁️‍🗨️"
                         }
                       ),
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (d) => {
-                            d.stopPropagation(), i && ie(i.id);
+                          onClick: (u) => {
+                            u.stopPropagation(), t && ce(t.id);
                           },
                           children: "⬆️"
                         }
@@ -1579,8 +3348,8 @@ const ue = {
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (d) => {
-                            d.stopPropagation(), i && Y(i.id);
+                          onClick: (u) => {
+                            u.stopPropagation(), t && de(t.id);
                           },
                           children: "⬇️"
                         }
@@ -1588,77 +3357,77 @@ const ue = {
                       /* @__PURE__ */ e(
                         "button",
                         {
-                          onClick: (d) => {
-                            d.stopPropagation(), H(t.id);
+                          onClick: (u) => {
+                            u.stopPropagation(), Y(a.id);
                           },
-                          disabled: m,
+                          disabled: y,
                           children: "🗑️"
                         }
                       )
                     ] })
                   ]
                 },
-                t.id
+                a.id
               );
             }) }),
-            k && /* @__PURE__ */ a("div", { className: "layer-properties", children: [
+            R && /* @__PURE__ */ r("div", { className: "layer-properties", children: [
               /* @__PURE__ */ e("h4", { children: "Properties" }),
               (() => {
-                const t = n.layout.layers.find((i) => i.id === k);
-                return t ? /* @__PURE__ */ a(ae, { children: [
-                  /* @__PURE__ */ a("label", { children: [
+                const a = i.layout.layers.find((t) => t.id === R);
+                return a ? /* @__PURE__ */ r(ie, { children: [
+                  /* @__PURE__ */ r("label", { children: [
                     "X Position",
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: t.position.x,
-                        onChange: (i) => E(t.id, {
-                          position: { ...t.position, x: parseInt(i.target.value) || 0 }
+                        value: a.position.x,
+                        onChange: (t) => L(a.id, {
+                          position: { ...a.position, x: parseInt(t.target.value) || 0 }
                         })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ a("label", { children: [
+                  /* @__PURE__ */ r("label", { children: [
                     "Y Position",
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: t.position.y,
-                        onChange: (i) => E(t.id, {
-                          position: { ...t.position, y: parseInt(i.target.value) || 0 }
+                        value: a.position.y,
+                        onChange: (t) => L(a.id, {
+                          position: { ...a.position, y: parseInt(t.target.value) || 0 }
                         })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ a("label", { children: [
+                  /* @__PURE__ */ r("label", { children: [
                     "Width",
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: t.size.width,
-                        onChange: (i) => E(t.id, {
-                          size: { ...t.size, width: parseInt(i.target.value) || 100 }
+                        value: a.size.width,
+                        onChange: (t) => L(a.id, {
+                          size: { ...a.size, width: parseInt(t.target.value) || 100 }
                         })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ a("label", { children: [
+                  /* @__PURE__ */ r("label", { children: [
                     "Height",
                     /* @__PURE__ */ e(
                       "input",
                       {
                         type: "number",
-                        value: t.size.height,
-                        onChange: (i) => E(t.id, {
-                          size: { ...t.size, height: parseInt(i.target.value) || 100 }
+                        value: a.size.height,
+                        onChange: (t) => L(a.id, {
+                          size: { ...a.size, height: parseInt(t.target.value) || 100 }
                         })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ a("label", { children: [
+                  /* @__PURE__ */ r("label", { children: [
                     "Opacity",
                     /* @__PURE__ */ e(
                       "input",
@@ -1667,9 +3436,9 @@ const ue = {
                         min: "0",
                         max: "1",
                         step: "0.1",
-                        value: t.opacity,
-                        onChange: (i) => E(t.id, {
-                          opacity: parseFloat(i.target.value)
+                        value: a.opacity,
+                        onChange: (t) => L(a.id, {
+                          opacity: parseFloat(t.target.value)
                         })
                       }
                     )
@@ -1678,40 +3447,40 @@ const ue = {
               })()
             ] })
           ] }),
-          g === "audio" && /* @__PURE__ */ a("div", { className: "audio-panel", children: [
-            /* @__PURE__ */ a("div", { className: "panel-header", children: [
+          b === "audio" && /* @__PURE__ */ r("div", { className: "audio-panel", children: [
+            /* @__PURE__ */ r("div", { className: "panel-header", children: [
               /* @__PURE__ */ e("h3", { children: "Audio Mixer" }),
               /* @__PURE__ */ e(
                 "button",
                 {
                   className: "add-button",
                   onClick: () => {
-                    U(!0);
+                    M(!0);
                   },
-                  disabled: m,
+                  disabled: y,
                   children: "+ Add"
                 }
               )
             ] }),
-            /* @__PURE__ */ a("div", { className: "audio-sources", children: [
-              n.sources.filter(
-                (t) => t.type === "microphone" || t.type === "system-audio" || t.type === "video"
-              ).map((t) => {
-                var i;
-                return /* @__PURE__ */ a("div", { className: "audio-source", children: [
-                  /* @__PURE__ */ a("div", { className: "audio-header", children: [
-                    /* @__PURE__ */ e("span", { className: "audio-icon", children: (i = se.find((o) => o.type === t.type)) == null ? void 0 : i.icon }),
-                    /* @__PURE__ */ e("span", { className: "audio-name", children: t.name }),
+            /* @__PURE__ */ r("div", { className: "audio-sources", children: [
+              i.sources.filter(
+                (a) => a.type === "microphone" || a.type === "system-audio" || a.type === "video"
+              ).map((a) => {
+                var t;
+                return /* @__PURE__ */ r("div", { className: "audio-source", children: [
+                  /* @__PURE__ */ r("div", { className: "audio-header", children: [
+                    /* @__PURE__ */ e("span", { className: "audio-icon", children: (t = le.find((c) => c.type === a.type)) == null ? void 0 : t.icon }),
+                    /* @__PURE__ */ e("span", { className: "audio-name", children: a.name }),
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        className: t.muted ? "muted" : "",
-                        onClick: () => w(t.id, { muted: !t.muted }),
-                        children: t.muted ? "🔇" : "🔊"
+                        className: a.muted ? "muted" : "",
+                        onClick: () => _(a.id, { muted: !a.muted }),
+                        children: a.muted ? "🔇" : "🔊"
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ a("div", { className: "audio-slider", children: [
+                  /* @__PURE__ */ r("div", { className: "audio-slider", children: [
                     /* @__PURE__ */ e(
                       "input",
                       {
@@ -1719,13 +3488,13 @@ const ue = {
                         min: "0",
                         max: "1",
                         step: "0.01",
-                        value: t.volume ?? 1,
-                        onChange: (o) => w(t.id, { volume: parseFloat(o.target.value) }),
-                        disabled: t.muted
+                        value: a.volume ?? 1,
+                        onChange: (c) => _(a.id, { volume: parseFloat(c.target.value) }),
+                        disabled: a.muted
                       }
                     ),
-                    /* @__PURE__ */ a("span", { className: "volume-value", children: [
-                      Math.round((t.volume ?? 1) * 100),
+                    /* @__PURE__ */ r("span", { className: "volume-value", children: [
+                      Math.round((a.volume ?? 1) * 100),
                       "%"
                     ] })
                   ] }),
@@ -1733,80 +3502,80 @@ const ue = {
                     "div",
                     {
                       className: "meter-fill",
-                      style: { width: `${(t.volume ?? 1) * 70 + Math.random() * 30}%` }
+                      style: { width: `${(a.volume ?? 1) * 70 + Math.random() * 30}%` }
                     }
                   ) })
-                ] }, t.id);
+                ] }, a.id);
               }),
-              n.sources.filter(
-                (t) => t.type === "microphone" || t.type === "system-audio"
+              i.sources.filter(
+                (a) => a.type === "microphone" || a.type === "system-audio"
               ).length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No audio sources added" })
             ] })
           ] }),
-          g === "destinations" && /* @__PURE__ */ a("div", { className: "destinations-panel", children: [
-            /* @__PURE__ */ a("div", { className: "panel-header", children: [
+          b === "destinations" && /* @__PURE__ */ r("div", { className: "destinations-panel", children: [
+            /* @__PURE__ */ r("div", { className: "panel-header", children: [
               /* @__PURE__ */ e("h3", { children: "Destinations" }),
               /* @__PURE__ */ e(
                 "button",
                 {
                   className: "add-button",
-                  onClick: () => V(!0),
-                  disabled: m,
+                  onClick: () => K(!0),
+                  disabled: y,
                   children: "+ Add"
                 }
               )
             ] }),
-            /* @__PURE__ */ a("div", { className: "destinations-list", children: [
-              n.destinations.map((t) => {
-                var i;
-                return /* @__PURE__ */ a("div", { className: "destination-item", children: [
-                  /* @__PURE__ */ a("div", { className: "destination-header", children: [
+            /* @__PURE__ */ r("div", { className: "destinations-list", children: [
+              i.destinations.map((a) => {
+                var t;
+                return /* @__PURE__ */ r("div", { className: "destination-item", children: [
+                  /* @__PURE__ */ r("div", { className: "destination-header", children: [
                     /* @__PURE__ */ e(
                       "span",
                       {
                         className: "status-indicator",
-                        style: { backgroundColor: u(t.status) }
+                        style: { backgroundColor: o(a.status) }
                       }
                     ),
-                    /* @__PURE__ */ e("span", { className: "destination-icon", children: (i = oe.find((o) => o.platform === t.platform)) == null ? void 0 : i.icon }),
-                    /* @__PURE__ */ e("span", { className: "destination-name", children: t.name }),
-                    /* @__PURE__ */ a("label", { className: "toggle", children: [
+                    /* @__PURE__ */ e("span", { className: "destination-icon", children: (t = fe.find((c) => c.platform === a.platform)) == null ? void 0 : t.icon }),
+                    /* @__PURE__ */ e("span", { className: "destination-name", children: a.name }),
+                    /* @__PURE__ */ r("label", { className: "toggle", children: [
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "checkbox",
-                          checked: t.enabled,
-                          onChange: (o) => G(t.id, { enabled: o.target.checked }),
-                          disabled: m
+                          checked: a.enabled,
+                          onChange: (c) => X(a.id, { enabled: c.target.checked }),
+                          disabled: y
                         }
                       ),
                       /* @__PURE__ */ e("span", { className: "toggle-slider" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ a("div", { className: "destination-config", children: [
-                    /* @__PURE__ */ a("label", { children: [
+                  /* @__PURE__ */ r("div", { className: "destination-config", children: [
+                    /* @__PURE__ */ r("label", { children: [
                       "Server URL",
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "text",
-                          value: t.url,
-                          onChange: (o) => G(t.id, { url: o.target.value }),
+                          value: a.url,
+                          onChange: (c) => X(a.id, { url: c.target.value }),
                           placeholder: "rtmp://...",
-                          disabled: m
+                          disabled: y
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ a("label", { children: [
+                    /* @__PURE__ */ r("label", { children: [
                       "Stream Key",
                       /* @__PURE__ */ e(
                         "input",
                         {
                           type: "password",
-                          value: t.streamKey || "",
-                          onChange: (o) => G(t.id, { streamKey: o.target.value }),
+                          value: a.streamKey || "",
+                          onChange: (c) => X(a.id, { streamKey: c.target.value }),
                           placeholder: "Enter stream key",
-                          disabled: m
+                          disabled: y
                         }
                       )
                     ] })
@@ -1815,39 +3584,39 @@ const ue = {
                     "button",
                     {
                       className: "remove-button",
-                      onClick: () => O(t.id),
-                      disabled: m,
+                      onClick: () => G(a.id),
+                      disabled: y,
                       children: "Remove"
                     }
                   )
-                ] }, t.id);
+                ] }, a.id);
               }),
-              n.destinations.length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No destinations configured" })
+              i.destinations.length === 0 && /* @__PURE__ */ e("p", { className: "empty-message", children: "No destinations configured" })
             ] })
           ] }),
-          g === "settings" && /* @__PURE__ */ a("div", { className: "settings-panel", children: [
-            /* @__PURE__ */ a("div", { className: "setting-section", children: [
+          b === "settings" && /* @__PURE__ */ r("div", { className: "settings-panel", children: [
+            /* @__PURE__ */ r("div", { className: "setting-section", children: [
               /* @__PURE__ */ e("h4", { children: "Video" }),
-              /* @__PURE__ */ a("label", { children: [
+              /* @__PURE__ */ r("label", { children: [
                 "Resolution",
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ r(
                   "select",
                   {
-                    value: `${n.settings.video.resolution.width}x${n.settings.video.resolution.height}`,
-                    onChange: (t) => {
-                      const [i, o] = t.target.value.split("x").map(Number);
-                      h({
+                    value: `${i.settings.video.resolution.width}x${i.settings.video.resolution.height}`,
+                    onChange: (a) => {
+                      const [t, c] = a.target.value.split("x").map(Number);
+                      g({
                         settings: {
-                          ...n.settings,
-                          video: { ...n.settings.video, resolution: { width: i, height: o } }
+                          ...i.settings,
+                          video: { ...i.settings.video, resolution: { width: t, height: c } }
                         },
                         layout: {
-                          ...n.layout,
-                          canvas: { ...n.layout.canvas, width: i, height: o }
+                          ...i.layout,
+                          canvas: { ...i.layout.canvas, width: t, height: c }
                         }
                       });
                     },
-                    disabled: m,
+                    disabled: y,
                     children: [
                       /* @__PURE__ */ e("option", { value: "1920x1080", children: "1080p (1920x1080)" }),
                       /* @__PURE__ */ e("option", { value: "1280x720", children: "720p (1280x720)" }),
@@ -1856,22 +3625,22 @@ const ue = {
                   }
                 )
               ] }),
-              /* @__PURE__ */ a("label", { children: [
+              /* @__PURE__ */ r("label", { children: [
                 "Frame Rate",
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ r(
                   "select",
                   {
-                    value: n.settings.video.frameRate,
-                    onChange: (t) => h({
+                    value: i.settings.video.frameRate,
+                    onChange: (a) => g({
                       settings: {
-                        ...n.settings,
+                        ...i.settings,
                         video: {
-                          ...n.settings.video,
-                          frameRate: parseInt(t.target.value)
+                          ...i.settings.video,
+                          frameRate: parseInt(a.target.value)
                         }
                       }
                     }),
-                    disabled: m,
+                    disabled: y,
                     children: [
                       /* @__PURE__ */ e("option", { value: "24", children: "24 fps" }),
                       /* @__PURE__ */ e("option", { value: "30", children: "30 fps" }),
@@ -1880,69 +3649,69 @@ const ue = {
                   }
                 )
               ] }),
-              /* @__PURE__ */ a("label", { children: [
+              /* @__PURE__ */ r("label", { children: [
                 "Bitrate (kbps)",
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "number",
-                    value: n.settings.video.bitrate,
-                    onChange: (t) => h({
+                    value: i.settings.video.bitrate,
+                    onChange: (a) => g({
                       settings: {
-                        ...n.settings,
+                        ...i.settings,
                         video: {
-                          ...n.settings.video,
-                          bitrate: parseInt(t.target.value) || 6e3
+                          ...i.settings.video,
+                          bitrate: parseInt(a.target.value) || 6e3
                         }
                       }
                     }),
                     min: "1000",
                     max: "50000",
-                    disabled: m
+                    disabled: y
                   }
                 )
               ] }),
-              /* @__PURE__ */ a("label", { children: [
+              /* @__PURE__ */ r("label", { children: [
                 "Keyframe Interval (sec)",
                 /* @__PURE__ */ e(
                   "input",
                   {
                     type: "number",
-                    value: n.settings.video.keyframe,
-                    onChange: (t) => h({
+                    value: i.settings.video.keyframe,
+                    onChange: (a) => g({
                       settings: {
-                        ...n.settings,
+                        ...i.settings,
                         video: {
-                          ...n.settings.video,
-                          keyframe: parseInt(t.target.value) || 2
+                          ...i.settings.video,
+                          keyframe: parseInt(a.target.value) || 2
                         }
                       }
                     }),
                     min: "1",
                     max: "10",
-                    disabled: m
+                    disabled: y
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ a("div", { className: "setting-section", children: [
+            /* @__PURE__ */ r("div", { className: "setting-section", children: [
               /* @__PURE__ */ e("h4", { children: "Audio" }),
-              /* @__PURE__ */ a("label", { children: [
+              /* @__PURE__ */ r("label", { children: [
                 "Sample Rate",
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ r(
                   "select",
                   {
-                    value: n.settings.audio.sampleRate,
-                    onChange: (t) => h({
+                    value: i.settings.audio.sampleRate,
+                    onChange: (a) => g({
                       settings: {
-                        ...n.settings,
+                        ...i.settings,
                         audio: {
-                          ...n.settings.audio,
-                          sampleRate: parseInt(t.target.value)
+                          ...i.settings.audio,
+                          sampleRate: parseInt(a.target.value)
                         }
                       }
                     }),
-                    disabled: m,
+                    disabled: y,
                     children: [
                       /* @__PURE__ */ e("option", { value: "44100", children: "44.1 kHz" }),
                       /* @__PURE__ */ e("option", { value: "48000", children: "48 kHz" })
@@ -1950,19 +3719,19 @@ const ue = {
                   }
                 )
               ] }),
-              /* @__PURE__ */ a("label", { children: [
+              /* @__PURE__ */ r("label", { children: [
                 "Audio Bitrate (kbps)",
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ r(
                   "select",
                   {
-                    value: n.settings.audio.bitrate,
-                    onChange: (t) => h({
+                    value: i.settings.audio.bitrate,
+                    onChange: (a) => g({
                       settings: {
-                        ...n.settings,
-                        audio: { ...n.settings.audio, bitrate: parseInt(t.target.value) }
+                        ...i.settings,
+                        audio: { ...i.settings.audio, bitrate: parseInt(a.target.value) }
                       }
                     }),
-                    disabled: m,
+                    disabled: y,
                     children: [
                       /* @__PURE__ */ e("option", { value: "96", children: "96 kbps" }),
                       /* @__PURE__ */ e("option", { value: "128", children: "128 kbps" }),
@@ -1977,70 +3746,70 @@ const ue = {
         ] })
       ] })
     ] }),
-    m && /* @__PURE__ */ e("footer", { className: "streaming__footer", children: /* @__PURE__ */ a("div", { className: "footer-stats", children: [
-      /* @__PURE__ */ a("span", { className: "stat", children: [
+    y && /* @__PURE__ */ e("footer", { className: "streaming__footer", children: /* @__PURE__ */ r("div", { className: "footer-stats", children: [
+      /* @__PURE__ */ r("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "CPU" }),
-        /* @__PURE__ */ a("span", { className: "value", children: [
-          b.cpuUsage.toFixed(1),
+        /* @__PURE__ */ r("span", { className: "value", children: [
+          S.cpuUsage.toFixed(1),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ a("span", { className: "stat", children: [
+      /* @__PURE__ */ r("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "Memory" }),
-        /* @__PURE__ */ a("span", { className: "value", children: [
-          b.memoryUsage.toFixed(1),
+        /* @__PURE__ */ r("span", { className: "value", children: [
+          S.memoryUsage.toFixed(1),
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ a("span", { className: "stat", children: [
+      /* @__PURE__ */ r("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "Dropped" }),
-        /* @__PURE__ */ e("span", { className: "value", children: b.droppedFrames })
+        /* @__PURE__ */ e("span", { className: "value", children: S.droppedFrames })
       ] }),
-      /* @__PURE__ */ a("span", { className: "stat", children: [
+      /* @__PURE__ */ r("span", { className: "stat", children: [
         /* @__PURE__ */ e("label", { children: "Peak Viewers" }),
-        /* @__PURE__ */ e("span", { className: "value", children: b.peakViewers })
+        /* @__PURE__ */ e("span", { className: "value", children: S.peakViewers })
       ] })
     ] }) }),
-    x && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ a("div", { className: "modal", children: [
-      /* @__PURE__ */ a("div", { className: "modal-header", children: [
+    W && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ r("div", { className: "modal", children: [
+      /* @__PURE__ */ r("div", { className: "modal-header", children: [
         /* @__PURE__ */ e("h3", { children: "Add Source" }),
-        /* @__PURE__ */ e("button", { className: "close-button", onClick: () => U(!1), children: "×" })
+        /* @__PURE__ */ e("button", { className: "close-button", onClick: () => M(!1), children: "×" })
       ] }),
-      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "source-type-grid", children: se.map((t) => /* @__PURE__ */ a(
+      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "source-type-grid", children: le.map((a) => /* @__PURE__ */ r(
         "button",
         {
           className: "source-type-button",
-          onClick: () => ee(t.type),
+          onClick: () => re(a.type),
           children: [
-            /* @__PURE__ */ e("span", { className: "icon", children: t.icon }),
-            /* @__PURE__ */ e("span", { className: "name", children: t.name })
+            /* @__PURE__ */ e("span", { className: "icon", children: a.icon }),
+            /* @__PURE__ */ e("span", { className: "name", children: a.name })
           ]
         },
-        t.type
+        a.type
       )) }) })
     ] }) }),
-    q && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ a("div", { className: "modal", children: [
-      /* @__PURE__ */ a("div", { className: "modal-header", children: [
+    J && /* @__PURE__ */ e("div", { className: "modal-overlay", children: /* @__PURE__ */ r("div", { className: "modal", children: [
+      /* @__PURE__ */ r("div", { className: "modal-header", children: [
         /* @__PURE__ */ e("h3", { children: "Add Destination" }),
-        /* @__PURE__ */ e("button", { className: "close-button", onClick: () => V(!1), children: "×" })
+        /* @__PURE__ */ e("button", { className: "close-button", onClick: () => K(!1), children: "×" })
       ] }),
-      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "platform-grid", children: oe.map((t) => /* @__PURE__ */ a(
+      /* @__PURE__ */ e("div", { className: "modal-content", children: /* @__PURE__ */ e("div", { className: "platform-grid", children: fe.map((a) => /* @__PURE__ */ r(
         "button",
         {
           className: "platform-button",
-          onClick: () => W(t.platform),
+          onClick: () => B(a.platform),
           children: [
-            /* @__PURE__ */ e("span", { className: "icon", children: t.icon }),
-            /* @__PURE__ */ e("span", { className: "name", children: t.name })
+            /* @__PURE__ */ e("span", { className: "icon", children: a.icon }),
+            /* @__PURE__ */ e("span", { className: "name", children: a.name })
           ]
         },
-        t.platform
+        a.platform
       )) }) })
     ] }) })
   ] });
 };
 export {
-  ye as NiceLiveStreaming,
-  Ne as NiceScreenRecorder,
-  be as NiceVideoEditor
+  Qe as NiceLiveStreaming,
+  Ye as NiceScreenRecorder,
+  Xe as NiceVideoEditor
 };