dsh-dream-skin 0.2.1 → 0.2.3

package/lib/client.js

@@ -36,6 +36,10 @@ window.__ModuleLoader__.load({
 		const WALLPAPER_OPACITY_KEY = "dsh-dream-skin:wallpaper-opacity";
 		/** localStorage key holding the wallpaper blur radius (px). */
 		const WALLPAPER_BLUR_KEY = "dsh-dream-skin:wallpaper-blur";
+		/** localStorage key holding recent wallpaper history (JSON array of {kind,value}). */
+		const WALLPAPER_HISTORY_KEY = "dsh-dream-skin:wallpaper-history";
+		/** Max wallpaper history entries kept. */
+		const WALLPAPER_HISTORY_MAX = 5;
 		/** Sentinel meaning "no custom skin — follow the built-in appearance". */
 		const DEFAULT_SKIN = "system";
 		/** Default wash opacity (0..1) applied to the translucent surfaces. */
@@ -328,7 +332,7 @@ window.__ModuleLoader__.load({
 
 		/** Simplified Chinese dictionary (the key-set source of truth). */
 		const zh = {
-			"skin.title": "皮肤（Mirage 幻梦）",
+			"skin.title": "皮肤",
 			"skin.default": "默认",
 			"skin.abyss": "深海渊",
 			"skin.aurora": "极光",
@@ -344,6 +348,8 @@ window.__ModuleLoader__.load({
 			"background.opacity": "透明度",
 			"background.blur": "模糊",
 			"background.hint": "图片显示在主内容区与侧边栏的半透明底上，消息等内层表面保持不透明以保证可读性",
+			"background.history": "最近使用",
+			"background.historyApply": "点击换回这张壁纸",
 			"accent.title": "强调色（Accent）",
 			"accent.random": "随机",
 			"accent.clear": "恢复主题色",
@@ -365,7 +371,7 @@ window.__ModuleLoader__.load({
 
 		/** English dictionary, checked complete against the zh key set. */
 		const en = {
-			"skin.title": "Skins (Mirage)",
+			"skin.title": "Skins",
 			"skin.default": "Default",
 			"skin.abyss": "Abyss",
 			"skin.aurora": "Aurora",
@@ -381,6 +387,8 @@ window.__ModuleLoader__.load({
 			"background.opacity": "Opacity",
 			"background.blur": "Blur",
 			"background.hint": "The image shows through the translucent main canvas and sidebar; inner surfaces stay opaque for readability",
+			"background.history": "Recent",
+			"background.historyApply": "Click to switch back",
 			"accent.title": "Accent",
 			"accent.random": "Random",
 			"accent.clear": "Reset to theme",
@@ -612,14 +620,16 @@ window.__ModuleLoader__.load({
 					url: null,
 					opacity: DEFAULT_WALLPAPER_OPACITY,
 					blur: DEFAULT_WALLPAPER_BLUR,
+					history: [],
 					revision: -1
 				}),
 				actions: {
-					sync: (d, url, opacity, blur, revision) => {
+					sync: (d, url, opacity, blur, history, revision) => {
 						if (revision <= d.revision) return;
 						d.url = url;
 						d.opacity = opacity;
 						d.blur = blur;
+						d.history = history;
 						d.revision = revision;
 					}
 				}
@@ -665,11 +675,26 @@ window.__ModuleLoader__.load({
 				background: "transparent",
 				cursor: "pointer",
 				font: "inherit",
-				boxSizing: "border-box"
+				boxSizing: "border-box",
+				position: "relative"
 			},
 			cardSelected: {
 				borderColor: "var(--dsw-alias-brand-primary)",
-				background: "var(--dsw-alias-interactive-bg-hover)"
+				background: "rgba(127, 127, 127, 0.10)"
+			},
+			cardCheck: {
+				position: "absolute",
+				top: "-4px",
+				right: "-4px",
+				width: "18px",
+				height: "18px",
+				borderRadius: "50%",
+				background: "var(--dsw-alias-brand-primary)",
+				color: "#ffffff",
+				fontSize: "12px",
+				lineHeight: "18px",
+				textAlign: "center",
+				fontWeight: 700
 			},
 			cardLabel: {
 				color: "var(--dsw-alias-label-secondary)",
@@ -756,6 +781,26 @@ window.__ModuleLoader__.load({
 				cursor: "pointer",
 				padding: 0
 			},
+			historyThumb: {
+				width: "56px",
+				height: "36px",
+				borderRadius: "8px",
+				border: "1px solid var(--dsw-alias-border-l2)",
+				cursor: "pointer",
+				padding: 0,
+				boxSizing: "border-box",
+				backgroundSize: "cover",
+				backgroundPosition: "center"
+			},
+			accentPreset: {
+				width: "24px",
+				height: "24px",
+				borderRadius: "50%",
+				border: "1px solid rgba(128,128,128,0.4)",
+				cursor: "pointer",
+				padding: 0,
+				boxSizing: "border-box"
+			},
 			checkbox: {
 				accentColor: "var(--dsw-alias-brand-primary)",
 				width: "16px",
@@ -857,6 +902,10 @@ window.__ModuleLoader__.load({
 					...(selected ? styles.cardSelected : {})
 				},
 				children: [
+					selected ? (0, react_jsx_runtime.jsx)("span", {
+						style: styles.cardCheck,
+						children: "✓"
+					}) : null,
 					(0, react_jsx_runtime.jsx)(Swatch, { tokens: skin.tokens }),
 					(0, react_jsx_runtime.jsx)("span", {
 						style: {
@@ -948,10 +997,11 @@ window.__ModuleLoader__.load({
 		 * Wallpaper row: choose (compressed to a data URL), preview, tune the
 		 * wash opacity and blur, and remove the wallpaper.
 		 */
-		function WallpaperRow({ t, setWallpaper, setOpacity, setBlur, useStore }) {
+		function WallpaperRow({ t, setWallpaper, setOpacity, setBlur, applyFromHistory, useStore }) {
 			const url = useStore((s) => s.url);
 			const opacity = useStore((s) => s.opacity);
 			const blur = useStore((s) => s.blur);
+			const history = useStore((s) => s.history);
 			const inputRef = (0, _react.useRef)(null);
 			const onPick = () => inputRef.current?.click();
 			const onFile = (event) => {
@@ -1019,6 +1069,31 @@ window.__ModuleLoader__.load({
 						format: (v) => `${v}px`,
 						onChange: setBlur
 					}),
+					history && history.length > 0 ? (0, react_jsx_runtime.jsxs)("div", {
+						style: { ...styles.group, padding: "8px 0", borderBottom: "none" },
+						children: [
+							(0, react_jsx_runtime.jsx)("div", {
+								style: styles.title,
+								children: t("background.history")
+							}),
+							(0, react_jsx_runtime.jsxs)("div", {
+								style: styles.actionRow,
+								children: history.map((entry, i) => {
+									const isImage = entry.kind !== "gradient" && entry.kind !== "url";
+									return (0, react_jsx_runtime.jsx)("button", {
+										type: "button",
+										title: t("background.historyApply"),
+										style: {
+											...styles.historyThumb,
+											background: isImage ? `url("${entry.value}") center/cover no-repeat` : entry.value
+										},
+										onClick: () => applyFromHistory(entry.kind, entry.value),
+										children: null
+									}, i);
+								})
+							})
+						]
+					}) : null,
 					(0, react_jsx_runtime.jsx)("div", {
 						style: styles.hint,
 						children: t("background.hint")
@@ -1098,6 +1173,7 @@ window.__ModuleLoader__.load({
 							"aria-pressed": gradient === g,
 							style: {
 								...styles.presetswatches,
+								background: g,
 								...(gradient === g ? { outline: "2px solid var(--dsw-alias-brand-primary)" } : {})
 							},
 							onClick: () => setGradient(g),
@@ -1691,17 +1767,43 @@ window.__ModuleLoader__.load({
 			syncWallpaper();
 		}
 
+		/** Read recent wallpaper history entries [{kind,value}]. */
+		function readWallpaperHistory() {
+			const raw = readStorage(WALLPAPER_HISTORY_KEY);
+			if (raw === null) return [];
+			try {
+				const parsed = JSON.parse(raw);
+				return Array.isArray(parsed) ? parsed.filter((e) => e && typeof e.value === "string") : [];
+			} catch {
+				return [];
+			}
+		}
+
+		/** Persist the wallpaper history list. */
+		function writeWallpaperHistory(list) {
+			writeStorage(WALLPAPER_HISTORY_KEY, JSON.stringify(list.slice(0, WALLPAPER_HISTORY_MAX)));
+		}
+
+		/** Record a wallpaper setting into history (dedupe by kind+value, newest first). */
+		function pushWallpaperHistory(kind, value) {
+			if (value === null || value === undefined || value === "") return;
+			const list = readWallpaperHistory();
+			const deduped = list.filter((e) => !(e.kind === kind && e.value === value));
+			deduped.unshift({ kind, value });
+			writeWallpaperHistory(deduped);
+		}
+
 		/** Set a wallpaper by kind and value. */
 		function setWallpaperKind(ctx, kind, value) {
 			writeStorage(WALLPAPER_KIND_KEY, kind);
 			if (kind === "gradient") {
 				writeStorage(WALLPAPER_GRADIENT_KEY, value);
-				if (value === null) writeStorage(WALLPAPER_GRADIENT_KEY, null);
 			} else if (kind === "url") {
 				writeStorage(WALLPAPER_URL_KEY, value);
 			} else {
 				writeStorage(WALLPAPER_KEY, value);
 			}
+			pushWallpaperHistory(kind, value);
 			applyWallpaper2(ctx);
 			syncWallpaper();
 		}
@@ -1734,6 +1836,13 @@ window.__ModuleLoader__.load({
 		//#endregion
 
 		//#region dsh-dream-skin: P0 UI rows (accent + packs)
+		/** Curated accent presets users can pick with one click. */
+		const ACCENT_PRESETS = [
+			"#4f83f2", "#2563eb", "#34d399", "#22d3ee", "#a78bfa",
+			"#fb923c", "#f87171", "#fbbf24", "#e879f9", "#f472b6",
+			"#2dd4bf", "#a3e635"
+		];
+
 		/**
 		 * Accent row: pick an arbitrary brand-accent color (or clear to follow
 		 * the active theme). Uses an `<input type="color">` + the current accent
@@ -1777,6 +1886,21 @@ window.__ModuleLoader__.load({
 							}) : null
 						]
 					}),
+					(0, react_jsx_runtime.jsxs)("div", {
+						style: styles.actionRow,
+						children: ACCENT_PRESETS.map((hex) => (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							title: hex,
+							"aria-pressed": activeValue === hex,
+							style: {
+								...styles.accentPreset,
+								background: hex,
+								...(activeValue === hex ? { outline: "2px solid var(--dsw-alias-label-primary)", outlineOffset: "1px" } : {})
+							},
+							onClick: () => setAccent(hex),
+							children: null
+						}, hex))
+					}),
 					(0, react_jsx_runtime.jsx)("div", {
 						style: styles.hint,
 						children: t("accent.hint")
@@ -1967,7 +2091,13 @@ window.__ModuleLoader__.load({
 				wallpaperRevision += 1;
 				// Store the raw data URL (not the CSS url(...) wrapper) so the
 				// Wallpaper row can render an <img> preview and test `url !== null`.
-				wallpaperBound?.sync(readWallpaper(), readWallpaperOpacity(), readWallpaperBlur(), wallpaperRevision);
+				wallpaperBound?.sync(
+					readWallpaper(),
+					readWallpaperOpacity(),
+					readWallpaperBlur(),
+					readWallpaperHistory(),
+					wallpaperRevision
+				);
 			};
 			applyWallpaper2(ctx);
 			syncWallpaper();
@@ -1997,6 +2127,11 @@ window.__ModuleLoader__.load({
 					setSkin: (id) => {
 						ctx.theme.setTheme(id);
 						writeSavedSkin(id);
+						// Deterministically push the new preference into the slot store AND
+						// re-shade the wallpaper so the selected card follows immediately,
+						// independent of theme/change emission timing.
+						skinBound?.sync(id, (ctx.theme.getTheme().revision));
+						if (wallpaperBackgroundCss() !== null) applyWallpaper2(ctx);
 					}
 				};
 			};
@@ -2042,6 +2177,14 @@ window.__ModuleLoader__.load({
 						applyWallpaper2(ctx);
 						syncWallpaper();
 					},
+					applyFromHistory: (kind, value) => {
+						const resolvedKind = kind === "gradient" || kind === "url" ? kind : "image";
+						if (value && value.length > 4) {
+							setWallpaperKind(ctx, resolvedKind, value);
+						} else {
+							syncWallpaper();
+						}
+					},
 					clearWallpaper: () => {
 						removeWallpaper(ctx);
 					}
@@ -2110,6 +2253,7 @@ window.__ModuleLoader__.load({
 			// P0: per-user accent override row.
 			const accentStore = createAccentStore();
 			let accentBound;
+			let accentRevision = 0;
 			const accentInjected = (actions) => {
 				accentBound = actions;
 				const base = resolveAccent(ctx.theme.getTheme()) || DEFAULT_ACCENT;
@@ -2117,12 +2261,19 @@ window.__ModuleLoader__.load({
 				return {
 					setAccent: (value) => {
 						const applied = setAccent(ctx, value === DEFAULT_ACCENT ? null : value);
-						accentBound?.sync(applied || DEFAULT_ACCENT, resolveAccent(ctx.theme.getTheme()) || DEFAULT_ACCENT, 0);
+						accentBound?.sync(
+							applied || DEFAULT_ACCENT,
+							resolveAccent(ctx.theme.getTheme()) || DEFAULT_ACCENT,
+							++accentRevision
+						);
 					},
 					clearAccent: () => {
 						setAccent(ctx, null);
-						accentBound?.sync(DEFAULT_ACCENT, resolveAccent(ctx.theme.getTheme()) || DEFAULT_ACCENT, 0);
-						syncSkin(ctx.theme.getTheme());
+						accentBound?.sync(
+							DEFAULT_ACCENT,
+							resolveAccent(ctx.theme.getTheme()) || DEFAULT_ACCENT,
+							++accentRevision
+						);
 					}
 				};
 			};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-dream-skin",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "DeepSeek Harness 换肤插件 (Dream Skin for DeepSeek Harness): curated --dsw-alias-* theme presets, a custom translucent wallpaper with opacity/blur controls, theme-pack import/export + share links, per-user accent, favorites & surprise-me, and durable per-browser persistence — in the spirit of the Codex Dream Skin project.",
   "license": "MIT",
   "type": "module",