@44-audio/components 0.1.0-dev.9 → 1.0.0-alpha.0

package/dist/recorder.es.js

@@ -1,777 +1,1571 @@
-import { h as Cr, C as Dr, D as Tr, E as qr, F as $r, G as Rr, H as zr, I as Lr, J as Ar, T as Fr, K as _r, L as Or, M as Ur, N as W, O as Nr, P as Pr, d as nr, c as Y, p as Z, a as rr, b as P, l as O, Q as ar, y as wr, f as R, g as T, e as z, i as H, z as kr, q as U, j as _, k as er, s as I, n as t, m as B, r as M, B as or, R as lr, u as fr, S as Q, U as ir, v as X, V as vr, W as Br, o as J, w as ur, x as pr, X as xr, A as jr, Y as Hr } from "./AudioPlayer-bUgQMAfs.mjs";
-function Gr(e, r, i, n, o) {
-  Cr && Dr();
-  var s = r.$$slots?.[i], f = !1;
-  s === !0 && (s = r.children, f = !0), s === void 0 || s(e, f ? () => n : n);
-}
-const Kr = () => performance.now(), j = {
-  // 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: () => Kr(),
-  tasks: /* @__PURE__ */ new Set()
+import { v as ge, x as Je, W as Er, y as E, O as w, Q as C, a5 as xe, S as I, H as o, I as Xe, M as D, ad as z, a3 as sr, Y as Ar, J as b, N as _, P as ar, $ as u, C as M, A as t, a0 as v, R as oe, F as U, G as k, a9 as Tr, aa as Or, L as V, a2 as Zr, ac as Lr, a6 as $r, V as et, X as Rr, a4 as R, ae as rr, af as rt, ab as tr, ag as br, ah as tt, ai as at, aj as Sr, ak as Cr, t as Pr, z as xr, D as Nr, K as st } from "./BarWaveform-BkBkQ8cb.js";
+var it = w("<fortyfour-recorder></fortyfour-recorder>", 2);
+const nt = {
+  hash: "svelte-8c87am",
+  code: ":host {display:block;}:host {--_bg-1: var(--fortyfour-recorder-bg-1, #393939);--_color-0: var(--fortyfour-recorder-color-0, #d3d0c8);}fortyfour-recorder.svelte-8c87am {--fortyfour-recorder-background: var(--fortyfour-recorder-bg, #2d2d2d);--fortyfour-recorder-text: var(--_color-0);--fortyfour-recorder-border: var(--_bg-1);--fortyfour-recorder-accent: var(--fortyfour-recorder-btn-primary-bg, hsla(210, 50%, 60%, 1));--fortyfour-recorder-muted: var(--_color-0);}"
 };
-function Ir() {
-  const e = j.now();
-  j.tasks.forEach((r) => {
-    r.c(e) || (j.tasks.delete(r), r.f());
-  }), j.tasks.size !== 0 && j.tick(Ir);
-}
-function Vr(e) {
-  let r;
-  return j.tasks.size === 0 && j.tick(Ir), {
-    promise: new Promise((i) => {
-      j.tasks.add(r = { c: e, f: i });
-    }),
-    abort() {
-      j.tasks.delete(r);
-    }
-  };
-}
-function tr(e, r) {
-  _r(() => {
-    e.dispatchEvent(new CustomEvent(r));
-  });
-}
-function Wr(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 n of i) {
-    const [o, s] = n.split(":");
-    if (!o || s === void 0) break;
-    const f = Wr(o.trim());
-    r[f] = s.trim();
-  }
-  return r;
-}
-const Jr = (e) => e;
-function gr(e, r, i, n) {
-  var o = (e & Nr) !== 0, s = (e & Pr) !== 0, f = o && s, v = (e & Fr) !== 0, q = f ? "both" : o ? "in" : "out", C, w = r.inert, x = r.style.overflow, k, D;
-  function E() {
-    return _r(() => C ??= i()(r, n?.() ?? /** @type {P} */
-    {}, {
-      direction: q
+function ot(d, e) {
+  Je(e, !0), Er(d, nt);
+  let r = E(e, "sessionId", 7), a = E(e, "labels", 7, "");
+  const i = e.$$host;
+  function n(c) {
+    i.dispatchEvent(new CustomEvent("recording-complete", {
+      bubbles: !0,
+      composed: !0,
+      detail: { recordingId: c.detail?.recordingId }
     }));
   }
-  var a = {
-    is_global: v,
-    in() {
-      if (r.inert = w, !o) {
-        D?.abort(), D?.reset?.();
-        return;
-      }
-      s || k?.abort(), tr(r, "introstart"), k = yr(r, E(), D, 1, () => {
-        tr(r, "introend"), k?.abort(), k = C = void 0, r.style.overflow = x;
-      });
-    },
-    out(c) {
-      if (!s) {
-        c?.(), C = void 0;
-        return;
-      }
-      r.inert = !0, tr(r, "outrostart"), D = yr(r, E(), k, 0, () => {
-        tr(r, "outroend"), c?.();
-      });
-    },
-    stop: () => {
-      k?.abort(), D?.abort();
-    }
-  }, d = (
-    /** @type {Effect} */
-    Tr
-  );
-  if ((d.transitions ??= []).push(a), o && qr) {
-    var m = v;
-    if (!m) {
-      for (var l = (
-        /** @type {Effect | null} */
-        d.parent
-      ); l && (l.f & $r) !== 0; )
-        for (; (l = l.parent) && (l.f & Rr) === 0; )
-          ;
-      m = !l || (l.f & zr) !== 0;
-    }
-    m && Lr(() => {
-      Ar(() => a.in());
-    });
-  }
-}
-function yr(e, r, i, n, o) {
-  var s = n === 1;
-  if (Or(r)) {
-    var f, v = !1;
-    return Ur(() => {
-      if (!v) {
-        var d = r({ direction: s ? "in" : "out" });
-        f = yr(e, d, i, n, o);
-      }
-    }), {
-      abort: () => {
-        v = !0, f?.abort();
-      },
-      deactivate: () => f.deactivate(),
-      reset: () => f.reset(),
-      t: () => f.t()
-    };
-  }
-  if (i?.deactivate(), !r?.duration)
-    return o(), {
-      abort: W,
-      deactivate: W,
-      reset: W,
-      t: () => n
-    };
-  const { delay: q = 0, css: C, tick: w, easing: x = Jr } = r;
-  var k = [];
-  if (s && i === void 0 && (w && w(0, 1), C)) {
-    var D = br(C(0, 1));
-    k.push(D, D);
-  }
-  var E = () => 1 - n, a = e.animate(k, { duration: q, fill: "forwards" });
-  return a.onfinish = () => {
-    a.cancel();
-    var d = i?.t() ?? 1 - n;
-    i?.abort();
-    var m = n - d, l = (
-      /** @type {number} */
-      r.duration * Math.abs(m)
-    ), c = [];
-    if (l > 0) {
-      var p = !1;
-      if (C)
-        for (var b = Math.ceil(l / 16.666666666666668), g = 0; g <= b; g += 1) {
-          var u = d + m * x(g / b), y = br(C(u, 1 - u));
-          c.push(y), p ||= y.overflow === "hidden";
-        }
-      p && (e.style.overflow = "hidden"), E = () => {
-        var h = (
-          /** @type {number} */
-          /** @type {globalThis.Animation} */
-          a.currentTime
-        );
-        return d + m * x(h / l);
-      }, w && Vr(() => {
-        if (a.playState !== "running") return !1;
-        var h = E();
-        return w(h, 1 - h), !0;
-      });
-    }
-    a = e.animate(c, { duration: l, fill: "forwards" }), a.onfinish = () => {
-      E = () => n, w?.(n, 1 - n), o();
-    };
-  }, {
-    abort: () => {
-      a && (a.cancel(), a.effect = null, a.onfinish = W);
+  var s = {
+    get sessionId() {
+      return r();
     },
-    deactivate: () => {
-      o = W;
+    set sessionId(c) {
+      r(c), D();
     },
-    reset: () => {
-      n === 0 && w?.(1, 0);
+    get labels() {
+      return a();
     },
-    t: () => E()
-  };
-}
-const Qr = (e) => e;
-function Xr(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 Yr(e, { delay: r = 0, duration: i = 400, easing: n = Qr } = {}) {
-  const o = +getComputedStyle(e).opacity;
-  return {
-    delay: r,
-    duration: i,
-    easing: n,
-    css: (s) => `opacity: ${s * o}`
-  };
+    set labels(c = "") {
+      a(c), D();
+    }
+  }, h = it();
+  return C(() => z(h, "session-id", r())), C(() => z(h, "labels", a())), xe(h, 1, "svelte-8c87am"), I("recording-complete", h, n), o(d, h), Xe(s);
 }
-function hr(e, { delay: r = 0, duration: i = 400, easing: n = Xr, x: o = 0, y: s = 0, opacity: f = 0 } = {}) {
-  const v = getComputedStyle(e), q = +v.opacity, C = v.transform === "none" ? "" : v.transform, w = q * (1 - f), [x, k] = mr(o), [D, E] = mr(s);
-  return {
-    delay: r,
-    duration: i,
-    easing: n,
-    css: (a, d) => `
-			transform: ${C} translate(${(1 - a) * x}${k}, ${(1 - a) * D}${E});
-			opacity: ${q - w * d}`
-  };
+customElements.define("fortyfour-audio-recorder", ge(
+  ot,
+  {
+    sessionId: { attribute: "session-id" },
+    labels: { attribute: "labels" }
+  },
+  [],
+  [],
+  !0
+));
+var ct = sr('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><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" fill="currentColor"></path></svg>');
+function zr(d) {
+  var e = ct();
+  o(d, e);
 }
-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((n) => n.deviceId).filter((n) => n.kind === "audioinput").map((n) => ({
-    id: n.deviceId,
-    label: n.label || `Microphone ${r.indexOf(n) + 1}`
-  }));
-  return i.length === 0 ? Mr(!0) : i;
+ge(zr, {}, [], [], !0);
+var lt = sr('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><path d="M448 288V128c0-70.7-57.3-128-128-128S192 57.3 192 128v42.4L425.2 384.6c14.5-27.2 22.8-58 22.8-90.6V288zM38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2s-6.3 25.5 4 33.7l592 464c10.4 8.2 25.5 6.3 33.7-4s6.3-25.5-4-33.7L417.8 297.3 38.8 5.1zM192 288v0l194.8 152.9C365.7 456.3 343.6 464 320 464c-79.5 0-144-64.5-144-144v-32zm-64 0c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 97.4 72.4 178 166.2 190.3V544H160c-17.7 0-32 14.3-32 32s14.3 32 32 32h320c17.7 0 32-14.3 32-32s-14.3-32-32-32h-70.2V478.3C462.4 471.2 508 437.5 536 392.5" fill="currentColor"></path></svg>');
+function Ur(d) {
+  var e = lt();
+  o(d, e);
 }
-async function Zr(e, r, i, n) {
-  I(r, !t(r)), t(i).length || await n();
+ge(Ur, {}, [], [], !0);
+var dt = sr('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><path d="M580.6 137.4c12.5 12.5 12.5 32.8 0 45.3l-336 336c-12.5 12.5-32.8 12.5-45.3 0l-144-144c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L222 450.7 535.4 137.4c12.5-12.5 32.8-12.5 45.3 0z" fill="currentColor"></path></svg>');
+function _r(d) {
+  var e = dt();
+  o(d, e);
 }
-var re = R("<li><button> </button></li>"), ee = R('<li><button class="devices-select__option svelte-q87ygv" disabled>No microphones found</button></li>'), te = R('<li><button class="devices-select__option svelte-q87ygv" disabled>Loading Microphones...</button></li>'), oe = R('<ul role="listbox" aria-label="Select microphone"><!> <!> <!></ul>'), ae = 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 ie = {
-  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;}'
+ge(_r, {}, [], [], !0);
+var ut = sr("<rect></rect>"), vt = w('<div class="container svelte-ldbjcm" role="group" aria-label="audio player"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="svelte-ldbjcm"><!></svg></div>');
+const ht = {
+  hash: "svelte-ldbjcm",
+  code: `svg.svelte-ldbjcm {box-sizing:border-box;margin:0;padding:0;}.container.svelte-ldbjcm {flex:1;min-width:0;width:100%;box-sizing:border-box;margin:0;padding:0;display:flex;align-items:center;}.bar.svelte-ldbjcm {transition:fill 0.2s;}.played.svelte-ldbjcm {fill:var(--44-color-2, var(--fortyfour-recorder-bg-primary));}.unplayed.svelte-ldbjcm {fill:var(--44-color-1, var(--fortyfour-recorder-color-0));}.recording-pulse.svelte-ldbjcm {
+    animation: svelte-ldbjcm-pulse 0.5s ease-out;}
+
+  @keyframes svelte-ldbjcm-pulse {
+    0% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
+  }`
 };
-function Er(e, r) {
-  Z(r, !0), rr(e, ie);
-  let i = P(r, "deviceId", 15, ""), n = P(r, "disabled", 7, !1), o = O(ar([])), s = O(!1), f = O(!1), v;
-  wr(() => {
-    function a(d) {
-      d.composedPath().includes(v) || t(s) && I(s, !1);
-    }
-    return document.addEventListener("pointerdown", a), () => {
-      document.removeEventListener("pointerdown", a);
+function jr(d, e) {
+  Je(e, !0), Er(d, ht);
+  let r = E(e, "data", 7), a = E(e, "timeMs", 7, null), i = E(e, "barWidth", 7, 3), n = E(e, "barGap", 7, 1), s = E(e, "barRadius", 7, 1), h = E(e, "minBarHeight", 7, 3), c = E(e, "height", 7, 56), l = E(e, "playedColor", 7, null), p = E(e, "unplayedColor", 7, null), L = M(0), m = M(!1), x = null;
+  Ar(() => {
+    const g = new ResizeObserver((G) => {
+      for (let Y of G)
+        Y.contentBoxSize ? b(L, Y.contentBoxSize[0]?.inlineSize ?? Y.contentBoxSize.inlineSize ?? 0, !0) : b(L, Y.contentRect.width, !0), b(m, !0);
+    });
+    return x && g.observe(x), () => {
+      g.disconnect();
     };
   });
-  async function q() {
-    try {
-      I(f, !0), (await navigator.mediaDevices.getUserMedia({ audio: !0 })).getTracks().forEach((d) => d.stop()), I(o, await navigator.mediaDevices.enumerateDevices(), !0), I(
-        o,
-        t(o).filter((d) => d.deviceId).filter((d) => d.kind === "audioinput").map((d, m) => ({
-          deviceId: d.deviceId,
-          label: d.label || `Microphone ${m + 1}`
-        })),
-        !0
-      ), !i() && t(o).length && i(t(o)[0].deviceId), t(o).sort((d, m) => d.label.localeCompare(m.label)), I(f, !1);
-    } catch (a) {
-      console.error("Error accessing microphones:", a);
-    }
-  }
-  function C(a) {
-    return () => {
-      i(a), I(s, !1);
-    };
-  }
-  var w = {
-    get deviceId() {
+  const P = 100, fe = V(() => Math.floor(t(L) / (i() + n()))), ce = V(() => Zr(r(), t(fe))), le = V(() => t(ce).length ? r().length / t(ce).length : 1), ee = V(() => P * t(le)), pe = V(() => t(ce).map((g) => {
+    const G = Math.max(h(), Math.round(g / 100 * (c() - h()) + h()));
+    return G % 2 === 0 ? G + 1 : G;
+  }));
+  var me = {
+    get data() {
+      return r();
+    },
+    set data(g) {
+      r(g), D();
+    },
+    get timeMs() {
+      return a();
+    },
+    set timeMs(g = null) {
+      a(g), D();
+    },
+    get barWidth() {
       return i();
     },
-    set deviceId(a = "") {
-      i(a), B();
+    set barWidth(g = 3) {
+      i(g), D();
     },
-    get disabled() {
+    get barGap() {
       return n();
     },
-    set disabled(a = !1) {
-      n(a), B();
+    set barGap(g = 1) {
+      n(g), D();
+    },
+    get barRadius() {
+      return s();
+    },
+    set barRadius(g = 1) {
+      s(g), D();
+    },
+    get minBarHeight() {
+      return h();
+    },
+    set minBarHeight(g = 3) {
+      h(g), D();
+    },
+    get height() {
+      return c();
+    },
+    set height(g = 56) {
+      c(g), D();
+    },
+    get playedColor() {
+      return l();
+    },
+    set playedColor(g = null) {
+      l(g), D();
+    },
+    get unplayedColor() {
+      return p();
+    },
+    set unplayedColor(g = null) {
+      p(g), D();
     }
-  }, x = ae(), k = T(x);
-  k.__click = [Zr, s, o, q];
-  var D = z(k, 2);
+  }, W = vt(), q = u(W), _e = u(q);
   {
-    var E = (a) => {
-      var d = oe(), m = T(d);
-      lr(m, 17, () => t(o), vr, (g, u) => {
-        var y = re(), h = T(y), L = fr(() => C(t(u).deviceId));
-        h.__click = function(...K) {
-          t(L)?.apply(this, K);
-        };
-        var N = T(h, !0);
-        M(h), M(y), U(() => {
-          Q(
-            h,
-            1,
-            ir([
-              "devices-select__option",
-              t(u).deviceId === i() && "devices-select__option--is-selected"
-            ]),
-            "svelte-q87ygv"
-          ), h.disabled = n(), X(N, t(u).label);
-        }), _(g, y);
-      });
-      var l = z(m, 2);
-      {
-        var c = (g) => {
-          var u = ee();
-          _(g, u);
-        };
-        H(l, (g) => {
-          !t(o).length && !t(f) && g(c);
-        });
-      }
-      var p = z(l, 2);
-      {
-        var b = (g) => {
-          var u = te();
-          _(g, u);
-        };
-        H(p, (g) => {
-          t(f) && g(b);
-        });
-      }
-      M(d), U(() => Q(d, 1, `devices-select ${t(s) ? "devices-select--is-open" : ""}`, "svelte-q87ygv")), gr(3, d, () => Yr, () => ({ duration: 100 })), _(a, d);
+    var Fe = (g) => {
+      var G = U(), Y = k(G);
+      Tr(Y, 17, () => t(pe), Or, (y, A, de) => {
+        const Ke = V(() => de * t(ee) < a()), Qe = V(() => a() === null && de === t(pe).length - 1);
+        var J = ut();
+        C(
+          (Ge) => {
+            xe(
+              J,
+              0,
+              Lr([
+                "bar",
+                t(Ke) ? "played" : "unplayed",
+                t(Qe) && "recording-pulse"
+              ]),
+              "svelte-ldbjcm"
+            ), oe(J, "rx", s()), oe(J, "x", de * (i() + n())), oe(J, "y", c() / 4 - t(A) / 2), oe(J, "width", Ge), oe(J, "height", t(A)), $r(J, t(Ke) ? l() ? `fill: ${l()}` : null : p() ? `fill: ${p()}` : null);
+          },
+          [() => Math.max(1, i() - 1)]
+        ), o(y, J);
+      }), o(g, G);
     };
-    H(D, (a) => {
-      t(s) && a(E);
+    _(_e, (g) => {
+      t(m) && g(Fe);
     });
   }
-  return M(x), kr(x, (a) => v = a, () => v), U(() => or(k, "aria-expanded", t(s))), _(e, x), er(w);
+  return v(q), ar(q, (g) => x = g, () => x), v(W), C(() => {
+    oe(q, "height", c()), oe(q, "viewBox", `0 0 ${t(L)} ${c() / 2}`);
+  }), o(d, W), Xe(me);
 }
-nr(["click"]);
-Y(Er, { deviceId: {}, disabled: {} }, [], [], !0);
-var se = R("<button><!></button>");
-const ne = {
-  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 sr(e, r) {
-  Z(r, !0), rr(e, ne);
-  const i = P(r, "type", 7), n = P(r, "onclick", 7, () => {
-  });
-  var o = {
-    get type() {
-      return i();
-    },
-    set type(v) {
-      i(v), B();
-    },
-    get onclick() {
-      return n();
-    },
-    set onclick(v = () => {
-    }) {
-      n(v), B();
-    }
-  }, s = se();
-  s.__click = function(...v) {
-    n()?.apply(this, v);
-  };
-  var f = T(s);
-  return Gr(f, r, "default", {}), M(s), U(() => Q(s, 1, ir(["btn", i() && `btn--${i()}`]), "svelte-f3ispq")), _(e, s), er(o);
+ge(
+  jr,
+  {
+    data: {},
+    timeMs: {},
+    barWidth: {},
+    barGap: {},
+    barRadius: {},
+    minBarHeight: {},
+    height: {},
+    playedColor: {},
+    unplayedColor: {}
+  },
+  [],
+  [],
+  !0
+);
+function gt(d, e, r) {
+  t(e)?.setDevice(d.target.value), b(r, d.target.value, !0);
+}
+function Mr(d, e, r) {
+  t(e) === "needs-permission" ? t(r)?.requestPermission() : t(r)?.start();
+}
+function ft(d, e) {
+  t(e)?.stop();
+}
+function pt(d, e, r, a) {
+  t(e)?.save(r(), t(a));
+}
+function yr(d, e) {
+  t(e)?.reset();
 }
-nr(["click"]);
-Y(sr, { type: {}, onclick: {} }, ["default"], [], !0);
-var ce = R("<div></div> <!>", 1), de = R('<div class="time-elapsed svelte-11ls49v"> </div>'), le = R('<div role="group" aria-label="Audio recorder"><!> <!> <!></div>');
-const fe = {
-  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;}
+function mt(d, e) {
+  t(e)?.retry();
+}
+function bt(d, e) {
+  t(e)?.togglePlay();
+}
+var yt = w('<div class="row svelte-419ex5"><button class="record-btn round svelte-419ex5" part="button" disabled aria-label="Record"><span class="record-circle svelte-419ex5"></span></button></div>'), wt = w('<span class="svelte-419ex5">Record</span>'), xt = w('<div class="row svelte-419ex5"><button class="record-btn round svelte-419ex5" part="button" aria-label="Record"><span class="record-circle svelte-419ex5"></span> <!></button></div>'), _t = w('<div class="row svelte-419ex5"><span class="record-circle disabled svelte-419ex5"></span> <span class="message-text svelte-419ex5">Microphone Access Blocked</span></div>'), Et = w('<div class="row svelte-419ex5"><span class="icon-muted svelte-419ex5"><!></span> <span class="message-text svelte-419ex5">No microphone</span></div>'), Dt = w('<span class="svelte-419ex5">Record</span>'), Rt = w('<option class="svelte-419ex5"> </option>'), St = w('<div class="row svelte-419ex5"><button class="record-btn round svelte-419ex5" part="button" aria-label="Record"><span class="record-circle svelte-419ex5"></span> <!></button> <select class="mic-select svelte-419ex5" part="select" aria-label="Microphone"><option class="svelte-419ex5">Default Microphone</option><!></select></div>'), Ct = w('<div class="row svelte-419ex5"><div class="countdown svelte-419ex5"> </div></div>'), Pt = w('<span class="svelte-419ex5">Stop</span>'), Mt = w('<div class="live-waveform svelte-419ex5"><!></div>'), kt = w('<div class="row svelte-419ex5"><button class="record-btn svelte-419ex5" part="button" aria-label="Stop recording"><span class="stop-square svelte-419ex5"></span> <!></button> <span class="recording-indicator svelte-419ex5"></span> <span class="recording-label svelte-419ex5">Recording</span> <!> <span class="elapsed svelte-419ex5"> </span></div>'), It = w('<span class="svelte-419ex5">Discard</span>'), At = w('<span class="svelte-419ex5">Save</span>'), Tt = w('<fortyfour-preview-recording></fortyfour-preview-recording> <div class="row svelte-419ex5"><button class="record-btn svelte-419ex5" part="button"><!></button> <fortyfour-bar-waveform></fortyfour-bar-waveform> <fortyfour-duration></fortyfour-duration> <button class="record-btn svelte-419ex5" part="button" aria-label="Discard"><!> <!></button> <button class="record-btn svelte-419ex5" part="button" aria-label="Save"><!> <!></button></div>', 3), Ot = w('<div class="row svelte-419ex5"><span class="icon-accent svelte-419ex5"><!></span> <span class="muted-text svelte-419ex5">Uploading...</span></div>'), Lt = w('<div class="row svelte-419ex5"><span class="icon-accent svelte-419ex5"><!></span> <span class="muted-text svelte-419ex5">Processing...</span></div>'), Nt = w('<div class="row svelte-419ex5"><span class="icon-accent svelte-419ex5"><!></span> <span class="success-text svelte-419ex5">Saved</span></div>'), zt = w('<span class="svelte-419ex5">Try Again</span>'), Ut = w('<span class="svelte-419ex5">Start Over</span>'), jt = w('<div class="row svelte-419ex5"><span class="icon-accent svelte-419ex5"><!></span> <div class="error-container svelte-419ex5"><p class="error-message svelte-419ex5"> </p></div> <div class="btn-group svelte-419ex5"><button class="record-btn svelte-419ex5" part="button" aria-label="Try Again"><span class="btn-icon svelte-419ex5">&#x21bb;</span> <!></button> <button class="record-btn svelte-419ex5" part="button" aria-label="Start Over"><span class="btn-icon svelte-419ex5">&#x2715;</span> <!></button></div></div>'), Ft = w('<span class="svelte-419ex5">Start Over</span>'), Gt = w('<div class="row svelte-419ex5"><span class="icon-accent svelte-419ex5"><!></span> <p class="muted-text svelte-419ex5">Recording interrupted</p> <button class="record-btn svelte-419ex5" part="button" aria-label="Start Over"><span class="btn-icon svelte-419ex5">&#x2715;</span> <!></button></div>'), qt = w("<fortyfour-recording-session></fortyfour-recording-session> <div><!></div>", 3);
+const Ht = {
+  hash: "svelte-419ex5",
+  code: `:host {--fortyfour-recorder-font-family: system-ui, sans-serif;--fortyfour-recorder-font-size: 14px;--fortyfour-recorder-accent: #c4956a;--fortyfour-recorder-background: #faf8f5;--fortyfour-recorder-text: #2c2620;--fortyfour-recorder-muted: #8c8279;--fortyfour-recorder-border: #d9d4cc;display:block;font-family:var(--fortyfour-recorder-font-family);font-size:var(--fortyfour-recorder-font-size);}.container.svelte-419ex5 {--recorder-btn-size: 36px;--recorder-row-gap: 0.5rem;--recorder-row-min-height: 40px;--recorder-container-radius: 12px;--recorder-btn-radius: 8px;--recorder-btn-padding: 8px;border:1px solid var(--fortyfour-recorder-border);background:var(--fortyfour-recorder-background);border-radius:var(--recorder-container-radius);box-shadow:0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);padding:0.5rem;overflow:hidden;width:100%;box-sizing:border-box;display:grid;}.row.svelte-419ex5 {display:flex;flex-direction:row;align-items:center;gap:var(--recorder-row-gap);min-height:var(--recorder-row-min-height);min-width:0;grid-area:1 / 1;}.mic-select.svelte-419ex5 {flex:1;min-width:0;max-width:240px;padding:0.5rem 0.625rem;border-radius:var(--recorder-btn-radius);border:1px solid var(--fortyfour-recorder-border);background:var(--fortyfour-recorder-background);color:var(--fortyfour-recorder-text);font-family:var(--fortyfour-recorder-font-family);font-size:1em;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%238c8279' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5rem center;padding-right:1.75rem;transition:border-color 120ms ease;}.mic-select.svelte-419ex5:hover {border-color:var(--fortyfour-recorder-accent);}.mic-select.svelte-419ex5:disabled {opacity:0.6;cursor:default;}.mic-select.svelte-419ex5:focus-visible {outline:2px solid var(--fortyfour-recorder-accent);outline-offset:2px;}.record-circle.svelte-419ex5 {width:16px;height:16px;border-radius:50%;background:currentColor;flex-shrink:0;}.stop-square.svelte-419ex5 {width:12px;height:12px;border-radius:2px;background:currentColor;flex-shrink:0;}.record-circle.disabled.svelte-419ex5 {background:var(--fortyfour-recorder-muted);opacity:0.4;}.icon-muted.svelte-419ex5 {display:flex;width:20px;height:20px;color:var(--fortyfour-recorder-muted);flex-shrink:0;}.icon-accent.svelte-419ex5 {display:flex;width:20px;height:20px;color:var(--fortyfour-recorder-accent);flex-shrink:0;}.message-text.svelte-419ex5 {color:var(--fortyfour-recorder-muted);}.success-text.svelte-419ex5 {color:var(--fortyfour-recorder-accent);font-weight:500;}.record-btn.svelte-419ex5 {display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-width:var(--recorder-btn-size);min-height:var(--recorder-btn-size);padding:var(--recorder-btn-padding);border:none;border-radius:var(--recorder-btn-radius);box-sizing:border-box;background:var(--fortyfour-recorder-accent);color:var(--fortyfour-recorder-background);font-family:var(--fortyfour-recorder-font-family);font-size:1em;cursor:pointer;flex-shrink:0;transition:filter 120ms ease, transform 120ms ease;}.has-labels.svelte-419ex5 .record-btn:where(.svelte-419ex5) {padding-left:1rem;padding-right:1rem;}.record-btn.round.svelte-419ex5 {border-radius:999px;}.record-btn.svelte-419ex5:disabled {opacity:0.4;cursor:default;}.record-btn.svelte-419ex5:not(:disabled):hover {filter:brightness(1.1);}.record-btn.svelte-419ex5:not(:disabled):active {transform:scale(0.95);filter:brightness(0.95);}.record-btn.svelte-419ex5:focus-visible {outline:2px solid var(--fortyfour-recorder-accent);outline-offset:2px;}.countdown.svelte-419ex5 {display:inline-flex;align-items:center;justify-content:center;width:var(--recorder-btn-size);height:var(--recorder-btn-size);border-radius:var(--recorder-btn-radius);background:var(--fortyfour-recorder-accent);color:var(--fortyfour-recorder-background);font-weight:700;font-variant-numeric:tabular-nums;flex-shrink:0;}.recording-indicator.svelte-419ex5 {width:10px;height:10px;border-radius:50%;background:var(--fortyfour-recorder-accent);
+    animation: svelte-419ex5-pulse 1s ease-in-out infinite;flex-shrink:0;}.recording-label.svelte-419ex5 {font-size:0.875em;font-weight:600;color:var(--fortyfour-recorder-accent);flex-shrink:0;}
 
-  @keyframes svelte-11ls49v-pulse {
-    0% {
+  @keyframes svelte-419ex5-pulse {
+    0%,
+    100% {
+      opacity: 1;
       transform: scale(1);
-      box-shadow: 0 0 0 0 hsla(0, 100%, 100%, 0.7);
     }
     50% {
-      transform: scale(0.9);
+      opacity: 0.35;
+      transform: scale(0.85);
     }
-    100% {
-      transform: scale(1);
-      box-shadow: 0 0 0 8px hsla(0, 100%, 100%, 0);
-    }
-  }`
+  }.elapsed.svelte-419ex5 {font-variant-numeric:tabular-nums;font-size:1em;color:var(--fortyfour-recorder-text);flex-shrink:0;}.live-waveform.svelte-419ex5 {flex:1;min-width:0;display:flex;align-items:center;}.row.svelte-419ex5 fortyfour-bar-waveform {--waveform-progress-color: var(--fortyfour-recorder-waveform-progress, var(--fortyfour-recorder-accent));--waveform-track-color: var(--fortyfour-recorder-border);--waveform-focus-color: var(--fortyfour-recorder-accent);flex:1;min-width:0;}.row.svelte-419ex5 fortyfour-duration {--fortyfour-duration-font-family: var(--fortyfour-recorder-font-family);--fortyfour-duration-font-size: 1em;--fortyfour-duration-color: var(--fortyfour-recorder-text);flex-shrink:0;}.muted-text.svelte-419ex5 {color:var(--fortyfour-recorder-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}.error-container.svelte-419ex5 {flex:1;min-width:0;}.error-message.svelte-419ex5 {margin:0;color:var(--fortyfour-recorder-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.btn-group.svelte-419ex5 {display:flex;gap:var(--recorder-row-gap);flex-shrink:0;}.record-btn.svelte-419ex5 svg {width:16px;height:16px;fill:currentColor;}.btn-icon.svelte-419ex5 {display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:1em;line-height:1;}.container.compact.svelte-419ex5 {--recorder-row-gap: 0.5rem;--recorder-row-min-height: 32px;padding:0.25rem;}.container.comfortable.svelte-419ex5 {--recorder-row-gap: 0.75rem;--recorder-row-min-height: 48px;padding:0.75rem;}.container.pill.svelte-419ex5 {--recorder-container-radius: 999px;--recorder-btn-radius: 999px;}.container.square.svelte-419ex5 {--recorder-container-radius: 0;--recorder-btn-radius: 0;}`
 };
-function Sr(e, r) {
-  Z(r, !0), rr(e, fe);
-  let i = P(r, "deviceId", 15, ""), n = P(r, "onDone", 7), o = O(ar({
-    state: "ready",
-    // "ready", "recording"
-    timeElapsed: 0,
-    error: null
-  })), s;
-  Br(() => {
-    s?.stop();
-  });
-  function f() {
-    t(o).state === "ready" ? v() : t(o).state === "recording" && q();
-  }
-  async function v() {
-    const a = await navigator.mediaDevices.getUserMedia({
-      audio: { deviceId: i() ? { exact: i() } : void 0 }
-    }), d = [];
-    s = new MediaRecorder(a), s.ondataavailable = (l) => d.push(l.data), s.onstop = () => {
-      t(o).state === "recording" && (a.getTracks().forEach((l) => l.stop()), n()(URL.createObjectURL(new Blob(d, { type: s.mimeType }))), t(o).state = "ready");
-    }, s.start();
-    const m = () => {
-      t(o).state === "recording" && (t(o).timeElapsed += 1, setTimeout(m, 1e3));
-    };
-    setTimeout(m, 1e3), t(o).state = "recording";
+function Bt(d, e) {
+  Je(e, !0), Er(d, Ht);
+  const r = e.$$host;
+  let a = E(e, "sessionId", 7, null), i = E(e, "labels", 7, ""), n = E(e, "countdownMs", 7, 3e3), s = E(e, "maxDurationMs", 7, null), h = E(e, "shape", 7, "pill"), c = E(e, "buttonLabel", 7, "icon"), l = E(e, "visualization", 7, "waveform"), p = E(e, "spacing", 7, "default");
+  const L = `fortyfour-preview-${crypto.randomUUID().slice(0, 8)}`;
+  let m = M(null), x = M("initializing"), P = M(0), fe = M(0), ce = M(null), le = M(Rr([])), ee = M(null), pe = M(Rr([])), me = M(null), W = M(null), q = M(!1);
+  const _e = V(() => i() ? i().split(",").map((f) => f.trim()).filter(Boolean) : []), Fe = { compact: 28, comfortable: 40 }, g = V(() => Fe[p()] ?? 32), G = V(() => s() ? br(t(P)) + " / " + br(Number(s())) : br(t(P))), Y = {
+    "invalid-request": "Unable to save recording. Please try again.",
+    "rate-limited": "Too many requests. Please wait and try again.",
+    "server-error": "Server error. Please try again later.",
+    "upload-failed": "Upload failed. Please check your connection and try again.",
+    "processing-failed": "Processing failed. Please try again.",
+    "processing-timeout": "Processing is taking too long. Please try again.",
+    "recording-failed": "Unable to access microphone."
+  };
+  function y(f) {
+    return f && Y[f.code] || "Something went wrong.";
   }
-  function q() {
-    s?.stop();
+  function A() {
+    b(x, t(m)?.state ?? "initializing", !0), b(ce, t(m)?.audioUrl, !0), b(ee, t(m)?.error, !0), t(ee) && console.warn(`fortyfour-recorder: ${t(ee).code} — ${t(ee).message}`), r.setAttribute("data-state", t(x));
+  }
+  function de() {
+    b(pe, t(m)?.devices || [], !0), b(me, t(m)?.deviceId || null, !0);
+  }
+  function Ke() {
+    t(m)?.refreshDevices(), de();
+  }
+  function Qe() {
+    b(P, t(m)?.elapsedTime || 0, !0), b(fe, t(m)?.countdown || 0, !0), b(le, t(m)?.waveformSamples || [], !0);
+  }
+  function J(f) {
+    A(), r.dispatchEvent(new CustomEvent("recording-complete", {
+      bubbles: !0,
+      composed: !0,
+      detail: {
+        recordingId: t(m)?.recordingId,
+        recording: f.detail?.recording
+      }
+    }));
   }
-  var C = {
-    get deviceId() {
+  r._setApiFactory = (f) => {
+    t(m)?._setApiFactory(f);
+  };
+  function Ge() {
+    b(q, t(W)?.state === "playing");
+  }
+  var Fr = {
+    get sessionId() {
+      return a();
+    },
+    set sessionId(f = null) {
+      a(f), D();
+    },
+    get labels() {
       return i();
     },
-    set deviceId(a = "") {
-      i(a), B();
+    set labels(f = "") {
+      i(f), D();
     },
-    get onDone() {
+    get countdownMs() {
       return n();
     },
-    set onDone(a) {
-      n(a), B();
+    set countdownMs(f = 3e3) {
+      n(f), D();
+    },
+    get maxDurationMs() {
+      return s();
+    },
+    set maxDurationMs(f = null) {
+      s(f), D();
+    },
+    get shape() {
+      return h();
+    },
+    set shape(f = "pill") {
+      h(f), D();
+    },
+    get buttonLabel() {
+      return c();
+    },
+    set buttonLabel(f = "icon") {
+      c(f), D();
+    },
+    get visualization() {
+      return l();
+    },
+    set visualization(f = "waveform") {
+      l(f), D();
+    },
+    get spacing() {
+      return p();
+    },
+    set spacing(f = "default") {
+      p(f), D();
     }
-  }, w = le(), x = T(w);
-  {
-    let a = fr(() => t(o).state === "recording" && "recording");
-    sr(x, {
-      onclick: f,
-      get type() {
-        return t(a);
-      },
-      children: (d, m) => {
-        var l = ce(), c = J(l), p = z(c, 2);
-        {
-          var b = (u) => {
-            var y = ur("Record");
-            _(u, y);
-          }, g = (u) => {
-            var y = pr(), h = J(y);
-            {
-              var L = (N) => {
-                var K = ur("Recording");
-                _(N, K);
-              };
-              H(
-                h,
-                (N) => {
-                  t(o).state === "recording" && N(L);
-                },
-                !0
-              );
-            }
-            _(u, y);
-          };
-          H(p, (u) => {
-            t(o).state === "ready" ? u(b) : u(g, !1);
-          });
-        }
-        U(() => Q(
-          c,
-          1,
-          ir([
-            "record-icon",
-            t(o).state === "recording" && "record-icon--is-recording"
-          ]),
-          "svelte-11ls49v"
-        )), _(d, l);
-      },
-      $$slots: { default: !0 }
-    });
-  }
-  var k = z(x, 2);
+  }, Dr = qt(), j = k(Dr);
+  C(() => z(j, "countdown-ms", n())), C(() => z(j, "max-duration-ms", s())), xe(j, 1, "svelte-419ex5"), ar(j, (f) => b(m, f), () => t(m));
+  var ir = R(j, 2), Gr = u(ir);
   {
-    let a = fr(() => t(o).state === "recording");
-    Er(k, {
-      get disabled() {
-        return t(a);
-      },
-      get deviceId() {
-        return i();
-      },
-      set deviceId(d) {
-        i(d);
+    var qr = (f) => {
+      var Ze = yt();
+      o(f, Ze);
+    }, Hr = (f) => {
+      var Ze = U(), Br = k(Ze);
+      {
+        var Vr = (Ee) => {
+          var De = xt(), qe = u(De);
+          qe.__click = [Mr, x, m];
+          var nr = R(u(qe), 2);
+          {
+            var or = (X) => {
+              var Re = wt();
+              o(X, Re);
+            };
+            _(nr, (X) => {
+              c() === "label" && X(or);
+            });
+          }
+          v(qe), v(De), o(Ee, De);
+        }, Wr = (Ee) => {
+          var De = U(), qe = k(De);
+          {
+            var nr = (X) => {
+              var Re = _t();
+              o(X, Re);
+            }, or = (X) => {
+              var Re = U(), Yr = k(Re);
+              {
+                var Jr = (Se) => {
+                  var Ce = Et(), $e = u(Ce), cr = u($e);
+                  Ur(cr), v($e), rr(2), v(Ce), o(Se, Ce);
+                }, Xr = (Se) => {
+                  var Ce = U(), $e = k(Ce);
+                  {
+                    var cr = (Pe) => {
+                      var Me = St(), ke = u(Me);
+                      ke.__click = [Mr, x, m];
+                      var lr = R(u(ke), 2);
+                      {
+                        var dr = (re) => {
+                          var Q = Dt();
+                          o(re, Q);
+                        };
+                        _(lr, (re) => {
+                          c() === "label" && re(dr);
+                        });
+                      }
+                      v(ke);
+                      var H = R(ke, 2);
+                      H.__change = [gt, m, me];
+                      var K = u(H);
+                      K.value = K.__value = "";
+                      var Ie = R(K);
+                      Tr(Ie, 17, () => t(pe), Or, (re, Q) => {
+                        var F = Rt(), ue = u(F, !0);
+                        v(F);
+                        var te = {};
+                        C(() => {
+                          rt(F, t(Q).deviceId === t(me)), tr(ue, t(Q).label || "Microphone"), te !== (te = t(Q).deviceId) && (F.value = (F.__value = t(Q).deviceId) ?? "");
+                        }), o(re, F);
+                      }), v(H), v(Me), I("focus", H, Ke), o(Pe, Me);
+                    }, Kr = (Pe) => {
+                      var Me = U(), ke = k(Me);
+                      {
+                        var lr = (H) => {
+                          var K = Ct(), Ie = u(K), re = u(Ie, !0);
+                          v(Ie), v(K), C((Q) => tr(re, Q), [() => Math.ceil(t(fe) / 1e3)]), o(H, K);
+                        }, dr = (H) => {
+                          var K = U(), Ie = k(K);
+                          {
+                            var re = (F) => {
+                              var ue = kt(), te = u(ue);
+                              te.__click = [ft, m];
+                              var ur = R(u(te), 2);
+                              {
+                                var vr = (O) => {
+                                  var N = Pt();
+                                  o(O, N);
+                                };
+                                _(ur, (O) => {
+                                  c() === "label" && O(vr);
+                                });
+                              }
+                              v(te);
+                              var ae = R(te, 6);
+                              {
+                                var be = (O) => {
+                                  var N = Mt(), Z = u(N);
+                                  jr(Z, {
+                                    get data() {
+                                      return t(le);
+                                    },
+                                    barGap: 2,
+                                    get height() {
+                                      return t(g);
+                                    },
+                                    playedColor: "var(--fortyfour-recorder-accent)",
+                                    unplayedColor: "var(--fortyfour-recorder-border)"
+                                  }), v(N), o(O, N);
+                                };
+                                _(ae, (O) => {
+                                  l() === "waveform" && O(be);
+                                });
+                              }
+                              var T = R(ae, 2), Ae = u(T, !0);
+                              v(T), v(ue), C(() => tr(Ae, t(G))), o(F, ue);
+                            }, Q = (F) => {
+                              var ue = U(), te = k(ue);
+                              {
+                                var ur = (ae) => {
+                                  var be = Tt(), T = k(be);
+                                  C(() => z(T, "id", L)), C(() => z(T, "src", t(ce))), C(() => z(T, "waveform", JSON.stringify(t(le)))), C(() => z(T, "duration-ms", t(P))), xe(T, 1, "svelte-419ex5"), ar(T, (S) => b(W, S), () => t(W));
+                                  var Ae = R(T, 2), O = u(Ae);
+                                  O.__click = [bt, W];
+                                  var N = u(O);
+                                  {
+                                    var Z = (S) => {
+                                      tt(S);
+                                    }, Te = (S) => {
+                                      at(S);
+                                    };
+                                    _(N, (S) => {
+                                      t(q) ? S(Z) : S(Te, !1);
+                                    });
+                                  }
+                                  v(O);
+                                  var $ = R(O, 2);
+                                  C(() => z($, "for", L)), z($, "bar-width", "3"), z($, "bar-gap", "2"), C(() => z($, "height", t(g))), xe($, 1, "svelte-419ex5");
+                                  var Oe = R($, 2);
+                                  C(() => z(Oe, "for", L)), z(Oe, "format", "elapsed/total"), xe(Oe, 1, "svelte-419ex5");
+                                  var B = R(Oe, 2);
+                                  B.__click = [yr, m];
+                                  var se = u(B);
+                                  zr(se);
+                                  var Le = R(se, 2);
+                                  {
+                                    var He = (S) => {
+                                      var Ve = It();
+                                      o(S, Ve);
+                                    };
+                                    _(Le, (S) => {
+                                      c() === "label" && S(He);
+                                    });
+                                  }
+                                  v(B);
+                                  var Be = R(B, 2);
+                                  Be.__click = [pt, m, a, _e];
+                                  var ie = u(Be);
+                                  _r(ie);
+                                  var ve = R(ie, 2);
+                                  {
+                                    var Ne = (S) => {
+                                      var Ve = At();
+                                      o(S, Ve);
+                                    };
+                                    _(ve, (S) => {
+                                      c() === "label" && S(Ne);
+                                    });
+                                  }
+                                  v(Be), v(Ae), C(() => oe(O, "aria-label", t(q) ? "Pause" : "Play")), I("play", T, Ge), I("pause", T, Ge), I("ended", T, Ge), o(ae, be);
+                                }, vr = (ae) => {
+                                  var be = U(), T = k(be);
+                                  {
+                                    var Ae = (N) => {
+                                      var Z = Ot(), Te = u(Z), $ = u(Te);
+                                      Sr($), v(Te), rr(2), v(Z), o(N, Z);
+                                    }, O = (N) => {
+                                      var Z = U(), Te = k(Z);
+                                      {
+                                        var $ = (B) => {
+                                          var se = Lt(), Le = u(se), He = u(Le);
+                                          Sr(He), v(Le), rr(2), v(se), o(B, se);
+                                        }, Oe = (B) => {
+                                          var se = U(), Le = k(se);
+                                          {
+                                            var He = (ie) => {
+                                              var ve = Nt(), Ne = u(ve), S = u(Ne);
+                                              _r(S), v(Ne), rr(2), v(ve), o(ie, ve);
+                                            }, Be = (ie) => {
+                                              var ve = U(), Ne = k(ve);
+                                              {
+                                                var S = (ze) => {
+                                                  var Ue = jt(), We = u(Ue), hr = u(We);
+                                                  Cr(hr), v(We);
+                                                  var ye = R(We, 2), je = u(ye), Ye = u(je, !0);
+                                                  v(je), v(ye);
+                                                  var er = R(ye, 2), he = u(er);
+                                                  he.__click = [mt, m];
+                                                  var gr = R(u(he), 2);
+                                                  {
+                                                    var fr = (ne) => {
+                                                      var mr = zt();
+                                                      o(ne, mr);
+                                                    };
+                                                    _(gr, (ne) => {
+                                                      c() === "label" && ne(fr);
+                                                    });
+                                                  }
+                                                  v(he);
+                                                  var we = R(he, 2);
+                                                  we.__click = [yr, m];
+                                                  var pr = R(u(we), 2);
+                                                  {
+                                                    var Qr = (ne) => {
+                                                      var mr = Ut();
+                                                      o(ne, mr);
+                                                    };
+                                                    _(pr, (ne) => {
+                                                      c() === "label" && ne(Qr);
+                                                    });
+                                                  }
+                                                  v(we), v(er), v(Ue), C((ne) => tr(Ye, ne), [() => y(t(ee))]), o(ze, Ue);
+                                                }, Ve = (ze) => {
+                                                  var Ue = U(), We = k(Ue);
+                                                  {
+                                                    var hr = (ye) => {
+                                                      var je = Gt(), Ye = u(je), er = u(Ye);
+                                                      Cr(er), v(Ye);
+                                                      var he = R(Ye, 4);
+                                                      he.__click = [yr, m];
+                                                      var gr = R(u(he), 2);
+                                                      {
+                                                        var fr = (we) => {
+                                                          var pr = Ft();
+                                                          o(we, pr);
+                                                        };
+                                                        _(gr, (we) => {
+                                                          c() === "label" && we(fr);
+                                                        });
+                                                      }
+                                                      v(he), v(je), o(ye, je);
+                                                    };
+                                                    _(
+                                                      We,
+                                                      (ye) => {
+                                                        t(x) === "interrupted" && ye(hr);
+                                                      },
+                                                      !0
+                                                    );
+                                                  }
+                                                  o(ze, Ue);
+                                                };
+                                                _(
+                                                  Ne,
+                                                  (ze) => {
+                                                    t(x) === "error" ? ze(S) : ze(Ve, !1);
+                                                  },
+                                                  !0
+                                                );
+                                              }
+                                              o(ie, ve);
+                                            };
+                                            _(
+                                              Le,
+                                              (ie) => {
+                                                t(x) === "done" ? ie(He) : ie(Be, !1);
+                                              },
+                                              !0
+                                            );
+                                          }
+                                          o(B, se);
+                                        };
+                                        _(
+                                          Te,
+                                          (B) => {
+                                            t(x) === "processing" ? B($) : B(Oe, !1);
+                                          },
+                                          !0
+                                        );
+                                      }
+                                      o(N, Z);
+                                    };
+                                    _(
+                                      T,
+                                      (N) => {
+                                        t(x) === "uploading" ? N(Ae) : N(O, !1);
+                                      },
+                                      !0
+                                    );
+                                  }
+                                  o(ae, be);
+                                };
+                                _(
+                                  te,
+                                  (ae) => {
+                                    t(x) === "preview" ? ae(ur) : ae(vr, !1);
+                                  },
+                                  !0
+                                );
+                              }
+                              o(F, ue);
+                            };
+                            _(
+                              Ie,
+                              (F) => {
+                                t(x) === "recording" ? F(re) : F(Q, !1);
+                              },
+                              !0
+                            );
+                          }
+                          o(H, K);
+                        };
+                        _(
+                          ke,
+                          (H) => {
+                            t(x) === "counting-down" ? H(lr) : H(dr, !1);
+                          },
+                          !0
+                        );
+                      }
+                      o(Pe, Me);
+                    };
+                    _(
+                      $e,
+                      (Pe) => {
+                        t(x) === "idle" ? Pe(cr) : Pe(Kr, !1);
+                      },
+                      !0
+                    );
+                  }
+                  o(Se, Ce);
+                };
+                _(
+                  Yr,
+                  (Se) => {
+                    t(x) === "no-microphone" ? Se(Jr) : Se(Xr, !1);
+                  },
+                  !0
+                );
+              }
+              o(X, Re);
+            };
+            _(
+              qe,
+              (X) => {
+                t(x) === "permission-denied" ? X(nr) : X(or, !1);
+              },
+              !0
+            );
+          }
+          o(Ee, De);
+        };
+        _(
+          Br,
+          (Ee) => {
+            t(x) === "needs-permission" ? Ee(Vr) : Ee(Wr, !1);
+          },
+          !0
+        );
       }
-    });
-  }
-  var D = z(k, 2);
-  {
-    var E = (a) => {
-      var d = de(), m = T(d);
-      M(d), U((l, c) => X(m, `${l ?? ""}:${c ?? ""}`), [
-        () => Math.floor(t(o).timeElapsed / 60).toString(),
-        () => (t(o).timeElapsed % 60).toString().padStart(2, "0")
-      ]), _(a, d);
+      o(f, Ze);
     };
-    H(D, (a) => {
-      t(o).state === "recording" && a(E);
+    _(Gr, (f) => {
+      t(x) === "initializing" ? f(qr) : f(Hr, !1);
     });
   }
-  return M(w), U(() => Q(
-    w,
+  return v(ir), C(() => xe(
+    ir,
     1,
-    ir([
+    Lr([
       "container",
-      t(o).state === "recording" && "is-recording"
+      p() === "compact" && "compact",
+      p() === "comfortable" && "comfortable",
+      h() === "pill" && "pill",
+      h() === "square" && "square",
+      c() === "label" && "has-labels"
     ]),
-    "svelte-11ls49v"
-  )), _(e, w), er(C);
+    "svelte-419ex5"
+  )), I("statechange", j, A), I("countdowntick", j, Qe), I("recordingtick", j, Qe), I("recordingcomplete", j, A), I("uploadcomplete", j, A), I("savecomplete", j, J), I("error", j, A), I("deviceschange", j, de), o(d, Dr), Xe(Fr);
+}
+et(["click", "change"]);
+customElements.define("fortyfour-recorder", ge(
+  Bt,
+  {
+    sessionId: { attribute: "session-id", reflect: !0 },
+    labels: { reflect: !0 },
+    countdownMs: { attribute: "countdown-ms", reflect: !0 },
+    maxDurationMs: { attribute: "max-duration-ms", reflect: !0 },
+    shape: { reflect: !0 },
+    buttonLabel: { attribute: "button-label", reflect: !0 },
+    visualization: { reflect: !0 },
+    spacing: { attribute: "spacing", reflect: !0 }
+  },
+  [],
+  [],
+  !0
+));
+class Vt {
+  #e = null;
+  #r = null;
+  #a = [];
+  #t = null;
+  #s = null;
+  constructor({ onStop: e } = {}) {
+    this.#s = e;
+  }
+  async warmup(e = null) {
+    if (this.#e?.active)
+      return;
+    const r = {
+      autoGainControl: !0,
+      noiseSuppression: !0
+    };
+    e && (r.deviceId = { exact: e }), this.#e = await navigator.mediaDevices.getUserMedia({ audio: r });
+  }
+  async start(e = null) {
+    await this.warmup(e), this.#a = [], this.#r = new MediaRecorder(this.#e), this.#r.ondataavailable = (r) => this.#a.push(r.data), this.#r.onstop = this.#c, this.#r.start();
+  }
+  stop() {
+    this.#r?.stop();
+  }
+  destroy() {
+    this.#r && (this.#r.onstop = null, this.#r.state !== "inactive" && this.#r.stop()), this.#e?.getTracks().forEach((e) => e.stop()), this.#t && (URL.revokeObjectURL(this.#t), this.#t = null), this.#r = null, this.#e = null, this.#a = [];
+  }
+  reset() {
+    this.#t && (URL.revokeObjectURL(this.#t), this.#t = null);
+  }
+  #c = () => {
+    const e = this.#a, r = this.#e, a = e.length > 0 ? new Blob(e, { type: this.#r?.mimeType }) : null;
+    this.#e?.getTracks().forEach((i) => i.stop()), this.#r = null, this.#e = null, this.#a = [], a && (this.#t = URL.createObjectURL(a)), this.#s?.(r);
+  };
+  get audioUrl() {
+    return this.#t;
+  }
+  get stream() {
+    return this.#e;
+  }
+}
+class Wt {
+  #e = [];
+  #r = !1;
+  #a = null;
+  #t = null;
+  #s = null;
+  constructor({ onDeviceChange: e, onPermissionChange: r } = {}) {
+    this.#a = e, this.#t = r;
+  }
+  get devices() {
+    return this.#e;
+  }
+  async init() {
+    try {
+      this.#s = await navigator.permissions.query({ name: "microphone" }), this.#s.addEventListener("change", this.#g);
+    } catch {
+    }
+    navigator.mediaDevices.addEventListener("devicechange", this.#o);
+  }
+  async requestPermission(e = null) {
+    try {
+      (await navigator.mediaDevices.getUserMedia({
+        audio: e ? { deviceId: { exact: e } } : !0
+      })).getTracks().forEach((a) => a.stop()), this.#r = !1;
+    } catch (r) {
+      r.name === "NotAllowedError" && (this.#r = !0);
+    }
+    this.#t?.();
+  }
+  async refreshDevices() {
+    try {
+      const r = (await navigator.mediaDevices.enumerateDevices()).filter((a) => a.kind === "audioinput" && a.deviceId);
+      this.#e = r.map((a) => ({
+        deviceId: a.deviceId,
+        label: a.label || "Unknown Microphone"
+      }));
+    } catch {
+      this.#e = [];
+    }
+  }
+  destroy() {
+    this.#s && (this.#s.removeEventListener("change", this.#g), this.#s = null), navigator.mediaDevices.removeEventListener("devicechange", this.#o);
+  }
+  async noDevices() {
+    return (await this.#c()).length === 0;
+  }
+  async hasPermission() {
+    const e = await this.#c(), r = await this.#u(), a = e.some((i) => i.deviceId);
+    return r === "granted" && a;
+  }
+  async permissionDenied() {
+    return this.#r ? !0 : await this.#u() === "denied";
+  }
+  async #c() {
+    try {
+      return (await navigator.mediaDevices.enumerateDevices()).filter((r) => r.kind === "audioinput");
+    } catch {
+      return [];
+    }
+  }
+  async #u() {
+    try {
+      return (await navigator.permissions.query({ name: "microphone" })).state;
+    } catch {
+      return null;
+    }
+  }
+  #g = () => {
+    this.#t?.();
+  };
+  #o = () => {
+    this.#a?.();
+  };
+}
+const Yt = 2e3, Jt = 30, Xt = {
+  400: "invalid-request",
+  429: "rate-limited",
+  500: "server-error"
+};
+class wr extends Error {
+  constructor(e, r) {
+    super(r), this.code = e;
+  }
 }
-Y(Sr, { deviceId: {}, onDone: {} }, [], [], !0);
-function ve(e, r, i) {
-  I(r, e.target.value, !0), i()(e.target.value);
+class kr {
+  async upload(e, r, a, i, n) {
+    const s = await this.#e(a, n), h = new FormData();
+    h.append("sessionId", e), r.forEach((p) => h.append("labels", p)), h.append("audioFile", s), i.length > 0 && h.append("waveform", JSON.stringify(i));
+    const c = await fetch(`https://${Pr.apiHost}/v1/recordings`, {
+      method: "POST",
+      body: h,
+      signal: n
+    });
+    if (!c.ok) {
+      let p = `Upload failed: ${c.status}`;
+      try {
+        const m = await c.json();
+        m.message && (p = m.message);
+      } catch {
+      }
+      const L = Xt[c.status] || "upload-failed";
+      throw new wr(L, p);
+    }
+    return (await c.json()).recordingId;
+  }
+  async waitForProcessing(e, r) {
+    for (let a = 0; a < Jt; a++) {
+      await new Promise((i, n) => {
+        const s = setTimeout(i, Yt);
+        r?.addEventListener("abort", () => {
+          clearTimeout(s), n(r.reason);
+        });
+      });
+      try {
+        const i = await fetch(
+          `https://${Pr.apiHost}/v1/recordings/${e}/status?include=recording`,
+          { signal: r }
+        );
+        if (i.ok) {
+          const n = await i.json();
+          if (n.status === "ready")
+            return n.recording;
+          if (n.status === "failed")
+            throw new wr("processing-failed", "Recording processing failed");
+        }
+      } catch (i) {
+        if (i.name === "AbortError" || i instanceof wr)
+          throw i;
+      }
+    }
+    return !1;
+  }
+  async #e(e, r) {
+    const a = await fetch(e, { signal: r });
+    if (!a.ok)
+      throw new Error("Failed to load audio data");
+    const i = await a.blob();
+    return new File([i], "recording.audio", { type: i.type });
+  }
 }
-var ue = R("<option> </option>"), pe = xr('<rect width="10" fill="#4A90E2"></rect>'), ge = R(`<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 ye = {
-  hash: "svelte-zkiuts",
-  code: "label.svelte-zkiuts {display:block;margin-bottom:0.5em;}select.svelte-zkiuts {display:block;font-size:inherit;}"
+function Kt(d) {
+  const e = new AudioContext(), r = e.createAnalyser();
+  return r.fftSize = 256, e.createMediaStreamSource(d).connect(r), { audioCtx: e, analyser: r };
+}
+function Qt(d) {
+  const e = new Uint8Array(d.frequencyBinCount);
+  d.getByteTimeDomainData(e);
+  let r = 0;
+  for (let n = 0; n < e.length; n++) {
+    const s = (e[n] - 128) / 128;
+    r += s * s;
+  }
+  const a = Math.sqrt(r / e.length), i = Math.min(1, a * 4);
+  return Math.round(i * 100);
+}
+class Zt {
+  #e = 100;
+  #r = null;
+  #a = null;
+  #t = [];
+  #s = 0;
+  start(e) {
+    const r = Kt(e);
+    this.#r = r.audioCtx, this.#a = r.analyser, this.#t = [], this.#s = 0;
+  }
+  sample(e) {
+    return this.#a ? (e - this.#s >= this.#e && (this.#t.push(Qt(this.#a)), this.#s = e), this.#t) : this.#t;
+  }
+  reset() {
+    this.#t = [], this.#s = 0;
+  }
+  destroy() {
+    this.#r?.close(), this.#r = null, this.#a = null, this.reset();
+  }
+  get samples() {
+    return this.#t;
+  }
+}
+const Ir = {
+  initial: "initializing",
+  states: {
+    initializing: {
+      on: {
+        READY: [
+          { target: "no-microphone", guard: "noDevices" },
+          { target: "idle", guard: "hasPermission" },
+          { target: "permission-denied", guard: "permissionDenied" },
+          { target: "needs-permission" }
+        ]
+      }
+    },
+    "no-microphone": {
+      on: {
+        DEVICE_CHANGE: [
+          { target: "idle", guard: "hasPermission" },
+          { target: "permission-denied", guard: "permissionDenied" },
+          { target: "needs-permission", guard: "noPermission" }
+        ]
+      }
+    },
+    "needs-permission": {
+      on: {
+        PERMISSION_CHANGE: [
+          { target: "idle", guard: "hasPermission" },
+          { target: "permission-denied", guard: "permissionDenied" }
+        ],
+        DEVICE_CHANGE: [{ target: "no-microphone", guard: "noDevices" }]
+      }
+    },
+    "permission-denied": {
+      on: {
+        PERMISSION_CHANGE: [
+          { target: "idle", guard: "hasPermission" },
+          { target: "permission-denied", guard: "permissionDenied" },
+          { target: "needs-permission", guard: "noPermission" }
+        ],
+        DEVICE_CHANGE: [{ target: "no-microphone", guard: "noDevices" }]
+      }
+    },
+    idle: {
+      on: {
+        PERMISSION_CHANGE: [
+          { target: "permission-denied", guard: "permissionDenied" },
+          { target: "needs-permission", guard: "noPermission" }
+        ],
+        DEVICE_CHANGE: [{ target: "no-microphone", guard: "noDevices" }],
+        START: [
+          { target: "permission-denied", guard: "permissionDenied" },
+          { target: "needs-permission", guard: "noPermission" },
+          { target: "counting-down", guard: "hasCountdown", action: "startCountdown" },
+          { target: "recording", action: "startRecording" }
+        ],
+        RESET: [
+          { target: "no-microphone", guard: "noDevices", action: "cleanup" },
+          { target: "idle", guard: "hasPermission", action: "cleanup" },
+          { target: "permission-denied", guard: "permissionDenied", action: "cleanup" },
+          { target: "needs-permission", action: "cleanup" }
+        ]
+      }
+    },
+    "counting-down": {
+      on: {
+        COUNTDOWN_COMPLETE: [{ target: "recording", action: "startRecording" }],
+        INTERRUPT: [{ target: "interrupted", action: "cleanup" }],
+        RESET: [
+          { target: "no-microphone", guard: "noDevices", action: "cleanup" },
+          { target: "idle", guard: "hasPermission", action: "cleanup" },
+          { target: "permission-denied", guard: "permissionDenied", action: "cleanup" },
+          { target: "needs-permission", action: "cleanup" }
+        ]
+      }
+    },
+    recording: {
+      on: {
+        PERMISSION_CHANGE: [
+          { target: "permission-denied", guard: "permissionDenied", action: "cleanup" },
+          { target: "needs-permission", guard: "noPermission", action: "cleanup" }
+        ],
+        STOP: [{ target: "preview", action: "stopRecording" }],
+        MAX_DURATION: [{ target: "preview", action: "stopRecording" }],
+        INTERRUPT: [{ target: "interrupted", action: "stopRecording" }],
+        RESET: [
+          { target: "no-microphone", guard: "noDevices", action: "cleanup" },
+          { target: "idle", guard: "hasPermission", action: "cleanup" },
+          { target: "permission-denied", guard: "permissionDenied", action: "cleanup" },
+          { target: "needs-permission", action: "cleanup" }
+        ]
+      }
+    },
+    preview: {
+      on: {
+        SAVE: [{ target: "uploading" }],
+        RESET: [
+          { target: "no-microphone", guard: "noDevices", action: "cleanup" },
+          { target: "permission-denied", guard: "permissionDenied", action: "cleanup" },
+          { target: "idle", guard: "hasPermission", action: "cleanup" },
+          { target: "needs-permission", action: "cleanup" }
+        ],
+        // Don't do anything when there are device or permission changes to avoid losing the
+        // recording
+        PERMISSION_CHANGE: [],
+        DEVICE_CHANGE: []
+      }
+    },
+    uploading: {
+      on: {
+        UPLOAD_SUCCESS: [{ target: "processing" }],
+        UPLOAD_ERROR: [{ target: "error" }],
+        RESET: [
+          { target: "no-microphone", guard: "noDevices", action: "cleanup" },
+          { target: "idle", guard: "hasPermission", action: "cleanup" },
+          { target: "permission-denied", guard: "permissionDenied", action: "cleanup" },
+          { target: "needs-permission", action: "cleanup" }
+        ]
+      }
+    },
+    processing: {
+      on: {
+        PROCESSING_COMPLETE: [{ target: "done" }],
+        PROCESSING_ERROR: [{ target: "error" }],
+        RESET: [
+          { target: "no-microphone", guard: "noDevices", action: "cleanup" },
+          { target: "idle", guard: "hasPermission", action: "cleanup" },
+          { target: "permission-denied", guard: "permissionDenied", action: "cleanup" },
+          { target: "needs-permission", action: "cleanup" }
+        ]
+      }
+    },
+    done: {
+      on: {
+        RESET: [
+          { target: "no-microphone", guard: "noDevices", action: "cleanup" },
+          { target: "idle", guard: "hasPermission", action: "cleanup" },
+          { target: "permission-denied", guard: "permissionDenied", action: "cleanup" },
+          { target: "needs-permission", action: "cleanup" }
+        ]
+      }
+    },
+    error: {
+      on: {
+        RETRY: [{ target: "processing", guard: "hasRecordingId" }, { target: "preview" }],
+        RESET: [
+          { target: "no-microphone", guard: "noDevices", action: "cleanup" },
+          { target: "idle", guard: "hasPermission", action: "cleanup" },
+          { target: "permission-denied", guard: "permissionDenied", action: "cleanup" },
+          { target: "needs-permission", action: "cleanup" }
+        ]
+      }
+    },
+    interrupted: {
+      on: {
+        RESET: [
+          { target: "no-microphone", guard: "noDevices", action: "cleanup" },
+          { target: "idle", guard: "hasPermission", action: "cleanup" },
+          { target: "permission-denied", guard: "permissionDenied", action: "cleanup" },
+          { target: "needs-permission", action: "cleanup" }
+        ]
+      }
+    }
+  }
 };
-function be(e, r) {
-  Z(r, !0), rr(e, ye);
-  const i = P(r, "onSelectMic", 7);
-  let n = O(ar([])), o = O(null), s = null, f = O(!1), v = O(ar(Array(15).fill(1)));
-  wr(() => {
-    const l = async () => I(n, await Mr(), !0);
-    navigator.mediaDevices.ondevicechange = l, l();
-  });
-  async function q() {
-    if (s) {
-      if (t(f)) {
-        s.srcObject.getTracks().forEach((l) => l.stop()), I(f, !1);
+class $t {
+  #e = Ir.initial;
+  #r = 0;
+  #a = 0;
+  #t = null;
+  #s = 3e3;
+  #c = null;
+  #u = null;
+  #g = null;
+  #o = null;
+  #f = null;
+  #d;
+  #n;
+  #v;
+  #p = {
+    countdownStart: null,
+    recordingStart: null
+  };
+  #l = null;
+  #h = null;
+  #w = null;
+  #b = null;
+  #x = null;
+  #_ = null;
+  #E = null;
+  #D = null;
+  #m = null;
+  #y = null;
+  constructor({
+    countdownMs: e = 3e3,
+    maxDurationMs: r = null,
+    _apiFactory: a = null,
+    onStateChange: i,
+    onCountdownTick: n,
+    onRecordingTick: s,
+    onRecordingComplete: h,
+    onUploadComplete: c,
+    onSaveComplete: l,
+    onError: p,
+    onDevicesChange: L
+  } = {}) {
+    this.#s = e, this.#c = r, this.#f = a, this.#w = i, this.#b = n, this.#x = s, this.#_ = h, this.#E = c, this.#D = l, this.#m = p, this.#y = L, this.#d = new Vt({
+      onStop: this.#k
+    }), this.#v = new Zt(), this.#n = new Wt({
+      onDeviceChange: this.#I,
+      onPermissionChange: this.#A
+    });
+  }
+  async init() {
+    await this.#n.init(), await this.#i("READY");
+  }
+  destroy() {
+    cancelAnimationFrame(this.#l), this.#d.destroy(), this.#v.destroy(), this.#n.destroy();
+  }
+  get state() {
+    return this.#e;
+  }
+  get elapsedTime() {
+    return this.#r;
+  }
+  get remainingTime() {
+    return this.#c ? Math.max(0, this.#c - this.#r) : null;
+  }
+  get countdown() {
+    return this.#a;
+  }
+  get audioUrl() {
+    return this.#d.audioUrl;
+  }
+  get waveformSamples() {
+    return this.#v.samples;
+  }
+  get devices() {
+    return this.#n.devices;
+  }
+  get deviceId() {
+    return this.#t;
+  }
+  get recordingId() {
+    return this.#u;
+  }
+  get recording() {
+    return this.#g;
+  }
+  get error() {
+    return this.#o;
+  }
+  set countdownMs(e) {
+    this.#s = e;
+  }
+  set maxDurationMs(e) {
+    this.#c = e;
+  }
+  set _apiFactory(e) {
+    this.#f = e;
+  }
+  async requestPermission() {
+    await this.#n.requestPermission(this.#t);
+  }
+  async setDevice(e) {
+    this.#t = e, await this.#n.requestPermission(this.#t);
+  }
+  async start() {
+    if (this.#e !== "idle") {
+      console.warn(
+        `fortyfour-recording-session: start() can only be called in the "idle" state. current state: "${this.#e}". hint: ensure microphone permission is granted first.`
+      );
+      return;
+    }
+    await this.#i("START");
+  }
+  stop() {
+    if (this.#e !== "recording") {
+      console.warn(
+        `fortyfour-recording-session: stop() can only be called in the "recording" state. current state: "${this.#e}". hint: call start() first to begin recording.`
+      );
+      return;
+    }
+    this.#i("STOP");
+  }
+  async save(e, r = []) {
+    if (this.#e !== "preview" || !this.#d.audioUrl) {
+      console.warn(
+        `fortyfour-recording-session: save() can only be called in the "preview" state. current state: "${this.#e}". hint: record and stop first to reach preview.`
+      );
+      return;
+    }
+    await this.#i("SAVE"), this.#h = new AbortController();
+    const a = this.#h.signal;
+    try {
+      const i = this.#f ? this.#f() : new kr();
+      this.#u = await i.upload(
+        e,
+        r,
+        this.#d.audioUrl,
+        this.#v.samples,
+        a
+      ), this.#E?.(), await this.#i("UPLOAD_SUCCESS"), await this.#R(i, a);
+    } catch (i) {
+      if (i.name === "AbortError")
         return;
+      const n = this.#e === "uploading", s = i.code || (n ? "upload-failed" : "processing-failed");
+      this.#o = { code: s, message: i.message || "save recording" }, this.#m?.(this.#o), n ? await this.#i("UPLOAD_ERROR") : await this.#i("PROCESSING_ERROR");
+    } finally {
+      this.#h = null;
+    }
+  }
+  async reset() {
+    if ([
+      "initializing",
+      "no-microphone",
+      "needs-permission",
+      "permission-denied"
+    ].includes(this.#e)) {
+      console.warn(
+        `fortyfour-recording-session: reset() has no effect in the "${this.#e}" state. hint: reset is available after recording has started.`
+      );
+      return;
+    }
+    await this.#i("RESET");
+  }
+  async retry() {
+    if (this.#e !== "error") {
+      console.warn(
+        `fortyfour-recording-session: retry() can only be called in the "error" state. current state: "${this.#e}". hint: retry is available after a failed save.`
+      );
+      return;
+    }
+    this.#o = null;
+    const e = !!this.#u;
+    if (await this.#i("RETRY"), e && this.#e === "processing") {
+      this.#h = new AbortController();
+      const r = this.#h.signal;
+      try {
+        const a = this.#f ? this.#f() : new kr();
+        await this.#R(a, r);
+      } catch (a) {
+        if (a.name === "AbortError")
+          return;
+        const i = a.code || "processing-failed";
+        this.#o = { code: i, message: a.message || "Failed to save recording" }, this.#m?.(this.#o), await this.#i("PROCESSING_ERROR");
+      } finally {
+        this.#h = null;
       }
-      I(v, Array(15).fill(1), !0), I(f, !0);
+    }
+  }
+  handleVisibilityChange(e) {
+    e && (this.#e === "counting-down" || this.#e === "recording") && this.#i("INTERRUPT");
+  }
+  async refreshDevices() {
+    if ([
+      "initializing",
+      "no-microphone",
+      "needs-permission",
+      "permission-denied"
+    ].includes(this.#e)) {
+      console.warn(
+        `fortyfour-recording-session: refreshDevices() requires microphone permission. current state: "${this.#e}". hint: call requestPermission() first.`
+      );
+      return;
+    }
+    await this.#n.refreshDevices(), this.#y?.();
+  }
+  #P = {
+    noDevices: () => this.#n.noDevices(),
+    hasDevices: async () => !await this.#n.noDevices(),
+    hasPermission: () => this.#n.hasPermission(),
+    noPermission: async () => !await this.#n.hasPermission(),
+    permissionDenied: () => this.#n.permissionDenied(),
+    hasCountdown: () => this.#s > 0,
+    hasRecordingId: () => !!this.#u
+  };
+  #M = {
+    startCountdown: async () => {
+      try {
+        await this.#d.warmup(this.#t);
+      } catch (e) {
+        return this.#m?.({ code: "recording-failed", message: e.message }), !1;
+      }
+      this.#p.countdownStart = Date.now(), this.#a = this.#s, this.#b?.(), this.#l = requestAnimationFrame(this.#S);
+    },
+    startRecording: async () => {
       try {
-        let N = function($) {
-          if (!t(f)) {
-            g.close();
+        return await this.#d.start(this.#t), this.#v.start(this.#d.stream), this.#p.recordingStart = Date.now(), this.#r = 0, this.#l = requestAnimationFrame(this.#C), !0;
+      } catch (e) {
+        return this.#m?.({ code: "recording-failed", message: e.message }), !1;
+      }
+    },
+    stopRecording: () => {
+      cancelAnimationFrame(this.#l), this.#l = null, this.#d.stop();
+    },
+    cleanup: () => {
+      cancelAnimationFrame(this.#l), this.#l = null, this.#p.countdownStart = null, this.#p.recordingStart = null, this.#h?.abort(), this.#h = null, this.#u = null, this.#g = null, this.#o = null, this.#d.destroy(), this.#v.reset(), this.#r = 0, this.#a = 0;
+    }
+  };
+  async #i(e) {
+    const r = Ir.states[this.#e];
+    if (!r?.on?.[e]) {
+      console.warn(
+        `fortyfour-recording-session: event "${e}" not handled in state "${this.#e}"`
+      );
+      return;
+    }
+    const a = r.on[e];
+    for (const i of a) {
+      const n = i.guard ? this.#P[i.guard] : null;
+      if (!(n && !await n())) {
+        if (i.action) {
+          const s = this.#M[i.action];
+          if (s && await s() === !1)
             return;
-          }
-          const S = new Uint8Array(y.fftSize);
-          y.getByteTimeDomainData(S);
-          let A = 0;
-          for (let G = 0; G < S.length; G++) {
-            const V = (S[G] - 128) / 128;
-            A += V * V;
-          }
-          const F = Math.sqrt(A / S.length);
-          L.push(F), requestAnimationFrame(N);
-        };
-        const l = await navigator.mediaDevices.getUserMedia({
-          audio: {
-            deviceId: t(o) ? { exact: t(o) } : void 0
-          }
-        }), c = new MediaRecorder(l), p = [];
-        let b;
-        c.ondataavailable = ($) => $.data.size && p.push($.data), c.onstop = () => {
-          const $ = new Blob(p, { type: c.mimeType }), S = URL.createObjectURL($);
-          s.src = S, s.play(), l.getTracks().forEach((A) => A.stop()), I(f, !1), clearInterval(b);
-        }, c.start(), setTimeout(() => c.stop(), 5e3);
-        const g = new (window.AudioContext || window.webkitAudioContext)(), u = g.createMediaStreamSource(l), y = g.createAnalyser();
-        u.connect(y), y.fftSize = 2048;
-        const h = ($, S) => {
-          if ($ <= 0) return 0;
-          const A = 20 * Math.log10($), F = -50, G = -10, cr = (Math.min(G, Math.max(F, A)) - F) / (G - F);
-          return Math.round(cr * S);
-        };
-        let L = [];
-        N(0);
-        let K = 0;
-        b = setInterval(
-          () => {
-            const $ = L.reduce((A, F) => A + F, 0) / L.length, S = h($, 100);
-            t(v)[K++] = S, L = [];
-          },
-          300
-        );
-      } catch (l) {
-        console.error("Error during mic check:", l);
+        }
+        if (this.#e === i.target)
+          return;
+        this.#e = i.target, this.#w?.();
+        return;
       }
     }
   }
-  var C = {
-    get onSelectMic() {
+  async #R(e, r) {
+    const a = await e.waitForProcessing(this.#u, r);
+    if (!a) {
+      this.#o = {
+        code: "processing-timeout",
+        message: "Recording processing timeout. Please try again."
+      }, this.#m?.(this.#o), await this.#i("PROCESSING_ERROR");
+      return;
+    }
+    this.#g = a, this.#D?.(a), await this.#i("PROCESSING_COMPLETE");
+  }
+  #k = () => {
+    this.#v.destroy(), this.#_?.();
+  };
+  #S = () => {
+    if (this.#e !== "counting-down") {
+      this.#l = null;
+      return;
+    }
+    const e = Date.now() - this.#p.countdownStart;
+    if (this.#a = Math.max(0, this.#s - e), this.#b?.(), this.#a <= 0) {
+      this.#i("COUNTDOWN_COMPLETE");
+      return;
+    }
+    this.#l = requestAnimationFrame(this.#S);
+  };
+  #C = (e = 0) => {
+    if (this.#e !== "recording") {
+      this.#l = null;
+      return;
+    }
+    if (this.#r = Date.now() - this.#p.recordingStart, this.#v.sample(e), this.#x?.(), this.#c && this.#r >= this.#c) {
+      this.#i("MAX_DURATION");
+      return;
+    }
+    this.#l = requestAnimationFrame(this.#C);
+  };
+  #I = async () => {
+    await this.#n.refreshDevices(), await this.#i("DEVICE_CHANGE"), this.#y?.();
+  };
+  #A = async () => {
+    await this.#i("PERMISSION_CHANGE");
+  };
+}
+function ea(d, e) {
+  Je(e, !0);
+  const r = e.$$host;
+  let a = E(e, "countdownMs", 7, 3e3), i = E(e, "maxDurationMs", 7, null);
+  function n(l, p = {}) {
+    r.dispatchEvent(new CustomEvent(l, { bubbles: !0, composed: !0, detail: p }));
+  }
+  const s = new $t({
+    countdownMs: a(),
+    maxDurationMs: i(),
+    onStateChange: () => n("statechange"),
+    onCountdownTick: () => n("countdowntick"),
+    onRecordingTick: () => n("recordingtick"),
+    onRecordingComplete: () => n("recordingcomplete"),
+    onUploadComplete: () => n("uploadcomplete"),
+    onSaveComplete: (l) => n("savecomplete", { recording: l }),
+    onError: (l) => n("error", l),
+    onDevicesChange: () => n("deviceschange")
+  });
+  xr(() => {
+    s.countdownMs = a();
+  }), xr(() => {
+    s.maxDurationMs = i();
+  }), r._setApiFactory = (l) => {
+    s._apiFactory = l;
+  }, s.init();
+  function h() {
+    s.handleVisibilityChange(document.hidden);
+  }
+  Ar(() => {
+    document.addEventListener("visibilitychange", h);
+  }), r.requestPermission = () => s.requestPermission(), r.setDevice = (l) => s.setDevice(l), r.start = () => s.start(), r.stop = () => s.stop(), r.save = (l, p) => s.save(l, p), r.reset = () => s.reset(), r.retry = () => s.retry(), r.refreshDevices = () => s.refreshDevices(), Object.defineProperty(r, "state", { configurable: !0, get: () => s.state }), Object.defineProperty(r, "elapsedTime", { configurable: !0, get: () => s.elapsedTime }), Object.defineProperty(r, "remainingTime", { configurable: !0, get: () => s.remainingTime }), Object.defineProperty(r, "countdown", { configurable: !0, get: () => s.countdown }), Object.defineProperty(r, "audioUrl", { configurable: !0, get: () => s.audioUrl }), Object.defineProperty(r, "waveformSamples", { configurable: !0, get: () => s.waveformSamples }), Object.defineProperty(r, "devices", { configurable: !0, get: () => s.devices }), Object.defineProperty(r, "deviceId", { configurable: !0, get: () => s.deviceId }), Object.defineProperty(r, "recordingId", { configurable: !0, get: () => s.recordingId }), Object.defineProperty(r, "recording", { configurable: !0, get: () => s.recording }), Object.defineProperty(r, "error", { configurable: !0, get: () => s.error }), Nr(() => {
+    document.removeEventListener("visibilitychange", h), s.destroy();
+  });
+  var c = {
+    get countdownMs() {
+      return a();
+    },
+    set countdownMs(l = 3e3) {
+      a(l), D();
+    },
+    get maxDurationMs() {
       return i();
     },
-    set onSelectMic(l) {
-      i(l), B();
-    }
-  }, w = ge(), x = z(T(w), 2);
-  x.__change = [ve, o, i], lr(x, 21, () => t(n), vr, (l, c) => {
-    var p = ue(), b = T(p, !0);
-    M(p);
-    var g = {};
-    U(() => {
-      X(b, t(c).label), g !== (g = t(c).id) && (p.value = (p.__value = t(c).id) ?? "");
-    }), _(l, p);
-  }), M(x);
-  var k = z(x, 2), D = z(T(k), 4), E = T(D);
-  E.__click = q;
-  var a = T(E, !0);
-  M(E);
-  var d = z(E, 2);
-  kr(d, (l) => s = l, () => s);
-  var m = z(d, 2);
-  return lr(m, 21, () => t(v), vr, (l, c, p) => {
-    var b = pe();
-    or(b, "x", p * 12), U(() => {
-      or(b, "y", 100 - t(c)), or(b, "height", t(c));
-    }), _(l, b);
-  }), M(m), M(D), M(k), M(w), U(() => X(a, t(f) ? "Stop Testing" : "Let's Check")), _(e, w), er(C);
+    set maxDurationMs(l = null) {
+      i(l), D();
+    }
+  };
+  return Xe(c);
 }
-nr(["change", "click"]);
-Y(be, { onSelectMic: {} }, [], [], !0);
-var me = R('<div><p>Recording saved! ID:</p> <code><pre> </pre></code></div> <p><button class="primary">Record Again</button></p>', 1), he = R("<p>Processing your recording…</p>"), _e = 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>'), we = R('<div class="confirm svelte-1i5eb1b"><!> <!> <!></div>'), ke = R('<div class="row"><!></div>'), xe = R('<div class="recorder svelte-1i5eb1b" role="group" aria-label="44 audio recorder"><!></div>');
-const Ie = {
-  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 Me(e, r) {
-  Z(r, !0), rr(e, Ie);
-  const i = r.$$host;
-  let n = P(r, "sessionId", 7), o = P(r, "labels", 7, ""), s = P(r, "apiHost", 7, "api.44.audio"), f = O(
-    "ready"
-    // "ready", "recording", "confirm", "processing", "done"
-  ), v = O(null), q = O(null), C = O("");
-  async function w() {
-    if (t(f) !== "confirm" || !t(q))
-      return;
-    const c = new FormData();
-    c.append("sessionId", n()), o().split(",").map((u) => u.trim()).forEach((u) => c.append("labels", u));
-    const b = await (await fetch(t(q))).blob(), g = new File([b], "recording.audio", { type: b.type });
-    c.append("audioFile", g);
+customElements.define("fortyfour-recording-session", ge(
+  ea,
+  {
+    countdownMs: { attribute: "countdown-ms", reflect: !0 },
+    maxDurationMs: { attribute: "max-duration-ms", reflect: !0 }
+  },
+  [],
+  [],
+  !1
+));
+var ra = w('<audio preload="auto" hidden></audio>');
+function ta(d, e) {
+  Je(e, !0);
+  const r = e.$$host;
+  let a = E(e, "src", 7, null), i = E(e, "waveform", 7, "[]"), n = E(e, "durationMs", 7, null), s = M(null), h = M(0), c = M(0), l = M("idle"), p = null;
+  const L = V(() => ({ waveform: m(i()) }));
+  function m(y) {
     try {
-      const y = await (await fetch(`https://${s()}/api/v1/recordings`, { method: "POST", body: c })).json();
-      I(v, y.recordingId, !0), I(f, "processing");
-      let h = !1;
-      for (; !h; )
-        await new Promise((L) => setTimeout(L, 2e3)), h = await k(t(v));
-      i.dispatchEvent(new CustomEvent("recording-complete", { detail: { recordingId: t(v) } })), I(f, "done");
-    } catch (u) {
-      console.error("Error saving recording:", u), I(f, "ready");
+      return JSON.parse(y);
+    } catch {
+      return [];
     }
   }
   function x() {
-    I(q, null), I(f, "ready");
+    r.duration = t(c), r.currentTime = t(h), r.state = t(l), r.metadata = t(L), r.setAttribute("data-state", t(l));
   }
-  async function k(c) {
-    try {
-      const p = await fetch(`https://${s()}/api/v1/recordings/${c}/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 P(y) {
+    x(), r.dispatchEvent(new CustomEvent(y, { bubbles: !0, composed: !0 }));
+  }
+  function fe() {
+    if (!t(s)) {
+      p = null;
+      return;
     }
+    b(h, Math.floor(t(s).currentTime * 1e3), !0), P("timeupdate"), p = requestAnimationFrame(fe);
   }
-  function D(c) {
-    I(q, c, !0), I(f, "confirm");
+  async function ce() {
+    if (t(s))
+      try {
+        await t(s).play(), b(l, "playing"), P("play"), p || fe();
+      } catch (y) {
+        console.warn(`fortyfour-preview-recording: ${y.message}`), b(l, "error"), P("error");
+      }
   }
-  var E = {
-    get sessionId() {
-      return n();
+  function le() {
+    t(s) && (t(s).pause(), b(l, "paused"), cancelAnimationFrame(p), p = null, P("pause"));
+  }
+  async function ee() {
+    t(l) !== "error" && (t(l) === "playing" ? le() : await ce());
+  }
+  function pe(y) {
+    t(s) && (typeof y != "number" || Number.isNaN(y) || y < 0 || y > t(c) || (t(s).currentTime = y / 1e3, b(h, Math.floor(y), !0), P("timeupdate")));
+  }
+  async function me() {
+    cancelAnimationFrame(p), p = null, b(h, t(c), !0), P("timeupdate"), await st(), b(h, 0), t(s).currentTime = 0, P("timeupdate"), b(l, "ready"), P("ended");
+  }
+  function W(y) {
+    console.warn("fortyfour-preview-recording: audio error", y.target.error), b(l, "error"), P("error");
+  }
+  function q() {
+    b(
+      c,
+      n() ? Number(n()) : Math.floor(t(s).duration * 1e3),
+      !0
+    ), b(l, "ready"), P("loadedmetadata");
+  }
+  let _e = a();
+  xr(() => {
+    a() !== _e && (cancelAnimationFrame(p), p = null, t(s)?.pause(), b(h, 0), b(c, 0), b(l, "idle"), _e = a(), P("timeupdate"));
+  }), r.togglePlay = ee, r.pause = le, r.seek = pe, x(), Nr(() => {
+    t(s)?.pause(), cancelAnimationFrame(p);
+  });
+  var Fe = {
+    get src() {
+      return a();
     },
-    set sessionId(c) {
-      n(c), B();
+    set src(y = null) {
+      a(y), D();
     },
-    get labels() {
-      return o();
+    get waveform() {
+      return i();
     },
-    set labels(c = "") {
-      o(c), B();
+    set waveform(y = "[]") {
+      i(y), D();
     },
-    get apiHost() {
-      return s();
+    get durationMs() {
+      return n();
     },
-    set apiHost(c = "api.44.audio") {
-      s(c), B();
+    set durationMs(y = null) {
+      n(y), D();
     }
-  }, a = xe(), d = T(a);
+  }, g = U(), G = k(g);
   {
-    var m = (c) => {
-      var p = me(), b = J(p), g = z(T(b), 2), u = T(g), y = T(u, !0);
-      M(u), M(g), M(b);
-      var h = z(b, 2), L = T(h);
-      L.__click = x, M(h), U(() => X(y, t(v))), _(c, p);
-    }, l = (c) => {
-      var p = pr(), b = J(p);
-      {
-        var g = (y) => {
-          var h = he();
-          _(y, h);
-        }, u = (y) => {
-          var h = pr(), L = J(h);
-          {
-            var N = ($) => {
-              var S = we(), A = T(S);
-              jr(A, {
-                get audioURL() {
-                  return t(q);
-                }
-              });
-              var F = z(A, 2);
-              sr(F, {
-                onclick: x,
-                children: (V, cr) => {
-                  var dr = _e();
-                  _(V, dr);
-                },
-                $$slots: { default: !0 }
-              });
-              var G = z(F, 2);
-              sr(G, {
-                type: "primary",
-                onclick: w,
-                children: (V, cr) => {
-                  Hr();
-                  var dr = ur("Save");
-                  _(V, dr);
-                },
-                $$slots: { default: !0 }
-              }), M(S), gr(1, S, () => hr, () => ({ y: 20, duration: 700 })), _($, S);
-            }, K = ($) => {
-              var S = ke(), A = T(S);
-              Sr(A, {
-                onDone: D,
-                get deviceId() {
-                  return t(C);
-                },
-                set deviceId(F) {
-                  I(C, F, !0);
-                }
-              }), M(S), gr(1, S, () => hr, () => ({ y: -20, duration: 700 })), _($, S);
-            };
-            H(
-              L,
-              ($) => {
-                t(f) === "confirm" ? $(N) : $(K, !1);
-              },
-              !0
-            );
-          }
-          _(y, h);
-        };
-        H(
-          b,
-          (y) => {
-            t(f) === "processing" ? y(g) : y(u, !1);
-          },
-          !0
-        );
-      }
-      _(c, p);
+    var Y = (y) => {
+      var A = ra();
+      ar(A, (de) => b(s, de), () => t(s)), C(() => oe(A, "src", a())), I("ended", A, me), I("error", A, W), I("loadedmetadata", A, q), o(y, A);
     };
-    H(d, (c) => {
-      t(f) === "done" && t(v) ? c(m) : c(l, !1);
+    _(G, (y) => {
+      a() && y(Y);
     });
   }
-  return M(a), _(e, a), er(E);
+  return o(d, g), Xe(Fe);
 }
-nr(["click"]);
-customElements.define("fortyfour-audio-recorder", Y(
-  Me,
+customElements.define("fortyfour-preview-recording", ge(
+  ta,
   {
-    apiHost: { attribute: "api-host" },
-    sessionId: { attribute: "session-id" },
-    labels: { attribute: "labels" }
+    src: { reflect: !0 },
+    waveform: { reflect: !0 },
+    durationMs: { attribute: "duration-ms", reflect: !0 }
   },
   [],
   [],
-  !0
+  !1
 ));