dsh-any-background 0.1.8 → 0.2.1

package/lib/client.js

@@ -20,7 +20,7 @@ window.__ModuleLoader__.load({
 			pageProfile: "配置",
 			descColor: "拖动色轮或输入精确数值，整个界面的配色将实时跟随变化",
 			descInterface: "为主界面的各个区域单独调节透明度与模糊，营造空间层次感",
-			descBackground: "上传一张图片作为壁纸，或让算法为你实时生成动态背景",
+			descBackground: "上传一张图片或一段视频作为壁纸并自由摆放，或让算法为你实时生成动态背景",
 			descProfile: "将当前主题导出为文件备份，或从文件一键恢复完整配置",
 			colorTitle: "主题色",
 			colorHint: "在色轮外圈选择色相，在内部方形中调整饱和度和明度；双击滑块可恢复默认值",
@@ -32,20 +32,31 @@ window.__ModuleLoader__.load({
 			uiOpacityBg: "主背景",
 			uiOpacitySide: "侧边栏",
 			uiOpacityCard: "对话框中选项面板",
+			uiOpacityInput: "输入框与控件",
 			uiSop: "设置界面透明度",
+			uiChatRegion: "对话文本框",
+			uiTrajectory: "轨迹页",
 			bgTitle: "背景",
-			bgChoose: "选择图片",
+			bgChoose: "选择图片或视频",
 			bgRemove: "移除背景",
 			bgEdit: "编辑位置",
+			bgEditLocked: "仅「适应」模式可编辑位置",
 			wpOpacity: "背景透明度",
 			bgBlur: "背景模糊",
-			bgSourceImage: "图片",
+			bgModeTitle: "布局模式",
+			bgModeFit: "适应",
+			bgModeFill: "填充",
+			bgModeStretch: "拉伸",
+			bgModeTile: "平铺",
+			bgModeCenter: "居中",
+			bgVideoBadge: "视频",
+			bgSourceImage: "图片 / 视频",
 			bgSourceGenerated: "动态生成",
-			dropHint: "点击选择图片，或将图片拖到这里",
+			dropHint: "点击选择图片或视频，或将文件拖到这里",
 			liveBadge: "动态壁纸",
-			bgHint: "图片模式下悬停预览可编辑位置；动态生成模式下可选择类型、预设与参数。绑定种子后刷新页面壁纸保持不变，取消绑定则每次刷新随机换新",
+			bgHint: "「适应」布局模式下悬停预览可编辑图片/视频的位置与缩放（其余布局模式按模式自动排布）；动态生成模式下可选择类型、预设与参数。绑定种子后刷新页面壁纸保持不变，取消绑定则每次刷新随机换新",
 			editorTitle: "背景编辑器",
-			editorHint: "拖动移动图片，滚轮缩放大小",
+			editorHint: "拖动移动画面，滚轮缩放大小",
 			editorCommit: "确认",
 			editorCancel: "取消",
 			editorReset: "重置",
@@ -107,7 +118,7 @@ window.__ModuleLoader__.load({
 			pageProfile: "Profile",
 			descColor: "Drag the wheel or type exact values — the whole UI follows live",
 			descInterface: "Tune opacity and blur per surface to build depth",
-			descBackground: "Upload an image as wallpaper, or let the algorithm paint a live background",
+			descBackground: "Upload an image or a video as wallpaper and place it freely, or let the algorithm paint a live background",
 			descProfile: "Export the current theme as a file, or restore it from one",
 			colorTitle: "Theme color",
 			colorHint: "Pick hue on the outer ring, adjust saturation & lightness in the square; double-click a slider to reset",
@@ -119,18 +130,29 @@ window.__ModuleLoader__.load({
 			uiOpacityBg: "Main background",
 			uiOpacitySide: "Sidebar",
 			uiOpacityCard: "Cards & panels",
+			uiOpacityInput: "Input & controls",
 			uiSop: "Settings interface opacity",
+			uiChatRegion: "Conversation text frame",
+			uiTrajectory: "Trajectory view",
 			bgTitle: "Background",
-			bgChoose: "Choose image",
+			bgChoose: "Choose image or video",
 			bgRemove: "Remove background",
 			bgEdit: "Edit position",
+			bgEditLocked: "Position editing is only available in Fit mode",
 			wpOpacity: "Background opacity",
 			bgBlur: "Background blur",
-			bgSourceImage: "Image",
+			bgModeTitle: "Layout mode",
+			bgModeFit: "Fit",
+			bgModeFill: "Fill",
+			bgModeStretch: "Stretch",
+			bgModeTile: "Tile",
+			bgModeCenter: "Center",
+			bgVideoBadge: "Video",
+			bgSourceImage: "Image / Video",
 			bgSourceGenerated: "Generated",
-			dropHint: "Click to choose an image, or drop one here",
+			dropHint: "Click to choose an image or video, or drop one here",
 			liveBadge: "Live wallpaper",
-			bgHint: "In image mode hover the preview to edit position; in generated mode pick a type, preset and parameters. With the seed locked the wallpaper stays the same across refreshes; unlocked, every refresh randomizes it",
+			bgHint: "In Fit layout mode hover the preview to reposition and zoom the image/video (other modes arrange it automatically); in generated mode pick a type, preset and parameters. With the seed locked the wallpaper stays the same across refreshes; unlocked, every refresh randomizes it",
 			editorTitle: "Background editor",
 			editorHint: "Drag to move, scroll to zoom",
 			editorCommit: "Confirm",
@@ -191,13 +213,17 @@ window.__ModuleLoader__.load({
 			opacities: {
 				bg: .85,
 				sidebar: .93,
-				card: 1
+				card: 1,
+				input: 1
 			},
 			blurs: {
 				bg: 0,
 				sidebar: 0,
 				card: 0,
-				settings: 0
+				settings: 0,
+				chat: 0,
+				trajectory: 0,
+				input: 0
 			},
 			settingsOpacity: 1,
 			wallpaperOpacity: 1,
@@ -209,24 +235,68 @@ window.__ModuleLoader__.load({
 				iw: 0,
 				ih: 0
 			},
+			videoBgState: {
+				zoom: 1,
+				x: 0,
+				y: 0,
+				iw: 0,
+				ih: 0
+			},
 			backgroundType: "image",
+			bgMode: "fit",
+			videoMime: null,
 			generatedBg: null,
-			regenerateOnReload: false
+			regenerateOnReload: false,
+			chatTextOpacity: 0,
+			trajectoryOpacity: 1
 		};
+		const clamp01 = (n, def) => typeof n === "number" ? Math.min(1, Math.max(0, n)) : def;
 		let cfg = {
 			...DEFAULT_CONFIG,
 			opacities: { ...DEFAULT_CONFIG.opacities },
 			blurs: { ...DEFAULT_CONFIG.blurs },
-			bgState: { ...DEFAULT_CONFIG.bgState }
+			bgState: { ...DEFAULT_CONFIG.bgState },
+			videoBgState: { ...DEFAULT_CONFIG.videoBgState }
 		};
 		let wpImageUrl = null;
 		let wpUrl = null;
+		let wpVideoUrl = null;
+		/** Captured video frame standing in for previews/color extraction (still-image APIs). */
+		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 videoRev = 0;
+		function setWpVideoUrl(url, mime) {
+			if (url === null) {
+				wpVideoUrl = null;
+				wpVideoSnapshot = null;
+			} else {
+				videoRev++;
+				wpVideoUrl = url.startsWith("blob:") ? url : `${url}${url.includes("?") ? "&" : "?"}r=${videoRev}`;
+			}
+			if (wpVideoObjectUrl !== null && wpVideoObjectUrl !== url) {
+				URL.revokeObjectURL(wpVideoObjectUrl);
+				wpVideoObjectUrl = null;
+			}
+			if (url !== null && url.startsWith("blob:")) wpVideoObjectUrl = url;
+			cfg.videoMime = url ? mime : null;
+		}
+		function setWpVideoSnapshot(url) {
+			wpVideoSnapshot = url;
+		}
+		/** Release the in-session video object URL (plugin teardown). */
+		function disposeVideoObjectUrl() {
+			if (wpVideoObjectUrl !== null) {
+				URL.revokeObjectURL(wpVideoObjectUrl);
+				wpVideoObjectUrl = null;
+			}
+		}
 		function setBgState(s) {
 			cfg.bgState = s;
 		}
@@ -250,39 +320,78 @@ window.__ModuleLoader__.load({
 		function rWpImage() {
 			return wpImageUrl;
 		}
-		/** Display URL: the uploaded image when in image mode, else the generated snapshot. */
+		function rWpVideo() {
+			return wpVideoUrl;
+		}
+		function rBgMode() {
+			return cfg.bgMode ?? DEFAULT_CONFIG.bgMode;
+		}
+		function rChatTextOpacity() {
+			return clamp01(cfg.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity);
+		}
+		function rTrajectoryOpacity() {
+			return clamp01(cfg.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity);
+		}
+		/** Display URL: the uploaded image/video snapshot per active type, else the generated snapshot. */
 		function rWp() {
-			return cfg.backgroundType === "image" ? wpImageUrl : wpUrl;
+			if (cfg.backgroundType === "image") return wpImageUrl;
+			if (cfg.backgroundType === "video") return wpVideoSnapshot;
+			return wpUrl;
 		}
 		function rOps() {
 			const o = cfg.opacities ?? {};
-			return {
-				bg: typeof o.bg === "number" ? Math.min(1, Math.max(0, o.bg)) : DEFAULT_CONFIG.opacities.bg,
-				sidebar: typeof o.sidebar === "number" ? Math.min(1, Math.max(0, o.sidebar)) : DEFAULT_CONFIG.opacities.sidebar,
-				card: typeof o.card === "number" ? Math.min(1, Math.max(0, o.card)) : DEFAULT_CONFIG.opacities.card
-			};
+			const out = {};
+			for (const k of [
+				"bg",
+				"sidebar",
+				"card",
+				"input"
+			]) out[k] = clamp01(o[k], DEFAULT_CONFIG.opacities[k]);
+			return out;
 		}
 		function rBlurs() {
 			const b = cfg.blurs ?? {};
-			return {
-				bg: typeof b.bg === "number" ? Math.min(60, Math.max(0, b.bg)) : DEFAULT_CONFIG.blurs.bg,
-				sidebar: typeof b.sidebar === "number" ? Math.min(60, Math.max(0, b.sidebar)) : DEFAULT_CONFIG.blurs.sidebar,
-				card: typeof b.card === "number" ? Math.min(60, Math.max(0, b.card)) : DEFAULT_CONFIG.blurs.card,
-				settings: typeof b.settings === "number" ? Math.min(60, Math.max(0, b.settings)) : DEFAULT_CONFIG.blurs.settings
-			};
+			const out = {};
+			for (const k of [
+				"bg",
+				"sidebar",
+				"card",
+				"settings",
+				"chat",
+				"trajectory",
+				"input"
+			]) {
+				const v = b[k];
+				out[k] = typeof v === "number" ? Math.min(60, Math.max(0, v)) : DEFAULT_CONFIG.blurs[k];
+			}
+			return out;
 		}
 		function rWop() {
-			return typeof cfg.wallpaperOpacity === "number" ? Math.min(1, Math.max(0, cfg.wallpaperOpacity)) : DEFAULT_CONFIG.wallpaperOpacity;
+			return clamp01(cfg.wallpaperOpacity, DEFAULT_CONFIG.wallpaperOpacity);
 		}
 		function rBl() {
 			return typeof cfg.blur === "number" ? Math.min(60, Math.max(0, cfg.blur)) : DEFAULT_CONFIG.blur;
 		}
 		function rSop() {
-			return typeof cfg.settingsOpacity === "number" ? Math.min(1, Math.max(0, cfg.settingsOpacity)) : DEFAULT_CONFIG.settingsOpacity;
+			return clamp01(cfg.settingsOpacity, DEFAULT_CONFIG.settingsOpacity);
 		}
 		function rBgState() {
 			return cfg.bgState;
 		}
+		function rVideoBgState() {
+			return cfg.videoBgState;
+		}
+		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;
+		function adoptBgState(s) {
+			return {
+				zoom: num(s.zoom, 1),
+				x: num(s.x, 0),
+				y: num(s.y, 0),
+				iw: typeof s.iw === "number" && s.iw > 0 ? s.iw : 0,
+				ih: typeof s.ih === "number" && s.ih > 0 ? s.ih : 0
+			};
+		}
 		/** Move a possibly-absent partial config into the shape the UI reads. */
 		function adoptConfig(raw) {
 			const c = raw ?? {};
@@ -291,48 +400,64 @@ window.__ModuleLoader__.load({
 				c.color[1],
 				c.color[2]
 			] : null;
-			const bg = c.bgState ?? {};
 			const legacy = typeof c.opacity === "number" ? c.opacity : null;
 			const ops = c.opacities ?? {};
 			const bl = c.blurs ?? {};
-			const bgType = c.backgroundType === "mesh" || c.backgroundType === "shader" || c.backgroundType === "pattern" ? c.backgroundType : DEFAULT_CONFIG.backgroundType;
+			const blurs = {};
+			for (const k of [
+				"bg",
+				"sidebar",
+				"card",
+				"settings",
+				"chat",
+				"trajectory",
+				"input"
+			]) blurs[k] = num(bl[k], DEFAULT_CONFIG.blurs[k]);
+			const bgType = [
+				"video",
+				"mesh",
+				"shader",
+				"pattern"
+			].includes(c.backgroundType) ? c.backgroundType : DEFAULT_CONFIG.backgroundType;
+			const bgMode = [
+				"fit",
+				"fill",
+				"stretch",
+				"tile",
+				"center"
+			].includes(c.bgMode) ? c.bgMode : DEFAULT_CONFIG.bgMode;
 			const gen = c.generatedBg && typeof c.generatedBg === "object" ? c.generatedBg : null;
 			const generatedBg = gen && gen.type === bgType ? c.generatedBg : null;
 			cfg = {
 				color,
 				opacities: {
-					bg: typeof ops.bg === "number" ? ops.bg : legacy ?? DEFAULT_CONFIG.opacities.bg,
-					sidebar: typeof ops.sidebar === "number" ? ops.sidebar : legacy !== null ? Math.min(1, legacy + .08) : DEFAULT_CONFIG.opacities.sidebar,
-					card: typeof ops.card === "number" ? ops.card : DEFAULT_CONFIG.opacities.card
-				},
-				blurs: {
-					bg: typeof bl.bg === "number" ? bl.bg : DEFAULT_CONFIG.blurs.bg,
-					sidebar: typeof bl.sidebar === "number" ? bl.sidebar : DEFAULT_CONFIG.blurs.sidebar,
-					card: typeof bl.card === "number" ? bl.card : DEFAULT_CONFIG.blurs.card,
-					settings: typeof bl.settings === "number" ? bl.settings : DEFAULT_CONFIG.blurs.settings
-				},
-				settingsOpacity: typeof c.settingsOpacity === "number" ? c.settingsOpacity : DEFAULT_CONFIG.settingsOpacity,
-				wallpaperOpacity: typeof c.wallpaperOpacity === "number" ? c.wallpaperOpacity : DEFAULT_CONFIG.wallpaperOpacity,
-				blur: typeof c.blur === "number" ? c.blur : DEFAULT_CONFIG.blur,
-				bgState: {
-					zoom: typeof bg.zoom === "number" ? bg.zoom : 1,
-					x: typeof bg.x === "number" ? bg.x : 0,
-					y: typeof bg.y === "number" ? bg.y : 0,
-					iw: typeof bg.iw === "number" && bg.iw > 0 ? bg.iw : 0,
-					ih: typeof bg.ih === "number" && bg.ih > 0 ? bg.ih : 0
+					bg: num(ops.bg, legacy ?? DEFAULT_CONFIG.opacities.bg),
+					sidebar: num(ops.sidebar, legacy !== null ? Math.min(1, legacy + .08) : DEFAULT_CONFIG.opacities.sidebar),
+					card: num(ops.card, DEFAULT_CONFIG.opacities.card),
+					input: num(ops.input, DEFAULT_CONFIG.opacities.input)
 				},
+				blurs,
+				settingsOpacity: num(c.settingsOpacity, DEFAULT_CONFIG.settingsOpacity),
+				wallpaperOpacity: num(c.wallpaperOpacity, DEFAULT_CONFIG.wallpaperOpacity),
+				blur: num(c.blur, DEFAULT_CONFIG.blur),
+				bgState: adoptBgState(c.bgState ?? {}),
+				videoBgState: adoptBgState(c.videoBgState ?? {}),
 				backgroundType: bgType,
+				bgMode,
+				videoMime: typeof c.videoMime === "string" ? c.videoMime : null,
 				generatedBg: generatedBg ? normalizeGeneratedBg(generatedBg) : null,
-				regenerateOnReload: typeof c.regenerateOnReload === "boolean" ? c.regenerateOnReload : DEFAULT_CONFIG.regenerateOnReload
+				regenerateOnReload: typeof c.regenerateOnReload === "boolean" ? c.regenerateOnReload : DEFAULT_CONFIG.regenerateOnReload,
+				chatTextOpacity: clamp01(c.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity),
+				trajectoryOpacity: clamp01(c.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity)
 			};
 		}
 		function normalizeGeneratedBg(p) {
 			if (!p) return null;
 			if (p.type === "mesh") return {
 				type: "mesh",
-				seed: typeof p.seed === "number" ? p.seed : 0,
-				scale: typeof p.scale === "number" ? Math.min(3, Math.max(.3, p.scale)) : 1,
-				intensity: typeof p.intensity === "number" ? Math.min(1, Math.max(0, p.intensity)) : .6
+				seed: num(p.seed, 0),
+				scale: cl(p.scale, .3, 3, 1),
+				intensity: cl(p.intensity, 0, 1, .6)
 			};
 			if (p.type === "shader") return {
 				type: "shader",
@@ -341,8 +466,8 @@ window.__ModuleLoader__.load({
 					"nebula",
 					"noise"
 				].includes(p.preset) ? p.preset : "aurora",
-				speed: typeof p.speed === "number" ? Math.min(2, Math.max(0, p.speed)) : .3,
-				scale: typeof p.scale === "number" ? Math.min(3, Math.max(.3, p.scale)) : 1,
+				speed: cl(p.speed, 0, 2, .3),
+				scale: cl(p.scale, .3, 3, 1),
 				seed: typeof p.seed === "number" ? Math.floor(p.seed) : 0
 			};
 			return {
@@ -352,14 +477,18 @@ window.__ModuleLoader__.load({
 					"waves",
 					"poly"
 				].includes(p.preset) ? p.preset : "dots",
-				density: typeof p.density === "number" ? Math.min(1, Math.max(0, p.density)) : .5,
-				scale: typeof p.scale === "number" ? Math.min(3, Math.max(.3, p.scale)) : 1,
+				density: cl(p.density, 0, 1, .5),
+				scale: cl(p.scale, .3, 3, 1),
 				seed: typeof p.seed === "number" ? Math.floor(p.seed) : 0
 			};
 		}
 		//#endregion
 		//#region src/client/rpc.ts
 		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";
+		/** 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";
 		const rpcEndpoint = (method) => `${RPC_NS}/${method}`;
 		let rpcCallFn = null;
@@ -397,7 +526,7 @@ window.__ModuleLoader__.load({
 		function persistConfig() {
 			rpcCall("writeConfig", { config: cfg });
 		}
-		/** Load the persisted theme (config + wallpaper) from the node half. */
+		/** Load the persisted theme (config + wallpaper + video URL) from the node half. */
 		async function loadPersisted() {
 			const data = await rpcCall("read", {});
 			if (data && typeof data === "object") {
@@ -405,13 +534,34 @@ window.__ModuleLoader__.load({
 				if (d.config) adoptConfig(d.config);
 				if (typeof d.wallpaper === "string") setWpImageUrl(d.wallpaper);
 				else if (d.wallpaper === 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);
 			}
 		}
-		/** Persist a wallpaper (null removes it). One-shot large payload, no debounce. */
+		/** Persist a wallpaper (null removes it); one-shot, no debounce. */
 		function persistWallpaper(dataUrl) {
 			rpcCall("setWallpaper", { dataUrl });
 		}
+		/** Persist a background video (null removes it); resolves true once on disk,
+		*  so callers only switch playback to the serve URL after acceptance. */
+		async function persistVideo(dataUrl) {
+			return await rpcCall("setVideo", { dataUrl }) === true;
+		}
+		/** Upload a video's raw bytes over HTTP (MIME in Content-Type, body untouched
+		*  — no base64 inflation that would blow the RPC body limit on large clips). */
+		async function uploadVideo(blob, mime) {
+			try {
+				return (await fetch(VIDEO_UPLOAD_URL, {
+					method: "POST",
+					headers: { "Content-Type": mime || "application/octet-stream" },
+					body: blob
+				})).ok;
+			} catch (e) {
+				console.warn("dsh-any-background: video upload failed", e);
+				return false;
+			}
+		}
 		//#endregion
 		//#region src/client/utils/color.ts
 		function hsvToHsl(h, s, v) {
@@ -437,13 +587,8 @@ window.__ModuleLoader__.load({
 		* same token set, and applyWp / applyCustomTokens / applySettingsOverrides call
 		* this repeatedly (slider drags, viewport re-applies), so cache the last result
 		* and skip the 30+ hsl() string builds when nothing changed.
-		*
-		* This is the simple, pre-Material-You version: dark/light is decided only by
-		* lit < 0.55, and all tokens are derived directly from the picked hue/sat/lit.
-		* The optional palette argument is kept for API compatibility but ignored here,
-		* so saved picks never get rewritten by a wallpaper-derived palette.
 		*/
-		function genTokens(hue, sat, lit, _palette) {
+		function genTokens(hue, sat, lit) {
 			const key = `${hue}|${sat}|${lit}`;
 			if (tokensCacheKey === key && tokensCache) return tokensCache;
 			tokensCacheKey = key;
@@ -478,6 +623,7 @@ window.__ModuleLoader__.load({
 					"--dsw-alias-button-primary-hover": hsl(h(0), s(.1), Math.max(l(.28), .58)),
 					"--dsw-alias-button-primary-dimmed": hsl(h(0), s(0), l(.07)),
 					"--dsw-alias-button-elevated-fill": hsl(h(0), s(0), l(.04)),
+					"--dsw-alias-button-floating-hover": hsl(h(0), s(0), l(.1)),
 					"--dsw-alias-interactive-bg-hover": rgba(h(0), s(0), Math.max(l(.15), .4), .12),
 					"--dsw-alias-interactive-bg-active": rgba(h(0), s(0), Math.max(l(.15), .4), .2),
 					"--dsw-alias-markdown-code-block": hsl(h(0), s(0), l(-.06)),
@@ -489,6 +635,7 @@ window.__ModuleLoader__.load({
 					"--dsw-specific-sidebar-nav-item-active": hsl(h(0), s(0), l(.04)),
 					"--dsw-specific-sidebar-nav-item-hover": hsl(h(0), s(0), l(0)),
 					"--dsw-specific-input-major": hsl(h(0), s(0), l(.02)),
+					"--dsw-specific-menu": hsl(h(0), s(0), l(.08)),
 					"--dsw-alias-scrollbar-bg-l1": hsl(h(0), s(-.05), l(.12)),
 					"--dsw-alias-scrollbar-bg-l2": hsl(h(0), s(-.05), l(.16)),
 					"--dsw-alias-scrollbar-hover-l1": hsl(h(0), s(-.05), l(.22)),
@@ -516,6 +663,7 @@ window.__ModuleLoader__.load({
 					"--dsw-alias-button-primary-hover": hsl(h(0), s(.05), Math.min(l(-.12), .5)),
 					"--dsw-alias-button-primary-dimmed": hsl(h(0), s(-.1), l(-.03)),
 					"--dsw-alias-button-elevated-fill": hsl(h(0), s(-.1), l(.1)),
+					"--dsw-alias-button-floating-hover": hsl(h(0), s(-.1), l(.16)),
 					"--dsw-alias-interactive-bg-hover": rgba(h(0), s(0), l(-.3), .08),
 					"--dsw-alias-interactive-bg-active": rgba(h(0), s(0), l(-.3), .14),
 					"--dsw-alias-markdown-code-block": hsl(h(0), s(-.1), l(-.03)),
@@ -524,6 +672,7 @@ window.__ModuleLoader__.load({
 					"--dsw-specific-sidebar-nav-item-active": hsl(h(0), s(-.08), l(.05)),
 					"--dsw-specific-sidebar-nav-item-hover": hsl(h(0), s(-.12), l(0)),
 					"--dsw-specific-input-major": hsl(h(0), s(-.12), l(.1)),
+					"--dsw-specific-menu": hsl(h(0), s(-.12), l(.15)),
 					"--dsw-alias-scrollbar-bg-l1": hsl(h(0), s(-.1), l(-.08)),
 					"--dsw-alias-scrollbar-bg-l2": hsl(h(0), s(-.08), l(-.12)),
 					"--dsw-alias-scrollbar-hover-l1": hsl(h(0), s(-.08), l(-.16)),
@@ -1313,6 +1462,7 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/wallpaper.ts
 		let wpEl = null;
+		let videoEl = null;
 		let appliedTokenNames = [];
 		let wpController = null;
 		let snapshotListener = null;
@@ -1339,15 +1489,6 @@ window.__ModuleLoader__.load({
 			for (const name of appliedTokenNames) document.body.style.removeProperty(name);
 			appliedTokenNames = [];
 		}
-		/**
-		* Write the saved color's full token set as inline variables on body — the
-		* same write surface the theme presenter owns, but derived DIRECTLY from the
-		* saved pick, so the theme color never depends on the theme service's active
-		* state or the presenter's timing. The bg-base, sidebar and layer surfaces are
-		* re-emitted at their per-part alpha; every other token (labels, borders,
-		* brand) is written verbatim. No reads: nothing can observe a stale or reset
-		* theme value and leave the homepage on the system color.
-		*/
 		/** Label tokens flipped by the generated-background brightness verdict. */
 		const LABEL_TOKENS = [
 			"--dsw-alias-label-primary",
@@ -1357,7 +1498,54 @@ window.__ModuleLoader__.load({
 			"--dsw-alias-label-dimmed",
 			"--dsw-alias-label-quaternary"
 		];
+		const OPACITY_TOKEN_GROUPS = [
+			{
+				part: "bg",
+				names: ["--dsw-alias-bg-base"]
+			},
+			{
+				part: "sidebar",
+				names: ["--dsw-specific-sidebar-fill"]
+			},
+			{
+				part: "card",
+				names: [
+					"--dsw-alias-bg-layer-1",
+					"--dsw-alias-bg-layer-2",
+					"--dsw-alias-bg-layer-3",
+					"--dsw-specific-menu"
+				]
+			},
+			{
+				part: "input",
+				names: ["--dsw-specific-input-major"]
+			}
+		];
+		const OPACITY_VARS = {
+			"--dsw-alias-bg-base": "--dsh-any-op-bg",
+			"--dsw-specific-sidebar-fill": "--dsh-any-op-sidebar",
+			"--dsw-alias-bg-layer-1": "--dsh-any-op-card-1",
+			"--dsw-alias-bg-layer-2": "--dsh-any-op-card-2",
+			"--dsw-alias-bg-layer-3": "--dsh-any-op-card-3",
+			"--dsw-specific-input-major": "--dsh-any-op-input",
+			"--dsw-specific-menu": "--dsh-any-op-menu"
+		};
+		let baseTokenKey = "";
+		let pendingOps = null;
+		let tokensRaf = null;
 		function applyCustomTokens(ops) {
+			pendingOps = ops;
+			if (tokensRaf !== null) return;
+			tokensRaf = requestAnimationFrame(() => {
+				tokensRaf = null;
+				if (pendingOps === null) return;
+				const o = pendingOps;
+				pendingOps = null;
+				applyCustomTokensNow(o);
+			});
+		}
+		let lastBgKey = "";
+		function applyCustomTokensNow(ops) {
 			const [h, s, l] = rColor();
 			let { tokens } = genTokens(h, s, l);
 			try {
@@ -1367,49 +1555,68 @@ window.__ModuleLoader__.load({
 					const font = dark ? "#fff" : "#000";
 					for (const name of LABEL_TOKENS) tokens[name] = font;
 				}
-				if (dark ?? l < .55) document.body.setAttribute("data-ds-dark-theme", "dsh-any-background");
-				else document.body.removeAttribute("data-ds-dark-theme");
-				const decls = [];
-				for (const [name, value] of Object.entries(tokens)) {
-					let v = value;
-					if (name === "--dsw-alias-bg-base") v = toRgba(value, ops.bg);
-					else if (name === "--dsw-specific-sidebar-fill") v = toRgba(value, ops.sidebar);
-					else if (name === "--dsw-alias-bg-layer-1" || name === "--dsw-alias-bg-layer-2" || name === "--dsw-alias-bg-layer-3") v = toRgba(value, ops.card);
-					decls.push(`${name}:${v}!important`);
+				const forceDark = dark ?? l < .55;
+				if (`${h}|${s}|${l}|${dark}` !== baseTokenKey) {
+					baseTokenKey = `${h}|${s}|${l}|${dark}`;
+					if (forceDark) document.body.setAttribute("data-ds-dark-theme", "dsh-any-background");
+					else document.body.removeAttribute("data-ds-dark-theme");
+					const decls = [`color-scheme:${forceDark ? "dark" : "light"}`];
+					for (const [name, value] of Object.entries(tokens)) {
+						const opVar = OPACITY_VARS[name];
+						decls.push(`${name}:${opVar !== void 0 ? `var(${opVar})` : value}!important`);
+					}
+					ensureTokenStyle().textContent = `body{${decls.join(";")}}`;
+					for (const name of appliedTokenNames) document.body.style.removeProperty(name);
+					appliedTokenNames = Object.keys(tokens);
 				}
-				ensureTokenStyle().textContent = `body{${decls.join(";")}}`;
-				for (const name of appliedTokenNames) document.body.style.removeProperty(name);
-				appliedTokenNames = Object.keys(tokens);
-			} catch (e) {}
+				const root = document.documentElement;
+				for (const g of OPACITY_TOKEN_GROUPS) for (const name of g.names) root.style.setProperty(OPACITY_VARS[name], toRgba(tokens[name] ?? "#000", ops[g.part]));
+				root.style.setProperty("--dsh-any-op-menu-cordis", toRgba(tokens["--dsw-specific-menu"] ?? "#000", ops.input));
+				const bgKey = `${baseTokenKey}|${ops.bg}`;
+				if (bgKey !== lastBgKey) {
+					lastBgKey = bgKey;
+					applyPartOpacities(ops);
+				}
+			} catch {}
+		}
+		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}";
+		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 SETTINGS_STYLE_RULE = `[role="dialog"][aria-modal="true"][aria-labelledby]{background:var(--dsh-any-bg-settings-surface,var(--dsw-alias-bg-layer-2));backdrop-filter:var(--dsh-any-blur-settings,none)}`;
 		function applySettingsOverrides(op) {
-			if (op >= 1) {
-				document.documentElement.style.removeProperty("--dsh-any-bg-settings-surface");
-				return;
-			}
-			if (!rHasColor()) return;
 			const [h, s, l] = rColor();
-			const layer2 = genTokens(h, s, l).tokens["--dsw-alias-bg-layer-2"];
+			const tokens = genTokens(h, s, l).tokens;
+			const layer1 = tokens["--dsw-alias-bg-layer-1"];
+			const layer2 = tokens["--dsw-alias-bg-layer-2"];
+			const layer3 = tokens["--dsw-alias-bg-layer-3"];
 			if (layer2 !== void 0) document.documentElement.style.setProperty("--dsh-any-bg-settings-surface", toRgba(layer2, op));
+			if (layer1 !== void 0) document.documentElement.style.setProperty("--dsh-any-bg-settings-layer-1", toRgba(layer1, op));
+			if (layer2 !== void 0) document.documentElement.style.setProperty("--dsh-any-bg-settings-layer-2", toRgba(layer2, op));
+			if (layer3 !== void 0) document.documentElement.style.setProperty("--dsh-any-bg-settings-layer-3", toRgba(layer3, op));
 		}
-		/** Apply only the wallpaper layer (position, scale, opacity, blur) without
-		*  touching the theme color palette. Used when generated background parameters
-		*  change so the visual keeps updating without shifting the picked theme color. */
-		function applyWallpaper() {
-			applyWp();
+		const TRAJECTORY_STYLE_RULE = "[data-conversation-composer-overlay]{--dsw-alias-bg-layer-1:var(--dsh-any-traj-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-traj-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-traj-layer-3)}";
+		function applyTrajectoryOverrides(op) {
+			const [h, s, l] = rColor();
+			const tokens = genTokens(h, s, l).tokens;
+			const layer1 = tokens["--dsw-alias-bg-layer-1"];
+			const layer2 = tokens["--dsw-alias-bg-layer-2"];
+			const layer3 = tokens["--dsw-alias-bg-layer-3"];
+			if (layer1 !== void 0) document.documentElement.style.setProperty("--dsh-any-traj-layer-1", toRgba(layer1, op));
+			if (layer2 !== void 0) document.documentElement.style.setProperty("--dsh-any-traj-layer-2", toRgba(layer2, op));
+			if (layer3 !== void 0) document.documentElement.style.setProperty("--dsh-any-traj-layer-3", toRgba(layer3, op));
 		}
-		/** Apply the theme color. If the user has an explicit saved pick we use it
-		*  directly; otherwise we fall back to extracting a dominant color from the
-		*  current wallpaper (one HSL sample, no palette), so new uploads still get a
-		*  matching theme automatically. */
+		/** Apply the theme color: use the saved pick directly, or fall back to
+		*  extracting a dominant color from the current wallpaper. */
 		function applyThemeColor() {
 			if (rHasColor()) {
 				applyWp();
 				return;
 			}
 			const url = rWp();
-			if (url) extractWallpaperColor(url, rBgState()).then((hsl) => {
+			if (url) extractWallpaperColor(url, cfg.backgroundType === "video" ? rVideoBgState() : rBgState()).then((hsl) => {
 				if (hsl) cfg.color = hsl;
 				applyWp();
 			});
@@ -1426,6 +1633,13 @@ window.__ModuleLoader__.load({
 				applyThemeColor();
 				return;
 			}
+			if (type === "video") {
+				clearDynamicBg();
+				setBgDark(null);
+				setWpUrl(null);
+				applyThemeColor();
+				return;
+			}
 			if (!cfg.generatedBg || cfg.generatedBg.type !== type) cfg.generatedBg = defaultParamsFor(type);
 			applyGeneratedBg(cfg.generatedBg);
 		}
@@ -1437,15 +1651,11 @@ window.__ModuleLoader__.load({
 		function regenerateGeneratedBg() {
 			const params = cfg.generatedBg;
 			if (!params || cfg.backgroundType === "image") return;
-			const next = params.type === "mesh" ? {
-				...params,
-				seed: randomSeed()
-			} : {
+			cfg.generatedBg = {
 				...params,
 				seed: randomSeed()
 			};
-			cfg.generatedBg = next;
-			applyGeneratedBg(next);
+			applyGeneratedBg(cfg.generatedBg);
 		}
 		/** Update a generated background's parameters and re-render. */
 		function updateGeneratedBg(params) {
@@ -1455,6 +1665,7 @@ window.__ModuleLoader__.load({
 		}
 		function applyGeneratedBg(params) {
 			clearDynamicBg();
+			clearVideoEl();
 			ensureWpContainer();
 			wpController = createDynamicBackground(params);
 			if (wpEl) {
@@ -1466,7 +1677,7 @@ window.__ModuleLoader__.load({
 				const controller = wpController;
 				const frame = controller.snapshot();
 				setWpUrl(frame);
-				applyWallpaper();
+				applyWp();
 				snapshotListener?.();
 				setBgDark(null);
 				analyzeFrameDark(frame).then((dark) => {
@@ -1532,14 +1743,39 @@ 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
+		*  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. */
+		function applyPartOpacities(ops) {
+			if (!(rHasColor() || rBgDark() !== null)) return;
+			discoverParts();
+			if (frameEl === null) return;
+			const [h, s, l] = rColor();
+			const base = genTokens(h, s, l).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";
+		}
+		/** 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. */
+		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");
+		}
 		/** Apply per-part interface blur to the AppFrame columns + settings panel. */
 		function applyPartBlurs(blurs) {
 			discoverParts();
-			setBlur(frameEl, blurs.bg);
+			setBlur(frameEl, 0);
 			setBlur(sidebarEl, blurs.sidebar);
-			setBlur(centerEl, blurs.card);
-			setBlur(detailsEl, blurs.card);
+			setBlur(centerEl, blurs.bg);
+			setBlur(detailsEl, blurs.bg);
+			applyCardPanelsBlur(blurs.card);
 			applySettingsBlur(blurs.settings);
+			applyInputBlur(blurs.input);
+			applyViewCards();
 		}
 		/** Live per-part blur update during slider drag (no full re-apply). */
 		function setPartBlur(part, v) {
@@ -1547,13 +1783,182 @@ window.__ModuleLoader__.load({
 				applySettingsBlur(v);
 				return;
 			}
+			if (part === "card") {
+				applyCardPanelsBlur(v);
+				return;
+			}
+			if (part === "input") {
+				applyInputBlur(v);
+				return;
+			}
+			if (part === "chat" || part === "trajectory") {
+				applyViewCards();
+				return;
+			}
 			discoverParts();
-			if (part === "bg") setBlur(frameEl, v);
-			else if (part === "sidebar") setBlur(sidebarEl, v);
-			else {
+			if (part === "bg") {
 				setBlur(centerEl, v);
 				setBlur(detailsEl, v);
+			} else setBlur(sidebarEl, v);
+		}
+		const VIEW_CARDS = [{
+			sel: "[data-chat-flow]",
+			mark: "data-dab-chat-card",
+			prev: "dabChatPrev",
+			opacity: rChatTextOpacity,
+			blur: () => rBlurs().chat,
+			fallback: true
+		}, {
+			sel: "[data-conversation-composer-overlay]",
+			mark: "data-dab-traj-card",
+			prev: "dabTrajPrev",
+			opacity: rTrajectoryOpacity,
+			blur: () => rBlurs().trajectory,
+			plain: true
+		}];
+		const viewTargets = VIEW_CARDS.map(() => null);
+		function isScrollableY(el) {
+			const oy = getComputedStyle(el).overflowY;
+			return oy === "auto" || oy === "scroll" || oy === "overlay";
+		}
+		/** Whether the subtree hosts the chat input (textarea / contenteditable /
+		*  textbox role) — used to keep the card off the input row. */
+		function containsChatEditor(el) {
+			return el.querySelector("textarea,[contenteditable=\"true\"],[contenteditable=\"\"],[contenteditable=\"plaintext-only\"],[role=\"textbox\"]") !== null;
+		}
+		/** Walk down from a coarse candidate toward the actual message column: stop
+		*  at a scroll container (the card surface must stay pinned to the scroll
+		*  port); while the chat input lives inside, descend into the tallest child that
+		*  does NOT contain it (the header row is short, the input row holds the
+		*  editor); otherwise peel wrappers dominated (>= 85%) by a single child so
+		*  tab bars / titles stay outside the card. */
+		function refineMessageColumn(start) {
+			let cur = start;
+			for (let depth = 0; depth < 10; depth++) {
+				if (isScrollableY(cur)) break;
+				const kids = Array.from(cur.children).filter((k) => k instanceof HTMLElement);
+				if (kids.length === 0) break;
+				const tallest = kids.reduce((a, b) => b.clientHeight > a.clientHeight ? b : a);
+				if (containsChatEditor(cur)) {
+					const candidates = kids.filter((k) => !containsChatEditor(k) && k.clientHeight >= cur.clientHeight * .4);
+					if (candidates.length === 0) break;
+					cur = candidates.reduce((a, b) => b.clientHeight > a.clientHeight ? b : a);
+					continue;
+				}
+				if (kids.length > 1 && tallest.clientHeight >= cur.clientHeight * .85) {
+					cur = tallest;
+					continue;
+				}
+				break;
 			}
+			return cur;
+		}
+		function discoverViewTarget(idx, spec) {
+			if (centerEl === null || !document.body.contains(centerEl)) {
+				viewTargets[idx] = null;
+				return null;
+			}
+			const marked = centerEl.querySelector(spec.sel);
+			const cached = viewTargets[idx];
+			if (marked !== null) {
+				if (cached !== null && cached !== marked) {
+					setBlur(cached, 0);
+					restoreCardHost(cached, spec.mark, spec.prev, spec.plain === true);
+				}
+				viewTargets[idx] = marked;
+				return marked;
+			}
+			if (cached !== null && centerEl.contains(cached)) return cached;
+			viewTargets[idx] = null;
+			if (spec.fallback !== true) return null;
+			if (centerEl.querySelector("[data-conversation-scroll]") !== null) return null;
+			if (spec.opacity() <= 0 && spec.blur() <= 0) return null;
+			let best = null;
+			let bestArea = 0;
+			for (const el of Array.from(centerEl.querySelectorAll("*"))) {
+				if (!isScrollableY(el)) continue;
+				if (el.clientHeight < centerEl.clientHeight * .35) continue;
+				const area = el.clientWidth * el.clientHeight;
+				if (area > bestArea) {
+					bestArea = area;
+					best = el;
+				}
+			}
+			if (best === null) for (const el of Array.from(centerEl.children)) {
+				if (!(el instanceof HTMLElement)) continue;
+				if (el.clientHeight < centerEl.clientHeight * .5) continue;
+				if (el.clientHeight > (best?.clientHeight ?? 0)) best = el;
+			}
+			const refined = best !== null ? refineMessageColumn(best) : null;
+			viewTargets[idx] = refined;
+			return refined;
+		}
+		/** Stash the host's own inline values so teardown restores them exactly.
+		*  Plain views only get a background override, so only that is stashed. */
+		function stashCardPrev(el, prev, plain) {
+			const ds = el.dataset;
+			ds[prev + "Bg"] = el.style.getPropertyValue("background");
+			if (plain) return;
+			ds[prev + "Border"] = el.style.getPropertyValue("border");
+			ds[prev + "Radius"] = el.style.getPropertyValue("border-radius");
+			ds[prev + "Padding"] = el.style.getPropertyValue("padding");
+		}
+		/** Undo the inline styling, restoring the host's previous inline values. */
+		function restoreCardHost(el, mark, prev, plain) {
+			if (!el.hasAttribute(mark)) return;
+			const ds = el.dataset;
+			const restore = (prop, v) => {
+				if (v !== void 0 && v !== "") el.style.setProperty(prop, v);
+				else el.style.removeProperty(prop);
+			};
+			restore("background", ds[prev + "Bg"]);
+			if (!plain) {
+				restore("border", ds[prev + "Border"]);
+				restore("border-radius", ds[prev + "Radius"]);
+				restore("padding", ds[prev + "Padding"]);
+				delete ds[prev + "Border"];
+				delete ds[prev + "Radius"];
+				delete ds[prev + "Padding"];
+			}
+			delete ds[prev + "Bg"];
+			el.removeAttribute(mark);
+		}
+		/** Teardown only: strip every view treatment and hand the hosts back untouched. */
+		function removeViewCards() {
+			VIEW_CARDS.forEach((spec, i) => {
+				const el = viewTargets[i];
+				if (el !== null) {
+					setBlur(el, 0);
+					restoreCardHost(el, spec.mark, spec.prev, spec.plain === true);
+				}
+				viewTargets[i] = null;
+			});
+		}
+		/** Re-derive the conversation view cards from the current config. Cheap
+		*  enough for live slider drags; the card structure is applied unconditionally
+		*  once the host exists so the layout never reflows when a slider leaves zero. */
+		function applyViewCards() {
+			discoverParts();
+			if (centerEl === null) return;
+			const [h, s, l] = rColor();
+			const surface = genTokens(h, s, l).tokens["--dsw-alias-bg-layer-1"];
+			VIEW_CARDS.forEach((spec, i) => {
+				const target = discoverViewTarget(i, spec);
+				if (target === null) return;
+				const plain = spec.plain === true;
+				const opacity = spec.opacity();
+				const blurPx = spec.blur();
+				if (!plain) {
+					if (!target.hasAttribute(spec.mark)) stashCardPrev(target, spec.prev, false);
+					const borderAlpha = opacity > 0 ? Math.min(1, opacity * 1.5) : blurPx > 0 ? .35 : 0;
+					target.style.background = surface !== void 0 ? toRgba(surface, opacity) : "transparent";
+					target.style.border = surface !== void 0 ? `1px solid ${toRgba(surface, borderAlpha)}` : "1px solid transparent";
+					target.style.borderRadius = "16px";
+					target.style.padding = "18px";
+				}
+				target.setAttribute(spec.mark, "1");
+				setBlur(target, blurPx);
+			});
 		}
 		let partsObserver = null;
 		/** Watch for the AppFrame mounting so persisted blurs land even when the shell
@@ -1562,8 +1967,9 @@ 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)) return;
+				if (frameEl !== null && sidebarEl !== null && centerEl !== null && detailsEl !== null && document.body.contains(frameEl) && viewTargets.every((el) => el !== null && document.body.contains(el))) return;
 				applyPartBlurs(rBlurs());
+				applyPartOpacities(rOps());
 			});
 			partsObserver.observe(document.body, {
 				childList: true,
@@ -1581,24 +1987,185 @@ window.__ModuleLoader__.load({
 				document.body.prepend(wpEl);
 			}
 		}
+		function clearVideoEl() {
+			if (videoEl === null) return;
+			videoEl.pause();
+			videoEl.removeAttribute("src");
+			videoEl.load();
+			videoEl.remove();
+			videoEl = null;
+		}
+		/** Intrinsic-size cache for the center mode (native pixels of the current image). */
+		let imgNat = null;
+		function imageNatSize(url, cb) {
+			if (imgNat !== null && imgNat.url === url) {
+				cb(imgNat.w, imgNat.h);
+				return;
+			}
+			const img = new Image();
+			img.onload = () => {
+				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;
+		let lowResFor = "";
+		let dragLow = false;
+		function captureLowRes(url, cb) {
+			if (lowResFor === url) {
+				cb(lowResUrl);
+				return;
+			}
+			const img = new Image();
+			img.onload = () => {
+				const k = Math.min(1, DRAG_MAX_SIDE / Math.max(img.naturalWidth, img.naturalHeight));
+				if (k >= 1) {
+					lowResFor = url;
+					lowResUrl = null;
+					cb(null);
+					return;
+				}
+				const c = document.createElement("canvas");
+				c.width = Math.max(1, Math.round(img.naturalWidth * k));
+				c.height = Math.max(1, Math.round(img.naturalHeight * k));
+				const g = c.getContext("2d");
+				if (!g) {
+					lowResFor = url;
+					lowResUrl = null;
+					cb(null);
+					return;
+				}
+				g.drawImage(img, 0, 0, c.width, c.height);
+				const low = c.toDataURL("image/jpeg", .85);
+				lowResFor = url;
+				lowResUrl = low;
+				cb(low);
+			};
+			img.onerror = () => cb(null);
+			img.src = url;
+		}
+		function setDragLow(on) {
+			if (cfg.backgroundType !== "image" || on === dragLow || !wpEl) return;
+			const full = rWpImage();
+			if (!full) return;
+			if (on) {
+				dragLow = true;
+				captureLowRes(full, (low) => {
+					if (!dragLow || !wpEl || low === null) return;
+					if (wpEl.style.backgroundImage !== `url("${low}")`) wpEl.style.backgroundImage = `url("${low}")`;
+				});
+			} else {
+				dragLow = false;
+				if (wpEl.style.backgroundImage !== `url("${full}")`) wpEl.style.backgroundImage = `url("${full}")`;
+			}
+		}
+		/** While any range slider in the app is being dragged, run the wallpaper at
+		*  reduced resolution; restore on release. Returns a disposer for teardown. */
+		function watchWallpaperDragQuality() {
+			const isRange = (t) => t instanceof HTMLInputElement && t.type === "range";
+			const down = (e) => {
+				if (isRange(e.target)) setDragLow(true);
+			};
+			const up = () => {
+				if (dragLow) setDragLow(false);
+			};
+			window.addEventListener("pointerdown", down, true);
+			window.addEventListener("pointerup", up, true);
+			window.addEventListener("pointercancel", up, true);
+			return () => {
+				window.removeEventListener("pointerdown", down, true);
+				window.removeEventListener("pointerup", up, true);
+				window.removeEventListener("pointercancel", up, true);
+				if (dragLow) setDragLow(false);
+			};
+		}
 		function applyImageWp(url) {
 			clearDynamicBg();
+			clearVideoEl();
 			ensureWpContainer();
 			const bg = rBgState();
+			const mode = rBgMode();
 			const next = `url("${url}")`;
-			if (wpEl.style.backgroundImage !== next) {
-				wpEl.style.backgroundImage = next;
+			if (wpEl.style.backgroundImage !== next) wpEl.style.backgroundImage = next;
+			if (mode === "fit") {
+				wpEl.style.backgroundRepeat = "no-repeat";
+				if (bg.iw > 0) {
+					const fit = Math.min(window.innerWidth / bg.iw, window.innerHeight / bg.ih);
+					const w = bg.iw * fit * bg.zoom;
+					const h = bg.ih * fit * bg.zoom;
+					wpEl.style.backgroundSize = `${w}px ${h}px`;
+					wpEl.style.backgroundPosition = `${bg.x * window.innerWidth - w / 2}px ${bg.y * window.innerHeight - h / 2}px`;
+				} else {
+					wpEl.style.backgroundSize = "contain";
+					wpEl.style.backgroundPosition = "center";
+				}
+			} else if (mode === "fill") {
+				wpEl.style.backgroundRepeat = "no-repeat";
+				wpEl.style.backgroundSize = "cover";
+				wpEl.style.backgroundPosition = "center";
+			} else if (mode === "stretch") {
 				wpEl.style.backgroundRepeat = "no-repeat";
+				wpEl.style.backgroundSize = "100% 100%";
+				wpEl.style.backgroundPosition = "center";
+			} else if (mode === "tile") {
+				wpEl.style.backgroundRepeat = "repeat";
+				wpEl.style.backgroundSize = "auto";
+				wpEl.style.backgroundPosition = "0px 0px";
+			} else {
+				wpEl.style.backgroundRepeat = "no-repeat";
+				wpEl.style.backgroundSize = "contain";
+				wpEl.style.backgroundPosition = "center";
+				imageNatSize(url, (w, h) => {
+					if (!wpEl || wpEl.style.backgroundImage !== next || rBgMode() !== "center") return;
+					if (w > 0 && h > 0) {
+						wpEl.style.backgroundSize = `${w}px ${h}px`;
+						wpEl.style.backgroundPosition = "center";
+					}
+				});
 			}
-			if (bg.iw > 0) {
+			captureLowRes(url, () => void 0);
+			applyWpEffects();
+		}
+		/** Video wallpaper: a muted looping <video> inside the wallpaper layer.
+		*  Placement modes map onto object-fit (tile has no video equivalent and
+		*  falls back to cover). */
+		function applyVideoWp(url) {
+			clearDynamicBg();
+			ensureWpContainer();
+			if (wpEl.style.backgroundImage !== "none") wpEl.style.backgroundImage = "none";
+			if (videoEl === null || !videoEl.isConnected) {
+				videoEl = document.createElement("video");
+				videoEl.muted = true;
+				videoEl.loop = true;
+				videoEl.autoplay = true;
+				videoEl.playsInline = true;
+				videoEl.preload = "auto";
+				videoEl.setAttribute("playsinline", "");
+				videoEl.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-position:center;";
+				wpEl.appendChild(videoEl);
+				videoEl.setAttribute("src", url);
+				videoEl.play().catch(() => void 0);
+			} else if (videoEl.getAttribute("src") !== url) {
+				videoEl.setAttribute("src", url);
+				videoEl.play().catch(() => void 0);
+			}
+			const mode = rBgMode();
+			const bg = rVideoBgState();
+			if (mode === "fit" && bg.iw > 0) {
 				const fit = Math.min(window.innerWidth / bg.iw, window.innerHeight / bg.ih);
 				const w = bg.iw * fit * bg.zoom;
 				const h = bg.ih * fit * bg.zoom;
-				wpEl.style.backgroundSize = `${w}px ${h}px`;
-				wpEl.style.backgroundPosition = `${bg.x * window.innerWidth - w / 2}px ${bg.y * window.innerHeight - h / 2}px`;
+				videoEl.style.cssText = `position:absolute;left:${bg.x * window.innerWidth - w / 2}px;top:${bg.y * window.innerHeight - h / 2}px;width:${w}px;height:${h}px;object-fit:fill;`;
 			} else {
-				wpEl.style.backgroundSize = "contain";
-				wpEl.style.backgroundPosition = "center";
+				videoEl.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-position:center;";
+				videoEl.style.objectFit = mode === "stretch" ? "fill" : mode === "fill" || mode === "tile" ? "cover" : "contain";
 			}
 			applyWpEffects();
 		}
@@ -1610,7 +2177,17 @@ window.__ModuleLoader__.load({
 		}
 		function applyWp() {
 			const url = rWp();
-			if (cfg.backgroundType !== "image" && cfg.generatedBg) {
+			if (cfg.backgroundType === "video") {
+				const vurl = rWpVideo();
+				if (vurl) applyVideoWp(vurl);
+				else {
+					clearDynamicBg();
+					clearVideoEl();
+					wpEl?.remove();
+					wpEl = null;
+				}
+			} else if (cfg.backgroundType !== "image" && cfg.generatedBg) {
+				clearVideoEl();
 				if (!wpController) {
 					applyGeneratedBg(cfg.generatedBg);
 					return;
@@ -1621,27 +2198,56 @@ window.__ModuleLoader__.load({
 			} else if (url) applyImageWp(url);
 			else {
 				clearDynamicBg();
+				clearVideoEl();
 				wpEl?.remove();
 				wpEl = null;
 			}
 			if (rHasColor() || rBgDark() !== null) applyCustomTokens(rOps());
-			if (rHasColor()) applySettingsOverrides(rSop());
+			if (rHasColor()) {
+				applySettingsOverrides(rSop());
+				applyTrajectoryOverrides(rTrajectoryOpacity());
+			}
 			applyPartBlurs(rBlurs());
 		}
 		function teardownWp() {
 			clearDynamicBg();
+			clearVideoEl();
+			disposeVideoObjectUrl();
 			setBgDark(null);
 			wpEl?.remove();
 			wpEl = null;
 			clearCustomTokens();
 			tokenStyleEl?.remove();
 			tokenStyleEl = null;
+			removeViewCards();
+			document.body.removeAttribute("data-ds-dark-theme");
+			document.body.style.removeProperty("color-scheme");
 			document.documentElement.style.removeProperty("--dsh-any-bg-settings-surface");
+			document.documentElement.style.removeProperty("--dsh-any-bg-settings-layer-1");
+			document.documentElement.style.removeProperty("--dsh-any-bg-settings-layer-2");
+			document.documentElement.style.removeProperty("--dsh-any-bg-settings-layer-3");
+			document.documentElement.style.removeProperty("--dsh-any-traj-layer-1");
+			document.documentElement.style.removeProperty("--dsh-any-traj-layer-2");
+			document.documentElement.style.removeProperty("--dsh-any-traj-layer-3");
+			document.documentElement.style.removeProperty("--dsh-any-bg-settings-card-surface");
 			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");
+			for (const v of Object.values(OPACITY_VARS)) document.documentElement.style.removeProperty(v);
+			baseTokenKey = "";
+			lastBgKey = "";
+			if (tokensRaf !== null) {
+				cancelAnimationFrame(tokensRaf);
+				tokensRaf = null;
+			}
+			pendingOps = null;
 			setBlur(frameEl, 0);
 			setBlur(sidebarEl, 0);
 			setBlur(centerEl, 0);
 			setBlur(detailsEl, 0);
+			if (frameEl !== null) frameEl.style.removeProperty("background");
+			if (centerEl !== null) centerEl.style.removeProperty("background");
+			if (detailsEl !== null) detailsEl.style.removeProperty("background");
 			stopWatchingParts();
 		}
 		/** Live wallpaper-opacity updates during slider drag (no full re-apply). */
@@ -1652,6 +2258,69 @@ window.__ModuleLoader__.load({
 		function setWpBlur(v) {
 			if (wpEl) wpEl.style.filter = v > 0 ? `blur(${v}px)` : "none";
 		}
+		//#endregion
+		//#region src/client/utils/video.ts
+		/**
+		* Video-background helpers: capturing a single frame as a JPEG snapshot.
+		* The snapshot stands in for everything that only understands still images:
+		* the settings preview, theme-color extraction and the eyedropper. Uploads
+		* stream the raw file over the binary upload route (see rpc.uploadVideo) —
+		* a data-URL detour would inflate the bytes and trip the RPC body limit.
+		*/
+		function grabFrame(v) {
+			const w = v.videoWidth, h = v.videoHeight;
+			if (w <= 0 || h <= 0) return null;
+			const canvas = document.createElement("canvas");
+			canvas.width = w;
+			canvas.height = h;
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return null;
+			ctx.drawImage(v, 0, 0, w, h);
+			try {
+				return canvas.toDataURL("image/jpeg", .85);
+			} catch {
+				return null;
+			}
+		}
+		/**
+		* Capture one representative frame from a video data URL as a JPEG data URL.
+		* Seeks to ~10% of the duration (first frame is often black) and waits for
+		* the seek to land; resolves null when the video cannot be decoded. A timeout
+		* keeps a broken file from hanging the upload flow.
+		*/
+		function captureVideoSnapshot(url) {
+			return new Promise((resolve) => {
+				const v = document.createElement("video");
+				let settled = false;
+				const done = (r) => {
+					if (settled) return;
+					settled = true;
+					window.clearTimeout(timer);
+					v.removeAttribute("src");
+					v.load();
+					resolve(r);
+				};
+				const timer = window.setTimeout(() => done(grabFrame(v)), 6e3);
+				v.muted = true;
+				v.preload = "auto";
+				v.playsInline = true;
+				v.onerror = () => done(null);
+				v.onloadeddata = () => {
+					const target = isFinite(v.duration) && v.duration > .6 ? Math.min(v.duration * .1, 2) : 0;
+					if (target <= 0) {
+						done(grabFrame(v));
+						return;
+					}
+					v.onseeked = () => done(grabFrame(v));
+					try {
+						v.currentTime = target;
+					} catch {
+						done(grabFrame(v));
+					}
+				};
+				v.src = url;
+			});
+		}
 		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).
@@ -1934,6 +2603,44 @@ window.__ModuleLoader__.load({
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M14 10.4l-2.8-2.8-4.8 4.8" })
 			]
 		});
+		const VideoIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
+			size,
+			className,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				x: "1.5",
+				y: "4.2",
+				width: "8.8",
+				height: "7.6",
+				rx: "2"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10.3 6.9l4.2-2.4v7l-4.2-2.4" })]
+		});
+		const TextIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
+			size,
+			className,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 4.2h10M3 8h10M3 11.8h6.5" })
+		});
+		const TrajectoryIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
+			size,
+			className,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.5 3.2h11M2.5 6.6h11M2.5 10h11" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "4.4",
+					cy: "3.2",
+					r: "1.1"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "8",
+					cy: "6.6",
+					r: "1.1"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "11.4",
+					cy: "10",
+					r: "1.1"
+				})
+			]
+		});
 		const SlidersIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
 			size,
 			className,
@@ -2059,6 +2766,17 @@ window.__ModuleLoader__.load({
 				r: "2.1"
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 1.7v1.8M8 12.5v1.8M1.7 8h1.8M12.5 8h1.8M3.6 3.6l1.3 1.3M11.1 11.1l1.3 1.3M12.4 3.6l-1.3 1.3M4.9 11.1l-1.3 1.3" })]
 		});
+		const InputIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
+			size,
+			className,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+				x: "2.2",
+				y: "4",
+				width: "11.6",
+				height: "8",
+				rx: "2"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 6.6v2M7 8h2" })]
+		});
 		//#endregion
 		//#region src/client/components/ErrorBoundary.tsx
 		/**
@@ -2893,7 +3611,7 @@ window.__ModuleLoader__.load({
 					paint(inputRef.current, v);
 				}
 				if (valRef.current) valRef.current.textContent = fmt(v);
-				onInput(v);
+				onInput?.(v);
 				onChange(v);
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2922,7 +3640,7 @@ window.__ModuleLoader__.load({
 							const el = e.target;
 							const v = Number(el.value);
 							paint(el, v);
-							onInput(v);
+							onInput?.(v);
 							if (valRef.current) valRef.current.textContent = fmt(v);
 						},
 						onChange: (e) => onChange(Number(e.target.value))
@@ -2952,10 +3670,25 @@ window.__ModuleLoader__.load({
 				labelKey: "uiOpacityCard",
 				Icon: ChatIcon
 			},
+			{
+				opKey: "input",
+				labelKey: "uiOpacityInput",
+				Icon: InputIcon
+			},
 			{
 				isSettings: true,
 				labelKey: "uiSop",
 				Icon: GearIcon
+			},
+			{
+				isChat: true,
+				labelKey: "uiChatRegion",
+				Icon: TextIcon
+			},
+			{
+				isTrajectory: true,
+				labelKey: "uiTrajectory",
+				Icon: TrajectoryIcon
 			}
 		];
 		function InterfacePage({ p }) {
@@ -2980,10 +3713,10 @@ window.__ModuleLoader__.load({
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "dab-grid-parts",
 				children: PARTS.map((part, i) => {
-					const { labelKey, Icon, isSettings } = part;
+					const { labelKey, Icon, isSettings, isChat, isTrajectory } = part;
 					const opKey = part.opKey;
-					const blurKey = opKey ?? "settings";
-					const opacity = isSettings ? rSop() : rOps()[opKey];
+					const blurKey = isChat ? "chat" : isTrajectory ? "trajectory" : isSettings ? "settings" : opKey;
+					const opacity = isChat ? rChatTextOpacity() : isTrajectory ? rTrajectoryOpacity() : isSettings ? rSop() : rOps()[opKey];
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "dab-card dab-card-hover dab-rise",
 						style: { "--d": i + 1 },
@@ -3014,7 +3747,13 @@ window.__ModuleLoader__.load({
 								fmt: (v) => `${v}%`,
 								onInput: (v) => {
 									const op = v / 100;
-									if (isSettings) {
+									if (isChat) {
+										cfg.chatTextOpacity = op;
+										applyViewCards();
+									} else if (isTrajectory) {
+										cfg.trajectoryOpacity = op;
+										applyTrajectoryOverrides(op);
+									} else if (isSettings) {
 										cfg.settingsOpacity = op;
 										applySettingsOverrides(op);
 									} else {
@@ -3027,7 +3766,15 @@ window.__ModuleLoader__.load({
 								},
 								onChange: (v) => {
 									const op = v / 100;
-									if (isSettings) setSop(op);
+									if (isChat) {
+										cfg.chatTextOpacity = op;
+										applyViewCards();
+										saveConfig();
+									} else if (isTrajectory) {
+										cfg.trajectoryOpacity = op;
+										applyTrajectoryOverrides(op);
+										saveConfig();
+									} else if (isSettings) setSop(op);
 									else {
 										const ops = { ...rOps() };
 										ops[opKey] = op;
@@ -3076,10 +3823,13 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/components/BgEditor.tsx
+		/** Placement slot for the active background type: video framing lives in its
+		*  own state so image and video edits never overwrite each other. */
+		const activeState = () => cfg.backgroundType === "video" ? cfg.videoBgState : cfg.bgState;
 		function BgEditor({ url, t, onClose, onCommit }) {
 			const pw = Math.min(window.innerWidth * .75, 860);
 			const ph = Math.round(pw * window.innerHeight / window.innerWidth);
-			const saved = rBgState();
+			const saved = activeState();
 			const [zoom, setZoom] = (0, react.useState)(saved.iw > 0 ? saved.zoom : 1);
 			const [pos, setPos] = (0, react.useState)(saved.iw > 0 ? {
 				x: saved.x * pw,
@@ -3110,7 +3860,7 @@ window.__ModuleLoader__.load({
 						w,
 						h
 					});
-					const s = rBgState();
+					const s = activeState();
 					if (s.iw > 0 && s.iw === img.width && s.ih === img.height) {
 						setZoom(s.zoom);
 						setPos({
@@ -3264,8 +4014,30 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/components/pages/BackgroundPage.tsx
 		const SEG_W = 108;
+		const BG_MODES = [
+			{
+				mode: "fit",
+				labelKey: "bgModeFit"
+			},
+			{
+				mode: "fill",
+				labelKey: "bgModeFill"
+			},
+			{
+				mode: "stretch",
+				labelKey: "bgModeStretch"
+			},
+			{
+				mode: "tile",
+				labelKey: "bgModeTile"
+			},
+			{
+				mode: "center",
+				labelKey: "bgModeCenter"
+			}
+		];
 		function BackgroundPage({ p }) {
-			const { t, setWp, setWop, setBl, setBgType, setGeneratedBg, regenerateBg, setRegenerateOnReload, useStore } = p;
+			const { t, setWp, setVideo, setWop, setBl, setBgType, setGeneratedBg, regenerateBg, setRegenerateOnReload, useStore } = p;
 			const store = useStore((s) => s);
 			const storeUrl = store.url;
 			const backgroundType = store.backgroundType;
@@ -3275,9 +4047,16 @@ window.__ModuleLoader__.load({
 			const [editorOpen, setEditorOpen] = (0, react.useState)(false);
 			const [dragOver, setDragOver] = (0, react.useState)(false);
 			const [spinTick, setSpinTick] = (0, react.useState)(0);
-			const isGenerated = backgroundType !== "image";
+			const [mode, setModeState] = (0, react.useState)(rBgMode());
+			const isVideo = backgroundType === "video";
+			const isStatic = backgroundType === "image" || isVideo;
+			const isGenerated = !isStatic;
 			const activeGenType = isGenerated && generatedBg ? generatedBg.type : "mesh";
 			const onFileSelect = (f) => {
+				if (f.type.startsWith("video/")) {
+					setVideo(f, f.type);
+					return;
+				}
 				readImg(f, (d) => {
 					if (d) setWp(d);
 				});
@@ -3286,10 +4065,18 @@ window.__ModuleLoader__.load({
 				e.preventDefault();
 				setDragOver(false);
 				const f = e.dataTransfer.files?.[0];
-				if (f && f.type.startsWith("image/")) onFileSelect(f);
+				if (f && (f.type.startsWith("image/") || f.type.startsWith("video/"))) onFileSelect(f);
+			};
+			const switchToStatic = () => {
+				if (isStatic) return;
+				setBgType(isVideo || cfg.videoMime !== null ? "video" : "image");
 			};
-			const switchToImage = () => {
-				if (backgroundType !== "image") setBgType("image");
+			const setMode = (m) => {
+				if (m === mode) return;
+				setModeState(m);
+				cfg.bgMode = m;
+				applyWp();
+				saveConfig();
 			};
 			const setGenType = (type) => {
 				if (type === activeGenType) return;
@@ -3367,15 +4154,20 @@ window.__ModuleLoader__.load({
 							isGenerated ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 								className: "dab-hero-badge",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SparkleIcon, { size: 11 }), t("liveBadge")]
+							}) : isVideo ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "dab-hero-badge",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoIcon, { size: 11 }), t("bgVideoBadge")]
 							}) : null,
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "dab-hero-veil",
-								children: [backgroundType === "image" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								children: [isStatic && storeUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 									type: "button",
 									className: "dab-btn",
+									disabled: mode !== "fit",
+									title: mode !== "fit" ? t("bgEditLocked") : void 0,
 									onClick: () => setEditorOpen(true),
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditIcon, { size: 13 }), t("bgEdit")]
-								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								}) : isGenerated ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 									type: "button",
 									className: "dab-btn",
 									onClick: () => {
@@ -3383,7 +4175,7 @@ window.__ModuleLoader__.load({
 										setSpinTick((x) => x + 1);
 									},
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RefreshIcon, { size: 13 }), t("bgRegenerate")]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 									type: "button",
 									className: "dab-btn dab-btn-danger",
 									onClick: () => setWp(null),
@@ -3418,7 +4210,7 @@ window.__ModuleLoader__.load({
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 								type: "button",
 								className: `dab-seg-item${!isGenerated ? " is-active" : ""}`,
-								onClick: switchToImage,
+								onClick: switchToStatic,
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PhotoIcon, { size: 14 }), t("bgSourceImage")]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -3432,28 +4224,44 @@ window.__ModuleLoader__.load({
 						]
 					})
 				}),
-				!isGenerated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+				!isGenerated ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 					className: "dab-card dab-card-hover dab-rise",
 					style: { "--d": 3 },
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "dab-chip-row",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
 							className: "dab-btn dab-btn-primary",
 							onClick: () => fileRef.current?.click(),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 14 }), t("bgChoose")]
-						}), storeUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						}), storeUrl || isVideo ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isStatic && storeUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
 							className: "dab-btn",
+							disabled: mode !== "fit",
+							title: mode !== "fit" ? t("bgEditLocked") : void 0,
 							onClick: () => setEditorOpen(true),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditIcon, { size: 14 }), t("bgEdit")]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
 							className: "dab-btn dab-btn-ghost dab-btn-danger",
 							onClick: () => setWp(null),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 14 }), t("bgRemove")]
 						})] }) : null]
-					})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: { marginTop: 16 },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-swatch-title",
+							children: t("bgModeTitle")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-chip-row",
+							children: BG_MODES.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: `dab-chip${mode === m.mode ? " is-active" : ""}`,
+								onClick: () => setMode(m.mode),
+								children: t(m.labelKey)
+							}, m.mode))
+						})]
+					})]
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 					className: "dab-card dab-rise",
 					style: { "--d": 3 },
@@ -3529,7 +4337,6 @@ window.__ModuleLoader__.load({
 									step: 1,
 									def: Math.round(generatedBg.scale * 100),
 									fmt: (v) => `${v}%`,
-									onInput: () => {},
 									onChange: (v) => updateGenerated({ scale: v / 100 })
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
 									label: t("bgMeshIntensity"),
@@ -3538,7 +4345,6 @@ window.__ModuleLoader__.load({
 									step: 1,
 									def: Math.round(generatedBg.intensity * 100),
 									fmt: (v) => `${v}%`,
-									onInput: () => {},
 									onChange: (v) => updateGenerated({ intensity: v / 100 })
 								})] }) : null,
 								activeGenType === "shader" && generatedBg?.type === "shader" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
@@ -3548,7 +4354,6 @@ window.__ModuleLoader__.load({
 									step: 1,
 									def: Math.round(generatedBg.speed * 100),
 									fmt: (v) => `${v}%`,
-									onInput: () => {},
 									onChange: (v) => updateGenerated({ speed: v / 100 })
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
 									label: t("bgShaderScale"),
@@ -3557,7 +4362,6 @@ window.__ModuleLoader__.load({
 									step: 1,
 									def: Math.round(generatedBg.scale * 100),
 									fmt: (v) => `${v}%`,
-									onInput: () => {},
 									onChange: (v) => updateGenerated({ scale: v / 100 })
 								})] }) : null,
 								activeGenType === "pattern" && generatedBg?.type === "pattern" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
@@ -3567,7 +4371,6 @@ window.__ModuleLoader__.load({
 									step: 1,
 									def: Math.round(generatedBg.density * 100),
 									fmt: (v) => `${v}%`,
-									onInput: () => {},
 									onChange: (v) => updateGenerated({ density: v / 100 })
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
 									label: t("bgPatternScale"),
@@ -3576,7 +4379,6 @@ window.__ModuleLoader__.load({
 									step: 1,
 									def: Math.round(generatedBg.scale * 100),
 									fmt: (v) => `${v}%`,
-									onInput: () => {},
 									onChange: (v) => updateGenerated({ scale: v / 100 })
 								})] }) : null
 							]
@@ -3666,7 +4468,7 @@ window.__ModuleLoader__.load({
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					ref: fileRef,
 					type: "file",
-					accept: "image/*",
+					accept: "image/*,video/*",
 					style: { display: "none" },
 					onChange: (e) => {
 						const f = e.target.files?.[0];
@@ -3675,18 +4477,20 @@ window.__ModuleLoader__.load({
 						e.target.value = "";
 					}
 				}),
-				editorOpen && storeUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BgEditor, {
+				editorOpen && storeUrl && isStatic && mode === "fit" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BgEditor, {
 					url: storeUrl,
 					t,
 					onClose: () => setEditorOpen(false),
 					onCommit: (z, x, y, iw, ih) => {
-						cfg.bgState = {
+						const st = {
 							zoom: z,
 							x,
 							y,
 							iw,
 							ih
 						};
+						if (backgroundType === "video") cfg.videoBgState = st;
+						else cfg.bgState = st;
 						applyWp();
 						saveConfig();
 						setEditorOpen(false);
@@ -3908,25 +4712,9 @@ window.__ModuleLoader__.load({
 		/**
 		* dsh-any-background — browser half entry.
 		*
-		* Appearance plugin with:
-		* 1. PS-style color wheel (hue ring + saturation/lightness square) for
-		*    real-time theme color selection with dynamic token generation.
-		* 2. Background image editor modal with drag-to-pan and scroll-to-zoom
-		*    inside a viewport-proportional preview rectangle.
-		* 3. Opacity / blur sliders with zero-lag direct DOM manipulation: the
-		*    homepage background opacity (主界面) and the settings panel opacity
-		*    (设置界面透明度) are separate sliders.
-		*
-		* This file wires the plugin lifecycle (theme registration, wallpaper layer,
-		* viewport watch, i18n, settings-section injection, boot restore, watchdog).
-		* The heavy lifting lives in the sibling modules:
-		*   state.ts       in-memory config mirror + getters
-		*   rpc.ts         file-backed persistence over the /dsh-any-background channel
-		*   wallpaper.ts   wallpaper DOM layer + inline token writes
-		*   utils/         color math, token generation, image compression
-		*   components/    ThemeSection shell + pages/, ColorWheel, BgEditor, LiveSlider
-		*   i18n.ts        zh/en dictionaries
-		*   ui.css.ts      scoped design-system stylesheet (classes + keyframes)
+		* Wires the plugin lifecycle: theme registration, wallpaper layer, viewport
+		* watch, i18n, settings-section injection, boot restore, watchdog. The heavy
+		* lifting lives in the sibling modules (state/rpc/wallpaper/utils/components).
 		*/
 		const name = "dsh-any-background";
 		const inject = [
@@ -3959,16 +4747,15 @@ window.__ModuleLoader__.load({
 				customDispose?.();
 				if (colorTimerRef.current !== null) window.clearTimeout(colorTimerRef.current);
 			}, "dsh-any-background: skin dispose");
-			let styleEl;
-			if (typeof document !== "undefined") {
-				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}`;
-				document.head.appendChild(styleEl);
-			}
+			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}`;
+			document.head.appendChild(styleEl);
 			ctx.effect(() => () => {
 				styleEl?.parentNode?.removeChild(styleEl);
 			}, "dsh-any-background: gradient");
+			const disposeDragQuality = watchWallpaperDragQuality();
+			ctx.effect(() => () => disposeDragQuality(), "dsh-any-background: drag quality");
 			let rev = 0;
 			let colorRev = 0;
 			let bgRev = 0;
@@ -4020,7 +4807,22 @@ window.__ModuleLoader__.load({
 					const [h, s, l] = rColor();
 					registerCustom(h, s, l);
 				}
-				if (cfg.backgroundType !== "image") {
+				if (cfg.backgroundType === "video") {
+					const v = rWpVideo();
+					if (v) {
+						captureVideoSnapshot(v).then((snap) => {
+							if (rWpVideo() !== v) return;
+							setWpVideoSnapshot(snap);
+							applyThemeColor();
+							syncBg();
+						});
+						applyWp();
+					} else {
+						cfg.backgroundType = "image";
+						setWpUrl(rWpImage());
+						applyThemeColor();
+					}
+				} else if (cfg.backgroundType !== "image") {
 					if (cfg.regenerateOnReload) regenerateGeneratedBg();
 					else if (cfg.generatedBg) updateGeneratedBg(cfg.generatedBg);
 					persistConfig();
@@ -4068,6 +4870,25 @@ window.__ModuleLoader__.load({
 			const sectionInject = (actions) => {
 				bound = actions;
 				syncBg();
+				const playVideoFromBlob = (blob, mime) => {
+					const localUrl = URL.createObjectURL(blob);
+					cfg.backgroundType = "video";
+					setWpUrl(null);
+					cfg.videoBgState = { ...DEFAULT_CONFIG.bgState };
+					setWpVideoUrl(localUrl, mime ?? blob.type ?? "video/mp4");
+					applyWp();
+					syncBg();
+					const applied = rWpVideo();
+					captureVideoSnapshot(localUrl).then((snap) => {
+						if (rWpVideo() !== applied) return;
+						setWpVideoSnapshot(snap);
+						applyThemeColor();
+						syncBg();
+					});
+					uploadVideo(blob, mime ?? blob.type ?? "video/mp4").then((ok) => {
+						if (ok) persistConfig();
+					});
+				};
 				const [wh, ws, wl] = rColor();
 				const [dh, ds, dv] = hslToHsv(wh, ws, wl);
 				return {
@@ -4103,9 +4924,45 @@ window.__ModuleLoader__.load({
 						setWpUrl(u);
 						setBgState({ ...DEFAULT_CONFIG.bgState });
 						persistWallpaper(u);
+						if (u === null) {
+							setWpVideoUrl(null, null);
+							persistVideo(null);
+						}
 						applyThemeColor();
 						syncBg();
 					},
+					setVideo: async (u, mime) => {
+						setBgDark(null);
+						if (u === null) {
+							setWpVideoUrl(null, null);
+							cfg.backgroundType = "image";
+							setWpUrl(rWpImage());
+							persistVideo(null);
+							applyThemeColor();
+							syncBg();
+							saveConfig();
+							return;
+						}
+						if (typeof u !== "string") {
+							playVideoFromBlob(u, mime);
+							return;
+						}
+						const live = await persistVideo(u) ? VIDEO_SERVE_URL : u;
+						cfg.backgroundType = "video";
+						setWpUrl(null);
+						cfg.videoBgState = { ...DEFAULT_CONFIG.bgState };
+						setWpVideoUrl(live, mime ?? null);
+						applyWp();
+						saveConfig();
+						syncBg();
+						const applied = rWpVideo();
+						captureVideoSnapshot(live).then((snap) => {
+							if (rWpVideo() !== applied) return;
+							setWpVideoSnapshot(snap);
+							applyThemeColor();
+							syncBg();
+						});
+					},
 					setBgType: (type) => {
 						setBackgroundType(type);
 						saveConfig();
@@ -4158,7 +5015,7 @@ window.__ModuleLoader__.load({
 					extractColor: async () => {
 						const url = rWp();
 						if (!url) return false;
-						const hsl = await extractWallpaperColor(url, rBgState());
+						const hsl = await extractWallpaperColor(url, cfg.backgroundType === "video" ? rVideoBgState() : rBgState());
 						if (!hsl) return false;
 						cfg.color = hsl;
 						registerCustom(hsl[0], hsl[1], hsl[2]);
@@ -4169,12 +5026,29 @@ window.__ModuleLoader__.load({
 						bound?.syncColor(hsv, colorRev);
 						return true;
 					},
-					exportTheme: () => {
+					exportTheme: async () => {
+						let videoPayload = null;
+						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);
+								});
+								if (videoPayload && !/^data:video\//.test(videoPayload)) videoPayload = videoPayload.replace(/^data:[^;,]*/, `data:${cfg.videoMime ?? "video/mp4"}`);
+							} catch {
+								videoPayload = null;
+							}
+						}
 						const payload = {
 							version: 2,
 							exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
 							config: cfg,
-							wallpaper: cfg.backgroundType === "image" ? rWp() : null
+							wallpaper: cfg.backgroundType === "image" ? rWp() : null,
+							video: videoPayload
 						};
 						const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
 						const url = URL.createObjectURL(blob);
@@ -4191,7 +5065,38 @@ window.__ModuleLoader__.load({
 							const d = data;
 							if (typeof d.config !== "object" || d.config === null) return false;
 							adoptConfig(d.config);
-							if (cfg.backgroundType === "image") {
+							if (cfg.backgroundType === "video") {
+								const video = typeof d.video === "string" && /^data:video\//.test(d.video) ? d.video : null;
+								if (video !== null) {
+									let blob = null;
+									try {
+										blob = await fetch(video).then((r) => r.blob());
+									} catch {
+										blob = null;
+									}
+									if (blob !== null) playVideoFromBlob(blob, cfg.videoMime);
+									else {
+										const live = await persistVideo(video) ? VIDEO_SERVE_URL : video;
+										setWpVideoUrl(live, cfg.videoMime);
+										applyWp();
+										const applied = rWpVideo();
+										captureVideoSnapshot(live).then((snap) => {
+											if (rWpVideo() !== applied) return;
+											setWpVideoSnapshot(snap);
+											applyThemeColor();
+											syncBg();
+										});
+									}
+								} else {
+									setWpVideoUrl(null, null);
+									persistVideo(null);
+									cfg.backgroundType = "image";
+									setWpImageUrl(null);
+									setWpUrl(null);
+									persistWallpaper(null);
+									applyThemeColor();
+								}
+							} else if (cfg.backgroundType === "image") {
 								const wallpaper = typeof d.wallpaper === "string" && /^data:image\//.test(d.wallpaper) ? d.wallpaper : null;
 								setWpImageUrl(wallpaper);
 								setWpUrl(wallpaper);