dsh-any-background 0.2.7 → 0.2.9

package/lib/client.js

@@ -24,10 +24,12 @@ window.__ModuleLoader__.load({
 			close: "关闭",
 			pageColor: "色彩",
 			pageInterface: "界面",
+			pageFont: "字体",
 			pageBackground: "背景",
 			pageProfile: "配置",
 			descColor: "拖动色轮或输入精确数值，整个界面的配色将实时跟随变化",
 			descInterface: "为主界面的各个区域单独调节透明度与模糊，营造空间层次感",
+			descFont: "上传自定义字体为整套界面换字形，并按区域为文字添加描边，让内容在复杂的壁纸上依然清晰",
 			descBackground: "上传一张图片或一段视频作为壁纸并自由摆放，或让算法为你实时生成动态背景",
 			descProfile: "一键套用外观预设，保存多套配置随时切换，设置昼夜自动换装，或导出/导入完整主题",
 			colorTitle: "主题色",
@@ -46,6 +48,25 @@ 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 文件",
+			strokeTitle: "文字描边",
+			strokeHint: "按区域为文字添加描边：粗细为 0 表示关闭，「自动」会生成与文字颜色相反的颜色，「主题色」跟随当前主题色。代码块与图标已自动豁免，多色语法不会糊成一团",
+			strokeWidth: "描边粗细",
+			strokeColor: "描边颜色",
+			strokeAuto: "自动反色",
+			strokeGray: "灰色",
+			strokeBlack: "黑色",
+			strokeWhite: "白色",
+			strokeTheme: "主题色",
+			strokeCustom: "自定义",
 			bgTitle: "背景",
 			bgChoose: "选择图片或视频",
 			bgRemove: "移除背景",
@@ -73,7 +94,7 @@ window.__ModuleLoader__.load({
 			liveBadge: "动态壁纸",
 			bgHint: "「适应」布局模式下悬停预览可编辑图片/视频的位置与缩放（其余布局模式按模式自动排布）；动态生成模式下可选择类型、预设与参数。绑定种子后刷新页面壁纸保持不变，取消绑定则每次刷新随机换新",
 			editorTitle: "背景编辑器",
-			editorHint: "拖动移动画面，滚轮缩放大小",
+			editorHint: "拖动移动画面，滚轮或双指缩放大小",
 			editorCommit: "确认",
 			editorCancel: "取消",
 			editorReset: "重置",
@@ -189,10 +210,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 +234,25 @@ 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",
+			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 +280,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 +395,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
 			},
-			settingsOpacity: 1,
+			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: .5,
 			wallpaperOpacity: 1,
-			blur: 0,
+			blur: 30,
 			bgState: {
 				zoom: 1,
 				x: 0,
@@ -389,12 +478,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 +511,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 +632,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 +746,7 @@ window.__ModuleLoader__.load({
 				color: cfg.color,
 				opacities: { ...rOps() },
 				blurs: { ...rBlurs() },
+				strokes: rStrokes(),
 				settingsOpacity: rSop(),
 				wallpaperOpacity: rWop(),
 				blur: rBl(),
@@ -631,6 +767,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 +801,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 +899,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 +908,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 +969,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 +1015,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 +1028,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) {
@@ -987,6 +1145,28 @@ window.__ModuleLoader__.load({
 				return false;
 			}
 		}
+		/** Upload a custom font's raw bytes over HTTP; resolves the sniffed MIME on
+		*  success (the server validates the container from magic bytes) or null. */
+		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 null;
+				const data = await res.json().catch(() => null);
+				return typeof data?.mime === "string" ? data.mime : "font/ttf";
+			} catch (e) {
+				console.warn("dsh-any-background: font upload failed", e);
+				return null;
+			}
+		}
+		/** 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 {
@@ -2400,14 +2580,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 +2631,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 +2668,151 @@ 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'. */
+		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) continue;
+				const s = strokes[g];
+				if (s.width > 0) {
+					el.style.setProperty("-webkit-text-stroke", `${s.width}px ${strokeColor(s)}`);
+					el.style.setProperty("paint-order", "stroke fill");
+				} else {
+					el.style.removeProperty("-webkit-text-stroke");
+					el.style.removeProperty("paint-order");
+				}
+			}
+		}
+		/** 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;
+			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");
+			}
+		}
+		/** 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
@@ -2888,6 +3240,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 +3255,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 +3329,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);
@@ -3297,14 +3653,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 +3705,8 @@ window.__ModuleLoader__.load({
 			pendingOps = null;
 			tableFixStyleEl?.remove();
 			tableFixStyleEl = null;
+			removeStrokes();
+			removeFontFace();
 			setBlur(frameEl, 0);
 			setBlur(sidebarEl, 0);
 			setBlur(centerEl, 0);
@@ -3556,6 +3914,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)}
@@ -3985,6 +4366,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,
@@ -4975,7 +5362,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/components/pages/InterfacePage.tsx
-		const PARTS = [
+		const PARTS$1 = [
 			{
 				opKey: "bg",
 				labelKey: "uiOpacityBg",
@@ -5025,7 +5412,7 @@ window.__ModuleLoader__.load({
 		function InterfacePage({ p }) {
 			const { t, setOps, setBlurs, setSop, setPanelOp } = p;
 			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 +5539,327 @@ 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 } = 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 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 ok = await setFont(file);
+				setBusy(false);
+				if (ok) setFontInfo({
+					mime: cfg.fontMime,
+					enabled: cfg.fontEnabled,
+					name: file.name
+				});
+				else {
+					setFontInfo({
+						mime: cfg.fontMime,
+						enabled: cfg.fontEnabled,
+						name: null
+					});
+					notify(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);
@@ -5181,6 +5885,19 @@ window.__ModuleLoader__.load({
 				spx: 0,
 				spy: 0
 			});
+			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 = () => {
@@ -5242,7 +5959,7 @@ window.__ModuleLoader__.load({
 				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 nz = clampZoom(zoom * factor);
 				const nx = mx - (mx - pos.x) * (nz / zoom);
 				const ny = my - (my - pos.y) * (nz / zoom);
 				setZoom(nz);
@@ -5257,6 +5974,97 @@ window.__ModuleLoader__.load({
 				el.addEventListener("wheel", onWheelCb, { passive: false });
 				return () => el.removeEventListener("wheel", onWheelCb);
 			}, [onWheelCb]);
+			const onTouchStartCb = (0, react.useCallback)((e) => {
+				const el = containerRef.current;
+				if (!el) return;
+				if (e.touches.length === 1) {
+					pinchRef.current = null;
+					const tp = e.touches[0];
+					touchDragRef.current = {
+						sx: tp.clientX,
+						sy: tp.clientY,
+						spx: viewRef.current.pos.x,
+						spy: viewRef.current.pos.y
+					};
+					return;
+				}
+				if (e.touches.length >= 2) {
+					touchDragRef.current = null;
+					const rect = el.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
+					};
+				}
+			}, []);
+			const onTouchMoveCb = (0, react.useCallback)((e) => {
+				const el = containerRef.current;
+				if (!el) return;
+				if (e.touches.length >= 2 && pinchRef.current !== null) {
+					e.preventDefault();
+					const p = pinchRef.current;
+					if (p.dist <= 0) return;
+					const rect = el.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];
+					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("touchstart", onTouchStartCb, { passive: false });
+				el.addEventListener("touchmove", onTouchMoveCb, { passive: false });
+				el.addEventListener("touchend", onTouchEndCb, { passive: false });
+				el.addEventListener("touchcancel", onTouchEndCb, { passive: false });
+				return () => {
+					el.removeEventListener("touchstart", onTouchStartCb);
+					el.removeEventListener("touchmove", onTouchMoveCb);
+					el.removeEventListener("touchend", onTouchEndCb);
+					el.removeEventListener("touchcancel", onTouchEndCb);
+				};
+			}, [
+				onTouchStartCb,
+				onTouchMoveCb,
+				onTouchEndCb
+			]);
 			const resetView = (0, react.useCallback)(() => {
 				if (imgSize.w === 0) return;
 				setZoom(1);
@@ -5290,7 +6098,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", {
@@ -6075,6 +6886,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 +6919,7 @@ window.__ModuleLoader__.load({
 						input: 1
 					},
 					blurs: { ...zeroBlurs },
+					strokes: zeroStrokes(),
 					settingsOpacity: 1,
 					wallpaperOpacity: 1,
 					blur: 0,
@@ -6120,6 +6953,7 @@ window.__ModuleLoader__.load({
 						input: 14,
 						panel: 12
 					},
+					strokes: zeroStrokes(),
 					settingsOpacity: .88,
 					wallpaperOpacity: 1,
 					blur: 0,
@@ -6140,6 +6974,7 @@ window.__ModuleLoader__.load({
 						input: 1
 					},
 					blurs: { ...zeroBlurs },
+					strokes: zeroStrokes(),
 					settingsOpacity: 1,
 					wallpaperOpacity: 1,
 					blur: 0,
@@ -6173,6 +7008,7 @@ window.__ModuleLoader__.load({
 						input: 16,
 						panel: 16
 					},
+					strokes: zeroStrokes(),
 					settingsOpacity: .85,
 					wallpaperOpacity: .92,
 					blur: 2,
@@ -6206,6 +7042,7 @@ window.__ModuleLoader__.load({
 						input: 20,
 						panel: 18
 					},
+					strokes: zeroStrokes(),
 					settingsOpacity: .8,
 					wallpaperOpacity: 1,
 					blur: 0,
@@ -6230,6 +7067,7 @@ window.__ModuleLoader__.load({
 						input: 1
 					},
 					blurs: { ...zeroBlurs },
+					strokes: zeroStrokes(),
 					settingsOpacity: 1,
 					wallpaperOpacity: 1,
 					blur: 0,
@@ -6689,6 +7527,14 @@ 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,
@@ -6826,7 +7672,7 @@ window.__ModuleLoader__.load({
 			}, "dsh-any-background: skin dispose");
 			const styleEl = document.createElement("style");
 			styleEl.dataset.plugin = "dsh-any-background";
-			styleEl.textContent = `body[data-ds-dark-theme="dsh-any-background"]::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,255,255,0.03) 0%,transparent 60%)}${SETTINGS_STYLE_RULE}${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);
@@ -7022,8 +7868,14 @@ window.__ModuleLoader__.load({
 			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);
@@ -7126,6 +7978,28 @@ window.__ModuleLoader__.load({
 						if (ok) persistConfig();
 					});
 				};
+				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 {
@@ -7232,6 +8106,41 @@ 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 mime = await uploadFont(file);
+						if (mime === null) {
+							applyStoredFont();
+							releaseFontPreview(4e3);
+							return false;
+						}
+						cfg.fontMime = mime;
+						cfg.fontEnabled = true;
+						applyFontFace(FONT_SERVE_URL, true, mime);
+						releaseFontPreview(4e3);
+						persistConfig();
+						return 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();
@@ -7358,6 +8267,7 @@ window.__ModuleLoader__.load({
 								else if (cfg.generatedBg) updateGeneratedBg(cfg.generatedBg);
 							}
 							persistConfig();
+							syncMetaNow();
 							if (rHasColor()) {
 								const [h, s, l] = rColor();
 								registerCustom(h, s, l);