@moq/publish 0.1.0 → 0.2.0

package/ui/index.js

@@ -2,7 +2,7 @@ import { Button as R, Icon as j } from "@moq/ui-core";
 const $e = !1, Ee = (e, t) => e === t, qe = /* @__PURE__ */ Symbol("solid-track"), Z = {
   equals: Ee
 };
-let he = _e;
+let fe = _e;
 const I = 1, X = 2, pe = {
   owned: null,
   cleanups: null,
@@ -12,17 +12,17 @@ const I = 1, X = 2, pe = {
 var g = null;
 let ne = null, Oe = null, v = null, y = null, q = null, re = 0;
 function W(e, t) {
-  const r = v, o = g, n = e.length === 0, i = t === void 0 ? o : t, l = n ? pe : {
+  const r = v, n = g, o = e.length === 0, i = t === void 0 ? n : t, l = o ? pe : {
     owned: null,
     cleanups: null,
     context: i ? i.context : null,
     owner: i
-  }, s = n ? e : () => e(() => O(() => D(l)));
+  }, s = o ? e : () => e(() => O(() => D(l)));
   g = l, v = null;
   try {
     return G(s, !0);
   } finally {
-    v = r, g = o;
+    v = r, g = n;
   }
 }
 function x(e, t) {
@@ -32,22 +32,22 @@ function x(e, t) {
     observers: null,
     observerSlots: null,
     comparator: t.equals || void 0
-  }, o = (n) => (typeof n == "function" && (n = n(r.value)), ve(r, n));
-  return [ge.bind(r), o];
+  }, n = (o) => (typeof o == "function" && (o = o(r.value)), ve(r, o));
+  return [ge.bind(r), n];
 }
 function U(e, t, r) {
-  const o = ae(e, t, !1, I);
-  H(o);
+  const n = ae(e, t, !1, I);
+  H(n);
 }
 function be(e, t, r) {
-  he = Fe;
-  const o = ae(e, t, !1, I);
-  o.user = !0, q ? q.push(o) : H(o);
+  fe = Fe;
+  const n = ae(e, t, !1, I);
+  n.user = !0, q ? q.push(n) : H(n);
 }
 function T(e, t, r) {
   r = r ? Object.assign({}, Z, r) : Z;
-  const o = ae(e, t, !0, 0);
-  return o.observers = null, o.observerSlots = null, o.comparator = r.equals || void 0, H(o), ge.bind(o);
+  const n = ae(e, t, !0, 0);
+  return n.observers = null, n.observerSlots = null, n.comparator = r.equals || void 0, H(n), ge.bind(n);
 }
 function O(e) {
   if (v === null) return e();
@@ -83,8 +83,8 @@ function je(e) {
 function Ue(e) {
   const t = T(e), r = T(() => se(t()));
   return r.toArray = () => {
-    const o = r();
-    return Array.isArray(o) ? o : o != null ? [o] : [];
+    const n = r();
+    return Array.isArray(n) ? n : n != null ? [n] : [];
   }, r;
 }
 function ge() {
@@ -101,10 +101,10 @@ function ge() {
   return this.value;
 }
 function ve(e, t, r) {
-  let o = e.value;
-  return (!e.comparator || !e.comparator(o, t)) && (e.value = t, e.observers && e.observers.length && G(() => {
-    for (let n = 0; n < e.observers.length; n += 1) {
-      const i = e.observers[n], l = ne && ne.running;
+  let n = e.value;
+  return (!e.comparator || !e.comparator(n, t)) && (e.value = t, e.observers && e.observers.length && G(() => {
+    for (let o = 0; o < e.observers.length; o += 1) {
+      const i = e.observers[o], l = ne && ne.running;
       l && ne.disposed.has(i), (l ? !i.tState : !i.state) && (i.pure ? y.push(i) : q.push(i), i.observers && me(i)), l || (i.state = I);
     }
     if (y.length > 1e6)
@@ -118,22 +118,22 @@ function H(e) {
   Be(e, e.value, t);
 }
 function Be(e, t, r) {
-  let o;
-  const n = g, i = v;
+  let n;
+  const o = g, i = v;
   v = g = e;
   try {
-    o = e.fn(t);
+    n = e.fn(t);
   } catch (l) {
     return e.pure && (e.state = I, e.owned && e.owned.forEach(D), e.owned = null), e.updatedAt = r + 1, we(l);
   } finally {
-    v = i, g = n;
+    v = i, g = o;
   }
-  (!e.updatedAt || e.updatedAt <= r) && (e.updatedAt != null && "observers" in e ? ve(e, o) : e.value = o, e.updatedAt = r);
+  (!e.updatedAt || e.updatedAt <= r) && (e.updatedAt != null && "observers" in e ? ve(e, n) : e.value = n, e.updatedAt = r);
 }
-function ae(e, t, r, o = I, n) {
+function ae(e, t, r, n = I, o) {
   const i = {
     fn: e,
-    state: o,
+    state: n,
     updatedAt: null,
     owned: null,
     sources: null,
@@ -157,8 +157,8 @@ function Y(e) {
     if (e = t[r], e.state === I)
       H(e);
     else if (e.state === X) {
-      const o = y;
-      y = null, G(() => ee(e, t[0]), !1), y = o;
+      const n = y;
+      y = null, G(() => ee(e, t[0]), !1), y = n;
     }
 }
 function G(e, t) {
@@ -166,16 +166,16 @@ function G(e, t) {
   let r = !1;
   t || (y = []), q ? r = !0 : q = [], re++;
   try {
-    const o = e();
-    return Le(r), o;
-  } catch (o) {
-    r || (q = null), y = null, we(o);
+    const n = e();
+    return Le(r), n;
+  } catch (n) {
+    r || (q = null), y = null, we(n);
   }
 }
 function Le(e) {
   if (y && (_e(y), y = null), e) return;
   const t = q;
-  q = null, t.length && G(() => he(t), !1);
+  q = null, t.length && G(() => fe(t), !1);
 }
 function _e(e) {
   for (let t = 0; t < e.length; t++) Y(e[t]);
@@ -183,18 +183,18 @@ function _e(e) {
 function Fe(e) {
   let t, r = 0;
   for (t = 0; t < e.length; t++) {
-    const o = e[t];
-    o.user ? e[r++] = o : Y(o);
+    const n = e[t];
+    n.user ? e[r++] = n : Y(n);
   }
   for (t = 0; t < r; t++) Y(e[t]);
 }
 function ee(e, t) {
   e.state = 0;
   for (let r = 0; r < e.sources.length; r += 1) {
-    const o = e.sources[r];
-    if (o.sources) {
-      const n = o.state;
-      n === I ? o !== t && (!o.updatedAt || o.updatedAt < re) && Y(o) : n === X && ee(o, t);
+    const n = e.sources[r];
+    if (n.sources) {
+      const o = n.state;
+      o === I ? n !== t && (!n.updatedAt || n.updatedAt < re) && Y(n) : o === X && ee(n, t);
     }
   }
 }
@@ -208,10 +208,10 @@ function D(e) {
   let t;
   if (e.sources)
     for (; e.sources.length; ) {
-      const r = e.sources.pop(), o = e.sourceSlots.pop(), n = r.observers;
-      if (n && n.length) {
-        const i = n.pop(), l = r.observerSlots.pop();
-        o < n.length && (i.sourceSlots[l] = o, n[o] = i, r.observerSlots[o] = l);
+      const r = e.sources.pop(), n = e.sourceSlots.pop(), o = r.observers;
+      if (o && o.length) {
+        const i = o.pop(), l = r.observerSlots.pop();
+        n < o.length && (i.sourceSlots[l] = n, o[n] = i, r.observerSlots[n] = l);
       }
     }
   if (e.tOwned) {
@@ -241,20 +241,20 @@ function se(e) {
   if (Array.isArray(e)) {
     const t = [];
     for (let r = 0; r < e.length; r++) {
-      const o = se(e[r]);
-      Array.isArray(o) ? t.push.apply(t, o) : t.push(o);
+      const n = se(e[r]);
+      Array.isArray(n) ? t.push.apply(t, n) : t.push(n);
     }
     return t;
   }
   return e;
 }
 function ze(e, t) {
-  return function(o) {
-    let n;
-    return U(() => n = O(() => (g.context = {
+  return function(n) {
+    let o;
+    return U(() => o = O(() => (g.context = {
       ...g.context,
-      [e]: o.value
-    }, Ue(() => o.children))), void 0), n;
+      [e]: n.value
+    }, Ue(() => n.children))), void 0), o;
   };
 }
 const Ke = /* @__PURE__ */ Symbol("fallback");
@@ -262,30 +262,30 @@ function ce(e) {
   for (let t = 0; t < e.length; t++) e[t]();
 }
 function De(e, t, r = {}) {
-  let o = [], n = [], i = [], l = 0, s = t.length > 1 ? [] : null;
+  let n = [], o = [], i = [], l = 0, s = t.length > 1 ? [] : null;
   return Ne(() => ce(i)), () => {
     let u = e() || [], p = u.length, c, a;
     return u[qe], O(() => {
       let S, $, E, B, L, C, A, m, M;
       if (p === 0)
-        l !== 0 && (ce(i), i = [], o = [], n = [], l = 0, s && (s = [])), r.fallback && (o = [Ke], n[0] = W((oe) => (i[0] = oe, r.fallback())), l = 1);
+        l !== 0 && (ce(i), i = [], n = [], o = [], l = 0, s && (s = [])), r.fallback && (n = [Ke], o[0] = W((oe) => (i[0] = oe, r.fallback())), l = 1);
       else if (l === 0) {
-        for (n = new Array(p), a = 0; a < p; a++)
-          o[a] = u[a], n[a] = W(k);
+        for (o = new Array(p), a = 0; a < p; a++)
+          n[a] = u[a], o[a] = W(k);
         l = p;
       } else {
-        for (E = new Array(p), B = new Array(p), s && (L = new Array(p)), C = 0, A = Math.min(l, p); C < A && o[C] === u[C]; C++) ;
-        for (A = l - 1, m = p - 1; A >= C && m >= C && o[A] === u[m]; A--, m--)
-          E[m] = n[A], B[m] = i[A], s && (L[m] = s[A]);
+        for (E = new Array(p), B = new Array(p), s && (L = new Array(p)), C = 0, A = Math.min(l, p); C < A && n[C] === u[C]; C++) ;
+        for (A = l - 1, m = p - 1; A >= C && m >= C && n[A] === u[m]; A--, m--)
+          E[m] = o[A], B[m] = i[A], s && (L[m] = s[A]);
         for (S = /* @__PURE__ */ new Map(), $ = new Array(m + 1), a = m; a >= C; a--)
           M = u[a], c = S.get(M), $[a] = c === void 0 ? -1 : c, S.set(M, a);
         for (c = C; c <= A; c++)
-          M = o[c], a = S.get(M), a !== void 0 && a !== -1 ? (E[a] = n[c], B[a] = i[c], s && (L[a] = s[c]), a = $[a], S.set(M, a)) : i[c]();
+          M = n[c], a = S.get(M), a !== void 0 && a !== -1 ? (E[a] = o[c], B[a] = i[c], s && (L[a] = s[c]), a = $[a], S.set(M, a)) : i[c]();
         for (a = C; a < p; a++)
-          a in E ? (n[a] = E[a], i[a] = B[a], s && (s[a] = L[a], s[a](a))) : n[a] = W(k);
-        n = n.slice(0, l = p), o = u.slice(0);
+          a in E ? (o[a] = E[a], i[a] = B[a], s && (s[a] = L[a], s[a](a))) : o[a] = W(k);
+        o = o.slice(0, l = p), n = u.slice(0);
       }
-      return n;
+      return o;
     });
     function k(S) {
       if (i[a] = S, s) {
@@ -296,7 +296,7 @@ function De(e, t, r = {}) {
     }
   };
 }
-function f(e, t) {
+function h(e, t) {
   return O(() => e(t || {}));
 }
 const Ve = (e) => `Stale read from <${e}>.`;
@@ -307,15 +307,15 @@ function He(e) {
   return T(De(() => e.each, e.children, t || void 0));
 }
 function V(e) {
-  const t = e.keyed, r = T(() => e.when, void 0, void 0), o = t ? r : T(r, void 0, {
-    equals: (n, i) => !n == !i
+  const t = e.keyed, r = T(() => e.when, void 0, void 0), n = t ? r : T(r, void 0, {
+    equals: (o, i) => !o == !i
   });
   return T(() => {
-    const n = o();
-    if (n) {
+    const o = n();
+    if (o) {
       const i = e.children;
-      return typeof i == "function" && i.length > 0 ? O(() => i(t ? n : () => {
-        if (!O(o)) throw Ve("Show");
+      return typeof i == "function" && i.length > 0 ? O(() => i(t ? o : () => {
+        if (!O(n)) throw Ve("Show");
         return r();
       })) : i;
     }
@@ -324,23 +324,23 @@ function V(e) {
 }
 const ye = (e) => T(() => e());
 function Ge(e, t, r) {
-  let o = r.length, n = t.length, i = o, l = 0, s = 0, u = t[n - 1].nextSibling, p = null;
-  for (; l < n || s < i; ) {
+  let n = r.length, o = t.length, i = n, l = 0, s = 0, u = t[o - 1].nextSibling, p = null;
+  for (; l < o || s < i; ) {
     if (t[l] === r[s]) {
       l++, s++;
       continue;
     }
-    for (; t[n - 1] === r[i - 1]; )
-      n--, i--;
-    if (n === l) {
-      const c = i < o ? s ? r[s - 1].nextSibling : r[i - s] : u;
+    for (; t[o - 1] === r[i - 1]; )
+      o--, i--;
+    if (o === l) {
+      const c = i < n ? s ? r[s - 1].nextSibling : r[i - s] : u;
       for (; s < i; ) e.insertBefore(r[s++], c);
     } else if (i === s)
-      for (; l < n; )
+      for (; l < o; )
         (!p || !p.has(t[l])) && t[l].remove(), l++;
-    else if (t[l] === r[i - 1] && r[s] === t[n - 1]) {
-      const c = t[--n].nextSibling;
-      e.insertBefore(r[s++], t[l++].nextSibling), e.insertBefore(r[--i], c), t[n] = r[i];
+    else if (t[l] === r[i - 1] && r[s] === t[o - 1]) {
+      const c = t[--o].nextSibling;
+      e.insertBefore(r[s++], t[l++].nextSibling), e.insertBefore(r[--i], c), t[o] = r[i];
     } else {
       if (!p) {
         p = /* @__PURE__ */ new Map();
@@ -351,7 +351,7 @@ function Ge(e, t, r) {
       if (c != null)
         if (s < c && c < i) {
           let a = l, k = 1, S;
-          for (; ++a < n && a < i && !((S = p.get(t[a])) == null || S !== c + k); )
+          for (; ++a < o && a < i && !((S = p.get(t[a])) == null || S !== c + k); )
             k++;
           if (k > c - s) {
             const $ = t[l];
@@ -362,12 +362,12 @@ function Ge(e, t, r) {
     }
   }
 }
-function P(e, t, r, o) {
-  let n;
+function P(e, t, r, n) {
+  let o;
   const i = () => {
     const s = document.createElement("template");
     return s.innerHTML = e, s.content.firstChild;
-  }, l = () => (n || (n = i())).cloneNode(!0);
+  }, l = () => (o || (o = i())).cloneNode(!0);
   return l.cloneNode = l, l;
 }
 function ue(e, t) {
@@ -376,42 +376,42 @@ function ue(e, t) {
 function Je(e, t, r) {
   return O(() => e(t, r));
 }
-function w(e, t, r, o) {
-  if (r !== void 0 && !o && (o = []), typeof t != "function") return te(e, t, o, r);
-  U((n) => te(e, t(), n, r), o);
+function w(e, t, r, n) {
+  if (r !== void 0 && !n && (n = []), typeof t != "function") return te(e, t, n, r);
+  U((o) => te(e, t(), o, r), n);
 }
-function te(e, t, r, o, n) {
+function te(e, t, r, n, o) {
   for (; typeof r == "function"; ) r = r();
   if (t === r) return r;
-  const i = typeof t, l = o !== void 0;
+  const i = typeof t, l = n !== void 0;
   if (e = l && r[0] && r[0].parentNode || e, i === "string" || i === "number") {
     if (i === "number" && (t = t.toString(), t === r))
       return r;
     if (l) {
       let s = r[0];
-      s && s.nodeType === 3 ? s.data !== t && (s.data = t) : s = document.createTextNode(t), r = F(e, r, o, s);
+      s && s.nodeType === 3 ? s.data !== t && (s.data = t) : s = document.createTextNode(t), r = F(e, r, n, s);
     } else
       r !== "" && typeof r == "string" ? r = e.firstChild.data = t : r = e.textContent = t;
   } else if (t == null || i === "boolean")
-    r = F(e, r, o);
+    r = F(e, r, n);
   else {
     if (i === "function")
       return U(() => {
         let s = t();
         for (; typeof s == "function"; ) s = s();
-        r = te(e, s, r, o);
+        r = te(e, s, r, n);
       }), () => r;
     if (Array.isArray(t)) {
       const s = [], u = r && Array.isArray(r);
-      if (le(s, t, r, n))
-        return U(() => r = te(e, s, r, o, !0)), () => r;
+      if (le(s, t, r, o))
+        return U(() => r = te(e, s, r, n, !0)), () => r;
       if (s.length === 0) {
-        if (r = F(e, r, o), l) return r;
-      } else u ? r.length === 0 ? de(e, s, o) : Ge(e, r, s) : (r && F(e), de(e, s));
+        if (r = F(e, r, n), l) return r;
+      } else u ? r.length === 0 ? de(e, s, n) : Ge(e, r, s) : (r && F(e), de(e, s));
       r = s;
     } else if (t.nodeType) {
       if (Array.isArray(r)) {
-        if (l) return r = F(e, r, o, t);
+        if (l) return r = F(e, r, n, t);
         F(e, r, null, t);
       } else r == null || r === "" || !e.firstChild ? e.appendChild(t) : e.replaceChild(t, e.firstChild);
       r = t;
@@ -419,75 +419,75 @@ function te(e, t, r, o, n) {
   }
   return r;
 }
-function le(e, t, r, o) {
-  let n = !1;
+function le(e, t, r, n) {
+  let o = !1;
   for (let i = 0, l = t.length; i < l; i++) {
     let s = t[i], u = r && r[e.length], p;
     if (!(s == null || s === !0 || s === !1)) if ((p = typeof s) == "object" && s.nodeType)
       e.push(s);
     else if (Array.isArray(s))
-      n = le(e, s, u) || n;
+      o = le(e, s, u) || o;
     else if (p === "function")
-      if (o) {
+      if (n) {
         for (; typeof s == "function"; ) s = s();
-        n = le(e, Array.isArray(s) ? s : [s], Array.isArray(u) ? u : [u]) || n;
+        o = le(e, Array.isArray(s) ? s : [s], Array.isArray(u) ? u : [u]) || o;
       } else
-        e.push(s), n = !0;
+        e.push(s), o = !0;
     else {
       const c = String(s);
       u && u.nodeType === 3 && u.data === c ? e.push(u) : e.push(document.createTextNode(c));
     }
   }
-  return n;
+  return o;
 }
 function de(e, t, r = null) {
-  for (let o = 0, n = t.length; o < n; o++) e.insertBefore(t[o], r);
+  for (let n = 0, o = t.length; n < o; n++) e.insertBefore(t[n], r);
 }
-function F(e, t, r, o) {
+function F(e, t, r, n) {
   if (r === void 0) return e.textContent = "";
-  const n = o || document.createTextNode("");
+  const o = n || document.createTextNode("");
   if (t.length) {
     let i = !1;
     for (let l = t.length - 1; l >= 0; l--) {
       const s = t[l];
-      if (n !== s) {
+      if (o !== s) {
         const u = s.parentNode === e;
-        !i && !l ? u ? e.replaceChild(n, s) : e.insertBefore(n, r) : u && s.remove();
+        !i && !l ? u ? e.replaceChild(o, s) : e.insertBefore(o, r) : u && s.remove();
       } else i = !0;
     }
-  } else e.insertBefore(n, r);
-  return [n];
+  } else e.insertBefore(o, r);
+  return [o];
 }
 function Qe(e) {
-  return Object.keys(e).reduce((r, o) => {
-    const n = e[o];
-    return r[o] = Object.assign({}, n), Se(n.value) && !et(n.value) && !Array.isArray(n.value) && (r[o].value = Object.assign({}, n.value)), Array.isArray(n.value) && (r[o].value = n.value.slice(0)), r;
+  return Object.keys(e).reduce((r, n) => {
+    const o = e[n];
+    return r[n] = Object.assign({}, o), Se(o.value) && !et(o.value) && !Array.isArray(o.value) && (r[n].value = Object.assign({}, o.value)), Array.isArray(o.value) && (r[n].value = o.value.slice(0)), r;
   }, {});
 }
 function We(e) {
-  return e ? Object.keys(e).reduce((r, o) => {
-    const n = e[o];
-    return r[o] = Se(n) && "value" in n ? n : {
-      value: n
-    }, r[o].attribute || (r[o].attribute = Ye(o)), r[o].parse = "parse" in r[o] ? r[o].parse : typeof r[o].value != "string", r;
+  return e ? Object.keys(e).reduce((r, n) => {
+    const o = e[n];
+    return r[n] = Se(o) && "value" in o ? o : {
+      value: o
+    }, r[n].attribute || (r[n].attribute = Ye(n)), r[n].parse = "parse" in r[n] ? r[n].parse : typeof r[n].value != "string", r;
   }, {}) : {};
 }
 function Ze(e) {
-  return Object.keys(e).reduce((r, o) => (r[o] = e[o].value, r), {});
+  return Object.keys(e).reduce((r, n) => (r[n] = e[n].value, r), {});
 }
 function Xe(e, t) {
   const r = Qe(t);
-  return Object.keys(t).forEach((n) => {
-    const i = r[n], l = e.getAttribute(i.attribute), s = e[n];
-    l != null && (i.value = i.parse ? xe(l) : l), s != null && (i.value = Array.isArray(s) ? s.slice(0) : s), i.reflect && fe(e, i.attribute, i.value, !!i.parse), Object.defineProperty(e, n, {
+  return Object.keys(t).forEach((o) => {
+    const i = r[o], l = e.getAttribute(i.attribute), s = e[o];
+    l != null && (i.value = i.parse ? xe(l) : l), s != null && (i.value = Array.isArray(s) ? s.slice(0) : s), i.reflect && he(e, i.attribute, i.value, !!i.parse), Object.defineProperty(e, o, {
       get() {
         return i.value;
       },
       set(u) {
         const p = i.value;
-        i.value = u, i.reflect && fe(this, i.attribute, i.value, !!i.parse);
+        i.value = u, i.reflect && he(this, i.attribute, i.value, !!i.parse);
         for (let c = 0, a = this.__propertyChangedCallbacks.length; c < a; c++)
-          this.__propertyChangedCallbacks[c](n, u, p);
+          this.__propertyChangedCallbacks[c](o, u, p);
       },
       enumerable: !0,
       configurable: !0
@@ -502,10 +502,10 @@ function xe(e) {
       return e;
     }
 }
-function fe(e, t, r, o) {
+function he(e, t, r, n) {
   if (r == null || r === !1) return e.removeAttribute(t);
-  let n = o ? JSON.stringify(r) : r;
-  e.__updating[t] = !0, n === "true" && (n = ""), e.setAttribute(t, n), Promise.resolve().then(() => delete e.__updating[t]);
+  let o = n ? JSON.stringify(r) : r;
+  e.__updating[t] = !0, o === "true" && (o = ""), e.setAttribute(t, o), Promise.resolve().then(() => delete e.__updating[t]);
 }
 function Ye(e) {
   return e.replace(/\.?([A-Z]+)/g, (t, r) => "-" + r.toLowerCase()).replace("_", "-").replace(/^-/, "");
@@ -524,21 +524,21 @@ function rt(e, t) {
   const r = Object.keys(t);
   return class extends e {
     static get observedAttributes() {
-      return r.map((n) => t[n].attribute);
+      return r.map((o) => t[o].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 o of r)
+        this[o] = void 0;
     }
     connectedCallback() {
       if (this.__initialized) return;
       this.__releaseCallbacks = [], this.__propertyChangedCallbacks = [], this.__updating = {}, this.props = Xe(this, t);
-      const n = Ze(this.props), i = this.Component, l = ie;
+      const o = Ze(this.props), i = this.Component, l = ie;
       try {
-        ie = this, this.__initialized = !0, tt(i) ? new i(n, {
+        ie = this, this.__initialized = !0, tt(i) ? new i(o, {
           element: this
-        }) : i(n, {
+        }) : i(o, {
           element: this
         });
       } finally {
@@ -548,50 +548,50 @@ function rt(e, t) {
     async disconnectedCallback() {
       if (await Promise.resolve(), this.isConnected) return;
       this.__propertyChangedCallbacks.length = 0;
-      let n = null;
-      for (; n = this.__releaseCallbacks.pop(); ) n(this);
+      let o = null;
+      for (; o = this.__releaseCallbacks.pop(); ) o(this);
       delete this.__initialized, this.__released = !0;
     }
-    attributeChangedCallback(n, i, l) {
-      if (this.__initialized && !this.__updating[n] && (n = this.lookupProp(n), n in t)) {
-        if (l == null && !this[n]) return;
-        this[n] = t[n].parse ? xe(l) : l;
+    attributeChangedCallback(o, i, l) {
+      if (this.__initialized && !this.__updating[o] && (o = this.lookupProp(o), o in t)) {
+        if (l == null && !this[o]) return;
+        this[o] = t[o].parse ? xe(l) : l;
       }
     }
-    lookupProp(n) {
+    lookupProp(o) {
       if (t)
-        return r.find((i) => n === i || n === t[i].attribute);
+        return r.find((i) => o === i || o === t[i].attribute);
     }
     get renderRoot() {
       return this.shadowRoot || this.attachShadow({
         mode: "open"
       });
     }
-    addReleaseCallback(n) {
-      this.__releaseCallbacks.push(n);
+    addReleaseCallback(o) {
+      this.__releaseCallbacks.push(o);
     }
-    addPropertyChangedCallback(n) {
-      this.__propertyChangedCallbacks.push(n);
+    addPropertyChangedCallback(o) {
+      this.__propertyChangedCallbacks.push(o);
     }
   };
 }
 function ot(e, t = {}, r = {}) {
   const {
-    BaseElement: o = HTMLElement,
-    extension: n,
+    BaseElement: n = HTMLElement,
+    extension: o,
     customElements: i = window.customElements
   } = r;
   return (l) => {
     let s = i.get(e);
-    return s ? (s.prototype.Component = l, s) : (s = rt(o, We(t)), s.prototype.Component = l, s.prototype.registeredTag = e, i.define(e, s, n), s);
+    return s ? (s.prototype.Component = l, s) : (s = rt(n, We(t)), s.prototype.Component = l, s.prototype.registeredTag = e, i.define(e, s, o), s);
   };
 }
 function nt(e) {
   const t = Object.keys(e), r = {};
-  for (let o = 0; o < t.length; o++) {
-    const [n, i] = x(e[t[o]]);
-    Object.defineProperty(r, t[o], {
-      get: n,
+  for (let n = 0; n < t.length; n++) {
+    const [o, i] = x(e[t[n]]);
+    Object.defineProperty(r, t[n], {
+      get: o,
       set(l) {
         i(() => l);
       }
@@ -608,15 +608,15 @@ function it(e) {
 }
 function st(e) {
   return (t, r) => {
-    const { element: o } = r;
-    return W((n) => {
+    const { element: n } = r;
+    return W((o) => {
       const i = nt(t);
-      o.addPropertyChangedCallback((s, u) => i[s] = u), o.addReleaseCallback(() => {
-        o.renderRoot.textContent = "", n();
+      n.addPropertyChangedCallback((s, u) => i[s] = u), n.addReleaseCallback(() => {
+        n.renderRoot.textContent = "", o();
       });
       const l = e(i, r);
-      return w(o.renderRoot, l);
-    }, it(o));
+      return w(n.renderRoot, l);
+    }, it(n));
   };
 }
 function lt(e, t, r) {
@@ -624,8 +624,8 @@ function lt(e, t, r) {
 }
 const Ce = Te();
 function at(e) {
-  const [t, r] = x([]), [o, n] = x(), [i, l] = x([]), [s, u] = x(), [p, c] = x(!1), [a, k] = x(!1), [S, $] = x(!1), [E, B] = x(!1), [L, C] = x(!1), [A, m] = x("no-url"), M = (d) => {
-    e.moqPublish.source.set(d), e.moqPublish.invisible.set(!1), e.moqPublish.muted.set(!0);
+  const [t, r] = x([]), [n, o] = x(), [i, l] = x([]), [s, u] = x(), [p, c] = x(!1), [a, k] = x(!1), [S, $] = x(!1), [E, B] = x(!1), [L, C] = x(!1), [A, m] = x("no-url"), M = (d) => {
+    e.moqPublish.source = d, e.moqPublish.invisible = !1, e.moqPublish.muted = !0;
   }, oe = {
     moqPublish: e.moqPublish,
     cameraDevices: t,
@@ -637,66 +637,66 @@ function at(e) {
     fileActive: E,
     setFile: M,
     nothingActive: L,
-    selectedCameraSource: o,
+    selectedCameraSource: n,
     selectedMicrophoneSource: s
   };
   return be(() => {
     const d = e.moqPublish;
-    d.muted.set(!0), d.invisible.set(!0), d.source.set(void 0), d.signals.effect((h) => {
-      const b = () => r([]), _ = h.get(d.video);
+    d.muted = !0, d.invisible = !0, d.source = void 0, d.signals.run((f) => {
+      const b = () => r([]), _ = f.get(d.video);
       if (!_ || !("device" in _)) {
         b();
         return;
       }
-      const N = h.get(_.device.available);
+      const N = f.get(_.device.available);
       if (!N || N.length < 2) {
         b();
         return;
       }
       r(N);
-    }), d.signals.effect((h) => {
-      const b = () => l([]), _ = h.get(d.audio);
+    }), d.signals.run((f) => {
+      const b = () => l([]), _ = f.get(d.audio);
       if (!_ || !("device" in _)) {
         b();
         return;
       }
-      if (!h.get(d.broadcast.audio.enabled)) {
+      if (!f.get(d.broadcast.audio.enabled)) {
         b();
         return;
       }
-      const K = h.get(_.device.available);
+      const K = f.get(_.device.available);
       if (!K || K.length < 2) {
         b();
         return;
       }
       l(K);
-    }), d.signals.effect((h) => {
-      const b = h.get(d.source), _ = h.get(d.muted), N = h.get(d.invisible);
+    }), d.signals.run((f) => {
+      const b = f.get(d.state.source), _ = f.get(d.state.muted), N = f.get(d.state.invisible);
       C(b === void 0 && _ && N);
-    }), d.signals.effect((h) => {
-      const b = !h.get(d.muted);
+    }), d.signals.run((f) => {
+      const b = !f.get(d.state.muted);
       $(b);
-    }), d.signals.effect((h) => {
-      const b = h.get(d.source), _ = h.get(d.video);
+    }), d.signals.run((f) => {
+      const b = f.get(d.state.source), _ = f.get(d.video);
       _ && b === "camera" ? (c(!0), k(!1)) : _ && b === "screen" ? (k(!0), c(!1)) : (c(!1), k(!1));
-    }), d.signals.effect((h) => {
-      const b = h.get(d.video);
+    }), d.signals.run((f) => {
+      const b = f.get(d.video);
       if (!b || !("device" in b)) return;
-      const _ = h.get(b.device.requested);
-      n(_);
-    }), d.signals.effect((h) => {
-      const b = h.get(d.audio);
+      const _ = f.get(b.device.requested);
+      o(_);
+    }), d.signals.run((f) => {
+      const b = f.get(d.audio);
       if (!b || !("device" in b)) return;
-      const _ = h.get(b.device.requested);
+      const _ = f.get(b.device.requested);
       u(_);
-    }), d.signals.effect((h) => {
-      const b = h.get(d.connection.url), _ = h.get(d.connection.status), N = h.get(d.broadcast.audio.source), K = h.get(d.broadcast.video.source), ke = h.get(d.muted), Pe = h.get(d.invisible), J = N && !ke, Q = K && !Pe;
+    }), d.signals.run((f) => {
+      const b = f.get(d.connection.url), _ = f.get(d.connection.status), N = f.get(d.broadcast.audio.source), K = f.get(d.broadcast.video.source), ke = f.get(d.state.muted), Pe = f.get(d.state.invisible), J = N && !ke, Q = K && !Pe;
       b ? _ === "disconnected" ? m("disconnected") : _ === "connecting" ? m("connecting") : !J && !Q ? m("select-source") : !J && Q ? m("video-only") : J && !Q ? m("audio-only") : J && Q && m("live") : m("no-url");
-    }), d.signals.effect((h) => {
-      const b = h.get(d.source);
+    }), d.signals.run((f) => {
+      const b = f.get(d.state.source);
       B(b instanceof File);
     });
-  }), f(Ce.Provider, {
+  }), h(Ce.Provider, {
     value: oe,
     get children() {
       return e.children;
@@ -711,29 +711,29 @@ function z() {
 }
 var ct = /* @__PURE__ */ P("<select class=publish-ui__media-selector-dropdown>"), ut = /* @__PURE__ */ P('<div class="publish-ui__media-selector-wrapper flex--center">'), dt = /* @__PURE__ */ P("<option>");
 function Ae(e) {
-  const [t, r] = x(!1), o = () => r((n) => !n);
+  const [t, r] = x(!1), n = () => r((o) => !o);
   return (() => {
-    var n = ut();
-    return w(n, f(R, {
-      onClick: o,
+    var o = ut();
+    return w(o, h(R, {
+      onClick: n,
       class: "publish-ui__media-selector-toggle button",
       get title() {
         return t() ? "Hide Sources" : "Show Sources";
       },
       get children() {
-        return f(V, {
+        return h(V, {
           get when() {
             return t();
           },
           get fallback() {
-            return f(j.ArrowDown, {});
+            return h(j.ArrowDown, {});
           },
           get children() {
-            return f(j.ArrowUp, {});
+            return h(j.ArrowUp, {});
           }
         });
       }
-    }), null), w(n, f(V, {
+    }), null), w(o, h(V, {
       get when() {
         return t();
       },
@@ -741,7 +741,7 @@ function Ae(e) {
         var i = ct();
         return i.addEventListener("change", (l) => {
           e.onSelected?.(l.currentTarget.value), r(!1);
-        }), w(i, f(He, {
+        }), w(i, h(He, {
           get each() {
             return e.sources;
           },
@@ -751,34 +751,34 @@ function Ae(e) {
           })()
         })), U(() => i.value = e.selectedSource), i;
       }
-    }), null), n;
+    }), null), o;
   })();
 }
-var ft = /* @__PURE__ */ P('<div class="publish-ui__source-button-wrapper flex--center">');
-function ht() {
+var ht = /* @__PURE__ */ P('<div class="publish-ui__source-button-wrapper flex--center">');
+function ft() {
   const e = z(), t = () => {
-    e.moqPublish.source.peek() === "camera" ? e.moqPublish.invisible.update((o) => !o) : (e.moqPublish.source.set("camera"), e.moqPublish.invisible.set(!1));
-  }, r = (o) => {
-    const n = e.moqPublish.video.peek();
-    !n || !("device" in n) || n.device.preferred.set(o);
+    e.moqPublish.source === "camera" ? e.moqPublish.invisible = !e.moqPublish.invisible : (e.moqPublish.source = "camera", e.moqPublish.invisible = !1);
+  }, r = (n) => {
+    const o = e.moqPublish.video.peek();
+    !o || !("device" in o) || o.device.preferred.set(n);
   };
   return (() => {
-    var o = ft();
-    return w(o, f(R, {
+    var n = ht();
+    return w(n, h(R, {
       title: "Camera",
       get class() {
         return `publish-ui__source-button flex--center ${e.cameraActive() ? "publish-ui__source-button--active" : ""}`;
       },
       onClick: t,
       get children() {
-        return f(j.Camera, {});
+        return h(j.Camera, {});
       }
-    }), null), w(o, f(V, {
+    }), null), w(n, h(V, {
       get when() {
         return ye(() => !!e.cameraActive())() && e.cameraDevices().length;
       },
       get children() {
-        return f(Ae, {
+        return h(Ae, {
           get sources() {
             return e.cameraDevices();
           },
@@ -788,54 +788,54 @@ function ht() {
           onSelected: r
         });
       }
-    }), null), o;
+    }), null), n;
   })();
 }
 var pt = /* @__PURE__ */ P("<input type=file accept=video/*,audio/*,image/* style=display:none>");
 function bt() {
-  const [e, t] = x(), r = z(), o = () => e()?.click(), n = (i) => {
+  const [e, t] = x(), r = z(), n = () => e()?.click(), o = (i) => {
     const l = i.target, s = l.files?.[0];
     s && (r.setFile(s), l.value = "");
   };
   return [(() => {
     var i = pt();
-    return i.addEventListener("change", n), Je(t, i), i;
-  })(), f(R, {
+    return i.addEventListener("change", o), Je(t, i), i;
+  })(), h(R, {
     title: "Upload File",
     get class() {
       return `publish-ui__source-button flex--center ${r.fileActive() ? "publish-ui__source-button--active" : ""}`;
     },
-    onClick: o,
+    onClick: n,
     get children() {
-      return f(j.File, {});
+      return h(j.File, {});
     }
   })];
 }
 var gt = /* @__PURE__ */ P('<div class="publish-ui__source-button-wrapper flex--center">');
 function vt() {
   const e = z(), t = () => {
-    e.moqPublish.source.peek() === "camera" ? e.moqPublish.muted.update((o) => !o) : (e.moqPublish.source.set("camera"), e.moqPublish.muted.set(!1));
-  }, r = (o) => {
-    const n = e.moqPublish.audio.peek();
-    !n || !("device" in n) || n.device.preferred.set(o);
+    e.moqPublish.source === "camera" ? e.moqPublish.muted = !e.moqPublish.muted : (e.moqPublish.source = "camera", e.moqPublish.muted = !1);
+  }, r = (n) => {
+    const o = e.moqPublish.audio.peek();
+    !o || !("device" in o) || o.device.preferred.set(n);
   };
   return (() => {
-    var o = gt();
-    return w(o, f(R, {
+    var n = gt();
+    return w(n, h(R, {
       title: "Microphone",
       get class() {
         return `publish-ui__source-button flex--center ${e.microphoneActive() ? "publish-ui__source-button--active" : ""}`;
       },
       onClick: t,
       get children() {
-        return f(j.Microphone, {});
+        return h(j.Microphone, {});
       }
-    }), null), w(o, f(V, {
+    }), null), w(n, h(V, {
       get when() {
         return ye(() => !!e.microphoneActive())() && e.microphoneDevices().length;
       },
       get children() {
-        return f(Ae, {
+        return h(Ae, {
           get sources() {
             return e.microphoneDevices();
           },
@@ -845,21 +845,21 @@ function vt() {
           onSelected: r
         });
       }
-    }), null), o;
+    }), null), n;
   })();
 }
 function _t() {
   const e = z();
-  return f(R, {
+  return h(R, {
     title: "No Source",
     get class() {
       return `publish-ui__source-button flex--center publish-ui__source-button--no-source ${e.nothingActive() ? "publish-ui__source-button--no-source-active" : ""}`;
     },
     onClick: () => {
-      e.moqPublish.source.set(void 0), e.moqPublish.muted.set(!0), e.moqPublish.invisible.set(!0);
+      e.moqPublish.source = void 0, e.moqPublish.muted = !0, e.moqPublish.invisible = !0;
     },
     get children() {
-      return f(j.Ban, {});
+      return h(j.Ban, {});
     }
   });
 }
@@ -903,10 +903,10 @@ function xt() {
     return wt[r] || yt;
   };
   return (() => {
-    var r = mt(), o = r.firstChild, n = o.nextSibling;
-    return w(n, () => t().text), U((i) => {
+    var r = mt(), n = r.firstChild, o = n.nextSibling;
+    return w(o, () => t().text), U((i) => {
       var l = `publish-ui__status-indicator-dot publish-ui__status-indicator-dot--${t().variant}`, s = `publish-ui__status-indicator-text publish-ui__status-indicator-text--${t().variant}`;
-      return l !== i.e && ue(o, i.e = l), s !== i.t && ue(n, i.t = s), i;
+      return l !== i.e && ue(n, i.e = l), s !== i.t && ue(o, i.t = s), i;
     }, {
       e: void 0,
       t: void 0
@@ -915,16 +915,16 @@ function xt() {
 }
 function St() {
   const e = z();
-  return f(R, {
+  return h(R, {
     title: "Screen",
     get class() {
       return `publish-ui__source-button flex--center ${e.screenActive() ? "publish-ui__source-button--active" : ""}`;
     },
     onClick: () => {
-      e.moqPublish.source.set("screen"), e.moqPublish.invisible.set(!1), e.moqPublish.muted.set(!0);
+      e.moqPublish.source = "screen", e.moqPublish.invisible = !1, e.moqPublish.muted = !0;
     },
     get children() {
-      return f(j.Screen, {});
+      return h(j.Screen, {});
     }
   });
 }
@@ -932,10 +932,10 @@ var Ct = /* @__PURE__ */ P('<div class="publish-ui__controls flex--center flex--
 function At() {
   return (() => {
     var e = Ct(), t = e.firstChild;
-    return t.firstChild, w(t, f(vt, {}), null), w(t, f(ht, {}), null), w(t, f(St, {}), null), w(t, f(bt, {}), null), w(t, f(_t, {}), null), w(e, f(xt, {}), null), e;
+    return t.firstChild, w(t, h(vt, {}), null), w(t, h(ft, {}), null), w(t, h(St, {}), null), w(t, h(bt, {}), null), w(t, h(_t, {}), null), w(e, h(xt, {}), null), e;
   })();
 }
-const kt = ':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)}.publish-ui__controls{gap:var(--spacing-16);margin:var(--spacing-8) 0;border-radius:var(--border-radius-lg);border:var(--spacing-1) solid var(--color-white-alpha-10);padding:var(--spacing-16)}.publish-ui__source-label{font-size:1rem;font-weight:600;letter-spacing:.1rem;color:var(--color-white-alpha-90)}.publish-ui__source-selector{gap:var(--spacing-16)}.publish-ui__source-button-wrapper{position:relative}.publish-ui__source-button{width:44px;height:44px;border-radius:var(--border-radius-md);background:var(--color-white-alpha-05);backdrop-filter:blur(6px);border:var(--spacing-1) solid var(--color-white-alpha-10);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease}.publish-ui__source-button:hover{border-color:var(--color-white-alpha-20)}.publish-ui__source-button svg{color:var(--color-white-alpha-70);transition:color .2s ease;position:relative;z-index:1}.publish-ui__source-button--active{background:linear-gradient(135deg,var(--color-orange-500-alpha-30),var(--color-amber-600-alpha-30));border:var(--spacing-1) solid var(--color-orange-500-alpha-50);box-shadow:0 0 24px var(--color-orange-500-alpha-40)}.publish-ui__source-button--active svg{color:var(--color-orange-300)}.publish-ui__source-button--active:before{content:"";position:absolute;inset:0;border-radius:var(--border-radius-md);background:linear-gradient(135deg,var(--color-orange-400-alpha-20),var(--color-amber-600-alpha-20));filter:blur(16px);z-index:0}.publish-ui__source-button--no-source{background:var(--color-white-alpha-05);border:var(--spacing-1) solid var(--color-white-alpha-10)}.publish-ui__source-button--no-source svg{color:var(--color-white-alpha-50)}.publish-ui__source-button--no-source-active{background:linear-gradient(135deg,var(--color-red-500-alpha-25),var(--color-red-900-alpha-35));border:var(--spacing-1) solid var(--color-red-500-alpha-60);box-shadow:0 0 18px var(--color-red-500-alpha-45)}.publish-ui__source-button--no-source-active svg{color:var(--color-red-300)}.publish-ui__source-button--no-source-active:before{content:"";position:absolute;inset:0;border-radius:var(--border-radius-md);background:linear-gradient(135deg,var(--color-red-400-alpha-25),var(--color-red-600-alpha-25));filter:blur(16px);z-index:0}.publish-ui__media-selector-wrapper{position:relative;gap:var(--spacing-8)}.publish-ui__media-selector-toggle{font-size:.75rem;cursor:pointer}.publish-ui__media-selector-toggle.button,.publish-ui__media-selector-toggle.button:hover:not(:disabled){background-color:unset;box-shadow:none;border:unset}.publish-ui__media-selector-dropdown{position:absolute;top:var(--spacing-48);right:var(--spacing-8);padding:var(--spacing-12) var(--spacing-16);background:var(--color-black-alpha-85);border:var(--spacing-1) solid var(--color-white-alpha-10);border-radius:var(--border-radius-sm);color:var(--color-white);cursor:pointer;z-index:1;outline:none;box-shadow:none}.publish-ui__status-indicator{gap:var(--spacing-12);padding:var(--spacing-12) var(--spacing-24);border-radius:12px;background:var(--color-black-alpha-60);backdrop-filter:blur(16px);border:var(--spacing-1) solid var(--color-white-alpha-10)}.publish-ui__status-indicator-dot{position:relative;width:12px;height:12px;border-radius:50%;flex-shrink:0;z-index:1}.publish-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}.publish-ui__status-indicator-dot:after{display:none}.publish-ui__status-indicator-dot--live:after,.publish-ui__status-indicator-dot--warning:after,.publish-ui__status-indicator-dot--connecting:after,.publish-ui__status-indicator-dot--audio-only:after,.publish-ui__status-indicator-dot--video-only:after{display:block}.publish-ui__status-indicator-dot--error{background:var(--color-gray-100);color:var(--color-gray-100)}.publish-ui__status-indicator-text--error{color:var(--color-gray-100)}.publish-ui__status-indicator-dot--warning{background:var(--color-yellow-400);color:var(--color-yellow-400)}.publish-ui__status-indicator-text--warning{color:var(--color-yellow-400)}.publish-ui__status-indicator-dot--live{background:var(--color-green-400);color:var(--color-green-400)}.publish-ui__status-indicator-text--live{color:var(--color-green-400)}.publish-ui__status-indicator-dot--audio-only{background:var(--color-blue-500);color:var(--color-blue-500)}.publish-ui__status-indicator-text--audio-only{color:var(--color-blue-500)}.publish-ui__status-indicator-dot--video-only{background:var(--color-purple-500);color:var(--color-purple-500)}.publish-ui__status-indicator-text--video-only{color:var(--color-purple-500)}.publish-ui__status-indicator-dot--connecting{background:var(--color-gray-100);color:var(--color-gray-100)}.publish-ui__status-indicator-text--connecting{color:var(--color-gray-100)}.publish-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}}';
+const kt = ':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)}.publish-ui__controls{gap:var(--spacing-16);margin:var(--spacing-8) 0;border-radius:var(--border-radius-lg);border:var(--spacing-1) solid var(--color-white-alpha-10);padding:var(--spacing-16)}.publish-ui__source-label{font-size:1rem;font-weight:600;letter-spacing:.1rem;color:var(--color-white-alpha-90)}.publish-ui__source-selector{gap:var(--spacing-16)}.publish-ui__source-button-wrapper{position:relative}.publish-ui__source-button{width:44px;height:44px;border-radius:var(--border-radius-md);background:var(--color-white-alpha-05);backdrop-filter:blur(6px);border:var(--spacing-1) solid var(--color-white-alpha-10);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease}.publish-ui__source-button:hover{border-color:var(--color-white-alpha-20)}.publish-ui__source-button svg{color:var(--color-white-alpha-70);transition:color .2s ease;position:relative;z-index:1}.publish-ui__source-button--active{background:linear-gradient(135deg,var(--color-orange-500-alpha-30),var(--color-amber-600-alpha-30));border:var(--spacing-1) solid var(--color-orange-500-alpha-50);box-shadow:0 0 24px var(--color-orange-500-alpha-40)}.publish-ui__source-button--active svg{color:var(--color-orange-300)}.publish-ui__source-button--active:before{content:"";position:absolute;inset:0;border-radius:var(--border-radius-md);background:linear-gradient(135deg,var(--color-orange-400-alpha-20),var(--color-amber-600-alpha-20));filter:blur(16px);z-index:0}.publish-ui__source-button--no-source{background:var(--color-white-alpha-05);border:var(--spacing-1) solid var(--color-white-alpha-10)}.publish-ui__source-button--no-source svg{color:var(--color-white-alpha-50)}.publish-ui__source-button--no-source-active{background:linear-gradient(135deg,var(--color-red-500-alpha-25),var(--color-red-900-alpha-35));border:var(--spacing-1) solid var(--color-red-500-alpha-60);box-shadow:0 0 18px var(--color-red-500-alpha-45)}.publish-ui__source-button--no-source-active svg{color:var(--color-red-300)}.publish-ui__source-button--no-source-active:before{content:"";position:absolute;inset:0;border-radius:var(--border-radius-md);background:linear-gradient(135deg,var(--color-red-400-alpha-25),var(--color-red-600-alpha-25));filter:blur(16px);z-index:0}.publish-ui__media-selector-wrapper{position:relative;gap:var(--spacing-8)}.publish-ui__media-selector-toggle{font-size:.75rem;cursor:pointer}.publish-ui__media-selector-toggle.button,.publish-ui__media-selector-toggle.button:hover:not(:disabled){background-color:unset;box-shadow:none;border:unset}.publish-ui__media-selector-dropdown{position:absolute;top:var(--spacing-48);right:var(--spacing-8);padding:var(--spacing-12) var(--spacing-16);background:var(--color-black-alpha-85);border:var(--spacing-1) solid var(--color-white-alpha-10);border-radius:var(--border-radius-sm);color:var(--color-white);cursor:pointer;z-index:1;outline:none;box-shadow:none}.publish-ui__status-indicator{gap:var(--spacing-12);padding:var(--spacing-12) var(--spacing-24);border-radius:12px;background:var(--color-black-alpha-60);backdrop-filter:blur(16px);border:var(--spacing-1) solid var(--color-white-alpha-10)}.publish-ui__status-indicator-dot{position:relative;width:12px;height:12px;border-radius:50%;flex-shrink:0;z-index:1}.publish-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}.publish-ui__status-indicator-dot:after{display:none}.publish-ui__status-indicator-dot--live:after,.publish-ui__status-indicator-dot--warning:after,.publish-ui__status-indicator-dot--connecting:after,.publish-ui__status-indicator-dot--audio-only:after,.publish-ui__status-indicator-dot--video-only:after{display:block}.publish-ui__status-indicator-dot--error{background:var(--color-gray-100);color:var(--color-gray-100)}.publish-ui__status-indicator-text--error{color:var(--color-gray-100)}.publish-ui__status-indicator-dot--warning{background:var(--color-yellow-400);color:var(--color-yellow-400)}.publish-ui__status-indicator-text--warning{color:var(--color-yellow-400)}.publish-ui__status-indicator-dot--live{background:var(--color-green-400);color:var(--color-green-400)}.publish-ui__status-indicator-text--live{color:var(--color-green-400)}.publish-ui__status-indicator-dot--audio-only{background:var(--color-blue-500);color:var(--color-blue-500)}.publish-ui__status-indicator-text--audio-only{color:var(--color-blue-500)}.publish-ui__status-indicator-dot--video-only{background:var(--color-purple-500);color:var(--color-purple-500)}.publish-ui__status-indicator-text--video-only{color:var(--color-purple-500)}.publish-ui__status-indicator-dot--connecting{background:var(--color-gray-100);color:var(--color-gray-100)}.publish-ui__status-indicator-text--connecting{color:var(--color-gray-100)}.publish-ui__status-indicator-text{font-size:1rem;letter-spacing:.1rem}@keyframes status-pulse{0%{transform:scale(1);opacity:.5}70%{opacity:.25}to{transform:scale(2.5);opacity:0}}';
 var Pt = /* @__PURE__ */ P("<style>"), $t = /* @__PURE__ */ P("<slot>");
 function Et(e) {
   return [(() => {
@@ -944,30 +944,30 @@ function Et(e) {
   })(), (() => {
     var t = $t();
     return t._$owner = Ie(), t;
-  })(), f(at, {
+  })(), h(at, {
     get moqPublish() {
       return e.publish;
     },
     get children() {
-      return f(At, {});
+      return h(At, {});
     }
   })];
 }
 lt("moq-publish-ui", (e, {
   element: t
 }) => {
-  const [r, o] = x();
+  const [r, n] = x();
   return Me(async () => {
     await customElements.whenDefined("moq-publish");
-    const n = t.querySelector("moq-publish");
-    o(n || void 0);
-  }), f(V, {
+    const o = t.querySelector("moq-publish");
+    n(o || void 0);
+  }), h(V, {
     get when() {
       return r();
     },
     keyed: !0,
-    children: (n) => f(Et, {
-      publish: n
+    children: (o) => h(Et, {
+      publish: o
     })
   });
 });