@ugfoundation/swaralipi-js 0.2.0 → 0.3.0

package/dist/viewer/index.js

@@ -1,84 +1,63 @@
+import { buildSchedule, drumPattern } from '../chunk-V5ZSUJCA.js';
+import { TAALS } from '../chunk-H6HC44PZ.js';
+
 // 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];
@@ -201,11 +180,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 "";
@@ -227,26 +203,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 = [];
@@ -325,7 +299,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) {
@@ -350,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}">`];
@@ -381,13 +358,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;
@@ -416,10 +409,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
@@ -429,71 +422,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 {
@@ -510,29 +453,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 {
@@ -572,6 +511,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 {
@@ -587,27 +529,270 @@ 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/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>
@@ -616,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;";
@@ -641,7 +848,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();
@@ -649,8 +859,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);
@@ -662,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];
@@ -670,7 +886,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 {
@@ -681,6 +906,8 @@ function createElementClass() {
     #abort;
     #translit;
     #translitLang;
+    #renderSeq = 0;
+    #staffOptions = {};
     validate = false;
     constructor() {
       super();
@@ -688,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;
@@ -707,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";
@@ -753,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"),
@@ -791,6 +1033,7 @@ function createElementClass() {
         lang,
         showHeader: !this.hasAttribute("hide-header"),
         transliterate: this.#translitLang === lang ? this.#translit : void 0,
+        ...lang === "staff" ? this.staffOptions : {},
         ...options
       });
     }
@@ -803,12 +1046,13 @@ 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;
 }
 
-export { DIGITS, LABELS, LETTERS, MARKS, 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