dsh-any-background 0.2.9 → 0.3.0

package/lib/client.js

@@ -12,9 +12,15 @@ window.__ModuleLoader__.load({
 			try {
 				return require("@deepseek-ai/dsh-client-store");
 			} catch {}
-			return require("@deepseek-ai/dsh-client-runtime/client");
+			try {
+				return require("@deepseek-ai/dsh-client-runtime/client");
+			} catch {
+				console.warn("dsh-any-background: no client store module resolved on this host; the settings panel will be disabled");
+				return null;
+			}
 		}
-		const defineStore = resolveStore().defineStore;
+		/** null when neither store package resolves on this host (see resolveStore). */
+		const defineStore = resolveStore()?.defineStore ?? null;
 		//#endregion
 		//#region src/client/i18n.ts
 		const NS = "settings.anyBg";
@@ -46,8 +52,11 @@ window.__ModuleLoader__.load({
 			uiSop: "设置界面透明度",
 			uiChatRegion: "对话文本框",
 			uiTrajectory: "轨迹页",
-			uiPanelRegion: "better-sidebar 工作台",
+			uiPanelRegion: "bettersidebar",
+			uiPanelNative: "右方侧边栏",
+			guideDesc: "管理主题色、壁纸与界面透明度",
 			uiProduced: "产出物/高亮内容",
+			uiHeader: "顶栏选项",
 			fontPageTitle: "字体与描边",
 			fontTitle: "自定义字体",
 			fontHint: "支持 ttf/otf/woff/woff2 字体文件（上限 100MB），将应用到整个界面的文字；代码块的等宽字体保持不变。中文字体通常有几十 MB，首次上传与刷新加载需要片刻",
@@ -57,6 +66,9 @@ window.__ModuleLoader__.load({
 			fontEnabled: "启用字体",
 			fontNone: "未设置，使用宿主默认字体",
 			fontFail: "字体上传失败，请确认是有效的 ttf/otf/woff/woff2 文件",
+			uploadTooLarge: "文件过大，上限 {limit}",
+			bgUploadFail: "壁纸上传失败",
+			videoUploadFail: "视频上传失败，本次播放不会被保存",
 			strokeTitle: "文字描边",
 			strokeHint: "按区域为文字添加描边：粗细为 0 表示关闭，「自动」会生成与文字颜色相反的颜色，「主题色」跟随当前主题色。代码块与图标已自动豁免，多色语法不会糊成一团",
 			strokeWidth: "描边粗细",
@@ -232,8 +244,11 @@ window.__ModuleLoader__.load({
 			uiSop: "Settings interface opacity",
 			uiChatRegion: "Conversation text frame",
 			uiTrajectory: "Trajectory view",
-			uiPanelRegion: "better-sidebar workbench",
+			uiPanelRegion: "bettersidebar",
+			uiPanelNative: "Right sidebar",
+			guideDesc: "Theme color, wallpaper and interface opacity in the right sidebar",
 			uiProduced: "Produced / highlights",
+			uiHeader: "Header popovers",
 			fontPageTitle: "Font & outline",
 			fontTitle: "Custom font",
 			fontHint: "Accepts ttf/otf/woff/woff2 files (up to 100MB) and applies them to the whole interface; code blocks keep their monospace stack. CJK fonts routinely span tens of MB, so the first upload and each reload take a moment",
@@ -243,6 +258,9 @@ window.__ModuleLoader__.load({
 			fontEnabled: "Font enabled",
 			fontNone: "None — host default",
 			fontFail: "Upload failed — make sure it is a valid ttf/otf/woff/woff2 file",
+			uploadTooLarge: "File is too large (limit {limit})",
+			bgUploadFail: "Wallpaper upload failed",
+			videoUploadFail: "Video upload failed — this playback will not be saved",
 			strokeTitle: "Text outline",
 			strokeHint: "Outline text per region: width 0 turns it off, \"auto\" picks the inverse of the text color, and \"theme\" follows the current accent. Code blocks and icons are exempted automatically, so multi-color syntax never smears",
 			strokeWidth: "Outline width",
@@ -409,7 +427,8 @@ window.__ModuleLoader__.load({
 				trajectory: 30,
 				input: 30,
 				panel: 30,
-				produced: 30
+				produced: 30,
+				header: 30
 			},
 			strokes: {
 				bg: {
@@ -456,6 +475,11 @@ window.__ModuleLoader__.load({
 					width: 0,
 					color: "auto",
 					customColor: "#808080"
+				},
+				header: {
+					width: 0,
+					color: "auto",
+					customColor: "#808080"
 				}
 			},
 			settingsOpacity: .5,
@@ -486,6 +510,7 @@ window.__ModuleLoader__.load({
 			trajectoryOpacity: .5,
 			panelOpacity: .5,
 			producedOpacity: .5,
+			headerOpacity: .5,
 			profiles: [],
 			rotation: {
 				enabled: false,
@@ -625,7 +650,8 @@ window.__ModuleLoader__.load({
 				"trajectory",
 				"input",
 				"panel",
-				"produced"
+				"produced",
+				"header"
 			]) {
 				const v = b[k];
 				out[k] = typeof v === "number" ? Math.min(60, Math.max(0, v)) : DEFAULT_CONFIG.blurs[k];
@@ -641,7 +667,8 @@ window.__ModuleLoader__.load({
 			"trajectory",
 			"input",
 			"panel",
-			"produced"
+			"produced",
+			"header"
 		];
 		const STROKE_COLOR_KEYS = [
 			"auto",
@@ -690,6 +717,9 @@ window.__ModuleLoader__.load({
 		function rProducedOpacity() {
 			return clamp01(cfg.producedOpacity, DEFAULT_CONFIG.producedOpacity);
 		}
+		function rHeaderOpacity() {
+			return clamp01(cfg.headerOpacity, DEFAULT_CONFIG.headerOpacity);
+		}
 		function rBgState() {
 			return cfg.bgState;
 		}
@@ -753,7 +783,8 @@ window.__ModuleLoader__.load({
 				chatTextOpacity: rChatTextOpacity(),
 				trajectoryOpacity: rTrajectoryOpacity(),
 				panelOpacity: rPanelOpacity(),
-				producedOpacity: rProducedOpacity()
+				producedOpacity: rProducedOpacity(),
+				headerOpacity: rHeaderOpacity()
 			};
 		}
 		/** Apply an appearance snapshot onto cfg (meta fields untouched). */
@@ -775,6 +806,7 @@ window.__ModuleLoader__.load({
 			cfg.trajectoryOpacity = clamp01(ap.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity);
 			cfg.panelOpacity = clamp01(ap.panelOpacity, DEFAULT_CONFIG.panelOpacity);
 			cfg.producedOpacity = clamp01(ap.producedOpacity, DEFAULT_CONFIG.producedOpacity);
+			cfg.headerOpacity = clamp01(ap.headerOpacity, DEFAULT_CONFIG.headerOpacity);
 		}
 		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;
@@ -808,7 +840,8 @@ window.__ModuleLoader__.load({
 						chatTextOpacity: clamp01(ac.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity),
 						trajectoryOpacity: clamp01(ac.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity),
 						panelOpacity: clamp01(ac.panelOpacity, DEFAULT_CONFIG.panelOpacity),
-						producedOpacity: clamp01(ac.producedOpacity, DEFAULT_CONFIG.producedOpacity)
+						producedOpacity: clamp01(ac.producedOpacity, DEFAULT_CONFIG.producedOpacity),
+						headerOpacity: clamp01(ac.headerOpacity, DEFAULT_CONFIG.headerOpacity)
 					}
 				});
 			}
@@ -873,7 +906,8 @@ window.__ModuleLoader__.load({
 				"trajectory",
 				"input",
 				"panel",
-				"produced"
+				"produced",
+				"header"
 			]) blurs[k] = num(bl[k], DEFAULT_CONFIG.blurs[k]);
 			const bgType = [
 				"video",
@@ -916,6 +950,7 @@ window.__ModuleLoader__.load({
 				trajectoryOpacity: clamp01(c.trajectoryOpacity, DEFAULT_CONFIG.trajectoryOpacity),
 				panelOpacity: clamp01(c.panelOpacity, DEFAULT_CONFIG.panelOpacity),
 				producedOpacity: clamp01(c.producedOpacity, DEFAULT_CONFIG.producedOpacity),
+				headerOpacity: clamp01(c.headerOpacity, DEFAULT_CONFIG.headerOpacity),
 				profiles: adoptProfiles(c.profiles),
 				rotation: adoptRotation(c.rotation),
 				schedule: adoptSchedule(c.schedule),
@@ -959,6 +994,95 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
+		//#region src/client/host.ts
+		/**
+		* Host release detection + feature classification.
+		*
+		* WHY THIS EXISTS
+		* The client context exposes no host version: there is no `hostVersion` /
+		* `dshVersion` field on `ctx`, and `window.__DSH_BOOT__.version` is the
+		* module-table format tag (`'client'`), not a release. Capability probing alone
+		* is also not sufficient, because the obvious probes do not separate the
+		* generations — `ctx.sidebarRightTabs` and the native `[data-sidebar-right-panel]`
+		* marker both exist on 0.1.5-rc.2 already, so using either as a "0.1.6+" test
+		* mis-classifies 0.1.5 as newer.
+		*
+		* So the release is resolved on the Node half (where the launcher's on-disk
+		* layout is visible) and handed to this half through the `read` RPC payload.
+		* This module stores that verdict and turns it into the feature flags the rest
+		* of the plugin gates on. When the release cannot be determined the flags fall
+		* back to capability probing, never to a guess.
+		*
+		* @module
+		*/
+		let current = {
+			version: null,
+			generation: "unknown"
+		};
+		/** False until the server verdict lands; feature gates must not treat "not
+		*  asked yet" as "old host". */
+		let resolved = false;
+		const subs$1 = /* @__PURE__ */ new Set();
+		/** Adopt the verdict delivered by the server's `read` payload. */
+		function adoptHostInfo(raw) {
+			if (raw === null || typeof raw !== "object") return;
+			const h = raw;
+			const version = typeof h.version === "string" && h.version.trim() !== "" ? h.version.trim() : null;
+			const generation = h.generation === "0.1.5" || h.generation === "0.1.6" || h.generation === "0.1.7" ? h.generation : "unknown";
+			const changed = !resolved || current.version !== version || current.generation !== generation;
+			current = {
+				version,
+				generation
+			};
+			resolved = true;
+			if (changed) subs$1.forEach((cb) => cb());
+		}
+		/** Subscribe to a verdict landing (or changing). */
+		function subscribeHostInfo(cb) {
+			subs$1.add(cb);
+			return () => {
+				subs$1.delete(cb);
+			};
+		}
+		/** Ordered generation rank, for "at least this generation" tests. `unknown`
+		*  has no rank and must be handled by the caller's fallback. */
+		const RANK = {
+			"0.1.5": 5,
+			"0.1.6": 6,
+			"0.1.7": 7
+		};
+		/**
+		* Whether the host is at least `gen`. An unknown generation answers `false`:
+		* callers treat that as "do not assume the newer behaviour" and use whatever
+		* capability probe they own, which is the safe direction for every gate here.
+		*/
+		function hostAtLeast(gen) {
+			const rank = RANK[current.generation];
+			return rank !== void 0 && rank >= RANK[gen];
+		}
+		/**
+		* Whether this host's own right Sidebar already carries the appearance page,
+		* which makes the plugin's dsh-better-sidebar page a duplicate entry on the same
+		* guide surface.
+		*
+		* `true`  — 0.1.6 or newer: the better-sidebar page stands down.
+		* `false` — 0.1.5 or an undetermined-but-answered generation: keep it.
+		* `null`  — the verdict has not landed yet (the probe is a Node round-trip).
+		*
+		* Callers must treat `null` as "not yet known": register nothing eagerly on a
+		* `true`, and arm a withdrawal for a later `true` rather than blocking on it.
+		*
+		* NOTE: 0.1.5-rc.2 ALSO ships the native right Sidebar (verified: the
+		* `ui-sidebar-right` entry is in that release's `dsh-web-app/cordis.patch.yml`),
+		* so this gate deliberately keys off the release rather than off the presence of
+		* the native sidebar service — the two are not the same fact.
+		*/
+		function suppressesBetterSidebar() {
+			if (!resolved) return null;
+			if (current.generation === "unknown") return false;
+			return hostAtLeast("0.1.6");
+		}
+		//#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). */
@@ -1023,6 +1147,7 @@ window.__ModuleLoader__.load({
 			const data = await rpcCall("read", {});
 			if (data && typeof data === "object") {
 				const d = data;
+				adoptHostInfo(d.host);
 				if (d.config) adoptConfig(d.config);
 				if (typeof d.wallpaperUrl === "string") setWpImageUrl(d.wallpaperUrl);
 				else if (d.wallpaperUrl === null) setWpImageUrl(null);
@@ -1117,36 +1242,73 @@ window.__ModuleLoader__.load({
 				error: v?.error ?? "failed"
 			};
 		}
+		/** Map a refused upload response onto an outcome. The body has to be read: the
+		*  node half names the reason there, and an oversized transfer answers
+		*  `413 { ok:false, error:'too large', limit:'100 MB' }`. Checking `res.ok`
+		*  alone threw that away, so an oversized upload surfaced as a bare failure —
+		*  or, on the wallpaper path, as nothing at all. */
+		async function refusedUpload(res) {
+			const body = await res.json().catch(() => null);
+			if (body?.error === "too large") return {
+				ok: false,
+				refusal: {
+					kind: "too-large",
+					status: res.status,
+					limit: typeof body.limit === "string" ? body.limit : void 0
+				}
+			};
+			return {
+				ok: false,
+				refusal: {
+					kind: "http",
+					status: res.status
+				}
+			};
+		}
+		/** Localized description of a refusal for the panel's toast. `fallbackKey` is
+		*  the caller's own "…upload failed" string, used for anything that is not a
+		*  size refusal. */
+		function uploadRefusalText(o, t, fallbackKey) {
+			if (o.refusal?.kind === "too-large") {
+				const limit = o.refusal.limit ?? "";
+				return t("uploadTooLarge").split("{limit}").join(limit);
+			}
+			if (o.refusal !== void 0) return `${t(fallbackKey)} (http ${o.refusal.status})`;
+			return t(fallbackKey);
+		}
 		/** 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, {
+				const res = await fetch(VIDEO_UPLOAD_URL, {
 					method: "POST",
 					headers: { "Content-Type": mime || "application/octet-stream" },
 					body: blob
-				})).ok;
+				});
+				return res.ok ? { ok: true } : await refusedUpload(res);
 			} catch (e) {
 				console.warn("dsh-any-background: video upload failed", e);
-				return false;
+				return { ok: false };
 			}
 		}
 		/** Upload a wallpaper's raw bytes over HTTP — same streaming model as videos,
 		*  original pixels preserved, zero base64 round-trips. */
 		async function uploadWallpaper(blob) {
 			try {
-				return (await fetch(WALLPAPER_UPLOAD_URL, {
+				const res = await fetch(WALLPAPER_UPLOAD_URL, {
 					method: "POST",
 					headers: { "Content-Type": blob.type || "image/jpeg" },
 					body: blob
-				})).ok;
+				});
+				return res.ok ? { ok: true } : await refusedUpload(res);
 			} catch (e) {
 				console.warn("dsh-any-background: wallpaper upload failed", e);
-				return false;
+				return { ok: false };
 			}
 		}
 		/** Upload a custom font's raw bytes over HTTP; resolves the sniffed MIME on
-		*  success (the server validates the container from magic bytes) or null. */
+		*  success, or a refusal the caller can report (an oversized font used to be
+		*  indistinguishable from a corrupt one). */
 		async function uploadFont(blob) {
 			try {
 				const res = await fetch(FONT_UPLOAD_URL, {
@@ -1154,12 +1316,15 @@ window.__ModuleLoader__.load({
 					headers: { "Content-Type": blob.type || "application/octet-stream" },
 					body: blob
 				});
-				if (!res.ok) return null;
+				if (!res.ok) return await refusedUpload(res);
 				const data = await res.json().catch(() => null);
-				return typeof data?.mime === "string" ? data.mime : "font/ttf";
+				return {
+					ok: true,
+					mime: typeof data?.mime === "string" ? data.mime : "font/ttf"
+				};
 			} catch (e) {
 				console.warn("dsh-any-background: font upload failed", e);
-				return null;
+				return { ok: false };
 			}
 		}
 		/** Remove the stored custom font (server deletes every variant + clears the
@@ -1340,6 +1505,12 @@ window.__ModuleLoader__.load({
 				v
 			];
 		}
+		/** Format an RGB triple as a lowercase hex string. Channels are rounded: some
+		*  callers feed float channels and a fractional byte would produce invalid
+		*  hex. */
+		function rgbToHex(rgb) {
+			return "#" + rgb.map((v) => Math.round(v).toString(16).padStart(2, "0")).join("");
+		}
 		let tokensCacheKey = "";
 		let tokensCache = null;
 		/**
@@ -2483,9 +2654,15 @@ window.__ModuleLoader__.load({
 			wpController = null;
 		}
 		/** Register a callback fired once a generated snapshot is ready (so the caller
-		*  can re-sync the settings preview / store). */
+		*  can re-sync the settings preview / store). Returns an unsubscribe: HMR
+		*  re-runs apply and would otherwise leave the previous apply's closure as the
+		*  live listener (a stale this-session callback invoked by a lingering
+		*  controller). */
 		function onGeneratedSnapshot(cb) {
 			snapshotListener = cb;
+			return () => {
+				if (snapshotListener === cb) snapshotListener = null;
+			};
 		}
 		function ensureTokenStyle() {
 			if (tokenStyleEl?.isConnected) return tokenStyleEl;
@@ -2647,6 +2824,7 @@ window.__ModuleLoader__.load({
 					lastBgKey = bgKey;
 					applyPartOpacities(ops);
 				}
+				applyExemptDefaults();
 			} catch {}
 		}
 		const SETTINGS_PANEL_SEL = "[role=\"dialog\"][aria-modal=\"true\"][aria-labelledby]";
@@ -2665,17 +2843,98 @@ window.__ModuleLoader__.load({
 			if (px > 0) document.documentElement.style.setProperty("--dsh-any-part-blur-global", `blur(${px}px)`);
 			else document.documentElement.style.removeProperty("--dsh-any-part-blur-global");
 		}
-		const PANEL_TOKEN_RULE = "[data-dsh-bottom-panel],[data-sidebar-right-panel]{--dsw-alias-bg-base:var(--dsh-any-panel-bg-base);--dsw-alias-bg-layer-1:var(--dsh-any-panel-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-panel-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-panel-layer-3);position:fixed!important;z-index:26!important}[data-sidebar-right-panel][data-sidebar-right-panel=\"fullscreen\"]{z-index:40!important}";
-		const PANEL_BLUR_RULE = "[data-dsh-bottom-panel],[data-sidebar-right-panel]{-webkit-backdrop-filter:var(--dsh-any-blur-panel,none);backdrop-filter:var(--dsh-any-blur-panel,none)}";
-		const PRODUCED_RULE = "[data-code-block-content] pre,[data-code-block-banner],[data-composer-chip],:not(pre)>code{-webkit-backdrop-filter:var(--dsh-any-blur-prod,none);backdrop-filter:var(--dsh-any-blur-prod,none)}@supports (background:color-mix(in srgb,red 50%,transparent)){.md-code-block{background:transparent!important}.md-code-block>div{background-color:transparent!important}.md-code-block [data-code-block-content] pre{background-color:color-mix(in srgb,var(--dsl-code-block-background,var(--dsw-alias-markdown-code-block,transparent)) var(--dsh-any-prod-pct,100%),transparent)!important}.md-code-block [data-code-block-banner]{background-color:color-mix(in srgb,var(--dsl-code-block-banner-background-color,var(--dsw-alias-markdown-code-block-banner,transparent)) var(--dsh-any-prod-pct,100%),transparent)!important}[data-code-block-content]{--shiki-background:color-mix(in srgb,var(--dsw-alias-markdown-code-block,var(--dsl-code-block-background,transparent)) var(--dsh-any-prod-pct,100%),transparent)}:not(pre)>code{background-color:color-mix(in srgb,var(--dsw-alias-markdown-inline-code,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}[data-composer-chip]>*{background-color:color-mix(in srgb,var(--dsw-alias-interactive-bg-hover,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}}";
+		const PANEL_TOKEN_RULE = "[data-dsh-bottom-panel],[data-sidebar-right-panel]{--dsw-alias-bg-base:var(--dsh-any-panel-bg-base);--dsw-alias-bg-layer-1:var(--dsh-any-panel-layer-1);--dsw-alias-bg-layer-2:var(--dsh-any-panel-layer-2);--dsw-alias-bg-layer-3:var(--dsh-any-panel-layer-3)}";
+		const NO_DOCKKIT = ":not(:has([data-dockkit-host],[data-dockkit-empty]))";
+		const PANEL_BLUR_RULE = `[data-sidebar-right-panel] [data-dockkit-host="dock"],[data-sidebar-right-panel] [data-dockkit-empty]{-webkit-backdrop-filter:var(--dsh-any-blur-panel,none);backdrop-filter:var(--dsh-any-blur-panel,none)}[data-sidebar-right-panel]${NO_DOCKKIT}{-webkit-backdrop-filter:var(--dsh-any-blur-panel,none);backdrop-filter:var(--dsh-any-blur-panel,none)}[data-dsh-bottom-panel]{-webkit-backdrop-filter:var(--dsh-any-blur-panel,none);backdrop-filter:var(--dsh-any-blur-panel,none)}`;
+		const PANEL_PROMOTION_RULE = `[data-sidebar-right-panel]${NO_DOCKKIT}{position:fixed!important;z-index:26!important}[data-sidebar-right-panel="fullscreen"]${NO_DOCKKIT}{z-index:40!important}`;
+		const HEADER_POPOVER_RULE = "[data-dsh-any-header-popover][role],ul[class*=\"_menu\"],div[role=\"dialog\"][class*=\"_panel\"]:not([aria-modal=\"true\"]),[role=\"menu\"][class*=\"_denseList\"]:not([class*=\"_portal\"]),[role=\"tree\"][class*=\"_menu\"]{-webkit-backdrop-filter:var(--dsh-any-blur-header,none);backdrop-filter:var(--dsh-any-blur-header,none)}";
+		const EXEMPT_DEFAULT_RULE = "[role=\"dialog\"][aria-modal=\"true\"]:not([aria-labelledby]){backdrop-filter:none;-webkit-backdrop-filter:none}[role=\"menu\"]:has([class*=\"_danger\"]){backdrop-filter:none;-webkit-backdrop-filter:none;-webkit-text-stroke-width:0}";
+		/** Selector the dynamic header token rule targets — kept in sync with the
+		*  static HEADER_POPOVER_RULE selector list (specificity equal or higher than
+		*  the card group's `[role="menu"]:not(...)` so it wins). */
+		const HEADER_TOKEN_SELECTOR = "[data-dsh-any-header-popover][role],ul[class*=\"_menu\"],div[role=\"dialog\"][class*=\"_panel\"]:not([aria-modal=\"true\"]),[role=\"menu\"][class*=\"_denseList\"]:not([class*=\"_portal\"]),[role=\"tree\"][class*=\"_menu\"]";
+		/** Header-popover surfaces: retint the menu token and (re)write the blur.
+		*  Mirrors applyProduced: the static rule above never changes, so a drag only
+		*  rewrites the blur variable and this one dynamic rule. */
+		function applyHeaderPopovers() {
+			const root = document.documentElement;
+			const px = rBlurs().header;
+			if (px > 0) root.style.setProperty("--dsh-any-blur-header", `blur(${px}px)`);
+			else root.style.removeProperty("--dsh-any-blur-header");
+			let opacity = rHeaderOpacity();
+			if (opacity < 0) opacity = 0;
+			if (opacity > 1) opacity = 1;
+			const menu = (paletteTokens() ?? readHostOpacityTokens())?.["--dsw-specific-menu"];
+			const el = ensureHeaderStyle();
+			const css = menu === void 0 ? "" : `${HEADER_TOKEN_SELECTOR}{--dsw-specific-menu:${toRgba(menu, opacity)}}`;
+			if (el.textContent !== css) el.textContent = css;
+		}
+		let headerStyleEl = null;
+		function ensureHeaderStyle() {
+			if (headerStyleEl?.isConnected) return headerStyleEl;
+			headerStyleEl = document.createElement("style");
+			headerStyleEl.dataset.plugin = "dsh-any-background-header";
+			document.head.appendChild(headerStyleEl);
+			return headerStyleEl;
+		}
+		/** Pin the exempt groups (confirm dialogs and the session-row menu) so no
+		*  appearance slider moves them — while KEEPING the active theme color.
+		*
+		*  "Default" here means "not faded, not blurred", NOT "host-palette original":
+		*  an earlier version restored the :root host colors, which also stripped the
+		*  picked theme color and made the menu look un-themed. The correct source is
+		*  the same one every other slider uses (the plugin palette when there is one,
+		*  else the host's resolved tokens) with alpha pinned to 1 — so the surface
+		*  keeps whatever color the theme currently dictates and only loses the slider's
+		*  translucency and blur.
+		*
+		*  Emitted as REAL literals into a dedicated stylesheet, never as
+		*  `var(--x, var(--x))`: a self-referencing fallback is a CSS cycle that
+		*  computes to the guaranteed-invalid value and turns every consuming
+		*  `background:var(--dsw-alias-bg-layer-2)` fully transparent. Literals also
+		*  mean that when no color can be resolved we emit NO declaration at all, so
+		*  the surface keeps the re-scoped value rather than going transparent. */
+		function applyExemptDefaults() {
+			if (typeof document === "undefined") return;
+			const source = paletteTokens() ?? readHostOpacityTokens();
+			const el = ensureExemptStyle();
+			const decls = [];
+			const add = (token, value) => {
+				if (value === void 0 || value === "") return;
+				decls.push(`${token}:${toRgba(value, 1)}`);
+			};
+			add("--dsw-alias-bg-layer-1", source?.["--dsw-alias-bg-layer-1"]);
+			add("--dsw-alias-bg-layer-2", source?.["--dsw-alias-bg-layer-2"]);
+			add("--dsw-alias-bg-layer-3", source?.["--dsw-alias-bg-layer-3"]);
+			add("--dsw-specific-menu", source?.["--dsw-specific-menu"]);
+			if (decls.length === 0) {
+				if (el.textContent !== "") el.textContent = "";
+				return;
+			}
+			const dialog = "[role=\"dialog\"][aria-modal=\"true\"]:not([aria-labelledby])";
+			const body = decls.join(";");
+			const css = `${dialog},${dialog} *{${body}}[role="menu"]:has([class*="_danger"]){${body}}`;
+			if (el.textContent !== css) el.textContent = css;
+		}
+		let exemptStyleEl = null;
+		function ensureExemptStyle() {
+			if (exemptStyleEl?.isConnected) return exemptStyleEl;
+			exemptStyleEl = document.createElement("style");
+			exemptStyleEl.dataset.plugin = "dsh-any-background-exempt";
+			document.head.appendChild(exemptStyleEl);
+			return exemptStyleEl;
+		}
+		const PRODUCED_RULE = "[data-code-block-content] pre,[data-code-block-banner],[data-composer-chip],[data-changed-files]>button:first-child,[data-terminal],[data-read],[data-context-injection-body],[data-search],[data-web],[class*=\"_ioCard\"]{-webkit-backdrop-filter:var(--dsh-any-blur-prod,none);backdrop-filter:var(--dsh-any-blur-prod,none)}@supports (background:color-mix(in srgb,red 50%,transparent)){.md-code-block{background:transparent!important}.md-code-block>div{background-color:transparent!important}.md-code-block [data-code-block-content] pre{background-color:color-mix(in srgb,var(--dsl-code-block-background,var(--dsw-alias-markdown-code-block,transparent)) var(--dsh-any-prod-pct,100%),transparent)!important}.md-code-block [data-code-block-banner]{background-color:color-mix(in srgb,var(--dsl-code-block-banner-background-color,var(--dsw-alias-markdown-code-block-banner,transparent)) var(--dsh-any-prod-pct,100%),transparent)!important}[data-code-block-content]{--shiki-background:color-mix(in srgb,var(--dsw-alias-markdown-code-block,var(--dsl-code-block-background,transparent)) var(--dsh-any-prod-pct,100%),transparent)}:not(pre)>code{background-color:color-mix(in srgb,var(--dsw-alias-markdown-inline-code,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}[data-composer-chip]>*{background-color:color-mix(in srgb,var(--dsw-alias-interactive-bg-hover,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}[data-terminal]{background-color:color-mix(in srgb,var(--dsw-alias-markdown-code-block,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}[data-terminal] button{background-color:transparent!important}[data-read]{background-color:color-mix(in srgb,var(--dsw-alias-markdown-code-block,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}[data-read]>div:first-child{background-color:color-mix(in srgb,var(--dsw-alias-markdown-code-block-banner,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}[data-context-injection-body]{background-color:color-mix(in srgb,var(--dsw-alias-markdown-code-block,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}[data-search]{background-color:color-mix(in srgb,var(--dsw-alias-markdown-code-block,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}[data-web]{background-color:color-mix(in srgb,var(--dsw-alias-markdown-code-block,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}[class*=\"_ioCard\"]{background-color:color-mix(in srgb,var(--dsw-alias-markdown-code-block,transparent) var(--dsh-any-prod-pct,100%),transparent)!important}}";
 		const STROKE_RULE = [
 			`${SETTINGS_PANEL_SEL}{-webkit-text-stroke:var(--dsh-any-stroke-settings-w,0px) var(--dsh-any-stroke-settings-c,transparent);paint-order:stroke fill}`,
 			"[role=\"menu\"]:not([data-dockkit-tab-menu]),[role=\"listbox\"],body>[role=\"tree\"],body>[role=\"dialog\"]:not([aria-modal=\"true\"]){-webkit-text-stroke:var(--dsh-any-stroke-card-w,0px) var(--dsh-any-stroke-card-c,transparent);paint-order:stroke fill}",
 			"[data-composer-card],[data-cordis-panel],[data-composer-card] textarea,[data-composer-card] input,[data-composer-card] [contenteditable],[data-cordis-panel] input,[data-cordis-panel] textarea{-webkit-text-stroke:var(--dsh-any-stroke-input-w,0px) var(--dsh-any-stroke-input-c,transparent);paint-order:stroke fill}",
 			`[data-chat-flow]{-webkit-text-stroke:var(--dsh-any-stroke-chat-w,0px) var(--dsh-any-stroke-chat-c,transparent);paint-order:stroke fill}`,
 			`[data-conversation-composer-overlay]{-webkit-text-stroke:var(--dsh-any-stroke-trajectory-w,0px) var(--dsh-any-stroke-trajectory-c,transparent);paint-order:stroke fill}`,
-			"[data-code-block-content] pre,[data-code-block-content],[data-code-block-banner],[data-composer-chip],:not(pre)>code{-webkit-text-stroke:var(--dsh-any-stroke-produced-w,0px) var(--dsh-any-stroke-produced-c,transparent);paint-order:stroke fill}",
+			"[data-code-block-content] pre,[data-code-block-content],[data-code-block-banner],[data-composer-chip],:not(pre)>code,[data-changed-files],[data-terminal],[data-read],[data-context-injection-body],[data-search],[data-web],[class*=\"_ioCard\"]{-webkit-text-stroke:var(--dsh-any-stroke-produced-w,0px) var(--dsh-any-stroke-produced-c,transparent);paint-order:stroke fill}",
 			`[data-dsh-bottom-panel],[data-sidebar-right-panel]{-webkit-text-stroke:var(--dsh-any-stroke-panel-w,0px) var(--dsh-any-stroke-panel-c,transparent);paint-order:stroke fill}`,
+			"[data-dsh-any-header-popover],ul[class*=\"_menu\"],div[role=\"dialog\"][class*=\"_panel\"]:not([aria-modal=\"true\"]),[role=\"menu\"][class*=\"_denseList\"]:not([class*=\"_portal\"]),[role=\"tree\"][class*=\"_menu\"]{-webkit-text-stroke:var(--dsh-any-stroke-header-w,0px) var(--dsh-any-stroke-header-c,transparent);paint-order:stroke fill}",
+			"[data-chat-flow] [role=\"status\"],[data-chat-flow] [data-turn-process],[data-chat-flow] [data-text-shimmer],[data-chat-flow] [style*=\"--dsh-text-shimmer-spread\"]{-webkit-text-stroke-width:0!important;paint-order:normal!important}",
 			`svg{-webkit-text-stroke-width:0!important;paint-order:normal!important}`,
 			`::placeholder{-webkit-text-stroke-width:0!important}`
 		].join("");
@@ -2689,7 +2948,8 @@ window.__ModuleLoader__.load({
 			"trajectory",
 			"input",
 			"panel",
-			"produced"
+			"produced",
+			"header"
 		];
 		/** Resolve one group's stroke color key into a concrete CSS color.
 		*  'auto' contrasts the FONT direction (white fonts → black stroke and vice
@@ -2724,6 +2984,18 @@ window.__ModuleLoader__.load({
 		}
 		/** Write every group's stroke width/color variables + the two column strokes.
 		*  Called from applyWp so palette/verdict changes re-derive 'auto'/'theme'. */
+		/** Write (or clear) one column's inline text stroke. The stroke rides inline
+		*  styles and is fully removed at width 0 so nothing lingers after the slider
+		*  resets. */
+		function applyInlineStroke(el, s) {
+			if (s.width > 0) {
+				el.style.setProperty("-webkit-text-stroke", `${s.width}px ${strokeColor(s)}`);
+				el.style.setProperty("paint-order", "stroke fill");
+			} else {
+				el.style.removeProperty("-webkit-text-stroke");
+				el.style.removeProperty("paint-order");
+			}
+		}
 		function applyStrokes() {
 			const strokes = rStrokes();
 			const root = document.documentElement;
@@ -2735,15 +3007,7 @@ window.__ModuleLoader__.load({
 			discoverParts();
 			for (const g of STROKE_INLINE_GROUPS) {
 				const el = g === "bg" ? centerEl : sidebarEl;
-				if (el === null) continue;
-				const s = strokes[g];
-				if (s.width > 0) {
-					el.style.setProperty("-webkit-text-stroke", `${s.width}px ${strokeColor(s)}`);
-					el.style.setProperty("paint-order", "stroke fill");
-				} else {
-					el.style.removeProperty("-webkit-text-stroke");
-					el.style.removeProperty("paint-order");
-				}
+				if (el !== null) applyInlineStroke(el, strokes[g]);
 			}
 		}
 		/** Live per-group stroke update during slider drag (no full re-apply). */
@@ -2756,13 +3020,7 @@ window.__ModuleLoader__.load({
 			discoverParts();
 			const el = part === "bg" ? centerEl : sidebarEl;
 			if (el === null) return;
-			if (s.width > 0) {
-				el.style.setProperty("-webkit-text-stroke", `${s.width}px ${strokeColor(s)}`);
-				el.style.setProperty("paint-order", "stroke fill");
-			} else {
-				el.style.removeProperty("-webkit-text-stroke");
-				el.style.removeProperty("paint-order");
-			}
+			applyInlineStroke(el, s);
 		}
 		/** Teardown only: drop every stroke variable and column inline stroke. */
 		function removeStrokes() {
@@ -2867,27 +3125,35 @@ window.__ModuleLoader__.load({
 			if (px > 0) document.documentElement.style.setProperty("--dsh-any-blur-panel", `blur(${px}px)`);
 			else document.documentElement.style.removeProperty("--dsh-any-blur-panel");
 		}
-		function applySettingsOverrides(op) {
+		/** Re-scope one surface group's layer tokens onto plugin-owned variables so a
+		*  dedicated slider owns its alpha (the host has no per-surface opacity). The
+		*  settings group additionally retints its dialog surface variable. Always
+		*  written explicitly — including at 100% — so removing a slider's effect means
+		*  writing 1, not deleting the variable (the style rules below have no fallback
+		*  and would otherwise resolve the body tokens that applyCustomTokens rewrote
+		*  with the homepage card alpha). */
+		function applyLayerOverrides(prefix, op, surface) {
 			const [h, s, l] = rColor();
 			const tokens = genTokens(h, s, l, rColorScheme()).tokens;
-			const layer1 = tokens["--dsw-alias-bg-layer-1"];
-			const layer2 = tokens["--dsw-alias-bg-layer-2"];
-			const layer3 = tokens["--dsw-alias-bg-layer-3"];
-			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));
+			if (surface) {
+				const surfaceColor = tokens["--dsw-alias-bg-layer-2"];
+				if (surfaceColor !== void 0) document.documentElement.style.setProperty(`${prefix}-surface`, toRgba(surfaceColor, op));
+			}
+			for (const layer of [
+				1,
+				2,
+				3
+			]) {
+				const c = tokens[`--dsw-alias-bg-layer-${layer}`];
+				if (c !== void 0) document.documentElement.style.setProperty(`${prefix}-layer-${layer}`, toRgba(c, op));
+			}
+		}
+		function applySettingsOverrides(op) {
+			applyLayerOverrides("--dsh-any-bg-settings", op, true);
 		}
 		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, rColorScheme()).tokens;
-			const layer1 = tokens["--dsw-alias-bg-layer-1"];
-			const layer2 = tokens["--dsw-alias-bg-layer-2"];
-			const layer3 = tokens["--dsw-alias-bg-layer-3"];
-			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));
+			applyLayerOverrides("--dsh-any-traj", op, false);
 		}
 		/** Register a callback fired when a wallpaper-extracted theme color is
 		*  adopted by the auto-adaptation path, so the section can re-register the
@@ -2896,6 +3162,9 @@ window.__ModuleLoader__.load({
 		let colorAdoptedListener = null;
 		function onColorAdopted(cb) {
 			colorAdoptedListener = cb;
+			return () => {
+				if (colorAdoptedListener === cb) colorAdoptedListener = null;
+			};
 		}
 		/** Apply the theme color: use the saved pick directly, or fall back to
 		*  extracting a dominant color from the current wallpaper. */
@@ -2911,8 +3180,8 @@ window.__ModuleLoader__.load({
 					if (hsl && rWp() === url) {
 						cfg.color = hsl;
 						colorAdoptedListener?.(hsl);
+						applyWp();
 					}
-					applyWp();
 				});
 			} else applyWp();
 		}
@@ -2944,7 +3213,7 @@ window.__ModuleLoader__.load({
 		*  preserving the user's scale/intensity/speed/density/preset choices. */
 		function regenerateGeneratedBg() {
 			const params = cfg.generatedBg;
-			if (!params || cfg.backgroundType === "image") return;
+			if (!params || cfg.backgroundType === "image" || cfg.backgroundType === "video") return;
 			cfg.generatedBg = {
 				...params,
 				seed: randomSeed()
@@ -2967,9 +3236,10 @@ window.__ModuleLoader__.load({
 				wpEl.appendChild(wpController.canvas);
 			}
 			requestAnimationFrame(() => {
-				if (!wpController) return;
 				const controller = wpController;
+				if (controller === null) return;
 				const frame = controller.snapshot();
+				if (wpController !== controller) return;
 				setWpUrl(frame);
 				applyWp();
 				snapshotListener?.();
@@ -2996,35 +3266,36 @@ window.__ModuleLoader__.load({
 			partBlurStyleEl.textContent = PART_BLUR_RULE;
 			document.head.appendChild(partBlurStyleEl);
 		}
-		/** Find one direct child of `frame` whose `[data-rightbar-col]` marker matches.
-		*  The rightbar is its own grid track, NOT a "details" twin of the center
-		*  column, so it must never receive the main-bg tint or blur underlay. */
-		function findRightbarInFrame(frame) {
-			for (let i = 0; i < frame.children.length; i++) {
-				const child = frame.children[i];
-				if (child instanceof HTMLElement && child.dataset.rightbarCol !== void 0) return child;
-			}
-			return null;
-		}
 		function discoverParts() {
 			const overlay = document.querySelector("[data-shell-overlay]");
 			if (overlay === null) return;
 			const frame = overlay.parentElement;
 			if (frame === null) return;
 			frameEl = frame;
-			rightEl = findRightbarInFrame(frame);
-			const idx = Array.from(frame.children).indexOf(overlay);
-			if (rightEl !== null) {
-				const rightIdx = Array.from(frame.children).indexOf(rightEl);
-				sidebarEl = frame.children[rightIdx - 2] ?? null;
-				centerEl = frame.children[rightIdx - 1] ?? null;
+			let overlayIdx = -1;
+			let rightIdx = -1;
+			let right = null;
+			const children = frame.children;
+			for (let i = 0; i < children.length; i++) {
+				const child = children[i];
+				if (child === overlay) overlayIdx = i;
+				else if (child instanceof HTMLElement && child.dataset.rightbarCol !== void 0) {
+					right = child;
+					rightIdx = i;
+				}
+			}
+			rightEl = right;
+			if (right !== null) {
+				sidebarEl = children[rightIdx - 2] ?? null;
+				centerEl = children[rightIdx - 1] ?? null;
 			} else {
-				sidebarEl = frame.children[idx - 3] ?? null;
-				centerEl = frame.children[idx - 2] ?? null;
+				sidebarEl = children[overlayIdx - 3] ?? null;
+				centerEl = children[overlayIdx - 2] ?? null;
 			}
 		}
 		function setBlur(el, px) {
 			if (el === null) return;
+			if (px === 0 && !el.classList.contains(PART_BLUR_CLASS) && el.getAttribute("data-dab-pos-patched") !== "1") return;
 			const underlay = el.querySelector(`:scope > .${PART_UNDERLAY_CLASS}`);
 			if (px > 0) {
 				ensurePartBlurStyle();
@@ -3092,6 +3363,7 @@ window.__ModuleLoader__.load({
 			applyInputBlur(blurs.input);
 			applyPanelBlur(blurs.panel);
 			applyProduced();
+			applyHeaderPopovers();
 			applyViewCards();
 		}
 		/** Produced/artifact surfaces (conversation code blocks + their banner +
@@ -3132,6 +3404,10 @@ window.__ModuleLoader__.load({
 				applyProduced();
 				return;
 			}
+			if (part === "header") {
+				applyHeaderPopovers();
+				return;
+			}
 			if (part === "chat" || part === "trajectory") {
 				applyViewCards();
 				return;
@@ -3158,6 +3434,34 @@ window.__ModuleLoader__.load({
 			plain: true
 		}];
 		const viewTargets = VIEW_CARDS.map(() => null);
+		/** View specs whose real host marker has been seen at least once. Until a
+		*  marker is seen, its absence is ambiguous — "that view is not mounted" or
+		*  "this build has no such marker, keep running the generic fallback" — and the
+		*  pass has to keep probing. Once seen, absence can only mean the former, so the
+		*  pass may be skipped.
+		*
+		*  This matters because the two specs are two different MAIN VIEWS and only one
+		*  of them is mounted at a time (the host renders the main slot for the active
+		*  panel id, keyed by `entryKey` — see AppFrame's MainPanel). So "every surface
+		*  present" is never true during a normal session, and an all-or-nothing gate on
+		*  it silently never engages: that is exactly how the previous version of this
+		*  observer ended up running the full pass on every animation frame while
+		*  tokens streamed. */
+		const markerSeen = /* @__PURE__ */ new Set();
+		/** Resolve just the stable host markers for the view specs — one querySelector
+		*  each, no fallback heuristics. Cheap enough to run on every coalesced burst,
+		*  and enough to notice a view mounting/unmounting. */
+		function probeViewMarkers() {
+			const center = centerEl;
+			if (center === null || !document.body.contains(center)) return VIEW_CARDS.map(() => null);
+			return VIEW_CARDS.map((spec) => center.querySelector(spec.sel));
+		}
+		/** Whether the pass must run regardless of the value/identity signature. */
+		function needsPartsPass(markers) {
+			if (!columnsPresent()) return true;
+			if (markers.some((el, i) => el !== null && el !== viewTargets[i])) return true;
+			return VIEW_CARDS.some((spec, i) => spec.fallback === true && markers[i] === null && !markerSeen.has(i));
+		}
 		function isScrollableY(el) {
 			const oy = getComputedStyle(el).overflowY;
 			return oy === "auto" || oy === "scroll" || oy === "overlay";
@@ -3202,6 +3506,7 @@ window.__ModuleLoader__.load({
 			const marked = centerEl.querySelector(spec.sel);
 			const cached = viewTargets[idx];
 			if (marked !== null) {
+				markerSeen.add(idx);
 				if (cached !== null && cached !== marked) {
 					setBlur(cached, 0);
 					restoreCardHost(cached, spec.mark, spec.prev, spec.plain === true);
@@ -3337,15 +3642,48 @@ window.__ModuleLoader__.load({
 			syncTableFix();
 		}
 		let partsObserver = null;
+		let partsApplyRaf = 0;
+		/** Signature of the last blur+opacity pass we actually wrote to the DOM. */
+		let appliedPartsKey = "";
+		/** The surfaces the last pass styled, compared BY IDENTITY: the host can swap
+		*  a view element for a fresh one while the slider values stay identical, and
+		*  the value signature alone would then skip the pass and leave the new view
+		*  unstyled until a slider moves. */
+		let appliedTargets = [];
+		/** The four frame columns are mounted and still attached. These are the frame's
+		*  own children (see the host's AppFrame: sidebar / center / rightbar carrying
+		*  `data-rightbar-col` / the overlay), so they exist as soon as the shell does —
+		*  unlike the per-view cards below, which come and go with the active view. */
+		function columnsPresent() {
+			return frameEl !== null && sidebarEl !== null && centerEl !== null && rightEl !== null && document.body.contains(frameEl) && document.body.contains(centerEl);
+		}
+		/** Snapshot of every surface the pass would style, for the identity check. */
+		function targetsNow() {
+			return [
+				frameEl,
+				sidebarEl,
+				centerEl,
+				rightEl,
+				...viewTargets
+			];
+		}
 		/** Watch for the AppFrame mounting so persisted blurs land even when the shell
-		*  renders after this plugin's apply. Cheap: once all parts are found, the
-		*  callback returns. */
+		*  renders after this plugin's apply. */
 		function watchParts() {
 			if (partsObserver !== null || typeof MutationObserver === "undefined") return;
 			partsObserver = new MutationObserver(() => {
-				if (frameEl !== null && sidebarEl !== null && centerEl !== null && rightEl !== null && document.body.contains(frameEl) && viewTargets.every((el) => el !== null && document.body.contains(el))) return;
-				applyPartBlurs(rBlurs());
-				applyPartOpacities(rOps());
+				if (partsApplyRaf !== 0) return;
+				partsApplyRaf = requestAnimationFrame(() => {
+					partsApplyRaf = 0;
+					const blurs = rBlurs();
+					const ops = rOps();
+					const key = JSON.stringify([blurs, ops]);
+					if (!needsPartsPass(probeViewMarkers()) && key === appliedPartsKey && !targetsNow().some((el, i) => el !== appliedTargets[i])) return;
+					applyPartBlurs(blurs);
+					applyPartOpacities(ops);
+					appliedPartsKey = key;
+					appliedTargets = targetsNow();
+				});
 			});
 			partsObserver.observe(document.body, {
 				childList: true,
@@ -3355,6 +3693,13 @@ window.__ModuleLoader__.load({
 		function stopWatchingParts() {
 			partsObserver?.disconnect();
 			partsObserver = null;
+			if (partsApplyRaf !== 0) {
+				cancelAnimationFrame(partsApplyRaf);
+				partsApplyRaf = 0;
+			}
+			appliedPartsKey = "";
+			appliedTargets = [];
+			markerSeen.clear();
 		}
 		let themeObserver = null;
 		let themeRaf = 0;
@@ -3507,6 +3852,9 @@ window.__ModuleLoader__.load({
 		*  be re-registered through the host theme service. */
 		function onVerdictApplied(cb) {
 			verdictListener = cb;
+			return () => {
+				if (verdictListener === cb) verdictListener = null;
+			};
 		}
 		function applyVerdict(dark) {
 			if (rBgDark() === dark) return;
@@ -3634,6 +3982,8 @@ window.__ModuleLoader__.load({
 					clearVideoEl();
 					wpEl?.remove();
 					wpEl = null;
+					wpVerdict = null;
+					setBgDark(null);
 				}
 			} else if (cfg.backgroundType !== "image" && cfg.generatedBg) {
 				clearVideoEl();
@@ -3659,6 +4009,9 @@ window.__ModuleLoader__.load({
 				applyTrajectoryOverrides(rTrajectoryOpacity());
 			}
 			applyPanelOverrides(rPanelOpacity());
+			applyProduced();
+			applyHeaderPopovers();
+			applyExemptDefaults();
 			applyPartBlurs(rBlurs());
 			applyStrokes();
 		}
@@ -3695,6 +4048,11 @@ window.__ModuleLoader__.load({
 			document.documentElement.style.removeProperty("--dsh-any-blur-panel");
 			document.documentElement.style.removeProperty("--dsh-any-blur-prod");
 			document.documentElement.style.removeProperty("--dsh-any-prod-pct");
+			document.documentElement.style.removeProperty("--dsh-any-blur-header");
+			headerStyleEl?.remove();
+			headerStyleEl = null;
+			exemptStyleEl?.remove();
+			exemptStyleEl = null;
 			for (const v of Object.values(OPACITY_VARS)) document.documentElement.style.removeProperty(v);
 			baseTokenKey = "";
 			lastBgKey = "";
@@ -3705,8 +4063,14 @@ window.__ModuleLoader__.load({
 			pendingOps = null;
 			tableFixStyleEl?.remove();
 			tableFixStyleEl = null;
+			partBlurStyleEl?.remove();
+			partBlurStyleEl = null;
 			removeStrokes();
 			removeFontFace();
+			imgNat = null;
+			lowResUrl = null;
+			lowResFor = "";
+			dragLow = false;
 			setBlur(frameEl, 0);
 			setBlur(sidebarEl, 0);
 			setBlur(centerEl, 0);
@@ -3842,7 +4206,10 @@ window.__ModuleLoader__.load({
 /* ── wheel card ──────────────────────────────────────────────────────────── */
 .dab-wheel-card{position:relative;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;padding:24px 18px}
 .dab-wheel-glow{position:absolute;width:230px;height:230px;border-radius:50%;filter:blur(48px);opacity:.2;background:var(--c,#888);pointer-events:none;transition:background .4s ease}
-.dab-wheel{position:relative;cursor:crosshair;border-radius:50%;box-shadow:0 12px 32px -14px rgba(0,0,0,.4)}
+/* flex:none is load bearing, not cosmetic: the pointer maths reads client
+ * coordinates straight off this element's box, so any shrink below the 220px
+ * drawing surface would desynchronise the ring from the cursor. */
+.dab-wheel{position:relative;flex:none;cursor:crosshair;border-radius:50%;box-shadow:0 12px 32px -14px rgba(0,0,0,.4)}
 .dab-hint{font-size:11.5px;line-height:1.55;color:var(--dsw-alias-label-tertiary);padding:0 4px}
 
 /* ── precise color inputs ────────────────────────────────────────────────── */
@@ -3896,7 +4263,7 @@ window.__ModuleLoader__.load({
 .dab-slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--dsw-alias-button-elevated-fill,#fff);border:2px solid var(--dsw-alias-brand-primary)}
 
 /* ── interface part cards ────────────────────────────────────────────────── */
-.dab-grid-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:13px}
+.dab-grid-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:13px}
 .dab-part-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
 .dab-part-ico{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--dsw-alias-brand-primary);background:var(--dsw-alias-bg-layer-2);background:color-mix(in srgb,var(--dsw-alias-brand-primary) 12%,transparent)}
 .dab-part-name{font-size:13.5px;font-weight:600}
@@ -3973,7 +4340,7 @@ window.__ModuleLoader__.load({
 .dab-spin{animation:dab-rotate .7s cubic-bezier(.3,.7,.3,1) 1}
 
 /* ── profile page ────────────────────────────────────────────────────────── */
-.dab-profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:13px}
+.dab-profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:13px}
 .dab-profile-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:13px;color:var(--dsw-alias-brand-primary);background:var(--dsw-alias-bg-layer-2);background:color-mix(in srgb,var(--dsw-alias-brand-primary) 12%,transparent)}
 .dab-profile-title{font-size:14px;font-weight:650}
 .dab-profile-desc{font-size:12px;color:var(--dsw-alias-label-tertiary);line-height:1.55;margin:5px 0 15px}
@@ -3982,7 +4349,7 @@ window.__ModuleLoader__.load({
 
 /* ── presets / profiles / schedule / rotation ────────────────────────────── */
 .dab-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
-.dab-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
+.dab-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:10px}
 .dab-preset{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px;border:1.5px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-1);border-radius:13px;cursor:pointer;font:inherit;text-align:left;transition:border-color .25s,transform .25s,box-shadow .25s;animation:dab-row-in .34s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 45ms)}
 .dab-preset:hover{transform:translateY(-2px);border-color:var(--dsw-alias-brand-primary);box-shadow:0 8px 22px -12px rgba(0,0,0,.3)}
 .dab-preset-dot{width:22px;height:22px;border-radius:50%;margin-bottom:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 4px 10px -4px rgba(0,0,0,.35);background:var(--dsw-alias-bg-layer-2);display:grid;place-items:center;color:var(--dsw-alias-label-tertiary)}
@@ -4009,7 +4376,7 @@ window.__ModuleLoader__.load({
 .dab-schedule-wrap.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1)}
 .dab-schedule-clip{overflow:hidden;min-height:0;opacity:0;transition:opacity .28s ease}
 .dab-schedule-wrap.is-open .dab-schedule-clip{opacity:1;transition:opacity .32s ease .1s}
-.dab-schedule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding-top:12px}
+.dab-schedule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px;padding-top:12px}
 .dab-schedule-cell{min-width:0;animation:dab-row-in .34s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 60ms)}
 .dab-time-row{display:flex;flex-direction:column;gap:9px}
 .dab-time-label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary))}
@@ -4045,6 +4412,9 @@ window.__ModuleLoader__.load({
 .dab-crash{display:flex;flex-direction:column;gap:10px;align-items:center;padding:28px 18px;border:1px solid var(--dsw-alias-border-l2);border-radius:16px}
 .dab-crash-title{font-size:15px;font-weight:650}
 .dab-crash-desc{font-size:12px;color:var(--dsw-alias-label-tertiary);text-align:center;line-height:1.5}
+/* The crash cause: readable, scrollable, and clipped to a few lines so a long
+ * stack cannot push the reset button off the panel. */
+.dab-crash-detail{margin:0;max-width:min(520px,80vw);max-height:132px;overflow:auto;padding:8px 10px;border-radius:8px;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2);font-family:var(--dab-mono);font-size:10.5px;line-height:1.5;color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary));text-align:left;white-space:pre-wrap;word-break:break-word}
 
 /* ── keyframes ───────────────────────────────────────────────────────────── */
 @keyframes dab-fade-in{from{opacity:0}to{opacity:1}}
@@ -4060,6 +4430,72 @@ window.__ModuleLoader__.load({
 @keyframes dab-zoom-in{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
 @keyframes dab-flow{to{background-position:300% 50%}}
 
+/* ── sidebar surface (a dsh-better-sidebar page) ─────────────────────────────
+ * Same shell, hosted in a panel that is handed a full-height column (the host's
+ * native tab body is height:100%) and whose width the user drags freely. So only
+ * THREE things are fixed here, all of them structural:
+ *   1. the shell fills the height and the page body owns the scroll
+ *      (flex:1 + min-height:0), so the panel stays one scrollable column instead
+ *      of pushing the whole tab into a scrollbar;
+ *   2. the nav is a rail ABOVE the page rather than beside it — a side rail would
+ *      spend 150px of a panel that is narrow by nature, and this way the page
+ *      keeps the full width for its own grids;
+ *   3. long tokens (paths, hex, URLs) may wrap instead of widening the panel.
+ *
+ * Everything else — grid columns, paddings, type scale, whether the cards lift on
+ * hover — is width-driven through the container queries below, which measure this
+ * shell (the .dab-root container, which declares container-type:inline-size) and
+ * not the viewport. A narrow sidebar compacts; a wide one falls back to the
+ * dialog's own spacing and multi-column grids, because at that point it *is* a
+ * dialog-sized surface. */
+[data-dab-surface="sidebar"].dab-root{height:100%;min-height:0;padding:12px 12px 0}
+[data-dab-surface="sidebar"] .dab-shell{display:flex;flex-direction:column;align-items:stretch;gap:11px;height:100%;min-height:0;max-width:none;padding-bottom:0}
+[data-dab-surface="sidebar"] .dab-nav{gap:0}
+[data-dab-surface="sidebar"] .dab-nav-list{flex-direction:row;gap:2px;overflow-x:auto;overflow-y:hidden;padding-bottom:1px}
+[data-dab-surface="sidebar"] .dab-nav-list::-webkit-scrollbar{display:none}
+[data-dab-surface="sidebar"] .dab-nav-ind{display:none}
+[data-dab-surface="sidebar"] .dab-nav-item{flex:none;height:32px;gap:7px;padding:0 10px;font-size:12px}
+[data-dab-surface="sidebar"] .dab-nav-item.is-active{background:var(--dsw-alias-bg-layer-2)}
+[data-dab-surface="sidebar"] .dab-page{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:16px;scrollbar-width:thin}
+/* Last-resort safety for text that cannot wrap (paths, hex, URLs). */
+[data-dab-surface="sidebar"] .dab-hint,[data-dab-surface="sidebar"] .dab-part-name{overflow-wrap:anywhere}
+/* The panel's width is whatever the user dragged it to, so let the part cards
+ * fill as many columns as actually fit instead of hard-coding one. 170px is the
+ * narrowest a part card stays readable once its header can wrap (see the head
+ * rules below), which puts the second column at roughly a 380px panel — the
+ * default right-sidebar width. */
+[data-dab-surface="sidebar"] .dab-grid-parts{grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));gap:12px}
+[data-dab-surface="sidebar"] .dab-types{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
+[data-dab-surface="sidebar"] .dab-card{padding:12px}
+[data-dab-surface="sidebar"] .dab-part-head{gap:8px;margin-bottom:10px}
+[data-dab-surface="sidebar"] .dab-part-ico{width:26px;height:26px;border-radius:8px}
+[data-dab-surface="sidebar"] .dab-part-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
+[data-dab-surface="sidebar"] .dab-part-badge{padding:2px 7px;font-size:10px}
+
+/* Narrow panel: tighten the chrome so the content still has room. */
+@container (max-width:539px){
+  [data-dab-surface="sidebar"] .dab-page{gap:11px}
+  [data-dab-surface="sidebar"] .dab-h1{font-size:17px}
+  [data-dab-surface="sidebar"] .dab-desc{font-size:12px}
+  [data-dab-surface="sidebar"] .dab-orb-wrap{width:96px;height:96px}
+  [data-dab-surface="sidebar"] .dab-wheel-card{padding:14px 10px;gap:16px}
+  [data-dab-surface="sidebar"] .dab-wheel-glow{width:170px;height:170px}
+  /* Lift-on-hover is a dialog affordance; in a cramped scrolling panel it only
+   * adds jitter under the cursor. */
+  [data-dab-surface="sidebar"] .dab-card-hover:hover{transform:none;box-shadow:none}
+}
+/* Roomy panel: behave like the dialog again — its spacing, its type scale, and
+ * multi-column grids (a smaller track minimum than the dialog, because the page
+ * here is a few hundred px narrower than a dialog's content column). */
+@container (min-width:540px){
+  [data-dab-surface="sidebar"] .dab-shell{gap:16px}
+  [data-dab-surface="sidebar"] .dab-page{gap:13px}
+  [data-dab-surface="sidebar"] .dab-nav-item{height:34px;font-size:12.5px;padding:0 12px}
+  /* The shared ≤620px rule flattens the type cards to one column, which is right
+   * for a narrow phone-width dialog but wasteful in a roomy panel. */
+  [data-dab-surface="sidebar"] .dab-types{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
+}
+
 /* ── responsive & motion preferences ─────────────────────────────────────── */
 @container (max-width:620px){
   .dab-shell{grid-template-columns:1fr;gap:14px}
@@ -4074,6 +4510,30 @@ window.__ModuleLoader__.load({
 @container (min-width:621px){
   .dab-shell{grid-template-columns:158px minmax(0,1fr);gap:26px}
 }
+/* Phone: on a handset the settings dialog's content column shrinks to roughly
+ * the viewport, and the dialog-sized chrome (18px cards, 21px headings, a 118px
+ * orb, 24px paddings) stops fitting — cards end up wider than the column or the
+ * color row wraps into three cramped pieces. These are the same tightenings the
+ * sidebar surface applies at its own narrow widths, so a phone settings dialog
+ * and a narrow sidebar panel end up looking the same. */
+@container (max-width:480px){
+  .dab-shell{gap:10px}
+  .dab-page{gap:10px}
+  .dab-head{margin:0 0 2px}
+  .dab-h1{font-size:18px}
+  .dab-desc{font-size:12px}
+  .dab-card{padding:14px;border-radius:14px}
+  .dab-hero-accent{gap:16px}
+  .dab-orb-wrap{width:92px;height:92px}
+  .dab-wheel-card{padding:14px 10px;gap:16px}
+  .dab-wheel-glow{width:180px;height:180px}
+  /* Three fixed type-card columns need ~400px; two adaptive ones fit 320px. */
+  .dab-types{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
+  .dab-grid-parts{gap:11px}
+  .dab-part-head{margin-bottom:10px}
+  .dab-slider-block + .dab-slider-block{margin-top:10px}
+  .dab-footer{padding-top:10px}
+}
 @media (prefers-reduced-motion:reduce){
   .dab-root *,.dab-root *::before,.dab-root *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 }
@@ -4404,25 +4864,32 @@ window.__ModuleLoader__.load({
 				this.props.onReset?.();
 			};
 			render() {
-				if (this.state.error) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "dab-crash",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "dab-crash-title",
-							children: this.props.t("crashTitle")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "dab-crash-desc",
-							children: this.props.t("crashDesc")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: "dab-btn",
-							onClick: this.reset,
-							children: this.props.t("crashReset")
-						})
-					]
-				});
+				if (this.state.error) {
+					const detail = this.state.error.stack ?? `${this.state.error.name}: ${this.state.error.message}`;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "dab-crash",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-crash-title",
+								children: this.props.t("crashTitle")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-crash-desc",
+								children: this.props.t("crashDesc")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+								className: "dab-crash-detail",
+								children: detail
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "dab-btn",
+								onClick: this.reset,
+								children: this.props.t("crashReset")
+							})
+						]
+					});
+				}
 				return this.props.children;
 			}
 		};
@@ -4571,6 +5038,10 @@ window.__ModuleLoader__.load({
 			}, [col]);
 			const pendingRef = (0, react.useRef)(null);
 			const rafRef = (0, react.useRef)(null);
+			/** Unmount-time cleanup for a drag that never saw its mouseup (panel closed
+			*  mid-drag): without it the document listeners stay attached forever and the
+			*  pending rAF keeps calling setState on a dead component. */
+			const dragCleanupRef = (0, react.useRef)(null);
 			const flushPending = (0, react.useCallback)(() => {
 				rafRef.current = null;
 				const p = pendingRef.current;
@@ -4612,13 +5083,25 @@ window.__ModuleLoader__.load({
 						schedule(colRef.current.hue, s, l);
 					}
 				};
-				const onUp = () => {
+				const stopDrag = () => {
 					document.removeEventListener("mousemove", onMove);
-					document.removeEventListener("mouseup", onUp);
+					document.removeEventListener("mouseup", stopDrag);
+					dragCleanupRef.current = null;
 				};
+				dragCleanupRef.current = stopDrag;
 				document.addEventListener("mousemove", onMove);
-				document.addEventListener("mouseup", onUp);
+				document.addEventListener("mouseup", stopDrag);
 			}, [schedule]);
+			(0, react.useEffect)(() => {
+				return () => {
+					if (rafRef.current !== null) {
+						cancelAnimationFrame(rafRef.current);
+						rafRef.current = null;
+					}
+					pendingRef.current = null;
+					dragCleanupRef.current?.();
+				};
+			}, []);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("canvas", {
 				ref: cvsRef,
 				width: WHEEL_SIZE,
@@ -4667,6 +5150,7 @@ window.__ModuleLoader__.load({
 					},
 					onChange: (e) => {
 						setText(e.target.value);
+						if (e.target.value === "") return;
 						const v = Number(e.target.value);
 						if (Number.isFinite(v)) onChange(clamp(v, min, max));
 					}
@@ -4783,9 +5267,6 @@ window.__ModuleLoader__.load({
 		//#region src/client/components/ColorPicker.tsx
 		const MAG_SIZE = 96;
 		const MAG_ZOOM = 8;
-		function toHex$1(rgb) {
-			return "#" + rgb.map((v) => v.toString(16).padStart(2, "0")).join("");
-		}
 		/**
 		* Eyedropper modal: shows the wallpaper full-bleed (no drag/zoom) and lets the
 		* user click any pixel to adopt it as the theme color. A magnifier circle
@@ -4815,7 +5296,7 @@ window.__ModuleLoader__.load({
 				canvas.height = imgRef.current.naturalHeight;
 				const ctx = canvas.getContext("2d");
 				if (ctx) ctx.drawImage(imgRef.current, 0, 0);
-			}, [ready]);
+			}, [ready, url]);
 			const sampleAt = (0, react.useCallback)((clientX, clientY) => {
 				const canvas = canvasRef.current;
 				if (!canvas) return null;
@@ -4930,14 +5411,14 @@ window.__ModuleLoader__.load({
 							height: 28,
 							borderRadius: 8,
 							border: "1px solid rgba(255,255,255,0.4)",
-							background: hover ? toHex$1(hover.rgb) : "transparent"
+							background: hover ? rgbToHex(hover.rgb) : "transparent"
 						} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							style: {
 								color: "#fff",
 								fontSize: 13,
 								fontFamily: "var(--dab-mono, monospace)"
 							},
-							children: hover ? `${toHex$1(hover.rgb)} · rgb(${hover.rgb.join(", ")})` : "—"
+							children: hover ? `${rgbToHex(hover.rgb)} · rgb(${hover.rgb.join(", ")})` : "—"
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -5020,9 +5501,6 @@ window.__ModuleLoader__.load({
 				.58
 			]
 		];
-		function toHex(rgb) {
-			return "#" + rgb.map((v) => Math.round(v).toString(16).padStart(2, "0")).join("");
-		}
 		function ColorPage({ p, notify }) {
 			const { t, hue, sat, lit, setColor, extractColor, setSchemeOverride, useStore } = p;
 			const storeUrl = useStore((s) => s.url);
@@ -5037,7 +5515,7 @@ window.__ModuleLoader__.load({
 			];
 			const [h, s, l] = hsvToHsl(wheel[0], wheel[1], wheel[2]);
 			const [r, g, b] = hslToRgb(h, s, l);
-			const hex = toHex([
+			const hex = rgbToHex([
 				r,
 				g,
 				b
@@ -5167,7 +5645,7 @@ window.__ModuleLoader__.load({
 								type: "button",
 								className: `dab-swatch${on ? " is-on" : ""}`,
 								style: { background: `hsl(${sh} ${Math.round(ss * 100)}% ${Math.round(sl * 100)}%)` },
-								title: toHex(hslToRgb(sh, ss, sl)).toUpperCase(),
+								title: rgbToHex(hslToRgb(sh, ss, sl)).toUpperCase(),
 								onClick: () => setColor(...hslToHsv(sh, ss, sl))
 							}, i);
 						})
@@ -5242,15 +5720,16 @@ window.__ModuleLoader__.load({
 			const paint = (el, v) => {
 				el.style.setProperty("--pct", String((v - min) / (max - min) * 100));
 			};
+			const fmtRef = (0, react.useRef)(fmt);
+			fmtRef.current = fmt;
 			(0, react.useEffect)(() => {
 				if (inputRef.current) {
 					inputRef.current.value = String(def);
 					paint(inputRef.current, def);
 				}
-				if (valRef.current) valRef.current.textContent = fmt(def);
+				if (valRef.current) valRef.current.textContent = fmtRef.current(def);
 			}, [
 				def,
-				fmt,
 				min,
 				max
 			]);
@@ -5319,12 +5798,16 @@ window.__ModuleLoader__.load({
 		*  signal and the body childList observer fires exactly when it appears. The
 		*  panel surfaces we actually style are listed only as reinforcement: they are
 		*  conditionally rendered (collapsed panels drop them), so they must never be
-		*  the sole signal. */
+		*  the sole signal.
+		*
+		*  `[data-sidebar-right-panel]` is deliberately ABSENT: on every host generation
+		*  it marks the host's own right Sidebar (always present once a session opens),
+		*  so counting it would make the better-sidebar verdict permanently true and the
+		*  panel slider could never drop back to its native "右方侧边栏" identity. */
 		const BETTER_SIDEBAR_MARKERS = [
 			"[data-dsh-better-sidebar]",
 			"[data-dsh-panel-host]",
-			"[data-dsh-bottom-panel]",
-			"[data-sidebar-right-panel]"
+			"[data-dsh-bottom-panel]"
 		];
 		let betterSidebar = false;
 		const subs = /* @__PURE__ */ new Set();
@@ -5360,6 +5843,15 @@ window.__ModuleLoader__.load({
 			observer.observe(document.body, { childList: true });
 			return () => observer.disconnect();
 		}
+		let nativeTabs = false;
+		const nativeSubs = /* @__PURE__ */ new Set();
+		/** Mark the native right-Sidebar service as confirmed. Sticky — the service
+		*  never goes away within a session. */
+		function markNativeSidebarTabs() {
+			if (nativeTabs) return;
+			nativeTabs = true;
+			nativeSubs.forEach((cb) => cb());
+		}
 		//#endregion
 		//#region src/client/components/pages/InterfacePage.tsx
 		const PARTS$1 = [
@@ -5403,6 +5895,11 @@ window.__ModuleLoader__.load({
 				labelKey: "uiProduced",
 				Icon: TextIcon
 			},
+			{
+				isHeader: true,
+				labelKey: "uiHeader",
+				Icon: PanelIcon
+			},
 			{
 				isPanel: true,
 				labelKey: "uiPanelRegion",
@@ -5410,9 +5907,9 @@ window.__ModuleLoader__.load({
 			}
 		];
 		function InterfacePage({ p }) {
-			const { t, setOps, setBlurs, setSop, setPanelOp } = p;
+			const { t, setOps, setBlurs, setSop, setPanelOp, useStore } = p;
+			useStore((s) => s.metaRev);
 			const hasBetterSidebar = useBetterSidebar();
-			const parts = PARTS$1.filter((part) => !(part.isPanel && !hasBetterSidebar));
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
 				className: "dab-head dab-rise",
 				style: { "--d": 0 },
@@ -5432,11 +5929,12 @@ window.__ModuleLoader__.load({
 				]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "dab-grid-parts",
-				children: parts.map((part, i) => {
-					const { labelKey, Icon, isSettings, isChat, isTrajectory, isPanel, isProduced } = part;
+				children: PARTS$1.map((part, i) => {
+					const { labelKey, Icon, isSettings, isChat, isTrajectory, isPanel, isProduced, isHeader } = part;
 					const opKey = part.opKey;
-					const blurKey = isChat ? "chat" : isTrajectory ? "trajectory" : isSettings ? "settings" : isPanel ? "panel" : isProduced ? "produced" : opKey;
-					const opacity = isChat ? rChatTextOpacity() : isTrajectory ? rTrajectoryOpacity() : isSettings ? rSop() : isPanel ? rPanelOpacity() : isProduced ? rProducedOpacity() : rOps()[opKey];
+					const label = isPanel ? t(hasBetterSidebar ? "uiPanelRegion" : "uiPanelNative") : t(labelKey);
+					const blurKey = isChat ? "chat" : isTrajectory ? "trajectory" : isSettings ? "settings" : isPanel ? "panel" : isProduced ? "produced" : isHeader ? "header" : opKey;
+					const opacity = isChat ? rChatTextOpacity() : isTrajectory ? rTrajectoryOpacity() : isSettings ? rSop() : isPanel ? rPanelOpacity() : isProduced ? rProducedOpacity() : isHeader ? rHeaderOpacity() : rOps()[opKey];
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 						className: "dab-card dab-card-hover dab-rise",
 						style: { "--d": i + 1 },
@@ -5450,7 +5948,7 @@ window.__ModuleLoader__.load({
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										className: "dab-part-name",
-										children: t(labelKey)
+										children: label
 									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 										className: "dab-part-badge",
@@ -5482,6 +5980,9 @@ window.__ModuleLoader__.load({
 									} else if (isProduced) {
 										cfg.producedOpacity = op;
 										applyProduced();
+									} else if (isHeader) {
+										cfg.headerOpacity = op;
+										applyHeaderPopovers();
 									} else {
 										const ops = { ...rOps() };
 										ops[opKey] = op;
@@ -5506,6 +6007,10 @@ window.__ModuleLoader__.load({
 										cfg.producedOpacity = op;
 										applyProduced();
 										saveConfig();
+									} else if (isHeader) {
+										cfg.headerOpacity = op;
+										applyHeaderPopovers();
+										saveConfig();
 									} else {
 										const ops = { ...rOps() };
 										ops[opKey] = op;
@@ -5581,6 +6086,11 @@ window.__ModuleLoader__.load({
 				labelKey: "uiProduced",
 				Icon: TextIcon
 			},
+			{
+				key: "header",
+				labelKey: "uiHeader",
+				Icon: PanelIcon
+			},
 			{
 				key: "panel",
 				labelKey: "uiPanelRegion",
@@ -5617,7 +6127,7 @@ window.__ModuleLoader__.load({
 			}
 		}
 		function FontPage({ p, notify }) {
-			const { t, setFont, removeFont, setFontEnabled, setStrokes } = p;
+			const { t, setFont, removeFont, setFontEnabled, setStrokes, useStore } = p;
 			const hasBetterSidebar = useBetterSidebar();
 			const fileRef = (0, react.useRef)(null);
 			const [strokes, setStrokesState] = (0, react.useState)(() => rStrokes());
@@ -5627,6 +6137,15 @@ window.__ModuleLoader__.load({
 				name: null
 			}));
 			const [busy, setBusy] = (0, react.useState)(false);
+			const metaRev = useStore((s) => s.metaRev);
+			(0, react.useEffect)(() => {
+				setStrokesState(rStrokes());
+				setFontInfo((prev) => prev.mime === cfg.fontMime && prev.enabled === cfg.fontEnabled ? prev : {
+					mime: cfg.fontMime,
+					enabled: cfg.fontEnabled,
+					name: null
+				});
+			}, [metaRev]);
 			const hasFont = fontInfo.mime !== null;
 			const fontLabel = fontInfo.name ?? (fontInfo.mime !== null ? fontInfo.mime.replace("font/", "").toUpperCase() : t("fontNone"));
 			/** Write one group's stroke: cfg + live DOM now, disk on commit. `live`
@@ -5651,9 +6170,9 @@ window.__ModuleLoader__.load({
 					...fontInfo,
 					name: file.name
 				});
-				const ok = await setFont(file);
+				const outcome = await setFont(file);
 				setBusy(false);
-				if (ok) setFontInfo({
+				if (outcome.ok) setFontInfo({
 					mime: cfg.fontMime,
 					enabled: cfg.fontEnabled,
 					name: file.name
@@ -5664,7 +6183,7 @@ window.__ModuleLoader__.load({
 						enabled: cfg.fontEnabled,
 						name: null
 					});
-					notify(t("fontFail"), false);
+					notify(uploadRefusalText(outcome, t, "fontFail"), false);
 				}
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
@@ -5878,6 +6397,19 @@ window.__ModuleLoader__.load({
 			});
 			const containerRef = (0, react.useRef)(null);
 			const imgRef = (0, react.useRef)(null);
+			/**
+			* The overlay node is held in STATE rather than a plain ref, so the listener
+			* effect below re-runs the moment it actually exists.
+			*
+			* This is not a style choice. Everything here renders through <Portal>, which
+			* returns null on its first render — its own effect has to create the host
+			* node under <html> first. A plain ref is therefore still null when a
+			* mount-only effect runs, and an effect whose deps never change again attaches
+			* nothing, ever. That is exactly how the touch handlers below ended up dead on
+			* real phones: the wheel handler only survived because its deps churn on every
+			* zoom/pan, so the wallpaper's img.onload re-ran it once and wired it up.
+			*/
+			const [overlayEl, setOverlayEl] = (0, react.useState)(null);
 			const dragRef = (0, react.useRef)({
 				active: false,
 				sx: 0,
@@ -5885,6 +6417,16 @@ window.__ModuleLoader__.load({
 				spx: 0,
 				spy: 0
 			});
+			/** Unmount-time cleanup for a drag that never saw its mouseup (editor closed
+			*  mid-drag): without it the document listeners stay attached forever and
+			*  keep calling setPos on a dead component. */
+			const dragStopRef = (0, react.useRef)(null);
+			/** Set once a gesture actually moved, so the click that follows a drag is not
+			*  mistaken for a tap on the backdrop (mousedown and mouseup in different
+			*  subtrees make the click land on the overlay, i.e. "outside"). Reset at the
+			*  start of every gesture — touchstart / mousedown / wheel — so it can only
+			*  ever describe the gesture that just ended, never an earlier one. */
+			const movedRef = (0, react.useRef)(false);
 			const viewRef = (0, react.useRef)({
 				zoom,
 				pos
@@ -5930,6 +6472,7 @@ window.__ModuleLoader__.load({
 			]);
 			const onDown = (0, react.useCallback)((e) => {
 				e.preventDefault();
+				movedRef.current = false;
 				dragRef.current = {
 					active: true,
 					sx: e.clientX,
@@ -5939,58 +6482,50 @@ window.__ModuleLoader__.load({
 				};
 				const onMove = (ev) => {
 					if (!dragRef.current.active) return;
+					if (Math.abs(ev.clientX - dragRef.current.sx) > 4 || Math.abs(ev.clientY - dragRef.current.sy) > 4) movedRef.current = true;
 					setPos({
 						x: dragRef.current.spx + ev.clientX - dragRef.current.sx,
 						y: dragRef.current.spy + ev.clientY - dragRef.current.sy
 					});
 				};
-				const onUp = () => {
+				const stopDrag = () => {
 					dragRef.current.active = false;
 					document.removeEventListener("mousemove", onMove);
-					document.removeEventListener("mouseup", onUp);
+					document.removeEventListener("mouseup", stopDrag);
+					dragStopRef.current = null;
 				};
+				dragStopRef.current = stopDrag;
 				document.addEventListener("mousemove", onMove);
-				document.addEventListener("mouseup", onUp);
+				document.addEventListener("mouseup", stopDrag);
 			}, [pos]);
+			(0, react.useEffect)(() => () => {
+				dragStopRef.current?.();
+			}, []);
 			const onWheelCb = (0, react.useCallback)((e) => {
 				e.preventDefault();
+				movedRef.current = false;
 				const el = containerRef.current;
 				if (!el) return;
 				const rect = el.getBoundingClientRect();
 				const mx = rect.width / 2, my = rect.height / 2;
 				const factor = e.deltaY > 0 ? .97 : 1.03;
-				const nz = clampZoom(zoom * factor);
-				const nx = mx - (mx - pos.x) * (nz / zoom);
-				const ny = my - (my - pos.y) * (nz / zoom);
+				const { zoom: z, pos: p } = viewRef.current;
+				const nz = clampZoom(z * factor);
+				const nx = mx - (mx - p.x) * (nz / z);
+				const ny = my - (my - p.y) * (nz / z);
 				setZoom(nz);
 				setPos({
 					x: nx,
 					y: ny
 				});
-			}, [zoom, pos]);
-			(0, react.useEffect)(() => {
-				const el = containerRef.current;
-				if (!el) return;
-				el.addEventListener("wheel", onWheelCb, { passive: false });
-				return () => el.removeEventListener("wheel", onWheelCb);
-			}, [onWheelCb]);
+			}, []);
 			const onTouchStartCb = (0, react.useCallback)((e) => {
-				const el = containerRef.current;
-				if (!el) return;
-				if (e.touches.length === 1) {
-					pinchRef.current = null;
-					const tp = e.touches[0];
-					touchDragRef.current = {
-						sx: tp.clientX,
-						sy: tp.clientY,
-						spx: viewRef.current.pos.x,
-						spy: viewRef.current.pos.y
-					};
-					return;
-				}
+				const card = containerRef.current;
+				if (!card) return;
+				movedRef.current = false;
 				if (e.touches.length >= 2) {
 					touchDragRef.current = null;
-					const rect = el.getBoundingClientRect();
+					const rect = card.getBoundingClientRect();
 					const a = e.touches[0], b = e.touches[1];
 					pinchRef.current = {
 						dist: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY),
@@ -6000,16 +6535,32 @@ window.__ModuleLoader__.load({
 						px: viewRef.current.pos.x,
 						py: viewRef.current.pos.y
 					};
+					return;
+				}
+				if (e.touches.length === 1) {
+					pinchRef.current = null;
+					if (!card.contains(e.target)) {
+						touchDragRef.current = null;
+						return;
+					}
+					const tp = e.touches[0];
+					touchDragRef.current = {
+						sx: tp.clientX,
+						sy: tp.clientY,
+						spx: viewRef.current.pos.x,
+						spy: viewRef.current.pos.y
+					};
 				}
 			}, []);
 			const onTouchMoveCb = (0, react.useCallback)((e) => {
-				const el = containerRef.current;
-				if (!el) return;
+				const card = containerRef.current;
+				if (!card) return;
 				if (e.touches.length >= 2 && pinchRef.current !== null) {
 					e.preventDefault();
+					movedRef.current = true;
 					const p = pinchRef.current;
 					if (p.dist <= 0) return;
-					const rect = el.getBoundingClientRect();
+					const rect = card.getBoundingClientRect();
 					const a = e.touches[0], b = e.touches[1];
 					const dist = Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
 					const cx = (a.clientX + b.clientX) / 2 - rect.left;
@@ -6026,6 +6577,7 @@ window.__ModuleLoader__.load({
 					e.preventDefault();
 					const d = touchDragRef.current;
 					const tp = e.touches[0];
+					if (Math.abs(tp.clientX - d.sx) > 4 || Math.abs(tp.clientY - d.sy) > 4) movedRef.current = true;
 					setPos({
 						x: d.spx + tp.clientX - d.sx,
 						y: d.spy + tp.clientY - d.sy
@@ -6048,19 +6600,29 @@ window.__ModuleLoader__.load({
 				}
 			}, []);
 			(0, react.useEffect)(() => {
-				const el = containerRef.current;
-				if (!el) return;
-				el.addEventListener("touchstart", onTouchStartCb, { passive: false });
-				el.addEventListener("touchmove", onTouchMoveCb, { passive: false });
-				el.addEventListener("touchend", onTouchEndCb, { passive: false });
-				el.addEventListener("touchcancel", onTouchEndCb, { passive: false });
+				if (!overlayEl) return;
+				const noPageGesture = (e) => e.preventDefault();
+				overlayEl.addEventListener("wheel", onWheelCb, { passive: false });
+				overlayEl.addEventListener("touchstart", onTouchStartCb, { passive: false });
+				overlayEl.addEventListener("touchmove", onTouchMoveCb, { passive: false });
+				overlayEl.addEventListener("touchend", onTouchEndCb, { passive: false });
+				overlayEl.addEventListener("touchcancel", onTouchEndCb, { passive: false });
+				overlayEl.addEventListener("gesturestart", noPageGesture, { passive: false });
+				overlayEl.addEventListener("gesturechange", noPageGesture, { passive: false });
+				overlayEl.addEventListener("gestureend", noPageGesture, { passive: false });
 				return () => {
-					el.removeEventListener("touchstart", onTouchStartCb);
-					el.removeEventListener("touchmove", onTouchMoveCb);
-					el.removeEventListener("touchend", onTouchEndCb);
-					el.removeEventListener("touchcancel", onTouchEndCb);
+					overlayEl.removeEventListener("wheel", onWheelCb);
+					overlayEl.removeEventListener("touchstart", onTouchStartCb);
+					overlayEl.removeEventListener("touchmove", onTouchMoveCb);
+					overlayEl.removeEventListener("touchend", onTouchEndCb);
+					overlayEl.removeEventListener("touchcancel", onTouchEndCb);
+					overlayEl.removeEventListener("gesturestart", noPageGesture);
+					overlayEl.removeEventListener("gesturechange", noPageGesture);
+					overlayEl.removeEventListener("gestureend", noPageGesture);
 				};
 			}, [
+				overlayEl,
+				onWheelCb,
 				onTouchStartCb,
 				onTouchMoveCb,
 				onTouchEndCb
@@ -6078,10 +6640,22 @@ window.__ModuleLoader__.load({
 				imgSize
 			]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: setOverlayEl,
 				className: "dab-overlay",
+				style: {
+					touchAction: "none",
+					overscrollBehavior: "contain"
+				},
 				onClick: (e) => {
+					if (movedRef.current) {
+						movedRef.current = false;
+						return;
+					}
 					if (e.target === e.currentTarget) onClose();
 				},
+				onMouseDown: () => {
+					movedRef.current = false;
+				},
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "dab-overlay-title",
@@ -6177,7 +6751,7 @@ window.__ModuleLoader__.load({
 				labelKey: "bgModeCenter"
 			}
 		];
-		function BackgroundPage({ p }) {
+		function BackgroundPage({ p, notify }) {
 			const { t, setWpFromServer, setVideo, setWop, setBl, setBgType, setGeneratedBg, regenerateBg, setRegenerateOnReload, setRotation, addRotationItems, removeRotationItem, rotateNow, setVideoFromUrl, useStore } = p;
 			const storeUrl = useStore((s) => s.url);
 			const backgroundType = useStore((s) => s.backgroundType);
@@ -6194,7 +6768,11 @@ window.__ModuleLoader__.load({
 			const [urlVal, setUrlVal] = (0, react.useState)("");
 			const [urlBusy, setUrlBusy] = (0, react.useState)(false);
 			const [urlErr, setUrlErr] = (0, react.useState)(null);
+			const bgRev = useStore((s) => s.bgRev);
 			const [mode, setModeState] = (0, react.useState)(rBgMode());
+			(0, react.useEffect)(() => {
+				setModeState(rBgMode());
+			}, [bgRev]);
 			const isVideo = backgroundType === "video";
 			const isStatic = backgroundType === "image" || isVideo;
 			const isGenerated = !isStatic;
@@ -6208,14 +6786,15 @@ window.__ModuleLoader__.load({
 				genPreset,
 				generatedBg?.seed
 			]);
-			const onFileSelect = (f) => {
+			const onFileSelect = async (f) => {
 				if (f.type.startsWith("video/")) {
-					setVideo(f, f.type);
+					const outcome = await setVideo(f, f.type);
+					if (!outcome.ok) notify(uploadRefusalText(outcome, t, "videoUploadFail"), false);
 					return;
 				}
-				uploadWallpaper(f).then((ok) => {
-					if (ok) setWpFromServer(WALLPAPER_SERVE_URL);
-				});
+				const outcome = await uploadWallpaper(f);
+				if (outcome.ok) setWpFromServer(WALLPAPER_SERVE_URL);
+				else notify(uploadRefusalText(outcome, t, "bgUploadFail"), false);
 			};
 			const onDrop = (e) => {
 				e.preventDefault();
@@ -6884,7 +7463,8 @@ window.__ModuleLoader__.load({
 			trajectory: 0,
 			input: 0,
 			panel: 0,
-			produced: 0
+			produced: 0,
+			header: 0
 		};
 		/** Presets ship with strokes off — text outlines are an opt-in look. Fresh
 		*  objects per call so a profile restore can never alias another preset's
@@ -6904,7 +7484,8 @@ window.__ModuleLoader__.load({
 				trajectory: off(),
 				input: off(),
 				panel: off(),
-				produced: off()
+				produced: off(),
+				header: off()
 			};
 		};
 		const BUILTIN_PRESETS = [
@@ -6926,7 +7507,8 @@ window.__ModuleLoader__.load({
 					chatTextOpacity: 0,
 					trajectoryOpacity: 1,
 					panelOpacity: 1,
-					producedOpacity: 1
+					producedOpacity: 1,
+					headerOpacity: 1
 				}
 			},
 			{
@@ -6960,7 +7542,8 @@ window.__ModuleLoader__.load({
 					chatTextOpacity: 0,
 					trajectoryOpacity: .85,
 					panelOpacity: .85,
-					producedOpacity: 1
+					producedOpacity: 1,
+					headerOpacity: 1
 				}
 			},
 			{
@@ -6981,7 +7564,8 @@ window.__ModuleLoader__.load({
 					chatTextOpacity: 0,
 					trajectoryOpacity: 1,
 					panelOpacity: 1,
-					producedOpacity: 1
+					producedOpacity: 1,
+					headerOpacity: 1
 				}
 			},
 			{
@@ -7015,7 +7599,8 @@ window.__ModuleLoader__.load({
 					chatTextOpacity: 0,
 					trajectoryOpacity: .8,
 					panelOpacity: .8,
-					producedOpacity: 1
+					producedOpacity: 1,
+					headerOpacity: 1
 				}
 			},
 			{
@@ -7049,7 +7634,8 @@ window.__ModuleLoader__.load({
 					chatTextOpacity: 0,
 					trajectoryOpacity: .78,
 					panelOpacity: .75,
-					producedOpacity: 1
+					producedOpacity: 1,
+					headerOpacity: 1
 				}
 			},
 			{
@@ -7074,7 +7660,8 @@ window.__ModuleLoader__.load({
 					chatTextOpacity: 0,
 					trajectoryOpacity: 1,
 					panelOpacity: 1,
-					producedOpacity: 1
+					producedOpacity: 1,
+					headerOpacity: 1
 				}
 			}
 		];
@@ -7489,31 +8076,37 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/components/ThemeSection.tsx
 		/**
-		* dsh-any-background — settings section shell.
+		* dsh-any-background — appearance shell for the five pages.
 		*
-		* The host renders this section only while the settings dialog is open and the
-		* section is the active nav entry, so mounting IS being visible. The section is
-		* rendered INLINE inside the host settings dialog's content column (the host
-		* provides the modal chrome); the shell is a left nav rail + page body. Only
-		* the transient toast escapes through a Portal (the shell's container-type
-		* containment would otherwise capture its fixed positioning).
+		* Two surfaces render this shell, and only the chrome differs:
+		*   · `settings` — injected into the host settings dialog's content column,
+		*     which supplies the modal frame (nav rail on the left, brand block, page
+		*     max-width, the dialog's own scrolling);
+		*   · `sidebar`  — a page inside dsh-better-sidebar, where the panel is much
+		*     narrower, is handed a full-height column, and has to own its own scroll
+		*     region. The brand block is dropped (the sidebar's tab bar already names
+		*     the page) and the rail turns into a compact row.
+		* The five pages themselves never branch on the surface: width-driven
+		* adaptation lives in the stylesheet's container queries, which measure the
+		* shell itself rather than assuming either surface's width.
 		*/
 		function ThemeSection(props) {
 			ensureUiCss();
 			const { t } = props;
+			const surface = props.surface ?? "settings";
 			const [page, setPage] = (0, react.useState)(0);
 			const [toast, setToast] = (0, react.useState)(null);
 			const toastTimer = (0, react.useRef)(void 0);
 			(0, react.useEffect)(() => () => window.clearTimeout(toastTimer.current), []);
-			const notify = (msg, ok = true) => {
+			const notify = (0, react.useCallback)((msg, ok = true) => {
 				setToast({
 					msg,
 					ok
 				});
 				window.clearTimeout(toastTimer.current);
 				toastTimer.current = window.setTimeout(() => setToast(null), 2600);
-			};
-			const pages = [
+			}, []);
+			const pages = (0, react.useMemo)(() => [
 				{
 					label: t("pageColor"),
 					Icon: DropletIcon,
@@ -7538,7 +8131,10 @@ window.__ModuleLoader__.load({
 				{
 					label: t("pageBackground"),
 					Icon: PhotoIcon,
-					node: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BackgroundPage, { p: props })
+					node: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BackgroundPage, {
+						p: props,
+						notify
+					})
 				},
 				{
 					label: t("pageProfile"),
@@ -7548,16 +8144,21 @@ window.__ModuleLoader__.load({
 						notify
 					})
 				}
-			];
+			], [
+				t,
+				props,
+				notify
+			]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ErrorBoundary, {
 				t,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "dab-root",
+					"data-dab-surface": surface,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "dab-shell",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("nav", {
 							className: "dab-nav",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							children: [surface === "sidebar" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "dab-brand",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 									className: "dab-brand-tile",
@@ -7597,6 +8198,377 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/sidebar/store-hook.ts
+		/**
+		* dsh-any-background — selector hook over a host store instance.
+		*
+		* The settings slot kit hands the pages a `useStore(selector)` hook that is
+		* bound to this plugin's store instance by the host renderer. A better-sidebar
+		* page gets no such kit — its tab props carry `ctx`/`store`/`scope` for
+		* better-sidebar's own store — so the same contract is rebuilt here from the
+		* store instance itself, which already IS an observable source
+		* (`getSnapshot`/`subscribe`, see `defineStore` in the host's client store).
+		*
+		* Semantics match the host binding on purpose: reduce the published snapshot
+		* through the selector and compare with `Object.is`, so a page subscribing to
+		* one field does not re-render on unrelated writes.
+		*/
+		/**
+		* Bind a store instance to a `useStore(selector)` hook. Call once per store and
+		* share the result: the returned hook keeps one subscription identity for its
+		* whole lifetime.
+		* @param store - observable store instance (`defineStore` handle).
+		* @returns a selector hook reading that instance.
+		*/
+		function createStoreHook(store) {
+			const subscribe = (onChange) => store.subscribe(onChange);
+			const { getSnapshot } = store;
+			return function useStoreSelector(selector) {
+				const cache = (0, react.useRef)(null);
+				const read = (0, react.useCallback)(() => {
+					const snapshot = getSnapshot();
+					const hit = cache.current;
+					if (hit !== null && hit.snapshot === snapshot) return hit.value;
+					const value = selector(snapshot);
+					cache.current = {
+						snapshot,
+						value
+					};
+					return value;
+				}, [selector]);
+				return (0, react.useSyncExternalStore)(subscribe, read, read);
+			};
+		}
+		//#endregion
+		//#region src/client/sidebar/tab.tsx
+		/**
+		* dsh-any-background — dsh-better-sidebar integration.
+		*
+		* Publishes the plugin's appearance controls as a sidebar page ("主题") in
+		* better-sidebar's tab registry. The page renders the SAME five-page tree as
+		* the settings section — `ThemeSection` takes a `surface` variant — so there is
+		* one UI to maintain, not two forks of it.
+		*
+		* The dependency is optional at every level, which is why nothing here imports
+		* the package:
+		*   · the service is read off the client context at runtime, so a DSH install
+		*     without better-sidebar silently registers nothing, and a better-sidebar
+		*     that mounts *after* this plugin still gets the page (`ctx.inject` fires
+		*     whenever the service shows up, never when it never does);
+		*   · the plugin's own types are restated in the minimal local contract below
+		*     instead of imported — a value import would be rejected by the host's
+		*     client-bundle purity gate, and even a type-only import would make the
+		*     package a build-time dependency for everyone who does not run it.
+		*/
+		/**
+		* The active locale id, used as a re-render signal: page labels are resolved by
+		* calling `t(...)` at render time, so the props object (and with it the memoized
+		* page tree) has to be rebuilt when the language flips — otherwise the page
+		* would keep painting the previous language until some unrelated store write
+		* happened to re-render it.
+		* @param locale - host locale service.
+		* @returns the active locale id (a stable string, safe for `Object.is`).
+		*/
+		function useActiveLocale(locale) {
+			const subscribe = (0, react.useCallback)((onChange) => locale.subscribe(onChange), [locale]);
+			const read = (0, react.useCallback)(() => locale.getSnapshot().active, [locale]);
+			return (0, react.useSyncExternalStore)(subscribe, read, read);
+		}
+		/** Rendered inside a sidebar tab: the five pages, `surface: 'sidebar'` shell.
+		*  Shared by the better-sidebar page and the native right-Sidebar tab — both
+		*  hand a full-height column that owns its own scroll. */
+		function ThemeTab({ face, useStore, locale }) {
+			const active = useActiveLocale(locale);
+			const props = (0, react.useMemo)(() => ({
+				...face,
+				useStore
+			}), [
+				face,
+				useStore,
+				active
+			]);
+			return (0, react.createElement)(ThemeSection, {
+				...props,
+				surface: "sidebar"
+			});
+		}
+		/**
+		* Register the appearance page with better-sidebar, if it is installed.
+		*
+		* Call from the client `apply`. The registration is owned by the injected
+		* scope's effect, so unloading the plugin (or HMR) withdraws it — without that,
+		* the next activation would throw on the duplicate id.
+		* @param ctx - client context.
+		* @param opts.face - lazy accessor for the shared business face.
+		* @param opts.store - the plugin's store instance, or null on a host where the
+		*   store module never resolved (in that case there is nothing to bind and no
+		*   page is registered).
+		*/
+		function registerThemeSidebarTab(ctx, opts) {
+			const { store } = opts;
+			if (store === null || typeof store.getSnapshot !== "function" || typeof store.subscribe !== "function") {
+				console.warn("dsh-any-background: no observable store instance on this host; the sidebar page stays unregistered");
+				return;
+			}
+			const locale = ctx.locale;
+			const t = locale.bind(NS);
+			const useStore = createStoreHook(store);
+			const ORDER = 55;
+			ctx.inject?.(["betterSidebar"], (scope) => {
+				const service = scope.betterSidebar;
+				if (service === void 0) return;
+				const suppress = suppressesBetterSidebar();
+				if (suppress === true) return;
+				let disposeTab = null;
+				const unsubscribeHost = suppress === null ? subscribeHostInfo(() => {
+					if (suppressesBetterSidebar() === true) {
+						disposeTab?.();
+						disposeTab = null;
+						unsubscribeHost();
+					}
+				}) : () => {};
+				const face = opts.face();
+				scope.effect(() => {
+					disposeTab = service.registerTab({
+						id: "dsh-any-background:theme",
+						title: () => t("nav"),
+						icon: (size) => (0, react.createElement)(SunIcon, { size }),
+						order: ORDER,
+						single: true,
+						component: () => (0, react.createElement)(ThemeTab, {
+							face,
+							useStore,
+							locale
+						})
+					}) ?? null;
+					return () => {
+						unsubscribeHost();
+						disposeTab?.();
+						disposeTab = null;
+					};
+				});
+			});
+		}
+		//#endregion
+		//#region src/client/sidebar/native-tab.tsx
+		/**
+		* dsh-any-background — native right-Sidebar integration (DSH 0.1.6+).
+		*
+		* DSH 0.1.6 ships an official right Sidebar (`dsh-client-ui-sidebar-right`)
+		* with a public two-stage extension path: a static tab type into
+		* `ctx.sidebarRightTabs` — whose `guide` entry draws a card on the Sidebar's
+		* guide page — and a body under the keyed `sidebar.right.pane.tab` seat. This
+		* module registers the plugin's appearance pages through that path, so the
+		* official Sidebar gains a "主题" card that opens the very same five pages the
+		* settings panel shows (one implementation, one state store; editing in either
+		* place shows up in the other).
+		*
+		* The dependency is optional at every level, mirroring `sidebar/tab.tsx`:
+		*   · the registry is waited on with `ctx.inject`, so a host without the
+		*     right Sidebar (or an older DSH) silently registers nothing, and a
+		*     Sidebar that initializes after this plugin still gets the card;
+		*   · the service shape is restated as a minimal local contract instead of
+		*     imported — a value import would be rejected by the host's client-bundle
+		*     purity gate, and even a type-only import would make the package a
+		*     build-time dependency for everyone who does not run it.
+		*
+		* When dsh-better-sidebar is installed it brings its own "主题" page (registered
+		* by `sidebar/tab.tsx`), which would duplicate this card on the same guide
+		* page. The native card therefore yields: it is not registered while
+		* better-sidebar is detected, and it withdraws itself if better-sidebar mounts
+		* later (the presence verdict is sticky-true, so no re-registration path is
+		* needed). The Interface page's panel slider follows the same split:
+		* "右方侧边栏" natively, "bettersidebar" when that plugin is present.
+		*/
+		/** The tab implementation's identity, and the key the body registers under. */
+		const NATIVE_TAB_ID = "dsh-any-background:theme";
+		/** The page kind: what `openTab` names and the guide entry opens. */
+		const NATIVE_TAB_KIND = "danybg-theme";
+		/**
+		* Register the appearance pages with the native right Sidebar, if one exists.
+		*
+		* Call from the client `apply`. Both registrations sit inside the injected
+		* scope's effects, so unloading the plugin (or HMR) withdraws them — without
+		* that, the next activation would throw on the duplicate id.
+		* @param ctx - client context.
+		* @param opts.face - lazy accessor for the shared business face.
+		* @param opts.store - the plugin's store instance, or null on a host where the
+		*   store module never resolved (in that case there is nothing to bind and no
+		*   page is registered).
+		*/
+		function registerNativeSidebarTab(ctx, opts) {
+			const { store } = opts;
+			if (store === null || typeof store.getSnapshot !== "function" || typeof store.subscribe !== "function") {
+				console.warn("dsh-any-background: no observable store instance on this host; the native sidebar page stays unregistered");
+				return;
+			}
+			const locale = ctx.locale;
+			const t = locale.bind(NS);
+			const useStore = createStoreHook(store);
+			ctx.inject?.(["sidebarRightTabs"], (scope) => {
+				const tabs = scope.sidebarRightTabs;
+				if (tabs === void 0 || typeof tabs.register !== "function") return;
+				markNativeSidebarTabs();
+				const face = opts.face();
+				const ThemeBody = () => (0, react.createElement)(ThemeTab, {
+					face,
+					useStore,
+					locale
+				});
+				scope.effect(() => {
+					const yieldTo = () => suppressesBetterSidebar() === false && rBetterSidebar();
+					if (yieldTo()) return;
+					let disposeTab = null;
+					const withdraw = () => {
+						disposeTab?.();
+						disposeTab = null;
+					};
+					const unsubscribeBetter = subscribe(() => {
+						if (yieldTo()) withdraw();
+					});
+					const unsubscribeHost = subscribeHostInfo(() => {
+						if (yieldTo()) withdraw();
+					});
+					disposeTab = tabs.register({
+						id: NATIVE_TAB_ID,
+						kind: NATIVE_TAB_KIND,
+						title: () => t("nav"),
+						guide: [{
+							id: "theme",
+							order: 55,
+							title: () => t("nav"),
+							description: () => t("guideDesc"),
+							icon: SunIcon
+						}]
+					});
+					return () => {
+						unsubscribeBetter();
+						unsubscribeHost();
+						withdraw();
+					};
+				}, "dsh-any-background: native sidebar theme tab");
+				scope.effect(() => ctx.slots.inject("sidebar.right.pane.tab", () => ctx.slots.register({
+					name: "sidebar.right.pane.tab",
+					key: NATIVE_TAB_ID
+				}, ThemeBody)), "dsh-any-background: native sidebar theme body");
+			});
+		}
+		//#endregion
+		//#region src/client/header-tag.ts
+		/**
+		* Header-surface tagging.
+		*
+		* WHY A RUNTIME TAG IS NEEDED
+		* The session-header dropdowns (open-in-app, session-log, Agent Team, the job
+		* list, the subagent lineage tree) render their popover through the Menu/tree
+		* primitives, which PORTAL the list to `document.body`. A portaled list is not a
+		* DOM descendant of the header — no ancestor selector can reach it — and the
+		* primitive emits no `id`/`aria-controls` back-link to its anchor either. Pure
+		* CSS class matching was the remaining option, but 0.1.7 broke the shapes this
+		* plugin relied on: open-in-app moved from in-place to `portal` (so the old
+		* `:not(_portal)` discriminator no longer selected it), and the session row menu
+		* became a dynamic `sidebar.workspaces.session.menu.item` slot whose rows are no
+		* longer guaranteed to include a destructive one.
+		*
+		* THE SIGNAL
+		* The slot renderer stamps every registered slot with `data-slot="<key>"`
+		* (ui-renderer `scoped-slots.tsx`), and the session header's own slots are
+		* `conversation.session.header{,.actions,.utilities,.corner,.lineage}` — present
+		* on 0.1.5 through 0.1.7 alike. Those anchors live in the header subtree, so the
+		* plugin can detect when a header trigger is expanded.
+		*
+		* WHY NOT GEOMETRY
+		* A tempting link is the inline position the primitive writes on a portaled list
+		* (`style="left: …; top: …"`). It was tried and REJECTED: an `align="end"` list
+		* is flush to the trigger's right edge while the trigger itself sits at the far
+		* right of the header, so the two boxes often do not overlap horizontally (in
+		* the reported DOM the list is at `left:1012` with the trigger near x=1400). Any
+		* purely geometric proximity test therefore misses real header menus.
+		*
+		* THE ACTUAL RULE (structural, no geometry, no timing)
+		* A header dropdown can only be open while its trigger reports
+		* `aria-expanded="true"`, and opening one is what mounts the popover. So a
+		* popover tag is maintained as: "there is at least one expanded header trigger,
+		* AND this popover is not owned by another group". Popovers are only ever
+		* tagged/released on a change of that combined state, which makes the tag
+		* self-consistent and idempotent.
+		*
+		* The one hazard is a popover that is open for an unrelated reason (a composer
+		* menu, a hover card) *while* a header trigger stays expanded. Such a popover
+		* is not a candidate: it is excluded by `ownsForeignSurface`, which skips any
+		* popover carrying markers of a different slider group. In practice header
+		* dropdowns are transient (opening one closes the others), so this is a guard
+		* rather than the common path.
+		*
+		* @module
+		*/
+		/** Marker attribute the stylesheet keys on. */
+		const HEADER_POPOVER_ATTR = "data-dsh-any-header-popover";
+		/** Slot anchors that identify the session header's own surfaces. */
+		const HEADER_SLOT_SELECTOR = [
+			"[data-slot=\"conversation.session.header\"]",
+			"[data-slot=\"conversation.session.header.actions\"]",
+			"[data-slot=\"conversation.session.header.utilities\"]",
+			"[data-slot=\"conversation.session.header.corner\"]",
+			"[data-slot=\"conversation.session.header.lineage\"]"
+		].join(",");
+		/** Portaled popovers a header trigger can own. */
+		const POPOVER_SELECTOR = "[role=\"menu\"], [role=\"tree\"], [role=\"dialog\"]";
+		/** Whether any header slot anchor has an expanded trigger. */
+		function headerTriggerOpen() {
+			for (const anchor of document.querySelectorAll(HEADER_SLOT_SELECTOR)) if (anchor.querySelector("[aria-expanded=\"true\"]") !== null) return true;
+			return false;
+		}
+		/** Surfaces that belong to a different slider group and must never be claimed.
+		*  `_denseList` without `_portal` is the in-place card-side dense menu, an
+		*  `_ioCard`/`_menu`-classed body-level list belongs elsewhere, and a modal is
+		*  its own surface. */
+		function ownsForeignSurface(el) {
+			if (el.getAttribute("aria-modal") === "true") return true;
+			return el.parentElement !== document.body;
+		}
+		let observer = null;
+		let raf = null;
+		/** Recompute tags from the current open state. */
+		function refreshHeaderPopovers() {
+			const open = headerTriggerOpen();
+			const candidates = [...document.querySelectorAll(POPOVER_SELECTOR)].filter((el) => !ownsForeignSurface(el));
+			if (!open) {
+				for (const el of document.querySelectorAll(`[${HEADER_POPOVER_ATTR}]`)) el.removeAttribute(HEADER_POPOVER_ATTR);
+				return;
+			}
+			for (const el of candidates) el.setAttribute(HEADER_POPOVER_ATTR, "");
+			for (const el of document.querySelectorAll(`[${HEADER_POPOVER_ATTR}]`)) if (!candidates.includes(el)) el.removeAttribute(HEADER_POPOVER_ATTR);
+		}
+		function schedule() {
+			if (raf !== null) return;
+			raf = window.requestAnimationFrame(() => {
+				raf = null;
+				refreshHeaderPopovers();
+			});
+		}
+		/** Start tagging. Returns a teardown that stops observing and clears markings. */
+		function startHeaderPopoverTagging() {
+			if (typeof MutationObserver === "undefined" || typeof document === "undefined") return () => {};
+			refreshHeaderPopovers();
+			observer = new MutationObserver(schedule);
+			observer.observe(document.body, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: ["aria-expanded"]
+			});
+			return () => {
+				observer?.disconnect();
+				observer = null;
+				if (raf !== null) {
+					window.cancelAnimationFrame(raf);
+					raf = null;
+				}
+				for (const el of document.querySelectorAll(`[${HEADER_POPOVER_ATTR}]`)) el.removeAttribute(HEADER_POPOVER_ATTR);
+			};
+		}
+		//#endregion
 		//#region src/client/index.tsx
 		/**
 		* dsh-any-background — browser half entry.
@@ -7617,6 +8589,7 @@ window.__ModuleLoader__.load({
 			initRpc((endpoint, payload) => ctx.connection.rpc.call(RPC_CHANNEL, endpoint, payload).then((res) => res));
 			const [initH, initS, initL] = rColor();
 			let customDispose = null;
+			let registerFailed = false;
 			const registerCustom = (h, s, l) => {
 				customDispose?.();
 				try {
@@ -7649,30 +8622,54 @@ window.__ModuleLoader__.load({
 						colorScheme,
 						tokens
 					});
-				} catch {
+				} catch (e) {
+					if (!(() => {
+						try {
+							return ctx.theme.getTheme().themes.some((t) => t.id === CUSTOM_ID);
+						} catch {
+							return false;
+						}
+					})()) {
+						if (!registerFailed) {
+							registerFailed = true;
+							console.error("dsh-any-background: host theme register failed; the custom skin will stay inactive", e);
+						}
+						customDispose = null;
+						return false;
+					}
 					customDispose = null;
 				}
-				const present = ctx.theme.getTheme().themes.some((t) => t.id === CUSTOM_ID);
+				const present = (() => {
+					try {
+						return ctx.theme.getTheme().themes.some((t) => t.id === CUSTOM_ID);
+					} catch {
+						return false;
+					}
+				})();
 				if (present) ctx.theme.setTheme(CUSTOM_ID);
 				return present;
 			};
 			if (rHasColor()) registerCustom(initH, initS, initL);
-			onVerdictApplied(() => {
+			const disposeVerdict = onVerdictApplied(() => {
 				if (!rHasColor()) registerCustom();
 			});
-			onColorAdopted((hsl) => {
+			const disposeColorAdopted = onColorAdopted((hsl) => {
 				registerCustom(hsl[0], hsl[1], hsl[2]);
 				saveConfig();
 				colorRev++;
 				bound?.syncColor(hslToHsv(hsl[0], hsl[1], hsl[2]), colorRev);
 			});
+			ctx.effect(() => () => {
+				disposeVerdict();
+				disposeColorAdopted();
+			}, "dsh-any-background: verdict/color listeners");
 			ctx.effect(() => () => {
 				customDispose?.();
 				if (colorTimerRef.current !== null) window.clearTimeout(colorTimerRef.current);
 			}, "dsh-any-background: skin dispose");
 			const styleEl = document.createElement("style");
 			styleEl.dataset.plugin = "dsh-any-background";
-			styleEl.textContent = `body[data-ds-dark-theme="dsh-any-background"]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,0.03) 0%,transparent 60%)}${SETTINGS_STYLE_RULE}${POPOVER_BLUR_RULE}${TRAJECTORY_STYLE_RULE}${INPUT_BLUR_RULE}${MOBILE_HEADER_RULE}${PANEL_TOKEN_RULE}${PANEL_BLUR_RULE}${PRODUCED_RULE}${STROKE_RULE}[data-composer-card] textarea::placeholder,[data-composer-card] input::placeholder,[data-composer-card] [contenteditable]::placeholder,[data-cordis-panel] input::placeholder,[data-cordis-panel] textarea::placeholder,.dab-input::placeholder,.dab-input textarea::placeholder,.dab-input input::placeholder{color:var(--dsh-any-placeholder,var(--dsw-alias-label-caption,#8a8f98))!important;font-style:italic;opacity:.85}`;
+			styleEl.textContent = `body[data-ds-dark-theme="dsh-any-background"]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,0.03) 0%,transparent 60%)}${SETTINGS_STYLE_RULE}${POPOVER_BLUR_RULE}${TRAJECTORY_STYLE_RULE}${INPUT_BLUR_RULE}${MOBILE_HEADER_RULE}${PANEL_TOKEN_RULE}${PANEL_PROMOTION_RULE}${PANEL_BLUR_RULE}${PRODUCED_RULE}${STROKE_RULE}${HEADER_POPOVER_RULE}${EXEMPT_DEFAULT_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);
@@ -7683,7 +8680,7 @@ window.__ModuleLoader__.load({
 			let colorRev = 0;
 			let bgRev = 0;
 			const colorTimerRef = { current: null };
-			const store = defineStore({
+			const storeSpec = defineStore === null ? null : defineStore({
 				init: () => ({
 					url: null,
 					rev: -1,
@@ -7734,13 +8731,44 @@ window.__ModuleLoader__.load({
 					}
 				}
 			});
+			/** One shared instance, whatever the host build handed back.
+			*
+			*  The plugin publishes a single appearance state that BOTH surfaces read —
+			*  the settings section (through the renderer's `useStore`) and the
+			*  better-sidebar page (through the hook in `sidebar/store-hook`). Handing the
+			*  host a declaration whose `create` always returns this very instance is what
+			*  keeps them from drifting: letting the renderer mint its own would give the
+			*  sidebar a second, permanently empty copy of the state. */
+			const storeInstance = storeSpec === null ? null : typeof storeSpec.getSnapshot === "function" ? storeSpec : storeSpec.create();
+			/** What gets registered: the instance on newer builds, a single-instance
+			*  declaration on the ones that expect a declaration. */
+			const store = storeSpec === null || storeInstance === storeSpec ? storeSpec : {
+				spec: storeSpec.spec ?? {},
+				create: () => storeInstance
+			};
 			let bound = null;
+			if (storeInstance !== null) bound = storeInstance.actions;
 			const syncBg = () => {
 				rev++;
 				bgRev++;
 				bound?.syncBg(rWp(), rev, cfg.backgroundType, cfg.generatedBg, bgRev, cfg.regenerateOnReload);
 			};
-			onGeneratedSnapshot(syncBg);
+			const disposeSnapshot = onGeneratedSnapshot(syncBg);
+			ctx.effect(() => () => disposeSnapshot(), "dsh-any-background: snapshot listener");
+			/** Capture the first frame of the video now applied and finish its
+			*  adaptation: the frame stands in for every still-image API (previews,
+			*  color extraction) and the brightness verdict follows it. The stale guard
+			*  skips a capture whose video was swapped out from under it (another
+			*  upload or a rotation switch landing mid-decode). */
+			const captureAndApplyVideo = (url) => {
+				if (url === null) return;
+				captureVideoSnapshot(url).then((snap) => {
+					if (rWpVideo() !== url) return;
+					setWpVideoSnapshot(snap);
+					applyThemeColor();
+					syncBg();
+				});
+			};
 			let metaRev = 0;
 			const syncMetaNow = () => {
 				metaRev++;
@@ -7861,7 +8889,7 @@ window.__ModuleLoader__.load({
 			const scheduleTick = () => {
 				const sc = rSchedule();
 				if (!sc.enabled) return;
-				const want = (sc.mode === "system" ? window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false : isNightNow(sc)) ? sc.nightProfile : sc.dayProfile;
+				const want = (sc.mode === "system" ? window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ?? false : isNightNow(sc)) ? sc.nightProfile : sc.dayProfile;
 				if (!want || want === cfg.activeProfile) return;
 				applyProfileById(want);
 			};
@@ -7889,12 +8917,7 @@ window.__ModuleLoader__.load({
 				if (cfg.backgroundType === "video") {
 					const v = rWpVideo();
 					if (v) {
-						captureVideoSnapshot(v).then((snap) => {
-							if (rWpVideo() !== v) return;
-							setWpVideoSnapshot(snap);
-							applyThemeColor();
-							syncBg();
-						});
+						captureAndApplyVideo(v);
 						applyWp();
 					} else {
 						cfg.backgroundType = "image";
@@ -7924,6 +8947,7 @@ window.__ModuleLoader__.load({
 				teardownWp();
 			}, "dsh-any-background: wp cleanup");
 			ctx.effect(() => startBetterSidebarWatch(), "dsh-any-background: better-sidebar watch");
+			ctx.effect(() => startHeaderPopoverTagging(), "dsh-any-background: header popover tagging");
 			ctx.effect(() => ctx.on("theme/change", () => {
 				if (rHasColor() || rBgDark() !== null || rSchemeOverride() !== "auto") {
 					const snapshot = ctx.theme.getTheme();
@@ -7944,19 +8968,25 @@ window.__ModuleLoader__.load({
 			document.body.append(sentinel);
 			const viewportObserver = new ResizeObserver(applySoon);
 			viewportObserver.observe(sentinel);
-			const dprQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
-			dprQuery.addEventListener("change", applySoon);
+			const dprQuery = window.matchMedia?.(`(resolution: ${window.devicePixelRatio}dppx)`);
+			dprQuery?.addEventListener?.("change", applySoon);
 			ctx.effect(() => () => {
 				viewportObserver.disconnect();
-				dprQuery.removeEventListener("change", applySoon);
+				dprQuery?.removeEventListener?.("change", applySoon);
 				sentinel.remove();
 			}, "dsh-any-background: viewport watch");
 			ctx.effect(() => ctx.locale.register(NS, {
 				zh,
 				en
 			}), "dsh-any-background: i18n");
-			const sectionInject = (actions) => {
-				bound = actions;
+			/** The business face, built once on first use and shared by both surfaces
+			*  (the settings section and the better-sidebar page). Memoizing is not just
+			*  about cost: the face closes over per-surface state — the font preview blob
+			*  URL behind releaseFontPreview — so a second build would give the sidebar
+			*  its own preview slot and leak whichever copy never gets released. */
+			let themeFace = null;
+			const buildFace = () => {
+				if (themeFace !== null) return themeFace;
 				syncBg();
 				syncMetaNow();
 				const playVideoFromBlob = (blob, mime) => {
@@ -7967,15 +8997,10 @@ window.__ModuleLoader__.load({
 					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();
+					captureAndApplyVideo(rWpVideo());
+					return uploadVideo(blob, mime ?? blob.type ?? "video/mp4").then((outcome) => {
+						if (outcome.ok) persistConfig();
+						return outcome;
 					});
 				};
 				const FONT_EXT_MIME = {
@@ -8002,7 +9027,7 @@ window.__ModuleLoader__.load({
 				};
 				const [wh, ws, wl] = rColor();
 				const [dh, ds, dv] = hslToHsv(wh, ws, wl);
-				return {
+				const built = {
 					t: ctx.locale.bind(NS),
 					hue: dh,
 					sat: ds,
@@ -8052,13 +9077,11 @@ window.__ModuleLoader__.load({
 							applyThemeColor();
 							syncBg();
 							saveConfig();
-							return;
-						}
-						if (typeof u !== "string") {
-							playVideoFromBlob(u, mime);
-							return;
+							return { ok: true };
 						}
-						const live = await persistVideo(u) ? VIDEO_SERVE_URL : u;
+						if (typeof u !== "string") return playVideoFromBlob(u, mime);
+						const ok = await persistVideo(u);
+						const live = ok ? VIDEO_SERVE_URL : u;
 						cfg.backgroundType = "video";
 						setWpUrl(null);
 						cfg.videoBgState = { ...DEFAULT_CONFIG.bgState };
@@ -8066,13 +9089,8 @@ window.__ModuleLoader__.load({
 						applyWp();
 						saveConfig();
 						syncBg();
-						const applied = rWpVideo();
-						captureVideoSnapshot(live).then((snap) => {
-							if (rWpVideo() !== applied) return;
-							setWpVideoSnapshot(snap);
-							applyThemeColor();
-							syncBg();
-						});
+						captureAndApplyVideo(rWpVideo());
+						return { ok };
 					},
 					setBgType: (type) => {
 						setBackgroundType(type);
@@ -8116,18 +9134,21 @@ window.__ModuleLoader__.load({
 						const localUrl = URL.createObjectURL(file);
 						fontPreviewUrl = localUrl;
 						applyFontFace(localUrl, true, fontMimeFromName(file.name));
-						const mime = await uploadFont(file);
-						if (mime === null) {
+						const outcome = await uploadFont(file);
+						if (!outcome.ok || outcome.mime === void 0) {
 							applyStoredFont();
 							releaseFontPreview(4e3);
-							return false;
+							return {
+								ok: false,
+								refusal: outcome.refusal
+							};
 						}
-						cfg.fontMime = mime;
+						cfg.fontMime = outcome.mime;
 						cfg.fontEnabled = true;
-						applyFontFace(FONT_SERVE_URL, true, mime);
+						applyFontFace(FONT_SERVE_URL, true, outcome.mime);
 						releaseFontPreview(4e3);
 						persistConfig();
-						return true;
+						return { ok: true };
 					},
 					removeFont: () => {
 						releaseFontPreview(0);
@@ -8213,7 +9234,7 @@ window.__ModuleLoader__.load({
 						a.href = url;
 						a.download = "dsh-any-theme.json";
 						a.click();
-						URL.revokeObjectURL(url);
+						window.setTimeout(() => URL.revokeObjectURL(url), 4e3);
 					},
 					importTheme: async (file) => {
 						try {
@@ -8233,16 +9254,9 @@ window.__ModuleLoader__.load({
 									}
 									if (blob !== null) playVideoFromBlob(blob, cfg.videoMime);
 									else {
-										const live = await persistVideo(video) ? VIDEO_SERVE_URL : video;
-										setWpVideoUrl(live, cfg.videoMime);
+										setWpVideoUrl(await persistVideo(video) ? VIDEO_SERVE_URL : video, cfg.videoMime);
 										applyWp();
-										const applied = rWpVideo();
-										captureVideoSnapshot(live).then((snap) => {
-											if (rWpVideo() !== applied) return;
-											setWpVideoSnapshot(snap);
-											applyThemeColor();
-											syncBg();
-										});
+										captureAndApplyVideo(rWpVideo());
 									}
 								} else {
 									setWpVideoUrl(null, null);
@@ -8401,18 +9415,19 @@ window.__ModuleLoader__.load({
 						applyWp();
 						saveConfig();
 						syncBg();
-						const applied = rWpVideo();
-						captureVideoSnapshot(applied).then((snap) => {
-							if (rWpVideo() !== applied) return;
-							setWpVideoSnapshot(snap);
-							applyThemeColor();
-							syncBg();
-						});
+						captureAndApplyVideo(rWpVideo());
 						return true;
 					}
 				};
+				themeFace = built;
+				return built;
 			};
-			ctx.slots.inject("settings.section", () => ctx.slots.register({
+			const sectionInject = (actions) => {
+				bound = actions;
+				return buildFace();
+			};
+			if (store === null) console.error("dsh-any-background: settings panel disabled on this host (no store module)");
+			else ctx.slots.inject("settings.section", () => ctx.slots.register({
 				name: "settings.section",
 				id: "dsh-any-background",
 				order: 35,
@@ -8421,6 +9436,14 @@ window.__ModuleLoader__.load({
 				store,
 				inject: sectionInject
 			}, ThemeSection));
+			registerThemeSidebarTab(ctx, {
+				face: buildFace,
+				store: storeInstance
+			});
+			registerNativeSidebarTab(ctx, {
+				face: buildFace,
+				store: storeInstance
+			});
 			const navLabel = () => ctx.locale.bind(NS)("nav");
 			const applyNavIcon = () => {
 				const nav = document.querySelector("[role=\"dialog\"][aria-modal=\"true\"][aria-labelledby]")?.querySelector("nav");