dsh-theme-mineradio 0.1.0

package/README.md

@@ -0,0 +1,90 @@
+# dsh-theme-mineradio
+
+把 **Mineradio**（[github.com/XxHuberrr/Mineradio](https://github.com/XxHuberrr/Mineradio)）的 UI 视觉风格移植成 **DeepSeek Harness (dsh) Web UI 主题插件**。
+
+风格定位：暗色玻璃拟态（Glassmorphism）+ 青/金霓虹，外加一层**电影感漂移光晕的动态背景**。
+
+- 招牌青 `#00F5D4`、香槟金 `#f4d28a`、近黑底 `#08090B`、大量 `backdrop-blur` 与青色微光阴影
+- 动态背景：青 / 金 / 青蓝三团光晕用 CSS `@keyframes` 缓慢漂移，尊重 `prefers-reduced-motion`
+- UI 表面半透明，光晕从缝隙透出，复刻 Mineradio 的「沉浸式」观感
+
+> 仅作视觉风格参考移植，配色与动画为按其公开的 `index.css` 还原；Mineradio 的界面视觉设计与原创表达归原作者所有。
+
+---
+
+## 它到底改了什么（原理）
+
+dsh 的 Web UI 配色是一套两层 CSS 变量：`--dsw-static-*`（静态色板）和 `--dsw-alias-*`（语义别名，100+ 个）。本插件做两件事，全部在**浏览器半（Client half）**完成：
+
+1. **注册主题**：`ctx.theme.register(theme)` 把 Mineradio 配色映射进 `--dsw-alias-*`。注册后主题出现在 dsh 内置「设置 → 外观 / 主题」切换器，选择由 dsh 自己的 `ui-theme` 命名空间持久化（跨重启保留）。
+2. **注入动态背景层**：在 `document.body` 挂一个 `position: fixed; z-index: -1` 的全屏层，里面跑 CSS 动画光晕。因为主题把 UI 表面设成了半透明（`rgba(...)`），光晕会从面板缝隙透出来。
+
+全程**零侵入核心 UI、不需要 Host 半、不踩浏览器侧 settings 白名单**（`settings-not-exposed`）。
+
+---
+
+## 文件结构
+
+```
+project_017+dsh-theme-plugin/
+├── package.json          # 含 dsh.client 声明 + exports["./client"]
+├── tsconfig.json         # Host 半（Node）编译配置
+├── tsdown.config.ts      # 浏览器半打包（单文件 CJS）
+├── cordis.patch.yml      # 手动安装时贴进 profiles/web/cordis.patch.yml
+├── scripts/
+│   └── wrap-client.mjs   # 把 CJS bundle 包成 DSH 的 __ModuleLoader__ 工厂
+├── src/
+│   ├── theme.ts          # ★ 配色在这里（Mineradio 真实色值 → --dsw-alias-*）
+│   ├── client/index.ts   # ★ 浏览器半：注册主题 + 注入动态背景层
+│   └── index.ts          # Host 半最小占位（可选扩展点）
+└── README.md
+```
+
+**你以后只改两处**：
+- `src/theme.ts` —— 调色板（改色值即可换肤）。
+- `src/client/index.ts` 里 `injectBackgroundLayer()` 的 `<style>` —— 动态光晕的颜色 / 形状 / 动画节奏。
+
+---
+
+## 本地构建
+
+```bash
+cd project_017+dsh-theme-plugin
+npm install
+npm run build
+# 产物：lib/index.js（Host 半） + dist/client.cjs（浏览器半，已包成 ModuleLoader 工厂）
+```
+
+> 构建链：tsdown 把 `src/client/index.ts` 打成单文件 CJS，再用 `scripts/wrap-client.mjs` 包成 dsh 要求的 `window.__ModuleLoader__.load({ id, factory })`。`tsdown` 版本写成 `>=0.4.0`，安装时取最新即可。
+
+---
+
+## 安装进 dsh web
+
+```bash
+# 1. 构建（见上）
+# 2. 安装进 web profile（用本包的绝对路径）
+dsh plugin --profile web add "file:<本包绝对路径>"
+
+# 3. 确保 $DSH_HOME/profiles/web/cordis.patch.yml 里有这一段
+#    （dsh plugin add 通常会自动写入；手动装则贴 cordis.patch.yml 内容）
+# - insert:
+#     - id: dsh-theme-mineradio
+#       name: 'dsh-theme-mineradio'
+```
+
+重启 `dsh web`，打开「设置 → 外观 / 主题」，选择 **mineradio**，即可看到暗色玻璃 + 青金光晕漂移动态背景。
+
+---
+
+## 调优与排错
+
+- **光晕没透出来？** 多半是 `--dsw-alias-bg-*` 的令牌名与 dsh 实际不一致。打开 dsh 随包分发的 `dsh-client-ui-theme` README 核对真实令牌名（例如底色可能叫 `--dsw-alias-canvas` / `--dsw-alias-surface` 等），在 `src/theme.ts` 改成对的名字即可。未知令牌名 dsh 会直接忽略、不报错。
+- **文字看不清？** 保持 `--dsw-alias-bg-layer-2`（面板）接近不透明（已设为 `rgba(14,16,20,0.92)`）。这是壁纸皮肤插件 `dsh-skin-alphacoders` 实测出来的坑：全表面半透明会让文字糊掉。
+- **想让用户调动画 / 选配色并持久化？** 浏览器侧走 `api-proxy` 会被 settings 白名单拦下。需要在 **Host 半**用 `ctx.settings.register('ui-mineradio', schema)` 持有 owner scope，再用 `ctx.webServer.register({ kind:'prefix', path:'/mineradio', handler })` 给浏览器侧开同源读写通道（参考 `dsh-skin-alphacoders`）。
+
+---
+
+## 许可证
+
+MIT。视觉风格参考自 Mineradio，原作者保留其界面视觉设计的著作权。

package/cordis.patch.yml

@@ -0,0 +1,6 @@
+# 这是 `dsh plugin --profile web add <包>` 写入
+# $DSH_HOME/profiles/web/cordis.patch.yml 的内容。
+# 手动安装时，把下面这段加进该文件即可（id 与 name 保持和 package.json 一致）。
+- insert:
+    - id: dsh-theme-mineradio
+      name: 'dsh-theme-mineradio'

package/dist/client.cjs

@@ -0,0 +1,88 @@
+window.__ModuleLoader__.load({
+  id: "dsh-theme-mineradio",
+  factory: (require) => {
+    var module = { exports: {} }
+    var exports = module.exports
+  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+  //#region src/theme.ts
+  const theme = {
+  	id: "mineradio",
+  	colorScheme: "dark",
+  	tokens: {
+  		"--dsw-alias-bg-base": "rgba(8, 9, 11, 0.42)",
+  		"--dsw-alias-bg-layer-1": "rgba(14, 16, 20, 0.55)",
+  		"--dsw-alias-bg-layer-2": "rgba(14, 16, 20, 0.92)",
+  		"--dsw-alias-text-base": "#E8ECEF",
+  		"--dsw-alias-text-muted": "#8A9099",
+  		"--dsw-alias-text-on-fill": "#061116",
+  		"--dsw-alias-brand-primary": "#00F5D4",
+  		"--dsw-alias-brand-secondary": "#f4d28a",
+  		"--dsw-alias-button-primary-fill": "#00F5D4",
+  		"--dsw-alias-button-primary-fill-hover": "#37F7DF",
+  		"--dsw-alias-border-subtle": "rgba(0, 245, 212, 0.16)",
+  		"--dsw-alias-border-strong": "rgba(0, 245, 212, 0.34)",
+  		"--dsw-alias-success": "#45D68F",
+  		"--dsw-alias-warning": "#f4d28a",
+  		"--dsw-alias-danger": "#FF5367"
+  	}
+  };
+  //#endregion
+  //#region src/client/index.ts
+  /** Cordis 插件名（保持与 package.json 的 name 一致）。 */
+  const name = "dsh-theme-mineradio";
+  /** 声明本插件需要的服务：ctx.theme（ThemeRuntime）。 */
+  const inject = ["theme"];
+  const LAYER_ID = "mineradio-bg-layer";
+  /** 注入动态背景层（幂等：已存在则直接返回）。 */
+  function injectBackgroundLayer() {
+  	const existing = document.getElementById(LAYER_ID);
+  	if (existing) return existing;
+  	const style = document.createElement("style");
+  	style.textContent = `
+      #${LAYER_ID} {
+        position: fixed; inset: 0; z-index: -1; pointer-events: none;
+        background:
+          radial-gradient(40% 50% at 20% 25%, rgba(0,245,212,0.20), transparent 60%),
+          radial-gradient(45% 55% at 80% 30%, rgba(244,210,138,0.16), transparent 60%),
+          radial-gradient(50% 60% at 50% 85%, rgba(143,233,255,0.14), transparent 62%),
+          #000;
+        filter: saturate(1.1);
+      }
+      #${LAYER_ID}::before, #${LAYER_ID}::after {
+        content: ""; position: absolute; inset: -20%;
+        background:
+          radial-gradient(35% 35% at 30% 40%, rgba(0,245,212,0.18), transparent 60%),
+          radial-gradient(30% 30% at 70% 60%, rgba(244,210,138,0.14), transparent 60%);
+        mix-blend-mode: screen;
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        #${LAYER_ID}::before { animation: mr-drift-a 26s ease-in-out infinite alternate; }
+        #${LAYER_ID}::after  { animation: mr-drift-b 34s ease-in-out infinite alternate; }
+      }
+      @keyframes mr-drift-a {
+        from { transform: translate3d(-4%, -3%, 0) scale(1); }
+        to   { transform: translate3d(6%, 4%, 0)  scale(1.15); }
+      }
+      @keyframes mr-drift-b {
+        from { transform: translate3d(5%, 2%, 0)  scale(1.1); }
+        to   { transform: translate3d(-5%, -4%, 0) scale(1); }
+      }
+    `;
+  	document.head.appendChild(style);
+  	const layer = document.createElement("div");
+  	layer.id = LAYER_ID;
+  	document.body.appendChild(layer);
+  	return layer;
+  }
+  function apply(ctx) {
+  	ctx.theme.register(theme);
+  	injectBackgroundLayer();
+  }
+  //#endregion
+  exports.apply = apply;
+  exports.inject = inject;
+  exports.name = name;
+
+    return module.exports
+  }
+})

package/dist/index.cjs

@@ -0,0 +1,79 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/theme.ts
+const theme = {
+	id: "mineradio",
+	colorScheme: "dark",
+	tokens: {
+		"--dsw-alias-bg-base": "rgba(8, 9, 11, 0.42)",
+		"--dsw-alias-bg-layer-1": "rgba(14, 16, 20, 0.55)",
+		"--dsw-alias-bg-layer-2": "rgba(14, 16, 20, 0.92)",
+		"--dsw-alias-text-base": "#E8ECEF",
+		"--dsw-alias-text-muted": "#8A9099",
+		"--dsw-alias-text-on-fill": "#061116",
+		"--dsw-alias-brand-primary": "#00F5D4",
+		"--dsw-alias-brand-secondary": "#f4d28a",
+		"--dsw-alias-button-primary-fill": "#00F5D4",
+		"--dsw-alias-button-primary-fill-hover": "#37F7DF",
+		"--dsw-alias-border-subtle": "rgba(0, 245, 212, 0.16)",
+		"--dsw-alias-border-strong": "rgba(0, 245, 212, 0.34)",
+		"--dsw-alias-success": "#45D68F",
+		"--dsw-alias-warning": "#f4d28a",
+		"--dsw-alias-danger": "#FF5367"
+	}
+};
+//#endregion
+//#region src/client/index.ts
+/** Cordis 插件名（保持与 package.json 的 name 一致）。 */
+const name = "dsh-theme-mineradio";
+/** 声明本插件需要的服务：ctx.theme（ThemeRuntime）。 */
+const inject = ["theme"];
+const LAYER_ID = "mineradio-bg-layer";
+/** 注入动态背景层（幂等：已存在则直接返回）。 */
+function injectBackgroundLayer() {
+	const existing = document.getElementById(LAYER_ID);
+	if (existing) return existing;
+	const style = document.createElement("style");
+	style.textContent = `
+    #${LAYER_ID} {
+      position: fixed; inset: 0; z-index: -1; pointer-events: none;
+      background:
+        radial-gradient(40% 50% at 20% 25%, rgba(0,245,212,0.20), transparent 60%),
+        radial-gradient(45% 55% at 80% 30%, rgba(244,210,138,0.16), transparent 60%),
+        radial-gradient(50% 60% at 50% 85%, rgba(143,233,255,0.14), transparent 62%),
+        #000;
+      filter: saturate(1.1);
+    }
+    #${LAYER_ID}::before, #${LAYER_ID}::after {
+      content: ""; position: absolute; inset: -20%;
+      background:
+        radial-gradient(35% 35% at 30% 40%, rgba(0,245,212,0.18), transparent 60%),
+        radial-gradient(30% 30% at 70% 60%, rgba(244,210,138,0.14), transparent 60%);
+      mix-blend-mode: screen;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      #${LAYER_ID}::before { animation: mr-drift-a 26s ease-in-out infinite alternate; }
+      #${LAYER_ID}::after  { animation: mr-drift-b 34s ease-in-out infinite alternate; }
+    }
+    @keyframes mr-drift-a {
+      from { transform: translate3d(-4%, -3%, 0) scale(1); }
+      to   { transform: translate3d(6%, 4%, 0)  scale(1.15); }
+    }
+    @keyframes mr-drift-b {
+      from { transform: translate3d(5%, 2%, 0)  scale(1.1); }
+      to   { transform: translate3d(-5%, -4%, 0) scale(1); }
+    }
+  `;
+	document.head.appendChild(style);
+	const layer = document.createElement("div");
+	layer.id = LAYER_ID;
+	document.body.appendChild(layer);
+	return layer;
+}
+function apply(ctx) {
+	ctx.theme.register(theme);
+	injectBackgroundLayer();
+}
+//#endregion
+exports.apply = apply;
+exports.inject = inject;
+exports.name = name;

package/lib/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Mineradio 主题插件 —— Node 半（Host half，可选）
+ * ---------------------------------------------------------------
+ * 纯「换色 + 动态背景」主题插件在 Client 半就能完成，无需 Host 逻辑。
+ * 这里保留一个最小占位，满足「包必须有 exports['.'] 入口」的约定，
+ * 也方便你将来扩展：
+ *
+ *   - 若要让用户「调动画速度 / 选光晕配色」并持久化：
+ *     浏览器侧走 api-proxy 会被 settings 白名单拦下（settings-not-exposed）。
+ *     正确做法是在 Host 半用 ctx.settings.register('ui-mineradio', schema)
+ *     持有 owner scope，再用
+ *       ctx.webServer.register({ kind: 'prefix', path: '/mineradio', handler })
+ *     给浏览器侧开一个同源读写通道。详见 dsh-skin-alphacoders 的实现。
+ */
+import type { Context } from '@deepseek-ai/cordis';
+export declare const name = "dsh-theme-mineradio";
+export declare const inject: string[];
+export declare function apply(_ctx: Context): void;

package/lib/index.js

@@ -0,0 +1,20 @@
+/**
+ * Mineradio 主题插件 —— Node 半（Host half，可选）
+ * ---------------------------------------------------------------
+ * 纯「换色 + 动态背景」主题插件在 Client 半就能完成，无需 Host 逻辑。
+ * 这里保留一个最小占位，满足「包必须有 exports['.'] 入口」的约定，
+ * 也方便你将来扩展：
+ *
+ *   - 若要让用户「调动画速度 / 选光晕配色」并持久化：
+ *     浏览器侧走 api-proxy 会被 settings 白名单拦下（settings-not-exposed）。
+ *     正确做法是在 Host 半用 ctx.settings.register('ui-mineradio', schema)
+ *     持有 owner scope，再用
+ *       ctx.webServer.register({ kind: 'prefix', path: '/mineradio', handler })
+ *     给浏览器侧开一个同源读写通道。详见 dsh-skin-alphacoders 的实现。
+ */
+export const name = 'dsh-theme-mineradio';
+export const inject = [];
+export function apply(_ctx) {
+    // 纯主题插件：Host 半无需做任何事。
+    // 需要 Host 能力时再在这里写逻辑。
+}

package/lib/theme.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Mineradio 主题定义（移植自 github.com/XxHuberrr/Mineradio，已获视觉风格参考）
+ * ---------------------------------------------------------------
+ * 提取到的 Mineradio 真实配色（暗色玻璃拟态 + 青/金霓虹）：
+ *   基础     --fc-bg #08090B · --fc-paper #0E1014 · --fc-ink #E8ECEF
+ *            --fc-muted #8A9099 · --fc-hair #1A1D22 / #262A31
+ *   招牌强调 --home-accent #00F5D4（青）· --champagne #f4d28a（香槟金）
+ *            --fc-blue #2442ff · --chill-cyan #8fe9ff · --chill-mint #9cffdf
+ *   玻璃边   --glass-border rgba(0,245,212,.30)，阴影带青色微光
+ *   字体     --font-sans: Noto Sans SC / PingFang SC / HarmonyOS Sans SC / Inter / system-ui
+ *
+ * 下面把这套配色映射到 DSH 的 --dsw-alias-* 语义令牌。
+ * 注意：未知令牌名 DSH 会直接忽略、不会报错，所以可放心补充/修正。
+ * 完整令牌清单见 DSH 随包分发的 dsh-client-ui-theme README（100+ 个）。
+ */
+/** 单个主题的令牌覆盖层：键是 --dsw-alias-* 变量名，值是 CSS 颜色。 */
+export type ThemeTokens = Record<string, string>;
+/** 通过 ctx.theme.register() 注册的主题定义。 */
+export interface ThemeDefinition {
+    /** 主题唯一 id（切换、持久化都靠它）。改名后旧选择会失效。 */
+    id: string;
+    /**
+     * 基于哪种基础色板：'dark' → DSH 把正文/边框等对比令牌设为浅色。
+     * Mineradio 是暗色界面，务必填 'dark'。
+     */
+    colorScheme: 'light' | 'dark';
+    /** 要覆盖的 --dsw-alias-* 语义令牌。只写要改的，没写的沿用默认。 */
+    tokens: ThemeTokens;
+}
+export declare const theme: ThemeDefinition;
+export default theme;

package/lib/theme.js

@@ -0,0 +1,44 @@
+/**
+ * Mineradio 主题定义（移植自 github.com/XxHuberrr/Mineradio，已获视觉风格参考）
+ * ---------------------------------------------------------------
+ * 提取到的 Mineradio 真实配色（暗色玻璃拟态 + 青/金霓虹）：
+ *   基础     --fc-bg #08090B · --fc-paper #0E1014 · --fc-ink #E8ECEF
+ *            --fc-muted #8A9099 · --fc-hair #1A1D22 / #262A31
+ *   招牌强调 --home-accent #00F5D4（青）· --champagne #f4d28a（香槟金）
+ *            --fc-blue #2442ff · --chill-cyan #8fe9ff · --chill-mint #9cffdf
+ *   玻璃边   --glass-border rgba(0,245,212,.30)，阴影带青色微光
+ *   字体     --font-sans: Noto Sans SC / PingFang SC / HarmonyOS Sans SC / Inter / system-ui
+ *
+ * 下面把这套配色映射到 DSH 的 --dsw-alias-* 语义令牌。
+ * 注意：未知令牌名 DSH 会直接忽略、不会报错，所以可放心补充/修正。
+ * 完整令牌清单见 DSH 随包分发的 dsh-client-ui-theme README（100+ 个）。
+ */
+export const theme = {
+    id: 'mineradio',
+    colorScheme: 'dark',
+    tokens: {
+        // —— 背景：做成半透明，让 client 注入的「电影感动态光晕」从缝隙透出来 ——
+        // 若 DSH 实际用到的底色令牌名不同，这里改一下即可；未知名会被忽略。
+        '--dsw-alias-bg-base': 'rgba(8, 9, 11, 0.42)',
+        '--dsw-alias-bg-layer-1': 'rgba(14, 16, 20, 0.55)',
+        '--dsw-alias-bg-layer-2': 'rgba(14, 16, 20, 0.92)', // 面板近不透明，保证文字清晰（壁纸插件的踩坑）
+        // —— 文字 ——
+        '--dsw-alias-text-base': '#E8ECEF',
+        '--dsw-alias-text-muted': '#8A9099',
+        '--dsw-alias-text-on-fill': '#061116',
+        // —— 品牌 / 强调：招牌青 + 香槟金 ——
+        '--dsw-alias-brand-primary': '#00F5D4',
+        '--dsw-alias-brand-secondary': '#f4d28a',
+        // —— 按钮 ——
+        '--dsw-alias-button-primary-fill': '#00F5D4',
+        '--dsw-alias-button-primary-fill-hover': '#37F7DF',
+        // —— 边框：青色微光玻璃边 ——
+        '--dsw-alias-border-subtle': 'rgba(0, 245, 212, 0.16)',
+        '--dsw-alias-border-strong': 'rgba(0, 245, 212, 0.34)',
+        // —— 状态色 ——
+        '--dsw-alias-success': '#45D68F',
+        '--dsw-alias-warning': '#f4d28a',
+        '--dsw-alias-danger': '#FF5367',
+    },
+};
+export default theme;

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "dsh-theme-mineradio",
+  "version": "0.1.0",
+  "description": "DSH (DeepSeek Harness) Web UI theme — ports the Mineradio music player's dark glassmorphism look (teal/champagne neon) with a cinematic drifting-glow dynamic background.",
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "dsh",
+    "dsh-plugin",
+    "deepseek-harness",
+    "theme",
+    "skin",
+    "mineradio",
+    "glassmorphism",
+    "dynamic-background"
+  ],
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": "./dist/client.cjs"
+  },
+  "files": [
+    "lib",
+    "dist",
+    "cordis.patch.yml",
+    "README.md"
+  ],
+  "dsh": {
+    "client": {
+      "platform": "web",
+      "immediately": false,
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime"
+      ]
+    }
+  },
+  "scripts": {
+    "build:host": "tsc -p tsconfig.json",
+    "build:client": "node scripts/build-client.mjs && node scripts/wrap-client.mjs",
+    "build": "npm run build:host && npm run build:client",
+    "test": "npm run build"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "typescript": "^5.5.0",
+    "tsdown": ">=0.4.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}