dsh-pixel-ui 1.9.0 → 1.11.0

package/README.md

@@ -4,12 +4,12 @@
 
 # 🪵 dsh-pixel-ui
 
-> DeepSeek Harness 像素皮肤（Agent Xi 风格）：八个主题一键切换——像素·木屋 / 像素·羊皮纸 / 像素·暖阳 / 像素·终端绿 / 像素·全息 / 像素·南瓜灯 / 像素·便签本 / 像素·云石，随时可切回现代默认 UI。
+> DeepSeek Harness 像素皮肤（Agent Xi 风格）：九个主题一键切换——像素·木屋 / 像素·羊皮纸 / 像素·暖阳 / 像素·终端绿 / 像素·全息 / 像素·南瓜灯 / 像素·便签本 / 像素·云石 / 像素·秘银，随时可切回现代默认 UI。
 
 ![License: MIT](https://img.shields.io/badge/license-MIT-brightgreen)
 ![dsh](https://img.shields.io/badge/dsh-0.2.1--rc.3-blue)
-![version](https://img.shields.io/badge/version-1.9.0-F4D03F)
-![themes](https://img.shields.io/badge/themes-8-orange)
+![version](https://img.shields.io/badge/version-1.11.0-F4D03F)
+![themes](https://img.shields.io/badge/themes-9-orange)
 ![contrast](https://img.shields.io/badge/WCAG-AA%20audited-brightgreen)
 
 ---
@@ -18,11 +18,12 @@
 
 `dsh-pixel-ui` 是一个**皮肤插件**，把 dsh Web GUI 重皮肤成像素 RPG 风：
 
-1. **八个主题**：像素·木屋（深木 + 金）、像素·羊皮纸（浅色纸面 + 金棕）、像素·暖阳（暖橙木）、像素·终端绿（终端绿字）、像素·全息（真 PNG 9-slice 深蓝全息框 + 青色描边）、像素·南瓜灯（暗橙藤蔓框 + 暖金）、像素·便签本（浅色活页纸 + 铅笔光标）、像素·云石（板岩 + 白石框 + 钢青）；
-2. **像素质感**：前四套**完全平面**——整像素 2px 描边、平涂色块的一档明度差、2px 棋盘抖动、手绘 SVG 像素图形（对勾/单选点/下拉箭头/光标），零 `box-shadow` 与 `text-shadow`；后四套是**真素材分支**，使用 Complete UI 素材自带的浮雕边框（CC BY 4.0，见下方授权），全息/南瓜灯/便签本/云石的对话框、菜单、主按钮、输入框、选中行各取不同的 9-slice 策略；
+1. **九个主题**：像素·木屋（深木 + 金）、像素·羊皮纸（浅色纸面 + 金棕）、像素·暖阳（暖橙木）、像素·终端绿（终端绿字）、像素·全息（真 PNG 9-slice 深蓝全息框 + 青色描边）、像素·南瓜灯（暗橙藤蔓框 + 暖金）、像素·便签本（浅色活页纸 + 铅笔光标）、像素·云石（板岩 + 白石框 + 钢青）、像素·秘银（靛紫 + 银蓝薄框 + 紫高光）；
+2. **像素质感**：前四套**完全平面**——整像素 2px 描边、平涂色块的一档明度差、2px 棋盘抖动、手绘 SVG 像素图形（对勾/单选点/下拉箭头/光标），零 `box-shadow` 与 `text-shadow`；后五套是**真素材分支**，使用 Complete UI 素材自带的浮雕边框（CC BY 4.0，见下方授权），全息/南瓜灯/便签本/云石/秘银的对话框、菜单、主按钮、输入框、选中行各取不同的 9-slice 策略；
 3. **宿主表面一起换色**：主题 token 从 17 个扩到 23 个，新增用户气泡、弹层菜单、输入区、选择键、提示底等宿主自绘表面的颜色，气泡/输入区不再留着宿主默认蓝；
 4. **细节与动感**：所有动效走 `steps()` 阶梯（80/140/220ms），按下 1px 位移、页签下划线逐格生长、思考中闪烁光标、运行中左条呼吸、toast 三帧进入；另有主题化勾/点、代码块终端顶栏、表格斑马纹、吸顶标题底线、滚动条握把、纸面专用深色光标。`prefers-reduced-motion` 下一律关闭；
 5. **桌面端友好**：内容列宽随视口撑开（`clamp(680px, 64vw - 140px, 1200px)`，窄屏仍是宿主原本的 680px），皮肤选择在 `dsh-app://` 页面上也能恢复；素材在构建期转成 data URI 内联，换素材只需重新 build + 刷新页面，不必重启宿主。
+6. **控件细节（v1.11.0）**：菜单/选项/原生 select 不再落回宿主默认浅灰；无 class 的第三方按钮、危险按钮有主题描边；输入框内凹 2px 斜面 + `focus-visible` 金环 + 禁用态；表格等宽数字；宿主额外别称（`bg-layer-3` / `border-l3/l4` / `interactive-bg-hover` / `menu-group-header-fill`）也映射到主题色；
 
 **适合谁**：想要像素风 / 星露谷风 / 复古终端外观的 dsh 用户；想给会话截图加一点氛围感的博主和开发者。
 
@@ -101,6 +102,17 @@
 
 ![像素·云石组件预览：白石对话框、菜单、主按钮、图标键、输入框、选中行](./assets/preview-marble.png)
 
+### 像素·秘银 · `pixel-mithril`
+
+> 深色 · 靛紫 `#120E24` + 银蓝 `#BDB4E0` + 紫高光 `#B49BFF`；四边都是 6px 银蓝薄框，按钮/输入框/选中行是银灰控件。
+
+- **对话框 / 菜单**：`Frame_Lite_01a.png` 32×32 → `slice:6 fill`；96×96 的 `Frame_Standard` 银边只集中在左右、上下是暗填充，做对话框像“幕布框”，所以不用；
+- **主按钮**：`Button_Large_01a1/2/3`（96×32，三态）→ `slice:6 6 10 6`、`border-width:6px 6px 9px 6px`；银灰底 + 深墨字；
+- **图标按钮**：`Button_Small_01a1` 32×32 → `slice:6 fill`；
+- **输入框 / 选中行**：`Textfield_01a` / `Select_01a1` 32×32 → `slice:6 fill`；输入框灰底白字（占位符 `#F2F5FF`），选中行黑底浅字。
+
+![像素·秘银组件预览：银蓝薄框对话框、菜单、银灰按钮、输入框、选中行](./assets/preview-mithril.png)
+
 ## Motion & detail
 
 | 层 | 细节 | 动效 |
@@ -130,10 +142,10 @@
 | dsh 生态 | `0.1.0-rc.6` ~ `0.2.x`（ThemeService `register`/`setTheme` + `settings.general.item` 槽位；`0.2.1-rc.3` 已按源码逐条核对，并用 0.2.1 真实的 `ThemeRuntime` 跑通注册/恢复/切换契约；见 `docs/dev/迭代记录.md`） |
 | 兼容声明 | 同时声明 `engines.dsh` 与 `@deepseek-ai/dsh-*` peers：0.2.1 的 app-boot 优先读 `engines.dsh`，dshmarket 的发现页把两者取交集；任一判定器都能过 |
 | DSH Desktop | 2.0.x（web 兼容模式/高级模式均适用） |
-| 模式 | 六深色 + 两浅色（`colorScheme` 按主题声明） |
+| 模式 | 七深色 + 两浅色（`colorScheme` 按主题声明） |
 | 浏览器 | 现代 Chromium / Firefox（`localStorage` + CSS 变量 + SVG 光标） |
 | 字体 | fusion-pixel 12px zh_hans（MIT）+ Press Start 2P（OFL），随包分发 |
-| 对比度 | 八主题全部通过 WCAG AA（正文 ≥4.5:1、非文本 ≥3:1，`npm run test:contrast` 门禁） |
+| 对比度 | 九主题全部通过 WCAG AA（正文 ≥4.5:1、非文本 ≥3:1，`npm run test:contrast` 门禁） |
 
 ## Install / Uninstall
 
@@ -149,7 +161,7 @@ GitHub Releases（无需 npm，同样开箱即用）：
 
 ```bash
 # 下载 Releases 里的 dsh-pixel-ui-<version>.tgz
-dsh plugin add ./dsh-pixel-ui-1.9.0.tgz
+dsh plugin add ./dsh-pixel-ui-1.11.0.tgz
 ```
 
 GitHub 源码（构建产物已随仓库提交，无需构建）：
@@ -200,21 +212,21 @@ DSH Desktop 默认每次启动随机分配本地 Web 端口，而浏览器 `loca
 
 1. 安装后重启 dsh / DSH Desktop；
 2. 首次加载自动激活默认主题「像素·木屋」；
-3. 设置 → 通用 → **像素主题**，九个按钮一键切换八个皮肤和「现代默认」；
+3. 设置 → 通用 → **像素主题**，十个按钮一键切换九个皮肤和「现代默认」；
 4. 选「现代默认」（或外观行选 浅色 / 深色 / 跟随系统）即整体退出皮肤，选择会被记住，下次打开不复活。
 
 最小可复现示例：安装 → 重启 → 木屋主题上身 → 切换到「像素·便签本」→ 对话框变成带装订孔的活页纸 → 输入框文字清晰可读 → 点「现代默认」→ 页面立即回到现代 UI → 刷新页面仍是现代 UI。
 
 ## Configuration
 
-- **无配置项**：八个主题的 23 个 `--dsw-*` token 定义在 `src/client/index.js` 的 `THEMES`，像素质感与 9-slice 素材层在 `src/client/pixel.css`；
+- **无配置项**：九个主题的 23 个 `--dsw-*` token 定义在 `src/client/index.js` 的 `THEMES`，像素质感与 9-slice 素材层在 `src/client/pixel.css`；
 - **默认主题**：`pixel-wood`（仅首次安装时自动激活，之后尊重你的选择）；
 - **持久化**：双层——宿主文件 `$DSH_HOME/storages/dsh-pixel-ui/preference.json`（权威，跨端口/跨浏览器）+ 浏览器 `localStorage` 的 `dsh-pixel-ui:theme`（同 origin 镜像）；
 - 无环境变量、无敏感项。
 
 ## Permissions & data
 
-- 宿主进程：**只读**本包内字体文件；在 `$DSH_HOME/storages/dsh-pixel-ui/` 下读写一个主题偏好 JSON（只注册 `/dsh-pixel-ui/fonts/*` 与 `/dsh-pixel-ui/preference` 两个路由，字体文件名白名单、主题 id 白名单，均无路径穿越）；四套素材主题的 PNG 在构建期已内联进 `lib/client.js`，宿主不再按路径读素材；
+- 宿主进程：**只读**本包内字体文件；在 `$DSH_HOME/storages/dsh-pixel-ui/` 下读写一个主题偏好 JSON（只注册 `/dsh-pixel-ui/fonts/*` 与 `/dsh-pixel-ui/preference` 两个路由，字体文件名白名单、主题 id 白名单，均无路径穿越）；五套素材主题的 PNG 在构建期已内联进 `lib/client.js`，宿主不再按路径读素材；
 - 浏览器半边：注册主题 + 注入样式表 + 一个设置行；无网络请求、无遥测、不读凭据，只在 `localStorage` 存一个主题 id。
 
 ## Troubleshooting
@@ -240,19 +252,20 @@ npm test         # test:compat + test:host + test:client + test:contrast
 - `scripts/check-compat.mjs`：`engines.dsh` / dsh peers / dshReleases 的声明门禁（0.2.1-rc.3 严格安装路径）
 - `scripts/asset-inline.mjs`：把 CSS 里的 `url('pxasset:<theme>/<file>.png')` 换成 data URI，并用 `ASSET_DIRS` 白名单校验主题名
 - `scripts/test-host.mjs`：node 半边（字体白名单 / 偏好路由读写与校验 / **确认没有素材路由** / dispose）
-- `scripts/test-client.mjs`：browser 半边（加载真实 lib/client.js，覆盖注册、恢复矩阵、交互、渲染、动效门禁、**四套素材主题的内联 9-slice**、`data-pixel-asset` 开关、dispose）
-- `scripts/audit-contrast.mjs`：八主题 WCAG 对比度门禁（改 palette 必跑；新增用户气泡 / 菜单面 / 输入区三对）
+- `scripts/test-client.mjs`：browser 半边（加载真实 lib/client.js，覆盖注册、恢复矩阵、交互、渲染、动效门禁、**五套素材主题的内联 9-slice**、`data-pixel-asset` 开关、dispose）
+- `scripts/audit-contrast.mjs`：九主题 WCAG 对比度门禁（改 palette 必跑；新增用户气泡 / 菜单面 / 输入区三对）
 
 改动皮肤后重新构建并刷新浏览器即可；**素材已内联，新增素材主题不再需要重启宿主**。开发文档在 `docs/dev/`（计划 / 迭代 / 踩坑）。欢迎 PR；行为变更请同步更新 README。
 
 ## License & security
 
 [MIT](./LICENSE) © 2026 zhang66633 · 字体：fusion-pixel（MIT）、Press Start 2P（SIL OFL）。
-`pixel-hologram`（8 张）、`pixel-pumpkin`（8 张）、`pixel-papernote`（7 张）、`pixel-marble`（8 张）的 Complete UI 切片
+`pixel-hologram`（8 张）、`pixel-pumpkin`（8 张）、`pixel-papernote`（7 张）、`pixel-marble`（8 张）、`pixel-mithril`（7 张）的 Complete UI 切片
 © Crusenho Agus Hennihuno，[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)，
 分别见 [`hologram`](assets/complete-ui/hologram/ATTRIBUTION.md) /
 [`pumpkin`](assets/complete-ui/pumpkin/ATTRIBUTION.md) /
 [`papernote`](assets/complete-ui/papernote/ATTRIBUTION.md) /
-[`marble`](assets/complete-ui/marble/ATTRIBUTION.md) 的 ATTRIBUTION。
+[`marble`](assets/complete-ui/marble/ATTRIBUTION.md) /
+[`mithril`](assets/complete-ui/mithril/ATTRIBUTION.md) 的 ATTRIBUTION。
 
 安全问题请通过 GitHub **security advisory** 私下报告，不要发公开 issue。

package/assets/complete-ui/mithril/ATTRIBUTION.md

@@ -0,0 +1,32 @@
+# Complete UI Essential Pack · MysticWood theme
+
+Selected sprites from **Complete UI Essential Pack v2.4** by
+**Crusenho Agus Hennihuno** (<https://crusenho.itch.io>), used under the
+**Creative Commons Attribution 4.0 International (CC BY 4.0)** license:
+<https://creativecommons.org/licenses/by/4.0/>.
+
+The sprites are used unmodified as 9-slice textures in the `pixel-mithril`
+theme. They are inlined into the client bundle as data URIs at build time
+(`scripts/asset-inline.mjs`).
+
+- Original pack: Complete UI Essential Pack v2.4
+- Theme: `10_MysticWood_Theme`
+- License text: `LICENSE.txt` in this directory.
+
+| Local file | Source sprite | Role |
+| --- | --- | --- |
+| `panel.png` | `UI_MysticWood_Frame_Lite_01a.png` | dialog + menu frame (32×32, slice 6) |
+| `button.png` | `UI_MysticWood_Button_Large_01a1.png` | primary button (rest) |
+| `button-hover.png` | `UI_MysticWood_Button_Large_01a2.png` | primary button (hover) |
+| `button-press.png` | `UI_MysticWood_Button_Large_01a3.png` | primary button (pressed) |
+| `icon-button.png` | `UI_MysticWood_Button_Small_01a1.png` | icon-only primary button |
+| `input.png` | `UI_MysticWood_Textfield_01a.png` | text field |
+| `select.png` | `UI_MysticWood_Select_01a1.png` | selected row / menu item |
+
+Note: the 96×96 `Frame_Standard` sprite puts the silver art only on the left
+and right edges (top/bottom are almost entirely dark fill), so it reads like
+a curtain frame when used for dialogs. The theme uses the 32×32 `Frame_Lite`
+instead, which has silver on all four sides.
+
+Modifications: none to the images; only CSS border-image slicing is applied at
+runtime.

package/assets/complete-ui/mithril/LICENSE.txt

@@ -0,0 +1,20 @@
+Attribution 4.0 International (CC BY 4.0)
+
+You are free to:
+
+Share — copy and redistribute the material in any medium or format for any purpose, even commercially.
+
+Adapt — remix, transform, and build upon the material for any purpose, even commercially.
+
+The licensor cannot revoke these freedoms as long as you follow the license terms.
+
+Under the following terms:
+
+Attribution - You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
+
+No additional restrictions - You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.
+
+License Link: https://creativecommons.org/licenses/by/4.0/
+
+Licensor Owner: Crusenho Agus Hennihuno
+Licensor Store Link: https://crusenho.itch.io

package/lib/client.js

@@ -124,6 +124,14 @@ html[data-pixel-ui] {\r
   --px-dither: #241408;\r
   /* 暗角（CRT 只保留暗角，扫描线在非整数 DPR 上必糊） */\r
   --px-vignette: rgba(0, 0, 0, 0.2);\r
+  /* 宿主额外别称的兜底：这些 token 不在 23 个里，但宿主组件会读；\r
+   * 不映射的话会露出宿主默认蓝/灰，主题看起来“漏了一块”。 */\r
+  --dsw-alias-bg-layer-3: var(--px-wood-warm);\r
+  --dsw-alias-label-tertiary: var(--px-text-light);\r
+  --dsw-alias-border-l3: var(--px-wood-pale);\r
+  --dsw-alias-border-l4: var(--px-wood-pale);\r
+  --dsw-alias-interactive-bg-hover: var(--px-wood-dark);\r
+  --dsw-alias-menu-group-header-fill: var(--px-wood-mid);\r
   /* 内容列宽：宿主把 --dsh-conversation-column-width 写死成 0，\r
    * clamp(680px, 0 * .64, 920px) 恒取 680px 下限 → 宽屏上正文只占中间一条\r
    * （踩坑 #7）。这里补上那个变量应有的值：正文随视口撑开。 */\r
@@ -457,19 +465,45 @@ html[data-pixel-ui] button[class*='Primary'] {\r
   background-image: none !important;\r
   color: var(--px-accent-ink) !important;\r
   border: 2px solid var(--px-line) !important;\r
+  /* 上/左提亮、下/右压暗：2px 像素浮雕，不靠阴影 */\r
+  border-top-color: color-mix(in srgb, var(--px-accent-bg) 72%, white) !important;\r
+  border-left-color: color-mix(in srgb, var(--px-accent-bg) 72%, white) !important;\r
 }\r
 html[data-pixel-ui] button[class*='primary']:hover:not(:disabled),\r
 html[data-pixel-ui] button[class*='Primary']:hover:not(:disabled) {\r
   background-color: var(--px-accent-hover) !important;\r
 }\r
-html[data-pixel-ui] button[class*='danger'],\r
-html[data-pixel-ui] button[class*='Danger'] {\r
-  border: 2px solid var(--px-line) !important;\r
+html[data-pixel-ui] button[class*='danger']:not([role='menuitem']),\r
+html[data-pixel-ui] button[class*='Danger']:not([role='menuitem']) {\r
+  border: 2px solid var(--dsw-alias-state-error-primary) !important;\r
+  background-color: transparent !important;\r
+  color: var(--dsw-alias-state-error-primary) !important;\r
+}\r
+html[data-pixel-ui] button[class*='danger']:not([role='menuitem']):hover:not(:disabled),\r
+html[data-pixel-ui] button[class*='Danger']:not([role='menuitem']):hover:not(:disabled) {\r
+  background-color: color-mix(in srgb, var(--dsw-alias-state-error-primary) 16%, transparent) !important;\r
 }\r
 html[data-pixel-ui] button:disabled {\r
   opacity: 0.55;\r
   cursor: not-allowed;\r
 }\r
+html[data-pixel-ui] [aria-disabled='true'] {\r
+  opacity: 0.55;\r
+  cursor: not-allowed;\r
+}\r
+/* 宿主自己的按钮都有 class/token；没有 class 的第三方面板按钮不能落回\r
+ * 浏览器默认的浅灰面（暗色主题会突然出现一块白）。只兜“纯文字、无角色”的\r
+ * 按钮，图标按钮和菜单/页签不碰。 */\r
+html[data-pixel-ui] button:not([class]):not([role]):not(:has(> svg:only-child)):not(:disabled) {\r
+  background-color: transparent !important;\r
+  color: var(--px-text-on-dark) !important;\r
+  border: 2px solid var(--px-wood-warm) !important;\r
+  padding: 4px 10px;\r
+}\r
+html[data-pixel-ui] button:not([class]):not([role]):not(:has(> svg:only-child)):not(:disabled):hover {\r
+  background-color: var(--px-wood-mid) !important;\r
+  border-color: var(--px-gold-dark) !important;\r
+}\r
 \r
 /* ── 页签（对话/轨迹/记忆）：文字 + 金下沿，**不加边框**\r
  * v1.4 给页签套了 2px 黑框，整条读起来像凹陷的输入框（用户报「凹陷了」）。\r
@@ -530,6 +564,11 @@ html[data-pixel-ui] [contenteditable='true'] {\r
   caret-shape: block;\r
   background-color: var(--px-input-bg) !important;\r
   border: 2px solid var(--px-gold-deep) !important;\r
+  /* 上/左压暗、下/右提亮：2px 内凹斜面，不靠 box-shadow */\r
+  border-top-color: var(--px-line) !important;\r
+  border-left-color: var(--px-line) !important;\r
+  border-bottom-color: var(--px-wood-pale) !important;\r
+  border-right-color: var(--px-wood-pale) !important;\r
   transition: border-color var(--px-t-fast) var(--px-step-2);\r
 }\r
 html[data-pixel-ui] input:not([type='checkbox']):not([type='radio']):hover:not(:focus),\r
@@ -556,6 +595,23 @@ html[data-pixel-ui] select:focus {\r
   border-color: var(--px-gold) !important;\r
   outline: none !important;\r
 }\r
+/* focus 只换边框在键盘操作时不够显眼；focus-visible 再补一圈金色外环。 */\r
+html[data-pixel-ui] input:focus-visible,\r
+html[data-pixel-ui] textarea:focus-visible,\r
+html[data-pixel-ui] select:focus-visible,\r
+html[data-pixel-ui] [contenteditable='true']:focus-visible {\r
+  outline: 2px solid var(--px-gold-bright) !important;\r
+  outline-offset: 1px !important;\r
+}\r
+html[data-pixel-ui] input:disabled,\r
+html[data-pixel-ui] textarea:disabled,\r
+html[data-pixel-ui] select:disabled {\r
+  opacity: 0.55;\r
+  cursor: not-allowed;\r
+  color: var(--px-text-light) !important;\r
+  -webkit-text-fill-color: var(--px-text-light) !important;\r
+  background-color: color-mix(in srgb, var(--px-input-bg) 75%, var(--px-wood-dark)) !important;\r
+}\r
 html[data-pixel-ui] input::placeholder,\r
 html[data-pixel-ui] textarea::placeholder {\r
   color: var(--px-input-ph) !important;\r
@@ -572,12 +628,12 @@ html[data-pixel-ui] input[type='checkbox'],\r
 html[data-pixel-ui] input[type='radio'] {\r
   appearance: none;\r
   -webkit-appearance: none;\r
-  width: 14px;\r
-  height: 14px;\r
+  width: 16px;\r
+  height: 16px;\r
   padding: 0;\r
   flex-shrink: 0;\r
   background-color: var(--px-input-bg) !important;\r
-  border: 2px solid var(--px-line) !important;\r
+  border: 2px solid var(--px-wood-pale) !important;\r
   transition:\r
     background-color var(--px-t-fast) var(--px-step-2),\r
     border-color var(--px-t-fast) var(--px-step-2);\r
@@ -591,7 +647,8 @@ html[data-pixel-ui] input[type='checkbox']:checked {\r
   /* 12×12 手绘像素对勾（2px 阶梯），颜色由 --px-check 按主题切换 */\r
   background-image: var(--px-check) !important;\r
   background-repeat: no-repeat !important;\r
-  background-position: 3px 1px !important;\r
+  background-size: 12px 12px !important;\r
+  background-position: 0 0 !important;\r
   border: 2px solid var(--px-line) !important;\r
 }\r
 html[data-pixel-ui] input[type='radio']:checked {\r
@@ -599,14 +656,15 @@ html[data-pixel-ui] input[type='radio']:checked {\r
   /* 平色时代没有 inset 灰阶可用：8×8 手绘像素方点，颜色由 --px-radio 切换 */\r
   background-image: var(--px-radio) !important;\r
   background-size: 6px 6px !important;\r
-  background-position: 2px 2px !important;\r
+  background-position: 3px 3px !important;\r
   background-repeat: no-repeat !important;\r
+  border-color: var(--px-line) !important;\r
 }\r
 html[data-pixel-ui] select {\r
   appearance: none;\r
   -webkit-appearance: none;\r
   padding-right: 28px !important;\r
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='8' height='2'/%3E%3Crect x='1' y='2' width='6' height='2'/%3E%3Crect x='2' y='4' width='4' height='2'/%3E%3Crect x='3' y='6' width='2' height='2'/%3E%3C/svg%3E") !important;\r
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cg fill='%23F5E6C8'%3E%3Crect x='0' y='0' width='8' height='2'/%3E%3Crect x='1' y='2' width='6' height='2'/%3E%3Crect x='2' y='4' width='4' height='2'/%3E%3Crect x='3' y='6' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%231A0F06'%3E%3Crect x='2' y='2' width='4' height='2'/%3E%3Crect x='3' y='4' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E") !important;\r
   background-repeat: no-repeat !important;\r
   background-position: right 8px center !important;\r
 }\r
@@ -694,6 +752,7 @@ html[data-pixel-ui] pre code {\r
   background: transparent !important;\r
   color: inherit !important;\r
   padding: 0;\r
+  tab-size: 2;\r
 }\r
 html[data-pixel-ui] blockquote {\r
   border: 2px solid var(--px-wood-light) !important;\r
@@ -719,6 +778,7 @@ html[data-pixel-ui] hr {\r
 html[data-pixel-ui] table {\r
   border: 2px solid var(--px-wood-warm) !important;\r
   border-collapse: collapse;\r
+  font-variant-numeric: tabular-nums;\r
 }\r
 html[data-pixel-ui] tbody tr:nth-child(even) td {\r
   background-color: color-mix(in srgb, var(--px-wood-mid) 32%, transparent) !important;\r
@@ -846,6 +906,27 @@ html[data-pixel-ui] [data-menu-material] button:hover {\r
   background-position: 0 0, 0 0 !important;\r
   background-repeat: no-repeat, repeat !important;\r
 }\r
+/* 菜单项是 <button>，宿主不给底时浏览器会塞一块浅灰按钮面；这里统一透明，\r
+ * 当前项/悬停由下面的金条规则叠加。 */\r
+html[data-pixel-ui] [role='menuitem'],\r
+html[data-pixel-ui] [role='option'] {\r
+  background-color: transparent !important;\r
+  background-image: none !important;\r
+  border: 0 !important;\r
+  color: var(--px-text-on-dark) !important;\r
+}\r
+html[data-pixel-ui] [role='listbox'] {\r
+  border: 2px solid var(--px-line) !important;\r
+  background-color: var(--dsw-specific-menu, var(--px-wood-dark)) !important;\r
+  padding: 4px;\r
+}\r
+html[data-pixel-ui] [role='option'] {\r
+  padding: 5px 8px;\r
+}\r
+html[data-pixel-ui] [role='option'][aria-selected='true'] {\r
+  background-color: var(--px-wood-mid) !important;\r
+  color: var(--px-gold-bright) !important;\r
+}\r
 html[data-pixel-ui] [role='menuitem'] {\r
   transition:\r
     background-color var(--px-t-fast) var(--px-step-2),\r
@@ -961,6 +1042,9 @@ html[data-pixel-ui] [role='dialog'] {\r
   background-size: 10px 2px, 2px 10px, 10px 2px, 2px 10px !important;\r
   background-position: 0 0, 0 0, 100% 100%, 100% 100% !important;\r
   background-repeat: no-repeat !important;\r
+  /* 里侧再压一道暗线：外框 + 内衬，对话框不再是一块平底 */\r
+  outline: 2px solid var(--px-wood-darkest) !important;\r
+  outline-offset: -4px !important;\r
 }\r
 /* 思考中的行：保留宿主文字，但把 1.5s 的平滑扫光改成 4 帧阶梯，\r
  * 并在左侧补一条 2px 的闪烁光标（位置由宿主 decoration 承担，不加布局）。 */\r
@@ -1421,6 +1505,78 @@ html[data-pixel-theme='pixel-marble'] body {\r
   background-size: 4px 4px;\r
 }\r
 \r
+/* 秘银：靛紫底 + 银蓝薄框 + 紫高光。96×96 的 Frame_Standard 银边只在左右，\r
+ * 做对话框像幕布；这里统一用 32×32 Frame_Lite 的 6px 四边薄框。 */\r
+html[data-pixel-theme='pixel-mithril'] {\r
+  --px-wood-darkest: #120E24;\r
+  --px-wood-dark: #1A1430;\r
+  --px-wood-mid: #241C42;\r
+  --px-wood-warm: #2E2552;\r
+  --px-wood-light: #4A3F7A;\r
+  --px-wood-pale: #BDB4E0;\r
+  --px-text-on-dark: #F0ECFF;\r
+  --px-text-light: #BDB4E0;\r
+  --px-parchment: #F0ECFF;\r
+  --px-gold: #B49BFF;\r
+  --px-gold-bright: #D3C4FF;\r
+  --px-gold-dark: #8A6FE0;\r
+  --px-gold-deep: #5A4A9A;\r
+  --px-sidebar-fill: #0F0B1E;\r
+  --px-line: #0B0817;\r
+  --px-accent-bg: #B49BFF;\r
+  --px-accent-hover: #C9B6FF;\r
+  --px-accent-ink: #1A1030;\r
+  --px-input-bg: #646C79;\r
+  --px-input-text: #FFFFFF;\r
+  --px-input-ph: #F2F5FF;\r
+  --px-input-caret: #D3C4FF;\r
+  --px-tooltip-bg: #171129;\r
+  --px-code-bg: #171129;\r
+  --px-code-ink: #D3C4FF;\r
+  --px-code-meta: #BDB4E0;\r
+  --px-ink-on-mid: #F0ECFF;\r
+  --px-topbar-fill: #1A1430;\r
+  --px-dither: #1E1738;\r
+  --pxa-panel: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAexJREFUWIXFVzGvgjAQ/uAxmjgQCIs4OzgaB/+CP5e/wEAYGZiBhUAcTBw1vMF39Vpa0ReLX+Jg73p3vV6/4xwwbPbHARqUWeK8o/OOnsOV4zAAAKzWEZqqBQDUXS8ZiMMAq3Uk/jdVO9JR9XS2KBBnsz8O3DEApHmBw24rGWyqVnL8CtQ99J8H7XHHPNo0L146DclMGSPUXS8ORbbqrr8HwJ3XXY/L+STWFksfddePDJNOrTjV7dVhtY7GAZDzH+9RJ9wgB+mo8md76Wr5FbgkpBTqHOl+JvmzvZfzCWleiCsos8QRAZhSZRsigMNuizgMsFj6uF21T/ijiMMAm/1xcAFz+m2BP09Xtzgn3DJLnLrrv+IcgPwMOfnYBC94VxWqPPBJ0FMEHmzomrqWDdyuAxZLXzQ94C8DauOxDV5vk0xoC+TvK0yo5YE5mZC3b4kJbXIBFeDb3dAGpG5ITDgn+GFFBlbraBYmVHvOrEwIyN+Soh3PAU7DHF8pQn4NnqkXmLiArmeKK55dIy96D5C/+2vc62Cx9LWbKY0muarHQY2IE5E0mPAgKDC+3lStkOnkpMNtcOianhjNVBZM82IUrTodmZiTmG5qvEvz4jGc6k6jBmSCaa86uJIerZVZ4kyO3QR1rP7PPtLla7+860qJT47YMQAAAABJRU5ErkJggg==");\r
+  --pxa-panel-slice: 6 fill;\r
+  --pxa-panel-width: 6px;\r
+  --pxa-panel-repeat: stretch;\r
+  --pxa-menu: var(--pxa-panel);\r
+  --pxa-menu-slice: 6 fill;\r
+  --pxa-menu-width: 6px;\r
+  --pxa-menu-repeat: stretch;\r
+  --pxa-button: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAgCAYAAADtwH1UAAAAAXNSR0IArs4c6QAAActJREFUaIHtmsFuwjAMhp2uD7DLGBIDzkhwrEDiFXio7Z36CpWocixSpd22adK07b4jO0xmaZKWZCx1BP6OsfM3smli6ghoYbbc7AEA6jIXtnGbrWtu7Hqn6vqsUcVwRtbZAgpZGRPW2QIAwGrrmhu73qm6PmsE+E2KAPgJPj6A6YdCVlCXuUjbjDpd2fTxodQLpenqa/uRp/rWU8jK6ojiXW+Kiw+lXihNV189trPlZp+qk9Bhlc1bRbpsPj6UeqE0XXwxxvjGNM4AlwQwf2crd4cY4xmQUC/q0uEEEJPohzDTH7PlZp8ANE/uQlawlTuyRZ0ruP8jGPPGFsR/xsKjx/jq8/Xx4Utc309Gt1wFBeRuNIAEBBSyAow1V0ERwAkghhNADJehhHAZ2iOtZWhd5sLnqx9zGuqHT6MK4jI0HKtsbu0Z8CFMDCeAGK8qaCt3Tgd07H7UmojRETvW13Ttj8buR6WptiStHbFjQv/d+Kbyo9LUY1yXueBrKUQYZejL0xvlei4KNdapzTCeDg1HdbzLpo6rY+PpMGo93Ref4TPH59nIYQuaDG4MIxOO5/cP7gfEQONyLr8F/YC/fgAlAQDmDWkmDOp19W+opr3bUvZHnwAAAABJRU5ErkJggg==");\r
+  --pxa-button-hover: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAgCAYAAADtwH1UAAAAAXNSR0IArs4c6QAAAbhJREFUaIHtmsFOg0AQhv/FPoAXa5Pa9tykPRKa9BX6UPpOvAJJyR4hIfGmxsSod494MGOWZaGLCkPsfMfdf382s8AOzAKCIAhsqKaOdXQoAaBIY+Vqd/W1jR2739DzJGpCYh9ukeisNmAfbgHA2dc2dux+Q8+TFkQBX8GnCwjDkOgMRRqrSVOnTdtd00XD6deXp6/WdZNP7FdPojOnkMzbnhQfDadfX56+Wju26+hQTsxBJNiFm0aTtr4uGk6/vjx9tBRjemIqe4DPAgg/56jz7xjTHhBwT+rckQVgJrA3YWE41tGhDIDqzp3oDEeds03qv0Lvf4JiXnkFycdY/9gxvnh/vr/7UJe3y/m1ZEE9cjOfIoBCojNQrCULGgGyAMzIAjAjaSgjkoYOSGMaWqSx6vLXT/gd5o/PWhYkaWh/7MKNs2YgmzAzsgDMdMqCjjr32qDHruP2JGoVsVN1Td/66Nh1XJ5mSdJZETtl9NeFby4dl6cd4yKNlRxLYaKWhj49vHDO56wwY105GbecXgEAFqtZTWi2t/WZ7WbbYjUbtZ+tpWt0GeN77cfXt+rJOEL+Cw2DeU70E2+ktChGMXYMAAAAAElFTkSuQmCC");\r
+  --pxa-button-active: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAgCAYAAADtwH1UAAAAAXNSR0IArs4c6QAAAbxJREFUaIHtmrFugzAQhs+UB+jSNFKaZEZKRkSkvAIP1b4Tr4AE8ggSUre2qlS13TvSobrK2IaYNnAo3Df6fv9YZ8AHNgDDzBnRFgiiuAYAqPJE2Nptsa6+U/cbe5yIIUSO4R5SWRgdjuEeAMAa6+o7db+xx4kTIgB+ko8XYMYhlQVUeSL8tqBO113TR0PpN5Snq9Z2k/v6qyeVhVWI5l1PiouG0m8oT1etntsgimtf7YSCQ7hrNemK9dFQ+g3l6aLFHOMT01gDXCaA+TuZLH9zjGuARz2oucMTQIynL8LMeARRXHsAzZU7lQVksiQb1KWC738Ec954BfHH2PDoOb76fH18+BLX95vVLVdBA3K3WoAHAlJZAOaaq6AJwBNADE8AMVyGEsJl6Ii0lqFVnog+f/2Y/6H++DSqIC5Dh+MQ7qx7BrwIE8MTQEyvKiiTpdMCPXUdtSdi7Iid2td03R+duo7KU92StO6InTI698Y3lY7KU89xlSeCj6UQYZShL09vlOOZFWqufVtgvV0aQrW9K6a2q23r7XLSfroWr9GnT59rI42jiZvFjSFgzs/z+0fzaCLCP+bGQT2o+w3agrbYSKXf0wAAAABJRU5ErkJggg==");\r
+  --pxa-button-slice: 6 6 10 6 fill;\r
+  --pxa-button-width: 6px 6px 9px 6px;\r
+  --pxa-button-ink: #12101E;\r
+  --pxa-button-hover-ink: #12101E;\r
+  --pxa-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVlJREFUWIXlV02ugkAM7ky4gsbNe65JdEkw8QoclyuQQGYJCWt1Y/QQuHivpDN2fgjCLPx2tJ1+tfSTjgAL0rwYAAD6phScnfO5ztryvQUgztkRKtW+JT9nRwAA1uc6a9qwEIHkmHgtVKqFvilFYnOasHVkSoz5I9O8GAS2nraW6wYmdnXKF2PmrlQLCUd+yg5WEpcvJAY5xlfwPwzeGZhLbIOcfOLDiFpAmheDNPW/FGrVaQrBVy7pA8DfkNSqW6wQOvB9UwrJOZfAKTuw/xOyb0qBxhAZfhrxhzAWuTaEMRFNhpoKYsgQoakgigzpw9oy/G4VjEM4RQW16rwDGhJDoW1Evp3OtxP6Yrh1j92KbUnmLqYmh3UrdskxRKpT5DwO4e1yDz40F5Qr4Rw/+x1bFNpdPmp3xbMF+IJdXeJ8IV2N/jXULqe/280qpNfHU7+c0iLWKIBe0V+Hve4WMcTm8AAAAABJRU5ErkJggg==");\r
+  --pxa-icon-slice: 6 fill;\r
+  --pxa-icon-width: 6px;\r
+  --pxa-input: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAYFJREFUWIXlV81Kw0AQ/rKKIoQogYRckpx9Al/Cx+1L9Al6Nl4kgYKlKopQD2HCZDa72bbJRuh3aWFnvpnMzs9OAAMen54PALBZrwKTzJC81Bnj0QQ5wijGfrfVlIhM6oRRDACazhAPcXREpDwGTuSqY+LZrFfBtYsxbshk9FTHNAdkqIo0QVU3TmRFmgCAVV46NxgBIgKAvMycjLvIDjlmvAJOdowTJvnXlzcAbYR5FBTQZuRQtk+JvMx6kQXa5Ff0Z1braCNQ1U339fSrSOCckjoFVIZqXHRe9BzY77Yo0uTopJvMAV/gCa9kAlZ105XMnKBZoABomekTykcPkAijuCv9/1UFF+EAv+6uFfuAnAVaKwaWaURXlI03t3f4+f7C+8cngt8D7h/CSQ3JYdSbBYv2Ae8WpQNLNCKC1yqQoOs2vglNAykvM+uZTZfDuheMPcPPPefQHBirBCIfkuOGXSvKaTPihJxYbk7SqMu2ZF1OTUsoP7e9qG36rlv37PgDpinFryEHyfIAAAAASUVORK5CYII=");\r
+  --pxa-input-slice: 6 fill;\r
+  --pxa-input-width: 6px;\r
+  --pxa-input-ink: #FFFFFF;\r
+  --pxa-placeholder: #F2F5FF;\r
+  --pxa-caret: #D3C4FF;\r
+  --pxa-select: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAbFJREFUWIXtV6GOwkAQfbtB1RNwDQhCSM5UnMGcqSPBofgCPogvQJ0jwZ3BYBBnSAhBQOog+NqeaGaZXXrbvYMthpeQdFh23qM7szMjgiAAAHT7gwwO2K0Wwrb+Vz8iCAK1aTIeYrs/oNdpqx9yezqbW0XY/HBf3I+I4pG2qQzL9cYq4OP9rdQHF1ErIk+SEwAgDJvqGQCO54uTwFajrmzuIwybAPI3MRkPMZ3NcwEcSXJSREWEthjYrRai2x9kfJ/pg0QQNAGcvCzYbCK4naYpACCKR0pYGDbVG5cAbs7+v+Q2fH99aj4pQCU3zNdTBSQ3eMD5Ag9EJcAl/R4F+pOFR/AMSOB6w7nk+b0gDuLUrmLg8RlAaUigmxfIM0NQMfIFU4AJaV2tAC8BLwE1AF7T0ISZhpLIqZNx7enuISeuKB5lEsg7IgBaJ+MLxEGclRcjglYNqyxGVI61amgu+oTZc1TekBCsDYmPTODpB1yPoEbGdn9QR3A8X34Vcc9o1mrU7W05cBsHfLAgYWWjWdlgwvH00UySs+lsrs6l12lrH/puud44CTT3mc/acPrs8fwH1IMJs2mWBVMAAAAASUVORK5CYII=");\r
+  --pxa-select-slice: 6 fill;\r
+  --pxa-select-width: 6px;\r
+  --pxa-ink: #F0ECFF;\r
+  --pxa-accent: #B49BFF;\r
+  --pxa-accent-bright: #D3C4FF;\r
+  --pxa-hover-wash: rgba(180, 155, 255, 0.12);\r
+  --pxa-tooltip-bg: #171129;\r
+  --pxa-tooltip-ink: #F0ECFF;\r
+}\r
+html[data-pixel-theme='pixel-mithril'] body {\r
+  background-color: var(--px-wood-darkest);\r
+  background-image: repeating-conic-gradient(rgba(180, 155, 255, 0.04) 0 25%, transparent 0 50%);\r
+  background-size: 4px 4px;\r
+}\r
+\r
 /* ── 共用 9-slice 规则：只在素材主题生效 ─────────────────────────── */\r
 /* 便签的纸面几乎与页面同色，补 2px 墨线把「纸」钉出来；其他素材主题的\r
  * 边缘本身对比足够，--pxa-outline 不设即透明。 */\r
@@ -1508,6 +1664,15 @@ html[data-pixel-asset] [contenteditable='true'] {\r
   caret-color: var(--pxa-caret) !important;\r
   box-sizing: border-box !important;\r
 }\r
+/* 原生 select 用输入框的底色/文字色，不套 9-slice：border-image 的 fill 会\r
+ * 盖住右侧箭头，且不同主题的输入图填充色与箭头对比不稳定。 */\r
+html[data-pixel-asset] select {\r
+  background-color: var(--px-input-bg) !important;\r
+  color: var(--px-input-text) !important;\r
+  border: 2px solid var(--px-line) !important;\r
+  box-sizing: border-box !important;\r
+  padding-right: 30px !important;\r
+}\r
 html[data-pixel-asset] input::placeholder,\r
 html[data-pixel-asset] textarea::placeholder {\r
   color: var(--pxa-placeholder) !important;\r
@@ -1789,10 +1954,39 @@ var THEMES = [
       "--dsw-specific-selector": "#3C4A60",
       "--dsw-specific-tip": "#2A3548"
     }
+  },
+  {
+    id: "pixel-mithril",
+    colorScheme: "dark",
+    tokens: {
+      "--dsw-alias-bg-base": "#120E24",
+      "--dsw-alias-bg-layer-1": "#1A1430",
+      "--dsw-alias-bg-layer-2": "#241C42",
+      "--dsw-alias-bg-overlay": "#171129",
+      "--dsw-alias-border-l1": "#3A3260",
+      "--dsw-alias-border-l2": "#9A93D6",
+      "--dsw-alias-brand-primary": "#B49BFF",
+      "--dsw-alias-label-primary": "#F0ECFF",
+      "--dsw-alias-label-secondary": "#BDB4E0",
+      "--dsw-alias-state-error-primary": "#FF7A8A",
+      "--dsw-alias-state-success-primary": "#7BE3B0",
+      "--dsw-alias-state-warn-primary": "#FFD166",
+      "--dsw-alias-state-idle-primary": "#776E9C",
+      "--dsw-specific-sidebar-fill": "#0F0B1E",
+      "--dsw-alias-button-primary-fill": "#9CA1A5",
+      "--dsw-alias-button-primary-hover": "#B7BCC0",
+      "--dsw-alias-label-primary-foreground": "#12101E",
+      "--dsw-specific-bubble": "#241C42",
+      "--dsw-specific-bubble-highlight": "#2E2552",
+      "--dsw-specific-menu": "#171129",
+      "--dsw-specific-input-major": "#1A1430",
+      "--dsw-specific-selector": "#3A3260",
+      "--dsw-specific-tip": "#241C42"
+    }
   }
 ];
 var PIXEL_IDS = THEMES.map((theme) => theme.id);
-var ASSET_IDS = /* @__PURE__ */ new Set(["pixel-hologram", "pixel-pumpkin", "pixel-papernote", "pixel-marble"]);
+var ASSET_IDS = /* @__PURE__ */ new Set(["pixel-hologram", "pixel-pumpkin", "pixel-papernote", "pixel-marble", "pixel-mithril"]);
 var RESTORABLE_IDS = /* @__PURE__ */ new Set(["light", "dark", "system", ...PIXEL_IDS]);
 var LOCALE_NS = "settings.pixel-ui";
 var MESSAGES = {
@@ -1807,6 +2001,7 @@ var MESSAGES = {
     "theme.pixel-pumpkin": "像素·南瓜灯",
     "theme.pixel-papernote": "像素·便签本",
     "theme.pixel-marble": "像素·云石",
+    "theme.pixel-mithril": "像素·秘银",
     "theme.system": "现代默认"
   },
   en: {
@@ -1820,6 +2015,7 @@ var MESSAGES = {
     "theme.pixel-pumpkin": "Pixel · Pumpkin",
     "theme.pixel-papernote": "Pixel · Papernote",
     "theme.pixel-marble": "Pixel · Marble",
+    "theme.pixel-mithril": "Pixel · Mithril",
     "theme.system": "Modern default"
   }
 };
@@ -1832,6 +2028,7 @@ var THEME_CHOICES = [
   { id: "pixel-pumpkin", swatch: "#FF9E2C" },
   { id: "pixel-papernote", swatch: "#F3DCBC" },
   { id: "pixel-marble", swatch: "#E8EFF2" },
+  { id: "pixel-mithril", swatch: "#B49BFF" },
   { id: "system", swatch: "#7A7A7A" }
 ];
 var fallbackT = (key) => key;