dsh-cool-theme 0.5.0 → 0.6.1

package/lib/client.js

@@ -40,6 +40,61 @@ window.__ModuleLoader__.load({
 		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
 		/**
@@ -1919,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,
@@ -1993,7 +2054,7 @@ window.__ModuleLoader__.load({
 		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
 		}))];
@@ -2665,6 +2726,69 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		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.
@@ -2684,6 +2808,16 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 		*/
 		/** 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;
@@ -2909,20 +3043,125 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			}));
 		}
 		/**
+		* 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 open the editor or delete it. The card as a whole is a click target
-		* too, but its controls own their clicks.
+		* 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, onEdit, onDelete } = props;
-			/** One dense capsule action; `danger` is the borderless delete variant. */
-			const action = (label, onClick, danger) => react.createElement("button", {
+			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: danger ? "ct-list-btn ct-list-btn-danger" : "ct-list-btn",
+				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
-			}, label);
+			}, 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",
@@ -2935,7 +3174,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			}, 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)));
+			}, 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
@@ -2971,9 +3210,12 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			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 [confirmLeave, setConfirmLeave] = react.useState(false);
+			const [pendingLeave, setPendingLeave] = react.useState(null);
 			const editingRef = react.useRef(null);
 			editingRef.current = editing;
 			const savingRef = react.useRef(false);
@@ -2983,8 +3225,10 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			dirtyRef.current = editing !== null && isDirty(editing, custom);
 			const confirmCloseRef = react.useRef(false);
 			confirmCloseRef.current = confirmClose;
-			const confirmLeaveRef = react.useRef(false);
-			confirmLeaveRef.current = confirmLeave;
+			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);
@@ -3021,6 +3265,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					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);
@@ -3101,13 +3347,25 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				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 || confirmLeaveRef.current) {
+					if (confirmCloseRef.current || pendingLeaveRef.current) {
 						e.preventDefault();
 						e.stopPropagation();
 						setConfirmClose(false);
-						setConfirmLeave(false);
+						setPendingLeave(null);
 						return;
 					}
 					if (!dirtyRef.current || !onRequestClose) return;
@@ -3116,7 +3374,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					setConfirmClose(true);
 				}
 				function onClick(e) {
-					if (!dirtyRef.current || confirmCloseRef.current || confirmLeaveRef.current || pendingDeleteRef.current) return;
+					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;
@@ -3129,9 +3387,23 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 						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();
-					setConfirmLeave(true);
+					setPendingLeave({
+						entry,
+						edit: !!target.closest("button[data-ct-leave]")
+					});
 				}
 				document.addEventListener("keydown", onKeyDown, true);
 				document.addEventListener("click", onClick, true);
@@ -3161,6 +3433,61 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				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;
@@ -3279,7 +3606,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					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",
+					className: "ct-seed-dot ct-tip",
 					style: { background: d.value },
 					"data-tip": d.name
 				}, react.createElement("input", {
@@ -3397,6 +3724,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 					disabled: editing !== null,
 					t,
 					onActivate: () => onLoadSaved(entry.id),
+					onExport: () => void exportCard(entry),
 					onEdit: () => startEdit(entry),
 					onDelete: () => setPendingDelete(entry)
 				}));
@@ -3404,13 +3732,29 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				children.push(react.createElement("div", {
 					className: "ct-list",
 					key: "saved-list"
-				}, ...cards), react.createElement("button", {
+				}, ...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(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",
@@ -3433,17 +3777,22 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				},
 				onCancel: () => setConfirmClose(false)
 			}));
-			if (confirmLeave && editing) children.push(react.createElement(ConfirmDialog, {
+			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: () => {
-					setConfirmLeave(false);
+					const next = pendingLeave;
+					setPendingLeave(null);
 					cancelEdit();
+					if (next.entry) {
+						if (next.edit) startEdit(next.entry);
+						else onLoadSaved(next.entry.id);
+					}
 				},
-				onCancel: () => setConfirmLeave(false)
+				onCancel: () => setPendingLeave(null)
 			}));
 			if (toast) {
 				const onDone = () => setToast((cur) => cur?.seq === toast.seq ? null : cur);
@@ -3509,6 +3858,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			"custom.save": "保存",
 			"custom.add": "添加自定义主题",
 			"custom.edit": "编辑",
+			"custom.export": "导出",
+			"custom.import": "导入主题",
 			"custom.name.placeholder": "主题名称",
 			"custom.defaultName": "自定义主题",
 			"custom.inUse": "使用中",
@@ -3517,6 +3868,15 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			"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": "放弃未保存的修改？",
@@ -3571,6 +3931,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			"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",
@@ -3579,6 +3941,15 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			"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?",
@@ -3632,8 +4003,10 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			".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-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);}",
@@ -3642,11 +4015,16 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			".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-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-danger{border:none;color:var(--dsw-alias-state-error-primary);}",
+			".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;}",
@@ -3663,6 +4041,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 			".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);}",
@@ -3778,11 +4158,20 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				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) {
-				overrideDispose = release(overrideDispose);
-				fallbackDispose = release(fallbackDispose);
 				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;
 				}
@@ -3790,23 +4179,76 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				const overrides = buildOverrides(target);
 				if (theme?.overrideTokens) try {
 					overrideDispose = theme.overrideTokens("dsh-cool-theme", overrides);
+					fallbackDispose = release(fallbackDispose);
 					return;
 				} catch {}
+				overrideDispose = release(overrideDispose);
+				fallbackDispose = release(fallbackDispose);
 				fallbackDispose = injector.insert(buildFullCssFallback(target));
 			}
+			/**
+			* 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;
-				apply(id);
+				scheduleApply(() => apply(id));
 			}
 			function setCustom(next) {
 				persistCustom(next);
-				apply(buildCustomPreset(next));
+				scheduleApply(() => apply(buildCustomPreset(next)));
 			}
 			function resetCustom() {
 				const theme = extractSeeds(presetDef(customBase()));
 				persistCustom(theme);
-				apply(buildCustomPreset(theme));
+				scheduleApply(() => apply(buildCustomPreset(theme)));
 				return theme;
 			}
 			const fallbackForBase = (base) => extractSeeds(presetDef(isPresetId(base) ? base : lastPreset));
@@ -3849,7 +4291,7 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				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));
+				scheduleApply(() => apply(buildCustomPreset(entry.theme)));
 				return entry.theme;
 			}
 			const saved = {
@@ -3911,6 +4353,8 @@ html[data-ds-dark-theme], body[data-ds-dark-theme] {
 				}).catch(() => {});
 			} catch {}
 			ctx.effect(() => () => {
+				disposed = true;
+				cancelApply();
 				release(pluginCssDisposer);
 				baselineDisposer = release(baselineDisposer);
 				overrideDispose = release(overrideDispose);