@moq/publish 0.1.0

package/ui/index.js

@@ -0,0 +1,974 @@
+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;
+const I = 1, X = 2, pe = {
+  owned: null,
+  cleanups: null,
+  context: null,
+  owner: null
+};
+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 : {
+    owned: null,
+    cleanups: null,
+    context: i ? i.context : null,
+    owner: i
+  }, s = n ? e : () => e(() => O(() => D(l)));
+  g = l, v = null;
+  try {
+    return G(s, !0);
+  } finally {
+    v = r, g = o;
+  }
+}
+function x(e, t) {
+  t = t ? Object.assign({}, Z, t) : Z;
+  const r = {
+    value: e,
+    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];
+}
+function U(e, t, r) {
+  const o = ae(e, t, !1, I);
+  H(o);
+}
+function be(e, t, r) {
+  he = Fe;
+  const o = ae(e, t, !1, I);
+  o.user = !0, q ? q.push(o) : H(o);
+}
+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);
+}
+function O(e) {
+  if (v === null) return e();
+  const t = v;
+  v = null;
+  try {
+    return e();
+  } finally {
+    v = t;
+  }
+}
+function Me(e) {
+  be(() => O(e));
+}
+function Ne(e) {
+  return g === null || (g.cleanups === null ? g.cleanups = [e] : g.cleanups.push(e)), e;
+}
+function Ie() {
+  return g;
+}
+function Te(e, t) {
+  const r = /* @__PURE__ */ Symbol("context");
+  return {
+    id: r,
+    Provider: ze(r),
+    defaultValue: e
+  };
+}
+function je(e) {
+  let t;
+  return g && g.context && (t = g.context[e.id]) !== void 0 ? t : e.defaultValue;
+}
+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] : [];
+  }, r;
+}
+function ge() {
+  if (this.sources && this.state)
+    if (this.state === I) H(this);
+    else {
+      const e = y;
+      y = null, G(() => ee(this), !1), y = e;
+    }
+  if (v) {
+    const e = this.observers ? this.observers.length : 0;
+    v.sources ? (v.sources.push(this), v.sourceSlots.push(e)) : (v.sources = [this], v.sourceSlots = [e]), this.observers ? (this.observers.push(v), this.observerSlots.push(v.sources.length - 1)) : (this.observers = [v], this.observerSlots = [v.sources.length - 1]);
+  }
+  return this.value;
+}
+function 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;
+      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)
+      throw y = [], new Error();
+  }, !1)), t;
+}
+function H(e) {
+  if (!e.fn) return;
+  D(e);
+  const t = re;
+  Be(e, e.value, t);
+}
+function Be(e, t, r) {
+  let o;
+  const n = g, i = v;
+  v = g = e;
+  try {
+    o = 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;
+  }
+  (!e.updatedAt || e.updatedAt <= r) && (e.updatedAt != null && "observers" in e ? ve(e, o) : e.value = o, e.updatedAt = r);
+}
+function ae(e, t, r, o = I, n) {
+  const i = {
+    fn: e,
+    state: o,
+    updatedAt: null,
+    owned: null,
+    sources: null,
+    sourceSlots: null,
+    cleanups: null,
+    value: t,
+    owner: g,
+    context: g ? g.context : null,
+    pure: r
+  };
+  return g === null || g !== pe && (g.owned ? g.owned.push(i) : g.owned = [i]), i;
+}
+function Y(e) {
+  if (e.state === 0) return;
+  if (e.state === X) return ee(e);
+  if (e.suspense && O(e.suspense.inFallback)) return e.suspense.effects.push(e);
+  const t = [e];
+  for (; (e = e.owner) && (!e.updatedAt || e.updatedAt < re); )
+    e.state && t.push(e);
+  for (let r = t.length - 1; r >= 0; r--)
+    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;
+    }
+}
+function G(e, t) {
+  if (y) return e();
+  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);
+  }
+}
+function Le(e) {
+  if (y && (_e(y), y = null), e) return;
+  const t = q;
+  q = null, t.length && G(() => he(t), !1);
+}
+function _e(e) {
+  for (let t = 0; t < e.length; t++) Y(e[t]);
+}
+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);
+  }
+  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);
+    }
+  }
+}
+function me(e) {
+  for (let t = 0; t < e.observers.length; t += 1) {
+    const r = e.observers[t];
+    r.state || (r.state = X, r.pure ? y.push(r) : q.push(r), r.observers && me(r));
+  }
+}
+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);
+      }
+    }
+  if (e.tOwned) {
+    for (t = e.tOwned.length - 1; t >= 0; t--) D(e.tOwned[t]);
+    delete e.tOwned;
+  }
+  if (e.owned) {
+    for (t = e.owned.length - 1; t >= 0; t--) D(e.owned[t]);
+    e.owned = null;
+  }
+  if (e.cleanups) {
+    for (t = e.cleanups.length - 1; t >= 0; t--) e.cleanups[t]();
+    e.cleanups = null;
+  }
+  e.state = 0;
+}
+function Re(e) {
+  return e instanceof Error ? e : new Error(typeof e == "string" ? e : "Unknown error", {
+    cause: e
+  });
+}
+function we(e, t = g) {
+  throw Re(e);
+}
+function se(e) {
+  if (typeof e == "function" && !e.length) return 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);
+    }
+    return t;
+  }
+  return e;
+}
+function ze(e, t) {
+  return function(o) {
+    let n;
+    return U(() => n = O(() => (g.context = {
+      ...g.context,
+      [e]: o.value
+    }, Ue(() => o.children))), void 0), n;
+  };
+}
+const Ke = /* @__PURE__ */ Symbol("fallback");
+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;
+  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);
+      else if (l === 0) {
+        for (n = new Array(p), a = 0; a < p; a++)
+          o[a] = u[a], n[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 (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]();
+        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);
+      }
+      return n;
+    });
+    function k(S) {
+      if (i[a] = S, s) {
+        const [$, E] = x(a);
+        return s[a] = E, t(u[a], $);
+      }
+      return t(u[a]);
+    }
+  };
+}
+function f(e, t) {
+  return O(() => e(t || {}));
+}
+const Ve = (e) => `Stale read from <${e}>.`;
+function He(e) {
+  const t = "fallback" in e && {
+    fallback: () => e.fallback
+  };
+  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
+  });
+  return T(() => {
+    const n = o();
+    if (n) {
+      const i = e.children;
+      return typeof i == "function" && i.length > 0 ? O(() => i(t ? n : () => {
+        if (!O(o)) throw Ve("Show");
+        return r();
+      })) : i;
+    }
+    return e.fallback;
+  }, void 0, void 0);
+}
+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; ) {
+    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 (; s < i; ) e.insertBefore(r[s++], c);
+    } else if (i === s)
+      for (; l < n; )
+        (!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 (!p) {
+        p = /* @__PURE__ */ new Map();
+        let a = s;
+        for (; a < i; ) p.set(r[a], a++);
+      }
+      const c = p.get(t[l]);
+      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); )
+            k++;
+          if (k > c - s) {
+            const $ = t[l];
+            for (; s < c; ) e.insertBefore(r[s++], $);
+          } else e.replaceChild(r[s++], t[l++]);
+        } else l++;
+      else t[l++].remove();
+    }
+  }
+}
+function P(e, t, r, o) {
+  let n;
+  const i = () => {
+    const s = document.createElement("template");
+    return s.innerHTML = e, s.content.firstChild;
+  }, l = () => (n || (n = i())).cloneNode(!0);
+  return l.cloneNode = l, l;
+}
+function ue(e, t) {
+  t == null ? e.removeAttribute("class") : e.className = 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 te(e, t, r, o, n) {
+  for (; typeof r == "function"; ) r = r();
+  if (t === r) return r;
+  const i = typeof t, l = o !== 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);
+    } 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);
+  else {
+    if (i === "function")
+      return U(() => {
+        let s = t();
+        for (; typeof s == "function"; ) s = s();
+        r = te(e, s, r, o);
+      }), () => 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 (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));
+      r = s;
+    } else if (t.nodeType) {
+      if (Array.isArray(r)) {
+        if (l) return r = F(e, r, o, t);
+        F(e, r, null, t);
+      } else r == null || r === "" || !e.firstChild ? e.appendChild(t) : e.replaceChild(t, e.firstChild);
+      r = t;
+    }
+  }
+  return r;
+}
+function le(e, t, r, o) {
+  let n = !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;
+    else if (p === "function")
+      if (o) {
+        for (; typeof s == "function"; ) s = s();
+        n = le(e, Array.isArray(s) ? s : [s], Array.isArray(u) ? u : [u]) || n;
+      } else
+        e.push(s), n = !0;
+    else {
+      const c = String(s);
+      u && u.nodeType === 3 && u.data === c ? e.push(u) : e.push(document.createTextNode(c));
+    }
+  }
+  return n;
+}
+function de(e, t, r = null) {
+  for (let o = 0, n = t.length; o < n; o++) e.insertBefore(t[o], r);
+}
+function F(e, t, r, o) {
+  if (r === void 0) return e.textContent = "";
+  const n = o || document.createTextNode("");
+  if (t.length) {
+    let i = !1;
+    for (let l = t.length - 1; l >= 0; l--) {
+      const s = t[l];
+      if (n !== s) {
+        const u = s.parentNode === e;
+        !i && !l ? u ? e.replaceChild(n, s) : e.insertBefore(n, r) : u && s.remove();
+      } else i = !0;
+    }
+  } else e.insertBefore(n, r);
+  return [n];
+}
+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;
+  }, {});
+}
+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;
+  }, {}) : {};
+}
+function Ze(e) {
+  return Object.keys(e).reduce((r, o) => (r[o] = e[o].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, {
+      get() {
+        return i.value;
+      },
+      set(u) {
+        const p = i.value;
+        i.value = u, i.reflect && fe(this, i.attribute, i.value, !!i.parse);
+        for (let c = 0, a = this.__propertyChangedCallbacks.length; c < a; c++)
+          this.__propertyChangedCallbacks[c](n, u, p);
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+  }), r;
+}
+function xe(e) {
+  if (e)
+    try {
+      return JSON.parse(e);
+    } catch {
+      return e;
+    }
+}
+function fe(e, t, r, o) {
+  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]);
+}
+function Ye(e) {
+  return e.replace(/\.?([A-Z]+)/g, (t, r) => "-" + r.toLowerCase()).replace("_", "-").replace(/^-/, "");
+}
+function Se(e) {
+  return e != null && (typeof e == "object" || typeof e == "function");
+}
+function et(e) {
+  return Object.prototype.toString.call(e) === "[object Function]";
+}
+function tt(e) {
+  return typeof e == "function" && e.toString().indexOf("class") === 0;
+}
+let ie;
+function rt(e, t) {
+  const r = Object.keys(t);
+  return class extends e {
+    static get observedAttributes() {
+      return r.map((n) => t[n].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;
+    }
+    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;
+      try {
+        ie = this, this.__initialized = !0, tt(i) ? new i(n, {
+          element: this
+        }) : i(n, {
+          element: this
+        });
+      } finally {
+        ie = l;
+      }
+    }
+    async disconnectedCallback() {
+      if (await Promise.resolve(), this.isConnected) return;
+      this.__propertyChangedCallbacks.length = 0;
+      let n = null;
+      for (; n = this.__releaseCallbacks.pop(); ) n(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;
+      }
+    }
+    lookupProp(n) {
+      if (t)
+        return r.find((i) => n === i || n === t[i].attribute);
+    }
+    get renderRoot() {
+      return this.shadowRoot || this.attachShadow({
+        mode: "open"
+      });
+    }
+    addReleaseCallback(n) {
+      this.__releaseCallbacks.push(n);
+    }
+    addPropertyChangedCallback(n) {
+      this.__propertyChangedCallbacks.push(n);
+    }
+  };
+}
+function ot(e, t = {}, r = {}) {
+  const {
+    BaseElement: o = HTMLElement,
+    extension: n,
+    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);
+  };
+}
+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,
+      set(l) {
+        i(() => l);
+      }
+    });
+  }
+  return r;
+}
+function it(e) {
+  if (e.assignedSlot && e.assignedSlot._$owner) return e.assignedSlot._$owner;
+  let t = e.parentNode;
+  for (; t && !t._$owner && !(t.assignedSlot && t.assignedSlot._$owner); )
+    t = t.parentNode;
+  return t && t.assignedSlot ? t.assignedSlot._$owner : e._$owner;
+}
+function st(e) {
+  return (t, r) => {
+    const { element: o } = r;
+    return W((n) => {
+      const i = nt(t);
+      o.addPropertyChangedCallback((s, u) => i[s] = u), o.addReleaseCallback(() => {
+        o.renderRoot.textContent = "", n();
+      });
+      const l = e(i, r);
+      return w(o.renderRoot, l);
+    }, it(o));
+  };
+}
+function lt(e, t, r) {
+  return arguments.length === 2 && (r = t, t = {}), ot(e, t)(st(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);
+  }, oe = {
+    moqPublish: e.moqPublish,
+    cameraDevices: t,
+    microphoneDevices: i,
+    publishStatus: A,
+    cameraActive: p,
+    screenActive: a,
+    microphoneActive: S,
+    fileActive: E,
+    setFile: M,
+    nothingActive: L,
+    selectedCameraSource: o,
+    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);
+      if (!_ || !("device" in _)) {
+        b();
+        return;
+      }
+      const N = h.get(_.device.available);
+      if (!N || N.length < 2) {
+        b();
+        return;
+      }
+      r(N);
+    }), d.signals.effect((h) => {
+      const b = () => l([]), _ = h.get(d.audio);
+      if (!_ || !("device" in _)) {
+        b();
+        return;
+      }
+      if (!h.get(d.broadcast.audio.enabled)) {
+        b();
+        return;
+      }
+      const K = h.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);
+      C(b === void 0 && _ && N);
+    }), d.signals.effect((h) => {
+      const b = !h.get(d.muted);
+      $(b);
+    }), d.signals.effect((h) => {
+      const b = h.get(d.source), _ = h.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);
+      if (!b || !("device" in b)) return;
+      const _ = h.get(b.device.requested);
+      n(_);
+    }), d.signals.effect((h) => {
+      const b = h.get(d.audio);
+      if (!b || !("device" in b)) return;
+      const _ = h.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;
+      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);
+      B(b instanceof File);
+    });
+  }), f(Ce.Provider, {
+    value: oe,
+    get children() {
+      return e.children;
+    }
+  });
+}
+function z() {
+  const e = je(Ce);
+  if (!e)
+    throw new Error("usePublishUIContext must be used within a PublishUIContextProvider");
+  return e;
+}
+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);
+  return (() => {
+    var n = ut();
+    return w(n, f(R, {
+      onClick: o,
+      class: "publish-ui__media-selector-toggle button",
+      get title() {
+        return t() ? "Hide Sources" : "Show Sources";
+      },
+      get children() {
+        return f(V, {
+          get when() {
+            return t();
+          },
+          get fallback() {
+            return f(j.ArrowDown, {});
+          },
+          get children() {
+            return f(j.ArrowUp, {});
+          }
+        });
+      }
+    }), null), w(n, f(V, {
+      get when() {
+        return t();
+      },
+      get children() {
+        var i = ct();
+        return i.addEventListener("change", (l) => {
+          e.onSelected?.(l.currentTarget.value), r(!1);
+        }), w(i, f(He, {
+          get each() {
+            return e.sources;
+          },
+          children: (l) => (() => {
+            var s = dt();
+            return w(s, () => l.label), U(() => s.value = l.deviceId), s;
+          })()
+        })), U(() => i.value = e.selectedSource), i;
+      }
+    }), null), n;
+  })();
+}
+var ft = /* @__PURE__ */ P('<div class="publish-ui__source-button-wrapper flex--center">');
+function ht() {
+  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);
+  };
+  return (() => {
+    var o = ft();
+    return w(o, f(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, {});
+      }
+    }), null), w(o, f(V, {
+      get when() {
+        return ye(() => !!e.cameraActive())() && e.cameraDevices().length;
+      },
+      get children() {
+        return f(Ae, {
+          get sources() {
+            return e.cameraDevices();
+          },
+          get selectedSource() {
+            return e.selectedCameraSource?.();
+          },
+          onSelected: r
+        });
+      }
+    }), null), o;
+  })();
+}
+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 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, {
+    title: "Upload File",
+    get class() {
+      return `publish-ui__source-button flex--center ${r.fileActive() ? "publish-ui__source-button--active" : ""}`;
+    },
+    onClick: o,
+    get children() {
+      return f(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);
+  };
+  return (() => {
+    var o = gt();
+    return w(o, f(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, {});
+      }
+    }), null), w(o, f(V, {
+      get when() {
+        return ye(() => !!e.microphoneActive())() && e.microphoneDevices().length;
+      },
+      get children() {
+        return f(Ae, {
+          get sources() {
+            return e.microphoneDevices();
+          },
+          get selectedSource() {
+            return e.selectedMicrophoneSource?.();
+          },
+          onSelected: r
+        });
+      }
+    }), null), o;
+  })();
+}
+function _t() {
+  const e = z();
+  return f(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);
+    },
+    get children() {
+      return f(j.Ban, {});
+    }
+  });
+}
+var mt = /* @__PURE__ */ P('<div class="publish-ui__status-indicator flex--center"><span></span><span>');
+const wt = {
+  "no-url": {
+    variant: "error",
+    text: "No URL"
+  },
+  disconnected: {
+    variant: "error",
+    text: "Disconnected"
+  },
+  connecting: {
+    variant: "connecting",
+    text: "Connecting..."
+  },
+  "select-source": {
+    variant: "warning",
+    text: "Select Source"
+  },
+  "video-only": {
+    variant: "video-only",
+    text: "Video Only"
+  },
+  "audio-only": {
+    variant: "audio-only",
+    text: "Audio Only"
+  },
+  live: {
+    variant: "live",
+    text: "Live"
+  }
+}, yt = {
+  variant: "error",
+  text: "Unknown"
+};
+function xt() {
+  const e = z(), t = () => {
+    const r = e.publishStatus();
+    return wt[r] || yt;
+  };
+  return (() => {
+    var r = mt(), o = r.firstChild, n = o.nextSibling;
+    return w(n, () => 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;
+    }, {
+      e: void 0,
+      t: void 0
+    }), r;
+  })();
+}
+function St() {
+  const e = z();
+  return f(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);
+    },
+    get children() {
+      return f(j.Screen, {});
+    }
+  });
+}
+var Ct = /* @__PURE__ */ P('<div class="publish-ui__controls flex--center flex--space-between"><div class="publish-ui__source-selector flex--center"><span class=publish-ui__source-label>Source:');
+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;
+  })();
+}
+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}}';
+var Pt = /* @__PURE__ */ P("<style>"), $t = /* @__PURE__ */ P("<slot>");
+function Et(e) {
+  return [(() => {
+    var t = Pt();
+    return w(t, kt), t;
+  })(), (() => {
+    var t = $t();
+    return t._$owner = Ie(), t;
+  })(), f(at, {
+    get moqPublish() {
+      return e.publish;
+    },
+    get children() {
+      return f(At, {});
+    }
+  })];
+}
+lt("moq-publish-ui", (e, {
+  element: t
+}) => {
+  const [r, o] = x();
+  return Me(async () => {
+    await customElements.whenDefined("moq-publish");
+    const n = t.querySelector("moq-publish");
+    o(n || void 0);
+  }), f(V, {
+    get when() {
+      return r();
+    },
+    keyed: !0,
+    children: (n) => f(Et, {
+      publish: n
+    })
+  });
+});
+//# sourceMappingURL=index.js.map