@moq/watch 0.1.1 → 0.2.0

package/ui/index.js

@@ -1,10 +1,10 @@
 import { Button as lt, Icon as V, Stats as Bt } from "@moq/ui-core";
 import { Signals as It, Moq as Nt } from "@moq/hang";
-const Ut = !1, Ft = (t, e) => t === e, Kt = /* @__PURE__ */ Symbol("solid-track"), rt = {
+const Ut = !1, Ft = (t, e) => t === e, Kt = /* @__PURE__ */ Symbol("solid-track"), nt = {
   equals: Ft
 };
 let Et = Wt;
-const F = 1, nt = 2, Pt = {
+const F = 1, rt = 2, Pt = {
   owned: null,
   cleanups: null,
   context: null,
@@ -13,42 +13,42 @@ const F = 1, nt = 2, Pt = {
 var g = null;
 let ft = null, Dt = null, w = null, A = null, z = null, ct = 0;
 function tt(t, e) {
-  const r = w, a = g, n = t.length === 0, o = e === void 0 ? a : e, s = n ? Pt : {
+  const n = w, a = g, r = t.length === 0, o = e === void 0 ? a : e, s = r ? Pt : {
     owned: null,
     cleanups: null,
     context: o ? o.context : null,
     owner: o
-  }, i = n ? t : () => t(() => R(() => X(s)));
+  }, i = r ? t : () => t(() => R(() => X(s)));
   g = s, w = null;
   try {
     return Y(i, !0);
   } finally {
-    w = r, g = a;
+    w = n, g = a;
   }
 }
 function j(t, e) {
-  e = e ? Object.assign({}, rt, e) : rt;
-  const r = {
+  e = e ? Object.assign({}, nt, e) : nt;
+  const n = {
     value: t,
     observers: null,
     observerSlots: null,
     comparator: e.equals || void 0
-  }, a = (n) => (typeof n == "function" && (n = n(r.value)), Tt(r, n));
-  return [jt.bind(r), a];
+  }, a = (r) => (typeof r == "function" && (r = r(n.value)), Tt(n, r));
+  return [jt.bind(n), a];
 }
-function T(t, e, r) {
+function T(t, e, n) {
   const a = bt(t, e, !1, F);
   Z(a);
 }
-function Mt(t, e, r) {
+function Mt(t, e, n) {
   Et = Yt;
   const a = bt(t, e, !1, F);
   a.user = !0, z ? z.push(a) : Z(a);
 }
-function U(t, e, r) {
-  r = r ? Object.assign({}, rt, r) : rt;
+function U(t, e, n) {
+  n = n ? Object.assign({}, nt, n) : nt;
   const a = bt(t, e, !0, 0);
-  return a.observers = null, a.observerSlots = null, a.comparator = r.equals || void 0, Z(a), jt.bind(a);
+  return a.observers = null, a.observerSlots = null, a.comparator = n.equals || void 0, Z(a), jt.bind(a);
 }
 function R(t) {
   if (w === null) return t();
@@ -70,10 +70,10 @@ function Gt() {
   return g;
 }
 function Jt(t, e) {
-  const r = /* @__PURE__ */ Symbol("context");
+  const n = /* @__PURE__ */ Symbol("context");
   return {
-    id: r,
-    Provider: ee(r),
+    id: n,
+    Provider: ee(n),
     defaultValue: t
   };
 }
@@ -82,11 +82,11 @@ function qt(t) {
   return g && g.context && (e = g.context[t.id]) !== void 0 ? e : t.defaultValue;
 }
 function Qt(t) {
-  const e = U(t), r = U(() => ht(e()));
-  return r.toArray = () => {
-    const a = r();
+  const e = U(t), n = U(() => ht(e()));
+  return n.toArray = () => {
+    const a = n();
     return Array.isArray(a) ? a : a != null ? [a] : [];
-  }, r;
+  }, n;
 }
 function jt() {
   if (this.sources && this.state)
@@ -101,11 +101,11 @@ function jt() {
   }
   return this.value;
 }
-function Tt(t, e, r) {
+function Tt(t, e, n) {
   let a = t.value;
   return (!t.comparator || !t.comparator(a, e)) && (t.value = e, t.observers && t.observers.length && Y(() => {
-    for (let n = 0; n < t.observers.length; n += 1) {
-      const o = t.observers[n], s = ft && ft.running;
+    for (let r = 0; r < t.observers.length; r += 1) {
+      const o = t.observers[r], s = ft && ft.running;
       s && ft.disposed.has(o), (s ? !o.tState : !o.state) && (o.pure ? A.push(o) : z.push(o), o.observers && Ot(o)), s || (o.state = F);
     }
     if (A.length > 1e6)
@@ -118,20 +118,20 @@ function Z(t) {
   const e = ct;
   Xt(t, t.value, e);
 }
-function Xt(t, e, r) {
+function Xt(t, e, n) {
   let a;
-  const n = g, o = w;
+  const r = g, o = w;
   w = g = t;
   try {
     a = t.fn(e);
   } catch (s) {
-    return t.pure && (t.state = F, t.owned && t.owned.forEach(X), t.owned = null), t.updatedAt = r + 1, Vt(s);
+    return t.pure && (t.state = F, t.owned && t.owned.forEach(X), t.owned = null), t.updatedAt = n + 1, Vt(s);
   } finally {
-    w = o, g = n;
+    w = o, g = r;
   }
-  (!t.updatedAt || t.updatedAt <= r) && (t.updatedAt != null && "observers" in t ? Tt(t, a) : t.value = a, t.updatedAt = r);
+  (!t.updatedAt || t.updatedAt <= n) && (t.updatedAt != null && "observers" in t ? Tt(t, a) : t.value = a, t.updatedAt = n);
 }
-function bt(t, e, r, a = F, n) {
+function bt(t, e, n, a = F, r) {
   const o = {
     fn: t,
     state: a,
@@ -143,34 +143,34 @@ function bt(t, e, r, a = F, n) {
     value: e,
     owner: g,
     context: g ? g.context : null,
-    pure: r
+    pure: n
   };
   return g === null || g !== Pt && (g.owned ? g.owned.push(o) : g.owned = [o]), o;
 }
 function at(t) {
   if (t.state === 0) return;
-  if (t.state === nt) return ot(t);
+  if (t.state === rt) return ot(t);
   if (t.suspense && R(t.suspense.inFallback)) return t.suspense.effects.push(t);
   const e = [t];
   for (; (t = t.owner) && (!t.updatedAt || t.updatedAt < ct); )
     t.state && e.push(t);
-  for (let r = e.length - 1; r >= 0; r--)
-    if (t = e[r], t.state === F)
+  for (let n = e.length - 1; n >= 0; n--)
+    if (t = e[n], t.state === F)
       Z(t);
-    else if (t.state === nt) {
+    else if (t.state === rt) {
       const a = A;
       A = null, Y(() => ot(t, e[0]), !1), A = a;
     }
 }
 function Y(t, e) {
   if (A) return t();
-  let r = !1;
-  e || (A = []), z ? r = !0 : z = [], ct++;
+  let n = !1;
+  e || (A = []), z ? n = !0 : z = [], ct++;
   try {
     const a = t();
-    return Zt(r), a;
+    return Zt(n), a;
   } catch (a) {
-    r || (z = null), A = null, Vt(a);
+    n || (z = null), A = null, Vt(a);
   }
 }
 function Zt(t) {
@@ -182,37 +182,37 @@ function Wt(t) {
   for (let e = 0; e < t.length; e++) at(t[e]);
 }
 function Yt(t) {
-  let e, r = 0;
+  let e, n = 0;
   for (e = 0; e < t.length; e++) {
     const a = t[e];
-    a.user ? t[r++] = a : at(a);
+    a.user ? t[n++] = a : at(a);
   }
-  for (e = 0; e < r; e++) at(t[e]);
+  for (e = 0; e < n; e++) at(t[e]);
 }
 function ot(t, e) {
   t.state = 0;
-  for (let r = 0; r < t.sources.length; r += 1) {
-    const a = t.sources[r];
+  for (let n = 0; n < t.sources.length; n += 1) {
+    const a = t.sources[n];
     if (a.sources) {
-      const n = a.state;
-      n === F ? a !== e && (!a.updatedAt || a.updatedAt < ct) && at(a) : n === nt && ot(a, e);
+      const r = a.state;
+      r === F ? a !== e && (!a.updatedAt || a.updatedAt < ct) && at(a) : r === rt && ot(a, e);
     }
   }
 }
 function Ot(t) {
   for (let e = 0; e < t.observers.length; e += 1) {
-    const r = t.observers[e];
-    r.state || (r.state = nt, r.pure ? A.push(r) : z.push(r), r.observers && Ot(r));
+    const n = t.observers[e];
+    n.state || (n.state = rt, n.pure ? A.push(n) : z.push(n), n.observers && Ot(n));
   }
 }
 function X(t) {
   let e;
   if (t.sources)
     for (; t.sources.length; ) {
-      const r = t.sources.pop(), a = t.sourceSlots.pop(), n = r.observers;
-      if (n && n.length) {
-        const o = n.pop(), s = r.observerSlots.pop();
-        a < n.length && (o.sourceSlots[s] = a, n[a] = o, r.observerSlots[a] = s);
+      const n = t.sources.pop(), a = t.sourceSlots.pop(), r = n.observers;
+      if (r && r.length) {
+        const o = r.pop(), s = n.observerSlots.pop();
+        a < r.length && (o.sourceSlots[s] = a, r[a] = o, n.observerSlots[a] = s);
       }
     }
   if (t.tOwned) {
@@ -241,8 +241,8 @@ function ht(t) {
   if (typeof t == "function" && !t.length) return ht(t());
   if (Array.isArray(t)) {
     const e = [];
-    for (let r = 0; r < t.length; r++) {
-      const a = ht(t[r]);
+    for (let n = 0; n < t.length; n++) {
+      const a = ht(t[n]);
       Array.isArray(a) ? e.push.apply(e, a) : e.push(a);
     }
     return e;
@@ -251,42 +251,42 @@ function ht(t) {
 }
 function ee(t, e) {
   return function(a) {
-    let n;
-    return T(() => n = R(() => (g.context = {
+    let r;
+    return T(() => r = R(() => (g.context = {
       ...g.context,
       [t]: a.value
-    }, Qt(() => a.children))), void 0), n;
+    }, Qt(() => a.children))), void 0), r;
   };
 }
-const re = /* @__PURE__ */ Symbol("fallback");
+const ne = /* @__PURE__ */ Symbol("fallback");
 function wt(t) {
   for (let e = 0; e < t.length; e++) t[e]();
 }
-function ne(t, e, r = {}) {
-  let a = [], n = [], o = [], s = 0, i = e.length > 1 ? [] : null;
+function re(t, e, n = {}) {
+  let a = [], r = [], o = [], s = 0, i = e.length > 1 ? [] : null;
   return ut(() => wt(o)), () => {
     let c = t() || [], f = c.length, d, l;
     return c[Kt], R(() => {
       let $, _, h, E, P, b, v, m, q;
       if (f === 0)
-        s !== 0 && (wt(o), o = [], a = [], n = [], s = 0, i && (i = [])), r.fallback && (a = [re], n[0] = tt((B) => (o[0] = B, r.fallback())), s = 1);
+        s !== 0 && (wt(o), o = [], a = [], r = [], s = 0, i && (i = [])), n.fallback && (a = [ne], r[0] = tt((B) => (o[0] = B, n.fallback())), s = 1);
       else if (s === 0) {
-        for (n = new Array(f), l = 0; l < f; l++)
-          a[l] = c[l], n[l] = tt(M);
+        for (r = new Array(f), l = 0; l < f; l++)
+          a[l] = c[l], r[l] = tt(M);
         s = f;
       } else {
         for (h = new Array(f), E = new Array(f), i && (P = new Array(f)), b = 0, v = Math.min(s, f); b < v && a[b] === c[b]; b++) ;
         for (v = s - 1, m = f - 1; v >= b && m >= b && a[v] === c[m]; v--, m--)
-          h[m] = n[v], E[m] = o[v], i && (P[m] = i[v]);
+          h[m] = r[v], E[m] = o[v], i && (P[m] = i[v]);
         for ($ = /* @__PURE__ */ new Map(), _ = new Array(m + 1), l = m; l >= b; l--)
           q = c[l], d = $.get(q), _[l] = d === void 0 ? -1 : d, $.set(q, l);
         for (d = b; d <= v; d++)
-          q = a[d], l = $.get(q), l !== void 0 && l !== -1 ? (h[l] = n[d], E[l] = o[d], i && (P[l] = i[d]), l = _[l], $.set(q, l)) : o[d]();
+          q = a[d], l = $.get(q), l !== void 0 && l !== -1 ? (h[l] = r[d], E[l] = o[d], i && (P[l] = i[d]), l = _[l], $.set(q, l)) : o[d]();
         for (l = b; l < f; l++)
-          l in h ? (n[l] = h[l], o[l] = E[l], i && (i[l] = P[l], i[l](l))) : n[l] = tt(M);
-        n = n.slice(0, s = f), a = c.slice(0);
+          l in h ? (r[l] = h[l], o[l] = E[l], i && (i[l] = P[l], i[l](l))) : r[l] = tt(M);
+        r = r.slice(0, s = f), a = c.slice(0);
       }
-      return n;
+      return r;
     });
     function M($) {
       if (o[l] = $, i) {
@@ -305,117 +305,117 @@ function gt(t) {
   const e = "fallback" in t && {
     fallback: () => t.fallback
   };
-  return U(ne(() => t.each, t.children, e || void 0));
+  return U(re(() => t.each, t.children, e || void 0));
 }
 function L(t) {
-  const e = t.keyed, r = U(() => t.when, void 0, void 0), a = e ? r : U(r, void 0, {
-    equals: (n, o) => !n == !o
+  const e = t.keyed, n = U(() => t.when, void 0, void 0), a = e ? n : U(n, void 0, {
+    equals: (r, o) => !r == !o
   });
   return U(() => {
-    const n = a();
-    if (n) {
+    const r = a();
+    if (r) {
       const o = t.children;
-      return typeof o == "function" && o.length > 0 ? R(() => o(e ? n : () => {
+      return typeof o == "function" && o.length > 0 ? R(() => o(e ? r : () => {
         if (!R(a)) throw ae("Show");
-        return r();
+        return n();
       })) : o;
     }
     return t.fallback;
   }, void 0, void 0);
 }
 const oe = (t) => U(() => t());
-function ie(t, e, r) {
-  let a = r.length, n = e.length, o = a, s = 0, i = 0, c = e[n - 1].nextSibling, f = null;
-  for (; s < n || i < o; ) {
-    if (e[s] === r[i]) {
+function ie(t, e, n) {
+  let a = n.length, r = e.length, o = a, s = 0, i = 0, c = e[r - 1].nextSibling, f = null;
+  for (; s < r || i < o; ) {
+    if (e[s] === n[i]) {
       s++, i++;
       continue;
     }
-    for (; e[n - 1] === r[o - 1]; )
-      n--, o--;
-    if (n === s) {
-      const d = o < a ? i ? r[i - 1].nextSibling : r[o - i] : c;
-      for (; i < o; ) t.insertBefore(r[i++], d);
+    for (; e[r - 1] === n[o - 1]; )
+      r--, o--;
+    if (r === s) {
+      const d = o < a ? i ? n[i - 1].nextSibling : n[o - i] : c;
+      for (; i < o; ) t.insertBefore(n[i++], d);
     } else if (o === i)
-      for (; s < n; )
+      for (; s < r; )
         (!f || !f.has(e[s])) && e[s].remove(), s++;
-    else if (e[s] === r[o - 1] && r[i] === e[n - 1]) {
-      const d = e[--n].nextSibling;
-      t.insertBefore(r[i++], e[s++].nextSibling), t.insertBefore(r[--o], d), e[n] = r[o];
+    else if (e[s] === n[o - 1] && n[i] === e[r - 1]) {
+      const d = e[--r].nextSibling;
+      t.insertBefore(n[i++], e[s++].nextSibling), t.insertBefore(n[--o], d), e[r] = n[o];
     } else {
       if (!f) {
         f = /* @__PURE__ */ new Map();
         let l = i;
-        for (; l < o; ) f.set(r[l], l++);
+        for (; l < o; ) f.set(n[l], l++);
       }
       const d = f.get(e[s]);
       if (d != null)
         if (i < d && d < o) {
           let l = s, M = 1, $;
-          for (; ++l < n && l < o && !(($ = f.get(e[l])) == null || $ !== d + M); )
+          for (; ++l < r && l < o && !(($ = f.get(e[l])) == null || $ !== d + M); )
             M++;
           if (M > d - i) {
             const _ = e[s];
-            for (; i < d; ) t.insertBefore(r[i++], _);
-          } else t.replaceChild(r[i++], e[s++]);
+            for (; i < d; ) t.insertBefore(n[i++], _);
+          } else t.replaceChild(n[i++], e[s++]);
         } else s++;
       else e[s++].remove();
     }
   }
 }
 const mt = "_$DX_DELEGATE";
-function W(t, e, r, a) {
-  let n;
+function W(t, e, n, a) {
+  let r;
   const o = () => {
     const i = document.createElement("template");
     return i.innerHTML = t, i.content.firstChild;
-  }, s = () => (n || (n = o())).cloneNode(!0);
+  }, s = () => (r || (r = o())).cloneNode(!0);
   return s.cloneNode = s, s;
 }
 function se(t, e = window.document) {
-  const r = e[mt] || (e[mt] = /* @__PURE__ */ new Set());
-  for (let a = 0, n = t.length; a < n; a++) {
+  const n = e[mt] || (e[mt] = /* @__PURE__ */ new Set());
+  for (let a = 0, r = t.length; a < r; a++) {
     const o = t[a];
-    r.has(o) || (r.add(o), e.addEventListener(o, ue));
+    n.has(o) || (n.add(o), e.addEventListener(o, ue));
   }
 }
-function et(t, e, r) {
-  r == null ? t.removeAttribute(e) : t.setAttribute(e, r);
+function et(t, e, n) {
+  n == null ? t.removeAttribute(e) : t.setAttribute(e, n);
 }
 function pt(t, e) {
   e == null ? t.removeAttribute("class") : t.className = e;
 }
-function yt(t, e, r) {
-  if (!e) return r ? et(t, "style") : e;
+function yt(t, e, n) {
+  if (!e) return n ? et(t, "style") : e;
   const a = t.style;
   if (typeof e == "string") return a.cssText = e;
-  typeof r == "string" && (a.cssText = r = void 0), r || (r = {}), e || (e = {});
-  let n, o;
-  for (o in r)
-    e[o] == null && a.removeProperty(o), delete r[o];
+  typeof n == "string" && (a.cssText = n = void 0), n || (n = {}), e || (e = {});
+  let r, o;
+  for (o in n)
+    e[o] == null && a.removeProperty(o), delete n[o];
   for (o in e)
-    n = e[o], n !== r[o] && (a.setProperty(o, n), r[o] = n);
-  return r;
+    r = e[o], r !== n[o] && (a.setProperty(o, r), n[o] = r);
+  return n;
 }
-function le(t, e, r) {
-  r != null ? t.style.setProperty(e, r) : t.style.removeProperty(e);
+function le(t, e, n) {
+  n != null ? t.style.setProperty(e, n) : t.style.removeProperty(e);
 }
-function ce(t, e, r) {
-  return R(() => t(e, r));
+function ce(t, e, n) {
+  return R(() => t(e, n));
 }
-function p(t, e, r, a) {
-  if (r !== void 0 && !a && (a = []), typeof e != "function") return it(t, e, a, r);
-  T((n) => it(t, e(), n, r), a);
+function p(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 ue(t) {
   let e = t.target;
-  const r = `$$${t.type}`, a = t.target, n = t.currentTarget, o = (c) => Object.defineProperty(t, "target", {
+  const n = `$$${t.type}`, a = t.target, r = t.currentTarget, o = (c) => Object.defineProperty(t, "target", {
     configurable: !0,
     value: c
   }), s = () => {
-    const c = e[r];
+    const c = e[n];
     if (c && !e.disabled) {
-      const f = e[`${r}Data`];
+      const f = e[`${n}Data`];
       if (f !== void 0 ? c.call(e, f, t) : c.call(e, t), t.cancelBubble) return;
     }
     return e.host && typeof e.host != "string" && !e.host._$host && e.contains(t.target) && o(e.host), !0;
@@ -435,112 +435,112 @@ function ue(t) {
         e = e._$host, i();
         break;
       }
-      if (e.parentNode === n)
+      if (e.parentNode === r)
         break;
     }
   } else i();
   o(a);
 }
-function it(t, e, r, a, n) {
-  for (; typeof r == "function"; ) r = r();
-  if (e === r) return r;
+function it(t, e, n, a, r) {
+  for (; typeof n == "function"; ) n = n();
+  if (e === n) return n;
   const o = typeof e, s = a !== void 0;
-  if (t = s && r[0] && r[0].parentNode || t, o === "string" || o === "number") {
-    if (o === "number" && (e = e.toString(), e === r))
-      return r;
+  if (t = s && n[0] && n[0].parentNode || t, o === "string" || o === "number") {
+    if (o === "number" && (e = e.toString(), e === n))
+      return n;
     if (s) {
-      let i = r[0];
-      i && i.nodeType === 3 ? i.data !== e && (i.data = e) : i = document.createTextNode(e), r = H(t, r, a, i);
+      let i = n[0];
+      i && i.nodeType === 3 ? i.data !== e && (i.data = e) : i = document.createTextNode(e), n = H(t, n, a, i);
     } else
-      r !== "" && typeof r == "string" ? r = t.firstChild.data = e : r = t.textContent = e;
+      n !== "" && typeof n == "string" ? n = t.firstChild.data = e : n = t.textContent = e;
   } else if (e == null || o === "boolean")
-    r = H(t, r, a);
+    n = H(t, n, a);
   else {
     if (o === "function")
       return T(() => {
         let i = e();
         for (; typeof i == "function"; ) i = i();
-        r = it(t, i, r, a);
-      }), () => r;
+        n = it(t, i, n, a);
+      }), () => n;
     if (Array.isArray(e)) {
-      const i = [], c = r && Array.isArray(r);
-      if (_t(i, e, r, n))
-        return T(() => r = it(t, i, r, a, !0)), () => r;
+      const i = [], c = n && Array.isArray(n);
+      if (_t(i, e, n, r))
+        return T(() => n = it(t, i, n, a, !0)), () => n;
       if (i.length === 0) {
-        if (r = H(t, r, a), s) return r;
-      } else c ? r.length === 0 ? xt(t, i, a) : ie(t, r, i) : (r && H(t), xt(t, i));
-      r = i;
+        if (n = H(t, n, a), s) return n;
+      } else c ? n.length === 0 ? xt(t, i, a) : ie(t, n, i) : (n && H(t), xt(t, i));
+      n = i;
     } else if (e.nodeType) {
-      if (Array.isArray(r)) {
-        if (s) return r = H(t, r, a, e);
-        H(t, r, null, e);
-      } else r == null || r === "" || !t.firstChild ? t.appendChild(e) : t.replaceChild(e, t.firstChild);
-      r = e;
+      if (Array.isArray(n)) {
+        if (s) return n = H(t, n, a, e);
+        H(t, n, null, e);
+      } else n == null || n === "" || !t.firstChild ? t.appendChild(e) : t.replaceChild(e, t.firstChild);
+      n = e;
     }
   }
-  return r;
+  return n;
 }
-function _t(t, e, r, a) {
-  let n = !1;
+function _t(t, e, n, a) {
+  let r = !1;
   for (let o = 0, s = e.length; o < s; o++) {
-    let i = e[o], c = r && r[t.length], f;
+    let i = e[o], c = n && n[t.length], f;
     if (!(i == null || i === !0 || i === !1)) if ((f = typeof i) == "object" && i.nodeType)
       t.push(i);
     else if (Array.isArray(i))
-      n = _t(t, i, c) || n;
+      r = _t(t, i, c) || r;
     else if (f === "function")
       if (a) {
         for (; typeof i == "function"; ) i = i();
-        n = _t(t, Array.isArray(i) ? i : [i], Array.isArray(c) ? c : [c]) || n;
+        r = _t(t, Array.isArray(i) ? i : [i], Array.isArray(c) ? c : [c]) || r;
       } else
-        t.push(i), n = !0;
+        t.push(i), r = !0;
     else {
       const d = String(i);
       c && c.nodeType === 3 && c.data === d ? t.push(c) : t.push(document.createTextNode(d));
     }
   }
-  return n;
+  return r;
 }
-function xt(t, e, r = null) {
-  for (let a = 0, n = e.length; a < n; a++) t.insertBefore(e[a], r);
+function xt(t, e, n = null) {
+  for (let a = 0, r = e.length; a < r; a++) t.insertBefore(e[a], n);
 }
-function H(t, e, r, a) {
-  if (r === void 0) return t.textContent = "";
-  const n = a || document.createTextNode("");
+function H(t, e, n, a) {
+  if (n === void 0) return t.textContent = "";
+  const r = a || document.createTextNode("");
   if (e.length) {
     let o = !1;
     for (let s = e.length - 1; s >= 0; s--) {
       const i = e[s];
-      if (n !== i) {
+      if (r !== i) {
         const c = i.parentNode === t;
-        !o && !s ? c ? t.replaceChild(n, i) : t.insertBefore(n, r) : c && i.remove();
+        !o && !s ? c ? t.replaceChild(r, i) : t.insertBefore(r, n) : c && i.remove();
       } else o = !0;
     }
-  } else t.insertBefore(n, r);
-  return [n];
+  } else t.insertBefore(r, n);
+  return [r];
 }
 function fe(t) {
-  return Object.keys(t).reduce((r, a) => {
-    const n = t[a];
-    return r[a] = Object.assign({}, n), zt(n.value) && !_e(n.value) && !Array.isArray(n.value) && (r[a].value = Object.assign({}, n.value)), Array.isArray(n.value) && (r[a].value = n.value.slice(0)), r;
+  return Object.keys(t).reduce((n, a) => {
+    const r = t[a];
+    return n[a] = Object.assign({}, r), zt(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 de(t) {
-  return t ? Object.keys(t).reduce((r, a) => {
-    const n = t[a];
-    return r[a] = zt(n) && "value" in n ? n : {
-      value: n
-    }, r[a].attribute || (r[a].attribute = pe(a)), r[a].parse = "parse" in r[a] ? r[a].parse : typeof r[a].value != "string", r;
+  return t ? Object.keys(t).reduce((n, a) => {
+    const r = t[a];
+    return n[a] = zt(r) && "value" in r ? r : {
+      value: r
+    }, n[a].attribute || (n[a].attribute = pe(a)), n[a].parse = "parse" in n[a] ? n[a].parse : typeof n[a].value != "string", n;
   }, {}) : {};
 }
 function he(t) {
-  return Object.keys(t).reduce((r, a) => (r[a] = t[a].value, r), {});
+  return Object.keys(t).reduce((n, a) => (n[a] = t[a].value, n), {});
 }
 function ge(t, e) {
-  const r = fe(e);
-  return Object.keys(e).forEach((n) => {
-    const o = r[n], s = t.getAttribute(o.attribute), i = t[n];
-    s != null && (o.value = o.parse ? Lt(s) : s), i != null && (o.value = Array.isArray(i) ? i.slice(0) : i), o.reflect && kt(t, o.attribute, o.value, !!o.parse), Object.defineProperty(t, n, {
+  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 ? Lt(s) : s), i != null && (o.value = Array.isArray(i) ? i.slice(0) : i), o.reflect && kt(t, o.attribute, o.value, !!o.parse), Object.defineProperty(t, r, {
       get() {
         return o.value;
       },
@@ -548,12 +548,12 @@ function ge(t, e) {
         const f = o.value;
         o.value = c, o.reflect && kt(this, o.attribute, o.value, !!o.parse);
         for (let d = 0, l = this.__propertyChangedCallbacks.length; d < l; d++)
-          this.__propertyChangedCallbacks[d](n, c, f);
+          this.__propertyChangedCallbacks[d](r, c, f);
       },
       enumerable: !0,
       configurable: !0
     });
-  }), r;
+  }), n;
 }
 function Lt(t) {
   if (t)
@@ -563,13 +563,13 @@ function Lt(t) {
       return t;
     }
 }
-function kt(t, e, r, a) {
-  if (r == null || r === !1) return t.removeAttribute(e);
-  let n = a ? JSON.stringify(r) : r;
-  t.__updating[e] = !0, n === "true" && (n = ""), t.setAttribute(e, n), Promise.resolve().then(() => delete t.__updating[e]);
+function kt(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 pe(t) {
-  return t.replace(/\.?([A-Z]+)/g, (e, r) => "-" + r.toLowerCase()).replace("_", "-").replace(/^-/, "");
+  return t.replace(/\.?([A-Z]+)/g, (e, n) => "-" + n.toLowerCase()).replace("_", "-").replace(/^-/, "");
 }
 function zt(t) {
   return t != null && (typeof t == "object" || typeof t == "function");
@@ -582,24 +582,24 @@ function be(t) {
 }
 let dt;
 function ve(t, e) {
-  const r = Object.keys(e);
+  const n = Object.keys(e);
   return class extends t {
     static get observedAttributes() {
-      return r.map((n) => e[n].attribute);
+      return n.map((r) => e[r].attribute);
     }
     constructor() {
       super(), this.__initialized = !1, this.__released = !1, this.__releaseCallbacks = [], this.__propertyChangedCallbacks = [], this.__updating = {}, this.props = {};
-      for (let n of r)
-        this[n] = void 0;
+      for (let r of n)
+        this[r] = void 0;
     }
     connectedCallback() {
       if (this.__initialized) return;
       this.__releaseCallbacks = [], this.__propertyChangedCallbacks = [], this.__updating = {}, this.props = ge(this, e);
-      const n = he(this.props), o = this.Component, s = dt;
+      const r = he(this.props), o = this.Component, s = dt;
       try {
-        dt = this, this.__initialized = !0, be(o) ? new o(n, {
+        dt = this, this.__initialized = !0, be(o) ? new o(r, {
           element: this
-        }) : o(n, {
+        }) : o(r, {
           element: this
         });
       } finally {
@@ -609,56 +609,56 @@ function ve(t, e) {
     async disconnectedCallback() {
       if (await Promise.resolve(), this.isConnected) return;
       this.__propertyChangedCallbacks.length = 0;
-      let n = null;
-      for (; n = this.__releaseCallbacks.pop(); ) n(this);
+      let r = null;
+      for (; r = this.__releaseCallbacks.pop(); ) r(this);
       delete this.__initialized, this.__released = !0;
     }
-    attributeChangedCallback(n, o, s) {
-      if (this.__initialized && !this.__updating[n] && (n = this.lookupProp(n), n in e)) {
-        if (s == null && !this[n]) return;
-        this[n] = e[n].parse ? Lt(s) : s;
+    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 ? Lt(s) : s;
       }
     }
-    lookupProp(n) {
+    lookupProp(r) {
       if (e)
-        return r.find((o) => n === o || n === e[o].attribute);
+        return n.find((o) => r === o || r === e[o].attribute);
     }
     get renderRoot() {
       return this.shadowRoot || this.attachShadow({
         mode: "open"
       });
     }
-    addReleaseCallback(n) {
-      this.__releaseCallbacks.push(n);
+    addReleaseCallback(r) {
+      this.__releaseCallbacks.push(r);
     }
-    addPropertyChangedCallback(n) {
-      this.__propertyChangedCallbacks.push(n);
+    addPropertyChangedCallback(r) {
+      this.__propertyChangedCallbacks.push(r);
     }
   };
 }
-function we(t, e = {}, r = {}) {
+function we(t, e = {}, n = {}) {
   const {
     BaseElement: a = HTMLElement,
-    extension: n,
+    extension: r,
     customElements: o = window.customElements
-  } = r;
+  } = n;
   return (s) => {
     let i = o.get(t);
-    return i ? (i.prototype.Component = s, i) : (i = ve(a, de(e)), i.prototype.Component = s, i.prototype.registeredTag = t, o.define(t, i, n), 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 me(t) {
-  const e = Object.keys(t), r = {};
+  const e = Object.keys(t), n = {};
   for (let a = 0; a < e.length; a++) {
-    const [n, o] = j(t[e[a]]);
-    Object.defineProperty(r, e[a], {
-      get: n,
+    const [r, o] = j(t[e[a]]);
+    Object.defineProperty(n, e[a], {
+      get: r,
       set(s) {
         o(() => s);
       }
     });
   }
-  return r;
+  return n;
 }
 function ye(t) {
   if (t.assignedSlot && t.assignedSlot._$owner) return t.assignedSlot._$owner;
@@ -668,43 +668,43 @@ function ye(t) {
   return e && e.assignedSlot ? e.assignedSlot._$owner : t._$owner;
 }
 function xe(t) {
-  return (e, r) => {
-    const { element: a } = r;
-    return tt((n) => {
+  return (e, n) => {
+    const { element: a } = n;
+    return tt((r) => {
       const o = me(e);
       a.addPropertyChangedCallback((i, c) => o[i] = c), a.addReleaseCallback(() => {
-        a.renderRoot.textContent = "", n();
+        a.renderRoot.textContent = "", r();
       });
-      const s = t(o, r);
+      const s = t(o, n);
       return p(a.renderRoot, s);
     }, ye(a));
   };
 }
-function ke(t, e, r) {
-  return arguments.length === 2 && (r = e, e = {}), we(t, e)(xe(r));
+function ke(t, e, n) {
+  return arguments.length === 2 && (n = e, e = {}), we(t, e)(xe(n));
 }
 function D(t) {
-  const [e, r] = j(t.peek(), { equals: !1 }), a = t.subscribe((n) => r(() => n));
+  const [e, n] = j(t.peek(), { equals: !1 }), a = t.subscribe((r) => n(() => r));
   return ut(() => a()), e;
 }
 const st = Jt();
 function Ce(t) {
-  const [e, r] = j("no-url"), [a, n] = j(!1), o = D(t.moqWatch.audio.muted), [s, i] = j(0), c = D(t.moqWatch.video.stalled), f = D(t.moqWatch.jitter), [d, l] = j([]), M = D(t.moqWatch.video.source.track), [$, _] = j(!1), [h, E] = j(!!document.fullscreenElement), P = () => {
-    t.moqWatch.paused.set(!t.moqWatch.paused.get());
+  const [e, n] = j("no-url"), [a, r] = j(!1), o = D(t.moqWatch.backend.audio.muted), [s, i] = j(0), c = D(t.moqWatch.backend.video.stalled), f = D(t.moqWatch.backend.jitter), [d, l] = j([]), M = D(t.moqWatch.backend.video.source.track), [$, _] = j(!1), [h, E] = j(!!document.fullscreenElement), P = () => {
+    t.moqWatch.paused = !t.moqWatch.paused;
   }, b = () => {
     document.fullscreenElement ? document.exitFullscreen() : t.moqWatch.requestFullscreen();
   }, v = (S) => {
-    t.moqWatch.audio.volume.set(S / 100);
+    t.moqWatch.backend.audio.volume.set(S / 100);
   }, m = () => {
-    t.moqWatch.audio.muted.update((S) => !S);
+    t.moqWatch.backend.audio.muted.update((S) => !S);
   }, q = (S) => {
-    t.moqWatch.jitter.set(S);
+    t.moqWatch.jitter = S;
   }, B = (S) => {
-    t.moqWatch.video.source.target.update((N) => ({
+    t.moqWatch.backend.video.source.target.update((N) => ({
       ...N,
       name: S
     }));
-  }, y = D(t.moqWatch.video.timestamp), O = D(t.moqWatch.video.buffered), I = D(t.moqWatch.audio.buffered), x = {
+  }, y = D(t.moqWatch.backend.video.timestamp), O = D(t.moqWatch.backend.video.buffered), I = D(t.moqWatch.backend.audio.buffered), x = {
     moqWatch: t.moqWatch,
     watchStatus: e,
     togglePlayback: P,
@@ -729,15 +729,15 @@ function Ce(t) {
   }, C = t.moqWatch, k = new It.Effect();
   k.run((S) => {
     const N = S.get(C.connection.url), J = S.get(C.connection.status), Q = S.get(C.broadcast.status);
-    N ? J === "disconnected" ? r("disconnected") : J === "connecting" ? r("connecting") : Q === "offline" ? r("offline") : Q === "loading" ? r("loading") : Q === "live" ? r("live") : J === "connected" && r("connected") : r("no-url");
+    N ? J === "disconnected" ? n("disconnected") : J === "connecting" ? n("connecting") : Q === "offline" ? n("offline") : Q === "loading" ? n("loading") : Q === "live" ? n("live") : J === "connected" && n("connected") : n("no-url");
   }), k.run((S) => {
-    const N = S.get(C.paused);
-    n(!N);
+    const N = S.get(C.backend.paused);
+    r(!N);
   }), k.run((S) => {
-    const N = S.get(C.audio.volume);
+    const N = S.get(C.backend.audio.volume);
     i(N * 100);
   }), k.run((S) => {
-    const J = S.get(C.video.source.catalog)?.renditions ?? {}, Q = Object.entries(J).map(([Rt, vt]) => ({
+    const J = S.get(C.backend.video.source.catalog)?.renditions ?? {}, Q = Object.entries(J).map(([Rt, vt]) => ({
       name: Rt,
       width: vt.codedWidth,
       height: vt.codedHeight
@@ -775,25 +775,25 @@ function $e() {
 var Ae = /* @__PURE__ */ W('<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></div><div class="watch-ui__buffer-track watch-ui__buffer-track--audio"><span class=watch-ui__buffer-track-label>Audio</span></div><div class=watch-ui__buffer-target-area><div class=watch-ui__buffer-target-line><span class=watch-ui__buffer-target-label>'), Ct = /* @__PURE__ */ W("<span class=watch-ui__buffer-overflow-label>s"), St = /* @__PURE__ */ W("<div class=watch-ui__buffer-range>");
 const $t = 0, At = 100;
 function Ee(t) {
-  const e = K(), r = () => t.max ?? 5e3, [a, n] = j(!1), o = (_, h, E) => {
-    const P = _.start - h, b = _.end - h, v = Math.max(0, P), m = Math.min(b, r()), q = v / r() * 100, B = Math.max(0.5, (m - v) / r() * 100), y = b > r(), O = y ? Nt.Time.Milli.toSecond(b - v).toFixed(1) : null;
+  const e = K(), n = () => t.max ?? 5e3, [a, r] = j(!1), o = (_, h, E) => {
+    const P = _.start - h, b = _.end - h, v = Math.max(0, P), m = Math.min(b, n()), q = v / n() * 100, B = Math.max(0.5, (m - v) / n() * 100), y = b > n(), O = y ? Nt.Time.Milli.toSecond(b - v).toFixed(1) : null;
     return {
       style: `left: ${q}%; width: ${B}%; background: ${E};`,
       isOverflow: y,
       overflowSec: O
     };
-  }, s = (_, h) => h ? "#f87171" : _ > 0 ? "#facc15" : "#4ade80", i = U(() => e.jitter() / r() * 100);
+  }, s = (_, h) => h ? "#f87171" : _ > 0 ? "#facc15" : "#4ade80", i = U(() => e.jitter() / n() * 100);
   let c;
   const f = 48, d = (_) => {
     if (!c) return;
-    const h = c.getBoundingClientRect(), E = h.width - f, b = Math.max(0, Math.min(_ - h.left - f, E)) / E * r(), v = Math.round(b / At) * At, m = Math.max($t, Math.min(r(), v));
+    const h = c.getBoundingClientRect(), E = h.width - f, b = Math.max(0, Math.min(_ - h.left - f, E)) / E * n(), v = Math.round(b / At) * At, m = Math.max($t, Math.min(n(), v));
     e.setJitter(m);
   }, l = (_) => {
-    n(!0), d(_.clientX), document.addEventListener("mousemove", M), document.addEventListener("mouseup", $);
+    r(!0), d(_.clientX), document.addEventListener("mousemove", M), document.addEventListener("mouseup", $);
   }, M = (_) => {
     a() && d(_.clientX);
   }, $ = () => {
-    n(!1), document.removeEventListener("mousemove", M), document.removeEventListener("mouseup", $);
+    r(!1), document.removeEventListener("mousemove", M), document.removeEventListener("mouseup", $);
   };
   return ut(() => {
     document.removeEventListener("mousemove", M), document.removeEventListener("mouseup", $);
@@ -860,7 +860,7 @@ function Ee(t) {
         });
       }
     }), null), p(q, () => `${Math.round(e.jitter())}ms`), T((y) => {
-      var O = `watch-ui__buffer-visualization ${a() ? "watch-ui__buffer-visualization--dragging" : ""}`, I = e.jitter(), x = r(), C = `${i()}%`;
+      var O = `watch-ui__buffer-visualization ${a() ? "watch-ui__buffer-visualization--dragging" : ""}`, I = e.jitter(), x = n(), C = `${i()}%`;
       return O !== y.e && pt(h, y.e = O), I !== y.t && et(h, "aria-valuenow", y.t = I), x !== y.a && et(h, "aria-valuemax", y.a = x), C !== y.o && le(m, "left", y.o = C), y;
     }, {
       e: void 0,
@@ -920,13 +920,13 @@ function Me() {
 }
 var qe = /* @__PURE__ */ W("<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__ */ W("<option>");
 function Te() {
-  const t = K(), e = (r) => {
-    const a = r.currentTarget.value || void 0;
+  const t = K(), e = (n) => {
+    const a = n.currentTarget.value || void 0;
     t.setActiveRendition(a);
   };
   return (() => {
-    var r = qe(), a = r.firstChild, n = a.nextSibling;
-    return n.firstChild, n.addEventListener("change", e), p(n, u(gt, {
+    var n = qe(), a = n.firstChild, r = a.nextSibling;
+    return r.firstChild, r.addEventListener("change", e), p(r, u(gt, {
       get each() {
         return t.availableRenditions() ?? [];
       },
@@ -937,7 +937,7 @@ function Te() {
           return () => i() ? ` (${o.width}x${o.height})` : "";
         })(), null), T(() => s.value = o.name), s;
       })()
-    }), null), T(() => n.value = t.activeRendition() ?? ""), r;
+    }), null), T(() => r.value = t.activeRendition() ?? ""), n;
   })();
 }
 function We() {
@@ -957,24 +957,24 @@ function We() {
 var Oe = /* @__PURE__ */ W('<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 ? u(V.Mute, {}) : t > 0 && t <= 33 ? u(V.VolumeLow, {}) : t > 33 && t <= 66 ? u(V.VolumeMedium, {}) : u(V.VolumeHigh, {});
 function Le() {
-  const [t, e] = j(0), r = K(), a = (n) => {
-    const o = n.currentTarget, s = parseFloat(o.value);
-    r.setVolume(s);
+  const [t, e] = j(0), n = K(), a = (r) => {
+    const o = r.currentTarget, s = parseFloat(o.value);
+    n.setVolume(s);
   };
   return Mt(() => {
-    const n = r.currentVolume() || 0;
-    e(Math.round(n));
+    const r = n.currentVolume() || 0;
+    e(Math.round(r));
   }), (() => {
-    var n = Oe(), o = n.firstChild, s = o.nextSibling;
-    return p(n, u(lt, {
+    var r = Oe(), o = r.firstChild, s = o.nextSibling;
+    return p(r, u(lt, {
       get title() {
-        return r.isMuted() ? "Unmute" : "Mute";
+        return n.isMuted() ? "Unmute" : "Mute";
       },
-      onClick: () => r.toggleMuted(),
+      onClick: () => n.toggleMuted(),
       get children() {
-        return Ve(r.currentVolume(), r.isMuted());
+        return Ve(n.currentVolume(), n.isMuted());
       }
-    }), o), o.addEventListener("change", a), p(s, t), T(() => o.value = r.currentVolume()), n;
+    }), o), o.addEventListener("change", a), p(s, t), T(() => o.value = n.currentVolume()), r;
   })();
 }
 var ze = /* @__PURE__ */ W('<div class="watch-ui__status-indicator flex--center"><span></span><span>');
@@ -1013,25 +1013,25 @@ const Re = {
 };
 function Ie() {
   const t = K(), e = () => {
-    const r = t.watchStatus();
-    return Re[r] || Be;
+    const n = t.watchStatus();
+    return Re[n] || Be;
   };
   return (() => {
-    var r = ze(), a = r.firstChild, n = a.nextSibling;
-    return p(n, () => e().text), T((o) => {
+    var n = ze(), a = n.firstChild, r = a.nextSibling;
+    return p(r, () => e().text), T((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 && pt(a, o.e = s), i !== o.t && pt(n, o.t = i), o;
+      return s !== o.e && pt(a, o.e = s), i !== o.t && pt(r, o.t = i), o;
     }, {
       e: void 0,
       t: void 0
-    }), r;
+    }), n;
   })();
 }
 var Ne = /* @__PURE__ */ W('<div class=watch-ui__controls><div class="watch-ui__playback-controls flex--align-center"></div><div class=watch-ui__latency-controls>');
 function Ue() {
   return (() => {
-    var t = Ne(), e = t.firstChild, r = e.nextSibling;
-    return p(e, u(Me, {}), null), p(e, u(Le, {}), null), p(e, u(Ie, {}), null), p(e, u(We, {}), null), p(e, u(Pe, {}), null), p(r, u(Ee, {}), null), p(r, u(Te, {}), null), t;
+    var t = Ne(), e = t.firstChild, n = e.nextSibling;
+    return p(e, u(Me, {}), null), p(e, u(Le, {}), null), p(e, u(Ie, {}), null), p(e, u(We, {}), null), p(e, u(Pe, {}), null), p(n, u(Ee, {}), null), p(n, u(Te, {}), null), t;
   })();
 }
 const Fe = ':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-range{position:absolute;display:flex;align-items:center;justify-content:flex-end;top:var(--spacing-2);height:calc(100% - var(--spacing-4));border-radius:var(--spacing-2);min-width:var(--spacing-2);opacity:.85;overflow:hidden}.watch-ui__buffer-overflow-label{font-size:.5625rem;font-weight:500;color:var(--color-black-alpha-70);padding-right:var(--spacing-4)}.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}}';
@@ -1046,8 +1046,8 @@ function He(t) {
         var e = Ke();
         return p(e, Fe), e;
       })(), (() => {
-        var e = De(), r = e.firstChild;
-        return r._$owner = Gt(), p(e, () => {
+        var e = De(), n = e.firstChild;
+        return n._$owner = Gt(), p(e, () => {
           const a = qt(st);
           return a ? u(L, {
             get when() {
@@ -1056,7 +1056,7 @@ function He(t) {
             get children() {
               return u(Bt, {
                 context: st,
-                getElement: (n) => n?.moqWatch
+                getElement: (r) => r?.moqWatch.backend
               });
             }
           }) : null;
@@ -1068,18 +1068,18 @@ function He(t) {
 ke("moq-watch-ui", (t, {
   element: e
 }) => {
-  const [r, a] = j();
+  const [n, a] = j();
   return Ht(async () => {
     await customElements.whenDefined("moq-watch");
-    const n = e.querySelector("moq-watch");
-    a(n || void 0);
+    const r = e.querySelector("moq-watch");
+    a(r || void 0);
   }), u(L, {
     get when() {
-      return r();
+      return n();
     },
     keyed: !0,
-    children: (n) => u(He, {
-      watch: n
+    children: (r) => u(He, {
+      watch: r
     })
   });
 });