@ash-qw/dsh-theme-prts 2.0.0 → 2.1.1

package/src/client/native-preferences.js

@@ -0,0 +1,92 @@
+import { DEFAULT_PREFERENCES, PRTS_STORAGE_KEY, loadPreferences, normalizePreferences } from './preferences.js'
+
+// Host snapshots are authoritative. This cache must never become a migration source.
+const NATIVE_CACHE_KEY = 'dsh.ui.prts.host-cache.v1'
+export function createNativePreferences({ storage, onChange }) {
+  let current = loadPreferences(storage)
+  let legacy = null
+  try {
+    const raw = JSON.parse(storage?.getItem(PRTS_STORAGE_KEY) || 'null')
+    if (raw && Number.isInteger(raw.version) && raw.version >= 1 && raw.version <= 12) legacy = normalizePreferences(raw)
+  } catch {}
+  try {
+    const cache = JSON.parse(storage?.getItem(NATIVE_CACHE_KEY) || 'null')
+    if (cache) { current = normalizePreferences(cache); legacy = null }
+  } catch {}
+  let form, unsubscribe, disposed = false, busy = false, revision = 0
+  let pending = {}, inFlight = {}, failed = {}, phase = 'idle', migrationAttempted = false
+  const emit = () => { if (!disposed) onChange(current, { phase, revision: ++revision }) }
+  const cache = value => { try { storage?.setItem(NATIVE_CACHE_KEY, JSON.stringify(value)) } catch {} }
+  const snapshot = () => { try { return form?.getSnapshot() } catch { return undefined } }
+  const writable = s => s?.status === 'ready' && s.writable && s.mode !== 'memory'
+  function receive() {
+    if (disposed) return
+    const s = snapshot()
+    if (s?.status !== 'ready') { emit(); return }
+    const host = normalizePreferences(s.value)
+    if (!s.value?.preferencesInitialized && legacy && !migrationAttempted && writable(s)) {
+      migrationAttempted = true
+      pending = { ...legacy, ...pending }
+    }
+    current = normalizePreferences({ ...host, ...inFlight, ...pending })
+    if (s.value?.preferencesInitialized) {
+      legacy = null
+      cache(host)
+      // Once the Host has settings, an obsolete browser must not re-migrate them.
+      try { storage?.removeItem(PRTS_STORAGE_KEY) } catch {}
+    }
+    emit()
+    void flush()
+  }
+  async function flush() {
+    if (disposed || busy || !Object.keys(pending).length) return
+    const s = snapshot()
+    if (!writable(s)) { failed = { ...failed, ...pending }; pending = {}; phase = 'error'; emit(); return }
+    busy = true
+    const patch = pending
+    inFlight = patch
+    pending = {}
+    phase = 'saving'; emit()
+    try {
+      const ops = Object.entries(patch).map(([key, value]) => ({ op: 'set', path: [key], value }))
+      ops.push({ op: 'set', path: ['preferencesInitialized'], value: true })
+      // Fixed revision: conflicts are recovered by DSH, never blindly replayed.
+      const accepted = await form.mutate(ops, s.revision)
+      if (disposed) return
+      if (accepted !== true) throw Error('Host refused settings mutation')
+      for (const key of Object.keys(patch)) delete failed[key]
+      phase = Object.keys(failed).length ? 'error' : 'saved'
+    } catch {
+      if (disposed) return
+      failed = { ...failed, ...patch }
+      for (const key of Object.keys(pending)) delete failed[key]
+      phase = 'error'
+    } finally {
+      busy = false
+      inFlight = {}
+      if (!disposed) receive()
+    }
+  }
+  return {
+    get value() { return current },
+    bind(next) {
+      unsubscribe?.(); form = next
+      unsubscribe = form.subscribe(receive)
+      receive()
+      return () => { unsubscribe?.(); unsubscribe = null; form = null }
+    },
+    update(next) {
+      if (disposed) return
+      const normalized = normalizePreferences(next)
+      for (const key of Object.keys(DEFAULT_PREFERENCES)) {
+        if (normalized[key] !== current[key]) { pending[key] = normalized[key]; delete failed[key] }
+      }
+      if (!Object.keys(pending).length) return
+      current = normalized
+      phase = 'saving'; emit()
+      void flush()
+    },
+    retry() { pending = { ...failed, ...pending }; failed = {}; void flush() },
+    dispose() { disposed = true; unsubscribe?.() },
+  }
+}

package/src/client/opacity-dial.js

@@ -0,0 +1,137 @@
+// 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: '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' },
+])
+const dialClamp = value => Math.min(100, Math.max(0, Math.round(value)))
+const dialPoint = angle => [100 + Math.cos(angle * Math.PI / 180) * 80, 100 + Math.sin(angle * Math.PI / 180) * 80]
+const dialArc = (start, end) => {
+  const [x, y] = dialPoint(start), [ex, ey] = dialPoint(end)
+  return `M ${x} ${y} A 80 80 0 ${end - start > 180 ? 1 : 0} 1 ${ex} ${ey}`
+}
+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>'
+    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>
+      <div data-prts-material-preview="${key}" aria-hidden="true"><div data-prts-material-preview-surface>${sample}</div></div>
+      <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>`
+}
+export function mountOpacityDials({ section, window, onChange }) {
+  const root = section.ownerDocument.documentElement
+  const controls = BACKGROUND_OPACITY_CONTROLS.map(definition => {
+    const container = section.querySelector(`[data-prts-opacity-control="${definition.key}"]`)
+    const svg = container.querySelector('[data-prts-opacity-dial] svg'), input = container.querySelector('[data-prts-opacity-number] input'), tail = svg.querySelector('[data-dial-tail]')
+    const blurControl = container.querySelector('[data-prts-blur-control]')
+    const blurInput = blurControl.querySelector('input'), blurOutput = blurControl.querySelector('output')
+    const materialPreview = container.querySelector('[data-prts-material-preview]')
+    let value = definition.value, saved = value, grip = null, timer
+    let blurValue = definition.blurDefault, savedBlur = blurValue
+    const paint = next => {
+      const previous = value
+      value = dialClamp(next)
+      const angle = 110 + value * 3.2, [x,y] = dialPoint(angle)
+      svg.querySelector('[data-dial-lit]').setAttribute('d', value ? dialArc(110,angle) : '')
+      const head = svg.querySelector('[data-dial-head]');head.setAttribute('cx', x);head.setAttribute('cy', y)
+      svg.setAttribute('aria-valuenow', value);svg.setAttribute('aria-valuetext', `${value}%`)
+      input.value = value
+      window.clearTimeout(timer)
+      const reach = Math.min(65, Math.abs(value - previous) * 3.2)
+      tail.setAttribute('d', reach && value !== previous ? dialArc(Math.max(110, value > previous ? angle-reach : angle), Math.min(430, value > previous ? angle : angle+reach)) : '')
+      tail.style.opacity = reach ? '.5' : '0'
+      if (reach) timer = window.setTimeout(() => {tail.style.opacity = '0'}, 160)
+    }
+    const preview = next => { paint(next);root.style.setProperty(definition.property, `${100 - value}%`) }
+    const commit = () => { if (value !== saved) { saved = value;onChange(definition.key, (100 - value) / 100) } }
+    const position = event => {
+      const b = svg.getBoundingClientRect()
+      const x = (event.clientX-b.left)/b.width*200-100, y = (event.clientY-b.top)/b.height*200-100
+      if (Math.hypot(x,y) < 35) return value
+      let angle = (Math.atan2(y,x)*180/Math.PI-110+720)%360
+      // Keep a drag on its own side of the dead zone, avoiding 100 -> 0 jumps.
+      if (angle > 320) angle = grip?.side === 'high' ? 320 : grip?.side === 'low' ? 0 : angle < 340 ? 320 : 0
+      else if (grip) grip.side = angle > 160 ? 'high' : 'low'
+      return angle/3.2
+    }
+    const down = event => {
+      if (event.button > 0 || grip) return
+      event.preventDefault();svg.focus({preventScroll:true})
+      grip = { id: event.pointerId, side: null }
+      svg.setPointerCapture?.(event.pointerId);container.setAttribute('data-dragging','')
+      preview(position(event))
+    }
+    const move = event => { if (grip?.id === event.pointerId) preview(position(event)) }
+    const finish = (event, cancel = false) => {
+      if (!grip || (event.pointerId !== undefined && grip.id !== event.pointerId)) return
+      const id = grip.id;grip = null;container.removeAttribute('data-dragging')
+      if (svg.hasPointerCapture?.(id)) svg.releasePointerCapture(id)
+      if (cancel) preview(saved);else commit()
+    }
+    const up = event => finish(event)
+    const cancel = event => finish(event,true)
+    const key = event => {
+      if (event.key === 'Escape') { if(grip){event.preventDefault();event.stopPropagation();finish(event,true)}return }
+      const step = event.shiftKey ? 10 : 1
+      const next = {ArrowRight:value+step,ArrowUp:value+step,ArrowLeft:value-step,ArrowDown:value-step,PageUp:value+10,PageDown:value-10,Home:0,End:100}[event.key]
+      if (next === undefined) return
+      event.preventDefault();preview(next);commit()
+    }
+    const change = () => { const n = input.valueAsNumber;if(!Number.isFinite(n)){paint(saved);return}preview(n);commit() }
+    const reset = () => { preview(definition.value);commit() }
+    const paintBlur = next => {
+      blurValue = Math.min(32, Math.max(0, Math.round(next)))
+      blurInput.value = blurValue
+      blurOutput.value = `${blurValue}px`
+      materialPreview.style.setProperty(definition.blurProperty, `${blurValue}px`)
+    }
+    const previewBlur = next => {
+      paintBlur(next)
+      if (root.hasAttribute('data-dsh-prts')) root.style.setProperty(definition.blurProperty, `${blurValue}px`)
+    }
+    const commitBlur = () => { if (blurValue !== savedBlur) { savedBlur = blurValue;onChange(definition.blurKey, blurValue) } }
+    const blurChange = () => { previewBlur(blurInput.valueAsNumber);commitBlur() }
+    const blurCancel = event => { if (event.key === 'Escape') { event.preventDefault();previewBlur(savedBlur);blurInput.blur() } }
+    const resetBlur = () => { previewBlur(definition.blurDefault);commitBlur() }
+    const resetButton = container.querySelector('[data-prts-opacity-reset]')
+    const blurResetButton = blurControl.querySelector('[data-prts-blur-reset]')
+    const bindings = [[svg,'pointerdown',down],[svg,'pointermove',move],[svg,'pointerup',up],[svg,'pointercancel',cancel],[svg,'lostpointercapture',cancel],[svg,'keydown',key],[input,'change',change],[resetButton,'click',reset],[blurInput,'input',event=>previewBlur(event.target.valueAsNumber)],[blurInput,'change',blurChange],[blurInput,'keydown',blurCancel],[blurResetButton,'click',resetBlur],[window,'blur',cancel]]
+    for(const [el,type,fn] of bindings)el.addEventListener(type,fn)
+    paint(value)
+    return {
+      update(preferences, active) {
+        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 ? '' : '当前未启用此材质'
+      },
+      dispose() { if(grip)finish({},true);window.clearTimeout(timer);for(const [el,type,fn] of bindings)el.removeEventListener(type,fn) },
+    }
+  })
+  return {
+    update(preferences, state) {
+      const full = preferences.backgroundMode === 'full' && Boolean(state.full)
+      const split = preferences.backgroundMode === 'split'
+      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,
+        conversationImage && preferences.conversationStyle === 'deck-chat',
+        conversationImage && preferences.conversationStyle === 'native']
+      controls.forEach((control,i)=>control.update(preferences,active[i]))
+    },
+    dispose() {for(const control of controls)control.dispose()},
+  }
+}

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

@@ -1,3 +1,4 @@
+import { SCHEME_COMMIT_PROGRESS } from './theme-controller-v2.js'
 import { createThemeSettingsOverlay, themeSettingsMarkup } from './theme-settings-workbench.js'
 
 const PHONE_RAIL_BREAKPOINT = 640
@@ -45,7 +46,7 @@ export function createOperationsShell({
   onSchemeToggle = () => {},
   onSchemeDragStart = () => undefined,
   onThemeDisable = () => {},
-  customEmblemStore, avatarStore,
+  customEmblemStore, avatarStore, backgroundStore,
   onPreferenceChange = () => {},
   onPreferencePreview = () => {},
   onVisualReset = () => {},
@@ -83,9 +84,9 @@ export function createOperationsShell({
     try { return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true } catch { return false }
   }
 
-  function phoneRailGesture() {
+  function phoneRailGesture(pointerType) {
     if (railMode !== 'overlay' || Number(window.innerWidth) > PHONE_RAIL_BREAKPOINT) return false
-    return railPointerQuery?.matches === true
+    return pointerType === 'touch' || railPointerQuery?.matches === true
       || railHoverQuery?.matches === true
       || Number(window.navigator?.maxTouchPoints) > 0
   }
@@ -105,13 +106,16 @@ export function createOperationsShell({
 
   function armRailGesture() {
     railHoldTimer = undefined
-    if (!railPointer || !phoneRailGesture()) return
+    if (!railPointer || !phoneRailGesture('touch')) return
     railPointer.armed = true
     railLauncher?.setAttribute('data-prts-rail-gesture-active', '')
   }
 
+  let railInputType
   function onRailPointerDown(event) {
-    if (!phoneRailGesture() || railPointer || (event.button ?? 0) !== 0) return
+    railInputType = event.pointerType || 'mouse'
+    if (railInputType !== 'touch') return
+    if (!phoneRailGesture(event.pointerType) || railPointer || (event.button ?? 0) !== 0) return
     const pointerId = event.pointerId ?? 1
     railPointer = {
       pointerId,
@@ -159,7 +163,9 @@ export function createOperationsShell({
   }
 
   function onRailClick(event) {
-    if (phoneRailGesture() && Number(event?.detail) > 0) {
+    const inputType = event?.pointerType || railInputType
+    railInputType = undefined
+    if (phoneRailGesture(inputType) && inputType === 'touch' && Number(event?.detail) > 0) {
       event.preventDefault?.()
       return
     }
@@ -262,9 +268,19 @@ export function createOperationsShell({
     }, 1000)
   }
 
+  function flushSchemeProgress(pointer) {
+    if (pointer.frame !== undefined) window.cancelAnimationFrame(pointer.frame)
+    pointer.frame = undefined
+    if (pointer.progress !== undefined) {
+      pointer.gesture?.update?.(pointer.progress)
+      pointer.progress = undefined
+    }
+  }
+
   function settleSchemePointer({ commit = false } = {}) {
     const pointer = schemePointer
     if (!pointer) return
+    flushSchemeProgress(pointer)
     schemePointer = undefined
     try { schemeToggle?.releasePointerCapture?.(pointer.pointerId) } catch {}
     if (!pointer.dragging) return
@@ -313,19 +329,25 @@ export function createOperationsShell({
       }
     }
     event.preventDefault?.()
-    pointer.gesture?.update?.(schemePointerProgress(event))
+    pointer.progress = schemePointerProgress(event)
+    if (pointer.frame === undefined) pointer.frame = window.requestAnimationFrame(() => {
+      pointer.frame = undefined
+      if (schemePointer === pointer) flushSchemeProgress(pointer)
+    })
   }
 
   function onSchemePointerUp(event) {
     const pointer = schemePointer
     if (!pointer || (event.pointerId ?? 1) !== pointer.pointerId) return
-    const commit = pointer.dragging && schemePointerProgress(event) >= .5
+    if (pointer.dragging) pointer.progress = schemePointerProgress(event)
+    const commit = pointer.dragging && schemePointerProgress(event) >= SCHEME_COMMIT_PROGRESS
     settleSchemePointer({ commit })
   }
 
   function cancelSchemePointer() {
     const pointer = schemePointer
     if (!pointer) return
+    if (pointer.frame !== undefined) window.cancelAnimationFrame(pointer.frame)
     if (pointer.dragging) {
       try { pointer.gesture?.cancel?.() } catch {}
     }
@@ -353,7 +375,7 @@ export function createOperationsShell({
     const overlay = railMode === 'overlay'
     const open = overlay && root.hasAttribute('data-prts-rail-open')
     railLauncher.setAttribute('aria-expanded', String(open))
-    const closedLabel = phoneRailGesture() ? '长按并向下滑动打开 P.R.T.S. 导航' : '打开 P.R.T.S. 导航'
+    const closedLabel = phoneRailGesture() ? '打开 P.R.T.S. 导航（触摸时长按并下滑）' : '打开 P.R.T.S. 导航'
     railLauncher.setAttribute('aria-label', open ? '关闭 P.R.T.S. 导航' : closedLabel)
     if (overlay && !open) {
       navRail.setAttribute('aria-hidden', 'true')
@@ -418,12 +440,16 @@ export function createOperationsShell({
   }
 
   function onResponsiveChange() {
+    railInputType = undefined
     clearRailGesture()
     setRailViewport(window.innerWidth)
     syncRailState()
   }
 
+  let railPhoneQuery
   function bindResponsiveQueries() {
+    railPhoneQuery = window.matchMedia?.('(max-width: 640px)')
+    railPhoneQuery?.addEventListener?.('change', onResponsiveChange)
     railViewportQuery = window.matchMedia?.('(min-width: 1180px)')
     railPointerQuery = window.matchMedia?.('(pointer: coarse)')
     railHoverQuery = window.matchMedia?.('(hover: none)')
@@ -455,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,
+      customEmblemStore, avatarStore, backgroundStore,
       onPreferenceChange,
       onPreferencePreview,
       onResetVisual: onVisualReset,
@@ -507,6 +533,9 @@ export function createOperationsShell({
     schemeToggle?.removeEventListener('lostpointercapture', onSchemeLostPointerCapture)
     window.removeEventListener?.('blur', cancelSchemePointer)
     themeDisable?.removeEventListener('click', disableTheme)
+    railPhoneQuery?.removeEventListener?.('change', onResponsiveChange)
+    railPhoneQuery = undefined
+    railInputType = undefined
     railViewportQuery?.removeEventListener?.('change', onResponsiveChange)
     railPointerQuery?.removeEventListener?.('change', onResponsiveChange)
     railHoverQuery?.removeEventListener?.('change', onResponsiveChange)

package/src/client/preferences.js

@@ -24,6 +24,17 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   glass: 'standard',
   motion: 'system',
   bootAnimation: true,
+  composerGlass: false,
+  backgroundMode: 'off',
+  backgroundDim: .45,
+  sidebarOpacity: .06,
+  railOpacity: .3,
+  bakerOpacity: .5,
+  classicUserOpacity: .5,
+  sidebarBlur: 8,
+  railBlur: 12,
+  bakerBlur: 8,
+  classicUserBlur: 8,
   cursor: 'prts',
   conversationParticleDensity: 'sparse',
   heroParticleDensity: 'light',
@@ -48,6 +59,7 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   sessionFlowSpeed: SESSION_FLOW_SPEED_DEFAULT,
   conversationStyle: 'native',
   bakerGroupAvatars: true,
+  bakerLoading: false,
   conversationEmblem: true,
 })
 
@@ -85,12 +97,12 @@ export const PARTICLE_DETAIL_LEVELS = Object.freeze({
   precise: Object.freeze({ conversationParticleDensity: 'dense', heroParticleDensity: 'ultra' }),
 })
 export const PREFERENCE_GROUPS = Object.freeze({
-  background: Object.freeze(['texture']),
+  background: Object.freeze(['texture', 'backgroundMode', 'backgroundDim', 'sidebarOpacity', 'railOpacity', 'bakerOpacity', 'classicUserOpacity', 'sidebarBlur', 'railBlur', 'bakerBlur', 'classicUserBlur']),
   particles: Object.freeze(['conversationParticleDensity', 'heroParticleDensity', 'particleTraversalSpeed']),
-  material: Object.freeze(['glass']),
+  material: Object.freeze(['glass', 'composerGlass']),
   accessibility: Object.freeze(['motion', 'bootAnimation', 'cursor']),
   navigation: Object.freeze(['railDefaultHidden', 'sessionPreview', 'previewOngoing', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning', 'previewReplyLimit']),
-  conversation: Object.freeze(['sessionFlow', 'sessionGlow', 'sessionFlowPalette', 'sessionFlowColorBack', 'sessionFlowColorCore', 'sessionFlowColorFront', 'sessionFlowSpeed', 'conversationStyle', 'bakerGroupAvatars', 'conversationEmblem']),
+  conversation: Object.freeze(['sessionFlow', 'sessionGlow', 'sessionFlowPalette', 'sessionFlowColorBack', 'sessionFlowColorCore', 'sessionFlowColorFront', 'sessionFlowSpeed', 'conversationStyle', 'bakerGroupAvatars', 'bakerLoading', 'conversationEmblem']),
 })
 
 const TEXTURES = new Set(['off', 'restrained', 'full'])
@@ -134,6 +146,12 @@ function colorOr(value, fallback) {
   return typeof value === 'string' && /^#[\da-f]{6}$/i.test(value) ? value.toLowerCase() : fallback
 }
 
+function materialBlurOr(value, fallback) {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? Math.min(32, Math.max(0, Math.round(value)))
+    : fallback
+}
+
 function particleTraversalSpeedOr(value, fallback) {
   const numeric = Number(value)
   if (!Number.isFinite(numeric)) return fallback
@@ -189,6 +207,18 @@ export function normalizePreferences(value) {
     texture: enumOr(input.texture, TEXTURES, DEFAULT_PREFERENCES.texture),
     glass: normalizeGlass(input),
     motion: input.motion === 'full' ? 'system' : enumOr(input.motion, MOTIONS, DEFAULT_PREFERENCES.motion),
+    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,
+    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),
+    railBlur: materialBlurOr(input.railBlur, DEFAULT_PREFERENCES.railBlur),
+    bakerBlur: materialBlurOr(input.bakerBlur, DEFAULT_PREFERENCES.bakerBlur),
+    classicUserBlur: materialBlurOr(input.classicUserBlur, DEFAULT_PREFERENCES.classicUserBlur),
+    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),
     cursor: input.cursor === 'system' ? 'system' : DEFAULT_PREFERENCES.cursor,
     conversationParticleDensity: enumOr(legacyDensities.conversation, PARTICLE_DENSITIES, particlePreset.conversationParticleDensity),

package/src/client/settings-page.js

@@ -1,8 +1,8 @@
 export function createSettingsPage(React, meta = {}) {
   const h = React.createElement
 
-  return function PrtsPluginSettingsPage({ useStore, updatePreference }) {
-    const { preferences } = useStore(state => ({ preferences: state.preferences }))
+  return function PrtsPluginSettingsPage({ useStore, updatePreference, retryPersistence }) {
+    const { preferences, persistence } = useStore(state => ({ preferences: state.preferences, persistence: state.status?.settingsPersistence }))
     const safeMode = Boolean(meta.safeMode)
     const enabled = Boolean(preferences.enabled) && !safeMode
     const bootAnimation = preferences.bootAnimation !== false
@@ -40,6 +40,11 @@ export function createSettingsPage(React, meta = {}) {
     safeMode && h('p', { className: 'prts-plugin-settings__safe', role: 'status' },
       '安全模式已暂停主题。移除地址中的 ?prts-safe=1 后即可恢复。',
     ),
+    persistence?.phase === 'error' && h('div', { role: 'alert' },
+      h('p', null, '设置未保存到 DSH。请检查连接或持久化支持；重试会重新提交本次修改。'),
+      h('button', { type: 'button', onClick: retryPersistence }, '重试保存'),
+    ),
+    persistence?.phase === 'saving' && h('p', { role: 'status' }, '正在保存…'),
     h('div', { className: 'prts-plugin-settings__list' },
       settingRow({
         key: 'enabled',

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

@@ -1,6 +1,8 @@
 import { createCursorAdapter } from './cursor-adapter.js'
 import { normalizePreferences } from './preferences.js'
 
+export const SCHEME_COMMIT_PROGRESS = .15
+
 const ROOT_ATTRIBUTES = [
   'data-dsh-prts',
   'data-prts-scheme',
@@ -14,6 +16,7 @@ const ROOT_ATTRIBUTES = [
   'data-prts-session-flow-palette',
   'data-prts-session-flow-speed',
   'data-prts-conversation-style',
+  'data-prts-background-mode',
 ]
 const SESSION_FLOW_COLOR_PROPERTIES = {
   '--prts-session-flow-back': 'sessionFlowColorBack',
@@ -112,6 +115,12 @@ export function createThemeController({ document, window, cssText, service, curs
   }
 
   function clearThemeState() {
+    root.removeAttribute('data-prts-baker-loading')
+    root.style.removeProperty('--prts-background-shade')
+    for (const name of ['sidebar', 'rail', 'baker']) root.style.removeProperty(`--prts-${name}-opacity`)
+    root.style.removeProperty('--prts-classic-user-opacity')
+    for (const name of ['sidebar', 'rail', 'baker']) root.style.removeProperty(`--prts-${name}-blur`)
+    root.style.removeProperty('--prts-classic-user-blur')
     for (const attribute of ROOT_ATTRIBUTES) root.removeAttribute(attribute)
     for (const property of Object.keys(SESSION_FLOW_COLOR_PROPERTIES)) root.style.removeProperty(property)
     clearTransitionState()
@@ -237,11 +246,23 @@ export function createThemeController({ document, window, cssText, service, curs
   function updateRevealHud(session) {
     if (!session || session.settled) return
     const percentage = Math.round(revealProgress(session.progress) * 100)
-    if (session.hudEdge) session.hudEdge.dataset.prtsSchemeRevealSide = 'left'
-    root.style.setProperty('--prts-scheme-control-progress', String(session.progress))
-    root.style.setProperty('--prts-scheme-control-meter-height', `${revealProgress(session.progress) * 48}px`)
-    root.style.setProperty('--prts-scheme-control-value-image', revealValueImageUrl(percentage))
-    root.toggleAttribute(TRANSITION_ARMED_ATTRIBUTE, session.interactive && session.progress >= .5)
+    if (session.hudEdge && session.hudEdge.dataset.prtsSchemeRevealSide !== 'left') session.hudEdge.dataset.prtsSchemeRevealSide = 'left'
+    if (session.hudPercentage !== percentage) {
+      session.hudPercentage = percentage
+      const image = revealValueImageUrl(percentage)
+      if (session.hudAnimation?.effect?.setKeyframes) {
+        const frame = {
+          backgroundImage: image + ',linear-gradient(#ffd400,#ffd400)',
+          backgroundSize: '24px 11px,2px ' + (percentage * .48) + 'px',
+        }
+        session.hudAnimation.effect.setKeyframes([frame, frame])
+      } else {
+        root.style.setProperty('--prts-scheme-control-meter-height', `${percentage * .48}px`)
+        root.style.setProperty('--prts-scheme-control-value-image', image)
+      }
+    }
+    const armed = session.interactive && session.progress >= SCHEME_COMMIT_PROGRESS
+    if (root.hasAttribute(TRANSITION_ARMED_ATTRIBUTE) !== armed) root.toggleAttribute(TRANSITION_ARMED_ATTRIBUTE, armed)
   }
 
   function releaseRevealHud(session) {
@@ -354,11 +375,16 @@ export function createThemeController({ document, window, cssText, service, curs
       ], options, '::view-transition-new(prts-scheme-grid)')
       const mark = revealNamedAnimation([
         { offset: 0, translate: revealGroupTranslate(0), rotate: '45deg' },
-        { offset: .49, translate: revealGroupTranslate(session.geometry.width * .49), rotate: '45deg' },
-        { offset: .51, translate: revealGroupTranslate(session.geometry.width * .51), rotate: '225deg' },
+        { offset: SCHEME_COMMIT_PROGRESS - .01, translate: revealGroupTranslate(session.geometry.width * (SCHEME_COMMIT_PROGRESS - .01)), rotate: '45deg' },
+        { offset: SCHEME_COMMIT_PROGRESS + .01, translate: revealGroupTranslate(session.geometry.width * (SCHEME_COMMIT_PROGRESS + .01)), rotate: '225deg' },
         { offset: 1, translate: revealGroupTranslate(session.geometry.width), rotate: '225deg' },
       ], options, '::view-transition-group(prts-scheme-mark)')
       session.scrubAnimations = [clip, edge, node, grid, gridPhase, mark]
+      session.hudAnimation = revealNamedAnimation([{}], options, '::view-transition-new(prts-scheme-node)')
+      session.hudAnimation.pause?.()
+      session.hudAnimation.currentTime = 0
+      session.hudPercentage = undefined
+      updateRevealHud(session)
       for (const animation of session.scrubAnimations) {
         animation.pause?.()
         animation.currentTime = session.progress * session.duration
@@ -370,11 +396,10 @@ export function createThemeController({ document, window, cssText, service, curs
     if (!session || session.settled) return
     session.progress = revealProgress(value)
     session.revealX = session.progress * session.geometry.width
-    root.style.setProperty('--prts-scheme-reveal-x', `${session.revealX}px`)
+    if (!session.scrubAnimations) root.style.setProperty('--prts-scheme-reveal-x', `${session.revealX}px`)
     if (session.scrubAnimations) {
       try {
         for (const animation of session.scrubAnimations) {
-          animation.pause?.()
           animation.currentTime = session.progress * session.duration
         }
       } catch {}
@@ -395,12 +420,19 @@ export function createThemeController({ document, window, cssText, service, curs
     for (const animation of session?.scrubAnimations || []) {
       try { animation?.cancel?.() } catch {}
     }
-    if (session) session.scrubAnimations = undefined
+    session?.hudAnimation?.cancel?.()
+    if (session) {
+      session.scrubAnimations = undefined
+      session.hudAnimation = undefined
+      session.hudPercentage = undefined
+    }
   }
 
   function animateRevealTo(session, value, duration, easing) {
     if (!session || session.settled) return Promise.resolve(false)
     cancelRevealAnimation(session)
+    // Transfer the last HUD value once before the release animation takes over.
+    updateRevealHud(session)
     const targetProgress = revealProgress(value)
     const targetX = revealTargetX(session, targetProgress)
     if (!(duration > 0)) {
@@ -442,8 +474,8 @@ export function createThemeController({ document, window, cssText, service, curs
         { backgroundSize: `2px ${targetProgress * 48}px` },
       ], options, '::view-transition-new(prts-scheme-node)')
       const mark = revealNamedAnimation([
-        { translate: revealGroupTranslate(session.revealX), rotate: session.progress >= .5 ? '225deg' : '45deg' },
-        { translate: revealGroupTranslate(targetX), rotate: targetProgress >= .5 ? '225deg' : '45deg' },
+        { translate: revealGroupTranslate(session.revealX), rotate: session.progress >= SCHEME_COMMIT_PROGRESS ? '225deg' : '45deg' },
+        { translate: revealGroupTranslate(targetX), rotate: targetProgress >= SCHEME_COMMIT_PROGRESS ? '225deg' : '45deg' },
       ], options, '::view-transition-group(prts-scheme-mark)')
       animations = [clip, edge, node, grid, gridPhase, nodeProgress, mark]
     } catch {
@@ -601,7 +633,7 @@ export function createThemeController({ document, window, cssText, service, curs
     let settled = false
     return {
       update(value) { if (!settled) progress = revealProgress(value) },
-      finish(commit = progress >= .5) {
+      finish(commit = progress >= SCHEME_COMMIT_PROGRESS) {
         if (settled) return root.dataset.prtsScheme
         settled = true
         return commit ? setTheme(target, { animate: false }) : source
@@ -734,6 +766,13 @@ export function createThemeController({ document, window, cssText, service, curs
       root.dataset.prtsSessionFlowSpeed = String(preferences.sessionFlowSpeed)
       for (const [property, key] of Object.entries(SESSION_FLOW_COLOR_PROPERTIES)) root.style.setProperty(property, preferences[key])
       root.dataset.prtsConversationStyle = preferences.conversationStyle
+      root.toggleAttribute('data-prts-baker-loading', preferences.bakerLoading === true)
+      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-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-classic-user-blur', `${preferences.classicUserBlur}px`)
       refresh()
     },
     sync,