strataplayer 1.1.1 → 1.2.0

package/dist/strataplayer.es.js

@@ -1,45 +1,45 @@
-var et = Object.defineProperty;
-var tt = (c, e, i) => e in c ? et(c, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : c[e] = i;
-var y = (c, e, i) => tt(c, typeof e != "symbol" ? e + "" : e, i);
-import $e, { useState as w, useEffect as R, forwardRef as Fe, createElement as ne, useRef as H, useMemo as it, useSyncExternalStore as at, useCallback as rt } from "react";
-import { createRoot as st } from "react-dom/client";
-import { jsxs as d, jsx as t, Fragment as A } from "react/jsx-runtime";
-class nt {
+var jt = Object.defineProperty;
+var Ht = (o, e, i) => e in o ? jt(o, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[e] = i;
+var w = (o, e, i) => Ht(o, typeof e != "symbol" ? e + "" : e, i);
+import we, { useState as k, useEffect as P, forwardRef as ft, createElement as ke, useRef as F, useLayoutEffect as Wt, useMemo as ve, useSyncExternalStore as qt, useCallback as ge } from "react";
+import { createRoot as Dt } from "react-dom/client";
+import { jsxs as h, jsx as t, Fragment as R } from "react/jsx-runtime";
+class Ut {
   constructor() {
-    y(this, "events");
+    w(this, "events");
     this.events = /* @__PURE__ */ new Map();
   }
   on(e, i) {
-    var a;
-    return this.events.has(e) || this.events.set(e, []), (a = this.events.get(e)) == null || a.push(i), () => this.off(e, i);
+    var r;
+    return this.events.has(e) || this.events.set(e, []), (r = this.events.get(e)) == null || r.push(i), () => this.off(e, i);
   }
   off(e, i) {
-    const a = this.events.get(e);
-    a && this.events.set(
+    const r = this.events.get(e);
+    r && this.events.set(
       e,
-      a.filter((n) => n !== i)
+      r.filter((n) => n !== i)
     );
   }
   emit(e, i) {
-    const a = this.events.get(e);
-    a && a.forEach((n) => n(i));
+    const r = this.events.get(e);
+    r && r.forEach((n) => n(i));
   }
   destroy() {
     this.events.clear();
   }
 }
-class ot {
+class _t {
   constructor(e) {
-    y(this, "state");
-    y(this, "listeners");
+    w(this, "state");
+    w(this, "listeners");
     this.state = e, this.listeners = /* @__PURE__ */ new Set();
   }
   get() {
     return this.state;
   }
   setState(e) {
-    const i = this.state, a = typeof e == "function" ? e(i) : e;
-    this.state = { ...i, ...a }, this.listeners.forEach((n) => n(this.state, i));
+    const i = this.state, r = typeof e == "function" ? e(i) : e;
+    this.state = { ...i, ...r }, this.listeners.forEach((n) => n(this.state, i));
   }
   subscribe(e) {
     return this.listeners.add(e), () => this.listeners.delete(e);
@@ -48,13 +48,13 @@ class ot {
     this.listeners.clear();
   }
 }
-class lt {
+class Gt {
   constructor(e) {
-    y(this, "context", null);
-    y(this, "source", null);
-    y(this, "gainNode", null);
-    y(this, "video");
-    y(this, "isInitialized", !1);
+    w(this, "context", null);
+    w(this, "source", null);
+    w(this, "gainNode", null);
+    w(this, "video");
+    w(this, "isInitialized", !1);
     this.video = e;
   }
   /**
@@ -77,7 +77,7 @@ class lt {
     this.context && this.context.close(), this.isInitialized = !1;
   }
 }
-const le = {
+const Ne = {
   useNative: !1,
   fixCapitalization: !1,
   backgroundOpacity: 50,
@@ -88,9 +88,10 @@ const le = {
   isBold: !1,
   textColor: "#ffffff",
   verticalOffset: 40
-}, qe = "strata-settings-v3", O = {
+}, pt = "strata-settings-v3", V = {
   isPlaying: !1,
   isBuffering: !1,
+  isLive: !1,
   currentTime: 0,
   duration: 0,
   buffered: [],
@@ -108,7 +109,7 @@ const le = {
   subtitleTracks: [],
   currentSubtitle: -1,
   subtitleOffset: 0,
-  subtitleSettings: le,
+  subtitleSettings: Ne,
   activeCues: [],
   viewMode: "normal",
   notifications: [],
@@ -116,108 +117,263 @@ const le = {
   themeColor: "#6366f1",
   theme: "default",
   sources: [],
-  currentSourceIndex: -1
-}, He = (c = {}) => {
+  currentSourceIndex: -1,
+  // New State Defaults
+  isLocked: !1,
+  flipState: { horizontal: !1, vertical: !1 },
+  aspectRatio: "default",
+  isAutoSized: !1,
+  isLooping: !1,
+  controlsVisible: !0
+}, bt = (o = {}) => {
   let e = {};
-  if (!c.disablePersistence && typeof window < "u")
+  if (!o.disablePersistence && typeof window < "u")
     try {
-      const a = localStorage.getItem(qe);
-      a && (e = JSON.parse(a));
+      const r = localStorage.getItem(pt);
+      r && (e = JSON.parse(r));
     } catch {
     }
   const i = {
-    ...le,
+    ...Ne,
     ...e.subtitleSettings || {},
-    ...c.subtitleSettings || {}
+    ...o.subtitleSettings || {}
   };
   return {
-    ...O,
+    ...V,
     ...e,
     // Load saved first
     // Override with config if present (not undefined)
-    volume: c.volume ?? e.volume ?? O.volume,
-    isMuted: c.muted ?? e.isMuted ?? O.isMuted,
-    playbackRate: c.playbackRate ?? e.playbackRate ?? O.playbackRate,
-    audioGain: c.audioGain ?? e.audioGain ?? O.audioGain,
-    theme: c.theme ?? e.theme ?? O.theme,
-    themeColor: c.themeColor ?? e.themeColor ?? O.themeColor,
-    iconSize: c.iconSize ?? e.iconSize ?? O.iconSize,
-    subtitleSettings: i
+    volume: o.volume ?? e.volume ?? V.volume,
+    isMuted: o.muted ?? e.isMuted ?? V.isMuted,
+    playbackRate: o.playbackRate ?? e.playbackRate ?? V.playbackRate,
+    audioGain: o.audioGain ?? e.audioGain ?? V.audioGain,
+    theme: o.theme ?? e.theme ?? V.theme,
+    themeColor: o.themeColor ?? e.themeColor ?? V.themeColor,
+    iconSize: o.iconSize ?? e.iconSize ?? V.iconSize,
+    subtitleSettings: i,
+    // Config overrides state for these visual modes
+    isAutoSized: o.autoSize ?? V.isAutoSized,
+    isLive: o.isLive ?? e.isLive ?? V.isLive,
+    isLooping: o.loop ?? e.isLooping ?? V.isLooping
   };
 };
-class ct {
+class Qt {
   constructor(e = {}, i) {
-    y(this, "video");
-    y(this, "container", null);
-    y(this, "events");
-    y(this, "store");
-    y(this, "plugins", /* @__PURE__ */ new Map());
-    y(this, "audioEngine");
-    y(this, "config");
+    w(this, "video");
+    w(this, "container", null);
+    w(this, "events");
+    w(this, "store");
+    w(this, "plugins", /* @__PURE__ */ new Map());
+    w(this, "audioEngine");
+    w(this, "config");
+    w(this, "resizeObserver", null);
     // Retry Logic
-    y(this, "retryCount", 0);
-    y(this, "maxRetries", 5);
-    y(this, "retryTimer", null);
-    y(this, "currentSource", null);
-    y(this, "currentSrc", "");
-    y(this, "currentTracks", []);
+    w(this, "retryCount", 0);
+    w(this, "maxRetries", 5);
+    w(this, "retryTimer", null);
+    w(this, "currentSource", null);
+    w(this, "currentSrc", "");
+    w(this, "currentTracks", []);
     // Cast
-    y(this, "castInitialized", !1);
-    y(this, "boundCueChange");
-    y(this, "boundFullscreenChange");
-    this.config = e, this.video = i || document.createElement("video"), this.video.crossOrigin = "anonymous", this.events = new nt();
-    const a = He(e);
-    this.store = new ot(a), this.audioEngine = new lt(this.video), this.boundCueChange = this.handleCueChange.bind(this), this.boundFullscreenChange = () => {
-      this.store.setState({ isFullscreen: !!document.fullscreenElement });
-    }, this.video.volume = a.volume, this.video.muted = a.isMuted, this.video.playbackRate = a.playbackRate, a.audioGain > 1 && this.audioEngine.setGain(a.audioGain), this.initVideoListeners(), this.initCast(), e.disablePersistence || this.store.subscribe((n) => {
-      const l = {
+    w(this, "castInitialized", !1);
+    w(this, "boundCueChange");
+    w(this, "boundFullscreenChange");
+    this.config = e, this.video = i || document.createElement("video"), this.video.crossOrigin = "anonymous", e.playsInline !== !1 && (this.video.playsInline = !0), this.events = new Ut();
+    const r = bt(e);
+    this.store = new _t(r), this.audioEngine = new Gt(this.video), this.boundCueChange = this.handleCueChange.bind(this), this.boundFullscreenChange = () => {
+      const n = !!document.fullscreenElement;
+      if (this.store.setState({ isFullscreen: n }), this.emit("resize"), this.emit(n ? "fullscreen" : "fullscreen_exit"), n && this.config.autoOrientation && screen.orientation && "lock" in screen.orientation) {
+        const m = this.video.videoWidth > this.video.videoHeight ? "landscape" : "portrait";
+        try {
+          screen.orientation.lock(m).catch(() => {
+          });
+        } catch {
+        }
+      } else !n && screen.orientation && "unlock" in screen.orientation && screen.orientation.unlock();
+    }, this.video.volume = r.volume, this.video.muted = r.isMuted, this.video.playbackRate = r.playbackRate, this.video.loop = r.isLooping, r.audioGain > 1 && this.audioEngine.setGain(r.audioGain), r.isAutoSized && (this.video.style.objectFit = "cover"), this.initVideoListeners(), this.initCast(), e.disablePersistence || this.store.subscribe((n) => {
+      const d = {
         volume: n.volume,
         isMuted: n.isMuted,
         playbackRate: n.playbackRate,
         subtitleSettings: n.subtitleSettings,
         iconSize: n.iconSize,
         themeColor: n.themeColor,
-        theme: n.theme
+        theme: n.theme,
+        isLive: n.isLive,
+        isLooping: n.isLooping
       };
-      localStorage.setItem(qe, JSON.stringify(l));
+      localStorage.setItem(pt, JSON.stringify(d));
     });
   }
+  // --- Instance Properties ---
+  get playing() {
+    return !this.video.paused && !this.video.ended && this.video.readyState > 2;
+  }
+  get currentTime() {
+    return this.video.currentTime;
+  }
+  set currentTime(e) {
+    this.seek(e);
+  }
+  get duration() {
+    return this.video.duration || 0;
+  }
+  get paused() {
+    return this.video.paused;
+  }
+  get volume() {
+    return this.video.volume;
+  }
+  set volume(e) {
+    this.setVolume(e);
+  }
+  get muted() {
+    return this.video.muted;
+  }
+  set muted(e) {
+    this.video.muted = e, this.store.setState({ isMuted: e });
+  }
+  get playbackRate() {
+    return this.video.playbackRate;
+  }
+  set playbackRate(e) {
+    this.video.playbackRate = e;
+  }
+  get loop() {
+    return this.video.loop;
+  }
+  set loop(e) {
+    this.video.loop = e, this.store.setState({ isLooping: e });
+  }
+  // --- Instance Methods ---
+  forward(e = 10) {
+    this.skip(e);
+  }
+  backward(e = 10) {
+    this.skip(-e);
+  }
+  // --- Event API ---
+  on(e, i) {
+    return this.events.on(e, i);
+  }
+  off(e, i) {
+    return this.events.off(e, i);
+  }
+  emit(e, i) {
+    return this.events.emit(e, i);
+  }
   initVideoListeners() {
-    const e = (i) => this.store.setState(i);
-    this.video.addEventListener("play", () => e({ isPlaying: !0 })), this.video.addEventListener("pause", () => e({ isPlaying: !1 })), this.video.addEventListener("ended", () => e({ isPlaying: !1 })), this.video.addEventListener("waiting", () => e({ isBuffering: !0 })), this.video.addEventListener("playing", () => e({ isBuffering: !1 })), this.video.addEventListener("loadeddata", () => {
-      e({ isBuffering: !1 }), this.retryCount = 0, this.removeNotification("retry"), this.store.get().error && e({ error: null });
-    }), this.video.addEventListener("canplay", () => e({ isBuffering: !1 })), this.video.addEventListener("timeupdate", () => {
-      this.video.seeking || e({ currentTime: this.video.currentTime });
-    }), this.video.addEventListener("seeked", () => e({ currentTime: this.video.currentTime })), this.video.addEventListener("durationchange", () => e({ duration: this.video.duration })), this.video.addEventListener("volumechange", () => e({ volume: this.video.volume, isMuted: this.video.muted })), this.video.addEventListener("ratechange", () => e({ playbackRate: this.video.playbackRate })), this.video.addEventListener("error", () => this.handleError()), this.video.addEventListener("progress", this.updateBuffer.bind(this)), this.video.addEventListener("enterpictureinpicture", () => e({ isPip: !0 })), this.video.addEventListener("leavepictureinpicture", () => e({ isPip: !1 })), document.addEventListener("fullscreenchange", this.boundFullscreenChange), this.video.textTracks.addEventListener("addtrack", this.updateSubtitles.bind(this)), this.video.textTracks.addEventListener("removetrack", this.updateSubtitles.bind(this));
+    const e = (r) => this.store.setState(r);
+    [
+      "abort",
+      "canplay",
+      "canplaythrough",
+      "durationchange",
+      "emptied",
+      "ended",
+      "error",
+      "loadeddata",
+      "loadedmetadata",
+      "loadstart",
+      "pause",
+      "play",
+      "playing",
+      "progress",
+      "ratechange",
+      "seeked",
+      "seeking",
+      "stalled",
+      "suspend",
+      "timeupdate",
+      "volumechange",
+      "waiting"
+    ].forEach((r) => {
+      this.video.addEventListener(r, (n) => {
+        switch (this.emit(`video:${r}`, n), r === "play" && this.emit("play"), r === "pause" && this.emit("pause"), r === "ended" && this.emit("ended"), r === "error" && this.emit("error", this.video.error), r === "seeked" && this.emit("seek"), r) {
+          case "play":
+            e({ isPlaying: !0 });
+            break;
+          case "pause":
+            e({ isPlaying: !1 });
+            break;
+          case "ended":
+            e({ isPlaying: !1 });
+            break;
+          case "waiting":
+            e({ isBuffering: !0 }), this.emit("loading", !0);
+            break;
+          case "playing":
+            e({ isBuffering: !1 }), this.emit("loading", !1);
+            break;
+          case "canplay":
+            e({ isBuffering: !1 }), this.emit("loading", !1);
+            break;
+          case "loadeddata":
+            e({ isBuffering: !1 }), this.retryCount = 0, this.removeNotification("retry"), this.store.get().error && e({ error: null });
+            break;
+          case "timeupdate":
+            this.video.seeking || e({ currentTime: this.video.currentTime });
+            break;
+          case "seeked":
+            e({ currentTime: this.video.currentTime });
+            break;
+          case "durationchange":
+            e({ duration: this.video.duration });
+            break;
+          case "volumechange":
+            e({ volume: this.video.volume, isMuted: this.video.muted });
+            break;
+          case "ratechange":
+            e({ playbackRate: this.video.playbackRate });
+            break;
+          case "error":
+            this.handleError();
+            break;
+          case "progress":
+            this.updateBuffer();
+            break;
+          case "enterpictureinpicture":
+            e({ isPip: !0 });
+            break;
+          case "leavepictureinpicture":
+            e({ isPip: !1 });
+            break;
+        }
+      });
+    }), this.video.addEventListener("enterpictureinpicture", () => {
+      e({ isPip: !0 }), this.emit("pip", !0);
+    }), this.video.addEventListener("leavepictureinpicture", () => {
+      e({ isPip: !1 }), this.emit("pip", !1);
+    }), document.addEventListener("fullscreenchange", this.boundFullscreenChange), this.video.textTracks.addEventListener("addtrack", this.updateSubtitles.bind(this)), this.video.textTracks.addEventListener("removetrack", this.updateSubtitles.bind(this));
   }
   triggerError(e, i = !1) {
     i ? this.handleError(e) : this.notify({ type: "warning", message: `Warning: ${e}`, duration: 5e3 });
   }
   handleError(e) {
-    const i = this.video.error, a = e || (i == null ? void 0 : i.message) || (i ? `Code ${i.code}` : "Unknown Error");
-    if (this.removeNotification("retry"), this.retryCount < this.maxRetries) {
+    const i = this.video.error, r = e || (i == null ? void 0 : i.message) || (i ? `Code ${i.code}` : "Unknown Error");
+    if (this.removeNotification("retry"), this.emit("video:error", i), this.retryCount < this.maxRetries) {
       this.retryCount++;
       const n = Math.pow(2, this.retryCount - 1) * 1500;
       this.notify({
         id: "retry",
         type: "loading",
-        message: `Error: ${a}. Retrying (${this.retryCount}/${this.maxRetries})...`
-      }), console.warn(`[StrataPlayer] Error: ${a}. Retrying in ${n}ms...`), this.retryTimer && clearTimeout(this.retryTimer), this.retryTimer = setTimeout(() => {
+        message: `Error: ${r}. Retrying (${this.retryCount}/${this.maxRetries})...`
+      }), console.warn(`[StrataPlayer] Error: ${r}. Retrying in ${n}ms...`), this.retryTimer && clearTimeout(this.retryTimer), this.retryTimer = setTimeout(() => {
         if (this.currentSource) {
           this.load(this.currentSource, this.currentTracks, !0);
-          const l = this.store.get().currentTime;
-          if (l > 0) {
-            const p = () => {
-              this.video.currentTime = l, this.video.removeEventListener("canplay", p);
+          const d = this.store.get().currentTime;
+          if (d > 0) {
+            const m = () => {
+              this.video.currentTime = d, this.video.removeEventListener("canplay", m);
             };
-            this.video.addEventListener("canplay", p);
+            this.video.addEventListener("canplay", m);
           }
         }
       }, n);
     } else {
       this.removeNotification("retry");
-      const n = `Failed to play after ${this.maxRetries} attempts: ${a}`;
-      this.store.setState({ error: n });
+      const n = `Failed to play after ${this.maxRetries} attempts: ${r}`;
+      this.store.setState({ error: n }), this.emit("error", n);
     }
   }
   updateBuffer() {
@@ -231,9 +387,9 @@ class ct {
   }
   updateSubtitles() {
     setTimeout(() => {
-      const e = Array.from(this.video.textTracks).filter((a) => a.kind === "subtitles" || a.kind === "captions").map((a, n) => ({
-        label: a.label || a.language || `Track ${n + 1}`,
-        language: a.language,
+      const e = Array.from(this.video.textTracks).filter((r) => r.kind === "subtitles" || r.kind === "captions").map((r, n) => ({
+        label: r.label || r.language || `Track ${n + 1}`,
+        language: r.language,
         index: n
       }));
       this.store.setState({ subtitleTracks: e });
@@ -243,20 +399,23 @@ class ct {
   }
   // --- Utility ---
   async fetchWithRetry(e, i = 3) {
-    for (let a = 0; a < i; a++)
+    for (let r = 0; r < i; r++)
       try {
         const n = await fetch(e);
         if (!n.ok) throw new Error(`HTTP ${n.status}`);
         return n;
       } catch (n) {
-        if (a === i - 1) throw n;
-        await new Promise((l) => setTimeout(l, 1e3 * Math.pow(2, a)));
+        if (r === i - 1) throw n;
+        await new Promise((d) => setTimeout(d, 1e3 * Math.pow(2, r)));
       }
     throw new Error("Fetch failed");
   }
   // --- Core Methods ---
   attach(e) {
-    this.container = e, this.container.contains(this.video) || (this.video.style.width = "100%", this.video.style.height = "100%", this.video.style.objectFit = "contain", this.video.style.backgroundColor = "black", this.container.appendChild(this.video));
+    this.container = e, this.container.contains(this.video) || (this.video.style.width = "100%", this.video.style.height = "100%", this.video.style.objectFit = this.store.get().isAutoSized ? "cover" : "contain", this.video.style.backgroundColor = "black", this.container.appendChild(this.video)), this.resizeObserver = new ResizeObserver((i) => {
+      for (const r of i)
+        this.emit("resize", { width: r.contentRect.width, height: r.contentRect.height });
+    }), this.resizeObserver.observe(this.container), this.emit("ready");
   }
   use(e) {
     this.plugins.has(e.name) || (e.init(this), this.plugins.set(e.name, e));
@@ -267,19 +426,19 @@ class ct {
   switchSource(e) {
     const i = this.store.get().sources;
     if (e >= 0 && e < i.length) {
-      const a = this.video.currentTime, n = !this.video.paused;
+      const r = this.video.currentTime, n = !this.video.paused;
       this.load(i[e], this.currentTracks);
-      const l = () => {
-        this.video.currentTime = a, n && this.video.play(), this.video.removeEventListener("canplay", l);
+      const d = () => {
+        this.video.currentTime = r, n && this.video.play(), this.video.removeEventListener("canplay", d);
       };
-      this.video.addEventListener("canplay", l);
+      this.video.addEventListener("canplay", d);
     }
   }
-  load(e, i = [], a = !1) {
+  load(e, i = [], r = !1) {
     this.retryTimer && clearTimeout(this.retryTimer);
     const n = typeof e == "string" ? { url: e, type: "auto" } : e;
-    a || (this.retryCount = 0, this.store.setState({ error: null }), this.removeNotification("retry")), this.currentSrc = n.url, this.currentSource = n, this.currentTracks = i;
-    const p = this.store.get().sources.findIndex((f) => f.url === n.url);
+    r || (this.retryCount = 0, this.store.setState({ error: null }), this.removeNotification("retry")), this.currentSrc = n.url, this.currentSource = n, this.currentTracks = i;
+    const m = this.store.get().sources.findIndex((l) => l.url === n.url);
     this.store.setState({
       isBuffering: !0,
       qualityLevels: [],
@@ -289,42 +448,46 @@ class ct {
       currentAudioTrack: -1,
       // Reset audio track
       // subtitleTracks and currentSubtitle are purposely preserved
-      currentSourceIndex: p
+      currentSourceIndex: m
     });
     let b = n.type || "auto";
     b === "auto" && (n.url.includes(".m3u8") ? b = "hls" : n.url.includes(".mpd") ? b = "dash" : n.url.includes(".flv") || n.url.includes(".ts") ? b = "mpegts" : n.url.startsWith("magnet:") || n.url.includes(".torrent") ? b = "webtorrent" : b = "mp4"), this.events.emit("load", { url: n.url, type: b });
-    const h = this.video.getElementsByTagName("track");
-    for (; h.length > 0; )
-      h[0].remove();
-    i.length > 0 && i.forEach((f) => {
-      this.fetchWithRetry(f.src).then(() => {
-        this.addTextTrackInternal(f.src, f.label, f.srcLang, f.default);
-      }).catch((s) => {
-        this.notify({ type: "warning", message: `Failed to load subtitle: ${f.label}`, duration: 4e3 });
+    const y = this.video.getElementsByTagName("track");
+    for (; y.length > 0; )
+      y[0].remove();
+    i.length > 0 && i.forEach((l) => {
+      this.fetchWithRetry(l.src).then(() => {
+        this.addTextTrackInternal(l.src, l.label, l.srcLang, l.default);
+      }).catch((v) => {
+        this.notify({ type: "warning", message: `Failed to load subtitle: ${l.label}`, duration: 4e3 });
       });
     }), (b === "mp4" || b === "webm" || b === "ogg") && (this.video.src = n.url);
   }
+  // Wrapper for external subtitle API
+  loadSubtitle(e, i = "Subtitle") {
+    this.addTextTrackInternal(e, i, void 0, !0);
+  }
   addTextTrack(e, i) {
-    const a = new FileReader();
-    a.onload = (n) => {
-      var h;
-      if (!((h = n.target) != null && h.result)) return;
-      let l = n.target.result;
-      (e.name.toLowerCase().endsWith(".srt") || !l.trim().startsWith("WEBVTT")) && (l = l.replace(/(\d{2}:\d{2}:\d{2}),(\d{3})/g, "$1.$2"), l.trim().startsWith("WEBVTT") || (l = `WEBVTT
+    const r = new FileReader();
+    r.onload = (n) => {
+      var y;
+      if (!((y = n.target) != null && y.result)) return;
+      let d = n.target.result;
+      (e.name.toLowerCase().endsWith(".srt") || !d.trim().startsWith("WEBVTT")) && (d = d.replace(/(\d{2}:\d{2}:\d{2}),(\d{3})/g, "$1.$2"), d.trim().startsWith("WEBVTT") || (d = `WEBVTT
 
-` + l));
-      const p = new Blob([l], { type: "text/vtt" }), b = URL.createObjectURL(p);
+` + d));
+      const m = new Blob([d], { type: "text/vtt" }), b = URL.createObjectURL(m);
       this.addTextTrackInternal(b, i, "user", !0), setTimeout(() => {
-        const s = this.store.get().subtitleTracks.findIndex((x) => x.label === i);
-        s !== -1 && (this.setSubtitle(s), this.notify({ type: "success", message: "Subtitle uploaded", duration: 3e3 }));
+        const v = this.store.get().subtitleTracks.findIndex((C) => C.label === i);
+        v !== -1 && (this.setSubtitle(v), this.notify({ type: "success", message: "Subtitle uploaded", duration: 3e3 }));
       }, 200);
-    }, a.onerror = () => {
+    }, r.onerror = () => {
       this.notify({ type: "error", message: "Failed to read file", duration: 3e3 });
-    }, a.readAsText(e);
+    }, r.readAsText(e);
   }
-  addTextTrackInternal(e, i, a = "", n = !1) {
-    const l = document.createElement("track");
-    l.kind = "subtitles", l.label = i, l.src = e, l.srclang = a, n && (l.default = !0), this.video.appendChild(l), this.updateSubtitles();
+  addTextTrackInternal(e, i, r = "", n = !1) {
+    const d = document.createElement("track");
+    d.kind = "subtitles", d.label = i, d.src = e, d.srclang = r, n && (d.default = !0), this.video.appendChild(d), this.updateSubtitles();
   }
   play() {
     return this.video.play();
@@ -359,12 +522,56 @@ class ct {
   setAudioTrack(e) {
     this.store.setState({ currentAudioTrack: e }), this.events.emit("audio-track-request", e);
   }
-  toggleFullscreen() {
-    this.container && (document.fullscreenElement ? document.exitFullscreen() : this.container.requestFullscreen().catch((e) => console.error(e)));
+  setControlsVisible(e) {
+    this.store.get().controlsVisible !== e && (this.store.setState({ controlsVisible: e }), this.emit("control", e));
+  }
+  async toggleFullscreen() {
+    if (this.container)
+      try {
+        document.fullscreenElement ? await document.exitFullscreen() : await this.container.requestFullscreen();
+      } catch (e) {
+        console.error("Fullscreen toggle failed", e);
+      }
   }
   togglePip() {
     document.pictureInPictureElement ? document.exitPictureInPicture() : this.video !== document.pictureInPictureElement && this.video.requestPictureInPicture && this.video.requestPictureInPicture();
   }
+  screenshot() {
+    const e = document.createElement("canvas");
+    e.width = this.video.videoWidth, e.height = this.video.videoHeight;
+    const i = e.getContext("2d");
+    if (i) {
+      i.drawImage(this.video, 0, 0, e.width, e.height);
+      try {
+        const r = e.toDataURL("image/png"), n = document.createElement("a");
+        n.download = `screenshot-${(/* @__PURE__ */ new Date()).toISOString()}.png`, n.href = r, n.click(), this.notify({ type: "success", message: "Screenshot saved", duration: 2e3 });
+      } catch {
+        this.notify({ type: "error", message: "Failed to take screenshot", duration: 3e3 });
+      }
+    }
+  }
+  toggleLock() {
+    this.store.setState((e) => ({ isLocked: !e.isLocked }));
+  }
+  toggleLoop() {
+    this.video.loop = !this.video.loop, this.store.setState({ isLooping: this.video.loop }), this.notify({ type: "info", message: `Loop: ${this.video.loop ? "On" : "Off"}`, duration: 1500 });
+  }
+  setFlip(e) {
+    const i = this.store.get().flipState, r = {
+      ...i,
+      [e]: !i[e]
+    };
+    this.store.setState({ flipState: r });
+    const n = r.horizontal ? -1 : 1, d = r.vertical ? -1 : 1;
+    this.video.style.transform = `scale(${n}, ${d})`;
+  }
+  setAspectRatio(e) {
+    if (this.store.setState({ aspectRatio: e }), e === "default") {
+      this.video.style.objectFit = this.store.get().isAutoSized ? "cover" : "contain", this.video.style.width = "100%", this.video.style.height = "100%";
+      return;
+    }
+    this.video.style.objectFit = "contain", this.notify({ type: "info", message: `Aspect Ratio: ${e} (CSS support limited)`, duration: 2e3 });
+  }
   initCast() {
     const e = window, i = () => {
       if (!this.castInitialized)
@@ -373,12 +580,12 @@ class ct {
             receiverApplicationId: e.chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
             autoJoinPolicy: e.chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
           }), this.castInitialized = !0);
-        } catch (a) {
-          console.warn("Cast Init Error or already initialized", a);
+        } catch (r) {
+          console.warn("Cast Init Error or already initialized", r);
         }
     };
-    e.cast && e.cast.framework ? i() : e.__onGCastApiAvailable = (a) => {
-      a && i();
+    e.cast && e.cast.framework ? i() : e.__onGCastApiAvailable = (r) => {
+      r && i();
     };
   }
   requestCast() {
@@ -401,10 +608,10 @@ class ct {
     try {
       const i = e.cast.framework.CastContext.getInstance().getCurrentSession();
       if (!i) return;
-      const a = new e.chrome.cast.media.MediaInfo(this.currentSrc, this.currentSrc.includes(".m3u8") ? "application/x-mpegurl" : "video/mp4"), n = new e.chrome.cast.media.LoadRequest(a);
+      const r = new e.chrome.cast.media.MediaInfo(this.currentSrc, this.currentSrc.includes(".m3u8") ? "application/x-mpegurl" : "video/mp4"), n = new e.chrome.cast.media.LoadRequest(r);
       i.loadMedia(n).then(() => {
         this.notify({ type: "success", message: "Casting...", duration: 3e3 });
-      }).catch((l) => console.error("Cast load error", l));
+      }).catch((d) => console.error("Cast load error", d));
     } catch (i) {
       console.error("Failed to load media into Cast session", i);
     }
@@ -415,9 +622,9 @@ class ct {
       this.store.setState({ activeCues: [] });
       return;
     }
-    const a = Array.from(this.video.textTracks).filter((n) => n.kind === "subtitles" || n.kind === "captions")[e.currentSubtitle];
-    if (a && a.activeCues) {
-      const n = Array.from(a.activeCues).map((l) => l.text);
+    const r = Array.from(this.video.textTracks).filter((n) => n.kind === "subtitles" || n.kind === "captions")[e.currentSubtitle];
+    if (r && r.activeCues) {
+      const n = Array.from(r.activeCues).map((d) => d.text);
       this.store.setState({ activeCues: n });
     } else
       this.store.setState({ activeCues: [] });
@@ -426,30 +633,30 @@ class ct {
     if (Array.from(this.video.textTracks).forEach((i) => {
       i.removeEventListener("cuechange", this.boundCueChange), i.mode = "hidden";
     }), this.store.setState({ currentSubtitle: e, subtitleOffset: 0, activeCues: [] }), e !== -1) {
-      const a = Array.from(this.video.textTracks).filter((n) => n.kind === "subtitles" || n.kind === "captions")[e];
-      if (a) {
+      const r = Array.from(this.video.textTracks).filter((n) => n.kind === "subtitles" || n.kind === "captions")[e];
+      if (r) {
         const n = this.store.get().subtitleSettings;
-        a.mode = n.useNative ? "showing" : "hidden", a.addEventListener("cuechange", this.boundCueChange), this.handleCueChange();
+        r.mode = n.useNative ? "showing" : "hidden", r.addEventListener("cuechange", this.boundCueChange), this.handleCueChange();
       }
     }
   }
   updateSubtitleSettings(e) {
-    const a = { ...this.store.get().subtitleSettings, ...e };
-    this.store.setState({ subtitleSettings: a }), e.useNative !== void 0 && this.setSubtitle(this.store.get().currentSubtitle);
+    const r = { ...this.store.get().subtitleSettings, ...e };
+    this.store.setState({ subtitleSettings: r }), e.useNative !== void 0 && this.setSubtitle(this.store.get().currentSubtitle);
   }
   resetSubtitleSettings() {
-    this.store.setState({ subtitleSettings: le }), this.setSubtitle(this.store.get().currentSubtitle);
+    this.store.setState({ subtitleSettings: Ne }), this.setSubtitle(this.store.get().currentSubtitle);
   }
   setSubtitleOffset(e) {
-    const i = this.store.get().subtitleOffset, a = e - i;
-    Math.abs(a) < 1e-3 || (Array.from(this.video.textTracks).forEach((n) => {
-      (n.mode === "showing" || n.mode === "hidden") && n.cues && Array.from(n.cues).forEach((l) => {
-        l.startTime += a, l.endTime += a;
+    const i = this.store.get().subtitleOffset, r = e - i;
+    Math.abs(r) < 1e-3 || (Array.from(this.video.textTracks).forEach((n) => {
+      (n.mode === "showing" || n.mode === "hidden") && n.cues && Array.from(n.cues).forEach((d) => {
+        d.startTime += r, d.endTime += r;
       });
     }), this.store.setState({ subtitleOffset: e }), this.notify({ type: "info", message: `Subtitle Offset: ${e > 0 ? "+" : ""}${e.toFixed(1)}s`, duration: 1500 }));
   }
   async download() {
-    var a;
+    var r;
     if (!this.video.src) return;
     const e = this.video.src;
     if (e.includes("blob:") || e.includes(".m3u8")) {
@@ -460,30 +667,30 @@ class ct {
     try {
       const n = await this.fetchWithRetry(e);
       if (!n.body) throw new Error("No body");
-      const l = n.body.getReader(), p = n.headers.get("Content-Length"), b = p ? parseInt(p, 10) : 0;
-      let h = 0;
-      const f = [];
+      const d = n.body.getReader(), m = n.headers.get("Content-Length"), b = m ? parseInt(m, 10) : 0;
+      let y = 0;
+      const l = [];
       for (; ; ) {
-        const { done: z, value: T } = await l.read();
-        if (z) break;
-        if (f.push(T), h += T.length, b) {
-          const u = Math.round(h / b * 100);
-          this.notify({ id: i, type: "loading", message: `Downloading... ${u}%`, progress: u });
+        const { done: M, value: I } = await d.read();
+        if (M) break;
+        if (l.push(I), y += I.length, b) {
+          const p = Math.round(y / b * 100);
+          this.notify({ id: i, type: "loading", message: `Downloading... ${p}%`, progress: p });
         }
       }
-      const s = new Blob(f), x = window.URL.createObjectURL(s), C = document.createElement("a");
-      C.style.display = "none", C.href = x, C.download = ((a = e.split("/").pop()) == null ? void 0 : a.split("?")[0]) || "video.mp4", document.body.appendChild(C), C.click(), window.URL.revokeObjectURL(x), document.body.removeChild(C), this.notify({ id: i, type: "success", message: "Saved!", duration: 3e3 });
+      const v = new Blob(l), C = window.URL.createObjectURL(v), N = document.createElement("a");
+      N.style.display = "none", N.href = C, N.download = ((r = e.split("/").pop()) == null ? void 0 : r.split("?")[0]) || "video.mp4", document.body.appendChild(N), N.click(), window.URL.revokeObjectURL(C), document.body.removeChild(N), this.notify({ id: i, type: "success", message: "Saved!", duration: 3e3 });
     } catch {
       this.notify({ id: i, type: "error", message: "Download failed.", duration: 4e3 }), window.open(e, "_blank");
     }
   }
   notify(e) {
-    const i = e.id || Math.random().toString(36).substr(2, 9), a = { ...e, id: i };
-    return this.store.setState({ notifications: [a] }), e.duration && setTimeout(() => this.removeNotification(i), e.duration), i;
+    const i = e.id || Math.random().toString(36).substr(2, 9), r = { ...e, id: i };
+    return this.store.setState({ notifications: [r] }), e.duration && setTimeout(() => this.removeNotification(i), e.duration), i;
   }
   removeNotification(e) {
     const i = this.store.get().notifications;
-    this.store.setState({ notifications: i.filter((a) => a.id !== e) });
+    this.store.setState({ notifications: i.filter((r) => r.id !== e) });
   }
   setAppearance(e) {
     this.store.setState((i) => ({
@@ -492,72 +699,72 @@ class ct {
     }));
   }
   destroy() {
-    this.retryTimer && clearTimeout(this.retryTimer), document.removeEventListener("fullscreenchange", this.boundFullscreenChange), this.video.pause(), this.video.src = "";
+    this.retryTimer && clearTimeout(this.retryTimer), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), document.removeEventListener("fullscreenchange", this.boundFullscreenChange), this.video.pause(), this.video.src = "";
     const e = this.video.getElementsByTagName("track");
     for (; e.length > 0; ) e[0].remove();
-    this.events.destroy(), this.store.destroy(), this.plugins.forEach((i) => i.destroy && i.destroy()), this.plugins.clear(), this.video.remove(), this.audioEngine.destroy();
+    this.emit("destroy"), this.events.destroy(), this.store.destroy(), this.plugins.forEach((i) => i.destroy && i.destroy()), this.plugins.clear(), this.video.remove(), this.audioEngine.destroy();
   }
 }
-const se = (c) => {
-  if (isNaN(c)) return "00:00";
-  const e = Math.floor(c / 3600), i = Math.floor(c % 3600 / 60), a = Math.floor(c % 60);
-  return e > 0 ? `${e}:${i.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}` : `${i}:${a.toString().padStart(2, "0")}`;
-}, dt = async (c, e = 3) => {
+const xe = (o) => {
+  if (isNaN(o)) return "00:00";
+  const e = Math.floor(o / 3600), i = Math.floor(o % 3600 / 60), r = Math.floor(o % 60);
+  return e > 0 ? `${e}:${i.toString().padStart(2, "0")}:${r.toString().padStart(2, "0")}` : `${i}:${r.toString().padStart(2, "0")}`;
+}, Xt = async (o, e = 3) => {
   for (let i = 0; i < e; i++)
     try {
-      const a = await fetch(c);
-      if (!a.ok) throw new Error(`HTTP ${a.status}`);
-      return await a.text();
-    } catch (a) {
-      if (i === e - 1) throw a;
+      const r = await fetch(o);
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return await r.text();
+    } catch (r) {
+      if (i === e - 1) throw r;
       await new Promise((n) => setTimeout(n, 1e3));
     }
   throw new Error("Failed");
-}, ut = async (c, e) => {
+}, Jt = async (o, e) => {
   try {
-    const a = (await dt(c)).split(`
+    const r = (await Xt(o)).split(`
 `), n = [];
-    let l = null, p = null;
-    const b = c.substring(0, c.lastIndexOf("/") + 1), h = (f) => {
-      const s = f.split(":");
-      let x = 0;
-      return s.length === 3 ? (x += parseFloat(s[0]) * 3600, x += parseFloat(s[1]) * 60, x += parseFloat(s[2])) : (x += parseFloat(s[0]) * 60, x += parseFloat(s[1])), x;
+    let d = null, m = null;
+    const b = o.substring(0, o.lastIndexOf("/") + 1), y = (l) => {
+      const v = l.split(":");
+      let C = 0;
+      return v.length === 3 ? (C += parseFloat(v[0]) * 3600, C += parseFloat(v[1]) * 60, C += parseFloat(v[2])) : (C += parseFloat(v[0]) * 60, C += parseFloat(v[1])), C;
     };
-    for (let f of a)
-      if (f = f.trim(), f.includes("-->")) {
-        const s = f.split("-->");
-        l = h(s[0].trim()), p = h(s[1].trim());
-      } else if (l !== null && p !== null && f.length > 0) {
-        let [s, x] = f.split("#");
-        !s.match(/^https?:\/\//) && !s.startsWith("data:") && (s = b + s);
-        let C = 0, z = 0, T = 0, u = 0;
-        if (x && x.startsWith("xywh=")) {
-          const M = x.replace("xywh=", "").split(",");
-          M.length === 4 && (C = parseInt(M[0]), z = parseInt(M[1]), T = parseInt(M[2]), u = parseInt(M[3]));
+    for (let l of r)
+      if (l = l.trim(), l.includes("-->")) {
+        const v = l.split("-->");
+        d = y(v[0].trim()), m = y(v[1].trim());
+      } else if (d !== null && m !== null && l.length > 0) {
+        let [v, C] = l.split("#");
+        !v.match(/^https?:\/\//) && !v.startsWith("data:") && (v = b + v);
+        let N = 0, M = 0, I = 0, p = 0;
+        if (C && C.startsWith("xywh=")) {
+          const E = C.replace("xywh=", "").split(",");
+          E.length === 4 && (N = parseInt(E[0]), M = parseInt(E[1]), I = parseInt(E[2]), p = parseInt(E[3]));
         }
-        T > 0 && u > 0 && n.push({ start: l, end: p, url: s, x: C, y: z, w: T, h: u }), l = null, p = null;
+        I > 0 && p > 0 && n.push({ start: d, end: m, url: v, x: N, y: M, w: I, h: p }), d = null, m = null;
       }
     return n;
   } catch {
     return e({ type: "warning", message: "Failed to load thumbnails", duration: 4e3 }), [];
   }
-}, Pe = (c, e = 200) => {
-  const [i, a] = w(c), [n, l] = w(!1);
-  return R(() => {
-    if (c)
-      a(!0), requestAnimationFrame(() => {
+}, nt = (o, e = 200) => {
+  const [i, r] = k(o), [n, d] = k(!1);
+  return P(() => {
+    if (o)
+      r(!0), requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          l(!0);
+          d(!0);
         });
       });
     else {
-      l(!1);
-      const p = setTimeout(() => {
-        a(!1);
+      d(!1);
+      const m = setTimeout(() => {
+        r(!1);
       }, e);
-      return () => clearTimeout(p);
+      return () => clearTimeout(m);
     }
-  }, [c, e]), { isMounted: i, isVisible: n };
+  }, [o, e]), { isMounted: i, isVisible: n };
 };
 /**
  * @license lucide-react v0.462.0 - ISC
@@ -565,14 +772,14 @@ const se = (c) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ht = (c) => c.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), De = (...c) => c.filter((e, i, a) => !!e && e.trim() !== "" && a.indexOf(e) === i).join(" ").trim();
+const Kt = (o) => o.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), vt = (...o) => o.filter((e, i, r) => !!e && e.trim() !== "" && r.indexOf(e) === i).join(" ").trim();
 /**
  * @license lucide-react v0.462.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var mt = {
+var Yt = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -589,31 +796,31 @@ var mt = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const pt = Fe(
+const Zt = ft(
   ({
-    color: c = "currentColor",
+    color: o = "currentColor",
     size: e = 24,
     strokeWidth: i = 2,
-    absoluteStrokeWidth: a,
+    absoluteStrokeWidth: r,
     className: n = "",
-    children: l,
-    iconNode: p,
+    children: d,
+    iconNode: m,
     ...b
-  }, h) => ne(
+  }, y) => ke(
     "svg",
     {
-      ref: h,
-      ...mt,
+      ref: y,
+      ...Yt,
       width: e,
       height: e,
-      stroke: c,
-      strokeWidth: a ? Number(i) * 24 / Number(e) : i,
-      className: De("lucide", n),
+      stroke: o,
+      strokeWidth: r ? Number(i) * 24 / Number(e) : i,
+      className: vt("lucide", n),
       ...b
     },
     [
-      ...p.map(([f, s]) => ne(f, s)),
-      ...Array.isArray(l) ? l : [l]
+      ...m.map(([l, v]) => ke(l, v)),
+      ...Array.isArray(d) ? d : [d]
     ]
   )
 );
@@ -623,16 +830,16 @@ const pt = Fe(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const v = (c, e) => {
-  const i = Fe(
-    ({ className: a, ...n }, l) => ne(pt, {
-      ref: l,
+const x = (o, e) => {
+  const i = ft(
+    ({ className: r, ...n }, d) => ke(Zt, {
+      ref: d,
       iconNode: e,
-      className: De(`lucide-${ht(c)}`, a),
+      className: vt(`lucide-${Kt(o)}`, r),
       ...n
     })
   );
-  return i.displayName = `${c}`, i;
+  return i.displayName = `${o}`, i;
 };
 /**
  * @license lucide-react v0.462.0 - ISC
@@ -640,7 +847,7 @@ const v = (c, e) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ft = v("ArrowLeft", [
+const ei = x("ArrowLeft", [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ]);
@@ -650,7 +857,7 @@ const ft = v("ArrowLeft", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const vt = v("Bold", [
+const ti = x("Bold", [
   [
     "path",
     { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
@@ -662,7 +869,23 @@ const vt = v("Bold", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const bt = v("Captions", [
+const ii = x("Camera", [
+  [
+    "path",
+    {
+      d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z",
+      key: "1tc9qg"
+    }
+  ],
+  ["circle", { cx: "12", cy: "13", r: "3", key: "1vg3eu" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const si = x("Captions", [
   ["rect", { width: "18", height: "14", x: "3", y: "5", rx: "2", ry: "2", key: "12ruh7" }],
   ["path", { d: "M7 15h4M15 15h2M7 11h2M13 11h4", key: "1ueiar" }]
 ]);
@@ -672,7 +895,7 @@ const bt = v("Captions", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const gt = v("CaseUpper", [
+const ri = x("CaseUpper", [
   ["path", { d: "m3 15 4-8 4 8", key: "1vwr6u" }],
   ["path", { d: "M4 13h6", key: "1r9ots" }],
   ["path", { d: "M15 11h4.5a2 2 0 0 1 0 4H15V7h4a2 2 0 0 1 0 4", key: "1sqfas" }]
@@ -683,7 +906,7 @@ const gt = v("CaseUpper", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const yt = v("Cast", [
+const ni = x("Cast", [
   ["path", { d: "M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6", key: "3zrzxg" }],
   ["path", { d: "M2 12a9 9 0 0 1 8 8", key: "g6cvee" }],
   ["path", { d: "M2 16a5 5 0 0 1 4 4", key: "1y1dii" }],
@@ -695,14 +918,14 @@ const yt = v("Cast", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const xt = v("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
+const ai = x("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
 /**
  * @license lucide-react v0.462.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const wt = v("Clock", [
+const oi = x("Clock", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["polyline", { points: "12 6 12 12 16 14", key: "68esgv" }]
 ]);
@@ -712,7 +935,7 @@ const wt = v("Clock", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const kt = v("Download", [
+const li = x("Download", [
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["polyline", { points: "7 10 12 15 17 10", key: "2ggqvy" }],
   ["line", { x1: "12", x2: "12", y1: "15", y2: "3", key: "1vk2je" }]
@@ -723,7 +946,7 @@ const kt = v("Download", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ct = v("Droplet", [
+const ci = x("Droplet", [
   [
     "path",
     {
@@ -738,7 +961,7 @@ const Ct = v("Droplet", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Nt = v("Eye", [
+const di = x("Eye", [
   [
     "path",
     {
@@ -754,7 +977,18 @@ const Nt = v("Eye", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const St = v("LoaderCircle", [
+const ui = x("Info", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 16v-4", key: "1dtifu" }],
+  ["path", { d: "M12 8h.01", key: "e9boi3" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const hi = x("LoaderCircle", [
   ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
 ]);
 /**
@@ -763,7 +997,27 @@ const St = v("LoaderCircle", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const zt = v("Maximize", [
+const mi = x("LockOpen", [
+  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
+  ["path", { d: "M7 11V7a5 5 0 0 1 9.9-1", key: "1mm8w8" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const fi = x("Lock", [
+  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
+  ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4", key: "fwvmzm" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const pi = x("Maximize", [
   ["path", { d: "M8 3H5a2 2 0 0 0-2 2v3", key: "1dcmit" }],
   ["path", { d: "M21 8V5a2 2 0 0 0-2-2h-3", key: "1e4gt3" }],
   ["path", { d: "M3 16v3a2 2 0 0 0 2 2h3", key: "wsl5sc" }],
@@ -775,7 +1029,7 @@ const zt = v("Maximize", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Tt = v("Minimize", [
+const bi = x("Minimize", [
   ["path", { d: "M8 3v3a2 2 0 0 1-2 2H3", key: "hohbtr" }],
   ["path", { d: "M21 8h-3a2 2 0 0 1-2-2V3", key: "5jw1f3" }],
   ["path", { d: "M3 16h3a2 2 0 0 1 2 2v3", key: "198tvr" }],
@@ -787,14 +1041,25 @@ const Tt = v("Minimize", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Mt = v("Minus", [["path", { d: "M5 12h14", key: "1ays0h" }]]);
+const vi = x("Minus", [["path", { d: "M5 12h14", key: "1ays0h" }]]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const gi = x("Monitor", [
+  ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
+  ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
+  ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
+]);
 /**
  * @license lucide-react v0.462.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Et = v("MoveVertical", [
+const xi = x("MoveVertical", [
   ["path", { d: "M12 2v20", key: "t6zp3m" }],
   ["path", { d: "m8 18 4 4 4-4", key: "bh5tu3" }],
   ["path", { d: "m8 6 4-4 4 4", key: "ybng9g" }]
@@ -805,7 +1070,7 @@ const Et = v("MoveVertical", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const It = v("Palette", [
+const yi = x("Palette", [
   ["circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor", key: "1okk4w" }],
   ["circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor", key: "f64h9f" }],
   ["circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor", key: "fotxhn" }],
@@ -824,7 +1089,7 @@ const It = v("Palette", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Rt = v("Pause", [
+const wi = x("Pause", [
   ["rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", key: "zuxfzm" }],
   ["rect", { x: "6", y: "4", width: "4", height: "16", rx: "1", key: "1okwgv" }]
 ]);
@@ -834,7 +1099,7 @@ const Rt = v("Pause", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const $t = v("PictureInPicture", [
+const ki = x("PictureInPicture", [
   [
     "path",
     {
@@ -850,7 +1115,7 @@ const $t = v("PictureInPicture", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Pt = v("Play", [
+const Ci = x("Play", [
   ["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]
 ]);
 /**
@@ -859,7 +1124,7 @@ const Pt = v("Play", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Lt = v("Plus", [
+const Ni = x("Plus", [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ]);
@@ -869,7 +1134,7 @@ const Lt = v("Plus", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const At = v("RefreshCcw", [
+const Si = x("RefreshCcw", [
   ["path", { d: "M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "14sxne" }],
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
   ["path", { d: "M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16", key: "1hlbsb" }],
@@ -881,7 +1146,7 @@ const At = v("RefreshCcw", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Bt = v("RotateCcw", [
+const zi = x("RotateCcw", [
   ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
 ]);
@@ -891,7 +1156,7 @@ const Bt = v("RotateCcw", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Vt = v("RotateCw", [
+const Ti = x("RotateCw", [
   ["path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8", key: "1p45f6" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }]
 ]);
@@ -901,7 +1166,7 @@ const Vt = v("RotateCw", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ot = v("Settings", [
+const Mi = x("Settings", [
   [
     "path",
     {
@@ -917,7 +1182,7 @@ const Ot = v("Settings", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const jt = v("SlidersHorizontal", [
+const Ii = x("SlidersHorizontal", [
   ["line", { x1: "21", x2: "14", y1: "4", y2: "4", key: "obuewd" }],
   ["line", { x1: "10", x2: "3", y1: "4", y2: "4", key: "1q6298" }],
   ["line", { x1: "21", x2: "12", y1: "12", y2: "12", key: "1iu8h1" }],
@@ -934,7 +1199,7 @@ const jt = v("SlidersHorizontal", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ft = v("Type", [
+const Ri = x("Type", [
   ["polyline", { points: "4 7 4 4 20 4 20 7", key: "1nosan" }],
   ["line", { x1: "9", x2: "15", y1: "20", y2: "20", key: "swin9y" }],
   ["line", { x1: "12", x2: "12", y1: "4", y2: "20", key: "1tx1rr" }]
@@ -945,7 +1210,7 @@ const Ft = v("Type", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const qt = v("Upload", [
+const Li = x("Upload", [
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["polyline", { points: "17 8 12 3 7 8", key: "t8dd8p" }],
   ["line", { x1: "12", x2: "12", y1: "3", y2: "15", key: "widbto" }]
@@ -956,7 +1221,7 @@ const qt = v("Upload", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ht = v("Users", [
+const $i = x("Users", [
   ["path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", key: "1yyitq" }],
   ["circle", { cx: "9", cy: "7", r: "4", key: "nufk8" }],
   ["path", { d: "M22 21v-2a4 4 0 0 0-3-3.87", key: "kshegd" }],
@@ -968,7 +1233,7 @@ const Ht = v("Users", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Dt = v("Volume1", [
+const Pi = x("Volume1", [
   [
     "path",
     {
@@ -984,7 +1249,7 @@ const Dt = v("Volume1", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ut = v("Volume2", [
+const Ei = x("Volume2", [
   [
     "path",
     {
@@ -1001,7 +1266,7 @@ const Ut = v("Volume2", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Gt = v("VolumeX", [
+const Ai = x("VolumeX", [
   [
     "path",
     {
@@ -1011,13 +1276,38 @@ const Gt = v("VolumeX", [
   ],
   ["line", { x1: "22", x2: "16", y1: "9", y2: "15", key: "1ewh16" }],
   ["line", { x1: "16", x2: "22", y1: "9", y2: "15", key: "5ykzw1" }]
-]), Le = Pt, Ae = Rt, Wt = Ut, _t = Dt, Qt = Gt, Xt = zt, Jt = Tt, Kt = Ot, Ue = xt, Yt = $t, Zt = bt, ei = kt, ti = qt, ii = ft, oe = St, ai = yt, ri = Ht, si = wt, ni = Mt, oi = Lt, li = jt, ci = Ft, Ge = It, di = Nt, ui = Et, hi = At, mi = vt, pi = gt, fi = Ct, Be = ({ className: c }) => /* @__PURE__ */ d("div", { className: `relative flex items-center justify-center ${c}`, children: [
-  /* @__PURE__ */ t(Bt, { className: "w-full h-full", strokeWidth: 2 }),
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Bi = x("X", [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Vi = x("Zap", [
+  [
+    "path",
+    {
+      d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z",
+      key: "1xq2db"
+    }
+  ]
+]), at = Ci, ot = wi, Fi = Ei, Oi = Pi, ji = Ai, Hi = pi, Wi = bi, qi = Mi, Se = ai, Di = ki, Ui = si, _i = li, Gi = Li, Qi = ei, Ce = hi, Xi = ni, Ji = $i, Ki = oi, Yi = vi, Zi = Ni, es = Ii, ts = Ri, gt = yi, is = di, ss = xi, rs = Si, ns = ti, as = ri, os = ci, ls = ii, cs = fi, ds = mi, us = gi, hs = Vi, ms = Bi, fs = ui, lt = ({ className: o }) => /* @__PURE__ */ h("div", { className: `relative flex items-center justify-center ${o}`, children: [
+  /* @__PURE__ */ t(zi, { className: "w-full h-full", strokeWidth: 2 }),
   /* @__PURE__ */ t("span", { className: "absolute inset-0 flex items-center justify-center text-[32%] font-bold select-none mt-[1px]", children: "10" })
-] }), Ve = ({ className: c }) => /* @__PURE__ */ d("div", { className: `relative flex items-center justify-center ${c}`, children: [
-  /* @__PURE__ */ t(Vt, { className: "w-full h-full", strokeWidth: 2 }),
+] }), ct = ({ className: o }) => /* @__PURE__ */ h("div", { className: `relative flex items-center justify-center ${o}`, children: [
+  /* @__PURE__ */ t(Ti, { className: "w-full h-full", strokeWidth: 2 }),
   /* @__PURE__ */ t("span", { className: "absolute inset-0 flex items-center justify-center text-[32%] font-bold select-none mt-[1px]", children: "10" })
-] }), vi = ({ notifications: c }) => /* @__PURE__ */ t("div", { className: "absolute top-4 left-4 z-50 flex flex-col gap-2 pointer-events-none font-sans max-w-[85%] md:max-w-[400px]", children: c.map((e) => /* @__PURE__ */ d(
+] }), ps = ({ notifications: o }) => /* @__PURE__ */ t("div", { className: "absolute top-4 left-4 z-50 flex flex-col gap-2 pointer-events-none font-sans max-w-[85%] md:max-w-[400px]", children: o.map((e) => /* @__PURE__ */ h(
   "div",
   {
     className: `
@@ -1027,16 +1317,16 @@ const Gt = v("VolumeX", [
                         ${e.type === "warning" ? "border-amber-500/50 text-amber-100" : ""}
                     `,
     children: [
-      e.type === "loading" && /* @__PURE__ */ t(oe, { className: "w-4 h-4 animate-spin text-[var(--accent)] shrink-0 mt-0.5" }),
-      /* @__PURE__ */ d("div", { className: "flex flex-col gap-1 min-w-0", children: [
+      e.type === "loading" && /* @__PURE__ */ t(Ce, { className: "w-4 h-4 animate-spin text-[var(--accent)] shrink-0 mt-0.5" }),
+      /* @__PURE__ */ h("div", { className: "flex flex-col gap-1 min-w-0", children: [
         /* @__PURE__ */ t("span", { className: "break-words line-clamp-4 leading-relaxed whitespace-pre-wrap", children: e.message }),
         typeof e.progress == "number" && /* @__PURE__ */ t("div", { className: "h-1 w-full bg-white/10 rounded-full overflow-hidden mt-1.5", children: /* @__PURE__ */ t("div", { className: "h-full bg-[var(--accent)] transition-all duration-300", style: { width: `${e.progress}%` } }) })
       ] })
     ]
   },
   e.id
-)) }), bi = ({ cues: c, settings: e }) => {
-  if (e.useNative || c.length === 0) return null;
+)) }), bs = ({ cues: o, settings: e }) => {
+  if (e.useNative || o.length === 0) return null;
   const i = () => {
     switch (e.textStyle) {
       case "outline":
@@ -1058,7 +1348,7 @@ const Gt = v("VolumeX", [
       style: {
         bottom: `${e.verticalOffset}px`
       },
-      children: c.map((a, n) => /* @__PURE__ */ t(
+      children: o.map((r, n) => /* @__PURE__ */ t(
         "div",
         {
           className: "mb-1 inline-block max-w-[80%]",
@@ -1078,7 +1368,7 @@ const Gt = v("VolumeX", [
                 backgroundColor: `rgba(0, 0, 0, ${e.backgroundOpacity / 100})`,
                 backdropFilter: e.backgroundBlur ? `blur(${e.backgroundBlurAmount}px)` : "none"
               },
-              dangerouslySetInnerHTML: { __html: a }
+              dangerouslySetInnerHTML: { __html: r }
             }
           )
         },
@@ -1086,64 +1376,67 @@ const Gt = v("VolumeX", [
       ))
     }
   );
-}, We = ({ children: c, onClose: e, align: i = "right", maxHeight: a, className: n }) => {
-  const l = H(null), p = i === "center" ? "left-1/2 -translate-x-1/2 origin-bottom" : "right-0 origin-bottom-right", b = a ? { maxHeight: `${a}px` } : {};
+}, xt = ({ children: o, onClose: e, align: i = "right", maxHeight: r, className: n }) => {
+  const d = F(null), m = i === "center" ? "left-1/2 -translate-x-1/2 origin-bottom" : "right-0 origin-bottom-right", b = r ? { maxHeight: `${r}px` } : {};
   return /* @__PURE__ */ t(
     "div",
     {
-      className: `absolute bottom-full mb-4 ${p} bg-[var(--bg-panel)] backdrop-blur-xl border-[length:var(--border-width)] border-white/10 shadow-2xl overflow-hidden w-[300px] max-w-[calc(100vw-32px)] text-sm z-50 ring-1 ring-white/5 font-[family-name:var(--font-main)] flex flex-col p-1.5 transition-all duration-300 ease-out ${n}`,
+      className: `absolute bottom-full mb-4 ${m} bg-[var(--bg-panel)] backdrop-blur-xl border-[length:var(--border-width)] border-white/10 shadow-2xl overflow-hidden w-[300px] max-w-[calc(100vw-32px)] text-sm z-50 ring-1 ring-white/5 font-[family-name:var(--font-main)] flex flex-col p-1.5 transition-all duration-300 ease-out ${n}`,
       style: { ...b, borderRadius: "var(--radius-lg)" },
-      onClick: (h) => h.stopPropagation(),
-      children: /* @__PURE__ */ t("div", { className: "overflow-y-auto hide-scrollbar flex-1", style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t("div", { ref: l, children: c }) })
+      onClick: (y) => y.stopPropagation(),
+      children: /* @__PURE__ */ t("div", { className: "overflow-y-auto hide-scrollbar flex-1", style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t("div", { ref: d, children: o }) })
     }
   );
-}, k = ({ label: c, value: e, active: i, onClick: a, hasSubmenu: n, icon: l }) => /* @__PURE__ */ d(
+}, dt = ({ content: o, className: e }) => typeof o == "string" ? o.trim().startsWith("<") ? /* @__PURE__ */ t("span", { className: e, dangerouslySetInnerHTML: { __html: o } }) : /* @__PURE__ */ t("span", { className: e, children: o }) : /* @__PURE__ */ t("span", { className: e, children: o }), S = ({ label: o, value: e, active: i, onClick: r, hasSubmenu: n, icon: d }) => /* @__PURE__ */ h(
   "button",
   {
-    onClick: a,
+    onClick: r,
     className: "w-full flex items-center justify-between px-3 py-2.5 hover:bg-white/10 transition-colors text-left text-zinc-200 active:bg-white/5 focus:outline-none focus:bg-white/10 group overflow-hidden my-0.5",
     style: { borderRadius: "var(--radius)" },
     children: [
-      /* @__PURE__ */ d("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-        l && /* @__PURE__ */ t("span", { className: "text-zinc-400 shrink-0 group-hover:text-zinc-300 transition-colors", children: l }),
-        /* @__PURE__ */ t("span", { className: `font-medium truncate text-sm ${i ? "text-[var(--accent)]" : ""}`, title: c, children: c })
+      /* @__PURE__ */ h("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+        d && /* @__PURE__ */ t("span", { className: "text-zinc-400 shrink-0 group-hover:text-zinc-300 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ t(dt, { content: d }) }),
+        /* @__PURE__ */ t("span", { className: `font-medium truncate text-sm flex items-center ${i ? "text-[var(--accent)]" : ""}`, title: typeof o == "string" ? o : void 0, children: /* @__PURE__ */ t(dt, { content: o }) })
       ] }),
-      /* @__PURE__ */ d("div", { className: "flex items-center gap-2 text-zinc-400 shrink-0", children: [
+      /* @__PURE__ */ h("div", { className: "flex items-center gap-2 text-zinc-400 shrink-0", children: [
         e && /* @__PURE__ */ t("span", { className: "text-xs font-medium truncate max-w-[60px]", title: e, children: e }),
-        i && /* @__PURE__ */ t(Ue, { className: "w-4 h-4 text-[var(--accent)] shrink-0" }),
+        i && /* @__PURE__ */ t(Se, { className: "w-4 h-4 text-[var(--accent)] shrink-0" }),
         n && /* @__PURE__ */ t("span", { className: "text-xs group-hover:translate-x-0.5 transition-transform text-zinc-500 shrink-0", children: "›" })
       ] })
     ]
   }
-), j = ({ label: c, onBack: e, rightAction: i }) => /* @__PURE__ */ d(
+), H = ({ label: o, onBack: e, rightAction: i }) => /* @__PURE__ */ h(
   "div",
   {
     className: "px-3 py-2 mb-1 border-b border-white/5 font-bold text-zinc-400 uppercase text-[11px] tracking-wider flex justify-between items-center bg-white/5 sticky top-0 z-10 backdrop-blur-md",
     style: { borderRadius: "var(--radius)" },
     children: [
-      /* @__PURE__ */ d(
+      /* @__PURE__ */ h(
         "button",
         {
           className: "flex items-center gap-2 hover:text-white transition-colors focus:outline-none",
           onClick: e,
           children: [
-            /* @__PURE__ */ t(ii, { className: "w-3 h-3" }),
-            /* @__PURE__ */ t("span", { children: c })
+            /* @__PURE__ */ t(Qi, { className: "w-3 h-3" }),
+            /* @__PURE__ */ t("span", { children: o })
           ]
         }
       ),
       i
     ]
   }
-), Oe = () => /* @__PURE__ */ t("div", { className: "h-px bg-white/5 mx-2 my-1" }), J = ({ label: c, checked: e, onChange: i, icon: a }) => /* @__PURE__ */ d(
+), ut = () => /* @__PURE__ */ t("div", { className: "h-px bg-white/5 mx-2 my-1" }), ne = ({ content: o }) => typeof o == "string" ? o.trim().startsWith("<") ? /* @__PURE__ */ t("span", { dangerouslySetInnerHTML: { __html: o } }) : /* @__PURE__ */ t("span", { children: o }) : /* @__PURE__ */ t(R, { children: o }), X = ({ label: o, checked: e, onChange: i, icon: r, tooltip: n }) => /* @__PURE__ */ h(
   "div",
   {
     className: "flex items-center justify-between py-2.5 px-3 hover:bg-white/5 group transition-colors",
     style: { borderRadius: "var(--radius)" },
     children: [
-      /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
-        a && /* @__PURE__ */ t("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors", children: a }),
-        /* @__PURE__ */ t("span", { className: "text-sm text-zinc-300 font-medium group-hover:text-white transition-colors", children: c })
+      /* @__PURE__ */ h("div", { className: "flex items-center gap-3", children: [
+        r && /* @__PURE__ */ t("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ t(ne, { content: r }) }),
+        /* @__PURE__ */ h("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ t("span", { className: "text-sm text-zinc-300 font-medium group-hover:text-white transition-colors flex items-center", children: /* @__PURE__ */ t(ne, { content: o }) }),
+          n && /* @__PURE__ */ t("span", { className: "text-[10px] text-zinc-500", children: n })
+        ] })
       ] }),
       /* @__PURE__ */ t(
         "button",
@@ -1167,40 +1460,40 @@ const Gt = v("VolumeX", [
       )
     ]
   }
-), K = ({ label: c, value: e, min: i, max: a, step: n, onChange: l, formatValue: p, icon: b }) => /* @__PURE__ */ d(
+), re = ({ label: o, value: e, min: i, max: r, step: n, onChange: d, formatValue: m, icon: b }) => /* @__PURE__ */ h(
   "div",
   {
     className: "py-2.5 px-3 hover:bg-white/5 group transition-colors",
     style: { borderRadius: "var(--radius)" },
     children: [
-      /* @__PURE__ */ d("div", { className: "flex justify-between items-center mb-2", children: [
-        /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
-          b && /* @__PURE__ */ t("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors", children: b }),
-          /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: c })
+      /* @__PURE__ */ h("div", { className: "flex justify-between items-center mb-2", children: [
+        /* @__PURE__ */ h("div", { className: "flex items-center gap-3", children: [
+          b && /* @__PURE__ */ t("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ t(ne, { content: b }) }),
+          /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: o })
         ] }),
         /* @__PURE__ */ t(
           "span",
           {
             className: "text-[10px] font-mono font-medium text-zinc-300 bg-white/10 px-1.5 py-0.5 tabular-nums",
             style: { borderRadius: "var(--radius-sm)" },
-            children: p ? p(e) : e
+            children: m ? m(e) : e
           }
         )
       ] }),
-      /* @__PURE__ */ d("div", { className: "relative h-4 flex items-center px-1", children: [
+      /* @__PURE__ */ h("div", { className: "relative h-4 flex items-center px-1", children: [
         /* @__PURE__ */ t(
           "input",
           {
             type: "range",
             min: i,
-            max: a,
+            max: r,
             step: n,
             value: e,
-            onChange: (h) => l(parseFloat(h.target.value)),
+            onChange: (y) => d(parseFloat(y.target.value)),
             className: "w-full h-1.5 appearance-none cursor-pointer focus:outline-none focus:ring-2 strata-range-input",
             style: {
               borderRadius: "var(--radius-full)",
-              background: `linear-gradient(to right, var(--accent) 0%, var(--accent) ${(e - i) / (a - i) * 100}%, #3f3f46 ${(e - i) / (a - i) * 100}%, #3f3f46 100%)`,
+              background: `linear-gradient(to right, var(--accent) 0%, var(--accent) ${(e - i) / (r - i) * 100}%, #3f3f46 ${(e - i) / (r - i) * 100}%, #3f3f46 100%)`,
               "--tw-ring-color": "var(--accent)"
             }
           }
@@ -1225,67 +1518,74 @@ const Gt = v("VolumeX", [
       ] })
     ]
   }
-), gi = ({ label: c, value: e, options: i, onChange: a, icon: n }) => /* @__PURE__ */ d(
+), vs = ({ label: o, value: e, options: i, onChange: r, icon: n }) => /* @__PURE__ */ h(
   "div",
   {
     className: "py-2.5 px-3 hover:bg-white/5 group transition-colors",
     style: { borderRadius: "var(--radius)" },
     children: [
-      /* @__PURE__ */ d("div", { className: "flex items-center gap-3 mb-2", children: [
-        n && /* @__PURE__ */ t("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors", children: n }),
-        /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: c })
+      /* @__PURE__ */ h("div", { className: "flex items-center gap-3 mb-2", children: [
+        n && /* @__PURE__ */ t("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ t(ne, { content: n }) }),
+        /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: o })
       ] }),
-      /* @__PURE__ */ d("div", { className: "relative", children: [
+      /* @__PURE__ */ h("div", { className: "relative", children: [
         /* @__PURE__ */ t(
           "select",
           {
             value: e,
-            onChange: (l) => a(l.target.value),
+            onChange: (d) => r(d.target.value),
             className: "w-full bg-zinc-800 border-[length:var(--border-width)] border-white/10 px-3 py-2 text-sm text-zinc-200 focus:outline-none focus:ring-2 appearance-none hover:bg-zinc-700 transition-colors cursor-pointer",
             style: { "--tw-ring-color": "var(--accent)", borderRadius: "var(--radius)" },
-            children: i.map((l) => /* @__PURE__ */ t("option", { value: l.value, children: l.label }, l.value))
+            children: i.map((d) => /* @__PURE__ */ t("option", { value: d.value, children: d.label }, d.value))
           }
         ),
         /* @__PURE__ */ t("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-zinc-400", children: /* @__PURE__ */ t("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M1 1L5 5L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
       ] })
     ]
   }
-), D = ({ title: c, children: e }) => /* @__PURE__ */ d("div", { className: "py-2", children: [
-  c && /* @__PURE__ */ t("h4", { className: "px-3 text-[10px] font-bold text-[var(--accent)] uppercase tracking-wider mb-1 mt-2", children: c }),
+), J = ({ title: o, children: e }) => /* @__PURE__ */ h("div", { className: "py-2", children: [
+  o && /* @__PURE__ */ t("h4", { className: "px-3 text-[10px] font-bold text-[var(--accent)] uppercase tracking-wider mb-1 mt-2", children: o }),
   /* @__PURE__ */ t("div", { className: "space-y-0.5", children: e })
-] }), yi = ({ tracks: c, current: e, onSelect: i, onUpload: a, onClose: n, settings: l, onSettingsChange: p, onReset: b, offset: h, onOffsetChange: f, maxHeight: s, animationClass: x }) => {
-  const [C, z] = w("main"), T = H(null);
-  return /* @__PURE__ */ d(We, { onClose: n, align: "right", maxHeight: s, className: x, children: [
-    C === "main" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
-      /* @__PURE__ */ t("div", { className: "px-3 py-2 mb-1 border-b border-white/5 font-bold text-zinc-400 uppercase text-[11px] tracking-wider flex justify-between items-center bg-white/5 rounded-lg", children: /* @__PURE__ */ t("span", { children: "Subtitles" }) }),
-      /* @__PURE__ */ d("div", { children: [
+] }), gs = ({ tracks: o, current: e, onSelect: i, onUpload: r, onClose: n, settings: d, onSettingsChange: m, onReset: b, offset: y, onOffsetChange: l, maxHeight: v, animationClass: C }) => {
+  const [N, M] = k("main"), I = F(null);
+  return /* @__PURE__ */ h(xt, { onClose: n, align: "right", maxHeight: v, className: C, children: [
+    N === "main" && /* @__PURE__ */ h("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: "px-3 py-2 mb-1 border-b border-white/5 font-bold text-zinc-400 uppercase text-[11px] tracking-wider flex justify-between items-center bg-white/5 sticky top-0 z-10 backdrop-blur-md",
+          style: { borderRadius: "var(--radius)" },
+          children: /* @__PURE__ */ t("span", { children: "Subtitles" })
+        }
+      ),
+      /* @__PURE__ */ h("div", { children: [
         /* @__PURE__ */ t(
-          k,
+          S,
           {
             label: "Upload Subtitle",
-            icon: /* @__PURE__ */ t(ti, { className: "w-4 h-4" }),
+            icon: /* @__PURE__ */ t(Gi, { className: "w-4 h-4" }),
             onClick: () => {
-              var u;
-              return (u = T.current) == null ? void 0 : u.click();
+              var p;
+              return (p = I.current) == null ? void 0 : p.click();
             }
           }
         ),
-        /* @__PURE__ */ t("input", { type: "file", accept: ".vtt,.srt", ref: T, className: "hidden", onChange: (u) => {
-          var M;
-          (M = u.target.files) != null && M[0] && a(u.target.files[0]);
+        /* @__PURE__ */ t("input", { type: "file", accept: ".vtt,.srt", ref: I, className: "hidden", onChange: (p) => {
+          var E;
+          (E = p.target.files) != null && E[0] && r(p.target.files[0]);
         } }),
         /* @__PURE__ */ t(
-          k,
+          S,
           {
             label: "Customize",
-            icon: /* @__PURE__ */ t(li, { className: "w-4 h-4" }),
-            onClick: () => z("customize"),
+            icon: /* @__PURE__ */ t(es, { className: "w-4 h-4" }),
+            onClick: () => M("customize"),
             hasSubmenu: !0
           }
         ),
         /* @__PURE__ */ t("div", { className: "h-px bg-white/5 mx-2 my-1" }),
         /* @__PURE__ */ t(
-          k,
+          S,
           {
             label: "Off",
             active: e === -1,
@@ -1294,129 +1594,129 @@ const Gt = v("VolumeX", [
             }
           }
         ),
-        c.map((u) => /* @__PURE__ */ t(
-          k,
+        o.map((p) => /* @__PURE__ */ t(
+          S,
           {
-            label: u.label,
-            value: u.language,
-            active: e === u.index,
+            label: p.label,
+            value: p.language,
+            active: e === p.index,
             onClick: () => {
-              i(u.index), n();
+              i(p.index), n();
             }
           },
-          u.index
+          p.index
         ))
       ] })
     ] }),
-    C === "customize" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
+    N === "customize" && /* @__PURE__ */ h("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
       /* @__PURE__ */ t(
-        j,
+        H,
         {
           label: "Customize",
-          onBack: () => z("main"),
-          rightAction: /* @__PURE__ */ t("button", { onClick: b, className: "p-1.5 text-zinc-400 hover:text-white transition-colors rounded-md hover:bg-white/10", title: "Reset All", children: /* @__PURE__ */ t(hi, { className: "w-4 h-4" }) })
+          onBack: () => M("main"),
+          rightAction: /* @__PURE__ */ t("button", { onClick: b, className: "p-1.5 text-zinc-400 hover:text-white transition-colors rounded-md hover:bg-white/10", title: "Reset All", children: /* @__PURE__ */ t(rs, { className: "w-4 h-4" }) })
         }
       ),
-      /* @__PURE__ */ d("div", { className: "pb-1", children: [
-        /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(
-          J,
+      /* @__PURE__ */ h("div", { className: "pb-1", children: [
+        /* @__PURE__ */ t(J, { children: /* @__PURE__ */ t(
+          X,
           {
             label: "Native Video Subtitle",
-            checked: l.useNative,
-            onChange: (u) => p({ useNative: u })
+            checked: d.useNative,
+            onChange: (p) => m({ useNative: p })
           }
         ) }),
-        !l.useNative && /* @__PURE__ */ d(A, { children: [
-          /* @__PURE__ */ d(D, { title: "Sync & Position", children: [
-            /* @__PURE__ */ d("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
-              /* @__PURE__ */ t("div", { className: "flex justify-between items-center mb-2", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ t(si, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
+        !d.useNative && /* @__PURE__ */ h(R, { children: [
+          /* @__PURE__ */ h(J, { title: "Sync & Position", children: [
+            /* @__PURE__ */ h("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
+              /* @__PURE__ */ t("div", { className: "flex justify-between items-center mb-2", children: /* @__PURE__ */ h("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ t(Ki, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
                 /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: "Sync Offset" })
               ] }) }),
-              /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ t(
                   "button",
                   {
-                    onClick: () => f(Math.round((h - 0.1) * 10) / 10),
+                    onClick: () => l(Math.round((y - 0.1) * 10) / 10),
                     className: "w-8 h-8 flex items-center justify-center bg-zinc-800 rounded-lg hover:bg-zinc-700 text-zinc-300 transition-colors active:scale-95",
-                    children: /* @__PURE__ */ t(ni, { className: "w-4 h-4" })
+                    children: /* @__PURE__ */ t(Yi, { className: "w-4 h-4" })
                   }
                 ),
-                /* @__PURE__ */ d("div", { className: "flex-1 bg-zinc-900 border border-white/5 rounded-lg h-8 flex items-center justify-center text-xs font-mono font-medium text-[var(--accent)]", children: [
-                  h > 0 ? "+" : "",
-                  (h == null ? void 0 : h.toFixed(1)) || "0.0",
+                /* @__PURE__ */ h("div", { className: "flex-1 bg-zinc-900 border border-white/5 rounded-lg h-8 flex items-center justify-center text-xs font-mono font-medium text-[var(--accent)]", children: [
+                  y > 0 ? "+" : "",
+                  (y == null ? void 0 : y.toFixed(1)) || "0.0",
                   "s"
                 ] }),
                 /* @__PURE__ */ t(
                   "button",
                   {
-                    onClick: () => f(Math.round((h + 0.1) * 10) / 10),
+                    onClick: () => l(Math.round((y + 0.1) * 10) / 10),
                     className: "w-8 h-8 flex items-center justify-center bg-zinc-800 rounded-lg hover:bg-zinc-700 text-zinc-300 transition-colors active:scale-95",
-                    children: /* @__PURE__ */ t(oi, { className: "w-4 h-4" })
+                    children: /* @__PURE__ */ t(Zi, { className: "w-4 h-4" })
                   }
                 )
               ] })
             ] }),
             /* @__PURE__ */ t(
-              K,
+              re,
               {
                 label: "Vertical Position",
-                icon: /* @__PURE__ */ t(ui, { className: "w-4 h-4" }),
-                value: l.verticalOffset,
+                icon: /* @__PURE__ */ t(ss, { className: "w-4 h-4" }),
+                value: d.verticalOffset,
                 min: 0,
                 max: 200,
                 step: 5,
-                onChange: (u) => p({ verticalOffset: u }),
-                formatValue: (u) => `${u}px`
+                onChange: (p) => m({ verticalOffset: p }),
+                formatValue: (p) => `${p}px`
               }
             )
           ] }),
-          /* @__PURE__ */ d(D, { title: "Appearance", children: [
+          /* @__PURE__ */ h(J, { title: "Appearance", children: [
             /* @__PURE__ */ t(
-              K,
+              re,
               {
                 label: "Text Size",
-                icon: /* @__PURE__ */ t(ci, { className: "w-4 h-4" }),
-                value: l.textSize,
+                icon: /* @__PURE__ */ t(ts, { className: "w-4 h-4" }),
+                value: d.textSize,
                 min: 50,
                 max: 200,
                 step: 10,
-                onChange: (u) => p({ textSize: u }),
-                formatValue: (u) => `${u}%`
+                onChange: (p) => m({ textSize: p }),
+                formatValue: (p) => `${p}%`
               }
             ),
-            /* @__PURE__ */ d("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
-              /* @__PURE__ */ d("div", { className: "flex items-center gap-3 mb-2", children: [
-                /* @__PURE__ */ t(Ge, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
+            /* @__PURE__ */ h("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
+              /* @__PURE__ */ h("div", { className: "flex items-center gap-3 mb-2", children: [
+                /* @__PURE__ */ t(gt, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
                 /* @__PURE__ */ t("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: "Text Color" })
               ] }),
-              /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-2 p-1 bg-zinc-800/50 rounded-lg", children: [
-                ["#ffffff", "#ffff00", "#00ffff", "#ff00ff", "#ff0000", "#00ff00"].map((u) => /* @__PURE__ */ t(
+              /* @__PURE__ */ h("div", { className: "flex items-center justify-between gap-2 p-1 bg-zinc-800/50 rounded-lg", children: [
+                ["#ffffff", "#ffff00", "#00ffff", "#ff00ff", "#ff0000", "#00ff00"].map((p) => /* @__PURE__ */ t(
                   "button",
                   {
-                    onClick: () => p({ textColor: u }),
-                    className: `w-6 h-6 rounded-full border border-white/10 transition-transform hover:scale-110 ${l.textColor === u ? "ring-2 scale-110" : ""}`,
-                    style: { backgroundColor: u, "--tw-ring-color": "var(--accent)" }
+                    onClick: () => m({ textColor: p }),
+                    className: `w-6 h-6 rounded-full border border-white/10 transition-transform hover:scale-110 ${d.textColor === p ? "ring-2 scale-110" : ""}`,
+                    style: { backgroundColor: p, "--tw-ring-color": "var(--accent)" }
                   },
-                  u
+                  p
                 )),
                 /* @__PURE__ */ t("div", { className: "w-px h-6 bg-white/10 mx-1" }),
                 /* @__PURE__ */ t("div", { className: "relative w-6 h-6 rounded-full overflow-hidden ring-1 ring-white/20 cursor-pointer", children: /* @__PURE__ */ t(
                   "input",
                   {
                     type: "color",
-                    value: l.textColor,
-                    onChange: (u) => p({ textColor: u.target.value }),
+                    value: d.textColor,
+                    onChange: (p) => m({ textColor: p.target.value }),
                     className: "absolute inset-[-4px] w-[150%] h-[150%] cursor-pointer p-0 border-0"
                   }
                 ) })
               ] })
             ] }),
             /* @__PURE__ */ t(
-              gi,
+              vs,
               {
                 label: "Text Style",
-                value: l.textStyle,
+                value: d.textStyle,
                 options: [
                   { label: "None", value: "none" },
                   { label: "Outline", value: "outline" },
@@ -1424,39 +1724,39 @@ const Gt = v("VolumeX", [
                   { label: "Depressed", value: "depressed" },
                   { label: "Drop Shadow", value: "shadow" }
                 ],
-                onChange: (u) => p({ textStyle: u })
+                onChange: (p) => m({ textStyle: p })
               }
             ),
-            /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2 mt-1 px-1", children: [
-              /* @__PURE__ */ t(J, { label: "Bold", icon: /* @__PURE__ */ t(mi, { className: "w-4 h-4" }), checked: l.isBold, onChange: (u) => p({ isBold: u }) }),
-              /* @__PURE__ */ t(J, { label: "Fix Caps", icon: /* @__PURE__ */ t(pi, { className: "w-4 h-4" }), checked: l.fixCapitalization, onChange: (u) => p({ fixCapitalization: u }) })
+            /* @__PURE__ */ h("div", { className: "grid grid-cols-2 gap-2 mt-1 px-1", children: [
+              /* @__PURE__ */ t(X, { label: "Bold", icon: /* @__PURE__ */ t(ns, { className: "w-4 h-4" }), checked: d.isBold, onChange: (p) => m({ isBold: p }) }),
+              /* @__PURE__ */ t(X, { label: "Fix Caps", icon: /* @__PURE__ */ t(as, { className: "w-4 h-4" }), checked: d.fixCapitalization, onChange: (p) => m({ fixCapitalization: p }) })
             ] })
           ] }),
-          /* @__PURE__ */ d(D, { title: "Background", children: [
+          /* @__PURE__ */ h(J, { title: "Background", children: [
             /* @__PURE__ */ t(
-              K,
+              re,
               {
                 label: "Opacity",
-                icon: /* @__PURE__ */ t(di, { className: "w-4 h-4" }),
-                value: l.backgroundOpacity,
+                icon: /* @__PURE__ */ t(is, { className: "w-4 h-4" }),
+                value: d.backgroundOpacity,
                 min: 0,
                 max: 100,
                 step: 5,
-                onChange: (u) => p({ backgroundOpacity: u }),
-                formatValue: (u) => `${u}%`
+                onChange: (p) => m({ backgroundOpacity: p }),
+                formatValue: (p) => `${p}%`
               }
             ),
-            /* @__PURE__ */ t(J, { label: "Blur Background", icon: /* @__PURE__ */ t(fi, { className: "w-4 h-4" }), checked: l.backgroundBlur, onChange: (u) => p({ backgroundBlur: u }) }),
-            l.backgroundBlur && /* @__PURE__ */ t(
-              K,
+            /* @__PURE__ */ t(X, { label: "Blur Background", icon: /* @__PURE__ */ t(os, { className: "w-4 h-4" }), checked: d.backgroundBlur, onChange: (p) => m({ backgroundBlur: p }) }),
+            d.backgroundBlur && /* @__PURE__ */ t(
+              re,
               {
                 label: "Blur Intensity",
-                value: l.backgroundBlurAmount,
+                value: d.backgroundBlurAmount,
                 min: 0,
                 max: 20,
                 step: 1,
-                onChange: (u) => p({ backgroundBlurAmount: u }),
-                formatValue: (u) => `${u}px`
+                onChange: (p) => m({ backgroundBlurAmount: p }),
+                formatValue: (p) => `${p}px`
               }
             )
           ] })
@@ -1464,127 +1764,263 @@ const Gt = v("VolumeX", [
       ] })
     ] })
   ] });
-}, xi = [
+}, ye = ({ content: o }) => typeof o == "string" ? o.trim().startsWith("<") ? /* @__PURE__ */ t("span", { dangerouslySetInnerHTML: { __html: o } }) : /* @__PURE__ */ t("span", { children: o }) : /* @__PURE__ */ t(R, { children: o }), xs = ({ x: o, y: e, items: i, onClose: r, containerWidth: n, containerHeight: d }) => {
+  const m = F(null), [b, y] = k({
+    top: e,
+    left: o,
+    opacity: 0
+  });
+  return Wt(() => {
+    if (!m.current) return;
+    const l = m.current.getBoundingClientRect(), v = l.width, C = l.height;
+    let N = o, M = e;
+    o + v > n - 10 && (N = o - v), N < 10 && (N = 10), N + v > n && (N = Math.max(10, n - v - 10)), e + C > d - 10 && (M = e - C);
+    let I = d - 20;
+    M < 10 && (M = 10), M + C > d - 10 && (M = Math.max(10, d - C - 10)), y({
+      top: M,
+      left: N,
+      maxHeight: I,
+      opacity: 1
+    });
+  }, [o, e, i, n, d]), P(() => {
+    const l = (v) => {
+      m.current && !m.current.contains(v.target) && r();
+    };
+    return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
+  }, [r]), /* @__PURE__ */ t(
+    "div",
+    {
+      ref: m,
+      className: "absolute z-50 min-w-[200px] bg-[var(--bg-panel)] backdrop-blur-xl border-[length:var(--border-width)] border-white/10 shadow-2xl p-1.5 font-[family-name:var(--font-main)] overflow-y-auto hide-scrollbar flex flex-col",
+      style: {
+        top: b.top,
+        left: b.left,
+        maxHeight: b.maxHeight,
+        opacity: b.opacity,
+        borderRadius: "var(--radius-lg)"
+      },
+      onClick: (l) => l.stopPropagation(),
+      children: i.map((l, v) => l.separator ? /* @__PURE__ */ t("div", { className: "h-0 border-t border-white/10 mx-2 my-1.5" }, v) : l.isLabel ? /* @__PURE__ */ t("div", { className: "px-3 py-1.5 text-[10px] font-bold text-zinc-500 uppercase tracking-wider select-none", children: /* @__PURE__ */ t(ye, { content: l.html || "" }) }, v) : /* @__PURE__ */ h(we.Fragment, { children: [
+        /* @__PURE__ */ h(
+          "button",
+          {
+            onClick: () => {
+              l.disabled || (l.click ? l.click(r) : l.onClick && l.onClick(r));
+            },
+            disabled: l.disabled,
+            className: "w-full text-left px-3 py-2.5 flex items-center justify-between hover:bg-white/10 focus:bg-white/10 focus:outline-none transition-colors text-sm text-zinc-200 disabled:opacity-50 disabled:cursor-not-allowed group my-0.5",
+            style: { borderRadius: "var(--radius)" },
+            children: [
+              /* @__PURE__ */ h("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+                l.icon && /* @__PURE__ */ t("span", { className: "text-zinc-400 w-4 h-4 flex items-center justify-center shrink-0 group-hover:text-zinc-300 transition-colors", children: /* @__PURE__ */ t(ye, { content: l.icon }) }),
+                /* @__PURE__ */ t("span", { className: `flex items-center font-medium truncate ${l.checked ? "text-[var(--accent)]" : ""}`, children: /* @__PURE__ */ t(ye, { content: l.html || "" }) })
+              ] }),
+              l.checked && /* @__PURE__ */ t(Se, { className: "w-4 h-4 text-[var(--accent)] shrink-0 ml-2" })
+            ]
+          }
+        ),
+        l.showBorder && /* @__PURE__ */ t("div", { className: "h-0 border-t border-white/10 mx-2 my-1" })
+      ] }, v))
+    }
+  );
+}, ys = ({ player: o, onClose: e }) => {
+  const [i, r] = k({});
+  return P(() => {
+    const n = () => {
+      var y;
+      if (!o.video) return;
+      const m = o.video, b = m.getVideoPlaybackQuality ? m.getVideoPlaybackQuality() : null;
+      r({
+        "Player Size": `${m.offsetWidth} x ${m.offsetHeight}`,
+        "Video Resolution": `${m.videoWidth} x ${m.videoHeight}`,
+        "Current Time": `${m.currentTime.toFixed(3)}s`,
+        Duration: `${m.duration.toFixed(3)}s`,
+        Volume: `${Math.round(m.volume * 100)}%`,
+        "Dropped Frames": b ? b.droppedVideoFrames : "N/A",
+        Buffer: m.buffered.length > 0 ? `${(m.buffered.end(m.buffered.length - 1) - m.currentTime).toFixed(2)}s` : "0s",
+        Engine: ((y = o.store.get().sources[o.store.get().currentSourceIndex]) == null ? void 0 : y.type) || "native",
+        URL: m.currentSrc
+      });
+    };
+    n();
+    const d = setInterval(n, 1e3);
+    return () => clearInterval(d);
+  }, [o]), /* @__PURE__ */ t("div", { className: "absolute inset-0 z-[60] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200", children: /* @__PURE__ */ h(
+    "div",
+    {
+      className: "bg-[var(--bg-panel)] border border-white/10 rounded-xl w-full max-w-md shadow-2xl relative font-mono text-xs text-zinc-300 flex flex-col",
+      style: { borderRadius: "var(--radius)", maxHeight: "90%" },
+      children: [
+        /* @__PURE__ */ h("div", { className: "p-5 pb-0 flex-shrink-0 relative", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: (n) => {
+                n.stopPropagation(), e();
+              },
+              className: "absolute top-3 right-3 p-1.5 text-zinc-400 hover:text-white hover:bg-white/10 rounded-full transition-colors",
+              children: /* @__PURE__ */ t(ms, { className: "w-4 h-4" })
+            }
+          ),
+          /* @__PURE__ */ t("h3", { className: "text-sm font-bold text-white mb-4 uppercase tracking-wider border-b border-white/10 pb-2", children: "Video Statistics" })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "overflow-y-auto hide-scrollbar p-5 pt-0 space-y-2.5 flex-1 min-h-0", children: Object.entries(i).map(([n, d]) => /* @__PURE__ */ h("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1", children: [
+          /* @__PURE__ */ t("span", { className: "text-zinc-500 font-bold shrink-0", children: n }),
+          /* @__PURE__ */ t("span", { className: "text-zinc-200 truncate select-all font-medium bg-white/5 px-1.5 py-0.5 rounded break-all text-right", title: String(d), children: String(d) })
+        ] }, n)) })
+      ]
+    }
+  ) });
+}, ws = [
   { label: "Strata", value: "#6366f1" },
   { label: "Emerald", value: "#10b981" },
   { label: "Rose", value: "#f43f5e" },
   { label: "Amber", value: "#f59e0b" },
   { label: "Sky", value: "#0ea5e9" },
   { label: "Violet", value: "#8b5cf6" }
-], wi = [
+], ks = [
   { label: "Default", value: "default", color: "#6366f1" },
   { label: "Pixel", value: "pixel", color: "#ef4444" },
   { label: "Game", value: "game", color: "#eab308" },
   { label: "Hacker", value: "hacker", color: "#22c55e" }
-], je = (c) => {
-  var Me, Ee, Ie, Re;
-  const { src: e, sources: i, poster: a, autoPlay: n, thumbnails: l, textTracks: p, plugins: b, ...h } = c, f = H(null), [s, x] = w(null), [C, z] = w(!1), [T, u] = w(0), M = it(() => He(h), []), o = at(
-    rt((r) => s ? s.store.subscribe(r) : () => {
+], ht = ({ content: o, className: e, style: i }) => typeof o == "string" ? o.trim().startsWith("<") ? /* @__PURE__ */ t("div", { className: e, style: i, dangerouslySetInnerHTML: { __html: o } }) : /* @__PURE__ */ t("div", { className: e, style: i, children: o }) : /* @__PURE__ */ t("div", { className: e, style: i, children: o }), mt = (o) => {
+  var it, st;
+  const { src: e, type: i, sources: r, poster: n, autoPlay: d, thumbnails: m, textTracks: b, plugins: y, ...l } = o, v = l.screenshot ?? !1, C = l.pip ?? !0, N = l.setting ?? !0, M = l.fullscreen ?? !0, I = l.fullscreenWeb ?? !1, p = l.lock ?? !1, E = l.fastForward ?? !0, yt = l.flip ?? !0, wt = l.aspectRatio ?? !0, ze = l.hotKey ?? !0, kt = l.backdrop ?? !0, Y = F(null), [s, Te] = k(null), [ae, oe] = k(!1), [Me, Ct] = k(0), [Nt, St] = k(0), Ie = ve(() => bt(l), []), a = qt(
+    ge((c) => s ? s.store.subscribe(c) : () => {
     }, [s]),
-    () => s ? s.store.get() : M,
-    () => M
-  ), [Y, Q] = w(!0), [E, $] = w(!1), [I, B] = w(!1), [P, N] = w("main"), ce = Pe(E, 200), de = Pe(I, 200), [Z, ue] = w(!1), [ee, he] = w(0), [me, pe] = w(!1), [fe, ve] = w(!1), [be, ge] = w([]), [ye, xe] = w(null), [_e, Qe] = w(0), [V, we] = w(null), [U, te] = w(null), [ki, ke] = w(null), G = H(null), W = H(null), ie = H(null), ae = H(null);
-  R(() => {
-    if (!f.current) return;
-    const r = new ct(h);
-    b && b.length > 0 && b.forEach((g) => r.use(g)), r.attach(f.current), x(r);
-    const m = new ResizeObserver((g) => {
-      for (const S of g)
-        u(S.contentRect.height);
+    () => s ? s.store.get() : Ie,
+    () => Ie
+  ), [L, O] = k(!1), [$, W] = k(!1), [A, T] = k("main"), [K, le] = k({ x: 0, y: 0, visible: !1 }), [zt, Re] = k(!1), Le = nt(L, 200), $e = nt($, 200), [ce, Pe] = k(!1), [de, Ee] = k(0), [Tt, Ae] = k(!1), [Mt, Be] = k(!1), [ue, te] = k(!1), [Ve, Fe] = k([]), [Oe, je] = k(null), [It, Rt] = k(0), [q, He] = k(null), [_, ie] = k(null), [Cs, We] = k(null), [he, qe] = k(!1), me = F(null), De = F(1), Z = F(null), D = F(null), fe = F(null), pe = F(null), ee = F(null);
+  P(() => {
+    if (!Y.current) return;
+    const c = new Qt(l);
+    y && y.length > 0 && y.forEach((g) => c.use(g)), c.attach(Y.current), Te(c);
+    const f = new ResizeObserver((g) => {
+      for (const z of g)
+        Ct(z.contentRect.height), St(z.contentRect.width);
     });
-    return m.observe(f.current), () => {
-      m.disconnect(), r.destroy(), x(null);
+    return f.observe(Y.current), () => {
+      f.disconnect(), c.destroy(), Te(null);
     };
-  }, []), R(() => {
+  }, []), P(() => {
     if (!s) return;
-    const r = {};
-    h.theme !== void 0 && h.theme !== o.theme && (r.theme = h.theme), h.themeColor !== void 0 && h.themeColor !== o.themeColor && (r.themeColor = h.themeColor), h.iconSize !== void 0 && h.iconSize !== o.iconSize && (r.iconSize = h.iconSize), Object.keys(r).length > 0 && s.setAppearance(r), h.volume !== void 0 && Math.abs(h.volume - o.volume) > 0.01 && s.setVolume(h.volume), h.muted !== void 0 && h.muted !== o.isMuted && (h.muted ? s.video.muted = !0 : s.video.muted = !1);
-  }, [s, h.theme, h.themeColor, h.iconSize, h.volume, h.muted]), R(() => {
+    const c = {};
+    l.theme !== void 0 && l.theme !== a.theme && (c.theme = l.theme), l.themeColor !== void 0 && l.themeColor !== a.themeColor && (c.themeColor = l.themeColor), l.iconSize !== void 0 && l.iconSize !== a.iconSize && (c.iconSize = l.iconSize), Object.keys(c).length > 0 && s.setAppearance(c), l.volume !== void 0 && Math.abs(l.volume - a.volume) > 0.01 && s.setVolume(l.volume), l.muted !== void 0 && l.muted !== a.isMuted && (l.muted ? s.video.muted = !0 : s.video.muted = !1);
+  }, [s, l.theme, l.themeColor, l.iconSize, l.volume, l.muted]), P(() => {
     if (!s) return;
-    const r = p || [];
-    i && i.length > 0 ? (z(!1), s.setSources(i, r)) : e && (z(!1), s.setSources([{ url: e, type: "auto" }], r));
-  }, [e, i, p, s]), R(() => {
-  }, [s, a]), R(() => {
-    s && n && (s.video.muted = !0, s.store.setState({ isMuted: !0 }), s.play().catch(() => {
+    const c = b || [];
+    r && r.length > 0 ? (oe(!1), s.setSources(r, c)) : e && (oe(!1), s.setSources([{ url: e, type: i || "auto" }], c));
+  }, [e, i, r, b, s]), P(() => {
+    s && d && (s.video.muted = !0, s.store.setState({ isMuted: !0 }), s.play().catch(() => {
     }));
-  }, [s, n]), R(() => {
-    o.isPlaying && !C && z(!0);
-  }, [o.isPlaying, C]), R(() => {
-    l && s ? ut(l, s.notify.bind(s)).then((r) => ge(r)) : ge([]);
-  }, [l, s]), R(() => {
-    const r = (m) => {
+  }, [s, d]), P(() => {
+    a.isPlaying && !ae && oe(!0);
+  }, [a.isPlaying, ae]), P(() => {
+    m && s ? Jt(m, s.notify.bind(s)).then((c) => Fe(c)) : Fe([]);
+  }, [m, s]), P(() => (_ && (ee.current && clearTimeout(ee.current), ee.current = setTimeout(() => {
+    ie(null);
+  }, 600)), () => {
+    ee.current && clearTimeout(ee.current);
+  }), [_]), P(() => {
+    const c = (f) => {
       var g;
-      if (s && ((g = document.activeElement) == null ? void 0 : g.tagName) !== "INPUT")
-        switch (m.key.toLowerCase()) {
+      if (!(!s || !ze) && ((g = document.activeElement) == null ? void 0 : g.tagName) !== "INPUT")
+        switch (f.key.toLowerCase()) {
           case " ":
           case "k":
-            m.preventDefault(), s.togglePlay();
+            f.preventDefault(), s.togglePlay();
             break;
           case "arrowright":
-            m.preventDefault(), s.skip(5);
+            f.preventDefault(), s.skip(5);
             break;
           case "arrowleft":
-            m.preventDefault(), s.skip(-5);
+            f.preventDefault(), s.skip(-5);
             break;
           case "arrowup":
-            m.preventDefault(), s.setVolume(s.video.volume + 0.1);
+            f.preventDefault(), s.setVolume(s.video.volume + 0.1);
             break;
           case "arrowdown":
-            m.preventDefault(), s.setVolume(s.video.volume - 0.1);
+            f.preventDefault(), s.setVolume(s.video.volume - 0.1);
             break;
           case "f":
-            m.preventDefault(), s.toggleFullscreen();
+            f.preventDefault(), s.toggleFullscreen();
             break;
           case "m":
-            m.preventDefault(), s.toggleMute();
+            f.preventDefault(), s.toggleMute();
             break;
         }
     };
-    return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
-  }, [s]);
-  const Ce = () => {
-    Q(!0), W.current && clearTimeout(W.current), !(E || I) && (W.current = setTimeout(() => {
-      !o.isPlaying || E || I || Q(!1);
-    }, 2500));
+    return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
+  }, [s, ze]);
+  const Ue = () => {
+    s && (s.setControlsVisible(!0), D.current && clearTimeout(D.current), !(L || $) && (D.current = setTimeout(() => {
+      !a.isPlaying || L || $ || s.setControlsVisible(!1);
+    }, 2500)));
   };
-  R(() => {
-    !E && !I && o.isPlaying ? Ce() : (E || I) && (Q(!0), W.current && clearTimeout(W.current));
-  }, [E, I, o.isPlaying]);
-  const re = (r) => {
-    if (!ie.current || !o.duration) return 0;
-    const m = ie.current.getBoundingClientRect(), g = "touches" in r ? r.touches[0].clientX : r.clientX;
-    return Math.max(0, Math.min(1, (g - m.left) / m.width)) * o.duration;
-  }, Ne = (r) => {
-    ue(!0), he(re(r));
-    const m = (S) => he(re(S)), g = (S) => {
-      s == null || s.seek(re(S)), ue(!1), document.removeEventListener("mousemove", m), document.removeEventListener("touchmove", m), document.removeEventListener("mouseup", g), document.removeEventListener("touchend", g);
+  P(() => {
+    s && (!L && !$ && a.isPlaying ? Ue() : (L || $) && (s.setControlsVisible(!0), D.current && clearTimeout(D.current)));
+  }, [L, $, a.isPlaying, s]);
+  const _e = ge(() => {
+    !E || !s || !a.isPlaying || a.isLocked || (De.current = s.video.playbackRate, me.current = setTimeout(() => {
+      s.video.playbackRate = 2, qe(!0);
+    }, 500));
+  }, [E, s, a.isPlaying, a.isLocked]), Ge = ge(() => {
+    me.current && clearTimeout(me.current), he && s && (s.video.playbackRate = De.current, qe(!1));
+  }, [he, s]), be = (c) => {
+    if (!fe.current || !a.duration) return 0;
+    const f = fe.current.getBoundingClientRect(), g = "touches" in c ? c.touches[0].clientX : c.clientX;
+    return Math.max(0, Math.min(1, (g - f.left) / f.width)) * a.duration;
+  }, Qe = (c) => {
+    if (a.isLocked) return;
+    Pe(!0), Ee(be(c));
+    const f = (z) => Ee(be(z)), g = (z) => {
+      s == null || s.seek(be(z)), Pe(!1), document.removeEventListener("mousemove", f), document.removeEventListener("touchmove", f), document.removeEventListener("mouseup", g), document.removeEventListener("touchend", g);
     };
-    document.addEventListener("mousemove", m), document.addEventListener("touchmove", m), document.addEventListener("mouseup", g), document.addEventListener("touchend", g);
-  }, Se = (r) => {
-    if (!ae.current) return 0;
-    const m = ae.current.getBoundingClientRect(), g = "touches" in r ? r.touches[0].clientX : r.clientX;
-    return Math.max(0, Math.min(1, (g - m.left) / m.width));
-  }, ze = (r) => {
-    if (!s) return;
-    pe(!0), s.setVolume(Se(r));
-    const m = (S) => s.setVolume(Se(S)), g = () => {
-      pe(!1), document.removeEventListener("mousemove", m), document.removeEventListener("touchmove", m), document.removeEventListener("mouseup", g), document.removeEventListener("touchend", g);
+    document.addEventListener("mousemove", f), document.addEventListener("touchmove", f), document.addEventListener("mouseup", g), document.addEventListener("touchend", g);
+  }, Xe = (c) => {
+    if (!pe.current) return 0;
+    const f = pe.current.getBoundingClientRect(), g = "touches" in c ? c.touches[0].clientX : c.clientX;
+    return Math.max(0, Math.min(1, (g - f.left) / f.width));
+  }, Je = (c) => {
+    if (!s || a.isLocked) return;
+    Ae(!0), s.setVolume(Xe(c));
+    const f = (z) => s.setVolume(Xe(z)), g = () => {
+      Ae(!1), document.removeEventListener("mousemove", f), document.removeEventListener("touchmove", f), document.removeEventListener("mouseup", g), document.removeEventListener("touchend", g);
     };
-    document.addEventListener("mousemove", m), document.addEventListener("touchmove", m), document.addEventListener("mouseup", g), document.addEventListener("touchend", g);
-  }, Xe = (r) => {
-    if (!o.duration) return;
-    const m = r.currentTarget.getBoundingClientRect(), g = (r.clientX - m.left) / m.width, S = g * o.duration;
-    Qe(g * 100), xe(S), be.length > 0 && we(be.find((_) => S >= _.start && S < _.end) || null);
-  }, X = (r) => {
-    s && (s.skip(r === "forward" ? 10 : -10), ke(r), setTimeout(() => ke(null), 300));
-  }, Je = (r) => {
-    if (E && $(!1), I && B(!1), !s) return;
-    const m = r.currentTarget.getBoundingClientRect(), g = r.clientX - m.left, S = m.width, _ = Date.now();
-    G.current ? (clearTimeout(G.current), G.current = null, g < S * 0.35 ? (X("rewind"), te({ type: "rewind", id: _ })) : g > S * 0.65 ? (X("forward"), te({ type: "forward", id: _ })) : s.toggleFullscreen()) : G.current = setTimeout(() => {
-      s.togglePlay(), G.current = null;
+    document.addEventListener("mousemove", f), document.addEventListener("touchmove", f), document.addEventListener("mouseup", g), document.addEventListener("touchend", g);
+  }, Lt = (c) => {
+    if (!a.duration || a.isLive) return;
+    const f = c.currentTarget.getBoundingClientRect(), g = (c.clientX - f.left) / f.width, z = g * a.duration;
+    Rt(g * 100), je(z), Ve.length > 0 && He(Ve.find((U) => z >= U.start && z < U.end) || null);
+  }, se = (c) => {
+    !s || a.isLocked || (s.skip(c === "forward" ? 10 : -10), We(c), setTimeout(() => We(null), 300));
+  }, $t = (c) => {
+    if (!s || (L && O(!1), $ && W(!1), ue && te(!1), K.visible && le({ ...K, visible: !1 }), s.setControlsVisible(!0), D.current && clearTimeout(D.current), D.current = setTimeout(() => {
+      !a.isPlaying || L || $ || s.setControlsVisible(!1);
+    }, 2500), a.isLocked)) return;
+    const f = c.currentTarget.getBoundingClientRect(), g = c.clientX - f.left, z = f.width, U = Date.now();
+    Z.current ? (clearTimeout(Z.current), Z.current = null, g < z * 0.35 ? (se("rewind"), ie({ type: "rewind", id: U })) : g > z * 0.65 ? (se("forward"), ie({ type: "forward", id: U })) : s.toggleFullscreen()) : Z.current = setTimeout(() => {
+      s.togglePlay(), Z.current = null;
     }, 250);
-  }, Ke = o.isMuted || o.volume === 0 ? Qt : o.volume < 0.5 ? _t : Wt, Te = Math.max(100, T - 120), Ye = () => {
-    switch (o.iconSize) {
+  }, Pt = (c) => {
+    var g;
+    if (c.preventDefault(), a.isLocked) return;
+    const f = (g = Y.current) == null ? void 0 : g.getBoundingClientRect();
+    f && le({
+      visible: !0,
+      x: c.clientX - f.left,
+      y: c.clientY - f.top
+    });
+  }, Et = (c) => {
+    c.stopPropagation();
+    const f = "ontouchstart" in window || navigator.maxTouchPoints > 0, g = window.matchMedia("(hover: none)").matches || f;
+    if (ue) {
+      te(!1);
+      return;
+    }
+    g ? te(!0) : s == null || s.toggleMute();
+  }, At = a.isMuted || a.volume === 0 ? ji : a.volume < 0.5 ? Oi : Fi, Ke = Math.max(100, Me - 120), Bt = () => {
+    switch (a.iconSize) {
       case "small":
         return "w-4 h-4";
       case "large":
@@ -1592,17 +2028,17 @@ const Gt = v("VolumeX", [
       default:
         return "w-5 h-5";
     }
-  }, Ze = () => {
-    switch (o.iconSize) {
+  }, Vt = () => {
+    switch (a.iconSize) {
       case "small":
-        return "p-1.5";
+        return "p-2 min-w-[32px] min-h-[32px]";
       case "large":
-        return "p-2.5";
+        return "p-3 min-w-[44px] min-h-[44px]";
       default:
-        return "p-2";
+        return "p-2.5 min-w-[36px] min-h-[36px]";
     }
-  }, L = Ye(), F = Ze(), q = (() => {
-    switch (o.iconSize) {
+  }, B = Bt(), j = Vt(), G = (() => {
+    switch (a.iconSize) {
       case "small":
         return {
           playBtn: "w-14 h-14",
@@ -1625,21 +2061,277 @@ const Gt = v("VolumeX", [
           skipIcon: "w-6 h-6"
         };
     }
-  })();
-  return /* @__PURE__ */ d(
+  })(), Ft = !a.isLocked && (a.controlsVisible || !a.isPlaying || L || $), Ye = Mt || Tt || ue, Ze = kt ? "backdrop-blur-xl bg-black/80" : "bg-black/95", et = ve(() => {
+    const c = [
+      { id: "play", position: "left", index: 10, isBuiltIn: !0 },
+      { id: "volume", position: "left", index: 20, isBuiltIn: !0 },
+      { id: "time", position: "left", index: 30, isBuiltIn: !0 },
+      { id: "subtitle", position: "right", index: 80, isBuiltIn: !0 },
+      { id: "screenshot", position: "right", index: 85, isBuiltIn: !0 },
+      { id: "pip", position: "right", index: 90, isBuiltIn: !0 },
+      { id: "download", position: "right", index: 95, isBuiltIn: !0 },
+      { id: "settings", position: "right", index: 100, isBuiltIn: !0 },
+      { id: "fullscreenWeb", position: "right", index: 110, isBuiltIn: !0 },
+      { id: "fullscreen", position: "right", index: 120, isBuiltIn: !0 }
+    ];
+    return l.controls && l.controls.forEach((f) => {
+      const g = c.find((z) => z.id === f.id);
+      g ? Object.assign(g, f) : c.push(f);
+    }), c.filter((f) => !(f.id === "screenshot" && !v || f.id === "pip" && !C || f.id === "settings" && !N || f.id === "fullscreen" && !M || f.id === "fullscreenWeb" && !I)).sort((f, g) => f.index - g.index);
+  }, [l.controls, v, C, N, M, I]), tt = (c) => {
+    var f, g, z, U, rt;
+    if (!c.isBuiltIn)
+      return /* @__PURE__ */ t(
+        "button",
+        {
+          onClick: () => {
+            c.click ? c.click(s) : c.onClick && c.onClick(s);
+          },
+          className: `strata-control-btn text-zinc-300 hover:text-white transition-colors hover:bg-white/10 focus:outline-none flex items-center justify-center ${j} ${c.className || ""}`,
+          style: { borderRadius: "var(--radius)", ...c.style },
+          title: c.tooltip,
+          children: /* @__PURE__ */ t(ht, { content: c.html || "" })
+        },
+        c.index
+      );
+    switch (c.id) {
+      case "play":
+        return /* @__PURE__ */ t("button", { onClick: () => s == null ? void 0 : s.togglePlay(), className: `strata-control-btn text-zinc-300 hover:text-white transition-colors hover:bg-white/10 focus:outline-none ${j}`, style: { borderRadius: "var(--radius)" }, children: a.isPlaying ? /* @__PURE__ */ t(ot, { className: `${B} fill-current` }) : /* @__PURE__ */ t(at, { className: `${B} fill-current` }) }, "play");
+      case "volume":
+        return /* @__PURE__ */ h(
+          "div",
+          {
+            className: "flex items-center gap-2 group/vol relative",
+            onMouseEnter: () => {
+              window.matchMedia("(hover: hover)").matches && Be(!0);
+            },
+            onMouseLeave: () => {
+              window.matchMedia("(hover: hover)").matches && Be(!1);
+            },
+            children: [
+              /* @__PURE__ */ t("button", { onClick: Et, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 focus:outline-none ${j}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(At, { className: B }) }),
+              /* @__PURE__ */ t("div", { className: `relative h-8 flex items-center transition-all duration-300 ease-out overflow-hidden ${Ye ? "w-28 opacity-100 ml-1" : "w-0 opacity-0"}`, children: /* @__PURE__ */ h("div", { ref: pe, className: "relative w-full h-full flex items-center cursor-pointer px-2", onMouseDown: Je, onTouchStart: Je, children: [
+                /* @__PURE__ */ t("div", { className: "w-full h-1 bg-white/20 overflow-hidden", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ t("div", { className: "h-full bg-white", style: { width: `${(a.isMuted ? 0 : a.volume) * 100}%`, borderRadius: "var(--radius-full)" } }) }),
+                /* @__PURE__ */ t("div", { className: "absolute h-3 w-3 bg-white shadow-md top-1/2 -translate-y-1/2 pointer-events-none", style: { left: `calc(${(a.isMuted ? 0 : a.volume) * 100}% * 0.85 + 4px)`, borderRadius: "var(--radius-full)" } })
+              ] }) }),
+              Ye && /* @__PURE__ */ t("div", { className: "strata-tooltip absolute bottom-full mb-2 px-1.5 py-0.5 rounded text-[10px] font-bold font-mono shadow-lg pointer-events-none whitespace-nowrap z-50 transform -translate-x-1/2", style: { left: `calc(52px + ${(a.isMuted ? 0 : a.volume) * 80}px)` }, children: a.isMuted ? "0%" : `${Math.round(a.volume * 100)}%` })
+            ]
+          },
+          "volume"
+        );
+      case "time":
+        return l.isLive ? /* @__PURE__ */ h("div", { className: "flex items-center gap-2 px-2 py-0.5 bg-red-500/10 border border-red-500/20 rounded-md", children: [
+          /* @__PURE__ */ t("div", { className: "w-2 h-2 rounded-full bg-red-500 animate-pulse" }),
+          /* @__PURE__ */ t("span", { className: "text-[10px] font-bold text-red-500 tracking-wider", children: "LIVE" })
+        ] }, "live") : /* @__PURE__ */ h("div", { className: "text-xs font-medium text-zinc-400 font-mono select-none hidden sm:block tabular-nums", children: [
+          xe(ce ? de : a.currentTime),
+          " ",
+          /* @__PURE__ */ t("span", { className: "text-zinc-600", children: "/" }),
+          " ",
+          xe(a.duration)
+        ] }, "time");
+      case "subtitle":
+        return /* @__PURE__ */ h("div", { className: "relative", children: [
+          /* @__PURE__ */ t("button", { onClick: (u) => {
+            u.stopPropagation(), W(!$), O(!1);
+          }, className: `strata-control-btn transition-colors focus:outline-none ${j} ${$ ? "text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Ui, { className: B }) }),
+          $e.isMounted && /* @__PURE__ */ t(
+            gs,
+            {
+              tracks: a.subtitleTracks,
+              current: a.currentSubtitle,
+              onSelect: (u) => s == null ? void 0 : s.setSubtitle(u),
+              onUpload: (u) => s == null ? void 0 : s.addTextTrack(u, u.name),
+              onClose: () => W(!1),
+              settings: a.subtitleSettings,
+              onSettingsChange: (u) => s == null ? void 0 : s.updateSubtitleSettings(u),
+              onReset: () => s == null ? void 0 : s.resetSubtitleSettings(),
+              offset: a.subtitleOffset,
+              onOffsetChange: (u) => s == null ? void 0 : s.setSubtitleOffset(u),
+              maxHeight: Ke,
+              animationClass: `strata-backdrop ${Ze} ${$e.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95"}`
+            }
+          )
+        ] }, "subtitle");
+      case "screenshot":
+        return /* @__PURE__ */ t("button", { onClick: () => s == null ? void 0 : s.screenshot(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${j}`, style: { borderRadius: "var(--radius)" }, title: "Screenshot", children: /* @__PURE__ */ t(ls, { className: B }) }, "ss");
+      case "pip":
+        return /* @__PURE__ */ t("button", { onClick: () => s == null ? void 0 : s.togglePip(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${j}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Di, { className: B }) }, "pip");
+      case "download":
+        return /* @__PURE__ */ t("button", { onClick: () => s == null ? void 0 : s.download(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${j}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(_i, { className: B }) }, "dl");
+      case "fullscreen":
+        return /* @__PURE__ */ t("button", { onClick: () => s == null ? void 0 : s.toggleFullscreen(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 rounded-lg transition-transform hover:scale-110 focus:outline-none ${j}`, style: { borderRadius: "var(--radius)" }, children: a.isFullscreen ? /* @__PURE__ */ t(Wi, { className: B }) : /* @__PURE__ */ t(Hi, { className: B }) }, "fs");
+      case "fullscreenWeb":
+        return /* @__PURE__ */ t("button", { className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 hidden sm:block focus:outline-none ${j}`, style: { borderRadius: "var(--radius)" }, title: "Web Fullscreen", children: /* @__PURE__ */ t(us, { className: B }) }, "fsw");
+      case "settings":
+        return /* @__PURE__ */ h("div", { className: "relative", children: [
+          /* @__PURE__ */ t("button", { onClick: (u) => {
+            u.stopPropagation(), O(!L), W(!1), T("main");
+          }, className: `strata-control-btn transition-all duration-300 focus:outline-none ${j} ${L ? "rotate-90 text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(qi, { className: B }) }),
+          Le.isMounted && /* @__PURE__ */ t(xt, { onClose: () => O(!1), align: "right", maxHeight: Ke, className: `strata-backdrop ${Ze} ${Le.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95"}`, children: /* @__PURE__ */ h("div", { className: "w-full", children: [
+            A === "main" && /* @__PURE__ */ h("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
+              /* @__PURE__ */ t("div", { className: "px-3 py-2 mb-1 border-b border-white/5 font-bold text-zinc-400 uppercase text-[11px] tracking-wider flex justify-between items-center bg-white/5 sticky top-0 z-10 backdrop-blur-md", style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t("span", { children: "Settings" }) }),
+              a.sources.length > 1 && /* @__PURE__ */ t(S, { label: "Source", value: ((f = a.sources[a.currentSourceIndex]) == null ? void 0 : f.name) || `Source ${a.currentSourceIndex + 1}`, onClick: () => T("sources"), hasSubmenu: !0 }),
+              /* @__PURE__ */ t(S, { label: "Speed", value: `${a.playbackRate}x`, onClick: () => T("speed"), hasSubmenu: !0 }),
+              /* @__PURE__ */ t(S, { label: "Quality", value: a.currentQuality === -1 ? "Auto" : `${(g = a.qualityLevels[a.currentQuality]) == null ? void 0 : g.height}p`, onClick: () => T("quality"), hasSubmenu: !0 }),
+              /* @__PURE__ */ t(S, { label: "Audio", value: ((z = a.audioTracks[a.currentAudioTrack]) == null ? void 0 : z.label) || "Default", onClick: () => T("audio"), hasSubmenu: !0 }),
+              yt && /* @__PURE__ */ t(S, { label: "Flip", value: a.flipState.horizontal ? "H" : a.flipState.vertical ? "V" : "Normal", onClick: () => T("flip"), hasSubmenu: !0 }),
+              wt && /* @__PURE__ */ t(S, { label: "Aspect Ratio", value: a.aspectRatio, onClick: () => T("ratio"), hasSubmenu: !0 }),
+              /* @__PURE__ */ t(ut, {}),
+              /* @__PURE__ */ t(S, { label: "Audio Boost", value: a.audioGain > 1 ? `${a.audioGain}x` : "Off", onClick: () => T("boost"), hasSubmenu: !0 }),
+              /* @__PURE__ */ t(S, { label: "Watch Party", icon: /* @__PURE__ */ t(Ji, { className: "w-4 h-4" }), onClick: () => T("party"), hasSubmenu: !0 }),
+              /* @__PURE__ */ t(S, { label: "Cast to Device", icon: /* @__PURE__ */ t(Xi, { className: "w-4 h-4" }), onClick: () => {
+                s == null || s.requestCast(), O(!1);
+              } }),
+              (U = l.settings) == null ? void 0 : U.map((u, Q) => u.switch !== void 0 ? /* @__PURE__ */ t("div", { className: "px-1", children: /* @__PURE__ */ t(
+                X,
+                {
+                  label: u.html,
+                  icon: u.icon,
+                  checked: u.switch,
+                  tooltip: u.tooltip,
+                  onChange: (Ss) => {
+                    u.onSwitch && u.onSwitch(u);
+                  }
+                }
+              ) }, `cust-${Q}`) : /* @__PURE__ */ t(
+                S,
+                {
+                  label: u.html,
+                  icon: u.icon,
+                  onClick: () => {
+                    u.click ? u.click() : u.onClick && u.onClick(), O(!1);
+                  }
+                },
+                `cust-${Q}`
+              )),
+              /* @__PURE__ */ t(ut, {}),
+              /* @__PURE__ */ t(S, { label: "Appearance", icon: /* @__PURE__ */ t(gt, { className: "w-4 h-4" }), onClick: () => T("appearance"), hasSubmenu: !0 })
+            ] }),
+            ["speed", "quality", "audio", "boost", "party", "appearance", "sources", "flip", "ratio"].includes(A) && /* @__PURE__ */ h("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
+              A === "sources" && /* @__PURE__ */ h(R, { children: [
+                /* @__PURE__ */ t(H, { label: "Select Source", onBack: () => T("main") }),
+                a.sources.map((u, Q) => /* @__PURE__ */ t(S, { label: u.name || `Source ${Q + 1}`, value: u.type, active: a.currentSourceIndex === Q, onClick: () => s == null ? void 0 : s.switchSource(Q) }, Q))
+              ] }),
+              A === "speed" && /* @__PURE__ */ h(R, { children: [
+                /* @__PURE__ */ t(H, { label: "Speed", onBack: () => T("main") }),
+                [0.5, 1, 1.5, 2].map((u) => /* @__PURE__ */ t(S, { label: `${u}x`, active: a.playbackRate === u, onClick: () => s.video.playbackRate = u }, u))
+              ] }),
+              A === "quality" && /* @__PURE__ */ h(R, { children: [
+                /* @__PURE__ */ t(H, { label: "Quality", onBack: () => T("main") }),
+                /* @__PURE__ */ t(S, { label: "Auto", active: a.currentQuality === -1, onClick: () => s == null ? void 0 : s.setQuality(-1) }),
+                a.qualityLevels.map((u) => /* @__PURE__ */ t(S, { label: `${u.height}p`, value: `${Math.round(u.bitrate / 1e3)}k`, active: a.currentQuality === u.index, onClick: () => s == null ? void 0 : s.setQuality(u.index) }, u.index))
+              ] }),
+              A === "audio" && /* @__PURE__ */ h(R, { children: [
+                /* @__PURE__ */ t(H, { label: "Audio Track", onBack: () => T("main") }),
+                a.audioTracks.length === 0 && /* @__PURE__ */ t("div", { className: "px-4 py-3 text-zinc-500 text-xs text-center", children: "No tracks available" }),
+                a.audioTracks.map((u) => /* @__PURE__ */ t(S, { label: u.label, value: u.language, active: a.currentAudioTrack === u.index, onClick: () => s == null ? void 0 : s.setAudioTrack(u.index) }, u.index))
+              ] }),
+              A === "boost" && /* @__PURE__ */ h(R, { children: [
+                /* @__PURE__ */ t(H, { label: "Audio Boost", onBack: () => T("main") }),
+                [1, 1.5, 2, 3].map((u) => /* @__PURE__ */ t(S, { label: u === 1 ? "Off" : `${u}x`, active: a.audioGain === u, onClick: () => s == null ? void 0 : s.setAudioGain(u) }, u))
+              ] }),
+              A === "flip" && /* @__PURE__ */ h(R, { children: [
+                /* @__PURE__ */ t(H, { label: "Video Flip", onBack: () => T("main") }),
+                /* @__PURE__ */ h("div", { className: "p-2 space-y-1", children: [
+                  /* @__PURE__ */ t(X, { label: "Horizontal Flip", checked: a.flipState.horizontal, onChange: () => s == null ? void 0 : s.setFlip("horizontal") }),
+                  /* @__PURE__ */ t(X, { label: "Vertical Flip", checked: a.flipState.vertical, onChange: () => s == null ? void 0 : s.setFlip("vertical") })
+                ] })
+              ] }),
+              A === "ratio" && /* @__PURE__ */ h(R, { children: [
+                /* @__PURE__ */ t(H, { label: "Aspect Ratio", onBack: () => T("main") }),
+                ["default", "16:9", "4:3"].map((u) => /* @__PURE__ */ t(S, { label: u === "default" ? "Default" : u, active: a.aspectRatio === u, onClick: () => s == null ? void 0 : s.setAspectRatio(u) }, u))
+              ] }),
+              A === "party" && /* @__PURE__ */ h(R, { children: [
+                /* @__PURE__ */ t(H, { label: "Watch Party", onBack: () => T("main") }),
+                /* @__PURE__ */ h("div", { className: "p-4 space-y-3", children: [
+                  /* @__PURE__ */ t("p", { className: "text-xs text-zinc-400 leading-relaxed", children: "Create a synchronized room on WatchParty.me to watch together." }),
+                  /* @__PURE__ */ t("a", { href: `https://www.watchparty.me/create?video=${encodeURIComponent(((rt = a.sources[a.currentSourceIndex]) == null ? void 0 : rt.url) || e || "")}`, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center w-full py-2.5 bg-[var(--accent)] hover:opacity-90 text-white font-medium transition-opacity text-xs", style: { borderRadius: "var(--radius)" }, children: "Create Room" })
+                ] })
+              ] }),
+              A === "appearance" && /* @__PURE__ */ h(R, { children: [
+                /* @__PURE__ */ t(H, { label: "Appearance", onBack: () => T("main") }),
+                /* @__PURE__ */ h("div", { className: "pb-1", children: [
+                  /* @__PURE__ */ t(J, { title: "Theme", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-2 gap-2 px-3", children: ks.map((u) => /* @__PURE__ */ t("button", { onClick: () => s == null ? void 0 : s.setAppearance({ theme: u.value, themeColor: u.color }), className: `py-2 text-xs font-bold uppercase tracking-wide transition-colors border-[length:var(--border-width)] border-white/10 ${a.theme === u.value ? "bg-[var(--accent)] text-white" : "bg-white/5 text-zinc-400 hover:text-white"}`, style: { borderRadius: "var(--radius)" }, children: u.label }, u.value)) }) }),
+                  /* @__PURE__ */ t(J, { title: "Icon Size", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-3 gap-1 px-3", children: ["small", "medium", "large"].map((u) => /* @__PURE__ */ t("button", { onClick: () => s == null ? void 0 : s.setAppearance({ iconSize: u }), className: `py-1.5 text-xs font-medium transition-colors ${a.iconSize === u ? "bg-white text-black" : "bg-white/5 text-zinc-400 hover:text-zinc-200"}`, style: { borderRadius: "var(--radius)" }, children: u.charAt(0).toUpperCase() + u.slice(1) }, u)) }) }),
+                  /* @__PURE__ */ h(J, { title: "Theme Color", children: [
+                    /* @__PURE__ */ t("div", { className: "grid grid-cols-6 gap-2 px-3", children: ws.map((u) => /* @__PURE__ */ t("button", { title: u.label, onClick: () => s == null ? void 0 : s.setAppearance({ themeColor: u.value }), className: `w-6 h-6 transition-transform hover:scale-110 ${a.themeColor === u.value ? "ring-2 ring-white scale-110" : "ring-1 ring-white/10"}`, style: { backgroundColor: u.value, borderRadius: "var(--radius-full)" }, children: a.themeColor === u.value && /* @__PURE__ */ t(Se, { className: "w-3 h-3 text-white mx-auto stroke-[3]" }) }, u.value)) }),
+                    /* @__PURE__ */ t("div", { className: "px-3 pt-4", children: /* @__PURE__ */ h("div", { className: "flex items-center gap-3 bg-white/5 p-2 hover:bg-white/10 transition-colors group", style: { borderRadius: "var(--radius)" }, children: [
+                      /* @__PURE__ */ t("div", { className: "relative w-6 h-6 overflow-hidden ring-1 ring-white/20", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ t("input", { type: "color", value: a.themeColor, onChange: (u) => s == null ? void 0 : s.setAppearance({ themeColor: u.target.value }), className: "absolute inset-[-4px] w-[150%] h-[150%] cursor-pointer p-0 border-0" }) }),
+                      /* @__PURE__ */ t("span", { className: "text-xs text-zinc-400 font-medium group-hover:text-zinc-200", children: "Custom Color" }),
+                      /* @__PURE__ */ t("span", { className: "text-[10px] font-mono text-zinc-500 ml-auto uppercase", children: a.themeColor })
+                    ] }) })
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }) })
+        ] }, "settings");
+      default:
+        return null;
+    }
+  }, Ot = ve(() => {
+    const c = [
+      // Loop (Playback Group)
+      { html: "Playback", isLabel: !0 },
+      {
+        html: "Loop",
+        checked: a.isLooping,
+        onClick: () => s == null ? void 0 : s.toggleLoop()
+      },
+      { separator: !0 },
+      // Flip (Transform Group)
+      { html: "Transform", isLabel: !0 },
+      { html: "Flip Horizontal", onClick: () => s == null ? void 0 : s.setFlip("horizontal") },
+      { html: "Flip Vertical", onClick: () => s == null ? void 0 : s.setFlip("vertical") },
+      { separator: !0 },
+      // Aspect Ratio Group
+      { html: "Aspect Ratio", isLabel: !0 },
+      { html: "Default", checked: a.aspectRatio === "default", onClick: () => s == null ? void 0 : s.setAspectRatio("default") },
+      { html: "16:9", checked: a.aspectRatio === "16:9", onClick: () => s == null ? void 0 : s.setAspectRatio("16:9") },
+      { html: "4:3", checked: a.aspectRatio === "4:3", onClick: () => s == null ? void 0 : s.setAspectRatio("4:3") },
+      { separator: !0 },
+      // Stats
+      {
+        html: "Video Info",
+        icon: /* @__PURE__ */ t(fs, { className: "w-3.5 h-3.5" }),
+        onClick: () => Re(!0)
+      },
+      { separator: !0 }
+    ];
+    return l.contextmenu && c.push(...l.contextmenu), c.push({
+      html: /* @__PURE__ */ t("span", { className: "text-zinc-500 text-xs font-semibold tracking-wide", children: "StrataPlayer" }),
+      disabled: !0
+    }), c.push({
+      html: "Close",
+      onClick: (f) => f(),
+      // Wrapper handles close
+      icon: /* @__PURE__ */ t("div", { className: "text-red-400", children: /* @__PURE__ */ h("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ t("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ t("path", { d: "m6 6 12 12" })
+      ] }) })
+    }), c;
+  }, [l.contextmenu, a.aspectRatio, a.isLooping, s]);
+  return /* @__PURE__ */ h(
     "div",
     {
-      ref: f,
-      className: "group relative w-full h-full bg-black overflow-hidden select-none font-[family-name:var(--font-main)] outline-none touch-none rounded-[var(--radius)] text-zinc-100 strata-player-reset",
-      onMouseMove: Ce,
+      id: l.id,
+      ref: Y,
+      className: `group relative w-full h-full bg-black overflow-hidden select-none font-[family-name:var(--font-main)] outline-none rounded-[var(--radius)] text-zinc-100 strata-player-reset ${l.container || ""}`,
+      style: { touchAction: "manipulation", "--accent": a.themeColor },
+      onMouseMove: Ue,
       onMouseLeave: () => {
-        o.isPlaying && !E && !I && Q(!1);
+        a.isPlaying && !L && !$ && s && s.setControlsVisible(!1);
       },
+      onMouseDown: _e,
+      onMouseUp: Ge,
+      onTouchStart: _e,
+      onTouchEnd: Ge,
+      onContextMenu: Pt,
       tabIndex: 0,
       role: "region",
       "aria-label": "Video Player",
-      "data-theme": o.theme,
-      style: { "--accent": o.themeColor },
+      "data-theme": a.theme,
       children: [
         /* @__PURE__ */ t("style", { children: `
                 [data-theme="default"] {
@@ -1693,7 +2385,6 @@ const Gt = v("VolumeX", [
                     text-shadow: 0 0 5px var(--accent);
                 }
                 
-                /* Specific Theme Overrides */
                 [data-theme="pixel"] .strata-control-btn {
                     border: 2px solid white;
                     background: black;
@@ -1731,255 +2422,162 @@ const Gt = v("VolumeX", [
                     border-radius: var(--radius-sm);
                     font-family: var(--font-main);
                 }
+                
+                /* Override Backdrop for specific themes if needed */
+                [data-theme="pixel"] .strata-backdrop { backdrop-filter: none; background: #000; }
+                [data-theme="hacker"] .strata-backdrop { backdrop-filter: none; background: #000; }
             ` }),
-        o.theme === "hacker" && /* @__PURE__ */ t("div", { className: "strata-scanlines" }),
-        !s && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center bg-zinc-950 z-50", children: /* @__PURE__ */ t(oe, { className: "w-10 h-10 text-[var(--accent)] animate-spin" }) }),
-        s && /* @__PURE__ */ d(A, { children: [
-          /* @__PURE__ */ t(vi, { notifications: o.notifications }),
-          /* @__PURE__ */ t(bi, { cues: o.activeCues, settings: o.subtitleSettings }),
-          /* @__PURE__ */ t("div", { className: "absolute inset-0 z-0", onClick: Je, "aria-hidden": "true" }),
-          a && !C && /* @__PURE__ */ t(
+        a.theme === "hacker" && /* @__PURE__ */ t("div", { className: "strata-scanlines" }),
+        !s && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center bg-zinc-950 z-50", children: /* @__PURE__ */ t(Ce, { className: "w-10 h-10 text-[var(--accent)] animate-spin" }) }),
+        s && /* @__PURE__ */ h(R, { children: [
+          (it = l.layers) == null ? void 0 : it.map((c, f) => /* @__PURE__ */ t(
+            "div",
+            {
+              className: `absolute inset-0 pointer-events-none z-10 ${c.className || ""}`,
+              style: c.style,
+              children: /* @__PURE__ */ t(ht, { content: c.html || "", className: "w-full h-full" })
+            },
+            f
+          )),
+          /* @__PURE__ */ t(ps, { notifications: a.notifications }),
+          /* @__PURE__ */ t(bs, { cues: a.activeCues, settings: a.subtitleSettings }),
+          /* @__PURE__ */ t("div", { className: "absolute inset-0 z-0", onClick: $t, "aria-hidden": "true" }),
+          n && !ae && /* @__PURE__ */ t(
             "div",
             {
               className: "absolute inset-0 bg-cover bg-center z-[5] pointer-events-none",
-              style: { backgroundImage: `url(${a})` }
+              style: { backgroundImage: `url(${n})` }
+            }
+          ),
+          K.visible && /* @__PURE__ */ t(
+            xs,
+            {
+              x: K.x,
+              y: K.y,
+              items: Ot,
+              onClose: () => le({ ...K, visible: !1 }),
+              containerWidth: Nt,
+              containerHeight: Me
+            }
+          ),
+          zt && s && /* @__PURE__ */ t(ys, { player: s, onClose: () => Re(!1) }),
+          he && /* @__PURE__ */ h("div", { className: "absolute top-8 left-1/2 -translate-x-1/2 bg-black/50 backdrop-blur-md px-4 py-2 rounded-full flex items-center gap-2 z-40 animate-in fade-in zoom-in duration-200", children: [
+            /* @__PURE__ */ t(hs, { className: "w-4 h-4 text-[var(--accent)] fill-current" }),
+            /* @__PURE__ */ t("span", { className: "text-xs font-bold tracking-wider", children: "2x Speed" })
+          ] }),
+          p && a.controlsVisible && /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: (c) => {
+                c.stopPropagation(), s.toggleLock();
+              },
+              className: `absolute left-4 md:left-6 bottom-24 md:bottom-28 z-50 p-3 rounded-full bg-black/50 backdrop-blur-md border border-white/10 text-white transition-all active:scale-95 ${a.isLocked ? "text-[var(--accent)] bg-white/10" : "hover:bg-white/10"}`,
+              children: a.isLocked ? /* @__PURE__ */ t(cs, { className: "w-5 h-5" }) : /* @__PURE__ */ t(ds, { className: "w-5 h-5" })
             }
           ),
-          U && /* @__PURE__ */ t("div", { className: `absolute top-0 bottom-0 flex items-center justify-center w-[35%] z-20 bg-white/5 backdrop-blur-[1px] animate-out fade-out duration-500 ${U.type === "rewind" ? "left-0 rounded-r-[4rem]" : "right-0 rounded-l-[4rem]"}`, onAnimationEnd: () => te(null), children: /* @__PURE__ */ d("div", { className: "flex flex-col items-center text-white drop-shadow-lg", children: [
-            U.type === "rewind" ? /* @__PURE__ */ t(Be, { className: "w-12 h-12 animate-pulse" }) : /* @__PURE__ */ t(Ve, { className: "w-12 h-12 animate-pulse" }),
-            /* @__PURE__ */ t("span", { className: "font-bold text-sm mt-2 font-mono", children: U.type === "rewind" ? "-10s" : "+10s" })
-          ] }) }, U.id),
-          o.isBuffering && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ t(oe, { className: "w-12 h-12 text-[var(--accent)] animate-spin drop-shadow-lg" }) }),
-          o.error && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center z-30 bg-black/90 backdrop-blur-md animate-in fade-in", children: /* @__PURE__ */ d("div", { className: "flex flex-col items-center gap-4 text-red-500 p-8 max-w-md text-center", children: [
+          _ && /* @__PURE__ */ t(
+            "div",
+            {
+              className: `absolute top-0 bottom-0 flex items-center justify-center w-[35%] z-20 bg-white/5 backdrop-blur-[1px] animate-out fade-out duration-500 fill-mode-forwards ${_.type === "rewind" ? "left-0 rounded-r-[4rem]" : "right-0 rounded-l-[4rem]"}`,
+              onAnimationEnd: () => ie(null),
+              children: /* @__PURE__ */ h("div", { className: "flex flex-col items-center text-white drop-shadow-lg", children: [
+                _.type === "rewind" ? /* @__PURE__ */ t(lt, { className: "w-12 h-12 animate-pulse" }) : /* @__PURE__ */ t(ct, { className: "w-12 h-12 animate-pulse" }),
+                /* @__PURE__ */ t("span", { className: "font-bold text-sm mt-2 font-mono", children: _.type === "rewind" ? "-10s" : "+10s" })
+              ] })
+            },
+            _.id
+          ),
+          a.isBuffering && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ t(Ce, { className: "w-12 h-12 text-[var(--accent)] animate-spin drop-shadow-lg" }) }),
+          a.error && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center z-30 bg-black/90 backdrop-blur-md animate-in fade-in", children: /* @__PURE__ */ h("div", { className: "flex flex-col items-center gap-4 text-red-500 p-8 max-w-md text-center", children: [
             /* @__PURE__ */ t("span", { className: "text-5xl mb-2", children: "⚠️" }),
             /* @__PURE__ */ t("h3", { className: "text-xl font-bold text-white", children: "Playback Error" }),
-            /* @__PURE__ */ t("p", { className: "text-zinc-400 text-sm", children: o.error }),
-            /* @__PURE__ */ t("button", { onClick: () => s.load(s.store.get().sources[s.store.get().currentSourceIndex] || { url: e || "" }, p), className: "px-6 py-2 bg-[var(--accent)] text-white font-medium rounded-full hover:opacity-90 transition-opacity mt-4 shadow-lg", children: "Try Again" })
+            /* @__PURE__ */ t("p", { className: "text-zinc-400 text-sm", children: a.error }),
+            /* @__PURE__ */ t("button", { onClick: () => s.load(s.store.get().sources[s.store.get().currentSourceIndex] || { url: e || "" }, b), className: "px-6 py-2 bg-[var(--accent)] text-white font-medium rounded-full hover:opacity-90 transition-opacity mt-4 shadow-lg", children: "Try Again" })
           ] }) }),
-          (!o.isPlaying && !o.isBuffering && !o.error || Y) && !o.isBuffering ? /* @__PURE__ */ t("div", { className: `absolute inset-0 flex items-center justify-center z-10 transition-opacity duration-300 pointer-events-none ${Y || !o.isPlaying ? "opacity-100" : "opacity-0"}`, children: /* @__PURE__ */ d("div", { className: "flex items-center gap-8 md:gap-16 pointer-events-auto", children: [
-            /* @__PURE__ */ t("button", { onClick: (r) => {
-              r.stopPropagation(), $(!1), B(!1), X("rewind");
-            }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all active:scale-110 text-white/90 focus:outline-none backdrop-blur-sm ${q.skipBtn}`, children: /* @__PURE__ */ t(Be, { className: q.skipIcon }) }),
-            /* @__PURE__ */ t("button", { onClick: (r) => {
-              r.stopPropagation(), $(!1), B(!1), s.togglePlay();
-            }, className: `group relative flex items-center justify-center rounded-full bg-white/10 hover:bg-[var(--accent)] border border-white/10 shadow-2xl transition-all hover:scale-105 active:scale-110 duration-75 focus:outline-none backdrop-blur-md ${q.playBtn}`, children: o.isPlaying ? /* @__PURE__ */ t(Ae, { className: `${q.playIcon} text-white fill-current` }) : /* @__PURE__ */ t(Le, { className: `${q.playIcon} text-white ml-1 fill-current` }) }),
-            /* @__PURE__ */ t("button", { onClick: (r) => {
-              r.stopPropagation(), $(!1), B(!1), X("forward");
-            }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all active:scale-110 text-white/90 focus:outline-none backdrop-blur-sm ${q.skipBtn}`, children: /* @__PURE__ */ t(Ve, { className: q.skipIcon }) })
-          ] }) }) : null,
-          /* @__PURE__ */ d("div", { className: `absolute inset-x-0 bottom-0 z-30 transition-all duration-300 px-4 md:px-6 pb-4 md:pb-6 pt-24 bg-gradient-to-t from-black/95 via-black/70 to-transparent ${Y ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, onClick: (r) => {
-            r.target === r.currentTarget && ($(!1), B(!1)), r.stopPropagation();
-          }, children: [
-            /* @__PURE__ */ d(
-              "div",
-              {
-                ref: ie,
-                className: "relative w-full h-3 group/slider mb-3 cursor-pointer touch-none flex items-center",
-                onMouseMove: Xe,
-                onMouseLeave: () => {
-                  xe(null), we(null);
-                },
-                onMouseDown: Ne,
-                onTouchStart: Ne,
-                children: [
-                  ye !== null && /* @__PURE__ */ d("div", { className: "absolute bottom-full mb-1.5 flex flex-col items-center transform -translate-x-1/2 z-40 pointer-events-none transition-opacity duration-150", style: { left: `clamp(70px, ${_e}%, calc(100% - 70px))` }, children: [
-                    V && /* @__PURE__ */ t("div", { className: "bg-black/90 border border-white/10 shadow-2xl overflow-hidden backdrop-blur-sm", style: { width: `${V.w * 0.5}px`, height: `${V.h * 0.5}px`, borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t("div", { style: { backgroundImage: `url("${V.url}")`, width: `${V.w}px`, height: `${V.h}px`, backgroundPosition: `-${V.x}px -${V.y}px`, backgroundRepeat: "no-repeat", transform: "scale(0.5)", transformOrigin: "top left" } }) }),
-                    /* @__PURE__ */ t("div", { className: "strata-tooltip px-2 py-0.5 text-[11px] font-bold font-mono shadow-lg tabular-nums mt-1", children: se(ye) })
-                  ] }),
-                  /* @__PURE__ */ d("div", { className: "w-full h-1 bg-white/20 overflow-hidden relative backdrop-blur-sm border-[length:var(--border-width)] border-white/10", style: { borderRadius: "var(--radius-full)" }, children: [
-                    o.duration > 0 && o.buffered.map((r, m) => /* @__PURE__ */ t("div", { className: "absolute top-0 bottom-0 bg-white/20", style: { left: `${r.start / o.duration * 100}%`, width: `${(r.end - r.start) / o.duration * 100}%` } }, m)),
-                    /* @__PURE__ */ t("div", { className: "absolute left-0 top-0 bottom-0 bg-[var(--accent)]", style: { width: `${(Z ? ee : o.currentTime) / o.duration * 100}%` } })
-                  ] }),
-                  /* @__PURE__ */ t(
-                    "div",
-                    {
-                      className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3.5 h-3.5 bg-white shadow-md scale-0 group-hover/slider:scale-100 transition-transform duration-100 z-10",
-                      style: {
-                        left: `${(Z ? ee : o.currentTime) / o.duration * 100}%`,
-                        borderRadius: "var(--radius-full)"
-                      }
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ t("button", { onClick: () => s.togglePlay(), className: `strata-control-btn text-zinc-300 hover:text-white transition-colors hover:bg-white/10 focus:outline-none ${F}`, style: { borderRadius: "var(--radius)" }, children: o.isPlaying ? /* @__PURE__ */ t(Ae, { className: `${L} fill-current` }) : /* @__PURE__ */ t(Le, { className: `${L} fill-current` }) }),
-                /* @__PURE__ */ d("div", { className: "flex items-center gap-2 group/vol relative", onMouseEnter: () => ve(!0), onMouseLeave: () => ve(!1), children: [
-                  /* @__PURE__ */ t("button", { onClick: () => s.toggleMute(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 focus:outline-none ${F}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Ke, { className: L }) }),
-                  /* @__PURE__ */ t("div", { className: `relative h-8 flex items-center transition-all duration-300 ease-out overflow-hidden ${fe || me ? "w-28 opacity-100 ml-1" : "w-0 opacity-0"}`, children: /* @__PURE__ */ d("div", { ref: ae, className: "relative w-full h-full flex items-center cursor-pointer px-2", onMouseDown: ze, onTouchStart: ze, children: [
-                    /* @__PURE__ */ t("div", { className: "w-full h-1 bg-white/20 overflow-hidden", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ t("div", { className: "h-full bg-white", style: { width: `${(o.isMuted ? 0 : o.volume) * 100}%`, borderRadius: "var(--radius-full)" } }) }),
-                    /* @__PURE__ */ t("div", { className: "absolute h-3 w-3 bg-white shadow-md top-1/2 -translate-y-1/2 pointer-events-none", style: { left: `calc(${(o.isMuted ? 0 : o.volume) * 100}% * 0.85 + 4px)`, borderRadius: "var(--radius-full)" } })
-                  ] }) }),
-                  (fe || me) && /* @__PURE__ */ t(
-                    "div",
-                    {
-                      className: "strata-tooltip absolute bottom-full mb-2 px-1.5 py-0.5 rounded text-[10px] font-bold font-mono shadow-lg pointer-events-none whitespace-nowrap z-50 transform -translate-x-1/2",
-                      style: { left: `calc(52px + ${(o.isMuted ? 0 : o.volume) * 80}px)` },
-                      children: o.isMuted ? "0%" : `${Math.round(o.volume * 100)}%`
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ d("div", { className: "text-xs font-medium text-zinc-400 font-mono select-none hidden sm:block tabular-nums", children: [
-                  se(Z ? ee : o.currentTime),
-                  " ",
-                  /* @__PURE__ */ t("span", { className: "text-zinc-600", children: "/" }),
-                  " ",
-                  se(o.duration)
-                ] })
-              ] }),
-              /* @__PURE__ */ d("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ d("div", { className: "relative", children: [
-                  /* @__PURE__ */ t("button", { onClick: (r) => {
-                    r.stopPropagation(), B(!I), $(!1);
-                  }, className: `strata-control-btn transition-colors focus:outline-none ${F} ${I ? "text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Zt, { className: L }) }),
-                  de.isMounted && /* @__PURE__ */ t(
-                    yi,
-                    {
-                      tracks: o.subtitleTracks,
-                      current: o.currentSubtitle,
-                      onSelect: (r) => s.setSubtitle(r),
-                      onUpload: (r) => s.addTextTrack(r, r.name),
-                      onClose: () => B(!1),
-                      settings: o.subtitleSettings,
-                      onSettingsChange: (r) => s.updateSubtitleSettings(r),
-                      onReset: () => s.resetSubtitleSettings(),
-                      offset: o.subtitleOffset,
-                      onOffsetChange: (r) => s.setSubtitleOffset(r),
-                      maxHeight: Te,
-                      animationClass: de.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ t("button", { onClick: () => s.togglePip(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${F}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Yt, { className: L }) }),
-                /* @__PURE__ */ t("button", { onClick: () => s.download(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${F}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(ei, { className: L }) }),
-                /* @__PURE__ */ d("div", { className: "relative", children: [
-                  /* @__PURE__ */ t("button", { onClick: (r) => {
-                    r.stopPropagation(), $(!E), B(!1), N("main");
-                  }, className: `strata-control-btn transition-all duration-300 focus:outline-none ${F} ${E ? "rotate-90 text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t(Kt, { className: L }) }),
-                  ce.isMounted && /* @__PURE__ */ t(We, { onClose: () => $(!1), align: "right", maxHeight: Te, className: ce.isVisible ? "opacity-100 translate-y-0 scale-100" : "opacity-0 translate-y-2 scale-95", children: /* @__PURE__ */ d("div", { className: "w-full", children: [
-                    P === "main" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
-                      /* @__PURE__ */ t("div", { className: "px-3 py-2 mb-1 border-b border-white/5 font-bold text-zinc-400 uppercase text-[11px] tracking-wider flex justify-between items-center bg-white/5 sticky top-0 z-10 backdrop-blur-md", style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t("span", { children: "Settings" }) }),
-                      o.sources.length > 1 && /* @__PURE__ */ t(k, { label: "Source", value: ((Me = o.sources[o.currentSourceIndex]) == null ? void 0 : Me.name) || `Source ${o.currentSourceIndex + 1}`, onClick: () => N("sources"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(k, { label: "Speed", value: `${o.playbackRate}x`, onClick: () => N("speed"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(k, { label: "Quality", value: o.currentQuality === -1 ? "Auto" : `${(Ee = o.qualityLevels[o.currentQuality]) == null ? void 0 : Ee.height}p`, onClick: () => N("quality"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(k, { label: "Audio", value: ((Ie = o.audioTracks[o.currentAudioTrack]) == null ? void 0 : Ie.label) || "Default", onClick: () => N("audio"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(k, { label: "Audio Boost", value: o.audioGain > 1 ? `${o.audioGain}x` : "Off", onClick: () => N("boost"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(Oe, {}),
-                      /* @__PURE__ */ t(k, { label: "Watch Party", icon: /* @__PURE__ */ t(ri, { className: "w-4 h-4" }), onClick: () => N("party"), hasSubmenu: !0 }),
-                      /* @__PURE__ */ t(k, { label: "Cast to Device", icon: /* @__PURE__ */ t(ai, { className: "w-4 h-4" }), onClick: () => {
-                        s.requestCast(), $(!1);
-                      } }),
-                      /* @__PURE__ */ t(Oe, {}),
-                      /* @__PURE__ */ t(k, { label: "Appearance", icon: /* @__PURE__ */ t(Ge, { className: "w-4 h-4" }), onClick: () => N("appearance"), hasSubmenu: !0 })
-                    ] }),
-                    ["speed", "quality", "audio", "boost", "party", "appearance", "sources"].includes(P) && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
-                      P === "sources" && /* @__PURE__ */ d(A, { children: [
-                        /* @__PURE__ */ t(j, { label: "Select Source", onBack: () => N("main") }),
-                        o.sources.map((r, m) => /* @__PURE__ */ t(k, { label: r.name || `Source ${m + 1}`, value: r.type, active: o.currentSourceIndex === m, onClick: () => s.switchSource(m) }, m))
-                      ] }),
-                      P === "speed" && /* @__PURE__ */ d(A, { children: [
-                        /* @__PURE__ */ t(j, { label: "Speed", onBack: () => N("main") }),
-                        [0.5, 1, 1.5, 2].map((r) => /* @__PURE__ */ t(k, { label: `${r}x`, active: o.playbackRate === r, onClick: () => s.video.playbackRate = r }, r))
-                      ] }),
-                      P === "quality" && /* @__PURE__ */ d(A, { children: [
-                        /* @__PURE__ */ t(j, { label: "Quality", onBack: () => N("main") }),
-                        /* @__PURE__ */ t(k, { label: "Auto", active: o.currentQuality === -1, onClick: () => s.setQuality(-1) }),
-                        o.qualityLevels.map((r) => /* @__PURE__ */ t(k, { label: `${r.height}p`, value: `${Math.round(r.bitrate / 1e3)}k`, active: o.currentQuality === r.index, onClick: () => s.setQuality(r.index) }, r.index))
-                      ] }),
-                      P === "audio" && /* @__PURE__ */ d(A, { children: [
-                        /* @__PURE__ */ t(j, { label: "Audio Track", onBack: () => N("main") }),
-                        o.audioTracks.length === 0 && /* @__PURE__ */ t("div", { className: "px-4 py-3 text-zinc-500 text-xs text-center", children: "No tracks available" }),
-                        o.audioTracks.map((r) => /* @__PURE__ */ t(k, { label: r.label, value: r.language, active: o.currentAudioTrack === r.index, onClick: () => s.setAudioTrack(r.index) }, r.index))
-                      ] }),
-                      P === "boost" && /* @__PURE__ */ d(A, { children: [
-                        /* @__PURE__ */ t(j, { label: "Audio Boost", onBack: () => N("main") }),
-                        [1, 1.5, 2, 3].map((r) => /* @__PURE__ */ t(k, { label: r === 1 ? "Off" : `${r}x`, active: o.audioGain === r, onClick: () => s.setAudioGain(r) }, r))
+          !a.isLocked && (!a.isPlaying && !a.isBuffering && !a.error || a.controlsVisible) && !a.isBuffering ? /* @__PURE__ */ t(
+            "div",
+            {
+              className: `absolute inset-0 flex items-center justify-center z-10 transition-opacity duration-300 pointer-events-none ${a.controlsVisible || !a.isPlaying ? "opacity-100" : "opacity-0"}`,
+              children: /* @__PURE__ */ h("div", { className: "flex items-center gap-8 md:gap-16 pointer-events-auto", children: [
+                /* @__PURE__ */ t("button", { onClick: (c) => {
+                  c.stopPropagation(), O(!1), W(!1), se("rewind");
+                }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all active:scale-110 text-white/90 focus:outline-none backdrop-blur-sm ${G.skipBtn}`, children: /* @__PURE__ */ t(lt, { className: G.skipIcon }) }),
+                /* @__PURE__ */ t("button", { onClick: (c) => {
+                  c.stopPropagation(), O(!1), W(!1), s.togglePlay();
+                }, className: `group relative flex items-center justify-center rounded-full bg-white/10 hover:bg-[var(--accent)] border border-white/10 shadow-2xl transition-all hover:scale-105 active:scale-110 duration-75 focus:outline-none backdrop-blur-md ${G.playBtn}`, children: a.isPlaying ? /* @__PURE__ */ t(ot, { className: `${G.playIcon} text-white fill-current` }) : /* @__PURE__ */ t(at, { className: `${G.playIcon} text-white ml-1 fill-current` }) }),
+                /* @__PURE__ */ t("button", { onClick: (c) => {
+                  c.stopPropagation(), O(!1), W(!1), se("forward");
+                }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all active:scale-110 text-white/90 focus:outline-none backdrop-blur-sm ${G.skipBtn}`, children: /* @__PURE__ */ t(ct, { className: G.skipIcon }) })
+              ] })
+            }
+          ) : null,
+          /* @__PURE__ */ h(
+            "div",
+            {
+              className: `absolute inset-x-0 bottom-0 z-30 transition-all duration-300 px-4 md:px-6 pb-4 md:pb-6 pt-24 bg-gradient-to-t from-black/95 via-black/70 to-transparent ${Ft ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"}`,
+              onClick: (c) => {
+                c.target === c.currentTarget && (O(!1), W(!1), te(!1)), c.stopPropagation();
+              },
+              children: [
+                !l.isLive && /* @__PURE__ */ h(
+                  "div",
+                  {
+                    ref: fe,
+                    className: "relative w-full h-3 group/slider mb-3 cursor-pointer touch-none flex items-center",
+                    onMouseMove: Lt,
+                    onMouseLeave: () => {
+                      je(null), He(null);
+                    },
+                    onMouseDown: Qe,
+                    onTouchStart: Qe,
+                    children: [
+                      (st = l.highlight) == null ? void 0 : st.map((c, f) => /* @__PURE__ */ t("div", { className: "absolute top-1/2 -translate-y-1/2 w-1.5 h-1.5 bg-yellow-400 rounded-full z-10 pointer-events-none", style: { left: `${c.time / a.duration * 100}%` }, title: c.text }, f)),
+                      Oe !== null && /* @__PURE__ */ h("div", { className: "absolute bottom-full mb-1.5 flex flex-col items-center transform -translate-x-1/2 z-40 pointer-events-none transition-opacity duration-150", style: { left: `clamp(70px, ${It}%, calc(100% - 70px))` }, children: [
+                        q && /* @__PURE__ */ t("div", { className: "bg-black/90 border border-white/10 shadow-2xl overflow-hidden backdrop-blur-sm", style: { width: `${q.w * 0.5}px`, height: `${q.h * 0.5}px`, borderRadius: "var(--radius)" }, children: /* @__PURE__ */ t("div", { style: { backgroundImage: `url("${q.url}")`, width: `${q.w}px`, height: `${q.h}px`, backgroundPosition: `-${q.x}px -${q.y}px`, backgroundRepeat: "no-repeat", transform: "scale(0.5)", transformOrigin: "top left" } }) }),
+                        /* @__PURE__ */ t("div", { className: "strata-tooltip px-2 py-0.5 text-[11px] font-bold font-mono shadow-lg tabular-nums mt-1", children: xe(Oe) })
                       ] }),
-                      P === "party" && /* @__PURE__ */ d(A, { children: [
-                        /* @__PURE__ */ t(j, { label: "Watch Party", onBack: () => N("main") }),
-                        /* @__PURE__ */ d("div", { className: "p-4 space-y-3", children: [
-                          /* @__PURE__ */ t("p", { className: "text-xs text-zinc-400 leading-relaxed", children: "Create a synchronized room on WatchParty.me to watch together." }),
-                          /* @__PURE__ */ t("a", { href: `https://www.watchparty.me/create?video=${encodeURIComponent(((Re = o.sources[o.currentSourceIndex]) == null ? void 0 : Re.url) || e || "")}`, target: "_blank", rel: "noopener noreferrer", className: "flex items-center justify-center w-full py-2.5 bg-[var(--accent)] hover:opacity-90 text-white font-medium transition-opacity text-xs", style: { borderRadius: "var(--radius)" }, children: "Create Room" })
-                        ] })
+                      /* @__PURE__ */ h("div", { className: "w-full h-1 bg-white/20 overflow-hidden relative backdrop-blur-sm border-[length:var(--border-width)] border-white/10", style: { borderRadius: "var(--radius-full)" }, children: [
+                        a.duration > 0 && a.buffered.map((c, f) => /* @__PURE__ */ t("div", { className: "absolute top-0 bottom-0 bg-white/20", style: { left: `${c.start / a.duration * 100}%`, width: `${(c.end - c.start) / a.duration * 100}%` } }, f)),
+                        /* @__PURE__ */ t("div", { className: "absolute left-0 top-0 bottom-0 bg-[var(--accent)]", style: { width: `${(ce ? de : a.currentTime) / a.duration * 100}%` } })
                       ] }),
-                      P === "appearance" && /* @__PURE__ */ d(A, { children: [
-                        /* @__PURE__ */ t(j, { label: "Appearance", onBack: () => N("main") }),
-                        /* @__PURE__ */ d("div", { className: "pb-1", children: [
-                          /* @__PURE__ */ t(D, { title: "Theme", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-2 gap-2 px-3", children: wi.map((r) => /* @__PURE__ */ t(
-                            "button",
-                            {
-                              onClick: () => s.setAppearance({ theme: r.value, themeColor: r.color }),
-                              className: `py-2 text-xs font-bold uppercase tracking-wide transition-colors border-[length:var(--border-width)] border-white/10 ${o.theme === r.value ? "bg-[var(--accent)] text-white" : "bg-white/5 text-zinc-400 hover:text-white"}`,
-                              style: { borderRadius: "var(--radius)" },
-                              children: r.label
-                            },
-                            r.value
-                          )) }) }),
-                          /* @__PURE__ */ t(D, { title: "Icon Size", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-3 gap-1 px-3", children: ["small", "medium", "large"].map((r) => /* @__PURE__ */ t(
-                            "button",
-                            {
-                              onClick: () => s.setAppearance({ iconSize: r }),
-                              className: `py-1.5 text-xs font-medium transition-colors ${o.iconSize === r ? "bg-white text-black" : "bg-white/5 text-zinc-400 hover:text-zinc-200"}`,
-                              style: { borderRadius: "var(--radius)" },
-                              children: r.charAt(0).toUpperCase() + r.slice(1)
-                            },
-                            r
-                          )) }) }),
-                          /* @__PURE__ */ d(D, { title: "Theme Color", children: [
-                            /* @__PURE__ */ t("div", { className: "grid grid-cols-6 gap-2 px-3", children: xi.map((r) => /* @__PURE__ */ t(
-                              "button",
-                              {
-                                title: r.label,
-                                onClick: () => s.setAppearance({ themeColor: r.value }),
-                                className: `w-6 h-6 transition-transform hover:scale-110 ${o.themeColor === r.value ? "ring-2 ring-white scale-110" : "ring-1 ring-white/10"}`,
-                                style: { backgroundColor: r.value, borderRadius: "var(--radius-full)" },
-                                children: o.themeColor === r.value && /* @__PURE__ */ t(Ue, { className: "w-3 h-3 text-white mx-auto stroke-[3]" })
-                              },
-                              r.value
-                            )) }),
-                            /* @__PURE__ */ t("div", { className: "px-3 pt-4", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-3 bg-white/5 p-2 hover:bg-white/10 transition-colors group", style: { borderRadius: "var(--radius)" }, children: [
-                              /* @__PURE__ */ t("div", { className: "relative w-6 h-6 overflow-hidden ring-1 ring-white/20", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ t(
-                                "input",
-                                {
-                                  type: "color",
-                                  value: o.themeColor,
-                                  onChange: (r) => s.setAppearance({ themeColor: r.target.value }),
-                                  className: "absolute inset-[-4px] w-[150%] h-[150%] cursor-pointer p-0 border-0"
-                                }
-                              ) }),
-                              /* @__PURE__ */ t("span", { className: "text-xs text-zinc-400 font-medium group-hover:text-zinc-200", children: "Custom Color" }),
-                              /* @__PURE__ */ t("span", { className: "text-[10px] font-mono text-zinc-500 ml-auto uppercase", children: o.themeColor })
-                            ] }) })
-                          ] })
-                        ] })
-                      ] })
-                    ] })
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ t("button", { onClick: () => s.toggleFullscreen(), className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 rounded-lg transition-transform hover:scale-110 focus:outline-none ${F}`, style: { borderRadius: "var(--radius)" }, children: o.isFullscreen ? /* @__PURE__ */ t(Jt, { className: L }) : /* @__PURE__ */ t(Xt, { className: L }) })
-              ] })
-            ] })
-          ] })
+                      /* @__PURE__ */ t(
+                        "div",
+                        {
+                          className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3.5 h-3.5 bg-white shadow-md scale-0 group-hover/slider:scale-100 transition-transform duration-100 z-10",
+                          style: {
+                            left: `${(ce ? de : a.currentTime) / a.duration * 100}%`,
+                            borderRadius: "var(--radius-full)"
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ h("div", { className: "flex items-center justify-between pointer-events-auto", children: [
+                  /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: et.filter((c) => c.position === "left" || c.position === "center").map(tt) }),
+                  /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: et.filter((c) => c.position === "right").map(tt) })
+                ] })
+              ]
+            }
+          )
         ] })
       ]
     }
   );
-}, Mi = (c, e) => {
-  const i = st(c);
-  return i.render($e.createElement(je, e)), {
+}, Rs = (o, e) => {
+  const i = Dt(o);
+  return i.render(we.createElement(mt, e)), {
     unmount: () => {
       i.unmount();
     },
-    update: (a) => {
-      i.render($e.createElement(je, { ...e, ...a }));
+    update: (r) => {
+      i.render(we.createElement(mt, { ...e, ...r }));
     }
   };
 };
 export {
-  ct as StrataCore,
-  je as StrataPlayer,
-  Mi as mountStrataPlayer
+  Qt as StrataCore,
+  mt as StrataPlayer,
+  Rs as mountStrataPlayer
 };
 //# sourceMappingURL=strataplayer.es.js.map