@uimaxbai/am-lyrics 1.2.7 → 1.2.9

package/dist/src/react.js

@@ -322,7 +322,7 @@ class GoogleService {
     }
 }
 
-const VERSION = '1.2.7';
+const VERSION = '1.2.9';
 const INSTRUMENTAL_THRESHOLD_MS = 7000; // Show dots for gaps >= 7s
 const FETCH_TIMEOUT_MS = 8000; // Timeout for all lyrics fetch requests
 const SEEK_THRESHOLD_MS = 500;
@@ -395,6 +395,15 @@ let AmLyrics$1 = class AmLyrics extends i {
         this.isClickSeeking = false;
         // Cached DOM elements for animation updates
         this.cachedLyricsLines = [];
+        // Cached line and gap element maps for fast lookup
+        this.lineElementCache = new Map();
+        this.gapElementCache = new Map();
+        // Cached gap computation results
+        this.cachedAllGaps = [];
+        // Cached isUnsynced flag
+        this.cachedIsUnsynced = false;
+        // Cached pre-computed line data for render
+        this.cachedLineData = null;
         // Active line tracking
         this.activeLineIds = new Set();
         this.currentPrimaryActiveLine = null;
@@ -486,6 +495,25 @@ let AmLyrics$1 = class AmLyrics extends i {
     get currentTime() {
         return this._currentTime;
     }
+    _updateFooter() {
+        const footer = this.shadowRoot?.querySelector('.lyrics-footer');
+        if (!footer)
+            return;
+        const switchBtn = footer.querySelector('.source-switch-btn');
+        const svgEl = footer.querySelector('.source-switch-svg');
+        const labelEl = footer.querySelector('.source-switch-label');
+        if (switchBtn) {
+            switchBtn.disabled = this.isFetchingAlternatives;
+        }
+        if (svgEl) {
+            svgEl.setAttribute('style', `margin-right: 4px; ${this.isFetchingAlternatives ? 'animation: spin 1s linear infinite;' : ''}`);
+        }
+        if (labelEl) {
+            labelEl.textContent = this.isFetchingAlternatives
+                ? 'Switching...'
+                : 'Switch';
+        }
+    }
     connectedCallback() {
         super.connectedCallback();
         this.fetchLyrics();
@@ -533,6 +561,7 @@ let AmLyrics$1 = class AmLyrics extends i {
         this.currentSourceIndex = 0;
         this.isFetchingAlternatives = false;
         this.hasFetchedAllProviders = false;
+        this._updateFooter();
         try {
             const resolvedMetadata = await this.resolveSongMetadata();
             // If a newer fetch was triggered while we awaited, bail out
@@ -585,6 +614,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                     collectedSources.some(s => s.source === 'LRCLIB' ||
                         s.source === 'Tidal' ||
                         s.source === 'Genius');
+            this._updateFooter();
             if (collectedSources.length > 0) {
                 this.availableSources = AmLyrics.mergeAndSortSources(collectedSources);
                 this.currentSourceIndex = 0;
@@ -695,6 +725,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             return;
         if (!this.hasFetchedAllProviders) {
             this.isFetchingAlternatives = true;
+            this._updateFooter();
             try {
                 const resolvedMetadata = await this.resolveSongMetadata();
                 if (resolvedMetadata?.metadata) {
@@ -734,6 +765,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             finally {
                 this.hasFetchedAllProviders = true;
                 this.isFetchingAlternatives = false;
+                this._updateFooter();
             }
         }
         if (this.availableSources.length > 1) {
@@ -1786,13 +1818,11 @@ let AmLyrics$1 = class AmLyrics extends i {
         // Reset animation if active lines change or if we skip time.
         const linesChanged = !AmLyrics.arraysEqual(newActiveLines, oldActiveLines);
         if (linesChanged || isSeek) {
-            // Imperatively manage 'active' class so that scroll-animate and other
-            // imperative classes are never clobbered.
             if (this.lyricsContainer) {
                 // Remove 'active' from lines that are no longer active
                 for (const lineIndex of oldActiveLines) {
                     if (!newActiveLines.includes(lineIndex)) {
-                        const lineElement = this.lyricsContainer.querySelector(`#lyrics-line-${lineIndex}`);
+                        const lineElement = this._getLineElement(lineIndex);
                         if (lineElement) {
                             lineElement.classList.remove('active');
                             AmLyrics.resetSyllables(lineElement);
@@ -1802,10 +1832,10 @@ let AmLyrics$1 = class AmLyrics extends i {
                 // Add 'active' to newly active lines
                 for (const lineIndex of newActiveLines) {
                     if (!oldActiveLines.includes(lineIndex)) {
-                        const lineElement = this.lyricsContainer.querySelector(`#lyrics-line-${lineIndex}`);
+                        const lineElement = this._getLineElement(lineIndex);
                         if (lineElement) {
                             lineElement.classList.add('active');
-                            lineElement.classList.remove('pre-active'); // Cleanup pre-active when fully active
+                            lineElement.classList.remove('pre-active');
                         }
                     }
                 }
@@ -1814,14 +1844,12 @@ let AmLyrics$1 = class AmLyrics extends i {
                 }
             }
             this.startAnimationFromTime(newTime);
-            // Trigger scroll imperatively (was previously in updated() via @state)
             this._handleActiveLineScroll(oldActiveLines, isSeek);
         }
-        // YouLyPlus-style syllable animation updates
         if (this.lyricsContainer) {
-            // Update syllables in active lines
+            // Update syllables in active lines using cached elements
             for (const lineIndex of this.activeLineIndices) {
-                const lineElement = this.lyricsContainer.querySelector(`#lyrics-line-${lineIndex}`);
+                const lineElement = this._getLineElement(lineIndex);
                 if (lineElement) {
                     AmLyrics.updateSyllablesForLine(lineElement, newTime);
                 }
@@ -1831,60 +1859,81 @@ let AmLyrics$1 = class AmLyrics extends i {
             activeGaps.forEach(gapLine => {
                 AmLyrics.updateSyllablesForLine(gapLine, newTime);
             });
-            // Imperatively manage gap active state (template doesn't re-render on time changes)
-            const allGaps = this.lyricsContainer.querySelectorAll('.lyrics-gap');
-            allGaps.forEach(gap => {
-                const gapStartTime = parseFloat(gap.getAttribute('data-start-time') || '0');
-                const gapEndTime = parseFloat(gap.getAttribute('data-end-time') || '0');
-                const shouldBeActive = newTime >= gapStartTime && newTime < gapEndTime;
-                const isActive = gap.classList.contains('active');
-                const isExiting = gap.classList.contains('gap-exiting');
-                // Start exit animation early so it completes before the next lyric
-                const exitLeadMs = GAP_EXIT_LEAD_MS;
-                const shouldStartExiting = isActive && !isExiting && newTime >= gapEndTime - exitLeadMs;
-                if (shouldBeActive && !isActive && !isExiting) {
-                    // Entering gap: remove any leftover exit state, add active
-                    gap.classList.remove('gap-exiting');
-                    gap.classList.add('active');
-                    // Mark dots whose time has already passed as finished, and
-                    // trigger highlight on the dot currently in its time window
-                    // so the first dot always lights up even on late load.
-                    const dotSyllables = gap.querySelectorAll('.lyrics-syllable');
-                    dotSyllables.forEach(dot => {
-                        const dotStart = parseFloat(dot.getAttribute('data-start-time') || '0');
-                        const dotEnd = parseFloat(dot.getAttribute('data-end-time') || '0');
-                        if (newTime > dotEnd) {
-                            dot.classList.add('finished');
-                            // Also ensure the highlight + animation fired so CSS state is correct
-                            if (!dot.classList.contains('highlight')) {
+            // Imperatively manage gap active state
+            if (this.gapElementCache.size > 0) {
+                for (const [, gap] of this.gapElementCache) {
+                    const gapStartTime = parseFloat(gap.getAttribute('data-start-time') || '0');
+                    const gapEndTime = parseFloat(gap.getAttribute('data-end-time') || '0');
+                    const shouldBeActive = newTime >= gapStartTime && newTime < gapEndTime;
+                    const isActive = gap.classList.contains('active');
+                    const isExiting = gap.classList.contains('gap-exiting');
+                    const exitLeadMs = GAP_EXIT_LEAD_MS;
+                    const shouldStartExiting = isActive && !isExiting && newTime >= gapEndTime - exitLeadMs;
+                    if (shouldBeActive && !isActive && !isExiting) {
+                        gap.classList.remove('gap-exiting');
+                        gap.classList.add('active');
+                        const dotSyllables = gap.querySelectorAll('.lyrics-syllable');
+                        dotSyllables.forEach(dot => {
+                            const dotStart = parseFloat(dot.getAttribute('data-start-time') || '0');
+                            const dotEnd = parseFloat(dot.getAttribute('data-end-time') || '0');
+                            if (newTime > dotEnd) {
+                                dot.classList.add('finished');
+                                if (!dot.classList.contains('highlight')) {
+                                    AmLyrics.updateSyllableAnimation(dot);
+                                }
+                            }
+                            else if (newTime >= dotStart && newTime <= dotEnd) {
                                 AmLyrics.updateSyllableAnimation(dot);
                             }
-                        }
-                        else if (newTime >= dotStart && newTime <= dotEnd) {
-                            // Currently within this dot's window — trigger its highlight
-                            AmLyrics.updateSyllableAnimation(dot);
-                        }
-                    });
-                }
-                else if (shouldStartExiting) {
-                    // Exiting gap: keep visible while dots animate out
-                    gap.classList.add('gap-exiting');
-                    gap.classList.remove('active');
-                    // After exit animation completes, remove gap-exiting to collapse
-                    setTimeout(() => {
+                        });
+                    }
+                    else if (shouldStartExiting) {
+                        gap.classList.add('gap-exiting');
+                        gap.classList.remove('active');
+                        setTimeout(() => {
+                            gap.classList.remove('gap-exiting');
+                        }, GAP_EXIT_LEAD_MS);
+                    }
+                    else if (isActive && !shouldBeActive) {
+                        gap.classList.remove('active');
                         gap.classList.remove('gap-exiting');
-                    }, GAP_EXIT_LEAD_MS);
-                }
-                else if (isActive && !shouldBeActive) {
-                    // NEW: Immediate cleanup if we seeked out of valid range
-                    gap.classList.remove('active');
-                    gap.classList.remove('gap-exiting');
-                }
-                else if (isExiting && newTime < gapEndTime - exitLeadMs) {
-                    // NEW: Cleanup exiting state if we seeked backwards before exit window
-                    gap.classList.remove('gap-exiting');
+                    }
+                    else if (isExiting && newTime < gapEndTime - exitLeadMs) {
+                        gap.classList.remove('gap-exiting');
+                    }
                 }
-            });
+            }
+            else if (this.lyricsContainer) {
+                // Fallback: no cache yet, use querySelectorAll
+                const allGaps = this.lyricsContainer.querySelectorAll('.lyrics-gap');
+                allGaps.forEach(gap => {
+                    const gapStartTime = parseFloat(gap.getAttribute('data-start-time') || '0');
+                    const gapEndTime = parseFloat(gap.getAttribute('data-end-time') || '0');
+                    const shouldBeActive = newTime >= gapStartTime && newTime < gapEndTime;
+                    const isActive = gap.classList.contains('active');
+                    const isExiting = gap.classList.contains('gap-exiting');
+                    const exitLeadMs = GAP_EXIT_LEAD_MS;
+                    const shouldStartExiting = isActive && !isExiting && newTime >= gapEndTime - exitLeadMs;
+                    if (shouldBeActive && !isActive && !isExiting) {
+                        gap.classList.remove('gap-exiting');
+                        gap.classList.add('active');
+                    }
+                    else if (shouldStartExiting) {
+                        gap.classList.add('gap-exiting');
+                        gap.classList.remove('active');
+                        setTimeout(() => {
+                            gap.classList.remove('gap-exiting');
+                        }, GAP_EXIT_LEAD_MS);
+                    }
+                    else if (isActive && !shouldBeActive) {
+                        gap.classList.remove('active');
+                        gap.classList.remove('gap-exiting');
+                    }
+                    else if (isExiting && newTime < gapEndTime - exitLeadMs) {
+                        gap.classList.remove('gap-exiting');
+                    }
+                });
+            }
             // Track instrumental gap state
             const currentGap = this.findInstrumentalGapAt(newTime);
             if (currentGap) {
@@ -1902,20 +1951,18 @@ let AmLyrics$1 = class AmLyrics extends i {
                 for (let i = 0; i < this.lyrics.length; i += 1) {
                     const line = this.lyrics[i];
                     const timeUntilStart = line.timestamp - newTime;
-                    const nextLineEl = this.lyricsContainer.querySelector(`#lyrics-line-${i}`);
+                    const nextLineEl = this._getLineElement(i);
                     const isBackToBack = this.activeLineIndices.length > 0;
                     const leadTime = isBackToBack
                         ? PRE_SCROLL_LEAD_SHORT_MS
                         : PRE_SCROLL_LEAD_MS;
                     if (timeUntilStart > leadTime) {
-                        break; // Lines are ordered by timestamp, no need to check further
+                        break;
                     }
                     if (timeUntilStart > 0 && timeUntilStart <= leadTime) {
-                        // Time to pre-scroll and pre-activate!
                         if (nextLineEl) {
                             preActiveLineIndex = i;
                             if (!isBackToBack) {
-                                // Apply unblur & zoom effect ahead of lyric start only if no line is currently active
                                 nextLineEl.classList.add('pre-active');
                             }
                             this.clearPreActiveClasses(i);
@@ -1931,6 +1978,9 @@ let AmLyrics$1 = class AmLyrics extends i {
     }
     updated(changedProperties) {
         if (changedProperties.has('lyrics')) {
+            this._invalidateCaches();
+            this._ensureLineDataCache();
+            this._updateCachedIsUnsynced();
             // Recalculate timing data for accurate animations whenever lyrics change
             this._updateCharTimingData();
             // Apply 'active' classes imperatively after lyrics first render,
@@ -1939,7 +1989,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             if (this.lyricsContainer && this.lyrics) {
                 const activeLines = this.findActiveLineIndices(this.currentTime);
                 for (const lineIndex of activeLines) {
-                    const lineEl = this.lyricsContainer.querySelector(`#lyrics-line-${lineIndex}`);
+                    const lineEl = this._getLineElement(lineIndex);
                     if (lineEl)
                         lineEl.classList.add('active');
                 }
@@ -1955,7 +2005,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             this.backgroundWordProgress.clear();
             this.mainWordAnimations.clear();
             this.backgroundWordAnimations.clear();
-            this.isUserScrolling = false;
+            this.setUserScrolling(false);
             // Cancel any running animations
             if (this.animationFrameId) {
                 cancelAnimationFrame(this.animationFrameId);
@@ -1995,10 +2045,23 @@ let AmLyrics$1 = class AmLyrics extends i {
         const targetLineIndex = this.getPrimaryActiveLineIndex(this.activeLineIndices);
         if (targetLineIndex === null)
             return;
-        const targetLine = this.lyricsContainer.querySelector(`#lyrics-line-${targetLineIndex}`);
-        if (targetLine) {
-            this.focusLine(targetLine, forceScroll);
+        const targetLine = this._getLineElement(targetLineIndex);
+        if (!targetLine)
+            return;
+        // Only scroll snappily when lines are essentially back-to-back.
+        // If there is any noticeable gap between them, scroll slower.
+        let scrollDuration;
+        const prevPrimaryIndex = AmLyrics.getLineIndexFromElement(this.currentPrimaryActiveLine);
+        if (prevPrimaryIndex !== null &&
+            targetLineIndex > prevPrimaryIndex &&
+            this.lyrics) {
+            const gap = this.lyrics[targetLineIndex].timestamp -
+                this.lyrics[prevPrimaryIndex].endtime;
+            if (gap > 200) {
+                scrollDuration = Math.min(Math.max(gap * 0.6, SCROLL_ANIMATION_DURATION_MS), 2000);
+            }
         }
+        this.focusLine(targetLine, forceScroll, scrollDuration);
     }
     _getTextWidth(text, font) {
         if (!this._textWidthCanvas) {
@@ -2013,9 +2076,142 @@ let AmLyrics$1 = class AmLyrics extends i {
         }
         return 0;
     }
+    _rebuildDomCache() {
+        if (!this.lyricsContainer)
+            return;
+        this.lineElementCache.clear();
+        this.gapElementCache.clear();
+        if (!this.lyrics)
+            return;
+        for (let i = 0; i < this.lyrics.length; i += 1) {
+            const lineEl = this.lyricsContainer.querySelector(`#lyrics-line-${i}`);
+            if (lineEl)
+                this.lineElementCache.set(i, lineEl);
+            const gapEl = this.lyricsContainer.querySelector(`#gap-${i}`);
+            if (gapEl)
+                this.gapElementCache.set(i, gapEl);
+        }
+    }
+    _getLineElement(index) {
+        const cached = this.lineElementCache.get(index);
+        if (cached)
+            return cached;
+        if (!this.lyricsContainer)
+            return null;
+        const el = this.lyricsContainer.querySelector(`#lyrics-line-${index}`);
+        if (el)
+            this.lineElementCache.set(index, el);
+        return el;
+    }
+    _getGapElement(index) {
+        const cached = this.gapElementCache.get(index);
+        if (cached)
+            return cached;
+        if (!this.lyricsContainer)
+            return null;
+        const el = this.lyricsContainer.querySelector(`#gap-${index}`);
+        if (el)
+            this.gapElementCache.set(index, el);
+        return el;
+    }
+    _invalidateCaches() {
+        this.cachedAllGaps = [];
+        this.cachedIsUnsynced = false;
+        this.cachedLineData = null;
+        this.lineElementCache.clear();
+        this.gapElementCache.clear();
+    }
+    _updateCachedIsUnsynced() {
+        this.cachedIsUnsynced =
+            this.lyrics && this.lyrics.length > 0
+                ? this.lyrics.every(l => l.timestamp === 0 && l.endtime === 0)
+                : false;
+    }
+    _ensureLineDataCache() {
+        if (this.cachedLineData || !this.lyrics)
+            return;
+        this.cachedLineData = this.lyrics.map(line => {
+            const wordGroups = [];
+            for (const syllable of line.text) {
+                if (syllable.part && wordGroups.length > 0) {
+                    wordGroups[wordGroups.length - 1].push(syllable);
+                }
+                else {
+                    wordGroups.push([syllable]);
+                }
+            }
+            const groupGrowable = new Array(wordGroups.length).fill(false);
+            const groupGlowing = new Array(wordGroups.length).fill(false);
+            const vwFullText = new Array(wordGroups.length).fill('');
+            const vwFullDuration = new Array(wordGroups.length).fill(0);
+            const vwCharOffset = new Array(wordGroups.length).fill(0);
+            const vwStartMs = new Array(wordGroups.length).fill(0);
+            const vwEndMs = new Array(wordGroups.length).fill(0);
+            let vwStart = 0;
+            while (vwStart < wordGroups.length) {
+                let vwEnd = vwStart;
+                while (vwEnd < wordGroups.length - 1) {
+                    const grp = wordGroups[vwEnd];
+                    const lastText = grp[grp.length - 1].text;
+                    if (/\s$/.test(lastText))
+                        break;
+                    vwEnd += 1;
+                }
+                const combinedText = wordGroups
+                    .slice(vwStart, vwEnd + 1)
+                    .flatMap(g => g.map(s => s.text))
+                    .join('')
+                    .trim();
+                const combinedStart = wordGroups[vwStart][0].timestamp;
+                const lastGrp = wordGroups[vwEnd];
+                const combinedEnd = lastGrp[lastGrp.length - 1].endtime;
+                const combinedDuration = combinedEnd - combinedStart;
+                const isCJK = /[\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff\uac00-\ud7af]/.test(combinedText);
+                const isRTL = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u0590-\u05FF]/.test(combinedText);
+                const hasHyphen = combinedText.includes('-');
+                const wordLen = combinedText.length;
+                let isGrowableVW = !isCJK && !isRTL && !hasHyphen && wordLen > 0 && wordLen <= 12;
+                if (isGrowableVW) {
+                    if (wordLen < 3) {
+                        isGrowableVW =
+                            combinedDuration >= 1000 && combinedDuration >= wordLen * 500;
+                    }
+                    else {
+                        isGrowableVW =
+                            combinedDuration >= 800 && combinedDuration >= wordLen * 180;
+                    }
+                }
+                const isGlowingVW = isGrowableVW;
+                let charOff = 0;
+                for (let gi = vwStart; gi <= vwEnd; gi += 1) {
+                    groupGrowable[gi] = isGrowableVW;
+                    groupGlowing[gi] = isGlowingVW;
+                    vwFullText[gi] = combinedText;
+                    vwFullDuration[gi] = combinedDuration;
+                    vwCharOffset[gi] = charOff;
+                    vwStartMs[gi] = combinedStart;
+                    vwEndMs[gi] = combinedEnd;
+                    const grpText = wordGroups[gi].map(s => s.text).join('');
+                    charOff += grpText.replace(/\s/g, '').length;
+                }
+                vwStart = vwEnd + 1;
+            }
+            return {
+                wordGroups,
+                groupGrowable,
+                groupGlowing,
+                vwFullText,
+                vwFullDuration,
+                vwCharOffset,
+                vwStartMs,
+                vwEndMs,
+            };
+        });
+    }
     _updateCharTimingData() {
         if (!this.shadowRoot)
             return;
+        this._rebuildDomCache();
         // Get the computed font from the first syllable to ensure accuracy
         const referenceSyllable = this.shadowRoot.querySelector('.lyrics-syllable');
         if (!referenceSyllable)
@@ -2128,21 +2324,29 @@ let AmLyrics$1 = class AmLyrics extends i {
             this.scrollToActiveLineYouLy(lineElement, forceScroll, scrollDuration);
         }
     }
+    setUserScrolling(value) {
+        this.isUserScrolling = value;
+        if (value) {
+            this.lyricsContainer?.classList.add('user-scrolling');
+        }
+        else {
+            this.lyricsContainer?.classList.remove('user-scrolling');
+        }
+    }
     handleUserScroll() {
         // Ignore programmatic scrolls and click-seek scrolls
         if (this.isProgrammaticScroll || this.isClickSeeking) {
             return;
         }
         // Mark that user is currently scrolling
-        this.isUserScrolling = true;
-        this.lyricsContainer?.classList.add('user-scrolling');
+        this.setUserScrolling(true);
         // Clear any existing timeout
         if (this.userScrollTimeoutId) {
             clearTimeout(this.userScrollTimeoutId);
         }
         // Set timeout to re-enable auto-scroll after 2 seconds of no scrolling
         this.userScrollTimeoutId = window.setTimeout(() => {
-            this.isUserScrolling = false;
+            this.setUserScrolling(false);
             this.userScrollTimeoutId = undefined;
             // Optionally scroll back to current active line when re-enabling auto-scroll
             if (this.activeLineIndices.length > 0) {
@@ -2151,25 +2355,23 @@ let AmLyrics$1 = class AmLyrics extends i {
         }, 2000);
     }
     findActiveLineIndices(time) {
-        if (!this.lyrics)
+        if (!this.lyrics || this.lyrics.length === 0)
             return [];
         const activeLines = [];
         for (let i = 0; i < this.lyrics.length; i += 1) {
             const line = this.lyrics[i];
             let effectiveEndTime = line.endtime;
-            // Extend the "active" highlight window to abut the next line,
-            // leaving a 500ms gap for breathing/scrolling
             if (i < this.lyrics.length - 1) {
                 const nextLineStart = this.lyrics[i + 1].timestamp;
                 const gapDuration = nextLineStart - line.endtime;
-                // If the gap is large enough to trigger the breathing dots,
-                // DO NOT extend the highlight. The text should dim when the dots appear.
                 if (gapDuration < INSTRUMENTAL_THRESHOLD_MS) {
                     if (effectiveEndTime < nextLineStart) {
                         effectiveEndTime = Math.max(effectiveEndTime, nextLineStart - 500);
                     }
                 }
             }
+            if (line.timestamp > time)
+                break;
             if (time >= line.timestamp && time <= effectiveEndTime) {
                 activeLines.push(i);
             }
@@ -2209,6 +2411,8 @@ let AmLyrics$1 = class AmLyrics extends i {
      * Used by the template to always render gap elements in the DOM.
      */
     findAllInstrumentalGaps() {
+        if (this.cachedAllGaps.length > 0)
+            return this.cachedAllGaps;
         if (!this.lyrics || this.lyrics.length === 0)
             return [];
         const gaps = [];
@@ -2227,6 +2431,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                 gaps.push({ insertBeforeIndex: i + 1, gapStart, gapEnd });
             }
         }
+        this.cachedAllGaps = gaps;
         return gaps;
     }
     startAnimationFromTime(time) {
@@ -2390,7 +2595,7 @@ let AmLyrics$1 = class AmLyrics extends i {
             clearTimeout(this.userScrollTimeoutId);
             this.userScrollTimeoutId = undefined;
         }
-        this.isUserScrolling = false;
+        this.setUserScrolling(false);
         // Reset active line tracking to prevent scroll fighting
         this.currentPrimaryActiveLine = null;
         this.lastPrimaryActiveLine = null;
@@ -2689,7 +2894,7 @@ let AmLyrics$1 = class AmLyrics extends i {
         }
         this.lyricsContainer.classList.remove('not-focused', 'user-scrolling');
         this.isProgrammaticScroll = true;
-        this.isUserScrolling = false;
+        this.setUserScrolling(false);
         if (this.userScrollTimeoutId) {
             clearTimeout(this.userScrollTimeoutId);
             this.userScrollTimeoutId = undefined;
@@ -3177,9 +3382,7 @@ let AmLyrics$1 = class AmLyrics extends i {
         this.style.setProperty('--hover-background-color', this.hoverBackgroundColor);
         this.style.setProperty('--highlight-color', this.highlightColor);
         const sourceLabel = this.lyricsSource ?? 'Unavailable';
-        const isUnsynced = this.lyrics && this.lyrics.length > 0
-            ? this.lyrics.every(l => l.timestamp === 0 && l.endtime === 0)
-            : false;
+        const isUnsynced = this.cachedIsUnsynced;
         const renderContent = () => {
             if (this.isLoading) {
                 // Render stylized skeleton lines
@@ -3251,88 +3454,16 @@ let AmLyrics$1 = class AmLyrics extends i {
                 // as the main vocal, so we intentionally do NOT render a separate
                 // translation/romanization block for background — it would just duplicate
                 // the main line's text.
-                // Group syllables by word: when part=true, append to previous word group
-                const wordGroups = [];
-                for (const syllable of line.text) {
-                    if (syllable.part && wordGroups.length > 0) {
-                        // Continuation of previous word
-                        wordGroups[wordGroups.length - 1].push(syllable);
-                    }
-                    else {
-                        // New word
-                        wordGroups.push([syllable]);
-                    }
-                }
-                // Pre-compute isGrowable per "visual word": adjacent groups whose text
-                // doesn't end with whitespace form one visual word (e.g. "a"+"live" = "alive").
-                // We evaluate growable on the combined text/duration, then propagate
-                // the result to each individual group so it renders through the
-                // single-syllable path (which supports char-level glow).
-                const groupGrowable = new Array(wordGroups.length).fill(false);
-                const groupGlowing = new Array(wordGroups.length).fill(false);
-                // Visual word info for growable char-level glow:
-                // Each group stores the combined visual word's text, duration, and
-                // the char offset of this group within the visual word.
-                const vwFullText = new Array(wordGroups.length).fill('');
-                const vwFullDuration = new Array(wordGroups.length).fill(0);
-                const vwCharOffset = new Array(wordGroups.length).fill(0);
-                const vwStartMs = new Array(wordGroups.length).fill(0);
-                const vwEndMs = new Array(wordGroups.length).fill(0);
-                {
-                    let vwStart = 0;
-                    while (vwStart < wordGroups.length) {
-                        let vwEnd = vwStart;
-                        while (vwEnd < wordGroups.length - 1) {
-                            const grp = wordGroups[vwEnd];
-                            const lastText = grp[grp.length - 1].text;
-                            if (/\s$/.test(lastText))
-                                break;
-                            vwEnd += 1;
-                        }
-                        // Compute combined properties for this visual word
-                        const combinedText = wordGroups
-                            .slice(vwStart, vwEnd + 1)
-                            .flatMap(g => g.map(s => s.text))
-                            .join('')
-                            .trim();
-                        const combinedStart = wordGroups[vwStart][0].timestamp;
-                        const lastGrp = wordGroups[vwEnd];
-                        const combinedEnd = lastGrp[lastGrp.length - 1].endtime;
-                        const combinedDuration = combinedEnd - combinedStart;
-                        const isCJK = /[\u4e00-\u9fff\u3040-\u309f\u30a0-\u30ff\uac00-\ud7af]/.test(combinedText);
-                        const isRTL = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u0590-\u05FF]/.test(combinedText);
-                        const hasHyphen = combinedText.includes('-');
-                        const wordLen = combinedText.length;
-                        let isGrowableVW = !isCJK && !isRTL && !hasHyphen && wordLen > 0 && wordLen <= 12;
-                        if (isGrowableVW) {
-                            if (wordLen < 3) {
-                                isGrowableVW =
-                                    combinedDuration >= 1110 && combinedDuration >= wordLen * 550;
-                            }
-                            else {
-                                isGrowableVW =
-                                    combinedDuration >= 850 && combinedDuration >= wordLen * 200;
-                            }
-                        }
-                        // Glow requirement (more strict)
-                        const isGlowingVW = isGrowableVW &&
-                            combinedDuration >= 1000 &&
-                            combinedDuration >= combinedText.length * 250;
-                        let charOff = 0;
-                        for (let gi = vwStart; gi <= vwEnd; gi += 1) {
-                            groupGrowable[gi] = isGrowableVW;
-                            groupGlowing[gi] = isGlowingVW;
-                            vwFullText[gi] = combinedText;
-                            vwFullDuration[gi] = combinedDuration;
-                            vwCharOffset[gi] = charOff;
-                            vwStartMs[gi] = combinedStart;
-                            vwEndMs[gi] = combinedEnd;
-                            const grpText = wordGroups[gi].map(s => s.text).join('');
-                            charOff += grpText.replace(/\s/g, '').length;
-                        }
-                        vwStart = vwEnd + 1;
-                    }
-                }
+                const bgPlacement = hasBackground
+                    ? AmLyrics.getBackgroundTextPlacement(line)
+                    : 'after';
+                const lineData = this.cachedLineData?.[lineIndex];
+                const wordGroups = lineData?.wordGroups ?? [];
+                const groupGrowable = lineData?.groupGrowable ?? [];
+                const groupGlowing = lineData?.groupGlowing ?? [];
+                const vwFullText = lineData?.vwFullText ?? [];
+                const vwFullDuration = lineData?.vwFullDuration ?? [];
+                const vwCharOffset = lineData?.vwCharOffset ?? [];
                 // Create main vocals using YouLyPlus syllable structure
                 const mainVocalElement = b `<p class="main-vocal-container">
           ${wordGroups.map((group, groupIdx) => {
@@ -3555,7 +3686,9 @@ let AmLyrics$1 = class AmLyrics extends i {
                 }}
           >
             <div class="lyrics-line-container">
-              ${mainVocalElement} ${backgroundVocalElement}
+              ${bgPlacement === 'before' ? backgroundVocalElement : ''}
+              ${mainVocalElement}
+              ${bgPlacement === 'after' ? backgroundVocalElement : ''}
               ${translationElement} ${lineRomanizationElement}
             </div>
           </div>
@@ -3566,9 +3699,7 @@ let AmLyrics$1 = class AmLyrics extends i {
       <div
         class="lyrics-container ${isUnsynced
             ? 'is-unsynced'
-            : 'blur-inactive-enabled'} ${this.isUserScrolling
-            ? 'user-scrolling'
-            : ''}"
+            : 'blur-inactive-enabled'}"
       >
         ${!this.isLoading && this.lyrics && this.lyrics.length > 0
             ? b `
@@ -3683,17 +3814,15 @@ let AmLyrics$1 = class AmLyrics extends i {
                 !this.hasFetchedAllProviders
                 ? b `
                           <button
-                            class="download-button"
+                            class="download-button source-switch-btn"
                             title="Switch Lyrics Source"
                             style="font-family: inherit; font-size: 11px; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; cursor: pointer; color: #aaa; display: inline-flex; align-items: center;"
                             @click=${this.switchSource}
                             ?disabled=${this.isFetchingAlternatives}
                           >
                             <svg
-                              style="margin-right: 4px; ${this
-                    .isFetchingAlternatives
-                    ? 'animation: spin 1s linear infinite;'
-                    : ''}"
+                              class="source-switch-svg lucide lucide-arrow-down-up-icon lucide-arrow-down-up"
+                              style="margin-right: 4px;"
                               xmlns="http://www.w3.org/2000/svg"
                               width="12"
                               height="12"
@@ -3703,7 +3832,6 @@ let AmLyrics$1 = class AmLyrics extends i {
                               stroke-width="2"
                               stroke-linecap="round"
                               stroke-linejoin="round"
-                              class="lucide lucide-arrow-down-up-icon lucide-arrow-down-up"
                             >
                               ${this.isFetchingAlternatives
                     ? w `<path
@@ -3714,9 +3842,11 @@ let AmLyrics$1 = class AmLyrics extends i {
                                     ><path d="m21 8-4-4-4 4"></path
                                     ><path d="M17 4v16"></path>`}
                             </svg>
-                            ${this.isFetchingAlternatives
+                            <span class="source-switch-label"
+                              >${this.isFetchingAlternatives
                     ? 'Switching...'
-                    : 'Switch'}
+                    : 'Switch'}</span
+                            >
                           </button>
                         `
                 : ''}
@@ -5001,18 +5131,9 @@ __decorate([
 __decorate([
     r()
 ], AmLyrics$1.prototype, "currentSourceIndex", void 0);
-__decorate([
-    r()
-], AmLyrics$1.prototype, "isFetchingAlternatives", void 0);
-__decorate([
-    r()
-], AmLyrics$1.prototype, "hasFetchedAllProviders", void 0);
 __decorate([
     e('.lyrics-container')
 ], AmLyrics$1.prototype, "lyricsContainer", void 0);
-__decorate([
-    r()
-], AmLyrics$1.prototype, "isUserScrolling", void 0);
 
 // This creates the React-usable component
 const AmLyrics = createComponent({