dsh-theme-customizer 1.0.0

package/lib/client.js

@@ -0,0 +1,3102 @@
+// Generated by build_static.cjs from p3_2_client.js (clientBodyP31).
+// Static bundle for the dsh web client module system.
+// Do not edit by hand; regenerate with: node build_static.cjs <src> <dst>
+window.__ModuleLoader__.load({
+  id: "dsh-theme-customizer",
+  factory: (require) => {
+    const module = { exports: {} }
+    const exports = module.exports
+    Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" })
+    const React = require("react")
+    const plugin = {
+    apply(ctx) {
+      // ════════ 00_constants.js ════════
+      // ┌─ 片段 00_constants ─────────────────────────────
+      // │ 职责：apply 入口（slots 守卫）+ 模块/区域/颜色常量
+      // │ 定义：MODULES / AREAS / COLOR_ITEMS / COLOR_TOKENS / emptyArea
+      // │ 测试：改区域或模块清单后检查设置页渲染；改 emptyArea 检查配置默认值
+      const slots = ctx.get('slots')
+      if (slots === undefined) return
+
+      const MODULES = [
+        { id: 'background', title: '界面' },
+        // 框线板块（v0.9.18）：所有 UI 默认边框/分隔线颜色 + 透明度，5 区域独立；放「字体颜色」上面（用户定）
+        { id: 'borders', title: '框线' },
+        { id: 'colors', title: '字体颜色' },
+        { id: 'layout', title: '布局调整' },
+        { id: 'presets', title: '预设' },
+      ]
+      // 框线区域（v0.9.18）：main=主界面（含侧边栏，覆盖布局三列）/ cordis=Cordis 插件界面 / composer=输入区 /
+      // details=设置界面 / float=浮窗面板；label 显示名在 15_borders.js，选择器在 07_css_builder buildBordersCss
+      const BORDER_KEYS = ['main', 'cordis', 'composer', 'details', 'float']
+      // 框线默认色（v0.9.18 用户定）：主界面/Cordis/输入区 = 淡灰 #e6e6e6（官方 border-l2 rgba(0,0,0,.1) 白底合成，与色块一致）；
+      // 设置界面/浮窗面板 = 黑色。CSS 用（07 buildBordersCss）、色块显示用（15 BordersModule）共用一处定义
+      const BORDER_DEFAULT_LIGHT = '#e6e6e6'
+      const BORDER_DEFAULT_DARK = '#000000'
+      const AREAS = [
+        { id: 'app', label: '主界面', supported: true, modes: ['none', 'color', 'image'] },
+        { id: 'sidebar', label: '侧边栏', supported: true, modes: ['none', 'transparent', 'color', 'image'] },
+        { id: 'conversation', label: '对话区', supported: true, modes: ['none'] },
+        { id: 'composer', label: '输入区', supported: true, modes: ['none', 'color', 'image'] },
+        // 设置界面（2026-08-22，v0.9.12）：官方设置面板 [class*="VOzbGW_panel"]（居中模态，背景 --dsw-alias-bg-layer-2，圆角 24px）
+        // 逻辑类似主界面：无/纯色/图片 + 透明度 + 底色；无显示区域开关（非 app）
+        { id: 'details', label: '设置界面', supported: true, modes: ['none', 'color', 'image'] },
+        // 浮窗面板（2026-08-22，v0.9.13）：自研浮窗 [data-thmcz-float]（原 floatOpacity 滑条已删，改背景调整）
+        // 逻辑类似主界面：无/纯色/图片 + 透明度 + 底色；无显示区域开关
+        { id: 'float', label: '浮窗面板', supported: true, modes: ['none', 'color', 'image'] },
+        // Cordis 插件界面（2026-08-22，v0.9.14）：官方 Cordis 面板 [class*="Nqubda_panel"]（z-index:30 建层叠上下文 → ::before 安全，
+        // 背景 --dsw-alias-bg-base，圆角 12px）。原 cordisOpacity 滑条已删，改背景调整（像设置界面）+ 底色含透明度
+        { id: 'cordis', label: 'Cordis 插件界面', supported: true, modes: ['none', 'color', 'image'] },
+      ]
+      // P3 文字颜色分类（用户确认的 5 类）
+      const COLOR_ITEMS = [
+        { key: 'main', label: '正文', desc: '消息正文、标题、侧边栏导航、菜单项' },
+        { key: 'process', label: '过程文字', desc: '工具调用(read/pwsh)、思考摘要、上下文计量' },
+        { key: 'aux', label: '辅助文字', desc: '时间戳、描述、次级信息' },
+        { key: 'faded', label: '弱化文字', desc: '注释、占位符、禁用态' },
+        { key: 'accent', label: '强调文字', desc: '链接、激活高亮、品牌色文字' },
+      ]
+      const COLOR_TOKENS = {
+        main: ['--dsw-alias-label-primary'],
+        process: ['--dsw-alias-label-tertiary'],
+        aux: ['--dsw-alias-label-secondary'],
+        faded: ['--dsw-alias-label-caption', '--dsw-alias-label-dimmed'],
+        accent: ['--dsw-alias-brand-primary'],
+      }
+      function emptyArea() { return { mode: 'none', color: '#ffffff', opacity: 0, image: null, bottomColor: null, bottomEnabled: false, bottomOpacity: 0 } }
+
+      // ════════ 01_state.js ════════
+      // ┌─ 片段 01_state ─────────────────────────────────
+      // │ 职责：全部可变状态 + 默认值（区域/新会话/浮窗/Cordis/透明度提示）
+      // │ 测试：新增配置字段 = 此片段加 let + 05_storage 持久化 + 06_presets 预设快照三处联动
+      let floatVisible = false
+      let floatPos = { x: 80, y: 80, width: 560, height: 640 }
+      // v0.9.20 默认全开（含框线 borders——v0.9.18 加模块时漏加，这里补上；含布局调整 layout）
+      let floatModules = { background: true, borders: true, colors: true, layout: true, presets: true }
+      let floatShowReset = true // 浮窗内是否显示「全局恢复默认」按钮（v0.9.16）
+      let cordisEntry = true // Cordis 按钮常驻开关（侧边栏设置上方）
+      let areas = {
+        // 透明度语义统一：数值大 = 透明（主界面与侧边栏一致）；默认 0 = 不透明（实/清晰）
+        // 主界面底色：默认开启白色（bottomEnabled/bottomColor/bottomOpacity，复用 emptyArea 字段，逻辑同侧边栏）
+        // 作用是主界面最底层垫色：模式"无"时显示白底；纯色/图片盖在底色之上
+        app: { ...emptyArea(), opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 },
+        sidebar: { ...emptyArea(), opacity: 0 },
+        // 输入区（composer）：像主界面——默认白底常驻（bottomEnabled:true/color:#fff），背景作用在 [data-composer-seat]
+        composer: { ...emptyArea(), opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 },
+        // 设置界面（details，v0.9.12）：像主界面——默认白底常驻，背景作用在官方设置面板 [class*="VOzbGW_panel"]
+        details: { ...emptyArea(), opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 },
+        // 浮窗面板（float，v0.9.13）：像主界面——默认白底常驻，背景作用在自研浮窗容器 [data-thmcz-float]
+        float: { ...emptyArea(), opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 },
+        // Cordis 插件界面（cordis，v0.9.14）：像主界面——默认白底常驻，背景作用在官方 Cordis 面板 [class*="Nqubda_panel"]
+        cordis: { ...emptyArea(), opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 },
+        conversation: emptyArea(),
+      }
+      // 新会话按钮（侧边栏顶部"新建会话"）：showText=显示"新会话"文本；showIcon=显示图标；
+      // 样式 mode: none(无) / color(纯色) / image(图片)，独立于侧边栏模式与底色（与主界面/侧边栏同套逻辑），
+      // 透明度语义与侧边栏一致（大=透明）；底色（bottomEnabled/bottomColor/bottomOpacity）独立控制按钮底色
+      // v0.9.20：默认底色**开启 + 白色**（用户定；主界面/输入区同款默认白底）
+      // 旧数据 unified（"与侧边栏样式统一"）已废弃删除：unified=true 的旧效果 = 样式"无"
+      let newSession = {
+        showText: true, showIcon: true, mode: 'none', color: '#ffffff', opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0, image: null,
+        // 图标/文本颜色：null = 跟随正文（官方默认），设置后独立覆盖（与正文解耦）
+        iconColor: null, textColor: null,
+      }
+      // DeepSeek Harness 标志（左上角品牌行，v0.9.17）：默认品牌蓝 #3964fe + 不透明。
+      // 与正文解耦（常驻独立色，不跟随 --dsw-alias-label-primary）；透明度语义同全局（数值大=透明）；
+      // 作用于 .hHd-Xa_brand svg（BrandWordmark 的 path 全部 fill:currentColor → 给 svg 设 color 即变色）
+      let brand = { color: '#3964fe', opacity: 0 }
+      // 标志文字 "Harness" 部分单独颜色（v0.9.20）：color null = 跟随标志整体色（brand）；
+      // BrandWordmark path 顺序：第 1-10 个 = DeepSeek，第 11-17 个 = Harness（x 坐标 132-178）
+      // → CSS `svg path:nth-child(n+11) { fill: 色 }` 直接覆盖 currentColor
+      let brandHarness = { color: null, opacity: 0 }
+      // 框线（v0.9.18）：所有 UI 默认边框/分隔线颜色 + 透明度（数值大=透明），5 区域独立。
+      // color null=官方默认（此时 opacity>0 用 color-mix 淡化官方色，层级保留）；
+      // main=主界面（含侧边栏）/ cordis=Cordis 插件界面 / composer=输入区 / details=设置界面 / float=浮窗面板
+      let borders = {
+        main: { color: null, opacity: 0 },
+        cordis: { color: null, opacity: 0 },
+        composer: { color: null, opacity: 0 },
+        details: { color: null, opacity: 0 },
+        float: { color: null, opacity: 0 },
+      }
+      // 设置界面面板拖动位置（v0.9.19）：null=官方居中（默认）；{x,y}=拖动后的固定位置（persist 到 localStorage）
+      // 拖动用内联 style 直更（pointermove），pointerup 写回本状态 → CSS 重建保持位置（刷新不丢）
+      let detailsPos = null
+      // 设置界面可移动开关（v0.9.19，布局调整板块）：false = 面板不可拖动（拖动委托直接忽略）+ 恢复原位按钮消失
+      let detailsDragEnabled = true
+      let sidebarInfo = null
+      let baseBg = 'rgba(249,250,251,1)'
+      let colors = { main: null, process: null, aux: null, faded: null, accent: null }
+      let officialColors = {} // 官方原色参考（读 computed style）
+      // 透明度说明提示（界面板块顶部，默认显示，可在「其他」板块关闭）
+      let showOpacityHint = true
+      // 输入区统计条「完全展开」：false=官方单行省略（默认），true=换行完整显示
+      let composerStatsExpanded = false
+      // 输入框高度：false=动态增高（官方默认，随内容增长直到 max-height 滚动）；true=固定 N 行高度（超出滚动）
+      let composerFixedHeight = false
+      let composerRows = 4 // 固定高度时的行数（1~10），4 = 官方默认初始行数附近的舒适高度
+      // 输入区卡片实测宽高比缓存（固定高度时用）：AreaCss useLayoutEffect 在 DOM 布局后测量写入，
+      // 避免 getCropRatio 在渲染期读到旧布局值（改行数后选区不跟手）。非用户配置，不持久化
+      let composerCardRatio = null
+      // Cordis 面板实测宽高比缓存（v0.9.15）：面板高度内容驱动（max-height 60vh），固定公式不准 →
+      // AreaCss useLayoutEffect + MutationObserver 在面板开合时测量写入；未打开时用默认近似
+      let cordisCardRatio = null
+      // 输入区统计条各子项显隐（9 项独立开关）：默认全显示
+      let composerStatsItems = {
+        turns: true,   // 轮数
+        steps: true,   // 步数
+        llm: true,     // LLM 时长
+        tool: true,    // 工具调用时长
+        ttft: true,    // 首 token 平均
+        tps: true,     // tok/s
+        cache: true,   // 缓存命中
+        input: true,   // 输入 token
+        output: true,  // 输出 token
+      }
+      // 对话区背景（2026-08-21 新增；08-22 定稿 5 项 + 任务栏 2 项 = 7 项；08-22 v0.9.14 命令两按钮加透明度）：null = 官方默认；设置后亮暗统一用用户色。
+      // bubble = 我的发言气泡（--dsw-specific-bubble）；
+      // inline = 你的发言中的行内代码背景（--dsw-alias-markdown-inline-code）；
+      // code = 代码块/编辑卡片/脚本终端背景（--dsw-alias-markdown-code-block + banner）；
+      // scrollbar = 代码块滚动条（[class*="_block_"], .md-code-block 重定义 --dsh-scrollbar-thumb）；
+      // chatScroll = 对话区滚动条（[class*="_scroll"]:has([data-chat-flow])）；
+      // todoCollapsed / todoExpanded = 任务栏收起/展开背景（[data-testid="todo-panel"]:has([aria-expanded=...])，官方 token --dsw-specific-tip）
+      // addBtn = 输入框「+」命令按钮背景（[class*="uV2eYG_add"]，官方 token --dsw-specific-selector，hover 官方 --dsw-alias-interactive-bg-hover-solid）；
+      // cmdMenu = 命令菜单面板背景（[class*="_3e4SsG_menu"]，官方 token --dsw-specific-menu——被多包共用，必须精确选择器覆盖）；
+      // addBtnOpacity / cmdMenuOpacity = 命令两按钮透明度（0=不透明官方，1=全透明；数值大=透明，语义同全局；仅 addBtn/cmdMenu 有值时生效）
+      // toBottom = 对话区「V」一键到底部按钮背景（[class*="Md3f7G_toBottom"]，官方 token --dsw-alias-button-floating-fill——被布局手柄共用，必须精确选择器覆盖）
+      // sliderColor / sliderOpacity = 主题设置插件滑条（range，data-thmcz-range）已填充部分（左半边）+圆点 颜色/透明度
+      // sliderTrackColor / sliderTrackOpacity = 滑条未填充轨道（右半边）颜色/透明度（v0.9.15；默认浏览器深色 → 必须自定义）
+      // scrollColor / scrollOpacity = 浮窗界面滚动条（[data-thmcz-float-scroll]）thumb 颜色/透明度
+      let convBgs = { bubble: null, inline: null, code: null, scrollbar: null, chatScroll: null, todoCollapsed: null, todoExpanded: null, addBtn: null, cmdMenu: null, addBtnOpacity: 0, cmdMenuOpacity: 0, toBottom: null, sliderColor: null, sliderOpacity: 0, sliderTrackColor: null, sliderTrackOpacity: 0, scrollColor: null, scrollOpacity: 0 }
+
+      // ════════ 02_utils.js ════════
+      // ┌─ 片段 02_utils ─────────────────────────────────
+      // │ 职责：纯工具函数（颜色解析 / var 链解析 / 转 hex），无状态
+      // │ 定义：parseRgb / resolveVarToken / toHex
+      function parseRgb(color) {
+        try {
+          const s = String(color || '').trim()
+          if (s.startsWith('#')) {
+            const h = s.replace('#', '')
+            if (h.length === 3) return [parseInt(h[0] + h[0], 16), parseInt(h[1] + h[1], 16), parseInt(h[2] + h[2], 16)]
+            if (h.length === 6) return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]
+          }
+          const m = s.match(/rgba?\(([^)]+)\)/)
+          if (m) {
+            const parts = m[1].split(',').map((x) => parseFloat(x))
+            return [parts[0], parts[1], parts[2]]
+          }
+        } catch (e) { /* 忽略 */ }
+        return [30, 32, 38]
+      }
+
+      // P3: 解析 var(--x) 链到最终颜色值（官方 token 定义是 var() 引用）
+      function resolveVarToken(value, cs) {
+        let v = value
+        for (let i = 0; i < 3; i++) {
+          const m = String(v || '').match(/^var\(--([^)]+)\)$/)
+          if (!m) break
+          v = cs.getPropertyValue('--' + m[1]).trim()
+        }
+        return v
+      }
+      // P3: 任意颜色格式转 #rrggbb（input[type=color] 只接受 #hex）
+      function toHex(color) {
+        try {
+          let s = String(color || '').trim()
+          if (s.startsWith('#')) {
+            if (s.length === 4) return '#' + s[1] + s[1] + s[2] + s[2] + s[3] + s[3]
+            if (s.length === 7) return s
+          }
+          const m = s.match(/rgba?\(([^)]+)\)/)
+          if (m) {
+            const parts = m[1].split(',').map((x) => parseFloat(x.trim()))
+            const to = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0')
+            return '#' + to(parts[0]) + to(parts[1]) + to(parts[2])
+          }
+        } catch (e) { /* 忽略 */ }
+        return null
+      }
+
+      // 大图降采样（异步，Image.onload 事件回调，非定时器）：
+      // 按最长边缩放输出 WebP 0.92（支持透明、体积小；失败回退 PNG）。
+      // 用于选图后避免超大 dataURI（如 40MB 原图 → 53MB dataURL）进内存/CropPanel/CSS 变量/localStorage：
+      //   · CSS 变量 var() 替换超大值会失效 → 背景不显示（2026-08-21 主界面/侧边栏/新会话大图事故根因）
+      //   · localStorage 配额（~5MB）超限 → 图片被降级丢弃
+      //   · CropPanel 加载 53MB dataURL 慢、内存暴涨
+      function downscaleDataUrl(dataUrl, maxDim, cb) {
+        const img = new Image()
+        img.onload = () => {
+          try {
+            let w = img.naturalWidth || 1, h = img.naturalHeight || 1
+            const m = Math.max(w, h)
+            if (m > maxDim) { const s = maxDim / m; w = Math.max(1, Math.round(w * s)); h = Math.max(1, Math.round(h * s)) }
+            const c = document.createElement('canvas')
+            c.width = w
+            c.height = h
+            c.getContext('2d').drawImage(img, 0, 0, w, h)
+            let out
+            try { out = c.toDataURL('image/webp', 0.92) } catch (e) { out = c.toDataURL('image/png') }
+            cb(out)
+          } catch (e) { cb(dataUrl) }
+        }
+        img.onerror = () => cb(dataUrl)
+        img.src = dataUrl
+      }
+
+      // #rrggbb ↔ HSV（SV 色板 ColorField 用；明度语义 = 亮度，白色会丢 H/S，拖动中需本地保留 hsv 不能反推覆盖）
+      function hexToHsv(hex) {
+        const m = String(hex || '').match(/^#?([0-9a-f]{6})$/i)
+        if (!m) return [0, 0, 100]
+        const n = parseInt(m[1], 16)
+        const r = ((n >> 16) & 255) / 255, g = ((n >> 8) & 255) / 255, b = (n & 255) / 255
+        const max = Math.max(r, g, b), min = Math.min(r, g, b)
+        const d = max - min
+        const v = max
+        if (d === 0) return [0, 0, Math.round(v * 100)]
+        const s = d / max
+        let h = 0
+        if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60
+        else if (max === g) h = ((b - r) / d + 2) * 60
+        else h = ((r - g) / d + 4) * 60
+        return [Math.round(h), Math.round(s * 100), Math.round(v * 100)]
+      }
+      function hsvToHex(h, s, v) {
+        h = ((Math.round(h) % 360) + 360) % 360
+        s = Math.max(0, Math.min(100, s)) / 100
+        v = Math.max(0, Math.min(100, v)) / 100
+        const c = v * s
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+        const m = v - c
+        let r = 0, g = 0, b = 0
+        if (h < 60) { r = c; g = x } else if (h < 120) { r = x; g = c } else if (h < 180) { g = c; b = x } else if (h < 240) { g = x; b = c } else if (h < 300) { r = x; b = c } else { r = c; b = x }
+        const to = (n) => Math.max(0, Math.min(255, Math.round((n + m) * 255))).toString(16).padStart(2, '0')
+        return '#' + to(r) + to(g) + to(b)
+      }
+
+      // ════════ 03_detect.js ════════
+      // ┌─ 片段 03_detect ────────────────────────────────
+      // │ 职责：DOM/官方 token 检测（官方原色采集、侧边栏探测）；官方 token 定义在 body 上
+      // │ 定义：detectColors / detectSidebar
+      function detectColors() {
+        try {
+          if (typeof document === 'undefined') return
+          // 注意：官方 token 定义在 body 上（design-platform.css: body {...}），不是 html 根
+          const cs = window.getComputedStyle(document.body)
+          const bg = cs.getPropertyValue('--dsw-alias-bg-base').trim()
+          if (bg && bg !== 'transparent') baseBg = bg
+          // P3: 读取官方文字原色（在 token 被覆盖前）。注意：若 AreaCss 在颜色
+          // 已覆盖后重挂载（仅插件重启场景），读到的是覆盖值——内存态重启即重置，可接受
+          const off = {}
+          for (const it of COLOR_ITEMS) {
+            for (const t of COLOR_TOKENS[it.key]) {
+              const raw = cs.getPropertyValue(t).trim()
+              if (!raw || raw === 'transparent' || raw === 'initial' || raw === '') continue
+              const hex = toHex(resolveVarToken(raw, cs))
+              if (hex) { off[it.key] = hex; break }
+            }
+          }
+          setOfficialColors(off)
+        } catch (e) { /* 忽略 */ }
+      }
+
+      function detectSidebar() {
+        try {
+          if (typeof document === 'undefined') return null
+          const candidates = ['[class*="sidebar"]', '[class*="Sidebar"]', '[class*="sideBar"]', 'nav']
+          for (const sel of candidates) {
+            const els = document.querySelectorAll(sel)
+            for (const el of els) {
+              const r = el.getBoundingClientRect()
+              if (r.width > 50 && r.height > 100 && r.left === 0 && r.top === 0) {
+                const cls = typeof el.className === 'string' ? el.className.split(/\s+/).filter(Boolean)[0] : ''
+                const selector = cls ? '.' + cls.replace(/[^a-zA-Z0-9_-]/g, '\\$&') : el.tagName.toLowerCase()
+                return { selector, ratio: r.width / r.height, width: r.width, height: r.height }
+              }
+            }
+          }
+          return null
+        } catch (e) { /* 忽略 */ }
+        return null
+      }
+
+      // ════════ 04_store.js ════════
+      // ┌─ 片段 04_store ─────────────────────────────────
+      // │ 职责：状态订阅与修改（分通道 notify + setXxx 动作 + useStore）
+      // │ 性能（2026-08-21 优化）：通知分 4 通道（main/stats/float/preset），组件只订阅自己关心的通道 →
+      // │   颜色/透明度拖动（main）不重渲染预设面板（preset）/统计条（stats）/浮窗外壳（float），拖动更顺滑。
+      // │   注意：拖动类高频动作只 notify 不 saveNow（pointerup 时保存，零定时器约定）
+      const listeners = { main: new Set(), stats: new Set(), float: new Set(), preset: new Set() }
+      function emit(ch) { const s = listeners[ch]; if (s) for (const fn of s) fn() }
+      // main = CSS + 通用 UI（areas/newSession/colors/sidebarInfo/showOpacityHint/composerFixedHeight|Rows/cordisEntry/floatVisible）
+      function notify() { emit('main') }
+      // stats = 输入区统计条开关（composerStatsExpanded / composerStatsItems）
+      function statsNotify() { emit('stats') }
+      // float = 浮窗（floatVisible/floatModules/floatPos/areas.float）
+      function floatNotify() { emit('float') }
+      // preset = 预设列表数据变化（loadPresets 异步完成 / 拖拽排序）
+      function presetNotify() { emit('preset') }
+      // 低频操作：同步立即保存；浮窗拖动高频只更新内存（pointerup 时保存一次）
+      // ⚠️ 性能（2026-08-21）：CSS 相关 setter（areas/newSession/composer 高度）在拖动抑制期
+      //   （saveSuppress 窗口，见 05_storage）走 manualCssRefresh 直更 style 标签 → 拖动中零 React 渲染（只更新 CSS 字符串）；
+      //   松开（commitSave）后 notify 同步 React 状态。非抑制期保持 notify + saveNow（离散操作/低频不变）
+      function setFloatVisible(v) { floatVisible = v; notify(); floatNotify(); saveNow() }
+      function setCordisEntry(v) { cordisEntry = v; applyCordisEntryFlag(); notify(); saveNow() }
+      function setFloatPos(next) { floatPos = next; floatNotify() }
+      function resetFloatPos() { floatPos = { x: 80, y: 80, width: 560, height: 640 }; floatNotify(); saveNow() }
+      function setFloatModules(next) { floatModules = next; floatNotify(); saveNow() }
+      function setFloatShowReset(v) { floatShowReset = v; floatNotify(); saveNow() }
+      function setArea(id, next) {
+        areas[id] = next
+        if (Date.now() < saveSuppressUntil) manualCssRefresh(id)
+        else { notify(); saveNow() }
+      }
+      function setNewSession(next) {
+        newSession = next
+        if (Date.now() < saveSuppressUntil) manualCssRefresh('ns')
+        else { notify(); saveNow() }
+      }
+      // DeepSeek Harness 标志（v0.9.17）：颜色/透明度拖动走抑制路径（直更 brand style 标签，零 React 渲染）
+      function setBrand(next) {
+        brand = { ...brand, ...next }
+        if (Date.now() < saveSuppressUntil) manualCssRefresh('brand')
+        else { notify(); saveNow() }
+      }
+      // 标志 "Harness" 部分单独颜色（v0.9.20）：同 setBrand（走 brand style 标签）
+      function setBrandHarness(next) {
+        brandHarness = { ...brandHarness, ...next }
+        if (Date.now() < saveSuppressUntil) manualCssRefresh('brand')
+        else { notify(); saveNow() }
+      }
+      // 框线（v0.9.18）：颜色/透明度拖动走抑制路径（直更 borders style 标签，零 React 渲染）
+      function setBorder(area, next) {
+        borders = { ...borders, [area]: { ...(borders[area] || {}), ...next } }
+        if (Date.now() < saveSuppressUntil) manualCssRefresh('borders')
+        else { notify(); saveNow() }
+      }
+      // 全部恢复官方默认（框线 5 区域全 null/0，仿 resetAllConvBgs）
+      function resetAllBorders() {
+        const nb = {}
+        for (const key of BORDER_KEYS) nb[key] = { color: null, opacity: 0 }
+        borders = nb
+        notify(); saveNow()
+      }
+      // 设置界面面板拖动位置（v0.9.19）：null=官方居中；{x,y}=固定位置。pointerup 才调用（非高频）→ notify + saveNow
+      function setDetailsPos(v) { detailsPos = v; notify(); saveNow() }
+      // 设置界面可移动开关（v0.9.19）
+      function setDetailsDragEnabled(v) { detailsDragEnabled = v; notify(); saveNow() }
+      // ⚠️ 值未变跳过（2026-08-22 梳理修复）：resize/observer 每触发都调用，值没变也 notify 会全量重渲染
+      //   （Cordis 面板 MutationObserver 监听整个 body 节点增删 → 对话流每挂载一条消息都触发一次）
+      function setSidebarInfo(next) {
+        if (sidebarInfo && next && sidebarInfo.selector === next.selector && sidebarInfo.ratio === next.ratio && sidebarInfo.width === next.width && sidebarInfo.height === next.height) return
+        sidebarInfo = next
+        notify()
+      }
+      function setColor(key, v) { colors = { ...colors, [key]: v }; notify(); saveNow() }
+      function resetColor(key) { colors = { ...colors, [key]: null }; notify(); saveNow() }
+      function resetAllColors() { colors = { main: null, process: null, aux: null, faded: null, accent: null }; notify(); saveNow() }
+      function setOfficialColors(next) { officialColors = next; notify() }
+      function setShowOpacityHint(v) { showOpacityHint = v; notify(); saveNow() }
+      function setComposerStatsExpanded(v) { composerStatsExpanded = v; statsNotify(); saveNow() }
+      function setComposerFixedHeight(v) {
+        composerFixedHeight = v
+        if (Date.now() < saveSuppressUntil) manualCssRefresh('composer')
+        else { notify(); saveNow() }
+      }
+      function setComposerRows(v) {
+        composerRows = v
+        if (Date.now() < saveSuppressUntil) manualCssRefresh('composer')
+        else { notify(); saveNow() }
+      }
+      function setComposerStatsItems(next) { composerStatsItems = next; statsNotify(); saveNow() }
+      // 对话区背景：bubble/inline/code/scrollbar/chatScroll/todoCollapsed/todoExpanded/addBtn/cmdMenu（null=官方）
+      // ⚠️ 性能（2026-08-22 v0.9.14 修复）：拖动抑制期（saveSuppress 窗口，见 05_storage）走 manualCssRefresh
+      //   直更 style 标签（零 React 渲染）——此前每帧 notify 全量重渲染，同一滑条连续拖动越拖越卡。
+      // ⚠️ v0.9.15 优化：bubble/inline/code（token 键）走 'conv'（style+token）；其余键（滚动条/滑条/命令/V等）
+      //   只走 'convStyle'（纯 style 标签，不刷 token）——此前拖动滚动条/滑条颜色每帧跑 buildThemeTokens+overrideTokens → 卡顿
+      const CONV_TOKEN_KEYS = { bubble: true, inline: true, code: true }
+      function setConvBg(key, v) {
+        convBgs = { ...convBgs, [key]: v }
+        if (Date.now() < saveSuppressUntil) manualCssRefresh(CONV_TOKEN_KEYS[key] ? 'conv' : 'convStyle')
+        else { notify(); saveNow() }
+      }
+      // 全部恢复官方默认（对话区 8 项全 null，仿字体颜色 resetAllColors；v0.9.15 含 V 按钮）
+      function resetAllConvBgs() {
+        convBgs = { bubble: null, inline: null, code: null, scrollbar: null, chatScroll: null, todoCollapsed: null, todoExpanded: null, toBottom: null }
+        notify(); saveNow()
+      }
+      // 命令子板块全部恢复官方默认（仅 addBtn/cmdMenu + 透明度两项，输入区卡片内；v0.9.14 含透明度归零）
+      function resetCmdBgs() {
+        convBgs = { ...convBgs, addBtn: null, cmdMenu: null, addBtnOpacity: 0, cmdMenuOpacity: 0 }
+        notify(); saveNow()
+      }
+      // 全局恢复默认（v0.9.16）：按钮在主题设置预设板块下方 + 浮窗内（TripleConfirmButton 三级确认），恢复所有用户配置到初始默认。
+      // 范围：areas（全部区域）/colors（文字颜色）/newSession/convBgs（对话区+命令+滑条+滚动条）/
+      //       floatVisible/floatPos/floatModules/cordisEntry/showOpacityHint/composerStats*；
+      // 不动：sidebarInfo/baseBg/officialColors（检测缓存非用户配置）、composerCardRatio/cordisCardRatio（实测缓存）
+      function resetAllSettings() {
+        floatVisible = false
+        floatPos = { x: 80, y: 80, width: 560, height: 640 }
+        floatModules = { background: true, borders: true, colors: true, layout: true, presets: true }
+        floatShowReset = true
+        cordisEntry = true
+        applyCordisEntryFlag()
+        areas = {
+          app: { ...emptyArea(), opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 },
+          sidebar: { ...emptyArea(), opacity: 0 },
+          composer: { ...emptyArea(), opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 },
+          details: { ...emptyArea(), opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 },
+          float: { ...emptyArea(), opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 },
+          cordis: { ...emptyArea(), opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 },
+          conversation: emptyArea(),
+        }
+        newSession = { showText: true, showIcon: true, mode: 'none', color: '#ffffff', opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0, image: null, iconColor: null, textColor: null }
+        brand = { color: '#3964fe', opacity: 0 }
+        brandHarness = { color: null, opacity: 0 }
+        borders = { main: { color: null, opacity: 0 }, cordis: { color: null, opacity: 0 }, composer: { color: null, opacity: 0 }, details: { color: null, opacity: 0 }, float: { color: null, opacity: 0 } }
+        colors = { main: null, process: null, aux: null, faded: null, accent: null }
+        convBgs = { bubble: null, inline: null, code: null, scrollbar: null, chatScroll: null, todoCollapsed: null, todoExpanded: null, addBtn: null, cmdMenu: null, addBtnOpacity: 0, cmdMenuOpacity: 0, toBottom: null, sliderColor: null, sliderOpacity: 0, sliderTrackColor: null, sliderTrackOpacity: 0, scrollColor: null, scrollOpacity: 0 }
+        showOpacityHint = true
+        composerStatsExpanded = false
+        detailsPos = null
+        detailsDragEnabled = true
+        composerFixedHeight = false
+        composerRows = 4
+        composerStatsItems = { turns: true, steps: true, llm: true, tool: true, ttft: true, tps: true, cache: true, input: true, output: true }
+        notify(); statsNotify(); floatNotify(); saveNow()
+      }
+      // 输入区卡片实测宽高比（非用户配置，不持久化）：AreaCss 布局后测量，供 getCropRatio 使用。
+      // ⚠️ 值未变跳过（2026-08-22 梳理修复，同 setSidebarInfo）：useLayoutEffect 每次依赖变化都调用，同值 notify 无谓重渲染
+      function setComposerCardRatio(v) {
+        if (composerCardRatio === v) return
+        composerCardRatio = v
+        notify()
+      }
+      // Cordis 面板实测宽高比（v0.9.15，非用户配置，不持久化）：AreaCss useLayoutEffect+observer 面板开合时测量，供 getCropRatio 使用。
+      // ⚠️ 2026-08-22 事故：v0.9.15 初版漏定义本函数 → AreaCss 调用抛 ReferenceError → 整个主题 UI 崩溃（主界面图消失/层次混乱）
+      // ⚠️ 值未变跳过（2026-08-22 梳理修复）：observer 监听 body 全量子树增删，对话流消息挂载高频触发；面板尺寸未变时不再 notify
+      function setCordisCardRatio(v) {
+        if (cordisCardRatio === v) return
+        cordisCardRatio = v
+        notify()
+      }
+      // 订阅指定通道（默认 main）：channels 数组；组件只在自己关注的通道变化时重渲染
+      function useStore(channels) {
+        const [, force] = React.useState(0)
+        React.useEffect(() => {
+          const fn = () => force((n) => n + 1)
+          const chs = Array.isArray(channels) && channels.length ? channels : ['main']
+          for (const c of chs) { const s = listeners[c]; if (s) s.add(fn) }
+          return () => { for (const c of chs) { const s = listeners[c]; if (s) s.delete(fn) } }
+        }, [])
+        return { floatVisible, floatPos, cordisEntry, floatModules, floatShowReset, areas, sidebarInfo, colors, officialColors, lastSavedAt, newSession, brand, brandHarness, borders, detailsPos, detailsDragEnabled, showOpacityHint, composerStatsExpanded, composerFixedHeight, composerRows, composerStatsItems, composerCardRatio, cordisCardRatio, convBgs }
+      }
+
+      // ════════ 05_storage.js ════════
+      // ┌─ 片段 05_storage ───────────────────────────────
+      // │ 职责：localStorage 持久化（读/写/配额降级/关页前保存）+ 旧数据迁移（opacitySem/unified）
+      // │ 定义：loadSettings / slimAreas / saveNow / flushPersist；执行：beforeunload 监听 + loadSettings()
+      // │ 测试：刷新后配置保持；旧配置迁移；超大图降级保存（QuotaExceeded）
+      // ── 持久化：localStorage（纯浏览器存储，刷新/重启页面不丢）──
+      // ⚠️ 性能（2026-08-21 优化）：saveNow 内不再 notify —— 所有 setXxx 已是 notify + saveNow，
+      //    原双重通知导致每次操作触发 2 次全量重渲染 + 2 次 CSS 重建。
+      // ⚠️ 拖动型控件（透明度滑块/颜色选择器）拖动期间连续 onChange → 每帧 saveNow →
+      //    全量 JSON.stringify（含图片 dataURI 几 MB）+ setItem 同步阻塞主线程 → 卡顿。
+      //    抑制方案（零定时器）：拖动开始置时间戳窗口，期间 saveNow 跳过写入；
+      //    pointerup/blur 提交保存一次；窗口 60s 超时自动恢复（pointerup 丢失兜底）；beforeunload 强制保存。
+      const STORAGE_KEY = 'theme-customizer-config-v1'
+      // ⚠️ 透明度语义（统一）：数值大 = 透明/虚（主界面与侧边栏一致，用户确认）。
+      // opacitySem: 4 = 当前统一透明度语义；3 = 主界面不透明度/侧边栏透明度（旧）；2 = 全透明度（更旧）；无标记 = 更早全不透明度语义
+      function loadSettings() {
+        try {
+          const raw = window.localStorage.getItem(STORAGE_KEY)
+          if (!raw) return
+          const c = JSON.parse(raw)
+          if (!c || typeof c !== 'object') return
+          if (c.areas && typeof c.areas === 'object') {
+            const sem = c.opacitySem
+            const next = {}
+            for (const k of Object.keys(c.areas)) {
+              const a = c.areas[k]
+              if (!a || typeof a !== 'object' || typeof a.opacity !== 'number') { next[k] = a; continue }
+              if (sem === 4) next[k] = a
+              else if (sem === 3) {
+                // 旧语义：主界面=不透明度（取反为透明度），侧边栏=透明度（保持）
+                next[k] = k === 'app' ? { ...a, opacity: 1 - a.opacity } : a
+              } else if (sem === 2) {
+                // 全透明度：保持
+                next[k] = a
+              } else {
+                // 更早全不透明度语义：全部取反
+                next[k] = { ...a, opacity: 1 - a.opacity }
+              }
+            }
+            areas = next
+          }
+          // 主界面底色（2026-08-21 新增）：默认开启白色底。旧配置无此功能 → 一次性迁移开启白底。
+          // appBottomVersion 标记随 saveNow 持久化：迁移后下次保存带上标记，此后不再重复迁移（尊重用户之后的开关/颜色设置）
+          if (c.appBottomVersion !== 1 && areas.app && typeof areas.app === 'object') {
+            areas.app = { ...areas.app, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 }
+          }
+          // 输入区底色（2026-08-21 新增，像主界面默认白底常驻）：复用同一 appBottomVersion 标记一次性迁移
+          if (c.appBottomVersion !== 1 && areas.composer && typeof areas.composer === 'object') {
+            areas.composer = { ...areas.composer, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 }
+          }
+          // 设置界面底色（2026-08-22 新增，v0.9.12，像主界面默认白底常驻）：
+          // ⚠️ 不能复用 appBottomVersion 标记（旧配置已是 1，details 迁移会被跳过）；
+          // 改用独立条件：details 存在且从未设过底色（bottomColor == null）→ 补默认白底。
+          // 无损：用户已设置的底色（字符串）不被覆盖；后续保存自动带上
+          if (areas.details && typeof areas.details === 'object' && areas.details.bottomColor == null) {
+            areas.details = { ...areas.details, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 }
+          }
+          // 浮窗面板（2026-08-22 新增区域，v0.9.13，像主界面默认白底常驻）：
+          // ⚠️ areas = next 整体替换旧配置 → 旧配置无 float 键 → areas.float 是 undefined，
+          //     buildFloatCss/buildImgVars 读 areas.float.mode 会抛错（整站主题面板消失事故，v0.9.13 修复）。
+          // 必须无条件补全整个默认区域对象（不是仅补底色字段）
+          if (!areas.float || typeof areas.float !== 'object' || areas.float.mode === undefined) {
+            areas.float = { mode: 'none', color: '#ffffff', opacity: 0, image: null, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 }
+          } else if (areas.float.bottomColor == null) {
+            areas.float = { ...areas.float, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 }
+          }
+          // Cordis 插件界面（2026-08-22 新增区域，v0.9.14，像主界面默认白底常驻）：同 float 无条件补全（防缺键崩溃）
+          if (!areas.cordis || typeof areas.cordis !== 'object' || areas.cordis.mode === undefined) {
+            areas.cordis = { mode: 'none', color: '#ffffff', opacity: 0, image: null, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 }
+          } else if (areas.cordis.bottomColor == null) {
+            areas.cordis = { ...areas.cordis, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0 }
+          }
+          if (c.colors && typeof c.colors === 'object') colors = { main: null, process: null, aux: null, faded: null, accent: null, ...c.colors }
+          if (c.newSession && typeof c.newSession === 'object') {
+            // 兼容旧数据：无 bottomEnabled 字段时，旧 bottomColor 有值 = 底色已开启；
+            // "无"选项已恢复（mode='none' 合法）；旧 unified=true（跟随侧边栏）→ 迁移为样式"无"（等效透明透出）；
+            // 旧 unified=false（独立设置）→ 保留原 mode；
+            // v0.9.20：无 bottomEnabled 的旧数据 → 默认开启白底（新默认；有显式值则尊重）
+            const nsOld = c.newSession
+            const nsMode = nsOld.unified === true ? 'none' : (nsOld.mode === 'transparent' ? 'none' : nsOld.mode)
+            newSession = { ...newSession, ...nsOld, mode: nsMode, bottomEnabled: typeof nsOld.bottomEnabled === 'boolean' ? nsOld.bottomEnabled : true }
+          }
+          // 框线（v0.9.18）：旧数据无 borders 字段 → 保持默认（全 null/0）；字段非法时回默认
+          if (c.borders && typeof c.borders === 'object') {
+            const nb = {}
+            for (const key of BORDER_KEYS) {
+              const b = c.borders[key]
+              nb[key] = {
+                color: b && typeof b === 'object' && typeof b.color === 'string' && /^#[0-9a-f]{6}$/i.test(b.color) ? b.color : null,
+                opacity: b && typeof b === 'object' && typeof b.opacity === 'number' && b.opacity >= 0 && b.opacity <= 1 ? b.opacity : 0,
+              }
+            }
+            borders = nb
+          }
+          if (typeof c.cordisEntry === 'boolean') cordisEntry = c.cordisEntry
+          // DeepSeek Harness 标志（v0.9.17）：旧数据无 brand 字段 → 保持默认（品牌蓝 + 不透明）；字段非法时回默认
+          if (c.brand && typeof c.brand === 'object') {
+            brand = {
+              color: typeof c.brand.color === 'string' && /^#[0-9a-f]{6}$/i.test(c.brand.color) ? c.brand.color : '#3964fe',
+              opacity: typeof c.brand.opacity === 'number' && c.brand.opacity >= 0 && c.brand.opacity <= 1 ? c.brand.opacity : 0,
+            }
+          }
+          // 标志 "Harness" 单独颜色（v0.9.20）：color null=跟随标志整体；缺失/非法保持默认
+          if (c.brandHarness && typeof c.brandHarness === 'object') {
+            brandHarness = {
+              color: typeof c.brandHarness.color === 'string' && /^#[0-9a-f]{6}$/i.test(c.brandHarness.color) ? c.brandHarness.color : null,
+              opacity: typeof c.brandHarness.opacity === 'number' && c.brandHarness.opacity >= 0 && c.brandHarness.opacity <= 1 ? c.brandHarness.opacity : 0,
+            }
+          }
+          // 浮窗显示内容：旧配置缺新模块键（borders 等）→ 合并默认补全（v0.9.20：默认全开）
+          if (c.floatModules && typeof c.floatModules === 'object') floatModules = { ...floatModules, ...c.floatModules }
+          if (typeof c.floatShowReset === 'boolean') floatShowReset = c.floatShowReset
+          if (c.floatPos && typeof c.floatPos === 'object') floatPos = c.floatPos
+          if (typeof c.floatVisible === 'boolean') floatVisible = c.floatVisible
+          if (typeof c.showOpacityHint === 'boolean') showOpacityHint = c.showOpacityHint
+          // 设置界面拖动位置（v0.9.19）：合法 {x,y} 才恢复；缺失/非法 = null（居中）
+          if (c.detailsPos && typeof c.detailsPos === 'object' && typeof c.detailsPos.x === 'number' && typeof c.detailsPos.y === 'number') detailsPos = c.detailsPos
+          if (typeof c.detailsDragEnabled === 'boolean') detailsDragEnabled = c.detailsDragEnabled
+          if (typeof c.composerStatsExpanded === 'boolean') composerStatsExpanded = c.composerStatsExpanded
+          if (typeof c.composerFixedHeight === 'boolean') composerFixedHeight = c.composerFixedHeight
+          if (typeof c.composerRows === 'number') composerRows = c.composerRows
+          if (c.composerStatsItems && typeof c.composerStatsItems === 'object') composerStatsItems = { ...composerStatsItems, ...c.composerStatsItems }
+          // 对话区背景（2026-08-21 新增）：null=官方默认；旧数据无此字段 → 保持默认；旧 terminal/assistant 字段已改版（忽略）
+          // v0.9.14：命令两按钮透明度字段（addBtnOpacity/cmdMenuOpacity）默认 0；v0.9.15：toBottom/sliderColor/sliderTrackColor/scrollColor 及透明度
+          if (c.convBgs && typeof c.convBgs === 'object') convBgs = { bubble: null, inline: null, code: null, scrollbar: null, chatScroll: null, todoCollapsed: null, todoExpanded: null, addBtn: null, cmdMenu: null, addBtnOpacity: 0, cmdMenuOpacity: 0, toBottom: null, sliderColor: null, sliderOpacity: 0, sliderTrackColor: null, sliderTrackOpacity: 0, scrollColor: null, scrollOpacity: 0, ...c.convBgs }
+          // 兼容旧数据：缺新字段时立即写回一次（补全 cordisEntry 等）；saveNow 不再 notify，这里补一次
+          if (typeof c.cordisEntry !== 'boolean' || c.opacitySem !== 4) { saveNow(); notify() }
+        } catch (e) { /* 忽略 */ }
+      }
+      function slimAreas() {
+        // 图片过大超出 localStorage 限额时：保留配置、丢弃图片
+        const out = {}
+        for (const k of Object.keys(areas)) {
+          const a = areas[k]
+          out[k] = a.mode === 'image' ? { ...a, image: null } : a
+        }
+        return out
+      }
+      let lastSavedAt = 0 // 最近保存时间（诊断用）
+      let saveSuppressUntil = 0 // 保存抑制窗口（时间戳毫秒）：拖动型控件拖动期间不写 localStorage
+      let saveSuppressOwner = 0 // 抑制窗口归属（拖动控件 id）：blur/pointerup 只提交自己开的窗口
+      // ⚠️ v0.9.14 修复：窗口必须带 owner——否则"拖完 A 直接拖 B"时 A 的 onBlur（焦点转移）会把 B 刚开的
+      //   窗口误关 → B 拖动走 notify 全量渲染 → 卡顿 + 受控值抖动（"有些透明度滑条不能及时变化"用户反馈）
+      function suppressSave(owner) { saveSuppressUntil = Date.now() + 60000; saveSuppressOwner = owner }
+      // 拖动结束提交保存一次（抑制已解除或非本控件窗口时跳过，避免 pointerup+blur 双触发重复写/误关他人窗口）
+      // 拖动期间走 manualCssRefresh（无 notify）→ 这里补 notify 同步 React 状态（滑块值/文本/组件渲染）
+      function commitSave(owner) {
+        if (saveSuppressOwner !== owner) return
+        if (saveSuppressUntil > Date.now()) { saveSuppressUntil = 0; saveSuppressOwner = 0; saveNow(); notify() }
+      }
+      function saveNow() {
+        // 抑制窗口内跳过写入（不更新 lastSavedAt——"最近保存"仍显示上次真实保存时间）
+        if (Date.now() < saveSuppressUntil) return
+        try {
+          const data = JSON.stringify({ v: 1, opacitySem: 4, appBottomVersion: 1, areas, colors, cordisEntry, floatModules, floatShowReset, floatPos, floatVisible, newSession, brand, brandHarness, borders, detailsPos, detailsDragEnabled, showOpacityHint, composerStatsExpanded, composerFixedHeight, composerRows, composerStatsItems, convBgs })
+          window.localStorage.setItem(STORAGE_KEY, data)
+          lastSavedAt = Date.now()
+        } catch (e) {
+          // QuotaExceededError：图片太大，降级只存配置
+          try {
+            const slim = JSON.stringify({ v: 1, opacitySem: 4, appBottomVersion: 1, areas: slimAreas(), colors, cordisEntry, floatModules, floatShowReset, floatPos, floatVisible, newSession: newSession.mode === 'image' ? { ...newSession, image: null } : newSession, brand, brandHarness, borders, detailsPos, detailsDragEnabled, showOpacityHint, composerStatsExpanded, composerFixedHeight, composerRows, composerStatsItems, convBgs })
+            window.localStorage.setItem(STORAGE_KEY, slim)
+            lastSavedAt = Date.now()
+          } catch (e2) { /* 忽略 */ }
+        }
+      }
+      // ⚠️ 动态环境定时器不可用：setTimeout 被宿主拦截直接抛错（"setTimeout is not available in a
+      // dynamic client half"）。持久化策略 = 全部同步保存；浮窗拖动在 pointerup 结束时保存一次。
+      // 关页前强制保存（绕过抑制窗口：拖动中直接关页也不丢最后值）
+      function flushPersist() {
+        saveSuppressUntil = 0
+        saveNow()
+      }
+      try { window.addEventListener('beforeunload', flushPersist) } catch (e) { /* 忽略 */ }
+      try { loadSettings() } catch (e) { /* 忽略 */ }
+
+      // ════════ 06_presets.js ════════
+      // ┌─ 片段 06_presets ───────────────────────────────
+      // │ 职责：预设库（IndexedDB CRUD + 旧 localStorage 迁移 + applyPresetData）
+      // │ 定义：openPresetDb / idbPutAll / idbGetAll / idbDelete / loadPresets / savePresets / applyPresetData
+      // │ 测试：预设保存/应用/删除；旧 presets-v1 迁移；应用预设必须覆盖全部颜色 key（null=恢复官方）
+      // ── 预设库：IndexedDB 存储（容量远超 localStorage，多图预设也能存）；旧 localStorage 数据自动迁移 ──
+      const PRESET_LIMIT = 10
+      let presets = []
+      let presetDb = null
+      function openPresetDb() {
+        if (presetDb) return Promise.resolve(presetDb)
+        return new Promise((resolve, reject) => {
+          try {
+            const req = window.indexedDB.open('theme-customizer-presets', 1)
+            req.onupgradeneeded = () => {
+              const db = req.result
+              if (!db.objectStoreNames.contains('presets')) db.createObjectStore('presets', { keyPath: 'id' })
+            }
+            req.onsuccess = () => { presetDb = req.result; resolve(presetDb) }
+            req.onerror = () => reject(req.error || new Error('IndexedDB 打开失败'))
+          } catch (e) { reject(e) }
+        })
+      }
+      function idbPutAll(items) {
+        return openPresetDb().then((db) => new Promise((resolve, reject) => {
+          try {
+            const tx = db.transaction('presets', 'readwrite')
+            const store = tx.objectStore('presets')
+            for (const it of items) store.put(it)
+            tx.oncomplete = () => resolve(true)
+            tx.onerror = () => reject(tx.error || new Error('写入失败'))
+            tx.onabort = () => reject(tx.error || new Error('写入中止'))
+          } catch (e) { reject(e) }
+        }))
+      }
+      function idbGetAll() {
+        return openPresetDb().then((db) => new Promise((resolve, reject) => {
+          try {
+            const tx = db.transaction('presets', 'readonly')
+            const req = tx.objectStore('presets').getAll()
+            req.onsuccess = () => resolve(req.result || [])
+            req.onerror = () => reject(req.error || new Error('读取失败'))
+          } catch (e) { reject(e) }
+        }))
+      }
+      function idbDelete(id) {
+        return openPresetDb().then((db) => new Promise((resolve, reject) => {
+          try {
+            const tx = db.transaction('presets', 'readwrite')
+            tx.objectStore('presets').delete(id)
+            tx.oncomplete = () => resolve(true)
+            tx.onerror = () => reject(tx.error || new Error('删除失败'))
+          } catch (e) { reject(e) }
+        }))
+      }
+      function loadPresets() {
+        // 旧 localStorage 数据（presets-v1）自动迁移到 IndexedDB
+        try {
+          const raw = window.localStorage.getItem('theme-customizer-presets-v1')
+          if (raw) {
+            const arr = JSON.parse(raw)
+            if (Array.isArray(arr) && arr.length) {
+              idbPutAll(arr).then(() => {
+                try { window.localStorage.removeItem('theme-customizer-presets-v1') } catch (e) { /* 忽略 */ }
+                return idbGetAll()
+              }).then((items) => {
+                presets = (items || []).filter((p) => p && typeof p === 'object' && p.data && p.data.areas)
+                presetNotify()
+              }).catch(() => { /* 忽略 */ })
+              return
+            }
+            try { window.localStorage.removeItem('theme-customizer-presets-v1') } catch (e) { /* 忽略 */ }
+          }
+        } catch (e) { /* 忽略 */ }
+        idbGetAll().then((items) => {
+          presets = (items || []).filter((p) => p && typeof p === 'object' && p.data && p.data.areas)
+          presetNotify()
+        }).catch(() => { /* 忽略 */ })
+      }
+      function savePresets() {
+        return idbPutAll(presets)
+      }
+      // 当前应用的预设 id（localStorage 持久，刷新后仍显示）
+      let lastAppliedId = null
+      try { lastAppliedId = window.localStorage.getItem('theme-customizer-last-applied') || null } catch (e) { /* 忽略 */ }
+      // 应用预设数据（导入文件 / 切换预设共用）。
+      // ⚠️ 必须完整应用所有颜色 key（null=恢复官方），否则上一个预设的颜色会残留
+      // ⚠️ 性能（2026-08-22 梳理修复）：原实现逐 setter（35+ 次 notify + saveNow，每次全量渲染 + 全量序列化含图 dataURI）
+      //   → 改为**直接赋值状态 + 保留必要副作用（applyCordisEntryFlag）+ 末尾一次通知保存**。行为不变（中间态本就不该渲染）
+      function applyPresetData(c) {
+        // ── 区域：完整覆盖（缺键回默认）+ opacity 语义迁移（与 loadSettings 一致）──
+        const nextAreas = {}
+        const sem = c.opacitySem
+        for (const a of AREAS) {
+          const src = c.areas[a.id]
+          let area = src && typeof src === 'object' ? { ...emptyArea(), ...src } : emptyArea()
+          // 预设 opacity 语义迁移（与 loadSettings 一致，统一为透明度语义）：
+          // sem 4 = 统一透明度（当前）；3 = 主界面不透明度/侧边栏透明度；2 = 全透明度；无标记 = 全不透明度
+          if (src && typeof src === 'object' && typeof src.opacity === 'number') {
+            if (sem === 4 || sem === 2) { /* 当前语义/全透明度，直接用 */ }
+            else if (sem === 3) { if (a.id === 'app') area.opacity = 1 - src.opacity }
+            else { area.opacity = 1 - src.opacity }
+          }
+          nextAreas[a.id] = area
+        }
+        areas = nextAreas
+        // ── 文字颜色：完整覆盖（null=恢复官方）──
+        colors = { main: null, process: null, aux: null, faded: null, accent: null }
+        const pc = c.colors && typeof c.colors === 'object' ? c.colors : {}
+        for (const it of COLOR_ITEMS) {
+          const v = pc[it.key]
+          if (typeof v === 'string' && v) colors[it.key] = v
+        }
+        // ── Cordis 按钮常驻：有 boolean 才应用（副作用：同步 window 变量 + 重渲染官方按钮）──
+        if (typeof c.cordisEntry === 'boolean') { cordisEntry = c.cordisEntry; applyCordisEntryFlag() }
+        // ── 浮窗/其他开关：缺失保留当前值（原行为）──
+        if (c.floatModules && typeof c.floatModules === 'object') floatModules = { ...floatModules, ...c.floatModules }
+        // 浮窗显示全局恢复按钮（v0.9.16）：⚠️ 2026-08-22 梳理修复——原实现漏应用此键，预设保存了但应用时不恢复
+        if (typeof c.floatShowReset === 'boolean') floatShowReset = c.floatShowReset
+        if (c.floatPos && typeof c.floatPos === 'object') floatPos = { ...floatPos, ...c.floatPos }
+        if (typeof c.floatVisible === 'boolean') floatVisible = c.floatVisible
+        if (typeof c.showOpacityHint === 'boolean') showOpacityHint = c.showOpacityHint
+        // 设置界面拖动位置（v0.9.19）：合法 {x,y} 应用；缺失/非法 = null（居中）
+        if (c.detailsPos && typeof c.detailsPos === 'object' && typeof c.detailsPos.x === 'number' && typeof c.detailsPos.y === 'number') detailsPos = c.detailsPos
+        else detailsPos = null
+        if (typeof c.detailsDragEnabled === 'boolean') detailsDragEnabled = c.detailsDragEnabled
+        if (typeof c.composerStatsExpanded === 'boolean') composerStatsExpanded = c.composerStatsExpanded
+        if (typeof c.composerFixedHeight === 'boolean') composerFixedHeight = c.composerFixedHeight
+        if (typeof c.composerRows === 'number') composerRows = c.composerRows
+        if (c.composerStatsItems && typeof c.composerStatsItems === 'object') composerStatsItems = { ...composerStatsItems, ...c.composerStatsItems }
+        // ── 新会话：有才应用（缺失保留当前值，原行为）；旧 unified 迁移 + 默认白底──
+        if (c.newSession && typeof c.newSession === 'object') {
+          const nsOld = c.newSession
+          const nsMode = nsOld.unified === true ? 'none' : (nsOld.mode === 'transparent' ? 'none' : nsOld.mode)
+          // bottomEnabled fallback 与 05_storage 统一为 true（v0.9.20 新默认白底；2026-08-22 梳理修复，原为 bottomColor != null）
+          newSession = { showText: true, showIcon: true, mode: 'none', color: '#ffffff', opacity: 0, bottomEnabled: true, bottomColor: '#ffffff', bottomOpacity: 0, image: null, iconColor: null, textColor: null, ...nsOld, mode: nsMode, bottomEnabled: typeof nsOld.bottomEnabled === 'boolean' ? nsOld.bottomEnabled : true }
+        }
+        // ── 标志：完整覆盖（预设缺该字段 → 回默认，避免残留上一预设）──
+        const pb = c.brand && typeof c.brand === 'object' ? c.brand : {}
+        brand = {
+          color: typeof pb.color === 'string' && /^#[0-9a-f]{6}$/i.test(pb.color) ? pb.color : '#3964fe',
+          opacity: typeof pb.opacity === 'number' && pb.opacity >= 0 && pb.opacity <= 1 ? pb.opacity : 0,
+        }
+        const ph = c.brandHarness && typeof c.brandHarness === 'object' ? c.brandHarness : {}
+        brandHarness = {
+          color: typeof ph.color === 'string' && /^#[0-9a-f]{6}$/i.test(ph.color) ? ph.color : null,
+          opacity: typeof ph.opacity === 'number' && ph.opacity >= 0 && ph.opacity <= 1 ? ph.opacity : 0,
+        }
+        // ── 对话区背景：有才应用；颜色键完整覆盖（null=官方默认）+ 透明度键完整覆盖（0-1，缺失回 0）──
+        if (c.convBgs && typeof c.convBgs === 'object') {
+          const cb = c.convBgs
+          for (const key of ['bubble', 'inline', 'code', 'scrollbar', 'chatScroll', 'todoCollapsed', 'todoExpanded', 'addBtn', 'cmdMenu', 'toBottom', 'sliderColor', 'sliderTrackColor', 'scrollColor']) {
+            convBgs = { ...convBgs, [key]: (typeof cb[key] === 'string' && cb[key]) ? cb[key] : null }
+          }
+          // 透明度类键（v0.9.14/15）：数值 0-1，缺失/非法回 0（不残留上一预设）
+          for (const key of ['addBtnOpacity', 'cmdMenuOpacity', 'sliderOpacity', 'sliderTrackOpacity', 'scrollOpacity']) {
+            const v = cb[key]
+            convBgs = { ...convBgs, [key]: (typeof v === 'number' && v >= 0 && v <= 1) ? v : 0 }
+          }
+        }
+        // ── 框线：有才完整覆盖（缺键回默认）；缺失时全部重置（原行为）──
+        if (c.borders && typeof c.borders === 'object') {
+          for (const key of BORDER_KEYS) {
+            const b = c.borders[key]
+            borders = { ...borders, [key]: {
+              color: b && typeof b === 'object' && typeof b.color === 'string' && /^#[0-9a-f]{6}$/i.test(b.color) ? b.color : null,
+              opacity: b && typeof b === 'object' && typeof b.opacity === 'number' && b.opacity >= 0 && b.opacity <= 1 ? b.opacity : 0,
+            } }
+          }
+        } else {
+          for (const key of BORDER_KEYS) borders = { ...borders, [key]: { color: null, opacity: 0 } }
+        }
+        // 末尾一次通知 + 保存（批量：替代原 35+ 次逐 setter 通知）
+        notify(); statsNotify(); floatNotify(); saveNow()
+      }
+      try { loadPresets() } catch (e) { /* 忽略 */ }
+
+      // ════════ 07_css_builder.js ════════
+      // ┌─ 片段 07_css_builder ───────────────────────────
+      // │ 职责：全部 CSS 注入（token 覆盖 + 背景/侧边栏/新会话/Cordis/浮窗层级样式）
+      // │ 定义：AreaCss + buildXxx 纯函数 + manualCssRefresh
+      // │ ⚠️ 层级铁律见 EXPERIENCE §5.8bis（v20：容器不建层叠上下文）
+      // │ 性能（2026-08-21 优化）：
+      // │   · CSS 按模块拆分独立 useMemo + 独立 <style> 标签（img/app/composer/sidebar/ns/lift/cordis/float），
+      // │     改某区域透明度/颜色只重算该模块，其他模块不重算（此前整份一起重建，调主界面连坐输入区卡顿）；
+      // │   · 图片 dataURI 单独注入 CSS 变量（--tcz-*-img）→ 透明度/颜色变化不重拼几 MB 图片字符串；
+      // │     ⚠️ 主界面（app）例外：其背景是多层 background-image，var() 在多层列表中替换失效 → app 直接拼 dataURI；
+      // │   · 拖动中（saveSuppress 抑制期）setXxx 走 manualCssRefresh 直接写 style 标签（绕过 React 渲染链，
+      // │     零虚拟 DOM 重建），松开（commitSave）后 notify 同步 React 状态 → 滑块拖动更顺滑
+      // 各模块 CSS 生成纯函数（读全局状态 let；拖动中 manualCssRefresh 与 React useMemo 共用，保证一致）
+      function buildImgVars() {
+        const parts = []
+        if (areas.sidebar.mode === 'image' && areas.sidebar.image && sidebarInfo && sidebarInfo.selector) {
+          parts.push(sidebarInfo.selector + ' { --tcz-sidebar-img: url("' + areas.sidebar.image.dataURI + '"); }')
+        }
+        if (areas.composer.mode === 'image' && areas.composer.image) {
+          parts.push('[data-composer-card] { --tcz-composer-img: url("' + areas.composer.image.dataURI + '"); }')
+        }
+        if (newSession.mode === 'image' && newSession.image) {
+          parts.push('[class*="_newSession"]:not([class*="_newSessionLabel"]) { --tcz-ns-img: url("' + newSession.image.dataURI + '"); }')
+        }
+        const detImg = areas.details || {}
+        if (detImg.mode === 'image' && detImg.image) {
+          parts.push('[class*="VOzbGW_panel"] { --tcz-details-img: url("' + detImg.image.dataURI + '"); }')
+        }
+        // ⚠️ 防御：areas.float/details/cordis 可能 undefined（旧配置整体替换后缺键），读前兜底空对象（v0.9.13 事故修复）
+        const flImg = areas.float || {}
+        if (flImg.mode === 'image' && flImg.image) {
+          parts.push('[data-thmcz-float] { --tcz-float-img: url("' + flImg.image.dataURI + '"); }')
+        }
+        const corImg = areas.cordis || {}
+        if (corImg.mode === 'image' && corImg.image) {
+          parts.push('[class*="Nqubda_panel"] { --tcz-cordis-img: url("' + corImg.image.dataURI + '"); }')
+        }
+        return parts.length ? parts.join(' ') : null
+      }
+      function buildAppCss() {
+        // 主界面（html,body 背景）。底色 = 最底层垫色（常驻仅颜色）；模式内容（纯色渐变/图片）叠在其上。
+        // 图片直接拼 dataURI（不用 var()：多层 background-image 里 var() 替换失效 → 图片不显示）；图片已在选图时 downscale 体积小
+        const cssParts = []
+        let appBottom = null
+        if (areas.app.bottomColor) {
+          const abRgb = parseRgb(areas.app.bottomColor)
+          appBottom = 'rgb(' + abRgb[0] + ',' + abRgb[1] + ',' + abRgb[2] + ')'
+        }
+        const appImg = areas.app.image
+        const appInclude = areas.app.includeSidebar !== false
+        if (areas.app.mode === 'image' && appImg) {
+          const op = areas.app.opacity == null ? 0 : areas.app.opacity
+          const layerRgb = appBottom ? parseRgb(areas.app.bottomColor) : parseRgb(baseBg)
+          const grad = 'linear-gradient(rgba(' + layerRgb[0] + ',' + layerRgb[1] + ',' + layerRgb[2] + ',' + op + '), rgba(' + layerRgb[0] + ',' + layerRgb[1] + ',' + layerRgb[2] + ',' + op + '))'
+          const url = 'url("' + appImg.dataURI + '")'
+          if (!appInclude && sidebarInfo && sidebarInfo.width) {
+            const sbW = Math.round(sidebarInfo.width)
+            const mainW = Math.max(100, Math.round(window.innerWidth - sbW))
+            cssParts.push('html, body { background-color: ' + (appBottom || baseBg) + ' !important; background-image: ' + grad + ', ' + url + ' !important; background-size: ' + mainW + 'px 100%, ' + mainW + 'px 100% !important; background-position: ' + sbW + 'px center, ' + sbW + 'px center !important; background-repeat: no-repeat, no-repeat !important; }')
+          } else {
+            cssParts.push('html, body { background-color: ' + (appBottom || 'transparent') + ' !important; background-image: ' + grad + ', ' + url + ' !important; background-size: cover, cover !important; background-position: center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; }')
+          }
+        } else if (areas.app.mode === 'color') {
+          const a = 1 - (areas.app.opacity == null ? 0 : areas.app.opacity)
+          const rgbC = parseRgb(areas.app.color)
+          const bg = appBottom || baseBg
+          const grad = 'linear-gradient(rgba(' + rgbC[0] + ',' + rgbC[1] + ',' + rgbC[2] + ',' + a + '), rgba(' + rgbC[0] + ',' + rgbC[1] + ',' + rgbC[2] + ',' + a + '))'
+          if (!appInclude && sidebarInfo && sidebarInfo.width) {
+            const sbW = Math.round(sidebarInfo.width)
+            const mainW = Math.max(100, Math.round(window.innerWidth - sbW))
+            cssParts.push('html, body { background-color: ' + bg + ' !important; background-image: ' + grad + ' !important; background-size: ' + mainW + 'px 100% !important; background-position: ' + sbW + 'px center !important; background-repeat: no-repeat !important; }')
+          } else {
+            cssParts.push('html, body { background-color: ' + bg + ' !important; background-image: ' + grad + ' !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }')
+          }
+        } else if (appBottom) {
+          cssParts.push('html, body { background-color: ' + appBottom + ' !important; }')
+        }
+        return cssParts.join(' ')
+      }
+      // 卡片式背景通用构建（2026-08-22 梳理去重）：composer/details/cordis/float 四区域共用同一套
+      // 「无/纯色/图片 + 底色 + ::before 铺满」结构（原四个函数 90% 相同，各 ~45 行）。
+      // opts: { sel, area, radius, mainExtra, imgVar }
+      //   · mainExtra = 图片/纯色分支主元素附加声明（composer 'z-index:0'、details 'z-index:1'；::before z-index:-1 沉底的前提）
+      //   · imgVar = 图片 dataURI 的 CSS 变量名（--tcz-*-img，buildImgVars 注入）
+      //   · 纯底色分支（无模式）不拼 mainExtra（::before 不存在，无需建层叠上下文）——与原实现一致
+      // 底色透明度：数值大=透明 → alpha = 1-bottomOpacity；alpha=1 时输出 rgb 等价值
+      function buildCardCss(opts) {
+        const sel = opts.sel
+        const area = opts.area || {}
+        const radius = opts.radius || 12
+        const mainExtra = opts.mainExtra ? ' ' + opts.mainExtra : ''
+        const imgVar = opts.imgVar || '--tcz-card-img'
+        const cssParts = []
+        let bottom = null
+        if (area.bottomColor) {
+          const rgb = parseRgb(area.bottomColor)
+          const a = 1 - (area.bottomOpacity == null ? 0 : area.bottomOpacity)
+          bottom = a >= 1 ? 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')' : 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + a + ')'
+        }
+        if (area.mode === 'image' && area.image) {
+          const alpha = 1 - (area.opacity == null ? 0 : area.opacity)
+          cssParts.push(sel + ' { background-color: ' + (bottom || 'transparent') + ' !important;' + mainExtra + ' }')
+          cssParts.push(sel + '::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; border-radius: ' + radius + 'px !important; background-image: var(' + imgVar + ') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; -webkit-mask-image: linear-gradient(rgba(0,0,0,' + alpha + '), rgba(0,0,0,' + alpha + ')) !important; mask-image: linear-gradient(rgba(0,0,0,' + alpha + '), rgba(0,0,0,' + alpha + ')) !important; }')
+        } else if (area.mode === 'color') {
+          const a = 1 - (area.opacity == null ? 0 : area.opacity)
+          const rgbC = parseRgb(area.color)
+          cssParts.push(sel + ' { background-color: ' + (bottom || baseBg) + ' !important;' + mainExtra + ' }')
+          cssParts.push(sel + '::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; border-radius: ' + radius + 'px !important; background-image: linear-gradient(rgba(' + rgbC[0] + ',' + rgbC[1] + ',' + rgbC[2] + ',' + a + '), rgba(' + rgbC[0] + ',' + rgbC[1] + ',' + rgbC[2] + ',' + a + ')) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }')
+        } else if (bottom) {
+          cssParts.push(sel + ' { background-color: ' + bottom + ' !important; }')
+        }
+        return cssParts.join(' ')
+      }
+      function buildComposerCss() {
+        // 输入区（composer）：背景作用在 [data-composer-card]；纯色/图片用 ::before 铺满（显示范围一致）；含统计条隐藏/固定高度/光标
+        const cssParts = []
+        cssParts.push(buildCardCss({ sel: '[data-composer-card]', area: areas.composer, radius: 22, mainExtra: 'z-index: 0 !important;', imgVar: '--tcz-composer-img' }))
+        // 官方 StatsLine 隐藏（v0.9.19 调整后恢复无条件）：统计条始终由我们的 ComposerStatsLine 接管渲染——
+        // 9 项子开关在不展开时也要生效（官方无法按项过滤）；外观复刻官方（block/居中/单行省略）
+        cssParts.push('.FJxK0a_root { display: none !important; }')
+        if (composerFixedHeight) {
+          const rows = Math.max(1, Math.min(10, Math.round(composerRows || 4)))
+          const h = rows * 24
+          cssParts.push('[data-input-scroll] { height: ' + h + 'px !important; max-height: ' + h + 'px !important; }')
+        }
+        cssParts.push('[data-input-scroll] { cursor: text !important; }')
+        return cssParts.join(' ')
+      }
+      function buildDetailsCss() {
+        // 设置界面（details，v0.9.12）：官方设置面板 [class*="VOzbGW_panel"]（居中模态，背景 --dsw-alias-bg-layer-2，
+        // 圆角 24px，z-index:1 建层叠上下文 → ::before z-index:-1 安全，同 composer 方案）。
+        // 逻辑像主界面：无/纯色/图片 + 透明度（大=透明）+ 底色（常驻白底）；无显示区域开关
+        // ⚠️ detSel 必须先声明（v0.9.19 事故：detailsPos 分支在 const detSel 之前用 → TDZ ReferenceError →
+        //    buildDetailsCss 抛错 → AreaCss 崩溃 → 全部 CSS 失效，用户"拖动后全部设置不生效"）
+        const detSel = '[class*="VOzbGW_panel"]'
+        const cssParts = []
+        // 拖动位置（v0.9.19）：非 null 时面板脱离 overlay flex 居中，固定在拖动位置（刷新后由本 CSS 保持）
+        if (detailsPos) {
+          cssParts.push(detSel + ' { position: fixed !important; margin: 0 !important; left: ' + detailsPos.x + 'px !important; top: ' + detailsPos.y + 'px !important; }')
+        }
+        // 拖动区 header 光标 = 系统原生 move（与浮窗一致，v0.9.19）
+        cssParts.push(detSel + ' [class*="_header"] { cursor: move !important; }')
+        // ⚠️ 防御：areas.details 可能 undefined（旧配置整体替换后缺键），读前兜底空对象（v0.9.13 事故同源修复）
+        cssParts.push(buildCardCss({ sel: detSel, area: areas.details || {}, radius: 24, mainExtra: 'z-index: 1 !important;', imgVar: '--tcz-details-img' }))
+        return cssParts.join(' ')
+      }
+      function buildSidebarCss() {
+        // 侧边栏（底色 + 图片/纯色/无）；三层独立架构（层1 body / 层2 底色 / 层3 ::before 图片）
+        const cssParts = []
+        let bottomColor = null
+        if (areas.sidebar.bottomEnabled && areas.sidebar.bottomColor) {
+          const ba = 1 - (areas.sidebar.bottomOpacity == null ? 0 : areas.sidebar.bottomOpacity)
+          const [br, bg, bb] = parseRgb(areas.sidebar.bottomColor)
+          bottomColor = 'rgba(' + br + ',' + bg + ',' + bb + ',' + ba + ')'
+        }
+        if (areas.sidebar.mode === 'image' && areas.sidebar.image && sidebarInfo && sidebarInfo.selector) {
+          const maskAlpha = 1 - (areas.sidebar.opacity == null ? 0 : areas.sidebar.opacity)
+          const bottom = bottomColor || 'transparent'
+          cssParts.push(sidebarInfo.selector + ' { position: relative !important; background-color: ' + bottom + ' !important; }')
+          cssParts.push(sidebarInfo.selector + '::before { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; background-image: var(--tcz-sidebar-img) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; -webkit-mask-image: linear-gradient(rgba(0,0,0,' + maskAlpha + '), rgba(0,0,0,' + maskAlpha + ')) !important; mask-image: linear-gradient(rgba(0,0,0,' + maskAlpha + '), rgba(0,0,0,' + maskAlpha + ')) !important; }')
+        }
+        if (areas.sidebar.mode === 'color' && sidebarInfo && sidebarInfo.selector) {
+          const a = 1 - (areas.sidebar.opacity == null ? 0 : areas.sidebar.opacity)
+          const [r, g, b] = parseRgb(areas.sidebar.color)
+          const bottom = bottomColor || 'transparent'
+          cssParts.push(sidebarInfo.selector + ' { background-color: ' + bottom + ' !important; background-image: linear-gradient(rgba(' + r + ',' + g + ',' + b + ',' + a + '), rgba(' + r + ',' + g + ',' + b + ',' + a + ')) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }')
+        }
+        if ((areas.sidebar.mode === 'transparent' || (areas.sidebar.mode === 'image' && !areas.sidebar.image)) && bottomColor && sidebarInfo && sidebarInfo.selector) {
+          cssParts.push(sidebarInfo.selector + ' { background-color: ' + bottomColor + ' !important; }')
+        }
+        return cssParts.join(' ')
+      }
+      function buildBrandCss() {
+        // DeepSeek Harness 标志（v0.9.17）：左上角品牌行 wordmark（BrandWordmark svg，path 全部 fill:currentColor → 给 svg 设 color 即变色）。
+        // 作用于 logoRow 内 [_brand] 的 svg（稳定后缀；限定祖先防误伤其他 _brand 元素）；折叠态 brand 不渲染（wide 才显示），无副作用。
+        // 透明度：数值大=透明 → alpha = 1-opacity（rgba 直接作用于 color，无需 color-mix——用户色非 token）
+        const cssParts = []
+        const bc = brand.color || '#3964fe'
+        const ba = Math.max(0, Math.min(1, 1 - (brand.opacity == null ? 0 : brand.opacity)))
+        const color = ba >= 1 ? bc : (() => {
+          const rgb = parseRgb(bc)
+          return 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + ba + ')'
+        })()
+        cssParts.push('[class*="_logoRow"] [class*="_brand"] svg { color: ' + color + ' !important; }')
+        // 标志文字 "Harness" 部分单独颜色（v0.9.20）：实际渲染的 BrandWordmark（dsh 内部版）结构 =
+        // svg > path×9(DeepSeek) + g[whale-clip](鲸鱼图标) + rect(129,52 = Harness 徽章背景) + g[badge-clip](Harness 文字×7)。
+        // Harness 文字 = badge-clip 的 g 内 path → `svg g[clip-path*="badge"] path`（属性值含 badge，精确区分 whale g）。
+        // fill 直接覆盖 currentColor。color null 时：opacity>0 → 淡化**标志整体色**（跟随标志 + 透明度也生效）
+        const bh = brandHarness || {}
+        const bhOp = bh.opacity == null ? 0 : bh.opacity
+        if (bh.color || bhOp > 0) {
+          const base = bh.color || brand.color || '#3964fe'
+          const bha = Math.max(0, Math.min(1, 1 - bhOp))
+          const bhrgb = parseRgb(base)
+          const hColor = bha >= 1 ? base : 'rgba(' + bhrgb[0] + ',' + bhrgb[1] + ',' + bhrgb[2] + ',' + bha + ')'
+          cssParts.push('[class*="_logoRow"] [class*="_brand"] svg g[clip-path*="badge"] path { fill: ' + hColor + ' !important; }')
+        }
+        return cssParts.join(' ')
+      }
+      // 框线（v0.9.18）：所有 UI 默认边框/分隔线颜色 + 透明度，5 区域独立。
+      // 各区域容器覆盖官方边框 token（子树内优先于 body 继承值）：
+      //   · color 设了 → 5 变量 = rgba(用户色, 1-opacity)（层级统一为用户色）；
+      //   · color 未设（默认）→ 各区域固定默认色：主界面/Cordis/输入区 = 淡灰（BORDER_DEFAULT_LIGHT，与色块显示一致，
+      //     官方 --dsw-alias-border-l2 rgba(0,0,0,.1) 白底合成，官方 l1=.04 太淡像没颜色，用户要求）；
+      //     设置界面/浮窗面板 = 黑色（BORDER_DEFAULT_DARK，用户定）。常量统一在 00_constants（07/15 共用）。
+      //     透明度（数值大=透明）淡化默认色/用户色。始终注入（无 early return）→ 默认色恒生效。
+      // main = 布局三列（sidebarCol/centerCol/detailsCol，稳定后缀；浮层面板都不在三列内 → 天然隔离）
+      function buildBordersCss() {
+        const VARS = ['--dsw-alias-border-l1', '--dsw-alias-border-l2', '--dsw-alias-border-l2-darkmode-thin', '--dsw-alias-border-l3', '--dsw-alias-border-l4']
+        const AREA_SELS = {
+          main: '[class*="_sidebarCol"], [class*="_centerCol"], [class*="_detailsCol"]',
+          cordis: '[class*="Nqubda_panel"]',
+          composer: '[data-composer-seat], [data-composer-card]',
+          details: '[class*="VOzbGW_panel"]',
+          float: '[data-thmcz-float]',
+        }
+        const cssParts = []
+        for (const k of BORDER_KEYS) {
+          const b = borders[k] || {}
+          const op = b.opacity == null ? 0 : b.opacity
+          const a = Math.max(0, Math.min(1, 1 - op))
+          const base = b.color || ((k === 'details' || k === 'float') ? BORDER_DEFAULT_DARK : BORDER_DEFAULT_LIGHT)
+          const rgb = parseRgb(base)
+          const c = a >= 1 ? base : 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + a + ')'
+          cssParts.push(AREA_SELS[k] + ' { ' + VARS.map((v) => v + ': ' + c).join('; ') + '; }')
+        }
+        return cssParts.join(' ')
+      }
+      function buildNewSessionCss() {
+        // 新会话按钮（_newSession 是 _newSessionLabel 子串 → 选择器必须排除 label）
+        const cssParts = []
+        const ns = newSession
+        const nsBtn = '[class*="_newSession"]:not([class*="_newSessionLabel"])'
+        const nsLabel = '[class*="_newSessionLabel"]'
+        let bottom = 'transparent'
+        if (ns.bottomEnabled && ns.bottomColor) {
+          const ba = 1 - (ns.bottomOpacity == null ? 0 : ns.bottomOpacity)
+          const [br, bg2, bb] = parseRgb(ns.bottomColor)
+          bottom = 'rgba(' + br + ',' + bg2 + ',' + bb + ',' + ba + ')'
+        }
+        if (!ns.showText) cssParts.push(nsLabel + ' { display: none !important; }')
+        if (!ns.showIcon) cssParts.push(nsBtn + ' svg { display: none !important; }')
+        if (ns.mode === 'none') {
+          cssParts.push(nsBtn + ' { background-color: ' + bottom + ' !important; border-color: transparent !important; }')
+          cssParts.push(nsBtn + ':hover { background-color: transparent !important; }')
+        } else if (ns.mode === 'color') {
+          const a = 1 - (ns.opacity == null ? 0 : ns.opacity)
+          const [r, g, b] = parseRgb(ns.color)
+          cssParts.push(nsBtn + ' { background-color: ' + bottom + ' !important; border-color: transparent !important; position: relative !important; z-index: 0 !important; }')
+          cssParts.push(nsBtn + '::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background-image: linear-gradient(rgba(' + r + ',' + g + ',' + b + ',' + a + '), rgba(' + r + ',' + g + ',' + b + ',' + a + ')) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }')
+          cssParts.push(nsBtn + ':hover { background-color: transparent !important; }')
+        } else if (ns.mode === 'image' && ns.image) {
+          const alpha = 1 - (ns.opacity == null ? 0 : ns.opacity)
+          cssParts.push(nsBtn + ' { background-color: ' + bottom + ' !important; border-color: transparent !important; position: relative !important; z-index: 0 !important; }')
+          cssParts.push(nsBtn + '::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background-image: var(--tcz-ns-img) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; -webkit-mask-image: linear-gradient(rgba(0,0,0,' + alpha + '), rgba(0,0,0,' + alpha + ')) !important; mask-image: linear-gradient(rgba(0,0,0,' + alpha + '), rgba(0,0,0,' + alpha + ')) !important; }')
+          cssParts.push(nsBtn + ':hover { background-color: transparent !important; }')
+        }
+        if (ns.iconColor) cssParts.push(nsBtn + ' svg { color: ' + ns.iconColor + ' !important; }')
+        if (ns.textColor) cssParts.push(nsLabel + ' { color: ' + ns.textColor + ' !important; }')
+        return cssParts.join(' ')
+      }
+      function buildLiftCss() {
+        // 侧边栏图片模式下顶部 UI 提升（v20 铁律：只提升具体 UI 元素本身；须渲染在 ns 之后覆盖其 z-index:0）
+        const cssParts = []
+        if (areas.sidebar.mode === 'image' && areas.sidebar.image && sidebarInfo && sidebarInfo.selector) {
+          cssParts.push(sidebarInfo.selector + ' [class*="_logoRow"] { position: relative !important; z-index: 1 !important; }')
+          cssParts.push('[class*="_newSession"]:not([class*="_newSessionLabel"]) { position: relative !important; z-index: 1 !important; }')
+        }
+        return cssParts.join(' ')
+      }
+      function buildCordisCss() {
+        // Cordis 插件界面（v0.9.14）：官方面板 [class*="Nqubda_panel"]（z-index:30 建层叠上下文 + position:fixed → ::before z-index:-1 安全，
+        // 圆角 12px，背景 --dsw-alias-bg-base）。背景调整像设置界面：无/纯色/图片 + 透明度（大=透明）+ 底色（含透明度）。
+        // 原 cordisOpacity（半透明白盖层）已删；「Cordis 按钮常驻」开关在 13_boot 的 applyCordisEntryFlag（与本 CSS 无关）
+        // ⚠️ 防御：areas.cordis 可能 undefined（旧配置整体替换后缺键），读前兜底空对象（v0.9.13 事故修复）
+        return buildCardCss({ sel: '[class*="Nqubda_panel"]', area: areas.cordis || {}, radius: 12, imgVar: '--tcz-cordis-img' })
+      }
+      function buildFloatCss() {
+        // 浮窗面板（v0.9.13）：自研浮窗容器 [data-thmcz-float]（12_float GlobalFloat）。
+        // 背景像主界面/设置界面：无/纯色/图片 + 透明度（大=透明）+ 底色（常驻白底）；
+        // 容器本身 position:fixed + z-index 2147483647（建层叠上下文）→ ::before z-index:-1 安全（同 details 方案）。
+        // 另保留浮窗可见时的 overlay 层级提升（[data-shell-overlay]）。
+        const cssParts = []
+        if (floatVisible) cssParts.push('[data-shell-overlay] { z-index: 2147483646 !important; }')
+        // ⚠️ 防御：areas.float 可能 undefined（旧配置整体替换后缺键），读前兜底空对象（v0.9.13 事故修复）
+        cssParts.push(buildCardCss({ sel: '[data-thmcz-float]', area: areas.float || {}, radius: 12, imgVar: '--tcz-float-img' }))
+        return cssParts.join(' ')
+      }
+      // 对话区：代码块滚动条 + 对话区滚动条 + 任务栏收起/展开背景（各自定向，避免全局变化）
+      function buildConvCss() {
+        const cssParts = []
+        // 代码块滚动条（v0.9.19 根治）：对话区内容区 [data-chat-flow]（column）整体设变量——
+        // column 内部**所有**滚动条（代码块 terminal/read/search/diff、JsonBlock、IO 卡片 IN/OUT 等，
+        // 不管哈希类名）都跟随「代码块滚动条」。对话区滚动容器是 column 的**祖先**（不继承 column 变量）→
+        // 不受影响，仍由「对话区滚动条」直接 thumb 控制。此前逐个补 _block_/md-code-block/pre/_body_ 仍有漏网（IO 卡片）
+        if (convBgs.scrollbar) {
+          cssParts.push('[data-chat-flow] { --dsh-scrollbar-thumb: ' + convBgs.scrollbar + ' !important; --dsh-scrollbar-thumb-hover: ' + convBgs.scrollbar + ' !important; }')
+        }
+        // 对话区滚动条（含 data-chat-flow 的 _scroll 容器）：v0.9.19 改**直接作用于自身 thumb**（不设变量）——
+        // 变量会被内部滚动条（JsonBlock 裸 pre 等）继承 → 代码块竖滚动条错误跟随对话区颜色（用户反馈"竖的绑错"）。
+        // ⚠️ v0.9.19 再修：不用 Firefox scrollbar-color——scrollbar-color 是**继承属性**，会继续污染内部代码块滚动条；
+        // 只保留 Webkit ::-webkit-scrollbar-thumb 直接样式（只控制对话区最外层滚动条，即最右边的滚动条）
+        if (convBgs.chatScroll) {
+          cssParts.push('[class*="_scroll"]:has([data-chat-flow])::-webkit-scrollbar-thumb { background: ' + convBgs.chatScroll + ' !important; }')
+          cssParts.push('[class*="_scroll"]:has([data-chat-flow])::-webkit-scrollbar-thumb:hover { background: ' + convBgs.chatScroll + ' !important; }')
+        }
+        // 任务栏：展开滑入动画（官方渲染 list 时播放）+ 背景渐变（0.2s 快速跟手，与状态切换基本同步）；
+        // 收起 = 官方行为（list 瞬间移除，不做列表动画）
+        cssParts.push('@keyframes tcz-todo-expand { from { opacity: 0; transform: scaleY(0.6); } to { opacity: 1; transform: scaleY(1); } }')
+        cssParts.push('[data-testid="todo-panel"] [class*="_list"] { animation: tcz-todo-expand 0.4s ease-in-out !important; transform-origin: top !important; }')
+        // 收起 = 官方行为（list 瞬间移除，不做列表动画）；背景色渐变（设色时）
+        if (convBgs.todoCollapsed || convBgs.todoExpanded) {
+          cssParts.push('[data-testid="todo-panel"] { transition: background-color 0.2s ease-out !important; }')
+        }
+        if (convBgs.todoCollapsed) {
+          cssParts.push('[data-testid="todo-panel"]:has([aria-expanded="false"]) { background-color: ' + convBgs.todoCollapsed + ' !important; }')
+        }
+        if (convBgs.todoExpanded) {
+          cssParts.push('[data-testid="todo-panel"]:has([aria-expanded="true"]) { background-color: ' + convBgs.todoExpanded + ' !important; }')
+        }
+        // 输入框「+」命令按钮背景（官方 --dsw-specific-selector；hover 官方 --dsw-alias-interactive-bg-hover-solid → 一并覆盖防悬停跳回官方色）
+        // v0.9.14：支持透明度——自定义颜色用 rgba(1-opacity)；官方默认色（addBtn null）时透明度作用于官方 token（color-mix）
+        const addBtnA = Math.max(0, Math.min(1, 1 - (convBgs.addBtnOpacity == null ? 0 : convBgs.addBtnOpacity)))
+        if (convBgs.addBtn) {
+          const rgb = parseRgb(convBgs.addBtn)
+          const bg = addBtnA >= 1 ? convBgs.addBtn : 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + addBtnA + ')'
+          cssParts.push('[class*="uV2eYG_add"] { background-color: ' + bg + ' !important; }')
+          cssParts.push('[class*="uV2eYG_add"]:hover:not(:disabled) { background-color: ' + bg + ' !important; }')
+        } else if (addBtnA < 1) {
+          // 官方默认色 + 透明度：color-mix 混合官方 token 与透明（background-color 单值，var() 安全）
+          const pct = Math.round(addBtnA * 100) + '%'
+          cssParts.push('[class*="uV2eYG_add"] { background-color: color-mix(in srgb, var(--dsw-specific-selector) ' + pct + ', transparent) !important; }')
+          cssParts.push('[class*="uV2eYG_add"]:hover:not(:disabled) { background-color: color-mix(in srgb, var(--dsw-specific-selector) ' + pct + ', transparent) !important; }')
+        }
+        // 命令菜单面板背景（官方 --dsw-specific-menu，被多包共用 → 精确选择器覆盖，不改全局 token）
+        // v0.9.14：支持透明度（cmdMenuOpacity，同 addBtn；官方默认色用 color-mix）
+        const cmdMenuA = Math.max(0, Math.min(1, 1 - (convBgs.cmdMenuOpacity == null ? 0 : convBgs.cmdMenuOpacity)))
+        if (convBgs.cmdMenu) {
+          const rgb = parseRgb(convBgs.cmdMenu)
+          const bg = cmdMenuA >= 1 ? convBgs.cmdMenu : 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + cmdMenuA + ')'
+          cssParts.push('[class*="_3e4SsG_menu"] { background-color: ' + bg + ' !important; }')
+        } else if (cmdMenuA < 1) {
+          const pct = Math.round(cmdMenuA * 100) + '%'
+          cssParts.push('[class*="_3e4SsG_menu"] { background-color: color-mix(in srgb, var(--dsw-specific-menu) ' + pct + ', transparent) !important; }')
+        }
+        // 对话区「V」一键到底部按钮背景（v0.9.15）：官方 token --dsw-alias-button-floating-fill 被布局手柄共用 → 精确选择器覆盖
+        if (convBgs.toBottom) {
+          cssParts.push('[class*="Md3f7G_toBottom"] { background-color: ' + convBgs.toBottom + ' !important; }')
+        }
+        // 主题设置插件滑条（v0.9.15）：range 分左右两半——左半边（已填充）+ 右半边（未填充轨道）+ 圆点，各自独立颜色/透明度。
+        // 仅作用于 data-thmcz-range（插件自己的 range，不碰官方滑条）。
+        // ⚠️ 矩形框 bug 修复：必须 -webkit-appearance:none 去掉原生轨道样式（原生+自定义背景叠加 = 矩形框）；
+        // track 设固定高度+圆角（渐变 = 左填充 P% / 右轨道 P%，P = --tcz-range-val JS 每帧更新）；thumb 圆形 = sliderColor。
+        // 透明度：数值大=透明 → alpha = 1-opacity（rgba）
+        const sliderFill = convBgs.sliderColor
+        const sliderTrack = convBgs.sliderTrackColor
+        if (sliderFill || sliderTrack) {
+          const fillA = Math.max(0, Math.min(1, 1 - (convBgs.sliderOpacity == null ? 0 : convBgs.sliderOpacity)))
+          const trackA = Math.max(0, Math.min(1, 1 - (convBgs.sliderTrackOpacity == null ? 0 : convBgs.sliderTrackOpacity)))
+          const fillRgb = sliderFill ? parseRgb(sliderFill) : null
+          const trackRgb = sliderTrack ? parseRgb(sliderTrack) : null
+          const fBg = sliderFill ? (fillA >= 1 ? sliderFill : 'rgba(' + fillRgb[0] + ',' + fillRgb[1] + ',' + fillRgb[2] + ',' + fillA + ')') : 'transparent'
+          const tBg = sliderTrack ? (trackA >= 1 ? sliderTrack : 'rgba(' + trackRgb[0] + ',' + trackRgb[1] + ',' + trackRgb[2] + ',' + trackA + ')') : 'rgba(128,128,128,0.3)'
+          cssParts.push('[data-thmcz-range] { -webkit-appearance: none !important; appearance: none !important; background: transparent !important; --tcz-range-fill: ' + fBg + '; --tcz-range-track: ' + tBg + '; }')
+          cssParts.push('[data-thmcz-range]::-webkit-slider-runnable-track { -webkit-appearance: none !important; appearance: none !important; height: 6px !important; border-radius: 3px !important; background: linear-gradient(to right, var(--tcz-range-fill) var(--tcz-range-val, 0%), var(--tcz-range-track) var(--tcz-range-val, 0%)) !important; }')
+          cssParts.push('[data-thmcz-range]::-webkit-slider-thumb { -webkit-appearance: none !important; appearance: none !important; width: 14px !important; height: 14px !important; border-radius: 50% !important; margin-top: -4px !important; background-color: ' + fBg + ' !important; border: none !important; }')
+          cssParts.push('[data-thmcz-range]::-moz-range-track { height: 6px !important; border-radius: 3px !important; background: linear-gradient(to right, var(--tcz-range-fill) var(--tcz-range-val, 0%), var(--tcz-range-track) var(--tcz-range-val, 0%)) !important; }')
+          if (sliderFill) {
+            cssParts.push('[data-thmcz-range]::-moz-range-thumb { width: 14px !important; height: 14px !important; border-radius: 50% !important; background-color: ' + fBg + ' !important; border: none !important; }')
+          }
+        }
+        // 浮窗界面滚动条（v0.9.15 修正）：用户要的是浮窗（GlobalFloat）内容区滚动条 [data-thmcz-float-scroll]，
+        // 不是设置面板的（此前误做成 VOzbGW_options，用户反馈"没作用"——因为看的是浮窗滚动条）。
+        // 变量作用于滚动容器（thumb var() 解析基准），滚动条宽度走 body 全局 8px
+        if (convBgs.scrollColor) {
+          const ca = Math.max(0, Math.min(1, 1 - (convBgs.scrollOpacity == null ? 0 : convBgs.scrollOpacity)))
+          const crgb = parseRgb(convBgs.scrollColor)
+          const cBg = ca >= 1 ? convBgs.scrollColor : 'rgba(' + crgb[0] + ',' + crgb[1] + ',' + crgb[2] + ',' + ca + ')'
+          cssParts.push('[data-thmcz-float-scroll] { --dsh-scrollbar-thumb: ' + cBg + ' !important; --dsh-scrollbar-thumb-hover: ' + cBg + ' !important; }')
+        }
+        return cssParts.join(' ')
+      }
+      // 完整 token 覆盖集合（v0.9.15 抽函数）：背景（主界面/侧边栏透明化）+ 文字颜色 + 对话区气泡/行内代码/代码块。
+      // AreaCss useEffect（React 路径）与 refreshConvTokens（拖动抑制期直更）共用——保证两路径覆盖同一完整集合，
+      // 避免 overrideTokens 替换 namespace 时顶掉彼此（"调 V 按钮主界面背景失效"事故根因）
+      function buildThemeTokens() {
+        const tokens = {}
+        const app = areas.app, sb = areas.sidebar
+        if (app.mode === 'color' || app.mode === 'image') {
+          tokens['--dsw-alias-bg-base'] = { light: 'transparent', dark: 'transparent' }
+          if (app.includeSidebar !== false) tokens['--dsw-specific-sidebar-fill'] = { light: 'transparent', dark: 'transparent' }
+        }
+        if (sb.mode === 'transparent' || sb.mode === 'image' || sb.mode === 'color') tokens['--dsw-specific-sidebar-fill'] = { light: 'transparent', dark: 'transparent' }
+        for (const it of COLOR_ITEMS) {
+          const v = colors[it.key]
+          if (!v) continue
+          for (const t of COLOR_TOKENS[it.key]) {
+            tokens[t] = { light: v, dark: v }
+          }
+        }
+        // 对话区背景（2026-08-21）：我的发言气泡 + 行内代码 + 代码块/编辑卡片/脚本终端（官方 token 覆盖，亮暗统一用户色）
+        if (convBgs.bubble) tokens['--dsw-specific-bubble'] = { light: convBgs.bubble, dark: convBgs.bubble }
+        if (convBgs.inline) tokens['--dsw-alias-markdown-inline-code'] = { light: convBgs.inline, dark: convBgs.inline }
+        if (convBgs.code) {
+          tokens['--dsw-alias-markdown-code-block'] = { light: convBgs.code, dark: convBgs.code }
+          // banner（read/search 卡片标题栏）同色，补全"背景不完全"
+          tokens['--dsw-alias-markdown-code-block-banner'] = { light: convBgs.code, dark: convBgs.code }
+        }
+        return tokens
+      }
+      // 对话区 token 覆盖直更（bubble/inline/code 走 theme.overrideTokens，不在 conv style 标签内）：
+      // 拖动抑制期 notify 被跳过 → AreaCss 的 token useEffect 不重跑 → 这里手动同步完整 token 集合（buildThemeTokens）
+      function refreshConvTokens() {
+        try {
+          const theme = ctx.get('theme')
+          if (!theme || typeof theme.overrideTokens !== 'function') return
+          const tokens = buildThemeTokens()
+          if (Object.keys(tokens).length) theme.overrideTokens('theme-customizer', tokens)
+        } catch (e) { /* 忽略 */ }
+      }
+      // 拖动中直更 style 标签（绕过 React 渲染链）：滑块拖动每帧调用。
+      // ⚠️ 只更新变化的模块（id 对应区域），绝不全量重建——appCss 含主界面大图 dataURI（多层背景不能用变量的代价），
+      //   全量重建会连坐所有滑块卡顿（与"整份 CSS 一起重建"同源问题）。
+      // imgVars 不重建（大 dataURI 不随透明度/颜色变化，换图/切模式走 React 正常路径）
+      // ⚠️ 性能（2026-08-22 v0.9.15 优化）：conv 键分两类——
+      //   · 非 token 键（scrollbar/chatScroll/todo*/addBtn/cmdMenu/toBottom/slider*/scroll*）：只刷 conv style 标签（'convStyle'）；
+      //   · token 键（bubble/inline/code）：style + refreshConvTokens（'conv'）。
+      //   此前拖动滚动条/滑条颜色每帧都跑 buildThemeTokens+overrideTokens（无用开销）→ 卡顿
+      function manualCssRefresh(id) {
+        try {
+          const setStyle = (key, css) => {
+            const el = document.querySelector('style[data-thmcz-' + key + ']')
+            if (el && typeof css === 'string') el.textContent = css
+          }
+          if (!id) {
+            setStyle('app', buildAppCss())
+            setStyle('composer', buildComposerCss())
+            setStyle('details', buildDetailsCss())
+            setStyle('sidebar', buildSidebarCss())
+            setStyle('brand', buildBrandCss())
+            setStyle('borders', buildBordersCss())
+            setStyle('ns', buildNewSessionCss())
+            setStyle('lift', buildLiftCss())
+            setStyle('cordis', buildCordisCss())
+            setStyle('float', buildFloatCss())
+            setStyle('conv', buildConvCss())
+            refreshConvTokens()
+            return
+          }
+          if (id === 'app') setStyle('app', buildAppCss())
+          else if (id === 'composer') setStyle('composer', buildComposerCss())
+          else if (id === 'details') setStyle('details', buildDetailsCss())
+          else if (id === 'sidebar') { setStyle('sidebar', buildSidebarCss()); setStyle('lift', buildLiftCss()) }
+          else if (id === 'brand') setStyle('brand', buildBrandCss())
+          else if (id === 'borders') setStyle('borders', buildBordersCss())
+          else if (id === 'ns') setStyle('ns', buildNewSessionCss())
+          else if (id === 'cordis') setStyle('cordis', buildCordisCss())
+          else if (id === 'float') setStyle('float', buildFloatCss())
+          else if (id === 'convStyle') setStyle('conv', buildConvCss())
+          else if (id === 'conv') { setStyle('conv', buildConvCss()); refreshConvTokens() }
+        } catch (e) { /* 忽略 */ }
+      }
+
+      function AreaCss() {
+        const { areas, sidebarInfo, floatVisible, newSession, composerFixedHeight, composerRows, convBgs } = useStore()
+        React.useEffect(() => {
+          detectColors()
+          const refresh = () => {
+            const info = detectSidebar()
+            if (info) setSidebarInfo(info)
+          }
+          if (!sidebarInfo) refresh()
+          // 网页变化（窗口缩放/布局变动）时重新检测侧边栏比例，保证选区比例始终跟手
+          window.addEventListener('resize', refresh)
+          return () => window.removeEventListener('resize', refresh)
+        }, [])
+
+        // 输入区固定高度：卡片实测宽高比缓存。
+        // useLayoutEffect 在 DOM 提交后、浏览器绘制前同步执行，读 clientWidth/Height 强制 reflow → 拿到新 CSS 生效后的最新布局值
+        // （getCropRatio 若在渲染期读 DOM，改行数那次渲染时新 CSS 尚未应用，会读到旧高度 → 选区不跟手）。
+        // 固定高度关闭 / 卡片缺失时置 null（getCropRatio 回退视口比例）
+        React.useLayoutEffect(() => {
+          if (!composerFixedHeight) { setComposerCardRatio(null); return }
+          const el = document.querySelector('[data-composer-card]')
+          if (el && el.clientWidth > 0 && el.clientHeight > 0) {
+            setComposerCardRatio(el.clientWidth / el.clientHeight)
+          } else {
+            setComposerCardRatio(null)
+          }
+        }, [composerFixedHeight, composerRows])
+
+        // Cordis 面板实测宽高比缓存（v0.9.15）：面板高度内容驱动（max-height 60vh，宽固定 420），固定公式不准。
+        // useLayoutEffect 在面板打开时测量；MutationObserver 监听面板开合（DOM 挂载/卸载）→ 开时重测、关时置 null；
+        // resize 重测（面板随视口缩放）。零定时器（observer 是事件驱动，非轮询）
+        React.useLayoutEffect(() => {
+          const measure = () => {
+            const el = document.querySelector('[class*="Nqubda_panel"]')
+            if (el && el.clientWidth > 0 && el.clientHeight > 0) {
+              setCordisCardRatio(el.clientWidth / el.clientHeight)
+            } else {
+              setCordisCardRatio(null)
+            }
+          }
+          measure()
+          let observer = null
+          try {
+            observer = new MutationObserver(() => { measure() })
+            observer.observe(document.body, { childList: true, subtree: true })
+          } catch (e) { /* 忽略（observer 不可用时不监听，只在挂载时测一次） */ }
+          window.addEventListener('resize', measure)
+          return () => {
+            if (observer) { try { observer.disconnect() } catch (e) { /* 忽略 */ } }
+            window.removeEventListener('resize', measure)
+          }
+        }, [])
+
+        // 输入框聚焦增强：官方 textarea 只覆盖文字实际高度，点文字下方的空白不聚焦。
+        React.useEffect(() => {
+          const onDocClick = (e) => {
+            const scroll = document.querySelector('[data-input-scroll]')
+            if (!scroll || !scroll.contains(e.target)) return
+            const grow = scroll.firstElementChild
+            const ta = scroll.querySelector('textarea')
+            if (!grow || !ta) return
+            const gb = grow.getBoundingClientRect()
+            if (e.clientY >= gb.top && e.clientY <= gb.bottom) return
+            const len = ta.value.length
+            ta.focus()
+            try { ta.setSelectionRange(len, len) } catch (err) { /* 忽略 */ }
+          }
+          document.addEventListener('click', onDocClick, true)
+          return () => document.removeEventListener('click', onDocClick, true)
+        }, [])
+
+        // 任务栏全面板点击（2026-08-22 定稿）：列表收起用官方行为（瞬间移除，不做列表动画）；
+        // 点击 header 以外区域时模拟 header 点击（官方切换展开/收起）；document 委托，无需等待 panel 渲染
+        React.useEffect(() => {
+          const onClick = (e) => {
+            const panel = document.querySelector('[data-testid="todo-panel"]')
+            if (!panel || !panel.contains(e.target)) return
+            const header = panel.querySelector('[class*="_header"]')
+            if (header && header.contains(e.target)) return // header 自身处理
+            if (header) { try { header.click() } catch (err) { /* 忽略 */ } }
+          }
+          document.addEventListener('click', onClick, true)
+          return () => document.removeEventListener('click', onClick, true)
+        }, [])
+
+        // 设置界面面板拖动（v0.9.19）：document 委托（面板每次打开重新挂载，委托无需绑定/解绑）。
+        // 拖动区 = 面板 header（[class*="_header"]，54px 标题栏，排除关闭按钮）；拖动中内联 style 直更（零 React），
+        // pointerup 写回 detailsPos（持久化）→ CSS 重建固定位置。未拖动过（detailsPos null）→ 官方居中不动。
+        // detailsDragEnabled=false（布局调整开关）时直接忽略拖动。
+        React.useEffect(() => {
+          const onHeaderDown = (e) => {
+            if (e.button !== 0) return
+            if (!detailsDragEnabled) return
+            const header = e.target.closest && e.target.closest('[class*="VOzbGW_panel"] [class*="_header"]')
+            if (!header) return
+            if (e.target.closest && e.target.closest('[class*="_close"]')) return // 关闭按钮不触发拖动
+            e.preventDefault()
+            const panel = header.closest('[class*="VOzbGW_panel"]')
+            if (!panel) return
+            const rect = panel.getBoundingClientRect()
+            panel.style.position = 'fixed'
+            panel.style.margin = '0'
+            // ⚠️ !important：detailsPos 写入后 buildDetailsCss 输出 left/top !important——内联必须同优先级，
+            //   否则第二次拖动被 CSS 规则压住（"拖一下拖不了了"）。用 setProperty 带 important
+            panel.style.setProperty('left', rect.left + 'px', 'important')
+            panel.style.setProperty('top', rect.top + 'px', 'important')
+            const sx = e.clientX, sy = e.clientY
+            const ox = rect.left, oy = rect.top
+            const onMove = (ev) => {
+              panel.style.setProperty('left', (ox + ev.clientX - sx) + 'px', 'important')
+              panel.style.setProperty('top', (oy + ev.clientY - sy) + 'px', 'important')
+            }
+            const onUp = () => {
+              window.removeEventListener('pointermove', onMove)
+              window.removeEventListener('pointerup', onUp)
+              const r = panel.getBoundingClientRect()
+              setDetailsPos({ x: Math.round(r.left), y: Math.round(r.top) })
+            }
+            window.addEventListener('pointermove', onMove)
+            window.addEventListener('pointerup', onUp)
+          }
+          document.addEventListener('pointerdown', onHeaderDown, true)
+          return () => document.removeEventListener('pointerdown', onHeaderDown, true)
+        }, [detailsDragEnabled])
+
+        // 侧边栏复位按钮（v0.9.19）：开启「设置界面移动」（detailsDragEnabled）时，官方设置按钮
+        // （[class*="VOzbGW_trigger"]）**右半注入复位按钮**（一分为二：左=设置，右=复位）——用户要求。
+        // 原生 DOM 注入（不注册 sidebar 槽位：sidebar.settings 是官方容器槽位，直接注册会覆盖 trigger）。
+        // MutationObserver 监听 trigger 挂载（侧边栏设置区渲染后注入）；detailsDragEnabled 关闭时清理。
+        React.useEffect(() => {
+          const cleanup = () => document.querySelectorAll('[data-thmcz-details-reset]').forEach((el) => { try { el.remove() } catch (e) { /* 忽略 */ } })
+          if (!detailsDragEnabled) { cleanup(); return undefined }
+          let btn = null
+          const ensure = () => {
+            if (btn) return
+            const t = document.querySelector('[class*="VOzbGW_trigger"]')
+            if (!t) return
+            if (t.style.position !== 'fixed') t.style.position = 'relative'
+            btn = document.createElement('button')
+            btn.setAttribute('data-thmcz-details-reset', 'true')
+            btn.textContent = '设置复位'
+            btn.title = '恢复设置面板到居中位置'
+            btn.style.cssText = 'position:absolute;top:0;right:0;bottom:0;width:50%;border:none;border-left:1px solid var(--dsw-alias-border-l1);background:rgba(57,100,254,0.12);color:var(--dsw-alias-label-primary);cursor:pointer;border-radius:0 12px 12px 0;display:flex;align-items:center;justify-content:center;font-size:11px;z-index:1;padding:0'
+            btn.addEventListener('click', (e) => { e.stopPropagation(); e.preventDefault(); setDetailsPos(null) })
+            t.appendChild(btn)
+          }
+          ensure()
+          let obs = null
+          try {
+            obs = new MutationObserver(ensure)
+            obs.observe(document.body, { childList: true, subtree: true })
+          } catch (e) { /* 忽略 */ }
+          window.addEventListener('resize', ensure)
+          return () => {
+            if (obs) { try { obs.disconnect() } catch (e) { /* 忽略 */ } }
+            window.removeEventListener('resize', ensure)
+            cleanup()
+          }
+        }, [detailsDragEnabled])
+
+        // 合并的 token 覆盖（背景 + 文字颜色）——单一 source 单层覆盖，避免多层交互导致互斥
+        // 依赖精细化：透明度/颜色值变化不重跑 overrideTokens，只在 模式/包含侧边栏/图片对象/文字颜色 变化时重跑
+        // ⚠️ v0.9.15 修复：token 构建抽成 buildThemeTokens()（模块级纯函数），refreshConvTokens（拖动抑制期直更）与
+        //   本 useEffect 共用同一完整集合——否则 overrideTokens 会替换整个 namespace，把主界面 bg-base/sidebar-fill
+        //   顶掉（"调 V 按钮时主界面背景失效，调好又恢复"用户反馈）
+        React.useEffect(() => {
+          const theme = ctx.get('theme')
+          if (!theme || typeof theme.overrideTokens !== 'function') return undefined
+          const tokens = buildThemeTokens()
+          let disposer
+          if (Object.keys(tokens).length) {
+            try { disposer = theme.overrideTokens('theme-customizer', tokens) } catch (e) { /* 忽略 */ }
+          }
+          return () => { if (typeof disposer === 'function') disposer() }
+        }, [areas.app.mode, areas.app.includeSidebar, areas.app.image, areas.sidebar.mode, areas.sidebar.image, colors, convBgs])
+
+        // 各模块 CSS 用缓存（依赖只含本模块状态；拖动中 manualCssRefresh 已直更 style，这里保证 React 状态一致）
+        // ⚠️ 防御：areas.float/details/cordis 可能 undefined（旧配置整体替换后缺键），依赖数组用兜底访问（v0.9.13 事故修复）
+        const flDep = areas.float || {}
+        const detDep = areas.details || {}
+        const corDep = areas.cordis || {}
+        const imgVars = React.useMemo(() => buildImgVars(), [areas.sidebar.mode, areas.sidebar.image, areas.composer.mode, areas.composer.image, newSession.mode, newSession.image, detDep.mode, detDep.image, flDep.mode, flDep.image, corDep.mode, corDep.image, sidebarInfo])
+        const appCss = React.useMemo(() => buildAppCss(), [areas.app, sidebarInfo, baseBg])
+        const composerCss = React.useMemo(() => buildComposerCss(), [areas.composer, composerFixedHeight, composerRows, baseBg])
+        const detailsCss = React.useMemo(() => buildDetailsCss(), [areas.details, baseBg, detailsPos])
+        const sidebarCss = React.useMemo(() => buildSidebarCss(), [areas.sidebar, sidebarInfo])
+        const brandCss = React.useMemo(() => buildBrandCss(), [brand, brandHarness])
+        const bordersCss = React.useMemo(() => buildBordersCss(), [borders])
+        const newSessionCss = React.useMemo(() => buildNewSessionCss(), [newSession])
+        const liftCss = React.useMemo(() => buildLiftCss(), [areas.sidebar.mode, areas.sidebar.image, sidebarInfo])
+        const cordisCss = React.useMemo(() => buildCordisCss(), [areas.cordis, baseBg])
+        const floatCss = React.useMemo(() => buildFloatCss(), [floatVisible, areas.float])
+        const convCss = React.useMemo(() => buildConvCss(), [convBgs.scrollbar, convBgs.chatScroll, convBgs.todoCollapsed, convBgs.todoExpanded, convBgs.addBtn, convBgs.cmdMenu, convBgs.addBtnOpacity, convBgs.cmdMenuOpacity, convBgs.toBottom, convBgs.sliderColor, convBgs.sliderOpacity, convBgs.sliderTrackColor, convBgs.sliderTrackOpacity, convBgs.scrollColor, convBgs.scrollOpacity])
+
+        // 各模块独立 <style> 标签：规则相对顺序与原单标签一致（img → app → composer → details → sidebar → ns → lift → cordis → float → conv）
+        return React.createElement(React.Fragment, null,
+          imgVars ? React.createElement('style', { 'data-thmcz-img': true }, imgVars) : null,
+          React.createElement('style', { 'data-thmcz-app': true }, appCss),
+          React.createElement('style', { 'data-thmcz-composer': true }, composerCss),
+          React.createElement('style', { 'data-thmcz-details': true }, detailsCss),
+          React.createElement('style', { 'data-thmcz-sidebar': true }, sidebarCss),
+          React.createElement('style', { 'data-thmcz-brand': true }, brandCss),
+          bordersCss ? React.createElement('style', { 'data-thmcz-borders': true }, bordersCss) : null,
+          React.createElement('style', { 'data-thmcz-ns': true }, newSessionCss),
+          React.createElement('style', { 'data-thmcz-lift': true }, liftCss),
+          React.createElement('style', { 'data-thmcz-cordis': true }, cordisCss),
+          React.createElement('style', { 'data-thmcz-float': true }, floatCss),
+          convCss ? React.createElement('style', { 'data-thmcz-conv': true }, convCss) : null,
+        )
+      }
+
+      // ════════ 08_ui_common.js ════════
+      // ┌─ 片段 08_ui_common ─────────────────────────────
+      // │ 职责：通用小组件与工具（裁剪/滑条/两步确认/底色行/选图裁剪 hook/裁剪比例）
+      // │ 定义：CropPanel / OpacitySlider / ConfirmButton / BottomRow / useImageCrop / getCropRatio
+      function CropPanel({ image, ratio, onConfirm, onCancel, maxDim }) {
+        const imgRef = React.useRef(null)
+        const [orig, setOrig] = React.useState(null)
+        const [disp, setDisp] = React.useState(null)
+        const [rect, setRect] = React.useState(null)
+        const r = ratio || 16 / 9
+        // 选区随 ratio 变化实时重算（如固定高度改行数 → 卡片比例变 → 选区按新比例；保持宽度、居中，超限则降宽）
+        // 仅当 ratio 真正变化时重算（拖拽导致的 rect 变化直接跳过）
+        const prevRatioRef = React.useRef(r)
+        React.useLayoutEffect(() => {
+          const prev = prevRatioRef.current
+          prevRatioRef.current = r
+          if (prev === r || !orig || !rect) return
+          let w = rect.w
+          let h = w / r
+          if (h > orig.h) { h = orig.h; w = h * r }
+          setRect({ x: (orig.w - w) / 2, y: (orig.h - h) / 2, w, h })
+        }, [r, orig, rect])
+        const onImgLoad = (e) => {
+          const el = e.target
+          const iw = el.naturalWidth, ih = el.naturalHeight
+          setOrig({ w: iw, h: ih })
+          setDisp({ w: el.clientWidth, h: el.clientHeight })
+          let w = iw, h = w / r
+          if (h > ih) { h = ih; w = h * r }
+          setRect({ x: (iw - w) / 2, y: (ih - h) / 2, w, h })
+        }
+        const computeRect = (r0, dx, mode, maxW, maxH, r2) => {
+          let w = r0.w, x = r0.x
+          if (mode === 'se' || mode === 'ne') { w = r0.w + dx; x = r0.x }
+          else if (mode === 'sw' || mode === 'nw') { w = r0.w - dx; x = r0.x + dx }
+          else { x = r0.x + dx }
+          let h = w / r2
+          const MIN = 48
+          if (h > maxH) { h = maxH; w = h * r2 }
+          if (w > maxW) { w = maxW; h = w / r2 }
+          if (w < MIN) { w = MIN; h = w / r2 }
+          if (x < 0) x = 0
+          if (x + w > maxW) x = maxW - w
+          let y = r0.y
+          if (mode === 'nw' || mode === 'ne') y = r0.y + (r0.h - h)
+          if (y < 0) y = 0
+          if (y + h > maxH) y = maxH - h
+          return { x, y, w, h }
+        }
+        const startDrag = (e, mode) => {
+          if (!orig || !rect) return
+          e.preventDefault()
+          e.stopPropagation()
+          const scale = disp.w / orig.w
+          const sx = e.clientX, sy = e.clientY
+          const r0 = { ...rect }
+          const move = (ev) => {
+            const dx = (ev.clientX - sx) / scale
+            const dy = (ev.clientY - sy) / scale
+            const next = computeRect(r0, dx, mode, orig.w, orig.h, r)
+            if (mode === 'move') next.y = Math.max(0, Math.min(orig.h - next.h, r0.y + dy))
+            setRect(next)
+          }
+          const up = () => {
+            window.removeEventListener('pointermove', move)
+            window.removeEventListener('pointerup', up)
+          }
+          window.addEventListener('pointermove', move)
+          window.addEventListener('pointerup', up)
+        }
+        const confirm = () => {
+          if (!orig || !rect || !imgRef.current) return
+          try {
+            // maxDim 限制输出最长边（背景大图 downscale：小 dataURI 存得下 localStorage、CSS 变量替换不超限、重绘快）
+            let w = Math.max(1, Math.round(rect.w))
+            let h = Math.max(1, Math.round(rect.h))
+            if (typeof maxDim === 'number' && maxDim > 0 && Math.max(w, h) > maxDim) {
+              const scale = maxDim / Math.max(w, h)
+              w = Math.max(1, Math.round(w * scale))
+              h = Math.max(1, Math.round(h * scale))
+            }
+            const canvas = document.createElement('canvas')
+            canvas.width = w
+            canvas.height = h
+            const c2d = canvas.getContext('2d')
+            c2d.drawImage(imgRef.current, rect.x, rect.y, rect.w, rect.h, 0, 0, canvas.width, canvas.height)
+            // WebP 0.92（支持透明 + 体积小，背景图 dataURI 更小）；老浏览器回退 PNG
+            let out
+            try { out = canvas.toDataURL('image/webp', 0.92) } catch (e) { out = canvas.toDataURL('image/png') }
+            onConfirm({ dataURI: out, fileName: '裁剪背景.webp', fit: 'cover' })
+          } catch (err) {
+            onConfirm({ dataURI: image, fileName: '原图背景.png', fit: 'cover' })
+          }
+        }
+        if (!image) return null
+        const H = 18
+        const hd = (mode, hx, vy) => ({
+          mode,
+          left: (rect ? (rect.x / orig.w) * disp.w + (rect.w / orig.w) * disp.w * hx : 0) - H / 2,
+          top: (rect ? (rect.y / orig.h) * disp.h + (rect.h / orig.h) * disp.h * vy : 0) - H / 2,
+        })
+        const handles = [hd('nw', 0, 0), hd('ne', 1, 0), hd('sw', 0, 1), hd('se', 1, 1)]
+        return React.createElement('div', { style: { marginBottom: '12px' } },
+          React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)', marginBottom: '6px' } },
+            '选区宽高比 = ' + r.toFixed(2) + '：拖框内移动，拖四角调整大小。'),
+          React.createElement('div', { style: { position: 'relative', display: 'inline-block', maxWidth: '100%' } },
+            React.createElement('img', { ref: imgRef, src: image, onLoad: onImgLoad, draggable: false, style: { display: 'block', maxWidth: '100%', maxHeight: '300px', objectFit: 'contain', userSelect: 'none' } }),
+            orig && disp && rect
+              ? React.createElement(React.Fragment, null,
+                  React.createElement('div', { style: { position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', borderRadius: '4px' } },
+                    React.createElement('div', { style: { position: 'absolute', left: (rect.x / orig.w) * disp.w, top: (rect.y / orig.h) * disp.h, width: (rect.w / orig.w) * disp.w, height: (rect.h / orig.h) * disp.h, border: '2px solid #4f8cff', boxSizing: 'border-box', boxShadow: '0 0 0 9999px rgba(0,0,0,0.45)' } })),
+                  React.createElement('div', { onPointerDown: (e) => startDrag(e, 'move'), style: { position: 'absolute', left: (rect.x / orig.w) * disp.w, top: (rect.y / orig.h) * disp.h, width: (rect.w / orig.w) * disp.w, height: (rect.h / orig.h) * disp.h, cursor: 'move', border: '2px solid #4f8cff', boxSizing: 'border-box' } }),
+                  handles.map((h2) => React.createElement('div', { key: h2.mode, onPointerDown: (e) => startDrag(e, h2.mode), style: { position: 'absolute', width: H, height: H, borderRadius: '4px', background: '#4f8cff', border: '2px solid #fff', boxSizing: 'border-box', cursor: h2.mode === 'se' || h2.mode === 'nw' ? 'nwse-resize' : 'nesw-resize', left: h2.left, top: h2.top, zIndex: 5 } })),
+                )
+              : null,
+          ),
+          React.createElement('div', { style: { display: 'flex', gap: '8px', marginTop: '8px' } },
+            React.createElement('button', { type: 'button', onClick: confirm, style: { padding: '6px 18px', borderRadius: '6px', cursor: 'pointer', border: 'none', background: 'var(--dsw-alias-brand-primary)', color: '#fff', fontWeight: 600, fontSize: '13px', position: 'relative', zIndex: 10 } }, '✓ 应用选区'),
+            React.createElement('button', { type: 'button', onClick: onCancel, style: { padding: '6px 18px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', background: 'none', fontSize: '13px', position: 'relative', zIndex: 10 } }, '✕ 取消'),
+          ),
+        )
+      }
+
+      // 拖动型控件（透明度滑块/颜色选择器）的保存抑制：拖动开始 suppressSave(owner)（期间 saveNow 跳过写 localStorage），
+      // pointerup/失焦 commitSave(owner) 提交一次。owner 由各控件组件自持（useRef(++dragOwnerSeq)），
+      // ⚠️ v0.9.14：owner 唯一 → blur/pointerup 只提交本控件开的窗口（拖完 A 直接拖 B 不互相干扰）
+      let dragOwnerSeq = 0
+
+      // 统一恢复按钮样式三件套（v0.9.18）：未确认态 = 黑字红框；确认态 = 红底白字；取消 = 灰框。
+      // 尺寸三档：sm = 行内小按钮（4px 10px）/ md = 板块底部（5px 14px）/ lg = 全局恢复默认大按钮（8px 18px）。
+      // ConfirmButton / TripleConfirmButton 的 size prop 引用（2026-08-22 梳理去重：此前 10+ 处整段复制粘贴）
+      const RESET_BTN_SIZES = {
+        sm: {
+          style: { padding: '4px 10px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-state-error-primary)', background: 'none', color: 'var(--dsw-alias-label-primary)', fontSize: '12px' },
+          confirmStyle: { padding: '4px 10px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-state-error-primary)', background: 'var(--dsw-alias-state-error-primary)', color: '#fff', fontSize: '12px' },
+          cancelStyle: { padding: '4px 10px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', background: 'none', fontSize: '12px' },
+        },
+        md: {
+          style: { padding: '5px 14px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-state-error-primary)', background: 'none', color: 'var(--dsw-alias-label-primary)', fontSize: '12px' },
+          confirmStyle: { padding: '5px 14px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-state-error-primary)', background: 'var(--dsw-alias-state-error-primary)', color: '#fff', fontSize: '12px' },
+          cancelStyle: { padding: '5px 14px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', background: 'none', fontSize: '12px' },
+        },
+        lg: {
+          style: { padding: '8px 18px', borderRadius: '8px', cursor: 'pointer', border: '1px solid var(--dsw-alias-state-error-primary)', background: 'none', color: 'var(--dsw-alias-label-primary)', fontSize: '13px' },
+          confirmStyle: { padding: '8px 18px', borderRadius: '8px', cursor: 'pointer', border: '1px solid var(--dsw-alias-state-error-primary)', background: 'var(--dsw-alias-state-error-primary)', color: '#fff', fontSize: '13px' },
+          cancelStyle: { padding: '8px 18px', borderRadius: '8px', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', background: 'none', fontSize: '13px' },
+        },
+      }
+
+      // 自定义颜色选择器（性能优化 2026-08-21 重构）：替代原生 input type=color（Chrome 系统对话框拖动卡）。
+      // 色盘形式（直观）：SV 二维色板（横轴饱和度 × 纵轴明度，左上白/右上纯色相/下缘黑）+ 色相条（0-359，到顶不跳 0）+ hex 输入。
+      // 拖动走 setXxx 抑制路径（manualCssRefresh，零全局 React 渲染）；HSV 本地保留（白色会丢 H/S，拖动中不能反推覆盖）。
+      // 色块点击展开/收起；色盘为 absolute 浮层（不挤动同行元素，如恢复默认按钮位置不变）；点击色盘外关闭。
+      function ColorField({ value, onChange, swatchStyle }) {
+        const [open, setOpen] = React.useState(false)
+        const [hexDraft, setHexDraft] = React.useState(null)
+        const [preview, setPreview] = React.useState(null)
+        // 本地 HSV：拖动中保留（亮度拖到 100 变白时 H/S 不归零）；外部 value 变化（非拖动，如应用预设）时同步
+        const [hsv, setHsv] = React.useState(() => hexToHsv(value || '#ffffff'))
+        const draggingRef = React.useRef(false)
+        const rootRef = React.useRef(null)
+        const boardRef = React.useRef(null)
+        const hueRef = React.useRef(null)
+        // 本控件唯一 owner（v0.9.14）：beginDrag/endDrag 共用，避免与其他滑条的抑制窗口互扰
+        const ownerRef = React.useRef(++dragOwnerSeq)
+        React.useEffect(() => {
+          if (draggingRef.current) return
+          setHsv(hexToHsv(value || '#ffffff'))
+        }, [value])
+        // 点击色盘外关闭（capture：色盘内点击/拖动不触发）
+        React.useEffect(() => {
+          if (!open) return undefined
+          const onDoc = (e) => {
+            if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false)
+          }
+          document.addEventListener('click', onDoc, true)
+          return () => document.removeEventListener('click', onDoc, true)
+        }, [open])
+        const h = hsv[0], s = hsv[1], vv = hsv[2]
+        const v = preview || value || '#ffffff'
+        const shownHex = hexDraft != null ? hexDraft : v
+        const beginDrag = () => { draggingRef.current = true; suppressSave(ownerRef.current) }
+        const endDrag = () => { draggingRef.current = false; setPreview(null); commitSave(ownerRef.current) }
+        const emit = (hx, s2, v2) => {
+          const hex = hsvToHex(hx, s2, v2)
+          setHsv([hx, s2, v2])
+          setHexDraft(null)
+          setPreview(hex)
+          onChange(hex)
+        }
+        // SV 色板：横轴饱和度（左 0 → 右 100），纵轴明度（下 0 → 上 100）
+        const onBoardPointer = (e) => {
+          const el = boardRef.current
+          if (!el) return
+          try { el.setPointerCapture(e.pointerId) } catch (err) { /* 忽略 */ }
+          const r = el.getBoundingClientRect()
+          const s2 = Math.max(0, Math.min(100, ((e.clientX - r.left) / r.width) * 100))
+          const v2 = Math.max(0, Math.min(100, (1 - (e.clientY - r.top) / r.height) * 100))
+          emit(h, s2, v2)
+        }
+        // 色相条（竖排，与色板等高 180px ≈ 2°/px；0-359，到顶不跳 0）
+        const onHuePointer = (e) => {
+          const el = hueRef.current
+          if (!el) return
+          try { el.setPointerCapture(e.pointerId) } catch (err) { /* 忽略 */ }
+          const r = el.getBoundingClientRect()
+          const h2 = Math.max(0, Math.min(359, ((e.clientY - r.top) / r.height) * 360))
+          emit(h2, s, vv)
+        }
+        const commitHex = () => {
+          const raw = (hexDraft != null ? hexDraft : v).trim()
+          setHexDraft(null)
+          const m = raw.match(/^#?([0-9a-f]{6})$/i)
+          if (m) onChange('#' + m[1].toLowerCase())
+        }
+        return React.createElement('div', { ref: rootRef, style: { display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap', position: 'relative' } },
+          React.createElement('button', { type: 'button', onClick: () => setOpen(!open), title: open ? '收起颜色调整' : '展开颜色调整', // 色块加黑框（v0.9.18）：默认白/浅色块在白色界面上边界看不清 → 黑框分隔（swatchStyle 可覆盖）
+            style: { width: '26px', height: '24px', borderRadius: '6px', border: '1px solid #000', background: v, cursor: 'pointer', padding: 0, flex: 'none', ...(swatchStyle || {}) } }),
+          React.createElement('input', { value: shownHex, onChange: (e) => setHexDraft(e.target.value), onBlur: commitHex, onKeyDown: (e) => { if (e.key === 'Enter') { commitHex(); e.currentTarget.blur() } }, style: { width: '76px', padding: '3px 6px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-1)', fontSize: '12px', fontVariantNumeric: 'tabular-nums', color: 'var(--dsw-alias-label-primary)' } }),
+          // absolute 浮层：不占 flex 布局流 → 同行恢复默认等按钮位置不随展开变动；点外部（document click）关闭
+          // 尺寸：180×180 正方形 SV 色板 + 右侧竖色相条（等高）→ 面板约 220×200 接近正方形、两维精度均衡（主流 picker 规格）
+          open ? React.createElement('div', { style: { position: 'absolute', left: '0', top: 'calc(100% + 6px)', zIndex: 60, width: '220px', padding: '8px', border: '1px solid var(--dsw-alias-border-l1)', borderRadius: '8px', background: 'var(--dsw-alias-bg-layer-1)', boxShadow: '0 4px 16px rgba(0,0,0,0.25)' } },
+            React.createElement('div', { style: { display: 'flex', gap: '8px' } },
+              // SV 色板（正方形：S/V 两维精度均衡）
+              React.createElement('div', { ref: boardRef, onPointerDown: (e) => { beginDrag(); onBoardPointer(e) }, onPointerMove: (e) => { if (e.buttons === 1) onBoardPointer(e) }, onPointerUp: endDrag, onPointerCancel: endDrag, style: { position: 'relative', flex: '1 1 auto', height: '180px', borderRadius: '8px', cursor: 'crosshair', touchAction: 'none', background: 'linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(' + h + ',100%,50%))' } },
+                React.createElement('div', { style: { position: 'absolute', left: 'calc(' + s + '% - 7px)', top: 'calc(' + (100 - vv) + '% - 7px)', width: '14px', height: '14px', borderRadius: '50%', border: '2px solid #fff', boxShadow: '0 0 2px rgba(0,0,0,0.6)', boxSizing: 'border-box', pointerEvents: 'none' } }),
+              ),
+              // 色相条（竖排，与色板等高）
+              React.createElement('div', { ref: hueRef, onPointerDown: (e) => { beginDrag(); onHuePointer(e) }, onPointerMove: (e) => { if (e.buttons === 1) onHuePointer(e) }, onPointerUp: endDrag, onPointerCancel: endDrag, style: { position: 'relative', flex: 'none', width: '14px', height: '180px', borderRadius: '7px', cursor: 'pointer', touchAction: 'none', background: 'linear-gradient(to bottom, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)' } },
+                React.createElement('div', { style: { position: 'absolute', left: '-2px', right: '-2px', top: 'calc(' + (h / 360 * 100) + '% - 2px)', height: '4px', borderRadius: '2px', background: '#fff', border: '1px solid rgba(0,0,0,0.5)', boxSizing: 'border-box', pointerEvents: 'none' } }),
+              ),
+            ),
+          ) : null,
+        )
+      }
+
+      function OpacitySlider({ value, onChange, label }) {
+        // 拖动中本地预览（性能优化 2026-08-21）：拖动期 onChange 走 setXxx 抑制路径（manualCssRefresh，无全局 React 渲染），
+        // 数值文本用本地预览跟随；松开后清预览 + commitSave（saveNow + notify 同步全局）
+        // label 可选（默认"透明度"；BottomRow 传"底色透明度"等）——2026-08-22 梳理去重：BottomRow 内联滑条改为复用本组件
+        const [preview, setPreview] = React.useState(null)
+        const v = preview != null ? preview : (value == null ? 1 : value)
+        // 本控件唯一 owner（v0.9.14）：endDrag（pointerup/blur 共用）只提交自己开的窗口
+        const ownerRef = React.useRef(++dragOwnerSeq)
+        const endDrag = () => { setPreview(null); commitSave(ownerRef.current) }
+        return React.createElement('div', { style: { fontSize: '12px', marginTop: '6px', display: 'flex', alignItems: 'center', gap: '8px' } },
+          React.createElement('span', null, label || '透明度:'),
+          React.createElement('input', { 'data-thmcz-range': true, style: { '--tcz-range-val': Math.round(v * 100) + '%' }, type: 'range', min: '0', max: '1', step: '0.05', value: v, onChange: (e) => { const nv = parseFloat(e.target.value); setPreview(nv); onChange(nv) }, onPointerDown: () => suppressSave(ownerRef.current), onPointerUp: endDrag, onBlur: endDrag }),
+          React.createElement('span', { style: { minWidth: '38px', fontVariantNumeric: 'tabular-nums' } }, v.toFixed(2)),
+        )
+      }
+
+      // 两步确认按钮（通用）：第一次点击进入确认态，再点执行；resetKey 变化（外部改动）自动解除确认态。
+      // size：sm/md/lg（RESET_BTN_SIZES 统一恢复按钮样式，v0.9.18）；style/confirmStyle/cancelStyle 显式传入时覆盖 size 默认
+      function ConfirmButton({ label, confirmLabel, onConfirm, style, confirmStyle, cancelStyle, resetKey, size }) {
+        const S = RESET_BTN_SIZES[size || 'sm']
+        const [armed, setArmed] = React.useState(false)
+        const prevKeyRef = React.useRef(resetKey)
+        if (prevKeyRef.current !== resetKey) {
+          prevKeyRef.current = resetKey
+          if (armed) setArmed(false)
+        }
+        return React.createElement(React.Fragment, null,
+          React.createElement('button', { type: 'button', onClick: () => { if (!armed) { setArmed(true); return } setArmed(false); onConfirm() }, style: armed ? (confirmStyle || S.confirmStyle) : (style || S.style) }, armed ? confirmLabel : label),
+          armed ? React.createElement('button', { type: 'button', onClick: () => setArmed(false), style: cancelStyle || S.cancelStyle }, '取消') : null,
+        )
+      }
+
+      // 三级确认按钮（v0.9.16，全局恢复默认专用）：第一次 → confirmLabel1，第二次 → confirmLabel2，第三次 → 执行。
+      // 主按钮居中；确认态时取消按钮换行到下面（独立行）。
+      // resetKey 变化（外部改动）自动解除确认态回到初始；size 同 ConfirmButton（默认 lg）
+      function TripleConfirmButton({ label, confirmLabel1, confirmLabel2, onConfirm, style, confirmStyle, cancelStyle, resetKey, size }) {
+        const S = RESET_BTN_SIZES[size || 'lg']
+        const [stage, setStage] = React.useState(0)
+        const prevKeyRef = React.useRef(resetKey)
+        if (prevKeyRef.current !== resetKey) {
+          prevKeyRef.current = resetKey
+          if (stage !== 0) setStage(0)
+        }
+        const curStyle = stage === 0 ? (style || S.style) : (confirmStyle || S.confirmStyle)
+        const curLabel = stage === 0 ? label : (stage === 1 ? confirmLabel1 : confirmLabel2)
+        return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' } },
+          React.createElement('button', { type: 'button', onClick: () => { if (stage < 2) { setStage(stage + 1); return } setStage(0); onConfirm() }, style: curStyle }, curLabel),
+          stage > 0
+            ? React.createElement('button', { type: 'button', onClick: () => setStage(0), style: cancelStyle || S.cancelStyle }, '取消')
+            : null,
+        )
+      }
+
+      // 底色编辑器行（侧边栏 / 新会话 / 主界面共用）：
+      // 行1 开关+颜色+恢复默认（改动过才显示，noSwitch=true 时常驻无开关）；行2 底色透明度（hideOpacity=true 时隐藏）
+      function BottomRow({ value, onChange, style, title, hideOpacity, noSwitch }) {
+        const enabled = noSwitch ? true : !!value.bottomEnabled
+        const resetShown = hideOpacity
+          ? (value.bottomColor && value.bottomColor !== '#ffffff')
+          : (value.bottomColor && value.bottomColor !== '#ffffff') || (value.bottomOpacity != null && value.bottomOpacity !== 0)
+        return React.createElement('div', null,
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', ...style } },
+            noSwitch
+              ? React.createElement('span', { style: { fontSize: '13px' } }, title || '底色')
+              : React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' } },
+                  React.createElement('input', { type: 'checkbox', style: { cursor: 'pointer' }, checked: !!value.bottomEnabled, onChange: (e) => onChange({ bottomEnabled: e.target.checked, ...(e.target.checked && !value.bottomColor ? { bottomColor: '#ffffff' } : {}) }) }),
+                  React.createElement('span', null, title || '底色'),
+                ),
+            enabled
+              ? React.createElement(React.Fragment, null,
+                  React.createElement(ColorField, { value: value.bottomColor || '#ffffff', onChange: (hex) => onChange({ bottomColor: hex }) }),
+                  resetShown
+                    ? React.createElement(ConfirmButton, {
+                        label: '恢复默认', confirmLabel: '确认恢复默认',
+                        onConfirm: () => onChange(hideOpacity ? { bottomColor: '#ffffff' } : { bottomColor: '#ffffff', bottomOpacity: 0 }),
+                        resetKey: (value.bottomColor || '') + '|' + (hideOpacity ? '' : (value.bottomOpacity == null ? '' : value.bottomOpacity)),
+                      })
+                    : null,
+                )
+              : null,
+          ),
+          enabled && !hideOpacity
+            ? React.createElement(OpacitySlider, { label: (title || '底色') + '透明度:', value: value.bottomOpacity == null ? 0 : value.bottomOpacity, onChange: (v) => onChange({ bottomOpacity: v }) })
+            : null,
+        )
+      }
+
+      // 选图 + 裁剪流程（AreaEditor / NewSessionEditor 共用）：选文件 → FileReader → 进入裁剪 stage。
+      // maxDim：大图读入后先降采样（dataURL >1.5MB 时），避免超大 dataURI 进内存/CSS/localStorage（见 downscaleDataUrl）
+      function useImageCrop(beforePick, maxDim) {
+        const [stage, setStage] = React.useState('none')
+        const [rawImage, setRawImage] = React.useState(null)
+        const fileRef = React.useRef(null)
+        const handleFile = (e) => {
+          const file = e.target.files && e.target.files[0]
+          if (!file) return
+          if (typeof beforePick === 'function') beforePick()
+          const reader = new FileReader()
+          reader.onload = () => {
+            const dataUrl = String(reader.result)
+            if (typeof maxDim === 'number' && maxDim > 0 && dataUrl.length > 1500000) {
+              // 大图：异步降采样到 maxDim 再进裁剪面板（Image.onload 事件回调，非定时器）
+              downscaleDataUrl(dataUrl, maxDim, (small) => { setRawImage(small); setStage('crop') })
+            } else {
+              setRawImage(dataUrl)
+              setStage('crop')
+            }
+          }
+          reader.readAsDataURL(file)
+          e.target.value = ''
+        }
+        const closeCrop = () => { setStage('none'); setRawImage(null) }
+        return { stage, rawImage, fileRef, handleFile, closeCrop }
+      }
+
+      // 裁剪宽高比：侧边栏按实测比例；主界面"不包含侧边栏"按剩余区域；输入区固定高度时按卡片实测，否则视口比例；
+      // 设置界面（details）按设置面板实际尺寸公式（VOzbGW_panel：width 800px/max-width 100vw-48，height min(800px,100vh-48)）——CSS 固定，公式精确无需读 DOM；
+      // 浮窗面板（float）按浮窗默认尺寸 560×640（0.875）；
+      // Cordis（cordis）按面板 420px 宽 × max-height 60vh → 视口近似（0.42*vw / min(0.6*vh, 面板实际) 简化取 420/可显示高）
+      function getCropRatio(a) {
+        if (a.id === 'sidebar' && sidebarInfo) return sidebarInfo.ratio
+        if (a.id === 'float') return (floatPos.width || 560) / (floatPos.height || 640)
+        if (a.id === 'cordis') {
+          // v0.9.15：面板打开时用实测宽高比（cordisCardRatio，AreaCss useLayoutEffect+observer 维护）；
+          // 未打开（面板不在 DOM）时回退固定近似：宽 420 / 高 60vh
+          if (cordisCardRatio && cordisCardRatio > 0) return cordisCardRatio
+          const vh = typeof window !== 'undefined' ? window.innerHeight : 800
+          return 420 / Math.min(0.6 * vh, vh - 200)
+        }
+        if (a.id === 'details') {
+          const vw = typeof window !== 'undefined' ? window.innerWidth : 1280
+          const vh = typeof window !== 'undefined' ? window.innerHeight : 800
+          const w = Math.min(800, vw - 48)
+          const h = Math.min(800, vh - 48)
+          if (w > 0 && h > 0) return w / h
+          return 1
+        }
+        if (a.id === 'composer') {
+          // 输入区固定高度：用布局后实测的卡片宽高比（composerCardRatio，AreaCss useLayoutEffect 维护）；
+          // 否则视口近似（输入框高度动态增减时）
+          if (composerFixedHeight && composerCardRatio) return composerCardRatio
+          if (typeof window !== 'undefined' && window.innerWidth > 0 && window.innerHeight > 0) return window.innerWidth / window.innerHeight
+          return 16 / 9
+        }
+        if (a.id === 'app' && areas.app.includeSidebar === false && sidebarInfo && sidebarInfo.width) {
+          return (window.innerWidth - sidebarInfo.width) / window.innerHeight
+        }
+        if (typeof window !== 'undefined' && window.innerWidth > 0 && window.innerHeight > 0) {
+          return window.innerWidth / window.innerHeight
+        }
+        return 16 / 9
+      }
+
+      // ════════ 09_background.js ════════
+      // ┌─ 片段 09_background ────────────────────────────
+      // │ 职责：界面板块全套（主界面/侧边栏编辑卡片 + 新会话按钮板块 + 「界面」模块外壳）
+      // │ 定义：AreaEditor / NewSessionEditor / BackgroundModule
+      // │ 测试：改区域编辑/新会话/界面模块外壳（Cordis/浮窗/其他卡片）时来此片段
+      // memo 化（性能优化 2026-08-21）：AreaEditor 不订阅 store，仅依赖 props（area/value/onChange/ratio/children），
+      // 父级 BackgroundModule 重渲染时 props 引用稳定（见 BackgroundModule 的 useMemo/useCallback）→ 跳过重渲染；
+      // 对应区域 setArea 后 value 引用变化 → 正常重渲染
+      const AreaEditor = React.memo(function AreaEditor({ area, value, onChange, ratio, children }) {
+        const migratedNoneRef = React.useRef(false)
+        // 两步确认：移除图片（第一次点击进入确认态，再点才执行）
+        const [confirmRemove, setConfirmRemove] = React.useState(false)
+        // 侧边栏"无（官方原样）"选项已删除：旧数据残留 none → 一次性迁移为"无"（transparent）
+        React.useEffect(() => {
+          if (!migratedNoneRef.current && area.id === 'sidebar' && value.mode === 'none') {
+            migratedNoneRef.current = true
+            onChange({ ...value, mode: 'transparent' })
+          }
+        }, [])
+        // 选图前强制重新检测侧边栏比例（保证选区比例跟手）；移除图片确认态同步解除
+        // maxDim：composer 1280（小卡片），主界面/侧边栏 2560（2K 清晰，防超大 dataURI 撑爆 CSS 变量/localStorage）
+        const crop = useImageCrop(() => {
+          if (area.id === 'sidebar') {
+            const info = detectSidebar()
+            if (info) setSidebarInfo(info)
+          }
+          setConfirmRemove(false)
+        }, area.id === 'composer' ? 1280 : 2560)
+        const setMode = (mode) => {
+          const next = { ...value, mode }
+          if (mode !== 'image') next.image = null
+          setConfirmRemove(false)
+          onChange(next)
+        }
+        const modes = [
+          // 侧边栏的"无（官方原样）"已废弃删除；透明改名"无"
+          ...(area.id !== 'sidebar' && area.modes.includes('none') ? [{ id: 'none', label: '无' }] : []),
+          ...(area.modes.includes('transparent') ? [{ id: 'transparent', label: area.id === 'sidebar' ? '无' : '透明（透出主体背景）' }] : []),
+          ...(area.modes.includes('color') ? [{ id: 'color', label: '纯色' }] : []),
+          ...(area.modes.includes('image') ? [{ id: 'image', label: '图片' }] : []),
+        ]
+        // 侧边栏已无 none 选项：旧数据若为 none，显示为"无"（等效透明）
+        const currentMode = modes.some((m) => m.id === value.mode) ? value.mode : (modes[0] ? modes[0].id : 'none')
+        return React.createElement('div', { style: { padding: '10px', border: '1px solid var(--dsw-alias-border-l1)', borderRadius: '8px', marginBottom: '10px' } },
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap', marginBottom: '6px' } },
+            React.createElement('span', { style: { fontSize: '13px', fontWeight: 600, minWidth: '80px' } }, area.label),
+            // 只有一个模式（如对话区/详情栏仅"无"）时下拉无意义，不渲染
+            modes.length > 1
+              ? React.createElement('select', { value: currentMode, onChange: (e) => setMode(e.target.value), style: { padding: '4px 8px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-1)', fontSize: '12px' } },
+                  modes.map((m) => React.createElement('option', { key: m.id, value: m.id }, m.label)))
+              : null,
+          ),
+          area.id === 'app'
+            ? React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '4px', marginBottom: '4px', flexWrap: 'wrap' } },
+                React.createElement('span', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)', flex: 'none' } }, '显示区域：'),
+                React.createElement('button', { type: 'button', onClick: () => onChange({ ...value, includeSidebar: true }), style: { padding: '4px 10px', borderRadius: '6px', cursor: 'pointer', border: '1px solid ' + (value.includeSidebar === false ? 'var(--dsw-alias-border-l2)' : 'var(--dsw-alias-brand-primary)'), background: value.includeSidebar === false ? 'transparent' : 'var(--dsw-alias-brand-primary)', color: value.includeSidebar === false ? 'var(--dsw-alias-label-primary)' : '#fff', fontSize: '12px' } }, '包含侧边栏'),
+                React.createElement('button', { type: 'button', onClick: () => onChange({ ...value, includeSidebar: false }), style: { padding: '4px 10px', borderRadius: '6px', cursor: 'pointer', border: '1px solid ' + (value.includeSidebar === false ? 'var(--dsw-alias-brand-primary)' : 'var(--dsw-alias-border-l2)'), background: value.includeSidebar === false ? 'var(--dsw-alias-brand-primary)' : 'transparent', color: value.includeSidebar === false ? '#fff' : 'var(--dsw-alias-label-primary)', fontSize: '12px' } }, '不包含侧边栏'),
+              )
+            : null,
+          value.mode === 'color'
+            ? React.createElement('div', null,
+                React.createElement('div', { style: { fontSize: '12px', marginTop: '4px', display: 'flex', alignItems: 'center', gap: '8px' } },
+                  React.createElement('span', null, '颜色:'),
+                  React.createElement(ColorField, { value: value.color, onChange: (hex) => onChange({ ...value, color: hex }) }),
+                  React.createElement('span', null, value.color),
+                ),
+                React.createElement(OpacitySlider, { value: value.opacity, onChange: (op) => onChange({ ...value, opacity: op }) }),
+              )
+            : null,
+          value.mode === 'image'
+            ? React.createElement('div', null,
+                React.createElement('input', { ref: crop.fileRef, type: 'file', accept: 'image/png,image/jpeg,image/webp,image/gif,image/svg+xml', style: { display: 'none' }, onChange: crop.handleFile }),
+                React.createElement('div', { style: { marginTop: '4px', display: 'flex', alignItems: 'center', gap: '8px' } },
+                  React.createElement('button', { type: 'button', onClick: () => crop.fileRef.current && crop.fileRef.current.click(), style: { padding: '5px 12px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-1)', fontSize: '12px' } }, value.image ? '重新选择图片' : '选择图片'),
+                  value.image && React.createElement('button', { type: 'button', onClick: () => { if (!confirmRemove) { setConfirmRemove(true); return } setConfirmRemove(false); onChange({ ...value, image: null }) }, style: { padding: '5px 12px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-state-error-primary)', background: confirmRemove ? 'var(--dsw-alias-state-error-primary)' : 'none', color: confirmRemove ? '#fff' : 'var(--dsw-alias-state-error-primary)', fontSize: '12px' } }, confirmRemove ? '确认移除图片' : '移除图片'),
+                  confirmRemove && React.createElement('button', { type: 'button', onClick: () => setConfirmRemove(false), style: { padding: '5px 12px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', background: 'none', fontSize: '12px' } }, '取消'),
+                ),
+                value.image && React.createElement(OpacitySlider, { value: value.opacity, onChange: (op) => onChange({ ...value, opacity: op }) }),
+                area.id === 'composer'
+                  ? React.createElement('div', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-caption)', marginTop: '4px' } }, '注：开启固定高度时，选区按输入框实测宽高比；高度动态增减时按视口近似，与实际宽高比可能不完全一致。')
+                  : null,
+              )
+            : null,
+          crop.stage === 'crop' && crop.rawImage
+            ? React.createElement(CropPanel, { image: crop.rawImage, ratio: ratio, maxDim: area.id === 'composer' ? 1280 : 2560, onConfirm: (bg) => { crop.closeCrop(); onChange({ ...value, mode: 'image', image: bg }) }, onCancel: crop.closeCrop })
+            : null,
+          !area.supported
+            ? React.createElement('div', { style: { fontSize: '11px', color: 'var(--dsw-alias-state-warn-primary)', marginTop: '4px' } }, '该区块待支持（需要官方选择器）')
+            : null,
+          // 底色：主界面(app)/输入区/设置界面/浮窗面板/Cordis 卡片底部"底色"；
+          // 透明度显示（v0.9.14 用户定）：sidebar + details + float + composer + cordis 显示底色透明度；app 仅颜色（用户 v0.9.2 定主界面底色仅颜色）
+          area.id === 'app' || area.id === 'sidebar' || area.id === 'composer' || area.id === 'details' || area.id === 'float' || area.id === 'cordis'
+            ? React.createElement(BottomRow, { value: value, onChange: (next) => onChange({ ...value, ...next }), style: { marginTop: '4px', marginBottom: '4px' }, title: '底色', hideOpacity: area.id === 'app', noSwitch: area.id !== 'sidebar' })
+            : null,
+          children,
+        )
+      })
+
+      // DeepSeek Harness 标志子版块（v0.9.17）：渲染在「侧边栏」区块内、「新会话」之上（细分隔线 + 标题，同「滑条与滚动条」子版块样式）。
+      // 默认品牌蓝 #3964fe + 不透明；与正文解耦（常驻独立色，不跟随正文）；透明度数值大=透明（语义同全局）；
+      // 恢复默认：颜色回品牌蓝 + 透明度归零（改动过才显示，两步确认，同主界面底色「恢复默认」模式）
+      function BrandEditor() {
+        const { brand, brandHarness } = useStore(['main'])
+        const bColor = brand.color || '#3964fe'
+        const changed = bColor !== '#3964fe' || (brand.opacity != null && brand.opacity !== 0)
+        // Harness 部分单独颜色（v0.9.20）：null=跟随标志整体色；未设置时色块显示品牌蓝（跟随标志）
+        const bh = brandHarness || {}
+        const hChanged = !!(bh.color || (bh.opacity != null && bh.opacity > 0))
+        return React.createElement('div', { style: { marginTop: '8px', paddingTop: '10px', borderTop: '1px solid var(--dsw-alias-border-l1)' } },
+          React.createElement('div', { style: { fontSize: '13px', fontWeight: 600, marginBottom: '6px' } }, '标志（DeepSeek Harness）'),
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', fontSize: '12px', marginBottom: '6px' } },
+            React.createElement('span', { style: { width: '92px', flex: 'none', fontSize: '13px' } }, '标志颜色:'),
+            React.createElement(ColorField, { value: bColor, onChange: (hex) => setBrand({ color: hex }) }),
+            // 状态文本固定宽度（对齐恢复按钮），只显示"已自定义/默认"（色值已由 ColorField 显示）
+            React.createElement('span', { style: { width: '76px', flex: 'none', fontVariantNumeric: 'tabular-nums', color: 'var(--dsw-alias-label-secondary)', fontSize: '12px' } }, changed ? '已自定义' : '默认'),
+            changed ? React.createElement(ConfirmButton, {
+              label: '恢复默认', confirmLabel: '确认恢复默认',
+              onConfirm: () => setBrand({ color: '#3964fe', opacity: 0 }), resetKey: bColor + '|' + (brand.opacity == null ? '' : brand.opacity),
+            }) : null,
+          ),
+          React.createElement(OpacitySlider, { value: brand.opacity == null ? 0 : brand.opacity, onChange: (v) => setBrand({ opacity: v }) }),
+          // ── Harness 单独颜色（v0.9.20）──
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', fontSize: '12px', marginTop: '4px' } },
+            React.createElement('span', { style: { width: '92px', flex: 'none', fontSize: '13px' } }, 'Harness 颜色:'),
+            React.createElement(ColorField, { value: bh.color || '#3964fe', onChange: (hex) => setBrandHarness({ color: hex }) }),
+            React.createElement('span', { style: { width: '76px', flex: 'none', fontVariantNumeric: 'tabular-nums', color: 'var(--dsw-alias-label-secondary)', fontSize: '12px' } }, hChanged ? '已自定义' : '跟随标志'),
+            hChanged ? React.createElement(ConfirmButton, {
+              label: '恢复默认', confirmLabel: '确认恢复默认',
+              onConfirm: () => setBrandHarness({ color: null, opacity: 0 }), resetKey: (bh.color || '') + '|' + (bh.opacity == null ? '' : bh.opacity),
+            }) : null,
+          ),
+          React.createElement(OpacitySlider, { value: bh.opacity == null ? 0 : bh.opacity, onChange: (v) => setBrandHarness({ opacity: v }) }),
+        )
+      }
+
+      // memo 化（性能优化 2026-08-21）：自身订阅 store（newSession/sidebarInfo），store 变化时自行重渲染；
+      // memo 只防父级（AreaEditor）重渲染时无谓重复
+      const NewSessionEditor = React.memo(function NewSessionEditor() {
+        const { newSession, sidebarInfo } = useStore()
+        // 两步确认：移除图片
+        const [confirmRemoveNS, setConfirmRemoveNS] = React.useState(false)
+        // 按钮小，maxDim 1280 足够（大图读入先降采样，防超大 dataURI）
+        const crop = useImageCrop(() => setConfirmRemoveNS(false), 1280)
+        // 按钮选区比例：宽 ≈ 侧边栏宽 - 16px（容器 padding 6px×2 + 按钮 margin 2px×2），高 38px；折叠模式近方形 → 1:1
+        const btnRatio = sidebarInfo ? (sidebarInfo.width < 80 ? 1 : Math.max(0.5, (sidebarInfo.width - 16) / 38)) : 2
+        const ns = newSession
+        const change = (next) => { setConfirmRemoveNS(false); setNewSession({ ...ns, ...next }) }
+        // 作为「侧边栏」区块的一部分：无独立卡片边框，用顶部细分隔线与侧边栏内容分开
+        // 布局与主界面/侧边栏一致：「新会话」标题旁 = 样式下拉（无/纯色/图片）；
+        // 标题下方紧跟模式内容（颜色/透明度/图片选择），再往下才是显示文本/图标/底色
+        return React.createElement('div', { style: { marginTop: '8px', paddingTop: '10px', borderTop: '1px solid var(--dsw-alias-border-l1)' } },
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap', marginBottom: '6px' } },
+            React.createElement('span', { style: { fontSize: '13px', fontWeight: 600, minWidth: '80px' } }, '新会话'),
+            React.createElement('select', { value: ['none', 'color', 'image'].includes(ns.mode) ? ns.mode : 'none', onChange: (e) => change({ mode: e.target.value, ...(e.target.value !== 'image' ? { image: null } : {}) }), style: { padding: '4px 8px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-1)', fontSize: '12px' } },
+              React.createElement('option', { value: 'none' }, '无'),
+              React.createElement('option', { value: 'color' }, '纯色'),
+              React.createElement('option', { value: 'image' }, '图片'),
+            ),
+          ),
+          ns.mode === 'color'
+            ? React.createElement('div', null,
+                React.createElement('div', { style: { fontSize: '12px', marginTop: '4px', display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' } },
+                  React.createElement('span', null, '颜色:'),
+                  React.createElement(ColorField, { value: ns.color, onChange: (hex) => change({ color: hex }) }),
+                  React.createElement('span', null, ns.color),
+                  // 纯色恢复默认（v0.9.20）：颜色回默认白 + 透明度归零（改动过才显示，黑字红框统一样式）
+                  (ns.color !== '#ffffff' || (ns.opacity != null && ns.opacity !== 0))
+                    ? React.createElement(ConfirmButton, {
+                        label: '恢复默认', confirmLabel: '确认恢复默认',
+                        onConfirm: () => change({ color: '#ffffff', opacity: 0 }), resetKey: (ns.color || '') + '|' + (ns.opacity == null ? '' : ns.opacity),
+                      })
+                    : null,
+                ),
+                React.createElement(OpacitySlider, { value: ns.opacity, onChange: (op) => change({ opacity: op }) }),
+              )
+            : null,
+          ns.mode === 'image'
+            ? React.createElement('div', null,
+                React.createElement('input', { ref: crop.fileRef, type: 'file', accept: 'image/png,image/jpeg,image/webp,image/gif,image/svg+xml', style: { display: 'none' }, onChange: crop.handleFile }),
+                React.createElement('div', { style: { marginTop: '4px', display: 'flex', alignItems: 'center', gap: '8px' } },
+                  React.createElement('button', { type: 'button', onClick: () => crop.fileRef.current && crop.fileRef.current.click(), style: { padding: '5px 12px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-1)', fontSize: '12px' } }, ns.image ? '重新选择图片' : '选择图片'),
+                  ns.image && React.createElement('button', { type: 'button', onClick: () => { if (!confirmRemoveNS) { setConfirmRemoveNS(true); return } setConfirmRemoveNS(false); change({ image: null }) }, style: { padding: '5px 12px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-state-error-primary)', background: confirmRemoveNS ? 'var(--dsw-alias-state-error-primary)' : 'none', color: confirmRemoveNS ? '#fff' : 'var(--dsw-alias-state-error-primary)', fontSize: '12px' } }, confirmRemoveNS ? '确认移除图片' : '移除图片'),
+                  confirmRemoveNS && React.createElement('button', { type: 'button', onClick: () => setConfirmRemoveNS(false), style: { padding: '5px 12px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', background: 'none', fontSize: '12px' } }, '取消'),
+                ),
+                ns.image && React.createElement(OpacitySlider, { value: ns.opacity, onChange: (op) => change({ opacity: op }) }),
+                crop.stage === 'crop' && crop.rawImage
+                  ? React.createElement(CropPanel, { image: crop.rawImage, ratio: btnRatio, maxDim: 1280, onConfirm: (bg) => { crop.closeCrop(); change({ mode: 'image', image: bg }) }, onCancel: crop.closeCrop })
+                  : null,
+              )
+            : null,
+          // 开关仅勾选框本身触发（v0.9.20 用户定：不要整栏触发——label 点击会切换，改 div+span）
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', marginBottom: '6px' } },
+            React.createElement('input', { type: 'checkbox', style: { cursor: 'pointer' }, checked: !!ns.showIcon, onChange: (e) => change({ showIcon: e.target.checked }) }),
+            React.createElement('span', null, '显示图标'),
+          ),
+          // 图标颜色：默认(null)=跟随正文；单独设置后与正文解耦、独立覆盖。跟随"显示图标"开关显示，紧贴其下（用户定）
+          ...(ns.showIcon
+            ? [React.createElement('div', { key: 'nsIconColor', style: { fontSize: '12px', marginBottom: '6px', display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' } },
+                React.createElement('span', null, '图标颜色:'),
+                React.createElement(ColorField, { value: ns.iconColor || '#000000', onChange: (hex) => change({ iconColor: hex }) }),
+                React.createElement('span', { style: { fontVariantNumeric: 'tabular-nums' } }, ns.iconColor || '官方默认'),
+                ns.iconColor ? React.createElement(ConfirmButton, {
+                  label: '恢复官方默认', confirmLabel: '确认恢复',
+                  onConfirm: () => change({ iconColor: null }), resetKey: ns.iconColor,
+                }) : null,
+              )]
+            : []),
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', marginBottom: '6px' } },
+            React.createElement('input', { type: 'checkbox', style: { cursor: 'pointer' }, checked: !!ns.showText, onChange: (e) => change({ showText: e.target.checked }) }),
+            React.createElement('span', null, '显示文本'),
+          ),
+          // 文本颜色：默认(null)=跟随正文；单独设置后与正文解耦、独立覆盖。跟随"显示文本"开关显示
+          ...(ns.showText
+            ? [React.createElement('div', { key: 'nsTextColor', style: { fontSize: '12px', marginBottom: '6px', display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' } },
+                React.createElement('span', null, '文本颜色:'),
+                React.createElement(ColorField, { value: ns.textColor || '#000000', onChange: (hex) => change({ textColor: hex }) }),
+                React.createElement('span', { style: { fontVariantNumeric: 'tabular-nums' } }, ns.textColor || '官方默认'),
+                ns.textColor ? React.createElement(ConfirmButton, {
+                  label: '恢复官方默认', confirmLabel: '确认恢复',
+                  onConfirm: () => change({ textColor: null }), resetKey: ns.textColor,
+                }) : null,
+              )]
+            : []),
+          // 底色与样式无关：无论样式（无/纯色/图片）都显示、都生效（开底色 = 按钮有底色，关 = 透明透出侧边栏）
+          React.createElement(BottomRow, { value: ns, onChange: (next) => change(next), style: { marginBottom: '6px' } }),
+        )
+      })
+
+      // 「显示透明度说明」勾选（v0.9.13 起在浮窗面板卡片内，原「其他」板块已删）：
+      // 自身订阅 store（main 通道），childModules useMemo 闭包不捕获旧值
+      function OpacityHintToggle() {
+        const { showOpacityHint } = useStore(['main'])
+        // 开关仅勾选框触发（v0.9.20）
+        return React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', marginTop: '6px' } },
+          React.createElement('input', { type: 'checkbox', style: { cursor: 'pointer' }, checked: !!showOpacityHint, onChange: (e) => setShowOpacityHint(e.target.checked) }),
+          React.createElement('span', null, '显示透明度说明'),
+        )
+      }
+
+      // 「Cordis 按钮常驻」勾选（v0.9.14 起在 Cordis 插件界面区域卡片内，原独立卡片已删）：
+      // 自身订阅 store（main 通道），childModules useMemo 闭包不捕获旧值。
+      // v1.0.0 开源：开关旁加小字——此开关依赖官方 dsh-client-ui-cordis 补丁，未打补丁时不生效（用户定"留着，标明要打补丁"）
+      function CordisEntryToggle() {
+        const { cordisEntry } = useStore(['main'])
+        // 开关仅勾选框触发（v0.9.20）
+        return React.createElement('div', { style: { marginTop: '6px' } },
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' } },
+            React.createElement('input', { type: 'checkbox', style: { cursor: 'pointer' }, checked: !!cordisEntry, onChange: (e) => setCordisEntry(e.target.checked) }),
+            React.createElement('span', null, 'Cordis 按钮常驻'),
+          ),
+          React.createElement('div', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-caption)', marginTop: '4px', marginLeft: '22px' } },
+            '需安装官方 Cordis 按钮补丁才生效（见 PATCH-CORDIS-BUTTON.md）'),
+        )
+      }
+
+      // 「设置界面」恢复原位按钮（v0.9.19）：面板被拖动离开居中后显示，点击恢复官方居中（detailsPos=null）；
+      // 布局调整「设置界面移动」开关关闭时按钮也消失（detailsDragEnabled=false，与拖动同步禁用）
+      function DetailsResetPos() {
+        const { detailsPos, detailsDragEnabled } = useStore(['main'])
+        if (!detailsPos || !detailsDragEnabled) return null
+        return React.createElement('div', { style: { marginTop: '6px' } },
+          React.createElement(ConfirmButton, {
+            label: '恢复原位', confirmLabel: '确认恢复原位',
+            onConfirm: () => setDetailsPos(null), resetKey: detailsPos.x + ',' + detailsPos.y,
+          }),
+        )
+      }
+
+      // 滑条 + 滚动条颜色/透明度（v0.9.15，浮窗面板卡片内的子板块——细分隔线 + 标题，同输入区「命令」子板块）：
+      // sliderColor/sliderOpacity = 插件滑条左半边（已填充）+ 圆点；sliderTrackColor/sliderTrackOpacity = 右半边（未填充轨道）；
+      // scrollColor/scrollOpacity = 浮窗界面滚动条 thumb
+      function SliderScrollEditor() {
+        const { convBgs } = useStore(['main'])
+        return React.createElement('div', { style: { marginTop: '8px', paddingTop: '10px', borderTop: '1px solid var(--dsw-alias-border-l1)' } },
+          React.createElement('div', { style: { fontSize: '13px', fontWeight: 600, marginBottom: '6px' } }, '滑条与滚动条'),
+          ConvBgRow({ label: '滑条颜色', value: convBgs.sliderColor, onSet: (v) => setConvBg('sliderColor', v), opacity: convBgs.sliderOpacity == null ? 0 : convBgs.sliderOpacity, onOpacity: (v) => setConvBg('sliderOpacity', v), onReset: () => { setConvBg('sliderColor', null); setConvBg('sliderOpacity', 0) }, noDefaultText: true }),
+          ConvBgRow({ label: '滑条轨道颜色', value: convBgs.sliderTrackColor, onSet: (v) => setConvBg('sliderTrackColor', v), opacity: convBgs.sliderTrackOpacity == null ? 0 : convBgs.sliderTrackOpacity, onOpacity: (v) => setConvBg('sliderTrackOpacity', v), onReset: () => { setConvBg('sliderTrackColor', null); setConvBg('sliderTrackOpacity', 0) }, noDefaultText: true }),
+          ConvBgRow({ label: '滚动条颜色', value: convBgs.scrollColor, onSet: (v) => setConvBg('scrollColor', v), opacity: convBgs.scrollOpacity == null ? 0 : convBgs.scrollOpacity, onOpacity: (v) => setConvBg('scrollOpacity', v), onReset: () => { setConvBg('scrollColor', null); setConvBg('scrollOpacity', 0) }, noDefaultText: true }),
+        )
+      }
+
+      // 对话区背景行（2026-08-21）：标签 + 色盘 + 当前状态（官方默认/自定义）+ 恢复官方默认（改动过才显示，同文字颜色逻辑）
+      // 标签窄 + 间距紧凑：确认态"确认恢复官方默认 + 取消"不换行
+      // v0.9.14：可选 opacity/onOpacity（命令两按钮）——**始终显示透明度滑条**（官方默认色也可调透明度，作用于官方 token 色）；
+      // 可选 onReset（命令两按钮恢复时同时归零透明度，默认只清颜色）；
+      // v0.9.15：可选 noDefaultText——滑条/滚动条是插件自己的控件（无官方默认），未设置时不显示"官方默认"文本
+      // v0.9.18：恢复按钮条件含透明度（只调透明度未调颜色时也可恢复）——框线/滑条区需要
+      // v0.9.18：可选 defaultSwatch——未设置（value null）时色块显示的默认色（默认 #ffffff；框线板块传官方淡灰/设置界面黑色）
+      // v0.9.18：可选 defaultText——未设置时的状态文本（默认"官方默认"；浮窗面板传"默认"——浮窗是插件自己的面板无官方语义）
+      function ConvBgRow({ label, value, onSet, opacity, onOpacity, onReset, noDefaultText, defaultSwatch, defaultText }) {
+        // 透明度滑条始终可用（官方默认色 + 用户透明度 → buildConvCss 用 color-mix 作用于官方 token）
+        const hasOpacity = opacity != null && onOpacity != null
+        const custom = !!(value || (hasOpacity && opacity > 0))
+        return React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap', marginBottom: '6px', fontSize: '12px' } },
+          React.createElement('span', { style: { width: '92px', flex: 'none', fontSize: '13px' } }, label),
+          // 未设置（null）时色盘显示默认色（官方默认近似色 #ffffff → 框线板块用官方淡灰/黑色，见 defaultSwatch）
+          React.createElement(ColorField, { value: value || defaultSwatch || '#ffffff', onChange: (hex) => onSet(hex) }),
+          // 状态文本固定宽度：对齐恢复按钮；只显示"已自定义/官方默认"（色值已由 ColorField 显示，避免重复 #rrggbb）
+          // noDefaultText（插件自己的滑条/滚动条）：未设置时留空（无"官方默认"——它没有官方默认）
+          React.createElement('span', { style: { width: '76px', flex: 'none', fontVariantNumeric: 'tabular-nums', color: 'var(--dsw-alias-label-secondary)', fontSize: '12px' } }, custom ? '已自定义' : (noDefaultText ? '' : (defaultText || '官方默认'))),
+          custom ? React.createElement(ConfirmButton, {
+            label: '恢复官方默认', confirmLabel: '确认恢复官方默认',
+            onConfirm: () => { if (onReset) onReset(); else onSet(null) }, resetKey: (value || '') + '|' + (hasOpacity ? (opacity == null ? 0 : opacity) : ''),
+          }) : null,
+          // 透明度滑条（仅命令两按钮 + 有自定义颜色时）：数值大=透明（语义同全局）；拖动走 OpacitySlider 内部抑制（suppress/commit，直更 style）
+          hasOpacity ? React.createElement(OpacitySlider, { value: opacity, onChange: (v) => onOpacity(v) }) : null,
+        )
+      }
+
+      // 对话区子版块（2026-08-21）：8 类背景（用户发言 / 行内代码 / 代码块背景 / 代码块滚动条 / 对话区滚动条 / 任务栏收起 / 任务栏展开 / 一键到底），默认官方
+      // 渲染在「对话区」卡片内部（原待支持区块，现挂接本子版块）；底部"全部恢复官方默认"（任一改动过才显示，仿字体颜色）
+      function ConversationEditor() {
+        const { convBgs } = useStore()
+        const hasCustom = !!convBgs.bubble || !!convBgs.inline || !!convBgs.code || !!convBgs.scrollbar || !!convBgs.chatScroll || !!convBgs.todoCollapsed || !!convBgs.todoExpanded || !!convBgs.toBottom
+        return React.createElement('div', null,
+          ConvBgRow({ label: '用户发言背景', value: convBgs.bubble, onSet: (v) => setConvBg('bubble', v) }),
+          ConvBgRow({ label: '行内代码背景', value: convBgs.inline, onSet: (v) => setConvBg('inline', v) }),
+          // v0.9.19：代码块滚动条 / 对话区滚动条两行位置对调（元素整体移动，键跟随；用户要求交换位置+文本）
+          // v0.9.20 小调整：代码块背景 / 代码块滚动条位置交换（背景在前、滚动条在后，更符合逻辑）
+          ConvBgRow({ label: '代码块背景', value: convBgs.code, onSet: (v) => setConvBg('code', v) }),
+          ConvBgRow({ label: '代码块滚动条', value: convBgs.scrollbar, onSet: (v) => setConvBg('scrollbar', v) }),
+          ConvBgRow({ label: '对话区滚动条', value: convBgs.chatScroll, onSet: (v) => setConvBg('chatScroll', v) }),
+          ConvBgRow({ label: '任务栏收起', value: convBgs.todoCollapsed, onSet: (v) => setConvBg('todoCollapsed', v) }),
+          ConvBgRow({ label: '任务栏展开', value: convBgs.todoExpanded, onSet: (v) => setConvBg('todoExpanded', v) }),
+          ConvBgRow({ label: '一键到底', value: convBgs.toBottom, onSet: (v) => setConvBg('toBottom', v) }),
+          hasCustom
+            ? React.createElement('div', { style: { marginTop: '4px' } },
+                React.createElement(ConfirmButton, {
+                  label: '全部恢复官方默认', confirmLabel: '全部确认恢复官方默认',
+                  onConfirm: resetAllConvBgs, resetKey: hasCustom, size: 'md',
+                }),
+              )
+            : null,
+        )
+      }
+
+      // 「界面」模块外壳（原 ModuleContent background 分支）：透明度说明 → 全部 AREAS 区域卡片（主界面/侧边栏/对话区/输入区/设置界面/浮窗面板/Cordis 插件界面）
+      function BackgroundModule() {
+        const { areas, sidebarInfo, cordisEntry, showOpacityHint, convBgs } = useStore()
+        // 性能优化 2026-08-21：AreaEditor 已 memo 化 → onChange/children 必须稳定引用，
+        // 否则父级每次重渲染都新建闭包/元素，memo 浅比较失效（所有区域跟着全量重渲染）
+        const changeArea = React.useMemo(() => {
+          const m = {}
+          for (const a of AREAS) m[a.id] = (v) => setArea(a.id, v)
+          return m
+        }, [])
+        const childModules = React.useMemo(() => ({
+          // 「新会话」是侧边栏区块的一部分；「统计条/命令」是输入区区块的一部分（渲染在对应卡片内部末尾）；
+          // 「对话区背景」是对话区区块的一部分（渲染在对话区卡片内部末尾）
+          // 输入区卡片内部结构（v0.9.11 用户定）：底色（AreaEditor 内）→ 输入框高度（ComposerHeightRow，板块直属）→ 统计条/命令（ComposerEditor 子版块）
+          // 浮窗面板卡片（v0.9.13）：背景调整（AreaEditor）+ 显示透明度说明勾选（children）
+          // 各子版块自身订阅 store → store 变化时自行重渲染，不受父级跳过影响
+          sidebar: React.createElement(React.Fragment, null,
+            React.createElement(BrandEditor, null),
+            React.createElement(NewSessionEditor, null),
+          ),
+          composer: React.createElement(React.Fragment, null,
+            React.createElement(ComposerHeightRow, null),
+            React.createElement(ComposerEditor, null),
+          ),
+          conversation: React.createElement(ConversationEditor, null),
+          float: React.createElement(React.Fragment, null,
+            React.createElement(SliderScrollEditor, null),
+            React.createElement(OpacityHintToggle, null),
+          ),
+          cordis: React.createElement(CordisEntryToggle, null),
+          details: React.createElement(DetailsResetPos, null),
+        }), [])
+        return React.createElement('div', null,
+          showOpacityHint
+            ? React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)', marginBottom: '8px', whiteSpace: 'pre-line' } },
+                '透明度说明：数值越大越透明，数值越小越不透明。\n透明度为0时完全半透明，透明度为1时完全透明',
+              )
+            : null,
+          AREAS.map((a) => React.createElement(AreaEditor, {
+            // ⚠️ 防御：旧配置整体替换后新区域（float/details/cordis）可能缺失 → emptyArea 兜底（v0.9.13 事故修复）
+            area: a, value: areas[a.id] && typeof areas[a.id] === 'object' ? areas[a.id] : emptyArea(), onChange: changeArea[a.id],
+            ratio: getCropRatio(a),
+            children: childModules[a.id] || null,
+          })),
+        )
+      }
+
+      // ════════ 10_colors.js ════════
+      // ┌─ 片段 10_colors ────────────────────────────────
+      // │ 职责：字体颜色板块（颜色行组件 + 「字体颜色」模块外壳）
+      // │ 定义：ColorRow / ColorsModule
+      // │ 测试：改 5 类文字颜色行为/颜色模块说明与全部恢复按钮时来此片段
+      function ColorRow({ item, value, official, onChange, onReset }) {
+        const v = value || official || '#000000'
+        const isCustom = !!value
+        return React.createElement('div', { style: { padding: '8px 10px', border: '1px solid var(--dsw-alias-border-l1)', borderRadius: '8px', marginBottom: '8px', display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap' } },
+          React.createElement(ColorField, { value: v, onChange: (hex) => onChange(hex) }),
+          React.createElement('div', { style: { flex: 1, minWidth: '160px' } },
+            React.createElement('div', { style: { fontSize: '13px', fontWeight: 600 } },
+              item.label,
+              isCustom ? React.createElement('span', { style: { marginLeft: '6px', fontSize: '11px', color: 'var(--dsw-alias-brand-primary)' } }, '已自定义') : React.createElement('span', { style: { marginLeft: '6px', fontSize: '11px', color: 'var(--dsw-alias-label-secondary)' } }, '官方原样'),
+            ),
+            React.createElement('div', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)', marginTop: '2px' } }, item.desc),
+            React.createElement('div', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-caption)', marginTop: '2px', fontVariantNumeric: 'tabular-nums' } },
+              '当前: ' + v,
+            ),
+          ),
+          isCustom
+            ? React.createElement(ConfirmButton, {
+                label: '恢复官方默认', confirmLabel: '确认恢复官方默认',
+                onConfirm: onReset, resetKey: v,
+              })
+            : null,
+        )
+      }
+
+      // 「字体颜色」模块外壳（原 ModuleContent colors 分支）：说明 + 5 行 ColorRow + 全部恢复官方默认（改动过才显示）
+      function ColorsModule() {
+        const { colors, officialColors } = useStore()
+        const hasCustomColor = COLOR_ITEMS.some((it) => !!colors[it.key])
+        return React.createElement('div', null,
+          React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)', marginBottom: '8px' } },
+            '亮暗主题共用同一套颜色；不设置 = 官方原样。状态色（错误/成功/警告）为功能语义色，保持官方。',
+          ),
+          COLOR_ITEMS.map((it) => React.createElement(ColorRow, {
+            key: it.key,
+            item: it,
+            value: colors[it.key],
+            official: officialColors[it.key],
+            onChange: (v) => setColor(it.key, v),
+            onReset: () => resetColor(it.key),
+          })),
+          hasCustomColor
+            ? React.createElement(ConfirmButton, {
+                label: '全部恢复官方默认', confirmLabel: '全部确认恢复官方默认',
+                onConfirm: resetAllColors, resetKey: hasCustomColor, size: 'md',
+              })
+            : null,
+        )
+      }
+
+      // ════════ 11_presets_panel.js ════════
+      // ┌─ 片段 11_presets_panel ─────────────────────────
+      // │ 职责：预设板块交互 + UI（保存/导入/同名覆盖/放弃/应用/删除/导出/重命名/拖拽排序 FLIP）
+      // │ 数据层在 06_presets.js（IndexedDB + applyPresetData）
+      // │ ⚠️ 保留 useStore(['preset']) 订阅：预设异步加载/拖拽排序后靠 preset 通道触发重渲染，去掉订阅列表不会刷新
+      // memo 化 + 通道订阅（性能优化 2026-08-21）：只订阅 preset 通道（loadPresets 异步完成/拖拽排序刷新），
+      // 不订阅 main 通道 → 颜色/透明度/背景拖动时预设面板不再跟着每帧重渲染（最大组件，收益最大）
+      const PresetsPanel = React.memo(function PresetsPanel() {
+        const [presetMsg, setPresetMsg] = React.useState('')
+        const [newPresetName, setNewPresetName] = React.useState('')
+        const [naming, setNaming] = React.useState(false)
+        // 同名冲突：{ kind: 'save' | 'import', name, data, targetId }；null = 无冲突
+        const [conflict, setConflict] = React.useState(null)
+        // 预设删除：两步确认（记录待确认删除的预设 id）
+        const [confirmDeleteId, setConfirmDeleteId] = React.useState(null)
+        const [renameTargetId, setRenameTargetId] = React.useState(null)
+        const [renameInput, setRenameInput] = React.useState('')
+        const [dragIndex, setDragIndex] = React.useState(null)
+        const dragIndexRef = React.useRef(null)
+        const listRef = React.useRef(null)
+        const flipDataRef = React.useRef(null)
+        const presetFileRef = React.useRef(null)
+        useStore(['preset'])
+        // FLIP 动画：预设重排后，各行从旧位置平滑过渡到新位置（拖拽交换时其他行也有移动动画）
+        React.useEffect(() => {
+          if (!flipDataRef.current || !listRef.current) return
+          const rows = listRef.current.querySelectorAll('[data-preset-row]')
+          rows.forEach((el) => {
+            const oldTop = flipDataRef.current.get(el)
+            if (oldTop === undefined) return
+            const newTop = el.getBoundingClientRect().top
+            const dy = oldTop - newTop
+            if (dy !== 0) {
+              el.style.transition = 'none'
+              el.style.transform = 'translateY(' + dy + 'px)'
+              void el.offsetHeight // 强制 reflow
+              el.style.transition = 'transform 160ms ease'
+              el.style.transform = 'translateY(0px)'
+            }
+          })
+          flipDataRef.current = null
+        }, [presets])
+        // P5 预设：本地预设库（最多 10 个，IndexedDB 存储）；保存/应用/重命名/删除/导出单个/导入
+        const handlePresetFile = (e) => {
+          const file = e.target.files && e.target.files[0]
+          if (!file) return
+          setConfirmDeleteId(null)
+          const reader = new FileReader()
+          reader.onload = () => {
+            try {
+              const c = JSON.parse(String(reader.result))
+              if (!c || typeof c !== 'object' || !c.areas || typeof c.areas !== 'object') throw new Error('不是有效的主题预设文件')
+              const base = (file.name || '导入预设').replace(/\.tczp$/i, '').replace(/\.json$/i, '').trim() || '导入预设'
+              // 同名检测：已有同名预设时不直接入库，提示用户选择（覆盖 / 放弃）
+              const dup = presets.find((p) => p.name === base)
+              if (dup) {
+                setConflict({ kind: 'import', name: base, data: c, targetId: dup.id })
+                setPresetMsg('')
+                return
+              }
+              // 预设库满员：直接拒绝导入（不应用设置），提示失败
+              if (presets.length >= PRESET_LIMIT) {
+                setPresetMsg('❌ 导入失败：能保存的预设数量达到上限（' + PRESET_LIMIT + ' 个），请先删除部分预设后再导入')
+                return
+              }
+              applyPresetData(c) // 应用（setter 路径 + 末尾统一保存）
+              const newItem = { id: String(Date.now()) + '-' + presets.length, name: base, savedAt: Date.now(), data: c }
+              presets = [...presets, newItem]
+              savePresets().then(() => {
+                // 导入后更新"当前预设"显示
+                lastAppliedId = newItem.id
+                try { window.localStorage.setItem('theme-customizer-last-applied', newItem.id) } catch (e) { /* 忽略 */ }
+                setPresetMsg('✅ 导入成功：设置已恢复，并已存入预设库（' + presets.length + '/' + PRESET_LIMIT + '）')
+              }).catch(() => {
+                presets = presets.slice(0, -1)
+                setPresetMsg('✅ 导入成功：设置已恢复。⚠️ 预设库存储空间不足（图片较大），未存入库')
+              })
+            } catch (err) {
+              const stack = err && err.stack ? String(err.stack).split('\n').slice(0, 3).join(' | ') : ''
+              setPresetMsg('❌ 导入失败：' + (err && err.message ? err.message : String(err)) + (stack ? ' | ' + stack : ''))
+            }
+          }
+          reader.readAsText(file)
+          e.target.value = ''
+        }
+        const savePreset = () => {
+          setConfirmDeleteId(null)
+          const name = (newPresetName || '').trim() || ('预设 ' + (presets.length + 1))
+          // 同名检测：已有同名预设时不直接保存，提示用户选择（覆盖 / 放弃）
+          const dup = presets.find((p) => p.name === name)
+          if (dup) {
+            setConflict({ kind: 'save', name, data: null, targetId: dup.id })
+            setPresetMsg('')
+            return
+          }
+          if (presets.length >= PRESET_LIMIT) {
+            setPresetMsg('❌ 能保存的预设数量达到上限（' + PRESET_LIMIT + ' 个），请先删除部分预设')
+            return
+          }
+          // ⚠️ 必须深拷贝快照（JSON 往返）：data 里的 areas/colors 若直接引用当前对象，
+          // 保存后修改设置会让已存预设"跟随"变化（应用时读到的是当前设置而非保存快照）
+          const data = JSON.parse(JSON.stringify({ v: 1, opacitySem: 4, areas, colors, cordisEntry, floatModules, floatShowReset, floatPos, floatVisible, newSession, brand, brandHarness, borders, detailsPos, detailsDragEnabled, showOpacityHint, convBgs }))
+          const newItem = { id: String(Date.now()) + '-' + presets.length, name, savedAt: Date.now(), data }
+          presets = [...presets, newItem]
+          savePresets().then(() => {
+            setNewPresetName('')
+            setNaming(false)
+            // 保存后更新"当前预设"显示
+            lastAppliedId = newItem.id
+            try { window.localStorage.setItem('theme-customizer-last-applied', newItem.id) } catch (e) { /* 忽略 */ }
+            setPresetMsg('✅ 已保存预设：' + name + '（' + presets.length + '/' + PRESET_LIMIT + '）')
+          }).catch(() => {
+            presets = presets.slice(0, -1)
+            setPresetMsg('❌ 保存失败：存储空间不足（图片较大），请删除部分预设或换用较小图片')
+          })
+        }
+        // 同名冲突：覆盖当前同名预设（保留原 id 和排序位置，仅更新数据）
+        const confirmOverwrite = () => {
+          if (!conflict) return
+          setConfirmDeleteId(null)
+          const targetId = conflict.targetId
+          const name = conflict.name
+          const oldItem = presets.find((p) => p.id === targetId)
+          if (!oldItem) { setConflict(null); return }
+          if (conflict.kind === 'save') {
+            // 保存覆盖：用当前设置生成深拷贝快照
+            const data = JSON.parse(JSON.stringify({ v: 1, opacitySem: 4, areas, colors, cordisEntry, floatModules, floatShowReset, floatPos, floatVisible, newSession, brand, brandHarness, borders, detailsPos, detailsDragEnabled, showOpacityHint, convBgs }))
+            presets = presets.map((p) => p.id === targetId ? { ...p, name, savedAt: Date.now(), data } : p)
+            savePresets().then(() => {
+              setConflict(null)
+              setNewPresetName('')
+              setNaming(false)
+              setPresetMsg('✅ 已覆盖同名预设：' + name)
+            }).catch(() => {
+              presets = presets.map((p) => p.id === targetId && oldItem ? oldItem : p)
+              setPresetMsg('❌ 覆盖失败：存储空间不足（图片较大），原预设未变')
+            })
+          } else {
+            // 导入覆盖：应用文件设置 + 覆盖该预设数据
+            try { applyPresetData(conflict.data) } catch (err) {
+              setConflict(null)
+              setPresetMsg('❌ 覆盖失败：' + (err && err.message ? err.message : String(err)))
+              return
+            }
+            presets = presets.map((p) => p.id === targetId ? { ...p, name, savedAt: Date.now(), data: conflict.data } : p)
+            savePresets().then(() => {
+              setConflict(null)
+              setPresetMsg('✅ 导入成功：已覆盖同名预设 ' + name + '（设置已恢复）')
+            }).catch(() => {
+              presets = presets.map((p) => p.id === targetId && oldItem ? oldItem : p)
+              setPresetMsg('❌ 导入成功：设置已恢复。⚠️ 覆盖入库失败（空间不足），原预设未变')
+            })
+          }
+        }
+        // 同名冲突：放弃增加预设（保存=清空命名框关闭；导入=不入库不应用）
+        const cancelConflict = () => {
+          const wasSave = conflict && conflict.kind === 'save'
+          setConfirmDeleteId(null)
+          setConflict(null)
+          if (wasSave) {
+            setNewPresetName('')
+            setNaming(false)
+            setPresetMsg('⏹ 已放弃保存：未增加预设')
+          } else {
+            setPresetMsg('⏹ 已放弃导入：未增加预设')
+          }
+        }
+        const applyPreset = (item) => {
+          setConfirmDeleteId(null)
+          try {
+            applyPresetData(item.data)
+            lastAppliedId = item.id
+            try { window.localStorage.setItem('theme-customizer-last-applied', item.id) } catch (e) { /* 忽略 */ }
+            setPresetMsg('✅ 已应用预设：' + item.name)
+          } catch (err) {
+            setPresetMsg('❌ 应用预设失败：' + (err && err.message ? err.message : String(err)))
+          }
+        }
+        const deletePreset = (id) => {
+          // 两步确认：第一次点击进入确认态（按钮变"确认删除"），再点才真正删除
+          if (confirmDeleteId !== id) { setConfirmDeleteId(id); setPresetMsg(''); return }
+          setConfirmDeleteId(null)
+          const it = presets.find((p) => p.id === id)
+          presets = presets.filter((p) => p.id !== id)
+          if (lastAppliedId === id) {
+            lastAppliedId = null
+            try { window.localStorage.removeItem('theme-customizer-last-applied') } catch (e) { /* 忽略 */ }
+          }
+          idbDelete(id).then(() => {
+            setPresetMsg('🗑 已删除预设：' + (it ? it.name : '') + '（剩余 ' + presets.length + '/' + PRESET_LIMIT + '）')
+          }).catch(() => {
+            setPresetMsg('⚠️ 已从列表移除，但存储清理失败（刷新后可能重现），请重试')
+          })
+        }
+        // 导出指定预设为 .tczp 文件（原"导出当前设置"废弃）
+        const exportPresetItem = (item) => {
+          setConfirmDeleteId(null)
+          try {
+            const blob = new Blob([JSON.stringify(item.data)], { type: 'application/json' })
+            const url = URL.createObjectURL(blob)
+            const a = document.createElement('a')
+            a.href = url
+            a.download = (item.name || '预设').replace(/[\\/:*?"<>|]/g, '-') + '.tczp'
+            document.body.appendChild(a)
+            a.click()
+            document.body.removeChild(a)
+            try { URL.revokeObjectURL(url) } catch (e) { /* 忽略 */ }
+            setPresetMsg('✅ 已导出预设：' + item.name + '（.tczp，含图片）')
+          } catch (e) {
+            setPresetMsg('❌ 导出失败：' + (e && e.message ? e.message : String(e)))
+          }
+        }
+        const startRename = (item) => { setConfirmDeleteId(null); setRenameTargetId(item.id); setRenameInput('') }
+        const cancelRename = () => { setConfirmDeleteId(null); setRenameTargetId(null); setRenameInput('') }
+        // 拖拽排序：三条灰线手柄 → 按起始位置+行高推算目标（不读实时 DOM，避免高频 pointermove 下 React 渲染滞后导致边界抖动）→ FLIP 动画 → 松手保存
+        const startDragPreset = (e, index) => {
+          if (e.button !== 0) return
+          e.preventDefault()
+          setConfirmDeleteId(null)
+          dragIndexRef.current = index
+          setDragIndex(index)
+          // 拖拽期间锁定光标（grabbing）并禁止选中，避免指针经过按钮/文本时光标频繁变化
+          let dragStyle = null
+          try {
+            dragStyle = document.createElement('style')
+            dragStyle.setAttribute('data-thmcz-drag', 'true')
+            dragStyle.textContent = '* { cursor: grabbing !important; user-select: none !important; }'
+            document.head.appendChild(dragStyle)
+          } catch (err) { /* 忽略 */ }
+          const startY = e.clientY
+          let rowH = 40
+          try {
+            const rows0 = listRef.current && listRef.current.querySelectorAll('[data-preset-row]')
+            const el0 = rows0 && rows0[index]
+            if (el0) rowH = el0.getBoundingClientRect().height || 40
+          } catch (err) { /* 忽略 */ }
+          const onMove = (ev) => {
+            if (!listRef.current) return
+            const rows = listRef.current.querySelectorAll('[data-preset-row]')
+            if (!rows.length) return
+            // 目标 = 起始序号 + 移动距离/行高（Math.round 滞回：越过半行高才换位，边界不来回抖动）
+            const dy = ev.clientY - startY
+            let target = index + Math.round(dy / rowH)
+            target = Math.max(0, Math.min(rows.length - 1, target))
+            if (target !== dragIndexRef.current) {
+              // FLIP 前置：记录各行当前位置（React 重排后由 useEffect 播放过渡动画）
+              const rowsNow = listRef.current.querySelectorAll('[data-preset-row]')
+              const oldTops = new Map()
+              rowsNow.forEach((r) => oldTops.set(r, r.getBoundingClientRect().top))
+              const arr = [...presets]
+              const [moved] = arr.splice(dragIndexRef.current, 1)
+              arr.splice(target, 0, moved)
+              presets = arr
+              dragIndexRef.current = target
+              flipDataRef.current = oldTops
+              presetNotify()
+            }
+          }
+          const onUp = () => {
+            window.removeEventListener('pointermove', onMove)
+            window.removeEventListener('pointerup', onUp)
+            try {
+              const s = document.querySelector('style[data-thmcz-drag]')
+              if (s) s.remove()
+            } catch (err) { /* 忽略 */ }
+            setDragIndex(null)
+            dragIndexRef.current = null
+            savePresets().then(() => {
+              setPresetMsg('↕ 已调整预设顺序')
+            }).catch(() => {
+              setPresetMsg('⚠️ 顺序已调整，但保存失败（刷新后可能恢复原序）')
+            })
+          }
+          window.addEventListener('pointermove', onMove)
+          window.addEventListener('pointerup', onUp)
+        }
+        const confirmRename = () => {
+          const name = (renameInput || '').trim()
+          if (!name) { setPresetMsg('❌ 名称不能为空'); return }
+          const targetId = renameTargetId
+          const old = presets.find((p) => p.id === targetId)
+          presets = presets.map((p) => p.id === targetId ? { ...p, name } : p)
+          savePresets().then(() => {
+            setRenameTargetId(null)
+            setRenameInput('')
+          }).catch(() => {
+            presets = presets.map((p) => p.id === targetId && old ? { ...p, name: old.name } : p)
+            setPresetMsg('❌ 重命名保存失败')
+          })
+        }
+        const btnSmall = { padding: '5px 12px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-1)', fontSize: '12px', flex: 'none' }
+        const currentName = (presets.find((p) => p.id === lastAppliedId) || {}).name || '未应用'
+        return React.createElement('div', null,
+          React.createElement('div', { style: { padding: '10px', border: '1px solid var(--dsw-alias-border-l1)', borderRadius: '8px', marginTop: '4px' } },
+            React.createElement('div', { style: { fontSize: '13px', fontWeight: 600, marginBottom: '6px' } }, '本地预设库（' + presets.length + '/' + PRESET_LIMIT + '）'),
+            React.createElement('div', { style: { display: 'flex', gap: '8px', marginBottom: '8px', alignItems: 'center', flexWrap: 'wrap' } },
+              React.createElement('span', { style: { fontSize: '13px', flex: 'none' } }, '当前预设：'),
+              React.createElement('span', { style: { fontSize: '13px', fontWeight: 600, color: 'var(--dsw-alias-brand-primary)', flex: 1, minWidth: 80, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, currentName),
+              React.createElement('button', { type: 'button', onClick: () => { setConfirmDeleteId(null); setNaming(true) }, style: { ...btnSmall, background: 'var(--dsw-alias-brand-primary)', color: '#fff', border: 'none' } }, '💾 保存预设'),
+              React.createElement('button', { type: 'button', onClick: () => presetFileRef.current && presetFileRef.current.click(), style: btnSmall }, '📥 导入预设'),
+              React.createElement('input', { ref: presetFileRef, type: 'file', accept: '.tczp,application/json,.json', style: { display: 'none' }, onChange: handlePresetFile }),
+            ),
+            conflict
+              ? React.createElement('div', { style: { display: 'flex', gap: '8px', marginBottom: '8px', alignItems: 'center', flexWrap: 'wrap', padding: '8px 10px', border: '1px solid var(--dsw-alias-state-warning-primary, #d97706)', borderRadius: '6px', background: 'var(--dsw-alias-bg-layer-1)' } },
+                  React.createElement('span', { style: { fontSize: '13px', color: 'var(--dsw-alias-state-warning-primary, #d97706)', flex: 1, minWidth: 200 } }, '⚠️ 当前预设与已有预设同名：' + conflict.name),
+                  React.createElement('button', { type: 'button', onClick: confirmOverwrite, style: { ...btnSmall, background: 'var(--dsw-alias-brand-primary)', color: '#fff', border: 'none' } }, '覆盖当前同名预设'),
+                  React.createElement('button', { type: 'button', onClick: cancelConflict, style: btnSmall }, '放弃增加预设'),
+                )
+              : null,
+            presetMsg
+              ? React.createElement('div', { style: { marginBottom: '8px', fontSize: '12px', color: presetMsg.indexOf('❌') === 0 ? 'var(--dsw-alias-state-error-primary)' : 'var(--dsw-alias-label-secondary)', fontVariantNumeric: 'tabular-nums' } }, presetMsg)
+              : null,
+            naming
+              ? React.createElement('div', { style: { display: 'flex', gap: '8px', marginBottom: '8px', alignItems: 'center' } },
+                  React.createElement('span', { style: { fontSize: '13px', flex: 'none' } }, '预设名称：'),
+                  React.createElement('input', { autoFocus: true, value: newPresetName, onChange: (e) => setNewPresetName(e.target.value), placeholder: '输入名称', style: { flex: 1, padding: '6px 10px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-1)', fontSize: '13px', minWidth: 120 } }),
+                  React.createElement('button', { type: 'button', onClick: savePreset, style: { ...btnSmall, background: 'var(--dsw-alias-brand-primary)', color: '#fff', border: 'none' } }, '✓ 确定'),
+                  React.createElement('button', { type: 'button', onClick: () => setNaming(false), style: btnSmall }, '✕ 取消'),
+                )
+              : null,
+            presets.length === 0
+              ? React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-caption)' } }, '还没有预设：点「保存预设」命名保存，或导入 .tczp 文件（自动入库）。')
+              : React.createElement('div', { ref: listRef, style: { display: 'flex', flexDirection: 'column', gap: '6px' } },
+                  presets.map((p, pi) => React.createElement(React.Fragment, { key: p.id },
+                    React.createElement('div', { 'data-preset-row': true, style: { display: 'flex', alignItems: 'center', gap: '8px', padding: '8px 10px', border: '1px solid var(--dsw-alias-border-l1)', borderRadius: '6px', opacity: dragIndex === pi ? 0.5 : 1 } },
+                      React.createElement('div', { style: { flex: 1, minWidth: 0 } },
+                        React.createElement('div', { style: { fontSize: '13px', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, p.name),
+                        React.createElement('div', { style: { fontSize: '11px', color: 'var(--dsw-alias-label-caption)', fontVariantNumeric: 'tabular-nums' } }, new Date(p.savedAt).toLocaleString()),
+                      ),
+                      React.createElement('button', { type: 'button', onClick: () => applyPreset(p), style: btnSmall }, '▶ 应用'),
+                      React.createElement('button', { type: 'button', onClick: () => startRename(p), style: btnSmall }, '✏ 重命名'),
+                      React.createElement('button', { type: 'button', onClick: () => exportPresetItem(p), style: btnSmall }, '📤 导出'),
+                      React.createElement('button', { type: 'button', onClick: () => deletePreset(p.id), style: confirmDeleteId === p.id ? { ...btnSmall, background: 'var(--dsw-alias-state-error-primary)', color: '#fff', border: 'none' } : { ...btnSmall, color: 'var(--dsw-alias-state-error-primary)', borderColor: 'var(--dsw-alias-state-error-primary)' } }, confirmDeleteId === p.id ? '确认删除' : '🗑 删除'),
+                      confirmDeleteId === p.id
+                        ? React.createElement('button', { type: 'button', onClick: () => setConfirmDeleteId(null), style: btnSmall }, '取消')
+                        : null,
+                      React.createElement('div', { onPointerDown: (e) => startDragPreset(e, pi), title: '拖拽排序', style: { cursor: 'grab', padding: '4px', display: 'flex', flex: 'none', touchAction: 'none' } },
+                        React.createElement('svg', { width: '14', height: '12', viewBox: '0 0 14 12', style: { display: 'block' } },
+                          React.createElement('line', { x1: '0', y1: '1', x2: '14', y2: '1', stroke: 'var(--dsw-alias-border-l2)', strokeWidth: '2' }),
+                          React.createElement('line', { x1: '0', y1: '6', x2: '14', y2: '6', stroke: 'var(--dsw-alias-border-l2)', strokeWidth: '2' }),
+                          React.createElement('line', { x1: '0', y1: '11', x2: '14', y2: '11', stroke: 'var(--dsw-alias-border-l2)', strokeWidth: '2' }),
+                        ),
+                      ),
+                    ),
+                    renameTargetId === p.id
+                      ? React.createElement('div', { style: { display: 'flex', gap: '8px', alignItems: 'center', padding: '6px 10px', border: '1px dashed var(--dsw-alias-border-l2)', borderRadius: '6px' } },
+                          React.createElement('span', { style: { fontSize: '13px', flex: 'none' } }, '重命名为：'),
+                          React.createElement('input', { autoFocus: true, value: renameInput, onChange: (e) => setRenameInput(e.target.value), placeholder: '输入新名称', style: { flex: 1, padding: '6px 10px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-1)', fontSize: '13px', minWidth: 120 } }),
+                          React.createElement('button', { type: 'button', onClick: confirmRename, style: { ...btnSmall, background: 'var(--dsw-alias-brand-primary)', color: '#fff', border: 'none' } }, '✓ 确定'),
+                          React.createElement('button', { type: 'button', onClick: cancelRename, style: btnSmall }, '✕ 取消'),
+                        )
+                      : null,
+                  )),
+                ),
+          ),
+        )
+      })
+
+      // ════════ 12_float.js ════════
+      // ┌─ 片段 12_float ─────────────────────────────────
+      // │ 职责：浮窗（显示内容勾选 + 可拖浮窗面板；拖动用局部状态，pointerup 才写回全局 + 保存）
+      // │ 定义：Section / FloatModulePicker / GlobalFloat
+      function Section({ title, children }) {
+        return React.createElement('section', { style: { marginBottom: '16px', padding: '16px', border: '1px solid var(--dsw-alias-border-l1)', borderRadius: '8px' } },
+          React.createElement('h3', { style: { marginTop: 0, marginBottom: '10px', fontSize: '14px' } }, title),
+          children,
+        )
+      }
+
+      function FloatModulePicker() {
+        const { floatModules, floatShowReset } = useStore(['float'])
+        return React.createElement(Section, { title: '浮窗显示内容' },
+          React.createElement('p', { style: { color: 'var(--dsw-alias-label-secondary)', fontSize: '13px', margin: '0 0 10px' } }, '勾选要在浮窗中显示/可调整的模块：'),
+          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+            // 开关仅勾选框触发（v0.9.20 用户定：不要整栏触发）
+            MODULES.map((m) => React.createElement('div', { key: m.id, style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' } },
+              React.createElement('input', { type: 'checkbox', style: { cursor: 'pointer' }, checked: !!floatModules[m.id], onChange: (e) => setFloatModules({ ...floatModules, [m.id]: e.target.checked }) }),
+              React.createElement('span', null, m.title),
+            )),
+            // v0.9.16：浮窗内是否显示「全局恢复默认」按钮
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', marginTop: '4px' } },
+              React.createElement('input', { type: 'checkbox', style: { cursor: 'pointer' }, checked: !!floatShowReset, onChange: (e) => setFloatShowReset(e.target.checked) }),
+              React.createElement('span', null, '显示「全局恢复默认」按钮'),
+            ),
+          ),
+        )
+      }
+
+      function GlobalFloat() {
+        // 只订阅 float 通道：位置/显示内容拖动（float）不重渲染设置页；背景由 areas.float（main 通道 → buildFloatCss）控制
+        const { floatVisible, floatPos, floatModules, floatShowReset } = useStore(['float'])
+        const [dragging, setDragging] = React.useState(false)
+        // 拖动位置局部状态：pointermove 只重渲染浮窗自身（不走全局 notify，避免每帧全量重渲染）
+        const [dragPos, setDragPos] = React.useState(null)
+        const dragRef = React.useRef(null)
+        if (!floatVisible) return null
+        const shown = MODULES.filter((m) => floatModules[m.id])
+        const pos = dragPos ? { ...floatPos, ...dragPos } : floatPos
+        // 背景（底色/纯色/图片 + 透明度）由 buildFloatCss 注入到 [data-thmcz-float]（v0.9.13 起，原 floatOpacity 半透明已删）；
+        // 这里只保留布局/阴影/圆角（边框色用主题 token，随主题自动亮暗）
+        const onPointerDown = (e) => {
+          if (e.button !== 0) return
+          e.preventDefault()
+          const startX = e.clientX, startY = e.clientY
+          const orig = { x: floatPos.x, y: floatPos.y }
+          setDragging(true)
+          const onMove = (ev) => {
+            const next = { x: orig.x + (ev.clientX - startX), y: orig.y + (ev.clientY - startY) }
+            dragRef.current = next
+            setDragPos(next)
+          }
+          const onUp = () => {
+            window.removeEventListener('pointermove', onMove)
+            window.removeEventListener('pointerup', onUp)
+            setDragging(false)
+            // 拖动结束才写回全局 + 保存一次（无定时器约定）
+            const p = dragRef.current
+            dragRef.current = null
+            setDragPos(null)
+            if (p) setFloatPos({ ...floatPos, x: p.x, y: p.y })
+            saveNow()
+          }
+          window.addEventListener('pointermove', onMove)
+          window.addEventListener('pointerup', onUp)
+        }
+        return React.createElement('div', { 'data-thmcz-float': true, style: { position: 'fixed', left: pos.x, top: pos.y, width: pos.width, height: pos.height, zIndex: 2147483647, display: 'flex', flexDirection: 'column', borderRadius: '12px', boxShadow: '0 8px 32px rgba(0,0,0,0.35)', border: '1px solid var(--dsw-alias-border-l1)', color: 'var(--dsw-alias-label-primary)', overflow: 'hidden', userSelect: dragging ? 'none' : 'auto' } },
+          React.createElement('div', { onPointerDown: onPointerDown, style: { height: '36px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 12px', cursor: 'move', flex: 'none', background: 'rgba(255,255,255,0.07)', borderBottom: '1px solid var(--dsw-alias-border-l1)' } },
+            React.createElement('span', { style: { fontSize: '13px', fontWeight: 600 } }, '主题设置 · 浮动'),
+            React.createElement('button', { type: 'button', onClick: () => setFloatVisible(false), style: { border: 'none', background: 'none', color: 'var(--dsw-alias-label-secondary)', cursor: 'pointer', fontSize: '13px', padding: '4px' } }, '✕'),
+          ),
+          // v0.9.15：滚动容器加 data-thmcz-float-scroll → 浮窗滚动条颜色/透明度（scrollColor/scrollOpacity）作用于此处
+          React.createElement('div', { 'data-thmcz-float-scroll': true, style: { flex: 1, overflowY: 'auto', padding: '12px', display: 'flex', flexDirection: 'column', gap: '12px' } },
+            shown.length === 0
+              ? React.createElement('p', { style: { color: 'var(--dsw-alias-label-secondary)', fontSize: '13px' } }, '未选择任何模块，请到 设置 → 主题 → 浮窗显示内容 勾选。')
+              : shown.map((m) => React.createElement('section', { key: m.id, style: { padding: '12px', border: '1px solid var(--dsw-alias-border-l1)', borderRadius: '8px' } },
+                  React.createElement('h4', { style: { margin: '0 0 8px', fontSize: '13px' } }, m.title),
+                  React.createElement(ModuleContent, { id: m.id }),
+                )),
+            // 全局恢复默认（v0.9.16）：浮窗内也显示（与主题设置页一致），独立、居中、三级确认；受「浮窗显示内容」勾选控制
+            floatShowReset
+              ? React.createElement('div', { style: { marginTop: '4px', borderTop: '1px solid var(--dsw-alias-border-l1)', paddingTop: '12px' } },
+                  React.createElement(TripleConfirmButton, {
+                    label: '全局恢复默认', confirmLabel1: '确认全局恢复默认', confirmLabel2: '确认吗？你的全部自定义设置都会消失',
+                    onConfirm: resetAllSettings, resetKey: 'reset-all-settings',
+                  }),
+                )
+              : null,
+          ),
+        )
+      }
+
+      // ════════ 13_boot.js ════════
+      // ┌─ 片段 13_boot ──────────────────────────────────
+      // │ 职责：主题页 + 模块注册表 + 槽位注册 + Cordis 常驻开关 + 启动副作用（集中在本片段）
+      // │ 定义：ModuleContent / ThemePage / applyCordisEntryFlag；执行：slots.inject ×3 + applyCordisEntryFlag()
+      // 「布局调整」板块开关（v0.9.19）：设置界面可移动（详情见 07 拖动委托 + 09 DetailsResetPos）
+      function LayoutToggle() {
+        const { detailsDragEnabled } = useStore(['main'])
+        // 开关仅勾选框触发（v0.9.20）
+        return React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', marginBottom: '8px' } },
+          React.createElement('input', { type: 'checkbox', style: { cursor: 'pointer' }, checked: !!detailsDragEnabled, onChange: (e) => setDetailsDragEnabled(e.target.checked) }),
+          React.createElement('span', null, '设置界面可移动'),
+        )
+      }
+
+      // 模块注册表（四模块总开关）：设置页与浮窗共用；各模块渲染已归位到所属板块片段（09 界面 / 10 颜色 / 11 预设）
+      function ModuleContent({ id }) {
+        if (id === 'background') return React.createElement(BackgroundModule, null)
+        if (id === 'borders') return React.createElement(BordersModule, null)
+        if (id === 'colors') return React.createElement(ColorsModule, null)
+        // 布局调整：目前只有「设置界面可移动」开关（P4 拖拽布局占位按钮已删——2026-08-22 梳理，开源前去掉未完成功能占位）
+        if (id === 'layout') return React.createElement(LayoutToggle, null)
+        if (id === 'presets') return React.createElement(PresetsPanel, null)
+        return null
+      }
+
+      // 主题页注册**最前**（EXPERIENCE 铁律：保证设置入口存在，即使其他槽位注册失败——v0.9.19 侧边栏槽位事故后再次确认）
+      slots.inject('settings.section', () => slots.register({ name: 'settings.section', id: 'theme-customizer', label: '主题', order: 900 }, () => React.createElement(ThemePage, null)))
+
+      slots.inject('shell.overlay', () => slots.register({ name: 'shell.overlay', id: 'theme-customizer-bg', order: 50 }, () => React.createElement(AreaCss, null)))
+      slots.inject('shell.overlay', () => slots.register({ name: 'shell.overlay', id: 'theme-customizer-float', order: 100 }, () => React.createElement(GlobalFloat, null)))
+
+      // 统计条接管：注册到 conversation.composer.dock（官方 stats 同 slot，order 更大靠后渲染；
+      // 官方 stats 用 CSS 隐藏，见 07_css_builder）。组件收到 slot 注入的 useSession/useProjection。
+      slots.inject('conversation.composer.dock', () => slots.register({ name: 'conversation.composer.dock', id: 'theme-customizer-stats', order: 100 }, (props) => React.createElement(ComposerStatsLine, props)))
+
+      // ⚠️ v0.9.19 事故：曾直接 slots.register('sidebar.settings')——官方把它注册为**容器槽位**（children 含
+      // settings.trigger/header/action/close），直接注册同名冲突 → 官方设置按钮消失 → "主题没有了"。
+      // 曾试子槽位 sidebar.settings.settings.action 也不生效（官方子槽位仅容器内部使用）。
+      // ✅ 最终方案：侧边栏复位按钮改用**原生 DOM 注入**（07 AreaCss useEffect：VOzbGW_trigger 右半注入），
+      // 不再注册任何 sidebar 槽位。
+
+      // ── Cordis 常驻：官方按钮已由官方包补丁支持常驻（window.__TCZ_HIDE_OFFICIAL_CORDIS 控制开关）──
+      // 开关状态同步到 window 变量（官方组件渲染时读取）；false=常驻，true=恢复官方逻辑
+      // 官方包补丁已监听 'tcz:cordis-visibility' 事件 → 切换后立即重渲染（无需刷新页面）
+      function applyCordisEntryFlag() {
+        try { window.__TCZ_HIDE_OFFICIAL_CORDIS = !cordisEntry } catch (e) { /* 忽略 */ }
+        try { window.dispatchEvent(new Event('tcz:cordis-visibility')) } catch (e) { /* 忽略 */ }
+      }
+      applyCordisEntryFlag()
+
+      function ThemePage() {
+        // main（lastSavedAt/floatVisible 双发）+ float（floatModules）
+        const { floatVisible, floatModules, lastSavedAt } = useStore(['main', 'float'])
+        return React.createElement('div', { style: { maxWidth: '720px', padding: '8px 4px' } },
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px' } },
+            React.createElement('h2', { style: { fontSize: '18px', margin: 0 } }, '主题设置'),
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+              React.createElement('button', { type: 'button', onClick: resetFloatPos, style: { padding: '6px 14px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-1)', fontSize: '13px' } }, '↺ 复位浮窗'),
+              React.createElement('button', { type: 'button', onClick: () => setFloatVisible(!floatVisible), style: { padding: '6px 14px', borderRadius: '6px', cursor: 'pointer', border: '1px solid var(--dsw-alias-border-l2)', background: floatVisible ? 'var(--dsw-alias-brand-primary)' : 'var(--dsw-alias-bg-layer-1)', color: floatVisible ? '#fff' : 'var(--dsw-alias-label-primary)' } }, floatVisible ? '关闭浮窗' : '↗ 打开浮窗'),
+            ),
+          ),
+          React.createElement(FloatModulePicker, null),
+          MODULES.map((m) => React.createElement(Section, { key: m.id, title: m.title }, React.createElement(ModuleContent, { id: m.id }))),
+          // 全局恢复默认（v0.9.16）：预设板块下面、不属于任何板块、居中；三级确认（文本依次：确认全局恢复默认 → 确认吗？你的全部自定义设置都会消失），取消按钮换行到下面
+          React.createElement('div', { style: { marginTop: '14px', borderTop: '1px solid var(--dsw-alias-border-l1)', paddingTop: '12px' } },
+            React.createElement(TripleConfirmButton, {
+              label: '全局恢复默认', confirmLabel1: '确认全局恢复默认', confirmLabel2: '确认吗？你的全部自定义设置都会消失',
+              onConfirm: resetAllSettings, resetKey: 'reset-all-settings',
+            }),
+          ),
+          React.createElement('div', { style: { marginTop: '12px', fontSize: '11px', color: 'var(--dsw-alias-label-caption)', fontVariantNumeric: 'tabular-nums' } },
+            '最近保存: ' + (lastSavedAt ? new Date(lastSavedAt).toLocaleTimeString() : '—'),
+          ),
+        )
+      }
+      // ════════ 14_composer.js ════════
+      // ┌─ 片段 14_composer ──────────────────────────────
+      // │ 职责：输入区子版块（ComposerEditor：统计条完全展开 + 统计条子项开关 + 命令子版块）
+      // │       + 输入区板块直属行 ComposerHeightRow（输入框高度固定，底色下、子版块外）
+      // │       + 统计条渲染组件 ComposerStatsLine（复刻官方 StatsLine，9 项独立开关）
+      // │ 定义：ComposerEditor / ComposerHeightRow / ComposerStatsLine；挂载：composer children（BackgroundModule），ComposerStatsLine 注册到 conversation.composer.dock
+      // │ 测试：高度固定开关锁 N 行；完全展开去省略号；子项开关控制统计条各段显隐；命令背景两项设置/恢复
+      // ── 统计条纯函数（复刻官方 StatsLine，见 dsh-client-ui-conversation 源码）──
+      function statsFormatTokens(n) {
+        const scaled = (v) => v >= 100 ? String(Math.round(v)) : String(Math.round(v * 10) / 10)
+        if (n < 1e3) return String(n)
+        if (n < 1e6) return scaled(n / 1e3) + 'K'
+        return scaled(n / 1e6) + 'M'
+      }
+      function statsFormatDuration(ms) {
+        const s = ms / 1e3
+        if (s < 60) return Math.round(s * 10) / 10 + 's'
+        const whole = Math.round(s)
+        return Math.floor(whole / 60) + 'm' + (whole % 60) + 's'
+      }
+      function statsFormatTps(tps) {
+        const c = Math.max(0, tps)
+        return c >= 10 ? String(Math.round(c)) : String(Math.round(c * 10) / 10)
+      }
+      function statsUsageOutputTokens(usage) {
+        if (typeof usage !== 'object' || usage === null) return null
+        const v = usage.outputTokens
+        return typeof v === 'number' && Number.isFinite(v) && v >= 0 ? v : null
+      }
+      function statsAssistantReading(node) {
+        const timing = node.timing
+        return {
+          ttftMs: timing !== void 0 && timing.stepStartTime !== null && timing.firstTokenTime !== null ? Math.max(0, timing.firstTokenTime - timing.stepStartTime) : null,
+          decodeMs: timing !== void 0 && timing.firstTokenTime !== null ? Math.max(0, timing.completedTime - timing.firstTokenTime) : null,
+          outputTokens: statsUsageOutputTokens(node.usage)
+        }
+      }
+      function statsDerive(nodes) {
+        const turns = new Set()
+        let steps = 0, llmMs = 0, toolMs = 0, ttftMs = 0, ttftSteps = 0, decodeMs = 0, decodeTokens = 0
+        for (const node of nodes) {
+          if (node.kind === 'tool-result') {
+            if (node.callTime !== null) toolMs += Math.max(0, node.time - node.callTime)
+            continue
+          }
+          if (node.kind !== 'assistant') continue
+          turns.add(node.turn)
+          steps += 1
+          if (node.timing !== void 0 && node.timing.stepStartTime !== null) llmMs += Math.max(0, node.timing.completedTime - node.timing.stepStartTime)
+          const r = statsAssistantReading(node)
+          if (r.ttftMs !== null) { ttftMs += r.ttftMs; ttftSteps += 1 }
+          if (r.decodeMs !== null && r.outputTokens !== null) { decodeMs += r.decodeMs; decodeTokens += r.outputTokens }
+        }
+        return { turns: turns.size, steps, llmMs, toolMs, ttftMs, ttftSteps, decodeMs, decodeTokens }
+      }
+      function statsBilledInput(usage) {
+        return usage.uncachedInputTokens + usage.cacheReadTokens + usage.cacheWriteTokens
+      }
+      // 统计条渲染组件：注册到 conversation.composer.dock，slot 注入 useProjection/useSession。
+      // 复刻官方 StatsLine，但 9 项独立按 composerStatsItems 开关渲染（官方把 LLM+工具调用、首token+tok/s 各合并一组，无法 CSS 拆分，故整体接管）。
+      function ComposerStatsLine({ useSession, useProjection }) {
+        // 只订阅 stats 通道（统计条开关）：颜色/透明度/背景拖动（main）不重渲染统计条
+        const { composerStatsExpanded, composerStatsItems } = useStore(['stats'])
+        // 统计条始终由我们渲染（官方隐藏，v0.9.19 调整）：9 项子开关在不展开时也生效；
+        // 不展开 = 官方外观（block/居中/单行省略 + hover 完整内容提示，等效官方 Tooltip）；展开 = 完整展开居中
+        const settledNodes = useSession ? useSession((s) => s.chat.legacy.nodes) : null
+        const usage = useProjection ? useProjection('tokenUsage') : void 0
+        const projected = useProjection ? useProjection('sessionStats') : void 0
+        const stats = projected || statsDerive(settledNodes || [])
+        const items = []
+        if (stats.steps > 0) {
+          if (composerStatsItems.turns) items.push(stats.turns + ' 轮')
+          if (composerStatsItems.steps) items.push(stats.steps + ' 步')
+          if (composerStatsItems.llm && stats.llmMs > 0) items.push('LLM ' + statsFormatDuration(stats.llmMs))
+          if (composerStatsItems.tool && stats.toolMs > 0) items.push('工具调用 ' + statsFormatDuration(stats.toolMs))
+          if (composerStatsItems.ttft && stats.ttftSteps > 0) items.push('首 token 平均 ' + statsFormatDuration(stats.ttftMs / stats.ttftSteps))
+          if (composerStatsItems.tps && stats.decodeMs > 0) items.push(statsFormatTps(stats.decodeTokens / (stats.decodeMs / 1e3)) + ' tok/s')
+        }
+        if (usage !== void 0 && (statsBilledInput(usage) > 0 || usage.outputTokens > 0)) {
+          if (composerStatsItems.cache) {
+            const denom = statsBilledInput(usage)
+            if (denom > 0) items.push('缓存命中 ' + Math.round(usage.cacheReadTokens / denom * 100) + '%')
+          }
+          if (composerStatsItems.input && statsBilledInput(usage) > 0) items.push('输入 ' + statsFormatTokens(statsBilledInput(usage)) + ' tok')
+          if (composerStatsItems.output && usage.outputTokens > 0) items.push('输出 ' + statsFormatTokens(usage.outputTokens) + ' tok')
+        }
+        if (items.length === 0) return null
+        const rootStyle = { textAlign: 'center', maxWidth: 'var(--dsh-chat-content-width)', boxSizing: 'border-box', width: '100%', padding: '4px calc(var(--dsh-composer-side-clearance) + 16px) 0px', color: 'var(--dsw-alias-label-tertiary)', whiteSpace: 'nowrap', textOverflow: 'ellipsis', margin: '0 auto', fontSize: '12px', lineHeight: '20px', display: 'block', overflow: 'hidden' }
+        if (composerStatsExpanded) {
+          rootStyle.whiteSpace = 'nowrap'
+          rootStyle.overflow = 'visible'
+          rootStyle.textOverflow = 'clip'
+          rootStyle.display = 'flex'
+          rootStyle.justifyContent = 'center'
+          rootStyle.alignItems = 'baseline'
+        }
+        const sepStyle = { color: 'var(--dsw-alias-separator-primary)', margin: '0 10px', flex: composerStatsExpanded ? '0 0 auto' : null }
+        const itemStyle = composerStatsExpanded ? { flex: '0 0 auto' } : null
+        // 不展开（单行省略）时 hover 显示完整内容（等效官方 Tooltip：label = 完整 line）；展开时内容全显示无需提示
+        const lineText = items.join(' | ')
+        return React.createElement('div', { 'data-thmcz-stats': true, title: composerStatsExpanded ? undefined : lineText, style: rootStyle },
+          items.map((it, i) => React.createElement(React.Fragment, { key: i },
+            i > 0 ? React.createElement('span', { 'aria-hidden': true, style: sepStyle }, '|') : null,
+            React.createElement('span', { style: itemStyle }, it),
+          )),
+        )
+      }
+
+      // 输入区子版块：作为「输入区」区块的一部分（渲染在输入区卡片内部末尾），
+      // 顶部细分隔线与输入区背景内容分开。后续输入区新功能继续加在这里。
+      // 子版块：统计条（完全展开 + 9 项开关）/ 命令（「+」按钮背景 + 命令菜单背景 + 全部恢复官方默认）；
+      // 输入框高度为「输入区」板块直属行（ComposerHeightRow，渲染在底色下方、子版块外，见 BackgroundModule）
+      // memo 化（性能优化 2026-08-21）：自身订阅 store（composer 系列字段），store 变化时自行重渲染；memo 只防父级重渲染时无谓重复
+      const ComposerEditor = React.memo(function ComposerEditor() {
+        // main（固定高度/行数）+ stats（统计条开关）+ convBgs（命令按钮/菜单背景）
+        const { composerStatsExpanded, composerStatsItems, convBgs } = useStore(['main', 'stats'])
+        const itemDefs = [
+          { key: 'turns', label: '轮数' },
+          { key: 'steps', label: '步数' },
+          { key: 'llm', label: 'LLM 时长' },
+          { key: 'tool', label: '工具调用时长' },
+          { key: 'ttft', label: '首 token 平均' },
+          { key: 'tps', label: 'tok/s' },
+          { key: 'cache', label: '缓存命中' },
+          { key: 'input', label: '输入 token' },
+          { key: 'output', label: '输出 token' },
+        ]
+        const toggleItem = (key) => setComposerStatsItems({ ...composerStatsItems, [key]: !composerStatsItems[key] })
+        // 命令子板块：任一改动过才显示「全部恢复官方默认」（仿对话区 resetAllConvBgs，仅命令两项；含透明度非 0）
+        const cmdCustom = !!convBgs.addBtn || !!convBgs.cmdMenu || (convBgs.addBtnOpacity > 0) || (convBgs.cmdMenuOpacity > 0)
+        return React.createElement('div', { style: { marginTop: '8px', paddingTop: '10px', borderTop: '1px solid var(--dsw-alias-border-l1)' } },
+          // ── 统计条 ──
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap', marginBottom: '4px' } },
+            React.createElement('span', { style: { fontSize: '13px', fontWeight: 600, minWidth: '80px' } }, '统计条'),
+            // 开关仅勾选框触发（v0.9.20）
+            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' } },
+              React.createElement('input', { type: 'checkbox', style: { cursor: 'pointer' }, checked: !!composerStatsExpanded, onChange: (e) => setComposerStatsExpanded(e.target.checked) }),
+              React.createElement('span', null, '完全展开'),
+            ),
+          ),
+          React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: '6px 14px', marginBottom: '4px' } },
+            itemDefs.map((d) => React.createElement('div', { key: d.key, style: { display: 'flex', alignItems: 'center', gap: '5px', fontSize: '12px' } },
+              React.createElement('input', { type: 'checkbox', style: { cursor: 'pointer' }, checked: !!composerStatsItems[d.key], onChange: () => toggleItem(d.key) }),
+              React.createElement('span', null, d.label),
+            )),
+          ),
+          // ── 命令（「+」按钮背景 / 命令菜单背景 + 透明度 + 全部恢复官方默认）──
+          React.createElement('div', { style: { marginTop: '8px', paddingTop: '10px', borderTop: '1px solid var(--dsw-alias-border-l1)' } },
+            React.createElement('div', { style: { fontSize: '13px', fontWeight: 600, marginBottom: '6px' } }, '命令'),
+            ConvBgRow({ label: '命令按钮', value: convBgs.addBtn, onSet: (v) => setConvBg('addBtn', v), opacity: convBgs.addBtnOpacity == null ? 0 : convBgs.addBtnOpacity, onOpacity: (v) => setConvBg('addBtnOpacity', v), onReset: () => { setConvBg('addBtn', null); setConvBg('addBtnOpacity', 0) } }),
+            ConvBgRow({ label: '命令菜单', value: convBgs.cmdMenu, onSet: (v) => setConvBg('cmdMenu', v), opacity: convBgs.cmdMenuOpacity == null ? 0 : convBgs.cmdMenuOpacity, onOpacity: (v) => setConvBg('cmdMenuOpacity', v), onReset: () => { setConvBg('cmdMenu', null); setConvBg('cmdMenuOpacity', 0) } }),
+            cmdCustom
+              ? React.createElement('div', { style: { marginTop: '4px' } },
+                  React.createElement(ConfirmButton, {
+                    label: '全部恢复官方默认', confirmLabel: '全部确认恢复官方默认',
+                    onConfirm: resetCmdBgs, resetKey: cmdCustom, size: 'md',
+                  }),
+                )
+              : null,
+          ),
+        )
+      })
+
+      // 「输入区」板块直属行：输入框高度（固定高度开关 + 行数下拉），渲染在底色下方、子版块（统计条/命令）之外。
+      // 拆分自 ComposerEditor（2026-08-22 v0.9.11 用户定：输入框高度不属于子版块）。
+      // memo 化 + 订阅 main：固定高度/行数变化自行重渲染，父级重渲染不重复
+      const ComposerHeightRow = React.memo(function ComposerHeightRow() {
+        const { composerFixedHeight, composerRows } = useStore(['main'])
+        const rows = Math.max(1, Math.min(10, Math.round(composerRows || 4)))
+        return React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap', marginTop: '6px' } },
+          React.createElement('span', { style: { fontSize: '13px', fontWeight: 600, minWidth: '80px' } }, '输入框高度'),
+          // 开关仅勾选框触发（v0.9.20）
+          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px' } },
+            React.createElement('input', { type: 'checkbox', style: { cursor: 'pointer' }, checked: !!composerFixedHeight, onChange: (e) => setComposerFixedHeight(e.target.checked) }),
+            React.createElement('span', null, '固定高度'),
+          ),
+          composerFixedHeight
+            ? React.createElement('select', { value: String(rows), onChange: (e) => setComposerRows(parseInt(e.target.value, 10)), style: { padding: '4px 8px', borderRadius: '6px', border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-1)', fontSize: '12px' } },
+                Array.from({ length: 10 }, (_, i) => React.createElement('option', { key: i + 1, value: String(i + 1) }, (i + 1) + ' 行')),
+              )
+            : null,
+        )
+      })
+
+      // ════════ 15_borders.js ════════
+      // ┌─ 片段 15_borders ──────────────────────────────
+      // │ 职责：「框线」板块（v0.9.18）：所有 UI 默认边框/分隔线颜色 + 透明度，5 区域独立
+      // │ 定义：BordersModule；挂载：ModuleContent（13_boot，id='borders'，MODULES 在字体颜色上面）
+      // │ 测试：5 区域各自调色/透明度互不影响；只调透明度也可恢复；全部恢复官方默认
+      // 框线板块（「字体颜色」上面，用户定）：主界面（含侧边栏）/ Cordis 插件界面 / 输入区 / 设置界面 / 浮窗面板。
+      // 每行 = ConvBgRow（颜色 + 状态 + 恢复官方默认 + 透明度滑条，始终可用——官方默认色也可调透明度，CSS 用 color-mix 淡化官方色）。
+      // 透明度数值大=透明（语义同全局）。底部「全部恢复官方默认」：任一区域改动过才显示（仿对话区 resetAllConvBgs）
+      function BordersModule() {
+        const { borders } = useStore(['main'])
+        const defs = [
+          { id: 'main', label: '主界面' },
+          { id: 'cordis', label: 'Cordis 插件界面' },
+          { id: 'composer', label: '输入区' },
+          { id: 'details', label: '设置界面' },
+          { id: 'float', label: '浮窗面板' },
+        ]
+        const hasCustom = defs.some((d) => { const b = borders[d.id]; return b && (b.color || (b.opacity != null && b.opacity > 0)) })
+        // 色块默认显示（未设置时）用 00_constants 统一常量（与 buildBordersCss 同源）：
+        // 主界面/Cordis/输入区 = 淡灰、设置界面/浮窗面板 = 黑色
+        return React.createElement('div', null,
+          React.createElement('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)', marginBottom: '8px' } },
+            '所有界面默认边框与分隔线颜色 + 透明度（数值大=越透明），各区域独立调整'),
+          defs.map((d) => {
+            const b = borders[d.id] || {}
+            return React.createElement(ConvBgRow, { key: d.id, label: d.label, value: b.color, onSet: (v) => setBorder(d.id, { color: v }), opacity: b.opacity == null ? 0 : b.opacity, onOpacity: (v) => setBorder(d.id, { opacity: v }), onReset: () => setBorder(d.id, { color: null, opacity: 0 }), defaultSwatch: (d.id === 'details' || d.id === 'float') ? BORDER_DEFAULT_DARK : BORDER_DEFAULT_LIGHT, defaultText: d.id === 'float' ? '默认' : undefined })
+          }),
+          hasCustom
+            ? React.createElement('div', { style: { marginTop: '4px' } },
+                React.createElement(ConfirmButton, {
+                  label: '全部恢复官方默认', confirmLabel: '全部确认恢复官方默认',
+                  onConfirm: resetAllBorders, resetKey: hasCustom, size: 'md',
+                }),
+              )
+            : null,
+        )
+      }
+
+    },
+  }
+    exports.apply = plugin.apply
+    exports.inject = ["slots", "theme"]
+    return module.exports
+  },
+})