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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "2.5.5",
+  "version": "2.6.0",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web and the official desktop client",
@@ -69,7 +69,7 @@
   },
   "engines": {
     "node": ">=20.9.0",
-    "dsh": "0.2.1-rc.2 || 0.2.1-rc.3"
+    "dsh": "0.2.1-rc.2 || 0.2.1-rc.3 || 0.2.1-rc.5"
   },
   "devDependencies": {
     "@playwright/test": "1.55.1",

package/src/client/conversation-control-adapter.js

@@ -185,13 +185,22 @@ function mountBodyTargetFrame(document, window, operation) {
   const find=node=>{
     if(activeModal && !activeModal.contains(node))return null
     if (!node?.closest || node.closest('[data-prts-workspace-actions],[data-prts-session-actions]')) return null
-    const schedule=node.closest('[data-tool="schedule_create"]')
-    const scheduleOpen=schedule && [...schedule.children].find(child=>child.tagName==='BUTTON' && hasClassSuffix(child,'_cardOpen') && !child.matches(':disabled,[aria-disabled="true"]'))
+    const container=node.closest('[data-presented-file],[data-changed-files],[data-tool="schedule_create"]')
     const button=node.closest('button')
-    // The transparent hit layer targets the card; nested actions keep their own frame.
-    const card=node.closest('[data-presented-file],[data-changed-files]') || (scheduleOpen && (!button || button===scheduleOpen)?schedule:null)
+    let cardTarget=null
+    if(container){
+      const action=node.closest('button,a[href],[role="button"],[role="link"],summary,input:not([type="hidden"]),select,textarea')
+      const nested=action && action!==container && container.contains(action)
+      // Disabled controls must not fall back to their enclosing card.
+      if(node.closest(':disabled,[aria-disabled="true"],[inert]'))return null
+      const hitLayer=nested && action.tagName==='BUTTON' && (
+        container.matches('[data-presented-file]') && hasClassSuffix(action,'_cardPreview') ||
+        action.parentElement===container && container.matches('[data-tool="schedule_create"]') && hasClassSuffix(action,'_cardOpen'))
+      const openable=!container.matches('[data-tool="schedule_create"]') || [...container.children].some(child=>child.tagName==='BUTTON' && hasClassSuffix(child,'_cardOpen') && !child.matches(':disabled,[aria-disabled="true"]'))
+      cardTarget=nested && !hitLayer ? action : openable ? container : null
+    }
     const pendingAction=operation.contains(button) && isPendingInteractionAction(button) ? button : null
-    const candidate=card || pendingAction || node.closest(selector)
+    const candidate=cardTarget || pendingAction || node.closest(selector)
     return candidate && !candidate.matches(':disabled,[aria-disabled="true"]') && !candidate.closest('[inert]') ? candidate : null
   }
   const measure=(box)=>{bounds=box || target.getBoundingClientRect();targetArm=7+Math.max(0,Math.min(1,(Math.min(bounds.width,bounds.height)-36)/36))*5;boundsDirty=false}

package/src/client/index.js

@@ -223,7 +223,11 @@ export function applyPrtsPlugin(ctx, environment) {
         persistAndApply(updatePreferenceValue(preferences, key, value))
       },
       onPreferencePreview(key, value) {
-        if (key === 'cornerColor') { document.documentElement.style.setProperty('--prts-corner-color', String(value)); return }
+        if (key === 'cornerColor' || key === 'cornerColorLight') {
+          const properties = preferences.cornerColorLinked ? ['--prts-corner-color-light', '--prts-corner-color-dark'] : [key === 'cornerColorLight' ? '--prts-corner-color-light' : '--prts-corner-color-dark']
+          for (const property of properties) document.documentElement.style.setProperty(property, String(value))
+          return
+        }
         if (key === 'particleTraversalSpeed') {
           particleField.update(updatePreferenceValue(preferences, key, value))
           return

package/src/client/native-preferences.js

@@ -28,11 +28,15 @@ export function createNativePreferences({ storage, onChange }) {
       migrationAttempted = true
       pending = { ...legacy, ...pending }
     }
-    // Materialize the old shared sidebar values once, so later left-side edits
-    // cannot change a right-side preference that was never written by the Host.
+    // Materialize legacy shared values before either side can be edited independently.
     if (s.value?.preferencesInitialized && writable(s)) {
-      for (const key of ['rightSidebarOpacity', 'rightSidebarBlur']) {
-        if (!Object.hasOwn(s.value, key) && !Object.hasOwn(pending, key) && !Object.hasOwn(inFlight, key) && !Object.hasOwn(failed, key)) pending[key] = host[key]
+      if (s.value.cornerColorSource == null && s.value.cornerColorLinked === true) {
+        for (const key of ['cornerColor', 'cornerCustomColor']) {
+          if (s.value[key] !== host[key] && !Object.hasOwn(pending, key) && !Object.hasOwn(inFlight, key) && !Object.hasOwn(failed, key)) pending[key] = host[key]
+        }
+      }
+      for (const key of ['rightSidebarOpacity', 'rightSidebarBlur', 'cornerColorLight', 'cornerCustomColorLight', 'cornerColorSource']) {
+        if (s.value[key] == null && !Object.hasOwn(pending, key) && !Object.hasOwn(inFlight, key) && !Object.hasOwn(failed, key)) pending[key] = host[key]
       }
     }
     current = normalizePreferences({ ...host, ...inFlight, ...pending })

package/src/client/preferences.js

@@ -39,8 +39,12 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   bakerBlur: 8,
   classicUserBlur: 8,
   cursor: 'prts',
+  cornerColorLinked: false,
+  cornerColorSource: 'dark',
   cornerColor: '#f0c800',
   cornerCustomColor: '#f0c800',
+  cornerColorLight: '#f0c800',
+  cornerCustomColorLight: '#f0c800',
   conversationParticleDensity: 'sparse',
   heroParticleDensity: 'light',
   particleTraversalSpeed: PARTICLE_TRAVERSAL_SPEED_DEFAULT,
@@ -107,7 +111,7 @@ export const PREFERENCE_GROUPS = Object.freeze({
   background: Object.freeze(['texture', 'backgroundMode', 'backgroundDim', 'heroContrast', 'sidebarOpacity', 'rightSidebarOpacity', 'railOpacity', 'bakerOpacity', 'classicUserOpacity', 'sidebarBlur', 'rightSidebarBlur', 'railBlur', 'bakerBlur', 'classicUserBlur']),
   particles: Object.freeze(['conversationParticleDensity', 'heroParticleDensity', 'particleTraversalSpeed']),
   material: Object.freeze(['glass', 'composerGlass']),
-  accessibility: Object.freeze(['motion', 'bootAnimation', 'cursor', 'cornerColor', 'cornerCustomColor']),
+  accessibility: Object.freeze(['motion', 'bootAnimation', 'cursor', 'cornerColorLinked', 'cornerColorSource', 'cornerColor', 'cornerCustomColor', 'cornerColorLight', 'cornerCustomColorLight']),
   aiTools: Object.freeze(['aiToolsEnabled']),
   navigation: Object.freeze(['railDefaultHidden', 'sessionPreview', 'previewOngoing', 'previewTools', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning', 'previewReplyLimit']),
   conversation: Object.freeze(['sessionFlow', 'sessionGlow', 'sessionFlowPalette', 'sessionFlowColorBack', 'sessionFlowColorCore', 'sessionFlowColorFront', 'sessionFlowSpeed', 'conversationStyle', 'bakerGroupAvatars', 'bakerLoading', 'conversationEmblem']),
@@ -231,8 +235,12 @@ export function normalizePreferences(value) {
     backgroundDim: typeof input.backgroundDim === 'number' && Number.isFinite(input.backgroundDim) ? Math.min(.9, Math.max(0, input.backgroundDim)) : .45,
     composerGlass: booleanOr(input.composerGlass, DEFAULT_PREFERENCES.composerGlass),
     bootAnimation: booleanOr(input.bootAnimation, DEFAULT_PREFERENCES.bootAnimation),
+    cornerColorLinked: booleanOr(input.cornerColorLinked, false),
+    cornerColorSource: input.cornerColorSource === 'light' ? 'light' : 'dark',
     cornerCustomColor: colorOr(input.cornerCustomColor, DEFAULT_PREFERENCES.cornerCustomColor),
     cornerColor: colorOr(input.cornerColor, DEFAULT_PREFERENCES.cornerColor),
+    cornerColorLight: colorOr(input.cornerColorLight, colorOr(input.cornerColor, DEFAULT_PREFERENCES.cornerColor)),
+    cornerCustomColorLight: colorOr(input.cornerCustomColorLight, colorOr(input.cornerCustomColor, DEFAULT_PREFERENCES.cornerCustomColor)),
     cursor: input.cursor === 'system' ? 'system' : DEFAULT_PREFERENCES.cursor,
     conversationParticleDensity: enumOr(legacyDensities.conversation, PARTICLE_DENSITIES, particlePreset.conversationParticleDensity),
     heroParticleDensity: enumOr(legacyDensities.hero, PARTICLE_DENSITIES, particlePreset.heroParticleDensity),
@@ -263,6 +271,11 @@ export function normalizePreferences(value) {
     bakerGroupAvatars: booleanOr(input.bakerGroupAvatars, DEFAULT_PREFERENCES.bakerGroupAvatars),
     conversationStyle: enumOr(input.conversationStyle, CONVERSATION_STYLES, DEFAULT_PREFERENCES.conversationStyle),
   }
+  // Preserve the active color from the interim shared-palette format on upgrade.
+  if (input.cornerColorSource == null && input.cornerColorLinked === true) {
+    normalized.cornerColor = colorOr(input.cornerColorShared, normalized.cornerColor)
+    normalized.cornerCustomColor = colorOr(input.cornerCustomColorShared, normalized.cornerCustomColor)
+  }
   normalized.preset = matchedVisualPreset(normalized)
   return normalized
 }
@@ -287,9 +300,16 @@ export function updatePreferenceValue(value, key, nextValue) {
   if (key === 'preset') return applyVisualPreset(value, nextValue)
   if (key === 'particleDetail') return applyParticleDetail(value, nextValue)
   const current = normalizePreferences(value)
-  if (key === 'cornerCustomColor') {
-    const color = colorOr(nextValue, current.cornerCustomColor)
-    return normalizePreferences({ ...current, cornerColor: color, cornerCustomColor: color })
+  if (key === 'cornerColorLink') {
+    const enabled = nextValue === 'light' || nextValue === 'dark'
+    return normalizePreferences({ ...current, cornerColorLinked: enabled,
+      ...(enabled ? { cornerColorSource: nextValue } : {}) })
+  }
+  if (['cornerColor', 'cornerColorLight', 'cornerCustomColor', 'cornerCustomColorLight'].includes(key)) {
+    const color = colorOr(nextValue, current[key])
+    const custom = key.startsWith('cornerCustom')
+    const colorKey = custom ? key.replace('cornerCustomColor', 'cornerColor') : key
+    return normalizePreferences({ ...current, [colorKey]: color, ...(custom ? { [key]: color } : {}) })
   }
   if (key === 'sessionFlowPalette') {
     const palette = enumOr(nextValue, SESSION_FLOW_PALETTE_IDS, current.sessionFlowPalette)

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

@@ -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',
@@ -766,7 +767,7 @@ export function createThemeController({ document, window, cssText, service, curs
       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

@@ -171,7 +171,7 @@ 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>
@@ -285,6 +285,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 +371,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 +382,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 +565,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'
@@ -628,10 +669,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 +730,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 +786,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 +806,7 @@ 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-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

package/src/index.js

@@ -12,9 +12,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()],
 ]))

package/src/styles/theme-settings-workbench.css

@@ -1043,5 +1043,55 @@ html[data-dsh-prts] [data-prts-corner-presets] { display:flex;flex-wrap:wrap;gap
   & > button[aria-pressed="true"]::after { content:"";position:absolute;width:8px;height:4px;border-left:2px solid #172025;border-bottom:2px solid #172025;transform:translateY(-1px) rotate(-45deg); }
   & > button:focus-visible { outline:2px solid var(--prts-ink);outline-offset:2px; }
 }
-html[data-dsh-prts] [data-prts-corner-presets] > [data-prts-corner-custom] { display:flex;align-items:center;gap:8px;width:auto;height:32px;margin-left:8px;padding:5px 10px;border:1px solid var(--prts-line-strong);border-radius:4px;background:var(--prts-panel-raised);color:var(--prts-ink);font:12px/1 var(--prts-body);white-space:nowrap; }
-html[data-dsh-prts] [data-prts-corner-presets] > [data-prts-corner-custom]:is(:hover,:focus-visible) { border-color:var(--prts-ink);background:color-mix(in srgb,var(--prts-ink) 8%,var(--prts-panel-raised)); }
+html[data-dsh-prts] [data-prts-corner-presets] [data-prts-corner-custom] { display:flex;align-items:center;gap:8px;width:auto;height:32px;margin-left:8px;padding:5px 10px;border:1px solid var(--prts-line-strong);border-radius:4px;background:var(--prts-panel-raised);color:var(--prts-ink);font:12px/1 var(--prts-body);white-space:nowrap; }
+html[data-dsh-prts] [data-prts-corner-presets] [data-prts-corner-custom]:is(:hover,:focus-visible) { border-color:var(--prts-ink);background:color-mix(in srgb,var(--prts-ink) 8%,var(--prts-panel-raised)); }
+
+
+/* Resolve palette in CSS so app scheme changes never require pointer work. */
+html[data-dsh-prts] { --prts-corner-color: var(--prts-corner-color-dark, #f0c800); }
+html[data-dsh-prts][data-prts-scheme="light"] { --prts-corner-color: var(--prts-corner-color-light, #f0c800); }
+[data-prts-corner-heading] { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
+[data-prts-corner-modes] { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--prts-line-strong); border-radius: 6px; }
+[data-prts-corner-modes] button { padding: 4px 7px; border: 0; border-radius: 3px; background: transparent; color: inherit; font-size: 11px; opacity: .6; cursor: pointer; }
+[data-prts-corner-modes] button[aria-pressed="true"] { background: color-mix(in srgb, currentColor 12%, transparent); opacity: 1; }
+[data-prts-corner-picker] { position: relative; display: inline-flex; }
+[data-prts-corner-picker] input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
+html[data-dsh-prts] [data-prts-setting-row="cornerColor"] > span { flex-basis: 100%; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-heading] { display: flex; align-items: center; gap: 12px; }
+html[data-dsh-prts] [data-prts-corner-heading] strong { font: 550 var(--prts-settings-text)/1.5 var(--prts-body); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-modes] { display: inline-flex; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-modes] button { font: 11px/1.4 var(--prts-body); }
+
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-sync] { margin-left: auto; padding: 4px 7px; border: 0; border-radius: 4px; background: transparent; color: var(--prts-muted); font: 11px/1.4 var(--prts-body); cursor: pointer; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-sync]:hover { color: var(--prts-ink); background: var(--prts-panel-raised); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-editor] { position: absolute; z-index: 10; right: 0; bottom: calc(100% + 10px); width: 252px; padding: 16px; display: grid; gap: 12px; border: 1px solid var(--prts-line-strong); border-radius: 10px; background: var(--prts-panel-raised); color: var(--prts-ink); box-shadow: 0 12px 36px #0005; cursor: auto; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-editor][hidden] { display: none; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-editor-title] { font: 550 12px/1.4 var(--prts-body); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-sample] { display: block; height: 44px; border-radius: 6px; box-shadow: inset 0 0 0 1px #8884; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-hex-label] { display: flex; align-items: center; gap: 12px; font: 11px/1.5 var(--prts-mono); color: var(--prts-muted); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-hex] { min-width: 0; width: 100%; padding: 6px 8px; border: 1px solid var(--prts-line-strong); border-radius: 4px; background: var(--prts-canvas); color: var(--prts-ink); font: 12px/1.4 var(--prts-mono); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-hex][aria-invalid="true"] { border-color: var(--prts-red); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-channel] { display: grid; grid-template-columns: 12px 1fr 25px; gap: 10px; align-items: center; font: 11px/1.5 var(--prts-mono); color: var(--prts-muted); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-channel-index] { appearance: none; width: 100%; min-width: 0; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 8px; cursor: pointer; }
+html[data-dsh-prts] [data-prts-color-channel-index]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border: 2px solid white; border-radius: 50%; background: #283036; box-shadow: 0 1px 4px #0008; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-actions] { display: flex; justify-content: flex-end; gap: 8px; padding-top: 3px; }
+html[data-dsh-prts] [data-prts-color-actions] button { padding: 6px 10px; border: 1px solid var(--prts-line-strong); border-radius: 4px; color: var(--prts-ink); background: transparent; font: 12px/1.4 var(--prts-body); cursor: pointer; }
+html[data-dsh-prts] [data-prts-color-actions] button:hover { background: color-mix(in srgb,var(--prts-ink) 10%,transparent); }
+html[data-dsh-prts] [data-prts-color-actions] [data-prts-color-apply] { background: var(--prts-ink); color: var(--prts-canvas); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row="cornerColor"] { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row="cornerColor"] > span { width: 100%; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-presets] { justify-content: flex-start; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-editor] { max-width: calc(100vw - 72px); max-height: 310px; overflow-y: auto; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-color-editor][data-open-below] { bottom: auto; top: calc(100% + 10px); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row="cornerColor"] { flex-wrap: nowrap; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-common] [data-prts-setting-row="cornerColor"] > span { flex: none; width: auto; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-modes][hidden] { display: none; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-sync] { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-sync] i { display: block; position: relative; width: 28px; height: 16px; border-radius: 10px; background: var(--prts-line-strong); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-sync] i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--prts-ink); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-sync][aria-checked="true"] i { background: var(--prts-yellow); }
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-corner-sync][aria-checked="true"] i::after { transform: translateX(12px); background: var(--prts-canvas); }
+html[data-dsh-prts] [data-prts-corner-presets] [data-prts-corner-custom][aria-pressed="true"] { border-color: var(--prts-ink); background: color-mix(in srgb,var(--prts-ink) 10%,var(--prts-panel-raised)); }
+
+html[data-dsh-prts] [data-prts-corner-custom] [data-prts-corner-preview] { position: relative; }
+html[data-dsh-prts] [data-prts-corner-custom][aria-pressed="true"] [data-prts-corner-preview]::after { content: ""; position: absolute; left: 4px; top: 5px; width: 8px; height: 4px; border-left: 2px solid #172025; border-bottom: 2px solid #172025; transform: rotate(-45deg); }