@ash-qw/dsh-theme-prts 2.5.5 → 2.6.1

package/src/client/theme-controller-v2.js

@@ -1,4 +1,4 @@
-import { createCursorAdapter } from './cursor-adapter.js'
+import { createCursorAdapter as createFollowerCursorAdapter } from './cursor-follower.js'
 import { normalizePreferences } from './preferences.js'
 
 export const SCHEME_COMMIT_PROGRESS = .15
@@ -19,7 +19,8 @@ const ROOT_ATTRIBUTES = [
   'data-prts-background-mode',
 ]
 const SESSION_FLOW_COLOR_PROPERTIES = {
-  '--prts-corner-color': 'cornerColor',
+  '--prts-corner-color-dark': 'cornerColor',
+  '--prts-corner-color-light': 'cornerColorLight',
   '--prts-session-flow-back': 'sessionFlowColorBack',
   '--prts-session-flow-core': 'sessionFlowColorCore',
   '--prts-session-flow-front': 'sessionFlowColorFront',
@@ -79,7 +80,7 @@ export function createThemeController({ document, window, cssText, service, curs
     return { apply() {}, sync() {}, refresh() {}, setTheme() {}, beginThemeTransition() { return gesture }, toggle() {}, dispose() {} }
   }
 
-  const cursor = createCursorAdapter({ document, window, assets: cursorAssets })
+  const cursor = createFollowerCursorAdapter({ document, window, assets: cursorAssets })
   const root = document.documentElement
   let style
   let disposed = false
@@ -760,13 +761,13 @@ export function createThemeController({ document, window, cssText, service, curs
       root.dataset.prtsTexture = preferences.texture
       root.dataset.prtsGlass = preferences.glass
       root.dataset.prtsMotion = preferences.motion
-      root.dataset.prtsCursor = preferences.cursor
+      root.dataset.prtsCursor = preferences.cursor === 'prts-follower' ? 'prts' : preferences.cursor
       root.dataset.prtsParticlePattern = 'orthogonal'
       root.dataset.prtsSessionFlow = preferences.sessionFlow ? 'on' : 'off'
       root.dataset.prtsSessionGlow = preferences.sessionGlow ? 'on' : 'off'
       root.dataset.prtsSessionFlowPalette = preferences.sessionFlowPalette
       root.dataset.prtsSessionFlowSpeed = String(preferences.sessionFlowSpeed)
-      for (const [property, key] of Object.entries(SESSION_FLOW_COLOR_PROPERTIES)) root.style.setProperty(property, preferences[key])
+      for (const [property, key] of Object.entries(SESSION_FLOW_COLOR_PROPERTIES)) root.style.setProperty(property, preferences.cornerColorLinked && (key === 'cornerColor' || key === 'cornerColorLight') ? preferences[preferences.cornerColorSource === 'light' ? 'cornerColorLight' : 'cornerColor'] : preferences[key])
       root.dataset.prtsConversationStyle = preferences.conversationStyle
       root.toggleAttribute('data-prts-baker-loading', preferences.bakerLoading === true)
       root.dataset.prtsBackgroundMode = preferences.backgroundMode

package/src/client/theme-controller.js

@@ -14,7 +14,8 @@ const ROOT_ATTRIBUTES = [
   'data-prts-conversation-style',
 ]
 const SESSION_FLOW_COLOR_PROPERTIES = {
-  '--prts-corner-color': 'cornerColor',
+  '--prts-corner-color-dark': 'cornerColor',
+  '--prts-corner-color-light': 'cornerColorLight',
   '--prts-session-flow-back': 'sessionFlowColorBack',
   '--prts-session-flow-core': 'sessionFlowColorCore',
   '--prts-session-flow-front': 'sessionFlowColorFront',
@@ -124,7 +125,7 @@ export function createThemeController({ document, window, cssText, service }) {
       root.dataset.prtsSessionGlow = preferences.sessionGlow ? 'on' : 'off'
       root.dataset.prtsSessionFlowPalette = preferences.sessionFlowPalette
       root.dataset.prtsSessionFlowSpeed = String(preferences.sessionFlowSpeed)
-      for (const [property, key] of Object.entries(SESSION_FLOW_COLOR_PROPERTIES)) root.style.setProperty(property, preferences[key])
+      for (const [property, key] of Object.entries(SESSION_FLOW_COLOR_PROPERTIES)) root.style.setProperty(property, preferences.cornerColorLinked && (key === 'cornerColor' || key === 'cornerColorLight') ? preferences[preferences.cornerColorSource === 'light' ? 'cornerColorLight' : 'cornerColor'] : preferences[key])
       root.dataset.prtsConversationStyle = preferences.conversationStyle
       refresh()
     },

package/src/client/theme-settings-workbench.js

@@ -1,3 +1,4 @@
+import { mountPageControls } from './page-controls.js'
 import { themeTransferMarkup, mountThemeTransfer } from './theme-transfer-panel.js'
 import { backgroundMarkup, mountBackgroundSettings } from './custom-background.js'
 import { avatarMarkup, mountAvatarSettings } from './custom-avatar.js'
@@ -13,8 +14,14 @@ const SETTINGS_FOCUSABLE = [
   '[tabindex]:not([tabindex="-1"])',
 ].join(',')
 
+const CURSOR_DESCRIPTIONS = {
+  system: '使用系统默认外观，由浏览器与系统处理移动，不播放 PRTS 点击动画。',
+  prts: '由系统移动 PRTS 光标，页面繁忙时仍较跟手。小控件播放完整点击动画，中等容器仅显示按下与恢复，大容器保持静态。',
+  'prts-follower': '由页面绘制并跟随鼠标，普通区域均可播放 PRTS 按压动画。页面繁忙时可能跟随延迟；文字、缩放等区域显示对应形态。',
+}
+
 const COMMON_CONTROLS = [
-  ['cursor', 'PRTS 光标', [['system', '关闭'], ['prts', '开启']]],
+  ['cursor', '光标模式', [['system', '系统光标'], ['prts', 'PRTS 原生光标'], ['prts-follower', 'PRTS 跟随光标（实验）']]],
   ['railDefaultHidden', '默认隐藏导航栏', [['false', '关闭'], ['true', '开启']]],
   ['motion', '动态效果', []],
   ['sessionFlow', '当前会话流线', [['false', '关闭'], ['true', '开启']]],
@@ -23,9 +30,9 @@ const COMMON_CONTROLS = [
 ]
 
 const SESSION_FLOW_COLOR_CONTROLS = [
-  ['sessionFlowColorBack', '后层'],
-  ['sessionFlowColorCore', '中层'],
   ['sessionFlowColorFront', '前层'],
+  ['sessionFlowColorCore', '中层'],
+  ['sessionFlowColorBack', '后层'],
 ]
 
 const PARTICLE_OPTIONS = [
@@ -62,10 +69,14 @@ function settingButtons(key, label, options) {
       : key === 'sessionFlowPalette'
         ? '<small data-prts-setting-note>同时适配日间与夜间模式</small>'
       : ''
-  if (['heroContrast', 'composerGlass', 'bakerLoading', 'motion', 'cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem', 'sessionPreview', 'aiToolsEnabled', 'previewOngoing', 'previewTools', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning'].includes(key)) return `<div data-prts-setting-row="${key}">
+  if (['heroContrast', 'composerGlass', 'bakerLoading', 'motion', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem', 'sessionPreview', 'aiToolsEnabled', 'previewOngoing', 'previewTools', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning'].includes(key)) return `<div data-prts-setting-row="${key}">
     <span><strong>${label}</strong>${note}</span>
     <button type="button" role="switch" aria-label="${label}" aria-checked="false" data-prts-setting-switch="${key}" ${key === 'cursor' ? 'data-prts-cursor-switch' : ''}><span aria-hidden="true"></span></button>
   </div>`
+  if (key === 'cursor') return `<label data-prts-setting-row="cursor">
+    <span><strong>光标模式</strong><small id="prts-cursor-description" data-prts-setting-note data-prts-cursor-description></small></span>
+    <select data-prts-cursor-mode aria-label="光标模式" aria-describedby="prts-cursor-description">${options.map(([value,text])=>`<option value="${value}" data-description="${CURSOR_DESCRIPTIONS[value]}">${text}</option>`).join('')}</select>
+  </label>`
   const sample = value => key === 'sessionFlowPalette'
     ? `<i data-prts-option-sample="${key}" data-prts-option-sample-value="${value}" aria-hidden="true"></i>`
     : ''
@@ -88,11 +99,11 @@ function sessionFlowPreviewMarkup() {
     ['core', 'M 3 24 C 30 35 61 7 94 23 C 124 37 148 7 177 20'],
     ['front', 'M 3 18 C 34 4 66 30 96 12 C 125 -1 148 30 177 24'],
   ]
-  return `<svg data-prts-session-flow-preview viewBox="0 0 180 42" aria-label="三色流线预览" role="img">
+  return `<svg data-prts-session-flow-preview viewBox="0 0 180 42" preserveAspectRatio="none" aria-label="三色流线预览" role="img">
     ${filaments.map(([strand, path]) => `<g data-prts-session-flow-preview-filament="${strand}">
-      <path data-prts-session-flow-preview-layer="halo" d="${path}"></path>
-      <path data-prts-session-flow-preview-layer="body" d="${path}"></path>
-      <path data-prts-session-flow-preview-layer="core" d="${path}"></path>
+      <path vector-effect="non-scaling-stroke" data-prts-session-flow-preview-layer="halo" d="${path}"></path>
+      <path vector-effect="non-scaling-stroke" data-prts-session-flow-preview-layer="body" d="${path}"></path>
+      <path vector-effect="non-scaling-stroke" data-prts-session-flow-preview-layer="core" d="${path}"></path>
     </g>`).join('')}
   </svg>`
 }
@@ -171,14 +182,14 @@ export function themeSettingsMarkup() {
           <section data-prts-settings-common data-prts-settings-section="interaction" role="tabpanel" id="prts-page-interaction" aria-labelledby="prts-tab-interaction" tabindex="0" hidden>
             <div data-prts-settings-common-grid>
               ${COMMON_CONTROLS.filter(([key]) => ['cursor', 'railDefaultHidden', 'motion'].includes(key)).map(([key, label, options]) => settingButtons(key, label, options)).join('')}
-              <div data-prts-setting-row="cornerColor"><span><strong>交互提示框颜色</strong><small data-prts-setting-note>部分按钮和卡片的四角提示颜色，危险操作保持红色。</small></span><div data-prts-corner-presets role="group" aria-label="交互提示框预设颜色">${[['黄色','#f0c800'],['白色','#ffffff'],['青色','#65ddb0'],['蓝色','#6eb7f3'],['紫色','#b487ef']].map(([name,color]) => `<button type="button" data-prts-corner-preset="${color}" aria-label="${name}" title="${name}" aria-pressed="false" style="--swatch:${color}"><i aria-hidden="true"></i></button>`).join('')}<button type="button" data-prts-corner-custom title="选择自定义颜色"><i data-prts-corner-preview aria-hidden="true"></i><span>自定义</span></button><input type="color" data-prts-corner-color aria-label="交互提示框颜色" value="#f0c800" hidden></div></div>
+              <div data-prts-setting-row="cornerColor"><span><span data-prts-corner-heading><strong>交互提示框颜色</strong><span data-prts-corner-modes role="group" aria-label="编辑配色模式"><button type="button" data-prts-corner-mode="light" aria-pressed="false">☀ 日间</button><button type="button" data-prts-corner-mode="dark" aria-pressed="false">☾ 夜间</button></span><button type="button" data-prts-corner-sync role="switch" aria-checked="false" title="开启后，日间和夜间共用颜色"><span>日夜共用</span><i aria-hidden="true"></i></button></span><small data-prts-setting-note>部分按钮和卡片的四角提示颜色，危险操作保持红色。</small><small data-prts-setting-note>开启后，日夜都使用当前选定模式的配色，修改也保存到该模式；关闭后各用各的，另一套配色不变。</small></span><div data-prts-corner-presets role="group" aria-label="交互提示框预设颜色">${[['黄色','#f0c800'],['白色','#ffffff'],['青色','#65ddb0'],['蓝色','#6eb7f3'],['紫色','#b487ef']].map(([name,color]) => `<button type="button" data-prts-corner-preset="${color}" aria-label="${name}" title="${name}" aria-pressed="false" style="--swatch:${color}"><i aria-hidden="true"></i></button>`).join('')}<span data-prts-corner-picker><button type="button" data-prts-corner-custom aria-expanded="false" title="选择自定义颜色"><i data-prts-corner-preview aria-hidden="true"></i><span>自定义</span></button><input type="color" data-prts-corner-color aria-label="交互提示框颜色" value="#f0c800" tabindex="-1"><span data-prts-color-editor hidden role="group" aria-label="自定义提示框颜色"><span data-prts-color-editor-title>自定义颜色</span><span data-prts-color-sample></span><label data-prts-color-hex-label>HEX<input data-prts-color-hex aria-label="HEX 颜色" maxlength="7" spellcheck="false"></label><label data-prts-color-channel><span>R</span><input type="range" min="0" max="255" step="1" data-prts-color-channel-index="0" aria-label="R 通道"><output>0</output></label><label data-prts-color-channel><span>G</span><input type="range" min="0" max="255" step="1" data-prts-color-channel-index="1" aria-label="G 通道"><output>0</output></label><label data-prts-color-channel><span>B</span><input type="range" min="0" max="255" step="1" data-prts-color-channel-index="2" aria-label="B 通道"><output>0</output></label><span data-prts-color-actions><button type="button" data-prts-color-cancel>取消</button><button type="button" data-prts-color-apply>应用颜色</button></span></span></span></div></div>
             </div>
           </section>
           <section data-prts-settings-section="ai-tools" data-prts-ai-tools role="tabpanel" id="prts-page-ai-tools" aria-labelledby="prts-tab-ai-tools" tabindex="0" hidden>
             <div data-prts-preview-settings><div data-prts-preview-master>
-            ${previewSetting('aiToolsEnabled', '允许 AI 定制主题', '默认开启 · 共 5 个工具 · 影响此 DSH 实例的所有会话')}
+            ${previewSetting('aiToolsEnabled', '允许 AI 定制主题', '默认开启 · 12 个定制工具，另有只读状态入口 · 影响此 DSH 实例的所有会话')}
             </div></div>
-            <p>开启后，AI 可以通过工具调整粒子徽记和 Baker 头像。关闭后，后续模型请求不再提供这些工具，手动设置不受影响；已有对话中的工具记录不会删除。</p>
+            <p>开启后，AI 可以通过工具调整粒子徽记、Baker 头像和背景图片、保护区域、背景模式、遮罩与材质，以及导入、导出主题配置。关闭后停止提供定制工具，仅保留只读状态入口，提示 AI 请你手动开启开关，不自行改文件绕过。手动设置不受影响；已有对话中的工具记录不会删除。</p>
             <section>
               <h3>粒子徽记 <small>3 个工具</small></h3>
               <p>将会话中的图片制作成粒子徽记，用于新会话页面或正文轮换。</p>
@@ -200,6 +211,29 @@ export function themeSettingsMarkup() {
                 <dt><code>prts_avatar_apply</code></dt><dd>替换用户或 AI 头像、基于现有原图重新裁剪，或恢复默认头像。</dd>
               </dl><p>单图最大 5 MB、2500 万像素；裁剪支持 1～4 倍缩放。修改立即影响此实例所有会话，不会自动切换会话样式。替换后不保留旧原图；恢复默认会删除自定义原图。</p></details>
             </section>
+            <section>
+              <h3>会话背景 <small>4 个工具</small></h3>
+              <p>使用上传、AI 生成或搜索下载的图片设置背景，也可以调整重要区域保护、背景模式、遮罩和材质。</p>
+              <ol><li>提供图片，或让具备相应工具的 AI 生成、寻找图片。</li><li>让 AI 将图片设为完整背景、左侧边栏背景或会话正文背景，再启用对应模式。</li></ol>
+              <blockquote>“找一张适合阅读的背景图，设为完整背景，尽量保住图中的人物。”</blockquote>
+              <details><summary>工具说明与限制</summary><dl>
+                <dt><code>prts_background_inspect</code></dt><dd>查看背景、模式、遮罩、材质及会话可用图片。</dd>
+                <dt><code>prts_background_preview</code></dt><dd>预览候选或已保存图片的日夜遮罩、裁剪效果，不修改主题；不包含气泡、文字和毛玻璃。</dd>
+                <dt><code>prts_background_apply</code></dt><dd>替换或移除图片，设置或清除保护区域。</dd>
+                <dt><code>prts_background_configure</code></dt><dd>切换默认、分区或完整背景，调整遮罩及五个区域的模糊度、底色不透明度。</dd>
+              </dl><p>支持 PNG、JPEG、WebP、AVIF，单图最大 10 MB、4000 万像素。图片在同一实例共享，模式、遮罩和材质在同一 profile 同步。替换或移除不保留旧图；切回默认背景会保留素材。图片列表按最近出现排序，并标记同名图片的最近版本。生成与搜索需要会话已有相应工具，下载或生成的本地图片可先用 read_image 读取，无需重新上传。工具不会自动启用主题总开关。</p></details>
+            </section>
+            <section>
+              <h3>主题导入与导出 <small>3 个工具</small></h3>
+              <p>在会话中导出主题文件，或上传主题文件，让 AI 先检查内容再导入。</p>
+              <blockquote>“导出当前主题，包含素材。” “检查这个主题文件，告诉我会覆盖哪些设置。”</blockquote>
+              <details><summary>工具说明与限制</summary><dl>
+                <dt><code>prts_theme_export</code></dt><dd>导出可下载的主题附件，默认包含背景、头像和徽记，也可仅导出设置。</dd>
+                <dt><code>prts_theme_import_preview</code></dt><dd>预检文件，列出配置变化、素材覆盖范围和无法保留的字段，不修改主题。</dd>
+                <dt><code>prts_theme_import</code></dt><dd>使用预检结果导入，先保存备份附件；失败时尝试回退已写入的素材。</dd>
+              </dl><p>与设置界面文件互通，最大 160 MB。完整导入会清理被替换的旧背景和头像，并为自定义徽记生成新草稿；草稿约 200 份时清理较旧且未受保护的记录，正在使用的徽记受保护。预检 15 分钟内有效，仅限当前会话，配置发生变化后需重新预检。导入可能关闭主题或 AI 工具，请先核对变化；需要恢复时可重新导入备份文件。</p></details>
+            </section>
+            <details><summary>工具关闭时的提示</summary><p><code>prts_theme_status</code> 始终可用，仅报告开关状态和手动开启位置，不读取素材、不修改配置。AI 应先检查此状态；关闭时先提醒你开启，不通过脚本、接口或文件编辑绕过开关。</p></details>
           </section>
           <section data-prts-settings-section="assistance" role="tabpanel" id="prts-page-assistance" aria-labelledby="prts-tab-assistance" tabindex="0" hidden>
             <section data-prts-preview-settings>
@@ -285,6 +319,35 @@ export function createThemeSettingsOverlay({
   const nativeModal = typeof panel?.showModal === 'function' && typeof panel?.close === 'function'
   let isOpen = false
   let previousFocus
+  let colorDraft = '#f0c800'
+  function closeColorEditor(restoreFocus = false) {
+    const editor = panel?.querySelector('[data-prts-color-editor]')
+    if (!editor || editor.hidden) return
+    editor.hidden = true
+    panel.querySelector('[data-prts-corner-custom]').setAttribute('aria-expanded', 'false')
+    onPreferencePreview(cornerKey(), currentPreferences[cornerKey()])
+    if (restoreFocus) panel.querySelector('[data-prts-corner-custom]').focus()
+  }
+  function renderColorDraft() {
+    const editor = panel.querySelector('[data-prts-color-editor]')
+    editor.querySelector('[data-prts-color-sample]').style.background = colorDraft
+    const hex = editor.querySelector('[data-prts-color-hex]')
+    hex.value = colorDraft.toUpperCase()
+    hex.removeAttribute('aria-invalid')
+    const channels = [1, 3, 5].map(start => parseInt(colorDraft.slice(start, start + 2), 16))
+    for (const slider of editor.querySelectorAll('[data-prts-color-channel-index]')) {
+      const index = Number(slider.dataset.prtsColorChannelIndex)
+      slider.value = channels[index]
+      slider.nextElementSibling.value = channels[index]
+      const end = [...channels], start = [...channels]
+      start[index] = 0; end[index] = 255
+      slider.style.background = 'linear-gradient(to right,rgb(' + start.join(',') + '),rgb(' + end.join(',') + '))'
+    }
+  }
+  let cornerEditMode = 'dark'
+  const cornerMode = () => currentPreferences?.cornerColorLinked ? currentPreferences.cornerColorSource : cornerEditMode
+  const cornerKey = () => cornerMode() === 'light' ? 'cornerColorLight' : 'cornerColor'
+  const cornerCustomKey = () => cornerMode() === 'light' ? 'cornerCustomColorLight' : 'cornerCustomColor'
   let currentPreferences
   let currentStatus
   let currentPersistence = { phase: 'idle', revision: 0 }
@@ -342,6 +405,8 @@ export function createThemeSettingsOverlay({
     const value = Boolean(next)
     if (value === isOpen) return isOpen
     if (!value) {
+      closeColorEditor()
+      if (currentPreferences) onPreferencePreview(cornerKey(), currentPreferences[cornerKey()])
       commitParticleTraversalSpeed()
       commitSessionFlowSpeed()
       commitSessionFlowColors()
@@ -351,6 +416,8 @@ export function createThemeSettingsOverlay({
     document.documentElement.toggleAttribute('data-prts-settings-open', isOpen)
     panel.setAttribute('aria-hidden', String(!isOpen))
     if (isOpen) {
+      cornerEditMode = document.documentElement.getAttribute('data-prts-scheme') === 'light' ? 'light' : 'dark'
+      renderState()
       previousFocus = document.activeElement
       onOpen()
       showPanel()
@@ -532,10 +599,18 @@ export function createThemeSettingsOverlay({
 
   function renderState() {
     if (!panel || !currentPreferences) return
+    panel.querySelector('[data-prts-corner-modes]').hidden = currentPreferences.cornerColorLinked
+    panel.querySelector('[data-prts-corner-sync]').setAttribute('aria-checked', String(currentPreferences.cornerColorLinked))
+    for (const mode of panel.querySelectorAll('[data-prts-corner-mode]')) mode.setAttribute('aria-pressed', String(mode.dataset.prtsCornerMode === cornerEditMode))
     const cornerColor = panel.querySelector('[data-prts-corner-color]')
-    if (cornerColor) cornerColor.value = currentPreferences.cornerCustomColor
-    panel.querySelector('[data-prts-corner-preview]')?.style.setProperty('--swatch', currentPreferences.cornerCustomColor)
-    for (const preset of panel.querySelectorAll('[data-prts-corner-preset]')) preset.setAttribute('aria-pressed', String(preset.dataset.prtsCornerPreset === currentPreferences.cornerColor))
+    if (cornerColor) cornerColor.value = currentPreferences[cornerCustomKey()]
+    panel.querySelector('[data-prts-corner-preview]')?.style.setProperty('--swatch', currentPreferences[cornerCustomKey()])
+    const customButton = panel.querySelector('[data-prts-corner-custom]')
+    const customApplied = currentPreferences[cornerKey()] === currentPreferences[cornerCustomKey()]
+    customButton.setAttribute('aria-pressed', String(customApplied))
+    customButton.title = customApplied ? '自定义颜色已应用，点击编辑' : '选择自定义颜色'
+    customButton.querySelector('span').textContent = '自定义'
+    for (const preset of panel.querySelectorAll('[data-prts-corner-preset]')) preset.setAttribute('aria-pressed', String(preset.dataset.prtsCornerPreset === currentPreferences[cornerKey()]))
     for (const toggle of panel.querySelectorAll('[data-prts-setting-switch]')) {
       const key = toggle.dataset.prtsSettingSwitch
       const enabled = key === 'cursor' ? currentPreferences.cursor === 'prts'
@@ -544,6 +619,10 @@ export function createThemeSettingsOverlay({
       toggle.setAttribute('aria-checked', String(enabled))
       toggle.classList.toggle('is-active', enabled)
     }
+    const cursorSelect = panel.querySelector('[data-prts-cursor-mode]')
+    if (cursorSelect) cursorSelect.value = currentPreferences.cursor
+    const cursorDescription = panel.querySelector('[data-prts-cursor-description]')
+    if (cursorDescription) cursorDescription.textContent = CURSOR_DESCRIPTIONS[currentPreferences.cursor]
     const replyLimitSelect = panel.querySelector('[data-prts-preview-reply-limit]')
     if (replyLimitSelect) replyLimitSelect.value = String(currentPreferences.previewReplyLimit)
     const replyLimitRow = panel.querySelector('[data-prts-setting-row="previewReplyLimit"]')
@@ -628,10 +707,29 @@ export function createThemeSettingsOverlay({
 
   function onPanelClick(event) {
     if (event.target === panel) { setOpen(false); return }
+    if (!event.target?.closest?.('[data-prts-corner-picker]')) closeColorEditor()
     const target = event.target?.closest?.('button')
     if (!target) return
-    if (target.hasAttribute('data-prts-corner-custom')) { panel.querySelector('[data-prts-corner-color]').click(); return }
-    if (target.hasAttribute('data-prts-corner-preset')) { onPreferenceChange('cornerColor', target.dataset.prtsCornerPreset); return }
+    if (target.hasAttribute('data-prts-corner-mode')) { onPreferencePreview(cornerKey(), currentPreferences[cornerKey()]); cornerEditMode = target.dataset.prtsCornerMode; renderState(); return }
+    if (target.hasAttribute('data-prts-corner-sync')) { if (currentPreferences.cornerColorLinked) cornerEditMode = currentPreferences.cornerColorSource; onPreferenceChange('cornerColorLink', currentPreferences.cornerColorLinked ? false : cornerEditMode); return }
+    if (target.hasAttribute('data-prts-color-cancel')) { closeColorEditor(true); return }
+    if (target.hasAttribute('data-prts-color-apply')) {
+      if (panel.querySelector('[data-prts-color-hex]').getAttribute('aria-invalid') === 'true') return
+      onPreferenceChange(cornerCustomKey(), colorDraft); closeColorEditor(true); return
+    }
+    if (target.hasAttribute('data-prts-corner-custom')) {
+      const editor = panel.querySelector('[data-prts-color-editor]')
+      if (!editor.hidden) { closeColorEditor(); return }
+      colorDraft = currentPreferences[cornerCustomKey()]
+      renderColorDraft(); editor.hidden = false
+      editor.removeAttribute('data-open-below')
+      const scroller = panel.querySelector('[data-prts-theme-settings-scroll]')
+      if (editor.getBoundingClientRect().top < (scroller?.getBoundingClientRect().top ?? 0)) editor.setAttribute('data-open-below', '')
+      target.setAttribute('aria-expanded', 'true')
+      editor.querySelector('[data-prts-color-hex]').focus()
+      return
+    }
+    if (target.hasAttribute('data-prts-corner-preset')) { onPreferenceChange(cornerKey(), target.dataset.prtsCornerPreset); return }
     if (target.hasAttribute('data-prts-settings-jump')) {
       selectSection(target.dataset.prtsSettingsJump)
       return
@@ -670,7 +768,20 @@ export function createThemeSettingsOverlay({
 
   function onPanelInput(event) {
     const target = event.target
-    if (target?.matches?.('[data-prts-corner-color]')) { onPreferencePreview('cornerColor', target.value); return }
+    if (target?.matches?.('[data-prts-color-channel-index], [data-prts-color-hex]')) {
+      if (target.hasAttribute('data-prts-color-hex')) {
+        const value = target.value.trim()
+        if (!/^#?[0-9a-f]{6}$/i.test(value)) { target.setAttribute('aria-invalid', 'true'); return }
+        colorDraft = (value.startsWith('#') ? value : '#' + value).toLowerCase()
+      } else {
+        const channels = [...panel.querySelectorAll('[data-prts-color-channel-index]')].map(input => Number(input.value).toString(16).padStart(2, '0'))
+        colorDraft = '#' + channels.join('')
+      }
+      renderColorDraft()
+      onPreferencePreview(cornerKey(), colorDraft)
+      return
+    }
+    if (target?.matches?.('[data-prts-corner-color]')) { onPreferencePreview(cornerKey(), target.value); return }
     if (target?.matches?.('[data-prts-preview-reply-limit]')) { onPreferenceChange('previewReplyLimit', Number(target.value)); return }
     if (target?.matches?.('input[data-prts-setting-color]')) {
       const key = target.dataset.prtsSettingKey
@@ -713,7 +824,7 @@ export function createThemeSettingsOverlay({
       selectSection(tabs[next].dataset.prtsSettingsJump, true)
       return
     }
-    if (event.key === 'Escape') { event.preventDefault(); setOpen(false); return }
+    if (event.key === 'Escape') { event.preventDefault(); if (!panel.querySelector('[data-prts-color-editor]').hidden) { event.stopPropagation(); closeColorEditor(true) } else setOpen(false); return }
     if (nativeModal || event.key !== 'Tab') return
     const nodes = focusable()
     if (!nodes.length) return
@@ -733,7 +844,8 @@ export function createThemeSettingsOverlay({
   const renderMediaState = () => renderState()
   const commitFromControl = event => {
     const target = event.target
-    if (target?.matches?.('[data-prts-corner-color]')) { if (event.type === 'change') onPreferenceChange('cornerCustomColor', target.value); return }
+    if (target?.matches?.('[data-prts-cursor-mode]')) { if (event.type === 'change') onPreferenceChange('cursor', target.value); return }
+    if (target?.matches?.('[data-prts-corner-color]')) { if (event.type === 'change') onPreferenceChange(cornerCustomKey(), target.value); return }
     if (target?.matches?.('input[data-prts-setting-color]')) {
       if (event.type === 'change' || event.type === 'focusout') commitSessionFlowColor(target.dataset.prtsSettingKey)
       return
@@ -743,6 +855,7 @@ export function createThemeSettingsOverlay({
     if (target.dataset.prtsSettingKey === 'sessionFlowSpeed') commitSessionFlowSpeed()
   }
 
+  const pageControls = mountPageControls({panel,window})
   trigger?.addEventListener('click', toggle)
   panel?.addEventListener('click', onPanelClick)
   selectSection('appearance')
@@ -782,6 +895,7 @@ export function createThemeSettingsOverlay({
     close: () => setOpen(false),
     toggle,
     dispose() {
+      pageControls.dispose()
       transferEditor.dispose()
       customEditor.dispose()
       avatarEditor.dispose()

package/src/client/theme-transfer.js

@@ -101,7 +101,7 @@ export function describeThemePackage(value) {
   return `${count} 项主题设置、${transferSlots.filter(k => a.backgrounds[k]).length} 张背景、${transferRoles.filter(k => a.avatars[k]).length} 个头像、${a.emblems.items.length} 个自定义徽记。将替换当前素材及徽记排列，空项恢复为默认。`
 }
 
-export function createThemeTransfer({ window, getPreferences, savePreferences, checkWritable, checkExport = checkWritable, themeVersion, onAvatarConfiguration = () => {} }) {
+export function createThemeTransfer({ window, getPreferences, savePreferences, checkWritable, checkExport = checkWritable, themeVersion, onAvatarConfiguration = () => {}, onDownload, readImage = (blob, signal) => readTransferFile(window, blob, signal, undefined, true), backupNotice = '导入前备份已发起下载，可重新导入恢复。' }) {
   let busy = false, backup
   const request = async (path, data, signal) => {
     checkTransferCancelled(signal)
@@ -128,7 +128,7 @@ export function createThemeTransfer({ window, getPreferences, savePreferences, c
           if (!/^[a-f0-9-]{36}$/.test(entry.id)) throw Error('背景引用无效')
           const response = await window.fetch('/prts-theme-api/backgrounds/image/' + entry.id, { credentials: 'same-origin', signal })
           if (!response.ok) throw Error('无法导出背景图片')
-          backgrounds[slot] = await readTransferFile(window, await response.blob(), signal, undefined, true)
+          backgrounds[slot] = await readImage(await response.blob(), signal)
         }
       }
       progress({ value: 0.35, label: '正在读取头像…' })
@@ -169,6 +169,7 @@ export function createThemeTransfer({ window, getPreferences, savePreferences, c
     try { return await fn() } finally { busy = false }
   }
   function download(value, name = 'theme') {
+    if (onDownload) return onDownload(value, name)
     const blob = new window.Blob([JSON.stringify(value)], { type: 'application/json' })
     if (blob.size > THEME_PACKAGE_LIMIT) throw Error('主题文件超过 160 MB，请减少素材后重试')
     const url = window.URL.createObjectURL(blob), link = window.document.createElement('a')
@@ -185,7 +186,7 @@ export function createThemeTransfer({ window, getPreferences, savePreferences, c
     progress({ value: 0.3, label: '正在生成导入前备份…' })
     await new Promise(resolve => window.setTimeout(resolve, 0))
     checkTransferCancelled(signal)
-    download(backup, 'before-import')
+    await download(backup, 'before-import')
     let completed = 0
     const total = value.assets ? value.assets.emblems.items.length + 7 : 1
     const step = label => progress({ value: 0.35 + 0.65 * completed / total, label })
@@ -229,7 +230,7 @@ export function createThemeTransfer({ window, getPreferences, savePreferences, c
       let failures = 0
       for (const restore of undo.reverse()) { try { await restore() } catch { failures++ } }
       if (signal?.aborted && !failures && error.name === 'AbortError') throw Error('操作已取消，已回退已写入的素材。')
-      throw Error(`${error.message}。${failures ? '部分素材未能自动恢复。' : '已回退已确认写入的素材。'}若连接中断，请检查实际状态；导入前备份已发起下载，可重新导入恢复。`)
+      throw Error(`${error.message}。${failures ? '部分素材未能自动恢复。' : '已回退已确认写入的素材。'}若连接中断，请检查实际状态；${backupNotice}`)
     }
   }
   return {

package/src/index.js

@@ -5,6 +5,10 @@ import { createAvatarService, registerAvatarApi } from './server/avatars.js'
 import { join } from 'node:path'
 import { homedir } from 'node:os'
 import { createEmblemService } from './server/emblems.js'
+import { themeToolStatus, THEME_TOOL_POLICY, ENABLE_THEME_TOOLS } from './server/theme-tool-status.js'
+import { transferTools } from './server/transfer-tools.js'
+import { readFile } from 'node:fs/promises'
+import { backgroundTools } from './server/background-tools.js'
 import { avatarTools } from './server/avatar-tools.js'
 import { emblemTools } from './server/tools.js'
 import { registerEmblemApi } from './server/api.js'
@@ -12,9 +16,10 @@ export const PACKAGE_ID = '@ash-qw/dsh-theme-prts'
 export const THEME_PLUGIN_ID = 'dsh-theme-prts'
 export const inject = ['tools', 'attachments', 'connection', 'webServer']
 
+// Leave new palette fields absent until normalization can inherit the legacy color.
 export const Config = Schema.object(Object.fromEntries([
   ...Object.entries(DEFAULT_PREFERENCES).map(([key, value]) => [key,
-    (typeof value === 'boolean' ? Schema.boolean() : typeof value === 'number' ? Schema.number() : Schema.string()).default(value).volatile(),
+    (typeof value === 'boolean' ? Schema.boolean() : typeof value === 'number' ? Schema.number() : Schema.string()).default(['cornerColorLight', 'cornerCustomColorLight', 'cornerColorSource'].includes(key) ? undefined : value).volatile(),
   ]),
   ['preferencesInitialized', Schema.boolean().default(false).volatile()],
 ]))
@@ -27,12 +32,29 @@ export async function apply(ctx, config = {}) {
   const service=await createEmblemService(directory)
   const backgrounds=await createBackgroundService(join(directory,'..','backgrounds'))
   const avatars=await createAvatarService(join(directory,'..','avatars'))
-  const definitions=[...emblemTools(service,ctx.attachments),...avatarTools(avatars,ctx.attachments)]
+  const themeVersion=JSON.parse(await readFile(new URL('../package.json',import.meta.url),'utf8')).version
+  const definitions=[...emblemTools(service,ctx.attachments),...avatarTools(avatars,ctx.attachments),...backgroundTools(backgrounds,ctx.attachments,ctx),...transferTools({backgrounds,avatars,emblems:service,attachments:ctx.attachments,host:ctx,themeVersion})]
+  const toolsEnabled=()=>(config.aiToolsEnabled?.get?.() ?? config.aiToolsEnabled) !== false
+  const disposeStatus=ctx.tools.register(themeToolStatus(toolsEnabled))
+  ctx.inject(['systemPrompt'], promptCtx=>{
+    if(typeof promptCtx.systemPrompt?.context!=='function')return
+    promptCtx.effect(()=>promptCtx.systemPrompt.context({
+      name:'prts-theme-tools:'+ (ctx.fiber?.entry?.id ?? THEME_PLUGIN_ID),
+      order:1500,required:true,interpolate:false,
+      text:()=> 'PRTS AI 定制工具当前'+(toolsEnabled()?'已开启。':'已关闭。'+ENABLE_THEME_TOOLS)+' '+THEME_TOOL_POLICY,
+    }))
+  })
   let toolDisposers=[]
   const syncTools=()=>{
-    const enabled=(config.aiToolsEnabled?.get?.() ?? config.aiToolsEnabled) !== false
+    const enabled=toolsEnabled()
     if(enabled && !toolDisposers.length) {
-      for(const tool of definitions)toolDisposers.push(ctx.tools.register(tool))
+      for(const tool of definitions)toolDisposers.push(ctx.tools.register({...tool,
+        description:tool.description+' '+THEME_TOOL_POLICY,
+        execute:(args,exec)=>{
+          if(!toolsEnabled())throw Error('PRTS AI 定制工具已关闭。'+ENABLE_THEME_TOOLS+' '+THEME_TOOL_POLICY)
+          return tool.execute(args,exec)
+        },
+      }))
     } else if(!enabled) {
       for(const dispose of toolDisposers.splice(0).reverse())dispose()
     }
@@ -42,7 +64,7 @@ export async function apply(ctx, config = {}) {
   const stopConfig=ctx.on('app-boot/config-reload',syncTools)
   const disposers=[registerEmblemApi(ctx,service),registerAvatarApi(ctx,avatars),registerBackgroundApi(ctx,backgrounds)]
   ctx.effect(()=>async()=>{
-    stopConfig()
+    stopConfig();disposeStatus()
     for(const dispose of toolDisposers.splice(0).reverse())dispose()
     for(const dispose of disposers.reverse())dispose()
     await service.dispose();await backgrounds.dispose()

package/src/server/avatar-tools.js

@@ -43,7 +43,7 @@ export function avatarTools(service,attachments){
         const ref=images.find(image=>image.attachmentId===args.attachmentId)
         if(!ref)throw fault(404,'当前会话没有这张图片，请先上传或用 read_image 读取图片，再 inspect')
         if(ref.bytes>limit)throw fault(400,'图片超过 5 MB')
-        const {attachmentKind,origin,toolName,...attachment}=ref
+        const {attachmentKind,origin,toolName,lastSeenOrder,lastSeenAt,latestForName,...attachment}=ref
         let bytes
         if(attachmentKind==='file'){
           const chunks=[];let size=0

package/src/server/background-preview.js

@@ -0,0 +1,100 @@
+import sharp from 'sharp'
+import { sessionImages } from './tools.js'
+import { fault } from './emblems.js'
+import { prepareBackgroundImage } from './backgrounds.js'
+import { backgroundPlacement, validBackgroundRegion } from '../shared/background-region.js'
+
+// Keep these paired with the root light/dark canvas tokens in prts.css.
+export const BACKGROUND_CANVAS={dark:'#080a0c',light:'#eef1f3'}
+export async function readBackgroundAttachment(attachments,images,id,exec){
+  const ref=images.find(image=>image.attachmentId===id),limit=10*1024*1024
+  if(!ref)throw fault(404,'当前会话没有这张图片，请先上传或 read_image 读取生成/下载的图片，再 inspect')
+  if(ref.bytes>limit)throw fault(400,'图片超过 10 MB')
+  const {attachmentKind,origin,toolName,lastSeenOrder,lastSeenAt,latestForName,...attachment}=ref
+  let bytes
+  if(attachmentKind==='file'){
+    const chunks=[];let size=0
+    for await(const chunk of attachments.readFileStream(attachment,exec.signal)){
+      exec.signal?.throwIfAborted()
+      size+=chunk.length;if(size>limit)throw fault(400,'图片超过 10 MB');chunks.push(chunk)
+    }
+    bytes=Buffer.concat(chunks)
+  }else bytes=(await attachments.readImage(attachment,exec.signal)).data
+  exec.signal?.throwIfAborted()
+  if(bytes.length>limit)throw fault(400,'图片超过 10 MB')
+  return Buffer.from(bytes)
+}
+export async function renderBackgroundPreview(bytes,{width,height,scheme,dim,region}){
+  const metadata=await sharp(bytes).metadata(),sw=metadata.width,sh=metadata.height
+  const placement=backgroundPlacement(sw,sh,width,height,region)
+  const scale=placement.width/sw
+  // Crop before resizing to bound memory even for extremely wide/tall images.
+  const left=Math.max(0,Math.min(sw-1,Math.round(-placement.x/scale)))
+  const top=Math.max(0,Math.min(sh-1,Math.round(-placement.y/scale)))
+  const crop={left,top,width:Math.max(1,Math.min(sw-left,Math.round(width/scale))),height:Math.max(1,Math.min(sh-top,Math.round(height/scale)))}
+  const canvas=BACKGROUND_CANVAS[scheme]
+  const image=await sharp(bytes).extract(crop).resize(width,height,{fit:'fill'}).flatten({background:canvas}).toColourspace('srgb').png().toBuffer()
+  // Match CSS color-mix(in srgb); do not blend in linear-light space.
+  const rgb={r:parseInt(canvas.slice(1,3),16),g:parseInt(canvas.slice(3,5),16),b:parseInt(canvas.slice(5,7),16),alpha:dim}
+  const overlay=await sharp({create:{width,height,channels:4,background:rgb}}).png().toBuffer()
+  return {data:await sharp(image).composite([{input:overlay,blend:'over'}]).png().toBuffer(),clipped:placement.clipped,crop,canvas}
+}
+export function backgroundPreviewTool(service,attachments,readSettings){
+  return {
+    name:'prts_background_preview',
+    description:'预览 PRTS 背景的裁剪与遮罩合成，不应用、不修改主题。指定 slot 预览已保存背景，或 attachmentId 预览会话候选图片（二选一）；候选图先按实际保存规则转正、缩放并转 WebP。dim 默认使用当前背景遮罩，可临时覆盖；scheme 默认为 both，同时生成日间/夜间图，因为服务端不能判断用户页面当前日夜模式。可指定预览宽高和归一化保护区域，默认使用已保存图片的保护区域。返回预览附件、尺寸、底色、遮罩、裁剪信息；这是背景层预览，不含消息泡、文字、侧栏毛玻璃等界面材质，不是实际页面截图。必须查看预览才能评价视觉效果；预览图不能再作为原始背景素材。修改 dim 后可再次预览。',
+    parameters:{type:'object',additionalProperties:false,properties:{
+      slot:{type:'string',enum:['full','sidebar','conversation']},attachmentId:{type:'string'},
+      dim:{type:'number',minimum:0,maximum:.9},scheme:{type:'string',enum:['dark','light','both']},
+      width:{type:'integer',minimum:64,maximum:1920},height:{type:'integer',minimum:64,maximum:1920},
+      region:{anyOf:[{type:'null'},{type:'object',additionalProperties:false,properties:{
+        x:{type:'number',minimum:0,maximum:1},y:{type:'number',minimum:0,maximum:1},
+        width:{type:'number',exclusiveMinimum:0,maximum:1},height:{type:'number',exclusiveMinimum:0,maximum:1},
+      },required:['x','y','width','height']}]},
+    }},
+    output:{schema:{type:'object'},render:(_args,value)=>[
+      {type:'text',text:JSON.stringify(value)},
+      ...value.previews.flatMap(p=>[{type:'file',attachment:p.file},...(value.imageForModel?[{type:'image',attachment:p.image}]:[])]),
+    ]},
+    isConcurrencySafe:()=>false,
+    async execute(args,exec){
+      exec.signal?.throwIfAborted()
+      const images=sessionImages(exec.agent)
+      if(Boolean(args.slot)===Boolean(args.attachmentId))throw fault(400,'请选择已保存背景 slot 或候选 attachmentId，二选一')
+      if(args.slot && !['full','sidebar','conversation'].includes(args.slot))throw fault(400,'背景区域无效')
+      const configuration=service.snapshot(),settings=readSettings()
+      const scheme=args.scheme ?? 'both',dim=args.dim ?? settings.dim
+      const width=args.width ?? (args.slot==='sidebar'?360:1280),height=args.height ?? (args.slot==='sidebar'?900:720)
+      if(!['dark','light','both'].includes(scheme)||!Number.isFinite(dim)||dim<0||dim>.9)throw fault(400,'请指定有效日夜模式和 0..0.9 遮罩；设置不可读时须显式指定 dim')
+      if(![width,height].every(v=>Number.isInteger(v)&&v>=64&&v<=1920))throw fault(400,'预览宽高须为 64..1920 的整数')
+      const region=Object.hasOwn(args,'region')?args.region:args.slot?configuration[args.slot]?.region ?? null:null
+      if(!validBackgroundRegion(region))throw fault(400,'背景保护区域无效')
+      let bytes
+      if(args.slot){
+        const entry=configuration[args.slot]
+        if(!entry)throw fault(400,'此区域尚未设置图片')
+        bytes=await service.image(entry.id)
+      }else bytes=(await prepareBackgroundImage(await readBackgroundAttachment(attachments,images,args.attachmentId,exec))).data
+      let imageForModel=false
+      const llm=exec.agent.ctx?.get?.('llm'),routed=exec.agent.session.requestHeader?.()?.config
+      const provider=routed?.provider ?? exec.agent.options?.provider,model=routed?.model ?? exec.agent.options?.model
+      if(llm && provider && model)imageForModel=(await llm.resolveModelInfo(provider,model,exec.signal)).inputModalities?.includes('image')===true
+      const previews=[]
+      for(const mode of scheme==='both'?['dark','light']:[scheme]){
+        exec.signal?.throwIfAborted()
+        const {data,...details}=await renderBackgroundPreview(bytes,{width,height,scheme:mode,dim,region})
+        exec.signal?.throwIfAborted()
+        const name=`prts-background-preview-${mode}.png`,file=await attachments.saveFile({data,name})
+        const image=imageForModel?await attachments.saveImage({data,mediaType:'image/png',name}):undefined
+        const hostPath=attachments.fileHostPath?.(file),fs=exec.agent.ctx?.get?.('fs')
+        const previewPath=hostPath?fs?.processPathFromHostPath(hostPath):undefined
+        previews.push({scheme:mode,width,height,dim,region,...details,file,...(image?{image}:{}),
+          ...(previewPath?{previewPath,previewMarkdown:`![${mode==='dark'?'夜间':'日间'}背景预览](<${previewPath}>)`}:{})})
+      }
+      exec.signal?.throwIfAborted()
+      if(args.slot && service.snapshot().revision!==configuration.revision || args.dim===undefined && readSettings().revision!==settings.revision)throw fault(409,'背景或遮罩已变化，请重新预览')
+      return {applied:false,imageForModel,revision:configuration.revision,settingsRevision:settings.revision,
+        note:'仅模拟背景铺满裁剪、保护区域和遮罩；裁剪按源图像素取整，不包含正文、气泡、毛玻璃。',previews}
+    },
+  }
+}