dsh-any-background 0.1.9 → 0.2.1

package/README.md

@@ -65,8 +65,8 @@ A **DeepSeek Harness** appearance plugin that lets you fully customize the Web U
 - **Position Editor** — One shared editor for images and videos: drag to pan, scroll to zoom, one-click reset. Image and video placements are stored separately and never overwrite each other.
 - **Layout Modes** — Fit / Fill / Stretch / Tile / Center for both images and videos; in Fit mode the editor-committed framing stays consistent across window resizes and cross-monitor moves.
 - **Generated Dynamic Backgrounds** — Choose mesh gradient, Shader, or geometric patterns with adjustable spread, intensity, and seed locking.
-- **Per-part Interface Opacity** — Independent sliders for main background, sidebar, cards & panels, plus the settings panel and wallpaper.
-- **Per-part Interface Blur** — Frosted-glass `backdrop-filter` blur (0–60 px) for each interface part.
+- **Per-part Interface Opacity** — Independent sliders for the main background, sidebar, cards & panels (including the dropdowns and menus around the dialog), the input & controls (composer box, Cordis panel), plus the settings panel and wallpaper.
+- **Per-part Interface Blur** — Frosted-glass `backdrop-filter` blur (0–60 px) for each interface part, including a real backdrop on the composer and Cordis panel via stable host selectors.
 - **Conversation View Cards** — The message list is wrapped in a translucent card automatically, and the trajectory page gets whole-page opacity & blur controls, letting the wallpaper shine through the content.
 - **Theme Export / Import** — One-click export to a self-contained `dsh-any-theme.json` (config + wallpaper, video embedded as a data URL) and import to restore it anywhere.
 - **File-based Persistence** — All settings are stored on the filesystem under `~/.dsh/.dsh-any-background-data/`, not `localStorage`.
@@ -84,6 +84,13 @@ A **DeepSeek Harness** appearance plugin that lets you fully customize the Web U
 - **Inspiration palette selection cleared** — Picking a theme color from the wheel deselects any previously selected inspiration swatch.
 - **Debug telemetry removed** — Temporary boot-time logging and `MutationObserver` instrumentation have been cleaned out.
 - **Per-part blur isolated** — Blur is applied on `::before` underlays so it never traps the host's fixed-position settings dialog.
+- **New "Input & controls" part** — The composer box, slash menu, and Cordis plugin panel own a dedicated opacity slider; their translucent surfaces get real frosted-glass backdrop blur attached through stable host data attributes (`[data-composer-card]`, `[data-cordis-panel]`).
+- **Native control contrast fixed** — Solid surface tokens (composer, menus, Cordis panel) now carry per-part alpha, and a forced `color-scheme` keeps native `<select>` popups legible — no more white-on-white when the wallpaper brightness verdict flips labels to white.
+- **Translucency without self-damage** — The "Input & controls" opacity slider is deliberately decoupled from the settings panel's own controls (which share the same button tokens), so adjusting it can never bleach the plugin's own sliders and buttons.
+- **Drag-time performance** — Opacity tokens are written as CSS variables on `<html>` instead of rebuilding the whole token stylesheet per tick; slider updates are coalesced to one rAF per frame; the main-background columns are only retinted when their own slider changes.
+- **Drag-time wallpaper downscaling** — While any slider is being dragged the wallpaper swaps to a (~720px) low-res copy for cheap rasterization over large images, then restores full resolution on release.
+- **Instant video playback on import** — A picked video starts playing immediately from a local object URL while its raw bytes stream to disk in the background; the persisted serve URL takes over on the next reload — no more upload + first-buffer wait after import.
+- **Option boxes follow the card slider** — The dropdowns, slash-trigger menu, model selector, and popovers around the dialog now follow the "Cards & panels" opacity slider instead of "Input & controls"; the Cordis panel keeps its own input-slider binding.
 
 ## Installation
 

package/README.zh.md

@@ -65,8 +65,8 @@
 - **位置编辑器** — 图片与视频共用同一套编辑器：拖动平移、滚轮缩放、一键重置；图片与视频的位置状态各自独立保存，互不覆盖。
 - **布局模式** — 适应 / 填充 / 拉伸 / 平铺 / 居中五种排布，图片与视频通用；「适应」模式下编辑器提交的构图在窗口缩放、跨屏移动后保持一致。
 - **动态生成背景** — 支持网格渐变、Shader、几何图案，可调节扩散范围、色彩强度并锁定种子。
-- **分部位界面透明度** — 主背景、侧边栏、卡片面板、设置面板与壁纸各自独立滑块。
-- **分部位界面模糊度** — 每个界面部位可独立调整毛玻璃 `backdrop-filter` 模糊（0–60 px）。
+- **分部位界面透明度** — 主背景、侧边栏、卡片面板（含对话框周围的选项框/菜单）、输入框与控件（发送框、Cordis 插件面板）、设置面板与壁纸各自独立滑块。
+- **分部位界面模糊度** — 每个界面部位可独立调整毛玻璃 `backdrop-filter` 模糊（0–60 px），并通过宿主的稳定选择器为发送框与 Cordis 面板提供真实背景模糊。
 - **对话视图卡片** — 消息列表自动包裹为半透明卡片，轨迹页可整页调节透明度与模糊，让壁纸从内容后方透出来。
 - **主题导出 / 导入** — 一键导出为自包含的 `dsh-any-theme.json`（配置 + 壁纸，视频以 data URL 内嵌），可随时导入还原。
 - **文件持久化** — 所有设置保存到文件系统 `~/.dsh/.dsh-any-background-data/`，不再依赖 `localStorage`。
@@ -84,6 +84,13 @@
 - **灵感色板选中重置** — 在色轮中选取主题色后，灵感色板中的之前选中状态自动清除。
 - **移除调试埋点** — 清理了临时的启动日志与 `MutationObserver` 探针代码。
 - **分部位模糊隔离** — 模糊效果施加在 `::before` 伪元素上，避免影响宿主固定定位的设置弹窗。
+- **新增「输入框与控件」部件** — 发送框、斜杠菜单、Cordis 插件面板拥有独立的透明度滑块；半透明表面通过宿主的稳定 data 属性（`[data-composer-card]`、`[data-cordis-panel]`）获得真正的毛玻璃背景模糊。
+- **修复原生控件明暗对比** — 实心表面令牌（发送框、菜单、Cordis 面板）现在参与分部位 alpha，并强制 `color-scheme` 让原生 `<select>` 弹层保持可读——消除壁纸判暗把标签转白后出现的白底白字。
+- **透明化不反噬自身** — 「输入框与控件」透明度滑块刻意与该面板自己的控件（共享同一批按钮令牌）解绑，调节它不会把插件自身的滑块和按钮也变透明。
+- **拖动性能优化** — 透明度令牌改为写 `<html>` 上的 CSS 变量（拖动时不再整表重建），滑块更新按 rAF 合帧为每帧一次；「主背景」列仅在自身滑块变化时才重染。
+- **拖动时壁纸降采样** — 拖动任意滑块期间，壁纸临时切换到（~720px）低清副本以降低大图上的合成成本，松手后恢复全分辨率。
+- **导入即播视频壁纸** — 选中的视频立即通过本地对象 URL 开始播放，原始字节在后台流式落盘，下次刷新自动切回持久化服务地址——不再有「上传 + 首帧缓冲」的等待。
+- **选项框跟随卡片滑块** — 对话框周围的下拉菜单、斜杠命令菜单、模型选择器与弹层现在跟随「对话框中选项面板」透明度滑块，而非「输入框与控件」；Cordis 插件面板保持自己的输入滑块绑定。
 
 ## 安装
 

package/lib/client.js

@@ -32,6 +32,7 @@ window.__ModuleLoader__.load({
 			uiOpacityBg: "主背景",
 			uiOpacitySide: "侧边栏",
 			uiOpacityCard: "对话框中选项面板",
+			uiOpacityInput: "输入框与控件",
 			uiSop: "设置界面透明度",
 			uiChatRegion: "对话文本框",
 			uiTrajectory: "轨迹页",
@@ -129,6 +130,7 @@ 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",
@@ -211,7 +213,8 @@ window.__ModuleLoader__.load({
 			opacities: {
 				bg: .85,
 				sidebar: .93,
-				card: 1
+				card: 1,
+				input: 1
 			},
 			blurs: {
 				bg: 0,
@@ -219,7 +222,8 @@ window.__ModuleLoader__.load({
 				card: 0,
 				settings: 0,
 				chat: 0,
-				trajectory: 0
+				trajectory: 0,
+				input: 0
 			},
 			settingsOpacity: 1,
 			wallpaperOpacity: 1,
@@ -259,6 +263,8 @@ window.__ModuleLoader__.load({
 		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;
 		}
@@ -272,13 +278,25 @@ window.__ModuleLoader__.load({
 				wpVideoSnapshot = null;
 			} else {
 				videoRev++;
-				wpVideoUrl = `${url}${url.includes("?") ? "&" : "?"}r=${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;
 		}
@@ -326,7 +344,8 @@ window.__ModuleLoader__.load({
 			for (const k of [
 				"bg",
 				"sidebar",
-				"card"
+				"card",
+				"input"
 			]) out[k] = clamp01(o[k], DEFAULT_CONFIG.opacities[k]);
 			return out;
 		}
@@ -339,7 +358,8 @@ window.__ModuleLoader__.load({
 				"card",
 				"settings",
 				"chat",
-				"trajectory"
+				"trajectory",
+				"input"
 			]) {
 				const v = b[k];
 				out[k] = typeof v === "number" ? Math.min(60, Math.max(0, v)) : DEFAULT_CONFIG.blurs[k];
@@ -390,7 +410,8 @@ window.__ModuleLoader__.load({
 				"card",
 				"settings",
 				"chat",
-				"trajectory"
+				"trajectory",
+				"input"
 			]) blurs[k] = num(bl[k], DEFAULT_CONFIG.blurs[k]);
 			const bgType = [
 				"video",
@@ -412,7 +433,8 @@ window.__ModuleLoader__.load({
 				opacities: {
 					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)
+					card: num(ops.card, DEFAULT_CONFIG.opacities.card),
+					input: num(ops.input, DEFAULT_CONFIG.opacities.input)
 				},
 				blurs,
 				settingsOpacity: num(c.settingsOpacity, DEFAULT_CONFIG.settingsOpacity),
@@ -601,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)),
@@ -612,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)),
@@ -639,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)),
@@ -647,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)),
@@ -1472,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 {
@@ -1482,24 +1555,37 @@ 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);
+				}
+				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);
 				}
-				ensureTokenStyle().textContent = `body{${decls.join(";")}}`;
-				for (const name of appliedTokenNames) document.body.style.removeProperty(name);
-				appliedTokenNames = Object.keys(tokens);
-				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");
+		}
 		function applySettingsOverrides(op) {
 			const [h, s, l] = rColor();
 			const tokens = genTokens(h, s, l).tokens;
@@ -1688,6 +1774,7 @@ window.__ModuleLoader__.load({
 			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). */
@@ -1700,6 +1787,10 @@ window.__ModuleLoader__.load({
 				applyCardPanelsBlur(v);
 				return;
 			}
+			if (part === "input") {
+				applyInputBlur(v);
+				return;
+			}
 			if (part === "chat" || part === "trajectory") {
 				applyViewCards();
 				return;
@@ -1923,6 +2014,78 @@ window.__ModuleLoader__.load({
 			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();
@@ -1967,6 +2130,7 @@ window.__ModuleLoader__.load({
 					}
 				});
 			}
+			captureLowRes(url, () => void 0);
 			applyWpEffects();
 		}
 		/** Video wallpaper: a muted looping <video> inside the wallpaper layer.
@@ -1982,11 +2146,12 @@ window.__ModuleLoader__.load({
 				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);
-				wpEl.appendChild(videoEl);
 			} else if (videoEl.getAttribute("src") !== url) {
 				videoEl.setAttribute("src", url);
 				videoEl.play().catch(() => void 0);
@@ -2047,6 +2212,7 @@ window.__ModuleLoader__.load({
 		function teardownWp() {
 			clearDynamicBg();
 			clearVideoEl();
+			disposeVideoObjectUrl();
 			setBgDark(null);
 			wpEl?.remove();
 			wpEl = null;
@@ -2054,6 +2220,8 @@ window.__ModuleLoader__.load({
 			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");
@@ -2064,6 +2232,15 @@ window.__ModuleLoader__.load({
 			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);
@@ -2589,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
 		/**
@@ -3482,6 +3670,11 @@ window.__ModuleLoader__.load({
 				labelKey: "uiOpacityCard",
 				Icon: ChatIcon
 			},
+			{
+				opKey: "input",
+				labelKey: "uiOpacityInput",
+				Icon: InputIcon
+			},
 			{
 				isSettings: true,
 				labelKey: "uiSop",
@@ -4556,11 +4749,13 @@ 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}`;
+			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;
@@ -4675,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 {
@@ -4729,15 +4943,15 @@ window.__ModuleLoader__.load({
 							saveConfig();
 							return;
 						}
-						let ok;
-						if (typeof u === "string") ok = await persistVideo(u);
-						else ok = await uploadVideo(u, mime ?? u.type ?? "video/mp4");
-						const live = ok ? VIDEO_SERVE_URL : typeof u === "string" ? u : null;
-						if (live === null) 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 ?? (typeof u === "string" ? null : u.type) ?? null);
+						setWpVideoUrl(live, mime ?? null);
 						applyWp();
 						saveConfig();
 						syncBg();
@@ -4854,24 +5068,25 @@ window.__ModuleLoader__.load({
 							if (cfg.backgroundType === "video") {
 								const video = typeof d.video === "string" && /^data:video\//.test(d.video) ? d.video : null;
 								if (video !== null) {
-									let ok = false;
+									let blob = null;
 									try {
-										const blob = await fetch(video).then((r) => r.blob());
-										ok = await uploadVideo(blob, cfg.videoMime ?? blob.type ?? "video/mp4");
+										blob = await fetch(video).then((r) => r.blob());
 									} catch {
-										ok = false;
+										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();
+										});
 									}
-									if (!ok) ok = await persistVideo(video);
-									const live = ok ? 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);