npm - dsh-theme-triptych - Versions diffs - 0.1.0 - Mend

dsh-theme-triptych 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025 dsh-theme-keyshub contributors
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,120 @@
+# dsh-theme-triptych
+DeepSeek Harness（DSH）外观主题插件包 —— 把 [keyshub.top](https://keyshub.top) 的三种主题色调与壁纸带进 DSH Web GUI。
+三套主题逐字取自参考工程 `isolo-news/web/src/config/themes.ts`，三张壁纸与线上 Hero 背景图（`image_0/2/4_yi19x4.jpg`）SHA-256 完全一致。
+| 主题 | 氛围 | 主色 / 次色 | 色系 |
+| --- | --- | --- | --- |
+| **NEXUS** | 赛博霓虹（暗色） | `#00f0ff` 青 / `#ff2d95` 品红 | 深蓝底 + 荧光点缀 |
+| **COMIKET** | 温暖纸感（亮色） | `#ff6b2b` 橙 / `#3b9eff` 蓝 | 暖纸白底 |
+| **IRONCORE** | 机械工业（暗色） | `#f0a030` 琥珀 / `#4ecdc4` 青绿 | 铁灰底 + 警示橙 |
+## 特性
+- 三套主题通过标准 `theme.register` 注册，与 DSH 内置 Light / Dark / System 完全互通（`theme.setTheme`）。
+- 每套主题自带壁纸：自定义 token `--dsw-theme-wallpaper` 由主题 presenter 自动写入 `<body>` 内联变量，表面色（`bg-base / layer-1 / layer-2 / overlay / sidebar-fill`）改为半透明同色系，壁纸从底层透出，形成毛玻璃观感。
+- 两处零侵入切换入口（均为 additive 槽位，`replaceRisk: none`）：
+  - **设置 → 通用 → “外观主题 / Theme”**（order 11，紧跟系统 Appearance 行）：三张壁纸预览卡片 + “默认 System”；
+  - **侧边栏底部 “主题外观” 调色板按钮**（order 10）：弹出四选项菜单，窄栏（rail）下自动收成纯图标。
+- 卸载即还原：插件停用/更新时主题、样式、槽位全部自动清理。
+## 工作原理（DSH 客户端插件格式）
+这是一个标准 DSH **双面 `dsh.client` 包**：
+- `package.json` 声明 `dsh.client: { platform: "web" }` 与 `exports["./client"]`；
+- **Node 半部**（`lib/index.js`）：作为组合中的一个 loader 行挂载，用 `webServer` 注册三条精确路由（`/dsh-theme-triptych/*.jpg`），从包内 `assets/` 提供壁纸；
+- **浏览器半部**（`lib/client.js`）：`__ModuleLoader__.load` 工厂包，注册主题、注入壁纸样式、挂载两个切换入口；
+- 宿主扫描到该行后自动把客户端包编入 `window.__DSH_BOOT__`，浏览器按需加载 —— **无需重新构建 DSH Web 产物**。
+## 安装（任选其一）
+> 要求：本机已安装 DSH（`dsh` CLI 可用），并能访问 npm registry。
+### 方式 A：官方安装脚本（推荐）
+```bash
+# Linux / macOS / Git Bash on Windows
+bash install/install.sh            # 默认 profile: web；可传参: bash install/install.sh <profile>
+# 或 PowerShell
+powershell -ExecutionPolicy Bypass -File install/install.ps1   # 可传 -Profile <name>
+```
+脚本会：① 在 `$DSH_HOME/profiles/<profile>` 中 `pnpm add dsh-theme-triptych`（无 pnpm 则用 npm）；② 向 `cordis.patch.yml` 追加 loader 插入项；③ 提示重启。
+### 方式 B：手动三步
+```bash
+# 1) 安装包（在 DSH 部署的 profile 目录下）
+cd "$DSH_HOME/profiles/web"          # Windows: %USERPROFILE%\.dsh\profiles\web
+pnpm add dsh-theme-triptych           # 或 npm install dsh-theme-triptych
+# 2) 在 cordis.patch.yml 末尾追加（若文件内容是 []，整体替换为下面块）
+```
+```yaml
+- insert:
+    - id: dsh-theme-triptych
+      name: dsh-theme-triptych
+```
+```bash
+# 3) 重启 DSH
+dsh --profile web
+```
+### 验证
+```bash
+# 壁纸路由（应返回 200 与 image/jpeg）
+curl -I http://127.0.0.1:3080/dsh-theme-triptych/nexus.jpg
+# 打开 Web GUI：侧边栏底部出现调色板按钮；设置 → 通用 出现“外观主题 / Theme”
+```
+## 卸载
+```bash
+cd "$DSH_HOME/profiles/web"
+pnpm remove dsh-theme-triptych
+# 并从 cordis.patch.yml 删除 installer 追加的 insert 块
+```
+## 从源码构建与测试
+```bash
+node scripts/build.mjs   # 生成 lib/client.js（__ModuleLoader__ 工厂包装）与 lib/index.js
+node test/smoke.mjs      # 无 DSH 运行时依赖的冒烟测试（bundle 契约 + 壁纸路由）
+```
+## 发布（维护者）
+DSH 插件没有独立的“提交审核”市场 —— 官方分发渠道就是 **npm**（见 deepseek-ai 官方文档 [`docs/user/develop/basic/publish.zh.md`](https://github.com/deepseek-ai/DeepSeek-Harness/blob/master/docs/user/develop/basic/publish.zh.md)），“能被搜到”取决于 npm 元数据与 GitHub 主题：
+1. **发布到 npm**（官方渠道，`npm search` / `pnpm add` 可发现）：
+   - 本地：`node scripts/build.mjs` 后 `npm publish --access public`（需 npm 账号）。
+   - 自动：打 tag 触发 `.github/workflows/release.yml`（需在仓库 Secrets 配置 `NPM_TOKEN`）：
+   ```bash
+   git tag v0.1.0 && git push origin v0.1.0
+   ```
+2. **优化 npm 可搜索性**：`description` 含 “DeepSeek Harness”，`keywords` 含 `deepseek-harness` / `dsh` / `dsh-plugin`（本包已配置）；补全 `repository` / `homepage` 字段让 npm 页面展示 GitHub 链接。
+3. **让社区插件市场收录**（非官方，但覆盖面最广）：多数社区市场（如 [`DSH-Plugins-Marketplace`](https://github.com/bradeGithub/DSH-Plugins-Marketplace)、[`AwesomeHou/dsh-plugin-marketplace`](https://github.com/AwesomeHou/dsh-plugin-marketplace)）实时同步 GitHub **`dsh-plugin` topic** 下的仓库，或索引 npm 上 `dsh-plugin-*` 名称的包。在 GitHub 仓库页 **About → Topics** 添加 `dsh-plugin`（以及 `deepseek-harness`、`dsh`、`theme`），无需额外申请即可被这些市场自动收录。
+4. 可选：向社区维护的 awesome 列表提交 PR（如 [`awesome-dsh-plugin`](https://github.com/awesome-dsh-plugin/awesome-dsh-plugin)）。
+## 未经安装的试用（动态插件方式）
+若只想在当前 DSH 会话里临时体验（无需改动部署），可在 GUI 会话中把 `src/index.js` / `src/client/index.js` 作为 `cordis_define` 的 `code.host` / `code.client` 声明一个动态插件并运行（需在 Run 卡片中允许）。重启后失效。
+## 许可
+MIT。壁纸图片来自 keyshub.top 项目（`isolo-news/web/public/images`），版权归原作者所有。
+---
+# English
+`dsh-theme-triptych` brings the three appearance themes of [keyshub.top](https://keyshub.top) — **NEXUS** (neon cyan/pink, dark), **COMIKET** (warm paper, light) and **IRONCORE** (industrial amber/teal, dark) — to the DeepSeek Harness Web GUI, wallpapers included.
+It is a standard DSH dual-face `dsh.client` package: the node half serves the three wallpapers over `webServer` routes (`/dsh-theme-triptych/*.jpg`), the browser half registers the themes (translucent surfaces over a wallpaper via the `--dsw-theme-wallpaper` token), and both a **Settings → General → 外观主题 row** and a **sidebar-footer palette button** switch themes. No web rebuild is required — the host serves the client bundle from disk (`/plugins/<id>/client.js`).
+**Install:** `bash install/install.sh` (or manual: `pnpm add dsh-theme-triptych` inside `$DSH_HOME/profiles/<profile>`, append the `- insert:` block for `dsh-theme-triptych` to `cordis.patch.yml`, restart `dsh --profile web`).

package/assets/image_comiket.jpg ADDED Viewed

Binary file

package/assets/image_ironcore.jpg ADDED Viewed

Binary file

package/assets/image_nexus.jpg ADDED Viewed

Binary file

package/lib/client.js ADDED Viewed

@@ -0,0 +1,353 @@
+window.__ModuleLoader__.load({
+  id: "dsh-theme-triptych",
+  factory: (require) => {
+    "use strict";
+    var module = { exports: {} };
+    var exports = module.exports;
+    Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+    var React = require("react");
+/**
+ * dsh-theme-triptych — browser half (plain JS, no build-time imports).
+ *
+ * scripts/build.mjs wraps this file into lib/client.js with the
+ * __ModuleLoader__.load factory contract; the wrapper injects `React`
+ * via require("react") and assigns exports.apply / exports.inject.
+ * Keep this file free of import/export statements.
+ *
+ * What it does:
+ *  1. theme.register — three themes (NEXUS dark / COMIKET light / IRONCORE dark)
+ *     mapping the keyshub palettes onto the DSH --dsw-alias-* tokens. Surface
+ *     tokens are semi-transparent so the wallpaper shows through (glassmorphism).
+ *     A custom token --dsw-theme-wallpaper carries the wallpaper URL; the theme
+ *     presenter applies any active-theme token to <body> inline CSS variables,
+ *     so switching themes swaps the wallpaper with zero DOM code.
+ *  2. One <style> element (fiber-owned) with the body wallpaper rule and the
+ *     switcher UI styles; removed on plugin stop (the module system also tags
+ *     and claims it for HMR bookkeeping).
+ *  3. Two additive switcher entry points:
+ *       - settings.general.item row "外观主题 / Theme" (order 11, right after
+ *         the built-in Appearance row) with three wallpaper cards + System.
+ *       - sidebar.footer.action palette button (order 10) with a popover menu.
+ *     Both are additive list entries — replaceRisk none; nothing shipped is
+ *     shadowed.
+ */
+/* ── palettes (verbatim from keyshub.top / isolo-news web/src/config/themes.ts) ── */
+const THEME_SPECS = [
+  {
+    id: 'nexus', displayName: 'NEXUS', colorScheme: 'dark', wallpaper: '/dsh-theme-triptych/nexus.jpg',
+    // Transparency model: the backdrop is nearly open so the wallpaper reads
+    // clearly; only content surfaces (message cards, inputs) keep a
+    // semi-transparent mask for legibility, and popovers stay near-opaque.
+    alpha: { base: 0.35, layer1: 0.78, layer2: 0.7, overlay: 0.94, sidebar: 0.66 },
+    colors: {
+      primary: '#00f0ff', primaryDark: '#00b8c5', secondary: '#ff2d95', bgBase: '#0a0e1a', bgLayer1: '#151c2e',
+      bgLayer2: '#1a2035', bgTertiary: '#1a2035', bgOverlay: '#1e2640', sidebar: '#111827',
+      border1: 'rgba(0, 240, 255, 0.15)', border2: 'rgba(0, 240, 255, 0.4)',
+      text1: '#e8edf5', text2: '#8892a8', text3: '#5a6478', success: '#00ff88', warn: '#ffaa00', error: '#ff3366',
+    },
+  },
+  {
+    id: 'comiket', displayName: 'COMIKET', colorScheme: 'light', wallpaper: '/dsh-theme-triptych/comiket.jpg',
+    alpha: { base: 0.4, layer1: 0.82, layer2: 0.76, overlay: 0.95, sidebar: 0.7 },
+    colors: {
+      primary: '#ff6b2b', primaryDark: '#cc5522', secondary: '#3b9eff', bgBase: '#faf8f5', bgLayer1: '#ffffff',
+      bgLayer2: '#ebe6de', bgTertiary: '#ebe6de', bgOverlay: '#ffffff', sidebar: '#f2eee8',
+      border1: 'rgba(0, 0, 0, 0.1)', border2: 'rgba(0, 0, 0, 0.24)',
+      text1: '#2a2520', text2: '#6b6158', text3: '#9e958b', success: '#22c55e', warn: '#f59e0b', error: '#ef4444',
+    },
+  },
+  {
+    id: 'ironcore', displayName: 'IRONCORE', colorScheme: 'dark', wallpaper: '/dsh-theme-triptych/ironcore.jpg',
+    alpha: { base: 0.35, layer1: 0.78, layer2: 0.7, overlay: 0.94, sidebar: 0.66 },
+    colors: {
+      primary: '#f0a030', primaryDark: '#c08020', secondary: '#4ecdc4', bgBase: '#121418', bgLayer1: '#1e2128',
+      bgLayer2: '#22262e', bgTertiary: '#22262e', bgOverlay: '#282c35', sidebar: '#1a1d24',
+      border1: 'rgba(240, 160, 48, 0.12)', border2: 'rgba(240, 160, 48, 0.36)',
+      text1: '#d8dce5', text2: '#808898', text3: '#555c6c', success: '#4ecdc4', warn: '#f0a030', error: '#e74c5e',
+    },
+  },
+]
+/* ── helpers ── */
+function hexToRgba(hex, alpha) {
+  const h = String(hex).replace('#', '')
+  const full = h.length === 3 ? h.split('').map((c) => c + c).join('') : h
+  const n = parseInt(full, 16)
+  return 'rgba(' + ((n >> 16) & 255) + ', ' + ((n >> 8) & 255) + ', ' + (n & 255) + ', ' + alpha + ')'
+}
+function buildThemeDef(spec) {
+  const c = spec.colors
+  const a = spec.alpha
+  return {
+    id: spec.id,
+    displayName: spec.displayName,
+    colorScheme: spec.colorScheme,
+    tokens: {
+      /* ── surfaces ── */
+      '--dsw-alias-bg-base': hexToRgba(c.bgBase, a.base),
+      '--dsw-alias-bg-layer-1': hexToRgba(c.bgLayer1, a.layer1),
+      '--dsw-alias-bg-layer-2': hexToRgba(c.bgLayer2, a.layer2),
+      '--dsw-alias-bg-layer-3': hexToRgba(c.bgLayer2, 0.92),
+      '--dsw-alias-bg-overlay': hexToRgba(c.bgOverlay, a.overlay),
+      '--dsw-specific-sidebar-fill': hexToRgba(c.sidebar, a.sidebar),
+      /* ── strokes ── */
+      '--dsw-alias-border-l1': c.border1,
+      '--dsw-alias-border-l2': c.border2,
+      '--dsw-alias-border-l2-darkmode-thin': c.border1,
+      '--dsw-alias-border-l3': hexToRgba(c.primary, 0.3),
+      '--dsw-alias-border-l4': hexToRgba(c.primary, 0.4),
+      /* ── brand / labels ── */
+      '--dsw-alias-brand-primary': c.primary,
+      '--dsw-alias-label-primary': c.text1,
+      '--dsw-alias-label-secondary': c.text2,
+      '--dsw-alias-label-tertiary': c.text3,
+      '--dsw-alias-label-caption': c.text3,
+      '--dsw-alias-label-dimmed': c.text3,
+      /* ── state accents ──
+         business-primary is the UI's main interactive accent: active
+         conversation tab text/bar, active folder icon, tool status, composer
+         caret and pending dot — it must be the theme's PRIMARY hue (e.g.
+         COMIKET orange), not the secondary. */
+      '--dsw-alias-state-success-primary': c.success,
+      '--dsw-alias-state-warn-primary': c.warn,
+      '--dsw-alias-state-error-primary': c.error,
+      '--dsw-alias-state-business-primary': c.primary,
+      '--dsw-alias-state-business-tertiary': hexToRgba(c.primary, 0.18),
+      /* ── buttons (composer + generic) ──
+         info-fill is the composer send circle (white glyph is hard-coded, so
+         it uses the darker primary variant for contrast); tool-bar fill drives
+         the composer tool-row buttons. */
+      '--dsw-alias-button-info-fill': c.primaryDark,
+      '--dsw-alias-button-info-hover': c.primary,
+      '--dsw-alias-button-primary-fill': c.primary,
+      '--dsw-alias-button-primary-hover': c.primaryDark,
+      '--dsw-alias-button-primary-dimmed': hexToRgba(c.primary, 0.35),
+      '--dsw-alias-button-tool-bar-fill': hexToRgba(c.primary, 0.22),
+      '--dsw-alias-button-tool-bar-hover': hexToRgba(c.primary, 0.34),
+      '--dsw-alias-button-tool-bar-fill-invisible': hexToRgba(c.primary, 0.13),
+      '--dsw-alias-button-ghost-active-fill': hexToRgba(c.primary, 0.14),
+      '--dsw-alias-button-ghost-active-hover': hexToRgba(c.primary, 0.2),
+      '--dsw-alias-button-ghost-active-border': hexToRgba(c.primary, 0.45),
+      '--dsw-alias-button-floating-fill': hexToRgba(c.bgLayer1, 0.92),
+      '--dsw-alias-button-floating-hover': hexToRgba(c.bgLayer2, 0.92),
+      /* ── interactive hovers (message actions, chips, lists) ── */
+      '--dsw-alias-interactive-bg-hover': hexToRgba(c.primary, 0.1),
+      '--dsw-alias-interactive-bg-hover-solid': hexToRgba(c.primary, 0.18),
+      '--dsw-alias-interactive-bg-active': hexToRgba(c.primary, 0.16),
+      '--dsw-alias-interactive-bg-hover-accent': hexToRgba(c.primary, 0.22),
+      /* ── system output cards: code blocks, tool status, bubbles ── */
+      '--dsw-alias-markdown-code-block': hexToRgba(c.bgTertiary, 0.82),
+      '--dsw-alias-markdown-code-block-banner': hexToRgba(c.bgTertiary, 0.9),
+      '--dsw-alias-markdown-inline-code': hexToRgba(c.bgTertiary, 0.75),
+      '--dsw-alias-markdown-tag': hexToRgba(c.bgTertiary, 0.75),
+      '--dsw-alias-markdown-placeholder': hexToRgba(c.bgTertiary, 0.55),
+      '--dsw-alias-markdown-citation': hexToRgba(c.bgTertiary, 0.6),
+      /* ── specific seats: input card, message bubbles, attach, nav ── */
+      '--dsw-specific-input-major': hexToRgba(c.bgLayer1, 0.9),
+      '--dsw-specific-bubble': hexToRgba(c.bgLayer1, 0.85),
+      '--dsw-specific-bubble-highlight': hexToRgba(c.bgLayer2, 0.85),
+      '--dsw-specific-selector': hexToRgba(c.primary, 0.22),
+      '--dsw-specific-tip': hexToRgba(c.bgTertiary, 0.7),
+      '--dsw-specific-sidebar-nav-item-active': hexToRgba(c.primary, 0.14),
+      '--dsw-specific-sidebar-nav-item-hover': hexToRgba(c.primary, 0.09),
+      '--dsw-specific-sidebar-nav-item-active-accent': hexToRgba(c.primary, 0.3),
+      /* ── wallpaper (custom token consumed by the WALLPAPER_CSS rule) ── */
+      '--dsw-theme-wallpaper': "url('" + spec.wallpaper + "')",
+    },
+  }
+}
+/* ── styles ── */
+const WALLPAPER_CSS = `
+body {
+  background-image: var(--dsw-theme-wallpaper, none);
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+}
+`
+const UI_CSS = `
+.dswt-row { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 14px; }
+.dswt-title { font-size: 13px; font-weight: 500; color: var(--dsw-alias-label-secondary); }
+.dswt-cards { display: flex; gap: 10px; flex-wrap: wrap; }
+.dswt-card { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px; border: none; background: transparent; border-radius: 10px; cursor: pointer; }
+.dswt-card:hover { background: var(--dsw-alias-bg-layer-2); }
+.dswt-preview { width: 108px; height: 60px; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid var(--dsw-alias-border-l1); position: relative; overflow: hidden; box-sizing: border-box; }
+.dswt-dots { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 4px; }
+.dswt-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }
+.dswt-name { font-size: 12px; color: var(--dsw-alias-label-primary); text-align: center; }
+.dswt-card[data-active='true'] .dswt-preview { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }
+.dswt-card[data-active='true'] .dswt-name { color: var(--dsw-alias-brand-primary); }
+.dswt-system .dswt-preview { background: linear-gradient(135deg, var(--dsw-alias-bg-layer-1), var(--dsw-alias-bg-layer-2)); display: flex; align-items: center; justify-content: center; }
+.dswt-system-mark { font-size: 24px; line-height: 1; opacity: 0.8; color: var(--dsw-alias-label-secondary); }
+.dswt-foot { width: 100%; }
+.dswt-foot-btn { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 7px 10px; border: none; background: transparent; color: var(--dsw-alias-label-primary); border-radius: 8px; cursor: pointer; font-size: 13px; }
+.dswt-foot-btn:hover, .dswt-foot-btn[data-open='true'] { background: var(--dsw-alias-bg-layer-2); }
+.dswt-rail { justify-content: center; padding: 7px 0; }
+.dswt-palette { width: 16px; height: 16px; border-radius: 5px; flex: none; background: conic-gradient(from 90deg, #00f0ff, #ff2d95, #f0a030, #4ecdc4, #00f0ff); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
+.dswt-foot-label { font-size: 13px; }
+.dswt-pop { position: fixed; left: 10px; bottom: 68px; z-index: 200; min-width: 216px; background: var(--dsw-alias-bg-overlay); border: 1px solid var(--dsw-alias-border-l1); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
+.dswt-pop-backdrop { position: fixed; inset: 0; z-index: 190; background: transparent; border: none; cursor: default; }
+.dswt-pop-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border: none; background: transparent; color: var(--dsw-alias-label-primary); border-radius: 8px; cursor: pointer; font-size: 13px; text-align: left; width: 100%; }
+.dswt-pop-item:hover { background: var(--dsw-alias-bg-layer-2); }
+.dswt-pop-item[data-active='true'] { color: var(--dsw-alias-brand-primary); }
+.dswt-pop-swatch { width: 22px; height: 22px; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid var(--dsw-alias-border-l1); flex: none; }
+.dswt-pop-swatch-system { background: linear-gradient(135deg, var(--dsw-alias-bg-layer-1), var(--dsw-alias-bg-layer-2)); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--dsw-alias-label-secondary); }
+`
+/* ── switcher UI data ── */
+const ROW_CARDS = [
+  { id: 'nexus', name: 'NEXUS', preview: '/dsh-theme-triptych/nexus.jpg', dots: ['#00f0ff', '#ff2d95'] },
+  { id: 'comiket', name: 'COMIKET', preview: '/dsh-theme-triptych/comiket.jpg', dots: ['#ff6b2b', '#3b9eff'] },
+  { id: 'ironcore', name: 'IRONCORE', preview: '/dsh-theme-triptych/ironcore.jpg', dots: ['#f0a030', '#4ecdc4'] },
+]
+const QUICK_CARDS = [
+  { id: 'nexus', name: 'NEXUS 赛博霓虹', swatch: '/dsh-theme-triptych/nexus.jpg' },
+  { id: 'comiket', name: 'COMIKET 温暖纸感', swatch: '/dsh-theme-triptych/comiket.jpg' },
+  { id: 'ironcore', name: 'IRONCORE 机械工业', swatch: '/dsh-theme-triptych/ironcore.jpg' },
+]
+function isCustom(id) {
+  return id === 'nexus' || id === 'comiket' || id === 'ironcore'
+}
+/* ── components (React.createElement only; React is injected by the wrapper) ── */
+function ThemeRow(props) {
+  const [pref, setPref] = React.useState(props.snapshot())
+  React.useEffect(() => props.subscribe(setPref), [])
+  return React.createElement('div', { className: 'dswt-row' },
+    React.createElement('div', { className: 'dswt-title' }, '外观主题 / Theme'),
+    React.createElement('div', { className: 'dswt-cards' },
+      ROW_CARDS.map((card) => React.createElement('button', {
+        key: card.id, type: 'button', className: 'dswt-card',
+        'data-active': pref === card.id || undefined,
+        onClick: () => props.setTheme(card.id),
+      },
+        React.createElement('div', { className: 'dswt-preview', style: { backgroundImage: "url('" + card.preview + "')" } },
+          React.createElement('div', { className: 'dswt-dots' },
+            card.dots.map((d) => React.createElement('span', { key: d, className: 'dswt-dot', style: { background: d } })),
+          ),
+        ),
+        React.createElement('div', { className: 'dswt-name' }, card.name),
+      )),
+      React.createElement('button', {
+        type: 'button', className: 'dswt-card dswt-system',
+        'data-active': !isCustom(pref) || undefined,
+        onClick: () => props.setTheme('system'),
+      },
+        React.createElement('div', { className: 'dswt-preview' },
+          React.createElement('span', { className: 'dswt-system-mark' }, '◐'),
+        ),
+        React.createElement('div', { className: 'dswt-name' }, '默认 System'),
+      ),
+    ),
+  )
+}
+function ThemeFooterAction(props) {
+  const [pref, setPref] = React.useState(props.snapshot())
+  const [open, setOpen] = React.useState(false)
+  React.useEffect(() => props.subscribe(setPref), [])
+  const btn = React.createElement('button', {
+    type: 'button',
+    className: props.wide ? 'dswt-foot-btn' : 'dswt-foot-btn dswt-rail',
+    'data-open': open || undefined,
+    'aria-label': '主题外观',
+    'aria-expanded': open || undefined,
+    onClick: () => setOpen(!open),
+  },
+    React.createElement('span', { className: 'dswt-palette' }),
+    props.wide ? React.createElement('span', { className: 'dswt-foot-label' }, '主题外观') : null,
+  )
+  const pop = React.createElement('div', { className: 'dswt-pop', role: 'menu', 'aria-label': '主题外观' },
+    QUICK_CARDS.map((item) => React.createElement('button', {
+      key: item.id, type: 'button', role: 'menuitem', className: 'dswt-pop-item',
+      'data-active': pref === item.id || undefined,
+      onClick: () => { props.setTheme(item.id); setOpen(false) },
+    },
+      React.createElement('span', { className: 'dswt-pop-swatch', style: { backgroundImage: "url('" + item.swatch + "')" } }),
+      React.createElement('span', null, item.name),
+    )),
+    React.createElement('button', {
+      key: 'system', type: 'button', role: 'menuitem', className: 'dswt-pop-item',
+      'data-active': !isCustom(pref) || undefined,
+      onClick: () => { props.setTheme('system'); setOpen(false) },
+    },
+      React.createElement('span', { className: 'dswt-pop-swatch dswt-pop-swatch-system' }, '◐'),
+      React.createElement('span', null, '默认 System'),
+    ),
+  )
+  return React.createElement('div', { className: 'dswt-foot' },
+    btn,
+    open ? React.createElement(React.Fragment, null,
+      React.createElement('button', { type: 'button', className: 'dswt-pop-backdrop', 'aria-hidden': 'true', tabIndex: -1, onClick: () => setOpen(false) }),
+      pop,
+    ) : null,
+  )
+}
+/* ── plugin face (the wrapper assigns exports.apply / exports.inject) ── */
+/** Hard service dependencies: theme registry and the slot system. */
+const inject = ['theme', 'slots']
+function apply(ctx) {
+  const theme = ctx.theme
+  const slots = ctx.slots
+  // 1. Register the three themes; disposers are fiber-owned so a stop or
+  //    update unregisters them (an active custom preference resets safely).
+  for (const spec of THEME_SPECS) {
+    const dispose = theme.register(buildThemeDef(spec))
+    ctx.effect(() => dispose)
+  }
+  // 2. Wallpaper rule + switcher styles, fiber-owned. NOTE: ctx.effect(execute)
+  //    runs `execute` immediately and treats its RETURN as the unload cleanup —
+  //    `() => { style.remove() }` would remove the styles right away, so the
+  //    body returns a cleanup function instead.
+  const style = document.createElement('style')
+  style.textContent = WALLPAPER_CSS + '\n' + UI_CSS
+  document.head.appendChild(style)
+  ctx.effect(() => () => { style.remove() })
+  // 3. Live preference state for both entry points.
+  let preference = theme.getTheme().preference
+  const listeners = new Set()
+  const disposeEvent = ctx.on('theme/change', (snapshot) => {
+    preference = snapshot.preference
+    for (const fn of Array.from(listeners)) fn(preference)
+  })
+  ctx.effect(() => disposeEvent)
+  const face = () => ({
+    subscribe: (fn) => { listeners.add(fn); return () => { listeners.delete(fn) } },
+    snapshot: () => preference,
+    setTheme: (id) => theme.setTheme(id),
+  })
+  // 4. Additive entry points.
+  slots.inject('settings.general.item', () => slots.register(
+    { name: 'settings.general.item', id: 'dsh-theme-triptych-appearance', order: 11, inject: face },
+    ThemeRow,
+  ))
+  slots.inject('sidebar.footer.action', () => slots.register(
+    { name: 'sidebar.footer.action', id: 'dsh-theme-triptych-quick', order: 10, inject: face },
+    ThemeFooterAction,
+  ))
+}
+    exports.apply = apply;
+    exports.inject = inject;
+    return module.exports;
+  }
+});

package/lib/index.js ADDED Viewed

@@ -0,0 +1,57 @@
+/**
+ * dsh-theme-triptych — node half.
+ *
+ * Mounts as an ordinary host loader row in the deployment composition. Its one
+ * job is serving the three wallpaper images over the deployment's own HTTP
+ * carrier (`webServer`) so the browser theme can reference same-origin URLs.
+ * The browser half ships through exports["./client"] (see src/client/index.js).
+ *
+ * The row is a hard injection of `webServer` (same as the client-modules node
+ * half): without it the fiber parks until the carrier exists — a bare
+ * ctx.get() at apply time races boot order and silently registers nothing.
+ */
+import { readFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+/** Package-root assets directory (lib/../assets). */
+const ASSETS_DIR = fileURLToPath(new URL('../assets/', import.meta.url))
+/** Route table: URL path → asset file. Keep in sync with src/client/index.js WALLPAPER URLs. */
+const ROUTES = [
+  { path: '/dsh-theme-triptych/nexus.jpg', file: 'image_nexus.jpg', contentType: 'image/jpeg' },
+  { path: '/dsh-theme-triptych/comiket.jpg', file: 'image_comiket.jpg', contentType: 'image/jpeg' },
+  { path: '/dsh-theme-triptych/ironcore.jpg', file: 'image_ironcore.jpg', contentType: 'image/jpeg' },
+]
+/** Hard dependency: the browser HTTP carrier (the fiber waits for it). */
+export const inject = ['webServer']
+/** Host plugin body. */
+export function apply(ctx) {
+  const webServer = ctx.webServer
+  for (const route of ROUTES) {
+    const dispose = webServer.register({
+      kind: 'exact',
+      path: route.path,
+      handler: async (req, res) => {
+        try {
+          const bytes = await readFile(ASSETS_DIR + route.file)
+          res.writeHead(200, {
+            'content-type': route.contentType,
+            'content-length': String(bytes.length),
+            'cache-control': 'public, max-age=86400',
+          })
+          res.end(bytes)
+        } catch (err) {
+          try {
+            res.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' })
+            res.end('wallpaper not found')
+          } catch (err2) {
+            /* response already sent or connection gone */
+          }
+        }
+      },
+    })
+    ctx.effect(() => dispose)
+  }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,63 @@
+{
+  "name": "dsh-theme-triptych",
+  "version": "0.1.0",
+  "description": "DeepSeek Harness appearance theme pack — NEXUS / COMIKET / IRONCORE, three themed editions (palettes from keyshub.top / isolo-news) with wallpapers, a settings row and a sidebar quick switcher",
+  "type": "module",
+  "main": "lib/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/iMocking/dsh-theme-triptych.git"
+  },
+  "homepage": "https://github.com/iMocking/dsh-theme-triptych",
+  "bugs": {
+    "url": "https://github.com/iMocking/dsh-theme-triptych/issues"
+  },
+  "exports": {
+    ".": {
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "default": "./lib/client.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-theme"
+      ],
+      "platform": "web"
+    }
+  },
+  "files": [
+    "lib",
+    "assets",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "test": "node test/smoke.mjs"
+  },
+  "keywords": [
+    "deepseek-harness",
+    "deepseek",
+    "dsh",
+    "dsh-plugin",
+    "plugin",
+    "theme",
+    "wallpaper",
+    "appearance",
+    "triptych",
+    "nexus",
+    "comiket",
+    "ironcore",
+    "cordis",
+    "client-plugin"
+  ],
+  "license": "MIT"
+}