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

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

@@ -1,3 +1,4 @@
+import { createSessionCardReveal } from './session-card-reveal.js'
 import { createSessionSummaryPreview, scrollSummaryTitle } from './session-summary-preview.js'
 import { ensureFacilityGraphic, ensureFacilityTextureDefs, renderFacilityGraphic } from './facility-vector.js'
 import { createSessionLifelineAnimator } from './session-lifeline.js'
@@ -353,7 +354,11 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
     queueScan()
   }
   function interruptSelectionTarget(event) {
-    if (event.target.closest?.('[data-prts-session-row]')) clearSelectionTarget()
+    if (event.target.closest?.('[data-prts-session-row]')) {
+      cancelPendingNavigation()
+      cancelReveal()
+      clearSelectionTarget()
+    }
   }
   function setSelectionTarget(id) {
     clearSelectionTarget()
@@ -362,27 +367,41 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
     document.addEventListener('pointerdown', interruptSelectionTarget, true)
   }
 
-  let pendingReveal, revealTimer, revealFrame, revealSettleTimer
+  let pendingReveal, revealTimer
   let navigationFrame, navigationGeneration = 0
   function cancelPendingNavigation() {
     navigationGeneration++
     window.cancelAnimationFrame?.(navigationFrame)
   }
   function cancelReveal() {
+    pendingReveal?.tracker?.cancel()
     pendingReveal = undefined
     window.clearTimeout(revealTimer)
-    window.clearTimeout(revealSettleTimer)
-    window.cancelAnimationFrame?.(revealFrame)
+    for (const type of ['wheel','touchmove','pointerdown','keydown']) document.removeEventListener(type, interruptReveal, true)
   }
-  function revealSessionCard(sessionId) {
+  function interruptReveal(event) {
+    if (!event.target?.closest?.('[data-prts-region="sessions"]')) return
+    if (event.type === 'keydown' && !['ArrowUp','ArrowDown','PageUp','PageDown','Home','End',' '].includes(event.key)) return
+    cancelPendingNavigation()
     cancelReveal()
-    pendingReveal = {sessionId, attempts: 0}
-    revealTimer = window.setTimeout(cancelReveal, 4000)
+    clearSelectionTarget()
+  }
+  function revealSessionCard(sessionId, onDone) {
+    pendingReveal?.tracker?.interrupt()
+    cancelReveal()
+    pendingReveal = {sessionId, onDone}
+    revealTimer = window.setTimeout(finishReveal, 4000)
+    for (const type of ['wheel','touchmove','pointerdown','keydown']) document.addEventListener(type, interruptReveal, {capture:true, passive:true})
     const root = document?.querySelector?.('[data-prts-region="sessions"] [data-slot="sidebar.workspaces"]')
     syncSessionReveal(root)
     queueScan()
     return Boolean(pendingReveal?.expanding)
   }
+  function finishReveal() {
+    const onDone = pendingReveal?.onDone
+    cancelReveal()
+    onDone?.()
+  }
   function syncSessionReveal(root) {
     if (!pendingReveal || !root) return
     const {sessionId} = pendingReveal
@@ -390,30 +409,14 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
     const row = rows.find(el => el.getAttribute('data-row-key') === `session:${sessionId}`
       || el.getAttribute('data-session-id') === sessionId)
     if (row) {
-      if (pendingReveal.scrolling) return
-      const request = pendingReveal
-      request.scrolling = true
-      // Let React finish mounting and let the host's row glide settle before scrolling.
-      revealFrame = window.requestAnimationFrame(async () => {
-        const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
-        const animations = []
-        if (!reduced) for (let node = row; node && node !== root; node = node.parentElement) {
-          for (const animation of node.getAnimations?.() ?? []) {
-            const timing = animation.effect?.getComputedTiming?.()
-            if (animation.playState === 'running' && Number.isFinite(timing?.endTime)) animations.push(animation.finished)
-          }
-        }
-        if (animations.length) await Promise.race([
-          Promise.allSettled(animations),
-          new Promise(resolve => { revealSettleTimer = window.setTimeout(resolve, 300) }),
-        ])
-        if (pendingReveal !== request || !row.isConnected) return
-        row.scrollIntoView?.({block:'nearest', inline:'nearest', behavior:reduced ? 'instant' : 'smooth'})
-        cancelReveal()
-      })
+      if (!pendingReveal.tracker) {
+        const request = pendingReveal
+        request.tracker = createSessionCardReveal({window, root, sessionId, onStart: () => window.clearTimeout(revealTimer), onDone: () => {
+          if (pendingReveal === request) finishReveal()
+        }})
+      }
       return
     }
-    if (++pendingReveal.attempts > 40) { cancelReveal(); return }
     const items = snapshotOf(workspaces?.list)?.items ?? []
     const owner = items.find(item => item.sessionIds?.includes(sessionId))
     const key = owner?.workspaceId ?? ''
@@ -439,7 +442,6 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
     closeNavigationPreview()
     cancelPendingNavigation()
     setSelectionTarget(sessionId)
-    revealSessionCard(sessionId)
     const generation = navigationGeneration
     const navigate = () => {
       if (generation !== navigationGeneration || !adapterActive) return
@@ -462,11 +464,14 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
       if (row) row.click?.()
       else clearSelectionTarget()
     }
-    // Paint selection and expansion before the host synchronously mounts another conversation.
-    // Already-expanded workspaces need this too: queueScan has not applied selection yet.
-    navigationFrame = window.requestAnimationFrame(() => {
-      if (generation !== navigationGeneration) return
-      navigationFrame = window.requestAnimationFrame(navigate)
+    // Finish sidebar motion first, then paint its final position before the host can block.
+    revealSessionCard(sessionId, () => {
+      if (generation !== navigationGeneration || !adapterActive) return
+      setSelectionTarget(sessionId)
+      navigationFrame = window.requestAnimationFrame(() => {
+        if (generation !== navigationGeneration) return
+        navigationFrame = window.requestAnimationFrame(navigate)
+      })
     })
   }
 

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

@@ -1,3 +1,4 @@
+import { validBackgroundRegion } from '../shared/background-region.js'
 import { DEFAULT_PREFERENCES, normalizePreferences } from './preferences.js'
 
 export const THEME_PACKAGE_LIMIT = 160 * 1024 * 1024
@@ -6,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('不支持的主题文件格式或版本')
@@ -22,6 +50,7 @@ export function validateThemePackage(value) {
   const a = value.assets
   if (!record(a) || !record(a.backgrounds) || !record(a.avatars) || !record(a.emblems)) throw Error('主题素材数据不完整')
   for (const slot of transferSlots) if (a.backgrounds[slot] !== null && !encodedImage(a.backgrounds[slot], 10 * 1024 * 1024)) throw Error('背景图片数据无效')
+  if (a.backgroundRegions !== undefined && (!record(a.backgroundRegions) || transferSlots.some(slot => !validBackgroundRegion(a.backgroundRegions[slot] ?? null)))) throw Error('背景保护区域无效')
   for (const role of transferRoles) {
     const avatar = a.avatars[role]
     if (avatar === null) continue
@@ -72,10 +101,11 @@ export function createThemeTransfer({ window, getPreferences, savePreferences, c
     const value = { format: 'prts-theme', version: 1, themeVersion, exportedAt: new Date().toISOString(), preferences: { ...getPreferences() } }
     const states = {}
     if (includeAssets) {
-      const backgrounds = {}, avatars = {}, items = [], ids = new Map()
+      const backgrounds = {}, backgroundRegions = {}, avatars = {}, items = [], ids = new Map()
       states.backgrounds = await request('backgrounds/configuration')
       for (const slot of transferSlots) {
         const entry = states.backgrounds[slot]
+        backgroundRegions[slot] = entry?.region ?? null
         backgrounds[slot] = null
         if (entry) {
           if (!/^[a-f0-9-]{36}$/.test(entry.id)) throw Error('背景引用无效')
@@ -102,7 +132,7 @@ export function createThemeTransfer({ window, getPreferences, savePreferences, c
       }
       const hero = await reference(states.emblems.configuration.hero), conversation = []
       for (const entry of states.emblems.configuration.conversation) conversation.push(await reference(entry))
-      value.assets = { backgrounds, avatars, emblems: { items, hero, conversation } }
+      value.assets = { backgrounds, backgroundRegions, avatars, emblems: { items, hero, conversation } }
       for (const kind of ['backgrounds', 'avatars', 'emblems']) {
         if ((await request(kind + '/configuration')).revision !== states[kind].revision) throw Error('素材在导出期间发生变化，请重试')
       }
@@ -146,7 +176,7 @@ export function createThemeTransfer({ window, getPreferences, savePreferences, c
         for (const item of a.emblems.items) drafts.push(await request('emblems/import', item))
         const entry = (ref, index) => ref === null ? null : ref.kind === 'builtin' ? ref : { kind: 'custom', key: 'import-' + index + '-' + drafts[ref.asset].draftId, label: ref.label, draftId: drafts[ref.asset].draftId }
         const configuration = { version: 2, hero: entry(a.emblems.hero, 'hero'), conversation: a.emblems.conversation.map(entry) }
-        for (const slot of transferSlots) await write('backgrounds', { slot, image: a.backgrounds[slot] }, { slot, image: old.backgrounds[slot] })
+        for (const slot of transferSlots) await write('backgrounds', { slot, image: a.backgrounds[slot], region: a.backgroundRegions?.[slot] ?? null }, { slot, image: old.backgrounds[slot], region: old.backgroundRegions?.[slot] ?? null })
         for (const role of transferRoles) await write('avatars', { role, image: a.avatars[role]?.image ?? null, crop: a.avatars[role]?.crop }, { role, image: old.avatars[role]?.image ?? null, crop: old.avatars[role]?.crop })
         await write('emblems', { configuration }, { configuration: before.states.emblems.configuration })
       }

package/src/server/backgrounds.js

@@ -2,6 +2,7 @@ import { mkdir, readFile, writeFile, rename, rm } from 'node:fs/promises'
 import { join } from 'node:path'
 import { randomUUID } from 'node:crypto'
 import sharp from 'sharp'
+import { validBackgroundRegion } from '../shared/background-region.js'
 import { body, json, isBase64 } from './api.js'
 import { fault } from './emblems.js'
 
@@ -26,8 +27,11 @@ export async function createBackgroundService(directory) {
       const task = queue.then(async () => {
         if (!BACKGROUND_SLOTS.includes(data?.slot)) throw fault(400, '背景区域无效')
         if (data.revision !== state.revision) throw fault(409, '背景已在其他页面更新，请重新操作')
-        let entry = null, output
-        if (data.image !== null) {
+        const regionOnly = Object.hasOwn(data, 'region') && !Object.hasOwn(data, 'image')
+        if (Object.hasOwn(data, 'region') && !validBackgroundRegion(data.region)) throw fault(400, '背景保护区域无效')
+        if (regionOnly && !state[data.slot]) throw fault(400, '请先上传背景图片')
+        let entry = regionOnly ? { ...state[data.slot], region: data.region } : null, output
+        if (!regionOnly && data.image !== null) {
           if (!isBase64(data.image) || data.image.length > 14 * 1024 * 1024) throw fault(400, '请上传不超过 10 MB 的图片')
           const bytes = Buffer.from(data.image, 'base64')
           if (!bytes.length || bytes.length > 10 * 1024 * 1024) throw fault(400, '请上传不超过 10 MB 的图片')
@@ -37,22 +41,22 @@ export async function createBackgroundService(directory) {
             if (!['png', 'jpeg', 'webp', 'avif'].includes(metadata.format)) throw Error('format')
             const result = await input.rotate().resize({ width: 3840, height: 2160, fit: 'inside', withoutEnlargement: true }).webp({ quality: 86 }).toBuffer({ resolveWithObject: true })
             output = result.data
-            entry = { id: randomUUID(), width: result.info.width, height: result.info.height }
+            entry = { id: randomUUID(), width: result.info.width, height: result.info.height, region: data.region ?? null }
           } catch { throw fault(400, '无法读取图片，请使用 PNG、JPEG、WebP 或 AVIF（最多 4000 万像素）') }
         }
         const next = { ...state, revision: state.revision + 1, [data.slot]: entry }
         const temporary = configurationPath + '.' + randomUUID() + '.tmp'
         try {
-          if (entry) await writeFile(join(directory, entry.id + '.webp'), output, { mode: 0o600 })
+          if (output) await writeFile(join(directory, entry.id + '.webp'), output, { mode: 0o600 })
           await writeFile(temporary, JSON.stringify(next), { mode: 0o600 })
           await rename(temporary, configurationPath)
         } catch (error) {
-          if (entry) await rm(join(directory, entry.id + '.webp'), { force: true }).catch(() => {})
+          if (output) await rm(join(directory, entry.id + '.webp'), { force: true }).catch(() => {})
           throw error
         } finally { await rm(temporary, { force: true }).catch(() => {}) }
         const previous = state[data.slot]
         state = next
-        if (previous) await rm(join(directory, previous.id + '.webp'), { force: true }).catch(() => {})
+        if (previous && previous.id !== entry?.id) await rm(join(directory, previous.id + '.webp'), { force: true }).catch(() => {})
         for (const listener of listeners) { try { listener(state.revision) } catch {} }
         return snapshot()
       })

package/src/shared/background-region.js

@@ -0,0 +1,21 @@
+// Coordinates are fractions of the oriented, stored image.
+export function validBackgroundRegion(region) {
+  return region === null || (region && typeof region === 'object' && !Array.isArray(region)
+    && ['x','y','width','height'].every(key => Number.isFinite(region[key]))
+    && region.x >= 0 && region.y >= 0 && region.width > 0 && region.height > 0
+    && region.x + region.width <= 1.000001 && region.y + region.height <= 1.000001)
+}
+export function backgroundPlacement(imageWidth, imageHeight, width, height, region = null) {
+  if (![imageWidth,imageHeight,width,height].every(v => Number.isFinite(v) && v > 0)) return {x:0,y:0,width:0,height:0,clipped:false}
+  const scale = Math.max(width / imageWidth, height / imageHeight)
+  const w = imageWidth * scale, h = imageHeight * scale
+  const clamp = (v,a,b) => Math.max(a,Math.min(b,v))
+  const axis = (size, viewport, start, length, vertical = false) => {
+    const centered = (viewport-size)/2
+    if (!region) return centered
+    if (length*size > viewport) return clamp(vertical ? -start*size : viewport/2-(start+length/2)*size,viewport-size,0)
+    return clamp(centered, Math.max(viewport-size,-start*size), Math.min(0,viewport-(start+length)*size))
+  }
+  return {x:axis(w,width,region?.x,region?.width),y:axis(h,height,region?.y,region?.height,true),width:w,height:h,
+    clipped:Boolean(region && (region.width*w > width+.01 || region.height*h > height+.01))}
+}

package/src/styles/cursor.css

@@ -33,3 +33,11 @@
 html[data-dsh-prts] :is([data-prts-emblem-sort-active],[data-prts-emblem-sort-active] *) {
   cursor: var(--prts-sort-cursor, grabbing) !important;
 }
+
+/* The crop surface uses one native cursor family, including during pointer capture. */
+html[data-dsh-prts] [data-prts-region-stage] { cursor:default; }
+html[data-dsh-prts] [data-prts-region-stage] [data-prts-region-box] { cursor:move; }
+html[data-dsh-prts] [data-prts-region-stage] [data-prts-region-handle] { cursor:ns-resize!important; }
+html[data-dsh-prts] [data-prts-region-stage] :is([data-prts-region-handle="e"],[data-prts-region-handle="w"]) { cursor:ew-resize!important; }
+html[data-dsh-prts] [data-prts-region-stage] :is([data-prts-region-handle="nw"],[data-prts-region-handle="se"]) { cursor:nwse-resize!important; }
+html[data-dsh-prts] [data-prts-region-stage] :is([data-prts-region-handle="ne"],[data-prts-region-handle="sw"]) { cursor:nesw-resize!important; }

package/src/styles/custom-background.css

@@ -1,18 +1,37 @@
 /* Viewport-aligned wallpaper. */
 html[data-dsh-prts] { --prts-background-wash: color-mix(in srgb, var(--prts-canvas) var(--prts-background-shade, 45%), transparent); }
 html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] :is([data-prts-region="frame"], [data-prts-nav-rail]) {
-background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-full) center / cover fixed;
+background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-full) var(--prts-protected-full-x, 50%) var(--prts-protected-full-y, 50%) / cover fixed;
 }
 html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] :is([data-prts-region="sessions"], [data-prts-region="operation"]) { background: transparent; }
 html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] {
---prts-wall-width:max(calc(var(--prts-sidebar-width,280px) + var(--prts-nav-width)),calc((100dvh - var(--prts-host-top-inset)) * var(--prts-sidebar-image-ratio,1)));
---prts-wall-x:calc((var(--prts-sidebar-width,280px) + var(--prts-nav-width) - var(--prts-wall-width)) / 2);
-& :is([data-prts-region="sessions"],[data-prts-nav-rail]){background:linear-gradient(var(--prts-background-wash),var(--prts-background-wash)),var(--prts-background-sidebar) var(--prts-wall-x) center / var(--prts-wall-width) auto no-repeat}
-& [data-prts-region="sessions"]{background-position:center,calc(var(--prts-wall-x) - var(--prts-nav-width)) center}
+--prts-wall-width:var(--prts-protected-sidebar-width,max(calc(var(--prts-sidebar-width,280px) + var(--prts-nav-width)),calc((100dvh - var(--prts-host-top-inset)) * var(--prts-sidebar-image-ratio,1))));
+--prts-wall-x:var(--prts-protected-sidebar-x,calc((var(--prts-sidebar-width,280px) + var(--prts-nav-width) - var(--prts-wall-width)) / 2));
+& :is([data-prts-region="sessions"],[data-prts-nav-rail]){background:linear-gradient(var(--prts-background-wash),var(--prts-background-wash)),var(--prts-background-sidebar) var(--prts-wall-x) var(--prts-protected-sidebar-y, 50%) / var(--prts-wall-width) auto no-repeat}
+& [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) center / 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; }
@@ -34,13 +53,23 @@ html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conv
 [data-prts-background-images] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
 [data-prts-background-card="full"] { grid-column: 1 / -1; }
 [data-prts-background-card-heading] { display: flex; justify-content: space-between; align-items: center; min-height: 30px; margin-bottom: 6px; font-size: 13px; }
-[data-prts-background-upload] { position: relative; display: grid; place-items: center; width: 100%; height: 120px; padding: 0; border: 1px dashed var(--prts-line); border-radius: 8px; color: var(--prts-muted); background: var(--prts-panel); overflow: hidden; cursor: pointer; }
-[data-prts-background-card="full"] [data-prts-background-upload] { height: 155px; }
-[data-prts-background-upload][data-has-image] { border-style: solid; }
-[data-prts-background-upload]:hover { border-color: var(--prts-cyan); color: var(--prts-ink); }
-[data-prts-background-thumbnail] { position: absolute; inset: 0; background: center / cover no-repeat; }
-[data-prts-background-caption] { position: relative; padding: 6px 12px; border-radius: 5px; font-size: 12px; }
-[data-has-image] [data-prts-background-caption] { align-self: end; justify-self: end; margin: 8px; background: var(--prts-panel); color: var(--prts-ink); box-shadow: 0 1px 5px #0003; }
+[data-prts-background-image-controls] { position:relative;display:grid;place-items:center;min-height:140px;border:1px dashed var(--prts-line);border-radius:8px;background:var(--prts-panel);overflow:hidden; }
+[data-prts-background-card="full"] [data-prts-background-image-controls] { min-height:180px; }
+[data-prts-background-image-controls][data-has-image] { border-style:solid; }
+[data-prts-background-thumbnail] { position:absolute;inset:0;background:center / cover no-repeat;pointer-events:none; }
+[data-prts-background-empty] {font-size:12px;color:var(--prts-muted);padding-bottom:40px}
+[data-has-image] [data-prts-background-empty] {visibility:hidden}
+/* One compact toolbar stays legible over either bright or dark photography. */
+[data-prts-background-image-actions] {position:absolute;bottom:10px;right:10px;display:flex;align-items:center;gap:2px;padding:2px;border:1px solid #ffffff26;border-radius:7px;background:rgb(20 26 30 / 82%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 8px #0002;color:#edf2f3}
+[data-prts-background-image-actions] button {display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:26px;padding:4px 7px;border:0;border-radius:5px;background:transparent;color:inherit;box-shadow:none;font:500 11px/1.2 var(--prts-body);white-space:nowrap;cursor:pointer;transition:background-color 120ms ease,color 120ms ease}
+[data-prts-background-image-actions] button + button {position:relative}
+[data-prts-background-image-actions] button + button::before {content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:1px;background:#ffffff24}
+[data-prts-background-image-actions] button[hidden] + button::before {display:none}
+[data-prts-background-image-actions] svg {width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
+[data-prts-background-image-actions] button:hover {background:#ffffff18;color:#fff}
+[data-prts-background-image-actions] button:active {background:#ffffff28}
+[data-prts-background-image-actions] button:disabled {opacity:.45;cursor:wait}
+[data-prts-background-settings] [data-prts-background-image-actions] button:focus-visible {outline:2px solid #b9e6ee;outline-offset:-2px}
 [data-prts-background-remove] { padding: 4px 8px; background: transparent; color: var(--prts-muted); border: 0; border-radius: 4px; font-size: 12px; cursor: pointer; }
 [data-prts-background-remove]:hover { color: var(--prts-red); background: color-mix(in srgb, var(--prts-red) 8%, transparent); }
 [data-prts-background-shade] { display: grid; gap: 8px; font-size: 13px; padding-top: 14px; border-top: 1px solid var(--prts-line); }
@@ -64,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;
@@ -77,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;
 }
@@ -263,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%)); }
@@ -343,3 +373,49 @@ html[data-dsh-prts] [data-prts-background-hero-setting][hidden] { display:none;
 
 /* Windows chrome must not clip a different canvas color into the conversation. */
 html[data-dsh-prts][data-windows-titlebar] [data-prts-region="operation"] { border-radius: 0; }
+
+[data-prts-region-editor] { width:min(1000px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);box-sizing:border-box;margin:auto;padding:24px;border:1px solid var(--prts-line);border-radius:14px;background:var(--prts-panel);color:var(--prts-ink);overflow:auto; }
+[data-prts-region-editor]:not([open]) {display:none}
+[data-prts-region-editor]::backdrop {background:#0009;backdrop-filter:blur(5px)}
+[data-prts-region-editor] > header {display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:24px}
+[data-prts-region-editor] > header strong {font-size:18px}
+[data-prts-region-workspace] {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr);gap:28px}
+[data-prts-region-original],[data-prts-region-samples] {display:grid;align-content:start;gap:12px;min-width:0}
+[data-prts-region-original] {padding:0 8px 0 24px}
+[data-prts-region-stage] {margin:24px 0 12px}
+[data-prts-region-preview-grid] {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:start;margin-top:12px}
+[data-prts-region-preview-grid] figure {display:grid;justify-items:center;align-content:start;gap:12px;margin:0;min-width:0}
+[data-prts-region-preview-grid] figcaption {font-size:11px;color:var(--prts-muted)}
+[data-prts-region-editor] > footer {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--prts-line)}
+[data-prts-region-editor] > footer > span {flex:1}
+[data-prts-region-ruler] {position:absolute;pointer-events:none;color:var(--prts-muted);font:10px/1 var(--prts-mono)}
+[data-prts-region-ruler="x"] {left:0;right:0;top:-20px;height:10px;border-bottom:1px solid var(--prts-line)}
+[data-prts-region-ruler="y"] {top:0;bottom:0;left:-24px;width:16px;border-right:1px solid var(--prts-line)}
+[data-prts-region-ruler] span,[data-prts-region-ruler] b {position:absolute;font-weight:400}
+[data-prts-region-ruler="x"] span,[data-prts-region-ruler="x"] b {transform:translateX(-50%)}
+[data-prts-region-ruler="y"] span,[data-prts-region-ruler="y"] b {transform:translateY(-50%)}
+[data-prts-region-ruler] b {background:var(--prts-panel);color:var(--prts-cyan);z-index:1}
+@media(max-width:760px){[data-prts-region-editor]{padding:18px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}[data-prts-region-workspace]{grid-template-columns:1fr}[data-prts-region-preview-grid]{grid-template-columns:1fr 1fr}[data-prts-region-editor] > footer > span{display:none}}
+[data-prts-region-editor] p { margin:0;font-size:12px;color:var(--prts-muted); }
+[data-prts-region-stage] { position:relative;max-width:100%;justify-self:center;touch-action:none;user-select:none;cursor:default; }
+[data-prts-region-stage] img { display:block;width:100%;height:auto;pointer-events:none; }
+[data-prts-region-box] { position:absolute;box-sizing:border-box;border:2px solid #fff;outline:1px solid #111;box-shadow:0 0 0 1px #111;background:#ffffff08;cursor:move;touch-action:none; }
+[data-prts-region-box] > span { position:absolute;top:4px;left:4px;background:#111b;color:#fff;font-size:10px;white-space:nowrap;pointer-events:none; }
+[data-prts-region-handle] { position:absolute;width:16px!important;height:16px!important;min-width:0!important;padding:0!important;border:1px solid #111!important;background:#fff!important;border-radius:3px!important;touch-action:none; }
+[data-prts-region-handle="nw"] {left:-8px;top:-8px;cursor:nwse-resize}
+[data-prts-region-handle="ne"] {right:-8px;top:-8px;cursor:nesw-resize}
+[data-prts-region-handle="sw"] {left:-8px;bottom:-8px;cursor:nesw-resize}
+[data-prts-region-handle="se"] {right:-8px;bottom:-8px;cursor:nwse-resize}
+[data-prts-region-preview] { position:relative;justify-self:center;max-width:100%;overflow:hidden;background-repeat:no-repeat;border:1px solid var(--prts-line);box-sizing:content-box; }
+[data-prts-region-preview] i { position:absolute;border:1px solid #fff;box-shadow:0 0 0 1px #111;box-sizing:border-box;pointer-events:none; }
+[data-prts-region-actions] { display:flex;gap:8px;flex-wrap:wrap; }
+[data-prts-region-editor] button { padding:6px 10px;border:1px solid var(--prts-line);border-radius:5px;background:var(--prts-panel);color:var(--prts-ink);cursor:pointer;font-size:12px; }
+[data-prts-region-save] { border-color:var(--prts-cyan)!important; }
+[data-prts-region-status]:empty {display:none}
+
+[data-prts-region-editor="sidebar"] [data-prts-region-preview-grid] {grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
+
+[data-prts-region-handle="n"] {left:50%;top:-8px;transform:translateX(-50%);cursor:ns-resize}
+[data-prts-region-handle="s"] {left:50%;bottom:-8px;transform:translateX(-50%);cursor:ns-resize}
+[data-prts-region-handle="w"] {left:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}
+[data-prts-region-handle="e"] {right:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}

package/src/styles/prts.css

@@ -1907,12 +1907,12 @@ html[data-dsh-prts][data-prts-conversation-style="deck-chat"] {
   & [data-message-role="assistant"]::after,
   & :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]::before,
   & [data-message-role="user"]::before {
-    content: ""; position: absolute; top: 0; left: -9px; width: 10px; height: 18px; pointer-events: none;
+    content: ""; position: absolute; top: 0; left: -10px; width: 10px; height: 18px; pointer-events: none;
     background: var(--prts-bubble-surface, var(--prts-chat-user-surface));
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M0 0H10V18Q10 6 0 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
   }
   & :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]::before,
-  & [data-message-role="user"]::before { left: auto; right: -9px; transform: scaleX(-1); }
+  & [data-message-role="user"]::before { left: auto; right: -10px; transform: scaleX(-1); }
 }
 
 /* The upstream component replaces only the composer's two background plates. */

package/src/styles/refinement.css

@@ -393,6 +393,12 @@ html[data-dsh-prts] [data-prts-conversation-control="danger"] {
 }
 
 /* Empty session: emblem owns the upper field, composer anchors in the lower third. */
+/* Reserve the native blank header before session restoration adds its controls.
+   Otherwise its height grows from 0 to 40px after the emblem has been positioned. */
+html[data-dsh-prts] [data-phase="hero"] > [data-slot="conversation.header"] > header {
+  min-height: 40px;
+}
+
 html[data-dsh-prts] [data-prts-hero-active] {
   --prts-hero-narrow-spacer: clamp(24px, 8dvh, 72px);
   --prts-hero-wide-spacer: clamp(96px, 22dvh, 340px);

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; }
 }