@44-audio/components 0.1.0-dev.14 → 0.1.0-dev.16

package/dist/player.es.js

@@ -1,143 +1,169 @@
-import { d as ut, c as Q, p as V, a as W, b as v, f as y, A as pt, i as S, t as h, s as ft, e as i, g as X, h as g, j as n, u as G, k as _, l as b, r as m, m as T, n as L, o as F, q as D, v as u, w as N, x as bt, y as ht } from "./AudioPlayer-BnKA5uw-.mjs";
-function _t(d, e) {
-  u(e, !n(e));
+import { b as Je, E as Ke, a as Qe, d as lt, n as st, h as He, c as Ve, e as dt, f as Ue, s as ut, p as ct, g as ft, i as Be, j as W, k as te, l as de, m as i, o as A, A as vt, q, t as Q, r as je, u as g, v as re, w as n, x as t, y as Y, z as j, B as K, C as D, D as E, F as N, G as se, H as U, I as x, J as Oe, K as ae, L as ie, M as gt, N as Pe, O as be, P as We, Q as pt, R as Ce, S as yt, T as ce, U as xe, V as ze, W as Ie, X as Ge, Y as mt } from "./index-CN_xnR1S.mjs";
+function we(c, e, ...d) {
+  var l = c, s = st, o;
+  Je(() => {
+    s !== (s = e()) && (o && (lt(o), o = null), o = Qe(() => (
+      /** @type {SnippetFn} */
+      s(l, ...d)
+    )));
+  }, Ke), He && (l = Ve);
 }
-var mt = y('<p class="error svelte-47ttlb">Error loading recording.</p>'), yt = y('&bull; <button class="link svelte-47ttlb"> </button>', 1), xt = (d, e) => u(e, !0), kt = y(' <button class="link svelte-47ttlb">Show more</button>', 1), wt = (d, e) => u(e, !1), Ht = y(' <button class="link svelte-47ttlb">Show less</button>', 1), It = y('<span class="placeholder svelte-47ttlb"></span>'), zt = y('<div role="group" aria-label="44 audio player"><div class="display svelte-47ttlb"><!></div> <!> <div class="details svelte-47ttlb"><div class="title svelte-47ttlb">Transcription <!></div> <div class="transcription"><!></div></div></div>');
-const St = {
+function ht(c, e, d) {
+  He && ft();
+  var l = c, s, o, u = null, m = null;
+  function k() {
+    o && (ct(o), o = null), u && (u.lastChild.remove(), l.before(u), u = null), o = m, m = null;
+  }
+  Je(() => {
+    if (s !== (s = e())) {
+      var h = ut();
+      if (s) {
+        var b = l;
+        h && (u = document.createDocumentFragment(), u.append(b = dt()), o && Ue.skipped_effects.add(o)), m = Qe(() => d(b, s));
+      }
+      h ? Ue.add_callback(k) : k();
+    }
+  }, Ke), He && (l = Ve);
+}
+function bt(c, e) {
+  x(e, !t(e));
+}
+var _t = A('<p class="error svelte-47ttlb">Error loading recording.</p>'), kt = A('&bull; <button class="link svelte-47ttlb"> </button>', 1), Pt = (c, e) => x(e, !0), wt = A(' <button class="link svelte-47ttlb">Show more</button>', 1), xt = (c, e) => x(e, !1), zt = A(' <button class="link svelte-47ttlb">Show less</button>', 1), It = A('<span class="placeholder svelte-47ttlb"></span>'), Lt = A('<div role="group" aria-label="44 audio player"><div class="display svelte-47ttlb"><!></div> <!> <div class="details svelte-47ttlb"><div class="title svelte-47ttlb">Transcription <!></div> <div class="transcription"><!></div></div></div>');
+const Ct = {
   hash: "svelte-47ttlb",
   code: "button.svelte-47ttlb {font:inherit;margin:0;padding:0;box-sizing:border-box;border:none;background:none;cursor:pointer;}.link.svelte-47ttlb {background:none;border:none;color:var(--44-color-2);cursor:pointer;padding:0;font:inherit;}.link.svelte-47ttlb:hover {color:var(--44-color-3);text-decoration:underline;}.container.svelte-47ttlb {padding:16px;}.container.loading.svelte-47ttlb .display:where(.svelte-47ttlb) {opacity:0.5;}.display.svelte-47ttlb {display:flex;align-items:center;gap:12px;transition:opacity 0.2s;}.details.svelte-47ttlb {transition:opacity 0.2s;}.container.loading.svelte-47ttlb .details:where(.svelte-47ttlb) {opacity:0.5;}.details.svelte-47ttlb .title:where(.svelte-47ttlb) {font-weight:bold;margin-top:16px;margin-bottom:8px;}.error.svelte-47ttlb {margin:16px 0 0;opacity:0.7;}.placeholder.svelte-47ttlb {display:block;height:1em;width:100%;background:currentColor;opacity:0.15;border-radius:4px;}"
 };
-function Y(d, e) {
-  V(e, !0), W(d, St);
-  let l = v(e, "recordingId", 7), a = v(e, "recording", 7, null), c = v(e, "loading", 7, !1), j = v(e, "error", 7, !1), x = v(e, "apiHost", 7), p = L(!1), f = L(!1);
-  const O = G(() => a()?.waveform ?? Array(100).fill(0));
-  var k = {
+function Xe(c, e) {
+  te(e, !0), de(c, Ct);
+  let d = i(e, "recordingId", 7), l = i(e, "recording", 7, null), s = i(e, "loading", 7, !1), o = i(e, "error", 7, !1), u = i(e, "apiHost", 7), m = N(!1), k = N(!1);
+  const h = Y(() => l()?.waveform ?? Array(100).fill(0));
+  var b = {
     get recordingId() {
-      return l();
+      return d();
     },
-    set recordingId(t) {
-      l(t), g();
+    set recordingId(a) {
+      d(a), n();
     },
     get recording() {
-      return a();
+      return l();
     },
-    set recording(t = null) {
-      a(t), g();
+    set recording(a = null) {
+      l(a), n();
     },
     get loading() {
-      return c();
+      return s();
     },
-    set loading(t = !1) {
-      c(t), g();
+    set loading(a = !1) {
+      s(a), n();
     },
     get error() {
-      return j();
+      return o();
     },
-    set error(t = !1) {
-      j(t), g();
+    set error(a = !1) {
+      o(a), n();
     },
     get apiHost() {
-      return x();
+      return u();
     },
-    set apiHost(t) {
-      x(t), g();
+    set apiHost(a) {
+      u(a), n();
     }
-  }, w = zt();
-  let r;
-  var o = _(w), Z = _(o);
+  }, P = Lt();
+  let _;
+  var r = j(P), S = j(r);
   {
-    let t = G(() => `https://${x()}/v1/recordings/${l()}/audio.mp3`);
-    pt(Z, {
+    let a = Y(() => `https://${u()}/v1/recordings/${d()}/audio.mp3`);
+    vt(S, {
       get audioURL() {
-        return n(t);
+        return t(a);
       },
       get waveform() {
-        return n(O);
+        return t(h);
       }
     });
   }
-  m(o);
-  var J = b(o, 2);
+  D(r);
+  var w = K(r, 2);
   {
-    var $ = (t) => {
-      var s = mt();
-      i(t, s);
+    var f = (a) => {
+      var F = _t();
+      g(a, F);
     };
-    S(J, (t) => {
-      j() && t($);
+    q(w, (a) => {
+      o() && a(f);
     });
   }
-  var K = b(J, 2), R = _(K), tt = b(_(R));
+  var L = K(w, 2), y = j(L), z = K(j(y));
   {
-    var et = (t) => {
-      var s = yt(), A = b(T(s));
-      A.__click = [_t, p];
-      var U = _(A, !0);
-      m(A), h(() => F(U, n(p) ? "Original" : "Translation")), i(t, s);
+    var R = (a) => {
+      var F = kt(), I = K(E(F));
+      I.__click = [bt, m];
+      var H = j(I, !0);
+      D(I), Q(() => se(H, t(m) ? "Original" : "Translation")), g(a, F);
     };
-    S(tt, (t) => {
-      a()?.translation && t(et);
+    q(z, (a) => {
+      l()?.translation && a(R);
     });
   }
-  m(R);
-  var M = b(R, 2), rt = _(M);
+  D(y);
+  var B = K(y, 2), $ = j(B);
   {
-    var at = (t) => {
-      var s = D(), A = T(s);
+    var T = (a) => {
+      var F = U(), I = E(F);
       {
-        var U = (H) => {
-          var C = N();
-          h(() => F(C, a().translation)), i(H, C);
-        }, it = (H) => {
-          var C = D(), lt = T(C);
+        var H = (O) => {
+          var G = Oe();
+          Q(() => se(G, l().translation)), g(O, G);
+        }, Z = (O) => {
+          var G = U(), fe = E(G);
           {
-            var nt = (I) => {
-              var E = D(), dt = T(E);
+            var ve = (v) => {
+              var V = U(), J = E(V);
               {
-                var ct = (z) => {
-                  var P = kt(), q = T(P), B = b(q);
-                  B.__click = [xt, f], h((gt) => F(q, `${gt ?? ""}... `), [() => a().transcription.slice(0, 200)]), i(z, P);
-                }, vt = (z) => {
-                  var P = Ht(), q = T(P), B = b(q);
-                  B.__click = [wt, f], h(() => F(q, `${a().transcription ?? ""} `)), i(z, P);
+                var ne = (p) => {
+                  var C = wt(), X = E(C), oe = K(X);
+                  oe.__click = [Pt, k], Q((pe) => se(X, `${pe ?? ""}... `), [() => l().transcription.slice(0, 200)]), g(p, C);
+                }, ge = (p) => {
+                  var C = zt(), X = E(C), oe = K(X);
+                  oe.__click = [xt, k], Q(() => se(X, `${l().transcription ?? ""} `)), g(p, C);
                 };
-                S(dt, (z) => {
-                  n(f) ? z(vt, !1) : z(ct);
+                q(J, (p) => {
+                  t(k) ? p(ge, !1) : p(ne);
                 });
               }
-              i(I, E);
-            }, st = (I) => {
-              var E = N();
-              h(() => F(E, a().transcription)), i(I, E);
+              g(v, V);
+            }, ee = (v) => {
+              var V = Oe();
+              Q(() => se(V, l().transcription)), g(v, V);
             };
-            S(
-              lt,
-              (I) => {
-                a().transcription.length > 200 ? I(nt) : I(st, !1);
+            q(
+              fe,
+              (v) => {
+                l().transcription.length > 200 ? v(ve) : v(ee, !1);
               },
               !0
             );
           }
-          i(H, C);
+          g(O, G);
         };
-        S(A, (H) => {
-          n(p) ? H(U) : H(it, !1);
+        q(I, (O) => {
+          t(m) ? O(H) : O(Z, !1);
         });
       }
-      i(t, s);
-    }, ot = (t) => {
-      var s = It();
-      i(t, s);
+      g(a, F);
+    }, M = (a) => {
+      var F = It();
+      g(a, F);
     };
-    S(rt, (t) => {
-      a()?.transcription ? t(at) : t(ot, !1);
+    q($, (a) => {
+      l()?.transcription ? a(T) : a(M, !1);
     });
   }
-  return m(M), m(K), m(w), h((t) => r = ft(w, 1, "container svelte-47ttlb", null, r, t), [() => ({ loading: c() })]), i(d, w), X(k);
+  return D(B), D(L), D(P), Q((a) => _ = je(P, 1, "container svelte-47ttlb", null, _, a), [() => ({ loading: s() })]), g(c, P), re(b);
 }
-ut(["click"]);
-Q(
-  Y,
+Be(["click"]);
+W(
+  Xe,
   {
     recordingId: {},
     recording: {},
@@ -149,70 +175,70 @@ Q(
   [],
   !0
 );
-var Tt = y('<div class="container svelte-yizh5h" role="group" aria-label="44 audio player"><!></div>');
-const jt = {
+var Rt = A('<div class="container svelte-yizh5h" role="group" aria-label="44 audio player"><!></div>');
+const Tt = {
   hash: "svelte-yizh5h",
   code: ":host {display:block;font-size:inherit;font-family:system-ui;line-height:1.35;color:var(--44-color-1);min-height:150px;}.container.svelte-yizh5h {width:100%;border-radius:16px;background:var(--44-color-0);color:var(--44-color-1);}"
 };
-function At(d, e) {
-  V(e, !0), W(d, jt);
-  let l = v(e, "recordingId", 7), a = v(e, "theme", 7), c = v(e, "apiHost", 7, "api.44.audio");
-  const j = G(() => a().split(",").map((r, o) => `--44-color-${o}: ${r.trim()};`).join(" "));
-  let x = L(null), p = L(!0), f = L(!1);
-  bt(() => {
-    const r = l();
-    u(p, !0), u(f, !1), fetch(`https://${c()}/v1/recordings/${r}/player`).then((o) => {
-      if (!o.ok)
+function Et(c, e) {
+  te(e, !0), de(c, Tt);
+  let d = i(e, "recordingId", 7), l = i(e, "theme", 7, "#ffffff,#000000,#3b82f6,#2563eb,#8b5cf6,#7c3aed"), s = i(e, "apiHost", 7, "api.44.audio");
+  const o = Y(() => l().split(",").map((_, r) => `--44-color-${r}: ${_.trim()};`).join(" "));
+  let u = N(null), m = N(!0), k = N(!1);
+  ae(() => {
+    const _ = d();
+    x(m, !0), x(k, !1), fetch(`https://${s()}/v1/recordings/${_}/player`).then((r) => {
+      if (!r.ok)
         throw new Error("Failed to fetch data");
-      return o.json();
-    }).then((o) => {
-      l() === r && o.status === "ready" && u(x, o, !0);
-    }).catch((o) => {
-      console.error(o), l() === r && u(f, !0);
+      return r.json();
+    }).then((r) => {
+      d() === _ && r.status === "ready" && x(u, r, !0);
+    }).catch((r) => {
+      console.error(r), d() === _ && x(k, !0);
     }).finally(() => {
-      l() === r && u(p, !1);
+      d() === _ && x(m, !1);
     });
   });
-  var O = {
+  var h = {
     get recordingId() {
-      return l();
+      return d();
     },
-    set recordingId(r) {
-      l(r), g();
+    set recordingId(_) {
+      d(_), n();
     },
     get theme() {
-      return a();
+      return l();
     },
-    set theme(r) {
-      a(r), g();
+    set theme(_ = "#ffffff,#000000,#3b82f6,#2563eb,#8b5cf6,#7c3aed") {
+      l(_), n();
     },
     get apiHost() {
-      return c();
+      return s();
     },
-    set apiHost(r = "api.44.audio") {
-      c(r), g();
+    set apiHost(_ = "api.44.audio") {
+      s(_), n();
     }
-  }, k = Tt(), w = _(k);
-  return Y(w, {
+  }, b = Rt(), P = j(b);
+  return Xe(P, {
     get apiHost() {
-      return c();
+      return s();
     },
     get recordingId() {
-      return l();
+      return d();
     },
     get recording() {
-      return n(x);
+      return t(u);
     },
     get loading() {
-      return n(p);
+      return t(m);
     },
     get error() {
-      return n(f);
+      return t(k);
     }
-  }), m(k), h(() => ht(k, n(j))), i(d, k), X(O);
+  }), D(b), Q(() => ie(b, t(o))), g(c, b), re(h);
 }
-customElements.define("fortyfour-audio-player", Q(
-  At,
+customElements.define("fortyfour-audio-player", W(
+  Et,
   {
     apiHost: { attribute: "api-host" },
     recordingId: { attribute: "recording-id" },
@@ -222,3 +248,1294 @@ customElements.define("fortyfour-audio-player", Q(
   [],
   !0
 ));
+var St = A('<div part="ring" class="ring-progress svelte-1h9q29"><div class="ring-inner svelte-1h9q29"></div></div>');
+const Mt = {
+  hash: "svelte-1h9q29",
+  code: `.ring-progress.svelte-1h9q29 {position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:conic-gradient(
+      from 0deg,
+      var(--fortyfour-player-mini-ring-fill-color) var(--progress-deg),
+      var(--fortyfour-player-mini-ring-track-color) var(--progress-deg)
+    );}.ring-inner.svelte-1h9q29 {position:absolute;inset:var(--fortyfour-player-mini-ring-width);border-radius:inherit;background:var(--fortyfour-player-mini-background-color);}`
+};
+function De(c, e) {
+  te(e, !0), de(c, Mt);
+  let d = i(e, "progress", 7, 0);
+  const l = Y(() => d() * 360);
+  var s = {
+    get progress() {
+      return d();
+    },
+    set progress(u = 0) {
+      d(u), n();
+    }
+  }, o = St();
+  return Q(() => ie(o, `--progress-deg: ${t(l) ?? ""}deg`)), g(c, o), re(s);
+}
+W(De, { progress: {} }, [], [], !0);
+var At = A('<div part="ripple" class="ripple ripple-small svelte-i128c7"></div>'), Ht = A('<div part="ripple" class="ripple ripple-medium svelte-i128c7"></div>'), qt = A('<div part="ripple" class="ripple ripple-large svelte-i128c7"></div>'), Ft = A("<!> <!> <!>", 1);
+const Bt = {
+  hash: "svelte-i128c7",
+  code: `.ripple.svelte-i128c7 {position:absolute;inset:0;border-radius:inherit;border:2px solid var(--fortyfour-player-mini-background-color);pointer-events:none;
+    animation: ripple 1.5s ease-out infinite;}.ripple-small.svelte-i128c7 {
+    animation-name: svelte-i128c7-ripple-small;}.ripple-medium.svelte-i128c7 {
+    animation-name: svelte-i128c7-ripple-medium;}.ripple-large.svelte-i128c7 {
+    animation-name: svelte-i128c7-ripple-large;}
+
+  @keyframes svelte-i128c7-ripple-small {
+    0% {
+      transform: scale(1);
+      opacity: 0.4;
+    }
+    100% {
+      transform: scale(calc(1 + 0.15 * var(--intensity, 1)));
+      opacity: 0;
+    }
+  }
+
+  @keyframes svelte-i128c7-ripple-medium {
+    0% {
+      transform: scale(1);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(calc(1 + 0.3 * var(--intensity, 1)));
+      opacity: 0;
+    }
+  }
+
+  @keyframes svelte-i128c7-ripple-large {
+    0% {
+      transform: scale(1);
+      opacity: 0.6;
+    }
+    100% {
+      transform: scale(calc(1 + 0.5 * var(--intensity, 1)));
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {.ripple.svelte-i128c7 {
+      animation: none;}
+  }`
+};
+function Ne(c, e) {
+  te(e, !0), de(c, Bt);
+  let d = i(e, "isPlaying", 7, !1), l = i(e, "amplitude", 7, 0), s = i(e, "intensity", 7, 1), o = N(gt({ small: !1, medium: !1, large: !1 }));
+  function u(f) {
+    return f < 33 ? "small" : f < 66 ? "medium" : "large";
+  }
+  ae(() => {
+    if (!d()) {
+      x(o, { small: !1, medium: !1, large: !1 }, !0);
+      return;
+    }
+    const f = u(l());
+    t(o)[f] || (t(o)[f] = !0);
+  });
+  function m(f) {
+    t(o)[f] = !1;
+  }
+  var k = {
+    get isPlaying() {
+      return d();
+    },
+    set isPlaying(f = !1) {
+      d(f), n();
+    },
+    get amplitude() {
+      return l();
+    },
+    set amplitude(f = 0) {
+      l(f), n();
+    },
+    get intensity() {
+      return s();
+    },
+    set intensity(f = 1) {
+      s(f), n();
+    }
+  }, h = Ft(), b = E(h);
+  {
+    var P = (f) => {
+      var L = At();
+      Q(() => ie(L, `--intensity: ${s() ?? ""};`)), Pe("animationend", L, () => m("small")), g(f, L);
+    };
+    q(b, (f) => {
+      t(o).small && f(P);
+    });
+  }
+  var _ = K(b, 2);
+  {
+    var r = (f) => {
+      var L = Ht();
+      Q(() => ie(L, `--intensity: ${s() ?? ""};`)), Pe("animationend", L, () => m("medium")), g(f, L);
+    };
+    q(_, (f) => {
+      t(o).medium && f(r);
+    });
+  }
+  var S = K(_, 2);
+  {
+    var w = (f) => {
+      var L = qt();
+      Q(() => ie(L, `--intensity: ${s() ?? ""};`)), Pe("animationend", L, () => m("large")), g(f, L);
+    };
+    q(S, (f) => {
+      t(o).large && f(w);
+    });
+  }
+  return g(c, h), re(k);
+}
+W(Ne, { isPlaying: {}, amplitude: {}, intensity: {} }, [], [], !0);
+var jt = A('<div class="shape-wrapper svelte-1vidy74"><!> <button part="button"><!> <span part="icon" class="icon svelte-1vidy74"><!></span></button></div>');
+const Dt = {
+  hash: "svelte-1vidy74",
+  code: `.shape-wrapper.svelte-1vidy74 {position:relative;width:1em;height:1em;}.play-button.svelte-1vidy74 {position:relative;width:100%;height:100%;border:var(--fortyfour-player-mini-border-width) solid
+      var(--fortyfour-player-mini-border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--fortyfour-player-mini-background-color);color:var(--fortyfour-player-mini-icon-color);}.play-button.svelte-1vidy74:focus-visible {outline:var(--fortyfour-player-mini-focus-width) solid var(--fortyfour-player-mini-focus-color);outline-offset:var(--fortyfour-player-mini-focus-offset);}.play-button.svelte-1vidy74:disabled {opacity:0.5;cursor:not-allowed;}.play-button.has-ring-progress.svelte-1vidy74 {border:none;}.icon.svelte-1vidy74 {position:relative;z-index:1;width:1em;height:1em;display:flex;align-items:center;justify-content:center;}.icon.svelte-1vidy74 svg {width:100%;height:100%;fill:currentColor;}`
+};
+function Re(c, e) {
+  te(e, !0), de(c, Dt);
+  let d = i(e, "onclick", 7), l = i(e, "disabled", 7, !1), s = i(e, "loading", 7, !1), o = i(e, "visualization", 7, "none"), u = i(e, "progressPercent", 7, 0), m = i(e, "isPlaying", 7, !1), k = i(e, "amplitude", 7, 0), h = i(e, "rippleIntensity", 7, 1), b = i(e, "ariaLabel", 7, "Play"), P = i(e, "borderRadius", 7, "50%"), _ = i(e, "children", 7);
+  var r = {
+    get onclick() {
+      return d();
+    },
+    set onclick(a) {
+      d(a), n();
+    },
+    get disabled() {
+      return l();
+    },
+    set disabled(a = !1) {
+      l(a), n();
+    },
+    get loading() {
+      return s();
+    },
+    set loading(a = !1) {
+      s(a), n();
+    },
+    get visualization() {
+      return o();
+    },
+    set visualization(a = "none") {
+      o(a), n();
+    },
+    get progressPercent() {
+      return u();
+    },
+    set progressPercent(a = 0) {
+      u(a), n();
+    },
+    get isPlaying() {
+      return m();
+    },
+    set isPlaying(a = !1) {
+      m(a), n();
+    },
+    get amplitude() {
+      return k();
+    },
+    set amplitude(a = 0) {
+      k(a), n();
+    },
+    get rippleIntensity() {
+      return h();
+    },
+    set rippleIntensity(a = 1) {
+      h(a), n();
+    },
+    get ariaLabel() {
+      return b();
+    },
+    set ariaLabel(a = "Play") {
+      b(a), n();
+    },
+    get borderRadius() {
+      return P();
+    },
+    set borderRadius(a = "50%") {
+      P(a), n();
+    },
+    get children() {
+      return _();
+    },
+    set children(a) {
+      _(a), n();
+    }
+  }, S = jt();
+  let w;
+  var f = j(S);
+  {
+    var L = (a) => {
+      Ne(a, {
+        get isPlaying() {
+          return m();
+        },
+        get amplitude() {
+          return k();
+        },
+        get intensity() {
+          return h();
+        }
+      });
+    };
+    q(f, (a) => {
+      o() === "ripple" && a(L);
+    });
+  }
+  var y = K(f, 2);
+  let z;
+  y.__click = function(...a) {
+    d()?.apply(this, a);
+  };
+  let R;
+  var B = j(y);
+  {
+    var $ = (a) => {
+      De(a, {
+        get progress() {
+          return u();
+        }
+      });
+    };
+    q(B, (a) => {
+      o() === "ring" && a($);
+    });
+  }
+  var T = K(B, 2), M = j(T);
+  return we(M, _), D(T), D(y), D(S), Q(
+    (a, F, I) => {
+      w = ie(S, "", w, a), z = je(y, 1, "play-button svelte-1vidy74", null, z, F), y.disabled = l(), be(y, "aria-label", b()), be(y, "aria-busy", s()), R = ie(y, "", R, I);
+    },
+    [
+      () => ({ "border-radius": P() }),
+      () => ({ "has-ring-progress": o() === "ring" }),
+      () => ({ "border-radius": P() })
+    ]
+  ), g(c, S), re(r);
+}
+Be(["click"]);
+W(
+  Re,
+  {
+    onclick: {},
+    disabled: {},
+    loading: {},
+    visualization: {},
+    progressPercent: {},
+    isPlaying: {},
+    amplitude: {},
+    rippleIntensity: {},
+    ariaLabel: {},
+    borderRadius: {},
+    children: {}
+  },
+  [],
+  [],
+  !0
+);
+function qe(c, e) {
+  te(e, !0);
+  let d = i(e, "onclick", 7), l = i(e, "disabled", 7, !1), s = i(e, "loading", 7, !1), o = i(e, "visualization", 7, "none"), u = i(e, "progressPercent", 7, 0), m = i(e, "isPlaying", 7, !1), k = i(e, "amplitude", 7, 0), h = i(e, "rippleIntensity", 7, 1), b = i(e, "ariaLabel", 7, "Play"), P = i(e, "children", 7);
+  var _ = {
+    get onclick() {
+      return d();
+    },
+    set onclick(r) {
+      d(r), n();
+    },
+    get disabled() {
+      return l();
+    },
+    set disabled(r = !1) {
+      l(r), n();
+    },
+    get loading() {
+      return s();
+    },
+    set loading(r = !1) {
+      s(r), n();
+    },
+    get visualization() {
+      return o();
+    },
+    set visualization(r = "none") {
+      o(r), n();
+    },
+    get progressPercent() {
+      return u();
+    },
+    set progressPercent(r = 0) {
+      u(r), n();
+    },
+    get isPlaying() {
+      return m();
+    },
+    set isPlaying(r = !1) {
+      m(r), n();
+    },
+    get amplitude() {
+      return k();
+    },
+    set amplitude(r = 0) {
+      k(r), n();
+    },
+    get rippleIntensity() {
+      return h();
+    },
+    set rippleIntensity(r = 1) {
+      h(r), n();
+    },
+    get ariaLabel() {
+      return b();
+    },
+    set ariaLabel(r = "Play") {
+      b(r), n();
+    },
+    get children() {
+      return P();
+    },
+    set children(r) {
+      P(r), n();
+    }
+  };
+  return Re(c, {
+    get onclick() {
+      return d();
+    },
+    get disabled() {
+      return l();
+    },
+    get loading() {
+      return s();
+    },
+    get visualization() {
+      return o();
+    },
+    get progressPercent() {
+      return u();
+    },
+    get isPlaying() {
+      return m();
+    },
+    get amplitude() {
+      return k();
+    },
+    get rippleIntensity() {
+      return h();
+    },
+    get ariaLabel() {
+      return b();
+    },
+    borderRadius: "50%",
+    children: (r, S) => {
+      var w = U(), f = E(w);
+      we(f, P), g(r, w);
+    },
+    $$slots: { default: !0 }
+  }), re(_);
+}
+W(
+  qe,
+  {
+    onclick: {},
+    disabled: {},
+    loading: {},
+    visualization: {},
+    progressPercent: {},
+    isPlaying: {},
+    amplitude: {},
+    rippleIntensity: {},
+    ariaLabel: {},
+    children: {}
+  },
+  [],
+  [],
+  !0
+);
+function Ye(c, e) {
+  te(e, !0);
+  let d = i(e, "onclick", 7), l = i(e, "disabled", 7, !1), s = i(e, "loading", 7, !1), o = i(e, "visualization", 7, "none"), u = i(e, "progressPercent", 7, 0), m = i(e, "isPlaying", 7, !1), k = i(e, "amplitude", 7, 0), h = i(e, "rippleIntensity", 7, 1), b = i(e, "ariaLabel", 7, "Play"), P = i(e, "children", 7);
+  var _ = {
+    get onclick() {
+      return d();
+    },
+    set onclick(r) {
+      d(r), n();
+    },
+    get disabled() {
+      return l();
+    },
+    set disabled(r = !1) {
+      l(r), n();
+    },
+    get loading() {
+      return s();
+    },
+    set loading(r = !1) {
+      s(r), n();
+    },
+    get visualization() {
+      return o();
+    },
+    set visualization(r = "none") {
+      o(r), n();
+    },
+    get progressPercent() {
+      return u();
+    },
+    set progressPercent(r = 0) {
+      u(r), n();
+    },
+    get isPlaying() {
+      return m();
+    },
+    set isPlaying(r = !1) {
+      m(r), n();
+    },
+    get amplitude() {
+      return k();
+    },
+    set amplitude(r = 0) {
+      k(r), n();
+    },
+    get rippleIntensity() {
+      return h();
+    },
+    set rippleIntensity(r = 1) {
+      h(r), n();
+    },
+    get ariaLabel() {
+      return b();
+    },
+    set ariaLabel(r = "Play") {
+      b(r), n();
+    },
+    get children() {
+      return P();
+    },
+    set children(r) {
+      P(r), n();
+    }
+  };
+  return Re(c, {
+    get onclick() {
+      return d();
+    },
+    get disabled() {
+      return l();
+    },
+    get loading() {
+      return s();
+    },
+    get visualization() {
+      return o();
+    },
+    get progressPercent() {
+      return u();
+    },
+    get isPlaying() {
+      return m();
+    },
+    get amplitude() {
+      return k();
+    },
+    get rippleIntensity() {
+      return h();
+    },
+    get ariaLabel() {
+      return b();
+    },
+    borderRadius: "0",
+    children: (r, S) => {
+      var w = U(), f = E(w);
+      we(f, P), g(r, w);
+    },
+    $$slots: { default: !0 }
+  }), re(_);
+}
+W(
+  Ye,
+  {
+    onclick: {},
+    disabled: {},
+    loading: {},
+    visualization: {},
+    progressPercent: {},
+    isPlaying: {},
+    amplitude: {},
+    rippleIntensity: {},
+    ariaLabel: {},
+    children: {}
+  },
+  [],
+  [],
+  !0
+);
+function Ze(c, e) {
+  te(e, !0);
+  let d = i(e, "onclick", 7), l = i(e, "disabled", 7, !1), s = i(e, "loading", 7, !1), o = i(e, "visualization", 7, "none"), u = i(e, "progressPercent", 7, 0), m = i(e, "isPlaying", 7, !1), k = i(e, "amplitude", 7, 0), h = i(e, "rippleIntensity", 7, 1), b = i(e, "ariaLabel", 7, "Play"), P = i(e, "children", 7);
+  var _ = {
+    get onclick() {
+      return d();
+    },
+    set onclick(r) {
+      d(r), n();
+    },
+    get disabled() {
+      return l();
+    },
+    set disabled(r = !1) {
+      l(r), n();
+    },
+    get loading() {
+      return s();
+    },
+    set loading(r = !1) {
+      s(r), n();
+    },
+    get visualization() {
+      return o();
+    },
+    set visualization(r = "none") {
+      o(r), n();
+    },
+    get progressPercent() {
+      return u();
+    },
+    set progressPercent(r = 0) {
+      u(r), n();
+    },
+    get isPlaying() {
+      return m();
+    },
+    set isPlaying(r = !1) {
+      m(r), n();
+    },
+    get amplitude() {
+      return k();
+    },
+    set amplitude(r = 0) {
+      k(r), n();
+    },
+    get rippleIntensity() {
+      return h();
+    },
+    set rippleIntensity(r = 1) {
+      h(r), n();
+    },
+    get ariaLabel() {
+      return b();
+    },
+    set ariaLabel(r = "Play") {
+      b(r), n();
+    },
+    get children() {
+      return P();
+    },
+    set children(r) {
+      P(r), n();
+    }
+  };
+  return Re(c, {
+    get onclick() {
+      return d();
+    },
+    get disabled() {
+      return l();
+    },
+    get loading() {
+      return s();
+    },
+    get visualization() {
+      return o();
+    },
+    get progressPercent() {
+      return u();
+    },
+    get isPlaying() {
+      return m();
+    },
+    get amplitude() {
+      return k();
+    },
+    get rippleIntensity() {
+      return h();
+    },
+    get ariaLabel() {
+      return b();
+    },
+    borderRadius: "var(--fortyfour-player-mini-border-radius)",
+    children: (r, S) => {
+      var w = U(), f = E(w);
+      we(f, P), g(r, w);
+    },
+    $$slots: { default: !0 }
+  }), re(_);
+}
+W(
+  Ze,
+  {
+    onclick: {},
+    disabled: {},
+    loading: {},
+    visualization: {},
+    progressPercent: {},
+    isPlaying: {},
+    amplitude: {},
+    rippleIntensity: {},
+    ariaLabel: {},
+    children: {}
+  },
+  [],
+  [],
+  !0
+);
+var Nt = A('<div class="shape-wrapper svelte-knsinh"><!> <button part="button" class="play-button svelte-knsinh"><div aria-hidden="true"><!></div> <span part="icon" class="icon svelte-knsinh"><!></span></button></div>');
+const Ut = {
+  hash: "svelte-knsinh",
+  code: `.shape-wrapper.svelte-knsinh {position:relative;width:1em;height:1em;}.play-button.svelte-knsinh {position:relative;width:100%;height:100%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--fortyfour-player-mini-icon-color);padding:0;}.play-button.svelte-knsinh:focus-visible {outline:var(--fortyfour-player-mini-focus-width) solid var(--fortyfour-player-mini-focus-color);outline-offset:var(--fortyfour-player-mini-focus-offset);}.play-button.svelte-knsinh:disabled {opacity:0.5;cursor:not-allowed;}.blob-background.svelte-knsinh {position:absolute;inset:0;background:var(--fortyfour-player-mini-background-color);border:var(--fortyfour-player-mini-border-width) solid
+      var(--fortyfour-player-mini-border-color);overflow:hidden;}.blob-background.has-ring.svelte-knsinh {border:none;}.icon.svelte-knsinh {position:relative;z-index:1;width:1em;height:1em;display:flex;align-items:center;justify-content:center;}.icon.svelte-knsinh svg {width:100%;height:100%;fill:currentColor;}`
+};
+function $e(c, e) {
+  te(e, !0), de(c, Ut);
+  let d = i(e, "onclick", 7), l = i(e, "disabled", 7, !1), s = i(e, "loading", 7, !1), o = i(e, "visualization", 7, "none"), u = i(e, "progressPercent", 7, 0), m = i(e, "isPlaying", 7, !1), k = i(e, "amplitude", 7, 0), h = i(e, "rippleIntensity", 7, 1), b = i(e, "ariaLabel", 7, "Play"), P = i(e, "animate", 7, !1), _ = i(e, "speed", 7, 20), r = i(e, "children", 7);
+  const S = (v, V) => Math.floor(v + Math.random() * (V - v));
+  function w() {
+    const V = (ne) => 100 - ne;
+    let J = [];
+    for (let ne = 0; ne < 4; ne++) {
+      let ge = S(25, V(25));
+      J.push(ge), J.push(V(ge));
+    }
+    return `${J[0]}% ${J[1]}% ${J[2]}% ${J[3]}% / ${J[4]}% ${J[6]}% ${J[7]}% ${J[5]}%`;
+  }
+  const f = w(), L = [
+    { borderRadius: f, offset: 0 },
+    { borderRadius: w(), offset: 0.15 },
+    { borderRadius: w(), offset: 0.3 },
+    { borderRadius: w(), offset: 0.45 },
+    { borderRadius: w(), offset: 0.6 },
+    { borderRadius: w(), offset: 0.75 },
+    { borderRadius: w(), offset: 0.9 },
+    { borderRadius: f, offset: 1 }
+  ], y = f;
+  let z = N(null), R = null;
+  const B = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  ae(() => (t(z) && P() && !B && (R = t(z).animate(L, {
+    duration: _() * 1e3,
+    iterations: 1 / 0,
+    easing: "ease"
+  })), () => {
+    R && (R.cancel(), R = null);
+  }));
+  var $ = {
+    get onclick() {
+      return d();
+    },
+    set onclick(v) {
+      d(v), n();
+    },
+    get disabled() {
+      return l();
+    },
+    set disabled(v = !1) {
+      l(v), n();
+    },
+    get loading() {
+      return s();
+    },
+    set loading(v = !1) {
+      s(v), n();
+    },
+    get visualization() {
+      return o();
+    },
+    set visualization(v = "none") {
+      o(v), n();
+    },
+    get progressPercent() {
+      return u();
+    },
+    set progressPercent(v = 0) {
+      u(v), n();
+    },
+    get isPlaying() {
+      return m();
+    },
+    set isPlaying(v = !1) {
+      m(v), n();
+    },
+    get amplitude() {
+      return k();
+    },
+    set amplitude(v = 0) {
+      k(v), n();
+    },
+    get rippleIntensity() {
+      return h();
+    },
+    set rippleIntensity(v = 1) {
+      h(v), n();
+    },
+    get ariaLabel() {
+      return b();
+    },
+    set ariaLabel(v = "Play") {
+      b(v), n();
+    },
+    get animate() {
+      return P();
+    },
+    set animate(v = !1) {
+      P(v), n();
+    },
+    get speed() {
+      return _();
+    },
+    set speed(v = 20) {
+      _(v), n();
+    },
+    get children() {
+      return r();
+    },
+    set children(v) {
+      r(v), n();
+    }
+  }, T = Nt();
+  let M;
+  var a = j(T);
+  {
+    var F = (v) => {
+      Ne(v, {
+        get isPlaying() {
+          return m();
+        },
+        get amplitude() {
+          return k();
+        },
+        get intensity() {
+          return h();
+        }
+      });
+    };
+    q(a, (v) => {
+      o() === "ripple" && v(F);
+    });
+  }
+  var I = K(a, 2);
+  I.__click = function(...v) {
+    d()?.apply(this, v);
+  };
+  var H = j(I);
+  let Z, O;
+  var G = j(H);
+  {
+    var fe = (v) => {
+      De(v, {
+        get progress() {
+          return u();
+        }
+      });
+    };
+    q(G, (v) => {
+      o() === "ring" && v(fe);
+    });
+  }
+  D(H), We(H, (v) => x(z, v), () => t(z));
+  var ve = K(H, 2), ee = j(ve);
+  return we(ee, r), D(ve), D(I), D(T), Q(
+    (v, V, J) => {
+      M = ie(T, "", M, v), I.disabled = l(), be(I, "aria-label", b()), be(I, "aria-busy", s()), Z = je(H, 1, "blob-background svelte-knsinh", null, Z, V), O = ie(H, "", O, J);
+    },
+    [
+      () => ({ "border-radius": y }),
+      () => ({ "has-ring": o() === "ring" }),
+      () => ({ "border-radius": y })
+    ]
+  ), g(c, T), re($);
+}
+Be(["click"]);
+W(
+  $e,
+  {
+    onclick: {},
+    disabled: {},
+    loading: {},
+    visualization: {},
+    progressPercent: {},
+    isPlaying: {},
+    amplitude: {},
+    rippleIntensity: {},
+    ariaLabel: {},
+    animate: {},
+    speed: {},
+    children: {}
+  },
+  [],
+  [],
+  !0
+);
+pt();
+var Ot = Ce('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><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>');
+function et(c) {
+  var e = Ot();
+  g(c, e);
+}
+W(et, {}, [], [], !0);
+var Gt = Ce('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><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>');
+function tt(c) {
+  var e = Gt();
+  g(c, e);
+}
+W(tt, {}, [], [], !0);
+var Jt = Ce(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><style>circle {
+      animation: fade 1s ease-in-out infinite;
+    }
+    circle:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+    circle:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+    @keyframes fade {
+      0%,
+      100% {
+        opacity: 0.2;
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      circle {
+        animation: none;
+        opacity: 0.6;
+      }
+    }</style><circle cx="160" cy="320" r="56"></circle><circle cx="320" cy="320" r="56"></circle><circle cx="480" cy="320" r="56"></circle></svg>`);
+function rt(c) {
+  var e = Jt();
+  g(c, e);
+}
+W(rt, {}, [], [], !0);
+var Kt = Ce('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><path d="M320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64zM288 192C288 174.3 302.3 160 320 160C337.7 160 352 174.3 352 192L352 352C352 369.7 337.7 384 320 384C302.3 384 288 369.7 288 352L288 192zM320 480C302.3 480 288 465.7 288 448C288 430.3 302.3 416 320 416C337.7 416 352 430.3 352 448C352 465.7 337.7 480 320 480z"></path></svg>');
+function at(c) {
+  var e = Kt();
+  g(c, e);
+}
+W(at, {}, [], [], !0);
+const Fe = {
+  delay: 0
+  // ms to delay requests (set via console: window.__44_dev.delay = 2000)
+};
+typeof window < "u" && (window.__44_dev = Fe);
+function Qt(c) {
+  return new Promise((e) => setTimeout(e, c));
+}
+async function Vt(c, e) {
+  const d = `https://${c}/v1/recordings/${e}/player`;
+  Fe.delay > 0 && await Qt(Fe.delay);
+  const l = await fetch(d);
+  if (!l.ok)
+    throw l.status === 404 ? new Error(`Recording not found: ${e}`) : new Error(`Failed to fetch recording (${l.status})`);
+  const s = await l.json();
+  if (s.status !== "ready")
+    throw new Error(`Recording not ready: ${e}`);
+  return s;
+}
+function it(c, e = 200) {
+  let d = N(!1);
+  return ae(() => {
+    if (c()) {
+      const l = setTimeout(() => x(d, !0), e);
+      return () => clearTimeout(l);
+    } else
+      x(d, !1);
+  }), () => t(d);
+}
+function Le(c, e, d) {
+  ae(() => {
+    d() ? c.setAttribute(e, "") : c.removeAttribute(e);
+  });
+}
+var Wt = A("<audio></audio>"), Xt = A("<!> <!>", 1);
+const Yt = {
+  hash: "svelte-v1t5fc",
+  code: `:host {--fortyfour-player-mini-size: 48px;--fortyfour-player-mini-background-color: #3b82f6;--fortyfour-player-mini-icon-color: #ffffff;--fortyfour-player-mini-border-width: 2px;--fortyfour-player-mini-border-color: #ffffff;--fortyfour-player-mini-border-radius: 12px;--fortyfour-player-mini-ring-width: var(--fortyfour-player-mini-border-width);--fortyfour-player-mini-ring-fill-color: #ffffff;--fortyfour-player-mini-ring-track-color: transparent;--fortyfour-player-mini-hover-scale: 1.04;--fortyfour-player-mini-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);--fortyfour-player-mini-focus-color: var(--fortyfour-player-mini-background-color);--fortyfour-player-mini-focus-width: 2px;--fortyfour-player-mini-focus-offset: 2px;font-size:var(--fortyfour-player-mini-size);}:host([hover="scale"]) {transition:transform 0.15s ease-out;}:host([hover="scale"]:hover:not([disabled])) {transform:scale(var(--fortyfour-player-mini-hover-scale));}:host([hover="glow"]) {transition:filter 0.15s ease-out;}:host([hover="glow"]:hover:not([disabled])) {filter:drop-shadow(var(--fortyfour-player-mini-hover-shadow));}:host([hover="lift"]) {transition:transform 0.15s ease-out,
+      filter 0.15s ease-out;}:host([hover="lift"]:hover:not([disabled])) {transform:scale(var(--fortyfour-player-mini-hover-scale));filter:drop-shadow(var(--fortyfour-player-mini-hover-shadow));}
+
+  @media (prefers-reduced-motion: reduce) {:host([hover="scale"]),
+    :host([hover="glow"]),
+    :host([hover="lift"]) {transition:none;}
+  }`
+};
+function Zt(c, e) {
+  te(e, !0), de(c, Yt);
+  const d = (p) => {
+    var C = U(), X = E(C);
+    {
+      var oe = (le) => {
+        var ue = U(), ye = E(ue);
+        ce(ye, e, "icon-error", {}, (Te) => {
+          at(Te);
+        }), g(le, ue);
+      }, pe = (le) => {
+        var ue = U(), ye = E(ue);
+        {
+          var Te = (me) => {
+            var _e = U(), Ee = E(_e);
+            ce(Ee, e, "icon-loading", {}, (Se) => {
+              rt(Se);
+            }), g(me, _e);
+          }, nt = (me) => {
+            var _e = U(), Ee = E(_e);
+            {
+              var Se = (he) => {
+                var ke = U(), Me = E(ke);
+                ce(Me, e, "icon-playing", {}, (Ae) => {
+                  tt(Ae);
+                }), g(he, ke);
+              }, ot = (he) => {
+                var ke = U(), Me = E(ke);
+                ce(Me, e, "icon-paused", {}, (Ae) => {
+                  et(Ae);
+                }), g(he, ke);
+              };
+              q(
+                Ee,
+                (he) => {
+                  t(R) === "playing" ? he(Se) : he(ot, !1);
+                },
+                !0
+              );
+            }
+            g(me, _e);
+          };
+          q(
+            ye,
+            (me) => {
+              $() ? me(Te) : me(nt, !1);
+            },
+            !0
+          );
+        }
+        g(le, ue);
+      };
+      q(X, (le) => {
+        t(f) ? le(oe) : le(pe, !1);
+      });
+    }
+    g(p, C);
+  }, l = e.$$host;
+  let s = i(e, "apiHost", 7, "api.44.audio"), o = i(e, "recordingId", 7), u = i(e, "visualization", 7, "none"), m = i(e, "rippleIntensity", 7, 1), k = i(e, "hover", 7, "none"), h = i(e, "preload", 7, "none"), b = i(e, "shape", 7, "circle"), P = i(e, "blobAnimate", 7, !1), _ = i(e, "blobSpeed", 7, 20);
+  const r = {
+    circle: qe,
+    square: Ye,
+    "rounded-square": Ze,
+    blob: $e
+  };
+  let S = N(null), w = N(h() !== "none"), f = N(!1), L = N(null), y = N(0), z = N(0), R = N("ready"), B = null;
+  const $ = it(() => t(w), 200), T = Y(() => r[b()] ?? qe), M = Y(() => o() ? `https://${s()}/v1/recordings/${o()}/audio.mp3` : null), a = Y(() => t(z) > 0 ? t(y) / t(z) : 0), F = Y(() => ({
+    onclick: ve,
+    disabled: !o() || t(f),
+    loading: t(w),
+    visualization: u(),
+    progressPercent: t(a),
+    isPlaying: t(R) === "playing",
+    amplitude: t(H),
+    rippleIntensity: m(),
+    ariaLabel: t(R) === "playing" ? "Pause" : "Play",
+    ...b() === "blob" ? { animate: P(), speed: _() } : {}
+  })), I = Y(() => t(S)?.waveform ?? []), H = Y(() => {
+    if (!t(I).length || t(z) === 0) return 0;
+    const p = Math.floor(t(y) / t(z) * t(I).length), C = 3, X = Math.max(0, p - Math.floor(C / 2)), oe = Math.min(t(I).length, X + C), pe = t(I).slice(X, oe), le = pe.reduce((ue, ye) => ue + ye * ye, 0);
+    return Math.sqrt(le / pe.length);
+  });
+  async function Z() {
+    if (t(S)) return;
+    const p = o();
+    x(w, !0), x(f, !1);
+    try {
+      const C = await Vt(s(), p);
+      o() === p && x(S, C, !0);
+    } catch (C) {
+      console.warn(`fortyfour-player-mini: ${C.message}`), o() === p && (x(f, !0), ee("error", { error: C }));
+    } finally {
+      o() === p && x(w, !1);
+    }
+  }
+  ae(() => {
+    o() || console.warn("fortyfour-player-mini: recording-id attribute is required");
+  }), ae(() => {
+    !o() || h() === "none" || Z();
+  }), ae(() => {
+    t(S)?.duration && (x(z, t(S).duration, !0), ee("loadedmetadata", { duration: t(z) }));
+  }), ae(() => {
+    if (t(R) !== "playing" || !t(L)) return;
+    const p = () => {
+      x(y, t(L).currentTime * 1e3), ee("timeupdate", { currentTime: t(y), duration: t(z) }), B = requestAnimationFrame(p);
+    };
+    return B = requestAnimationFrame(p), () => cancelAnimationFrame(B);
+  });
+  function O() {
+    x(y, t(z), !0), ee("timeupdate", { currentTime: t(y), duration: t(z) }), x(R, "ready"), ee("ended", {});
+  }
+  function G(p) {
+    x(f, !0), ee("error", { error: p });
+  }
+  function fe() {
+    t(L) && (t(L).play().catch(G), x(R, "playing"), ee("play", {}));
+  }
+  function ve() {
+    t(w) || t(f) || (t(R) === "playing" ? (t(L).pause(), x(R, "paused"), ee("pause", {})) : !t(S) && h() === "none" ? Z().then(() => {
+      t(f) || fe();
+    }) : fe());
+  }
+  function ee(p, C) {
+    l.dispatchEvent(new CustomEvent(p, { detail: C, bubbles: !0, composed: !0 }));
+  }
+  Le(l, "data-playing", () => t(R) === "playing"), Le(l, "data-loading", $), Le(l, "data-error", () => t(f));
+  var v = {
+    get apiHost() {
+      return s();
+    },
+    set apiHost(p = "api.44.audio") {
+      s(p), n();
+    },
+    get recordingId() {
+      return o();
+    },
+    set recordingId(p) {
+      o(p), n();
+    },
+    get visualization() {
+      return u();
+    },
+    set visualization(p = "none") {
+      u(p), n();
+    },
+    get rippleIntensity() {
+      return m();
+    },
+    set rippleIntensity(p = 1) {
+      m(p), n();
+    },
+    get hover() {
+      return k();
+    },
+    set hover(p = "none") {
+      k(p), n();
+    },
+    get preload() {
+      return h();
+    },
+    set preload(p = "none") {
+      h(p), n();
+    },
+    get shape() {
+      return b();
+    },
+    set shape(p = "circle") {
+      b(p), n();
+    },
+    get blobAnimate() {
+      return P();
+    },
+    set blobAnimate(p = !1) {
+      P(p), n();
+    },
+    get blobSpeed() {
+      return _();
+    },
+    set blobSpeed(p = 20) {
+      _(p), n();
+    }
+  }, V = Xt(), J = E(V);
+  ht(J, () => t(T), (p, C) => {
+    C(p, yt(() => t(F), {
+      children: (X, oe) => {
+        d(X);
+      },
+      $$slots: { default: !0 }
+    }));
+  });
+  var ne = K(J, 2);
+  {
+    var ge = (p) => {
+      var C = Wt();
+      We(C, (X) => x(L, X), () => t(L)), Q(() => {
+        be(C, "src", t(M)), be(C, "preload", h());
+      }), Pe("ended", C, O), Pe("error", C, G), g(p, C);
+    };
+    q(ne, (p) => {
+      t(M) && p(ge);
+    });
+  }
+  return g(c, V), re(v);
+}
+customElements.define("fortyfour-player-mini", W(
+  Zt,
+  {
+    apiHost: { attribute: "api-host" },
+    recordingId: { attribute: "recording-id" },
+    visualization: { attribute: "visualization" },
+    rippleIntensity: { attribute: "ripple-intensity" },
+    hover: { attribute: "hover" },
+    preload: { attribute: "preload" },
+    shape: { attribute: "shape" },
+    blobAnimate: { attribute: "blob-animate", type: "Boolean" },
+    blobSpeed: { attribute: "blob-speed" },
+    duration: {},
+    currentTime: {}
+  },
+  ["icon-error", "icon-loading", "icon-playing", "icon-paused"],
+  [],
+  !0
+));
+var $t = A('<div part="separator" class="separator svelte-38lkst">/</div>'), er = A('<div part="elapsed" class="elapsed svelte-38lkst"> </div> <!> <div part="total" class="total svelte-38lkst"> </div>', 1), tr = A('<div part="elapsed" class="elapsed svelte-38lkst">-:--</div> <div part="separator" class="separator svelte-38lkst">/</div> <div part="total" class="total svelte-38lkst">-:--</div>', 1), rr = A('<div part="duration" class="duration svelte-38lkst"><!></div>'), ar = A("<span> </span>"), ir = A("<span>--</span>"), nr = A('<div part="duration" class="duration svelte-38lkst"><!></div>');
+const or = {
+  hash: "svelte-38lkst",
+  code: ":host {--fortyfour-player-duration-font-size: inherit;--fortyfour-player-duration-color: inherit;--fortyfour-player-duration-elapsed-color: inherit;--fortyfour-player-duration-total-color: inherit;--fortyfour-player-duration-separator-color: inherit;display:inline-flex;font-variant-numeric:tabular-nums;}.duration.svelte-38lkst {display:flex;align-items:center;gap:0.25em;font-size:var(--fortyfour-player-duration-font-size);color:var(--fortyfour-player-duration-color);}.elapsed.svelte-38lkst {color:var(--fortyfour-player-duration-elapsed-color);}.total.svelte-38lkst {color:var(--fortyfour-player-duration-total-color);}.separator.svelte-38lkst {color:var(--fortyfour-player-duration-separator-color);}"
+};
+function lr(c, e) {
+  te(e, !0), de(c, or);
+  const d = e.$$host;
+  let l = i(e, "format", 7, "-remaining"), s = i(e, "for", 7, ""), o = N(0), u = N(0), m = N("none");
+  const k = it(() => t(u) === 0, 200), h = Y(() => t(u) !== 0 ? !1 : t(m) === "none" ? !0 : k()), b = Y(() => Ie(t(o))), P = Y(() => Ie(t(u))), _ = Y(() => {
+    if (t(u) === 0)
+      return "";
+    switch (l()) {
+      case "-remaining":
+        return "-" + Ie(Math.max(0, t(u) - t(o)));
+      case "remaining":
+        return Ie(Math.max(0, t(u) - t(o)));
+      case "elapsed":
+        return t(b);
+      case "elapsed-text":
+        return Ge(t(o));
+      case "total":
+        return t(P);
+      case "remaining-text":
+        return Ge(Math.max(0, t(u) - t(o)));
+      case "%":
+        return Math.min(100, Math.ceil(t(o) / t(u) * 100)) + "%";
+      default:
+        return null;
+    }
+  });
+  ae(() => {
+    if (!s()) {
+      console.warn("fortyfour-player-duration: 'for' attribute is required to link to a player");
+      return;
+    }
+    const y = document.getElementById(s());
+    if (!y) {
+      console.warn("fortyfour-player-duration: No parent player found");
+      return;
+    }
+    x(m, y.getAttribute("preload") || "none", !0), y.duration && x(u, y.duration, !0), y.currentTime && x(o, y.currentTime, !0);
+    function z(B) {
+      x(u, B.detail.duration, !0);
+    }
+    function R(B) {
+      x(o, B.detail.currentTime, !0), x(u, B.detail.duration, !0);
+    }
+    return y.addEventListener("loadedmetadata", z), y.addEventListener("timeupdate", R), () => {
+      y.removeEventListener("loadedmetadata", z), y.removeEventListener("timeupdate", R);
+    };
+  }), Le(d, "data-placeholder", () => t(h));
+  var r = {
+    get format() {
+      return l();
+    },
+    set format(y = "-remaining") {
+      l(y), n();
+    },
+    get for() {
+      return s();
+    },
+    set for(y = "") {
+      s(y), n();
+    }
+  }, S = U(), w = E(S);
+  {
+    var f = (y) => {
+      var z = rr(), R = j(z);
+      {
+        var B = (T) => {
+          var M = er(), a = E(M), F = j(a, !0);
+          D(a);
+          var I = K(a, 2);
+          ce(I, e, "separator", {}, (O) => {
+            var G = $t();
+            xe(1, G, () => ze, () => ({ duration: 400 })), g(O, G);
+          });
+          var H = K(I, 2), Z = j(H, !0);
+          D(H), Q(() => {
+            se(F, t(b)), se(Z, t(P));
+          }), xe(1, a, () => ze, () => ({ duration: 400 })), xe(1, H, () => ze, () => ({ duration: 400 })), g(T, M);
+        }, $ = (T) => {
+          var M = U(), a = E(M);
+          {
+            var F = (I) => {
+              var H = U(), Z = E(H);
+              ce(Z, e, "placeholder", {}, (O) => {
+                var G = tr();
+                mt(4), g(O, G);
+              }), g(I, H);
+            };
+            q(
+              a,
+              (I) => {
+                t(h) && I(F);
+              },
+              !0
+            );
+          }
+          g(T, M);
+        };
+        q(R, (T) => {
+          t(u) !== 0 ? T(B) : T($, !1);
+        });
+      }
+      D(z), g(y, z);
+    }, L = (y) => {
+      var z = nr(), R = j(z);
+      {
+        var B = (T) => {
+          var M = ar(), a = j(M, !0);
+          D(M), Q(() => se(a, t(_))), xe(1, M, () => ze, () => ({ duration: 400 })), g(T, M);
+        }, $ = (T) => {
+          var M = U(), a = E(M);
+          {
+            var F = (I) => {
+              var H = U(), Z = E(H);
+              ce(Z, e, "placeholder", {}, (O) => {
+                var G = ir();
+                g(O, G);
+              }), g(I, H);
+            };
+            q(
+              a,
+              (I) => {
+                t(h) && I(F);
+              },
+              !0
+            );
+          }
+          g(T, M);
+        };
+        q(R, (T) => {
+          t(u) !== 0 ? T(B) : T($, !1);
+        });
+      }
+      D(z), g(y, z);
+    };
+    q(w, (y) => {
+      l() === "elapsed/total" ? y(f) : y(L, !1);
+    });
+  }
+  return g(c, S), re(r);
+}
+customElements.define("fortyfour-player-duration", W(lr, { format: { attribute: "format" }, for: { attribute: "for" } }, ["separator", "placeholder"], [], !0));