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

package/dist/player.es.js

@@ -1,523 +1,1720 @@
-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(() => (
+import { b as rt, E as mt, a as at, n as Qe, d as Wt, h as Ue, c as ot, e as Bt, f as bt, g as $e, s as wt, U as At, i as qt, j as Nt, p as xt, k as _t, l as ue, m as pe, o as be, q as u, r as F, t as H, u as te, v as Le, w as e, x as W, y as x, z as ge, A as c, B as fe, C as me, D as q, F as m, G as ee, H as J, I as K, J as G, K as N, L as ye, M as Ce, N as ze, O as Pe, P as je, Q as Ve, R as pt, S as Dt, T as Fe, V as Ee, W as Z, X as Be, Y as Me, Z as nt, _ as Ae, $ as Ne, a0 as Ot, a1 as gt, a2 as Ie, a3 as yt, a4 as Xe, a5 as Ut, a6 as Ft } from "./time-BmemrSJ4.mjs";
+function Ge(y, t, ...g) {
+  var i = y, o = Qe, r;
+  rt(() => {
+    o !== (o = t()) && (r && (Wt(r), r = null), r = at(() => (
       /** @type {SnippetFn} */
-      s(l, ...d)
+      o(i, ...g)
     )));
-  }, Ke), He && (l = Ve);
+  }, mt), Ue && (i = ot);
 }
-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;
+function Gt(y, t, g) {
+  Ue && _t();
+  var i = y, o = At, r, a, n = null, s = Nt() ? Bt : qt;
+  function _() {
+    r && xt(r), n !== null && (n.lastChild.remove(), i.before(n), n = null), r = a;
+  }
+  rt(() => {
+    if (s(o, o = t())) {
+      var f = i, I = wt();
+      I && (n = document.createDocumentFragment(), n.append(f = bt())), a = at(() => g(f)), I ? $e.add_callback(_) : _();
+    }
+  }), Ue && (i = ot);
+}
+function Kt(y, t, g) {
+  Ue && _t();
+  var i = y, o, r, a = null, n = null;
+  function s() {
+    r && (xt(r), r = null), a && (a.lastChild.remove(), i.before(a), a = null), r = n, n = 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));
+  rt(() => {
+    if (o !== (o = t())) {
+      var _ = wt();
+      if (o) {
+        var f = i;
+        _ && (a = document.createDocumentFragment(), a.append(f = bt()), r && $e.skipped_effects.add(r)), n = at(() => g(f, o));
       }
-      h ? Ue.add_callback(k) : k();
+      _ ? $e.add_callback(s) : s();
     }
-  }, Ke), He && (l = Ve);
+  }, mt), Ue && (i = ot);
 }
-function bt(c, e) {
-  x(e, !t(e));
+var Vt = F("<fortyfour-player></fortyfour-player>", 2);
+const Xt = { hash: "svelte-1uea9wj", code: ":host {display:block;}" };
+function Yt(y, t) {
+  pe(t, !0), be(y, Xt);
+  let g = u(t, "recordingId", 7), i = u(t, "theme", 7, ""), o = u(t, "apiHost", 7, "api.44.audio");
+  const r = W(() => {
+    if (!i())
+      return "";
+    const s = i().split(",").map((f) => f.trim()), _ = [];
+    return s[0] && _.push(`--fortyfour-player-background: ${s[0]}`), s[1] && _.push(`--fortyfour-player-text: ${s[1]}`), s[2] && _.push(`--fortyfour-player-accent: ${s[2]}`), s[4] && _.push(`--fortyfour-player-muted: ${s[4]}`), s[5] && _.push(`--fortyfour-player-border: ${s[5]}`), s[0] && _.push(`--fortyfour-player-surface: ${s[0]}`), _.join("; ");
+  });
+  var a = {
+    get recordingId() {
+      return g();
+    },
+    set recordingId(s) {
+      g(s), c();
+    },
+    get theme() {
+      return i();
+    },
+    set theme(s = "") {
+      i(s), c();
+    },
+    get apiHost() {
+      return o();
+    },
+    set apiHost(s = "api.44.audio") {
+      o(s), c();
+    }
+  }, n = Vt();
+  return H(() => te(n, "api-host", o())), H(() => te(n, "recording-id", g())), te(n, "preload", "metadata"), H(() => Le(n, e(r))), x(y, n), ge(a);
 }
-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;}"
+customElements.define("fortyfour-audio-player", ue(
+  Yt,
+  {
+    apiHost: { attribute: "api-host" },
+    recordingId: { attribute: "recording-id" },
+    theme: { attribute: "theme" }
+  },
+  [],
+  [],
+  !1
+));
+var Zt = F("<fortyfour-mini-player></fortyfour-mini-player>", 2);
+const Jt = {
+  hash: "svelte-1pz3muj",
+  code: ":host {--fortyfour-player-mini-background-color: #3b82f6;--fortyfour-player-mini-icon-color: #ffffff;--fortyfour-player-mini-ring-track-color: transparent;display:inline-block;}fortyfour-mini-player.svelte-1pz3muj {--fortyfour-mini-player-background: var(--fortyfour-player-mini-background-color);--fortyfour-mini-player-accent: var(--fortyfour-player-mini-icon-color);--fortyfour-mini-player-ring: var(--fortyfour-player-mini-ring-track-color);}"
 };
-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 = {
+function Qt(y, t) {
+  pe(t, !0), be(y, Jt);
+  let g = u(t, "apiHost", 7, "api.44.audio"), i = u(t, "recordingId", 7), o = u(t, "visualization", 7, "none"), r = u(t, "rippleIntensity", 7, 1), a = u(t, "hover", 7, "none"), n = u(t, "preload", 7, "none"), s = u(t, "shape", 7, "circle"), _ = u(t, "blobAnimate", 7, !1), f = u(t, "blobSpeed", 7, 20);
+  var I = {
+    get apiHost() {
+      return g();
+    },
+    set apiHost(l = "api.44.audio") {
+      g(l), c();
+    },
     get recordingId() {
-      return d();
+      return i();
     },
-    set recordingId(a) {
-      d(a), n();
+    set recordingId(l) {
+      i(l), c();
     },
-    get recording() {
-      return l();
+    get visualization() {
+      return o();
     },
-    set recording(a = null) {
-      l(a), n();
+    set visualization(l = "none") {
+      o(l), c();
     },
-    get loading() {
+    get rippleIntensity() {
+      return r();
+    },
+    set rippleIntensity(l = 1) {
+      r(l), c();
+    },
+    get hover() {
+      return a();
+    },
+    set hover(l = "none") {
+      a(l), c();
+    },
+    get preload() {
+      return n();
+    },
+    set preload(l = "none") {
+      n(l), c();
+    },
+    get shape() {
       return s();
     },
-    set loading(a = !1) {
-      s(a), n();
+    set shape(l = "circle") {
+      s(l), c();
     },
-    get error() {
-      return o();
+    get blobAnimate() {
+      return _();
     },
-    set error(a = !1) {
-      o(a), n();
+    set blobAnimate(l = !1) {
+      _(l), c();
     },
-    get apiHost() {
-      return u();
+    get blobSpeed() {
+      return f();
     },
-    set apiHost(a) {
-      u(a), n();
+    set blobSpeed(l = 20) {
+      f(l), c();
     }
-  }, P = Lt();
-  let _;
-  var r = j(P), S = j(r);
-  {
-    let a = Y(() => `https://${u()}/v1/recordings/${d()}/audio.mp3`);
-    vt(S, {
-      get audioURL() {
-        return t(a);
-      },
-      get waveform() {
-        return t(h);
-      }
-    });
-  }
-  D(r);
-  var w = K(r, 2);
-  {
-    var f = (a) => {
-      var F = _t();
-      g(a, F);
-    };
-    q(w, (a) => {
-      o() && a(f);
-    });
-  }
-  var L = K(w, 2), y = j(L), z = K(j(y));
+  }, d = Zt();
+  return H(() => te(d, "api-host", g())), H(() => te(d, "recording-id", i())), H(() => te(d, "preload", n())), fe(d, 1, "svelte-1pz3muj"), x(y, d), ge(I);
+}
+customElements.define("fortyfour-player-mini", ue(
+  Qt,
   {
-    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);
+    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" }
+  },
+  [],
+  [],
+  !0
+));
+function it(y, t = 200) {
+  let g = q(!1);
+  return me(() => {
+    if (y()) {
+      const i = setTimeout(() => m(g, !0), t);
+      return () => clearTimeout(i);
+    } else
+      m(g, !1);
+  }), () => e(g);
+}
+function lt(y, t, g) {
+  me(() => {
+    g() ? y.setAttribute(t, "") : y.removeAttribute(t);
+  });
+}
+var $t = F('<div part="separator" class="separator svelte-38lkst">/</div>'), er = F('<div part="elapsed" class="elapsed svelte-38lkst"> </div> <!> <div part="total" class="total svelte-38lkst"> </div>', 1), tr = F('<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 = F('<div part="duration" class="duration svelte-38lkst"><!></div>'), ar = F("<span> </span>"), or = F("<span>--</span>"), nr = F('<div part="duration" class="duration svelte-38lkst"><!></div>');
+const ir = {
+  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(y, t) {
+  pe(t, !0), be(y, ir);
+  const g = t.$$host;
+  let i = u(t, "format", 7, "-remaining"), o = u(t, "for", 7, ""), r = q(0), a = q(0), n = q("none");
+  const s = it(() => e(a) === 0, 200), _ = W(() => e(a) !== 0 ? !1 : e(n) === "none" ? !0 : s()), f = W(() => Ve(e(r))), I = W(() => Ve(e(a))), d = W(() => {
+    if (e(a) === 0)
+      return "";
+    switch (i()) {
+      case "-remaining":
+        return "-" + Ve(Math.max(0, e(a) - e(r)));
+      case "remaining":
+        return Ve(Math.max(0, e(a) - e(r)));
+      case "elapsed":
+        return e(f);
+      case "elapsed-text":
+        return pt(e(r));
+      case "total":
+        return e(I);
+      case "remaining-text":
+        return pt(Math.max(0, e(a) - e(r)));
+      case "%":
+        return Math.min(100, Math.ceil(e(r) / e(a) * 100)) + "%";
+      default:
+        return null;
+    }
+  });
+  me(() => {
+    if (!o()) {
+      console.warn("fortyfour-player-duration: 'for' attribute is required to link to a player");
+      return;
+    }
+    const B = document.getElementById(o());
+    if (!B) {
+      console.warn("fortyfour-player-duration: No parent player found");
+      return;
+    }
+    m(n, B.getAttribute("preload") || "none", !0), B.duration && m(a, B.duration, !0), B.currentTime && m(r, B.currentTime, !0);
+    function A(R) {
+      m(a, R.detail.duration, !0);
+    }
+    function X(R) {
+      m(r, R.detail.currentTime, !0), m(a, R.detail.duration, !0);
+    }
+    return B.addEventListener("loadedmetadata", A), B.addEventListener("timeupdate", X), () => {
+      B.removeEventListener("loadedmetadata", A), B.removeEventListener("timeupdate", X);
     };
-    q(z, (a) => {
-      l()?.translation && a(R);
-    });
-  }
-  D(y);
-  var B = K(y, 2), $ = j(B);
+  }), lt(g, "data-placeholder", () => e(_));
+  var l = {
+    get format() {
+      return i();
+    },
+    set format(B = "-remaining") {
+      i(B), c();
+    },
+    get for() {
+      return o();
+    },
+    set for(B = "") {
+      o(B), c();
+    }
+  }, P = ee(), b = J(P);
   {
-    var T = (a) => {
-      var F = U(), I = E(F);
+    var j = (B) => {
+      var A = rr(), X = G(A);
       {
-        var H = (O) => {
-          var G = Oe();
-          Q(() => se(G, l().translation)), g(O, G);
-        }, Z = (O) => {
-          var G = U(), fe = E(G);
+        var R = (k) => {
+          var D = er(), T = J(D), L = G(T, !0);
+          N(T);
+          var M = ye(T, 2);
+          Ce(M, t, "separator", {}, (E) => {
+            var Q = $t();
+            ze(1, Q, () => Pe, () => ({ duration: 400 })), x(E, Q);
+          });
+          var z = ye(M, 2), v = G(z, !0);
+          N(z), H(() => {
+            je(L, e(f)), je(v, e(I));
+          }), ze(1, T, () => Pe, () => ({ duration: 400 })), ze(1, z, () => Pe, () => ({ duration: 400 })), x(k, D);
+        }, V = (k) => {
+          var D = ee(), T = J(D);
           {
-            var ve = (v) => {
-              var V = U(), J = E(V);
-              {
-                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);
-                };
-                q(J, (p) => {
-                  t(k) ? p(ge, !1) : p(ne);
-                });
-              }
-              g(v, V);
-            }, ee = (v) => {
-              var V = Oe();
-              Q(() => se(V, l().transcription)), g(v, V);
+            var L = (M) => {
+              var z = ee(), v = J(z);
+              Ce(v, t, "placeholder", {}, (E) => {
+                var Q = tr();
+                Dt(4), x(E, Q);
+              }), x(M, z);
             };
-            q(
-              fe,
-              (v) => {
-                l().transcription.length > 200 ? v(ve) : v(ee, !1);
+            K(
+              T,
+              (M) => {
+                e(_) && M(L);
               },
               !0
             );
           }
-          g(O, G);
+          x(k, D);
         };
-        q(I, (O) => {
-          t(m) ? O(H) : O(Z, !1);
+        K(X, (k) => {
+          e(a) !== 0 ? k(R) : k(V, !1);
         });
       }
-      g(a, F);
-    }, M = (a) => {
-      var F = It();
-      g(a, F);
+      N(A), x(B, A);
+    }, C = (B) => {
+      var A = nr(), X = G(A);
+      {
+        var R = (k) => {
+          var D = ar(), T = G(D, !0);
+          N(D), H(() => je(T, e(d))), ze(1, D, () => Pe, () => ({ duration: 400 })), x(k, D);
+        }, V = (k) => {
+          var D = ee(), T = J(D);
+          {
+            var L = (M) => {
+              var z = ee(), v = J(z);
+              Ce(v, t, "placeholder", {}, (E) => {
+                var Q = or();
+                x(E, Q);
+              }), x(M, z);
+            };
+            K(
+              T,
+              (M) => {
+                e(_) && M(L);
+              },
+              !0
+            );
+          }
+          x(k, D);
+        };
+        K(X, (k) => {
+          e(a) !== 0 ? k(R) : k(V, !1);
+        });
+      }
+      N(A), x(B, A);
     };
-    q($, (a) => {
-      l()?.transcription ? a(T) : a(M, !1);
+    K(b, (B) => {
+      i() === "elapsed/total" ? B(j) : B(C, !1);
     });
   }
-  return D(B), D(L), D(P), Q((a) => _ = je(P, 1, "container svelte-47ttlb", null, _, a), [() => ({ loading: s() })]), g(c, P), re(b);
+  return x(y, P), ge(l);
 }
-Be(["click"]);
-W(
-  Xe,
-  {
-    recordingId: {},
-    recording: {},
-    loading: {},
-    error: {},
-    apiHost: {}
-  },
-  [],
-  [],
-  !0
-);
-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);}"
+customElements.define("fortyfour-player-duration", ue(lr, { format: { attribute: "format" }, for: { attribute: "for" } }, ["separator", "placeholder"], [], !0));
+var sr = Me('<rect style="rx: var(--fortyfour-player-waveform-bar-radius, 1px)"></rect>'), ur = F('<div class="container svelte-7i2lww"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="svelte-7i2lww"><!></svg></div>');
+const cr = {
+  hash: "svelte-7i2lww",
+  code: "svg.svelte-7i2lww {box-sizing:border-box;margin:0;padding:0;}.container.svelte-7i2lww {flex:1;height:100%;box-sizing:border-box;margin:0;padding:0;display:flex;align-items:center;}.bar.svelte-7i2lww {transition:fill 0.2s;}.progress.svelte-7i2lww {fill:var(--fortyfour-player-waveform-progress-color);}.track.svelte-7i2lww {fill:var(--fortyfour-player-waveform-track-color);}"
 };
-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 r.json();
-    }).then((r) => {
-      d() === _ && r.status === "ready" && x(u, r, !0);
-    }).catch((r) => {
-      console.error(r), d() === _ && x(k, !0);
-    }).finally(() => {
-      d() === _ && x(m, !1);
+function kt(y, t) {
+  pe(t, !0), be(y, cr);
+  function g(k, D) {
+    const T = k.length / D, L = [];
+    for (let M = 0; M < D; M++) {
+      const z = Math.floor(M * T), v = Math.floor((M + 1) * T), E = k.slice(z, Math.max(z + 1, v)), Q = E.reduce((w, h) => w + h * h, 0), oe = Math.sqrt(Q / E.length);
+      L.push(oe);
+    }
+    return L;
+  }
+  let i = u(t, "data", 7), o = u(t, "timeMs", 7, null), r = u(t, "barWidth", 7, 3), a = u(t, "spacing", 7, 1), n = u(t, "minHeight", 7, 3), s = q(0), _ = q(56), f = q(!1), I = null;
+  Fe(() => {
+    const k = new ResizeObserver((D) => {
+      for (let T of D)
+        T.contentBoxSize ? (m(s, T.contentBoxSize[0]?.inlineSize || T.contentBoxSize.inlineSize, !0), m(_, T.contentBoxSize[0]?.blockSize || T.contentBoxSize.blockSize || 56, !0)) : (m(s, T.contentRect.width, !0), m(_, T.contentRect.height || 56, !0)), m(f, !0);
     });
+    return I && k.observe(I), () => {
+      k.disconnect();
+    };
   });
-  var h = {
-    get recordingId() {
-      return d();
+  const d = 100, l = W(() => Math.floor(e(s) / (r() + a()))), P = W(() => g(i(), e(l))), b = W(() => e(P).length ? i().length / e(P).length : 1), j = W(() => d * e(b)), C = W(() => e(P).map((k) => {
+    const D = Math.max(n(), Math.round(k / 100 * (e(_) - n()) + n()));
+    return D % 2 === 0 ? D + 1 : D;
+  }));
+  var B = {
+    get data() {
+      return i();
     },
-    set recordingId(_) {
-      d(_), n();
+    set data(k) {
+      i(k), c();
     },
-    get theme() {
-      return l();
+    get timeMs() {
+      return o();
     },
-    set theme(_ = "#ffffff,#000000,#3b82f6,#2563eb,#8b5cf6,#7c3aed") {
-      l(_), n();
+    set timeMs(k = null) {
+      o(k), c();
     },
-    get apiHost() {
-      return s();
+    get barWidth() {
+      return r();
     },
-    set apiHost(_ = "api.44.audio") {
-      s(_), n();
-    }
-  }, b = Rt(), P = j(b);
-  return Xe(P, {
-    get apiHost() {
-      return s();
+    set barWidth(k = 3) {
+      r(k), c();
     },
-    get recordingId() {
-      return d();
+    get spacing() {
+      return a();
     },
-    get recording() {
-      return t(u);
+    set spacing(k = 1) {
+      a(k), c();
     },
-    get loading() {
-      return t(m);
+    get minHeight() {
+      return n();
     },
-    get error() {
-      return t(k);
+    set minHeight(k = 3) {
+      n(k), c();
     }
-  }), D(b), Q(() => ie(b, t(o))), g(c, b), re(h);
+  }, A = ur(), X = G(A), R = G(X);
+  {
+    var V = (k) => {
+      var D = ee(), T = J(D);
+      Be(T, 17, () => e(C), Ae, (L, M, z) => {
+        const v = W(() => z * e(j) < o());
+        var E = sr();
+        H(() => {
+          fe(E, 0, nt(["bar", e(v) ? "progress" : "track"]), "svelte-7i2lww"), Z(E, "x", z * (r() + a())), Z(E, "y", e(_) / 4 - e(M) / 2), Z(E, "width", r() - 1), Z(E, "height", e(M));
+        }), x(L, E);
+      }), x(k, D);
+    };
+    K(R, (k) => {
+      e(f) && k(V);
+    });
+  }
+  return N(X), N(A), Ee(A, (k) => I = k, () => I), H(() => {
+    Z(X, "height", e(_)), Z(X, "viewBox", `0 0 ${e(s)} ${e(_) / 2}`);
+  }), x(y, A), ge(B);
 }
-customElements.define("fortyfour-audio-player", W(
-  Et,
+ue(
+  kt,
   {
-    apiHost: { attribute: "api-host" },
-    recordingId: { attribute: "recording-id" },
-    theme: { attribute: "theme" }
+    data: {},
+    timeMs: {},
+    barWidth: {},
+    spacing: {},
+    minHeight: {}
   },
   [],
   [],
   !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;}
-  }`
+);
+var dr = F('<div class="track svelte-11a7nsg"><div class="progress svelte-11a7nsg"></div></div>'), fr = F('<div class="container svelte-11a7nsg"><!></div>');
+const vr = {
+  hash: "svelte-11a7nsg",
+  code: ".container.svelte-11a7nsg {flex:1;display:flex;align-items:center;height:100%;}.track.svelte-11a7nsg {width:100%;background:var(--fortyfour-player-waveform-track-color);overflow:hidden;}.progress.svelte-11a7nsg {height:100%;background:var(--fortyfour-player-waveform-progress-color);transition:width 0.1s linear;}"
 };
-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 zt(y, t) {
+  pe(t, !0), be(y, vr);
+  let g = u(t, "data", 7), i = u(t, "timeMs", 7, null), o = u(t, "lineWidth", 7, 4), r = q(0), a = q(!1), n = null;
+  Fe(() => {
+    const P = new ResizeObserver((b) => {
+      for (let j of b)
+        j.contentBoxSize ? m(r, j.contentBoxSize[0]?.inlineSize || j.contentBoxSize.inlineSize, !0) : m(r, j.contentRect.width, !0), m(a, !0);
+    });
+    return n && P.observe(n), () => {
+      P.disconnect();
+    };
   });
-  function m(f) {
-    t(o)[f] = !1;
-  }
-  var k = {
-    get isPlaying() {
-      return d();
+  const s = 100, _ = W(() => {
+    if (i() === null || i() === 0 || !g().length) return 0;
+    const P = g().length * s;
+    return Math.min(100, i() / P * 100);
+  });
+  var f = {
+    get data() {
+      return g();
     },
-    set isPlaying(f = !1) {
-      d(f), n();
+    set data(P) {
+      g(P), c();
     },
-    get amplitude() {
-      return l();
+    get timeMs() {
+      return i();
     },
-    set amplitude(f = 0) {
-      l(f), n();
+    set timeMs(P = null) {
+      i(P), c();
     },
-    get intensity() {
-      return s();
+    get lineWidth() {
+      return o();
     },
-    set intensity(f = 1) {
-      s(f), n();
+    set lineWidth(P = 4) {
+      o(P), c();
     }
-  }, h = Ft(), b = E(h);
+  }, I = fr(), d = G(I);
   {
-    var P = (f) => {
-      var L = At();
-      Q(() => ie(L, `--intensity: ${s() ?? ""};`)), Pe("animationend", L, () => m("small")), g(f, L);
+    var l = (P) => {
+      var b = dr(), j = G(b);
+      N(b), H(() => {
+        Le(b, `height: ${o() ?? ""}px; border-radius: ${o() / 2}px`), Le(j, `width: ${e(_) ?? ""}%; border-radius: ${o() / 2}px`);
+      }), x(P, b);
     };
-    q(b, (f) => {
-      t(o).small && f(P);
+    K(d, (P) => {
+      e(a) && P(l);
     });
   }
-  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);
-    });
+  return N(I), Ee(I, (P) => n = P, () => n), x(y, I), ge(f);
+}
+ue(zt, { data: {}, timeMs: {}, lineWidth: {} }, [], [], !0);
+var pr = Me('<path class="waveform-line progress svelte-189wzd8"></path>'), gr = Me('<path class="waveform-line track svelte-189wzd8"></path><!>', 1), yr = F('<div class="container svelte-189wzd8"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" preserveAspectRatio="none" class="svelte-189wzd8"><!></svg></div>');
+const hr = {
+  hash: "svelte-189wzd8",
+  code: "svg.svelte-189wzd8 {box-sizing:border-box;margin:0;padding:0;}.container.svelte-189wzd8 {flex:1;height:100%;box-sizing:border-box;margin:0;padding:0;display:flex;align-items:center;}.waveform-line.svelte-189wzd8 {fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke 0.2s;}.track.svelte-189wzd8 {stroke:var(--fortyfour-player-waveform-track-color);}.progress.svelte-189wzd8 {stroke:var(--fortyfour-player-waveform-progress-color);}"
+};
+function Pt(y, t) {
+  pe(t, !0), be(y, hr);
+  function g(L, M) {
+    const z = L.length / M, v = [];
+    for (let E = 0; E < M; E++) {
+      const Q = Math.floor(E * z), oe = Math.floor((E + 1) * z), w = L.slice(Q, Math.max(Q + 1, oe)), h = w.reduce((S, O) => S + O * O, 0), p = Math.sqrt(h / w.length);
+      v.push(p);
+    }
+    return v;
   }
-  var S = K(_, 2);
-  {
-    var w = (f) => {
-      var L = qt();
-      Q(() => ie(L, `--intensity: ${s() ?? ""};`)), Pe("animationend", L, () => m("large")), g(f, L);
+  let i = u(t, "data", 7), o = u(t, "timeMs", 7, null), r = u(t, "lineWidth", 7, 2), a = q(0), n = q(56), s = q(!1), _ = null;
+  Fe(() => {
+    const L = new ResizeObserver((M) => {
+      for (let z of M)
+        z.contentBoxSize ? (m(a, z.contentBoxSize[0]?.inlineSize || z.contentBoxSize.inlineSize, !0), m(n, z.contentBoxSize[0]?.blockSize || z.contentBoxSize.blockSize || 56, !0)) : (m(a, z.contentRect.width, !0), m(n, z.contentRect.height || 56, !0)), m(s, !0);
+    });
+    return _ && L.observe(_), () => {
+      L.disconnect();
     };
-    q(S, (f) => {
-      t(o).large && f(w);
+  });
+  const f = W(() => e(n) / 2), I = W(() => e(n) / 2 * 0.8), d = 100, l = 0.15, P = W(() => Math.max(2, Math.floor(e(a) * l))), b = W(() => g(i(), e(P))), j = W(() => {
+    if (o() === null || o() === 0) return 0;
+    const L = i().length * d, M = Math.min(1, o() / L), z = r() / 2, v = e(a) - z * 2;
+    return z + M * v;
+  }), C = W(() => {
+    if (!e(b).length || e(a) === 0) return [];
+    const L = r() / 2, M = e(a) - L * 2;
+    return e(b).map((z, v) => {
+      const E = L + v / (e(b).length - 1) * M, Q = Math.max(0.05, z / 100), oe = v % 2 === 0 ? -1 : 1, w = e(f) + oe * Q * e(I);
+      return { x: E, y: w };
     });
+  });
+  function B(L) {
+    if (L.length === 0) return "";
+    let M = `M ${L[0].x} ${L[0].y}`;
+    for (let z = 1; z < L.length; z++) {
+      const v = L[z - 1], E = L[z], Q = v.x + (E.x - v.x) / 3, oe = v.y, w = v.x + (E.x - v.x) * 2 / 3, h = E.y;
+      M += ` C ${Q} ${oe}, ${w} ${h}, ${E.x} ${E.y}`;
+    }
+    return M;
   }
-  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();
+  const A = W(() => B(e(C))), X = W(() => {
+    if (e(C).length === 0 || e(j) <= 0) return "";
+    const L = [];
+    let M = null;
+    for (let v = 0; v < e(C).length; v++)
+      if (e(C)[v].x <= e(j))
+        L.push(e(C)[v]);
+      else {
+        M = e(C)[v];
+        break;
+      }
+    if (L.length === 0) return "";
+    const z = L[L.length - 1];
+    if (M && z.x < e(j)) {
+      const v = (e(j) - z.x) / (M.x - z.x), E = z.y + v * (M.y - z.y);
+      L.push({ x: e(j), y: E });
+    }
+    return B(L);
+  });
+  var R = {
+    get data() {
+      return i();
     },
-    set loading(a = !1) {
-      s(a), n();
+    set data(L) {
+      i(L), c();
     },
-    get visualization() {
+    get timeMs() {
       return o();
     },
-    set visualization(a = "none") {
-      o(a), n();
+    set timeMs(L = null) {
+      o(L), c();
     },
-    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 lineWidth() {
+      return r();
     },
-    get borderRadius() {
-      return P();
+    set lineWidth(L = 2) {
+      r(L), c();
+    }
+  }, V = yr(), k = G(V), D = G(k);
+  {
+    var T = (L) => {
+      var M = gr(), z = J(M), v = ye(z);
+      {
+        var E = (Q) => {
+          var oe = pr();
+          H(() => {
+            Z(oe, "d", e(X)), Z(oe, "stroke-width", r());
+          }), x(Q, oe);
+        };
+        K(v, (Q) => {
+          e(X) && Q(E);
+        });
+      }
+      H(() => {
+        Z(z, "d", e(A)), Z(z, "stroke-width", r());
+      }), x(L, M);
+    };
+    K(D, (L) => {
+      e(s) && e(A) && L(T);
+    });
+  }
+  return N(k), N(V), Ee(V, (L) => _ = L, () => _), H(() => {
+    Z(k, "height", e(n)), Z(k, "viewBox", `0 0 ${e(a)} ${e(n)}`);
+  }), x(y, V), ge(R);
+}
+ue(Pt, { data: {}, timeMs: {}, lineWidth: {} }, [], [], !0);
+var mr = F('<div class="waveform-wrapper svelte-h4vbiy"><!></div>'), br = F('<div part="placeholder" class="waveform-wrapper svelte-h4vbiy"><!></div>'), wr = F('<div part="container" class="container svelte-h4vbiy"><!></div>');
+const xr = {
+  hash: "svelte-h4vbiy",
+  code: ":host {--fortyfour-player-waveform-height: 56px;--fortyfour-player-waveform-progress-color: #3b82f6;--fortyfour-player-waveform-track-color: #d1d5db;--fortyfour-player-waveform-bar-radius: 1px;display:block;width:100%;}.container.svelte-h4vbiy {width:100%;height:var(--fortyfour-player-waveform-height);display:flex;align-items:center;}.waveform-wrapper.svelte-h4vbiy {flex:1;height:100%;display:flex;align-items:center;}"
+};
+function _r(y, t) {
+  pe(t, !0), be(y, xr);
+  const g = (R, V = Qe, k = Qe) => {
+    var D = ee(), T = J(D);
+    {
+      var L = (z) => {
+        zt(z, {
+          get data() {
+            return V();
+          },
+          get timeMs() {
+            return k();
+          },
+          get lineWidth() {
+            return s();
+          }
+        });
+      }, M = (z) => {
+        var v = ee(), E = J(v);
+        {
+          var Q = (w) => {
+            Pt(w, {
+              get data() {
+                return V();
+              },
+              get timeMs() {
+                return k();
+              },
+              get lineWidth() {
+                return s();
+              }
+            });
+          }, oe = (w) => {
+            kt(w, {
+              get data() {
+                return V();
+              },
+              get timeMs() {
+                return k();
+              },
+              get barWidth() {
+                return a();
+              },
+              get spacing() {
+                return n();
+              },
+              get minHeight() {
+                return _();
+              }
+            });
+          };
+          K(
+            E,
+            (w) => {
+              r() === "smooth" ? w(Q) : w(oe, !1);
+            },
+            !0
+          );
+        }
+        x(z, v);
+      };
+      K(T, (z) => {
+        r() === "progress" ? z(L) : z(M, !1);
+      });
+    }
+    x(R, D);
+  }, i = t.$$host;
+  let o = u(t, "for", 7, ""), r = u(t, "type", 7, "bars"), a = u(t, "barWidth", 7, 3), n = u(t, "barSpacing", 7, 1), s = u(t, "lineWidth", 7, 4), _ = u(t, "barMinHeight", 7, 3), f = q(null), I = q(0), d = q("none");
+  const l = it(() => e(f) === null, 200), P = W(() => e(f) !== null && e(f).length > 0 ? !1 : e(d) === "none" ? !0 : l());
+  me(() => {
+    if (!o()) {
+      console.warn("fortyfour-player-waveform: 'for' attribute is required to link to a player");
+      return;
+    }
+    const R = document.getElementById(o());
+    if (!R) {
+      console.warn(`fortyfour-player-waveform: No player found with id '${o()}'`);
+      return;
+    }
+    m(d, R.getAttribute("preload") || "none", !0), R.waveform && R.waveform.length > 0 && m(f, R.waveform, !0), R.currentTime && m(I, R.currentTime, !0);
+    function V(D) {
+      m(f, D.detail?.waveform, !0);
+    }
+    function k(D) {
+      m(I, D.detail.currentTime, !0);
+    }
+    return R.addEventListener("loadedmetadata", V), R.addEventListener("timeupdate", k), () => {
+      R.removeEventListener("loadedmetadata", V), R.removeEventListener("timeupdate", k);
+    };
+  }), lt(i, "data-placeholder", () => e(P));
+  const b = Array(100).fill(0);
+  var j = {
+    get for() {
+      return o();
+    },
+    set for(R = "") {
+      o(R), c();
+    },
+    get type() {
+      return r();
+    },
+    set type(R = "bars") {
+      r(R), c();
+    },
+    get barWidth() {
+      return a();
+    },
+    set barWidth(R = 3) {
+      a(R), c();
+    },
+    get barSpacing() {
+      return n();
+    },
+    set barSpacing(R = 1) {
+      n(R), c();
+    },
+    get lineWidth() {
+      return s();
+    },
+    set lineWidth(R = 4) {
+      s(R), c();
+    },
+    get barMinHeight() {
+      return _();
+    },
+    set barMinHeight(R = 3) {
+      _(R), c();
+    }
+  }, C = wr(), B = G(C);
+  {
+    var A = (R) => {
+      var V = mr(), k = G(V);
+      g(k, () => e(f), () => e(I)), N(V), ze(1, V, () => Pe, () => ({ duration: 400 })), x(R, V);
+    }, X = (R) => {
+      var V = ee(), k = J(V);
+      {
+        var D = (T) => {
+          var L = ee(), M = J(L);
+          Ce(M, t, "placeholder", {}, (z) => {
+            var v = br(), E = G(v);
+            g(E, () => b, () => 0), N(v), x(z, v);
+          }), x(T, L);
+        };
+        K(
+          k,
+          (T) => {
+            e(P) && T(D);
+          },
+          !0
+        );
+      }
+      x(R, V);
+    };
+    K(B, (R) => {
+      e(f) && e(f).length > 0 ? R(A) : R(X, !1);
+    });
+  }
+  return N(C), x(y, C), ge(j);
+}
+customElements.define("fortyfour-player-waveform", ue(
+  _r,
+  {
+    for: { attribute: "for" },
+    type: { attribute: "type" },
+    barWidth: { attribute: "bar-width", type: "Number" },
+    barSpacing: { attribute: "bar-spacing", type: "Number" },
+    lineWidth: { attribute: "line-width", type: "Number" },
+    barMinHeight: { attribute: "bar-min-height", type: "Number" }
+  },
+  ["placeholder"],
+  [],
+  !0
+));
+var kr = (y, t) => m(t, y.target.value !== "original"), zr = F('<div class="language-select svelte-1cjx9l7"><select class="svelte-1cjx9l7"><option>Original</option><option>English</option></select></div>'), Pr = F('<div class="content svelte-1cjx9l7"><div class="text svelte-1cjx9l7"> </div></div>'), Lr = F("<span> </span>"), jr = F('<div class="content svelte-1cjx9l7"><div class="text caption-text svelte-1cjx9l7"></div></div>'), Ir = F("<span> </span>"), Er = F('<div class="text caption-text subtitle svelte-1cjx9l7"></div>'), Mr = F('<div class="content subtitle-content svelte-1cjx9l7"><!></div>'), Sr = F("<span> </span>"), Tr = F('<div class="content svelte-1cjx9l7"><div class="text caption-text svelte-1cjx9l7"></div></div>'), Rr = (y, t) => m(t, !0), Cr = F('... <button class="toggle-btn svelte-1cjx9l7">Show more</button>', 1), Hr = (y, t) => m(t, !1), Wr = F('<button class="toggle-btn svelte-1cjx9l7">Show less</button>'), Br = F('<div class="content svelte-1cjx9l7"><div class="text svelte-1cjx9l7"> <!></div></div>'), Ar = F('<div class="placeholder-lines svelte-1cjx9l7"><span class="placeholder-line svelte-1cjx9l7"></span> <span class="placeholder-line short svelte-1cjx9l7"></span></div>'), qr = F('<div class="container svelte-1cjx9l7"><!> <!></div>');
+const Nr = {
+  hash: "svelte-1cjx9l7",
+  code: `:host {--fortyfour-player-transcription-placeholder-color: #e5e7eb;--fortyfour-player-transcription-color: #64748b;--fortyfour-player-transcription-active-color: #1e293b;--fortyfour-player-transcription-active-bg: #fef08a;--fortyfour-player-transcription-past-color: #1e293b;display:block;}.container.svelte-1cjx9l7 {width:100%;}.content.svelte-1cjx9l7 {width:100%;}.text.svelte-1cjx9l7 {white-space:pre-wrap;word-wrap:break-word;}.caption-text.svelte-1cjx9l7 {white-space:normal;color:var(--fortyfour-player-transcription-color);}.word.svelte-1cjx9l7 {transition:color 0.15s ease,
+      background-color 0.15s ease;border-radius:2px;padding:0 1px;margin:0 -1px;}.word.active[data-type="word"].svelte-1cjx9l7 {color:var(--fortyfour-player-transcription-active-color);background-color:var(--fortyfour-player-transcription-active-bg);}.word.past[data-type="word"].svelte-1cjx9l7 {color:var(--fortyfour-player-transcription-past-color);}.subtitle-content.svelte-1cjx9l7 {min-height:2em;display:flex;align-items:center;justify-content:center;}.subtitle.svelte-1cjx9l7 {text-align:center;}.toggle-btn.svelte-1cjx9l7 {font-size:0.75em;padding:0.25em 0.5em;margin-left:0.5em;border:1px solid currentColor;border-radius:4px;background:transparent;color:inherit;cursor:pointer;opacity:0.7;}.toggle-btn.svelte-1cjx9l7:hover {opacity:1;}.language-select.svelte-1cjx9l7 {margin-bottom:0.5em;}.language-select.svelte-1cjx9l7 select:where(.svelte-1cjx9l7) {font-size:0.75em;padding:0.25em 0.5em;border:1px solid currentColor;border-radius:4px;background:transparent;color:inherit;cursor:pointer;opacity:0.7;}.language-select.svelte-1cjx9l7 select:where(.svelte-1cjx9l7):hover {opacity:1;}.placeholder-lines.svelte-1cjx9l7 {display:flex;flex-direction:column;gap:0.5em;}.placeholder-line.svelte-1cjx9l7 {display:block;height:1em;background-color:var(--fortyfour-player-transcription-placeholder-color);border-radius:4px;}.placeholder-line.short.svelte-1cjx9l7 {width:60%;}`
+};
+function Dr(y, t) {
+  pe(t, !0), be(y, Nr);
+  const g = t.$$host;
+  let i = u(t, "for", 7, ""), o = u(t, "truncate", 7, 200), r = u(t, "mode", 7, "static"), a = q(null), n = q(null), s = q(null), _ = q(!1), f = q(!1), I = q("none"), d = q(0);
+  const l = it(() => e(a) === null, 200), P = W(() => e(a) !== null ? !1 : e(I) === "none" ? !0 : l()), b = W(() => e(_) && e(n) ? e(n) : e(a)), j = W(() => r() === "static" && o() > 0 && e(b) && e(b).length > o()), C = W(() => e(b) ? e(j) && !e(f) ? e(b).slice(0, o()) : e(b) : ""), B = W(() => e(n) !== null && e(n) !== ""), A = W(() => e(s) !== null && e(s).length > 0), X = W(() => !e(A) || r() === "static" ? -1 : e(s).findIndex((w) => e(d) >= w.start && e(d) <= w.end));
+  function R(w) {
+    const h = [];
+    let p = { words: [], start: 0, end: 0 };
+    for (const S of w) {
+      p.words.length === 0 && (p.start = S.start), p.words.push(S), p.end = S.end;
+      const O = S.text.trim();
+      (O.endsWith(".") || O.endsWith("?") || O.endsWith("!")) && (h.push(p), p = { words: [], start: 0, end: 0 });
+    }
+    return p.words.length > 0 && h.push(p), h;
+  }
+  const V = W(() => e(A) ? R(e(s)) : []), k = W(() => r() !== "subtitle" || e(V).length === 0 ? null : e(V).find((w) => e(d) >= w.start && e(d) <= w.end) ?? null);
+  function D(w) {
+    return e(d) >= w.start && e(d) <= w.end;
+  }
+  function T(w) {
+    return e(d) > w.end;
+  }
+  me(() => {
+    if (!i()) {
+      console.warn("fortyfour-player-transcription: 'for' attribute is required");
+      return;
+    }
+    const w = document.getElementById(i());
+    if (!w) {
+      console.warn(`fortyfour-player-transcription: No player found with id '${i()}'`);
+      return;
+    }
+    m(I, w.getAttribute("preload") || "none", !0), w.transcription && m(a, w.transcription, !0), w.translation && m(n, w.translation, !0), w.words && m(s, w.words, !0), w.currentTime && m(d, w.currentTime, !0);
+    function h(S) {
+      m(a, S.detail?.transcription ?? null, !0), m(n, S.detail?.translation ?? null, !0), m(s, S.detail?.words ?? null, !0);
+    }
+    function p(S) {
+      m(d, S.detail.currentTime, !0);
+    }
+    return w.addEventListener("loadedmetadata", h), w.addEventListener("timeupdate", p), () => {
+      w.removeEventListener("loadedmetadata", h), w.removeEventListener("timeupdate", p);
+    };
+  }), lt(g, "data-placeholder", () => e(P));
+  var L = {
+    get for() {
+      return i();
+    },
+    set for(w = "") {
+      i(w), c();
+    },
+    get truncate() {
+      return o();
+    },
+    set truncate(w = 200) {
+      o(w), c();
+    },
+    get mode() {
+      return r();
+    },
+    set mode(w = "static") {
+      r(w), c();
+    }
+  }, M = qr(), z = G(M);
+  {
+    var v = (w) => {
+      var h = zr(), p = G(h);
+      p.__change = [kr, _];
+      var S = G(p);
+      S.value = S.__value = "original";
+      var O = ye(S);
+      O.value = O.__value = "en", N(p), N(h), x(w, h);
+    };
+    K(z, (w) => {
+      e(B) && w(v);
+    });
+  }
+  var E = ye(z, 2);
+  {
+    var Q = (w) => {
+      var h = Pr(), p = G(h), S = G(p, !0);
+      N(p), N(h), H(() => je(S, e(n))), ze(1, h, () => Pe, () => ({ duration: 400 })), x(w, h);
+    }, oe = (w) => {
+      var h = ee(), p = J(h);
+      {
+        var S = ($) => {
+          var Y = jr(), ce = G(Y);
+          Be(ce, 21, () => e(s), Ae, (U, re, ne) => {
+            var ie = Lr();
+            let ve;
+            var de = G(ie, !0);
+            N(ie), H(
+              (ae) => {
+                ve = fe(ie, 1, "word svelte-1cjx9l7", null, ve, ae), Z(ie, "data-type", e(re).type), je(de, e(re).text);
+              },
+              [
+                () => ({
+                  active: ne === e(X),
+                  past: ne < e(X)
+                })
+              ]
+            ), x(U, ie);
+          }), N(ce), N(Y), ze(1, Y, () => Pe, () => ({ duration: 400 })), x($, Y);
+        }, O = ($) => {
+          var Y = ee(), ce = J(Y);
+          {
+            var U = (ne) => {
+              var ie = Mr(), ve = G(ie);
+              {
+                var de = (ae) => {
+                  var he = Er();
+                  Be(he, 21, () => e(k).words, Ae, (le, se) => {
+                    var xe = Ir();
+                    let _e;
+                    var we = G(xe, !0);
+                    N(xe), H(
+                      (ke) => {
+                        _e = fe(xe, 1, "word svelte-1cjx9l7", null, _e, ke), Z(xe, "data-type", e(se).type), je(we, e(se).text);
+                      },
+                      [
+                        () => ({
+                          active: D(e(se)),
+                          past: T(e(se))
+                        })
+                      ]
+                    ), x(le, xe);
+                  }), N(he), ze(1, he, () => Pe, () => ({ duration: 200 })), x(ae, he);
+                };
+                K(ve, (ae) => {
+                  e(k) && ae(de);
+                });
+              }
+              N(ie), x(ne, ie);
+            }, re = (ne) => {
+              var ie = ee(), ve = J(ie);
+              {
+                var de = (he) => {
+                  var le = Tr(), se = G(le);
+                  Be(se, 21, () => e(s), Ae, (xe, _e, we) => {
+                    var ke = ee(), Se = J(ke);
+                    {
+                      var He = (Re) => {
+                        var Te = Sr();
+                        let Ke;
+                        var We = G(Te, !0);
+                        N(Te), H(
+                          (qe) => {
+                            Ke = fe(Te, 1, "word svelte-1cjx9l7", null, Ke, qe), Z(Te, "data-type", e(_e).type), je(We, e(_e).text);
+                          },
+                          [() => ({ active: we === e(X) })]
+                        ), ze(1, Te, () => Pe, () => ({ duration: 150 })), x(Re, Te);
+                      };
+                      K(Se, (Re) => {
+                        e(d) >= e(_e).start && Re(He);
+                      });
+                    }
+                    x(xe, ke);
+                  }), N(se), N(le), ze(1, le, () => Pe, () => ({ duration: 400 })), x(he, le);
+                }, ae = (he) => {
+                  var le = ee(), se = J(le);
+                  {
+                    var xe = (we) => {
+                      var ke = Br(), Se = G(ke), He = G(Se, !0), Re = ye(He);
+                      {
+                        var Te = (We) => {
+                          var qe = Cr(), Ze = ye(J(qe));
+                          Ze.__click = [Rr, f], x(We, qe);
+                        }, Ke = (We) => {
+                          var qe = ee(), Ze = J(qe);
+                          {
+                            var Ht = (Je) => {
+                              var vt = Wr();
+                              vt.__click = [Hr, f], x(Je, vt);
+                            };
+                            K(
+                              Ze,
+                              (Je) => {
+                                e(j) && e(f) && Je(Ht);
+                              },
+                              !0
+                            );
+                          }
+                          x(We, qe);
+                        };
+                        K(Re, (We) => {
+                          e(j) && !e(f) ? We(Te) : We(Ke, !1);
+                        });
+                      }
+                      N(Se), N(ke), H(() => je(He, e(C))), ze(1, ke, () => Pe, () => ({ duration: 400 })), x(we, ke);
+                    }, _e = (we) => {
+                      var ke = ee(), Se = J(ke);
+                      {
+                        var He = (Re) => {
+                          var Te = Ar();
+                          x(Re, Te);
+                        };
+                        K(
+                          Se,
+                          (Re) => {
+                            e(P) && Re(He);
+                          },
+                          !0
+                        );
+                      }
+                      x(we, ke);
+                    };
+                    K(
+                      se,
+                      (we) => {
+                        e(a) ? we(xe) : we(_e, !1);
+                      },
+                      !0
+                    );
+                  }
+                  x(he, le);
+                };
+                K(
+                  ve,
+                  (he) => {
+                    r() === "progressive" && e(A) ? he(de) : he(ae, !1);
+                  },
+                  !0
+                );
+              }
+              x(ne, ie);
+            };
+            K(
+              ce,
+              (ne) => {
+                r() === "subtitle" && e(A) ? ne(U) : ne(re, !1);
+              },
+              !0
+            );
+          }
+          x($, Y);
+        };
+        K(
+          p,
+          ($) => {
+            r() === "karaoke" && e(A) ? $(S) : $(O, !1);
+          },
+          !0
+        );
+      }
+      x(w, h);
+    };
+    K(E, (w) => {
+      e(_) && e(B) ? w(Q) : w(oe, !1);
+    });
+  }
+  return N(M), x(y, M), ge(L);
+}
+Ne(["change", "click"]);
+customElements.define("fortyfour-player-transcription", ue(
+  Dr,
+  {
+    for: { attribute: "for" },
+    truncate: { attribute: "truncate", type: "Number" },
+    mode: { attribute: "mode" }
+  },
+  [],
+  [],
+  !0
+));
+const et = {
+  delay: 0
+};
+typeof window < "u" && (window.__44_dev = et);
+function Or(y) {
+  return new Promise((t) => setTimeout(t, y));
+}
+async function Ur(y, t, g) {
+  const i = `https://${t}/v1/recordings/${g}/player`;
+  et.delay > 0 && await Or(et.delay);
+  const o = await fetch(i, { signal: y });
+  if (!o.ok)
+    throw o.status === 404 ? new Error(`Recording not found: ${g}`) : new Error(`Failed to fetch recording (${o.status})`);
+  const r = await o.json();
+  if (r.status !== "ready")
+    throw new Error(`Recording not ready: ${g}`);
+  return r;
+}
+var Fr = F("<audio hidden></audio>");
+function Gr(y, t) {
+  pe(t, !0);
+  const g = t.$$host;
+  let i = u(t, "recordingId", 7), o = u(t, "apiHost", 7, "api.44.audio"), r = u(t, "preload", 7, "none"), a = q(null), n = q(null), s = q(0), _ = q(0), f = q("idle"), I = null, d = null;
+  const l = W(() => ({
+    waveform: e(a)?.waveform ?? [],
+    transcription: e(a)?.transcription ?? null,
+    translation: e(a)?.translation ?? null,
+    words: e(a)?.words ?? null
+  }));
+  function P() {
+    g.duration = e(_), g.currentTime = e(s), g.state = e(f), g.metadata = e(l), g.setAttribute("data-state", e(f));
+  }
+  function b(v) {
+    P(), g.dispatchEvent(new CustomEvent(v, { bubbles: !0, composed: !0 }));
+  }
+  function j() {
+    if (!e(n)) {
+      d = null;
+      return;
+    }
+    m(s, Math.floor(e(n).currentTime * 1e3), !0), b("timeupdate"), d = requestAnimationFrame(j);
+  }
+  async function C() {
+    if (e(f) === "idle") {
+      if (!i()) {
+        console.warn("fortyfour-recording: recording-id attribute is required");
+        return;
+      }
+      I = new AbortController(), m(f, "loading"), b("loading");
+      try {
+        const v = await Ur(I.signal, o(), i());
+        m(a, v, !0), m(_, v.duration, !0), m(f, "ready"), b("loadedmetadata");
+      } catch (v) {
+        if (v.name === "AbortError")
+          return;
+        console.warn(`fortyfour-recording: ${v.message}`), m(f, "error"), b("error");
+      }
+    }
+  }
+  async function B() {
+    if (!e(n)) {
+      console.warn("fortyfour-recording: play() called but audio element not ready");
+      return;
+    }
+    try {
+      await e(n).play(), m(f, "playing"), b("play"), d || j();
+    } catch (v) {
+      console.warn(`fortyfour-recording: ${v.message}`), m(f, "error"), b("error");
+    }
+  }
+  function A() {
+    if (!e(n)) {
+      console.warn("fortyfour-recording: pause() called but audio element not ready");
+      return;
+    }
+    e(n).pause(), m(f, "paused"), cancelAnimationFrame(d), d = null, b("pause");
+  }
+  async function X() {
+    if (e(f) === "error") {
+      console.warn("fortyfour-recording: togglePlay() called while in error state");
+      return;
+    }
+    e(f) !== "loading" && (e(f) === "playing" ? A() : e(f) === "idle" ? (await C(), await gt(), e(f) === "ready" && await B()) : await B());
+  }
+  function R(v) {
+    if (!e(n)) {
+      console.warn("fortyfour-recording: seek() called but audio element not ready");
+      return;
+    }
+    if (typeof v != "number" || Number.isNaN(v)) {
+      console.warn("fortyfour-recording: seek() called with invalid time:", v);
+      return;
+    }
+    if (v < 0 || v > e(_)) {
+      console.warn("fortyfour-recording: seek() time out of range:", v, "duration:", e(_));
+      return;
+    }
+    e(n).currentTime = v / 1e3, m(s, Math.floor(v), !0), b("timeupdate");
+  }
+  async function V() {
+    cancelAnimationFrame(d), d = null, m(s, e(_), !0), b("timeupdate"), await gt(), m(s, 0), e(n).currentTime = 0, b("timeupdate"), m(f, "ready"), b("ended");
+  }
+  function k(v) {
+    console.warn("fortyfour-recording: audio error", v.target.error), m(f, "error"), b("error");
+  }
+  function D() {
+    I?.abort(), cancelAnimationFrame(d), d = null, e(n)?.pause(), m(a, null), m(s, 0), m(_, 0), m(f, "idle"), T = i(), b("timeupdate");
+  }
+  let T = i();
+  me(() => {
+    i() !== T && D(), e(f) === "idle" && (r() === "auto" || r() === "metadata") && C();
+  }), g.togglePlay = X, g.seek = R, P(), Ot(() => {
+    I?.abort(), e(n)?.pause(), cancelAnimationFrame(d);
+  });
+  var L = {
+    get recordingId() {
+      return i();
+    },
+    set recordingId(v) {
+      i(v), c();
+    },
+    get apiHost() {
+      return o();
+    },
+    set apiHost(v = "api.44.audio") {
+      o(v), c();
+    },
+    get preload() {
+      return r();
+    },
+    set preload(v = "none") {
+      r(v), c();
+    }
+  }, M = ee(), z = J(M);
+  return Gt(z, i, (v) => {
+    var E = ee(), Q = J(E);
+    {
+      var oe = (w) => {
+        var h = Fr();
+        Ee(h, (p) => m(n, p), () => e(n)), H(() => {
+          Z(h, "src", e(a).audioUrl), Z(h, "preload", r() === "auto" ? "auto" : "none");
+        }), Ie("ended", h, V), Ie("error", h, k), x(w, h);
+      };
+      K(Q, (w) => {
+        e(a)?.audioUrl && w(oe);
+      });
+    }
+    x(v, E);
+  }), x(y, M), ge(L);
+}
+customElements.define("fortyfour-recording", ue(
+  Gr,
+  {
+    apiHost: { attribute: "api-host", reflect: !0 },
+    recordingId: { attribute: "recording-id", reflect: !0 },
+    preload: { reflect: !0 }
+  },
+  [],
+  [],
+  !1
+));
+function De(y) {
+  if (isNaN(y) || y < 0)
+    return "-:--";
+  const t = Math.floor(y / 3600), g = Math.floor(y % 3600 / 60), i = y % 60;
+  return t > 0 ? `${t}:${g.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}` : `${g}:${i.toString().padStart(2, "0")}`;
+}
+function ht(y) {
+  if (isNaN(y) || y < 0)
+    return "--";
+  const t = Math.floor(y / 1e3), g = Math.floor(t / 60), i = t % 60;
+  return g > 0 ? `${g}m ${i}s` : `${i}s`;
+}
+function st(y, t = 200) {
+  let g = q(!1);
+  return me(() => {
+    if (y()) {
+      const i = setTimeout(() => m(g, !0), t);
+      return () => clearTimeout(i);
+    } else
+      m(g, !1);
+  }), () => e(g);
+}
+function Oe(y, t, g) {
+  me(() => {
+    g() ? y.setAttribute(t, "") : y.removeAttribute(t);
+  });
+}
+const Kr = {
+  hash: "svelte-hrw77x",
+  code: `:host {--fortyfour-duration-font-family: system-ui, sans-serif;--fortyfour-duration-font-size: 14px;--fortyfour-duration-color: #1f2937;display:flex;align-items:center;justify-content:center;font-family:var(--fortyfour-duration-font-family);font-size:var(--fortyfour-duration-font-size);font-variant-numeric:tabular-nums;color:var(--fortyfour-duration-color);min-height:1lh;white-space:nowrap;}
+
+  @media (prefers-color-scheme: dark) {:host {--fortyfour-duration-color: #f3f4f6;}
+  }`
+};
+function Vr(y, t) {
+  pe(t, !0), be(y, Kr);
+  const g = t.$$host;
+  let i = u(t, "for", 7, ""), o = u(t, "format", 7, "elapsed/total"), r = q(0), a = q(0);
+  function n(P, b, j) {
+    const C = Math.floor(P / 1e3), B = Math.floor(b / 1e3), A = Math.max(0, B - C);
+    switch (j) {
+      case "-remaining":
+        return "-" + De(A);
+      case "remaining":
+        return De(A);
+      case "elapsed":
+        return De(C);
+      case "elapsed-text":
+        return ht(P);
+      case "total":
+        return De(B);
+      case "elapsed/total":
+        return De(C) + " / " + De(B);
+      case "remaining-text":
+        return ht(Math.max(0, b - P));
+      case "%":
+        return Math.min(100, Math.ceil(P / b * 100)) + "%";
+      default:
+        return console.warn(`fortyfour-duration: invalid format "${j}"`), null;
+    }
+  }
+  function s(P) {
+    switch (P) {
+      case "-remaining":
+        return "-0:00";
+      case "remaining":
+      case "elapsed":
+      case "total":
+        return "0:00";
+      case "elapsed/total":
+        return "0:00 / 0:00";
+      case "%":
+        return "0%";
+      default:
+        return "0";
+    }
+  }
+  Oe(g, "data-placeholder", () => e(a) === 0), me(() => {
+    if (!i()) {
+      console.warn("fortyfour-duration: for attribute is required");
+      return;
+    }
+    const b = g.getRootNode().getElementById(i());
+    if (!b) {
+      console.warn(`fortyfour-duration: element with id "${i()}" not found`);
+      return;
+    }
+    m(a, b.duration || 0, !0), m(r, b.currentTime || 0, !0);
+    function j() {
+      m(r, b.currentTime, !0), m(a, b.duration, !0);
+    }
+    return b.addEventListener("loadedmetadata", j), b.addEventListener("timeupdate", j), () => {
+      b.removeEventListener("loadedmetadata", j), b.removeEventListener("timeupdate", j);
+    };
+  });
+  var _ = {
+    get for() {
+      return i();
+    },
+    set for(P = "") {
+      i(P), c();
+    },
+    get format() {
+      return o();
+    },
+    set format(P = "elapsed/total") {
+      o(P), c();
+    }
+  }, f = ee(), I = J(f);
+  {
+    var d = (P) => {
+      var b = yt();
+      H((j) => je(b, j), [
+        () => n(e(r), e(a), o())
+      ]), x(P, b);
+    }, l = (P) => {
+      var b = ee(), j = J(b);
+      Ce(j, t, "placeholder", {}, (C) => {
+        var B = yt();
+        H((A) => je(B, A), [() => s(o())]), x(C, B);
+      }), x(P, b);
+    };
+    K(I, (P) => {
+      e(a) !== 0 ? P(d) : P(l, !1);
+    });
+  }
+  return x(y, f), ge(_);
+}
+customElements.define("fortyfour-duration", ue(
+  Vr,
+  {
+    for: { attribute: "for", reflect: !0 },
+    format: { attribute: "format", reflect: !0 }
+  },
+  ["placeholder"],
+  [],
+  !0
+));
+var Xr = F('<div part="ring" class="ring-progress svelte-qaqt0h"><div class="ring-inner svelte-qaqt0h"></div></div>');
+const Yr = {
+  hash: "svelte-qaqt0h",
+  code: `.ring-progress.svelte-qaqt0h {position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:conic-gradient(
+      from 0deg,
+      var(--fortyfour-play-button-ring-fill-color) var(--progress-deg),
+      var(--fortyfour-play-button-ring-track-color) var(--progress-deg)
+    );}.ring-inner.svelte-qaqt0h {position:absolute;inset:var(--fortyfour-play-button-ring-width);border-radius:inherit;background:var(--fortyfour-play-button-background-color);}`
+};
+function ut(y, t) {
+  pe(t, !0), be(y, Yr);
+  let g = u(t, "progress", 7, 0);
+  const i = W(() => g() * 360);
+  var o = {
+    get progress() {
+      return g();
+    },
+    set progress(a = 0) {
+      g(a), c();
+    }
+  }, r = Xr();
+  return H(() => Le(r, `--progress-deg: ${e(i) ?? ""}deg`)), x(y, r), ge(o);
+}
+ue(ut, { progress: {} }, [], [], !0);
+var Zr = F('<div part="ripple" class="ripple ripple-small svelte-lgp3pt"></div>'), Jr = F('<div part="ripple" class="ripple ripple-medium svelte-lgp3pt"></div>'), Qr = F('<div part="ripple" class="ripple ripple-large svelte-lgp3pt"></div>'), $r = F("<!> <!> <!>", 1);
+const ea = {
+  hash: "svelte-lgp3pt",
+  code: `.ripple.svelte-lgp3pt {position:absolute;inset:0;border-radius:inherit;border:2px solid var(--fortyfour-play-button-background-color);pointer-events:none;
+    animation: ripple 1.5s ease-out infinite;}.ripple-small.svelte-lgp3pt {
+    animation-name: svelte-lgp3pt-ripple-small;}.ripple-medium.svelte-lgp3pt {
+    animation-name: svelte-lgp3pt-ripple-medium;}.ripple-large.svelte-lgp3pt {
+    animation-name: svelte-lgp3pt-ripple-large;}
+
+  @keyframes svelte-lgp3pt-ripple-small {
+    0% {
+      transform: scale(1);
+      opacity: 0.4;
+    }
+    100% {
+      transform: scale(calc(1 + 0.15 * var(--intensity, 1)));
+      opacity: 0;
+    }
+  }
+
+  @keyframes svelte-lgp3pt-ripple-medium {
+    0% {
+      transform: scale(1);
+      opacity: 0.5;
+    }
+    100% {
+      transform: scale(calc(1 + 0.3 * var(--intensity, 1)));
+      opacity: 0;
+    }
+  }
+
+  @keyframes svelte-lgp3pt-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-lgp3pt {
+      animation: none;}
+  }`
+};
+function ct(y, t) {
+  pe(t, !0), be(y, ea);
+  let g = u(t, "isPlaying", 7, !1), i = u(t, "amplitude", 7, 0), o = u(t, "intensity", 7, 1), r = q(Xe({ small: !1, medium: !1, large: !1 }));
+  function a(j) {
+    return j < 33 ? "small" : j < 66 ? "medium" : "large";
+  }
+  me(() => {
+    if (!g()) {
+      m(r, { small: !1, medium: !1, large: !1 }, !0);
+      return;
+    }
+    const j = a(i());
+    e(r)[j] || (e(r)[j] = !0);
+  });
+  function n(j) {
+    e(r)[j] = !1;
+  }
+  var s = {
+    get isPlaying() {
+      return g();
+    },
+    set isPlaying(j = !1) {
+      g(j), c();
+    },
+    get amplitude() {
+      return i();
+    },
+    set amplitude(j = 0) {
+      i(j), c();
+    },
+    get intensity() {
+      return o();
+    },
+    set intensity(j = 1) {
+      o(j), c();
+    }
+  }, _ = $r(), f = J(_);
+  {
+    var I = (j) => {
+      var C = Zr();
+      H(() => Le(C, `--intensity: ${o() ?? ""};`)), Ie("animationend", C, () => n("small")), x(j, C);
+    };
+    K(f, (j) => {
+      e(r).small && j(I);
+    });
+  }
+  var d = ye(f, 2);
+  {
+    var l = (j) => {
+      var C = Jr();
+      H(() => Le(C, `--intensity: ${o() ?? ""};`)), Ie("animationend", C, () => n("medium")), x(j, C);
+    };
+    K(d, (j) => {
+      e(r).medium && j(l);
+    });
+  }
+  var P = ye(d, 2);
+  {
+    var b = (j) => {
+      var C = Qr();
+      H(() => Le(C, `--intensity: ${o() ?? ""};`)), Ie("animationend", C, () => n("large")), x(j, C);
+    };
+    K(P, (j) => {
+      e(r).large && j(b);
+    });
+  }
+  return x(y, _), ge(s);
+}
+ue(ct, { isPlaying: {}, amplitude: {}, intensity: {} }, [], [], !0);
+var ta = (y, t) => {
+  y.currentTarget.focus({ preventScroll: !0 }), t()?.(y);
+}, ra = F('<div class="shape-wrapper svelte-nzw87g"><!> <button part="button"><!> <span part="icon" class="icon svelte-nzw87g"><!></span></button></div>');
+const aa = {
+  hash: "svelte-nzw87g",
+  code: ".shape-wrapper.svelte-nzw87g {position:relative;width:var(--fortyfour-play-button-size, 48px);height:var(--fortyfour-play-button-size, 48px);font-size:var(--fortyfour-play-button-size, 48px);}.play-button.svelte-nzw87g {position:relative;width:100%;height:100%;border:var(--fortyfour-play-button-border-width) solid var(--fortyfour-play-button-border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--fortyfour-play-button-background-color);color:var(--fortyfour-play-button-icon-color);}.play-button.svelte-nzw87g:focus-visible {outline:var(--fortyfour-play-button-focus-width) solid var(--fortyfour-play-button-focus-color);outline-offset:var(--fortyfour-play-button-focus-offset);}.play-button.svelte-nzw87g:disabled {opacity:0.5;cursor:not-allowed;}.play-button.has-ring-progress.svelte-nzw87g {border:none;}.icon.svelte-nzw87g {position:relative;z-index:1;width:1em;height:1em;display:flex;align-items:center;justify-content:center;}.icon.svelte-nzw87g svg {width:100%;height:100%;fill:currentColor;}"
+};
+function Ye(y, t) {
+  pe(t, !0), be(y, aa);
+  let g = u(t, "onclick", 7), i = u(t, "disabled", 7, !1), o = u(t, "loading", 7, !1), r = u(t, "visualization", 7, "none"), a = u(t, "progressPercent", 7, 0), n = u(t, "isPlaying", 7, !1), s = u(t, "amplitude", 7, 0), _ = u(t, "rippleIntensity", 7, 1), f = u(t, "ariaLabel", 7, "Play"), I = u(t, "borderRadius", 7, "50%"), d = u(t, "children", 7);
+  var l = {
+    get onclick() {
+      return g();
+    },
+    set onclick(k) {
+      g(k), c();
+    },
+    get disabled() {
+      return i();
+    },
+    set disabled(k = !1) {
+      i(k), c();
+    },
+    get loading() {
+      return o();
+    },
+    set loading(k = !1) {
+      o(k), c();
+    },
+    get visualization() {
+      return r();
+    },
+    set visualization(k = "none") {
+      r(k), c();
+    },
+    get progressPercent() {
+      return a();
+    },
+    set progressPercent(k = 0) {
+      a(k), c();
+    },
+    get isPlaying() {
+      return n();
+    },
+    set isPlaying(k = !1) {
+      n(k), c();
+    },
+    get amplitude() {
+      return s();
+    },
+    set amplitude(k = 0) {
+      s(k), c();
+    },
+    get rippleIntensity() {
+      return _();
+    },
+    set rippleIntensity(k = 1) {
+      _(k), c();
+    },
+    get ariaLabel() {
+      return f();
+    },
+    set ariaLabel(k = "Play") {
+      f(k), c();
+    },
+    get borderRadius() {
+      return I();
+    },
+    set borderRadius(k = "50%") {
+      I(k), c();
+    },
+    get children() {
+      return d();
+    },
+    set children(k) {
+      d(k), c();
+    }
+  }, P = ra(), b = G(P);
+  {
+    var j = (k) => {
+      ct(k, {
+        get isPlaying() {
+          return n();
+        },
+        get amplitude() {
+          return s();
+        },
+        get intensity() {
+          return _();
+        }
+      });
+    };
+    K(b, (k) => {
+      r() === "ripple" && k(j);
+    });
+  }
+  var C = ye(b, 2);
+  let B;
+  C.__click = [ta, g];
+  var A = G(C);
+  {
+    var X = (k) => {
+      ut(k, {
+        get progress() {
+          return a();
+        }
+      });
+    };
+    K(A, (k) => {
+      r() === "ring" && k(X);
+    });
+  }
+  var R = ye(A, 2), V = G(R);
+  return Ge(V, d), N(R), N(C), N(P), H(
+    (k) => {
+      Le(P, `border-radius: ${I() ?? ""}`), B = fe(C, 1, "play-button svelte-nzw87g", null, B, k), C.disabled = i(), Z(C, "aria-label", f()), Z(C, "aria-busy", o()), Le(C, `border-radius: ${I() ?? ""}`);
+    },
+    [() => ({ "has-ring-progress": r() === "ring" })]
+  ), x(y, P), ge(l);
+}
+Ne(["click"]);
+ue(
+  Ye,
+  {
+    onclick: {},
+    disabled: {},
+    loading: {},
+    visualization: {},
+    progressPercent: {},
+    isPlaying: {},
+    amplitude: {},
+    rippleIntensity: {},
+    ariaLabel: {},
+    borderRadius: {},
+    children: {}
+  },
+  [],
+  [],
+  !0
+);
+function tt(y, t) {
+  pe(t, !0);
+  let g = u(t, "onclick", 7), i = u(t, "disabled", 7, !1), o = u(t, "loading", 7, !1), r = u(t, "visualization", 7, "none"), a = u(t, "progressPercent", 7, 0), n = u(t, "isPlaying", 7, !1), s = u(t, "amplitude", 7, 0), _ = u(t, "rippleIntensity", 7, 1), f = u(t, "ariaLabel", 7, "Play"), I = u(t, "children", 7);
+  var d = {
+    get onclick() {
+      return g();
+    },
+    set onclick(l) {
+      g(l), c();
+    },
+    get disabled() {
+      return i();
+    },
+    set disabled(l = !1) {
+      i(l), c();
+    },
+    get loading() {
+      return o();
+    },
+    set loading(l = !1) {
+      o(l), c();
+    },
+    get visualization() {
+      return r();
+    },
+    set visualization(l = "none") {
+      r(l), c();
+    },
+    get progressPercent() {
+      return a();
+    },
+    set progressPercent(l = 0) {
+      a(l), c();
+    },
+    get isPlaying() {
+      return n();
+    },
+    set isPlaying(l = !1) {
+      n(l), c();
+    },
+    get amplitude() {
+      return s();
+    },
+    set amplitude(l = 0) {
+      s(l), c();
+    },
+    get rippleIntensity() {
+      return _();
+    },
+    set rippleIntensity(l = 1) {
+      _(l), c();
+    },
+    get ariaLabel() {
+      return f();
+    },
+    set ariaLabel(l = "Play") {
+      f(l), c();
+    },
+    get children() {
+      return I();
+    },
+    set children(l) {
+      I(l), c();
+    }
+  };
+  return Ye(y, {
+    get onclick() {
+      return g();
+    },
+    get disabled() {
+      return i();
+    },
+    get loading() {
+      return o();
+    },
+    get visualization() {
+      return r();
+    },
+    get progressPercent() {
+      return a();
+    },
+    get isPlaying() {
+      return n();
     },
-    set borderRadius(a = "50%") {
-      P(a), n();
+    get amplitude() {
+      return s();
     },
-    get children() {
+    get rippleIntensity() {
       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);
+    get ariaLabel() {
+      return f();
     },
-    [
-      () => ({ "border-radius": P() }),
-      () => ({ "has-ring-progress": o() === "ring" }),
-      () => ({ "border-radius": P() })
-    ]
-  ), g(c, S), re(r);
+    borderRadius: "50%",
+    children: (l, P) => {
+      var b = ee(), j = J(b);
+      Ge(j, I), x(l, b);
+    },
+    $$slots: { default: !0 }
+  }), ge(d);
 }
-Be(["click"]);
-W(
-  Re,
+ue(
+  tt,
   {
     onclick: {},
     disabled: {},
@@ -528,116 +1725,115 @@ W(
     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 _ = {
+function Lt(y, t) {
+  pe(t, !0);
+  let g = u(t, "onclick", 7), i = u(t, "disabled", 7, !1), o = u(t, "loading", 7, !1), r = u(t, "visualization", 7, "none"), a = u(t, "progressPercent", 7, 0), n = u(t, "isPlaying", 7, !1), s = u(t, "amplitude", 7, 0), _ = u(t, "rippleIntensity", 7, 1), f = u(t, "ariaLabel", 7, "Play"), I = u(t, "children", 7);
+  var d = {
     get onclick() {
-      return d();
+      return g();
     },
-    set onclick(r) {
-      d(r), n();
+    set onclick(l) {
+      g(l), c();
     },
     get disabled() {
-      return l();
+      return i();
     },
-    set disabled(r = !1) {
-      l(r), n();
+    set disabled(l = !1) {
+      i(l), c();
     },
     get loading() {
-      return s();
+      return o();
     },
-    set loading(r = !1) {
-      s(r), n();
+    set loading(l = !1) {
+      o(l), c();
     },
     get visualization() {
-      return o();
+      return r();
     },
-    set visualization(r = "none") {
-      o(r), n();
+    set visualization(l = "none") {
+      r(l), c();
     },
     get progressPercent() {
-      return u();
+      return a();
     },
-    set progressPercent(r = 0) {
-      u(r), n();
+    set progressPercent(l = 0) {
+      a(l), c();
     },
     get isPlaying() {
-      return m();
+      return n();
     },
-    set isPlaying(r = !1) {
-      m(r), n();
+    set isPlaying(l = !1) {
+      n(l), c();
     },
     get amplitude() {
-      return k();
+      return s();
     },
-    set amplitude(r = 0) {
-      k(r), n();
+    set amplitude(l = 0) {
+      s(l), c();
     },
     get rippleIntensity() {
-      return h();
+      return _();
     },
-    set rippleIntensity(r = 1) {
-      h(r), n();
+    set rippleIntensity(l = 1) {
+      _(l), c();
     },
     get ariaLabel() {
-      return b();
+      return f();
     },
-    set ariaLabel(r = "Play") {
-      b(r), n();
+    set ariaLabel(l = "Play") {
+      f(l), c();
     },
     get children() {
-      return P();
+      return I();
     },
-    set children(r) {
-      P(r), n();
+    set children(l) {
+      I(l), c();
     }
   };
-  return Re(c, {
+  return Ye(y, {
     get onclick() {
-      return d();
+      return g();
     },
     get disabled() {
-      return l();
+      return i();
     },
     get loading() {
-      return s();
+      return o();
     },
     get visualization() {
-      return o();
+      return r();
     },
     get progressPercent() {
-      return u();
+      return a();
     },
     get isPlaying() {
-      return m();
+      return n();
     },
     get amplitude() {
-      return k();
+      return s();
     },
     get rippleIntensity() {
-      return h();
+      return _();
     },
     get ariaLabel() {
-      return b();
+      return f();
     },
-    borderRadius: "50%",
-    children: (r, S) => {
-      var w = U(), f = E(w);
-      we(f, P), g(r, w);
+    borderRadius: "0",
+    children: (l, P) => {
+      var b = ee(), j = J(b);
+      Ge(j, I), x(l, b);
     },
     $$slots: { default: !0 }
-  }), re(_);
+  }), ge(d);
 }
-W(
-  qe,
+ue(
+  Lt,
   {
     onclick: {},
     disabled: {},
@@ -654,888 +1850,1668 @@ W(
   [],
   !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 _ = {
+function jt(y, t) {
+  pe(t, !0);
+  let g = u(t, "onclick", 7), i = u(t, "disabled", 7, !1), o = u(t, "loading", 7, !1), r = u(t, "visualization", 7, "none"), a = u(t, "progressPercent", 7, 0), n = u(t, "isPlaying", 7, !1), s = u(t, "amplitude", 7, 0), _ = u(t, "rippleIntensity", 7, 1), f = u(t, "ariaLabel", 7, "Play"), I = u(t, "children", 7);
+  var d = {
     get onclick() {
-      return d();
+      return g();
     },
-    set onclick(r) {
-      d(r), n();
+    set onclick(l) {
+      g(l), c();
     },
     get disabled() {
-      return l();
+      return i();
     },
-    set disabled(r = !1) {
-      l(r), n();
+    set disabled(l = !1) {
+      i(l), c();
     },
     get loading() {
-      return s();
+      return o();
     },
-    set loading(r = !1) {
-      s(r), n();
+    set loading(l = !1) {
+      o(l), c();
     },
     get visualization() {
-      return o();
+      return r();
     },
-    set visualization(r = "none") {
-      o(r), n();
+    set visualization(l = "none") {
+      r(l), c();
     },
     get progressPercent() {
-      return u();
+      return a();
     },
-    set progressPercent(r = 0) {
-      u(r), n();
+    set progressPercent(l = 0) {
+      a(l), c();
     },
     get isPlaying() {
-      return m();
+      return n();
     },
-    set isPlaying(r = !1) {
-      m(r), n();
+    set isPlaying(l = !1) {
+      n(l), c();
     },
     get amplitude() {
-      return k();
+      return s();
     },
-    set amplitude(r = 0) {
-      k(r), n();
+    set amplitude(l = 0) {
+      s(l), c();
     },
     get rippleIntensity() {
-      return h();
+      return _();
     },
-    set rippleIntensity(r = 1) {
-      h(r), n();
+    set rippleIntensity(l = 1) {
+      _(l), c();
     },
     get ariaLabel() {
-      return b();
+      return f();
     },
-    set ariaLabel(r = "Play") {
-      b(r), n();
+    set ariaLabel(l = "Play") {
+      f(l), c();
     },
     get children() {
-      return P();
+      return I();
     },
-    set children(r) {
-      P(r), n();
+    set children(l) {
+      I(l), c();
     }
   };
-  return Re(c, {
+  return Ye(y, {
     get onclick() {
-      return d();
+      return g();
     },
     get disabled() {
-      return l();
+      return i();
+    },
+    get loading() {
+      return o();
+    },
+    get visualization() {
+      return r();
+    },
+    get progressPercent() {
+      return a();
+    },
+    get isPlaying() {
+      return n();
+    },
+    get amplitude() {
+      return s();
+    },
+    get rippleIntensity() {
+      return _();
+    },
+    get ariaLabel() {
+      return f();
+    },
+    borderRadius: "var(--fortyfour-play-button-border-radius)",
+    children: (l, P) => {
+      var b = ee(), j = J(b);
+      Ge(j, I), x(l, b);
+    },
+    $$slots: { default: !0 }
+  }), ge(d);
+}
+ue(
+  jt,
+  {
+    onclick: {},
+    disabled: {},
+    loading: {},
+    visualization: {},
+    progressPercent: {},
+    isPlaying: {},
+    amplitude: {},
+    rippleIntensity: {},
+    ariaLabel: {},
+    children: {}
+  },
+  [],
+  [],
+  !0
+);
+var oa = F('<div class="shape-wrapper svelte-jokk6x"><!> <button part="button" class="play-button svelte-jokk6x"><div aria-hidden="true"><!></div> <span part="icon" class="icon svelte-jokk6x"><!></span></button></div>');
+const na = {
+  hash: "svelte-jokk6x",
+  code: ".shape-wrapper.svelte-jokk6x {position:relative;width:var(--fortyfour-play-button-size, 48px);height:var(--fortyfour-play-button-size, 48px);font-size:var(--fortyfour-play-button-size, 48px);}.play-button.svelte-jokk6x {position:relative;width:100%;height:100%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--fortyfour-play-button-icon-color);padding:0;}.play-button.svelte-jokk6x:focus-visible {outline:var(--fortyfour-play-button-focus-width) solid var(--fortyfour-play-button-focus-color);outline-offset:var(--fortyfour-play-button-focus-offset);}.play-button.svelte-jokk6x:disabled {opacity:0.5;cursor:not-allowed;}.blob-background.svelte-jokk6x {position:absolute;inset:0;background:var(--fortyfour-play-button-background-color);border:var(--fortyfour-play-button-border-width) solid var(--fortyfour-play-button-border-color);overflow:hidden;}.blob-background.has-ring.svelte-jokk6x {border:none;}.icon.svelte-jokk6x {position:relative;z-index:1;width:1em;height:1em;display:flex;align-items:center;justify-content:center;}.icon.svelte-jokk6x svg {width:100%;height:100%;fill:currentColor;}"
+};
+function It(y, t) {
+  pe(t, !0), be(y, na);
+  let g = u(t, "onclick", 7), i = u(t, "disabled", 7, !1), o = u(t, "loading", 7, !1), r = u(t, "visualization", 7, "none"), a = u(t, "progressPercent", 7, 0), n = u(t, "isPlaying", 7, !1), s = u(t, "amplitude", 7, 0), _ = u(t, "rippleIntensity", 7, 1), f = u(t, "ariaLabel", 7, "Play"), I = u(t, "animate", 7, !1), d = u(t, "speed", 7, 20), l = u(t, "children", 7);
+  function P(p, S) {
+    return Math.floor(p + Math.random() * (S - p));
+  }
+  function b() {
+    const S = ($) => 100 - $;
+    let O = [];
+    for (let $ = 0; $ < 4; $++) {
+      let Y = P(25, S(25));
+      O.push(Y), O.push(S(Y));
+    }
+    return `${O[0]}% ${O[1]}% ${O[2]}% ${O[3]}% / ${O[4]}% ${O[6]}% ${O[7]}% ${O[5]}%`;
+  }
+  const j = b(), C = [
+    { borderRadius: j, offset: 0 },
+    { borderRadius: b(), offset: 0.15 },
+    { borderRadius: b(), offset: 0.3 },
+    { borderRadius: b(), offset: 0.45 },
+    { borderRadius: b(), offset: 0.6 },
+    { borderRadius: b(), offset: 0.75 },
+    { borderRadius: b(), offset: 0.9 },
+    { borderRadius: j, offset: 1 }
+  ], B = j;
+  let A = q(null), X = null;
+  const R = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  me(() => (e(A) && I() && !R && (X = e(A).animate(C, {
+    duration: d() * 1e3,
+    iterations: 1 / 0,
+    easing: "ease"
+  })), () => {
+    X && (X.cancel(), X = null);
+  }));
+  var V = {
+    get onclick() {
+      return g();
+    },
+    set onclick(p) {
+      g(p), c();
+    },
+    get disabled() {
+      return i();
+    },
+    set disabled(p = !1) {
+      i(p), c();
     },
     get loading() {
+      return o();
+    },
+    set loading(p = !1) {
+      o(p), c();
+    },
+    get visualization() {
+      return r();
+    },
+    set visualization(p = "none") {
+      r(p), c();
+    },
+    get progressPercent() {
+      return a();
+    },
+    set progressPercent(p = 0) {
+      a(p), c();
+    },
+    get isPlaying() {
+      return n();
+    },
+    set isPlaying(p = !1) {
+      n(p), c();
+    },
+    get amplitude() {
       return s();
     },
+    set amplitude(p = 0) {
+      s(p), c();
+    },
+    get rippleIntensity() {
+      return _();
+    },
+    set rippleIntensity(p = 1) {
+      _(p), c();
+    },
+    get ariaLabel() {
+      return f();
+    },
+    set ariaLabel(p = "Play") {
+      f(p), c();
+    },
+    get animate() {
+      return I();
+    },
+    set animate(p = !1) {
+      I(p), c();
+    },
+    get speed() {
+      return d();
+    },
+    set speed(p = 20) {
+      d(p), c();
+    },
+    get children() {
+      return l();
+    },
+    set children(p) {
+      l(p), c();
+    }
+  }, k = oa();
+  let D;
+  var T = G(k);
+  {
+    var L = (p) => {
+      ct(p, {
+        get isPlaying() {
+          return n();
+        },
+        get amplitude() {
+          return s();
+        },
+        get intensity() {
+          return _();
+        }
+      });
+    };
+    K(T, (p) => {
+      r() === "ripple" && p(L);
+    });
+  }
+  var M = ye(T, 2);
+  M.__click = function(...p) {
+    g()?.apply(this, p);
+  };
+  var z = G(M);
+  let v, E;
+  var Q = G(z);
+  {
+    var oe = (p) => {
+      ut(p, {
+        get progress() {
+          return a();
+        }
+      });
+    };
+    K(Q, (p) => {
+      r() === "ring" && p(oe);
+    });
+  }
+  N(z), Ee(z, (p) => m(A, p), () => e(A));
+  var w = ye(z, 2), h = G(w);
+  return Ge(h, l), N(w), N(M), N(k), H(
+    (p, S, O) => {
+      D = Le(k, "", D, p), M.disabled = i(), Z(M, "aria-label", f()), Z(M, "aria-busy", o()), v = fe(z, 1, "blob-background svelte-jokk6x", null, v, S), E = Le(z, "", E, O);
+    },
+    [
+      () => ({ "border-radius": B }),
+      () => ({ "has-ring": r() === "ring" }),
+      () => ({ "border-radius": B })
+    ]
+  ), x(y, k), ge(V);
+}
+Ne(["click"]);
+ue(
+  It,
+  {
+    onclick: {},
+    disabled: {},
+    loading: {},
+    visualization: {},
+    progressPercent: {},
+    isPlaying: {},
+    amplitude: {},
+    rippleIntensity: {},
+    ariaLabel: {},
+    animate: {},
+    speed: {},
+    children: {}
+  },
+  [],
+  [],
+  !0
+);
+Ut();
+var ia = Me('<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" fill="currentColor"></path></svg>');
+function Et(y) {
+  var t = ia();
+  x(y, t);
+}
+ue(Et, {}, [], [], !0);
+var la = Me('<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" fill="currentColor"></path></svg>');
+function Mt(y) {
+  var t = la();
+  x(y, t);
+}
+ue(Mt, {}, [], [], !0);
+var sa = Me(`<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 St(y) {
+  var t = sa();
+  x(y, t);
+}
+ue(St, {}, [], [], !0);
+var ua = Me('<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 Tt(y) {
+  var t = ua();
+  x(y, t);
+}
+ue(Tt, {}, [], [], !0);
+const ca = {
+  hash: "svelte-1urg1ua",
+  code: `:host {--fortyfour-play-button-size: 48px;--fortyfour-play-button-background-color: #3b82f6;--fortyfour-play-button-icon-color: #ffffff;--fortyfour-play-button-border-width: 2px;--fortyfour-play-button-border-color: #ffffff;--fortyfour-play-button-border-radius: 12px;--fortyfour-play-button-ring-width: var(--fortyfour-play-button-border-width);--fortyfour-play-button-ring-fill-color: #ffffff;--fortyfour-play-button-ring-track-color: transparent;--fortyfour-play-button-hover-scale: 1.04;--fortyfour-play-button-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);--fortyfour-play-button-focus-color: var(--fortyfour-play-button-background-color);--fortyfour-play-button-focus-width: 2px;--fortyfour-play-button-focus-offset: 2px;display:inline-block;font-size:var(--fortyfour-play-button-size);}:host([hover="scale"]) {transition:transform 0.15s ease-out;}:host([hover="scale"]:hover:not([disabled])) {transform:scale(var(--fortyfour-play-button-hover-scale));}:host([hover="glow"]) {transition:filter 0.15s ease-out;}:host([hover="glow"]:hover:not([disabled])) {filter:drop-shadow(var(--fortyfour-play-button-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-play-button-hover-scale));filter:drop-shadow(var(--fortyfour-play-button-hover-shadow));}
+
+  @media (prefers-reduced-motion: reduce) {:host([hover="scale"]),
+    :host([hover="glow"]),
+    :host([hover="lift"]) {transition:none;}
+  }`
+};
+function da(y, t) {
+  pe(t, !0), be(y, ca);
+  const g = (v) => {
+    var E = ee(), Q = J(E);
+    {
+      var oe = (h) => {
+        var p = ee(), S = J(p);
+        Ce(S, t, "icon-error", {}, (O) => {
+          Tt(O);
+        }), x(h, p);
+      }, w = (h) => {
+        var p = ee(), S = J(p);
+        {
+          var O = (Y) => {
+            var ce = ee(), U = J(ce);
+            Ce(U, t, "icon-loading", {}, (re) => {
+              St(re);
+            }), x(Y, ce);
+          }, $ = (Y) => {
+            var ce = ee(), U = J(ce);
+            {
+              var re = (ie) => {
+                var ve = ee(), de = J(ve);
+                Ce(de, t, "icon-playing", {}, (ae) => {
+                  Mt(ae);
+                }), x(ie, ve);
+              }, ne = (ie) => {
+                var ve = ee(), de = J(ve);
+                Ce(de, t, "icon-paused", {}, (ae) => {
+                  Et(ae);
+                }), x(ie, ve);
+              };
+              K(
+                U,
+                (ie) => {
+                  e(B) ? ie(re) : ie(ne, !1);
+                },
+                !0
+              );
+            }
+            x(Y, ce);
+          };
+          K(
+            S,
+            (Y) => {
+              V() ? Y(O) : Y($, !1);
+            },
+            !0
+          );
+        }
+        x(h, p);
+      };
+      K(Q, (h) => {
+        e(X) ? h(oe) : h(w, !1);
+      });
+    }
+    x(v, E);
+  }, i = t.$$host;
+  let o = u(t, "for", 7, ""), r = u(t, "shape", 7, "circle"), a = u(t, "visualization", 7, "none"), n = u(t, "hover", 7, "none"), s = u(t, "rippleIntensity", 7, 1), _ = u(t, "blobAnimate", 7, !1), f = u(t, "blobSpeed", 7, 20);
+  const I = {
+    circle: tt,
+    square: Lt,
+    "rounded-square": jt,
+    blob: It
+  };
+  let d = q(null), l = q("idle"), P = q(0), b = q(0), j = q(Xe([]));
+  const C = W(() => I[r()] ?? tt), B = W(() => e(l) === "playing"), A = W(() => e(l) === "loading"), X = W(() => e(l) === "error"), R = W(() => e(b) > 0 ? e(P) / e(b) : 0), V = st(() => e(A), 200), k = W(() => {
+    if (!e(j).length || e(b) === 0)
+      return 0;
+    const v = Math.floor(e(P) / e(b) * e(j).length), E = 3, Q = Math.max(0, v - Math.floor(E / 2)), oe = Math.min(e(j).length, Q + E), w = e(j).slice(Q, oe), h = w.reduce((p, S) => p + S * S, 0);
+    return Math.sqrt(h / w.length);
+  }), D = W(() => ({
+    onclick: T,
+    disabled: !o() || e(X),
+    loading: e(A),
+    visualization: a(),
+    progressPercent: e(R),
+    isPlaying: e(B),
+    amplitude: e(k),
+    rippleIntensity: s(),
+    ariaLabel: e(B) ? "Pause" : "Play",
+    ...r() === "blob" ? { animate: _(), speed: f() } : {}
+  }));
+  me(() => {
+    if (!o()) {
+      console.warn("fortyfour-play-button: 'for' attribute is required");
+      return;
+    }
+    const v = i.getRootNode();
+    if (m(d, v.getElementById(o()), !0), !e(d)) {
+      console.warn(`fortyfour-play-button: element with id "${o()}" not found`);
+      return;
+    }
+    function E() {
+      m(l, e(d).state, !0), m(P, e(d).currentTime, !0), m(b, e(d).duration, !0), m(j, e(d).metadata?.waveform ?? [], !0);
+    }
+    return E(), e(d).addEventListener("loading", E), e(d).addEventListener("loadedmetadata", E), e(d).addEventListener("play", E), e(d).addEventListener("pause", E), e(d).addEventListener("ended", E), e(d).addEventListener("error", E), e(d).addEventListener("timeupdate", E), () => {
+      e(d).removeEventListener("loading", E), e(d).removeEventListener("loadedmetadata", E), e(d).removeEventListener("play", E), e(d).removeEventListener("pause", E), e(d).removeEventListener("ended", E), e(d).removeEventListener("error", E), e(d).removeEventListener("timeupdate", E);
+    };
+  });
+  function T() {
+    e(d)?.togglePlay();
+  }
+  Oe(i, "data-playing", () => e(B)), Oe(i, "data-loading", V), Oe(i, "data-error", () => e(X));
+  var L = {
+    get for() {
+      return o();
+    },
+    set for(v = "") {
+      o(v), c();
+    },
+    get shape() {
+      return r();
+    },
+    set shape(v = "circle") {
+      r(v), c();
+    },
     get visualization() {
-      return o();
+      return a();
     },
-    get progressPercent() {
-      return u();
+    set visualization(v = "none") {
+      a(v), c();
     },
-    get isPlaying() {
-      return m();
+    get hover() {
+      return n();
     },
-    get amplitude() {
-      return k();
+    set hover(v = "none") {
+      n(v), c();
     },
     get rippleIntensity() {
-      return h();
+      return s();
     },
-    get ariaLabel() {
-      return b();
+    set rippleIntensity(v = 1) {
+      s(v), c();
     },
-    borderRadius: "0",
-    children: (r, S) => {
-      var w = U(), f = E(w);
-      we(f, P), g(r, w);
+    get blobAnimate() {
+      return _();
     },
-    $$slots: { default: !0 }
-  }), re(_);
+    set blobAnimate(v = !1) {
+      _(v), c();
+    },
+    get blobSpeed() {
+      return f();
+    },
+    set blobSpeed(v = 20) {
+      f(v), c();
+    }
+  }, M = ee(), z = J(M);
+  return Kt(z, () => e(C), (v, E) => {
+    E(v, Ft(() => e(D), {
+      children: (Q, oe) => {
+        g(Q);
+      },
+      $$slots: { default: !0 }
+    }));
+  }), x(y, M), ge(L);
 }
-W(
-  Ye,
+customElements.define("fortyfour-play-button", ue(
+  da,
   {
-    onclick: {},
-    disabled: {},
-    loading: {},
-    visualization: {},
-    progressPercent: {},
-    isPlaying: {},
-    amplitude: {},
-    rippleIntensity: {},
-    ariaLabel: {},
-    children: {}
+    for: { attribute: "for", reflect: !0 },
+    shape: { attribute: "shape", reflect: !0 },
+    visualization: { attribute: "visualization", reflect: !0 },
+    hover: { attribute: "hover", reflect: !0 },
+    rippleIntensity: { attribute: "ripple-intensity", reflect: !0 },
+    blobAnimate: { attribute: "blob-animate", reflect: !0, type: "Boolean" },
+    blobSpeed: { attribute: "blob-speed", reflect: !0 }
   },
-  [],
+  ["icon-error", "icon-loading", "icon-playing", "icon-paused"],
   [],
   !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();
+));
+function Rt(y, t) {
+  if (!y.length || t <= 0)
+    return [];
+  const g = y.length / t, i = [];
+  for (let o = 0; o < t; o++) {
+    const r = Math.floor(o * g), a = Math.floor((o + 1) * g), n = y.slice(r, Math.max(r + 1, a)), s = n.reduce((f, I) => f + I * I, 0), _ = Math.sqrt(s / n.length);
+    i.push(_);
+  }
+  return i;
+}
+function dt(y, t, g) {
+  return function(o) {
+    const r = y(), a = t(), n = g();
+    if (!r || !n || a <= 0)
+      return;
+    const s = o.clientX - n.left, f = Math.max(0, Math.min(1, s / n.width)) * a;
+    r.seek(f);
+  };
+}
+function ft(y, t, g) {
+  return function(o) {
+    const r = y(), a = t(), n = g();
+    if (!r || a <= 0)
+      return;
+    const s = a * 0.05;
+    o.key === "ArrowRight" ? r.seek(Math.min(a, n + s)) : o.key === "ArrowLeft" && r.seek(Math.max(0, n - s));
+  };
+}
+var fa = Me("<rect></rect>"), va = F('<div class="waveform svelte-kt0w9q" role="slider" tabindex="0" aria-valuemin="0" aria-label="Audio playback position"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="svelte-kt0w9q"><!></svg></div>');
+const pa = {
+  hash: "svelte-kt0w9q",
+  code: ":host {display:flex;flex:1;--waveform-progress-color: #3b82f6;--waveform-track-color: #e5e7eb;--waveform-focus-color: #3b82f6;--waveform-focus-width: 2px;--waveform-focus-offset: 2px;--waveform-focus-radius: 4px;}.waveform.svelte-kt0w9q {flex:1;height:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--waveform-focus-radius);}.waveform.svelte-kt0w9q:focus-visible {outline:var(--waveform-focus-width) solid var(--waveform-focus-color);outline-offset:var(--waveform-focus-offset);}svg.svelte-kt0w9q {display:block;}.bar.svelte-kt0w9q {transition:fill 0.15s;}.progress.svelte-kt0w9q {fill:var(--waveform-progress-color);}.track.svelte-kt0w9q {fill:var(--waveform-track-color);}"
+};
+function ga(y, t) {
+  pe(t, !0), be(y, pa);
+  const g = t.$$host;
+  let i = u(t, "for", 7, ""), o = u(t, "barWidth", 7, 3), r = u(t, "barGap", 7, 1), a = u(t, "barRadius", 7, 1), n = u(t, "minBarHeight", 7, 3), s = u(t, "height", 7, 56), _ = q(Xe([])), f = q(0), I = q(0), d = q(null), l = q(0), P = q(!1), b = q(null);
+  g.style.height = `${s()}px`, Fe(() => {
+    const z = new ResizeObserver((v) => {
+      for (let E of v)
+        m(l, E.contentRect.width || 0, !0), m(P, !0);
+    });
+    return e(b) && z.observe(e(b)), () => {
+      z.disconnect();
+    };
+  }), me(() => {
+    if (!i()) {
+      console.warn("fortyfour-bar-waveform: 'for' attribute is required");
+      return;
+    }
+    const z = g.getRootNode();
+    if (m(d, z.getElementById(i()), !0), !e(d)) {
+      console.warn(`fortyfour-bar-waveform: element with id "${i()}" not found`);
+      return;
+    }
+    e(d).metadata?.waveform && m(_, e(d).metadata.waveform, !0), e(d).duration && m(I, e(d).duration, !0), e(d).currentTime && m(f, e(d).currentTime, !0);
+    function v() {
+      m(_, e(d).metadata?.waveform || [], !0), m(I, e(d).duration, !0);
+    }
+    function E() {
+      m(f, e(d).currentTime, !0);
+    }
+    return e(d).addEventListener("loadedmetadata", v), e(d).addEventListener("timeupdate", E), () => {
+      e(d).removeEventListener("loadedmetadata", v), e(d).removeEventListener("timeupdate", E);
+    };
+  });
+  const j = W(() => Math.max(1, Math.floor(e(l) / (o() + r())))), C = W(() => e(_).length > 0), B = W(() => e(C) ? Rt(e(_), e(j)) : Array(e(j)).fill(0)), A = W(() => e(I) > 0 ? e(f) / e(I) : 0), X = W(() => e(B).map((z) => {
+    const v = Math.max(n(), Math.round(z / 100 * (s() - n()) + n()));
+    return v % 2 === 0 ? v + 1 : v;
+  }));
+  me(() => {
+    e(C) ? g.removeAttribute("data-placeholder") : g.setAttribute("data-placeholder", "");
+  });
+  const R = dt(() => e(d), () => e(I), () => g.getBoundingClientRect()), V = ft(() => e(d), () => e(I), () => e(f));
+  var k = {
+    get for() {
+      return i();
     },
-    set loading(r = !1) {
-      s(r), n();
+    set for(z = "") {
+      i(z), c();
     },
-    get visualization() {
+    get barWidth() {
       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();
+    set barWidth(z = 3) {
+      o(z), c();
     },
-    get rippleIntensity() {
-      return h();
-    },
-    set rippleIntensity(r = 1) {
-      h(r), n();
+    get barGap() {
+      return r();
     },
-    get ariaLabel() {
-      return b();
+    set barGap(z = 1) {
+      r(z), c();
     },
-    set ariaLabel(r = "Play") {
-      b(r), n();
+    get barRadius() {
+      return a();
     },
-    get children() {
-      return P();
+    set barRadius(z = 1) {
+      a(z), c();
     },
-    set children(r) {
-      P(r), n();
-    }
-  };
-  return Re(c, {
-    get onclick() {
-      return d();
+    get minBarHeight() {
+      return n();
     },
-    get disabled() {
-      return l();
+    set minBarHeight(z = 3) {
+      n(z), c();
     },
-    get loading() {
+    get height() {
       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(_);
+    set height(z = 56) {
+      s(z), c();
+    }
+  }, D = va();
+  D.__click = R, D.__keydown = V;
+  var T = G(D), L = G(T);
+  {
+    var M = (z) => {
+      var v = ee(), E = J(v);
+      Be(E, 17, () => e(X), Ae, (Q, oe, w) => {
+        const h = W(() => (w + 1) / e(X).length), p = W(() => e(h) <= e(A));
+        var S = fa();
+        H(
+          (O) => {
+            fe(S, 0, nt(["bar", e(p) ? "progress" : "track"]), "svelte-kt0w9q"), Z(S, "x", w * (o() + r())), Z(S, "y", s() / 4 - e(oe) / 2), Z(S, "width", O), Z(S, "height", e(oe)), Z(S, "rx", a());
+          },
+          [() => Math.max(1, o() - 1)]
+        ), x(Q, S);
+      }), x(z, v);
+    };
+    K(L, (z) => {
+      e(P) && z(M);
+    });
+  }
+  return N(T), N(D), Ee(D, (z) => m(b, z), () => e(b)), H(() => {
+    Z(D, "aria-valuemax", e(I)), Z(D, "aria-valuenow", e(f)), Z(T, "height", s()), Z(T, "viewBox", `0 0 ${e(l)} ${s() / 2}`);
+  }), x(y, D), ge(k);
 }
-W(
-  Ze,
+Ne(["click", "keydown"]);
+customElements.define("fortyfour-bar-waveform", ue(
+  ga,
   {
-    onclick: {},
-    disabled: {},
-    loading: {},
-    visualization: {},
-    progressPercent: {},
-    isPlaying: {},
-    amplitude: {},
-    rippleIntensity: {},
-    ariaLabel: {},
-    children: {}
+    for: { attribute: "for", reflect: !0 },
+    barWidth: { attribute: "bar-width", reflect: !0, type: "Number" },
+    barGap: { attribute: "bar-gap", reflect: !0, type: "Number" },
+    barRadius: { attribute: "bar-radius", reflect: !0, type: "Number" },
+    minBarHeight: { attribute: "min-bar-height", reflect: !0, type: "Number" },
+    height: { attribute: "height", reflect: !0, type: "Number" }
   },
   [],
   [],
   !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;}`
+));
+var ya = Me("<path></path>"), ha = Me("<path></path><!>", 1), ma = Me('<line class="line track svelte-1j1dyl9" stroke-linecap="round"></line>'), ba = F('<div class="waveform svelte-1j1dyl9" role="slider" tabindex="0" aria-valuemin="0" aria-label="Audio playback position"><svg width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" preserveAspectRatio="none" class="svelte-1j1dyl9"><!></svg></div>');
+const wa = {
+  hash: "svelte-1j1dyl9",
+  code: `:host {--fortyfour-line-waveform-track-color: #d1d5db;--fortyfour-line-waveform-progress-color: #3b82f6;--fortyfour-line-waveform-focus-color: #3b82f6;--fortyfour-line-waveform-focus-width: 2px;--fortyfour-line-waveform-focus-offset: 2px;--fortyfour-line-waveform-focus-radius: 4px;display:flex;flex:1;}
+
+  @media (prefers-color-scheme: dark) {:host {--fortyfour-line-waveform-track-color: #374151;--fortyfour-line-waveform-progress-color: #60a5fa;--fortyfour-line-waveform-focus-color: #60a5fa;}
+  }.waveform.svelte-1j1dyl9 {flex:1;height:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--fortyfour-line-waveform-focus-radius);}.waveform.svelte-1j1dyl9:focus-visible {outline:var(--fortyfour-line-waveform-focus-width) solid var(--fortyfour-line-waveform-focus-color);outline-offset:var(--fortyfour-line-waveform-focus-offset);}svg.svelte-1j1dyl9 {display:block;}.line.svelte-1j1dyl9 {fill:none;stroke-linecap:round;stroke-linejoin:round;}.line.sharp.svelte-1j1dyl9 {stroke-linecap:square;stroke-linejoin:miter;}.track.svelte-1j1dyl9 {stroke:var(--fortyfour-line-waveform-track-color);}.progress.svelte-1j1dyl9 {stroke:var(--fortyfour-line-waveform-progress-color);}`
 };
-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]}%`;
+function xa(y, t) {
+  pe(t, !0), be(y, wa);
+  const g = t.$$host;
+  let i = u(t, "for", 7, ""), o = u(t, "lineWidth", 7, 2), r = u(t, "height", 7, 56), a = u(t, "sharp", 7, !1), n = q(Xe([])), s = q(0), _ = q(0), f = q(null), I = q(0), d = q(!1), l = q(null);
+  g.style.height = `${r()}px`, Fe(() => {
+    const h = new ResizeObserver((p) => {
+      for (let S of p)
+        m(I, S.contentRect.width || 0, !0), m(d, !0);
+    });
+    return e(l) && h.observe(e(l)), () => {
+      h.disconnect();
+    };
+  }), me(() => {
+    if (!i()) {
+      console.warn("fortyfour-line-waveform: 'for' attribute is required");
+      return;
+    }
+    const h = g.getRootNode();
+    if (m(f, h.getElementById(i()), !0), !e(f)) {
+      console.warn(`fortyfour-line-waveform: element with id "${i()}" not found`);
+      return;
+    }
+    e(f).metadata?.waveform && m(n, e(f).metadata.waveform, !0), e(f).duration && m(_, e(f).duration, !0), e(f).currentTime && m(s, e(f).currentTime, !0);
+    function p() {
+      m(n, e(f).metadata?.waveform || [], !0), m(_, e(f).duration, !0);
+    }
+    function S() {
+      m(s, e(f).currentTime, !0);
+    }
+    return e(f).addEventListener("loadedmetadata", p), e(f).addEventListener("timeupdate", S), () => {
+      e(f).removeEventListener("loadedmetadata", p), e(f).removeEventListener("timeupdate", S);
+    };
+  });
+  const P = 0.15, b = W(() => Math.max(2, Math.floor(e(I) * P))), j = W(() => e(n).length > 0), C = W(() => e(j) ? Rt(e(n), e(b)) : []), B = W(() => e(_) > 0 ? e(s) / e(_) : 0), A = W(() => r() / 2), X = W(() => r() / 2 * 0.8), R = W(() => {
+    if (!e(C).length || e(I) === 0)
+      return [];
+    const h = o() / 2, p = e(I) - h * 2;
+    return e(C).map((S, O) => {
+      const $ = h + O / (e(C).length - 1) * p, Y = Math.max(0.05, S / 100), ce = O % 2 === 0 ? -1 : 1, U = e(A) + ce * Y * e(X);
+      return { x: $, y: U };
+    });
+  });
+  function V(h, p) {
+    if (h.length === 0)
+      return "";
+    let S = `M ${h[0].x} ${h[0].y}`;
+    for (let O = 1; O < h.length; O++) {
+      const $ = h[O - 1], Y = h[O];
+      if (p) {
+        const ce = $.x + (Y.x - $.x) / 3, U = $.y, re = $.x + (Y.x - $.x) * 2 / 3, ne = Y.y;
+        S += ` C ${ce} ${U}, ${re} ${ne}, ${Y.x} ${Y.y}`;
+      } else
+        S += ` L ${Y.x} ${Y.y}`;
+    }
+    return S;
   }
-  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();
+  const k = W(() => V(e(R), !a())), D = W(() => {
+    if (e(B) <= 0 || e(I) === 0)
+      return 0;
+    const h = o() / 2, p = e(I) - h * 2;
+    return h + e(B) * p;
+  }), T = W(() => {
+    if (e(R).length === 0 || e(D) <= 0)
+      return "";
+    const h = [];
+    let p = null;
+    for (let O = 0; O < e(R).length; O++)
+      if (e(R)[O].x <= e(D))
+        h.push(e(R)[O]);
+      else {
+        p = e(R)[O];
+        break;
+      }
+    if (h.length === 0)
+      return "";
+    const S = h[h.length - 1];
+    if (p && S.x < e(D)) {
+      const O = (e(D) - S.x) / (p.x - S.x), $ = S.y + O * (p.y - S.y);
+      h.push({ x: e(D), y: $ });
+    }
+    return V(h, !a());
+  });
+  me(() => {
+    e(j) ? g.removeAttribute("data-placeholder") : g.setAttribute("data-placeholder", "");
+  });
+  const L = dt(() => e(f), () => e(_), () => e(l).getBoundingClientRect()), M = ft(() => e(f), () => e(_), () => e(s));
+  var z = {
+    get for() {
+      return i();
     },
-    set loading(v = !1) {
-      s(v), n();
+    set for(h = "") {
+      i(h), c();
     },
-    get visualization() {
+    get lineWidth() {
       return o();
     },
-    set visualization(v = "none") {
-      o(v), n();
-    },
-    get progressPercent() {
-      return u();
+    set lineWidth(h = 2) {
+      o(h), c();
     },
-    set progressPercent(v = 0) {
-      u(v), n();
+    get height() {
+      return r();
     },
-    get isPlaying() {
-      return m();
+    set height(h = 56) {
+      r(h), c();
     },
-    set isPlaying(v = !1) {
-      m(v), n();
+    get sharp() {
+      return a();
     },
-    get amplitude() {
-      return k();
+    set sharp(h = !1) {
+      a(h), c();
+    }
+  }, v = ba();
+  v.__click = L, v.__keydown = M;
+  var E = G(v), Q = G(E);
+  {
+    var oe = (h) => {
+      var p = ha(), S = J(p);
+      let O;
+      var $ = ye(S);
+      {
+        var Y = (ce) => {
+          var U = ya();
+          let re;
+          H(
+            (ne) => {
+              re = fe(U, 0, "line progress svelte-1j1dyl9", null, re, ne), Z(U, "d", e(T)), Z(U, "stroke-width", o());
+            },
+            [() => ({ sharp: a() })]
+          ), x(ce, U);
+        };
+        K($, (ce) => {
+          e(T) && ce(Y);
+        });
+      }
+      H(
+        (ce) => {
+          O = fe(S, 0, "line track svelte-1j1dyl9", null, O, ce), Z(S, "d", e(k)), Z(S, "stroke-width", o());
+        },
+        [() => ({ sharp: a() })]
+      ), x(h, p);
+    }, w = (h) => {
+      var p = ee(), S = J(p);
+      {
+        var O = ($) => {
+          var Y = ma();
+          H(() => {
+            Z(Y, "x1", o() / 2), Z(Y, "y1", r() / 2), Z(Y, "x2", e(I) - o() / 2), Z(Y, "y2", r() / 2), Z(Y, "stroke-width", o());
+          }), x($, Y);
+        };
+        K(
+          S,
+          ($) => {
+            e(d) && $(O);
+          },
+          !0
+        );
+      }
+      x(h, p);
+    };
+    K(Q, (h) => {
+      e(d) && e(k) ? h(oe) : h(w, !1);
+    });
+  }
+  return N(E), N(v), Ee(v, (h) => m(l, h), () => e(l)), H(() => {
+    Z(v, "aria-valuemax", e(_)), Z(v, "aria-valuenow", e(s)), Z(E, "height", r()), Z(E, "viewBox", `0 0 ${e(I)} ${r()}`);
+  }), x(y, v), ge(z);
+}
+Ne(["click", "keydown"]);
+customElements.define("fortyfour-line-waveform", ue(
+  xa,
+  {
+    for: { attribute: "for", reflect: !0 },
+    lineWidth: { attribute: "line-width", reflect: !0, type: "Number" },
+    height: { attribute: "height", reflect: !0, type: "Number" },
+    sharp: { attribute: "sharp", reflect: !0, type: "Boolean" }
+  },
+  [],
+  [],
+  !0
+));
+var _a = F('<div class="container svelte-1xpmvj3" role="slider" tabindex="0" aria-valuemin="0" aria-label="Audio playback position"><div class="track svelte-1xpmvj3"><div class="progress svelte-1xpmvj3"></div></div></div>');
+const ka = {
+  hash: "svelte-1xpmvj3",
+  code: `:host {--fortyfour-progress-bar-track-color: #e5e7eb;--fortyfour-progress-bar-progress-color: #3b82f6;--fortyfour-progress-bar-focus-color: #3b82f6;--fortyfour-progress-bar-focus-width: 2px;--fortyfour-progress-bar-focus-offset: 2px;display:flex;flex:1;}
+
+  @media (prefers-color-scheme: dark) {:host {--fortyfour-progress-bar-track-color: #374151;--fortyfour-progress-bar-progress-color: #60a5fa;--fortyfour-progress-bar-focus-color: #60a5fa;}
+  }.container.svelte-1xpmvj3 {flex:1;display:flex;align-items:center;cursor:pointer;border-radius:4px;}.container.svelte-1xpmvj3:focus-visible {outline:var(--fortyfour-progress-bar-focus-width) solid var(--fortyfour-progress-bar-focus-color);outline-offset:var(--fortyfour-progress-bar-focus-offset);}.track.svelte-1xpmvj3 {width:100%;background:var(--fortyfour-progress-bar-track-color);overflow:hidden;}.progress.svelte-1xpmvj3 {height:100%;background:var(--fortyfour-progress-bar-progress-color);transition:width 0.1s linear;}`
+};
+function za(y, t) {
+  pe(t, !0), be(y, ka);
+  const g = t.$$host;
+  let i = u(t, "for", 7, ""), o = u(t, "barHeight", 7, 4), r = u(t, "barRadius", 7, 2), a = q(0), n = q(0), s = q(null), _ = q(null);
+  me(() => {
+    if (!i()) {
+      console.warn("fortyfour-progress-bar: 'for' attribute is required");
+      return;
+    }
+    const A = g.getRootNode();
+    if (m(s, A.getElementById(i()), !0), !e(s)) {
+      console.warn(`fortyfour-progress-bar: element with id "${i()}" not found`);
+      return;
+    }
+    e(s).duration && m(n, e(s).duration, !0), e(s).currentTime && m(a, e(s).currentTime, !0);
+    function X() {
+      m(n, e(s).duration, !0);
+    }
+    function R() {
+      m(a, e(s).currentTime, !0);
+    }
+    return e(s).addEventListener("loadedmetadata", X), e(s).addEventListener("timeupdate", R), () => {
+      e(s).removeEventListener("loadedmetadata", X), e(s).removeEventListener("timeupdate", R);
+    };
+  });
+  const f = W(() => e(n) > 0 ? e(a) / e(n) * 100 : 0), I = dt(() => e(s), () => e(n), () => e(_)?.getBoundingClientRect()), d = ft(() => e(s), () => e(n), () => e(a));
+  var l = {
+    get for() {
+      return i();
     },
-    set amplitude(v = 0) {
-      k(v), n();
+    set for(A = "") {
+      i(A), c();
     },
-    get rippleIntensity() {
-      return h();
+    get barHeight() {
+      return o();
     },
-    set rippleIntensity(v = 1) {
-      h(v), n();
+    set barHeight(A = 4) {
+      o(A), c();
     },
-    get ariaLabel() {
-      return b();
+    get barRadius() {
+      return r();
     },
-    set ariaLabel(v = "Play") {
-      b(v), n();
+    set barRadius(A = 2) {
+      r(A), c();
+    }
+  }, P = _a();
+  P.__click = I, P.__keydown = d;
+  var b = G(P);
+  let j;
+  var C = G(b);
+  let B;
+  return N(b), Ee(b, (A) => m(_, A), () => e(_)), N(P), H(
+    (A, X) => {
+      Z(P, "aria-valuemax", e(n)), Z(P, "aria-valuenow", e(a)), j = Le(b, "", j, A), B = Le(C, "", B, X);
     },
-    get animate() {
-      return P();
+    [
+      () => ({
+        height: `${o() ?? ""}px`,
+        "border-radius": `${r() ?? ""}px`
+      }),
+      () => ({
+        width: `${e(f) ?? ""}%`,
+        "border-radius": `${r() ?? ""}px`
+      })
+    ]
+  ), x(y, P), ge(l);
+}
+Ne(["click", "keydown"]);
+customElements.define("fortyfour-progress-bar", ue(
+  za,
+  {
+    for: { attribute: "for", reflect: !0 },
+    barHeight: { attribute: "bar-height", reflect: !0, type: "Number" },
+    barRadius: { attribute: "bar-radius", reflect: !0, type: "Number" }
+  },
+  [],
+  [],
+  !0
+));
+var Pa = F("<span> </span>"), La = F('<div class="content svelte-1lixazt"><div class="text caption-text svelte-1lixazt"></div></div>'), ja = F("<span> </span>"), Ia = F('<div class="text caption-text subtitle svelte-1lixazt"></div>'), Ea = F('<div class="content subtitle-content svelte-1lixazt"><!></div>'), Ma = F("<span> </span>"), Sa = F('<div class="content svelte-1lixazt"><div class="text caption-text svelte-1lixazt"></div></div>'), Ta = F('<div class="content svelte-1lixazt"><div class="text svelte-1lixazt"> </div></div>'), Ra = F('<div class="placeholder-lines svelte-1lixazt"><span class="placeholder-line svelte-1lixazt"></span> <span class="placeholder-line short svelte-1lixazt"></span></div>'), Ca = F("<div><div><!></div></div>");
+const Ha = {
+  hash: "svelte-1lixazt",
+  code: `:host {--fortyfour-transcription-font-family: system-ui, sans-serif;--fortyfour-transcription-font-size: 14px;--fortyfour-transcription-color: #64748b;--fortyfour-transcription-active-color: #1e293b;--fortyfour-transcription-active-bg: #fef08a;--fortyfour-transcription-past-color: #1e293b;--fortyfour-transcription-placeholder-color: #e5e7eb;--fortyfour-transcription-fade-color: white;--fortyfour-transcription-scrollbar-thumb: #d1d5db;--fortyfour-transcription-scrollbar-thumb-hover: #9ca3af;--fortyfour-transcription-focus-color: #3b82f6;display:flex;font-family:var(--fortyfour-transcription-font-family);font-size:var(--fortyfour-transcription-font-size);}
+
+  @media (prefers-color-scheme: dark) {:host {--fortyfour-transcription-color: #94a3b8;--fortyfour-transcription-active-color: #fef08a;--fortyfour-transcription-active-bg: #422006;--fortyfour-transcription-past-color: #e2e8f0;--fortyfour-transcription-placeholder-color: #374151;--fortyfour-transcription-scrollbar-thumb: #4b5563;--fortyfour-transcription-scrollbar-thumb-hover: #6b7280;--fortyfour-transcription-focus-color: #60a5fa;}
+  }.wrapper.svelte-1lixazt {position:relative;width:100%;}.wrapper.scrollable.svelte-1lixazt::before,
+  .wrapper.scrollable.svelte-1lixazt::after {content:"";position:absolute;left:0;right:0;height:24px;pointer-events:none;opacity:0;transition:opacity 0.15s ease;}.wrapper.scrollable.svelte-1lixazt::before {top:0;background:linear-gradient(to top, transparent, var(--fortyfour-transcription-fade-color));z-index:1;}.wrapper.scrollable.svelte-1lixazt::after {bottom:0;background:linear-gradient(to bottom, transparent, var(--fortyfour-transcription-fade-color));}.wrapper.can-scroll-up.svelte-1lixazt::before {opacity:1;}.wrapper.can-scroll-down.svelte-1lixazt::after {opacity:1;}.container.svelte-1lixazt {width:100%;}.container.scrollable.svelte-1lixazt {overflow-y:auto;scroll-behavior:smooth;padding-bottom:24px;scrollbar-width:thin;scrollbar-color:var(--fortyfour-transcription-scrollbar-thumb) transparent;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar {width:6px;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar-track {background:transparent;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar-thumb {background-color:var(--fortyfour-transcription-scrollbar-thumb);border-radius:3px;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar-thumb:hover {background-color:var(--fortyfour-transcription-scrollbar-thumb-hover);}.container.scrollable.svelte-1lixazt:focus-visible {outline:2px solid var(--fortyfour-transcription-focus-color);outline-offset:2px;}.content.svelte-1lixazt {width:100%;}.text.svelte-1lixazt {white-space:pre-wrap;word-wrap:break-word;}.caption-text.svelte-1lixazt {white-space:normal;color:var(--fortyfour-transcription-color);}.word.svelte-1lixazt {transition:color 0.15s ease,
+      background-color 0.15s ease;border-radius:2px;padding:0 1px;margin:0 -1px;}.word.active[data-type="word"].svelte-1lixazt {color:var(--fortyfour-transcription-active-color);background-color:var(--fortyfour-transcription-active-bg);}.word.past[data-type="word"].svelte-1lixazt {color:var(--fortyfour-transcription-past-color);}.subtitle-content.svelte-1lixazt {min-height:2em;display:flex;align-items:center;justify-content:center;}.subtitle.svelte-1lixazt {text-align:center;}.placeholder-lines.svelte-1lixazt {display:flex;flex-direction:column;gap:0.5em;}.placeholder-line.svelte-1lixazt {display:block;height:1em;background-color:var(--fortyfour-transcription-placeholder-color);border-radius:4px;}.placeholder-line.short.svelte-1lixazt {width:60%;}`
+};
+function Wa(y, t) {
+  pe(t, !0), be(y, Ha);
+  const g = t.$$host;
+  let i = u(t, "for", 7, ""), o = u(t, "mode", 7, "static"), r = u(t, "maxHeight", 7, 0), a = q(null);
+  const n = W(() => r() > 0);
+  let s = q(!1), _ = q(!1);
+  function f() {
+    if (!e(a) || !e(n)) {
+      m(s, !1), m(_, !1);
+      return;
+    }
+    const { scrollTop: w, scrollHeight: h, clientHeight: p } = e(a);
+    m(s, w > 1), m(_, w + p < h - 1);
+  }
+  let I = q(null), d = q(null), l = q("none"), P = q(0);
+  const b = st(() => e(I) === null, 200), j = W(() => e(I) !== null ? !1 : e(l) === "none" ? !0 : b()), C = W(() => e(d) !== null && e(d).length > 0), B = W(() => !e(C) || o() === "static" ? -1 : e(d).findIndex((w) => e(P) >= w.start && e(P) <= w.end));
+  function A(w) {
+    const h = [];
+    let p = { words: [], start: 0, end: 0 };
+    for (const S of w) {
+      p.words.length === 0 && (p.start = S.start), p.words.push(S), p.end = S.end;
+      const O = S.text.trim();
+      (O.endsWith(".") || O.endsWith("?") || O.endsWith("!")) && (h.push(p), p = { words: [], start: 0, end: 0 });
+    }
+    return p.words.length > 0 && h.push(p), h;
+  }
+  const X = W(() => e(C) ? A(e(d)) : []), R = W(() => o() !== "subtitle" || e(X).length === 0 ? null : e(X).find((w) => e(P) >= w.start && e(P) <= w.end) ?? null);
+  function V(w) {
+    return e(P) >= w.start && e(P) <= w.end;
+  }
+  function k(w) {
+    return e(P) > w.end;
+  }
+  me(() => {
+    if (!i()) {
+      console.warn("fortyfour-transcription: 'for' attribute is required");
+      return;
+    }
+    const h = g.getRootNode().getElementById(i());
+    if (!h) {
+      console.warn(`fortyfour-transcription: element with id "${i()}" not found`);
+      return;
+    }
+    m(l, h.getAttribute("preload") || "none", !0);
+    const p = h.metadata;
+    p && (m(I, p.transcription ?? null, !0), m(d, p.words ?? null, !0)), h.currentTime && m(P, h.currentTime, !0);
+    function S() {
+      const $ = h.metadata;
+      m(I, $?.transcription ?? null, !0), m(d, $?.words ?? null, !0);
+    }
+    function O() {
+      m(P, h.currentTime, !0);
+    }
+    return h.addEventListener("loadedmetadata", S), h.addEventListener("timeupdate", O), () => {
+      h.removeEventListener("loadedmetadata", S), h.removeEventListener("timeupdate", O);
+    };
+  }), Oe(g, "data-placeholder", () => e(j)), me(() => {
+    if (!e(a) || !e(n))
+      return;
+    f(), e(a).addEventListener("scroll", f);
+    const w = new ResizeObserver(f);
+    return w.observe(e(a)), () => {
+      e(a).removeEventListener("scroll", f), w.disconnect();
+    };
+  }), me(() => {
+    if (!e(n) || o() !== "karaoke")
+      return;
+    if (e(P) < 0.1) {
+      e(a)?.scrollTo({ top: 0, behavior: "smooth" });
+      return;
+    }
+    if (e(B) < 0)
+      return;
+    const w = e(a)?.querySelector(".word.active");
+    if (w) {
+      const h = e(a).getBoundingClientRect(), p = w.getBoundingClientRect(), S = e(a).scrollTop + (p.top - h.top) - h.height / 2 + p.height / 2;
+      e(a).scrollTo({ top: S, behavior: "smooth" });
+    }
+  });
+  var D = {
+    get for() {
+      return i();
     },
-    set animate(v = !1) {
-      P(v), n();
+    set for(w = "") {
+      i(w), c();
     },
-    get speed() {
-      return _();
+    get mode() {
+      return o();
     },
-    set speed(v = 20) {
-      _(v), n();
+    set mode(w = "static") {
+      o(w), c();
     },
-    get children() {
+    get maxHeight() {
       return r();
     },
-    set children(v) {
-      r(v), n();
+    set maxHeight(w = 0) {
+      r(w), c();
     }
-  }, 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);
+  }, T = Ca();
+  let L;
+  var M = G(T);
+  let z, v;
+  var E = G(M);
   {
-    var fe = (v) => {
-      De(v, {
-        get progress() {
-          return u();
-        }
-      });
+    var Q = (w) => {
+      var h = La(), p = G(h);
+      Be(p, 21, () => e(d), Ae, (S, O, $) => {
+        var Y = Pa();
+        let ce;
+        var U = G(Y, !0);
+        N(Y), H(
+          (re) => {
+            ce = fe(Y, 1, "word svelte-1lixazt", null, ce, re), Z(Y, "data-type", e(O).type), je(U, e(O).text);
+          },
+          [
+            () => ({
+              active: $ === e(B),
+              past: $ < e(B)
+            })
+          ]
+        ), x(S, Y);
+      }), N(p), N(h), ze(1, h, () => Pe, () => ({ duration: 400 })), x(w, h);
+    }, oe = (w) => {
+      var h = ee(), p = J(h);
+      {
+        var S = ($) => {
+          var Y = Ea(), ce = G(Y);
+          {
+            var U = (re) => {
+              var ne = Ia();
+              Be(ne, 21, () => e(R).words, Ae, (ie, ve) => {
+                var de = ja();
+                let ae;
+                var he = G(de, !0);
+                N(de), H(
+                  (le) => {
+                    ae = fe(de, 1, "word svelte-1lixazt", null, ae, le), Z(de, "data-type", e(ve).type), je(he, e(ve).text);
+                  },
+                  [
+                    () => ({
+                      active: V(e(ve)),
+                      past: k(e(ve))
+                    })
+                  ]
+                ), x(ie, de);
+              }), N(ne), ze(1, ne, () => Pe, () => ({ duration: 200 })), x(re, ne);
+            };
+            K(ce, (re) => {
+              e(R) && re(U);
+            });
+          }
+          N(Y), x($, Y);
+        }, O = ($) => {
+          var Y = ee(), ce = J(Y);
+          {
+            var U = (ne) => {
+              var ie = Sa(), ve = G(ie);
+              Be(ve, 21, () => e(d), Ae, (de, ae, he) => {
+                var le = ee(), se = J(le);
+                {
+                  var xe = (_e) => {
+                    var we = Ma();
+                    let ke;
+                    var Se = G(we, !0);
+                    N(we), H(
+                      (He) => {
+                        ke = fe(we, 1, "word svelte-1lixazt", null, ke, He), Z(we, "data-type", e(ae).type), je(Se, e(ae).text);
+                      },
+                      [() => ({ active: he === e(B) })]
+                    ), ze(1, we, () => Pe, () => ({ duration: 150 })), x(_e, we);
+                  };
+                  K(se, (_e) => {
+                    e(P) >= e(ae).start && _e(xe);
+                  });
+                }
+                x(de, le);
+              }), N(ve), N(ie), ze(1, ie, () => Pe, () => ({ duration: 400 })), x(ne, ie);
+            }, re = (ne) => {
+              var ie = ee(), ve = J(ie);
+              {
+                var de = (he) => {
+                  var le = Ta(), se = G(le), xe = G(se, !0);
+                  N(se), N(le), H(() => je(xe, e(I))), ze(1, le, () => Pe, () => ({ duration: 400 })), x(he, le);
+                }, ae = (he) => {
+                  var le = ee(), se = J(le);
+                  {
+                    var xe = (_e) => {
+                      var we = Ra();
+                      let ke;
+                      H((Se) => ke = Le(we, "", ke, Se), [
+                        () => ({ height: e(n) ? `${r()}px` : void 0 })
+                      ]), x(_e, we);
+                    };
+                    K(
+                      se,
+                      (_e) => {
+                        e(j) && _e(xe);
+                      },
+                      !0
+                    );
+                  }
+                  x(he, le);
+                };
+                K(
+                  ve,
+                  (he) => {
+                    e(I) ? he(de) : he(ae, !1);
+                  },
+                  !0
+                );
+              }
+              x(ne, ie);
+            };
+            K(
+              ce,
+              (ne) => {
+                o() === "progressive" && e(C) ? ne(U) : ne(re, !1);
+              },
+              !0
+            );
+          }
+          x($, Y);
+        };
+        K(
+          p,
+          ($) => {
+            o() === "subtitle" && e(C) ? $(S) : $(O, !1);
+          },
+          !0
+        );
+      }
+      x(w, h);
     };
-    q(G, (v) => {
-      o() === "ring" && v(fe);
+    K(E, (w) => {
+      o() === "karaoke" && e(C) ? w(Q) : w(oe, !1);
     });
   }
-  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);
+  return N(M), Ee(M, (w) => m(a, w), () => e(a)), N(T), H(
+    (w, h, p) => {
+      L = fe(T, 1, "wrapper svelte-1lixazt", null, L, w), z = fe(M, 1, "container svelte-1lixazt", null, z, h), v = Le(M, "", v, p);
     },
     [
-      () => ({ "border-radius": y }),
-      () => ({ "has-ring": o() === "ring" }),
-      () => ({ "border-radius": y })
+      () => ({
+        scrollable: e(n),
+        "can-scroll-up": e(s),
+        "can-scroll-down": e(_)
+      }),
+      () => ({ scrollable: e(n) }),
+      () => ({
+        "max-height": e(n) ? `${r()}px` : void 0
+      })
     ]
-  ), g(c, T), re($);
+  ), x(y, T), ge(D);
 }
-Be(["click"]);
-W(
-  $e,
+customElements.define("fortyfour-transcription", ue(
+  Wa,
   {
-    onclick: {},
-    disabled: {},
-    loading: {},
-    visualization: {},
-    progressPercent: {},
-    isPlaying: {},
-    amplitude: {},
-    rippleIntensity: {},
-    ariaLabel: {},
-    animate: {},
-    speed: {},
-    children: {}
+    for: { attribute: "for", reflect: !0 },
+    mode: { attribute: "mode", reflect: !0 },
+    maxHeight: { attribute: "max-height", reflect: !0, type: "Number" }
   },
   [],
   [],
   !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;
+));
+var Ba = F('<div class="content svelte-z1j7sg"><div class="text svelte-z1j7sg"> </div></div>'), Aa = F('<div class="placeholder-lines svelte-z1j7sg"><span class="placeholder-line svelte-z1j7sg"></span> <span class="placeholder-line short svelte-z1j7sg"></span></div>'), qa = F("<div><div><!></div></div>");
+const Na = {
+  hash: "svelte-z1j7sg",
+  code: `:host {--fortyfour-translation-font-family: system-ui, sans-serif;--fortyfour-translation-font-size: 14px;--fortyfour-translation-placeholder-color: #e5e7eb;--fortyfour-translation-fade-color: white;--fortyfour-translation-scrollbar-thumb: #d1d5db;--fortyfour-translation-scrollbar-thumb-hover: #9ca3af;--fortyfour-translation-focus-color: #3b82f6;display:flex;font-family:var(--fortyfour-translation-font-family);font-size:var(--fortyfour-translation-font-size);}
+
+  @media (prefers-color-scheme: dark) {:host {--fortyfour-translation-placeholder-color: #374151;--fortyfour-translation-scrollbar-thumb: #4b5563;--fortyfour-translation-scrollbar-thumb-hover: #6b7280;--fortyfour-translation-focus-color: #60a5fa;}
+  }.wrapper.svelte-z1j7sg {position:relative;width:100%;}.wrapper.scrollable.svelte-z1j7sg::before,
+  .wrapper.scrollable.svelte-z1j7sg::after {content:"";position:absolute;left:0;right:0;height:24px;pointer-events:none;opacity:0;transition:opacity 0.15s ease;}.wrapper.scrollable.svelte-z1j7sg::before {top:0;background:linear-gradient(to top, transparent, var(--fortyfour-translation-fade-color));z-index:1;}.wrapper.scrollable.svelte-z1j7sg::after {bottom:0;background:linear-gradient(to bottom, transparent, var(--fortyfour-translation-fade-color));}.wrapper.can-scroll-up.svelte-z1j7sg::before {opacity:1;}.wrapper.can-scroll-down.svelte-z1j7sg::after {opacity:1;}.container.svelte-z1j7sg {width:100%;}.container.scrollable.svelte-z1j7sg {overflow-y:auto;scroll-behavior:smooth;padding-bottom:24px;scrollbar-width:thin;scrollbar-color:var(--fortyfour-translation-scrollbar-thumb) transparent;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar {width:6px;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar-track {background:transparent;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar-thumb {background-color:var(--fortyfour-translation-scrollbar-thumb);border-radius:3px;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar-thumb:hover {background-color:var(--fortyfour-translation-scrollbar-thumb-hover);}.container.scrollable.svelte-z1j7sg:focus-visible {outline:2px solid var(--fortyfour-translation-focus-color);outline-offset:2px;}.content.svelte-z1j7sg {width:100%;}.text.svelte-z1j7sg {white-space:pre-wrap;word-wrap:break-word;}.placeholder-lines.svelte-z1j7sg {display:flex;flex-direction:column;gap:0.5em;}.placeholder-line.svelte-z1j7sg {display:block;height:1em;background-color:var(--fortyfour-translation-placeholder-color);border-radius:4px;}.placeholder-line.short.svelte-z1j7sg {width:60%;}`
+};
+function Da(y, t) {
+  pe(t, !0), be(y, Na);
+  const g = t.$$host;
+  let i = u(t, "for", 7, ""), o = u(t, "maxHeight", 7, 0), r = q(null);
+  const a = W(() => o() > 0);
+  let n = q(!1), s = q(!1);
+  function _() {
+    if (!e(r) || !e(a)) {
+      m(n, !1), m(s, !1);
+      return;
     }
-    circle:nth-child(2) {
-      animation-delay: 0.2s;
+    const { scrollTop: T, scrollHeight: L, clientHeight: M } = e(r);
+    m(n, T > 1), m(s, T + M < L - 1);
+  }
+  let f = q(null), I = q("none");
+  function d(T) {
+    if (!T)
+      return T;
+    const L = document.createElement("textarea");
+    return L.innerHTML = T, L.value;
+  }
+  const l = W(() => d(e(f))), P = st(() => e(f) === null, 200), b = W(() => e(f) !== null ? !1 : e(I) === "none" ? !0 : P());
+  me(() => {
+    if (!i()) {
+      console.warn("fortyfour-translation: 'for' attribute is required");
+      return;
     }
-    circle:nth-child(3) {
-      animation-delay: 0.4s;
+    const L = g.getRootNode().getElementById(i());
+    if (!L) {
+      console.warn(`fortyfour-translation: element with id "${i()}" not found`);
+      return;
     }
-    @keyframes fade {
-      0%,
-      100% {
-        opacity: 0.2;
-      }
-      50% {
-        opacity: 1;
-      }
+    m(I, L.getAttribute("preload") || "none", !0);
+    const M = L.metadata;
+    M && m(f, M.translation ?? null, !0);
+    function z() {
+      const v = L.metadata;
+      m(f, v?.translation ?? null, !0);
     }
-    @media (prefers-reduced-motion: reduce) {
-      circle {
-        animation: none;
-        opacity: 0.6;
+    return L.addEventListener("loadedmetadata", z), () => {
+      L.removeEventListener("loadedmetadata", z);
+    };
+  }), Oe(g, "data-placeholder", () => e(b)), me(() => {
+    if (!e(r) || !e(a))
+      return;
+    _(), e(r).addEventListener("scroll", _);
+    const T = new ResizeObserver(_);
+    return T.observe(e(r)), () => {
+      e(r).removeEventListener("scroll", _), T.disconnect();
+    };
+  });
+  var j = {
+    get for() {
+      return i();
+    },
+    set for(T = "") {
+      i(T), c();
+    },
+    get maxHeight() {
+      return o();
+    },
+    set maxHeight(T = 0) {
+      o(T), c();
+    }
+  }, C = qa();
+  let B;
+  var A = G(C);
+  let X, R;
+  var V = G(A);
+  {
+    var k = (T) => {
+      var L = Ba(), M = G(L), z = G(M, !0);
+      N(M), N(L), H(() => je(z, e(l))), ze(1, L, () => Pe, () => ({ duration: 400 })), x(T, L);
+    }, D = (T) => {
+      var L = ee(), M = J(L);
+      {
+        var z = (v) => {
+          var E = Aa();
+          let Q;
+          H((oe) => Q = Le(E, "", Q, oe), [
+            () => ({ height: e(a) ? `${o()}px` : void 0 })
+          ]), x(v, E);
+        };
+        K(
+          M,
+          (v) => {
+            e(b) && v(z);
+          },
+          !0
+        );
       }
-    }</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);
+      x(T, L);
+    };
+    K(V, (T) => {
+      e(l) ? T(k) : T(D, !1);
+    });
+  }
+  return N(A), Ee(A, (T) => m(r, T), () => e(r)), N(C), H(
+    (T, L, M) => {
+      B = fe(C, 1, "wrapper svelte-z1j7sg", null, B, T), X = fe(A, 1, "container svelte-z1j7sg", null, X, L), R = Le(A, "", R, M);
+    },
+    [
+      () => ({
+        scrollable: e(a),
+        "can-scroll-up": e(n),
+        "can-scroll-down": e(s)
+      }),
+      () => ({ scrollable: e(a) }),
+      () => ({
+        "max-height": e(a) ? `${o()}px` : void 0
+      })
+    ]
+  ), x(y, C), ge(j);
 }
-function Le(c, e, d) {
-  ae(() => {
-    d() ? c.setAttribute(e, "") : c.removeAttribute(e);
-  });
+customElements.define("fortyfour-translation", ue(
+  Da,
+  {
+    for: { attribute: "for", reflect: !0 },
+    maxHeight: { attribute: "max-height", reflect: !0, type: "Number" }
+  },
+  [],
+  [],
+  !0
+));
+var Oa = Me('<svg viewBox="0 0 359 254" aria-label="44" fill="currentColor"><path d="M92,300 C92.2666667,290.933333 92.8,280.533333 93.6,268.8 C93.8666667,262.666667 94,258.4 94,256 L6,256 L6,161.2 C7.33333333,159.333333 9.2,156.533333 11.6,152.8 C27.0666667,129.866667 39.3333333,110.733333 48.4,95.4 C57.4666667,80.0666667 65.2,63.8666667 71.6,46.8 L186,46.8 C128.4,122.533333 85.8666667,187.066667 58.4,240.4 L94,240.4 C94,240.133333 94,239.6 94,238.8 C93.4666667,228.666667 92.8,219.6 92,211.6 L185.2,72.4 C181.733333,91.0666667 180,127.333333 180,181.2 C180,235.066667 181.733333,274.666667 185.2,300 L92,300 Z" transform="translate(-6, -46)"></path><path d="M271,300 C271.266667,290.933333 271.8,280.533333 272.6,268.8 C272.866667,262.666667 273,258.4 273,256 L185,256 L185,161.2 C186.333333,159.333333 188.2,156.533333 190.6,152.8 C206.066667,129.866667 218.333333,110.733333 227.4,95.4 C236.466667,80.0666667 244.2,63.8666667 250.6,46.8 L365,46.8 C307.4,122.533333 264.866667,187.066667 237.4,240.4 L273,240.4 C273,240.133333 273,239.6 273,238.8 C272.466667,228.666667 271.8,219.6 271,211.6 L364.2,72.4 C360.733333,91.0666667 359,127.333333 359,181.2 C359,235.066667 360.733333,274.666667 364.2,300 L271,300 Z" transform="translate(-6, -46)"></path></svg>');
+function Ct(y, t) {
+  pe(t, !0);
+  let g = u(t, "class", 7, ""), i = u(t, "height", 7, "1em"), o = u(t, "width", 7, "auto");
+  var r = {
+    get class() {
+      return g();
+    },
+    set class(n = "") {
+      g(n), c();
+    },
+    get height() {
+      return i();
+    },
+    set height(n = "1em") {
+      i(n), c();
+    },
+    get width() {
+      return o();
+    },
+    set width(n = "auto") {
+      o(n), c();
+    }
+  }, a = Oa();
+  return H(() => {
+    fe(a, 0, nt(g())), Z(a, "height", i()), Z(a, "width", o());
+  }), x(y, a), ge(r);
 }
-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));}
+ue(Ct, { class: {}, height: {}, width: {} }, [], [], !0);
+var Ua = F("<fortyfour-progress-bar></fortyfour-progress-bar>", 2), Fa = F("<fortyfour-line-waveform></fortyfour-line-waveform>", 2), Ga = F("<fortyfour-bar-waveform></fortyfour-bar-waveform>", 2), Ka = (y, t) => m(t, !e(t)), Va = F('<span class="label-separator svelte-1duyr35">•</span> <button class="translation-toggle svelte-1duyr35"> </button>', 1), Xa = F("<fortyfour-translation></fortyfour-translation>", 2), Ya = F("<fortyfour-transcription></fortyfour-transcription>", 2), Za = F('<div class="transcription-box svelte-1duyr35"><div class="transcription-header svelte-1duyr35"><span class="transcription-label svelte-1duyr35">TRANSCRIPT</span> <!></div> <!></div>'), Ja = F('<a class="branding svelte-1duyr35" href="https://44.audio" target="_blank" rel="noopener noreferrer"><span class="branding-text svelte-1duyr35">powered by</span> <!></a>'), Qa = F('<fortyfour-recording></fortyfour-recording> <div><div class="player svelte-1duyr35"><fortyfour-play-button></fortyfour-play-button> <!> <div class="duration svelte-1duyr35"><fortyfour-duration><span slot="placeholder">0:00</span></fortyfour-duration> <span class="separator svelte-1duyr35">/</span> <fortyfour-duration><span slot="placeholder">0:00</span></fortyfour-duration></div></div> <!></div> <!>', 3);
+const $a = {
+  hash: "svelte-1duyr35",
+  code: `:host {--fortyfour-player-font-family: system-ui, sans-serif;--fortyfour-player-font-size: 14px;--fortyfour-player-accent: #c4956a;--fortyfour-player-background: #faf8f5;--fortyfour-player-surface: #f0ede8;--fortyfour-player-text: #2c2620;--fortyfour-player-muted: #8c8279;--fortyfour-player-border: #d9d4cc;display:block;font-family:var(--fortyfour-player-font-family);font-size:var(--fortyfour-player-font-size);}
 
-  @media (prefers-reduced-motion: reduce) {:host([hover="scale"]),
-    :host([hover="glow"]),
-    :host([hover="lift"]) {transition:none;}
-  }`
+  @media (prefers-color-scheme: dark) {:host {--fortyfour-player-accent: #d4a574;--fortyfour-player-background: #1c1917;--fortyfour-player-surface: #262220;--fortyfour-player-text: #e7e0d5;--fortyfour-player-muted: #9c938a;--fortyfour-player-border: #3d3632;}
+  }.container.svelte-1duyr35 {border:1px solid var(--fortyfour-player-border);border-radius:12px;background:var(--fortyfour-player-background);overflow:hidden;}.container.square.svelte-1duyr35 {border-radius:0;}.container.compact.svelte-1duyr35 .player:where(.svelte-1duyr35) {height:44px;padding:0.5rem 0.75rem;gap:0.75rem;}.container.compact.svelte-1duyr35 .transcription-box:where(.svelte-1duyr35) {padding:0.5rem 0.75rem;}.container.compact.svelte-1duyr35 fortyfour-play-button:where(.svelte-1duyr35) {--fortyfour-play-button-size: 40px;}.container.comfortable.svelte-1duyr35 .player:where(.svelte-1duyr35) {height:68px;padding:1rem 1.25rem;gap:1.25rem;}.container.comfortable.svelte-1duyr35 .transcription-box:where(.svelte-1duyr35) {padding:1rem 1.25rem;}.container.comfortable.svelte-1duyr35 fortyfour-play-button:where(.svelte-1duyr35) {--fortyfour-play-button-size: 56px;}.player.svelte-1duyr35 {display:flex;align-items:center;gap:1rem;height:56px;padding:0.75rem 1rem;}fortyfour-play-button.svelte-1duyr35 {--fortyfour-play-button-size: 48px;--fortyfour-play-button-background-color: var(--fortyfour-player-accent);--fortyfour-play-button-icon-color: var(--fortyfour-player-background);--fortyfour-play-button-border-width: 0;--fortyfour-play-button-focus-color: var(--fortyfour-player-accent);flex-shrink:0;}fortyfour-bar-waveform.svelte-1duyr35,
+  fortyfour-line-waveform.svelte-1duyr35,
+  fortyfour-progress-bar.svelte-1duyr35 {height:100%;flex:1;}fortyfour-bar-waveform.svelte-1duyr35 {--waveform-progress-color: var(--fortyfour-player-accent);--waveform-track-color: var(--fortyfour-player-border);--waveform-focus-color: var(--fortyfour-player-accent);}fortyfour-line-waveform.svelte-1duyr35 {--fortyfour-line-waveform-progress-color: var(--fortyfour-player-accent);--fortyfour-line-waveform-track-color: var(--fortyfour-player-border);--fortyfour-line-waveform-focus-color: var(--fortyfour-player-accent);}fortyfour-progress-bar.svelte-1duyr35 {--fortyfour-progress-bar-progress-color: var(--fortyfour-player-accent);--fortyfour-progress-bar-track-color: var(--fortyfour-player-border);--fortyfour-progress-bar-focus-color: var(--fortyfour-player-accent);}.duration.svelte-1duyr35 {display:flex;align-items:center;gap:0.25rem;flex-shrink:0;}.elapsed.svelte-1duyr35 {--fortyfour-duration-font-family: var(--fortyfour-player-font-family);--fortyfour-duration-font-size: 1em;--fortyfour-duration-color: var(--fortyfour-player-text);font-weight:500;}.separator.svelte-1duyr35 {font-size:1em;color:var(--fortyfour-player-muted);}.total.svelte-1duyr35 {--fortyfour-duration-font-family: var(--fortyfour-player-font-family);--fortyfour-duration-font-size: 1em;--fortyfour-duration-color: var(--fortyfour-player-muted);}.transcription-box.svelte-1duyr35 {background:var(--fortyfour-player-surface);padding:0.75rem 1rem;border-top:1px solid var(--fortyfour-player-border);}.transcription-header.svelte-1duyr35 {display:flex;align-items:center;gap:0.5em;margin-bottom:0.5rem;}.transcription-label.svelte-1duyr35 {font-size:0.7em;font-weight:600;letter-spacing:0.05em;color:var(--fortyfour-player-muted);}.label-separator.svelte-1duyr35 {font-size:0.7em;color:var(--fortyfour-player-muted);}.translation-toggle.svelte-1duyr35 {font-size:0.7em;font-weight:600;letter-spacing:0.05em;color:var(--fortyfour-player-accent);background:none;border:none;padding:0;cursor:pointer;}.translation-toggle.svelte-1duyr35:hover {text-decoration:underline;}.translation-toggle.svelte-1duyr35:focus-visible {outline:2px solid var(--fortyfour-player-accent);outline-offset:2px;border-radius:2px;}fortyfour-transcription.svelte-1duyr35,
+  fortyfour-translation.svelte-1duyr35 {display:block;line-height:1.5;color:var(--fortyfour-player-text);--fortyfour-transcription-font-family: var(--fortyfour-player-font-family);--fortyfour-transcription-font-size: 1em;--fortyfour-translation-font-family: var(--fortyfour-player-font-family);--fortyfour-translation-font-size: 1em;--fortyfour-transcription-color: var(--fortyfour-player-muted);--fortyfour-transcription-active-color: var(--fortyfour-player-background);--fortyfour-transcription-active-bg: var(--fortyfour-player-accent);--fortyfour-transcription-past-color: var(--fortyfour-player-text);--fortyfour-transcription-fade-color: var(--fortyfour-player-surface);--fortyfour-transcription-placeholder-color: var(--fortyfour-player-border);--fortyfour-transcription-scrollbar-thumb: var(--fortyfour-player-border);--fortyfour-transcription-scrollbar-thumb-hover: var(--fortyfour-player-muted);--fortyfour-transcription-focus-color: var(--fortyfour-player-accent);--fortyfour-translation-fade-color: var(--fortyfour-player-surface);--fortyfour-translation-placeholder-color: var(--fortyfour-player-border);--fortyfour-translation-scrollbar-thumb: var(--fortyfour-player-border);--fortyfour-translation-scrollbar-thumb-hover: var(--fortyfour-player-muted);--fortyfour-translation-focus-color: var(--fortyfour-player-accent);}.branding.svelte-1duyr35 {display:flex;align-items:center;gap:0.3em;width:fit-content;margin-left:auto;margin-top:0.5rem;margin-right:1rem;text-decoration:none;color:var(--fortyfour-player-muted);border-radius:4px;white-space:nowrap;}.branding.svelte-1duyr35:focus-visible {outline:2px solid var(--fortyfour-player-accent);outline-offset:2px;}.branding-text.svelte-1duyr35 {font-size:0.7em;font-weight:400;letter-spacing:0.01em;}`
 };
-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 eo(y, t) {
+  pe(t, !0), be(y, $a);
+  const g = t.$$host;
+  let i = u(t, "recordingId", 7), o = u(t, "apiHost", 7, "api.44.audio"), r = u(t, "shape", 7, "rounded"), a = u(t, "preload", 7, "none"), n = u(t, "spacing", 7, "default"), s = u(t, "progress", 7, "bar-waveform"), _ = u(t, "hideTranscript", 7, !1), f = u(t, "hideTranslation", 7, !1), I = u(t, "hideBranding", 7, !1);
+  const d = `fortyfour-player-${crypto.randomUUID().slice(0, 8)}`;
+  let l = q(null), P = q(!1), b = q(!1);
+  const j = W(() => r() === "square"), C = W(() => e(j) ? "square" : "circle"), B = W(() => e(j) ? "0" : "2"), A = W(() => s() || "bar-waveform"), X = W(() => n() === "compact" ? 28 : n() === "comfortable" ? 48 : 40), R = W(() => n() === "compact" ? 4 : n() === "comfortable" ? 8 : 6);
+  function V() {
+    const U = e(l)?.state ?? "idle";
+    g.setAttribute("data-state", U);
   }
-  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 }));
+  function k() {
+    const U = e(l)?.metadata?.translation;
+    m(P, U != null && U !== "", !0);
   }
-  Le(l, "data-playing", () => t(R) === "playing"), Le(l, "data-loading", $), Le(l, "data-error", () => t(f));
-  var v = {
-    get apiHost() {
-      return s();
+  me(() => {
+    e(l) && (V(), k());
+  });
+  var D = {
+    get recordingId() {
+      return i();
     },
-    set apiHost(p = "api.44.audio") {
-      s(p), n();
+    set recordingId(U) {
+      i(U), c();
     },
-    get recordingId() {
+    get apiHost() {
       return o();
     },
-    set recordingId(p) {
-      o(p), n();
+    set apiHost(U = "api.44.audio") {
+      o(U), c();
     },
-    get visualization() {
-      return u();
+    get shape() {
+      return r();
     },
-    set visualization(p = "none") {
-      u(p), n();
+    set shape(U = "rounded") {
+      r(U), c();
     },
-    get rippleIntensity() {
-      return m();
+    get preload() {
+      return a();
     },
-    set rippleIntensity(p = 1) {
-      m(p), n();
+    set preload(U = "none") {
+      a(U), c();
     },
-    get hover() {
-      return k();
+    get spacing() {
+      return n();
     },
-    set hover(p = "none") {
-      k(p), n();
+    set spacing(U = "default") {
+      n(U), c();
     },
-    get preload() {
-      return h();
+    get progress() {
+      return s();
     },
-    set preload(p = "none") {
-      h(p), n();
+    set progress(U = "bar-waveform") {
+      s(U), c();
     },
-    get shape() {
-      return b();
+    get hideTranscript() {
+      return _();
     },
-    set shape(p = "circle") {
-      b(p), n();
+    set hideTranscript(U = !1) {
+      _(U), c();
     },
-    get blobAnimate() {
-      return P();
+    get hideTranslation() {
+      return f();
     },
-    set blobAnimate(p = !1) {
-      P(p), n();
+    set hideTranslation(U = !1) {
+      f(U), c();
     },
-    get blobSpeed() {
-      return _();
+    get hideBranding() {
+      return I();
     },
-    set blobSpeed(p = 20) {
-      _(p), n();
+    set hideBranding(U = !1) {
+      I(U), c();
     }
-  }, 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);
+  }, T = Qa(), L = J(T);
+  H(() => te(L, "id", d)), H(() => te(L, "api-host", o())), H(() => te(L, "recording-id", i())), H(() => te(L, "preload", a())), Ee(L, (U) => m(l, U), () => e(l));
+  var M = ye(L, 2);
+  let z;
+  var v = G(M), E = G(v);
+  H(() => te(E, "for", d)), H(() => te(E, "shape", e(C))), fe(E, 1, "svelte-1duyr35");
+  var Q = ye(E, 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);
+    var oe = (U) => {
+      var re = Ua();
+      H(() => te(re, "for", d)), H(() => te(re, "bar-height", e(R))), H(() => te(re, "bar-radius", e(B))), fe(re, 1, "svelte-1duyr35"), x(U, re);
+    }, w = (U) => {
+      var re = ee(), ne = J(re);
+      {
+        var ie = (de) => {
+          var ae = Fa();
+          H(() => te(ae, "for", d)), te(ae, "line-width", "2"), H(() => te(ae, "height", e(X))), H(() => te(ae, "sharp", e(j))), fe(ae, 1, "svelte-1duyr35"), x(de, ae);
+        }, ve = (de) => {
+          var ae = Ga();
+          H(() => te(ae, "for", d)), te(ae, "bar-width", "4"), te(ae, "bar-gap", "2"), H(() => te(ae, "bar-radius", e(B))), H(() => te(ae, "height", e(X))), fe(ae, 1, "svelte-1duyr35"), x(de, ae);
+        };
+        K(
+          ne,
+          (de) => {
+            e(A) === "line-waveform" ? de(ie) : de(ve, !1);
+          },
+          !0
+        );
+      }
+      x(U, re);
     };
-    q(ne, (p) => {
-      t(M) && p(ge);
+    K(Q, (U) => {
+      e(A) === "progress-bar" ? U(oe) : U(w, !1);
     });
   }
-  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 h = ye(Q, 2), p = G(h);
+  fe(p, 1, "elapsed svelte-1duyr35"), H(() => te(p, "for", d)), te(p, "format", "elapsed");
+  var S = ye(p, 4);
+  fe(S, 1, "total svelte-1duyr35"), H(() => te(S, "for", d)), te(S, "format", "total"), N(h), N(v);
+  var O = ye(v, 2);
   {
-    var f = (y) => {
-      var z = rr(), R = j(z);
+    var $ = (U) => {
+      var re = Za(), ne = G(re), ie = ye(G(ne), 2);
       {
-        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);
+        var ve = (le) => {
+          var se = Va(), xe = ye(J(se), 2);
+          xe.__click = [Ka, b];
+          var _e = G(xe, !0);
+          N(xe), H(() => je(_e, e(b) ? "ORIGINAL" : "TRANSLATION")), x(le, se);
         };
-        q(R, (T) => {
-          t(u) !== 0 ? T(B) : T($, !1);
+        K(ie, (le) => {
+          e(P) && !f() && le(ve);
         });
       }
-      D(z), g(y, z);
-    }, L = (y) => {
-      var z = nr(), R = j(z);
+      N(ne);
+      var de = ye(ne, 2);
       {
-        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);
+        var ae = (le) => {
+          var se = Xa();
+          H(() => te(se, "for", d)), te(se, "max-height", "96"), fe(se, 1, "svelte-1duyr35"), x(le, se);
+        }, he = (le) => {
+          var se = Ya();
+          H(() => te(se, "for", d)), te(se, "mode", "karaoke"), te(se, "max-height", "96"), fe(se, 1, "svelte-1duyr35"), x(le, se);
         };
-        q(R, (T) => {
-          t(u) !== 0 ? T(B) : T($, !1);
+        K(de, (le) => {
+          e(b) && !f() ? le(ae) : le(he, !1);
         });
       }
-      D(z), g(y, z);
+      N(re), x(U, re);
+    };
+    K(O, (U) => {
+      _() || U($);
+    });
+  }
+  N(M);
+  var Y = ye(M, 2);
+  {
+    var ce = (U) => {
+      var re = Ja(), ne = ye(G(re), 2);
+      Ct(ne, { class: "branding-logo", height: "0.65em" }), N(re), x(U, re);
     };
-    q(w, (y) => {
-      l() === "elapsed/total" ? y(f) : y(L, !1);
+    K(Y, (U) => {
+      I() || U(ce);
     });
   }
-  return g(c, S), re(r);
+  return H((U) => z = fe(M, 1, "container svelte-1duyr35", null, z, U), [
+    () => ({
+      square: e(j),
+      compact: n() === "compact",
+      comfortable: n() === "comfortable"
+    })
+  ]), Ie("loadedmetadata", L, () => {
+    V(), k();
+  }), Ie("play", L, V), Ie("pause", L, V), Ie("error", L, V), Ie("ended", L, V), x(y, T), ge(D);
+}
+Ne(["click"]);
+customElements.define("fortyfour-player", ue(
+  eo,
+  {
+    apiHost: { attribute: "api-host", reflect: !0 },
+    recordingId: { attribute: "recording-id", reflect: !0 },
+    shape: { attribute: "shape", reflect: !0 },
+    preload: { attribute: "preload", reflect: !0 },
+    spacing: { attribute: "spacing", reflect: !0 },
+    progress: { attribute: "progress", reflect: !0 },
+    hideTranscript: { attribute: "hide-transcript", reflect: !0, type: "Boolean" },
+    hideTranslation: {
+      attribute: "hide-translation",
+      reflect: !0,
+      type: "Boolean"
+    },
+    hideBranding: { attribute: "hide-branding", reflect: !0, type: "Boolean" }
+  },
+  [],
+  [],
+  !0
+));
+var to = F("<fortyfour-recording></fortyfour-recording> <fortyfour-play-button></fortyfour-play-button>", 3);
+const ro = {
+  hash: "svelte-1i43bu9",
+  code: `:host {--fortyfour-mini-player-accent: #c4956a;--fortyfour-mini-player-background: #faf8f5;display:inline-block;}
+
+  @media (prefers-color-scheme: dark) {:host {--fortyfour-mini-player-accent: #d4a574;--fortyfour-mini-player-background: #1c1917;}
+  }fortyfour-play-button.svelte-1i43bu9 {--fortyfour-play-button-size: 48px;--fortyfour-play-button-background-color: var(--fortyfour-mini-player-background);--fortyfour-play-button-icon-color: var(--fortyfour-mini-player-accent);--fortyfour-play-button-border-width: 0;--fortyfour-play-button-ring-width: 3px;--fortyfour-play-button-ring-fill-color: var(--fortyfour-mini-player-accent);--fortyfour-play-button-ring-track-color: var(--fortyfour-mini-player-background);--fortyfour-play-button-focus-color: var(--fortyfour-mini-player-accent);}fortyfour-play-button.small.svelte-1i43bu9 {--fortyfour-play-button-size: 32px;--fortyfour-play-button-ring-width: 2px;}fortyfour-play-button.large.svelte-1i43bu9 {--fortyfour-play-button-size: 64px;--fortyfour-play-button-ring-width: 4px;}`
+};
+function ao(y, t) {
+  pe(t, !0), be(y, ro);
+  const g = t.$$host;
+  let i = u(t, "recordingId", 7), o = u(t, "apiHost", 7, "api.44.audio"), r = u(t, "size", 7, "medium"), a = u(t, "preload", 7, "none");
+  const n = `fortyfour-mini-player-${crypto.randomUUID().slice(0, 8)}`;
+  let s = q(null);
+  function _() {
+    const b = e(s)?.state ?? "idle";
+    g.setAttribute("data-state", b);
+  }
+  me(() => {
+    e(s) && _();
+  });
+  var f = {
+    get recordingId() {
+      return i();
+    },
+    set recordingId(b) {
+      i(b), c();
+    },
+    get apiHost() {
+      return o();
+    },
+    set apiHost(b = "api.44.audio") {
+      o(b), c();
+    },
+    get size() {
+      return r();
+    },
+    set size(b = "medium") {
+      r(b), c();
+    },
+    get preload() {
+      return a();
+    },
+    set preload(b = "none") {
+      a(b), c();
+    }
+  }, I = to(), d = J(I);
+  H(() => te(d, "id", n)), H(() => te(d, "api-host", o())), H(() => te(d, "recording-id", i())), H(() => te(d, "preload", a())), Ee(d, (b) => m(s, b), () => e(s));
+  var l = ye(d, 2);
+  let P;
+  return H(() => te(l, "for", n)), te(l, "shape", "circle"), te(l, "visualization", "ring"), H((b) => P = fe(l, 1, "button svelte-1i43bu9", null, P, b), [
+    () => ({ small: r() === "small", large: r() === "large" })
+  ]), Ie("loadedmetadata", d, _), Ie("play", d, _), Ie("pause", d, _), Ie("error", d, _), Ie("ended", d, _), x(y, I), ge(f);
 }
-customElements.define("fortyfour-player-duration", W(lr, { format: { attribute: "format" }, for: { attribute: "for" } }, ["separator", "placeholder"], [], !0));
+customElements.define("fortyfour-mini-player", ue(
+  ao,
+  {
+    apiHost: { attribute: "api-host", reflect: !0 },
+    recordingId: { attribute: "recording-id", reflect: !0 },
+    size: { attribute: "size", reflect: !0 },
+    preload: { attribute: "preload", reflect: !0 }
+  },
+  [],
+  [],
+  !0
+));