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

package/dist/player.es.js

@@ -1,129 +1,129 @@
-import { b as Ke, E as or, a as Xe, d as wr, n as xr, h as Se, c as Ze, e as ar, i as zr, f as kr, s as _r, g as nr, j as Fe, k as ir, U as Pr, p as lr, l as ue, m as ge, o as d, u as de, q as e, r as q, t as Lr, v as se, w as re, x as z, y as ye, z as m, A as er, B as S, C as v, D as J, F as K, G as Pe, H as M, I as W, J as he, K as we, L as G, M as D, N as rr, O as Ee, P as qe, Q as me, R as We, S as pe, T as He, V as ie, W as Er, X as Le, Y as Ir, Z as sr, _ as Be, $ as ur, a0 as Ne, a1 as Ce, a2 as Re, a3 as Z } from "./index-DCaqXYMO.js";
-function Ae(g, r, ...c) {
-  var n = g, a = xr, o;
+import { b as Ke, E as ot, a as Xe, d as wt, n as xt, h as qe, c as Ze, e as at, i as kt, f as _t, s as zt, g as nt, j as Fe, k as it, U as Pt, p as lt, l as ue, m as ge, o as d, u as de, q as e, r as S, t as Lt, v as se, w as te, x as k, y as ye, z as m, A as et, B as q, C as v, D as J, F as X, G as Pe, H as M, I as W, J as he, K as we, L as K, M as D, N as tt, O as Ee, P as Se, Q as me, R as We, S as pe, T as He, V as ie, W as Et, X as Le, Y as It, Z as st, _ as Be, $ as ut, a0 as Ne, a1 as Ce, a2 as Re, a3 as Z } from "./index-DCaqXYMO.js";
+function Ae(g, t, ...u) {
+  var a = g, n = xt, o;
   Ke(() => {
-    a !== (a = r()) && (o && (wr(o), o = null), o = Xe(() => (
+    n !== (n = t()) && (o && (wt(o), o = null), o = Xe(() => (
       /** @type {SnippetFn} */
-      a(n, ...c)
+      n(a, ...u)
     )));
-  }, or), Se && (n = Ze);
+  }, ot), qe && (a = Ze);
 }
-function Cr(g, r, c) {
-  Se && ar();
-  var n = g, a = Pr, o, i, l = null, y = zr() ? kr : _r;
+function Ct(g, t, u) {
+  qe && at();
+  var a = g, n = Pt, o, l, s = null, y = kt() ? _t : zt;
   function h() {
-    o && lr(o), l !== null && (l.lastChild.remove(), n.before(l), l = null), o = i;
+    o && lt(o), s !== null && (s.lastChild.remove(), a.before(s), s = null), o = l;
   }
   Ke(() => {
-    if (y(a, a = r())) {
-      var f = n, x = ir();
-      x && (l = document.createDocumentFragment(), l.append(f = nr())), i = Xe(() => c(f)), x ? Fe.add_callback(h) : h();
+    if (y(n, n = t())) {
+      var c = a, x = it();
+      x && (s = document.createDocumentFragment(), s.append(c = nt())), l = Xe(() => u(c)), x ? Fe.add_callback(h) : h();
     }
-  }), Se && (n = Ze);
+  }), qe && (a = Ze);
 }
-function Rr(g, r, c) {
-  Se && ar();
-  var n = g, a, o, i = null, l = null;
+function Rt(g, t, u) {
+  qe && at();
+  var a = g, n, o, l = null, s = null;
   function y() {
-    o && (lr(o), o = null), i && (i.lastChild.remove(), n.before(i), i = null), o = l, l = null;
+    o && (lt(o), o = null), l && (l.lastChild.remove(), a.before(l), l = null), o = s, s = null;
   }
   Ke(() => {
-    if (a !== (a = r())) {
-      var h = ir();
-      if (a) {
-        var f = n;
-        h && (i = document.createDocumentFragment(), i.append(f = nr()), o && Fe.skipped_effects.add(o)), l = Xe(() => c(f, a));
+    if (n !== (n = t())) {
+      var h = it();
+      if (n) {
+        var c = a;
+        h && (l = document.createDocumentFragment(), l.append(c = nt()), o && Fe.skipped_effects.add(o)), s = Xe(() => u(c, n));
       }
       h ? Fe.add_callback(y) : y();
     }
-  }, or), Se && (n = Ze);
+  }, ot), qe && (a = Ze);
 }
 const Oe = {
   delay: 0
 };
 typeof window < "u" && (window.__44_dev = Oe);
-function Tr(g) {
-  return new Promise((r) => setTimeout(r, g));
+function Tt(g) {
+  return new Promise((t) => setTimeout(t, g));
 }
-async function Mr(g, r, c) {
-  const n = `https://${r}/v1/recordings/${c}/player`;
-  Oe.delay > 0 && await Tr(Oe.delay);
-  const a = await fetch(n, { signal: g });
-  if (!a.ok)
-    throw a.status === 404 ? new Error(`Recording not found: ${c}`) : new Error(`Failed to fetch recording (${a.status})`);
-  const o = await a.json();
+async function Mt(g, t, u) {
+  const a = `https://${t}/v1/recordings/${u}/player`;
+  Oe.delay > 0 && await Tt(Oe.delay);
+  const n = await fetch(a, { signal: g });
+  if (!n.ok)
+    throw n.status === 404 ? new Error(`Recording not found: ${u}`) : new Error(`Failed to fetch recording (${n.status})`);
+  const o = await n.json();
   if (o.status !== "ready")
-    throw new Error(`Recording not ready: ${c}`);
+    throw new Error(`Recording not ready: ${u}`);
   return o;
 }
-var Hr = K("<audio hidden></audio>");
-function jr(g, r) {
-  ge(r, !0);
-  const c = r.$$host;
-  let n = d(r, "recordingId", 7), a = d(r, "apiHost", 7, "api.44.audio"), o = d(r, "preload", 7, "none"), i = q(null), l = q(null), y = q(0), h = q(0), f = q("idle"), x = null, u = null;
-  const s = S(() => ({
-    waveform: e(i)?.waveform ?? [],
-    transcription: e(i)?.transcription ?? null,
-    translation: e(i)?.translation ?? null,
-    words: e(i)?.words ?? null
+var Ht = X("<audio hidden></audio>");
+function jt(g, t) {
+  ge(t, !0);
+  const u = t.$$host;
+  let a = d(t, "recordingId", 7), n = d(t, "apiHost", 7, "api.44.audio"), o = d(t, "preload", 7, "none"), l = S(null), s = S(null), y = S(0), h = S(0), c = S("idle"), x = null, f = null;
+  const i = q(() => ({
+    waveform: e(l)?.waveform ?? [],
+    transcription: e(l)?.transcription ?? null,
+    translation: e(l)?.translation ?? null,
+    words: e(l)?.words ?? null
   }));
-  function k() {
-    c.duration = e(h), c.currentTime = e(y), c.state = e(f), c.metadata = e(s), c.setAttribute("data-state", e(f));
+  function _() {
+    u.duration = e(h), u.currentTime = e(y), u.state = e(c), u.metadata = e(i), u.setAttribute("data-state", e(c));
   }
   function p(b) {
-    k(), c.dispatchEvent(new CustomEvent(b, { bubbles: !0, composed: !0 }));
+    _(), u.dispatchEvent(new CustomEvent(b, { bubbles: !0, composed: !0 }));
   }
   function w() {
-    if (!e(l)) {
-      u = null;
+    if (!e(s)) {
+      f = null;
       return;
     }
-    m(y, Math.floor(e(l).currentTime * 1e3), !0), p("timeupdate"), u = requestAnimationFrame(w);
+    m(y, Math.floor(e(s).currentTime * 1e3), !0), p("timeupdate"), f = requestAnimationFrame(w);
   }
   async function C() {
-    if (e(f) === "idle") {
-      if (!n()) {
+    if (e(c) === "idle") {
+      if (!a()) {
         console.warn("fortyfour-recording: recording-id attribute is required");
         return;
       }
-      x = new AbortController(), m(f, "loading"), p("loading");
+      x = new AbortController(), m(c, "loading"), p("loading");
       try {
-        const b = await Mr(x.signal, a(), n());
-        m(i, b, !0), m(h, b.duration, !0), m(f, "ready"), p("loadedmetadata");
+        const b = await Mt(x.signal, n(), a());
+        m(l, b, !0), m(h, b.duration, !0), m(c, "ready"), p("loadedmetadata");
       } catch (b) {
         if (b.name === "AbortError")
           return;
-        console.warn(`fortyfour-recording: ${b.message}`), m(f, "error"), p("error");
+        console.warn(`fortyfour-recording: ${b.message}`), m(c, "error"), p("error");
       }
     }
   }
   async function U() {
-    if (!e(l)) {
+    if (!e(s)) {
       console.warn("fortyfour-recording: play() called but audio element not ready");
       return;
     }
     try {
-      await e(l).play(), m(f, "playing"), p("play"), u || w();
+      await e(s).play(), m(c, "playing"), p("play"), f || w();
     } catch (b) {
-      console.warn(`fortyfour-recording: ${b.message}`), m(f, "error"), p("error");
+      console.warn(`fortyfour-recording: ${b.message}`), m(c, "error"), p("error");
     }
   }
-  function X() {
-    if (!e(l)) {
+  function G() {
+    if (!e(s)) {
       console.warn("fortyfour-recording: pause() called but audio element not ready");
       return;
     }
-    e(l).pause(), m(f, "paused"), cancelAnimationFrame(u), u = null, p("pause");
+    e(s).pause(), m(c, "paused"), cancelAnimationFrame(f), f = null, p("pause");
   }
   async function F() {
-    if (e(f) === "error") {
+    if (e(c) === "error") {
       console.warn("fortyfour-recording: togglePlay() called while in error state");
       return;
     }
-    e(f) !== "loading" && (e(f) === "playing" ? X() : e(f) === "idle" ? (await C(), await er(), e(f) === "ready" && await U()) : await U());
+    e(c) !== "loading" && (e(c) === "playing" ? G() : e(c) === "idle" ? (await C(), await et(), e(c) === "ready" && await U()) : await U());
   }
-  function te(b) {
-    if (!e(l)) {
+  function re(b) {
+    if (!e(s)) {
       console.warn("fortyfour-recording: seek() called but audio element not ready");
       return;
     }
@@ -135,35 +135,35 @@ function jr(g, r) {
       console.warn("fortyfour-recording: seek() time out of range:", b, "duration:", e(h));
       return;
     }
-    e(l).currentTime = b / 1e3, m(y, Math.floor(b), !0), p("timeupdate");
+    e(s).currentTime = b / 1e3, m(y, Math.floor(b), !0), p("timeupdate");
   }
   async function V() {
-    cancelAnimationFrame(u), u = null, m(y, e(h), !0), p("timeupdate"), await er(), m(y, 0), e(l).currentTime = 0, p("timeupdate"), m(f, "ready"), p("ended");
+    cancelAnimationFrame(f), f = null, m(y, e(h), !0), p("timeupdate"), await et(), m(y, 0), e(s).currentTime = 0, p("timeupdate"), m(c, "ready"), p("ended");
   }
   function H(b) {
-    console.warn("fortyfour-recording: audio error", b.target.error), m(f, "error"), p("error");
+    console.warn("fortyfour-recording: audio error", b.target.error), m(c, "error"), p("error");
   }
   function be() {
-    x?.abort(), cancelAnimationFrame(u), u = null, e(l)?.pause(), m(i, null), m(y, 0), m(h, 0), m(f, "idle"), I = n(), p("timeupdate");
+    x?.abort(), cancelAnimationFrame(f), f = null, e(s)?.pause(), m(l, null), m(y, 0), m(h, 0), m(c, "idle"), I = a(), p("timeupdate");
   }
-  let I = n();
+  let I = a();
   de(() => {
-    n() !== I && be(), e(f) === "idle" && (o() === "auto" || o() === "metadata") && C();
-  }), c.togglePlay = F, c.seek = te, k(), Lr(() => {
-    x?.abort(), e(l)?.pause(), cancelAnimationFrame(u);
+    a() !== I && be(), e(c) === "idle" && (o() === "auto" || o() === "metadata") && C();
+  }), u.togglePlay = F, u.pause = G, u.seek = re, _(), Lt(() => {
+    x?.abort(), e(s)?.pause(), cancelAnimationFrame(f);
   });
   var j = {
     get recordingId() {
-      return n();
+      return a();
     },
     set recordingId(b) {
-      n(b), v();
+      a(b), v();
     },
     get apiHost() {
-      return a();
+      return n();
     },
     set apiHost(b = "api.44.audio") {
-      a(b), v();
+      n(b), v();
     },
     get preload() {
       return o();
@@ -171,25 +171,25 @@ function jr(g, r) {
     set preload(b = "none") {
       o(b), v();
     }
-  }, B = se(), ee = re(B);
-  return Cr(ee, n, (b) => {
-    var L = se(), Q = re(L);
+  }, B = se(), ee = te(B);
+  return Ct(ee, a, (b) => {
+    var L = se(), Q = te(L);
     {
       var ve = (E) => {
-        var R = Hr();
-        Pe(R, (t) => m(l, t), () => e(l)), M(() => {
-          W(R, "src", e(i).audioUrl), W(R, "preload", o() === "auto" ? "auto" : "none");
-        }), he("ended", R, V), he("error", R, H), z(E, R);
+        var R = Ht();
+        Pe(R, (r) => m(s, r), () => e(s)), M(() => {
+          W(R, "src", e(l).audioUrl), W(R, "preload", o() === "auto" ? "auto" : "none");
+        }), he("ended", R, V), he("error", R, H), k(E, R);
       };
       J(Q, (E) => {
-        e(i)?.audioUrl && E(ve);
+        e(l)?.audioUrl && E(ve);
       });
     }
-    z(b, L);
-  }), z(g, B), ye(j);
+    k(b, L);
+  }), k(g, B), ye(j);
 }
 customElements.define("fortyfour-recording", ue(
-  jr,
+  jt,
   {
     apiHost: { attribute: "api-host", reflect: !0 },
     recordingId: { attribute: "recording-id", reflect: !0 },
@@ -202,73 +202,73 @@ customElements.define("fortyfour-recording", ue(
 function Ie(g) {
   if (isNaN(g) || g < 0)
     return "-:--";
-  const r = Math.floor(g / 3600), c = Math.floor(g % 3600 / 60), n = g % 60;
-  return r > 0 ? `${r}:${c.toString().padStart(2, "0")}:${n.toString().padStart(2, "0")}` : `${c}:${n.toString().padStart(2, "0")}`;
+  const t = Math.floor(g / 3600), u = Math.floor(g % 3600 / 60), a = g % 60;
+  return t > 0 ? `${t}:${u.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}` : `${u}:${a.toString().padStart(2, "0")}`;
 }
-function tr(g) {
+function rt(g) {
   if (isNaN(g) || g < 0)
     return "--";
-  const r = Math.floor(g / 1e3), c = Math.floor(r / 60), n = r % 60;
-  return c > 0 ? `${c}m ${n}s` : `${n}s`;
+  const t = Math.floor(g / 1e3), u = Math.floor(t / 60), a = t % 60;
+  return u > 0 ? `${u}m ${a}s` : `${a}s`;
 }
 function Me(g) {
   if (isNaN(g) || g < 0)
     return "0 seconds";
-  const r = Math.floor(g / 60), c = Math.floor(g % 60);
-  return r > 0 && c > 0 ? `${r} ${r === 1 ? "minute" : "minutes"} ${c} ${c === 1 ? "second" : "seconds"}` : r > 0 ? `${r} ${r === 1 ? "minute" : "minutes"}` : `${c} ${c === 1 ? "second" : "seconds"}`;
+  const t = Math.floor(g / 1e3), u = Math.floor(t / 60), a = t % 60;
+  return u > 0 && a > 0 ? `${u} ${u === 1 ? "minute" : "minutes"} ${a} ${a === 1 ? "second" : "seconds"}` : u > 0 ? `${u} ${u === 1 ? "minute" : "minutes"}` : `${a} ${a === 1 ? "second" : "seconds"}`;
 }
-function Ye(g, r = 200) {
-  let c = q(!1);
+function Ye(g, t = 200) {
+  let u = S(!1);
   return de(() => {
     if (g()) {
-      const n = setTimeout(() => m(c, !0), r);
-      return () => clearTimeout(n);
+      const a = setTimeout(() => m(u, !0), t);
+      return () => clearTimeout(a);
     } else
-      m(c, !1);
-  }), () => e(c);
+      m(u, !1);
+  }), () => e(u);
 }
-function Te(g, r, c) {
+function Te(g, t, u) {
   de(() => {
-    c() ? g.setAttribute(r, "") : g.removeAttribute(r);
+    u() ? g.setAttribute(t, "") : g.removeAttribute(t);
   });
 }
-var qr = K("<span><!></span>");
-const Sr = {
+var St = X("<span><!></span>");
+const qt = {
   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 Ar(g, r) {
-  ge(r, !0), we(g, Sr);
-  const c = r.$$host;
-  let n = d(r, "for", 7, ""), a = d(r, "format", 7, "elapsed/total"), o = q(0), i = q(0);
-  function l(k, p, w) {
-    const C = Math.floor(k / 1e3), U = Math.floor(p / 1e3), X = Math.max(0, U - C);
+function At(g, t) {
+  ge(t, !0), we(g, qt);
+  const u = t.$$host;
+  let a = d(t, "for", 7, ""), n = d(t, "format", 7, "elapsed/total"), o = S(0), l = S(0);
+  function s(_, p, w) {
+    const C = Math.floor(_ / 1e3), U = Math.floor(p / 1e3), G = Math.max(0, U - C);
     switch (w) {
       case "-remaining":
-        return "-" + Ie(X);
+        return "-" + Ie(G);
       case "remaining":
-        return Ie(X);
+        return Ie(G);
       case "elapsed":
         return Ie(C);
       case "elapsed-text":
-        return tr(k);
+        return rt(_);
       case "total":
         return Ie(U);
       case "elapsed/total":
         return Ie(C) + " / " + Ie(U);
       case "remaining-text":
-        return tr(Math.max(0, p - k));
+        return rt(Math.max(0, p - _));
       case "%":
-        return Math.min(100, Math.ceil(k / p * 100)) + "%";
+        return Math.min(100, Math.ceil(_ / p * 100)) + "%";
       default:
         return console.warn(`fortyfour-duration: invalid format "${w}"`), null;
     }
   }
-  function y(k) {
-    switch (k) {
+  function y(_) {
+    switch (_) {
       case "-remaining":
         return "-0:00";
       case "remaining":
@@ -283,19 +283,19 @@ function Ar(g, r) {
         return "0";
     }
   }
-  Te(c, "data-placeholder", () => e(i) === 0), de(() => {
-    if (!n()) {
+  Te(u, "data-placeholder", () => e(l) === 0), de(() => {
+    if (!a()) {
       console.warn("fortyfour-duration: for attribute is required");
       return;
     }
-    const p = c.getRootNode().getElementById(n());
+    const p = u.getRootNode().getElementById(a());
     if (!p) {
-      console.warn(`fortyfour-duration: element with id "${n()}" not found`);
+      console.warn(`fortyfour-duration: element with id "${a()}" not found`);
       return;
     }
-    m(i, p.duration || 0, !0), m(o, p.currentTime || 0, !0);
+    m(l, p.duration || 0, !0), m(o, p.currentTime || 0, !0);
     function w() {
-      m(o, p.currentTime, !0), m(i, p.duration, !0);
+      m(o, p.currentTime, !0), m(l, p.duration, !0);
     }
     return p.addEventListener("loadedmetadata", w), p.addEventListener("timeupdate", w), () => {
       p.removeEventListener("loadedmetadata", w), p.removeEventListener("timeupdate", w);
@@ -303,39 +303,39 @@ function Ar(g, r) {
   });
   var h = {
     get for() {
-      return n();
+      return a();
     },
-    set for(k = "") {
-      n(k), v();
+    set for(_ = "") {
+      a(_), v();
     },
     get format() {
-      return a();
+      return n();
     },
-    set format(k = "elapsed/total") {
-      a(k), v();
+    set format(_ = "elapsed/total") {
+      n(_), v();
     }
-  }, f = qr(), x = G(f);
+  }, c = St(), x = K(c);
   {
-    var u = (k) => {
-      var p = rr();
+    var f = (_) => {
+      var p = tt();
       M((w) => Ee(p, w), [
-        () => l(e(o), e(i), a())
-      ]), z(k, p);
-    }, s = (k) => {
-      var p = se(), w = re(p);
-      qe(w, r, "placeholder", {}, (C) => {
-        var U = rr();
-        M((X) => Ee(U, X), [() => y(a())]), z(C, U);
-      }), z(k, p);
+        () => s(e(o), e(l), n())
+      ]), k(_, p);
+    }, i = (_) => {
+      var p = se(), w = te(p);
+      Se(w, t, "placeholder", {}, (C) => {
+        var U = tt();
+        M((G) => Ee(U, G), [() => y(n())]), k(C, U);
+      }), k(_, p);
     };
-    J(x, (k) => {
-      e(i) !== 0 ? k(u) : k(s, !1);
+    J(x, (_) => {
+      e(l) !== 0 ? _(f) : _(i, !1);
     });
   }
-  return D(f), z(g, f), ye(h);
+  return D(c), k(g, c), ye(h);
 }
 customElements.define("fortyfour-duration", ue(
-  Ar,
+  At,
   {
     for: { attribute: "for", reflect: !0 },
     format: { attribute: "format", reflect: !0 }
@@ -344,8 +344,8 @@ customElements.define("fortyfour-duration", ue(
   [],
   !0
 ));
-var Br = K('<div part="ring" class="ring-progress svelte-qaqt0h"><div class="ring-inner svelte-qaqt0h"></div></div>');
-const Nr = {
+var Bt = X('<div part="ring" class="ring-progress svelte-qaqt0h"><div class="ring-inner svelte-qaqt0h"></div></div>');
+const Nt = {
   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,
@@ -353,23 +353,23 @@ const Nr = {
       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 Ve(g, r) {
-  ge(r, !0), we(g, Nr);
-  let c = d(r, "progress", 7, 0);
-  const n = S(() => c() * 360);
-  var a = {
+function Ve(g, t) {
+  ge(t, !0), we(g, Nt);
+  let u = d(t, "progress", 7, 0);
+  const a = q(() => u() * 360);
+  var n = {
     get progress() {
-      return c();
+      return u();
     },
-    set progress(i = 0) {
-      c(i), v();
+    set progress(l = 0) {
+      u(l), v();
     }
-  }, o = Br();
-  return M(() => me(o, `--progress-deg: ${e(n) ?? ""}deg`)), z(g, o), ye(a);
+  }, o = Bt();
+  return M(() => me(o, `--progress-deg: ${e(a) ?? ""}deg`)), k(g, o), ye(n);
 }
 ue(Ve, { progress: {} }, [], [], !0);
-var Wr = K('<div part="ripple" class="ripple ripple-small svelte-lgp3pt"></div>'), Dr = K('<div part="ripple" class="ripple ripple-medium svelte-lgp3pt"></div>'), Ur = K('<div part="ripple" class="ripple ripple-large svelte-lgp3pt"></div>'), Fr = K("<!> <!> <!>", 1);
-const Or = {
+var Wt = X('<div part="ripple" class="ripple ripple-small svelte-lgp3pt"></div>'), Dt = X('<div part="ripple" class="ripple ripple-medium svelte-lgp3pt"></div>'), Ut = X('<div part="ripple" class="ripple ripple-large svelte-lgp3pt"></div>'), Ft = X("<!> <!> <!>", 1);
+const Ot = {
   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 {
@@ -414,104 +414,104 @@ const Or = {
       animation: none;}
   }`
 };
-function Je(g, r) {
-  ge(r, !0), we(g, Or);
-  let c = d(r, "isPlaying", 7, !1), n = d(r, "amplitude", 7, 0), a = d(r, "intensity", 7, 1), o = q(We({ small: !1, medium: !1, large: !1 }));
-  function i(w) {
+function Je(g, t) {
+  ge(t, !0), we(g, Ot);
+  let u = d(t, "isPlaying", 7, !1), a = d(t, "amplitude", 7, 0), n = d(t, "intensity", 7, 1), o = S(We({ small: !1, medium: !1, large: !1 }));
+  function l(w) {
     return w < 33 ? "small" : w < 66 ? "medium" : "large";
   }
   de(() => {
-    if (!c()) {
+    if (!u()) {
       m(o, { small: !1, medium: !1, large: !1 }, !0);
       return;
     }
-    const w = i(n());
+    const w = l(a());
     e(o)[w] || (e(o)[w] = !0);
   });
-  function l(w) {
+  function s(w) {
     e(o)[w] = !1;
   }
   var y = {
     get isPlaying() {
-      return c();
+      return u();
     },
     set isPlaying(w = !1) {
-      c(w), v();
+      u(w), v();
     },
     get amplitude() {
-      return n();
+      return a();
     },
     set amplitude(w = 0) {
-      n(w), v();
+      a(w), v();
     },
     get intensity() {
-      return a();
+      return n();
     },
     set intensity(w = 1) {
-      a(w), v();
+      n(w), v();
     }
-  }, h = Fr(), f = re(h);
+  }, h = Ft(), c = te(h);
   {
     var x = (w) => {
-      var C = Wr();
-      M(() => me(C, `--intensity: ${a() ?? ""};`)), he("animationend", C, () => l("small")), z(w, C);
+      var C = Wt();
+      M(() => me(C, `--intensity: ${n() ?? ""};`)), he("animationend", C, () => s("small")), k(w, C);
     };
-    J(f, (w) => {
+    J(c, (w) => {
       e(o).small && w(x);
     });
   }
-  var u = pe(f, 2);
+  var f = pe(c, 2);
   {
-    var s = (w) => {
-      var C = Dr();
-      M(() => me(C, `--intensity: ${a() ?? ""};`)), he("animationend", C, () => l("medium")), z(w, C);
+    var i = (w) => {
+      var C = Dt();
+      M(() => me(C, `--intensity: ${n() ?? ""};`)), he("animationend", C, () => s("medium")), k(w, C);
     };
-    J(u, (w) => {
-      e(o).medium && w(s);
+    J(f, (w) => {
+      e(o).medium && w(i);
     });
   }
-  var k = pe(u, 2);
+  var _ = pe(f, 2);
   {
     var p = (w) => {
-      var C = Ur();
-      M(() => me(C, `--intensity: ${a() ?? ""};`)), he("animationend", C, () => l("large")), z(w, C);
+      var C = Ut();
+      M(() => me(C, `--intensity: ${n() ?? ""};`)), he("animationend", C, () => s("large")), k(w, C);
     };
-    J(k, (w) => {
+    J(_, (w) => {
       e(o).large && w(p);
     });
   }
-  return z(g, h), ye(y);
+  return k(g, h), ye(y);
 }
 ue(Je, { isPlaying: {}, amplitude: {}, intensity: {} }, [], [], !0);
-var Gr = (g, r) => {
-  g.currentTarget.focus({ preventScroll: !0 }), r()?.(g);
-}, Kr = K('<div class="shape-wrapper svelte-103okfy"><!> <button part="button"><!> <span part="icon" class="icon svelte-103okfy"><!></span></button></div>');
-const Xr = {
+var Gt = (g, t) => {
+  g.currentTarget.focus({ preventScroll: !0 }), t()?.(g);
+}, Kt = X('<div class="shape-wrapper svelte-103okfy"><!> <button part="button"><!> <span part="icon" class="icon svelte-103okfy"><!></span></button></div>');
+const Xt = {
   hash: "svelte-103okfy",
   code: `.shape-wrapper.svelte-103okfy {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-103okfy {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-103okfy: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-103okfy:disabled {opacity:0.5;cursor:not-allowed;}.play-button.has-ring-progress.svelte-103okfy {border:none;}.icon.svelte-103okfy {position:relative;z-index:1;width:1em;height:1em;display:flex;align-items:center;justify-content:center;}.icon.svelte-103okfy svg {width:100%;height:100%;fill:currentColor;}`
 };
-function De(g, r) {
-  ge(r, !0), we(g, Xr);
-  let c = d(r, "onclick", 7), n = d(r, "disabled", 7, !1), a = d(r, "loading", 7, !1), o = d(r, "visualization", 7, "none"), i = d(r, "progressPercent", 7, 0), l = d(r, "isPlaying", 7, !1), y = d(r, "amplitude", 7, 0), h = d(r, "rippleIntensity", 7, 1), f = d(r, "ariaLabel", 7, "Play"), x = d(r, "borderRadius", 7, "50%"), u = d(r, "children", 7);
-  var s = {
+function De(g, t) {
+  ge(t, !0), we(g, Xt);
+  let u = d(t, "onclick", 7), a = d(t, "disabled", 7, !1), n = d(t, "loading", 7, !1), o = d(t, "visualization", 7, "none"), l = d(t, "progressPercent", 7, 0), s = d(t, "isPlaying", 7, !1), y = d(t, "amplitude", 7, 0), h = d(t, "rippleIntensity", 7, 1), c = d(t, "ariaLabel", 7, "Play"), x = d(t, "borderRadius", 7, "50%"), f = d(t, "children", 7);
+  var i = {
     get onclick() {
-      return c();
+      return u();
     },
     set onclick(H) {
-      c(H), v();
+      u(H), v();
     },
     get disabled() {
-      return n();
+      return a();
     },
     set disabled(H = !1) {
-      n(H), v();
+      a(H), v();
     },
     get loading() {
-      return a();
+      return n();
     },
     set loading(H = !1) {
-      a(H), v();
+      n(H), v();
     },
     get visualization() {
       return o();
@@ -520,16 +520,16 @@ function De(g, r) {
       o(H), v();
     },
     get progressPercent() {
-      return i();
+      return l();
     },
     set progressPercent(H = 0) {
-      i(H), v();
+      l(H), v();
     },
     get isPlaying() {
-      return l();
+      return s();
     },
     set isPlaying(H = !1) {
-      l(H), v();
+      s(H), v();
     },
     get amplitude() {
       return y();
@@ -544,10 +544,10 @@ function De(g, r) {
       h(H), v();
     },
     get ariaLabel() {
-      return f();
+      return c();
     },
     set ariaLabel(H = "Play") {
-      f(H), v();
+      c(H), v();
     },
     get borderRadius() {
       return x();
@@ -556,17 +556,17 @@ function De(g, r) {
       x(H), v();
     },
     get children() {
-      return u();
+      return f();
     },
     set children(H) {
-      u(H), v();
+      f(H), v();
     }
-  }, k = Kr(), p = G(k);
+  }, _ = Kt(), p = K(_);
   {
     var w = (H) => {
       Je(H, {
         get isPlaying() {
-          return l();
+          return s();
         },
         get amplitude() {
           return y();
@@ -582,27 +582,27 @@ function De(g, r) {
   }
   var C = pe(p, 2);
   let U;
-  C.__click = [Gr, c];
-  var X = G(C);
+  C.__click = [Gt, u];
+  var G = K(C);
   {
     var F = (H) => {
       Ve(H, {
         get progress() {
-          return i();
+          return l();
         }
       });
     };
-    J(X, (H) => {
+    J(G, (H) => {
       o() === "ring" && H(F);
     });
   }
-  var te = pe(X, 2), V = G(te);
-  return Ae(V, u), D(te), D(C), D(k), M(
+  var re = pe(G, 2), V = K(re);
+  return Ae(V, f), D(re), D(C), D(_), M(
     (H) => {
-      me(k, `border-radius: ${x() ?? ""}`), U = ie(C, 1, "play-button svelte-103okfy", null, U, H), C.disabled = n(), W(C, "aria-label", f()), W(C, "aria-busy", a()), me(C, `border-radius: ${x() ?? ""}`);
+      me(_, `border-radius: ${x() ?? ""}`), U = ie(C, 1, "play-button svelte-103okfy", null, U, H), C.disabled = a(), W(C, "aria-label", c()), W(C, "aria-busy", n()), me(C, `border-radius: ${x() ?? ""}`);
     },
     [() => ({ "has-ring-progress": o() === "ring" })]
-  ), z(g, k), ye(s);
+  ), k(g, _), ye(i);
 }
 He(["click"]);
 ue(
@@ -624,89 +624,89 @@ ue(
   [],
   !0
 );
-function Ge(g, r) {
-  ge(r, !0);
-  let c = d(r, "onclick", 7), n = d(r, "disabled", 7, !1), a = d(r, "loading", 7, !1), o = d(r, "visualization", 7, "none"), i = d(r, "progressPercent", 7, 0), l = d(r, "isPlaying", 7, !1), y = d(r, "amplitude", 7, 0), h = d(r, "rippleIntensity", 7, 1), f = d(r, "ariaLabel", 7, "Play"), x = d(r, "children", 7);
-  var u = {
+function Ge(g, t) {
+  ge(t, !0);
+  let u = d(t, "onclick", 7), a = d(t, "disabled", 7, !1), n = d(t, "loading", 7, !1), o = d(t, "visualization", 7, "none"), l = d(t, "progressPercent", 7, 0), s = d(t, "isPlaying", 7, !1), y = d(t, "amplitude", 7, 0), h = d(t, "rippleIntensity", 7, 1), c = d(t, "ariaLabel", 7, "Play"), x = d(t, "children", 7);
+  var f = {
     get onclick() {
-      return c();
+      return u();
     },
-    set onclick(s) {
-      c(s), v();
+    set onclick(i) {
+      u(i), v();
     },
     get disabled() {
-      return n();
+      return a();
     },
-    set disabled(s = !1) {
-      n(s), v();
+    set disabled(i = !1) {
+      a(i), v();
     },
     get loading() {
-      return a();
+      return n();
     },
-    set loading(s = !1) {
-      a(s), v();
+    set loading(i = !1) {
+      n(i), v();
     },
     get visualization() {
       return o();
     },
-    set visualization(s = "none") {
-      o(s), v();
+    set visualization(i = "none") {
+      o(i), v();
     },
     get progressPercent() {
-      return i();
+      return l();
     },
-    set progressPercent(s = 0) {
-      i(s), v();
+    set progressPercent(i = 0) {
+      l(i), v();
     },
     get isPlaying() {
-      return l();
+      return s();
     },
-    set isPlaying(s = !1) {
-      l(s), v();
+    set isPlaying(i = !1) {
+      s(i), v();
     },
     get amplitude() {
       return y();
     },
-    set amplitude(s = 0) {
-      y(s), v();
+    set amplitude(i = 0) {
+      y(i), v();
     },
     get rippleIntensity() {
       return h();
     },
-    set rippleIntensity(s = 1) {
-      h(s), v();
+    set rippleIntensity(i = 1) {
+      h(i), v();
     },
     get ariaLabel() {
-      return f();
+      return c();
     },
-    set ariaLabel(s = "Play") {
-      f(s), v();
+    set ariaLabel(i = "Play") {
+      c(i), v();
     },
     get children() {
       return x();
     },
-    set children(s) {
-      x(s), v();
+    set children(i) {
+      x(i), v();
     }
   };
   return De(g, {
     get onclick() {
-      return c();
+      return u();
     },
     get disabled() {
-      return n();
+      return a();
     },
     get loading() {
-      return a();
+      return n();
     },
     get visualization() {
       return o();
     },
     get progressPercent() {
-      return i();
+      return l();
     },
     get isPlaying() {
-      return l();
+      return s();
     },
     get amplitude() {
       return y();
@@ -715,15 +715,15 @@ function Ge(g, r) {
       return h();
     },
     get ariaLabel() {
-      return f();
+      return c();
     },
     borderRadius: "50%",
-    children: (s, k) => {
-      var p = se(), w = re(p);
-      Ae(w, x), z(s, p);
+    children: (i, _) => {
+      var p = se(), w = te(p);
+      Ae(w, x), k(i, p);
     },
     $$slots: { default: !0 }
-  }), ye(u);
+  }), ye(f);
 }
 ue(
   Ge,
@@ -743,89 +743,89 @@ ue(
   [],
   !0
 );
-function fr(g, r) {
-  ge(r, !0);
-  let c = d(r, "onclick", 7), n = d(r, "disabled", 7, !1), a = d(r, "loading", 7, !1), o = d(r, "visualization", 7, "none"), i = d(r, "progressPercent", 7, 0), l = d(r, "isPlaying", 7, !1), y = d(r, "amplitude", 7, 0), h = d(r, "rippleIntensity", 7, 1), f = d(r, "ariaLabel", 7, "Play"), x = d(r, "children", 7);
-  var u = {
+function ft(g, t) {
+  ge(t, !0);
+  let u = d(t, "onclick", 7), a = d(t, "disabled", 7, !1), n = d(t, "loading", 7, !1), o = d(t, "visualization", 7, "none"), l = d(t, "progressPercent", 7, 0), s = d(t, "isPlaying", 7, !1), y = d(t, "amplitude", 7, 0), h = d(t, "rippleIntensity", 7, 1), c = d(t, "ariaLabel", 7, "Play"), x = d(t, "children", 7);
+  var f = {
     get onclick() {
-      return c();
+      return u();
     },
-    set onclick(s) {
-      c(s), v();
+    set onclick(i) {
+      u(i), v();
     },
     get disabled() {
-      return n();
+      return a();
     },
-    set disabled(s = !1) {
-      n(s), v();
+    set disabled(i = !1) {
+      a(i), v();
     },
     get loading() {
-      return a();
+      return n();
     },
-    set loading(s = !1) {
-      a(s), v();
+    set loading(i = !1) {
+      n(i), v();
     },
     get visualization() {
       return o();
     },
-    set visualization(s = "none") {
-      o(s), v();
+    set visualization(i = "none") {
+      o(i), v();
     },
     get progressPercent() {
-      return i();
+      return l();
     },
-    set progressPercent(s = 0) {
-      i(s), v();
+    set progressPercent(i = 0) {
+      l(i), v();
     },
     get isPlaying() {
-      return l();
+      return s();
     },
-    set isPlaying(s = !1) {
-      l(s), v();
+    set isPlaying(i = !1) {
+      s(i), v();
     },
     get amplitude() {
       return y();
     },
-    set amplitude(s = 0) {
-      y(s), v();
+    set amplitude(i = 0) {
+      y(i), v();
     },
     get rippleIntensity() {
       return h();
     },
-    set rippleIntensity(s = 1) {
-      h(s), v();
+    set rippleIntensity(i = 1) {
+      h(i), v();
     },
     get ariaLabel() {
-      return f();
+      return c();
     },
-    set ariaLabel(s = "Play") {
-      f(s), v();
+    set ariaLabel(i = "Play") {
+      c(i), v();
     },
     get children() {
       return x();
     },
-    set children(s) {
-      x(s), v();
+    set children(i) {
+      x(i), v();
     }
   };
   return De(g, {
     get onclick() {
-      return c();
+      return u();
     },
     get disabled() {
-      return n();
+      return a();
     },
     get loading() {
-      return a();
+      return n();
     },
     get visualization() {
       return o();
     },
     get progressPercent() {
-      return i();
+      return l();
     },
     get isPlaying() {
-      return l();
+      return s();
     },
     get amplitude() {
       return y();
@@ -834,18 +834,18 @@ function fr(g, r) {
       return h();
     },
     get ariaLabel() {
-      return f();
+      return c();
     },
     borderRadius: "0",
-    children: (s, k) => {
-      var p = se(), w = re(p);
-      Ae(w, x), z(s, p);
+    children: (i, _) => {
+      var p = se(), w = te(p);
+      Ae(w, x), k(i, p);
     },
     $$slots: { default: !0 }
-  }), ye(u);
+  }), ye(f);
 }
 ue(
-  fr,
+  ft,
   {
     onclick: {},
     disabled: {},
@@ -862,89 +862,89 @@ ue(
   [],
   !0
 );
-function cr(g, r) {
-  ge(r, !0);
-  let c = d(r, "onclick", 7), n = d(r, "disabled", 7, !1), a = d(r, "loading", 7, !1), o = d(r, "visualization", 7, "none"), i = d(r, "progressPercent", 7, 0), l = d(r, "isPlaying", 7, !1), y = d(r, "amplitude", 7, 0), h = d(r, "rippleIntensity", 7, 1), f = d(r, "ariaLabel", 7, "Play"), x = d(r, "children", 7);
-  var u = {
+function ct(g, t) {
+  ge(t, !0);
+  let u = d(t, "onclick", 7), a = d(t, "disabled", 7, !1), n = d(t, "loading", 7, !1), o = d(t, "visualization", 7, "none"), l = d(t, "progressPercent", 7, 0), s = d(t, "isPlaying", 7, !1), y = d(t, "amplitude", 7, 0), h = d(t, "rippleIntensity", 7, 1), c = d(t, "ariaLabel", 7, "Play"), x = d(t, "children", 7);
+  var f = {
     get onclick() {
-      return c();
+      return u();
     },
-    set onclick(s) {
-      c(s), v();
+    set onclick(i) {
+      u(i), v();
     },
     get disabled() {
-      return n();
+      return a();
     },
-    set disabled(s = !1) {
-      n(s), v();
+    set disabled(i = !1) {
+      a(i), v();
     },
     get loading() {
-      return a();
+      return n();
     },
-    set loading(s = !1) {
-      a(s), v();
+    set loading(i = !1) {
+      n(i), v();
     },
     get visualization() {
       return o();
     },
-    set visualization(s = "none") {
-      o(s), v();
+    set visualization(i = "none") {
+      o(i), v();
     },
     get progressPercent() {
-      return i();
+      return l();
     },
-    set progressPercent(s = 0) {
-      i(s), v();
+    set progressPercent(i = 0) {
+      l(i), v();
     },
     get isPlaying() {
-      return l();
+      return s();
     },
-    set isPlaying(s = !1) {
-      l(s), v();
+    set isPlaying(i = !1) {
+      s(i), v();
     },
     get amplitude() {
       return y();
     },
-    set amplitude(s = 0) {
-      y(s), v();
+    set amplitude(i = 0) {
+      y(i), v();
     },
     get rippleIntensity() {
       return h();
     },
-    set rippleIntensity(s = 1) {
-      h(s), v();
+    set rippleIntensity(i = 1) {
+      h(i), v();
     },
     get ariaLabel() {
-      return f();
+      return c();
     },
-    set ariaLabel(s = "Play") {
-      f(s), v();
+    set ariaLabel(i = "Play") {
+      c(i), v();
     },
     get children() {
       return x();
     },
-    set children(s) {
-      x(s), v();
+    set children(i) {
+      x(i), v();
     }
   };
   return De(g, {
     get onclick() {
-      return c();
+      return u();
     },
     get disabled() {
-      return n();
+      return a();
     },
     get loading() {
-      return a();
+      return n();
     },
     get visualization() {
       return o();
     },
     get progressPercent() {
-      return i();
+      return l();
     },
     get isPlaying() {
-      return l();
+      return s();
     },
     get amplitude() {
       return y();
@@ -953,18 +953,18 @@ function cr(g, r) {
       return h();
     },
     get ariaLabel() {
-      return f();
+      return c();
     },
     borderRadius: "var(--fortyfour-play-button-border-radius)",
-    children: (s, k) => {
-      var p = se(), w = re(p);
-      Ae(w, x), z(s, p);
+    children: (i, _) => {
+      var p = se(), w = te(p);
+      Ae(w, x), k(i, p);
     },
     $$slots: { default: !0 }
-  }), ye(u);
+  }), ye(f);
 }
 ue(
-  cr,
+  ct,
   {
     onclick: {},
     disabled: {},
@@ -981,26 +981,26 @@ ue(
   [],
   !0
 );
-var Zr = K('<div class="shape-wrapper svelte-19ptej3"><!> <button part="button" class="play-button svelte-19ptej3"><div aria-hidden="true"><!></div> <span part="icon" class="icon svelte-19ptej3"><!></span></button></div>');
-const Yr = {
+var Zt = X('<div class="shape-wrapper svelte-19ptej3"><!> <button part="button" class="play-button svelte-19ptej3"><div aria-hidden="true"><!></div> <span part="icon" class="icon svelte-19ptej3"><!></span></button></div>');
+const Yt = {
   hash: "svelte-19ptej3",
   code: `.shape-wrapper.svelte-19ptej3 {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-19ptej3 {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-19ptej3: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-19ptej3:disabled {opacity:0.5;cursor:not-allowed;}.blob-background.svelte-19ptej3 {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-19ptej3 {border:none;}.icon.svelte-19ptej3 {position:relative;z-index:1;width:1em;height:1em;display:flex;align-items:center;justify-content:center;}.icon.svelte-19ptej3 svg {width:100%;height:100%;fill:currentColor;}`
 };
-function dr(g, r) {
-  ge(r, !0), we(g, Yr);
-  let c = d(r, "onclick", 7), n = d(r, "disabled", 7, !1), a = d(r, "loading", 7, !1), o = d(r, "visualization", 7, "none"), i = d(r, "progressPercent", 7, 0), l = d(r, "isPlaying", 7, !1), y = d(r, "amplitude", 7, 0), h = d(r, "rippleIntensity", 7, 1), f = d(r, "ariaLabel", 7, "Play"), x = d(r, "animate", 7, !1), u = d(r, "speed", 7, 20), s = d(r, "children", 7);
-  function k(t, T) {
-    return Math.floor(t + Math.random() * (T - t));
+function dt(g, t) {
+  ge(t, !0), we(g, Yt);
+  let u = d(t, "onclick", 7), a = d(t, "disabled", 7, !1), n = d(t, "loading", 7, !1), o = d(t, "visualization", 7, "none"), l = d(t, "progressPercent", 7, 0), s = d(t, "isPlaying", 7, !1), y = d(t, "amplitude", 7, 0), h = d(t, "rippleIntensity", 7, 1), c = d(t, "ariaLabel", 7, "Play"), x = d(t, "animate", 7, !1), f = d(t, "speed", 7, 20), i = d(t, "children", 7);
+  function _(r, T) {
+    return Math.floor(r + Math.random() * (T - r));
   }
   function p() {
     const T = (A) => 100 - A;
-    let _ = [];
+    let P = [];
     for (let A = 0; A < 4; A++) {
-      let N = k(25, T(25));
-      _.push(N), _.push(T(N));
+      let N = _(25, T(25));
+      P.push(N), P.push(T(N));
     }
-    return `${_[0]}% ${_[1]}% ${_[2]}% ${_[3]}% / ${_[4]}% ${_[6]}% ${_[7]}% ${_[5]}%`;
+    return `${P[0]}% ${P[1]}% ${P[2]}% ${P[3]}% / ${P[4]}% ${P[6]}% ${P[7]}% ${P[5]}%`;
   }
   const w = p(), C = [
     { borderRadius: w, offset: 0 },
@@ -1012,10 +1012,10 @@ function dr(g, r) {
     { borderRadius: p(), offset: 0.9 },
     { borderRadius: w, offset: 1 }
   ], U = w;
-  let X = q(null), F = null;
-  const te = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  de(() => (e(X) && x() && !te && (F = e(X).animate(C, {
-    duration: u() * 1e3,
+  let G = S(null), F = null;
+  const re = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  de(() => (e(G) && x() && !re && (F = e(G).animate(C, {
+    duration: f() * 1e3,
     iterations: 1 / 0,
     easing: "ease"
   })), () => {
@@ -1023,85 +1023,85 @@ function dr(g, r) {
   }));
   var V = {
     get onclick() {
-      return c();
+      return u();
     },
-    set onclick(t) {
-      c(t), v();
+    set onclick(r) {
+      u(r), v();
     },
     get disabled() {
-      return n();
+      return a();
     },
-    set disabled(t = !1) {
-      n(t), v();
+    set disabled(r = !1) {
+      a(r), v();
     },
     get loading() {
-      return a();
+      return n();
     },
-    set loading(t = !1) {
-      a(t), v();
+    set loading(r = !1) {
+      n(r), v();
     },
     get visualization() {
       return o();
     },
-    set visualization(t = "none") {
-      o(t), v();
+    set visualization(r = "none") {
+      o(r), v();
     },
     get progressPercent() {
-      return i();
+      return l();
     },
-    set progressPercent(t = 0) {
-      i(t), v();
+    set progressPercent(r = 0) {
+      l(r), v();
     },
     get isPlaying() {
-      return l();
+      return s();
     },
-    set isPlaying(t = !1) {
-      l(t), v();
+    set isPlaying(r = !1) {
+      s(r), v();
     },
     get amplitude() {
       return y();
     },
-    set amplitude(t = 0) {
-      y(t), v();
+    set amplitude(r = 0) {
+      y(r), v();
     },
     get rippleIntensity() {
       return h();
     },
-    set rippleIntensity(t = 1) {
-      h(t), v();
+    set rippleIntensity(r = 1) {
+      h(r), v();
     },
     get ariaLabel() {
-      return f();
+      return c();
     },
-    set ariaLabel(t = "Play") {
-      f(t), v();
+    set ariaLabel(r = "Play") {
+      c(r), v();
     },
     get animate() {
       return x();
     },
-    set animate(t = !1) {
-      x(t), v();
+    set animate(r = !1) {
+      x(r), v();
     },
     get speed() {
-      return u();
+      return f();
     },
-    set speed(t = 20) {
-      u(t), v();
+    set speed(r = 20) {
+      f(r), v();
     },
     get children() {
-      return s();
+      return i();
     },
-    set children(t) {
-      s(t), v();
+    set children(r) {
+      i(r), v();
     }
-  }, H = Zr();
+  }, H = Zt();
   let be;
-  var I = G(H);
+  var I = K(H);
   {
-    var j = (t) => {
-      Je(t, {
+    var j = (r) => {
+      Je(r, {
         get isPlaying() {
-          return l();
+          return s();
         },
         get amplitude() {
           return y();
@@ -1111,45 +1111,45 @@ function dr(g, r) {
         }
       });
     };
-    J(I, (t) => {
-      o() === "ripple" && t(j);
+    J(I, (r) => {
+      o() === "ripple" && r(j);
     });
   }
   var B = pe(I, 2);
-  B.__click = function(...t) {
-    c()?.apply(this, t);
+  B.__click = function(...r) {
+    u()?.apply(this, r);
   };
-  var ee = G(B);
+  var ee = K(B);
   let b, L;
-  var Q = G(ee);
+  var Q = K(ee);
   {
-    var ve = (t) => {
-      Ve(t, {
+    var ve = (r) => {
+      Ve(r, {
         get progress() {
-          return i();
+          return l();
         }
       });
     };
-    J(Q, (t) => {
-      o() === "ring" && t(ve);
+    J(Q, (r) => {
+      o() === "ring" && r(ve);
     });
   }
-  D(ee), Pe(ee, (t) => m(X, t), () => e(X));
-  var E = pe(ee, 2), R = G(E);
-  return Ae(R, s), D(E), D(B), D(H), M(
-    (t, T, _) => {
-      be = me(H, "", be, t), B.disabled = n(), W(B, "aria-label", f()), W(B, "aria-busy", a()), b = ie(ee, 1, "blob-background svelte-19ptej3", null, b, T), L = me(ee, "", L, _);
+  D(ee), Pe(ee, (r) => m(G, r), () => e(G));
+  var E = pe(ee, 2), R = K(E);
+  return Ae(R, i), D(E), D(B), D(H), M(
+    (r, T, P) => {
+      be = me(H, "", be, r), B.disabled = a(), W(B, "aria-label", c()), W(B, "aria-busy", n()), b = ie(ee, 1, "blob-background svelte-19ptej3", null, b, T), L = me(ee, "", L, P);
     },
     [
       () => ({ "border-radius": U }),
       () => ({ "has-ring": o() === "ring" }),
       () => ({ "border-radius": U })
     ]
-  ), z(g, H), ye(V);
+  ), k(g, H), ye(V);
 }
 He(["click"]);
 ue(
-  dr,
+  dt,
   {
     onclick: {},
     disabled: {},
@@ -1168,20 +1168,20 @@ ue(
   [],
   !0
 );
-Er();
-var Vr = Le('<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 vr(g) {
-  var r = Vr();
-  z(g, r);
+Et();
+var Vt = Le('<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 vt(g) {
+  var t = Vt();
+  k(g, t);
 }
-ue(vr, {}, [], [], !0);
-var Jr = Le('<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 pr(g) {
-  var r = Jr();
-  z(g, r);
+ue(vt, {}, [], [], !0);
+var Jt = Le('<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 pt(g) {
+  var t = Jt();
+  k(g, t);
 }
-ue(pr, {}, [], [], !0);
-var Qr = Le(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true"><style>circle {
+ue(pt, {}, [], [], !0);
+var Qt = Le(`<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) {
@@ -1205,19 +1205,19 @@ var Qr = Le(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-
         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 gr(g) {
-  var r = Qr();
-  z(g, r);
+function gt(g) {
+  var t = Qt();
+  k(g, t);
 }
-ue(gr, {}, [], [], !0);
-var $r = Le('<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 yr(g) {
-  var r = $r();
-  z(g, r);
+ue(gt, {}, [], [], !0);
+var $t = Le('<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 yt(g) {
+  var t = $t();
+  k(g, t);
 }
-ue(yr, {}, [], [], !0);
-var et = K('<div class="wrapper svelte-1a44wbi"><!></div>');
-const rt = {
+ue(yt, {}, [], [], !0);
+var er = X('<div class="wrapper svelte-1a44wbi"><!></div>');
+const tr = {
   hash: "svelte-1a44wbi",
   code: `.wrapper.svelte-1a44wbi {display:contents;}: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));}
@@ -1227,116 +1227,116 @@ const rt = {
     :host([hover="lift"]) {transition:none;}
   }`
 };
-function tt(g, r) {
-  ge(r, !0), we(g, rt);
-  const c = (b) => {
-    var L = se(), Q = re(L);
+function rr(g, t) {
+  ge(t, !0), we(g, tr);
+  const u = (b) => {
+    var L = se(), Q = te(L);
     {
       var ve = (R) => {
-        var t = se(), T = re(t);
-        qe(T, r, "icon-error", {}, (_) => {
-          yr(_);
-        }), z(R, t);
+        var r = se(), T = te(r);
+        Se(T, t, "icon-error", {}, (P) => {
+          yt(P);
+        }), k(R, r);
       }, E = (R) => {
-        var t = se(), T = re(t);
+        var r = se(), T = te(r);
         {
-          var _ = (N) => {
-            var Y = se(), P = re(Y);
-            qe(P, r, "icon-loading", {}, (O) => {
-              gr(O);
-            }), z(N, Y);
+          var P = (N) => {
+            var Y = se(), z = te(Y);
+            Se(z, t, "icon-loading", {}, (O) => {
+              gt(O);
+            }), k(N, Y);
           }, A = (N) => {
-            var Y = se(), P = re(Y);
+            var Y = se(), z = te(Y);
             {
               var O = (ae) => {
-                var ce = se(), le = re(ce);
-                qe(le, r, "icon-playing", {}, ($) => {
-                  pr($);
-                }), z(ae, ce);
+                var ce = se(), le = te(ce);
+                Se(le, t, "icon-playing", {}, ($) => {
+                  pt($);
+                }), k(ae, ce);
               }, oe = (ae) => {
-                var ce = se(), le = re(ce);
-                qe(le, r, "icon-paused", {}, ($) => {
-                  vr($);
-                }), z(ae, ce);
+                var ce = se(), le = te(ce);
+                Se(le, t, "icon-paused", {}, ($) => {
+                  vt($);
+                }), k(ae, ce);
               };
               J(
-                P,
+                z,
                 (ae) => {
                   e(U) ? ae(O) : ae(oe, !1);
                 },
                 !0
               );
             }
-            z(N, Y);
+            k(N, Y);
           };
           J(
             T,
             (N) => {
-              V() ? N(_) : N(A, !1);
+              V() ? N(P) : N(A, !1);
             },
             !0
           );
         }
-        z(R, t);
+        k(R, r);
       };
       J(Q, (R) => {
         e(F) ? R(ve) : R(E, !1);
       });
     }
-    z(b, L);
-  }, n = r.$$host;
-  let a = d(r, "for", 7, ""), o = d(r, "shape", 7, "circle"), i = d(r, "visualization", 7, "none"), l = d(r, "hover", 7, "none"), y = d(r, "rippleIntensity", 7, 1), h = d(r, "blobAnimate", 7, !1), f = d(r, "blobSpeed", 7, 20);
+    k(b, L);
+  }, a = t.$$host;
+  let n = d(t, "for", 7, ""), o = d(t, "shape", 7, "circle"), l = d(t, "visualization", 7, "none"), s = d(t, "hover", 7, "none"), y = d(t, "rippleIntensity", 7, 1), h = d(t, "blobAnimate", 7, !1), c = d(t, "blobSpeed", 7, 20);
   const x = {
     circle: Ge,
-    square: fr,
-    "rounded-square": cr,
-    blob: dr
+    square: ft,
+    "rounded-square": ct,
+    blob: dt
   };
-  let u = q(null), s = q("idle"), k = q(0), p = q(0), w = q(We([]));
-  const C = S(() => x[o()] ?? Ge), U = S(() => e(s) === "playing"), X = S(() => e(s) === "loading"), F = S(() => e(s) === "error"), te = S(() => e(p) > 0 ? e(k) / e(p) : 0), V = Ye(() => e(X), 200), H = S(() => {
+  let f = S(null), i = S("idle"), _ = S(0), p = S(0), w = S(We([]));
+  const C = q(() => x[o()] ?? Ge), U = q(() => e(i) === "playing"), G = q(() => e(i) === "loading"), F = q(() => e(i) === "error"), re = q(() => e(p) > 0 ? e(_) / e(p) : 0), V = Ye(() => e(G), 200), H = q(() => {
     if (!e(w).length || e(p) === 0)
       return 0;
-    const b = Math.floor(e(k) / e(p) * e(w).length), L = 3, Q = Math.max(0, b - Math.floor(L / 2)), ve = Math.min(e(w).length, Q + L), E = e(w).slice(Q, ve), R = E.reduce((t, T) => t + T * T, 0);
+    const b = Math.floor(e(_) / e(p) * e(w).length), L = 3, Q = Math.max(0, b - Math.floor(L / 2)), ve = Math.min(e(w).length, Q + L), E = e(w).slice(Q, ve), R = E.reduce((r, T) => r + T * T, 0);
     return Math.sqrt(R / E.length);
-  }), be = S(() => ({
+  }), be = q(() => ({
     onclick: I,
-    disabled: !a() || e(F),
-    loading: e(X),
-    visualization: i(),
-    progressPercent: e(te),
+    disabled: !n() || e(F),
+    loading: e(G),
+    visualization: l(),
+    progressPercent: e(re),
     isPlaying: e(U),
     amplitude: e(H),
     rippleIntensity: y(),
     ariaLabel: e(U) ? "Pause" : "Play",
-    ...o() === "blob" ? { animate: h(), speed: f() } : {}
+    ...o() === "blob" ? { animate: h(), speed: c() } : {}
   }));
   de(() => {
-    if (!a()) {
+    if (!n()) {
       console.warn("fortyfour-play-button: 'for' attribute is required");
       return;
     }
-    const b = n.getRootNode();
-    if (m(u, b.getElementById(a()), !0), !e(u)) {
-      console.warn(`fortyfour-play-button: element with id "${a()}" not found`);
+    const b = a.getRootNode();
+    if (m(f, b.getElementById(n()), !0), !e(f)) {
+      console.warn(`fortyfour-play-button: element with id "${n()}" not found`);
       return;
     }
     function L() {
-      m(s, e(u).state, !0), m(k, e(u).currentTime, !0), m(p, e(u).duration, !0), m(w, e(u).metadata?.waveform ?? [], !0);
+      m(i, e(f).state, !0), m(_, e(f).currentTime, !0), m(p, e(f).duration, !0), m(w, e(f).metadata?.waveform ?? [], !0);
     }
-    return L(), e(u).addEventListener("loading", L), e(u).addEventListener("loadedmetadata", L), e(u).addEventListener("play", L), e(u).addEventListener("pause", L), e(u).addEventListener("ended", L), e(u).addEventListener("error", L), e(u).addEventListener("timeupdate", L), () => {
-      e(u).removeEventListener("loading", L), e(u).removeEventListener("loadedmetadata", L), e(u).removeEventListener("play", L), e(u).removeEventListener("pause", L), e(u).removeEventListener("ended", L), e(u).removeEventListener("error", L), e(u).removeEventListener("timeupdate", L);
+    return L(), e(f).addEventListener("loading", L), e(f).addEventListener("loadedmetadata", L), e(f).addEventListener("play", L), e(f).addEventListener("pause", L), e(f).addEventListener("ended", L), e(f).addEventListener("error", L), e(f).addEventListener("timeupdate", L), () => {
+      e(f).removeEventListener("loading", L), e(f).removeEventListener("loadedmetadata", L), e(f).removeEventListener("play", L), e(f).removeEventListener("pause", L), e(f).removeEventListener("ended", L), e(f).removeEventListener("error", L), e(f).removeEventListener("timeupdate", L);
     };
   });
   function I() {
-    e(u)?.togglePlay();
+    e(f)?.togglePlay();
   }
-  Te(n, "data-playing", () => e(U)), Te(n, "data-loading", V), Te(n, "data-error", () => e(F));
+  Te(a, "data-playing", () => e(U)), Te(a, "data-loading", V), Te(a, "data-error", () => e(F));
   var j = {
     get for() {
-      return a();
+      return n();
     },
     set for(b = "") {
-      a(b), v();
+      n(b), v();
     },
     get shape() {
       return o();
@@ -1345,16 +1345,16 @@ function tt(g, r) {
       o(b), v();
     },
     get visualization() {
-      return i();
+      return l();
     },
     set visualization(b = "none") {
-      i(b), v();
+      l(b), v();
     },
     get hover() {
-      return l();
+      return s();
     },
     set hover(b = "none") {
-      l(b), v();
+      s(b), v();
     },
     get rippleIntensity() {
       return y();
@@ -1369,23 +1369,23 @@ function tt(g, r) {
       h(b), v();
     },
     get blobSpeed() {
-      return f();
+      return c();
     },
     set blobSpeed(b = 20) {
-      f(b), v();
+      c(b), v();
     }
-  }, B = et(), ee = G(B);
-  return Rr(ee, () => e(C), (b, L) => {
-    L(b, Ir(() => e(be), {
+  }, B = er(), ee = K(B);
+  return Rt(ee, () => e(C), (b, L) => {
+    L(b, It(() => e(be), {
       children: (Q, ve) => {
-        c(Q);
+        u(Q);
       },
       $$slots: { default: !0 }
     }));
-  }), D(B), z(g, B), ye(j);
+  }), D(B), k(g, B), ye(j);
 }
 customElements.define("fortyfour-play-button", ue(
-  tt,
+  rr,
   {
     for: { attribute: "for", reflect: !0 },
     shape: { attribute: "shape", reflect: !0 },
@@ -1399,92 +1399,92 @@ customElements.define("fortyfour-play-button", ue(
   [],
   !0
 ));
-function br(g, r) {
-  if (!g.length || r <= 0)
+function bt(g, t) {
+  if (!g.length || t <= 0)
     return [];
-  const c = g.length / r, n = [];
-  for (let a = 0; a < r; a++) {
-    const o = Math.floor(a * c), i = Math.floor((a + 1) * c), l = g.slice(o, Math.max(o + 1, i)), y = l.reduce((f, x) => f + x * x, 0), h = Math.sqrt(y / l.length);
-    n.push(h);
+  const u = g.length / t, a = [];
+  for (let n = 0; n < t; n++) {
+    const o = Math.floor(n * u), l = Math.floor((n + 1) * u), s = g.slice(o, Math.max(o + 1, l)), y = s.reduce((c, x) => c + x * x, 0), h = Math.sqrt(y / s.length);
+    a.push(h);
   }
-  return n;
+  return a;
 }
-function Qe(g, r, c) {
-  return function(a) {
-    const o = g(), i = r(), l = c();
-    if (!o || !l || i <= 0)
+function Qe(g, t, u) {
+  return function(n) {
+    const o = g(), l = t(), s = u();
+    if (!o || !s || l <= 0)
       return;
-    const y = a.clientX - l.left, f = Math.max(0, Math.min(1, y / l.width)) * i;
-    o.seek(f);
+    const y = n.clientX - s.left, c = Math.max(0, Math.min(1, y / s.width)) * l;
+    o.seek(c);
   };
 }
-function $e(g, r, c) {
-  return function(a) {
-    const o = g(), i = r(), l = c();
-    if (!o || i <= 0)
+function $e(g, t, u) {
+  return function(n) {
+    const o = g(), l = t(), s = u();
+    if (!o || l <= 0)
       return;
-    const y = i * 0.05;
-    a.key === "ArrowRight" ? o.seek(Math.min(i, l + y)) : a.key === "ArrowLeft" && o.seek(Math.max(0, l - y));
+    const y = l * 0.05;
+    n.key === "ArrowRight" ? o.seek(Math.min(l, s + y)) : n.key === "ArrowLeft" && o.seek(Math.max(0, s - y));
   };
 }
-var ot = Le("<rect></rect>"), at = K('<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 nt = {
+var or = Le("<rect></rect>"), ar = X('<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 nr = {
   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 it(g, r) {
-  ge(r, !0), we(g, nt);
-  const c = r.$$host;
-  let n = d(r, "for", 7, ""), a = d(r, "barWidth", 7, 3), o = d(r, "barGap", 7, 1), i = d(r, "barRadius", 7, 1), l = d(r, "minBarHeight", 7, 3), y = d(r, "height", 7, 56), h = q(We([])), f = q(0), x = q(0), u = q(null), s = q(0), k = q(!1), p = q(null);
-  c.style.height = `${y()}px`, sr(() => {
+function ir(g, t) {
+  ge(t, !0), we(g, nr);
+  const u = t.$$host;
+  let a = d(t, "for", 7, ""), n = d(t, "barWidth", 7, 3), o = d(t, "barGap", 7, 1), l = d(t, "barRadius", 7, 1), s = d(t, "minBarHeight", 7, 3), y = d(t, "height", 7, 56), h = S(We([])), c = S(0), x = S(0), f = S(null), i = S(0), _ = S(!1), p = S(null);
+  u.style.height = `${y()}px`, st(() => {
     const b = new ResizeObserver((L) => {
       for (let Q of L)
-        m(s, Q.contentRect.width || 0, !0), m(k, !0);
+        m(i, Q.contentRect.width || 0, !0), m(_, !0);
     });
     return e(p) && b.observe(e(p)), () => {
       b.disconnect();
     };
   }), de(() => {
-    if (!n()) {
+    if (!a()) {
       console.warn("fortyfour-bar-waveform: 'for' attribute is required");
       return;
     }
-    const b = c.getRootNode();
-    if (m(u, b.getElementById(n()), !0), !e(u)) {
-      console.warn(`fortyfour-bar-waveform: element with id "${n()}" not found`);
+    const b = u.getRootNode();
+    if (m(f, b.getElementById(a()), !0), !e(f)) {
+      console.warn(`fortyfour-bar-waveform: element with id "${a()}" not found`);
       return;
     }
-    e(u).metadata?.waveform && m(h, e(u).metadata.waveform, !0), e(u).duration && m(x, e(u).duration, !0), e(u).currentTime && m(f, e(u).currentTime, !0);
+    e(f).metadata?.waveform && m(h, e(f).metadata.waveform, !0), e(f).duration && m(x, e(f).duration, !0), e(f).currentTime && m(c, e(f).currentTime, !0);
     function L() {
-      m(h, e(u).metadata?.waveform || [], !0), m(x, e(u).duration, !0);
+      m(h, e(f).metadata?.waveform || [], !0), m(x, e(f).duration, !0);
     }
     function Q() {
-      m(f, e(u).currentTime, !0);
+      m(c, e(f).currentTime, !0);
     }
-    return e(u).addEventListener("loadedmetadata", L), e(u).addEventListener("timeupdate", Q), () => {
-      e(u).removeEventListener("loadedmetadata", L), e(u).removeEventListener("timeupdate", Q);
+    return e(f).addEventListener("loadedmetadata", L), e(f).addEventListener("timeupdate", Q), () => {
+      e(f).removeEventListener("loadedmetadata", L), e(f).removeEventListener("timeupdate", Q);
     };
   });
-  const w = S(() => Math.max(1, Math.floor(e(s) / (a() + o())))), C = S(() => e(h).length > 0), U = S(() => e(C) ? br(e(h), e(w)) : Array(e(w)).fill(0)), X = S(() => e(x) > 0 ? e(f) / e(x) : 0), F = S(() => `${Me(e(f))} of ${Me(e(x))}`), te = S(() => e(U).map((b) => {
-    const L = Math.max(l(), Math.round(b / 100 * (y() - l()) + l()));
+  const w = q(() => Math.max(1, Math.floor(e(i) / (n() + o())))), C = q(() => e(h).length > 0), U = q(() => e(C) ? bt(e(h), e(w)) : Array(e(w)).fill(0)), G = q(() => e(x) > 0 ? e(c) / e(x) : 0), F = q(() => `${Me(e(c))} of ${Me(e(x))}`), re = q(() => e(U).map((b) => {
+    const L = Math.max(s(), Math.round(b / 100 * (y() - s()) + s()));
     return L % 2 === 0 ? L + 1 : L;
   }));
   de(() => {
-    e(C) ? c.removeAttribute("data-placeholder") : c.setAttribute("data-placeholder", "");
+    e(C) ? u.removeAttribute("data-placeholder") : u.setAttribute("data-placeholder", "");
   });
-  const V = Qe(() => e(u), () => e(x), () => c.getBoundingClientRect()), H = $e(() => e(u), () => e(x), () => e(f));
+  const V = Qe(() => e(f), () => e(x), () => u.getBoundingClientRect()), H = $e(() => e(f), () => e(x), () => e(c));
   var be = {
     get for() {
-      return n();
+      return a();
     },
     set for(b = "") {
-      n(b), v();
+      a(b), v();
     },
     get barWidth() {
-      return a();
+      return n();
     },
     set barWidth(b = 3) {
-      a(b), v();
+      n(b), v();
     },
     get barGap() {
       return o();
@@ -1493,16 +1493,16 @@ function it(g, r) {
       o(b), v();
     },
     get barRadius() {
-      return i();
+      return l();
     },
     set barRadius(b = 1) {
-      i(b), v();
+      l(b), v();
     },
     get minBarHeight() {
-      return l();
+      return s();
     },
     set minBarHeight(b = 3) {
-      l(b), v();
+      s(b), v();
     },
     get height() {
       return y();
@@ -1510,34 +1510,34 @@ function it(g, r) {
     set height(b = 56) {
       y(b), v();
     }
-  }, I = at();
+  }, I = ar();
   I.__click = V, I.__keydown = H;
-  var j = G(I), B = G(j);
+  var j = K(I), B = K(j);
   {
     var ee = (b) => {
-      var L = se(), Q = re(L);
-      Be(Q, 17, () => e(te), Ne, (ve, E, R) => {
-        const t = S(() => (R + 1) / e(te).length), T = S(() => e(t) <= e(X));
-        var _ = ot();
+      var L = se(), Q = te(L);
+      Be(Q, 17, () => e(re), Ne, (ve, E, R) => {
+        const r = q(() => (R + 1) / e(re).length), T = q(() => e(r) <= e(G));
+        var P = or();
         M(
           (A) => {
-            ie(_, 0, ur(["bar", e(T) ? "progress" : "track"]), "svelte-kt0w9q"), W(_, "x", R * (a() + o())), W(_, "y", y() / 4 - e(E) / 2), W(_, "width", A), W(_, "height", e(E)), W(_, "rx", i());
+            ie(P, 0, ut(["bar", e(T) ? "progress" : "track"]), "svelte-kt0w9q"), W(P, "x", R * (n() + o())), W(P, "y", y() / 4 - e(E) / 2), W(P, "width", A), W(P, "height", e(E)), W(P, "rx", l());
           },
-          [() => Math.max(1, a() - 1)]
-        ), z(ve, _);
-      }), z(b, L);
+          [() => Math.max(1, n() - 1)]
+        ), k(ve, P);
+      }), k(b, L);
     };
     J(B, (b) => {
-      e(k) && b(ee);
+      e(_) && b(ee);
     });
   }
   return D(j), D(I), Pe(I, (b) => m(p, b), () => e(p)), M(() => {
-    W(I, "aria-valuemax", e(x)), W(I, "aria-valuenow", e(f)), W(I, "aria-valuetext", e(F)), W(j, "height", y()), W(j, "viewBox", `0 0 ${e(s)} ${y() / 2}`);
-  }), z(g, I), ye(be);
+    W(I, "aria-valuemax", e(x)), W(I, "aria-valuenow", e(c)), W(I, "aria-valuetext", e(F)), W(j, "height", y()), W(j, "viewBox", `0 0 ${e(i)} ${y() / 2}`);
+  }), k(g, I), ye(be);
 }
 He(["click", "keydown"]);
 customElements.define("fortyfour-bar-waveform", ue(
-  it,
+  ir,
   {
     for: { attribute: "for", reflect: !0 },
     barWidth: { attribute: "bar-width", reflect: !0, type: "Number" },
@@ -1550,8 +1550,8 @@ customElements.define("fortyfour-bar-waveform", ue(
   [],
   !0
 ));
-var lt = Le("<path></path>"), st = Le("<path></path><!>", 1), ut = Le('<line class="line track svelte-r3200f" stroke-linecap="round"></line>'), ft = K('<div class="waveform svelte-r3200f" 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-r3200f"><!></svg></div>');
-const ct = {
+var lr = Le("<path></path>"), sr = Le("<path></path><!>", 1), ur = Le('<line class="line track svelte-r3200f" stroke-linecap="round"></line>'), fr = X('<div class="waveform svelte-r3200f" 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-r3200f"><!></svg></div>');
+const cr = {
   hash: "svelte-r3200f",
   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;}
 
@@ -1559,176 +1559,176 @@ const ct = {
   }.waveform.svelte-r3200f {flex:1;height:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--fortyfour-line-waveform-focus-radius);}.waveform.svelte-r3200f: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-r3200f {display:block;}.line.svelte-r3200f {fill:none;stroke-linecap:round;stroke-linejoin:round;}.line.sharp.svelte-r3200f {stroke-linecap:square;stroke-linejoin:miter;}.track.svelte-r3200f {stroke:var(--fortyfour-line-waveform-track-color);}.progress.svelte-r3200f {stroke:var(--fortyfour-line-waveform-progress-color);}`
 };
-function dt(g, r) {
-  ge(r, !0), we(g, ct);
-  const c = r.$$host;
-  let n = d(r, "for", 7, ""), a = d(r, "lineWidth", 7, 2), o = d(r, "height", 7, 56), i = d(r, "sharp", 7, !1), l = q(We([])), y = q(0), h = q(0), f = q(null), x = q(0), u = q(!1), s = q(null);
-  c.style.height = `${o()}px`, sr(() => {
-    const t = new ResizeObserver((T) => {
-      for (let _ of T)
-        m(x, _.contentRect.width || 0, !0), m(u, !0);
+function dr(g, t) {
+  ge(t, !0), we(g, cr);
+  const u = t.$$host;
+  let a = d(t, "for", 7, ""), n = d(t, "lineWidth", 7, 2), o = d(t, "height", 7, 56), l = d(t, "sharp", 7, !1), s = S(We([])), y = S(0), h = S(0), c = S(null), x = S(0), f = S(!1), i = S(null);
+  u.style.height = `${o()}px`, st(() => {
+    const r = new ResizeObserver((T) => {
+      for (let P of T)
+        m(x, P.contentRect.width || 0, !0), m(f, !0);
     });
-    return e(s) && t.observe(e(s)), () => {
-      t.disconnect();
+    return e(i) && r.observe(e(i)), () => {
+      r.disconnect();
     };
   }), de(() => {
-    if (!n()) {
+    if (!a()) {
       console.warn("fortyfour-line-waveform: 'for' attribute is required");
       return;
     }
-    const t = c.getRootNode();
-    if (m(f, t.getElementById(n()), !0), !e(f)) {
-      console.warn(`fortyfour-line-waveform: element with id "${n()}" not found`);
+    const r = u.getRootNode();
+    if (m(c, r.getElementById(a()), !0), !e(c)) {
+      console.warn(`fortyfour-line-waveform: element with id "${a()}" not found`);
       return;
     }
-    e(f).metadata?.waveform && m(l, e(f).metadata.waveform, !0), e(f).duration && m(h, e(f).duration, !0), e(f).currentTime && m(y, e(f).currentTime, !0);
+    e(c).metadata?.waveform && m(s, e(c).metadata.waveform, !0), e(c).duration && m(h, e(c).duration, !0), e(c).currentTime && m(y, e(c).currentTime, !0);
     function T() {
-      m(l, e(f).metadata?.waveform || [], !0), m(h, e(f).duration, !0);
+      m(s, e(c).metadata?.waveform || [], !0), m(h, e(c).duration, !0);
     }
-    function _() {
-      m(y, e(f).currentTime, !0);
+    function P() {
+      m(y, e(c).currentTime, !0);
     }
-    return e(f).addEventListener("loadedmetadata", T), e(f).addEventListener("timeupdate", _), () => {
-      e(f).removeEventListener("loadedmetadata", T), e(f).removeEventListener("timeupdate", _);
+    return e(c).addEventListener("loadedmetadata", T), e(c).addEventListener("timeupdate", P), () => {
+      e(c).removeEventListener("loadedmetadata", T), e(c).removeEventListener("timeupdate", P);
     };
   });
-  const k = 0.15, p = S(() => Math.max(2, Math.floor(e(x) * k))), w = S(() => e(l).length > 0), C = S(() => e(w) ? br(e(l), e(p)) : []), U = S(() => e(h) > 0 ? e(y) / e(h) : 0), X = S(() => `${Me(e(y))} of ${Me(e(h))}`), F = S(() => o() / 2), te = S(() => o() / 2 * 0.8), V = S(() => {
+  const _ = 0.15, p = q(() => Math.max(2, Math.floor(e(x) * _))), w = q(() => e(s).length > 0), C = q(() => e(w) ? bt(e(s), e(p)) : []), U = q(() => e(h) > 0 ? e(y) / e(h) : 0), G = q(() => `${Me(e(y))} of ${Me(e(h))}`), F = q(() => o() / 2), re = q(() => o() / 2 * 0.8), V = q(() => {
     if (!e(C).length || e(x) === 0)
       return [];
-    const t = a() / 2, T = e(x) - t * 2;
-    return e(C).map((_, A) => {
-      const N = t + A / (e(C).length - 1) * T, Y = Math.max(0.05, _ / 100), P = A % 2 === 0 ? -1 : 1, O = e(F) + P * Y * e(te);
+    const r = n() / 2, T = e(x) - r * 2;
+    return e(C).map((P, A) => {
+      const N = r + A / (e(C).length - 1) * T, Y = Math.max(0.05, P / 100), z = A % 2 === 0 ? -1 : 1, O = e(F) + z * Y * e(re);
       return { x: N, y: O };
     });
   });
-  function H(t, T) {
-    if (t.length === 0)
+  function H(r, T) {
+    if (r.length === 0)
       return "";
-    let _ = `M ${t[0].x} ${t[0].y}`;
-    for (let A = 1; A < t.length; A++) {
-      const N = t[A - 1], Y = t[A];
+    let P = `M ${r[0].x} ${r[0].y}`;
+    for (let A = 1; A < r.length; A++) {
+      const N = r[A - 1], Y = r[A];
       if (T) {
-        const P = N.x + (Y.x - N.x) / 3, O = N.y, oe = N.x + (Y.x - N.x) * 2 / 3, ae = Y.y;
-        _ += ` C ${P} ${O}, ${oe} ${ae}, ${Y.x} ${Y.y}`;
+        const z = N.x + (Y.x - N.x) / 3, O = N.y, oe = N.x + (Y.x - N.x) * 2 / 3, ae = Y.y;
+        P += ` C ${z} ${O}, ${oe} ${ae}, ${Y.x} ${Y.y}`;
       } else
-        _ += ` L ${Y.x} ${Y.y}`;
+        P += ` L ${Y.x} ${Y.y}`;
     }
-    return _;
+    return P;
   }
-  const be = S(() => H(e(V), !i())), I = S(() => {
+  const be = q(() => H(e(V), !l())), I = q(() => {
     if (e(U) <= 0 || e(x) === 0)
       return 0;
-    const t = a() / 2, T = e(x) - t * 2;
-    return t + e(U) * T;
-  }), j = S(() => {
+    const r = n() / 2, T = e(x) - r * 2;
+    return r + e(U) * T;
+  }), j = q(() => {
     if (e(V).length === 0 || e(I) <= 0)
       return "";
-    const t = [];
+    const r = [];
     let T = null;
     for (let A = 0; A < e(V).length; A++)
       if (e(V)[A].x <= e(I))
-        t.push(e(V)[A]);
+        r.push(e(V)[A]);
       else {
         T = e(V)[A];
         break;
       }
-    if (t.length === 0)
+    if (r.length === 0)
       return "";
-    const _ = t[t.length - 1];
-    if (T && _.x < e(I)) {
-      const A = (e(I) - _.x) / (T.x - _.x), N = _.y + A * (T.y - _.y);
-      t.push({ x: e(I), y: N });
+    const P = r[r.length - 1];
+    if (T && P.x < e(I)) {
+      const A = (e(I) - P.x) / (T.x - P.x), N = P.y + A * (T.y - P.y);
+      r.push({ x: e(I), y: N });
     }
-    return H(t, !i());
+    return H(r, !l());
   });
   de(() => {
-    e(w) ? c.removeAttribute("data-placeholder") : c.setAttribute("data-placeholder", "");
+    e(w) ? u.removeAttribute("data-placeholder") : u.setAttribute("data-placeholder", "");
   });
-  const B = Qe(() => e(f), () => e(h), () => e(s).getBoundingClientRect()), ee = $e(() => e(f), () => e(h), () => e(y));
+  const B = Qe(() => e(c), () => e(h), () => e(i).getBoundingClientRect()), ee = $e(() => e(c), () => e(h), () => e(y));
   var b = {
     get for() {
-      return n();
+      return a();
     },
-    set for(t = "") {
-      n(t), v();
+    set for(r = "") {
+      a(r), v();
     },
     get lineWidth() {
-      return a();
+      return n();
     },
-    set lineWidth(t = 2) {
-      a(t), v();
+    set lineWidth(r = 2) {
+      n(r), v();
     },
     get height() {
       return o();
     },
-    set height(t = 56) {
-      o(t), v();
+    set height(r = 56) {
+      o(r), v();
     },
     get sharp() {
-      return i();
+      return l();
     },
-    set sharp(t = !1) {
-      i(t), v();
+    set sharp(r = !1) {
+      l(r), v();
     }
-  }, L = ft();
+  }, L = fr();
   L.__click = B, L.__keydown = ee;
-  var Q = G(L), ve = G(Q);
+  var Q = K(L), ve = K(Q);
   {
-    var E = (t) => {
-      var T = st(), _ = re(T);
+    var E = (r) => {
+      var T = sr(), P = te(T);
       let A;
-      var N = pe(_);
+      var N = pe(P);
       {
-        var Y = (P) => {
-          var O = lt();
+        var Y = (z) => {
+          var O = lr();
           let oe;
           M(
             (ae) => {
-              oe = ie(O, 0, "line progress svelte-r3200f", null, oe, ae), W(O, "d", e(j)), W(O, "stroke-width", a());
+              oe = ie(O, 0, "line progress svelte-r3200f", null, oe, ae), W(O, "d", e(j)), W(O, "stroke-width", n());
             },
-            [() => ({ sharp: i() })]
-          ), z(P, O);
+            [() => ({ sharp: l() })]
+          ), k(z, O);
         };
-        J(N, (P) => {
-          e(j) && P(Y);
+        J(N, (z) => {
+          e(j) && z(Y);
         });
       }
       M(
-        (P) => {
-          A = ie(_, 0, "line track svelte-r3200f", null, A, P), W(_, "d", e(be)), W(_, "stroke-width", a());
+        (z) => {
+          A = ie(P, 0, "line track svelte-r3200f", null, A, z), W(P, "d", e(be)), W(P, "stroke-width", n());
         },
-        [() => ({ sharp: i() })]
-      ), z(t, T);
-    }, R = (t) => {
-      var T = se(), _ = re(T);
+        [() => ({ sharp: l() })]
+      ), k(r, T);
+    }, R = (r) => {
+      var T = se(), P = te(T);
       {
         var A = (N) => {
-          var Y = ut();
+          var Y = ur();
           M(() => {
-            W(Y, "x1", a() / 2), W(Y, "y1", o() / 2), W(Y, "x2", e(x) - a() / 2), W(Y, "y2", o() / 2), W(Y, "stroke-width", a());
-          }), z(N, Y);
+            W(Y, "x1", n() / 2), W(Y, "y1", o() / 2), W(Y, "x2", e(x) - n() / 2), W(Y, "y2", o() / 2), W(Y, "stroke-width", n());
+          }), k(N, Y);
         };
         J(
-          _,
+          P,
           (N) => {
-            e(u) && N(A);
+            e(f) && N(A);
           },
           !0
         );
       }
-      z(t, T);
+      k(r, T);
     };
-    J(ve, (t) => {
-      e(u) && e(be) ? t(E) : t(R, !1);
+    J(ve, (r) => {
+      e(f) && e(be) ? r(E) : r(R, !1);
     });
   }
-  return D(Q), D(L), Pe(L, (t) => m(s, t), () => e(s)), M(() => {
-    W(L, "aria-valuemax", e(h)), W(L, "aria-valuenow", e(y)), W(L, "aria-valuetext", e(X)), W(Q, "height", o()), W(Q, "viewBox", `0 0 ${e(x)} ${o()}`);
-  }), z(g, L), ye(b);
+  return D(Q), D(L), Pe(L, (r) => m(i, r), () => e(i)), M(() => {
+    W(L, "aria-valuemax", e(h)), W(L, "aria-valuenow", e(y)), W(L, "aria-valuetext", e(G)), W(Q, "height", o()), W(Q, "viewBox", `0 0 ${e(x)} ${o()}`);
+  }), k(g, L), ye(b);
 }
 He(["click", "keydown"]);
 customElements.define("fortyfour-line-waveform", ue(
-  dt,
+  dr,
   {
     for: { attribute: "for", reflect: !0 },
     lineWidth: { attribute: "line-width", reflect: !0, type: "Number" },
@@ -1739,8 +1739,8 @@ customElements.define("fortyfour-line-waveform", ue(
   [],
   !0
 ));
-var vt = K('<div class="container svelte-16bcl3p" role="slider" tabindex="0" aria-valuemin="0" aria-label="Audio playback position"><div class="track svelte-16bcl3p"><div class="progress svelte-16bcl3p"></div></div></div>');
-const pt = {
+var vr = X('<div class="container svelte-16bcl3p" role="slider" tabindex="0" aria-valuemin="0" aria-label="Audio playback position"><div class="track svelte-16bcl3p"><div class="progress svelte-16bcl3p"></div></div></div>');
+const pr = {
   hash: "svelte-16bcl3p",
   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;}
 
@@ -1748,44 +1748,44 @@ const pt = {
   }.container.svelte-16bcl3p {flex:1;display:flex;align-items:center;cursor:pointer;border-radius:4px;}.container.svelte-16bcl3p: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-16bcl3p {width:100%;background:var(--fortyfour-progress-bar-track-color);overflow:hidden;}.progress.svelte-16bcl3p {height:100%;background:var(--fortyfour-progress-bar-progress-color);transition:width 0.1s linear;}`
 };
-function gt(g, r) {
-  ge(r, !0), we(g, pt);
-  const c = r.$$host;
-  let n = d(r, "for", 7, ""), a = d(r, "barHeight", 7, 4), o = d(r, "barRadius", 7, 2), i = q(0), l = q(0), y = q(null), h = q(null);
+function gr(g, t) {
+  ge(t, !0), we(g, pr);
+  const u = t.$$host;
+  let a = d(t, "for", 7, ""), n = d(t, "barHeight", 7, 4), o = d(t, "barRadius", 7, 2), l = S(0), s = S(0), y = S(null), h = S(null);
   de(() => {
-    if (!n()) {
+    if (!a()) {
       console.warn("fortyfour-progress-bar: 'for' attribute is required");
       return;
     }
-    const F = c.getRootNode();
-    if (m(y, F.getElementById(n()), !0), !e(y)) {
-      console.warn(`fortyfour-progress-bar: element with id "${n()}" not found`);
+    const F = u.getRootNode();
+    if (m(y, F.getElementById(a()), !0), !e(y)) {
+      console.warn(`fortyfour-progress-bar: element with id "${a()}" not found`);
       return;
     }
-    e(y).duration && m(l, e(y).duration, !0), e(y).currentTime && m(i, e(y).currentTime, !0);
-    function te() {
-      m(l, e(y).duration, !0);
+    e(y).duration && m(s, e(y).duration, !0), e(y).currentTime && m(l, e(y).currentTime, !0);
+    function re() {
+      m(s, e(y).duration, !0);
     }
     function V() {
-      m(i, e(y).currentTime, !0);
+      m(l, e(y).currentTime, !0);
     }
-    return e(y).addEventListener("loadedmetadata", te), e(y).addEventListener("timeupdate", V), () => {
-      e(y).removeEventListener("loadedmetadata", te), e(y).removeEventListener("timeupdate", V);
+    return e(y).addEventListener("loadedmetadata", re), e(y).addEventListener("timeupdate", V), () => {
+      e(y).removeEventListener("loadedmetadata", re), e(y).removeEventListener("timeupdate", V);
     };
   });
-  const f = S(() => e(l) > 0 ? e(i) / e(l) * 100 : 0), x = S(() => `${Me(e(i))} of ${Me(e(l))}`), u = Qe(() => e(y), () => e(l), () => e(h)?.getBoundingClientRect()), s = $e(() => e(y), () => e(l), () => e(i));
-  var k = {
+  const c = q(() => e(s) > 0 ? e(l) / e(s) * 100 : 0), x = q(() => `${Me(e(l))} of ${Me(e(s))}`), f = Qe(() => e(y), () => e(s), () => e(h)?.getBoundingClientRect()), i = $e(() => e(y), () => e(s), () => e(l));
+  var _ = {
     get for() {
-      return n();
+      return a();
     },
     set for(F = "") {
-      n(F), v();
+      a(F), v();
     },
     get barHeight() {
-      return a();
+      return n();
     },
     set barHeight(F = 4) {
-      a(F), v();
+      n(F), v();
     },
     get barRadius() {
       return o();
@@ -1793,31 +1793,31 @@ function gt(g, r) {
     set barRadius(F = 2) {
       o(F), v();
     }
-  }, p = vt();
-  p.__click = u, p.__keydown = s;
-  var w = G(p);
+  }, p = vr();
+  p.__click = f, p.__keydown = i;
+  var w = K(p);
   let C;
-  var U = G(w);
-  let X;
+  var U = K(w);
+  let G;
   return D(w), Pe(w, (F) => m(h, F), () => e(h)), D(p), M(
-    (F, te) => {
-      W(p, "aria-valuemax", e(l)), W(p, "aria-valuenow", e(i)), W(p, "aria-valuetext", e(x)), C = me(w, "", C, F), X = me(U, "", X, te);
+    (F, re) => {
+      W(p, "aria-valuemax", e(s)), W(p, "aria-valuenow", e(l)), W(p, "aria-valuetext", e(x)), C = me(w, "", C, F), G = me(U, "", G, re);
     },
     [
       () => ({
-        height: `${a() ?? ""}px`,
+        height: `${n() ?? ""}px`,
         "border-radius": `${o() ?? ""}px`
       }),
       () => ({
-        width: `${e(f) ?? ""}%`,
+        width: `${e(c) ?? ""}%`,
         "border-radius": `${o() ?? ""}px`
       })
     ]
-  ), z(g, p), ye(k);
+  ), k(g, p), ye(_);
 }
 He(["click", "keydown"]);
 customElements.define("fortyfour-progress-bar", ue(
-  gt,
+  gr,
   {
     for: { attribute: "for", reflect: !0 },
     barHeight: { attribute: "bar-height", reflect: !0, type: "Number" },
@@ -1827,8 +1827,8 @@ customElements.define("fortyfour-progress-bar", ue(
   [],
   !0
 ));
-var yt = K("<span> </span>"), bt = K('<div class="content svelte-1lixazt"><div class="text caption-text svelte-1lixazt"></div></div>'), ht = K("<span> </span>"), mt = K('<div class="text caption-text subtitle svelte-1lixazt"></div>'), wt = K('<div class="content subtitle-content svelte-1lixazt"><!></div>'), xt = K("<span> </span>"), zt = K('<div class="content svelte-1lixazt"><div class="text caption-text svelte-1lixazt"></div></div>'), kt = K('<div class="content svelte-1lixazt"><div class="text svelte-1lixazt"> </div></div>'), _t = K('<div class="placeholder-lines svelte-1lixazt"><span class="placeholder-line svelte-1lixazt"></span> <span class="placeholder-line short svelte-1lixazt"></span></div>'), Pt = K("<div><div><!></div></div>");
-const Lt = {
+var yr = X("<span> </span>"), br = X('<div class="content svelte-1lixazt"><div class="text caption-text svelte-1lixazt"></div></div>'), hr = X("<span> </span>"), mr = X('<div class="text caption-text subtitle svelte-1lixazt"></div>'), wr = X('<div class="content subtitle-content svelte-1lixazt"><!></div>'), xr = X("<span> </span>"), kr = X('<div class="content svelte-1lixazt"><div class="text caption-text svelte-1lixazt"></div></div>'), _r = X('<div class="content svelte-1lixazt"><div class="text svelte-1lixazt"> </div></div>'), zr = X('<div class="placeholder-lines svelte-1lixazt"><span class="placeholder-line svelte-1lixazt"></span> <span class="placeholder-line short svelte-1lixazt"></span></div>'), Pr = X("<div><div><!></div></div>");
+const Lr = {
   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);}
 
@@ -1837,97 +1837,97 @@ const Lt = {
   .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 Et(g, r) {
-  ge(r, !0), we(g, Lt);
-  const c = r.$$host;
-  let n = d(r, "for", 7, ""), a = d(r, "mode", 7, "static"), o = d(r, "maxHeight", 7, 0), i = q(null);
-  const l = S(() => o() > 0);
-  let y = q(!1), h = q(!1);
-  function f() {
-    if (!e(i) || !e(l)) {
+function Er(g, t) {
+  ge(t, !0), we(g, Lr);
+  const u = t.$$host;
+  let a = d(t, "for", 7, ""), n = d(t, "mode", 7, "static"), o = d(t, "maxHeight", 7, 0), l = S(null);
+  const s = q(() => o() > 0);
+  let y = S(!1), h = S(!1);
+  function c() {
+    if (!e(l) || !e(s)) {
       m(y, !1), m(h, !1);
       return;
     }
-    const { scrollTop: E, scrollHeight: R, clientHeight: t } = e(i);
-    m(y, E > 1), m(h, E + t < R - 1);
+    const { scrollTop: E, scrollHeight: R, clientHeight: r } = e(l);
+    m(y, E > 1), m(h, E + r < R - 1);
   }
-  let x = q(null), u = q(null), s = q("none"), k = q(0);
-  const p = Ye(() => e(x) === null, 200), w = S(() => e(x) !== null ? !1 : e(s) === "none" ? !0 : p()), C = S(() => e(u) !== null && e(u).length > 0), U = S(() => !e(C) || a() === "static" ? -1 : e(u).findIndex((E) => e(k) >= E.start && e(k) <= E.end));
-  function X(E) {
+  let x = S(null), f = S(null), i = S("none"), _ = S(0);
+  const p = Ye(() => e(x) === null, 200), w = q(() => e(x) !== null ? !1 : e(i) === "none" ? !0 : p()), C = q(() => e(f) !== null && e(f).length > 0), U = q(() => !e(C) || n() === "static" ? -1 : e(f).findIndex((E) => e(_) >= E.start && e(_) <= E.end));
+  function G(E) {
     const R = [];
-    let t = { words: [], start: 0, end: 0 };
+    let r = { words: [], start: 0, end: 0 };
     for (const T of E) {
-      t.words.length === 0 && (t.start = T.start), t.words.push(T), t.end = T.end;
-      const _ = T.text.trim();
-      (_.endsWith(".") || _.endsWith("?") || _.endsWith("!")) && (R.push(t), t = { words: [], start: 0, end: 0 });
+      r.words.length === 0 && (r.start = T.start), r.words.push(T), r.end = T.end;
+      const P = T.text.trim();
+      (P.endsWith(".") || P.endsWith("?") || P.endsWith("!")) && (R.push(r), r = { words: [], start: 0, end: 0 });
     }
-    return t.words.length > 0 && R.push(t), R;
+    return r.words.length > 0 && R.push(r), R;
   }
-  const F = S(() => e(C) ? X(e(u)) : []), te = S(() => a() !== "subtitle" || e(F).length === 0 ? null : e(F).find((E) => e(k) >= E.start && e(k) <= E.end) ?? null);
+  const F = q(() => e(C) ? G(e(f)) : []), re = q(() => n() !== "subtitle" || e(F).length === 0 ? null : e(F).find((E) => e(_) >= E.start && e(_) <= E.end) ?? null);
   function V(E) {
-    return e(k) >= E.start && e(k) <= E.end;
+    return e(_) >= E.start && e(_) <= E.end;
   }
   function H(E) {
-    return e(k) > E.end;
+    return e(_) > E.end;
   }
   de(() => {
-    if (!n()) {
+    if (!a()) {
       console.warn("fortyfour-transcription: 'for' attribute is required");
       return;
     }
-    const R = c.getRootNode().getElementById(n());
+    const R = u.getRootNode().getElementById(a());
     if (!R) {
-      console.warn(`fortyfour-transcription: element with id "${n()}" not found`);
+      console.warn(`fortyfour-transcription: element with id "${a()}" not found`);
       return;
     }
-    m(s, R.getAttribute("preload") || "none", !0);
-    const t = R.metadata;
-    t && (m(x, t.transcription ?? null, !0), m(u, t.words ?? null, !0)), R.currentTime && m(k, R.currentTime, !0);
+    m(i, R.getAttribute("preload") || "none", !0);
+    const r = R.metadata;
+    r && (m(x, r.transcription ?? null, !0), m(f, r.words ?? null, !0)), R.currentTime && m(_, R.currentTime, !0);
     function T() {
       const A = R.metadata;
-      m(x, A?.transcription ?? null, !0), m(u, A?.words ?? null, !0);
+      m(x, A?.transcription ?? null, !0), m(f, A?.words ?? null, !0);
     }
-    function _() {
-      m(k, R.currentTime, !0);
+    function P() {
+      m(_, R.currentTime, !0);
     }
-    return R.addEventListener("loadedmetadata", T), R.addEventListener("timeupdate", _), () => {
-      R.removeEventListener("loadedmetadata", T), R.removeEventListener("timeupdate", _);
+    return R.addEventListener("loadedmetadata", T), R.addEventListener("timeupdate", P), () => {
+      R.removeEventListener("loadedmetadata", T), R.removeEventListener("timeupdate", P);
     };
-  }), Te(c, "data-placeholder", () => e(w)), de(() => {
-    if (!e(i) || !e(l))
+  }), Te(u, "data-placeholder", () => e(w)), de(() => {
+    if (!e(l) || !e(s))
       return;
-    f(), e(i).addEventListener("scroll", f);
-    const E = new ResizeObserver(f);
-    return E.observe(e(i)), () => {
-      e(i).removeEventListener("scroll", f), E.disconnect();
+    c(), e(l).addEventListener("scroll", c);
+    const E = new ResizeObserver(c);
+    return E.observe(e(l)), () => {
+      e(l).removeEventListener("scroll", c), E.disconnect();
     };
   }), de(() => {
-    if (!e(l) || a() !== "karaoke")
+    if (!e(s) || n() !== "karaoke")
       return;
-    if (e(k) < 0.1) {
-      e(i)?.scrollTo({ top: 0, behavior: "smooth" });
+    if (e(_) < 0.1) {
+      e(l)?.scrollTo({ top: 0, behavior: "smooth" });
       return;
     }
     if (e(U) < 0)
       return;
-    const E = e(i)?.querySelector(".word.active");
+    const E = e(l)?.querySelector(".word.active");
     if (E) {
-      const R = e(i).getBoundingClientRect(), t = E.getBoundingClientRect(), T = e(i).scrollTop + (t.top - R.top) - R.height / 2 + t.height / 2;
-      e(i).scrollTo({ top: T, behavior: "smooth" });
+      const R = e(l).getBoundingClientRect(), r = E.getBoundingClientRect(), T = e(l).scrollTop + (r.top - R.top) - R.height / 2 + r.height / 2;
+      e(l).scrollTo({ top: T, behavior: "smooth" });
     }
   });
   var be = {
     get for() {
-      return n();
+      return a();
     },
     set for(E = "") {
-      n(E), v();
+      a(E), v();
     },
     get mode() {
-      return a();
+      return n();
     },
     set mode(E = "static") {
-      a(E), v();
+      n(E), v();
     },
     get maxHeight() {
       return o();
@@ -1935,21 +1935,21 @@ function Et(g, r) {
     set maxHeight(E = 0) {
       o(E), v();
     }
-  }, I = Pt();
+  }, I = Pr();
   let j;
-  var B = G(I);
+  var B = K(I);
   let ee, b;
-  var L = G(B);
+  var L = K(B);
   {
     var Q = (E) => {
-      var R = bt(), t = G(R);
-      Be(t, 21, () => e(u), Ne, (T, _, A) => {
-        var N = yt();
+      var R = br(), r = K(R);
+      Be(r, 21, () => e(f), Ne, (T, P, A) => {
+        var N = yr();
         let Y;
-        var P = G(N, !0);
+        var z = K(N, !0);
         D(N), M(
           (O) => {
-            Y = ie(N, 1, "word svelte-1lixazt", null, Y, O), W(N, "data-type", e(_).type), Ee(P, e(_).text);
+            Y = ie(N, 1, "word svelte-1lixazt", null, Y, O), W(N, "data-type", e(P).type), Ee(z, e(P).text);
           },
           [
             () => ({
@@ -1957,20 +1957,20 @@ function Et(g, r) {
               past: A < e(U)
             })
           ]
-        ), z(T, N);
-      }), D(t), D(R), Ce(1, R, () => Re, () => ({ duration: 400 })), z(E, R);
+        ), k(T, N);
+      }), D(r), D(R), Ce(1, R, () => Re, () => ({ duration: 400 })), k(E, R);
     }, ve = (E) => {
-      var R = se(), t = re(R);
+      var R = se(), r = te(R);
       {
         var T = (A) => {
-          var N = wt(), Y = G(N);
+          var N = wr(), Y = K(N);
           {
-            var P = (O) => {
-              var oe = mt();
-              Be(oe, 21, () => e(te).words, Ne, (ae, ce) => {
-                var le = ht();
+            var z = (O) => {
+              var oe = mr();
+              Be(oe, 21, () => e(re).words, Ne, (ae, ce) => {
+                var le = hr();
                 let $;
-                var xe = G(le, !0);
+                var xe = K(le, !0);
                 D(le), M(
                   (ne) => {
                     $ = ie(le, 1, "word svelte-1lixazt", null, $, ne), W(le, "data-type", e(ce).type), Ee(xe, e(ce).text);
@@ -1981,64 +1981,64 @@ function Et(g, r) {
                       past: H(e(ce))
                     })
                   ]
-                ), z(ae, le);
-              }), D(oe), Ce(1, oe, () => Re, () => ({ duration: 200 })), z(O, oe);
+                ), k(ae, le);
+              }), D(oe), Ce(1, oe, () => Re, () => ({ duration: 200 })), k(O, oe);
             };
             J(Y, (O) => {
-              e(te) && O(P);
+              e(re) && O(z);
             });
           }
-          D(N), z(A, N);
-        }, _ = (A) => {
-          var N = se(), Y = re(N);
+          D(N), k(A, N);
+        }, P = (A) => {
+          var N = se(), Y = te(N);
           {
-            var P = (oe) => {
-              var ae = zt(), ce = G(ae);
-              Be(ce, 21, () => e(u), Ne, (le, $, xe) => {
-                var ne = se(), fe = re(ne);
+            var z = (oe) => {
+              var ae = kr(), ce = K(ae);
+              Be(ce, 21, () => e(f), Ne, (le, $, xe) => {
+                var ne = se(), fe = te(ne);
                 {
-                  var ze = (ke) => {
-                    var _e = xt();
+                  var ke = (_e) => {
+                    var ze = xr();
                     let je;
-                    var Ue = G(_e, !0);
-                    D(_e), M(
-                      (mr) => {
-                        je = ie(_e, 1, "word svelte-1lixazt", null, je, mr), W(_e, "data-type", e($).type), Ee(Ue, e($).text);
+                    var Ue = K(ze, !0);
+                    D(ze), M(
+                      (mt) => {
+                        je = ie(ze, 1, "word svelte-1lixazt", null, je, mt), W(ze, "data-type", e($).type), Ee(Ue, e($).text);
                       },
                       [() => ({ active: xe === e(U) })]
-                    ), Ce(1, _e, () => Re, () => ({ duration: 150 })), z(ke, _e);
+                    ), Ce(1, ze, () => Re, () => ({ duration: 150 })), k(_e, ze);
                   };
-                  J(fe, (ke) => {
-                    e(k) >= e($).start && ke(ze);
+                  J(fe, (_e) => {
+                    e(_) >= e($).start && _e(ke);
                   });
                 }
-                z(le, ne);
-              }), D(ce), D(ae), Ce(1, ae, () => Re, () => ({ duration: 400 })), z(oe, ae);
+                k(le, ne);
+              }), D(ce), D(ae), Ce(1, ae, () => Re, () => ({ duration: 400 })), k(oe, ae);
             }, O = (oe) => {
-              var ae = se(), ce = re(ae);
+              var ae = se(), ce = te(ae);
               {
                 var le = (xe) => {
-                  var ne = kt(), fe = G(ne), ze = G(fe, !0);
-                  D(fe), D(ne), M(() => Ee(ze, e(x))), Ce(1, ne, () => Re, () => ({ duration: 400 })), z(xe, ne);
+                  var ne = _r(), fe = K(ne), ke = K(fe, !0);
+                  D(fe), D(ne), M(() => Ee(ke, e(x))), Ce(1, ne, () => Re, () => ({ duration: 400 })), k(xe, ne);
                 }, $ = (xe) => {
-                  var ne = se(), fe = re(ne);
+                  var ne = se(), fe = te(ne);
                   {
-                    var ze = (ke) => {
-                      var _e = _t();
+                    var ke = (_e) => {
+                      var ze = zr();
                       let je;
-                      M((Ue) => je = me(_e, "", je, Ue), [
-                        () => ({ height: e(l) ? `${o()}px` : void 0 })
-                      ]), z(ke, _e);
+                      M((Ue) => je = me(ze, "", je, Ue), [
+                        () => ({ height: e(s) ? `${o()}px` : void 0 })
+                      ]), k(_e, ze);
                     };
                     J(
                       fe,
-                      (ke) => {
-                        e(w) && ke(ze);
+                      (_e) => {
+                        e(w) && _e(ke);
                       },
                       !0
                     );
                   }
-                  z(xe, ne);
+                  k(xe, ne);
                 };
                 J(
                   ce,
@@ -2048,51 +2048,51 @@ function Et(g, r) {
                   !0
                 );
               }
-              z(oe, ae);
+              k(oe, ae);
             };
             J(
               Y,
               (oe) => {
-                a() === "progressive" && e(C) ? oe(P) : oe(O, !1);
+                n() === "progressive" && e(C) ? oe(z) : oe(O, !1);
               },
               !0
             );
           }
-          z(A, N);
+          k(A, N);
         };
         J(
-          t,
+          r,
           (A) => {
-            a() === "subtitle" && e(C) ? A(T) : A(_, !1);
+            n() === "subtitle" && e(C) ? A(T) : A(P, !1);
           },
           !0
         );
       }
-      z(E, R);
+      k(E, R);
     };
     J(L, (E) => {
-      a() === "karaoke" && e(C) ? E(Q) : E(ve, !1);
+      n() === "karaoke" && e(C) ? E(Q) : E(ve, !1);
     });
   }
-  return D(B), Pe(B, (E) => m(i, E), () => e(i)), D(I), M(
-    (E, R, t) => {
-      j = ie(I, 1, "wrapper svelte-1lixazt", null, j, E), ee = ie(B, 1, "container svelte-1lixazt", null, ee, R), b = me(B, "", b, t);
+  return D(B), Pe(B, (E) => m(l, E), () => e(l)), D(I), M(
+    (E, R, r) => {
+      j = ie(I, 1, "wrapper svelte-1lixazt", null, j, E), ee = ie(B, 1, "container svelte-1lixazt", null, ee, R), b = me(B, "", b, r);
     },
     [
       () => ({
-        scrollable: e(l),
+        scrollable: e(s),
         "can-scroll-up": e(y),
         "can-scroll-down": e(h)
       }),
-      () => ({ scrollable: e(l) }),
+      () => ({ scrollable: e(s) }),
       () => ({
-        "max-height": e(l) ? `${o()}px` : void 0
+        "max-height": e(s) ? `${o()}px` : void 0
       })
     ]
-  ), z(g, I), ye(be);
+  ), k(g, I), ye(be);
 }
 customElements.define("fortyfour-transcription", ue(
-  Et,
+  Er,
   {
     for: { attribute: "for", reflect: !0 },
     mode: { attribute: "mode", reflect: !0 },
@@ -2102,8 +2102,8 @@ customElements.define("fortyfour-transcription", ue(
   [],
   !0
 ));
-var It = K('<div class="content svelte-z1j7sg"><div class="text svelte-z1j7sg"> </div></div>'), Ct = K('<div class="placeholder-lines svelte-z1j7sg"><span class="placeholder-line svelte-z1j7sg"></span> <span class="placeholder-line short svelte-z1j7sg"></span></div>'), Rt = K("<div><div><!></div></div>");
-const Tt = {
+var Ir = X('<div class="content svelte-z1j7sg"><div class="text svelte-z1j7sg"> </div></div>'), Cr = X('<div class="placeholder-lines svelte-z1j7sg"><span class="placeholder-line svelte-z1j7sg"></span> <span class="placeholder-line short svelte-z1j7sg"></span></div>'), Rr = X("<div><div><!></div></div>");
+const Tr = {
   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);}
 
@@ -2111,50 +2111,50 @@ const Tt = {
   }.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 Mt(g, r) {
-  ge(r, !0), we(g, Tt);
-  const c = r.$$host;
-  let n = d(r, "for", 7, ""), a = d(r, "maxHeight", 7, 0), o = q(null);
-  const i = S(() => a() > 0);
-  let l = q(!1), y = q(!1);
+function Mr(g, t) {
+  ge(t, !0), we(g, Tr);
+  const u = t.$$host;
+  let a = d(t, "for", 7, ""), n = d(t, "maxHeight", 7, 0), o = S(null);
+  const l = q(() => n() > 0);
+  let s = S(!1), y = S(!1);
   function h() {
-    if (!e(o) || !e(i)) {
-      m(l, !1), m(y, !1);
+    if (!e(o) || !e(l)) {
+      m(s, !1), m(y, !1);
       return;
     }
     const { scrollTop: I, scrollHeight: j, clientHeight: B } = e(o);
-    m(l, I > 1), m(y, I + B < j - 1);
+    m(s, I > 1), m(y, I + B < j - 1);
   }
-  let f = q(null), x = q("none");
-  function u(I) {
+  let c = S(null), x = S("none");
+  function f(I) {
     if (!I)
       return I;
     const j = document.createElement("textarea");
     return j.innerHTML = I, j.value;
   }
-  const s = S(() => u(e(f))), k = Ye(() => e(f) === null, 200), p = S(() => e(f) !== null ? !1 : e(x) === "none" ? !0 : k());
+  const i = q(() => f(e(c))), _ = Ye(() => e(c) === null, 200), p = q(() => e(c) !== null ? !1 : e(x) === "none" ? !0 : _());
   de(() => {
-    if (!n()) {
+    if (!a()) {
       console.warn("fortyfour-translation: 'for' attribute is required");
       return;
     }
-    const j = c.getRootNode().getElementById(n());
+    const j = u.getRootNode().getElementById(a());
     if (!j) {
-      console.warn(`fortyfour-translation: element with id "${n()}" not found`);
+      console.warn(`fortyfour-translation: element with id "${a()}" not found`);
       return;
     }
     m(x, j.getAttribute("preload") || "none", !0);
     const B = j.metadata;
-    B && m(f, B.translation ?? null, !0);
+    B && m(c, B.translation ?? null, !0);
     function ee() {
       const b = j.metadata;
-      m(f, b?.translation ?? null, !0);
+      m(c, b?.translation ?? null, !0);
     }
     return j.addEventListener("loadedmetadata", ee), () => {
       j.removeEventListener("loadedmetadata", ee);
     };
-  }), Te(c, "data-placeholder", () => e(p)), de(() => {
-    if (!e(o) || !e(i))
+  }), Te(u, "data-placeholder", () => e(p)), de(() => {
+    if (!e(o) || !e(l))
       return;
     h(), e(o).addEventListener("scroll", h);
     const I = new ResizeObserver(h);
@@ -2164,35 +2164,35 @@ function Mt(g, r) {
   });
   var w = {
     get for() {
-      return n();
+      return a();
     },
     set for(I = "") {
-      n(I), v();
+      a(I), v();
     },
     get maxHeight() {
-      return a();
+      return n();
     },
     set maxHeight(I = 0) {
-      a(I), v();
+      n(I), v();
     }
-  }, C = Rt();
+  }, C = Rr();
   let U;
-  var X = G(C);
-  let F, te;
-  var V = G(X);
+  var G = K(C);
+  let F, re;
+  var V = K(G);
   {
     var H = (I) => {
-      var j = It(), B = G(j), ee = G(B, !0);
-      D(B), D(j), M(() => Ee(ee, e(s))), Ce(1, j, () => Re, () => ({ duration: 400 })), z(I, j);
+      var j = Ir(), B = K(j), ee = K(B, !0);
+      D(B), D(j), M(() => Ee(ee, e(i))), Ce(1, j, () => Re, () => ({ duration: 400 })), k(I, j);
     }, be = (I) => {
-      var j = se(), B = re(j);
+      var j = se(), B = te(j);
       {
         var ee = (b) => {
-          var L = Ct();
+          var L = Cr();
           let Q;
           M((ve) => Q = me(L, "", Q, ve), [
-            () => ({ height: e(i) ? `${a()}px` : void 0 })
-          ]), z(b, L);
+            () => ({ height: e(l) ? `${n()}px` : void 0 })
+          ]), k(b, L);
         };
         J(
           B,
@@ -2202,31 +2202,31 @@ function Mt(g, r) {
           !0
         );
       }
-      z(I, j);
+      k(I, j);
     };
     J(V, (I) => {
-      e(s) ? I(H) : I(be, !1);
+      e(i) ? I(H) : I(be, !1);
     });
   }
-  return D(X), Pe(X, (I) => m(o, I), () => e(o)), D(C), M(
+  return D(G), Pe(G, (I) => m(o, I), () => e(o)), D(C), M(
     (I, j, B) => {
-      U = ie(C, 1, "wrapper svelte-z1j7sg", null, U, I), F = ie(X, 1, "container svelte-z1j7sg", null, F, j), te = me(X, "", te, B);
+      U = ie(C, 1, "wrapper svelte-z1j7sg", null, U, I), F = ie(G, 1, "container svelte-z1j7sg", null, F, j), re = me(G, "", re, B);
     },
     [
       () => ({
-        scrollable: e(i),
-        "can-scroll-up": e(l),
+        scrollable: e(l),
+        "can-scroll-up": e(s),
         "can-scroll-down": e(y)
       }),
-      () => ({ scrollable: e(i) }),
+      () => ({ scrollable: e(l) }),
       () => ({
-        "max-height": e(i) ? `${a()}px` : void 0
+        "max-height": e(l) ? `${n()}px` : void 0
       })
     ]
-  ), z(g, C), ye(w);
+  ), k(g, C), ye(w);
 }
 customElements.define("fortyfour-translation", ue(
-  Mt,
+  Mr,
   {
     for: { attribute: "for", reflect: !0 },
     maxHeight: { attribute: "max-height", reflect: !0, type: "Number" }
@@ -2235,219 +2235,216 @@ customElements.define("fortyfour-translation", ue(
   [],
   !0
 ));
-var Ht = Le('<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 hr(g, r) {
-  ge(r, !0);
-  let c = d(r, "class", 7, ""), n = d(r, "height", 7, "1em"), a = d(r, "width", 7, "auto");
+var Hr = Le('<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 ht(g, t) {
+  ge(t, !0);
+  let u = d(t, "class", 7, ""), a = d(t, "height", 7, "1em"), n = d(t, "width", 7, "auto");
   var o = {
     get class() {
-      return c();
+      return u();
     },
-    set class(l = "") {
-      c(l), v();
+    set class(s = "") {
+      u(s), v();
     },
     get height() {
-      return n();
+      return a();
     },
-    set height(l = "1em") {
-      n(l), v();
+    set height(s = "1em") {
+      a(s), v();
     },
     get width() {
-      return a();
+      return n();
     },
-    set width(l = "auto") {
-      a(l), v();
+    set width(s = "auto") {
+      n(s), v();
     }
-  }, i = Ht();
+  }, l = Hr();
   return M(() => {
-    ie(i, 0, ur(c())), W(i, "height", n()), W(i, "width", a());
-  }), z(g, i), ye(o);
+    ie(l, 0, ut(u())), W(l, "height", a()), W(l, "width", n());
+  }), k(g, l), ye(o);
 }
-ue(hr, { class: {}, height: {}, width: {} }, [], [], !0);
-var jt = K("<fortyfour-progress-bar></fortyfour-progress-bar>", 2), qt = K("<fortyfour-line-waveform></fortyfour-line-waveform>", 2), St = K("<fortyfour-bar-waveform></fortyfour-bar-waveform>", 2), At = (g, r) => m(r, !e(r)), Bt = K('<span class="label-separator svelte-cwarz9">•</span> <button class="translation-toggle svelte-cwarz9"> </button>', 1), Nt = K("<fortyfour-translation></fortyfour-translation>", 2), Wt = K("<fortyfour-transcription></fortyfour-transcription>", 2), Dt = K('<div class="transcription-box svelte-cwarz9"><div class="transcription-header svelte-cwarz9"><span class="transcription-label svelte-cwarz9">TRANSCRIPT</span> <!></div> <!></div>'), Ut = K('<a class="branding svelte-cwarz9" href="https://44.audio" target="_blank" rel="noopener noreferrer"><span class="branding-text svelte-cwarz9">powered by</span> <!></a>'), Ft = K('<fortyfour-recording></fortyfour-recording> <div><div class="player svelte-cwarz9"><fortyfour-play-button></fortyfour-play-button> <!> <div class="duration svelte-cwarz9"><fortyfour-duration><span slot="placeholder">0:00</span></fortyfour-duration> <span class="separator svelte-cwarz9">/</span> <fortyfour-duration><span slot="placeholder">0:00</span></fortyfour-duration></div></div> <!></div> <!>', 3);
-const Ot = {
-  hash: "svelte-cwarz9",
-  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-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-cwarz9 {border:1px solid var(--fortyfour-player-border);border-radius:12px;background:var(--fortyfour-player-background);overflow:hidden;}.container.square.svelte-cwarz9 {border-radius:0;}.container.compact.svelte-cwarz9 .player:where(.svelte-cwarz9) {height:44px;padding:0.5rem 0.75rem;gap:0.75rem;}.container.compact.svelte-cwarz9 .transcription-box:where(.svelte-cwarz9) {padding:0.5rem 0.75rem;}.container.compact.svelte-cwarz9 fortyfour-play-button:where(.svelte-cwarz9) {--fortyfour-play-button-size: 40px;}.container.comfortable.svelte-cwarz9 .player:where(.svelte-cwarz9) {height:68px;padding:1rem 1.25rem;gap:1.25rem;}.container.comfortable.svelte-cwarz9 .transcription-box:where(.svelte-cwarz9) {padding:1rem 1.25rem;}.container.comfortable.svelte-cwarz9 fortyfour-play-button:where(.svelte-cwarz9) {--fortyfour-play-button-size: 56px;}.player.svelte-cwarz9 {display:flex;align-items:center;gap:1rem;height:56px;padding:0.75rem 1rem;}fortyfour-play-button.svelte-cwarz9 {--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-cwarz9,
-  fortyfour-line-waveform.svelte-cwarz9,
-  fortyfour-progress-bar.svelte-cwarz9 {height:100%;flex:1;}fortyfour-bar-waveform.svelte-cwarz9 {--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-cwarz9 {--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-cwarz9 {--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-cwarz9 {display:flex;align-items:center;gap:0.25rem;flex-shrink:0;}.elapsed.svelte-cwarz9 {--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-cwarz9 {font-size:1em;color:var(--fortyfour-player-muted);}.total.svelte-cwarz9 {--fortyfour-duration-font-family: var(--fortyfour-player-font-family);--fortyfour-duration-font-size: 1em;--fortyfour-duration-color: var(--fortyfour-player-muted);}.transcription-box.svelte-cwarz9 {background:var(--fortyfour-player-surface);padding:0.75rem 1rem;border-top:1px solid var(--fortyfour-player-border);}.transcription-header.svelte-cwarz9 {display:flex;align-items:center;gap:0.5em;margin-bottom:0.5rem;}.transcription-label.svelte-cwarz9 {font-size:0.7em;font-weight:600;letter-spacing:0.05em;color:var(--fortyfour-player-muted);}.label-separator.svelte-cwarz9 {font-size:0.7em;color:var(--fortyfour-player-muted);}.translation-toggle.svelte-cwarz9 {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-cwarz9:hover {text-decoration:underline;}.translation-toggle.svelte-cwarz9:focus-visible {outline:2px solid var(--fortyfour-player-accent);outline-offset:2px;border-radius:2px;}fortyfour-transcription.svelte-cwarz9,
-  fortyfour-translation.svelte-cwarz9 {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-cwarz9 {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-cwarz9:focus-visible {outline:2px solid var(--fortyfour-player-accent);outline-offset:2px;}.branding-text.svelte-cwarz9 {font-size:0.7em;font-weight:400;letter-spacing:0.01em;}`
+ue(ht, { class: {}, height: {}, width: {} }, [], [], !0);
+var jr = X("<fortyfour-progress-bar></fortyfour-progress-bar>", 2), Sr = X("<fortyfour-line-waveform></fortyfour-line-waveform>", 2), qr = X("<fortyfour-bar-waveform></fortyfour-bar-waveform>", 2), Ar = (g, t) => m(t, !e(t)), Br = X('<span class="label-separator svelte-14nd1et">•</span> <button class="translation-toggle svelte-14nd1et"> </button>', 1), Nr = X("<fortyfour-translation></fortyfour-translation>", 2), Wr = X("<fortyfour-transcription></fortyfour-transcription>", 2), Dr = X('<div class="transcription-box svelte-14nd1et"><div class="transcription-header svelte-14nd1et"><span class="transcription-label svelte-14nd1et">TRANSCRIPT</span> <!></div> <!></div>'), Ur = X('<a class="branding svelte-14nd1et" href="https://44.audio" target="_blank" rel="noopener noreferrer"><span class="branding-text svelte-14nd1et">powered by</span> <!></a>'), Fr = X('<fortyfour-recording></fortyfour-recording> <div><div class="player svelte-14nd1et"><fortyfour-play-button></fortyfour-play-button> <!> <div class="duration svelte-14nd1et"><fortyfour-duration><span slot="placeholder">0:00</span></fortyfour-duration> <span class="separator svelte-14nd1et">/</span> <fortyfour-duration><span slot="placeholder">0:00</span></fortyfour-duration></div></div> <!></div> <!>', 3);
+const Or = {
+  hash: "svelte-14nd1et",
+  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);}.container.svelte-14nd1et {border:1px solid var(--fortyfour-player-border);border-radius:12px;background:var(--fortyfour-player-background);overflow:hidden;}.container.square.svelte-14nd1et {border-radius:0;}.container.compact.svelte-14nd1et .player:where(.svelte-14nd1et) {height:44px;padding:0.5rem 0.75rem;gap:0.75rem;}.container.compact.svelte-14nd1et .transcription-box:where(.svelte-14nd1et) {padding:0.5rem 0.75rem;}.container.compact.svelte-14nd1et fortyfour-play-button:where(.svelte-14nd1et) {--fortyfour-play-button-size: 40px;}.container.comfortable.svelte-14nd1et .player:where(.svelte-14nd1et) {height:68px;padding:1rem 1.25rem;gap:1.25rem;}.container.comfortable.svelte-14nd1et .transcription-box:where(.svelte-14nd1et) {padding:1rem 1.25rem;}.container.comfortable.svelte-14nd1et fortyfour-play-button:where(.svelte-14nd1et) {--fortyfour-play-button-size: 56px;}.player.svelte-14nd1et {display:flex;align-items:center;gap:1rem;height:56px;padding:0.75rem 1rem;}fortyfour-play-button.svelte-14nd1et {--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-14nd1et,
+  fortyfour-line-waveform.svelte-14nd1et,
+  fortyfour-progress-bar.svelte-14nd1et {height:100%;flex:1;}fortyfour-bar-waveform.svelte-14nd1et {--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-14nd1et {--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-14nd1et {--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-14nd1et {display:flex;align-items:center;gap:0.25rem;flex-shrink:0;}.elapsed.svelte-14nd1et {--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-14nd1et {font-size:1em;color:var(--fortyfour-player-muted);}.total.svelte-14nd1et {--fortyfour-duration-font-family: var(--fortyfour-player-font-family);--fortyfour-duration-font-size: 1em;--fortyfour-duration-color: var(--fortyfour-player-muted);}.transcription-box.svelte-14nd1et {background:var(--fortyfour-player-surface);padding:0.75rem 1rem;border-top:1px solid var(--fortyfour-player-border);}.transcription-header.svelte-14nd1et {display:flex;align-items:center;gap:0.5em;margin-bottom:0.5rem;}.transcription-label.svelte-14nd1et {font-size:0.7em;font-weight:600;letter-spacing:0.05em;color:var(--fortyfour-player-muted);}.label-separator.svelte-14nd1et {font-size:0.7em;color:var(--fortyfour-player-muted);}.translation-toggle.svelte-14nd1et {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-14nd1et:hover {text-decoration:underline;}.translation-toggle.svelte-14nd1et:focus-visible {outline:2px solid var(--fortyfour-player-accent);outline-offset:2px;border-radius:2px;}fortyfour-transcription.svelte-14nd1et,
+  fortyfour-translation.svelte-14nd1et {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-14nd1et {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-14nd1et:focus-visible {outline:2px solid var(--fortyfour-player-accent);outline-offset:2px;}.branding-text.svelte-14nd1et {font-size:0.7em;font-weight:400;letter-spacing:0.01em;}`
 };
-function Gt(g, r) {
-  ge(r, !0), we(g, Ot);
-  const c = r.$$host;
-  let n = d(r, "recordingId", 7), a = d(r, "apiHost", 7, "api.44.audio"), o = d(r, "shape", 7, "rounded"), i = d(r, "preload", 7, "none"), l = d(r, "spacing", 7, "default"), y = d(r, "progress", 7, "bar-waveform"), h = d(r, "hideTranscript", 7, !1), f = d(r, "hideTranslation", 7, !1), x = d(r, "hideBranding", 7, !1);
-  const u = `fortyfour-player-${crypto.randomUUID().slice(0, 8)}`;
-  let s = q(null), k = q(!1), p = q(!1);
-  const w = S(() => o() === "square"), C = S(() => e(w) ? "square" : "circle"), U = S(() => e(w) ? "0" : "2"), X = S(() => y() || "bar-waveform"), F = S(() => l() === "compact" ? 28 : l() === "comfortable" ? 48 : 40), te = S(() => l() === "compact" ? 4 : l() === "comfortable" ? 8 : 6);
+function Gr(g, t) {
+  ge(t, !0), we(g, Or);
+  const u = t.$$host;
+  let a = d(t, "recordingId", 7), n = d(t, "apiHost", 7, "api.44.audio"), o = d(t, "shape", 7, "rounded"), l = d(t, "preload", 7, "none"), s = d(t, "spacing", 7, "default"), y = d(t, "progress", 7, "bar-waveform"), h = d(t, "hideTranscript", 7, !1), c = d(t, "hideTranslation", 7, !1), x = d(t, "hideBranding", 7, !1);
+  const f = `fortyfour-player-${crypto.randomUUID().slice(0, 8)}`;
+  let i = S(null), _ = S(!1), p = S(!1);
+  const w = q(() => o() === "square"), C = q(() => e(w) ? "square" : "circle"), U = q(() => e(w) ? "0" : "2"), G = q(() => y() || "bar-waveform"), F = q(() => s() === "compact" ? 28 : s() === "comfortable" ? 48 : 40), re = q(() => s() === "compact" ? 4 : s() === "comfortable" ? 8 : 6);
   function V() {
-    const P = e(s)?.state ?? "idle";
-    c.setAttribute("data-state", P);
+    const z = e(i)?.state ?? "idle";
+    u.setAttribute("data-state", z);
   }
   function H() {
-    const P = e(s)?.metadata?.translation;
-    m(k, P != null && P !== "", !0);
+    const z = e(i)?.metadata?.translation;
+    m(_, z != null && z !== "", !0);
   }
   de(() => {
-    e(s) && (V(), H());
-  });
+    e(i) && (V(), H());
+  }), u.pause = () => e(i)?.pause(), u.togglePlay = () => e(i)?.togglePlay(), u.seek = (z) => e(i)?.seek(z);
   var be = {
     get recordingId() {
-      return n();
+      return a();
     },
-    set recordingId(P) {
-      n(P), v();
+    set recordingId(z) {
+      a(z), v();
     },
     get apiHost() {
-      return a();
+      return n();
     },
-    set apiHost(P = "api.44.audio") {
-      a(P), v();
+    set apiHost(z = "api.44.audio") {
+      n(z), v();
     },
     get shape() {
       return o();
     },
-    set shape(P = "rounded") {
-      o(P), v();
+    set shape(z = "rounded") {
+      o(z), v();
     },
     get preload() {
-      return i();
+      return l();
     },
-    set preload(P = "none") {
-      i(P), v();
+    set preload(z = "none") {
+      l(z), v();
     },
     get spacing() {
-      return l();
+      return s();
     },
-    set spacing(P = "default") {
-      l(P), v();
+    set spacing(z = "default") {
+      s(z), v();
     },
     get progress() {
       return y();
     },
-    set progress(P = "bar-waveform") {
-      y(P), v();
+    set progress(z = "bar-waveform") {
+      y(z), v();
     },
     get hideTranscript() {
       return h();
     },
-    set hideTranscript(P = !1) {
-      h(P), v();
+    set hideTranscript(z = !1) {
+      h(z), v();
     },
     get hideTranslation() {
-      return f();
+      return c();
     },
-    set hideTranslation(P = !1) {
-      f(P), v();
+    set hideTranslation(z = !1) {
+      c(z), v();
     },
     get hideBranding() {
       return x();
     },
-    set hideBranding(P = !1) {
-      x(P), v();
+    set hideBranding(z = !1) {
+      x(z), v();
     }
-  }, I = Ft(), j = re(I);
-  M(() => Z(j, "id", u)), M(() => Z(j, "api-host", a())), M(() => Z(j, "recording-id", n())), M(() => Z(j, "preload", i())), Pe(j, (P) => m(s, P), () => e(s));
+  }, I = Fr(), j = te(I);
+  M(() => Z(j, "id", f)), M(() => Z(j, "api-host", n())), M(() => Z(j, "recording-id", a())), M(() => Z(j, "preload", l())), Pe(j, (z) => m(i, z), () => e(i));
   var B = pe(j, 2);
   let ee;
-  var b = G(B), L = G(b);
-  M(() => Z(L, "for", u)), M(() => Z(L, "shape", e(C))), ie(L, 1, "svelte-cwarz9");
+  var b = K(B), L = K(b);
+  M(() => Z(L, "for", f)), M(() => Z(L, "shape", e(C))), ie(L, 1, "svelte-14nd1et");
   var Q = pe(L, 2);
   {
-    var ve = (P) => {
-      var O = jt();
-      M(() => Z(O, "for", u)), M(() => Z(O, "bar-height", e(te))), M(() => Z(O, "bar-radius", e(U))), ie(O, 1, "svelte-cwarz9"), z(P, O);
-    }, E = (P) => {
-      var O = se(), oe = re(O);
+    var ve = (z) => {
+      var O = jr();
+      M(() => Z(O, "for", f)), M(() => Z(O, "bar-height", e(re))), M(() => Z(O, "bar-radius", e(U))), ie(O, 1, "svelte-14nd1et"), k(z, O);
+    }, E = (z) => {
+      var O = se(), oe = te(O);
       {
         var ae = (le) => {
-          var $ = qt();
-          M(() => Z($, "for", u)), Z($, "line-width", "2"), M(() => Z($, "height", e(F))), M(() => Z($, "sharp", e(w))), ie($, 1, "svelte-cwarz9"), z(le, $);
+          var $ = Sr();
+          M(() => Z($, "for", f)), Z($, "line-width", "2"), M(() => Z($, "height", e(F))), M(() => Z($, "sharp", e(w))), ie($, 1, "svelte-14nd1et"), k(le, $);
         }, ce = (le) => {
-          var $ = St();
-          M(() => Z($, "for", u)), Z($, "bar-width", "4"), Z($, "bar-gap", "2"), M(() => Z($, "bar-radius", e(U))), M(() => Z($, "height", e(F))), ie($, 1, "svelte-cwarz9"), z(le, $);
+          var $ = qr();
+          M(() => Z($, "for", f)), Z($, "bar-width", "4"), Z($, "bar-gap", "2"), M(() => Z($, "bar-radius", e(U))), M(() => Z($, "height", e(F))), ie($, 1, "svelte-14nd1et"), k(le, $);
         };
         J(
           oe,
           (le) => {
-            e(X) === "line-waveform" ? le(ae) : le(ce, !1);
+            e(G) === "line-waveform" ? le(ae) : le(ce, !1);
           },
           !0
         );
       }
-      z(P, O);
+      k(z, O);
     };
-    J(Q, (P) => {
-      e(X) === "progress-bar" ? P(ve) : P(E, !1);
+    J(Q, (z) => {
+      e(G) === "progress-bar" ? z(ve) : z(E, !1);
     });
   }
-  var R = pe(Q, 2), t = G(R);
-  ie(t, 1, "elapsed svelte-cwarz9"), M(() => Z(t, "for", u)), Z(t, "format", "elapsed");
-  var T = pe(t, 4);
-  ie(T, 1, "total svelte-cwarz9"), M(() => Z(T, "for", u)), Z(T, "format", "total"), D(R), D(b);
-  var _ = pe(b, 2);
+  var R = pe(Q, 2), r = K(R);
+  ie(r, 1, "elapsed svelte-14nd1et"), M(() => Z(r, "for", f)), Z(r, "format", "elapsed");
+  var T = pe(r, 4);
+  ie(T, 1, "total svelte-14nd1et"), M(() => Z(T, "for", f)), Z(T, "format", "total"), D(R), D(b);
+  var P = pe(b, 2);
   {
-    var A = (P) => {
-      var O = Dt(), oe = G(O), ae = pe(G(oe), 2);
+    var A = (z) => {
+      var O = Dr(), oe = K(O), ae = pe(K(oe), 2);
       {
         var ce = (ne) => {
-          var fe = Bt(), ze = pe(re(fe), 2);
-          ze.__click = [At, p];
-          var ke = G(ze, !0);
-          D(ze), M(() => {
-            W(ze, "aria-pressed", e(p)), Ee(ke, e(p) ? "ORIGINAL" : "TRANSLATION");
-          }), z(ne, fe);
+          var fe = Br(), ke = pe(te(fe), 2);
+          ke.__click = [Ar, p];
+          var _e = K(ke, !0);
+          D(ke), M(() => {
+            W(ke, "aria-pressed", e(p)), Ee(_e, e(p) ? "ORIGINAL" : "TRANSLATION");
+          }), k(ne, fe);
         };
         J(ae, (ne) => {
-          e(k) && !f() && ne(ce);
+          e(_) && !c() && ne(ce);
         });
       }
       D(oe);
       var le = pe(oe, 2);
       {
         var $ = (ne) => {
-          var fe = Nt();
-          M(() => Z(fe, "for", u)), Z(fe, "max-height", "96"), ie(fe, 1, "svelte-cwarz9"), z(ne, fe);
+          var fe = Nr();
+          M(() => Z(fe, "for", f)), Z(fe, "max-height", "96"), ie(fe, 1, "svelte-14nd1et"), k(ne, fe);
         }, xe = (ne) => {
-          var fe = Wt();
-          M(() => Z(fe, "for", u)), Z(fe, "mode", "karaoke"), Z(fe, "max-height", "96"), ie(fe, 1, "svelte-cwarz9"), z(ne, fe);
+          var fe = Wr();
+          M(() => Z(fe, "for", f)), Z(fe, "mode", "karaoke"), Z(fe, "max-height", "96"), ie(fe, 1, "svelte-14nd1et"), k(ne, fe);
         };
         J(le, (ne) => {
-          e(p) && !f() ? ne($) : ne(xe, !1);
+          e(p) && !c() ? ne($) : ne(xe, !1);
         });
       }
-      D(O), z(P, O);
+      D(O), k(z, O);
     };
-    J(_, (P) => {
-      h() || P(A);
+    J(P, (z) => {
+      h() || z(A);
     });
   }
   D(B);
   var N = pe(B, 2);
   {
-    var Y = (P) => {
-      var O = Ut(), oe = pe(G(O), 2);
-      hr(oe, { class: "branding-logo", height: "0.65em" }), D(O), z(P, O);
+    var Y = (z) => {
+      var O = Ur(), oe = pe(K(O), 2);
+      ht(oe, { class: "branding-logo", height: "0.65em" }), D(O), k(z, O);
     };
-    J(N, (P) => {
-      x() || P(Y);
+    J(N, (z) => {
+      x() || z(Y);
     });
   }
-  return M((P) => ee = ie(B, 1, "container svelte-cwarz9", null, ee, P), [
+  return M((z) => ee = ie(B, 1, "container svelte-14nd1et", null, ee, z), [
     () => ({
       square: e(w),
-      compact: l() === "compact",
-      comfortable: l() === "comfortable"
+      compact: s() === "compact",
+      comfortable: s() === "comfortable"
     })
   ]), he("loadedmetadata", j, () => {
     V(), H();
-  }), he("play", j, V), he("pause", j, V), he("error", j, V), he("ended", j, V), z(g, I), ye(be);
+  }), he("play", j, V), he("pause", j, V), he("error", j, V), he("ended", j, V), k(g, I), ye(be);
 }
 He(["click"]);
 customElements.define("fortyfour-player", ue(
-  Gt,
+  Gr,
   {
     apiHost: { attribute: "api-host", reflect: !0 },
     recordingId: { attribute: "recording-id", reflect: !0 },
@@ -2467,39 +2464,39 @@ customElements.define("fortyfour-player", ue(
   [],
   !0
 ));
-var Kt = K("<fortyfour-recording></fortyfour-recording> <fortyfour-play-button></fortyfour-play-button>", 3);
-const Xt = {
+var Kr = X("<fortyfour-recording></fortyfour-recording> <fortyfour-play-button></fortyfour-play-button>", 3);
+const Xr = {
   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 Zt(g, r) {
-  ge(r, !0), we(g, Xt);
-  const c = r.$$host;
-  let n = d(r, "recordingId", 7), a = d(r, "apiHost", 7, "api.44.audio"), o = d(r, "size", 7, "medium"), i = d(r, "preload", 7, "none");
-  const l = `fortyfour-mini-player-${crypto.randomUUID().slice(0, 8)}`;
-  let y = q(null);
+function Zr(g, t) {
+  ge(t, !0), we(g, Xr);
+  const u = t.$$host;
+  let a = d(t, "recordingId", 7), n = d(t, "apiHost", 7, "api.44.audio"), o = d(t, "size", 7, "medium"), l = d(t, "preload", 7, "none");
+  const s = `fortyfour-mini-player-${crypto.randomUUID().slice(0, 8)}`;
+  let y = S(null);
   function h() {
     const p = e(y)?.state ?? "idle";
-    c.setAttribute("data-state", p);
+    u.setAttribute("data-state", p);
   }
   de(() => {
     e(y) && h();
   });
-  var f = {
+  var c = {
     get recordingId() {
-      return n();
+      return a();
     },
     set recordingId(p) {
-      n(p), v();
+      a(p), v();
     },
     get apiHost() {
-      return a();
+      return n();
     },
     set apiHost(p = "api.44.audio") {
-      a(p), v();
+      n(p), v();
     },
     get size() {
       return o();
@@ -2508,21 +2505,21 @@ function Zt(g, r) {
       o(p), v();
     },
     get preload() {
-      return i();
+      return l();
     },
     set preload(p = "none") {
-      i(p), v();
+      l(p), v();
     }
-  }, x = Kt(), u = re(x);
-  M(() => Z(u, "id", l)), M(() => Z(u, "api-host", a())), M(() => Z(u, "recording-id", n())), M(() => Z(u, "preload", i())), Pe(u, (p) => m(y, p), () => e(y));
-  var s = pe(u, 2);
-  let k;
-  return M(() => Z(s, "for", l)), Z(s, "shape", "circle"), Z(s, "visualization", "ring"), M((p) => k = ie(s, 1, "button svelte-1i43bu9", null, k, p), [
+  }, x = Kr(), f = te(x);
+  M(() => Z(f, "id", s)), M(() => Z(f, "api-host", n())), M(() => Z(f, "recording-id", a())), M(() => Z(f, "preload", l())), Pe(f, (p) => m(y, p), () => e(y));
+  var i = pe(f, 2);
+  let _;
+  return M(() => Z(i, "for", s)), Z(i, "shape", "circle"), Z(i, "visualization", "ring"), M((p) => _ = ie(i, 1, "button svelte-1i43bu9", null, _, p), [
     () => ({ small: o() === "small", large: o() === "large" })
-  ]), he("loadedmetadata", u, h), he("play", u, h), he("pause", u, h), he("error", u, h), he("ended", u, h), z(g, x), ye(f);
+  ]), he("loadedmetadata", f, h), he("play", f, h), he("pause", f, h), he("error", f, h), he("ended", f, h), k(g, x), ye(c);
 }
 customElements.define("fortyfour-mini-player", ue(
-  Zt,
+  Zr,
   {
     apiHost: { attribute: "api-host", reflect: !0 },
     recordingId: { attribute: "recording-id", reflect: !0 },