dsh-any-background 0.2.8 → 0.2.10

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";
@@ -24,10 +30,12 @@ window.__ModuleLoader__.load({
 			close: "关闭",
 			pageColor: "色彩",
 			pageInterface: "界面",
+			pageFont: "字体",
 			pageBackground: "背景",
 			pageProfile: "配置",
 			descColor: "拖动色轮或输入精确数值，整个界面的配色将实时跟随变化",
 			descInterface: "为主界面的各个区域单独调节透明度与模糊，营造空间层次感",
+			descFont: "上传自定义字体为整套界面换字形，并按区域为文字添加描边，让内容在复杂的壁纸上依然清晰",
 			descBackground: "上传一张图片或一段视频作为壁纸并自由摆放，或让算法为你实时生成动态背景",
 			descProfile: "一键套用外观预设，保存多套配置随时切换，设置昼夜自动换装，或导出/导入完整主题",
 			colorTitle: "主题色",
@@ -46,6 +54,28 @@ window.__ModuleLoader__.load({
 			uiTrajectory: "轨迹页",
 			uiPanelRegion: "better-sidebar 工作台",
 			uiProduced: "产出物/高亮内容",
+			fontPageTitle: "字体与描边",
+			fontTitle: "自定义字体",
+			fontHint: "支持 ttf/otf/woff/woff2 字体文件（上限 100MB），将应用到整个界面的文字；代码块的等宽字体保持不变。中文字体通常有几十 MB，首次上传与刷新加载需要片刻",
+			fontUpload: "上传字体",
+			fontUploading: "上传中…",
+			fontRemove: "移除字体",
+			fontEnabled: "启用字体",
+			fontNone: "未设置，使用宿主默认字体",
+			fontFail: "字体上传失败，请确认是有效的 ttf/otf/woff/woff2 文件",
+			uploadTooLarge: "文件过大，上限 {limit}",
+			bgUploadFail: "壁纸上传失败",
+			videoUploadFail: "视频上传失败，本次播放不会被保存",
+			strokeTitle: "文字描边",
+			strokeHint: "按区域为文字添加描边：粗细为 0 表示关闭，「自动」会生成与文字颜色相反的颜色，「主题色」跟随当前主题色。代码块与图标已自动豁免，多色语法不会糊成一团",
+			strokeWidth: "描边粗细",
+			strokeColor: "描边颜色",
+			strokeAuto: "自动反色",
+			strokeGray: "灰色",
+			strokeBlack: "黑色",
+			strokeWhite: "白色",
+			strokeTheme: "主题色",
+			strokeCustom: "自定义",
 			bgTitle: "背景",
 			bgChoose: "选择图片或视频",
 			bgRemove: "移除背景",
@@ -73,7 +103,7 @@ window.__ModuleLoader__.load({
 			liveBadge: "动态壁纸",
 			bgHint: "「适应」布局模式下悬停预览可编辑图片/视频的位置与缩放（其余布局模式按模式自动排布）；动态生成模式下可选择类型、预设与参数。绑定种子后刷新页面壁纸保持不变，取消绑定则每次刷新随机换新",
 			editorTitle: "背景编辑器",
-			editorHint: "拖动移动画面，滚轮缩放大小",
+			editorHint: "拖动移动画面，滚轮或双指缩放大小",
 			editorCommit: "确认",
 			editorCancel: "取消",
 			editorReset: "重置",
@@ -189,10 +219,12 @@ window.__ModuleLoader__.load({
 			close: "Close",
 			pageColor: "Color",
 			pageInterface: "Interface",
+			pageFont: "Font",
 			pageBackground: "Background",
 			pageProfile: "Profile",
 			descColor: "Drag the wheel or type exact values — the whole UI follows live",
 			descInterface: "Tune opacity and blur per surface to build depth",
+			descFont: "Swap the interface typeface with your own font file, and outline text per region so it stays legible over busy wallpapers",
 			descBackground: "Upload an image or a video as wallpaper and place it freely, or let the algorithm paint a live background",
 			descProfile: "Apply a one-click preset, save multiple named profiles, schedule a day/night switch, or export/import the full theme",
 			colorTitle: "Theme color",
@@ -211,6 +243,28 @@ window.__ModuleLoader__.load({
 			uiTrajectory: "Trajectory view",
 			uiPanelRegion: "better-sidebar workbench",
 			uiProduced: "Produced / highlights",
+			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",
+			fontUpload: "Upload font",
+			fontUploading: "Uploading…",
+			fontRemove: "Remove font",
+			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",
+			strokeColor: "Outline color",
+			strokeAuto: "Auto contrast",
+			strokeGray: "Gray",
+			strokeBlack: "Black",
+			strokeWhite: "White",
+			strokeTheme: "Accent",
+			strokeCustom: "Custom",
 			bgTitle: "Background",
 			bgChoose: "Choose image or video",
 			bgRemove: "Remove background",
@@ -238,7 +292,7 @@ window.__ModuleLoader__.load({
 			liveBadge: "Live wallpaper",
 			bgHint: "In Fit layout mode hover the preview to reposition and zoom the image/video (other modes arrange it automatically); in generated mode pick a type, preset and parameters. With the seed locked the wallpaper stays the same across refreshes; unlocked, every refresh randomizes it",
 			editorTitle: "Background editor",
-			editorHint: "Drag to move, scroll to zoom",
+			editorHint: "Drag to move; scroll or pinch with two fingers to zoom",
 			editorCommit: "Confirm",
 			editorCancel: "Cancel",
 			editorReset: "Reset",
@@ -353,25 +407,72 @@ window.__ModuleLoader__.load({
 		const DEFAULT_CONFIG = {
 			color: null,
 			opacities: {
-				bg: .85,
-				sidebar: .93,
-				card: 1,
-				input: 1
+				bg: .5,
+				sidebar: .5,
+				card: .5,
+				input: .5
 			},
 			blurs: {
-				bg: 0,
-				sidebar: 0,
-				card: 0,
-				settings: 0,
-				chat: 0,
-				trajectory: 0,
-				input: 0,
-				panel: 0,
-				produced: 0
+				bg: 30,
+				sidebar: 30,
+				card: 30,
+				settings: 30,
+				chat: 30,
+				trajectory: 30,
+				input: 30,
+				panel: 30,
+				produced: 30
+			},
+			strokes: {
+				bg: {
+					width: 0,
+					color: "auto",
+					customColor: "#808080"
+				},
+				sidebar: {
+					width: 0,
+					color: "auto",
+					customColor: "#808080"
+				},
+				card: {
+					width: 0,
+					color: "auto",
+					customColor: "#808080"
+				},
+				settings: {
+					width: 0,
+					color: "auto",
+					customColor: "#808080"
+				},
+				chat: {
+					width: 0,
+					color: "auto",
+					customColor: "#808080"
+				},
+				trajectory: {
+					width: 0,
+					color: "auto",
+					customColor: "#808080"
+				},
+				input: {
+					width: 0,
+					color: "auto",
+					customColor: "#808080"
+				},
+				panel: {
+					width: 0,
+					color: "auto",
+					customColor: "#808080"
+				},
+				produced: {
+					width: 0,
+					color: "auto",
+					customColor: "#808080"
+				}
 			},
-			settingsOpacity: 1,
+			settingsOpacity: .5,
 			wallpaperOpacity: 1,
-			blur: 0,
+			blur: 30,
 			bgState: {
 				zoom: 1,
 				x: 0,
@@ -389,12 +490,14 @@ window.__ModuleLoader__.load({
 			backgroundType: "image",
 			bgMode: "fit",
 			videoMime: null,
+			fontMime: null,
+			fontEnabled: true,
 			generatedBg: null,
 			regenerateOnReload: false,
-			chatTextOpacity: 0,
-			trajectoryOpacity: 1,
-			panelOpacity: 1,
-			producedOpacity: 1,
+			chatTextOpacity: .5,
+			trajectoryOpacity: .5,
+			panelOpacity: .5,
+			producedOpacity: .5,
 			profiles: [],
 			rotation: {
 				enabled: false,
@@ -420,6 +523,7 @@ window.__ModuleLoader__.load({
 			...DEFAULT_CONFIG,
 			opacities: { ...DEFAULT_CONFIG.opacities },
 			blurs: { ...DEFAULT_CONFIG.blurs },
+			strokes: structuredClone(DEFAULT_CONFIG.strokes),
 			bgState: { ...DEFAULT_CONFIG.bgState },
 			videoBgState: { ...DEFAULT_CONFIG.videoBgState }
 		};
@@ -540,6 +644,49 @@ window.__ModuleLoader__.load({
 			}
 			return out;
 		}
+		const STROKE_GROUPS = [
+			"bg",
+			"sidebar",
+			"card",
+			"settings",
+			"chat",
+			"trajectory",
+			"input",
+			"panel",
+			"produced"
+		];
+		const STROKE_COLOR_KEYS = [
+			"auto",
+			"gray",
+			"black",
+			"white",
+			"theme",
+			"custom"
+		];
+		const HEX_RE = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+		const DEFAULT_STROKE = {
+			width: 0,
+			color: "auto",
+			customColor: "#808080"
+		};
+		function adoptStroke(raw) {
+			const s = raw ?? {};
+			return {
+				width: typeof s.width === "number" && isFinite(s.width) ? Math.min(4, Math.max(0, s.width)) : DEFAULT_STROKE.width,
+				color: STROKE_COLOR_KEYS.includes(s.color) ? s.color : DEFAULT_STROKE.color,
+				customColor: typeof s.customColor === "string" && HEX_RE.test(s.customColor) ? s.customColor : DEFAULT_STROKE.customColor
+			};
+		}
+		/** Move a possibly-partial strokes map into the full shape the UI reads. */
+		function strokesFrom(raw) {
+			const s = raw ?? {};
+			const out = {};
+			for (const k of STROKE_GROUPS) out[k] = adoptStroke(s[k]);
+			return out;
+		}
+		function rStrokes() {
+			return strokesFrom(cfg.strokes);
+		}
 		function rWop() {
 			return clamp01(cfg.wallpaperOpacity, DEFAULT_CONFIG.wallpaperOpacity);
 		}
@@ -611,6 +758,7 @@ window.__ModuleLoader__.load({
 				color: cfg.color,
 				opacities: { ...rOps() },
 				blurs: { ...rBlurs() },
+				strokes: rStrokes(),
 				settingsOpacity: rSop(),
 				wallpaperOpacity: rWop(),
 				blur: rBl(),
@@ -631,6 +779,7 @@ window.__ModuleLoader__.load({
 				...DEFAULT_CONFIG.blurs,
 				...ap.blurs ?? {}
 			};
+			cfg.strokes = strokesFrom(ap.strokes);
 			cfg.settingsOpacity = clamp01(ap.settingsOpacity, DEFAULT_CONFIG.settingsOpacity);
 			cfg.wallpaperOpacity = clamp01(ap.wallpaperOpacity, DEFAULT_CONFIG.wallpaperOpacity);
 			cfg.blur = typeof ap.blur === "number" ? Math.min(60, Math.max(0, ap.blur)) : DEFAULT_CONFIG.blur;
@@ -664,6 +813,7 @@ window.__ModuleLoader__.load({
 							...DEFAULT_CONFIG.blurs,
 							...ac.blurs ?? {}
 						},
+						strokes: strokesFrom(ac.strokes),
 						settingsOpacity: clamp01(ac.settingsOpacity, DEFAULT_CONFIG.settingsOpacity),
 						wallpaperOpacity: clamp01(ac.wallpaperOpacity, DEFAULT_CONFIG.wallpaperOpacity),
 						blur: num(ac.blur, DEFAULT_CONFIG.blur),
@@ -761,6 +911,7 @@ window.__ModuleLoader__.load({
 					input: num(ops.input, DEFAULT_CONFIG.opacities.input)
 				},
 				blurs,
+				strokes: strokesFrom(c.strokes),
 				settingsOpacity: num(c.settingsOpacity, DEFAULT_CONFIG.settingsOpacity),
 				wallpaperOpacity: num(c.wallpaperOpacity, DEFAULT_CONFIG.wallpaperOpacity),
 				blur: num(c.blur, DEFAULT_CONFIG.blur),
@@ -769,6 +920,8 @@ window.__ModuleLoader__.load({
 				backgroundType: bgType,
 				bgMode,
 				videoMime: typeof c.videoMime === "string" ? c.videoMime : null,
+				fontMime: typeof c.fontMime === "string" ? c.fontMime : null,
+				fontEnabled: typeof c.fontEnabled === "boolean" ? c.fontEnabled : DEFAULT_CONFIG.fontEnabled,
 				generatedBg: generatedBg ? normalizeGeneratedBg(generatedBg) : null,
 				regenerateOnReload: typeof c.regenerateOnReload === "boolean" ? c.regenerateOnReload : DEFAULT_CONFIG.regenerateOnReload,
 				chatTextOpacity: clamp01(c.chatTextOpacity, DEFAULT_CONFIG.chatTextOpacity),
@@ -828,9 +981,15 @@ window.__ModuleLoader__.load({
 		const WALLPAPER_UPLOAD_URL = "/dsh-any-background/wallpaper/upload";
 		/** HTTP route new videos are POSTed to as raw bytes (see uploadVideo). */
 		const VIDEO_UPLOAD_URL = "/dsh-any-background/video/upload";
+		/** Same-origin serve URL of the persisted custom font (enough for @font-face). */
+		const FONT_SERVE_URL = "/dsh-any-background/font";
+		/** HTTP route custom fonts are POSTed to as raw bytes (see uploadFont). */
+		const FONT_UPLOAD_URL = "/dsh-any-background/font/upload";
 		const RPC_NS = "dshAnyBackground";
 		const rpcEndpoint = (method) => `${RPC_NS}/${method}`;
 		let rpcCallFn = null;
+		/** Serve URL of the persisted custom font, filled by loadPersisted. */
+		let fontServeUrl = null;
 		function initRpc(call) {
 			rpcCallFn = call;
 		}
@@ -868,7 +1027,10 @@ window.__ModuleLoader__.load({
 		/** Load the persisted theme (config + wallpaper URL + video URL) from the node
 		*  half. Image and video both travel as serve URLs — never bytes — so this RPC
 		*  stays tiny. Resolves true when the server advanced a due wallpaper rotation
-		*  during the read — the restored wallpaper is then already the new pick. */
+		*  during the read — the restored wallpaper is then already the new pick.
+		*  `firstRun` means the server had no theme-config.json and just materialized
+		*  its defaults: the caller should persist the browser side's own defaults and
+		*  re-read once so every slider starts from a value that is really on disk. */
 		async function loadPersisted() {
 			const data = await rpcCall("read", {});
 			if (data && typeof data === "object") {
@@ -878,10 +1040,18 @@ window.__ModuleLoader__.load({
 				else if (d.wallpaperUrl === null) setWpImageUrl(null);
 				if (typeof d.videoUrl === "string") setWpVideoUrl(d.videoUrl, cfg.videoMime);
 				else if (d.videoUrl === null) setWpVideoUrl(null, null);
+				if (typeof d.fontUrl === "string") fontServeUrl = d.fontUrl;
+				else if (d.fontUrl === null) fontServeUrl = null;
 				if (cfg.backgroundType === "image") setWpUrl(rWpImage());
-				return d.rotated === true;
+				return {
+					rotated: d.rotated === true,
+					firstRun: d.firstRun === true
+				};
 			}
-			return false;
+			return {
+				rotated: false,
+				firstRun: false
+			};
 		}
 		/** Persist a wallpaper (null removes it); one-shot, no debounce. */
 		function persistWallpaper(dataUrl) {
@@ -959,34 +1129,96 @@ 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, 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, {
+					method: "POST",
+					headers: { "Content-Type": blob.type || "application/octet-stream" },
+					body: blob
+				});
+				if (!res.ok) return await refusedUpload(res);
+				const data = await res.json().catch(() => null);
+				return {
+					ok: true,
+					mime: typeof data?.mime === "string" ? data.mime : "font/ttf"
+				};
+			} catch (e) {
+				console.warn("dsh-any-background: font upload failed", e);
+				return { ok: false };
+			}
+		}
+		/** Remove the stored custom font (server deletes every variant + clears the
+		*  recorded MIME); resolves true once the slot is empty. */
+		async function removeFont() {
+			return await rpcCall("removeFont", {}) === true;
+		}
 		/** Add an image (data URL + small thumbnail) to the server-side rotation pool. */
 		async function rotationAdd(dataUrl, thumb) {
 			if (!rpcCallFn) return {
@@ -1160,6 +1392,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;
 		/**
@@ -2303,9 +2541,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;
@@ -2400,14 +2644,34 @@ window.__ModuleLoader__.load({
 			if (rSchemeOverride() !== "auto") return genTokens(220, .04, scheme === "dark" ? .14 : .92, scheme).tokens;
 			return null;
 		}
+		/** Surface colors the opacity sliders fade when the plugin has NO palette of
+		*  its own (no picked color, no forced scheme), read live from the host's
+		*  resolved tokens on `:root` — the same trick applyPanelOverrides uses for the
+		*  workbench panel. Without this source the per-part alpha is never emitted at
+		*  all and every opacity slider looks inert until the user drags it once.
+		*  The sliders only ever supply the alpha: the host still decides the colors,
+		*  so a custom host skin survives. Returns null when the host exposes none. */
+		function readHostOpacityTokens() {
+			if (typeof getComputedStyle === "undefined") return null;
+			const cs = getComputedStyle(document.documentElement);
+			const out = {};
+			let found = false;
+			for (const g of OPACITY_TOKEN_GROUPS) for (const name of g.names) {
+				const v = cs.getPropertyValue(name).trim();
+				if (v === "") continue;
+				out[name] = v;
+				found = true;
+			}
+			return found ? out : null;
+		}
 		function applyCustomTokensNow(ops) {
 			const hasColor = rHasColor();
 			const override = rSchemeOverride();
 			const [h, s, l] = rColor();
 			const scheme = rScheme();
 			const verdict = rBgDark();
-			const palette = paletteTokens();
-			const tokens = { ...palette };
+			const surfaces = paletteTokens() ?? readHostOpacityTokens();
+			const tokens = { ...surfaces };
 			if (override === "auto") {
 				const fontDark = hasColor ? rColorScheme() === "dark" : verdict;
 				if (fontDark !== null && fontDark !== void 0) {
@@ -2431,10 +2695,17 @@ window.__ModuleLoader__.load({
 					for (const name of appliedTokenNames) document.body.style.removeProperty(name);
 					appliedTokenNames = Object.keys(tokens);
 				}
-				if (palette === null) return;
+				if (surfaces === null) {
+					if (!hasColor && override === "auto" && verdict === null) clearThemeTokens();
+					return;
+				}
 				const root = document.documentElement;
-				for (const g of OPACITY_TOKEN_GROUPS) for (const name of g.names) root.style.setProperty(OPACITY_VARS[name], toRgba(tokens[name] ?? "#000", ops[g.part]));
-				root.style.setProperty("--dsh-any-op-menu-cordis", toRgba(tokens["--dsw-specific-menu"] ?? "#000", ops.input));
+				for (const g of OPACITY_TOKEN_GROUPS) for (const name of g.names) {
+					if (surfaces[name] === void 0) continue;
+					root.style.setProperty(OPACITY_VARS[name], toRgba(surfaces[name], ops[g.part]));
+				}
+				const menu = surfaces["--dsw-specific-menu"];
+				if (menu !== void 0) root.style.setProperty("--dsh-any-op-menu-cordis", toRgba(menu, ops.input));
 				const bgKey = `${baseTokenKey}|${ops.bg}`;
 				if (bgKey !== lastBgKey) {
 					lastBgKey = bgKey;
@@ -2461,6 +2732,149 @@ window.__ModuleLoader__.load({
 		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 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-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}`,
+			`svg{-webkit-text-stroke-width:0!important;paint-order:normal!important}`,
+			`::placeholder{-webkit-text-stroke-width:0!important}`
+		].join("");
+		/** Groups whose stroke lands on the structurally-discovered columns (inline),
+		*  versus every group served by the static STROKE_RULE selectors. */
+		const STROKE_INLINE_GROUPS = ["bg", "sidebar"];
+		const STROKE_VAR_GROUPS = [
+			"card",
+			"settings",
+			"chat",
+			"trajectory",
+			"input",
+			"panel",
+			"produced"
+		];
+		/** Resolve one group's stroke color key into a concrete CSS color.
+		*  'auto' contrasts the FONT direction (white fonts → black stroke and vice
+		*  versa — mirrors the label flip in applyCustomTokensNow); 'theme' follows
+		*  the live palette's brand primary (picked color → generated palette, else
+		*  the host's own resolved token). */
+		function strokeColor(s) {
+			switch (s.color) {
+				case "gray": return "#808080";
+				case "black": return "#000";
+				case "white": return "#fff";
+				case "custom": return s.customColor;
+				case "theme":
+					if (rHasColor() || rSchemeOverride() !== "auto") {
+						const [h, sa, l] = rColor();
+						return genTokens(h, sa, l, rColorScheme()).tokens["--dsw-alias-brand-primary"] ?? "#808080";
+					}
+					if (typeof getComputedStyle !== "undefined") {
+						const v = getComputedStyle(document.documentElement).getPropertyValue("--dsw-alias-brand-primary").trim();
+						if (v !== "") return v;
+					}
+					return "#808080";
+				default: {
+					let fontDark;
+					if (rHasColor()) fontDark = rColorScheme() === "dark";
+					else if (rSchemeOverride() !== "auto") fontDark = rScheme() === "dark";
+					else if (rBgDark() !== null) fontDark = rBgDark() === true;
+					else fontDark = false;
+					return fontDark ? "#000" : "#fff";
+				}
+			}
+		}
+		/** 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;
+			for (const g of STROKE_VAR_GROUPS) {
+				const s = strokes[g];
+				root.style.setProperty(`--dsh-any-stroke-${g}-w`, `${s.width}px`);
+				root.style.setProperty(`--dsh-any-stroke-${g}-c`, strokeColor(s));
+			}
+			discoverParts();
+			for (const g of STROKE_INLINE_GROUPS) {
+				const el = g === "bg" ? centerEl : sidebarEl;
+				if (el !== null) applyInlineStroke(el, strokes[g]);
+			}
+		}
+		/** Live per-group stroke update during slider drag (no full re-apply). */
+		function setPartStroke(part, s) {
+			if (STROKE_VAR_GROUPS.includes(part)) {
+				document.documentElement.style.setProperty(`--dsh-any-stroke-${part}-w`, `${s.width}px`);
+				document.documentElement.style.setProperty(`--dsh-any-stroke-${part}-c`, strokeColor(s));
+				return;
+			}
+			discoverParts();
+			const el = part === "bg" ? centerEl : sidebarEl;
+			if (el === null) return;
+			applyInlineStroke(el, s);
+		}
+		/** Teardown only: drop every stroke variable and column inline stroke. */
+		function removeStrokes() {
+			const root = document.documentElement;
+			for (const g of [...STROKE_VAR_GROUPS, ...STROKE_INLINE_GROUPS]) {
+				root.style.removeProperty(`--dsh-any-stroke-${g}-w`);
+				root.style.removeProperty(`--dsh-any-stroke-${g}-c`);
+			}
+			for (const el of [centerEl, sidebarEl]) {
+				if (el === null) continue;
+				el.style.removeProperty("-webkit-text-stroke");
+				el.style.removeProperty("paint-order");
+			}
+		}
+		const FONT_FAMILY = "DAnyFont";
+		let fontStyleEl = null;
+		function fontFormatForMime(mime) {
+			switch (mime) {
+				case "font/woff2": return "woff2";
+				case "font/woff": return "woff";
+				case "font/otf": return "opentype";
+				default: return "truetype";
+			}
+		}
+		/** Apply or clear the custom interface font. `url` is the serve URL (null =
+		*  nothing stored); `enabled` gates the token override without deleting the
+		*  file. The original host stack is re-read on every apply so a host skin
+		*  change is picked up, and stays as the fallback after 'DAnyFont'. */
+		function applyFontFace(url, enabled, mime) {
+			if (url === null || !enabled) {
+				fontStyleEl?.remove();
+				fontStyleEl = null;
+				return;
+			}
+			if (fontStyleEl === null || !fontStyleEl.isConnected) {
+				fontStyleEl = document.createElement("style");
+				fontStyleEl.dataset.plugin = "dsh-any-background-font";
+				document.head.appendChild(fontStyleEl);
+			}
+			let stack = "";
+			if (typeof getComputedStyle !== "undefined") stack = getComputedStyle(document.documentElement).getPropertyValue("--dsw-font-family").trim();
+			if (stack === "") stack = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif";
+			const fmt = fontFormatForMime(mime);
+			fontStyleEl.textContent = `@font-face{font-family:'${FONT_FAMILY}';src:url('${url}') format('${fmt}');font-display:swap}body{--dsw-font-family:'${FONT_FAMILY}',${stack}}input,textarea,select,button{font-family:var(--dsw-font-family)}`;
+		}
+		/** Teardown only: drop the @font-face + token override. */
+		function removeFontFace() {
+			fontStyleEl?.remove();
+			fontStyleEl = null;
+		}
 		/** The host's own default colors for the panel layer tokens, used when the
 		*  plugin has no palette (no picked color, no wallpaper verdict, no forced
 		*  scheme). Without these the panel's re-scope would resolve to invalid vars
@@ -2515,27 +2929,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
@@ -2544,6 +2966,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. */
@@ -2559,8 +2984,8 @@ window.__ModuleLoader__.load({
 					if (hsl && rWp() === url) {
 						cfg.color = hsl;
 						colorAdoptedListener?.(hsl);
+						applyWp();
 					}
-					applyWp();
 				});
 			} else applyWp();
 		}
@@ -2592,7 +3017,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()
@@ -2615,9 +3040,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?.();
@@ -2644,35 +3070,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();
@@ -2806,6 +3233,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";
@@ -2850,6 +3305,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);
@@ -2888,6 +3344,7 @@ window.__ModuleLoader__.load({
 			const ds = el.dataset;
 			ds[prev + "Bg"] = el.style.getPropertyValue("background");
 			if (plain) return;
+			ds[prev + "BoxSizing"] = el.style.getPropertyValue("box-sizing");
 			ds[prev + "Border"] = el.style.getPropertyValue("border");
 			ds[prev + "Radius"] = el.style.getPropertyValue("border-radius");
 			ds[prev + "Padding"] = el.style.getPropertyValue("padding");
@@ -2902,9 +3359,11 @@ window.__ModuleLoader__.load({
 			};
 			restore("background", ds[prev + "Bg"]);
 			if (!plain) {
+				restore("box-sizing", ds[prev + "BoxSizing"]);
 				restore("border", ds[prev + "Border"]);
 				restore("border-radius", ds[prev + "Radius"]);
 				restore("padding", ds[prev + "Padding"]);
+				delete ds[prev + "BoxSizing"];
 				delete ds[prev + "Border"];
 				delete ds[prev + "Radius"];
 				delete ds[prev + "Padding"];
@@ -2974,6 +3433,7 @@ window.__ModuleLoader__.load({
 					target.style.border = surface !== void 0 ? `1px solid ${toRgba(surface, borderAlpha)}` : "1px solid transparent";
 					target.style.borderRadius = "16px";
 					target.style.padding = "18px";
+					target.style.boxSizing = "border-box";
 				}
 				target.setAttribute(spec.mark, "1");
 				setBlur(target, blurPx);
@@ -2981,15 +3441,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,
@@ -2999,6 +3492,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;
@@ -3151,6 +3651,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;
@@ -3278,6 +3781,8 @@ window.__ModuleLoader__.load({
 					clearVideoEl();
 					wpEl?.remove();
 					wpEl = null;
+					wpVerdict = null;
+					setBgDark(null);
 				}
 			} else if (cfg.backgroundType !== "image" && cfg.generatedBg) {
 				clearVideoEl();
@@ -3297,14 +3802,14 @@ window.__ModuleLoader__.load({
 				wpVerdict = null;
 				setBgDark(null);
 			}
-			if (rHasColor() || rBgDark() !== null || rSchemeOverride() !== "auto") applyCustomTokens(rOps());
-			else if (!url) clearThemeTokens();
+			applyCustomTokens(rOps());
 			if (rHasColor()) {
 				applySettingsOverrides(rSop());
 				applyTrajectoryOverrides(rTrajectoryOpacity());
 			}
 			applyPanelOverrides(rPanelOpacity());
 			applyPartBlurs(rBlurs());
+			applyStrokes();
 		}
 		function teardownWp() {
 			clearDynamicBg();
@@ -3349,6 +3854,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);
@@ -3484,7 +3997,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 ────────────────────────────────────────────────── */
@@ -3538,7 +4054,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}
@@ -3556,6 +4072,29 @@ window.__ModuleLoader__.load({
 .dab-toggle.is-on{background:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary)}
 .dab-toggle.is-on .dab-toggle-knob{transform:translateX(18px);background:#fff}
 
+/* ── custom font card ────────────────────────────────────────────────────── */
+.dab-font-title{display:flex;align-items:center;gap:11px}
+.dab-font-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
+.dab-font-name{font-family:var(--dab-mono);font-size:13.5px;color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary));background:var(--dsw-alias-bg-layer-2);border-radius:99px;padding:5px 11px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dab-font-name.is-empty{color:var(--dsw-alias-label-tertiary)}
+.dab-font-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
+/* The font card's labels read one step larger than the rest of the panel —
+   they carry most of the explanation on this page. Scoped to the card so the
+   same .dab-hint / .dab-btn elsewhere keep their size. */
+.dab-font-actions .dab-btn{font-size:14.5px}
+.dab-font-card .dab-hint{font-size:13.5px}
+
+/* ── text-stroke color dots ──────────────────────────────────────────────── */
+.dab-stroke-dots{display:flex;align-items:center;gap:9px;margin-top:14px}
+.dab-stroke-dot-wrap{position:relative;width:18px;height:18px;flex:none}
+.dab-stroke-dot{width:18px;height:18px;padding:0;border-radius:50%;border:1.5px solid var(--dsw-alias-border-l2);background-clip:padding-box;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}
+.dab-stroke-dot:hover{transform:scale(1.16)}
+/* 'auto' has no fixed value — half light / half dark reads as "derived". */
+.dab-stroke-dot-auto{background:conic-gradient(from -90deg,#fff 0 50%,#000 50% 100%)}
+.dab-stroke-dot.is-active{box-shadow:0 0 0 2px var(--dsw-alias-bg-layer-1),0 0 0 3.5px var(--dsw-alias-brand-primary);border-color:transparent}
+/* The native color picker sits invisible on top of the custom swatch. */
+.dab-stroke-dot-input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:50%;background:none;opacity:0;cursor:pointer}
+
 /* ── background preview hero ─────────────────────────────────────────────── */
 .dab-hero{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:var(--dsw-alias-bg-layer-2);border:1px solid var(--dsw-alias-border-l2)}
 .dab-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
@@ -3592,7 +4131,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}
@@ -3601,7 +4140,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)}
@@ -3628,7 +4167,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))}
@@ -3664,6 +4203,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}}
@@ -3679,6 +4221,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}
@@ -3693,6 +4301,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}
 }
@@ -3985,6 +4617,12 @@ window.__ModuleLoader__.load({
 			className,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" })
 		});
+		/** Letterform glyph: a stroked capital A (the font/type page + nav entry). */
+		const FontIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
+			size,
+			className,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M4 12.2 8 3.8l4 8.4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.6 9.6h4.8" })]
+		});
 		const PlayIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {
 			size,
 			className,
@@ -4017,25 +4655,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;
 			}
 		};
@@ -4184,6 +4829,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;
@@ -4225,13 +4874,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,
@@ -4280,6 +4941,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));
 					}
@@ -4396,9 +5058,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
@@ -4428,7 +5087,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;
@@ -4543,14 +5202,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", {
@@ -4633,9 +5292,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);
@@ -4650,7 +5306,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
@@ -4780,7 +5436,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);
 						})
@@ -4855,15 +5511,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
 			]);
@@ -4975,7 +5632,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/components/pages/InterfacePage.tsx
-		const PARTS = [
+		const PARTS$1 = [
 			{
 				opKey: "bg",
 				labelKey: "uiOpacityBg",
@@ -5023,9 +5680,10 @@ 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.filter((part) => !(part.isPanel && !hasBetterSidebar));
+			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 },
@@ -5152,10 +5810,336 @@ window.__ModuleLoader__.load({
 			})] });
 		}
 		//#endregion
+		//#region src/client/components/pages/FontPage.tsx
+		const PARTS = [
+			{
+				key: "bg",
+				labelKey: "uiOpacityBg",
+				Icon: CanvasIcon
+			},
+			{
+				key: "sidebar",
+				labelKey: "uiOpacitySide",
+				Icon: SidebarIcon
+			},
+			{
+				key: "card",
+				labelKey: "uiOpacityCard",
+				Icon: ChatIcon
+			},
+			{
+				key: "input",
+				labelKey: "uiOpacityInput",
+				Icon: InputIcon
+			},
+			{
+				key: "settings",
+				labelKey: "uiSop",
+				Icon: GearIcon
+			},
+			{
+				key: "chat",
+				labelKey: "uiChatRegion",
+				Icon: TextIcon
+			},
+			{
+				key: "trajectory",
+				labelKey: "uiTrajectory",
+				Icon: TrajectoryIcon
+			},
+			{
+				key: "produced",
+				labelKey: "uiProduced",
+				Icon: TextIcon
+			},
+			{
+				key: "panel",
+				labelKey: "uiPanelRegion",
+				Icon: PanelIcon,
+				needsSidebar: true
+			}
+		];
+		const COLOR_KEYS = [
+			"auto",
+			"gray",
+			"black",
+			"white",
+			"theme",
+			"custom"
+		];
+		const COLOR_LABEL_KEYS = {
+			auto: "strokeAuto",
+			gray: "strokeGray",
+			black: "strokeBlack",
+			white: "strokeWhite",
+			theme: "strokeTheme",
+			custom: "strokeCustom"
+		};
+		/** Swatch fill for one preset key. 'auto' gets its half-black/half-white
+		*  conic gradient from CSS, and 'custom' shows the stored hex. */
+		function dotStyle(key, s) {
+			switch (key) {
+				case "gray": return { background: "#808080" };
+				case "black": return { background: "#000" };
+				case "white": return { background: "#fff" };
+				case "theme": return { background: "var(--dsw-alias-brand-primary)" };
+				case "custom": return { background: s.customColor };
+				default: return {};
+			}
+		}
+		function FontPage({ p, notify }) {
+			const { t, setFont, removeFont, setFontEnabled, setStrokes, useStore } = p;
+			const hasBetterSidebar = useBetterSidebar();
+			const fileRef = (0, react.useRef)(null);
+			const [strokes, setStrokesState] = (0, react.useState)(() => rStrokes());
+			const [fontInfo, setFontInfo] = (0, react.useState)(() => ({
+				mime: cfg.fontMime,
+				enabled: cfg.fontEnabled,
+				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`
+			*  marks slider drags (debounced save, no full re-apply). */
+			const patch = (key, next, live) => {
+				const map = {
+					...strokes,
+					[key]: {
+						...strokes[key],
+						...next
+					}
+				};
+				setStrokesState(map);
+				cfg.strokes = map;
+				setPartStroke(key, map[key]);
+				if (live) saveConfig();
+				else setStrokes(map);
+			};
+			const pickFont = async (file) => {
+				setBusy(true);
+				setFontInfo({
+					...fontInfo,
+					name: file.name
+				});
+				const outcome = await setFont(file);
+				setBusy(false);
+				if (outcome.ok) setFontInfo({
+					mime: cfg.fontMime,
+					enabled: cfg.fontEnabled,
+					name: file.name
+				});
+				else {
+					setFontInfo({
+						mime: cfg.fontMime,
+						enabled: cfg.fontEnabled,
+						name: null
+					});
+					notify(uploadRefusalText(outcome, t, "fontFail"), false);
+				}
+			};
+			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 },
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-overline",
+							children: "Typography"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+							className: "dab-h1",
+							children: t("fontPageTitle")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-desc",
+							children: t("descFont")
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "dab-card dab-rise dab-font-card",
+					style: { "--d": 1 },
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-row-head",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dab-font-title",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-part-ico",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextIcon, { size: 16 })
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "dab-part-name",
+									children: t("fontTitle")
+								})]
+							}), hasFont ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: `dab-toggle${fontInfo.enabled ? " is-on" : ""}`,
+								role: "switch",
+								"aria-checked": fontInfo.enabled,
+								"aria-label": t("fontEnabled"),
+								onClick: () => {
+									const v = !fontInfo.enabled;
+									setFontEnabled(v);
+									setFontInfo({
+										...fontInfo,
+										enabled: v
+									});
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "dab-toggle-knob" })
+							}) : null]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-font-row",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `dab-font-name${hasFont ? "" : " is-empty"}`,
+								title: fontLabel,
+								children: fontLabel
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "dab-font-actions",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dab-btn dab-btn-primary",
+									disabled: busy,
+									onClick: () => fileRef.current?.click(),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 14 }), busy ? t("fontUploading") : t("fontUpload")]
+								}), hasFont ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dab-btn dab-btn-danger",
+									onClick: () => {
+										removeFont();
+										setFontInfo({
+											mime: null,
+											enabled: cfg.fontEnabled,
+											name: null
+										});
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 14 }), t("fontRemove")]
+								}) : null]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginTop: 10 },
+							children: t("fontHint")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref: fileRef,
+							type: "file",
+							accept: ".ttf,.otf,.woff,.woff2,font/*",
+							style: { display: "none" },
+							onChange: (e) => {
+								const f = e.target.files?.[0];
+								e.target.value = "";
+								if (f) pickFont(f);
+							}
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "dab-card dab-rise",
+					style: { "--d": 2 },
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-part-head",
+							style: { marginBottom: 10 },
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-part-name",
+								children: t("strokeTitle")
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-hint",
+							style: { marginBottom: 14 },
+							children: t("strokeHint")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "dab-grid-parts",
+							children: PARTS.filter((part) => !(part.needsSidebar && !hasBetterSidebar)).map((part, i) => {
+								const s = strokes[part.key];
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+									className: "dab-card dab-card-hover dab-rise",
+									style: { "--d": i + 3 },
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+											className: "dab-part-head",
+											children: [
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: "dab-part-ico",
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(part.Icon, { size: 16 })
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+													className: "dab-part-name",
+													children: t(part.labelKey)
+												}),
+												/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+													className: "dab-part-badge",
+													children: [s.width, "px"]
+												})
+											]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LiveSlider, {
+											label: t("strokeWidth"),
+											min: 0,
+											max: 4,
+											step: .5,
+											def: s.width,
+											fmt: (v) => `${v}px`,
+											onInput: (v) => patch(part.key, { width: v }, true),
+											onChange: (v) => patch(part.key, { width: v }, false)
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "dab-stroke-dots",
+											children: COLOR_KEYS.map((key) => {
+												const active = s.color === key;
+												return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													className: "dab-stroke-dot-wrap",
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+														type: "button",
+														className: `dab-stroke-dot${key === "auto" ? " dab-stroke-dot-auto" : ""}${active ? " is-active" : ""}`,
+														style: dotStyle(key, s),
+														title: t(COLOR_LABEL_KEYS[key]),
+														"aria-label": t(COLOR_LABEL_KEYS[key]),
+														"aria-pressed": active,
+														onClick: () => patch(part.key, { color: key }, false)
+													}), key === "custom" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+														type: "color",
+														className: "dab-stroke-dot-input",
+														value: s.customColor,
+														"aria-label": t("strokeCustom"),
+														onChange: (e) => patch(part.key, {
+															color: "custom",
+															customColor: e.target.value
+														}, false)
+													}) : null]
+												}, key);
+											})
+										})
+									]
+								}, part.key);
+							})
+						})
+					]
+				})
+			] });
+		}
+		//#endregion
 		//#region src/client/components/BgEditor.tsx
 		/** Placement slot for the active background type: video framing lives in its
 		*  own state so image and video edits never overwrite each other. */
 		const activeState = () => cfg.backgroundType === "video" ? cfg.videoBgState : cfg.bgState;
+		/** Zoom is shared by every input path (wheel + pinch) so all pictures animate
+		*  between the same bounds. */
+		const clampZoom = (z) => Math.max(.1, Math.min(10, z));
 		function BgEditor({ url, t, onClose, onCommit }) {
 			const pw = Math.min(window.innerWidth * .75, 860);
 			const ph = Math.round(pw * window.innerHeight / window.innerWidth);
@@ -5174,6 +6158,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,
@@ -5181,6 +6178,29 @@ 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
+			});
+			viewRef.current = {
+				zoom,
+				pos
+			};
+			/** Pinch gesture baseline (two fingers down): finger spread + midpoint and
+			*  the transform that was live at that moment. */
+			const pinchRef = (0, react.useRef)(null);
+			/** Single-finger pan baseline. */
+			const touchDragRef = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
 				const img = new Image();
 				img.onload = () => {
@@ -5213,6 +6233,7 @@ window.__ModuleLoader__.load({
 			]);
 			const onDown = (0, react.useCallback)((e) => {
 				e.preventDefault();
+				movedRef.current = false;
 				dragRef.current = {
 					active: true,
 					sx: e.clientX,
@@ -5222,41 +6243,151 @@ 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 = Math.max(.1, Math.min(10, 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]);
+			}, []);
+			const onTouchStartCb = (0, react.useCallback)((e) => {
+				const card = containerRef.current;
+				if (!card) return;
+				movedRef.current = false;
+				if (e.touches.length >= 2) {
+					touchDragRef.current = null;
+					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),
+						zoom: viewRef.current.zoom,
+						cx: (a.clientX + b.clientX) / 2 - rect.left,
+						cy: (a.clientY + b.clientY) / 2 - rect.top,
+						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 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 = 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;
+					const cy = (a.clientY + b.clientY) / 2 - rect.top;
+					const nz = clampZoom(p.zoom * (dist / p.dist));
+					setZoom(nz);
+					setPos({
+						x: cx - (p.cx - p.px) / p.zoom * nz,
+						y: cy - (p.cy - p.py) / p.zoom * nz
+					});
+					return;
+				}
+				if (e.touches.length === 1 && touchDragRef.current !== null) {
+					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
+					});
+				}
+			}, []);
+			const onTouchEndCb = (0, react.useCallback)((e) => {
+				if (e.touches.length === 1) {
+					const tp = e.touches[0];
+					touchDragRef.current = {
+						sx: tp.clientX,
+						sy: tp.clientY,
+						spx: viewRef.current.pos.x,
+						spy: viewRef.current.pos.y
+					};
+					pinchRef.current = null;
+				} else if (e.touches.length === 0) {
+					touchDragRef.current = null;
+					pinchRef.current = null;
+				}
+			}, []);
 			(0, react.useEffect)(() => {
-				const el = containerRef.current;
-				if (!el) return;
-				el.addEventListener("wheel", onWheelCb, { passive: false });
-				return () => el.removeEventListener("wheel", onWheelCb);
-			}, [onWheelCb]);
+				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 () => {
+					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
+			]);
 			const resetView = (0, react.useCallback)(() => {
 				if (imgSize.w === 0) return;
 				setZoom(1);
@@ -5270,10 +6401,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",
@@ -5290,7 +6433,10 @@ window.__ModuleLoader__.load({
 							background: "#000",
 							cursor: "grab",
 							width: pw,
-							height: ph
+							height: ph,
+							touchAction: "none",
+							WebkitUserSelect: "none",
+							userSelect: "none"
 						},
 						onMouseDown: onDown,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
@@ -5366,7 +6512,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);
@@ -5383,7 +6529,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;
@@ -5397,14 +6547,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();
@@ -6075,6 +7226,27 @@ window.__ModuleLoader__.load({
 			panel: 0,
 			produced: 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
+		*  stroke config (applyAppearance copies, but mutation-proofing is free). */
+		const zeroStrokes = () => {
+			const off = () => ({
+				width: 0,
+				color: "auto",
+				customColor: "#808080"
+			});
+			return {
+				bg: off(),
+				sidebar: off(),
+				card: off(),
+				settings: off(),
+				chat: off(),
+				trajectory: off(),
+				input: off(),
+				panel: off(),
+				produced: off()
+			};
+		};
 		const BUILTIN_PRESETS = [
 			{
 				key: "default",
@@ -6087,6 +7259,7 @@ window.__ModuleLoader__.load({
 						input: 1
 					},
 					blurs: { ...zeroBlurs },
+					strokes: zeroStrokes(),
 					settingsOpacity: 1,
 					wallpaperOpacity: 1,
 					blur: 0,
@@ -6120,6 +7293,7 @@ window.__ModuleLoader__.load({
 						input: 14,
 						panel: 12
 					},
+					strokes: zeroStrokes(),
 					settingsOpacity: .88,
 					wallpaperOpacity: 1,
 					blur: 0,
@@ -6140,6 +7314,7 @@ window.__ModuleLoader__.load({
 						input: 1
 					},
 					blurs: { ...zeroBlurs },
+					strokes: zeroStrokes(),
 					settingsOpacity: 1,
 					wallpaperOpacity: 1,
 					blur: 0,
@@ -6173,6 +7348,7 @@ window.__ModuleLoader__.load({
 						input: 16,
 						panel: 16
 					},
+					strokes: zeroStrokes(),
 					settingsOpacity: .85,
 					wallpaperOpacity: .92,
 					blur: 2,
@@ -6206,6 +7382,7 @@ window.__ModuleLoader__.load({
 						input: 20,
 						panel: 18
 					},
+					strokes: zeroStrokes(),
 					settingsOpacity: .8,
 					wallpaperOpacity: 1,
 					blur: 0,
@@ -6230,6 +7407,7 @@ window.__ModuleLoader__.load({
 						input: 1
 					},
 					blurs: { ...zeroBlurs },
+					strokes: zeroStrokes(),
 					settingsOpacity: 1,
 					wallpaperOpacity: 1,
 					blur: 0,
@@ -6651,31 +7829,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,
@@ -6689,10 +7873,21 @@ window.__ModuleLoader__.load({
 					Icon: LayersIcon,
 					node: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InterfacePage, { p: props })
 				},
+				{
+					label: t("pageFont"),
+					Icon: FontIcon,
+					node: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FontPage, {
+						p: props,
+						notify
+					})
+				},
 				{
 					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"),
@@ -6702,16 +7897,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",
@@ -6751,6 +7951,138 @@ 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);
+		}
+		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 face = opts.face();
+				scope.effect(() => 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
+					})
+				}));
+			});
+		}
+		//#endregion
 		//#region src/client/index.tsx
 		/**
 		* dsh-any-background — browser half entry.
@@ -6771,6 +8103,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 {
@@ -6803,30 +8136,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}[data-composer-card] textarea::placeholder,[data-composer-card] input::placeholder,[data-composer-card] [contenteditable]::placeholder,[data-cordis-panel] input::placeholder,[data-cordis-panel] textarea::placeholder,.dab-input::placeholder,.dab-input textarea::placeholder,.dab-input input::placeholder{color:var(--dsh-any-placeholder,var(--dsw-alias-label-caption,#8a8f98))!important;font-style:italic;opacity:.85}`;
+			styleEl.textContent = `body[data-ds-dark-theme="dsh-any-background"]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,0.03) 0%,transparent 60%)}${SETTINGS_STYLE_RULE}${POPOVER_BLUR_RULE}${TRAJECTORY_STYLE_RULE}${INPUT_BLUR_RULE}${MOBILE_HEADER_RULE}${PANEL_TOKEN_RULE}${PANEL_BLUR_RULE}${PRODUCED_RULE}${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}`;
 			document.head.appendChild(styleEl);
 			ctx.effect(() => () => {
 				styleEl?.parentNode?.removeChild(styleEl);
@@ -6837,7 +8194,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,
@@ -6888,13 +8245,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++;
@@ -7015,15 +8403,21 @@ 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);
 			};
 			applyWp();
 			syncBg();
 			watchParts();
-			loadPersisted().then(async (serverRotated) => {
+			loadPersisted().then(async ({ rotated: serverRotated, firstRun }) => {
+				if (firstRun) {
+					persistConfig();
+					await loadPersisted();
+					applyWp();
+				}
 				syncMetaNow();
+				applyFontFace(fontServeUrl, cfg.fontEnabled, cfg.fontMime);
 				if (rHasColor()) {
 					const [h, s, l] = rColor();
 					registerCustom(h, s, l);
@@ -7037,12 +8431,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";
@@ -7092,19 +8481,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) => {
@@ -7115,20 +8510,37 @@ 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 = {
+					woff2: "font/woff2",
+					woff: "font/woff",
+					otf: "font/otf",
+					ttf: "font/ttf"
+				};
+				const fontMimeFromName = (name) => {
+					const ext = name.split(".").pop()?.toLowerCase() ?? "";
+					return FONT_EXT_MIME[ext] ?? "font/ttf";
+				};
+				let fontPreviewUrl = null;
+				const releaseFontPreview = (delay) => {
+					if (fontPreviewUrl === null) return;
+					const url = fontPreviewUrl;
+					fontPreviewUrl = null;
+					window.setTimeout(() => URL.revokeObjectURL(url), delay);
+				};
+				/** Point the @font-face at whatever is authoritative right now: the
+				*  persisted slot when one exists, otherwise nothing. */
+				const applyStoredFont = () => {
+					applyFontFace(cfg.fontMime !== null ? FONT_SERVE_URL : null, cfg.fontEnabled, cfg.fontMime);
+				};
 				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,
@@ -7178,13 +8590,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 };
@@ -7192,13 +8602,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);
@@ -7232,6 +8637,44 @@ window.__ModuleLoader__.load({
 						syncBg();
 						saveConfig();
 					},
+					setStrokes: (strokes) => {
+						cfg.strokes = strokes;
+						applyStrokes();
+						saveConfig();
+					},
+					setFont: async (file) => {
+						releaseFontPreview(0);
+						const localUrl = URL.createObjectURL(file);
+						fontPreviewUrl = localUrl;
+						applyFontFace(localUrl, true, fontMimeFromName(file.name));
+						const outcome = await uploadFont(file);
+						if (!outcome.ok || outcome.mime === void 0) {
+							applyStoredFont();
+							releaseFontPreview(4e3);
+							return {
+								ok: false,
+								refusal: outcome.refusal
+							};
+						}
+						cfg.fontMime = outcome.mime;
+						cfg.fontEnabled = true;
+						applyFontFace(FONT_SERVE_URL, true, outcome.mime);
+						releaseFontPreview(4e3);
+						persistConfig();
+						return { ok: true };
+					},
+					removeFont: () => {
+						releaseFontPreview(0);
+						cfg.fontMime = null;
+						applyFontFace(null, false, null);
+						removeFont();
+						persistConfig();
+					},
+					setFontEnabled: (v) => {
+						cfg.fontEnabled = v;
+						applyStoredFont();
+						persistConfig();
+					},
 					setWop: (v) => {
 						cfg.wallpaperOpacity = v;
 						applyWp();
@@ -7304,7 +8747,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 {
@@ -7324,16 +8767,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);
@@ -7492,18 +8928,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;
+			};
+			const sectionInject = (actions) => {
+				bound = actions;
+				return buildFace();
 			};
-			ctx.slots.inject("settings.section", () => ctx.slots.register({
+			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,
@@ -7512,6 +8949,10 @@ window.__ModuleLoader__.load({
 				store,
 				inject: sectionInject
 			}, ThemeSection));
+			registerThemeSidebarTab(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");