dsh-cool-theme 0.4.0 → 0.6.0

package/lib/client.js

@@ -34,6 +34,67 @@ window.__ModuleLoader__.load({
 		*/
 		const THEME_STORAGE_KEY = "cool-theme-preset";
 		const THEME_STORAGE_KEY_LEGACY = "cooltea-theme-preset";
+		const CUSTOM_PRESET_ID = "custom";
+		const CUSTOM_THEME_STORAGE_KEY = "cool-theme-custom";
+		const CUSTOM_LIST_STORAGE_KEY = "cool-theme-custom-list";
+		const CUSTOM_ACTIVE_STORAGE_KEY = "cool-theme-custom-active";
+		const CUSTOM_MIGRATED_STORAGE_KEY = "cool-theme-custom-migrated";
+		const THEME_API_PATH_THEMES = `/cool-theme/api/themes`;
+		const THEME_ARCHIVE_EXTENSION = ".zip";
+		/**
+		* Import bounds. A theme is a small JSON document, so anything past these caps
+		* is refused before it is parsed rather than after it has been held in memory.
+		*/
+		const THEME_ARCHIVE_MAX_BYTES = 8388608;
+		/** Route segments below {@link THEME_API_PATH_THEMES}: `/<id>/export`, `/import`. */
+		const THEME_API_SEGMENT_EXPORT = "export";
+		const THEME_API_PATH_IMPORT = `${THEME_API_PATH_THEMES}/import`;
+		//#endregion
+		//#region src/presets-ids.ts
+		/**
+		* The preset ids, in one place both halves can read.
+		*
+		* `presets.ts` carries the colour maps and is client-only; the Host needs the
+		* same id vocabulary to tell an archive that derives from a preset we ship from
+		* one that does not, so the names live here and that file checks itself against
+		* them.
+		*/
+		const PRESET_IDS = [
+			"aura",
+			"ayu",
+			"catppuccin",
+			"catppuccin-frappe",
+			"catppuccin-macchiato",
+			"cobalt2",
+			"cursor",
+			"dracula",
+			"dsh",
+			"everforest",
+			"flexoki",
+			"github",
+			"gruvbox",
+			"kanagawa",
+			"lucent-orng",
+			"material",
+			"matrix",
+			"mercury",
+			"monokai",
+			"nightowl",
+			"nord",
+			"onedark",
+			"opencode",
+			"orng",
+			"osaka-jade",
+			"palenight",
+			"rosepine",
+			"solarized",
+			"synthwave84",
+			"system",
+			"tokyonight",
+			"vercel",
+			"vesper",
+			"zenburn"
+		];
 		//#endregion
 		//#region src/client/presets/_helpers.ts
 		/**
@@ -1913,6 +1974,12 @@ window.__ModuleLoader__.load({
 		});
 		//#endregion
 		//#region src/client/presets.ts
+		/**
+		* Every shipped preset, one entry per {@link PRESET_IDS} name. The mapped type
+		* makes the two lists agree at compile time: a preset without a colour map, or a
+		* name with no entry here, is a type error rather than a theme that goes missing
+		* from the picker (or from an import's validation).
+		*/
 		const PRESETS = {
 			aura,
 			ayu,
@@ -1979,10 +2046,15 @@ window.__ModuleLoader__.load({
 				}
 			}
 		};
+		/**
+		* Presets that override nothing: the shell keeps its own colours. The single
+		* source of this set, so the token layer and the panel cannot drift on it.
+		*/
+		const NOOP_PRESET_IDS = /* @__PURE__ */ new Set(["native", "dsh"]);
 		const presetOptions = [{
 			value: "dsh",
 			label: PRESETS.dsh.label
-		}, ...Object.keys(PRESETS).filter((id) => id !== "dsh").map((id) => ({
+		}, ...PRESET_IDS.filter((id) => id !== "dsh").map((id) => ({
 			value: id,
 			label: PRESETS[id].label
 		}))];
@@ -2157,10 +2229,17 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		function buildBaseCss() {
 			return `${buildPrimitivesCss()}\n\n${SHIKI_CSS}`;
 		}
-		const NOOP_PRESETS = /* @__PURE__ */ new Set(["native", "dsh"]);
-		function resolvePreset(id) {
-			if (NOOP_PRESETS.has(id)) return null;
-			const preset = PRESETS[id];
+		/**
+		* Accepts either a preset id or an already-built `PresetDef` (what a custom
+		* theme produces). Both go through the identical merge, so a custom theme is
+		* not a special case anywhere downstream.
+		*/
+		function resolvePreset(src) {
+			let preset;
+			if (typeof src === "string") {
+				if (NOOP_PRESET_IDS.has(src)) return null;
+				preset = PRESETS[src] ?? null;
+			} else preset = src;
 			if (!preset) return null;
 			return {
 				light: {
@@ -2173,16 +2252,15 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				}
 			};
 		}
-		function buildOverrides(id) {
-			const resolved = resolvePreset(id);
+		function buildOverrides(src) {
+			const resolved = resolvePreset(src);
 			if (!resolved) return {};
 			return primitiveOverrides(resolved.light, resolved.dark);
 		}
-		function buildFullCssFallback(id) {
-			const resolved = resolvePreset(id);
+		function buildFullCssFallback(src) {
+			const resolved = resolvePreset(src);
 			if (!resolved) return "";
-			const toBlock = (m) => Object.entries(m).map(([k, v]) => `  ${k}: ${v};`).join("\n");
-			return `:root{\n${toBlock(resolved.light)}\n}\nhtml[data-ds-dark-theme], body[data-ds-dark-theme]{\n${toBlock(resolved.dark)}\n}`;
+			return buildPrimitivesCss(resolved.light, resolved.dark);
 		}
 		//#endregion
 		//#region src/client/style-injector.ts
@@ -2223,10 +2301,559 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			};
 		}
 		//#endregion
+		//#region src/client/custom.ts
+		/** The nine `--shiki-token-*` slots, in stylesheet order. */
+		const SHIKI_KEYS = [
+			"constant",
+			"string",
+			"comment",
+			"keyword",
+			"parameter",
+			"function",
+			"string-expression",
+			"punctuation",
+			"link"
+		];
+		/** Seed values used when a source preset cannot supply one (e.g. the no-op `dsh`). */
+		const SHIKI_FALLBACK = {
+			light: {
+				constant: "#1C7ED6",
+				string: "#2F9E44",
+				comment: "#868E96",
+				keyword: "#D6336C",
+				parameter: "#E8590C",
+				function: "#6741D9",
+				"string-expression": "#2B8A3E",
+				punctuation: "#495057",
+				link: "#1971C2"
+			},
+			dark: {
+				constant: "#4DABF7",
+				string: "#69DB7C",
+				comment: "#ADB5BD",
+				keyword: "#FAA2C1",
+				parameter: "#FFA94D",
+				function: "#B197FC",
+				"string-expression": "#8CE99A",
+				punctuation: "#CED4DA",
+				link: "#74C0FC"
+			}
+		};
+		const HEX = /^#([0-9a-f]{3,8})$/i;
+		const RGB_FN = /^rgba?\(([^)]*)\)$/i;
+		const HSL_FN = /^hsla?\(([^)]*)\)$/i;
+		function isRecord$1(value) {
+			return typeof value === "object" && value !== null && !Array.isArray(value);
+		}
+		const clamp255 = (n) => Math.max(0, Math.min(255, Math.round(n)));
+		const clamp01 = (n) => Math.max(0, Math.min(1, n));
+		/** Accepts both `a, b, c` and the modern `a b c / d` argument syntax. */
+		function fnArgs(body) {
+			return body.replace(/\//g, " ").split(/[\s,]+/).filter(Boolean);
+		}
+		/** A colour channel: `128` or a percentage. Returns null for anything else. */
+		function channel(token) {
+			const pct = token.endsWith("%");
+			const v = parseFloat(pct ? token.slice(0, -1) : token);
+			if (!Number.isFinite(v)) return null;
+			return pct ? v / 100 * 255 : v;
+		}
+		function hslToRgb(h, s, l) {
+			const a = s * Math.min(l, 1 - l);
+			const f = (n) => {
+				const k = (n + h / 30) % 12;
+				return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+			};
+			return [
+				clamp255(f(0) * 255),
+				clamp255(f(8) * 255),
+				clamp255(f(4) * 255)
+			];
+		}
+		const toRgbHex = (rgb) => "#" + rgb.map((n) => clamp255(n).toString(16).padStart(2, "0")).join("").toUpperCase();
+		/**
+		* Parse a colour into `#RRGGBB`, or null when it is not a format we understand.
+		*
+		* Accepted: `#RGB`, `#RGBA`, `#RRGGBB`, `#RRGGBBAA`, `rgb()`/`rgba()` with
+		* numbers or percentages, and `hsl()`/`hsla()`. Alpha is parsed but dropped —
+		* every token these seeds drive is an opaque theme colour.
+		*
+		* `primitives.ts` stores `rgb(r, g, b)` while presets store hex, so both shapes
+		* have to work; the extra forms are there for what users may type.
+		*/
+		function tryToHex(input) {
+			if (typeof input !== "string") return null;
+			const s = input.trim();
+			if (!s) return null;
+			const hex = s.match(HEX);
+			if (hex) {
+				const d = hex[1];
+				const twice = (c) => c + c;
+				if (d.length === 3 || d.length === 4) return `#${twice(d[0])}${twice(d[1])}${twice(d[2])}`.toUpperCase();
+				if (d.length === 6 || d.length === 8) return `#${d.slice(0, 6)}`.toUpperCase();
+				return null;
+			}
+			const rgbFn = s.match(RGB_FN);
+			if (rgbFn) {
+				const parts = fnArgs(rgbFn[1]);
+				if (parts.length < 3) return null;
+				const rgb = parts.slice(0, 3).map(channel);
+				if (rgb.some((n) => n === null)) return null;
+				return toRgbHex(rgb);
+			}
+			const hslFn = s.match(HSL_FN);
+			if (hslFn) {
+				const parts = fnArgs(hslFn[1]);
+				if (parts.length < 3) return null;
+				const h = parseFloat(parts[0].replace(/deg$/i, ""));
+				const sat = parseFloat(parts[1]);
+				const lig = parseFloat(parts[2]);
+				if (![
+					h,
+					sat,
+					lig
+				].every(Number.isFinite)) return null;
+				return toRgbHex(hslToRgb((h % 360 + 360) % 360, clamp01(sat / 100), clamp01(lig / 100)));
+			}
+			return null;
+		}
+		/** `tryToHex` with a black fallback, for call sites that need a guaranteed value. */
+		function toHex(input) {
+			return tryToHex(input) ?? "#000000";
+		}
+		function readSeed(map, fallback, key) {
+			return toHex(map[key] ?? fallback[key]);
+		}
+		/**
+		* Recover the seed inputs from an already-generated preset.
+		*
+		* Exact by construction: `buildScale` writes the `start`/`end` arguments to
+		* steps 00/1000, and `buildTintShadeScale` writes the base to step 500. This is
+		* what lets a user start from any preset without re-declaring its palette.
+		*/
+		function extractSeeds(base) {
+			const seed = (key, mode) => readSeed(mode === "light" ? base.light : base.dark, mode === "light" ? PRIMITIVES_LIGHT : PRIMITIVES_DARK, key);
+			const pair = (key) => ({
+				light: seed(key, "light"),
+				dark: seed(key, "dark")
+			});
+			/** Both ends of one appearance's ramp, read from that appearance's map. */
+			const ramp = (mode) => ({
+				lightest: seed("--dsw-static-neutral-bluish-00", mode),
+				darkest: seed("--dsw-static-neutral-bluish-1000", mode)
+			});
+			const shiki = SHIKI_KEYS.reduce((acc, k) => {
+				const cssKey = `--shiki-token-${k}`;
+				const lightMap = base.light;
+				const darkMap = base.dark;
+				acc[k] = {
+					light: toHex(lightMap[cssKey] ?? SHIKI_FALLBACK.light[k]),
+					dark: toHex(darkMap[cssKey] ?? SHIKI_FALLBACK.dark[k])
+				};
+				return acc;
+			}, {});
+			return {
+				neutral: {
+					light: ramp("light"),
+					dark: ramp("dark")
+				},
+				accent: pair("--dsw-static-deepseek-500"),
+				green: pair("--dsw-static-green-500"),
+				amber: pair("--dsw-static-amber-500"),
+				red: pair("--dsw-static-red-500"),
+				shiki
+			};
+		}
+		/** v1 carried one neutral ramp shared by both appearances. */
+		const CUSTOM_SCHEMA_VERSION_LEGACY = 1;
+		function encodeCustom(base, theme) {
+			return JSON.stringify({
+				v: 2,
+				base,
+				theme
+			});
+		}
+		/** Parse a stored blob. Returns null for absent/corrupt/foreign-version data. */
+		function parseEnvelope(raw) {
+			if (!raw) return null;
+			try {
+				const parsed = JSON.parse(raw);
+				if (!parsed || typeof parsed !== "object") return null;
+				if (parsed.v !== 2 && parsed.v !== CUSTOM_SCHEMA_VERSION_LEGACY) return null;
+				return {
+					v: 2,
+					base: String(parsed.base ?? ""),
+					theme: parsed.theme
+				};
+			} catch {
+				return null;
+			}
+		}
+		/**
+		* The neutral seeds in the current shape. A pre-v2 blob carried one ramp shared
+		* by both appearances; repeating it per appearance reproduces exactly what that
+		* blob rendered before the split, so existing themes migrate without a visible
+		* change.
+		*/
+		function neutralSeeds(src) {
+			if (isRecord$1(src.neutral)) return src.neutral;
+			const shared = {
+				lightest: src.neutralLightest,
+				darkest: src.neutralDarkest
+			};
+			return {
+				light: shared,
+				dark: shared
+			};
+		}
+		/** Repair a partially-invalid object against `fallback`, keeping every valid colour. */
+		function normalizeCustom(raw, fallback) {
+			const src = raw ?? {};
+			const pick = (value, fb) => tryToHex(value) ?? fb;
+			const pickPair = (value, fb) => {
+				const v = value ?? {};
+				return {
+					light: pick(v.light, fb.light),
+					dark: pick(v.dark, fb.dark)
+				};
+			};
+			const pickRamp = (value, fb) => {
+				const v = value ?? {};
+				return {
+					lightest: pick(v.lightest, fb.lightest),
+					darkest: pick(v.darkest, fb.darkest)
+				};
+			};
+			const shikiSrc = src.shiki ?? {};
+			const shiki = SHIKI_KEYS.reduce((acc, k) => {
+				acc[k] = pickPair(shikiSrc[k], fallback.shiki[k]);
+				return acc;
+			}, {});
+			const neutral = neutralSeeds(src);
+			return {
+				neutral: {
+					light: pickRamp(neutral.light, fallback.neutral.light),
+					dark: pickRamp(neutral.dark, fallback.neutral.dark)
+				},
+				accent: pickPair(src.accent, fallback.accent),
+				green: pickPair(src.green, fallback.green),
+				amber: pickPair(src.amber, fallback.amber),
+				red: pickPair(src.red, fallback.red),
+				shiki
+			};
+		}
+		/**
+		* Turn seeds into a full `PresetDef` using the presets' own helpers.
+		*
+		* Unlike the presets (which ship one ramp for both appearances), the ramp is
+		* built once per appearance, so the light text and the dark text are no longer
+		* the two ends of the same colour axis.
+		*/
+		function buildCustomPreset(v) {
+			/** One appearance's ramp, published under both prefixes DSH reads from. */
+			const ramp = (mode) => {
+				const { lightest, darkest } = v.neutral[mode];
+				return {
+					...buildScale("--dsw-static-neutral-bluish", lightest, darkest, BLUISH_STEPS),
+					...buildScale("--dsw-static-neutral", lightest, darkest, NEUTRAL_STEPS)
+				};
+			};
+			const semantic = (mode) => buildSemanticScales({
+				deepseek: v.accent[mode],
+				blue: v.accent[mode],
+				green: v.green[mode],
+				amber: v.amber[mode],
+				red: v.red[mode]
+			});
+			const shiki = (mode) => {
+				const out = {};
+				for (const k of SHIKI_KEYS) out[`--shiki-token-${k}`] = v.shiki[k][mode];
+				return out;
+			};
+			return {
+				label: "Custom",
+				light: {
+					...ramp("light"),
+					...semantic("light"),
+					...shiki("light")
+				},
+				dark: {
+					...ramp("dark"),
+					...semantic("dark"),
+					...shiki("dark")
+				}
+			};
+		}
+		/** Collision-resistant enough for a local list, and stable across reloads. */
+		function newThemeId() {
+			return `ct_${Date.now().toString(36)}${Math.random().toString(36).slice(2, 7)}`;
+		}
+		/**
+		* Parse the saved list. Entries with a corrupt theme are repaired against
+		* `fallbackFor(base)` rather than dropped, so one bad record cannot lose the
+		* rest of the list; only structurally unusable entries are skipped.
+		*/
+		function decodeList(raw, fallbackFor) {
+			if (!raw) return [];
+			try {
+				const parsed = JSON.parse(raw);
+				const known = parsed?.v === 2 || parsed?.v === CUSTOM_SCHEMA_VERSION_LEGACY;
+				if (!parsed || !known || !Array.isArray(parsed.items)) return [];
+				const out = [];
+				for (const item of parsed.items) {
+					const e = item;
+					if (typeof e?.id !== "string" || typeof e?.name !== "string") continue;
+					const base = typeof e.base === "string" ? e.base : "";
+					out.push({
+						id: e.id,
+						name: e.name,
+						base,
+						theme: normalizeCustom(e.theme, fallbackFor(base)),
+						assets: Array.isArray(e.assets) ? e.assets : []
+					});
+				}
+				return out;
+			} catch {
+				return [];
+			}
+		}
+		/** `${base} 1`, `${base} 2`, … skipping names already taken. */
+		function nextThemeName(base, taken) {
+			const used = new Set(taken);
+			for (let n = 1;; n++) {
+				const candidate = `${base} ${n}`;
+				if (!used.has(candidate)) return candidate;
+			}
+		}
+		//#endregion
+		//#region src/client/theme-files.ts
+		/**
+		* Browser half of the theme-file transport.
+		*
+		* The Host owns the files; this module is the only place that knows the wire
+		* shape, so the rest of the client keeps working with plain `SavedTheme`
+		* records. Every call is same-origin against the Host's own prefix route.
+		*/
+		/** Repair one stored document against the preset its seeds derive from. */
+		function documentToSaved(doc, fallbackFor) {
+			return {
+				id: doc.id,
+				name: doc.name,
+				base: doc.base,
+				theme: normalizeCustom(doc.theme, fallbackFor(doc.base)),
+				assets: Array.isArray(doc.assets) ? doc.assets : []
+			};
+		}
+		/** The document payload for one entry; timestamps stay the Host's business. */
+		function savedToDocument(entry) {
+			return {
+				v: 1,
+				id: entry.id,
+				name: entry.name,
+				base: entry.base,
+				theme: entry.theme,
+				assets: entry.assets
+			};
+		}
+		function isRecord(value) {
+			return typeof value === "object" && value !== null && !Array.isArray(value);
+		}
+		/**
+		* The Host answered as something other than this API — its route half is not
+		* mounted (the usual cause is a DSH process started before this plugin's host
+		* half existed). Distinguished from a write failure because only this one tells
+		* the user to restart, and the browser copy is still intact meanwhile.
+		*/
+		var ThemeApiUnavailableError = class extends Error {};
+		/** One JSON round trip; a non-OK status becomes an Error carrying the reason. */
+		async function callApi(path, init) {
+			const response = await fetch(path, {
+				...init,
+				headers: {
+					"content-type": "application/json",
+					...init?.headers
+				}
+			});
+			let payload;
+			try {
+				payload = await response.json();
+			} catch {
+				throw new ThemeApiUnavailableError(`${String(response.status)} ${response.statusText}`);
+			}
+			if (!response.ok) {
+				if (response.status === 404 || response.status === 405) throw new ThemeApiUnavailableError(`${String(response.status)} ${response.statusText}`);
+				const reason = isRecord(payload) && typeof payload.error === "string" ? payload.error : response.statusText;
+				throw new Error(reason);
+			}
+			return isRecord(payload) ? payload : {};
+		}
+		/**
+		* The documents in one roster response, repaired into `SavedTheme` records.
+		* Every call on this route answers with the same `{ themes: [...] }` body, so
+		* both reads share this one parser: an entry missing an id or a name is skipped
+		* rather than failing the whole roster.
+		*/
+		function payloadThemes(payload, fallbackFor) {
+			const documents = Array.isArray(payload.themes) ? payload.themes : [];
+			const out = [];
+			for (const doc of documents) {
+				if (!isRecord(doc) || typeof doc.id !== "string" || typeof doc.name !== "string") continue;
+				out.push(documentToSaved({
+					v: typeof doc.v === "number" ? doc.v : 1,
+					id: doc.id,
+					name: doc.name,
+					base: typeof doc.base === "string" ? doc.base : "",
+					theme: doc.theme,
+					assets: Array.isArray(doc.assets) ? doc.assets : [],
+					createdAt: "",
+					updatedAt: ""
+				}, fallbackFor));
+			}
+			return out;
+		}
+		/** Every stored theme, in the Host's creation-time order (oldest first). */
+		async function fetchThemes(fallbackFor) {
+			return payloadThemes(await callApi(THEME_API_PATH_THEMES), fallbackFor);
+		}
+		/** Insert or replace the given entries; resolves with what the Host stored. */
+		async function pushThemes(entries, fallbackFor) {
+			return payloadThemes(await callApi(THEME_API_PATH_THEMES, {
+				method: "POST",
+				body: JSON.stringify({ themes: entries.map(savedToDocument) })
+			}), fallbackFor);
+		}
+		/** Remove one theme's directory. */
+		async function removeTheme(id) {
+			await callApi(`${THEME_API_PATH_THEMES}/${encodeURIComponent(id)}`, { method: "DELETE" });
+		}
+		/** One theme the Host stored on the client's behalf, as a stored document. */
+		function storedTheme(payload) {
+			const doc = isRecord(payload.theme) ? payload.theme : {};
+			if (typeof doc.id !== "string" || typeof doc.name !== "string") throw new Error("the Host did not report a stored theme");
+			return {
+				id: doc.id,
+				name: doc.name
+			};
+		}
+		/**
+		* Download one theme as an archive. The response is the archive itself rather
+		* than JSON, so this is the one call that does not go through {@link callApi}.
+		*/
+		async function exportTheme(id, name) {
+			const response = await fetch(`${THEME_API_PATH_THEMES}/${encodeURIComponent(id)}/${THEME_API_SEGMENT_EXPORT}`);
+			if (response.status === 404 || response.status === 405) throw new ThemeApiUnavailableError(`${String(response.status)} ${response.statusText}`);
+			if (!response.ok) throw new Error(`${String(response.status)} ${response.statusText}`);
+			saveBlob(await response.blob(), suggestedName(response.headers.get("content-disposition"), name));
+		}
+		/**
+		* The archive's own filename when the Host sent one, else the theme's name. The
+		* Host is the authority because only it knows the theme id behind a bad name.
+		*/
+		function suggestedName(disposition, fallback) {
+			const encoded = disposition?.match(/filename\*=UTF-8''([^;]+)/i)?.[1];
+			if (encoded !== void 0) try {
+				return decodeURIComponent(encoded);
+			} catch {}
+			const plain = disposition?.match(/filename="?([^";]+)"?/i)?.[1];
+			if (plain !== void 0 && plain !== "") return plain;
+			const name = fallback.trim() === "" ? "theme" : fallback.trim();
+			return name.endsWith(".zip") ? name : `${name}${THEME_ARCHIVE_EXTENSION}`;
+		}
+		/** Hand one blob to the browser's own download machinery. */
+		function saveBlob(blob, fileName) {
+			const url = URL.createObjectURL(blob);
+			try {
+				const anchor = document.createElement("a");
+				anchor.href = url;
+				anchor.download = fileName;
+				anchor.rel = "noopener";
+				document.body.append(anchor);
+				anchor.click();
+				anchor.remove();
+			} finally {
+				setTimeout(() => {
+					URL.revokeObjectURL(url);
+				}, 0);
+			}
+		}
+		/**
+		* Upload one archive. The Host validates it, names the theme and stores it, so
+		* a success means the roster already has the theme — the answer carries what to
+		* report, not what the client still has to write.
+		*/
+		async function importTheme(file) {
+			if (file.size > 8388608) throw new Error(`archive is larger than ${String(Math.round(THEME_ARCHIVE_MAX_BYTES / 1048576))} MB`);
+			return storedTheme(await callApi(THEME_API_PATH_IMPORT, {
+				method: "POST",
+				headers: { "content-type": "application/octet-stream" },
+				body: file
+			}));
+		}
+		/**
+		* The themes a browser saved before files became the store, minus those the
+		* Host already has.
+		*
+		* Ids are the join key: a theme another browser already migrated must not be
+		* written twice, while one this roster lacks would otherwise disappear from the
+		* UI. Callers adopt the result, then stop reading the browser copy.
+		*/
+		function legacyThemesToAdopt(legacy, hostThemes) {
+			const known = new Set(hostThemes.map((entry) => entry.id));
+			return legacy.filter((entry) => !known.has(entry.id));
+		}
+		//#endregion
 		//#region src/client/components.tsx
 		/**
-		* Theme settings UI: scheme selector + preset picker.
+		* Theme settings UI: scheme selector, preset picker, and the custom colour editor.
+		*/
+		/** Reserved menu value that switches to the user-defined theme. */
+		const CUSTOM_SELECTION = CUSTOM_PRESET_ID;
+		/**
+		* Which message an import failure deserves. The Host answers with its own
+		* reason, so the shape of that reason is what selects the localized text; an
+		* unrecognised failure keeps the Host's own words rather than hiding them.
 		*/
+		function importFailureMessage(t, error) {
+			const message = error instanceof Error ? error.message : String(error);
+			if (error instanceof ThemeApiUnavailableError) return t("custom.toast.unavailable");
+			return t(/not a zip archive|zip central directory|zip local header|zip64|unsupported zip compression/i.test(message) ? "custom.importFailed.notArchive" : /missing theme\.json/i.test(message) ? "custom.importFailed.noDocument" : /newer than this plugin/i.test(message) ? "custom.importFailed.tooNew" : /carries media|unsupported media type|unusable media path/i.test(message) ? "custom.importFailed.media" : /larger than|too large|too many files/i.test(message) ? "custom.importFailed.tooLarge" : /not valid JSON|must be|unusable theme|did not report/i.test(message) ? "custom.importFailed.badDocument" : "custom.importFailed.other").replace("{0}", message);
+		}
+		/** Structural equality of the two seeds in one pair. */
+		function samePair(a, b) {
+			return a?.light === b?.light && a?.dark === b?.dark;
+		}
+		/** Structural equality of the two endpoints of one neutral ramp. */
+		function sameRamp(a, b) {
+			return a?.lightest === b?.lightest && a?.darkest === b?.darkest;
+		}
+		/** Structural equality over all 30 seeds, ignoring key order. */
+		function sameSeeds(a, b) {
+			if (!sameRamp(a.neutral?.light, b.neutral?.light) || !sameRamp(a.neutral?.dark, b.neutral?.dark)) return false;
+			if (!samePair(a.accent, b.accent) || !samePair(a.green, b.green)) return false;
+			if (!samePair(a.amber, b.amber) || !samePair(a.red, b.red)) return false;
+			return SHIKI_KEYS.every((k) => samePair(a.shiki?.[k], b.shiki?.[k]));
+		}
+		/** The two roles one appearance's neutral ramp fills, in display order. */
+		const NEUTRAL_ROLES = ["background", "foreground"];
+		/**
+		* The ramp end that paints an appearance's background or foreground. DSH points
+		* its aliases at step 00 for light surfaces and step 1000 for light text, then
+		* swaps both in dark (950 surfaces, 50 text), so the same end means opposite
+		* things in the two appearances. Naming the role and resolving it per appearance
+		* keeps the swatches in a stable background-then-foreground order.
+		*/
+		function neutralEndForRole(mode, role) {
+			return role === "background" === (mode === "light") ? "lightest" : "darkest";
+		}
+		/**
+		* Whether the open editor holds work a close would throw away. A brand-new
+		* theme has never been committed, so it always counts as unsaved; a reopened
+		* entry is dirty only once its name or one of its seeds actually moved.
+		*/
+		function isDirty(open, current) {
+			if (open.id === null) return true;
+			return open.name.trim() !== open.originName.trim() || !sameSeeds(current, open.originTheme);
+		}
 		function IconChevron() {
 			return react.createElement("svg", {
 				width: 14,
@@ -2239,25 +2866,23 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				fill: "currentColor"
 			}));
 		}
-		function IconCheck() {
+		/** The menu's selected-row tick: 16px, pushed to the trailing edge. */
+		function IconCheck(props) {
+			const { size = 16, className } = props;
 			return react.createElement("svg", {
-				width: 16,
-				height: 16,
+				width: size,
+				height: size,
 				viewBox: "0 0 16 16",
 				fill: "none",
 				xmlns: "http://www.w3.org/2000/svg",
-				style: {
-					marginLeft: "auto",
-					color: "var(--dsw-alias-label-primary)",
-					display: "inline-flex"
-				}
+				className
 			}, react.createElement("path", {
 				d: "M15.0498 3.92579L8.49512 12.3818C8.25774 12.6881 8.04517 12.9645 7.84668 13.1689C7.63957 13.3823 7.38732 13.5841 7.04492 13.6719C6.86373 13.7183 6.6757 13.7346 6.48926 13.7197C6.13666 13.6915 5.8528 13.5355 5.6123 13.3604C5.38201 13.1926 5.12573 12.9567 4.83984 12.6953L1.03125 9.21289L1.96875 8.1875L5.77734 11.6699C6.08684 11.9529 6.27773 12.1249 6.43066 12.2363C6.50183 12.2882 6.54699 12.3135 6.57324 12.3252C6.58525 12.3305 6.59269 12.3322 6.5957 12.333C6.59802 12.3336 6.59961 12.334 6.59961 12.334C6.63317 12.3367 6.66758 12.3335 6.7002 12.3252C6.7002 12.3252 6.70211 12.3251 6.7041 12.3242C6.70698 12.3229 6.71348 12.319 6.72461 12.3115C6.74849 12.2956 6.78843 12.2642 6.84961 12.2012C6.98138 12.0654 7.13957 11.8628 7.39648 11.5313L13.9502 3.07422L15.0498 3.92579Z",
 				fill: "currentColor"
 			}));
 		}
 		function SchemeMenu(props) {
-			const { value, options, onSelect } = props;
+			const { value, options, onSelect, disabled } = props;
 			const [open, setOpen] = react.useState(false);
 			const rootRef = react.useRef(null);
 			const listRef = react.useRef(null);
@@ -2289,10 +2914,11 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			}, react.createElement("button", {
 				type: "button",
 				className: "ct-select",
+				disabled,
 				"aria-haspopup": "menu",
-				"aria-expanded": open,
+				"aria-expanded": open && !disabled,
 				onClick: () => setOpen(!open)
-			}, react.createElement("span", { className: "ct-select-label" }, selected?.label ?? ""), react.createElement("span", { className: "ct-select-chevron" }, react.createElement(IconChevron, null))), open ? react.createElement("div", {
+			}, react.createElement("span", { className: "ct-select-label" }, selected?.label ?? ""), react.createElement("span", { className: "ct-select-chevron" }, react.createElement(IconChevron, null))), open && !disabled ? react.createElement("div", {
 				ref: listRef,
 				className: "ct-menu-list",
 				style: {
@@ -2314,27 +2940,622 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 						setOpen(false);
 						onSelect(o.value);
 					}
-				}, react.createElement("span", { className: "ct-menu-item-label" }, o.label), sel ? react.createElement(IconCheck, null) : null);
+				}, react.createElement("span", { className: "ct-menu-item-label" }, o.label), sel ? react.createElement(IconCheck, { className: "ct-menu-check" }) : null);
 			})) : null);
 		}
+		/** Accessible on/off switch used to enable the custom theme. */
+		function Switch(props) {
+			const { checked, label, onChange } = props;
+			return react.createElement("button", {
+				type: "button",
+				role: "switch",
+				"aria-checked": checked,
+				"aria-label": label,
+				className: checked ? "ct-switch ct-switch-on" : "ct-switch",
+				onClick: () => onChange(!checked)
+			}, react.createElement("span", { className: "ct-switch-knob" }));
+		}
+		/**
+		* Confirmation dialog for destructive actions, mirroring DSH's own Modal
+		* (design-platform mask token + blur, r24 card on layer-2, prominent shadow).
+		* Rendered inline rather than through a portal so it needs no react-dom import.
+		*/
+		function ConfirmDialog(props) {
+			const { title, description, confirmLabel, cancelLabel, onConfirm, onCancel } = props;
+			react.useEffect(() => {
+				const onKey = (e) => {
+					if (e.key === "Escape") onCancel();
+				};
+				document.addEventListener("keydown", onKey);
+				return () => document.removeEventListener("keydown", onKey);
+			}, [onCancel]);
+			return react.createElement("div", { className: "ct-modal-root" }, react.createElement("div", {
+				className: "ct-modal-mask",
+				"aria-hidden": true,
+				onClick: onCancel
+			}), react.createElement("div", {
+				className: "ct-modal-card",
+				role: "dialog",
+				"aria-modal": true,
+				"aria-label": title
+			}, react.createElement("div", { className: "ct-modal-title" }, title), react.createElement("div", { className: "ct-modal-desc" }, description), react.createElement("div", { className: "ct-modal-footer" }, react.createElement("button", {
+				type: "button",
+				className: "ct-btn",
+				onClick: onCancel
+			}, cancelLabel), react.createElement("button", {
+				type: "button",
+				className: "ct-btn ct-btn-danger",
+				onClick: onConfirm
+			}, confirmLabel))));
+		}
+		/** Which banner a failed roster call deserves. */
+		function toastKeyFor(error) {
+			return error instanceof ThemeApiUnavailableError ? "custom.toast.unavailable" : "custom.toast.failed";
+		}
+		/**
+		* Transient confirmation banner: a leading result badge plus the copy, top
+		* center, sliding in, holding, fading out, then reporting done so the owner can
+		* unmount it. Metrics, tokens, badge and timing follow DSH's own toast — the
+		* badge is the success circle its confirmations wear — but the component is
+		* local: the plugin must keep answering a save on a host that does not share
+		* the primitives module.
+		*
+		* TOAST_HOLD_MS and TOAST_FADE_MS have to agree with the `ct-toast` animation
+		* in the injected stylesheet, which owns the visual timing.
+		* @param props.text - resolved, already-localized copy.
+		* @param props.onDone - called once the fade completes; unmount the toast here.
+		*/
+		function Toast(props) {
+			const { text, onDone } = props;
+			react.useEffect(() => {
+				const timer = setTimeout(onDone, 4e3);
+				return () => clearTimeout(timer);
+			}, [onDone]);
+			return react.createElement("div", {
+				className: "ct-toast",
+				role: "status"
+			}, react.createElement(ToastBadge), react.createElement("span", { className: "ct-toast-text" }, text));
+		}
+		/** The leading badge every confirmation wears: a success ring around the check. */
+		function ToastBadge() {
+			return react.createElement("span", {
+				className: "ct-toast-icon",
+				"aria-hidden": true
+			}, react.createElement(IconCheck, { size: 12 }));
+		}
+		/**
+		* Plus glyph for the add button, path data taken verbatim from DSH's own
+		* `IconPlusOutline16` so the two controls read as the same affordance.
+		*/
+		function IconPlus(props) {
+			const { size = 14 } = props;
+			return react.createElement("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-hidden": true,
+				focusable: false
+			}, react.createElement("path", {
+				d: "M8.64453 1.5V7.34961H14.5V8.65039H8.64453V14.5H7.34473V8.65039H1.5V7.34961H7.34473V1.5H8.64453Z",
+				fill: "currentColor"
+			}));
+		}
+		/**
+		* Lucide `edit` (the pencil in a square), path data verbatim. Row actions are
+		* icon-only, so the glyph has to read as the label the accessible name still
+		* carries.
+		*/
+		function IconEdit(props) {
+			const { size = 14 } = props;
+			return react.createElement("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-hidden": true,
+				focusable: false
+			}, react.createElement("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }), react.createElement("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" }));
+		}
+		/** Lucide `trash`, path data verbatim; the row's danger action. */
+		function IconTrash(props) {
+			const { size = 14 } = props;
+			return react.createElement("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-hidden": true,
+				focusable: false
+			}, react.createElement("path", { d: "M3 6h18" }), react.createElement("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }), react.createElement("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }), react.createElement("line", {
+				x1: 10,
+				y1: 11,
+				x2: 10,
+				y2: 17
+			}), react.createElement("line", {
+				x1: 14,
+				y1: 11,
+				x2: 14,
+				y2: 17
+			}));
+		}
+		/** Lucide `share`, path data verbatim; sends one theme out as an archive. */
+		function IconShare(props) {
+			const { size = 14 } = props;
+			return react.createElement("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-hidden": true,
+				focusable: false
+			}, react.createElement("path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" }), react.createElement("polyline", { points: "16 6 12 2 8 6" }), react.createElement("line", {
+				x1: 12,
+				y1: 2,
+				x2: 12,
+				y2: 15
+			}));
+		}
+		/** Lucide `download`, path data verbatim; takes one archive in. */
+		function IconDownload(props) {
+			const { size = 14 } = props;
+			return react.createElement("svg", {
+				width: size,
+				height: size,
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				xmlns: "http://www.w3.org/2000/svg",
+				"aria-hidden": true,
+				focusable: false
+			}, react.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), react.createElement("polyline", { points: "7 10 12 15 17 10" }), react.createElement("line", {
+				x1: 12,
+				y1: 15,
+				x2: 12,
+				y2: 3
+			}));
+		}
+		/**
+		* One collapsed saved-theme card: the name activates the theme, and the trailing
+		* controls export it, open the editor or delete it. The card as a whole is a
+		* click target too, but its controls own their clicks.
+		*/
+		function ThemeCard(props) {
+			const { entry, active, disabled, t, onActivate, onExport, onEdit, onDelete } = props;
+			/**
+			* One square icon action; `danger` is the tinted delete variant. The glyph is
+			* decorative, so the label travels as the accessible name instead of as text,
+			* and as `data-tip` for the hover tooltip. `leave` marks the button on the
+			* markup the outside-click guard watches (see the guard's own comment).
+			*/
+			const action = (label, icon, onClick, variant) => react.createElement("button", {
+				type: "button",
+				className: variant === "danger" ? "ct-list-btn ct-list-btn-danger ct-tip" : "ct-list-btn ct-tip",
+				"aria-label": label,
+				"data-tip": label,
+				...variant === "leave" ? {
+					"data-ct-leave": "true",
+					"data-ct-entry": entry.id
+				} : {},
+				onClick
+			}, icon);
+			return react.createElement("div", {
+				className: "ct-list-row",
+				"data-ct-leave": "true",
+				"data-ct-entry": entry.id,
+				onClick: disabled ? void 0 : onActivate
+			}, react.createElement("span", { className: "ct-list-identity" }, react.createElement("button", {
+				className: "ct-list-name",
+				type: "button",
+				disabled,
+				onClick: (e) => {
+					e.stopPropagation();
+					onActivate();
+				}
+			}, entry.name)), react.createElement("div", {
+				className: "ct-list-actions",
+				onClick: (e) => e.stopPropagation()
+			}, active ? react.createElement("span", { className: "ct-list-badge" }, t("custom.inUse")) : null, action(t("custom.edit"), react.createElement(IconEdit, { size: 14 }), onEdit, "leave"), action(t("custom.export"), react.createElement(IconShare, { size: 14 }), onExport), action(t("custom.delete"), react.createElement(IconTrash, { size: 14 }), onDelete, "danger")));
+		}
+		/**
+		* Which appearance the colour dots edit. `system` resolves through the same
+		* media query the shell uses, so the editor opens on what is on screen.
+		*/
+		function effectiveMode(scheme) {
+			if (scheme === "dark") return "dark";
+			if (scheme === "light") return "light";
+			try {
+				return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+			} catch {
+				return "light";
+			}
+		}
 		function ThemePanel(props) {
-			const { theme, getPreset, setPreset, t } = props;
+			const { theme, getSelection, setSelection, getCustom, setCustom, setCustomBase, resetCustom, saved, getHostToast, t, onRequestClose } = props;
 			let initScheme = "system";
 			try {
 				const snap = theme?.getTheme();
 				if (snap?.preference) initScheme = snap.preference;
 			} catch {}
 			const [scheme, setScheme] = react.useState(initScheme);
-			const [active, setActive] = react.useState(() => getPreset());
-			function pickScheme(id) {
+			const [seedMode, setSeedMode] = react.useState(() => effectiveMode(initScheme));
+			react.useEffect(() => {
+				setSeedMode(effectiveMode(scheme));
+			}, [scheme]);
+			const [selection, setSelectionState] = react.useState(() => getSelection());
+			const [custom, setCustomState] = react.useState(() => getCustom().theme);
+			const [shownPreset, setShownPreset] = react.useState(() => {
+				const initial = getSelection();
+				return initial === CUSTOM_SELECTION ? getCustom().base : initial;
+			});
+			const [list, setList] = react.useState(() => saved.list());
+			const [activeId, setActiveId] = react.useState(() => saved.activeId());
+			const [pendingDelete, setPendingDelete] = react.useState(null);
+			const [importing, setImporting] = react.useState(false);
+			/** The hidden picker the import button opens. */
+			const importInputRef = react.useRef(null);
+			const [editing, setEditing] = react.useState(null);
+			const [confirmClose, setConfirmClose] = react.useState(false);
+			const [pendingLeave, setPendingLeave] = react.useState(null);
+			const editingRef = react.useRef(null);
+			editingRef.current = editing;
+			const savingRef = react.useRef(false);
+			const schemeRef = react.useRef(scheme);
+			schemeRef.current = scheme;
+			const dirtyRef = react.useRef(false);
+			dirtyRef.current = editing !== null && isDirty(editing, custom);
+			const confirmCloseRef = react.useRef(false);
+			confirmCloseRef.current = confirmClose;
+			const pendingLeaveRef = react.useRef(null);
+			pendingLeaveRef.current = pendingLeave;
+			const listRef = react.useRef(list);
+			listRef.current = list;
+			const pendingDeleteRef = react.useRef(null);
+			pendingDeleteRef.current = pendingDelete;
+			const [toast, setToast] = react.useState(null);
+			const toastSeq = react.useRef(0);
+			function showToast(text) {
+				toastSeq.current += 1;
+				setToast({
+					seq: toastSeq.current,
+					text
+				});
+			}
+			/** Re-read both the list and the active pointer after any list mutation. */
+			function syncSaved() {
+				setList(saved.list());
+				setActiveId(saved.activeId());
+			}
+			react.useEffect(() => {
+				let cancelled = false;
+				saved.refresh().then(() => {
+					if (!cancelled) syncSaved();
+				}).catch((error) => {
+					if (!cancelled) showToast(t(toastKeyFor(error)));
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, []);
+			/** Run one roster mutation, surfacing a failed round trip as a banner. */
+			async function mutate(operation) {
+				try {
+					return await operation();
+				} catch (error) {
+					showToast(t(toastKeyFor(error)));
+					return null;
+				}
+			}
+			/** Load a card: the store moves the active pointer itself, so `syncSaved`
+			* re-reads the badge rather than a separate `setActive` call. */
+			function onLoadSaved(id) {
+				const next = saved.load(id);
+				if (next) setCustomState(next);
+				syncSaved();
+			}
+			/** Snapshot the state an edit must return to when it is cancelled. */
+			function beginEditing(id, name, originName, originTheme) {
+				return {
+					id,
+					name,
+					originId: saved.activeId(),
+					originDraft: getCustom().theme,
+					originName,
+					originTheme,
+					originScheme: schemeRef.current
+				};
+			}
+			/** Commit an appearance preference, through the Theme service when it is there. */
+			function applyAppearance(id) {
 				setScheme(id);
 				try {
 					theme?.setTheme(id);
 				} catch {}
 			}
+			/**
+			* Preview an appearance on the whole page while its colours are edited: a
+			* custom theme carries both variants, so the other one's seeds are only
+			* visible once the page actually wears that appearance. A no-op when the page
+			* already resolves to `mode` — clicking the active half of the toggle must not
+			* quietly turn a `system` preference into a pinned one.
+			*/
+			function previewAppearance(mode) {
+				if (effectiveMode(schemeRef.current) === mode) return;
+				applyAppearance(mode);
+			}
+			/**
+			* End a preview: put the appearance the editor opened on back. The preference
+			* is a global setting the mode toggle only borrows, so it must not survive the
+			* editor — not even on save, which commits the colours alone.
+			*/
+			function restoreAppearance(open) {
+				if (schemeRef.current === open.originScheme) return;
+				applyAppearance(open.originScheme);
+			}
+			/**
+			* Undo an open (unsaved) edit: editing previews live and persists on every
+			* change, so abandoning the card has to write the pre-edit theme back.
+			*/
+			function revertEditing(open) {
+				restoreAppearance(open);
+				if (open.originId) onLoadSaved(open.originId);
+				else {
+					setCustom(open.originDraft);
+					setCustomState(open.originDraft);
+					saved.setActive(null);
+				}
+			}
+			react.useEffect(() => () => {
+				const open = editingRef.current;
+				if (!open || savingRef.current) return;
+				if (schemeRef.current !== open.originScheme) try {
+					theme?.setTheme(open.originScheme);
+				} catch {}
+				if (open.originId) saved.load(open.originId);
+				else {
+					setCustom(open.originDraft);
+					saved.setActive(null);
+				}
+			}, []);
+			react.useEffect(() => {
+				/** The header button carrying the `settings.close` seat, if `node` is in it. */
+				function isCloseButton(node) {
+					const seat = node.ownerDocument.querySelector("[data-slot=\"settings.close\"]");
+					const button = node.closest("button");
+					return !!seat && !!button && button.contains(seat);
+				}
+				/** The settings panel itself; the close seat is unique to it. */
+				function settingsPanel() {
+					return document.querySelector("[data-slot=\"settings.close\"]")?.closest("[role=\"dialog\"]") ?? null;
+				}
+				/**
+				* Whether `node` sits on a nav *cell* — the buttons that switch sections —
+				* rather than anywhere else in the rail. Cells are the only buttons in the
+				* nav, and the shell marks the active one with `aria-current`; taking that
+				* button's parent gives the cell list itself, which still matches once the
+				* active cell moves to whatever was just clicked.
+				*/
+				function isNavCell(panel, node) {
+					const list = panel?.querySelector("nav button[aria-current]")?.parentElement;
+					const button = node.closest("button");
+					return !!list && !!button && list.contains(button);
+				}
+				function onKeyDown(e) {
+					if (e.key !== "Escape") return;
+					if (confirmCloseRef.current || pendingLeaveRef.current) {
+						e.preventDefault();
+						e.stopPropagation();
+						setConfirmClose(false);
+						setPendingLeave(null);
+						return;
+					}
+					if (!dirtyRef.current || !onRequestClose) return;
+					e.preventDefault();
+					e.stopPropagation();
+					setConfirmClose(true);
+				}
+				function onClick(e) {
+					if (!dirtyRef.current || confirmCloseRef.current || pendingLeaveRef.current || pendingDeleteRef.current) return;
+					const target = e.target instanceof Element ? e.target : null;
+					if (!target) return;
+					if (target.closest("[data-ct-editor]")) return;
+					const panel = settingsPanel();
+					if (!!panel && !panel.contains(target) || isCloseButton(target)) {
+						if (!onRequestClose) return;
+						e.preventDefault();
+						e.stopPropagation();
+						setConfirmClose(true);
+						return;
+					}
+					if (!panel || !panel.contains(target)) return;
+					if (isNavCell(panel, target)) {
+						if (!onRequestClose) return;
+						e.preventDefault();
+						e.stopPropagation();
+						setConfirmClose(true);
+						return;
+					}
+					const leave = target.closest("[data-ct-leave]");
+					if (!leave) return;
+					const entry = listRef.current.find((item) => item.id === leave.getAttribute("data-ct-entry"));
+					if (!entry) return;
+					e.preventDefault();
+					e.stopPropagation();
+					setPendingLeave({
+						entry,
+						edit: !!target.closest("button[data-ct-leave]")
+					});
+				}
+				document.addEventListener("keydown", onKeyDown, true);
+				document.addEventListener("click", onClick, true);
+				return () => {
+					document.removeEventListener("keydown", onKeyDown, true);
+					document.removeEventListener("click", onClick, true);
+				};
+			}, [onRequestClose]);
+			/** Open a fresh, unsaved theme seeded from the currently selected preset. */
+			function startAdd() {
+				const origin = beginEditing(null, nextThemeName(t("custom.defaultName"), list.map((e) => e.name)), "", getCustom().theme);
+				setCustomBase(shownPreset);
+				const draft = resetCustom();
+				setEditing(origin);
+				setCustomState(draft);
+			}
+			/** Open an existing card for editing; it also becomes the previewed theme. */
+			function startEdit(entry) {
+				const next = beginEditing(entry.id, entry.name, entry.name, entry.theme);
+				setEditing(next);
+				onLoadSaved(entry.id);
+			}
+			/** Discard the open editor and put the previously applied theme back. */
+			function cancelEdit() {
+				if (!editing) return;
+				revertEditing(editing);
+				setEditing(null);
+				syncSaved();
+			}
+			/**
+			* Send one card out as an archive. Export never touches the draft or the
+			* roster, so it stays available while an editor is open and needs no guard.
+			*/
+			async function exportCard(entry) {
+				try {
+					await exportTheme(entry.id, entry.name);
+					showToast(t("custom.toast.exported").replace("{0}", entry.name));
+				} catch (error) {
+					showToast(t(error instanceof ThemeApiUnavailableError ? "custom.toast.unavailable" : "custom.toast.failed"));
+				}
+			}
+			/**
+			* Take one archive in. The Host validates the archive and writes the theme it
+			* carried — a theme is a document, so an import stores exactly what an export
+			* packed, with the Host choosing the id and a free name. The draft is never
+			* involved, so importing leaves an open editor exactly as it was.
+			*/
+			async function importArchive(file) {
+				setImporting(true);
+				try {
+					const imported = await importTheme(file);
+					await reloadRoster();
+					showToast(t("custom.toast.imported").replace("{0}", imported.name));
+				} catch (error) {
+					showToast(importFailureMessage(t, error));
+				} finally {
+					setImporting(false);
+				}
+			}
+			/**
+			* Re-read the roster after a write the store did not make. The import route is
+			* the Host's own: the cached list still holds the pre-import roster, so without
+			* this the new card only appears once some later mutation refreshes the cache.
+			* A failed re-read is not a failed import — the theme is stored either way — so
+			* the card is left to the next roster mutation rather than reported as an error.
+			*/
+			async function reloadRoster() {
+				try {
+					await saved.refresh();
+					syncSaved();
+				} catch {}
+			}
+			/** Open the picker, clearing the previous choice so the same file can be re-picked. */
+			function startImport() {
+				const input = importInputRef.current;
+				if (!input) return;
+				input.value = "";
+				input.click();
+			}
+			function onImportPicked(e) {
+				const file = e.target.files?.[0];
+				e.target.value = "";
+				if (file) importArchive(file);
+			}
+			/** Commit the open editor: create a new entry, or update the one being edited. */
+			async function saveEdit() {
+				if (!editing) return;
+				const name = editing.name.trim() || t("custom.defaultName");
+				const id = editing.id;
+				savingRef.current = true;
+				const next = await mutate(() => id === null ? saved.create(name) : saved.update(id, name));
+				savingRef.current = false;
+				if (next === null) return;
+				setEditing(null);
+				restoreAppearance(editing);
+				syncSaved();
+				setCustomState(getCustom().theme);
+				showToast(t("custom.toast.saved"));
+			}
+			async function onConfirmDelete() {
+				if (!pendingDelete) return;
+				const id = pendingDelete.id;
+				setPendingDelete(null);
+				setEditing((cur) => cur?.id === id ? null : cur);
+				const next = await mutate(() => saved.remove(id));
+				if (next === null) return;
+				setActiveId(saved.activeId());
+				setCustomState(getCustom().theme);
+				setList(saved.list());
+				if (next.length === 0) {
+					setEditing(null);
+					setCustomBase(shownPreset);
+					setCustomState(resetCustom());
+				}
+			}
+			function pickScheme(id) {
+				applyAppearance(id);
+				setEditing((cur) => cur ? {
+					...cur,
+					originScheme: id
+				} : cur);
+			}
+			/**
+			* The preset picker. Unreachable while custom mode is on — the picker is
+			* disabled then — so this only ever applies the chosen preset.
+			*/
 			function pickPreset(id) {
-				setActive(id);
-				setPreset(id);
+				setSelectionState(id);
+				setSelection(id);
+				setShownPreset(id);
+			}
+			/**
+			* The custom switch. Preset and custom are independent selections: turning
+			* custom on leaves the preset row untouched, and turning it off goes back to
+			* the preset the user had chosen, not to the custom theme's own base.
+			*/
+			function toggleCustom(on) {
+				if (on) {
+					setSelectionState(CUSTOM_SELECTION);
+					setSelection(CUSTOM_SELECTION);
+					setCustomState(getCustom().theme);
+					return;
+				}
+				if (editing) revertEditing(editing);
+				setEditing(null);
+				setSelectionState(shownPreset);
+				setSelection(shownPreset);
+				setShownPreset(shownPreset);
+			}
+			function editCustom(next) {
+				setCustomState(next);
+				setCustom(next);
 			}
 			const schemeOptions = [
 				{
@@ -2350,20 +3571,249 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					label: t("scheme.system")
 				}
 			];
+			const customOn = selection === CUSTOM_SELECTION;
+			const children = [
+				react.createElement("div", {
+					className: "ct-row",
+					key: "appearance"
+				}, react.createElement("div", { className: "ct-row-main" }, react.createElement("div", { className: "ct-row-title" }, t("appearance.title")), react.createElement("div", { className: "ct-row-desc" }, t("appearance.desc"))), react.createElement(SchemeMenu, {
+					value: scheme,
+					options: schemeOptions,
+					onSelect: pickScheme
+				})),
+				react.createElement("div", {
+					className: "ct-row",
+					key: "presets"
+				}, react.createElement("div", { className: "ct-row-main" }, react.createElement("div", { className: "ct-row-title" }, t("presets.title")), react.createElement("div", { className: "ct-row-desc" }, t(customOn ? "presets.disabled" : "presets.desc"))), react.createElement(SchemeMenu, {
+					value: customOn ? shownPreset : selection,
+					options: presetOptions,
+					onSelect: (v) => pickPreset(v),
+					disabled: customOn
+				})),
+				react.createElement("div", {
+					className: "ct-row ct-row-flush",
+					key: "custom-toggle"
+				}, react.createElement("div", { className: "ct-row-main" }, react.createElement("div", { className: "ct-row-title" }, t("custom.title")), react.createElement("div", { className: "ct-row-desc" }, t("custom.toggle.desc"))), react.createElement(Switch, {
+					checked: customOn,
+					label: t("custom.title"),
+					onChange: toggleCustom
+				}))
+			];
+			if (customOn) {
+				/** A group row: its name on the left, every seed's dot on the right. */
+				const dotRow = (key, label, dots) => react.createElement("div", {
+					className: "ct-seed-row",
+					key
+				}, react.createElement("div", { className: "ct-seed-label" }, label), react.createElement("div", { className: "ct-seed-dots" }, ...dots.map((d) => react.createElement("label", {
+					key: d.key,
+					className: "ct-seed-dot ct-tip",
+					style: { background: d.value },
+					"data-tip": d.name
+				}, react.createElement("input", {
+					className: "ct-seed-input",
+					type: "color",
+					value: d.value,
+					"aria-label": `${d.name} — ${d.hint}`,
+					onChange: (e) => d.onChange(e.target.value.toUpperCase())
+				})))));
+				const pair = (key, title, desc) => ({
+					key,
+					name: t(title),
+					hint: t(desc),
+					value: custom[key][seedMode],
+					onChange: (v) => editCustom({
+						...custom,
+						[key]: {
+							...custom[key],
+							[seedMode]: v
+						}
+					})
+				});
+				const neutralDots = NEUTRAL_ROLES.map((role) => {
+					const end = neutralEndForRole(seedMode, role);
+					return {
+						key: `neutral-${end}`,
+						name: t(role === "background" ? "custom.neutral.roleBackground" : "custom.neutral.roleForeground"),
+						hint: `${t("custom.neutral.title")} · ${t("custom.neutral.desc")} — ${t(end === "lightest" ? "custom.neutral.lightest" : "custom.neutral.darkest")}`,
+						value: custom.neutral[seedMode][end],
+						onChange: (v) => editCustom({
+							...custom,
+							neutral: {
+								...custom.neutral,
+								[seedMode]: {
+									...custom.neutral[seedMode],
+									[end]: v
+								}
+							}
+						})
+					};
+				});
+				const seedDots = [
+					pair("accent", "custom.accent.title", "custom.accent.desc"),
+					...neutralDots,
+					pair("green", "custom.green.title", "custom.green.desc"),
+					pair("amber", "custom.amber.title", "custom.amber.desc"),
+					pair("red", "custom.red.title", "custom.red.desc")
+				];
+				const shikiDots = SHIKI_KEYS.map((k) => ({
+					key: k,
+					name: t(`shiki.${k}`),
+					hint: t("custom.shiki.desc"),
+					value: custom.shiki[k][seedMode],
+					onChange: (v) => editCustom({
+						...custom,
+						shiki: {
+							...custom.shiki,
+							[k]: {
+								...custom.shiki[k],
+								[seedMode]: v
+							}
+						}
+					})
+				}));
+				/** The light/dark segmented control above the dots. */
+				const modeButton = (id, label) => react.createElement("button", {
+					key: id,
+					type: "button",
+					className: seedMode === id ? "ct-mode-btn ct-mode-btn-on" : "ct-mode-btn",
+					"aria-pressed": seedMode === id,
+					onClick: () => {
+						setSeedMode(id);
+						previewAppearance(id);
+					}
+				}, label);
+				const modeToggle = react.createElement("div", {
+					className: "ct-mode",
+					role: "group",
+					"aria-label": t("custom.mode.label")
+				}, modeButton("light", t("custom.seed.light")), modeButton("dark", t("custom.seed.dark")));
+				const editorName = react.createElement("input", {
+					className: "ct-editor-name",
+					type: "text",
+					value: editing?.name ?? "",
+					placeholder: t("custom.name.placeholder"),
+					"aria-label": t("custom.name.placeholder"),
+					autoFocus: true,
+					onChange: (e) => setEditing((cur) => cur ? {
+						...cur,
+						name: e.target.value
+					} : cur),
+					onKeyDown: (e) => {
+						if (e.key === "Enter") saveEdit();
+						else if (e.key === "Escape") cancelEdit();
+					}
+				});
+				const editorActions = react.createElement("div", { className: "ct-editor-actions" }, react.createElement("button", {
+					type: "button",
+					className: "ct-btn",
+					onClick: cancelEdit
+				}, t("custom.cancel")), react.createElement("button", {
+					type: "button",
+					className: "ct-btn ct-btn-primary",
+					onClick: () => void saveEdit()
+				}, t("custom.save")));
+				const editorCard = (key) => react.createElement("div", {
+					className: "ct-editor",
+					key,
+					"data-ct-editor": "true"
+				}, react.createElement("div", { className: "ct-editor-head" }, editorName, modeToggle), dotRow("seeds", t("custom.group.seeds"), seedDots), dotRow("shiki", t("custom.group.shiki"), shikiDots), editorActions);
+				const cards = list.map((entry) => editing && editing.id === entry.id ? editorCard(entry.id) : react.createElement(ThemeCard, {
+					key: entry.id,
+					entry,
+					active: activeId === entry.id,
+					disabled: editing !== null,
+					t,
+					onActivate: () => onLoadSaved(entry.id),
+					onExport: () => void exportCard(entry),
+					onEdit: () => startEdit(entry),
+					onDelete: () => setPendingDelete(entry)
+				}));
+				if (editing && editing.id === null) cards.push(editorCard("new-editor"));
+				children.push(react.createElement("div", {
+					className: "ct-list",
+					key: "saved-list"
+				}, ...cards), react.createElement("div", {
+					className: "ct-add-row",
+					key: "add-row"
+				}, react.createElement("button", {
+					key: "import",
+					type: "button",
+					className: "ct-add-btn",
+					disabled: importing,
+					onClick: startImport
+				}, react.createElement(IconDownload, null), t("custom.import")), react.createElement("button", {
+					key: "add",
+					type: "button",
+					className: "ct-add-btn",
+					disabled: editing !== null,
+					onClick: startAdd
+				}, react.createElement(IconPlus, null), t("custom.add")), react.createElement("input", {
+					key: "import-input",
+					ref: importInputRef,
+					type: "file",
+					accept: `${THEME_ARCHIVE_EXTENSION},application/zip`,
+					style: { display: "none" },
+					onChange: onImportPicked
+				})));
+			}
+			if (pendingDelete) children.push(react.createElement(ConfirmDialog, {
+				key: "confirm-delete",
+				title: t("custom.delete.title"),
+				description: t("custom.delete.desc").replace("{0}", pendingDelete.name),
+				confirmLabel: t("custom.delete"),
+				cancelLabel: t("custom.cancel"),
+				onConfirm: onConfirmDelete,
+				onCancel: () => setPendingDelete(null)
+			}));
+			if (confirmClose && editing && onRequestClose) children.push(react.createElement(ConfirmDialog, {
+				key: "confirm-close",
+				title: t("custom.unsaved.title"),
+				description: t("custom.unsaved.desc").replace("{0}", editing.name.trim() || t("custom.defaultName")),
+				confirmLabel: t("custom.unsaved.confirm"),
+				cancelLabel: t("custom.unsaved.cancel"),
+				onConfirm: () => {
+					setConfirmClose(false);
+					onRequestClose();
+				},
+				onCancel: () => setConfirmClose(false)
+			}));
+			if (pendingLeave && editing) children.push(react.createElement(ConfirmDialog, {
+				key: "confirm-leave",
+				title: t("custom.unsaved.title"),
+				description: t("custom.unsaved.leaveDesc").replace("{0}", editing.name.trim() || t("custom.defaultName")),
+				confirmLabel: t("custom.unsaved.leaveConfirm"),
+				cancelLabel: t("custom.unsaved.cancel"),
+				onConfirm: () => {
+					const next = pendingLeave;
+					setPendingLeave(null);
+					cancelEdit();
+					if (next.entry) {
+						if (next.edit) startEdit(next.entry);
+						else onLoadSaved(next.entry.id);
+					}
+				},
+				onCancel: () => setPendingLeave(null)
+			}));
+			if (toast) {
+				const onDone = () => setToast((cur) => cur?.seq === toast.seq ? null : cur);
+				const HostToast = getHostToast();
+				children.push(HostToast ? react.createElement(HostToast, {
+					key: `toast-${String(toast.seq)}`,
+					text: toast.text,
+					icon: react.createElement(ToastBadge),
+					onDone
+				}) : react.createElement(Toast, {
+					key: `toast-${String(toast.seq)}`,
+					text: toast.text,
+					onDone
+				}));
+			}
 			return react.createElement("div", { style: {
 				display: "flex",
 				flexDirection: "column",
 				maxWidth: 760,
 				paddingBottom: 8
-			} }, react.createElement("div", { className: "ct-row" }, react.createElement("div", { className: "ct-row-main" }, react.createElement("div", { className: "ct-row-title" }, t("appearance.title")), react.createElement("div", { className: "ct-row-desc" }, t("appearance.desc"))), react.createElement(SchemeMenu, {
-				value: scheme,
-				options: schemeOptions,
-				onSelect: pickScheme
-			})), react.createElement("div", { className: "ct-row" }, react.createElement("div", { className: "ct-row-main" }, react.createElement("div", { className: "ct-row-title" }, t("presets.title")), react.createElement("div", { className: "ct-row-desc" }, t("presets.desc"))), react.createElement(SchemeMenu, {
-				value: active,
-				options: presetOptions,
-				onSelect: (v) => pickPreset(v)
-			})));
+			} }, ...children);
 		}
 		//#endregion
 		//#region src/client/locales.ts
@@ -2379,9 +3829,71 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			"appearance.desc": "深色 / 浅色 / 跟随系统",
 			"presets.title": "预设主题",
 			"presets.desc": "一键套用主流配色方案",
+			"presets.disabled": "自定义主题已启用，关闭后才能选择预设",
 			"scheme.light": "浅色",
 			"scheme.dark": "深色",
-			"scheme.system": "跟随系统"
+			"scheme.system": "跟随系统",
+			"custom.title": "自定义主题",
+			"custom.toggle.desc": "创建属于自己的个性化主题",
+			"custom.group.seeds": "主色/辅助色",
+			"custom.group.shiki": "代码块",
+			"custom.mode.label": "编辑的外观",
+			"custom.neutral.title": "中性色",
+			"custom.neutral.desc": "界面底色与正文。浅色与深色各一条色阶",
+			"custom.neutral.lightest": "最浅色端",
+			"custom.neutral.darkest": "最深色端",
+			"custom.neutral.roleBackground": "背景色",
+			"custom.neutral.roleForeground": "前景色",
+			"custom.accent.title": "主色",
+			"custom.accent.desc": "按钮与强调色（deepseek 与 blue 合并为一组）",
+			"custom.green.title": "成功",
+			"custom.green.desc": "成功状态",
+			"custom.amber.title": "警告",
+			"custom.amber.desc": "警告状态",
+			"custom.red.title": "错误",
+			"custom.red.desc": "错误状态",
+			"custom.shiki.desc": "9 个语法标记的颜色",
+			"custom.seed.light": "浅色",
+			"custom.seed.dark": "深色",
+			"custom.save": "保存",
+			"custom.add": "添加自定义主题",
+			"custom.edit": "编辑",
+			"custom.export": "导出",
+			"custom.import": "导入主题",
+			"custom.name.placeholder": "主题名称",
+			"custom.defaultName": "自定义主题",
+			"custom.inUse": "使用中",
+			"custom.delete": "删除",
+			"custom.cancel": "取消",
+			"custom.toast.saved": "已保存",
+			"custom.toast.failed": "主题文件操作失败",
+			"custom.toast.unavailable": "主题文件接口未就绪，请重启 DSH 服务",
+			"custom.toast.exported": "已导出「{0}」",
+			"custom.toast.imported": "已导入「{0}」",
+			"custom.importFailed.notArchive": "导入失败：不是主题压缩包",
+			"custom.importFailed.noDocument": "导入失败：压缩包缺少 theme.json",
+			"custom.importFailed.badDocument": "导入失败：theme.json 不是有效的主题文件",
+			"custom.importFailed.tooNew": "导入失败：主题文件版本比当前插件更新",
+			"custom.importFailed.media": "导入失败：主题包含媒体文件，暂不支持导入",
+			"custom.importFailed.tooLarge": "导入失败：压缩包超过大小上限",
+			"custom.importFailed.other": "导入失败：{0}",
+			"custom.delete.title": "删除该自定义主题？",
+			"custom.delete.desc": "将删除「{0}」，且无法恢复。",
+			"custom.unsaved.title": "放弃未保存的修改？",
+			"custom.unsaved.desc": "「{0}」的修改尚未保存，关闭设置后将丢失。",
+			"custom.unsaved.confirm": "放弃并关闭",
+			"custom.unsaved.leaveDesc": "「{0}」的修改尚未保存，是否确认放弃？",
+			"custom.unsaved.leaveConfirm": "放弃修改",
+			"custom.unsaved.cancel": "继续编辑",
+			"shiki.constant": "常量",
+			"shiki.string": "字符串",
+			"shiki.comment": "注释",
+			"shiki.keyword": "关键字",
+			"shiki.parameter": "参数",
+			"shiki.function": "函数",
+			"shiki.string-expression": "模板字符串",
+			"shiki.punctuation": "标点",
+			"shiki.link": "链接"
 		};
 		/** English dictionary, checked complete against the zh key set. */
 		const en = {
@@ -2390,15 +3902,78 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			"appearance.desc": "Dark / Light / System",
 			"presets.title": "Preset themes",
 			"presets.desc": "Apply popular color schemes in one click",
+			"presets.disabled": "Custom theme is on — turn it off to choose a preset",
 			"scheme.light": "Light",
 			"scheme.dark": "Dark",
-			"scheme.system": "System"
+			"scheme.system": "System",
+			"custom.title": "Custom theme",
+			"custom.toggle.desc": "Create your own personalized theme",
+			"custom.group.seeds": "Primary/supporting",
+			"custom.group.shiki": "Code block",
+			"custom.mode.label": "Appearance being edited",
+			"custom.neutral.title": "Neutral",
+			"custom.neutral.desc": "Surfaces and body text. One ramp per appearance",
+			"custom.neutral.lightest": "Lightest end",
+			"custom.neutral.darkest": "Darkest end",
+			"custom.neutral.roleBackground": "Background",
+			"custom.neutral.roleForeground": "Foreground",
+			"custom.accent.title": "Accent",
+			"custom.accent.desc": "Buttons and emphasis (deepseek and blue merged into one)",
+			"custom.green.title": "Success",
+			"custom.green.desc": "Success states",
+			"custom.amber.title": "Warning",
+			"custom.amber.desc": "Warning states",
+			"custom.red.title": "Error",
+			"custom.red.desc": "Error states",
+			"custom.shiki.desc": "Colors for the nine syntax tokens",
+			"custom.seed.light": "Light",
+			"custom.seed.dark": "Dark",
+			"custom.save": "Save",
+			"custom.add": "Add custom theme",
+			"custom.edit": "Edit",
+			"custom.export": "Export",
+			"custom.import": "Import theme",
+			"custom.name.placeholder": "Theme name",
+			"custom.defaultName": "Custom theme",
+			"custom.inUse": "In use",
+			"custom.delete": "Delete",
+			"custom.cancel": "Cancel",
+			"custom.toast.saved": "Saved",
+			"custom.toast.failed": "Theme file operation failed",
+			"custom.toast.unavailable": "Theme file API not ready — restart the DSH service",
+			"custom.toast.exported": "Exported \"{0}\"",
+			"custom.toast.imported": "Imported \"{0}\"",
+			"custom.importFailed.notArchive": "Import failed: not a theme archive",
+			"custom.importFailed.noDocument": "Import failed: the archive has no theme.json",
+			"custom.importFailed.badDocument": "Import failed: theme.json is not a usable theme",
+			"custom.importFailed.tooNew": "Import failed: the theme file is newer than this plugin reads",
+			"custom.importFailed.media": "Import failed: the theme carries media, which cannot be imported yet",
+			"custom.importFailed.tooLarge": "Import failed: the archive is over the size limit",
+			"custom.importFailed.other": "Import failed: {0}",
+			"custom.delete.title": "Delete this custom theme?",
+			"custom.delete.desc": "\"{0}\" will be removed. This cannot be undone.",
+			"custom.unsaved.title": "Discard unsaved changes?",
+			"custom.unsaved.desc": "Changes to \"{0}\" have not been saved and will be lost when settings close.",
+			"custom.unsaved.confirm": "Discard and close",
+			"custom.unsaved.leaveDesc": "Changes to \"{0}\" have not been saved. Discard them?",
+			"custom.unsaved.leaveConfirm": "Discard changes",
+			"custom.unsaved.cancel": "Keep editing",
+			"shiki.constant": "Constant",
+			"shiki.string": "String",
+			"shiki.comment": "Comment",
+			"shiki.keyword": "Keyword",
+			"shiki.parameter": "Parameter",
+			"shiki.function": "Function",
+			"shiki.string-expression": "Template string",
+			"shiki.punctuation": "Punctuation",
+			"shiki.link": "Link"
 		};
 		//#endregion
 		//#region src/client/theme.tsx
 		const BASE_CSS = [
 			".ct-select{box-sizing:border-box;display:inline-flex;align-items:center;gap:12px;height:36px;padding:0 14px;border:none;border-radius:18px;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;font-size:14px;line-height:22px;white-space:nowrap;width:auto;min-width:0;max-width:100%;}",
 			".ct-select:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);}",
+			".ct-select:disabled{opacity:.5;cursor:not-allowed;}",
 			".ct-select:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
 			".ct-select-label{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;}",
 			".ct-select-chevron{flex:none;color:var(--dsw-alias-label-tertiary);display:inline-flex;transition:transform 120ms ease;}",
@@ -2418,13 +3993,89 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			".ct-menu-item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
 			".ct-row{border-bottom:1px solid var(--dsw-alias-border-l2);padding:16px 2px;display:flex;align-items:center;gap:16px;}",
 			".ct-row:last-child{border-bottom:none;}",
+			".ct-row-flush{border-bottom:none;}",
 			".ct-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding-right:48px;}",
 			".ct-row-title{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:22px;}",
-			".ct-row-desc{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;line-height:18px;}"
+			".ct-row-desc{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;line-height:18px;}",
+			".ct-seed-row{display:flex;align-items:center;gap:16px;padding:12px 0;}",
+			".ct-seed-label{flex:0 0 auto;min-width:96px;padding-left:3px;font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary);}",
+			".ct-seed-dots{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;}",
+			".ct-seed-dot{position:relative;box-sizing:border-box;display:inline-block;flex:none;width:26px;height:26px;border:1px solid var(--dsw-alias-border-l2);border-radius:50%;cursor:pointer;}",
+			".ct-seed-input{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;padding:0;border:none;background:transparent;opacity:0;cursor:pointer;}",
+			".ct-seed-dot:focus-within{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
+			".ct-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:100;box-sizing:border-box;width:max-content;max-width:220px;padding:3px 7px;border-radius:8px;background:var(--dsw-alias-tooltip-bg);color:var(--dsw-static-neutral-bluish-00);font-size:13px;font-weight:400;line-height:20px;white-space:pre-line;overflow-wrap:break-word;text-align:left;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 120ms ease;}",
+			".ct-seed-dot:hover::after,.ct-seed-dot:focus-within::after{opacity:1;visibility:visible;}",
+			".ct-list-btn:hover::after,.ct-list-btn:focus-visible::after{opacity:1;visibility:visible;}",
+			"@media (prefers-reduced-motion: reduce){.ct-tip::after{transition:none;}}",
+			".ct-list{margin-top:4px;display:flex;flex-direction:column;gap:8px;}",
+			".ct-list-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border:.5px solid var(--dsw-alias-border-l4);border-radius:16px;background:transparent;cursor:pointer;transition:border-color .16s ease,background .16s ease;}",
+			".ct-list-row:hover{background:var(--dsw-alias-interactive-bg-hover);}",
+			".ct-list-identity{display:inline-flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;}",
+			".ct-list-name{min-width:0;text-align:left;border:none;background:transparent;cursor:pointer;font:inherit;font-size:14px;line-height:22px;font-weight:500;color:var(--dsw-alias-label-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;}",
+			".ct-list-name:disabled{cursor:default;}",
+			".ct-list-actions{display:inline-flex;align-items:center;gap:4px;flex:none;margin-left:auto;}",
+			".ct-list-badge{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:14px;background:var(--dsw-alias-bg-module-platform,var(--dsw-alias-bg-layer-2));color:var(--dsw-alias-label-secondary,var(--dsw-alias-label-tertiary));font-size:12px;line-height:18px;white-space:nowrap;}",
+			".ct-list-badge + .ct-list-btn{margin-left:8px;}",
+			".ct-list-btn{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:28px;width:28px;padding:0;border:none;border-radius:14px;background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;line-height:0;}",
+			".ct-list-btn:hover{background:var(--dsw-alias-interactive-bg-hover);}",
+			".ct-list-btn:active{background:var(--dsw-alias-interactive-bg-active);}",
+			".ct-list-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
+			".ct-list-btn:disabled{opacity:.4;cursor:not-allowed;}",
+			".ct-list-btn:disabled:hover{background:transparent;}",
+			".ct-list-btn-danger{color:var(--dsw-alias-state-error-primary);}",
+			".ct-list-btn-danger:hover{background:var(--dsw-alias-interactive-bg-hover-danger);}",
+			".ct-list-btn-danger:active{background:var(--dsw-alias-interactive-bg-hover-danger);}",
+			".ct-editor{padding:16px;border:.5px solid var(--dsw-alias-border-l4);border-radius:16px;background:transparent;display:flex;flex-direction:column;gap:0;}",
+			".ct-editor-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;}",
+			".ct-editor-name{flex:1 1 auto;min-width:0;box-sizing:border-box;height:36px;padding:0 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:14px;line-height:22px;}",
+			".ct-editor-name::placeholder{color:var(--dsw-alias-label-tertiary);}",
+			".ct-editor-name:hover{border-color:var(--dsw-alias-border-l3);}",
+			".ct-editor-name:focus{outline:none;border-color:var(--dsw-alias-border-l3);background:var(--dsw-alias-bg-base);}",
+			".ct-mode{box-sizing:border-box;display:inline-flex;flex:none;height:36px;padding:2px;border-radius:10px;background:var(--dsw-alias-bg-module-platform,var(--dsw-alias-bg-layer-2));}",
+			".ct-mode-btn{box-sizing:border-box;height:32px;padding:0 10px;border:none;border-radius:8px;background:transparent;color:var(--dsw-alias-label-tertiary);cursor:pointer;font:inherit;font-size:12px;line-height:18px;}",
+			".ct-mode-btn:hover{color:var(--dsw-alias-label-primary);}",
+			".ct-mode-btn-on{background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary);}",
+			".ct-mode-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
+			".ct-editor-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:12px;}",
+			".ct-add-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;height:44px;margin-top:8px;padding:0 14px;border:1px dashed var(--dsw-alias-border-l3);border-radius:16px;background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;font-size:14px;line-height:22px;}",
+			".ct-add-btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover);}",
+			".ct-add-btn:disabled{opacity:.4;cursor:default;}",
+			".ct-add-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
+			".ct-add-row{display:flex;align-items:stretch;gap:8px;margin-top:8px;}",
+			".ct-add-row .ct-add-btn{flex:1 1 0;width:auto;margin-top:0;min-width:0;}",
+			".ct-modal-root{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;}",
+			".ct-modal-mask{position:absolute;inset:0;background:var(--dsw-alias-bg-mask-1,rgba(0,0,0,.24));backdrop-filter:var(--dsw-mask-blur,blur(2px));}",
+			".ct-modal-card{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;width:min(380px,100%);padding:24px;border-radius:24px;background:var(--dsw-alias-bg-layer-2);box-shadow:var(--dsw-elevation-prominent);}",
+			".ct-modal-title{font-size:16px;line-height:24px;font-weight:600;color:var(--dsw-alias-label-primary);}",
+			".ct-modal-desc{font-size:13px;line-height:20px;color:var(--dsw-alias-label-tertiary);}",
+			".ct-modal-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:12px;}",
+			".ct-switch{position:relative;flex:none;width:40px;height:24px;padding:0;border:none;border-radius:12px;background:var(--dsw-alias-border-l2);cursor:pointer;transition:background 150ms ease;}",
+			".ct-switch-on{background:var(--dsw-static-deepseek-500,rgb(65,118,230));}",
+			".ct-switch-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform 150ms ease;}",
+			".ct-switch-on .ct-switch-knob{transform:translateX(16px);}",
+			".ct-switch:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
+			".ct-btn{box-sizing:border-box;display:inline-flex;align-items:center;height:34px;padding:0 16px;border:1px solid var(--dsw-alias-border-l2);border-radius:17px;background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;font-size:13px;line-height:20px;}",
+			".ct-btn:hover{background:var(--dsw-alias-interactive-bg-hover);}",
+			".ct-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
+			".ct-btn-primary{background:var(--dsw-static-deepseek-500,rgb(65,118,230));border-color:transparent;color:#fff;}",
+			".ct-btn-primary:hover{background:var(--dsw-static-deepseek-450,var(--dsw-static-deepseek-500,rgb(86,134,254)));}",
+			".ct-btn-danger{background:var(--dsw-static-red-500,rgb(239,68,68));border-color:transparent;color:#fff;}",
+			".ct-btn-danger:hover{background:var(--dsw-static-red-600,var(--dsw-static-red-500,rgb(236,19,19)));}",
+			".ct-toast{position:fixed;top:40px;left:50%;z-index:1100;pointer-events:none;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(640px,calc(100vw - 48px));padding:12px 16px;border-radius:14px;background:var(--dsw-alias-button-contrast-fill);color:var(--dsw-alias-label-primary-inverted);font-size:14px;line-height:22px;box-shadow:var(--dsw-shadow-lv3);transform:translateX(-50%);animation:ct-toast-in 160ms ease-out,ct-toast-fade 1s ease 3s forwards;}",
+			".ct-toast-icon{display:grid;place-items:center;flex:none;width:18px;height:18px;border:1.5px solid var(--dsw-alias-state-success-primary);border-radius:50%;corner-shape:round;color:var(--dsw-alias-state-success-primary);}",
+			".ct-toast-text{min-width:0;}",
+			"@keyframes ct-toast-in{from{opacity:0;transform:translate(-50%,-6px);}to{opacity:1;transform:translate(-50%,0);}}",
+			"@keyframes ct-toast-fade{to{opacity:0;}}",
+			"@media (prefers-reduced-motion: reduce){.ct-toast{animation:ct-toast-fade 1s ease 3s forwards;}}"
 		].join("\n");
-		const NOOP = /* @__PURE__ */ new Set(["native", "dsh"]);
-		function isValidPreset(v) {
-			return !!v && (NOOP.has(v) || v in PRESETS);
+		function isValidSelection(v) {
+			return !!v && (v === CUSTOM_SELECTION || NOOP_PRESET_IDS.has(v) || v in PRESETS);
+		}
+		function isPresetId(v) {
+			return typeof v === "string" && v in PRESETS;
+		}
+		function presetDef(id) {
+			return PRESETS[id] ?? PRESETS.dsh;
 		}
 		function registerTheme(ctx) {
 			const slots = ctx.get("slots");
@@ -2457,44 +4108,253 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					if (!baselineDisposer) baselineDisposer = injector.insert(buildBaseCss());
 				} else if (baselineDisposer) baselineDisposer = release(baselineDisposer);
 			}
-			function getPreset() {
-				for (const key of [THEME_STORAGE_KEY, THEME_STORAGE_KEY_LEGACY]) try {
-					const cur = localStorage.getItem(key);
-					if (!isValidPreset(cur)) continue;
+			/** Raw localStorage access; an absent or blocked store reads as empty, writes are dropped. */
+			function readRaw(key) {
+				try {
+					return localStorage.getItem(key);
+				} catch {
+					return null;
+				}
+			}
+			function writeRaw(key, value) {
+				try {
+					if (value === null) localStorage.removeItem(key);
+					else localStorage.setItem(key, value);
+				} catch {}
+			}
+			function getSelection() {
+				for (const key of [THEME_STORAGE_KEY, THEME_STORAGE_KEY_LEGACY]) {
+					const cur = readRaw(key);
+					if (!isValidSelection(cur)) continue;
 					const normalized = cur === "native" ? "dsh" : cur;
-					if (cur !== normalized) try {
-						localStorage.setItem(THEME_STORAGE_KEY, normalized);
-					} catch {}
-					else if (key === "cooltea-theme-preset") try {
-						localStorage.setItem(THEME_STORAGE_KEY, cur);
-					} catch {}
+					if (cur !== normalized || key === "cooltea-theme-preset") writeRaw(THEME_STORAGE_KEY, normalized);
 					return normalized;
-				} catch {}
+				}
 				return "dsh";
 			}
-			function applyPreset(id) {
-				overrideDispose = release(overrideDispose);
-				fallbackDispose = release(fallbackDispose);
-				if (NOOP.has(id)) {
+			/** The preset the custom seeds derive from, restored from the stored blob. */
+			function customBase() {
+				const env = parseEnvelope(readRaw(CUSTOM_THEME_STORAGE_KEY));
+				if (env && isPresetId(env.base)) return env.base;
+				return lastPreset;
+			}
+			function loadCustom() {
+				const base = customBase();
+				const fallback = extractSeeds(presetDef(base));
+				return {
+					base,
+					theme: normalizeCustom(parseEnvelope(readRaw(CUSTOM_THEME_STORAGE_KEY))?.theme, fallback)
+				};
+			}
+			function persistCustom(theme) {
+				writeRaw(CUSTOM_THEME_STORAGE_KEY, encodeCustom(customBase(), theme));
+			}
+			/**
+			* Choose the preset a future custom theme seeds from, without touching the
+			* colours currently on screen. The custom editor stays the live theme; the
+			* preset is only the template the next "add" inherits.
+			*/
+			function setCustomBase(base) {
+				lastPreset = base;
+				writeRaw(CUSTOM_THEME_STORAGE_KEY, encodeCustom(base, loadCustom().theme));
+			}
+			/**
+			* Install a palette. The override layer for our source is replaced in place
+			* rather than torn down first: `theme.overrideTokens` restacks the same source
+			* atomically, while disposing the old layer emits an extra `theme/change` with
+			* our variables missing. The shell's presenter answers that by removing every
+			* token from `body`, so the whole page falls back to the base palette and
+			* repaints before the new layer lands — twice the DOM work and a visible
+			* flash per change, which is exactly what a dragged colour slider produces.
+			*/
+			function apply(src) {
+				const target = src === CUSTOM_SELECTION ? buildCustomPreset(loadCustom().theme) : src;
+				if (typeof target === "string" && NOOP_PRESET_IDS.has(target)) {
+					overrideDispose = release(overrideDispose);
+					fallbackDispose = release(fallbackDispose);
 					ensureBaseline(false);
 					return;
 				}
 				ensureBaseline(true);
-				const overrides = buildOverrides(id);
+				const overrides = buildOverrides(target);
 				if (theme?.overrideTokens) try {
 					overrideDispose = theme.overrideTokens("dsh-cool-theme", overrides);
+					fallbackDispose = release(fallbackDispose);
 					return;
 				} catch {}
-				fallbackDispose = injector.insert(buildFullCssFallback(id));
+				overrideDispose = release(overrideDispose);
+				fallbackDispose = release(fallbackDispose);
+				fallbackDispose = injector.insert(buildFullCssFallback(target));
 			}
-			function setPreset(id) {
-				try {
-					localStorage.setItem(THEME_STORAGE_KEY, id);
-				} catch {}
-				applyPreset(id);
+			/**
+			* Coalesce a burst of palette applications into one.
+			*
+			* A native colour input fires `change` on every pointer move while its slider
+			* is dragged. Each application rebuilds both ramps, rewrites every token on
+			* `body` and forces a style flush in the shell's presenter, so applying once
+			* per event is what makes the colour editor stutter. The first change lands
+			* immediately and the rest are throttled to one per interval, newest request
+			* winning: the palette the pointer is released on is always the one applied.
+			*/
+			const APPLY_INTERVAL_MS = 80;
+			let pendingApply = null;
+			let applyTimer = null;
+			let lastApplyAt = 0;
+			let disposed = false;
+			/** Run the newest pending application now, if any. */
+			function flushApply() {
+				if (applyTimer !== null) {
+					clearTimeout(applyTimer);
+					applyTimer = null;
+				}
+				const run = pendingApply;
+				pendingApply = null;
+				if (!run) return;
+				lastApplyAt = Date.now();
+				run();
+			}
+			/** Drop a coalesced application, for a fiber that is going away. */
+			function cancelApply() {
+				if (applyTimer !== null) {
+					clearTimeout(applyTimer);
+					applyTimer = null;
+				}
+				pendingApply = null;
+			}
+			/**
+			* Apply a palette, at most once per interval while a burst of edits is
+			* running. The callback is deferred whole, so a dropped intermediate edit
+			* never even rebuilds its ramps; only the newest one is executed.
+			*/
+			function scheduleApply(run) {
+				if (disposed) return;
+				pendingApply = run;
+				const elapsed = Date.now() - lastApplyAt;
+				if (elapsed >= APPLY_INTERVAL_MS) {
+					flushApply();
+					return;
+				}
+				if (applyTimer === null) applyTimer = setTimeout(flushApply, APPLY_INTERVAL_MS - elapsed);
+			}
+			function setSelection(id) {
+				writeRaw(THEME_STORAGE_KEY, id);
+				if (id !== CUSTOM_SELECTION) lastPreset = id;
+				scheduleApply(() => apply(id));
+			}
+			function setCustom(next) {
+				persistCustom(next);
+				scheduleApply(() => apply(buildCustomPreset(next)));
+			}
+			function resetCustom() {
+				const theme = extractSeeds(presetDef(customBase()));
+				persistCustom(theme);
+				scheduleApply(() => apply(buildCustomPreset(theme)));
+				return theme;
+			}
+			const fallbackForBase = (base) => extractSeeds(presetDef(isPresetId(base) ? base : lastPreset));
+			/**
+			* The roster as the Host last reported it; `null` means it has not answered
+			* yet. Files are the source of truth, so this is a read-through cache the
+			* panel renders from, and every mutation is a round trip plus a refresh.
+			*/
+			let themeCache = null;
+			/** The legacy browser list, read only until the Host has answered. */
+			const legacyList = () => decodeList(readRaw(CUSTOM_LIST_STORAGE_KEY), fallbackForBase);
+			/** The roster to render and resolve ids against. */
+			const readList = () => themeCache ?? legacyList();
+			function readActiveId() {
+				const id = readRaw(CUSTOM_ACTIVE_STORAGE_KEY);
+				return id && readList().some((e) => e.id === id) ? id : null;
+			}
+			/**
+			* Adopt the themes this browser saved before they lived in files. Runs once:
+			* the marker keeps a stale browser copy from being migrated twice, and is only
+			* set after a confirmed write, so a failed migration retries next load.
+			*/
+			async function migrateLegacyThemes(hostThemes) {
+				if (readRaw("cool-theme-custom-migrated") !== null) return hostThemes;
+				const adopt = legacyThemesToAdopt(legacyList(), hostThemes);
+				if (adopt.length > 0) await pushThemes(adopt, fallbackForBase);
+				writeRaw(CUSTOM_MIGRATED_STORAGE_KEY, (/* @__PURE__ */ new Date()).toISOString());
+				writeRaw(CUSTOM_LIST_STORAGE_KEY, null);
+				return adopt.length > 0 ? fetchThemes(fallbackForBase) : hostThemes;
 			}
-			applyPreset(getPreset());
+			/** Re-read the roster from the Host, migrating the legacy list on first load. */
+			async function refreshSaved() {
+				themeCache = await migrateLegacyThemes(await fetchThemes(fallbackForBase));
+				return themeCache;
+			}
+			/** Load a saved entry into the draft and make it the active theme. */
+			function loadSaved(id) {
+				const entry = readList().find((e) => e.id === id);
+				if (!entry) return null;
+				if (isPresetId(entry.base)) lastPreset = entry.base;
+				writeRaw(CUSTOM_ACTIVE_STORAGE_KEY, entry.id);
+				writeRaw(CUSTOM_THEME_STORAGE_KEY, encodeCustom(entry.base, entry.theme));
+				scheduleApply(() => apply(buildCustomPreset(entry.theme)));
+				return entry.theme;
+			}
+			const saved = {
+				/** The cached roster, or the legacy browser list until the Host answers. */
+				list: readList,
+				activeId: readActiveId,
+				load: loadSaved,
+				/** Point the "in use" badge at an entry, or clear it entirely. */
+				setActive(id) {
+					writeRaw(CUSTOM_ACTIVE_STORAGE_KEY, id);
+				},
+				refresh: refreshSaved,
+				/** Persist the current draft as a new named entry and make it active. */
+				async create(name) {
+					const draft = loadCustom();
+					const entry = {
+						id: newThemeId(),
+						name,
+						base: draft.base,
+						theme: draft.theme,
+						assets: []
+					};
+					await pushThemes([entry], fallbackForBase);
+					writeRaw(CUSTOM_ACTIVE_STORAGE_KEY, entry.id);
+					return refreshSaved();
+				},
+				/** Write the current draft (and a new name) back to an existing entry. */
+				async update(id, name) {
+					const entry = readList().find((e) => e.id === id);
+					if (!entry) return readList();
+					const draft = loadCustom();
+					await pushThemes([{
+						...entry,
+						name,
+						theme: draft.theme
+					}], fallbackForBase);
+					return refreshSaved();
+				},
+				async remove(id) {
+					if (readRaw("cool-theme-custom-active") === id) writeRaw(CUSTOM_ACTIVE_STORAGE_KEY, null);
+					await removeTheme(id);
+					const next = await refreshSaved();
+					if (readActiveId() === null && next[0]) loadSaved(next[0].id);
+					return next;
+				}
+			};
+			const initialSelection = getSelection();
+			let lastPreset = initialSelection === CUSTOM_SELECTION ? "dsh" : initialSelection;
+			if (initialSelection === CUSTOM_SELECTION) {
+				const env = parseEnvelope(readRaw(CUSTOM_THEME_STORAGE_KEY));
+				if (env && isPresetId(env.base)) lastPreset = env.base;
+			}
+			apply(initialSelection);
+			let sharedToast = null;
+			const modules = ctx.get("modules");
+			try {
+				modules?.import?.("@deepseek-ai/dsh-client-ui-primitives").then((mod) => {
+					if (typeof mod?.Toast === "function") sharedToast = mod.Toast;
+				}).catch(() => {});
+			} catch {}
 			ctx.effect(() => () => {
+				disposed = true;
+				cancelApply();
 				release(pluginCssDisposer);
 				baselineDisposer = release(baselineDisposer);
 				overrideDispose = release(overrideDispose);
@@ -2512,8 +4372,15 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				return slots.register(options, (props) => react.createElement(ThemePanel, {
 					t: props?.t ?? ((key) => zh[key]),
 					theme,
-					getPreset,
-					setPreset
+					getSelection,
+					setSelection,
+					getCustom: loadCustom,
+					setCustom,
+					setCustomBase,
+					resetCustom,
+					saved,
+					getHostToast: () => sharedToast,
+					onRequestClose: typeof props?.close === "function" ? props.close : null
 				}));
 			});
 			const PALETTE_SVG = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M12 22a1 1 0 0 1 0-20a10 9 0 0 1 10 9a5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\"/><circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/></g></svg>";
@@ -2524,18 +4391,16 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				try {
 					currentLabel = t("nav");
 				} catch {}
-				const candidates = new Set([
+				const candidates = [
 					currentLabel,
 					zh.nav,
 					en.nav
-				].filter(Boolean));
+				].filter(Boolean);
 				const cells = document.querySelectorAll("[class*=\"navCell\"], button[class*=\"navCell\"]");
-				const toPatch = [];
-				if (cells.length > 0) cells.forEach((c) => toPatch.push(c));
-				else document.querySelectorAll("[class*=\"nav\"] button").forEach((b) => toPatch.push(b));
+				const toPatch = cells.length > 0 ? Array.from(cells) : Array.from(document.querySelectorAll("[class*=\"nav\"] button"));
 				for (const cell of toPatch) {
 					const text = ((cell.querySelector("[class*=\"navLabel\"]") || cell)?.textContent || cell.textContent || "").trim();
-					if (!Array.from(candidates).some((lbl) => text === lbl || text.includes(lbl))) continue;
+					if (!candidates.some((lbl) => text === lbl || text.includes(lbl))) continue;
 					if (cell.querySelector("[data-palette-icon]")) continue;
 					const svg = cell.querySelector("svg");
 					if (!svg) continue;