@44-audio/components 0.1.0-dev.2 → 0.1.0-dev.21

package/dist/recorder.es.js

@@ -1,375 +1,371 @@
-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);
-    }
+import { a4 as je, l as ae, m as se, K as ne, o as P, Z as _e, z as d, F as R, I as W, L as I, D as B, G as we, H as O, x as l, y as ie, r as D, C as T, q as e, M, v as re, w as Q, _ as Me, a0 as Se, B as N, X as ue, V as te, $ as ce, Q as Ue, T as xe, S as U, J as Oe, N as oe, O as ve, R as ze, a1 as he, a2 as Fe, P as Ne, t as He, a5 as qe, a6 as Ce } from "./index-DCaqXYMO.js";
+function Ge(b, s, n, c, i) {
+  var t = () => {
+    c(n[b]);
   };
-}
-function or(e, r) {
-  _r(() => {
-    e.dispatchEvent(new CustomEvent(r));
+  n.addEventListener(s, t), t(), (n === document.body || n === window || n === document) && je(() => {
+    n.removeEventListener(s, t);
   });
 }
-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 Ie(b) {
+  if (isNaN(b) || b < 0)
+    return "-:--";
+  const s = b / 1e3, n = Math.floor(s / 3600), c = Math.floor(s % 3600 / 60), i = Math.round(s % 60);
+  return n > 0 ? `${n}:${c.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}` : `${c}:${i.toString().padStart(2, "0")}`;
 }
-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();
+var Ve = ue('<rect rx="1"></rect>'), We = R('<div class="container svelte-efr4jv" role="group" aria-label="audio player"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="svelte-efr4jv"><!></svg></div>');
+const Je = {
+  hash: "svelte-efr4jv",
+  code: `svg.svelte-efr4jv {box-sizing:border-box;margin:0;padding:0;}.container.svelte-efr4jv {flex:1;box-sizing:border-box;margin:0;padding:0;display:flex;align-items:center;}.bar.svelte-efr4jv {transition:fill 0.2s;}.played.svelte-efr4jv {fill:var(--44-color-2, var(--fortyfour-recorder-bg-primary));}.unplayed.svelte-efr4jv {fill:var(--44-color-1, var(--fortyfour-recorder-color-0));}.recording-pulse.svelte-efr4jv {
+    animation: svelte-efr4jv-pulse 0.5s ease-out;}
+
+  @keyframes svelte-efr4jv-pulse {
+    0% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
+  }`
+};
+function Le(b, s) {
+  se(s, !0), ne(b, Je);
+  function n(r, o) {
+    const f = r.length / o, a = [];
+    for (let u = 0; u < o; u++) {
+      const m = Math.floor(u * f), E = Math.floor((u + 1) * f), V = r.slice(m, Math.max(m + 1, E)), $ = V.reduce((J, K) => J + K * K, 0), ge = Math.sqrt($ / V.length);
+      a.push(ge);
+    }
+    return a;
+  }
+  let c = P(s, "data", 7), i = P(s, "timeMs", 7, null), t = P(s, "barWidth", 7, 3), h = P(s, "spacing", 7, 1), g = P(s, "playedColor", 7, null), S = P(s, "unplayedColor", 7, null), _ = D(0), j = D(!1), k = null;
+  _e(() => {
+    const r = new ResizeObserver((o) => {
+      for (let f of o)
+        f.contentBoxSize ? d(_, f.contentBoxSize[0]?.inlineSize || f.contentBoxSize.inlineSize, !0) : d(_, f.contentRect.width, !0), d(j, !0);
+    });
+    return k && r.observe(k), () => {
+      r.disconnect();
+    };
+  });
+  const L = 56, H = 100, F = N(() => Math.floor(e(_) / (t() + h()))), y = N(() => n(c(), e(F))), p = N(() => e(y).length ? c().length / e(y).length : 1), v = N(() => H * e(p)), q = N(() => e(y).map((r) => {
+    const o = Math.max(3, Math.round(r / 100 * (L - 3) + 3));
+    return o % 2 === 0 ? o + 1 : o;
+  }));
+  var A = {
+    get data() {
+      return c();
+    },
+    set data(r) {
+      c(r), T();
+    },
+    get timeMs() {
+      return i();
+    },
+    set timeMs(r = null) {
+      i(r), T();
+    },
+    get barWidth() {
+      return t();
+    },
+    set barWidth(r = 3) {
+      t(r), T();
+    },
+    get spacing() {
+      return h();
+    },
+    set spacing(r = 1) {
+      h(r), T();
+    },
+    get playedColor() {
+      return g();
+    },
+    set playedColor(r = null) {
+      g(r), T();
+    },
+    get unplayedColor() {
+      return S();
+    },
+    set unplayedColor(r = null) {
+      S(r), T();
+    }
+  }, z = We(), x = I(z);
+  W(x, "height", L);
+  var w = I(x);
+  {
+    var C = (r) => {
+      var o = re(), f = Q(o);
+      Me(f, 17, () => e(q), Se, (a, u, m) => {
+        const E = N(() => m * e(v) < i()), V = N(() => i() === null && m === e(q).length - 1);
+        var $ = Ve();
+        O(() => {
+          te(
+            $,
+            0,
+            ce([
+              "bar",
+              e(E) ? "played" : "unplayed",
+              e(V) && "recording-pulse"
+            ]),
+            "svelte-efr4jv"
+          ), W($, "x", m * (t() + h())), W($, "y", L / 4 - e(u) / 2), W($, "width", t() - 1), W($, "height", e(u)), Ue($, e(E) ? g() ? `fill: ${g()}` : null : S() ? `fill: ${S()}` : null);
+        }), l(a, $);
+      }), l(r, o);
+    };
+    B(w, (r) => {
+      e(j) && r(C);
+    });
   }
-  return r;
+  return M(x), we(x, (r) => k = r, () => k), M(z), O(() => W(x, "viewBox", `0 0 ${e(_)} ${L / 2}`)), l(b, z), ie(A);
 }
-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
-    }));
+ae(
+  Le,
+  {
+    data: {},
+    timeMs: {},
+    barWidth: {},
+    spacing: {},
+    playedColor: {},
+    unplayedColor: {}
+  },
+  [],
+  [],
+  !0
+);
+var Xe = ue('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="icon svelte-7u5az2"><path d="M176 96C149.5 96 128 117.5 128 144L128 496C128 522.5 149.5 544 176 544L240 544C266.5 544 288 522.5 288 496L288 144C288 117.5 266.5 96 240 96L176 96zM400 96C373.5 96 352 117.5 352 144L352 496C352 522.5 373.5 544 400 544L464 544C490.5 544 512 522.5 512 496L512 144C512 117.5 490.5 96 464 96L400 96z"></path></svg>'), Ke = ue('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="icon svelte-7u5az2"><path d="M187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6C135.4 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9z"></path></svg>'), Qe = R('<div class="container svelte-7u5az2" role="group" aria-label="Audio player"><button class="btn svelte-7u5az2"><!></button> <!> <div class="time svelte-7u5az2"><!></div> <audio></audio></div>');
+const Ze = {
+  hash: "svelte-7u5az2",
+  code: ".container.svelte-7u5az2 {display:flex;align-items:stretch;gap:0.5rem;flex:1;}.btn.svelte-7u5az2 {border:none;border-radius:50%;padding:0.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1;flex-shrink:0;align-self:center;color:var(--fortyfour-recorder-btn-primary-color);background:var(--fortyfour-recorder-btn-primary-bg);}.btn.svelte-7u5az2:hover {color:var(--fortyfour-recorder-btn-primary-color-hover);background:var(--fortyfour-recorder-btn-primary-bg-hover);}.icon.svelte-7u5az2 {width:1.5em;height:1.5em;fill:currentColor;}.time.svelte-7u5az2 {display:flex;align-items:center;font-variant-numeric:tabular-nums;font-size:0.9rem;}"
+};
+function Ee(b, s) {
+  se(s, !0), ne(b, Ze);
+  let n = P(s, "audioURL", 7), c = P(s, "waveform", 7), i = D(null), t = D(0), h = D(0), g = D(
+    "ready"
+    // "ready", "playing", "paused"
+  ), S = null;
+  const j = typeof navigator < "u" && /iPad|iPhone|iPod/.test(navigator.userAgent) ? 350 : 0;
+  function k() {
+    e(i) && e(g) === "playing" && (d(t, e(i).currentTime, !0), S = requestAnimationFrame(k));
   }
-  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;
-      });
+  function L() {
+    d(g, "ready"), d(t, 0), S && (cancelAnimationFrame(S), S = null);
+  }
+  function H() {
+    e(i) && (e(g) === "playing" ? (e(i).pause(), d(g, "paused"), S && (cancelAnimationFrame(S), S = null)) : (e(i).play(), d(g, "playing"), k()));
+  }
+  var F = {
+    get audioURL() {
+      return n();
     },
-    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?.();
-      });
+    set audioURL(a) {
+      n(a), T();
     },
-    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;
+    get waveform() {
+      return c();
+    },
+    set waveform(a) {
+      c(a), T();
     }
-    m && Ar(() => {
-      Fr(() => a.in());
+  }, y = Qe(), p = I(y);
+  p.__click = H;
+  var v = I(p);
+  {
+    var q = (a) => {
+      var u = Xe();
+      l(a, u);
+    }, A = (a) => {
+      var u = Ke();
+      l(a, u);
+    };
+    B(v, (a) => {
+      e(g) === "playing" ? a(q) : a(A, !1);
     });
   }
-}
-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);
+  M(p);
+  var z = U(p, 2);
+  {
+    var x = (a) => {
+      {
+        let u = N(() => Math.round(e(t) * 1e3) + j);
+        Le(a, {
+          get timeMs() {
+            return e(u);
+          },
+          get data() {
+            return c();
+          }
+        });
       }
-    }), {
-      abort: () => {
-        f = !0, u?.abort();
-      },
-      deactivate: () => u.deactivate(),
-      reset: () => u.reset(),
-      t: () => u.t()
     };
+    B(z, (a) => {
+      c() && a(x);
+    });
   }
-  if (i?.deactivate(), !r?.duration)
-    return o(), {
-      abort: J,
-      deactivate: J,
-      reset: J,
-      t: () => s
+  var w = U(z, 2), C = I(w);
+  {
+    var r = (a) => {
+      var u = oe();
+      O((m) => ve(u, m), [() => Ie(e(t))]), l(a, u);
+    }, o = (a) => {
+      var u = oe();
+      O((m) => ve(u, m), [() => Ie(e(h))]), l(a, u);
     };
-  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);
+    B(C, (a) => {
+      ["playing", "paused"].includes(e(g)) ? a(r) : a(o, !1);
+    });
   }
-  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()
-  };
+  M(w);
+  var f = U(w, 2);
+  return we(f, (a) => d(i, a), () => e(i)), M(y), O(() => {
+    W(p, "aria-label", e(g) === "playing" ? "Pause" : "Play"), W(f, "src", n());
+  }), Oe("ended", f, L), Ge("duration", "durationchange", f, (a) => d(h, a)), l(b, y), ie(F);
 }
-const Xr = (e) => e;
-function Yr(e) {
-  const r = e - 1;
-  return r * r * r + 1;
+xe(["click"]);
+ae(Ee, { audioURL: {}, waveform: {} }, [], [], !0);
+async function Ye(b, s, n, c) {
+  d(s, !e(s)), e(n).length || await c();
 }
-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 = {
+var er = R("<li><button> </button></li>"), rr = R('<li><button class="devices-select__option svelte-q87ygv" disabled>No microphones found</button></li>'), tr = R('<li><button class="devices-select__option svelte-q87ygv" disabled>Loading Microphones...</button></li>'), or = R('<ul role="listbox" aria-label="Select microphone"><!> <!> <!></ul>'), ar = R('<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 sr = {
   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);
+function Re(b, s) {
+  se(s, !0), ne(b, sr);
+  let n = P(s, "deviceId", 15, ""), c = P(s, "disabled", 7, !1), i = D(ze([])), t = D(!1), h = D(!1), g;
+  _e(() => {
+    function y(p) {
+      p.composedPath().includes(g) || e(t) && d(t, !1);
     }
-    return document.addEventListener("pointerdown", a), () => {
-      document.removeEventListener("pointerdown", a);
+    return document.addEventListener("pointerdown", y), () => {
+      document.removeEventListener("pointerdown", y);
     };
   });
-  async function q() {
+  async function S() {
     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}`
+      d(h, !0), (await navigator.mediaDevices.getUserMedia({ audio: !0 })).getTracks().forEach((p) => p.stop()), d(i, await navigator.mediaDevices.enumerateDevices(), !0), d(
+        i,
+        e(i).filter((p) => p.deviceId).filter((p) => p.kind === "audioinput").map((p, v) => ({
+          deviceId: p.deviceId,
+          label: p.label || `Microphone ${v + 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);
+      ), !n() && e(i).length && n(e(i)[0].deviceId), e(i).sort((p, v) => p.label.localeCompare(v.label)), d(h, !1);
+    } catch (y) {
+      console.error("Error accessing microphones:", y);
     }
   }
-  function x(a) {
+  function _(y) {
     return () => {
-      i(a), I(n, !1);
+      n(y), d(t, !1);
     };
   }
-  var _ = {
+  var j = {
     get deviceId() {
-      return i();
+      return n();
     },
-    set deviceId(a = "") {
-      i(a), B();
+    set deviceId(y = "") {
+      n(y), T();
     },
     get disabled() {
-      return s();
+      return c();
     },
-    set disabled(a = !1) {
-      s(a), B();
+    set disabled(y = !1) {
+      c(y), T();
     }
-  }, M = ie(), w = T(M);
-  w.__click = [re, n, o, q];
-  var C = L(w, 2);
+  }, k = ar(), L = I(k);
+  L.__click = [Ye, t, i, S];
+  var H = U(L, 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 F = (y) => {
+      var p = or(), v = I(p);
+      Me(v, 17, () => e(i), Se, (w, C) => {
+        var r = er(), o = I(r), f = N(() => _(e(C).deviceId));
+        o.__click = function(...u) {
+          e(f)?.apply(this, u);
         };
-        var A = T(h, !0);
-        S(h), S(b), N(() => {
-          X(
-            h,
+        var a = I(o, !0);
+        M(o), M(r), O(() => {
+          te(
+            o,
             1,
-            sr([
+            ce([
               "devices-select__option",
-              t(y).deviceId === i() && "devices-select__option--is-selected"
+              e(C).deviceId === n() && "devices-select__option--is-selected"
             ]),
             "svelte-q87ygv"
-          ), h.disabled = s(), Y(A, t(y).label);
-        }), k(v, b);
+          ), o.disabled = c(), ve(a, e(C).label);
+        }), l(w, r);
       });
-      var d = L(m, 2);
+      var q = U(v, 2);
       {
-        var g = (v) => {
-          var y = te();
-          k(v, y);
+        var A = (w) => {
+          var C = rr();
+          l(w, C);
         };
-        G(d, (v) => {
-          !t(o).length && !t(u) && v(g);
+        B(q, (w) => {
+          !e(i).length && !e(h) && w(A);
         });
       }
-      var l = L(d, 2);
+      var z = U(q, 2);
       {
-        var p = (v) => {
-          var y = oe();
-          k(v, y);
+        var x = (w) => {
+          var C = tr();
+          l(w, C);
         };
-        G(l, (v) => {
-          t(u) && v(p);
+        B(z, (w) => {
+          e(h) && w(x);
         });
       }
-      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);
+      M(p), O(() => te(p, 1, `devices-select ${e(t) ? "devices-select--is-open" : ""}`, "svelte-q87ygv")), he(3, p, () => Fe, () => ({ duration: 100 })), l(y, p);
     };
-    G(C, (a) => {
-      t(n) && a(E);
+    B(H, (y) => {
+      e(t) && y(F);
     });
   }
-  return S(M), kr(M, (a) => f = a, () => f), N(() => ar(w, "aria-expanded", t(n))), k(e, M), tr(_);
+  return M(k), we(k, (y) => g = y, () => g), O(() => W(L, "aria-expanded", e(t))), l(b, k), ie(j);
 }
-cr(["click"]);
-Z(Sr, { deviceId: {}, disabled: {} }, [], [], !0);
-var ne = $("<button><!></button>");
-const ce = {
+xe(["click"]);
+ae(Re, { deviceId: {}, disabled: {} }, [], [], !0);
+var nr = R("<button><!></button>");
+const ir = {
   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, () => {
+function de(b, s) {
+  se(s, !0), ne(b, ir);
+  const n = P(s, "type", 7), c = P(s, "onclick", 7, () => {
   });
-  var o = {
+  var i = {
     get type() {
-      return i();
+      return n();
     },
-    set type(f) {
-      i(f), B();
+    set type(g) {
+      n(g), T();
     },
     get onclick() {
-      return s();
+      return c();
     },
-    set onclick(f = () => {
+    set onclick(g = () => {
     }) {
-      s(f), B();
+      c(g), T();
     }
-  }, n = ne();
-  n.__click = function(...f) {
-    s()?.apply(this, f);
+  }, t = nr();
+  t.__click = function(...g) {
+    c()?.apply(this, g);
   };
-  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);
+  var h = I(t);
+  return Ne(h, s, "default", {}, null), M(t), O(() => te(t, 1, ce(["btn", n() && `btn--${n()}`]), "svelte-f3ispq")), l(b, t), ie(i);
 }
-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;}
+xe(["click"]);
+ae(de, { type: {}, onclick: {} }, ["default"], [], !0);
+var lr = R("<div></div> <!>", 1), dr = R('<div class="recording-info svelte-fc16qh"><div class="live-waveform svelte-fc16qh"><!></div> <div class="time-elapsed svelte-fc16qh"> </div></div>'), cr = R('<div role="group" aria-label="Audio recorder"><!> <!> <!></div>');
+const vr = {
+  hash: "svelte-fc16qh",
+  code: `.container.svelte-fc16qh {display:flex;align-items:center;gap:1rem;min-height:56px;}.record-icon.svelte-fc16qh {width:1.25rem;height:1.25rem;background:var(--fortyfour-recorder-red-bg);border-radius:50%;}.record-icon--is-recording.svelte-fc16qh {background:var(--fortyfour-recorder-red-color);
+    animation: svelte-fc16qh-pulse 2s infinite ease-out;}.recording-info.svelte-fc16qh {display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0;}.live-waveform.svelte-fc16qh {flex:1;min-width:0;}.time-elapsed.svelte-fc16qh {font-variant-numeric:tabular-nums;flex-shrink:0;}
 
-  @keyframes svelte-11ls49v-pulse {
+  @keyframes svelte-fc16qh-pulse {
     0% {
       transform: scale(1);
       box-shadow: 0 0 0 0 hsla(0, 100%, 100%, 0.7);
@@ -383,396 +379,385 @@ const ue = {
     }
   }`
 };
-function Er(e, r) {
-  rr(r, !0), er(e, ue);
-  let i = P(r, "deviceId", 15, ""), s = P(r, "onDone", 7), o = j(ir({
+function Ae(b, s) {
+  se(s, !0), ne(b, vr);
+  let n = P(s, "deviceId", 15, ""), c = P(s, "onDone", 7);
+  const i = 100;
+  let t = D(ze({
     state: "ready",
     // "ready", "recording"
     timeElapsed: 0,
-    error: null
-  })), n;
-  Br(() => {
-    n?.stop();
+    error: null,
+    waveformSamples: []
+  })), h, g;
+  He(() => {
+    h?.stop();
+  }), _e(() => {
+    function v() {
+      document.hidden && e(t).state === "recording" && j();
+    }
+    return document.addEventListener("visibilitychange", v), () => {
+      document.removeEventListener("visibilitychange", v);
+    };
   });
-  function u() {
-    t(o).state === "ready" ? f() : t(o).state === "recording" && q();
+  function S() {
+    e(t).state === "ready" ? _() : e(t).state === "recording" && j();
   }
-  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));
+  async function _() {
+    const v = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        deviceId: n() ? { exact: n() } : void 0,
+        autoGainControl: !0,
+        noiseSuppression: !0
+      }
+    }), q = [];
+    h = new MediaRecorder(v), h.ondataavailable = (o) => q.push(o.data), g = new AudioContext();
+    const A = g.createAnalyser();
+    A.fftSize = 256, g.createMediaStreamSource(v).connect(A);
+    const x = new Uint8Array(A.frequencyBinCount);
+    let w = 0;
+    function C(o) {
+      if (e(t).state !== "recording") return;
+      A.getByteTimeDomainData(x);
+      let f = 0;
+      for (let m = 0; m < x.length; m++) {
+        const E = (x[m] - 128) / 128;
+        f += E * E;
+      }
+      const a = Math.sqrt(f / x.length), u = Math.min(1, a * 4);
+      o - w >= i && (e(t).waveformSamples = [...e(t).waveformSamples, Math.round(u * 100)], w = o), requestAnimationFrame(C);
+    }
+    h.onstop = () => {
+      if (e(t).state !== "recording")
+        return;
+      v.getTracks().forEach((f) => f.stop()), g?.close();
+      const o = e(t).waveformSamples;
+      e(t).waveformSamples = [], c()({
+        url: URL.createObjectURL(new Blob(q, { type: h.mimeType })),
+        waveform: o
+      }), e(t).state = "ready";
+    }, h.start();
+    const r = () => {
+      e(t).state === "recording" && (e(t).timeElapsed += 1, setTimeout(r, 1e3));
     };
-    setTimeout(m, 1e3), t(o).state = "recording";
+    setTimeout(r, 1e3), e(t).state = "recording", C();
   }
-  function q() {
-    n?.stop();
+  function j() {
+    h?.stop();
   }
-  var x = {
+  var k = {
     get deviceId() {
-      return i();
+      return n();
     },
-    set deviceId(a = "") {
-      i(a), B();
+    set deviceId(v = "") {
+      n(v), T();
     },
     get onDone() {
-      return s();
+      return c();
     },
-    set onDone(a) {
-      s(a), B();
+    set onDone(v) {
+      c(v), T();
     }
-  }, _ = fe(), M = T(_);
+  }, L = cr(), H = I(L);
   {
-    let a = fr(() => t(o).state === "recording" && "recording");
-    nr(M, {
-      onclick: u,
+    let v = N(() => e(t).state === "recording" && "recording");
+    de(H, {
+      onclick: S,
       get type() {
-        return t(a);
+        return e(v);
       },
-      children: (c, m) => {
-        var d = de(), g = Q(d), l = L(g, 2);
+      children: (q, A) => {
+        var z = lr(), x = Q(z), w = U(x, 2);
         {
-          var p = (y) => {
-            var b = vr("Record");
-            k(y, b);
-          }, v = (y) => {
-            var b = pr(), h = Q(b);
+          var C = (o) => {
+            var f = oe("Record");
+            l(o, f);
+          }, r = (o) => {
+            var f = re(), a = Q(f);
             {
-              var D = (A) => {
-                var K = vr("Recording");
-                k(A, K);
+              var u = (m) => {
+                var E = oe("Recording");
+                l(m, E);
               };
-              G(
-                h,
-                (A) => {
-                  t(o).state === "recording" && A(D);
+              B(
+                a,
+                (m) => {
+                  e(t).state === "recording" && m(u);
                 },
                 !0
               );
             }
-            k(y, b);
+            l(o, f);
           };
-          G(l, (y) => {
-            t(o).state === "ready" ? y(p) : y(v, !1);
+          B(w, (o) => {
+            e(t).state === "ready" ? o(C) : o(r, !1);
           });
         }
-        N(() => X(
-          g,
+        O(() => te(
+          x,
           1,
-          sr([
+          ce([
             "record-icon",
-            t(o).state === "recording" && "record-icon--is-recording"
+            e(t).state === "recording" && "record-icon--is-recording"
           ]),
-          "svelte-11ls49v"
-        )), k(c, d);
+          "svelte-fc16qh"
+        )), l(q, z);
       },
       $$slots: { default: !0 }
     });
   }
-  var w = L(M, 2);
+  var F = U(H, 2);
   {
-    let a = fr(() => t(o).state === "recording");
-    Sr(w, {
+    let v = N(() => e(t).state === "recording");
+    Re(F, {
       get disabled() {
-        return t(a);
+        return e(v);
       },
       get deviceId() {
-        return i();
+        return n();
       },
-      set deviceId(c) {
-        i(c);
+      set deviceId(q) {
+        n(q);
       }
     });
   }
-  var C = L(w, 2);
+  var y = U(F, 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);
+    var p = (v) => {
+      var q = dr(), A = I(q), z = I(A);
+      Le(z, {
+        get data() {
+          return e(t).waveformSamples;
+        }
+      }), M(A);
+      var x = U(A, 2), w = I(x);
+      M(x), M(q), O((C, r) => ve(w, `${C ?? ""}:${r ?? ""}`), [
+        () => Math.floor(e(t).timeElapsed / 60).toString(),
+        () => (e(t).timeElapsed % 60).toString().padStart(2, "0")
+      ]), l(v, q);
     };
-    G(C, (a) => {
-      t(o).state === "recording" && a(E);
+    B(y, (v) => {
+      e(t).state === "recording" && v(p);
     });
   }
-  return S(_), N(() => X(
-    _,
+  return M(L), O(() => te(
+    L,
     1,
-    sr([
+    ce([
       "container",
-      t(o).state === "recording" && "is-recording"
+      e(t).state === "recording" && "is-recording"
     ]),
-    "svelte-11ls49v"
-  )), k(e, _), tr(x);
+    "svelte-fc16qh"
+  )), l(b, L), ie(k);
 }
-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",
+ae(Ae, { deviceId: {}, onDone: {} }, [], [], !0);
+var fr = R('<p class="status-message svelte-14spe77">Recording saved successfully!</p>'), ur = R('<p class="status-message svelte-14spe77">Uploading...</p>'), gr = R('<p class="status-message svelte-14spe77">Processing...</p>'), pr = R('<div class="error svelte-14spe77"><p class="svelte-14spe77"> </p> <!></div>'), yr = ue('<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>'), mr = R('<div class="confirm svelte-14spe77"><!> <div class="confirm-actions svelte-14spe77"><!> <!></div></div>'), br = R('<div class="row"><!></div>'), hr = R('<div class="recorder svelte-14spe77" role="group" aria-label="44 audio recorder"><!></div>');
+const _r = {
+  hash: "svelte-14spe77",
   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);}`
+      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-14spe77 {padding:var(--fortyfour-recorder-spacing-md);border-radius:var(--fortyfour-recorder-radius);background:var(--fortyfour-recorder-bg);color:var(--fortyfour-recorder-color);}.confirm.svelte-14spe77 {display:flex;align-items:center;gap:var(--fortyfour-recorder-spacing-sm);}.confirm-actions.svelte-14spe77 {display:flex;gap:var(--fortyfour-recorder-spacing-sm);flex-shrink:0;}.error.svelte-14spe77 {display:flex;flex-direction:column;gap:var(--fortyfour-recorder-spacing-sm);}.error.svelte-14spe77 p:where(.svelte-14spe77) {color:var(--fortyfour-recorder-red-bg);margin:0;}.status-message.svelte-14spe77 {margin:0;text-align:center;}`
 };
-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(
+function wr(b, s) {
+  se(s, !0), ne(b, _r);
+  const n = s.$$host;
+  let c = P(s, "sessionId", 7), i = P(s, "labels", 7, ""), t = P(s, "apiHost", 7, "api.44.audio");
+  const h = N(() => i() ? i().split(",").map((r) => r.trim()).filter(Boolean) : []), g = 2e3, S = 30;
+  let _ = D(
     "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");
+    // "ready", "recording", "confirm", "uploading", "processing", "done", "error"
+  ), j = D(null), k = D(null), L = D(null), H = D(""), F = D(null);
+  async function y() {
+    if (!(e(_) !== "confirm" || !e(k))) {
+      d(_, "uploading");
+      try {
+        const r = await fetch(e(k));
+        if (!r.ok)
+          throw new Error("Failed to load audio data");
+        const o = await r.blob(), f = new File([o], "recording.audio", { type: o.type }), a = new FormData();
+        a.append("sessionId", c()), e(h).forEach(($) => a.append("labels", $)), a.append("audioFile", f), e(L) && a.append("waveform", JSON.stringify(e(L)));
+        const u = await fetch(`https://${t()}/v1/recordings`, { method: "POST", body: a });
+        if (!u.ok)
+          throw new Error(`Upload failed: ${u.status}`);
+        const m = await u.json();
+        d(j, m.recordingId, !0), d(_, "processing");
+        let E = !1, V = 0;
+        for (; !E && V < S; )
+          await new Promise(($) => setTimeout($, g)), E = await v(e(j)), V++;
+        if (!E) {
+          d(F, "Recording processing timeout. Please try again."), d(_, "error");
+          return;
+        }
+        n.dispatchEvent(new CustomEvent("recording-complete", { detail: { recordingId: e(j) } })), d(_, "done");
+      } catch (r) {
+        console.error("Error saving recording:", r), d(F, r.message || "Failed to save recording", !0), d(_, "error");
+      }
     }
   }
-  function w() {
-    I(x, null), I(f, "ready");
+  function p() {
+    d(k, null), d(L, null), d(_, "ready");
   }
-  async function C(l) {
+  async function v(r) {
     try {
-      const p = await fetch(`https://44hz.zuuu.us/recordings/${l}/status`);
-      if (!p.ok)
+      const o = await fetch(`https://${t()}/v1/recordings/${r}/status`);
+      if (!o.ok)
         throw new Error("Failed to fetch data");
-      return (await p.json()).status === "ready";
-    } catch (p) {
-      return console.error(p), !1;
+      return (await o.json()).status === "ready";
+    } catch (o) {
+      return console.error(o), !1;
     }
   }
-  function E(l) {
-    I(x, l, !0), I(f, "confirm");
+  function q(r) {
+    d(k, r.url, !0), d(L, r.waveform, !0), d(_, "confirm");
   }
-  var a = {
-    get projectId() {
-      return s();
+  var A = {
+    get sessionId() {
+      return c();
     },
-    set projectId(l) {
-      s(l), B();
+    set sessionId(r) {
+      c(r), T();
     },
-    get labelsStr() {
-      return o();
+    get labels() {
+      return i();
     },
-    set labelsStr(l = "") {
-      o(l), B();
+    set labels(r = "") {
+      i(r), T();
     },
     get apiHost() {
-      return n();
+      return t();
     },
-    set apiHost(l = "api.44.audio") {
-      n(l), B();
+    set apiHost(r = "api.44.audio") {
+      t(r), T();
     }
-  }, c = Ie(), m = T(c);
+  }, z = hr(), x = I(z);
   {
-    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 w = (r) => {
+      var o = fr();
+      l(r, o);
+    }, C = (r) => {
+      var o = re(), f = Q(o);
       {
-        var y = (h) => {
-          var D = _e();
-          k(h, D);
-        }, b = (h) => {
-          var D = pr(), A = Q(D);
+        var a = (m) => {
+          var E = ur();
+          l(m, E);
+        }, u = (m) => {
+          var E = re(), V = Q(E);
           {
-            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);
+            var $ = (J) => {
+              var K = gr();
+              l(J, K);
+            }, ge = (J) => {
+              var K = re(), Pe = Q(K);
+              {
+                var Te = (Z) => {
+                  var Y = pr(), le = I(Y), pe = I(le);
+                  M(le);
+                  var ye = U(le, 2);
+                  de(ye, {
+                    onclick: () => d(_, "confirm"),
+                    children: (X, G) => {
+                      qe();
+                      var ee = oe("Try Again");
+                      l(X, ee);
+                    },
+                    $$slots: { default: !0 }
+                  }), M(Y), O(() => ve(pe, `Error: ${e(F) ?? ""}`)), l(Z, Y);
+                }, De = (Z) => {
+                  var Y = re(), le = Q(Y);
+                  {
+                    var pe = (X) => {
+                      var G = mr(), ee = I(G);
+                      Ee(ee, {
+                        get audioURL() {
+                          return e(k);
+                        },
+                        get waveform() {
+                          return e(L);
+                        }
+                      });
+                      var fe = U(ee, 2), ke = I(fe);
+                      de(ke, {
+                        onclick: p,
+                        children: (me, Be) => {
+                          var be = yr();
+                          l(me, be);
+                        },
+                        $$slots: { default: !0 }
+                      });
+                      var $e = U(ke, 2);
+                      de($e, {
+                        type: "primary",
+                        onclick: y,
+                        children: (me, Be) => {
+                          qe();
+                          var be = oe("Save");
+                          l(me, be);
+                        },
+                        $$slots: { default: !0 }
+                      }), M(fe), M(G), he(1, G, () => Ce, () => ({ y: 20, duration: 700 })), l(X, G);
+                    }, ye = (X) => {
+                      var G = br(), ee = I(G);
+                      Ae(ee, {
+                        onDone: q,
+                        get deviceId() {
+                          return e(H);
+                        },
+                        set deviceId(fe) {
+                          d(H, fe, !0);
+                        }
+                      }), M(G), he(1, G, () => Ce, () => ({ y: -20, duration: 700 })), l(X, G);
+                    };
+                    B(
+                      le,
+                      (X) => {
+                        e(_) === "confirm" ? X(pe) : X(ye, !1);
+                      },
+                      !0
+                    );
+                  }
+                  l(Z, Y);
+                };
+                B(
+                  Pe,
+                  (Z) => {
+                    e(_) === "error" ? Z(Te) : Z(De, !1);
+                  },
+                  !0
+                );
+              }
+              l(J, K);
             };
-            G(
-              A,
-              (R) => {
-                t(f) === "confirm" ? R(K) : R(F, !1);
+            B(
+              V,
+              (J) => {
+                e(_) === "processing" ? J($) : J(ge, !1);
               },
               !0
             );
           }
-          k(h, D);
+          l(m, E);
         };
-        G(
-          v,
-          (h) => {
-            t(f) === "processing" ? h(y) : h(b, !1);
+        B(
+          f,
+          (m) => {
+            e(_) === "uploading" ? m(a) : m(u, !1);
           },
           !0
         );
       }
-      k(l, p);
+      l(r, o);
     };
-    G(m, (l) => {
-      t(f) === "done" && t(q) ? l(d) : l(g, !1);
+    B(x, (r) => {
+      e(_) === "done" ? r(w) : r(C, !1);
     });
   }
-  return S(c), k(e, c), tr(a);
+  return M(z), l(b, z), ie(A);
 }
-cr(["click"]);
-customElements.define("fortyfour-audio-recorder", Z(
-  Se,
+customElements.define("fortyfour-audio-recorder", ae(
+  wr,
   {
     apiHost: { attribute: "api-host" },
-    projectId: { attribute: "project-id" },
-    labels: { attribute: "labels" },
-    labelsStr: {}
+    sessionId: { attribute: "session-id" },
+    labels: { attribute: "labels" }
   },
   [],
   [],