dsh-theme-palette 1.5.2 → 1.6.0

package/CHANGELOG.md

@@ -13,6 +13,48 @@
   复核宿主源码发现它带 `includePrerelease`，结论相反。现在这条判断固化进脚本，不再靠手算
 - 该改动只影响本地发版工具，**不进 npm 包**（`files` 不含 `tools/`），故不升版本号
 
+### 1.6.0
+视觉与可访问性整改（依据 2026-10-22 第三方 UI 视觉验收审计，60/100）：
+
+- **A2 配置块重做**：改用 `.dsh-tp-field` 容器（与普通行同节奏），导出/导入各占一行，
+  反馈文案就地显示（复制→复制按钮旁，导入→导入按钮旁），导出框加 `text-overflow:ellipsis`
+- **A3 复制不再谎报**：`await navigator.clipboard.writeText()`，失败或无 API 时显示
+  「复制失败，请手选后 Ctrl+C」，不再无条件报成功
+- **A4 布局从视口断点改容器驱动**：卡片 `repeat(auto-fit,minmax(196px,1fr))`、色块 `minmax(86px,1fr)`、
+  行与分段控件 `flex-wrap`；日语长标签改短（右栏「サイドバー / キャンバス」、滚动条「無彩 / 追従 / 強調」）。
+  实测 4 语 × 内容宽 564/336/216：**越界元素 0**（改前日语 216px 溢出 61px）
+- **A5 语言属性**：`<section lang>` 跟随手选语言，`auto` 时回落宿主 `documentElement.lang`
+- **A6 分段控件有名字**：`role="radiogroup"` + `aria-labelledby` 指向行标题，选项改
+  `role="radio" aria-checked`（8 组 22 个按钮）
+- **A7 反馈可播报**：复制/导入/自愈状态挂 `role="status" aria-live="polite"`，错误用 `alert`；
+  导入框补 `aria-label`
+- **A8 自定义面板层级**：面板底改 `bg-layer-1`（按钮不再与面板同底 1.00:1）、说明文字提到
+  `label-secondary` 12px；色值从只读 `<code>` 改为**可输入 hex**（回车/失焦生效，非法值忽略）
+- **A9 缩略图跟随侧栏档位**：`cardColors()` 接收 `sidebarMode`，不再写死默认档
+- **A11** 黑白配色下「滚动条」「开关」置灰禁用（点了也不会有变化）
+- **A12** 卡片与分段按钮 `:focus-visible{outline-offset:2px}`，焦点环不再与选中边框贴死
+- **A13** 加 `prefers-reduced-motion` 降级
+- **A14** `docs/DESIGN.md` 补「当前标定值」表（旧推演内容保留，注明以 `client.js` 为准）
+- **A15** 删掉 4 语共 36 条从未渲染的文案键与未被调用的 `swatches()`
+- **A10 证据链**：README 首图换成当前版本（5 张卡）的**静态渲染**，按真机内容宽 564 px 出图
+  （浅色 / 深色 / 自定义面板三张，`--scale 2` 即 1240 px 宽），并在五语 README 里注明「静态渲染」；
+  `screenshots.json` 同步为这三张
+- 工具：`tools/preview-settings.mjs` 新增 `--width`（默认按真机 564px 内容宽）与 `--adv`（默认折叠），
+  token 跟随 `--palette`；新增 `tools/measure-preview.mjs`（量越界/行高/关键计算色，非 0 越界退出 1）
+
+### 1.5.3
+修：选中「自定义」后滚动条不跟随取色。
+
+- **根因**：`scrollbarTokens()` 收到的是 `SCHEMES` 里的**占位** scheme 对象
+  （`accentHue` 恒为 60），而真正按三色派生出的参数只在 `rampsFor()` 内部解引用。
+  于是画布/强调色都对，唯独滚动条永远停在暖橙。
+- **修法**：`buildTokens()` 开头统一解引用一次（`params = scheme.custom ? customScheme(readCustom()) : scheme`），
+  之后所有读 `scheme.*` 的地方改用 `params`；`scrollbarTokens(ramps, params, mode)` 也改传解析后的对象。
+- **防复发**：新增 `tools/check-custom.mjs` —— 断言三种强调色必须产出三种滚动条颜色，
+  且三组自选色的正文/次文/三级对比度仍在限内（现在输出
+  `#2f6fd0→#bfd6f9  #a9683e→#f2cbb3  #4f7a42→#c2ddbb`）。
+- 顺带：`tools/preview-settings.mjs` 支持 `PREVIEW_ACCENT`，可预览任意强调色的自定义面板。
+
 ### 1.5.2
 设置页交互重排（用户反馈：自定义不该埋在「更多选项」里、取色看不到即时效果）：
 

package/README-es.md

@@ -6,6 +6,8 @@ Paleta de tema para DeepSeek Harness (web y escritorio): **4 paletas × claro/os
 
 ![Página de ajustes](assets/screenshot-settings-light.png)
 
+*Render estático con el ancho real del panel (564 px de contenido).*
+
 ## Compatibility
 
 | Superficie | Estado |

package/README-hi.md

@@ -6,6 +6,8 @@ DeepSeek Harness (वेब और डेस्कटॉप) के लिए
 
 ![सेटिंग्स पेज](assets/screenshot-settings-light.png)
 
+*पैनल की वास्तविक चौड़ाई (564px सामग्री) पर स्थिर रेंडर।*
+
 ## Compatibility
 
 | सतह | स्थिति |

package/README-pt.md

@@ -6,6 +6,8 @@ Paleta de tema para o DeepSeek Harness (web e desktop): **4 paletas × claro/esc
 
 ![Página de configuração](assets/screenshot-settings-light.png)
 
+*Render estático na largura real do painel (564 px de conteúdo).*
+
 ## Compatibility
 
 | Superfície | Estado |

package/README-zh.md

@@ -4,7 +4,9 @@
 
 DeepSeek Harness（Web / 桌面）的主题配色插件：**4 套配色 × 明暗两模式**，两个轴互相独立。
 
-![设置页：四套配色、强度与面板表面](assets/screenshot-settings-light.png)
+![设置页：五套配色、强度与面板表面](assets/screenshot-settings-light.png)
+
+*上图按真机面板宽度（内容区 564 px）静态渲染。*
 
 ## Compatibility
 

package/README.md

@@ -4,7 +4,9 @@
 
 Theme palette for DeepSeek Harness (web & desktop): **4 palettes × light/dark**, two independent axes.
 
-![Settings page: four palettes, strength and panel surfaces](assets/screenshot-settings-light.png)
+![Settings page: five palettes, strength and panel surfaces](assets/screenshot-settings-light.png)
+
+*Static render of the settings page at the real panel width (564 px content).*
 
 ## Compatibility
 

package/client.js

@@ -27,7 +27,7 @@ window.__ModuleLoader__.load({
     const React = require('react')
     const h = React.createElement
 
-    const PLUGIN_VERSION = '1.5.2'
+    const PLUGIN_VERSION = '1.6.0'
     const STORE_KEY = 'dsh-theme-palette.v1'
     const OVERRIDE_SOURCE = 'dsh-theme-palette'
 
@@ -703,9 +703,12 @@ window.__ModuleLoader__.load({
 
     function buildTokens(scheme, sidebarMode, textMode, rightbarMode, scrollMode, controlMode, mdMode, hcMode) {
       const hc = hcMode === true
-      const ramps = rampsFor(scheme, textMode || DEFAULT_TEXT, hc)
+      // 自定义配色必须先解引用：ramps 内部会派生参数，但 accent / scroll / control
+      // 这些直接读 params.accentHue、params.hue 的地方若拿到占位值，就会"不跟取色"
+      const params = scheme && scheme.custom === true ? customScheme(readCustom()) : scheme
+      const ramps = rampsFor(params, textMode || DEFAULT_TEXT, hc)
       const pairs = {}
-      if (!scheme.tinted) {
+      if (!params.tinted) {
         // 黑白：只输出「被求解改动过」的那几步 + 派生链接，不整条覆盖（保持宿主原貌）
         for (const step of ['400', '600', '700', '1000']) {
           pairs['--dsw-static-neutral-bluish-' + step] = { light: ramps.bluish[step], dark: ramps.bluish[step] }
@@ -719,7 +722,7 @@ window.__ModuleLoader__.load({
         pairs['--dsw-alias-button-primary-fill'] = { light: monoBtn, dark: ramps.bluish['1000'] }
       }
       // 其它配色：整条色阶 + 字面量别名覆盖。
-      if (scheme.tinted) {
+      if (params.tinted) {
         for (const [family, table] of Object.entries(ramps)) {
           for (const [step, value] of Object.entries(table)) {
             pairs['--dsw-static-' + (family === 'bluish' ? 'neutral-bluish-' : family + '-') + step] = {
@@ -731,13 +734,13 @@ window.__ModuleLoader__.load({
         const aliases = aliasOverrides(ramps, hc)
         for (const [name, pair] of Object.entries(aliases)) pairs[name] = pair
       }
-      const sidebar = sidebarTokens(ramps, sidebarMode, scheme.tinted)
+      const sidebar = sidebarTokens(ramps, sidebarMode, params.tinted)
       for (const [name, pair] of Object.entries(sidebar)) pairs[name] = pair
       // 右栏底色只给一个间接层：同左栏时直接引用左栏 token，跟随画布时引用画布 token。
       // 主按钮：浅色下宿主把 button-primary-fill 指到 state-error-primary（红），
       // 于是页面上有「红主按钮 + 强调色」两个主色。改成强调色，并压暗到按钮文字 ≥4.5。
       // 黑白配色在上面已经单独设过，这里跳过（它要按「更浅」档的画布兜底）。
-      if (scheme.tinted) {
+      if (params.tinted) {
         pairs['--dsw-alias-button-primary-fill'] = {
           light: darkenUntil(ramps.deepseek['500'], ramps.bluish['00'], 4.5),
           dark: ramps.deepseek['400'],
@@ -756,7 +759,7 @@ window.__ModuleLoader__.load({
         : 'var(--dsw-specific-sidebar-fill)'
       pairs['--dshtp-rightbar-fill'] = { light: rightbarFill, dark: rightbarFill }
       // Markdown 强调色：标题 = 正文色混 40% 强调色；加粗 = 混 20%（比标题弱一档）
-      if (scheme.tinted) {
+      if (params.tinted) {
         if (mdMode === 'off') {
           const inherit = { light: 'inherit', dark: 'inherit' }
           pairs['--dshtp-md-heading'] = inherit
@@ -790,7 +793,7 @@ window.__ModuleLoader__.load({
         light: mixHex(ramps.deepseek['500'], ramps.bluish['50'], 0.05),
         dark: mixHex(ramps.deepseek['400'], ramps.bluish['900'], 0.07),
       }
-      const scroll = scrollbarTokens(ramps, scheme, scrollMode)
+      const scroll = scrollbarTokens(ramps, params, scrollMode)
       for (const [name, pair] of Object.entries(scroll)) pairs[name] = pair
       // 开关/勾选/单选的共用支点：brand-primary 本来是近黑/近白，改成强调色。
       if (controlMode === 'accent') {
@@ -798,22 +801,16 @@ window.__ModuleLoader__.load({
       }
       // 黑白配色的浅色画布本身就是纯白，「更浅」无处可提 —— 改成把会话区压一档浅灰，
       // 侧栏保持纯白，同样得到区块层次（这是唯一需要动画布的情形）。
-      if (!scheme.tinted && sidebarMode === 'light') {
+      if (!params.tinted && sidebarMode === 'light') {
         pairs['--dsw-static-neutral-bluish-00'] = { light: '#fafafa', dark: BASE.bluish['00'] }
       }
       return pairs
     }
 
-    /* ================= 卡片预览色 ================= */
-    function swatches(scheme, textMode) {
-      if (!scheme.tinted) return ['#ffffff', '#e5e5e5', '#0f1115']
-      const r = rampsFor(scheme, textMode || DEFAULT_TEXT)
-      return [r.bluish['00'], r.bluish['100'], r.deepseek['500']]
-    }
-
+    
 
     /** 卡片缩略图用的一小组颜色（画布/侧栏/文字/强调），按当前强度档取。 */
-    function cardColors(scheme, textMode) {
+    function cardColors(scheme, textMode, sidebarMode) {
       const r = rampsFor(scheme, textMode || DEFAULT_TEXT)
       if (!r) {
         return {
@@ -821,7 +818,7 @@ window.__ModuleLoader__.load({
           dark: { canvas: '#151517', side: '#1b1b1c', text: '#f9fafb', accent: '#7aaaff' },
         }
       }
-      const side = sidebarTokens(r, DEFAULT_SIDEBAR, scheme.tinted)
+      const side = sidebarTokens(r, sidebarMode || DEFAULT_SIDEBAR, scheme.tinted)
       return {
         light: {
           canvas: r.bluish['00'],
@@ -865,10 +862,10 @@ window.__ModuleLoader__.load({
 .dsh-tp-head h2{margin:0;font-size:18px;font-weight:600;letter-spacing:.2px}
 .dsh-tp-badge{margin-left:auto;font:11px/1.7 ui-monospace,Consolas,monospace;color:var(--dsw-alias-label-tertiary);border:.5px solid var(--dsw-alias-border-l4);border-radius:999px;padding:0 8px}
 .dsh-tp-sub{margin:-6px 0 0;color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}
-.dsh-tp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
-@media (max-width:620px){.dsh-tp-grid{grid-template-columns:1fr}}
-.dsh-tp-card{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;font:inherit;cursor:pointer;padding:9px;border-radius:14px;border:.5px solid var(--dsw-alias-border-l4);background:transparent;transition:background .12s ease,border-color .12s ease}
+.dsh-tp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px}
+.dsh-tp-card{position:relative;display:flex;flex-direction:column;gap:8px;text-align:left;font:inherit;color:var(--dsw-alias-label-primary);cursor:pointer;padding:9px;border-radius:14px;border:.5px solid var(--dsw-alias-border-l4);background:transparent;transition:background .12s ease,border-color .12s ease}
 .dsh-tp-card:hover{background:var(--dsw-alias-interactive-bg-hover)}
+.dsh-tp-card:focus-visible{outline-offset:2px}
 .dsh-tp-card.is-on{background:var(--dshtp-card-picked,var(--dsw-alias-bg-module-platform));border-color:var(--t-accent-l)}
 body[data-ds-dark-theme] .dsh-tp-card.is-on{border-color:var(--t-accent-d)}
 .dsh-tp-thumb{display:flex;height:56px;border-radius:9px;overflow:hidden;border:.5px solid rgba(128,128,128,.28)}
@@ -882,20 +879,21 @@ body[data-ds-dark-theme] .dsh-tp-thumb-main b{background:var(--t-text-d)}
 .dsh-tp-thumb-main b:nth-of-type(3){width:44%;background:var(--t-accent-l);opacity:.9}
 body[data-ds-dark-theme] .dsh-tp-thumb-main b:nth-of-type(3){background:var(--t-accent-d)}
 .dsh-tp-card-meta{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
-.dsh-tp-card-name{font-size:13.5px;font-weight:500}
-.dsh-tp-card-desc{font-size:11.5px;color:var(--dsw-alias-label-tertiary)}
+.dsh-tp-card-name{font-size:14px;font-weight:500}
+.dsh-tp-card-desc{font-size:12px;color:var(--dsw-alias-label-tertiary)}
 .dsh-tp-check{position:absolute;top:7px;right:7px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1;background:var(--t-accent-l);color:var(--t-canvas-l);opacity:0;transition:opacity .12s ease}
 body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--t-canvas-d)}
 .dsh-tp-card.is-on .dsh-tp-check{opacity:1}
-.dsh-tp-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:.5px solid var(--dsw-alias-border-l2)}
+.dsh-tp-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:.5px solid var(--dsw-alias-border-l2);flex-wrap:wrap}
 .dsh-tp-row-label{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
 .dsh-tp-row-label b{font-size:13.5px;font-weight:500}
 .dsh-tp-row-label span{font-size:11.5px;color:var(--dsw-alias-label-tertiary);line-height:16px}
-.dsh-tp-seg{display:inline-flex;gap:2px;padding:2px;border-radius:10px;background:var(--dsw-alias-interactive-bg-hover);flex:none}
+.dsh-tp-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:2px;border-radius:10px;background:var(--dsw-alias-interactive-bg-hover);flex:none;max-width:100%}
 .dsh-tp-seg button{font:inherit;font-size:12.5px;line-height:20px;cursor:pointer;border:0;border-radius:8px;padding:5px 12px;background:transparent;color:var(--dsw-alias-label-secondary);white-space:nowrap;transition:background .12s,color .12s}
 .dsh-tp-seg button:hover{color:var(--dsw-alias-label-primary)}
 .dsh-tp-seg button.is-on{background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);box-shadow:0 1px 2px rgba(0,0,0,.10)}
-@media (max-width:520px){.dsh-tp-row{flex-direction:column;align-items:stretch;gap:8px}.dsh-tp-seg{justify-content:space-between}.dsh-tp-seg button{flex:1;text-align:center}}
+.dsh-tp-seg button:focus-visible{outline-offset:2px}
+.dsh-tp-seg button[disabled]{opacity:.45;cursor:default}
 .dsh-tp-more{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;color:var(--dsw-alias-label-tertiary);background:0 0;border:0;padding:6px 0 2px;cursor:pointer;align-self:flex-start;transition:color .12s}
 .dsh-tp-more:hover{color:var(--dsw-alias-label-primary)}
 .dsh-tp-adv{display:flex;flex-direction:column}
@@ -903,21 +901,27 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
 .dsh-tp-input::placeholder{color:var(--dsw-alias-label-tertiary)}
 .dsh-tp-mini{font:inherit;font-size:12.5px;line-height:20px;padding:5px 12px;border-radius:8px;border:.5px solid var(--dsw-alias-border-l4);background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary);cursor:pointer}
 .dsh-tp-mini:hover{background:var(--dsw-alias-bg-layer-1)}
-.dsh-tp-custom{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;border:.5px solid var(--dsw-alias-border-l4);background:var(--dsw-alias-interactive-bg-hover)}
+.dsh-tp-custom{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;border:.5px solid var(--dsw-alias-border-l3);background:var(--dsw-alias-bg-layer-1)}
 .dsh-tp-custom-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
 .dsh-tp-custom-head b{font-size:13.5px;font-weight:500}
-.dsh-tp-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
-@media (max-width:520px){.dsh-tp-swatches{grid-template-columns:1fr}}
+.dsh-tp-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:10px}
 .dsh-tp-swatch{display:flex;flex-direction:column;gap:6px;cursor:pointer}
 .dsh-tp-color{width:100%;height:44px;padding:0;border:.5px solid var(--dsw-alias-border-l4);border-radius:10px;background:transparent;cursor:pointer}
 .dsh-tp-color::-webkit-color-swatch-wrapper{padding:3px}
 .dsh-tp-color::-webkit-color-swatch{border:none;border-radius:8px}
 .dsh-tp-swatch-name{font-size:12px;color:var(--dsw-alias-label-secondary)}
 .dsh-tp-hex{font:11.5px/1 ui-monospace,Consolas,monospace;color:var(--dsw-alias-label-tertiary)}
-.dsh-tp-custom-hint{margin:0;font-size:11.5px;line-height:17px;color:var(--dsw-alias-label-tertiary)}
+.dsh-tp-hexinput{width:100%;box-sizing:border-box;font:11.5px/16px ui-monospace,Consolas,monospace;padding:3px 6px;border-radius:6px;border:.5px solid var(--dsw-alias-border-l4);background:var(--dsw-alias-bg-base);color:var(--dsw-alias-label-primary)}
+.dsh-tp-hexinput:focus-visible{outline-offset:1px}
+.dsh-tp-custom-hint{margin:0;font-size:12px;line-height:18px;color:var(--dsw-alias-label-secondary)}
 .dsh-tp-note{font-size:11.5px;color:var(--dsw-alias-label-tertiary)}
 .dsh-tp-status{margin:0;font-size:11.5px;line-height:18px;color:var(--dsw-alias-label-tertiary)}
 .dsh-tp-status.is-bad{color:var(--dsw-alias-state-error-primary)}
+.dsh-tp-field{display:flex;flex-direction:column;gap:8px;padding:11px 0;border-top:.5px solid var(--dsw-alias-border-l2)}
+.dsh-tp-field-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+.dsh-tp-field-title{font-size:13.5px;font-weight:500}
+.dsh-tp-input{text-overflow:ellipsis}
+@media (prefers-reduced-motion:reduce){.dsh-tp-card,.dsh-tp-seg button,.dsh-tp-more,.dsh-tp-check,.dsh-tp-mini{transition:none}}
 `
 
     function installRightbarStyle() {
@@ -1169,14 +1173,10 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         nav: '主题色',
         hint: '配色与明暗模式独立；切换后立即生效并保存在 localStorage。',
         md: 'Markdown 强调',
-        mdHint: '标题与加粗用「正文色混强调色」，比正文更有色；关掉则与正文同色。',
         control: '开关 / 勾选',
-        controlHint: '宿主的开关、复选框、单选都压在近黑/近白上；开启后改用强调色。',
         scroll: '滚动条',
-        scrollHint: '默认中性灰；「跟随」上配色色相，「强调」用强调色。明暗关系不变。',
         scrollHintMono: '当前是黑白配色，没有色相可跟随，滚动条保持中性灰。',
         rightbar: '右侧栏底色',
-        rightbarHint: '右栏本来没有自己的背景，露的是会话区画布色。',
         advanced: '更多选项',
         textSub: '正文与强调的着色程度',
         sidebarSub: '相对会话区的层次',
@@ -1185,16 +1185,11 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         scrollSub: '滚动条与滑轨的色相',
         controlSub: '开关与复选框是否跟强调色',
         langSub: '自动跟随宿主界面语言',
-        surface: '面板表面',
-        surfaceHint: '决定侧栏与右栏相对会话区是「浮起」还是「凹陷」。',
-        ok: '✓ 配色已生效',
         bad: '⚠ 部分 token 未生效（宿主可能改名），请查看控制台',
         healed: '配色层被宿主丢过一次，已自动恢复 ',
         healedSuffix: ' 次',
         text: '强度',
-        textHint: '让正文/次级文字带配色色味；三档都满足 AA。',
         sidebar: '左侧栏底色',
-        sidebarHint: '让侧栏比会话区更浅（或更深），做出区块层次。',
         lang: '语言',
         hc: '高对比',
         custom: '自定义配色',
@@ -1205,6 +1200,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         copy: '复制',
         applyImport: '导入',
         copied: '已复制',
+        copyFail: '复制失败，请手选后 Ctrl+C',
         importOk: '已导入',
         importBad: '短码无效，已忽略',
         hcSub: '把文字下限抬到 AAA（正文 ≥15、次文 ≥9、三级 ≥7）',
@@ -1213,14 +1209,10 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         nav: '主題色',
         hint: '配色與明暗模式獨立；切換後立即生效並存在 localStorage。',
         md: 'Markdown 強調',
-        mdHint: '標題與粗體用「本文色混強調色」，比本文更有色；關掉則與本文同色。',
         control: '開關 / 勾選',
-        controlHint: '宿主開關、核取方塊、單選都用近黑/近白；開啟後改用強調色。',
         scroll: '捲軸',
-        scrollHint: '預設中性灰；「跟隨」上配色色相，「強調」用強調色。明暗關係不變。',
         scrollHintMono: '目前是黑白配色，沒有色相可跟隨，捲軸保持中性灰。',
         rightbar: '右側欄底色',
-        rightbarHint: '右欄本來沒有自己的背景，露的是會話區畫布色。',
         advanced: '更多選項',
         textSub: '本文與強調的著色程度',
         sidebarSub: '相對會話區的層次',
@@ -1229,16 +1221,11 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         scrollSub: '捲軸與軌道的色相',
         controlSub: '開關與核取方塊是否跟強調色',
         langSub: '自動跟隨宿主介面語言',
-        surface: '面板表面',
-        surfaceHint: '決定側欄與右欄相對會話區是「浮起」還是「凹陷」。',
-        ok: '✓ 配色已生效',
         bad: '⚠ 部分 token 未生效（宿主可能改名），請看主控台',
         healed: '配色層被宿主丟棄過一次，已自動恢復 ',
         healedSuffix: ' 次',
         text: '強度',
-        textHint: '讓本文/次級文字帶配色色味；三檔都符合 AA。',
         sidebar: '左側欄底色',
-        sidebarHint: '讓側欄比會話區更淺（或更深），做出區塊層次。',
         lang: '語言',
         hc: '高對比',
         custom: '自訂配色',
@@ -1249,6 +1236,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         copy: '複製',
         applyImport: '匯入',
         copied: '已複製',
+        copyFail: '複製失敗，請手選後 Ctrl+C',
         importOk: '已匯入',
         importBad: '短碼無效，已忽略',
         hcSub: '把文字下限抬到 AAA（正文 ≥15、次文 ≥9、三級 ≥7）',
@@ -1257,14 +1245,10 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         nav: 'Color theme',
         hint: 'Independent of light/dark mode. Applies immediately and is saved to localStorage.',
         md: 'Markdown emphasis',
-        mdHint: 'Headings and bold mix the accent into body colour; off keeps them identical to body text.',
         control: 'Switches / checks',
-        controlHint: 'Switches, checkboxes and radios use near-black/white in the host. Turn this on to use the accent colour.',
         scroll: 'Scrollbars',
-        scrollHint: 'Neutral grey by default. Tint follows the palette hue; Accent uses the accent colour. Lightness is unchanged.',
         scrollHintMono: 'Monochrome has no hue to follow; scrollbars stay neutral.',
         rightbar: 'Right panel surface',
-        rightbarHint: 'The right panel has no fill of its own; it shows the canvas.',
         advanced: 'More options',
         textSub: 'How strongly text follows the palette',
         sidebarSub: 'Layer relative to the conversation',
@@ -1273,16 +1257,11 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         scrollSub: 'Hue of the scrollbar',
         controlSub: 'Switches and checkboxes',
         langSub: 'Follow the host interface language',
-        surface: 'Panel surfaces',
-        surfaceHint: 'Whether the sidebars sit above or below the conversation area.',
-        ok: '✓ Palette applied',
         bad: '⚠ Some tokens did not apply (host may have renamed them); check the console',
         healed: 'Palette layer was dropped by the host; restored ',
         healedSuffix: 'x',
         text: 'Strength',
-        textHint: 'Tints body and secondary text toward the palette; all three levels meet AA.',
         sidebar: 'Sidebar surface',
-        sidebarHint: 'Makes the sidebar lighter (or deeper) than the conversation area.',
         lang: 'Language',
         hc: 'High contrast',
         custom: 'Custom palette',
@@ -1293,6 +1272,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         copy: 'Copy',
         applyImport: 'Import',
         copied: 'Copied',
+        copyFail: 'Copy failed — select the code and press Ctrl+C',
         importOk: 'Imported',
         importBad: 'Invalid code, ignored',
         hcSub: 'Raises text floors to AAA (body ≥15, secondary ≥9, tertiary ≥7)',
@@ -1301,14 +1281,10 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         nav: 'カラーテーマ',
         hint: 'ライト/ダークとは独立です。変更は即時反映され、localStorage に保存されます。',
         md: 'Markdown の強調',
-        mdHint: '見出しと太字にアクセント色を混ぜます。オフにすると本文と同じ色になります。',
         control: 'スイッチ / チェック',
-        controlHint: 'ホストのスイッチ・チェックボックスはほぼ白黒です。オンにするとアクセント色になります。',
         scroll: 'スクロールバー',
-        scrollHint: '既定はニュートラルグレー。「追従」でテーマの色相、「アクセント」でアクセント色になります。',
         scrollHintMono: 'モノクロには色相がないため、スクロールバーはグレーのままです。',
         rightbar: '右パネルの背景',
-        rightbarHint: '右パネルは独自の背景を持たず、キャンバス色が見えています。',
         advanced: 'その他のオプション',
         textSub: '本文と強調の色づき具合',
         sidebarSub: '会話エリアとの段差',
@@ -1317,16 +1293,11 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         scrollSub: 'スクロールバーの色相',
         controlSub: 'スイッチとチェックの色',
         langSub: 'ホストの表示言語に合わせます',
-        surface: 'パネル表面',
-        surfaceHint: 'サイドバーが会話エリアより浮くか沈むかを決めます。',
-        ok: '✓ 配色を適用しました',
         bad: '⚠ 一部の token が適用されていません（ホスト側で改名された可能性）。コンソールを確認してください',
         healed: '配色レイヤーがホストに破棄されたため、自動で復元しました（',
         healedSuffix: ' 回）',
         text: '強さ',
-        textHint: '本文と副次テキストをテーマ色に寄せます。3 段階とも AA を満たします。',
         sidebar: '左サイドバーの背景',
-        sidebarHint: 'サイドバーを会話エリアより明るく（または暗く）して段差を作ります。',
         lang: '言語',
         hc: 'ハイコントラスト',
         custom: 'カスタム配色',
@@ -1337,6 +1308,7 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         copy: 'コピー',
         applyImport: '読み込み',
         copied: 'コピーしました',
+        copyFail: 'コピーできません。選択して Ctrl+C してください',
         importOk: '読み込みました',
         importBad: '無効なコードです',
         hcSub: '本文の下限を AAA に引き上げます（本文 ≥15、副次 ≥9、三次 ≥7）',
@@ -1389,8 +1361,8 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         desc: { mono: '色なし · 既定', warm: 'クリーム + ブラウン', indigo: 'クールホワイト + ブルー', moss: 'グレーグリーン', custom: '3 色から派生' },
         text: { neutral: '控えめ', tinted: '標準', deep: '強め' },
         sidebar: { light: '明るく', match: '同じ', deep: '暗く' },
-        rightbar: { sidebar: 'サイドバーに合わせる', canvas: 'キャンバスに従う' },
-        scroll: { neutral: 'ニュートラル', tinted: '追従', accent: 'アクセント' },
+        rightbar: { sidebar: 'サイドバー', canvas: 'キャンバス' },
+        scroll: { neutral: '無彩', tinted: '追従', accent: '強調' },
         control: { accent: 'アクセント', mono: 'モノクロ' },
         md: { on: '色づけ', off: '本文と同じ' },
         lang: { auto: '自動' },
@@ -1412,32 +1384,42 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
       const health = React.useSyncExternalStore(props.subscribeHealth, props.getHealth)
       const [importText, setImportText] = React.useState('')
       const [importState, setImportState] = React.useState(null)
+      const [copyState, setCopyState] = React.useState(null)
       const [advanced, setAdvanced] = React.useState(false)
       const locale = React.useSyncExternalStore(props.subscribeLocale, props.getLocale)
       const langPref = React.useSyncExternalStore(props.subscribeLocale, props.getLangPref)
+      const langAttr = langPref !== 'auto'
+        ? langPref
+        : ((typeof document !== 'undefined' && document.documentElement && document.documentElement.lang) || 'zh-CN')
       const txt = TEXT[locale] || TEXT['zh-CN']
       const lb = LABELS[locale] || LABELS['zh-CN']
 
-      const seg = (modes, value, onPick, labels) => h(
+      // A6：读屏需要知道"这是哪个设置的选项组"；单选用 radio 语义更准
+      const seg = (modes, value, onPick, labels, labelId, disabled) => h(
         'div',
-        { className: 'dsh-tp-seg', role: 'group' },
+        { className: 'dsh-tp-seg', role: 'radiogroup', 'aria-labelledby': labelId, 'aria-disabled': disabled ? 'true' : undefined },
         modes.map((mode) => h(
           'button',
           {
             key: mode.id,
             type: 'button',
+            role: 'radio',
             className: mode.id === value ? 'is-on' : undefined,
-            'aria-pressed': mode.id === value,
-            onClick: () => onPick(mode.id),
+            'aria-checked': mode.id === value,
+            'aria-disabled': disabled ? 'true' : undefined,
+            disabled: disabled === true,
+            onClick: () => { if (!disabled) onPick(mode.id) },
           },
           (labels && labels[mode.id]) || mode.label,
         )),
       )
 
-      const row = (titleText, subText, control) => h(
+      const rowId = (key) => 'dsh-tp-row-' + key
+      const row = (key, titleText, subText, control) => h(
         'div',
         { className: 'dsh-tp-row' },
-        h('div', { className: 'dsh-tp-row-label' }, h('b', null, titleText), h('span', null, subText)),
+        h('div', { className: 'dsh-tp-row-label', id: rowId(key) + '-desc' },
+          h('b', { id: rowId(key) }, titleText), h('span', null, subText)),
         control,
       )
 
@@ -1465,13 +1447,21 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
               'aria-label': (lb.custom && lb.custom[field]) || field,
             }),
             h('span', { className: 'dsh-tp-swatch-name' }, (lb.custom && lb.custom[field]) || field),
-            h('code', { className: 'dsh-tp-hex' }, customColors[field])))),
+            h('input', {
+              key: customColors[field],
+              className: 'dsh-tp-hexinput',
+              defaultValue: customColors[field],
+              spellCheck: false,
+              'aria-label': ((lb.custom && lb.custom[field]) || field) + ' HEX',
+              onBlur: (e) => props.setCustomColor(field, e.target.value.trim()),
+              onKeyDown: (e) => { if (e.key === 'Enter') props.setCustomColor(field, e.target.value.trim()) },
+            })))),
         h('p', { className: 'dsh-tp-custom-hint' }, txt.customHint),
       )
 
       const card = (scheme) => {
         const picked = scheme.id === current
-        const c = cardColors(scheme, textMode)
+        const c = cardColors(scheme, textMode, sidebarMode)
         return h(
           'button',
           {
@@ -1499,16 +1489,16 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
 
       return h(
         'section',
-        { className: 'dsh-tp' },
+        { className: 'dsh-tp', lang: langAttr },
         h('div', { className: 'dsh-tp-head' },
           h('h2', null, txt.nav),
           h('span', { className: 'dsh-tp-badge' }, 'v' + PLUGIN_VERSION)),
         h('p', { className: 'dsh-tp-sub' }, txt.hint),
         h('div', { className: 'dsh-tp-grid' }, SCHEMES.map(card)),
         customPanel,
-        row(txt.text, txt.textSub, seg(TEXT_MODES, textMode, props.setTextMode, lb.text)),
-        row(txt.sidebar, txt.sidebarSub, seg(SIDEBAR_MODES, sidebarMode, props.setSidebarMode, lb.sidebar)),
-        row(txt.rightbar, txt.rightbarSub, seg(RIGHTBAR_MODES, rightbarMode, props.setRightbarMode, lb.rightbar)),
+        row('text', txt.text, txt.textSub, seg(TEXT_MODES, textMode, props.setTextMode, lb.text, rowId('text'))),
+        row('sidebar', txt.sidebar, txt.sidebarSub, seg(SIDEBAR_MODES, sidebarMode, props.setSidebarMode, lb.sidebar, rowId('sidebar'))),
+        row('rightbar', txt.rightbar, txt.rightbarSub, seg(RIGHTBAR_MODES, rightbarMode, props.setRightbarMode, lb.rightbar, rowId('rightbar'))),
         health && !health.ok && h('p', { className: 'dsh-tp-status is-bad' }, txt.bad),
         health && health.ok && health.reapplies > 0 && h(
           'p',
@@ -1524,35 +1514,43 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
         advanced && h(
           'div',
           { className: 'dsh-tp-adv' },
-          row(txt.lang, txt.langSub, seg(LANG_OPTIONS, langPref, props.setLangPref, lb.lang)),
+          row('lang', txt.lang, txt.langSub, seg(LANG_OPTIONS, langPref, props.setLangPref, lb.lang, rowId('lang'))),
           h(
             'div',
-            { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
-            h('div', { style: { fontSize: 14, lineHeight: '22px' } }, txt.config),
-            h('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' } },
+            { className: 'dsh-tp-field' },
+            h('div', { className: 'dsh-tp-field-title', id: rowId('config') }, txt.config),
+            h('div', { className: 'dsh-tp-field-row' },
               h('input', {
                 className: 'dsh-tp-input',
                 readOnly: true,
                 value: props.getConfigCode(),
+                title: props.getConfigCode(),
                 onFocus: (e) => { try { e.target.select() } catch (err) { /* 忽略 */ } },
-                'aria-label': txt.config,
+                'aria-label': txt.config + ' — ' + txt.copy,
               }),
               h('button', {
                 type: 'button',
                 className: 'dsh-tp-mini',
-                onClick: () => {
+                onClick: async () => {
                   const code = props.getConfigCode()
                   try {
-                    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(code)
-                  } catch (err) { /* 剪贴板不可用时靠手选 */ }
-                  setImportState('copied')
+                    if (!navigator.clipboard || typeof navigator.clipboard.writeText !== 'function') throw new Error('no clipboard api')
+                    await navigator.clipboard.writeText(code)
+                    setCopyState('copied')
+                  } catch (err) {
+                    // 剪贴板可能被拒（无安全上下文/权限）；不能谎报成功
+                    setCopyState('fail')
+                  }
                 },
-              }, txt.copy)),
-            h('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' } },
+              }, txt.copy),
+              copyState && h('span', { className: 'dsh-tp-note', role: 'status', 'aria-live': 'polite' },
+                copyState === 'copied' ? txt.copied : txt.copyFail)),
+            h('div', { className: 'dsh-tp-field-row' },
               h('input', {
                 className: 'dsh-tp-input',
                 placeholder: 'dshs1.…',
                 value: importText,
+                'aria-label': txt.applyImport,
                 onChange: (e) => { setImportText(e.target.value); setImportState(null) },
               }),
               h('button', {
@@ -1560,14 +1558,14 @@ body[data-ds-dark-theme] .dsh-tp-check{background:var(--t-accent-d);color:var(--
                 className: 'dsh-tp-mini',
                 onClick: () => setImportState(props.applyConfigCode(importText) ? 'ok' : 'bad'),
               }, txt.applyImport),
-              importState && h('span', { className: 'dsh-tp-note' },
-                importState === 'ok' ? txt.importOk : importState === 'copied' ? txt.copied : txt.importBad)),
-            h('p', { style: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' } }, txt.configHint),
+              importState && h('span', { className: 'dsh-tp-note', role: importState === 'bad' ? 'alert' : 'status', 'aria-live': 'polite' },
+                importState === 'ok' ? txt.importOk : txt.importBad)),
+            h('p', { className: 'dsh-tp-custom-hint' }, txt.configHint),
           ),
-          row(txt.md, txt.mdSub, seg(MD_MODES, mdMode, props.setMdMode, lb.md)),
-          row(txt.hc, txt.hcSub, seg(HC_MODES, hcMode, props.setHcMode, lb.hc)),
-          row(txt.scroll, current === 'mono' ? txt.scrollHintMono : txt.scrollSub, seg(SCROLL_MODES, scrollMode, props.setScrollMode, lb.scroll)),
-          row(txt.control, txt.controlSub, seg(CONTROL_MODES, controlMode, props.setControlMode, lb.control)),
+          row('md', txt.md, txt.mdSub, seg(MD_MODES, mdMode, props.setMdMode, lb.md, rowId('md'))),
+          row('hc', txt.hc, txt.hcSub, seg(HC_MODES, hcMode, props.setHcMode, lb.hc, rowId('hc'))),
+          row('scroll', txt.scroll, current === 'mono' ? txt.scrollHintMono : txt.scrollSub, seg(SCROLL_MODES, scrollMode, props.setScrollMode, lb.scroll, rowId('scroll'), current === 'mono')),
+          row('control', txt.control, txt.controlSub, seg(CONTROL_MODES, controlMode, props.setControlMode, lb.control, rowId('control'), current === 'mono')),
         ),
       )
     }

package/docs/DESIGN.md

@@ -42,6 +42,20 @@
 旧写法把 `-0.020×0.6` 夹成 `-0.004`，深色导轨与画布只剩 ΔE 0.49 —— 边界直接消失，
 而同一档在浅色侧是 2.10。现在两侧都是 1.9–2.1，同一个档位在明暗两模式下强度一致。
 
+## 当前标定值（真源：`client.js`）
+
+> 下面各节的推演过程保留原样（它们是当时的推理轨迹），但**具体数值以本表为准**。
+> 2026-10-22 视觉审计发现旧表格仍写着 1.8 / 2.6 与「中性 / 跟随 / 浓一些」，与实现已不一致。
+
+| 档位（UI 文案） | id | textScale | paperScale | textLift |
+|---|---|---|---|---|
+| 静 | `neutral` | 1 | 1 | 0 |
+| **标准（默认）** | `tinted` | 3.0 | 2.4 | +0.055 |
+| 浓 | `deep` | 4.6 | 3.6 | +0.085 |
+
+高对比档（`HC_MODES`，默认关）把文字下限整体抬到正文 ≥15 / 次文 ≥9 / 三级 ≥7 / 链接 ≥7，
+并把求解器位移上限从 0.13 放宽到 0.30（低档位下 4.6 → 7 需要 ΔL≈0.2，原上限够不着）。
+
 ## 文字着色
 
 正文原来只给 0.004 的色度（近中性），视觉上就是「黑字 / 白字」。现在有第三行「文字着色」，

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-theme-palette",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "DSH 主题配色：4 套配色 × 明暗两模式，OKLCH 色域安全重建 + 真实承载面对比度求解，可调强度与面板表面。",
   "type": "module",
   "main": "index.js",