@ugfoundation/swaralipi-js 0.7.2 → 0.7.4

package/dist/viewer/index.d.cts

@@ -1,5 +1,5 @@
-import { O as Octave, a as SvaraLetter, N as Note, M as Meta, S as Swaralipi, T as Taal } from '../schema-D_86x4oV.cjs';
-import { D as DrumVoice, S as Schedule, P as PlayEvent } from '../schedule-CjPcD-Hf.cjs';
+import { O as Octave, a as SvaraLetter, N as Note, M as Meta, S as Swaralipi, T as Taal } from '../schema-DqBXPGkL.cjs';
+import { D as DrumVoice, S as Schedule, P as PlayEvent } from '../schedule-BpBYGXPL.cjs';
 import 'zod';
 import 'tone';
 import '../taals-CjzBuZ35.cjs';

package/dist/viewer/index.d.ts

@@ -1,5 +1,5 @@
-import { O as Octave, a as SvaraLetter, N as Note, M as Meta, S as Swaralipi, T as Taal } from '../schema-D_86x4oV.js';
-import { D as DrumVoice, S as Schedule, P as PlayEvent } from '../schedule-8WFUBJqB.js';
+import { O as Octave, a as SvaraLetter, N as Note, M as Meta, S as Swaralipi, T as Taal } from '../schema-DqBXPGkL.js';
+import { D as DrumVoice, S as Schedule, P as PlayEvent } from '../schedule-Tzk01FKj.js';
 import 'zod';
 import 'tone';
 import '../taals-CjzBuZ35.js';

package/dist/viewer/index.js

@@ -1,5 +1,5 @@
-import { isArcRaw, glideTargets, buildSchedule, drumPattern } from '../chunk-GHWURC4U.js';
-import { TAALS } from '../chunk-6ETPFHZ6.js';
+import { isArcRaw, glideTargets, buildSchedule, drumPattern } from '../chunk-2SAZWTTK.js';
+import { TAALS, graceNotes } from '../chunk-UF5OSJRP.js';
 
 // src/viewer/glyphs.ts
 var SWARABITAN_SHUDDHA = {
@@ -266,11 +266,21 @@ function bracketGlyphs(note, edge) {
 function matraGlyph(ctx) {
   return ctx.lang === "bn" ? '<span class="sw-cl">a</span>' : '<span class="sw-iso">\u2013</span>';
 }
-function renderGrace(svara, cls, ctx) {
-  if (svara === void 0) return "";
-  const [octave, letter] = svara;
-  const c = composeCluster(letter, { octave, withMatra: false, lang: ctx.lang });
-  return `<span class="${[cls, ...c.classes].join(" ")}">${c.text}</span>`;
+function renderGrace(grace, cls, ctx) {
+  return graceNotes(grace).map((n) => {
+    if (n.svara === void 0) return "";
+    const [octave, letter] = n.svara;
+    const c = composeCluster(letter, {
+      komal: n.komal,
+      tivra: n.tivra,
+      octave,
+      withMatra: false,
+      lang: ctx.lang
+    });
+    const hy = n.sustain === true ? ctx.marks.hyphen : "";
+    const micro = n.microtone !== void 0 ? `<span class="sw-micro" title="${n.microtone}">${localizeDigits(n.microtone === "atikomal" ? "2" : "1", ctx.lang)}</span>` : "";
+    return `<span class="${[cls, ...c.classes].join(" ")}">${hy}${c.text}</span>${micro}`;
+  }).join("");
 }
 function cutGlyphs(marks, ctx) {
   if (marks === "") return "";
@@ -530,6 +540,14 @@ var FONT_FACES = Object.entries(NOTATION_FONT_URLS).map(
 var SWARALIPI_CSS = `
 ${FONT_FACES}
 
+/* A custom element is display:inline by default, and Resize Observer
+   "Observations do not fire for non-replaced inline Elements" \u2014 they report
+   one empty content rect and nothing after
+   (https://drafts.csswg.org/resize-observer/). The element's re-fit-on-resize
+   is that observer, so without this rule the sheet is fitted once, to whatever
+   width it happened to have, and never again. */
+:host { display: block; }
+
 .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);
@@ -788,7 +806,7 @@ function abcDuration(beats) {
   return `${sixteenths}/4`;
 }
 function abcNote(ev) {
-  const grace = ev.kan !== null ? `{${midiToAbc(ev.kan)}}` : "";
+  const grace = ev.kan.length > 0 ? `{${ev.kan.map(midiToAbc).join("")}}` : "";
   return `${grace}${midiToAbc(ev.midi)}${abcDuration(ev.durationBeats)}`;
 }
 function eventPaths(schedule) {
@@ -1213,11 +1231,16 @@ function createElementClass() {
         });
         this.#resize.observe(this);
       }
+      document.fonts?.addEventListener("loadingdone", this.#onFontsLoaded);
     }
+    #onFontsLoaded = () => {
+      if (this.#doc !== void 0) this.fit();
+    };
     disconnectedCallback() {
       this.#abort?.abort();
       this.#resize?.disconnect();
       this.#resize = void 0;
+      document.fonts?.removeEventListener("loadingdone", this.#onFontsLoaded);
     }
     /** Scale the notation to fit the available width, times the zoom factor. */
     #fit() {
@@ -1316,9 +1339,6 @@ function createElementClass() {
       });
       this.#root.innerHTML = this.#styleFallback() + html;
       this.#fit();
-      void document.fonts?.ready.then(() => {
-        if (seq === this.#renderSeq) this.fit();
-      });
     }
     #renderError(message) {
       const div = document.createElement("div");