@ugfoundation/swaralipi-js 0.2.0 → 0.3.0

package/dist/viewer/index.cjs

@@ -11,6 +11,30 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
+
+// src/spec/taals.ts
+var TAALS;
+var init_taals = __esm({
+  "src/spec/taals.ts"() {
+    TAALS = {
+      dadra: { id: "dadra", numBeats: 6, bhaags: [3, 3], sam: 0, khaali: [3] },
+      kehrwa: { id: "kehrwa", numBeats: 8, bhaags: [4, 4], sam: 0, khaali: [4] },
+      rupak: { id: "rupak", numBeats: 7, bhaags: [3, 2, 2], sam: 0, khaali: [0] },
+      jhaptaal: { id: "jhaptaal", numBeats: 10, bhaags: [2, 3, 2, 3], sam: 0, khaali: [5] },
+      ektaal: { id: "ektaal", numBeats: 12, bhaags: [2, 2, 2, 2, 2, 2], sam: 0, khaali: [2, 6] },
+      adachautaal: { id: "adachautaal", numBeats: 14, sam: 0 },
+      choutaal: { id: "choutaal", numBeats: 12, bhaags: [2, 2, 2, 2, 2, 2], sam: 0, khaali: [2, 6] },
+      // চৌতাল
+      shashthi: { id: "shashthi", numBeats: 6, bhaags: [2, 4], sam: 0 },
+      // ষষ্ঠী
+      teora: { id: "teora", numBeats: 7, bhaags: [3, 2, 2], sam: 0 },
+      // টেওরা
+      teentaal: { id: "teentaal", numBeats: 16, bhaags: [4, 4, 4, 4], sam: 0, khaali: [8] },
+      aratheka: { id: "aratheka", numBeats: 16, bhaags: [4, 4, 4, 4], sam: 0, khaali: [8] }
+      // আড়াঠেকা
+    };
+  }
+});
 var octaveSchema, svaraLetterSchema, svaraSchema, microtoneSchema, barSchema, bracketSchema, noteSchema, rowSchema, partSchema, taalSchema, metaSchema, swaralipiSchema;
 var init_schema = __esm({
   "src/spec/schema.ts"() {
@@ -123,30 +147,6 @@ var init_schema = __esm({
   }
 });
 
-// src/spec/taals.ts
-var TAALS;
-var init_taals = __esm({
-  "src/spec/taals.ts"() {
-    TAALS = {
-      dadra: { id: "dadra", numBeats: 6, bhaags: [3, 3], sam: 0, khaali: [3] },
-      kehrwa: { id: "kehrwa", numBeats: 8, bhaags: [4, 4], sam: 0, khaali: [4] },
-      rupak: { id: "rupak", numBeats: 7, bhaags: [3, 2, 2], sam: 0, khaali: [0] },
-      jhaptaal: { id: "jhaptaal", numBeats: 10, bhaags: [2, 3, 2, 3], sam: 0, khaali: [5] },
-      ektaal: { id: "ektaal", numBeats: 12, bhaags: [2, 2, 2, 2, 2, 2], sam: 0, khaali: [2, 6] },
-      adachautaal: { id: "adachautaal", numBeats: 14, sam: 0 },
-      choutaal: { id: "choutaal", numBeats: 12, bhaags: [2, 2, 2, 2, 2, 2], sam: 0, khaali: [2, 6] },
-      // চৌতাল
-      shashthi: { id: "shashthi", numBeats: 6, bhaags: [2, 4], sam: 0 },
-      // ষষ্ঠী
-      teora: { id: "teora", numBeats: 7, bhaags: [3, 2, 2], sam: 0 },
-      // টেওরা
-      teentaal: { id: "teentaal", numBeats: 16, bhaags: [4, 4, 4, 4], sam: 0, khaali: [8] },
-      aratheka: { id: "aratheka", numBeats: 16, bhaags: [4, 4, 4, 4], sam: 0, khaali: [8] }
-      // আড়াঠেকা
-    };
-  }
-});
-
 // src/spec/index.ts
 var spec_exports = {};
 __export(spec_exports, {
@@ -179,91 +179,67 @@ var init_spec = __esm({
     init_schema();
     init_schema();
     init_taals();
-    SPEC_VERSION = "0.2.0";
+    SPEC_VERSION = "0.3.0";
   }
 });
 
 // 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 SWARABITAN_SHUDDHA = {
+  s: "s",
+  r: "r",
+  g: "g",
+  m: "m",
+  p: "p",
+  d: "q",
+  n: "n"
+  // q = ধ
 };
+var SWARABITAN_KOMAL = {
+  r: "v",
+  g: "t",
+  d: "d",
+  n: "u"
+  // ঋ জ্ঞ দ ণ
+};
+var SWARABITAN_TIVRA = { m: "k" };
+var BHATKHANDE_OCTAVE = {
+  madhyam: "",
+  taar: "u",
+  mandra: "l",
+  "ati-taar": "U",
+  "ati-mandra": "L"
+};
+var BHATKHANDE_HAS_KOMAL = /* @__PURE__ */ new Set(["r", "g", "d", "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: "" }
+  bn: { hyphen: "-", melisma: "\u09F9", cut: "\u0983" },
+  hi: { hyphen: "-", melisma: "\u0970", cut: "\u0903" },
+  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 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;
+  if (opts.lang === "bn") {
+    let text = opts.tivra && SWARABITAN_TIVRA[letter] || opts.komal && SWARABITAN_KOMAL[letter] || SWARABITAN_SHUDDHA[letter];
+    if (opts.octave === "taar" || opts.octave === "ati-taar") text += "f";
+    else if (opts.octave === "mandra" || opts.octave === "ati-mandra") text += "h";
+    if (opts.octave === "ati-taar") classes.push("sw-ati-taar");
+    if (opts.octave === "ati-mandra") classes.push("sw-ati-mandra");
+    if (opts.withMatra) text += "a";
+    return { text, classes };
   }
-  return { text, classes, matraSeparate };
+  let base = letter;
+  if (opts.tivra && letter === "m") base = "M";
+  else if (opts.komal && BHATKHANDE_HAS_KOMAL.has(letter)) base = base.toUpperCase();
+  return { text: base + BHATKHANDE_OCTAVE[opts.octave], classes };
 }
 function localizeDigits(s, lang) {
   const digits = DIGITS[lang];
@@ -386,11 +362,8 @@ 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 matraGlyph(ctx) {
+  return ctx.lang === "bn" ? '<span class="sw-cl">a</span>' : '<span class="sw-iso">\u2013</span>';
 }
 function renderKan(note, ctx) {
   if (!note.kan) return "";
@@ -412,26 +385,24 @@ function renderPitchedInner(note, opts, ctx) {
       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);
+    inner += matraGlyph(ctx);
   } else if (note.sustain === true && opts.withMatra) {
-    inner += isoMatra(ctx);
+    inner += matraGlyph(ctx);
   }
   if (note.microtone !== void 0) {
-    const mark = note.microtone === "atikomal" ? "\u21CA" : "\u2193";
+    const mark = localizeDigits(note.microtone === "atikomal" ? "2" : "1", ctx.lang);
     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 (isIntegral(d) && d > 1 + EPS) inner += matraGlyph(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 };
+var BAR_GLYPHS = { dari: "A", single: "l", double: "L", quad: "LL" };
 function renderBarInner(note) {
-  const strokes = "<i></i>".repeat(BAR_STROKES[note.bar]);
-  return `${bracketGlyphs(note, "open")}${strokes}${bracketGlyphs(note, "close")}`;
+  return `${bracketGlyphs(note, "open")}${BAR_GLYPHS[note.bar]}${bracketGlyphs(note, "close")}`;
 }
 function renderAnnotation(notes, ctx) {
   const parts = [];
@@ -510,7 +481,7 @@ function renderRow(row, partIdx, rowIdx, ctx) {
       }
       if (note.lyric !== void 0) {
         lyric.push(
-          `<span class="sw-lyr" style="grid-column:${col}">${escapeHtml(lyricText(note.lyric, ctx))}</span>`
+          `<span class="sw-lyr${j === 0 ? " sw-cs" : ""}" style="grid-column:${col}">${escapeHtml(lyricText(note.lyric, ctx))}</span>`
         );
       }
       if (note.above !== void 0 && note.above.length > 0) {
@@ -535,21 +506,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}">`];
@@ -566,13 +540,29 @@ function renderToHtml(doc, opts = {}) {
 }
 
 // src/viewer/styles.ts
+var NOTATION_FONT_URLS = {
+  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(
+  ([family, url]) => `@font-face { font-family: ${family}; src: url('${url}') format('truetype'); font-display: block; }`
+).join("\n");
 var SWARALIPI_CSS = `
+${FONT_FACES}
+
 .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;
 }
 
+/* ---- notation font, per language (the note clusters + grace notes) ---- */
+.sw-sheet[lang="bn"] .sw-cl, .sw-sheet[lang="bn"] .sw-kan { font-family: Swarabitan, var(--sw-font, sans-serif); }
+.sw-sheet[lang="hi"] .sw-cl, .sw-sheet[lang="hi"] .sw-kan { font-family: ome_bhatkhande_hindi, var(--sw-font, sans-serif); }
+.sw-sheet[lang="en"] .sw-cl, .sw-sheet[lang="en"] .sw-kan { font-family: ome_bhatkhande_english, var(--sw-font, sans-serif); }
+
 /* ---- header ---- */
 .sw-header {
   margin: 0 0 0.75em;
@@ -601,10 +591,10 @@ var SWARALIPI_CSS = `
   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-n       { grid-row: 2; justify-self: center; white-space: nowrap; }
 .sw-arc,
 .sw-below   { grid-row: 3; }
-.sw-lyr     { grid-row: 4; white-space: nowrap; padding-top: 0.3em; }
+.sw-lyr     { grid-row: 4; justify-self: center; 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
@@ -614,71 +604,21 @@ var SWARALIPI_CSS = `
 /* ---- 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 */
+/* bn ati-octave: Swarabitan's f/h give a single reph/hasanta, so ati adds
+ * one extra dot above (ati-taar) / below (ati-mandra). bn-only \u2014 hi/en get
+ * the two-dot glyph natively from the U/L octave suffix. */
+.sw-ati-taar::before,
 .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; }
+.sw-ati-taar::before { top: -0.3em; }
+.sw-ati-mandra::before { bottom: -0.35em; }
 
 /* kan grace: small raised cluster left of the main note */
 .sw-kan {
@@ -695,29 +635,25 @@ var SWARALIPI_CSS = `
 .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 */
+/* raw fallback: never dropped, visibly non-notation. Swarabitan first \u2014
+ * raw IS that font's encoding, so undecoded cells show NLTR's own glyphs
+ * (dimmed: semantics unverified); monospace ASCII when the font is out. */
 .sw-raw {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: Swarabitan, ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 0.72em;
   opacity: 0.55;
 }
 
-/* ---- bars: dari (thin) and danda strokes, notation-row height ---- */
+/* ---- bars: dari (A) and danda (l/L) Swarabitan glyphs ---- */
 /* 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;
+  font-family: Swarabitan, var(--sw-font, sans-serif);
+  white-space: nowrap;
   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; }
+.sw-bar--quad { letter-spacing: 0.15em; }
 
 /* ---- under-arcs (slurs decoded from w/x segments and meend) ---- */
 .sw-arc {
@@ -757,6 +693,9 @@ var SWARALIPI_CSS = `
 
 /* ---- 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 {
@@ -772,27 +711,500 @@ var SWARALIPI_CSS = `
 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/player/pitch.ts
+var OCTAVE_OFFSET = {
+  "ati-mandra": -2,
+  mandra: -1,
+  madhyam: 0,
+  taar: 1,
+  "ati-taar": 2
+};
+var SHUDDHA = {
+  s: 0,
+  r: 2,
+  g: 4,
+  m: 5,
+  p: 7,
+  d: 9,
+  n: 11
+};
+var SHARP_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+var PITCH_CLASS = {
+  c: 0,
+  "c#": 1,
+  db: 1,
+  d: 2,
+  "d#": 3,
+  eb: 3,
+  e: 4,
+  "e#": 5,
+  fb: 4,
+  f: 5,
+  "f#": 6,
+  gb: 6,
+  g: 7,
+  "g#": 8,
+  ab: 8,
+  a: 9,
+  "a#": 10,
+  bb: 10,
+  b: 11,
+  "b#": 0,
+  cb: 11
+};
+function parseTonic(tonic) {
+  if (!tonic) return 0;
+  const key = tonic.trim().toLowerCase().replace(/s/g, "#");
+  return PITCH_CLASS[key] ?? 0;
+}
+function svaraSemitone(note) {
+  if (note.svara === void 0) return null;
+  const [, letter] = note.svara;
+  let semi = SHUDDHA[letter];
+  if (note.komal === true || note.microtone !== void 0) semi -= 1;
+  if (note.tivra === true) semi += 1;
+  return semi;
+}
+function svaraToMidi(note, tonicPc, baseOctave = 4) {
+  const semi = svaraSemitone(note);
+  if (semi === null || note.svara === void 0) return null;
+  const [octave] = note.svara;
+  return (baseOctave + 1 + OCTAVE_OFFSET[octave]) * 12 + tonicPc + semi;
+}
+function kanToMidi(svara, tonicPc, baseOctave = 4) {
+  if (svara === void 0) return null;
+  const [octave, letter] = svara;
+  return (baseOctave + 1 + OCTAVE_OFFSET[octave]) * 12 + tonicPc + SHUDDHA[letter];
+}
+function midiToSampleName(midi) {
+  const pc = (midi % 12 + 12) % 12;
+  const octave = Math.floor(midi / 12) - 1;
+  return `${SHARP_NAMES[pc]}${octave}`;
+}
+function sampleFileName(midi) {
+  return midiToSampleName(midi).toLowerCase().replace("#", "s");
+}
+
+// src/player/schedule.ts
+var isSilent = (n) => n.svara === void 0 && n.rest !== true && n.sustain !== true;
+function buildSchedule(doc, opts = {}) {
+  const tonicPc = parseTonic(opts.tonic ?? doc.meta.tonic);
+  const baseOctave = opts.baseOctave ?? 4;
+  const events = [];
+  let cursor = 0;
+  let lastPitched = -1;
+  doc.parts.forEach((part, p) => {
+    part.rows.forEach((row, r) => {
+      row.notes.forEach((note, i) => {
+        if (note.bar !== void 0 || isSilent(note)) return;
+        const path = `${p}.${r}.${i}`;
+        const dur = note.durationMatra ?? 1;
+        if (note.svara !== void 0) {
+          events.push({
+            beat: cursor,
+            durationBeats: dur,
+            midi: svaraToMidi(note, tonicPc, baseOctave),
+            kan: kanToMidi(note.kan, tonicPc, baseOctave),
+            path,
+            kind: note.sustain === true ? "sustain" : "note"
+          });
+          lastPitched = events.length - 1;
+        } else if (note.sustain === true) {
+          if (lastPitched >= 0) events[lastPitched].durationBeats += dur;
+          events.push({ beat: cursor, durationBeats: dur, midi: null, kan: null, path, kind: "sustain" });
+        } else {
+          events.push({ beat: cursor, durationBeats: dur, midi: null, kan: null, path, kind: "rest" });
+        }
+        cursor += dur;
+      });
+    });
+  });
+  return { events, totalBeats: cursor };
+}
+
+// src/viewer/staff.ts
+init_taals();
+
+// src/player/instruments.ts
+init_taals();
+function keyMap(keys) {
+  const m = {};
+  for (const k of keys) m[k] = `${k.replace("#", "s")}.mp3`;
+  return m;
+}
+var PIANO_KEYS = [
+  "A0",
+  "C1",
+  "D#1",
+  "F#1",
+  "A1",
+  "C2",
+  "D#2",
+  "F#2",
+  "A2",
+  "C3",
+  "D#3",
+  "F#3",
+  "A3",
+  "C4",
+  "D#4",
+  "F#4",
+  "A4",
+  "C5",
+  "D#5",
+  "F#5",
+  "A5",
+  "C6",
+  "D#6",
+  "F#6",
+  "A6",
+  "C7",
+  "D#7",
+  "F#7",
+  "A7",
+  "C8"
+];
+var HARMONIUM_KEYS = [
+  "C2",
+  "C#2",
+  "D2",
+  "D#2",
+  "E2",
+  "F2",
+  "F#2",
+  "G2",
+  "G#2",
+  "A2",
+  "A#2",
+  "C3",
+  "C#3",
+  "D3",
+  "D#3",
+  "E3",
+  "F3",
+  "F#3",
+  "G3",
+  "G#3",
+  "A3",
+  "A#3",
+  "C4",
+  "C#4",
+  "D4",
+  "D#4",
+  "E4",
+  "F4",
+  "F#4",
+  "G4",
+  "G#4",
+  "A4",
+  "A#4",
+  "C5",
+  "C#5",
+  "D5"
+];
+var VIOLIN_KEYS = ["A3", "C4", "E4", "G4", "A4", "C5", "E5", "G5", "A5", "C6", "E6", "G6", "A6", "C7"];
+var FLUTE_KEYS = ["C4", "E4", "A4", "C5", "E5", "A5", "C6", "E6", "A6", "C7"];
+({
+  piano: { urls: keyMap(PIANO_KEYS)},
+  santoor: { urls: santoorUrls()},
+  harmonium: { urls: keyMap(HARMONIUM_KEYS)},
+  violin: { urls: keyMap(VIOLIN_KEYS)},
+  flute: { urls: keyMap(FLUTE_KEYS)}
+});
+new Set(
+  Object.keys(TAALS)
+);
+Array.from({ length: 17 }, (_, i) => 60 + i * 15);
+function santoorUrls() {
+  const urls = {};
+  const add = (midi) => {
+    const stem = sampleFileName(midi);
+    const name = stem.replace("s", "#").replace(/^(.)/, (c) => c.toUpperCase());
+    urls[name] = `${stem}.mp3`;
+  };
+  for (let midi = 60; midi <= 95; midi++) add(midi);
+  add(96);
+  return urls;
+}
+function drumPattern(taal) {
+  const n = taal.numBeats;
+  const sam = taal.sam ?? 0;
+  const khaali = new Set(taal.khaali ?? []);
+  const bhaags = taal.bhaags ?? [n];
+  const pattern = new Array(n).fill("hihat");
+  let pos = 0;
+  for (const len of bhaags) {
+    pattern[pos] = khaali.has(pos) ? "hihat" : "snare";
+    pos += len;
+  }
+  pattern[sam] = "kick";
+  return pattern;
+}
+
+// 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>
@@ -801,20 +1213,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;";
@@ -826,7 +1260,10 @@ function printSwaralipi(doc, opts = {}) {
     }
     const cleanup = () => setTimeout(() => iframe.remove(), 1e3);
     win.addEventListener("afterprint", cleanup, { once: true });
+    let printed = false;
     const go = () => {
+      if (printed) return;
+      printed = true;
       try {
         win.focus();
         win.print();
@@ -834,8 +1271,14 @@ function printSwaralipi(doc, opts = {}) {
       }
     };
     const fonts = iframe.contentDocument?.fonts;
-    if (fonts?.ready) void fonts.ready.then(go).catch(go);
-    else setTimeout(go, 250);
+    if (fonts && typeof fonts.forEach === "function") {
+      const loads = [Promise.resolve(fonts.ready)];
+      fonts.forEach((face) => loads.push(face.load().catch(() => void 0)));
+      void Promise.all(loads).then(go);
+      setTimeout(go, 3e3);
+    } else {
+      setTimeout(go, 250);
+    }
   };
   iframe.srcdoc = html;
   document.body.appendChild(iframe);
@@ -847,7 +1290,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];
@@ -855,7 +1298,16 @@ 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();
+  for (const f of document.fonts) present.add(f.family.replace(/['"]/g, ""));
+  for (const [family, url] of Object.entries(NOTATION_FONT_URLS)) {
+    if (present.has(family)) continue;
+    document.fonts.add(new FontFace(family, `url(${url})`, { display: "block" }));
+  }
+}
 var sharedSheet;
 function createElementClass() {
   return class SwaralipiSheet extends HTMLElement {
@@ -866,6 +1318,8 @@ function createElementClass() {
     #abort;
     #translit;
     #translitLang;
+    #renderSeq = 0;
+    #staffOptions = {};
     validate = false;
     constructor() {
       super();
@@ -873,7 +1327,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;
@@ -892,6 +1346,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";
@@ -938,14 +1399,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"),
@@ -976,6 +1445,7 @@ function createElementClass() {
         lang,
         showHeader: !this.hasAttribute("hide-header"),
         transliterate: this.#translitLang === lang ? this.#translit : void 0,
+        ...lang === "staff" ? this.staffOptions : {},
         ...options
       });
     }
@@ -988,25 +1458,37 @@ function defineSwaralipiSheet(tagName = "swaralipi-sheet") {
   }
   const existing = customElements.get(tagName);
   if (existing) return existing;
+  ensureNotationFonts();
   const ctor = registered.get(tagName) ?? createElementClass();
   registered.set(tagName, ctor);
   customElements.define(tagName, ctor);
   return ctor;
 }
 
+exports.DEFAULT_NOTATOR = DEFAULT_NOTATOR;
+exports.DEFAULT_WATERMARK = DEFAULT_WATERMARK;
 exports.DIGITS = DIGITS;
 exports.LABELS = LABELS;
-exports.LETTERS = LETTERS;
 exports.MARKS = MARKS;
+exports.NOTATION_FONT_URLS = NOTATION_FONT_URLS;
 exports.SWARALIPI_CSS = SWARALIPI_CSS;
 exports.SWARALIPI_PRINT_CSS = SWARALIPI_PRINT_CSS;
+exports.SWARALIPI_STAFF_CSS = SWARALIPI_STAFF_CSS;
+exports.abcDuration = abcDuration;
+exports.abcToSvg = abcToSvg;
+exports.buildAbc = buildAbc;
 exports.composeCluster = composeCluster;
 exports.defineSwaralipiSheet = defineSwaralipiSheet;
+exports.docToAbc = docToAbc;
 exports.groupRowIntoCells = groupRowIntoCells;
 exports.loadLyricTransliterator = loadLyricTransliterator;
 exports.localizeDigits = localizeDigits;
+exports.midiToAbc = midiToAbc;
 exports.printSwaralipi = printSwaralipi;
+exports.renderMetaHeader = renderMetaHeader;
 exports.renderPrintDocument = renderPrintDocument;
+exports.renderStaffHtml = renderStaffHtml;
+exports.renderStaffPrintDocument = renderStaffPrintDocument;
 exports.renderToHtml = renderToHtml;
 exports.resolveArcs = resolveArcs;
 //# sourceMappingURL=index.cjs.map