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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web and the official desktop client",
@@ -75,7 +75,7 @@
     "@playwright/test": "1.55.1",
     "esbuild": "^0.28.2",
     "jsdom": "24.1.3",
-    "markdown-it": "^14.3.2"
+    "markdown-it": "^14.3.3"
   },
   "dependencies": {
     "@deepseek-ai/schemastery": "~3.18.4",

package/src/client/background-layout.js

@@ -0,0 +1,59 @@
+import { backgroundPlacement } from '../shared/background-region.js'
+
+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
+  const set=(name,value)=>{if(root.style.getPropertyValue(name)!==value) root.style.setProperty(name,value)}
+  const update=()=>{
+    frame=undefined
+    if(disposed||!observing)return
+    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)
+    }
+    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 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
+      if(active){
+        const p=backgroundPlacement(entry.width,entry.height,width,height,entry.region)
+        set(`--prts-protected-${slot}-x`,`${p.x}px`)
+        set(`--prts-protected-${slot}-y`,`${p.y}px`)
+        if(slot==='sidebar')set('--prts-protected-sidebar-width',`${p.width}px`)
+      }else{
+        root.style.removeProperty(`--prts-protected-${slot}-x`)
+        root.style.removeProperty(`--prts-protected-${slot}-y`)
+        if(slot==='sidebar')root.style.removeProperty('--prts-protected-sidebar-width')
+      }
+    }
+  }
+  function schedule(){if(!disposed && observing && frame===undefined)frame=raf(update)}
+  const resize=window.ResizeObserver?new window.ResizeObserver(schedule):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
+    for(const slot of ['full','conversation','sidebar'])for(const axis of ['x','y','width'])root.style.removeProperty(`--prts-protected-${slot}-${axis}`)
+  }
+  function reconcile(){
+    if(disposed || !enabled || !['full','conversation','sidebar'].some(slot=>state[slot]?.region)){clear();return}
+    if(!observing){
+      observing=true
+      mutations.observe(document.body||root,{childList:true,subtree:true})
+      attributes.observe(root,{attributes:true,attributeFilter:['data-prts-background-mode','data-prts-rail-mode']})
+      window.addEventListener('resize',schedule)
+    }
+    schedule()
+  }
+  return {update(value){state=value;reconcile()},setEnabled(value){enabled=value;reconcile()},dispose(){disposed=true;clear()}}
+}

package/src/client/background-region-editor.js

@@ -0,0 +1,103 @@
+import { backgroundPlacement } from '../shared/background-region.js'
+
+export function backgroundRegionMarkup(slot) {
+  return `<dialog data-prts-region-editor="${slot}" aria-labelledby="prts-region-title-${slot}">
+    <header><div><strong id="prts-region-title-${slot}">保护重要区域</strong><p>拖动框移动，拖动四边或四角缩放。横向优先保留中心，纵向优先保留顶端。</p></div><button type="button" data-prts-region-cancel aria-label="关闭保护区域设置">×</button></header>
+    <div data-prts-region-workspace><section data-prts-region-original><strong>原图与保护框</strong><div data-prts-region-stage><img alt="背景原图" draggable="false"><div data-prts-region-box tabindex="0" role="group" aria-label="保护区域，方向键移动"><span>保护区域</span>${['nw','ne','sw','se','n','e','s','w'].map((corner,i)=>`<button type="button" data-prts-region-handle="${corner}" aria-label="调整${['左上角','右上角','左下角','右下角','上边','右边','下边','左边'][i]}，使用方向键"></button>`).join('')}</div><div data-prts-region-ruler="x"></div><div data-prts-region-ruler="y"></div></div><small>边缘刻度为图片坐标。可用方向键移动，Shift 加速。</small></section>
+    <section data-prts-region-samples><strong>窗口裁剪预览</strong><p>${slot==='sidebar' ? '按当前侧栏高度等比例预览，包含导航栏背景。' : '白框标出保护区域，调整时同步更新。'}</p><div data-prts-region-preview-grid>${(slot==='sidebar' ? [['narrow','较窄侧栏 · 264px'],['wide','较宽侧栏 · 420px']] : [['wide','横向窗口 · 16:9'],['narrow','纵向窗口 · 9:16']]).map(([kind,label])=>`<figure><figcaption>${label}</figcaption><div data-prts-region-preview="${kind}"><i></i></div><small data-prts-region-warning hidden>此比例无法完整显示保护区域：横向保中心，纵向保顶端。</small></figure>`).join('')}</div></section></div>
+    <footer><button type="button" data-prts-region-create>恢复默认框</button><button type="button" data-prts-region-clear>清除保护区域</button><span></span><button type="button" data-prts-region-cancel>取消</button><button type="button" data-prts-region-save>保存</button></footer><p data-prts-region-status role="status"></p>
+  </dialog>`
+}
+export function mountBackgroundRegionEditor({section,window,store}) {
+  let state=store.snapshot(), active, draft=null, revision, imageId, busy=false, disposed=false, drag
+  const clamp=(v,min,max)=>Math.max(min,Math.min(max,v))
+  const defaultRegion=()=>({x:.25,y:.2,width:.5,height:.6})
+  const editor=()=>active && section.querySelector(`[data-prts-region-editor="${active}"]`)
+  function draw(){
+    const el=editor(),entry=state[active];if(!el||!entry)return
+    const box=el.querySelector('[data-prts-region-box]')
+    box.hidden=!draft
+    if(draft)Object.assign(box.style,{left:`${draft.x*100}%`,top:`${draft.y*100}%`,width:`${draft.width*100}%`,height:`${draft.height*100}%`})
+    for(const axis of ['x','y']){
+      const ruler=el.querySelector(`[data-prts-region-ruler="${axis}"]`)
+      ruler.innerHTML=[0,25,50,75,100].filter(v=>!draft||Math.abs(v-draft[axis]*100)>8).map(v=>`<span style="${axis==='x'?'left':'top'}:${v}%">${v}</span>`).join('')
+      if(draft)ruler.innerHTML+=`<b style="${axis==='x'?'left':'top'}:${draft[axis]*100}%">${Math.round(draft[axis]*100)}%</b>`
+    }
+    const previews=[...el.querySelectorAll('[data-prts-region-preview]')]
+    const sidebarHeight=section.ownerDocument.querySelector('[data-prts-region="sessions"]')?.clientHeight||window.innerHeight
+    const railWidth=parseFloat(window.getComputedStyle(section.ownerDocument.documentElement).getPropertyValue('--prts-nav-width'))||0
+    // DSH 0.2.1-rc.2 clamps the sidebar track to 264–420px; use the same scale for both samples.
+    const sidebarScale=Math.min(240/Math.max(1,sidebarHeight),...previews.map(preview=>Math.max(1,preview.parentElement.clientWidth)/((preview.dataset.prtsRegionPreview==='narrow'?264:420)+railWidth)))
+    for(const preview of previews){
+      const narrow=preview.dataset.prtsRegionPreview==='narrow'
+      const w=active==='sidebar'?((narrow?264:420)+railWidth)*sidebarScale:Math.max(1,Math.min(narrow?112:200,preview.parentElement.clientWidth))
+      const h=active==='sidebar'?sidebarHeight*sidebarScale:w*(narrow?16/9:9/16)
+      const p=backgroundPlacement(entry.width,entry.height,w,h,draft)
+      Object.assign(preview.style,{width:`${w}px`,height:`${h}px`,backgroundImage:`url("/prts-theme-api/backgrounds/image/${entry.id}")`,backgroundSize:`${p.width}px ${p.height}px`,backgroundPosition:`${p.x}px ${p.y}px`})
+      const mark=preview.firstElementChild;mark.hidden=!draft
+      if(draft)Object.assign(mark.style,{left:`${p.x+draft.x*p.width}px`,top:`${p.y+draft.y*p.height}px`,width:`${draft.width*p.width}px`,height:`${draft.height*p.height}px`})
+      preview.parentElement.querySelector('[data-prts-region-warning]').hidden=!p.clipped
+    }
+    for(const button of el.querySelectorAll('button'))button.disabled=busy
+  }
+  const resize=window.ResizeObserver ? new window.ResizeObserver(()=>{if(!disposed)draw()}) : null
+  function close(){window.removeEventListener('resize',draw);resize?.disconnect();const el=editor();el?.querySelector('[data-prts-region-stage]').style.removeProperty('cursor');if(el?.open)el.close();if(active)section.querySelector(`[data-prts-background-region-open="${active}"]`)?.focus();active=undefined;drag=undefined}
+  function open(slot){
+    if(busy)return
+    close();const entry=state[slot];if(!entry?.width||!entry?.height)return
+    active=slot;revision=state.revision;imageId=entry.id;draft=entry.region?{...entry.region}:defaultRegion()
+    const el=editor();el.showModal();resize?.observe(el)
+    if(slot==='sidebar'){const sidebar=section.ownerDocument.querySelector('[data-prts-region="sessions"]');if(sidebar)resize?.observe(sidebar)}
+    window.addEventListener('resize',draw)
+    el.querySelector('[data-prts-region-stage]').style.width=`min(100%, ${Math.min(640,360*entry.width/entry.height)}px)`
+    el.querySelector('img').src=`/prts-theme-api/backgrounds/image/${entry.id}`
+    el.querySelector('[data-prts-region-status]').textContent=''
+    draw()
+  }
+  async function save(){
+    if(busy||!active)return
+    const el=editor(),slot=active,region=draft?{...draft}:null
+    busy=true;draw();el.querySelector('[data-prts-region-status]').textContent='正在保存…'
+    try{await store.saveRegion(slot,region,revision);if(!disposed){close();section.querySelector('[data-prts-background-status]').textContent='保护区域已保存，并同步到其他页面。';section.querySelector(`[data-prts-background-region-open="${slot}"]`).focus()}}
+    catch(error){if(!disposed)el.querySelector('[data-prts-region-status]').textContent=error.message+' 请取消后重新打开编辑。'}
+    finally{busy=false;if(!disposed)draw()}
+  }
+  const click=event=>{
+    const openButton=event.target.closest('[data-prts-background-region-open]');if(openButton){open(openButton.dataset.prtsBackgroundRegionOpen);return}
+    if(!active||busy)return
+    if(event.target.closest('[data-prts-region-cancel]'))close()
+    else if(event.target.closest('[data-prts-region-save]'))void save()
+    else if(event.target.closest('[data-prts-region-create]')){draft=defaultRegion();draw();editor().querySelector('[data-prts-region-box]').focus()}
+    else if(event.target.closest('[data-prts-region-clear]')){draft=null;draw()}
+  }
+  const down=event=>{
+    const el=editor(),stage=event.target.closest('[data-prts-region-stage]')
+    if(busy||!draft||!stage||!el?.contains(stage)||!event.target.closest('[data-prts-region-box]')||event.button!==0)return
+    event.preventDefault();const bounds=stage.getBoundingClientRect();if(!bounds.width||!bounds.height)return
+    const x=clamp((event.clientX-bounds.left)/bounds.width,0,1),y=clamp((event.clientY-bounds.top)/bounds.height,0,1)
+    drag={x,y,bounds,initial:{...draft},corner:event.target.dataset.prtsRegionHandle,id:event.pointerId}
+    stage.style.cursor=window.getComputedStyle(event.target).cursor
+    stage.setPointerCapture?.(event.pointerId);draw()
+  }
+  function adjust(initial,dx,dy,corner){
+    if(!corner)return {...initial,x:clamp(initial.x+dx,0,1-initial.width),y:clamp(initial.y+dy,0,1-initial.height)}
+    let left=initial.x,top=initial.y,right=left+initial.width,bottom=top+initial.height
+    if(corner.includes('w'))left=clamp(left+dx,0,right-.01);else if(corner.includes('e'))right=clamp(right+dx,left+.01,1)
+    if(corner.includes('n'))top=clamp(top+dy,0,bottom-.01);else if(corner.includes('s'))bottom=clamp(bottom+dy,top+.01,1)
+    return {x:left,y:top,width:/[ew]/.test(corner)?right-left:initial.width,height:/[ns]/.test(corner)?bottom-top:initial.height}
+  }
+  const move=event=>{if(!drag||event.pointerId!==drag.id)return;draft=adjust(drag.initial,(event.clientX-drag.bounds.left)/drag.bounds.width-drag.x,(event.clientY-drag.bounds.top)/drag.bounds.height-drag.y,drag.corner);draw()}
+  const up=event=>{if(drag&&event.pointerId===drag.id){if(event.type==='pointercancel')draft=drag.initial;drag=undefined;editor()?.querySelector('[data-prts-region-stage]').style.removeProperty('cursor');draw()}}
+  const key=event=>{
+    if(!active||busy)return
+    if(event.key==='Escape'){event.preventDefault();event.stopPropagation();close();return}
+    if(!draft||!event.target.closest('[data-prts-region-box]')||!['ArrowLeft','ArrowRight','ArrowUp','ArrowDown'].includes(event.key))return
+    event.preventDefault();const step=event.shiftKey ? .05 : .01
+    draft=adjust(draft,event.key==='ArrowLeft'?-step:event.key==='ArrowRight'?step:0,event.key==='ArrowUp'?-step:event.key==='ArrowDown'?step:0,event.target.dataset.prtsRegionHandle);draw()
+  }
+  const cancel=event=>{if(event.target.matches('[data-prts-region-editor]')){event.preventDefault();event.stopPropagation();if(!busy)close()}}
+  section.addEventListener('cancel',cancel,true)
+  const handlers={click,pointerdown:down,pointermove:move,pointerup:up,pointercancel:up,keydown:key}
+  for(const [name,fn] of Object.entries(handlers))section.addEventListener(name,fn)
+  return {update(value,mode){state=value;if(active&&(state[active]?.id!==imageId||mode==='off'||(mode==='full')!==(active==='full')))close()},dispose(){disposed=true;close();section.removeEventListener('cancel',cancel,true);for(const [name,fn] of Object.entries(handlers))section.removeEventListener(name,fn)}}
+}

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

@@ -14,6 +14,8 @@ function closestWithClassSuffix(node, suffix) {
 function classify(button, operation) {
   // The host's process disclosure owns its transparent, full-width hit area.
   if (button.hasAttribute('data-turn-process')) return null
+  // Notification headers belong to the card surface, not standalone buttons.
+  if (button.parentElement?.matches('[data-turn-trigger]')) return null
   // Changed-file cards own one outer surface; their header and rows stay native.
   if (button.closest('[data-changed-files]')) return null
   // File previews are transparent hit targets; the enclosing card owns its material and outline.

package/src/client/cursor-adapter.js

@@ -69,7 +69,7 @@ export function createCursorAdapter({ document, window, assets }) {
     const target = event.target?.nodeType === 1 ? event.target : event.target?.parentElement
     if (target === resizeTarget && target.style.cursor === resizeApplied) return
     clearResize()
-    if (!target) return
+    if (!target || target.closest('[data-prts-region-stage]')) return
     const cursor = window.getComputedStyle(target).cursor
     const direction = { 'n-resize': 'ns', 's-resize': 'ns', 'ns-resize': 'ns', 'row-resize': 'ns',
       'e-resize': 'ew', 'w-resize': 'ew', 'ew-resize': 'ew', 'col-resize': 'ew',

package/src/client/custom-background.js

@@ -1,3 +1,5 @@
+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: '完整背景' }
@@ -7,10 +9,12 @@ function backgroundImageUrl(entry) {
 export function createBackgroundStore({ window, document }) {
   let state = { revision: -1, sidebar: null, conversation: null, full: null }, disposed = false, events, refreshing
   const listeners = new Set()
+  const layout = createBackgroundLayout({window,document})
   const abort = window.AbortController ? new window.AbortController() : null
   const apply = value => {
     if (disposed || value.revision < state.revision) return
     state = value
+    layout.update(state)
     for (const slot of Object.keys(backgroundLabels)) {
       const url = backgroundImageUrl(state[slot])
       const root = document.documentElement
@@ -48,12 +52,18 @@ export function createBackgroundStore({ window, document }) {
   window.addEventListener('focus', focus)
   return {
     snapshot: () => state, refresh,
+    setEnabled: value => layout.setEnabled(value),
     subscribe(fn) { listeners.add(fn); fn(state); return () => listeners.delete(fn) },
     async save(slot, image, revision = state.revision) {
       try { return await request({ slot, image, revision }) }
       catch (error) { await refresh().catch(() => {}); throw error }
     },
+    async saveRegion(slot, region, revision = state.revision) {
+      try { return await request({ slot, region, revision }) }
+      catch (error) { await refresh().catch(() => {}); throw error }
+    },
     dispose() {
+      layout.dispose()
       document.documentElement.style.removeProperty('--prts-sidebar-image-ratio')
       disposed = true; abort?.abort(); events?.close(); listeners.clear(); window.removeEventListener('focus', focus)
       for (const slot of Object.keys(backgroundLabels)) {
@@ -63,7 +73,7 @@ export function createBackgroundStore({ window, document }) {
     },
   }
 }
-export function backgroundMarkup() {
+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="背景模式">
@@ -71,12 +81,16 @@ export function backgroundMarkup() {
     </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>
-      <button type="button" data-prts-background-upload="${slot}" aria-label="上传或替换${label}"><span data-prts-background-thumbnail="${slot}" aria-hidden="true"></span><span data-prts-background-caption="${slot}">＋ 选择图片</span></button>
+      <div data-prts-background-image-controls="${slot}"><span data-prts-background-thumbnail="${slot}" aria-hidden="true"></span><span data-prts-background-empty>尚未选择图片</span>
+        <div data-prts-background-image-actions><button type="button" data-prts-background-region-open="${slot}" hidden><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M7 3H3v4m10-4h4v4M3 13v4h4m10-4v4h-4"/><rect x="6.5" y="6.5" width="7" height="7" rx="1.5"/></svg><span>保护区域</span></button><button type="button" data-prts-background-upload="${slot}" aria-label="上传或替换${label}"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="3" y="3" width="14" height="14" rx="3"/><path d="m4 14 4-4 3 3 2-2 4 4"/><circle cx="12.5" cy="7" r="1"/></svg><span data-prts-background-caption="${slot}">选择图片</span></button></div>
+      </div>
+      ${backgroundRegionMarkup(slot)}
       <input type="file" data-prts-background-file="${slot}" accept="image/png,image/jpeg,image/webp,image/avif" hidden>
     </article>`).join('')}</div>
     <label data-prts-background-shade hidden><span>背景淡化 <output></output></span><input type="range" min="0" max="90" step="5" aria-label="背景淡化程度"><small>调高后背景更淡，接近当前主题底色。</small></label>
+    <div data-prts-background-hero-setting hidden>${heroContrastControl}</div>
     ${opacityDialMarkup()}
-    <small data-prts-background-help>支持 PNG / JPEG / WebP / AVIF · 最大 10 MB<br>图片居中铺满，切换模式保留素材，并在当前 DSH 实例同步。</small><p data-prts-background-status role="status"></p>
+    <small data-prts-background-help>支持 PNG / JPEG / WebP / AVIF · 最大 10 MB<br>图片铺满，可框选重要区域优先保留。切换模式保留素材，并在当前 DSH 实例同步。</small><p data-prts-background-status role="status"></p>
   </section>`
 }
 export function mountBackgroundSettings({ panel, window, store, onChange }) {
@@ -85,9 +99,11 @@ export function mountBackgroundSettings({ panel, window, store, onChange }) {
   let disposed = false, busy = false, preferences = {}, state = store.snapshot()
   const status = section.querySelector('[data-prts-background-status]')
   const range = section.querySelector('input[type="range"]')
+  const regions = mountBackgroundRegionEditor({section,window,store})
   const dials = mountOpacityDials({ section, window, onChange })
   function render() {
     dials.update(preferences, state)
+    regions.update(state, preferences.backgroundMode || 'off')
     const mode = preferences.backgroundMode || 'off'
     section.querySelector('[data-prts-background-images]').hidden = mode === 'off'
     section.querySelector('[data-prts-background-shade]').hidden = mode === 'off'
@@ -96,10 +112,11 @@ export function mountBackgroundSettings({ panel, window, store, onChange }) {
     for (const slot of Object.keys(backgroundLabels)) {
       const url = backgroundImageUrl(state[slot])
       section.querySelector(`[data-prts-background-card="${slot}"]`).hidden = mode === 'off' || (mode === 'full') !== (slot === 'full')
-      section.querySelector(`[data-prts-background-upload="${slot}"]`).toggleAttribute('data-has-image', Boolean(url))
+      section.querySelector(`[data-prts-background-image-controls="${slot}"]`).toggleAttribute('data-has-image', Boolean(url))
       section.querySelector(`[data-prts-background-thumbnail="${slot}"]`).style.backgroundImage = url ? `url("${url}")` : ''
-      section.querySelector(`[data-prts-background-caption="${slot}"]`).textContent = url ? '替换图片' : '＋ 选择图片'
+      section.querySelector(`[data-prts-background-caption="${slot}"]`).textContent = url ? '替换图片' : '选择图片'
       section.querySelector(`[data-prts-background-remove="${slot}"]`).hidden = !url
+      section.querySelector(`[data-prts-background-region-open="${slot}"]`).hidden = !url
     }
     for (const button of section.querySelectorAll('[data-prts-background-upload], [data-prts-background-remove]')) button.disabled = busy
   }
@@ -138,6 +155,6 @@ export function mountBackgroundSettings({ panel, window, store, onChange }) {
   const unsubscribe = store.subscribe(value => { state = value; render() })
   return {
     update(value) { preferences = value; render() },
-    dispose() { disposed = true; dials.dispose(); unsubscribe(); section.removeEventListener('click', click); section.removeEventListener('change', change); section.removeEventListener('input', input) },
+    dispose() { disposed = true; regions.dispose(); dials.dispose(); unsubscribe(); section.removeEventListener('click', click); section.removeEventListener('change', change); section.removeEventListener('input', input) },
   }
 }

package/src/client/index.js

@@ -1,3 +1,4 @@
+import { createThemeTransfer } from './theme-transfer.js'
 import { createBackgroundStore } from './custom-background.js'
 import { createNativePreferences } from './native-preferences.js'
 import { createComposerGlassSurface } from './composer-glass-surface.js'
@@ -91,6 +92,7 @@ export function applyPrtsPlugin(ctx, environment) {
     cssText,
     service: themeService,
     cursorAssets: assets.cursor,
+    onSchemeChange() { particleField.repaintScheme() },
     onTransitionStateChange(active) {
       particleField.setSchemeTransitionActive(active)
     },
@@ -111,6 +113,7 @@ export function applyPrtsPlugin(ctx, environment) {
   const adapter = createRc7Adapter({ document })
   const hostGeometry = createHostGeometryAdapter({ document, window })
   const connection = contextService(ctx, 'connection')
+  let themeTransfer
   let operations
   let mountObserver
   let mountFrame
@@ -176,6 +179,7 @@ export function applyPrtsPlugin(ctx, environment) {
   }
 
   const disposeVisualState = () => {
+    backgroundStore.setEnabled(false)
     particleField.update({ ...preferences, enabled: false })
     startup.stop({ restoreFocus: false })
     stopStartupReadyWatch()
@@ -198,9 +202,13 @@ export function applyPrtsPlugin(ctx, environment) {
       disposeVisualState()
       return
     }
+    backgroundStore.setEnabled(preferences.backgroundMode !== 'off')
     if (!themeAlreadyApplied) theme.apply(preferences)
     operations ||= createOperationsShell({
       document, window, assets, adapter, hostGeometry, customEmblemStore, avatarStore, backgroundStore,
+      themeTransfer: themeTransfer ||= createThemeTransfer({ window, getPreferences: () => nativePreferences.value,
+        savePreferences: (value, revision) => nativePreferences.replace(value, revision),
+        checkWritable: () => nativePreferences.checkWritable(), checkExport: () => nativePreferences.checkReadable(), themeVersion: version }),
       onSchemeToggle(next, interaction) {
         return theme.setTheme(next, { ...interaction, animate: true })
       },
@@ -347,6 +355,7 @@ export function applyPrtsPlugin(ctx, environment) {
   } else {
     applyVisualState()
   }
+  const stopBackgroundRedraw = backgroundStore.subscribe(() => { if (!safeMode) particleField.update(preferences) })
   const bindNativePreferences = settingsCtx => {
     const forms = contextService(settingsCtx, 'configForms')
     if (forms) settingsCtx.effect(() => nativePreferences.bind(forms.get('theme-prts')))
@@ -359,6 +368,7 @@ export function applyPrtsPlugin(ctx, environment) {
     statusSource.dispose()
     customEmblemStore.dispose()
     avatarStore.dispose()
+    stopBackgroundRedraw()
     backgroundStore.dispose()
     particleField.dispose()
     startup.dispose({ restoreFocus: false })

package/src/client/native-preferences.js

@@ -69,6 +69,37 @@ export function createNativePreferences({ storage, onChange }) {
   }
   return {
     get value() { return current },
+    checkReadable() {
+      const s = snapshot()
+      if (disposed || s?.status !== 'ready') throw Error('请等待 DSH 设置加载完成')
+      if (busy || Object.keys(pending).length || Object.keys(failed).length) throw Error('请先等待当前设置保存成功')
+      return s.revision
+    },
+    checkWritable() {
+      const revision = this.checkReadable()
+      if (!writable(snapshot())) throw Error('当前连接无法保存主题设置')
+      return revision
+    },
+    async replace(next, expectedRevision) {
+      this.checkWritable()
+      const s = snapshot()
+      if (s.revision !== expectedRevision) throw Error('设置已在其他页面更新，请重新导入')
+      const normalized = normalizePreferences(next)
+      busy = true
+      phase = 'saving'; emit()
+      try {
+        const ops = Object.entries(normalized).map(([key, value]) => ({ op: 'set', path: [key], value }))
+        ops.push({ op: 'set', path: ['preferencesInitialized'], value: true })
+        if (await form.mutate(ops, s.revision) !== true) throw Error('DSH 未接受导入设置，请重试')
+        phase = 'saved'
+      } catch (error) {
+        phase = 'error'
+        throw error
+      } finally {
+        busy = false
+        receive()
+      }
+    },
     bind(next) {
       unsubscribe?.(); form = next
       unsubscribe = form.subscribe(receive)

package/src/client/operations-shell-v2.js

@@ -46,7 +46,7 @@ export function createOperationsShell({
   onSchemeToggle = () => {},
   onSchemeDragStart = () => undefined,
   onThemeDisable = () => {},
-  customEmblemStore, avatarStore, backgroundStore,
+  customEmblemStore, avatarStore, backgroundStore, themeTransfer,
   onPreferenceChange = () => {},
   onPreferencePreview = () => {},
   onVisualReset = () => {},
@@ -481,7 +481,7 @@ export function createOperationsShell({
       trigger: shell.querySelector('[data-prts-rail-brand]'),
       panel: shell.querySelector('[data-prts-theme-settings]'),
       backdrop: shell.querySelector('[data-prts-settings-backdrop]'),
-      customEmblemStore, avatarStore, backgroundStore,
+      customEmblemStore, avatarStore, backgroundStore, themeTransfer,
       onPreferenceChange,
       onPreferencePreview,
       onResetVisual: onVisualReset,

package/src/client/particle-field-adapter.js

@@ -432,7 +432,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   const densityProfile = density => PARTICLE_DENSITY_PROFILES[density] ?? PARTICLE_DENSITY_PROFILES.standard
   const particleRadius = density => densityProfile(density ?? activeDensity()).radius
   const fieldEnabled = () => heroActive || (preferences.conversationStyle !== 'deck-chat' && preferences.conversationEmblem !== false)
-  const canRenderFrame = () => fieldEnabled() && !disposed && documentVisible && canvasVisible && !hydrationPaused && !startupPaused && !schemeTransitionPaused && !resizing
+  const canRenderFrame = (paintOnly = false) => fieldEnabled() && !disposed && documentVisible && canvasVisible && !hydrationPaused && !startupPaused && (paintOnly || !schemeTransitionPaused) && !resizing
   const layoutWidth = () => width
   const layoutHeight = () => height
   const layoutShiftX = () => 0
@@ -1134,12 +1134,25 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     resizeTimer = window.setTimeout?.(finishResizeTransaction, RESIZE_SETTLE_MS)
   }
 
+  function resizeHeroTransition(nextSize) {
+    // Keep live positions and velocities; the spring follows the new destination.
+    // Snapping to particle.target here would restore the old hero mid-explosion.
+    clearResizeState()
+    pointerActive = false
+    resizeCommits += applyFieldSize(nextSize) ? 1 : 0
+  }
+
   function onOperationResize(entries = []) {
     if (!operation || !canvas) return
     resizeObservations += 1
     const entry = entries.find(candidate => candidate.target === operation) ?? entries[0]
     const contentRect = entry?.contentRect
     pendingResizeSize = contentRect ? sizeFromRect(contentRect) : readOperationSize()
+    if (transition?.fromHero && !phoneStatic()) {
+      resizeHeroTransition(pendingResizeSize)
+      updateFrameGate()
+      return
+    }
     if (phoneStatic()) {
       const nextSize = pendingResizeSize
       clearResizeState()
@@ -1289,21 +1302,30 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     if (queuedDensity !== undefined && (queuedDensity !== particles.length || force)) startDensityReassembly(queuedDensity, force)
   }
 
-  function draw(timestamp) {
+  function heroContrastStrength() {
+    const root = document.documentElement
+    const imageVisible = preferences.backgroundMode === 'full'
+      ? root.hasAttribute('data-prts-background-full')
+      : preferences.backgroundMode === 'split' && root.hasAttribute('data-prts-background-conversation')
+    if (preferences.heroContrast === false || !imageVisible) return 0
+    return heroActive ? 1 : transition?.fromHero ? 1 - easeInOut(transition.progress) : 0
+  }
+
+  function draw(timestamp, paintOnly = false) {
     frame = undefined
     if (!ambient || !canvas) return
-    if (!canRenderFrame()) return
+    if (!canRenderFrame(paintOnly)) return
     if (geometryDirty) {
       syncCanvasBackingStore()
       geometryDirty = false
     }
-    if (transition) {
+    if (transition && !paintOnly) {
       transitionStartedAt ??= timestamp
       transition.progress = clamp((timestamp - transitionStartedAt) / TRANSITION_MS, 0, 1)
       if (transition.progress >= 1) completeTransition()
     }
 
-    advanceDensity(timestamp)
+    if (!paintOnly) advanceDensity(timestamp)
     const reducedMotion = motionReduced()
     const staticPhone = phoneStatic()
     const staticField = reducedMotion || staticPhone
@@ -1322,7 +1344,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     }
     const frameGeometry = { activeLayout, staticField, transitionLayout }
     const { center, size: fieldSize } = activeLayout
-    const follow = reducedMotion ? 1 : 0.035
+    const follow = paintOnly ? 0 : reducedMotion ? 1 : 0.035
     glowX += (center.x - glowX) * follow
     glowY += (center.y - glowY) * follow
     if (glow) glow.style.transform = 'translate3d(calc(' + glowX.toFixed(2) + 'px - 50%), calc(' + glowY.toFixed(2) + 'px - 50%), 0)'
@@ -1337,19 +1359,31 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
       const damping = heroPhysics ? 0.86 : 0.84
       const pointerForce = heroPhysics ? 2.2 : 2.7
       const lightScheme = document.documentElement.dataset.prtsScheme === 'light'
-      const baseAlpha = lightScheme ? 0.66 : 0.72
-      const radiusScale = lightScheme ? 1.12 : 1
+      const contrast = heroContrastStrength()
+      if (contrast > 0 && context.createRadialGradient) {
+        const origin = heroActive ? center : transition.fromCenter
+        const radius = (heroActive ? fieldSize : transition.fromSize) * .78
+        const shade = lightScheme ? '248,250,252' : '7,14,22'
+        const gradient = context.createRadialGradient(origin.x, origin.y, 0, origin.x, origin.y, radius)
+        gradient.addColorStop(0, `rgba(${shade},${.58 * contrast})`)
+        gradient.addColorStop(.42, `rgba(${shade},${.42 * contrast})`)
+        gradient.addColorStop(1, `rgba(${shade},0)`)
+        context.fillStyle = gradient
+        context.fillRect(origin.x - radius, origin.y - radius, radius * 2, radius * 2)
+      }
+      const baseAlpha = (lightScheme ? 0.66 : 0.72) + .16 * contrast
+      const radiusScale = (lightScheme ? 1.12 : 1) * (1 + .08 * contrast)
       const particleBatches = typeof context.moveTo === 'function' ? new Map() : null
 
       for (const particle of particles) {
         const target = targetPosition(particle, frameGeometry)
-        if (staticField) {
+        if (staticField && !paintOnly) {
           particle.x = target.x
           particle.y = target.y
           particle.vx = 0
           particle.vy = 0
         }
-        if (!staticField) {
+        if (!staticField && !paintOnly) {
           particle.vx += (target.x - particle.x) * spring
           particle.vy += (target.y - particle.y) * spring
 
@@ -1412,6 +1446,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
       canvas.setAttribute('data-prts-particle-ready', '')
       canvas.style.visibility = ''
     }
+    if (paintOnly) return
     const explicitMotion = Boolean(densityTransition || transition)
     const animatedField = !staticField && context && particles.length
     if (explicitMotion) {
@@ -1550,7 +1585,15 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     }
     transitionStartedAt = undefined
     pointerActive = false
-    scheduleFrame()
+    // The initial message may have paused hydration before syncHeroState ran.
+    // Let this short exit finish uninterrupted by subsequent response updates.
+    cancelHydrationResume()
+    hydrationPaused = false
+    mutationBurstScore = 0
+    if (mutationBurstTimer !== undefined) window.clearTimeout?.(mutationBurstTimer)
+    mutationBurstTimer = undefined
+    if (pendingResizeSize) resizeHeroTransition(pendingResizeSize)
+    updateFrameGate()
   }
 
   function syncHeroState() {
@@ -1612,7 +1655,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   }
 
   function registerContentMutations(mutations) {
-    if (!fieldEnabled() || phoneStatic()) return
+    if (!fieldEnabled() || phoneStatic() || transition?.fromHero) return
     let weight = mutations.length
     for (const mutation of mutations) {
       for (const node of [...mutation.addedNodes, ...mutation.removedNodes]) {
@@ -1780,6 +1823,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     if (context && particles.length) {
       syncCanvasBackingStore()
       geometryDirty = false
+      cancelFrame()
       draw(Number(window.performance?.now?.()) || 0)
     } else {
       canvas.setAttribute('data-prts-particle-ready', '')
@@ -1847,6 +1891,11 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
       startupPaused = next
       updateFrameGate()
     },
+    repaintScheme() {
+      cancelFrame()
+      draw(Number(window.performance?.now?.()) || 0, true)
+      if (!schemeTransitionPaused) scheduleFrame()
+    },
     setSchemeTransitionActive(active) {
       const next = Boolean(active)
       if (schemeTransitionPaused === next) return
@@ -1888,10 +1937,13 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
 
       findMount()
       if (!fieldEnabled()) resetTraversal()
-      const previousActiveDensity = heroActive
+      const previousRequestedDensity = heroActive
         ? previousPreferences.heroParticleDensity
         : previousPreferences.conversationParticleDensity
-      const activeDensityChanged = previousActiveDensity !== undefined && previousActiveDensity !== activeDensity()
+      // Compare effective densities on both sides: sparse/light hero settings
+      // already render at standard density, including after a focus refresh.
+      const previousActiveDensity = heroActive ? effectiveHeroDensity(previousRequestedDensity) : previousRequestedDensity
+      const activeDensityChanged = previousRequestedDensity !== undefined && previousActiveDensity !== activeDensity()
       reportState({ requestedPattern: 'orthogonal' })
       if (particles.length && activeDensityChanged) scheduleDensityReassembly(targetParticleCount(), true)
       if (preservedTraversalCoordinate !== undefined && scroller && !heroActive) reanchorTraversal(preservedTraversalCoordinate)
@@ -1929,6 +1981,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
         enabled: fieldEnabled(),
         mounted: Boolean(ambient?.isConnected && canvas?.isConnected),
         hero: heroActive,
+        heroContrast: heroContrastStrength(),
         side,
         emblemKey: (heroActive || transition?.fromHero ? heroEmblem() : emblemForSegment(segment))?.key,
         nextEmblemKey: transition ? emblemForSegment(transition.targetSegment)?.key : null,

package/src/client/preferences.js

@@ -27,6 +27,7 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   composerGlass: false,
   backgroundMode: 'off',
   backgroundDim: .45,
+  heroContrast: true,
   sidebarOpacity: .06,
   railOpacity: .3,
   bakerOpacity: .5,
@@ -99,7 +100,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', 'sidebarOpacity', 'railOpacity', 'bakerOpacity', 'classicUserOpacity', 'sidebarBlur', 'railBlur', 'bakerBlur', 'classicUserBlur']),
+  background: Object.freeze(['texture', 'backgroundMode', 'backgroundDim', 'heroContrast', 'sidebarOpacity', 'railOpacity', 'bakerOpacity', 'classicUserOpacity', 'sidebarBlur', 'railBlur', 'bakerBlur', 'classicUserBlur']),
   particles: Object.freeze(['conversationParticleDensity', 'heroParticleDensity', 'particleTraversalSpeed']),
   material: Object.freeze(['glass', 'composerGlass']),
   accessibility: Object.freeze(['motion', 'bootAnimation', 'cursor']),
@@ -220,6 +221,7 @@ export function normalizePreferences(value) {
     railBlur: materialBlurOr(input.railBlur, DEFAULT_PREFERENCES.railBlur),
     bakerBlur: materialBlurOr(input.bakerBlur, DEFAULT_PREFERENCES.bakerBlur),
     classicUserBlur: materialBlurOr(input.classicUserBlur, DEFAULT_PREFERENCES.classicUserBlur),
+    heroContrast: booleanOr(input.heroContrast, DEFAULT_PREFERENCES.heroContrast),
     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),