@ugfoundation/swaralipi-js 0.8.1 → 0.8.2

package/dist/viewer/index.d.cts

@@ -116,6 +116,9 @@ interface Arc {
     /** 0-based index of the arc's first / last **cell** within the row. */
     start: number;
     end: number;
+    /** Index, within that cell's notes, of the note the arc hangs from / into. */
+    startNote: number;
+    endNote: number;
     /** True when the matching end lies on a previous / following system. */
     openLeft: boolean;
     openRight: boolean;
@@ -123,11 +126,14 @@ interface Arc {
     line?: boolean;
 }
 /**
- * Resolve under-arcs for one row, in **cell** indices (cells are the grid's
- * columns). Sources, scanned left→right:
- *  - below-annotation raws: `w` opens at its cell, `x` closes at its cell
- *    ("xw" in one cell = close-then-open, in the order typed);
- *  - spec `meend: 'start' | 'end'` fields feed the same scan.
+ * Resolve under-arcs for one row down to the **note** each end hangs from, so a
+ * slur inside one half-matra cell (মজ্ঞা) still runs centre to centre. Sources,
+ * scanned left→right:
+ *  - spec `meend: 'start' | 'end'` — exact notes;
+ *  - below-annotation raws, which belong to the whole cell (NLTR types them
+ *    centred under the column): `w` opens on the cell's first sounded note,
+ *    `x` closes on its last, `$` (Swarabitan's short in-cell arc) runs first to
+ *    last, and `xw` — close, then re-open — meets in the middle instead.
  * Unmatched `x` → arc from cell 0 with a squared-off (open) left end;
  * unclosed `w` → arc to the last cell with an open right end — both match
  * the print's behavior when an arc continues across a system wrap.

package/dist/viewer/index.d.ts

@@ -116,6 +116,9 @@ interface Arc {
     /** 0-based index of the arc's first / last **cell** within the row. */
     start: number;
     end: number;
+    /** Index, within that cell's notes, of the note the arc hangs from / into. */
+    startNote: number;
+    endNote: number;
     /** True when the matching end lies on a previous / following system. */
     openLeft: boolean;
     openRight: boolean;
@@ -123,11 +126,14 @@ interface Arc {
     line?: boolean;
 }
 /**
- * Resolve under-arcs for one row, in **cell** indices (cells are the grid's
- * columns). Sources, scanned left→right:
- *  - below-annotation raws: `w` opens at its cell, `x` closes at its cell
- *    ("xw" in one cell = close-then-open, in the order typed);
- *  - spec `meend: 'start' | 'end'` fields feed the same scan.
+ * Resolve under-arcs for one row down to the **note** each end hangs from, so a
+ * slur inside one half-matra cell (মজ্ঞা) still runs centre to centre. Sources,
+ * scanned left→right:
+ *  - spec `meend: 'start' | 'end'` — exact notes;
+ *  - below-annotation raws, which belong to the whole cell (NLTR types them
+ *    centred under the column): `w` opens on the cell's first sounded note,
+ *    `x` closes on its last, `$` (Swarabitan's short in-cell arc) runs first to
+ *    last, and `xw` — close, then re-open — meets in the middle instead.
  * Unmatched `x` → arc from cell 0 with a squared-off (open) left end;
  * unclosed `w` → arc to the last cell with an open right end — both match
  * the print's behavior when an arc continues across a system wrap.

package/dist/viewer/index.js

@@ -194,42 +194,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 +259,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 +463,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 +475,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 +491,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) {
@@ -515,7 +548,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 +556,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;
@@ -625,31 +658,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 +717,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 +758,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 +778,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; }