@applemusic-like-lyrics/react-full 0.4.2 → 0.5.0

package/dist/amll-react-framework.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));
@@ -24,16 +24,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_compiler_runtime = require("react/compiler-runtime");
 let react = require("react");
+let react$1 = __toESM(react, 1);
 react = __toESM(react);
 let classnames = require("classnames");
-classnames = __toESM(classnames);
+classnames = __toESM(classnames, 1);
 let framer_motion = require("framer-motion");
 let corner_smoothing = require("corner-smoothing");
+let _applemusic_like_lyrics_core = require("@applemusic-like-lyrics/core");
 let _applemusic_like_lyrics_react = require("@applemusic-like-lyrics/react");
 let _ungap_structured_clone = require("@ungap/structured-clone");
-_ungap_structured_clone = __toESM(_ungap_structured_clone);
+_ungap_structured_clone = __toESM(_ungap_structured_clone, 1);
 let jotai = require("jotai");
-let _applemusic_like_lyrics_core = require("@applemusic-like-lyrics/core");
 let jotai_utils = require("jotai/utils");
 //#region src/components/AudioFFTVisualizer/index.tsx
 globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
@@ -57,8 +58,8 @@ const AudioFFTVisualizer = (t0) => {
 		fftData = $[1];
 		props = $[2];
 	}
-	const canvasRef = (0, react.useRef)(null);
-	const fftDataRef = (0, react.useRef)(void 0);
+	const canvasRef = (0, react$1.useRef)(null);
+	const fftDataRef = (0, react$1.useRef)(void 0);
 	if (fftDataRef.current === void 0) fftDataRef.current = fftData;
 	let t1;
 	let t2;
@@ -74,7 +75,7 @@ const AudioFFTVisualizer = (t0) => {
 		t1 = $[4];
 		t2 = $[5];
 	}
-	(0, react.useEffect)(t1, t2);
+	(0, react$1.useEffect)(t1, t2);
 	let t3;
 	let t4;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
@@ -168,7 +169,7 @@ const AudioFFTVisualizer = (t0) => {
 		t3 = $[6];
 		t4 = $[7];
 	}
-	(0, react.useLayoutEffect)(t3, t4);
+	(0, react$1.useLayoutEffect)(t3, t4);
 	let t5;
 	if ($[8] !== props) {
 		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
@@ -294,7 +295,7 @@ const DOLBY_VARIENTS = {
 	hover: { scale: .95 },
 	active: { scale: .9 }
 };
-const AudioQualityTag = (0, react.memo)((0, react.forwardRef)((t0, ref) => {
+const AudioQualityTag = (0, react$1.memo)((0, react$1.forwardRef)((t0, ref) => {
 	const $ = (0, react_compiler_runtime.c)(21);
 	let className;
 	let isDolbyAtmos;
@@ -394,13 +395,13 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 		return inst;
 	}
 };
-const INITIAL_INSET = 12 / 2;
+const INITIAL_INSET = 6;
 const MAX_BOUNCE_DISTANCE = 12;
 const BouncingSlider = ({ className, style, value, min, max, isPlaying = false, onChange, onAfterChange, onBeforeChange, onSeeking, beforeIcon, afterIcon, changeOnDrag = false }) => {
-	const containerRef = (0, react.useRef)(null);
-	const innerRef = (0, react.useRef)(null);
-	const rectRef = (0, react.useRef)(null);
-	const isHoveringRef = (0, react.useRef)(false);
+	const containerRef = (0, react$1.useRef)(null);
+	const innerRef = (0, react$1.useRef)(null);
+	const rectRef = (0, react$1.useRef)(null);
+	const isHoveringRef = (0, react$1.useRef)(false);
 	const progressMv = (0, framer_motion.useMotionValue)(0);
 	const scaleX = (0, framer_motion.useTransform)(progressMv, [0, 1], [0, 1]);
 	const insetMv = (0, framer_motion.useMotionValue)(INITIAL_INSET);
@@ -409,9 +410,9 @@ const BouncingSlider = ({ className, style, value, min, max, isPlaying = false,
 		damping: 12,
 		stiffness: 300
 	});
-	const isDraggingRef = (0, react.useRef)(false);
-	const localTimeRef = (0, react.useRef)(value);
-	(0, react.useEffect)(() => {
+	const isDraggingRef = (0, react$1.useRef)(false);
+	const localTimeRef = (0, react$1.useRef)(value);
+	(0, react$1.useEffect)(() => {
 		if (isDraggingRef.current) return;
 		localTimeRef.current = value;
 		const newProgress = Math.max(0, Math.min(1, (value - min) / (max - min)));
@@ -553,8 +554,8 @@ const ControlThumb = (t0) => {
 		onClick = $[2];
 		rest = $[3];
 	}
-	const containerRef = (0, react.useRef)(null);
-	const hoveringRef = (0, react.useRef)(false);
+	const containerRef = (0, react$1.useRef)(null);
+	const hoveringRef = (0, react$1.useRef)(false);
 	let t1;
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = {
@@ -563,7 +564,7 @@ const ControlThumb = (t0) => {
 		};
 		$[4] = t1;
 	} else t1 = $[4];
-	const [thumbOffset, setThumbOffset] = (0, react.useState)(t1);
+	const [thumbOffset, setThumbOffset] = (0, react$1.useState)(t1);
 	let t2;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = (e) => {
@@ -760,8 +761,8 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 /**
 * 一个专辑图组件
 */
-const Cover = (0, react.forwardRef)((t0, ref) => {
-	const $ = (0, react_compiler_runtime.c)(33);
+const Cover = (0, react$1.forwardRef)((t0, ref) => {
+	const $ = (0, react_compiler_runtime.c)(36);
 	let className;
 	let coverIsVideo;
 	let coverUrl;
@@ -788,7 +789,7 @@ const Cover = (0, react.forwardRef)((t0, ref) => {
 		pauseShrinkAspect = $[6];
 		rest = $[7];
 	}
-	const frameRef = (0, react.useRef)(null);
+	const frameRef = (0, react$1.useRef)(null);
 	const t1 = musicPaused && index_module_default$7.musicPaused;
 	let t2;
 	if ($[8] !== className || $[9] !== t1) {
@@ -798,14 +799,16 @@ const Cover = (0, react.forwardRef)((t0, ref) => {
 		$[10] = t2;
 	} else t2 = $[10];
 	const clsNames = t2;
-	const videoRef = (0, react.useRef)(null);
+	const videoRef = (0, react$1.useRef)(null);
 	let t3;
 	let t4;
 	if ($[11] !== coverVideoPaused) {
 		t3 = () => {
 			const videoEl = videoRef.current;
-			if (videoEl) if (coverVideoPaused) videoEl.pause();
-			else videoEl.play();
+			if (videoEl) {
+				if (coverVideoPaused) videoEl.pause();
+				else videoEl.play();
+			}
 		};
 		t4 = [coverVideoPaused];
 		$[11] = coverVideoPaused;
@@ -815,8 +818,8 @@ const Cover = (0, react.forwardRef)((t0, ref) => {
 		t3 = $[12];
 		t4 = $[13];
 	}
-	(0, react.useEffect)(t3, t4);
-	const [cornerRadius, setCornerRadius] = (0, react.useState)(20);
+	(0, react$1.useEffect)(t3, t4);
+	const [cornerRadius, setCornerRadius] = (0, react$1.useState)(20);
 	let t5;
 	let t6;
 	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
@@ -842,35 +845,42 @@ const Cover = (0, react.forwardRef)((t0, ref) => {
 		t5 = $[14];
 		t6 = $[15];
 	}
-	(0, react.useLayoutEffect)(t5, t6);
-	const t7 = pauseShrinkAspect ?? .75;
-	let t8;
-	if ($[16] !== t7) {
-		t8 = { "--scale-level": t7 };
-		$[16] = t7;
-		$[17] = t8;
-	} else t8 = $[17];
-	const t9 = t8;
-	let t10;
-	if ($[18] !== ref) {
-		t10 = (node) => {
+	(0, react$1.useLayoutEffect)(t5, t6);
+	let t7;
+	if ($[16] !== coverUrl) {
+		t7 = coverUrl?.startsWith("http://") || coverUrl?.startsWith("https://");
+		$[16] = coverUrl;
+		$[17] = t7;
+	} else t7 = $[17];
+	const isRemoteUrl = t7;
+	const t8 = pauseShrinkAspect ?? .75;
+	let t9;
+	if ($[18] !== t8) {
+		t9 = { "--scale-level": t8 };
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	const t10 = t9;
+	let t11;
+	if ($[20] !== ref) {
+		t11 = (node) => {
 			frameRef.current = node;
 			if (typeof ref === "function") ref(node);
 			else if (ref) ref.current = node;
 		};
-		$[18] = ref;
-		$[19] = t10;
-	} else t10 = $[19];
-	let t11;
-	if ($[20] !== coverIsVideo || $[21] !== coverUrl || $[22] !== pauseShrinkAspect) {
-		t11 = coverIsVideo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
+		$[20] = ref;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== coverIsVideo || $[23] !== coverUrl || $[24] !== isRemoteUrl || $[25] !== pauseShrinkAspect) {
+		t12 = coverIsVideo ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
 			className: index_module_default$7.coverInner,
 			src: coverUrl,
 			autoPlay: true,
 			loop: true,
 			muted: true,
 			playsInline: true,
-			crossOrigin: "anonymous",
+			crossOrigin: isRemoteUrl ? "anonymous" : void 0,
 			ref: videoRef
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: index_module_default$7.coverInner,
@@ -879,40 +889,41 @@ const Cover = (0, react.forwardRef)((t0, ref) => {
 				"--scale-level": pauseShrinkAspect ?? .75
 			}
 		});
-		$[20] = coverIsVideo;
-		$[21] = coverUrl;
-		$[22] = pauseShrinkAspect;
-		$[23] = t11;
-	} else t11 = $[23];
-	let t12;
-	if ($[24] !== cornerRadius || $[25] !== t11) {
-		t12 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(corner_smoothing.Squircle, {
+		$[22] = coverIsVideo;
+		$[23] = coverUrl;
+		$[24] = isRemoteUrl;
+		$[25] = pauseShrinkAspect;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== cornerRadius || $[28] !== t12) {
+		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(corner_smoothing.Squircle, {
 			cornerRadius,
 			cornerSmoothing: .7,
 			className: index_module_default$7.coverInner,
-			children: t11
+			children: t12
 		});
-		$[24] = cornerRadius;
-		$[25] = t11;
-		$[26] = t12;
-	} else t12 = $[26];
-	let t13;
-	if ($[27] !== clsNames || $[28] !== rest || $[29] !== t10 || $[30] !== t12 || $[31] !== t9) {
-		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		$[27] = cornerRadius;
+		$[28] = t12;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== clsNames || $[31] !== rest || $[32] !== t10 || $[33] !== t11 || $[34] !== t13) {
+		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: clsNames,
-			style: t9,
-			ref: t10,
+			style: t10,
+			ref: t11,
 			...rest,
-			children: t12
+			children: t13
 		});
-		$[27] = clsNames;
-		$[28] = rest;
-		$[29] = t10;
-		$[30] = t12;
-		$[31] = t9;
-		$[32] = t13;
-	} else t13 = $[32];
-	return t13;
+		$[30] = clsNames;
+		$[31] = rest;
+		$[32] = t10;
+		$[33] = t11;
+		$[34] = t13;
+		$[35] = t14;
+	} else t14 = $[35];
+	return t14;
 });
 //#endregion
 //#region src/components/MediaButton/index.module.css
@@ -931,7 +942,7 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 		return inst;
 	}
 };
-const MediaButton = (0, react.memo)((t0) => {
+const MediaButton = (0, react$1.memo)((t0) => {
 	const $ = (0, react_compiler_runtime.c)(21);
 	let children;
 	let className;
@@ -957,7 +968,7 @@ const MediaButton = (0, react.memo)((t0) => {
 		t1 = $[6];
 	}
 	const type = t1 === void 0 ? "button" : t1;
-	const [isAnimating, setIsAnimating] = (0, react.useState)(false);
+	const [isAnimating, setIsAnimating] = (0, react$1.useState)(false);
 	let t2;
 	if ($[7] !== onClick) {
 		t2 = (e) => {
@@ -1036,7 +1047,7 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 		return inst;
 	}
 };
-const MenuButton = (0, react.memo)((t0) => {
+const MenuButton = (0, react$1.memo)((t0) => {
 	const $ = (0, react_compiler_runtime.c)(9);
 	let className;
 	let rest;
@@ -1092,7 +1103,7 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 		return inst;
 	}
 };
-const TextMarquee = (0, react.memo)((t0) => {
+const TextMarquee = (0, react$1.memo)((t0) => {
 	const $ = (0, react_compiler_runtime.c)(15);
 	let children;
 	let className;
@@ -1108,14 +1119,14 @@ const TextMarquee = (0, react.memo)((t0) => {
 		className = $[2];
 		rest = $[3];
 	}
-	const outerDiv = (0, react.useRef)(null);
-	const innerDiv = (0, react.useRef)(null);
+	const outerDiv = (0, react$1.useRef)(null);
+	const innerDiv = (0, react$1.useRef)(null);
 	let t1;
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ new Set();
 		$[4] = t1;
 	} else t1 = $[4];
-	const currentAnimationsRef = (0, react.useRef)(t1);
+	const currentAnimationsRef = (0, react$1.useRef)(t1);
 	let t2;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = () => {
@@ -1201,7 +1212,7 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 		return inst;
 	}
 };
-const MusicInfo = (0, react.memo)((t0) => {
+const MusicInfo = (0, react$1.memo)((t0) => {
 	const $ = (0, react_compiler_runtime.c)(26);
 	let album;
 	let artists;
@@ -1499,14 +1510,14 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 	}
 };
 const VerticalLayout = ({ thumbSlot, coverSlot, smallControlsSlot, bigControlsSlot, lyricSlot, hideLyric, asChild, className, immerseCover, ...rest }) => {
-	const rootRef = (0, react.useRef)(null);
-	const phonyBigCoverRef = (0, react.useRef)(null);
-	const phonySmallCoverRef = (0, react.useRef)(null);
-	const coverFrameRef = (0, react.useRef)(null);
-	const hideLyricRef = (0, react.useRef)(hideLyric ?? false);
-	const immerseCoverRef = (0, react.useRef)(immerseCover ?? false);
-	const [currentCoverStyle, setCurrentCoverStyle] = (0, react.useState)(void 0);
-	const calcCoverLayout = (0, react.useCallback)((hideLyric_0 = hideLyricRef.current) => {
+	const rootRef = (0, react$1.useRef)(null);
+	const phonyBigCoverRef = (0, react$1.useRef)(null);
+	const phonySmallCoverRef = (0, react$1.useRef)(null);
+	const coverFrameRef = (0, react$1.useRef)(null);
+	const hideLyricRef = (0, react$1.useRef)(hideLyric ?? false);
+	const immerseCoverRef = (0, react$1.useRef)(immerseCover ?? false);
+	const [currentCoverStyle, setCurrentCoverStyle] = (0, react$1.useState)(void 0);
+	const calcCoverLayout = (0, react$1.useCallback)((hideLyric_0 = hideLyricRef.current) => {
 		if (!rootRef.current) return;
 		let rootEl = rootRef.current;
 		const targetCover = hideLyric_0 ? phonyBigCoverRef.current : phonySmallCoverRef.current;
@@ -1537,7 +1548,7 @@ const VerticalLayout = ({ thumbSlot, coverSlot, smallControlsSlot, bigControlsSl
 			top: targetCoverB.y - rootB.y + (targetCoverB.height - targetCoverSize_0) / 2
 		};
 	}, []);
-	(0, react.useLayoutEffect)(() => {
+	(0, react$1.useLayoutEffect)(() => {
 		hideLyricRef.current = hideLyric ?? false;
 		immerseCoverRef.current = immerseCover ?? false;
 		setCurrentCoverStyle(calcCoverLayout(hideLyricRef.current));
@@ -1546,7 +1557,7 @@ const VerticalLayout = ({ thumbSlot, coverSlot, smallControlsSlot, bigControlsSl
 		immerseCover,
 		calcCoverLayout
 	]);
-	(0, react.useLayoutEffect)(() => {
+	(0, react$1.useLayoutEffect)(() => {
 		const phonyBigCoverEl = phonyBigCoverRef.current;
 		const phonySmallCoverEl = phonySmallCoverRef.current;
 		if (!phonyBigCoverEl || !phonySmallCoverEl) return;
@@ -1555,7 +1566,8 @@ const VerticalLayout = ({ thumbSlot, coverSlot, smallControlsSlot, bigControlsSl
 		});
 		obz.observe(phonyBigCoverEl);
 		obz.observe(phonySmallCoverEl);
-		setCurrentCoverStyle(calcCoverLayout(hideLyricRef.current));
+		const init = calcCoverLayout(hideLyricRef.current);
+		setCurrentCoverStyle(init);
 		return () => {
 			obz.disconnect();
 		};
@@ -1670,8 +1682,8 @@ const AutoLyricLayout = (t0) => {
 		thumbSlot = $[12];
 		verticalImmerseCover = $[13];
 	}
-	const [isVertical, setIsVertical] = (0, react.useState)(false);
-	const rootRef = (0, react.useRef)(null);
+	const [isVertical, setIsVertical] = (0, react$1.useState)(false);
+	const rootRef = (0, react$1.useRef)(null);
 	let t1;
 	if ($[14] !== onElementMounted) {
 		t1 = (node) => {
@@ -1703,7 +1715,7 @@ const AutoLyricLayout = (t0) => {
 		t2 = $[16];
 		t3 = $[17];
 	}
-	(0, react.useLayoutEffect)(t2, t3);
+	(0, react$1.useLayoutEffect)(t2, t3);
 	let t4;
 	let t5;
 	if ($[18] !== isVertical || $[19] !== onLayoutChange) {
@@ -1719,7 +1731,7 @@ const AutoLyricLayout = (t0) => {
 		t4 = $[20];
 		t5 = $[21];
 	}
-	(0, react.useLayoutEffect)(t4, t5);
+	(0, react$1.useLayoutEffect)(t4, t5);
 	let t6;
 	if ($[22] !== backgroundSlot) {
 		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2011,7 +2023,7 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 		return inst;
 	}
 };
-const ToggleIconButton = (0, react.memo)((t0) => {
+const ToggleIconButton = (0, react$1.memo)((t0) => {
 	const $ = (0, react_compiler_runtime.c)(12);
 	let checked;
 	let checkedIcon;
@@ -2063,7 +2075,7 @@ const PREBUILT_ICONS_MAP = {
 	["star"]: [ForwardRef$12, ForwardRef$11],
 	["airplay"]: [ForwardRef$21, ForwardRef$21]
 };
-const PrebuiltToggleIconButton = (0, react.memo)((t0) => {
+const PrebuiltToggleIconButton = (0, react$1.memo)((t0) => {
 	const $ = (0, react_compiler_runtime.c)(15);
 	let checked;
 	let onClick;
@@ -2181,9 +2193,9 @@ globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 };
 const VolumeControl = (props) => {
 	const $ = (0, react_compiler_runtime.c)(9);
-	const lastValueRef = (0, react.useRef)(props.value);
-	const minSpeakerRef = (0, react.useRef)(null);
-	const maxSpeakerRef = (0, react.useRef)(null);
+	const lastValueRef = (0, react$1.useRef)(props.value);
+	const minSpeakerRef = (0, react$1.useRef)(null);
+	const maxSpeakerRef = (0, react$1.useRef)(null);
 	let t0;
 	let t1;
 	if ($[0] !== props.max || $[1] !== props.min || $[2] !== props.value) {
@@ -2217,7 +2229,7 @@ const VolumeControl = (props) => {
 		t0 = $[3];
 		t1 = $[4];
 	}
-	(0, react.useEffect)(t0, t1);
+	(0, react$1.useEffect)(t0, t1);
 	let t2;
 	let t3;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
@@ -2706,22 +2718,59 @@ const showVolumeControlAtom = globalThis.jotaiAtomCache.get("/home/runner/work/a
 showVolumeControlAtom.debugLabel = "showVolumeControlAtom";
 const showBottomControlAtom = globalThis.jotaiAtomCache.get("/home/runner/work/applemusic-like-lyrics/applemusic-like-lyrics/packages/react-full/src/states/configAtoms.ts/showBottomControlAtom", (0, jotai_utils.atomWithStorage)("amll-react-full.showBottomControl", true));
 showBottomControlAtom.debugLabel = "showBottomControlAtom";
-const getInitialBackgroundRenderer = () => {
-	switch (localStorage.getItem("amll-react-full.lyricBackgroundRenderer")) {
-		case "pixi": return { renderer: _applemusic_like_lyrics_core.PixiRenderer };
-		case "css-bg": return { renderer: "css-bg" };
-		default: return { renderer: _applemusic_like_lyrics_core.MeshGradientRenderer };
+const CSS_BACKGROUND_RENDERER_ID = "css-bg";
+const DEFAULT_BACKGROUND_RENDERER_ID = "mesh";
+/**
+* 所有可选的背景渲染器。
+*
+* `"css-bg"` 不在表内，因为它不是渲染器，而是固定的纯色 CSS 背景
+*/
+const BACKGROUND_RENDERERS = {
+	mesh: {
+		renderer: _applemusic_like_lyrics_core.MeshGradientRenderer,
+		isSupported: () => _applemusic_like_lyrics_core.MeshGradientRenderer.isSupported()
+	},
+	pixi: {
+		renderer: _applemusic_like_lyrics_core.PixiRenderer,
+		isSupported: () => _applemusic_like_lyrics_core.PixiRenderer.isSupported()
+	},
+	isolation: {
+		renderer: _applemusic_like_lyrics_core.IsolationRenderer,
+		isSupported: () => _applemusic_like_lyrics_core.IsolationRenderer.isSupported()
 	}
 };
+/** 背景渲染器配置在 localStorage 中的键名。 */
+const LYRIC_BACKGROUND_RENDERER_STORAGE_KEY = "amll-react-full.lyricBackgroundRenderer";
+/**
+* 把字符串标识解析成渲染器
+*
+* 如果传入的渲染器标识在当前环境不支持，则会依次回退到 Mesh 渲染器和 CSS 背景
+*/
+const resolveBackgroundRenderer = (id) => {
+	if (id === "css-bg") return CSS_BACKGROUND_RENDERER_ID;
+	const entry = BACKGROUND_RENDERERS[id];
+	if (entry?.isSupported()) return entry.renderer;
+	const fallback = BACKGROUND_RENDERERS[DEFAULT_BACKGROUND_RENDERER_ID];
+	if (fallback?.isSupported()) return fallback.renderer;
+	return CSS_BACKGROUND_RENDERER_ID;
+};
+const getInitialBackgroundRenderer = () => ({ renderer: resolveBackgroundRenderer(localStorage.getItem("amll-react-full.lyricBackgroundRenderer") ?? "mesh") });
 /**
 * 配置所使用的歌词背景渲染器
 */
 const lyricBackgroundRendererAtom = globalThis.jotaiAtomCache.get("/home/runner/work/applemusic-like-lyrics/applemusic-like-lyrics/packages/react-full/src/states/configAtoms.ts/lyricBackgroundRendererAtom", (0, jotai.atom)(getInitialBackgroundRenderer()));
 /**
+* Isolation 背景渲染器的专属选项
+*
+* 仅在背景渲染器为 Isolation 时生效
+*/
+lyricBackgroundRendererAtom.debugLabel = "lyricBackgroundRendererAtom";
+const isolationRendererOptionsAtom = globalThis.jotaiAtomCache.get("/home/runner/work/applemusic-like-lyrics/applemusic-like-lyrics/packages/react-full/src/states/configAtoms.ts/isolationRendererOptionsAtom", (0, jotai_utils.atomWithStorage)("amll-react-full.isolationRendererOptions", { ..._applemusic_like_lyrics_core.IsolationRenderer.defaultOptions }));
+/**
 * 当背景渲染器设置为纯色或CSS背景时，使用此值
 * @default "#111111"
 */
-lyricBackgroundRendererAtom.debugLabel = "lyricBackgroundRendererAtom";
+isolationRendererOptionsAtom.debugLabel = "isolationRendererOptionsAtom";
 const cssBackgroundPropertyAtom = globalThis.jotaiAtomCache.get("/home/runner/work/applemusic-like-lyrics/applemusic-like-lyrics/packages/react-full/src/states/configAtoms.ts/cssBackgroundPropertyAtom", (0, jotai_utils.atomWithStorage)("amll-player.cssBackgroundProperty", "#111111"));
 /**
 * 调节背景的最大渲染帧率，较低的值可以提升性能
@@ -2957,6 +3006,10 @@ var index_module_default = {
 };
 //#endregion
 //#region src/components/PrebuiltLyricPlayer/index.tsx
+/**
+* @fileoverview
+* 已经部署好所有组件的歌词播放器组件，在正确设置所有的 Jotai 状态后可以开箱即用
+*/
 globalThis.jotaiAtomCache = globalThis.jotaiAtomCache || {
 	cache: /* @__PURE__ */ new Map(),
 	get(name, inst) {
@@ -3203,7 +3256,7 @@ const TotalDurationLabel = () => {
 };
 const manualSeekTriggerAtom = globalThis.jotaiAtomCache.get("/home/runner/work/applemusic-like-lyrics/applemusic-like-lyrics/packages/react-full/src/components/PrebuiltLyricPlayer/index.tsx/manualSeekTriggerAtom", (0, jotai.atom)(null));
 manualSeekTriggerAtom.debugLabel = "manualSeekTriggerAtom";
-const PrebuiltProgressBar = react.default.memo(() => {
+const PrebuiltProgressBar = react$1.default.memo(() => {
 	const $ = (0, react_compiler_runtime.c)(38);
 	const musicDuration = (0, jotai.useAtomValue)(musicDurationAtom);
 	const musicPosition = (0, jotai.useAtomValue)(musicPlayingPositionAtom);
@@ -3370,7 +3423,7 @@ function getLyricFontSizeFromPreset(preset) {
 const PrebuiltCoreLyricPlayer = (t0) => {
 	const $ = (0, react_compiler_runtime.c)(36);
 	const { alignPosition, alignAnchor, bottomLine, optimizeOptions } = t0;
-	const amllPlayerRef = (0, react.useRef)(null);
+	const amllPlayerRef = (0, react$1.useRef)(null);
 	const musicIsPlaying = (0, jotai.useAtomValue)(musicPlayingAtom);
 	const lyricLines = (0, jotai.useAtomValue)(musicLyricLinesAtom);
 	const isLyricPageOpened = (0, jotai.useAtomValue)(isLyricPageOpenedAtom);
@@ -3421,7 +3474,7 @@ const PrebuiltCoreLyricPlayer = (t0) => {
 		t1 = $[6];
 		t2 = $[7];
 	}
-	(0, react.useEffect)(t1, t2);
+	(0, react$1.useEffect)(t1, t2);
 	const t3 = lyricFontFamily || void 0;
 	const t4 = lyricFontWeight || void 0;
 	const t5 = lyricLetterSpacing || void 0;
@@ -3595,7 +3648,7 @@ const PrebuiltMusicControls = (t0) => {
 * 已经部署好所有组件的歌词播放器组件，在正确设置所有的 Jotai 状态后可以开箱即用
 */
 const PrebuiltLyricPlayer = (t0) => {
-	const $ = (0, react_compiler_runtime.c)(67);
+	const $ = (0, react_compiler_runtime.c)(74);
 	let bottomLineSlot;
 	let className;
 	let optimizeOptions;
@@ -3624,18 +3677,50 @@ const PrebuiltLyricPlayer = (t0) => {
 	const lyricBackgroundStaticMode = (0, jotai.useAtomValue)(lyricBackgroundStaticModeAtom);
 	const lyricBackgroundRenderScale = (0, jotai.useAtomValue)(lyricBackgroundRenderScaleAtom);
 	const onClickControlThumb = (0, jotai.useAtomValue)(onClickControlThumbAtom).onEmit;
-	const [isVertical, setIsVertical] = (0, react.useState)(false);
-	const [alignPosition, setAlignPosition] = (0, react.useState)(.25);
-	const [alignAnchor, setAlignAnchor] = (0, react.useState)("top");
-	const coverElRef = (0, react.useRef)(null);
-	const [layoutEl, setLayoutEl] = (0, react.useState)(null);
+	const [isVertical, setIsVertical] = (0, react$1.useState)(false);
+	const [alignPosition, setAlignPosition] = (0, react$1.useState)(.25);
+	const [alignAnchor, setAlignAnchor] = (0, react$1.useState)("top");
+	const coverElRef = (0, react$1.useRef)(null);
+	const [layoutEl, setLayoutEl] = (0, react$1.useState)(null);
 	const backgroundRenderer = (0, jotai.useAtomValue)(lyricBackgroundRendererAtom);
-	const showBottomControl = (0, jotai.useAtomValue)(showBottomControlAtom);
-	const cssBackgroundProperty = (0, jotai.useAtomValue)(cssBackgroundPropertyAtom);
 	let t1;
+	bb0: {
+		const configured = backgroundRenderer.renderer;
+		if (typeof configured === "string") {
+			let t2;
+			if ($[5] !== configured) {
+				t2 = resolveBackgroundRenderer(configured);
+				$[5] = configured;
+				$[6] = t2;
+			} else t2 = $[6];
+			t1 = t2;
+			break bb0;
+		}
+		let t2;
+		if ($[7] !== configured) {
+			t2 = configured ?? resolveBackgroundRenderer("mesh");
+			$[7] = configured;
+			$[8] = t2;
+		} else t2 = $[8];
+		t1 = t2;
+	}
+	const resolvedBackgroundRenderer = t1;
+	const isolationRendererOptions = (0, jotai.useAtomValue)(isolationRendererOptionsAtom);
 	let t2;
-	if ($[5] !== isVertical || $[6] !== layoutEl) {
-		t1 = () => {
+	if ($[9] !== isolationRendererOptions) {
+		t2 = (renderer) => {
+			if (renderer instanceof _applemusic_like_lyrics_core.IsolationRenderer) renderer.setOptions(isolationRendererOptions);
+		};
+		$[9] = isolationRendererOptions;
+		$[10] = t2;
+	} else t2 = $[10];
+	const configureBackgroundRenderer = t2;
+	const showBottomControl = (0, jotai.useAtomValue)(showBottomControlAtom);
+	const cssBackgroundProperty = (0, jotai.useAtomValue)(cssBackgroundPropertyAtom);
+	let t3;
+	let t4;
+	if ($[11] !== isVertical || $[12] !== layoutEl) {
+		t3 = () => {
 			if (!isVertical && coverElRef.current && layoutEl) {
 				const obz = new ResizeObserver(() => {
 					if (!(coverElRef.current && layoutEl)) return;
@@ -3653,59 +3738,59 @@ const PrebuiltLyricPlayer = (t0) => {
 				setAlignAnchor("top");
 			}
 		};
-		t2 = [isVertical, layoutEl];
-		$[5] = isVertical;
-		$[6] = layoutEl;
-		$[7] = t1;
-		$[8] = t2;
+		t4 = [isVertical, layoutEl];
+		$[11] = isVertical;
+		$[12] = layoutEl;
+		$[13] = t3;
+		$[14] = t4;
 	} else {
-		t1 = $[7];
-		t2 = $[8];
+		t3 = $[13];
+		t4 = $[14];
 	}
-	(0, react.useLayoutEffect)(t1, t2);
+	(0, react$1.useLayoutEffect)(t3, t4);
 	const verticalImmerseCover = hideLyricView && (verticalCoverLayout === "auto" ? musicCoverIsVideo && isVertical : verticalCoverLayout === "force-immersive");
-	let t3;
-	if ($[9] !== className) {
-		t3 = (0, classnames.default)(index_module_default.autoLyricLayout, className);
-		$[9] = className;
-		$[10] = t3;
-	} else t3 = $[10];
-	const t4 = !musicIsPlaying && !musicCoverIsVideo && verticalImmerseCover;
 	let t5;
-	if ($[11] !== musicCover || $[12] !== musicCoverIsVideo || $[13] !== t4) {
-		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Cover, {
+	if ($[15] !== className) {
+		t5 = (0, classnames.default)(index_module_default.autoLyricLayout, className);
+		$[15] = className;
+		$[16] = t5;
+	} else t5 = $[16];
+	const t6 = !musicIsPlaying && !musicCoverIsVideo && verticalImmerseCover;
+	let t7;
+	if ($[17] !== musicCover || $[18] !== musicCoverIsVideo || $[19] !== t6) {
+		t7 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Cover, {
 			coverUrl: musicCover,
 			coverIsVideo: musicCoverIsVideo,
 			ref: coverElRef,
-			musicPaused: t4
+			musicPaused: t6
 		});
-		$[11] = musicCover;
-		$[12] = musicCoverIsVideo;
-		$[13] = t4;
-		$[14] = t5;
-	} else t5 = $[14];
-	let t6;
-	if ($[15] !== onClickControlThumb) {
-		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlThumb, { onClick: onClickControlThumb });
-		$[15] = onClickControlThumb;
-		$[16] = t6;
-	} else t6 = $[16];
-	const t7 = hideLyricView && index_module_default.hideLyric;
+		$[17] = musicCover;
+		$[18] = musicCoverIsVideo;
+		$[19] = t6;
+		$[20] = t7;
+	} else t7 = $[20];
 	let t8;
-	if ($[17] !== t7) {
-		t8 = (0, classnames.default)(index_module_default.smallMusicInfo, t7);
-		$[17] = t7;
-		$[18] = t8;
-	} else t8 = $[18];
-	let t9;
-	if ($[19] !== t8) {
-		t9 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltMusicInfo, { className: t8 });
-		$[19] = t8;
-		$[20] = t9;
-	} else t9 = $[20];
+	if ($[21] !== onClickControlThumb) {
+		t8 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ControlThumb, { onClick: onClickControlThumb });
+		$[21] = onClickControlThumb;
+		$[22] = t8;
+	} else t8 = $[22];
+	const t9 = hideLyricView && index_module_default.hideLyric;
 	let t10;
-	if ($[21] !== backgroundRenderer.renderer || $[22] !== cssBackgroundProperty || $[23] !== isLyricPageOpened || $[24] !== lowFreqVolume || $[25] !== lyricBackgroundFPS || $[26] !== lyricBackgroundRenderScale || $[27] !== lyricBackgroundStaticMode || $[28] !== musicCover || $[29] !== musicCoverIsVideo) {
-		t10 = typeof backgroundRenderer.renderer === "string" && backgroundRenderer.renderer === "css-bg" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+	if ($[23] !== t9) {
+		t10 = (0, classnames.default)(index_module_default.smallMusicInfo, t9);
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t10) {
+		t11 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltMusicInfo, { className: t10 });
+		$[25] = t10;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== configureBackgroundRenderer || $[28] !== cssBackgroundProperty || $[29] !== isLyricPageOpened || $[30] !== lowFreqVolume || $[31] !== lyricBackgroundFPS || $[32] !== lyricBackgroundRenderScale || $[33] !== lyricBackgroundStaticMode || $[34] !== musicCover || $[35] !== musicCoverIsVideo || $[36] !== resolvedBackgroundRenderer) {
+		t12 = resolvedBackgroundRenderer === "css-bg" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
 			zIndex: -1,
 			width: "100%",
 			height: "100%",
@@ -3719,48 +3804,50 @@ const PrebuiltLyricPlayer = (t0) => {
 			lowFreqVolume,
 			renderScale: lyricBackgroundRenderScale,
 			fps: lyricBackgroundFPS,
-			renderer: typeof backgroundRenderer.renderer === "string" ? backgroundRenderer.renderer === "pixi" ? _applemusic_like_lyrics_react.PixiRenderer : _applemusic_like_lyrics_react.MeshGradientRenderer : backgroundRenderer.renderer,
+			renderer: resolvedBackgroundRenderer,
 			staticMode: lyricBackgroundStaticMode || !isLyricPageOpened,
+			configureRenderer: configureBackgroundRenderer,
 			style: { zIndex: -1 }
 		});
-		$[21] = backgroundRenderer.renderer;
-		$[22] = cssBackgroundProperty;
-		$[23] = isLyricPageOpened;
-		$[24] = lowFreqVolume;
-		$[25] = lyricBackgroundFPS;
-		$[26] = lyricBackgroundRenderScale;
-		$[27] = lyricBackgroundStaticMode;
-		$[28] = musicCover;
-		$[29] = musicCoverIsVideo;
-		$[30] = t10;
-	} else t10 = $[30];
-	const t11 = hideLyricView && index_module_default.hideLyric;
-	let t12;
-	if ($[31] !== t11) {
-		t12 = (0, classnames.default)(index_module_default.bigMusicInfo, t11);
-		$[31] = t11;
-		$[32] = t12;
-	} else t12 = $[32];
-	let t13;
-	if ($[33] !== t12) {
-		t13 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltMusicInfo, { className: t12 });
-		$[33] = t12;
-		$[34] = t13;
-	} else t13 = $[34];
+		$[27] = configureBackgroundRenderer;
+		$[28] = cssBackgroundProperty;
+		$[29] = isLyricPageOpened;
+		$[30] = lowFreqVolume;
+		$[31] = lyricBackgroundFPS;
+		$[32] = lyricBackgroundRenderScale;
+		$[33] = lyricBackgroundStaticMode;
+		$[34] = musicCover;
+		$[35] = musicCoverIsVideo;
+		$[36] = resolvedBackgroundRenderer;
+		$[37] = t12;
+	} else t12 = $[37];
+	const t13 = hideLyricView && index_module_default.hideLyric;
 	let t14;
+	if ($[38] !== t13) {
+		t14 = (0, classnames.default)(index_module_default.bigMusicInfo, t13);
+		$[38] = t13;
+		$[39] = t14;
+	} else t14 = $[39];
 	let t15;
-	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltProgressBar, {});
-		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltMusicControls, { className: index_module_default.bigControls });
-		$[35] = t14;
-		$[36] = t15;
+	if ($[40] !== t14) {
+		t15 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltMusicInfo, { className: t14 });
+		$[40] = t14;
+		$[41] = t15;
+	} else t15 = $[41];
+	let t16;
+	let t17;
+	if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltProgressBar, {});
+		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltMusicControls, { className: index_module_default.bigControls });
+		$[42] = t16;
+		$[43] = t17;
 	} else {
-		t14 = $[35];
-		t15 = $[36];
+		t16 = $[42];
+		t17 = $[43];
 	}
-	let t16;
-	if ($[37] !== hideLyricView || $[38] !== setHideLyricView || $[39] !== showBottomControl) {
-		t16 = showBottomControl && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	let t18;
+	if ($[44] !== hideLyricView || $[45] !== setHideLyricView || $[46] !== showBottomControl) {
+		t18 = showBottomControl && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			style: {
 				display: "flex",
 				justifyContent: "space-evenly"
@@ -3775,32 +3862,32 @@ const PrebuiltLyricPlayer = (t0) => {
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltToggleIconButton, { type: "playlist" })
 			]
 		});
-		$[37] = hideLyricView;
-		$[38] = setHideLyricView;
-		$[39] = showBottomControl;
-		$[40] = t16;
-	} else t16 = $[40];
-	let t17;
-	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltVolumeControl, { className: index_module_default.bigVolumeControl });
-		$[41] = t17;
-	} else t17 = $[41];
-	let t18;
-	if ($[42] !== t13 || $[43] !== t16) {
-		t18 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			t13,
-			t14,
+		$[44] = hideLyricView;
+		$[45] = setHideLyricView;
+		$[46] = showBottomControl;
+		$[47] = t18;
+	} else t18 = $[47];
+	let t19;
+	if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltVolumeControl, { className: index_module_default.bigVolumeControl });
+		$[48] = t19;
+	} else t19 = $[48];
+	let t20;
+	if ($[49] !== t15 || $[50] !== t18) {
+		t20 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 			t15,
 			t16,
-			t17
+			t17,
+			t18,
+			t19
 		] });
-		$[42] = t13;
-		$[43] = t16;
-		$[44] = t18;
-	} else t18 = $[44];
-	let t19;
-	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
-		t19 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		$[49] = t15;
+		$[50] = t18;
+		$[51] = t20;
+	} else t20 = $[51];
+	let t21;
+	if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltMusicInfo, { className: index_module_default.horizontalControls }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltProgressBar, {}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltMusicControls, {
@@ -3809,11 +3896,11 @@ const PrebuiltLyricPlayer = (t0) => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltVolumeControl, {})
 		] });
-		$[45] = t19;
-	} else t19 = $[45];
-	let t20;
-	if ($[46] !== hideLyricView || $[47] !== setHideLyricView || $[48] !== showBottomControl) {
-		t20 = showBottomControl && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		$[52] = t21;
+	} else t21 = $[52];
+	let t22;
+	if ($[53] !== hideLyricView || $[54] !== setHideLyricView || $[55] !== showBottomControl) {
+		t22 = showBottomControl && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltToggleIconButton, { type: "playlist" }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltToggleIconButton, {
 				type: "lyrics",
@@ -3823,57 +3910,57 @@ const PrebuiltLyricPlayer = (t0) => {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: { flex: "1" } }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltToggleIconButton, { type: "airplay" })
 		] });
-		$[46] = hideLyricView;
-		$[47] = setHideLyricView;
-		$[48] = showBottomControl;
-		$[49] = t20;
-	} else t20 = $[49];
-	let t21;
-	if ($[50] !== alignAnchor || $[51] !== alignPosition || $[52] !== bottomLineSlot || $[53] !== optimizeOptions) {
-		t21 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltCoreLyricPlayer, {
+		$[53] = hideLyricView;
+		$[54] = setHideLyricView;
+		$[55] = showBottomControl;
+		$[56] = t22;
+	} else t22 = $[56];
+	let t23;
+	if ($[57] !== alignAnchor || $[58] !== alignPosition || $[59] !== bottomLineSlot || $[60] !== optimizeOptions) {
+		t23 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PrebuiltCoreLyricPlayer, {
 			alignPosition,
 			alignAnchor,
 			bottomLine: bottomLineSlot,
 			optimizeOptions
 		});
-		$[50] = alignAnchor;
-		$[51] = alignPosition;
-		$[52] = bottomLineSlot;
-		$[53] = optimizeOptions;
-		$[54] = t21;
-	} else t21 = $[54];
-	let t22;
-	if ($[55] !== hideLyricView || $[56] !== rest || $[57] !== t10 || $[58] !== t18 || $[59] !== t20 || $[60] !== t21 || $[61] !== t3 || $[62] !== t5 || $[63] !== t6 || $[64] !== t9 || $[65] !== verticalImmerseCover) {
-		t22 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.LayoutGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoLyricLayout, {
+		$[57] = alignAnchor;
+		$[58] = alignPosition;
+		$[59] = bottomLineSlot;
+		$[60] = optimizeOptions;
+		$[61] = t23;
+	} else t23 = $[61];
+	let t24;
+	if ($[62] !== hideLyricView || $[63] !== rest || $[64] !== t11 || $[65] !== t12 || $[66] !== t20 || $[67] !== t22 || $[68] !== t23 || $[69] !== t5 || $[70] !== t7 || $[71] !== t8 || $[72] !== verticalImmerseCover) {
+		t24 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.LayoutGroup, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AutoLyricLayout, {
 			onElementMounted: setLayoutEl,
-			className: t3,
+			className: t5,
 			onLayoutChange: setIsVertical,
 			verticalImmerseCover,
-			coverSlot: t5,
-			thumbSlot: t6,
-			smallControlsSlot: t9,
-			backgroundSlot: t10,
-			bigControlsSlot: t18,
-			controlsSlot: t19,
-			horizontalBottomControls: t20,
-			lyricSlot: t21,
+			coverSlot: t7,
+			thumbSlot: t8,
+			smallControlsSlot: t11,
+			backgroundSlot: t12,
+			bigControlsSlot: t20,
+			controlsSlot: t21,
+			horizontalBottomControls: t22,
+			lyricSlot: t23,
 			hideLyric: hideLyricView,
 			...rest
 		}) });
-		$[55] = hideLyricView;
-		$[56] = rest;
-		$[57] = t10;
-		$[58] = t18;
-		$[59] = t20;
-		$[60] = t21;
-		$[61] = t3;
-		$[62] = t5;
-		$[63] = t6;
-		$[64] = t9;
-		$[65] = verticalImmerseCover;
-		$[66] = t22;
-	} else t22 = $[66];
-	return t22;
+		$[62] = hideLyricView;
+		$[63] = rest;
+		$[64] = t11;
+		$[65] = t12;
+		$[66] = t20;
+		$[67] = t22;
+		$[68] = t23;
+		$[69] = t5;
+		$[70] = t7;
+		$[71] = t8;
+		$[72] = verticalImmerseCover;
+		$[73] = t24;
+	} else t24 = $[73];
+	return t24;
 };
 function _temp(v) {
 	return v.name;
@@ -3893,10 +3980,14 @@ exports.AudioFFTVisualizer = AudioFFTVisualizer;
 exports.AudioQualityTag = AudioQualityTag;
 exports.AudioQualityType = AudioQualityType;
 exports.AutoLyricLayout = AutoLyricLayout;
+exports.BACKGROUND_RENDERERS = BACKGROUND_RENDERERS;
 exports.BouncingSlider = BouncingSlider;
+exports.CSS_BACKGROUND_RENDERER_ID = CSS_BACKGROUND_RENDERER_ID;
 exports.ControlThumb = ControlThumb;
 exports.Cover = Cover;
+exports.DEFAULT_BACKGROUND_RENDERER_ID = DEFAULT_BACKGROUND_RENDERER_ID;
 exports.HorizontalLayout = HorizontalLayout;
+exports.LYRIC_BACKGROUND_RENDERER_STORAGE_KEY = LYRIC_BACKGROUND_RENDERER_STORAGE_KEY;
 exports.LyricPlayerImplementation = LyricPlayerImplementation;
 exports.LyricSizePreset = LyricSizePreset;
 exports.MediaButton = MediaButton;
@@ -3927,6 +4018,7 @@ exports.isLyricPageOpenedAtom = isLyricPageOpenedAtom;
 exports.isRepeatEnabledAtom = isRepeatEnabledAtom;
 exports.isShuffleActiveAtom = isShuffleActiveAtom;
 exports.isShuffleEnabledAtom = isShuffleEnabledAtom;
+exports.isolationRendererOptionsAtom = isolationRendererOptionsAtom;
 exports.lowFreqVolumeAtom = lowFreqVolumeAtom;
 exports.lyricBackgroundFPSAtom = lyricBackgroundFPSAtom;
 exports.lyricBackgroundRenderScaleAtom = lyricBackgroundRenderScaleAtom;
@@ -3965,6 +4057,7 @@ exports.onSeekPositionAtom = onSeekPositionAtom;
 exports.onToggleShuffleAtom = onToggleShuffleAtom;
 exports.playerControlsTypeAtom = playerControlsTypeAtom;
 exports.repeatModeAtom = repeatModeAtom;
+exports.resolveBackgroundRenderer = resolveBackgroundRenderer;
 exports.showBottomControlAtom = showBottomControlAtom;
 exports.showMusicAlbumAtom = showMusicAlbumAtom;
 exports.showMusicArtistsAtom = showMusicArtistsAtom;