@ugfoundation/swaralipi-js 0.9.1 → 0.10.0

package/dist/viewer/index.d.cts

@@ -1,6 +1,6 @@
 import { O as Octave, a as SvaraLetter, N as Note, M as Meta, S as Swaralipi, T as Taal } from '../schema-Cf_epUIC.cjs';
 import { L as Lay } from '../lay-CfDlPhH2.cjs';
-import { D as DrumVoice, S as Schedule, P as PlayEvent } from '../schedule-CU-VECDH.cjs';
+import { D as DrumVoice, S as Schedule, P as PlayEvent } from '../schedule-IBu8lr-3.cjs';
 import 'zod';
 import 'tone';
 
@@ -34,6 +34,13 @@ declare const LAY_LABELS: Record<GridLang, Record<Lay, string>>;
 /** Printed where a row switches to free rhythm (`row.taal: null`) with no
  * `taalName` of its own. bn is the converter's canonical মুক্তছন্দ. */
 declare const FREE_TAAL_LABELS: Record<GridLang, string>;
+/** The practice surface's words: the sheet's own accessible name (it says
+ * what a tap does), a repeat being on, and the learner's turn to sing. */
+declare const PRACTICE_LABELS: Record<GridLang, {
+    sheet: string;
+    repeat: string;
+    turn: string;
+}>;
 /** A composed notation cluster: the font's ASCII text plus any residual CSS
  * classes the font itself cannot express (only the bn ati-octave dot). */
 interface Cluster {
@@ -209,6 +216,9 @@ declare const ZOOM_STEP = 1.2;
  * themselves: `<style>${SWARALIPI_CSS}</style>` next to `renderToHtml()`.
  *
  * Theming hooks (CSS custom properties, all optional):
+ *   --sw-loop       repeated-line band; --sw-loop-edge its edge, the learner's
+ *                   hollow highlight and "your turn" tag (--sw-turn-ink on it)
+ *   --sw-row-hover  hover tint of a tappable line; --sw-focus the focus ring
  *   --sw-font       font stack (default: Noto Sans Bengali + system Bengali)
  *   --sw-size       base font size
  *   --sw-cell-gap   horizontal gap between source cells
@@ -501,9 +511,16 @@ interface SwaralipiSheetElement extends HTMLElement {
     doc: Swaralipi | undefined;
     /** Parse documents against the spec schema before rendering. */
     validate: boolean;
-    /** Add the player-highlight class to the note at "part.row.note". */
-    highlight(path: string): HTMLElement | null;
+    /** Add the player-highlight class to the note at "part.row.note" — drawn
+     * hollow when it is the learner's turn to sing it. */
+    highlight(path: string, yourTurn?: boolean): HTMLElement | null;
     clearHighlights(): void;
+    /** Shade the repeated lines (`part.row`, inclusive; null clears) and mark
+     * the learner's turn on them. The player's bindSheet calls this. */
+    markLoop(loop: {
+        from: string;
+        to: string;
+    } | null, yourTurn?: boolean): void;
     /** Open the print dialog (→ "Save as PDF") for the current document. */
     print(options?: PrintOptions): void;
     /** Options for the `staff` language (instrument label, tonic, bpm…). */
@@ -551,4 +568,4 @@ type Transliterator = (bengaliText: string) => string;
  */
 declare function loadLyricTransliterator(lang: ViewerLang): Promise<Transliterator | undefined>;
 
-export { type AbcMeter, type Arc, type Cell, type Cluster, type ComposeOptions, DEFAULT_NOTATOR, DEFAULT_WATERMARK, DIGITS, FREE_TAAL_LABELS, type GridLang, LABELS, LAY_LABELS, type Layout, MARKS, MAX_ZOOM, MIN_ZOOM, NOTATION_FONT_URLS, type PrintOptions, type RenderOptions, SWARALIPI_CSS, SWARALIPI_PRINT_CSS, SWARALIPI_STAFF_CSS, type StaffOptions, type SwaralipiSheetElement, type TaalStaffOptions, type Transliterator, type ViewerLang, 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 { type AbcMeter, type Arc, type Cell, type Cluster, type ComposeOptions, DEFAULT_NOTATOR, DEFAULT_WATERMARK, DIGITS, FREE_TAAL_LABELS, type GridLang, LABELS, LAY_LABELS, type Layout, MARKS, MAX_ZOOM, MIN_ZOOM, NOTATION_FONT_URLS, PRACTICE_LABELS, type PrintOptions, type RenderOptions, SWARALIPI_CSS, SWARALIPI_PRINT_CSS, SWARALIPI_STAFF_CSS, type StaffOptions, type SwaralipiSheetElement, type TaalStaffOptions, type Transliterator, type ViewerLang, ZOOM_STEP, abcDuration, abcToSvg, alignRows, buildAbc, buildTaalAbc, cellMatra, composeCluster, defineSwaralipiSheet, docToAbc, fitSwaralipi, groupRowIntoCells, loadLyricTransliterator, localizeDigits, midiToAbc, printSwaralipi, renderMetaHeader, renderPrintDocument, renderStaffHtml, renderStaffPrintDocument, renderTaalStaffHtml, renderToHtml, resolveArcs };

package/dist/viewer/index.d.ts

@@ -1,6 +1,6 @@
 import { O as Octave, a as SvaraLetter, N as Note, M as Meta, S as Swaralipi, T as Taal } from '../schema-Cf_epUIC.js';
 import { L as Lay } from '../lay-CZIzR9cM.js';
-import { D as DrumVoice, S as Schedule, P as PlayEvent } from '../schedule-BaovCtmf.js';
+import { D as DrumVoice, S as Schedule, P as PlayEvent } from '../schedule-BUopqmWm.js';
 import 'zod';
 import 'tone';
 
@@ -34,6 +34,13 @@ declare const LAY_LABELS: Record<GridLang, Record<Lay, string>>;
 /** Printed where a row switches to free rhythm (`row.taal: null`) with no
  * `taalName` of its own. bn is the converter's canonical মুক্তছন্দ. */
 declare const FREE_TAAL_LABELS: Record<GridLang, string>;
+/** The practice surface's words: the sheet's own accessible name (it says
+ * what a tap does), a repeat being on, and the learner's turn to sing. */
+declare const PRACTICE_LABELS: Record<GridLang, {
+    sheet: string;
+    repeat: string;
+    turn: string;
+}>;
 /** A composed notation cluster: the font's ASCII text plus any residual CSS
  * classes the font itself cannot express (only the bn ati-octave dot). */
 interface Cluster {
@@ -209,6 +216,9 @@ declare const ZOOM_STEP = 1.2;
  * themselves: `<style>${SWARALIPI_CSS}</style>` next to `renderToHtml()`.
  *
  * Theming hooks (CSS custom properties, all optional):
+ *   --sw-loop       repeated-line band; --sw-loop-edge its edge, the learner's
+ *                   hollow highlight and "your turn" tag (--sw-turn-ink on it)
+ *   --sw-row-hover  hover tint of a tappable line; --sw-focus the focus ring
  *   --sw-font       font stack (default: Noto Sans Bengali + system Bengali)
  *   --sw-size       base font size
  *   --sw-cell-gap   horizontal gap between source cells
@@ -501,9 +511,16 @@ interface SwaralipiSheetElement extends HTMLElement {
     doc: Swaralipi | undefined;
     /** Parse documents against the spec schema before rendering. */
     validate: boolean;
-    /** Add the player-highlight class to the note at "part.row.note". */
-    highlight(path: string): HTMLElement | null;
+    /** Add the player-highlight class to the note at "part.row.note" — drawn
+     * hollow when it is the learner's turn to sing it. */
+    highlight(path: string, yourTurn?: boolean): HTMLElement | null;
     clearHighlights(): void;
+    /** Shade the repeated lines (`part.row`, inclusive; null clears) and mark
+     * the learner's turn on them. The player's bindSheet calls this. */
+    markLoop(loop: {
+        from: string;
+        to: string;
+    } | null, yourTurn?: boolean): void;
     /** Open the print dialog (→ "Save as PDF") for the current document. */
     print(options?: PrintOptions): void;
     /** Options for the `staff` language (instrument label, tonic, bpm…). */
@@ -551,4 +568,4 @@ type Transliterator = (bengaliText: string) => string;
  */
 declare function loadLyricTransliterator(lang: ViewerLang): Promise<Transliterator | undefined>;
 
-export { type AbcMeter, type Arc, type Cell, type Cluster, type ComposeOptions, DEFAULT_NOTATOR, DEFAULT_WATERMARK, DIGITS, FREE_TAAL_LABELS, type GridLang, LABELS, LAY_LABELS, type Layout, MARKS, MAX_ZOOM, MIN_ZOOM, NOTATION_FONT_URLS, type PrintOptions, type RenderOptions, SWARALIPI_CSS, SWARALIPI_PRINT_CSS, SWARALIPI_STAFF_CSS, type StaffOptions, type SwaralipiSheetElement, type TaalStaffOptions, type Transliterator, type ViewerLang, 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 { type AbcMeter, type Arc, type Cell, type Cluster, type ComposeOptions, DEFAULT_NOTATOR, DEFAULT_WATERMARK, DIGITS, FREE_TAAL_LABELS, type GridLang, LABELS, LAY_LABELS, type Layout, MARKS, MAX_ZOOM, MIN_ZOOM, NOTATION_FONT_URLS, PRACTICE_LABELS, type PrintOptions, type RenderOptions, SWARALIPI_CSS, SWARALIPI_PRINT_CSS, SWARALIPI_STAFF_CSS, type StaffOptions, type SwaralipiSheetElement, type TaalStaffOptions, type Transliterator, type ViewerLang, ZOOM_STEP, abcDuration, abcToSvg, alignRows, buildAbc, buildTaalAbc, cellMatra, composeCluster, defineSwaralipiSheet, docToAbc, fitSwaralipi, groupRowIntoCells, loadLyricTransliterator, localizeDigits, midiToAbc, printSwaralipi, renderMetaHeader, renderPrintDocument, renderStaffHtml, renderStaffPrintDocument, renderTaalStaffHtml, renderToHtml, resolveArcs };

package/dist/viewer/index.js

@@ -1,4 +1,4 @@
-import { isArcRaw, glideTargets, buildSchedule, drumPattern } from '../chunk-SEN266BY.js';
+import { isArcRaw, glideTargets, buildSchedule, drumPattern } from '../chunk-JEJYMKKZ.js';
 import { hasKomal, isTaalFerta, sameTaal, TAALS, graceNotes } from '../chunk-MYVIQU4O.js';
 
 // src/viewer/glyphs.ts
@@ -54,6 +54,11 @@ var FREE_TAAL_LABELS = {
   hi: "\u092E\u0941\u0915\u094D\u0924\u091B\u0902\u0926",
   en: "Free rhythm"
 };
+var PRACTICE_LABELS = {
+  bn: { sheet: "\u09B8\u09CD\u09AC\u09B0\u09B2\u09BF\u09AA\u09BF \u2014 \u09AF\u09C7 \u09B2\u09BE\u0987\u09A8 \u09A5\u09C7\u0995\u09C7 \u09B6\u09C1\u09A8\u09A4\u09C7 \u099A\u09BE\u09A8, \u09B8\u09C7\u0996\u09BE\u09A8\u09C7 \u099B\u09C1\u0981\u09AF\u09BC\u09C7 \u09A6\u09BF\u09A8", repeat: "\u09B2\u09BE\u0987\u09A8\u099F\u09BF \u09AC\u09BE\u09B0\u09AC\u09BE\u09B0 \u09AC\u09BE\u099C\u09AC\u09C7", turn: "\u098F\u09AC\u09BE\u09B0 \u0986\u09AA\u09A8\u09BF \u0997\u09BE\u09A8" },
+  hi: { sheet: "\u0938\u094D\u0935\u0930\u0932\u093F\u092A\u093F \u2014 \u091C\u093F\u0938 \u092A\u0902\u0915\u094D\u0924\u093F \u0938\u0947 \u0938\u0941\u0928\u0928\u093E \u0939\u094B, \u0909\u0938\u0947 \u091B\u0941\u090F\u0901", repeat: "\u092A\u0902\u0915\u094D\u0924\u093F \u0926\u094B\u0939\u0930\u093E\u0908 \u091C\u093E \u0930\u0939\u0940 \u0939\u0948", turn: "\u0905\u092C \u0906\u092A \u0917\u093E\u0907\u090F" },
+  en: { sheet: "Swaralipi \u2014 tap a line to play from it", repeat: "Repeating the line", turn: "Your turn \u2014 sing" }
+};
 function composeCluster(letter, opts) {
   const classes = [];
   if (opts.lang === "bn") {
@@ -496,7 +501,7 @@ 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>`);
   });
-  return `<div class="sw-row">${out.join("")}</div>`;
+  return `<div class="sw-row" data-row="${partIdx}.${rowIdx}">${out.join("")}</div>`;
 }
 function renderHeader(meta, ctx) {
   return renderMetaHeader(meta, ctx.lang, ctx.tr);
@@ -820,7 +825,10 @@ ${FONT_FACES}
   font-size: 0.9em;
   line-height: 0;
   white-space: pre;
-  overflow-x: clip;
+  /* Cuts the width-constrained runs (-b/-s/-f) at their note's edge. NOT
+   * overflow-x:clip \u2014 WebKit clips the block axis with it too, and these
+   * boxes are line-height 0, so Safari erased every \u09AE\u09C0\u09A1\u09BC on the sheet. */
+  clip-path: inset(-3em 0);
 }
 .sw-mo::after, .sw-mob::after, .sw-mos::after { content: 'wyyyyyyyyyyyy'; }
 /* rtl: a closing run cut short keeps its hook on its right edge */
@@ -865,6 +873,55 @@ ${FONT_FACES}
    glyph fill/stroke instead (abcjs draws note heads/stems as filled paths). */
 .sw-staff .sw-hl, .sw-staff .sw-hl * { fill: var(--sw-hl-note, #d68400); stroke: var(--sw-hl-note, #d68400); }
 
+/* ---- practice: tap a line, repeat it, sing it back ----
+ * Only a sheet a player drives is [seekable]. The whole line is the tap
+ * target, so it is the line that answers the pointer. A repeat shades its
+ * lines and fades the rest (focus, as Soundslice fades outside a loop); on the
+ * learner's pass the highlight goes hollow \u2014 it marks where to sing, not what
+ * is sounding \u2014 and the repeat's first line wears a "your turn" tag. None of
+ * it moves a column: backgrounds, opacity and an out-of-flow tag only. */
+:host([seekable]) .sw-row { cursor: pointer; }
+:host(:focus-visible) { outline: 2px solid var(--sw-focus, currentColor); outline-offset: 0.3em; border-radius: 0.2em; }
+.sw-row { border-radius: 0.3em; }
+@media (hover: hover) {
+  :host([seekable]) .sw-row:hover { background: var(--sw-row-hover, rgba(128, 128, 128, 0.08)); }
+}
+.sw-looping .sw-row:not(.sw-loop) { opacity: 0.6; }
+.sw-row.sw-loop {
+  background: var(--sw-loop, rgba(255, 196, 64, 0.13));
+  box-shadow: inset 0.2em 0 var(--sw-loop-edge, #a85a00);
+}
+.sw-hl.sw-hl-turn { background: none; box-shadow: inset 0 0 0 0.09em var(--sw-loop-edge, #a85a00); }
+/* The tag rides the line's above-band at its right end \u2014 a grid item spanning
+   every column, so it sizes no track \u2014 and is sticky, so on a phone where the
+   line runs past the screen it waits at the visible edge instead. */
+.sw-row[data-turn]::after {
+  content: attr(data-turn);
+  grid-column: 1 / -1;
+  grid-row: 1;
+  justify-self: end;
+  align-self: start;
+  position: sticky;
+  right: 0.2em;
+  translate: 0 -0.3em;
+  font-size: max(0.6em, 0.7rem);
+  font-weight: 600;
+  line-height: 1.6;
+  padding: 0 0.7em;
+  border-radius: 1em;
+  color: var(--sw-turn-ink, #fff);
+  background: var(--sw-loop-edge, #a85a00);
+}
+.sw-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (prefers-reduced-motion: no-preference) {
+  .sw-row { transition: opacity 0.25s, background-color 0.25s; }
+}
+@media print {
+  .sw-row { opacity: 1 !important; background: none !important; box-shadow: none !important; }
+  .sw-row[data-turn]::after { content: none; }
+  .sw-hl { background: none !important; box-shadow: none !important; }
+}
+
 /* ---- element error box ---- */
 .sw-error {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
@@ -1300,6 +1357,17 @@ async function loadLyricTransliterator(lang) {
 
 // src/viewer/element.ts
 var LANGS = /* @__PURE__ */ new Set(["bn", "hi", "en", "staff"]);
+var KEYS = "Space ArrowUp ArrowDown ArrowLeft ArrowRight Home End R T Escape Shift+ArrowUp Shift+ArrowDown";
+function nearest(els, x) {
+  let best;
+  let gap = Infinity;
+  for (const el of els) {
+    const r = el.getBoundingClientRect();
+    const d = Math.abs(r.left + r.width / 2 - x);
+    if (d < gap) [best, gap] = [el, d];
+  }
+  return best;
+}
 function ensureNotationFonts() {
   if (typeof FontFace === "undefined" || typeof document === "undefined") return;
   const present = /* @__PURE__ */ new Set();
@@ -1312,7 +1380,7 @@ function ensureNotationFonts() {
 var sharedSheet;
 function createElementClass() {
   return class SwaralipiSheet extends HTMLElement {
-    static observedAttributes = ["src", "lang", "hide-header", "min-spacing", "min-size"];
+    static observedAttributes = ["src", "lang", "hide-header", "min-spacing", "min-size", "seekable"];
     #doc;
     #root;
     #adopted = false;
@@ -1324,10 +1392,20 @@ function createElementClass() {
     #resize;
     #fittedAt = -1;
     #zoom = 1;
+    /** Where the pointer went down, to tell a tap from a drag. */
+    #down;
+    #marks = { loop: null, turn: false };
+    /** Attributes `seekable` added, and so takes away again. */
+    #owned = [];
     validate = false;
     constructor() {
       super();
       this.#root = this.attachShadow({ mode: "open" });
+      this.#root.addEventListener("pointerdown", (e) => {
+        const { clientX, clientY } = e;
+        this.#down = [clientX, clientY];
+      });
+      this.#root.addEventListener("click", (e) => this.#onClick(e));
       if (typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype && "adoptedStyleSheets" in this.#root) {
         if (!sharedSheet) {
           sharedSheet = new CSSStyleSheet();
@@ -1361,6 +1439,27 @@ function createElementClass() {
       const attr = this.getAttribute("lang");
       return attr !== null && LANGS.has(attr) ? attr : "bn";
     }
+    get #practice() {
+      const lang = this.#lang;
+      return PRACTICE_LABELS[lang === "staff" ? "en" : lang];
+    }
+    /** A tap on a line plays from the note nearest the tap: the whole line is
+     * the target (WCAG 2.5.8 counts a position inside one target as picking
+     * a value), fired on the up-event like any click (2.5.2). The player bound
+     * by bindSheet answers it; a host can veto it with preventDefault(). */
+    #onClick(e) {
+      if (!this.hasAttribute("seekable") || e.button !== 0 || e.ctrlKey || e.metaKey || e.altKey) return;
+      if (this.#down !== void 0 && Math.hypot(e.clientX - this.#down[0], e.clientY - this.#down[1]) > 6) return;
+      const target = e.target;
+      const row = target.closest(".sw-row");
+      const notes = row === null ? [] : [...row.querySelectorAll("[data-note]:not(.sw-bar)")];
+      const hit = target.closest("[data-note]:not(.sw-bar)") ?? nearest(notes, e.clientX);
+      const path = hit?.getAttribute("data-note");
+      if (path == null) return;
+      this.dispatchEvent(
+        new CustomEvent("swaralipi-seek", { detail: { path, extend: e.shiftKey }, bubbles: true, cancelable: true })
+      );
+    }
     attributeChangedCallback(name, oldValue, newValue) {
       if (oldValue === newValue) return;
       if (name === "src") {
@@ -1371,6 +1470,19 @@ function createElementClass() {
         this.fit();
         return;
       }
+      if (name === "seekable") {
+        for (const a of this.#owned) this.removeAttribute(a);
+        this.#owned = [];
+        if (newValue === null) return;
+        const want = { tabindex: "0", role: "region", "aria-label": this.#practice.sheet, "aria-keyshortcuts": KEYS };
+        for (const [a, v] of Object.entries(want)) {
+          if (this.hasAttribute(a)) continue;
+          this.setAttribute(a, v);
+          this.#owned.push(a);
+        }
+        return;
+      }
+      if (name === "lang" && this.#owned.includes("aria-label")) this.setAttribute("aria-label", this.#practice.sheet);
       if (name === "lang") this.#ensureTransliterator();
       this.#render();
     }
@@ -1483,7 +1595,9 @@ function createElementClass() {
       if (lang === "staff") {
         const doc = this.#doc;
         void renderStaffHtml(doc, this.staffOptions).then((html2) => {
-          if (seq === this.#renderSeq) this.#root.innerHTML = this.#styleFallback() + html2;
+          if (seq !== this.#renderSeq) return;
+          this.#root.innerHTML = this.#styleFallback() + html2;
+          this.#applyMarks();
         }).catch(() => void 0);
         return;
       }
@@ -1493,8 +1607,34 @@ function createElementClass() {
         transliterate: this.#translitLang === lang ? this.#translit : void 0
       });
       this.#root.innerHTML = this.#styleFallback() + html;
+      this.#applyMarks();
       this.#fit();
     }
+    markLoop(loop, yourTurn = false) {
+      this.#marks = { loop, turn: yourTurn };
+      this.#applyMarks();
+    }
+    /** Shade the repeated lines and dim the rest; the first of them carries
+     * the "your turn" cue. A polite live region says the same aloud. */
+    #applyMarks() {
+      const { loop, turn } = this.#marks;
+      const rows = [...this.#root.querySelectorAll(".sw-row")];
+      const at = (row) => rows.findIndex((r) => r.dataset.row === row);
+      const [a, b] = loop === null ? [0, -1] : [at(loop.from), at(loop.to)];
+      rows.forEach((r, i) => {
+        r.classList.toggle("sw-loop", i >= a && i <= b);
+        if (turn && i === a) r.dataset.turn = this.#practice.turn;
+        else delete r.dataset.turn;
+      });
+      this.#root.querySelector(".sw-block")?.classList.toggle("sw-looping", loop !== null);
+      let live = this.#root.querySelector(".sw-live");
+      if (live === null) {
+        live = Object.assign(document.createElement("div"), { className: "sw-live" });
+        live.setAttribute("role", "status");
+        this.#root.append(live);
+      }
+      live.textContent = turn ? this.#practice.turn : loop !== null ? this.#practice.repeat : "";
+    }
     #renderError(message) {
       const div = document.createElement("div");
       div.className = "sw-error";
@@ -1502,14 +1642,15 @@ function createElementClass() {
       this.#root.innerHTML = this.#styleFallback();
       this.#root.appendChild(div);
     }
-    highlight(path) {
+    highlight(path, yourTurn = false) {
       if (!/^\d+\.\d+\.\d+$/.test(path)) return null;
       const el = this.#root.querySelector(`[data-note="${path}"]`);
       el?.classList.add("sw-hl");
+      el?.classList.toggle("sw-hl-turn", yourTurn);
       return el;
     }
     clearHighlights() {
-      for (const el of this.#root.querySelectorAll(".sw-hl")) el.classList.remove("sw-hl");
+      for (const el of this.#root.querySelectorAll(".sw-hl")) el.classList.remove("sw-hl", "sw-hl-turn");
     }
     print(options = {}) {
       if (this.#doc === void 0) return;
@@ -1538,6 +1679,6 @@ function defineSwaralipiSheet(tagName = "swaralipi-sheet") {
   return ctor;
 }
 
-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 };
+export { DEFAULT_NOTATOR, DEFAULT_WATERMARK, DIGITS, FREE_TAAL_LABELS, LABELS, LAY_LABELS, MARKS, MAX_ZOOM, MIN_ZOOM, NOTATION_FONT_URLS, PRACTICE_LABELS, 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