@braccato/core 1.6.0 → 1.6.2

package/dist/constants.d.ts

@@ -20,6 +20,7 @@ export declare const BACKGROUND_LINE_CLASS: "blyrics-background-line";
 export declare const WORD_GROUP_CLASS: "blyrics-word-group";
 export declare const LONG_WORD_GROUP_CLASS: "blyrics-word-group-long";
 export declare const WORD_HIGHLIGHT_CLASS: "blyrics-word-highlight";
+export declare const WORD_HIGHLIGHT_LETTERED_CLASS: "blyrics-word-highlight--lettered";
 export declare const HIGHLIGHT_RUN_CLASS: "blyrics-highlight-run";
 export declare const LINE_SYNCED_WORD_CLASS: "blyrics-line-synced-word";
 export declare const BIDI_RUN_CLASS: "blyrics-bidi-run";

package/dist/constants.js

@@ -26,6 +26,7 @@ export const BACKGROUND_LINE_CLASS = "blyrics-background-line";
 export const WORD_GROUP_CLASS = "blyrics-word-group";
 export const LONG_WORD_GROUP_CLASS = "blyrics-word-group-long";
 export const WORD_HIGHLIGHT_CLASS = "blyrics-word-highlight";
+export const WORD_HIGHLIGHT_LETTERED_CLASS = "blyrics-word-highlight--lettered";
 export const HIGHLIGHT_RUN_CLASS = "blyrics-highlight-run";
 export const LINE_SYNCED_WORD_CLASS = "blyrics-line-synced-word";
 export const BIDI_RUN_CLASS = "blyrics-bidi-run";

package/dist/engine.d.ts

@@ -41,8 +41,6 @@ export interface AnimationEngineInstance extends AnimEngineViewState {
     window: EngineWindow;
     host: LyricsRendererHost;
     cachedTabRendererHeight: number | null;
-    cachedMaxScrollTop: number | null;
-    cachedScrollTop: number | null;
     cachedFooterItem: LineScrollItem | null;
     cachedLineScrollTiming: Map<string, LineScrollTiming>;
     tabRendererResizeObserver: ResizeObserver | null;

package/dist/engine.js

@@ -137,8 +137,6 @@ export function createAnimationEngineInstance(engineDocument, engineWindow, host
         passiveScrollAccumulatedTime: 0,
         passiveLastWallTime: 0,
         cachedTabRendererHeight: null,
-        cachedMaxScrollTop: null,
-        cachedScrollTop: null,
         cachedFooterItem: null,
         cachedLineScrollTiming: new Map(),
         tabRendererResizeObserver: null,
@@ -1749,7 +1747,6 @@ function passiveScrollEngine(engine, isPlaying) {
     const prevScrollTop = tabRenderer.scrollTop;
     tabRenderer.scrollTop = targetScroll;
     const appliedScrollTop = tabRenderer.scrollTop;
-    engine.cachedScrollTop = appliedScrollTop;
     // Only skip the next scroll event if scrollTop actually changed.
     // When it doesn't change (pause phases, sub-pixel rounding), no programmatic
     // scroll event fires, so setting skipScrolls would eat user scroll events instead.
@@ -1769,19 +1766,11 @@ function setupTabRendererObserver(engine, element) {
         dropPendingLineScroll(engine);
         if (element && element.isConnected) {
             engine.cachedTabRendererHeight = element.getBoundingClientRect().height;
-            refreshScrollMetrics(engine, element);
         }
     });
     engine.tabRendererResizeObserver.observe(element);
     engine.observedTabRenderer = element;
     engine.cachedTabRendererHeight = element.getBoundingClientRect().height;
-    refreshScrollMetrics(engine, element);
-}
-// Scroll position and bounds are cached here (and refreshed where layout is measured on purpose) so
-// the tick never reads them off the DOM, which would force a synchronous layout flush mid-frame.
-function refreshScrollMetrics(engine, tabRenderer) {
-    engine.cachedMaxScrollTop = Math.max(0, tabRenderer.scrollHeight - tabRenderer.clientHeight);
-    engine.cachedScrollTop = tabRenderer.scrollTop;
 }
 /**
  * Fills in everything a caller left out of a tick. The tick reads each of these arithmetically, so
@@ -1883,17 +1872,9 @@ export function tickView(engine, currentTime, options) {
             setupTabRendererObserver(engine, tabRenderer);
         }
         const tabRendererHeight = engine.cachedTabRendererHeight ?? tabRenderer.getBoundingClientRect().height;
-        // Read the DOM position only while the user scrolls (they own it then); otherwise reuse the cached
-        // value the engine last wrote, so the tick never forces a mid-frame layout flush.
-        let scrollTop;
-        if (engine.scrollResumeTime >= now || engine.cachedScrollTop === null) {
-            scrollTop = tabRenderer.scrollTop;
-            engine.cachedScrollTop = scrollTop;
-        }
-        else {
-            scrollTop = engine.cachedScrollTop;
-        }
-        const maxScrollTop = engine.cachedMaxScrollTop ?? Math.max(0, tabRenderer.scrollHeight - tabRenderer.clientHeight);
+        // Read before the loop's class writes so this layout read is batched and forces no mid-frame reflow.
+        let scrollTop = tabRenderer.scrollTop;
+        const maxScrollTop = Math.max(0, tabRenderer.scrollHeight - tabRenderer.clientHeight);
         if (animationConfig.enabled.scroll) {
             updateVisibleLyricWillChange(engine, lines, scrollTop, engine.pendingLineScroll?.toScrollTop ?? scrollTop, tabRendererHeight);
         }
@@ -2152,7 +2133,6 @@ export function tickView(engine, currentTime, options) {
                     scrollTop = scrollPos;
                     engine.scrollPos = scrollTop;
                     tabRenderer.scrollTop = scrollTop;
-                    engine.cachedScrollTop = scrollTop;
                     engine.skipScrolls += 1;
                     engine.skipScrollsDecayTimes.push(Date.now() + 2000);
                 }
@@ -2269,9 +2249,6 @@ export function relayout(engine, measureLines) {
     measureFooterItem(engine, lyricsElement);
     // Re-arm from the fresh measurements, so a line skipped after this holds its new placeholder height.
     setupLineCullObserver(engine);
-    const tabRenderer = engine.host.getScrollElement();
-    if (tabRenderer)
-        refreshScrollMetrics(engine, tabRenderer);
     engine.wasUserScrolling = true; // trigger rescrolls
     engine.host.debug?.resize();
 }

package/dist/inject.js

@@ -11,7 +11,7 @@
 // animates is one word, so every part is split on whitespace with its timing pro-rated across the
 // split by character count. A line that arrives with no timed parts at all is rebuilt the same way
 // into zero duration words, so line synced lyrics reach the DOM the sweep already knows.
-import { BACKGROUND_LINE_CLASS, BACKGROUND_LYRIC_CLASS, BIDI_RUN_CLASS, BIDI_SENSITIVE_CLASS, CONTENT_LINE_CLASS, EXPLICIT_WORD_CLASS, HIGHLIGHT_RUN_CLASS, LETTER_CLASS, LINE_MAIN_CLASS, LINE_SYNCED_WORD_CLASS, LONG_WORD_GROUP_CLASS, ROMANIZED_LYRICS_CLASS, RTL_CLASS, TRANSLATED_LYRICS_CLASS, WORD_CLASS, WORD_GROUP_CLASS, WORD_HIGHLIGHT_CLASS, ZERO_DURATION_ANIMATION_CLASS, } from "./constants.js";
+import { BACKGROUND_LINE_CLASS, BACKGROUND_LYRIC_CLASS, BIDI_RUN_CLASS, BIDI_SENSITIVE_CLASS, CONTENT_LINE_CLASS, EXPLICIT_WORD_CLASS, HIGHLIGHT_RUN_CLASS, LETTER_CLASS, LINE_MAIN_CLASS, LINE_SYNCED_WORD_CLASS, LONG_WORD_GROUP_CLASS, ROMANIZED_LYRICS_CLASS, RTL_CLASS, TRANSLATED_LYRICS_CLASS, WORD_CLASS, WORD_GROUP_CLASS, WORD_HIGHLIGHT_CLASS, WORD_HIGHLIGHT_LETTERED_CLASS, ZERO_DURATION_ANIMATION_CLASS, } from "./constants.js";
 import { getSeekTimeFromClick } from "./seek.js";
 import { testRtl } from "./text.js";
 import { registerThemeSetting } from "./themeSettings.js";
@@ -235,10 +235,13 @@ function createTimedWordSpan(doc, part, wrapThreshold, perLetter) {
             wordElement.classList.add(EXPLICIT_WORD_CLASS);
         if (perLetter) {
             const collected = appendLetters(doc, wordElement, part.words);
-            if (wordElement === span)
+            if (wordElement === span) {
                 letters = collected;
-            else
+            }
+            else {
                 highlightLetters = collected;
+                wordElement.classList.add(WORD_HIGHLIGHT_LETTERED_CLASS);
+            }
         }
         else {
             appendLongWordBreaks(doc, wordElement, part.words, wrapThreshold);

package/dist/styles/lyrics.css

@@ -160,7 +160,7 @@
 	display: inline-block;
 }
 
-.blyrics-word-highlight:has(.blyrics--letter) {
+.blyrics-word-highlight.blyrics-word-highlight--lettered {
 	background-image: none;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braccato/core",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "Synchronized lyrics renderer with word-by-word animations",
   "type": "module",
   "license": "MIT",