@designesy/read-along 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designesy/read-along",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Embeddable bimodal read-along web component: karaoke-sync word highlighting with pluggable TTS engines (Web Speech, pre-synthesized audio, or your own).",
   "type": "module",
   "main": "src/read-along.js",

package/src/engines/webspeech.js

@@ -26,7 +26,10 @@ const CHARS_PER_SEC = 14.5; // ~150 wpm × ~5.8 chars/word, heuristic at rate 1
 
 export class WebSpeechEngine {
   constructor(options = {}) {
-    this.lang = options.lang ?? navigator.language ?? "en-US";
+    // navigator is NOT a global on Node < 21, and this engine must be
+    // constructible outside a browser (the component imports it
+    // unconditionally). Read it defensively rather than assuming a DOM.
+    this.lang = options.lang ?? (typeof navigator !== "undefined" ? navigator.language : null) ?? "en-US";
     this.rate = options.rate ?? 1;
     this.pitch = options.pitch ?? 1;
     this.voiceName = options.voiceName ?? null;
@@ -341,7 +344,8 @@ export class WebSpeechEngine {
     // Desktop-Chrome-only belt-and-suspenders for the ~15s watchdog
     // (chromium:41294170). On Android, pause()/resume() mid-utterance
     // breaks synthesis entirely — sentence chunking alone is the fix there.
-    if (/Android/i.test(navigator.userAgent)) return;
+    const ua = typeof navigator !== "undefined" ? navigator.userAgent : "";
+    if (/Android/i.test(ua)) return;
     this._keepalive = setInterval(() => {
       if (this._stopped || this._paused || this._visualOnly) return;
       if (speechSynthesis.speaking && !speechSynthesis.paused) {

package/src/highlight.js

@@ -126,6 +126,12 @@ export class Highlighter {
         hl.add(r);
         this._wordRanges.push(r);
       }
+      // Track the active token on the NATIVE path too. Only the fallback
+      // path maintained _markIndex, so `activeToken` read the -2 sentinel in
+      // every browser that supports the Highlight API — it was always wrong
+      // exactly where it worked best. Any host that reads the reading
+      // position (eye-gaze, a BCI bridge, a progress bar) got nothing.
+      this._markIndex = r ? i : -2;
     } else {
       this._fallbackMark(i);
     }
@@ -154,6 +160,10 @@ export class Highlighter {
       this._sentenceRanges.length = 0;
     }
     this._unwrapMark();
+    // _unwrapMark only resets the index when a fallback <mark> existed, so
+    // the native path needs its own reset or a cleared player keeps claiming
+    // an active word.
+    this._markIndex = -2;
   }
 
   destroy() {