dsh-claude-style 0.3.2 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 ## [Unreleased]
 
+## [0.4.0] - 2026-09-21
+
+### Added
+- **设置页新增「快捷供应商」多选弹层，一级弹层改按供应商分组**：勾选的供应商，其模型会直接列在模型选择器的一级弹层里；不同供应商之间一条横线，供应商名以 11px 小字**领在横线前面**（同一行，线被名字挤短——不是另加一条整行横线，也不是名字压在线上），官方来源不标名字、第一组前面也不画线。名字用 `--dsw-alias-label-caption`，比横线本身的 `--dsw-alias-border-l1` 深一档——那个色当文字读不出来。新碎片 `src/overrides/quick-providers.js` 负责那个多选弹层——它复用权限弹层的卡片与行样式，但因为是设置控件而非接管，所以只点击展开（悬停设置行不该弹出菜单）、勾选后不关闭。卡片挂到 `<body>` 而不是设置行里：对话框会裁剪并可能 transform 自己的子树，`position: fixed` 的卡片在里头会以对话框为参照系。
+- **当前席位那行不再把供应商写在括号里**：供应商改由它自己的一条横线承载（与分组同一套语汇）；当前席位不在已列出的供应商里时，会在列表末尾（分隔线**之上**，分隔线只负责把模型列表与推理等级/更多模型分开）补一条横线加它那一行。二级弹层的高度也从写死的 540px 上限改成只受视口约束，随内容自适应。
+- **设置页新增「重做模型选择器」开关（默认开）**：关掉后不再接管输入框的模型席位与两级弹层，交回宿主自己的模型菜单——只影响弹层，输入区其余改动照旧。它与「对话框样式改动范围」是两个独立开关。
+- **首页对话框的目录选择器与预设弹层改用皮肤自己的弹层样式**：这两个控件由宿主共享的菜单原语渲染，卡片 portal 到 `<body>` 且自身没有任何标记，CSS 无法把它与宿主其它菜单区分开。所以新增 `src/overrides/hero-menu.js`：hero 行的触发器（工作区 chip / 预设 seat，含无会话时由卡片自身当触发器的那种）报告 `aria-expanded="true"` 时，给 `<body>` 里那张卡片打上 `data-dsh-claude-hero-menu`；新增的 `components/hero-menu.css`（composer 门控）据此把它重绘成皮肤的弹层语言——12px 卡片、32px 行、6px 行圆角、hover 面、陶烬橙选中勾。宿主其它菜单（侧栏行菜单、设置页权限行、子菜单）保持原样。
+- **`docs/STYLE.md` 新增「Popovers · 多选一弹层」规范**：把这类弹层的卡片 / 行 / 标题 / 分隔 / 页脚度量列成表，并记下宿主两族类名的哈希方向相反（原语是 `_<local>_<hash>_<n>`，client-ui 包是 `<hash>_<local>`，子串匹配要各取最长稳定片段），以及四处既有弹层尚未对齐的具体位置。
+- **hero 弹层的位置改为从按钮旁边弹出**：宿主把卡片放在触发器**下方**，而那正是输入框所在的位置——弹层会盖住输入区和里面的控件。现在由 `src/overrides/hero-menu.js` 把它挪到触发器**旁边**：底边与触发器对齐、向上生长进 hero 的空白区，视口不够时翻到左侧，两边都按 12px 边距夹紧；定位用 `important` 内联写入盖过宿主自己的那一次写入，并在滚动/缩放时经 scheduler 的视口钩子重算。卡片是宿主挂载而非切 `data-open`，所以规范里的展开过渡在这里落成一次性的 0.15s 动画。
+
+- **首页的目录/预设弹层现在也受「自动弹出弹层」管辖**：这两个是宿主自己的菜单，只会点击打开；现在 `hero-menu.js` 用委托的 `mouseover`/`mouseout` 驱动宿主那个点击处理器——`全部` 档下悬停触发器即展开、移开即收起（跨过触发器与卡片之间那 6px 间隙不会误关），点击打开的菜单则不受悬停影响。悬停只在「对话框重绘」对该页面生效时启用，与样式门控一致。
+- **设置里的「快捷供应商」清单排除官方服务，已下线的供应商也能清掉**：官方服务**始终**列在一级弹层最前面，不在多选清单里——它出现在清单里只会让人以为它能被「取消」，读取时也会把存储里残留的官方 id 归一掉（宿主与浏览器半边各一次）。反过来，一个曾经勾选、后来从目录消失的供应商 id 会带着「已移除」的弱化标记留在清单里——它还是「勾选」状态，取消勾选即从存储清除，否则那种残留 id 会永远隐形地躺在存储里、既看不见也删不掉。
+- **对话框获得焦点时收起对话区的弹层**：`focusin` 一旦落在对话卡片里，权限、模型（两级）、会话统计、账户抽屉、首页 hero 菜单与设置里的快捷供应商弹层全部关闭——一个弹层悬在刚点进来的输入区上方会很碍事，而焦点的语义正好是「用户开始在这里干活」。注册在调度器的 document 级监听器上，随其它监听器一起装卸。
+
+### Changed
+- **一级弹层的滚动区只剩模型列表，分隔线与「推理程度 / 更多模型」钉在滚动区外**：此前整个一级弹层共用一个滚动容器，模型很多时「推理程度」「更多模型」两行会跟着滚出视野——现在弹层拆成上下两段：模型列表在上段滚动，分隔线、推理程度、更多模型在下段**不进滚动区**，始终停在卡片底部。一级弹层的高度也改成随内容自适应（只受视口约束，与二级弹层同一上限），短列表不再撑出一张空高卡片。
+- **「自动弹出弹层」从开关改成三档（关闭 / 仅账号区 / 全部，默认全部）**：原来只有开与关，也没说清范围；现在三档把它写明——「仅账号区」只让侧栏账户弹层悬停展开，「全部」再加上权限、模型、会话统计与首页的目录/预设。旧的布尔值在读取时归一到新档位（`true` → 全部，`false` → 关闭），浏览器半边与宿主半边各做一次归一，宿主写路径的白名单也接受新的字符串值。
+- **四处弹层的度量统一到规范**：账户抽屉与会话统计此前是 8px 行圆角、2px / 4px 卡片间距、8px 内边距、260px 最小宽度、z-index 1000 / 100000，权限弹层是 220px 最小宽度——现在全部对齐「Popovers · 多选一弹层」：6px 内边距、6px 间距、`min-height: 32px` 的行、`2px 7px` 行内边距、6px 行圆角、248px 最小宽度、z-index 99999。顺带修掉权限弹层把行高写死成 `height: 32px` 而内容本就是两行的隐患（改 `min-height`），并给会话统计补上缺失的 `transform-origin`。
+- **清掉一批开发期痕迹，行为无变化**：删除从未被调用的 `applyBrand`（它连同注释一直被打进 bundle）、`modelBrand` 一个未使用的参数、`model-brand.js` 开头讲文件来历的注释，以及架构文档里指向某次提交与某个已删除计划文档的引用；`docs/STYLE.md` 中与 `AGENTS.md` 重复的模型文案规则与选择器纪律改为指向后者，并修掉那里一处断了主语的句子、README 里过期的锁定标数量与 Star History 图。
+
+### Fixed
+- **开发时热重载会让账号区和模型席位重复渲染**：客户端的 HMR 在刷新时丢掉旧 fiber 的清理（不执行 dispose），于是前一代渲染的账户按钮/模型席位和它们的弹层还留在 DOM 里，新一代从零开始又插了一份——账户区因此出现过两次（且旧的那份带着过期的用户名）。权限弹层没这个问题，因为它是 DOM 幂等的：每次先清掉同名节点再造。修复方式是把账户区与模型席位也改成 DOM 幂等：更新前先清扫上一代的同名节点（`body > .dsh-claude-model-popover` 与 `.dsh-claude-account-*` 各自的清扫在各自的 update 里），旧闭包泄漏的监听器/观察器/定时器无法从插件侧释放，只在开发模式下有成本，属可接受的余量。
+
 ## [0.3.2] - 2026-09-21
 
 ### Added

package/README.en.md

@@ -3,8 +3,6 @@
 
 **A Claude Code Desktop theme for the DeepSeek Harness (DSH) web client — the warm ivory editorial canvas, the clay ember accent, and the Claude Code interaction model rebuilt on DSH.**
 
-> **Coffee and Claude time?**
-
 [![English](https://img.shields.io/badge/lang-English-blue.svg)](README.en.md) [![简体中文](https://img.shields.io/badge/lang-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-red.svg)](README.md)
 
 [![GitHub stars](https://img.shields.io/github/stars/Nwflower/dsh-claude-style?style=flat&label=%E2%98%85&color=08C)](https://github.com/Nwflower/dsh-claude-style)
@@ -57,9 +55,9 @@ Only one theme should be active at a time. After installing, **restart `dsh web`
 
 1. **Theme** — applies the whole canvas automatically after install; no configuration needed. Light and dark follow the system color scheme.
 2. **Permission segments** — the composer gets a Read | Edit | Auto segmented control replacing the shipped access-mode menu: read-only, workspace write, and full access (Auto is switched through the shipped risk-confirmation dialog).
-3. **Model picker** — the composer's model seat becomes a two-level Claude-style menu: the first level lists DeepSeek's official models, a divider, the reasoning-effort row and "More models", and the second opens beside it. Model descriptions appear on the first level only (including the row for the current selection, which reads `model (provider)` in display names); the "More models" level is every provider's full catalog and lists names alone. Every model row carries its **vendor's lockup** — the mark and the vendor's wordmark composed into one piece of art, drawn in place of the vendor's name inside the label (`[DeepSeek whale + wordmark] V4.1-Flash`); a name that never spells the vendor (Kimi's own catalog calls the model `K3`) leads with the lockup instead. The "More models" group headers carry the provider's name alone, no mark. The artwork is [Lobe Icons](https://lobehub.com/icons) (MIT), composed before the build into one `<svg>` per vendor (43 of them, no React dependency). The mark's size and the gap after it are **global constants**, not Lobe's per-icon `TEXT_MULTIPLE`/`SPACE_MULTIPLE` — those ratios are relative to each wordmark's own box, which made every vendor's mark a different size and every gap a different width; the brand colours and variant list come from `es/toc.js`. The colour artwork draws on the ivory canvas, with any fill that cannot be read there swapped to `currentColor` (Kimi's white K would vanish, its blue dot stays); the warm black canvas gets the mono layer in the theme's text colour. A few vendors override the lockup in `brands.lockups`: the two halves may come from different icons (Hunyuan's mark with Tencent's wordmark), the word it stands in for may be spelled differently (`Step` for `step-*`, also `MiMo` and `GLM`), and a wordmark may be cropped (GLM-V drops its `-V`, ChatGPT keeps only `GPT`); hand-provided artwork lives in `src/assets/icons/`, beside the generated `combine/` directory. A wordmark has to match the word it stands in for: Claude rows draw Claude's and Grok rows draw Grok's, not their parent companies' — and Claude's remaining text is set in Anthropic Serif, because that lockup is serif lettering. Hidden text keeps the full vendor name in the accessibility tree, so a screen reader still hears "Kimi K3" rather than "K3".
+3. **Model picker** (can be switched off in Settings to hand the menu back to the host) — the composer's model seat becomes a two-level Claude-style menu: the first level **always leads with the official service**, followed by the models of the **quick providers** picked in Settings — one rule between providers, the provider's name leading it in small text on the same row so the rule is shortened by it (the official source is not named and is never listed in Settings; a provider removed from the catalog stays in the list marked "Removed" and can be unchecked to clear it) — then a divider, the reasoning-effort row and "More models"; both levels are sized by their content and capped by the viewport, the first level scrolls its model list only while the divider and the two drill rows stay pinned below the scroll area, and the second opens beside it. Model descriptions appear on the first level only; a current seat that none of the listed providers carries gets a row of its own at the end of the list, above the divider, under a provider rule of its own; the "More models" level is every provider's full catalog and lists names alone. Every model row carries its **vendor's lockup** — the mark and the vendor's wordmark composed into one piece of art, drawn in place of the vendor's name inside the label (`[DeepSeek whale + wordmark] V4.1-Flash`); a name that never spells the vendor (Kimi's own catalog calls the model `K3`) leads with the lockup instead. The "More models" group headers carry the provider's name alone, no mark. The artwork is [Lobe Icons](https://lobehub.com/icons) (MIT), composed before the build into one `<svg>` per vendor (no React dependency). The mark's size and the gap after it are **global constants**, not Lobe's per-icon `TEXT_MULTIPLE`/`SPACE_MULTIPLE` — those ratios are relative to each wordmark's own box, which made every vendor's mark a different size and every gap a different width; the brand colours and variant list come from `es/toc.js`. The colour artwork draws on the ivory canvas, with any fill that cannot be read there swapped to `currentColor` (Kimi's white K would vanish, its blue dot stays); the warm black canvas gets the mono layer in the theme's text colour. A few vendors override the lockup in `brands.lockups`: the two halves may come from different icons (Hunyuan's mark with Tencent's wordmark), the word it stands in for may be spelled differently (`Step` for `step-*`, also `MiMo` and `GLM`), and a wordmark may be cropped (GLM-V drops its `-V`, ChatGPT keeps only `GPT`); hand-provided artwork lives in `src/assets/icons/`, beside the generated `combine/` directory. A wordmark has to match the word it stands in for: Claude rows draw Claude's and Grok rows draw Grok's, not their parent companies' — and Claude's remaining text is set in Anthropic Serif, because that lockup is serif lettering. Hidden text keeps the full vendor name in the accessibility tree, so a screen reader still hears "Kimi K3" rather than "K3".
 4. **Brand switch** — Settings (`Ctrl+,`) → **Claude Style**: the sidebar brand flips between the Claude starburst + the official Claude wordmark and Anthropic (`A\` + ANTHROPIC wordmark); the hero mark follows the choice with the clay fill. The choice persists in the browser; `claude` is the default.
-5. **Account drawer** — the sidebar footer button opens a hover popover with quick access to Settings (`Ctrl+,`) and plugin management; the username row at its top is an easter egg: it opens Claude's own "Your account is on hold" page (a purely local reproduction that touches no real state — click any control on it, or press `Esc`, to leave; it deliberately stays put when the window loses focus, so you can switch away and read it). That page's language is its own setting (**Account-hold easter egg language**, Chinese/English, English by default).
+5. **Account drawer** — the sidebar footer button opens a hover popover (the **Open popovers on hover** setting picks Off / Account only / All) with quick access to Settings (`Ctrl+,`) and plugin management; the username row at its top is an easter egg: it opens Claude's own "Your account is on hold" page (a purely local reproduction that touches no real state — click any control on it, or press `Esc`, to leave; it deliberately stays put when the window loses focus, so you can switch away and read it). That page's language is its own setting (**Account-hold easter egg language**, Chinese/English, English by default).
 6. **Status polish** — thinking turns pick one of Claude Code's 185 spinner verbs per turn; the workspace loading state uses a Fluent-style circular indicator.
 
 ## Disable & Uninstall
@@ -86,12 +84,7 @@ Then restart `dsh web`; remove hand-added rows for this theme from `cordis.patch
 | [Design Tokens](docs/STYLE.md) | Palette, typography, shapes, plus the bundle source layout and host-selector discipline |
 | [Changelog](CHANGELOG.md) | Version history |
 | [Contributing](CONTRIBUTING.md) | How to build from `src/`, commit rules, and the screenshot/regression tooling |
-| [AGENTS.md](AGENTS.md) | Development guide for AI assistants: build commands, fragment rules, host-selector discipline, and the release flow (Chinese) |
 
 ## Related Links
 
 > Running several themes side by side? Recommended: [dsh-skin-manager](https://github.com/xiaoyangcheng84-svg/dsh-skin-manager) — switch all installed themes from its Settings page.
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=Nwflower/dsh-claude-style&type=Date)](https://www.star-history.com/?type=date&repos=Nwflower%2Fdsh-claude-style)

package/README.md

@@ -4,8 +4,6 @@
 
 <div align="center">
 
-> **Coffee and Claude time?**
-
 [![English](https://img.shields.io/badge/lang-English-blue.svg)](README.en.md) [![简体中文](https://img.shields.io/badge/lang-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-red.svg)](README.md)
 
 [![GitHub stars](https://img.shields.io/github/stars/Nwflower/dsh-claude-style?style=flat&label=%E2%98%85&color=08C)](https://github.com/Nwflower/dsh-claude-style)
@@ -58,9 +56,9 @@ dsh plugin --profile web add Nwflower/dsh-claude-style         # GitHub 源
 
 1. **主题** —— 安装即全局生效，无需配置；亮暗跟随系统颜色模式。
 2. **权限分段** —— 输入框以 Read | Edit | Auto 三段式控制器替换原生的访问模式菜单：只读、工作区写入与完全权限（Auto 经宿主的安全确认弹窗切换）。
-3. **模型选择器** —— 输入框的模型席位换成 Claude 风格的两级弹层：一级列出 DeepSeek 官方模型、分隔线、推理等级与「更多模型」，二级在右侧展开。模型描述只出现在第一级（含当前选中的那一行，格式为「模型 (供应商)」的外显名）；二级「更多模型」是各 provider 的完整目录，只列名称。每个模型行显示**所属厂商的锁定标**——图标与厂商字标合成的一件图形，直接替换名称里的厂商名（`[DeepSeek 鲸鱼+字标] V4.1-Flash`）；名称里没有厂商词的（Kimi 官方目录只叫 `K3`）则锁定标领在开头。「更多模型」的分组标题只显示 provider 名称，不带图标。图形取自 [Lobe Icons](https://lobehub.com/icons)（MIT），在构建前的 vendoring 阶段合成为 43 个厂商各一个 `<svg>`，不含 React 依赖。图标高度与间距是**全局常数**——不逐家采用 Lobe 的 `TEXT_MULTIPLE`/`SPACE_MULTIPLE`，那套比例是相对各家字标盒子的，会让图标大小与间距逐家漂移；品牌色与变体清单取自 `es/toc.js`。亮色画布用彩色原图，其中在象牙白上读不出来的填充换成 `currentColor`（Kimi 的白 K 会消失、而它的蓝点保留）；暖黑画布换成单色、跟随主题文字色。少数厂商在 `brands.lockups` 里覆写：图标与字标可来自不同图标（混元的标 + Tencent 的字标）、匹配词可指定（`step-*` 用 `Step`，另有 `MiMo`、`GLM`）、字标可裁掉多余部分（GLM-V 截掉 `-V`、ChatGPT 只留 `GPT`）；手工提供的资产放 `src/assets/icons/`（与生成的 `combine/` 同级）。字标要和它替换的词对得上：Claude 行画 Claude 的、Grok 行画 Grok 的，而不是各自母公司的；Claude 行的其余文字用 Anthropic Serif 排（那枚锁定标本身就是衬线体）。名称里另有视觉隐藏的厂商名，屏读听到的仍是「Kimi K3」而不是「K3」。
+3. **模型选择器**（可在设置里关闭，交回系统自己的模型菜单）—— 输入框的模型席位换成 Claude 风格的两级弹层：一级**始终以官方服务打头**，后面跟着设置里勾选的**快捷供应商**的模型——不同供应商之间一条横线，供应商名以小字领在横线前面（同一行、把线挤短；官方来源不标名，也不在设置清单里；从目录消失的供应商带「已移除」标记留在清单里，取消勾选即可清除）——再加分隔线、推理等级与「更多模型」；两级弹层高度都随内容自适应（只受视口约束），一级只滚动模型列表，分隔线与两个操作行**钉在滚动区外**始终可见，二级在右侧展开。模型描述只出现在第一级；当前席位不在上面列出的供应商里时，会在列表末尾（分隔线之上）补一行，同样带一条供应商横线；二级「更多模型」是各 provider 的完整目录，只列名称。每个模型行显示**所属厂商的锁定标**——图标与厂商字标合成的一件图形，直接替换名称里的厂商名（`[DeepSeek 鲸鱼+字标] V4.1-Flash`）；名称里没有厂商词的（Kimi 官方目录只叫 `K3`）则锁定标领在开头。「更多模型」的分组标题只显示 provider 名称，不带图标。图形取自 [Lobe Icons](https://lobehub.com/icons)（MIT），在构建前的 vendoring 阶段按厂商各合成一个 `<svg>`，不含 React 依赖。图标高度与间距是**全局常数**——不逐家采用 Lobe 的 `TEXT_MULTIPLE`/`SPACE_MULTIPLE`，那套比例是相对各家字标盒子的，会让图标大小与间距逐家漂移；品牌色与变体清单取自 `es/toc.js`。亮色画布用彩色原图，其中在象牙白上读不出来的填充换成 `currentColor`（Kimi 的白 K 会消失、而它的蓝点保留）；暖黑画布换成单色、跟随主题文字色。少数厂商在 `brands.lockups` 里覆写：图标与字标可来自不同图标（混元的标 + Tencent 的字标）、匹配词可指定（`step-*` 用 `Step`，另有 `MiMo`、`GLM`）、字标可裁掉多余部分（GLM-V 截掉 `-V`、ChatGPT 只留 `GPT`）；手工提供的资产放 `src/assets/icons/`（与生成的 `combine/` 同级）。字标要和它替换的词对得上：Claude 行画 Claude 的、Grok 行画 Grok 的，而不是各自母公司的；Claude 行的其余文字用 Anthropic Serif 排（那枚锁定标本身就是衬线体）。名称里另有视觉隐藏的厂商名，屏读听到的仍是「Kimi K3」而不是「K3」。
 4. **品牌切换** —— 设置（`Ctrl+,`）→ **Claude Style**：侧栏品牌在 Claude（官方星芒 + Claude 字标）与 Anthropic（`A\` + ANTHROPIC 字标）之间切换，新会话页标识随所选品牌保持陶烬橙星芒；选择保存在浏览器本地，默认 Claude。
-5. **账户抽屉** —— 侧栏底栏的账户按钮悬停展开弹层，一键打开设置（`Ctrl+,`）与管理插件；弹层顶部那条用户名横条是个彩蛋：点开会看到 Claude 官方的「账户已暂停」页（纯本地复刻，不碰任何真实状态，点页面上任意按钮或按 `Esc` 退出；切走窗口**不会**关，方便你切出去照着它看）。这页的语言在设置里单独选（**封号彩蛋语言**，中文/英文，默认英文）。
+5. **账户抽屉** —— 侧栏底栏的账户按钮悬停展开弹层（设置里「自动弹出弹层」可选关闭 / 仅账号区 / 全部），一键打开设置（`Ctrl+,`）与管理插件；弹层顶部那条用户名横条是个彩蛋：点开会看到 Claude 官方的「账户已暂停」页（纯本地复刻，不碰任何真实状态，点页面上任意按钮或按 `Esc` 退出；切走窗口**不会**关，方便你切出去照着它看）。这页的语言在设置里单独选（**封号彩蛋语言**，中文/英文，默认英文）。
 6. **状态细节** —— 思考状态每轮从 Claude Code 的 185 个思考动词随机抽取一个稳定展示；工作区运行中状态使用 Fluent 风格的圆形加载动画。
 
 ## 停用与卸载
@@ -87,18 +85,7 @@ dsh plugin --profile web remove dsh-claude-style   # 卸载
 | [设计令牌](docs/STYLE.md) | 调色板、字体、形状，源码结构与宿主选择器纪律（英文） |
 | [更新日志](CHANGELOG.md) | 版本历史 |
 | [贡献指南](CONTRIBUTING.md) | 如何从 `src/` 构建、提交规范与截图/回归工具（英文） |
-| [AGENTS.md](AGENTS.md) | AI 助手的开发指南：构建命令、碎片规则、宿主选择器纪律与发布流程 |
 
 ## 友链
 
 > 同时启用多个主题？推荐 [dsh-skin-manager](https://github.com/xiaoyangcheng84-svg/dsh-skin-manager)，在其设置页一键切换所有已安装主题。
-
-## Star History
-
-<a href="https://www.star-history.com/?type=date&repos=Nwflower%2Fdsh-claude-style">
- <picture>
-   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=Nwflower/dsh-claude-style&type=date&theme=dark&legend=top-left" />
-   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=Nwflower/dsh-claude-style&type=date&legend=top-left" />
-   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=Nwflower/dsh-claude-style&type=date&legend=top-left" />
- </picture>
-</a>

package/docs/STYLE.md

@@ -94,6 +94,74 @@ empty wash above and below the text. The skin sets `line-height: 1.2` on inline
 code (27px → 22px, with the 1px padding as the visible inset); lower values
 start clipping descenders. The fill, hairline, radius and size are unchanged.
 
+## Popovers · 多选一弹层
+
+Every single-choice popover in the skin — the permission menu, the model picker,
+the account drawer, the session-stats card, and the host's own menu primitive
+under the hero row's workspace and preset pickers — is meant to start from one
+recipe. New popovers take it rather than inventing a card.
+
+**Card**
+
+| Property | Value |
+|---|---|
+| background | `var(--dsw-alias-bg-overlay)`; dark `#1e1e1d` |
+| border | `1px solid var(--dsw-alias-border-l1)`; dark `#2e2c29` |
+| radius | 12px |
+| shadow | `0 8px 30px rgba(20,20,19,.12), 0 2px 8px rgba(20,20,19,.06)`; dark `rgba(0,0,0,.5)` / `rgba(0,0,0,.3)` |
+| padding | 6px |
+| layout | flex column, `gap: 6px` |
+| z-index | 99999, above the host's own menus (1100) |
+| open | `opacity 0 → 1`, `translateY(4px) scale(.98) → none`, `.15s ease`, origin on the anchor's side |
+
+**Row**
+
+| Property | Value |
+|---|---|
+| min-height | 32px — a floor, not a cap: a two-line row grows |
+| padding | `2px 7px` |
+| radius | 6px |
+| text | 13px / 20px, `var(--dsw-alias-label-primary)` |
+| hover | `var(--dsh-claude-hover-bg, rgba(0, 0, 0, .08))` |
+| icon | 16px, `var(--dsw-alias-label-secondary)` |
+| two-line row | name 13px / 16px at 500; description 11px / 14px in `label-tertiary` |
+| current row | trailing `IconCheckOutline16` in `var(--dsw-alias-brand-primary)` — the accent is what marks the choice |
+| disabled | `opacity: .4`, `cursor: not-allowed` |
+
+**Heading, separator, footer**
+
+- heading row: 11px / 16px at 600, `letter-spacing: .04em`, uppercase, `label-tertiary`, `padding: 6px 7px 2px`
+- separator: 1px `var(--dsw-alias-border-l1)`, `margin: 2px 4px`
+- pinned footer: `margin-top` / `padding-top` 4px, `1px solid var(--dsw-alias-border-l1)` above
+
+**Host surfaces**
+
+The host's dropdown menus are one shared primitive (primitives' `Menu`), and its
+two class-name families hash in opposite directions: the primitive ships inside
+the web shell as `_<local>_<hash>_<n>` (`_itemWrap_1nxmc_92`,
+`_itemLabel_1nxmc_174`), while the client-ui packages hash as `<hash>_<local>`
+(`daogkW_itemName`, `p_FcLG_cardWorkspaceTrigger`). A substring matcher therefore
+takes the longest stable piece of whichever family it targets — `_itemWrap_`,
+`_itemLabel_`, `_viewport_` on one side, `_itemName`, `_itemDesc` on the other —
+never the bare local name.
+
+The hero row's two pickers are that primitive, portaled to `<body>` with no
+marker of their own. `src/overrides/hero-menu.js` stamps the open card with
+`data-dsh-claude-hero-menu` and `components/hero-menu.css` restyles it; the
+host's other menus (sidebar row menus, the settings permission row, submenus)
+keep the host's own design on purpose. What that replaces: a 20px radius card
+with 4px padding, 40px rows at 10px radius, and 14px text.
+
+**All five are aligned**: the account drawer and the stats card were the outliers
+(8px row radius, 2px and 4px card gap, 8px padding, 220 / 260px min-width,
+z-index 1000 and 100000) and now follow the table above. The hero row's pickers are the host's own menu primitive, which differs in
+two ways that CSS cannot change: it mounts instead of toggling a `data-open`
+attribute, so it takes the same fade/scale as a one-shot `0.15s` animation; and
+the host places it *below* its trigger, which is where the composer sits — so
+`src/overrides/hero-menu.js` re-places it beside the trigger (bottom-aligned,
+growing upward into the empty hero space, flipping left when the viewport is
+tight) with an `important` inline write that outranks the host's own.
+
 ## Implementation notes
 
 - Every rule is scoped under `body[data-dsh-claude-style]`.
@@ -122,6 +190,7 @@ assembles the bundle:
 | `src/styles/components/account-footer.css` | account row and floating popover |
 | `src/styles/components/ban-screen.css` | the account-hold easter egg (full-window overlay) |
 | `src/styles/components/model-picker.css` | model picker popovers |
+| `src/styles/components/hero-menu.css` | the host's menu primitive under the hero row's workspace/preset pickers (composer-gated) |
 | `src/styles/components/footer-takeover.css` | host footer takeover rules |
 | `src/styles/components/third-party.css` | agy-link repair rules |
 | `src/styles/components/settings.css` | settings page section |
@@ -133,6 +202,7 @@ assembles the bundle:
 | `src/overrides/copy.js` | composer/copy rewrites installer |
 | `src/overrides/permissions.js` | permission segments/popover installer |
 | `src/overrides/model-picker.js` | model picker installer |
+| `src/overrides/hero-menu.js` | stamps the host menu card the hero row's pickers open |
 | `src/overrides/account-footer.js` | account footer/popover installer |
 | `src/overrides/ban-screen.js` | account-hold easter egg installer |
 | `src/overrides/scheduler.js` | scheduler, observers, subscriptions, teardown |
@@ -141,38 +211,17 @@ assembles the bundle:
 | `src/entry.js` | `apply()` orchestrator + exports |
 | `src/model-descriptions.json` | model copy (picker labels + per-model descriptions); validated at build time and **copied** to `lib/`, not inlined |
 
-Fragments share one factory scope at runtime: keep the 4-space base
-indentation and do not use `import`/`export` inside fragments. The build
-script rejects unsubstituted `%%TOKENS%%` and refuses to emit a bundle that
-fails to parse.
-
-`src/model-descriptions.json` is the one thing that does **not** go into the
-bundle. Model copy is data: the build validates it and copies it to
-`lib/model-descriptions.json`, and the host half (`lib/index.js`) serves it at
-`/dsh-claude-style/model-descriptions.json` for the browser half to fetch on
-first use. So the table grows without a rebuild, and no model text ships inside
-`lib/client.js`. Every entry is a `{ locale: text }` pair — the picker renders
-one line in the language the shell's own `locale` service reports, falling back
-to the document's `fallback` locale. Lookup descends exact → family → tier →
-the catalog's own text; family rules are ordered and must stay anchored (the
-`flash` rule is scoped to `deepseek`, or another vendor's flash tier inherits
-DeepSeek's copy).
-
-The same document carries the picker's **brand marks** under `brands`:
-`brands.providers` is deliberately empty — a model no rule claims draws **no**
-lockup rather than its provider's, because a reseller's own lockup on a model it did
-not make reads as a wrong answer rather than a missing one. `brands.models` is an
-ordered, anchored rule list matching a model id (the row's vendor — the vendor that
-made the model, not the aggregator reselling it). Both name ids with a vendored lockup in
-`src/assets/icons/combine/` or a provider icon key, and the build fails on an id
-that is not there, so the binding cannot drift. A lockup carries the vendor's mark
-and its wordmark as one piece of art: the colour mark on the ivory canvas, the
-mono one in `currentColor` on the warm black canvas (where a brand colour like
-`#000` would vanish), so the label stays legible on both.
-palette to its single clay accent. Full-colour variants are deliberately not
-used — a third of the vendors ship no colour version (OpenAI, Anthropic, xAI,
-Moonshot, Z.ai, Vercel, Groq), and several brand colours are near-black on the
-`#141413` canvas.
+Fragments share one factory scope at runtime — no `import`/`export`, 4-space
+base indent; the build rejects unsubstituted `%%TOKENS%%` and refuses to emit a
+bundle that fails to parse. The hard rules for fragments, model copy and host
+selectors live in `AGENTS.md` (the selector section below is the detail page it
+points to); the reasoning behind them is in `docs/architecture.md` (D1, D3, D5).
+
+Model copy is the one thing that does **not** go into the bundle: the build
+copies `src/model-descriptions.json` to `lib/` and the host half serves it, so
+the table grows without a rebuild. The picker's brand bindings ride the same
+document under `brands`; the note inside the file explains why a model no rule
+claims draws no lockup at all.
 
 ### Host selector discipline · 宿主选择器纪律
 

package/docs/architecture.md

@@ -52,23 +52,22 @@
 - **代价**：每个 sync 必须有廉价的 early-out；新增 override 要接入同一调度器而不是自立门户。
 - **已知代价与对策**：流式输出期间每帧一次全量 pass 是性能热点，见 D9。
 
-## D7. UI 行为优化内置在本插件，不拆独立插件（2026-09 定）
+## D7. UI 行为优化内置在本插件，不拆独立插件
 
 - **背景**：模型选择器、权限分段、账户抽屉等「UI 优化」与皮肤共享同一套宿主锚点（选择器纪律）、同一调度器（D6）、同一 popover 工具与 teardown。
 - **决定**：行为层（`src/overrides/`）与皮肤层（`src/styles/`、tokens、品牌资产）在源码内保持分离，但发布为同一个包。不想要 Claude 皮肤的用户用设置里的品牌切换回到接近宿主的观感。
 - **代价**：包名与主题绑定，「只用 UI 优化不要皮」的诉求没有独立入口。
 - **重审条件**：出现第二个真实消费者（另一个主题包或宿主官方）需要复用 overrides 层时，把 overrides 抽成独立包，皮肤包依赖它。
 
-## D8. 多主题走「单仓库构建期分包」，不多合一、不抽运行时公共包（2026-09 定）
+## D8. 多主题走「单仓库构建期分包」
 
-- **背景**：做 Codex / Kimi Code 等第二个主题时，多合一会让包名（claude）名不副实；分仓库会让共享机制（build.mjs、scheduler、popover-utils、选择器纪律）多处漂移；抽 npm 运行时公共包则违反 D1（加载器没有相对 require）。
-- **决定**：第二个主题立项时，把本仓库改为单仓库多主题：共享碎片留仓库级 `src/`，主题私有碎片（tokens、品牌资产、copy、主题特有 overrides）收进 `themes/<name>/`，`build.mjs` 参数化 `--theme`，每个主题产出自包含单文件、各自发 npm 包。`dsh-claude-style` 包名不动。
-- **触发条件（重要）**：仅当新主题有**行为分叉**（不同的 DOM override、不同的 composer 结构）才动手。若只是换色板与 logo，先用现有品牌切换机制（settings.js）在包内消化，不提前改造。
+- **背景与决定**：做第二个主题时，多合一会让包名（claude）名不副实，分仓库会让共享机制（build.mjs、scheduler、popover-utils、选择器纪律）多处漂移，抽 npm 运行时公共包则违反 D1。所以届时把本仓库改为单仓库多主题：共享碎片留仓库级 `src/`，主题私有碎片（tokens、品牌资产、copy、主题特有 overrides）收进 `themes/<name>/`，`build.mjs` 参数化 `--theme`，每个主题产出自包含单文件、各自发 npm 包；`dsh-claude-style` 包名不动。具体改造步骤到立项时再写。
+- **触发条件**：仅当新主题有**行为分叉**（不同的 DOM override、不同的 composer 结构）才动手。若只是换色板与 logo，先用现有品牌切换机制（settings.js）在包内消化，不提前改造。
 - **代价**：改造时 build.mjs 与目录布局有一次性手术；两个主题之后共享碎片的改动需要双主题回归。
 
-## D9. composer 的 :has() 分支改 JS 写属性（2026-09 定，性能方向）
+## D9. composer 的 :has() 分支改 JS 写属性
 
 - **背景**：皮肤在流式输出期间的渲染压力主要来自两处：D6 的每帧全量 pass，以及 CSS 中约 70 处对 DOM 结构敏感的 `:has()`（绝大多数是 `[class*="composerStack"]` 上的 hero/inline 分支）——每次 DOM 变更都触发昂贵的选择器重算。
 - **决定**：把「结构感知」从 CSS 移到 JS：`permissions.js` 的 `syncSegments()` 在 scheduler 每轮 pass 里为 composerStack 祖先写 `data-composer-variant="hero|inline"` 属性（observer 的 attributeFilter 不含 data-*，不会反触发；写前比较旧值防抖动；同轮去重避免多卡命中同一 stack 反复写），CSS 改为读属性。交互敏感的 `:has()`（`:hover`、`:focus-within`）与低频的 dialog `:has()` 保留。
-- **落地**：已执行完毕（代码见 `d0fb6f7`），一次性计划文档 `docs/plans/2026-09-composer-mode-attr.md` 按惯例删除，决策与重审条件保留在本条目。仍未消除的结构感知 `:has()` 只剩 placeholder 那条（`card` 上的 `:not(:has([data-composer-placeholder]))`）：`copy.js` 本就管理 placeholder，可在它的 sync 里同步写 `data-has-placeholder` 再改 CSS，属可选的后续优化，不在本次范围。
+- **落地**：已执行完毕。仍未消除的结构感知 `:has()` 只剩 placeholder 那条（`card` 上的 `:not(:has([data-composer-placeholder]))`）：`copy.js` 本就管理 placeholder，可在它的 sync 里同步写 `data-has-placeholder` 再改 CSS，属可选的后续优化。
 - **重审条件**：实测证明 :has() 不再是热点，或宿主提供 hero/inline 的稳定属性契约。