@applemusic-like-lyrics/core 0.4.2 → 0.5.1

package/dist/amll-core.cjs

@@ -35,6 +35,9 @@ let bezier_easing = require("bezier-easing");
 bezier_easing = __toESM(bezier_easing, 1);
 //#region src/bg-render/base.ts
 var AbstractBaseRenderer = class {};
+function clamp1(x) {
+	return Math.max(1, x);
+}
 var BaseRenderer = class extends AbstractBaseRenderer {
 	observer;
 	flowSpeed = 1;
@@ -43,8 +46,8 @@ var BaseRenderer = class extends AbstractBaseRenderer {
 		super();
 		this.canvas = canvas;
 		this.observer = new ResizeObserver(() => {
-			const width = Math.max(1, canvas.clientWidth * window.devicePixelRatio * this.currerntRenderScale);
-			const height = Math.max(1, canvas.clientHeight * window.devicePixelRatio * this.currerntRenderScale);
+			const width = clamp1(canvas.clientWidth * window.devicePixelRatio * this.currerntRenderScale);
+			const height = clamp1(canvas.clientHeight * window.devicePixelRatio * this.currerntRenderScale);
 			this.onResize(width, height);
 		});
 		this.observer.observe(canvas);
@@ -232,6 +235,17 @@ function blurImage(imageData, radius, quality) {
 	}
 }
 //#endregion
+//#region src/utils/clamp.ts
+function clamp(x, min, max) {
+	return Math.min(Math.max(x, min), max);
+}
+function clamp01(x) {
+	return clamp(x, 0, 1);
+}
+function clampPositive(x) {
+	return Math.max(0, x);
+}
+//#endregion
 //#region src/bg-render/mesh-renderer/cp-presets.ts
 /** @internal */
 const p = (cx, cy, x, y, ur = 0, vr = 0, up = 1, vp = 1) => Object.freeze({
@@ -404,11 +418,8 @@ const CONTROL_POINT_PRESETS = [
 * 目的是取代原先大量的预设控制点代码
 */
 const randomRange = (min, max) => Math.random() * (max - min) + min;
-function clamp$1(x, min, max) {
-	return Math.min(Math.max(x, min), max);
-}
 function smoothstep(edge0, edge1, x) {
-	const t = clamp$1((x - edge0) / (edge1 - edge0), 0, 1);
+	const t = clamp01((x - edge0) / (edge1 - edge0));
 	return t * t * (3 - 2 * t);
 }
 function smoothifyControlPoints(conf, w, h, iterations = 2, factor = .5, factorIterationModifier = .1) {
@@ -478,7 +489,7 @@ function smoothifyControlPoints(conf, w, h, iterations = 2, factor = .5, factorI
 			}
 		}
 		grid = newGrid;
-		f = Math.min(1, Math.max(f + factorIterationModifier, 0));
+		f = clamp01(f + factorIterationModifier);
 	}
 	for (let j = 0; j < h; j++) for (let i = 0; i < w; i++) conf[j * w + i] = grid[j][i];
 }
@@ -1267,7 +1278,7 @@ var MeshGradientRenderer = class extends BaseRenderer {
 			gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 			this.quadProgram.use();
 			this.quadProgram.setUniform1i("u_texture", 0);
-			this.quadProgram.setUniform1f("u_alpha", easeInOutSine(Math.min(1, Math.max(0, state.alpha))));
+			this.quadProgram.setUniform1f("u_alpha", easeInOutSine(clamp01(state.alpha)));
 			gl.activeTexture(gl.TEXTURE0);
 			gl.bindTexture(gl.TEXTURE_2D, this.fboTexture);
 			gl.bindBuffer(gl.ARRAY_BUFFER, this.quadBuffer);
@@ -1502,7 +1513,7 @@ var PixiRenderer = class extends BaseRenderer {
 	lastContainer = /* @__PURE__ */ new Set();
 	onTick = (delta) => {
 		for (const lastContainer of this.lastContainer) {
-			lastContainer.alpha = Math.max(0, lastContainer.alpha - delta / 60);
+			lastContainer.alpha = clampPositive(lastContainer.alpha - delta / 60);
 			if (lastContainer.alpha <= 0) {
 				this.app.stage.removeChild(lastContainer);
 				this.lastContainer.delete(lastContainer);
@@ -1720,6 +1731,10 @@ var BackgroundRender = class BackgroundRender {
 //#region src/styles/lyric-player.module.css
 var lyric_player_module_default = {
 	"active": "FmKaba_active",
+	"bgWrapper": "FmKaba_bgWrapper",
+	"bgWrapperActive": "FmKaba_bgWrapperActive",
+	"bgWrapperHidden": "FmKaba_bgWrapperHidden",
+	"bgWrapperTop": "FmKaba_bgWrapperTop",
 	"bottomLine": "FmKaba_bottomLine",
 	"dirty": "FmKaba_dirty",
 	"disableSpring": "FmKaba_disableSpring",
@@ -1732,8 +1747,10 @@ var lyric_player_module_default = {
 	"lyricBgLine": "FmKaba_lyricBgLine",
 	"lyricDuetLine": "FmKaba_lyricDuetLine",
 	"lyricLine": "FmKaba_lyricLine",
+	"lyricLineWrapper": "FmKaba_lyricLineWrapper",
 	"lyricMainLine": "FmKaba_lyricMainLine",
 	"lyricSubLine": "FmKaba_lyricSubLine",
+	"playing": "FmKaba_playing",
 	"romanWord": "FmKaba_romanWord",
 	"rubyWord": "FmKaba_rubyWord",
 	"tmpDisableTransition": "FmKaba_tmpDisableTransition",
@@ -1741,14 +1758,6 @@ var lyric_player_module_default = {
 	"wordWithRuby": "FmKaba_wordWithRuby"
 };
 //#endregion
-//#region src/utils/eq-set.ts
-const eqSet = (xs, ys) => xs.size === ys.size && [...xs].every((x) => ys.has(x));
-//#endregion
-//#region src/utils/is-cjk.ts
-const isCJK = (char) => {
-	return /^[\p{Unified_Ideograph}\u0800-\u9FFC]+$/u.test(char);
-};
-//#endregion
 //#region src/utils/optimize-lyric.ts
 const DEFAULT_OPTIMIZE_OPTIONS = {
 	normalizeSpaces: true,
@@ -1842,27 +1851,31 @@ function cleanUnintentionalOverlaps(lines) {
 * 尝试让歌词提前最多 600ms 开始，如果有重叠则尝试最多提前 400ms 或上一行时长的 30%
 */
 function tryAdvanceStartTime(lines) {
-	for (let i = lines.length - 1; i >= 0; i--) {
+	const defaultAdvanceAmount = 600;
+	const fallbackAdvanceAmount = 400;
+	const fallbackAdvanceRatio = .3;
+	let prevLineStartTime = 0;
+	let prevLineEndTime = 0;
+	let prevMainGroupStartTime = 0;
+	let prevMainGroupEndTime = 0;
+	let hasPrevLine = false;
+	for (let i = 0; i < lines.length; i++) {
 		const line = lines[i];
 		if (line.isBG) continue;
-		let prevLine = null;
-		if (i > 0) {
-			let prevIdx = i - 1;
-			if (lines[prevIdx].isBG) prevIdx--;
-			if (prevIdx >= 0) prevLine = lines[prevIdx];
-		}
+		const originalStartTime = line.startTime;
+		const originalEndTime = line.endTime;
 		let targetAdvanceAmount = 0;
 		let safeBoundary = 0;
-		if (prevLine) if (line.startTime >= prevLine.endTime) {
-			targetAdvanceAmount = 600;
-			safeBoundary = prevLine.endTime;
+		if (hasPrevLine) if (originalStartTime >= prevLineEndTime) {
+			targetAdvanceAmount = defaultAdvanceAmount;
+			safeBoundary = prevMainGroupEndTime;
 		} else {
-			targetAdvanceAmount = 400;
-			const prevDuration = prevLine.endTime - prevLine.startTime;
-			safeBoundary = prevLine.startTime + prevDuration * .3;
+			targetAdvanceAmount = fallbackAdvanceAmount;
+			const prevDuration = prevLineEndTime - prevLineStartTime;
+			safeBoundary = prevLineStartTime + prevDuration * fallbackAdvanceRatio;
 		}
 		else {
-			targetAdvanceAmount = 600;
+			targetAdvanceAmount = defaultAdvanceAmount;
 			safeBoundary = 0;
 		}
 		const targetTime = line.startTime - targetAdvanceAmount;
@@ -1870,6 +1883,20 @@ function tryAdvanceStartTime(lines) {
 		if (newStartTime < line.startTime) line.startTime = newStartTime;
 		const nextLine = lines[i + 1];
 		if (nextLine?.isBG) nextLine.startTime = line.startTime;
+		if (hasPrevLine) if (originalStartTime < prevMainGroupEndTime && originalEndTime > prevMainGroupStartTime) {
+			prevMainGroupStartTime = Math.min(prevMainGroupStartTime, originalStartTime);
+			prevMainGroupEndTime = Math.max(prevMainGroupEndTime, originalEndTime);
+		} else {
+			prevMainGroupStartTime = originalStartTime;
+			prevMainGroupEndTime = originalEndTime;
+		}
+		else {
+			prevMainGroupStartTime = originalStartTime;
+			prevMainGroupEndTime = originalEndTime;
+		}
+		prevLineStartTime = originalStartTime;
+		prevLineEndTime = originalEndTime;
+		hasPrevLine = true;
 	}
 }
 /**
@@ -1892,6 +1919,145 @@ function optimizeLyricLines(lines, options) {
 	if (config.tryAdvanceStartTime) tryAdvanceStartTime(lines);
 }
 //#endregion
+//#region src/lyric-player/dom/interlude-dots.ts
+function easeInOutBack(x) {
+	const c2 = 1.70158 * 1.525;
+	return x < .5 ? (2 * x) ** 2 * ((c2 + 1) * 2 * x - c2) / 2 : ((2 * x - 2) ** 2 * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
+}
+function easeOutExpo(x) {
+	return x === 1 ? 1 : 1 - 2 ** (-10 * x);
+}
+var InterludeDots = class {
+	element = document.createElement("div");
+	dot0 = document.createElement("span");
+	dot1 = document.createElement("span");
+	dot2 = document.createElement("span");
+	left = 0;
+	top = 0;
+	playing = true;
+	lastStyle = "";
+	currentInterlude;
+	currentTime = 0;
+	targetBreatheDuration = 1500;
+	constructor() {
+		this.element.className = lyric_player_module_default.interludeDots;
+		this.element.appendChild(this.dot0);
+		this.element.appendChild(this.dot1);
+		this.element.appendChild(this.dot2);
+	}
+	getElement() {
+		return this.element;
+	}
+	setTransform(left = this.left, top = this.top) {
+		this.left = left;
+		this.top = top;
+		this.update();
+	}
+	setInterlude(interlude) {
+		this.currentInterlude = interlude;
+		this.currentTime = interlude?.[0] ?? 0;
+		if (interlude) this.element.classList.add(lyric_player_module_default.enabled);
+		else this.element.classList.remove(lyric_player_module_default.enabled);
+	}
+	pause() {
+		this.playing = false;
+		this.element.classList.remove(lyric_player_module_default.playing);
+	}
+	resume() {
+		this.playing = true;
+		this.element.classList.add(lyric_player_module_default.playing);
+	}
+	update(delta = 0) {
+		if (!this.playing) return;
+		this.currentTime += delta;
+		let curStyle = "";
+		curStyle += `transform:translate(${this.left.toFixed(2)}px, ${this.top.toFixed(2)}px)`;
+		if (this.currentInterlude) {
+			const interludeDuration = this.currentInterlude[1] - this.currentInterlude[0];
+			const currentDuration = this.currentTime - this.currentInterlude[0];
+			if (currentDuration <= interludeDuration) {
+				const breatheDuration = interludeDuration / Math.ceil(interludeDuration / this.targetBreatheDuration);
+				let scale = 1;
+				let globalOpacity = 1;
+				scale *= Math.sin(1.5 * Math.PI - currentDuration / breatheDuration * 2) / 20 + 1;
+				if (currentDuration < 2e3) scale *= easeOutExpo(currentDuration / 2e3);
+				if (currentDuration < 500) globalOpacity = 0;
+				else if (currentDuration < 1e3) globalOpacity *= (currentDuration - 500) / 500;
+				if (interludeDuration - currentDuration < 750) scale *= 1 - easeInOutBack((750 - (interludeDuration - currentDuration)) / 750 / 2);
+				if (interludeDuration - currentDuration < 375) globalOpacity *= clamp01((interludeDuration - currentDuration) / 375);
+				const dotsDuration = clampPositive(interludeDuration - 750);
+				scale = clampPositive(scale) * .7;
+				curStyle += ` scale(${scale})`;
+				const dot0Opacity = clamp(.25, currentDuration * 3 / dotsDuration * .75, 1);
+				const dot1Opacity = clamp(.25, (currentDuration - dotsDuration / 3) * 3 / dotsDuration * .75, 1);
+				const dot2Opacity = clamp(.25, (currentDuration - dotsDuration / 3 * 2) * 3 / dotsDuration * .75, 1);
+				this.dot0.style.opacity = `${clamp01(globalOpacity * dot0Opacity)}`;
+				this.dot1.style.opacity = `${clamp01(globalOpacity * dot1Opacity)}`;
+				this.dot2.style.opacity = `${clamp01(globalOpacity * dot2Opacity)}`;
+			} else {
+				curStyle += " scale(0)";
+				this.dot0.style.opacity = "0";
+				this.dot1.style.opacity = "0";
+				this.dot2.style.opacity = "0";
+			}
+			curStyle += ";";
+			if (this.lastStyle !== curStyle) {
+				this.element.setAttribute("style", curStyle);
+				this.lastStyle = curStyle;
+			}
+		}
+	}
+	dispose() {
+		this.element.remove();
+	}
+};
+//#endregion
+//#region src/utils/schedule.ts
+const measureTasks = [];
+const mutateTasks = [];
+let scheduled = false;
+function onFlush() {
+	let tmp = mutateTasks.shift();
+	while (tmp) {
+		try {
+			tmp.resolve(tmp.task());
+		} catch (error) {
+			tmp.reject(error);
+		}
+		tmp = mutateTasks.shift();
+	}
+	tmp = measureTasks.shift();
+	while (tmp) {
+		try {
+			tmp.resolve(tmp.task());
+		} catch (error) {
+			tmp.reject(error);
+		}
+		tmp = measureTasks.shift();
+	}
+	scheduled = false;
+}
+function scheduleFlush() {
+	if (!scheduled) {
+		scheduled = true;
+		requestAnimationFrame(onFlush);
+	}
+}
+function measure(callback) {
+	const task = {
+		task: callback,
+		resolve: () => {},
+		reject: () => {}
+	};
+	const promise = new Promise((resolve, reject) => {
+		task.resolve = resolve;
+		task.reject = reject;
+	});
+	measureTasks.push(task);
+	scheduleFlush();
+	return promise;
+}
+//#endregion
 //#region src/utils/derivative.ts
 function derivative(f) {
 	const h = .001;
@@ -2006,67 +2172,7 @@ function solveSpring(from, velocity, to, delay = 0, params) {
 	};
 }
 //#endregion
-//#region src/utils/schedule.ts
-const measureTasks = [];
-const mutateTasks = [];
-let scheduled = false;
-function onFlush() {
-	let tmp = mutateTasks.shift();
-	while (tmp) {
-		try {
-			tmp.resolve(tmp.task());
-		} catch (error) {
-			tmp.reject(error);
-		}
-		tmp = mutateTasks.shift();
-	}
-	tmp = measureTasks.shift();
-	while (tmp) {
-		try {
-			tmp.resolve(tmp.task());
-		} catch (error) {
-			tmp.reject(error);
-		}
-		tmp = measureTasks.shift();
-	}
-	scheduled = false;
-}
-function scheduleFlush() {
-	if (!scheduled) {
-		scheduled = true;
-		requestAnimationFrame(onFlush);
-	}
-}
-function measure(callback) {
-	const task = {
-		task: callback,
-		resolve: () => {},
-		reject: () => {}
-	};
-	const promise = new Promise((resolve, reject) => {
-		task.resolve = resolve;
-		task.reject = reject;
-	});
-	measureTasks.push(task);
-	scheduleFlush();
-	return promise;
-}
-function mutate(callback) {
-	const task = {
-		task: callback,
-		resolve: () => {},
-		reject: () => {}
-	};
-	const promise = new Promise((resolve, reject) => {
-		task.resolve = resolve;
-		task.reject = reject;
-	});
-	mutateTasks.push(task);
-	scheduleFlush();
-	return promise;
-}
-//#endregion
-//#region src/lyric-player/bottom-line.ts
+//#region src/lyric-player/base/bottom-line.ts
 var BottomLineEl = class {
 	element = document.createElement("div");
 	left = 0;
@@ -2155,150 +2261,437 @@ var BottomLineEl = class {
 	}
 };
 //#endregion
-//#region src/lyric-player/dom/interlude-dots.ts
-function easeInOutBack(x) {
-	const c2 = 1.70158 * 1.525;
-	return x < .5 ? (2 * x) ** 2 * ((c2 + 1) * 2 * x - c2) / 2 : ((2 * x - 2) ** 2 * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
+//#region src/lyric-player/base/consts.ts
+/** 歌词中不雅用语的掩码模式 */
+const MaskObsceneWordsMode = {
+	/** 禁用任何不雅用语掩码 */
+	Disabled: "",
+	/** 完全掩码所有不雅用语 */
+	FullMask: "full-mask",
+	/** 保留首尾字符，屏蔽中间字符 */
+	PartialMask: "partial-mask"
+};
+/**
+* 歌词行的渲染模式
+* @internal
+*/
+const LyricLineRenderMode = {
+	SOLID: 0,
+	GRADIENT: 1
+};
+/** 布局对齐锚点 */
+const LayoutAlignAnchor = {
+	Top: "top",
+	Center: "center",
+	Bottom: "bottom"
+};
+//#endregion
+//#region src/lyric-player/base/layout.ts
+/**
+* 根据当前时间与当前目标行，计算当前是否处于某个可展示的间奏区间。
+*
+* 仅识别时间轴上的间奏空档，不涉及具体 DOM 元素的创建与摆放。
+* 若当前不应展示间奏动画，则返回 `undefined`。
+*/
+function computeCurrentInterlude(input) {
+	const currentTime = input.currentTime + 20;
+	const currentIndex = input.scrollToIndex;
+	const groups = input.currentGroups;
+	const checkGap = (k) => {
+		if (k < -1 || k >= groups.length - 1) return void 0;
+		const prevGroup = k === -1 ? null : groups[k];
+		const nextGroup = groups[k + 1];
+		const gapStart = prevGroup ? prevGroup.endTime : 0;
+		const gapEnd = Math.max(gapStart, nextGroup.startTime - 250);
+		if (gapEnd - gapStart < 4e3) return void 0;
+		if (gapEnd > currentTime && gapStart < currentTime) return {
+			startTime: Math.max(gapStart, currentTime),
+			endTime: gapEnd,
+			anchorLineIndex: k,
+			isNextDuet: nextGroup.mainLine.getLine().isDuet
+		};
+	};
+	return checkGap(currentIndex - 1) || checkGap(currentIndex) || checkGap(currentIndex + 1);
 }
-function easeOutExpo(x) {
-	return x === 1 ? 1 : 1 - 2 ** (-10 * x);
+/**
+* 根据当前播放上下文计算歌词纵向滚动动画的弹簧参数。
+*
+* 其策略为：
+* - seeking 或间奏时使用更稳定的固定参数
+* - 普通播放时根据相邻歌词的时间间隔动态调整 stiffness / damping
+*/
+function computeLinePosYSpringParams(input) {
+	const { enabled, currentGroups, scrollToIndex, isSeeking, isInterludeActive } = input;
+	if (!enabled || currentGroups.length === 0) return { shouldUpdate: false };
+	if (isSeeking || isInterludeActive) return {
+		shouldUpdate: true,
+		params: {
+			stiffness: 90,
+			damping: 15
+		}
+	};
+	const currentGroup = currentGroups[scrollToIndex];
+	const prevGroup = currentGroups[scrollToIndex - 1];
+	if (!currentGroup || !prevGroup) return { shouldUpdate: false };
+	const interval = currentGroup.startTime - prevGroup.startTime;
+	const MIN_INTERVAL = 100;
+	const MAX_INTERVAL = 800;
+	const clampedInterval = clamp(interval, MIN_INTERVAL, MAX_INTERVAL);
+	const MAX_STIFFNESS = 220;
+	const MIN_STIFFNESS = 170;
+	let ratio = 1 - (clampedInterval - MIN_INTERVAL) / (MAX_INTERVAL - MIN_INTERVAL);
+	ratio = ratio ** .2;
+	const targetStiffness = MIN_STIFFNESS + ratio * (MAX_STIFFNESS - MIN_STIFFNESS);
+	return {
+		shouldUpdate: true,
+		params: {
+			stiffness: targetStiffness,
+			damping: Math.sqrt(targetStiffness) * 2.2
+		}
+	};
 }
-const clamp = (min, cur, max) => Math.max(min, Math.min(cur, max));
-var InterludeDots = class {
-	element = document.createElement("div");
-	dot0 = document.createElement("span");
-	dot1 = document.createElement("span");
-	dot2 = document.createElement("span");
-	left = 0;
-	top = 0;
-	playing = true;
-	lastStyle = "";
-	currentInterlude;
-	currentTime = 0;
-	targetBreatheDuration = 1500;
-	constructor() {
-		this.element.className = lyric_player_module_default.interludeDots;
-		this.element.appendChild(this.dot0);
-		this.element.appendChild(this.dot1);
-		this.element.appendChild(this.dot2);
-	}
-	getElement() {
-		return this.element;
-	}
-	setTransform(left = this.left, top = this.top) {
-		this.left = left;
-		this.top = top;
-		this.update();
-	}
-	setInterlude(interlude) {
-		this.currentInterlude = interlude;
-		this.currentTime = interlude?.[0] ?? 0;
-		if (interlude) this.element.classList.add(lyric_player_module_default.enabled);
-		else this.element.classList.remove(lyric_player_module_default.enabled);
-	}
-	pause() {
-		this.playing = false;
-		this.element.classList.remove(lyric_player_module_default.playing);
-	}
-	resume() {
-		this.playing = true;
-		this.element.classList.add(lyric_player_module_default.playing);
-	}
-	update(delta = 0) {
-		if (!this.playing) return;
-		this.currentTime += delta;
-		let curStyle = "";
-		curStyle += `transform:translate(${this.left.toFixed(2)}px, ${this.top.toFixed(2)}px)`;
-		if (this.currentInterlude) {
-			const interludeDuration = this.currentInterlude[1] - this.currentInterlude[0];
-			const currentDuration = this.currentTime - this.currentInterlude[0];
-			if (currentDuration <= interludeDuration) {
-				const breatheDuration = interludeDuration / Math.ceil(interludeDuration / this.targetBreatheDuration);
-				let scale = 1;
-				let globalOpacity = 1;
-				scale *= Math.sin(1.5 * Math.PI - currentDuration / breatheDuration * 2) / 20 + 1;
-				if (currentDuration < 2e3) scale *= easeOutExpo(currentDuration / 2e3);
-				if (currentDuration < 500) globalOpacity = 0;
-				else if (currentDuration < 1e3) globalOpacity *= (currentDuration - 500) / 500;
-				if (interludeDuration - currentDuration < 750) scale *= 1 - easeInOutBack((750 - (interludeDuration - currentDuration)) / 750 / 2);
-				if (interludeDuration - currentDuration < 375) globalOpacity *= clamp(0, (interludeDuration - currentDuration) / 375, 1);
-				const dotsDuration = Math.max(0, interludeDuration - 750);
-				scale = Math.max(0, scale) * .7;
-				curStyle += ` scale(${scale})`;
-				const dot0Opacity = clamp(.25, currentDuration * 3 / dotsDuration * .75, 1);
-				const dot1Opacity = clamp(.25, (currentDuration - dotsDuration / 3) * 3 / dotsDuration * .75, 1);
-				const dot2Opacity = clamp(.25, (currentDuration - dotsDuration / 3 * 2) * 3 / dotsDuration * .75, 1);
-				this.dot0.style.opacity = `${clamp(0, Math.max(0, globalOpacity * dot0Opacity), 1)}`;
-				this.dot1.style.opacity = `${clamp(0, Math.max(0, globalOpacity * dot1Opacity), 1)}`;
-				this.dot2.style.opacity = `${clamp(0, Math.max(0, globalOpacity * dot2Opacity), 1)}`;
+/**
+* 计算一组歌词在当前布局中的视觉呈现参数。
+*
+* 根据播放状态、缓冲状态、布局模式与间奏信息，
+* 生成一组歌词最终应使用的活跃状态、不透明度与模糊值。
+*/
+function computeGroupPresentation(input) {
+	const { groupIndex, scrollToIndex, latestIndex, hasBuffered, hidePassedLines, isPlaying, isNonDynamic, enableBlur, isUserScrolling, isCompact, interlude } = input;
+	const isActive = hasBuffered || groupIndex >= scrollToIndex && groupIndex < latestIndex;
+	const blurLevel = computeLineBlur({
+		enableBlur,
+		isUserScrolling,
+		isActive,
+		itemIndex: groupIndex,
+		scrollToIndex,
+		latestIndex,
+		isCompact
+	});
+	let targetOpacity;
+	if (hidePassedLines) if (groupIndex < (interlude ? interlude.anchorLineIndex + 1 : scrollToIndex) && isPlaying) targetOpacity = 1e-4;
+	else if (hasBuffered) targetOpacity = .85;
+	else targetOpacity = isNonDynamic ? .2 : 1;
+	else if (hasBuffered) targetOpacity = .85;
+	else targetOpacity = isNonDynamic ? .2 : 1;
+	return {
+		isActive,
+		targetOpacity,
+		blurLevel
+	};
+}
+/**
+* 计算一行歌词在当前布局中的模糊等级。
+*
+* 越远离当前对齐区域的歌词会得到更高的模糊值；
+* 活跃行、滚动交互中或关闭模糊效果时返回 `0`。
+*/
+function computeLineBlur(input) {
+	const { enableBlur, isUserScrolling, isActive, itemIndex, scrollToIndex, latestIndex, isCompact } = input;
+	if (!enableBlur || isUserScrolling || isActive) return 0;
+	let blurLevel = 1;
+	if (itemIndex < scrollToIndex) blurLevel += Math.abs(scrollToIndex - itemIndex) + 1;
+	else blurLevel += Math.abs(itemIndex - Math.max(scrollToIndex, latestIndex));
+	return isCompact ? blurLevel * .8 : blurLevel;
+}
+//#endregion
+//#region src/lyric-player/base/scroll.ts
+/**
+* 将滚动偏移量限制在当前允许的滚动边界内。
+*
+* 当手势滚动、滚轮滚动或惯性滚动更新了 {@link PlayerScrollState.scrollOffset}
+* 后，应调用本函数以避免视图越界。
+*/
+function clampPlayerScrollOffset(scrollState) {
+	scrollState.scrollOffset = clamp(scrollState.scrollOffset, scrollState.scrollBoundary.minOffset, scrollState.scrollBoundary.maxOffset);
+}
+/**
+* 重置滚动状态到未发生用户滚动时的初始状态。
+*
+* 本函数会清除当前偏移，并结束“已滚动”与“正在滚动”的标记；
+* **不会清理**外部持有的计时器或事件监听器。
+*/
+function resetPlayerScrollState(scrollState) {
+	scrollState.isScrolled = false;
+	scrollState.scrollOffset = 0;
+	scrollState.isUserScrolling = false;
+}
+/**
+* 向指定元素挂载歌词滚动相关的交互处理器。
+*
+* 该函数会处理：
+* - 触摸拖拽滚动
+* - 触摸结束后的惯性滚动
+* - 滚轮滚动
+* - 轻触时的点击透传
+*
+* 只更新 {@link PlayerScrollState} 并通过回调通知宿主执行布局或其它副作用，
+* 不直接依赖具体的播放器类实现。
+*/
+function attachPlayerScrollHandlers(element, scrollState, callbacks) {
+	let startScrollY = 0;
+	let startTouchPosY = 0;
+	let startTouchStartX = 0;
+	let startTouchStartY = 0;
+	let lastMoveY = 0;
+	let startScrollTime = 0;
+	let scrollSpeed = 0;
+	let curScrollId = 0;
+	element.addEventListener("touchstart", (evt) => {
+		if (callbacks.onBeginScroll()) {
+			scrollState.isUserScrolling = true;
+			evt.preventDefault();
+			startScrollY = scrollState.scrollOffset;
+			startTouchPosY = evt.touches[0].screenY;
+			lastMoveY = startTouchPosY;
+			startTouchStartX = evt.touches[0].screenX;
+			startTouchStartY = evt.touches[0].screenY;
+			startScrollTime = Date.now();
+			scrollSpeed = 0;
+			callbacks.onLayout(true, true);
+		}
+	});
+	element.addEventListener("touchmove", (evt) => {
+		if (callbacks.onBeginScroll()) {
+			evt.preventDefault();
+			const currentY = evt.touches[0].screenY;
+			const deltaY = currentY - startTouchPosY;
+			scrollState.scrollOffset = startScrollY - deltaY;
+			clampPlayerScrollOffset(scrollState);
+			const now = Date.now();
+			const dt = now - startScrollTime;
+			if (dt > 0) scrollSpeed = (currentY - lastMoveY) / dt;
+			lastMoveY = currentY;
+			startScrollTime = now;
+			callbacks.onLayout(true, true);
+		}
+	});
+	element.addEventListener("touchend", (evt) => {
+		if (callbacks.onBeginScroll()) {
+			evt.preventDefault();
+			const touch = evt.changedTouches[0];
+			const moveX = Math.abs(touch.screenX - startTouchStartX);
+			const moveY = Math.abs(touch.screenY - startTouchStartY);
+			if (moveX < 10 && moveY < 10) {
+				const target = document.elementFromPoint(touch.clientX, touch.clientY);
+				if (target instanceof HTMLElement && callbacks.containsTarget(target)) callbacks.clickTarget(target);
+				scrollState.isUserScrolling = false;
+				callbacks.onEndScroll();
+				return;
+			}
+			startTouchPosY = 0;
+			const scrollId = ++curScrollId;
+			if (Math.abs(scrollSpeed) < .1) scrollSpeed = 0;
+			let lastFrameTime = performance.now();
+			const onScrollFrame = (time) => {
+				if (scrollId !== curScrollId) return;
+				const dt = time - lastFrameTime;
+				lastFrameTime = time;
+				if (dt <= 0 || dt > 100) {
+					requestAnimationFrame(onScrollFrame);
+					return;
+				}
+				if (Math.abs(scrollSpeed) > .05) {
+					scrollState.scrollOffset -= scrollSpeed * dt;
+					clampPlayerScrollOffset(scrollState);
+					const frictionFactor = .95 ** (dt / 16);
+					scrollSpeed *= frictionFactor;
+					callbacks.onLayout(true, true);
+					requestAnimationFrame(onScrollFrame);
+				} else {
+					scrollState.isUserScrolling = false;
+					callbacks.onEndScroll();
+				}
+			};
+			requestAnimationFrame(onScrollFrame);
+		} else scrollState.isUserScrolling = false;
+	});
+	element.addEventListener("wheel", (evt) => {
+		if (callbacks.onBeginScroll()) {
+			evt.preventDefault();
+			if (evt.deltaMode === evt.DOM_DELTA_PIXEL) {
+				scrollState.scrollOffset += evt.deltaY;
+				clampPlayerScrollOffset(scrollState);
+				callbacks.onLayout(true, false);
 			} else {
-				curStyle += " scale(0)";
-				this.dot0.style.opacity = "0";
-				this.dot1.style.opacity = "0";
-				this.dot2.style.opacity = "0";
+				scrollState.scrollOffset += evt.deltaY * 50;
+				clampPlayerScrollOffset(scrollState);
+				callbacks.onLayout(false, false);
 			}
-			curStyle += ";";
-			if (this.lastStyle !== curStyle) {
-				this.element.setAttribute("style", curStyle);
-				this.lastStyle = curStyle;
+		}
+	}, { passive: false });
+}
+//#endregion
+//#region src/utils/eq-set.ts
+const eqSet = (xs, ys) => xs.size === ys.size && [...xs].every((x) => ys.has(x));
+//#endregion
+//#region src/lyric-player/base/timeline.ts
+/**
+* 计算指定时间点的热行/缓冲行状态转移的纯函数。其行为包括：
+*
+* - 根据当前时间和已有的热行状态，计算出新的热行状态，并返回应新增的热行 ID 和应移除的热行 ID
+* - 根据新的热行状态和已有的缓冲行状态，计算出应移除的缓冲行 ID
+*/
+function computePlayerTimeState(input) {
+	const { time, currentGroups, timelineState: { hotGroups, bufferedGroups } } = input;
+	const nextHotGroups = new Set(hotGroups);
+	const addedIds = /* @__PURE__ */ new Set();
+	const removedHotIds = /* @__PURE__ */ new Set();
+	const removedBufferedIds = /* @__PURE__ */ new Set();
+	for (const lastHotId of hotGroups) {
+		const group = currentGroups[lastHotId];
+		if (!group || time < group.startTime || group.endTime <= time) {
+			nextHotGroups.delete(lastHotId);
+			removedHotIds.add(lastHotId);
+		}
+	}
+	for (let id = 0; id < currentGroups.length; id++) {
+		const group = currentGroups[id];
+		if (!group) continue;
+		if (group.startTime <= time && group.endTime > time && !nextHotGroups.has(id)) {
+			nextHotGroups.add(id);
+			addedIds.add(id);
+		}
+	}
+	for (const id of bufferedGroups) if (!nextHotGroups.has(id)) removedBufferedIds.add(id);
+	return {
+		nextHotGroups,
+		addedIds,
+		removedHotIds,
+		removedBufferedIds
+	};
+}
+/**
+* 在 seeking 场景下，根据当前时间选出应对齐滚动到的目标行索引。
+*
+* 若当前仍存在缓冲行，则优先对齐到最靠前的缓冲行；
+* 否则对齐到第一条开始时间不小于当前时间的歌词行。
+*/
+function pickScrollToIndexForSeek(time, currentGroups, bufferedGroups) {
+	if (bufferedGroups.size > 0) return Math.min(...bufferedGroups);
+	const foundIndex = currentGroups.findIndex((group) => group.startTime >= time);
+	return foundIndex === -1 ? currentGroups.length : foundIndex;
+}
+/**
+* 提交时间线状态转移的纯函数。
+*
+* 把一次时间线状态转移写回 {@link PlayerTimelineState}，
+* 并返回一份供宿主执行的副作用应用计划，例如启用/禁用哪些歌词行、
+* 是否需要重置用户滚动状态、是否需要触发布局。
+*/
+function commitPlayerTimeState(input) {
+	const { timelineState, time, currentGroups, hasBottomContent, stateResult } = input;
+	const { addedIds, removedHotIds, removedBufferedIds } = stateResult;
+	const { isSeeking } = timelineState;
+	timelineState.currentTime = time;
+	timelineState.hotGroups = stateResult.nextHotGroups;
+	let shouldLayout = false;
+	let shouldResetScroll = false;
+	const groupsToEnable = [];
+	const groupsToDisable = /* @__PURE__ */ new Set();
+	if (isSeeking) {
+		timelineState.bufferedGroups = new Set([...timelineState.hotGroups]);
+		timelineState.scrollToIndex = pickScrollToIndexForSeek(time, currentGroups, timelineState.bufferedGroups);
+		for (const id of removedHotIds) groupsToDisable.add(id);
+		for (const id of timelineState.hotGroups) groupsToEnable.push(id);
+		for (const id of removedBufferedIds) groupsToDisable.add(id);
+		shouldResetScroll = true;
+		shouldLayout = true;
+	} else if (addedIds.size > 0) {
+		for (const id of addedIds) {
+			timelineState.bufferedGroups.add(id);
+			groupsToEnable.push(id);
+		}
+		for (const id of removedBufferedIds) {
+			timelineState.bufferedGroups.delete(id);
+			groupsToDisable.add(id);
+		}
+		if (timelineState.bufferedGroups.size > 0) timelineState.scrollToIndex = Math.min(...timelineState.bufferedGroups);
+		shouldLayout = true;
+	} else if (removedBufferedIds.size > 0 && eqSet(removedBufferedIds, timelineState.bufferedGroups)) {
+		for (const id of timelineState.bufferedGroups) {
+			if (timelineState.hotGroups.has(id)) continue;
+			timelineState.bufferedGroups.delete(id);
+			groupsToDisable.add(id);
+		}
+		shouldLayout = true;
+	}
+	if (timelineState.bufferedGroups.size === 0 && currentGroups.length > 0) {
+		if (time >= currentGroups[currentGroups.length - 1].endTime) {
+			const targetIndex = hasBottomContent ? currentGroups.length : currentGroups.length - 1;
+			if (timelineState.scrollToIndex !== targetIndex) {
+				timelineState.scrollToIndex = targetIndex;
+				shouldLayout = true;
 			}
 		}
 	}
-	dispose() {
-		this.element.remove();
-	}
-};
+	timelineState.lastCurrentTime = time;
+	return {
+		shouldLayout,
+		shouldResetScroll,
+		groupsToEnable,
+		groupsToDisable: [...groupsToDisable]
+	};
+}
 //#endregion
-//#region src/lyric-player/base.ts
+//#region src/lyric-player/base/index.ts
 /**
-* 歌词播放器的基类，已经包含了有关歌词操作和排版的功能，子类需要为其实现对应的显示展示操作
+* 歌词播放器的基类，已经包含了有关歌词操作和排版的功能，
+* 子类需要为其实现对应的显示展示操作
 */
 var LyricPlayerBase = class extends EventTarget {
 	element = document.createElement("div");
-	currentTime = 0;
-	/** @internal */
-	lyricLinesSize = /* @__PURE__ */ new WeakMap();
+	/** 播放时间线状态 */
+	timelineState = {
+		currentTime: 0,
+		lastCurrentTime: 0,
+		hotGroups: /* @__PURE__ */ new Set(),
+		bufferedGroups: /* @__PURE__ */ new Set(),
+		scrollToIndex: 0,
+		isSeeking: false,
+		isPlaying: true,
+		initialLayoutFinished: false
+	};
 	/** @internal */
-	lyricLineElementMap = /* @__PURE__ */ new WeakMap();
+	lyricGroupElementMap = /* @__PURE__ */ new WeakMap();
 	currentLyricLines = [];
 	processedLines = [];
 	lyricLinesIndexes = /* @__PURE__ */ new WeakMap();
-	hotLines = /* @__PURE__ */ new Set();
-	bufferedLines = /* @__PURE__ */ new Set();
 	isNonDynamic = false;
 	hasDuetLine = false;
-	scrollToIndex = 0;
 	disableSpring = false;
-	interludeDotsSize = [0, 0];
+	layoutState = {
+		interludeDotsSize: [0, 0],
+		targetAlignIndex: 0,
+		lastInterludeState: false,
+		alignAnchor: LayoutAlignAnchor.Center,
+		alignPosition: .35,
+		overscanPx: 300
+	};
 	interludeDots = new InterludeDots();
 	bottomLine = new BottomLineEl(this);
 	enableBlur = true;
 	enableScale = true;
-	maskObsceneWords = "";
+	maskObsceneWords = MaskObsceneWordsMode.Disabled;
 	maskObsceneWordChar = "*";
 	hidePassedLines = false;
-	scrollBoundary = [0, 0];
-	currentLyricLineObjects = [];
-	isSeeking = false;
-	lastCurrentTime = 0;
-	alignAnchor = "center";
-	alignPosition = .35;
-	scrollOffset = 0;
+	scrollState = {
+		scrollBoundary: {
+			minOffset: 0,
+			maxOffset: 0
+		},
+		scrollOffset: 0,
+		allowScroll: true,
+		isScrolled: false,
+		isUserScrolling: false
+	};
+	currentLyricGroups = [];
+	lyricGroupSize = /* @__PURE__ */ new WeakMap();
 	size = [0, 0];
-	allowScroll = true;
 	isPageVisible = true;
 	optimizeOptions = {};
-	initialLayoutFinished = false;
-	/**
-	* 标记用户是否正在进行滚动交互
-	*/
-	isUserScrolling = false;
-	wheelTimeout;
-	/**
-	* 视图额外预渲染（overscan）距离，单位：像素。
-	* 用于决定在视口之外多少距离内也认为是“可见”，以便提前创建/保留行元素。
-	*/
-	overscanPx = 300;
+	/** 是否强制让背景人声行始终后置（即始终在主歌词下方显示，不前置背景人声） */
+	alwaysPostpositionBackground = false;
 	posXSpringParams = {
 		mass: 1,
 		damping: 10,
@@ -2321,13 +2714,12 @@ var LyricPlayerBase = class extends EventTarget {
 	};
 	onPageShow = () => {
 		this.isPageVisible = true;
-		this.setCurrentTime(this.currentTime, true);
+		this.setCurrentTime(this.timelineState.currentTime, true);
 	};
 	onPageHide = () => {
 		this.isPageVisible = false;
 	};
 	scrolledHandler;
-	isScrolled = false;
 	/** @internal */
 	resizeObserver = new ResizeObserver(((entries) => {
 		let shouldRelayout = false;
@@ -2338,8 +2730,8 @@ var LyricPlayerBase = class extends EventTarget {
 			this.size[1] = rect.height;
 			shouldRebuildPlayerStyle = true;
 		} else if (entry.target === this.interludeDots.getElement()) {
-			this.interludeDotsSize[0] = entry.target.clientWidth;
-			this.interludeDotsSize[1] = entry.target.clientHeight;
+			this.layoutState.interludeDotsSize[0] = entry.target.clientWidth;
+			this.layoutState.interludeDotsSize[1] = entry.target.clientHeight;
 			shouldRelayout = true;
 		} else if (entry.target === this.bottomLine.getElement()) {
 			const newSize = [entry.target.clientWidth, entry.target.clientHeight];
@@ -2349,13 +2741,13 @@ var LyricPlayerBase = class extends EventTarget {
 				shouldRelayout = true;
 			}
 		} else {
-			const lineObj = this.lyricLineElementMap.get(entry.target);
-			if (lineObj) {
+			const groupObj = this.lyricGroupElementMap.get(entry.target);
+			if (groupObj) {
 				const newSize = [entry.target.clientWidth, entry.target.clientHeight];
-				const oldSize = this.lyricLinesSize.get(lineObj) ?? [0, 0];
+				const oldSize = this.lyricGroupSize.get(groupObj) ?? [0, 0];
 				if (newSize[0] !== oldSize[0] || newSize[1] !== oldSize[1]) {
-					this.lyricLinesSize.set(lineObj, newSize);
-					lineObj.onLineSizeChange(newSize);
+					this.lyricGroupSize.set(groupObj, newSize);
+					groupObj.onLineSizeChange(newSize);
 					shouldRelayout = true;
 				}
 			}
@@ -2364,8 +2756,6 @@ var LyricPlayerBase = class extends EventTarget {
 		if (shouldRebuildPlayerStyle) this.onResize();
 	}));
 	wordFadeWidth = .5;
-	targetAlignIndex = 0;
-	lastInterludeState = false;
 	constructor(element) {
 		super();
 		if (element) this.element = element;
@@ -2377,114 +2767,27 @@ var LyricPlayerBase = class extends EventTarget {
 		this.interludeDots.setTransform(0, 200);
 		window.addEventListener("pageshow", this.onPageShow);
 		window.addEventListener("pagehide", this.onPageHide);
-		let startScrollY = 0;
-		let startTouchPosY = 0;
-		let startTouchStartX = 0;
-		let startTouchStartY = 0;
-		let lastMoveY = 0;
-		let startScrollTime = 0;
-		let scrollSpeed = 0;
-		let curScrollId = 0;
-		this.element.addEventListener("touchstart", (evt) => {
-			if (this.beginScrollHandler()) {
-				this.isUserScrolling = true;
-				evt.preventDefault();
-				startScrollY = this.scrollOffset;
-				startTouchPosY = evt.touches[0].screenY;
-				lastMoveY = startTouchPosY;
-				startTouchStartX = evt.touches[0].screenX;
-				startTouchStartY = evt.touches[0].screenY;
-				startScrollTime = Date.now();
-				scrollSpeed = 0;
-				this.calcLayout(true, true);
-			}
-		});
-		this.element.addEventListener("touchmove", (evt) => {
-			if (this.beginScrollHandler()) {
-				evt.preventDefault();
-				const currentY = evt.touches[0].screenY;
-				const deltaY = currentY - startTouchPosY;
-				this.scrollOffset = startScrollY - deltaY;
-				this.limitScrollOffset();
-				const now = Date.now();
-				const dt = now - startScrollTime;
-				if (dt > 0) scrollSpeed = (currentY - lastMoveY) / dt;
-				lastMoveY = currentY;
-				startScrollTime = now;
-				this.calcLayout(true, true);
-			}
-		});
-		this.element.addEventListener("touchend", (evt) => {
-			if (this.beginScrollHandler()) {
-				evt.preventDefault();
-				const touch = evt.changedTouches[0];
-				const moveX = Math.abs(touch.screenX - startTouchStartX);
-				const moveY = Math.abs(touch.screenY - startTouchStartY);
-				if (moveX < 10 && moveY < 10) {
-					const target = document.elementFromPoint(touch.clientX, touch.clientY);
-					if (target && this.element.contains(target)) target.click();
-					this.isUserScrolling = false;
-					this.endScrollHandler();
-					return;
-				}
-				startTouchPosY = 0;
-				const scrollId = ++curScrollId;
-				if (Math.abs(scrollSpeed) < .1) scrollSpeed = 0;
-				let lastFrameTime = performance.now();
-				const onScrollFrame = (time) => {
-					if (scrollId !== curScrollId) return;
-					const dt = time - lastFrameTime;
-					lastFrameTime = time;
-					if (dt <= 0 || dt > 100) {
-						requestAnimationFrame(onScrollFrame);
-						return;
-					}
-					if (Math.abs(scrollSpeed) > .05) {
-						this.scrollOffset -= scrollSpeed * dt;
-						this.limitScrollOffset();
-						const frictionFactor = .95 ** (dt / 16);
-						scrollSpeed *= frictionFactor;
-						this.calcLayout(true, true);
-						requestAnimationFrame(onScrollFrame);
-					} else {
-						this.isUserScrolling = false;
-						this.endScrollHandler();
-					}
-				};
-				requestAnimationFrame(onScrollFrame);
-			} else this.isUserScrolling = false;
+		attachPlayerScrollHandlers(this.element, this.scrollState, {
+			onBeginScroll: () => this.beginScrollHandler(),
+			onEndScroll: () => this.endScrollHandler(),
+			onLayout: (sync, force) => this.calcLayout(sync, force),
+			containsTarget: (target) => this.element.contains(target),
+			clickTarget: (target) => target.click()
 		});
-		this.element.addEventListener("wheel", (evt) => {
-			if (this.beginScrollHandler()) {
-				evt.preventDefault();
-				if (evt.deltaMode === evt.DOM_DELTA_PIXEL) {
-					this.scrollOffset += evt.deltaY;
-					this.limitScrollOffset();
-					this.calcLayout(true, false);
-				} else {
-					this.scrollOffset += evt.deltaY * 50;
-					this.limitScrollOffset();
-					this.calcLayout(false, false);
-				}
-			}
-		}, { passive: false });
 	}
 	beginScrollHandler() {
-		const allowed = this.allowScroll;
+		const allowed = this.scrollState.allowScroll;
 		if (allowed) {
-			this.isScrolled = true;
+			this.scrollState.isScrolled = true;
 			clearTimeout(this.scrolledHandler);
 			this.scrolledHandler = setTimeout(() => {
-				this.isScrolled = false;
-				this.scrollOffset = 0;
+				this.scrollState.isScrolled = false;
+				this.scrollState.scrollOffset = 0;
 			}, 5e3);
 		}
 		return allowed;
 	}
 	endScrollHandler() {}
-	limitScrollOffset() {
-		this.scrollOffset = Math.max(Math.min(this.scrollBoundary[1], this.scrollOffset), this.scrollBoundary[0]);
-	}
 	/**
 	* 设置文字动画的渐变宽度，单位以歌词行的主文字字体大小的倍数为单位，默认为 0.5，即一个全角字符的一半宽度
 	*
@@ -2526,7 +2829,7 @@ var LyricPlayerBase = class extends EventTarget {
 		return this.wordFadeWidth;
 	}
 	setIsSeeking(isSeeking) {
-		this.isSeeking = isSeeking;
+		this.timelineState.isSeeking = isSeeking;
 	}
 	/**
 	* 设置是否隐藏已经播放过的歌词行，默认不隐藏
@@ -2564,13 +2867,13 @@ var LyricPlayerBase = class extends EventTarget {
 		const c = char.charAt(0) || "*";
 		if (this.maskObsceneWordChar === c) return;
 		this.maskObsceneWordChar = c;
-		if (this.maskObsceneWords !== "") {
+		if (this.maskObsceneWords !== MaskObsceneWordsMode.Disabled) {
 			this.rebuildLyricLines();
 			this.calcLayout();
 		}
 	}
 	rebuildLyricLines() {
-		for (const lineObj of this.currentLyricLineObjects) lineObj.rebuildElement();
+		for (const group of this.currentLyricGroups) group.rebuildAllLines();
 	}
 	/**
 	* 根据当前配置处理不雅用语单词
@@ -2579,10 +2882,10 @@ var LyricPlayerBase = class extends EventTarget {
 	*/
 	processObsceneWord(word) {
 		const text = word.word;
-		if (!word.obscene || this.maskObsceneWords === "") return text;
+		if (!word.obscene || this.maskObsceneWords === MaskObsceneWordsMode.Disabled) return text;
 		const maskChar = this.maskObsceneWordChar;
-		if (this.maskObsceneWords === "full-mask") return text.replace(/\S/g, maskChar);
-		if (this.maskObsceneWords === "partial-mask") {
+		if (this.maskObsceneWords === MaskObsceneWordsMode.FullMask) return text.replace(/\S/g, maskChar);
+		if (this.maskObsceneWords === MaskObsceneWordsMode.PartialMask) {
 			const trimmed = text.trim();
 			if (trimmed.length <= 2) return text.replace(/\S/g, maskChar);
 			const startPos = text.indexOf(trimmed);
@@ -2600,25 +2903,25 @@ var LyricPlayerBase = class extends EventTarget {
 	* @param alignAnchor 歌词行对齐方式，详情见函数说明
 	*/
 	setAlignAnchor(alignAnchor) {
-		this.alignAnchor = alignAnchor;
+		this.layoutState.alignAnchor = alignAnchor;
 	}
 	/**
 	* 设置默认的歌词行对齐位置，相对于整个歌词播放组件的大小位置，默认为 `0.5`
 	* @param alignPosition 一个 `[0.0-1.0]` 之间的任意数字，代表组件高度由上到下的比例位置
 	*/
 	setAlignPosition(alignPosition) {
-		this.alignPosition = alignPosition;
+		this.layoutState.alignPosition = alignPosition;
 	}
 	/**
 	* 设置 overscan（视图上下额外缓冲渲染区）距离，单位：像素。
 	* @param px 像素值，默认 300
 	*/
 	setOverscanPx(px) {
-		this.overscanPx = Math.max(0, px | 0);
+		this.layoutState.overscanPx = clampPositive(px | 0);
 	}
 	/** 获取当前 overscan 像素距离 */
 	getOverscanPx() {
-		return this.overscanPx;
+		return this.layoutState.overscanPx;
 	}
 	/**
 	* 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
@@ -2641,34 +2944,6 @@ var LyricPlayerBase = class extends EventTarget {
 		return !this.disableSpring;
 	}
 	/**
-	* 获取当前播放时间里是否处于间奏区间
-	* 如果是则会返回单位为毫秒的始末时间
-	* 否则返回 undefined
-	*
-	* 这个只允许内部调用
-	* @returns [开始时间,结束时间,大概处于的歌词行ID,下一句是否为对唱歌词] 或 undefined 如果不处于间奏区间
-	*/
-	getCurrentInterlude() {
-		const currentTime = this.currentTime + 20;
-		const currentIndex = this.scrollToIndex;
-		const lines = this.processedLines;
-		const checkGap = (k) => {
-			if (k < -1 || k >= lines.length - 1) return void 0;
-			const prevLine = k === -1 ? null : lines[k];
-			const nextLine = lines[k + 1];
-			const gapStart = prevLine ? prevLine.endTime : 0;
-			const gapEnd = Math.max(gapStart, nextLine.startTime - 250);
-			if (gapEnd - gapStart < 4e3) return;
-			if (gapEnd > currentTime && gapStart < currentTime) return [
-				Math.max(gapStart, currentTime),
-				gapEnd,
-				k,
-				nextLine.isDuet
-			];
-		};
-		return checkGap(currentIndex - 1) || checkGap(currentIndex) || checkGap(currentIndex + 1);
-	}
-	/**
 	* 设置歌词的优化配置项，这些配置项默认全部开启
 	*
 	* 注意，如果在 `setLyricLines` 之后修改此配置，需要重新调用 `setLyricLines()` 才能对当前歌词生效
@@ -2688,9 +2963,9 @@ var LyricPlayerBase = class extends EventTarget {
 	*/
 	setLyricLines(lines, initialTime = 0) {
 		if (process.env.NODE_ENV !== "production") console.log("设置歌词行", lines, initialTime);
-		this.initialLayoutFinished = true;
-		this.lastCurrentTime = initialTime;
-		this.currentTime = initialTime;
+		this.timelineState.initialLayoutFinished = true;
+		this.timelineState.lastCurrentTime = initialTime;
+		this.timelineState.currentTime = initialTime;
 		this.currentLyricLines = (0, _ungap_structured_clone.default)(lines);
 		this.processedLines = (0, _ungap_structured_clone.default)(this.currentLyricLines);
 		optimizeLyricLines(this.processedLines, this.optimizeOptions);
@@ -2700,11 +2975,11 @@ var LyricPlayerBase = class extends EventTarget {
 			break;
 		}
 		this.hasDuetLine = this.processedLines.some((line) => line.isDuet);
-		for (const line of this.currentLyricLineObjects) line.dispose();
+		for (const group of this.currentLyricGroups) group.dispose();
+		this.currentLyricGroups = [];
 		this.interludeDots.setInterlude(void 0);
-		this.hotLines.clear();
-		this.bufferedLines.clear();
-		this.setCurrentTime(0, true);
+		this.timelineState.hotGroups.clear();
+		this.timelineState.bufferedGroups.clear();
 		if (process.env.NODE_ENV !== "production") console.log("歌词处理完成", this);
 	}
 	/**
@@ -2712,143 +2987,39 @@ var LyricPlayerBase = class extends EventTarget {
 	* @returns 当前是否在播放
 	*/
 	getIsPlaying() {
-		return this.isPlaying;
+		return this.timelineState.isPlaying;
 	}
 	/**
-	* 设置当前播放进度，单位为毫秒且**必须是整数**，此时将会更新内部的歌词进度信息
-	* 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好
+	* 设置当前播放进度，此时将会更新内部的歌词进度信息。
+	*
+	* 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好。
+	* 调用完成后，应每帧调用 {@link update} 方法来执行歌词动画效果。**此函数本身不会触发动画效果**。
 	*
-	* 调用完成后，可以每帧调用 `update` 函数来执行歌词动画效果
 	* @param time 当前播放进度，单位为毫秒
 	*/
 	setCurrentTime(time, isSeek = false) {
-		this.currentTime = time;
-		if (!this.initialLayoutFinished && !isSeek) return;
-		const removedHotIds = /* @__PURE__ */ new Set();
-		const removedIds = /* @__PURE__ */ new Set();
-		const addedIds = /* @__PURE__ */ new Set();
-		for (const lastHotId of this.hotLines) {
-			const line = this.processedLines[lastHotId];
-			if (line) {
-				if (line.isBG) continue;
-				const nextLine = this.processedLines[lastHotId + 1];
-				if (nextLine?.isBG) {
-					const nextMainLine = this.processedLines[lastHotId + 2];
-					const startTime = Math.min(line.startTime, nextLine?.startTime);
-					const endTime = Math.min(Math.max(line.endTime, nextMainLine?.startTime ?? Number.MAX_VALUE), Math.max(line.endTime, nextLine?.endTime));
-					if (startTime > time || endTime <= time) {
-						this.hotLines.delete(lastHotId);
-						removedHotIds.add(lastHotId);
-						this.hotLines.delete(lastHotId + 1);
-						removedHotIds.add(lastHotId + 1);
-						if (isSeek) {
-							this.currentLyricLineObjects[lastHotId]?.disable();
-							this.currentLyricLineObjects[lastHotId + 1]?.disable();
-						}
-					}
-				} else if (line.startTime > time || line.endTime <= time) {
-					this.hotLines.delete(lastHotId);
-					removedHotIds.add(lastHotId);
-					if (isSeek) this.currentLyricLineObjects[lastHotId]?.disable();
-				}
-			} else {
-				this.hotLines.delete(lastHotId);
-				removedHotIds.add(lastHotId);
-				if (isSeek) this.currentLyricLineObjects[lastHotId]?.disable();
-			}
-		}
-		this.currentLyricLineObjects.forEach((lineObj, id, arr) => {
-			const line = lineObj.getLine();
-			if (!line.isBG && line.startTime <= time && line.endTime > time) {
-				if (isSeek) lineObj.enable(time, this.isPlaying);
-				if (!this.hotLines.has(id)) {
-					this.hotLines.add(id);
-					addedIds.add(id);
-					if (!isSeek) lineObj.enable();
-					if (arr[id + 1]?.getLine()?.isBG) {
-						this.hotLines.add(id + 1);
-						addedIds.add(id + 1);
-						if (isSeek) arr[id + 1].enable(time, this.isPlaying);
-						else arr[id + 1].enable();
-					}
-				}
-			}
+		time = Math.round(time);
+		const { timelineState } = this;
+		timelineState.isSeeking = Boolean(isSeek);
+		timelineState.currentTime = time;
+		if (!timelineState.initialLayoutFinished && !timelineState.isSeeking) return;
+		const stateResult = computePlayerTimeState({
+			time,
+			currentGroups: this.currentLyricGroups,
+			timelineState
 		});
-		for (const v of this.bufferedLines) if (!this.hotLines.has(v)) {
-			removedIds.add(v);
-			if (isSeek) this.currentLyricLineObjects[v]?.disable();
-		}
-		if (isSeek) {
-			this.bufferedLines.clear();
-			for (const v of this.hotLines) this.bufferedLines.add(v);
-			if (this.bufferedLines.size > 0) this.scrollToIndex = Math.min(...this.bufferedLines);
-			else {
-				const foundIndex = this.processedLines.findIndex((line) => line.startTime >= time);
-				this.scrollToIndex = foundIndex === -1 ? this.processedLines.length : foundIndex;
-			}
-			this.resetScroll();
-			this.calcLayout();
-		} else if (removedIds.size > 0 || addedIds.size > 0) if (removedIds.size === 0 && addedIds.size > 0) {
-			for (const v of addedIds) {
-				this.bufferedLines.add(v);
-				this.currentLyricLineObjects[v]?.enable();
-			}
-			this.scrollToIndex = Math.min(...this.bufferedLines);
-			this.calcLayout();
-		} else if (addedIds.size === 0 && removedIds.size > 0) {
-			if (eqSet(removedIds, this.bufferedLines)) {
-				for (const v of this.bufferedLines) if (!this.hotLines.has(v)) {
-					this.bufferedLines.delete(v);
-					this.currentLyricLineObjects[v]?.disable();
-				}
-				this.calcLayout();
-			}
-		} else {
-			for (const v of addedIds) {
-				this.bufferedLines.add(v);
-				this.currentLyricLineObjects[v]?.enable();
-			}
-			for (const v of removedIds) {
-				this.bufferedLines.delete(v);
-				this.currentLyricLineObjects[v]?.disable();
-			}
-			if (this.bufferedLines.size > 0) this.scrollToIndex = Math.min(...this.bufferedLines);
-			this.calcLayout();
-		}
-		if (this.bufferedLines.size === 0 && this.processedLines.length > 0) {
-			const lastLine = this.processedLines[this.processedLines.length - 1];
-			const hasBottomContent = this.bottomLine.getElement().innerHTML.trim().length > 0;
-			if (time >= lastLine.endTime) {
-				const targetIndex = hasBottomContent ? this.processedLines.length : this.processedLines.length - 1;
-				if (this.scrollToIndex !== targetIndex) {
-					this.scrollToIndex = targetIndex;
-					this.calcLayout();
-				}
-			}
-		}
-		this.lastCurrentTime = time;
-	}
-	updateDynamicSpringParams() {
-		if (!this.getEnableSpring() || this.processedLines.length === 0) return;
-		const currentIndex = this.scrollToIndex;
-		const currentLine = this.processedLines[currentIndex];
-		const prevLine = this.processedLines[currentIndex - 1];
-		if (currentLine && prevLine) {
-			const interval = currentLine.startTime - (prevLine?.words[0]?.startTime ?? prevLine.startTime);
-			const MIN_INTERVAL = 100;
-			const MAX_INTERVAL = 800;
-			const clampedInterval = Math.max(MIN_INTERVAL, Math.min(MAX_INTERVAL, interval));
-			const MAX_STIFFNESS = 220;
-			const MIN_STIFFNESS = 170;
-			let ratio = 1 - (clampedInterval - MIN_INTERVAL) / (MAX_INTERVAL - MIN_INTERVAL);
-			ratio = ratio ** .2;
-			const targetStiffness = MIN_STIFFNESS + ratio * (MAX_STIFFNESS - MIN_STIFFNESS);
-			const targetDamping = Math.sqrt(targetStiffness) * 2.2;
-			this.setLinePosYSpringParams({
-				stiffness: targetStiffness,
-				damping: targetDamping
-			});
-		}
+		const hasBottomContent = this.bottomLine.getElement().innerHTML.trim().length > 0;
+		const commitResult = commitPlayerTimeState({
+			timelineState,
+			time,
+			currentGroups: this.currentLyricGroups,
+			hasBottomContent,
+			stateResult
+		});
+		for (const id of commitResult.groupsToDisable) this.currentLyricGroups[id]?.disable();
+		for (const id of commitResult.groupsToEnable) this.currentLyricGroups[id]?.enable();
+		if (commitResult.shouldResetScroll) this.resetScroll();
+		if (commitResult.shouldLayout) this.calcLayout();
 	}
 	/**
 	* 重新布局定位歌词行的位置，调用完成后再逐帧调用 `update`
@@ -2868,102 +3039,102 @@ var LyricPlayerBase = class extends EventTarget {
 	* @param force 是否绕过弹簧效果强制更新位置
 	*/
 	async calcLayout(sync = false, force = false) {
-		const interlude = this.getCurrentInterlude();
+		const interlude = computeCurrentInterlude({
+			currentTime: this.timelineState.currentTime,
+			scrollToIndex: this.timelineState.scrollToIndex,
+			currentGroups: this.currentLyricGroups
+		});
 		const isInterludeActive = !!interlude;
-		if (this.targetAlignIndex !== this.scrollToIndex || this.lastInterludeState !== isInterludeActive) {
-			this.lastInterludeState = isInterludeActive;
-			if (this.isSeeking) this.setLinePosYSpringParams({
-				stiffness: 90,
-				damping: 15
-			});
-			else if (isInterludeActive) this.setLinePosYSpringParams({
-				stiffness: 90,
-				damping: 15
+		if (this.layoutState.targetAlignIndex !== this.timelineState.scrollToIndex || this.layoutState.lastInterludeState !== isInterludeActive) {
+			this.layoutState.lastInterludeState = isInterludeActive;
+			const springParams = computeLinePosYSpringParams({
+				enabled: this.getEnableSpring(),
+				currentGroups: this.currentLyricGroups,
+				scrollToIndex: this.timelineState.scrollToIndex,
+				isSeeking: this.timelineState.isSeeking,
+				isInterludeActive
 			});
-			else this.updateDynamicSpringParams();
+			if (springParams.shouldUpdate && springParams.params) this.setLinePosYSpringParams(springParams.params);
 		}
-		let curPos = -this.scrollOffset;
-		const targetAlignIndex = this.scrollToIndex;
+		let curPos = -this.scrollState.scrollOffset;
+		const targetAlignIndex = this.timelineState.scrollToIndex;
 		let isNextDuet = false;
-		if (interlude) isNextDuet = interlude[3];
+		if (interlude) isNextDuet = interlude.isNextDuet;
 		else this.interludeDots.setInterlude(void 0);
 		const dotMargin = (this.baseFontSize || 24) * .4;
-		const totalInterludeHeight = this.interludeDotsSize[1] + dotMargin * 2;
+		const totalInterludeHeight = this.layoutState.interludeDotsSize[1] + dotMargin * 2;
 		if (interlude) {
-			if (interlude[2] !== -1) curPos -= totalInterludeHeight;
+			if (interlude.anchorLineIndex !== -1) curPos -= totalInterludeHeight;
 		}
 		const LINE_HEIGHT_FALLBACK = this.size[1] / 5;
-		const scrollOffset = this.currentLyricLineObjects.slice(0, targetAlignIndex).reduce((acc, el) => acc + (el.getLine().isBG && this.isPlaying ? 0 : this.lyricLinesSize.get(el)?.[1] ?? LINE_HEIGHT_FALLBACK), 0);
-		this.scrollBoundary[0] = -scrollOffset;
+		const scrollOffset = this.currentLyricGroups.slice(0, targetAlignIndex).reduce((acc, group) => acc + (this.lyricGroupSize.get(group)?.[1] ?? LINE_HEIGHT_FALLBACK), 0);
+		this.scrollState.scrollBoundary.minOffset = -scrollOffset;
 		curPos -= scrollOffset;
-		curPos += this.size[1] * this.alignPosition;
-		const curLine = this.currentLyricLineObjects[targetAlignIndex];
-		this.targetAlignIndex = targetAlignIndex;
-		const isBottomFocused = targetAlignIndex === this.currentLyricLineObjects.length;
+		curPos += this.size[1] * this.layoutState.alignPosition;
+		const curGroup = this.currentLyricGroups[targetAlignIndex];
+		this.layoutState.targetAlignIndex = targetAlignIndex;
+		const isBottomFocused = targetAlignIndex === this.currentLyricGroups.length;
 		this.bottomLine.setFocused(isBottomFocused);
-		let targetLineHeight = 0;
-		if (curLine) targetLineHeight = this.lyricLinesSize.get(curLine)?.[1] ?? LINE_HEIGHT_FALLBACK;
-		else if (isBottomFocused) targetLineHeight = this.bottomLine.lineSize[1];
-		if (targetLineHeight > 0) switch (this.alignAnchor) {
-			case "bottom":
+		const targetLineHeight = curGroup ? this.lyricGroupSize.get(curGroup)?.[1] ?? LINE_HEIGHT_FALLBACK : isBottomFocused ? this.bottomLine.lineSize[1] : 0;
+		if (targetLineHeight > 0) switch (this.layoutState.alignAnchor) {
+			case LayoutAlignAnchor.Bottom:
 				curPos -= targetLineHeight;
 				break;
-			case "center":
+			case LayoutAlignAnchor.Center:
 				curPos -= targetLineHeight / 2;
 				break;
-			case "top": break;
+			case LayoutAlignAnchor.Top: break;
 		}
-		const latestIndex = Math.max(...this.bufferedLines);
+		const latestIndex = Math.max(...this.timelineState.bufferedGroups);
 		let delay = 0;
 		let baseDelay = sync ? 0 : .05;
 		let setDots = false;
-		this.currentLyricLineObjects.forEach((lineObj, i) => {
-			const hasBuffered = this.bufferedLines.has(i);
-			const isActive = hasBuffered || i >= this.scrollToIndex && i < latestIndex;
-			const line = lineObj.getLine();
-			const shouldShowDots = interlude && i === interlude[2] + 1;
+		this.currentLyricGroups.forEach((group, i) => {
+			const hasBuffered = this.timelineState.bufferedGroups.has(i);
+			const shouldShowDots = interlude && i === interlude.anchorLineIndex + 1;
 			if (!setDots && shouldShowDots) {
 				setDots = true;
 				curPos += dotMargin;
 				let targetX = 0;
-				if (interlude && isNextDuet) targetX = this.size[0] - this.interludeDotsSize[0];
+				if (interlude && isNextDuet) targetX = this.size[0] - this.layoutState.interludeDotsSize[0];
 				this.interludeDots.setTransform(targetX, curPos);
-				if (interlude) this.interludeDots.setInterlude([interlude[0], interlude[1]]);
-				curPos += this.interludeDotsSize[1];
+				if (interlude) this.interludeDots.setInterlude([interlude.startTime, interlude.endTime]);
+				curPos += this.layoutState.interludeDotsSize[1];
 				curPos += dotMargin;
 			}
-			let targetOpacity;
-			if (this.hidePassedLines) if (i < (interlude ? interlude[2] + 1 : this.scrollToIndex) && this.isPlaying) targetOpacity = 1e-5;
-			else if (hasBuffered) targetOpacity = .85;
-			else targetOpacity = this.isNonDynamic ? .2 : 1;
-			else if (hasBuffered) targetOpacity = .85;
-			else targetOpacity = this.isNonDynamic ? .2 : 1;
-			const blurLevel = this.calculateBlur(i, isActive, latestIndex);
-			const SCALE_ASPECT = this.enableScale ? 97 : 100;
-			let targetScale = 100;
-			if (!isActive && this.isPlaying) if (line.isBG) targetScale = 75;
-			else targetScale = SCALE_ASPECT;
-			const renderMode = isActive ? 1 : 0;
-			lineObj.setTransform(curPos, targetScale, targetOpacity, blurLevel, force, delay, renderMode);
-			if (line.isBG && (isActive || !this.isPlaying)) curPos += this.lyricLinesSize.get(lineObj)?.[1] ?? LINE_HEIGHT_FALLBACK;
-			else if (!line.isBG) curPos += this.lyricLinesSize.get(lineObj)?.[1] ?? LINE_HEIGHT_FALLBACK;
-			if (curPos >= 0 && !this.isSeeking) {
-				if (!line.isBG) delay += baseDelay;
-				if (i >= this.scrollToIndex) baseDelay /= 1.05;
+			const presentation = computeGroupPresentation({
+				groupIndex: i,
+				scrollToIndex: this.timelineState.scrollToIndex,
+				latestIndex,
+				hasBuffered,
+				hidePassedLines: this.hidePassedLines,
+				isPlaying: this.timelineState.isPlaying,
+				isNonDynamic: this.isNonDynamic,
+				enableBlur: this.enableBlur,
+				isUserScrolling: this.scrollState.isUserScrolling,
+				isCompact: window.innerWidth <= 1024,
+				interlude
+			});
+			group.setTransform(curPos, force, delay, presentation.isActive, presentation.targetOpacity, presentation.blurLevel);
+			curPos += this.lyricGroupSize.get(group)?.[1] ?? LINE_HEIGHT_FALLBACK;
+			if (curPos >= 0 && !this.timelineState.isSeeking) {
+				delay += baseDelay;
+				if (i >= this.timelineState.scrollToIndex) baseDelay /= 1.05;
 			}
 		});
-		this.scrollBoundary[1] = curPos + this.scrollOffset - this.size[1] / 2;
-		const bottomIndex = this.currentLyricLineObjects.length;
-		const finalBottomBlur = this.calculateBlur(bottomIndex, isBottomFocused, latestIndex);
+		this.scrollState.scrollBoundary.maxOffset = curPos + this.scrollState.scrollOffset - this.size[1] / 2;
+		const bottomIndex = this.currentLyricGroups.length;
+		const finalBottomBlur = computeLineBlur({
+			enableBlur: this.enableBlur,
+			isUserScrolling: this.scrollState.isUserScrolling,
+			isActive: isBottomFocused,
+			itemIndex: bottomIndex,
+			scrollToIndex: this.timelineState.scrollToIndex,
+			latestIndex,
+			isCompact: window.innerWidth <= 1024
+		});
 		this.bottomLine.setTransform(0, curPos, finalBottomBlur, force, delay);
 	}
-	calculateBlur(itemIndex, isActive, latestIndex) {
-		if (!this.enableBlur || this.isUserScrolling || isActive) return 0;
-		let blurLevel = 1;
-		if (itemIndex < this.scrollToIndex) blurLevel += Math.abs(this.scrollToIndex - itemIndex) + 1;
-		else blurLevel += Math.abs(itemIndex - Math.max(this.scrollToIndex, latestIndex));
-		return window.innerWidth <= 1024 ? blurLevel * .8 : blurLevel;
-	}
 	/**
 	* 设置所有歌词行在横坐标上的弹簧属性，包括重量、弹力和阻力。
 	*
@@ -2982,7 +3153,10 @@ var LyricPlayerBase = class extends EventTarget {
 			...params
 		};
 		this.bottomLine.lineTransforms.posY.updateParams(this.posYSpringParams);
-		for (const line of this.currentLyricLineObjects) line.lineTransforms.posY.updateParams(this.posYSpringParams);
+		for (const group of this.currentLyricGroups) {
+			group.posY.updateParams(this.posYSpringParams);
+			group.bgSlideY.updateParams(this.posYSpringParams);
+		}
 	}
 	/**
 	* 设置所有歌词行在​缩放大小上的弹簧属性，包括重量、弹力和阻力。
@@ -2998,17 +3172,18 @@ var LyricPlayerBase = class extends EventTarget {
 			...this.scaleForBGSpringParams,
 			...params
 		};
-		for (const lineObj of this.currentLyricLineObjects) if (lineObj.getLine().isBG) lineObj.lineTransforms.scale.updateParams(this.scaleForBGSpringParams);
-		else lineObj.lineTransforms.scale.updateParams(this.scaleSpringParams);
+		for (const group of this.currentLyricGroups) {
+			group.mainLine.lineTransforms.scale.updateParams(this.scaleSpringParams);
+			group.bgLine?.lineTransforms.scale.updateParams(this.scaleForBGSpringParams);
+		}
 	}
-	isPlaying = true;
 	/**
 	* 暂停部分效果演出，目前会暂停播放间奏点的动画，且将背景歌词显示出来
 	*/
 	pause() {
 		this.interludeDots.pause();
-		if (this.isPlaying) {
-			this.isPlaying = false;
+		if (this.timelineState.isPlaying) {
+			this.timelineState.isPlaying = false;
 			this.calcLayout();
 		}
 	}
@@ -3017,8 +3192,8 @@ var LyricPlayerBase = class extends EventTarget {
 	*/
 	resume() {
 		this.interludeDots.resume();
-		if (!this.isPlaying) {
-			this.isPlaying = true;
+		if (!this.timelineState.isPlaying) {
+			this.timelineState.isPlaying = true;
 			this.calcLayout();
 		}
 	}
@@ -3051,8 +3226,7 @@ var LyricPlayerBase = class extends EventTarget {
 	* 请在用户完成滚动点击跳转歌词时调用本事件再调用 `calcLayout` 以正确滚动到目标位置
 	*/
 	resetScroll() {
-		this.isScrolled = false;
-		this.scrollOffset = 0;
+		resetPlayerScrollState(this.scrollState);
 		clearTimeout(this.scrolledHandler);
 	}
 	/**
@@ -3071,7 +3245,24 @@ var LyricPlayerBase = class extends EventTarget {
 	* @returns 当前播放位置
 	*/
 	getCurrentTime() {
-		return this.currentTime;
+		return this.timelineState.currentTime;
+	}
+	/**
+	* 设置是否让背景人声行始终后置显示
+	*
+	* 默认情况下，如果背景歌词开始时间早于主歌词，会在主歌词上方展示；
+	* 如果设置为 `true`，则无论时间顺序如何，背景歌词都会始终在主歌词下方展示
+	* @param enable 是否启用始终后置
+	*/
+	setAlwaysPostpositionBackground(enable) {
+		if (this.alwaysPostpositionBackground === enable) return;
+		this.alwaysPostpositionBackground = enable;
+		this.rebuildLyricLines();
+		this.calcLayout();
+	}
+	/** 获取当前是否设置了让背景人声行始终后置显示 */
+	getAlwaysPostpositionBackground() {
+		return this.alwaysPostpositionBackground;
 	}
 	getElement() {
 		return this.element;
@@ -3082,6 +3273,198 @@ var LyricPlayerBase = class extends EventTarget {
 		window.removeEventListener("pagehide", this.onPageHide);
 	}
 };
+//#endregion
+//#region src/lyric-player/base/group.ts
+var LyricLineGroupBase = class {
+	posY = new Spring(0);
+	bgSlideY = new Spring(-80);
+	top = 0;
+	delay = 0;
+	isActive = false;
+	opacity = 1;
+	blur = 0;
+	isBgFirst = false;
+	constructor(mainLine, bgLine) {
+		this.mainLine = mainLine;
+		this.bgLine = bgLine;
+	}
+	get startTime() {
+		return this.mainLine.getLine().startTime;
+	}
+	get endTime() {
+		return this.mainLine.getLine().endTime;
+	}
+	onLineSizeChange(size) {
+		this.mainLine.onLineSizeChange(size);
+		this.bgLine?.onLineSizeChange(size);
+	}
+	setTransform(top, force, delay, isActive, opacity, blur) {
+		this.top = top;
+		this.delay = delay;
+		this.isActive = isActive;
+		this.opacity = opacity;
+		this.blur = blur;
+		this.setLineTransformations(force, delay);
+		const enableSpring = this.lyricPlayer.getEnableSpring();
+		const hiddenSlideY = (this.lyricPlayer.getAlwaysPostpositionBackground() ? false : this.isBgFirst) ? 80 : -80;
+		const isPlaying = this.lyricPlayer.getIsPlaying();
+		const targetBgSlideY = isActive || !isPlaying ? 0 : hiddenSlideY;
+		if (force || !enableSpring) {
+			this.posY.setPosition(top);
+			this.bgSlideY.setPosition(targetBgSlideY);
+			this.renderStyles();
+		} else {
+			this.posY.setTargetPosition(top, delay);
+			this.bgSlideY.setTargetPosition(targetBgSlideY, delay);
+		}
+	}
+	setLineTransformations(force, delay) {
+		const enableScale = this.lyricPlayer.getEnableScale();
+		const isPlaying = this.lyricPlayer.getIsPlaying();
+		const renderMode = this.isActive ? LyricLineRenderMode.GRADIENT : LyricLineRenderMode.SOLID;
+		const SCALE_ASPECT = enableScale ? 97 : 100;
+		let mainScale = 100;
+		if (!this.isActive && isPlaying) mainScale = SCALE_ASPECT;
+		this.mainLine.setTransform(mainScale, 1, 0, force, delay, renderMode);
+		let bgScale = 100;
+		if (!this.isActive && isPlaying) bgScale = 75;
+		this.bgLine?.setTransform(bgScale, 1, 0, force, delay, renderMode);
+	}
+	update(delta) {
+		if (this.lyricPlayer.getEnableSpring()) {
+			this.posY.update(delta);
+			this.bgSlideY.update(delta);
+			this.renderStyles();
+		}
+		this.mainLine.update(delta);
+		this.bgLine?.update(delta);
+	}
+	rebuildAllLines() {
+		this.mainLine.rebuildElement();
+		this.bgLine?.rebuildElement();
+	}
+	enable(time, shouldPlay) {
+		this.mainLine.enable(time, shouldPlay);
+		this.bgLine?.enable(time, shouldPlay);
+	}
+	disable() {
+		this.mainLine.disable();
+		this.bgLine?.disable();
+	}
+	dispose() {
+		this.mainLine.dispose();
+		this.bgLine?.dispose();
+	}
+};
+//#endregion
+//#region src/lyric-player/dom/lyric-group.ts
+var LyricLineGroup = class extends LyricLineGroupBase {
+	element;
+	bgWrapper;
+	lastIsActive;
+	constructor(lyricPlayer, mainLine) {
+		super(mainLine);
+		this.lyricPlayer = lyricPlayer;
+		this.element = document.createElement("div");
+		this.element.className = lyric_player_module_default.lyricLineWrapper;
+		this.element.appendChild(mainLine.getElement());
+		this.posY.setPosition(window.innerHeight * 2);
+		lyricPlayer.resizeObserver.observe(this.element);
+	}
+	get isInSight() {
+		const t = this.posY.getCurrentPosition();
+		let h = this.lyricPlayer.lyricGroupSize?.get(this)?.[1];
+		if (h === void 0 || h === 0) h = this.element.clientHeight || 0;
+		const pb = this.lyricPlayer.size[1];
+		const ov = this.lyricPlayer.getOverscanPx();
+		return !(t > pb + h + ov || t < -h - ov);
+	}
+	show() {
+		if (!this.element.parentElement) {
+			const playerEl = this.lyricPlayer.getElement();
+			const groups = this.lyricPlayer.currentLyricGroups;
+			const myIndex = groups.indexOf(this);
+			let referenceNode = null;
+			if (myIndex !== -1) {
+				for (let i = myIndex + 1; i < groups.length; i++) if (groups[i].element.parentElement === playerEl) {
+					referenceNode = groups[i].element;
+					break;
+				}
+			}
+			playerEl.insertBefore(this.element, referenceNode);
+			this.lyricPlayer.resizeObserver.observe(this.element);
+		}
+		this.mainLine.show();
+		this.bgLine?.show();
+	}
+	hide() {
+		if (this.element.parentElement) {
+			this.lyricPlayer.resizeObserver.unobserve(this.element);
+			this.element.remove();
+			this.mainLine.teardownContent();
+			this.bgLine?.teardownContent();
+		}
+	}
+	update(delta) {
+		if (this.isInSight) this.show();
+		else this.hide();
+		super.update(delta);
+	}
+	addBgLine(bgLine) {
+		if (this.bgLine) this.bgLine.dispose();
+		if (this.bgWrapper) this.bgWrapper.remove();
+		this.bgLine = bgLine;
+		const bgStartTime = bgLine.getLine().words[0]?.startTime ?? bgLine.getLine().startTime;
+		const mainStartTime = this.mainLine.getLine().words[0]?.startTime ?? this.mainLine.getLine().startTime;
+		this.isBgFirst = bgStartTime < mainStartTime;
+		if (this.mainLine.getLine().isDuet) bgLine.getElement().classList.add(lyric_player_module_default.lyricDuetLine);
+		this.bgWrapper = document.createElement("div");
+		this.bgWrapper.className = lyric_player_module_default.bgWrapper;
+		this.bgWrapper.appendChild(bgLine.getElement());
+		if (!this.lyricPlayer.getAlwaysPostpositionBackground() && this.isBgFirst) {
+			this.bgWrapper.classList.add(lyric_player_module_default.bgWrapperTop);
+			this.element.insertBefore(this.bgWrapper, this.mainLine.getElement());
+			this.bgSlideY.setPosition(80);
+		} else this.element.appendChild(this.bgWrapper);
+	}
+	renderStyles() {
+		const y = this.posY.getCurrentPosition().toFixed(1);
+		this.element.style.transform = `translateY(${y}px)`;
+		this.element.style.opacity = this.opacity.toString();
+		this.element.style.filter = `blur(${Math.min(5, this.blur)}px)`;
+		if (!this.lyricPlayer.getEnableSpring()) this.element.style.transitionDelay = `${this.delay}ms`;
+		if (this.bgWrapper) {
+			if (this.lastIsActive !== this.isActive) {
+				this.lastIsActive = this.isActive;
+				this.bgWrapper.classList.toggle(lyric_player_module_default.bgWrapperActive, this.isActive);
+			}
+			const slideY = this.bgSlideY.getCurrentPosition();
+			const slideYStr = slideY.toFixed(1);
+			const activeProgress = clamp01(1 - Math.abs(slideY) / 80);
+			const scaleStr = (.8 + activeProgress * .2).toFixed(3);
+			this.bgWrapper.style.transform = `translateY(${slideYStr}%) scale(${scaleStr})`;
+			const shouldBgFirst = !this.lyricPlayer.getAlwaysPostpositionBackground() && this.isBgFirst;
+			if (shouldBgFirst) {
+				const currentMarginTop = -(this.bgWrapper.clientHeight || 0) * (1 - activeProgress);
+				this.bgWrapper.style.marginTop = `${currentMarginTop.toFixed(1)}px`;
+			} else this.bgWrapper.style.marginTop = "";
+			const isHidden = slideYStr === (shouldBgFirst ? "80.0" : "-80.0") && !this.isActive;
+			this.bgWrapper.classList.toggle(lyric_player_module_default.bgWrapperHidden, isHidden);
+		}
+	}
+	dispose() {
+		super.dispose();
+		this.lyricPlayer.resizeObserver.unobserve(this.element);
+		this.element.remove();
+	}
+};
+//#endregion
+//#region src/utils/is-cjk.ts
+const isCJK = (char) => {
+	return /^[\p{Unified_Ideograph}\u0800-\u9FFC]+$/u.test(char);
+};
+//#endregion
+//#region src/lyric-player/base/line.ts
 /**
 * 所有标准歌词行的基类
 * @internal
@@ -3092,10 +3475,7 @@ var LyricLineBase = class extends EventTarget {
 	blur = 0;
 	opacity = 1;
 	delay = 0;
-	lineTransforms = {
-		posY: new Spring(0),
-		scale: new Spring(100)
-	};
+	lineTransforms = { scale: new Spring(100) };
 	/**
 	* 用于 CJK 词语边界检测的分词器
 	*/
@@ -3105,9 +3485,7 @@ var LyricLineBase = class extends EventTarget {
 	* 用于正确处理 emoji、复合字符等
 	*/
 	static graphemeSegmenter = typeof Intl !== "undefined" && Intl.Segmenter ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
-	onLineSizeChange(_size) {}
-	setTransform(top = this.top, scale = this.scale, opacity = this.opacity, blur = this.blur, _force = false, delay = 0, _mode = 0) {
-		this.top = top;
+	setTransform(scale = this.scale, opacity = this.opacity, blur = this.blur, _force = false, delay = 0, _mode = LyricLineRenderMode.SOLID) {
 		this.scale = scale;
 		this.opacity = opacity;
 		this.blur = blur;
@@ -3333,7 +3711,7 @@ var LineBalancer = class {
 					const marginLeft = Number.parseFloat(elStyle.marginLeft) || 0;
 					const marginRight = Number.parseFloat(elStyle.marginRight) || 0;
 					childInfos.push({
-						width: Math.max(0, rect.width + marginLeft + marginRight),
+						width: clampPositive(rect.width + marginLeft + marginRight),
 						text: el.textContent ?? "",
 						isSpace: false
 					});
@@ -3537,34 +3915,34 @@ function matrix4ToCSS(m, fractionDigits = 4) {
 }
 //#endregion
 //#region src/lyric-player/dom/lyric-line.ts
-const ANIMATION_FRAME_QUANTITY$1 = 32;
-const norNum$1 = (min, max) => (x) => Math.min(1, Math.max(0, (x - min) / (max - min)));
-const EMP_EASING_MID$1 = .5;
-const beginNum$1 = norNum$1(0, EMP_EASING_MID$1);
-const endNum$1 = norNum$1(EMP_EASING_MID$1, 1);
-const bezIn$1 = (0, bezier_easing.default)(.2, .4, .58, 1);
-const bezOut$1 = (0, bezier_easing.default)(.3, 0, .58, 1);
-const makeEmpEasing$1 = (mid) => {
-	return (x) => x < mid ? bezIn$1(beginNum$1(x)) : 1 - bezOut$1(endNum$1(x));
-};
-function generateFadeGradient$1(width, padding = 0, bright = "rgba(0,0,0,var(--bright-mask-alpha, 1.0))", dark = "rgba(0,0,0,var(--dark-mask-alpha, 1.0))") {
-	const totalAspect = 2 + width + padding;
-	const widthInTotal = width / totalAspect;
+const ANIMATION_FRAME_QUANTITY = 32;
+const norNum = (min, max) => (x) => clamp01((x - min) / (max - min));
+const EMP_EASING_MID = .5;
+const beginNum = norNum(0, EMP_EASING_MID);
+const endNum = norNum(EMP_EASING_MID, 1);
+const bezIn = (0, bezier_easing.default)(.2, .4, .58, 1);
+const bezOut = (0, bezier_easing.default)(.3, 0, .58, 1);
+const makeEmpEasing = (mid) => {
+	return (x) => x < mid ? bezIn(beginNum(x)) : 1 - bezOut(endNum(x));
+};
+function generateFadeGradient(width, padding = 0, bright = "rgba(0,0,0,var(--bright-mask-alpha, 1.0))", dark = "rgba(0,0,0,var(--dark-mask-alpha, 1.0))") {
+	const totalAspect = 2 + width + padding;
+	const widthInTotal = width / totalAspect;
 	const leftPos = (1 - widthInTotal) / 2;
 	return [`linear-gradient(to right,${bright} ${leftPos * 100}%,${dark} ${(leftPos + widthInTotal) * 100}%)`, totalAspect];
 }
-var RawLyricLineMouseEvent$1 = class extends MouseEvent {
+var RawLyricLineMouseEvent = class extends MouseEvent {
 	constructor(line, event) {
 		super(event.type, event);
 		this.line = line;
 	}
 };
-var LyricLineEl$1 = class extends LyricLineBase {
+var LyricLineEl = class extends LyricLineBase {
 	element = document.createElement("div");
 	splittedWords = [];
 	built = false;
 	lineSize = [0, 0];
-	renderMode = 0;
+	renderMode = LyricLineRenderMode.SOLID;
 	currentBrightAlpha = 1;
 	currentDarkAlpha = .2;
 	targetBrightAlpha = 1;
@@ -3585,12 +3963,9 @@ var LyricLineEl$1 = class extends LyricLineBase {
 		super();
 		this.lyricPlayer = lyricPlayer;
 		this.lyricLine = lyricLine;
-		this._prevParentEl = lyricPlayer.getElement();
-		lyricPlayer.resizeObserver.observe(this.element);
 		this.element.setAttribute("class", lyric_player_module_default.lyricLine);
 		if (this.lyricLine.isBG) this.element.classList.add(lyric_player_module_default.lyricBgLine);
 		if (this.lyricLine.isDuet) this.element.classList.add(lyric_player_module_default.lyricDuetLine);
-		this.lineTransforms.posY.setPosition(window.innerHeight * 2);
 		this.element.appendChild(document.createElement("div"));
 		this.element.appendChild(document.createElement("div"));
 		this.element.appendChild(document.createElement("div"));
@@ -3605,7 +3980,7 @@ var LyricLineEl$1 = class extends LyricLineBase {
 	}
 	listenersMap = /* @__PURE__ */ new Map();
 	onMouseEvent = (e) => {
-		const wrapped = new RawLyricLineMouseEvent$1(this, e);
+		const wrapped = new RawLyricLineMouseEvent(this, e);
 		for (const listener of this.listenersMap.get(e.type) ?? []) listener.call(this, wrapped);
 		if (!this.dispatchEvent(wrapped) || wrapped.defaultPrevented) {
 			e.preventDefault();
@@ -3641,30 +4016,28 @@ var LyricLineEl$1 = class extends LyricLineBase {
 		return true;
 	}
 	isEnabled = false;
-	async enable(maskAnimationTime = this.lyricLine.startTime, shouldPlay = true) {
+	async enable(maskAnimationTime = this.lyricPlayer.getCurrentTime(), shouldPlay = this.lyricPlayer.getIsPlaying()) {
 		this.isEnabled = true;
 		this.element.classList.add(lyric_player_module_default.active);
 		const main = this.element.children[0];
-		const relativeTime = Math.max(0, maskAnimationTime - this.lyricLine.startTime);
-		const actualMaskTime = maskAnimationTime === this.lyricLine.startTime ? this.lyricPlayer.getCurrentTime() : maskAnimationTime;
-		const maskRelativeTime = Math.max(0, actualMaskTime - this.lyricLine.startTime);
+		const relativeTime = clampPositive(maskAnimationTime - this.lyricLine.startTime);
 		for (const word of this.splittedWords) {
 			for (const a of word.elementAnimations) {
 				a.currentTime = relativeTime;
 				a.playbackRate = 1;
 				const timing = a.effect?.getComputedTiming();
-				const duration = timing?.duration || 0;
-				const endTime = (timing?.delay || 0) + duration;
+				const duration = Number(timing?.duration ?? 0);
+				const endTime = Number(timing?.delay ?? 0) + duration;
 				if (shouldPlay && relativeTime < endTime) a.play();
 				else a.pause();
 			}
 			for (const a of word.maskAnimations) {
-				const t = Math.min(this.totalDuration, maskRelativeTime);
+				const t = Math.min(this.totalDuration, relativeTime);
 				a.currentTime = t;
 				a.playbackRate = 1;
 				const timing = a.effect?.getComputedTiming();
-				const duration = timing?.duration || 0;
-				const endTime = (timing?.delay || 0) + duration;
+				const duration = Number(timing?.duration ?? 0);
+				const endTime = Number(timing?.delay ?? 0) + duration;
 				if (shouldPlay && t < endTime) a.play();
 				else a.pause();
 			}
@@ -3674,7 +4047,7 @@ var LyricLineEl$1 = class extends LyricLineBase {
 	disable() {
 		this.isEnabled = false;
 		this.element.classList.remove(lyric_player_module_default.active);
-		this.renderMode = 0;
+		this.renderMode = LyricLineRenderMode.SOLID;
 		const main = this.element.children[0];
 		for (const word of this.splittedWords) {
 			for (const a of word.elementAnimations) if (a.id === "float-word" || a.id.includes("emphasize-word-float-only")) {
@@ -3715,7 +4088,7 @@ var LyricLineEl$1 = class extends LyricLineBase {
 	setMaskAnimationState(maskAnimationTime = 0) {
 		const t = maskAnimationTime - this.lyricLine.startTime;
 		for (const word of this.splittedWords) for (const a of word.maskAnimations) {
-			a.currentTime = Math.min(this.totalDuration, Math.max(0, t));
+			a.currentTime = clamp(t, 0, this.totalDuration);
 			a.playbackRate = 1;
 			if (t >= 0 && t < this.totalDuration) a.play();
 			else a.pause();
@@ -3724,34 +4097,18 @@ var LyricLineEl$1 = class extends LyricLineBase {
 	getLine() {
 		return this.lyricLine;
 	}
-	_prevParentEl;
 	lastStyle = "";
 	show() {
-		if (!this.element.parentElement) {
-			this._prevParentEl.appendChild(this.element);
-			this.lyricPlayer.resizeObserver.observe(this.element);
-		}
 		if (!this.built) {
 			this.rebuildElement();
 			this.built = true;
 			this.updateMaskImageSync();
 		}
-		this.rebuildStyle();
-	}
-	hide() {
-		if (this.element.parentElement) {
-			this._prevParentEl.removeChild(this.element);
-			this.lyricPlayer.resizeObserver.unobserve(this.element);
-		}
-		if (this.built) {
-			this.disposeElements();
-			this.built = false;
-		}
 	}
 	rebuildStyle() {
 		let style = "";
-		style += `transform:translateY(${this.lineTransforms.posY.getCurrentPosition().toFixed(1)}px) scale(${(this.lineTransforms.scale.getCurrentPosition() / 100).toFixed(4)});`;
-		if (!this.lyricPlayer.getEnableSpring() && this.isInSight) style += `transition-delay:${this.delay}ms;`;
+		style += `transform: scale(${(this.lineTransforms.scale.getCurrentPosition() / 100).toFixed(4)});`;
+		if (!this.lyricPlayer.getEnableSpring()) style += `transition-delay:${this.delay}ms;`;
 		style += `filter:blur(${Math.min(5, this.blur)}px);`;
 		if (style !== this.lastStyle) {
 			this.lastStyle = style;
@@ -3906,7 +4263,7 @@ var LyricLineEl$1 = class extends LyricLineBase {
 		return a;
 	}
 	initEmphasizeAnimation(word, characterElements, duration, delay, rubyCharCount) {
-		const de = Math.max(0, delay);
+		const de = clampPositive(delay);
 		let du = Math.max(1e3, duration);
 		const anchorCharCount = rubyCharCount > 0 ? rubyCharCount : Math.max(1, characterElements.length);
 		let result = [];
@@ -3924,12 +4281,12 @@ var LyricLineEl$1 = class extends LyricLineBase {
 		amount = Math.min(1.2, amount);
 		blur = Math.min(.8, blur);
 		const animateDu = Number.isFinite(du) ? du : 0;
-		const empEasing = makeEmpEasing$1(EMP_EASING_MID$1);
+		const empEasing = makeEmpEasing(EMP_EASING_MID);
 		result = characterElements.flatMap((el, i, arr) => {
 			const wordDe = de + du / 2.5 / anchorCharCount * i;
 			const result = [];
-			const frames = new Array(ANIMATION_FRAME_QUANTITY$1).fill(0).map((_, j) => {
-				const x = (j + 1) / ANIMATION_FRAME_QUANTITY$1;
+			const frames = new Array(ANIMATION_FRAME_QUANTITY).fill(0).map((_, j) => {
+				const x = (j + 1) / ANIMATION_FRAME_QUANTITY;
 				const transX = empEasing(x);
 				const glowLevel = empEasing(x) * blur;
 				const mat = scaleMatrix4(createMatrix4(), 1 + transX * .1 * amount);
@@ -3954,8 +4311,8 @@ var LyricLineEl$1 = class extends LyricLineBase {
 			};
 			glow.pause();
 			result.push(glow);
-			const floatFrame = new Array(ANIMATION_FRAME_QUANTITY$1).fill(0).map((_, j) => {
-				const x = (j + 1) / ANIMATION_FRAME_QUANTITY$1;
+			const floatFrame = new Array(ANIMATION_FRAME_QUANTITY).fill(0).map((_, j) => {
+				const x = (j + 1) / ANIMATION_FRAME_QUANTITY;
 				let y = Math.sin(x * Math.PI);
 				if (this.lyricLine.isBG) y *= 2;
 				return {
@@ -4014,7 +4371,7 @@ var LyricLineEl$1 = class extends LyricLineBase {
 				word.width = wordEl.clientWidth;
 				word.height = wordEl.clientHeight;
 				const fadeWidth = word.height * this.lyricPlayer.getWordFadeWidth();
-				const [maskImage, totalAspect] = generateFadeGradient$1(fadeWidth / word.width);
+				const [maskImage, totalAspect] = generateFadeGradient(fadeWidth / word.width);
 				const totalAspectStr = `${totalAspect * 100}% 100%`;
 				if (this.lyricPlayer.supportMaskImage) {
 					wordEl.style.maskImage = maskImage;
@@ -4035,12 +4392,12 @@ var LyricLineEl$1 = class extends LyricLineBase {
 		}
 	}
 	generateWebAnimationBasedMaskImage() {
-		const totalFadeDuration = Math.max(this.splittedWords.reduce((pv, w) => Math.max(w.endTime, pv), 0), this.lyricLine.endTime) - this.lyricLine.startTime;
+		const totalFadeDuration = Math.max(0, ...this.splittedWords.map((w) => w.endTime), this.lyricLine.endTime) - this.lyricLine.startTime;
 		this.splittedWords.forEach((word, i) => {
 			const wordEl = word.mainElement;
 			if (wordEl) {
 				const fadeWidth = word.height * this.lyricPlayer.getWordFadeWidth();
-				const [maskImage, totalAspect] = generateFadeGradient$1(fadeWidth / (word.width + word.padding * 2));
+				const [maskImage, totalAspect] = generateFadeGradient(fadeWidth / (word.width + word.padding * 2));
 				const totalAspectStr = `${totalAspect * 100}% 100%`;
 				if (this.lyricPlayer.supportMaskImage) {
 					wordEl.style.maskImage = maskImage;
@@ -4055,7 +4412,7 @@ var LyricLineEl$1 = class extends LyricLineBase {
 				}
 				const widthBeforeSelf = this.splittedWords.slice(0, i).reduce((a, b) => a + b.width, 0) + (this.splittedWords[0] ? fadeWidth : 0);
 				const minOffset = -(word.width + word.padding * 2 + fadeWidth);
-				const clampOffset = (x) => Math.max(minOffset, Math.min(0, x));
+				const clampOffset = (x) => clamp(x, minOffset, 0);
 				let curPos = -widthBeforeSelf - word.width - word.padding - fadeWidth;
 				let timeOffset = 0;
 				const frames = [];
@@ -4063,7 +4420,7 @@ var LyricLineEl$1 = class extends LyricLineBase {
 				let lastTime = 0;
 				const pushFrame = () => {
 					const moveOffset = curPos - lastPos;
-					const time = Math.max(0, Math.min(1, timeOffset));
+					const time = clamp01(timeOffset);
 					const duration = time - lastTime;
 					const d = Math.abs(duration / moveOffset);
 					if (curPos > minOffset && lastPos < minOffset) {
@@ -4103,7 +4460,7 @@ var LyricLineEl$1 = class extends LyricLineBase {
 						lastTimeStamp = curTimeStamp;
 					}
 					{
-						const fadeDuration = Math.max(0, otherWord.endTime - otherWord.startTime);
+						const fadeDuration = clampPositive(otherWord.endTime - otherWord.startTime);
 						const rubySegments = this.getRubySegments(otherWord);
 						const rubyCharCount = rubySegments.reduce((total, ruby) => total + ruby.word.length, 0);
 						if (rubyCharCount > 0) {
@@ -4119,7 +4476,7 @@ var LyricLineEl$1 = class extends LyricLineBase {
 								timeOffset += rubyStaticDuration / totalFadeDuration;
 								if (rubyStaticDuration > 0) pushFrame();
 								lastTimeStamp = rubyStartStamp;
-								const perCharDuration = Math.max(0, rubyEnd - rubyStart) / ruby.word.length;
+								const perCharDuration = clampPositive(rubyEnd - rubyStart) / ruby.word.length;
 								for (let rubyCharIndex = 0; rubyCharIndex < ruby.word.length; rubyCharIndex++) {
 									timeOffset += perCharDuration / totalFadeDuration;
 									curPos += widthPerChar;
@@ -4169,10 +4526,10 @@ var LyricLineEl$1 = class extends LyricLineBase {
 		return this.element;
 	}
 	updateMaskAlphaTargets(scale) {
-		const factor = Math.max(0, Math.min(1, (scale - .97) / .03));
+		const factor = clamp01((scale - .97) / .03);
 		const dynamicDarkAlpha = factor * .2 + .2;
 		const dynamicBrightAlpha = factor * .8 + .2;
-		if (this.renderMode === 0) {
+		if (this.renderMode === LyricLineRenderMode.SOLID) {
 			this.targetBrightAlpha = dynamicDarkAlpha;
 			this.targetDarkAlpha = dynamicDarkAlpha;
 		} else {
@@ -4194,25 +4551,19 @@ var LyricLineEl$1 = class extends LyricLineBase {
 		this.element.style.setProperty("--bright-mask-alpha", this.currentBrightAlpha.toFixed(3));
 		this.element.style.setProperty("--dark-mask-alpha", this.currentDarkAlpha.toFixed(3));
 	}
-	setTransform(top = this.top, scale = this.scale, opacity = 1, blur = 0, force = false, delay = 0, mode = 0) {
-		super.setTransform(top, scale, opacity, blur, force, delay);
+	setTransform(scale = this.scale, opacity = 1, blur = 0, force = false, delay = 0, mode = LyricLineRenderMode.SOLID) {
+		super.setTransform(scale, opacity, blur, force, delay);
 		this.renderMode = mode;
-		const beforeInSight = this.isInSight;
 		const enableSpring = this.lyricPlayer.getEnableSpring();
-		this.top = top;
+		this.top = 0;
 		this.scale = scale;
 		this.delay = delay * 1e3 | 0;
 		const main = this.element.children[0];
 		main.style.opacity = `${opacity}`;
 		if (force || !enableSpring) {
 			this.blur = Math.min(32, blur);
-			this.lineTransforms.posY.setPosition(top);
 			this.lineTransforms.scale.setPosition(scale);
-			if (!enableSpring) {
-				const afterInSight = this.isInSight;
-				if (beforeInSight || afterInSight) this.show();
-				else this.hide();
-			} else this.rebuildStyle();
+			this.rebuildStyle();
 			const currentScale = this.lineTransforms.scale.getCurrentPosition();
 			this.updateMaskAlphaTargets(currentScale / 100);
 			this.currentBrightAlpha = this.targetBrightAlpha;
@@ -4220,21 +4571,18 @@ var LyricLineEl$1 = class extends LyricLineBase {
 			this.element.style.setProperty("--bright-mask-alpha", String(this.currentBrightAlpha));
 			this.element.style.setProperty("--dark-mask-alpha", String(this.currentDarkAlpha));
 		} else {
-			this.lineTransforms.posY.setTargetPosition(top, delay);
 			this.lineTransforms.scale.setTargetPosition(scale);
 			if (this.blur !== Math.min(5, blur)) {
 				this.blur = Math.min(5, blur);
-				const roundedBlur = blur.toFixed(3);
-				this.element.style.filter = `blur(${roundedBlur}px)`;
+				this.element.style.filter = `blur(${blur.toFixed(3)}px)`;
 			}
 		}
 	}
 	update(delta = 0) {
 		if (!this.lyricPlayer.getEnableSpring()) return;
-		this.lineTransforms.posY.update(delta);
 		this.lineTransforms.scale.update(delta);
-		if (this.isInSight) this.show();
-		else this.hide();
+		this.rebuildStyle();
+		if (!this.built) return;
 		const currentScale = this.lineTransforms.scale.getCurrentPosition() / 100;
 		this.updateMaskAlphaTargets(currentScale);
 		this.applyAlphaToDom(delta);
@@ -4242,13 +4590,11 @@ var LyricLineEl$1 = class extends LyricLineBase {
 	_getDebugTargetPos() {
 		return `[位移: ${this.top}; 缩放: ${this.scale}; 延时: ${this.delay}]`;
 	}
-	get isInSight() {
-		const t = this.lineTransforms.posY.getCurrentPosition();
-		const h = this.lyricPlayer.lyricLinesSize.get(this)?.[1] ?? 0;
-		const b = t + h;
-		const pb = this.lyricPlayer.size[1];
-		const ov = this.lyricPlayer.getOverscanPx();
-		return !(t > pb + h + ov || b < -h - ov);
+	teardownContent() {
+		if (this.built) {
+			this.disposeElements();
+			this.built = false;
+		}
 	}
 	disposeElements() {
 		this.balancer?.reset();
@@ -4296,7 +4642,7 @@ var LyricLineMouseEvent = class extends MouseEvent {
 * 尽可能贴切 Apple Music for iPad 的歌词效果设计，且做了力所能及的优化措施
 */
 var DomLyricPlayer = class extends LyricPlayerBase {
-	currentLyricLineObjects = [];
+	currentLyricGroups = [];
 	onResize() {
 		const computedStyles = getComputedStyle(this.element);
 		this._baseFontSize = Number.parseFloat(computedStyles.fontSize);
@@ -4333,7 +4679,10 @@ var DomLyricPlayer = class extends LyricPlayerBase {
 	rebuildStyle() {}
 	setWordFadeWidth(value = .5) {
 		super.setWordFadeWidth(value);
-		for (const el of this.currentLyricLineObjects) el.updateMaskImageSync();
+		for (const group of this.currentLyricGroups) {
+			group.mainLine.updateMaskImageSync();
+			group.bgLine?.updateMaskImageSync();
+		}
 	}
 	/**
 	* 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误
@@ -4345,943 +4694,75 @@ var DomLyricPlayer = class extends LyricPlayerBase {
 		if (this.hasDuetLine) this.element.classList.add(lyric_player_module_default.hasDuetLine);
 		else this.element.classList.remove(lyric_player_module_default.hasDuetLine);
 		if (!this.supportMaskImage) this.element.style.setProperty("--amll-player-time", `${initialTime}`);
-		for (const line of this.currentLyricLineObjects) {
-			line.removeMouseEventListener("click", this.onLineClickedHandler);
-			line.removeMouseEventListener("contextmenu", this.onLineClickedHandler);
-			line.dispose();
+		for (const group of this.currentLyricGroups) {
+			const linesToDispose = [group.mainLine, group.bgLine].filter((line) => !!line);
+			for (const line of linesToDispose) {
+				line.removeMouseEventListener("click", this.onLineClickedHandler);
+				line.removeMouseEventListener("contextmenu", this.onLineClickedHandler);
+			}
+			group.dispose();
 		}
-		this.currentLyricLineObjects = this.processedLines.map((line, i) => {
-			const lineEl = new LyricLineEl$1(this, line);
+		this.currentLyricGroups = [];
+		let currentGroup = null;
+		for (let i = 0; i < this.processedLines.length; i++) {
+			const line = this.processedLines[i];
+			const lineEl = new LyricLineEl(this, line);
 			lineEl.addMouseEventListener("click", this.onLineClickedHandler);
 			lineEl.addMouseEventListener("contextmenu", this.onLineClickedHandler);
 			this.lyricLinesIndexes.set(lineEl, i);
-			this.lyricLineElementMap.set(lineEl.getElement(), lineEl);
-			return lineEl;
-		});
+			if (!line.isBG || !currentGroup) {
+				currentGroup = new LyricLineGroup(this, lineEl);
+				this.currentLyricGroups.push(currentGroup);
+				this.lyricGroupElementMap.set(currentGroup.element, currentGroup);
+			} else currentGroup.addBgLine(lineEl);
+		}
 		this.setLinePosXSpringParams({});
 		this.setLinePosYSpringParams({});
 		this.setLineScaleSpringParams({});
+		this.setCurrentTime(initialTime, true);
 		this.calcLayout(true);
 		this.update(0);
 	}
 	pause() {
 		super.pause();
-		this.element.classList.remove("playing");
+		this.element.classList.remove(lyric_player_module_default.playing);
 		this.interludeDots.pause();
-		for (const line of this.currentLyricLineObjects) line.pause();
+		for (const group of this.currentLyricGroups) {
+			group.mainLine.pause();
+			group.bgLine?.pause();
+		}
 	}
 	resume() {
 		super.resume();
-		this.element.classList.add("playing");
+		this.element.classList.add(lyric_player_module_default.playing);
 		this.interludeDots.resume();
-		for (const line of this.currentLyricLineObjects) line.resume();
+		for (const group of this.currentLyricGroups) {
+			group.mainLine.resume();
+			group.bgLine?.resume();
+		}
 	}
 	update(delta = 0) {
-		if (!this.initialLayoutFinished) return;
+		if (!this.timelineState.initialLayoutFinished) return;
 		super.update(delta);
-		if (!this.supportMaskImage) this.element.style.setProperty("--amll-player-time", `${this.currentTime}`);
+		if (!this.supportMaskImage) this.element.style.setProperty("--amll-player-time", `${this.timelineState.currentTime}`);
 		if (!this.isPageVisible) return;
 		const deltaS = delta / 1e3;
-		for (const line of this.currentLyricLineObjects) line.update(deltaS);
+		for (const group of this.currentLyricGroups) group.update(deltaS);
 	}
 	dispose() {
 		super.dispose();
 		this.element.remove();
-		for (const el of this.currentLyricLineObjects) el.dispose();
+		for (const group of this.currentLyricGroups) group.dispose();
 		this.bottomLine.dispose();
 		this.interludeDots.dispose();
 	}
 };
 //#endregion
-//#region src/utils/debounce.ts
-function debounce(cb, wait = 20) {
-	let h;
-	const callable = (...args) => {
-		clearTimeout(h);
-		h = setTimeout(() => cb(...args), wait);
-	};
-	return callable;
-}
-//#endregion
-//#region src/lyric-player/dom-slim/index.module.css
-var index_module_default = {
-	"active": "KxF9Iq_active",
-	"duet": "KxF9Iq_duet",
-	"enabled": "KxF9Iq_enabled",
-	"hasDuetLine": "KxF9Iq_hasDuetLine",
-	"interludeDots": "KxF9Iq_interludeDots",
-	"lyricBgLine": "KxF9Iq_lyricBgLine",
-	"lyricDuetLine": "KxF9Iq_lyricDuetLine",
-	"lyricLine": "KxF9Iq_lyricLine",
-	"lyricMainLine": "KxF9Iq_lyricMainLine",
-	"lyricSubLine": "KxF9Iq_lyricSubLine",
-	"romanWord": "KxF9Iq_romanWord",
-	"rubyWord": "KxF9Iq_rubyWord",
-	"tmpDisableTransition": "KxF9Iq_tmpDisableTransition",
-	"wordBody": "KxF9Iq_wordBody",
-	"wordWithRuby": "KxF9Iq_wordWithRuby"
-};
-//#endregion
-//#region src/utils/mutex.ts
-function mutexifyFunction(func) {
-	const awaitingTasks = [];
-	function processNextTask() {
-		const task = awaitingTasks[0];
-		if (!task) return;
-		func(...task.args).then((value) => {
-			task.resolve(value);
-		}).catch((reason) => {
-			task.reject(reason);
-		}).finally(() => {
-			awaitingTasks.shift();
-			if (awaitingTasks.length > 0) processNextTask();
-		});
-	}
-	return ((...args) => {
-		return new Promise((resolve, reject) => {
-			awaitingTasks.push({
-				resolve,
-				reject,
-				args
-			});
-			if (awaitingTasks.length === 1) processNextTask();
-		});
-	});
-}
-//#endregion
-//#region src/lyric-player/dom-slim/lyric-line.ts
-const ANIMATION_FRAME_QUANTITY = 32;
-const norNum = (min, max) => (x) => Math.min(1, Math.max(0, (x - min) / (max - min)));
-const EMP_EASING_MID = .5;
-const beginNum = norNum(0, EMP_EASING_MID);
-const endNum = norNum(EMP_EASING_MID, 1);
-const bezIn = (0, bezier_easing.default)(.2, .4, .58, 1);
-const bezOut = (0, bezier_easing.default)(.3, 0, .58, 1);
-const makeEmpEasing = (mid) => {
-	return (x) => x < mid ? bezIn(beginNum(x)) : 1 - bezOut(endNum(x));
-};
-function generateFadeGradient(width, padding = 0, bright = "rgba(0,0,0,var(--bright-mask-alpha, 1.0))", dark = "rgba(0,0,0,var(--dark-mask-alpha, 1.0))") {
-	const totalAspect = 2 + width + padding;
-	const widthInTotal = width / totalAspect;
-	const leftPos = (1 - widthInTotal) / 2;
-	return [`linear-gradient(to right,${bright} ${leftPos * 100}%,${dark} ${(leftPos + widthInTotal) * 100}%)`, totalAspect];
-}
-var RawLyricLineMouseEvent = class extends MouseEvent {
-	constructor(line, event) {
-		super(event.type, event);
-		this.line = line;
-	}
-};
-function getScaleFromTransform(transform) {
-	const match = transform.match(/matrix\(([^)]+)\)/);
-	if (match) {
-		const values = match[1].split(", ");
-		return (Number.parseFloat(values[0]) + Number.parseFloat(values[3])) / 2;
-	}
-	return 1;
-}
-var LyricLineEl = class extends LyricLineBase {
-	element = document.createElement("div");
-	splittedWords = [];
-	lineSize = [0, 0];
-	constructor(lyricPlayer, lyricLine = {
-		words: [],
-		translatedLyric: "",
-		romanLyric: "",
-		startTime: 0,
-		endTime: 0,
-		isBG: false,
-		isDuet: false
-	}) {
-		super();
-		this.lyricPlayer = lyricPlayer;
-		this.lyricLine = lyricLine;
-		this.element.setAttribute("class", index_module_default.lyricLine);
-		if (this.lyricLine.isBG) this.element.classList.add(index_module_default.lyricBgLine);
-		if (this.lyricLine.isDuet) this.element.classList.add(index_module_default.lyricDuetLine);
-		this.element.appendChild(document.createElement("div"));
-		this.element.appendChild(document.createElement("div"));
-		this.element.appendChild(document.createElement("div"));
-		const main = this.element.children[0];
-		const trans = this.element.children[1];
-		const roman = this.element.children[2];
-		main.setAttribute("class", index_module_default.lyricMainLine);
-		trans.setAttribute("class", index_module_default.lyricSubLine);
-		roman.setAttribute("class", index_module_default.lyricSubLine);
-		this.rebuildElement();
-		this.rebuildStyle();
-		this.markMaskImageDirty("Initial construction");
-	}
-	listenersMap = /* @__PURE__ */ new Map();
-	onMouseEvent = (e) => {
-		const wrapped = new RawLyricLineMouseEvent(this, e);
-		for (const listener of this.listenersMap.get(e.type) ?? []) listener.call(this, wrapped);
-		if (!this.dispatchEvent(wrapped) || wrapped.defaultPrevented) {
-			e.preventDefault();
-			e.stopPropagation();
-			e.stopImmediatePropagation();
-		}
-	};
-	addMouseEventListener(type, callback, options) {
-		if (callback) {
-			const listeners = this.listenersMap.get(type) ?? /* @__PURE__ */ new Set();
-			if (listeners.size === 0) this.element.addEventListener(type, this.onMouseEvent, options);
-			listeners.add(callback);
-			this.listenersMap.set(type, listeners);
-		}
-	}
-	removeMouseEventListener(type, callback, options) {
-		if (callback) {
-			const listeners = this.listenersMap.get(type);
-			if (listeners) {
-				listeners.delete(callback);
-				if (listeners.size === 0) this.element.removeEventListener(type, this.onMouseEvent, options);
-			}
-		}
-	}
-	areWordsOnSameLine(word1, word2) {
-		if (word1?.mainElement && word2?.mainElement) {
-			const word1el = word1.mainElement;
-			const word2el = word2.mainElement;
-			const rect1 = word1el.getBoundingClientRect();
-			const rect2 = word2el.getBoundingClientRect();
-			return Math.abs(rect1.top - rect2.top) < 10;
-		}
-		return true;
-	}
-	isEnabled = false;
-	async enable(maskAnimationTime = this.lyricLine.startTime) {
-		this.isEnabled = true;
-		this.element.classList.add(index_module_default.active);
-		await this.waitMaskImageUpdated();
-		const main = this.element.children[0];
-		for (const word of this.splittedWords) {
-			for (const a of word.elementAnimations) {
-				a.currentTime = 0;
-				a.playbackRate = 1;
-				a.play();
-			}
-			for (const a of word.maskAnimations) {
-				a.currentTime = Math.min(this.totalDuration, Math.max(0, maskAnimationTime - this.lyricLine.startTime));
-				a.playbackRate = 1;
-				a.play();
-			}
-		}
-		main.classList.add(index_module_default.active);
-	}
-	disable() {
-		this.isEnabled = false;
-		this.element.classList.remove(index_module_default.active);
-		const main = this.element.children[0];
-		for (const word of this.splittedWords) for (const a of word.elementAnimations) if (a.id === "float-word" || a.id.includes("emphasize-word-float-only")) {
-			a.playbackRate = -1;
-			a.play();
-		}
-		main.classList.remove(index_module_default.active);
-	}
-	lastWord;
-	async resume() {
-		await this.waitMaskImageUpdated();
-		if (!this.isEnabled) return;
-		for (const word of this.splittedWords) {
-			for (const a of word.elementAnimations) if (!this.lastWord || this.splittedWords.indexOf(this.lastWord) < this.splittedWords.indexOf(word)) a.play();
-			for (const a of word.maskAnimations) if (!this.lastWord || this.splittedWords.indexOf(this.lastWord) < this.splittedWords.indexOf(word)) a.play();
-		}
-	}
-	async pause() {
-		await this.waitMaskImageUpdated();
-		if (!this.isEnabled) return;
-		for (const word of this.splittedWords) {
-			for (const a of word.elementAnimations) a.pause();
-			for (const a of word.maskAnimations) a.pause();
-		}
-	}
-	setMaskAnimationState(maskAnimationTime = 0) {
-		const t = maskAnimationTime - this.lyricLine.startTime;
-		for (const word of this.splittedWords) for (const a of word.maskAnimations) {
-			a.currentTime = Math.min(this.totalDuration, Math.max(0, t));
-			a.playbackRate = 1;
-			if (t >= 0 && t < this.totalDuration) a.play();
-			else a.pause();
-		}
-	}
-	measureLockMark = false;
-	measureLock = mutexifyFunction(async (callback) => {
-		if (this.measureLockMark) return;
-		this.measureLockMark = true;
-		await callback();
-		this.measureLockMark = false;
-	});
-	getLine() {
-		return this.lyricLine;
-	}
-	show() {
-		this.rebuildStyle();
-	}
-	hide() {}
-	rebuildStyle() {}
-	getRubySegments(word) {
-		return (word.ruby ?? []).filter((ruby) => (ruby?.word?.trim().length ?? 0) > 0);
-	}
-	buildWordElement(word, shouldEmphasize, hasRubyLine, hasRomanLine, displayWord) {
-		const mainWordEl = document.createElement("span");
-		const subElements = [];
-		const romanWord = word.romanWord?.trim() ?? "";
-		let wordContainer = mainWordEl;
-		if (hasRubyLine || hasRomanLine) {
-			wordContainer = document.createElement("div");
-			mainWordEl.appendChild(wordContainer);
-		}
-		if (hasRubyLine) {
-			const rubyWordEl = document.createElement("div");
-			const rubySegments = this.getRubySegments(word);
-			for (const ruby of rubySegments) {
-				const rubyPartEl = document.createElement("span");
-				rubyPartEl.innerText = ruby.word;
-				rubyPartEl.dataset.startTime = String(ruby.startTime);
-				rubyPartEl.dataset.endTime = String(ruby.endTime);
-				rubyWordEl.appendChild(rubyPartEl);
-			}
-			rubyWordEl.classList.add(index_module_default.rubyWord);
-			mainWordEl.classList.add(index_module_default.wordWithRuby);
-			wordContainer.classList.add(index_module_default.wordBody);
-			mainWordEl.insertBefore(rubyWordEl, wordContainer);
-		}
-		if (shouldEmphasize) {
-			mainWordEl.classList.add(index_module_default.emphasize);
-			for (const char of displayWord.trim()) {
-				const charEl = document.createElement("span");
-				charEl.innerText = char;
-				subElements.push(charEl);
-				wordContainer.appendChild(charEl);
-			}
-		} else if (hasRomanLine) {
-			const wordEl = document.createElement("div");
-			wordEl.innerText = displayWord;
-			wordContainer.appendChild(wordEl);
-		} else mainWordEl.innerText = displayWord;
-		if (hasRomanLine) {
-			const romanWordEl = document.createElement("div");
-			romanWordEl.innerText = romanWord.length > 0 ? romanWord : "\xA0";
-			romanWordEl.classList.add(index_module_default.romanWord);
-			wordContainer.appendChild(romanWordEl);
-		}
-		return {
-			mainWordEl,
-			subElements
-		};
-	}
-	rebuildElement() {
-		this.disposeElements();
-		const main = this.element.children[0];
-		const trans = this.element.children[1];
-		const roman = this.element.children[2];
-		if (this.lyricPlayer._getIsNonDynamic()) {
-			main.innerText = this.lyricLine.words.map((w) => this.lyricPlayer.processObsceneWord(w)).join("");
-			trans.innerText = this.lyricLine.translatedLyric;
-			roman.innerText = this.lyricLine.romanLyric;
-			return;
-		}
-		const chunkedWords = chunkAndSplitLyricWords(this.lyricLine.words);
-		const hasRubyLine = this.lyricLine.words.some((word) => (word.ruby?.length ?? 0) > 0);
-		const hasRomanLine = this.lyricLine.words.some((word) => (word.romanWord?.trim().length ?? 0) > 0);
-		main.innerHTML = "";
-		for (const chunk of chunkedWords) if (Array.isArray(chunk)) {
-			if (chunk.length === 0) continue;
-			const merged = chunk.reduce((a, b) => {
-				a.endTime = Math.max(a.endTime, b.endTime);
-				a.startTime = Math.min(a.startTime, b.startTime);
-				a.word += b.word;
-				return a;
-			}, {
-				word: "",
-				romanWord: "",
-				startTime: Number.POSITIVE_INFINITY,
-				endTime: Number.NEGATIVE_INFINITY,
-				wordType: "normal",
-				obscene: false
-			});
-			const emp = chunk.map((word) => LyricLineBase.shouldEmphasize(word)).reduce((a, b) => a || b, LyricLineBase.shouldEmphasize(merged));
-			const wrapperWordEl = document.createElement("span");
-			wrapperWordEl.classList.add(index_module_default.emphasizeWrapper);
-			const characterElements = [];
-			for (const word of chunk) {
-				const { mainWordEl, subElements } = this.buildWordElement(word, emp, hasRubyLine, hasRomanLine, this.lyricPlayer.processObsceneWord(word));
-				if (emp) characterElements.push(...subElements);
-				this.splittedWords.push({
-					...word,
-					mainElement: mainWordEl,
-					subElements,
-					elementAnimations: [],
-					maskAnimations: [],
-					width: 0,
-					height: 0,
-					padding: 0,
-					shouldEmphasize: emp
-				});
-				wrapperWordEl.appendChild(mainWordEl);
-			}
-			if (emp) this.splittedWords[this.splittedWords.length - 1].elementAnimations.push(...this.initEmphasizeAnimation(merged, characterElements, merged.endTime - merged.startTime, merged.startTime - this.lyricLine.startTime));
-			if (merged.word.trimStart() !== merged.word) main.appendChild(document.createTextNode(" "));
-			main.appendChild(wrapperWordEl);
-			if (merged.word.trimEnd() !== merged.word && LyricLineBase.shouldEmphasize(merged)) main.appendChild(document.createTextNode(" "));
-		} else if (chunk.word.trim().length === 0) main.appendChild(document.createTextNode(" "));
-		else {
-			const emp = LyricLineBase.shouldEmphasize(chunk);
-			const { mainWordEl, subElements } = this.buildWordElement(chunk, emp, hasRubyLine, hasRomanLine, this.lyricPlayer.processObsceneWord(chunk).trim());
-			const realWord = {
-				...chunk,
-				mainElement: mainWordEl,
-				subElements,
-				elementAnimations: [],
-				maskAnimations: [],
-				width: 0,
-				height: 0,
-				padding: 0,
-				shouldEmphasize: emp
-			};
-			if (emp) {
-				const duration = Math.abs(realWord.endTime - realWord.startTime);
-				realWord.elementAnimations.push(...this.initEmphasizeAnimation(chunk, subElements, duration, realWord.startTime - this.lyricLine.startTime));
-			}
-			if (chunk.word.trimStart() !== chunk.word) main.appendChild(document.createTextNode(" "));
-			main.appendChild(mainWordEl);
-			if (chunk.word.trimEnd() !== chunk.word) main.appendChild(document.createTextNode(" "));
-			this.splittedWords.push(realWord);
-		}
-		trans.innerText = this.lyricLine.translatedLyric;
-		roman.innerText = this.lyricLine.romanLyric;
-	}
-	initEmphasizeAnimation(word, characterElements, duration, delay) {
-		const de = Math.max(0, delay);
-		let du = Math.max(1e3, duration);
-		let result = [];
-		let amount = du / 2e3;
-		amount = amount > 1 ? Math.sqrt(amount) : amount ** 3;
-		let blur = du / 3e3;
-		blur = blur > 1 ? Math.sqrt(blur) : blur ** 3;
-		amount *= .6;
-		blur *= .5;
-		if (this.lyricLine.words.length > 0 && word.word.includes(this.lyricLine.words[this.lyricLine.words.length - 1].word)) {
-			amount *= 1.6;
-			blur *= 1.5;
-			du *= 1.2;
-		}
-		amount = Math.min(1.2, amount);
-		blur = Math.min(.8, blur);
-		const animateDu = Number.isFinite(du) ? du : 0;
-		const empEasing = makeEmpEasing(EMP_EASING_MID);
-		result = characterElements.flatMap((el, i, arr) => {
-			const wordDe = de + du / 2.5 / arr.length * i;
-			const result = [];
-			const frames = new Array(ANIMATION_FRAME_QUANTITY).fill(0).map((_, j) => {
-				const x = (j + 1) / ANIMATION_FRAME_QUANTITY;
-				const transX = empEasing(x);
-				const glowLevel = empEasing(x) * blur;
-				const mat = scaleMatrix4(createMatrix4(), 1 + transX * .1 * amount);
-				const offsetX = -transX * .03 * amount * (arr.length / 2 - i);
-				const offsetY = -transX * .025 * amount;
-				return {
-					offset: x,
-					transform: `${matrix4ToCSS(mat, 4)} translate(${offsetX}em, ${offsetY}em)`,
-					textShadow: `0 0 ${Math.min(.3, blur * .3)}em rgba(255, 255, 255, ${glowLevel})`
-				};
-			});
-			const glow = el.animate(frames, {
-				duration: animateDu,
-				delay: Number.isFinite(wordDe) ? wordDe : 0,
-				id: `emphasize-word-${el.innerText}-${i}`,
-				iterations: 1,
-				composite: "replace",
-				fill: "both"
-			});
-			glow.onfinish = () => {
-				glow.pause();
-			};
-			glow.pause();
-			result.push(glow);
-			const floatFrame = new Array(ANIMATION_FRAME_QUANTITY).fill(0).map((_, j) => {
-				const x = (j + 1) / ANIMATION_FRAME_QUANTITY;
-				let y = Math.sin(x * Math.PI);
-				if (this.lyricLine.isBG) y *= 2;
-				return {
-					offset: x,
-					transform: `translateY(${-y * .05}em)`
-				};
-			});
-			const float = el.animate(floatFrame, {
-				duration: animateDu * 1.4,
-				delay: Number.isFinite(wordDe) ? wordDe - 400 : 0,
-				id: "emphasize-word-float",
-				iterations: 1,
-				composite: "add",
-				fill: "both"
-			});
-			float.onfinish = () => {
-				float.pause();
-			};
-			float.pause();
-			result.push(float);
-			return result;
-		});
-		return result;
-	}
-	get totalDuration() {
-		return this.lyricLine.endTime - this.lyricLine.startTime;
-	}
-	maskImageDirty = false;
-	markImageDirtyPromiseResolve = /* @__PURE__ */ new Set();
-	markImageDirtyPromise = new Promise((resolve) => {
-		this.markImageDirtyPromiseResolve.add(resolve);
-	});
-	markMaskImageDirty(_debugReason = "") {
-		this.maskImageDirty = true;
-		if (!this.element.classList.contains(index_module_default.dirty)) this.element.classList.add(index_module_default.dirty);
-		const newPromise = Promise.all([this.markImageDirtyPromise, new Promise((resolve) => {
-			this.markImageDirtyPromiseResolve.add(resolve);
-		})]).then(() => {});
-		this.markImageDirtyPromise = newPromise;
-		return newPromise;
-	}
-	waitMaskImageUpdated() {
-		return this.markImageDirtyPromise;
-	}
-	async updateMaskImage() {
-		if (!this.element.checkVisibility({ contentVisibilityAuto: true })) return;
-		this.maskImageDirty = false;
-		await this.measureLock(async () => {
-			await Promise.all(this.splittedWords.map(async (word) => {
-				const el = word.mainElement;
-				if (el) await measure(() => {
-					word.padding = Number.parseFloat(getComputedStyle(el).paddingLeft);
-					word.width = el.clientWidth - word.padding * 2;
-					word.height = el.clientHeight - word.padding * 2;
-				});
-				else {
-					word.width = 0;
-					word.height = 0;
-					word.padding = 0;
-				}
-				if (word.width * word.height === 0) console.warn("Word size is zero");
-			}));
-			await mutate(() => {
-				if (this.lyricPlayer.supportMaskImage) this.generateWebAnimationBasedMaskImage();
-				else this.generateCalcBasedMaskImage();
-			});
-		});
-		for (const resolve of this.markImageDirtyPromiseResolve) {
-			resolve();
-			this.markImageDirtyPromiseResolve.delete(resolve);
-		}
-		await mutate(() => {
-			this.element.classList.remove(index_module_default.dirty);
-		});
-	}
-	generateCalcBasedMaskImage() {
-		for (const word of this.splittedWords) {
-			const wordEl = word.mainElement;
-			if (wordEl) {
-				word.width = wordEl.clientWidth;
-				word.height = wordEl.clientHeight;
-				const fadeWidth = word.height * this.lyricPlayer.getWordFadeWidth();
-				const [maskImage, totalAspect] = generateFadeGradient(fadeWidth / word.width);
-				const totalAspectStr = `${totalAspect * 100}% 100%`;
-				if (this.lyricPlayer.supportMaskImage) {
-					wordEl.style.maskImage = maskImage;
-					wordEl.style.maskRepeat = "no-repeat";
-					wordEl.style.maskOrigin = "left";
-					wordEl.style.maskSize = totalAspectStr;
-				} else {
-					wordEl.style.webkitMaskImage = maskImage;
-					wordEl.style.webkitMaskRepeat = "no-repeat";
-					wordEl.style.webkitMaskOrigin = "left";
-					wordEl.style.webkitMaskSize = totalAspectStr;
-				}
-				const w = word.width + fadeWidth;
-				const maskPos = `clamp(${-w}px,calc(${-w}px + (var(--amll-player-time) - ${word.startTime})*${w / Math.abs(word.endTime - word.startTime)}px),0px) 0px, left top`;
-				wordEl.style.maskPosition = maskPos;
-				wordEl.style.webkitMaskPosition = maskPos;
-			}
-		}
-	}
-	generateWebAnimationBasedMaskImage() {
-		const totalFadeDuration = Math.max(this.splittedWords.reduce((pv, w) => Math.max(w.endTime, pv), 0), this.lyricLine.endTime) - this.lyricLine.startTime;
-		this.splittedWords.forEach((word, i) => {
-			const wordEl = word.mainElement;
-			if (wordEl) {
-				const fadeWidth = word.height * this.lyricPlayer.getWordFadeWidth();
-				const [maskImage, totalAspect] = generateFadeGradient(fadeWidth / (word.width + word.padding * 2));
-				const totalAspectStr = `${totalAspect * 100}% 100%`;
-				if (this.lyricPlayer.supportMaskImage) {
-					wordEl.style.maskImage = maskImage;
-					wordEl.style.maskRepeat = "no-repeat";
-					wordEl.style.maskOrigin = "left";
-					wordEl.style.maskSize = totalAspectStr;
-				} else {
-					wordEl.style.webkitMaskImage = maskImage;
-					wordEl.style.webkitMaskRepeat = "no-repeat";
-					wordEl.style.webkitMaskOrigin = "left";
-					wordEl.style.webkitMaskSize = totalAspectStr;
-				}
-				const widthBeforeSelf = this.splittedWords.slice(0, i).reduce((a, b) => a + b.width, 0) + (this.splittedWords[0] ? fadeWidth : 0);
-				const minOffset = -(word.width + word.padding * 2 + fadeWidth);
-				const clampOffset = (x) => Math.max(minOffset, Math.min(0, x));
-				let curPos = -widthBeforeSelf - word.width - word.padding - fadeWidth;
-				let timeOffset = 0;
-				const frames = [];
-				let lastPos = curPos;
-				let lastTime = 0;
-				const pushFrame = () => {
-					const moveOffset = curPos - lastPos;
-					const time = Math.max(0, Math.min(1, timeOffset));
-					const duration = time - lastTime;
-					const d = Math.abs(duration / moveOffset);
-					if (curPos > minOffset && lastPos < minOffset) {
-						const staticTime = Math.abs(lastPos - minOffset) * d;
-						const value = `${clampOffset(lastPos)}px 0`;
-						const frame = {
-							offset: lastTime + staticTime,
-							maskPosition: value
-						};
-						frames.push(frame);
-					}
-					if (curPos > 0 && lastPos < 0) {
-						const staticTime = Math.abs(lastPos) * d;
-						const value = `${clampOffset(curPos)}px 0`;
-						const frame = {
-							offset: lastTime + staticTime,
-							maskPosition: value
-						};
-						frames.push(frame);
-					}
-					const frame = {
-						offset: time,
-						maskPosition: `${clampOffset(curPos)}px 0`
-					};
-					frames.push(frame);
-					lastPos = curPos;
-					lastTime = time;
-				};
-				pushFrame();
-				let lastTimeStamp = 0;
-				this.splittedWords.forEach((otherWord, j) => {
-					{
-						const curTimeStamp = otherWord.startTime - this.lyricLine.startTime;
-						const staticDuration = curTimeStamp - lastTimeStamp;
-						timeOffset += staticDuration / totalFadeDuration;
-						if (staticDuration > 0) pushFrame();
-						lastTimeStamp = curTimeStamp;
-					}
-					{
-						const fadeDuration = otherWord.endTime - otherWord.startTime;
-						const rubySegments = this.getRubySegments(otherWord);
-						const rubyCharCount = rubySegments.reduce((total, ruby) => total + ruby.word.length, 0);
-						if (rubyCharCount > 0) {
-							const widthPerChar = otherWord.width / rubyCharCount;
-							let charIndex = 0;
-							for (const ruby of rubySegments) {
-								const rubyStartTime = Number.isFinite(ruby.startTime) ? ruby.startTime : otherWord.startTime;
-								const rubyEndTime = Number.isFinite(ruby.endTime) ? ruby.endTime : otherWord.endTime;
-								const rubyStart = Math.max(rubyStartTime, otherWord.startTime);
-								const rubyEnd = Math.min(Math.max(rubyEndTime, rubyStart), otherWord.endTime);
-								const rubyStartStamp = rubyStart - this.lyricLine.startTime;
-								const rubyStaticDuration = rubyStartStamp - lastTimeStamp;
-								timeOffset += rubyStaticDuration / totalFadeDuration;
-								if (rubyStaticDuration > 0) pushFrame();
-								lastTimeStamp = rubyStartStamp;
-								const perCharDuration = Math.max(0, rubyEnd - rubyStart) / ruby.word.length;
-								for (let rubyCharIndex = 0; rubyCharIndex < ruby.word.length; rubyCharIndex++) {
-									timeOffset += perCharDuration / totalFadeDuration;
-									curPos += widthPerChar;
-									if (j === 0 && charIndex === 0) curPos += fadeWidth * 1.5;
-									if (j === this.splittedWords.length - 1 && charIndex === rubyCharCount - 1) curPos += fadeWidth * .5;
-									if (perCharDuration > 0) pushFrame();
-									lastTimeStamp += perCharDuration;
-									charIndex++;
-								}
-							}
-							const wordEndStamp = Math.max(otherWord.endTime - this.lyricLine.startTime, lastTimeStamp);
-							const wordTailDuration = wordEndStamp - lastTimeStamp;
-							timeOffset += wordTailDuration / totalFadeDuration;
-							if (wordTailDuration > 0) pushFrame();
-							lastTimeStamp = wordEndStamp;
-						} else {
-							timeOffset += fadeDuration / totalFadeDuration;
-							curPos += otherWord.width;
-							if (j === 0) curPos += fadeWidth * 1.5;
-							if (j === this.splittedWords.length - 1) curPos += fadeWidth * .5;
-							if (fadeDuration > 0) pushFrame();
-							lastTimeStamp += fadeDuration;
-						}
-					}
-				});
-				for (const a of word.maskAnimations) a.cancel();
-				try {
-					const ani = wordEl.animate(frames, {
-						duration: totalFadeDuration || 1,
-						id: `fade-word-${word.word}-${i}`,
-						fill: "both"
-					});
-					ani.pause();
-					word.maskAnimations = [ani];
-				} catch (err) {
-					console.warn("应用渐变动画发生错误", frames, totalFadeDuration, err);
-				}
-			}
-		});
-	}
-	getElement() {
-		return this.element;
-	}
-	setTransform(top = this.top, scale = this.scale, opacity = 1, blur = 0, force = false, delay = 0) {
-		super.setTransform(top, scale, opacity, blur, force, delay);
-		const beforeInSight = this.isInSight;
-		const enableSpring = this.lyricPlayer.getEnableSpring();
-		this.top = top;
-		this.scale = scale;
-		this.delay = delay * 1e3 | 0;
-		const main = this.element.children[0];
-		main.style.opacity = `${opacity}`;
-		if (force || !enableSpring) {
-			if (force) this.element.classList.add(index_module_default.tmpDisableTransition);
-			this.lineTransforms.posY.setPosition(top);
-			this.lineTransforms.scale.setPosition(scale);
-			if (!enableSpring) {
-				const afterInSight = this.isInSight;
-				if (beforeInSight || afterInSight) this.show();
-				else this.hide();
-			} else this.rebuildStyle();
-			if (force) requestAnimationFrame(() => {
-				this.element.classList.remove(index_module_default.tmpDisableTransition);
-			});
-		} else {
-			this.lineTransforms.posY.setTargetPosition(top, delay);
-			this.lineTransforms.scale.setTargetPosition(scale);
-		}
-	}
-	update(delta = 0) {
-		if (!this.lyricPlayer.getEnableSpring()) return;
-		this.lineTransforms.posY.update(delta);
-		this.lineTransforms.scale.update(delta);
-		if (this.isInSight) {
-			this.show();
-			if (this.maskImageDirty) this.updateMaskImage();
-		} else this.hide();
-		if (this.lyricPlayer.getEnableSpring()) {
-			this.element.style.setProperty("--bright-mask-alpha", `${Math.max(0, Math.min(1, this.lineTransforms.scale.getCurrentPosition() / 100 - .97) / .03) * .8 + .2}`);
-			this.element.style.setProperty("--dark-mask-alpha", `${Math.max(0, Math.min(1, this.lineTransforms.scale.getCurrentPosition() / 100 - .97) / .03) * .2 + .2}`);
-		} else {
-			const transform = window.getComputedStyle(this.element).transform;
-			const scale = getScaleFromTransform(transform);
-			this.element.style.setProperty("--bright-mask-alpha", `${Math.max(0, Math.min(1, (scale - .97) / .03)) * .8 + .2}`);
-			this.element.style.setProperty("--dark-mask-alpha", `${Math.max(0, Math.min(1, (scale - .97) / .03)) * .2 + .2}`);
-		}
-	}
-	_getDebugTargetPos() {
-		return `[位移: ${this.top}; 缩放: ${this.scale}; 延时: ${this.delay}]`;
-	}
-	get isInSight() {
-		const t = this.lineTransforms.posY.getCurrentPosition();
-		const h = this.lineSize[1];
-		const b = t + h;
-		return !(t > this.lyricPlayer.size[1] + h || b < -h);
-	}
-	disposeElements() {
-		for (const realWord of this.splittedWords) {
-			for (const a of realWord.elementAnimations) a.cancel();
-			for (const a of realWord.maskAnimations) a.cancel();
-			for (const sub of realWord.subElements) {
-				sub.remove();
-				sub.parentNode?.removeChild(sub);
-			}
-			realWord.elementAnimations = [];
-			realWord.maskAnimations = [];
-			realWord.subElements = [];
-			realWord.mainElement.remove();
-			realWord.mainElement.parentNode?.removeChild(realWord.mainElement);
-		}
-		this.splittedWords = [];
-	}
-	dispose() {
-		this.disposeElements();
-		this.element.remove();
-	}
-};
-//#endregion
-//#region src/lyric-player/dom-slim/index.ts
-/**
-* 歌词播放组件，本框架的核心组件
-*
-* 尽可能贴切 Apple Music for iPad 的歌词效果设计，且做了力所能及的优化措施
-*/
-var DomSlimLyricPlayer = class extends LyricPlayerBase {
-	currentLyricLineObjects = [];
-	debounceCalcLayout = debounce(() => this.calcLayout(true).then(() => this.currentLyricLineObjects.map(async (el, i) => {
-		el.markMaskImageDirty("DomLyricPlayer onResize");
-		await el.waitMaskImageUpdated();
-		if (this.hotLines.has(i)) {
-			el.enable(this.currentTime);
-			el.resume();
-		}
-	})), 1e3);
-	onResize() {
-		const computedStyles = getComputedStyle(this.element);
-		this._baseFontSize = Number.parseFloat(computedStyles.fontSize);
-		const innerWidth = this.element.clientWidth - Number.parseFloat(computedStyles.paddingLeft) - Number.parseFloat(computedStyles.paddingRight);
-		const innerHeight = this.element.clientHeight - Number.parseFloat(computedStyles.paddingTop) - Number.parseFloat(computedStyles.paddingBottom);
-		this.innerSize[0] = innerWidth;
-		this.innerSize[1] = innerHeight;
-		this.rebuildStyle();
-		this.debounceCalcLayout();
-	}
-	supportPlusLighter = CSS.supports("mix-blend-mode", "plus-lighter");
-	supportMaskImage = CSS.supports("mask-image", "none");
-	innerSize = [0, 0];
-	onLineClickedHandler = (e) => {
-		const evt = new LyricLineMouseEvent(this.lyricLinesIndexes.get(e.line) ?? -1, e.line, e);
-		if (!this.dispatchEvent(evt)) {
-			e.preventDefault();
-			e.stopPropagation();
-			e.stopImmediatePropagation();
-		}
-	};
-	/**
-	* 是否为非逐词歌词
-	* @internal
-	*/
-	_getIsNonDynamic() {
-		return this.isNonDynamic;
-	}
-	_baseFontSize = Number.parseFloat(getComputedStyle(this.element).fontSize);
-	get baseFontSize() {
-		return this._baseFontSize;
-	}
-	constructor() {
-		super();
-		this.onResize();
-		this.element.classList.add("amll-lyric-player", "dom-slim");
-		if (this.disableSpring) this.element.classList.add(index_module_default.disableSpring);
-	}
-	rebuildStyle() {
-		const width = this.innerSize[0];
-		const height = this.innerSize[1];
-		this.element.style.setProperty("--amll-lp-width", `${width.toFixed(4)}px`);
-		this.element.style.setProperty("--amll-lp-height", `${height.toFixed(4)}px`);
-	}
-	setWordFadeWidth(value = .5) {
-		super.setWordFadeWidth(value);
-		for (const el of this.currentLyricLineObjects) el.markMaskImageDirty("DomLyricPlayer setWordFadeWidth");
-	}
-	/**
-	* 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误
-	* @param lines 歌词数组
-	* @param initialTime 初始时间，默认为 0
-	*/
-	setLyricLines(lines, initialTime = 0) {
-		super.setLyricLines(lines, initialTime);
-		if (this.hasDuetLine) this.element.classList.add(index_module_default.hasDuetLine);
-		else this.element.classList.remove(index_module_default.hasDuetLine);
-		for (const line of this.currentLyricLineObjects) {
-			line.removeMouseEventListener("click", this.onLineClickedHandler);
-			line.removeMouseEventListener("contextmenu", this.onLineClickedHandler);
-			line.dispose();
-		}
-		this.currentLyricLineObjects = this.processedLines.map((line, i) => {
-			const lineEl = new LyricLineEl(this, line);
-			lineEl.addMouseEventListener("click", this.onLineClickedHandler);
-			lineEl.addMouseEventListener("contextmenu", this.onLineClickedHandler);
-			this.element.appendChild(lineEl.getElement());
-			this.lyricLinesIndexes.set(lineEl, i);
-			lineEl.markMaskImageDirty("DomLyricPlayer setLyricLines");
-			return lineEl;
-		});
-		this.setLinePosXSpringParams({});
-		this.setLinePosYSpringParams({});
-		this.setLineScaleSpringParams({});
-		this.calcLayout(true).then(() => {
-			this.initialLayoutFinished = true;
-		});
-	}
-	pause() {
-		super.pause();
-		this.interludeDots.pause();
-		for (const line of this.currentLyricLineObjects) line.pause();
-	}
-	resume() {
-		super.resume();
-		this.interludeDots.resume();
-		for (const line of this.currentLyricLineObjects) line.resume();
-	}
-	update(delta = 0) {
-		if (!this.initialLayoutFinished) return;
-		super.update(delta);
-		if (!this.isPageVisible) return;
-		const deltaS = delta / 1e3;
-		for (const line of this.currentLyricLineObjects) line.update(deltaS);
-	}
-	async calcLayout(sync) {
-		await super.calcLayout(sync);
-		const curLine = this.currentLyricLineObjects[this.targetAlignIndex];
-		const curLineEl = curLine.getElement();
-		const curLineVisibility = curLineEl.checkVisibility({ contentVisibilityAuto: true });
-		const playerTop = this.element.getBoundingClientRect().top;
-		if (!curLineVisibility) curLineEl.scrollIntoView({
-			block: "center",
-			behavior: "instant"
-		});
-		const curLineHeight = curLineEl.clientHeight;
-		let scrollToPos = curLineEl.getBoundingClientRect().top - playerTop - this.size[1] * this.alignPosition;
-		if (curLine) switch (this.alignAnchor) {
-			case "bottom":
-				scrollToPos += curLineHeight;
-				break;
-			case "center":
-				scrollToPos += curLineHeight / 2;
-				break;
-			case "top": break;
-		}
-		this.element.scrollBy({
-			top: scrollToPos,
-			behavior: "smooth"
-		});
-	}
-	dispose() {
-		super.dispose();
-		this.element.remove();
-		for (const el of this.currentLyricLineObjects) el.dispose();
-		this.bottomLine.dispose();
-		this.interludeDots.dispose();
-	}
-};
-//#endregion
-//#region src/lyric-player/index.ts
-/**
-* 歌词中不雅用语的掩码模式
-*/
-var MaskObsceneWordsMode = /* @__PURE__ */ function(MaskObsceneWordsMode) {
-	/** 禁用任何不雅用语掩码 */
-	MaskObsceneWordsMode["Disabled"] = "";
-	/** 完全掩码所有不雅用语 */
-	MaskObsceneWordsMode["FullMask"] = "full-mask";
-	/** 保留首尾字符，屏蔽中间字符 */
-	MaskObsceneWordsMode["PartialMask"] = "partial-mask";
-	return MaskObsceneWordsMode;
-}(MaskObsceneWordsMode || {});
-/**
-* 歌词行的渲染模式
-* @internal
-*/
-var LyricLineRenderMode = /* @__PURE__ */ function(LyricLineRenderMode) {
-	LyricLineRenderMode[LyricLineRenderMode["SOLID"] = 0] = "SOLID";
-	LyricLineRenderMode[LyricLineRenderMode["GRADIENT"] = 1] = "GRADIENT";
-	return LyricLineRenderMode;
-}(LyricLineRenderMode || {});
-//#endregion
 exports.AbstractBaseRenderer = AbstractBaseRenderer;
 exports.BackgroundRender = BackgroundRender;
 exports.BaseRenderer = BaseRenderer;
 exports.DomLyricPlayer = DomLyricPlayer;
-exports.DomSlimLyricPlayer = DomSlimLyricPlayer;
+exports.LayoutAlignAnchor = LayoutAlignAnchor;
 exports.LyricLineMouseEvent = LyricLineMouseEvent;
 exports.LyricLineRenderMode = LyricLineRenderMode;
 exports.LyricPlayer = DomLyricPlayer;