dsh-cool-theme 0.4.0 → 0.5.0

package/lib/client.js

@@ -34,6 +34,12 @@ 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`;
 		//#endregion
 		//#region src/client/presets/_helpers.ts
 		/**
@@ -1979,6 +1985,11 @@ 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
@@ -2157,10 +2168,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 +2191,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 +2240,486 @@ 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" });
+		}
+		/**
+		* 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;
+		/** 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 +2732,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 +2780,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 +2806,429 @@ 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"
+			}));
+		}
+		/**
+		* One collapsed saved-theme card: the name activates the theme, and the trailing
+		* controls 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, onEdit, onDelete } = props;
+			/** One dense capsule action; `danger` is the borderless delete variant. */
+			const action = (label, onClick, danger) => react.createElement("button", {
+				type: "button",
+				className: danger ? "ct-list-btn ct-list-btn-danger" : "ct-list-btn",
+				onClick
+			}, label);
+			return react.createElement("div", {
+				className: "ct-list-row",
+				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"), onEdit), action(t("custom.delete"), onDelete, true)));
+		}
+		/**
+		* 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 [editing, setEditing] = react.useState(null);
+			const [confirmClose, setConfirmClose] = react.useState(false);
+			const [confirmLeave, setConfirmLeave] = react.useState(false);
+			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 confirmLeaveRef = react.useRef(false);
+			confirmLeaveRef.current = confirmLeave;
+			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;
+				}
+			}
+			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;
+				}
+				function onKeyDown(e) {
+					if (e.key !== "Escape") return;
+					if (confirmCloseRef.current || confirmLeaveRef.current) {
+						e.preventDefault();
+						e.stopPropagation();
+						setConfirmClose(false);
+						setConfirmLeave(false);
+						return;
+					}
+					if (!dirtyRef.current || !onRequestClose) return;
+					e.preventDefault();
+					e.stopPropagation();
+					setConfirmClose(true);
+				}
+				function onClick(e) {
+					if (!dirtyRef.current || confirmCloseRef.current || confirmLeaveRef.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;
+					e.preventDefault();
+					e.stopPropagation();
+					setConfirmLeave(true);
+				}
+				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();
+			}
+			/** 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 +3244,227 @@ 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",
+					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),
+					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("button", {
+					key: "add",
+					type: "button",
+					className: "ct-add-btn",
+					disabled: editing !== null,
+					onClick: startAdd
+				}, react.createElement(IconPlus, null), t("custom.add")));
+			}
+			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 (confirmLeave && 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: () => {
+					setConfirmLeave(false);
+					cancelEdit();
+				},
+				onCancel: () => setConfirmLeave(false)
+			}));
+			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 +3480,60 @@ 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.name.placeholder": "主题名称",
+			"custom.defaultName": "自定义主题",
+			"custom.inUse": "使用中",
+			"custom.delete": "删除",
+			"custom.cancel": "取消",
+			"custom.toast.saved": "已保存",
+			"custom.toast.failed": "主题文件操作失败",
+			"custom.toast.unavailable": "主题文件接口未就绪，请重启 DSH 服务",
+			"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 +3542,67 @@ 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.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.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 +3622,80 @@ 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-seed-dot::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;z-index:20;transform:translateX(-50%);padding:3px 8px;border-radius:6px;background:var(--dsw-alias-label-primary,#151517);color:var(--dsw-alias-bg-layer-3,#fff);font-size:11px;font-weight:400;line-height:17px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;}",
+			".ct-seed-dot:hover::after,.ct-seed-dot:focus-within::after{opacity:1;}",
+			".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-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 10px;border:.5px solid var(--dsw-alias-border-l3);border-radius:14px;background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer;font:inherit;font-size:12px;line-height:18px;}",
+			".ct-list-btn:hover{background:var(--dsw-alias-interactive-bg-hover);}",
+			".ct-list-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--dsw-alias-border-l3);}",
+			".ct-list-btn-danger{border:none;color:var(--dsw-alias-state-error-primary);}",
+			".ct-list-btn-danger:hover{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-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,43 +3728,188 @@ 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) {
+			/** 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));
+			}
+			function apply(src) {
 				overrideDispose = release(overrideDispose);
 				fallbackDispose = release(fallbackDispose);
-				if (NOOP.has(id)) {
+				const target = src === CUSTOM_SELECTION ? buildCustomPreset(loadCustom().theme) : src;
+				if (typeof target === "string" && NOOP_PRESET_IDS.has(target)) {
 					ensureBaseline(false);
 					return;
 				}
 				ensureBaseline(true);
-				const overrides = buildOverrides(id);
+				const overrides = buildOverrides(target);
 				if (theme?.overrideTokens) try {
 					overrideDispose = theme.overrideTokens("dsh-cool-theme", overrides);
 					return;
 				} catch {}
-				fallbackDispose = injector.insert(buildFullCssFallback(id));
+				fallbackDispose = injector.insert(buildFullCssFallback(target));
 			}
-			function setPreset(id) {
-				try {
-					localStorage.setItem(THEME_STORAGE_KEY, id);
-				} catch {}
-				applyPreset(id);
+			function setSelection(id) {
+				writeRaw(THEME_STORAGE_KEY, id);
+				if (id !== CUSTOM_SELECTION) lastPreset = id;
+				apply(id);
+			}
+			function setCustom(next) {
+				persistCustom(next);
+				apply(buildCustomPreset(next));
+			}
+			function resetCustom() {
+				const theme = extractSeeds(presetDef(customBase()));
+				persistCustom(theme);
+				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;
+			}
+			/** 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));
+				apply(buildCustomPreset(entry.theme));
+				return entry.theme;
 			}
-			applyPreset(getPreset());
+			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(() => () => {
 				release(pluginCssDisposer);
 				baselineDisposer = release(baselineDisposer);
@@ -2512,8 +3928,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 +3947,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;