strataplayer 1.2.18 → 1.2.20

package/dist/strataplayer.es.js

@@ -1,46 +1,46 @@
-var li = Object.defineProperty;
-var ci = (i, t, n) => t in i ? li(i, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[t] = n;
-var M = (i, t, n) => ci(i, typeof t != "symbol" ? t + "" : t, n);
-import ce, { useState as S, useEffect as j, useRef as A, useLayoutEffect as ve, useMemo as fe, useSyncExternalStore as di, useCallback as be } from "react";
-import { createRoot as ui } from "react-dom/client";
-import { jsxs as d, jsx as e, Fragment as B } from "react/jsx-runtime";
-import { createPortal as hi } from "react-dom";
-class pi {
+var mi = Object.defineProperty;
+var fi = (n, t, i) => t in n ? mi(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
+var R = (n, t, i) => fi(n, typeof t != "symbol" ? t + "" : t, i);
+import ke, { useState as N, useEffect as Q, useRef as U, useLayoutEffect as Ee, useMemo as xe, useSyncExternalStore as bi, useCallback as $e } from "react";
+import { createRoot as gi } from "react-dom/client";
+import { jsxs as d, jsx as e, Fragment as _ } from "react/jsx-runtime";
+import { createPortal as vi } from "react-dom";
+class xi {
   constructor() {
-    M(this, "events");
+    R(this, "events");
     this.events = /* @__PURE__ */ new Map();
   }
-  on(t, n) {
+  on(t, i) {
     var o;
-    return this.events.has(t) || this.events.set(t, []), (o = this.events.get(t)) == null || o.push(n), () => this.off(t, n);
+    return this.events.has(t) || this.events.set(t, []), (o = this.events.get(t)) == null || o.push(i), () => this.off(t, i);
   }
-  off(t, n) {
+  off(t, i) {
     const o = this.events.get(t);
     o && this.events.set(
       t,
-      o.filter((l) => l !== n)
+      o.filter((r) => r !== i)
     );
   }
-  emit(t, n) {
+  emit(t, i) {
     const o = this.events.get(t);
-    o && o.forEach((l) => l(n));
+    o && o.forEach((r) => r(i));
   }
   destroy() {
     this.events.clear();
   }
 }
-class mi {
+class wi {
   constructor(t) {
-    M(this, "state");
-    M(this, "listeners");
+    R(this, "state");
+    R(this, "listeners");
     this.state = t, this.listeners = /* @__PURE__ */ new Set();
   }
   get() {
     return this.state;
   }
   setState(t) {
-    const n = this.state, o = typeof t == "function" ? t(n) : t;
-    this.state = { ...n, ...o }, this.listeners.forEach((l) => l(this.state, n));
+    const i = this.state, o = typeof t == "function" ? t(i) : t;
+    this.state = { ...i, ...o }, this.listeners.forEach((r) => r(this.state, i));
   }
   subscribe(t) {
     return this.listeners.add(t), () => this.listeners.delete(t);
@@ -49,13 +49,13 @@ class mi {
     this.listeners.clear();
   }
 }
-class fi {
+class yi {
   constructor(t) {
-    M(this, "context", null);
-    M(this, "source", null);
-    M(this, "gainNode", null);
-    M(this, "video");
-    M(this, "isInitialized", !1);
+    R(this, "context", null);
+    R(this, "source", null);
+    R(this, "gainNode", null);
+    R(this, "video");
+    R(this, "isInitialized", !1);
     this.video = t;
   }
   /**
@@ -66,8 +66,8 @@ class fi {
       this.context = new AudioContext(), this.gainNode = this.context.createGain();
       try {
         this.source = this.context.createMediaElementSource(this.video), this.source.connect(this.gainNode), this.gainNode.connect(this.context.destination), this.isInitialized = !0;
-      } catch (n) {
-        console.warn("StrataPlayer: Failed to initialize AudioEngine", n);
+      } catch (i) {
+        console.warn("StrataPlayer: Failed to initialize AudioEngine", i);
       }
     }
   }
@@ -78,67 +78,67 @@ class fi {
     this.context && this.context.close(), this.isInitialized = !1;
   }
 }
-const Be = (i) => {
-  if (isNaN(i)) return "00:00";
-  const t = Math.floor(i / 3600), n = Math.floor(i % 3600 / 60), o = Math.floor(i % 60);
-  return t > 0 ? `${t}:${n.toString().padStart(2, "0")}:${o.toString().padStart(2, "0")}` : `${n}:${o.toString().padStart(2, "0")}`;
-}, bi = async (i, t = 3, n = 2e4) => {
+const Je = (n) => {
+  if (isNaN(n)) return "00:00";
+  const t = Math.floor(n / 3600), i = Math.floor(n % 3600 / 60), o = Math.floor(n % 60);
+  return t > 0 ? `${t}:${i.toString().padStart(2, "0")}:${o.toString().padStart(2, "0")}` : `${i}:${o.toString().padStart(2, "0")}`;
+}, ki = async (n, t = 3, i = 2e4) => {
   for (let o = 0; o < t; o++) {
-    const l = new AbortController(), u = setTimeout(() => l.abort(), n);
+    const r = new AbortController(), h = setTimeout(() => r.abort(), i);
     try {
-      const h = await fetch(i, { signal: l.signal });
-      if (clearTimeout(u), !h.ok) throw new Error(`HTTP ${h.status}`);
-      return await h.text();
-    } catch (h) {
-      if (clearTimeout(u), o === t - 1) throw h;
-      await new Promise((v) => setTimeout(v, 1e3));
+      const u = await fetch(n, { signal: r.signal });
+      if (clearTimeout(h), !u.ok) throw new Error(`HTTP ${u.status}`);
+      return await u.text();
+    } catch (u) {
+      if (clearTimeout(h), o === t - 1) throw u;
+      await new Promise((f) => setTimeout(f, 1e3));
     }
   }
   throw new Error("Failed");
-}, gi = async (i, t, n = 2e4) => {
+}, Si = async (n, t, i = 2e4) => {
   try {
-    const l = (await bi(i, 3, n)).split(`
-`), u = [];
-    let h = null, v = null;
-    const w = i.substring(0, i.lastIndexOf("/") + 1), b = (p) => {
-      const y = p.split(":");
+    const r = (await ki(n, 3, i)).split(`
+`), h = [];
+    let u = null, f = null;
+    const g = n.substring(0, n.lastIndexOf("/") + 1), x = (p) => {
+      const w = p.split(":");
       let m = 0;
-      return y.length === 3 ? (m += parseFloat(y[0]) * 3600, m += parseFloat(y[1]) * 60, m += parseFloat(y[2])) : (m += parseFloat(y[0]) * 60, m += parseFloat(y[1])), m;
+      return w.length === 3 ? (m += parseFloat(w[0]) * 3600, m += parseFloat(w[1]) * 60, m += parseFloat(w[2])) : (m += parseFloat(w[0]) * 60, m += parseFloat(w[1])), m;
     };
-    for (let p of l)
+    for (let p of r)
       if (p = p.trim(), p.includes("-->")) {
-        const y = p.split("-->");
-        h = b(y[0].trim()), v = b(y[1].trim());
-      } else if (h !== null && v !== null && p.length > 0) {
-        let [y, m] = p.split("#");
-        !y.match(/^https?:\/\//) && !y.startsWith("data:") && (y = w + y);
-        let T = 0, $ = 0, g = 0, Q = 0;
+        const w = p.split("-->");
+        u = x(w[0].trim()), f = x(w[1].trim());
+      } else if (u !== null && f !== null && p.length > 0) {
+        let [w, m] = p.split("#");
+        !w.match(/^https?:\/\//) && !w.startsWith("data:") && (w = g + w);
+        let T = 0, I = 0, O = 0, Y = 0;
         if (m && m.startsWith("xywh=")) {
-          const X = m.replace("xywh=", "").split(",");
-          X.length === 4 && (T = parseInt(X[0]), $ = parseInt(X[1]), g = parseInt(X[2]), Q = parseInt(X[3]));
+          const W = m.replace("xywh=", "").split(",");
+          W.length === 4 && (T = parseInt(W[0]), I = parseInt(W[1]), O = parseInt(W[2]), Y = parseInt(W[3]));
         }
-        g > 0 && Q > 0 && u.push({ start: h, end: v, url: y, x: T, y: $, w: g, h: Q }), h = null, v = null;
+        O > 0 && Y > 0 && h.push({ start: u, end: f, url: w, x: T, y: I, w: O, h: Y }), u = null, f = null;
       }
-    return u;
+    return h;
   } catch {
     return t({ type: "warning", message: "Failed to load thumbnails", duration: 4e3 }), [];
   }
-}, vi = () => {
+}, Ci = () => {
   if (!(typeof document > "u")) {
     if (!document.getElementById("strata-fonts")) {
-      const i = document.createElement("link");
-      i.rel = "preconnect", i.href = "https://fonts.googleapis.com", document.head.appendChild(i);
+      const n = document.createElement("link");
+      n.rel = "preconnect", n.href = "https://fonts.googleapis.com", document.head.appendChild(n);
       const t = document.createElement("link");
       t.rel = "preconnect", t.href = "https://fonts.gstatic.com", t.crossOrigin = "anonymous", document.head.appendChild(t);
-      const n = document.createElement("link");
-      n.id = "strata-fonts", n.rel = "stylesheet", n.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Press+Start+2P&family=Cinzel:wght@400;600;700&display=swap", document.head.appendChild(n);
+      const i = document.createElement("link");
+      i.id = "strata-fonts", i.rel = "stylesheet", i.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Press+Start+2P&family=Cinzel:wght@400;600;700&display=swap", document.head.appendChild(i);
     }
     if (!document.querySelector('script[src*="cast_sender.js"]') && !window.cast) {
-      const i = document.createElement("script");
-      i.src = "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1", document.head.appendChild(i);
+      const n = document.createElement("script");
+      n.src = "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1", document.head.appendChild(n);
     }
   }
-}, je = {
+}, tt = {
   useNative: !1,
   fixCapitalization: !1,
   backgroundOpacity: 50,
@@ -149,7 +149,7 @@ const Be = (i) => {
   isBold: !1,
   textColor: "#ffffff",
   verticalOffset: 40
-}, Et = "strata-settings", D = {
+}, Ht = "strata-settings", te = {
   isPlaying: !1,
   isBuffering: !1,
   isLive: !1,
@@ -171,7 +171,7 @@ const Be = (i) => {
   subtitleTracks: [],
   currentSubtitle: -1,
   subtitleOffset: 0,
-  subtitleSettings: je,
+  subtitleSettings: tt,
   activeCues: [],
   viewMode: "normal",
   notifications: [],
@@ -188,86 +188,89 @@ const Be = (i) => {
   isAutoSized: !1,
   isLooping: !1,
   controlsVisible: !0
-}, Ft = (i = {}) => {
+}, Wt = (n = {}) => {
   let t = {};
-  if (!i.disablePersistence && typeof window < "u")
+  if (!n.disablePersistence && typeof window < "u")
     try {
-      const o = localStorage.getItem(Et);
+      const o = localStorage.getItem(Ht);
       o && (t = JSON.parse(o));
     } catch {
     }
-  const n = {
-    ...je,
+  const i = {
+    ...tt,
     ...t.subtitleSettings || {},
-    ...i.subtitleSettings || {}
+    ...n.subtitleSettings || {}
   };
   return {
-    ...D,
+    ...te,
     ...t,
     // Load saved first
     // Override with config if present (not undefined)
-    volume: i.volume ?? t.volume ?? D.volume,
-    isMuted: i.muted ?? t.isMuted ?? D.isMuted,
-    playbackRate: i.playbackRate ?? t.playbackRate ?? D.playbackRate,
-    audioGain: i.audioGain ?? t.audioGain ?? D.audioGain,
-    theme: i.theme ?? t.theme ?? D.theme,
-    themeColor: i.themeColor ?? t.themeColor ?? D.themeColor,
-    iconSize: i.iconSize ?? t.iconSize ?? D.iconSize,
-    subtitleSettings: n,
+    volume: n.volume ?? t.volume ?? te.volume,
+    isMuted: n.muted ?? t.isMuted ?? te.isMuted,
+    playbackRate: n.playbackRate ?? t.playbackRate ?? te.playbackRate,
+    audioGain: n.audioGain ?? t.audioGain ?? te.audioGain,
+    theme: n.theme ?? t.theme ?? te.theme,
+    themeColor: n.themeColor ?? t.themeColor ?? te.themeColor,
+    iconSize: n.iconSize ?? t.iconSize ?? te.iconSize,
+    subtitleSettings: i,
     // Config overrides state for these visual modes
-    isAutoSized: i.autoSize ?? D.isAutoSized,
-    isLive: i.isLive ?? t.isLive ?? D.isLive,
-    isLooping: i.loop ?? t.isLooping ?? D.isLooping,
+    isAutoSized: n.autoSize ?? te.isAutoSized,
+    isLive: n.isLive ?? t.isLive ?? te.isLive,
+    isLooping: n.loop ?? t.isLooping ?? te.isLooping,
     sourceStatuses: {}
     // Never persist statuses
   };
 };
-class xi {
-  constructor(t = {}, n) {
-    M(this, "video");
-    M(this, "container", null);
-    M(this, "events");
-    M(this, "store");
-    M(this, "plugins", /* @__PURE__ */ new Map());
-    M(this, "audioEngine");
-    M(this, "config");
-    M(this, "resizeObserver", null);
+class Ni {
+  constructor(t = {}, i) {
+    R(this, "video");
+    R(this, "container", null);
+    R(this, "events");
+    R(this, "store");
+    R(this, "plugins", /* @__PURE__ */ new Map());
+    R(this, "audioEngine");
+    R(this, "config");
+    R(this, "resizeObserver", null);
     // Retry Logic
-    M(this, "retryCount", 0);
-    M(this, "maxRetries", 5);
-    M(this, "retryTimer", null);
-    M(this, "currentSource", null);
-    M(this, "currentSrc", "");
-    M(this, "currentTracks", []);
+    R(this, "retryCount", 0);
+    R(this, "maxRetries", 5);
+    R(this, "retryTimer", null);
+    R(this, "currentSource", null);
+    R(this, "currentSrc", "");
+    // Track configs from setSources are stored here to lazy load
+    R(this, "trackConfigs", []);
+    // Download Control
+    R(this, "currentDownloadController", null);
     // Cast
-    M(this, "castInitialized", !1);
-    M(this, "boundCueChange");
-    M(this, "boundFullscreenChange");
-    vi(), this.config = t, this.config.autoOrientation = this.config.autoOrientation ?? !0, this.config.fetchTimeout = this.config.fetchTimeout ?? 3e4, this.config.centerControls = this.config.centerControls ?? !0, this.config.gestureSeek = this.config.gestureSeek ?? !1, this.video = n || document.createElement("video"), this.video.crossOrigin = "anonymous", t.playsInline !== !1 && (this.video.playsInline = !0), this.events = new pi();
-    const o = Ft(t);
-    this.store = new mi(o), this.audioEngine = new fi(this.video), this.boundCueChange = this.handleCueChange.bind(this), this.boundFullscreenChange = () => {
-      const l = !!document.fullscreenElement;
-      if (this.store.setState({ isFullscreen: l }), this.emit("resize"), this.emit(l ? "fullscreen" : "fullscreen_exit"), l && this.config.autoOrientation && screen.orientation && "lock" in screen.orientation) {
-        const h = this.video.videoWidth > this.video.videoHeight ? "landscape" : "portrait";
+    R(this, "castInitialized", !1);
+    R(this, "boundCueChange");
+    R(this, "boundFullscreenChange");
+    Ci(), this.config = t, this.config.autoOrientation = this.config.autoOrientation ?? !0, this.config.fetchTimeout = this.config.fetchTimeout ?? 3e4, this.config.centerControls = this.config.centerControls ?? !0, this.config.gestureSeek = this.config.gestureSeek ?? !1, this.video = i || document.createElement("video"), this.video.crossOrigin = "anonymous", t.playsInline !== !1 && (this.video.playsInline = !0), this.events = new xi();
+    const o = Wt(t);
+    this.store = new wi(o), this.audioEngine = new yi(this.video), this.boundCueChange = this.handleCueChange.bind(this), this.boundFullscreenChange = () => {
+      const r = !!document.fullscreenElement;
+      if (this.store.setState({ isFullscreen: r }), this.emit("resize"), this.emit(r ? "fullscreen" : "fullscreen_exit"), r && this.config.autoOrientation && screen.orientation && "lock" in screen.orientation) {
+        const u = this.video.videoWidth > this.video.videoHeight ? "landscape" : "portrait";
         try {
-          screen.orientation.lock(h).catch(() => {
+          screen.orientation.lock(u).catch(() => {
           });
         } catch {
         }
-      } else !l && screen.orientation && "unlock" in screen.orientation && screen.orientation.unlock();
-    }, this.video.volume = o.volume, this.video.muted = o.isMuted, this.video.playbackRate = o.playbackRate, this.video.loop = o.isLooping, o.audioGain > 1 && this.audioEngine.setGain(o.audioGain), o.isAutoSized && (this.video.style.objectFit = "cover"), this.initVideoListeners(), this.initMediaSession(), this.initCast(), t.disablePersistence || this.store.subscribe((l) => {
-      const u = {
-        volume: l.volume,
-        isMuted: l.isMuted,
-        playbackRate: l.playbackRate,
-        subtitleSettings: l.subtitleSettings,
-        iconSize: l.iconSize,
-        themeColor: l.themeColor,
-        theme: l.theme,
-        isLive: l.isLive,
-        isLooping: l.isLooping
+      } else !r && screen.orientation && "unlock" in screen.orientation && screen.orientation.unlock();
+    }, this.video.volume = o.volume, this.video.muted = o.isMuted, this.video.playbackRate = o.playbackRate, this.video.loop = o.isLooping, o.audioGain > 1 && this.audioEngine.setGain(o.audioGain), o.isAutoSized && (this.video.style.objectFit = "cover"), this.initVideoListeners(), this.initMediaSession(), this.initCast(), t.disablePersistence || this.store.subscribe((r) => {
+      const h = {
+        volume: r.volume,
+        isMuted: r.isMuted,
+        playbackRate: r.playbackRate,
+        subtitleSettings: r.subtitleSettings,
+        iconSize: r.iconSize,
+        themeColor: r.themeColor,
+        theme: r.theme,
+        isLive: r.isLive,
+        isLooping: r.isLooping
       };
-      localStorage.setItem(Et, JSON.stringify(u));
+      localStorage.setItem(Ht, JSON.stringify(h));
     });
   }
   // --- Instance Properties ---
@@ -318,14 +321,14 @@ class xi {
     this.skip(-t);
   }
   // --- Event API ---
-  on(t, n) {
-    return this.events.on(t, n);
+  on(t, i) {
+    return this.events.on(t, i);
   }
-  off(t, n) {
-    return this.events.off(t, n);
+  off(t, i) {
+    return this.events.off(t, i);
   }
-  emit(t, n) {
-    return this.events.emit(t, n);
+  emit(t, i) {
+    return this.events.emit(t, i);
   }
   initVideoListeners() {
     const t = (o) => this.store.setState(o);
@@ -353,8 +356,8 @@ class xi {
       "volumechange",
       "waiting"
     ].forEach((o) => {
-      this.video.addEventListener(o, (l) => {
-        switch (this.emit(`video:${o}`, l), o === "play" && this.emit("play"), o === "pause" && this.emit("pause"), o === "ended" && this.emit("ended"), o === "error" && this.emit("error", this.video.error), o === "seeked" && this.emit("seek"), o) {
+      this.video.addEventListener(o, (r) => {
+        switch (this.emit(`video:${o}`, r), o === "play" && this.emit("play"), o === "pause" && this.emit("pause"), o === "ended" && this.emit("ended"), o === "error" && this.emit("error", this.video.error), o === "seeked" && this.emit("seek"), o) {
           case "play":
             t({ isPlaying: !0 }), "mediaSession" in navigator && (navigator.mediaSession.playbackState = "playing"), this.updateMediaSessionPosition();
             break;
@@ -412,151 +415,174 @@ class xi {
       t({ isPip: !0 }), this.emit("pip", !0);
     }), this.video.addEventListener("leavepictureinpicture", () => {
       t({ 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));
+    }), document.addEventListener("fullscreenchange", this.boundFullscreenChange);
   }
   updateSourceStatus(t) {
-    const n = this.store.get().currentSourceIndex;
-    n !== -1 && this.store.setState((o) => ({
-      sourceStatuses: { ...o.sourceStatuses, [n]: t }
+    const i = this.store.get().currentSourceIndex;
+    i !== -1 && this.store.setState((o) => ({
+      sourceStatuses: { ...o.sourceStatuses, [i]: t }
     }));
   }
   // --- Media Session API ---
   initMediaSession() {
     if (!("mediaSession" in navigator)) return;
     const t = navigator.mediaSession;
-    t.setActionHandler("play", () => this.play()), t.setActionHandler("pause", () => this.pause()), t.setActionHandler("seekbackward", (n) => this.skip(n.seekOffset ? -n.seekOffset : -10)), t.setActionHandler("seekforward", (n) => this.skip(n.seekOffset || 10)), t.setActionHandler("seekto", (n) => {
-      n.seekTime !== void 0 && this.seek(n.seekTime);
+    t.setActionHandler("play", () => this.play()), t.setActionHandler("pause", () => this.pause()), t.setActionHandler("seekbackward", (i) => this.skip(i.seekOffset ? -i.seekOffset : -10)), t.setActionHandler("seekforward", (i) => this.skip(i.seekOffset || 10)), t.setActionHandler("seekto", (i) => {
+      i.seekTime !== void 0 && this.seek(i.seekTime);
     }), t.setActionHandler("stop", () => {
       this.pause(), this.seek(0);
     }), t.setActionHandler("previoustrack", () => {
-      const n = this.store.get().currentSourceIndex;
-      n > 0 && this.switchSource(n - 1);
+      const i = this.store.get().currentSourceIndex;
+      i > 0 && this.switchSource(i - 1);
     }), t.setActionHandler("nexttrack", () => {
-      const n = this.store.get().currentSourceIndex, o = this.store.get().sources.length;
-      n < o - 1 && this.switchSource(n + 1);
+      const i = this.store.get().currentSourceIndex, o = this.store.get().sources.length;
+      i < o - 1 && this.switchSource(i + 1);
     });
   }
   updateMediaSessionMetadata() {
-    var o, l;
+    var o, r;
     if (!("mediaSession" in navigator)) return;
-    const t = ((o = this.currentSource) == null ? void 0 : o.name) || ((l = this.currentSource) == null ? void 0 : l.url.split("/").pop()) || "Video", n = [];
-    this.config.poster && n.push({ src: this.config.poster, sizes: "512x512", type: "image/jpeg" }), n.push({ src: "logo.png", sizes: "512x512", type: "image/png" }), navigator.mediaSession.metadata = new MediaMetadata({
+    const t = ((o = this.currentSource) == null ? void 0 : o.name) || ((r = this.currentSource) == null ? void 0 : r.url.split("/").pop()) || "Video", i = [];
+    this.config.poster && i.push({ src: this.config.poster, sizes: "512x512", type: "image/jpeg" }), i.push({ src: "logo.png", sizes: "512x512", type: "image/png" }), navigator.mediaSession.metadata = new MediaMetadata({
       title: t,
       artist: "StrataPlayer",
-      artwork: n
+      artwork: i
     });
   }
   updateMediaSessionPosition() {
     if (!("mediaSession" in navigator)) return;
-    const t = this.video.duration, n = this.video.currentTime, o = this.video.playbackRate;
-    if (!isNaN(t) && isFinite(t) && !isNaN(n))
+    const t = this.video.duration, i = this.video.currentTime, o = this.video.playbackRate;
+    if (!isNaN(t) && isFinite(t) && !isNaN(i))
       try {
         navigator.mediaSession.setPositionState({
           duration: Math.max(0, t),
           playbackRate: o,
-          position: Math.max(0, Math.min(n, t))
+          position: Math.max(0, Math.min(i, t))
           // Ensure within [0, duration]
         });
-      } catch (l) {
-        console.warn("MediaSession Position Error:", l);
+      } catch (r) {
+        console.warn("MediaSession Position Error:", r);
       }
   }
-  triggerError(t, n = !1) {
-    n ? this.handleError(t) : this.notify({ type: "warning", message: `Warning: ${t}`, duration: 5e3 });
+  triggerError(t, i = !1) {
+    i ? this.handleError(t) : this.notify({ type: "warning", message: `Warning: ${t}`, duration: 5e3 });
   }
   handleError(t) {
-    const n = this.video.error, o = t || (n == null ? void 0 : n.message) || (n ? `Code ${n.code}` : "Unknown Error");
-    if (this.removeNotification("retry"), this.emit("video:error", n), this.retryCount < this.maxRetries) {
+    const i = this.video.error, o = t || (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 l = Math.pow(2, this.retryCount - 1) * 1500;
+      const r = Math.pow(2, this.retryCount - 1) * 1500;
       this.notify({
         id: "retry",
         type: "loading",
-        message: `Error: ${o}. Retrying (${this.retryCount}/${this.maxRetries})...`
-      }), console.warn(`[StrataPlayer] Error: ${o}. Retrying in ${l}ms...`), this.retryTimer && clearTimeout(this.retryTimer), this.retryTimer = setTimeout(() => {
+        // Cleaned up formatting with newline
+        message: `Error: ${o}.
+Retrying (${this.retryCount}/${this.maxRetries})`
+      }), console.warn(`[StrataPlayer] Error: ${o}. Retrying in ${r}ms...`), this.retryTimer && clearTimeout(this.retryTimer), this.retryTimer = setTimeout(() => {
         if (this.currentSource) {
-          this.load(this.currentSource, this.currentTracks, !0);
-          const u = this.store.get().currentTime;
-          if (u > 0) {
-            const h = () => {
-              this.video.currentTime = u, this.video.removeEventListener("canplay", h);
+          this.load(this.currentSource, this.trackConfigs, !0);
+          const h = this.store.get().currentTime;
+          if (h > 0) {
+            const u = () => {
+              this.video.currentTime = h, this.video.removeEventListener("canplay", u);
             };
-            this.video.addEventListener("canplay", h);
+            this.video.addEventListener("canplay", u);
           }
         }
-      }, l);
+      }, r);
     } else {
       this.removeNotification("retry");
-      const l = `Failed to play after ${this.maxRetries} attempts: ${o}`;
-      this.store.setState({ error: l }), this.emit("error", l), this.updateSourceStatus("error");
+      const r = `Failed to play after ${this.maxRetries} attempts: ${o}`;
+      this.store.setState({ error: r }), this.emit("error", r), this.updateSourceStatus("error");
     }
   }
   updateBuffer() {
     const t = [];
-    for (let n = 0; n < this.video.buffered.length; n++)
+    for (let i = 0; i < this.video.buffered.length; i++)
       t.push({
-        start: this.video.buffered.start(n),
-        end: this.video.buffered.end(n)
+        start: this.video.buffered.start(i),
+        end: this.video.buffered.end(i)
       });
     this.store.setState({ buffered: t });
   }
-  updateSubtitles() {
-    setTimeout(() => {
-      const t = Array.from(this.video.textTracks).filter((o) => o.kind === "subtitles" || o.kind === "captions").map((o, l) => ({
-        label: o.label || o.language || `Track ${l + 1}`,
-        language: o.language,
-        index: l
-      }));
-      this.store.setState({ subtitleTracks: t });
-      const n = this.store.get();
-      n.currentSubtitle !== -1 && t.length > 0 && n.currentSubtitle < t.length && this.setSubtitle(n.currentSubtitle);
-    }, 50);
+  updateSubtitleTrackState(t, i) {
+    this.store.setState((o) => {
+      const r = [...o.subtitleTracks];
+      return r[t] && (r[t] = { ...r[t], ...i }), { subtitleTracks: r };
+    });
   }
   // --- Utility ---
-  async fetchWithRetry(t, n = 3, o) {
-    const l = o ?? this.config.fetchTimeout ?? 3e4;
-    for (let u = 0; u < n; u++) {
-      const h = new AbortController(), v = setTimeout(() => h.abort(), l);
+  async fetchWithRetry(t, i = 3, o, r) {
+    const h = o ?? this.config.fetchTimeout ?? 3e4;
+    for (let u = 0; u < i; u++) {
+      const f = r ? null : new AbortController(), g = r || (f == null ? void 0 : f.signal), x = setTimeout(() => f == null ? void 0 : f.abort(), h);
       try {
-        const w = await fetch(t, { signal: h.signal });
-        if (clearTimeout(v), !w.ok) throw new Error(`HTTP ${w.status}`);
-        return w;
-      } catch (w) {
-        if (clearTimeout(v), u === n - 1) throw w;
-        w.name === "AbortError" && console.warn(`Fetch timeout (${l}ms) for ${t}`), await new Promise((b) => setTimeout(b, 1e3 * Math.pow(2, u)));
+        const p = await fetch(t, { signal: g });
+        if (clearTimeout(x), !p.ok) throw new Error(`HTTP ${p.status}`);
+        return p;
+      } catch (p) {
+        if (clearTimeout(x), r != null && r.aborted) throw new Error("Aborted");
+        if (u === i - 1) throw p;
+        if (p.name === "AbortError") {
+          if (r != null && r.aborted) throw p;
+          console.warn(`Fetch timeout (${h}ms) for ${t}`);
+        }
+        await new Promise((w) => setTimeout(w, 1e3 * Math.pow(2, u)));
       }
     }
     throw new Error("Fetch failed");
   }
+  // Helper to ensure subtitle content is VTT
+  convertToVTT(t) {
+    let i = t.trim();
+    if (!i.startsWith("WEBVTT")) {
+      let o = i.replace(/(\d+:\d{2}:\d{2}),(\d{3})/g, "$1.$2");
+      return o = o.replace(/(\d{2}:\d{2}),(\d{3})/g, "$1.$2"), `WEBVTT
+
+` + o;
+    }
+    return i;
+  }
+  // Enhanced Format Duration: Days, Hours, Minutes, Seconds
+  formatDuration(t) {
+    if (!isFinite(t) || t <= 0) return "";
+    const i = Math.floor(t / 1e3), o = Math.floor(i / (3600 * 24)), r = Math.floor(i % (3600 * 24) / 3600), h = Math.floor(i % 3600 / 60), u = i % 60, f = [];
+    return o > 0 && f.push(`${o}d`), r > 0 && f.push(`${r}h`), h > 0 && f.push(`${h}m`), f.push(`${u}s`), f.join(" ");
+  }
   // --- Core Methods ---
   attach(t) {
-    this.resizeObserver && this.resizeObserver.disconnect(), this.container = t, this.container.appendChild(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.updateAspectRatio(), this.resizeObserver = new ResizeObserver((n) => {
-      for (const o of n)
+    this.resizeObserver && this.resizeObserver.disconnect(), this.container = t, this.container.appendChild(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.updateAspectRatio(), this.resizeObserver = new ResizeObserver((i) => {
+      for (const o of i)
         this.emit("resize", { width: o.contentRect.width, height: o.contentRect.height }), this.updateAspectRatio();
     }), this.resizeObserver.observe(this.container), this.emit("ready");
   }
   use(t) {
     this.plugins.has(t.name) || (t.init(this), this.plugins.set(t.name, t));
   }
-  setSources(t, n = []) {
-    this.store.setState({ sources: t }), this.currentTracks = n, t.length > 0 && this.load(t[0], n);
+  setSources(t, i = []) {
+    this.store.setState({ sources: t }), this.trackConfigs = i, t.length > 0 && this.load(t[0], i);
   }
   switchSource(t) {
-    const n = this.store.get().sources;
-    if (t >= 0 && t < n.length) {
-      const o = this.video.currentTime, l = !this.video.paused;
-      this.load(n[t], this.currentTracks);
-      const u = () => {
-        this.video.currentTime = o, l && this.video.play(), this.video.removeEventListener("canplay", u);
+    const i = this.store.get().sources;
+    if (t >= 0 && t < i.length) {
+      const o = this.video.currentTime, r = !this.video.paused;
+      this.load(i[t], this.trackConfigs);
+      const h = () => {
+        this.video.currentTime = o, r && this.video.play(), this.video.removeEventListener("canplay", h);
       };
-      this.video.addEventListener("canplay", u);
+      this.video.addEventListener("canplay", h);
     }
   }
-  load(t, n = [], o = !1) {
+  load(t, i = [], o = !1) {
     this.retryTimer && clearTimeout(this.retryTimer);
-    const l = typeof t == "string" ? { url: t, type: "auto" } : t;
-    o || (this.retryCount = 0, this.store.setState({ error: null }), this.removeNotification("retry")), this.currentSrc = l.url, this.currentSource = l, this.currentTracks = n;
-    const h = this.store.get().sources.findIndex((b) => b.url === l.url);
+    const r = typeof t == "string" ? { url: t, type: "auto" } : t;
+    o || (this.retryCount = 0, this.store.setState({ error: null }), this.removeNotification("retry")), this.currentSrc = r.url, this.currentSource = r, this.trackConfigs = i;
+    const u = this.store.get().sources.findIndex((w) => w.url === r.url), f = i.map((w, m) => ({
+      ...w,
+      index: m,
+      status: "idle",
+      isDefault: !!w.default
+    }));
     this.store.setState({
       isBuffering: !0,
       qualityLevels: [],
@@ -565,47 +591,50 @@ class xi {
       audioTracks: [],
       currentAudioTrack: -1,
       // Reset audio track
-      // subtitleTracks and currentSubtitle are purposely preserved
-      currentSourceIndex: h
+      subtitleTracks: f,
+      currentSubtitle: -1,
+      currentSourceIndex: u
     }), this.updateMediaSessionMetadata();
-    let v = l.type || "auto";
-    v === "auto" && (l.url.includes(".m3u8") ? v = "hls" : l.url.includes(".mpd") ? v = "dash" : l.url.includes(".flv") || l.url.includes(".ts") ? v = "mpegts" : l.url.startsWith("magnet:") || l.url.includes(".torrent") ? v = "webtorrent" : v = "mp4"), this.events.emit("load", { url: l.url, type: v });
-    const w = this.video.getElementsByTagName("track");
-    for (; w.length > 0; )
-      w[0].remove();
-    n.length > 0 && n.forEach((b) => {
-      this.fetchWithRetry(b.src).then(() => {
-        this.addTextTrackInternal(b.src, b.label, b.srcLang, b.default);
-      }).catch((p) => {
-        this.notify({ type: "warning", message: `Failed to load subtitle: ${b.label}`, duration: 4e3 });
-      });
-    }), (v === "mp4" || v === "webm" || v === "ogg") && (this.video.src = l.url);
+    let g = r.type || "auto";
+    g === "auto" && (r.url.includes(".m3u8") ? g = "hls" : r.url.includes(".mpd") ? g = "dash" : r.url.includes(".flv") || r.url.includes(".ts") ? g = "mpegts" : r.url.startsWith("magnet:") || r.url.includes(".torrent") ? g = "webtorrent" : g = "mp4"), this.events.emit("load", { url: r.url, type: g });
+    const x = this.video.getElementsByTagName("track");
+    for (; x.length > 0; )
+      x[0].remove();
+    const p = f.findIndex((w) => w.default);
+    p !== -1 && this.setSubtitle(p), (g === "mp4" || g === "webm" || g === "ogg") && (this.video.src = r.url);
   }
   // Wrapper for external subtitle API
-  loadSubtitle(t, n = "Subtitle") {
-    this.addTextTrackInternal(t, n, void 0, !0);
+  loadSubtitle(t, i = "Subtitle") {
+    const o = this.store.get().subtitleTracks.length, r = {
+      src: t,
+      label: i,
+      srcLang: "user",
+      default: !0,
+      kind: "subtitles",
+      index: o,
+      status: "idle",
+      isDefault: !0
+    };
+    this.store.setState((h) => ({
+      subtitleTracks: [...h.subtitleTracks, r]
+    })), this.setSubtitle(o);
   }
-  addTextTrack(t, n) {
+  addTextTrack(t, i) {
     const o = new FileReader();
-    o.onload = (l) => {
-      var w;
-      if (!((w = l.target) != null && w.result)) return;
-      let u = l.target.result;
-      (t.name.toLowerCase().endsWith(".srt") || !u.trim().startsWith("WEBVTT")) && (u = u.replace(/(\d{2}:\d{2}:\d{2}),(\d{3})/g, "$1.$2"), u.trim().startsWith("WEBVTT") || (u = `WEBVTT
-
-` + u));
-      const h = new Blob([u], { type: "text/vtt" }), v = URL.createObjectURL(h);
-      this.addTextTrackInternal(v, n, "user", !0), setTimeout(() => {
-        const p = this.store.get().subtitleTracks.findIndex((y) => y.label === n);
-        p !== -1 && (this.setSubtitle(p), this.notify({ type: "success", message: "Subtitle uploaded", duration: 3e3 }));
-      }, 200);
+    o.onload = (r) => {
+      var g;
+      if (!((g = r.target) != null && g.result)) return;
+      let h = r.target.result;
+      h = this.convertToVTT(h);
+      const u = new Blob([h], { type: "text/vtt" }), f = URL.createObjectURL(u);
+      this.loadSubtitle(f, i), this.notify({ type: "success", message: "Subtitle uploaded", duration: 3e3 });
     }, o.onerror = () => {
       this.notify({ type: "error", message: "Failed to read file", duration: 3e3 });
     }, o.readAsText(t);
   }
-  addTextTrackInternal(t, n, o = "", l = !1) {
-    const u = document.createElement("track");
-    u.kind = "subtitles", u.label = n, u.src = t, u.srclang = o, l && (u.default = !0), this.video.appendChild(u), this.updateSubtitles();
+  addTextTrackInternal(t, i, o = "", r = !1) {
+    const h = document.createElement("track");
+    h.kind = "subtitles", h.label = i, h.src = t, h.srclang = o, r && (h.default = !0), this.video.appendChild(h);
   }
   play() {
     return this.video.play();
@@ -618,15 +647,15 @@ class xi {
   }
   seek(t) {
     if (isNaN(t)) return;
-    const n = Math.max(0, Math.min(t, this.video.duration));
-    this.store.setState({ currentTime: n }), this.video.currentTime = n;
+    const i = Math.max(0, Math.min(t, this.video.duration));
+    this.store.setState({ currentTime: i }), this.video.currentTime = i;
   }
   skip(t) {
     this.seek(this.video.currentTime + t);
   }
   setVolume(t) {
-    const n = Math.max(0, Math.min(t, 1));
-    this.video.volume = n, n > 0 && this.video.muted && (this.video.muted = !1), n === 0 && (this.video.muted = !0);
+    const i = Math.max(0, Math.min(t, 1));
+    this.video.volume = i, i > 0 && this.video.muted && (this.video.muted = !1), i === 0 && (this.video.muted = !0);
   }
   toggleMute() {
     this.video.muted = !this.video.muted;
@@ -665,8 +694,8 @@ class xi {
     const t = this.store.get().isWebFullscreen;
     document.fullscreenElement && document.exitFullscreen().catch(() => {
     });
-    const n = !t;
-    this.store.setState({ isWebFullscreen: n }), typeof document < "u" && (document.body.style.overflow = n ? "hidden" : ""), this.emit("webfullscreen", n);
+    const i = !t;
+    this.store.setState({ isWebFullscreen: i }), typeof document < "u" && (document.body.style.overflow = i ? "hidden" : ""), this.emit("webfullscreen", i);
   }
   togglePip() {
     document.pictureInPictureElement ? document.exitPictureInPicture() : this.video !== document.pictureInPictureElement && this.video.requestPictureInPicture && this.video.requestPictureInPicture();
@@ -674,12 +703,12 @@ class xi {
   screenshot() {
     const t = document.createElement("canvas");
     t.width = this.video.videoWidth, t.height = this.video.videoHeight;
-    const n = t.getContext("2d");
-    if (n) {
-      n.drawImage(this.video, 0, 0, t.width, t.height);
+    const i = t.getContext("2d");
+    if (i) {
+      i.drawImage(this.video, 0, 0, t.width, t.height);
       try {
-        const o = t.toDataURL("image/png"), l = document.createElement("a");
-        l.download = `screenshot-${(/* @__PURE__ */ new Date()).toISOString()}.png`, l.href = o, l.click(), this.notify({ type: "success", message: "Screenshot saved", duration: 2e3 });
+        const o = t.toDataURL("image/png"), r = document.createElement("a");
+        r.download = `screenshot-${(/* @__PURE__ */ new Date()).toISOString()}.png`, r.href = o, r.click(), this.notify({ type: "success", message: "Screenshot saved", duration: 2e3 });
       } catch {
         this.notify({ type: "error", message: "Failed to take screenshot", duration: 3e3 });
       }
@@ -692,34 +721,34 @@ class xi {
     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(t) {
-    const n = this.store.get().flipState, o = {
-      ...n,
-      [t]: !n[t]
+    const i = this.store.get().flipState, o = {
+      ...i,
+      [t]: !i[t]
     };
     this.store.setState({ flipState: o });
-    const l = o.horizontal ? -1 : 1, u = o.vertical ? -1 : 1;
-    this.video.style.transform = `scale(${l}, ${u})`;
+    const r = o.horizontal ? -1 : 1, h = o.vertical ? -1 : 1;
+    this.video.style.transform = `scale(${r}, ${h})`;
   }
   setAspectRatio(t) {
     this.store.setState({ aspectRatio: t }), this.updateAspectRatio(), t !== "default" && this.notify({ type: "info", message: `Aspect Ratio: ${t}`, duration: 2e3 });
   }
   updateAspectRatio() {
     if (!this.container) return;
-    const { aspectRatio: t, isAutoSized: n } = this.store.get();
+    const { aspectRatio: t, isAutoSized: i } = this.store.get();
     if (t === "default") {
-      this.video.style.width = "100%", this.video.style.height = "100%", this.video.style.objectFit = n ? "cover" : "contain";
+      this.video.style.width = "100%", this.video.style.height = "100%", this.video.style.objectFit = i ? "cover" : "contain";
       return;
     }
-    const [o, l] = t.split(":").map(Number);
-    if (!o || !l) return;
-    const u = o / l, h = this.container.getBoundingClientRect();
-    if (h.width === 0 || h.height === 0) return;
-    const v = h.width / h.height;
-    let w, b;
-    v > u ? (b = h.height, w = b * u) : (w = h.width, b = w / u), this.video.style.width = `${w}px`, this.video.style.height = `${b}px`, this.video.style.objectFit = "fill";
+    const [o, r] = t.split(":").map(Number);
+    if (!o || !r) return;
+    const h = o / r, u = this.container.getBoundingClientRect();
+    if (u.width === 0 || u.height === 0) return;
+    const f = u.width / u.height;
+    let g, x;
+    f > h ? (x = u.height, g = x * h) : (g = u.width, x = g / h), this.video.style.width = `${g}px`, this.video.style.height = `${x}px`, this.video.style.objectFit = "fill";
   }
   initCast() {
-    const t = window, n = () => {
+    const t = window, i = () => {
       if (!this.castInitialized)
         try {
           t.cast && t.cast.framework && t.chrome && t.chrome.cast && (t.cast.framework.CastContext.getInstance().setOptions({
@@ -730,8 +759,8 @@ class xi {
           console.warn("Cast Init Error or already initialized", o);
         }
     };
-    t.cast && t.cast.framework ? n() : t.__onGCastApiAvailable = (o) => {
-      o && n();
+    t.cast && t.cast.framework ? i() : t.__onGCastApiAvailable = (o) => {
+      o && i();
     };
   }
   requestCast() {
@@ -740,8 +769,8 @@ class xi {
       try {
         this.castInitialized || this.initCast(), t.cast.framework.CastContext.getInstance().requestSession().then(() => {
           this.loadMediaToCast();
-        }).catch((n) => {
-          n !== "cancel" && this.notify({ type: "error", message: "Cast failed: " + n, duration: 3e3 });
+        }).catch((i) => {
+          i !== "cancel" && this.notify({ type: "error", message: "Cast failed: " + i, duration: 3e3 });
         });
       } catch {
         this.notify({ type: "warning", message: "Cast not available yet", duration: 3e3 });
@@ -752,199 +781,372 @@ class xi {
   loadMediaToCast() {
     const t = window;
     try {
-      const n = t.cast.framework.CastContext.getInstance().getCurrentSession();
-      if (!n) return;
-      const o = new t.chrome.cast.media.MediaInfo(this.currentSrc, this.currentSrc.includes(".m3u8") ? "application/x-mpegurl" : "video/mp4"), l = new t.chrome.cast.media.LoadRequest(o);
-      n.loadMedia(l).then(() => {
+      const i = t.cast.framework.CastContext.getInstance().getCurrentSession();
+      if (!i) return;
+      const o = new t.chrome.cast.media.MediaInfo(this.currentSrc, this.currentSrc.includes(".m3u8") ? "application/x-mpegurl" : "video/mp4"), r = new t.chrome.cast.media.LoadRequest(o);
+      i.loadMedia(r).then(() => {
         this.notify({ type: "success", message: "Casting...", duration: 3e3 });
-      }).catch((u) => console.error("Cast load error", u));
-    } catch (n) {
-      console.error("Failed to load media into Cast session", n);
+      }).catch((h) => console.error("Cast load error", h));
+    } catch (i) {
+      console.error("Failed to load media into Cast session", i);
     }
   }
   handleCueChange() {
-    const t = this.store.get();
-    if (t.currentSubtitle === -1) {
+    if (this.store.get().currentSubtitle === -1) {
       this.store.setState({ activeCues: [] });
       return;
     }
-    const o = Array.from(this.video.textTracks).filter((l) => l.kind === "subtitles" || l.kind === "captions")[t.currentSubtitle];
+    const o = Array.from(this.video.textTracks).filter((r) => r.kind === "subtitles" || r.kind === "captions").find((r) => r.mode === "showing" || r.mode === "hidden");
     if (o && o.activeCues) {
-      const l = Array.from(o.activeCues).map((u) => u.text);
-      this.store.setState({ activeCues: l });
+      const r = Array.from(o.activeCues).map((h) => h.text);
+      this.store.setState({ activeCues: r });
     } else
       this.store.setState({ activeCues: [] });
   }
-  setSubtitle(t) {
-    if (Array.from(this.video.textTracks).forEach((n) => {
-      n.removeEventListener("cuechange", this.boundCueChange), n.mode = "hidden";
-    }), this.store.setState({ currentSubtitle: t, subtitleOffset: 0, activeCues: [] }), t !== -1) {
-      const o = Array.from(this.video.textTracks).filter((l) => l.kind === "subtitles" || l.kind === "captions")[t];
-      if (o) {
-        const l = this.store.get().subtitleSettings;
-        o.mode = l.useNative ? "showing" : "hidden", o.addEventListener("cuechange", this.boundCueChange), this.handleCueChange();
+  async setSubtitle(t) {
+    const o = this.store.get().subtitleTracks[t];
+    if (Array.from(this.video.textTracks).forEach((u) => {
+      u.removeEventListener("cuechange", this.boundCueChange), u.mode = "disabled";
+    }), this.store.setState({ currentSubtitle: t, subtitleOffset: 0, activeCues: [] }), t === -1 || !o) return;
+    if (o.status === "idle" || o.status === "error") {
+      this.updateSubtitleTrackState(t, { status: "loading" });
+      try {
+        let f = await (await this.fetchWithRetry(o.src)).text();
+        f = this.convertToVTT(f);
+        const g = new Blob([f], { type: "text/vtt" }), x = URL.createObjectURL(g);
+        this.addTextTrackInternal(x, o.label, o.srcLang, !1), this.updateSubtitleTrackState(t, { status: "success" });
+      } catch (u) {
+        this.updateSubtitleTrackState(t, { status: "error" }), console.error("Failed to load subtitle", u);
+        return;
       }
     }
+    const r = Array.from(this.video.textTracks);
+    let h = r.find((u) => u.label === o.label && u.language === o.srcLang);
+    if (h || (h = r.find((u) => u.label === o.label)), h) {
+      const u = this.store.get().subtitleSettings;
+      h.mode = u.useNative ? "showing" : "hidden", h.addEventListener("cuechange", this.boundCueChange), this.handleCueChange();
+    }
   }
   updateSubtitleSettings(t) {
     const o = { ...this.store.get().subtitleSettings, ...t };
-    this.store.setState({ subtitleSettings: o }), t.useNative !== void 0 && this.setSubtitle(this.store.get().currentSubtitle);
+    if (this.store.setState({ subtitleSettings: o }), t.useNative !== void 0) {
+      const r = this.store.get().currentSubtitle;
+      if (r !== -1) {
+        const u = this.store.get().subtitleTracks[r], f = Array.from(this.video.textTracks).find((g) => g.label === u.label && g.language === u.srcLang);
+        f && (f.mode = t.useNative ? "showing" : "hidden");
+      }
+    }
   }
   resetSubtitleSettings() {
-    this.store.setState({ subtitleSettings: je }), this.setSubtitle(this.store.get().currentSubtitle);
+    this.store.setState({ subtitleSettings: tt }), this.updateSubtitleSettings({ useNative: !1 });
   }
   setSubtitleOffset(t) {
-    const n = this.store.get().subtitleOffset, o = t - n;
-    Math.abs(o) < 1e-3 || (Array.from(this.video.textTracks).forEach((l) => {
-      (l.mode === "showing" || l.mode === "hidden") && l.cues && Array.from(l.cues).forEach((u) => {
-        u.startTime += o, u.endTime += o;
+    const i = this.store.get().subtitleOffset, o = t - i;
+    Math.abs(o) < 1e-3 || (Array.from(this.video.textTracks).forEach((r) => {
+      (r.mode === "showing" || r.mode === "hidden") && r.cues && Array.from(r.cues).forEach((h) => {
+        h.startTime += o, h.endTime += o;
       });
     }), this.store.setState({ subtitleOffset: t }), this.notify({ type: "info", message: `Subtitle Offset: ${t > 0 ? "+" : ""}${t.toFixed(1)}s`, duration: 1500 }));
   }
-  async download() {
-    var o;
-    if (!this.video.src) return;
-    const t = this.video.src;
-    if (t.includes("blob:") || t.includes(".m3u8")) {
+  cancelDownload() {
+    this.currentDownloadController && (this.currentDownloadController.abort(), this.currentDownloadController = null, this.notify({ type: "info", message: "Download cancelled", duration: 2e3 }));
+  }
+  async download(t = {}) {
+    var h, u, f;
+    const i = ((h = this.currentSource) == null ? void 0 : h.url) || this.video.src;
+    if (!i) return;
+    if (i.includes(".m3u8") || ((u = this.currentSource) == null ? void 0 : u.type) === "hls") {
+      this.downloadHls(i, t.format || "ts");
+      return;
+    }
+    if (i.startsWith("blob:")) {
       this.notify({ type: "warning", message: "Stream download not supported in browser.", duration: 4e3 });
       return;
     }
-    const n = this.notify({ type: "loading", message: "Preparing download...", progress: 0 });
+    this.currentDownloadController && this.currentDownloadController.abort(), this.currentDownloadController = new AbortController();
+    const o = this.currentDownloadController.signal, r = this.notify({
+      type: "loading",
+      message: "Preparing download",
+      // Removed ...
+      progress: 0,
+      action: {
+        label: "Cancel",
+        onClick: () => this.cancelDownload()
+      }
+    });
     try {
-      const l = await this.fetchWithRetry(t);
-      if (!l.body) throw new Error("No body");
-      const u = l.body.getReader(), h = l.headers.get("Content-Length"), v = h ? parseInt(h, 10) : 0;
-      let w = 0;
-      const b = [];
+      const g = await this.fetchWithRetry(i, 3, void 0, o);
+      if (!g.body) throw new Error("No body");
+      const x = g.body.getReader(), p = g.headers.get("Content-Length"), w = p ? parseInt(p, 10) : 0;
+      let m = 0;
+      const T = [], I = Date.now(), O = [];
       for (; ; ) {
-        const { done: T, value: $ } = await u.read();
-        if (T) break;
-        if (b.push($), w += $.length, v) {
-          const g = Math.round(w / v * 100);
-          this.notify({ id: n, type: "loading", message: `Downloading... ${g}%`, progress: g });
+        const { done: H, value: k } = await x.read();
+        if (H) break;
+        if (T.push(k), m += k.length, w) {
+          const q = Date.now(), $ = Math.round(m / w * 100);
+          for (O.push({ time: q, loaded: m }); O.length > 0 && q - O[0].time > 5e3; )
+            O.shift();
+          let j = "", Z = 0;
+          if (O.length > 1) {
+            const P = O[0], s = O[O.length - 1], ie = s.time - P.time, ne = s.loaded - P.loaded;
+            ie > 0 && (Z = ne / ie);
+          } else {
+            const P = q - I;
+            P > 0 && (Z = m / P);
+          }
+          if (Z > 0) {
+            const s = (w - m) / Z;
+            j = `
+${this.formatDuration(s)} remaining`;
+          }
+          this.notify({
+            id: r,
+            type: "loading",
+            // Cleaned string
+            message: `${j}`,
+            progress: $,
+            action: {
+              label: "Cancel",
+              onClick: () => this.cancelDownload()
+            }
+          });
         }
       }
-      const p = new Blob(b), y = window.URL.createObjectURL(p), m = document.createElement("a");
-      m.style.display = "none", m.href = y, m.download = ((o = t.split("/").pop()) == null ? void 0 : o.split("?")[0]) || "video.mp4", document.body.appendChild(m), m.click(), window.URL.revokeObjectURL(y), document.body.removeChild(m), this.notify({ id: n, type: "success", message: "Saved!", duration: 3e3 });
+      const Y = new Blob(T), W = window.URL.createObjectURL(Y), b = document.createElement("a");
+      b.style.display = "none", b.href = W, b.download = ((f = i.split("/").pop()) == null ? void 0 : f.split("?")[0]) || "video.mp4", document.body.appendChild(b), b.click(), window.URL.revokeObjectURL(W), document.body.removeChild(b), this.notify({ id: r, type: "success", message: "Saved!", duration: 3e3 });
     } catch {
-      this.notify({ id: n, type: "error", message: "Download failed.", duration: 4e3 }), window.open(t, "_blank");
+      o.aborted ? this.removeNotification(r) : (this.notify({ id: r, type: "error", message: "Download failed.", duration: 4e3 }), window.open(i, "_blank"));
+    } finally {
+      this.currentDownloadController = null;
+    }
+  }
+  async downloadHls(t, i) {
+    var h;
+    this.currentDownloadController && this.currentDownloadController.abort(), this.currentDownloadController = new AbortController();
+    const o = this.currentDownloadController.signal, r = this.notify({
+      type: "loading",
+      message: "Analyzing HLS stream",
+      // Removed ...
+      progress: 0,
+      action: { label: "Cancel", onClick: () => this.cancelDownload() }
+    });
+    try {
+      let u = await this.fetchWithRetry(t, 3, void 0, o), f = await u.text(), g = t.substring(0, t.lastIndexOf("/") + 1);
+      if (f.includes("#EXT-X-STREAM-INF")) {
+        this.notify({ id: r, type: "loading", message: "Selecting best quality", progress: 0 });
+        const k = f.split(`
+`);
+        let q = 0, $ = "";
+        for (let j = 0; j < k.length; j++)
+          if (k[j].includes("#EXT-X-STREAM-INF")) {
+            const Z = k[j].match(/BANDWIDTH=(\d+)/);
+            if (Z) {
+              const P = parseInt(Z[1]);
+              let s = (h = k[j + 1]) == null ? void 0 : h.trim();
+              s && !s.startsWith("#") && P > q && (q = P, $ = s);
+            }
+          }
+        $ && ($.startsWith("http") || ($ = g + $), u = await this.fetchWithRetry($, 3, void 0, o), f = await u.text(), g = $.substring(0, $.lastIndexOf("/") + 1));
+      }
+      if (f.includes("#EXT-X-KEY"))
+        throw new Error("Encrypted HLS streams are not supported for download.");
+      const x = f.split(`
+`), p = [];
+      for (let k of x)
+        k = k.trim(), k && !k.startsWith("#") && (k.startsWith("http") ? p.push(k) : p.push(g + k));
+      if (p.length === 0) throw new Error("No segments found.");
+      let w = i === "mp4" ? "mp4" : "ts", m = i === "mp4" ? "video/mp4" : "video/mp2t", T = null, I = null, O = [];
+      if ("showSaveFilePicker" in window)
+        try {
+          T = await window.showSaveFilePicker({
+            suggestedName: `video.${w}`,
+            types: [{
+              description: i === "mp4" ? "MPEG-4 Video" : "MPEG Transport Stream",
+              accept: { [m]: [`.${w}`] }
+            }]
+          }), I = await T.createWritable();
+        } catch (k) {
+          if (k.name === "AbortError") {
+            this.removeNotification(r), this.notify({ type: "info", message: "Download cancelled", duration: 2e3 }), this.currentDownloadController = null;
+            return;
+          }
+          console.warn("File System API cancelled or failed, falling back to memory", k);
+        }
+      let W = !1;
+      const b = Date.now(), H = [];
+      for (let k = 0; k < p.length && !o.aborted; k++) {
+        const q = Math.round((k + 1) / p.length * 100), $ = Date.now();
+        for (H.push({ time: $, count: k + 1 }); H.length > 0 && $ - H[0].time > 5e3; )
+          H.shift();
+        let j = "";
+        if (H.length > 1) {
+          const ie = H[0], ne = H[H.length - 1], le = ne.time - ie.time, ce = ne.count - ie.count;
+          if (le > 0 && ce > 0) {
+            const Se = le / ce, Ce = (p.length - (k + 1)) * Se;
+            j = `
+${this.formatDuration(Ce)} remaining`;
+          }
+        } else if (k > 0) {
+          const ne = ($ - b) / k, ce = (p.length - k) * ne;
+          j = `
+${this.formatDuration(ce)} remaining`;
+        }
+        this.notify({
+          id: r,
+          type: "loading",
+          // Cleaned string
+          message: `Downloading segment ${k + 1}/${p.length}${j}`,
+          progress: q,
+          action: { label: "Cancel", onClick: () => this.cancelDownload() }
+        });
+        const P = await (await this.fetchWithRetry(p[k], 3, void 0, o)).arrayBuffer();
+        k === 0 && new Uint8Array(P.slice(0, 4))[0] === 71 && (W = !0, i === "mp4" && (this.notify({
+          type: "info",
+          message: "Stream is MPEG-TS. Downloading as .ts to prevent corruption.",
+          duration: 5e3
+        }), w = "ts", m = "video/mp2t"));
+        const s = new Blob([P]);
+        I ? await I.write(s) : O.push(s);
+      }
+      if (o.aborted)
+        throw I && await I.abort(), new Error("Aborted");
+      if (I)
+        await I.close(), this.notify({ id: r, type: "success", message: "Download complete!", duration: 3e3 });
+      else {
+        this.notify({ id: r, type: "loading", message: "Stitching video", progress: 100 });
+        const k = new Blob(O, { type: m }), q = window.URL.createObjectURL(k), $ = document.createElement("a");
+        $.style.display = "none", $.href = q;
+        const j = i === "mp4" && W ? "ts" : w;
+        $.download = `video.${j}`, document.body.appendChild($), $.click(), window.URL.revokeObjectURL(q), document.body.removeChild($), this.notify({ id: r, type: "success", message: "Saved!", duration: 3e3 });
+      }
+    } catch (u) {
+      o.aborted ? this.removeNotification(r) : this.notify({ id: r, type: "error", message: `Download failed: ${u.message}`, duration: 4e3 });
+    } finally {
+      this.currentDownloadController = null;
     }
   }
   notify(t) {
-    const n = t.id || Math.random().toString(36).substr(2, 9), o = { ...t, id: n };
-    return this.store.setState({ notifications: [o] }), t.duration && setTimeout(() => this.removeNotification(n), t.duration), n;
+    const i = t.id || Math.random().toString(36).substr(2, 9), o = { ...t, id: i };
+    return this.store.setState((r) => r.notifications.find((u) => u.id === i) ? { notifications: r.notifications.map((u) => u.id === i ? o : u) } : { notifications: [...r.notifications, o] }), t.duration && setTimeout(() => this.removeNotification(i), t.duration), i;
   }
   removeNotification(t) {
-    const n = this.store.get().notifications;
-    this.store.setState({ notifications: n.filter((o) => o.id !== t) });
+    const i = this.store.get().notifications;
+    this.store.setState({ notifications: i.filter((o) => o.id !== t) });
   }
   setAppearance(t) {
-    this.store.setState((n) => ({
-      ...n,
+    this.store.setState((i) => ({
+      ...i,
       ...t
     }));
   }
   destroy() {
-    this.retryTimer && clearTimeout(this.retryTimer), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.store.get().isWebFullscreen && typeof document < "u" && (document.body.style.overflow = ""), document.removeEventListener("fullscreenchange", this.boundFullscreenChange), this.video.pause(), this.video.src = "";
+    this.retryTimer && clearTimeout(this.retryTimer), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.currentDownloadController && this.currentDownloadController.abort(), this.store.get().isWebFullscreen && typeof document < "u" && (document.body.style.overflow = ""), document.removeEventListener("fullscreenchange", this.boundFullscreenChange), this.video.pause(), this.video.src = "";
     const t = this.video.getElementsByTagName("track");
     for (; t.length > 0; ) t[0].remove();
-    this.emit("destroy"), this.events.destroy(), this.store.destroy(), this.plugins.forEach((n) => n.destroy && n.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 Ve = (i, t = 200) => {
-  const [n, o] = S(i), [l, u] = S(!1);
-  return j(() => {
-    if (i)
+const Ke = (n, t = 200) => {
+  const [i, o] = N(n), [r, h] = N(!1);
+  return Q(() => {
+    if (n)
       o(!0), requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          u(!0);
+          h(!0);
         });
       });
     else {
-      u(!1);
-      const h = setTimeout(() => {
+      h(!1);
+      const u = setTimeout(() => {
         o(!1);
       }, t);
-      return () => clearTimeout(h);
+      return () => clearTimeout(u);
     }
-  }, [i, t]), { isMounted: n, isVisible: l };
-}, x = ({ className: i, children: t, fill: n = "none", strokeWidth: o = 2, viewBox: l = "0 0 24 24" }) => /* @__PURE__ */ e(
+  }, [n, t]), { isMounted: i, isVisible: r };
+}, y = ({
+  className: n,
+  children: t,
+  fill: i = "none",
+  strokeWidth: o = 2,
+  viewBox: r = "0 0 24 24"
+}) => /* @__PURE__ */ e(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: l,
-    fill: n,
+    viewBox: r,
+    fill: i,
     stroke: "currentColor",
     strokeWidth: o,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    className: i,
+    className: n,
     children: t
   }
-), zt = ({ className: i }) => /* @__PURE__ */ e(x, { className: i, children: /* @__PURE__ */ e("polygon", { points: "5 3 19 12 5 21 5 3" }) }), It = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+), Et = ({ className: n }) => /* @__PURE__ */ e(y, { className: n, children: /* @__PURE__ */ e("polygon", { points: "5 3 19 12 5 21 5 3" }) }), Ft = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("rect", { width: "4", height: "16", x: "6", y: "4", rx: "1" }),
   /* @__PURE__ */ e("rect", { width: "4", height: "16", x: "14", y: "4", rx: "1" })
-] }), wi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Mi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
   /* @__PURE__ */ e("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" }),
   /* @__PURE__ */ e("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
-] }), yi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Ti = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
   /* @__PURE__ */ e("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
-] }), ki = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), zi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
   /* @__PURE__ */ e("line", { x1: "23", x2: "17", y1: "9", y2: "15" }),
   /* @__PURE__ */ e("line", { x1: "17", x2: "23", y1: "9", y2: "15" })
-] }), Si = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Ii = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
   /* @__PURE__ */ e("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
   /* @__PURE__ */ e("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
   /* @__PURE__ */ e("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
-] }), Ci = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Ri = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
   /* @__PURE__ */ e("path", { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
   /* @__PURE__ */ e("path", { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
   /* @__PURE__ */ e("path", { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
-] }), Ni = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Pi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.09a2 2 0 0 1-1-1.74v-.47a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "3" })
-] }), We = ({ className: i }) => /* @__PURE__ */ e(x, { className: i, children: /* @__PURE__ */ e("path", { d: "M20 6 9 17l-5-5" }) }), Mi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Be = ({ className: n }) => /* @__PURE__ */ e(y, { className: n, children: /* @__PURE__ */ e("path", { d: "M20 6 9 17l-5-5" }) }), Li = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M21 9V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h4" }),
   /* @__PURE__ */ e("rect", { x: "12", y: "13", width: "10", height: "7", rx: "2" })
-] }), Ti = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), $i = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("rect", { width: "18", height: "14", x: "3", y: "5", rx: "2", ry: "2" }),
   /* @__PURE__ */ e("path", { d: "M7 15h4" }),
   /* @__PURE__ */ e("path", { d: "M15 15h2" }),
   /* @__PURE__ */ e("path", { d: "M7 11h2" }),
   /* @__PURE__ */ e("path", { d: "M13 11h4" })
-] }), zi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Ze = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
   /* @__PURE__ */ e("polyline", { points: "7 10 12 15 17 10" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
-] }), Ii = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Ei = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
   /* @__PURE__ */ e("polyline", { points: "17 8 12 3 7 8" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
-] }), Ri = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Fi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "m12 19-7-7 7-7" }),
   /* @__PURE__ */ e("path", { d: "M19 12H5" })
-] }), He = ({ className: i }) => /* @__PURE__ */ e(x, { className: i, children: /* @__PURE__ */ e("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }), Pi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Fe = ({ className: n }) => /* @__PURE__ */ e(y, { className: n, children: /* @__PURE__ */ e("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }), Ai = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M2 16.1A5 5 0 0 1 5.9 20" }),
   /* @__PURE__ */ e("path", { d: "M2 12.05A9 9 0 0 1 9.95 20" }),
   /* @__PURE__ */ e("path", { d: "M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6" }),
   /* @__PURE__ */ e("line", { x1: "2", x2: "2.01", y1: "20", y2: "20" })
-] }), Li = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Bi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
   /* @__PURE__ */ e("circle", { cx: "9", cy: "7", r: "4" }),
   /* @__PURE__ */ e("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
   /* @__PURE__ */ e("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
-] }), $i = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Vi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
   /* @__PURE__ */ e("polyline", { points: "12 6 12 12 16 14" })
-] }), Ei = ({ className: i }) => /* @__PURE__ */ e(x, { className: i, children: /* @__PURE__ */ e("path", { d: "M5 12h14" }) }), Fi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Di = ({ className: n }) => /* @__PURE__ */ e(y, { className: n, children: /* @__PURE__ */ e("path", { d: "M5 12h14" }) }), Oi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M5 12h14" }),
   /* @__PURE__ */ e("path", { d: "M12 5v14" })
-] }), Ai = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), jt = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M4 21v-7" }),
   /* @__PURE__ */ e("path", { d: "M4 10V3" }),
   /* @__PURE__ */ e("path", { d: "M12 21v-9" }),
@@ -954,128 +1156,193 @@ const Ve = (i, t = 200) => {
   /* @__PURE__ */ e("path", { d: "M1 14h6" }),
   /* @__PURE__ */ e("path", { d: "M9 8h6" }),
   /* @__PURE__ */ e("path", { d: "M17 16h6" })
-] }), Bi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Hi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("polyline", { points: "4 7 4 4 20 4 20 7" }),
   /* @__PURE__ */ e("line", { x1: "9", x2: "15", y1: "20", y2: "20" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "4", y2: "20" })
-] }), At = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Ut = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor" }),
   /* @__PURE__ */ e("circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor" }),
   /* @__PURE__ */ e("circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor" }),
   /* @__PURE__ */ e("circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor" }),
   /* @__PURE__ */ e("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" })
-] }), Vi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Wi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "3" })
-] }), Oi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), ji = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("polyline", { points: "8 18 12 22 16 18" }),
   /* @__PURE__ */ e("polyline", { points: "8 6 12 2 16 6" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "2", y2: "22" })
-] }), Hi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Ui = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
   /* @__PURE__ */ e("path", { d: "M3 3v5h5" })
-] }), ji = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Gi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
   /* @__PURE__ */ e("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })
-] }), Wi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), _i = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "m3 17 4-10 4 10" }),
   /* @__PURE__ */ e("path", { d: "M4 13h6" }),
   /* @__PURE__ */ e("path", { d: "M15 12h4.5a2.5 2.5 0 0 1 0 5H15V7h4a2.5 2.5 0 0 1 0 5h-4" })
-] }), Di = ({ className: i }) => /* @__PURE__ */ e(x, { className: i, children: /* @__PURE__ */ e("path", { d: "M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z" }) }), _i = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), qi = ({ className: n }) => /* @__PURE__ */ e(y, { className: n, children: /* @__PURE__ */ e("path", { d: "M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z" }) }), Xi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("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" }),
   /* @__PURE__ */ e("circle", { cx: "12", cy: "13", r: "3" })
-] }), Gi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Qi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
   /* @__PURE__ */ e("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
-] }), Ui = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Ji = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
   /* @__PURE__ */ e("path", { d: "M7 11V7a5 5 0 0 1 9.9-1" })
-] }), qi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Ki = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
   /* @__PURE__ */ e("line", { x1: "8", x2: "16", y1: "21", y2: "21" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "17", y2: "21" })
-] }), Qi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Yi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("polygon", { points: "13 19 22 12 13 5 13 19" }),
   /* @__PURE__ */ e("polygon", { points: "2 19 11 12 2 5 2 19" })
-] }), Xi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Gt = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M18 6 6 18" }),
   /* @__PURE__ */ e("path", { d: "m6 6 12 12" })
-] }), Ji = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), Zi = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
   /* @__PURE__ */ e("path", { d: "M12 16v-4" }),
   /* @__PURE__ */ e("path", { d: "M12 8h.01" })
-] }), Ki = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), en = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("rect", { width: "20", height: "8", x: "2", y: "2", rx: "2", ry: "2" }),
   /* @__PURE__ */ e("rect", { width: "20", height: "8", x: "2", y: "14", rx: "2", ry: "2" }),
   /* @__PURE__ */ e("line", { x1: "6", x2: "6.01", y1: "6", y2: "6" }),
   /* @__PURE__ */ e("line", { x1: "6", x2: "6.01", y1: "18", y2: "18" })
-] }), Yi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
-  /* @__PURE__ */ e("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
-  /* @__PURE__ */ e("polyline", { points: "2 17 12 22 22 17" }),
-  /* @__PURE__ */ e("polyline", { points: "2 12 12 17 22 12" })
-] }), Zi = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), tn = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M6 2v14a2 2 0 0 0 2 2h14" }),
   /* @__PURE__ */ e("path", { d: "M18 22V8a2 2 0 0 0-2-2H2" })
-] }), en = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), nn = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("rect", { width: "16", height: "20", x: "4", y: "2", rx: "2" }),
   /* @__PURE__ */ e("circle", { cx: "12", cy: "14", r: "4" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12.01", y1: "6", y2: "6" })
-] }), tn = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), sn = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "m12 14 4-4" }),
   /* @__PURE__ */ e("path", { d: "M3.34 19a10 10 0 1 1 17.32 0" })
-] }), nn = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), on = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M9 18V5l12-2v13" }),
   /* @__PURE__ */ e("circle", { cx: "6", cy: "18", r: "3" }),
   /* @__PURE__ */ e("circle", { cx: "18", cy: "16", r: "3" })
-] }), sn = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
-  /* @__PURE__ */ e("polyline", { points: "16 16 12 20 8 16" }),
-  /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "20", y2: "10" }),
-  /* @__PURE__ */ e("path", { d: "M12 4a8 8 0 0 1 8 8" }),
-  /* @__PURE__ */ e("path", { d: "M20 4v8" }),
-  /* @__PURE__ */ e("path", { d: "M4 4v8" }),
-  /* @__PURE__ */ e("path", { d: "M4 12a8 8 0 0 1 8-8" })
-] }), on = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), rn = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("path", { d: "M5 12.55a11 11 0 0 1 14.08 0" }),
   /* @__PURE__ */ e("path", { d: "M1.42 9a16 16 0 0 1 21.16 0" }),
   /* @__PURE__ */ e("path", { d: "M8.53 16.11a6 6 0 0 1 6.95 0" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12.01", y1: "20", y2: "20" })
-] }), rn = ({ className: i }) => /* @__PURE__ */ d(x, { className: i, children: [
+] }), et = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
   /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
   /* @__PURE__ */ e("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
-] }), Rt = ({ className: i }) => /* @__PURE__ */ d("div", { className: `relative flex items-center justify-center ${i}`, children: [
-  /* @__PURE__ */ d(x, { className: "w-full h-full", children: [
+] }), an = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
+  /* @__PURE__ */ e("path", { d: "M2 20h.01" }),
+  /* @__PURE__ */ e("path", { d: "M7 20v-4" }),
+  /* @__PURE__ */ e("path", { d: "M12 20v-8" }),
+  /* @__PURE__ */ e("path", { d: "M17 20V8" }),
+  /* @__PURE__ */ e("path", { d: "M22 20V4" })
+] }), ln = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
+  /* @__PURE__ */ e("path", { d: "M21 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }),
+  /* @__PURE__ */ e("path", { d: "M16 2v4" }),
+  /* @__PURE__ */ e("path", { d: "M8 2v4" }),
+  /* @__PURE__ */ e("path", { d: "M3 12h18" })
+] }), cn = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
+  /* @__PURE__ */ e("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ e("path", { d: "m21 21-4.3-4.3" })
+] }), _t = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
+  /* @__PURE__ */ e("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
+  /* @__PURE__ */ e("polyline", { points: "14 2 14 8 20 8" }),
+  /* @__PURE__ */ e("path", { d: "m9 15 2 2 4-4" })
+] }), dn = ({ className: n }) => /* @__PURE__ */ d(y, { className: n, children: [
+  /* @__PURE__ */ e("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
+  /* @__PURE__ */ e("polyline", { points: "14 2 14 8 20 8" }),
+  /* @__PURE__ */ e("path", { d: "M12 18h.01" }),
+  /* @__PURE__ */ e("path", { d: "M12 12v4" })
+] }), At = ({ className: n }) => /* @__PURE__ */ d("div", { className: `relative flex items-center justify-center ${n}`, children: [
+  /* @__PURE__ */ d(y, { className: "w-full h-full", children: [
     /* @__PURE__ */ e("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
     /* @__PURE__ */ e("path", { d: "M3 3v5h5" })
   ] }),
   /* @__PURE__ */ e("span", { className: "absolute inset-0 flex items-center justify-center text-[32%] font-bold select-none mt-[1px]", children: "10" })
-] }), Pt = ({ className: i }) => /* @__PURE__ */ d("div", { className: `relative flex items-center justify-center ${i}`, children: [
-  /* @__PURE__ */ d(x, { className: "w-full h-full", children: [
+] }), Bt = ({ className: n }) => /* @__PURE__ */ d("div", { className: `relative flex items-center justify-center ${n}`, children: [
+  /* @__PURE__ */ d(y, { className: "w-full h-full", children: [
     /* @__PURE__ */ e("path", { d: "M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
     /* @__PURE__ */ e("path", { d: "M21 3v5h-5" })
   ] }),
   /* @__PURE__ */ e("span", { className: "absolute inset-0 flex items-center justify-center text-[32%] font-bold select-none mt-[1px]", children: "10" })
-] }), an = ({ notifications: i }) => /* @__PURE__ */ e("div", { className: "absolute top-4 left-4 z-25 flex flex-col gap-2 pointer-events-none font-sans max-w-[85%] md:max-w-[320px]", children: i.map((t) => /* @__PURE__ */ d(
-  "div",
-  {
-    className: `
-                        bg-zinc-950/90 backdrop-blur-md border border-white/10 text-white px-3 py-2 rounded-lg shadow-xl text-xs font-medium flex items-start gap-2.5 animate-in slide-in-from-left-2 fade-in duration-300 pointer-events-auto
-                        w-fit max-w-full
-                        ${t.type === "error" ? "border-red-500/50 text-red-100" : ""}
-                        ${t.type === "warning" ? "border-amber-500/50 text-amber-100" : ""}
-                    `,
-    children: [
-      t.type === "loading" && /* @__PURE__ */ e(He, { className: "w-3.5 h-3.5 animate-spin text-[var(--accent)] shrink-0 mt-0.5" }),
-      /* @__PURE__ */ d("div", { className: "flex flex-col gap-1 min-w-0", children: [
-        /* @__PURE__ */ e("span", { className: "break-words line-clamp-4 leading-relaxed whitespace-pre-wrap", children: t.message }),
-        typeof t.progress == "number" && /* @__PURE__ */ e("div", { className: "h-0.5 w-full bg-white/10 rounded-full overflow-hidden mt-1.5", children: /* @__PURE__ */ e("div", { className: "h-full bg-[var(--accent)] transition-all duration-300", style: { width: `${t.progress}%` } }) })
+] }), un = ({
+  notifications: n
+}) => /* @__PURE__ */ e("div", { className: "absolute top-4 left-4 z-[100] flex flex-col gap-2 pointer-events-none font-sans max-w-[85%] md:max-w-[280px]", children: n.map((t) => {
+  const i = typeof t.progress == "number";
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: `
+                            relative overflow-hidden bg-zinc-950/80 backdrop-blur-xl border border-white/10 text-zinc-100 shadow-2xl rounded-lg pointer-events-auto
+                            animate-in slide-in-from-left-4 fade-in duration-300
+                            ${i ? "w-64" : "w-auto max-w-full px-3 py-2.5"}
+                        `,
+      style: { borderRadius: "var(--radius)" },
+      children: i ? /* @__PURE__ */ e("div", { className: "p-3", children: /* @__PURE__ */ d("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "w-7 h-7 rounded-full bg-white/10 flex items-center justify-center text-[var(--accent)] shrink-0", children: /* @__PURE__ */ e(Ze, { className: "w-3.5 h-3.5" }) }),
+        /* @__PURE__ */ d("div", { className: "flex-1 min-w-0 pt-0.5", children: [
+          /* @__PURE__ */ d("div", { className: "flex justify-between items-baseline mb-1", children: [
+            /* @__PURE__ */ e("span", { className: "text-xs font-bold text-white tracking-tight", children: "Downloading" }),
+            /* @__PURE__ */ d("span", { className: "text-[10px] font-mono text-zinc-400", children: [
+              t.progress,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ e("p", { className: "text-[10px] text-zinc-400 mb-2 leading-tight whitespace-pre-wrap", children: t.message.replace(/Downloading\.\.\. \d+%/, "").trim() || "Processing..." }),
+          /* @__PURE__ */ e("div", { className: "h-0.5 w-full bg-white/10 rounded-full overflow-hidden", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: "h-full bg-[var(--accent)] transition-all duration-300 ease-out",
+              style: { width: `${t.progress}%` }
+            }
+          ) })
+        ] }),
+        t.action && /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: (o) => {
+              var r;
+              o.stopPropagation(), (r = t.action) == null || r.onClick();
+            },
+            className: "text-zinc-500 hover:text-zinc-200 transition-colors p-1 -mt-1.5 -mr-1.5",
+            title: t.action.label,
+            children: /* @__PURE__ */ e(Gt, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] }) }) : /* @__PURE__ */ d("div", { className: "flex items-start gap-2.5", children: [
+        t.type === "loading" && /* @__PURE__ */ e(Fe, { className: "w-3.5 h-3.5 animate-spin text-[var(--accent)] shrink-0 mt-0.5" }),
+        t.type === "success" && /* @__PURE__ */ e(Be, { className: "w-3.5 h-3.5 text-emerald-500 shrink-0 mt-0.5" }),
+        t.type === "error" && /* @__PURE__ */ e(et, { className: "w-3.5 h-3.5 text-red-500 shrink-0 mt-0.5" }),
+        t.type === "warning" && /* @__PURE__ */ e(et, { className: "w-3.5 h-3.5 text-amber-500 shrink-0 mt-0.5" }),
+        t.type === "info" && /* @__PURE__ */ e("div", { className: "w-1.5 h-1.5 rounded-full bg-[var(--accent)] mt-1.5 shrink-0" }),
+        /* @__PURE__ */ d("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
+          /* @__PURE__ */ e("span", { className: "text-xs font-medium leading-snug break-words text-zinc-200 whitespace-pre-wrap", children: t.message }),
+          t.action && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: (o) => {
+                var r;
+                o.stopPropagation(), (r = t.action) == null || r.onClick();
+              },
+              className: "mt-1 self-start text-[10px] font-bold text-[var(--accent)] hover:text-white transition-colors uppercase tracking-wider",
+              children: t.action.label
+            }
+          )
+        ] })
       ] })
-    ]
-  },
-  t.id
-)) }), ln = ({ cues: i, settings: t }) => {
-  if (t.useNative || i.length === 0) return null;
-  const n = () => {
+    },
+    t.id
+  );
+}) }), hn = ({
+  cues: n,
+  settings: t
+}) => {
+  if (t.useNative || n.length === 0) return null;
+  const i = () => {
     switch (t.textStyle) {
       case "outline":
         return "0px 0px 4px black, 0px 0px 4px black";
@@ -1096,7 +1363,7 @@ const Ve = (i, t = 200) => {
       style: {
         bottom: `${t.verticalOffset}px`
       },
-      children: i.map((o, l) => /* @__PURE__ */ e(
+      children: n.map((o, r) => /* @__PURE__ */ e(
         "div",
         {
           className: "mb-1 inline-block max-w-[80%]",
@@ -1105,8 +1372,9 @@ const Ve = (i, t = 200) => {
             color: t.textColor,
             fontWeight: t.isBold ? "bold" : "normal",
             textTransform: t.fixCapitalization ? "capitalize" : "none",
-            textShadow: n(),
-            lineHeight: 1.4
+            textShadow: i(),
+            lineHeight: 1.4,
+            whiteSpace: "pre-line"
           },
           children: /* @__PURE__ */ e(
             "span",
@@ -1120,27 +1388,27 @@ const Ve = (i, t = 200) => {
             }
           )
         },
-        l
+        r
       ))
     }
   );
-}, xe = ({ content: i }) => typeof i == "string" ? i.trim().startsWith("<") ? /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: i } }) : /* @__PURE__ */ e("span", { children: i }) : /* @__PURE__ */ e(B, { children: i }), q = ({ label: i, checked: t, onChange: n, icon: o, tooltip: l }) => /* @__PURE__ */ d(
+}, Ae = ({ content: n }) => typeof n == "string" ? n.trim().startsWith("<") ? /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: n } }) : /* @__PURE__ */ e("span", { children: n }) : /* @__PURE__ */ e(_, { children: n }), oe = ({ label: n, checked: t, onChange: i, icon: o, tooltip: r }) => /* @__PURE__ */ d(
   "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: [
-        o && /* @__PURE__ */ e("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ e(xe, { content: o }) }),
+        o && /* @__PURE__ */ e("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ e(Ae, { content: o }) }),
         /* @__PURE__ */ d("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ e("span", { className: "text-sm text-zinc-300 font-medium group-hover:text-white transition-colors flex items-center", children: /* @__PURE__ */ e(xe, { content: i }) }),
-          l && /* @__PURE__ */ e("span", { className: "text-[10px] text-zinc-500", children: l })
+          /* @__PURE__ */ e("span", { className: "text-sm text-zinc-300 font-medium group-hover:text-white transition-colors flex items-center", children: /* @__PURE__ */ e(Ae, { content: n }) }),
+          r && /* @__PURE__ */ e("span", { className: "text-[10px] text-zinc-500", children: r })
         ] })
       ] }),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => n(!t),
+          onClick: () => i(!t),
           className: `w-11 h-6 shrink-0 transition-colors relative focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-zinc-900 ${t ? "bg-[var(--accent)]" : "bg-zinc-700"}`,
           style: {
             "--tw-ring-color": "var(--accent)",
@@ -1162,7 +1430,7 @@ const Ve = (i, t = 200) => {
       )
     ]
   }
-), le = ({ label: i, value: t, min: n, max: o, step: l, onChange: u, formatValue: h, icon: v }) => /* @__PURE__ */ d(
+), we = ({ label: n, value: t, min: i, max: o, step: r, onChange: h, formatValue: u, icon: f }) => /* @__PURE__ */ d(
   "div",
   {
     className: "py-2.5 px-3 hover:bg-white/5 group transition-colors",
@@ -1170,15 +1438,15 @@ const Ve = (i, t = 200) => {
     children: [
       /* @__PURE__ */ d("div", { className: "flex justify-between items-center mb-2", children: [
         /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
-          v && /* @__PURE__ */ e("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ e(xe, { content: v }) }),
-          /* @__PURE__ */ e("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: i })
+          f && /* @__PURE__ */ e("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ e(Ae, { content: f }) }),
+          /* @__PURE__ */ e("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: n })
         ] }),
         /* @__PURE__ */ e(
           "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: h ? h(t) : t
+            children: u ? u(t) : t
           }
         )
       ] }),
@@ -1187,15 +1455,15 @@ const Ve = (i, t = 200) => {
           "input",
           {
             type: "range",
-            min: n,
+            min: i,
             max: o,
-            step: l,
+            step: r,
             value: t,
-            onChange: (w) => u(parseFloat(w.target.value)),
+            onChange: (g) => h(parseFloat(g.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) ${(t - n) / (o - n) * 100}%, #3f3f46 ${(t - n) / (o - n) * 100}%, #3f3f46 100%)`,
+              background: `linear-gradient(to right, var(--accent) 0%, var(--accent) ${(t - i) / (o - i) * 100}%, #3f3f46 ${(t - i) / (o - i) * 100}%, #3f3f46 100%)`,
               "--tw-ring-color": "var(--accent)"
             }
           }
@@ -1220,61 +1488,91 @@ const Ve = (i, t = 200) => {
       ] })
     ]
   }
-), cn = ({ label: i, value: t, options: n, onChange: o, icon: l }) => /* @__PURE__ */ d(
+), pn = ({ label: n, value: t, options: i, onChange: o, icon: r }) => /* @__PURE__ */ d(
   "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: [
-        l && /* @__PURE__ */ e("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ e(xe, { content: l }) }),
-        /* @__PURE__ */ e("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: i })
+        r && /* @__PURE__ */ e("span", { className: "text-zinc-500 group-hover:text-zinc-400 transition-colors flex items-center justify-center w-4 h-4", children: /* @__PURE__ */ e(Ae, { content: r }) }),
+        /* @__PURE__ */ e("span", { className: "text-xs font-bold text-zinc-400 uppercase tracking-wider group-hover:text-zinc-300 transition-colors", children: n })
       ] }),
       /* @__PURE__ */ d("div", { className: "relative", children: [
         /* @__PURE__ */ e(
           "select",
           {
             value: t,
-            onChange: (u) => o(u.target.value),
+            onChange: (h) => o(h.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: n.map((u) => /* @__PURE__ */ e("option", { value: u.value, children: u.label }, u.value))
+            children: i.map((h) => /* @__PURE__ */ e("option", { value: h.value, children: h.label }, h.value))
           }
         ),
         /* @__PURE__ */ e("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-zinc-400", children: /* @__PURE__ */ e("svg", { width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { d: "M1 1L5 5L9 1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
       ] })
     ]
   }
-), te = ({ title: i, children: t }) => /* @__PURE__ */ d("div", { className: "py-2", children: [
-  i && /* @__PURE__ */ e("h4", { className: "px-3 text-[10px] font-bold text-[var(--accent)] uppercase tracking-wider mb-1 mt-2", children: i }),
+), me = ({ title: n, children: t }) => /* @__PURE__ */ d("div", { className: "py-2", children: [
+  n && /* @__PURE__ */ e("h4", { className: "px-3 text-[10px] font-bold text-[var(--accent)] uppercase tracking-wider mb-1 mt-2", children: n }),
   /* @__PURE__ */ e("div", { className: "space-y-0.5", children: t })
-] }), De = ({ children: i, onClose: t, align: n = "right", maxHeight: o, className: l }) => {
-  const u = A(null), h = A(null), [v, w] = S("auto"), b = n === "center" ? "left-1/2 -translate-x-1/2 origin-bottom" : "right-0 origin-bottom-right";
-  ve(() => {
-    if (!h.current) return;
-    const y = () => {
-      h.current && w(h.current.offsetHeight);
-    }, m = new ResizeObserver(y);
-    return m.observe(h.current), y(), () => m.disconnect();
+] }), it = ({
+  children: n,
+  onClose: t,
+  align: i = "right",
+  maxHeight: o,
+  className: r
+}) => {
+  const h = U(null), u = U(null), [f, g] = N("auto"), x = i === "center" ? "left-1/2 -translate-x-1/2 origin-bottom" : "right-0 origin-bottom-right";
+  Ee(() => {
+    if (!u.current) return;
+    const w = () => {
+      u.current && g(u.current.offsetHeight);
+    }, m = new ResizeObserver(w);
+    return m.observe(u.current), w(), () => m.disconnect();
   }, []);
   const p = {
-    height: v === "auto" ? "auto" : `${v + 14}px`,
+    height: f === "auto" ? "auto" : `${f + 14}px`,
     // + padding
     maxHeight: o ? `${o}px` : void 0
   };
   return /* @__PURE__ */ e(
     "div",
     {
-      ref: u,
-      className: `absolute bottom-full mb-4 ${b} 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-[height,opacity,transform] duration-300 ease-out ${l}`,
+      ref: h,
+      className: `absolute bottom-full mb-4 ${x} 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-[height,opacity,transform] duration-300 ease-out ${r}`,
       style: { ...p, borderRadius: "var(--radius-lg)" },
-      onClick: (y) => y.stopPropagation(),
-      onMouseDown: (y) => y.stopPropagation(),
-      onTouchStart: (y) => y.stopPropagation(),
-      children: /* @__PURE__ */ e("div", { className: "overflow-y-auto hide-scrollbar flex-1", style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e("div", { ref: h, children: i }) })
+      onClick: (w) => w.stopPropagation(),
+      onMouseDown: (w) => w.stopPropagation(),
+      onTouchStart: (w) => w.stopPropagation(),
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: "overflow-y-auto hide-scrollbar flex-1",
+          style: { borderRadius: "var(--radius)" },
+          children: /* @__PURE__ */ e("div", { ref: u, children: n })
+        }
+      )
     }
   );
-}, ge = ({ content: i, className: t }) => typeof i == "string" ? i.trim().startsWith("<") ? /* @__PURE__ */ e("span", { className: t, dangerouslySetInnerHTML: { __html: i } }) : /* @__PURE__ */ e("span", { className: t, children: i }) : /* @__PURE__ */ e("span", { className: t, children: i }), z = ({ label: i, value: t, active: n, onClick: o, hasSubmenu: l, icon: u, rightIcon: h }) => /* @__PURE__ */ d(
+}, ye = ({
+  content: n,
+  className: t
+}) => typeof n == "string" ? n.trim().startsWith("<") ? /* @__PURE__ */ e(
+  "span",
+  {
+    className: t,
+    dangerouslySetInnerHTML: { __html: n }
+  }
+) : /* @__PURE__ */ e("span", { className: t, children: n }) : /* @__PURE__ */ e("span", { className: t, children: n }), A = ({
+  label: n,
+  value: t,
+  active: i,
+  onClick: o,
+  hasSubmenu: r,
+  icon: h,
+  rightIcon: u
+}) => /* @__PURE__ */ d(
   "button",
   {
     onClick: o,
@@ -1282,18 +1580,36 @@ const Ve = (i, t = 200) => {
     style: { borderRadius: "var(--radius)" },
     children: [
       /* @__PURE__ */ d("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-        u && /* @__PURE__ */ e("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__ */ e(ge, { content: u }) }),
-        /* @__PURE__ */ e("span", { className: `font-medium truncate text-sm flex items-center ${n ? "text-[var(--accent)]" : ""}`, title: typeof i == "string" ? i : void 0, children: /* @__PURE__ */ e(ge, { content: i }) })
+        h && /* @__PURE__ */ e("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__ */ e(ye, { content: h }) }),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: `font-medium truncate text-sm flex items-center ${i ? "text-[var(--accent)]" : ""}`,
+            title: typeof n == "string" ? n : void 0,
+            children: /* @__PURE__ */ e(ye, { content: n })
+          }
+        )
       ] }),
       /* @__PURE__ */ d("div", { className: "flex items-center gap-2 text-zinc-400 shrink-0", children: [
-        t && /* @__PURE__ */ e("span", { className: "text-xs font-medium truncate max-w-[60px]", title: t, children: /* @__PURE__ */ e(ge, { content: t }) }),
-        h,
-        n && /* @__PURE__ */ e(We, { className: "w-4 h-4 text-[var(--accent)] shrink-0" }),
-        l && /* @__PURE__ */ e("span", { className: "text-xs group-hover:translate-x-0.5 transition-transform text-zinc-500 shrink-0", children: "›" })
+        t && /* @__PURE__ */ e(
+          "span",
+          {
+            className: "text-xs font-medium truncate max-w-[60px]",
+            title: t,
+            children: /* @__PURE__ */ e(ye, { content: t })
+          }
+        ),
+        u,
+        i && /* @__PURE__ */ e(Be, { className: "w-4 h-4 text-[var(--accent)] shrink-0" }),
+        r && /* @__PURE__ */ e("span", { className: "text-xs group-hover:translate-x-0.5 transition-transform text-zinc-500 shrink-0", children: "›" })
       ] })
     ]
   }
-), H = ({ label: i, onBack: t, rightAction: n }) => /* @__PURE__ */ d(
+), K = ({
+  label: n,
+  onBack: t,
+  rightAction: i
+}) => /* @__PURE__ */ d(
   "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",
@@ -1305,24 +1621,44 @@ const Ve = (i, t = 200) => {
           className: "flex items-center gap-2 hover:text-white transition-colors focus:outline-none",
           onClick: t,
           children: [
-            /* @__PURE__ */ e(Ri, { className: "w-3 h-3" }),
-            /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(ge, { content: i }) })
+            /* @__PURE__ */ e(Fi, { className: "w-3 h-3" }),
+            /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(ye, { content: n }) })
           ]
         }
       ),
-      n
+      i
     ]
   }
-), ee = () => /* @__PURE__ */ e("div", { className: "h-px bg-white/5 mx-2 my-1" }), dn = ({ items: i, onClose: t, title: n, maxHeight: o, className: l }) => {
-  const [u, h] = S([]), v = u.length > 0 ? u[u.length - 1] : null, w = v ? v.children || [] : i, b = v ? v.html : n || "Menu", p = () => {
-    h((m) => m.slice(0, -1));
-  }, y = (m) => {
-    m.children && h((T) => [...T, m]);
+), pe = () => /* @__PURE__ */ e("div", { className: "h-px bg-white/5 mx-2 my-1" }), Vt = ({
+  items: n,
+  onClose: t,
+  title: i,
+  maxHeight: o,
+  className: r
+}) => {
+  const [h, u] = N([]), f = h.length > 0 ? h[h.length - 1] : null, g = f ? f.children || [] : n, x = f ? f.html : i || "Menu", p = () => {
+    u((m) => m.slice(0, -1));
+  }, w = (m) => {
+    m.children && u((T) => [...T, m]);
   };
-  return /* @__PURE__ */ e(De, { onClose: t, maxHeight: o, className: l, children: /* @__PURE__ */ d("div", { className: "animate-in fade-in slide-in-from-right-4 duration-200", children: [
-    u.length > 0 ? /* @__PURE__ */ e(H, { label: b || "Menu", onBack: p }) : n && /* @__PURE__ */ e("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__ */ e("span", { children: n }) }),
-    /* @__PURE__ */ e("div", { className: "pb-1", children: w.map((m, T) => m.separator ? /* @__PURE__ */ e(ee, {}, T) : m.range ? /* @__PURE__ */ e("div", { className: "px-1", children: /* @__PURE__ */ e(
-      le,
+  return /* @__PURE__ */ e(it, { onClose: t, maxHeight: o, className: r, children: /* @__PURE__ */ d("div", { className: "animate-in fade-in slide-in-from-right-4 duration-200", children: [
+    h.length > 0 ? /* @__PURE__ */ e(K, { label: x || "Menu", onBack: p }) : i && /* @__PURE__ */ e(
+      "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__ */ e("span", { children: i })
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "pb-1", children: g.map((m, T) => m.separator ? /* @__PURE__ */ e(pe, {}, T) : m.isLabel ? /* @__PURE__ */ e(
+      "div",
+      {
+        className: "px-3 py-1.5 text-[10px] font-bold text-zinc-500 uppercase tracking-wider select-none",
+        children: /* @__PURE__ */ e(ye, { content: m.html || "" })
+      },
+      T
+    ) : m.range ? /* @__PURE__ */ e("div", { className: "px-1", children: /* @__PURE__ */ e(
+      we,
       {
         label: m.html,
         icon: m.icon,
@@ -1330,20 +1666,20 @@ const Ve = (i, t = 200) => {
         min: m.min ?? 0,
         max: m.max ?? 100,
         step: m.step ?? 1,
-        onChange: ($) => m.onRange && m.onRange($),
+        onChange: (I) => m.onRange && m.onRange(I),
         formatValue: m.formatValue
       }
     ) }, T) : m.switch !== void 0 ? /* @__PURE__ */ e("div", { className: "px-1", children: /* @__PURE__ */ e(
-      q,
+      oe,
       {
         label: m.html,
         icon: m.icon,
         checked: m.switch,
         tooltip: m.tooltip,
-        onChange: ($) => m.onSwitch && m.onSwitch(m, $)
+        onChange: (I) => m.onSwitch && m.onSwitch(m, I)
       }
-    ) }, T) : /* @__PURE__ */ e(ce.Fragment, { children: /* @__PURE__ */ e(
-      z,
+    ) }, T) : /* @__PURE__ */ e(ke.Fragment, { children: /* @__PURE__ */ e(
+      A,
       {
         label: m.html,
         icon: m.icon,
@@ -1351,313 +1687,410 @@ const Ve = (i, t = 200) => {
         active: m.active,
         hasSubmenu: !!m.children,
         onClick: () => {
-          m.children ? y(m) : m.onClick ? (m.onClick(m), !m.switch && !m.range && t()) : m.click && (m.click(m), t());
+          m.children ? w(m) : m.onClick ? (m.onClick(m), !m.switch && !m.range && t()) : m.click && (m.click(m), t());
         }
       }
     ) }, T)) })
   ] }) });
-}, un = ({ tracks: i, current: t, onSelect: n, onUpload: o, onClose: l, settings: u, onSettingsChange: h, onReset: v, offset: w, onOffsetChange: b, maxHeight: p, animationClass: y }) => {
-  const [m, T] = S("main"), $ = A(null);
-  return /* @__PURE__ */ d(De, { onClose: l, align: "right", maxHeight: p, className: y, children: [
-    m === "main" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
-      /* @__PURE__ */ e(
-        "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__ */ e("span", { children: "Subtitles" })
-        }
-      ),
-      /* @__PURE__ */ d("div", { children: [
-        /* @__PURE__ */ e(
-          z,
-          {
-            label: "Upload Subtitle",
-            icon: /* @__PURE__ */ e(Ii, { className: "w-4 h-4" }),
-            onClick: () => {
-              var g;
-              return (g = $.current) == null ? void 0 : g.click();
-            }
-          }
-        ),
-        /* @__PURE__ */ e("input", { type: "file", accept: ".vtt,.srt", ref: $, className: "hidden", onChange: (g) => {
-          var Q;
-          (Q = g.target.files) != null && Q[0] && o(g.target.files[0]);
-        } }),
-        /* @__PURE__ */ e(
-          z,
-          {
-            label: "Customize",
-            icon: /* @__PURE__ */ e(Ai, { className: "w-4 h-4" }),
-            onClick: () => T("customize"),
-            hasSubmenu: !0
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: "h-px bg-white/5 mx-2 my-1" }),
-        /* @__PURE__ */ e(
-          z,
-          {
-            label: "Off",
-            active: t === -1,
-            onClick: () => {
-              n(-1), l();
-            }
-          }
-        ),
-        i.map((g) => /* @__PURE__ */ e(
-          z,
-          {
-            label: g.label,
-            value: g.language,
-            active: t === g.index,
-            onClick: () => {
-              n(g.index), l();
+}, mn = ({
+  tracks: n,
+  current: t,
+  onSelect: i,
+  onUpload: o,
+  onClose: r,
+  settings: h,
+  onSettingsChange: u,
+  onReset: f,
+  offset: g,
+  onOffsetChange: x,
+  maxHeight: p,
+  animationClass: w
+}) => {
+  const [m, T] = N("main"), [I, O] = N(""), Y = U(null), W = xe(() => I ? n.filter(
+    (b) => b.label.toLowerCase().includes(I.toLowerCase()) || b.srcLang && b.srcLang.toLowerCase().includes(I.toLowerCase())
+  ) : n, [n, I]);
+  return /* @__PURE__ */ d(
+    it,
+    {
+      onClose: r,
+      align: "right",
+      maxHeight: p,
+      className: w,
+      children: [
+        m === "main" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200 flex flex-col h-full", children: [
+          /* @__PURE__ */ e(
+            "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 shrink-0",
+              style: { borderRadius: "var(--radius)" },
+              children: /* @__PURE__ */ e("span", { children: "Subtitles" })
             }
-          },
-          g.index
-        ))
-      ] })
-    ] }),
-    m === "customize" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
-      /* @__PURE__ */ e(
-        H,
-        {
-          label: "Customize",
-          onBack: () => T("main"),
-          rightAction: /* @__PURE__ */ e("button", { onClick: v, className: "p-1.5 text-zinc-400 hover:text-white transition-colors rounded-md hover:bg-white/10", title: "Reset All", children: /* @__PURE__ */ e(Hi, { className: "w-4 h-4" }) })
-        }
-      ),
-      /* @__PURE__ */ d("div", { className: "pb-1", children: [
-        /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(
-          q,
-          {
-            label: "Native Video Subtitle",
-            checked: u.useNative,
-            onChange: (g) => h({ useNative: g })
-          }
-        ) }),
-        !u.useNative && /* @__PURE__ */ d(B, { children: [
-          /* @__PURE__ */ d(te, { title: "Sync & Position", children: [
-            /* @__PURE__ */ d("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
-              /* @__PURE__ */ e("div", { className: "flex justify-between items-center mb-2", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ e($i, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
-                /* @__PURE__ */ e("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__ */ e(
-                  "button",
-                  {
-                    onClick: () => b(Math.round((w - 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__ */ e(Ei, { 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: [
-                  w > 0 ? "+" : "",
-                  (w == null ? void 0 : w.toFixed(1)) || "0.0",
-                  "s"
-                ] }),
-                /* @__PURE__ */ e(
-                  "button",
-                  {
-                    onClick: () => b(Math.round((w + 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__ */ e(Fi, { className: "w-4 h-4" })
-                  }
-                )
-              ] })
-            ] }),
+          ),
+          /* @__PURE__ */ d("div", { className: "px-1.5 pb-2 shrink-0", children: [
             /* @__PURE__ */ e(
-              le,
+              A,
               {
-                label: "Vertical Position",
-                icon: /* @__PURE__ */ e(Oi, { className: "w-4 h-4" }),
-                value: u.verticalOffset,
-                min: 0,
-                max: 200,
-                step: 5,
-                onChange: (g) => h({ verticalOffset: g }),
-                formatValue: (g) => `${g}px`
+                label: "Upload Subtitle",
+                icon: /* @__PURE__ */ e(Ei, { className: "w-4 h-4" }),
+                onClick: () => {
+                  var b;
+                  return (b = Y.current) == null ? void 0 : b.click();
+                }
               }
-            )
-          ] }),
-          /* @__PURE__ */ d(te, { title: "Appearance", children: [
+            ),
             /* @__PURE__ */ e(
-              le,
+              "input",
               {
-                label: "Text Size",
-                icon: /* @__PURE__ */ e(Bi, { className: "w-4 h-4" }),
-                value: u.textSize,
-                min: 50,
-                max: 200,
-                step: 10,
-                onChange: (g) => h({ textSize: g }),
-                formatValue: (g) => `${g}%`
+                type: "file",
+                accept: ".vtt,.srt",
+                ref: Y,
+                className: "hidden",
+                onChange: (b) => {
+                  var H;
+                  (H = b.target.files) != null && H[0] && o(b.target.files[0]);
+                }
               }
             ),
-            /* @__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__ */ e(At, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
-                /* @__PURE__ */ e("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((g) => /* @__PURE__ */ e(
-                  "button",
-                  {
-                    onClick: () => h({ textColor: g }),
-                    className: `w-6 h-6 rounded-full border border-white/10 transition-transform hover:scale-110 ${u.textColor === g ? "ring-2 scale-110" : ""}`,
-                    style: { backgroundColor: g, "--tw-ring-color": "var(--accent)" }
-                  },
-                  g
-                )),
-                /* @__PURE__ */ e("div", { className: "w-px h-6 bg-white/10 mx-1" }),
-                /* @__PURE__ */ e("div", { className: "relative w-6 h-6 rounded-full overflow-hidden ring-1 ring-white/20 cursor-pointer", children: /* @__PURE__ */ e(
-                  "input",
-                  {
-                    type: "color",
-                    value: u.textColor,
-                    onChange: (g) => h({ textColor: g.target.value }),
-                    className: "absolute inset-[-4px] w-[150%] h-[150%] cursor-pointer p-0 border-0"
-                  }
-                ) })
-              ] })
-            ] }),
             /* @__PURE__ */ e(
-              cn,
+              A,
               {
-                label: "Text Style",
-                value: u.textStyle,
-                options: [
-                  { label: "None", value: "none" },
-                  { label: "Outline", value: "outline" },
-                  { label: "Raised", value: "raised" },
-                  { label: "Depressed", value: "depressed" },
-                  { label: "Drop Shadow", value: "shadow" }
-                ],
-                onChange: (g) => h({ textStyle: g })
+                label: "Customize",
+                icon: /* @__PURE__ */ e(jt, { className: "w-4 h-4" }),
+                onClick: () => T("customize"),
+                hasSubmenu: !0
               }
             ),
-            /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2 mt-1 px-1", children: [
-              /* @__PURE__ */ e(q, { label: "Bold", icon: /* @__PURE__ */ e(ji, { className: "w-4 h-4" }), checked: u.isBold, onChange: (g) => h({ isBold: g }) }),
-              /* @__PURE__ */ e(q, { label: "Fix Caps", icon: /* @__PURE__ */ e(Wi, { className: "w-4 h-4" }), checked: u.fixCapitalization, onChange: (g) => h({ fixCapitalization: g }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ d(te, { title: "Background", children: [
+            /* @__PURE__ */ e("div", { className: "h-px bg-white/5 mx-2 my-1" }),
             /* @__PURE__ */ e(
-              le,
+              A,
               {
-                label: "Opacity",
-                icon: /* @__PURE__ */ e(Vi, { className: "w-4 h-4" }),
-                value: u.backgroundOpacity,
-                min: 0,
-                max: 100,
-                step: 5,
-                onChange: (g) => h({ backgroundOpacity: g }),
-                formatValue: (g) => `${g}%`
+                label: "Off",
+                active: t === -1,
+                onClick: () => {
+                  i(-1), r();
+                }
               }
             ),
-            /* @__PURE__ */ e(q, { label: "Blur Background", icon: /* @__PURE__ */ e(Di, { className: "w-4 h-4" }), checked: u.backgroundBlur, onChange: (g) => h({ backgroundBlur: g }) }),
-            u.backgroundBlur && /* @__PURE__ */ e(
-              le,
+            /* @__PURE__ */ d("div", { className: "relative mt-2", children: [
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Search subtitles...",
+                  value: I,
+                  onChange: (b) => O(b.target.value),
+                  className: "w-full bg-zinc-800/50 border border-white/10 rounded-md py-1.5 pl-8 pr-3 text-xs text-zinc-200 focus:outline-none focus:border-white/20 transition-colors"
+                }
+              ),
+              /* @__PURE__ */ e(cn, { className: "w-3.5 h-3.5 text-zinc-500 absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none" })
+            ] })
+          ] }),
+          /* @__PURE__ */ d("div", { className: "overflow-y-auto hide-scrollbar flex-1", children: [
+            W.map((b) => {
+              let H = null;
+              return b.status === "loading" ? H = /* @__PURE__ */ e(Fe, { className: "w-3.5 h-3.5 animate-spin text-[var(--accent)]" }) : b.status === "error" ? H = /* @__PURE__ */ e(dn, { className: "w-3.5 h-3.5 text-red-500" }) : b.status === "success" && (H = /* @__PURE__ */ e(_t, { className: "w-3.5 h-3.5 text-emerald-500" })), /* @__PURE__ */ e(
+                A,
+                {
+                  label: b.label,
+                  value: b.srcLang,
+                  active: t === b.index,
+                  rightIcon: H,
+                  onClick: () => {
+                    i(b.index), r();
+                  }
+                },
+                b.index
+              );
+            }),
+            W.length === 0 && I && /* @__PURE__ */ e("div", { className: "px-4 py-3 text-center text-xs text-zinc-500", children: "No results found" })
+          ] })
+        ] }),
+        m === "customize" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
+          /* @__PURE__ */ e(
+            K,
+            {
+              label: "Customize",
+              onBack: () => T("main"),
+              rightAction: /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: f,
+                  className: "p-1.5 text-zinc-400 hover:text-white transition-colors rounded-md hover:bg-white/10",
+                  title: "Reset All",
+                  children: /* @__PURE__ */ e(Ui, { className: "w-4 h-4" })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ d("div", { className: "pb-1", children: [
+            /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(
+              oe,
               {
-                label: "Blur Intensity",
-                value: u.backgroundBlurAmount,
-                min: 0,
-                max: 20,
-                step: 1,
-                onChange: (g) => h({ backgroundBlurAmount: g }),
-                formatValue: (g) => `${g}px`
+                label: "Native Video Subtitle",
+                checked: h.useNative,
+                onChange: (b) => u({ useNative: b })
               }
-            )
+            ) }),
+            !h.useNative && /* @__PURE__ */ d(_, { children: [
+              /* @__PURE__ */ d(me, { title: "Sync & Position", children: [
+                /* @__PURE__ */ d("div", { className: "py-2.5 px-3 rounded-lg hover:bg-white/5 group transition-colors", children: [
+                  /* @__PURE__ */ e("div", { className: "flex justify-between items-center mb-2", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ e(Vi, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
+                    /* @__PURE__ */ e("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__ */ e(
+                      "button",
+                      {
+                        onClick: () => x(Math.round((g - 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__ */ e(Di, { 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: [
+                      g > 0 ? "+" : "",
+                      (g == null ? void 0 : g.toFixed(1)) || "0.0",
+                      "s"
+                    ] }),
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: () => x(Math.round((g + 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__ */ e(Oi, { className: "w-4 h-4" })
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ e(
+                  we,
+                  {
+                    label: "Vertical Position",
+                    icon: /* @__PURE__ */ e(ji, { className: "w-4 h-4" }),
+                    value: h.verticalOffset,
+                    min: 0,
+                    max: 200,
+                    step: 5,
+                    onChange: (b) => u({ verticalOffset: b }),
+                    formatValue: (b) => `${b}px`
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ d(me, { title: "Appearance", children: [
+                /* @__PURE__ */ e(
+                  we,
+                  {
+                    label: "Text Size",
+                    icon: /* @__PURE__ */ e(Hi, { className: "w-4 h-4" }),
+                    value: h.textSize,
+                    min: 50,
+                    max: 200,
+                    step: 10,
+                    onChange: (b) => u({ textSize: b }),
+                    formatValue: (b) => `${b}%`
+                  }
+                ),
+                /* @__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__ */ e(Ut, { className: "w-4 h-4 text-zinc-500 group-hover:text-zinc-400 transition-colors" }),
+                    /* @__PURE__ */ e("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((b) => /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: () => u({ textColor: b }),
+                        className: `w-6 h-6 rounded-full border border-white/10 transition-transform hover:scale-110 ${h.textColor === b ? "ring-2 scale-110" : ""}`,
+                        style: {
+                          backgroundColor: b,
+                          "--tw-ring-color": "var(--accent)"
+                        }
+                      },
+                      b
+                    )),
+                    /* @__PURE__ */ e("div", { className: "w-px h-6 bg-white/10 mx-1" }),
+                    /* @__PURE__ */ e("div", { className: "relative w-6 h-6 rounded-full overflow-hidden ring-1 ring-white/20 cursor-pointer", children: /* @__PURE__ */ e(
+                      "input",
+                      {
+                        type: "color",
+                        value: h.textColor,
+                        onChange: (b) => u({ textColor: b.target.value }),
+                        className: "absolute inset-[-4px] w-[150%] h-[150%] cursor-pointer p-0 border-0"
+                      }
+                    ) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ e(
+                  pn,
+                  {
+                    label: "Text Style",
+                    value: h.textStyle,
+                    options: [
+                      { label: "None", value: "none" },
+                      { label: "Outline", value: "outline" },
+                      { label: "Raised", value: "raised" },
+                      { label: "Depressed", value: "depressed" },
+                      { label: "Drop Shadow", value: "shadow" }
+                    ],
+                    onChange: (b) => u({
+                      textStyle: b
+                    })
+                  }
+                ),
+                /* @__PURE__ */ d("div", { className: "grid grid-cols-2 gap-2 mt-1 px-1", children: [
+                  /* @__PURE__ */ e(
+                    oe,
+                    {
+                      label: "Bold",
+                      icon: /* @__PURE__ */ e(Gi, { className: "w-4 h-4" }),
+                      checked: h.isBold,
+                      onChange: (b) => u({ isBold: b })
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    oe,
+                    {
+                      label: "Fix Caps",
+                      icon: /* @__PURE__ */ e(_i, { className: "w-4 h-4" }),
+                      checked: h.fixCapitalization,
+                      onChange: (b) => u({ fixCapitalization: b })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ d(me, { title: "Background", children: [
+                /* @__PURE__ */ e(
+                  we,
+                  {
+                    label: "Opacity",
+                    icon: /* @__PURE__ */ e(Wi, { className: "w-4 h-4" }),
+                    value: h.backgroundOpacity,
+                    min: 0,
+                    max: 100,
+                    step: 5,
+                    onChange: (b) => u({ backgroundOpacity: b }),
+                    formatValue: (b) => `${b}%`
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  oe,
+                  {
+                    label: "Blur Background",
+                    icon: /* @__PURE__ */ e(qi, { className: "w-4 h-4" }),
+                    checked: h.backgroundBlur,
+                    onChange: (b) => u({ backgroundBlur: b })
+                  }
+                ),
+                h.backgroundBlur && /* @__PURE__ */ e(
+                  we,
+                  {
+                    label: "Blur Intensity",
+                    value: h.backgroundBlurAmount,
+                    min: 0,
+                    max: 20,
+                    step: 1,
+                    onChange: (b) => u({ backgroundBlurAmount: b }),
+                    formatValue: (b) => `${b}px`
+                  }
+                )
+              ] })
+            ] })
           ] })
         ] })
-      ] })
-    ] })
-  ] });
-}, Oe = ({ content: i }) => typeof i == "string" ? i.trim().startsWith("<") ? /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: i } }) : /* @__PURE__ */ e("span", { children: i }) : /* @__PURE__ */ e(B, { children: i }), hn = ({ x: i, y: t, items: n, onClose: o, containerWidth: l, containerHeight: u }) => {
-  const h = A(null), [v, w] = S({
+      ]
+    }
+  );
+}, Ye = ({ content: n }) => typeof n == "string" ? n.trim().startsWith("<") ? /* @__PURE__ */ e("span", { dangerouslySetInnerHTML: { __html: n } }) : /* @__PURE__ */ e("span", { children: n }) : /* @__PURE__ */ e(_, { children: n }), fn = ({ x: n, y: t, items: i, onClose: o, containerWidth: r, containerHeight: h }) => {
+  const u = U(null), [f, g] = N({
     top: t,
-    left: i,
+    left: n,
     opacity: 0
   });
-  return ve(() => {
-    if (!h.current) return;
-    const b = h.current.getBoundingClientRect(), p = b.width, y = b.height;
-    let m = i, T = t;
-    i + p > l - 10 && (m = i - p), m < 10 && (m = 10), m + p > l && (m = Math.max(10, l - p - 10)), t + y > u - 10 && (T = t - y);
-    let $ = u - 20;
-    T < 10 && (T = 10), T + y > u - 10 && (T = Math.max(10, u - y - 10)), w({
+  return Ee(() => {
+    if (!u.current) return;
+    const x = u.current.getBoundingClientRect(), p = x.width, w = x.height;
+    let m = n, T = t;
+    n + p > r - 10 && (m = n - p), m < 10 && (m = 10), m + p > r && (m = Math.max(10, r - p - 10)), t + w > h - 10 && (T = t - w);
+    let I = h - 20;
+    T < 10 && (T = 10), T + w > h - 10 && (T = Math.max(10, h - w - 10)), g({
       top: T,
       left: m,
-      maxHeight: $,
+      maxHeight: I,
       opacity: 1
     });
-  }, [i, t, n, l, u]), j(() => {
-    const b = (p) => {
-      h.current && !h.current.contains(p.target) && o();
+  }, [n, t, i, r, h]), Q(() => {
+    const x = (p) => {
+      u.current && !u.current.contains(p.target) && o();
     };
-    return document.addEventListener("mousedown", b), () => document.removeEventListener("mousedown", b);
+    return document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
   }, [o]), /* @__PURE__ */ e(
     "div",
     {
-      ref: h,
+      ref: u,
       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: v.top,
-        left: v.left,
-        maxHeight: v.maxHeight,
-        opacity: v.opacity,
+        top: f.top,
+        left: f.left,
+        maxHeight: f.maxHeight,
+        opacity: f.opacity,
         borderRadius: "var(--radius-lg)"
       },
-      onClick: (b) => b.stopPropagation(),
-      onMouseDown: (b) => b.stopPropagation(),
-      onTouchStart: (b) => b.stopPropagation(),
-      children: n.map((b, p) => b.separator ? /* @__PURE__ */ e("div", { className: "h-0 border-t border-white/10 mx-2 my-1.5" }, p) : b.isLabel ? /* @__PURE__ */ e("div", { className: "px-3 py-1.5 text-[10px] font-bold text-zinc-500 uppercase tracking-wider select-none", children: /* @__PURE__ */ e(Oe, { content: b.html || "" }) }, p) : /* @__PURE__ */ d(ce.Fragment, { children: [
+      onClick: (x) => x.stopPropagation(),
+      onMouseDown: (x) => x.stopPropagation(),
+      onTouchStart: (x) => x.stopPropagation(),
+      children: i.map((x, p) => x.separator ? /* @__PURE__ */ e("div", { className: "h-0 border-t border-white/10 mx-2 my-1.5" }, p) : x.isLabel ? /* @__PURE__ */ e("div", { className: "px-3 py-1.5 text-[10px] font-bold text-zinc-500 uppercase tracking-wider select-none", children: /* @__PURE__ */ e(Ye, { content: x.html || "" }) }, p) : /* @__PURE__ */ d(ke.Fragment, { children: [
         /* @__PURE__ */ d(
           "button",
           {
             onClick: () => {
-              b.disabled || (b.click ? b.click(o) : b.onClick && b.onClick(o));
+              x.disabled || (x.click ? x.click(o) : x.onClick && x.onClick(o));
             },
-            disabled: b.disabled,
+            disabled: x.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__ */ d("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-                b.icon && /* @__PURE__ */ e("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__ */ e(Oe, { content: b.icon }) }),
-                /* @__PURE__ */ e("span", { className: `flex items-center font-medium truncate ${b.checked ? "text-[var(--accent)]" : ""}`, children: /* @__PURE__ */ e(Oe, { content: b.html || "" }) })
+                x.icon && /* @__PURE__ */ e("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__ */ e(Ye, { content: x.icon }) }),
+                /* @__PURE__ */ e("span", { className: `flex items-center font-medium truncate ${x.checked ? "text-[var(--accent)]" : ""}`, children: /* @__PURE__ */ e(Ye, { content: x.html || "" }) })
               ] }),
-              b.checked && /* @__PURE__ */ e(We, { className: "w-4 h-4 text-[var(--accent)] shrink-0 ml-2" })
+              x.checked && /* @__PURE__ */ e(Be, { className: "w-4 h-4 text-[var(--accent)] shrink-0 ml-2" })
             ]
           }
         ),
-        b.showBorder && /* @__PURE__ */ e("div", { className: "h-0 border-t border-white/10 mx-2 my-1" })
+        x.showBorder && /* @__PURE__ */ e("div", { className: "h-0 border-t border-white/10 mx-2 my-1" })
       ] }, p))
     }
   );
-}, pn = ({ player: i, onClose: t }) => {
-  const [n, o] = S({});
-  return j(() => {
-    const l = () => {
-      var w;
-      if (!i.video) return;
-      const h = i.video, v = h.getVideoPlaybackQuality ? h.getVideoPlaybackQuality() : null;
+}, bn = ({ player: n, onClose: t }) => {
+  const [i, o] = N({});
+  return Q(() => {
+    const r = () => {
+      var g;
+      if (!n.video) return;
+      const u = n.video, f = u.getVideoPlaybackQuality ? u.getVideoPlaybackQuality() : null;
       o({
-        "Player Size": `${h.offsetWidth} x ${h.offsetHeight}`,
-        "Video Resolution": `${h.videoWidth} x ${h.videoHeight}`,
-        "Current Time": `${h.currentTime.toFixed(3)}s`,
-        Duration: `${h.duration.toFixed(3)}s`,
-        Volume: `${Math.round(h.volume * 100)}%`,
-        "Dropped Frames": v ? v.droppedVideoFrames : "N/A",
-        Buffer: h.buffered.length > 0 ? `${(h.buffered.end(h.buffered.length - 1) - h.currentTime).toFixed(2)}s` : "0s",
-        Engine: ((w = i.store.get().sources[i.store.get().currentSourceIndex]) == null ? void 0 : w.type) || "native",
-        URL: h.currentSrc
+        "Player Size": `${u.offsetWidth} x ${u.offsetHeight}`,
+        "Video Resolution": `${u.videoWidth} x ${u.videoHeight}`,
+        "Current Time": `${u.currentTime.toFixed(3)}s`,
+        Duration: `${u.duration.toFixed(3)}s`,
+        Volume: `${Math.round(u.volume * 100)}%`,
+        "Dropped Frames": f ? f.droppedVideoFrames : "N/A",
+        Buffer: u.buffered.length > 0 ? `${(u.buffered.end(u.buffered.length - 1) - u.currentTime).toFixed(2)}s` : "0s",
+        Engine: ((g = n.store.get().sources[n.store.get().currentSourceIndex]) == null ? void 0 : g.type) || "native",
+        URL: u.currentSrc
       });
     };
-    l();
-    const u = setInterval(l, 1e3);
-    return () => clearInterval(u);
-  }, [i]), /* @__PURE__ */ e("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__ */ d(
+    r();
+    const h = setInterval(r, 1e3);
+    return () => clearInterval(h);
+  }, [n]), /* @__PURE__ */ e("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__ */ d(
     "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",
@@ -1667,234 +2100,243 @@ const Ve = (i, t = 200) => {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: (l) => {
-                l.stopPropagation(), t();
+              onClick: (r) => {
+                r.stopPropagation(), t();
               },
               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__ */ e(Xi, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ e(Gt, { className: "w-4 h-4" })
             }
           ),
           /* @__PURE__ */ e("h3", { className: "text-sm font-bold text-white mb-4 uppercase tracking-wider border-b border-white/10 pb-2", children: "Video Statistics" })
         ] }),
-        /* @__PURE__ */ e("div", { className: "overflow-y-auto hide-scrollbar p-5 pt-0 space-y-2.5 flex-1 min-h-0", children: Object.entries(n).map(([l, u]) => /* @__PURE__ */ d("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1", children: [
-          /* @__PURE__ */ e("span", { className: "text-zinc-500 font-bold shrink-0", children: l }),
-          /* @__PURE__ */ e("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(u), children: String(u) })
-        ] }, l)) })
+        /* @__PURE__ */ e("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(([r, h]) => /* @__PURE__ */ d("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1", children: [
+          /* @__PURE__ */ e("span", { className: "text-zinc-500 font-bold shrink-0", children: r }),
+          /* @__PURE__ */ e("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(h), children: String(h) })
+        ] }, r)) })
       ]
     }
   ) });
 };
-function mn(i) {
-  if (!i) return "#ffffff";
-  i = i.replace("#", ""), i.length === 3 && (i = i.split("").map((u) => u + u).join(""));
-  const t = parseInt(i.substring(0, 2), 16), n = parseInt(i.substring(2, 4), 16), o = parseInt(i.substring(4, 6), 16);
-  return (t * 299 + n * 587 + o * 114) / 1e3 >= 128 ? "#000000" : "#ffffff";
+function gn(n) {
+  if (!n) return "#ffffff";
+  n = n.replace("#", ""), n.length === 3 && (n = n.split("").map((h) => h + h).join(""));
+  const t = parseInt(n.substring(0, 2), 16), i = parseInt(n.substring(2, 4), 16), o = parseInt(n.substring(4, 6), 16);
+  return (t * 299 + i * 587 + o * 114) / 1e3 >= 128 ? "#000000" : "#ffffff";
 }
-const fn = [
+const vn = [
   { label: "Strata", value: "#6366f1" },
   { label: "Emerald", value: "#10b981" },
   { label: "Rose", value: "#f43f5e" },
   { label: "Amber", value: "#f59e0b" },
   { label: "Sky", value: "#0ea5e9" },
   { label: "Violet", value: "#8b5cf6" }
-], bn = [
+], xn = [
   { label: "Default", value: "default", color: "#6366f1" },
   { label: "Pixel", value: "pixel", color: "#ef4444" },
   { label: "Game", value: "game", color: "#eab308" },
   { label: "Hacker", value: "hacker", color: "#22c55e" }
-], Lt = ({ content: i, className: t, style: n }) => typeof i == "string" ? i.trim().startsWith("<") ? /* @__PURE__ */ e("div", { className: t, style: n, dangerouslySetInnerHTML: { __html: i } }) : /* @__PURE__ */ e("div", { className: t, style: n, children: i }) : /* @__PURE__ */ e("div", { className: t, style: n, children: i }), $t = (i) => {
-  var Nt, Mt;
-  const { src: t, type: n, sources: o, poster: l, autoPlay: u, thumbnails: h, textTracks: v, plugins: w, onGetInstance: b, ...p } = i, y = p.screenshot ?? !1, m = p.pip ?? !0, T = p.setting ?? !0, $ = p.fullscreen ?? !0, g = p.fullscreenWeb ?? !1, Q = p.lock ?? !1, X = p.fastForward ?? !0, Bt = p.flip ?? !0, Vt = p.aspectRatio ?? !0, _e = p.hotKey ?? !0, Ot = p.backdrop ?? !0, we = p.gestureSeek ?? !1, Ht = p.centerControls ?? !0, Ge = p.fetchTimeout ?? 3e4;
+], Dt = ({ content: n, className: t, style: i }) => typeof n == "string" ? n.trim().startsWith("<") ? /* @__PURE__ */ e("div", { className: t, style: i, dangerouslySetInnerHTML: { __html: n } }) : /* @__PURE__ */ e("div", { className: t, style: i, children: n }) : /* @__PURE__ */ e("div", { className: t, style: i, children: n }), Ot = (n) => {
+  var Lt, $t;
+  const { src: t, type: i, sources: o, poster: r, autoPlay: h, thumbnails: u, textTracks: f, plugins: g, onGetInstance: x, ...p } = n, w = p.screenshot ?? !1, m = p.pip ?? !0, T = p.setting ?? !0, I = p.fullscreen ?? !0, O = p.fullscreenWeb ?? !1, Y = p.lock ?? !1, W = p.fastForward ?? !0, b = p.flip ?? !0, H = p.aspectRatio ?? !0, k = p.hotKey ?? !0, q = p.backdrop ?? !0, $ = p.gestureSeek ?? !1, j = p.centerControls ?? !0, Z = p.fetchTimeout ?? 3e4;
   p.autoOrientation;
-  const V = A(null), [s, Ue] = S(null), [ye, ke] = S(!1), [qe, Qe] = S(0), [jt, Xe] = S(0), [Je, Wt] = S(!1), Ke = fe(() => Ft(p), []), r = di(
-    be((c) => s ? s.store.subscribe(c) : () => {
+  const P = U(null), [s, ie] = N(null), [ne, le] = N(!1), [ce, Se] = N(0), [nt, Ce] = N(0), [st, qt] = N(!1), ot = xe(() => Wt(p), []), a = bi(
+    $e((c) => s ? s.store.subscribe(c) : () => {
     }, [s]),
-    () => s ? s.store.get() : Ke,
-    () => Ke
-  ), Dt = fe(() => mn(r.themeColor), [r.themeColor]), [E, ie] = S(!1), [F, Se] = S(!1), [O, R] = S("main"), [L, Ye] = S(null), Ze = A(null);
-  L && (Ze.current = L);
-  const [ne, Ce] = S({ x: 0, y: 0, visible: !1 }), [_t, et] = S(!1), tt = Ve(E, 300), it = Ve(F, 300), nt = Ve(!!L, 300), P = be(() => {
-    ie(!1), Se(!1), Ye(null), Ce((c) => ({ ...c, visible: !1 }));
-  }, []), [Ne, de] = S(!1), [ue, Me] = S(0), [Gt, st] = S(!1), [Ut, ot] = S(!1), [Te, he] = S(!1), [rt, at] = S([]), [lt, ct] = S(null), [qt, Qt] = S(0), [J, dt] = S(null), [Y, pe] = S(null), [gn, ut] = S(null), [ze, ht] = S(!1), Ie = A(null), pt = A(1), oe = A(null), mt = A(0), se = A(!1), re = A(null), K = A(null), Re = A(null), Pe = A(null), ae = A(null);
-  ve(() => {
-    s && V.current && s.attach(V.current);
-  }, [s, r.isWebFullscreen]), ve(() => {
-    if (!V.current) return;
+    () => s ? s.store.get() : ot,
+    () => ot
+  ), Xt = xe(() => gn(a.themeColor), [a.themeColor]), [B, rt] = N(!1), [V, at] = N(!1), [X, D] = N("main"), [E, Ve] = N(null), De = U(null);
+  E && (De.current = E);
+  const [se, lt] = N({ x: 0, y: 0, visible: !1 }), [Qt, ct] = N(!1), dt = Ke(B, 300), ut = Ke(V, 300), Ne = Ke(!!E, 300), C = $e(() => {
+    (B || V || E || se.visible) && (rt(!1), at(!1), Ve(null), lt((c) => ({ ...c, visible: !1 })));
+  }, [B, V, E, se.visible]);
+  Q(() => {
+    const c = (v) => {
+      (B || V || E || se.visible) && C();
+    };
+    return (B || V || E || se.visible) && (document.addEventListener("click", c), document.addEventListener("touchstart", c)), () => {
+      document.removeEventListener("click", c), document.removeEventListener("touchstart", c);
+    };
+  }, [B, V, E, se.visible, C]);
+  const [Oe, Me] = N(!1), [Te, He] = N(0), [Jt, ht] = N(!1), [Kt, pt] = N(!1), [We, ze] = N(!1), [mt, ft] = N([]), [bt, gt] = N(null), [Yt, Zt] = N(0), [re, vt] = N(null), [de, Ie] = N(null), [wn, xt] = N(null), [je, wt] = N(!1), Ue = U(null), yt = U(1), be = U(null), kt = U(0), fe = U(!1), ge = U(null), ae = U(null), Ge = U(null), _e = U(null), ve = U(null);
+  Ee(() => {
+    s && P.current && s.attach(P.current);
+  }, [s, a.isWebFullscreen]), Ee(() => {
+    if (!P.current) return;
     (() => {
-      V.current && (Qe(V.current.clientHeight), Xe(V.current.clientWidth));
+      P.current && (Se(P.current.clientHeight), Ce(P.current.clientWidth));
     })();
-    const f = new ResizeObserver((k) => {
-      for (const N of k)
-        Qe(N.contentRect.height), Xe(N.contentRect.width);
+    const v = new ResizeObserver((S) => {
+      for (const M of S)
+        Se(M.contentRect.height), Ce(M.contentRect.width);
     });
-    return f.observe(V.current), () => {
-      f.disconnect();
+    return v.observe(P.current), () => {
+      v.disconnect();
     };
-  }, [r.isWebFullscreen]), j(() => {
-    if (Wt("ontouchstart" in window || navigator.maxTouchPoints > 0), !V.current) return;
-    const c = new xi({ ...p, poster: l });
-    return w && w.length > 0 && w.forEach((f) => c.use(f)), c.attach(V.current), Ue(c), b && b(c), () => {
-      c.destroy(), Ue(null);
+  }, [a.isWebFullscreen]), Q(() => {
+    if (qt("ontouchstart" in window || navigator.maxTouchPoints > 0), !P.current) return;
+    const c = new Ni({ ...p, poster: r });
+    return g && g.length > 0 && g.forEach((v) => c.use(v)), c.attach(P.current), ie(c), x && x(c), () => {
+      c.destroy(), ie(null);
     };
-  }, []), j(() => {
+  }, []), Q(() => {
     if (!s) return;
     const c = {};
-    p.theme !== void 0 && p.theme !== r.theme && (c.theme = p.theme), p.themeColor !== void 0 && p.themeColor !== r.themeColor && (c.themeColor = p.themeColor), p.iconSize !== void 0 && p.iconSize !== r.iconSize && (c.iconSize = p.iconSize), Object.keys(c).length > 0 && s.setAppearance(c), p.volume !== void 0 && Math.abs(p.volume - r.volume) > 0.01 && s.setVolume(p.volume), p.muted !== void 0 && p.muted !== r.isMuted && (p.muted ? s.video.muted = !0 : s.video.muted = !1);
-  }, [s, p.theme, p.themeColor, p.iconSize, p.volume, p.muted]), j(() => {
+    p.theme !== void 0 && p.theme !== a.theme && (c.theme = p.theme), p.themeColor !== void 0 && p.themeColor !== a.themeColor && (c.themeColor = p.themeColor), p.iconSize !== void 0 && p.iconSize !== a.iconSize && (c.iconSize = p.iconSize), Object.keys(c).length > 0 && s.setAppearance(c), p.volume !== void 0 && Math.abs(p.volume - a.volume) > 0.01 && s.setVolume(p.volume), p.muted !== void 0 && p.muted !== a.isMuted && (p.muted ? s.video.muted = !0 : s.video.muted = !1);
+  }, [s, p.theme, p.themeColor, p.iconSize, p.volume, p.muted]), Q(() => {
     if (!s) return;
-    const c = v || [];
-    o && o.length > 0 ? (ke(!1), s.setSources(o, c)) : t && (ke(!1), s.setSources([{ url: t, type: n || "auto" }], c));
-  }, [t, n, o, v, s]), j(() => {
-    s && u && s.play().catch(() => {
-      console.warn("Autoplay failed (likely needs user interaction)");
+    const c = f || [];
+    o && o.length > 0 ? (le(!1), s.setSources(o, c)) : t && (le(!1), s.setSources([{ url: t, type: i || "auto" }], c));
+  }, [t, i, o, f, s]), Q(() => {
+    s && h && s.play().catch(() => {
+      s.pause(), s.store.setState({ isPlaying: !1, isBuffering: !1 }), s.notify({ type: "warning", message: "Autoplay blocked by browser. Click play to start.", duration: 5e3 });
     });
-  }, [s, u]), j(() => {
-    r.isPlaying && !ye && ke(!0);
-  }, [r.isPlaying, ye]), j(() => {
-    h && s ? gi(h, s.notify.bind(s), Ge).then((c) => at(c)) : at([]);
-  }, [h, s, Ge]), j(() => (Y && (ae.current && clearTimeout(ae.current), ae.current = setTimeout(() => {
-    pe(null);
+  }, [s, h]), Q(() => {
+    a.isPlaying && !ne && le(!0);
+  }, [a.isPlaying, ne]), Q(() => {
+    u && s ? Si(u, s.notify.bind(s), Z).then((c) => ft(c)) : ft([]);
+  }, [u, s, Z]), Q(() => (de && (ve.current && clearTimeout(ve.current), ve.current = setTimeout(() => {
+    Ie(null);
   }, 600)), () => {
-    ae.current && clearTimeout(ae.current);
-  }), [Y]), j(() => {
-    const c = (f) => {
-      var N;
-      if (!s || !_e || ((N = document.activeElement) == null ? void 0 : N.tagName) === "INPUT") return;
-      switch (f.key.toLowerCase()) {
+    ve.current && clearTimeout(ve.current);
+  }), [de]), Q(() => {
+    const c = (v) => {
+      var M;
+      if (!s || !k || ((M = document.activeElement) == null ? void 0 : M.tagName) === "INPUT") return;
+      switch (v.key.toLowerCase()) {
         case " ":
         case "k":
-          f.preventDefault(), s.togglePlay();
+          v.preventDefault(), s.togglePlay();
           break;
         case "arrowright":
-          f.preventDefault(), s.skip(5);
+          v.preventDefault(), s.skip(5);
           break;
         case "arrowleft":
-          f.preventDefault(), s.skip(-5);
+          v.preventDefault(), s.skip(-5);
           break;
         case "arrowup":
-          f.preventDefault(), s.setVolume(s.video.volume + 0.1);
+          v.preventDefault(), s.setVolume(s.video.volume + 0.1);
           break;
         case "arrowdown":
-          f.preventDefault(), s.setVolume(s.video.volume - 0.1);
+          v.preventDefault(), s.setVolume(s.video.volume - 0.1);
           break;
         case "f":
-          f.preventDefault(), s.toggleFullscreen();
+          v.preventDefault(), s.toggleFullscreen();
           break;
         case "m":
-          f.preventDefault(), s.toggleMute();
+          v.preventDefault(), s.toggleMute();
           break;
         case "escape":
-          s.store.get().isWebFullscreen && (f.preventDefault(), s.toggleWebFullscreen());
+          s.store.get().isWebFullscreen && (v.preventDefault(), s.toggleWebFullscreen());
           break;
       }
     };
     return window.addEventListener("keydown", c), () => window.removeEventListener("keydown", c);
-  }, [s, _e]);
-  const ft = () => {
-    s && (s.setControlsVisible(!0), K.current && clearTimeout(K.current), !(E || F || L) && (K.current = setTimeout(() => {
-      !r.isPlaying || E || F || L || s.setControlsVisible(!1);
+  }, [s, k]);
+  const St = () => {
+    s && (s.setControlsVisible(!0), ae.current && clearTimeout(ae.current), !(B || V || E) && (ae.current = setTimeout(() => {
+      !a.isPlaying || B || V || E || s.setControlsVisible(!1);
     }, 2500)));
   };
-  j(() => {
-    s && (!E && !F && !L && r.isPlaying ? ft() : (E || F || L) && (s.setControlsVisible(!0), K.current && clearTimeout(K.current)));
-  }, [E, F, L, r.isPlaying, s]);
-  const bt = be(() => {
-    if (!(!X || !s || !r.isPlaying || r.isLocked)) {
-      if (E || F || L) {
-        P();
+  Q(() => {
+    s && (!B && !V && !E && a.isPlaying ? St() : (B || V || E) && (s.setControlsVisible(!0), ae.current && clearTimeout(ae.current)));
+  }, [B, V, E, a.isPlaying, s]);
+  const Ct = $e(() => {
+    if (!(!W || !s || !a.isPlaying || a.isLocked)) {
+      if (B || V || E) {
+        C();
         return;
       }
-      pt.current = s.video.playbackRate, Ie.current = setTimeout(() => {
-        s.video.playbackRate = 2, ht(!0);
+      yt.current = s.video.playbackRate, Ue.current = setTimeout(() => {
+        s.video.playbackRate = 2, wt(!0);
       }, 500);
     }
-  }, [X, s, r.isPlaying, r.isLocked, E, F, L]), Le = be(() => {
-    Ie.current && clearTimeout(Ie.current), ze && s && (s.video.playbackRate = pt.current, ht(!1));
-  }, [ze, s]), Xt = (c) => {
-    if (bt(), E || F || L) {
-      P();
+  }, [W, s, a.isPlaying, a.isLocked, B, V, E]), qe = $e(() => {
+    Ue.current && clearTimeout(Ue.current), je && s && (s.video.playbackRate = yt.current, wt(!1));
+  }, [je, s]), ei = (c) => {
+    if (Ct(), B || V || E) {
+      C();
       return;
     }
-    we && !r.isLocked && (oe.current = c.touches[0].clientX, mt.current = r.currentTime, se.current = !1);
-  }, Jt = (c) => {
-    if (!r.isLocked && we && oe.current !== null) {
-      const f = c.touches[0].clientX - oe.current;
-      if (Math.abs(f) > 10 && (Le(), se.current = !0, de(!0), V.current && r.duration)) {
-        const k = V.current.getBoundingClientRect(), N = f / k.width, G = Math.max(0, Math.min(r.duration, mt.current + N * r.duration));
-        Me(G);
+    $ && !a.isLocked && (be.current = c.touches[0].clientX, kt.current = a.currentTime, fe.current = !1);
+  }, ti = (c) => {
+    if (!a.isLocked && $ && be.current !== null) {
+      const v = c.touches[0].clientX - be.current;
+      if (Math.abs(v) > 10 && (qe(), fe.current = !0, Me(!0), P.current && a.duration)) {
+        const S = P.current.getBoundingClientRect(), M = v / S.width, L = Math.max(0, Math.min(a.duration, kt.current + M * a.duration));
+        He(L);
       }
     }
-  }, Kt = (c) => {
-    if (Le(), we && se.current) {
-      s == null || s.seek(ue), de(!1), se.current = !1, oe.current = null;
+  }, ii = (c) => {
+    if (qe(), $ && fe.current) {
+      s == null || s.seek(Te), Me(!1), fe.current = !1, be.current = null;
       return;
     }
-    oe.current = null;
-  }, $e = (c) => {
-    if (!Re.current || !r.duration) return 0;
-    const f = Re.current.getBoundingClientRect(), k = "touches" in c ? c.touches[0].clientX : c.clientX;
-    return Math.max(0, Math.min(1, (k - f.left) / f.width)) * r.duration;
-  }, gt = (c) => {
-    if (c.stopPropagation(), r.isLocked) return;
-    (E || F || L) && P(), de(!0), Me($e(c));
-    const f = (N) => Me($e(N)), k = (N) => {
-      s == null || s.seek($e(N)), de(!1), document.removeEventListener("mousemove", f), document.removeEventListener("touchmove", f), document.removeEventListener("mouseup", k), document.removeEventListener("touchend", k);
+    be.current = null;
+  }, Xe = (c) => {
+    if (!Ge.current || !a.duration) return 0;
+    const v = Ge.current.getBoundingClientRect(), S = "touches" in c ? c.touches[0].clientX : c.clientX;
+    return Math.max(0, Math.min(1, (S - v.left) / v.width)) * a.duration;
+  }, Nt = (c) => {
+    if (c.stopPropagation(), a.isLocked) return;
+    (B || V || E) && C(), Me(!0), He(Xe(c));
+    const v = (M) => He(Xe(M)), S = (M) => {
+      s == null || s.seek(Xe(M)), Me(!1), document.removeEventListener("mousemove", v), document.removeEventListener("touchmove", v), document.removeEventListener("mouseup", S), document.removeEventListener("touchend", S);
     };
-    document.addEventListener("mousemove", f), document.addEventListener("touchmove", f), document.addEventListener("mouseup", k), document.addEventListener("touchend", k);
-  }, vt = (c) => {
-    if (!Pe.current) return 0;
-    const f = Pe.current.getBoundingClientRect(), k = "touches" in c ? c.touches[0].clientX : c.clientX;
-    return Math.max(0, Math.min(1, (k - f.left) / f.width));
-  }, xt = (c) => {
-    if (c.stopPropagation(), !s || r.isLocked) return;
-    st(!0), s.setVolume(vt(c));
-    const f = (N) => s.setVolume(vt(N)), k = () => {
-      st(!1), document.removeEventListener("mousemove", f), document.removeEventListener("touchmove", f), document.removeEventListener("mouseup", k), document.removeEventListener("touchend", k);
+    document.addEventListener("mousemove", v), document.addEventListener("touchmove", v), document.addEventListener("mouseup", S), document.addEventListener("touchend", S);
+  }, Mt = (c) => {
+    if (!_e.current) return 0;
+    const v = _e.current.getBoundingClientRect(), S = "touches" in c ? c.touches[0].clientX : c.clientX;
+    return Math.max(0, Math.min(1, (S - v.left) / v.width));
+  }, Tt = (c) => {
+    if (c.stopPropagation(), !s || a.isLocked) return;
+    ht(!0), s.setVolume(Mt(c));
+    const v = (M) => s.setVolume(Mt(M)), S = () => {
+      ht(!1), document.removeEventListener("mousemove", v), document.removeEventListener("touchmove", v), document.removeEventListener("mouseup", S), document.removeEventListener("touchend", S);
     };
-    document.addEventListener("mousemove", f), document.addEventListener("touchmove", f), document.addEventListener("mouseup", k), document.addEventListener("touchend", k);
-  }, Yt = (c) => {
-    if (!r.duration || r.isLive) return;
-    const f = c.currentTarget.getBoundingClientRect(), k = (c.clientX - f.left) / f.width, N = k * r.duration;
-    Qt(k * 100), ct(N), rt.length > 0 && dt(rt.find((G) => N >= G.start && N < G.end) || null);
-  }, me = (c) => {
-    !s || r.isLocked || (s.skip(c === "forward" ? 10 : -10), ut(c), setTimeout(() => ut(null), 300));
-  }, Zt = (c) => {
+    document.addEventListener("mousemove", v), document.addEventListener("touchmove", v), document.addEventListener("mouseup", S), document.addEventListener("touchend", S);
+  }, ni = (c) => {
+    if (!a.duration || a.isLive) return;
+    const v = c.currentTarget.getBoundingClientRect(), S = (c.clientX - v.left) / v.width, M = S * a.duration;
+    Zt(S * 100), gt(M), mt.length > 0 && vt(mt.find((L) => M >= L.start && M < L.end) || null);
+  }, Re = (c) => {
+    !s || a.isLocked || (s.skip(c === "forward" ? 10 : -10), xt(c), setTimeout(() => xt(null), 300));
+  }, si = (c) => {
     if (!s) return;
-    if (se.current) {
-      se.current = !1;
+    if (fe.current) {
+      fe.current = !1;
       return;
     }
-    if (E || F || L || ne.visible) {
-      P();
+    if (B || V || E || se.visible) {
+      C();
       return;
     }
-    if (Te && he(!1), s.setControlsVisible(!0), K.current && clearTimeout(K.current), K.current = setTimeout(() => {
-      !r.isPlaying || E || F || L || s.setControlsVisible(!1);
-    }, 2500), r.isLocked) return;
-    const f = c.currentTarget.getBoundingClientRect(), k = c.clientX - f.left, N = f.width, G = Date.now();
-    re.current ? (clearTimeout(re.current), re.current = null, k < N * 0.35 ? (me("rewind"), pe({ type: "rewind", id: G })) : k > N * 0.65 ? (me("forward"), pe({ type: "forward", id: G })) : s.toggleFullscreen()) : re.current = setTimeout(() => {
-      s.togglePlay(), re.current = null;
+    if (We && ze(!1), s.setControlsVisible(!0), ae.current && clearTimeout(ae.current), ae.current = setTimeout(() => {
+      !a.isPlaying || B || V || E || s.setControlsVisible(!1);
+    }, 2500), a.isLocked) return;
+    const v = c.currentTarget.getBoundingClientRect(), S = c.clientX - v.left, M = v.width, L = Date.now();
+    ge.current ? (clearTimeout(ge.current), ge.current = null, S < M * 0.35 ? (Re("rewind"), Ie({ type: "rewind", id: L })) : S > M * 0.65 ? (Re("forward"), Ie({ type: "forward", id: L })) : s.toggleFullscreen()) : ge.current = setTimeout(() => {
+      s.togglePlay(), ge.current = null;
     }, 250);
-  }, ei = (c) => {
-    var k;
-    if (c.preventDefault(), c.stopPropagation(), r.isLocked) return;
-    P();
-    const f = (k = V.current) == null ? void 0 : k.getBoundingClientRect();
-    f && requestAnimationFrame(() => {
-      Ce({
+  }, oi = (c) => {
+    var S;
+    if (c.preventDefault(), c.stopPropagation(), a.isLocked) return;
+    C();
+    const v = (S = P.current) == null ? void 0 : S.getBoundingClientRect();
+    v && requestAnimationFrame(() => {
+      lt({
         visible: !0,
-        x: c.clientX - f.left,
-        y: c.clientY - f.top
+        x: c.clientX - v.left,
+        y: c.clientY - v.top
       });
     });
-  }, ti = (c) => {
-    if (c.stopPropagation(), P(), Te) {
-      he(!1);
+  }, ri = (c) => {
+    if (c.stopPropagation(), C(), We) {
+      ze(!1);
       return;
     }
-    Je ? he(!0) : s == null || s.toggleMute();
-  }, ii = r.isMuted || r.volume === 0 ? ki : r.volume < 0.5 ? yi : wi, Ee = Math.max(100, qe - 120), ni = () => {
-    switch (r.iconSize) {
+    st ? ze(!0) : s == null || s.toggleMute();
+  }, ai = a.isMuted || a.volume === 0 ? zi : a.volume < 0.5 ? Ti : Mi, Pe = Math.max(100, ce - 120), li = () => {
+    switch (a.iconSize) {
       case "small":
         return "w-4 h-4";
       case "large":
@@ -1902,8 +2344,8 @@ const fn = [
       default:
         return "w-5 h-5";
     }
-  }, si = () => {
-    switch (r.iconSize) {
+  }, ci = () => {
+    switch (a.iconSize) {
       case "small":
         return "p-2 min-w-[32px] min-h-[32px]";
       case "large":
@@ -1911,8 +2353,8 @@ const fn = [
       default:
         return "p-2.5 min-w-[36px] min-h-[36px]";
     }
-  }, W = ni(), _ = si(), Z = (() => {
-    switch (r.iconSize) {
+  }, J = li(), ee = ci(), ue = (() => {
+    switch (a.iconSize) {
       case "small":
         return {
           playBtn: "w-14 h-14",
@@ -1935,7 +2377,7 @@ const fn = [
           skipIcon: "w-6 h-6"
         };
     }
-  })(), oi = !r.isLocked && (r.controlsVisible || !r.isPlaying || E || F || L || ne.visible), wt = Ut || Gt || Te, Fe = Ot ? "backdrop-blur-xl bg-black/80" : "bg-black/95", yt = fe(() => {
+  })(), di = !a.isLocked && (a.controlsVisible || !a.isPlaying || B || V || E || se.visible), zt = Kt || Jt || We, Le = q ? "backdrop-blur-xl bg-black/80" : "bg-black/95", It = xe(() => {
     const c = [
       { id: "play", position: "left", index: 10, isBuiltIn: !0 },
       { id: "volume", position: "left", index: 20, isBuiltIn: !0 },
@@ -1948,269 +2390,304 @@ const fn = [
       { id: "fullscreenWeb", position: "right", index: 110, isBuiltIn: !0 },
       { id: "fullscreen", position: "right", index: 120, isBuiltIn: !0 }
     ];
-    return p.controls && p.controls.forEach((f) => {
-      const k = c.find((N) => N.id === f.id);
-      k ? Object.assign(k, f) : c.push(f);
-    }), c.filter((f) => !(f.id === "screenshot" && !y || f.id === "pip" && !m || f.id === "settings" && !T || f.id === "fullscreen" && !$ || f.id === "fullscreenWeb" && !g)).sort((f, k) => f.index - k.index);
-  }, [p.controls, y, m, T, $, g]), kt = (c) => {
-    var f, k, N, G, Tt;
+    p.controls && p.controls.forEach((L) => {
+      const he = c.find((l) => l.id === L.id);
+      he ? Object.assign(he, L) : c.push(L);
+    });
+    const v = a.sources[a.currentSourceIndex] || { url: t || "", type: i || "auto" }, S = v.type === "hls" || v.url.includes(".m3u8"), M = c.find((L) => L.id === "download");
+    return M && (S ? (M.children = [
+      { html: "Download Format", isLabel: !0 },
+      {
+        html: "MPEG-TS",
+        value: "Original Stream",
+        icon: /* @__PURE__ */ e(_t, { className: "w-3.5 h-3.5" }),
+        onClick: () => s == null ? void 0 : s.download({ format: "ts" })
+      },
+      {
+        html: "MP4",
+        value: "Converted",
+        icon: /* @__PURE__ */ e(jt, { className: "w-3.5 h-3.5" }),
+        onClick: () => s == null ? void 0 : s.download({ format: "mp4" })
+      }
+    ], M.onClick = void 0) : (M.children = void 0, M.onClick = (L) => L.download())), c.filter((L) => !(L.id === "screenshot" && !w || L.id === "pip" && !m || L.id === "settings" && !T || L.id === "fullscreen" && !I || L.id === "fullscreenWeb" && !O)).sort((L, he) => L.index - he.index);
+  }, [p.controls, w, m, T, I, O, a.currentSourceIndex, a.sources, t, i]), Rt = (c) => {
+    var v, S, M, L, he;
     if (!c.isBuiltIn) {
-      const a = c.id || `ctrl-${c.index}`, I = L === a, U = I || nt.isMounted && Ze.current === a;
+      const l = c.id || `ctrl-${c.index}`, F = E === l, G = F || Ne.isMounted && De.current === l;
       return /* @__PURE__ */ d("div", { className: "relative", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onMouseDown: (C) => C.stopPropagation(),
-            onTouchStart: (C) => C.stopPropagation(),
-            onClick: (C) => {
-              if (C.stopPropagation(), c.children) {
-                const Ae = I;
-                P(), Ae || Ye(a);
+            onMouseDown: (z) => z.stopPropagation(),
+            onTouchStart: (z) => z.stopPropagation(),
+            onClick: (z) => {
+              if (z.stopPropagation(), c.children) {
+                const Qe = F;
+                C(), Qe || Ve(l);
               } else
-                P(), c.click ? c.click(s) : c.onClick && c.onClick(s);
+                C(), c.click ? c.click(s) : c.onClick && c.onClick(s);
             },
-            className: `strata-control-btn transition-colors focus:outline-none flex items-center justify-center ${_} ${I ? "text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"} ${c.className || ""}`,
+            className: `strata-control-btn transition-colors focus:outline-none flex items-center justify-center ${ee} ${F ? "text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"} ${c.className || ""}`,
             style: { borderRadius: "var(--radius)", ...c.style },
             title: c.tooltip,
-            children: /* @__PURE__ */ e(Lt, { content: c.html || "" })
+            children: /* @__PURE__ */ e(Dt, { content: c.html || "" })
           }
         ),
-        c.children && U && /* @__PURE__ */ e(
-          dn,
+        c.children && G && /* @__PURE__ */ e(
+          Vt,
           {
             items: c.children,
-            onClose: P,
-            maxHeight: Ee,
-            className: `strata-backdrop ${Fe} ${nt.isVisible ? "opacity-100 translate-y-0 scale-100 animate-in fade-in zoom-in-95 duration-300" : "opacity-0 translate-y-2 scale-95 duration-300"}`
+            onClose: C,
+            maxHeight: Pe,
+            className: `strata-backdrop ${Le} ${Ne.isVisible ? "opacity-100 translate-y-0 scale-100 animate-in fade-in zoom-in-95 duration-300" : "opacity-0 translate-y-2 scale-95 duration-300"}`
           }
         )
       ] }, c.index);
     }
     switch (c.id) {
       case "play":
-        return /* @__PURE__ */ e("button", { onMouseDown: (a) => a.stopPropagation(), onTouchStart: (a) => a.stopPropagation(), onClick: (a) => {
-          a.stopPropagation(), P(), s == null || s.togglePlay();
-        }, className: `strata-control-btn text-zinc-300 hover:text-white transition-colors hover:bg-white/10 focus:outline-none ${_}`, style: { borderRadius: "var(--radius)" }, children: r.isPlaying ? /* @__PURE__ */ e(It, { className: `${W} fill-current` }) : /* @__PURE__ */ e(zt, { className: `${W} fill-current` }) }, "play");
+        return /* @__PURE__ */ e("button", { onMouseDown: (l) => l.stopPropagation(), onTouchStart: (l) => l.stopPropagation(), onClick: (l) => {
+          l.stopPropagation(), C(), s == null || s.togglePlay();
+        }, className: `strata-control-btn text-zinc-300 hover:text-white transition-colors hover:bg-white/10 focus:outline-none ${ee}`, style: { borderRadius: "var(--radius)" }, children: a.isPlaying ? /* @__PURE__ */ e(Ft, { className: `${J} fill-current` }) : /* @__PURE__ */ e(Et, { className: `${J} fill-current` }) }, "play");
       case "volume":
         return /* @__PURE__ */ d(
           "div",
           {
             className: "flex items-center gap-2 group/vol relative",
             onMouseEnter: () => {
-              window.matchMedia("(hover: hover)").matches && ot(!0);
+              window.matchMedia("(hover: hover)").matches && pt(!0);
             },
             onMouseLeave: () => {
-              window.matchMedia("(hover: hover)").matches && ot(!1);
+              window.matchMedia("(hover: hover)").matches && pt(!1);
             },
             children: [
-              /* @__PURE__ */ e("button", { onMouseDown: (a) => a.stopPropagation(), onTouchStart: (a) => a.stopPropagation(), onClick: ti, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 focus:outline-none ${_}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(ii, { className: W }) }),
-              /* @__PURE__ */ e("div", { className: `relative h-8 flex items-center transition-all duration-300 ease-out overflow-hidden ${wt ? "w-28 opacity-100 ml-1" : "w-0 opacity-0"}`, children: /* @__PURE__ */ d("div", { ref: Pe, className: "relative w-full h-full flex items-center cursor-pointer px-2", onMouseDown: xt, onTouchStart: xt, children: [
-                /* @__PURE__ */ e("div", { className: "w-full h-1 bg-white/20 overflow-hidden", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ e("div", { className: "h-full bg-white", style: { width: `${(r.isMuted ? 0 : r.volume) * 100}%`, borderRadius: "var(--radius-full)" } }) }),
-                /* @__PURE__ */ e("div", { className: "absolute h-3 w-3 bg-white shadow-md top-1/2 -translate-y-1/2 pointer-events-none", style: { left: `calc(${(r.isMuted ? 0 : r.volume) * 100}% * 0.85 + 4px)`, borderRadius: "var(--radius-full)" } })
+              /* @__PURE__ */ e("button", { onMouseDown: (l) => l.stopPropagation(), onTouchStart: (l) => l.stopPropagation(), onClick: ri, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 focus:outline-none ${ee}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(ai, { className: J }) }),
+              /* @__PURE__ */ e("div", { className: `relative h-8 flex items-center transition-all duration-300 ease-out overflow-hidden ${zt ? "w-28 opacity-100 ml-1" : "w-0 opacity-0"}`, children: /* @__PURE__ */ d("div", { ref: _e, className: "relative w-full h-full flex items-center cursor-pointer px-2", onMouseDown: Tt, onTouchStart: Tt, children: [
+                /* @__PURE__ */ e("div", { className: "w-full h-1 bg-white/20 overflow-hidden", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ e("div", { className: "h-full bg-white", style: { width: `${(a.isMuted ? 0 : a.volume) * 100}%`, borderRadius: "var(--radius-full)" } }) }),
+                /* @__PURE__ */ e("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)" } })
               ] }) }),
-              wt && /* @__PURE__ */ e("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 + ${(r.isMuted ? 0 : r.volume) * 80}px)` }, children: r.isMuted ? "0%" : `${Math.round(r.volume * 100)}%` })
+              zt && /* @__PURE__ */ e("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 p.isLive ? /* @__PURE__ */ d("div", { className: "flex items-center gap-2 px-2 py-0.5 rounded-md border border-white/10", style: { backgroundColor: `${r.themeColor}1a`, borderColor: `${r.themeColor}33` }, children: [
-          /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full animate-pulse", style: { backgroundColor: r.themeColor } }),
-          /* @__PURE__ */ e("span", { className: "text-[10px] font-bold tracking-wider", style: { color: r.themeColor }, children: "LIVE" })
+        return p.isLive ? /* @__PURE__ */ d("div", { className: "flex items-center gap-2 px-2 py-0.5 rounded-md border border-white/10", style: { backgroundColor: `${a.themeColor}1a`, borderColor: `${a.themeColor}33` }, children: [
+          /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full animate-pulse", style: { backgroundColor: a.themeColor } }),
+          /* @__PURE__ */ e("span", { className: "text-[10px] font-bold tracking-wider", style: { color: a.themeColor }, children: "LIVE" })
         ] }, "live") : /* @__PURE__ */ d("div", { className: "text-xs font-medium text-zinc-400 font-mono select-none hidden sm:block tabular-nums", children: [
-          Be(Ne ? ue : r.currentTime),
+          Je(Oe ? Te : a.currentTime),
           " ",
           /* @__PURE__ */ e("span", { className: "text-zinc-600", children: "/" }),
           " ",
-          Be(r.duration)
+          Je(a.duration)
         ] }, "time");
       case "subtitle":
         return /* @__PURE__ */ d("div", { className: "relative", children: [
-          /* @__PURE__ */ e("button", { onMouseDown: (a) => a.stopPropagation(), onTouchStart: (a) => a.stopPropagation(), onClick: (a) => {
-            a.stopPropagation();
-            const I = F;
-            P(), I || Se(!0);
-          }, className: `strata-control-btn transition-colors focus:outline-none ${_} ${F ? "text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(Ti, { className: W }) }),
-          it.isMounted && /* @__PURE__ */ e(
-            un,
+          /* @__PURE__ */ e("button", { onMouseDown: (l) => l.stopPropagation(), onTouchStart: (l) => l.stopPropagation(), onClick: (l) => {
+            l.stopPropagation();
+            const F = V;
+            C(), F || at(!0);
+          }, className: `strata-control-btn transition-colors focus:outline-none ${ee} ${V ? "text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e($i, { className: J }) }),
+          ut.isMounted && /* @__PURE__ */ e(
+            mn,
             {
-              tracks: r.subtitleTracks,
-              current: r.currentSubtitle,
-              onSelect: (a) => s == null ? void 0 : s.setSubtitle(a),
-              onUpload: (a) => s == null ? void 0 : s.addTextTrack(a, a.name),
-              onClose: () => Se(!1),
-              settings: r.subtitleSettings,
-              onSettingsChange: (a) => s == null ? void 0 : s.updateSubtitleSettings(a),
+              tracks: a.subtitleTracks,
+              current: a.currentSubtitle,
+              onSelect: (l) => s == null ? void 0 : s.setSubtitle(l),
+              onUpload: (l) => s == null ? void 0 : s.addTextTrack(l, l.name),
+              onClose: C,
+              settings: a.subtitleSettings,
+              onSettingsChange: (l) => s == null ? void 0 : s.updateSubtitleSettings(l),
               onReset: () => s == null ? void 0 : s.resetSubtitleSettings(),
-              offset: r.subtitleOffset,
-              onOffsetChange: (a) => s == null ? void 0 : s.setSubtitleOffset(a),
-              maxHeight: Ee,
-              animationClass: `strata-backdrop ${Fe} ${it.isVisible ? "opacity-100 translate-y-0 scale-100 animate-in fade-in zoom-in-95 duration-300" : "opacity-0 translate-y-2 scale-95 duration-300"}`
+              offset: a.subtitleOffset,
+              onOffsetChange: (l) => s == null ? void 0 : s.setSubtitleOffset(l),
+              maxHeight: Pe,
+              animationClass: `strata-backdrop ${Le} ${ut.isVisible ? "opacity-100 translate-y-0 scale-100 animate-in fade-in zoom-in-95 duration-300" : "opacity-0 translate-y-2 scale-95 duration-300"}`
             }
           )
         ] }, "subtitle");
       case "screenshot":
-        return /* @__PURE__ */ e("button", { onMouseDown: (a) => a.stopPropagation(), onTouchStart: (a) => a.stopPropagation(), onClick: (a) => {
-          a.stopPropagation(), P(), s == null || s.screenshot();
-        }, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${_}`, style: { borderRadius: "var(--radius)" }, title: "Screenshot", children: /* @__PURE__ */ e(_i, { className: W }) }, "ss");
+        return /* @__PURE__ */ e("button", { onMouseDown: (l) => l.stopPropagation(), onTouchStart: (l) => l.stopPropagation(), onClick: (l) => {
+          l.stopPropagation(), C(), s == null || s.screenshot();
+        }, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${ee}`, style: { borderRadius: "var(--radius)" }, title: "Screenshot", children: /* @__PURE__ */ e(Xi, { className: J }) }, "ss");
       case "pip":
-        return /* @__PURE__ */ e("button", { onMouseDown: (a) => a.stopPropagation(), onTouchStart: (a) => a.stopPropagation(), onClick: (a) => {
-          a.stopPropagation(), P(), s == null || s.togglePip();
-        }, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${_}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(Mi, { className: W }) }, "pip");
+        return /* @__PURE__ */ e("button", { onMouseDown: (l) => l.stopPropagation(), onTouchStart: (l) => l.stopPropagation(), onClick: (l) => {
+          l.stopPropagation(), C(), s == null || s.togglePip();
+        }, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${ee}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(Li, { className: J }) }, "pip");
       case "download":
-        return /* @__PURE__ */ e("button", { onMouseDown: (a) => a.stopPropagation(), onTouchStart: (a) => a.stopPropagation(), onClick: (a) => {
-          a.stopPropagation(), P(), s == null || s.download();
-        }, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${_}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(zi, { className: W }) }, "dl");
+        if (c.children) {
+          const l = E === "download-menu", F = l || Ne.isMounted && De.current === "download-menu";
+          return /* @__PURE__ */ d("div", { className: "relative", children: [
+            /* @__PURE__ */ e("button", { onMouseDown: (G) => G.stopPropagation(), onTouchStart: (G) => G.stopPropagation(), onClick: (G) => {
+              G.stopPropagation();
+              const z = l;
+              C(), z || Ve("download-menu");
+            }, className: `strata-control-btn transition-colors hidden sm:block focus:outline-none ${ee} ${l ? "text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(Ze, { className: J }) }),
+            F && /* @__PURE__ */ e(
+              Vt,
+              {
+                items: c.children,
+                onClose: C,
+                maxHeight: Pe,
+                className: `strata-backdrop ${Le} ${Ne.isVisible ? "opacity-100 translate-y-0 scale-100 animate-in fade-in zoom-in-95 duration-300" : "opacity-0 translate-y-2 scale-95 duration-300"}`
+              }
+            )
+          ] }, "dl");
+        }
+        return /* @__PURE__ */ e("button", { onMouseDown: (l) => l.stopPropagation(), onTouchStart: (l) => l.stopPropagation(), onClick: (l) => {
+          l.stopPropagation(), C(), s == null || s.download();
+        }, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 transition-colors hidden sm:block focus:outline-none ${ee}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(Ze, { className: J }) }, "dl");
       case "fullscreen":
-        return /* @__PURE__ */ e("button", { onMouseDown: (a) => a.stopPropagation(), onTouchStart: (a) => a.stopPropagation(), onClick: (a) => {
-          a.stopPropagation(), P(), s == null || s.toggleFullscreen();
-        }, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 rounded-lg transition-transform focus:outline-none ${_}`, style: { borderRadius: "var(--radius)" }, children: r.isFullscreen || r.isWebFullscreen ? /* @__PURE__ */ e(Ci, { className: W }) : /* @__PURE__ */ e(Si, { className: W }) }, "fs");
+        return /* @__PURE__ */ e("button", { onMouseDown: (l) => l.stopPropagation(), onTouchStart: (l) => l.stopPropagation(), onClick: (l) => {
+          l.stopPropagation(), C(), s == null || s.toggleFullscreen();
+        }, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 rounded-lg transition-transform focus:outline-none ${ee}`, style: { borderRadius: "var(--radius)" }, children: a.isFullscreen || a.isWebFullscreen ? /* @__PURE__ */ e(Ri, { className: J }) : /* @__PURE__ */ e(Ii, { className: J }) }, "fs");
       case "fullscreenWeb":
-        return /* @__PURE__ */ e("button", { onMouseDown: (a) => a.stopPropagation(), onTouchStart: (a) => a.stopPropagation(), onClick: (a) => {
-          a.stopPropagation(), P(), s == null || s.toggleWebFullscreen();
-        }, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 hidden sm:block focus:outline-none ${_} ${r.isWebFullscreen ? "text-[var(--accent)]" : ""}`, style: { borderRadius: "var(--radius)" }, title: "Web Fullscreen", children: /* @__PURE__ */ e(qi, { className: W }) }, "fsw");
+        return /* @__PURE__ */ e("button", { onMouseDown: (l) => l.stopPropagation(), onTouchStart: (l) => l.stopPropagation(), onClick: (l) => {
+          l.stopPropagation(), C(), s == null || s.toggleWebFullscreen();
+        }, className: `strata-control-btn text-zinc-300 hover:text-white hover:bg-white/10 hidden sm:block focus:outline-none ${ee} ${a.isWebFullscreen ? "text-[var(--accent)]" : ""}`, style: { borderRadius: "var(--radius)" }, title: "Web Fullscreen", children: /* @__PURE__ */ e(Ki, { className: J }) }, "fsw");
       case "settings":
         return /* @__PURE__ */ d("div", { className: "relative", children: [
-          /* @__PURE__ */ e("button", { onMouseDown: (a) => a.stopPropagation(), onTouchStart: (a) => a.stopPropagation(), onClick: (a) => {
-            a.stopPropagation();
-            const I = E;
-            P(), I || (ie(!0), R("main"));
-          }, className: `strata-control-btn transition-all duration-300 focus:outline-none ${_} ${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__ */ e(Ni, { className: W }) }),
-          tt.isMounted && /* @__PURE__ */ e(De, { onClose: () => ie(!1), align: "right", maxHeight: Ee, className: `strata-backdrop ${Fe} ${tt.isVisible ? "opacity-100 translate-y-0 scale-100 animate-in fade-in zoom-in-95 duration-300" : "opacity-0 translate-y-2 scale-95 duration-300"}`, children: /* @__PURE__ */ d("div", { className: "w-full", children: [
-            O === "main" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
+          /* @__PURE__ */ e("button", { onMouseDown: (l) => l.stopPropagation(), onTouchStart: (l) => l.stopPropagation(), onClick: (l) => {
+            l.stopPropagation();
+            const F = B;
+            C(), F || (rt(!0), D("main"));
+          }, className: `strata-control-btn transition-all duration-300 focus:outline-none ${ee} ${B ? "rotate-90 text-[var(--accent)] bg-white/10" : "text-zinc-300 hover:text-white hover:bg-white/10"}`, style: { borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e(Pi, { className: J }) }),
+          dt.isMounted && /* @__PURE__ */ e(it, { onClose: C, align: "right", maxHeight: Pe, className: `strata-backdrop ${Le} ${dt.isVisible ? "opacity-100 translate-y-0 scale-100 animate-in fade-in zoom-in-95 duration-300" : "opacity-0 translate-y-2 scale-95 duration-300"}`, children: /* @__PURE__ */ d("div", { className: "w-full", children: [
+            X === "main" && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-left-4 fade-in duration-200", children: [
               /* @__PURE__ */ e("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__ */ e("span", { children: "Settings" }) }),
-              r.sources.length > 1 && /* @__PURE__ */ d(B, { children: [
-                /* @__PURE__ */ e(z, { label: "Source", icon: /* @__PURE__ */ e(Ki, { className: "w-4 h-4" }), value: ((f = r.sources[r.currentSourceIndex]) == null ? void 0 : f.name) || `Source ${r.currentSourceIndex + 1}`, onClick: () => R("sources"), hasSubmenu: !0 }),
-                /* @__PURE__ */ e(ee, {})
+              a.sources.length > 1 && /* @__PURE__ */ d(_, { children: [
+                /* @__PURE__ */ e(A, { label: "Source", icon: /* @__PURE__ */ e(en, { className: "w-4 h-4" }), value: ((v = a.sources[a.currentSourceIndex]) == null ? void 0 : v.name) || `Source ${a.currentSourceIndex + 1}`, onClick: () => D("sources"), hasSubmenu: !0 }),
+                /* @__PURE__ */ e(pe, {})
               ] }),
-              /* @__PURE__ */ e(z, { label: "Quality", icon: /* @__PURE__ */ e(Yi, { className: "w-4 h-4" }), value: r.currentQuality === -1 ? "Auto" : `${(k = r.qualityLevels[r.currentQuality]) == null ? void 0 : k.height}p`, onClick: () => R("quality"), hasSubmenu: !0 }),
-              /* @__PURE__ */ e(z, { label: "Speed", icon: /* @__PURE__ */ e(tn, { className: "w-4 h-4" }), value: `${r.playbackRate}x`, onClick: () => R("speed"), hasSubmenu: !0 }),
-              /* @__PURE__ */ e(z, { label: "Audio", icon: /* @__PURE__ */ e(nn, { className: "w-4 h-4" }), value: ((N = r.audioTracks[r.currentAudioTrack]) == null ? void 0 : N.label) || "Default", onClick: () => R("audio"), hasSubmenu: !0 }),
-              /* @__PURE__ */ e(ee, {}),
-              Bt && /* @__PURE__ */ e(z, { label: "Flip", icon: /* @__PURE__ */ e(sn, { className: "w-4 h-4" }), value: r.flipState.horizontal ? "H" : r.flipState.vertical ? "V" : "Normal", onClick: () => R("flip"), hasSubmenu: !0 }),
-              Vt && /* @__PURE__ */ e(z, { label: "Aspect Ratio", icon: /* @__PURE__ */ e(Zi, { className: "w-4 h-4" }), value: r.aspectRatio, onClick: () => R("ratio"), hasSubmenu: !0 }),
-              /* @__PURE__ */ e(z, { label: "Audio Boost", icon: /* @__PURE__ */ e(en, { className: "w-4 h-4" }), value: r.audioGain > 1 ? `${r.audioGain}x` : "Off", onClick: () => R("boost"), hasSubmenu: !0 }),
-              /* @__PURE__ */ e(ee, {}),
-              /* @__PURE__ */ e(z, { label: "Watch Party", icon: /* @__PURE__ */ e(Li, { className: "w-4 h-4" }), onClick: () => R("party"), hasSubmenu: !0 }),
-              /* @__PURE__ */ e(z, { label: "Cast to Device", icon: /* @__PURE__ */ e(Pi, { className: "w-4 h-4" }), onClick: () => {
-                s == null || s.requestCast(), ie(!1);
+              /* @__PURE__ */ e(A, { label: "Quality", icon: /* @__PURE__ */ e(an, { className: "w-4 h-4" }), value: a.currentQuality === -1 ? "Auto" : `${(S = a.qualityLevels[a.currentQuality]) == null ? void 0 : S.height}p`, onClick: () => D("quality"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(A, { label: "Speed", icon: /* @__PURE__ */ e(sn, { className: "w-4 h-4" }), value: `${a.playbackRate}x`, onClick: () => D("speed"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(A, { label: "Audio", icon: /* @__PURE__ */ e(on, { className: "w-4 h-4" }), value: ((M = a.audioTracks[a.currentAudioTrack]) == null ? void 0 : M.label) || "Default", onClick: () => D("audio"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(pe, {}),
+              b && /* @__PURE__ */ e(A, { label: "Flip", icon: /* @__PURE__ */ e(ln, { className: "w-4 h-4" }), value: a.flipState.horizontal ? "H" : a.flipState.vertical ? "V" : "Normal", onClick: () => D("flip"), hasSubmenu: !0 }),
+              H && /* @__PURE__ */ e(A, { label: "Aspect Ratio", icon: /* @__PURE__ */ e(tn, { className: "w-4 h-4" }), value: a.aspectRatio, onClick: () => D("ratio"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(A, { label: "Audio Boost", icon: /* @__PURE__ */ e(nn, { className: "w-4 h-4" }), value: a.audioGain > 1 ? `${a.audioGain}x` : "Off", onClick: () => D("boost"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(pe, {}),
+              /* @__PURE__ */ e(A, { label: "Watch Party", icon: /* @__PURE__ */ e(Bi, { className: "w-4 h-4" }), onClick: () => D("party"), hasSubmenu: !0 }),
+              /* @__PURE__ */ e(A, { label: "Cast to Device", icon: /* @__PURE__ */ e(Ai, { className: "w-4 h-4" }), onClick: () => {
+                s == null || s.requestCast(), C();
               } }),
-              p.settings && p.settings.length > 0 && /* @__PURE__ */ e(ee, {}),
-              (G = p.settings) == null ? void 0 : G.map((a, I) => a.switch !== void 0 ? /* @__PURE__ */ e("div", { className: "px-1", children: /* @__PURE__ */ e(
-                q,
+              p.settings && p.settings.length > 0 && /* @__PURE__ */ e(pe, {}),
+              (L = p.settings) == null ? void 0 : L.map((l, F) => l.switch !== void 0 ? /* @__PURE__ */ e("div", { className: "px-1", children: /* @__PURE__ */ e(
+                oe,
                 {
-                  label: a.html,
-                  icon: a.icon,
-                  checked: a.switch,
-                  tooltip: a.tooltip,
-                  onChange: (U) => {
-                    a.onSwitch && a.onSwitch(a, U);
+                  label: l.html,
+                  icon: l.icon,
+                  checked: l.switch,
+                  tooltip: l.tooltip,
+                  onChange: (G) => {
+                    l.onSwitch && l.onSwitch(l, G);
                   }
                 }
-              ) }, `cust-${I}`) : /* @__PURE__ */ e(
-                z,
+              ) }, `cust-${F}`) : /* @__PURE__ */ e(
+                A,
                 {
-                  label: a.html,
-                  icon: a.icon,
-                  value: a.currentLabel || a.value,
-                  hasSubmenu: !!a.children,
+                  label: l.html,
+                  icon: l.icon,
+                  value: l.currentLabel || l.value,
+                  hasSubmenu: !!l.children,
                   onClick: () => {
-                    a.children ? R(`custom-${I}`) : (a.click ? a.click(a) : a.onClick && a.onClick(a), ie(!1));
+                    l.children ? D(`custom-${F}`) : (l.click ? l.click(l) : l.onClick && l.onClick(l), C());
                   }
                 },
-                `cust-${I}`
+                `cust-${F}`
               )),
-              /* @__PURE__ */ e(ee, {}),
-              /* @__PURE__ */ e(z, { label: "Appearance", icon: /* @__PURE__ */ e(At, { className: "w-4 h-4" }), onClick: () => R("appearance"), hasSubmenu: !0 })
+              /* @__PURE__ */ e(pe, {}),
+              /* @__PURE__ */ e(A, { label: "Appearance", icon: /* @__PURE__ */ e(Ut, { className: "w-4 h-4" }), onClick: () => D("appearance"), hasSubmenu: !0 })
             ] }),
-            O.startsWith("custom-") && (() => {
-              var U;
-              const a = parseInt(O.split("-")[1]), I = (U = p.settings) == null ? void 0 : U[a];
-              return !I || !I.children ? null : /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
-                /* @__PURE__ */ e(H, { label: I.html || "Menu", onBack: () => R("main") }),
-                I.children.map((C, Ae) => /* @__PURE__ */ d(ce.Fragment, { children: [
-                  C.separator && /* @__PURE__ */ e(ee, {}),
-                  C.switch !== void 0 && /* @__PURE__ */ e("div", { className: "px-1", children: /* @__PURE__ */ e(q, { label: C.html, checked: C.switch, onChange: (ai) => C.onSwitch && C.onSwitch(C, ai) }) }),
-                  !C.separator && C.switch === void 0 && /* @__PURE__ */ e(
-                    z,
+            X.startsWith("custom-") && (() => {
+              var G;
+              const l = parseInt(X.split("-")[1]), F = (G = p.settings) == null ? void 0 : G[l];
+              return !F || !F.children ? null : /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
+                /* @__PURE__ */ e(K, { label: F.html || "Menu", onBack: () => D("main") }),
+                F.children.map((z, Qe) => /* @__PURE__ */ d(ke.Fragment, { children: [
+                  z.separator && /* @__PURE__ */ e(pe, {}),
+                  z.switch !== void 0 && /* @__PURE__ */ e("div", { className: "px-1", children: /* @__PURE__ */ e(oe, { label: z.html, checked: z.switch, onChange: (pi) => z.onSwitch && z.onSwitch(z, pi) }) }),
+                  !z.separator && z.switch === void 0 && /* @__PURE__ */ e(
+                    A,
                     {
-                      label: C.html,
-                      icon: C.icon,
-                      value: C.value,
-                      active: C.active,
+                      label: z.html,
+                      icon: z.icon,
+                      value: z.value,
+                      active: z.active,
                       onClick: () => {
-                        C.onClick ? C.onClick(C) : C.click && C.click(C), ie(!1);
+                        z.onClick ? z.onClick(z) : z.click && z.click(z), C();
                       }
                     }
                   )
-                ] }, Ae))
+                ] }, Qe))
               ] });
             })(),
-            ["speed", "quality", "audio", "boost", "party", "appearance", "sources", "flip", "ratio"].includes(O) && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
-              O === "sources" && /* @__PURE__ */ d(B, { children: [
-                /* @__PURE__ */ e(H, { label: "Select Source", onBack: () => R("main") }),
-                r.sources.map((a, I) => {
-                  const U = r.sourceStatuses[I], C = U === "success" ? /* @__PURE__ */ e(on, { className: "w-3.5 h-3.5 text-emerald-500" }) : U === "error" ? /* @__PURE__ */ e(rn, { className: "w-3.5 h-3.5 text-red-500" }) : null;
+            ["speed", "quality", "audio", "boost", "party", "appearance", "sources", "flip", "ratio"].includes(X) && /* @__PURE__ */ d("div", { className: "animate-in slide-in-from-right-4 fade-in duration-200", children: [
+              X === "sources" && /* @__PURE__ */ d(_, { children: [
+                /* @__PURE__ */ e(K, { label: "Select Source", onBack: () => D("main") }),
+                a.sources.map((l, F) => {
+                  const G = a.sourceStatuses[F], z = G === "success" ? /* @__PURE__ */ e(rn, { className: "w-3.5 h-3.5 text-emerald-500" }) : G === "error" ? /* @__PURE__ */ e(et, { className: "w-3.5 h-3.5 text-red-500" }) : null;
                   return /* @__PURE__ */ e(
-                    z,
+                    A,
                     {
-                      label: a.name || `Source ${I + 1}`,
-                      value: a.type,
-                      active: r.currentSourceIndex === I,
-                      rightIcon: C,
-                      onClick: () => s == null ? void 0 : s.switchSource(I)
+                      label: l.name || `Source ${F + 1}`,
+                      value: l.type,
+                      active: a.currentSourceIndex === F,
+                      rightIcon: z,
+                      onClick: () => s == null ? void 0 : s.switchSource(F)
                     },
-                    I
+                    F
                   );
                 })
               ] }),
-              O === "speed" && /* @__PURE__ */ d(B, { children: [
-                /* @__PURE__ */ e(H, { label: "Speed", onBack: () => R("main") }),
-                [0.5, 1, 1.5, 2].map((a) => /* @__PURE__ */ e(z, { label: `${a}x`, active: r.playbackRate === a, onClick: () => s.video.playbackRate = a }, a))
+              X === "speed" && /* @__PURE__ */ d(_, { children: [
+                /* @__PURE__ */ e(K, { label: "Speed", onBack: () => D("main") }),
+                [0.5, 1, 1.5, 2].map((l) => /* @__PURE__ */ e(A, { label: `${l}x`, active: a.playbackRate === l, onClick: () => s.video.playbackRate = l }, l))
               ] }),
-              O === "quality" && /* @__PURE__ */ d(B, { children: [
-                /* @__PURE__ */ e(H, { label: "Quality", onBack: () => R("main") }),
-                /* @__PURE__ */ e(z, { label: "Auto", active: r.currentQuality === -1, onClick: () => s == null ? void 0 : s.setQuality(-1) }),
-                r.qualityLevels.map((a) => /* @__PURE__ */ e(z, { label: `${a.height}p`, value: `${Math.round(a.bitrate / 1e3)}k`, active: r.currentQuality === a.index, onClick: () => s == null ? void 0 : s.setQuality(a.index) }, a.index))
+              X === "quality" && /* @__PURE__ */ d(_, { children: [
+                /* @__PURE__ */ e(K, { label: "Quality", onBack: () => D("main") }),
+                /* @__PURE__ */ e(A, { label: "Auto", active: a.currentQuality === -1, onClick: () => s == null ? void 0 : s.setQuality(-1) }),
+                a.qualityLevels.map((l) => /* @__PURE__ */ e(A, { label: `${l.height}p`, value: `${Math.round(l.bitrate / 1e3)}k`, active: a.currentQuality === l.index, onClick: () => s == null ? void 0 : s.setQuality(l.index) }, l.index))
               ] }),
-              O === "audio" && /* @__PURE__ */ d(B, { children: [
-                /* @__PURE__ */ e(H, { label: "Audio Track", onBack: () => R("main") }),
-                r.audioTracks.length === 0 && /* @__PURE__ */ e("div", { className: "px-4 py-3 text-zinc-500 text-xs text-center", children: "No tracks available" }),
-                r.audioTracks.map((a) => /* @__PURE__ */ e(z, { label: a.label, value: a.language, active: r.currentAudioTrack === a.index, onClick: () => s == null ? void 0 : s.setAudioTrack(a.index) }, a.index))
+              X === "audio" && /* @__PURE__ */ d(_, { children: [
+                /* @__PURE__ */ e(K, { label: "Audio Track", onBack: () => D("main") }),
+                a.audioTracks.length === 0 && /* @__PURE__ */ e("div", { className: "px-4 py-3 text-zinc-500 text-xs text-center", children: "No tracks available" }),
+                a.audioTracks.map((l) => /* @__PURE__ */ e(A, { label: l.label, value: l.language, active: a.currentAudioTrack === l.index, onClick: () => s == null ? void 0 : s.setAudioTrack(l.index) }, l.index))
               ] }),
-              O === "boost" && /* @__PURE__ */ d(B, { children: [
-                /* @__PURE__ */ e(H, { label: "Audio Boost", onBack: () => R("main") }),
-                [1, 1.5, 2, 3].map((a) => /* @__PURE__ */ e(z, { label: a === 1 ? "Off" : `${a}x`, active: r.audioGain === a, onClick: () => s == null ? void 0 : s.setAudioGain(a) }, a))
+              X === "boost" && /* @__PURE__ */ d(_, { children: [
+                /* @__PURE__ */ e(K, { label: "Audio Boost", onBack: () => D("main") }),
+                [1, 1.5, 2, 3].map((l) => /* @__PURE__ */ e(A, { label: l === 1 ? "Off" : `${l}x`, active: a.audioGain === l, onClick: () => s == null ? void 0 : s.setAudioGain(l) }, l))
               ] }),
-              O === "flip" && /* @__PURE__ */ d(B, { children: [
-                /* @__PURE__ */ e(H, { label: "Video Flip", onBack: () => R("main") }),
+              X === "flip" && /* @__PURE__ */ d(_, { children: [
+                /* @__PURE__ */ e(K, { label: "Video Flip", onBack: () => D("main") }),
                 /* @__PURE__ */ d("div", { className: "p-2 space-y-1", children: [
-                  /* @__PURE__ */ e(q, { label: "Horizontal Flip", checked: r.flipState.horizontal, onChange: () => s == null ? void 0 : s.setFlip("horizontal") }),
-                  /* @__PURE__ */ e(q, { label: "Vertical Flip", checked: r.flipState.vertical, onChange: () => s == null ? void 0 : s.setFlip("vertical") })
+                  /* @__PURE__ */ e(oe, { label: "Horizontal Flip", checked: a.flipState.horizontal, onChange: () => s == null ? void 0 : s.setFlip("horizontal") }),
+                  /* @__PURE__ */ e(oe, { label: "Vertical Flip", checked: a.flipState.vertical, onChange: () => s == null ? void 0 : s.setFlip("vertical") })
                 ] })
               ] }),
-              O === "ratio" && /* @__PURE__ */ d(B, { children: [
-                /* @__PURE__ */ e(H, { label: "Aspect Ratio", onBack: () => R("main") }),
-                ["default", "16:9", "4:3"].map((a) => /* @__PURE__ */ e(z, { label: a === "default" ? "Default" : a, active: r.aspectRatio === a, onClick: () => s == null ? void 0 : s.setAspectRatio(a) }, a))
+              X === "ratio" && /* @__PURE__ */ d(_, { children: [
+                /* @__PURE__ */ e(K, { label: "Aspect Ratio", onBack: () => D("main") }),
+                ["default", "16:9", "4:3"].map((l) => /* @__PURE__ */ e(A, { label: l === "default" ? "Default" : l, active: a.aspectRatio === l, onClick: () => s == null ? void 0 : s.setAspectRatio(l) }, l))
               ] }),
-              O === "party" && /* @__PURE__ */ d(B, { children: [
-                /* @__PURE__ */ e(H, { label: "Watch Party", onBack: () => R("main") }),
+              X === "party" && /* @__PURE__ */ d(_, { children: [
+                /* @__PURE__ */ e(K, { label: "Watch Party", onBack: () => D("main") }),
                 /* @__PURE__ */ d("div", { className: "p-4 space-y-3", children: [
                   /* @__PURE__ */ e("p", { className: "text-xs text-zinc-400 leading-relaxed", children: "Create a synchronized room on WatchParty.me to watch together." }),
-                  /* @__PURE__ */ e("a", { href: `https://www.watchparty.me/create?video=${encodeURIComponent(((Tt = r.sources[r.currentSourceIndex]) == null ? void 0 : Tt.url) || t || "")}`, 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__ */ e("a", { href: `https://www.watchparty.me/create?video=${encodeURIComponent(((he = a.sources[a.currentSourceIndex]) == null ? void 0 : he.url) || t || "")}`, 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" })
                 ] })
               ] }),
-              O === "appearance" && /* @__PURE__ */ d(B, { children: [
-                /* @__PURE__ */ e(H, { label: "Appearance", onBack: () => R("main") }),
+              X === "appearance" && /* @__PURE__ */ d(_, { children: [
+                /* @__PURE__ */ e(K, { label: "Appearance", onBack: () => D("main") }),
                 /* @__PURE__ */ d("div", { className: "pb-1", children: [
-                  /* @__PURE__ */ e(te, { title: "Theme", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2 px-3", children: bn.map((a) => /* @__PURE__ */ e("button", { onClick: () => s == null ? void 0 : s.setAppearance({ theme: a.value, themeColor: a.color }), className: `py-2 text-xs font-bold uppercase tracking-wide transition-colors border-[length:var(--border-width)] border-white/10 ${r.theme === a.value ? "bg-[var(--accent)] text-white" : "bg-white/5 text-zinc-400 hover:text-white"}`, style: { borderRadius: "var(--radius)" }, children: a.label }, a.value)) }) }),
-                  /* @__PURE__ */ e(te, { title: "Icon Size", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-1 px-3", children: ["small", "medium", "large"].map((a) => /* @__PURE__ */ e("button", { onClick: () => s == null ? void 0 : s.setAppearance({ iconSize: a }), className: `py-1.5 text-xs font-medium transition-colors ${r.iconSize === a ? "bg-white text-black" : "bg-white/5 text-zinc-400 hover:text-zinc-200"}`, style: { borderRadius: "var(--radius)" }, children: a.charAt(0).toUpperCase() + a.slice(1) }, a)) }) }),
-                  /* @__PURE__ */ d(te, { title: "Theme Color", children: [
-                    /* @__PURE__ */ e("div", { className: "grid grid-cols-6 gap-2 px-3", children: fn.map((a) => /* @__PURE__ */ e("button", { title: a.label, onClick: () => s == null ? void 0 : s.setAppearance({ themeColor: a.value }), className: `w-6 h-6 transition-transform hover:scale-110 ${r.themeColor === a.value ? "ring-2 ring-white scale-110" : "ring-1 ring-white/10"}`, style: { backgroundColor: a.value, borderRadius: "var(--radius-full)" }, children: r.themeColor === a.value && /* @__PURE__ */ e(We, { className: "w-3 h-3 text-white mx-auto stroke-[3]" }) }, a.value)) }),
+                  /* @__PURE__ */ e(me, { title: "Theme", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2 px-3", children: xn.map((l) => /* @__PURE__ */ e("button", { onClick: () => s == null ? void 0 : s.setAppearance({ theme: l.value, themeColor: l.color }), className: `py-2 text-xs font-bold uppercase tracking-wide transition-colors border-[length:var(--border-width)] border-white/10 ${a.theme === l.value ? "bg-[var(--accent)] text-white" : "bg-white/5 text-zinc-400 hover:text-white"}`, style: { borderRadius: "var(--radius)" }, children: l.label }, l.value)) }) }),
+                  /* @__PURE__ */ e(me, { title: "Icon Size", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-1 px-3", children: ["small", "medium", "large"].map((l) => /* @__PURE__ */ e("button", { onClick: () => s == null ? void 0 : s.setAppearance({ iconSize: l }), className: `py-1.5 text-xs font-medium transition-colors ${a.iconSize === l ? "bg-white text-black" : "bg-white/5 text-zinc-400 hover:text-zinc-200"}`, style: { borderRadius: "var(--radius)" }, children: l.charAt(0).toUpperCase() + l.slice(1) }, l)) }) }),
+                  /* @__PURE__ */ d(me, { title: "Theme Color", children: [
+                    /* @__PURE__ */ e("div", { className: "grid grid-cols-6 gap-2 px-3", children: vn.map((l) => /* @__PURE__ */ e("button", { title: l.label, onClick: () => s == null ? void 0 : s.setAppearance({ themeColor: l.value }), className: `w-6 h-6 transition-transform hover:scale-110 ${a.themeColor === l.value ? "ring-2 ring-white scale-110" : "ring-1 ring-white/10"}`, style: { backgroundColor: l.value, borderRadius: "var(--radius-full)" }, children: a.themeColor === l.value && /* @__PURE__ */ e(Be, { className: "w-3 h-3 text-white mx-auto stroke-[3]" }) }, l.value)) }),
                     /* @__PURE__ */ e("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__ */ e("div", { className: "relative w-6 h-6 overflow-hidden ring-1 ring-white/20", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ e("input", { type: "color", value: r.themeColor, onChange: (a) => s == null ? void 0 : s.setAppearance({ themeColor: a.target.value }), className: "absolute inset-[-4px] w-[150%] h-[150%] cursor-pointer p-0 border-0" }) }),
+                      /* @__PURE__ */ e("div", { className: "relative w-6 h-6 overflow-hidden ring-1 ring-white/20", style: { borderRadius: "var(--radius-full)" }, children: /* @__PURE__ */ e("input", { type: "color", value: a.themeColor, onChange: (l) => s == null ? void 0 : s.setAppearance({ themeColor: l.target.value }), className: "absolute inset-[-4px] w-[150%] h-[150%] cursor-pointer p-0 border-0" }) }),
                       /* @__PURE__ */ e("span", { className: "text-xs text-zinc-400 font-medium group-hover:text-zinc-200", children: "Custom Color" }),
-                      /* @__PURE__ */ e("span", { className: "text-[10px] font-mono text-zinc-500 ml-auto uppercase", children: r.themeColor })
+                      /* @__PURE__ */ e("span", { className: "text-[10px] font-mono text-zinc-500 ml-auto uppercase", children: a.themeColor })
                     ] }) })
                   ] })
                 ] })
@@ -2221,13 +2698,13 @@ const fn = [
       default:
         return null;
     }
-  }, ri = fe(() => {
+  }, ui = xe(() => {
     const c = [
       // Loop (Playback Group)
       { html: "Playback", isLabel: !0 },
       {
         html: "Loop",
-        checked: r.isLooping,
+        checked: a.isLooping,
         onClick: () => s == null ? void 0 : s.toggleLoop()
       },
       { separator: !0 },
@@ -2238,15 +2715,15 @@ const fn = [
       { separator: !0 },
       // Aspect Ratio Group
       { html: "Aspect Ratio", isLabel: !0 },
-      { html: "Default", checked: r.aspectRatio === "default", onClick: () => s == null ? void 0 : s.setAspectRatio("default") },
-      { html: "16:9", checked: r.aspectRatio === "16:9", onClick: () => s == null ? void 0 : s.setAspectRatio("16:9") },
-      { html: "4:3", checked: r.aspectRatio === "4:3", onClick: () => s == null ? void 0 : s.setAspectRatio("4:3") },
+      { 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__ */ e(Ji, { className: "w-3.5 h-3.5" }),
-        onClick: () => et(!0)
+        icon: /* @__PURE__ */ e(Zi, { className: "w-3.5 h-3.5" }),
+        onClick: () => ct(!0)
       },
       { separator: !0 }
     ];
@@ -2255,34 +2732,34 @@ const fn = [
       disabled: !0
     }), c.push({
       html: "Close",
-      onClick: (f) => f(),
+      onClick: (v) => v(),
       // Wrapper handles close
       icon: /* @__PURE__ */ e("div", { className: "text-red-400", children: /* @__PURE__ */ d("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
         /* @__PURE__ */ e("path", { d: "M18 6 6 18" }),
         /* @__PURE__ */ e("path", { d: "m6 6 12 12" })
       ] }) })
     }), c;
-  }, [p.contextmenu, r.aspectRatio, r.isLooping, s]), St = r.isWebFullscreen, Ct = /* @__PURE__ */ d(
+  }, [p.contextmenu, a.aspectRatio, a.isLooping, s]), hi = a.isWebFullscreen, Pt = /* @__PURE__ */ d(
     "div",
     {
       id: p.id,
-      ref: V,
-      className: `group bg-black overflow-hidden select-none font-[family-name:var(--font-main)] outline-none text-zinc-100 strata-player-reset flex items-center justify-center ${St ? "fixed inset-0 z-[2147483647] w-screen h-screen rounded-none" : "relative w-full h-full rounded-[var(--radius)]"} ${p.container || ""}`,
-      style: { touchAction: "manipulation", "--accent": r.themeColor, "--accent-contrast": Dt },
-      onMouseMove: ft,
+      ref: P,
+      className: `group bg-black overflow-hidden select-none font-[family-name:var(--font-main)] outline-none text-zinc-100 strata-player-reset flex items-center justify-center ${hi ? "fixed inset-0 z-[2147483647] w-screen h-screen rounded-none" : "relative w-full h-full rounded-[var(--radius)]"} ${p.container || ""}`,
+      style: { touchAction: "manipulation", "--accent": a.themeColor, "--accent-contrast": Xt },
+      onMouseMove: St,
       onMouseLeave: () => {
-        r.isPlaying && !E && !F && !L && s && s.setControlsVisible(!1);
+        a.isPlaying && !B && !V && !E && s && s.setControlsVisible(!1);
       },
-      onMouseDown: bt,
-      onMouseUp: Le,
-      onTouchStart: Xt,
-      onTouchMove: Jt,
-      onTouchEnd: Kt,
-      onContextMenu: ei,
+      onMouseDown: Ct,
+      onMouseUp: qe,
+      onTouchStart: ei,
+      onTouchMove: ti,
+      onTouchEnd: ii,
+      onContextMenu: oi,
       tabIndex: 0,
       role: "region",
       "aria-label": "Video Player",
-      "data-theme": r.theme,
+      "data-theme": a.theme,
       children: [
         /* @__PURE__ */ e("style", { children: `
                 [data-theme="default"] {
@@ -2378,45 +2855,54 @@ const fn = [
                 [data-theme="pixel"] .strata-backdrop { backdrop-filter: none; background: #000; }
                 [data-theme="hacker"] .strata-backdrop { backdrop-filter: none; background: #000; }
             ` }),
-        r.theme === "hacker" && /* @__PURE__ */ e("div", { className: "strata-scanlines" }),
-        !s && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-zinc-950 z-50", children: /* @__PURE__ */ e(He, { className: "w-10 h-10 text-[var(--accent)] animate-spin" }) }),
-        s && /* @__PURE__ */ d(B, { children: [
-          (Nt = p.layers) == null ? void 0 : Nt.map((c, f) => /* @__PURE__ */ e(
+        a.theme === "hacker" && /* @__PURE__ */ e("div", { className: "strata-scanlines" }),
+        !s && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-zinc-950 z-50", children: /* @__PURE__ */ e(Fe, { className: "w-10 h-10 text-[var(--accent)] animate-spin" }) }),
+        s && /* @__PURE__ */ d(_, { children: [
+          (Lt = p.layers) == null ? void 0 : Lt.map((c, v) => /* @__PURE__ */ e(
             "div",
             {
               className: `absolute inset-0 pointer-events-none z-10 ${c.className || ""}`,
               style: c.style,
-              children: /* @__PURE__ */ e(Lt, { content: c.html || "", className: "w-full h-full" })
+              children: /* @__PURE__ */ e(Dt, { content: c.html || "", className: "w-full h-full" })
             },
-            f
+            v
           )),
-          /* @__PURE__ */ e(an, { notifications: r.notifications }),
-          /* @__PURE__ */ e(ln, { cues: r.activeCues, settings: r.subtitleSettings }),
-          /* @__PURE__ */ e("div", { className: "absolute inset-0 z-0", onClick: Zt, "aria-hidden": "true" }),
-          l && !ye && /* @__PURE__ */ e(
+          /* @__PURE__ */ e(un, { notifications: a.notifications }),
+          /* @__PURE__ */ e(hn, { cues: a.activeCues, settings: a.subtitleSettings }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "absolute inset-0 z-[1] cursor-pointer",
+              onClick: si,
+              "aria-hidden": "true",
+              role: "button",
+              tabIndex: -1
+            }
+          ),
+          r && !ne && /* @__PURE__ */ e(
             "div",
             {
-              className: "absolute inset-0 bg-cover bg-center z-[5] pointer-events-none",
-              style: { backgroundImage: `url(${l})` }
+              className: "absolute inset-0 bg-cover bg-center z-[5] pointer-events-none strata-poster",
+              style: { backgroundImage: `url(${r})` }
             }
           ),
-          ne.visible && /* @__PURE__ */ e(
-            hn,
+          se.visible && /* @__PURE__ */ e(
+            fn,
             {
-              x: ne.x,
-              y: ne.y,
-              items: ri,
-              onClose: () => Ce({ ...ne, visible: !1 }),
-              containerWidth: jt,
-              containerHeight: qe
+              x: se.x,
+              y: se.y,
+              items: ui,
+              onClose: C,
+              containerWidth: nt,
+              containerHeight: ce
             }
           ),
-          _t && s && /* @__PURE__ */ e(pn, { player: s, onClose: () => et(!1) }),
-          ze && /* @__PURE__ */ d("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__ */ e(Qi, { className: "w-4 h-4 text-[var(--accent)] fill-current" }),
+          Qt && s && /* @__PURE__ */ e(bn, { player: s, onClose: () => ct(!1) }),
+          je && /* @__PURE__ */ d("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 pointer-events-none", children: [
+            /* @__PURE__ */ e(Yi, { className: "w-4 h-4 text-[var(--accent)] fill-current" }),
             /* @__PURE__ */ e("span", { className: "text-xs font-bold tracking-wider", children: "2x Speed" })
           ] }),
-          Q && Je && r.controlsVisible && /* @__PURE__ */ e(
+          Y && st && a.controlsVisible && /* @__PURE__ */ e(
             "button",
             {
               onMouseDown: (c) => c.stopPropagation(),
@@ -2424,81 +2910,81 @@ const fn = [
               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 ${r.isLocked ? "text-[var(--accent)] bg-white/10" : "hover:bg-white/10"}`,
-              children: r.isLocked ? /* @__PURE__ */ e(Gi, { className: "w-5 h-5" }) : /* @__PURE__ */ e(Ui, { className: "w-5 h-5" })
+              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__ */ e(Qi, { className: "w-5 h-5" }) : /* @__PURE__ */ e(Ji, { className: "w-5 h-5" })
             }
           ),
-          Y && /* @__PURE__ */ e(
+          de && /* @__PURE__ */ e(
             "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 ${Y.type === "rewind" ? "left-0 rounded-r-[4rem]" : "right-0 rounded-l-[4rem]"}`,
-              onAnimationEnd: () => pe(null),
+              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 pointer-events-none ${de.type === "rewind" ? "left-0 rounded-r-[4rem]" : "right-0 rounded-l-[4rem]"}`,
+              onAnimationEnd: () => Ie(null),
               children: /* @__PURE__ */ d("div", { className: "flex flex-col items-center text-white drop-shadow-lg", children: [
-                Y.type === "rewind" ? /* @__PURE__ */ e(Rt, { className: "w-12 h-12 animate-pulse" }) : /* @__PURE__ */ e(Pt, { className: "w-12 h-12 animate-pulse" }),
-                /* @__PURE__ */ e("span", { className: "font-bold text-sm mt-2 font-mono", children: Y.type === "rewind" ? "-10s" : "+10s" })
+                de.type === "rewind" ? /* @__PURE__ */ e(At, { className: "w-12 h-12 animate-pulse" }) : /* @__PURE__ */ e(Bt, { className: "w-12 h-12 animate-pulse" }),
+                /* @__PURE__ */ e("span", { className: "font-bold text-sm mt-2 font-mono", children: de.type === "rewind" ? "-10s" : "+10s" })
               ] })
             },
-            Y.id
+            de.id
           ),
-          r.isBuffering && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ e(He, { className: "w-12 h-12 text-[var(--accent)] animate-spin drop-shadow-lg" }) }),
-          r.error && /* @__PURE__ */ e("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: [
+          a.isBuffering && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center z-20 pointer-events-none", children: /* @__PURE__ */ e(Fe, { className: "w-12 h-12 text-[var(--accent)] animate-spin drop-shadow-lg" }) }),
+          a.error && /* @__PURE__ */ e("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__ */ e("span", { className: "text-5xl mb-2", children: "⚠️" }),
             /* @__PURE__ */ e("h3", { className: "text-xl font-bold text-white", children: "Playback Error" }),
-            /* @__PURE__ */ e("p", { className: "text-zinc-400 text-sm", children: r.error }),
-            /* @__PURE__ */ e("button", { onClick: () => s.load(s.store.get().sources[s.store.get().currentSourceIndex] || { url: t || "", type: n || "auto" }, v), 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__ */ e("p", { className: "text-zinc-400 text-sm", children: a.error }),
+            /* @__PURE__ */ e("button", { onClick: () => s.load(s.store.get().sources[s.store.get().currentSourceIndex] || { url: t || "", type: i || "auto" }, f), 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" })
           ] }) }),
-          Ht && !r.isLocked && (!r.isPlaying && !r.isBuffering && !r.error || r.controlsVisible) && !r.isBuffering ? /* @__PURE__ */ e(
+          j && !a.isLocked && (!a.isPlaying && !a.isBuffering && !a.error || a.controlsVisible) && !a.isBuffering ? /* @__PURE__ */ e(
             "div",
             {
-              className: `absolute inset-0 flex items-center justify-center z-10 transition-opacity duration-300 pointer-events-none ${r.controlsVisible || !r.isPlaying ? "opacity-100" : "opacity-0"}`,
+              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__ */ d("div", { className: "flex items-center gap-8 md:gap-16 pointer-events-auto", children: [
                 /* @__PURE__ */ e("button", { onMouseDown: (c) => c.stopPropagation(), onTouchStart: (c) => c.stopPropagation(), onClick: (c) => {
-                  c.stopPropagation(), P(), me("rewind");
-                }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all duration-300 active:scale-125 active:opacity-80 text-white/90 focus:outline-none backdrop-blur-sm ${Z.skipBtn}`, children: /* @__PURE__ */ e(Rt, { className: Z.skipIcon }) }),
+                  c.stopPropagation(), C(), Re("rewind");
+                }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all duration-300 active:scale-125 active:opacity-80 text-white/90 focus:outline-none backdrop-blur-sm ${ue.skipBtn}`, children: /* @__PURE__ */ e(At, { className: ue.skipIcon }) }),
                 /* @__PURE__ */ e("button", { onMouseDown: (c) => c.stopPropagation(), onTouchStart: (c) => c.stopPropagation(), onClick: (c) => {
-                  c.stopPropagation(), P(), 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 duration-300 active:scale-90 active:opacity-80 focus:outline-none backdrop-blur-md ${Z.playBtn}`, children: r.isPlaying ? /* @__PURE__ */ e(It, { className: `${Z.playIcon} text-white fill-current` }) : /* @__PURE__ */ e(zt, { className: `${Z.playIcon} text-white ml-1 fill-current` }) }),
+                  c.stopPropagation(), C(), 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 duration-300 active:scale-90 active:opacity-80 focus:outline-none backdrop-blur-md ${ue.playBtn}`, children: a.isPlaying ? /* @__PURE__ */ e(Ft, { className: `${ue.playIcon} text-white fill-current` }) : /* @__PURE__ */ e(Et, { className: `${ue.playIcon} text-white ml-1 fill-current` }) }),
                 /* @__PURE__ */ e("button", { onMouseDown: (c) => c.stopPropagation(), onTouchStart: (c) => c.stopPropagation(), onClick: (c) => {
-                  c.stopPropagation(), P(), me("forward");
-                }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all duration-300 active:scale-125 active:opacity-80 text-white/90 focus:outline-none backdrop-blur-sm ${Z.skipBtn}`, children: /* @__PURE__ */ e(Pt, { className: Z.skipIcon }) })
+                  c.stopPropagation(), C(), Re("forward");
+                }, className: `group flex items-center justify-center rounded-full bg-black/40 hover:bg-black/60 border border-white/10 transition-all duration-300 active:scale-125 active:opacity-80 text-white/90 focus:outline-none backdrop-blur-sm ${ue.skipBtn}`, children: /* @__PURE__ */ e(Bt, { className: ue.skipIcon }) })
               ] })
             }
           ) : null,
           /* @__PURE__ */ d(
             "div",
             {
-              className: `absolute inset-x-0 bottom-0 z-30 transition-all duration-300 px-4 md:px-6 py-4 bg-gradient-to-t from-black/90 via-black/50 to-transparent ${oi ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"}`,
+              className: `absolute inset-x-0 bottom-0 z-30 transition-all duration-300 px-4 md:px-6 py-4 bg-gradient-to-t from-black/90 via-black/50 to-transparent ${di ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4 pointer-events-none"}`,
               onClick: (c) => {
-                (E || F || L) && P(), c.target === c.currentTarget && he(!1), c.stopPropagation();
+                (B || V || E) && C(), c.target === c.currentTarget && ze(!1), c.stopPropagation();
               },
               children: [
                 !p.isLive && /* @__PURE__ */ d(
                   "div",
                   {
-                    ref: Re,
+                    ref: Ge,
                     className: "relative w-full h-3 group/slider mb-3 cursor-pointer touch-none flex items-center",
-                    onMouseMove: Yt,
+                    onMouseMove: ni,
                     onMouseLeave: () => {
-                      ct(null), dt(null);
+                      gt(null), vt(null);
                     },
-                    onMouseDown: gt,
-                    onTouchStart: gt,
+                    onMouseDown: Nt,
+                    onTouchStart: Nt,
                     children: [
-                      (Mt = p.highlight) == null ? void 0 : Mt.map((c, f) => /* @__PURE__ */ e("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 / r.duration * 100}%` }, title: c.text }, f)),
-                      lt !== 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, ${qt}%, calc(100% - 70px))` }, children: [
-                        J && /* @__PURE__ */ e("div", { className: "bg-black/90 border border-white/10 shadow-2xl overflow-hidden backdrop-blur-sm", style: { width: `${J.w * 0.5}px`, height: `${J.h * 0.5}px`, borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e("div", { style: { backgroundImage: `url("${J.url}")`, width: `${J.w}px`, height: `${J.h}px`, backgroundPosition: `-${J.x}px -${J.y}px`, backgroundRepeat: "no-repeat", transform: "scale(0.5)", transformOrigin: "top left" } }) }),
-                        /* @__PURE__ */ e("div", { className: "strata-tooltip px-2 py-0.5 text-[11px] font-bold font-mono shadow-lg tabular-nums mt-1", children: Be(lt) })
+                      ($t = p.highlight) == null ? void 0 : $t.map((c, v) => /* @__PURE__ */ e("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 }, v)),
+                      bt !== 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, ${Yt}%, calc(100% - 70px))` }, children: [
+                        re && /* @__PURE__ */ e("div", { className: "bg-black/90 border border-white/10 shadow-2xl overflow-hidden backdrop-blur-sm", style: { width: `${re.w * 0.5}px`, height: `${re.h * 0.5}px`, borderRadius: "var(--radius)" }, children: /* @__PURE__ */ e("div", { style: { backgroundImage: `url("${re.url}")`, width: `${re.w}px`, height: `${re.h}px`, backgroundPosition: `-${re.x}px -${re.y}px`, backgroundRepeat: "no-repeat", transform: "scale(0.5)", transformOrigin: "top left" } }) }),
+                        /* @__PURE__ */ e("div", { className: "strata-tooltip px-2 py-0.5 text-[11px] font-bold font-mono shadow-lg tabular-nums mt-1", children: Je(bt) })
                       ] }),
                       /* @__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: [
-                        r.duration > 0 && r.buffered.map((c, f) => /* @__PURE__ */ e("div", { className: "absolute top-0 bottom-0 bg-white/20", style: { left: `${c.start / r.duration * 100}%`, width: `${(c.end - c.start) / r.duration * 100}%` } }, f)),
-                        /* @__PURE__ */ e("div", { className: "absolute left-0 top-0 bottom-0 bg-[var(--accent)]", style: { width: `${(Ne ? ue : r.currentTime) / r.duration * 100}%` } })
+                        a.duration > 0 && a.buffered.map((c, v) => /* @__PURE__ */ e("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}%` } }, v)),
+                        /* @__PURE__ */ e("div", { className: "absolute left-0 top-0 bottom-0 bg-[var(--accent)]", style: { width: `${(Oe ? Te : a.currentTime) / a.duration * 100}%` } })
                       ] }),
                       /* @__PURE__ */ e(
                         "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: `${(Ne ? ue : r.currentTime) / r.duration * 100}%`,
+                            left: `${(Oe ? Te : a.currentTime) / a.duration * 100}%`,
                             borderRadius: "var(--radius-full)"
                           }
                         }
@@ -2507,8 +2993,8 @@ const fn = [
                   }
                 ),
                 /* @__PURE__ */ d("div", { className: "flex items-center justify-between pointer-events-auto", children: [
-                  /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: yt.filter((c) => c.position === "left" || c.position === "center").map(kt) }),
-                  /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: yt.filter((c) => c.position === "right").map(kt) })
+                  /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: It.filter((c) => c.position === "left" || c.position === "center").map(Rt) }),
+                  /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: It.filter((c) => c.position === "right").map(Rt) })
                 ] })
               ]
             }
@@ -2517,21 +3003,21 @@ const fn = [
       ]
     }
   );
-  return St && typeof document < "u" ? hi(Ct, document.body) : Ct;
-}, Cn = (i, t) => {
-  const n = ui(i);
-  return n.render(ce.createElement($t, t)), {
+  return a.isWebFullscreen && typeof document < "u" ? vi(Pt, document.body) : Pt;
+}, Tn = (n, t) => {
+  const i = gi(n);
+  return i.render(ke.createElement(Ot, t)), {
     unmount: () => {
-      n.unmount();
+      i.unmount();
     },
     update: (o) => {
-      n.render(ce.createElement($t, { ...t, ...o }));
+      i.render(ke.createElement(Ot, { ...t, ...o }));
     }
   };
 };
 export {
-  xi as StrataCore,
-  $t as StrataPlayer,
-  Cn as mountStrataPlayer
+  Ni as StrataCore,
+  Ot as StrataPlayer,
+  Tn as mountStrataPlayer
 };
 //# sourceMappingURL=strataplayer.es.js.map