@ugfoundation/swaralipi-js 0.2.1 → 0.3.0

package/dist/viewer/index.js

@@ -1,3 +1,6 @@
+import { buildSchedule, drumPattern } from '../chunk-V5ZSUJCA.js';
+import { TAALS } from '../chunk-H6HC44PZ.js';
+
 // src/viewer/glyphs.ts
 var SWARABITAN_SHUDDHA = {
   s: "s",
@@ -36,9 +39,9 @@ var MARKS = {
   en: { hyphen: "-", melisma: "\xB7", cut: ":" }
 };
 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" }
+  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\u0995\u09BE\u09B0" },
+  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\u0915\u093E\u0930" },
+  en: { title: "Song", taal: "Taal", raag: "Raag", avartan: "Avartan", notationBy: "Notator" }
 };
 function composeCluster(letter, opts) {
   const classes = [];
@@ -321,21 +324,24 @@ function renderRow(row, partIdx, rowIdx, ctx) {
   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];
+  return renderMetaHeader(meta, ctx.lang, ctx.tr);
+}
+function renderMetaHeader(meta, lang, tr = (s) => s) {
+  const L = LABELS[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));
+  add(L.title, 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));
+  if (taal !== void 0) add(L.taal, tr(taal));
+  if (meta.raag !== void 0) add(L.raag, tr(meta.raag));
+  if (meta.avartan !== void 0) add(L.avartan, localizeDigits(String(meta.avartan), lang));
+  if (meta.notationBy !== void 0) add(L.notationBy, tr(meta.notationBy));
   return `<header class="sw-header">${rows.join("")}</header>`;
 }
 function renderToHtml(doc, opts = {}) {
-  const lang = opts.lang ?? "bn";
+  const lang = opts.lang === "hi" || opts.lang === "en" ? 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}">`];
@@ -353,9 +359,9 @@ function renderToHtml(doc, opts = {}) {
 
 // src/viewer/styles.ts
 var NOTATION_FONT_URLS = {
-  Swarabitan: "https://cdn.daserve.in/webfonts/swarabitan/Swarabitan.ttf",
-  ome_bhatkhande_hindi: "https://cdn.daserve.in/webfonts/ome-bhatkhande/OmeBhatkhandeHindi.ttf",
-  ome_bhatkhande_english: "https://cdn.daserve.in/webfonts/ome-bhatkhande/OmeBhatkhandeEnglish.ttf"
+  Swarabitan: "https://webfonts-4qq.pages.dev/swarabitan/Swarabitan.ttf",
+  ome_bhatkhande_hindi: "https://webfonts-4qq.pages.dev/ome-bhatkhande/OmeBhatkhandeHindi.ttf",
+  ome_bhatkhande_english: "https://webfonts-4qq.pages.dev/ome-bhatkhande/OmeBhatkhandeEnglish.ttf"
 };
 NOTATION_FONT_URLS.Swarabitan;
 var FONT_FACES = Object.entries(NOTATION_FONT_URLS).map(
@@ -505,6 +511,9 @@ ${FONT_FACES}
 
 /* ---- player sync (P2.3) ---- */
 .sw-hl { background: var(--sw-hl, rgba(255, 196, 64, 0.45)); border-radius: 0.15em; }
+/* Staff notes are SVG <g> \u2014 background doesn't paint there, so recolour the
+   glyph fill/stroke instead (abcjs draws note heads/stems as filled paths). */
+.sw-staff .sw-hl, .sw-staff .sw-hl * { fill: var(--sw-hl-note, #d68400); stroke: var(--sw-hl-note, #d68400); }
 
 /* ---- element error box ---- */
 .sw-error {
@@ -520,27 +529,270 @@ ${FONT_FACES}
 var SWARALIPI_PRINT_CSS = `
 @page { margin: 16mm; }
 @media print {
-  .sw-sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #000; }
+  .sw-sheet, .sw-staff { -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; }
+  /* Keep each engraved staff system whole across a page break (the abcjs line
+     is a <div> wrapping the <svg>, so the break rule must sit on the div). */
+  .sw-staff-lines > div { break-inside: avoid; page-break-inside: avoid; }
+  .sw-staff-meta { break-after: avoid-page; page-break-after: avoid; }
 }
 `;
+var SWARALIPI_STAFF_CSS = `
+.sw-staff { color: currentColor; }
+.sw-staff-meta { display: flex; gap: 1.25em; align-items: baseline; margin: 0 0 .5em; font-size: .95em; opacity: .85; }
+.sw-staff-instrument { font-weight: 600; }
+.sw-staff-drums { opacity: .75; }
+.sw-staff-tempo { font-variant-numeric: tabular-nums; }
+/* abcjs (oneSvgPerLine) wraps the music into one <div><svg> per system; stack
+   them as short, swaralipi-style lines. abcjs sets a fixed pixel height +
+   overflow:hidden on each wrapper div \u2014 neutralise it so the viewBox'd SVG can
+   scale to the container (and to the print page) instead of being clipped. */
+.sw-staff-lines > div { margin: 0 0 .35em; height: auto !important; overflow: visible !important; }
+/* Fill up to the engraved (staffwidth) size \u2014 shrink to fit a narrow container,
+   but never stretch past natural width (abcToSvg pins per-SVG max-width in px),
+   else a short last system balloons. */
+.sw-staff-lines svg { display: block; width: 100%; height: auto; }
+.sw-staff-missing { padding: 1em; border: 1px dashed currentColor; border-radius: 6px; opacity: .8; font-size: .9em; }
+.sw-staff-title { font-size: 1.15em; font-weight: 700; }
+.sw-staff-subtitle { opacity: .8; font-size: .95em; margin-top: .15em; }
+`;
+
+// src/viewer/staff.ts
+var ABC_SHARP = ["C", "^C", "D", "^D", "E", "F", "^F", "G", "^G", "A", "^A", "B"];
+function midiToAbc(midi) {
+  const pc = (midi % 12 + 12) % 12;
+  const octave = Math.floor(midi / 12) - 1;
+  const token = ABC_SHARP[pc];
+  const acc = token[0] === "^" ? "^" : "";
+  const letter = acc ? token[1] : token[0];
+  return octave >= 5 ? acc + letter.toLowerCase() + "'".repeat(octave - 5) : acc + letter + ",".repeat(4 - octave);
+}
+function abcDuration(beats) {
+  if (Math.abs(beats - 1) < 1e-6) return "";
+  if (Math.abs(beats - Math.round(beats)) < 1e-6) return String(Math.round(beats));
+  const inv = 1 / beats;
+  if (Math.abs(inv - Math.round(inv)) < 1e-6) return `/${Math.round(inv)}`;
+  const sixteenths = Math.max(1, Math.round(beats * 4));
+  return `${sixteenths}/4`;
+}
+function abcNote(ev) {
+  const grace = ev.kan !== null ? `{${midiToAbc(ev.kan)}}` : "";
+  return `${grace}${midiToAbc(ev.midi)}${abcDuration(ev.durationBeats)}`;
+}
+function eventPaths(schedule) {
+  const paths = [];
+  for (const ev of schedule.events) {
+    if (ev.midi !== null || ev.kind === "rest") paths.push(ev.path);
+  }
+  return paths;
+}
+function abcText(s) {
+  return s.replace(/[\r\n]+/g, " ").trim();
+}
+function buildAbc(schedule, lyricOf, opts) {
+  const beatsPerBar = opts.beatsPerBar > 0 ? opts.beatsPerBar : 4;
+  const tokens = [];
+  const words = [];
+  let barPos = 0;
+  const EPS2 = 1e-6;
+  const advance = (dur) => {
+    barPos += dur;
+    while (barPos >= beatsPerBar - EPS2) {
+      tokens.push("|");
+      words.push("|");
+      barPos -= beatsPerBar;
+    }
+  };
+  for (const ev of schedule.events) {
+    if (ev.midi === null) {
+      if (ev.kind === "rest") {
+        tokens.push(`z${abcDuration(ev.durationBeats)}`);
+        words.push("*");
+        advance(ev.durationBeats);
+      }
+      continue;
+    }
+    tokens.push(abcNote(ev));
+    const lyr = lyricOf(ev);
+    words.push(lyr ? abcText(lyr).replace(/\s+/g, "~") : "*");
+    advance(ev.durationBeats);
+  }
+  if (tokens.length && tokens[tokens.length - 1] !== "|") tokens.push("|]");
+  else if (tokens.length) tokens[tokens.length - 1] = "|]";
+  const meter = ratioMeter(beatsPerBar);
+  const head = ["X:1", `M:${meter}`, "L:1/4", `Q:1/4=${Math.round(opts.bpm)}`];
+  if (opts.drums) head.push(...percMapLines(opts.drums));
+  head.push("K:C treble");
+  const melodyBody = tokens.length ? tokens.join(" ") : "z |]";
+  const lines = [...head];
+  if (opts.drums) {
+    lines.push("V:1", melodyBody);
+    if (opts.lyrics && words.some((w) => w !== "*" && w !== "|")) lines.push(`w: ${words.join(" ")}`);
+    lines.push("V:2 clef=perc stem=up", buildDrumVoice(schedule.totalBeats, beatsPerBar, opts.drums));
+  } else {
+    lines.push(melodyBody);
+    if (opts.lyrics && words.some((w) => w !== "*" && w !== "|")) lines.push(`w: ${words.join(" ")}`);
+  }
+  return lines.join("\n");
+}
+function ratioMeter(beats) {
+  return `${Math.max(1, Math.round(beats))}/4`;
+}
+var DRUM_ABC = {
+  kick: { note: "F,", gm: "bass-drum-1" },
+  snare: { note: "C", gm: "acoustic-snare" },
+  hihat: { note: "g", gm: "closed-hi-hat" },
+  tom1: { note: "E", gm: "high-tom" },
+  tom2: { note: "A,", gm: "low-mid-tom" },
+  tom3: { note: "D,", gm: "low-floor-tom" }
+};
+function percMapLines(voices) {
+  const seen = /* @__PURE__ */ new Set();
+  const lines = [];
+  for (const v of voices) {
+    if (seen.has(v)) continue;
+    seen.add(v);
+    const { note, gm } = DRUM_ABC[v];
+    lines.push(`%%percmap ${note} ${gm}`);
+  }
+  return lines;
+}
+function buildDrumVoice(totalBeats, beatsPerBar, pattern) {
+  const n = Math.max(1, Math.ceil(totalBeats));
+  const tokens = [];
+  for (let beat = 0; beat < n; beat++) {
+    tokens.push(DRUM_ABC[pattern[beat % pattern.length]].note);
+    if ((beat + 1) % beatsPerBar === 0) tokens.push("|");
+  }
+  if (tokens.length === 0 || tokens[tokens.length - 1] !== "|") tokens.push("|]");
+  else tokens[tokens.length - 1] = "|]";
+  return tokens.join(" ");
+}
+function lyricLookup(doc) {
+  return (ev) => {
+    const [p, r, i] = ev.path.split(".").map(Number);
+    return doc.parts[p]?.rows[r]?.notes[i]?.lyric;
+  };
+}
+function resolveDrumTaal(doc) {
+  const id = doc.meta.taal?.id;
+  return id !== void 0 && id in TAALS ? TAALS[id] : { numBeats: 4, sam: 0 };
+}
+function docToAbc(doc, opts = {}) {
+  const schedule = buildSchedule(doc, { tonic: opts.tonic, baseOctave: opts.baseOctave });
+  const bpm = opts.bpm ?? doc.meta.bpm ?? 90;
+  const beatsPerBar = opts.beatsPerBar ?? doc.meta.taal?.numBeats ?? 4;
+  const drums = opts.drums ? drumPattern(resolveDrumTaal(doc)) : void 0;
+  return buildAbc(schedule, lyricLookup(doc), { bpm, lyrics: opts.lyrics !== false, beatsPerBar, drums });
+}
+async function abcToSvg(abc, opts = {}, notePaths) {
+  if (typeof document === "undefined") {
+    throw new Error("abcToSvg requires a DOM; render staff notation in the browser or print iframe");
+  }
+  let ABCJS;
+  try {
+    const mod = await import('abcjs');
+    ABCJS = mod.default ?? mod;
+  } catch {
+    return `<div class="sw-staff-missing">Staff notation needs the optional <code>abcjs</code> package.</div>`;
+  }
+  const host = document.createElement("div");
+  host.style.cssText = "position:fixed; left:-10000px; top:0; width:720px; visibility:hidden;";
+  const mount = document.body ?? document.documentElement;
+  mount.appendChild(host);
+  try {
+    ABCJS.renderAbc(host, abc, {
+      add_classes: true,
+      staffwidth: opts.staffwidth ?? 680,
+      scale: opts.scale ?? 1,
+      // Reflow into short lines. staffwidth is the width budget;
+      // preferredMeasuresPerLine keeps systems swaralipi-short.
+      // (Not `responsive: resize` — its absolute-positioned aspect-ratio wrapper
+      // overlaps the header and mis-sizes on the print page.)
+      wrap: { minSpacing: 1.8, maxSpacing: 2.7, preferredMeasuresPerLine: opts.measuresPerLine ?? 4 },
+      // CRUCIAL: put each wrapped system in its OWN <svg> (default is all systems
+      // stacked in one tall SVG, which is atomic and can't page-break — that was
+      // the near-blank-first-page / mid-staff-cutoff print bug). One SVG per line
+      // lets `break-inside: avoid` keep each staff whole while pages fill.
+      oneSvgPerLine: true
+    });
+    for (const svg of host.querySelectorAll("svg")) {
+      const w = parseFloat(svg.getAttribute("width") ?? "");
+      const h = parseFloat(svg.getAttribute("height") ?? "");
+      if (w > 0 && h > 0) {
+        if (!svg.getAttribute("viewBox")) svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+        svg.setAttribute("preserveAspectRatio", "xMinYMin meet");
+        svg.removeAttribute("width");
+        svg.removeAttribute("height");
+        svg.setAttribute("style", `max-width:${w}px`);
+      }
+    }
+    if (notePaths) {
+      const melody = host.querySelectorAll(".abcjs-v0.abcjs-note, .abcjs-v0.abcjs-rest");
+      let i = 0;
+      for (const el of melody) {
+        const path = notePaths[i++];
+        if (path !== void 0) el.setAttribute("data-note", path);
+      }
+    }
+    return host.innerHTML;
+  } finally {
+    host.remove();
+  }
+}
+async function renderStaffHtml(doc, opts = {}) {
+  const bpm = opts.bpm ?? doc.meta.bpm ?? 90;
+  const abc = docToAbc(doc, { ...opts, bpm });
+  const schedule = buildSchedule(doc, { tonic: opts.tonic, baseOctave: opts.baseOctave });
+  const engraved = await abcToSvg(abc, opts, eventPaths(schedule));
+  const lines = engraved.includes("sw-staff-missing") ? engraved : `<div class="sw-staff-lines">${engraved}</div>`;
+  const header = opts.showHeader === false ? "" : renderMetaHeader(doc.meta, opts.headerLang ?? "en", opts.transliterate);
+  const metaParts = [];
+  if (opts.instrument) metaParts.push(`<span class="sw-staff-instrument">${escapeAttr(opts.instrument)}</span>`);
+  if (opts.drums) metaParts.push(`<span class="sw-staff-drums">+ drums</span>`);
+  const meta = metaParts.length ? `<div class="sw-staff-meta">${metaParts.join("")}</div>` : "";
+  return `<div class="sw-staff">${header}${meta}${lines}</div>`;
+}
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
 
 // src/viewer/print.ts
+var DEFAULT_WATERMARK = "www.gitabitan.io";
+var DEFAULT_NOTATOR = "gitabitan.io Team";
 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
-  });
+function watermarkCss(text) {
+  if (!text) return "";
+  return `
+.sw-watermark {
+  position: fixed; inset: 0; z-index: 0; pointer-events: none;
+  display: flex; align-items: center; justify-content: center;
+  overflow: hidden;
+  -webkit-print-color-adjust: exact; print-color-adjust: exact;
+}
+.sw-watermark span {
+  font-size: 11vw; font-weight: 700; letter-spacing: .08em;
+  color: rgba(0,0,0,0.07); transform: rotate(-35deg); white-space: nowrap;
+}
+body > .sw-sheet, body > .sw-footer { position: relative; z-index: 1; }
+`;
+}
+function chrome(text, notator) {
+  const top = text ? `<div class="sw-watermark" aria-hidden="true"><span>${escapeHtml2(text)}</span></div>` : "";
+  const bottom = notator ? `<footer class="sw-footer">${escapeHtml2(notator)}</footer>` : "";
+  return { top, bottom };
+}
+function resolveNotator(doc, opts) {
+  return doc.meta.notationBy ?? opts.notator ?? DEFAULT_NOTATOR;
+}
+function pageHtml(lang, title, bodyHtml, opts, doc) {
+  const watermark = opts.watermark ?? DEFAULT_WATERMARK;
+  const { top, bottom } = chrome(watermark, resolveNotator(doc, opts));
   return `<!doctype html>
 <html lang="${escapeHtml2(lang)}">
 <head>
@@ -549,20 +801,42 @@ function renderPrintDocument(doc, opts = {}) {
 <title>${escapeHtml2(title)}</title>
 <style>
 ${SWARALIPI_CSS}
+${SWARALIPI_STAFF_CSS}
 ${SWARALIPI_PRINT_CSS}
+${watermarkCss(watermark)}
 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%; }
+.sw-footer { margin-top: 12px; padding-top: 6px; border-top: 1px solid #ddd; font-size: 12px; color: #555; text-align: right; }
 </style>
 </head>
-<body>${body}</body>
+<body>${top}${bodyHtml}${bottom}</body>
 </html>`;
 }
+function renderPrintDocument(doc, opts = {}) {
+  const lang = opts.lang === "staff" ? "bn" : 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 pageHtml(lang, title, body, opts, doc);
+}
+async function renderStaffPrintDocument(doc, opts = {}) {
+  if (opts.lang !== "staff") return renderPrintDocument(doc, opts);
+  const title = opts.title ?? doc.meta.title;
+  const staff = await renderStaffHtml(doc, opts);
+  return pageHtml("en", title, staff, opts, doc);
+}
 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);
+  if (opts.lang === "staff") {
+    void renderStaffPrintDocument(doc, opts).then(printHtmlInIframe);
+  } else {
+    printHtmlInIframe(renderPrintDocument(doc, opts));
+  }
+}
+function printHtmlInIframe(html) {
   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;";
@@ -604,7 +878,7 @@ var TARGET = {
   en: "iast"
 };
 async function loadLyricTransliterator(lang) {
-  if (lang === "bn") return void 0;
+  if (lang === "bn" || lang === "staff") return void 0;
   const mod = await import('@indic-transliteration/sanscript');
   const sanscript = mod.default ?? mod;
   const target = TARGET[lang];
@@ -612,7 +886,7 @@ async function loadLyricTransliterator(lang) {
 }
 
 // src/viewer/element.ts
-var LANGS = /* @__PURE__ */ new Set(["bn", "hi", "en"]);
+var LANGS = /* @__PURE__ */ new Set(["bn", "hi", "en", "staff"]);
 function ensureNotationFonts() {
   if (typeof FontFace === "undefined" || typeof document === "undefined") return;
   const present = /* @__PURE__ */ new Set();
@@ -632,6 +906,8 @@ function createElementClass() {
     #abort;
     #translit;
     #translitLang;
+    #renderSeq = 0;
+    #staffOptions = {};
     validate = false;
     constructor() {
       super();
@@ -639,7 +915,7 @@ function createElementClass() {
       if (typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype && "adoptedStyleSheets" in this.#root) {
         if (!sharedSheet) {
           sharedSheet = new CSSStyleSheet();
-          sharedSheet.replaceSync(SWARALIPI_CSS);
+          sharedSheet.replaceSync(SWARALIPI_CSS + SWARALIPI_STAFF_CSS);
         }
         this.#root.adoptedStyleSheets = [...this.#root.adoptedStyleSheets, sharedSheet];
         this.#adopted = true;
@@ -658,6 +934,13 @@ function createElementClass() {
       }
       this.#render();
     }
+    get staffOptions() {
+      return this.#staffOptions;
+    }
+    set staffOptions(value) {
+      this.#staffOptions = value;
+      if (this.#lang === "staff") this.#render();
+    }
     get #lang() {
       const attr = this.getAttribute("lang");
       return attr !== null && LANGS.has(attr) ? attr : "bn";
@@ -704,14 +987,22 @@ function createElementClass() {
       }).catch(() => void 0);
     }
     #styleFallback() {
-      return this.#adopted ? "" : `<style>${SWARALIPI_CSS}</style>`;
+      return this.#adopted ? "" : `<style>${SWARALIPI_CSS}${SWARALIPI_STAFF_CSS}</style>`;
     }
     #render() {
+      const seq = ++this.#renderSeq;
       if (this.#doc === void 0) {
         this.#root.innerHTML = this.#styleFallback();
         return;
       }
       const lang = this.#lang;
+      if (lang === "staff") {
+        const doc = this.#doc;
+        void renderStaffHtml(doc, this.staffOptions).then((html2) => {
+          if (seq === this.#renderSeq) this.#root.innerHTML = this.#styleFallback() + html2;
+        }).catch(() => void 0);
+        return;
+      }
       const html = renderToHtml(this.#doc, {
         lang,
         showHeader: !this.hasAttribute("hide-header"),
@@ -742,6 +1033,7 @@ function createElementClass() {
         lang,
         showHeader: !this.hasAttribute("hide-header"),
         transliterate: this.#translitLang === lang ? this.#translit : void 0,
+        ...lang === "staff" ? this.staffOptions : {},
         ...options
       });
     }
@@ -761,6 +1053,6 @@ function defineSwaralipiSheet(tagName = "swaralipi-sheet") {
   return ctor;
 }
 
-export { DIGITS, LABELS, MARKS, NOTATION_FONT_URLS, SWARALIPI_CSS, SWARALIPI_PRINT_CSS, composeCluster, defineSwaralipiSheet, groupRowIntoCells, loadLyricTransliterator, localizeDigits, printSwaralipi, renderPrintDocument, renderToHtml, resolveArcs };
+export { DEFAULT_NOTATOR, DEFAULT_WATERMARK, DIGITS, LABELS, MARKS, NOTATION_FONT_URLS, SWARALIPI_CSS, SWARALIPI_PRINT_CSS, SWARALIPI_STAFF_CSS, abcDuration, abcToSvg, buildAbc, composeCluster, defineSwaralipiSheet, docToAbc, groupRowIntoCells, loadLyricTransliterator, localizeDigits, midiToAbc, printSwaralipi, renderMetaHeader, renderPrintDocument, renderStaffHtml, renderStaffPrintDocument, renderToHtml, resolveArcs };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map