@ugfoundation/swaralipi-js 0.2.0 → 0.2.1

package/dist/viewer/index.js

@@ -1,43 +1,39 @@
 // 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" },
@@ -45,40 +41,20 @@ var LABELS = {
   en: { title: "Song", taal: "Taal", raag: "Raag", avartan: "Avartan", notationBy: "Notation" }
 };
 function composeCluster(letter, opts) {
-  const forms = LETTERS[opts.lang][letter];
-  const marks = MARKS[opts.lang];
   const classes = [];
-  let base = forms.shuddha;
-  if (opts.komal) {
-    if (forms.komal !== void 0) base = forms.komal;
-    else classes.push("sw-komal");
-  }
-  if (opts.tivra) {
-    if (forms.tivra !== void 0) base = forms.tivra;
-    else classes.push("sw-tivra");
-  }
-  const isVowelLetter = VOWEL_LETTER_GLYPHS.has(base);
-  let text = base;
-  switch (opts.octave) {
-    case "taar":
-    case "ati-taar":
-      if (marks.reph === "") classes.push("sw-dot-above");
-      else if (isVowelLetter) classes.push("sw-reph-css");
-      else text = marks.reph + text;
-      if (opts.octave === "ati-taar") classes.push("sw-ati-taar");
-      break;
-    case "mandra":
-    case "ati-mandra":
-      classes.push(marks.reph === "" ? "sw-dot-below" : "sw-mandra");
-      if (opts.octave === "ati-mandra") classes.push("sw-ati-mandra");
-      break;
+  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 };
   }
-  let matraSeparate = false;
-  if (opts.withMatra && marks.matra !== "") {
-    if (isVowelLetter) matraSeparate = true;
-    else text += marks.matra;
-  }
-  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 +177,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 +200,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 +296,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) {
@@ -381,13 +352,29 @@ 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"
+};
+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 +403,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 +416,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 +447,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 {
@@ -641,7 +574,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 +585,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);
@@ -671,6 +613,15 @@ async function loadLyricTransliterator(lang) {
 
 // src/viewer/element.ts
 var LANGS = /* @__PURE__ */ new Set(["bn", "hi", "en"]);
+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 {
@@ -803,12 +754,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 { DIGITS, LABELS, MARKS, NOTATION_FONT_URLS, SWARALIPI_CSS, SWARALIPI_PRINT_CSS, composeCluster, defineSwaralipiSheet, groupRowIntoCells, loadLyricTransliterator, localizeDigits, printSwaralipi, renderPrintDocument, renderToHtml, resolveArcs };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map