dsh-happy-reader 0.2.7 → 0.3.1

package/lib/client.js

@@ -1,27 +1,18 @@
-// dsh-happy-reader（Happy Reader）—— 浏览器半边
+// dsh-happy-reader（Happy Reader）—— 浏览器半边（官方客户端插件包格式：
+// __ModuleLoader__.load({ id: 包名, factory })，factory 导出 { inject: ['slots'], apply }）。
 //
-// 九项功能：
-//   ① 隐藏输入区（composer）
-//   ② 隐藏上边栏（会话标题栏；最上方的系统窗口标题条是系统窗口控制区，未触碰）
-//   ③ 字号 10–40px（10–22 与官方设置直连，超出部分用缩放层补齐；代码块内容随之同步缩放）
-//   ④ 内容宽度（官方范围内与官方手柄同键同步；超出官方钳制上限时扩展，拖手柄即交还）
-//   ⑤ 字体选择（正文字体·中文/西文分设 + 代码字体，只列出本机已装字体）
-//   ⑥ 全屏（网页全屏 API；Esc 或再点开关退出，状态与真实全屏双向同步）
-//   ⑦ 行距 / 字距（面板最下方；1.0× / 0px 即官方原样）
-//   ⑧ 面板可拖动 / 可拉拽高度（双击标题栏复位为自动布局；位置与高度都会记住）
-//   ⑨ 复制为 Markdown（选中消息内容复制时，公式还原为 LaTeX 源码、代码转围栏等）
+// 功能：隐藏输入区/上边栏、字号 10–40（10–22 直连官方，超出缩放补齐）、内容宽度、
+// 字体（中英分设 + 官方正文/代码/终端角色镜像）、全屏、行距/字距、
+// 面板拖动/拉高、复制为 Markdown。
 //
-// 设计要点（细节见各段代码注释）：
-//   · 隐藏输入区必须用 height:0 而非 display:none —— 官方滚动锚定依赖该元素几何
-//   · <style> 的 disabled 一律在挂载后设置（未挂入文档时设置会被静默丢弃，CSSOM 行为）
-//   · 中英分字用 @font-face(local()+unicode-range) 按区间硬分区；三处字体全"默认"时覆盖层整表停用
-//   · 字体覆盖层依赖官方主题排印 token，主题可能稍后才就绪 → 轻量定时器稍后补建
-//   · 热重载：DSH 监视插件文件变化会再次执行本客户端，重建前须先拆旧实例（见 apply 开头）
-//   · 选区复制（功能⑨）：公式还原读 KaTeX 的 annotation 源码出口（与官方 copy-tex 同源）；
-//     标签→Markdown 映射由 vendored turndown + 官方 gfm 插件承担（均 MIT，逐字内联于文件尾）
+// 关键约束：
+//   · 隐藏输入区用 height:0（官方滚动锚定依赖几何），不用 display:none
+//   · <style>.disabled 必须挂载后再设（未连接时设置会被 CSSOM 静默丢弃）
+//   · 文本 UI 只走官方 shell.overlay / settings.general.item 槽位、locale 与主题 token
+//   · 官方字号/字体走 theme.setFontSize / setFontFamily 角色接口；中英分字用
+//     @font-face(local()+unicode-range) 补官方单一字族表达不了的部分
+//   · 选区复制：KaTeX annotation 还原公式，turndown + gfm 生成 Markdown（文件尾 vendored）
 //
-// 本文件采用官方客户端插件包格式：外壳加载时全局 __ModuleLoader__ 已就绪，
-// 登记 { id: 包名, factory }；factory 在插件挂载时执行，导出的 apply 即插件本体。
 window.__ModuleLoader__.load({
   id: 'dsh-happy-reader',
   factory: (require) => {
@@ -29,7 +20,9 @@ window.__ModuleLoader__.load({
     var exports = module.exports
 
     // ── 常量 ────────────────────────────────────────────────────────────
-    const VERSION = '0.2.7'
+    const VERSION = '0.3.1'
+    const INSTANCE_TOKEN = {}
+    const GROUPS_VERSION = 3
     const STATE_KEY = 'dsh.reader-boost.v1'
     const FAB_ID = 'dsrb-fab'
     const PANEL_ID = 'dsrb-panel'
@@ -41,7 +34,7 @@ window.__ModuleLoader__.load({
     const FS_STYLE_ID = 'dsrb-fullscreen'
     const FAB_SIZE = 40
     const PANEL_WIDTH = 280
-    const PANEL_MAX_H = 480 // 面板高度锁：新增选项不再增高面板，超出部分由内部滚动查看
+    const PANEL_MAX_H = 560 // 面板高度锁：新增选项不再增高面板，超出部分由内部滚动查看
     const PANEL_MIN_H = 180 // 面板拉拽高度的下限
     const BORDER_Y = 2 // 面板上下边框各 1px（外框高 = 内容高 + 2，定位预算统一用它）
 
@@ -54,6 +47,12 @@ window.__ModuleLoader__.load({
     const FONT_MIN = 10
     const FONT_MAX = 40
     const FONT_OFFICIAL_MAX = 22
+    // 官方代码字号范围（0.2.2 起 theme.setFontSize('code') 只接受 10–16 的整数）
+    const CODE_FONT_MIN = 10
+    const CODE_FONT_MAX = 16
+    // 官方终端字号范围（theme.setFontSize('terminal') 10–20）
+    const TERMINAL_FONT_MIN = 10
+    const TERMINAL_FONT_MAX = 20
 
     // 行距倍率与字距范围（0.1 步进；边界值 = 完全还原官方排版）
     const LINEH_MIN = 1
@@ -66,105 +65,145 @@ window.__ModuleLoader__.load({
 
     // ── 样式 ────────────────────────────────────────────────────────────
     const CSS = `
-.dsrb-fab{position:fixed;z-index:9999;width:40px;height:40px;border-radius:12px;
-  border:1px solid rgba(128,128,128,.35);background:rgba(28,28,30,.85);color:#f5f5f5;
+.dsrb-slot-host{pointer-events:none}
+/* 表单控件默认不继承字体：统一继承宿主/面板字体 */
+.dsrb-panel button,.dsrb-panel input,.dsrb-panel select,.dsrb-settings select{font-family:inherit}
+/* 旧外壳无官方 overlay 层时的回退宿主：自成视口层，保证不被页面内容盖住 */
+.dsrb-slot-host.dsrb-standalone{position:fixed;inset:0;z-index:9999;pointer-events:none}
+.dsrb-fab{position:fixed;box-sizing:border-box;width:40px;height:40px;border-radius:12px;
+  border:1px solid var(--dsw-alias-border-l3,rgba(128,128,128,.35));
+  background:var(--dsw-alias-button-floating-fill,rgba(28,28,30,.85));
+  color:var(--dsw-alias-label-primary,#f5f5f5);
   font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;align-items:center;
-  justify-content:center;cursor:grab;user-select:none;-webkit-user-select:none;
-  box-shadow:0 4px 14px rgba(0,0,0,.28);backdrop-filter:blur(6px)}
+  justify-content:center;cursor:grab;user-select:none;-webkit-user-select:none;pointer-events:auto;
+  box-shadow:var(--dsw-elevation-panel,0 4px 14px rgba(0,0,0,.28));backdrop-filter:blur(6px)}
+.dsrb-fab:hover{background:var(--dsw-alias-button-floating-hover,rgba(40,40,42,.92))}
 .dsrb-fab:active{cursor:grabbing}
-.dsrb-panel{position:fixed;z-index:9999;width:${PANEL_WIDTH}px;padding:0;border-radius:12px;
-  max-height:calc(100vh - 18px);display:flex;flex-direction:column;overflow:hidden;
-  border:1px solid rgba(128,128,128,.3);background:rgba(28,28,30,.96);color:#ececec;
+.dsrb-panel{position:fixed;width:${PANEL_WIDTH}px;padding:0;border-radius:var(--dsw-radius-lg,16px);
+  max-height:calc(100vh - 18px);display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;
+  border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));
+  background:var(--dsw-specific-menu,var(--dsw-alias-bg-layer-2,rgba(28,28,30,.96)));
+  color:var(--dsw-alias-label-primary,#ececec);
   font:13px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
-  box-shadow:0 8px 28px rgba(0,0,0,.38);backdrop-filter:blur(8px)}
+  box-shadow:var(--dsw-elevation-prominent,var(--dsw-elevation-panel,0 8px 28px rgba(0,0,0,.38)));backdrop-filter:blur(8px)}
 /* 横向内边距放在滚动区：面板零内边距，滚动条才能贴住面板右缘 */
 .dsrb-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px}
 .dsrb-body::-webkit-scrollbar{width:8px}
-.dsrb-body::-webkit-scrollbar-thumb{background:rgba(128,128,128,0);border-radius:4px;transition:background .15s}
-.dsrb-body:hover::-webkit-scrollbar-thumb{background:rgba(128,128,128,.45)}
-.dsrb-body:hover::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,.65)}
+.dsrb-body::-webkit-scrollbar-thumb{background:transparent;border-radius:4px;transition:background .15s}
+.dsrb-body:hover::-webkit-scrollbar-thumb{background:var(--dsw-alias-scrollbar-bg-l2,rgba(128,128,128,.45))}
+.dsrb-body:hover::-webkit-scrollbar-thumb:hover{background:var(--dsw-alias-scrollbar-hover-l2,rgba(128,128,128,.65))}
 .dsrb-body::-webkit-scrollbar-track{background:transparent}
+@media (hover:none){.dsrb-body::-webkit-scrollbar-thumb{background:var(--dsw-alias-scrollbar-bg-l2,rgba(128,128,128,.45))}}
 .dsrb-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px;cursor:grab}
 .dsrb-head:active{cursor:grabbing}
-.dsrb-resize{flex:none;height:10px;cursor:ns-resize;border-radius:0 0 12px 12px}
-.dsrb-resize-top{flex:none;height:10px;cursor:ns-resize;border-radius:12px 12px 0 0}
-.dsrb-resize:hover,.dsrb-resize-top:hover{background:rgba(255,255,255,.07)}
-.dsrb-head h4{margin:0;font-size:13px;font-weight:600}
-.dsrb-headHint{font-size:11.5px;color:#8d8d8d;margin-left:auto;margin-right:8px;white-space:nowrap}
-.dsrb-x{width:22px;height:22px;padding:0;border-radius:6px;border:1px solid rgba(128,128,128,.3);
-  background:rgba(255,255,255,.06);color:#ddd;font-size:13px;line-height:1;cursor:pointer}
-.dsrb-x:hover{background:rgba(255,255,255,.16)}
+.dsrb-resize{flex:none;height:10px;cursor:ns-resize;border-radius:0 0 var(--dsw-radius-lg,16px) var(--dsw-radius-lg,16px)}
+.dsrb-resize-top{flex:none;height:10px;cursor:ns-resize;border-radius:var(--dsw-radius-lg,16px) var(--dsw-radius-lg,16px) 0 0}
+.dsrb-resize:hover,.dsrb-resize-top:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.07))}
+.dsrb-head h4{margin:0;font-size:14px;font-weight:600}
+.dsrb-headHint{font-size:11.5px;color:var(--dsw-alias-label-tertiary,#8d8d8d);margin-left:auto;margin-right:8px;white-space:nowrap}
+.dsrb-x{width:22px;height:22px;padding:0;border-radius:6px;
+  border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));
+  background:transparent;color:var(--dsw-alias-label-secondary,#ddd);font-size:13px;line-height:1;cursor:pointer}
+.dsrb-x:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.16))}
 .dsrb-row{display:flex;align-items:flex-start;gap:10px;padding:8px 0;
-  border-top:1px solid rgba(128,128,128,.14)}
-.dsrb-head+.dsrb-row{border-top:0}
+  border-top:1px solid var(--dsw-alias-border-l1,rgba(128,128,128,.14))}
 .dsrb-row-click{cursor:pointer}
-.dsrb-row-click:hover{background:rgba(255,255,255,.045)}
+.dsrb-row-click:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.045))}
 .dsrb-rowMain{flex:1;min-width:0}
 .dsrb-rowTitle{font-weight:600}
-.dsrb-rowTitle b{color:#fff;font-weight:600}
-.dsrb-rowSub{color:#9a9a9a;font-size:12px;margin-top:2px}
-.dsrb-switch{position:relative;flex:none;width:34px;height:20px;margin-top:1px;cursor:pointer}
+.dsrb-rowTitle b{color:var(--dsw-alias-label-primary,#fff);font-weight:600}
+.dsrb-rowSub{color:var(--dsw-alias-label-secondary,#9a9a9a);font-size:12px;margin-top:2px}
+/* 开关：对齐官方 role=switch 视觉（36×20、2px 内边距、16px 滑块、16px 行程） */
+.dsrb-switch{position:relative;flex:none;width:36px;height:20px;padding:2px;box-sizing:border-box;
+  margin-top:1px;cursor:pointer;border-radius:999px;background:var(--dsw-alias-border-l3,rgba(120,120,120,.35));
+  transition:background .12s}
 .dsrb-switch input{position:absolute;inset:0;opacity:0;margin:0;pointer-events:none}
-.dsrb-switch span{position:absolute;inset:0;border-radius:10px;background:rgba(120,120,120,.35);
-  transition:background .15s;pointer-events:none}
+.dsrb-switch span{position:absolute;inset:0;border-radius:999px;pointer-events:none}
 .dsrb-switch span:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
-  border-radius:50%;background:#fff;transition:transform .15s}
-.dsrb-switch input:checked+span{background:#2f7af0}
-.dsrb-switch input:checked+span:after{transform:translateX(14px)}
+  border-radius:50%;background:var(--dsw-alias-switch-thumb,#fff);transition:transform .12s}
+.dsrb-switch input:checked+span:after{transform:translateX(16px);background:var(--dsw-alias-label-primary-foreground,#fff)}
+.dsrb-switch:has(input:checked){background:var(--dsw-alias-brand-primary,#2f7af0)}
+.dsrb-switch:has(input:focus-visible){outline:var(--dsw-focus-ring-width,2px) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#2f7af0));outline-offset:2px}
 .dsrb-stepper{flex:none;display:flex;gap:6px;align-items:center}
-.dsrb-stepper button{width:28px;height:28px;border-radius:8px;border:1px solid rgba(128,128,128,.3);
-  background:rgba(255,255,255,.06);color:#eee;font-size:14px;line-height:1;cursor:pointer}
-.dsrb-stepper button:hover{background:rgba(255,255,255,.14)}
+.dsrb-stepper button{width:30px;height:30px;border-radius:8px;
+  border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));background:transparent;
+  color:var(--dsw-alias-label-primary,#eee);font-size:14px;line-height:1;cursor:pointer}
+.dsrb-stepper button:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.14))}
 .dsrb-stepper button:disabled{opacity:.45;cursor:default}
 .dsrb-widthRow{display:flex;align-items:center;gap:8px;margin-top:7px}
-.dsrb-widthRow input[type=range]{flex:1;min-width:0}
+.dsrb-widthRow input[type=range]{flex:1;min-width:0;accent-color:var(--dsw-alias-brand-primary,#2f7af0)}
 .dsrb-widthRow button{flex:none;height:24px;padding:0 10px;border-radius:8px;
-  border:1px solid rgba(128,128,128,.3);background:rgba(255,255,255,.06);color:#eee;
-  font-size:12px;cursor:pointer}
-.dsrb-widthRow button:hover{background:rgba(255,255,255,.14)}
+  border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));background:transparent;
+  color:var(--dsw-alias-label-primary,#eee);font-size:12px;cursor:pointer}
+.dsrb-widthRow button:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.14))}
 .dsrb-widthRow button:disabled{opacity:.45;cursor:default}
-.dsrb-select{width:100%;margin-top:7px;height:26px;padding:0 6px;border-radius:8px;
-  border:1px solid rgba(128,128,128,.3);background:rgba(255,255,255,.06);color:#eee;
+.dsrb-select{box-sizing:border-box;width:100%;margin-top:7px;height:30px;padding:0 8px;border-radius:8px;
+  border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));
+  background:var(--dsw-alias-bg-layer-2,rgba(255,255,255,.06));color:var(--dsw-alias-label-primary,#eee);
   font-size:12px;cursor:pointer}
-.dsrb-select:focus{outline:none;border-color:#2f7af0}
-.dsrb-select option{background:#1c1c1e;color:#eee}
+.dsrb-select:focus{outline:2px solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#2f7af0));outline-offset:-2px}
+.dsrb-select option{background:var(--dsw-alias-bg-layer-3,#1c1c1e);color:var(--dsw-alias-label-primary,#eee)}
 .dsrb-pair{display:flex;gap:8px;margin-top:7px}
 .dsrb-pairCol{flex:1;min-width:0}
-.dsrb-mini{font-size:11px;color:#9a9a9a;margin-bottom:3px}
+.dsrb-mini{font-size:11px;color:var(--dsw-alias-label-secondary,#9a9a9a);margin-bottom:3px}
 .dsrb-pairCol .dsrb-select{margin-top:0}
-/* 代码块随字号缩放（v0.2.7）：官方代码块 token 固定 11px 不随字号，按官方标题同款增量写法
-   补齐；14px 时计算值与官方原值一致（零覆盖痕迹）。:root body 提权以压过官方主题对同名
-   token 的任何 body/root 重声明；字族仍引用官方变量，字体选择链路不变 */
-:root body{--dsw-font-markdown-code-block:calc(11px + var(--dsh-content-font-delta))/calc(19px + var(--dsh-content-font-delta)) var(--ds-font-family-code);--dsw-font-markdown-code-block-small:calc(11px + var(--dsh-content-font-delta))/calc(16px + var(--dsh-content-font-delta)) var(--ds-font-family-code)}
+/* 字体设置折叠组（正文字体 / 代码字体 / 终端字体）：标题行整条可点，chevron 指示展开态 */
+.dsrb-group{display:flex;flex-direction:column;margin:6px 0;border:1px solid var(--dsw-alias-settings-card-stroke,var(--dsw-alias-border-l2,rgba(128,128,128,.22)));
+  border-radius:var(--dsw-radius-md,12px);overflow:hidden;
+  background:var(--dsw-alias-settings-card-fill,var(--dsw-alias-bg-layer-1,#232324));
+  background:color-mix(in srgb,var(--dsw-alias-settings-card-fill,var(--dsw-alias-bg-layer-1,#232324)) 78%,transparent)}
+.dsrb-groupHead{display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;padding:10px 12px;border:0;background:transparent;
+  color:inherit;font:inherit;text-align:left;cursor:pointer}
+.dsrb-groupHead:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.045))}
+.dsrb-groupHead:focus-visible,.dsrb-fab:focus-visible,.dsrb-x:focus-visible,.dsrb-stepper button:focus-visible,.dsrb-widthRow button:focus-visible{
+  outline:var(--dsw-focus-ring-width,2px) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#2f7af0));outline-offset:-2px}
+.dsrb-groupBody .dsrb-row{padding:8px 12px}
+.dsrb-groupTitle{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}
+.dsrb-groupSub{flex:none;max-width:55%;overflow:hidden;text-overflow:ellipsis;color:var(--dsw-alias-label-secondary,#9a9a9a);font-size:12px;white-space:nowrap}
+.dsrb-chevron{flex:none;width:20px;height:20px;position:relative;color:var(--dsw-alias-label-tertiary,#8d8d8d)}
+.dsrb-chevron:before{content:'';position:absolute;left:5px;top:5px;width:6px;height:6px;
+  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
+  transform:rotate(45deg);transition:transform var(--ds-transition-duration-fast,.1s) var(--ds-ease-in-out,ease)}
+.dsrb-groupHead[aria-expanded="true"] .dsrb-chevron:before{transform:rotate(-135deg);top:8px}
+.dsrb-groupBody{display:flex;flex-direction:column}
+.dsrb-input{width:100%;margin-top:7px;height:30px;padding:0 8px;box-sizing:border-box;border-radius:8px;
+  border:1px solid var(--dsw-alias-border-l2,rgba(128,128,128,.3));
+  background:var(--dsw-alias-bg-layer-2,rgba(255,255,255,.06));color:var(--dsw-alias-label-primary,#eee);
+  font-size:12px}
+.dsrb-input:focus{outline:2px solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#2f7af0));outline-offset:-2px}
+/* 官方「通用设置」内的字体行（settings.general.item）：沿用官方行距/字号/分隔线规格 */
+.dsrb-settings{width:100%}
+.dsrb-set-row{padding:16px 0;border-bottom:.5px solid var(--dsw-alias-border-l2);display:flex;flex-direction:column;gap:8px}
+.dsrb-set-title{color:var(--dsw-alias-label-primary);font-size:14px;font-weight:400;line-height:22px}
+.dsrb-set-desc{color:var(--dsw-alias-label-tertiary);font-size:12px;font-weight:400;line-height:18px}
+.dsrb-set-select{box-sizing:border-box;width:100%;height:36px;padding:0 10px;border-radius:var(--dsw-radius-md,12px);
+  border:1px solid transparent;background:var(--dsw-alias-bg-layer-1,var(--dsw-alias-bg-module-platform,rgba(128,128,128,.12)));
+  color:var(--dsw-alias-label-primary);font-size:14px;line-height:1.4;font-family:inherit;cursor:pointer}
+.dsrb-set-select:focus{outline:2px solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary,#2f7af0));outline-offset:-2px}
+.dsrb-set-select option{background:var(--dsw-alias-bg-layer-3,#1c1c1e);color:var(--dsw-alias-label-primary,#eee)}
 `
     // 隐藏输入区（关键：height:0 而非 display:none —— 官方滚动锚定依赖该元素的几何信息）
     const HIDE_CSS = '[data-composer-seat]{height:0!important;min-height:0!important;overflow:hidden!important}'
-    // 隐藏上边栏（会话标题栏）—— 正向判据：官方 "conversation.header" 槽位宿主带
-    // data-conversation-header-leading，全应用仅此一处；其余 header[data-window-drag]
-    // 各带关键控件（插件页标题含"添加插件"按钮、嵌入页头含唯一返回按钮），不得误伤
-    // （v0.2.6 修：旧写法"匹配全部再排除对话框"曾把插件页标题整条隐藏，安装入口消失）。
-    // 对话框排除条款保留：弹出层内永不隐藏（防锁死返回，v0.10.4）。
+    // 隐藏上边栏：正向判据（官方 conversation.header 槽位宿主带 data-conversation-header-leading，
+    // 全应用仅此一处）；排除对话框内，避免误伤插件页/嵌入页的头部。
     const HIDE_TOP_CSS = 'header[data-window-drag]:has(> [data-conversation-header-leading]):not([role="dialog"] *){display:none!important}'
     // 字号缩放层（!important 样式表仅在需要缩放时启用；官方内联值原样保留在其下）
     const FONT_CSS = `body{--dsh-content-font-size:calc(var(--dsrb-font-base,14px)*var(--dsrb-font-scale,1))!important}`
-    // 全屏补偿层：不归零官方定位变量 —— --dsh-windows-titlebar-height（=40px）是
-    // "开合/新对话"悬浮按钮与"应用/编辑"菜单的定位基准，归零会裁掉它们的上半截。
-    // 改为逐项覆盖：frame 顶部预留条清零、侧栏列自留该变量、收态归零内容圆角、
-    // 全屏隐藏菜单；规则由 html[data-dsrb-fullscreen] 门控，退出全屏即完全还原。
-    // 注：.BynINW_* 为应用构建期类名（随应用更新可能变；失效即表现为全屏残留，
-    // 按新构建重新对齐即可——无更稳定锚点可用，属原则②下已接受的取舍）。
+    // 全屏补偿：官方 40px 窗口预留条在网页全屏下仍占位，需逐项清零；不能归零
+    // --dsh-windows-titlebar-height（悬浮按钮/菜单的定位基准）。.mP3x-q_* 是构建期类名，
+    // 无稳定锚点，升级后按新构建重新对齐；规则由 html[data-dsrb-fullscreen] 门控。
     const FS_CSS = [
       // 镜像官方 html[data-windows-titlebar][data-fullscreen]：overlay 顶距 20px、chrome 顶距 0
       'html[data-windows-titlebar][data-dsrb-fullscreen]{--dsh-frame-overlay-top:20px;--dsh-frame-chrome-top:0px}',
       // frame 的 40px 预留条清零 → 两侧列内容顶到屏幕最上缘
-      'html[data-dsrb-fullscreen] .BynINW_frame{padding-top:0!important}',
-      'html[data-dsrb-fullscreen] .BynINW_frame::before{height:0!important}',
+      'html[data-dsrb-fullscreen] .mP3x-q_frame{padding-top:0!important}',
+      'html[data-dsrb-fullscreen] .mP3x-q_frame::before{height:0!important}',
       // 收起态：内容列左上圆角归零（收起时圆角在 (0,0) 露出 frame 底色成为缺口）
-      'html[data-dsrb-fullscreen]:has([data-sidebar-collapsed=true]) .BynINW_centerCol{border-radius:0!important}',
+      'html[data-dsrb-fullscreen]:has([data-sidebar-collapsed=true]) .mP3x-q_centerCol{border-radius:0!important}',
       // 展开态：侧栏列自留 40px 顶部，悬浮按钮下方内容位置与窗口态保持一致
-      'html[data-dsrb-fullscreen] .BynINW_sidebarCol{padding-top:var(--dsh-windows-titlebar-height)}',
+      'html[data-dsrb-fullscreen] .mP3x-q_sidebarCol{padding-top:var(--dsh-windows-titlebar-height)}',
       // 侧栏拖拽手柄随之顶到 0（其 top 同样以 var 为基准）
-      'html[data-dsrb-fullscreen] .BynINW_handle{top:0!important}',
+      'html[data-dsrb-fullscreen] .mP3x-q_handle{top:0!important}',
       // 全屏隐藏 preload"应用/编辑"菜单（退出全屏即恢复；无键盘通道，不影响 Esc 退出）
       'html[data-dsrb-fullscreen] [data-windows-menu]{display:none!important}'
     ].join('')
@@ -177,7 +216,8 @@ window.__ModuleLoader__.load({
     function readState() {
       try {
         const raw = localStorage.getItem(STATE_KEY)
-        return raw ? JSON.parse(raw) : {}
+        const value = raw ? JSON.parse(raw) : null
+        return value && typeof value === 'object' && !Array.isArray(value) ? value : {}
       } catch {
         return {}
       }
@@ -238,15 +278,16 @@ window.__ModuleLoader__.load({
       }
       return out
     }
+    // 代码字体候选（仅列本机已装；选中后经官方 setFontFamily('code') 写入，不再自建 @font-face）
     const CODE_FONTS = [
-      { id: 'consolas', label: 'Consolas', css: 'Consolas', name: 'Consolas' },
-      { id: 'cascadia', label: 'Cascadia Code', css: '"Cascadia Code"', name: 'Cascadia Code' },
-      { id: 'cascadiamono', label: 'Cascadia Mono', css: '"Cascadia Mono"', name: 'Cascadia Mono' },
-      { id: 'courier', label: 'Courier New', css: '"Courier New"', name: 'Courier New' },
-      { id: 'nsimsun', label: '新宋体', css: '"NSimSun"', name: 'NSimSun' },
-      { id: 'firacode', label: 'Fira Code', css: '"Fira Code"', name: 'Fira Code' },
-      { id: 'jetbrains', label: 'JetBrains Mono', css: '"JetBrains Mono"', name: 'JetBrains Mono' },
-      { id: 'sourcecode', label: 'Source Code Pro', css: '"Source Code Pro"', name: 'Source Code Pro' },
+      { id: 'consolas', label: 'Consolas', name: 'Consolas' },
+      { id: 'cascadia', label: 'Cascadia Code', name: 'Cascadia Code' },
+      { id: 'cascadiamono', label: 'Cascadia Mono', name: 'Cascadia Mono' },
+      { id: 'courier', label: 'Courier New', name: 'Courier New' },
+      { id: 'nsimsun', label: '新宋体', name: 'NSimSun' },
+      { id: 'firacode', label: 'Fira Code', name: 'Fira Code' },
+      { id: 'jetbrains', label: 'JetBrains Mono', name: 'JetBrains Mono' },
+      { id: 'sourcecode', label: 'Source Code Pro', name: 'Source Code Pro' },
     ]
     let fontDetectCtx = null
     // 字体可用性检测：canvas 字宽比对（与三套通用字族任一不同 = 本机已装）。
@@ -271,6 +312,13 @@ window.__ModuleLoader__.load({
         return true
       }
     }
+    /** 字体候选与官方值首个名字是否同一字体（英文名 / 本地化名都认）。 */
+    function fontMatches(f, first) {
+      const want = String(first || '').toLowerCase()
+      if (!want) return false
+      if (f.name.toLowerCase() === want) return true
+      return (f.names || []).some((n) => String(n).toLowerCase() === want)
+    }
     function fontChoice(list, id) {
       if (!id) return null
       for (const f of list) if (f.id === id) return f
@@ -279,6 +327,7 @@ window.__ModuleLoader__.load({
     // 官方把整套排印 token（--dsw-font-* / --ds-font-*）定义在 :root 与 body 上。
     // 成功解析一次后缓存；官方主题尚未就绪时返回 null（调用方靠定时器稍后重试）。
     let themeFontDecls = null
+    let lastThemePreference
     function readThemeFontDecls() {
       if (themeFontDecls) return themeFontDecls
       const decls = new Map()
@@ -301,51 +350,35 @@ window.__ModuleLoader__.load({
       if (!decls) return null
       const cjk = fontChoice(TEXT_FONTS_CJK, state.textFontCjk)
       const lat = fontChoice(TEXT_FONTS_LATIN, state.textFontLatin)
-      const code = fontChoice(CODE_FONTS, state.codeFont)
       const lineH = typeof state.lineHeight === 'number' ? state.lineHeight : null
       const letterSp = typeof state.letterSpacing === 'number' ? state.letterSpacing : null
-      if (!cjk && !lat && !code && lineH === null && letterSp === null) return null
+      if (!cjk && !lat && lineH === null && letterSp === null) return null
       const offText = decls.get('--dsw-font-family')
-      const offCode = decls.get('--ds-font-family-code')
       // 虚拟字族按 西文→中文 排序：引号/破折号等共享区间由西文面优先接住
       const faces = []
       const famNames = []
       if (lat) { faces.push(faceCss('dsrb-text-latin', lat, LATIN_RANGE)); famNames.push('"dsrb-text-latin"') }
       if (cjk) { faces.push(faceCss('dsrb-text-cjk', cjk, CJK_RANGE)); famNames.push('"dsrb-text-cjk"') }
       const fam = famNames.length ? 'var(--dsrb-family)' : offText
-      const cod = code ? 'var(--dsrb-code)' : offCode
       const parts = []
       // 虚拟字族在前（按区间分流）；官方原栈殿后兜底：区间外字符与缺字逐字回退
       if (famNames.length) parts.push('--dsrb-family:' + famNames.join(', ') + ', ' + offText)
-      if (code) parts.push('--dsrb-code:' + code.css + ', ' + offCode)
       if (famNames.length) parts.push('--dsw-font-family:' + fam)
-      if (code) parts.push('--ds-font-family-code:' + cod)
       if (famNames.length) parts.push('font-family:var(--dsrb-family)') // 无自身字族的后代（如用户气泡正文）由继承拿到
       for (const [name, value] of decls) {
         if (name === '--dsw-font-family' || name === '--ds-font-family-code') continue
         let next = value
         if (famNames.length && next.indexOf('var(--dsw-font-family)') !== -1) next = next.split('var(--dsw-font-family)').join(fam)
-        if (code && next.indexOf('var(--ds-font-family-code)') !== -1) next = next.split('var(--ds-font-family-code)').join(cod)
-        // 代码块类 token 并入字号增量（v0.2.7；官方原版固定 11px 不随字号，基础层已有同式
-        // 兜底覆盖，这里只在因字族/行距本就需重发时带上，维持"非必要不重发"）。先换形
-        //（11px→calc(11px + delta)）再走下方行距倍率，与正文 calc 形同一条放大路径。
-        if (
-          (name === '--dsw-font-markdown-code-block' || name === '--dsw-font-markdown-code-block-small') &&
-          (next !== value || lineH !== null)
-        ) {
-          next = next
-            .replace(/^(\d+(?:\.\d+)?)px/, 'calc($1px + var(--dsh-content-font-delta))')
-            .replace(/(\/\s*)(\d+(?:\.\d+)?)px/, (m, lead, n) => lead + 'calc(' + n + 'px + var(--dsh-content-font-delta))')
-        }
         // 行距：官方行高 token 有两种真实形态（简写里的 "/ 行高" 段，均出自 asar 实测）——
-        //   正文/标题："/ calc(Npx + var(--dsh-content-font-delta))"（增量由官方自管、随字号缩放）
-        //   代码类：  "/ Npx"（纯 px，不随字号）
-        // 两种都按倍率放大；calc 形先行（其产物不含 "/数字px" 段，两步互不误伤）
+        //   正文/标题："/ calc(Npx + var(--dsh-content-font-delta))"
+        //   代码类（0.2.2 起）："/ calc(Npx + var(--dsh-code-font-delta))"
+        //   其余旧式："/ Npx"（纯 px）
+        // 增量函数的变量名按 --dsh-*-font-delta* 泛化匹配；calc 形先行（其产物不含 "/数字px" 段）。
         if (lineH !== null) {
           next = next
             .replace(
-              /(\/\s*)calc\((\d+(?:\.\d+)?)px \+ var\(--dsh-content-font-delta\)\)/g,
-              (m, lead, n) => lead + 'calc((' + n + 'px + var(--dsh-content-font-delta)) * ' + lineH + ')',
+              /(\/\s*)calc\((\d+(?:\.\d+)?)px \+ var\(--dsh-[a-z0-9-]*font-delta[a-z0-9-]*\)\)/g,
+              (m, lead, n) => lead + 'calc((' + n + 'px + var(--dsh-' + (m.includes('code-font-delta') ? 'code' : 'content') + '-font-delta' + (m.includes('font-delta-secondary') ? '-secondary' : '') + ')) * ' + lineH + ')',
             )
             .replace(/(\/\s*)(\d+(?:\.\d+)?)px/g, (m, lead, n) => lead + Math.round(Number(n) * lineH * 2) / 2 + 'px')
         }
@@ -379,53 +412,71 @@ window.__ModuleLoader__.load({
       if (!container) return null
       return { container, target: container.parentElement ?? container, column: container.offsetWidth }
     }
-    /** 官方手柄拖动优先：把一个宽度状态应用到页面（state.widthPx 为准）。 */
-    function applyWidthState() {
+    /** 记录“当前宽度是插件扩展”这一事实；切换时落盘，供下次启动区分扩展与官方镜像。 */
+    function markWidthExt(on) {
+      if (state.widthExt === on) return
+      state.widthExt = on
+      writeState({ widthExt: on })
+    }
+    /** 官方手柄拖动优先：把一个宽度状态应用到页面（state.widthPx 为准）。
+     *  clearAuto：仅在用户主动选"自动"时清除官方键；启动/外部变化不动官方设置。 */
+    function applyWidthState(clearAuto) {
       const t = widthTargets()
       if (!t) return
       const { container, target, column } = t
+      if (!(column > 0)) return // 会话尚未排版：无可靠列宽，先不动官方值
       const omax = officialMaxFor(column)
       const cap = extCapFor(column)
       const px = state.widthPx
       if (px == null) {
-        localStorage.removeItem(WIDTH_PREF_KEY)
-        target.style.removeProperty('--dsh-chat-user-width')
+        if (clearAuto) {
+          localStorage.removeItem(WIDTH_PREF_KEY)
+          target.style.removeProperty('--dsh-chat-user-width')
+        }
         container.style.removeProperty('--dsh-chat-content-width')
+        markWidthExt(false)
       } else if (px <= omax) {
         container.style.removeProperty('--dsh-chat-content-width')
         localStorage.setItem(WIDTH_PREF_KEY, String(px))
         target.style.setProperty('--dsh-chat-user-width', px + 'px')
+        markWidthExt(false)
       } else {
         const w = Math.min(px, cap)
         localStorage.setItem(WIDTH_PREF_KEY, String(omax))
         target.style.setProperty('--dsh-chat-user-width', omax + 'px')
         container.style.setProperty('--dsh-chat-content-width', w + 'px')
+        markWidthExt(true)
       }
     }
     function currentWidthInfo() {
       const t = widthTargets()
-      if (!t) return null
+      if (!t || !(t.column > 0)) return null
       const omax = officialMaxFor(t.column)
       const cap = extCapFor(t.column)
       const px = state.widthPx
       const extActive = px != null && px > omax
       let shown
+      let officialPx = null
       if (px != null) shown = extActive ? Math.min(px, cap) : px
       else {
         const raw = getComputedStyle(t.container).getPropertyValue('--dsh-chat-user-width').trim()
-        shown = raw ? Number.parseFloat(raw) : resolveAutoWidth(t.column)
+        officialPx = raw ? Number.parseFloat(raw) : null
+        shown = Number.isFinite(officialPx) ? officialPx : resolveAutoWidth(t.column)
       }
-      return { px: shown, auto: px == null, ext: extActive, column: t.column, min: CONTENT_MIN, max: cap }
+      return { px: shown, auto: px == null && !Number.isFinite(officialPx), ext: extActive, column: t.column, min: CONTENT_MIN, max: cap }
     }
     /** 漂移修复：官方重发布 / 窗口变化后把我们的状态归位（官方手柄拖动中不插手）。 */
     function normalizeWidthDrift() {
       if (officialDragging) return
       const t = widthTargets()
-      if (!t) return
+      if (!t || !(t.column > 0)) return
       const omax = officialMaxFor(t.column)
       const cap = extCapFor(t.column)
       const px = state.widthPx
-      if (px == null) return
+      if (px == null) {
+        markWidthExt(false)
+        return
+      }
       if (px > omax) {
         const w = Math.min(px, cap) + 'px'
         if (t.container.style.getPropertyValue('--dsh-chat-content-width') !== w) {
@@ -438,6 +489,7 @@ window.__ModuleLoader__.load({
         if (t.target.style.getPropertyValue('--dsh-chat-user-width') !== omax + 'px') {
           t.target.style.setProperty('--dsh-chat-user-width', omax + 'px')
         }
+        markWidthExt(true)
       } else {
         if (t.container.style.getPropertyValue('--dsh-chat-content-width')) {
           t.container.style.removeProperty('--dsh-chat-content-width')
@@ -448,13 +500,15 @@ window.__ModuleLoader__.load({
         if (t.target.style.getPropertyValue('--dsh-chat-user-width') !== px + 'px') {
           t.target.style.setProperty('--dsh-chat-user-width', px + 'px')
         }
+        markWidthExt(false)
       }
     }
 
     // ── 字号（官方直连 + 超范围缩放层） ─────────────────────────────────
-    const fontState = { official: null }
+    const fontState = { official: null, code: null, codeFamily: '', textFamily: '', terminal: null, terminalFamily: '' }
     let fontSvc = null
-    let fontSelfWrite = false
+    let roleSizeSupported = false // setFontSize(role, px) 角色形
+    let familySupported = false // setFontFamily(role, value)
     function fallbackBasePx() {
       // 官方把该变量写在 body 内联样式上（见上方常量注释）；主题服务未就绪时的兜底
       const inline = Number.parseFloat(document.body.style.getPropertyValue(CONTENT_FONT_SIZE_VARIABLE))
@@ -472,19 +526,37 @@ window.__ModuleLoader__.load({
       root.style.setProperty('--dsrb-font-scale', String(scale))
       tag.disabled = Math.abs(scale - 1) < 0.001 // 无缩放 → 样式表彻底停用，回到官方原样
     }
-    /** 写官方字号（带自我写入标记，避免 themes/change 回环打架）。 */
-    function writeOfficialFont(px) {
+    /** 调官方角色字号（0.2.2+ 为 role,px；旧版单参仅 text 可用）。 */
+    function officialSetFontSize(role, px) {
       if (!fontSvc || typeof fontSvc.setFontSize !== 'function') return
-      if (fontState.official === px) return
-      fontSelfWrite = true
       try {
-        fontSvc.setFontSize(px)
+        if (fontSvc.setFontSize.length >= 2) fontSvc.setFontSize(role, px)
+        else if (role === 'text') fontSvc.setFontSize(px)
       } catch {
-        // 官方校验拒绝时忽略（理论不可达：调用处已夹在 10–22 内）
+        // 官方校验拒绝：调用处已夹在范围内，静默忽略
       }
-      fontSelfWrite = false
+    }
+    /** 调官方角色字体族：value 为逗号分隔的列表，空串恢复默认栈。 */
+    function officialSetFontFamily(role, value) {
+      if (!fontSvc || typeof fontSvc.setFontFamily !== 'function') return
+      try {
+        fontSvc.setFontFamily(role, value)
+      } catch { /* 官方校验拒绝：静默忽略 */ }
+    }
+    /** 写官方正文字号（仅用户主动调节时调用）。 */
+    function writeOfficialFont(px) {
+      if (fontState.official === px) return
+      officialSetFontSize('text', px)
     }
     // ── 工具 ────────────────────────────────────────────────────────────
+    /** 清空容器：先显式 remove 元素，再兜底 textContent（仿真/真实 DOM 都彻底）。 */
+    function clearChildren(node) {
+      if (!node) return
+      for (const child of [...(node.children || [])]) {
+        try { if (typeof child.remove === 'function') child.remove() } catch { /* 忽略 */ }
+      }
+      node.textContent = ''
+    }
     function el(tag, className, text) {
       const node = document.createElement(tag)
       if (className) node.className = className
@@ -499,16 +571,274 @@ window.__ModuleLoader__.load({
         if (e.target === toggle) return // 键盘空格：走原生（change 监听里统一 apply）
         e.preventDefault()
         toggle.checked = !toggle.checked
+        toggle.setAttribute('aria-checked', toggle.checked ? 'true' : 'false')
         apply()
       })
     }
 
-    // ── 插件本体 ────────────────────────────────────────────────────────
+    // ── 插件本体（官方客户端插件形态：React 槽位 + locale + 主题服务） ──────
+    // 官方指南：UI 通过 slot 贡献 React 组件，不向 document.body 追加应用；
+    // 文案走 Client locale 服务；样式只用 --dsw-alias-* / --dsw-elevation-* token。
+    let React = null
+    try { React = require('react') } catch { React = null }
+
+    const LOCALE_NS = 'dshHappyReader'
+    let activeLocaleNs = LOCALE_NS // 热重载时旧命名空间可能尚未注销：备用命名空间避免复用将失效的字典
+    const TEXTS = {
+      zh: {
+        panelTitle: 'Happy Reader', hintClose: '点面板外关闭', close: '关闭',
+        dragHint: '面板任意空白处可拖动 · 双击标题栏复位',
+        fabTitle: 'Happy Reader（拖动可移动）',
+        hideComposerTitle: '隐藏输入框', hideComposerSub: '收起底部输入区',
+        hideTopTitle: '隐藏上边栏', hideTopSub: '收起会话标题栏',
+        typeRowTitle: '行距 / 字距', typeRowSub: '默认 = 官方原样',
+        lineHeight: '行距 ', letterSpacing: '字距 ', defaultText: '默认',
+        fontSize: '字号 ', fontSizeSync: '与官方设置同步',
+        codeFontSizeSub: '与官方设置同步（10–16）',
+        textFontTitle: '正文字体',
+        cjkLabel: '中文', latinLabel: '西文',
+        codeFontTitle: '代码字体', codeFontSub: '与官方设置同步 · 仅显示本机已装字体',
+        widthTitle: '内容宽度 ', widthSub: '与官方手柄同步', widthAuto: '自动',
+        widthUnavailable: '—（打开会话后可用）',
+        fullscreenTitle: '全屏', fullscreenSub: '铺满屏幕 · Esc 退出',
+        fontDefaultOption: '默认（官方）', minus: '减小', plus: '增大',
+        splitTitle: '中英分设', splitSub: '中文 / 西文分别选择 · 本机字体',
+        textBaseTitle: '官方正文字体', textBaseSub: '基础字族；中英分设优先',
+        terminalFontTitle: '终端字体', terminalFontSub: '与官方设置同步 · 侧栏终端',
+        terminalFontSizeSub: '与官方设置同步（10–20）',
+        customFontOption: '自定义…', currentFontPrefix: '当前：', fontRowLabel: '字体', sizeRowLabel: '字号 ',
+        customFontPlaceholder: '字体名，可用逗号分隔多个',
+        groupSummarySplit: '中英分设', groupSummaryOfficial: '官方字体',
+        settingsCjkTitle: '正文字体 · 中文', settingsCjkDesc: '只作用于汉字与中文标点；仅显示本机已装字体',
+        settingsLatinTitle: '正文字体 · 西文', settingsLatinDesc: '只作用于字母、数字与西文标点；仅显示本机已装字体',
+      },
+      en: {
+        panelTitle: 'Happy Reader', hintClose: 'Click outside to close', close: 'Close',
+        dragHint: 'Drag any empty area to move · double-click the title to reset',
+        fabTitle: 'Happy Reader (drag to move)',
+        hideComposerTitle: 'Hide composer', hideComposerSub: 'Collapse the input area',
+        hideTopTitle: 'Hide title bar', hideTopSub: 'Collapse the session title bar',
+        typeRowTitle: 'Line & letter spacing', typeRowSub: 'Default = official',
+        lineHeight: 'Line ', letterSpacing: 'Letter ', defaultText: 'Default',
+        fontSize: 'Font size ', fontSizeSync: 'Synced with official settings',
+        codeFontSizeSub: 'Synced with official settings (10–16)',
+        textFontTitle: 'Body font',
+        cjkLabel: 'Chinese', latinLabel: 'Latin',
+        codeFontTitle: 'Code font', codeFontSub: 'Synced with official settings · installed fonts only',
+        widthTitle: 'Content width ', widthSub: 'Synced with the official handle', widthAuto: 'Auto',
+        widthUnavailable: '— (open a session first)',
+        fullscreenTitle: 'Fullscreen', fullscreenSub: 'Fill the screen · Esc to exit',
+        fontDefaultOption: 'Default (official)', minus: 'Decrease', plus: 'Increase',
+        splitTitle: 'Chinese / Latin split', splitSub: 'Pick each side separately · installed fonts',
+        textBaseTitle: 'Official body font', textBaseSub: 'Base family; the split takes precedence',
+        terminalFontTitle: 'Terminal font', terminalFontSub: 'Synced with official settings · sidebar terminal',
+        terminalFontSizeSub: 'Synced with official settings (10–20)',
+        customFontOption: 'Custom…', currentFontPrefix: 'Current: ', fontRowLabel: 'Font', sizeRowLabel: 'Size ',
+        customFontPlaceholder: 'Font names, comma separated',
+        groupSummarySplit: 'split', groupSummaryOfficial: 'official font',
+        settingsCjkTitle: 'Body font · Chinese', settingsCjkDesc: 'Applies to Han characters and Chinese punctuation only; installed fonts only',
+        settingsLatinTitle: 'Body font · Latin', settingsLatinDesc: 'Applies to letters, digits and Latin punctuation only; installed fonts only',
+      },
+    }
+    function fallbackT(key) {
+      return TEXTS.zh[key] ?? key
+    }
+    let t = fallbackT
+
+    // 挂载句柄（槽位宿主 ref ↔ 实体生命周期）
+    let ui = null
+    let hostNode = null
+    let hostDispose = null
+    let overlayAlive = false
+    let settingsHost = null
+    let settingsDispose = null
+    let settingsRefresh = null
+    let settingsAlive = false
+    let remounting = false // 语言切换等就地重挂：不算插件停用，不退出全屏
+
+    /** 官方主题快照 → 字号/字体族桥接（0.2.2 角色形与旧版单值形都读）。 */
+    function syncTheme(snap) {
+      const sizes = snap && snap.fontSizes
+      const families = snap && snap.fontFamilies
+      const legacy = snap && typeof snap.fontSize === 'number' ? snap.fontSize : null
+      const text = sizes && typeof sizes.text === 'number' ? sizes.text : legacy
+      if (typeof text === 'number' && text > 0) fontState.official = text
+      if (sizes && typeof sizes.code === 'number') {
+        fontState.code = sizes.code
+      } else {
+        const inlineCode = Number.parseFloat(document.body.style.getPropertyValue('--dsh-code-font-size'))
+        if (Number.isFinite(inlineCode) && inlineCode > 0) fontState.code = Math.round(inlineCode)
+      }
+      if (sizes && typeof sizes.terminal === 'number') {
+        fontState.terminal = sizes.terminal
+      } else {
+        const inlineTerm = Number.parseFloat(document.body.style.getPropertyValue('--dsh-terminal-font-size'))
+        if (Number.isFinite(inlineTerm) && inlineTerm > 0) fontState.terminal = Math.round(inlineTerm)
+      }
+      const prevTextFamily = fontState.textFamily
+      if (families && typeof families.text === 'string') fontState.textFamily = families.text
+      if (families && typeof families.code === 'string') fontState.codeFamily = families.code
+      if (families && typeof families.terminal === 'string') fontState.terminalFamily = families.terminal
+      const prevPref = lastThemePreference
+      if (snap && typeof snap.preference === 'string') lastThemePreference = snap.preference
+      const themeSwitched = prevPref !== undefined && lastThemePreference !== prevPref
+      // 官方字族或主题切换后，旧 token 缓存作废
+      if (prevTextFamily !== fontState.textFamily || themeSwitched) themeFontDecls = null
+      // 官方是 10–22px 的权威来源：启动/外部变化时只采纳官方值，绝不反写；
+      // 超出 22 的绝对目标保留，由缩放层相对官方基准适配。
+      const prevFontPx = state.fontPx
+      if (typeof fontState.official === 'number') {
+        if (typeof state.fontPx !== 'number') state.fontPx = fontState.official
+        else if (state.fontPx <= FONT_OFFICIAL_MAX) state.fontPx = fontState.official
+      }
+      if (state.fontPx !== prevFontPx) writeState({ fontPx: state.fontPx })
+      if (ui) ui.renderFontRow()
+      refreshThemeUi(prevTextFamily, themeSwitched)
+    }
+
+    /** 主题/字号变化后刷新已挂载的 UI（未挂载时零开销）。 */
+    function refreshThemeUi(prevTextFamily, themeSwitched) {
+      if (!ui) return
+      ui.renderCodeSizeRow()
+      ui.renderCodeFontRow()
+      ui.renderTerminalSizeRow()
+      ui.renderTerminalFontRow()
+      ui.renderTextBaseRow()
+      ui.applyFont()
+      if (prevTextFamily !== fontState.textFamily || themeSwitched) ui.refreshFontPick()
+      ui.renderGroupSummaries()
+    }
+
+    /** 槽位组件：零尺寸宿主 div；实体在 ref 挂载时创建（不触碰 document.body）。 */
+    function HappyReaderOverlay() {
+      return React.createElement('div', { className: 'dsrb-slot-host', ref: overlayHostRef })
+    }
+    function overlayHostRef(node) {
+      if (node) {
+        hostNode = node
+        if (!hostDispose) hostDispose = mount(node)
+      } else if (hostDispose) {
+        try { hostDispose() } catch { /* 拆除失败不阻塞 */ }
+        hostDispose = null
+        hostNode = null
+      }
+    }
+    function remount() {
+      remounting = true
+      try {
+        if (overlayAlive && hostNode) {
+          if (hostDispose) { try { hostDispose() } catch { /* 忽略 */ } }
+          hostDispose = mount(hostNode)
+        }
+        if (settingsAlive && settingsHost) {
+          if (settingsDispose) { try { settingsDispose() } catch { /* 忽略 */ } }
+          settingsDispose = mountSettingsRows(settingsHost)
+        }
+      } finally {
+        remounting = false
+      }
+    }
+
+    /** 本机已装字体（三套候选统一检测一次，面板与官方设置行共用）。 */
+    let installedCache = null
+    function installedFonts(role) {
+      if (!installedCache) {
+        installedCache = {
+          cjk: TEXT_FONTS_CJK.filter((f) => fontAvailable(f.name)),
+          latin: TEXT_FONTS_LATIN.filter((f) => fontAvailable(f.name)),
+          code: CODE_FONTS.filter((f) => fontAvailable(f.name)),
+        }
+        fontDetectCtx = null // 检测完成即释放 canvas 上下文
+      }
+      if (role === 'text') {
+        if (!installedCache.text) {
+          installedCache.text = installedCache.cjk.concat(
+            installedCache.latin.filter((f) => !installedCache.cjk.some((c) => c.name === f.name)),
+          )
+        }
+        return installedCache.text
+      }
+      return installedCache[role] || []
+    }
+    /** 下拉：默认（官方）+ 本机已装候选。 */
+    function fillFontOptions(select, list) {
+      clearChildren(select)
+      const def = el('option', null, t('fontDefaultOption'))
+      def.value = ''
+      select.append(def)
+      for (const f of list) {
+        const opt = el('option', null, f.label)
+        opt.value = f.id
+        select.append(opt)
+      }
+    }
+
+    /** 正文字体：两处 UI（浮动面板 / 官方通用设置）共用的唯一写入口。 */
+    function commitTextFont(role, id) {
+      const next = id && fontChoice(installedFonts(role), id) ? id : null
+      if (role === 'cjk') state.textFontCjk = next
+      else state.textFontLatin = next
+      writeState({ textFontCjk: state.textFontCjk, textFontLatin: state.textFontLatin })
+      if (ui && typeof ui.applyTextFonts === 'function') ui.applyTextFonts()
+      if (settingsRefresh) settingsRefresh()
+    }
+
+    /** 官方「通用设置」里的两行正文字体（settings.general.item 槽位组件）。 */
+    function HappyReaderSettingsFonts() {
+      return React.createElement('div', { className: 'dsrb-settings', ref: settingsHostRef })
+    }
+    function settingsHostRef(node) {
+      if (node) {
+        settingsHost = node
+        if (!settingsDispose) settingsDispose = mountSettingsRows(node)
+      } else {
+        if (settingsDispose) { try { settingsDispose() } catch { /* 拆除失败不阻塞 */ } }
+        settingsDispose = null
+        settingsHost = null
+      }
+    }
+    /** 按官方 FontFamilyRow 的行距/字号/分隔线规格构建两行下拉；返回清理函数。 */
+    function mountSettingsRows(host) {
+      try {
+        settingsAlive = true
+        clearChildren(host)
+        const makeRow = (role, titleKey, descKey) => {
+          const row = el('div', 'dsrb-set-row')
+          const text = el('div', 'dsrb-set-text')
+          text.append(el('div', 'dsrb-set-title', t(titleKey)), el('div', 'dsrb-set-desc', t(descKey)))
+          const select = el('select', 'dsrb-set-select')
+          select.setAttribute('aria-label', t(titleKey))
+          fillFontOptions(select, installedFonts(role))
+          select.value = (role === 'cjk' ? state.textFontCjk : state.textFontLatin) ?? ''
+          select.addEventListener('change', () => commitTextFont(role, select.value))
+          row.append(text, select)
+          return { row, select }
+        }
+        const cjk = makeRow('cjk', 'settingsCjkTitle', 'settingsCjkDesc')
+        const latin = makeRow('latin', 'settingsLatinTitle', 'settingsLatinDesc')
+        host.append(cjk.row, latin.row)
+        settingsRefresh = () => {
+          cjk.select.value = state.textFontCjk ?? ''
+          latin.select.value = state.textFontLatin ?? ''
+        }
+        return () => {
+          settingsAlive = false
+          settingsRefresh = null
+          clearChildren(host)
+        }
+      } catch (err) {
+        console.warn('[dsh-happy-reader] 设置行初始化失败：', err)
+        settingsAlive = false
+        settingsRefresh = null
+        try { clearChildren(host) } catch { /* 忽略 */ }
+        return () => {}
+      }
+    }
+
     function apply(ctx) {
       try {
         // 热重载：DSH 监视插件文件变化，会再次执行本客户端。先拆旧实例、再按 id
-        // 清扫遗留节点、最后重建 —— 页面上运行的必然是最新代码（旧实例的监听闭包
-        // 随节点删除失联、残留定时器空转，均无害）。
+        // 清扫遗留节点、最后重建 —— 页面上运行的必然是最新代码。
         const prevDispose = window.__dsrbDispose
         if (typeof prevDispose === 'function') {
           try { prevDispose() } catch { /* 旧实例拆除失败也不阻塞重建 */ }
@@ -517,10 +847,186 @@ window.__ModuleLoader__.load({
           const staleNode = document.getElementById(staleId)
           if (staleNode) staleNode.remove()
         }
-        if (document.getElementById(FAB_ID)) return // 拆除后仍在＝异常态，守住不重复挂载
+        // 旧外壳回退宿主没有固定 id：按专属类名清扫（槽位宿主由 React 自己卸载）
+        for (const staleHost of document.querySelectorAll('.dsrb-slot-host.dsrb-standalone')) staleHost.remove()
+        // 热重载时旧模块的设置页行可能还在宿主里：按行清扫，避免叠加成四行
+        for (const staleRow of document.querySelectorAll('.dsrb-set-row')) staleRow.remove()
 
         state = readState()
+        // ── 启动时应用已保存的功能状态（主题同步先行使用，故放在最前） ──
+        state.open = !!state.open
+        state.hideComposer = !!state.hideComposer
+        state.hideTop = !!state.hideTop
+        state.x = typeof state.x === 'number' ? state.x : null
+        state.y = typeof state.y === 'number' ? state.y : null
+        if (typeof state.fontPx === 'number') {
+          state.fontPx = Math.min(FONT_MAX, Math.max(FONT_MIN, Math.round(state.fontPx)))
+        } else {
+          state.fontPx = null
+        }
+        if (typeof state.widthPx !== 'number' || !(state.widthPx > 0)) state.widthPx = null
+        state.widthExt = typeof state.widthExt === 'boolean' ? state.widthExt : null // null=旧版状态，启动时推断
+        if (typeof state.lineHeight === 'number') {
+          const lh = Math.min(LINEH_MAX, Math.max(LINEH_MIN, Math.round(state.lineHeight * 10) / 10))
+          state.lineHeight = lh > LINEH_MIN ? lh : null
+        } else state.lineHeight = null
+        if (typeof state.letterSpacing === 'number') {
+          const ls = Math.min(LETTERSP_MAX, Math.max(LETTERSP_MIN, Math.round(state.letterSpacing * 10) / 10))
+          state.letterSpacing = ls !== 0 ? ls : null
+        } else state.letterSpacing = null
+        state.panelX = typeof state.panelX === 'number' ? state.panelX : null
+        state.panelY = typeof state.panelY === 'number' ? state.panelY : null
+        state.panelH = typeof state.panelH === 'number' && state.panelH > 0 ? state.panelH : null
+        // 字体折叠组展开态：默认三行全部收起（打开面板先看到三行），点哪行展开哪行；记忆用户选择
+        if (state.groupsVersion !== GROUPS_VERSION) {
+          state.groups = { text: false, code: false, terminal: false }
+          state.groupsVersion = GROUPS_VERSION
+          writeState({ groups: state.groups, groupsVersion: GROUPS_VERSION })
+        } else {
+          if (!state.groups || typeof state.groups !== 'object') state.groups = {}
+          state.groups.text = typeof state.groups.text === 'boolean' ? state.groups.text : false
+          state.groups.code = typeof state.groups.code === 'boolean' ? state.groups.code : false
+          state.groups.terminal = typeof state.groups.terminal === 'boolean' ? state.groups.terminal : false
+        }
+
+        // ── 本地化：注册字典（owning effect）+ 绑定 t；语言切换时重挂实体刷新文案 ──
+        ctx.inject(['locale'], (lctx) => {
+          const loc = lctx.locale
+          const dicts = { zh: TEXTS.zh, en: TEXTS.en }
+          let registered = false
+          let regErr = null
+          try {
+            lctx.effect(() => loc.register(LOCALE_NS, dicts), 'dsh-happy-reader: 语言字典')
+            registered = true
+          } catch (err) {
+            // 热重载时旧命名空间可能尚在：换一个本实例独占的命名空间重新注册，
+            // 避免绑定到随后会被旧 effect 注销的旧字典
+            regErr = err
+            const alt = LOCALE_NS + '-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6)
+            try {
+              lctx.effect(() => loc.register(alt, dicts), 'dsh-happy-reader: 语言字典（备用）')
+              activeLocaleNs = alt
+              registered = true
+              regErr = null
+            } catch { /* 保持 regErr，下面探测旧字典 */ }
+          }
+          let bound = null
+          try {
+            if (typeof loc.bind === 'function') bound = loc.bind(activeLocaleNs)
+          } catch { /* 视为不可用 */ }
+          let usable = registered && typeof bound === 'function'
+          if (!usable && typeof bound === 'function' && activeLocaleNs !== LOCALE_NS) {
+            try {
+              bound = loc.bind(LOCALE_NS)
+              usable = typeof bound === 'function' && bound('panelTitle') !== 'panelTitle'
+            } catch { /* 视为不可用 */ }
+          }
+          if (usable) {
+            t = bound
+            if (!registered) console.warn('[dsh-happy-reader] 语言字典沿用旧命名空间（可能在旧实例注销后失效）：', regErr || '')
+          } else {
+            console.warn('[dsh-happy-reader] 语言服务不可用（沿用内置中文）：', regErr || 'bind failed')
+          }
+          remount() // 服务晚到时刷新已挂载文案（启动时尚未挂载则无事发生）
+          lctx.on('locale/change', () => remount())
+        })
+
+        // ── 主题服务：字号/字体族桥接（官方接口优先） ──────────────────
+        ctx.inject(['theme'], (tctx) => {
+          fontSvc = tctx.theme
+          // 能力按接口形状判定：即使首读快照异常，控件仍可用（写入失败由官方静默拒绝）
+          roleSizeSupported = !!(fontSvc && typeof fontSvc.setFontSize === 'function' && fontSvc.setFontSize.length >= 2)
+          familySupported = !!(fontSvc && typeof fontSvc.setFontFamily === 'function')
+          tctx.on('theme/change', (snap) => syncTheme(snap))
+          try {
+            syncTheme(tctx.theme.getTheme())
+          } catch {
+            if (ui) ui.applyFont() // 服务首读异常时至少按兜底基准绘制一次
+          }
+        })
 
+        // ── 官方会话列表事件：会话切换后重新定位/应用宽度（不轮询 DOM） ──
+        ctx.inject(['sessions'], (sctx) => {
+          const list = sctx.sessions && sctx.sessions.list
+          if (!list || typeof list.subscribe !== 'function') return
+          try {
+            sctx.effect(() => list.subscribe(() => {
+              if (ui && ui.scheduleWidthRefresh) ui.scheduleWidthRefresh()
+            }), 'dsh-happy-reader: 会话切换复核宽度')
+          } catch (err) {
+            console.warn('[dsh-happy-reader] 会话订阅失败（宽度仅在面板/窗口事件时复核）：', err)
+          }
+        })
+
+        // ── 渲染面：官方 shell.overlay 槽位（框架级覆盖层，pointer-events:none） ──
+        let registered = false
+        let standalone = null // 旧外壳回退时直挂 body 的宿主，卸载时一并移除
+        if (React && ctx.slots && typeof ctx.slots.inject === 'function') {
+          try {
+            ctx.slots.inject('shell.overlay', () => ctx.slots.register({
+              name: 'shell.overlay',
+              id: 'dsh-happy-reader',
+              order: -1, // 排在官方 overlay 条目之前：右键菜单/提示条等始终盖在插件之上
+              locale: activeLocaleNs,
+            }, HappyReaderOverlay))
+            registered = true
+          } catch (err) {
+            console.warn('[dsh-happy-reader] 槽位注册失败，回退直挂：', err)
+          }
+        }
+        if (registered) {
+          // 官方「通用设置 → 字号大小」组下方增加两行正文字体（中文 / 西文）。
+          // settings.general.item 是官方列表槽位；旧外壳无此槽位时注册被忽略。
+          try {
+            ctx.slots.inject('settings.general.item', () => ctx.slots.register({
+              name: 'settings.general.item',
+              id: 'dsh-happy-reader.fonts',
+              order: 11.5,
+              locale: activeLocaleNs,
+            }, HappyReaderSettingsFonts))
+          } catch (err) {
+            console.warn('[dsh-happy-reader] 设置行注册失败（旧版外壳忽略）：', err)
+          }
+        }
+        if (!registered) {
+          // 旧版/无槽位宿主：宿主 div 退回直挂 body（UI 仍包在宿主内，不逐个裸挂）
+          standalone = el('div', 'dsrb-slot-host dsrb-standalone')
+          document.body.appendChild(standalone)
+          hostNode = standalone // 回退路径同样支持语言切换时就地重挂
+          hostDispose = mount(standalone)
+        }
+
+        ctx.effect(() => () => {
+          if (hostDispose) {
+            try { hostDispose() } catch { /* 忽略 */ }
+            hostDispose = null
+          }
+          // 插件被禁用/卸载时，设置页里的插件行也必须立即消失（不等 React 迟到的卸载）
+          if (settingsDispose) {
+            try { settingsDispose() } catch { /* 忽略 */ }
+            settingsDispose = null
+          }
+          settingsHost = null
+          settingsRefresh = null
+          settingsAlive = false
+          if (standalone) {
+            standalone.remove()
+            standalone = null
+          }
+          // 不清空 window.__dsrbDispose：若新实例已接管，这里清空会破坏其热重载拆除句柄；
+          // 旧句柄本身是幂等的，下次热重载再调用也安全。
+        }, 'dsh-happy-reader: 槽位实体')
+      } catch (err) {
+        // 任何意外都只记日志，不影响应用本体
+        console.error('[dsh-happy-reader] 挂载失败：', err)
+      }
+    }
+
+    /** 实体：构建面板/按钮/监听/定时器并把它们放进槽位宿主；返回清理函数。 */
+    function mount(host) {
+      let disposed = false
+      overlayAlive = true
+      try {
         // 1) 样式表：基础外观 + 各功能覆盖层
         const style = el('style')
         style.id = STYLE_ID
@@ -539,7 +1045,7 @@ window.__ModuleLoader__.load({
         const fsTag = el('style') // 全屏补偿层（常驻；仅存在全屏标记时才有匹配规则生效）
         fsTag.id = FS_STYLE_ID
         fsTag.textContent = FS_CSS
-        document.head.append(style, hideTag, hideTopTag, fontTag, fontPickTag, fsTag)
+        host.append(style, hideTag, hideTopTag, fontTag, fontPickTag, fsTag)
         // disabled 必须在挂入文档后再设：未连接的 <style> 没有关联样式表，挂载前设置
         // 会被静默丢弃（CSSOM 行为），否则隐藏层将无视已保存状态（字体层由 rebuildFontPick 按需启用）。
         hideTag.disabled = !state.hideComposer
@@ -550,7 +1056,8 @@ window.__ModuleLoader__.load({
         const fab = el('button', 'dsrb-fab', 'Aa')
         fab.id = FAB_ID
         fab.type = 'button'
-        fab.title = 'Happy Reader（拖动可移动）'
+        fab.title = t('fabTitle')
+        fab.setAttribute('aria-label', t('fabTitle'))
         const [fx, fy] = clampPos(
           state.x ?? window.innerWidth - FAB_SIZE - 16,
           state.y ?? window.innerHeight - FAB_SIZE - 16,
@@ -559,148 +1066,305 @@ window.__ModuleLoader__.load({
         )
         fab.style.left = fx + 'px'
         fab.style.top = fy + 'px'
-        document.body.appendChild(fab)
+        host.appendChild(fab)
 
         // 3) 面板
         const panel = el('div', 'dsrb-panel')
         panel.id = PANEL_ID
+        panel.setAttribute('role', 'region')
+        panel.setAttribute('aria-label', t('panelTitle'))
 
         const headRow = el('div', 'dsrb-head')
-        const title = el('h4')
-        title.append('Happy Reader')
-        const headHint = el('span', 'dsrb-headHint', '点面板外关闭')
+        const title = el('h4', null, t('panelTitle'))
+        const headHint = el('span', 'dsrb-headHint', t('hintClose'))
         const closeBtn = el('button', 'dsrb-x', '×')
         closeBtn.type = 'button'
-        closeBtn.title = '关闭'
+        closeBtn.title = t('close')
+        closeBtn.setAttribute('aria-label', t('close'))
         headRow.append(title, headHint, closeBtn)
 
-        // 行：隐藏输入框（整条可点）
-        const rowHide = el('div', 'dsrb-row dsrb-row-click')
-        const switchBox = el('span', 'dsrb-switch') // 用 span 而非 label：没有原生转发激活面
-        const hideToggle = el('input')
-        hideToggle.type = 'checkbox'
-        switchBox.append(hideToggle, el('span'))
-        const hideMain = el('div', 'dsrb-rowMain')
-        hideMain.append(el('div', 'dsrb-rowTitle', '隐藏输入框'), el('div', 'dsrb-rowSub', '收起底部输入区'))
-        rowHide.append(switchBox, hideMain)
-
-        // 行：隐藏上边栏（整条可点）
-        const rowTop = el('div', 'dsrb-row dsrb-row-click')
-        const topBox = el('span', 'dsrb-switch')
-        const topToggle = el('input')
-        topToggle.type = 'checkbox'
-        topBox.append(topToggle, el('span'))
-        const topMain = el('div', 'dsrb-rowMain')
-        topMain.append(el('div', 'dsrb-rowTitle', '隐藏上边栏'), el('div', 'dsrb-rowSub', '收起会话标题栏'))
-        rowTop.append(topBox, topMain)
+        /** 开关行：官方 36×20 视觉 + role=switch；整条可点由 bindRowToggle 绑定。 */
+        function makeSwitchRow(titleText, subText) {
+          const row = el('div', 'dsrb-row dsrb-row-click')
+          const box = el('span', 'dsrb-switch') // span 而非 label：避免原生转发激活面
+          const input = el('input')
+          input.type = 'checkbox'
+          input.setAttribute('role', 'switch')
+          input.setAttribute('aria-checked', 'false')
+          input.setAttribute('aria-label', titleText)
+          box.append(input, el('span'))
+          const main = el('div', 'dsrb-rowMain')
+          main.append(el('div', 'dsrb-rowTitle', titleText), el('div', 'dsrb-rowSub', subText))
+          row.append(box, main)
+          return { row, input }
+        }
+        const { row: rowHide, input: hideToggle } = makeSwitchRow(t('hideComposerTitle'), t('hideComposerSub'))
+
+        const { row: rowTop, input: topToggle } = makeSwitchRow(t('hideTopTitle'), t('hideTopSub'))
 
         // 行：行距 / 字距（面板最下方；默认 = 官方原样）
         const rowType = el('div', 'dsrb-row')
         const typeMain = el('div', 'dsrb-rowMain')
-        typeMain.append(el('div', 'dsrb-rowTitle', '行距 / 字距'), el('div', 'dsrb-rowSub', '默认 = 官方原样'))
+        typeMain.append(el('div', 'dsrb-rowTitle', t('typeRowTitle')), el('div', 'dsrb-rowSub', t('typeRowSub')))
         const typePair = el('div', 'dsrb-pair')
         const lhCol = el('div', 'dsrb-pairCol')
         const lhMini = el('div', 'dsrb-mini')
-        const lhVal = el('b', null, '默认')
-        lhMini.append('行距 ', lhVal)
+        const lhVal = el('b', null, t('defaultText'))
+        lhMini.append(t('lineHeight'), lhVal)
         const lhStepper = el('div', 'dsrb-stepper')
         const lhMinus = el('button', null, '−')
         const lhPlus = el('button', null, '＋')
         lhMinus.type = lhPlus.type = 'button'
+        lhMinus.setAttribute('aria-label', t('minus'))
+        lhPlus.setAttribute('aria-label', t('plus'))
         lhStepper.append(lhMinus, lhPlus)
         lhCol.append(lhMini, lhStepper)
         const lsCol = el('div', 'dsrb-pairCol')
         const lsMini = el('div', 'dsrb-mini')
-        const lsVal = el('b', null, '默认')
-        lsMini.append('字距 ', lsVal)
+        const lsVal = el('b', null, t('defaultText'))
+        lsMini.append(t('letterSpacing'), lsVal)
         const lsStepper = el('div', 'dsrb-stepper')
         const lsMinus = el('button', null, '−')
         const lsPlus = el('button', null, '＋')
         lsMinus.type = lsPlus.type = 'button'
+        lsMinus.setAttribute('aria-label', t('minus'))
+        lsPlus.setAttribute('aria-label', t('plus'))
         lsStepper.append(lsMinus, lsPlus)
         lsCol.append(lsMini, lsStepper)
         typePair.append(lhCol, lsCol)
         typeMain.append(typePair)
         rowType.append(typeMain)
 
-        // 行：字号
-        const rowFont = el('div', 'dsrb-row')
-        const fontMain = el('div', 'dsrb-rowMain')
-        const fontTitle = el('div', 'dsrb-rowTitle')
-        const fontVal = el('b', null, '…')
-        fontTitle.append('字号 ', fontVal)
-        fontMain.append(fontTitle, el('div', 'dsrb-rowSub', '与官方设置同步'))
-        const stepper = el('div', 'dsrb-stepper')
-        const fontMinus = el('button', null, '−')
-        const fontPlus = el('button', null, '＋')
-        fontMinus.type = fontPlus.type = 'button'
-        stepper.append(fontMinus, fontPlus)
-        rowFont.append(fontMain, stepper)
-
-        // 行：正文字体（中文、西文两个独立下拉压缩在同一行；中文下拉只接管中日韩
+        // ── 字体设置折叠组：正文字体 / 代码字体 / 终端字体 ──────────────
+        const groups = {}
+        function makeGroup(key, titleKey) {
+          const group = el('div', 'dsrb-group')
+          const head = el('button', 'dsrb-groupHead')
+          head.type = 'button'
+          head.setAttribute('aria-expanded', 'false')
+          const title = el('span', 'dsrb-groupTitle', t(titleKey))
+          const sub = el('span', 'dsrb-groupSub')
+          const chev = el('span', 'dsrb-chevron')
+          chev.setAttribute('aria-hidden', 'true')
+          head.append(title, sub, chev)
+          const body = el('div', 'dsrb-groupBody')
+          body.id = 'dsrb-group-body-' + key
+          head.setAttribute('aria-controls', body.id)
+          group.append(head, body)
+          head.addEventListener('click', () => toggleGroup(key))
+          groups[key] = { group, head, body, sub }
+          return groups[key]
+        }
+        function applyGroupState() {
+          for (const key of Object.keys(groups)) {
+            const open = !!state.groups[key]
+            groups[key].body.style.display = open ? '' : 'none'
+            groups[key].head.setAttribute('aria-expanded', open ? 'true' : 'false')
+          }
+        }
+        function toggleGroup(key) {
+          const open = !state.groups[key]
+          const keepScroll = panelBody.scrollTop
+          state.groups[key] = open
+          applyGroupState()
+          writeState({ groups: state.groups })
+          if (state.open) placePanel(keepScroll)
+        }
+        makeGroup('text', 'textFontTitle')
+        makeGroup('code', 'codeFontTitle')
+        makeGroup('terminal', 'terminalFontTitle')
+
+        // 角色字体行：本机已装字体下拉 + “自定义…”文本框（官方逗号列表同款能力）。
+        // 官方值不在候选表时显示“当前：…”，绝不静默误报为默认。
+        const FAMILY_KEY = { text: 'textFamily', code: 'codeFamily', terminal: 'terminalFamily' }
+        function makeRoleFontPicker(role, titleKey, subKey, extraClass, ariaKey) {
+          const row = el('div', 'dsrb-row')
+          const main = el('div', 'dsrb-rowMain')
+          main.append(el('div', 'dsrb-rowTitle', t(titleKey)), el('div', 'dsrb-rowSub', t(subKey)))
+          const select = el('select', 'dsrb-select ' + extraClass)
+          const ariaName = t(ariaKey || titleKey)
+          select.setAttribute('aria-label', ariaName)
+          const input = el('input', 'dsrb-input ' + extraClass + '-custom')
+          input.type = 'text'
+          input.setAttribute('aria-label', ariaName)
+          input.placeholder = t('customFontPlaceholder')
+          input.spellcheck = false
+          input.autocomplete = 'off'
+          input.maxLength = 200
+          input.style.display = 'none'
+          main.append(select, input)
+          row.append(main)
+          const picker = { row, select, input, role, list: [] }
+          const customOpt = el('option', null, t('customFontOption'))
+          customOpt.value = '__custom__'
+          let currentOpt = null
+          const clearCurrent = () => {
+            if (!currentOpt) return
+            if (typeof currentOpt.remove === 'function') currentOpt.remove()
+            currentOpt = null
+          }
+          picker.fill = (list) => {
+            picker.list = list
+            fillFontOptions(select, list)
+            select.append(customOpt)
+            picker.render()
+          }
+          picker.setEnabled = (on) => {
+            select.disabled = !on
+            input.disabled = !on
+            if (!on) {
+              input.style.display = 'none'
+              select.value = ''
+            }
+          }
+          picker.render = () => {
+            if (input.style.display !== 'none' && document.activeElement === input) return
+            const value = String(fontState[FAMILY_KEY[role]] || '')
+            if (!value) {
+              clearCurrent()
+              select.value = ''
+              return
+            }
+            const parts = value.split(',').map((x) => x.trim()).filter(Boolean)
+            const first = parts[0] ? parts[0].replace(/^"|"$/g, '') : ''
+            const hit = parts.length === 1 ? picker.list.find((f) => fontMatches(f, first)) : null
+            if (hit) {
+              clearCurrent()
+              select.value = hit.id
+              return
+            }
+            if (!currentOpt) {
+              currentOpt = el('option', null, '')
+              currentOpt.value = '__current__'
+              select.append(currentOpt)
+            }
+            currentOpt.textContent = t('currentFontPrefix') + value
+            select.value = '__current__'
+          }
+          select.addEventListener('change', () => {
+            const v = select.value
+            if (v === '__custom__') {
+              input.value = String(fontState[FAMILY_KEY[role]] || '')
+              input.style.display = ''
+              if (typeof input.focus === 'function') input.focus()
+              return
+            }
+            if (v === '__current__') {
+              picker.render()
+              return
+            }
+            const entry = fontChoice(picker.list, v)
+            officialSetFontFamily(role, entry ? entry.name : '')
+            picker.render()
+          })
+          const commit = () => {
+            if (input.style.display === 'none') return
+            input.style.display = 'none'
+            officialSetFontFamily(role, input.value.trim())
+            picker.render()
+          }
+          input.addEventListener('blur', commit)
+          input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              if (typeof input.blur === 'function') input.blur()
+              else commit()
+            } else if (e.key === 'Escape') {
+              e.preventDefault()
+              input.value = ''
+              input.style.display = 'none'
+              picker.render()
+            }
+          })
+          return picker
+        }
+        const textBasePicker = makeRoleFontPicker('text', 'textBaseTitle', 'textBaseSub', 'dsrb-textbase', 'textBaseTitle')
+        const codeFontPicker = makeRoleFontPicker('code', 'fontRowLabel', 'codeFontSub', 'dsrb-codefont', 'codeFontTitle')
+        const terminalFontPicker = makeRoleFontPicker('terminal', 'fontRowLabel', 'terminalFontSub', 'dsrb-termfont', 'terminalFontTitle')
+
+        /** 字号行：标题 + 当前值 + −/＋ 步进器。 */
+        function makeStepperRow(titleText, subText) {
+          const row = el('div', 'dsrb-row')
+          const main = el('div', 'dsrb-rowMain')
+          const title = el('div', 'dsrb-rowTitle')
+          const val = el('b', null, '…')
+          title.append(titleText, val)
+          main.append(title, el('div', 'dsrb-rowSub', subText))
+          const stepper = el('div', 'dsrb-stepper')
+          const minus = el('button', null, '−')
+          const plus = el('button', null, '＋')
+          minus.type = plus.type = 'button'
+          minus.setAttribute('aria-label', t('minus'))
+          plus.setAttribute('aria-label', t('plus'))
+          stepper.append(minus, plus)
+          row.append(main, stepper)
+          return { row, val, minus, plus }
+        }
+        const { row: rowFont, val: fontVal, minus: fontMinus, plus: fontPlus } = makeStepperRow(t('fontSize'), t('fontSizeSync'))
+
+        const { row: rowCodeSize, val: codeSizeVal, minus: codeMinus, plus: codePlus } = makeStepperRow(t('sizeRowLabel'), t('codeFontSizeSub'))
+
+        // 行：中英分设（中文、西文两个独立下拉压缩在同一行；中文下拉只接管中日韩
         // 字符与中文标点，西文下拉只接管拉丁字母/数字/西文标点，各自独立、互不串扰）
         const rowTextFont = el('div', 'dsrb-row')
         const textFontMain = el('div', 'dsrb-rowMain')
-        textFontMain.append(el('div', 'dsrb-rowTitle', '正文字体'), el('div', 'dsrb-rowSub', '仅显示本机已装字体'))
+        textFontMain.append(el('div', 'dsrb-rowTitle', t('splitTitle')), el('div', 'dsrb-rowSub', t('splitSub')))
         const textPair = el('div', 'dsrb-pair')
         const cjkCol = el('div', 'dsrb-pairCol')
-        cjkCol.append(el('div', 'dsrb-mini', '中文'))
-        const textCjkSelect = el('select', 'dsrb-select')
+        cjkCol.append(el('div', 'dsrb-mini', t('cjkLabel')))
+        const textCjkSelect = el('select', 'dsrb-select dsrb-cjk')
+        textCjkSelect.setAttribute('aria-label', t('cjkLabel'))
         cjkCol.append(textCjkSelect)
         const latinCol = el('div', 'dsrb-pairCol')
-        latinCol.append(el('div', 'dsrb-mini', '西文'))
-        const textLatinSelect = el('select', 'dsrb-select')
+        latinCol.append(el('div', 'dsrb-mini', t('latinLabel')))
+        const textLatinSelect = el('select', 'dsrb-select dsrb-latin')
+        textLatinSelect.setAttribute('aria-label', t('latinLabel'))
         latinCol.append(textLatinSelect)
         textPair.append(cjkCol, latinCol)
         textFontMain.append(textPair)
         rowTextFont.append(textFontMain)
 
-        // 行：代码字体（消息内代码与代码块）
-        const rowCodeFont = el('div', 'dsrb-row')
-        const codeFontMain = el('div', 'dsrb-rowMain')
-        codeFontMain.append(el('div', 'dsrb-rowTitle', '代码字体'), el('div', 'dsrb-rowSub', '仅显示本机已装字体'))
-        const codeFontSelect = el('select', 'dsrb-select')
-        codeFontMain.append(codeFontSelect)
-        rowCodeFont.append(codeFontMain)
+        const { row: rowTerminalSize, val: termSizeVal, minus: termMinus, plus: termPlus } = makeStepperRow(t('sizeRowLabel'), t('terminalFontSizeSub'))
 
         // 行：内容宽度
         const rowWidth = el('div', 'dsrb-row')
         const widthMain = el('div', 'dsrb-rowMain')
         const widthTitle = el('div', 'dsrb-rowTitle')
         const widthVal = el('b', null, '…')
-        widthTitle.append('内容宽度 ', widthVal)
-        widthMain.append(widthTitle, el('div', 'dsrb-rowSub', '与官方手柄同步'))
+        widthTitle.append(t('widthTitle'), widthVal)
+        widthMain.append(widthTitle, el('div', 'dsrb-rowSub', t('widthSub')))
         const widthRow = el('div', 'dsrb-widthRow')
         const widthSlider = el('input')
         widthSlider.type = 'range'
+        widthSlider.setAttribute('aria-label', t('widthTitle').trim())
         widthSlider.step = '5'
         widthSlider.min = String(CONTENT_MIN)
         widthSlider.max = String(CONTENT_MIN)
-        const widthReset = el('button', null, '自动')
+        const widthReset = el('button', null, t('widthAuto'))
         widthReset.type = 'button'
         widthRow.append(widthSlider, widthReset)
         widthMain.append(widthRow)
         rowWidth.append(widthMain)
 
-        // 行：全屏（整条可点；开关状态与真实全屏状态双向同步）
-        const rowFullscreen = el('div', 'dsrb-row dsrb-row-click')
-        const fsBox = el('span', 'dsrb-switch')
-        const fsToggle = el('input')
-        fsToggle.type = 'checkbox'
-        fsBox.append(fsToggle, el('span'))
-        const fsMain = el('div', 'dsrb-rowMain')
-        fsMain.append(el('div', 'dsrb-rowTitle', '全屏'), el('div', 'dsrb-rowSub', '铺满屏幕 · Esc 退出'))
-        rowFullscreen.append(fsBox, fsMain)
+        // 行：全屏（开关与真实全屏状态双向同步）
+        const { row: rowFullscreen, input: fsToggle } = makeSwitchRow(t('fullscreenTitle'), t('fullscreenSub'))
 
         // 三段式结构：拉拽条 / 滚动内容区 / 拉拽条 —— 内容在中间滚动，两条拉拽条
         // 永远贴住面板的视觉上/下缘（滚动容器里的绝对定位元素会随内容滚走，不能用绝对定位）
         const resizeTop = el('div', 'dsrb-resize-top')
         const resizeBottom = el('div', 'dsrb-resize')
         const panelBody = el('div', 'dsrb-body')
-        panelBody.append(headRow, rowFont, rowTextFont, rowCodeFont, rowWidth, rowFullscreen, rowHide, rowTop, rowType)
+        // 三组折叠：组头常显，组体按记住的展开态显示
+        groups.text.body.append(rowFont, textBasePicker.row, rowTextFont)
+        groups.code.body.append(codeFontPicker.row, rowCodeSize)
+        groups.terminal.body.append(terminalFontPicker.row, rowTerminalSize)
+        applyGroupState()
+        panelBody.append(headRow, groups.text.group, groups.code.group, groups.terminal.group, rowWidth, rowFullscreen, rowHide, rowTop, rowType)
         panel.append(resizeTop, panelBody, resizeBottom)
         panel.style.display = state.open ? '' : 'none'
-        document.body.appendChild(panel)
+        fab.setAttribute('aria-controls', PANEL_ID)
+        fab.setAttribute('aria-expanded', state.open ? 'true' : 'false')
+        host.appendChild(panel)
 
         // ── 面板定位（四个方位择一，绝不压住按钮；避开右上角系统按钮条） ──
         // 右上角三枚系统按钮是 Electron WCO 原生叠层（绘制在网页层之上、无法覆盖）：
@@ -709,7 +1373,8 @@ window.__ModuleLoader__.load({
         const titlebarH =
           Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--dsh-windows-titlebar-height')) || 40
         const CAP_W = 138
-        function placePanel() {
+        function placePanel(keepScroll) {
+          const scrollTop = typeof keepScroll === 'number' ? keepScroll : panelBody.scrollTop
           const r = fab.getBoundingClientRect()
           panel.style.height = ''
           panel.style.maxHeight = '' // 先按自然高度测量
@@ -771,14 +1436,22 @@ window.__ModuleLoader__.load({
           const finalH = Math.max(PANEL_MIN_H, Math.min(ph, vh - best.y - M - BORDER_Y))
           panel.style.maxHeight = finalH + 'px'
           if (typeof state.panelH === 'number') panel.style.height = finalH + 'px'
+          // 重算高度/位置会让浏览器把超界 scrollTop 归零；按重排前的值恢复
+          const maxScroll = Math.max(0, panelBody.scrollHeight - panelBody.clientHeight)
+          panelBody.scrollTop = Math.min(scrollTop, maxScroll)
         }
         function togglePanel(open) {
           state.open = open
           panel.style.display = open ? '' : 'none'
+          if (!open && panel.contains(document.activeElement) && typeof fab.focus === 'function') fab.focus()
+          fab.setAttribute('aria-expanded', open ? 'true' : 'false')
           if (open) {
-            renderWidthRow()
-            renderFontRow()
+            renderAll()
+            rebuildFontPick()
+            refreshWidthTargets()
             placePanel()
+          } else {
+            refreshWidthTargets()
           }
           writeState({ open })
         }
@@ -791,6 +1464,7 @@ window.__ModuleLoader__.load({
           // 超出 22：官方设置保持原样，仅用缩放层补齐
           applyFont()
           renderFontRow()
+          renderGroupSummaries()
           writeState({ fontPx: next })
         }
         function renderFontRow() {
@@ -798,12 +1472,48 @@ window.__ModuleLoader__.load({
           fontMinus.disabled = typeof state.fontPx !== 'number' || state.fontPx <= FONT_MIN
           fontPlus.disabled = typeof state.fontPx !== 'number' || state.fontPx >= FONT_MAX
         }
+        // 官方角色字号行（代码 / 终端）：只镜像快照，步进经官方接口写回
+        function renderSizeRow(valEl, minus, plus, n, min, max) {
+          valEl.textContent = typeof n === 'number' ? n + 'px' : '—'
+          minus.disabled = !roleSizeSupported || typeof n !== 'number' || n <= min
+          plus.disabled = !roleSizeSupported || typeof n !== 'number' || n >= max
+        }
+        function renderCodeSizeRow() {
+          renderSizeRow(codeSizeVal, codeMinus, codePlus, fontState.code, CODE_FONT_MIN, CODE_FONT_MAX)
+        }
+        function renderTerminalSizeRow() {
+          renderSizeRow(termSizeVal, termMinus, termPlus, fontState.terminal, TERMINAL_FONT_MIN, TERMINAL_FONT_MAX)
+        }
+        function familyLabel(list, value) {
+          const first = String(value || '').split(',')[0].trim().replace(/^"|"$/g, '')
+          if (!first) return ''
+          const hit = list.find((f) => fontMatches(f, first))
+          return hit ? hit.label : first
+        }
+        function syncFontPicker(picker) {
+          picker.setEnabled(familySupported)
+          if (familySupported) picker.render()
+        }
+        function renderCodeFontRow() { syncFontPicker(codeFontPicker) }
+        function renderTerminalFontRow() { syncFontPicker(terminalFontPicker) }
+        function renderTextBaseRow() { syncFontPicker(textBasePicker) }
+        function renderGroupSummaries() {
+          const textSize = typeof state.fontPx === 'number' ? state.fontPx + 'px' : '—'
+          const split = !!(state.textFontCjk || state.textFontLatin)
+          groups.text.sub.textContent =
+            textSize + ' · ' + (split ? t('groupSummarySplit') : fontState.textFamily ? t('groupSummaryOfficial') : t('defaultText'))
+          const codeSize = typeof fontState.code === 'number' ? fontState.code + 'px' : '—'
+          groups.code.sub.textContent = codeSize + ' · ' + (familyLabel(availCode, fontState.codeFamily) || t('defaultText'))
+          const termSize = typeof fontState.terminal === 'number' ? fontState.terminal + 'px' : '—'
+          groups.terminal.sub.textContent =
+            termSize + ' · ' + (familyLabel(availCode, fontState.terminalFamily) || t('defaultText'))
+        }
         function renderWidthRow() {
           const info = currentWidthInfo()
           if (!info) {
             widthSlider.disabled = true
             widthReset.disabled = true
-            widthVal.textContent = '—（打开会话后可用）'
+            widthVal.textContent = t('widthUnavailable')
             return
           }
           widthSlider.min = String(info.min)
@@ -817,11 +1527,18 @@ window.__ModuleLoader__.load({
         }
         function renderAll() {
           hideToggle.checked = !!state.hideComposer
+          hideToggle.setAttribute('aria-checked', hideToggle.checked ? 'true' : 'false')
           topToggle.checked = !!state.hideTop
+          topToggle.setAttribute('aria-checked', topToggle.checked ? 'true' : 'false')
           textCjkSelect.value = state.textFontCjk ?? ''
           textLatinSelect.value = state.textFontLatin ?? ''
-          codeFontSelect.value = state.codeFont ?? ''
           renderFontRow()
+          renderCodeSizeRow()
+          renderTerminalSizeRow()
+          renderCodeFontRow()
+          renderTerminalFontRow()
+          renderTextBaseRow()
+          renderGroupSummaries()
           renderTypeRow()
           renderWidthRow()
         }
@@ -829,6 +1546,7 @@ window.__ModuleLoader__.load({
         // ── 功能 1：隐藏输入区（开关 + 整条长条可点） ────────────────────
         function applyHideComposer() {
           state.hideComposer = hideToggle.checked
+          hideToggle.setAttribute('aria-checked', hideToggle.checked ? 'true' : 'false')
           hideTag.disabled = !state.hideComposer
           writeState({ hideComposer: state.hideComposer })
         }
@@ -838,6 +1556,7 @@ window.__ModuleLoader__.load({
         // ── 功能 2：隐藏上边栏（开关 + 整条长条可点） ────────────────────
         function applyHideTop() {
           state.hideTop = topToggle.checked
+          topToggle.setAttribute('aria-checked', topToggle.checked ? 'true' : 'false')
           hideTopTag.disabled = !state.hideTop
           writeState({ hideTop: state.hideTop })
         }
@@ -853,6 +1572,7 @@ window.__ModuleLoader__.load({
           // 其它元素全屏），因此由 fullscreenchange 事件无条件校正开关与补偿标记
           const on = inPageFullscreen()
           fsToggle.checked = on
+          fsToggle.setAttribute('aria-checked', on ? 'true' : 'false')
           const root = document.documentElement
           if (on) root.setAttribute(FS_ATTR, '')
           else root.removeAttribute(FS_ATTR)
@@ -886,53 +1606,47 @@ window.__ModuleLoader__.load({
         fontPlus.addEventListener('click', () => {
           setFontPx((typeof state.fontPx === 'number' ? state.fontPx : fontState.official ?? 16) + 1)
         })
-
-        // ── 功能 5：字体选择（正文·中文 / 正文·西文 / 代码） ───────────
-        textCjkSelect.addEventListener('change', () => {
-          const id = textCjkSelect.value || null
-          state.textFontCjk = fontChoice(availCjk, id) ? id : null
-          textCjkSelect.value = state.textFontCjk ?? ''
-          writeState({ textFontCjk: state.textFontCjk })
-          fontPickBuilt = false
-          rebuildFontPick()
+        // 代码字号：官方角色字号（10–16）的入口；写回后由 theme/change 快照刷新显示
+        codeMinus.addEventListener('click', () => {
+          if (typeof fontState.code !== 'number') return
+          officialSetFontSize('code', Math.max(CODE_FONT_MIN, fontState.code - 1))
         })
-        textLatinSelect.addEventListener('change', () => {
-          const id = textLatinSelect.value || null
-          state.textFontLatin = fontChoice(availLatin, id) ? id : null
-          textLatinSelect.value = state.textFontLatin ?? ''
-          writeState({ textFontLatin: state.textFontLatin })
-          fontPickBuilt = false
-          rebuildFontPick()
+        codePlus.addEventListener('click', () => {
+          if (typeof fontState.code !== 'number') return
+          officialSetFontSize('code', Math.min(CODE_FONT_MAX, fontState.code + 1))
         })
-        codeFontSelect.addEventListener('change', () => {
-          const id = codeFontSelect.value || null
-          state.codeFont = fontChoice(availCode, id) ? id : null
-          codeFontSelect.value = state.codeFont ?? ''
-          writeState({ codeFont: state.codeFont })
-          fontPickBuilt = false
-          rebuildFontPick()
+
+        // ── 功能 5：字体选择（中英分设 / 官方基础 / 代码 / 终端） ──────
+        textCjkSelect.addEventListener('change', () => commitTextFont('cjk', textCjkSelect.value))
+        textLatinSelect.addEventListener('change', () => commitTextFont('latin', textLatinSelect.value))
+        // 终端字号（官方角色字号）
+        termMinus.addEventListener('click', () => {
+          if (typeof fontState.terminal !== 'number') return
+          officialSetFontSize('terminal', Math.max(TERMINAL_FONT_MIN, fontState.terminal - 1))
+        })
+        termPlus.addEventListener('click', () => {
+          if (typeof fontState.terminal !== 'number') return
+          officialSetFontSize('terminal', Math.min(TERMINAL_FONT_MAX, fontState.terminal + 1))
         })
 
         // ── 功能 7：行距 / 字距（0.1 步进；到达边界即回"默认"，覆盖层随之停用） ──
         function setLineHeight(v) {
           const next = Math.min(LINEH_MAX, Math.max(LINEH_MIN, Math.round(v * 10) / 10))
           state.lineHeight = next > LINEH_MIN ? next : null
-          fontPickBuilt = false
-          rebuildFontPick()
+          kickFontPick()
           renderTypeRow()
           writeState({ lineHeight: state.lineHeight })
         }
         function setLetterSpacing(v) {
           const next = Math.min(LETTERSP_MAX, Math.max(LETTERSP_MIN, Math.round(v * 10) / 10))
           state.letterSpacing = next !== 0 ? next : null
-          fontPickBuilt = false
-          rebuildFontPick()
+          kickFontPick()
           renderTypeRow()
           writeState({ letterSpacing: state.letterSpacing })
         }
         function renderTypeRow() {
-          lhVal.textContent = state.lineHeight ? state.lineHeight.toFixed(1) + '×' : '默认'
-          lsVal.textContent = state.letterSpacing ? state.letterSpacing.toFixed(1) + 'px' : '默认'
+          lhVal.textContent = state.lineHeight ? state.lineHeight.toFixed(1) + '×' : t('defaultText')
+          lsVal.textContent = state.letterSpacing ? state.letterSpacing.toFixed(1) + 'px' : t('defaultText')
         }
         lhMinus.addEventListener('click', () => setLineHeight((state.lineHeight ?? LINEH_MIN) - 0.1))
         lhPlus.addEventListener('click', () => setLineHeight((state.lineHeight ?? LINEH_MIN) + 0.1))
@@ -945,16 +1659,67 @@ window.__ModuleLoader__.load({
         let officialDragMoved = false
         let officialDragStart = null
         let officialDragAdopt = false
+        let widthStartupAdopted = false
+        /** 首次拿到有效列宽时，范围宽度以官方键为准：插件停用期间官方改过的宽度
+         *  不会被旧状态覆盖；扩展宽度（> 官方上限）由插件自己持有，不参与采纳。 */
+        function adoptOfficialWidthOnStart() {
+          if (widthStartupAdopted) return
+          const t = widthTargets()
+          if (!t || !(t.column > 0)) return
+          widthStartupAdopted = true
+          if (state.widthPx == null) {
+            markWidthExt(false)
+            return
+          }
+          const omax = officialMaxFor(t.column)
+          const pref = readWidthPreference()
+          if (state.widthExt === true) return // 插件扩展：官方 peg 值不参与
+          if (state.widthExt === false) {
+            // 已知不是扩展：跟随官方。官方键超当前上限按上限；键缺失则收到上限（不再越限）
+            markWidthExt(false)
+            const official = pref == null ? Math.min(state.widthPx, omax) : Math.min(pref, omax)
+            if (official !== state.widthPx) {
+              state.widthPx = Math.min(Math.max(Math.round(official), CONTENT_MIN), extCapFor(t.column))
+              writeState({ widthPx: state.widthPx })
+            }
+            return
+          }
+          // 旧版状态（无 widthExt）：用官方键与插件值的关系推断
+          if (pref == null) {
+            if (state.widthPx > omax) markWidthExt(true)
+            else markWidthExt(false)
+            return
+          }
+          if (pref === state.widthPx && state.widthPx > omax) {
+            // 同一官方镜像因窗口变窄而超出上限：按上限收敛，不能误当扩展覆盖
+            markWidthExt(false)
+            state.widthPx = Math.min(Math.max(Math.round(omax), CONTENT_MIN), extCapFor(t.column))
+            writeState({ widthPx: state.widthPx })
+            return
+          }
+          if (pref < state.widthPx) {
+            // 官方键更低：旧版扩展通常被 peg 在旧上限；保留插件宽度，避免丢扩展
+            markWidthExt(state.widthPx > omax)
+            return
+          }
+          // 官方调大或一致：采纳官方值（超上限按上限）
+          const official = Math.min(pref, omax)
+          markWidthExt(false)
+          if (official === state.widthPx) return
+          state.widthPx = Math.min(Math.max(Math.round(official), CONTENT_MIN), extCapFor(t.column))
+          writeState({ widthPx: state.widthPx })
+        }
         function setWidthPx(v) {
           if (v === null) {
             state.widthPx = null
           } else {
             const t = widthTargets()
-            if (!t) return // 无会话容器（滑块与"自动"此时均处于禁用态）
+            if (!t || !(t.column > 0)) return // 无可用会话列宽（滑块与"自动"此时均处于禁用态）
             state.widthPx = Math.min(Math.max(Math.round(v), CONTENT_MIN), extCapFor(t.column))
           }
-          applyWidthState()
+          applyWidthState(v === null)
           writeState({ widthPx: state.widthPx })
+          refreshWidthTargets()
           renderWidthRow()
         }
         widthSlider.addEventListener('pointerdown', () => {
@@ -967,6 +1732,7 @@ window.__ModuleLoader__.load({
           }
         }
         window.addEventListener('pointerup', onWindowPointerUp)
+        window.addEventListener('pointercancel', onWindowPointerUp)
         widthSlider.addEventListener('input', () => {
           setWidthPx(Number(widthSlider.value))
         })
@@ -979,11 +1745,13 @@ window.__ModuleLoader__.load({
           const target = e.target
           const handle = target && target.closest ? target.closest('[data-width-handle]') : null
           if (handle) {
+            if (state.open) attachWidthObserver()
+            attachColumnObserver()
             officialDragging = true
             officialDragMoved = false
             officialDragStart = { x: e.clientX, y: e.clientY }
             const t = widthTargets()
-            officialDragAdopt = !!(t && state.widthPx != null && state.widthPx > officialMaxFor(t.column))
+            officialDragAdopt = !!(t && t.column > 0 && state.widthPx != null && state.widthPx > officialMaxFor(t.column))
           }
           if (state.open && !panel.contains(target) && !fab.contains(target)) {
             togglePanel(false)
@@ -1002,29 +1770,38 @@ window.__ModuleLoader__.load({
         }
         function onDocPointerUp() {
           if (!officialDragging) return
-          const adopt = officialDragAdopt && officialDragMoved
+          const moved = officialDragMoved
           officialDragMoved = false
           officialDragStart = null
           officialDragAdopt = false
-          if (!adopt) {
+          if (!moved) {
             officialDragging = false
+            refreshWidthTargets()
             return
           }
-          // 采纳期间保持"官方拖动中"状态：定点漂移修复不会抢在官方提交之前插手
+          // 任何一次官方手柄拖动松手后都采纳官方最终值（含范围内拖动）；
+          // 等待 0ms 让官方先提交，期间保持"官方拖动中"避免漂移修复抢跑。
           setTimeout(() => {
+            if (disposed) return
             officialDragging = false
             const pref = readWidthPreference()
             state.widthPx = pref != null ? pref : null
             applyWidthState()
             writeState({ widthPx: state.widthPx })
-            renderWidthRow()
+            refreshWidthTargets()
           }, 0)
         }
         function onDocPointerCancel() {
+          const restore = officialDragAdopt && state.widthPx != null
           officialDragging = false
           officialDragMoved = false
           officialDragStart = null
           officialDragAdopt = false
+          if (restore) {
+            // 拖动被系统取消（未松手）：把交还官方时移除的扩展覆盖装回去
+            applyWidthState()
+          }
+          refreshWidthTargets() // 释放拖动期临时挂上的观察器，并按当前宽度归位
         }
         document.addEventListener('pointerdown', onDocPointerDown, true)
         document.addEventListener('pointermove', onDocPointerMove, true)
@@ -1034,7 +1811,7 @@ window.__ModuleLoader__.load({
         // 官方手柄拖动 / 窗口尺寸变化 → 目标元素 style 变化 → 反向同步面板
         let watchedTarget = null
         const widthObserver = new MutationObserver(() => {
-          if (!widthDragging) renderWidthRow()
+          if (!disposed && state.open && !widthDragging) renderWidthRow()
         })
         function attachWidthObserver() {
           const t = widthTargets()
@@ -1050,7 +1827,11 @@ window.__ModuleLoader__.load({
         // 官方键/官方变量的收敛压到同一批回调内，开合过程不再出现滞留窄值的中间态。
         let watchedColumn = null
         const columnObserver = new ResizeObserver(() => {
+          if (disposed) return
+          adoptOfficialWidthOnStart()
           normalizeWidthDrift()
+          if (state.widthPx != null && !widthTargets()) scheduleWidthTargetRetry()
+          else widthTargetRetryCount = 0
           if (state.open && !officialDragging && !widthDragging) renderWidthRow()
         })
         function attachColumnObserver() {
@@ -1062,84 +1843,58 @@ window.__ModuleLoader__.load({
           if (container) columnObserver.observe(container)
         }
 
-        // ── 功能 3 的服务对接：订阅官方主题（字号基准与官方直连） ────────
-        ctx.inject(['theme'], (tctx) => {
-          fontSvc = tctx.theme
-          let firstSync = true
-          const sync = (snap) => {
-            const n = snap && snap.fontSize
-            if (typeof n === 'number' && n > 0) fontState.official = n
-            if (!fontSelfWrite) {
-              if (
-                firstSync &&
-                typeof state.fontPx === 'number' &&
-                state.fontPx <= FONT_OFFICIAL_MAX &&
-                state.fontPx !== fontState.official
-              ) {
-                // 启动恢复：面板上次设定的字号（范围内）直写回官方设置，
-                // 保证"范围内 ⇔ 官方值 === 面板值"的稳定关系
-                firstSync = false
-                applyFont()
-                writeOfficialFont(state.fontPx) // 官方更新后会再次进入本函数（自写标记路径）
-                return
-              }
-              firstSync = false
-              if (typeof state.fontPx !== 'number') state.fontPx = fontState.official
-              else if (state.fontPx <= FONT_OFFICIAL_MAX) state.fontPx = fontState.official // 范围内以官方为准
-              // 超出 22 的绝对目标保持不动，倍率自动适配
-              writeState({ fontPx: state.fontPx })
-              renderFontRow()
-            }
-            applyFont()
+        /** 只在明确事件（启动/会话切换/面板打开/窗口变化/官方手柄）后复核宽度。 */
+        function refreshWidthTargets() {
+          adoptOfficialWidthOnStart()
+          // 只有面板打开时才需要监听官方手柄写变量（用于滑杆实时回显）；
+          // 列观察仅在扩展宽度生效或面板打开时需要；其余时候不挂任何后台观察器。
+          if (state.open) attachWidthObserver()
+          else {
+            widthObserver.disconnect()
+            watchedTarget = null
           }
-          // 先订阅、再首读：启动恢复的 setFontSize 会同步发布 theme/change，
-          // 若先读后订会错过这次回声（官方值会暂时读旧）
-          tctx.on('theme/change', (snap) => sync(snap))
-          try {
-            sync(tctx.theme.getTheme())
-          } catch {
-            applyFont() // 服务首读异常时至少按兜底基准绘制一次
+          if (state.open || state.widthPx != null) attachColumnObserver()
+          else {
+            columnObserver.disconnect()
+            watchedColumn = null
           }
-        })
-
-        // ── 启动时应用已保存的功能状态 ──────────────────────────────────
-        if (typeof state.fontPx === 'number') {
-          state.fontPx = Math.min(FONT_MAX, Math.max(FONT_MIN, Math.round(state.fontPx)))
-        } else {
-          state.fontPx = null
+          normalizeWidthDrift()
+          // 会话容器可能晚于插件挂载：有保存宽度但暂时没有目标时，做有限次重试
+          if (state.widthPx != null && !widthTargets()) scheduleWidthTargetRetry()
+          else widthTargetRetryCount = 0
+          if (state.open && !officialDragging && !widthDragging) renderWidthRow()
+        }
+        let widthRefreshTimer = null
+        let widthTargetRetry = null
+        let widthTargetRetryCount = 0
+        function scheduleWidthTargetRetry() {
+          if (disposed || widthTargetRetry || widthTargetRetryCount >= 3) return
+          widthTargetRetry = setTimeout(() => {
+            widthTargetRetry = null
+            widthTargetRetryCount += 1
+            if (!disposed) refreshWidthTargets()
+          }, 250)
+        }
+        function scheduleWidthRefresh() {
+          // 自动宽度且面板关闭时，会话切换没有宽度工作要做，直接忽略
+          if (!state.open && state.widthPx == null) return
+          if (disposed || widthRefreshTimer) return
+          widthRefreshTimer = setTimeout(() => {
+            widthRefreshTimer = null
+            if (!disposed) refreshWidthTargets()
+          }, 0)
         }
-        if (typeof state.widthPx !== 'number' || !(state.widthPx > 0)) state.widthPx = null
-        if (typeof state.lineHeight === 'number') {
-          const lh = Math.min(LINEH_MAX, Math.max(LINEH_MIN, Math.round(state.lineHeight * 10) / 10))
-          state.lineHeight = lh > LINEH_MIN ? lh : null
-        } else state.lineHeight = null
-        if (typeof state.letterSpacing === 'number') {
-          const ls = Math.min(LETTERSP_MAX, Math.max(LETTERSP_MIN, Math.round(state.letterSpacing * 10) / 10))
-          state.letterSpacing = ls !== 0 ? ls : null
-        } else state.letterSpacing = null
-        state.panelX = typeof state.panelX === 'number' ? state.panelX : null
-        state.panelY = typeof state.panelY === 'number' ? state.panelY : null
-        state.panelH = typeof state.panelH === 'number' && state.panelH > 0 ? state.panelH : null
 
         // ── 字体选择：本机可用性过滤 + 选择恢复 + 覆盖层生成 ────────────
-        function fillFontSelect(select, list) {
-          select.textContent = ''
-          const def = el('option', null, '默认（官方）')
-          def.value = ''
-          select.append(def)
-          for (const f of list) {
-            const opt = el('option', null, f.label)
-            opt.value = f.id
-            select.append(opt)
-          }
-        }
-        const availCjk = TEXT_FONTS_CJK.filter((f) => fontAvailable(f.name)) // 只保留本机已装
-        const availLatin = TEXT_FONTS_LATIN.filter((f) => fontAvailable(f.name))
-        const availCode = CODE_FONTS.filter((f) => fontAvailable(f.name))
-        fillFontSelect(textCjkSelect, availCjk)
-        fillFontSelect(textLatinSelect, availLatin)
-        fillFontSelect(codeFontSelect, availCode)
-        // 已保存的选择若已不在本机（被卸载 / 换机器）→ 回默认
+        const availCjk = installedFonts('cjk')
+        const availLatin = installedFonts('latin')
+        const availCode = installedFonts('code')
+        fillFontOptions(textCjkSelect, availCjk)
+        fillFontOptions(textLatinSelect, availLatin)
+        textBasePicker.fill(installedFonts('text'))
+        codeFontPicker.fill(availCode)
+        terminalFontPicker.fill(availCode)
+        // 已保存的正文字体选择若已不在本机（被卸载 / 换机器）→ 回默认
         let fontsReset = false
         if (state.textFontCjk && !fontChoice(availCjk, state.textFontCjk)) {
           state.textFontCjk = null
@@ -1149,29 +1904,61 @@ window.__ModuleLoader__.load({
           state.textFontLatin = null
           fontsReset = true
         }
-        if (state.codeFont && !fontChoice(availCode, state.codeFont)) {
-          state.codeFont = null
-          fontsReset = true
-        }
-        if (fontsReset) writeState({ textFontCjk: state.textFontCjk, textFontLatin: state.textFontLatin, codeFont: state.codeFont })
+        if (fontsReset) writeState({ textFontCjk: state.textFontCjk, textFontLatin: state.textFontLatin })
         let fontPickBuilt = false
-        /** 生成 / 刷新字体与排版覆盖层；官方主题未就绪时保持停用，等定时器重试。 */
+        let fontRetryTimer = null
+        let fontRetryStep = 0
+        const FONT_RETRY_DELAYS = [250, 750, 1500, 3000, 5000]
+        function hasFontFeatures() {
+          return !!(state.textFontCjk || state.textFontLatin || state.lineHeight != null || state.letterSpacing != null)
+        }
+        function cancelFontRetry() {
+          if (fontRetryTimer) {
+            clearTimeout(fontRetryTimer)
+            fontRetryTimer = null
+          }
+        }
+        /** 官方主题样式可能晚于插件就绪：有限次退避重试，不常驻轮询。 */
+        function scheduleFontRetry() {
+          if (disposed || fontPickBuilt || fontRetryTimer || !hasFontFeatures()) return
+          if (fontRetryStep >= FONT_RETRY_DELAYS.length) return
+          const delay = FONT_RETRY_DELAYS[fontRetryStep++]
+          fontRetryTimer = setTimeout(() => {
+            fontRetryTimer = null
+            if (!disposed) rebuildFontPick()
+          }, delay)
+        }
+        /** 生成 / 刷新字体与排版覆盖层；主题未就绪时保持停用并安排有限重试。 */
         function rebuildFontPick() {
-          if (!state.textFontCjk && !state.textFontLatin && !state.codeFont && state.lineHeight == null && state.letterSpacing == null) {
+          if (!hasFontFeatures()) {
+            cancelFontRetry()
             fontPickTag.disabled = true
             fontPickBuilt = false
             return
           }
           if (fontPickBuilt) return
           const css = buildFontPickCss()
-          if (!css) return
+          if (!css) {
+            scheduleFontRetry()
+            return
+          }
+          cancelFontRetry()
+          fontRetryStep = 0
           fontPickTag.textContent = css
           fontPickTag.disabled = false
           fontPickBuilt = true
         }
+        /** 用户主动改字体/行距：重开一轮有限重试。 */
+        function kickFontPick() {
+          fontRetryStep = 0
+          cancelFontRetry()
+          fontPickBuilt = false
+          rebuildFontPick()
+        }
 
         applyFont()
         renderAll()
+        adoptOfficialWidthOnStart()
         applyWidthState()
         rebuildFontPick()
         // 面板开着启动（上次退出未关）：补挂载定位——不经 togglePanel 时面板没有
@@ -1214,6 +2001,11 @@ window.__ModuleLoader__.load({
         fab.addEventListener('pointermove', onPointerMove)
         fab.addEventListener('pointerup', onPointerUp)
         fab.addEventListener('pointercancel', onPointerCancel)
+        // 键盘激活（Enter/Space）产生的 click 没有指针坐标，单独走开合；
+        // 鼠标 click 的 detail>0，由 pointerup 路径处理，避免双触发。
+        fab.addEventListener('click', (e) => {
+          if (e.detail === 0) togglePanel(!state.open)
+        })
         closeBtn.addEventListener('click', () => togglePanel(false))
 
         // ── 功能 8：面板拖动 / 拉拽高度 ──────────────────────────────────
@@ -1322,7 +2114,7 @@ window.__ModuleLoader__.load({
         window.addEventListener('pointermove', onPanelPointerMove)
         window.addEventListener('pointerup', onPanelPointerUp)
         window.addEventListener('pointercancel', onPanelPointerUp)
-        headRow.title = '面板任意空白处可拖动 · 双击标题栏复位'
+        headRow.title = t('dragHint')
         headRow.addEventListener('dblclick', () => {
           // 复位：回到自动布局（位置 + 高度一起，回到"高度锁"状态）
           state.panelX = null
@@ -1369,16 +2161,46 @@ window.__ModuleLoader__.load({
           })
           return turndownSvc
         }
+        /** 压缩段间空行，但围栏代码块内部原样保留（代码里的连续空行不能被折掉）。 */
+        function tidyMarkdown(md) {
+          const out = []
+          let fence = null
+          let blanks = 0
+          for (const line of md.split('\n')) {
+            const m = /^\s*(?:>\s*)*(`{3,}|~{3,})/.exec(line)
+            if (fence) {
+              out.push(line)
+              if (m && m[1][0] === fence[0] && m[1].length >= fence.length &&
+                  /^\s*(?:>\s*)*(?:`{3,}|~{3,})\s*$/.test(line)) fence = null
+              continue
+            }
+            if (!line.trim()) {
+              if (blanks < 1) out.push('')
+              blanks += 1
+              continue
+            }
+            blanks = 0
+            out.push(line)
+            if (m) fence = m[1]
+          }
+          return out.join('\n').trim()
+        }
         function onCopy(e) {
           try {
             const sel = document.getSelection()
             if (!sel || sel.isCollapsed || !sel.rangeCount) return
             // 选区两端都要在消息行内才接管（跨区选择保持系统默认行为）
             const inChat = (n) => {
-              const el = n && (n.nodeType === 3 ? n.parentElement : n)
-              return !!(el && el.closest && el.closest('[data-chat-node-key]'))
+              const node = n && (n.nodeType === 3 ? n.parentElement : n)
+              return !!(node && node.closest && node.closest('[data-chat-node-key]'))
             }
             if (!inChat(sel.anchorNode) || !inChat(sel.focusNode)) return
+            // 可编辑区域（输入框/富文本编辑器）保持原生复制
+            const inEditable = (n) => {
+              const node = n && (n.nodeType === 3 ? n.parentElement : n)
+              return !!(node && node.closest && node.closest('input, textarea, [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"]'))
+            }
+            if (inEditable(sel.anchorNode) || inEditable(sel.focusNode)) return
             const elOf = (n) => (n && n.nodeType === 3 ? n.parentElement : n)
             const ka = elOf(sel.anchorNode).closest('.katex')
             const kf = elOf(sel.focusNode).closest('.katex')
@@ -1393,10 +2215,17 @@ window.__ModuleLoader__.load({
               }
             }
             // 与 KaTeX 官方 copy-tex 同策略：端点落在公式内时先把工作范围扩到整个公式，
-            // "只碰一角"也能拿到完整 LaTeX（只影响复制内容，不动真实选区）
+            // "只碰一角"也能拿到完整 LaTeX。必须按 Range 的实际起止端判断，
+            // 不能按 anchor/focus —— 从右向左拖选时方向相反，按方向扩会截掉选区左侧。
             const work = sel.getRangeAt(0).cloneRange()
-            if (ka) work.setStartBefore(ka)
-            if (kf) work.setEndAfter(kf)
+            const katexAt = (n) => {
+              const node = elOf(n)
+              return node && node.closest ? node.closest('.katex') : null
+            }
+            const ks = katexAt(work.startContainer)
+            const ke = katexAt(work.endContainer)
+            if (ks) work.setStartBefore(ks)
+            if (ke) work.setEndAfter(ke)
             const box = document.createElement('div')
             // 选区克隆丢掉共同祖先往上的层级（代码块外层的 <pre> 即如此丢的），转换器的
             // 空白折叠随即把换行折掉；按现场回收"预格式化"祖先链（判据=实际生效的
@@ -1409,10 +2238,16 @@ window.__ModuleLoader__.load({
               anc = anc.parentElement
             }
             let topShell = -1
+            let inlineShell = -1
+            const INLINE_SHELL = new Set(['CODE', 'STRONG', 'B', 'EM', 'I', 'DEL', 'S', 'STRIKE', 'A'])
             for (let i = 0; i < ancShells.length; i++) {
               const ws = getComputedStyle(ancShells[i]).whiteSpace
               if (ws === 'pre' || ws === 'pre-wrap' || ws === 'pre-line' || ws === 'break-spaces') topShell = i
+              // 行内语义元素同样会在克隆时丢外壳：<code> 补 `…`，粗体/斜体/
+              // 删除线/链接补对应 Markdown；取最外层，嵌套格式才能完整保留。
+              if (INLINE_SHELL.has(ancShells[i].tagName)) inlineShell = i
             }
+            if (topShell < 0 && inlineShell >= 0) topShell = inlineShell
             let nestAt = box
             for (let i = topShell; i >= 0; i--) {
               const shell = ancShells[i].cloneNode(false)
@@ -1422,8 +2257,7 @@ window.__ModuleLoader__.load({
             nestAt.append(work.cloneContents())
             // 公式场景先留存原始 HTML（含 <math>）：粘进 Word 等富目标仍可显示公式
             const html = box.querySelector('.katex') ? box.innerHTML : null
-            // 标签→Markdown 映射由标准库 turndown 承担（公式已由上面的 katex 规则还原为 LaTeX）
-            const md = getTurndown().turndown(box).replace(/\n{3,}/g, '\n\n').trim()
+            const md = tidyMarkdown(getTurndown().turndown(box))
             if (!md) return
             e.clipboardData.setData('text/plain', md)
             if (html) e.clipboardData.setData('text/html', html)
@@ -1434,43 +2268,54 @@ window.__ModuleLoader__.load({
           }
         }
         document.addEventListener('copy', onCopy, true)
+        /** 文本编辑类控件里的 Esc 先交给控件（取消输入/收起下拉），不关面板。 */
+        function isTextEditingTarget(n) {
+          if (!n || !n.closest) return false
+          if (n.closest('textarea, [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"]')) return true
+          return n.tagName === 'INPUT' && /^(text|search|email|url|tel|password|number)$/i.test(String(n.type || ''))
+        }
+        function onDocKeyDown(e) {
+          if (e.key !== 'Escape' || !state.open || e.defaultPrevented) return
+          if (document.fullscreenElement) return // 全屏下 Esc 先交给浏览器退出全屏
+          // 只保护插件面板内的文本编辑控件；其它区域照常 Esc 收起面板
+          if (e.target && e.target.closest && e.target.closest('.dsrb-panel') && isTextEditingTarget(e.target)) return
+          // 官方对话框 / 菜单里按 Esc：让官方先处理，不抢关面板
+          const inOverlay = (n) => !!(n && n.closest && n.closest('[role="dialog"], [role="menu"], [role="listbox"]'))
+          if (inOverlay(e.target) || inOverlay(document.activeElement)) return
+          togglePanel(false) // 不 preventDefault：不吞官方自己的 Esc 行为
+        }
+        document.addEventListener('keydown', onDocKeyDown)
 
         function onResize() {
           const [x, y] = clampPos(fab.offsetLeft, fab.offsetTop, FAB_SIZE, FAB_SIZE)
           fab.style.left = x + 'px'
           fab.style.top = y + 'px'
-          normalizeWidthDrift()
-          if (state.open) {
-            renderWidthRow()
-            placePanel()
-          }
+          refreshWidthTargets()
+          if (state.open) placePanel()
         }
         window.addEventListener('resize', onResize)
 
-        // 会话 DOM 迟现/被替换 → 轻量定时器持续核对（同节点零开销），顺带漂移兜底与
-        // 面板宽度行刷新；列宽突变由 columnObserver 即时处理，定时器只兜底重挂。
-        attachWidthObserver()
-        attachColumnObserver()
-        const retryTimer = setInterval(() => {
-          attachWidthObserver()
-          attachColumnObserver()
-          normalizeWidthDrift()
-          rebuildFontPick() // 官方主题样式稍后就绪时补建覆盖层（已建则零开销早退）
-          if (state.open && !officialDragging && !widthDragging) renderWidthRow()
-        }, 2000)
+        // 宽度目标只随事件变化：启动、面板打开、窗口尺寸、会话切换、官方手柄操作。
+        refreshWidthTargets()
 
         // 启动标记：记录加载时刻与版本（供诊断确认插件已加载；不影响功能）
         writeState({ lastBootAt: Date.now(), lastBootVersion: VERSION })
-        console.log('[dsh-happy-reader] 客户端半边已加载 v' + VERSION)
 
-        // ── 卸载清理（官方 ctx.effect 机制自动执行；同一函数登记到 window.__dsrbDispose
-        //    供热重载重建前先拆旧实例；幂等，可重复调用） ──
+        // ── 卸载清理（React 槽位卸载 / 插件热重载 / ctx.effect 三路都会触发；
+        //    幂等，可重复调用） ──
         const dispose = () => {
-          clearInterval(retryTimer)
+          if (disposed) return // 幂等：热重载/槽位卸载可能重复调用，不能重复抹掉新实例的全局变量
+          disposed = true
+          overlayAlive = false
+          ui = null
+          if (widthRefreshTimer) { clearTimeout(widthRefreshTimer); widthRefreshTimer = null }
+          if (widthTargetRetry) { clearTimeout(widthTargetRetry); widthTargetRetry = null }
+          cancelFontRetry()
           widthObserver.disconnect()
           columnObserver.disconnect()
           window.removeEventListener('resize', onResize)
           window.removeEventListener('pointerup', onWindowPointerUp)
+          window.removeEventListener('pointercancel', onWindowPointerUp)
           window.removeEventListener('pointermove', onPanelPointerMove)
           window.removeEventListener('pointerup', onPanelPointerUp)
           window.removeEventListener('pointercancel', onPanelPointerUp)
@@ -1479,6 +2324,7 @@ window.__ModuleLoader__.load({
           document.removeEventListener('pointerup', onDocPointerUp, true)
           document.removeEventListener('pointercancel', onDocPointerCancel, true)
           document.removeEventListener('copy', onCopy, true)
+          document.removeEventListener('keydown', onDocKeyDown)
           fab.remove()
           panel.remove()
           style.remove()
@@ -1491,14 +2337,62 @@ window.__ModuleLoader__.load({
           document.documentElement.removeAttribute(FS_ATTR)
           document.documentElement.style.removeProperty('--dsrb-font-base')
           document.documentElement.style.removeProperty('--dsrb-font-scale')
-          const t = widthTargets()
-          if (t) t.container.style.removeProperty('--dsh-chat-content-width')
+          turndownSvc = null
+          const target = widthTargets()
+          if (target) target.container.style.removeProperty('--dsh-chat-content-width')
+          // 仅当全局句柄仍属于本实例时才释放，避免抹掉新实例的热重载句柄
+          if (window.__dsrbDisposeOwner === INSTANCE_TOKEN) {
+            window.__dsrbDispose = null
+            window.__dsrbDisposeOwner = null
+          }
+          // 插件被停用/卸载（语言切换重挂除外）时退出本插件进入的全屏，恢复窗口态
+          if (!remounting && document.fullscreenElement === document.documentElement) {
+            try {
+              const p = document.exitFullscreen()
+              if (p && typeof p.catch === 'function') p.catch(() => {})
+            } catch { /* 退出失败不阻塞拆除 */ }
+          }
         }
-        ctx.effect(() => dispose, 'dsh-happy-reader: 实体与监听')
-        window.__dsrbDispose = dispose
+        // 主题/语言事件通过该句柄刷新本层 UI（apply 级用到）
+        function applyTextFonts() {
+          textCjkSelect.value = state.textFontCjk ?? ''
+          textLatinSelect.value = state.textFontLatin ?? ''
+          kickFontPick()
+          renderGroupSummaries()
+        }
+        function refreshFontPick() { kickFontPick() }
+        ui = {
+          applyFont,
+          renderFontRow,
+          renderCodeSizeRow,
+          renderCodeFontRow,
+          renderTerminalSizeRow,
+          renderTerminalFontRow,
+          renderTextBaseRow,
+          renderGroupSummaries,
+          refreshFontPick,
+          applyTextFonts,
+          scheduleWidthRefresh,
+        }
+        // 热重载句柄必须连同设置页一起拆：设置行不在 mount 的 DOM 树里
+        window.__dsrbDispose = () => {
+          dispose()
+          if (settingsDispose) {
+            try { settingsDispose() } catch { /* 忽略 */ }
+            settingsDispose = null
+          }
+          settingsHost = null
+          settingsRefresh = null
+          settingsAlive = false
+        }
+        window.__dsrbDisposeOwner = INSTANCE_TOKEN
+        return dispose
       } catch (err) {
-        // 任何意外都只记日志，不影响应用本体
-        console.error('[dsh-happy-reader] 挂载失败：', err)
+        // 任何意外都只记日志并清掉半成品，不影响应用本体
+        console.error('[dsh-happy-reader] 面板实体初始化失败：', err)
+        overlayAlive = false
+        try { host.textContent = '' } catch { /* 忽略 */ }
+        return () => {}
       }
     }
 
@@ -2526,6 +3420,7 @@ return exports;
     // ══ vendored: turndown-plugin-gfm end ══
 
     exports.apply = apply
+    exports.inject = ['slots']
 
     return module.exports
   },