@moq/watch 0.1.0

package/ui/index.js

@@ -0,0 +1,1121 @@
+import { Button as fe, Icon as I, Stats as Ke } from "@moq/ui-core";
+import { Signals as De, Moq as He } from "@moq/hang";
+const Ge = !1, Je = (e, t) => e === t, Qe = /* @__PURE__ */ Symbol("solid-track"), se = {
+  equals: Je
+};
+let Me = Te;
+const D = 1, ie = 2, je = {
+  owned: null,
+  cleanups: null,
+  context: null,
+  owner: null
+};
+var g = null;
+let he = null, Xe = null, v = null, $ = null, F = null, de = 0;
+function re(e, t) {
+  const n = v, o = g, r = e.length === 0, s = t === void 0 ? o : t, a = r ? je : {
+    owned: null,
+    cleanups: null,
+    context: s ? s.context : null,
+    owner: s
+  }, i = r ? e : () => e(() => O(() => Y(a)));
+  g = a, v = null;
+  try {
+    return te(i, !0);
+  } finally {
+    v = n, g = o;
+  }
+}
+function A(e, t) {
+  t = t ? Object.assign({}, se, t) : se;
+  const n = {
+    value: e,
+    observers: null,
+    observerSlots: null,
+    comparator: t.equals || void 0
+  }, o = (r) => (typeof r == "function" && (r = r(n.value)), Oe(n, r));
+  return [Re.bind(n), o];
+}
+function B(e, t, n) {
+  const o = we(e, t, !1, D);
+  ee(o);
+}
+function qe(e, t, n) {
+  Me = rt;
+  const o = we(e, t, !1, D);
+  o.user = !0, F ? F.push(o) : ee(o);
+}
+function L(e, t, n) {
+  n = n ? Object.assign({}, se, n) : se;
+  const o = we(e, t, !0, 0);
+  return o.observers = null, o.observerSlots = null, o.comparator = n.equals || void 0, ee(o), Re.bind(o);
+}
+function O(e) {
+  if (v === null) return e();
+  const t = v;
+  v = null;
+  try {
+    return e();
+  } finally {
+    v = t;
+  }
+}
+function Ze(e) {
+  qe(() => O(e));
+}
+function pe(e) {
+  return g === null || (g.cleanups === null ? g.cleanups = [e] : g.cleanups.push(e)), e;
+}
+function Ye() {
+  return g;
+}
+function et(e, t) {
+  const n = /* @__PURE__ */ Symbol("context");
+  return {
+    id: n,
+    Provider: st(n),
+    defaultValue: e
+  };
+}
+function Ve(e) {
+  let t;
+  return g && g.context && (t = g.context[e.id]) !== void 0 ? t : e.defaultValue;
+}
+function Le(e) {
+  const t = L(e), n = L(() => be(t()));
+  return n.toArray = () => {
+    const o = n();
+    return Array.isArray(o) ? o : o != null ? [o] : [];
+  }, n;
+}
+function Re() {
+  if (this.sources && this.state)
+    if (this.state === D) ee(this);
+    else {
+      const e = $;
+      $ = null, te(() => le(this), !1), $ = e;
+    }
+  if (v) {
+    const e = this.observers ? this.observers.length : 0;
+    v.sources ? (v.sources.push(this), v.sourceSlots.push(e)) : (v.sources = [this], v.sourceSlots = [e]), this.observers ? (this.observers.push(v), this.observerSlots.push(v.sources.length - 1)) : (this.observers = [v], this.observerSlots = [v.sources.length - 1]);
+  }
+  return this.value;
+}
+function Oe(e, t, n) {
+  let o = e.value;
+  return (!e.comparator || !e.comparator(o, t)) && (e.value = t, e.observers && e.observers.length && te(() => {
+    for (let r = 0; r < e.observers.length; r += 1) {
+      const s = e.observers[r], a = he && he.running;
+      a && he.disposed.has(s), (a ? !s.tState : !s.state) && (s.pure ? $.push(s) : F.push(s), s.observers && We(s)), a || (s.state = D);
+    }
+    if ($.length > 1e6)
+      throw $ = [], new Error();
+  }, !1)), t;
+}
+function ee(e) {
+  if (!e.fn) return;
+  Y(e);
+  const t = de;
+  tt(e, e.value, t);
+}
+function tt(e, t, n) {
+  let o;
+  const r = g, s = v;
+  v = g = e;
+  try {
+    o = e.fn(t);
+  } catch (a) {
+    return e.pure && (e.state = D, e.owned && e.owned.forEach(Y), e.owned = null), e.updatedAt = n + 1, ze(a);
+  } finally {
+    v = s, g = r;
+  }
+  (!e.updatedAt || e.updatedAt <= n) && (e.updatedAt != null && "observers" in e ? Oe(e, o) : e.value = o, e.updatedAt = n);
+}
+function we(e, t, n, o = D, r) {
+  const s = {
+    fn: e,
+    state: o,
+    updatedAt: null,
+    owned: null,
+    sources: null,
+    sourceSlots: null,
+    cleanups: null,
+    value: t,
+    owner: g,
+    context: g ? g.context : null,
+    pure: n
+  };
+  return g === null || g !== je && (g.owned ? g.owned.push(s) : g.owned = [s]), s;
+}
+function ae(e) {
+  if (e.state === 0) return;
+  if (e.state === ie) return le(e);
+  if (e.suspense && O(e.suspense.inFallback)) return e.suspense.effects.push(e);
+  const t = [e];
+  for (; (e = e.owner) && (!e.updatedAt || e.updatedAt < de); )
+    e.state && t.push(e);
+  for (let n = t.length - 1; n >= 0; n--)
+    if (e = t[n], e.state === D)
+      ee(e);
+    else if (e.state === ie) {
+      const o = $;
+      $ = null, te(() => le(e, t[0]), !1), $ = o;
+    }
+}
+function te(e, t) {
+  if ($) return e();
+  let n = !1;
+  t || ($ = []), F ? n = !0 : F = [], de++;
+  try {
+    const o = e();
+    return nt(n), o;
+  } catch (o) {
+    n || (F = null), $ = null, ze(o);
+  }
+}
+function nt(e) {
+  if ($ && (Te($), $ = null), e) return;
+  const t = F;
+  F = null, t.length && te(() => Me(t), !1);
+}
+function Te(e) {
+  for (let t = 0; t < e.length; t++) ae(e[t]);
+}
+function rt(e) {
+  let t, n = 0;
+  for (t = 0; t < e.length; t++) {
+    const o = e[t];
+    o.user ? e[n++] = o : ae(o);
+  }
+  for (t = 0; t < n; t++) ae(e[t]);
+}
+function le(e, t) {
+  e.state = 0;
+  for (let n = 0; n < e.sources.length; n += 1) {
+    const o = e.sources[n];
+    if (o.sources) {
+      const r = o.state;
+      r === D ? o !== t && (!o.updatedAt || o.updatedAt < de) && ae(o) : r === ie && le(o, t);
+    }
+  }
+}
+function We(e) {
+  for (let t = 0; t < e.observers.length; t += 1) {
+    const n = e.observers[t];
+    n.state || (n.state = ie, n.pure ? $.push(n) : F.push(n), n.observers && We(n));
+  }
+}
+function Y(e) {
+  let t;
+  if (e.sources)
+    for (; e.sources.length; ) {
+      const n = e.sources.pop(), o = e.sourceSlots.pop(), r = n.observers;
+      if (r && r.length) {
+        const s = r.pop(), a = n.observerSlots.pop();
+        o < r.length && (s.sourceSlots[a] = o, r[o] = s, n.observerSlots[o] = a);
+      }
+    }
+  if (e.tOwned) {
+    for (t = e.tOwned.length - 1; t >= 0; t--) Y(e.tOwned[t]);
+    delete e.tOwned;
+  }
+  if (e.owned) {
+    for (t = e.owned.length - 1; t >= 0; t--) Y(e.owned[t]);
+    e.owned = null;
+  }
+  if (e.cleanups) {
+    for (t = e.cleanups.length - 1; t >= 0; t--) e.cleanups[t]();
+    e.cleanups = null;
+  }
+  e.state = 0;
+}
+function ot(e) {
+  return e instanceof Error ? e : new Error(typeof e == "string" ? e : "Unknown error", {
+    cause: e
+  });
+}
+function ze(e, t = g) {
+  throw ot(e);
+}
+function be(e) {
+  if (typeof e == "function" && !e.length) return be(e());
+  if (Array.isArray(e)) {
+    const t = [];
+    for (let n = 0; n < e.length; n++) {
+      const o = be(e[n]);
+      Array.isArray(o) ? t.push.apply(t, o) : t.push(o);
+    }
+    return t;
+  }
+  return e;
+}
+function st(e, t) {
+  return function(o) {
+    let r;
+    return B(() => r = O(() => (g.context = {
+      ...g.context,
+      [e]: o.value
+    }, Le(() => o.children))), void 0), r;
+  };
+}
+const it = /* @__PURE__ */ Symbol("fallback");
+function ye(e) {
+  for (let t = 0; t < e.length; t++) e[t]();
+}
+function at(e, t, n = {}) {
+  let o = [], r = [], s = [], a = 0, i = t.length > 1 ? [] : null;
+  return pe(() => ye(s)), () => {
+    let c = e() || [], f = c.length, d, l;
+    return c[Qe], O(() => {
+      let y, _, p, P, M, m, w, x, q;
+      if (f === 0)
+        a !== 0 && (ye(s), s = [], o = [], r = [], a = 0, i && (i = [])), n.fallback && (o = [it], r[0] = re((U) => (s[0] = U, n.fallback())), a = 1);
+      else if (a === 0) {
+        for (r = new Array(f), l = 0; l < f; l++)
+          o[l] = c[l], r[l] = re(E);
+        a = f;
+      } else {
+        for (p = new Array(f), P = new Array(f), i && (M = new Array(f)), m = 0, w = Math.min(a, f); m < w && o[m] === c[m]; m++) ;
+        for (w = a - 1, x = f - 1; w >= m && x >= m && o[w] === c[x]; w--, x--)
+          p[x] = r[w], P[x] = s[w], i && (M[x] = i[w]);
+        for (y = /* @__PURE__ */ new Map(), _ = new Array(x + 1), l = x; l >= m; l--)
+          q = c[l], d = y.get(q), _[l] = d === void 0 ? -1 : d, y.set(q, l);
+        for (d = m; d <= w; d++)
+          q = o[d], l = y.get(q), l !== void 0 && l !== -1 ? (p[l] = r[d], P[l] = s[d], i && (M[l] = i[d]), l = _[l], y.set(q, l)) : s[d]();
+        for (l = m; l < f; l++)
+          l in p ? (r[l] = p[l], s[l] = P[l], i && (i[l] = M[l], i[l](l))) : r[l] = re(E);
+        r = r.slice(0, a = f), o = c.slice(0);
+      }
+      return r;
+    });
+    function E(y) {
+      if (s[l] = y, i) {
+        const [_, p] = A(l);
+        return i[l] = p, t(c[l], _);
+      }
+      return t(c[l]);
+    }
+  };
+}
+function u(e, t) {
+  return O(() => e(t || {}));
+}
+const Be = (e) => `Stale read from <${e}>.`;
+function _e(e) {
+  const t = "fallback" in e && {
+    fallback: () => e.fallback
+  };
+  return L(at(() => e.each, e.children, t || void 0));
+}
+function N(e) {
+  const t = e.keyed, n = L(() => e.when, void 0, void 0), o = t ? n : L(n, void 0, {
+    equals: (r, s) => !r == !s
+  });
+  return L(() => {
+    const r = o();
+    if (r) {
+      const s = e.children;
+      return typeof s == "function" && s.length > 0 ? O(() => s(t ? r : () => {
+        if (!O(o)) throw Be("Show");
+        return n();
+      })) : s;
+    }
+    return e.fallback;
+  }, void 0, void 0);
+}
+function lt(e) {
+  const t = Le(() => e.children), n = L(() => {
+    const o = t(), r = Array.isArray(o) ? o : [o];
+    let s = () => {
+    };
+    for (let a = 0; a < r.length; a++) {
+      const i = a, c = r[a], f = s, d = L(() => f() ? void 0 : c.when, void 0, void 0), l = c.keyed ? d : L(d, void 0, {
+        equals: (E, y) => !E == !y
+      });
+      s = () => f() || (l() ? [i, d, c] : void 0);
+    }
+    return s;
+  });
+  return L(() => {
+    const o = n()();
+    if (!o) return e.fallback;
+    const [r, s, a] = o, i = a.children;
+    return typeof i == "function" && i.length > 0 ? O(() => i(a.keyed ? s() : () => {
+      if (O(n)()?.[0] !== r) throw Be("Match");
+      return s();
+    })) : i;
+  }, void 0, void 0);
+}
+function G(e) {
+  return e;
+}
+const ct = (e) => L(() => e());
+function ut(e, t, n) {
+  let o = n.length, r = t.length, s = o, a = 0, i = 0, c = t[r - 1].nextSibling, f = null;
+  for (; a < r || i < s; ) {
+    if (t[a] === n[i]) {
+      a++, i++;
+      continue;
+    }
+    for (; t[r - 1] === n[s - 1]; )
+      r--, s--;
+    if (r === a) {
+      const d = s < o ? i ? n[i - 1].nextSibling : n[s - i] : c;
+      for (; i < s; ) e.insertBefore(n[i++], d);
+    } else if (s === i)
+      for (; a < r; )
+        (!f || !f.has(t[a])) && t[a].remove(), a++;
+    else if (t[a] === n[s - 1] && n[i] === t[r - 1]) {
+      const d = t[--r].nextSibling;
+      e.insertBefore(n[i++], t[a++].nextSibling), e.insertBefore(n[--s], d), t[r] = n[s];
+    } else {
+      if (!f) {
+        f = /* @__PURE__ */ new Map();
+        let l = i;
+        for (; l < s; ) f.set(n[l], l++);
+      }
+      const d = f.get(t[a]);
+      if (d != null)
+        if (i < d && d < s) {
+          let l = a, E = 1, y;
+          for (; ++l < r && l < s && !((y = f.get(t[l])) == null || y !== d + E); )
+            E++;
+          if (E > d - i) {
+            const _ = t[a];
+            for (; i < d; ) e.insertBefore(n[i++], _);
+          } else e.replaceChild(n[i++], t[a++]);
+        } else a++;
+      else t[a++].remove();
+    }
+  }
+}
+const xe = "_$DX_DELEGATE";
+function T(e, t, n, o) {
+  let r;
+  const s = () => {
+    const i = document.createElement("template");
+    return i.innerHTML = e, i.content.firstChild;
+  }, a = () => (r || (r = s())).cloneNode(!0);
+  return a.cloneNode = a, a;
+}
+function ft(e, t = window.document) {
+  const n = t[xe] || (t[xe] = /* @__PURE__ */ new Set());
+  for (let o = 0, r = e.length; o < r; o++) {
+    const s = e[o];
+    n.has(s) || (n.add(s), t.addEventListener(s, gt));
+  }
+}
+function oe(e, t, n) {
+  n == null ? e.removeAttribute(t) : e.setAttribute(t, n);
+}
+function dt(e, t) {
+  t == null ? e.removeAttribute("class") : e.className = t;
+}
+function Ce(e, t, n) {
+  if (!t) return n ? oe(e, "style") : t;
+  const o = e.style;
+  if (typeof t == "string") return o.cssText = t;
+  typeof n == "string" && (o.cssText = n = void 0), n || (n = {}), t || (t = {});
+  let r, s;
+  for (s in n)
+    t[s] == null && o.removeProperty(s), delete n[s];
+  for (s in t)
+    r = t[s], r !== n[s] && (o.setProperty(s, r), n[s] = r);
+  return n;
+}
+function pt(e, t, n) {
+  n != null ? e.style.setProperty(t, n) : e.style.removeProperty(t);
+}
+function ht(e, t, n) {
+  return O(() => e(t, n));
+}
+function b(e, t, n, o) {
+  if (n !== void 0 && !o && (o = []), typeof t != "function") return ce(e, t, o, n);
+  B((r) => ce(e, t(), r, n), o);
+}
+function gt(e) {
+  let t = e.target;
+  const n = `$$${e.type}`, o = e.target, r = e.currentTarget, s = (c) => Object.defineProperty(e, "target", {
+    configurable: !0,
+    value: c
+  }), a = () => {
+    const c = t[n];
+    if (c && !t.disabled) {
+      const f = t[`${n}Data`];
+      if (f !== void 0 ? c.call(t, f, e) : c.call(t, e), e.cancelBubble) return;
+    }
+    return t.host && typeof t.host != "string" && !t.host._$host && t.contains(e.target) && s(t.host), !0;
+  }, i = () => {
+    for (; a() && (t = t._$host || t.parentNode || t.host); ) ;
+  };
+  if (Object.defineProperty(e, "currentTarget", {
+    configurable: !0,
+    get() {
+      return t || document;
+    }
+  }), e.composedPath) {
+    const c = e.composedPath();
+    s(c[0]);
+    for (let f = 0; f < c.length - 2 && (t = c[f], !!a()); f++) {
+      if (t._$host) {
+        t = t._$host, i();
+        break;
+      }
+      if (t.parentNode === r)
+        break;
+    }
+  } else i();
+  s(o);
+}
+function ce(e, t, n, o, r) {
+  for (; typeof n == "function"; ) n = n();
+  if (t === n) return n;
+  const s = typeof t, a = o !== void 0;
+  if (e = a && n[0] && n[0].parentNode || e, s === "string" || s === "number") {
+    if (s === "number" && (t = t.toString(), t === n))
+      return n;
+    if (a) {
+      let i = n[0];
+      i && i.nodeType === 3 ? i.data !== t && (i.data = t) : i = document.createTextNode(t), n = J(e, n, o, i);
+    } else
+      n !== "" && typeof n == "string" ? n = e.firstChild.data = t : n = e.textContent = t;
+  } else if (t == null || s === "boolean")
+    n = J(e, n, o);
+  else {
+    if (s === "function")
+      return B(() => {
+        let i = t();
+        for (; typeof i == "function"; ) i = i();
+        n = ce(e, i, n, o);
+      }), () => n;
+    if (Array.isArray(t)) {
+      const i = [], c = n && Array.isArray(n);
+      if (me(i, t, n, r))
+        return B(() => n = ce(e, i, n, o, !0)), () => n;
+      if (i.length === 0) {
+        if (n = J(e, n, o), a) return n;
+      } else c ? n.length === 0 ? Se(e, i, o) : ut(e, n, i) : (n && J(e), Se(e, i));
+      n = i;
+    } else if (t.nodeType) {
+      if (Array.isArray(n)) {
+        if (a) return n = J(e, n, o, t);
+        J(e, n, null, t);
+      } else n == null || n === "" || !e.firstChild ? e.appendChild(t) : e.replaceChild(t, e.firstChild);
+      n = t;
+    }
+  }
+  return n;
+}
+function me(e, t, n, o) {
+  let r = !1;
+  for (let s = 0, a = t.length; s < a; s++) {
+    let i = t[s], c = n && n[e.length], f;
+    if (!(i == null || i === !0 || i === !1)) if ((f = typeof i) == "object" && i.nodeType)
+      e.push(i);
+    else if (Array.isArray(i))
+      r = me(e, i, c) || r;
+    else if (f === "function")
+      if (o) {
+        for (; typeof i == "function"; ) i = i();
+        r = me(e, Array.isArray(i) ? i : [i], Array.isArray(c) ? c : [c]) || r;
+      } else
+        e.push(i), r = !0;
+    else {
+      const d = String(i);
+      c && c.nodeType === 3 && c.data === d ? e.push(c) : e.push(document.createTextNode(d));
+    }
+  }
+  return r;
+}
+function Se(e, t, n = null) {
+  for (let o = 0, r = t.length; o < r; o++) e.insertBefore(t[o], n);
+}
+function J(e, t, n, o) {
+  if (n === void 0) return e.textContent = "";
+  const r = o || document.createTextNode("");
+  if (t.length) {
+    let s = !1;
+    for (let a = t.length - 1; a >= 0; a--) {
+      const i = t[a];
+      if (r !== i) {
+        const c = i.parentNode === e;
+        !s && !a ? c ? e.replaceChild(r, i) : e.insertBefore(r, n) : c && i.remove();
+      } else s = !0;
+    }
+  } else e.insertBefore(r, n);
+  return [r];
+}
+function bt(e) {
+  return Object.keys(e).reduce((n, o) => {
+    const r = e[o];
+    return n[o] = Object.assign({}, r), Ne(r.value) && !yt(r.value) && !Array.isArray(r.value) && (n[o].value = Object.assign({}, r.value)), Array.isArray(r.value) && (n[o].value = r.value.slice(0)), n;
+  }, {});
+}
+function _t(e) {
+  return e ? Object.keys(e).reduce((n, o) => {
+    const r = e[o];
+    return n[o] = Ne(r) && "value" in r ? r : {
+      value: r
+    }, n[o].attribute || (n[o].attribute = vt(o)), n[o].parse = "parse" in n[o] ? n[o].parse : typeof n[o].value != "string", n;
+  }, {}) : {};
+}
+function mt(e) {
+  return Object.keys(e).reduce((n, o) => (n[o] = e[o].value, n), {});
+}
+function wt(e, t) {
+  const n = bt(t);
+  return Object.keys(t).forEach((r) => {
+    const s = n[r], a = e.getAttribute(s.attribute), i = e[r];
+    a != null && (s.value = s.parse ? Ie(a) : a), i != null && (s.value = Array.isArray(i) ? i.slice(0) : i), s.reflect && ke(e, s.attribute, s.value, !!s.parse), Object.defineProperty(e, r, {
+      get() {
+        return s.value;
+      },
+      set(c) {
+        const f = s.value;
+        s.value = c, s.reflect && ke(this, s.attribute, s.value, !!s.parse);
+        for (let d = 0, l = this.__propertyChangedCallbacks.length; d < l; d++)
+          this.__propertyChangedCallbacks[d](r, c, f);
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+  }), n;
+}
+function Ie(e) {
+  if (e)
+    try {
+      return JSON.parse(e);
+    } catch {
+      return e;
+    }
+}
+function ke(e, t, n, o) {
+  if (n == null || n === !1) return e.removeAttribute(t);
+  let r = o ? JSON.stringify(n) : n;
+  e.__updating[t] = !0, r === "true" && (r = ""), e.setAttribute(t, r), Promise.resolve().then(() => delete e.__updating[t]);
+}
+function vt(e) {
+  return e.replace(/\.?([A-Z]+)/g, (t, n) => "-" + n.toLowerCase()).replace("_", "-").replace(/^-/, "");
+}
+function Ne(e) {
+  return e != null && (typeof e == "object" || typeof e == "function");
+}
+function yt(e) {
+  return Object.prototype.toString.call(e) === "[object Function]";
+}
+function xt(e) {
+  return typeof e == "function" && e.toString().indexOf("class") === 0;
+}
+let ge;
+function Ct(e, t) {
+  const n = Object.keys(t);
+  return class extends e {
+    static get observedAttributes() {
+      return n.map((r) => t[r].attribute);
+    }
+    constructor() {
+      super(), this.__initialized = !1, this.__released = !1, this.__releaseCallbacks = [], this.__propertyChangedCallbacks = [], this.__updating = {}, this.props = {};
+      for (let r of n)
+        this[r] = void 0;
+    }
+    connectedCallback() {
+      if (this.__initialized) return;
+      this.__releaseCallbacks = [], this.__propertyChangedCallbacks = [], this.__updating = {}, this.props = wt(this, t);
+      const r = mt(this.props), s = this.Component, a = ge;
+      try {
+        ge = this, this.__initialized = !0, xt(s) ? new s(r, {
+          element: this
+        }) : s(r, {
+          element: this
+        });
+      } finally {
+        ge = a;
+      }
+    }
+    async disconnectedCallback() {
+      if (await Promise.resolve(), this.isConnected) return;
+      this.__propertyChangedCallbacks.length = 0;
+      let r = null;
+      for (; r = this.__releaseCallbacks.pop(); ) r(this);
+      delete this.__initialized, this.__released = !0;
+    }
+    attributeChangedCallback(r, s, a) {
+      if (this.__initialized && !this.__updating[r] && (r = this.lookupProp(r), r in t)) {
+        if (a == null && !this[r]) return;
+        this[r] = t[r].parse ? Ie(a) : a;
+      }
+    }
+    lookupProp(r) {
+      if (t)
+        return n.find((s) => r === s || r === t[s].attribute);
+    }
+    get renderRoot() {
+      return this.shadowRoot || this.attachShadow({
+        mode: "open"
+      });
+    }
+    addReleaseCallback(r) {
+      this.__releaseCallbacks.push(r);
+    }
+    addPropertyChangedCallback(r) {
+      this.__propertyChangedCallbacks.push(r);
+    }
+  };
+}
+function St(e, t = {}, n = {}) {
+  const {
+    BaseElement: o = HTMLElement,
+    extension: r,
+    customElements: s = window.customElements
+  } = n;
+  return (a) => {
+    let i = s.get(e);
+    return i ? (i.prototype.Component = a, i) : (i = Ct(o, _t(t)), i.prototype.Component = a, i.prototype.registeredTag = e, s.define(e, i, r), i);
+  };
+}
+function kt(e) {
+  const t = Object.keys(e), n = {};
+  for (let o = 0; o < t.length; o++) {
+    const [r, s] = A(e[t[o]]);
+    Object.defineProperty(n, t[o], {
+      get: r,
+      set(a) {
+        s(() => a);
+      }
+    });
+  }
+  return n;
+}
+function $t(e) {
+  if (e.assignedSlot && e.assignedSlot._$owner) return e.assignedSlot._$owner;
+  let t = e.parentNode;
+  for (; t && !t._$owner && !(t.assignedSlot && t.assignedSlot._$owner); )
+    t = t.parentNode;
+  return t && t.assignedSlot ? t.assignedSlot._$owner : e._$owner;
+}
+function At(e) {
+  return (t, n) => {
+    const { element: o } = n;
+    return re((r) => {
+      const s = kt(t);
+      o.addPropertyChangedCallback((i, c) => s[i] = c), o.addReleaseCallback(() => {
+        o.renderRoot.textContent = "", r();
+      });
+      const a = e(s, n);
+      return b(o.renderRoot, a);
+    }, $t(o));
+  };
+}
+function Et(e, t, n) {
+  return arguments.length === 2 && (n = t, t = {}), St(e, t)(At(n));
+}
+function ne(e) {
+  const [t, n] = A(e.peek(), { equals: !1 }), o = e.subscribe((r) => n(() => r));
+  return pe(() => o()), t;
+}
+const ue = et();
+function Pt(e) {
+  const [t, n] = A("no-url"), [o, r] = A(!1), [s, a] = A(!1), [i, c] = A(0), [f, d] = A(!1), l = ne(e.moqWatch.jitter), [E, y] = A([]), [_, p] = A(void 0), [P, M] = A(!1), [m, w] = A(!!document.fullscreenElement), x = () => {
+    e.moqWatch.paused.set(!e.moqWatch.paused.get());
+  }, q = () => {
+    document.fullscreenElement ? document.exitFullscreen() : e.moqWatch.requestFullscreen();
+  }, U = (h) => {
+    e.moqWatch.audio.volume.set(h / 100);
+  }, C = () => {
+    e.moqWatch.audio.muted.update((h) => !h);
+  }, R = (h) => {
+    e.moqWatch.jitter.set(h);
+  }, K = (h) => {
+    e.moqWatch.video.source.target.update((k) => ({
+      ...k,
+      name: h
+    }));
+  }, S = ne(e.moqWatch.video.timestamp), V = ne(e.moqWatch.video.buffered), j = ne(e.moqWatch.audio.buffered), Q = {
+    moqWatch: e.moqWatch,
+    watchStatus: t,
+    togglePlayback: x,
+    isPlaying: o,
+    setVolume: U,
+    isMuted: s,
+    currentVolume: i,
+    toggleMuted: C,
+    buffering: f,
+    jitter: l,
+    setJitter: R,
+    availableRenditions: E,
+    activeRendition: _,
+    setActiveRendition: K,
+    isStatsPanelVisible: P,
+    setIsStatsPanelVisible: M,
+    isFullscreen: m,
+    toggleFullscreen: q,
+    timestamp: S,
+    videoBuffered: V,
+    audioBuffered: j
+  }, W = e.moqWatch, z = new De.Effect();
+  z.effect((h) => {
+    const k = h.get(W.connection.url), X = h.get(W.connection.status), Z = h.get(W.broadcast.status);
+    k ? X === "disconnected" ? n("disconnected") : X === "connecting" ? n("connecting") : Z === "offline" ? n("offline") : Z === "loading" ? n("loading") : Z === "live" ? n("live") : X === "connected" && n("connected") : n("no-url");
+  }), z.effect((h) => {
+    const k = h.get(W.paused);
+    r(!k);
+  }), z.effect((h) => {
+    const k = h.get(W.audio.volume);
+    c(k * 100);
+  }), z.effect((h) => {
+    const k = h.get(W.audio.muted);
+    a(k);
+  }), z.effect((h) => {
+    const k = h.get(W.video.stalled);
+    d(k);
+  }), z.effect((h) => {
+    const k = h.get(W.jitter);
+    R(k);
+  }), z.effect((h) => {
+    const X = h.get(W.video.source.catalog)?.renditions ?? {}, Z = Object.entries(X).map(([Ue, ve]) => ({
+      name: Ue,
+      width: ve.codedWidth,
+      height: ve.codedHeight
+    }));
+    y(Z);
+  }), z.effect((h) => {
+    const k = h.get(W.video.source.track);
+    p(k);
+  });
+  const Fe = () => {
+    w(!!document.fullscreenElement);
+  };
+  return z.event(document, "fullscreenchange", Fe), pe(() => z.close()), u(ue.Provider, {
+    value: Q,
+    get children() {
+      return e.children;
+    }
+  });
+}
+function H() {
+  const e = Ve(ue);
+  if (!e)
+    throw new Error("useWatchUIContext must be used within a WatchUIContextProvider");
+  return e;
+}
+var Mt = /* @__PURE__ */ T("<div class=bufferingContainer><div class=bufferingSpinner>");
+function jt() {
+  const e = H();
+  return u(N, {
+    get when() {
+      return e.buffering();
+    },
+    get children() {
+      return Mt();
+    }
+  });
+}
+var qt = /* @__PURE__ */ T('<div class=buffer__container><div role=slider tabindex=0 aria-label="Buffer jitter"><div class=buffer__playhead></div><div class="buffer__track buffer__track--video"><span class=buffer__track-label>Video</span></div><div class="buffer__track buffer__track--audio"><span class=buffer__track-label>Audio</span></div><div class=buffer__target-area><div class=buffer__target-line><span class=buffer__target-label>'), $e = /* @__PURE__ */ T("<span class=buffer__overflow-label>s"), Ae = /* @__PURE__ */ T("<div class=buffer__range>");
+const Ee = 0, Pe = 100;
+function Vt(e) {
+  const t = H(), n = () => e.max ?? 5e3, [o, r] = A(!1), s = (_, p, P) => {
+    const M = _.start - p, m = _.end - p, w = Math.max(0, M), x = Math.min(m, n()), q = w / n() * 100, U = Math.max(0.5, (x - w) / n() * 100), C = m > n(), R = C ? He.Time.Milli.toSecond(m - w).toFixed(1) : null;
+    return {
+      style: `left: ${q}%; width: ${U}%; background: ${P};`,
+      isOverflow: C,
+      overflowSec: R
+    };
+  }, a = (_, p) => p ? "#f87171" : _ > 0 ? "#facc15" : "#4ade80", i = L(() => t.jitter() / n() * 100);
+  let c;
+  const f = 48, d = (_) => {
+    if (!c) return;
+    const p = c.getBoundingClientRect(), P = p.width - f, m = Math.max(0, Math.min(_ - p.left - f, P)) / P * n(), w = Math.round(m / Pe) * Pe, x = Math.max(Ee, Math.min(n(), w));
+    t.setJitter(x);
+  }, l = (_) => {
+    r(!0), d(_.clientX), document.addEventListener("mousemove", E), document.addEventListener("mouseup", y);
+  }, E = (_) => {
+    o() && d(_.clientX);
+  }, y = () => {
+    r(!1), document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", y);
+  };
+  return pe(() => {
+    document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", y);
+  }), (() => {
+    var _ = qt(), p = _.firstChild, P = p.firstChild, M = P.nextSibling;
+    M.firstChild;
+    var m = M.nextSibling;
+    m.firstChild;
+    var w = m.nextSibling, x = w.firstChild, q = x.firstChild;
+    p.$$mousedown = l;
+    var U = c;
+    return typeof U == "function" ? ht(U, p) : c = p, oe(p, "aria-valuemin", Ee), b(M, u(_e, {
+      get each() {
+        return t.videoBuffered();
+      },
+      children: (C, R) => {
+        const K = () => {
+          const S = t.timestamp();
+          return S === void 0 ? null : s(C, S, a(R(), t.buffering()));
+        };
+        return u(N, {
+          get when() {
+            return K();
+          },
+          children: (S) => (() => {
+            var V = Ae();
+            return b(V, u(N, {
+              get when() {
+                return S().isOverflow;
+              },
+              get children() {
+                var j = $e(), Q = j.firstChild;
+                return b(j, () => S().overflowSec, Q), j;
+              }
+            })), B((j) => Ce(V, S().style, j)), V;
+          })()
+        });
+      }
+    }), null), b(m, u(_e, {
+      get each() {
+        return t.audioBuffered();
+      },
+      children: (C, R) => {
+        const K = () => {
+          const S = t.timestamp();
+          return S === void 0 ? null : s(C, S, a(R(), t.buffering()));
+        };
+        return u(N, {
+          get when() {
+            return K();
+          },
+          children: (S) => (() => {
+            var V = Ae();
+            return b(V, u(N, {
+              get when() {
+                return S().isOverflow;
+              },
+              get children() {
+                var j = $e(), Q = j.firstChild;
+                return b(j, () => S().overflowSec, Q), j;
+              }
+            })), B((j) => Ce(V, S().style, j)), V;
+          })()
+        });
+      }
+    }), null), b(q, () => `${Math.round(t.jitter())}ms`), B((C) => {
+      var R = `buffer__visualization ${o() ? "buffer__visualization--dragging" : ""}`, K = t.jitter(), S = n(), V = `${i()}%`;
+      return R !== C.e && dt(p, C.e = R), K !== C.t && oe(p, "aria-valuenow", C.t = K), S !== C.a && oe(p, "aria-valuemax", C.a = S), V !== C.o && pt(x, "left", C.o = V), C;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), _;
+  })();
+}
+ft(["mousedown"]);
+function Lt() {
+  const e = H();
+  return u(fe, {
+    title: "Fullscreen",
+    onClick: () => {
+      e.toggleFullscreen();
+    },
+    get children() {
+      return u(N, {
+        get when() {
+          return e.isFullscreen();
+        },
+        get fallback() {
+          return u(I.FullscreenEnter, {});
+        },
+        get children() {
+          return u(I.FullscreenExit, {});
+        }
+      });
+    }
+  });
+}
+function Rt() {
+  const e = H();
+  return u(fe, {
+    get title() {
+      return e.isPlaying() ? "Pause" : "Play";
+    },
+    class: "button--playback",
+    onClick: () => {
+      e.togglePlayback();
+    },
+    get children() {
+      return u(N, {
+        get when() {
+          return e.isPlaying();
+        },
+        get fallback() {
+          return u(I.Play, {});
+        },
+        get children() {
+          return u(I.Pause, {});
+        }
+      });
+    }
+  });
+}
+var Ot = /* @__PURE__ */ T("<div class=qualitySelectorContainer><label for=quality-select class=qualityLabel>Quality: </label><select id=quality-select class=qualitySelect><option value>Auto"), Tt = /* @__PURE__ */ T("<option>");
+function Wt() {
+  const e = H(), t = (n) => {
+    const o = n.currentTarget.value || void 0;
+    e.setActiveRendition(o);
+  };
+  return (() => {
+    var n = Ot(), o = n.firstChild, r = o.nextSibling;
+    return r.firstChild, r.addEventListener("change", t), b(r, u(_e, {
+      get each() {
+        return e.availableRenditions() ?? [];
+      },
+      children: (s) => (() => {
+        var a = Tt();
+        return b(a, () => s.name, null), b(a, (() => {
+          var i = ct(() => !!(s.width && s.height));
+          return () => i() ? ` (${s.width}x${s.height})` : "";
+        })(), null), B(() => a.value = s.name), a;
+      })()
+    }), null), B(() => r.value = e.activeRendition() ?? ""), n;
+  })();
+}
+function zt() {
+  const e = H();
+  return u(fe, {
+    get title() {
+      return e.isStatsPanelVisible() ? "Hide stats" : "Show stats";
+    },
+    onClick: () => {
+      e.setIsStatsPanelVisible(!e.isStatsPanelVisible());
+    },
+    get children() {
+      return u(I.Stats, {});
+    }
+  });
+}
+var Bt = /* @__PURE__ */ T("<div class=volumeSliderContainer><input type=range min=0 max=100><span class=volumeLabel>");
+const It = (e, t) => t || e === 0 ? u(I.Mute, {}) : e > 0 && e <= 33 ? u(I.VolumeLow, {}) : e > 33 && e <= 66 ? u(I.VolumeMedium, {}) : u(I.VolumeHigh, {});
+function Nt() {
+  const [e, t] = A(0), n = H(), o = (r) => {
+    const s = r.currentTarget, a = parseFloat(s.value);
+    n.setVolume(a);
+  };
+  return qe(() => {
+    const r = n.currentVolume() || 0;
+    t(Math.round(r));
+  }), (() => {
+    var r = Bt(), s = r.firstChild, a = s.nextSibling;
+    return b(r, u(fe, {
+      get title() {
+        return n.isMuted() ? "Unmute" : "Mute";
+      },
+      onClick: () => n.toggleMuted(),
+      get children() {
+        return It(n.currentVolume(), n.isMuted());
+      }
+    }), s), s.addEventListener("change", o), b(a, e), B(() => s.value = n.currentVolume()), r;
+  })();
+}
+var Ft = /* @__PURE__ */ T("<output>");
+function Ut() {
+  const e = H();
+  return (() => {
+    var t = Ft();
+    return b(t, u(lt, {
+      get children() {
+        return [u(G, {
+          get when() {
+            return e.watchStatus() === "no-url";
+          },
+          children: "🔴 No URL"
+        }), u(G, {
+          get when() {
+            return e.watchStatus() === "disconnected";
+          },
+          children: "🔴 Disconnected"
+        }), u(G, {
+          get when() {
+            return e.watchStatus() === "connecting";
+          },
+          children: "🟡 Connecting..."
+        }), u(G, {
+          get when() {
+            return e.watchStatus() === "offline";
+          },
+          children: "🔴 Offline"
+        }), u(G, {
+          get when() {
+            return e.watchStatus() === "loading";
+          },
+          children: "🟡 Loading..."
+        }), u(G, {
+          get when() {
+            return e.watchStatus() === "live";
+          },
+          children: "🟢 Live"
+        }), u(G, {
+          get when() {
+            return e.watchStatus() === "connected";
+          },
+          children: "🟢 Connected"
+        })];
+      }
+    })), t;
+  })();
+}
+var Kt = /* @__PURE__ */ T('<div class=watchControlsContainer><div class="playbackControlsRow flex--align-center"></div><div class=latencyControlsRow>');
+function Dt() {
+  return (() => {
+    var e = Kt(), t = e.firstChild, n = t.nextSibling;
+    return b(t, u(Rt, {}), null), b(t, u(Nt, {}), null), b(t, u(Ut, {}), null), b(t, u(zt, {}), null), b(t, u(Lt, {}), null), b(n, u(Vt, {}), null), b(n, u(Wt, {}), null), e;
+  })();
+}
+const Ht = ':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-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-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-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-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-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}:root{--buffer-green: #4ade80;--buffer-yellow: #facc15;--buffer-red: #f87171}.watchVideoContainer{display:block;position:relative;width:100%;height:auto;border-radius:4px;margin:0 auto;pointer-events:none}.watchControlsContainer{display:flex;flex-direction:column}.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}.volumeSliderContainer{display:flex;align-items:center;gap:.25rem}.volumeLabel{display:inline-block;width:2em;text-align:right}@keyframes buffer-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bufferingContainer{position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:100%;top:0;left:0;z-index:1;background-color:#0006;backdrop-filter:blur(2px);pointer-events:auto}.bufferingSpinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.2);border-top:4px solid #fff;border-radius:50%;animation:buffer-spin 1s linear infinite}.latencySliderContainer{display:flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;border-radius:8px;margin:8px 0}.latencyLabel{font-size:20px;font-weight:500;color:#fff;white-space:nowrap}.latencySlider{flex:1 1 0%;height:6px;border-radius:3px;background:transparent;cursor:pointer}.latencyValueDisplay{font-size:20px;min-width:60px;text-align:right;color:#fff}.playbackControlsRow{display:flex;place-content:center space-around;gap:8px;padding:.5rem 0}.lantencyControlsRow,.qualitySelectorContainer{display:flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;border-radius:8px;margin:8px 0}.qualityLabel{font-size:20px;font-weight:500;color:#fff;white-space:nowrap}.qualitySelect{flex:0 1 auto;font-size:16px;padding:4px 8px;border-radius:4px;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:background .2s ease}.qualitySelect:hover{background:#ffffff26}.qualitySelect:focus{outline:2px solid rgba(255,255,255,.3);outline-offset:2px}.qualitySelect option{background:#1a1a1a;color:#fff}.buffer__container{display:flex;flex-direction:column;gap:8px;padding:8px 12px}.buffer__visualization{position:relative;width:100%;height:52px;background:#ffffff1a;border-radius:4px;cursor:pointer;user-select:none;padding-left:48px;box-sizing:border-box}.buffer__playhead{position:absolute;left:48px;top:0;bottom:0;width:2px;background:#fff;z-index:3}.buffer__track{position:absolute;left:48px;right:0;height:20px;display:flex;align-items:center}.buffer__track--video{top:4px}.buffer__track--audio{top:28px}.buffer__track-label{position:absolute;left:-46px;width:40px;font-size:10px;color:#fff9;text-align:right;padding-right:4px;pointer-events:none;box-sizing:border-box}.buffer__range{position:absolute;top:2px;height:calc(100% - 4px);border-radius:2px;min-width:2px;opacity:.85;display:flex;align-items:center;justify-content:flex-end;overflow:hidden}.buffer__overflow-label{font-size:9px;color:#000000b3;padding-right:4px;font-weight:500}.buffer__target-area{position:absolute;inset:0 0 0 48px;pointer-events:none}.buffer__target-line{position:absolute;top:0;bottom:0;width:3px;background:var(--color-orange-400, #fb923c);z-index:2;cursor:ew-resize;border-radius:1px;pointer-events:auto}.buffer__target-label{position:absolute;bottom:100%;left:50%;transform:translate(-50%);font-size:11px;font-weight:500;color:var(--color-orange-400, #fb923c);white-space:nowrap;margin-bottom:2px;opacity:0;transition:opacity .15s ease;pointer-events:none}.buffer__visualization:hover .buffer__target-label,.buffer__visualization--dragging .buffer__target-label{opacity:1}';
+var Gt = /* @__PURE__ */ T("<style>"), Jt = /* @__PURE__ */ T("<div class=watchVideoContainer><slot>");
+function Qt(e) {
+  return u(Pt, {
+    get moqWatch() {
+      return e.watch;
+    },
+    get children() {
+      return [(() => {
+        var t = Gt();
+        return b(t, Ht), t;
+      })(), (() => {
+        var t = Jt(), n = t.firstChild;
+        return n._$owner = Ye(), b(t, () => {
+          const o = Ve(ue);
+          return o ? u(N, {
+            get when() {
+              return o.isStatsPanelVisible();
+            },
+            get children() {
+              return u(Ke, {
+                context: ue,
+                getElement: (r) => r?.moqWatch
+              });
+            }
+          }) : null;
+        }, null), b(t, u(jt, {}), null), t;
+      })(), u(Dt, {})];
+    }
+  });
+}
+Et("moq-watch-ui", (e, {
+  element: t
+}) => {
+  const [n, o] = A();
+  return Ze(async () => {
+    await customElements.whenDefined("moq-watch");
+    const r = t.querySelector("moq-watch");
+    o(r || void 0);
+  }), u(N, {
+    get when() {
+      return n();
+    },
+    keyed: !0,
+    children: (r) => u(Qt, {
+      watch: r
+    })
+  });
+});
+//# sourceMappingURL=index.js.map