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

package/dist/player.es.js

@@ -1,231 +1,1329 @@
-import { h as V, t as le, d as de, c as X, p as Y, a as Z, b as x, s as d, f, A as ce, e as h, g as b, i as k, j as s, k as $, l as L, m as j, n as p, u as ve, r as y, o as R, q as E, v as P, w as W, x as Q, y as ue, z as ge, B as pe } from "./AudioPlayer-bUgQMAfs.mjs";
-function fe(i, t, n, r) {
-  var a = i.__style;
-  if (V || a !== t) {
-    var v = le(t);
-    (!V || v !== i.getAttribute("style")) && (v == null ? i.removeAttribute("style") : i.style.cssText = v), i.__style = t;
-  }
-  return r;
-}
-function me(i, t) {
-  d(t, !p(t));
-}
-var _e = f('&bull; <button class="link svelte-8utcjm"> </button>', 1), he = (i, t) => d(t, !0), be = f(' <button class="link svelte-8utcjm">Show more</button>', 1), ye = (i, t) => d(t, !1), ke = f(' <button class="link svelte-8utcjm">Show less</button>', 1), xe = f('<div class="details svelte-8utcjm"><div class="title svelte-8utcjm">Transcription <!></div> <div class="transcription"><!></div></div>'), je = f('<div class="container svelte-8utcjm" role="group" aria-label="44 audio player"><div class="display svelte-8utcjm"><!></div> <!></div>');
-const we = {
-  hash: "svelte-8utcjm",
-  code: "button.svelte-8utcjm {font:inherit;margin:0;padding:0;box-sizing:border-box;border:none;background:none;cursor:pointer;}.link.svelte-8utcjm {background:none;border:none;color:var(--44-color-2);cursor:pointer;padding:0;font:inherit;}.link.svelte-8utcjm:hover {color:var(--44-color-3);text-decoration:underline;}.container.svelte-8utcjm {padding:16px;}.display.svelte-8utcjm {display:flex;align-items:center;gap:12px;}.details.svelte-8utcjm .title:where(.svelte-8utcjm) {font-weight:bold;margin-top:16px;margin-bottom:8px;}"
+import { h as Wr, a as Qr, i as $r, n as re, s as ee, b as te, c as oe, d as ae, e as ne, f as se, g as ie, U as le, p as fe, j as ce, k as ue, E as de, B as ve, l as pe, m as ye, u as he, T as ge, w as Or, o as be, q as me, r as Rr, t as qr, v as xr, x as _r, y as A, z as pr, A as r, C as j, D as we, F as hr, G as fr, H as E, I as kr, J as u, K as Fr, L as N, M as P, N as tr, O, P as zr, Q as m, R as Z, S as vr, V as Br, W as Ir, X as xe, Y as _e, Z as Dr, _ as Kr, $ as G, a0 as B, a1 as jr, a2 as ke, a3 as Ar, a4 as dr, a5 as er, a6 as Hr, a7 as Zr, a8 as Gr, a9 as Sr, aa as Nr, ab as Lr, ac as ze, ad as C } from "./BarWaveform-BkBkQ8cb.js";
+function Ee(d, e, h) {
+  Wr && Qr();
+  var s = d, i = le, n, o, a = null, p = $r() ? re : ee;
+  function y() {
+    n && fe(n), a !== null && (a.lastChild.remove(), s.before(a), a = null), n = o;
+  }
+  te(() => {
+    if (p(i, i = e())) {
+      var l = s, z = se();
+      z && (a = document.createDocumentFragment(), a.append(l = oe())), o = ae(() => h(l)), z ? ne.add_callback(y) : y();
+    }
+  }), Wr && (s = ie);
+}
+const Te = () => performance.now(), wr = {
+  // don't access requestAnimationFrame eagerly outside method
+  // this allows basic testing of user code without JSDOM
+  // bunder will eval and remove ternary when the user's app is built
+  tick: (
+    /** @param {any} _ */
+    (d) => requestAnimationFrame(d)
+  ),
+  now: () => Te(),
+  tasks: /* @__PURE__ */ new Set()
 };
-function ee(i, t) {
-  Y(t, !0), Z(i, we);
-  let n = x(t, "recordingId", 7), r = x(t, "recording", 7), a = x(t, "audioRef", 7), v = x(t, "apiHost", 7), T = L(!1), m = L(!1), q = L(0), _ = L("idle");
-  a().addEventListener("play", () => {
-    d(_, "playing");
-  }), a().addEventListener("pause", () => {
-    d(_, "paused");
-  }), a().addEventListener("ended", () => {
-    d(_, "idle"), d(q, 0);
-  }), a().addEventListener("timeupdate", () => {
-    d(q, a().currentTime * 1e3);
+function Xr() {
+  const d = wr.now();
+  wr.tasks.forEach((e) => {
+    e.c(d) || (wr.tasks.delete(e), e.f());
+  }), wr.tasks.size !== 0 && wr.tick(Xr);
+}
+function Le(d) {
+  let e;
+  return wr.tasks.size === 0 && wr.tick(Xr), {
+    promise: new Promise((h) => {
+      wr.tasks.add(e = { c: d, f: h });
+    }),
+    abort() {
+      wr.tasks.delete(e);
+    }
+  };
+}
+function Mr(d, e) {
+  Or(() => {
+    d.dispatchEvent(new CustomEvent(e));
   });
-  var F = {
-    get recordingId() {
-      return n();
+}
+function He(d) {
+  if (d === "float") return "cssFloat";
+  if (d === "offset") return "cssOffset";
+  if (d.startsWith("--")) return d;
+  const e = d.split("-");
+  return e.length === 1 ? e[0] : e[0] + e.slice(1).map(
+    /** @param {any} word */
+    (h) => h[0].toUpperCase() + h.slice(1)
+  ).join("");
+}
+function Ur(d) {
+  const e = {}, h = d.split(";");
+  for (const s of h) {
+    const [i, n] = s.split(":");
+    if (!i || n === void 0) break;
+    const o = He(i.trim());
+    e[o] = n.trim();
+  }
+  return e;
+}
+const Ie = (d) => d;
+function Er(d, e, h, s) {
+  var i = (d & ge) !== 0, n = "in", o, a = e.inert, p = e.style.overflow, y, l;
+  function z() {
+    return Or(() => o ??= h()(e, s?.() ?? /** @type {P} */
+    {}, {
+      direction: n
+    }));
+  }
+  var v = {
+    is_global: i,
+    in() {
+      e.inert = a, y?.abort(), Mr(e, "introstart"), y = Yr(e, z(), l, 1, () => {
+        Mr(e, "introend"), y?.abort(), y = o = void 0, e.style.overflow = p;
+      });
     },
-    set recordingId(e) {
-      n(e), j();
+    out(U) {
+      {
+        U?.(), o = void 0;
+        return;
+      }
     },
-    get recording() {
-      return r();
+    stop: () => {
+      y?.abort();
+    }
+  }, L = (
+    /** @type {Effect} */
+    ce
+  );
+  if ((L.transitions ??= []).push(v), ue) {
+    var _ = i;
+    if (!_) {
+      for (var f = (
+        /** @type {Effect | null} */
+        L.parent
+      ); f && (f.f & de) !== 0; )
+        for (; (f = f.parent) && (f.f & ve) === 0; )
+          ;
+      _ = !f || (f.f & pe) !== 0;
+    }
+    _ && ye(() => {
+      he(() => v.in());
+    });
+  }
+}
+function Yr(d, e, h, s, i) {
+  if (be(e)) {
+    var n, o = !1;
+    return me(() => {
+      if (!o) {
+        var f = e({ direction: "in" });
+        n = Yr(d, f, h, s, i);
+      }
+    }), {
+      abort: () => {
+        o = !0, n?.abort();
+      },
+      deactivate: () => n.deactivate(),
+      reset: () => n.reset(),
+      t: () => n.t()
+    };
+  }
+  if (!e?.duration)
+    return i(), {
+      abort: Rr,
+      deactivate: Rr,
+      reset: Rr,
+      t: () => s
+    };
+  const { delay: a = 0, css: p, tick: y, easing: l = Ie } = e;
+  var z = [];
+  if (y && y(0, 1), p) {
+    var v = Ur(p(0, 1));
+    z.push(v, v);
+  }
+  var L = () => 1 - s, _ = d.animate(z, { duration: a, fill: "forwards" });
+  return _.onfinish = () => {
+    _.cancel();
+    var f = 1 - s, U = s - f, W = (
+      /** @type {number} */
+      e.duration * Math.abs(U)
+    ), J = [];
+    if (W > 0) {
+      var Q = !1;
+      if (p)
+        for (var q = Math.ceil(W / 16.666666666666668), $ = 0; $ <= q; $ += 1) {
+          var D = f + U * l($ / q), ir = Ur(p(D, 1 - D));
+          J.push(ir), Q ||= ir.overflow === "hidden";
+        }
+      Q && (d.style.overflow = "hidden"), L = () => {
+        var sr = (
+          /** @type {number} */
+          /** @type {globalThis.Animation} */
+          _.currentTime
+        );
+        return f + U * l(sr / W);
+      }, y && Le(() => {
+        if (_.playState !== "running") return !1;
+        var sr = L();
+        return y(sr, 1 - sr), !0;
+      });
+    }
+    _ = d.animate(J, { duration: W, fill: "forwards" }), _.onfinish = () => {
+      L = () => s, y?.(s, 1 - s), i();
+    };
+  }, {
+    abort: () => {
+      _ && (_.cancel(), _.effect = null, _.onfinish = Rr);
     },
-    set recording(e) {
-      r(e), j();
+    deactivate: () => {
+      i = Rr;
     },
-    get audioRef() {
-      return a();
+    reset: () => {
     },
-    set audioRef(e) {
-      a(e), j();
+    t: () => L()
+  };
+}
+function Ce(d) {
+  return new Promise((e) => setTimeout(e, d));
+}
+async function Re(d, e, h) {
+  const s = `https://${e}/v1/recordings/${h}/player`;
+  qr.delay > 0 && await Ce(qr.delay);
+  const i = await fetch(s, { signal: d });
+  if (!i.ok)
+    throw i.status === 404 ? new Error(`Recording not found: ${h}`) : new Error(`Failed to fetch recording (${i.status})`);
+  const n = await i.json();
+  if (n.status !== "ready")
+    throw new Error(`Recording not ready: ${h}`);
+  return n;
+}
+var je = O("<audio hidden></audio>");
+function Ae(d, e) {
+  _r(e, !0);
+  const h = e.$$host;
+  let s = A(e, "recordingId", 7), i = A(e, "apiHost", 7, "api.44.audio"), n = A(e, "preload", 7, "none"), o = j(null), a = j(null), p = j(0), y = j(0), l = j("idle"), z = null, v = null;
+  const L = N(() => ({
+    waveform: r(o)?.waveform ?? [],
+    transcription: r(o)?.transcription ?? null,
+    translation: r(o)?.translation ?? null,
+    words: r(o)?.words ?? null
+  }));
+  function _() {
+    h.duration = r(y), h.currentTime = r(p), h.state = r(l), h.metadata = r(L), h.setAttribute("data-state", r(l));
+  }
+  function f(b) {
+    _(), h.dispatchEvent(new CustomEvent(b, { bubbles: !0, composed: !0 }));
+  }
+  function U() {
+    if (!r(a)) {
+      v = null;
+      return;
+    }
+    u(p, Math.floor(r(a).currentTime * 1e3), !0), f("timeupdate"), v = requestAnimationFrame(U);
+  }
+  async function W() {
+    if (r(l) === "idle") {
+      if (!s()) {
+        console.warn("fortyfour-recording: recording-id attribute is required");
+        return;
+      }
+      z = new AbortController(), u(l, "loading"), f("loading");
+      try {
+        const b = await Re(z.signal, i(), s());
+        u(o, b, !0), u(y, b.duration, !0), u(l, "ready"), f("loadedmetadata");
+      } catch (b) {
+        if (b.name === "AbortError")
+          return;
+        console.warn(`fortyfour-recording: ${b.message}`), u(l, "error"), f("error");
+      }
+    }
+  }
+  async function J() {
+    if (!r(a)) {
+      console.warn("fortyfour-recording: play() called but audio element not ready");
+      return;
+    }
+    try {
+      await r(a).play(), u(l, "playing"), f("play"), v || U();
+    } catch (b) {
+      console.warn(`fortyfour-recording: ${b.message}`), u(l, "error"), f("error");
+    }
+  }
+  function Q() {
+    if (!r(a)) {
+      console.warn("fortyfour-recording: pause() called but audio element not ready");
+      return;
+    }
+    r(a).pause(), u(l, "paused"), cancelAnimationFrame(v), v = null, f("pause");
+  }
+  async function q() {
+    if (r(l) === "error") {
+      console.warn("fortyfour-recording: togglePlay() called while in error state");
+      return;
+    }
+    r(l) !== "loading" && (r(l) === "playing" ? Q() : r(l) === "idle" ? (await W(), await Fr(), r(l) === "ready" && await J()) : await J());
+  }
+  function $(b) {
+    if (!r(a)) {
+      console.warn("fortyfour-recording: seek() called but audio element not ready");
+      return;
+    }
+    if (typeof b != "number" || Number.isNaN(b)) {
+      console.warn("fortyfour-recording: seek() called with invalid time:", b);
+      return;
+    }
+    if (b < 0 || b > r(y)) {
+      console.warn("fortyfour-recording: seek() time out of range:", b, "duration:", r(y));
+      return;
+    }
+    r(a).currentTime = b / 1e3, u(p, Math.floor(b), !0), f("timeupdate");
+  }
+  async function D() {
+    cancelAnimationFrame(v), v = null, u(p, r(y), !0), f("timeupdate"), await Fr(), u(p, 0), r(a).currentTime = 0, f("timeupdate"), u(l, "ready"), f("ended");
+  }
+  function ir(b) {
+    console.warn("fortyfour-recording: audio error", b.target.error), u(l, "error"), f("error");
+  }
+  function sr() {
+    z?.abort(), cancelAnimationFrame(v), v = null, r(a)?.pause(), u(o, null), u(p, 0), u(y, 0), u(l, "idle"), w = s(), f("timeupdate");
+  }
+  let w = s();
+  pr(() => {
+    s() !== w && sr(), r(l) === "idle" && (n() === "auto" || n() === "metadata") && W();
+  }), h.togglePlay = q, h.pause = Q, h.seek = $, _(), we(() => {
+    z?.abort(), r(a)?.pause(), cancelAnimationFrame(v);
+  });
+  var k = {
+    get recordingId() {
+      return s();
+    },
+    set recordingId(b) {
+      s(b), P();
     },
     get apiHost() {
-      return v();
+      return i();
     },
-    set apiHost(e) {
-      v(e), j();
+    set apiHost(b = "api.44.audio") {
+      i(b), P();
+    },
+    get preload() {
+      return n();
+    },
+    set preload(b = "none") {
+      n(b), P();
+    }
+  }, F = hr(), nr = fr(F);
+  return Ee(nr, s, (b) => {
+    var V = hr(), lr = fr(V);
+    {
+      var gr = (g) => {
+        var x = je();
+        zr(x, (t) => u(a, t), () => r(a)), m(() => {
+          Z(x, "src", r(o).audioUrl), Z(x, "preload", n() === "auto" ? "auto" : "none");
+        }), vr("ended", x, D), vr("error", x, ir), E(g, x);
+      };
+      tr(lr, (g) => {
+        r(o)?.audioUrl && g(gr);
+      });
     }
-  }, u = je(), w = b(u), O = b(w);
+    E(b, V);
+  }), E(d, F), kr(k);
+}
+customElements.define("fortyfour-recording", xr(
+  Ae,
   {
-    let e = ve(() => `https://${v()}/api/v1/recordings/${n()}/audio.mp3`);
-    ce(O, {
-      get audioURL() {
-        return p(e);
-      },
-      get waveform() {
-        return r().waveform;
-      }
+    apiHost: { attribute: "api-host", reflect: !0 },
+    recordingId: { attribute: "recording-id", reflect: !0 },
+    preload: { reflect: !0 }
+  },
+  [],
+  [],
+  !1
+));
+var Pe = Ar("<path></path>"), Se = Ar("<path></path><!>", 1), Ne = Ar('<line class="line track svelte-r3200f" stroke-linecap="round"></line>'), Be = O('<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 We = {
+  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;}
+
+  @media (prefers-color-scheme: dark) {:host {--fortyfour-line-waveform-track-color: #374151;--fortyfour-line-waveform-progress-color: #60a5fa;--fortyfour-line-waveform-focus-color: #60a5fa;}
+  }.waveform.svelte-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 qe(d, e) {
+  _r(e, !0), Ir(d, We);
+  const h = e.$$host;
+  let s = A(e, "for", 7, ""), i = A(e, "lineWidth", 7, 2), n = A(e, "height", 7, 56), o = A(e, "sharp", 7, !1), a = j(xe([])), p = j(0), y = j(0), l = j(null), z = j(0), v = j(!1), L = j(null);
+  h.style.height = `${n()}px`, _e(() => {
+    const t = new ResizeObserver((T) => {
+      for (let H of T)
+        u(z, H.contentRect.width || 0, !0), u(v, !0);
     });
+    return r(L) && t.observe(r(L)), () => {
+      t.disconnect();
+    };
+  }), pr(() => {
+    if (!s()) {
+      console.warn("fortyfour-line-waveform: 'for' attribute is required");
+      return;
+    }
+    const t = h.getRootNode();
+    if (u(l, t.getElementById(s()), !0), !r(l)) {
+      console.warn(`fortyfour-line-waveform: element with id "${s()}" not found`);
+      return;
+    }
+    r(l).metadata?.waveform && u(a, r(l).metadata.waveform, !0), r(l).duration && u(y, r(l).duration, !0), r(l).currentTime && u(p, r(l).currentTime, !0);
+    function T() {
+      u(a, r(l).metadata?.waveform || [], !0), u(y, r(l).duration, !0);
+    }
+    function H() {
+      u(p, r(l).currentTime, !0);
+    }
+    return r(l).addEventListener("loadedmetadata", T), r(l).addEventListener("timeupdate", H), () => {
+      r(l).removeEventListener("loadedmetadata", T), r(l).removeEventListener("timeupdate", H);
+    };
+  });
+  const _ = 0.15, f = N(() => Math.max(2, Math.floor(r(z) * _))), U = N(() => r(a).length > 0), W = N(() => r(U) ? ke(r(a), r(f)) : []), J = N(() => r(y) > 0 ? r(p) / r(y) : 0), Q = N(() => `${jr(r(p))} of ${jr(r(y))}`), q = N(() => n() / 2), $ = N(() => n() / 2 * 0.8), D = N(() => {
+    if (!r(W).length || r(z) === 0)
+      return [];
+    const t = i() / 2, T = r(z) - t * 2;
+    return r(W).map((H, I) => {
+      const S = t + I / (r(W).length - 1) * T, M = Math.max(0.05, H / 100), c = I % 2 === 0 ? -1 : 1, R = r(q) + c * M * r($);
+      return { x: S, y: R };
+    });
+  });
+  function ir(t, T) {
+    if (t.length === 0)
+      return "";
+    let H = `M ${t[0].x} ${t[0].y}`;
+    for (let I = 1; I < t.length; I++) {
+      const S = t[I - 1], M = t[I];
+      if (T) {
+        const c = S.x + (M.x - S.x) / 3, R = S.y, X = S.x + (M.x - S.x) * 2 / 3, ar = M.y;
+        H += ` C ${c} ${R}, ${X} ${ar}, ${M.x} ${M.y}`;
+      } else
+        H += ` L ${M.x} ${M.y}`;
+    }
+    return H;
   }
-  y(w);
-  var U = h(w, 2);
+  const sr = N(() => ir(r(D), !o())), w = N(() => {
+    if (r(J) <= 0 || r(z) === 0)
+      return 0;
+    const t = i() / 2, T = r(z) - t * 2;
+    return t + r(J) * T;
+  }), k = N(() => {
+    if (r(D).length === 0 || r(w) <= 0)
+      return "";
+    const t = [];
+    let T = null;
+    for (let I = 0; I < r(D).length; I++)
+      if (r(D)[I].x <= r(w))
+        t.push(r(D)[I]);
+      else {
+        T = r(D)[I];
+        break;
+      }
+    if (t.length === 0)
+      return "";
+    const H = t[t.length - 1];
+    if (T && H.x < r(w)) {
+      const I = (r(w) - H.x) / (T.x - H.x), S = H.y + I * (T.y - H.y);
+      t.push({ x: r(w), y: S });
+    }
+    return ir(t, !o());
+  });
+  pr(() => {
+    r(U) ? h.removeAttribute("data-placeholder") : h.setAttribute("data-placeholder", "");
+  });
+  const F = Dr(() => r(l), () => r(y), () => r(L).getBoundingClientRect()), nr = Kr(() => r(l), () => r(y), () => r(p));
+  var b = {
+    get for() {
+      return s();
+    },
+    set for(t = "") {
+      s(t), P();
+    },
+    get lineWidth() {
+      return i();
+    },
+    set lineWidth(t = 2) {
+      i(t), P();
+    },
+    get height() {
+      return n();
+    },
+    set height(t = 56) {
+      n(t), P();
+    },
+    get sharp() {
+      return o();
+    },
+    set sharp(t = !1) {
+      o(t), P();
+    }
+  }, V = Be();
+  V.__click = F, V.__keydown = nr;
+  var lr = G(V), gr = G(lr);
   {
-    var B = (e) => {
-      var o = xe(), A = b(o), D = h(b(A));
+    var g = (t) => {
+      var T = Se(), H = fr(T);
+      let I;
+      var S = dr(H);
       {
-        var G = (l) => {
-          var g = _e(), C = h(R(g));
-          C.__click = [me, T];
-          var K = b(C, !0);
-          y(C), E(() => P(K, p(T) ? "Original" : "Translation")), s(l, g);
+        var M = (c) => {
+          var R = Pe();
+          let X;
+          m(
+            (ar) => {
+              X = er(R, 0, "line progress svelte-r3200f", null, X, ar), Z(R, "d", r(k)), Z(R, "stroke-width", i());
+            },
+            [() => ({ sharp: o() })]
+          ), E(c, R);
         };
-        k(D, (l) => {
-          r().translation && l(G);
+        tr(S, (c) => {
+          r(k) && c(M);
         });
       }
-      y(A);
-      var c = h(A, 2), J = b(c);
+      m(
+        (c) => {
+          I = er(H, 0, "line track svelte-r3200f", null, I, c), Z(H, "d", r(sr)), Z(H, "stroke-width", i());
+        },
+        [() => ({ sharp: o() })]
+      ), E(t, T);
+    }, x = (t) => {
+      var T = hr(), H = fr(T);
+      {
+        var I = (S) => {
+          var M = Ne();
+          m(() => {
+            Z(M, "x1", i() / 2), Z(M, "y1", n() / 2), Z(M, "x2", r(z) - i() / 2), Z(M, "y2", n() / 2), Z(M, "stroke-width", i());
+          }), E(S, M);
+        };
+        tr(
+          H,
+          (S) => {
+            r(v) && S(I);
+          },
+          !0
+        );
+      }
+      E(t, T);
+    };
+    tr(gr, (t) => {
+      r(v) && r(sr) ? t(g) : t(x, !1);
+    });
+  }
+  return B(lr), B(V), zr(V, (t) => u(L, t), () => r(L)), m(() => {
+    Z(V, "aria-valuemax", r(y)), Z(V, "aria-valuenow", r(p)), Z(V, "aria-valuetext", r(Q)), Z(lr, "height", n()), Z(lr, "viewBox", `0 0 ${r(z)} ${n()}`);
+  }), E(d, V), kr(b);
+}
+Br(["click", "keydown"]);
+customElements.define("fortyfour-line-waveform", xr(
+  qe,
+  {
+    for: { attribute: "for", reflect: !0 },
+    lineWidth: { attribute: "line-width", reflect: !0, type: "Number" },
+    height: { attribute: "height", reflect: !0, type: "Number" },
+    sharp: { attribute: "sharp", reflect: !0, type: "Boolean" }
+  },
+  [],
+  [],
+  !0
+));
+var Fe = O('<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 Me = {
+  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;}
+
+  @media (prefers-color-scheme: dark) {:host {--fortyfour-progress-bar-track-color: #374151;--fortyfour-progress-bar-progress-color: #60a5fa;--fortyfour-progress-bar-focus-color: #60a5fa;}
+  }.container.svelte-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 Ue(d, e) {
+  _r(e, !0), Ir(d, Me);
+  const h = e.$$host;
+  let s = A(e, "for", 7, ""), i = A(e, "barHeight", 7, 4), n = A(e, "barRadius", 7, 2), o = j(0), a = j(0), p = j(null), y = j(null);
+  pr(() => {
+    if (!s()) {
+      console.warn("fortyfour-progress-bar: 'for' attribute is required");
+      return;
+    }
+    const q = h.getRootNode();
+    if (u(p, q.getElementById(s()), !0), !r(p)) {
+      console.warn(`fortyfour-progress-bar: element with id "${s()}" not found`);
+      return;
+    }
+    r(p).duration && u(a, r(p).duration, !0), r(p).currentTime && u(o, r(p).currentTime, !0);
+    function $() {
+      u(a, r(p).duration, !0);
+    }
+    function D() {
+      u(o, r(p).currentTime, !0);
+    }
+    return r(p).addEventListener("loadedmetadata", $), r(p).addEventListener("timeupdate", D), () => {
+      r(p).removeEventListener("loadedmetadata", $), r(p).removeEventListener("timeupdate", D);
+    };
+  });
+  const l = N(() => r(a) > 0 ? r(o) / r(a) * 100 : 0), z = N(() => `${jr(r(o))} of ${jr(r(a))}`), v = Dr(() => r(p), () => r(a), () => r(y)?.getBoundingClientRect()), L = Kr(() => r(p), () => r(a), () => r(o));
+  var _ = {
+    get for() {
+      return s();
+    },
+    set for(q = "") {
+      s(q), P();
+    },
+    get barHeight() {
+      return i();
+    },
+    set barHeight(q = 4) {
+      i(q), P();
+    },
+    get barRadius() {
+      return n();
+    },
+    set barRadius(q = 2) {
+      n(q), P();
+    }
+  }, f = Fe();
+  f.__click = v, f.__keydown = L;
+  var U = G(f);
+  let W;
+  var J = G(U);
+  let Q;
+  return B(U), zr(U, (q) => u(y, q), () => r(y)), B(f), m(
+    (q, $) => {
+      Z(f, "aria-valuemax", r(a)), Z(f, "aria-valuenow", r(o)), Z(f, "aria-valuetext", r(z)), W = Hr(U, "", W, q), Q = Hr(J, "", Q, $);
+    },
+    [
+      () => ({
+        height: `${i() ?? ""}px`,
+        "border-radius": `${n() ?? ""}px`
+      }),
+      () => ({
+        width: `${r(l) ?? ""}%`,
+        "border-radius": `${n() ?? ""}px`
+      })
+    ]
+  ), E(d, f), kr(_);
+}
+Br(["click", "keydown"]);
+customElements.define("fortyfour-progress-bar", xr(
+  Ue,
+  {
+    for: { attribute: "for", reflect: !0 },
+    barHeight: { attribute: "bar-height", reflect: !0, type: "Number" },
+    barRadius: { attribute: "bar-radius", reflect: !0, type: "Number" }
+  },
+  [],
+  [],
+  !0
+));
+const Oe = (d) => d;
+function Tr(d, { delay: e = 0, duration: h = 400, easing: s = Oe } = {}) {
+  const i = +getComputedStyle(d).opacity;
+  return {
+    delay: e,
+    duration: h,
+    easing: s,
+    css: (n) => `opacity: ${n * i}`
+  };
+}
+var De = O("<span> </span>"), Ke = O('<div class="content svelte-1lixazt"><div class="text caption-text svelte-1lixazt"></div></div>'), Ze = O("<span> </span>"), Ge = O('<div class="text caption-text subtitle svelte-1lixazt"></div>'), Xe = O('<div class="content subtitle-content svelte-1lixazt"><!></div>'), Ye = O("<span> </span>"), Ve = O('<div class="content svelte-1lixazt"><div class="text caption-text svelte-1lixazt"></div></div>'), Je = O('<div class="content svelte-1lixazt"><div class="text svelte-1lixazt"> </div></div>'), Qe = O('<div class="placeholder-lines svelte-1lixazt"><span class="placeholder-line svelte-1lixazt"></span> <span class="placeholder-line short svelte-1lixazt"></span></div>'), $e = O("<div><div><!></div></div>");
+const rt = {
+  hash: "svelte-1lixazt",
+  code: `:host {--fortyfour-transcription-font-family: system-ui, sans-serif;--fortyfour-transcription-font-size: 14px;--fortyfour-transcription-color: #64748b;--fortyfour-transcription-active-color: #1e293b;--fortyfour-transcription-active-bg: #fef08a;--fortyfour-transcription-past-color: #1e293b;--fortyfour-transcription-placeholder-color: #e5e7eb;--fortyfour-transcription-fade-color: white;--fortyfour-transcription-scrollbar-thumb: #d1d5db;--fortyfour-transcription-scrollbar-thumb-hover: #9ca3af;--fortyfour-transcription-focus-color: #3b82f6;display:flex;font-family:var(--fortyfour-transcription-font-family);font-size:var(--fortyfour-transcription-font-size);}
+
+  @media (prefers-color-scheme: dark) {:host {--fortyfour-transcription-color: #94a3b8;--fortyfour-transcription-active-color: #fef08a;--fortyfour-transcription-active-bg: #422006;--fortyfour-transcription-past-color: #e2e8f0;--fortyfour-transcription-placeholder-color: #374151;--fortyfour-transcription-scrollbar-thumb: #4b5563;--fortyfour-transcription-scrollbar-thumb-hover: #6b7280;--fortyfour-transcription-focus-color: #60a5fa;}
+  }.wrapper.svelte-1lixazt {position:relative;width:100%;}.wrapper.scrollable.svelte-1lixazt::before,
+  .wrapper.scrollable.svelte-1lixazt::after {content:"";position:absolute;left:0;right:0;height:24px;pointer-events:none;opacity:0;transition:opacity 0.15s ease;}.wrapper.scrollable.svelte-1lixazt::before {top:0;background:linear-gradient(to top, transparent, var(--fortyfour-transcription-fade-color));z-index:1;}.wrapper.scrollable.svelte-1lixazt::after {bottom:0;background:linear-gradient(to bottom, transparent, var(--fortyfour-transcription-fade-color));}.wrapper.can-scroll-up.svelte-1lixazt::before {opacity:1;}.wrapper.can-scroll-down.svelte-1lixazt::after {opacity:1;}.container.svelte-1lixazt {width:100%;}.container.scrollable.svelte-1lixazt {overflow-y:auto;scroll-behavior:smooth;padding-bottom:24px;scrollbar-width:thin;scrollbar-color:var(--fortyfour-transcription-scrollbar-thumb) transparent;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar {width:6px;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar-track {background:transparent;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar-thumb {background-color:var(--fortyfour-transcription-scrollbar-thumb);border-radius:3px;}.container.scrollable.svelte-1lixazt::-webkit-scrollbar-thumb:hover {background-color:var(--fortyfour-transcription-scrollbar-thumb-hover);}.container.scrollable.svelte-1lixazt:focus-visible {outline:2px solid var(--fortyfour-transcription-focus-color);outline-offset:2px;}.content.svelte-1lixazt {width:100%;}.text.svelte-1lixazt {white-space:pre-wrap;word-wrap:break-word;}.caption-text.svelte-1lixazt {white-space:normal;color:var(--fortyfour-transcription-color);}.word.svelte-1lixazt {transition:color 0.15s ease,
+      background-color 0.15s ease;border-radius:2px;padding:0 1px;margin:0 -1px;}.word.active[data-type="word"].svelte-1lixazt {color:var(--fortyfour-transcription-active-color);background-color:var(--fortyfour-transcription-active-bg);}.word.past[data-type="word"].svelte-1lixazt {color:var(--fortyfour-transcription-past-color);}.subtitle-content.svelte-1lixazt {min-height:2em;display:flex;align-items:center;justify-content:center;}.subtitle.svelte-1lixazt {text-align:center;}.placeholder-lines.svelte-1lixazt {display:flex;flex-direction:column;gap:0.5em;}.placeholder-line.svelte-1lixazt {display:block;height:1em;background-color:var(--fortyfour-transcription-placeholder-color);border-radius:4px;}.placeholder-line.short.svelte-1lixazt {width:60%;}`
+};
+function et(d, e) {
+  _r(e, !0), Ir(d, rt);
+  const h = e.$$host;
+  let s = A(e, "for", 7, ""), i = A(e, "mode", 7, "static"), n = A(e, "maxHeight", 7, 0), o = j(null);
+  const a = N(() => n() > 0);
+  let p = j(!1), y = j(!1);
+  function l() {
+    if (!r(o) || !r(a)) {
+      u(p, !1), u(y, !1);
+      return;
+    }
+    const { scrollTop: g, scrollHeight: x, clientHeight: t } = r(o);
+    u(p, g > 1), u(y, g + t < x - 1);
+  }
+  let z = j(null), v = j(null), L = j("none"), _ = j(0);
+  const f = Zr(() => r(z) === null, 200), U = N(() => r(z) !== null ? !1 : r(L) === "none" ? !0 : f()), W = N(() => r(v) !== null && r(v).length > 0), J = N(() => !r(W) || i() === "static" ? -1 : r(v).findIndex((g) => r(_) >= g.start && r(_) <= g.end));
+  function Q(g) {
+    const x = [];
+    let t = { words: [], start: 0, end: 0 };
+    for (const T of g) {
+      t.words.length === 0 && (t.start = T.start), t.words.push(T), t.end = T.end;
+      const H = T.text.trim();
+      (H.endsWith(".") || H.endsWith("?") || H.endsWith("!")) && (x.push(t), t = { words: [], start: 0, end: 0 });
+    }
+    return t.words.length > 0 && x.push(t), x;
+  }
+  const q = N(() => r(W) ? Q(r(v)) : []), $ = N(() => i() !== "subtitle" || r(q).length === 0 ? null : r(q).find((g) => r(_) >= g.start && r(_) <= g.end) ?? null);
+  function D(g) {
+    return r(_) >= g.start && r(_) <= g.end;
+  }
+  function ir(g) {
+    return r(_) > g.end;
+  }
+  pr(() => {
+    if (!s()) {
+      console.warn("fortyfour-transcription: 'for' attribute is required");
+      return;
+    }
+    const x = h.getRootNode().getElementById(s());
+    if (!x) {
+      console.warn(`fortyfour-transcription: element with id "${s()}" not found`);
+      return;
+    }
+    u(L, x.getAttribute("preload") || "none", !0);
+    const t = x.metadata;
+    t && (u(z, t.transcription ?? null, !0), u(v, t.words ?? null, !0)), x.currentTime && u(_, x.currentTime, !0);
+    function T() {
+      const I = x.metadata;
+      u(z, I?.transcription ?? null, !0), u(v, I?.words ?? null, !0);
+    }
+    function H() {
+      u(_, x.currentTime, !0);
+    }
+    return x.addEventListener("loadedmetadata", T), x.addEventListener("timeupdate", H), () => {
+      x.removeEventListener("loadedmetadata", T), x.removeEventListener("timeupdate", H);
+    };
+  }), Gr(h, "data-placeholder", () => r(U)), pr(() => {
+    if (!r(o) || !r(a))
+      return;
+    l(), r(o).addEventListener("scroll", l);
+    const g = new ResizeObserver(l);
+    return g.observe(r(o)), () => {
+      r(o).removeEventListener("scroll", l), g.disconnect();
+    };
+  }), pr(() => {
+    if (!r(a) || i() !== "karaoke")
+      return;
+    if (r(_) < 0.1) {
+      r(o)?.scrollTo({ top: 0, behavior: "smooth" });
+      return;
+    }
+    if (r(J) < 0)
+      return;
+    const g = r(o)?.querySelector(".word.active");
+    if (g) {
+      const x = r(o).getBoundingClientRect(), t = g.getBoundingClientRect(), T = r(o).scrollTop + (t.top - x.top) - x.height / 2 + t.height / 2;
+      r(o).scrollTo({ top: T, behavior: "smooth" });
+    }
+  });
+  var sr = {
+    get for() {
+      return s();
+    },
+    set for(g = "") {
+      s(g), P();
+    },
+    get mode() {
+      return i();
+    },
+    set mode(g = "static") {
+      i(g), P();
+    },
+    get maxHeight() {
+      return n();
+    },
+    set maxHeight(g = 0) {
+      n(g), P();
+    }
+  }, w = $e();
+  let k;
+  var F = G(w);
+  let nr, b;
+  var V = G(F);
+  {
+    var lr = (g) => {
+      var x = Ke(), t = G(x);
+      Sr(t, 21, () => r(v), Nr, (T, H, I) => {
+        var S = De();
+        let M;
+        var c = G(S, !0);
+        B(S), m(
+          (R) => {
+            M = er(S, 1, "word svelte-1lixazt", null, M, R), Z(S, "data-type", r(H).type), Lr(c, r(H).text);
+          },
+          [
+            () => ({
+              active: I === r(J),
+              past: I < r(J)
+            })
+          ]
+        ), E(T, S);
+      }), B(t), B(x), Er(1, x, () => Tr, () => ({ duration: 400 })), E(g, x);
+    }, gr = (g) => {
+      var x = hr(), t = fr(x);
       {
-        var te = (l) => {
-          var g = W();
-          E(() => P(g, r().translation)), s(l, g);
-        }, re = (l) => {
-          var g = Q(), C = R(g);
+        var T = (I) => {
+          var S = Xe(), M = G(S);
           {
-            var K = (H) => {
-              var S = Q(), ie = R(S);
+            var c = (R) => {
+              var X = Ge();
+              Sr(X, 21, () => r($).words, Nr, (ar, cr) => {
+                var or = Ze();
+                let K;
+                var ur = G(or, !0);
+                B(or), m(
+                  (Y) => {
+                    K = er(or, 1, "word svelte-1lixazt", null, K, Y), Z(or, "data-type", r(cr).type), Lr(ur, r(cr).text);
+                  },
+                  [
+                    () => ({
+                      active: D(r(cr)),
+                      past: ir(r(cr))
+                    })
+                  ]
+                ), E(ar, or);
+              }), B(X), Er(1, X, () => Tr, () => ({ duration: 200 })), E(R, X);
+            };
+            tr(M, (R) => {
+              r($) && R(c);
+            });
+          }
+          B(S), E(I, S);
+        }, H = (I) => {
+          var S = hr(), M = fr(S);
+          {
+            var c = (X) => {
+              var ar = Ve(), cr = G(ar);
+              Sr(cr, 21, () => r(v), Nr, (or, K, ur) => {
+                var Y = hr(), rr = fr(Y);
+                {
+                  var yr = (br) => {
+                    var mr = Ye();
+                    let Cr;
+                    var Pr = G(mr, !0);
+                    B(mr), m(
+                      (Jr) => {
+                        Cr = er(mr, 1, "word svelte-1lixazt", null, Cr, Jr), Z(mr, "data-type", r(K).type), Lr(Pr, r(K).text);
+                      },
+                      [() => ({ active: ur === r(J) })]
+                    ), Er(1, mr, () => Tr, () => ({ duration: 150 })), E(br, mr);
+                  };
+                  tr(rr, (br) => {
+                    r(_) >= r(K).start && br(yr);
+                  });
+                }
+                E(or, Y);
+              }), B(cr), B(ar), Er(1, ar, () => Tr, () => ({ duration: 400 })), E(X, ar);
+            }, R = (X) => {
+              var ar = hr(), cr = fr(ar);
               {
-                var oe = (I) => {
-                  var z = be(), M = R(z), N = h(M);
-                  N.__click = [he, m], E((ne) => P(M, `${ne ?? ""}... `), [() => r().transcription.slice(0, 200)]), s(I, z);
-                }, se = (I) => {
-                  var z = ke(), M = R(z), N = h(M);
-                  N.__click = [ye, m], E(() => P(M, `${r().transcription ?? ""} `)), s(I, z);
+                var or = (ur) => {
+                  var Y = Je(), rr = G(Y), yr = G(rr, !0);
+                  B(rr), B(Y), m(() => Lr(yr, r(z))), Er(1, Y, () => Tr, () => ({ duration: 400 })), E(ur, Y);
+                }, K = (ur) => {
+                  var Y = hr(), rr = fr(Y);
+                  {
+                    var yr = (br) => {
+                      var mr = Qe();
+                      let Cr;
+                      m((Pr) => Cr = Hr(mr, "", Cr, Pr), [
+                        () => ({ height: r(a) ? `${n()}px` : void 0 })
+                      ]), E(br, mr);
+                    };
+                    tr(
+                      rr,
+                      (br) => {
+                        r(U) && br(yr);
+                      },
+                      !0
+                    );
+                  }
+                  E(ur, Y);
                 };
-                k(ie, (I) => {
-                  p(m) ? I(se, !1) : I(oe);
-                });
+                tr(
+                  cr,
+                  (ur) => {
+                    r(z) ? ur(or) : ur(K, !1);
+                  },
+                  !0
+                );
               }
-              s(H, S);
-            }, ae = (H) => {
-              var S = W();
-              E(() => P(S, r().transcription)), s(H, S);
+              E(X, ar);
             };
-            k(
-              C,
-              (H) => {
-                r().transcription.length > 200 ? H(K) : H(ae, !1);
+            tr(
+              M,
+              (X) => {
+                i() === "progressive" && r(W) ? X(c) : X(R, !1);
               },
               !0
             );
           }
-          s(l, g);
+          E(I, S);
         };
-        k(J, (l) => {
-          p(T) ? l(te) : l(re, !1);
-        });
+        tr(
+          t,
+          (I) => {
+            i() === "subtitle" && r(W) ? I(T) : I(H, !1);
+          },
+          !0
+        );
       }
-      y(c), y(o), s(e, o);
+      E(g, x);
     };
-    k(U, (e) => {
-      r().transcription && e(B);
+    tr(V, (g) => {
+      i() === "karaoke" && r(W) ? g(lr) : g(gr, !1);
     });
   }
-  return y(u), s(i, u), $(F);
+  return B(F), zr(F, (g) => u(o, g), () => r(o)), B(w), m(
+    (g, x, t) => {
+      k = er(w, 1, "wrapper svelte-1lixazt", null, k, g), nr = er(F, 1, "container svelte-1lixazt", null, nr, x), b = Hr(F, "", b, t);
+    },
+    [
+      () => ({
+        scrollable: r(a),
+        "can-scroll-up": r(p),
+        "can-scroll-down": r(y)
+      }),
+      () => ({ scrollable: r(a) }),
+      () => ({
+        "max-height": r(a) ? `${n()}px` : void 0
+      })
+    ]
+  ), E(d, w), kr(sr);
 }
-de(["click"]);
-X(ee, { recordingId: {}, recording: {}, audioRef: {}, apiHost: {} }, [], [], !0);
-var He = f("<p>Loading...</p>"), Ie = f("<p>Error loading recording.</p>"), Re = f('<div class="container svelte-1kcle3q" role="group" aria-label="44 audio player"><!> <audio></audio></div>');
-const Ee = {
-  hash: "svelte-1kcle3q",
-  code: ":host {display:inline-block;font-size:inherit;font-family:system-ui;line-height:1.35;color:var(--44-color-1);}.container.svelte-1kcle3q {width:100%;border-radius:16px;background:var(--44-color-0);color:var(--44-color-1);}"
+customElements.define("fortyfour-transcription", xr(
+  et,
+  {
+    for: { attribute: "for", reflect: !0 },
+    mode: { attribute: "mode", reflect: !0 },
+    maxHeight: { attribute: "max-height", reflect: !0, type: "Number" }
+  },
+  [],
+  [],
+  !0
+));
+var tt = O('<div class="content svelte-z1j7sg"><div class="text svelte-z1j7sg"> </div></div>'), ot = O('<div class="placeholder-lines svelte-z1j7sg"><span class="placeholder-line svelte-z1j7sg"></span> <span class="placeholder-line short svelte-z1j7sg"></span></div>'), at = O("<div><div><!></div></div>");
+const nt = {
+  hash: "svelte-z1j7sg",
+  code: `:host {--fortyfour-translation-font-family: system-ui, sans-serif;--fortyfour-translation-font-size: 14px;--fortyfour-translation-placeholder-color: #e5e7eb;--fortyfour-translation-fade-color: white;--fortyfour-translation-scrollbar-thumb: #d1d5db;--fortyfour-translation-scrollbar-thumb-hover: #9ca3af;--fortyfour-translation-focus-color: #3b82f6;display:flex;font-family:var(--fortyfour-translation-font-family);font-size:var(--fortyfour-translation-font-size);}
+
+  @media (prefers-color-scheme: dark) {:host {--fortyfour-translation-placeholder-color: #374151;--fortyfour-translation-scrollbar-thumb: #4b5563;--fortyfour-translation-scrollbar-thumb-hover: #6b7280;--fortyfour-translation-focus-color: #60a5fa;}
+  }.wrapper.svelte-z1j7sg {position:relative;width:100%;}.wrapper.scrollable.svelte-z1j7sg::before,
+  .wrapper.scrollable.svelte-z1j7sg::after {content:"";position:absolute;left:0;right:0;height:24px;pointer-events:none;opacity:0;transition:opacity 0.15s ease;}.wrapper.scrollable.svelte-z1j7sg::before {top:0;background:linear-gradient(to top, transparent, var(--fortyfour-translation-fade-color));z-index:1;}.wrapper.scrollable.svelte-z1j7sg::after {bottom:0;background:linear-gradient(to bottom, transparent, var(--fortyfour-translation-fade-color));}.wrapper.can-scroll-up.svelte-z1j7sg::before {opacity:1;}.wrapper.can-scroll-down.svelte-z1j7sg::after {opacity:1;}.container.svelte-z1j7sg {width:100%;}.container.scrollable.svelte-z1j7sg {overflow-y:auto;scroll-behavior:smooth;padding-bottom:24px;scrollbar-width:thin;scrollbar-color:var(--fortyfour-translation-scrollbar-thumb) transparent;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar {width:6px;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar-track {background:transparent;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar-thumb {background-color:var(--fortyfour-translation-scrollbar-thumb);border-radius:3px;}.container.scrollable.svelte-z1j7sg::-webkit-scrollbar-thumb:hover {background-color:var(--fortyfour-translation-scrollbar-thumb-hover);}.container.scrollable.svelte-z1j7sg:focus-visible {outline:2px solid var(--fortyfour-translation-focus-color);outline-offset:2px;}.content.svelte-z1j7sg {width:100%;}.text.svelte-z1j7sg {white-space:pre-wrap;word-wrap:break-word;}.placeholder-lines.svelte-z1j7sg {display:flex;flex-direction:column;gap:0.5em;}.placeholder-line.svelte-z1j7sg {display:block;height:1em;background-color:var(--fortyfour-translation-placeholder-color);border-radius:4px;}.placeholder-line.short.svelte-z1j7sg {width:60%;}`
 };
-function Le(i, t) {
-  Y(t, !0), Z(i, Ee);
-  let n = x(t, "recordingId", 7), r = x(t, "theme", 7), a = x(t, "apiHost", 7, "api.44.audio");
-  const T = r().split(",").map((e) => e.trim()).map((e, o) => `--44-color-${o}: ${e};`).join(" ");
-  let m, q = L(!0), _ = L(null);
-  ue(async () => {
-    try {
-      const e = await fetch(`https://${a()}/api/v1/recordings/${n()}/player`);
-      if (!e.ok)
-        throw new Error("Failed to fetch data");
-      const o = await e.json();
-      o.status === "ready" && d(_, o, !0);
-    } catch (e) {
-      console.error(e);
-    } finally {
-      d(q, !1);
+function st(d, e) {
+  _r(e, !0), Ir(d, nt);
+  const h = e.$$host;
+  let s = A(e, "for", 7, ""), i = A(e, "maxHeight", 7, 0), n = j(null);
+  const o = N(() => i() > 0);
+  let a = j(!1), p = j(!1);
+  function y() {
+    if (!r(n) || !r(o)) {
+      u(a, !1), u(p, !1);
+      return;
+    }
+    const { scrollTop: w, scrollHeight: k, clientHeight: F } = r(n);
+    u(a, w > 1), u(p, w + F < k - 1);
+  }
+  let l = j(null), z = j("none");
+  function v(w) {
+    if (!w)
+      return w;
+    const k = document.createElement("textarea");
+    return k.innerHTML = w, k.value;
+  }
+  const L = N(() => v(r(l))), _ = Zr(() => r(l) === null, 200), f = N(() => r(l) !== null ? !1 : r(z) === "none" ? !0 : _());
+  pr(() => {
+    if (!s()) {
+      console.warn("fortyfour-translation: 'for' attribute is required");
+      return;
     }
+    const k = h.getRootNode().getElementById(s());
+    if (!k) {
+      console.warn(`fortyfour-translation: element with id "${s()}" not found`);
+      return;
+    }
+    u(z, k.getAttribute("preload") || "none", !0);
+    const F = k.metadata;
+    F && u(l, F.translation ?? null, !0);
+    function nr() {
+      const b = k.metadata;
+      u(l, b?.translation ?? null, !0);
+    }
+    return k.addEventListener("loadedmetadata", nr), () => {
+      k.removeEventListener("loadedmetadata", nr);
+    };
+  }), Gr(h, "data-placeholder", () => r(f)), pr(() => {
+    if (!r(n) || !r(o))
+      return;
+    y(), r(n).addEventListener("scroll", y);
+    const w = new ResizeObserver(y);
+    return w.observe(r(n)), () => {
+      r(n).removeEventListener("scroll", y), w.disconnect();
+    };
   });
-  var F = {
+  var U = {
+    get for() {
+      return s();
+    },
+    set for(w = "") {
+      s(w), P();
+    },
+    get maxHeight() {
+      return i();
+    },
+    set maxHeight(w = 0) {
+      i(w), P();
+    }
+  }, W = at();
+  let J;
+  var Q = G(W);
+  let q, $;
+  var D = G(Q);
+  {
+    var ir = (w) => {
+      var k = tt(), F = G(k), nr = G(F, !0);
+      B(F), B(k), m(() => Lr(nr, r(L))), Er(1, k, () => Tr, () => ({ duration: 400 })), E(w, k);
+    }, sr = (w) => {
+      var k = hr(), F = fr(k);
+      {
+        var nr = (b) => {
+          var V = ot();
+          let lr;
+          m((gr) => lr = Hr(V, "", lr, gr), [
+            () => ({ height: r(o) ? `${i()}px` : void 0 })
+          ]), E(b, V);
+        };
+        tr(
+          F,
+          (b) => {
+            r(f) && b(nr);
+          },
+          !0
+        );
+      }
+      E(w, k);
+    };
+    tr(D, (w) => {
+      r(L) ? w(ir) : w(sr, !1);
+    });
+  }
+  return B(Q), zr(Q, (w) => u(n, w), () => r(n)), B(W), m(
+    (w, k, F) => {
+      J = er(W, 1, "wrapper svelte-z1j7sg", null, J, w), q = er(Q, 1, "container svelte-z1j7sg", null, q, k), $ = Hr(Q, "", $, F);
+    },
+    [
+      () => ({
+        scrollable: r(o),
+        "can-scroll-up": r(a),
+        "can-scroll-down": r(p)
+      }),
+      () => ({ scrollable: r(o) }),
+      () => ({
+        "max-height": r(o) ? `${i()}px` : void 0
+      })
+    ]
+  ), E(d, W), kr(U);
+}
+customElements.define("fortyfour-translation", xr(
+  st,
+  {
+    for: { attribute: "for", reflect: !0 },
+    maxHeight: { attribute: "max-height", reflect: !0, type: "Number" }
+  },
+  [],
+  [],
+  !0
+));
+var it = Ar('<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 Vr(d, e) {
+  _r(e, !0);
+  let h = A(e, "class", 7, ""), s = A(e, "height", 7, "1em"), i = A(e, "width", 7, "auto");
+  var n = {
+    get class() {
+      return h();
+    },
+    set class(a = "") {
+      h(a), P();
+    },
+    get height() {
+      return s();
+    },
+    set height(a = "1em") {
+      s(a), P();
+    },
+    get width() {
+      return i();
+    },
+    set width(a = "auto") {
+      i(a), P();
+    }
+  }, o = it();
+  return m(() => {
+    er(o, 0, ze(h())), Z(o, "height", s()), Z(o, "width", i());
+  }), E(d, o), kr(n);
+}
+xr(Vr, { class: {}, height: {}, width: {} }, [], [], !0);
+var lt = O("<fortyfour-progress-bar></fortyfour-progress-bar>", 2), ft = O("<fortyfour-line-waveform></fortyfour-line-waveform>", 2), ct = O("<fortyfour-bar-waveform></fortyfour-bar-waveform>", 2), ut = (d, e) => u(e, !r(e)), dt = O('<span class="label-separator svelte-14nd1et">•</span> <button class="translation-toggle svelte-14nd1et"> </button>', 1), vt = O("<fortyfour-translation></fortyfour-translation>", 2), pt = O("<fortyfour-transcription></fortyfour-transcription>", 2), yt = O('<div class="transcription-box svelte-14nd1et"><div class="transcription-header svelte-14nd1et"><span class="transcription-label svelte-14nd1et">TRANSCRIPT</span> <!></div> <!></div>'), ht = O('<a class="branding svelte-14nd1et" href="https://44.audio" target="_blank" rel="noopener noreferrer"><span class="branding-text svelte-14nd1et">powered by</span> <!></a>'), gt = O('<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 bt = {
+  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 mt(d, e) {
+  _r(e, !0), Ir(d, bt);
+  const h = e.$$host;
+  let s = A(e, "recordingId", 7), i = A(e, "apiHost", 7, "api.44.audio"), n = A(e, "shape", 7, "rounded"), o = A(e, "preload", 7, "none"), a = A(e, "spacing", 7, "default"), p = A(e, "progress", 7, "bar-waveform"), y = A(e, "hideTranscript", 7, !1), l = A(e, "hideTranslation", 7, !1), z = A(e, "hideBranding", 7, !1);
+  const v = `fortyfour-player-${crypto.randomUUID().slice(0, 8)}`;
+  let L = j(null), _ = j(!1), f = j(!1);
+  const U = N(() => n() === "square"), W = N(() => r(U) ? "square" : "circle"), J = N(() => r(U) ? "0" : "2"), Q = N(() => p() || "bar-waveform"), q = N(() => a() === "compact" ? 28 : a() === "comfortable" ? 48 : 40), $ = N(() => a() === "compact" ? 4 : a() === "comfortable" ? 8 : 6);
+  function D() {
+    const c = r(L)?.state ?? "idle";
+    h.setAttribute("data-state", c);
+  }
+  function ir() {
+    const c = r(L)?.metadata?.translation;
+    u(_, c != null && c !== "", !0);
+  }
+  pr(() => {
+    r(L) && (D(), ir());
+  }), h.pause = () => r(L)?.pause(), h.togglePlay = () => r(L)?.togglePlay(), h.seek = (c) => r(L)?.seek(c);
+  var sr = {
     get recordingId() {
+      return s();
+    },
+    set recordingId(c) {
+      s(c), P();
+    },
+    get apiHost() {
+      return i();
+    },
+    set apiHost(c = "api.44.audio") {
+      i(c), P();
+    },
+    get shape() {
       return n();
     },
-    set recordingId(e) {
-      n(e), j();
+    set shape(c = "rounded") {
+      n(c), P();
     },
-    get theme() {
-      return r();
+    get preload() {
+      return o();
     },
-    set theme(e) {
-      r(e), j();
+    set preload(c = "none") {
+      o(c), P();
     },
-    get apiHost() {
+    get spacing() {
       return a();
     },
-    set apiHost(e = "api.44.audio") {
-      a(e), j();
+    set spacing(c = "default") {
+      a(c), P();
+    },
+    get progress() {
+      return p();
+    },
+    set progress(c = "bar-waveform") {
+      p(c), P();
+    },
+    get hideTranscript() {
+      return y();
+    },
+    set hideTranscript(c = !1) {
+      y(c), P();
+    },
+    get hideTranslation() {
+      return l();
+    },
+    set hideTranslation(c = !1) {
+      l(c), P();
+    },
+    get hideBranding() {
+      return z();
+    },
+    set hideBranding(c = !1) {
+      z(c), P();
     }
-  }, u = Re(), w = b(u);
+  }, w = gt(), k = fr(w);
+  m(() => C(k, "id", v)), m(() => C(k, "api-host", i())), m(() => C(k, "recording-id", s())), m(() => C(k, "preload", o())), zr(k, (c) => u(L, c), () => r(L));
+  var F = dr(k, 2);
+  let nr;
+  var b = G(F), V = G(b);
+  m(() => C(V, "for", v)), m(() => C(V, "shape", r(W))), er(V, 1, "svelte-14nd1et");
+  var lr = dr(V, 2);
   {
-    var O = (e) => {
-      var o = He();
-      s(e, o);
-    }, U = (e) => {
-      var o = Q(), A = R(o);
+    var gr = (c) => {
+      var R = lt();
+      m(() => C(R, "for", v)), m(() => C(R, "bar-height", r($))), m(() => C(R, "bar-radius", r(J))), er(R, 1, "svelte-14nd1et"), E(c, R);
+    }, g = (c) => {
+      var R = hr(), X = fr(R);
       {
-        var D = (c) => {
-          ee(c, {
-            get apiHost() {
-              return a();
-            },
-            get recordingId() {
-              return n();
-            },
-            get recording() {
-              return p(_);
-            },
-            get audioRef() {
-              return m;
-            }
-          });
-        }, G = (c) => {
-          var J = Ie();
-          s(c, J);
+        var ar = (or) => {
+          var K = ft();
+          m(() => C(K, "for", v)), C(K, "line-width", "2"), m(() => C(K, "height", r(q))), m(() => C(K, "sharp", r(U))), er(K, 1, "svelte-14nd1et"), E(or, K);
+        }, cr = (or) => {
+          var K = ct();
+          m(() => C(K, "for", v)), C(K, "bar-width", "4"), C(K, "bar-gap", "2"), m(() => C(K, "bar-radius", r(J))), m(() => C(K, "height", r(q))), er(K, 1, "svelte-14nd1et"), E(or, K);
         };
-        k(
-          A,
-          (c) => {
-            p(_) ? c(D) : c(G, !1);
+        tr(
+          X,
+          (or) => {
+            r(Q) === "line-waveform" ? or(ar) : or(cr, !1);
           },
           !0
         );
       }
-      s(e, o);
+      E(c, R);
     };
-    k(w, (e) => {
-      p(q) ? e(O) : e(U, !1);
+    tr(lr, (c) => {
+      r(Q) === "progress-bar" ? c(gr) : c(g, !1);
     });
   }
-  var B = h(w, 2);
-  return ge(B, (e) => m = e, () => m), y(u), E(() => {
-    fe(u, T), pe(B, "src", `https://${a() ?? ""}/api/v1/recordings/${n() ?? ""}/audio.mp3`);
-  }), s(i, u), $(F);
+  var x = dr(lr, 2), t = G(x);
+  er(t, 1, "elapsed svelte-14nd1et"), m(() => C(t, "for", v)), C(t, "format", "elapsed");
+  var T = dr(t, 4);
+  er(T, 1, "total svelte-14nd1et"), m(() => C(T, "for", v)), C(T, "format", "total"), B(x), B(b);
+  var H = dr(b, 2);
+  {
+    var I = (c) => {
+      var R = yt(), X = G(R), ar = dr(G(X), 2);
+      {
+        var cr = (Y) => {
+          var rr = dt(), yr = dr(fr(rr), 2);
+          yr.__click = [ut, f];
+          var br = G(yr, !0);
+          B(yr), m(() => {
+            Z(yr, "aria-pressed", r(f)), Lr(br, r(f) ? "ORIGINAL" : "TRANSLATION");
+          }), E(Y, rr);
+        };
+        tr(ar, (Y) => {
+          r(_) && !l() && Y(cr);
+        });
+      }
+      B(X);
+      var or = dr(X, 2);
+      {
+        var K = (Y) => {
+          var rr = vt();
+          m(() => C(rr, "for", v)), C(rr, "max-height", "96"), er(rr, 1, "svelte-14nd1et"), E(Y, rr);
+        }, ur = (Y) => {
+          var rr = pt();
+          m(() => C(rr, "for", v)), C(rr, "mode", "karaoke"), C(rr, "max-height", "96"), er(rr, 1, "svelte-14nd1et"), E(Y, rr);
+        };
+        tr(or, (Y) => {
+          r(f) && !l() ? Y(K) : Y(ur, !1);
+        });
+      }
+      B(R), E(c, R);
+    };
+    tr(H, (c) => {
+      y() || c(I);
+    });
+  }
+  B(F);
+  var S = dr(F, 2);
+  {
+    var M = (c) => {
+      var R = ht(), X = dr(G(R), 2);
+      Vr(X, { class: "branding-logo", height: "0.65em" }), B(R), E(c, R);
+    };
+    tr(S, (c) => {
+      z() || c(M);
+    });
+  }
+  return m((c) => nr = er(F, 1, "container svelte-14nd1et", null, nr, c), [
+    () => ({
+      square: r(U),
+      compact: a() === "compact",
+      comfortable: a() === "comfortable"
+    })
+  ]), vr("loadedmetadata", k, () => {
+    D(), ir();
+  }), vr("play", k, D), vr("pause", k, D), vr("error", k, D), vr("ended", k, D), E(d, w), kr(sr);
+}
+Br(["click"]);
+customElements.define("fortyfour-player", xr(
+  mt,
+  {
+    apiHost: { attribute: "api-host", reflect: !0 },
+    recordingId: { attribute: "recording-id", reflect: !0 },
+    shape: { attribute: "shape", reflect: !0 },
+    preload: { attribute: "preload", reflect: !0 },
+    spacing: { attribute: "spacing", reflect: !0 },
+    progress: { attribute: "progress", reflect: !0 },
+    hideTranscript: { attribute: "hide-transcript", reflect: !0, type: "Boolean" },
+    hideTranslation: {
+      attribute: "hide-translation",
+      reflect: !0,
+      type: "Boolean"
+    },
+    hideBranding: { attribute: "hide-branding", reflect: !0, type: "Boolean" }
+  },
+  [],
+  [],
+  !0
+));
+var wt = O("<fortyfour-recording></fortyfour-recording> <fortyfour-play-button></fortyfour-play-button>", 3);
+const xt = {
+  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 _t(d, e) {
+  _r(e, !0), Ir(d, xt);
+  const h = e.$$host;
+  let s = A(e, "recordingId", 7), i = A(e, "apiHost", 7, "api.44.audio"), n = A(e, "size", 7, "medium"), o = A(e, "preload", 7, "none");
+  const a = `fortyfour-mini-player-${crypto.randomUUID().slice(0, 8)}`;
+  let p = j(null);
+  function y() {
+    const f = r(p)?.state ?? "idle";
+    h.setAttribute("data-state", f);
+  }
+  pr(() => {
+    r(p) && y();
+  });
+  var l = {
+    get recordingId() {
+      return s();
+    },
+    set recordingId(f) {
+      s(f), P();
+    },
+    get apiHost() {
+      return i();
+    },
+    set apiHost(f = "api.44.audio") {
+      i(f), P();
+    },
+    get size() {
+      return n();
+    },
+    set size(f = "medium") {
+      n(f), P();
+    },
+    get preload() {
+      return o();
+    },
+    set preload(f = "none") {
+      o(f), P();
+    }
+  }, z = wt(), v = fr(z);
+  m(() => C(v, "id", a)), m(() => C(v, "api-host", i())), m(() => C(v, "recording-id", s())), m(() => C(v, "preload", o())), zr(v, (f) => u(p, f), () => r(p));
+  var L = dr(v, 2);
+  let _;
+  return m(() => C(L, "for", a)), C(L, "shape", "circle"), C(L, "visualization", "ring"), m((f) => _ = er(L, 1, "button svelte-1i43bu9", null, _, f), [
+    () => ({ small: n() === "small", large: n() === "large" })
+  ]), vr("loadedmetadata", v, y), vr("play", v, y), vr("pause", v, y), vr("error", v, y), vr("ended", v, y), E(d, z), kr(l);
 }
-customElements.define("fortyfour-audio-player", X(
-  Le,
+customElements.define("fortyfour-mini-player", xr(
+  _t,
   {
-    apiHost: { attribute: "api-host" },
-    recordingId: { attribute: "recording-id" },
-    theme: { attribute: "theme" }
+    apiHost: { attribute: "api-host", reflect: !0 },
+    recordingId: { attribute: "recording-id", reflect: !0 },
+    size: { attribute: "size", reflect: !0 },
+    preload: { attribute: "preload", reflect: !0 }
   },
   [],
   [],