@ugfoundation/swaralipi-js 0.7.0 → 0.7.2

package/dist/viewer/index.d.cts

@@ -184,22 +184,33 @@ declare function renderToHtml(doc: Swaralipi, opts?: RenderOptions): string;
  * top.
  *
  * The whole document is one grid (see render.ts), so a sheet has exactly one
- * natural width — a wide তাল overruns a phone or an A4 page. Everything
- * inside is em-relative, so scaling the sheet's `font-size` scales the
- * notation without disturbing the column alignment; a `transform` would
- * scale it too, but would also break print pagination.
+ * natural width — a wide তাল overruns a phone or an A4 page. Two levers, in
+ * this order, because they cost different things:
+ *
+ *  1. **Spacing.** `--sw-cell-gap` and the `--sw-matra` column floor are
+ *     25–35 % of that natural width (measured over the corpus), and giving
+ *     them up costs only air between the columns — the alignment is
+ *     untouched, since every row still borrows the same tracks. Compressed
+ *     only as far as the container demands, down to `minSpacing`.
+ *  2. **Type size.** Everything inside is em-relative, so scaling the sheet's
+ *     `font-size` scales the notation without disturbing the columns (a
+ *     `transform` would scale it too, but would also break print
+ *     pagination). This is what actually makes the glyphs smaller, so it
+ *     runs second and stops at `minSize` px — past that the block scrolls
+ *     inside `.sw-scroll` rather than becoming unreadable. It also runs the
+ *     other way: a sheet narrower than its container grows (to 2x) rather
+ *     than leaving dead space to the right of every row.
  *
- * Free-scaling by default (no floor): the sheet should always fit on first
- * paint rather than fall back to `.sw-scroll`'s horizontal scrollbar — a
- * `minScale` floor exists only for print, where paper cannot scroll.
  * `zoom` (default 1) multiplies the fit scale so callers can zoom in past
- * fit-to-width; past that point `.sw-scroll` panning is expected, same as a
- * photo viewer.
+ * fit-to-width, or below the readability floor deliberately; past that point
+ * `.sw-scroll` panning is expected, same as a photo viewer. `minScale` is a
+ * second, relative floor used by print, where paper cannot scroll.
  *
  * Self-contained on purpose — print.ts serialises this function into the
- * print page, so it must not close over anything or import anything.
+ * print page, so it must not close over anything or import anything (the
+ * defaults below are literals for the same reason).
  */
-declare function fitSwaralipi(root: Document | ShadowRoot | HTMLElement, minScale?: number, zoom?: number): void;
+declare function fitSwaralipi(root: Document | ShadowRoot | HTMLElement, minScale?: number, zoom?: number, minSpacing?: number, minSize?: number): void;
 /** Zoom bounds/step for zoomIn()/zoomOut()/the `zoom` property — exported so
  * a consumer's own zoom UI (e.g. a slider) can match the element's clamp. */
 declare const MIN_ZOOM = 0.5;
@@ -215,6 +226,11 @@ declare const ZOOM_STEP = 1.2;
  *   --sw-font       font stack (default: Noto Sans Bengali + system Bengali)
  *   --sw-size       base font size
  *   --sw-cell-gap   horizontal gap between source cells
+ *   --sw-tight      0–1 multiplier on the column spacing (gap + matra floor);
+ *                   set by fitSwaralipi to compress before shrinking type
+ *   --sw-matra      minimum width of one matra column
+ *   --sw-header-min floor for the নাম/তাল/আবর্তন header (it must stay legible
+ *                   when the notation is scaled down to fit a phone)
  *   --sw-hl         player-highlight background (P2.3)
  *   --sw-rule       header rule / muted line color
  *
@@ -492,6 +508,13 @@ interface SwaralipiSheetElement extends HTMLElement {
     staffOptions: StaffOptions;
     /** Re-fit the notation to the element's current width. */
     fit(): void;
+    /** How far the column spacing may be compressed to fit a narrow container
+     * before the type is scaled down at all, 0–1 (attribute `min-spacing`;
+     * undefined = the library default). Lower = tighter columns, bigger glyphs. */
+    minSpacing: number | undefined;
+    /** Smallest notation size in px the fit may produce (attribute `min-size`);
+     * past it the sheet scrolls horizontally instead of shrinking further. */
+    minSize: number | undefined;
     /** Zoom factor on top of fit-to-width (1 = fit; clamped to
      * [MIN_ZOOM, MAX_ZOOM]). Assigning re-fits immediately. Resets to 1 on the
      * next doc/lang re-render — a resize alone (fit()) does not reset it. */

package/dist/viewer/index.d.ts

@@ -184,22 +184,33 @@ declare function renderToHtml(doc: Swaralipi, opts?: RenderOptions): string;
  * top.
  *
  * The whole document is one grid (see render.ts), so a sheet has exactly one
- * natural width — a wide তাল overruns a phone or an A4 page. Everything
- * inside is em-relative, so scaling the sheet's `font-size` scales the
- * notation without disturbing the column alignment; a `transform` would
- * scale it too, but would also break print pagination.
+ * natural width — a wide তাল overruns a phone or an A4 page. Two levers, in
+ * this order, because they cost different things:
+ *
+ *  1. **Spacing.** `--sw-cell-gap` and the `--sw-matra` column floor are
+ *     25–35 % of that natural width (measured over the corpus), and giving
+ *     them up costs only air between the columns — the alignment is
+ *     untouched, since every row still borrows the same tracks. Compressed
+ *     only as far as the container demands, down to `minSpacing`.
+ *  2. **Type size.** Everything inside is em-relative, so scaling the sheet's
+ *     `font-size` scales the notation without disturbing the columns (a
+ *     `transform` would scale it too, but would also break print
+ *     pagination). This is what actually makes the glyphs smaller, so it
+ *     runs second and stops at `minSize` px — past that the block scrolls
+ *     inside `.sw-scroll` rather than becoming unreadable. It also runs the
+ *     other way: a sheet narrower than its container grows (to 2x) rather
+ *     than leaving dead space to the right of every row.
  *
- * Free-scaling by default (no floor): the sheet should always fit on first
- * paint rather than fall back to `.sw-scroll`'s horizontal scrollbar — a
- * `minScale` floor exists only for print, where paper cannot scroll.
  * `zoom` (default 1) multiplies the fit scale so callers can zoom in past
- * fit-to-width; past that point `.sw-scroll` panning is expected, same as a
- * photo viewer.
+ * fit-to-width, or below the readability floor deliberately; past that point
+ * `.sw-scroll` panning is expected, same as a photo viewer. `minScale` is a
+ * second, relative floor used by print, where paper cannot scroll.
  *
  * Self-contained on purpose — print.ts serialises this function into the
- * print page, so it must not close over anything or import anything.
+ * print page, so it must not close over anything or import anything (the
+ * defaults below are literals for the same reason).
  */
-declare function fitSwaralipi(root: Document | ShadowRoot | HTMLElement, minScale?: number, zoom?: number): void;
+declare function fitSwaralipi(root: Document | ShadowRoot | HTMLElement, minScale?: number, zoom?: number, minSpacing?: number, minSize?: number): void;
 /** Zoom bounds/step for zoomIn()/zoomOut()/the `zoom` property — exported so
  * a consumer's own zoom UI (e.g. a slider) can match the element's clamp. */
 declare const MIN_ZOOM = 0.5;
@@ -215,6 +226,11 @@ declare const ZOOM_STEP = 1.2;
  *   --sw-font       font stack (default: Noto Sans Bengali + system Bengali)
  *   --sw-size       base font size
  *   --sw-cell-gap   horizontal gap between source cells
+ *   --sw-tight      0–1 multiplier on the column spacing (gap + matra floor);
+ *                   set by fitSwaralipi to compress before shrinking type
+ *   --sw-matra      minimum width of one matra column
+ *   --sw-header-min floor for the নাম/তাল/আবর্তন header (it must stay legible
+ *                   when the notation is scaled down to fit a phone)
  *   --sw-hl         player-highlight background (P2.3)
  *   --sw-rule       header rule / muted line color
  *
@@ -492,6 +508,13 @@ interface SwaralipiSheetElement extends HTMLElement {
     staffOptions: StaffOptions;
     /** Re-fit the notation to the element's current width. */
     fit(): void;
+    /** How far the column spacing may be compressed to fit a narrow container
+     * before the type is scaled down at all, 0–1 (attribute `min-spacing`;
+     * undefined = the library default). Lower = tighter columns, bigger glyphs. */
+    minSpacing: number | undefined;
+    /** Smallest notation size in px the fit may produce (attribute `min-size`);
+     * past it the sheet scrolls horizontally instead of shrinking further. */
+    minSize: number | undefined;
     /** Zoom factor on top of fit-to-width (1 = fit; clamped to
      * [MIN_ZOOM, MAX_ZOOM]). Assigning re-fits immediately. Resets to 1 on the
      * next doc/lang re-render — a resize alone (fit()) does not reset it. */

package/dist/viewer/index.js

@@ -464,7 +464,7 @@ function renderToHtml(doc, opts = {}) {
   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(var(--sw-matra, 1.4em),max-content))`;
+  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}">`);
@@ -481,20 +481,35 @@ function renderToHtml(doc, opts = {}) {
 }
 
 // src/viewer/fit.ts
-function fitSwaralipi(root, minScale = 0, zoom = 1) {
+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;
-    const natural = block.scrollWidth;
+    let natural = block.scrollWidth;
     if (available === 0 || natural === 0) continue;
-    const fit = natural > available ? Math.max(minScale, available / natural) : 1;
+    if (natural > available && minSpacing < 1) {
+      let loose = minSpacing;
+      let tight = 1;
+      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;
+        else tight = mid;
+      }
+      sheet.style.setProperty("--sw-tight", String(loose));
+      natural = block.scrollWidth;
+    }
+    const base = parseFloat(getComputedStyle(sheet).fontSize);
+    if (!(base > 0)) continue;
+    let fit = Math.max(minScale, Math.min((available - 1) / natural, 2));
+    if (minSize > 0) fit = Math.max(fit, Math.min(1, minSize / base));
     const scale = fit * zoom;
     if (scale === 1) continue;
-    const base = parseFloat(getComputedStyle(sheet).fontSize);
     sheet.style.setProperty("--sw-size", `${(base * scale).toFixed(3)}px`);
   }
 }
@@ -531,7 +546,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; }
@@ -547,7 +565,7 @@ ${FONT_FACES}
 .sw-scroll { overflow-x: auto; }
 .sw-block {
   display: grid;
-  column-gap: var(--sw-cell-gap, 0.4em);
+  column-gap: calc(var(--sw-cell-gap, 0.4em) * var(--sw-tight, 1));
   align-items: end;
   width: max-content;
 }
@@ -1030,7 +1048,7 @@ body { width: 178mm; color: #111; background: #fff; -webkit-print-color-adjust:
 </style>
 </head>
 <body>${top}${bodyHtml}${bottom}
-<script>window.__swFit=function(){(${fitSwaralipi.toString()})(document,0.45)};window.__swFit()</script>
+<script>window.__swFit=function(){(${fitSwaralipi.toString()})(document,0.45,1,undefined,0)};window.__swFit()</script>
 </body>
 </html>`;
 }
@@ -1121,7 +1139,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;
@@ -1176,6 +1194,10 @@ 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();
     }
@@ -1199,7 +1221,28 @@ function createElementClass() {
     }
     /** Scale the notation to fit the available width, times the zoom factor. */
     #fit() {
-      fitSwaralipi(this.#root, 0, this.#zoom);
+      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). */
@@ -1273,6 +1316,9 @@ 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");