dsh-dream-skin 0.2.0 → 0.2.2

package/README.en.md

@@ -24,6 +24,11 @@ Native skinning + wallpaper + theme packs — a romance-engineered project built
 
 </div>
 
+> 🚀 **Now on npm!** With DSH installed, add it in one command — no cloning needed:
+> ```sh
+> dsh plugin --profile web add dsh-dream-skin
+> ```
+
 > **Homage to [Codex-Dream-Skin](https://github.com/Fei-Away/Codex-Dream-Skin).** But the approach is different:
 > Codex injects CSS into the desktop client's renderer via CDP, whereas DSH is a **token-driven Web GUI** that ships
 > first-class "third-party plugins registering themes". So this plugin is **purely native** — no injection, no binary
@@ -74,13 +79,13 @@ Differentiation inspired by existing DSH skin projects plus Codex's skin UX:
 
 ```sh
 # 1. install
-dsh plugin --profile web add -w dsh-dream-skin
+dsh plugin --profile web add dsh-dream-skin
 # 2. restart
 dsh web
 # 3. open Settings → General → Skins and pick one → done.
 ```
 
-> `-w` (workspace) is required because every profile ships a `pnpm-workspace.yaml`.
+> Installs the published npm package — no cloning. If `dsh plugin add` reports a workspace error, append `-w`.
 
 ## 🧩 What kind of plugin is this
 
@@ -139,16 +144,12 @@ system.
 
 ## 📦 Install
 
-
-### Option A: From source / a local directory
+### Option A: From npm (published, **recommended**)
 
 ```sh
-dsh plugin --profile web add -w /path/to/dsh-dream-skin
+dsh plugin --profile web add dsh-dream-skin
 ```
 
-> The `-w` flag is **required**: every profile ships a `pnpm-workspace.yaml`, so pnpm treats the profile directory
-> as a workspace root and a bare `add` fails with `ERR_PNPM_ADDING_TO_ROOT`.
-
 Then **restart** the web server:
 
 ```sh
@@ -158,10 +159,14 @@ dsh web
 
 Open **Settings → General** to see the **Skins**, **Accent**, **Wallpaper** / **Advanced Wallpaper**, and **Theme Packs** rows.
 
-### Option B: From npm (after publishing)
+> The `-w` (workspace) flag is needed on a bare `add` because every profile ships a `pnpm-workspace.yaml`; pnpm treats
+> the profile directory as a workspace root, so a bare add fails with `ERR_PNPM_ADDING_TO_ROOT`. If your profile already
+> uses the workspace, you won't need to repeat it.
+
+### Option B: From source / a local directory (developers)
 
 ```sh
-dsh plugin --profile web add -w dsh-dream-skin
+dsh plugin --profile web add -w /path/to/dsh-dream-skin
 ```
 
 ## 🧩 Compatibility

package/README.md

@@ -24,6 +24,11 @@
 
 </div>
 
+> 🚀 **现已发布到 npm！** 装好 DSH 后，一条命令即可安装，无需 clone：
+> ```sh
+> dsh plugin --profile web add dsh-dream-skin
+> ```
+
 > **致敬 [Codex-Dream-Skin](https://github.com/Fei-Away/Codex-Dream-Skin)。** 但实现路径不同：Codex 是往桌面客户端渲染进程
 > 注入 CSS（CDP），而 DSH 本身是 **token 驱动的 Web GUI**，官方就提供了「第三方插件注册主题」的能力——所以本插件是
 > **纯原生接入**，无注入、不改二进制、不因客户端更新失效。
@@ -126,25 +131,22 @@ DeepSeek Harness 的口号是「一切皆插件」：模型、工具、沙箱、
 
 ```sh
 # 1. 安装
-dsh plugin --profile web add -w dsh-dream-skin
+dsh plugin --profile web add dsh-dream-skin
 # 2. 重启
 dsh web
 # 3. 打开 设置 → 常规 → 皮肤，挑一套 → 完。
 ```
 
-> 传入 `-w`（workspace）是因为每个 profile 自带 `pnpm-workspace.yaml`，pnpm 需要知道这是 workspace 安装。
+> 装的是 npm 已完成发布的正式包，无需 clone。若 `dsh plugin add` 报 workspace 相关错误，补一个 `-w` 即可。
 
 ## 📦 安装
 
-### 方式一：从源码 / 本地目录
+### 方式一：npm（已发布，**推荐**）
 
 ```sh
-dsh plugin --profile web add -w /path/to/dsh-dream-skin
+dsh plugin --profile web add dsh-dream-skin
 ```
 
-> `-w` 标志**必需**：每个 profile 自带 `pnpm-workspace.yaml`，pnpm 会把它当作 workspace 根，裸 `add` 会报
-> `ERR_PNPM_ADDING_TO_ROOT`。
-
 然后**重启** web 服务：
 
 ```sh
@@ -154,10 +156,13 @@ dsh web
 
 打开 **设置 → 常规**，即可看到「皮肤」「强调色」「背景图片 / 高级壁纸」与「主题包」等行。
 
-### 方式二：npm 安装（发布后）
+> `-w` 标志在裸 `add` 时必需：每个 profile 自带 `pnpm-workspace.yaml`，pnpm 会把它当作 workspace 根，裸加报错
+> `ERR_PNPM_ADDING_TO_ROOT`。若已加过 `-w`，后续用现有 workspace 即无需重复。
+
+### 方式二：从源码 / 本地目录（开发者）
 
 ```sh
-dsh plugin --profile web add -w dsh-dream-skin
+dsh plugin --profile web add -w /path/to/dsh-dream-skin
 ```
 
 ## 🧩 兼容性

package/lib/client.js

@@ -328,7 +328,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": "极光",
@@ -365,7 +365,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",
@@ -1098,6 +1098,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),
@@ -1629,26 +1630,39 @@ window.__ModuleLoader__.load({
 			return data ? `url("${data}")` : null;
 		}
 
+		/** Guards against re-entrant wallp-paper re-shading (overrideTokens emits theme/change). */
+		let _applyingWallpaper = false;
+
 		/** Re-render the wallpaper backdrop from the current config. */
 		function applyWallpaper2(ctx) {
-			const bg = wallpaperBackgroundCss();
-			const urlIsSet = bg !== null;
-			if (!urlIsSet) {
-				teardownWallpaper();
-				return;
-			}
-			if (wallpaperEl === null || !document.body.contains(wallpaperEl)) {
-				wallpaperEl = document.createElement("div");
-				wallpaperEl.style.cssText = "position:fixed;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-position:center;background-repeat:no-repeat;";
-				document.body.prepend(wallpaperEl);
+			// Re-entrancy guard: overrideTokens() below emits `theme/change`, which our
+			// syncSkin listener would answer by calling applyWallpaper2 again — that
+			// recursion would overflow the stack. Applying while already applying is a
+			// no-op; the first (outermost) call performs the shading.
+			if (_applyingWallpaper) return;
+			_applyingWallpaper = true;
+			try {
+				const bg = wallpaperBackgroundCss();
+				const urlIsSet = bg !== null;
+				if (!urlIsSet) {
+					teardownWallpaper();
+					return;
+				}
+				if (wallpaperEl === null || !document.body.contains(wallpaperEl)) {
+					wallpaperEl = document.createElement("div");
+					wallpaperEl.style.cssText = "position:fixed;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-position:center;background-repeat:no-repeat;";
+					document.body.prepend(wallpaperEl);
+				}
+				const blur = readWallpaperBlur();
+				wallpaperEl.style.backgroundImage = bg;
+				wallpaperEl.style.filter = blur > 0 ? `blur(${blur}px)` : "none";
+				// Auto-dim lowers the wash opacity when enabled.
+				const baseFill = readWallpaperOpacity();
+				const wash = readWallpaperAutodim() ? Math.min(baseFill, 0.45) : baseFill;
+				shadeTokens2(ctx, wash, wash);
+			} finally {
+				_applyingWallpaper = false;
 			}
-			const blur = readWallpaperBlur();
-			wallpaperEl.style.backgroundImage = bg;
-			wallpaperEl.style.filter = blur > 0 ? `blur(${blur}px)` : "none";
-			// Auto-dim lowers the wash opacity when enabled.
-			const baseFill = readWallpaperOpacity();
-			const wash = readWallpaperAutodim() ? Math.min(baseFill, 0.45) : baseFill;
-			shadeTokens2(ctx, wash, wash);
 		}
 
 		/** Like the original shadeTokens but with configurable alphas for the wash. */
@@ -1730,6 +1744,7 @@ window.__ModuleLoader__.load({
 			const accent = useStore((s) => s.accent);
 			const base = useStore((s) => s.base);
 			const activeValue = accent !== DEFAULT_ACCENT ? accent : base;
+			const inputValue = normalizeHex(activeValue) || "#4f83f2";
 			return (0, react_jsx_runtime.jsxs)("div", {
 				style: styles.group,
 				children: [
@@ -1742,7 +1757,7 @@ window.__ModuleLoader__.load({
 						children: [
 							(0, react_jsx_runtime.jsx)("input", {
 								type: "color",
-								value: (0, _react.useMemo)(() => normalizeHex(activeValue) || "#4f83f2", [activeValue]),
+								value: inputValue,
 								style: { ...styles.swatch, width: "40px", height: "32px", padding: 0, border: "none", borderRadius: "8px", cursor: "pointer" },
 								onChange: (event) => setAccent(event.target.value)
 							}),
@@ -1951,7 +1966,9 @@ window.__ModuleLoader__.load({
 			let wallpaperBound;
 			const syncWallpaper = () => {
 				wallpaperRevision += 1;
-				wallpaperBound?.sync(wallpaperBackgroundCss(), readWallpaperOpacity(), readWallpaperBlur(), wallpaperRevision);
+				// 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);
 			};
 			applyWallpaper2(ctx);
 			syncWallpaper();
@@ -2094,6 +2111,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;
@@ -2101,12 +2119,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.0",
+  "version": "0.2.2",
   "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",