@braccato/core 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Better Lyrics
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,128 @@
+import { CSSResult } from 'lit';
+import { LitElement } from 'lit';
+import { TemplateResult } from 'lit';
+
+export declare class BraccatoElement extends LitElement {
+    static styles: CSSResult[];
+    lyrics: Lyric[];
+    currentTime: number;
+    playing: boolean;
+    scrollMode: "internal" | "external";
+    scrollContainer: HTMLElement | null;
+    dir: "auto" | "ltr" | "rtl";
+    longWordThreshold: number;
+    lineSyncedDelay: number;
+    disableRichsync: boolean;
+    debug: boolean;
+    source: string | null;
+    src: string | null;
+    onLineActive?: (line: Lyric, index: number) => void;
+    onLineInactive?: (line: Lyric, index: number) => void;
+    private _lyricsData;
+    private _animState;
+    private _rafId;
+    private _lastLyrics;
+    private _resizeObserver;
+    private _mediaElement;
+    private _lastSrc;
+    private _srcAbortController;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult<1>;
+    private _log;
+    private _injectLyrics;
+    private _recalculatePositions;
+    private _startLoop;
+    private _stopLoop;
+    private _tickCount;
+    private _tick;
+    private _getScrollContainer;
+    private _onScroll;
+    private _handleLineClick;
+    private _resolveMediaElement;
+    private _fetchLyricsFromSrc;
+    private _emitError;
+    resumeAutoscroll(): void;
+    recalculatePositions(): void;
+}
+
+export declare interface BraccatoEventMap {
+    "braccato:line-click": CustomEvent<{
+        time: number;
+        lineIndex: number;
+    }>;
+    "braccato:word-click": CustomEvent<{
+        time: number;
+        lineIndex: number;
+        wordIndex: number;
+    }>;
+    "braccato:lyrics-loaded": CustomEvent<{
+        syncType: SyncType;
+        lineCount: number;
+    }>;
+    "braccato:scroll-state": CustomEvent<{
+        userScrolling: boolean;
+    }>;
+    "braccato:error": CustomEvent<{
+        error: Error;
+    }>;
+}
+
+export declare interface LineData {
+    parts: PartData[];
+    isScrolled: boolean;
+    isAnimationPlayStatePlaying: boolean;
+    accumulatedOffsetMs: number;
+    isAnimating: boolean;
+    lastAnimSetupAt: number;
+    isSelected: boolean;
+    height: number;
+    position: number;
+    time: number;
+    duration: number;
+    element: HTMLElement;
+    animationStartTimeMs: number;
+}
+
+export declare interface Lyric {
+    startTimeMs: number;
+    words: string;
+    durationMs: number;
+    key?: string;
+    parts?: LyricPart[];
+    agent?: string;
+    translation?: {
+        text: string;
+        lang: string;
+    };
+    romanization?: string;
+    timedRomanization?: LyricPart[];
+    isInstrumental?: boolean;
+}
+
+export declare interface LyricPart {
+    startTimeMs: number;
+    words: string;
+    durationMs: number;
+    isBackground?: boolean;
+}
+
+export declare interface LyricsData {
+    lines: LineData[];
+    syncType: SyncType;
+    width: number;
+    height: number;
+    container: HTMLElement;
+}
+
+export declare interface PartData {
+    time: number;
+    duration: number;
+    element: HTMLElement;
+    animationStartTimeMs: number;
+}
+
+export declare type SyncType = "richsync" | "synced" | "none";
+
+export { }

package/dist/index.js

@@ -0,0 +1,872 @@
+import { LitElement as st, unsafeCSS as J, html as ot } from "lit";
+import { property as D } from "lit/decorators.js";
+function F(t) {
+  if (!t) return 0;
+  if (typeof t == "number") return t;
+  const e = t.match(/^([\d.]+)(h|m|s|ms)$/);
+  if (e) {
+    const i = Number.parseFloat(e[1]), o = e[2];
+    if (o === "h") return Math.round(i * 36e5);
+    if (o === "m") return Math.round(i * 6e4);
+    if (o === "s") return Math.round(i * 1e3);
+    if (o === "ms") return Math.round(i);
+  }
+  const a = t.split(":").map((i) => i.replace(/[^0-9.]/g, ""));
+  let r = 0;
+  try {
+    return a.length === 1 ? r = Number.parseFloat(a[0]) * 1e3 : a.length === 2 ? r = Number.parseInt(a[0], 10) * 6e4 + Number.parseFloat(a[1]) * 1e3 : a.length === 3 && (r = Number.parseInt(a[0], 10) * 36e5 + Number.parseInt(a[1], 10) * 6e4 + Number.parseFloat(a[2]) * 1e3), Math.round(r);
+  } catch {
+    return 0;
+  }
+}
+function k(t, e) {
+  const a = t.getAttribute(e);
+  if (a !== null) return a;
+  for (const r of t.attributes)
+    if (r.localName === e) return r.value;
+  return null;
+}
+function G(t) {
+  const e = {
+    text: "",
+    begin: k(t, "begin") ? F(k(t, "begin")) : void 0,
+    end: k(t, "end") ? F(k(t, "end")) : void 0,
+    role: k(t, "role") ?? void 0,
+    children: []
+  };
+  for (const a of t.childNodes)
+    if (a.nodeType === 3) {
+      const r = a.textContent ?? "";
+      e.text += r, e.children.push({ text: r, children: [] });
+    } else a.nodeType === 1 && e.children.push(G(a));
+  return e;
+}
+function $(t, e, a = !1) {
+  let r = "";
+  const i = [];
+  let o = !1;
+  for (const n of t) {
+    const s = a || n.role === "x-bg";
+    if (n.children.length > 0)
+      if (s && !a) {
+        const c = $(n.children, e, !0);
+        r += c.text, i.push(...c.parts), c.isWordSynced && (o = !0);
+      } else if (n.begin !== void 0 && n.end !== void 0) {
+        const c = n.children.map((d) => d.text).join("") || n.text;
+        i.push({
+          startTimeMs: n.begin,
+          durationMs: n.end - n.begin,
+          words: c,
+          isBackground: s || void 0
+        }), r += c, o = !0;
+      } else {
+        const c = $(n.children, e, s);
+        r += c.text, i.push(...c.parts), c.isWordSynced && (o = !0);
+      }
+    else if (n.text)
+      if (r += n.text, n.begin !== void 0 && n.end !== void 0)
+        i.push({
+          startTimeMs: n.begin,
+          durationMs: n.end - n.begin,
+          words: n.text,
+          isBackground: s || void 0
+        }), o = !0;
+      else {
+        const c = i[i.length - 1];
+        i.push({
+          startTimeMs: c ? c.startTimeMs + c.durationMs : e,
+          durationMs: 0,
+          words: n.text,
+          isBackground: s || void 0
+        });
+      }
+  }
+  return o ? { parts: i, text: r, isWordSynced: o } : { parts: [], text: r, isWordSynced: !1 };
+}
+function ct(t, e, a) {
+  if (t.length === 0) return t;
+  const r = [], i = (s, c) => ({
+    startTimeMs: s,
+    durationMs: c,
+    words: "",
+    parts: [],
+    isInstrumental: !0
+  });
+  t[0].startTimeMs > a && r.push(i(0, t[0].startTimeMs));
+  for (let s = 0; s < t.length; s++)
+    if (r.push(t[s]), s < t.length - 1) {
+      const c = t[s].startTimeMs + t[s].durationMs, d = t[s + 1].startTimeMs - c;
+      d > a && r.push(i(c, d));
+    }
+  const o = t[t.length - 1], n = o.startTimeMs + o.durationMs;
+  return e - n > a && r.push(i(n, e - n)), r;
+}
+function lt(t, e = {}) {
+  const a = t.replace(/\\"/g, '"'), r = new DOMParser().parseFromString(a, "text/xml"), i = r.querySelector("tt"), o = (i ? k(i, "lang") : null) ?? void 0, n = r.querySelector("body");
+  if (!n) return { lyrics: [], isWordSynced: !1, language: o };
+  const s = n.getAttribute("dur"), c = s ? F(s) : 0, d = n.querySelectorAll("p"), p = /* @__PURE__ */ new Map();
+  let f = !1;
+  const m = /* @__PURE__ */ new Map(), h = [
+    ...r.querySelectorAll("agent"),
+    ...r.getElementsByTagNameNS("http://www.w3.org/ns/ttml#metadata", "agent")
+  ];
+  let x = 0;
+  for (const w of h) {
+    const u = k(w, "id"), _ = k(w, "type");
+    u && (m.has(u) || (_ === "person" || _ === "character" ? (x++, m.set(u, `v${x}`)) : m.set(u, "v1000")));
+  }
+  for (const w of d) {
+    const u = F(k(w, "begin") ?? void 0), _ = F(k(w, "end") ?? void 0), E = k(w, "key") ?? String(p.size), A = k(w, "agent") ?? void 0, y = A ? m.get(A) ?? A : void 0, S = Array.from(w.childNodes).filter((b) => b.nodeType === 1 || b.nodeType === 3).map(
+      (b) => b.nodeType === 1 ? G(b) : { text: b.textContent ?? "", children: [] }
+    ), l = $(S, u);
+    l.isWordSynced && (f = !0), p.set(E, {
+      agent: y,
+      durationMs: _ - u,
+      parts: l.parts,
+      startTimeMs: u,
+      words: l.text,
+      key: E
+    });
+  }
+  const g = r.querySelectorAll("translations");
+  for (const w of g) {
+    const u = w.getAttribute("lang");
+    if (!u) continue;
+    const _ = w.querySelectorAll("translation");
+    for (const E of _) {
+      const A = E.getAttribute("for"), y = E.querySelector("text"), S = y == null ? void 0 : y.textContent;
+      if (A && S) {
+        const l = p.get(A);
+        l && (l.translation = { text: S, lang: u });
+      }
+    }
+  }
+  const v = r.querySelectorAll("transliterations");
+  for (const w of v) {
+    const u = w.querySelectorAll("transliteration");
+    for (const _ of u) {
+      const E = _.getAttribute("for");
+      if (!E) continue;
+      const A = p.get(E);
+      if (!A) continue;
+      const y = _.querySelectorAll("text");
+      let S = "";
+      const l = [];
+      for (const b of y) {
+        const N = Array.from(b.childNodes).filter((T) => T.nodeType === 1 || T.nodeType === 3).map(
+          (T) => T.nodeType === 1 ? G(T) : { text: T.textContent ?? "", children: [] }
+        ), M = $(N, A.startTimeMs);
+        S += M.text, l.push(...M.parts);
+      }
+      A.romanization = S, l.length > 0 && (A.timedRomanization = l);
+    }
+  }
+  let P = Array.from(p.values());
+  const L = e.instrumentalGapMs ?? 5e3;
+  return c > 0 && (P = ct(P, c, L)), { lyrics: P, isWordSynced: f, language: o };
+}
+const dt = {
+  detect(t) {
+    return t.includes("<tt") && t.includes("</tt>");
+  },
+  parse(t, e = 0) {
+    return lt(t).lyrics;
+  }
+}, ut = ["ti", "ar", "al", "au", "lr", "length", "by", "offset", "re", "tool", "ve", "#"];
+function K(t) {
+  if (!t) return 0;
+  if (typeof t == "number") return t;
+  const e = t.split(":");
+  let a = 0;
+  try {
+    if (e.length === 1)
+      a = Number.parseFloat(e[0]) * 1e3;
+    else if (e.length === 2) {
+      const r = Number.parseInt(e[0], 10), i = Number.parseFloat(e[1]);
+      a = r * 60 * 1e3 + i * 1e3;
+    } else if (e.length === 3) {
+      const r = Number.parseInt(e[0], 10), i = Number.parseInt(e[1], 10), o = Number.parseFloat(e[2]);
+      a = r * 3600 * 1e3 + i * 60 * 1e3 + o * 1e3;
+    }
+    return Math.round(a);
+  } catch {
+    return 0;
+  }
+}
+function mt(t, e) {
+  var a;
+  const r = t.split(`
+`), i = [], o = {};
+  for (const n of r) {
+    const s = n.trim(), c = s.match(/^\[(\w+):(.*)\]$/);
+    if (c && ut.includes(c[1])) {
+      o[c[1]] = c[2];
+      continue;
+    }
+    const d = /\[(\d+:\d+\.\d+)\]/g, p = /<(\d+:\d+\.\d+)>/g, f = [];
+    for (const L of s.matchAll(d))
+      f.push(K(L[1]));
+    if (f.length === 0) continue;
+    const m = s.replace(d, "").trim(), h = [];
+    let x = null, g = "";
+    m.split(p).forEach((L, w) => {
+      if (w % 2 === 0) {
+        let u = L;
+        u.length > 0 && u[0] === " " && (u = u.substring(1)), u.length > 0 && u[u.length - 1] === " " && (u = u.substring(0, u.length - 1)), g += u, h.length > 0 && h[h.length - 1].startTimeMs && (h[h.length - 1].words += u);
+      } else {
+        const u = K(L);
+        x !== null && h.length > 0 && (h[h.length - 1].durationMs = u - x), h.push({ startTimeMs: u, words: "", durationMs: 0 }), x = u;
+      }
+    });
+    const v = Math.min(...f), P = Math.max(...f) - v;
+    i.push({
+      startTimeMs: v,
+      words: g.trim(),
+      durationMs: P,
+      parts: h.length > 0 ? h : void 0
+    });
+  }
+  for (let n = 0; n < i.length; n++) {
+    const s = i[n];
+    if (n + 1 < i.length) {
+      const c = i[n + 1];
+      if (s.durationMs === 0 && (s.durationMs = Math.max(c.startTimeMs - s.startTimeMs, 0)), s.parts && s.parts.length > 0) {
+        let d = c.startTimeMs;
+        for (const f of s.parts)
+          d = Math.max(d, f.startTimeMs);
+        const p = s.parts[s.parts.length - 1];
+        p.durationMs = Math.max(c.startTimeMs - p.startTimeMs, 0), s.durationMs = Math.max(d - s.startTimeMs, 0);
+      }
+    } else if (s.durationMs === 0 && (s.durationMs = e - s.startTimeMs), s.parts && s.parts.length > 0) {
+      const c = s.parts[s.parts.length - 1];
+      c.durationMs = e - c.startTimeMs;
+    }
+  }
+  if (o.offset) {
+    let n = Number(o.offset);
+    Number.isNaN(n) && (n = 0), n = n * 1e3;
+    for (const s of i)
+      s.startTimeMs -= n, (a = s.parts) == null || a.forEach((c) => {
+        c.startTimeMs -= n;
+      });
+  }
+  return i;
+}
+function ft(t) {
+  for (const r of t)
+    if (r.parts)
+      for (let i = 1; i < r.parts.length; i++) {
+        const o = r.parts[i], n = r.parts[i - 1];
+        if (o.words === " " && n.words !== " ") {
+          const s = o.durationMs - n.durationMs;
+          if (Math.abs(s) <= 15 || o.durationMs <= 100) {
+            const c = o.durationMs;
+            n.durationMs += c, o.durationMs -= c, o.startTimeMs += c;
+          }
+        }
+      }
+  let e = 0, a = 0;
+  for (const r of t)
+    if (!(!r.parts || r.parts.length === 0))
+      for (let i = 0; i < r.parts.length - 2; i++) {
+        const o = r.parts[i];
+        o.words !== " " && (o.durationMs <= 100 && e++, a++);
+      }
+  if (a > 0 && e / a > 0.5)
+    for (let r = 0; r < t.length; r++) {
+      const i = t[r];
+      if (!(!i.parts || i.parts.length === 0))
+        for (let o = 0; o < i.parts.length; o++) {
+          const n = i.parts[o];
+          if (n.words !== " " && n.durationMs <= 400) {
+            let s = null;
+            o + 1 < i.parts.length ? s = i.parts[o + 1] : r + 1 < t.length && t[r + 1].parts && t[r + 1].parts.length > 0 && (s = t[r + 1].parts[0]), s === null ? n.durationMs = 300 : s.words === " " ? (n.durationMs += s.durationMs, s.startTimeMs += s.durationMs, s.durationMs = 0) : n.durationMs = s.startTimeMs - n.startTimeMs;
+          }
+        }
+    }
+}
+const pt = {
+  detect(t) {
+    return /\[\d+:\d+\.\d+\]/.test(t);
+  },
+  parse(t, e = 0) {
+    const a = mt(t, e);
+    return ft(a), a;
+  }
+};
+function Q(t) {
+  const e = t.trim().match(/^(\d+):(\d+):(\d+)[,.](\d+)$/);
+  if (!e) return 0;
+  const a = Number.parseInt(e[1], 10), r = Number.parseInt(e[2], 10), i = Number.parseInt(e[3], 10), o = Number.parseInt(e[4].padEnd(3, "0").slice(0, 3), 10);
+  return a * 36e5 + r * 6e4 + i * 1e3 + o;
+}
+const ht = {
+  detect(t) {
+    return /\d+\r?\n\d{2}:\d{2}:\d{2}[,.]\d+ --> \d{2}:\d{2}:\d{2}[,.]\d+/.test(t);
+  },
+  parse(t, e = 0) {
+    const a = t.trim().split(/\r?\n\r?\n/), r = [];
+    for (const i of a) {
+      const o = i.split(/\r?\n/);
+      if (o.length < 2) continue;
+      const n = o.find((h) => h.includes("-->"));
+      if (!n) continue;
+      const [s, c] = n.split("-->").map((h) => h.trim()), d = Q(s), p = Q(c), f = o.indexOf(n), m = o.slice(f + 1).join(`
+`).replace(/<[^>]+>/g, "").trim();
+      m && r.push({
+        startTimeMs: d,
+        words: m,
+        durationMs: p - d
+      });
+    }
+    return r;
+  }
+}, nt = {
+  detect(t) {
+    return !0;
+  },
+  parse(t, e = 0) {
+    return t.split(`
+`).map((a) => ({
+      startTimeMs: 0,
+      words: a,
+      durationMs: 0
+    }));
+  }
+}, bt = {
+  detect(t) {
+    return /\[\d+,\d+\]/.test(t) && /\(\d+,\d+\)/.test(t);
+  },
+  parse(t, e = 0) {
+    const a = t.split(`
+`), r = [];
+    for (const i of a) {
+      const o = i.trim().match(/^\[(\d+),(\d+)\](.*)$/);
+      if (!o) continue;
+      const n = Number.parseInt(o[1], 10), s = Number.parseInt(o[2], 10), c = o[3], d = [];
+      let p = "";
+      const f = /([^(]*)\((\d+),(\d+)\)/g;
+      for (const m of c.matchAll(f)) {
+        const h = m[1], x = Number.parseInt(m[2], 10), g = Number.parseInt(m[3], 10);
+        p += h, d.push({ startTimeMs: x, words: h, durationMs: g });
+      }
+      r.push({
+        startTimeMs: n,
+        words: p,
+        durationMs: s,
+        parts: d.length > 0 ? d : void 0
+      });
+    }
+    return r;
+  }
+}, gt = [dt, pt, ht, bt, nt];
+function yt(t) {
+  for (const e of gt)
+    if (e.detect(t)) return e;
+  return nt;
+}
+const St = 25e3;
+function vt() {
+  return {
+    skipScrolls: 0,
+    skipScrollsDecayTimes: [],
+    scrollResumeTime: 0,
+    scrollPos: 0,
+    nextScrollAllowedTime: 0,
+    wasUserScrolling: !1,
+    doneFirstInstantScroll: !1,
+    queuedScroll: !1
+  };
+}
+function Tt(t) {
+  t.skipScrollsDecayTimes = [], t.doneFirstInstantScroll = !1, t.queuedScroll = !1;
+}
+function X(t) {
+  t.wasUserScrolling = !0, t.scrollResumeTime = Date.now() + St;
+}
+function tt(t) {
+  t.scrollResumeTime = 0;
+}
+function _t(t) {
+  return t.scrollResumeTime > Date.now();
+}
+function wt(t, e) {
+  let a = 0;
+  for (; a < t.skipScrollsDecayTimes.length && !(t.skipScrollsDecayTimes[a] > e); a++)
+    ;
+  t.skipScrollsDecayTimes = t.skipScrollsDecayTimes.slice(a), t.skipScrolls -= a, t.skipScrolls < 1 && (t.skipScrolls = 1);
+}
+const U = "braccato--animating", j = "braccato--pre-animating", W = "braccato--paused", et = "braccato--active", Mt = "braccato--user-scrolling", xt = 0.5, Ct = 0.5, Et = 0.62, At = 0.37, Lt = 150, Y = /* @__PURE__ */ new Map();
+function kt(t) {
+  return t ? t.endsWith("ms") ? Number.parseFloat(t.slice(0, -2)) : t.endsWith("s") ? Number.parseFloat(t.slice(0, -1)) * 1e3 : 0 : 0;
+}
+function q(t, e) {
+  let a = Y.get(e);
+  return a === void 0 && (a = kt(getComputedStyle(t).getPropertyValue(e)), Y.set(e, a)), a;
+}
+function rt(t) {
+  t.offsetHeight;
+}
+function Dt() {
+  return {
+    scroll: vt(),
+    selectedElementIndex: 0,
+    lastTime: 0,
+    lastPlayState: !1,
+    lastEventCreationTime: 0,
+    lastActiveElements: []
+  };
+}
+function It(t) {
+  Tt(t.scroll), t.lastActiveElements = [], Y.clear();
+}
+function Nt(t, e) {
+  const a = Date.now();
+  let { currentTime: r, isPlaying: i, smoothScroll: o } = e;
+  const {
+    eventCreationTime: n,
+    lyricsData: s,
+    scrollContainer: c,
+    scrollPosRatio: d = At,
+    endingThreshold: p = Ct,
+    earlyScrollConsider: f = Et,
+    queueScrollMs: m = Lt
+  } = e;
+  if (r === 0 && !i) return;
+  const h = Math.abs(r - t.lastTime - (n - t.lastEventCreationTime) / 1e3) > xt;
+  t.lastTime = r, t.lastPlayState = i, t.lastEventCreationTime = n;
+  const x = i ? a - n : 0;
+  r += x / 1e3;
+  const { lines: g, container: v, syncType: P } = s;
+  P === "richsync" ? r += q(v, "--braccato-richsync-timing-offset") / 1e3 : r += q(v, "--braccato-timing-offset") / 1e3;
+  const L = r + q(v, "--braccato-scroll-timing-offset") / 1e3, w = c.getBoundingClientRect().height;
+  let u = c.scrollTop;
+  const _ = [], E = [];
+  let A = h;
+  for (let S = 0; S < g.length; S++) {
+    const l = g[S], b = l.time, N = S + 1 < g.length ? g[S + 1].time : Number.POSITIVE_INFINITY;
+    L >= b - f && (L < N || L < b + l.duration) ? (_.push(l), !t.lastActiveElements.includes(l) && L >= b && (A = !0), t.selectedElementIndex = S, l.isScrolled || (l.element.classList.add(et), l.isScrolled = !0)) : l.isScrolled && (l.element.classList.remove(et), l.isScrolled = !1);
+    const M = i ? 2 : 0, T = Math.max(N, b + l.duration + 0.05);
+    if (r + M >= b && r < T) {
+      l.isSelected = !0;
+      const z = r - b, R = (a - l.animationStartTimeMs) / 1e3 - z;
+      if (l.accumulatedOffsetMs = l.accumulatedOffsetMs / 1.08, l.accumulatedOffsetMs += R * 1e3 * 0.4, l.isAnimating && Math.abs(l.accumulatedOffsetMs) > 100 && i && (l.isAnimating = !1), i !== l.isAnimationPlayStatePlaying) {
+        l.isAnimationPlayStatePlaying = i;
+        const Z = [l, ...l.parts];
+        if (i) {
+          for (const O of Z)
+            O.element.classList.remove(W);
+          l.isAnimating = !1;
+        } else
+          for (const O of Z)
+            O.animationStartTimeMs > a ? (O.element.classList.remove(U), O.element.classList.remove(j)) : O.element.classList.add(W);
+      }
+      l.isAnimating || E.push(l);
+    } else if (l.isSelected) {
+      const z = [l, ...l.parts];
+      for (const R of z)
+        R.element.style.setProperty("--braccato-swipe-delay", ""), R.element.style.setProperty("--braccato-anim-delay", ""), R.element.classList.remove(U), R.element.classList.remove(j), R.element.classList.remove(W), R.animationStartTimeMs = Number.POSITIVE_INFINITY;
+      l.isSelected = !1, l.isAnimating = !1;
+    }
+  }
+  if (E.length > 0) {
+    for (const S of E) {
+      const l = [S, ...S.parts];
+      for (const b of l) {
+        const N = r - b.time;
+        b.element.classList.remove(U), b.element.classList.remove(W), b.element.style.setProperty("--braccato-swipe-delay", `${-N - b.duration * 0.1}s`), b.element.style.setProperty("--braccato-anim-delay", `${-N}s`), b.element.classList.add(j);
+      }
+    }
+    rt(E[0].element);
+    for (const S of E) {
+      const l = [S, ...S.parts];
+      for (const b of l) {
+        const N = r - b.time;
+        b.element.classList.add(U), b.animationStartTimeMs = a - N * 1e3;
+      }
+      S.isAnimating = !0, S.lastAnimSetupAt = a, S.isAnimationPlayStatePlaying = !0, S.accumulatedOffsetMs = 0;
+    }
+  }
+  const y = t.scroll;
+  if (y.scrollResumeTime < a || y.scrollPos === -1) {
+    _.length === 0 && _.push(g[0]), t.lastActiveElements = _.filter((T) => L >= T.time);
+    const S = w * d, l = _[_.length - 1], b = _.filter((T, z) => L < T.time + T.duration - p || z === _.length - 1).map((T) => T.position + T.height / 2);
+    let M = b.reduce((T, z) => T + z, 0) / b.length - S;
+    if (M = Math.min(M, _[0].position), M = Math.max(M, l.position - w + l.height), M = Math.min(M, l.position), M = Math.max(0, M), u === 0 && !y.doneFirstInstantScroll && (o = !1, y.doneFirstInstantScroll = !0, y.nextScrollAllowedTime = 0), y.wasUserScrolling || A || y.queuedScroll)
+      if (a > y.nextScrollAllowedTime) {
+        if (y.queuedScroll = !1, o && Math.abs(u - M) > 2) {
+          v.style.transitionTimingFunction = "", v.style.transitionProperty = "", v.style.transitionDuration = "";
+          const T = q(v, "transition-duration");
+          v.style.transition = "none", v.style.transform = `translate(0px, ${-(u - M)}px)`, rt(v), v.style.transition = "", v.style.transform = "translate(0px, 0px)", y.nextScrollAllowedTime = T + a + 20;
+        }
+        u = M, y.scrollPos = u, c.scrollTop = u, y.skipScrolls += 1, y.skipScrollsDecayTimes.push(a + 2e3);
+      } else (y.nextScrollAllowedTime - a < m || h) && (y.queuedScroll = !0);
+  }
+  y.wasUserScrolling && y.scrollResumeTime < a && (v.classList.remove(Mt), y.wasUserScrolling = !1), wt(y, a);
+}
+const Rt = /[\p{Script=Arabic}\p{Script=Hebrew}\p{Script=Syriac}\p{Script=Thaana}]/u;
+function Pt(t) {
+  return Rt.test(t);
+}
+const zt = "braccato--line", Ot = "braccato--word", Ft = "braccato--break", B = "braccato-background-lyric", at = "braccato-rtl", Ut = "braccato-zero-dur-animate", Wt = "braccato--romanized", qt = "braccato--translated";
+function H(t, e) {
+  const a = document.createElement("span");
+  a.classList.add(Ft), a.style.order = String(e), t.appendChild(a);
+}
+function Bt(t, e) {
+  const a = /([\s\u200B\u00AD\p{Dash_Punctuation}])/gu;
+  let r = [], i = !1;
+  const o = () => {
+    if (r.length > 0) {
+      const n = document.createElement("span");
+      for (const s of r) n.appendChild(s);
+      i && n.classList.add(B), t.appendChild(n), r = [];
+    }
+  };
+  for (const n of e) {
+    const s = i !== n.classList.contains(B), c = !(n.textContent.length === 1 && n.textContent[0] === " ");
+    s || r.push(n), (n.textContent.length > 0 && a.test(n.textContent[n.textContent.length - 1]) || s) && o(), s && c && (r.push(n), i = n.classList.contains(B));
+  }
+  o();
+}
+function it(t, e, a, r) {
+  let i = [], o = !0;
+  const n = [];
+  for (const s of t) {
+    const c = Pt(s.words);
+    !c && s.words.trim().length > 0 && (o = !1, i.reverse().forEach((f) => n.push(f)), i = []);
+    const d = document.createElement("span");
+    d.classList.add(Ot), s.durationMs === 0 && d.classList.add(Ut), c && d.classList.add(at);
+    const p = {
+      time: s.startTimeMs / 1e3,
+      duration: s.durationMs / 1e3,
+      element: d,
+      animationStartTimeMs: Number.POSITIVE_INFINITY
+    };
+    d.textContent = s.words, d.dataset.time = String(p.time), d.dataset.duration = String(p.duration), d.dataset.content = s.words, d.style.setProperty("--braccato-duration", `${s.durationMs}ms`), s.durationMs > r && (d.dataset.longWord = "true"), s.isBackground && d.classList.add(B), s.words.trim().length === 0 && (d.style.display = "inline"), s.words.trim().length !== 0 && e.parts.push(p), c ? i.push(d) : n.push(d);
+  }
+  if (o && i.length > 0) {
+    a.classList.add(at);
+    for (const s of i) n.push(s);
+  } else i.length > 0 && i.reverse().forEach((s) => n.push(s));
+  Bt(a, n);
+}
+function $t(t, e, a = {}) {
+  const { longWordThreshold: r = 1500, lineSyncedAnimationDelay: i = 50, disableRichsync: o = !1 } = a;
+  e.replaceChildren();
+  let s = t.every((p) => p.startTimeMs === 0) ? "none" : "synced";
+  const c = [];
+  for (let p = 0; p < t.length; p++) {
+    const f = t[p], m = document.createElement("div");
+    m.classList.add(zt);
+    const h = {
+      element: m,
+      time: f.startTimeMs / 1e3,
+      duration: f.durationMs / 1e3,
+      parts: [],
+      isScrolled: !1,
+      animationStartTimeMs: Number.POSITIVE_INFINITY,
+      isAnimationPlayStatePlaying: !1,
+      accumulatedOffsetMs: 0,
+      isAnimating: !1,
+      lastAnimSetupAt: 0,
+      isSelected: !1,
+      height: -1,
+      position: -1
+    };
+    if (f.isInstrumental) {
+      m.dataset.instrumental = "true", m.dataset.time = String(h.time), m.dataset.duration = String(h.duration), m.dataset.lineNumber = String(p), c.push(h), e.appendChild(m);
+      continue;
+    }
+    let x = f.parts ?? [];
+    if ((x.length === 0 || o) && (x = f.words.split(" ").map((g, v) => ({
+      startTimeMs: f.startTimeMs + v * i,
+      words: g.trim().length < 1 ? g : `${g} `,
+      durationMs: 0
+    }))), x.every((g) => g.durationMs === 0) || (s = "richsync"), it(x, h, m, r), H(m, 1), m.dataset.time = String(h.time), m.dataset.duration = String(h.duration), m.dataset.lineNumber = String(p), m.style.setProperty("--braccato-duration", `${f.durationMs}ms`), f.agent && (m.dataset.agent = f.agent), f.romanization) {
+      H(m, 4);
+      const g = document.createElement("div");
+      g.classList.add(Wt), g.style.order = "5", f.timedRomanization && f.timedRomanization.length > 0 && !o ? it(f.timedRomanization, h, g, r) : g.textContent = `
+${f.romanization}`, m.appendChild(g);
+    }
+    if (f.translation) {
+      H(m, 6);
+      const g = document.createElement("div");
+      g.classList.add(qt), g.style.order = "7", g.textContent = `
+${f.translation.text}`, m.appendChild(g);
+    }
+    c.push(h), e.appendChild(m);
+  }
+  e.dataset.sync = s;
+  const d = document.createElement("div");
+  return d.className = "braccato--spacer", d.style.height = "100px", e.appendChild(d), {
+    lines: c,
+    syncType: s,
+    width: e.clientWidth,
+    height: e.clientHeight,
+    container: e
+  };
+}
+const jt = ":host{display:block;overflow-y:auto;position:relative;container-type:size;scrollbar-width:none}:host::-webkit-scrollbar{display:none}:host(:has(.braccato--user-scrolling)){scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar{display:block;width:6px}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar-track{background:transparent}.braccato-container{font-family:var(--braccato-font-family);font-size:var(--braccato-font-size);font-weight:var(--braccato-font-weight);isolation:isolate;line-height:var(--braccato-line-height);position:relative;z-index:1;transition:transform var(--braccato-scroll-duration) var(--braccato-scroll-timing-function) 0s;padding-top:2rem;padding-bottom:0}.braccato-container>div{cursor:pointer;padding:var(--braccato-padding) 0;transform-origin:left center;word-break:break-word;transition:filter calc(var(--braccato-duration) / 3) .4s,opacity calc(var(--braccato-duration) / 2) .166s,transform .166s var(--braccato-anim-delay, 0s)}.braccato-container:has(.braccato--active):not(.braccato--user-scrolling)>div:not(.braccato--active):not(.braccato--active~div){opacity:.33;filter:blur(2.5px)}.braccato-container>div.braccato--active{opacity:1;filter:blur(0px)}.braccato-container>div.braccato--active~div{opacity:.66;filter:blur(0px)}.braccato-container>.braccato--animating{opacity:1!important;filter:blur(0px)!important}.braccato-container>div:hover{opacity:1!important;filter:blur(0px)!important;transform:scale(var(--braccato-hover-scale, 1.01));transition:all .3s ease}.braccato--active{cursor:default}:not(.braccato-background-lyric){order:0}.braccato-background-lyric{order:2}.braccato--line>span>span.braccato-background-lyric{font-size:.75em;font-weight:500}.braccato--line{transform:scale(var(--braccato-scale));transition-property:transform;transition-duration:var(--braccato-scale-transition-duration);transition-timing-function:ease;display:flex;flex-flow:row wrap;align-items:start;align-content:flex-start;padding-left:.25em;padding-right:.25em;box-sizing:border-box}.braccato--line.braccato--animating{transform:scale(var(--braccato-active-scale));transition-delay:var(--braccato-anim-delay)}.braccato--line>span{color:var(--braccato-inactive-color);display:inline-block;white-space:pre-wrap}.braccato--word{white-space:pre;display:inline-block;transform:translateY(0);position:relative}.braccato--line.braccato--pre-animating,.braccato--line.braccato--pre-animating .braccato--word{will-change:transform}.braccato--break{flex-basis:100%;height:0}.braccato--word.braccato--animating{animation:braccato-wobble var(--braccato-wobble-duration) forwards ease;animation-delay:var(--braccato-anim-delay);animation-play-state:running}.braccato--word.braccato--animating.braccato--paused{animation-play-state:paused}.braccato--word:after{position:absolute;content:attr(data-content);top:-2rem;left:-2rem;white-space:pre-wrap;padding:2rem;pointer-events:none;color:transparent;box-sizing:content-box;width:100%;background-image:linear-gradient(90deg,var(--braccato-active-color) calc(100% * var(--lyric-transition-amount-start) - 4rem * var(--lyric-transition-amount-start) + 2rem),#00000000 calc(100% * var(--lyric-transition-amount-end) - 4rem * var(--lyric-transition-amount-end) + 2rem + 1px));opacity:0;--lyric-transition-amount-start: -.2;--lyric-transition-amount-end: -.1;--braccato-glow-color: color(display-p3 1 1 1 / .0001);transition:--lyric-transition-amount-start 1s linear 1000s,--lyric-transition-amount-end 1s linear 1000s,opacity .5s ease;-webkit-background-clip:text;background-clip:text}.braccato--word[data-long-word]:after{--braccato-glow-color: color(display-p3 1 1 1 / 1)}.braccato--word.braccato--pre-animating:not(.braccato--animating):after{transition:none;--lyric-transition-amount-start: -.2;--lyric-transition-amount-end: -.1;opacity:0}.braccato--word.braccato--pre-animating:not(.braccato--animating):not(.braccato-zero-dur-animate):after{opacity:1}.braccato--word.braccato--animating:after{opacity:1;animation:braccato-glow max(calc(var(--braccato-duration) * 1.2),1.2s) forwards ease;animation-delay:var(--braccato-anim-delay);animation-play-state:running;--lyric-transition-amount-start: 1.4;--lyric-transition-amount-end: 1.5;transition-property:--lyric-transition-amount-start,--lyric-transition-amount-end,opacity;transition-duration:calc(var(--braccato-duration) * 1.6),calc(var(--braccato-duration) * 1.6),var(--braccato-highlight-fade-in-duration);transition-timing-function:linear,linear,ease;transition-delay:var(--braccato-swipe-delay),var(--braccato-swipe-delay),var(--braccato-anim-delay)}.braccato--word.braccato--animating.braccato--paused:after{transition-duration:100000000s,100000000s,100000000s;--lyric-transition-amount-start: 10;--lyric-transition-amount-end: 10;opacity:.5;animation-play-state:paused}.braccato--translated,.braccato--romanized{display:block;font-size:var(--braccato-translated-font-size);font-weight:var(--braccato-translated-font-weight);font-family:var(--braccato-translated-font-family);color:var(--braccato-translated-color);white-space:normal;line-height:1.1;margin-top:8px}.braccato--romanized>span{color:var(--braccato-inactive-color);display:inline-block;white-space:pre-wrap}.braccato--romanized{width:fit-content;font-size:calc(var(--braccato-translated-font-size) / 1.25);background:#ffffff0d;padding:.375rem .75rem;border:1px solid rgba(255,255,255,.1);border-radius:1rem}.braccato-rtl{direction:rtl}.braccato-rtl.braccato--word:after{background-image:linear-gradient(270deg,var(--braccato-active-color) calc(100% * var(--lyric-transition-amount-start) - 4rem * var(--lyric-transition-amount-start) + 2rem),#00000000 calc(100% * var(--lyric-transition-amount-end) - 4rem * var(--lyric-transition-amount-end) + 2rem + 1px))}.braccato--line[data-agent=v2],.braccato--line[data-agent=v3]{justify-content:flex-end;text-align:right;transform-origin:right center!important}.braccato--line[data-agent=v1000]{justify-content:center;text-align:center;transform-origin:center center!important}.braccato--spacer{padding:0;margin:0}.braccato-autoscroll-btn{font-family:var(--braccato-font-family);position:absolute;display:block;font-size:1.75rem;font-weight:600;white-space:normal;line-height:1.1;width:fit-content;background:#ffffff0d;padding:.5rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:1rem;color:#fff;left:50%;transform:translate(-50%,2em);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:100;transition:opacity .15s linear .05s,transform .2s cubic-bezier(.5,1,.89,1)}.braccato-autoscroll-btn[hidden]{transition:opacity .1s linear,transform .15s ease-in;opacity:0;pointer-events:none;transform:translate(-50%,-3em)}@keyframes braccato-wobble{0%{transform:translateY(0)}to{transform:translateY(-.0375em)}}@keyframes braccato-glow{0%{filter:drop-shadow(0 0 .8rem var(--braccato-glow-color))}to{filter:drop-shadow(0 0 0rem var(--braccato-glow-color))}}", Ht = ':host{--braccato-text-color: color(display-p3 1 1 1 / 1);--braccato-glow-color: color(display-p3 1 1 1 / .5);--braccato-active-color: var(--braccato-text-color);--braccato-inactive-color: color( from var(--braccato-text-color) display-p3 r g b / var(--braccato-inactive-opacity, .3) );--braccato-active-opacity: 1;--braccato-inactive-opacity: .3;--braccato-richsync-timing-offset: .15s;--braccato-timing-offset: .115s;--braccato-scroll-timing-offset: .5s;--braccato-font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--braccato-font-size: 3rem;--braccato-font-weight: 600;--braccato-line-height: 1.333;--braccato-translated-font-size: 2rem;--braccato-translated-font-weight: 600;--braccato-translated-font-family: var(--braccato-font-family);--braccato-translated-color: color(display-p3 1 1 1 / var(--braccato-translated-opacity, .6));--braccato-scale-transition-duration: .166s;--braccato-highlight-fade-in-duration: .33s;--braccato-highlight-fade-out-duration: .5s;--braccato-wobble-duration: 1s;--braccato-padding: 1.25rem;--braccato-scale: .95;--braccato-active-scale: 1;--braccato-scroll-duration: .75s;--braccato-scroll-timing-function: cubic-bezier(.86, 0, .07, 1)}';
+var Gt = Object.defineProperty, I = (t, e, a, r) => {
+  for (var i = void 0, o = t.length - 1, n; o >= 0; o--)
+    (n = t[o]) && (i = n(e, a, i) || i);
+  return i && Gt(e, a, i), i;
+};
+function Yt() {
+  if (!(typeof CSS > "u" || !CSS.registerProperty))
+    try {
+      CSS.registerProperty({
+        name: "--lyric-transition-amount-start",
+        syntax: "<number>",
+        inherits: !1,
+        initialValue: "0"
+      }), CSS.registerProperty({
+        name: "--lyric-transition-amount-end",
+        syntax: "<number>",
+        inherits: !1,
+        initialValue: "0"
+      });
+    } catch {
+    }
+}
+Yt();
+const V = class V extends st {
+  constructor() {
+    super(...arguments), this.lyrics = [], this.currentTime = 0, this.playing = !1, this.scrollMode = "internal", this.scrollContainer = null, this.dir = "auto", this.longWordThreshold = 1500, this.lineSyncedDelay = 50, this.disableRichsync = !1, this.debug = !1, this.source = null, this.src = null, this._lyricsData = null, this._animState = Dt(), this._rafId = null, this._lastLyrics = [], this._resizeObserver = null, this._mediaElement = null, this._lastSrc = null, this._srcAbortController = null, this._tickCount = 0, this._onScroll = () => {
+      const e = this._animState.scroll;
+      if (e.skipScrolls > 0) {
+        e.skipScrolls--;
+        return;
+      }
+      _t(e) ? X(e) : (X(e), this.dispatchEvent(
+        new CustomEvent("braccato:scroll-state", {
+          detail: { userScrolling: !0 },
+          bubbles: !0,
+          composed: !0
+        })
+      ));
+    };
+  }
+  // -- Lifecycle --------------------------
+  connectedCallback() {
+    super.connectedCallback(), this._startLoop();
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), this._stopLoop(), (e = this._resizeObserver) == null || e.disconnect();
+  }
+  updated(e) {
+    e.has("lyrics") && this.lyrics !== this._lastLyrics && (this._lastLyrics = this.lyrics, this._injectLyrics()), e.has("source") && this._resolveMediaElement(), e.has("src") && this.src !== this._lastSrc && (this._lastSrc = this.src, this._fetchLyricsFromSrc());
+  }
+  render() {
+    return ot`<div class="braccato-container" part="container"></div>`;
+  }
+  // -- Lyric Injection --------------------------
+  _log(...e) {
+    this.debug && console.log("[braccato]", ...e);
+  }
+  _injectLyrics() {
+    var i, o, n, s;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".braccato-container");
+    if (!e) {
+      this._log("_injectLyrics: no container found in shadowRoot");
+      return;
+    }
+    if (It(this._animState), !this.lyrics || this.lyrics.length === 0) {
+      this._log("_injectLyrics: no lyrics, clearing"), e.replaceChildren(), this._lyricsData = null;
+      return;
+    }
+    const a = {
+      longWordThreshold: this.longWordThreshold,
+      lineSyncedAnimationDelay: this.lineSyncedDelay,
+      disableRichsync: this.disableRichsync
+    };
+    this._lyricsData = $t(this.lyrics, e, a), this._log("_injectLyrics: rendered", {
+      lineCount: this._lyricsData.lines.length,
+      syncType: this._lyricsData.syncType,
+      firstLineTime: (o = this._lyricsData.lines[0]) == null ? void 0 : o.time,
+      lastLineTime: (n = this._lyricsData.lines[this._lyricsData.lines.length - 1]) == null ? void 0 : n.time,
+      containerSize: { w: e.clientWidth, h: e.clientHeight }
+    });
+    for (let c = 0; c < this._lyricsData.lines.length; c++)
+      this._lyricsData.lines[c].element.addEventListener("click", (p) => this._handleLineClick(p, c));
+    const r = this._getScrollContainer();
+    this._log("_injectLyrics: scrollContainer", r.tagName, r.className), r.addEventListener("scroll", this._onScroll, { passive: !0 }), (s = this._resizeObserver) == null || s.disconnect(), this._resizeObserver = new ResizeObserver(() => this._recalculatePositions()), this._resizeObserver.observe(e), this._recalculatePositions(), this.dispatchEvent(
+      new CustomEvent("braccato:lyrics-loaded", {
+        detail: { syncType: this._lyricsData.syncType, lineCount: this._lyricsData.lines.length },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // -- Position Calculation --------------------------
+  _recalculatePositions() {
+    if (!this._lyricsData) return;
+    const e = this._lyricsData.container;
+    this._lyricsData.width = e.clientWidth, this._lyricsData.height = e.clientHeight;
+    for (const a of this._lyricsData.lines) {
+      const r = a.element.getBoundingClientRect(), i = e.getBoundingClientRect();
+      a.position = r.top - i.top + e.scrollTop, a.height = r.height;
+    }
+    this._animState.scroll.wasUserScrolling = !0;
+  }
+  // -- Animation Loop --------------------------
+  _startLoop() {
+    const e = () => {
+      this._tick(), this._rafId = requestAnimationFrame(e);
+    };
+    this._rafId = requestAnimationFrame(e);
+  }
+  _stopLoop() {
+    this._rafId !== null && (cancelAnimationFrame(this._rafId), this._rafId = null);
+  }
+  _tick() {
+    if (!this._lyricsData || this._lyricsData.syncType === "none") return;
+    if (this._tickCount++, this.debug && this._tickCount % 60 === 0) {
+      const i = this._lyricsData.lines.filter((n) => n.isScrolled), o = this._lyricsData.lines.filter((n) => n.isAnimating);
+      this._log("tick", {
+        currentTime: this.currentTime,
+        currentTimeSec: this.currentTime / 1e3,
+        playing: this.playing,
+        syncType: this._lyricsData.syncType,
+        activeLineCount: i.length,
+        animatingLineCount: o.length,
+        selectedIndex: this._animState.selectedElementIndex,
+        scrollResumeTime: this._animState.scroll.scrollResumeTime,
+        isUserScrolling: this._animState.scroll.wasUserScrolling
+      });
+    }
+    const e = this._mediaElement, a = e ? e.currentTime * 1e3 : this.currentTime, r = e ? !e.paused : this.playing;
+    Nt(this._animState, {
+      currentTime: a / 1e3,
+      eventCreationTime: Date.now(),
+      isPlaying: r,
+      smoothScroll: !0,
+      lyricsData: this._lyricsData,
+      scrollContainer: this._getScrollContainer()
+    });
+  }
+  // -- Scroll --------------------------
+  _getScrollContainer() {
+    return this.scrollMode === "external" && this.scrollContainer ? this.scrollContainer : this;
+  }
+  // -- Events --------------------------
+  _handleLineClick(e, a) {
+    var o, n;
+    const r = (o = this._lyricsData) == null ? void 0 : o.lines[a];
+    if (!r) return;
+    const i = r.time * 1e3;
+    if (this._log("lineClick", { lineIndex: a, time: i, lineTimeSec: r.time, currentTime: this.currentTime }), e.altKey && ((n = this._lyricsData) == null ? void 0 : n.syncType) === "richsync") {
+      const s = e.target.closest(".braccato--word");
+      if (s) {
+        const c = Number.parseFloat(s.dataset.time || "0") * 1e3, d = r.parts.findIndex((p) => p.element === s);
+        this.dispatchEvent(
+          new CustomEvent("braccato:word-click", {
+            detail: { time: c, lineIndex: a, wordIndex: d },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+        return;
+      }
+    }
+    this._mediaElement && (this._mediaElement.currentTime = i / 1e3, this._mediaElement.paused && this._mediaElement.play()), this.dispatchEvent(
+      new CustomEvent("braccato:line-click", {
+        detail: { time: i, lineIndex: a },
+        bubbles: !0,
+        composed: !0
+      })
+    ), tt(this._animState.scroll);
+  }
+  // -- Source Binding --------------------------
+  _resolveMediaElement() {
+    if (!this.source) {
+      this._mediaElement = null;
+      return;
+    }
+    const e = document.querySelector(this.source);
+    e instanceof HTMLMediaElement ? this._mediaElement = e : (this._mediaElement = null, this._log("source: no media element found for selector", this.source));
+  }
+  async _fetchLyricsFromSrc() {
+    var a;
+    if ((a = this._srcAbortController) == null || a.abort(), !this.src) {
+      this.lyrics = [];
+      return;
+    }
+    const e = new AbortController();
+    this._srcAbortController = e;
+    try {
+      const r = await fetch(this.src, { signal: e.signal });
+      if (!r.ok) {
+        this._emitError(new Error(`Failed to fetch lyrics: ${r.status} ${r.statusText}`));
+        return;
+      }
+      const i = await r.text();
+      if (e.signal.aborted) return;
+      const o = this._mediaElement ? this._mediaElement.duration * 1e3 : 3e5, n = yt(i);
+      this.lyrics = n.parse(i, o);
+    } catch (r) {
+      if (r instanceof DOMException && r.name === "AbortError") return;
+      this._emitError(r instanceof Error ? r : new Error(String(r)));
+    }
+  }
+  _emitError(e) {
+    this._log("error", e.message), this.dispatchEvent(
+      new CustomEvent("braccato:error", {
+        detail: { error: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // -- Public Methods --------------------------
+  resumeAutoscroll() {
+    tt(this._animState.scroll);
+  }
+  recalculatePositions() {
+    this._recalculatePositions();
+  }
+};
+V.styles = [J(Ht), J(jt)];
+let C = V;
+I([
+  D({ type: Array })
+], C.prototype, "lyrics");
+I([
+  D({ attribute: "current-time", type: Number })
+], C.prototype, "currentTime");
+I([
+  D({ type: Boolean, reflect: !0 })
+], C.prototype, "playing");
+I([
+  D({ attribute: "scroll-mode", type: String, reflect: !0 })
+], C.prototype, "scrollMode");
+I([
+  D({ attribute: !1 })
+], C.prototype, "scrollContainer");
+I([
+  D({ type: String, reflect: !0 })
+], C.prototype, "dir");
+I([
+  D({ attribute: "long-word-threshold", type: Number })
+], C.prototype, "longWordThreshold");
+I([
+  D({ attribute: "line-synced-delay", type: Number })
+], C.prototype, "lineSyncedDelay");
+I([
+  D({ attribute: "disable-richsync", type: Boolean })
+], C.prototype, "disableRichsync");
+I([
+  D({ type: Boolean })
+], C.prototype, "debug");
+I([
+  D({ type: String, reflect: !0 })
+], C.prototype, "source");
+I([
+  D({ type: String, reflect: !0 })
+], C.prototype, "src");
+customElements.define("braccato-lyrics", C);
+export {
+  C as BraccatoElement
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@braccato/core",
+  "version": "0.1.0",
+  "description": "Synchronized lyrics web component with word-by-word animations",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/better-lyrics/braccato",
+    "directory": "packages/core"
+  },
+  "homepage": "https://github.com/better-lyrics/braccato",
+  "keywords": [
+    "lyrics",
+    "sync",
+    "web-component",
+    "lit",
+    "music",
+    "karaoke",
+    "ttml"
+  ],
+  "sideEffects": true,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "lit": "^3.2.1",
+    "@braccato/parsers": "^0.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "vite-plugin-dts": "^4.3.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}