dsh-width-tiers 1.0.9 → 2.0.1

package/README.md

@@ -2,11 +2,16 @@
 
 <p align="center">Chat content-width tiers for the DeepSeek Harness Web GUI.</p>
 
+<p align="center">
+  <a href="README.md">English</a> | <a href="README.zh.md">中文</a>
+</p>
+
 <p align="center">
   <a href="https://www.npmjs.com/package/dsh-width-tiers"><img alt="npm" src="https://img.shields.io/npm/v/dsh-width-tiers?style=flat-square"></a>
   <a href="https://github.com/aaronlei/dsh-width-tiers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/aaronlei/dsh-width-tiers?style=flat-square"></a>
   <a href="LICENSE"><img alt="MIT" src="https://img.shields.io/badge/license-MIT-yellow?style=flat-square"></a>
-  <a href="#compatibility"><img alt="DSH 0.1.7+" src="https://img.shields.io/badge/DSH-0.1.7%2B-blue?style=flat-square"></a>
+  <a href="https://www.npmjs.com/package/dsh-width-tiers"><img alt="Node version" src="https://img.shields.io/node/v/dsh-width-tiers?style=flat-square"></a>
+  <a href="#compatibility"><img alt="DSH 0.2.x" src="https://img.shields.io/badge/DSH-0.2.x-blue?style=flat-square"></a>
 </p>
 
 ## Tiers
@@ -30,7 +35,7 @@ Fixed and custom widths are clamped by the app to
 - Uses the app's native width axis (`--dsh-chat-user-width` and
   `dsh.conversation.contentWidth`), so the built-in drag handles keep working.
 - Persists the selected tier and restores it on the next visit.
-- Follows **Settings → Language** (中文 / English).
+- Follows **Settings → Language** (中文 / English / 日本語 / Español / Français / Deutsch / Русский / Português).
 - Menu supports ArrowUp/Down, Home/End, Escape and Tab, with focus restoration.
 - Tier changes sync across tabs.
 - Respects `prefers-reduced-motion`.
@@ -64,6 +69,11 @@ dsh plugin --profile web add link:/path/to/dsh-width-tiers
 
 ## How it works
 
+- Mounts the picker into the frame-wide `shell.overlay` slot; the plugin fiber
+  owns the controller lifetime, so no listeners or timers outlive it.
+- The controller publishes an immutable snapshot (tier, menu, guide); the React
+  picker renders it and dispatches actions, so the view can remount without
+  rebuilding observers.
 - Locates the conversation body that declares `--dsh-chat-content-width`
   (prefers `[data-conversation-content]`, skips the right sidebar's embedded
   conversation), then writes `--dsh-chat-user-width` on its parent.
@@ -75,19 +85,26 @@ dsh plugin --profile web add link:/path/to/dsh-width-tiers
 
 ## Compatibility
 
-- DSH Web 0.1.7+ with a `web` profile.
+- DSH Web 0.2.x with a `web` profile (`shell.overlay` slot and `slots` service).
 - Width axis checked against DSH 0.2.1-rc.2: 640px floor, 176px handle budget,
   `--dsh-chat-*` variables, `data-width-handle`, layout/locale services.
 
 ## Development
 
 ```bash
-npm test
+pnpm install
+pnpm build        # src/ -> lib/ (host entry + loader-wrapped client bundle)
+pnpm typecheck
+pnpm test         # vitest: controller (jsdom) + picker component suites
+pnpm verify:client
 ```
 
-The test loads the shipped `lib/client.js` bundle through a DOM stub; no live
-DSH instance is required. The package ships prebuilt `lib/` and does not
-include a `src/` tree.
+The sources live in `src/` (`src/index.ts` is the no-op host entry, the
+feature lives in `src/client/`); `lib/` is the built, published payload. The
+vitest suites import the sources directly: the controller runs under jsdom and
+the picker is rendered with Testing Library, so no live DSH instance is
+required. `verify:client` checks the built bundle contract. Development needs
+Node 22+ and pnpm.
 
 ## Notes
 

package/README.zh.md

@@ -2,11 +2,16 @@
 
 <p align="center">DeepSeek Harness Web GUI 的对话区内容宽度档位插件。</p>
 
+<p align="center">
+  <a href="README.md">English</a> | <a href="README.zh.md">中文</a>
+</p>
+
 <p align="center">
   <a href="https://www.npmjs.com/package/dsh-width-tiers"><img alt="npm" src="https://img.shields.io/npm/v/dsh-width-tiers?style=flat-square"></a>
   <a href="https://github.com/aaronlei/dsh-width-tiers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/aaronlei/dsh-width-tiers?style=flat-square"></a>
   <a href="LICENSE"><img alt="MIT" src="https://img.shields.io/badge/license-MIT-yellow?style=flat-square"></a>
-  <a href="#兼容性"><img alt="DSH 0.1.7+" src="https://img.shields.io/badge/DSH-0.1.7%2B-blue?style=flat-square"></a>
+  <a href="https://www.npmjs.com/package/dsh-width-tiers"><img alt="Node version" src="https://img.shields.io/node/v/dsh-width-tiers?style=flat-square"></a>
+  <a href="#兼容性"><img alt="DSH 0.2.x" src="https://img.shields.io/badge/DSH-0.2.x-blue?style=flat-square"></a>
 </p>
 
 ## 档位
@@ -28,7 +33,7 @@
 - 走应用原生宽度通道（`--dsh-chat-user-width` 与
   `dsh.conversation.contentWidth`），自带拖拽手柄始终可用。
 - 记住当前档位，下次打开自动恢复。
-- 跟随 **设置 → 语言**（中文 / English）。
+- 跟随 **设置 → 语言**（中文 / English / 日本語 / Español / Français / Deutsch / Русский / Português）。
 - 菜单支持方向键、Home/End、Esc、Tab，并恢复焦点。
 - 档位选择跨标签页同步。
 - 支持 `prefers-reduced-motion`。
@@ -58,6 +63,10 @@ dsh plugin --profile web add link:/path/to/dsh-width-tiers
 
 ## 原理
 
+- 挂载到 frame 级 `shell.overlay` 插槽，由插件 fiber 持有 controller 生命周期；
+  插件卸载后不残留监听器或定时器。
+- controller 发布不可变快照（档位、菜单、引导），React picker 只负责渲染并
+  派发动作；视图重挂载不需要重建观察者。
 - 定位声明 `--dsh-chat-content-width` 的对话 body（优先
   `[data-conversation-content]`，跳过右侧栏的 embedded 对话），在它的
   父级写入 `--dsh-chat-user-width`。
@@ -67,18 +76,24 @@ dsh plugin --profile web add link:/path/to/dsh-width-tiers
 
 ## 兼容性
 
-- DSH Web 0.1.7+，带 `web` profile。
+- DSH Web 0.2.x，带 `web` profile（`shell.overlay` 插槽与 `slots` 服务）。
 - 宽度轴已按 DSH 0.2.1-rc.2 对照：640px 下限、176px 手柄预留、
   `--dsh-chat-*` 变量、`data-width-handle`、layout/locale 服务。
 
 ## 开发
 
 ```bash
-npm test
+pnpm install
+pnpm build        # src/ -> lib/（宿主入口 + loader 包装的客户端 bundle）
+pnpm typecheck
+pnpm test         # vitest：controller（jsdom）+ picker 组件测试
+pnpm verify:client
 ```
 
-测试通过 DOM stub 加载已发布的 `lib/client.js`，不需要启动真实 DSH。包内
-直接发布预构建的 `lib/`，不包含 `src/`。
+源码在 `src/`（`src/index.ts` 是无副作用的宿主入口，功能在
+`src/client/`），`lib/` 是构建后的发布内容。vitest 直接测试源码：
+controller 跑在 jsdom 下，picker 用 Testing Library 渲染，不需要启动真实
+DSH。`verify:client` 校验构建产物的 loader 契约。开发需要 Node 22+ 与 pnpm。
 
 ## 注意