@ash-qw/dsh-theme-prts 2.3.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web and the official desktop client",

package/src/client/background-layout.js

@@ -4,21 +4,22 @@ export function createBackgroundLayout({window,document}) {
   const root=document.documentElement
   const raf=window.requestAnimationFrame?.bind(window) ?? (fn=>window.setTimeout(fn,16))
   const caf=window.cancelAnimationFrame?.bind(window) ?? window.clearTimeout.bind(window)
-  let state={}, frame, disposed=false, enabled=false, observing=false, operation, sessions
+  let state={}, frame, disposed=false, enabled=false, observing=false, hostFrame, operation, sessions
   const set=(name,value)=>{if(root.style.getPropertyValue(name)!==value) root.style.setProperty(name,value)}
   const update=()=>{
     frame=undefined
     if(disposed||!observing)return
+    const nextFrame=document.querySelector('[data-prts-region="frame"]')
     const nextOperation=document.querySelector('[data-prts-region="operation"]')
     const nextSessions=document.querySelector('[data-prts-region="sessions"]')
-    if(operation!==nextOperation || sessions!==nextSessions){
-      resize?.disconnect(); operation=nextOperation;sessions=nextSessions
-      for(const node of [operation,sessions])if(node)resize?.observe(node)
+    if(hostFrame!==nextFrame || operation!==nextOperation || sessions!==nextSessions){
+      resize?.disconnect(); hostFrame=nextFrame;operation=nextOperation;sessions=nextSessions
+      for(const node of [hostFrame||operation,sessions])if(node)resize?.observe(node)
     }
     const railWidth=parseFloat(window.getComputedStyle(root).getPropertyValue('--prts-nav-width'))||0
     for(const slot of ['full','conversation','sidebar']){
       const entry=state[slot]
-      const node=slot==='sidebar'?sessions:operation
+      const node=slot==='sidebar'?sessions:slot==='conversation'?(hostFrame||operation):operation
       const width=slot==='full'?window.innerWidth:(node?.clientWidth||0)+(slot==='sidebar'?railWidth:0)
       const height=slot==='full'?window.innerHeight:node?.clientHeight||0
       const active=entry?.region && width>0 && height>0
@@ -35,14 +36,19 @@ export function createBackgroundLayout({window,document}) {
     }
   }
   function schedule(){if(!disposed && observing && frame===undefined)frame=raf(update)}
-  const resize=window.ResizeObserver?new window.ResizeObserver(schedule):null
+  // ResizeObserver runs after layout, before paint. Deferring again to rAF
+  // paints the new container with the previous image bounds for one frame.
+  const resize=window.ResizeObserver?new window.ResizeObserver(()=>{
+    if(frame!==undefined)caf(frame)
+    update()
+  }):null
   const mutations=new window.MutationObserver(()=>{
     if(!operation?.isConnected || !sessions?.isConnected)schedule()
   })
   const attributes=new window.MutationObserver(schedule)
   function clear(){
     caf(frame);frame=undefined;resize?.disconnect();mutations.disconnect();attributes.disconnect();window.removeEventListener('resize',schedule)
-    operation=undefined;sessions=undefined;observing=false
+    hostFrame=undefined;operation=undefined;sessions=undefined;observing=false
     for(const slot of ['full','conversation','sidebar'])for(const axis of ['x','y','width'])root.style.removeProperty(`--prts-protected-${slot}-${axis}`)
   }
   function reconcile(){

package/src/client/custom-background.js

@@ -2,7 +2,7 @@ import { createBackgroundLayout } from './background-layout.js'
 import { mountBackgroundRegionEditor, backgroundRegionMarkup } from './background-region-editor.js'
 import { opacityDialMarkup, mountOpacityDials } from './opacity-dial.js'
 const BACKGROUND_ENDPOINT = '/prts-theme-api/backgrounds'
-const backgroundLabels = { sidebar: '侧边栏', conversation: '会话正文', full: '完整背景' }
+const backgroundLabels = { sidebar: '左侧边栏', conversation: '会话正文', full: '完整背景' }
 function backgroundImageUrl(entry) {
   return /^[a-f0-9-]{36}$/.test(entry?.id ?? '') ? `${BACKGROUND_ENDPOINT}/image/${entry.id}` : null
 }
@@ -77,7 +77,7 @@ export function backgroundMarkup(heroContrastControl = '') {
   return `<section data-prts-background-settings>
     <header><strong>会话背景</strong><small>分区使用不同图片，或让一张完整背景贯穿侧边栏与正文。</small></header>
     <div data-prts-background-modes role="group" aria-label="背景模式">
-      ${[['off','默认背景','使用主题原有底色'],['split','分区背景','侧栏与正文独立配置'],['full','完整背景','一张图片贯穿整个界面']].map(([value,label,hint]) => `<button type="button" data-prts-setting-key="backgroundMode" data-prts-setting-value="${value}" aria-pressed="false"><span data-prts-background-diagram="${value}" aria-hidden="true"><i></i><i></i></span><span><strong>${label}</strong><small>${hint}</small></span></button>`).join('')}
+      ${[['off','默认背景','使用主题原有底色'],['split','分区背景','左侧边栏与正文独立配置'],['full','完整背景','一张图片贯穿整个界面']].map(([value,label,hint]) => `<button type="button" data-prts-setting-key="backgroundMode" data-prts-setting-value="${value}" aria-pressed="false"><span data-prts-background-diagram="${value}" aria-hidden="true"><i></i><i></i></span><span><strong>${label}</strong><small>${hint}</small></span></button>`).join('')}
     </div>
     <div data-prts-background-images hidden>${Object.entries(backgroundLabels).map(([slot,label]) => `<article data-prts-background-card="${slot}" hidden>
       <div data-prts-background-card-heading><strong>${label}</strong><button type="button" data-prts-background-remove="${slot}" aria-label="移除${label}图片" hidden>移除</button></div>

package/src/client/host-geometry-adapter.js

@@ -78,7 +78,12 @@ export function createHostGeometryAdapter({ document, window }) {
         shouldMeasure = true
       }
     }
-    if (shouldMeasure || !entries.length) scheduleMeasure()
+    // Keep shared wallpaper geometry in the same paint as the resized sidebar.
+    if (shouldMeasure || !entries.length) {
+      if (frameRequest !== undefined) window?.cancelAnimationFrame?.(frameRequest)
+      frameRequest = undefined
+      measure()
+    }
   }
 
   function stopObservation() {

package/src/client/native-preferences.js

@@ -28,6 +28,13 @@ 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.
+    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]
+      }
+    }
     current = normalizePreferences({ ...host, ...inFlight, ...pending })
     if (s.value?.preferencesInitialized) {
       legacy = null

package/src/client/opacity-dial.js

@@ -1,7 +1,8 @@
 // Ring geometry adapted from React Bits CometDial (David Haz).
 // See src/vendor/react-bits/LICENSE.md and THIRD_PARTY_NOTICES.md.
 export const BACKGROUND_OPACITY_CONTROLS = Object.freeze([
-  { key: 'sidebarOpacity', label: '会话列表侧栏', property: '--prts-sidebar-opacity', value: 94, blurKey: 'sidebarBlur', blurProperty: '--prts-sidebar-blur', blurDefault: 8 },
+  { key: 'sidebarOpacity', label: '左侧边栏', property: '--prts-sidebar-opacity', value: 94, blurKey: 'sidebarBlur', blurProperty: '--prts-sidebar-blur', blurDefault: 8 },
+  { key: 'rightSidebarOpacity', label: '右侧边栏', property: '--prts-right-sidebar-opacity', value: 94, blurKey: 'rightSidebarBlur', blurProperty: '--prts-right-sidebar-blur', blurDefault: 8 },
   { key: 'railOpacity', label: '设置侧栏', property: '--prts-rail-opacity', value: 70, blurKey: 'railBlur', blurProperty: '--prts-rail-blur', blurDefault: 12 },
   { key: 'bakerOpacity', label: 'Baker 气泡', property: '--prts-baker-opacity', value: 50, blurKey: 'bakerBlur', blurProperty: '--prts-baker-blur', blurDefault: 8, theme: 'deck-chat' },
   { key: 'classicUserOpacity', label: '经典用户消息', property: '--prts-classic-user-opacity', value: 50, blurKey: 'classicUserBlur', blurProperty: '--prts-classic-user-blur', blurDefault: 8, theme: 'native' },
@@ -16,7 +17,8 @@ export function opacityDialMarkup() {
   const controls = BACKGROUND_OPACITY_CONTROLS.map(({key,label,value,blurDefault}) => {
     const sample = key === 'bakerOpacity' ? '<span>这是一条回复</span><i></i>'
       : key === 'classicUserOpacity' ? '<span>这是我发送的消息</span><i></i>'
-        : key === 'railOpacity' ? '<b>◇</b><b>☼</b><b>⚙</b>' : '<span>工作区</span><i></i><i></i>'
+        : key === 'railOpacity' ? '<b>◇</b><b>☼</b><b>⚙</b>'
+          : key === 'rightSidebarOpacity' ? '<span>侧边栏</span><i></i><i></i>' : '<span>工作区</span><i></i><i></i>'
     return `<div data-prts-opacity-control="${key}">
       <div data-prts-opacity-heading><strong>${label}</strong><button type="button" data-prts-opacity-reset data-prts-opacity-reset-tooltip="恢复到 ${value}%" aria-label="恢复${label}透明度到 ${value}%"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4.5 10a7.5 7.5 0 1 1 .7 5.2M4.5 4.5V10H10"/></svg></button></div>
       <div data-prts-opacity-dial><svg viewBox="0 0 200 200" role="slider" tabindex="0" aria-label="${label}透明度" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${value}" aria-valuetext="${value}%"><circle data-dial-focus cx="100" cy="100" r="97"/><path data-dial-track d="${dialArc(110,430)}"/><path data-dial-lit/><path data-dial-tail/><circle data-dial-head r="8"/></svg><label data-prts-opacity-number><input type="number" min="0" max="100" step="1" value="${value}" aria-label="${label}透明度百分比"><span>%</span></label></div>
@@ -24,8 +26,8 @@ export function opacityDialMarkup() {
       <div data-prts-blur-control hidden><label><span>模糊</span><input type="range" min="0" max="32" step="1" value="${blurDefault}" aria-label="${label}模糊度"></label><output>${blurDefault}px</output><button type="button" data-prts-blur-reset title="恢复到 ${blurDefault}px" aria-label="恢复${label}模糊度到 ${blurDefault}px"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4.5 10a7.5 7.5 0 1 1 .7 5.2M4.5 4.5V10H10"/></svg></button></div>
       <small data-prts-opacity-note></small>
     </div>`
-  }).join('')
-  return `<fieldset data-prts-opacity-settings hidden><legend>材质透明度与模糊度</legend><small>透明度数值越高越透明；模糊度以像素计。调整时预览，松手后保存。</small><div data-prts-opacity-grid>${controls}</div></fieldset>`
+  })
+  return `<fieldset data-prts-opacity-settings hidden><legend>材质透明度与模糊度</legend><small>透明度数值越高越透明；模糊度以像素计。调整时预览，松手后保存。</small><div data-prts-opacity-grid>${controls.join('')}</div></fieldset>`
 }
 export function mountOpacityDials({ section, window, onChange }) {
   const root = section.ownerDocument.documentElement
@@ -108,14 +110,14 @@ export function mountOpacityDials({ section, window, onChange }) {
     for(const [el,type,fn] of bindings)el.addEventListener(type,fn)
     paint(value)
     return {
-      update(preferences, active) {
+      update(preferences, active, inactiveNote) {
         container.hidden = Boolean(definition.theme && preferences.conversationStyle !== definition.theme)
         saved = 100 - Math.round((preferences[definition.key] ?? (100 - definition.value) / 100) * 100)
         if (!grip && section.ownerDocument.activeElement !== input) paint(saved)
         savedBlur = preferences[definition.blurKey] ?? definition.blurDefault
         if (section.ownerDocument.activeElement !== blurInput) paintBlur(savedBlur)
         blurControl.hidden = !active
-        container.querySelector('[data-prts-opacity-note]').textContent = active ? '' : '当前未启用此材质'
+        container.querySelector('[data-prts-opacity-note]').textContent = active ? '' : inactiveNote
       },
       dispose() { if(grip)finish({},true);window.clearTimeout(timer);for(const [el,type,fn] of bindings)el.removeEventListener(type,fn) },
     }
@@ -127,10 +129,13 @@ export function mountOpacityDials({ section, window, onChange }) {
       section.querySelector('[data-prts-opacity-settings]').hidden = preferences.backgroundMode === 'off'
       const conversationImage = full || (split && Boolean(state.conversation))
       const sidebarImage = full || (split && Boolean(state.sidebar))
-      const active = [sidebarImage, sidebarImage,
+      const active = [sidebarImage || conversationImage, conversationImage, sidebarImage,
         conversationImage && preferences.conversationStyle === 'deck-chat',
         conversationImage && preferences.conversationStyle === 'native']
-      controls.forEach((control,i)=>control.update(preferences,active[i]))
+      const missingImage = full || !split ? '上传完整背景图片后生效' : null
+      const inactiveNotes = [missingImage || '上传左侧边栏或正文图片后生效', missingImage || '上传正文图片后生效',
+        missingImage || '上传左侧边栏图片后生效', missingImage || '上传正文图片后生效', missingImage || '上传正文图片后生效']
+      controls.forEach((control,i)=>control.update(preferences,active[i],inactiveNotes[i]))
     },
     dispose() {for(const control of controls)control.dispose()},
   }

package/src/client/preferences.js

@@ -29,10 +29,12 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   backgroundDim: .45,
   heroContrast: true,
   sidebarOpacity: .06,
+  rightSidebarOpacity: .06,
   railOpacity: .3,
   bakerOpacity: .5,
   classicUserOpacity: .5,
   sidebarBlur: 8,
+  rightSidebarBlur: 8,
   railBlur: 12,
   bakerBlur: 8,
   classicUserBlur: 8,
@@ -100,7 +102,7 @@ export const PARTICLE_DETAIL_LEVELS = Object.freeze({
   precise: Object.freeze({ conversationParticleDensity: 'dense', heroParticleDensity: 'ultra' }),
 })
 export const PREFERENCE_GROUPS = Object.freeze({
-  background: Object.freeze(['texture', 'backgroundMode', 'backgroundDim', 'heroContrast', 'sidebarOpacity', 'railOpacity', 'bakerOpacity', 'classicUserOpacity', 'sidebarBlur', 'railBlur', 'bakerBlur', 'classicUserBlur']),
+  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']),
@@ -214,10 +216,12 @@ export function normalizePreferences(value) {
     bakerLoading: input.bakerLoading === true,
     backgroundMode: ['off', 'split', 'full'].includes(input.backgroundMode) ? input.backgroundMode : 'off',
     sidebarOpacity: typeof input.sidebarOpacity === 'number' && Number.isFinite(input.sidebarOpacity) ? Math.min(1, Math.max(0, input.sidebarOpacity)) : .06,
+    rightSidebarOpacity: typeof input.rightSidebarOpacity === 'number' && Number.isFinite(input.rightSidebarOpacity) ? Math.min(1, Math.max(0, input.rightSidebarOpacity)) : typeof input.sidebarOpacity === 'number' && Number.isFinite(input.sidebarOpacity) ? Math.min(1, Math.max(0, input.sidebarOpacity)) : .06,
     railOpacity: typeof input.railOpacity === 'number' && Number.isFinite(input.railOpacity) ? Math.min(1, Math.max(0, input.railOpacity)) : .3,
     bakerOpacity: typeof input.bakerOpacity === 'number' && Number.isFinite(input.bakerOpacity) ? Math.min(1, Math.max(0, input.bakerOpacity)) : .5,
     classicUserOpacity: typeof input.classicUserOpacity === 'number' && Number.isFinite(input.classicUserOpacity) ? Math.min(1, Math.max(0, input.classicUserOpacity)) : .5,
     sidebarBlur: materialBlurOr(input.sidebarBlur, DEFAULT_PREFERENCES.sidebarBlur),
+    rightSidebarBlur: materialBlurOr(input.rightSidebarBlur, materialBlurOr(input.sidebarBlur, DEFAULT_PREFERENCES.sidebarBlur)),
     railBlur: materialBlurOr(input.railBlur, DEFAULT_PREFERENCES.railBlur),
     bakerBlur: materialBlurOr(input.bakerBlur, DEFAULT_PREFERENCES.bakerBlur),
     classicUserBlur: materialBlurOr(input.classicUserBlur, DEFAULT_PREFERENCES.classicUserBlur),

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

@@ -771,8 +771,10 @@ export function createThemeController({ document, window, cssText, service, curs
       root.dataset.prtsBackgroundMode = preferences.backgroundMode
       root.style.setProperty('--prts-background-shade', `${preferences.backgroundDim * 100}%`)
       for (const name of ['sidebar', 'rail', 'baker']) root.style.setProperty(`--prts-${name}-opacity`, `${preferences[`${name}Opacity`] * 100}%`)
+      root.style.setProperty('--prts-right-sidebar-opacity', `${preferences.rightSidebarOpacity * 100}%`)
       root.style.setProperty('--prts-classic-user-opacity', `${preferences.classicUserOpacity * 100}%`)
       for (const name of ['sidebar', 'rail', 'baker']) root.style.setProperty(`--prts-${name}-blur`, `${preferences[`${name}Blur`]}px`)
+      root.style.setProperty('--prts-right-sidebar-blur', `${preferences.rightSidebarBlur}px`)
       root.style.setProperty('--prts-classic-user-blur', `${preferences.classicUserBlur}px`)
       refresh()
     },

package/src/client/theme-transfer-panel.js

@@ -1,4 +1,4 @@
-import { THEME_PACKAGE_LIMIT, validateThemePackage, describeThemePackage } from './theme-transfer.js'
+import { THEME_PACKAGE_LIMIT, validateThemePackage, describeThemePackage, ignoredThemePackageFields } from './theme-transfer.js'
 
 export function themeTransferMarkup() {
   return `<dialog data-prts-transfer-dialog aria-labelledby="prts-transfer-title">
@@ -20,6 +20,7 @@ export function themeTransferMarkup() {
       </div>
       <div data-prts-transfer-preview hidden>
         <strong>确认导入</strong><p data-prts-transfer-summary></p>
+        <p data-prts-transfer-compatibility hidden role="alert"></p>
         <small>应用前会下载当前配置备份，请保留备份文件。</small>
         <div data-prts-transfer-buttons><button type="button" data-prts-transfer-apply>确认导入</button><button type="button" data-prts-transfer-cancel>取消</button></div>
       </div>
@@ -43,6 +44,7 @@ export function mountThemeTransfer({ panel, window, transfer }) {
   const render = () => {
     if (disposed) return
     get('preview').hidden = !pending
+    if (!pending) get('compatibility').hidden = true
     get('recovery').hidden = !transfer.hasBackup
     for (const control of section.querySelectorAll('button,input')) control.disabled = busy
     // Prevent local editors from racing a multi-service import; other clients use revision checks.
@@ -72,6 +74,12 @@ export function mountThemeTransfer({ panel, window, transfer }) {
       if (disposed || selected !== generation) return ''
       pending = value
       get('summary').textContent = describeThemePackage(value)
+      const ignored = ignoredThemePackageFields(value)
+      const compatibility = get('compatibility')
+      compatibility.hidden = ignored.length === 0
+      compatibility.textContent = ignored.length
+        ? `当前版本不支持以下配置，导入后将丢失：${ignored.join('、')}。请保留原文件。`
+        : ''
       return '已读取文件，请确认导入内容。'
     })
   }

package/src/client/theme-transfer.js

@@ -7,6 +7,33 @@ const transferRoles = ['user', 'assistant']
 const transferBuiltins = ['rhodes-island', 'lungmen', 'penguin-logistics', 'rhine-lab', 'reunion']
 const record = value => value !== null && typeof value === 'object' && !Array.isArray(value)
 const encodedImage = (value, limit) => typeof value === 'string' && value.length > 0 && value.length <= Math.ceil(limit / 3) * 4 && value.length % 4 === 0 && /^[A-Za-z0-9+/]+={0,2}$/.test(value)
+const unknownFields = (value, known, prefix) => record(value)
+  ? Object.keys(value).filter(key => !known.includes(key)).map(key => `${prefix}.${key}`)
+  : []
+
+export function ignoredThemePackageFields(value) {
+  const ignored = unknownFields(value.preferences, Object.keys(DEFAULT_PREFERENCES), '设置')
+  const assets = value.assets
+  if (!assets) return ignored
+  ignored.push(...unknownFields(assets, ['backgrounds', 'backgroundRegions', 'avatars', 'emblems'], '素材'))
+  ignored.push(...unknownFields(assets.backgrounds, transferSlots, '背景'))
+  ignored.push(...unknownFields(assets.backgroundRegions, transferSlots, '背景保护区域'))
+  for (const slot of transferSlots) ignored.push(...unknownFields(assets.backgroundRegions?.[slot], ['x', 'y', 'width', 'height'], `背景保护区域.${slot}`))
+  ignored.push(...unknownFields(assets.avatars, transferRoles, '头像'))
+  for (const role of transferRoles) {
+    ignored.push(...unknownFields(assets.avatars?.[role], ['image', 'crop'], `头像.${role}`))
+    ignored.push(...unknownFields(assets.avatars?.[role]?.crop, ['zoom', 'x', 'y'], `头像.${role}.crop`))
+  }
+  const emblems = assets.emblems
+  ignored.push(...unknownFields(emblems, ['items', 'hero', 'conversation'], '徽记'))
+  for (const [index, item] of (emblems?.items ?? []).entries()) {
+    ignored.push(...unknownFields(item, ['format', 'version', 'label', 'params', 'image'], `徽记.items[${index}]`))
+    ignored.push(...unknownFields(item?.params, ['mode', 'lineSource', 'cleanup', 'threshold', 'zoom', 'x', 'y'], `徽记.items[${index}].params`))
+  }
+  ignored.push(...unknownFields(emblems?.hero, ['kind', 'key', 'label', 'asset'], '徽记.hero'))
+  for (const [index, entry] of (emblems?.conversation ?? []).entries()) ignored.push(...unknownFields(entry, ['kind', 'key', 'label', 'asset'], `徽记.conversation[${index}]`))
+  return ignored
+}
 
 export function validateThemePackage(value) {
   if (!record(value) || value.format !== 'prts-theme' || value.version !== 1) throw Error('不支持的主题文件格式或版本')

package/src/styles/custom-background.css

@@ -11,8 +11,27 @@ html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-side
 & [data-prts-region="sessions"]{background-position:center,calc(var(--prts-wall-x) - var(--prts-nav-width)) var(--prts-protected-sidebar-y, 50%)}
 }
 html[data-dsh-prts][data-prts-rail-mode="overlay"]:is([data-prts-background-mode="split"][data-prts-background-sidebar],[data-prts-background-mode="full"][data-prts-background-full]) [data-prts-nav-rail] { background: transparent; }
-html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conversation] [data-prts-region="operation"] {
-background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-conversation) var(--prts-protected-conversation-x, 50%) var(--prts-protected-conversation-y, 50%) / cover no-repeat;
+html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conversation] {
+& [data-prts-region="frame"] { background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-conversation) var(--prts-protected-conversation-x, 50%) var(--prts-protected-conversation-y, 50%) / cover no-repeat; }
+& [data-prts-region="operation"] { background: transparent; }
+&:not([data-prts-background-sidebar]) [data-prts-region="sessions"] { background: transparent; }
+}
+/* The native right dock paints an opaque tab host over the frame wallpaper. */
+html[data-dsh-prts]:is([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"][data-prts-background-conversation]) [data-prts-region="auxiliary"] { background: transparent; }
+html[data-dsh-prts]:is([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"][data-prts-background-conversation]) [data-prts-region="auxiliary"] :is([data-dockkit-host="dock"] > :first-child,[data-dockkit-empty]) {
+position: relative;
+isolation: isolate;
+background: transparent;
+}
+html[data-dsh-prts]:is([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"][data-prts-background-conversation]) [data-prts-region="auxiliary"] :is([data-dockkit-host="dock"] > :first-child,[data-dockkit-empty])::before {
+content: "";
+position: absolute;
+inset: 0;
+z-index: -1;
+pointer-events: none;
+background: color-mix(in srgb, var(--prts-panel) var(--prts-right-sidebar-opacity, 6%), transparent);
+-webkit-backdrop-filter: blur(var(--prts-right-sidebar-blur, 8px)) saturate(1.15);
+backdrop-filter: blur(var(--prts-right-sidebar-blur, 8px)) saturate(1.15);
 }
 html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-ambient-layer],
 html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conversation] [data-prts-ambient-layer] { display: none !important; }
@@ -74,8 +93,7 @@ html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full]
 html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] [data-prts-region="sessions"] [data-slot="sidebar.workspaces"] span[class$="_fade"] { display: none !important; }
 
 /* Filter the plate, not the ancestor of fixed controls. */
-html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-region="sessions"]::before,
-html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] [data-prts-region="sessions"]::before {
+html[data-dsh-prts]:is([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"]:is([data-prts-background-sidebar],[data-prts-background-conversation])) [data-prts-region="sessions"]::before {
 content: "";
 position: absolute;
 inset: 0;
@@ -87,8 +105,7 @@ backdrop-filter: blur(var(--prts-sidebar-blur, 8px)) saturate(1.15);
 box-shadow: inset -1px 0 color-mix(in srgb, var(--prts-ink) 10%, transparent), inset 0 1px rgb(255 255 255 / 8%);
 }
 /* Raise sidebar controls above glass. */
-html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-region="sessions"] [data-slot="sidebar"] > :first-child,
-html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] [data-prts-region="sessions"] [data-slot="sidebar"] > :first-child {
+html[data-dsh-prts]:is([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"]:is([data-prts-background-sidebar],[data-prts-background-conversation])) [data-prts-region="sessions"] [data-slot="sidebar"] > :first-child {
 position: relative;
 z-index: 1;
 }
@@ -273,13 +290,16 @@ border-radius: 6px;
 background: var(--prts-background-full, linear-gradient(135deg, #8bb6c2, #c7b69c)) center / cover;
 --prts-preview-surface: var(--prts-panel);
 }
-html[data-prts-background-mode="split"] :is([data-prts-material-preview="sidebarOpacity"],[data-prts-material-preview="railOpacity"]) { background-image: var(--prts-background-sidebar, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
+html[data-prts-background-mode="split"] [data-prts-material-preview="sidebarOpacity"] { background-image: var(--prts-background-sidebar, var(--prts-background-conversation, linear-gradient(135deg, #8bb6c2, #c7b69c))); }
+html[data-prts-background-mode="split"] [data-prts-material-preview="rightSidebarOpacity"] { background-image: var(--prts-background-conversation, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
+html[data-prts-background-mode="split"] [data-prts-material-preview="railOpacity"] { background-image: var(--prts-background-sidebar, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
 html[data-prts-background-mode="split"] [data-prts-material-preview="bakerOpacity"] { background-image: var(--prts-background-conversation, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
 html[data-prts-background-mode="split"] [data-prts-material-preview="classicUserOpacity"] { background-image: var(--prts-background-conversation, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
 [data-prts-material-preview]::before { content: ""; position: absolute; inset: 0; background: var(--prts-background-wash); }
 [data-prts-material-preview-surface] { position: absolute; inset: 0; display: grid; align-content: center; gap: 6px; padding: 10px; font-size: 10px; text-align: left; color: var(--prts-ink); background: color-mix(in srgb, var(--prts-preview-surface) var(--prts-sidebar-opacity, 6%), transparent); backdrop-filter: blur(var(--prts-sidebar-blur, 8px)) saturate(1.15); }
 [data-prts-material-preview-surface] i { display: block; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--prts-ink) 18%, transparent); }
 [data-prts-material-preview-surface] i:last-child { width: 65%; }
+[data-prts-material-preview="rightSidebarOpacity"] [data-prts-material-preview-surface] { background: color-mix(in srgb, var(--prts-preview-surface) var(--prts-right-sidebar-opacity, 6%), transparent); backdrop-filter: blur(var(--prts-right-sidebar-blur, 8px)) saturate(1.15); }
 [data-prts-material-preview="railOpacity"] [data-prts-material-preview-surface] { inset: 0 auto 0 0; width: 40%; padding: 5px; justify-items: center; gap: 2px; background: color-mix(in srgb, var(--prts-preview-surface) var(--prts-rail-opacity, 30%), transparent); backdrop-filter: blur(var(--prts-rail-blur, 12px)) saturate(1.15); }
 [data-prts-material-preview="bakerOpacity"] [data-prts-material-preview-surface] { inset: 16px 10px; border-radius: 0 10px 10px 10px; background: rgb(69 70 68 / var(--prts-baker-opacity, 50%)); backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08); }
 html[data-prts-scheme="light"] [data-prts-material-preview="bakerOpacity"] [data-prts-material-preview-surface] { background: rgb(223 227 223 / var(--prts-baker-opacity, 50%)); }

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

@@ -970,6 +970,7 @@ html[data-dsh-prts] [data-prts-transfer] {
   & [data-prts-transfer-file-hint] { display:grid; place-items:center; flex:1; gap:6px; padding:12px; border:1px dashed var(--prts-line-strong); }
   & [data-prts-transfer-file-hint] > span { font-size:24px; color:var(--prts-muted); }
   & [data-prts-transfer-buttons] { display:flex; gap:8px; }
+  & [data-prts-transfer-compatibility] { margin:0; padding:10px 12px; border:1px solid var(--prts-yellow); overflow-wrap:anywhere; }
   & [data-prts-transfer-recovery] { border:0; border-top:1px solid var(--prts-line); padding:16px 0 0; }
   & [data-prts-transfer-status]:empty { display:none; }
 }