@44-audio/components 0.1.0-dev.19 → 0.1.0-dev.20

package/dist/recorder.es.js

@@ -1,13 +1,19 @@
-import { a7 as $e, l as ae, m as se, o as ne, q as P, T as _e, F as l, r as R, W as V, J as I, I as j, V as we, t as O, y as i, z as ie, D, A as T, w as e, K as z, G as re, H as Q, X as ze, _ as Me, x as H, Y as ue, B as te, Z as ce, v as Ue, $ as xe, L as U, a2 as Oe, a3 as oe, Q as qe, P as ve, a4 as Se, N as he, O as Fe, M as He, a0 as Ne, S as Ce, a8 as Ie } from "./time-BmemrSJ4.mjs";
-function We(L, s, n, p, d) {
+import { a4 as je, l as ae, m as se, K as ne, o as P, Z as _e, z as d, F as R, I as W, L as I, D as B, G as we, H as O, x as l, y as ie, r as D, C as T, q as e, M, v as re, w as Q, _ as Me, a0 as Se, B as N, X as ue, V as te, $ as ce, Q as Ue, T as xe, S as U, J as Oe, N as oe, O as ve, R as ze, a1 as he, a2 as Fe, P as Ne, t as He, a5 as qe, a6 as Ce } from "./index-DCaqXYMO.js";
+function Ge(b, s, n, c, i) {
   var t = () => {
-    p(n[L]);
+    c(n[b]);
   };
-  n.addEventListener(s, t), t(), (n === document.body || n === window || n === document) && $e(() => {
+  n.addEventListener(s, t), t(), (n === document.body || n === window || n === document) && je(() => {
     n.removeEventListener(s, t);
   });
 }
-var Ge = ue('<rect rx="1"></rect>'), Ve = R('<div class="container svelte-efr4jv" role="group" aria-label="audio player"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="svelte-efr4jv"><!></svg></div>');
+function Ie(b) {
+  if (isNaN(b) || b < 0)
+    return "-:--";
+  const s = b / 1e3, n = Math.floor(s / 3600), c = Math.floor(s % 3600 / 60), i = Math.round(s % 60);
+  return n > 0 ? `${n}:${c.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}` : `${c}:${i.toString().padStart(2, "0")}`;
+}
+var Ve = ue('<rect rx="1"></rect>'), We = R('<div class="container svelte-efr4jv" role="group" aria-label="audio player"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="svelte-efr4jv"><!></svg></div>');
 const Je = {
   hash: "svelte-efr4jv",
   code: `svg.svelte-efr4jv {box-sizing:border-box;margin:0;padding:0;}.container.svelte-efr4jv {flex:1;box-sizing:border-box;margin:0;padding:0;display:flex;align-items:center;}.bar.svelte-efr4jv {transition:fill 0.2s;}.played.svelte-efr4jv {fill:var(--44-color-2, var(--fortyfour-recorder-bg-primary));}.unplayed.svelte-efr4jv {fill:var(--44-color-1, var(--fortyfour-recorder-color-0));}.recording-pulse.svelte-efr4jv {
@@ -22,42 +28,42 @@ const Je = {
     }
   }`
 };
-function Le(L, s) {
-  se(s, !0), ne(L, Je);
+function Le(b, s) {
+  se(s, !0), ne(b, Je);
   function n(r, o) {
-    const v = r.length / o, a = [];
-    for (let f = 0; f < o; f++) {
-      const m = Math.floor(f * v), E = Math.floor((f + 1) * v), G = r.slice(m, Math.max(m + 1, E)), B = G.reduce((J, K) => J + K * K, 0), ge = Math.sqrt(B / G.length);
+    const f = r.length / o, a = [];
+    for (let u = 0; u < o; u++) {
+      const m = Math.floor(u * f), E = Math.floor((u + 1) * f), V = r.slice(m, Math.max(m + 1, E)), $ = V.reduce((J, K) => J + K * K, 0), ge = Math.sqrt($ / V.length);
       a.push(ge);
     }
     return a;
   }
-  let p = P(s, "data", 7), d = P(s, "timeMs", 7, null), t = P(s, "barWidth", 7, 3), b = P(s, "spacing", 7, 1), u = P(s, "playedColor", 7, null), M = P(s, "unplayedColor", 7, null), h = D(0), $ = D(!1), k = null;
+  let c = P(s, "data", 7), i = P(s, "timeMs", 7, null), t = P(s, "barWidth", 7, 3), h = P(s, "spacing", 7, 1), g = P(s, "playedColor", 7, null), S = P(s, "unplayedColor", 7, null), _ = D(0), j = D(!1), k = null;
   _e(() => {
     const r = new ResizeObserver((o) => {
-      for (let v of o)
-        v.contentBoxSize ? l(h, v.contentBoxSize[0]?.inlineSize || v.contentBoxSize.inlineSize, !0) : l(h, v.contentRect.width, !0), l($, !0);
+      for (let f of o)
+        f.contentBoxSize ? d(_, f.contentBoxSize[0]?.inlineSize || f.contentBoxSize.inlineSize, !0) : d(_, f.contentRect.width, !0), d(j, !0);
     });
     return k && r.observe(k), () => {
       r.disconnect();
     };
   });
-  const x = 56, N = 100, F = H(() => Math.floor(e(h) / (t() + b()))), y = H(() => n(p(), e(F))), g = H(() => e(y).length ? p().length / e(y).length : 1), c = H(() => N * e(g)), q = H(() => e(y).map((r) => {
-    const o = Math.max(3, Math.round(r / 100 * (x - 3) + 3));
+  const L = 56, H = 100, F = N(() => Math.floor(e(_) / (t() + h()))), y = N(() => n(c(), e(F))), p = N(() => e(y).length ? c().length / e(y).length : 1), v = N(() => H * e(p)), q = N(() => e(y).map((r) => {
+    const o = Math.max(3, Math.round(r / 100 * (L - 3) + 3));
     return o % 2 === 0 ? o + 1 : o;
   }));
   var A = {
     get data() {
-      return p();
+      return c();
     },
     set data(r) {
-      p(r), T();
+      c(r), T();
     },
     get timeMs() {
-      return d();
+      return i();
     },
     set timeMs(r = null) {
-      d(r), T();
+      i(r), T();
     },
     get barWidth() {
       return t();
@@ -66,51 +72,51 @@ function Le(L, s) {
       t(r), T();
     },
     get spacing() {
-      return b();
+      return h();
     },
     set spacing(r = 1) {
-      b(r), T();
+      h(r), T();
     },
     get playedColor() {
-      return u();
+      return g();
     },
     set playedColor(r = null) {
-      u(r), T();
+      g(r), T();
     },
     get unplayedColor() {
-      return M();
+      return S();
     },
     set unplayedColor(r = null) {
-      M(r), T();
+      S(r), T();
     }
-  }, S = Ve(), w = I(S);
-  V(w, "height", x);
-  var _ = I(w);
+  }, z = We(), x = I(z);
+  W(x, "height", L);
+  var w = I(x);
   {
     var C = (r) => {
-      var o = re(), v = Q(o);
-      ze(v, 17, () => e(q), Me, (a, f, m) => {
-        const E = H(() => m * e(c) < d()), G = H(() => d() === null && m === e(q).length - 1);
-        var B = Ge();
+      var o = re(), f = Q(o);
+      Me(f, 17, () => e(q), Se, (a, u, m) => {
+        const E = N(() => m * e(v) < i()), V = N(() => i() === null && m === e(q).length - 1);
+        var $ = Ve();
         O(() => {
           te(
-            B,
+            $,
             0,
             ce([
               "bar",
               e(E) ? "played" : "unplayed",
-              e(G) && "recording-pulse"
+              e(V) && "recording-pulse"
             ]),
             "svelte-efr4jv"
-          ), V(B, "x", m * (t() + b())), V(B, "y", x / 4 - e(f) / 2), V(B, "width", t() - 1), V(B, "height", e(f)), Ue(B, e(E) ? u() ? `fill: ${u()}` : null : M() ? `fill: ${M()}` : null);
-        }), i(a, B);
-      }), i(r, o);
+          ), W($, "x", m * (t() + h())), W($, "y", L / 4 - e(u) / 2), W($, "width", t() - 1), W($, "height", e(u)), Ue($, e(E) ? g() ? `fill: ${g()}` : null : S() ? `fill: ${S()}` : null);
+        }), l(a, $);
+      }), l(r, o);
     };
-    j(_, (r) => {
-      e($) && r(C);
+    B(w, (r) => {
+      e(j) && r(C);
     });
   }
-  return z(w), we(w, (r) => k = r, () => k), z(S), O(() => V(w, "viewBox", `0 0 ${e(h)} ${x / 2}`)), i(L, S), ie(A);
+  return M(x), we(x, (r) => k = r, () => k), M(z), O(() => W(x, "viewBox", `0 0 ${e(_)} ${L / 2}`)), l(b, z), ie(A);
 }
 ae(
   Le,
@@ -127,25 +133,25 @@ ae(
   !0
 );
 var Xe = ue('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="icon svelte-7u5az2"><path d="M176 96C149.5 96 128 117.5 128 144L128 496C128 522.5 149.5 544 176 544L240 544C266.5 544 288 522.5 288 496L288 144C288 117.5 266.5 96 240 96L176 96zM400 96C373.5 96 352 117.5 352 144L352 496C352 522.5 373.5 544 400 544L464 544C490.5 544 512 522.5 512 496L512 144C512 117.5 490.5 96 464 96L400 96z"></path></svg>'), Ke = ue('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="icon svelte-7u5az2"><path d="M187.2 100.9C174.8 94.1 159.8 94.4 147.6 101.6C135.4 108.8 128 121.9 128 136L128 504C128 518.1 135.5 531.2 147.6 538.4C159.7 545.6 174.8 545.9 187.2 539.1L523.2 355.1C536 348.1 544 334.6 544 320C544 305.4 536 291.9 523.2 284.9L187.2 100.9z"></path></svg>'), Qe = R('<div class="container svelte-7u5az2" role="group" aria-label="Audio player"><button class="btn svelte-7u5az2"><!></button> <!> <div class="time svelte-7u5az2"><!></div> <audio></audio></div>');
-const Ye = {
+const Ze = {
   hash: "svelte-7u5az2",
   code: ".container.svelte-7u5az2 {display:flex;align-items:stretch;gap:0.5rem;flex:1;}.btn.svelte-7u5az2 {border:none;border-radius:50%;padding:0.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1;flex-shrink:0;align-self:center;color:var(--fortyfour-recorder-btn-primary-color);background:var(--fortyfour-recorder-btn-primary-bg);}.btn.svelte-7u5az2:hover {color:var(--fortyfour-recorder-btn-primary-color-hover);background:var(--fortyfour-recorder-btn-primary-bg-hover);}.icon.svelte-7u5az2 {width:1.5em;height:1.5em;fill:currentColor;}.time.svelte-7u5az2 {display:flex;align-items:center;font-variant-numeric:tabular-nums;font-size:0.9rem;}"
 };
-function Ee(L, s) {
-  se(s, !0), ne(L, Ye);
-  let n = P(s, "audioURL", 7), p = P(s, "waveform", 7), d = D(null), t = D(0), b = D(0), u = D(
+function Ee(b, s) {
+  se(s, !0), ne(b, Ze);
+  let n = P(s, "audioURL", 7), c = P(s, "waveform", 7), i = D(null), t = D(0), h = D(0), g = D(
     "ready"
     // "ready", "playing", "paused"
-  ), M = null;
-  const $ = typeof navigator < "u" && /iPad|iPhone|iPod/.test(navigator.userAgent) ? 350 : 0;
+  ), S = null;
+  const j = typeof navigator < "u" && /iPad|iPhone|iPod/.test(navigator.userAgent) ? 350 : 0;
   function k() {
-    e(d) && e(u) === "playing" && (l(t, e(d).currentTime, !0), M = requestAnimationFrame(k));
+    e(i) && e(g) === "playing" && (d(t, e(i).currentTime, !0), S = requestAnimationFrame(k));
   }
-  function x() {
-    l(u, "ready"), l(t, 0), M && (cancelAnimationFrame(M), M = null);
+  function L() {
+    d(g, "ready"), d(t, 0), S && (cancelAnimationFrame(S), S = null);
   }
-  function N() {
-    e(d) && (e(u) === "playing" ? (e(d).pause(), l(u, "paused"), M && (cancelAnimationFrame(M), M = null)) : (e(d).play(), l(u, "playing"), k()));
+  function H() {
+    e(i) && (e(g) === "playing" ? (e(i).pause(), d(g, "paused"), S && (cancelAnimationFrame(S), S = null)) : (e(i).play(), d(g, "playing"), k()));
   }
   var F = {
     get audioURL() {
@@ -155,106 +161,106 @@ function Ee(L, s) {
       n(a), T();
     },
     get waveform() {
-      return p();
+      return c();
     },
     set waveform(a) {
-      p(a), T();
+      c(a), T();
     }
-  }, y = Qe(), g = I(y);
-  g.__click = N;
-  var c = I(g);
+  }, y = Qe(), p = I(y);
+  p.__click = H;
+  var v = I(p);
   {
     var q = (a) => {
-      var f = Xe();
-      i(a, f);
+      var u = Xe();
+      l(a, u);
     }, A = (a) => {
-      var f = Ke();
-      i(a, f);
+      var u = Ke();
+      l(a, u);
     };
-    j(c, (a) => {
-      e(u) === "playing" ? a(q) : a(A, !1);
+    B(v, (a) => {
+      e(g) === "playing" ? a(q) : a(A, !1);
     });
   }
-  z(g);
-  var S = U(g, 2);
+  M(p);
+  var z = U(p, 2);
   {
-    var w = (a) => {
+    var x = (a) => {
       {
-        let f = H(() => Math.round(e(t) * 1e3) + $);
+        let u = N(() => Math.round(e(t) * 1e3) + j);
         Le(a, {
           get timeMs() {
-            return e(f);
+            return e(u);
           },
           get data() {
-            return p();
+            return c();
           }
         });
       }
     };
-    j(S, (a) => {
-      p() && a(w);
+    B(z, (a) => {
+      c() && a(x);
     });
   }
-  var _ = U(S, 2), C = I(_);
+  var w = U(z, 2), C = I(w);
   {
     var r = (a) => {
-      var f = oe();
-      O((m) => ve(f, m), [() => qe(e(t))]), i(a, f);
+      var u = oe();
+      O((m) => ve(u, m), [() => Ie(e(t))]), l(a, u);
     }, o = (a) => {
-      var f = oe();
-      O((m) => ve(f, m), [() => qe(e(b))]), i(a, f);
+      var u = oe();
+      O((m) => ve(u, m), [() => Ie(e(h))]), l(a, u);
     };
-    j(C, (a) => {
-      ["playing", "paused"].includes(e(u)) ? a(r) : a(o, !1);
+    B(C, (a) => {
+      ["playing", "paused"].includes(e(g)) ? a(r) : a(o, !1);
     });
   }
-  z(_);
-  var v = U(_, 2);
-  return we(v, (a) => l(d, a), () => e(d)), z(y), O(() => {
-    V(g, "aria-label", e(u) === "playing" ? "Pause" : "Play"), V(v, "src", n());
-  }), Oe("ended", v, x), We("duration", "durationchange", v, (a) => l(b, a)), i(L, y), ie(F);
+  M(w);
+  var f = U(w, 2);
+  return we(f, (a) => d(i, a), () => e(i)), M(y), O(() => {
+    W(p, "aria-label", e(g) === "playing" ? "Pause" : "Play"), W(f, "src", n());
+  }), Oe("ended", f, L), Ge("duration", "durationchange", f, (a) => d(h, a)), l(b, y), ie(F);
 }
 xe(["click"]);
 ae(Ee, { audioURL: {}, waveform: {} }, [], [], !0);
-async function Ze(L, s, n, p) {
-  l(s, !e(s)), e(n).length || await p();
+async function Ye(b, s, n, c) {
+  d(s, !e(s)), e(n).length || await c();
 }
 var er = R("<li><button> </button></li>"), rr = R('<li><button class="devices-select__option svelte-q87ygv" disabled>No microphones found</button></li>'), tr = R('<li><button class="devices-select__option svelte-q87ygv" disabled>Loading Microphones...</button></li>'), or = R('<ul role="listbox" aria-label="Select microphone"><!> <!> <!></ul>'), ar = R('<div class="container" role="group" aria-label="Audio recorder"><button class="devices-btn svelte-q87ygv" aria-haspopup="listbox"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="devices-btn__icon svelte-q87ygv"><path d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path></svg></button> <!></div>');
 const sr = {
   hash: "svelte-q87ygv",
   code: '.devices-btn.svelte-q87ygv {background:none;border:none;font-size:inherit;cursor:pointer;color:inherit;}.devices-btn__icon.svelte-q87ygv {width:0.75rem;height:0.75rem;fill:var(--fortyfour-recorder-btn-color);}.devices-select.svelte-q87ygv {display:none;flex-direction:column;list-style:none;margin:0;padding:0;border:var(--fortyfour-recorder-select-border);box-shadow:var(--fortyfour-recorder-select-shadow);border-radius:var(--fortyfour-recorder-select-radius);background:var(--fortyfour-recorder-select-bg);position:absolute;z-index:2147483647;overflow-y:auto;width:11rem;max-height:12rem;}.devices-select--is-open.svelte-q87ygv {display:flex;}.devices-select__option.svelte-q87ygv {padding:0.5rem 1rem;padding-left:0;background:none;border:none;text-align:left;cursor:pointer;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background 0.1s;font:inherit;font-size:var(--fortyfour-recorder-select-font-size);color:var(--fortyfour-recorder-select-color);}.devices-select__option.svelte-q87ygv:hover {background:var(--fortyfour-recorder-select-bg-hover);}.devices-select__option.svelte-q87ygv::before {content:"";display:inline-block;width:2ch;text-align:center;padding:0 0.25rem;}.devices-select__option--is-selected.svelte-q87ygv::before {content:"✓";}.devices-select__option.svelte-q87ygv:disabled {opacity:0.5;cursor:inherit;}.devices-select__option.svelte-q87ygv:disabled:hover {background:inherit;}'
 };
-function Re(L, s) {
-  se(s, !0), ne(L, sr);
-  let n = P(s, "deviceId", 15, ""), p = P(s, "disabled", 7, !1), d = D(Se([])), t = D(!1), b = D(!1), u;
+function Re(b, s) {
+  se(s, !0), ne(b, sr);
+  let n = P(s, "deviceId", 15, ""), c = P(s, "disabled", 7, !1), i = D(ze([])), t = D(!1), h = D(!1), g;
   _e(() => {
-    function y(g) {
-      g.composedPath().includes(u) || e(t) && l(t, !1);
+    function y(p) {
+      p.composedPath().includes(g) || e(t) && d(t, !1);
     }
     return document.addEventListener("pointerdown", y), () => {
       document.removeEventListener("pointerdown", y);
     };
   });
-  async function M() {
+  async function S() {
     try {
-      l(b, !0), (await navigator.mediaDevices.getUserMedia({ audio: !0 })).getTracks().forEach((g) => g.stop()), l(d, await navigator.mediaDevices.enumerateDevices(), !0), l(
-        d,
-        e(d).filter((g) => g.deviceId).filter((g) => g.kind === "audioinput").map((g, c) => ({
-          deviceId: g.deviceId,
-          label: g.label || `Microphone ${c + 1}`
+      d(h, !0), (await navigator.mediaDevices.getUserMedia({ audio: !0 })).getTracks().forEach((p) => p.stop()), d(i, await navigator.mediaDevices.enumerateDevices(), !0), d(
+        i,
+        e(i).filter((p) => p.deviceId).filter((p) => p.kind === "audioinput").map((p, v) => ({
+          deviceId: p.deviceId,
+          label: p.label || `Microphone ${v + 1}`
         })),
         !0
-      ), !n() && e(d).length && n(e(d)[0].deviceId), e(d).sort((g, c) => g.label.localeCompare(c.label)), l(b, !1);
+      ), !n() && e(i).length && n(e(i)[0].deviceId), e(i).sort((p, v) => p.label.localeCompare(v.label)), d(h, !1);
     } catch (y) {
       console.error("Error accessing microphones:", y);
     }
   }
-  function h(y) {
+  function _(y) {
     return () => {
-      n(y), l(t, !1);
+      n(y), d(t, !1);
     };
   }
-  var $ = {
+  var j = {
     get deviceId() {
       return n();
     },
@@ -262,24 +268,24 @@ function Re(L, s) {
       n(y), T();
     },
     get disabled() {
-      return p();
+      return c();
     },
     set disabled(y = !1) {
-      p(y), T();
+      c(y), T();
     }
-  }, k = ar(), x = I(k);
-  x.__click = [Ze, t, d, M];
-  var N = U(x, 2);
+  }, k = ar(), L = I(k);
+  L.__click = [Ye, t, i, S];
+  var H = U(L, 2);
   {
     var F = (y) => {
-      var g = or(), c = I(g);
-      ze(c, 17, () => e(d), Me, (_, C) => {
-        var r = er(), o = I(r), v = H(() => h(e(C).deviceId));
-        o.__click = function(...f) {
-          e(v)?.apply(this, f);
+      var p = or(), v = I(p);
+      Me(v, 17, () => e(i), Se, (w, C) => {
+        var r = er(), o = I(r), f = N(() => _(e(C).deviceId));
+        o.__click = function(...u) {
+          e(f)?.apply(this, u);
         };
         var a = I(o, !0);
-        z(o), z(r), O(() => {
+        M(o), M(r), O(() => {
           te(
             o,
             1,
@@ -288,36 +294,36 @@ function Re(L, s) {
               e(C).deviceId === n() && "devices-select__option--is-selected"
             ]),
             "svelte-q87ygv"
-          ), o.disabled = p(), ve(a, e(C).label);
-        }), i(_, r);
+          ), o.disabled = c(), ve(a, e(C).label);
+        }), l(w, r);
       });
-      var q = U(c, 2);
+      var q = U(v, 2);
       {
-        var A = (_) => {
+        var A = (w) => {
           var C = rr();
-          i(_, C);
+          l(w, C);
         };
-        j(q, (_) => {
-          !e(d).length && !e(b) && _(A);
+        B(q, (w) => {
+          !e(i).length && !e(h) && w(A);
         });
       }
-      var S = U(q, 2);
+      var z = U(q, 2);
       {
-        var w = (_) => {
+        var x = (w) => {
           var C = tr();
-          i(_, C);
+          l(w, C);
         };
-        j(S, (_) => {
-          e(b) && _(w);
+        B(z, (w) => {
+          e(h) && w(x);
         });
       }
-      z(g), O(() => te(g, 1, `devices-select ${e(t) ? "devices-select--is-open" : ""}`, "svelte-q87ygv")), he(3, g, () => Fe, () => ({ duration: 100 })), i(y, g);
+      M(p), O(() => te(p, 1, `devices-select ${e(t) ? "devices-select--is-open" : ""}`, "svelte-q87ygv")), he(3, p, () => Fe, () => ({ duration: 100 })), l(y, p);
     };
-    j(N, (y) => {
+    B(H, (y) => {
       e(t) && y(F);
     });
   }
-  return z(k), we(k, (y) => u = y, () => u), O(() => V(x, "aria-expanded", e(t))), i(L, k), ie($);
+  return M(k), we(k, (y) => g = y, () => g), O(() => W(L, "aria-expanded", e(t))), l(b, k), ie(j);
 }
 xe(["click"]);
 ae(Re, { deviceId: {}, disabled: {} }, [], [], !0);
@@ -326,30 +332,30 @@ const ir = {
   hash: "svelte-f3ispq",
   code: ".btn.svelte-f3ispq {display:flex;align-items:center;gap:var(--fortyfour-recorder-btn-gap);font:inherit;border:none;padding:var(--fortyfour-recorder-btn-padding);border-radius:var(--fortyfour-recorder-btn-radius);background:var(--fortyfour-recorder-btn-bg);color:var(--fortyfour-recorder-btn-color);cursor:pointer;}.btn.svelte-f3ispq:hover {background:var(--fortyfour-recorder-btn-bg-hover);color:var(--fortyfour-recorder-btn-color-hover);}.btn.btn--recording.svelte-f3ispq {background:var(--fortyfour-recorder-red-bg);color:var(--fortyfour-recorder-red-color);}.btn.btn--primary.svelte-f3ispq {background:var(--fortyfour-recorder-btn-primary-bg);color:var(--fortyfour-recorder-btn-primary-color);}.btn.btn--primary.svelte-f3ispq:hover {background:var(--fortyfour-recorder-btn-primary-bg-hover);color:var(--fortyfour-recorder-btn-primary-color-hover);}"
 };
-function de(L, s) {
-  se(s, !0), ne(L, ir);
-  const n = P(s, "type", 7), p = P(s, "onclick", 7, () => {
+function de(b, s) {
+  se(s, !0), ne(b, ir);
+  const n = P(s, "type", 7), c = P(s, "onclick", 7, () => {
   });
-  var d = {
+  var i = {
     get type() {
       return n();
     },
-    set type(u) {
-      n(u), T();
+    set type(g) {
+      n(g), T();
     },
     get onclick() {
-      return p();
+      return c();
     },
-    set onclick(u = () => {
+    set onclick(g = () => {
     }) {
-      p(u), T();
+      c(g), T();
     }
   }, t = nr();
-  t.__click = function(...u) {
-    p()?.apply(this, u);
+  t.__click = function(...g) {
+    c()?.apply(this, g);
   };
-  var b = I(t);
-  return He(b, s, "default", {}, null), z(t), O(() => te(t, 1, ce(["btn", n() && `btn--${n()}`]), "svelte-f3ispq")), i(L, t), ie(d);
+  var h = I(t);
+  return Ne(h, s, "default", {}, null), M(t), O(() => te(t, 1, ce(["btn", n() && `btn--${n()}`]), "svelte-f3ispq")), l(b, t), ie(i);
 }
 xe(["click"]);
 ae(de, { type: {}, onclick: {} }, ["default"], [], !0);
@@ -373,139 +379,139 @@ const vr = {
     }
   }`
 };
-function Ae(L, s) {
-  se(s, !0), ne(L, vr);
-  let n = P(s, "deviceId", 15, ""), p = P(s, "onDone", 7);
-  const d = 100;
-  let t = D(Se({
+function Ae(b, s) {
+  se(s, !0), ne(b, vr);
+  let n = P(s, "deviceId", 15, ""), c = P(s, "onDone", 7);
+  const i = 100;
+  let t = D(ze({
     state: "ready",
     // "ready", "recording"
     timeElapsed: 0,
     error: null,
     waveformSamples: []
-  })), b, u;
-  Ne(() => {
-    b?.stop();
+  })), h, g;
+  He(() => {
+    h?.stop();
   }), _e(() => {
-    function c() {
-      document.hidden && e(t).state === "recording" && $();
+    function v() {
+      document.hidden && e(t).state === "recording" && j();
     }
-    return document.addEventListener("visibilitychange", c), () => {
-      document.removeEventListener("visibilitychange", c);
+    return document.addEventListener("visibilitychange", v), () => {
+      document.removeEventListener("visibilitychange", v);
     };
   });
-  function M() {
-    e(t).state === "ready" ? h() : e(t).state === "recording" && $();
+  function S() {
+    e(t).state === "ready" ? _() : e(t).state === "recording" && j();
   }
-  async function h() {
-    const c = await navigator.mediaDevices.getUserMedia({
+  async function _() {
+    const v = await navigator.mediaDevices.getUserMedia({
       audio: {
         deviceId: n() ? { exact: n() } : void 0,
         autoGainControl: !0,
         noiseSuppression: !0
       }
     }), q = [];
-    b = new MediaRecorder(c), b.ondataavailable = (o) => q.push(o.data), u = new AudioContext();
-    const A = u.createAnalyser();
-    A.fftSize = 256, u.createMediaStreamSource(c).connect(A);
-    const w = new Uint8Array(A.frequencyBinCount);
-    let _ = 0;
+    h = new MediaRecorder(v), h.ondataavailable = (o) => q.push(o.data), g = new AudioContext();
+    const A = g.createAnalyser();
+    A.fftSize = 256, g.createMediaStreamSource(v).connect(A);
+    const x = new Uint8Array(A.frequencyBinCount);
+    let w = 0;
     function C(o) {
       if (e(t).state !== "recording") return;
-      A.getByteTimeDomainData(w);
-      let v = 0;
-      for (let m = 0; m < w.length; m++) {
-        const E = (w[m] - 128) / 128;
-        v += E * E;
+      A.getByteTimeDomainData(x);
+      let f = 0;
+      for (let m = 0; m < x.length; m++) {
+        const E = (x[m] - 128) / 128;
+        f += E * E;
       }
-      const a = Math.sqrt(v / w.length), f = Math.min(1, a * 4);
-      o - _ >= d && (e(t).waveformSamples = [...e(t).waveformSamples, Math.round(f * 100)], _ = o), requestAnimationFrame(C);
+      const a = Math.sqrt(f / x.length), u = Math.min(1, a * 4);
+      o - w >= i && (e(t).waveformSamples = [...e(t).waveformSamples, Math.round(u * 100)], w = o), requestAnimationFrame(C);
     }
-    b.onstop = () => {
+    h.onstop = () => {
       if (e(t).state !== "recording")
         return;
-      c.getTracks().forEach((v) => v.stop()), u?.close();
+      v.getTracks().forEach((f) => f.stop()), g?.close();
       const o = e(t).waveformSamples;
-      e(t).waveformSamples = [], p()({
-        url: URL.createObjectURL(new Blob(q, { type: b.mimeType })),
+      e(t).waveformSamples = [], c()({
+        url: URL.createObjectURL(new Blob(q, { type: h.mimeType })),
         waveform: o
       }), e(t).state = "ready";
-    }, b.start();
+    }, h.start();
     const r = () => {
       e(t).state === "recording" && (e(t).timeElapsed += 1, setTimeout(r, 1e3));
     };
     setTimeout(r, 1e3), e(t).state = "recording", C();
   }
-  function $() {
-    b?.stop();
+  function j() {
+    h?.stop();
   }
   var k = {
     get deviceId() {
       return n();
     },
-    set deviceId(c = "") {
-      n(c), T();
+    set deviceId(v = "") {
+      n(v), T();
     },
     get onDone() {
-      return p();
+      return c();
     },
-    set onDone(c) {
-      p(c), T();
+    set onDone(v) {
+      c(v), T();
     }
-  }, x = cr(), N = I(x);
+  }, L = cr(), H = I(L);
   {
-    let c = H(() => e(t).state === "recording" && "recording");
-    de(N, {
-      onclick: M,
+    let v = N(() => e(t).state === "recording" && "recording");
+    de(H, {
+      onclick: S,
       get type() {
-        return e(c);
+        return e(v);
       },
       children: (q, A) => {
-        var S = lr(), w = Q(S), _ = U(w, 2);
+        var z = lr(), x = Q(z), w = U(x, 2);
         {
           var C = (o) => {
-            var v = oe("Record");
-            i(o, v);
+            var f = oe("Record");
+            l(o, f);
           }, r = (o) => {
-            var v = re(), a = Q(v);
+            var f = re(), a = Q(f);
             {
-              var f = (m) => {
+              var u = (m) => {
                 var E = oe("Recording");
-                i(m, E);
+                l(m, E);
               };
-              j(
+              B(
                 a,
                 (m) => {
-                  e(t).state === "recording" && m(f);
+                  e(t).state === "recording" && m(u);
                 },
                 !0
               );
             }
-            i(o, v);
+            l(o, f);
           };
-          j(_, (o) => {
+          B(w, (o) => {
             e(t).state === "ready" ? o(C) : o(r, !1);
           });
         }
         O(() => te(
-          w,
+          x,
           1,
           ce([
             "record-icon",
             e(t).state === "recording" && "record-icon--is-recording"
           ]),
           "svelte-fc16qh"
-        )), i(q, S);
+        )), l(q, z);
       },
       $$slots: { default: !0 }
     });
   }
-  var F = U(N, 2);
+  var F = U(H, 2);
   {
-    let c = H(() => e(t).state === "recording");
+    let v = N(() => e(t).state === "recording");
     Re(F, {
       get disabled() {
-        return e(c);
+        return e(v);
       },
       get deviceId() {
         return n();
@@ -517,32 +523,32 @@ function Ae(L, s) {
   }
   var y = U(F, 2);
   {
-    var g = (c) => {
-      var q = dr(), A = I(q), S = I(A);
-      Le(S, {
+    var p = (v) => {
+      var q = dr(), A = I(q), z = I(A);
+      Le(z, {
         get data() {
           return e(t).waveformSamples;
         }
-      }), z(A);
-      var w = U(A, 2), _ = I(w);
-      z(w), z(q), O((C, r) => ve(_, `${C ?? ""}:${r ?? ""}`), [
+      }), M(A);
+      var x = U(A, 2), w = I(x);
+      M(x), M(q), O((C, r) => ve(w, `${C ?? ""}:${r ?? ""}`), [
         () => Math.floor(e(t).timeElapsed / 60).toString(),
         () => (e(t).timeElapsed % 60).toString().padStart(2, "0")
-      ]), i(c, q);
+      ]), l(v, q);
     };
-    j(y, (c) => {
-      e(t).state === "recording" && c(g);
+    B(y, (v) => {
+      e(t).state === "recording" && v(p);
     });
   }
-  return z(x), O(() => te(
-    x,
+  return M(L), O(() => te(
+    L,
     1,
     ce([
       "container",
       e(t).state === "recording" && "is-recording"
     ]),
     "svelte-fc16qh"
-  )), i(L, x), ie(k);
+  )), l(b, L), ie(k);
 }
 ae(Ae, { deviceId: {}, onDone: {} }, [], [], !0);
 var fr = R('<p class="status-message svelte-14spe77">Recording saved successfully!</p>'), ur = R('<p class="status-message svelte-14spe77">Uploading...</p>'), gr = R('<p class="status-message svelte-14spe77">Processing...</p>'), pr = R('<div class="error svelte-14spe77"><p class="svelte-14spe77"> </p> <!></div>'), yr = ue('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" style="fill: currentColor; width: 1em; height: 1em;"><path d="M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z"></path></svg>'), mr = R('<div class="confirm svelte-14spe77"><!> <div class="confirm-actions svelte-14spe77"><!> <!></div></div>'), br = R('<div class="row"><!></div>'), hr = R('<div class="recorder svelte-14spe77" role="group" aria-label="44 audio recorder"><!></div>');
@@ -551,46 +557,46 @@ const _r = {
   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-14spe77 {padding:var(--fortyfour-recorder-spacing-md);border-radius:var(--fortyfour-recorder-radius);background:var(--fortyfour-recorder-bg);color:var(--fortyfour-recorder-color);}.confirm.svelte-14spe77 {display:flex;align-items:center;gap:var(--fortyfour-recorder-spacing-sm);}.confirm-actions.svelte-14spe77 {display:flex;gap:var(--fortyfour-recorder-spacing-sm);flex-shrink:0;}.error.svelte-14spe77 {display:flex;flex-direction:column;gap:var(--fortyfour-recorder-spacing-sm);}.error.svelte-14spe77 p:where(.svelte-14spe77) {color:var(--fortyfour-recorder-red-bg);margin:0;}.status-message.svelte-14spe77 {margin:0;text-align:center;}`
 };
-function wr(L, s) {
-  se(s, !0), ne(L, _r);
+function wr(b, s) {
+  se(s, !0), ne(b, _r);
   const n = s.$$host;
-  let p = P(s, "sessionId", 7), d = P(s, "labels", 7, ""), t = P(s, "apiHost", 7, "api.44.audio");
-  const b = H(() => d() ? d().split(",").map((r) => r.trim()).filter(Boolean) : []), u = 2e3, M = 30;
-  let h = D(
+  let c = P(s, "sessionId", 7), i = P(s, "labels", 7, ""), t = P(s, "apiHost", 7, "api.44.audio");
+  const h = N(() => i() ? i().split(",").map((r) => r.trim()).filter(Boolean) : []), g = 2e3, S = 30;
+  let _ = D(
     "ready"
     // "ready", "recording", "confirm", "uploading", "processing", "done", "error"
-  ), $ = D(null), k = D(null), x = D(null), N = D(""), F = D(null);
+  ), j = D(null), k = D(null), L = D(null), H = D(""), F = D(null);
   async function y() {
-    if (!(e(h) !== "confirm" || !e(k))) {
-      l(h, "uploading");
+    if (!(e(_) !== "confirm" || !e(k))) {
+      d(_, "uploading");
       try {
         const r = await fetch(e(k));
         if (!r.ok)
           throw new Error("Failed to load audio data");
-        const o = await r.blob(), v = new File([o], "recording.audio", { type: o.type }), a = new FormData();
-        a.append("sessionId", p()), e(b).forEach((B) => a.append("labels", B)), a.append("audioFile", v), e(x) && a.append("waveform", JSON.stringify(e(x)));
-        const f = await fetch(`https://${t()}/v1/recordings`, { method: "POST", body: a });
-        if (!f.ok)
-          throw new Error(`Upload failed: ${f.status}`);
-        const m = await f.json();
-        l($, m.recordingId, !0), l(h, "processing");
-        let E = !1, G = 0;
-        for (; !E && G < M; )
-          await new Promise((B) => setTimeout(B, u)), E = await c(e($)), G++;
+        const o = await r.blob(), f = new File([o], "recording.audio", { type: o.type }), a = new FormData();
+        a.append("sessionId", c()), e(h).forEach(($) => a.append("labels", $)), a.append("audioFile", f), e(L) && a.append("waveform", JSON.stringify(e(L)));
+        const u = await fetch(`https://${t()}/v1/recordings`, { method: "POST", body: a });
+        if (!u.ok)
+          throw new Error(`Upload failed: ${u.status}`);
+        const m = await u.json();
+        d(j, m.recordingId, !0), d(_, "processing");
+        let E = !1, V = 0;
+        for (; !E && V < S; )
+          await new Promise(($) => setTimeout($, g)), E = await v(e(j)), V++;
         if (!E) {
-          l(F, "Recording processing timeout. Please try again."), l(h, "error");
+          d(F, "Recording processing timeout. Please try again."), d(_, "error");
           return;
         }
-        n.dispatchEvent(new CustomEvent("recording-complete", { detail: { recordingId: e($) } })), l(h, "done");
+        n.dispatchEvent(new CustomEvent("recording-complete", { detail: { recordingId: e(j) } })), d(_, "done");
       } catch (r) {
-        console.error("Error saving recording:", r), l(F, r.message || "Failed to save recording", !0), l(h, "error");
+        console.error("Error saving recording:", r), d(F, r.message || "Failed to save recording", !0), d(_, "error");
       }
     }
   }
-  function g() {
-    l(k, null), l(x, null), l(h, "ready");
+  function p() {
+    d(k, null), d(L, null), d(_, "ready");
   }
-  async function c(r) {
+  async function v(r) {
     try {
       const o = await fetch(`https://${t()}/v1/recordings/${r}/status`);
       if (!o.ok)
@@ -601,20 +607,20 @@ function wr(L, s) {
     }
   }
   function q(r) {
-    l(k, r.url, !0), l(x, r.waveform, !0), l(h, "confirm");
+    d(k, r.url, !0), d(L, r.waveform, !0), d(_, "confirm");
   }
   var A = {
     get sessionId() {
-      return p();
+      return c();
     },
     set sessionId(r) {
-      p(r), T();
+      c(r), T();
     },
     get labels() {
-      return d();
+      return i();
     },
     set labels(r = "") {
-      d(r), T();
+      i(r), T();
     },
     get apiHost() {
       return t();
@@ -622,129 +628,129 @@ function wr(L, s) {
     set apiHost(r = "api.44.audio") {
       t(r), T();
     }
-  }, S = hr(), w = I(S);
+  }, z = hr(), x = I(z);
   {
-    var _ = (r) => {
+    var w = (r) => {
       var o = fr();
-      i(r, o);
+      l(r, o);
     }, C = (r) => {
-      var o = re(), v = Q(o);
+      var o = re(), f = Q(o);
       {
         var a = (m) => {
           var E = ur();
-          i(m, E);
-        }, f = (m) => {
-          var E = re(), G = Q(E);
+          l(m, E);
+        }, u = (m) => {
+          var E = re(), V = Q(E);
           {
-            var B = (J) => {
+            var $ = (J) => {
               var K = gr();
-              i(J, K);
+              l(J, K);
             }, ge = (J) => {
               var K = re(), Pe = Q(K);
               {
-                var Te = (Y) => {
-                  var Z = pr(), le = I(Z), pe = I(le);
-                  z(le);
+                var Te = (Z) => {
+                  var Y = pr(), le = I(Y), pe = I(le);
+                  M(le);
                   var ye = U(le, 2);
                   de(ye, {
-                    onclick: () => l(h, "confirm"),
-                    children: (X, W) => {
-                      Ce();
+                    onclick: () => d(_, "confirm"),
+                    children: (X, G) => {
+                      qe();
                       var ee = oe("Try Again");
-                      i(X, ee);
+                      l(X, ee);
                     },
                     $$slots: { default: !0 }
-                  }), z(Z), O(() => ve(pe, `Error: ${e(F) ?? ""}`)), i(Y, Z);
-                }, De = (Y) => {
-                  var Z = re(), le = Q(Z);
+                  }), M(Y), O(() => ve(pe, `Error: ${e(F) ?? ""}`)), l(Z, Y);
+                }, De = (Z) => {
+                  var Y = re(), le = Q(Y);
                   {
                     var pe = (X) => {
-                      var W = mr(), ee = I(W);
+                      var G = mr(), ee = I(G);
                       Ee(ee, {
                         get audioURL() {
                           return e(k);
                         },
                         get waveform() {
-                          return e(x);
+                          return e(L);
                         }
                       });
                       var fe = U(ee, 2), ke = I(fe);
                       de(ke, {
-                        onclick: g,
-                        children: (me, je) => {
+                        onclick: p,
+                        children: (me, Be) => {
                           var be = yr();
-                          i(me, be);
+                          l(me, be);
                         },
                         $$slots: { default: !0 }
                       });
-                      var Be = U(ke, 2);
-                      de(Be, {
+                      var $e = U(ke, 2);
+                      de($e, {
                         type: "primary",
                         onclick: y,
-                        children: (me, je) => {
-                          Ce();
+                        children: (me, Be) => {
+                          qe();
                           var be = oe("Save");
-                          i(me, be);
+                          l(me, be);
                         },
                         $$slots: { default: !0 }
-                      }), z(fe), z(W), he(1, W, () => Ie, () => ({ y: 20, duration: 700 })), i(X, W);
+                      }), M(fe), M(G), he(1, G, () => Ce, () => ({ y: 20, duration: 700 })), l(X, G);
                     }, ye = (X) => {
-                      var W = br(), ee = I(W);
+                      var G = br(), ee = I(G);
                       Ae(ee, {
                         onDone: q,
                         get deviceId() {
-                          return e(N);
+                          return e(H);
                         },
                         set deviceId(fe) {
-                          l(N, fe, !0);
+                          d(H, fe, !0);
                         }
-                      }), z(W), he(1, W, () => Ie, () => ({ y: -20, duration: 700 })), i(X, W);
+                      }), M(G), he(1, G, () => Ce, () => ({ y: -20, duration: 700 })), l(X, G);
                     };
-                    j(
+                    B(
                       le,
                       (X) => {
-                        e(h) === "confirm" ? X(pe) : X(ye, !1);
+                        e(_) === "confirm" ? X(pe) : X(ye, !1);
                       },
                       !0
                     );
                   }
-                  i(Y, Z);
+                  l(Z, Y);
                 };
-                j(
+                B(
                   Pe,
-                  (Y) => {
-                    e(h) === "error" ? Y(Te) : Y(De, !1);
+                  (Z) => {
+                    e(_) === "error" ? Z(Te) : Z(De, !1);
                   },
                   !0
                 );
               }
-              i(J, K);
+              l(J, K);
             };
-            j(
-              G,
+            B(
+              V,
               (J) => {
-                e(h) === "processing" ? J(B) : J(ge, !1);
+                e(_) === "processing" ? J($) : J(ge, !1);
               },
               !0
             );
           }
-          i(m, E);
+          l(m, E);
         };
-        j(
-          v,
+        B(
+          f,
           (m) => {
-            e(h) === "uploading" ? m(a) : m(f, !1);
+            e(_) === "uploading" ? m(a) : m(u, !1);
           },
           !0
         );
       }
-      i(r, o);
+      l(r, o);
     };
-    j(w, (r) => {
-      e(h) === "done" ? r(_) : r(C, !1);
+    B(x, (r) => {
+      e(_) === "done" ? r(w) : r(C, !1);
     });
   }
-  return z(S), i(L, S), ie(A);
+  return M(z), l(b, z), ie(A);
 }
 customElements.define("fortyfour-audio-recorder", ae(
   wr,