@44-audio/components 0.1.0-dev.1

package/dist/recorder.es.js

@@ -0,0 +1,780 @@
+import { h as Dr, C as Tr, D as qr, E as zr, F as Rr, G as $r, H as Lr, I as Ar, J as Fr, T as Or, K as _r, L as jr, M as Ur, N as J, O as Nr, P as Pr, d as cr, c as Z, p as rr, a as er, b as P, l as j, Q as ir, y as wr, f as $, g as T, e as L, i as G, z as kr, q as N, j as k, k as tr, s as I, n as t, m as B, r as S, B as ar, R as lr, u as fr, S as X, U as sr, v as Y, V as ur, W as Br, o as Q, w as vr, x as pr, X as xr, A as Hr, Y as Gr } from "./AudioPlayer-bUgQMAfs.mjs";
+function Kr(e, r, i, s, o) {
+  Dr && Tr();
+  var n = r.$$slots?.[i], u = !1;
+  n === !0 && (n = r.children, u = !0), n === void 0 || n(e, u ? () => s : s);
+}
+const Vr = () => performance.now(), H = {
+  // don't access requestAnimationFrame eagerly outside method
+  // this allows basic testing of user code without JSDOM
+  // bunder will eval and remove ternary when the user's app is built
+  tick: (
+    /** @param {any} _ */
+    (e) => requestAnimationFrame(e)
+  ),
+  now: () => Vr(),
+  tasks: /* @__PURE__ */ new Set()
+};
+function Ir() {
+  const e = H.now();
+  H.tasks.forEach((r) => {
+    r.c(e) || (H.tasks.delete(r), r.f());
+  }), H.tasks.size !== 0 && H.tick(Ir);
+}
+function Wr(e) {
+  let r;
+  return H.tasks.size === 0 && H.tick(Ir), {
+    promise: new Promise((i) => {
+      H.tasks.add(r = { c: e, f: i });
+    }),
+    abort() {
+      H.tasks.delete(r);
+    }
+  };
+}
+function or(e, r) {
+  _r(() => {
+    e.dispatchEvent(new CustomEvent(r));
+  });
+}
+function Jr(e) {
+  if (e === "float") return "cssFloat";
+  if (e === "offset") return "cssOffset";
+  if (e.startsWith("--")) return e;
+  const r = e.split("-");
+  return r.length === 1 ? r[0] : r[0] + r.slice(1).map(
+    /** @param {any} word */
+    (i) => i[0].toUpperCase() + i.slice(1)
+  ).join("");
+}
+function br(e) {
+  const r = {}, i = e.split(";");
+  for (const s of i) {
+    const [o, n] = s.split(":");
+    if (!o || n === void 0) break;
+    const u = Jr(o.trim());
+    r[u] = n.trim();
+  }
+  return r;
+}
+const Qr = (e) => e;
+function gr(e, r, i, s) {
+  var o = (e & Nr) !== 0, n = (e & Pr) !== 0, u = o && n, f = (e & Or) !== 0, q = u ? "both" : o ? "in" : "out", x, _ = r.inert, M = r.style.overflow, w, C;
+  function E() {
+    return _r(() => x ??= i()(r, s?.() ?? /** @type {P} */
+    {}, {
+      direction: q
+    }));
+  }
+  var a = {
+    is_global: f,
+    in() {
+      if (r.inert = _, !o) {
+        C?.abort(), C?.reset?.();
+        return;
+      }
+      n || w?.abort(), or(r, "introstart"), w = yr(r, E(), C, 1, () => {
+        or(r, "introend"), w?.abort(), w = x = void 0, r.style.overflow = M;
+      });
+    },
+    out(g) {
+      if (!n) {
+        g?.(), x = void 0;
+        return;
+      }
+      r.inert = !0, or(r, "outrostart"), C = yr(r, E(), w, 0, () => {
+        or(r, "outroend"), g?.();
+      });
+    },
+    stop: () => {
+      w?.abort(), C?.abort();
+    }
+  }, c = (
+    /** @type {Effect} */
+    qr
+  );
+  if ((c.transitions ??= []).push(a), o && zr) {
+    var m = f;
+    if (!m) {
+      for (var d = (
+        /** @type {Effect | null} */
+        c.parent
+      ); d && (d.f & Rr) !== 0; )
+        for (; (d = d.parent) && (d.f & $r) === 0; )
+          ;
+      m = !d || (d.f & Lr) !== 0;
+    }
+    m && Ar(() => {
+      Fr(() => a.in());
+    });
+  }
+}
+function yr(e, r, i, s, o) {
+  var n = s === 1;
+  if (jr(r)) {
+    var u, f = !1;
+    return Ur(() => {
+      if (!f) {
+        var c = r({ direction: n ? "in" : "out" });
+        u = yr(e, c, i, s, o);
+      }
+    }), {
+      abort: () => {
+        f = !0, u?.abort();
+      },
+      deactivate: () => u.deactivate(),
+      reset: () => u.reset(),
+      t: () => u.t()
+    };
+  }
+  if (i?.deactivate(), !r?.duration)
+    return o(), {
+      abort: J,
+      deactivate: J,
+      reset: J,
+      t: () => s
+    };
+  const { delay: q = 0, css: x, tick: _, easing: M = Qr } = r;
+  var w = [];
+  if (n && i === void 0 && (_ && _(0, 1), x)) {
+    var C = br(x(0, 1));
+    w.push(C, C);
+  }
+  var E = () => 1 - s, a = e.animate(w, { duration: q, fill: "forwards" });
+  return a.onfinish = () => {
+    a.cancel();
+    var c = i?.t() ?? 1 - s;
+    i?.abort();
+    var m = s - c, d = (
+      /** @type {number} */
+      r.duration * Math.abs(m)
+    ), g = [];
+    if (d > 0) {
+      var l = !1;
+      if (x)
+        for (var p = Math.ceil(d / 16.666666666666668), v = 0; v <= p; v += 1) {
+          var y = c + m * M(v / p), b = br(x(y, 1 - y));
+          g.push(b), l ||= b.overflow === "hidden";
+        }
+      l && (e.style.overflow = "hidden"), E = () => {
+        var h = (
+          /** @type {number} */
+          /** @type {globalThis.Animation} */
+          a.currentTime
+        );
+        return c + m * M(h / d);
+      }, _ && Wr(() => {
+        if (a.playState !== "running") return !1;
+        var h = E();
+        return _(h, 1 - h), !0;
+      });
+    }
+    a = e.animate(g, { duration: d, fill: "forwards" }), a.onfinish = () => {
+      E = () => s, _?.(s, 1 - s), o();
+    };
+  }, {
+    abort: () => {
+      a && (a.cancel(), a.effect = null, a.onfinish = J);
+    },
+    deactivate: () => {
+      o = J;
+    },
+    reset: () => {
+      s === 0 && _?.(1, 0);
+    },
+    t: () => E()
+  };
+}
+const Xr = (e) => e;
+function Yr(e) {
+  const r = e - 1;
+  return r * r * r + 1;
+}
+function mr(e) {
+  const r = typeof e == "string" && e.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
+  return r ? [parseFloat(r[1]), r[2] || "px"] : [
+    /** @type {number} */
+    e,
+    "px"
+  ];
+}
+function Zr(e, { delay: r = 0, duration: i = 400, easing: s = Xr } = {}) {
+  const o = +getComputedStyle(e).opacity;
+  return {
+    delay: r,
+    duration: i,
+    easing: s,
+    css: (n) => `opacity: ${n * o}`
+  };
+}
+function hr(e, { delay: r = 0, duration: i = 400, easing: s = Yr, x: o = 0, y: n = 0, opacity: u = 0 } = {}) {
+  const f = getComputedStyle(e), q = +f.opacity, x = f.transform === "none" ? "" : f.transform, _ = q * (1 - u), [M, w] = mr(o), [C, E] = mr(n);
+  return {
+    delay: r,
+    duration: i,
+    easing: s,
+    css: (a, c) => `
+			transform: ${x} translate(${(1 - a) * M}${w}, ${(1 - a) * C}${E});
+			opacity: ${q - _ * c}`
+  };
+}
+async function Mr(e = !1) {
+  e && (await navigator.mediaDevices.getUserMedia({ audio: !0 })).getTracks().forEach((o) => o.stop());
+  const r = await navigator.mediaDevices.enumerateDevices(), i = r.filter((s) => s.deviceId).filter((s) => s.kind === "audioinput").map((s) => ({
+    id: s.deviceId,
+    label: s.label || `Microphone ${r.indexOf(s) + 1}`
+  }));
+  return i.length === 0 ? Mr(!0) : i;
+}
+async function re(e, r, i, s) {
+  I(r, !t(r)), t(i).length || await s();
+}
+var ee = $("<li><button> </button></li>"), te = $('<li><button class="devices-select__option svelte-q87ygv" disabled>No microphones found</button></li>'), oe = $('<li><button class="devices-select__option svelte-q87ygv" disabled>Loading Microphones...</button></li>'), ae = $('<ul role="listbox" aria-label="Select microphone"><!> <!> <!></ul>'), ie = $('<div class="container" role="group" aria-label="Audio recorder"><button class="devices-btn svelte-q87ygv" aria-haspopup="listbox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="devices-btn__icon svelte-q87ygv"><path d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path></svg></button> <!></div>');
+const se = {
+  hash: "svelte-q87ygv",
+  code: '.devices-btn.svelte-q87ygv {background:none;border:none;font-size:inherit;cursor:pointer;color:inherit;}.devices-btn__icon.svelte-q87ygv {width:0.75rem;height:0.75rem;fill:var(--fortyfour-recorder-btn-color);}.devices-select.svelte-q87ygv {display:none;flex-direction:column;list-style:none;margin:0;padding:0;border:var(--fortyfour-recorder-select-border);box-shadow:var(--fortyfour-recorder-select-shadow);border-radius:var(--fortyfour-recorder-select-radius);background:var(--fortyfour-recorder-select-bg);position:absolute;z-index:2147483647;overflow-y:auto;width:11rem;max-height:12rem;}.devices-select--is-open.svelte-q87ygv {display:flex;}.devices-select__option.svelte-q87ygv {padding:0.5rem 1rem;padding-left:0;background:none;border:none;text-align:left;cursor:pointer;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background 0.1s;font:inherit;font-size:var(--fortyfour-recorder-select-font-size);color:var(--fortyfour-recorder-select-color);}.devices-select__option.svelte-q87ygv:hover {background:var(--fortyfour-recorder-select-bg-hover);}.devices-select__option.svelte-q87ygv::before {content:"";display:inline-block;width:2ch;text-align:center;padding:0 0.25rem;}.devices-select__option--is-selected.svelte-q87ygv::before {content:"✓";}.devices-select__option.svelte-q87ygv:disabled {opacity:0.5;cursor:inherit;}.devices-select__option.svelte-q87ygv:disabled:hover {background:inherit;}'
+};
+function Sr(e, r) {
+  rr(r, !0), er(e, se);
+  let i = P(r, "deviceId", 15, ""), s = P(r, "disabled", 7, !1), o = j(ir([])), n = j(!1), u = j(!1), f;
+  wr(() => {
+    function a(c) {
+      c.composedPath().includes(f) || t(n) && I(n, !1);
+    }
+    return document.addEventListener("pointerdown", a), () => {
+      document.removeEventListener("pointerdown", a);
+    };
+  });
+  async function q() {
+    try {
+      I(u, !0), (await navigator.mediaDevices.getUserMedia({ audio: !0 })).getTracks().forEach((c) => c.stop()), I(o, await navigator.mediaDevices.enumerateDevices(), !0), I(
+        o,
+        t(o).filter((c) => c.deviceId).filter((c) => c.kind === "audioinput").map((c, m) => ({
+          deviceId: c.deviceId,
+          label: c.label || `Microphone ${m + 1}`
+        })),
+        !0
+      ), !i() && t(o).length && i(t(o)[0].deviceId), t(o).sort((c, m) => c.label.localeCompare(m.label)), I(u, !1);
+    } catch (a) {
+      console.error("Error accessing microphones:", a);
+    }
+  }
+  function x(a) {
+    return () => {
+      i(a), I(n, !1);
+    };
+  }
+  var _ = {
+    get deviceId() {
+      return i();
+    },
+    set deviceId(a = "") {
+      i(a), B();
+    },
+    get disabled() {
+      return s();
+    },
+    set disabled(a = !1) {
+      s(a), B();
+    }
+  }, M = ie(), w = T(M);
+  w.__click = [re, n, o, q];
+  var C = L(w, 2);
+  {
+    var E = (a) => {
+      var c = ae(), m = T(c);
+      lr(m, 17, () => t(o), ur, (v, y) => {
+        var b = ee(), h = T(b), D = fr(() => x(t(y).deviceId));
+        h.__click = function(...K) {
+          t(D)?.apply(this, K);
+        };
+        var A = T(h, !0);
+        S(h), S(b), N(() => {
+          X(
+            h,
+            1,
+            sr([
+              "devices-select__option",
+              t(y).deviceId === i() && "devices-select__option--is-selected"
+            ]),
+            "svelte-q87ygv"
+          ), h.disabled = s(), Y(A, t(y).label);
+        }), k(v, b);
+      });
+      var d = L(m, 2);
+      {
+        var g = (v) => {
+          var y = te();
+          k(v, y);
+        };
+        G(d, (v) => {
+          !t(o).length && !t(u) && v(g);
+        });
+      }
+      var l = L(d, 2);
+      {
+        var p = (v) => {
+          var y = oe();
+          k(v, y);
+        };
+        G(l, (v) => {
+          t(u) && v(p);
+        });
+      }
+      S(c), N(() => X(c, 1, `devices-select ${t(n) ? "devices-select--is-open" : ""}`, "svelte-q87ygv")), gr(3, c, () => Zr, () => ({ duration: 100 })), k(a, c);
+    };
+    G(C, (a) => {
+      t(n) && a(E);
+    });
+  }
+  return S(M), kr(M, (a) => f = a, () => f), N(() => ar(w, "aria-expanded", t(n))), k(e, M), tr(_);
+}
+cr(["click"]);
+Z(Sr, { deviceId: {}, disabled: {} }, [], [], !0);
+var ne = $("<button><!></button>");
+const ce = {
+  hash: "svelte-f3ispq",
+  code: ".btn.svelte-f3ispq {display:flex;align-items:center;gap:var(--fortyfour-recorder-btn-gap);font:inherit;border:none;padding:var(--fortyfour-recorder-btn-padding);border-radius:var(--fortyfour-recorder-btn-radius);background:var(--fortyfour-recorder-btn-bg);color:var(--fortyfour-recorder-btn-color);cursor:pointer;}.btn.svelte-f3ispq:hover {background:var(--fortyfour-recorder-btn-bg-hover);color:var(--fortyfour-recorder-btn-color-hover);}.btn.btn--recording.svelte-f3ispq {background:var(--fortyfour-recorder-red-bg);color:var(--fortyfour-recorder-red-color);}.btn.btn--primary.svelte-f3ispq {background:var(--fortyfour-recorder-btn-primary-bg);color:var(--fortyfour-recorder-btn-primary-color);}.btn.btn--primary.svelte-f3ispq:hover {background:var(--fortyfour-recorder-btn-primary-bg-hover);color:var(--fortyfour-recorder-btn-primary-color-hover);}"
+};
+function nr(e, r) {
+  rr(r, !0), er(e, ce);
+  const i = P(r, "type", 7), s = P(r, "onclick", 7, () => {
+  });
+  var o = {
+    get type() {
+      return i();
+    },
+    set type(f) {
+      i(f), B();
+    },
+    get onclick() {
+      return s();
+    },
+    set onclick(f = () => {
+    }) {
+      s(f), B();
+    }
+  }, n = ne();
+  n.__click = function(...f) {
+    s()?.apply(this, f);
+  };
+  var u = T(n);
+  return Kr(u, r, "default", {}), S(n), N(() => X(n, 1, sr(["btn", i() && `btn--${i()}`]), "svelte-f3ispq")), k(e, n), tr(o);
+}
+cr(["click"]);
+Z(nr, { type: {}, onclick: {} }, ["default"], [], !0);
+var de = $("<div></div> <!>", 1), le = $('<div class="time-elapsed svelte-11ls49v"> </div>'), fe = $('<div role="group" aria-label="Audio recorder"><!> <!> <!></div>');
+const ue = {
+  hash: "svelte-11ls49v",
+  code: `.container.svelte-11ls49v {display:flex;align-items:center;gap:1rem;}.record-icon.svelte-11ls49v {width:1.25rem;height:1.25rem;background:var(--fortyfour-recorder-red-bg);border-radius:50%;}.record-icon--is-recording.svelte-11ls49v {background:var(--fortyfour-recorder-red-color);
+    animation: svelte-11ls49v-pulse 2s infinite ease-out;}.time-elapsed.svelte-11ls49v {font-variant-numeric:tabular-nums;}
+
+  @keyframes svelte-11ls49v-pulse {
+    0% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 hsla(0, 100%, 100%, 0.7);
+    }
+    50% {
+      transform: scale(0.9);
+    }
+    100% {
+      transform: scale(1);
+      box-shadow: 0 0 0 8px hsla(0, 100%, 100%, 0);
+    }
+  }`
+};
+function Er(e, r) {
+  rr(r, !0), er(e, ue);
+  let i = P(r, "deviceId", 15, ""), s = P(r, "onDone", 7), o = j(ir({
+    state: "ready",
+    // "ready", "recording"
+    timeElapsed: 0,
+    error: null
+  })), n;
+  Br(() => {
+    n?.stop();
+  });
+  function u() {
+    t(o).state === "ready" ? f() : t(o).state === "recording" && q();
+  }
+  async function f() {
+    const a = await navigator.mediaDevices.getUserMedia({
+      audio: { deviceId: i() ? { exact: i() } : void 0 }
+    }), c = [];
+    n = new MediaRecorder(a), n.ondataavailable = (d) => c.push(d.data), n.onstop = () => {
+      t(o).state === "recording" && (a.getTracks().forEach((d) => d.stop()), s()(URL.createObjectURL(new Blob(c, { type: n.mimeType }))), t(o).state = "ready");
+    }, n.start();
+    const m = () => {
+      t(o).state === "recording" && (t(o).timeElapsed += 1, setTimeout(m, 1e3));
+    };
+    setTimeout(m, 1e3), t(o).state = "recording";
+  }
+  function q() {
+    n?.stop();
+  }
+  var x = {
+    get deviceId() {
+      return i();
+    },
+    set deviceId(a = "") {
+      i(a), B();
+    },
+    get onDone() {
+      return s();
+    },
+    set onDone(a) {
+      s(a), B();
+    }
+  }, _ = fe(), M = T(_);
+  {
+    let a = fr(() => t(o).state === "recording" && "recording");
+    nr(M, {
+      onclick: u,
+      get type() {
+        return t(a);
+      },
+      children: (c, m) => {
+        var d = de(), g = Q(d), l = L(g, 2);
+        {
+          var p = (y) => {
+            var b = vr("Record");
+            k(y, b);
+          }, v = (y) => {
+            var b = pr(), h = Q(b);
+            {
+              var D = (A) => {
+                var K = vr("Recording");
+                k(A, K);
+              };
+              G(
+                h,
+                (A) => {
+                  t(o).state === "recording" && A(D);
+                },
+                !0
+              );
+            }
+            k(y, b);
+          };
+          G(l, (y) => {
+            t(o).state === "ready" ? y(p) : y(v, !1);
+          });
+        }
+        N(() => X(
+          g,
+          1,
+          sr([
+            "record-icon",
+            t(o).state === "recording" && "record-icon--is-recording"
+          ]),
+          "svelte-11ls49v"
+        )), k(c, d);
+      },
+      $$slots: { default: !0 }
+    });
+  }
+  var w = L(M, 2);
+  {
+    let a = fr(() => t(o).state === "recording");
+    Sr(w, {
+      get disabled() {
+        return t(a);
+      },
+      get deviceId() {
+        return i();
+      },
+      set deviceId(c) {
+        i(c);
+      }
+    });
+  }
+  var C = L(w, 2);
+  {
+    var E = (a) => {
+      var c = le(), m = T(c);
+      S(c), N((d, g) => Y(m, `${d ?? ""}:${g ?? ""}`), [
+        () => Math.floor(t(o).timeElapsed / 60).toString(),
+        () => (t(o).timeElapsed % 60).toString().padStart(2, "0")
+      ]), k(a, c);
+    };
+    G(C, (a) => {
+      t(o).state === "recording" && a(E);
+    });
+  }
+  return S(_), N(() => X(
+    _,
+    1,
+    sr([
+      "container",
+      t(o).state === "recording" && "is-recording"
+    ]),
+    "svelte-11ls49v"
+  )), k(e, _), tr(x);
+}
+Z(Er, { deviceId: {}, onDone: {} }, [], [], !0);
+function ve(e, r, i) {
+  I(r, e.target.value, !0), i()(e.target.value);
+}
+var pe = $("<option> </option>"), ge = xr('<rect width="10" fill="#4A90E2"></rect>'), ye = $(`<div><label for="mic-select" class="svelte-zkiuts">Input Device</label> <select id="mic-select" class="svelte-zkiuts"></select> <div><div>Mic Test</div> <div>Having mic issues? Start a test and say something fun and see if it picks up your voice.</div> <div><button> </button> <audio></audio> <svg style="vertical-align: middle; margin-left: 1em; border: 1px solid #ccc; background:
+        #f9f9f9;" fill="none" xmlns="http://www.w3.org/2000/svg"></svg></div></div></div>`);
+const be = {
+  hash: "svelte-zkiuts",
+  code: "label.svelte-zkiuts {display:block;margin-bottom:0.5em;}select.svelte-zkiuts {display:block;font-size:inherit;}"
+};
+function me(e, r) {
+  rr(r, !0), er(e, be);
+  const i = P(r, "onSelectMic", 7);
+  let s = j(ir([])), o = j(null), n = null, u = j(!1), f = j(ir(Array(15).fill(1)));
+  wr(() => {
+    const d = async () => I(s, await Mr(), !0);
+    navigator.mediaDevices.ondevicechange = d, d();
+  });
+  async function q() {
+    if (n) {
+      if (t(u)) {
+        n.srcObject.getTracks().forEach((d) => d.stop()), I(u, !1);
+        return;
+      }
+      I(f, Array(15).fill(1), !0), I(u, !0);
+      try {
+        let A = function(F) {
+          if (!t(u)) {
+            v.close();
+            return;
+          }
+          const R = new Uint8Array(b.fftSize);
+          b.getByteTimeDomainData(R);
+          let z = 0;
+          for (let U = 0; U < R.length; U++) {
+            const V = (R[U] - 128) / 128;
+            z += V * V;
+          }
+          const O = Math.sqrt(z / R.length);
+          D.push(O), requestAnimationFrame(A);
+        };
+        const d = await navigator.mediaDevices.getUserMedia({
+          audio: {
+            deviceId: t(o) ? { exact: t(o) } : void 0
+          }
+        }), g = new MediaRecorder(d), l = [];
+        let p;
+        g.ondataavailable = (F) => F.data.size && l.push(F.data), g.onstop = () => {
+          const F = new Blob(l, { type: g.mimeType }), R = URL.createObjectURL(F);
+          n.src = R, n.play(), d.getTracks().forEach((z) => z.stop()), I(u, !1), clearInterval(p);
+        }, g.start(), setTimeout(() => g.stop(), 5e3);
+        const v = new (window.AudioContext || window.webkitAudioContext)(), y = v.createMediaStreamSource(d), b = v.createAnalyser();
+        y.connect(b), b.fftSize = 2048;
+        const h = (F, R) => {
+          if (F <= 0) return 0;
+          const z = 20 * Math.log10(F), O = -50, U = -10, W = (Math.min(U, Math.max(O, z)) - O) / (U - O);
+          return Math.round(W * R);
+        };
+        let D = [];
+        A(0);
+        let K = 0;
+        p = setInterval(
+          () => {
+            const F = D.reduce((z, O) => z + O, 0) / D.length, R = h(F, 100);
+            t(f)[K++] = R, D = [];
+          },
+          300
+        );
+      } catch (d) {
+        console.error("Error during mic check:", d);
+      }
+    }
+  }
+  var x = {
+    get onSelectMic() {
+      return i();
+    },
+    set onSelectMic(d) {
+      i(d), B();
+    }
+  }, _ = ye(), M = L(T(_), 2);
+  M.__change = [ve, o, i], lr(M, 21, () => t(s), ur, (d, g) => {
+    var l = pe(), p = T(l, !0);
+    S(l);
+    var v = {};
+    N(() => {
+      Y(p, t(g).label), v !== (v = t(g).id) && (l.value = (l.__value = t(g).id) ?? "");
+    }), k(d, l);
+  }), S(M);
+  var w = L(M, 2), C = L(T(w), 4), E = T(C);
+  E.__click = q;
+  var a = T(E, !0);
+  S(E);
+  var c = L(E, 2);
+  kr(c, (d) => n = d, () => n);
+  var m = L(c, 2);
+  return lr(m, 21, () => t(f), ur, (d, g, l) => {
+    var p = ge();
+    ar(p, "x", l * 12), N(() => {
+      ar(p, "y", 100 - t(g)), ar(p, "height", t(g));
+    }), k(d, p);
+  }), S(m), S(C), S(w), S(_), N(() => Y(a, t(u) ? "Stop Testing" : "Let's Check")), k(e, _), tr(x);
+}
+cr(["change", "click"]);
+Z(me, { onSelectMic: {} }, [], [], !0);
+var he = $('<div><p>Recording saved! ID:</p> <code><pre> </pre></code></div> <p><button class="primary">Record Again</button></p>', 1), _e = $("<p>Processing your recording…</p>"), we = xr('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="fill: currentColor; width: 1em; height: 1em;"><path d="M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z"></path></svg>'), ke = $('<div class="confirm svelte-1i5eb1b"><!> <!> <!></div>'), xe = $('<div class="row"><!></div>'), Ie = $('<div class="recorder svelte-1i5eb1b" role="group" aria-label="44 audio recorder"><!></div>');
+const Me = {
+  hash: "svelte-1i5eb1b",
+  code: `:host {--fortyfour-recorder-bg-0: #2d2d2d;--fortyfour-recorder-bg-1: #393939;--fortyfour-recorder-bg-2: #515151;--fortyfour-recorder-bg-primary: hsla(210, 50%, 60%, 1);--fortyfour-recorder-bg-primary-light: hsla(210, 55%, 64%, 1);--fortyfour-recorder-color-0: #d3d0c8;--fortyfour-recorder-color-primary: hsla(0, 0%, 100%, 0.9);--fortyfour-recorder-red-bg: #f2777a;--fortyfour-recorder-red-color: #ffffff;--fortyfour-recorder-font-size-lg: 1.25rem;--fortyfour-recorder-font-size-md: 1rem;--fortyfour-recorder-font-size-sm: 0.875rem;--fortyfour-recorder-font-size-xs: 0.6825rem;--fortyfour-recorder-radius-xl: 3rem;--fortyfour-recorder-radius-lg: 1rem;--fortyfour-recorder-radius-md: 0.5rem;--fortyfour-recorder-spacing-md: 1rem;--fortyfour-recorder-spacing-sm-1: 0.85rem;--fortyfour-recorder-spacing-sm: 0.5rem;--fortyfour-recorder-radius: var(--fortyfour-recorder-radius-lg);--fortyfour-recorder-bg: var(--fortyfour-recorder-bg-0);--fortyfour-recorder-color: var(--fortyfour-recorder-color-0);--fortyfour-recorder-btn-radius: var(--fortyfour-recorder-radius-xl);--fortyfour-recorder-btn-padding: var(--fortyfour-recorder-spacing-sm)
+      var(--fortyfour-recorder-spacing-sm-1);--fortyfour-recorder-btn-gap: var(--fortyfour-recorder-spacing-sm);--fortyfour-recorder-btn-bg: var(--fortyfour-recorder-bg-1);--fortyfour-recorder-btn-bg-hover: var(--fortyfour-recorder-bg-2);--fortyfour-recorder-btn-color: var(--fortyfour-recorder-color-0);--fortyfour-recorder-btn-color-hover: var(--fortyfour-recorder-color-0);--fortyfour-recorder-btn-primary-bg: var(--fortyfour-recorder-bg-primary);--fortyfour-recorder-btn-primary-bg-hover: var(--fortyfour-recorder-bg-primary-light);--fortyfour-recorder-btn-primary-color: var(--fortyfour-recorder-color-primary);--fortyfour-recorder-btn-primary-color-hover: var(--fortyfour-recorder-color-primary);--fortyfour-recorder-select-bg: var(--fortyfour-recorder-bg-0);--fortyfour-recorder-select-bg-hover: var(--fortyfour-recorder-bg-1);--fortyfour-recorder-select-border: 1px solid var(--fortyfour-recorder-bg-1);--fortyfour-recorder-select-radius: var(--fortyfour-recorder-radius-md);--fortyfour-recorder-select-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.1);--fortyfour-recorder-select-color: var(--fortyfour-recorder-color-0);--fortyfour-recorder-select-font-size: var(--fortyfour-recorder-font-size-xs);}.recorder.svelte-1i5eb1b {padding:var(--fortyfour-recorder-spacing-md);border-radius:var(--fortyfour-recorder-radius);background:var(--fortyfour-recorder-bg);color:var(--fortyfour-recorder-color);}.confirm.svelte-1i5eb1b {display:flex;align-items:stretch;gap:var(--fortyfour-recorder-spacing-sm);}`
+};
+function Se(e, r) {
+  rr(r, !0), er(e, Me);
+  const i = r.$$host;
+  let s = P(r, "projectId", 7), o = P(r, "labelsStr", 7, ""), n = P(r, "apiHost", 7, "api.44.audio");
+  const u = o() ? o().split(",").map((l) => l.trim()) : [];
+  let f = j(
+    "ready"
+    // "ready", "recording", "confirm", "processing", "done"
+  ), q = j(null), x = j(null), _ = j("");
+  async function M() {
+    if (t(f) !== "confirm" || !t(x))
+      return;
+    const l = new FormData();
+    l.append("projectId", s()), u.forEach((b) => l.append("labels", b));
+    const v = await (await fetch(t(x))).blob(), y = new File([v], "recording.audio", { type: v.type });
+    l.append("audioFile", y);
+    try {
+      const h = await (await fetch(`https://${n()}/recordings`, { method: "POST", body: l })).json();
+      I(q, h.recordingId, !0), I(f, "processing");
+      let D = !1;
+      for (; !D; )
+        await new Promise((A) => setTimeout(A, 2e3)), D = await C(t(q));
+      i.dispatchEvent(new CustomEvent("recording-complete", { detail: { recordingId: t(q) } })), I(f, "done");
+    } catch (b) {
+      console.error("Error saving recording:", b), I(f, "ready");
+    }
+  }
+  function w() {
+    I(x, null), I(f, "ready");
+  }
+  async function C(l) {
+    try {
+      const p = await fetch(`https://44hz.zuuu.us/recordings/${l}/status`);
+      if (!p.ok)
+        throw new Error("Failed to fetch data");
+      return (await p.json()).status === "ready";
+    } catch (p) {
+      return console.error(p), !1;
+    }
+  }
+  function E(l) {
+    I(x, l, !0), I(f, "confirm");
+  }
+  var a = {
+    get projectId() {
+      return s();
+    },
+    set projectId(l) {
+      s(l), B();
+    },
+    get labelsStr() {
+      return o();
+    },
+    set labelsStr(l = "") {
+      o(l), B();
+    },
+    get apiHost() {
+      return n();
+    },
+    set apiHost(l = "api.44.audio") {
+      n(l), B();
+    }
+  }, c = Ie(), m = T(c);
+  {
+    var d = (l) => {
+      var p = he(), v = Q(p), y = L(T(v), 2), b = T(y), h = T(b, !0);
+      S(b), S(y), S(v);
+      var D = L(v, 2), A = T(D);
+      A.__click = w, S(D), N(() => Y(h, t(q))), k(l, p);
+    }, g = (l) => {
+      var p = pr(), v = Q(p);
+      {
+        var y = (h) => {
+          var D = _e();
+          k(h, D);
+        }, b = (h) => {
+          var D = pr(), A = Q(D);
+          {
+            var K = (R) => {
+              var z = ke(), O = T(z);
+              Hr(O, {
+                get audioURL() {
+                  return t(x);
+                }
+              });
+              var U = L(O, 2);
+              nr(U, {
+                onclick: w,
+                children: (W, Cr) => {
+                  var dr = we();
+                  k(W, dr);
+                },
+                $$slots: { default: !0 }
+              });
+              var V = L(U, 2);
+              nr(V, {
+                type: "primary",
+                onclick: M,
+                children: (W, Cr) => {
+                  Gr();
+                  var dr = vr("Save");
+                  k(W, dr);
+                },
+                $$slots: { default: !0 }
+              }), S(z), gr(1, z, () => hr, () => ({ y: 20, duration: 700 })), k(R, z);
+            }, F = (R) => {
+              var z = xe(), O = T(z);
+              Er(O, {
+                onDone: E,
+                get deviceId() {
+                  return t(_);
+                },
+                set deviceId(U) {
+                  I(_, U, !0);
+                }
+              }), S(z), gr(1, z, () => hr, () => ({ y: -20, duration: 700 })), k(R, z);
+            };
+            G(
+              A,
+              (R) => {
+                t(f) === "confirm" ? R(K) : R(F, !1);
+              },
+              !0
+            );
+          }
+          k(h, D);
+        };
+        G(
+          v,
+          (h) => {
+            t(f) === "processing" ? h(y) : h(b, !1);
+          },
+          !0
+        );
+      }
+      k(l, p);
+    };
+    G(m, (l) => {
+      t(f) === "done" && t(q) ? l(d) : l(g, !1);
+    });
+  }
+  return S(c), k(e, c), tr(a);
+}
+cr(["click"]);
+customElements.define("fortyfour-audio-recorder", Z(
+  Se,
+  {
+    apiHost: { attribute: "api-host" },
+    projectId: { attribute: "project-id" },
+    labels: { attribute: "labels" },
+    labelsStr: {}
+  },
+  [],
+  [],
+  !0
+));