@uimaxbai/am-lyrics 1.2.6 → 1.2.8

package/dist/src/react.js

@@ -322,17 +322,17 @@ class GoogleService {
     }
 }
 
-const VERSION = '1.2.6';
+const VERSION = '1.2.8';
 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;
 const PRE_SCROLL_LEAD_MS = 500;
-const PRE_SCROLL_LEAD_SHORT_MS = 150;
+const PRE_SCROLL_LEAD_SHORT_MS = 350;
 const SCROLL_ANIMATION_DURATION_MS = 280;
 const SCROLL_DELAY_INCREMENT_MS = 24;
 const GAP_PULSE_DURATION_MS = 4000;
 const GAP_PULSE_CYCLE_MS = GAP_PULSE_DURATION_MS * 2;
-const GAP_EXIT_LEAD_MS = 360;
+const GAP_EXIT_LEAD_MS = 600;
 const GAP_MIN_SCALE = 0.85;
 /**
  * Fetch with an automatic timeout via AbortSignal.
@@ -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,25 +1951,23 @@ 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);
                             const slowScrollDuration = Math.max(SCROLL_ANIMATION_DURATION_MS, timeUntilStart);
-                            this.focusLine(nextLineEl, false, slowScrollDuration, !!currentGap);
+                            this.focusLine(nextLineEl, false, isBackToBack ? 500 : slowScrollDuration);
                         }
                         break;
                     }
@@ -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,7 +2045,7 @@ 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}`);
+        const targetLine = this._getLineElement(targetLineIndex);
         if (targetLine) {
             this.focusLine(targetLine, forceScroll);
         }
@@ -2013,9 +2063,144 @@ 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 >= 1110 && combinedDuration >= wordLen * 550;
+                    }
+                    else {
+                        isGrowableVW =
+                            combinedDuration >= 850 && combinedDuration >= wordLen * 200;
+                    }
+                }
+                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;
+            }
+            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 +2313,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 +2344,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 +2400,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 +2420,7 @@ let AmLyrics$1 = class AmLyrics extends i {
                 gaps.push({ insertBeforeIndex: i + 1, gapStart, gapEnd });
             }
         }
+        this.cachedAllGaps = gaps;
         return gaps;
     }
     startAnimationFromTime(time) {
@@ -2390,7 +2584,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 +2883,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;
@@ -2726,42 +2920,19 @@ let AmLyrics$1 = class AmLyrics extends i {
         // Use a Map to collect animations like YouLyPlus
         const charAnimationsMap = new Map();
         const styleUpdates = [];
-        // Step 1 & 2: Apply animations
+        // Step 1: Grow Pass
         if (isGrowable && isFirstSyllable && allWordCharSpans.length > 0) {
-            // Glow AND wipe applied to ALL characters simultaneously from the first syllable
-            // This prevents CSS animation restarts because the `animation` property is set once.
-            const firstSyllableStartTime = parseFloat(syllable.getAttribute('data-start-time') || '0');
-            allWordCharSpans.forEach((span, charIndexInWord) => {
+            const finalDuration = wordDurationMs;
+            const baseDelayPerChar = finalDuration * 0.09;
+            const growDurationMs = finalDuration * 1.5;
+            allWordCharSpans.forEach(span => {
                 const horizontalOffset = parseFloat(span.dataset.horizontalOffset || '0');
                 const maxScale = span.dataset.maxScale || '1.1';
                 const shadowIntensity = span.dataset.shadowIntensity || '0.6';
                 const translateYPeak = span.dataset.translateYPeak || '-2';
-                const animationParts = [];
-                const parentSyllable = span.closest('.lyrics-syllable');
-                if (parentSyllable) {
-                    const parentDuration = parseFloat(parentSyllable.getAttribute('data-duration') || '0');
-                    const parentStartTime = parseFloat(parentSyllable.getAttribute('data-start-time') || '0');
-                    const startPct = parseFloat(span.dataset.wipeStart || '0');
-                    const durationPct = parseFloat(span.dataset.wipeDuration || '0');
-                    const relativeStartOffset = Math.max(0, parentStartTime - firstSyllableStartTime);
-                    const wipeDelay = relativeStartOffset + parentDuration * startPct;
-                    const wipeDuration = parentDuration * durationPct;
-                    const useStartAnimation = isFirstInContainer && charIndexInWord === 0;
-                    let charWipeAnimation = 'wipe';
-                    if (useStartAnimation)
-                        charWipeAnimation = isRTL ? 'start-wipe-rtl' : 'start-wipe';
-                    else
-                        charWipeAnimation = isRTL ? 'wipe-rtl' : 'wipe';
-                    // Blend word and syllable durations to let the gradient flow smoothly
-                    // while still responding to syllable pacing (no strict exactness, just natural flow)
-                    const growDelay = wipeDelay;
-                    const growDurationMs = Math.max(600, wordDurationMs * 0.8 + parentDuration * 1.5);
-                    animationParts.push(`grow-dynamic ${growDurationMs}ms ease-in-out ${growDelay}ms forwards`);
-                    if (wipeDuration > 0) {
-                        animationParts.push(`${charWipeAnimation} ${wipeDuration}ms linear ${wipeDelay}ms forwards`);
-                    }
-                }
-                charAnimationsMap.set(span, animationParts.join(', '));
+                const syllableCharIndex = parseFloat(span.dataset.syllableCharIndex || '0');
+                const growDelay = baseDelayPerChar * syllableCharIndex;
+                charAnimationsMap.set(span, `grow-dynamic ${growDurationMs}ms ease-in-out ${growDelay}ms forwards`);
                 styleUpdates.push({
                     element: span,
                     property: '--char-offset-x',
@@ -2784,26 +2955,8 @@ let AmLyrics$1 = class AmLyrics extends i {
                 });
             });
         }
-        else if (isGrowable && !isFirstSyllable && charSpans.length > 0) {
-            // For subsequent syllables of a growable word:
-            // If they already have `grow-dynamic`, it means the first syllable correctly took care of BOTH grow and wipe!
-            // Otherwise, they scrubbed directly into this syllable, so let's at least do the wipe.
-            charSpans.forEach(span => {
-                const existingAnimation = charAnimationsMap.get(span) || span.style.animation || '';
-                if (existingAnimation.includes('grow-dynamic'))
-                    return;
-                const startPct = parseFloat(span.dataset.wipeStart || '0');
-                const durationPct = parseFloat(span.dataset.wipeDuration || '0');
-                const wipeDelay = syllableDurationMs * startPct;
-                const wipeDuration = syllableDurationMs * durationPct;
-                const charWipeAnimation = isRTL ? 'wipe-rtl' : 'wipe';
-                if (wipeDuration > 0) {
-                    charAnimationsMap.set(span, `${charWipeAnimation} ${wipeDuration}ms linear ${wipeDelay}ms forwards`);
-                }
-            });
-        }
-        else if (charSpans.length > 0) {
-            // Per-character wipe for non-growable words (matching YouLyPlus)
+        // Step 2: Wipe Pass
+        if (charSpans.length > 0) {
             charSpans.forEach((span, charIndex) => {
                 const startPct = parseFloat(span.dataset.wipeStart || '0');
                 const durationPct = parseFloat(span.dataset.wipeDuration || '0');
@@ -2817,8 +2970,26 @@ let AmLyrics$1 = class AmLyrics extends i {
                 else {
                     charWipeAnimation = isRTL ? 'wipe-rtl' : 'wipe';
                 }
+                const existingAnimation = charAnimationsMap.get(span) || span.style.animation || '';
+                const animationParts = [];
+                if (existingAnimation && existingAnimation.includes('grow-dynamic')) {
+                    animationParts.push(existingAnimation.split(',')[0].trim());
+                }
+                if (charIndex > 0) {
+                    const arrivalTime = span.dataset.preWipeArrival
+                        ? parseFloat(span.dataset.preWipeArrival)
+                        : wipeDelay;
+                    const constantDuration = parseFloat(span.dataset.preWipeDuration || '100');
+                    const animDelay = arrivalTime - constantDuration;
+                    if (constantDuration > 0) {
+                        animationParts.push(`pre-wipe-char ${constantDuration}ms linear ${animDelay}ms forwards`);
+                    }
+                }
                 if (wipeDuration > 0) {
-                    charAnimationsMap.set(span, `${charWipeAnimation} ${wipeDuration}ms linear ${wipeDelay}ms forwards`);
+                    animationParts.push(`${charWipeAnimation} ${wipeDuration}ms linear ${wipeDelay}ms forwards`);
+                }
+                if (animationParts.length > 0) {
+                    charAnimationsMap.set(span, animationParts.join(', '));
                 }
             });
         }
@@ -3200,9 +3371,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
@@ -3274,88 +3443,13 @@ 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 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) => {
@@ -3589,9 +3683,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 `
@@ -3706,17 +3798,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"
@@ -3726,7 +3816,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
@@ -3737,9 +3826,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>
                         `
                 : ''}
@@ -4654,8 +4745,8 @@ AmLyrics$1.styles = i$3 `
           0.75em 100%,
           0% 100%;
         background-position:
-          -0.375em 0%,
-          left;
+          -0.75em 0%,
+          -0.375em 0%;
       }
       100% {
         background-size:
@@ -4749,7 +4840,7 @@ AmLyrics$1.styles = i$3 `
           0.75em 100%,
           0% 100%;
         background-position:
-          -0.85em 0%,
+          -0.75em 0%,
           left;
       }
       to {
@@ -4757,7 +4848,7 @@ AmLyrics$1.styles = i$3 `
           0.75em 100%,
           0% 100%;
         background-position:
-          -0.85em 0%,
+          -0.375em 0%,
           left;
       }
     }
@@ -5024,18 +5115,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({