@ugfoundation/swaralipi-js 0.8.1 → 0.9.0

package/dist/viewer/index.js

@@ -1,5 +1,5 @@
-import { isArcRaw, glideTargets, buildSchedule, drumPattern } from '../chunk-4IVUPMRK.js';
-import { hasKomal, TAALS, graceNotes } from '../chunk-4HNT6OAT.js';
+import { isArcRaw, glideTargets, buildSchedule, drumPattern } from '../chunk-7SMRG4IS.js';
+import { hasKomal, isTaalFerta, sameTaal, TAALS, graceNotes } from '../chunk-MYVIQU4O.js';
 
 // src/viewer/glyphs.ts
 var SWARABITAN_SHUDDHA = {
@@ -49,6 +49,11 @@ var LAY_LABELS = {
   hi: { drut: "\u0926\u094D\u0930\u0941\u0924 \u0932\u092F", madhya: "\u092E\u0927\u094D\u092F \u0932\u092F", vilambit: "\u0935\u093F\u0932\u0902\u092C\u093F\u0924 \u0932\u092F" },
   en: { drut: "Fast (drut)", madhya: "Medium (madhya)", vilambit: "Slow (vilambit)" }
 };
+var FREE_TAAL_LABELS = {
+  bn: "\u09AE\u09C1\u0995\u09CD\u09A4\u099B\u09A8\u09CD\u09A6",
+  hi: "\u092E\u0941\u0915\u094D\u0924\u091B\u0902\u0926",
+  en: "Free rhythm"
+};
 function composeCluster(letter, opts) {
   const classes = [];
   if (opts.lang === "bn") {
@@ -194,42 +199,64 @@ function alignRows(rows) {
 }
 function resolveArcs(cells) {
   const arcs = [];
-  let openStart;
+  let open;
   let sawEnds = false;
   const fillCells = [];
-  const openAt = (i) => {
+  const openAt = (cell, note) => {
     sawEnds = true;
-    if (openStart === void 0) openStart = i;
+    open ??= { cell, note };
   };
-  const closeAt = (i) => {
+  const closeAt = (cell, note) => {
     sawEnds = true;
-    if (openStart !== void 0) {
-      arcs.push({ start: openStart, end: i, openLeft: false, openRight: false });
-      openStart = void 0;
-    } else {
-      arcs.push({ start: 0, end: i, openLeft: true, openRight: false });
-    }
+    const from = open ?? { cell: 0, note: 0 };
+    arcs.push({
+      start: from.cell,
+      startNote: from.note,
+      end: cell,
+      endNote: note,
+      openLeft: open === void 0,
+      openRight: false
+    });
+    open = void 0;
   };
   cells.forEach((cell, i) => {
-    for (const note of cell.notes) {
-      if (note.meend === "start") openAt(i);
-      else if (note.meend === "end") closeAt(i);
-      for (const b of note.below ?? []) {
-        if (!isArcRaw(b.raw)) continue;
-        for (const ch of b.raw) {
-          if (ch === "w" || ch === "W") openAt(i);
-          else if (ch === "x" || ch === "X") closeAt(i);
-          else fillCells.push(i);
-        }
-      }
+    const pitched = cell.notes.flatMap((n, j) => isPitched(n) ? [j] : []);
+    const first = pitched[0] ?? 0;
+    const last = pitched[pitched.length - 1] ?? cell.notes.length - 1;
+    let marks = "";
+    cell.notes.forEach((note, j) => {
+      if (note.meend === "start") openAt(i, j);
+      else if (note.meend === "end") closeAt(i, j);
+      for (const b of note.below ?? []) if (isArcRaw(b.raw)) marks += b.raw;
+    });
+    const reopens = /[xX].*[wW]/.test(marks);
+    for (const ch of marks) {
+      if (ch === "w" || ch === "W") openAt(i, reopens ? last : first);
+      else if (ch === "x" || ch === "X") closeAt(i, reopens ? first : last);
+      else if (ch === "$") {
+        openAt(i, first);
+        closeAt(i, last);
+      } else fillCells.push(i);
     }
   });
-  if (openStart !== void 0) {
-    arcs.push({ start: openStart, end: Math.max(cells.length - 1, 0), openLeft: false, openRight: true });
+  const lastCell = Math.max(cells.length - 1, 0);
+  const lastNote = (c) => Math.max((cells[c]?.notes.length ?? 1) - 1, 0);
+  if (open !== void 0) {
+    arcs.push({
+      start: open.cell,
+      startNote: open.note,
+      end: lastCell,
+      endNote: lastNote(lastCell),
+      openLeft: false,
+      openRight: true
+    });
   } else if (!sawEnds && fillCells.length > 0) {
+    const end = Math.max(...fillCells);
     arcs.push({
       start: Math.min(...fillCells),
-      end: Math.max(...fillCells),
+      startNote: 0,
+      end,
+      endNote: lastNote(end),
       openLeft: true,
       openRight: true,
       line: true
@@ -237,6 +264,35 @@ function resolveArcs(cells) {
   }
   return arcs;
 }
+function arcInk(cells, arcs) {
+  const ink = { cells: cells.map(() => ""), notes: cells.map((c) => c.notes.map(() => "")) };
+  const mark = (c, j, cls, clip = false) => {
+    ink.notes[c][j] += ` ${cls}`;
+    if (clip && !ink.cells[c].includes(" sw-mk")) ink.cells[c] += " sw-mk";
+  };
+  for (const arc of arcs) {
+    const { start: s, end: e, startNote: j, endNote: k } = arc;
+    const hookL = arc.line !== true && !arc.openLeft;
+    const hookR = arc.line !== true && !arc.openRight;
+    if (s === e && hookL && hookR) {
+      if (j === k) {
+        mark(s, j, "sw-mos");
+        mark(s, j, "sw-mcs");
+      } else {
+        mark(s, j, "sw-mob");
+        for (let n = j + 1; n < k; n++) mark(s, n, "sw-mf");
+        mark(s, k, "sw-mcb");
+      }
+      continue;
+    }
+    for (let c = s; c <= e; c++) {
+      if (c === s && hookL) mark(c, j, "sw-mo", true);
+      else if (c === e && hookR) mark(c, k, "sw-mc", true);
+      else mark(c, 0, "sw-mm", true);
+    }
+  }
+  return ink;
+}
 var SVARA_CHAR = /[srgmpqndtkuv]/;
 function rawMarks(raw, count) {
   if (raw === void 0) return void 0;
@@ -412,25 +468,9 @@ function renderNote(note, kind, opts, ctx) {
   const raw = rawDisplay(note);
   return bracketGlyphs(note, "open") + (raw !== void 0 ? `<span class="sw-raw" title="${escapeHtml(raw)}">${escapeHtml(raw)}</span>` : "") + bracketGlyphs(note, "close");
 }
-function renderArc(arc, offset) {
-  const open = arc.line === true;
-  const openL = arc.openLeft || open;
-  const openR = arc.openRight || open;
-  const fill = '<i class="sw-arc-m"></i>';
-  const hookL = openL ? "" : '<i class="sw-arc-l">w</i>';
-  const hookR = openR ? "" : '<i class="sw-arc-r">x</i>';
-  const piece = (col, cls, inner) => `<span class="sw-arc${cls}" style="grid-column:${col}">${inner}</span>`;
-  const f = offset + arc.start + COL_BASE;
-  const t = offset + arc.end + COL_BASE;
-  const openCls = (openL ? " sw-arc--openl" : "") + (openR ? " sw-arc--openr" : "");
-  if (t === f) return piece(`${f}`, openCls, hookL + fill + hookR);
-  const head = piece(`${f}`, openL ? " sw-arc--openl" : " sw-arc--head", hookL + fill);
-  const tail = piece(`${t}`, openR ? " sw-arc--openr" : " sw-arc--tail", fill + hookR);
-  const mid = t > f + 1 ? piece(`${f + 1} / ${t}`, " sw-arc--mid", fill) : "";
-  return head + mid + tail;
-}
 function renderRow(row, partIdx, rowIdx, offset, ctx) {
   const cells = groupRowIntoCells(row.notes);
+  const ink = arcInk(cells, resolveArcs(cells));
   const out = [];
   if (row.label !== void 0)
     out.push(`<span class="sw-label">${escapeHtml(ctx.tr(row.label))}</span>`);
@@ -440,11 +480,10 @@ function renderRow(row, partIdx, rowIdx, offset, ctx) {
     const barCls = cell.kind === "bar" ? " sw-bar-cell" : "";
     const notes = cell.notes.map((note, j) => {
       const path = `${partIdx}.${rowIdx}.${cell.start + j}`;
-      const cls = isPitched(note) ? " sw-p" : "";
       const bar = note.bar !== void 0 ? ` sw-bar sw-bar--${note.bar}` : "";
-      return `<span class="sw-n${cls}${bar}" data-note="${path}">${renderNote(note, cell.kind, opts[j], ctx)}</span>`;
+      return `<span class="sw-n${bar}${ink.notes[ci][j]}" data-note="${path}">${renderNote(note, cell.kind, opts[j], ctx)}</span>`;
     }).join("");
-    out.push(`<span class="sw-cell${barCls}" style="grid-column:${col}">${notes}</span>`);
+    out.push(`<span class="sw-cell${barCls}${ink.cells[ci]}" style="grid-column:${col}">${notes}</span>`);
     const slices = cellLyricSlices(cell);
     if (slices !== void 0) {
       const html = slices.map((t) => `<span>${escapeHtml(lyricText(t, ctx))}</span>`).join("");
@@ -457,7 +496,6 @@ function renderRow(row, partIdx, rowIdx, offset, ctx) {
     if (below.length > 0)
       out.push(`<span class="sw-below" style="grid-column:${col}">${renderAnnotation(below, ctx)}</span>`);
   });
-  for (const arc of resolveArcs(cells)) out.push(renderArc(arc, offset));
   return `<div class="sw-row">${out.join("")}</div>`;
 }
 function renderHeader(meta, ctx) {
@@ -488,15 +526,25 @@ function renderToHtml(doc, opts = {}) {
   out.push(`<div class="sw-scroll"><div class="sw-block" style="${tracks}">`);
   let n = 0;
   let lay;
+  let taal = doc.meta.taal;
+  let named = !isTaalFerta(doc.meta.taalName);
   doc.parts.forEach((part, p) => {
     out.push('<section class="sw-part">');
     if (part.name !== void 0)
       out.push(`<h3 class="sw-part-name">${escapeHtml(ctx.tr(part.name))}</h3>`);
     part.rows.forEach((row, r) => {
+      const marks = [];
+      if (row.taal !== void 0 && (!named || !sameTaal(row.taal, taal))) {
+        taal = row.taal;
+        named = true;
+        const name = row.taalName ?? (taal === null ? FREE_TAAL_LABELS[ctx.lang] : taal.id);
+        marks.push(`<span class="sw-taal" data-taal="${escapeHtml(taal?.id ?? "free")}">${escapeHtml(ctx.tr(name))}</span>`);
+      }
       if (row.lay !== void 0 && row.lay !== lay) {
         lay = row.lay;
-        out.push(`<div class="sw-lay" data-lay="${lay}">${escapeHtml(LAY_LABELS[ctx.lang][lay])}</div>`);
+        marks.push(`<span class="sw-lay" data-lay="${lay}">${escapeHtml(LAY_LABELS[ctx.lang][lay])}</span>`);
       }
+      if (marks.length > 0) out.push(`<div class="sw-change">${marks.join("")}</div>`);
       out.push(renderRow(row, p, r, layout.offsets[n++], ctx));
     });
     out.push("</section>");
@@ -515,7 +563,7 @@ function fitSwaralipi(root, minScale = 0, zoom = 1, minSpacing = 0.35, minSize =
     sheet.style.removeProperty("--sw-size");
     sheet.style.removeProperty("--sw-tight");
     const available = scroll.clientWidth;
-    let natural = block.scrollWidth;
+    let natural = block.offsetWidth;
     if (available === 0 || natural === 0) continue;
     if (natural > available && minSpacing < 1) {
       let loose = minSpacing;
@@ -523,11 +571,11 @@ function fitSwaralipi(root, minScale = 0, zoom = 1, minSpacing = 0.35, minSize =
       for (let i = 0; i < 6; i++) {
         const mid = (loose + tight) / 2;
         sheet.style.setProperty("--sw-tight", String(mid));
-        if (block.scrollWidth <= available) loose = mid;
+        if (block.offsetWidth <= available) loose = mid;
         else tight = mid;
       }
       sheet.style.setProperty("--sw-tight", String(loose));
-      natural = block.scrollWidth;
+      natural = block.offsetWidth;
     }
     const base = parseFloat(getComputedStyle(sheet).fontSize);
     if (!(base > 0)) continue;
@@ -590,10 +638,12 @@ ${FONT_FACES}
 
 .sw-part-name { font-size: 0.85em; font-weight: 600; margin: 1em 0 0.2em; opacity: 0.85; }
 
-/* \u09B2\u09AF\u09BC marker: the line where the tempo tier turns over. A full-width rule
-   rather than a row label \u2014 the label track is what the notation columns are
-   measured against, and a six-em word in it would shove the whole sheet right. */
-.sw-lay {
+/* \u09A4\u09BE\u09B2 / \u09B2\u09AF\u09BC change: the line where the \u09A4\u09BE\u09B2\u09AB\u09C7\u09B0\u09A4\u09BE or the tempo tier turns over,
+   centred between two systems the way \u09B8\u09CD\u09AC\u09B0\u09AC\u09BF\u09A4\u09BE\u09A8 prints "\u099D\u09BE\u0981\u09AA\u09A4\u09BE\u09B2" or
+   "\u09A6\u09CD\u09B0\u09C1\u09A4 \u09B2\u09AF\u09BC". A full-width band rather than a row label \u2014 the label track is
+   what the notation columns are measured against, and a six-em word in it
+   would shove the whole sheet right. */
+.sw-change {
   grid-column: 1 / -1;
   display: flex;
   align-items: center;
@@ -607,12 +657,14 @@ ${FONT_FACES}
   opacity: 0.75;
   break-after: avoid;
 }
-.sw-lay::after {
+.sw-change::before,
+.sw-change::after {
   content: '';
   flex: 1;
   height: 1px;
   background: var(--sw-rule, rgba(128, 128, 128, 0.35));
 }
+.sw-taal + .sw-lay::before { content: '\xB7'; margin-right: 0.6em; }
 
 /* ---- block grid: ONE column set for the whole sheet ----
  * NLTR emits a song as a single html table, which is why its lines align
@@ -625,31 +677,45 @@ ${FONT_FACES}
   column-gap: calc(var(--sw-cell-gap, 0.4em) * var(--sw-tight, 1));
   align-items: end;
   width: max-content;
+  /* The last column's cell spacers overhang half a gap past the grid; clip
+     that sideways so it neither counts as width to fit nor raises a scrollbar. */
+  overflow-x: clip;
 }
 .sw-part { display: contents; }
+/* Four FIXED bands per row \u2014 above / notation / arc / lyric \u2014 so a beat label,
+ * a \u0995\u09A3 or a \u09AE\u09C0\u09A1\u09BC never changes how far a line sits from its words: the
+ * notation hugs its lyric and the next system starts a little further off,
+ * as the printed \u09B8\u09CD\u09AC\u09B0\u09AC\u09BF\u09A4\u09BE\u09A8 sets it. Content taller than its band overflows
+ * rather than pushing the rhythm apart. */
 .sw-row {
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: subgrid;
-  grid-template-rows: auto auto auto auto;
+  grid-template-rows: 0.95em 1.35em 0.4em 1.35em;
   align-items: end;
-  padding: 0.4em 0;
+  padding-bottom: 0.35em;
+  line-height: 1.35;
 }
 .sw-label { grid-column: 1; grid-row: 2; padding-right: 0.5em; font-weight: 600; }
 
-/* One column per cell; sub-notes are equal slices of it (min-width:0 kills
- * flex's min-content floor, else a wide sub-note steals width from its
- * neighbours while the syllable below it does not, and the two bands drift). */
-.sw-cell, .sw-lyr { display: flex; justify-content: center; }
-.sw-cell > .sw-n { white-space: nowrap; }
-.sw-cell > .sw-n.sw-p,
-.sw-lyr > span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }
-.sw-cell    { grid-row: 2; }
-.sw-above   { grid-row: 1; font-size: 0.62em; justify-self: center; white-space: nowrap; }
-.sw-arc,
-.sw-below   { grid-row: 3; }
-.sw-lyr     { grid-row: 4; padding-top: 0.3em; }
-.sw-below   { font-size: 0.62em; justify-self: center; white-space: nowrap; }
+/* One column per cell, its notes set tight as one word (\u09B0\u09B8\u09BE) and centred by
+ * two flex spacers. Each spacer overhangs half the column gap (a min-width
+ * paid back by a negative margin, so the column is sized by the notes alone),
+ * which lets neighbouring cells' spacers meet mid-gap: a \u09AE\u09C0\u09A1\u09BC crossing cells is
+ * inked by these boxes with no hole between them. */
+.sw-cell, .sw-lyr { display: flex; justify-content: center; white-space: nowrap; }
+.sw-cell {
+  --sw-half-gap: calc(var(--sw-cell-gap, 0.4em) * var(--sw-tight, 1) / 2);
+  grid-row: 2;
+  align-self: stretch;
+}
+.sw-cell::before, .sw-cell::after { content: ''; flex: 1 0 0; min-width: var(--sw-half-gap); }
+.sw-cell::before { margin-left: calc(var(--sw-half-gap) * -1); }
+.sw-cell::after { margin-right: calc(var(--sw-half-gap) * -1); }
+.sw-cell > .sw-n { position: relative; }
+.sw-above   { grid-row: 1; font-size: 0.62em; line-height: 1; justify-self: center; white-space: nowrap; }
+.sw-below   { grid-row: 3; font-size: 0.62em; line-height: 1; justify-self: center; white-space: nowrap; }
+.sw-lyr     { grid-row: 4; }
 
 /* ---- notation clusters & marks ---- */
 .sw-cl { position: relative; display: inline-block; }
@@ -670,12 +736,16 @@ ${FONT_FACES}
 .sw-ati-taar::before { top: -0.3em; }
 .sw-ati-mandra::before { bottom: -0.35em; }
 
-/* grace notes: small raised clusters \u2014 \u0995\u09A3 before the note, \u09B0\u09C7\u09B6 after it */
+/* grace notes: small raised clusters \u2014 \u0995\u09A3 before the note, \u09B0\u09C7\u09B6 after it.
+ * line-height 0 (here and on .sw-micro): a raised inline box taller than the
+ * strut grows its line box and drops that one note's baseline below its
+ * neighbours' (css2 \xA710.8). */
 .sw-kan,
 .sw-resh {
   position: relative;
   display: inline-block;
   font-size: 0.58em;
+  line-height: 0;
   vertical-align: 0.75em;
 }
 .sw-kan { margin-right: 0.08em; }
@@ -707,7 +777,7 @@ ${FONT_FACES}
 .sw-cut::before { top: 0.2em; }
 .sw-cut::after { top: 0.55em; }
 .sw-br { opacity: 0.8; padding: 0 0.06em; }
-.sw-micro { font-size: 0.6em; vertical-align: super; opacity: 0.8; }
+.sw-micro { font-size: 0.6em; line-height: 0; vertical-align: super; opacity: 0.8; }
 
 /* raw fallback: never dropped, visibly non-notation. Swarabitan first \u2014
  * raw IS that font's encoding, so undecoded cells show NLTR's own glyphs
@@ -727,49 +797,46 @@ ${FONT_FACES}
 /* a bar owns a whole column but needs no matra of width */
 .sw-bar-cell { min-width: 0; }
 
-/* ---- \u09AE\u09C0\u09A1\u09BC under-arcs (from w/x segments and spec meend) ----
- * Swarabitan draws the arc as three pieces \u2014 'w' the opening hook, 'y' a
- * flat fill, 'x' the closing hook. We use the font's own hooks and stretch
- * the fill as a CSS bar (the 'y' glyph IS a plain rectangle), so one arc
- * spans any number of columns. An open side = the arc continues onto the
- * next system: drop that hook and leave the fill squared off. */
-.sw-arc {
-  display: flex;
-  align-items: baseline;
-  line-height: 1;
-  font-family: Swarabitan, var(--sw-font, sans-serif);
-  /* The 0.9em sits on the children, not here: the end pieces below size
-     themselves off the block's own column-gap, which is in the block's em. */
-}
-.sw-arc > i, .sw-arc::before { font-size: 0.9em; }
-.sw-arc-l, .sw-arc-r { flex: none; font-style: normal; }
-/* Every piece needs the same baseline \u2014 the fill rides it, so a piece holding
-   only fill would otherwise drop to the bottom of the row. A zero-width copy
-   of the hook glyph is the strut (same font, same metrics). */
-.sw-arc::before { content: 'w'; flex: none; width: 0; overflow: hidden; }
-/* The ends hang from the two notes' CENTRES, as the print sets them, so the
-   arc is three grid items: each end piece takes half of its own column plus
-   the column-gap it has to bridge, and the negative margin on the same side
-   lets that bridge overhang the grid area instead of shifting the piece. */
-.sw-arc--head, .sw-arc--tail {
-  --sw-arc-gap: calc(var(--sw-cell-gap, 0.4em) * var(--sw-tight, 1));
-  width: calc(50% + var(--sw-arc-gap));
-}
-.sw-arc--head { justify-self: end;   margin-right: calc(var(--sw-arc-gap) * -1); }
-.sw-arc--tail { justify-self: start; margin-left:  calc(var(--sw-arc-gap) * -1);
-                justify-content: flex-end; }
-/* The fill's geometry is measured off the font's own 'y' glyph: ink 0.11em
-   tall whose bottom sits 0.01em above the baseline. An empty inline-block
-   takes its bottom margin edge as its baseline, so -0.01em lifts the bar to
-   exactly where the hooks' flat stroke runs \u2014 no seam at either join. */
-.sw-arc-m {
-  flex: 1 1 0;
-  min-width: 0;
-  align-self: baseline;
-  height: 0.11em;
-  margin-bottom: -0.01em;
-  background: currentColor;
-}
+/* ---- \u09AE\u09C0\u09A1\u09BC under-arcs (from w/x/$ segments and spec meend) ----
+ * Swarabitan's own arc, all langs: w is the opening hook, curling down from
+ * its tip into a flat, x its mirror, y that flat alone \u2014 and they join
+ * hole-free, so one run of text is a whole end (tools/align-check/glyph.html).
+ * Each end sets its hook tip on its note's centre and runs the flat toward the
+ * other end (render.ts arcInk): across cells it is cut at the mid-gap, where
+ * the next cell's run carries on (.sw-mk clips a cell half a gap past each
+ * side, as far as its spacers reach); inside one cell, at its note's edge. So
+ * a long arc extends the flat and a short one trims it off. line-height 0 sets
+ * every run's baseline the same distance below its note. The clip reaches
+ * 0.5px further so two cells' anti-aliased edges overlap instead of leaving a
+ * hairline seam between their identical flats. */
+.sw-mk { clip-path: inset(-3em calc(var(--sw-half-gap) * -1 - 0.5px)); }
+.sw-mo::after, .sw-mob::after, .sw-mos::after,
+.sw-mc::before, .sw-mcb::before, .sw-mcs::before,
+.sw-mf::before, .sw-mm::before {
+  content: 'yyyyyyyyyyyy';
+  position: absolute;
+  top: calc(100% + 0.05em);
+  font-family: Swarabitan;
+  font-size: 0.9em;
+  line-height: 0;
+  white-space: pre;
+  overflow-x: clip;
+}
+.sw-mo::after, .sw-mob::after, .sw-mos::after { content: 'wyyyyyyyyyyyy'; }
+/* rtl: a closing run cut short keeps its hook on its right edge */
+.sw-mc::before, .sw-mcb::before, .sw-mcs::before { content: 'yyyyyyyyyyyyx'; direction: rtl; }
+.sw-mo::after, .sw-mob::after { left: 50%; }
+.sw-mc::before, .sw-mcb::before { right: 50%; }
+.sw-mos::after { left: 0; }
+.sw-mcs::before { right: 0; }
+.sw-mf::before { left: 0; right: 0; }
+.sw-mm::before { left: -12em; }
+/* Inside one cell a hook gets half a note to curl in, about a third of its
+ * curl: squeezed to half width (same stroke) it lands flat at the cut, so the
+ * two flats meet level whatever the notes' widths \u2014 a small arc, not a V. */
+.sw-mob::after, .sw-mos::after, .sw-mcb::before, .sw-mcs::before { width: 100%; transform: scaleX(0.5); }
+.sw-mob::after, .sw-mos::after { transform-origin: left; }
+.sw-mcb::before, .sw-mcs::before { transform-origin: right; }
 
 /* ---- annotation content ---- */
 .sw-beat { position: relative; display: inline-block; padding: 0 0.1em; }
@@ -815,7 +882,7 @@ var SWARALIPI_PRINT_CSS = `
   .sw-sheet, .sw-staff { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #000; }
   .sw-scroll { overflow: visible !important; }
   .sw-row { break-inside: avoid; page-break-inside: avoid; }
-  .sw-part-name, .sw-header, .sw-lay { break-after: avoid-page; page-break-after: avoid; }
+  .sw-part-name, .sw-header, .sw-change { 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). */
@@ -872,11 +939,15 @@ function eventPaths(schedule) {
   }
   return paths;
 }
+var barLen = (m) => m.beatsPerBar > 0 ? m.beatsPerBar : 4;
 function abcText(s) {
   return s.replace(/[\r\n]+/g, " ").trim();
 }
 function buildAbc(schedule, lyricOf, opts) {
-  const beatsPerBar = opts.beatsPerBar > 0 ? opts.beatsPerBar : 4;
+  const meters = opts.meters?.length ? opts.meters : [{ beat: 0, beatsPerBar: opts.beatsPerBar, drums: opts.drums }];
+  const withDrums = opts.drums !== void 0 || meters.some((m2) => m2.drums !== void 0);
+  let m = 0;
+  let beatsPerBar = barLen(meters[0]);
   const tokens = [];
   const words = [];
   let barPos = 0;
@@ -890,6 +961,17 @@ function buildAbc(schedule, lyricOf, opts) {
     }
   };
   schedule.events.forEach((ev, i) => {
+    while (m + 1 < meters.length && ev.beat >= meters[m + 1].beat - EPS2) {
+      m++;
+      if (barPos > EPS2) {
+        tokens.push("|");
+        words.push("|");
+      }
+      barPos = 0;
+      const next = barLen(meters[m]);
+      if (next !== beatsPerBar) tokens.push(`[M:${ratioMeter(next)}]`);
+      beatsPerBar = next;
+    }
     if (ev.midi === null) {
       if (ev.kind === "rest") {
         tokens.push(`z${abcDuration(ev.durationBeats)}`);
@@ -908,16 +990,16 @@ function buildAbc(schedule, lyricOf, opts) {
   });
   if (tokens.length && tokens[tokens.length - 1] !== "|") tokens.push("|]");
   else if (tokens.length) tokens[tokens.length - 1] = "|]";
-  const meter = ratioMeter(beatsPerBar);
+  const meter = ratioMeter(barLen(meters[0]));
   const head = ["X:1", `M:${meter}`, "L:1/4", `Q:1/4=${Math.round(opts.bpm)}`];
-  if (opts.drums) head.push(...percMapLines(opts.drums));
+  if (withDrums) head.push(...percMapLines(meters.flatMap((x) => x.drums ?? [])));
   head.push("K:C treble");
   const melodyBody = tokens.length ? tokens.join(" ") : "z |]";
   const lines = [...head];
-  if (opts.drums) {
+  if (withDrums) {
     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));
+    lines.push("V:2 clef=perc stem=up", buildDrumVoice(schedule.totalBeats, meters));
   } else {
     lines.push(melodyBody);
     if (opts.lyrics && words.some((w) => w !== "*" && w !== "|")) lines.push(`w: ${words.join(" ")}`);
@@ -946,13 +1028,21 @@ function percMapLines(voices) {
   }
   return lines;
 }
-function buildDrumVoice(totalBeats, beatsPerBar, pattern) {
-  const n = Math.max(1, Math.ceil(totalBeats));
+function buildDrumVoice(totalBeats, meters) {
   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("|");
-  }
+  meters.forEach((m, i) => {
+    const bpb = barLen(m);
+    if (i > 0) {
+      if (tokens.length > 0 && tokens[tokens.length - 1] !== "|") tokens.push("|");
+      if (bpb !== barLen(meters[i - 1])) tokens.push(`[M:${ratioMeter(bpb)}]`);
+    }
+    const end = meters[i + 1]?.beat ?? Math.max(1, Math.ceil(totalBeats));
+    const n = Math.ceil(end - m.beat - 1e-6);
+    for (let beat = 0; beat < n; beat++) {
+      tokens.push(m.drums?.length ? DRUM_ABC[m.drums[beat % m.drums.length]].note : "z");
+      if ((beat + 1) % bpb === 0) tokens.push("|");
+    }
+  });
   if (tokens.length === 0 || tokens[tokens.length - 1] !== "|") tokens.push("|]");
   else tokens[tokens.length - 1] = "|]";
   return tokens.join(" ");
@@ -963,16 +1053,25 @@ function lyricLookup(doc) {
     return doc.parts[p]?.rows[r]?.notes[i]?.lyric;
   };
 }
-function resolveDrumTaal(doc) {
-  const id = doc.meta.taal?.id;
+function resolveDrumTaal(taal) {
+  const id = 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, lay: false });
   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 });
+  const meters = schedule.tempo.map((seg) => ({
+    beat: seg.beat,
+    beatsPerBar: opts.beatsPerBar ?? seg.taal?.numBeats ?? 4,
+    drums: opts.drums && seg.taal !== null ? drumPattern(resolveDrumTaal(seg.taal)) : void 0
+  }));
+  return buildAbc(schedule, lyricLookup(doc), {
+    bpm,
+    lyrics: opts.lyrics !== false,
+    beatsPerBar: meters[0].beatsPerBar,
+    drums: opts.drums ? meters[0].drums ?? [] : void 0,
+    meters
+  });
 }
 async function abcToSvg(abc, opts = {}, notePaths) {
   if (typeof document === "undefined") {
@@ -1051,7 +1150,7 @@ function buildTaalAbc(taal, opts = {}) {
   const voices = Array.from({ length: n }, (_, i) => src[i % src.length]);
   const bpm = Math.round(opts.bpm ?? 90);
   const head = ["X:1", `M:${ratioMeter(n)}`, "L:1/4", `Q:1/4=${bpm}`, ...percMapLines(voices), "K:C"];
-  const lines = [...head, "V:1 clef=perc stem=up", buildDrumVoice(n, n, voices)];
+  const lines = [...head, "V:1 clef=perc stem=up", buildDrumVoice(n, [{ beat: 0, beatsPerBar: n, drums: voices }])];
   if (opts.bols?.length) {
     const w = opts.bols.slice(0, n).map((b) => b.trim() ? abcText(b).replace(/\s+/g, "~") : "*");
     while (w.length < n) w.push("*");
@@ -1439,6 +1538,6 @@ function defineSwaralipiSheet(tagName = "swaralipi-sheet") {
   return ctor;
 }
 
-export { DEFAULT_NOTATOR, DEFAULT_WATERMARK, DIGITS, LABELS, LAY_LABELS, MARKS, MAX_ZOOM, MIN_ZOOM, NOTATION_FONT_URLS, SWARALIPI_CSS, SWARALIPI_PRINT_CSS, SWARALIPI_STAFF_CSS, ZOOM_STEP, abcDuration, abcToSvg, alignRows, buildAbc, buildTaalAbc, cellMatra, composeCluster, defineSwaralipiSheet, docToAbc, fitSwaralipi, groupRowIntoCells, loadLyricTransliterator, localizeDigits, midiToAbc, printSwaralipi, renderMetaHeader, renderPrintDocument, renderStaffHtml, renderStaffPrintDocument, renderTaalStaffHtml, renderToHtml, resolveArcs };
+export { DEFAULT_NOTATOR, DEFAULT_WATERMARK, DIGITS, FREE_TAAL_LABELS, LABELS, LAY_LABELS, MARKS, MAX_ZOOM, MIN_ZOOM, NOTATION_FONT_URLS, SWARALIPI_CSS, SWARALIPI_PRINT_CSS, SWARALIPI_STAFF_CSS, ZOOM_STEP, abcDuration, abcToSvg, alignRows, buildAbc, buildTaalAbc, cellMatra, composeCluster, defineSwaralipiSheet, docToAbc, fitSwaralipi, groupRowIntoCells, loadLyricTransliterator, localizeDigits, midiToAbc, printSwaralipi, renderMetaHeader, renderPrintDocument, renderStaffHtml, renderStaffPrintDocument, renderTaalStaffHtml, renderToHtml, resolveArcs };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map