@moq/watch 0.2.2 → 0.2.4

package/ui/index.js

@@ -1,137 +1,137 @@
-import { Button as lt, Icon as j, Stats as Bt } from "@moq/ui-core";
-import { Signals as Ft } from "@moq/hang";
-const Nt = !1, Ut = (t, e) => t === e, Kt = /* @__PURE__ */ Symbol("solid-track"), nt = {
-  equals: Ut
+import { Button as ct, Icon as W, Stats as Nt } from "@moq/ui-core";
+import { Signals as Ut } from "@moq/hang";
+const Kt = !1, Dt = (t, e) => t === e, Ht = /* @__PURE__ */ Symbol("solid-track"), rt = {
+  equals: Dt
 };
-let Pt = Lt;
-const F = 1, rt = 2, Mt = {
+let qt = Vt;
+const F = 1, at = 2, Rt = {
   owned: null,
   cleanups: null,
   context: null,
   owner: null
 };
-var _ = null;
-let ht = null, Dt = null, v = null, S = null, W = null, ct = 0;
-function et(t, e) {
-  const n = v, a = _, r = t.length === 0, o = e === void 0 ? a : e, s = r ? Mt : {
+var g = null;
+let ht = null, Gt = null, b = null, k = null, T = null, ut = 0;
+function nt(t, e) {
+  const n = b, a = g, r = t.length === 0, o = e === void 0 ? a : e, s = r ? Rt : {
     owned: null,
     cleanups: null,
     context: o ? o.context : null,
     owner: o
-  }, i = r ? t : () => t(() => L(() => H(s)));
-  _ = s, v = null;
+  }, i = r ? t : () => t(() => L(() => Q(s)));
+  g = s, b = null;
   try {
-    return J(i, !0);
+    return Z(i, !0);
   } finally {
-    v = n, _ = a;
+    b = n, g = a;
   }
 }
-function M(t, e) {
-  e = e ? Object.assign({}, nt, e) : nt;
+function E(t, e) {
+  e = e ? Object.assign({}, rt, e) : rt;
   const n = {
     value: t,
     observers: null,
     observerSlots: null,
     comparator: e.equals || void 0
-  }, a = (r) => (typeof r == "function" && (r = r(n.value)), Tt(n, r));
-  return [Wt.bind(n), a];
+  }, a = (r) => (typeof r == "function" && (r = r(n.value)), Lt(n, r));
+  return [It.bind(n), a];
 }
-function T(t, e, n) {
-  const a = yt(t, e, !1, F);
-  G(a);
+function I(t, e, n) {
+  const a = xt(t, e, !1, F);
+  X(a);
 }
-function qt(t, e, n) {
-  Pt = Zt;
-  const a = yt(t, e, !1, F);
-  a.user = !0, W ? W.push(a) : G(a);
+function jt(t, e, n) {
+  qt = te;
+  const a = xt(t, e, !1, F);
+  a.user = !0, T ? T.push(a) : X(a);
 }
 function B(t, e, n) {
-  n = n ? Object.assign({}, nt, n) : nt;
-  const a = yt(t, e, !0, 0);
-  return a.observers = null, a.observerSlots = null, a.comparator = n.equals || void 0, G(a), Wt.bind(a);
+  n = n ? Object.assign({}, rt, n) : rt;
+  const a = xt(t, e, !0, 0);
+  return a.observers = null, a.observerSlots = null, a.comparator = n.equals || void 0, X(a), It.bind(a);
 }
 function L(t) {
-  if (v === null) return t();
-  const e = v;
-  v = null;
+  if (b === null) return t();
+  const e = b;
+  b = null;
   try {
     return t();
   } finally {
-    v = e;
+    b = e;
   }
 }
-function Rt(t) {
-  qt(() => L(t));
+function Wt(t) {
+  jt(() => L(t));
 }
-function ut(t) {
-  return _ === null || (_.cleanups === null ? _.cleanups = [t] : _.cleanups.push(t)), t;
+function ft(t) {
+  return g === null || (g.cleanups === null ? g.cleanups = [t] : g.cleanups.push(t)), t;
 }
-function Ht() {
-  return _;
+function Jt() {
+  return g;
 }
-function Gt(t, e) {
+function Qt(t, e) {
   const n = /* @__PURE__ */ Symbol("context");
   return {
     id: n,
-    Provider: te(n),
+    Provider: ne(n),
     defaultValue: t
   };
 }
-function jt(t) {
+function Tt(t) {
   let e;
-  return _ && _.context && (e = _.context[t.id]) !== void 0 ? e : t.defaultValue;
+  return g && g.context && (e = g.context[t.id]) !== void 0 ? e : t.defaultValue;
 }
-function Jt(t) {
+function Xt(t) {
   const e = B(t), n = B(() => vt(e()));
   return n.toArray = () => {
     const a = n();
     return Array.isArray(a) ? a : a != null ? [a] : [];
   }, n;
 }
-function Wt() {
+function It() {
   if (this.sources && this.state)
-    if (this.state === F) G(this);
+    if (this.state === F) X(this);
     else {
-      const t = S;
-      S = null, J(() => ot(this), !1), S = t;
+      const t = k;
+      k = null, Z(() => it(this), !1), k = t;
     }
-  if (v) {
+  if (b) {
     const t = this.observers ? this.observers.length : 0;
-    v.sources ? (v.sources.push(this), v.sourceSlots.push(t)) : (v.sources = [this], v.sourceSlots = [t]), this.observers ? (this.observers.push(v), this.observerSlots.push(v.sources.length - 1)) : (this.observers = [v], this.observerSlots = [v.sources.length - 1]);
+    b.sources ? (b.sources.push(this), b.sourceSlots.push(t)) : (b.sources = [this], b.sourceSlots = [t]), this.observers ? (this.observers.push(b), this.observerSlots.push(b.sources.length - 1)) : (this.observers = [b], this.observerSlots = [b.sources.length - 1]);
   }
   return this.value;
 }
-function Tt(t, e, n) {
+function Lt(t, e, n) {
   let a = t.value;
-  return (!t.comparator || !t.comparator(a, e)) && (t.value = e, t.observers && t.observers.length && J(() => {
+  return (!t.comparator || !t.comparator(a, e)) && (t.value = e, t.observers && t.observers.length && Z(() => {
     for (let r = 0; r < t.observers.length; r += 1) {
       const o = t.observers[r], s = ht && ht.running;
-      s && ht.disposed.has(o), (s ? !o.tState : !o.state) && (o.pure ? S.push(o) : W.push(o), o.observers && Vt(o)), s || (o.state = F);
+      s && ht.disposed.has(o), (s ? !o.tState : !o.state) && (o.pure ? k.push(o) : T.push(o), o.observers && zt(o)), s || (o.state = F);
     }
-    if (S.length > 1e6)
-      throw S = [], new Error();
+    if (k.length > 1e6)
+      throw k = [], new Error();
   }, !1)), e;
 }
-function G(t) {
+function X(t) {
   if (!t.fn) return;
-  H(t);
-  const e = ct;
-  Qt(t, t.value, e);
+  Q(t);
+  const e = ut;
+  Zt(t, t.value, e);
 }
-function Qt(t, e, n) {
+function Zt(t, e, n) {
   let a;
-  const r = _, o = v;
-  v = _ = t;
+  const r = g, o = b;
+  b = g = t;
   try {
     a = t.fn(e);
   } catch (s) {
-    return t.pure && (t.state = F, t.owned && t.owned.forEach(H), t.owned = null), t.updatedAt = n + 1, It(s);
+    return t.pure && (t.state = F, t.owned && t.owned.forEach(Q), t.owned = null), t.updatedAt = n + 1, Ot(s);
   } finally {
-    v = o, _ = r;
+    b = o, g = r;
   }
-  (!t.updatedAt || t.updatedAt <= n) && (t.updatedAt != null && "observers" in t ? Tt(t, a) : t.value = a, t.updatedAt = n);
+  (!t.updatedAt || t.updatedAt <= n) && (t.updatedAt != null && "observers" in t ? Lt(t, a) : t.value = a, t.updatedAt = n);
 }
-function yt(t, e, n, a = F, r) {
+function xt(t, e, n, a = F, r) {
   const o = {
     fn: t,
     state: a,
@@ -141,71 +141,71 @@ function yt(t, e, n, a = F, r) {
     sourceSlots: null,
     cleanups: null,
     value: e,
-    owner: _,
-    context: _ ? _.context : null,
+    owner: g,
+    context: g ? g.context : null,
     pure: n
   };
-  return _ === null || _ !== Mt && (_.owned ? _.owned.push(o) : _.owned = [o]), o;
+  return g === null || g !== Rt && (g.owned ? g.owned.push(o) : g.owned = [o]), o;
 }
-function at(t) {
+function ot(t) {
   if (t.state === 0) return;
-  if (t.state === rt) return ot(t);
+  if (t.state === at) return it(t);
   if (t.suspense && L(t.suspense.inFallback)) return t.suspense.effects.push(t);
   const e = [t];
-  for (; (t = t.owner) && (!t.updatedAt || t.updatedAt < ct); )
+  for (; (t = t.owner) && (!t.updatedAt || t.updatedAt < ut); )
     t.state && e.push(t);
   for (let n = e.length - 1; n >= 0; n--)
     if (t = e[n], t.state === F)
-      G(t);
-    else if (t.state === rt) {
-      const a = S;
-      S = null, J(() => ot(t, e[0]), !1), S = a;
+      X(t);
+    else if (t.state === at) {
+      const a = k;
+      k = null, Z(() => it(t, e[0]), !1), k = a;
     }
 }
-function J(t, e) {
-  if (S) return t();
+function Z(t, e) {
+  if (k) return t();
   let n = !1;
-  e || (S = []), W ? n = !0 : W = [], ct++;
+  e || (k = []), T ? n = !0 : T = [], ut++;
   try {
     const a = t();
-    return Xt(n), a;
+    return Yt(n), a;
   } catch (a) {
-    n || (W = null), S = null, It(a);
+    n || (T = null), k = null, Ot(a);
   }
 }
-function Xt(t) {
-  if (S && (Lt(S), S = null), t) return;
-  const e = W;
-  W = null, e.length && J(() => Pt(e), !1);
+function Yt(t) {
+  if (k && (Vt(k), k = null), t) return;
+  const e = T;
+  T = null, e.length && Z(() => qt(e), !1);
 }
-function Lt(t) {
-  for (let e = 0; e < t.length; e++) at(t[e]);
+function Vt(t) {
+  for (let e = 0; e < t.length; e++) ot(t[e]);
 }
-function Zt(t) {
+function te(t) {
   let e, n = 0;
   for (e = 0; e < t.length; e++) {
     const a = t[e];
-    a.user ? t[n++] = a : at(a);
+    a.user ? t[n++] = a : ot(a);
   }
-  for (e = 0; e < n; e++) at(t[e]);
+  for (e = 0; e < n; e++) ot(t[e]);
 }
-function ot(t, e) {
+function it(t, e) {
   t.state = 0;
   for (let n = 0; n < t.sources.length; n += 1) {
     const a = t.sources[n];
     if (a.sources) {
       const r = a.state;
-      r === F ? a !== e && (!a.updatedAt || a.updatedAt < ct) && at(a) : r === rt && ot(a, e);
+      r === F ? a !== e && (!a.updatedAt || a.updatedAt < ut) && ot(a) : r === at && it(a, e);
     }
   }
 }
-function Vt(t) {
+function zt(t) {
   for (let e = 0; e < t.observers.length; e += 1) {
     const n = t.observers[e];
-    n.state || (n.state = rt, n.pure ? S.push(n) : W.push(n), n.observers && Vt(n));
+    n.state || (n.state = at, n.pure ? k.push(n) : T.push(n), n.observers && zt(n));
   }
 }
-function H(t) {
+function Q(t) {
   let e;
   if (t.sources)
     for (; t.sources.length; ) {
@@ -216,11 +216,11 @@ function H(t) {
       }
     }
   if (t.tOwned) {
-    for (e = t.tOwned.length - 1; e >= 0; e--) H(t.tOwned[e]);
+    for (e = t.tOwned.length - 1; e >= 0; e--) Q(t.tOwned[e]);
     delete t.tOwned;
   }
   if (t.owned) {
-    for (e = t.owned.length - 1; e >= 0; e--) H(t.owned[e]);
+    for (e = t.owned.length - 1; e >= 0; e--) Q(t.owned[e]);
     t.owned = null;
   }
   if (t.cleanups) {
@@ -229,13 +229,13 @@ function H(t) {
   }
   t.state = 0;
 }
-function Yt(t) {
+function ee(t) {
   return t instanceof Error ? t : new Error(typeof t == "string" ? t : "Unknown error", {
     cause: t
   });
 }
-function It(t, e = _) {
-  throw Yt(t);
+function Ot(t, e = g) {
+  throw ee(t);
 }
 function vt(t) {
   if (typeof t == "function" && !t.length) return vt(t());
@@ -249,65 +249,65 @@ function vt(t) {
   }
   return t;
 }
-function te(t, e) {
+function ne(t, e) {
   return function(a) {
     let r;
-    return T(() => r = L(() => (_.context = {
-      ..._.context,
+    return I(() => r = L(() => (g.context = {
+      ...g.context,
       [t]: a.value
-    }, Jt(() => a.children))), void 0), r;
+    }, Xt(() => a.children))), void 0), r;
   };
 }
-const ee = /* @__PURE__ */ Symbol("fallback");
-function kt(t) {
+const re = /* @__PURE__ */ Symbol("fallback");
+function At(t) {
   for (let e = 0; e < t.length; e++) t[e]();
 }
-function ne(t, e, n = {}) {
+function ae(t, e, n = {}) {
   let a = [], r = [], o = [], s = 0, i = e.length > 1 ? [] : null;
-  return ut(() => kt(o)), () => {
+  return ft(() => At(o)), () => {
     let c = t() || [], u = c.length, f, l;
-    return c[Kt], L(() => {
-      let w, $, m, E, g, d, p, x, C;
+    return c[Ht], L(() => {
+      let x, S, y, P, A, w, h, d, _;
       if (u === 0)
-        s !== 0 && (kt(o), o = [], a = [], r = [], s = 0, i && (i = [])), n.fallback && (a = [ee], r[0] = et((P) => (o[0] = P, n.fallback())), s = 1);
+        s !== 0 && (At(o), o = [], a = [], r = [], s = 0, i && (i = [])), n.fallback && (a = [re], r[0] = nt((M) => (o[0] = M, n.fallback())), s = 1);
       else if (s === 0) {
         for (r = new Array(u), l = 0; l < u; l++)
-          a[l] = c[l], r[l] = et(k);
+          a[l] = c[l], r[l] = nt(C);
         s = u;
       } else {
-        for (m = new Array(u), E = new Array(u), i && (g = new Array(u)), d = 0, p = Math.min(s, u); d < p && a[d] === c[d]; d++) ;
-        for (p = s - 1, x = u - 1; p >= d && x >= d && a[p] === c[x]; p--, x--)
-          m[x] = r[p], E[x] = o[p], i && (g[x] = i[p]);
-        for (w = /* @__PURE__ */ new Map(), $ = new Array(x + 1), l = x; l >= d; l--)
-          C = c[l], f = w.get(C), $[l] = f === void 0 ? -1 : f, w.set(C, l);
-        for (f = d; f <= p; f++)
-          C = a[f], l = w.get(C), l !== void 0 && l !== -1 ? (m[l] = r[f], E[l] = o[f], i && (g[l] = i[f]), l = $[l], w.set(C, l)) : o[f]();
-        for (l = d; l < u; l++)
-          l in m ? (r[l] = m[l], o[l] = E[l], i && (i[l] = g[l], i[l](l))) : r[l] = et(k);
+        for (y = new Array(u), P = new Array(u), i && (A = new Array(u)), w = 0, h = Math.min(s, u); w < h && a[w] === c[w]; w++) ;
+        for (h = s - 1, d = u - 1; h >= w && d >= w && a[h] === c[d]; h--, d--)
+          y[d] = r[h], P[d] = o[h], i && (A[d] = i[h]);
+        for (x = /* @__PURE__ */ new Map(), S = new Array(d + 1), l = d; l >= w; l--)
+          _ = c[l], f = x.get(_), S[l] = f === void 0 ? -1 : f, x.set(_, l);
+        for (f = w; f <= h; f++)
+          _ = a[f], l = x.get(_), l !== void 0 && l !== -1 ? (y[l] = r[f], P[l] = o[f], i && (A[l] = i[f]), l = S[l], x.set(_, l)) : o[f]();
+        for (l = w; l < u; l++)
+          l in y ? (r[l] = y[l], o[l] = P[l], i && (i[l] = A[l], i[l](l))) : r[l] = nt(C);
         r = r.slice(0, s = u), a = c.slice(0);
       }
       return r;
     });
-    function k(w) {
-      if (o[l] = w, i) {
-        const [$, m] = M(l);
-        return i[l] = m, e(c[l], $);
+    function C(x) {
+      if (o[l] = x, i) {
+        const [S, y] = E(l);
+        return i[l] = y, e(c[l], S);
       }
       return e(c[l]);
     }
   };
 }
-function h(t, e) {
+function p(t, e) {
   return L(() => t(e || {}));
 }
-const re = (t) => `Stale read from <${t}>.`;
-function ae(t) {
+const oe = (t) => `Stale read from <${t}>.`;
+function ie(t) {
   const e = "fallback" in t && {
     fallback: () => t.fallback
   };
-  return B(ne(() => t.each, t.children, e || void 0));
+  return B(ae(() => t.each, t.children, e || void 0));
 }
-function Q(t) {
+function Y(t) {
   const e = t.keyed, n = B(() => t.when, void 0, void 0), a = e ? n : B(n, void 0, {
     equals: (r, o) => !r == !o
   });
@@ -316,15 +316,15 @@ function Q(t) {
     if (r) {
       const o = t.children;
       return typeof o == "function" && o.length > 0 ? L(() => o(e ? r : () => {
-        if (!L(a)) throw re("Show");
+        if (!L(a)) throw oe("Show");
         return n();
       })) : o;
     }
     return t.fallback;
   }, void 0, void 0);
 }
-const Ct = (t) => B(() => t());
-function oe(t, e, n) {
+const wt = (t) => B(() => t());
+function se(t, e, n) {
   let a = n.length, r = e.length, o = a, s = 0, i = 0, c = e[r - 1].nextSibling, u = null;
   for (; s < r || i < o; ) {
     if (e[s] === n[i]) {
@@ -351,20 +351,20 @@ function oe(t, e, n) {
       const f = u.get(e[s]);
       if (f != null)
         if (i < f && f < o) {
-          let l = s, k = 1, w;
-          for (; ++l < r && l < o && !((w = u.get(e[l])) == null || w !== f + k); )
-            k++;
-          if (k > f - i) {
-            const $ = e[s];
-            for (; i < f; ) t.insertBefore(n[i++], $);
+          let l = s, C = 1, x;
+          for (; ++l < r && l < o && !((x = u.get(e[l])) == null || x !== f + C); )
+            C++;
+          if (C > f - i) {
+            const S = e[s];
+            for (; i < f; ) t.insertBefore(n[i++], S);
           } else t.replaceChild(n[i++], e[s++]);
         } else s++;
       else e[s++].remove();
     }
   }
 }
-const St = "_$DX_DELEGATE";
-function V(t, e, n, a) {
+const $t = "_$DX_DELEGATE";
+function R(t, e, n, a) {
   let r;
   const o = () => {
     const i = document.createElement("template");
@@ -372,30 +372,30 @@ function V(t, e, n, a) {
   }, s = () => (r || (r = o())).cloneNode(!0);
   return s.cloneNode = s, s;
 }
-function ie(t, e = window.document) {
-  const n = e[St] || (e[St] = /* @__PURE__ */ new Set());
+function le(t, e = window.document) {
+  const n = e[$t] || (e[$t] = /* @__PURE__ */ new Set());
   for (let a = 0, r = t.length; a < r; a++) {
     const o = t[a];
-    n.has(o) || (n.add(o), e.addEventListener(o, le));
+    n.has(o) || (n.add(o), e.addEventListener(o, ue));
   }
 }
-function gt(t, e, n) {
+function pt(t, e, n) {
   n == null ? t.removeAttribute(e) : t.setAttribute(e, n);
 }
-function wt(t, e) {
+function mt(t, e) {
   e == null ? t.removeAttribute("class") : t.className = e;
 }
-function se(t, e, n) {
+function ce(t, e, n) {
   n != null ? t.style.setProperty(e, n) : t.style.removeProperty(e);
 }
-function pt(t, e, n) {
+function gt(t, e, n) {
   return L(() => t(e, n));
 }
-function y(t, e, n, a) {
-  if (n !== void 0 && !a && (a = []), typeof e != "function") return it(t, e, a, n);
-  T((r) => it(t, e(), r, n), a);
+function v(t, e, n, a) {
+  if (n !== void 0 && !a && (a = []), typeof e != "function") return st(t, e, a, n);
+  I((r) => st(t, e(), r, n), a);
 }
-function le(t) {
+function ue(t) {
   let e = t.target;
   const n = `$$${t.type}`, a = t.target, r = t.currentTarget, o = (c) => Object.defineProperty(t, "target", {
     configurable: !0,
@@ -429,7 +429,7 @@ function le(t) {
   } else i();
   o(a);
 }
-function it(t, e, n, a, r) {
+function st(t, e, n, a, r) {
   for (; typeof n == "function"; ) n = n();
   if (e === n) return n;
   const o = typeof e, s = a !== void 0;
@@ -438,48 +438,48 @@ function it(t, e, n, a, r) {
       return n;
     if (s) {
       let i = n[0];
-      i && i.nodeType === 3 ? i.data !== e && (i.data = e) : i = document.createTextNode(e), n = D(t, n, a, i);
+      i && i.nodeType === 3 ? i.data !== e && (i.data = e) : i = document.createTextNode(e), n = J(t, n, a, i);
     } else
       n !== "" && typeof n == "string" ? n = t.firstChild.data = e : n = t.textContent = e;
   } else if (e == null || o === "boolean")
-    n = D(t, n, a);
+    n = J(t, n, a);
   else {
     if (o === "function")
-      return T(() => {
+      return I(() => {
         let i = e();
         for (; typeof i == "function"; ) i = i();
-        n = it(t, i, n, a);
+        n = st(t, i, n, a);
       }), () => n;
     if (Array.isArray(e)) {
       const i = [], c = n && Array.isArray(n);
-      if (mt(i, e, n, r))
-        return T(() => n = it(t, i, n, a, !0)), () => n;
+      if (yt(i, e, n, r))
+        return I(() => n = st(t, i, n, a, !0)), () => n;
       if (i.length === 0) {
-        if (n = D(t, n, a), s) return n;
-      } else c ? n.length === 0 ? At(t, i, a) : oe(t, n, i) : (n && D(t), At(t, i));
+        if (n = J(t, n, a), s) return n;
+      } else c ? n.length === 0 ? Et(t, i, a) : se(t, n, i) : (n && J(t), Et(t, i));
       n = i;
     } else if (e.nodeType) {
       if (Array.isArray(n)) {
-        if (s) return n = D(t, n, a, e);
-        D(t, n, null, e);
+        if (s) return n = J(t, n, a, e);
+        J(t, n, null, e);
       } else n == null || n === "" || !t.firstChild ? t.appendChild(e) : t.replaceChild(e, t.firstChild);
       n = e;
     }
   }
   return n;
 }
-function mt(t, e, n, a) {
+function yt(t, e, n, a) {
   let r = !1;
   for (let o = 0, s = e.length; o < s; o++) {
     let i = e[o], c = n && n[t.length], u;
     if (!(i == null || i === !0 || i === !1)) if ((u = typeof i) == "object" && i.nodeType)
       t.push(i);
     else if (Array.isArray(i))
-      r = mt(t, i, c) || r;
+      r = yt(t, i, c) || r;
     else if (u === "function")
       if (a) {
         for (; typeof i == "function"; ) i = i();
-        r = mt(t, Array.isArray(i) ? i : [i], Array.isArray(c) ? c : [c]) || r;
+        r = yt(t, Array.isArray(i) ? i : [i], Array.isArray(c) ? c : [c]) || r;
       } else
         t.push(i), r = !0;
     else {
@@ -489,10 +489,10 @@ function mt(t, e, n, a) {
   }
   return r;
 }
-function At(t, e, n = null) {
+function Et(t, e, n = null) {
   for (let a = 0, r = e.length; a < r; a++) t.insertBefore(e[a], n);
 }
-function D(t, e, n, a) {
+function J(t, e, n, a) {
   if (n === void 0) return t.textContent = "";
   const r = a || document.createTextNode("");
   if (e.length) {
@@ -507,34 +507,34 @@ function D(t, e, n, a) {
   } else t.insertBefore(r, n);
   return [r];
 }
-function ce(t) {
+function fe(t) {
   return Object.keys(t).reduce((n, a) => {
     const r = t[a];
-    return n[a] = Object.assign({}, r), Ot(r.value) && !ge(r.value) && !Array.isArray(r.value) && (n[a].value = Object.assign({}, r.value)), Array.isArray(r.value) && (n[a].value = r.value.slice(0)), n;
+    return n[a] = Object.assign({}, r), Ft(r.value) && !_e(r.value) && !Array.isArray(r.value) && (n[a].value = Object.assign({}, r.value)), Array.isArray(r.value) && (n[a].value = r.value.slice(0)), n;
   }, {});
 }
-function ue(t) {
+function de(t) {
   return t ? Object.keys(t).reduce((n, a) => {
     const r = t[a];
-    return n[a] = Ot(r) && "value" in r ? r : {
+    return n[a] = Ft(r) && "value" in r ? r : {
       value: r
-    }, n[a].attribute || (n[a].attribute = he(a)), n[a].parse = "parse" in n[a] ? n[a].parse : typeof n[a].value != "string", n;
+    }, n[a].attribute || (n[a].attribute = ge(a)), n[a].parse = "parse" in n[a] ? n[a].parse : typeof n[a].value != "string", n;
   }, {}) : {};
 }
-function fe(t) {
+function he(t) {
   return Object.keys(t).reduce((n, a) => (n[a] = t[a].value, n), {});
 }
-function de(t, e) {
-  const n = ce(e);
+function pe(t, e) {
+  const n = fe(e);
   return Object.keys(e).forEach((r) => {
     const o = n[r], s = t.getAttribute(o.attribute), i = t[r];
-    s != null && (o.value = o.parse ? zt(s) : s), i != null && (o.value = Array.isArray(i) ? i.slice(0) : i), o.reflect && $t(t, o.attribute, o.value, !!o.parse), Object.defineProperty(t, r, {
+    s != null && (o.value = o.parse ? Bt(s) : s), i != null && (o.value = Array.isArray(i) ? i.slice(0) : i), o.reflect && Pt(t, o.attribute, o.value, !!o.parse), Object.defineProperty(t, r, {
       get() {
         return o.value;
       },
       set(c) {
         const u = o.value;
-        o.value = c, o.reflect && $t(this, o.attribute, o.value, !!o.parse);
+        o.value = c, o.reflect && Pt(this, o.attribute, o.value, !!o.parse);
         for (let f = 0, l = this.__propertyChangedCallbacks.length; f < l; f++)
           this.__propertyChangedCallbacks[f](r, c, u);
       },
@@ -543,7 +543,7 @@ function de(t, e) {
     });
   }), n;
 }
-function zt(t) {
+function Bt(t) {
   if (t)
     try {
       return JSON.parse(t);
@@ -551,25 +551,25 @@ function zt(t) {
       return t;
     }
 }
-function $t(t, e, n, a) {
+function Pt(t, e, n, a) {
   if (n == null || n === !1) return t.removeAttribute(e);
   let r = a ? JSON.stringify(n) : n;
   t.__updating[e] = !0, r === "true" && (r = ""), t.setAttribute(e, r), Promise.resolve().then(() => delete t.__updating[e]);
 }
-function he(t) {
+function ge(t) {
   return t.replace(/\.?([A-Z]+)/g, (e, n) => "-" + n.toLowerCase()).replace("_", "-").replace(/^-/, "");
 }
-function Ot(t) {
+function Ft(t) {
   return t != null && (typeof t == "object" || typeof t == "function");
 }
-function ge(t) {
+function _e(t) {
   return Object.prototype.toString.call(t) === "[object Function]";
 }
-function pe(t) {
+function be(t) {
   return typeof t == "function" && t.toString().indexOf("class") === 0;
 }
 let _t;
-function _e(t, e) {
+function ve(t, e) {
   const n = Object.keys(e);
   return class extends t {
     static get observedAttributes() {
@@ -582,10 +582,10 @@ function _e(t, e) {
     }
     connectedCallback() {
       if (this.__initialized) return;
-      this.__releaseCallbacks = [], this.__propertyChangedCallbacks = [], this.__updating = {}, this.props = de(this, e);
-      const r = fe(this.props), o = this.Component, s = _t;
+      this.__releaseCallbacks = [], this.__propertyChangedCallbacks = [], this.__updating = {}, this.props = pe(this, e);
+      const r = he(this.props), o = this.Component, s = _t;
       try {
-        _t = this, this.__initialized = !0, pe(o) ? new o(r, {
+        _t = this, this.__initialized = !0, be(o) ? new o(r, {
           element: this
         }) : o(r, {
           element: this
@@ -604,7 +604,7 @@ function _e(t, e) {
     attributeChangedCallback(r, o, s) {
       if (this.__initialized && !this.__updating[r] && (r = this.lookupProp(r), r in e)) {
         if (s == null && !this[r]) return;
-        this[r] = e[r].parse ? zt(s) : s;
+        this[r] = e[r].parse ? Bt(s) : s;
       }
     }
     lookupProp(r) {
@@ -624,7 +624,7 @@ function _e(t, e) {
     }
   };
 }
-function be(t, e = {}, n = {}) {
+function we(t, e = {}, n = {}) {
   const {
     BaseElement: a = HTMLElement,
     extension: r,
@@ -632,13 +632,13 @@ function be(t, e = {}, n = {}) {
   } = n;
   return (s) => {
     let i = o.get(t);
-    return i ? (i.prototype.Component = s, i) : (i = _e(a, ue(e)), i.prototype.Component = s, i.prototype.registeredTag = t, o.define(t, i, r), i);
+    return i ? (i.prototype.Component = s, i) : (i = ve(a, de(e)), i.prototype.Component = s, i.prototype.registeredTag = t, o.define(t, i, r), i);
   };
 }
-function ve(t) {
+function me(t) {
   const e = Object.keys(t), n = {};
   for (let a = 0; a < e.length; a++) {
-    const [r, o] = M(t[e[a]]);
+    const [r, o] = E(t[e[a]]);
     Object.defineProperty(n, e[a], {
       get: r,
       set(s) {
@@ -648,95 +648,95 @@ function ve(t) {
   }
   return n;
 }
-function we(t) {
+function ye(t) {
   if (t.assignedSlot && t.assignedSlot._$owner) return t.assignedSlot._$owner;
   let e = t.parentNode;
   for (; e && !e._$owner && !(e.assignedSlot && e.assignedSlot._$owner); )
     e = e.parentNode;
   return e && e.assignedSlot ? e.assignedSlot._$owner : t._$owner;
 }
-function me(t) {
+function xe(t) {
   return (e, n) => {
     const { element: a } = n;
-    return et((r) => {
-      const o = ve(e);
+    return nt((r) => {
+      const o = me(e);
       a.addPropertyChangedCallback((i, c) => o[i] = c), a.addReleaseCallback(() => {
         a.renderRoot.textContent = "", r();
       });
       const s = t(o, n);
-      return y(a.renderRoot, s);
-    }, we(a));
+      return v(a.renderRoot, s);
+    }, ye(a));
   };
 }
-function ye(t, e, n) {
-  return arguments.length === 2 && (n = e, e = {}), be(t, e)(me(n));
+function ke(t, e, n) {
+  return arguments.length === 2 && (n = e, e = {}), we(t, e)(xe(n));
 }
-function U(t) {
-  const [e, n] = M(t.peek(), { equals: !1 }), a = t.subscribe((r) => n(() => r));
-  return ut(() => a()), e;
+function K(t) {
+  const [e, n] = E(t.peek(), { equals: !1 }), a = t.subscribe((r) => n(() => r));
+  return ft(() => a()), e;
 }
-const st = Gt();
-function xe(t) {
-  const [e, n] = M("no-url"), [a, r] = M(!1), o = U(t.moqWatch.backend.audio.muted), [s, i] = M(0), c = U(t.moqWatch.backend.video.stalled), u = U(t.moqWatch.backend.jitter), [f, l] = M([]), k = U(t.moqWatch.backend.video.source.track), [w, $] = M(!1), [m, E] = M(!!document.fullscreenElement), g = () => {
+const lt = Qt();
+function Ce(t) {
+  const [e, n] = E("no-url"), [a, r] = E(!1), o = K(t.moqWatch.backend.audio.muted), [s, i] = E(0), c = K(t.moqWatch.backend.video.stalled), u = K(t.moqWatch.backend.jitter), [f, l] = E([]), C = K(t.moqWatch.backend.video.source.track), [x, S] = E(!1), [y, P] = E(!!document.fullscreenElement), A = () => {
     t.moqWatch.paused = !t.moqWatch.paused;
-  }, d = () => {
+  }, w = () => {
     document.fullscreenElement ? document.exitFullscreen() : t.moqWatch.requestFullscreen();
-  }, p = (b) => {
-    t.moqWatch.backend.audio.volume.set(b / 100);
-  }, x = () => {
-    t.moqWatch.backend.audio.muted.update((b) => !b);
-  }, C = (b) => {
-    t.moqWatch.jitter = b;
-  }, P = (b) => {
+  }, h = (m) => {
+    t.moqWatch.backend.audio.volume.set(m / 100);
+  }, d = () => {
+    t.moqWatch.backend.audio.muted.update((m) => !m);
+  }, _ = (m) => {
+    t.moqWatch.jitter = m;
+  }, M = (m) => {
     t.moqWatch.backend.video.source.target.update((q) => ({
       ...q,
-      name: b
+      name: m
     }));
-  }, I = U(t.moqWatch.backend.video.timestamp), ft = U(t.moqWatch.backend.video.buffered), X = U(t.moqWatch.backend.audio.buffered), dt = {
+  }, U = K(t.moqWatch.backend.video.timestamp), D = K(t.moqWatch.backend.video.buffered), H = K(t.moqWatch.backend.audio.buffered), dt = {
     moqWatch: t.moqWatch,
     watchStatus: e,
-    togglePlayback: g,
+    togglePlayback: A,
     isPlaying: a,
-    setVolume: p,
+    setVolume: h,
     isMuted: o,
     currentVolume: s,
-    toggleMuted: x,
+    toggleMuted: d,
     buffering: c,
     jitter: u,
-    setJitter: C,
+    setJitter: _,
     availableRenditions: f,
-    activeRendition: k,
-    setActiveRendition: P,
-    isStatsPanelVisible: w,
-    setIsStatsPanelVisible: $,
-    isFullscreen: m,
-    toggleFullscreen: d,
-    timestamp: I,
-    videoBuffered: ft,
-    audioBuffered: X
-  }, R = t.moqWatch, z = new Ft.Effect();
-  z.run((b) => {
-    const q = b.get(R.connection.url), A = b.get(R.connection.status), O = b.get(R.broadcast.status);
-    q ? A === "disconnected" ? n("disconnected") : A === "connecting" ? n("connecting") : O === "offline" ? n("offline") : O === "loading" ? n("loading") : O === "live" ? n("live") : A === "connected" && n("connected") : n("no-url");
-  }), z.run((b) => {
-    const q = b.get(R.backend.paused);
+    activeRendition: C,
+    setActiveRendition: M,
+    isStatsPanelVisible: x,
+    setIsStatsPanelVisible: S,
+    isFullscreen: y,
+    toggleFullscreen: w,
+    timestamp: U,
+    videoBuffered: D,
+    audioBuffered: H
+  }, j = t.moqWatch, V = new Ut.Effect();
+  V.run((m) => {
+    const q = m.get(j.connection.url), z = m.get(j.connection.status), O = m.get(j.broadcast.status);
+    q ? z === "disconnected" ? n("disconnected") : z === "connecting" ? n("connecting") : O === "offline" ? n("offline") : O === "loading" ? n("loading") : O === "live" ? n("live") : z === "connected" && n("connected") : n("no-url");
+  }), V.run((m) => {
+    const q = m.get(j.backend.paused);
     r(!q);
-  }), z.run((b) => {
-    const q = b.get(R.backend.audio.volume);
+  }), V.run((m) => {
+    const q = m.get(j.backend.audio.volume);
     i(q * 100);
-  }), z.run((b) => {
-    const A = b.get(R.backend.video.source.catalog)?.renditions ?? {}, O = Object.entries(A).map(([Y, K]) => ({
-      name: Y,
-      width: K.codedWidth,
-      height: K.codedHeight,
-      bitrate: K.bitrate
+  }), V.run((m) => {
+    const z = m.get(j.backend.video.source.catalog)?.renditions ?? {}, O = Object.entries(z).map(([$, G]) => ({
+      name: $,
+      width: G.codedWidth,
+      height: G.codedHeight,
+      bitrate: G.bitrate
     }));
     l(O);
   });
-  const Z = () => {
-    E(!!document.fullscreenElement);
+  const tt = () => {
+    P(!!document.fullscreenElement);
   };
-  return z.event(document, "fullscreenchange", Z), ut(() => z.close()), h(st.Provider, {
+  return V.event(document, "fullscreenchange", tt), ft(() => V.close()), p(lt.Provider, {
     value: dt,
     get children() {
       return t.children;
@@ -744,120 +744,123 @@ function xe(t) {
   });
 }
 function N() {
-  const t = jt(st);
+  const t = Tt(lt);
   if (!t)
     throw new Error("useWatchUIContext must be used within a WatchUIContextProvider");
   return t;
 }
-var ke = /* @__PURE__ */ V('<div class="watch-ui__buffering flex--center"><div class=watch-ui__buffering-spinner>');
-function Ce() {
+var Se = /* @__PURE__ */ R('<div class="watch-ui__buffering flex--center"><div class=watch-ui__buffering-spinner>');
+function Ae() {
   const t = N();
-  return h(Q, {
+  return p(Y, {
     get when() {
       return t.buffering();
     },
     get children() {
-      return ke();
+      return Se();
     }
   });
 }
-var Se = /* @__PURE__ */ V('<div class=watch-ui__buffer><div role=slider tabindex=0 aria-label="Buffer jitter"><div class=watch-ui__buffer-playhead></div><div class="watch-ui__buffer-track watch-ui__buffer-track--video"><span class=watch-ui__buffer-track-label>Video</span><canvas class=watch-ui__buffer-canvas></canvas></div><div class="watch-ui__buffer-track watch-ui__buffer-track--audio"><span class=watch-ui__buffer-track-label>Audio</span><canvas class=watch-ui__buffer-canvas></canvas></div><div class=watch-ui__buffer-target-area><div class=watch-ui__buffer-target-line><span class=watch-ui__buffer-target-label>');
-const bt = 0, tt = 100;
-function Et(t, e, n, a, r) {
+var $e = /* @__PURE__ */ R('<div class=watch-ui__buffer><div role=slider tabindex=0 aria-label="Buffer jitter"><div class=watch-ui__buffer-playhead></div><div class="watch-ui__buffer-track watch-ui__buffer-track--video"><span class=watch-ui__buffer-track-label>Video</span><canvas class=watch-ui__buffer-canvas></canvas></div><div class="watch-ui__buffer-track watch-ui__buffer-track--audio"><span class=watch-ui__buffer-track-label>Audio</span><canvas class=watch-ui__buffer-canvas></canvas></div><div class=watch-ui__buffer-target-area><div class=watch-ui__buffer-target-line><span class=watch-ui__buffer-target-label>'), Ee = /* @__PURE__ */ R("<span class=watch-ui__buffer-help>click to change latency");
+const bt = 0, et = 100;
+function Mt(t, e, n, a, r) {
   const o = t.getContext("2d");
   if (!o) return;
   const s = window.devicePixelRatio || 1, i = t.getBoundingClientRect(), c = i.width, u = i.height, f = Math.round(c * s), l = Math.round(u * s);
   if ((t.width !== f || t.height !== l) && (t.width = f, t.height = l), o.setTransform(s, 0, 0, s, 0, 0), o.clearRect(0, 0, c, u), n === void 0) return;
-  const k = 2, w = u - k * 2, $ = 2;
-  for (let m = 0; m < e.length; m++) {
-    const E = e[m], g = E.start - n, d = E.end - n, p = Math.max(0, g), x = Math.min(d, a);
-    if (x <= p) continue;
-    const C = p / a * c, P = Math.max(2, (x - p) / a * c);
-    if (o.globalAlpha = 0.85, o.fillStyle = r ? "#f87171" : m > 0 ? "#facc15" : "#4ade80", typeof o.roundRect == "function" ? (o.beginPath(), o.roundRect(C, k, P, w, $), o.fill()) : o.fillRect(C, k, P, w), d > a) {
-      const I = ((d - a) / 1e3).toFixed(1);
-      o.globalAlpha = 0.7, o.fillStyle = "black", o.font = "500 9px system-ui, sans-serif", o.textAlign = "right", o.textBaseline = "middle", o.fillText(`+${I}s`, C + P - 4, u / 2);
+  const C = 2, x = u - C * 2, S = 2;
+  for (let y = 0; y < e.length; y++) {
+    const P = e[y], A = P.start - n, w = P.end - n, h = Math.max(0, A), d = Math.min(w, a);
+    if (d <= h) continue;
+    const _ = h / a * c, M = Math.max(2, (d - h) / a * c);
+    if (o.globalAlpha = 0.85, o.fillStyle = r ? "#f87171" : y > 0 ? "#facc15" : "#4ade80", typeof o.roundRect == "function" ? (o.beginPath(), o.roundRect(_, C, M, x, S), o.fill()) : o.fillRect(_, C, M, x), w > a) {
+      const U = ((w - a) / 1e3).toFixed(1);
+      o.globalAlpha = 0.7, o.fillStyle = "black", o.font = "500 9px system-ui, sans-serif", o.textAlign = "right", o.textBaseline = "middle", o.fillText(`+${U}s`, _ + M - 4, u / 2);
     }
   }
 }
-function Ae(t) {
-  const e = N(), n = () => t.max ?? 5e3, [a, r] = M(!1), o = B(() => e.jitter() / n() * 100);
-  let s, i, c;
-  const u = 48, f = (g) => {
-    if (!s) return;
-    const d = s.getBoundingClientRect(), p = d.width - u, C = Math.max(0, Math.min(g - d.left - u, p)) / p * n(), P = Math.round(C / tt) * tt, I = Math.max(bt, Math.min(n(), P));
-    e.setJitter(I);
-  }, l = (g) => {
-    r(!0), f(g.clientX), document.addEventListener("mousemove", k), document.addEventListener("mouseup", w);
-  }, k = (g) => {
-    a() && f(g.clientX);
-  }, w = () => {
-    r(!1), document.removeEventListener("mousemove", k), document.removeEventListener("mouseup", w);
-  }, $ = (g) => {
+function Pe(t) {
+  const e = N(), n = () => t.max ?? 5e3, [a, r] = E(!1), [o, s] = E(!1), i = B(() => e.jitter() / n() * 100);
+  let c, u, f;
+  const l = 48, C = (h) => {
+    if (!c) return;
+    const d = c.getBoundingClientRect(), _ = d.width - l, U = Math.max(0, Math.min(h - d.left - l, _)) / _ * n(), D = Math.round(U / et) * et, H = Math.max(bt, Math.min(n(), D));
+    e.setJitter(H);
+  }, x = (h) => {
+    r(!0), s(!0), C(h.clientX), document.addEventListener("mousemove", S), document.addEventListener("mouseup", y);
+  }, S = (h) => {
+    a() && C(h.clientX);
+  }, y = () => {
+    r(!1), document.removeEventListener("mousemove", S), document.removeEventListener("mouseup", y);
+  }, P = (h) => {
     let d = 0;
-    if (g.key === "ArrowRight" || g.key === "ArrowUp")
-      d = tt;
-    else if (g.key === "ArrowLeft" || g.key === "ArrowDown")
-      d = -tt;
+    if (h.key === "ArrowRight" || h.key === "ArrowUp")
+      d = et;
+    else if (h.key === "ArrowLeft" || h.key === "ArrowDown")
+      d = -et;
     else
       return;
-    g.preventDefault();
-    const p = Math.max(bt, Math.min(n(), e.jitter() + d));
-    e.setJitter(p);
+    h.preventDefault(), s(!0);
+    const _ = Math.max(bt, Math.min(n(), e.jitter() + d));
+    e.setJitter(_);
   };
-  let m;
-  const E = () => {
-    const g = n(), d = e.timestamp(), p = e.buffering();
-    i && Et(i, e.videoBuffered(), d, g, p), c && Et(c, e.audioBuffered(), d, g, p), m = requestAnimationFrame(E);
+  let A;
+  const w = () => {
+    const h = n(), d = e.timestamp(), _ = e.buffering();
+    u && Mt(u, e.videoBuffered(), d, h, _), f && Mt(f, e.audioBuffered(), d, h, _), A = requestAnimationFrame(w);
   };
-  return Rt(() => {
-    m = requestAnimationFrame(E);
-  }), ut(() => {
-    m !== void 0 && cancelAnimationFrame(m), document.removeEventListener("mousemove", k), document.removeEventListener("mouseup", w);
+  return Wt(() => {
+    A = requestAnimationFrame(w);
+  }), ft(() => {
+    A !== void 0 && cancelAnimationFrame(A), document.removeEventListener("mousemove", S), document.removeEventListener("mouseup", y);
   }), (() => {
-    var g = Se(), d = g.firstChild, p = d.firstChild, x = p.nextSibling, C = x.firstChild, P = C.nextSibling, I = x.nextSibling, ft = I.firstChild, X = ft.nextSibling, dt = I.nextSibling, R = dt.firstChild, z = R.firstChild;
-    d.$$keydown = $, d.$$mousedown = l;
-    var Z = s;
-    typeof Z == "function" ? pt(Z, d) : s = d, gt(d, "aria-valuemin", bt);
-    var b = i;
-    typeof b == "function" ? pt(b, P) : i = P;
+    var h = $e(), d = h.firstChild, _ = d.firstChild, M = _.nextSibling, U = M.firstChild, D = U.nextSibling, H = M.nextSibling, dt = H.firstChild, j = dt.nextSibling, V = H.nextSibling, tt = V.firstChild, m = tt.firstChild;
+    d.$$keydown = P, d.$$mousedown = x;
     var q = c;
-    return typeof q == "function" ? pt(q, X) : c = X, y(z, () => `${Math.round(e.jitter())}ms`), T((A) => {
-      var O = `watch-ui__buffer-visualization ${a() ? "watch-ui__buffer-visualization--dragging" : ""}`, Y = e.jitter(), K = n(), xt = `${o()}%`;
-      return O !== A.e && wt(d, A.e = O), Y !== A.t && gt(d, "aria-valuenow", A.t = Y), K !== A.a && gt(d, "aria-valuemax", A.a = K), xt !== A.o && se(R, "left", A.o = xt), A;
+    typeof q == "function" ? gt(q, d) : c = d, pt(d, "aria-valuemin", bt);
+    var z = u;
+    typeof z == "function" ? gt(z, D) : u = D;
+    var O = f;
+    return typeof O == "function" ? gt(O, j) : f = j, v(m, () => `${Math.round(e.jitter())}ms`), v(d, (() => {
+      var $ = wt(() => !o());
+      return () => $() && Ee();
+    })(), null), I(($) => {
+      var G = `watch-ui__buffer-visualization ${a() ? "watch-ui__buffer-visualization--dragging" : ""}`, kt = e.jitter(), Ct = n(), St = `${i()}%`;
+      return G !== $.e && mt(d, $.e = G), kt !== $.t && pt(d, "aria-valuenow", $.t = kt), Ct !== $.a && pt(d, "aria-valuemax", $.a = Ct), St !== $.o && ce(tt, "left", $.o = St), $;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
-    }), g;
+    }), h;
   })();
 }
-ie(["mousedown", "keydown"]);
-function $e() {
+le(["mousedown", "keydown"]);
+function Me() {
   const t = N();
-  return h(lt, {
+  return p(ct, {
     title: "Fullscreen",
     onClick: () => {
       t.toggleFullscreen();
     },
     get children() {
-      return h(Q, {
+      return p(Y, {
         get when() {
           return t.isFullscreen();
         },
         get fallback() {
-          return h(j.FullscreenEnter, {});
+          return p(W.FullscreenEnter, {});
         },
         get children() {
-          return h(j.FullscreenExit, {});
+          return p(W.FullscreenExit, {});
         }
       });
     }
   });
 }
-function Ee() {
+function qe() {
   const t = N();
-  return h(lt, {
+  return p(ct, {
     get title() {
       return t.isPlaying() ? "Pause" : "Play";
     },
@@ -866,51 +869,51 @@ function Ee() {
       t.togglePlayback();
     },
     get children() {
-      return h(Q, {
+      return p(Y, {
         get when() {
           return t.isPlaying();
         },
         get fallback() {
-          return h(j.Play, {});
+          return p(W.Play, {});
         },
         get children() {
-          return h(j.Pause, {});
+          return p(W.Pause, {});
         }
       });
     }
   });
 }
-var Pe = /* @__PURE__ */ V("<div class=watch-ui__quality-selector><label for=quality-select class=watch-ui__quality-label>Quality: </label><select id=quality-select class=watch-ui__quality-select><option value>Auto"), Me = /* @__PURE__ */ V("<option>");
-function qe(t) {
+var Re = /* @__PURE__ */ R("<div class=watch-ui__quality-selector><label for=quality-select class=watch-ui__quality-label>Quality: </label><select id=quality-select class=watch-ui__quality-select><option value>Auto"), je = /* @__PURE__ */ R("<option>");
+function We(t) {
   return t >= 1e6 ? `${(t / 1e6).toFixed(1)} Mbps` : t >= 1e3 ? `${(t / 1e3).toFixed(0)} kbps` : `${t} bps`;
 }
-function Re() {
+function Te() {
   const t = N(), e = (n) => {
     const a = n.currentTarget.value || void 0;
     t.setActiveRendition(a);
   };
   return (() => {
-    var n = Pe(), a = n.firstChild, r = a.nextSibling;
-    return r.firstChild, r.addEventListener("change", e), y(r, h(ae, {
+    var n = Re(), a = n.firstChild, r = a.nextSibling;
+    return r.firstChild, r.addEventListener("change", e), v(r, p(ie, {
       get each() {
         return t.availableRenditions() ?? [];
       },
       children: (o) => (() => {
-        var s = Me();
-        return y(s, () => o.name, null), y(s, (() => {
-          var i = Ct(() => !!(o.width && o.height));
+        var s = je();
+        return v(s, () => o.name, null), v(s, (() => {
+          var i = wt(() => !!(o.width && o.height));
           return () => i() ? ` (${o.width}x${o.height})` : "";
-        })(), null), y(s, (() => {
-          var i = Ct(() => !!o.bitrate);
-          return () => i() ? ` ${qe(o.bitrate)}` : "";
-        })(), null), T(() => s.value = o.name), s;
+        })(), null), v(s, (() => {
+          var i = wt(() => !!o.bitrate);
+          return () => i() ? ` ${We(o.bitrate)}` : "";
+        })(), null), I(() => s.value = o.name), s;
       })()
-    }), null), T(() => r.value = t.activeRendition() ?? ""), n;
+    }), null), I(() => r.value = t.activeRendition() ?? ""), n;
   })();
 }
-function je() {
+function Ie() {
   const t = N();
-  return h(lt, {
+  return p(ct, {
     get title() {
       return t.isStatsPanelVisible() ? "Hide stats" : "Show stats";
     },
@@ -918,35 +921,35 @@ function je() {
       t.setIsStatsPanelVisible(!t.isStatsPanelVisible());
     },
     get children() {
-      return h(j.Stats, {});
+      return p(W.Stats, {});
     }
   });
 }
-var We = /* @__PURE__ */ V('<div class="watch-ui__volume-slider flex--center"><input type=range min=0 max=100><span class=watch-ui__volume-label>');
-const Te = (t, e) => e || t === 0 ? h(j.Mute, {}) : t > 0 && t <= 33 ? h(j.VolumeLow, {}) : t > 33 && t <= 66 ? h(j.VolumeMedium, {}) : h(j.VolumeHigh, {});
-function Le() {
-  const [t, e] = M(0), n = N(), a = (r) => {
+var Le = /* @__PURE__ */ R('<div class="watch-ui__volume-slider flex--center"><input type=range min=0 max=100><span class=watch-ui__volume-label>');
+const Ve = (t, e) => e || t === 0 ? p(W.Mute, {}) : t > 0 && t <= 33 ? p(W.VolumeLow, {}) : t > 33 && t <= 66 ? p(W.VolumeMedium, {}) : p(W.VolumeHigh, {});
+function ze() {
+  const [t, e] = E(0), n = N(), a = (r) => {
     const o = r.currentTarget, s = parseFloat(o.value);
     n.setVolume(s);
   };
-  return qt(() => {
+  return jt(() => {
     const r = n.currentVolume() || 0;
     e(Math.round(r));
   }), (() => {
-    var r = We(), o = r.firstChild, s = o.nextSibling;
-    return y(r, h(lt, {
+    var r = Le(), o = r.firstChild, s = o.nextSibling;
+    return v(r, p(ct, {
       get title() {
         return n.isMuted() ? "Unmute" : "Mute";
       },
       onClick: () => n.toggleMuted(),
       get children() {
-        return Te(n.currentVolume(), n.isMuted());
+        return Ve(n.currentVolume(), n.isMuted());
       }
-    }), o), o.addEventListener("change", a), y(s, t), T(() => o.value = n.currentVolume()), r;
+    }), o), o.addEventListener("change", a), v(s, t), I(() => o.value = n.currentVolume()), r;
   })();
 }
-var Ve = /* @__PURE__ */ V('<div class="watch-ui__status-indicator flex--center"><span></span><span>');
-const Ie = {
+var Oe = /* @__PURE__ */ R('<div class="watch-ui__status-indicator flex--center"><span></span><span>');
+const Be = {
   "no-url": {
     variant: "error",
     text: "No URL"
@@ -975,78 +978,78 @@ const Ie = {
     variant: "connected",
     text: "Connected"
   }
-}, ze = {
+}, Fe = {
   variant: "error",
   text: "Unknown"
 };
-function Oe() {
+function Ne() {
   const t = N(), e = () => {
     const n = t.watchStatus();
-    return Ie[n] || ze;
+    return Be[n] || Fe;
   };
   return (() => {
-    var n = Ve(), a = n.firstChild, r = a.nextSibling;
-    return y(r, () => e().text), T((o) => {
+    var n = Oe(), a = n.firstChild, r = a.nextSibling;
+    return v(r, () => e().text), I((o) => {
       var s = `watch-ui__status-indicator-dot watch-ui__status-indicator-dot--${e().variant}`, i = `watch-ui__status-indicator-text watch-ui__status-indicator-text--${e().variant}`;
-      return s !== o.e && wt(a, o.e = s), i !== o.t && wt(r, o.t = i), o;
+      return s !== o.e && mt(a, o.e = s), i !== o.t && mt(r, o.t = i), o;
     }, {
       e: void 0,
       t: void 0
     }), n;
   })();
 }
-var Be = /* @__PURE__ */ V('<div class=watch-ui__controls><div class="watch-ui__playback-controls flex--align-center"></div><div class=watch-ui__latency-controls>');
-function Fe() {
+var Ue = /* @__PURE__ */ R('<div class=watch-ui__controls><div class="watch-ui__playback-controls flex--align-center"></div><div class=watch-ui__latency-controls>');
+function Ke() {
   return (() => {
-    var t = Be(), e = t.firstChild, n = e.nextSibling;
-    return y(e, h(Ee, {}), null), y(e, h(Le, {}), null), y(e, h(Oe, {}), null), y(e, h(je, {}), null), y(e, h($e, {}), null), y(n, h(Ae, {}), null), y(n, h(Re, {}), null), t;
+    var t = Ue(), e = t.firstChild, n = e.nextSibling;
+    return v(e, p(qe, {}), null), v(e, p(ze, {}), null), v(e, p(Ne, {}), null), v(e, p(Ie, {}), null), v(e, p(Me, {}), null), v(n, p(Pe, {}), null), v(n, p(Te, {}), null), t;
   })();
 }
-const Ne = ':host{--color-white: #ffffff;--color-white-alpha-05: rgba(255, 255, 255, .05);--color-white-alpha-10: rgba(255, 255, 255, .1);--color-white-alpha-15: rgba(255, 255, 255, .15);--color-white-alpha-20: rgba(255, 255, 255, .2);--color-white-alpha-25: rgba(255, 255, 255, .25);--color-white-alpha-30: rgba(255, 255, 255, .3);--color-white-alpha-70: rgba(255, 255, 255, .7);--color-white-alpha-90: rgba(255, 255, 255, .9);--color-gray-100: #9ca3af;--color-gray-950: #1a1a1a;--color-blue-400: #00dfff;--color-blue-500: #52a1ff;--color-blue-900: #1b3243;--color-purple-400: #a855f7;--color-purple-500: #c27bff;--color-purple-900: #31144a;--color-green-400: #65ee2e;--color-green-900: #3d4928;--color-yellow-400: #facc15;--color-orange-300: rgb(253, 186, 116);--color-orange-400: #ff9900;--color-orange-450: #fb923c;--color-orange-500: #f97316;--color-orange-900: #4d301b;--color-amber-600: #d97706;--color-amber-600-alpha-20: rgba(217, 119, 6, .2);--color-amber-600-alpha-30: rgba(217, 119, 6, .3);--color-orange-400-alpha-20: rgba(255, 153, 0, .2);--color-orange-500-alpha-30: rgba(249, 115, 22, .3);--color-orange-500-alpha-40: rgba(249, 115, 22, .4);--color-orange-500-alpha-50: rgba(249, 115, 22, .5);--color-orange-500-alpha-60: rgba(249, 115, 22, .6);--color-orange-500-alpha-80: rgba(249, 115, 22, .8);--color-red-300: rgb(252, 165, 165);--color-red-400-alpha-25: rgba(248, 113, 113, .25);--color-red-500-alpha-25: rgba(239, 68, 68, .25);--color-red-500-alpha-45: rgba(239, 68, 68, .45);--color-red-500-alpha-60: rgba(239, 68, 68, .6);--color-red-600-alpha-25: rgba(220, 38, 38, .25);--color-red-900-alpha-35: rgba(127, 29, 29, .35);--color-red: #e60000;--color-black-alpha-8: rgba(0, 0, 0, .08);--color-black-alpha-10: rgba(0, 0, 0, .1);--color-black-alpha-60: rgba(0, 0, 0, .6);--color-black-alpha-70: rgba(0, 0, 0, .7);--color-black-alpha-85: rgba(0, 0, 0, .85);--color-black: #000000;--spacing-1: .0625rem;--spacing-2: .125rem;--spacing-4: .25rem;--spacing-8: .5rem;--spacing-12: .75rem;--spacing-16: 1rem;--spacing-24: 1.5rem;--spacing-32: 2rem;--spacing-48: 3rem;--border-radius-sm: .5rem;--border-radius-md: .75rem;--border-radius-lg: 1rem}:is(.flex--center){display:flex;justify-content:center;align-items:center}:is(.flex--align-center){align-items:center}:is(.flex--space-between){justify-content:space-between}.button{color:var(--color-white);cursor:pointer;background-color:var(--color-white-alpha-10);border:var(--spacing-1) solid var(--color-white-alpha-20);border-radius:50%;width:2.25rem;height:2.25rem;transform-origin:center;transition:transform .1s cubic-bezier(.4,0,.2,1)}.button:hover:not(:disabled){transform:scale(1.02);color:var(--color-white);background-color:var(--color-white-alpha-20);box-shadow:0 var(--spacing-2) var(--spacing-8) var(--color-black-alpha-10)}.button:active:not(:disabled){transform:scale(.98);box-shadow:0 var(--spacing-1) var(--spacing-4) var(--color-black-alpha-8)}.button:disabled{opacity:.5;cursor:default;color:var(--color-gray-100)}.stats{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;pointer-events:none;z-index:2;width:100%;height:inherit;container-type:inline-size}.stats .stats__panel{position:absolute;display:flex;align-items:flex-start;justify-content:center;flex-direction:row;flex-wrap:wrap;gap:var(--spacing-12);max-width:240px;width:100%;background-color:var(--color-black-alpha-85);border:1px solid var(--color-white-alpha-25);border-radius:8px;padding:var(--spacing-12);pointer-events:auto;top:8px}@container (width > 480px) and (width <= 768px){.stats .stats__panel{max-width:360px;padding:var(--spacing-24)}}@container (width > 768px){.stats .stats__panel{max-width:600px;padding:var(--spacing-24)}}.stats .stats__panel .stats__item{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:row;height:auto;column-gap:var(--spacing-8);flex-basis:calc(50% - var(--spacing-12));flex-grow:1;flex-shrink:1}@container (width > 480px){.stats .stats__panel .stats__item{flex-basis:calc(25% - var(--spacing-12))}}.stats .stats__panel .stats__item .stats__icon-wrapper{display:none;padding:var(--spacing-8);border-radius:8px;width:fit-content;height:fit-content;flex-shrink:0}@container (width > 480px){.stats .stats__panel .stats__item .stats__icon-wrapper{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-direction:row}}.stats .stats__panel .stats__item .stats__icon-wrapper svg{width:100%;height:100%}.stats .stats__panel .stats__item.stats__item--network .stats__icon-wrapper{background-color:var(--color-blue-900)}.stats .stats__panel .stats__item.stats__item--network,.stats .stats__panel .stats__item.stats__item--network .stats__item-data{color:var(--color-blue-400)}.stats .stats__panel .stats__item.stats__item--video .stats__icon-wrapper{background-color:var(--color-purple-900)}.stats .stats__panel .stats__item.stats__item--video,.stats .stats__panel .stats__item.stats__item--video .stats__item-data{color:var(--color-purple-400)}.stats .stats__panel .stats__item.stats__item--audio .stats__icon-wrapper{background-color:var(--color-green-900)}.stats .stats__panel .stats__item.stats__item--audio,.stats .stats__panel .stats__item.stats__item--audio .stats__item-data{color:var(--color-green-400)}.stats .stats__panel .stats__item.stats__item--buffer .stats__icon-wrapper{background-color:var(--color-orange-900)}.stats .stats__panel .stats__item.stats__item--buffer,.stats .stats__panel .stats__item.stats__item--buffer .stats__item-data{color:var(--color-orange-400)}.stats .stats__panel .stats__item .stats__item-detail{display:flex;align-items:flex-start;justify-content:space-evenly;flex-direction:column;gap:var(--spacing-4)}.stats .stats__panel .stats__item .stats__item-detail .stats__item-title{font-size:12px;font-weight:500;text-transform:capitalize;color:var(--color-gray-100);font-family:Segoe UI,Roboto,sans-serif;letter-spacing:1px;line-height:12px}.stats .stats__panel .stats__item .stats__item-detail .stats__item-data{font-size:16px;font-weight:700;font-family:Segoe UI,Roboto,sans-serif;white-space:pre-wrap;line-height:1.5}.watch-ui__video-container{display:block;position:relative;width:100%;height:auto;border-radius:var(--spacing-4);margin:0 auto;pointer-events:none}.watch-ui__controls{display:flex;flex-direction:column;gap:var(--spacing-24)}.button.button--playback{width:3rem;height:3rem;background:linear-gradient(to bottom right,var(--color-orange-400),var(--color-orange-500),var(--color-amber-600));box-shadow:0 0 var(--spacing-16) var(--color-orange-500-alpha-60);transition:box-shadow .15s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.button.button--playback:hover:not(:disabled){box-shadow:0 0 var(--spacing-24) var(--color-orange-500-alpha-80);transform:scale(1.02)}.button.button--playback:active:not(:disabled){transform:scale(.98)}.button.button--playback:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,var(--color-white-alpha-30),transparent);opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1);pointer-events:none}.button.button--playback:hover:before{opacity:1}.button.button--playback:after{content:"";position:absolute;inset:0;background-color:var(--color-white-alpha-20);border-radius:50%;filter:blur(var(--spacing-24));pointer-events:none}.watch-ui__playback-controls{display:flex;place-content:center space-around;gap:var(--spacing-8);padding:var(--spacing-8) 0}.watch-ui__latency-controls{display:flex;flex-direction:column;gap:var(--spacing-16)}.watch-ui__volume-slider{gap:var(--spacing-4)}.watch-ui__volume-label{width:var(--spacing-16);text-align:right}.watch-ui__quality-selector{display:flex;align-items:center;gap:var(--spacing-8);background:transparent;border-radius:var(--spacing-8)}.watch-ui__quality-label{font-size:1.25rem;font-weight:500;color:var(--color-white);white-space:nowrap}.watch-ui__quality-select{flex:0 1 auto;font-size:1rem;padding:var(--spacing-8);border-radius:var(--spacing-4);background:var(--color-white-alpha-10);color:var(--color-white);border:var(--spacing-1) solid var(--color-white-alpha-20);cursor:pointer;transition:background .2s ease}.watch-ui__quality-select:hover{background:var(--color-white-alpha-15)}.watch-ui__quality-select:focus{outline:var(--spacing-2) solid var(--color-white-alpha-30);outline-offset:var(--spacing-2)}.watch-ui__quality-select option{background:var(--color-gray-950);color:var(--color-white)}.watch-ui__buffer{width:100%}.watch-ui__buffer-visualization{position:relative;width:100%;height:3.75rem;background:var(--color-white-alpha-10);border-radius:var(--spacing-4);cursor:pointer;user-select:none;padding-left:var(--spacing-48);box-sizing:border-box}.watch-ui__buffer-playhead{position:absolute;left:var(--spacing-48);top:0;bottom:0;width:var(--spacing-2);background:var(--color-white);z-index:3}.watch-ui__buffer-track{display:flex;align-items:center;position:absolute;left:var(--spacing-48);right:0;height:var(--spacing-24)}.watch-ui__buffer-track--video{top:var(--spacing-4)}.watch-ui__buffer-track--audio{top:var(--spacing-32)}.watch-ui__buffer-track-label{position:absolute;left:-2.875rem;width:2.5rem;font-size:.625rem;color:var(--color-white-alpha-70);text-align:right;padding-right:var(--spacing-4);pointer-events:none;box-sizing:border-box}.watch-ui__buffer-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.watch-ui__buffer-target-area{position:absolute;top:0;bottom:0;left:var(--spacing-48);right:0;pointer-events:none}.watch-ui__buffer-target-line{position:absolute;top:0;bottom:0;width:.1875rem;background:var(--color-orange-400, var(--color-orange-450));z-index:2;cursor:ew-resize;border-radius:var(--spacing-1);pointer-events:auto}.watch-ui__buffer-target-label{position:absolute;bottom:100%;left:50%;transform:translate(-50%);font-size:.6875rem;font-weight:500;color:var(--color-orange-400, var(--color-orange-450));white-space:nowrap;margin-bottom:var(--spacing-2);opacity:0;transition:opacity .15s ease;pointer-events:none}.watch-ui__buffer-visualization:hover .watch-ui__buffer-target-label,.watch-ui__buffer-visualization--dragging .watch-ui__buffer-target-label{opacity:1}.watch-ui__buffering{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;background-color:var(--color-black-alpha-40);backdrop-filter:blur(var(--spacing-2));pointer-events:auto}.watch-ui__buffering-spinner{width:2.5rem;height:2.5rem;border:var(--spacing-4) solid var(--color-white-alpha-20);border-top:var(--spacing-4) solid var(--color-white);border-radius:50%;animation:buffer-spin 1s linear infinite}@keyframes buffer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.watch-ui__status-indicator{gap:var(--spacing-12);backdrop-filter:blur(var(--spacing-16))}.watch-ui__status-indicator-dot{position:relative;width:.75rem;height:.75rem;border-radius:50%;flex-shrink:0;z-index:1}.watch-ui__status-indicator-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:currentcolor;transform:scale(1);opacity:.5;animation:status-pulse 1.5s ease-out infinite;z-index:-1}.watch-ui__status-indicator-dot:after{display:none}.watch-ui__status-indicator-dot--live:after,.watch-ui__status-indicator-dot--connected:after,.watch-ui__status-indicator-dot--loading:after,.watch-ui__status-indicator-dot--connecting:after{display:block}.watch-ui__status-indicator-dot--error{background:var(--color-gray-100);color:var(--color-gray-100)}.watch-ui__status-indicator-text--error{color:var(--color-gray-100)}.watch-ui__status-indicator-dot--connecting{background:var(--color-yellow-400);color:var(--color-yellow-400)}.watch-ui__status-indicator-text--connecting{color:var(--color-yellow-400)}.watch-ui__status-indicator-dot--loading{background:var(--color-yellow-400);color:var(--color-yellow-400)}.watch-ui__status-indicator-text--loading{color:var(--color-yellow-400)}.watch-ui__status-indicator-dot--live{background:var(--color-green-400);color:var(--color-green-400)}.watch-ui__status-indicator-text--live{color:var(--color-green-400)}.watch-ui__status-indicator-dot--connected{background:var(--color-blue-500);color:var(--color-blue-500)}.watch-ui__status-indicator-text--connected{color:var(--color-blue-500)}.watch-ui__status-indicator-text{font-size:1rem;letter-spacing:.1rem}@keyframes status-pulse{0%{transform:scale(1);opacity:.5}70%{opacity:.25}to{transform:scale(2.5);opacity:0}}';
-var Ue = /* @__PURE__ */ V("<style>"), Ke = /* @__PURE__ */ V("<div class=watch-ui__video-container><slot>");
-function De(t) {
-  return h(xe, {
+const De = ':host{--color-white: #ffffff;--color-white-alpha-05: rgba(255, 255, 255, .05);--color-white-alpha-10: rgba(255, 255, 255, .1);--color-white-alpha-15: rgba(255, 255, 255, .15);--color-white-alpha-20: rgba(255, 255, 255, .2);--color-white-alpha-25: rgba(255, 255, 255, .25);--color-white-alpha-30: rgba(255, 255, 255, .3);--color-white-alpha-70: rgba(255, 255, 255, .7);--color-white-alpha-90: rgba(255, 255, 255, .9);--color-gray-100: #9ca3af;--color-gray-950: #1a1a1a;--color-blue-400: #00dfff;--color-blue-500: #52a1ff;--color-blue-900: #1b3243;--color-purple-400: #a855f7;--color-purple-500: #c27bff;--color-purple-900: #31144a;--color-green-400: #65ee2e;--color-green-900: #3d4928;--color-yellow-400: #facc15;--color-orange-300: rgb(253, 186, 116);--color-orange-400: #ff9900;--color-orange-450: #fb923c;--color-orange-500: #f97316;--color-orange-900: #4d301b;--color-amber-600: #d97706;--color-amber-600-alpha-20: rgba(217, 119, 6, .2);--color-amber-600-alpha-30: rgba(217, 119, 6, .3);--color-orange-400-alpha-20: rgba(255, 153, 0, .2);--color-orange-500-alpha-30: rgba(249, 115, 22, .3);--color-orange-500-alpha-40: rgba(249, 115, 22, .4);--color-orange-500-alpha-50: rgba(249, 115, 22, .5);--color-orange-500-alpha-60: rgba(249, 115, 22, .6);--color-orange-500-alpha-80: rgba(249, 115, 22, .8);--color-red-300: rgb(252, 165, 165);--color-red-400-alpha-25: rgba(248, 113, 113, .25);--color-red-500-alpha-25: rgba(239, 68, 68, .25);--color-red-500-alpha-45: rgba(239, 68, 68, .45);--color-red-500-alpha-60: rgba(239, 68, 68, .6);--color-red-600-alpha-25: rgba(220, 38, 38, .25);--color-red-900-alpha-35: rgba(127, 29, 29, .35);--color-red: #e60000;--color-black-alpha-8: rgba(0, 0, 0, .08);--color-black-alpha-10: rgba(0, 0, 0, .1);--color-black-alpha-60: rgba(0, 0, 0, .6);--color-black-alpha-70: rgba(0, 0, 0, .7);--color-black-alpha-85: rgba(0, 0, 0, .85);--color-black: #000000;--spacing-1: .0625rem;--spacing-2: .125rem;--spacing-4: .25rem;--spacing-8: .5rem;--spacing-12: .75rem;--spacing-16: 1rem;--spacing-24: 1.5rem;--spacing-32: 2rem;--spacing-48: 3rem;--border-radius-sm: .5rem;--border-radius-md: .75rem;--border-radius-lg: 1rem}:is(.flex--center){display:flex;justify-content:center;align-items:center}:is(.flex--align-center){align-items:center}:is(.flex--space-between){justify-content:space-between}.button{color:var(--color-white);cursor:pointer;background-color:var(--color-white-alpha-10);border:var(--spacing-1) solid var(--color-white-alpha-20);border-radius:50%;width:2.25rem;height:2.25rem;transform-origin:center;transition:transform .1s cubic-bezier(.4,0,.2,1)}.button:hover:not(:disabled){transform:scale(1.02);color:var(--color-white);background-color:var(--color-white-alpha-20);box-shadow:0 var(--spacing-2) var(--spacing-8) var(--color-black-alpha-10)}.button:active:not(:disabled){transform:scale(.98);box-shadow:0 var(--spacing-1) var(--spacing-4) var(--color-black-alpha-8)}.button:disabled{opacity:.5;cursor:default;color:var(--color-gray-100)}.stats{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;pointer-events:none;z-index:2;width:100%;height:inherit;container-type:inline-size}.stats .stats__panel{position:absolute;display:flex;align-items:flex-start;justify-content:center;flex-direction:row;flex-wrap:wrap;gap:var(--spacing-12);max-width:240px;width:100%;background-color:var(--color-black-alpha-85);border:1px solid var(--color-white-alpha-25);border-radius:8px;padding:var(--spacing-12);pointer-events:auto;top:8px}@container (width > 480px) and (width <= 768px){.stats .stats__panel{max-width:360px;padding:var(--spacing-24)}}@container (width > 768px){.stats .stats__panel{max-width:600px;padding:var(--spacing-24)}}.stats .stats__panel .stats__item{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:row;height:auto;column-gap:var(--spacing-8);flex-basis:calc(50% - var(--spacing-12));flex-grow:1;flex-shrink:1}@container (width > 480px){.stats .stats__panel .stats__item{flex-basis:calc(25% - var(--spacing-12))}}.stats .stats__panel .stats__item .stats__icon-wrapper{display:none;padding:var(--spacing-8);border-radius:8px;width:fit-content;height:fit-content;flex-shrink:0}@container (width > 480px){.stats .stats__panel .stats__item .stats__icon-wrapper{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-direction:row}}.stats .stats__panel .stats__item .stats__icon-wrapper svg{width:100%;height:100%}.stats .stats__panel .stats__item.stats__item--network .stats__icon-wrapper{background-color:var(--color-blue-900)}.stats .stats__panel .stats__item.stats__item--network,.stats .stats__panel .stats__item.stats__item--network .stats__item-data{color:var(--color-blue-400)}.stats .stats__panel .stats__item.stats__item--video .stats__icon-wrapper{background-color:var(--color-purple-900)}.stats .stats__panel .stats__item.stats__item--video,.stats .stats__panel .stats__item.stats__item--video .stats__item-data{color:var(--color-purple-400)}.stats .stats__panel .stats__item.stats__item--audio .stats__icon-wrapper{background-color:var(--color-green-900)}.stats .stats__panel .stats__item.stats__item--audio,.stats .stats__panel .stats__item.stats__item--audio .stats__item-data{color:var(--color-green-400)}.stats .stats__panel .stats__item.stats__item--buffer .stats__icon-wrapper{background-color:var(--color-orange-900)}.stats .stats__panel .stats__item.stats__item--buffer,.stats .stats__panel .stats__item.stats__item--buffer .stats__item-data{color:var(--color-orange-400)}.stats .stats__panel .stats__item .stats__item-detail{display:flex;align-items:flex-start;justify-content:space-evenly;flex-direction:column;gap:var(--spacing-4)}.stats .stats__panel .stats__item .stats__item-detail .stats__item-title{font-size:12px;font-weight:500;text-transform:capitalize;color:var(--color-gray-100);font-family:Segoe UI,Roboto,sans-serif;letter-spacing:1px;line-height:12px}.stats .stats__panel .stats__item .stats__item-detail .stats__item-data{font-size:16px;font-weight:700;font-family:Segoe UI,Roboto,sans-serif;white-space:pre-wrap;line-height:1.5}.watch-ui__video-container{display:block;position:relative;width:100%;height:auto;border-radius:var(--spacing-4);margin:0 auto;pointer-events:none}.watch-ui__controls{display:flex;flex-direction:column;gap:var(--spacing-24)}.button.button--playback{width:3rem;height:3rem;background:linear-gradient(to bottom right,var(--color-orange-400),var(--color-orange-500),var(--color-amber-600));box-shadow:0 0 var(--spacing-16) var(--color-orange-500-alpha-60);transition:box-shadow .15s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.button.button--playback:hover:not(:disabled){box-shadow:0 0 var(--spacing-24) var(--color-orange-500-alpha-80);transform:scale(1.02)}.button.button--playback:active:not(:disabled){transform:scale(.98)}.button.button--playback:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,var(--color-white-alpha-30),transparent);opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1);pointer-events:none}.button.button--playback:hover:before{opacity:1}.button.button--playback:after{content:"";position:absolute;inset:0;background-color:var(--color-white-alpha-20);border-radius:50%;filter:blur(var(--spacing-24));pointer-events:none}.watch-ui__playback-controls{display:flex;place-content:center space-around;gap:var(--spacing-8);padding:var(--spacing-8) 0}.watch-ui__latency-controls{display:flex;flex-direction:column;gap:var(--spacing-16)}.watch-ui__volume-slider{gap:var(--spacing-4)}.watch-ui__volume-label{width:var(--spacing-16);text-align:right}.watch-ui__quality-selector{display:flex;align-items:center;gap:var(--spacing-8);background:transparent;border-radius:var(--spacing-8)}.watch-ui__quality-label{font-size:1.25rem;font-weight:500;color:var(--color-white);white-space:nowrap}.watch-ui__quality-select{flex:0 1 auto;font-size:1rem;padding:var(--spacing-8);border-radius:var(--spacing-4);background:var(--color-white-alpha-10);color:var(--color-white);border:var(--spacing-1) solid var(--color-white-alpha-20);cursor:pointer;transition:background .2s ease}.watch-ui__quality-select:hover{background:var(--color-white-alpha-15)}.watch-ui__quality-select:focus{outline:var(--spacing-2) solid var(--color-white-alpha-30);outline-offset:var(--spacing-2)}.watch-ui__quality-select option{background:var(--color-gray-950);color:var(--color-white)}.watch-ui__buffer{width:100%}.watch-ui__buffer-visualization{position:relative;width:100%;height:3.75rem;background:var(--color-white-alpha-10);border-radius:var(--spacing-4);cursor:pointer;user-select:none;padding-left:var(--spacing-48);box-sizing:border-box}.watch-ui__buffer-playhead{position:absolute;left:var(--spacing-48);top:0;bottom:0;width:var(--spacing-2);background:var(--color-white);z-index:3}.watch-ui__buffer-track{display:flex;align-items:center;position:absolute;left:var(--spacing-48);right:0;height:var(--spacing-24)}.watch-ui__buffer-track--video{top:var(--spacing-4)}.watch-ui__buffer-track--audio{top:var(--spacing-32)}.watch-ui__buffer-track-label{position:absolute;left:-2.875rem;width:2.5rem;font-size:.625rem;color:var(--color-white-alpha-70);text-align:right;padding-right:var(--spacing-4);pointer-events:none;box-sizing:border-box}.watch-ui__buffer-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.watch-ui__buffer-target-area{position:absolute;top:0;bottom:0;left:var(--spacing-48);right:0;pointer-events:none}.watch-ui__buffer-target-line{position:absolute;top:0;bottom:0;width:.1875rem;background:var(--color-orange-400, var(--color-orange-450));z-index:2;cursor:ew-resize;border-radius:var(--spacing-1);pointer-events:auto}.watch-ui__buffer-target-label{position:absolute;bottom:100%;left:50%;transform:translate(-50%);font-size:.6875rem;font-weight:500;color:var(--color-orange-400, var(--color-orange-450));white-space:nowrap;margin-bottom:var(--spacing-2);opacity:0;transition:opacity .15s ease;pointer-events:none}.watch-ui__buffer-visualization:hover .watch-ui__buffer-target-label,.watch-ui__buffer-visualization--dragging .watch-ui__buffer-target-label{opacity:1}.watch-ui__buffer-help{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.75rem;color:var(--color-white-alpha-30, rgba(255, 255, 255, .3));pointer-events:none;white-space:nowrap}.watch-ui__buffering{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;background-color:var(--color-black-alpha-40);backdrop-filter:blur(var(--spacing-2));pointer-events:auto}.watch-ui__buffering-spinner{width:2.5rem;height:2.5rem;border:var(--spacing-4) solid var(--color-white-alpha-20);border-top:var(--spacing-4) solid var(--color-white);border-radius:50%;animation:buffer-spin 1s linear infinite}@keyframes buffer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.watch-ui__status-indicator{gap:var(--spacing-12);backdrop-filter:blur(var(--spacing-16))}.watch-ui__status-indicator-dot{position:relative;width:.75rem;height:.75rem;border-radius:50%;flex-shrink:0;z-index:1}.watch-ui__status-indicator-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:currentcolor;transform:scale(1);opacity:.5;animation:status-pulse 1.5s ease-out infinite;z-index:-1}.watch-ui__status-indicator-dot:after{display:none}.watch-ui__status-indicator-dot--live:after,.watch-ui__status-indicator-dot--connected:after,.watch-ui__status-indicator-dot--loading:after,.watch-ui__status-indicator-dot--connecting:after{display:block}.watch-ui__status-indicator-dot--error{background:var(--color-gray-100);color:var(--color-gray-100)}.watch-ui__status-indicator-text--error{color:var(--color-gray-100)}.watch-ui__status-indicator-dot--connecting{background:var(--color-yellow-400);color:var(--color-yellow-400)}.watch-ui__status-indicator-text--connecting{color:var(--color-yellow-400)}.watch-ui__status-indicator-dot--loading{background:var(--color-yellow-400);color:var(--color-yellow-400)}.watch-ui__status-indicator-text--loading{color:var(--color-yellow-400)}.watch-ui__status-indicator-dot--live{background:var(--color-green-400);color:var(--color-green-400)}.watch-ui__status-indicator-text--live{color:var(--color-green-400)}.watch-ui__status-indicator-dot--connected{background:var(--color-blue-500);color:var(--color-blue-500)}.watch-ui__status-indicator-text--connected{color:var(--color-blue-500)}.watch-ui__status-indicator-text{font-size:1rem;letter-spacing:.1rem}@keyframes status-pulse{0%{transform:scale(1);opacity:.5}70%{opacity:.25}to{transform:scale(2.5);opacity:0}}';
+var He = /* @__PURE__ */ R("<style>"), Ge = /* @__PURE__ */ R("<div class=watch-ui__video-container><slot>");
+function Je(t) {
+  return p(Ce, {
     get moqWatch() {
       return t.watch;
     },
     get children() {
       return [(() => {
-        var e = Ue();
-        return y(e, Ne), e;
+        var e = He();
+        return v(e, De), e;
       })(), (() => {
-        var e = Ke(), n = e.firstChild;
-        return n._$owner = Ht(), y(e, () => {
-          const a = jt(st);
-          return a ? h(Q, {
+        var e = Ge(), n = e.firstChild;
+        return n._$owner = Jt(), v(e, () => {
+          const a = Tt(lt);
+          return a ? p(Y, {
             get when() {
               return a.isStatsPanelVisible();
             },
             get children() {
-              return h(Bt, {
-                context: st,
+              return p(Nt, {
+                context: lt,
                 getElement: (r) => r?.moqWatch.backend
               });
             }
           }) : null;
-        }, null), y(e, h(Ce, {}), null), e;
-      })(), h(Fe, {})];
+        }, null), v(e, p(Ae, {}), null), e;
+      })(), p(Ke, {})];
     }
   });
 }
-ye("moq-watch-ui", (t, {
+ke("moq-watch-ui", (t, {
   element: e
 }) => {
-  const [n, a] = M();
-  return Rt(async () => {
+  const [n, a] = E();
+  return Wt(async () => {
     await customElements.whenDefined("moq-watch");
     const r = e.querySelector("moq-watch");
     a(r || void 0);
-  }), h(Q, {
+  }), p(Y, {
     get when() {
       return n();
     },
     keyed: !0,
-    children: (r) => h(De, {
+    children: (r) => p(Je, {
       watch: r
     })
   });