@ugfoundation/swaralipi-js 0.1.0

package/dist/viewer/index.js

@@ -0,0 +1,814 @@
+// src/viewer/glyphs.ts
+var LETTERS = {
+  bn: {
+    s: { shuddha: "\u09B8" },
+    r: { shuddha: "\u09B0", komal: "\u098B" },
+    g: { shuddha: "\u0997", komal: "\u099C\u09CD\u099E" },
+    m: { shuddha: "\u09AE", tivra: "\u0995\u09CD\u09B7" },
+    p: { shuddha: "\u09AA" },
+    d: { shuddha: "\u09A7", komal: "\u09A6" },
+    n: { shuddha: "\u09A8", komal: "\u09A3" }
+  },
+  hi: {
+    s: { shuddha: "\u0938" },
+    r: { shuddha: "\u0930", komal: "\u090B" },
+    g: { shuddha: "\u0917", komal: "\u091C\u094D\u091E" },
+    m: { shuddha: "\u092E", tivra: "\u0915\u094D\u0937" },
+    p: { shuddha: "\u092A" },
+    d: { shuddha: "\u0927", komal: "\u0926" },
+    n: { shuddha: "\u0928", komal: "\u0923" }
+  },
+  en: {
+    s: { shuddha: "S" },
+    r: { shuddha: "R" },
+    g: { shuddha: "G" },
+    m: { shuddha: "M" },
+    p: { shuddha: "P" },
+    d: { shuddha: "D" },
+    n: { shuddha: "N" }
+  }
+};
+var DIGITS = {
+  bn: "\u09E6\u09E7\u09E8\u09E9\u09EA\u09EB\u09EC\u09ED\u09EE\u09EF",
+  hi: "\u0966\u0967\u0968\u0969\u096A\u096B\u096C\u096D\u096E\u096F",
+  en: "0123456789"
+};
+var VOWEL_LETTER_GLYPHS = /* @__PURE__ */ new Set(["\u098B", "\u090B"]);
+var MARKS = {
+  bn: { matra: "\u09BE", hyphen: "-", melisma: "\u09F9", cut: "\u0983", reph: "\u09B0\u09CD" },
+  hi: { matra: "\u093E", hyphen: "-", melisma: "\u0970", cut: "\u0903", reph: "\u0930\u094D" },
+  en: { matra: "", hyphen: "-", melisma: "\xB7", cut: ":", reph: "" }
+};
+var LABELS = {
+  bn: { title: "\u09A8\u09BE\u09AE", taal: "\u09A4\u09BE\u09B2", raag: "\u09B0\u09BE\u0997", avartan: "\u0986\u09AC\u09B0\u09CD\u09A4\u09A8", notationBy: "\u09B8\u09CD\u09AC\u09B0\u09B2\u09BF\u09AA\u09BF" },
+  hi: { title: "\u0928\u093E\u092E", taal: "\u0924\u093E\u0932", raag: "\u0930\u093E\u0917", avartan: "\u0906\u0935\u0930\u094D\u0924\u0928", notationBy: "\u0938\u094D\u0935\u0930\u0932\u093F\u092A\u093F" },
+  en: { title: "Song", taal: "Taal", raag: "Raag", avartan: "Avartan", notationBy: "Notation" }
+};
+function composeCluster(letter, opts) {
+  const forms = LETTERS[opts.lang][letter];
+  const marks = MARKS[opts.lang];
+  const classes = [];
+  let base = forms.shuddha;
+  if (opts.komal) {
+    if (forms.komal !== void 0) base = forms.komal;
+    else classes.push("sw-komal");
+  }
+  if (opts.tivra) {
+    if (forms.tivra !== void 0) base = forms.tivra;
+    else classes.push("sw-tivra");
+  }
+  const isVowelLetter = VOWEL_LETTER_GLYPHS.has(base);
+  let text = base;
+  switch (opts.octave) {
+    case "taar":
+    case "ati-taar":
+      if (marks.reph === "") classes.push("sw-dot-above");
+      else if (isVowelLetter) classes.push("sw-reph-css");
+      else text = marks.reph + text;
+      if (opts.octave === "ati-taar") classes.push("sw-ati-taar");
+      break;
+    case "mandra":
+    case "ati-mandra":
+      classes.push(marks.reph === "" ? "sw-dot-below" : "sw-mandra");
+      if (opts.octave === "ati-mandra") classes.push("sw-ati-mandra");
+      break;
+  }
+  let matraSeparate = false;
+  if (opts.withMatra && marks.matra !== "") {
+    if (isVowelLetter) matraSeparate = true;
+    else text += marks.matra;
+  }
+  return { text, classes, matraSeparate };
+}
+function localizeDigits(s, lang) {
+  const digits = DIGITS[lang];
+  return s.replace(/[0-9]/g, (d) => digits[d.charCodeAt(0) - 48]);
+}
+
+// src/viewer/render.ts
+var NBSP = "\xA0";
+var EPS = 1e-6;
+var isIntegral = (x) => Math.abs(x - Math.round(x)) < EPS;
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var isPitched = (n) => n.svara !== void 0 || n.rest === true || n.sustain === true;
+function rawDisplay(note) {
+  if (note.raw === void 0) return void 0;
+  if ((note.brackets?.length ?? 0) > 0 && /^[{}()[\]]*$/.test(note.raw)) return void 0;
+  return note.raw;
+}
+function groupRowIntoCells(notes) {
+  const cells = [];
+  let cur;
+  let acc = 0;
+  const close = () => {
+    if (cur) {
+      cells.push(cur);
+      cur = void 0;
+    }
+    acc = 0;
+  };
+  notes.forEach((note, i) => {
+    if (note.bar !== void 0) {
+      close();
+      cells.push({ kind: "bar", start: i, notes: [note] });
+      return;
+    }
+    if (!isPitched(note)) {
+      close();
+      cells.push({ kind: rawDisplay(note) !== void 0 ? "raw" : "carrier", start: i, notes: [note] });
+      return;
+    }
+    const d = note.durationMatra ?? 1;
+    if (isIntegral(d)) {
+      close();
+      cells.push({ kind: "group", start: i, notes: [note] });
+      return;
+    }
+    cur ??= { kind: "group", start: i, notes: [] };
+    cur.notes.push(note);
+    acc += d;
+    if (acc > EPS && isIntegral(acc)) close();
+  });
+  close();
+  return cells;
+}
+var ARC_RAW_RE = /^[wWxXyYjJeEzZ$=_<>`\\]+$/;
+var isArcRaw = (raw) => raw !== void 0 && ARC_RAW_RE.test(raw);
+function resolveArcs(cells, noteCount) {
+  const arcs = [];
+  let openStart;
+  let sawEnds = false;
+  const fillCols = [];
+  const openAt = (col) => {
+    sawEnds = true;
+    if (openStart === void 0) openStart = col;
+  };
+  const closeAt = (col) => {
+    sawEnds = true;
+    if (openStart !== void 0) {
+      arcs.push({ startCol: openStart, endCol: col, openLeft: false, openRight: false });
+      openStart = void 0;
+    } else {
+      arcs.push({ startCol: 1, endCol: col, openLeft: true, openRight: false });
+    }
+  };
+  for (const cell of cells) {
+    const firstCol = cell.start + 1;
+    const lastCol = cell.start + cell.notes.length;
+    cell.notes.forEach((note, j) => {
+      const col = cell.start + j + 1;
+      if (note.meend === "start") openAt(col);
+      else if (note.meend === "end") closeAt(col);
+      for (const b of note.below ?? []) {
+        if (!isArcRaw(b.raw)) continue;
+        for (const ch of b.raw) {
+          if (ch === "w" || ch === "W") openAt(firstCol);
+          else if (ch === "x" || ch === "X") closeAt(lastCol);
+          else fillCols.push(firstCol, lastCol);
+        }
+      }
+    });
+  }
+  if (openStart !== void 0) {
+    arcs.push({ startCol: openStart, endCol: Math.max(noteCount, 1), openLeft: false, openRight: true });
+  } else if (!sawEnds && fillCols.length > 0) {
+    arcs.push({
+      startCol: Math.min(...fillCols),
+      endCol: Math.max(...fillCols),
+      openLeft: true,
+      openRight: true,
+      line: true
+    });
+  }
+  return arcs;
+}
+function cutMarkCount(raw) {
+  if (raw === void 0) return 0;
+  return (raw.match(/[i:]/g) ?? []).length;
+}
+function parseBeatLabel(raw) {
+  const m = raw.match(/^([0-9]{1,2})([fF])?:?$/);
+  if (!m) return void 0;
+  return { digits: m[1], sam: m[2] !== void 0 };
+}
+var BRACKET_GLYPHS = {
+  open: { repeat: "{", skip: "(", alt: "[" },
+  close: { repeat: "}", skip: ")", alt: "]" }
+};
+function bracketGlyphs(note, edge) {
+  if (!note.brackets) return "";
+  return note.brackets.filter((b) => b.edge === edge).map((b) => `<span class="sw-br">${BRACKET_GLYPHS[edge][b.kind]}</span>`).join("");
+}
+function isoMatra(ctx) {
+  return ctx.marks.matra === "" ? "" : `<span class="sw-iso">${NBSP}${ctx.marks.matra}</span>`;
+}
+function restGlyph(ctx) {
+  return ctx.marks.matra === "" ? '<span class="sw-iso">\u2013</span>' : isoMatra(ctx);
+}
+function renderKan(note, ctx) {
+  if (!note.kan) return "";
+  const [octave, letter] = note.kan;
+  const c = composeCluster(letter, { octave, withMatra: false, lang: ctx.lang });
+  return `<span class="${["sw-kan", ...c.classes].join(" ")}">${c.text}</span>`;
+}
+function renderPitchedInner(note, opts, ctx) {
+  let inner = bracketGlyphs(note, "open");
+  inner += renderKan(note, ctx);
+  if (note.sustain === true) inner += `<span class="sw-hy">${ctx.marks.hyphen}</span>`;
+  if (note.svara !== void 0) {
+    const [octave, letter] = note.svara;
+    const c = composeCluster(letter, {
+      komal: note.komal,
+      tivra: note.tivra,
+      octave,
+      withMatra: opts.withMatra,
+      lang: ctx.lang
+    });
+    inner += `<span class="${["sw-cl", ...c.classes].join(" ")}">${c.text}</span>`;
+    if (c.matraSeparate) inner += isoMatra(ctx);
+  } else if (note.rest === true) {
+    inner += restGlyph(ctx);
+  } else if (note.sustain === true && opts.withMatra) {
+    inner += isoMatra(ctx);
+  }
+  if (note.microtone !== void 0) {
+    const mark = note.microtone === "atikomal" ? "\u21CA" : "\u2193";
+    inner += `<span class="sw-micro" title="${note.microtone}">${mark}</span>`;
+  }
+  const d = note.durationMatra ?? 1;
+  if (isIntegral(d) && d > 1 + EPS) inner += isoMatra(ctx).repeat(Math.round(d) - 1);
+  if (opts.cuts > 0) inner += `<span class="sw-cut">${NBSP}${ctx.marks.cut}</span>`.repeat(opts.cuts);
+  inner += bracketGlyphs(note, "close");
+  return inner;
+}
+var BAR_STROKES = { dari: 1, single: 1, double: 2, quad: 4 };
+function renderBarInner(note) {
+  const strokes = "<i></i>".repeat(BAR_STROKES[note.bar]);
+  return `${bracketGlyphs(note, "open")}${strokes}${bracketGlyphs(note, "close")}`;
+}
+function renderAnnotation(notes, ctx) {
+  const parts = [];
+  for (const cell of groupRowIntoCells(notes)) {
+    if (cell.kind === "bar") {
+      const note2 = cell.notes[0];
+      parts.push(`<span class="sw-bar sw-bar--${note2.bar}">${renderBarInner(note2)}</span>`);
+      continue;
+    }
+    if (cell.kind === "group") {
+      const cuts = cutMarkCount(cell.notes[0].raw);
+      cell.notes.forEach((note2, j) => {
+        const last = j === cell.notes.length - 1;
+        parts.push(
+          `<span class="sw-n">${renderPitchedInner(note2, { withMatra: last, cuts: last ? cuts : 0 }, ctx)}</span>`
+        );
+      });
+      continue;
+    }
+    const note = cell.notes[0];
+    const raw = rawDisplay(note);
+    if (raw !== void 0) {
+      const beat = parseBeatLabel(raw);
+      if (beat) {
+        parts.push(
+          `<span class="sw-beat${beat.sam ? " sw-sam" : ""}">${localizeDigits(beat.digits, ctx.lang)}</span>`
+        );
+      } else if (/^\|+$/.test(raw)) {
+        parts.push(`<span class="sw-stop">${"<i></i>".repeat(raw.length)}</span>`);
+      } else {
+        parts.push(`<span class="sw-raw" title="${escapeHtml(raw)}">${escapeHtml(raw)}</span>`);
+      }
+      continue;
+    }
+    const brackets = bracketGlyphs(note, "open") + bracketGlyphs(note, "close");
+    if (brackets !== "") parts.push(`<span class="sw-carrier">${brackets}</span>`);
+  }
+  return parts.join("");
+}
+function lyricText(s, ctx) {
+  return s.split("\u09F9").map((part) => part === "" ? "" : ctx.tr(part)).join(ctx.marks.melisma);
+}
+function renderRow(row, partIdx, rowIdx, ctx) {
+  const cells = groupRowIntoCells(row.notes);
+  const arcs = resolveArcs(cells, row.notes.length);
+  const above = [];
+  const notation = [];
+  const below = [];
+  const lyric = [];
+  for (const cell of cells) {
+    const firstCol = cell.start + 1;
+    const lastCol = cell.start + cell.notes.length;
+    const cellSpan = lastCol > firstCol ? `grid-column:${firstCol} / ${lastCol + 1}` : `grid-column:${firstCol}`;
+    const cuts = cell.kind === "group" ? cutMarkCount(cell.notes[0].raw) : 0;
+    cell.notes.forEach((note, j) => {
+      const col = cell.start + j + 1;
+      const path = `${partIdx}.${rowIdx}.${cell.start + j}`;
+      const cellEdges = `${j === 0 ? " sw-cs" : ""}${j === cell.notes.length - 1 ? " sw-ce" : ""}`;
+      if (cell.kind === "bar") {
+        notation.push(
+          `<span class="sw-bar sw-bar--${note.bar}${cellEdges}" data-note="${path}" style="grid-column:${col}">${renderBarInner(note)}</span>`
+        );
+      } else if (cell.kind === "group") {
+        const last = j === cell.notes.length - 1;
+        notation.push(
+          `<span class="sw-n${cellEdges}" data-note="${path}" style="grid-column:${col}">${renderPitchedInner(note, { withMatra: last, cuts: last ? cuts : 0 }, ctx)}</span>`
+        );
+      } else {
+        const raw = rawDisplay(note);
+        const inner = bracketGlyphs(note, "open") + (raw !== void 0 ? `<span class="sw-raw" title="${escapeHtml(raw)}">${escapeHtml(raw)}</span>` : "") + bracketGlyphs(note, "close");
+        if (inner !== "") {
+          notation.push(
+            `<span class="sw-n sw-carrier${cellEdges}" data-note="${path}" style="grid-column:${col}">${inner}</span>`
+          );
+        }
+      }
+      if (note.lyric !== void 0) {
+        lyric.push(
+          `<span class="sw-lyr" style="grid-column:${col}">${escapeHtml(lyricText(note.lyric, ctx))}</span>`
+        );
+      }
+      if (note.above !== void 0 && note.above.length > 0) {
+        above.push(`<span class="sw-above" style="${cellSpan}">${renderAnnotation(note.above, ctx)}</span>`);
+      }
+      const nonArc = (note.below ?? []).filter((b) => !isArcRaw(b.raw));
+      if (nonArc.length > 0) {
+        below.push(`<span class="sw-below" style="${cellSpan}">${renderAnnotation(nonArc, ctx)}</span>`);
+      }
+    });
+  }
+  for (const arc of arcs) {
+    const cls = [
+      "sw-arc",
+      arc.openLeft ? "sw-arc--openl" : "",
+      arc.openRight ? "sw-arc--openr" : "",
+      arc.line === true ? "sw-arc--line" : ""
+    ].filter(Boolean).join(" ");
+    below.push(`<span class="${cls}" style="grid-column:${arc.startCol} / ${arc.endCol + 1}"></span>`);
+  }
+  const label = row.label !== void 0 ? `<span class="sw-label">${escapeHtml(ctx.tr(row.label))}</span>` : "";
+  return `<div class="sw-row">${label}<div class="sw-grid">${above.join("")}${notation.join("")}${below.join("")}${lyric.join("")}</div></div>`;
+}
+function renderHeader(meta, ctx) {
+  const L = LABELS[ctx.lang];
+  const rows = [];
+  const add = (label, value) => rows.push(
+    `<div class="sw-meta-row"><span class="sw-meta-label">${escapeHtml(label)}</span><span class="sw-meta-value">${escapeHtml(value)}</span></div>`
+  );
+  add(L.title, ctx.tr(meta.title));
+  const taal = meta.taalName ?? meta.taal?.id;
+  if (taal !== void 0) add(L.taal, ctx.tr(taal));
+  if (meta.raag !== void 0) add(L.raag, ctx.tr(meta.raag));
+  if (meta.avartan !== void 0) add(L.avartan, localizeDigits(String(meta.avartan), ctx.lang));
+  if (meta.notationBy !== void 0) add(L.notationBy, ctx.tr(meta.notationBy));
+  return `<header class="sw-header">${rows.join("")}</header>`;
+}
+function renderToHtml(doc, opts = {}) {
+  const lang = opts.lang ?? "bn";
+  const tr = lang !== "bn" && opts.transliterate ? opts.transliterate : (s) => s;
+  const ctx = { lang, marks: MARKS[lang], tr };
+  const out = [`<div class="sw-sheet" lang="${lang}">`];
+  if (opts.showHeader !== false) out.push(renderHeader(doc.meta, ctx));
+  doc.parts.forEach((part, p) => {
+    out.push('<section class="sw-part">');
+    if (part.name !== void 0)
+      out.push(`<h3 class="sw-part-name">${escapeHtml(ctx.tr(part.name))}</h3>`);
+    part.rows.forEach((row, r) => out.push(renderRow(row, p, r, ctx)));
+    out.push("</section>");
+  });
+  out.push("</div>");
+  return out.join("");
+}
+
+// src/viewer/styles.ts
+var SWARALIPI_CSS = `
+.sw-sheet {
+  font-family: var(--sw-font, 'Noto Sans Bengali', 'Kohinoor Bangla', 'Bangla Sangam MN', 'Nirmala UI', 'Noto Sans Devanagari', sans-serif);
+  font-size: var(--sw-size, 1.125rem);
+  line-height: 1.5;
+}
+
+/* ---- header ---- */
+.sw-header {
+  margin: 0 0 0.75em;
+  padding: 0 0 0.5em;
+  border-bottom: 1px solid var(--sw-rule, rgba(128, 128, 128, 0.35));
+  font-size: 0.95em;
+}
+.sw-meta-row { display: flex; gap: 0.3em; }
+.sw-meta-label { font-weight: 600; min-width: 4.5em; }
+.sw-meta-label::after { content: ':'; font-weight: 400; margin-left: 0.15em; }
+
+.sw-part-name { font-size: 0.85em; font-weight: 600; margin: 1em 0 0.2em; opacity: 0.85; }
+
+/* ---- row grid: above / notation / below(arcs) / lyric ---- */
+.sw-row {
+  display: flex;
+  align-items: flex-start;
+  overflow-x: auto;
+  padding: 0.4em 0;
+}
+.sw-label { flex: none; margin-right: 0.8em; font-weight: 600; }
+.sw-grid {
+  display: grid;
+  grid-template-rows: auto auto auto auto;
+  grid-auto-columns: max-content;
+  align-items: end;
+}
+.sw-above   { grid-row: 1; font-size: 0.62em; justify-self: start; white-space: nowrap; padding-left: 0.2em; }
+.sw-n       { grid-row: 2; white-space: nowrap; }
+.sw-arc,
+.sw-below   { grid-row: 3; }
+.sw-lyr     { grid-row: 4; white-space: nowrap; padding-top: 0.3em; }
+.sw-below   { font-size: 0.62em; justify-self: start; white-space: nowrap; padding-left: 0.2em; }
+
+/* inter-cell gap as padding on each cell's first notation item, so arcs
+ * and above-spans crossing cells stay continuous */
+.sw-cs { padding-left: var(--sw-cell-gap, 0.55em); }
+
+/* ---- notation clusters & marks ---- */
+.sw-cl { position: relative; display: inline-block; }
+
+/* mandra: hasanta-shaped understroke (a real \u09CD before \u09BE is invalid Unicode) */
+.sw-mandra::after {
+  content: '';
+  position: absolute;
+  left: 0.1em;
+  bottom: -0.08em;
+  width: 0.45em;
+  height: 0.09em;
+  background: currentColor;
+  transform: rotate(-32deg);
+}
+/* ati-mandra: an extra dot below */
+.sw-ati-mandra::before {
+  content: '';
+  position: absolute;
+  left: 0.25em;
+  bottom: -0.35em;
+  width: 0.16em;
+  height: 0.16em;
+  border-radius: 50%;
+  background: currentColor;
+}
+/* ati-taar (reph already in the text): an extra dot above */
+.sw-ati-taar::before {
+  content: '';
+  position: absolute;
+  left: 0.25em;
+  top: -0.3em;
+  width: 0.16em;
+  height: 0.16em;
+  border-radius: 50%;
+  background: currentColor;
+}
+/* CSS reph fallback for vowel letters \u098B/\u090B that reject a real reph */
+.sw-reph-css::before {
+  content: '';
+  position: absolute;
+  top: -0.12em;
+  left: 0.12em;
+  width: 0.3em;
+  height: 0.3em;
+  border: 0.09em solid currentColor;
+  border-right: none;
+  border-bottom: none;
+  border-top-left-radius: 0.3em;
+}
+/* en octave dots (Bhatkhande-style) */
+.sw-dot-above::before,
+.sw-dot-below::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  margin-left: -0.07em;
+  width: 0.14em;
+  height: 0.14em;
+  border-radius: 50%;
+  background: currentColor;
+}
+.sw-dot-above::before { top: -0.25em; }
+.sw-dot-below::before { bottom: -0.2em; }
+.sw-ati-taar.sw-dot-above::before,
+.sw-ati-mandra.sw-dot-below::before { box-shadow: 0.24em 0 0 currentColor; margin-left: -0.19em; }
+/* en accidentals (bn/hi use distinct letters instead) */
+.sw-komal { text-decoration: underline; text-underline-offset: 0.18em; }
+.sw-tivra::after { content: '\\2032'; font-size: 0.7em; vertical-align: super; }
+
+/* kan grace: small raised cluster left of the main note */
+.sw-kan {
+  position: relative;
+  display: inline-block;
+  font-size: 0.58em;
+  vertical-align: 0.75em;
+  margin-right: 0.08em;
+}
+
+.sw-hy { padding-right: 0.02em; }
+.sw-iso { display: inline-block; margin-left: -0.18em; }
+.sw-cut { font-size: 0.8em; display: inline-block; margin-left: -0.15em; }
+.sw-br { opacity: 0.8; padding: 0 0.06em; }
+.sw-micro { font-size: 0.6em; vertical-align: super; opacity: 0.8; }
+
+/* raw fallback: never dropped, visibly non-notation */
+.sw-raw {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.72em;
+  opacity: 0.55;
+}
+
+/* ---- bars: dari (thin) and danda strokes, notation-row height ---- */
+/* horizontal gap before a bar comes from its own .sw-cs padding-left \u2014
+ * never reset it with a padding shorthand here */
+.sw-bar {
+  grid-row: 2;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0.16em;
+  padding-right: 0.1em;
+}
+.sw-bar i { display: inline-block; width: 0.14em; min-height: 1.25em; background: currentColor; }
+.sw-bar--dari i { width: 0.05em; opacity: 0.9; }
+.sw-bar--quad i:nth-child(3) { margin-left: 0.18em; }
+.sw-above .sw-bar, .sw-below .sw-bar { display: inline-flex; vertical-align: baseline; }
+.sw-above .sw-bar i, .sw-below .sw-bar i { min-height: 1em; }
+
+/* ---- under-arcs (slurs decoded from w/x segments and meend) ---- */
+.sw-arc {
+  align-self: start;
+  height: 0.4em;
+  margin: 0.05em 0.25em 0;
+  border: 0.09em solid currentColor;
+  border-top: none;
+  border-bottom-left-radius: 0.6em;
+  border-bottom-right-radius: 0.6em;
+  opacity: 0.85;
+}
+.sw-arc--openl { border-left: none; border-bottom-left-radius: 0; }
+.sw-arc--openr { border-right: none; border-bottom-right-radius: 0; }
+.sw-arc--line { border-left: none; border-right: none; border-radius: 0; height: 0.22em; }
+
+/* ---- annotation content ---- */
+.sw-beat { position: relative; display: inline-block; padding: 0 0.1em; }
+.sw-sam::after {
+  content: '';
+  position: absolute;
+  top: -0.45em;
+  left: 50%;
+  width: 0.1em;
+  height: 0.4em;
+  background: currentColor;
+  transform: rotate(14deg);
+}
+.sw-stop i {
+  display: inline-block;
+  width: 0.07em;
+  height: 1em;
+  margin: 0 0.07em;
+  background: currentColor;
+  vertical-align: text-bottom;
+}
+
+/* ---- player sync (P2.3) ---- */
+.sw-hl { background: var(--sw-hl, rgba(255, 196, 64, 0.45)); border-radius: 0.15em; }
+
+/* ---- element error box ---- */
+.sw-error {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.85em;
+  padding: 0.6em 0.8em;
+  border: 1px solid rgba(200, 64, 64, 0.6);
+  border-radius: 0.3em;
+  color: #b33;
+  background: rgba(200, 64, 64, 0.08);
+}
+`;
+var SWARALIPI_PRINT_CSS = `
+@page { margin: 16mm; }
+@media print {
+  .sw-sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #000; }
+  .sw-row { overflow: visible !important; break-inside: avoid; page-break-inside: avoid; }
+  .sw-part { break-inside: auto; }
+  .sw-part-name, .sw-header { break-after: avoid-page; page-break-after: avoid; }
+  .sw-hl { background: none !important; }
+}
+`;
+
+// src/viewer/print.ts
+function escapeHtml2(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function renderPrintDocument(doc, opts = {}) {
+  const lang = opts.lang ?? "bn";
+  const tr = lang !== "bn" && opts.transliterate ? opts.transliterate : (s) => s;
+  const title = opts.title ?? tr(doc.meta.title);
+  const body = renderToHtml(doc, {
+    lang,
+    showHeader: opts.showHeader,
+    transliterate: opts.transliterate
+  });
+  return `<!doctype html>
+<html lang="${escapeHtml2(lang)}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml2(title)}</title>
+<style>
+${SWARALIPI_CSS}
+${SWARALIPI_PRINT_CSS}
+html, body { margin: 0; }
+body { color: #111; background: #fff; padding: 16px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+.sw-sheet { max-width: 100%; }
+</style>
+</head>
+<body>${body}</body>
+</html>`;
+}
+function printSwaralipi(doc, opts = {}) {
+  if (typeof document === "undefined") {
+    throw new Error("printSwaralipi requires a DOM; use renderPrintDocument() for server-side PDF");
+  }
+  const html = renderPrintDocument(doc, opts);
+  const iframe = document.createElement("iframe");
+  iframe.setAttribute("aria-hidden", "true");
+  iframe.style.cssText = "position:fixed; left:-10000px; top:0; width:800px; height:600px; border:0;";
+  iframe.onload = () => {
+    const win = iframe.contentWindow;
+    if (win === null) {
+      iframe.remove();
+      return;
+    }
+    const cleanup = () => setTimeout(() => iframe.remove(), 1e3);
+    win.addEventListener("afterprint", cleanup, { once: true });
+    const go = () => {
+      try {
+        win.focus();
+        win.print();
+      } catch {
+      }
+    };
+    const fonts = iframe.contentDocument?.fonts;
+    if (fonts?.ready) void fonts.ready.then(go).catch(go);
+    else setTimeout(go, 250);
+  };
+  iframe.srcdoc = html;
+  document.body.appendChild(iframe);
+}
+
+// src/viewer/transliterate.ts
+var TARGET = {
+  hi: "devanagari",
+  en: "iast"
+};
+async function loadLyricTransliterator(lang) {
+  if (lang === "bn") return void 0;
+  const mod = await import('@indic-transliteration/sanscript');
+  const sanscript = mod.default ?? mod;
+  const target = TARGET[lang];
+  return (text) => sanscript.t(text, "bengali", target);
+}
+
+// src/viewer/element.ts
+var LANGS = /* @__PURE__ */ new Set(["bn", "hi", "en"]);
+var sharedSheet;
+function createElementClass() {
+  return class SwaralipiSheet extends HTMLElement {
+    static observedAttributes = ["src", "lang", "hide-header"];
+    #doc;
+    #root;
+    #adopted = false;
+    #abort;
+    #translit;
+    #translitLang;
+    validate = false;
+    constructor() {
+      super();
+      this.#root = this.attachShadow({ mode: "open" });
+      if (typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype && "adoptedStyleSheets" in this.#root) {
+        if (!sharedSheet) {
+          sharedSheet = new CSSStyleSheet();
+          sharedSheet.replaceSync(SWARALIPI_CSS);
+        }
+        this.#root.adoptedStyleSheets = [...this.#root.adoptedStyleSheets, sharedSheet];
+        this.#adopted = true;
+      }
+    }
+    get doc() {
+      return this.#doc;
+    }
+    set doc(value) {
+      this.#doc = value;
+      if (value !== void 0 && this.validate) {
+        void import('../spec/index.js').then(({ safeParseSwaralipi }) => {
+          const result = safeParseSwaralipi(value);
+          if (!result.success) this.#renderError(result.error.message);
+        }).catch(() => void 0);
+      }
+      this.#render();
+    }
+    get #lang() {
+      const attr = this.getAttribute("lang");
+      return attr !== null && LANGS.has(attr) ? attr : "bn";
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (oldValue === newValue) return;
+      if (name === "src") {
+        if (newValue !== null) void this.#load(newValue);
+        return;
+      }
+      if (name === "lang") this.#ensureTransliterator();
+      this.#render();
+    }
+    connectedCallback() {
+      this.#ensureTransliterator();
+      this.#render();
+    }
+    disconnectedCallback() {
+      this.#abort?.abort();
+    }
+    async #load(url) {
+      this.#abort?.abort();
+      const abort = new AbortController();
+      this.#abort = abort;
+      try {
+        const res = await fetch(url, { signal: abort.signal });
+        if (!res.ok) throw new Error(`fetch ${url}: HTTP ${res.status}`);
+        this.doc = await res.json();
+      } catch (err) {
+        if (abort.signal.aborted) return;
+        this.#renderError(err instanceof Error ? err.message : String(err));
+        this.dispatchEvent(new ErrorEvent("error", { error: err, message: String(err) }));
+      }
+    }
+    /** Load (once per lang) the lyric transliterator, then re-render. */
+    #ensureTransliterator() {
+      const lang = this.#lang;
+      if (lang === "bn" || this.#translitLang === lang) return;
+      void loadLyricTransliterator(lang).then((t) => {
+        if (t === void 0 || this.#lang !== lang) return;
+        this.#translit = t;
+        this.#translitLang = lang;
+        this.#render();
+      }).catch(() => void 0);
+    }
+    #styleFallback() {
+      return this.#adopted ? "" : `<style>${SWARALIPI_CSS}</style>`;
+    }
+    #render() {
+      if (this.#doc === void 0) {
+        this.#root.innerHTML = this.#styleFallback();
+        return;
+      }
+      const lang = this.#lang;
+      const html = renderToHtml(this.#doc, {
+        lang,
+        showHeader: !this.hasAttribute("hide-header"),
+        transliterate: this.#translitLang === lang ? this.#translit : void 0
+      });
+      this.#root.innerHTML = this.#styleFallback() + html;
+    }
+    #renderError(message) {
+      const div = document.createElement("div");
+      div.className = "sw-error";
+      div.textContent = message;
+      this.#root.innerHTML = this.#styleFallback();
+      this.#root.appendChild(div);
+    }
+    highlight(path) {
+      if (!/^\d+\.\d+\.\d+$/.test(path)) return null;
+      const el = this.#root.querySelector(`[data-note="${path}"]`);
+      el?.classList.add("sw-hl");
+      return el;
+    }
+    clearHighlights() {
+      for (const el of this.#root.querySelectorAll(".sw-hl")) el.classList.remove("sw-hl");
+    }
+    print(options = {}) {
+      if (this.#doc === void 0) return;
+      const lang = this.#lang;
+      printSwaralipi(this.#doc, {
+        lang,
+        showHeader: !this.hasAttribute("hide-header"),
+        transliterate: this.#translitLang === lang ? this.#translit : void 0,
+        ...options
+      });
+    }
+  };
+}
+var registered = /* @__PURE__ */ new Map();
+function defineSwaralipiSheet(tagName = "swaralipi-sheet") {
+  if (typeof customElements === "undefined" || typeof HTMLElement === "undefined") {
+    throw new Error("swaralipi-sheet requires a DOM; use renderToHtml() for server-side rendering");
+  }
+  const existing = customElements.get(tagName);
+  if (existing) return existing;
+  const ctor = registered.get(tagName) ?? createElementClass();
+  registered.set(tagName, ctor);
+  customElements.define(tagName, ctor);
+  return ctor;
+}
+
+export { DIGITS, LABELS, LETTERS, MARKS, SWARALIPI_CSS, SWARALIPI_PRINT_CSS, composeCluster, defineSwaralipiSheet, groupRowIntoCells, loadLyricTransliterator, localizeDigits, printSwaralipi, renderPrintDocument, renderToHtml, resolveArcs };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map