dsh-any-background 0.2.4 → 0.2.6

package/lib/client.js

@@ -29,7 +29,7 @@ window.__ModuleLoader__.load({
 			descColor: "拖动色轮或输入精确数值，整个界面的配色将实时跟随变化",
 			descInterface: "为主界面的各个区域单独调节透明度与模糊，营造空间层次感",
 			descBackground: "上传一张图片或一段视频作为壁纸并自由摆放，或让算法为你实时生成动态背景",
-			descProfile: "将当前主题导出为文件备份，或从文件一键恢复完整配置",
+			descProfile: "一键套用外观预设，保存多套配置随时切换，设置昼夜自动换装，或导出/导入完整主题",
 			colorTitle: "主题色",
 			colorHint: "在色轮外圈选择色相，在内部方形中调整饱和度和明度；双击滑块可恢复默认值",
 			swatchTitle: "灵感色板",
@@ -48,7 +48,7 @@ window.__ModuleLoader__.load({
 			bgChoose: "选择图片或视频",
 			bgRemove: "移除背景",
 			bgFromUrl: "从网址",
-			bgUrlPlaceholder: "粘贴图片网址 https://…",
+			bgUrlPlaceholder: "粘贴图片或视频网址 https://…",
 			bgUrlApply: "应用",
 			bgUrlCancel: "取消",
 			bgUrlApplying: "加载中…",
@@ -121,7 +121,65 @@ window.__ModuleLoader__.load({
 			presetNoise: "流动噪声",
 			presetDots: "点阵",
 			presetWaves: "波浪",
-			presetPoly: "低多边形"
+			presetPoly: "低多边形",
+			presetStarfield: "星空",
+			presetRain: "雨滴",
+			presetContour: "等高线",
+			presetMeta: "流体光斑",
+			bgPause: "暂停",
+			bgResume: "播放",
+			bgUrlVideoFail: "获取视频失败，请确认链接可直接下载视频文件",
+			schemeTitle: "界面明暗",
+			schemeLight: "亮色",
+			schemeDark: "暗色",
+			schemeAuto: "自动",
+			schemeHint: "「自动」优先跟随背景画面的实际明暗决定界面明暗（无背景时依据主题色明度）；强制亮色/暗色后整套配色按所选方向生成，未选主题色时使用中性灰配色",
+			presetGalleryTitle: "外观预设",
+			presetName_default: "默认",
+			presetDesc_default: "恢复插件的初始外观",
+			presetName_glass: "毛玻璃",
+			presetDesc_glass: "通透表面 + 磨砂玻璃层次",
+			presetName_minimal: "极简白",
+			presetDesc_minimal: "接近实色的表面，无模糊",
+			presetName_midnight: "暗夜紫",
+			presetDesc_midnight: "深色强调，重磨砂低透明度",
+			presetName_cyber: "赛博",
+			presetDesc_cyber: "艳丽洋红，界面近乎消失",
+			presetName_warm: "暖阳",
+			presetDesc_warm: "琥珀色调的明亮实色界面",
+			presetApplied: "预设已应用",
+			profilesTitle: "我的配置",
+			profileSave: "保存当前配置",
+			profileNamePlaceholder: "输入配置名称…",
+			profileNameRequired: "请先输入配置名称",
+			profileSaved: "配置已保存",
+			profileApplied: "配置已应用",
+			profileApply: "应用",
+			profileDelete: "删除配置",
+			profileDeleteConfirm: "确认删除",
+			profileNone: "不切换",
+			profilesEmpty: "还没有保存的配置。调整好外观后点击「保存当前配置」，即可随时一键切换。",
+			scheduleTitle: "昼夜自动切换",
+			scheduleHint: "按时间或系统深色模式，在两套已保存的配置之间自动切换（切换的是配色与表面参数，壁纸不变）",
+			scheduleMode: "切换依据",
+			scheduleModeTime: "固定时段",
+			scheduleModeSystem: "跟随系统",
+			scheduleTimes: "切换时间",
+			scheduleDayStart: "日间开始",
+			scheduleNightStart: "夜间开始",
+			scheduleProfiles: "对应配置",
+			scheduleDayProfile: "日间",
+			scheduleNightProfile: "夜间",
+			rotTitle: "壁纸轮换",
+			rotHint: "把多张图片加入轮换池，按所选频率自动更换壁纸；启用后立即生效",
+			rotAdd: "添加图片",
+			rotRemove: "移除",
+			rotShuffle: "随机",
+			rotOrder: "顺序",
+			rotReload: "每次刷新",
+			rotDaily: "每天",
+			rotWeekly: "每周",
+			rotNow: "立即切换"
 		};
 		const en = {
 			nav: "Theme",
@@ -134,7 +192,7 @@ window.__ModuleLoader__.load({
 			descColor: "Drag the wheel or type exact values — the whole UI follows live",
 			descInterface: "Tune opacity and blur per surface to build depth",
 			descBackground: "Upload an image or a video as wallpaper and place it freely, or let the algorithm paint a live background",
-			descProfile: "Export the current theme as a file, or restore it from one",
+			descProfile: "Apply a one-click preset, save multiple named profiles, schedule a day/night switch, or export/import the full theme",
 			colorTitle: "Theme color",
 			colorHint: "Pick hue on the outer ring, adjust saturation & lightness in the square; double-click a slider to reset",
 			swatchTitle: "Quick swatches",
@@ -153,7 +211,7 @@ window.__ModuleLoader__.load({
 			bgChoose: "Choose image or video",
 			bgRemove: "Remove background",
 			bgFromUrl: "From URL",
-			bgUrlPlaceholder: "Paste an image URL https://…",
+			bgUrlPlaceholder: "Paste an image or video URL https://…",
 			bgUrlApply: "Apply",
 			bgUrlCancel: "Cancel",
 			bgUrlApplying: "Loading…",
@@ -226,7 +284,65 @@ window.__ModuleLoader__.load({
 			presetNoise: "Flowing noise",
 			presetDots: "Dots",
 			presetWaves: "Waves",
-			presetPoly: "Low poly"
+			presetPoly: "Low poly",
+			presetStarfield: "Starfield",
+			presetRain: "Rain",
+			presetContour: "Contours",
+			presetMeta: "Fluid orbs",
+			bgPause: "Pause",
+			bgResume: "Play",
+			bgUrlVideoFail: "Could not fetch the video — make sure the link downloads a video file directly",
+			schemeTitle: "Interface scheme",
+			schemeLight: "Light",
+			schemeDark: "Dark",
+			schemeAuto: "Auto",
+			schemeHint: "\"Auto\" follows the background brightness first (accent lightness as fallback only); forcing light/dark regenerates the palette in that direction - with no accent picked, a neutral gray palette is used",
+			presetGalleryTitle: "Appearance presets",
+			presetName_default: "Default",
+			presetDesc_default: "Restore the plugin's original look",
+			presetName_glass: "Frosted glass",
+			presetDesc_glass: "Translucent surfaces + frosted depth",
+			presetName_minimal: "Minimal",
+			presetDesc_minimal: "Near-solid surfaces, no frost",
+			presetName_midnight: "Midnight",
+			presetDesc_midnight: "Deep violet accent, heavy frost",
+			presetName_cyber: "Cyber",
+			presetDesc_cyber: "Vivid magenta, vanishing surfaces",
+			presetName_warm: "Warm daylight",
+			presetDesc_warm: "Amber accent on solid light surfaces",
+			presetApplied: "Preset applied",
+			profilesTitle: "Saved profiles",
+			profileSave: "Save current",
+			profileNamePlaceholder: "Profile name…",
+			profileNameRequired: "Enter a name first",
+			profileSaved: "Profile saved",
+			profileApplied: "Profile applied",
+			profileApply: "Apply",
+			profileDelete: "Delete profile",
+			profileDeleteConfirm: "Sure?",
+			profileNone: "None",
+			profilesEmpty: "No saved profiles yet. Tune the look, then hit \"Save current\" to switch back anytime.",
+			scheduleTitle: "Day/night auto switch",
+			scheduleHint: "Automatically swap between two saved profiles by clock time or the OS dark mode (colors and surfaces switch; the wallpaper stays)",
+			scheduleMode: "Trigger",
+			scheduleModeTime: "Fixed times",
+			scheduleModeSystem: "Follow system",
+			scheduleTimes: "Switch times",
+			scheduleDayStart: "Day starts",
+			scheduleNightStart: "Night starts",
+			scheduleProfiles: "Profiles",
+			scheduleDayProfile: "Day",
+			scheduleNightProfile: "Night",
+			rotTitle: "Wallpaper rotation",
+			rotHint: "Add images to a rotation pool and let the wallpaper change on your cadence; takes effect immediately when enabled",
+			rotAdd: "Add images",
+			rotRemove: "Remove",
+			rotShuffle: "Shuffle",
+			rotOrder: "In order",
+			rotReload: "Every refresh",
+			rotDaily: "Daily",
+			rotWeekly: "Weekly",
+			rotNow: "Switch now"
 		};
 		//#endregion
 		//#region src/client/state.ts
@@ -270,7 +386,26 @@ window.__ModuleLoader__.load({
 			generatedBg: null,
 			regenerateOnReload: false,
 			chatTextOpacity: 0,
-			trajectoryOpacity: 1
+			trajectoryOpacity: 1,
+			profiles: [],
+			rotation: {
+				enabled: false,
+				mode: "shuffle",
+				interval: "daily",
+				current: 0,
+				items: [],
+				lastRotate: null
+			},
+			schedule: {
+				enabled: false,
+				mode: "time",
+				dayProfile: null,
+				nightProfile: null,
+				dayStart: "07:00",
+				nightStart: "19:00"
+			},
+			schemeOverride: "auto",
+			activeProfile: null
 		};
 		const clamp01 = (n, def) => typeof n === "number" ? Math.min(1, Math.max(0, n)) : def;
 		let cfg = {
@@ -287,12 +422,19 @@ window.__ModuleLoader__.load({
 		let wpVideoSnapshot = null;
 		/** Local blob URL backing an in-session video; revoked when replaced or cleared. */
 		let wpVideoObjectUrl = null;
-		function setWpImageUrl(url) {
-			wpImageUrl = url;
-		}
 		function setWpUrl(url) {
 			wpUrl = url;
 		}
+		let imageRev = 0;
+		function bumpImageRev(url) {
+			if (url === null) return url;
+			if (!/^https?:\/\//i.test(url) && !url.startsWith("/")) return url;
+			imageRev++;
+			return `${url}${url.includes("?") ? "&" : "?"}r=${imageRev}`;
+		}
+		function setWpImageUrl(url) {
+			wpImageUrl = bumpImageRev(url);
+		}
 		let videoRev = 0;
 		function setWpVideoUrl(url, mime) {
 			if (url === null) {
@@ -403,8 +545,144 @@ window.__ModuleLoader__.load({
 		function rVideoBgState() {
 			return cfg.videoBgState;
 		}
+		function rProfiles() {
+			return Array.isArray(cfg.profiles) ? cfg.profiles : [];
+		}
+		function rRotation() {
+			const r = cfg.rotation;
+			return r && typeof r === "object" ? {
+				...DEFAULT_CONFIG.rotation,
+				...r,
+				items: Array.isArray(r.items) ? r.items : []
+			} : {
+				...DEFAULT_CONFIG.rotation,
+				items: []
+			};
+		}
+		function rSchedule() {
+			return cfg.schedule && typeof cfg.schedule === "object" ? {
+				...DEFAULT_CONFIG.schedule,
+				...cfg.schedule
+			} : { ...DEFAULT_CONFIG.schedule };
+		}
+		function rSchemeOverride() {
+			return cfg.schemeOverride === "light" || cfg.schemeOverride === "dark" ? cfg.schemeOverride : "auto";
+		}
+		/** Effective interface scheme (drives data-ds-dark-theme / color-scheme): a
+		*  forced override wins; in auto a picked color decides through its palette
+		*  direction (keeps native controls aligned with the drawn surfaces), and
+		*  without a pick the background's brightness verdict does. Stay light as the
+		*  last fallback. */
+		function rScheme() {
+			const o = rSchemeOverride();
+			if (o !== "auto") return o;
+			if (rHasColor()) return rColorScheme();
+			return rBgDark() ? "dark" : "light";
+		}
+		/** Direction the color palette itself is built in: a forced override wins; in
+		*  auto the theme color's own lightness decides (0.2.4 behavior) so surfaces
+		*  always contrast with the palette's label fonts — the wallpaper verdict must
+		*  not drag a dark color's surfaces into a light build (and vice versa) or
+		*  text and surfaces converge. */
+		function rColorScheme() {
+			const o = rSchemeOverride();
+			if (o !== "auto") return o;
+			return rHasColor() && rColor()[2] < .55 ? "dark" : "light";
+		}
+		/** Snapshot of the appearance fields a profile/preset restores. */
+		function currentAppearance() {
+			return {
+				color: cfg.color,
+				opacities: { ...rOps() },
+				blurs: { ...rBlurs() },
+				settingsOpacity: rSop(),
+				wallpaperOpacity: rWop(),
+				blur: rBl(),
+				chatTextOpacity: rChatTextOpacity(),
+				trajectoryOpacity: rTrajectoryOpacity()
+			};
+		}
+		/** Apply an appearance snapshot onto cfg (meta fields untouched). */
+		function applyAppearance(ap) {
+			cfg.color = Array.isArray(ap.color) && ap.color.length === 3 ? [...ap.color] : null;
+			cfg.opacities = {
+				...DEFAULT_CONFIG.opacities,
+				...ap.opacities ?? {}
+			};
+			cfg.blurs = {
+				...DEFAULT_CONFIG.blurs,
+				...ap.blurs ?? {}
+			};
+			cfg.settingsOpacity = clamp01(ap.settingsOpacity, DEFAULT_CONFIG.settingsOpacity);
+			cfg.wallpaperOpacity = clamp01(ap.wallpaperOpacity, DEFAULT_CONFIG.wallpaperOpacity);
+			cfg.blur = typeof ap.blur === "number" ? Math.min(60, Math.max(0, ap.blur)) : DEFAULT_CONFIG.blur;
+			cfg.chatTextOpacity = clamp01(ap.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity);
+			cfg.trajectoryOpacity = clamp01(ap.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity);
+		}
 		const num = (n, def) => typeof n === "number" ? n : def;
 		const cl = (n, lo, hi, def) => typeof n === "number" ? Math.min(hi, Math.max(lo, n)) : def;
+		const HHMM_RE = /^([01]\d|2[0-3]):[0-5]\d$/;
+		function adoptProfiles(raw) {
+			if (!Array.isArray(raw)) return [];
+			const out = [];
+			for (const item of raw.slice(0, 20)) {
+				const p = item ?? {};
+				if (typeof p.id !== "string" || p.id.length === 0 || p.id.length > 64) continue;
+				if (out.some((e) => e.id === p.id)) continue;
+				const ac = p.config ?? {};
+				out.push({
+					id: p.id,
+					name: typeof p.name === "string" && p.name.trim() ? p.name.slice(0, 60) : "Profile",
+					createdAt: typeof p.createdAt === "string" ? p.createdAt : "",
+					config: {
+						color: Array.isArray(ac.color) && ac.color.length === 3 ? [...ac.color] : null,
+						opacities: {
+							...DEFAULT_CONFIG.opacities,
+							...ac.opacities ?? {}
+						},
+						blurs: {
+							...DEFAULT_CONFIG.blurs,
+							...ac.blurs ?? {}
+						},
+						settingsOpacity: clamp01(ac.settingsOpacity, DEFAULT_CONFIG.settingsOpacity),
+						wallpaperOpacity: clamp01(ac.wallpaperOpacity, DEFAULT_CONFIG.wallpaperOpacity),
+						blur: num(ac.blur, DEFAULT_CONFIG.blur),
+						chatTextOpacity: clamp01(ac.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity),
+						trajectoryOpacity: clamp01(ac.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity)
+					}
+				});
+			}
+			return out;
+		}
+		function adoptRotation(raw) {
+			const r = raw ?? {};
+			const items = Array.isArray(r.items) ? r.items.filter((it) => {
+				const i = it ?? {};
+				return typeof i?.file === "string" && /^[\w-]+\.(jpg|jpeg|png|gif|webp)$/i.test(i.file);
+			}).slice(0, 30).map((it) => ({
+				file: it.file,
+				thumb: typeof it.thumb === "string" && it.thumb.startsWith("data:image/") && it.thumb.length <= 65536 ? it.thumb : ""
+			})) : [];
+			return {
+				enabled: r.enabled === true,
+				mode: r.mode === "order" ? "order" : "shuffle",
+				interval: r.interval === "reload" || r.interval === "weekly" ? r.interval : "daily",
+				current: num(r.current, 0),
+				items,
+				lastRotate: typeof r.lastRotate === "string" ? r.lastRotate : null
+			};
+		}
+		function adoptSchedule(raw) {
+			const r = raw ?? {};
+			return {
+				enabled: r.enabled === true,
+				mode: r.mode === "system" ? "system" : "time",
+				dayProfile: typeof r.dayProfile === "string" ? r.dayProfile : null,
+				nightProfile: typeof r.nightProfile === "string" ? r.nightProfile : null,
+				dayStart: typeof r.dayStart === "string" && HHMM_RE.test(r.dayStart) ? r.dayStart : DEFAULT_CONFIG.schedule.dayStart,
+				nightStart: typeof r.nightStart === "string" && HHMM_RE.test(r.nightStart) ? r.nightStart : DEFAULT_CONFIG.schedule.nightStart
+			};
+		}
 		function adoptBgState(s) {
 			return {
 				zoom: num(s.zoom, 1),
@@ -470,7 +748,12 @@ window.__ModuleLoader__.load({
 				generatedBg: generatedBg ? normalizeGeneratedBg(generatedBg) : null,
 				regenerateOnReload: typeof c.regenerateOnReload === "boolean" ? c.regenerateOnReload : DEFAULT_CONFIG.regenerateOnReload,
 				chatTextOpacity: clamp01(c.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity),
-				trajectoryOpacity: clamp01(c.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity)
+				trajectoryOpacity: clamp01(c.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity),
+				profiles: adoptProfiles(c.profiles),
+				rotation: adoptRotation(c.rotation),
+				schedule: adoptSchedule(c.schedule),
+				schemeOverride: c.schemeOverride === "light" || c.schemeOverride === "dark" ? c.schemeOverride : "auto",
+				activeProfile: typeof c.activeProfile === "string" ? c.activeProfile : null
 			};
 		}
 		function normalizeGeneratedBg(p) {
@@ -486,7 +769,8 @@ window.__ModuleLoader__.load({
 				preset: [
 					"aurora",
 					"nebula",
-					"noise"
+					"noise",
+					"starfield"
 				].includes(p.preset) ? p.preset : "aurora",
 				speed: cl(p.speed, 0, 2, .3),
 				scale: cl(p.scale, .3, 3, 1),
@@ -497,7 +781,10 @@ window.__ModuleLoader__.load({
 				preset: [
 					"dots",
 					"waves",
-					"poly"
+					"poly",
+					"rain",
+					"contour",
+					"meta"
 				].includes(p.preset) ? p.preset : "dots",
 				density: cl(p.density, 0, 1, .5),
 				scale: cl(p.scale, .3, 3, 1),
@@ -509,6 +796,10 @@ window.__ModuleLoader__.load({
 		const RPC_CHANNEL = "/dsh-any-background";
 		/** Same-origin serve URL of the persisted video (enough for <video src>/fetch). */
 		const VIDEO_SERVE_URL = "/dsh-any-background/video";
+		/** Same-origin serve URL of the persisted wallpaper (native <img> loading). */
+		const WALLPAPER_SERVE_URL = "/dsh-any-background/wallpaper";
+		/** Raw-bytes upload endpoint for the wallpaper slot (no base64 inflation). */
+		const WALLPAPER_UPLOAD_URL = "/dsh-any-background/wallpaper/upload";
 		/** HTTP route new videos are POSTed to as raw bytes (see uploadVideo). */
 		const VIDEO_UPLOAD_URL = "/dsh-any-background/video/upload";
 		const RPC_NS = "dshAnyBackground";
@@ -548,18 +839,23 @@ window.__ModuleLoader__.load({
 		function persistConfig() {
 			rpcCall("writeConfig", { config: cfg });
 		}
-		/** Load the persisted theme (config + wallpaper + video URL) from the node half. */
+		/** Load the persisted theme (config + wallpaper URL + video URL) from the node
+		*  half. Image and video both travel as serve URLs — never bytes — so this RPC
+		*  stays tiny. Resolves true when the server advanced a due wallpaper rotation
+		*  during the read — the restored wallpaper is then already the new pick. */
 		async function loadPersisted() {
 			const data = await rpcCall("read", {});
 			if (data && typeof data === "object") {
 				const d = data;
 				if (d.config) adoptConfig(d.config);
-				if (typeof d.wallpaper === "string") setWpImageUrl(d.wallpaper);
-				else if (d.wallpaper === null) setWpImageUrl(null);
+				if (typeof d.wallpaperUrl === "string") setWpImageUrl(d.wallpaperUrl);
+				else if (d.wallpaperUrl === null) setWpImageUrl(null);
 				if (typeof d.videoUrl === "string") setWpVideoUrl(d.videoUrl, cfg.videoMime);
 				else if (d.videoUrl === null) setWpVideoUrl(null, null);
-				if (cfg.backgroundType === "image") setWpUrl(d.wallpaper === null ? null : d.wallpaper);
+				if (cfg.backgroundType === "image") setWpUrl(rWpImage());
+				return d.rotated === true;
 			}
+			return false;
 		}
 		/** Persist a wallpaper (null removes it); one-shot, no debounce. */
 		function persistWallpaper(dataUrl) {
@@ -571,7 +867,7 @@ window.__ModuleLoader__.load({
 			return await rpcCall("setVideo", { dataUrl }) === true;
 		}
 		/** Download a wallpaper from a network URL and persist it into the local slot
-		*  (the host replaces wallpaper.jpg). Returns the freshly stored data-URL on
+		*  (the host replaces wallpaper.jpg). Returns the freshly stored serve URL on
 		*  success, or the host's failure message. */
 		async function setWallpaperFromUrl(url) {
 			if (!rpcCallFn) return {
@@ -598,7 +894,40 @@ window.__ModuleLoader__.load({
 			const v = res.value;
 			return v?.ok === true ? {
 				ok: true,
-				dataUrl: v.dataUrl ?? null
+				wallpaperUrl: v.wallpaperUrl ?? null
+			} : {
+				ok: false,
+				error: v?.error ?? "failed"
+			};
+		}
+		/** Download a background video from a network URL. The server streams it into
+		*  the video slot and returns the resolved MIME for playback via the serve URL. */
+		async function setVideoFromUrl(url) {
+			if (!rpcCallFn) return {
+				ok: false,
+				error: "rpc not ready"
+			};
+			let res;
+			try {
+				res = await rpcCallFn(rpcEndpoint("setVideoUrl"), { url });
+			} catch (e) {
+				return {
+					ok: false,
+					error: e instanceof Error ? e.message : String(e)
+				};
+			}
+			if (!res) return {
+				ok: false,
+				error: "no response"
+			};
+			if (res.ok !== true) return {
+				ok: false,
+				error: res.error?.message ?? "request failed"
+			};
+			const v = res.value;
+			return v?.ok === true ? {
+				ok: true,
+				mime: v.mime ?? "video/mp4"
 			} : {
 				ok: false,
 				error: v?.error ?? "failed"
@@ -618,6 +947,175 @@ window.__ModuleLoader__.load({
 				return false;
 			}
 		}
+		/** Upload a wallpaper's raw bytes over HTTP — same streaming model as videos,
+		*  original pixels preserved, zero base64 round-trips. */
+		async function uploadWallpaper(blob) {
+			try {
+				return (await fetch(WALLPAPER_UPLOAD_URL, {
+					method: "POST",
+					headers: { "Content-Type": blob.type || "image/jpeg" },
+					body: blob
+				})).ok;
+			} catch (e) {
+				console.warn("dsh-any-background: wallpaper upload failed", e);
+				return false;
+			}
+		}
+		/** Add an image (data URL + small thumbnail) to the server-side rotation pool. */
+		async function rotationAdd(dataUrl, thumb) {
+			if (!rpcCallFn) return {
+				ok: false,
+				error: "rpc not ready"
+			};
+			try {
+				const res = await rpcCallFn(rpcEndpoint("rotationAdd"), {
+					dataUrl,
+					thumb
+				});
+				if (res && res.ok === true) return res.value ?? {
+					ok: false,
+					error: "no value"
+				};
+				return {
+					ok: false,
+					error: res?.error?.message ?? "request failed"
+				};
+			} catch (e) {
+				return {
+					ok: false,
+					error: e instanceof Error ? e.message : String(e)
+				};
+			}
+		}
+		/** Remove a rotation item by index. Returns the updated items list. */
+		async function rotationRemove(index) {
+			if (!rpcCallFn) return {
+				ok: false,
+				error: "rpc not ready"
+			};
+			try {
+				const res = await rpcCallFn(rpcEndpoint("rotationRemove"), { index });
+				if (res && res.ok === true) return res.value ?? {
+					ok: false,
+					error: "no value"
+				};
+				return {
+					ok: false,
+					error: res?.error?.message ?? "request failed"
+				};
+			} catch (e) {
+				return {
+					ok: false,
+					error: e instanceof Error ? e.message : String(e)
+				};
+			}
+		}
+		/** Activate a rotation item: the server copies its bytes into the wallpaper
+		*  slot and returns the serve URL for immediate display. */
+		async function rotationActivate(index) {
+			if (!rpcCallFn) return {
+				ok: false,
+				error: "rpc not ready"
+			};
+			try {
+				const res = await rpcCallFn(rpcEndpoint("rotationSet"), { index });
+				if (res && res.ok === true) return res.value ?? {
+					ok: false,
+					error: "no value"
+				};
+				return {
+					ok: false,
+					error: res?.error?.message ?? "request failed"
+				};
+			} catch (e) {
+				return {
+					ok: false,
+					error: e instanceof Error ? e.message : String(e)
+				};
+			}
+		}
+		//#endregion
+		//#region src/client/utils/image.ts
+		/**
+		* Read a chosen image file as a data URL WITHOUT re-encoding: the original
+		* pixels are kept as-is (no canvas downscale / JPEG re-compression), so the
+		* wallpaper is stored and displayed at full fidelity. The tradeoff is a larger
+		* payload over the RPC channel and on disk for big images.
+		*/
+		function readImg(file, cb) {
+			const r = new FileReader();
+			r.onerror = () => cb(null);
+			r.onload = () => cb(r.result);
+			r.readAsDataURL(file);
+		}
+		/** Promised readImg variant for async flows. */
+		function readImgAsync(file) {
+			return new Promise((resolve) => readImg(file, resolve));
+		}
+		/** Blob → data URL (used when a local asset must be embedded, e.g. theme export). */
+		function blobToDataUrl(blob) {
+			return new Promise((resolve, reject) => {
+				const fr = new FileReader();
+				fr.onload = () => resolve(fr.result);
+				fr.onerror = () => reject(fr.error);
+				fr.readAsDataURL(blob);
+			});
+		}
+		const IMG_CACHE_MAX = 6;
+		const imgCache = /* @__PURE__ */ new Map();
+		/** Decode an image URL once and share the element across callers (LRU-capped). */
+		function loadImage(url) {
+			const hit = imgCache.get(url);
+			if (hit) {
+				imgCache.delete(url);
+				imgCache.set(url, hit);
+				return hit;
+			}
+			const p = new Promise((resolve) => {
+				const img = new Image();
+				img.onerror = () => resolve(null);
+				img.onload = () => resolve(img);
+				img.src = url;
+			});
+			imgCache.set(url, p);
+			while (imgCache.size > IMG_CACHE_MAX) {
+				const oldest = imgCache.keys().next().value;
+				if (oldest !== void 0) imgCache.delete(oldest);
+			}
+			return p;
+		}
+		/** Build a small JPEG thumbnail (rotation-pool picker preview). Resolves null
+		*  when the image cannot be decoded. */
+		function makeThumb(dataUrl, maxSide = 96) {
+			return new Promise((resolve) => {
+				const img = new Image();
+				img.onerror = () => resolve(null);
+				img.onload = () => {
+					try {
+						const iw = img.naturalWidth || img.width;
+						const ih = img.naturalHeight || img.height;
+						if (iw <= 0 || ih <= 0) {
+							resolve(null);
+							return;
+						}
+						const k = Math.min(1, maxSide / Math.max(iw, ih));
+						const c = document.createElement("canvas");
+						c.width = Math.max(1, Math.round(iw * k));
+						c.height = Math.max(1, Math.round(ih * k));
+						const g = c.getContext("2d");
+						if (!g) {
+							resolve(null);
+							return;
+						}
+						g.drawImage(img, 0, 0, c.width, c.height);
+						resolve(c.toDataURL("image/jpeg", .72));
+					} catch {
+						resolve(null);
+					}
+				};
+				img.src = dataUrl;
+			});
+		}
 		//#endregion
 		//#region src/client/utils/color.ts
 		function hsvToHsl(h, s, v) {
@@ -639,20 +1137,23 @@ window.__ModuleLoader__.load({
 		let tokensCacheKey = "";
 		let tokensCache = null;
 		/**
-		* Memoized token generation: the same (hue, sat, lit) input always yields the
-		* same token set, and applyWp / applyCustomTokens / applySettingsOverrides call
-		* this repeatedly (slider drags, viewport re-applies), so cache the last result
-		* and skip the 30+ hsl() string builds when nothing changed.
+		* Memoized token generation: the same (hue, sat, lit, scheme) input always
+		* yields the same token set, and applyWp / applyCustomTokens /
+		* applySettingsOverrides call this repeatedly (slider drags, viewport
+		* re-applies), so cache the last result and skip the 30+ hsl() string builds
+		* when nothing changed. The optional scheme forces the palette direction
+		* (light/dark) independently of the color's own lightness.
 		*/
-		function genTokens(hue, sat, lit) {
-			const key = `${hue}|${sat}|${lit}`;
+		function genTokens(hue, sat, lit, scheme) {
+			const key = `${hue}|${sat}|${lit}|${scheme ?? "auto"}`;
 			if (tokensCacheKey === key && tokensCache) return tokensCache;
 			tokensCacheKey = key;
-			tokensCache = buildTokens(hue, sat, lit);
+			tokensCache = buildTokens(hue, sat, lit, scheme);
 			return tokensCache;
 		}
-		function buildTokens(hue, sat, lit) {
-			const dark = lit < .55;
+		function buildTokens(hue, sat, lit, scheme) {
+			const dark = scheme !== void 0 ? scheme === "dark" : lit < .55;
+			if (scheme !== void 0 && lit < .55 !== dark) lit = dark ? Math.min(.44, Math.max(.14, 1 - lit)) : Math.max(.6, Math.min(.88, 1 - lit));
 			const h = (d) => ((hue + d) % 360 + 360) % 360;
 			const s = (d) => Math.max(0, Math.min(1, sat + d));
 			const l = (d) => Math.max(0, Math.min(1, lit + d));
@@ -822,124 +1323,119 @@ window.__ModuleLoader__.load({
 			return rgbToHsl(b.r / b.count, b.g / b.count, b.b / b.count);
 		}
 		function extractWallpaperPalette(dataUrl, bgState) {
-			return new Promise((resolve) => {
-				const img = new Image();
-				img.onerror = () => resolve(null);
-				img.onload = () => {
-					try {
-						const iw = img.naturalWidth || img.width;
-						const ih = img.naturalHeight || img.height;
-						const bg = bgState;
-						let sx = 0, sy = 0, sw = iw, sh = ih;
-						if (bg.iw === iw && bg.ih === ih && bg.iw > 0) {
-							const fit = Math.min(window.innerWidth / iw, window.innerHeight / ih);
-							const w = iw * fit * bg.zoom;
-							const h = ih * fit * bg.zoom;
-							sx = Math.max(0, bg.x * window.innerWidth - w / 2);
-							sy = Math.max(0, bg.y * window.innerHeight - h / 2);
-							sw = Math.min(iw - sx, w);
-							sh = Math.min(ih - sy, h);
-							if (sw <= 0 || sh <= 0) {
-								sx = 0;
-								sy = 0;
-								sw = iw;
-								sh = ih;
-							}
-						}
-						const c = document.createElement("canvas");
-						c.width = EXTRACT_SIDE;
-						c.height = EXTRACT_SIDE;
-						const g = c.getContext("2d", { willReadFrequently: true });
-						g.drawImage(img, sx, sy, sw, sh, 0, 0, EXTRACT_SIDE, EXTRACT_SIDE);
-						const px = g.getImageData(0, 0, EXTRACT_SIDE, EXTRACT_SIDE).data;
-						const counts = /* @__PURE__ */ new Uint32Array(4096);
-						const sums = /* @__PURE__ */ new Float64Array(12288);
-						let totalLum = 0;
-						let sampled = 0;
-						for (let i = 0; i < px.length; i += 4) {
-							const r = px[i], gg = px[i + 1], b = px[i + 2];
-							const max = Math.max(r, gg, b), min = Math.min(r, gg, b);
-							const v = max / 255;
-							const s = max === 0 ? 0 : (max - min) / max;
-							totalLum += v;
-							sampled++;
-							if (s < .08 || v < .12 || v > .97) continue;
-							const key = r >> 4 << 8 | gg >> 4 << 4 | b >> 4;
-							counts[key]++;
-							sums[key * 3] += r;
-							sums[key * 3 + 1] += gg;
-							sums[key * 3 + 2] += b;
-						}
-						const buckets = [];
-						for (let k = 0; k < 4096; k++) {
-							if (counts[k] === 0) continue;
-							buckets.push({
-								count: counts[k],
-								r: sums[k * 3],
-								g: sums[k * 3 + 1],
-								b: sums[k * 3 + 2],
-								s: (Math.max(sums[k * 3], sums[k * 3 + 1], sums[k * 3 + 2]) - Math.min(sums[k * 3], sums[k * 3 + 1], sums[k * 3 + 2])) / Math.max(sums[k * 3], sums[k * 3 + 1], sums[k * 3 + 2]) || 0
-							});
-						}
-						if (buckets.length === 0) {
-							resolve(null);
-							return;
+			return loadImage(dataUrl).then((img) => {
+				if (!img) return null;
+				try {
+					const iw = img.naturalWidth || img.width;
+					const ih = img.naturalHeight || img.height;
+					const bg = bgState;
+					let sx = 0, sy = 0, sw = iw, sh = ih;
+					if (bg.iw === iw && bg.ih === ih && bg.iw > 0) {
+						const fit = Math.min(window.innerWidth / iw, window.innerHeight / ih);
+						const w = iw * fit * bg.zoom;
+						const h = ih * fit * bg.zoom;
+						const px = bg.x * window.innerWidth - w / 2;
+						const py = bg.y * window.innerHeight - h / 2;
+						sx = Math.max(0, -px);
+						sy = Math.max(0, -py);
+						sw = Math.min(iw - sx, window.innerWidth - px - sx);
+						sh = Math.min(ih - sy, window.innerHeight - py - sy);
+						if (sw <= 0 || sh <= 0) {
+							sx = 0;
+							sy = 0;
+							sw = iw;
+							sh = ih;
 						}
-						buckets.sort((a, b) => b.count * (.5 + b.s) - a.count * (.5 + a.s));
-						const primary = bucketsToHsl(buckets[0]);
-						const primaryHue = primary[0];
-						let secondary = primary;
-						for (const b of buckets.slice(1)) {
-							const [h] = bucketsToHsl(b);
-							if (Math.abs((h - primaryHue + 540) % 360 - 180) > 30) {
-								secondary = bucketsToHsl(b);
-								break;
-							}
+					}
+					const c = document.createElement("canvas");
+					c.width = EXTRACT_SIDE;
+					c.height = EXTRACT_SIDE;
+					const g = c.getContext("2d", { willReadFrequently: true });
+					g.drawImage(img, sx, sy, sw, sh, 0, 0, EXTRACT_SIDE, EXTRACT_SIDE);
+					const px = g.getImageData(0, 0, EXTRACT_SIDE, EXTRACT_SIDE).data;
+					const counts = /* @__PURE__ */ new Uint32Array(4096);
+					const sums = /* @__PURE__ */ new Float64Array(12288);
+					let totalLum = 0;
+					let sampled = 0;
+					for (let i = 0; i < px.length; i += 4) {
+						const r = px[i], gg = px[i + 1], b = px[i + 2];
+						const max = Math.max(r, gg, b), min = Math.min(r, gg, b);
+						const v = max / 255;
+						const s = max === 0 ? 0 : (max - min) / max;
+						totalLum += (.2126 * r + .7152 * gg + .0722 * b) / 255;
+						sampled++;
+						if (s < .08 || v < .12 || v > .97) continue;
+						const key = r >> 4 << 8 | gg >> 4 << 4 | b >> 4;
+						counts[key]++;
+						sums[key * 3] += r;
+						sums[key * 3 + 1] += gg;
+						sums[key * 3 + 2] += b;
+					}
+					const buckets = [];
+					for (let k = 0; k < 4096; k++) {
+						if (counts[k] === 0) continue;
+						buckets.push({
+							count: counts[k],
+							r: sums[k * 3],
+							g: sums[k * 3 + 1],
+							b: sums[k * 3 + 2],
+							s: (Math.max(sums[k * 3], sums[k * 3 + 1], sums[k * 3 + 2]) - Math.min(sums[k * 3], sums[k * 3 + 1], sums[k * 3 + 2])) / Math.max(sums[k * 3], sums[k * 3 + 1], sums[k * 3 + 2]) || 0
+						});
+					}
+					if (buckets.length === 0) return null;
+					buckets.sort((a, b) => b.count * (.5 + b.s) - a.count * (.5 + a.s));
+					const primary = bucketsToHsl(buckets[0]);
+					const primaryHue = primary[0];
+					let secondary = primary;
+					for (const b of buckets.slice(1)) {
+						const [h] = bucketsToHsl(b);
+						if (Math.abs((h - primaryHue + 540) % 360 - 180) > 30) {
+							secondary = bucketsToHsl(b);
+							break;
 						}
-						let tertiary = [
-							(primaryHue + 180) % 360,
-							Math.min(.7, primary[1]),
-							Math.min(.7, primary[2])
-						];
-						for (const b of buckets.slice(1)) {
-							const [h] = bucketsToHsl(b);
-							const sep = Math.abs((h - primaryHue + 540) % 360 - 180);
-							if (sep > 90 && sep < 150) {
-								tertiary = bucketsToHsl(b);
-								break;
-							}
+					}
+					let tertiary = [
+						(primaryHue + 180) % 360,
+						Math.min(.7, primary[1]),
+						Math.min(.7, primary[2])
+					];
+					for (const b of buckets.slice(1)) {
+						const [h] = bucketsToHsl(b);
+						const sep = Math.abs((h - primaryHue + 540) % 360 - 180);
+						if (sep > 90 && sep < 150) {
+							tertiary = bucketsToHsl(b);
+							break;
 						}
-						const surface = [
-							primaryHue,
-							Math.min(.06, primary[1] * .3),
-							primary[2]
-						];
-						const luminance = sampled > 0 ? totalLum / sampled : primary[2];
-						primary[2] = luminance < .5 ? Math.min(.44, Math.max(.2, primary[2])) : Math.max(.6, Math.min(.82, primary[2]));
-						resolve({
-							primary: [
-								primary[0],
-								Math.min(.9, Math.max(.15, primary[1])),
-								primary[2]
-							],
-							secondary: [
-								secondary[0],
-								Math.min(.85, Math.max(.2, secondary[1])),
-								Math.min(.75, Math.max(.35, secondary[2]))
-							],
-							tertiary: [
-								tertiary[0],
-								Math.min(.8, Math.max(.2, tertiary[1])),
-								Math.min(.7, Math.max(.35, tertiary[2]))
-							],
-							surface,
-							luminance
-						});
-					} catch {
-						resolve(null);
 					}
-				};
-				img.src = dataUrl;
+					const surface = [
+						primaryHue,
+						Math.min(.06, primary[1] * .3),
+						primary[2]
+					];
+					const luminance = sampled > 0 ? totalLum / sampled : primary[2];
+					primary[2] = luminance < .5 ? Math.min(.44, Math.max(.2, primary[2])) : Math.max(.6, Math.min(.82, primary[2]));
+					return {
+						primary: [
+							primary[0],
+							Math.min(.9, Math.max(.15, primary[1])),
+							primary[2]
+						],
+						secondary: [
+							secondary[0],
+							Math.min(.85, Math.max(.2, secondary[1])),
+							Math.min(.75, Math.max(.35, secondary[2]))
+						],
+						tertiary: [
+							tertiary[0],
+							Math.min(.8, Math.max(.2, tertiary[1])),
+							Math.min(.7, Math.max(.35, tertiary[2]))
+						],
+						surface,
+						luminance
+					};
+				} catch {
+					return null;
+				}
 			});
 		}
 		/** Backward-compatible single-color extraction: returns the primary HSL. */
@@ -952,26 +1448,22 @@ window.__ModuleLoader__.load({
 		*  reads dark (use white fonts), false when light (use black fonts), or null
 		*  when the frame cannot be decoded. */
 		function analyzeFrameDark(dataUrl) {
-			return new Promise((resolve) => {
-				const img = new Image();
-				img.onerror = () => resolve(null);
-				img.onload = () => {
-					try {
-						const c = document.createElement("canvas");
-						c.width = ANALYZE_SIDE;
-						c.height = ANALYZE_SIDE;
-						const g = c.getContext("2d", { willReadFrequently: true });
-						g.drawImage(img, 0, 0, ANALYZE_SIDE, ANALYZE_SIDE);
-						const px = g.getImageData(0, 0, ANALYZE_SIDE, ANALYZE_SIDE).data;
-						let lum = 0;
-						const count = px.length / 4;
-						for (let i = 0; i < px.length; i += 4) lum += .2126 * px[i] + .7152 * px[i + 1] + .0722 * px[i + 2];
-						resolve(lum / count / 255 < .5);
-					} catch {
-						resolve(null);
-					}
-				};
-				img.src = dataUrl;
+			return loadImage(dataUrl).then((img) => {
+				if (!img) return null;
+				try {
+					const c = document.createElement("canvas");
+					c.width = ANALYZE_SIDE;
+					c.height = ANALYZE_SIDE;
+					const g = c.getContext("2d", { willReadFrequently: true });
+					g.drawImage(img, 0, 0, ANALYZE_SIDE, ANALYZE_SIDE);
+					const px = g.getImageData(0, 0, ANALYZE_SIDE, ANALYZE_SIDE).data;
+					let lum = 0;
+					const count = px.length / 4;
+					for (let i = 0; i < px.length; i += 4) lum += .2126 * px[i] + .7152 * px[i + 1] + .0722 * px[i + 2];
+					return lum / count / 255 < .5;
+				} catch {
+					return null;
+				}
 			});
 		}
 		/** HSL (h 0-360, s/l 0-1) → RGB (0-255 integers). */
@@ -1013,20 +1505,42 @@ window.__ModuleLoader__.load({
 		function newRaf(canvas, draw) {
 			canvas.dataset.dshAnyCanvas = "1";
 			let running = true;
+			let paused = false;
+			let rafId = 0;
 			let last = 0;
 			draw();
+			if (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return {
+				stop: () => {
+					running = false;
+				},
+				pause: () => void 0,
+				resume: () => void 0
+			};
 			const loop = (ts) => {
-				if (!running) return;
+				if (!running || paused) return;
 				if (ts - last >= FRAME_MS) {
 					last = ts;
 					draw();
 				}
-				requestAnimationFrame(loop);
+				rafId = requestAnimationFrame(loop);
+			};
+			rafId = requestAnimationFrame(loop);
+			return {
+				stop: () => {
+					running = false;
+					cancelAnimationFrame(rafId);
+				},
+				pause: () => {
+					paused = true;
+					cancelAnimationFrame(rafId);
+				},
+				resume: () => {
+					if (!running || !paused) return;
+					paused = false;
+					last = 0;
+					rafId = requestAnimationFrame(loop);
+				}
 			};
-			requestAnimationFrame(loop);
-			return { stop: () => {
-				running = false;
-			} };
 		}
 		function createCanvas() {
 			const c = document.createElement("canvas");
@@ -1041,7 +1555,6 @@ window.__ModuleLoader__.load({
 			};
 		}
 		function fitLiveCanvas(c) {
-			if (c.dataset.dshAnyStatic === "1") return;
 			const { w, h } = liveSize();
 			if (c.width !== w || c.height !== h) {
 				c.width = w;
@@ -1338,6 +1851,43 @@ window.__ModuleLoader__.load({
         col = hueRotate(col, u_seed * 6.28318530718);
         gl_FragColor = vec4(col, 1.0);
       }
+    `;
+			if (preset === "starfield") return common + `
+      float hash21(vec2 p) {
+        p = fract(p * vec2(234.34, 435.345));
+        p += dot(p, p + 34.23);
+        return fract(p.x * p.y);
+      }
+      vec3 starLayer(vec2 uv, float t, float density) {
+        vec3 col = vec3(0.0);
+        vec2 grid = uv * density;
+        vec2 cell = floor(grid);
+        vec2 f = fract(grid) - 0.5;
+        float h = hash21(cell);
+        if (h > 0.8) {
+          vec2 offs = (vec2(hash21(cell + 1.3), hash21(cell + 2.7)) - 0.5) * 0.7;
+          float d = length(f - offs);
+          float tw = 0.35 + 0.65 * sin(t * (1.0 + h * 2.5) + h * 40.0);
+          col += vec3(0.85, 0.92, 1.0) * smoothstep(0.07, 0.0, d) * max(0.0, tw);
+        }
+        return col;
+      }
+      void main() {
+        vec2 uv = gl_FragCoord.xy / u_resolution;
+        vec2 p = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y;
+        float t = u_time * 0.5;
+        vec3 col = mix(vec3(0.012, 0.014, 0.035), vec3(0.035, 0.035, 0.08), uv.y);
+        // Faint drifting nebula veil behind the stars.
+        float n = fbm(vec3(p * 2.2 * u_scale, t * 0.05));
+        col += vec3(0.05, 0.045, 0.11) * smoothstep(0.05, 0.85, n);
+        vec3 stars = vec3(0.0);
+        stars += starLayer(p + vec2(t * 0.006, 0.0), t, 13.0 * u_scale);
+        stars += starLayer(p * 1.8 + vec2(t * 0.013, 3.0), t * 1.25, 27.0 * u_scale);
+        stars += starLayer(p * 3.1 + vec2(t * 0.021, 7.0), t * 0.85, 46.0 * u_scale);
+        col += stars;
+        col = hueRotate(col, u_seed * 6.28318530718);
+        gl_FragColor = vec4(col, 1.0);
+      }
     `;
 			return common + `
     void main() {
@@ -1361,44 +1911,52 @@ window.__ModuleLoader__.load({
 		function createPatternBg(params, canvas) {
 			if (params.preset === "waves") return createWaves(params, canvas);
 			if (params.preset === "poly") return createLowPoly(params, canvas);
+			if (params.preset === "rain") return createRain(params, canvas);
+			if (params.preset === "contour") return createContour(params, canvas);
+			if (params.preset === "meta") return createMeta(params, canvas);
 			return createDots(params, canvas);
 		}
-		function createDots(params, canvas) {
+		function createRain(params, canvas) {
 			const c = canvas ?? createCanvas();
 			fitLiveCanvas(c);
 			const g = c.getContext("2d", { alpha: false });
 			const rng = createRng(params.seed);
 			const dark = rng() < .5;
-			const baseHue = Math.round(rng() * 360);
-			const spacing = Math.max(26, 150 * params.scale / (.25 + params.density));
-			const dots = [];
-			for (let y = 0; y < 8; y++) for (let x = 0; x < 8; x++) dots.push({
-				cx: x / 7,
-				cy: y / 7,
-				r: spacing * .16 * params.scale * (.6 + rng() * .7),
-				hue: (baseHue + rng() * 80) % 360,
-				sat: Math.round(35 + rng() * 55),
-				lit: dark ? Math.round(30 + rng() * 35) : Math.round(55 + rng() * 30),
-				phase: rng() * Math.PI * 2,
-				speed: .5 + rng() * 1.2
+			const hue = Math.round(rng() * 360);
+			const count = Math.round(30 + params.density * 150);
+			const drops = [];
+			for (let i = 0; i < count; i++) drops.push({
+				x: rng(),
+				y: rng(),
+				len: (.035 + rng() * .075) * (.7 + params.scale * .5),
+				speed: (.25 + rng() * .55) * (.6 + params.scale * .5),
+				sat: Math.round(30 + rng() * 40),
+				lit: dark ? Math.round(55 + rng() * 25) : Math.round(40 + rng() * 25),
+				alpha: .12 + rng() * .28,
+				width: .8 + rng() * 1.4
 			});
 			let t = 0;
 			const draw = () => {
 				fitLiveCanvas(c);
 				const w = c.width, h = c.height;
-				g.fillStyle = dark ? "#0a0b0d" : "#f6f7f9";
+				g.fillStyle = dark ? "#07080c" : "#f4f6f9";
 				g.fillRect(0, 0, w, h);
-				for (const d of dots) {
-					const pulse = .75 + .35 * Math.sin(t * d.speed + d.phase);
-					const r = Math.max(1, d.r * pulse);
-					const x = d.cx * w + d.r * .3 * Math.sin(t * d.speed * .5 + d.phase);
-					const y = d.cy * h + d.r * .3 * Math.cos(t * d.speed * .7 + d.phase);
+				for (const d of drops) {
+					const yy = ((d.y + t * d.speed) % 1 + 1) % 1;
+					const x = d.x * w;
+					const y0 = yy * h;
+					const y1 = y0 - d.len * h;
+					const grad = g.createLinearGradient(x, y0, x, y1);
+					grad.addColorStop(0, `hsla(${hue},${d.sat}%,${d.lit}%,${d.alpha.toFixed(2)})`);
+					grad.addColorStop(1, "hsla(0,0%,0%,0)");
+					g.strokeStyle = grad;
+					g.lineWidth = d.width;
 					g.beginPath();
-					g.arc(x, y, r, 0, Math.PI * 2);
-					g.fillStyle = `hsla(${d.hue},${d.sat}%,${d.lit}%,${(.18 + .25 * pulse).toFixed(2)})`;
-					g.fill();
+					g.moveTo(x, y0);
+					g.lineTo(x, y1);
+					g.stroke();
 				}
-				t += .032;
+				t += .016;
 			};
 			return {
 				canvas: c,
@@ -1406,15 +1964,153 @@ window.__ModuleLoader__.load({
 				snapshot: () => c.toDataURL("image/jpeg", .94)
 			};
 		}
-		function createWaves(params, canvas) {
+		function createContour(params, canvas) {
 			const c = canvas ?? createCanvas();
 			fitLiveCanvas(c);
 			const g = c.getContext("2d", { alpha: false });
-			const rng = createRng(params.seed);
+			const noise = createNoise(params.seed);
+			const rng = createRng(params.seed + 1013);
 			const dark = rng() < .5;
 			const hue = Math.round(rng() * 360);
-			const layers = Math.round(5 + params.density * 8);
-			const waves = [];
+			const layers = Math.round(16 + params.density * 46);
+			const freq = .0016 / params.scale;
+			const amp = .055 * params.scale;
+			let t = 0;
+			const draw = () => {
+				fitLiveCanvas(c);
+				const w = c.width, h = c.height;
+				g.fillStyle = dark ? "#0a0b0e" : "#f6f7fa";
+				g.fillRect(0, 0, w, h);
+				const samples = Math.max(60, Math.floor(w / 8));
+				for (let i = 0; i <= layers; i++) {
+					const base = i / layers;
+					const shift = t * .05;
+					g.beginPath();
+					for (let s = 0; s <= samples; s++) {
+						const fx = s / samples;
+						const y = (base + (noise(fx * 60 * freq * 400, i * .22 + shift) - .5) * amp) * h;
+						if (s === 0) g.moveTo(0, y);
+						else g.lineTo(fx * w, y);
+					}
+					const lit = dark ? 20 + i / layers * 22 : 62 - i / layers * 18;
+					g.strokeStyle = `hsla(${(hue + i * 2) % 360},30%,${lit}%,${(.25 + .2 * (i / layers)).toFixed(2)})`;
+					g.lineWidth = 1;
+					g.stroke();
+				}
+				t += .032;
+			};
+			return {
+				canvas: c,
+				...newRaf(c, draw),
+				snapshot: () => c.toDataURL("image/jpeg", .94)
+			};
+		}
+		function createMeta(params, canvas) {
+			const c = canvas ?? createCanvas();
+			fitLiveCanvas(c);
+			const g = c.getContext("2d", { alpha: false });
+			const rng = createRng(params.seed);
+			const dark = rng() < .5;
+			const baseHue = Math.round(rng() * 360);
+			const count = Math.round(5 + params.density * 11);
+			const blobs = [];
+			for (let i = 0; i < count; i++) blobs.push({
+				x: .15 + rng() * .7,
+				y: .15 + rng() * .7,
+				r: (.09 + rng() * .14) * params.scale,
+				ax: .08 + rng() * .22,
+				ay: .08 + rng() * .22,
+				speed: .15 + rng() * .3,
+				phase: rng() * Math.PI * 2,
+				hue: (baseHue + rng() * 70) % 360
+			});
+			let t = 0;
+			const draw = () => {
+				fitLiveCanvas(c);
+				const w = c.width, h = c.height;
+				g.fillStyle = dark ? "#08090d" : "#f5f6f9";
+				g.fillRect(0, 0, w, h);
+				g.globalCompositeOperation = dark ? "lighter" : "multiply";
+				for (const b of blobs) {
+					const cx = (b.x + Math.sin(t * b.speed + b.phase) * b.ax) * w;
+					const cy = (b.y + Math.cos(t * b.speed * .83 + b.phase * 1.7) * b.ay) * h;
+					const r = b.r * Math.min(w, h) * (.9 + .2 * Math.sin(t * b.speed + b.phase));
+					const rad = g.createRadialGradient(cx, cy, 0, cx, cy, r);
+					if (dark) {
+						rad.addColorStop(0, `hsla(${b.hue},65%,58%,0.55)`);
+						rad.addColorStop(.7, `hsla(${b.hue},60%,45%,0.18)`);
+						rad.addColorStop(1, "hsla(0,0%,0%,0)");
+					} else {
+						rad.addColorStop(0, `hsla(${b.hue},55%,70%,0.5)`);
+						rad.addColorStop(.7, `hsla(${b.hue},50%,80%,0.2)`);
+						rad.addColorStop(1, "hsla(0,0%,100%,0)");
+					}
+					g.fillStyle = rad;
+					g.beginPath();
+					g.arc(cx, cy, r, 0, Math.PI * 2);
+					g.fill();
+				}
+				g.globalCompositeOperation = "source-over";
+				t += .03;
+			};
+			return {
+				canvas: c,
+				...newRaf(c, draw),
+				snapshot: () => c.toDataURL("image/jpeg", .94)
+			};
+		}
+		function createDots(params, canvas) {
+			const c = canvas ?? createCanvas();
+			fitLiveCanvas(c);
+			const g = c.getContext("2d", { alpha: false });
+			const rng = createRng(params.seed);
+			const dark = rng() < .5;
+			const baseHue = Math.round(rng() * 360);
+			const spacing = Math.max(26, 150 * params.scale / (.25 + params.density));
+			const dots = [];
+			for (let y = 0; y < 8; y++) for (let x = 0; x < 8; x++) dots.push({
+				cx: x / 7,
+				cy: y / 7,
+				r: spacing * .16 * params.scale * (.6 + rng() * .7),
+				hue: (baseHue + rng() * 80) % 360,
+				sat: Math.round(35 + rng() * 55),
+				lit: dark ? Math.round(30 + rng() * 35) : Math.round(55 + rng() * 30),
+				phase: rng() * Math.PI * 2,
+				speed: .5 + rng() * 1.2
+			});
+			let t = 0;
+			const draw = () => {
+				fitLiveCanvas(c);
+				const w = c.width, h = c.height;
+				g.fillStyle = dark ? "#0a0b0d" : "#f6f7f9";
+				g.fillRect(0, 0, w, h);
+				for (const d of dots) {
+					const pulse = .75 + .35 * Math.sin(t * d.speed + d.phase);
+					const r = Math.max(1, d.r * pulse);
+					const x = d.cx * w + d.r * .3 * Math.sin(t * d.speed * .5 + d.phase);
+					const y = d.cy * h + d.r * .3 * Math.cos(t * d.speed * .7 + d.phase);
+					g.beginPath();
+					g.arc(x, y, r, 0, Math.PI * 2);
+					g.fillStyle = `hsla(${d.hue},${d.sat}%,${d.lit}%,${(.18 + .25 * pulse).toFixed(2)})`;
+					g.fill();
+				}
+				t += .032;
+			};
+			return {
+				canvas: c,
+				...newRaf(c, draw),
+				snapshot: () => c.toDataURL("image/jpeg", .94)
+			};
+		}
+		function createWaves(params, canvas) {
+			const c = canvas ?? createCanvas();
+			fitLiveCanvas(c);
+			const g = c.getContext("2d", { alpha: false });
+			const rng = createRng(params.seed);
+			const dark = rng() < .5;
+			const hue = Math.round(rng() * 360);
+			const layers = Math.round(5 + params.density * 8);
+			const waves = [];
 			for (let i = 0; i < layers; i++) waves.push({
 				yBase: .25 + i / layers * .55,
 				amp: (25 + rng() * 45) * params.scale,
@@ -1567,6 +2263,14 @@ window.__ModuleLoader__.load({
 		let wpController = null;
 		let snapshotListener = null;
 		let tokenStyleEl = null;
+		/** Pause the live generated background's animation loop (session-only). */
+		function pauseGeneratedBg() {
+			wpController?.pause?.();
+		}
+		/** Resume the live generated background's animation loop. */
+		function resumeGeneratedBg() {
+			wpController?.resume?.();
+		}
 		function clearDynamicBg() {
 			wpController?.stop();
 			wpController?.canvas.remove();
@@ -1589,10 +2293,20 @@ window.__ModuleLoader__.load({
 			for (const name of appliedTokenNames) document.body.style.removeProperty(name);
 			appliedTokenNames = [];
 		}
-		/** Label tokens flipped by the generated-background brightness verdict. The
-		*  faint tiers (caption/dimmed) are deliberately NOT flipped: they back
-		*  placeholder/hint text, which must stay visibly weaker than real input even
-		*  when the wallpaper brightness flips the main label direction. */
+		/** Drop every applied custom token and forget the token fingerprint, so a
+		*  later color-less profile (system theme) leaves no stale rule behind. */
+		function clearThemeTokens() {
+			clearCustomTokens();
+			baseTokenKey = "";
+			lastBgKey = "";
+			document.body.removeAttribute("data-ds-dark-theme");
+			document.body.style.removeProperty("color-scheme");
+		}
+		/** Label tokens flipped by the background brightness verdict. The faint tiers
+		*  (caption/dimmed) are deliberately NOT flipped: they back placeholder/hint
+		*  text, which must stay visibly weaker than real input even when the wallpaper
+		*  brightness flips the main label direction. Exported so the skin registration
+		*  (index) can flip fonts through the host theme service too. */
 		const LABEL_TOKENS = [
 			"--dsw-alias-label-primary",
 			"--dsw-alias-label-secondary",
@@ -1645,19 +2359,41 @@ window.__ModuleLoader__.load({
 			});
 		}
 		let lastBgKey = "";
+		/** Palette source for the token rule: the picked color; a forced scheme
+		*  without a picked color builds a neutral near-gray palette in that
+		*  direction; auto without a color keeps the host's own palette (null — only
+		*  the label direction gets asserted). The palette direction follows the
+		*  color's own lightness (rColorScheme), not the wallpaper verdict, so the
+		*  surfaces keep contrasting with the fonts. */
+		function paletteTokens() {
+			const scheme = rColorScheme();
+			if (rHasColor()) {
+				const [h, s, l] = rColor();
+				return genTokens(h, s, l, scheme).tokens;
+			}
+			if (rSchemeOverride() !== "auto") return genTokens(220, .04, scheme === "dark" ? .14 : .92, scheme).tokens;
+			return null;
+		}
 		function applyCustomTokensNow(ops) {
+			const hasColor = rHasColor();
+			const override = rSchemeOverride();
 			const [h, s, l] = rColor();
-			let { tokens } = genTokens(h, s, l);
-			try {
-				const dark = rBgDark();
-				if (dark !== null) {
-					tokens = { ...tokens };
-					const font = dark ? "#fff" : "#000";
+			const scheme = rScheme();
+			const verdict = rBgDark();
+			const palette = paletteTokens();
+			const tokens = { ...palette };
+			if (override === "auto") {
+				const fontDark = hasColor ? rColorScheme() === "dark" : verdict;
+				if (fontDark !== null && fontDark !== void 0) {
+					const font = fontDark ? "#fff" : "#000";
 					for (const name of LABEL_TOKENS) tokens[name] = font;
 				}
-				const forceDark = dark ?? l < .55;
-				if (`${h}|${s}|${l}|${dark}` !== baseTokenKey) {
-					baseTokenKey = `${h}|${s}|${l}|${dark}`;
+			}
+			try {
+				const forceDark = scheme === "dark";
+				const key = `${h}|${s}|${l}|${verdict}|${scheme}|${hasColor}`;
+				if (key !== baseTokenKey) {
+					baseTokenKey = key;
 					if (forceDark) document.body.setAttribute("data-ds-dark-theme", "dsh-any-background");
 					else document.body.removeAttribute("data-ds-dark-theme");
 					const decls = [`color-scheme:${forceDark ? "dark" : "light"}`];
@@ -1669,6 +2405,7 @@ window.__ModuleLoader__.load({
 					for (const name of appliedTokenNames) document.body.style.removeProperty(name);
 					appliedTokenNames = Object.keys(tokens);
 				}
+				if (palette === null) return;
 				const root = document.documentElement;
 				for (const g of OPACITY_TOKEN_GROUPS) for (const name of g.names) root.style.setProperty(OPACITY_VARS[name], toRgba(tokens[name] ?? "#000", ops[g.part]));
 				root.style.setProperty("--dsh-any-op-menu-cordis", toRgba(tokens["--dsw-specific-menu"] ?? "#000", ops.input));
@@ -1686,9 +2423,17 @@ window.__ModuleLoader__.load({
 			if (px > 0) document.documentElement.style.setProperty("--dsh-any-input-blur", `blur(${px}px)`);
 			else document.documentElement.style.removeProperty("--dsh-any-input-blur");
 		}
+		const MOBILE_HEADER_RULE = ".dsh-mobile-app-header{background:var(--dsh-any-op-bg,transparent)!important;backdrop-filter:var(--dsh-any-part-blur-global,none);-webkit-backdrop-filter:var(--dsh-any-part-blur-global,none)}";
+		/** Mirror of the bg-part blur on :root. --dsh-any-part-blur is element-scoped
+		*  to the columns, so surfaces outside their subtree (the mobile header, or
+		*  third-party styles) can never inherit it. */
+		function applyBgBlurGlobal(px) {
+			if (px > 0) document.documentElement.style.setProperty("--dsh-any-part-blur-global", `blur(${px}px)`);
+			else document.documentElement.style.removeProperty("--dsh-any-part-blur-global");
+		}
 		function applySettingsOverrides(op) {
 			const [h, s, l] = rColor();
-			const tokens = genTokens(h, s, l).tokens;
+			const tokens = genTokens(h, s, l, rColorScheme()).tokens;
 			const layer1 = tokens["--dsw-alias-bg-layer-1"];
 			const layer2 = tokens["--dsw-alias-bg-layer-2"];
 			const layer3 = tokens["--dsw-alias-bg-layer-3"];
@@ -1700,7 +2445,7 @@ window.__ModuleLoader__.load({
 		const TRAJECTORY_STYLE_RULE = "[data-conversation-composer-overlay]{--dsw-alias-bg-layer-1:var(--dsh-any-traj-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-traj-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-traj-layer-3)}";
 		function applyTrajectoryOverrides(op) {
 			const [h, s, l] = rColor();
-			const tokens = genTokens(h, s, l).tokens;
+			const tokens = genTokens(h, s, l, rColorScheme()).tokens;
 			const layer1 = tokens["--dsw-alias-bg-layer-1"];
 			const layer2 = tokens["--dsw-alias-bg-layer-2"];
 			const layer3 = tokens["--dsw-alias-bg-layer-3"];
@@ -1708,6 +2453,14 @@ window.__ModuleLoader__.load({
 			if (layer2 !== void 0) document.documentElement.style.setProperty("--dsh-any-traj-layer-2", toRgba(layer2, op));
 			if (layer3 !== void 0) document.documentElement.style.setProperty("--dsh-any-traj-layer-3", toRgba(layer3, op));
 		}
+		/** Register a callback fired when a wallpaper-extracted theme color is
+		*  adopted by the auto-adaptation path, so the section can re-register the
+		*  host skin, sync the editor UI and persist the pick (wallpaper.ts cannot
+		*  do those itself — they live in the section). */
+		let colorAdoptedListener = null;
+		function onColorAdopted(cb) {
+			colorAdoptedListener = cb;
+		}
 		/** Apply the theme color: use the saved pick directly, or fall back to
 		*  extracting a dominant color from the current wallpaper. */
 		function applyThemeColor() {
@@ -1716,11 +2469,16 @@ window.__ModuleLoader__.load({
 				return;
 			}
 			const url = rWp();
-			if (url) extractWallpaperColor(url, cfg.backgroundType === "video" ? rVideoBgState() : rBgState()).then((hsl) => {
-				if (hsl) cfg.color = hsl;
+			if (url) {
 				applyWp();
-			});
-			else applyWp();
+				extractWallpaperColor(url, cfg.backgroundType === "video" ? rVideoBgState() : rBgState()).then((hsl) => {
+					if (hsl && rWp() === url) {
+						cfg.color = hsl;
+						colorAdoptedListener?.(hsl);
+					}
+					applyWp();
+				});
+			} else applyWp();
 		}
 		/** Switch the background source type. For generated types a new live canvas is
 		*  attached to the wallpaper layer and a snapshot is kept for the store/preview. */
@@ -1782,7 +2540,7 @@ window.__ModuleLoader__.load({
 				setBgDark(null);
 				analyzeFrameDark(frame).then((dark) => {
 					if (dark === null || wpController !== controller) return;
-					setBgDark(dark);
+					applyVerdict(dark);
 					applyCustomTokens(rOps());
 				});
 			});
@@ -1848,11 +2606,11 @@ window.__ModuleLoader__.load({
 		*  reducing the main-bg opacity stacked a second alpha onto the sidebar; moving
 		*  the alpha onto the columns keeps the sidebar owned by its own slider. */
 		function applyPartOpacities(ops) {
-			if (!(rHasColor() || rBgDark() !== null)) return;
+			const tokens = paletteTokens();
+			if (tokens === null) return;
 			discoverParts();
 			if (frameEl === null) return;
-			const [h, s, l] = rColor();
-			const base = genTokens(h, s, l).tokens["--dsw-alias-bg-base"];
+			const base = tokens["--dsw-alias-bg-base"];
 			frameEl.style.background = "transparent";
 			if (centerEl !== null) centerEl.style.background = base !== void 0 ? toRgba(base, ops.bg) : "transparent";
 			if (detailsEl !== null) detailsEl.style.background = base !== void 0 ? toRgba(base, ops.bg) : "transparent";
@@ -1872,6 +2630,7 @@ window.__ModuleLoader__.load({
 			setBlur(sidebarEl, blurs.sidebar);
 			setBlur(centerEl, blurs.bg);
 			setBlur(detailsEl, blurs.bg);
+			applyBgBlurGlobal(blurs.bg);
 			applyCardPanelsBlur(blurs.card);
 			applySettingsBlur(blurs.settings);
 			applyInputBlur(blurs.input);
@@ -1899,6 +2658,7 @@ window.__ModuleLoader__.load({
 			if (part === "bg") {
 				setBlur(centerEl, v);
 				setBlur(detailsEl, v);
+				applyBgBlurGlobal(v);
 			} else setBlur(sidebarEl, v);
 		}
 		const VIEW_CARDS = [{
@@ -2071,7 +2831,7 @@ window.__ModuleLoader__.load({
 			discoverParts();
 			if (centerEl === null) return;
 			const [h, s, l] = rColor();
-			const surface = genTokens(h, s, l).tokens["--dsw-alias-bg-layer-1"];
+			const surface = genTokens(h, s, l, rColorScheme()).tokens["--dsw-alias-bg-layer-1"];
 			VIEW_CARDS.forEach((spec, i) => {
 				const target = discoverViewTarget(i, spec);
 				if (target === null) return;
@@ -2114,8 +2874,7 @@ window.__ModuleLoader__.load({
 		let themeObserver = null;
 		let themeRaf = 0;
 		function reassertScheme() {
-			const [, , l] = rColor();
-			if (rBgDark() ?? l < .55) document.body.setAttribute("data-ds-dark-theme", "dsh-any-background");
+			if (rScheme() === "dark") document.body.setAttribute("data-ds-dark-theme", "dsh-any-background");
 			else document.body.removeAttribute("data-ds-dark-theme");
 			applyCustomTokens(rOps());
 		}
@@ -2126,7 +2885,7 @@ window.__ModuleLoader__.load({
 			if (themeObserver !== null || typeof MutationObserver === "undefined") return () => void 0;
 			themeObserver = new MutationObserver(() => {
 				if (document.body.getAttribute("data-ds-dark-theme") === "dsh-any-background") return;
-				if (!(rHasColor() || rBgDark() !== null)) return;
+				if (!(rHasColor() || rBgDark() !== null || rSchemeOverride() !== "auto")) return;
 				if (themeRaf !== 0) return;
 				themeRaf = requestAnimationFrame(() => {
 					themeRaf = 0;
@@ -2169,17 +2928,18 @@ window.__ModuleLoader__.load({
 				cb(imgNat.w, imgNat.h);
 				return;
 			}
-			const img = new Image();
-			img.onload = () => {
+			loadImage(url).then((img) => {
+				if (!img) {
+					cb(0, 0);
+					return;
+				}
 				imgNat = {
 					url,
 					w: img.naturalWidth,
 					h: img.naturalHeight
 				};
 				cb(img.naturalWidth, img.naturalHeight);
-			};
-			img.onerror = () => cb(0, 0);
-			img.src = url;
+			});
 		}
 		const DRAG_MAX_SIDE = 720;
 		let lowResUrl = null;
@@ -2190,8 +2950,11 @@ window.__ModuleLoader__.load({
 				cb(lowResUrl);
 				return;
 			}
-			const img = new Image();
-			img.onload = () => {
+			loadImage(url).then((img) => {
+				if (!img) {
+					cb(null);
+					return;
+				}
 				const k = Math.min(1, DRAG_MAX_SIDE / Math.max(img.naturalWidth, img.naturalHeight));
 				if (k >= 1) {
 					lowResFor = url;
@@ -2214,9 +2977,7 @@ window.__ModuleLoader__.load({
 				lowResFor = url;
 				lowResUrl = low;
 				cb(low);
-			};
-			img.onerror = () => cb(null);
-			img.src = url;
+			});
 		}
 		function setDragLow(on) {
 			if (cfg.backgroundType !== "image" || on === dragLow || !wpEl) return;
@@ -2253,6 +3014,40 @@ window.__ModuleLoader__.load({
 				if (dragLow) setDragLow(false);
 			};
 		}
+		let wpVerdict = null;
+		let verdictListener = null;
+		let verdictGen = 0;
+		/** Register a callback fired when the background brightness verdict CHANGES
+		*  (a new wallpaper was analyzed, a generated bg regenerated), so the skin can
+		*  be re-registered through the host theme service. */
+		function onVerdictApplied(cb) {
+			verdictListener = cb;
+		}
+		function applyVerdict(dark) {
+			if (rBgDark() === dark) return;
+			setBgDark(dark);
+			if (dark !== null) verdictListener?.();
+		}
+		function updateWpVerdict(url) {
+			const gen = ++verdictGen;
+			if (url === null) {
+				applyVerdict(null);
+				return;
+			}
+			if (wpVerdict !== null && wpVerdict.url === url) {
+				applyVerdict(wpVerdict.dark);
+				return;
+			}
+			analyzeFrameDark(url).then((dark) => {
+				if (dark === null || gen !== verdictGen) return;
+				wpVerdict = {
+					url,
+					dark
+				};
+				applyVerdict(dark);
+				applyCustomTokens(rOps());
+			});
+		}
 		function applyImageWp(url) {
 			clearDynamicBg();
 			clearVideoEl();
@@ -2299,6 +3094,7 @@ window.__ModuleLoader__.load({
 			}
 			captureLowRes(url, () => void 0);
 			applyWpEffects();
+			updateWpVerdict(url);
 		}
 		/** Video wallpaper: a muted looping <video> inside the wallpaper layer.
 		*  Placement modes map onto object-fit (tile has no video equivalent and
@@ -2335,6 +3131,7 @@ window.__ModuleLoader__.load({
 				videoEl.style.objectFit = mode === "stretch" ? "fill" : mode === "fill" || mode === "tile" ? "cover" : "contain";
 			}
 			applyWpEffects();
+			updateWpVerdict(rWp());
 		}
 		function applyWpEffects() {
 			if (!wpEl) return;
@@ -2368,8 +3165,11 @@ window.__ModuleLoader__.load({
 				clearVideoEl();
 				wpEl?.remove();
 				wpEl = null;
+				wpVerdict = null;
+				setBgDark(null);
 			}
-			if (rHasColor() || rBgDark() !== null) applyCustomTokens(rOps());
+			if (rHasColor() || rBgDark() !== null || rSchemeOverride() !== "auto") applyCustomTokens(rOps());
+			else if (!url) clearThemeTokens();
 			if (rHasColor()) {
 				applySettingsOverrides(rSop());
 				applyTrajectoryOverrides(rTrajectoryOpacity());
@@ -2381,6 +3181,7 @@ window.__ModuleLoader__.load({
 			clearVideoEl();
 			disposeVideoObjectUrl();
 			setBgDark(null);
+			wpVerdict = null;
 			wpEl?.remove();
 			wpEl = null;
 			clearCustomTokens();
@@ -2400,6 +3201,7 @@ window.__ModuleLoader__.load({
 			document.documentElement.style.removeProperty("--dsh-any-blur-settings");
 			document.documentElement.style.removeProperty("--dsh-any-blur-card-panels");
 			document.documentElement.style.removeProperty("--dsh-any-input-blur");
+			document.documentElement.style.removeProperty("--dsh-any-part-blur-global");
 			for (const v of Object.values(OPACITY_VARS)) document.documentElement.style.removeProperty(v);
 			baseTokenKey = "";
 			lastBgKey = "";
@@ -2559,6 +3361,7 @@ window.__ModuleLoader__.load({
 .dab-urlinput{flex:1;min-width:180px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-size:12.5px;outline:none;transition:border-color .2s}
 .dab-urlinput::placeholder{color:var(--dsw-alias-label-quaternary)}
 .dab-urlinput:focus{border-color:var(--dsw-alias-brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-brand-primary) 18%,transparent)}
+.dab-urlrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;animation:dab-list-in .3s cubic-bezier(.22,1,.36,1) both}
 .dab-swatch-lg{height:38px;border-radius:10px;border:1px solid var(--dsw-alias-border-l2);box-shadow:inset 0 0 14px rgba(0,0,0,.1);transition:transform .3s ease}
 .dab-swatch-lg:hover{transform:scale(1.02)}
 
@@ -2569,11 +3372,19 @@ window.__ModuleLoader__.load({
 .dab-btn:disabled{opacity:.5;cursor:not-allowed}
 .dab-btn-primary{background:var(--dsw-alias-brand-primary);color:var(--dsw-alias-brand-text);border-color:transparent}
 .dab-btn-danger{color:var(--dsw-alias-state-error-primary)}
+.dab-btn-danger-solid{background:var(--dsw-alias-state-error-primary);color:#fff;border-color:transparent}
+.dab-btn-danger-solid:hover:not(:disabled){background:color-mix(in srgb,var(--dsw-alias-state-error-primary) 85%,#000)}
 .dab-btn-ghost{background:transparent;border-color:transparent;color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary))}
 .dab-btn-ghost:hover:not(:disabled){background:var(--dsw-alias-bg-layer-2);box-shadow:none}
+/* Soft solid button: subtle layer background instead of transparent ghost. */
+.dab-btn-soft{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary))}
+.dab-btn-soft:hover:not(:disabled){background:var(--dsw-alias-bg-layer-3,var(--dsw-alias-bg-layer-2));color:var(--dsw-alias-label-primary)}
+/* White background with error-red text (inverse of danger-solid). */
+.dab-btn-danger-inverted{background:#fff;color:var(--dsw-alias-state-error-primary);border-color:transparent}
+.dab-btn-danger-inverted:hover:not(:disabled){background:#f3f4f6}
 .dab-btn:focus-visible,.dab-nav-item:focus-visible,.dab-seg-item:focus-visible,.dab-swatch:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
 .dab-chip-row{display:flex;flex-wrap:wrap;gap:8px}
-.dab-chip{height:30px;padding:0 14px;border-radius:99px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary));font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .22s ease}
+.dab-chip{height:30px;padding:0 14px;border-radius:99px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary));font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background-color .22s ease,border-color .22s ease,color .22s ease}
 .dab-chip:hover{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-label-primary)}
 .dab-chip.is-active{background:var(--dsw-alias-brand-primary);color:var(--dsw-alias-brand-text);border-color:transparent}
 
@@ -2623,7 +3434,7 @@ window.__ModuleLoader__.load({
 
 /* ── generated background type cards ─────────────────────────────────────── */
 .dab-types{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
-.dab-type{position:relative;border:1.5px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:14px;padding:10px;cursor:pointer;text-align:left;font:inherit;transition:border-color .25s,transform .25s,box-shadow .25s}
+.dab-type{position:relative;border:1.5px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:14px;padding:10px;cursor:pointer;text-align:left;font:inherit;transition:border-color .25s,transform .25s,box-shadow .25s;animation:dab-type-in .42s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 60ms)}
 .dab-type:hover{transform:translateY(-2px)}
 .dab-type.is-active{border-color:var(--dsw-alias-brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-brand-primary) 18%,transparent)}
 .dab-type-thumb{height:62px;border-radius:9px;overflow:hidden;position:relative}
@@ -2651,6 +3462,52 @@ window.__ModuleLoader__.load({
 .dab-footer{margin-top:6px;padding:14px 4px 0;border-top:1px solid var(--dsw-alias-border-l2);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--dsw-alias-label-tertiary)}
 .dab-footer-mono{font-family:var(--dab-mono);letter-spacing:.02em}
 
+/* ── presets / profiles / schedule / rotation ────────────────────────────── */
+.dab-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
+.dab-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
+.dab-preset{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px;border:1.5px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:13px;cursor:pointer;font:inherit;text-align:left;transition:border-color .25s,transform .25s,box-shadow .25s;animation:dab-row-in .34s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 45ms)}
+.dab-preset:hover{transform:translateY(-2px);border-color:var(--dsw-alias-brand-primary);box-shadow:0 8px 22px -12px rgba(0,0,0,.3)}
+.dab-preset-dot{width:22px;height:22px;border-radius:50%;margin-bottom:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 4px 10px -4px rgba(0,0,0,.35);background:var(--dsw-alias-bg-layer-2);display:grid;place-items:center;color:var(--dsw-alias-label-tertiary)}
+.dab-preset-name{font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-primary)}
+.dab-preset-desc{font-size:10.5px;line-height:1.45;color:var(--dsw-alias-label-tertiary)}
+.dab-profile-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;animation:dab-list-in .38s cubic-bezier(.22,1,.36,1) both}
+.dab-profile-row{display:flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-alias-bg-layer-2);animation:dab-row-in .34s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 45ms);transition:border-color .22s ease,background .22s ease}
+.dab-profile-row:hover{border-color:color-mix(in srgb,var(--dsw-alias-brand-primary) 28%,transparent);background:color-mix(in srgb,var(--dsw-alias-label-primary) 4%,var(--dsw-alias-bg-layer-2))}
+.dab-profile-row.is-active{border-color:color-mix(in srgb,var(--dsw-alias-brand-primary) 45%,transparent);background:color-mix(in srgb,var(--dsw-alias-brand-primary) 7%,var(--dsw-alias-bg-layer-2))}
+.dab-profile-dot{width:22px;height:22px;flex:none;border-radius:50%;background:var(--dsw-alias-bg-layer-1);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);display:grid;place-items:center;color:var(--dsw-alias-label-tertiary)}
+.dab-profile-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
+.dab-profile-name{font-size:12.5px;font-weight:600;color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dab-profile-sub{font-family:var(--dab-mono);font-size:10px;color:var(--dsw-alias-label-tertiary)}
+.dab-btn-confirm{background:var(--dsw-alias-state-error-primary)!important;color:#fff!important;border-color:transparent!important}
+.dab-select{height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-size:12px;outline:none;cursor:pointer;max-width:180px}
+.dab-select:focus{border-color:var(--dsw-alias-brand-primary)}
+.dab-timeinput{height:32px;padding:0 8px;border-radius:9px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-family:var(--dab-mono);font-size:12px;outline:none}
+.dab-timeinput:focus{border-color:var(--dsw-alias-brand-primary)}
+/* Collapsible panel: animates grid-template-rows 0fr→1fr so the schedule
+   block unfolds to its content height instead of popping in. visibility
+   flips after the fold finishes (and instantly on open) so hidden inputs
+   are never focusable. */
+.dab-schedule-wrap{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .42s}
+.dab-schedule-wrap.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1)}
+.dab-schedule-clip{overflow:hidden;min-height:0;opacity:0;transition:opacity .28s ease}
+.dab-schedule-wrap.is-open .dab-schedule-clip{opacity:1;transition:opacity .32s ease .1s}
+.dab-schedule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding-top:12px}
+.dab-schedule-cell{min-width:0;animation:dab-row-in .34s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 60ms)}
+.dab-time-row{display:flex;flex-direction:column;gap:9px}
+.dab-time-label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary))}
+.dab-time-label svg{color:var(--dsw-alias-brand-primary);flex:none}
+.dab-time-label .dab-select,.dab-time-label .dab-timeinput{flex:1;min-width:0}
+.dab-thumbstrip{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
+.dab-thumb{position:relative;width:64px;height:44px;border-radius:9px;overflow:hidden;border:1.5px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);display:grid;place-items:center;color:var(--dsw-alias-label-tertiary);animation:dab-list-in .3s cubic-bezier(.22,1,.36,1) both}
+.dab-thumb.is-current{border-color:var(--dsw-alias-brand-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--dsw-alias-brand-primary) 25%,transparent)}
+.dab-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
+.dab-thumb-x{position:absolute;top:2px;right:2px;width:16px;height:16px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .18s ease,background .18s ease;padding:0}
+.dab-thumb:hover .dab-thumb-x{opacity:1}
+.dab-thumb-x:hover{background:var(--dsw-alias-state-error-primary)}
+.dab-thumb-add{border-style:dashed;cursor:pointer;background:transparent;color:var(--dsw-alias-label-tertiary);font:inherit;transition:border-color .22s ease,color .22s ease}
+.dab-thumb-add:hover{border-color:var(--dsw-alias-brand-primary);color:var(--dsw-alias-brand-primary)}
+.dab-chip-sep{width:1px;height:18px;background:var(--dsw-alias-border-l2);margin:0 4px;flex:none}
+
 /* ── toast ───────────────────────────────────────────────────────────────── */
 .dab-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:99px;background:var(--dsw-alias-bg-layer-3,var(--dsw-alias-bg-layer-2));border:1px solid var(--dsw-alias-border-l2);box-shadow:0 10px 30px -8px rgba(0,0,0,.38);font-size:12.5px;z-index:10001;animation:dab-toast-in .32s cubic-bezier(.22,1,.36,1) both}
 .dab-toast-ok{color:var(--dsw-alias-brand-primary);display:grid;place-items:center}
@@ -2675,6 +3532,9 @@ window.__ModuleLoader__.load({
 @keyframes dab-fade-in{from{opacity:0}to{opacity:1}}
 @keyframes dab-page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
 @keyframes dab-rise-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
+@keyframes dab-list-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
+@keyframes dab-row-in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
+@keyframes dab-type-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
 @keyframes dab-orb-in{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
 @keyframes dab-spin{to{transform:rotate(360deg)}}
 @keyframes dab-rotate{to{transform:rotate(360deg)}}
@@ -2958,6 +3818,40 @@ window.__ModuleLoader__.load({
 				rx: "2"
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 6.6v2M7 8h2" })]
 		});
+		const PlusIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
+			size,
+			className,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 3v10M3 8h10" })
+		});
+		const MoonIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
+			size,
+			className,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M13.2 9.6A5.6 5.6 0 0 1 6.4 2.8a5.6 5.6 0 1 0 6.8 6.8z" })
+		});
+		const ClockIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
+			size,
+			className,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+				cx: "8",
+				cy: "8",
+				r: "5.8"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 4.8V8l2.2 1.6" })]
+		});
+		const XIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
+			size,
+			className,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" })
+		});
+		const PlayIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
+			size,
+			className,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.2 3.4l7.4 4.6-7.4 4.6V3.4z" })
+		});
+		const PauseIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
+			size,
+			className,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.4 3.4v9.2M10.6 3.4v9.2" })
+		});
 		//#endregion
 		//#region src/client/components/ErrorBoundary.tsx
 		/**
@@ -3600,12 +4494,13 @@ window.__ModuleLoader__.load({
 			return "#" + rgb.map((v) => Math.round(v).toString(16).padStart(2, "0")).join("");
 		}
 		function ColorPage({ p, notify }) {
-			const { t, hue, sat, lit, setColor, extractColor, useStore } = p;
-			const store = useStore((s) => s);
-			const storeUrl = store.url;
+			const { t, hue, sat, lit, setColor, extractColor, setSchemeOverride, useStore } = p;
+			const storeUrl = useStore((s) => s.url);
+			const schemeOverride = useStore((s) => s.schemeOverride);
+			const color = useStore((s) => s.color);
 			const [pickerOpen, setPickerOpen] = (0, react.useState)(false);
 			const [extracting, setExtracting] = (0, react.useState)(false);
-			const wheel = store.color ?? [
+			const wheel = color ?? [
 				hue,
 				sat,
 				lit
@@ -3748,6 +4643,49 @@ window.__ModuleLoader__.load({
 						})
 					})]
 				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "dab-card dab-rise",
+					style: { "--d": 4 },
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-swatch-title",
+							children: t("schemeTitle")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-seg",
+							style: { "--w": "86px" },
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-seg-thumb",
+									style: { transform: `translateX(${schemeOverride === "light" ? 0 : schemeOverride === "dark" ? 86 : 172}px)` }
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: `dab-seg-item${schemeOverride === "light" ? " is-active" : ""}`,
+									onClick: () => setSchemeOverride("light"),
+									children: t("schemeLight")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: `dab-seg-item${schemeOverride === "dark" ? " is-active" : ""}`,
+									onClick: () => setSchemeOverride("dark"),
+									children: t("schemeDark")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: `dab-seg-item${schemeOverride === "auto" ? " is-active" : ""}`,
+									onClick: () => setSchemeOverride("auto"),
+									children: t("schemeAuto")
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginTop: 10 },
+							children: t("schemeHint")
+						})
+					]
+				}),
 				pickerOpen && storeUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPicker, {
 					url: storeUrl,
 					t,
@@ -3989,20 +4927,6 @@ window.__ModuleLoader__.load({
 			})] });
 		}
 		//#endregion
-		//#region src/client/utils/image.ts
-		/**
-		* Read a chosen image file as a data URL WITHOUT re-encoding: the original
-		* pixels are kept as-is (no canvas downscale / JPEG re-compression), so the
-		* wallpaper is stored and displayed at full fidelity. The tradeoff is a larger
-		* payload over the RPC channel and on disk for big images.
-		*/
-		function readImg(file, cb) {
-			const r = new FileReader();
-			r.onerror = () => cb(null);
-			r.onload = () => cb(r.result);
-			r.readAsDataURL(file);
-		}
-		//#endregion
 		//#region src/client/components/BgEditor.tsx
 		/** Placement slot for the active background type: video framing lives in its
 		*  own state so image and video edits never overwrite each other. */
@@ -4218,16 +5142,18 @@ window.__ModuleLoader__.load({
 			}
 		];
 		function BackgroundPage({ p }) {
-			const { t, setWp, setVideo, setWop, setBl, setBgType, setGeneratedBg, regenerateBg, setRegenerateOnReload, useStore } = p;
-			const store = useStore((s) => s);
-			const storeUrl = store.url;
-			const backgroundType = store.backgroundType;
-			const generatedBg = store.generatedBg;
-			const regenerateOnReload = store.regenerateOnReload;
+			const { t, setWpFromServer, setVideo, setWop, setBl, setBgType, setGeneratedBg, regenerateBg, setRegenerateOnReload, setRotation, addRotationItems, removeRotationItem, rotateNow, setVideoFromUrl, useStore } = p;
+			const storeUrl = useStore((s) => s.url);
+			const backgroundType = useStore((s) => s.backgroundType);
+			const generatedBg = useStore((s) => s.generatedBg);
+			const regenerateOnReload = useStore((s) => s.regenerateOnReload);
+			const rotation = useStore((s) => s.rotation);
 			const fileRef = (0, react.useRef)(null);
+			const rotFileRef = (0, react.useRef)(null);
 			const [editorOpen, setEditorOpen] = (0, react.useState)(false);
 			const [dragOver, setDragOver] = (0, react.useState)(false);
 			const [spinTick, setSpinTick] = (0, react.useState)(0);
+			const [rotBusy, setRotBusy] = (0, react.useState)(false);
 			const [urlOpen, setUrlOpen] = (0, react.useState)(false);
 			const [urlVal, setUrlVal] = (0, react.useState)("");
 			const [urlBusy, setUrlBusy] = (0, react.useState)(false);
@@ -4237,13 +5163,22 @@ window.__ModuleLoader__.load({
 			const isStatic = backgroundType === "image" || isVideo;
 			const isGenerated = !isStatic;
 			const activeGenType = isGenerated && generatedBg ? generatedBg.type : "mesh";
+			const [paused, setPaused] = (0, react.useState)(false);
+			const genPreset = generatedBg !== null && generatedBg.type !== "mesh" ? generatedBg.preset : void 0;
+			(0, react.useEffect)(() => {
+				setPaused(false);
+			}, [
+				activeGenType,
+				genPreset,
+				generatedBg?.seed
+			]);
 			const onFileSelect = (f) => {
 				if (f.type.startsWith("video/")) {
 					setVideo(f, f.type);
 					return;
 				}
-				readImg(f, (d) => {
-					if (d) setWp(d);
+				uploadWallpaper(f).then((ok) => {
+					if (ok) setWpFromServer(WALLPAPER_SERVE_URL);
 				});
 			};
 			const onDrop = (e) => {
@@ -4261,12 +5196,17 @@ window.__ModuleLoader__.load({
 				setUrlBusy(true);
 				setUrlErr(null);
 				const r = await setWallpaperFromUrl(u);
-				setUrlBusy(false);
 				if (r.ok) {
-					setWp(r.dataUrl ?? null);
+					setWpFromServer(r.wallpaperUrl ?? null);
 					setUrlOpen(false);
 					setUrlVal("");
+				} else if (r.error === "not an image") {
+					if (await setVideoFromUrl(u)) {
+						setUrlOpen(false);
+						setUrlVal("");
+					} else setUrlErr(t("bgUrlVideoFail"));
 				} else setUrlErr(r.error === "invalid url" || r.error === "unsupported scheme" ? t("bgUrlBadHttp") : r.error ?? t("bgUrlFail"));
+				setUrlBusy(false);
 			};
 			const switchToStatic = () => {
 				if (isStatic) return;
@@ -4281,10 +5221,12 @@ window.__ModuleLoader__.load({
 			};
 			const setGenType = (type) => {
 				if (type === activeGenType) return;
+				setPaused(false);
 				setBgType(type);
 			};
 			const ensureGenParams = () => generatedBg ?? defaultParamsFor(activeGenType);
 			const updateGenerated = (patch) => {
+				setPaused(false);
 				setGeneratedBg({
 					...ensureGenParams(),
 					...patch
@@ -4315,9 +5257,13 @@ window.__ModuleLoader__.load({
 					case "aurora": return t("presetAurora");
 					case "nebula": return t("presetNebula");
 					case "noise": return t("presetNoise");
+					case "starfield": return t("presetStarfield");
 					case "dots": return t("presetDots");
 					case "waves": return t("presetWaves");
 					case "poly": return t("presetPoly");
+					case "rain": return t("presetRain");
+					case "contour": return t("presetContour");
+					case "meta": return t("presetMeta");
 					default: return key;
 				}
 			};
@@ -4372,6 +5318,7 @@ window.__ModuleLoader__.load({
 									type: "button",
 									className: "dab-btn",
 									onClick: () => {
+										setPaused(false);
 										regenerateBg();
 										setSpinTick((x) => x + 1);
 									},
@@ -4379,7 +5326,7 @@ window.__ModuleLoader__.load({
 								}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 									type: "button",
 									className: "dab-btn dab-btn-danger",
-									onClick: () => setWp(null),
+									onClick: () => setWpFromServer(null),
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 13 }), t("bgRemove")]
 								})]
 							})
@@ -4425,7 +5372,7 @@ window.__ModuleLoader__.load({
 						]
 					})
 				}),
-				!isGenerated ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				!isGenerated ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 					className: "dab-card dab-card-hover dab-rise",
 					style: { "--d": 3 },
 					children: [
@@ -4440,7 +5387,7 @@ window.__ModuleLoader__.load({
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 									type: "button",
-									className: "dab-btn dab-btn-ghost",
+									className: "dab-btn dab-btn-soft",
 									onClick: () => setUrlOpen((o) => !o),
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkIcon, { size: 14 }), t("bgFromUrl")]
 								}),
@@ -4453,21 +5400,14 @@ window.__ModuleLoader__.load({
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditIcon, { size: 14 }), t("bgEdit")]
 								}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 									type: "button",
-									className: "dab-btn dab-btn-ghost dab-btn-danger",
-									onClick: () => setWp(null),
+									className: "dab-btn dab-btn-danger-inverted",
+									onClick: () => setWpFromServer(null),
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 14 }), t("bgRemove")]
 								})] }) : null
 							]
 						}),
 						urlOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "dab-urlrow",
-							style: {
-								marginTop: 12,
-								display: "flex",
-								flexWrap: "wrap",
-								gap: 8,
-								alignItems: "center"
-							},
 							children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 									type: "text",
@@ -4527,15 +5467,130 @@ window.__ModuleLoader__.load({
 							})]
 						})
 					]
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "dab-card dab-rise",
+					style: { "--d": 4 },
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-row-head",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-swatch-title",
+								style: { marginBottom: 0 },
+								children: t("rotTitle")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: `dab-toggle${rotation.enabled ? " is-on" : ""}`,
+								role: "switch",
+								"aria-checked": rotation.enabled,
+								onClick: () => setRotation({ enabled: !rotation.enabled }),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-toggle-knob" })
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginTop: 8 },
+							children: t("rotHint")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-thumbstrip",
+							children: [rotation.items.map((it, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: `dab-thumb${rotation.enabled && i === rotation.current ? " is-current" : ""}`,
+								children: [it.thumb ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+									src: it.thumb,
+									alt: "",
+									draggable: false
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PhotoIcon, { size: 15 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dab-thumb-x",
+									title: t("rotRemove"),
+									disabled: rotBusy,
+									onClick: () => {
+										setRotBusy(true);
+										removeRotationItem(i).finally(() => setRotBusy(false));
+									},
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XIcon, { size: 10 })
+								})]
+							}, it.file)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dab-thumb dab-thumb-add",
+								title: t("rotAdd"),
+								disabled: rotBusy,
+								onClick: () => rotFileRef.current?.click(),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlusIcon, { size: 16 })
+							})]
+						}),
+						rotation.items.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-chip-row",
+							style: { marginTop: 12 },
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: `dab-chip${rotation.mode === "shuffle" ? " is-active" : ""}`,
+									onClick: () => setRotation({ mode: "shuffle" }),
+									children: t("rotShuffle")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: `dab-chip${rotation.mode === "order" ? " is-active" : ""}`,
+									onClick: () => setRotation({ mode: "order" }),
+									children: t("rotOrder")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-chip-sep" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: `dab-chip${rotation.interval === "reload" ? " is-active" : ""}`,
+									onClick: () => setRotation({ interval: "reload" }),
+									children: t("rotReload")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: `dab-chip${rotation.interval === "daily" ? " is-active" : ""}`,
+									onClick: () => setRotation({ interval: "daily" }),
+									children: t("rotDaily")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: `dab-chip${rotation.interval === "weekly" ? " is-active" : ""}`,
+									onClick: () => setRotation({ interval: "weekly" }),
+									children: t("rotWeekly")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dab-btn",
+									disabled: rotBusy,
+									onClick: () => {
+										setRotBusy(true);
+										rotateNow().finally(() => setRotBusy(false));
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RefreshIcon, { size: 13 }), t("rotNow")]
+								})
+							]
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref: rotFileRef,
+							type: "file",
+							accept: "image/*",
+							multiple: true,
+							style: { display: "none" },
+							onChange: (e) => {
+								const files = Array.from(e.target.files ?? []);
+								e.target.value = "";
+								if (files.length === 0) return;
+								setRotBusy(true);
+								addRotationItems(files).finally(() => setRotBusy(false));
+							}
+						})
+					]
+				})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 					className: "dab-card dab-rise",
 					style: { "--d": 3 },
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "dab-types",
-							children: typeMeta.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							children: typeMeta.map((m, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
 								className: `dab-type${activeGenType === m.type ? " is-active" : ""}`,
+								style: { "--i": i },
 								onClick: () => setGenType(m.type),
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `dab-type-thumb ${m.thumb}` }),
@@ -4564,7 +5619,8 @@ window.__ModuleLoader__.load({
 								children: [
 									"aurora",
 									"nebula",
-									"noise"
+									"noise",
+									"starfield"
 								].map((pr) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									className: `dab-chip${generatedBg.preset === pr ? " is-active" : ""}`,
@@ -4583,7 +5639,10 @@ window.__ModuleLoader__.load({
 								children: [
 									"dots",
 									"waves",
-									"poly"
+									"poly",
+									"rain",
+									"contour",
+									"meta"
 								].map((pr) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									className: `dab-chip${generatedBg.preset === pr ? " is-active" : ""}`,
@@ -4673,11 +5732,26 @@ window.__ModuleLoader__.load({
 									onClick: () => setRegenerateOnReload(!regenerateOnReload),
 									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-toggle-knob" })
 								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dab-btn",
+									onClick: () => {
+										if (paused) {
+											resumeGeneratedBg();
+											setPaused(false);
+										} else {
+											pauseGeneratedBg();
+											setPaused(true);
+										}
+									},
+									children: [paused ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlayIcon, { size: 13 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PauseIcon, { size: 13 }), paused ? t("bgResume") : t("bgPause")]
+								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 									type: "button",
 									className: "dab-btn dab-btn-primary",
 									onClick: () => {
 										regenerateBg();
+										setPaused(false);
 										setSpinTick((x) => x + 1);
 									},
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -4692,7 +5766,7 @@ window.__ModuleLoader__.load({
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 					className: "dab-card dab-card-hover dab-rise",
-					style: { "--d": 4 },
+					style: { "--d": 5 },
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
 							label: t("wpOpacity"),
@@ -4764,10 +5838,187 @@ window.__ModuleLoader__.load({
 			] });
 		}
 		//#endregion
+		//#region src/client/utils/presets.ts
+		const zeroBlurs = {
+			bg: 0,
+			sidebar: 0,
+			card: 0,
+			settings: 0,
+			chat: 0,
+			trajectory: 0,
+			input: 0
+		};
+		const BUILTIN_PRESETS = [
+			{
+				key: "default",
+				appearance: {
+					color: null,
+					opacities: {
+						bg: .85,
+						sidebar: .93,
+						card: 1,
+						input: 1
+					},
+					blurs: { ...zeroBlurs },
+					settingsOpacity: 1,
+					wallpaperOpacity: 1,
+					blur: 0,
+					chatTextOpacity: 0,
+					trajectoryOpacity: 1
+				}
+			},
+			{
+				key: "glass",
+				appearance: {
+					color: [
+						212,
+						.5,
+						.38
+					],
+					opacities: {
+						bg: .62,
+						sidebar: .55,
+						card: .62,
+						input: .58
+					},
+					blurs: {
+						...zeroBlurs,
+						bg: 20,
+						sidebar: 14,
+						card: 12,
+						settings: 20,
+						trajectory: 8,
+						input: 14
+					},
+					settingsOpacity: .88,
+					wallpaperOpacity: 1,
+					blur: 0,
+					chatTextOpacity: 0,
+					trajectoryOpacity: .85
+				}
+			},
+			{
+				key: "minimal",
+				appearance: {
+					color: null,
+					opacities: {
+						bg: .97,
+						sidebar: .97,
+						card: 1,
+						input: 1
+					},
+					blurs: { ...zeroBlurs },
+					settingsOpacity: 1,
+					wallpaperOpacity: 1,
+					blur: 0,
+					chatTextOpacity: 0,
+					trajectoryOpacity: 1
+				}
+			},
+			{
+				key: "midnight",
+				appearance: {
+					color: [
+						262,
+						.45,
+						.16
+					],
+					opacities: {
+						bg: .5,
+						sidebar: .45,
+						card: .55,
+						input: .6
+					},
+					blurs: {
+						...zeroBlurs,
+						bg: 24,
+						sidebar: 18,
+						card: 14,
+						settings: 22,
+						trajectory: 10,
+						input: 16
+					},
+					settingsOpacity: .85,
+					wallpaperOpacity: .92,
+					blur: 2,
+					chatTextOpacity: 0,
+					trajectoryOpacity: .8
+				}
+			},
+			{
+				key: "cyber",
+				appearance: {
+					color: [
+						315,
+						.7,
+						.22
+					],
+					opacities: {
+						bg: .42,
+						sidebar: .5,
+						card: .45,
+						input: .55
+					},
+					blurs: {
+						...zeroBlurs,
+						bg: 16,
+						sidebar: 12,
+						card: 10,
+						settings: 18,
+						trajectory: 6,
+						input: 20
+					},
+					settingsOpacity: .8,
+					wallpaperOpacity: 1,
+					blur: 0,
+					chatTextOpacity: 0,
+					trajectoryOpacity: .78
+				}
+			},
+			{
+				key: "warm",
+				appearance: {
+					color: [
+						28,
+						.6,
+						.72
+					],
+					opacities: {
+						bg: .92,
+						sidebar: .95,
+						card: 1,
+						input: 1
+					},
+					blurs: { ...zeroBlurs },
+					settingsOpacity: 1,
+					wallpaperOpacity: 1,
+					blur: 0,
+					chatTextOpacity: 0,
+					trajectoryOpacity: 1
+				}
+			}
+		];
+		//#endregion
 		//#region src/client/components/pages/ProfilePage.tsx
+		const hexOf = (color) => color === null ? "" : "#" + hslToRgb(color[0], color[1], color[2]).map((v) => Math.round(v).toString(16).padStart(2, "0")).join("");
+		function ProfileDot({ entry }) {
+			const hex = hexOf(entry.config.color);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "dab-profile-dot",
+				style: hex ? { background: hex } : void 0,
+				title: hex ? hex.toUpperCase() : void 0,
+				children: hex ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, { size: 11 })
+			});
+		}
 		function ProfilePage({ p, notify }) {
-			const { t, exportTheme, importTheme } = p;
+			const { t, exportTheme, importTheme, saveProfile, applyProfile, deleteProfile, applyPreset, setSchedule, useStore } = p;
+			const profiles = useStore((s) => s.profiles);
+			const schedule = useStore((s) => s.schedule);
+			const activeProfile = useStore((s) => s.activeProfile);
 			const importRef = (0, react.useRef)(null);
+			const [nameOpen, setNameOpen] = (0, react.useState)(false);
+			const [nameVal, setNameVal] = (0, react.useState)("");
+			const [confirmId, setConfirmId] = (0, react.useState)(null);
 			const onImport = async (file) => {
 				try {
 					const ok = await importTheme(file);
@@ -4776,6 +6027,39 @@ window.__ModuleLoader__.load({
 					notify(t("importFail"), false);
 				}
 			};
+			const onSave = () => {
+				const name = nameVal.trim();
+				if (!name) return;
+				if (saveProfile(name)) {
+					notify(t("profileSaved"), true);
+					setNameVal("");
+					setNameOpen(false);
+				} else notify(t("profileNameRequired"), false);
+			};
+			const onApply = (entry) => {
+				if (applyProfile(entry.id)) notify(t("profileApplied"), true);
+			};
+			const onDelete = (entry) => {
+				if (confirmId !== entry.id) {
+					setConfirmId(entry.id);
+					return;
+				}
+				setConfirmId(null);
+				deleteProfile(entry.id);
+			};
+			const profileOptions = (value, onChange) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+				className: "dab-select",
+				value: value ?? "",
+				onChange: (e) => onChange(e.target.value || null),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: "",
+					children: t("profileNone")
+				}), profiles.map((pr) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: pr.id,
+					children: pr.name
+				}, pr.id))]
+			});
+			const patchSchedule = (patch) => setSchedule(patch);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 					className: "dab-head dab-rise",
@@ -4795,11 +6079,263 @@ window.__ModuleLoader__.load({
 						})
 					]
 				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "dab-card dab-rise",
+					style: { "--d": 1 },
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dab-swatch-title",
+						children: t("presetGalleryTitle")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "dab-preset-grid",
+						children: BUILTIN_PRESETS.map((ps, i) => {
+							const hex = hexOf(ps.appearance.color);
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: "dab-preset",
+								style: { "--i": i },
+								onClick: () => {
+									applyPreset(ps.appearance);
+									notify(t("presetApplied"));
+								},
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dab-preset-dot",
+										style: hex ? { background: hex } : void 0,
+										children: hex ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, { size: 12 })
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dab-preset-name",
+										children: t(`presetName_${ps.key}`)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "dab-preset-desc",
+										children: t(`presetDesc_${ps.key}`)
+									})
+								]
+							}, ps.key);
+						})
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "dab-card dab-rise",
+					style: { "--d": 2 },
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-row-head",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-swatch-title",
+								style: { marginBottom: 0 },
+								children: t("profilesTitle")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: "dab-btn dab-btn-primary",
+								onClick: () => setNameOpen((o) => !o),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlusIcon, { size: 14 }), t("profileSave")]
+							})]
+						}),
+						nameOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-urlrow",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "text",
+									className: "dab-urlinput",
+									value: nameVal,
+									placeholder: t("profileNamePlaceholder"),
+									maxLength: 60,
+									onChange: (e) => setNameVal(e.target.value),
+									onKeyDown: (e) => {
+										if (e.key === "Enter") {
+											e.preventDefault();
+											onSave();
+										}
+									},
+									autoFocus: true
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dab-btn dab-btn-primary",
+									disabled: !nameVal.trim(),
+									onClick: onSave,
+									children: t("editorCommit")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dab-btn",
+									onClick: () => {
+										setNameOpen(false);
+										setNameVal("");
+									},
+									children: t("bgUrlCancel")
+								})
+							]
+						}) : null,
+						profiles.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginTop: 10 },
+							children: t("profilesEmpty")
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-profile-list",
+							children: profiles.map((entry, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: `dab-profile-row${activeProfile === entry.id ? " is-active" : ""}`,
+								style: { "--i": i },
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileDot, { entry }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "dab-profile-meta",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dab-profile-name",
+											children: entry.name
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "dab-profile-sub",
+											children: new Date(entry.createdAt).toLocaleDateString()
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: "dab-btn",
+										onClick: () => onApply(entry),
+										children: t("profileApply")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										className: `dab-btn dab-btn-danger-solid${confirmId === entry.id ? " dab-btn-confirm" : ""}`,
+										title: t("profileDelete"),
+										onClick: () => onDelete(entry),
+										children: confirmId === entry.id ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckIcon, { size: 13 }), t("profileDeleteConfirm")] }) : t("profileDelete")
+									})
+								]
+							}, entry.id))
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "dab-card dab-rise",
+					style: { "--d": 3 },
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-row-head",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-swatch-title",
+								style: { marginBottom: 0 },
+								children: t("scheduleTitle")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: `dab-toggle${schedule.enabled ? " is-on" : ""}`,
+								role: "switch",
+								"aria-checked": schedule.enabled,
+								onClick: () => patchSchedule({ enabled: !schedule.enabled }),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-toggle-knob" })
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginTop: 8 },
+							children: t("scheduleHint")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: `dab-schedule-wrap${schedule.enabled ? " is-open" : ""}`,
+							"aria-hidden": !schedule.enabled,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-schedule-clip",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "dab-schedule-grid",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "dab-schedule-cell",
+											style: { "--i": 0 },
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: "dab-swatch-title",
+												children: t("scheduleMode")
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dab-chip-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+													type: "button",
+													className: `dab-chip${schedule.mode === "time" ? " is-active" : ""}`,
+													onClick: () => patchSchedule({ mode: "time" }),
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClockIcon, { size: 13 }), t("scheduleModeTime")]
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+													type: "button",
+													className: `dab-chip${schedule.mode === "system" ? " is-active" : ""}`,
+													onClick: () => patchSchedule({ mode: "system" }),
+													children: t("scheduleModeSystem")
+												})]
+											})]
+										}),
+										schedule.mode === "time" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "dab-schedule-cell",
+											style: { "--i": 1 },
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: "dab-swatch-title",
+												children: t("scheduleTimes")
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dab-time-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+													className: "dab-time-label",
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, { size: 13 }),
+														t("scheduleDayStart"),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+															type: "time",
+															className: "dab-timeinput",
+															value: schedule.dayStart,
+															onChange: (e) => {
+																if (/^([01]\d|2[0-3]):[0-5]\d$/.test(e.target.value)) patchSchedule({ dayStart: e.target.value });
+															}
+														})
+													]
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+													className: "dab-time-label",
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoonIcon, { size: 13 }),
+														t("scheduleNightStart"),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+															type: "time",
+															className: "dab-timeinput",
+															value: schedule.nightStart,
+															onChange: (e) => {
+																if (/^([01]\d|2[0-3]):[0-5]\d$/.test(e.target.value)) patchSchedule({ nightStart: e.target.value });
+															}
+														})
+													]
+												})]
+											})]
+										}) : null,
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "dab-schedule-cell",
+											style: { "--i": 2 },
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												className: "dab-swatch-title",
+												children: t("scheduleProfiles")
+											}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												className: "dab-time-row",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+													className: "dab-time-label",
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SunIcon, { size: 13 }),
+														t("scheduleDayProfile"),
+														profileOptions(schedule.dayProfile, (id) => patchSchedule({ dayProfile: id }))
+													]
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+													className: "dab-time-label",
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoonIcon, { size: 13 }),
+														t("scheduleNightProfile"),
+														profileOptions(schedule.nightProfile, (id) => patchSchedule({ nightProfile: id }))
+													]
+												})]
+											})]
+										})
+									]
+								})
+							})
+						})
+					]
+				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "dab-profile-grid",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "dab-card dab-card-hover dab-rise",
-						style: { "--d": 1 },
+						style: { "--d": 4 },
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "dab-profile-ico",
@@ -4825,7 +6361,7 @@ window.__ModuleLoader__.load({
 						]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "dab-card dab-card-hover dab-rise",
-						style: { "--d": 2 },
+						style: { "--d": 5 },
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "dab-profile-ico",
@@ -4862,7 +6398,7 @@ window.__ModuleLoader__.load({
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
 					className: "dab-footer dab-rise",
-					style: { "--d": 3 },
+					style: { "--d": 6 },
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "dab-footer-mono",
 						children: "dsh-any-background"
@@ -4996,7 +6532,30 @@ window.__ModuleLoader__.load({
 			const registerCustom = (h, s, l) => {
 				customDispose?.();
 				try {
-					const { colorScheme, tokens } = genTokens(h, s, l);
+					let colorScheme;
+					let tokens;
+					if (rHasColor()) ({colorScheme, tokens} = genTokens(h ?? rColor()[0], s ?? rColor()[1], l ?? rColor()[2], rColorScheme()));
+					else if (rSchemeOverride() !== "auto") {
+						const dark = rScheme() === "dark";
+						({colorScheme, tokens} = genTokens(220, .04, dark ? .14 : .92, dark ? "dark" : "light"));
+					} else {
+						const verdict = rBgDark();
+						if (verdict === null) {
+							customDispose = null;
+							return false;
+						}
+						const snap = ctx.theme.getTheme();
+						const wantScheme = verdict ? "dark" : "light";
+						const source = snap.themes.find((t) => t.id !== CUSTOM_ID && t.colorScheme === wantScheme) ?? snap.themes.find((t) => t.id !== CUSTOM_ID);
+						if (source === void 0) {
+							customDispose = null;
+							return false;
+						}
+						colorScheme = wantScheme;
+						tokens = { ...source.tokens };
+						const font = verdict ? "#fff" : "#000";
+						for (const name of LABEL_TOKENS) tokens[name] = font;
+					}
 					customDispose = ctx.theme.register({
 						id: CUSTOM_ID,
 						colorScheme,
@@ -5005,16 +6564,27 @@ window.__ModuleLoader__.load({
 				} catch {
 					customDispose = null;
 				}
-				if (ctx.theme.getTheme().themes.some((t) => t.id === CUSTOM_ID)) ctx.theme.setTheme(CUSTOM_ID);
+				const present = ctx.theme.getTheme().themes.some((t) => t.id === CUSTOM_ID);
+				if (present) ctx.theme.setTheme(CUSTOM_ID);
+				return present;
 			};
 			if (rHasColor()) registerCustom(initH, initS, initL);
+			onVerdictApplied(() => {
+				if (!rHasColor()) registerCustom();
+			});
+			onColorAdopted((hsl) => {
+				registerCustom(hsl[0], hsl[1], hsl[2]);
+				saveConfig();
+				colorRev++;
+				bound?.syncColor(hslToHsv(hsl[0], hsl[1], hsl[2]), colorRev);
+			});
 			ctx.effect(() => () => {
 				customDispose?.();
 				if (colorTimerRef.current !== null) window.clearTimeout(colorTimerRef.current);
 			}, "dsh-any-background: skin dispose");
 			const styleEl = document.createElement("style");
 			styleEl.dataset.plugin = "dsh-any-background";
-			styleEl.textContent = `body[data-ds-dark-theme="dsh-any-background"]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,0.03) 0%,transparent 60%)}${SETTINGS_STYLE_RULE}${TRAJECTORY_STYLE_RULE}${INPUT_BLUR_RULE}[data-composer-card] textarea::placeholder,[data-composer-card] input::placeholder,[data-composer-card] [contenteditable]::placeholder,[data-cordis-panel] input::placeholder,[data-cordis-panel] textarea::placeholder,.dab-input::placeholder,.dab-input textarea::placeholder,.dab-input input::placeholder{color:var(--dsh-any-placeholder,var(--dsw-alias-label-caption,#8a8f98))!important;font-style:italic;opacity:.85}`;
+			styleEl.textContent = `body[data-ds-dark-theme="dsh-any-background"]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,0.03) 0%,transparent 60%)}${SETTINGS_STYLE_RULE}${TRAJECTORY_STYLE_RULE}${INPUT_BLUR_RULE}${MOBILE_HEADER_RULE}[data-composer-card] textarea::placeholder,[data-composer-card] input::placeholder,[data-composer-card] [contenteditable]::placeholder,[data-cordis-panel] input::placeholder,[data-cordis-panel] textarea::placeholder,.dab-input::placeholder,.dab-input textarea::placeholder,.dab-input input::placeholder{color:var(--dsh-any-placeholder,var(--dsw-alias-label-caption,#8a8f98))!important;font-style:italic;opacity:.85}`;
 			document.head.appendChild(styleEl);
 			ctx.effect(() => () => {
 				styleEl?.parentNode?.removeChild(styleEl);
@@ -5034,7 +6604,16 @@ window.__ModuleLoader__.load({
 					backgroundType: cfg.backgroundType,
 					generatedBg: cfg.generatedBg,
 					bgRev: -1,
-					regenerateOnReload: cfg.regenerateOnReload
+					regenerateOnReload: cfg.regenerateOnReload,
+					profiles: [],
+					rotation: {
+						...DEFAULT_CONFIG.rotation,
+						items: []
+					},
+					schedule: { ...DEFAULT_CONFIG.schedule },
+					schemeOverride: "auto",
+					activeProfile: null,
+					metaRev: -1
 				}),
 				actions: {
 					syncBg: (d, url, r, bgType, genBg, bgr, reload) => {
@@ -5054,6 +6633,16 @@ window.__ModuleLoader__.load({
 							d.color = hsv;
 							d.colorRev = r;
 						}
+					},
+					syncMeta: (d, profiles, rotation, schedule, schemeOverride, activeProfile, r) => {
+						if (r > d.metaRev) {
+							d.profiles = profiles;
+							d.rotation = rotation;
+							d.schedule = schedule;
+							d.schemeOverride = schemeOverride;
+							d.activeProfile = activeProfile;
+							d.metaRev = r;
+						}
 					}
 				}
 			});
@@ -5064,14 +6653,145 @@ window.__ModuleLoader__.load({
 				bound?.syncBg(rWp(), rev, cfg.backgroundType, cfg.generatedBg, bgRev, cfg.regenerateOnReload);
 			};
 			onGeneratedSnapshot(syncBg);
+			let metaRev = 0;
+			const syncMetaNow = () => {
+				metaRev++;
+				bound?.syncMeta(rProfiles(), rRotation(), rSchedule(), rSchemeOverride(), cfg.activeProfile, metaRev);
+			};
+			/** Apply an appearance snapshot (profile or built-in preset) to the whole
+			*  interface: re-register the skin, re-emit tokens, persist. */
+			const applyAppearanceLive = (ap) => {
+				applyAppearance(ap);
+				if (rHasColor()) {
+					const [h, s, l] = rColor();
+					registerCustom(h, s, l);
+				} else if (!registerCustom()) {
+					customDispose?.();
+					customDispose = null;
+					clearThemeTokens();
+					const snap = ctx.theme.getTheme();
+					const fallback = snap.themes.find((t) => t.id !== CUSTOM_ID);
+					if (fallback !== void 0 && snap.preference === CUSTOM_ID) ctx.theme.setTheme(fallback.id);
+				}
+				applyWp();
+			};
+			const applyProfileById = (id) => {
+				const entry = rProfiles().find((p) => p.id === id);
+				if (entry === void 0) return false;
+				applyAppearanceLive(entry.config);
+				cfg.activeProfile = id;
+				applyWp();
+				persistConfig();
+				syncMetaNow();
+				return true;
+			};
+			/** Extract the theme color once from a freshly activated wallpaper and run
+			*  the full adaptation (host skin + editor wheel sync); the caller persists. */
+			const adoptWallpaperColor = async (dataUrl) => {
+				const hsl = await extractWallpaperColor(dataUrl, rBgState());
+				if (!hsl || rWp() !== dataUrl) return;
+				cfg.color = hsl;
+				registerCustom(hsl[0], hsl[1], hsl[2]);
+				colorRev++;
+				bound?.syncColor(hslToHsv(hsl[0], hsl[1], hsl[2]), colorRev);
+			};
+			/** Activate a rotation item: the server copies its bytes into the wallpaper
+			*  slot; the client applies the returned serve URL through the normal image
+			*  path, then re-extracts the theme color from the new picture so the
+			*  palette follows the rotation. */
+			const applyRotationIndex = async (idx, auto) => {
+				const rot = rRotation();
+				if (idx < 0 || idx >= rot.items.length) return false;
+				const r = await rotationActivate(idx);
+				if (!r.ok || !r.wallpaperUrl) {
+					console.warn("dsh-any-background: rotation activate failed", r.error);
+					return false;
+				}
+				cfg.backgroundType = "image";
+				setBgDark(null);
+				setWpImageUrl(r.wallpaperUrl);
+				setWpUrl(rWpImage());
+				setBgState({ ...DEFAULT_CONFIG.bgState });
+				cfg.rotation = {
+					...rot,
+					current: idx,
+					lastRotate: auto || rot.lastRotate === null ? (/* @__PURE__ */ new Date()).toISOString() : rot.lastRotate
+				};
+				if (cfg.backgroundType === "image") await adoptWallpaperColor(rWp());
+				applyThemeColor();
+				syncBg();
+				saveConfig();
+				syncMetaNow();
+				return true;
+			};
+			const isoWeekKey = (d) => {
+				const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+				const day = t.getUTCDay() || 7;
+				t.setUTCDate(t.getUTCDate() + 4 - day);
+				const yearStart = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
+				const week = Math.ceil(((t.getTime() - yearStart.getTime()) / 864e5 + 1) / 7);
+				return `${t.getUTCFullYear()}-W${week}`;
+			};
+			const rotationDue = () => {
+				const rot = rRotation();
+				if (!rot.enabled || rot.items.length === 0) return false;
+				if (rot.interval === "reload") return true;
+				const last = rot.lastRotate !== null ? new Date(rot.lastRotate) : null;
+				if (last === null || isNaN(last.getTime())) return true;
+				const now = /* @__PURE__ */ new Date();
+				if (rot.interval === "daily") return last.toDateString() !== now.toDateString();
+				return isoWeekKey(last) !== isoWeekKey(now);
+			};
+			const pickNextRotationIndex = () => {
+				const rot = rRotation();
+				const n = rot.items.length;
+				if (n === 0) return -1;
+				if (rot.mode === "shuffle" && n > 1) {
+					let idx = rot.current;
+					while (idx === rot.current) idx = Math.floor(Math.random() * n);
+					return idx;
+				}
+				return (rot.current + 1) % n;
+			};
+			const maybeRotate = async () => {
+				if (!rotationDue()) return;
+				await applyRotationIndex(pickNextRotationIndex(), true);
+			};
+			const parseHHMM = (s) => {
+				const m = /^([01]\d|2[0-3]):([0-5]\d)$/.exec(s);
+				return m === null ? -1 : Number(m[1]) * 60 + Number(m[2]);
+			};
+			const isNightNow = (sc) => {
+				const now = /* @__PURE__ */ new Date();
+				const cur = now.getHours() * 60 + now.getMinutes();
+				const day = parseHHMM(sc.dayStart);
+				const night = parseHHMM(sc.nightStart);
+				if (day < 0 || night < 0) return false;
+				if (day <= night) return cur >= night || cur < day;
+				return cur >= night && cur < day;
+			};
+			const scheduleTick = () => {
+				const sc = rSchedule();
+				if (!sc.enabled) return;
+				const want = (sc.mode === "system" ? window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false : isNightNow(sc)) ? sc.nightProfile : sc.dayProfile;
+				if (!want || want === cfg.activeProfile) return;
+				applyProfileById(want);
+			};
 			applyWp();
 			syncBg();
 			watchParts();
-			loadPersisted().then(() => {
+			loadPersisted().then(async (serverRotated) => {
+				syncMetaNow();
 				if (rHasColor()) {
 					const [h, s, l] = rColor();
 					registerCustom(h, s, l);
 				}
+				if (serverRotated) {
+					if (cfg.backgroundType === "image" && rWp()) {
+						await adoptWallpaperColor(rWp());
+						saveConfig();
+					}
+				} else await maybeRotate();
 				if (cfg.backgroundType === "video") {
 					const v = rWpVideo();
 					if (v) {
@@ -5093,16 +6813,24 @@ window.__ModuleLoader__.load({
 					persistConfig();
 				} else applyThemeColor();
 				syncBg();
+				scheduleTick();
 				if (rHasColor()) {
 					colorRev++;
 					bound?.syncColor(hslToHsv(...rColor()), colorRev);
 				}
 			});
+			const schemeMq = window.matchMedia?.("(prefers-color-scheme: dark)");
+			const scheduleTimer = window.setInterval(scheduleTick, 3e4);
+			schemeMq?.addEventListener?.("change", scheduleTick);
+			ctx.effect(() => () => {
+				window.clearInterval(scheduleTimer);
+				schemeMq?.removeEventListener?.("change", scheduleTick);
+			}, "dsh-any-background: schedule timer");
 			ctx.effect(() => () => {
 				teardownWp();
 			}, "dsh-any-background: wp cleanup");
 			ctx.effect(() => ctx.on("theme/change", () => {
-				if (rHasColor()) {
+				if (rHasColor() || rBgDark() !== null || rSchemeOverride() !== "auto") {
 					const snapshot = ctx.theme.getTheme();
 					if (snapshot.preference !== CUSTOM_ID && snapshot.themes.some((t) => t.id === CUSTOM_ID)) ctx.theme.setTheme(CUSTOM_ID);
 				}
@@ -5135,6 +6863,7 @@ window.__ModuleLoader__.load({
 			const sectionInject = (actions) => {
 				bound = actions;
 				syncBg();
+				syncMetaNow();
 				const playVideoFromBlob = (blob, mime) => {
 					const localUrl = URL.createObjectURL(blob);
 					cfg.backgroundType = "video";
@@ -5182,16 +6911,16 @@ window.__ModuleLoader__.load({
 							nl
 						], colorRev);
 					},
-					setWp: (u) => {
+					setWpFromServer: (u) => {
 						cfg.backgroundType = "image";
 						setBgDark(null);
 						setWpImageUrl(u);
-						setWpUrl(u);
+						setWpUrl(rWpImage());
 						setBgState({ ...DEFAULT_CONFIG.bgState });
-						persistWallpaper(u);
 						if (u === null) {
 							setWpVideoUrl(null, null);
 							persistVideo(null);
+							persistWallpaper(null);
 						}
 						applyThemeColor();
 						syncBg();
@@ -5296,23 +7025,29 @@ window.__ModuleLoader__.load({
 						if (cfg.backgroundType === "video") {
 							const vurl = rWpVideo();
 							if (vurl) try {
-								const blob = await fetch(vurl).then((r) => r.blob());
-								videoPayload = await new Promise((resolve, reject) => {
-									const fr = new FileReader();
-									fr.onload = () => resolve(fr.result);
-									fr.onerror = () => reject(fr.error);
-									fr.readAsDataURL(blob);
-								});
+								videoPayload = await blobToDataUrl(await fetch(vurl).then((r) => r.blob()));
 								if (videoPayload && !/^data:video\//.test(videoPayload)) videoPayload = videoPayload.replace(/^data:[^;,]*/, `data:${cfg.videoMime ?? "video/mp4"}`);
 							} catch {
 								videoPayload = null;
 							}
 						}
+						let wallpaperPayload = null;
+						if (cfg.backgroundType === "image") {
+							const wurl = rWp();
+							if (wurl) {
+								if (wurl.startsWith("data:")) wallpaperPayload = wurl;
+								else try {
+									wallpaperPayload = await blobToDataUrl(await fetch(wurl).then((r) => r.blob()));
+								} catch {
+									wallpaperPayload = null;
+								}
+							}
+						}
 						const payload = {
 							version: 2,
 							exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
 							config: cfg,
-							wallpaper: cfg.backgroundType === "image" ? rWp() : null,
+							wallpaper: wallpaperPayload,
 							video: videoPayload
 						};
 						const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
@@ -5388,6 +7123,134 @@ window.__ModuleLoader__.load({
 						} catch {
 							return false;
 						}
+					},
+					saveProfile: (name) => {
+						const trimmed = name.trim();
+						if (!trimmed) return false;
+						const profiles = [...rProfiles()];
+						if (profiles.length >= 20) profiles.shift();
+						const id = `p-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+						profiles.push({
+							id,
+							name: trimmed.slice(0, 60),
+							createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+							config: currentAppearance()
+						});
+						cfg.profiles = profiles;
+						cfg.activeProfile = id;
+						persistConfig();
+						syncMetaNow();
+						return true;
+					},
+					applyProfile: (id) => applyProfileById(id),
+					deleteProfile: (id) => {
+						const before = rProfiles();
+						if (!before.some((p) => p.id === id)) return false;
+						cfg.profiles = before.filter((p) => p.id !== id);
+						if (cfg.activeProfile === id) cfg.activeProfile = null;
+						const sc = rSchedule();
+						if (sc.dayProfile === id || sc.nightProfile === id) cfg.schedule = {
+							...sc,
+							dayProfile: sc.dayProfile === id ? null : sc.dayProfile,
+							nightProfile: sc.nightProfile === id ? null : sc.nightProfile
+						};
+						persistConfig();
+						syncMetaNow();
+						return true;
+					},
+					applyPreset: (appearance) => {
+						applyAppearanceLive(appearance);
+						cfg.activeProfile = null;
+						applyWp();
+						persistConfig();
+						syncMetaNow();
+					},
+					setSchemeOverride: (v) => {
+						cfg.schemeOverride = v;
+						registerCustom();
+						applyWp();
+						saveConfig();
+						syncMetaNow();
+					},
+					setSchedule: (patch) => {
+						cfg.schedule = {
+							...rSchedule(),
+							...patch
+						};
+						if (patch.enabled === true) scheduleTick();
+						persistConfig();
+						syncMetaNow();
+					},
+					setRotation: (patch) => {
+						cfg.rotation = {
+							...rRotation(),
+							...patch
+						};
+						if (patch.enabled === true) maybeRotate();
+						persistConfig();
+						syncMetaNow();
+					},
+					addRotationItems: async (files) => {
+						let added = false;
+						for (const f of files) {
+							if (!f.type.startsWith("image/")) continue;
+							const dataUrl = await readImgAsync(f);
+							if (!dataUrl) continue;
+							const r = await rotationAdd(dataUrl, await makeThumb(dataUrl) ?? "");
+							if (r.ok && r.items !== void 0) {
+								cfg.rotation = {
+									...rRotation(),
+									items: r.items
+								};
+								added = true;
+							}
+						}
+						if (added) {
+							persistConfig();
+							syncMetaNow();
+							syncBg();
+						}
+						return added;
+					},
+					removeRotationItem: async (index) => {
+						const r = await rotationRemove(index);
+						if (!r.ok || r.items === void 0) return false;
+						const rot = rRotation();
+						cfg.rotation = {
+							...rot,
+							items: r.items,
+							current: Math.max(0, Math.min(rot.current >= index ? rot.current - 1 : rot.current, Math.max(0, r.items.length - 1)))
+						};
+						persistConfig();
+						syncMetaNow();
+						return true;
+					},
+					rotateNow: async () => {
+						if (rRotation().items.length === 0) return false;
+						return applyRotationIndex(pickNextRotationIndex(), true);
+					},
+					setVideoFromUrl: async (url) => {
+						const r = await setVideoFromUrl(url);
+						if (!r.ok || !r.mime) {
+							console.warn("dsh-any-background: video url fetch failed", r.error);
+							return false;
+						}
+						setBgDark(null);
+						cfg.backgroundType = "video";
+						setWpUrl(null);
+						cfg.videoBgState = { ...DEFAULT_CONFIG.bgState };
+						setWpVideoUrl(VIDEO_SERVE_URL, r.mime);
+						applyWp();
+						saveConfig();
+						syncBg();
+						const applied = rWpVideo();
+						captureVideoSnapshot(applied).then((snap) => {
+							if (rWpVideo() !== applied) return;
+							setWpVideoSnapshot(snap);
+							applyThemeColor();
+							syncBg();
+						});
+						return true;
 					}
 				};
 			};
@@ -5463,12 +7326,11 @@ window.__ModuleLoader__.load({
 				restoreTimers.forEach((id) => window.clearTimeout(id));
 			}, "dsh-any-background: boot restore");
 			const watchdogId = window.setInterval(() => {
-				if (!rHasColor()) return;
+				if (!rHasColor() && rBgDark() === null && rSchemeOverride() === "auto") return;
 				const snapshot = ctx.theme.getTheme();
 				let changed = false;
 				if (!snapshot.themes.some((t) => t.id === CUSTOM_ID)) {
-					const [h, s, l] = rColor();
-					registerCustom(h, s, l);
+					registerCustom();
 					changed = true;
 				} else if (snapshot.preference !== CUSTOM_ID) {
 					ctx.theme.setTheme(CUSTOM_ID);