dsh-any-background 0.2.5 → 0.2.7

package/lib/client.js

@@ -44,11 +44,13 @@ window.__ModuleLoader__.load({
 			uiSop: "设置界面透明度",
 			uiChatRegion: "对话文本框",
 			uiTrajectory: "轨迹页",
+			uiPanelRegion: "better-sidebar 工作台",
+			uiProduced: "产出物/高亮内容",
 			bgTitle: "背景",
 			bgChoose: "选择图片或视频",
 			bgRemove: "移除背景",
 			bgFromUrl: "从网址",
-			bgUrlPlaceholder: "粘贴图片网址 https://…",
+			bgUrlPlaceholder: "粘贴图片或视频网址 https://…",
 			bgUrlApply: "应用",
 			bgUrlCancel: "取消",
 			bgUrlApplying: "加载中…",
@@ -122,6 +124,13 @@ window.__ModuleLoader__.load({
 			presetDots: "点阵",
 			presetWaves: "波浪",
 			presetPoly: "低多边形",
+			presetStarfield: "星空",
+			presetRain: "雨滴",
+			presetContour: "等高线",
+			presetMeta: "流体光斑",
+			bgPause: "暂停",
+			bgResume: "播放",
+			bgUrlVideoFail: "获取视频失败，请确认链接可直接下载视频文件",
 			schemeTitle: "界面明暗",
 			schemeLight: "亮色",
 			schemeDark: "暗色",
@@ -200,11 +209,13 @@ window.__ModuleLoader__.load({
 			uiSop: "Settings interface opacity",
 			uiChatRegion: "Conversation text frame",
 			uiTrajectory: "Trajectory view",
+			uiPanelRegion: "better-sidebar workbench",
+			uiProduced: "Produced / highlights",
 			bgTitle: "Background",
 			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…",
@@ -278,6 +289,13 @@ window.__ModuleLoader__.load({
 			presetDots: "Dots",
 			presetWaves: "Waves",
 			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",
@@ -347,7 +365,9 @@ window.__ModuleLoader__.load({
 				settings: 0,
 				chat: 0,
 				trajectory: 0,
-				input: 0
+				input: 0,
+				panel: 0,
+				produced: 0
 			},
 			settingsOpacity: 1,
 			wallpaperOpacity: 1,
@@ -373,6 +393,8 @@ window.__ModuleLoader__.load({
 			regenerateOnReload: false,
 			chatTextOpacity: 0,
 			trajectoryOpacity: 1,
+			panelOpacity: 1,
+			producedOpacity: 1,
 			profiles: [],
 			rotation: {
 				enabled: false,
@@ -408,12 +430,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) {
@@ -502,7 +531,9 @@ window.__ModuleLoader__.load({
 				"settings",
 				"chat",
 				"trajectory",
-				"input"
+				"input",
+				"panel",
+				"produced"
 			]) {
 				const v = b[k];
 				out[k] = typeof v === "number" ? Math.min(60, Math.max(0, v)) : DEFAULT_CONFIG.blurs[k];
@@ -518,6 +549,12 @@ window.__ModuleLoader__.load({
 		function rSop() {
 			return clamp01(cfg.settingsOpacity, DEFAULT_CONFIG.settingsOpacity);
 		}
+		function rPanelOpacity() {
+			return clamp01(cfg.panelOpacity, DEFAULT_CONFIG.panelOpacity);
+		}
+		function rProducedOpacity() {
+			return clamp01(cfg.producedOpacity, DEFAULT_CONFIG.producedOpacity);
+		}
 		function rBgState() {
 			return cfg.bgState;
 		}
@@ -578,7 +615,9 @@ window.__ModuleLoader__.load({
 				wallpaperOpacity: rWop(),
 				blur: rBl(),
 				chatTextOpacity: rChatTextOpacity(),
-				trajectoryOpacity: rTrajectoryOpacity()
+				trajectoryOpacity: rTrajectoryOpacity(),
+				panelOpacity: rPanelOpacity(),
+				producedOpacity: rProducedOpacity()
 			};
 		}
 		/** Apply an appearance snapshot onto cfg (meta fields untouched). */
@@ -597,6 +636,8 @@ window.__ModuleLoader__.load({
 			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);
+			cfg.panelOpacity = clamp01(ap.panelOpacity, DEFAULT_CONFIG.panelOpacity);
+			cfg.producedOpacity = clamp01(ap.producedOpacity, DEFAULT_CONFIG.producedOpacity);
 		}
 		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;
@@ -627,7 +668,9 @@ window.__ModuleLoader__.load({
 						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)
+						trajectoryOpacity: clamp01(ac.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity),
+						panelOpacity: clamp01(ac.panelOpacity, DEFAULT_CONFIG.panelOpacity),
+						producedOpacity: clamp01(ac.producedOpacity, DEFAULT_CONFIG.producedOpacity)
 					}
 				});
 			}
@@ -690,7 +733,9 @@ window.__ModuleLoader__.load({
 				"settings",
 				"chat",
 				"trajectory",
-				"input"
+				"input",
+				"panel",
+				"produced"
 			]) blurs[k] = num(bl[k], DEFAULT_CONFIG.blurs[k]);
 			const bgType = [
 				"video",
@@ -728,6 +773,8 @@ window.__ModuleLoader__.load({
 				regenerateOnReload: typeof c.regenerateOnReload === "boolean" ? c.regenerateOnReload : DEFAULT_CONFIG.regenerateOnReload,
 				chatTextOpacity: clamp01(c.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity),
 				trajectoryOpacity: clamp01(c.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity),
+				panelOpacity: clamp01(c.panelOpacity, DEFAULT_CONFIG.panelOpacity),
+				producedOpacity: clamp01(c.producedOpacity, DEFAULT_CONFIG.producedOpacity),
 				profiles: adoptProfiles(c.profiles),
 				rotation: adoptRotation(c.rotation),
 				schedule: adoptSchedule(c.schedule),
@@ -748,7 +795,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),
@@ -759,7 +807,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),
@@ -771,6 +822,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";
@@ -810,19 +865,20 @@ window.__ModuleLoader__.load({
 		function persistConfig() {
 			rpcCall("writeConfig", { config: cfg });
 		}
-		/** Load the persisted theme (config + wallpaper + video URL) from the node half.
-		*  Resolves true when the server advanced a due wallpaper rotation during the
-		*  read — the restored wallpaper is then already the new pick. */
+		/** 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;
@@ -837,7 +893,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 {
@@ -864,7 +920,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"
@@ -884,6 +973,20 @@ 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 {
@@ -934,7 +1037,7 @@ window.__ModuleLoader__.load({
 			}
 		}
 		/** Activate a rotation item: the server copies its bytes into the wallpaper
-		*  slot and returns the freshly sniffed data URL for immediate display. */
+		*  slot and returns the serve URL for immediate display. */
 		async function rotationActivate(index) {
 			if (!rpcCallFn) return {
 				ok: false,
@@ -958,6 +1061,88 @@ 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);
+		}
+		/** 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) {
 			const l = v * (1 - s / 2);
@@ -1164,124 +1349,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 += (.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) {
-							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. */
@@ -1294,26 +1474,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). */
@@ -1355,20 +1531,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");
@@ -1383,7 +1581,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;
@@ -1680,6 +1877,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() {
@@ -1703,8 +1937,154 @@ 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 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 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 ? "#07080c" : "#f4f6f9";
+				g.fillRect(0, 0, w, h);
+				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.moveTo(x, y0);
+					g.lineTo(x, y1);
+					g.stroke();
+				}
+				t += .016;
+			};
+			return {
+				canvas: c,
+				...newRaf(c, draw),
+				snapshot: () => c.toDataURL("image/jpeg", .94)
+			};
+		}
+		function createContour(params, canvas) {
+			const c = canvas ?? createCanvas();
+			fitLiveCanvas(c);
+			const g = c.getContext("2d", { alpha: false });
+			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(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);
@@ -1909,6 +2289,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();
@@ -2056,11 +2444,77 @@ window.__ModuleLoader__.load({
 		}
 		const SETTINGS_PANEL_SEL = "[role=\"dialog\"][aria-modal=\"true\"][aria-labelledby]";
 		const SETTINGS_STYLE_RULE = `${SETTINGS_PANEL_SEL}{background:var(--dsh-any-bg-settings-surface,var(--dsw-alias-bg-layer-2));backdrop-filter:var(--dsh-any-blur-settings,none);--dsw-alias-bg-layer-1:var(--dsh-any-bg-settings-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-bg-settings-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-bg-settings-layer-3)}${SETTINGS_PANEL_SEL} .dab-card{backdrop-filter:var(--dsh-any-blur-card-panels,none);-webkit-backdrop-filter:var(--dsh-any-blur-card-panels,none)}`;
-		const INPUT_BLUR_RULE = "[data-composer-card],[data-cordis-panel]{-webkit-backdrop-filter:var(--dsh-any-input-blur,none);backdrop-filter:var(--dsh-any-input-blur,none)}[data-cordis-panel]{--dsw-specific-menu:var(--dsh-any-op-menu-cordis)!important}";
+		const POPOVER_BLUR_RULE = "[role=\"menu\"]:not([data-dockkit-tab-menu]),[role=\"listbox\"],body > [role=\"tree\"],body > [role=\"dialog\"]:not([aria-modal=\"true\"]){backdrop-filter:var(--dsh-any-blur-card-panels,none);-webkit-backdrop-filter:var(--dsh-any-blur-card-panels,none)}";
+		const INPUT_BLUR_RULE = "[data-composer-card]{position:relative;isolation:isolate}[data-composer-card]::before{content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;-webkit-backdrop-filter:var(--dsh-any-input-blur,none);backdrop-filter:var(--dsh-any-input-blur,none)}[data-cordis-panel]{-webkit-backdrop-filter:var(--dsh-any-input-blur,none);backdrop-filter:var(--dsh-any-input-blur,none)}[data-cordis-panel]{--dsw-specific-menu:var(--dsh-any-op-menu-cordis)!important}";
 		function applyInputBlur(px) {
 			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");
+		}
+		const PANEL_TOKEN_RULE = "[data-dsh-bottom-panel],[data-sidebar-right-panel]{--dsw-alias-bg-base:var(--dsh-any-panel-bg-base);--dsw-alias-bg-layer-1:var(--dsh-any-panel-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-panel-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-panel-layer-3);position:fixed!important;z-index:26!important}[data-sidebar-right-panel][data-sidebar-right-panel=\"fullscreen\"]{z-index:40!important}";
+		const PANEL_BLUR_RULE = "[data-dsh-bottom-panel],[data-sidebar-right-panel]{-webkit-backdrop-filter:var(--dsh-any-blur-panel,none);backdrop-filter:var(--dsh-any-blur-panel,none)}";
+		const PRODUCED_RULE = "[data-code-block-content] pre,[data-code-block-banner],[data-composer-chip],:not(pre)>code{-webkit-backdrop-filter:var(--dsh-any-blur-prod,none);backdrop-filter:var(--dsh-any-blur-prod,none)}@supports (background:color-mix(in srgb,red 50%,transparent)){.md-code-block{background:transparent!important}.md-code-block>div{background-color:transparent!important}.md-code-block [data-code-block-content] pre{background-color:color-mix(in srgb,var(--dsl-code-block-background,var(--dsw-alias-markdown-code-block,transparent)) var(--dsh-any-prod-pct,100%),transparent)!important}.md-code-block [data-code-block-banner]{background-color:color-mix(in srgb,var(--dsl-code-block-banner-background-color,var(--dsw-alias-markdown-code-block-banner,transparent)) var(--dsh-any-prod-pct,100%),transparent)!important}[data-code-block-content]{--shiki-background:color-mix(in srgb,var(--dsw-alias-markdown-code-block,var(--dsl-code-block-background,transparent)) var(--dsh-any-prod-pct,100%),transparent)}:not(pre)>code{background-color:color-mix(in srgb,var(--dsw-alias-markdown-inline-code,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}[data-composer-chip]>*{background-color:color-mix(in srgb,var(--dsw-alias-interactive-bg-hover,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}}";
+		/** The host's own default colors for the panel layer tokens, used when the
+		*  plugin has no palette (no picked color, no wallpaper verdict, no forced
+		*  scheme). Without these the panel's re-scope would resolve to invalid vars
+		*  and the panel would have no background — reading the host's resolved value
+		*  keeps the panel opaque by default and lets the slider retint it like every
+		*  other homepage part. Reads from the live `:root` so a custom host skin or
+		*  theme override wins. */
+		function readHostLayerTokens() {
+			if (typeof getComputedStyle === "undefined") return null;
+			const root = document.documentElement;
+			const cs = getComputedStyle(root);
+			const base = cs.getPropertyValue("--dsw-alias-bg-base").trim();
+			const layer1 = cs.getPropertyValue("--dsw-alias-bg-layer-1").trim();
+			const layer2 = cs.getPropertyValue("--dsw-alias-bg-layer-2").trim();
+			const layer3 = cs.getPropertyValue("--dsw-alias-bg-layer-3").trim();
+			if (!base && !layer1 && !layer2 && !layer3) return null;
+			return {
+				base,
+				layer1,
+				layer2,
+				layer3
+			};
+		}
+		function applyPanelOverrides(op) {
+			const tokens = paletteTokens();
+			const root = document.documentElement;
+			if (tokens !== null) {
+				const base = tokens["--dsw-alias-bg-base"];
+				const layer1 = tokens["--dsw-alias-bg-layer-1"];
+				const layer2 = tokens["--dsw-alias-bg-layer-2"];
+				const layer3 = tokens["--dsw-alias-bg-layer-3"];
+				if (base !== void 0) root.style.setProperty("--dsh-any-panel-bg-base", toRgba(base, op));
+				if (layer1 !== void 0) root.style.setProperty("--dsh-any-panel-layer-1", toRgba(layer1, op));
+				if (layer2 !== void 0) root.style.setProperty("--dsh-any-panel-layer-2", toRgba(layer2, op));
+				if (layer3 !== void 0) root.style.setProperty("--dsh-any-panel-layer-3", toRgba(layer3, op));
+				return;
+			}
+			const host = readHostLayerTokens();
+			if (host === null) {
+				root.style.setProperty("--dsh-any-panel-bg-base", "transparent");
+				root.style.setProperty("--dsh-any-panel-layer-1", "transparent");
+				root.style.setProperty("--dsh-any-panel-layer-2", "transparent");
+				root.style.setProperty("--dsh-any-panel-layer-3", "transparent");
+				return;
+			}
+			if (host.base) root.style.setProperty("--dsh-any-panel-bg-base", toRgba(host.base, op));
+			if (host.layer1) root.style.setProperty("--dsh-any-panel-layer-1", toRgba(host.layer1, op));
+			if (host.layer2) root.style.setProperty("--dsh-any-panel-layer-2", toRgba(host.layer2, op));
+			if (host.layer3) root.style.setProperty("--dsh-any-panel-layer-3", toRgba(host.layer3, op));
+		}
+		function applyPanelBlur(px) {
+			if (px > 0) document.documentElement.style.setProperty("--dsh-any-blur-panel", `blur(${px}px)`);
+			else document.documentElement.style.removeProperty("--dsh-any-blur-panel");
+		}
 		function applySettingsOverrides(op) {
 			const [h, s, l] = rColor();
 			const tokens = genTokens(h, s, l, rColorScheme()).tokens;
@@ -2099,14 +2553,16 @@ window.__ModuleLoader__.load({
 				return;
 			}
 			const url = rWp();
-			if (url) extractWallpaperColor(url, cfg.backgroundType === "video" ? rVideoBgState() : rBgState()).then((hsl) => {
-				if (hsl) {
-					cfg.color = hsl;
-					colorAdoptedListener?.(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. */
@@ -2176,7 +2632,7 @@ window.__ModuleLoader__.load({
 		let frameEl = null;
 		let sidebarEl = null;
 		let centerEl = null;
-		let detailsEl = null;
+		let rightEl = null;
 		const PART_BLUR_CLASS = "dab-part-blur";
 		const PART_UNDERLAY_CLASS = "dab-part-underlay";
 		const PART_BLUR_RULE = `${PART_BLUR_CLASS}{isolation:isolate}.${PART_UNDERLAY_CLASS}{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;backdrop-filter:var(--dsh-any-part-blur,none);-webkit-backdrop-filter:var(--dsh-any-part-blur,none)}`;
@@ -2188,16 +2644,32 @@ window.__ModuleLoader__.load({
 			partBlurStyleEl.textContent = PART_BLUR_RULE;
 			document.head.appendChild(partBlurStyleEl);
 		}
+		/** Find one direct child of `frame` whose `[data-rightbar-col]` marker matches.
+		*  The rightbar is its own grid track, NOT a "details" twin of the center
+		*  column, so it must never receive the main-bg tint or blur underlay. */
+		function findRightbarInFrame(frame) {
+			for (let i = 0; i < frame.children.length; i++) {
+				const child = frame.children[i];
+				if (child instanceof HTMLElement && child.dataset.rightbarCol !== void 0) return child;
+			}
+			return null;
+		}
 		function discoverParts() {
 			const overlay = document.querySelector("[data-shell-overlay]");
 			if (overlay === null) return;
 			const frame = overlay.parentElement;
 			if (frame === null) return;
 			frameEl = frame;
+			rightEl = findRightbarInFrame(frame);
 			const idx = Array.from(frame.children).indexOf(overlay);
-			sidebarEl = frame.children[idx - 3] ?? null;
-			centerEl = frame.children[idx - 2] ?? null;
-			detailsEl = frame.children[idx - 1] ?? null;
+			if (rightEl !== null) {
+				const rightIdx = Array.from(frame.children).indexOf(rightEl);
+				sidebarEl = frame.children[rightIdx - 2] ?? null;
+				centerEl = frame.children[rightIdx - 1] ?? null;
+			} else {
+				sidebarEl = frame.children[idx - 3] ?? null;
+				centerEl = frame.children[idx - 2] ?? null;
+			}
 		}
 		function setBlur(el, px) {
 			if (el === null) return;
@@ -2229,10 +2701,14 @@ window.__ModuleLoader__.load({
 			if (px > 0) document.documentElement.style.setProperty("--dsh-any-blur-settings", `blur(${px}px)`);
 			else document.documentElement.style.removeProperty("--dsh-any-blur-settings");
 		}
-		/** Apply the main-background opacity to the center/details columns instead of
+		/** Apply the main-background opacity to the center column instead of
 		*  the frame. The frame's translucent bg-base sits UNDER the sidebar, so
 		*  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. */
+		*  the alpha onto the column keeps the sidebar owned by its own slider. The
+		*  rightbar (DSH 0.1.5-rc.1+) is intentionally NOT tinted here — it sits on
+		*  its own grid track, paints its own surfaces from its own tokens, and
+		*  inheriting the main-bg tint would blend it into the page and make the
+		*  right panel disappear. */
 		function applyPartOpacities(ops) {
 			const tokens = paletteTokens();
 			if (tokens === null) return;
@@ -2241,12 +2717,12 @@ window.__ModuleLoader__.load({
 			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";
+			if (rightEl !== null) rightEl.style.background = "";
 		}
 		/** Blur of the option panels inside the settings dialog (.dab-card), owned by
 		*  the "dialog option panel" (card) blur slider. Written as a plugin-owned
 		*  variable consumed by SETTINGS_STYLE_RULE — deliberately NOT applied to the
-		*  homepage center/details columns, which this slider must never touch. */
+		*  homepage center column, which this slider must never touch. */
 		function applyCardPanelsBlur(px) {
 			if (px > 0) document.documentElement.style.setProperty("--dsh-any-blur-card-panels", `blur(${px}px)`);
 			else document.documentElement.style.removeProperty("--dsh-any-blur-card-panels");
@@ -2257,12 +2733,31 @@ window.__ModuleLoader__.load({
 			setBlur(frameEl, 0);
 			setBlur(sidebarEl, blurs.sidebar);
 			setBlur(centerEl, blurs.bg);
-			setBlur(detailsEl, blurs.bg);
+			setBlur(rightEl, 0);
+			applyBgBlurGlobal(blurs.bg);
 			applyCardPanelsBlur(blurs.card);
 			applySettingsBlur(blurs.settings);
 			applyInputBlur(blurs.input);
+			applyPanelBlur(blurs.panel);
+			applyProduced();
 			applyViewCards();
 		}
+		/** Produced/artifact surfaces (conversation code blocks + their banner +
+		*  composer chips): re-write the root blur and the alpha percentage consumed by
+		*  PRODUCED_RULE. The percentage is an alpha for the surface's OWN host color —
+		*  1 (100%) reproduces the untouched host look and lowering it fades exactly
+		*  that color out — so no palette sampling is involved and the surfaces keep
+		*  following the active theme/wallpaper color on their own. */
+		function applyProduced() {
+			const px = rBlurs().produced;
+			const root = document.documentElement;
+			if (px > 0) root.style.setProperty("--dsh-any-blur-prod", `blur(${px}px)`);
+			else root.style.removeProperty("--dsh-any-blur-prod");
+			let opacity = rProducedOpacity();
+			if (opacity < 0) opacity = 0;
+			if (opacity > 1) opacity = 1;
+			root.style.setProperty("--dsh-any-prod-pct", `${Math.round(opacity * 100)}%`);
+		}
 		/** Live per-part blur update during slider drag (no full re-apply). */
 		function setPartBlur(part, v) {
 			if (part === "settings") {
@@ -2277,6 +2772,14 @@ window.__ModuleLoader__.load({
 				applyInputBlur(v);
 				return;
 			}
+			if (part === "panel") {
+				applyPanelBlur(v);
+				return;
+			}
+			if (part === "produced") {
+				applyProduced();
+				return;
+			}
 			if (part === "chat" || part === "trajectory") {
 				applyViewCards();
 				return;
@@ -2284,7 +2787,7 @@ window.__ModuleLoader__.load({
 			discoverParts();
 			if (part === "bg") {
 				setBlur(centerEl, v);
-				setBlur(detailsEl, v);
+				applyBgBlurGlobal(v);
 			} else setBlur(sidebarEl, v);
 		}
 		const VIEW_CARDS = [{
@@ -2484,7 +2987,7 @@ window.__ModuleLoader__.load({
 		function watchParts() {
 			if (partsObserver !== null || typeof MutationObserver === "undefined") return;
 			partsObserver = new MutationObserver(() => {
-				if (frameEl !== null && sidebarEl !== null && centerEl !== null && detailsEl !== null && document.body.contains(frameEl) && viewTargets.every((el) => el !== null && document.body.contains(el))) return;
+				if (frameEl !== null && sidebarEl !== null && centerEl !== null && rightEl !== null && document.body.contains(frameEl) && viewTargets.every((el) => el !== null && document.body.contains(el))) return;
 				applyPartBlurs(rBlurs());
 				applyPartOpacities(rOps());
 			});
@@ -2554,17 +3057,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;
@@ -2575,8 +3079,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;
@@ -2599,9 +3106,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;
@@ -2640,6 +3145,7 @@ window.__ModuleLoader__.load({
 		}
 		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. */
@@ -2652,6 +3158,7 @@ window.__ModuleLoader__.load({
 			if (dark !== null) verdictListener?.();
 		}
 		function updateWpVerdict(url) {
+			const gen = ++verdictGen;
 			if (url === null) {
 				applyVerdict(null);
 				return;
@@ -2661,7 +3168,7 @@ window.__ModuleLoader__.load({
 				return;
 			}
 			analyzeFrameDark(url).then((dark) => {
-				if (dark === null) return;
+				if (dark === null || gen !== verdictGen) return;
 				wpVerdict = {
 					url,
 					dark
@@ -2791,10 +3298,12 @@ window.__ModuleLoader__.load({
 				setBgDark(null);
 			}
 			if (rHasColor() || rBgDark() !== null || rSchemeOverride() !== "auto") applyCustomTokens(rOps());
+			else if (!url) clearThemeTokens();
 			if (rHasColor()) {
 				applySettingsOverrides(rSop());
 				applyTrajectoryOverrides(rTrajectoryOpacity());
 			}
+			applyPanelOverrides(rPanelOpacity());
 			applyPartBlurs(rBlurs());
 		}
 		function teardownWp() {
@@ -2822,6 +3331,14 @@ 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");
+			document.documentElement.style.removeProperty("--dsh-any-panel-bg-base");
+			document.documentElement.style.removeProperty("--dsh-any-panel-layer-1");
+			document.documentElement.style.removeProperty("--dsh-any-panel-layer-2");
+			document.documentElement.style.removeProperty("--dsh-any-panel-layer-3");
+			document.documentElement.style.removeProperty("--dsh-any-blur-panel");
+			document.documentElement.style.removeProperty("--dsh-any-blur-prod");
+			document.documentElement.style.removeProperty("--dsh-any-prod-pct");
 			for (const v of Object.values(OPACITY_VARS)) document.documentElement.style.removeProperty(v);
 			baseTokenKey = "";
 			lastBgKey = "";
@@ -2835,10 +3352,10 @@ window.__ModuleLoader__.load({
 			setBlur(frameEl, 0);
 			setBlur(sidebarEl, 0);
 			setBlur(centerEl, 0);
-			setBlur(detailsEl, 0);
+			setBlur(rightEl, 0);
 			if (frameEl !== null) frameEl.style.removeProperty("background");
 			if (centerEl !== null) centerEl.style.removeProperty("background");
-			if (detailsEl !== null) detailsEl.style.removeProperty("background");
+			if (rightEl !== null) rightEl.style.removeProperty("background");
 			stopWatchingParts();
 		}
 		/** Live wallpaper-opacity updates during slider drag (no full re-apply). */
@@ -2912,56 +3429,6 @@ window.__ModuleLoader__.load({
 				v.src = url;
 			});
 		}
-		//#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));
-		}
-		/** 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;
-			});
-		}
 		const UI_CSS = `
 /* The section is rendered INLINE inside the host settings dialog's content
  * column: the host provides the modal chrome (backdrop, centering, closing).
@@ -3031,6 +3498,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)}
 
@@ -3041,11 +3509,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}
 
@@ -3095,7 +3571,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}
@@ -3126,14 +3602,15 @@ window.__ModuleLoader__.load({
 /* ── 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}
+.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}
-.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);transition:border-color .22s ease}
-.dab-profile-row.is-active{border-color:color-mix(in srgb,var(--dsw-alias-brand-primary) 45%,transparent)}
+.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}
@@ -3143,14 +3620,22 @@ window.__ModuleLoader__.load({
 .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)}
-.dab-schedule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:12px}
-.dab-schedule-cell{min-width:0}
+/* 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)}
+.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}
@@ -3184,6 +3669,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)}}
@@ -3322,6 +3810,12 @@ window.__ModuleLoader__.load({
 				})
 			]
 		});
+		/** Bottom workbench panel (dsh-better-sidebar): a window with a docked strip. */
+		const PanelIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
+			size,
+			className,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.4 2.7h11.2v10.6H2.4z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.4 10.1h11.2" })]
+		});
 		const SlidersIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
 			size,
 			className,
@@ -3491,6 +3985,16 @@ window.__ModuleLoader__.load({
 			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
 		/**
@@ -4134,12 +4638,12 @@ window.__ModuleLoader__.load({
 		}
 		function ColorPage({ p, notify }) {
 			const { t, hue, sat, lit, setColor, extractColor, setSchemeOverride, useStore } = p;
-			const store = useStore((s) => s);
-			const storeUrl = store.url;
-			const schemeOverride = store.schemeOverride;
+			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
@@ -4411,6 +4915,65 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/env.ts
+		/**
+		* Host capability detection — which third-party plugins are actually present.
+		*
+		* The host exposes no plugin registry on the client context, so presence is
+		* inferred from the stable DOM markers those plugins mount. Detection runs
+		* once (plugin boot) and is re-armed by a cheap body-level MutationObserver so
+		* a plugin that mounts after this one still flips the cached verdict. The
+		* verdict is sticky-true for the session: whether a detected plugin's surface
+		* is currently collapsed must not hide the settings that govern it.
+		*/
+		/** Persistent container + surfaces dsh-better-sidebar mounts when loaded.
+		*  `[data-dsh-better-sidebar]` is the plugin's host wrapper — always appended
+		*  to document.body on mount — so it is the authoritative "plugin is loaded"
+		*  signal and the body childList observer fires exactly when it appears. The
+		*  panel surfaces we actually style are listed only as reinforcement: they are
+		*  conditionally rendered (collapsed panels drop them), so they must never be
+		*  the sole signal. */
+		const BETTER_SIDEBAR_MARKERS = [
+			"[data-dsh-better-sidebar]",
+			"[data-dsh-panel-host]",
+			"[data-dsh-bottom-panel]",
+			"[data-sidebar-right-panel]"
+		];
+		let betterSidebar = false;
+		const subs = /* @__PURE__ */ new Set();
+		/** Read snapshot of whether the better-sidebar plugin is present. */
+		function rBetterSidebar() {
+			return betterSidebar;
+		}
+		function emit() {
+			subs.forEach((cb) => cb());
+		}
+		function sync() {
+			if (document.querySelector(BETTER_SIDEBAR_MARKERS.join(",")) !== null && !betterSidebar) {
+				betterSidebar = true;
+				emit();
+			}
+		}
+		/** React hook: re-renders the caller when better-sidebar presence changes. */
+		function useBetterSidebar() {
+			return (0, react.useSyncExternalStore)(subscribe, rBetterSidebar);
+		}
+		/** Subscribe to verdict changes. */
+		function subscribe(cb) {
+			subs.add(cb);
+			return () => {
+				subs.delete(cb);
+			};
+		}
+		/** Start detection (probe once, then watch body mounts). Returns an
+		*  unsubscribe for plugin teardown. */
+		function startBetterSidebarWatch() {
+			sync();
+			const observer = new MutationObserver(sync);
+			observer.observe(document.body, { childList: true });
+			return () => observer.disconnect();
+		}
+		//#endregion
 		//#region src/client/components/pages/InterfacePage.tsx
 		const PARTS = [
 			{
@@ -4447,10 +5010,22 @@ window.__ModuleLoader__.load({
 				isTrajectory: true,
 				labelKey: "uiTrajectory",
 				Icon: TrajectoryIcon
+			},
+			{
+				isProduced: true,
+				labelKey: "uiProduced",
+				Icon: TextIcon
+			},
+			{
+				isPanel: true,
+				labelKey: "uiPanelRegion",
+				Icon: PanelIcon
 			}
 		];
 		function InterfacePage({ p }) {
-			const { t, setOps, setBlurs, setSop } = p;
+			const { t, setOps, setBlurs, setSop, setPanelOp } = p;
+			const hasBetterSidebar = useBetterSidebar();
+			const parts = PARTS.filter((part) => !(part.isPanel && !hasBetterSidebar));
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 				className: "dab-head dab-rise",
 				style: { "--d": 0 },
@@ -4470,11 +5045,11 @@ window.__ModuleLoader__.load({
 				]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "dab-grid-parts",
-				children: PARTS.map((part, i) => {
-					const { labelKey, Icon, isSettings, isChat, isTrajectory } = part;
+				children: parts.map((part, i) => {
+					const { labelKey, Icon, isSettings, isChat, isTrajectory, isPanel, isProduced } = part;
 					const opKey = part.opKey;
-					const blurKey = isChat ? "chat" : isTrajectory ? "trajectory" : isSettings ? "settings" : opKey;
-					const opacity = isChat ? rChatTextOpacity() : isTrajectory ? rTrajectoryOpacity() : isSettings ? rSop() : rOps()[opKey];
+					const blurKey = isChat ? "chat" : isTrajectory ? "trajectory" : isSettings ? "settings" : isPanel ? "panel" : isProduced ? "produced" : opKey;
+					const opacity = isChat ? rChatTextOpacity() : isTrajectory ? rTrajectoryOpacity() : isSettings ? rSop() : isPanel ? rPanelOpacity() : isProduced ? rProducedOpacity() : rOps()[opKey];
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "dab-card dab-card-hover dab-rise",
 						style: { "--d": i + 1 },
@@ -4514,6 +5089,12 @@ window.__ModuleLoader__.load({
 									} else if (isSettings) {
 										cfg.settingsOpacity = op;
 										applySettingsOverrides(op);
+									} else if (isPanel) {
+										cfg.panelOpacity = op;
+										applyPanelOverrides(op);
+									} else if (isProduced) {
+										cfg.producedOpacity = op;
+										applyProduced();
 									} else {
 										const ops = { ...rOps() };
 										ops[opKey] = op;
@@ -4533,7 +5114,12 @@ window.__ModuleLoader__.load({
 										applyTrajectoryOverrides(op);
 										saveConfig();
 									} else if (isSettings) setSop(op);
-									else {
+									else if (isPanel) setPanelOp(op);
+									else if (isProduced) {
+										cfg.producedOpacity = op;
+										applyProduced();
+										saveConfig();
+									} else {
 										const ops = { ...rOps() };
 										ops[opKey] = op;
 										setOps(ops);
@@ -4781,13 +5367,12 @@ window.__ModuleLoader__.load({
 			}
 		];
 		function BackgroundPage({ p }) {
-			const { t, setWp, setVideo, setWop, setBl, setBgType, setGeneratedBg, regenerateBg, setRegenerateOnReload, setRotation, addRotationItems, removeRotationItem, rotateNow, useStore } = p;
-			const store = useStore((s) => s);
-			const storeUrl = store.url;
-			const backgroundType = store.backgroundType;
-			const generatedBg = store.generatedBg;
-			const regenerateOnReload = store.regenerateOnReload;
-			const rotation = store.rotation;
+			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);
@@ -4803,13 +5388,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) => {
@@ -4827,12 +5421,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;
@@ -4847,10 +5446,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
@@ -4881,9 +5482,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;
 				}
 			};
@@ -4938,6 +5543,7 @@ window.__ModuleLoader__.load({
 									type: "button",
 									className: "dab-btn",
 									onClick: () => {
+										setPaused(false);
 										regenerateBg();
 										setSpinTick((x) => x + 1);
 									},
@@ -4945,7 +5551,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")]
 								})]
 							})
@@ -5006,7 +5612,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")]
 								}),
@@ -5019,21 +5625,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",
@@ -5213,9 +5812,10 @@ window.__ModuleLoader__.load({
 					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}` }),
@@ -5244,7 +5844,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" : ""}`,
@@ -5263,7 +5864,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" : ""}`,
@@ -5353,11 +5957,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", {
@@ -5452,7 +6071,9 @@ window.__ModuleLoader__.load({
 			settings: 0,
 			chat: 0,
 			trajectory: 0,
-			input: 0
+			input: 0,
+			panel: 0,
+			produced: 0
 		};
 		const BUILTIN_PRESETS = [
 			{
@@ -5470,7 +6091,9 @@ window.__ModuleLoader__.load({
 					wallpaperOpacity: 1,
 					blur: 0,
 					chatTextOpacity: 0,
-					trajectoryOpacity: 1
+					trajectoryOpacity: 1,
+					panelOpacity: 1,
+					producedOpacity: 1
 				}
 			},
 			{
@@ -5494,13 +6117,16 @@ window.__ModuleLoader__.load({
 						card: 12,
 						settings: 20,
 						trajectory: 8,
-						input: 14
+						input: 14,
+						panel: 12
 					},
 					settingsOpacity: .88,
 					wallpaperOpacity: 1,
 					blur: 0,
 					chatTextOpacity: 0,
-					trajectoryOpacity: .85
+					trajectoryOpacity: .85,
+					panelOpacity: .85,
+					producedOpacity: 1
 				}
 			},
 			{
@@ -5518,7 +6144,9 @@ window.__ModuleLoader__.load({
 					wallpaperOpacity: 1,
 					blur: 0,
 					chatTextOpacity: 0,
-					trajectoryOpacity: 1
+					trajectoryOpacity: 1,
+					panelOpacity: 1,
+					producedOpacity: 1
 				}
 			},
 			{
@@ -5542,13 +6170,16 @@ window.__ModuleLoader__.load({
 						card: 14,
 						settings: 22,
 						trajectory: 10,
-						input: 16
+						input: 16,
+						panel: 16
 					},
 					settingsOpacity: .85,
 					wallpaperOpacity: .92,
 					blur: 2,
 					chatTextOpacity: 0,
-					trajectoryOpacity: .8
+					trajectoryOpacity: .8,
+					panelOpacity: .8,
+					producedOpacity: 1
 				}
 			},
 			{
@@ -5572,13 +6203,16 @@ window.__ModuleLoader__.load({
 						card: 10,
 						settings: 18,
 						trajectory: 6,
-						input: 20
+						input: 20,
+						panel: 18
 					},
 					settingsOpacity: .8,
 					wallpaperOpacity: 1,
 					blur: 0,
 					chatTextOpacity: 0,
-					trajectoryOpacity: .78
+					trajectoryOpacity: .78,
+					panelOpacity: .75,
+					producedOpacity: 1
 				}
 			},
 			{
@@ -5600,7 +6234,9 @@ window.__ModuleLoader__.load({
 					wallpaperOpacity: 1,
 					blur: 0,
 					chatTextOpacity: 0,
-					trajectoryOpacity: 1
+					trajectoryOpacity: 1,
+					panelOpacity: 1,
+					producedOpacity: 1
 				}
 			}
 		];
@@ -5618,10 +6254,9 @@ window.__ModuleLoader__.load({
 		}
 		function ProfilePage({ p, notify }) {
 			const { t, exportTheme, importTheme, saveProfile, applyProfile, deleteProfile, applyPreset, setSchedule, useStore } = p;
-			const store = useStore((s) => s);
-			const profiles = store.profiles;
-			const schedule = store.schedule;
-			const activeProfile = store.activeProfile;
+			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)("");
@@ -5694,11 +6329,12 @@ window.__ModuleLoader__.load({
 						children: t("presetGalleryTitle")
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "dab-preset-grid",
-						children: BUILTIN_PRESETS.map((ps) => {
+						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"));
@@ -5741,13 +6377,6 @@ window.__ModuleLoader__.load({
 						}),
 						nameOpen ? /* @__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",
@@ -5788,8 +6417,9 @@ window.__ModuleLoader__.load({
 							children: t("profilesEmpty")
 						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "dab-profile-list",
-							children: profiles.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							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", {
@@ -5810,10 +6440,10 @@ window.__ModuleLoader__.load({
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
-										className: `dab-btn dab-btn-ghost dab-btn-danger${confirmId === entry.id ? " dab-btn-confirm" : ""}`,
+										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")] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 13 })
+										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))
@@ -5844,93 +6474,103 @@ window.__ModuleLoader__.load({
 							style: { marginTop: 8 },
 							children: t("scheduleHint")
 						}),
-						schedule.enabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "dab-schedule-grid",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "dab-schedule-cell",
-									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",
-									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",
-									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.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 }))
+													]
+												})]
+											})]
+										})
+									]
 								})
-							]
-						}) : null
+							})
+						})
 					]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -6186,7 +6826,7 @@ window.__ModuleLoader__.load({
 			}, "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}${POPOVER_BLUR_RULE}${TRAJECTORY_STYLE_RULE}${INPUT_BLUR_RULE}${MOBILE_HEADER_RULE}${PANEL_TOKEN_RULE}${PANEL_BLUR_RULE}${PRODUCED_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);
@@ -6291,32 +6931,35 @@ window.__ModuleLoader__.load({
 			*  the full adaptation (host skin + editor wheel sync); the caller persists. */
 			const adoptWallpaperColor = async (dataUrl) => {
 				const hsl = await extractWallpaperColor(dataUrl, rBgState());
-				if (!hsl) return;
+				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 data URL through the normal image
+			*  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.dataUrl) {
+				if (!r.ok || !r.wallpaperUrl) {
 					console.warn("dsh-any-background: rotation activate failed", r.error);
 					return false;
 				}
-				setWpImageUrl(r.dataUrl);
-				if (cfg.backgroundType === "image") setWpUrl(r.dataUrl);
+				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(r.dataUrl);
+				if (cfg.backgroundType === "image") await adoptWallpaperColor(rWp());
 				applyThemeColor();
 				syncBg();
 				saveConfig();
@@ -6428,6 +7071,7 @@ window.__ModuleLoader__.load({
 			ctx.effect(() => () => {
 				teardownWp();
 			}, "dsh-any-background: wp cleanup");
+			ctx.effect(() => startBetterSidebarWatch(), "dsh-any-background: better-sidebar watch");
 			ctx.effect(() => ctx.on("theme/change", () => {
 				if (rHasColor() || rBgDark() !== null || rSchemeOverride() !== "auto") {
 					const snapshot = ctx.theme.getTheme();
@@ -6510,16 +7154,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();
@@ -6605,6 +7249,11 @@ window.__ModuleLoader__.load({
 						applySettingsOverrides(v);
 						saveConfig();
 					},
+					setPanelOp: (v) => {
+						cfg.panelOpacity = v;
+						applyPanelOverrides(v);
+						saveConfig();
+					},
 					extractColor: async () => {
 						const url = rWp();
 						if (!url) return false;
@@ -6624,23 +7273,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" });
@@ -6821,6 +7476,29 @@ window.__ModuleLoader__.load({
 					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;
 					}
 				};
 			};