@ugfoundation/swaralipi-js 0.6.1 → 0.7.1

package/dist/viewer/index.js

@@ -112,49 +112,120 @@ function groupRowIntoCells(notes) {
     if (note.halfMatra === true || acc > EPS && isIntegral(acc)) close();
   });
   close();
-  return cells;
+  return mergeStructural(absorbBrackets(cells));
+}
+var isStructural = (c) => c.kind === "bar" || c.kind === "carrier";
+function bracketEdges(cell) {
+  if (cell.kind !== "carrier") return void 0;
+  let open = false;
+  let close = false;
+  for (const note of cell.notes) {
+    if (note.raw !== void 0 && !/^[{}()[\]\s]*$/.test(note.raw)) return void 0;
+    for (const b of note.brackets ?? []) {
+      if (b.edge === "open") open = true;
+      else close = true;
+    }
+  }
+  return open || close ? { open, close } : void 0;
+}
+function absorbBrackets(cells) {
+  const out = [];
+  for (let i = 0; i < cells.length; i++) {
+    const cell = cells[i];
+    const edges = bracketEdges(cell);
+    if (edges !== void 0 && edges.open !== edges.close) {
+      const prev = out[out.length - 1];
+      const next = cells[i + 1];
+      if (edges.close && prev?.kind === "group") {
+        prev.notes = [...prev.notes, ...cell.notes];
+        continue;
+      }
+      if (edges.open && next?.kind === "group") {
+        next.notes = [...cell.notes, ...next.notes];
+        next.start = cell.start;
+        continue;
+      }
+    }
+    out.push(cell);
+  }
+  return out;
+}
+function mergeStructural(cells) {
+  const out = [];
+  for (const cell of cells) {
+    const prev = out[out.length - 1];
+    if (prev !== void 0 && isStructural(prev) && isStructural(cell)) {
+      prev.notes = [...prev.notes, ...cell.notes];
+      if (cell.kind === "bar") prev.kind = "bar";
+    } else out.push(cell);
+  }
+  return out;
+}
+var SECTION_BARS = /* @__PURE__ */ new Set(["double", "quad"]);
+var isBarCell = (cell) => cell?.kind === "bar";
+var endsSection = (cell) => isBarCell(cell) && SECTION_BARS.has(cell.notes[cell.notes.length - 1].bar);
+function alignRows(rows) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const cells of rows)
+    if (isBarCell(cells[0])) counts.set(cells.length, (counts.get(cells.length) ?? 0) + 1);
+  let width = 0;
+  let best = 0;
+  for (const [len, n] of counts)
+    if (n > best || n === best && len > width) {
+      width = len;
+      best = n;
+    }
+  if (width === 0) for (const cells of rows) width = Math.max(width, cells.length);
+  const offsets = rows.map((cells, i) => {
+    if (cells.length === 0 || cells.length >= width) return 0;
+    const prev = rows[i - 1];
+    const phraseStart = !isBarCell(cells[0]) || i === 0 || endsSection(prev?.[prev.length - 1]);
+    if (!phraseStart) return 0;
+    return Math.max(0, width - cells.length - (isBarCell(cells[cells.length - 1]) ? 0 : 1));
+  });
+  rows.forEach((cells, i) => {
+    width = Math.max(width, offsets[i] + cells.length);
+  });
+  return { width, offsets };
 }
-function resolveArcs(cells, noteCount) {
+function resolveArcs(cells) {
   const arcs = [];
   let openStart;
   let sawEnds = false;
-  const fillCols = [];
-  const openAt = (col) => {
+  const fillCells = [];
+  const openAt = (i) => {
     sawEnds = true;
-    if (openStart === void 0) openStart = col;
+    if (openStart === void 0) openStart = i;
   };
-  const closeAt = (col) => {
+  const closeAt = (i) => {
     sawEnds = true;
     if (openStart !== void 0) {
-      arcs.push({ startCol: openStart, endCol: col, openLeft: false, openRight: false });
+      arcs.push({ start: openStart, end: i, openLeft: false, openRight: false });
       openStart = void 0;
     } else {
-      arcs.push({ startCol: 1, endCol: col, openLeft: true, openRight: false });
+      arcs.push({ start: 0, end: i, openLeft: true, openRight: false });
     }
   };
-  for (const cell of cells) {
-    const firstCol = cell.start + 1;
-    const lastCol = cell.start + cell.notes.length;
-    cell.notes.forEach((note, j) => {
-      const col = cell.start + j + 1;
-      if (note.meend === "start") openAt(col);
-      else if (note.meend === "end") closeAt(col);
+  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(firstCol);
-          else if (ch === "x" || ch === "X") closeAt(lastCol);
-          else fillCols.push(firstCol, lastCol);
+          if (ch === "w" || ch === "W") openAt(i);
+          else if (ch === "x" || ch === "X") closeAt(i);
+          else fillCells.push(i);
         }
       }
-    });
-  }
+    }
+  });
   if (openStart !== void 0) {
-    arcs.push({ startCol: openStart, endCol: Math.max(noteCount, 1), openLeft: false, openRight: true });
-  } else if (!sawEnds && fillCols.length > 0) {
+    arcs.push({ start: openStart, end: Math.max(cells.length - 1, 0), openLeft: false, openRight: true });
+  } else if (!sawEnds && fillCells.length > 0) {
     arcs.push({
-      startCol: Math.min(...fillCols),
-      endCol: Math.max(...fillCols),
+      start: Math.min(...fillCells),
+      end: Math.max(...fillCells),
       openLeft: true,
       openRight: true,
       line: true
@@ -206,20 +277,43 @@ function cutGlyphs(marks, ctx) {
   return ctx.lang === "bn" ? `<span class="sw-cl" title="${ctx.marks.cut}">${marks}</span>` : `<span class="sw-cut" title="${ctx.marks.cut}"></span>`.repeat(marks.length);
 }
 function cellMatra(cell) {
-  const total = cell.notes.reduce((a, n) => a + (n.durationMatra ?? 1), 0);
-  const half = cell.notes.some((n) => n.halfMatra === true);
+  const pitched = cell.notes.filter(isPitched);
+  const total = pitched.reduce((a, n) => a + (n.durationMatra ?? 1), 0);
+  const half = pitched.some((n) => n.halfMatra === true);
   const whole = Math.floor(total + EPS);
   return { matras: half ? whole : Math.max(1, whole), half };
 }
 function cellPitchedOpts(cell) {
   const { matras, half } = cellMatra(cell);
-  const marks = rawMarks(cell.notes[0].raw, cell.notes.length);
+  const pitched = [];
+  cell.notes.forEach((n, j) => {
+    if (isPitched(n)) pitched.push(j);
+  });
+  const first = pitched[0];
+  const last = pitched[pitched.length - 1];
+  const marks = rawMarks(first === void 0 ? void 0 : cell.notes[first].raw, pitched.length);
   const aakars = marks !== void 0 && !marks.aakar ? 0 : matras;
-  return cell.notes.map((_, j) => ({
-    matras: j === cell.notes.length - 1 ? aakars : 0,
-    pre: j === 0 ? marks?.pre ?? "" : "",
-    post: marks !== void 0 ? marks.post[j] : half && j === cell.notes.length - 1 ? "i" : ""
-  }));
+  return cell.notes.map((note, j) => {
+    if (!isPitched(note)) return { matras: 0, pre: "", post: "" };
+    return {
+      matras: j === last ? aakars : 0,
+      pre: j === first ? marks?.pre ?? "" : "",
+      post: marks !== void 0 ? marks.post[pitched.indexOf(j)] : half && j === last ? "i" : ""
+    };
+  });
+}
+function cellLyricSlices(cell) {
+  if (!cell.notes.some((n) => n.lyric !== void 0)) return void 0;
+  const pitched = cell.notes.filter(isPitched);
+  if (pitched.length === 0) return cell.notes.map((n) => n.lyric ?? "");
+  const slices = new Array(pitched.length).fill("");
+  let k = 0;
+  for (const note of cell.notes) {
+    const at = Math.min(k, pitched.length - 1);
+    slices[at] += note.lyric ?? "";
+    if (isPitched(note)) k++;
+  }
+  return slices;
 }
 function renderPitchedInner(note, opts, ctx) {
   let inner = bracketGlyphs(note, "open");
@@ -297,64 +391,56 @@ function renderAnnotation(notes, ctx) {
 function lyricText(s, ctx) {
   return s.split("\u09F9").map((part) => part === "" ? "" : ctx.tr(part)).join(ctx.marks.melisma);
 }
-function renderRow(row, partIdx, rowIdx, ctx) {
+var COL_BASE = 2;
+function renderNote(note, kind, opts, ctx) {
+  if (note.bar !== void 0) return renderBarInner(note);
+  if (kind === "group" && opts !== void 0) return renderPitchedInner(note, 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 cls = [
+    "sw-arc",
+    arc.openLeft || open ? "sw-arc--openl" : "",
+    arc.openRight || open ? "sw-arc--openr" : ""
+  ].filter(Boolean).join(" ");
+  const left = open || arc.openLeft ? "" : '<i class="sw-arc-l">w</i>';
+  const right = open || arc.openRight ? "" : '<i class="sw-arc-r">x</i>';
+  const from = offset + arc.start + COL_BASE;
+  const to = offset + arc.end + COL_BASE + 1;
+  return `<span class="${cls}" style="grid-column:${from} / ${to}">${left}<i class="sw-arc-m"></i>${right}</span>`;
+}
+function renderRow(row, partIdx, rowIdx, offset, ctx) {
   const cells = groupRowIntoCells(row.notes);
-  const arcs = resolveArcs(cells, row.notes.length);
-  const above = [];
-  const notation = [];
-  const below = [];
-  const lyric = [];
-  for (const cell of cells) {
-    const firstCol = cell.start + 1;
-    const lastCol = cell.start + cell.notes.length;
-    const cellSpan = lastCol > firstCol ? `grid-column:${firstCol} / ${lastCol + 1}` : `grid-column:${firstCol}`;
+  const out = [];
+  if (row.label !== void 0)
+    out.push(`<span class="sw-label">${escapeHtml(ctx.tr(row.label))}</span>`);
+  cells.forEach((cell, ci) => {
+    const col = offset + ci + COL_BASE;
     const opts = cell.kind === "group" ? cellPitchedOpts(cell) : [];
-    cell.notes.forEach((note, j) => {
-      const col = cell.start + j + 1;
+    const barCls = cell.kind === "bar" ? " sw-bar-cell" : "";
+    const notes = cell.notes.map((note, j) => {
       const path = `${partIdx}.${rowIdx}.${cell.start + j}`;
-      const cellEdges = `${j === 0 ? " sw-cs" : ""}${j === cell.notes.length - 1 ? " sw-ce" : ""}`;
-      if (cell.kind === "bar") {
-        notation.push(
-          `<span class="sw-bar sw-bar--${note.bar}${cellEdges}" data-note="${path}" style="grid-column:${col}">${renderBarInner(note)}</span>`
-        );
-      } else if (cell.kind === "group") {
-        notation.push(
-          `<span class="sw-n${cellEdges}" data-note="${path}" style="grid-column:${col}">${renderPitchedInner(note, opts[j], ctx)}</span>`
-        );
-      } else {
-        const raw = rawDisplay(note);
-        const inner = bracketGlyphs(note, "open") + (raw !== void 0 ? `<span class="sw-raw" title="${escapeHtml(raw)}">${escapeHtml(raw)}</span>` : "") + bracketGlyphs(note, "close");
-        if (inner !== "") {
-          notation.push(
-            `<span class="sw-n sw-carrier${cellEdges}" data-note="${path}" style="grid-column:${col}">${inner}</span>`
-          );
-        }
-      }
-      if (note.lyric !== void 0) {
-        lyric.push(
-          `<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) {
-        above.push(`<span class="sw-above" style="${cellSpan}">${renderAnnotation(note.above, ctx)}</span>`);
-      }
-      const nonArc = (note.below ?? []).filter((b) => !isArcRaw(b.raw));
-      if (nonArc.length > 0) {
-        below.push(`<span class="sw-below" style="${cellSpan}">${renderAnnotation(nonArc, ctx)}</span>`);
-      }
-    });
-  }
-  for (const arc of arcs) {
-    const cls = [
-      "sw-arc",
-      arc.openLeft ? "sw-arc--openl" : "",
-      arc.openRight ? "sw-arc--openr" : "",
-      arc.line === true ? "sw-arc--line" : ""
-    ].filter(Boolean).join(" ");
-    below.push(`<span class="${cls}" style="grid-column:${arc.startCol} / ${arc.endCol + 1}"></span>`);
-  }
-  const label = row.label !== void 0 ? `<span class="sw-label">${escapeHtml(ctx.tr(row.label))}</span>` : "";
-  return `<div class="sw-row">${label}<div class="sw-grid">${above.join("")}${notation.join("")}${below.join("")}${lyric.join("")}</div></div>`;
+      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>`;
+    }).join("");
+    out.push(`<span class="sw-cell${barCls}" 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("");
+      out.push(`<span class="sw-lyr" style="grid-column:${col}">${html}</span>`);
+    }
+    const above = cell.notes.flatMap((n) => n.above ?? []);
+    if (above.length > 0)
+      out.push(`<span class="sw-above" style="grid-column:${col}">${renderAnnotation(above, ctx)}</span>`);
+    const below = cell.notes.flatMap((n) => (n.below ?? []).filter((b) => !isArcRaw(b.raw)));
+    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) {
   return renderMetaHeader(meta, ctx.lang, ctx.tr);
@@ -377,19 +463,52 @@ function renderToHtml(doc, opts = {}) {
   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 layout = alignRows(doc.parts.flatMap((p) => p.rows.map((r) => groupRowIntoCells(r.notes))));
+  const tracks = `grid-template-columns:max-content repeat(${layout.width},minmax(calc(var(--sw-matra, 1.4em) * var(--sw-tight, 1)),max-content))`;
   const out = [`<div class="sw-sheet" lang="${lang}">`];
   if (opts.showHeader !== false) out.push(renderHeader(doc.meta, ctx));
+  out.push(`<div class="sw-scroll"><div class="sw-block" style="${tracks}">`);
+  let n = 0;
   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) => out.push(renderRow(row, p, r, ctx)));
+    part.rows.forEach((row, r) => out.push(renderRow(row, p, r, layout.offsets[n++], ctx)));
     out.push("</section>");
   });
-  out.push("</div>");
+  out.push("</div></div></div>");
   return out.join("");
 }
 
+// src/viewer/fit.ts
+function fitSwaralipi(root, minScale = 0, zoom = 1, minSpacing = 0.35, minSize = 12) {
+  const sheets = root.querySelectorAll(".sw-sheet");
+  for (const sheet of sheets) {
+    const scroll = sheet.querySelector(".sw-scroll");
+    const block = sheet.querySelector(".sw-block");
+    if (scroll === null || block === null) continue;
+    sheet.style.removeProperty("--sw-size");
+    sheet.style.removeProperty("--sw-tight");
+    const available = scroll.clientWidth;
+    let natural = block.scrollWidth;
+    if (available === 0 || natural === 0) continue;
+    for (const step of [0.75, 0.5, 0.25, 0]) {
+      if (natural <= available || minSpacing >= 1) break;
+      sheet.style.setProperty("--sw-tight", String(minSpacing + (1 - minSpacing) * step));
+      natural = block.scrollWidth;
+    }
+    const base = parseFloat(getComputedStyle(sheet).fontSize);
+    let fit = natural > available ? Math.max(minScale, available / natural) : 1;
+    if (base > 0 && minSize > 0) fit = Math.max(fit, Math.min(1, minSize / base));
+    const scale = fit * zoom;
+    if (scale === 1) continue;
+    sheet.style.setProperty("--sw-size", `${(base * scale).toFixed(3)}px`);
+  }
+}
+var MIN_ZOOM = 0.5;
+var MAX_ZOOM = 3;
+var ZOOM_STEP = 1.2;
+
 // src/viewer/styles.ts
 var NOTATION_FONT_URLS = {
   Swarabitan: "https://lipighor.pages.dev/swarabitan/Swarabitan.ttf",
@@ -419,7 +538,10 @@ ${FONT_FACES}
   margin: 0 0 0.75em;
   padding: 0 0 0.5em;
   border-bottom: 1px solid var(--sw-rule, rgba(128, 128, 128, 0.35));
-  font-size: 0.95em;
+  /* Scales with the sheet, but never below the floor: fitSwaralipi shrinks
+     .sw-sheet's font-size to fit the notation, and the metadata is prose \u2014
+     it has no columns to align and must stay readable on a phone. */
+  font-size: max(0.95em, var(--sw-header-min, 0.95rem));
 }
 .sw-meta-row { display: flex; gap: 0.3em; }
 .sw-meta-label { font-weight: 600; min-width: 4.5em; }
@@ -427,30 +549,42 @@ ${FONT_FACES}
 
 .sw-part-name { font-size: 0.85em; font-weight: 600; margin: 1em 0 0.2em; opacity: 0.85; }
 
-/* ---- row grid: above / notation / below(arcs) / lyric ---- */
-.sw-row {
-  display: flex;
-  align-items: flex-start;
-  overflow-x: auto;
-  padding: 0.4em 0;
+/* ---- block grid: ONE column set for the whole sheet ----
+ * NLTR emits a song as a single html table, which is why its lines align
+ * down the page. Same here: .sw-block owns the tracks, every .sw-row
+ * borrows them with subgrid, and .sw-part is display:contents so section
+ * headings sit in the same grid instead of breaking it. */
+.sw-scroll { overflow-x: auto; }
+.sw-block {
+  display: grid;
+  column-gap: calc(var(--sw-cell-gap, 0.4em) * var(--sw-tight, 1));
+  align-items: end;
+  width: max-content;
 }
-.sw-label { flex: none; margin-right: 0.8em; font-weight: 600; }
-.sw-grid {
+.sw-part { display: contents; }
+.sw-row {
+  grid-column: 1 / -1;
   display: grid;
+  grid-template-columns: subgrid;
   grid-template-rows: auto auto auto auto;
-  grid-auto-columns: max-content;
   align-items: end;
+  padding: 0.4em 0;
 }
-.sw-above   { grid-row: 1; font-size: 0.62em; justify-self: start; white-space: nowrap; padding-left: 0.2em; }
-.sw-n       { grid-row: 2; justify-self: center; white-space: nowrap; }
+.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; 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
- * and above-spans crossing cells stay continuous */
-.sw-cs { padding-left: var(--sw-cell-gap, 0.55em); }
+.sw-lyr     { grid-row: 4; padding-top: 0.3em; }
+.sw-below   { font-size: 0.62em; justify-self: center; white-space: nowrap; }
 
 /* ---- notation clusters & marks ---- */
 .sw-cl { position: relative; display: inline-block; }
@@ -519,31 +653,41 @@ ${FONT_FACES}
   opacity: 0.55;
 }
 
-/* ---- 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 */
+/* ---- bars: dari (A) and danda (l/L) Swarabitan glyphs, all langs ---- */
 .sw-bar {
-  grid-row: 2;
   font-family: Swarabitan, var(--sw-font, sans-serif);
   white-space: nowrap;
-  padding-right: 0.1em;
 }
 .sw-bar--quad { letter-spacing: 0.15em; }
+/* a bar owns a whole column but needs no matra of width */
+.sw-bar-cell { min-width: 0; }
 
-/* ---- under-arcs (slurs decoded from w/x segments and meend) ---- */
+/* ---- \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 {
-  align-self: start;
-  height: 0.4em;
-  margin: 0.05em 0.25em 0;
-  border: 0.09em solid currentColor;
-  border-top: none;
-  border-bottom-left-radius: 0.6em;
-  border-bottom-right-radius: 0.6em;
-  opacity: 0.85;
-}
-.sw-arc--openl { border-left: none; border-bottom-left-radius: 0; }
-.sw-arc--openr { border-right: none; border-bottom-right-radius: 0; }
-.sw-arc--line { border-left: none; border-right: none; border-radius: 0; height: 0.22em; }
+  display: flex;
+  align-items: baseline;
+  line-height: 1;
+  font-family: Swarabitan, var(--sw-font, sans-serif);
+  font-size: 0.9em;
+}
+.sw-arc-l, .sw-arc-r { flex: none; font-style: normal; }
+/* 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;
+}
 
 /* ---- annotation content ---- */
 .sw-beat { position: relative; display: inline-block; padding: 0 0.1em; }
@@ -587,8 +731,8 @@ var SWARALIPI_PRINT_CSS = `
 @page { margin: 16mm; }
 @media print {
   .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-scroll { overflow: visible !important; }
+  .sw-row { break-inside: avoid; page-break-inside: avoid; }
   .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
@@ -887,12 +1031,17 @@ ${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; }
+/* The printable width of A4 at the @page margin above. The sheet is one grid
+   with one natural width, so the fit script needs a real page-sized box to
+   measure against \u2014 the iframe's own width is not it. */
+body { width: 178mm; color: #111; background: #fff; -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>${top}${bodyHtml}${bottom}</body>
+<body>${top}${bodyHtml}${bottom}
+<script>window.__swFit=function(){(${fitSwaralipi.toString()})(document,0.45,1,undefined,0)};window.__swFit()</script>
+</body>
 </html>`;
 }
 function renderPrintDocument(doc, opts = {}) {
@@ -935,6 +1084,7 @@ function printHtmlInIframe(html) {
       if (printed) return;
       printed = true;
       try {
+        win.__swFit?.();
         win.focus();
         win.print();
       } catch {
@@ -981,7 +1131,7 @@ function ensureNotationFonts() {
 var sharedSheet;
 function createElementClass() {
   return class SwaralipiSheet extends HTMLElement {
-    static observedAttributes = ["src", "lang", "hide-header"];
+    static observedAttributes = ["src", "lang", "hide-header", "min-spacing", "min-size"];
     #doc;
     #root;
     #adopted = false;
@@ -990,6 +1140,9 @@ function createElementClass() {
     #translitLang;
     #renderSeq = 0;
     #staffOptions = {};
+    #resize;
+    #fittedAt = -1;
+    #zoom = 1;
     validate = false;
     constructor() {
       super();
@@ -1033,15 +1186,77 @@ function createElementClass() {
         if (newValue !== null) void this.#load(newValue);
         return;
       }
+      if (name === "min-spacing" || name === "min-size") {
+        this.fit();
+        return;
+      }
       if (name === "lang") this.#ensureTransliterator();
       this.#render();
     }
     connectedCallback() {
       this.#ensureTransliterator();
       this.#render();
+      if (this.#resize === void 0 && typeof ResizeObserver !== "undefined") {
+        this.#resize = new ResizeObserver(([entry]) => {
+          const w = entry?.contentRect.width ?? -1;
+          if (w === this.#fittedAt) return;
+          this.#fittedAt = w;
+          this.#fit();
+        });
+        this.#resize.observe(this);
+      }
     }
     disconnectedCallback() {
       this.#abort?.abort();
+      this.#resize?.disconnect();
+      this.#resize = void 0;
+    }
+    /** Scale the notation to fit the available width, times the zoom factor. */
+    #fit() {
+      fitSwaralipi(this.#root, 0, this.#zoom, this.minSpacing, this.minSize);
+    }
+    /** Numeric attribute, or undefined for fitSwaralipi's own default. */
+    #attrNum(name) {
+      const value = parseFloat(this.getAttribute(name) ?? "");
+      return Number.isFinite(value) ? value : void 0;
+    }
+    #setAttrNum(name, value) {
+      if (value === void 0) this.removeAttribute(name);
+      else this.setAttribute(name, String(value));
+    }
+    get minSpacing() {
+      return this.#attrNum("min-spacing");
+    }
+    set minSpacing(value) {
+      this.#setAttrNum("min-spacing", value);
+    }
+    get minSize() {
+      return this.#attrNum("min-size");
+    }
+    set minSize(value) {
+      this.#setAttrNum("min-size", value);
+    }
+    /** Re-fit the current render (public for hosts that resize the sheet
+     * themselves, e.g. a tab that was hidden while the document loaded). */
+    fit() {
+      this.#fittedAt = -1;
+      this.#fit();
+    }
+    get zoom() {
+      return this.#zoom;
+    }
+    set zoom(factor) {
+      this.#zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, factor));
+      this.#fit();
+    }
+    zoomIn() {
+      this.zoom = this.#zoom * ZOOM_STEP;
+    }
+    zoomOut() {
+      this.zoom = this.#zoom / ZOOM_STEP;
+    }
+    resetZoom() {
+      this.zoom = 1;
     }
     async #load(url) {
       this.#abort?.abort();
@@ -1073,6 +1288,7 @@ function createElementClass() {
     }
     #render() {
       const seq = ++this.#renderSeq;
+      this.#zoom = 1;
       if (this.#doc === void 0) {
         this.#root.innerHTML = this.#styleFallback();
         return;
@@ -1091,6 +1307,7 @@ function createElementClass() {
         transliterate: this.#translitLang === lang ? this.#translit : void 0
       });
       this.#root.innerHTML = this.#styleFallback() + html;
+      this.#fit();
     }
     #renderError(message) {
       const div = document.createElement("div");
@@ -1135,6 +1352,6 @@ function defineSwaralipiSheet(tagName = "swaralipi-sheet") {
   return ctor;
 }
 
-export { DEFAULT_NOTATOR, DEFAULT_WATERMARK, DIGITS, LABELS, MARKS, NOTATION_FONT_URLS, SWARALIPI_CSS, SWARALIPI_PRINT_CSS, SWARALIPI_STAFF_CSS, abcDuration, abcToSvg, buildAbc, buildTaalAbc, cellMatra, composeCluster, defineSwaralipiSheet, docToAbc, groupRowIntoCells, loadLyricTransliterator, localizeDigits, midiToAbc, printSwaralipi, renderMetaHeader, renderPrintDocument, renderStaffHtml, renderStaffPrintDocument, renderTaalStaffHtml, renderToHtml, resolveArcs };
+export { DEFAULT_NOTATOR, DEFAULT_WATERMARK, DIGITS, 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