dsh-any-background 0.1.9 → 0.2.2

package/lib/client.js

@@ -4,10 +4,18 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-		let _deepseek_ai_dsh_client_runtime_client = require("@deepseek-ai/dsh-client-runtime/client");
 		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		let react_dom = require("react-dom");
+		//#region src/client/runtime.ts
+		function resolveStore() {
+			try {
+				return require("@deepseek-ai/dsh-client-store");
+			} catch {}
+			return require("@deepseek-ai/dsh-client-runtime/client");
+		}
+		const defineStore = resolveStore().defineStore;
+		//#endregion
 		//#region src/client/i18n.ts
 		const NS = "settings.anyBg";
 		const zh = {
@@ -32,6 +40,7 @@ window.__ModuleLoader__.load({
 			uiOpacityBg: "主背景",
 			uiOpacitySide: "侧边栏",
 			uiOpacityCard: "对话框中选项面板",
+			uiOpacityInput: "输入框与控件",
 			uiSop: "设置界面透明度",
 			uiChatRegion: "对话文本框",
 			uiTrajectory: "轨迹页",
@@ -129,6 +138,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 +221,8 @@ window.__ModuleLoader__.load({
 			opacities: {
 				bg: .85,
 				sidebar: .93,
-				card: 1
+				card: 1,
+				input: 1
 			},
 			blurs: {
 				bg: 0,
@@ -219,7 +230,8 @@ window.__ModuleLoader__.load({
 				card: 0,
 				settings: 0,
 				chat: 0,
-				trajectory: 0
+				trajectory: 0,
+				input: 0
 			},
 			settingsOpacity: 1,
 			wallpaperOpacity: 1,
@@ -259,6 +271,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 +286,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 +352,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 +366,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 +418,8 @@ window.__ModuleLoader__.load({
 				"card",
 				"settings",
 				"chat",
-				"trajectory"
+				"trajectory",
+				"input"
 			]) blurs[k] = num(bl[k], DEFAULT_CONFIG.blurs[k]);
 			const bgType = [
 				"video",
@@ -412,7 +441,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),
@@ -588,30 +618,76 @@ window.__ModuleLoader__.load({
 					"--dsw-alias-bg-layer-2": hsl(h(0), s(0), l(.07)),
 					"--dsw-alias-bg-layer-3": hsl(h(0), s(-.05), l(.12)),
 					"--dsw-alias-bg-overlay": hsl(h(0), s(-.05), l(.12)),
+					"--dsw-alias-bg-module-platform": hsl(h(0), s(0), l(.05)),
+					"--dsw-alias-bg-multi-select": hsl(h(0), s(0), l(.1)),
+					"--dsw-alias-bg-skeleton": "rgba(255,255,255,0.08)",
 					"--dsw-alias-border-l1": rgba(h(0), s(-.1), l(.18), .12),
 					"--dsw-alias-border-l2": rgba(h(0), s(-.1), l(.22), .22),
+					"--dsw-alias-border-l3": "rgba(255,255,255,0.16)",
+					"--dsw-alias-border-l4": "rgba(255,255,255,0.2)",
+					"--dsw-alias-border-inverted": "rgba(255,255,255,0.06)",
 					"--dsw-alias-label-primary": hsl(0, 0, 1),
-					"--dsw-alias-label-secondary": hsl(0, 0, 1),
-					"--dsw-alias-label-tertiary": hsl(0, 0, 1),
-					"--dsw-alias-label-caption": hsl(0, 0, 1),
-					"--dsw-alias-label-dimmed": hsl(0, 0, 1),
-					"--dsw-alias-label-quaternary": hsl(0, 0, 1),
+					"--dsw-alias-label-secondary": "rgba(255,255,255,0.85)",
+					"--dsw-alias-label-tertiary": "rgba(255,255,255,0.7)",
+					"--dsw-alias-label-caption": "rgba(255,255,255,0.5)",
+					"--dsw-alias-label-dimmed": "rgba(255,255,255,0.35)",
+					"--dsw-alias-label-quaternary": "rgba(255,255,255,0.25)",
+					"--dsw-alias-label-primary-dimmed": "rgba(255,255,255,0.92)",
+					"--dsw-alias-label-primary-foreground": hsl(0, 0, 1),
+					"--dsw-alias-label-primary-inverted": hsl(h(0), s(.08), Math.min(l(.06), .16)),
+					"--dsw-alias-label-primary-bluish": hsl(0, 0, 1),
 					"--dsw-alias-brand-primary": hsl(h(0), s(.1), Math.max(l(.2), .5)),
 					"--dsw-alias-brand-text": l(.2) > .6 ? "#000" : "#fff",
+					"--dsw-alias-button-primary-fill": hsl(h(0), s(.1), Math.max(l(.2), .5)),
 					"--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-fill": hsl(h(0), s(0), l(.02)),
+					"--dsw-alias-button-floating-hover": hsl(h(0), s(0), l(.1)),
+					"--dsw-alias-button-tool-bar-fill": "rgba(255,255,255,0.08)",
+					"--dsw-alias-button-tool-bar-hover": "rgba(255,255,255,0.12)",
+					"--dsw-alias-button-ghost-active-fill": hsl(h(0), s(0), l(.06)),
+					"--dsw-alias-button-ghost-active-border": "rgba(255,255,255,0.16)",
+					"--dsw-alias-button-ghost-active-hover": hsl(h(0), s(0), l(.09)),
+					"--dsw-alias-button-info-fill": "#679efe",
+					"--dsw-alias-button-info-hover": "#4176e6",
+					"--dsw-alias-button-contrast-fill": hsl(0, 0, 1),
 					"--dsw-alias-interactive-bg-hover": rgba(h(0), s(0), Math.max(l(.15), .4), .12),
+					"--dsw-alias-interactive-bg-hover-solid": rgba(h(0), s(0), Math.max(l(.15), .4), .16),
+					"--dsw-alias-interactive-bg-hover-accent": "rgba(255,255,255,0.24)",
+					"--dsw-alias-interactive-bg-hover-danger": "rgba(242,90,90,0.15)",
 					"--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)),
+					"--dsw-alias-markdown-code-block-banner": hsl(h(0), s(0), l(-.02)),
 					"--dsw-alias-markdown-inline-code": hsl(h(0), s(0), l(.04)),
+					"--dsw-alias-markdown-placeholder": hsl(h(0), s(0), l(-.02)),
+					"--dsw-alias-markdown-tag": hsl(h(0), s(0), l(.05)),
+					"--dsw-alias-markdown-citation": hsl(h(0), s(0), l(.06)),
+					"--dsw-alias-markdown-code-segment-selected": hsl(h(0), s(0), l(.05)),
+					"--dsw-alias-markdown-code-segment-unselected": hsl(h(0), s(0), l(-.05)),
 					"--dsw-alias-state-error-primary": "#ff5c72",
+					"--dsw-alias-state-error-secondary": "#ff8aa0",
 					"--dsw-alias-state-success-primary": "#3ddc84",
+					"--dsw-alias-state-success-secondary": "#69eea4",
+					"--dsw-alias-state-success-tertiary": "hsl(152,70%,62%)",
 					"--dsw-alias-state-warn-primary": "#ffb347",
+					"--dsw-alias-state-warn-secondary": "#ffc980",
+					"--dsw-alias-state-warn-tertiary": "#dd8629",
+					"--dsw-alias-state-warn-label": "#dd8629",
+					"--dsw-alias-state-business-primary": "#679efe",
+					"--dsw-alias-state-business-tertiary": "#6f7fa8",
 					"--dsw-specific-sidebar-fill": hsl(h(0), s(0), l(-.06)),
 					"--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-specific-bubble": hsl(h(0), s(0), l(.03)),
+					"--dsw-specific-bubble-highlight": hsl(h(0), s(0), l(.08)),
+					"--dsw-specific-selector": hsl(h(0), s(0), l(.05)),
+					"--dsw-specific-login-input": hsl(h(0), s(0), l(.03)),
+					"--dsw-specific-tip": hsl(h(0), s(0), l(.05)),
+					"--dsw-alias-toast-bg": hsl(h(0), s(0), l(.08)),
+					"--dsw-alias-tooltip-bg": 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)),
@@ -629,16 +705,17 @@ window.__ModuleLoader__.load({
 					"--dsw-alias-border-l1": rgba(h(0), s(-.15), l(-.35), .18),
 					"--dsw-alias-border-l2": rgba(h(0), s(-.15), l(-.35), .3),
 					"--dsw-alias-label-primary": hsl(0, 0, 0),
-					"--dsw-alias-label-secondary": hsl(0, 0, 0),
-					"--dsw-alias-label-tertiary": hsl(0, 0, 0),
-					"--dsw-alias-label-caption": hsl(0, 0, 0),
-					"--dsw-alias-label-dimmed": hsl(0, 0, 0),
-					"--dsw-alias-label-quaternary": hsl(0, 0, 0),
+					"--dsw-alias-label-secondary": "rgba(0,0,0,0.85)",
+					"--dsw-alias-label-tertiary": "rgba(0,0,0,0.7)",
+					"--dsw-alias-label-caption": "rgba(0,0,0,0.5)",
+					"--dsw-alias-label-dimmed": "rgba(0,0,0,0.35)",
+					"--dsw-alias-label-quaternary": "rgba(0,0,0,0.25)",
 					"--dsw-alias-brand-primary": hsl(h(0), s(.05), Math.min(l(-.18), .45)),
 					"--dsw-alias-brand-text": "#fff",
 					"--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 +724,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)),
@@ -1463,16 +1541,63 @@ window.__ModuleLoader__.load({
 			for (const name of appliedTokenNames) document.body.style.removeProperty(name);
 			appliedTokenNames = [];
 		}
-		/** Label tokens flipped by the generated-background brightness verdict. */
+		/** Label tokens flipped by the generated-background brightness verdict. The
+		*  faint tiers (caption/dimmed) are deliberately NOT flipped: they back
+		*  placeholder/hint text, which must stay visibly weaker than real input even
+		*  when the wallpaper brightness flips the main label direction. */
 		const LABEL_TOKENS = [
 			"--dsw-alias-label-primary",
 			"--dsw-alias-label-secondary",
-			"--dsw-alias-label-tertiary",
-			"--dsw-alias-label-caption",
-			"--dsw-alias-label-dimmed",
-			"--dsw-alias-label-quaternary"
+			"--dsw-alias-label-tertiary"
 		];
+		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 +1607,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 +1826,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 +1839,10 @@ window.__ModuleLoader__.load({
 				applyCardPanelsBlur(v);
 				return;
 			}
+			if (part === "input") {
+				applyInputBlur(v);
+				return;
+			}
 			if (part === "chat" || part === "trajectory") {
 				applyViewCards();
 				return;
@@ -1889,6 +2032,42 @@ window.__ModuleLoader__.load({
 			partsObserver?.disconnect();
 			partsObserver = null;
 		}
+		let themeObserver = null;
+		let themeRaf = 0;
+		function reassertScheme() {
+			const [, , l] = rColor();
+			if (rBgDark() ?? l < .55) document.body.setAttribute("data-ds-dark-theme", "dsh-any-background");
+			else document.body.removeAttribute("data-ds-dark-theme");
+			applyCustomTokens(rOps());
+		}
+		/** Re-assert the plugin's forced scheme whenever the host strips it, so a
+		*  refresh / cold-load / set-change never flashes a light frame. Returns a
+		*  disposer for teardown. */
+		function watchThemeResets() {
+			if (themeObserver !== null || typeof MutationObserver === "undefined") return () => void 0;
+			themeObserver = new MutationObserver(() => {
+				if (document.body.getAttribute("data-ds-dark-theme") === "dsh-any-background") return;
+				if (!(rHasColor() || rBgDark() !== null)) return;
+				if (themeRaf !== 0) return;
+				themeRaf = requestAnimationFrame(() => {
+					themeRaf = 0;
+					if (document.body.getAttribute("data-ds-dark-theme") === "dsh-any-background") return;
+					reassertScheme();
+				});
+			});
+			themeObserver.observe(document.body, {
+				attributes: true,
+				attributeFilter: ["data-ds-dark-theme"]
+			});
+			themeObserver.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ["data-ds-dark-theme"]
+			});
+			return () => {
+				themeObserver?.disconnect();
+				themeObserver = null;
+			};
+		}
 		function ensureWpContainer() {
 			if (!wpEl || !document.body.contains(wpEl)) {
 				wpEl = document.createElement("div");
@@ -1923,6 +2102,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 +2218,7 @@ window.__ModuleLoader__.load({
 					}
 				});
 			}
+			captureLowRes(url, () => void 0);
 			applyWpEffects();
 		}
 		/** Video wallpaper: a muted looping <video> inside the wallpaper layer.
@@ -1982,11 +2234,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 +2300,7 @@ window.__ModuleLoader__.load({
 		function teardownWp() {
 			clearDynamicBg();
 			clearVideoEl();
+			disposeVideoObjectUrl();
 			setBgDark(null);
 			wpEl?.remove();
 			wpEl = null;
@@ -2054,6 +2308,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 +2320,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 +2854,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 +3758,11 @@ window.__ModuleLoader__.load({
 				labelKey: "uiOpacityCard",
 				Icon: ChatIcon
 			},
+			{
+				opKey: "input",
+				labelKey: "uiOpacityInput",
+				Icon: InputIcon
+			},
 			{
 				isSettings: true,
 				labelKey: "uiSop",
@@ -4556,16 +4837,18 @@ 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}[data-composer-card] textarea::placeholder,[data-composer-card] input::placeholder,[data-composer-card] [contenteditable]::placeholder,[data-cordis-panel] input::placeholder,[data-cordis-panel] textarea::placeholder,.dab-input::placeholder,.dab-input textarea::placeholder,.dab-input input::placeholder{color:var(--dsh-any-placeholder,var(--dsw-alias-label-caption,#8a8f98))!important;font-style:italic;opacity:.85}`;
 			document.head.appendChild(styleEl);
 			ctx.effect(() => () => {
 				styleEl?.parentNode?.removeChild(styleEl);
 			}, "dsh-any-background: gradient");
+			const disposeDragQuality = watchWallpaperDragQuality();
+			ctx.effect(() => () => disposeDragQuality(), "dsh-any-background: drag quality");
 			let rev = 0;
 			let colorRev = 0;
 			let bgRev = 0;
 			const colorTimerRef = { current: null };
-			const store = (0, _deepseek_ai_dsh_client_runtime_client.defineStore)({
+			const store = defineStore({
 				init: () => ({
 					url: null,
 					rev: -1,
@@ -4675,6 +4958,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 +5031,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 +5156,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);
@@ -4999,6 +5302,10 @@ window.__ModuleLoader__.load({
 			ctx.effect(() => () => {
 				window.clearInterval(watchdogId);
 			}, "dsh-any-background: theme watchdog");
+			const disposeThemeResets = watchThemeResets();
+			ctx.effect(() => () => {
+				disposeThemeResets();
+			}, "dsh-any-background: theme resets watch");
 			const onPageHide = () => flushSave();
 			window.addEventListener("pagehide", onPageHide);
 			ctx.effect(() => () => window.removeEventListener("pagehide", onPageHide), "dsh-any-background: pagehide flush");