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

package/lib/index.js

@@ -1 +1 @@
-export { PACKAGE_ID, THEME_PLUGIN_ID, inject, apply } from '../src/index.js'
+export { PACKAGE_ID, THEME_PLUGIN_ID, Config, inject, apply } from '../src/index.js'

package/package.json

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

package/src/client/assistant-glass-adapter.js

@@ -106,6 +106,36 @@ export function createAssistantGlassAdapter({ document, window, avatarImage = ''
   let observationRoot
   let groupAvatars = true
   let avatarsDirty = true
+  let loadingTransitions = false
+  const streamingSteps = new Set()
+  const revealAnimations = new Map()
+  function cancelReveal(step) {
+    const animations = revealAnimations.get(step)
+    revealAnimations.delete(step)
+    for (const animation of animations ?? []) animation.cancel()
+  }
+  function revealResponse(step, surface) {
+    cancelReveal(step)
+    if (!loadingTransitions || !surface?.animate || !surface.isConnected
+      || document.documentElement.getAttribute('data-prts-motion') === 'reduced'
+      || window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+      || step.closest('[hidden], [data-turn-process-hidden="true"]')) return
+    const bounds = surface.getBoundingClientRect()
+    if (!bounds.width || !bounds.height) return
+    const animations = [surface.animate([
+      { width: '78px', height: '42px', overflow: 'clip' },
+      { width: `${bounds.width}px`, height: `${bounds.height}px`, overflow: 'clip' },
+    ], { duration: 220, easing: 'cubic-bezier(.2,.7,.2,1)' })]
+    for (const child of surface.children) {
+      if (!child.animate) continue
+      animations.push(child.animate([{ opacity: 0 }, { opacity: 1 }],
+        { duration: 160, delay: 80, fill: 'backwards', easing: 'ease-out' }))
+    }
+    revealAnimations.set(step, animations)
+    void Promise.all(animations.map(animation => animation.finished)).catch(() => {}).then(() => {
+      if (revealAnimations.get(step) === animations) revealAnimations.delete(step)
+    })
+  }
   const avatarSteps = new Set()
   const emptySteps = new Set()
   function refreshAvatars() {
@@ -210,6 +240,8 @@ export function createAssistantGlassAdapter({ document, window, avatarImage = ''
   }
 
   function releaseStep(step) {
+    streamingSteps.delete(step)
+    cancelReveal(step)
     const previousSurface = stepSurfaces.get(step)
     stepSurfaces.delete(step)
     ownedSteps.delete(step)
@@ -241,6 +273,13 @@ export function createAssistantGlassAdapter({ document, window, avatarImage = ''
     surface.setAttribute(ASSISTANT_SURFACE_ATTRIBUTE, kind)
     ownedSurfaces.add(surface)
     stepSurfaces.set(step, surface)
+    const streaming = surface.parentElement?.hasAttribute('data-streaming') === true
+    const wasStreaming = streamingSteps.has(step)
+    if (streaming) { streamingSteps.add(step); cancelReveal(step) }
+    else {
+      streamingSteps.delete(step)
+      if (wasStreaming) revealResponse(step, surface)
+    }
   }
 
   function scan() {
@@ -301,7 +340,9 @@ export function createAssistantGlassAdapter({ document, window, avatarImage = ''
   }
 
   return {
-    start({ groupAvatars: enabled = true } = {}) {
+    start({ groupAvatars: enabled = true, loading = false } = {}) {
+      loadingTransitions = loading
+      if (!loading) for (const step of [...revealAnimations.keys()]) cancelReveal(step)
       if (!document) return
       if (groupAvatars !== enabled) {
         groupAvatars = enabled
@@ -324,7 +365,7 @@ export function createAssistantGlassAdapter({ document, window, avatarImage = ''
         childList: true,
         characterData: true,
         attributes: true,
-        attributeFilter: ['class', 'data-chat-flow-kind', 'data-chat-group-part', 'data-markdown', 'data-slot', 'data-chat-turn', 'hidden', 'data-turn-process-hidden', 'data-turn-process-member', 'data-turn-process-answer'],
+        attributeFilter: ['data-streaming', 'class', 'data-chat-flow-kind', 'data-chat-group-part', 'data-markdown', 'data-slot', 'data-chat-turn', 'hidden', 'data-turn-process-hidden', 'data-turn-process-member', 'data-turn-process-answer'],
       })
     },
     dispose() {
@@ -335,6 +376,8 @@ export function createAssistantGlassAdapter({ document, window, avatarImage = ''
         else window?.clearTimeout?.(scanFrame)
       }
       scanFrame = undefined
+      for (const step of [...revealAnimations.keys()]) cancelReveal(step)
+      streamingSteps.clear()
       removeMarkers()
       for (const step of avatarSteps) step.removeAttribute('data-prts-avatar-hidden')
       avatarSteps.clear()

package/src/client/composer-glass-adapter.js

@@ -57,6 +57,13 @@ function markPopup(popup, kind) {
   const card = popup.closest?.('[data-trigger-menu], [class*="mufS8W_card"]')
   mark(card, MENU_ATTRIBUTE, kind)
   for (const nested of popup.querySelectorAll?.('[role="menu"], [role="listbox"], [data-trigger-menu], [class*="mufS8W_card"]') ?? []) {
+    // The model picker replaces its contents with a scrolling role=menu.
+    // That list is content inside the material shell, not another popup.
+    if (kind === 'model' && popup.hasAttribute('data-menu-material')
+      && !nested.hasAttribute('data-menu-material')) {
+      nested.removeAttribute(MENU_ATTRIBUTE)
+      continue
+    }
     mark(nested, MENU_ATTRIBUTE, kind)
   }
 }
@@ -111,7 +118,17 @@ export function createComposerGlassAdapter({ document, window }) {
   }
 
   function onMutations(mutations) {
-    if (mutations.some(mutationTouchesComposer)) queueScan()
+    if (!mutations.some(mutationTouchesComposer)) return
+    const popupSelector = '[role="menu"], [role="listbox"], [data-trigger-menu]'
+    const openingPopup = mutations.some(mutation =>
+      (mutation.type === 'attributes' && ['aria-expanded', 'aria-controls'].includes(mutation.attributeName))
+      || [...(mutation.addedNodes ?? [])].some(node => node.nodeType === 1
+        && (node.matches?.(popupSelector) || node.querySelector?.(popupSelector))),
+    )
+    // Classify new popups in the mutation microtask, before the first paint.
+    // Waiting for another animation frame can expose their native material.
+    if (openingPopup) scan()
+    else queueScan()
   }
 
   function queueScan() {
@@ -185,6 +202,7 @@ export function createComposerGlassAdapter({ document, window }) {
       if (trigger.getAttribute('aria-expanded') !== 'true') continue
       const popup = controlledPopup(document, trigger)
         ?? localPopup(trigger)
+        ?? document.querySelector('[role="menu"]:has([class*="cubgiG_item"])')
       markPopup(popup, 'preset')
     }
 
@@ -217,6 +235,7 @@ export function createComposerGlassAdapter({ document, window }) {
         ?? document.querySelector('[data-slot="main.conversation"], [data-slot="conversation"]')
       if (!observationRoot) return
       observer = new Observer(onMutations)
+      if (observationRoot !== document.body) observer.observe(document.body, { childList: true })
       observer.observe(observationRoot, {
         subtree: true,
         childList: true,

package/src/client/composer-glass-surface.js

@@ -0,0 +1,85 @@
+// Keep host content in place; mount upstream GlassSurface only as a background.
+export function createComposerGlassSurface({document, window, mount}) {
+  const surfaces = new Map()
+  let observer, resize, frame
+  function remove(card, entry) {
+    window.clearTimeout(entry.resizeTimer)
+    resize?.unobserve(card)
+    entry.unmount()
+    entry.container.remove()
+    card.removeAttribute('data-prts-composer-glass-active')
+    surfaces.delete(card)
+  }
+  function sync() {
+    frame = undefined
+    const cards = new Set(document.querySelectorAll('[data-composer-card], [data-prts-composer-fallback]'))
+    for (const [card, entry] of surfaces) if (!cards.has(card)) remove(card, entry)
+    for (const card of cards) {
+      // Use layout dimensions, unaffected by host entrance/resize transforms.
+      const w = card.offsetWidth
+      const h = card.offsetHeight
+      if (!w || !h) continue
+      let entry = surfaces.get(card)
+      if (entry?.width === w && entry?.height === h) continue
+      const points = [
+        [3,0],[w/2-42,0],[w/2-37,5],[w/2+37,5],[w/2+42,0],
+        [w-3,0],[w,3],[w,h-3],[w-3,h],[3,h],[0,h-3],[0,3],
+      ].map(([x,y])=>[x+16,y+16].join(',')).join(' ')
+      const outline = '<polygon fill="white" points="'+points+'"/>'
+      const shape = 'data:image/svg+xml,' + encodeURIComponent(
+        '<svg xmlns="http://www.w3.org/2000/svg" width="'+(w+32)+'" height="'+(h+32)+'" viewBox="0 0 '+(w+32)+' '+(h+32)+'">'+outline+'</svg>',
+      )
+      if (!entry) {
+        const container = document.createElement('div')
+        container.setAttribute('data-prts-composer-glass-surface', '')
+        container.setAttribute('aria-hidden', 'true')
+        card.prepend(container)
+        entry = {container, shape, width:w, height:h, unmount:mount(container, {shape})}
+        surfaces.set(card, entry)
+        card.setAttribute('data-prts-composer-glass-active', '')
+        resize?.observe(card)
+      } else if (entry.shape !== shape) {
+        entry.shape = shape
+        entry.width = w
+        entry.height = h
+        // CSS owns the live outline. Rebuild the costly refraction map once
+        // resizing settles, instead of decoding a new image on every frame.
+        window.clearTimeout(entry.resizeTimer)
+        entry.resizeTimer = window.setTimeout(() => {
+          entry.resizeTimer = undefined
+          entry.unmount.update({shape:entry.shape})
+        }, 100)
+      }
+    }
+  }
+  function queue() {
+    if (frame === undefined) frame = window.requestAnimationFrame(sync)
+  }
+  return {
+    start() {
+      if (!mount) return
+      document.documentElement.setAttribute('data-prts-composer-enhanced', '')
+      if (!observer) {
+        resize = new window.ResizeObserver(queue)
+        observer = new window.MutationObserver(records => {
+          const selector = '[data-composer-card], [data-prts-composer-fallback]'
+          if (records.some(record => record.type === 'attributes'
+            || [...record.addedNodes, ...record.removedNodes].some(node =>
+              node.nodeType === 1 && (node.matches(selector) || node.querySelector(selector))))) queue()
+        })
+        observer.observe(document.body, {childList:true, subtree:true, attributes:true, attributeFilter:['data-composer-card','data-prts-composer-fallback']})
+      }
+      sync()
+    },
+    dispose() {
+      document.documentElement.removeAttribute('data-prts-composer-enhanced')
+      observer?.disconnect()
+      observer = undefined
+      resize?.disconnect()
+      window.cancelAnimationFrame?.(frame)
+      frame = undefined
+      for (const [card, entry] of surfaces) remove(card, entry)
+      resize = undefined
+    },
+  }
+}

package/src/client/custom-background.js

@@ -0,0 +1,140 @@
+import { opacityDialMarkup, mountOpacityDials } from './opacity-dial.js'
+const BACKGROUND_ENDPOINT = '/prts-theme-api/backgrounds'
+const backgroundLabels = { sidebar: '侧边栏', conversation: '会话正文', full: '完整背景' }
+function backgroundImageUrl(entry) {
+  return /^[a-f0-9-]{36}$/.test(entry?.id ?? '') ? `${BACKGROUND_ENDPOINT}/image/${entry.id}` : null
+}
+export function createBackgroundStore({ window, document }) {
+  let state = { revision: -1, sidebar: null, conversation: null, full: null }, disposed = false, events, refreshing
+  const listeners = new Set()
+  const abort = window.AbortController ? new window.AbortController() : null
+  const apply = value => {
+    if (disposed || value.revision < state.revision) return
+    state = value
+    for (const slot of Object.keys(backgroundLabels)) {
+      const url = backgroundImageUrl(state[slot])
+      const root = document.documentElement
+      root.toggleAttribute(`data-prts-background-${slot}`, Boolean(url))
+      if (url) root.style.setProperty(`--prts-background-${slot}`, `url("${url}")`)
+      else root.style.removeProperty(`--prts-background-${slot}`)
+    }
+    for (const listener of listeners) listener(state)
+  }
+  const request = async data => {
+    const response = await window.fetch(BACKGROUND_ENDPOINT + '/configuration', {
+      credentials: 'same-origin', signal: abort?.signal,
+      ...(data === undefined ? {} : { method: 'POST', headers: { 'content-type': 'application/json', 'x-prts-request': '1' }, body: JSON.stringify(data) }),
+    })
+    const value = await response.json()
+    if (!response.ok) throw Error(value.error || '背景服务暂不可用')
+    apply(value); return state
+  }
+  const refresh = () => refreshing ?? (refreshing = request().finally(() => { refreshing = null }))
+  if (window.fetch) void refresh().catch(() => {}).then(() => {
+    if (disposed || !window.EventSource) return
+    events = new window.EventSource(BACKGROUND_ENDPOINT + '/events')
+    events.onmessage = event => {
+      try {
+        const revision = JSON.parse(event.data).revision
+        if (revision > state.revision) void refresh().then(() => {
+          if (!disposed && revision > state.revision) return refresh()
+        }).catch(() => {})
+      } catch {}
+    }
+  })
+  const focus = () => { if (window.fetch) void refresh().catch(() => {}) }
+  window.addEventListener('focus', focus)
+  return {
+    snapshot: () => state, refresh,
+    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 }
+    },
+    dispose() {
+      disposed = true; abort?.abort(); events?.close(); listeners.clear(); window.removeEventListener('focus', focus)
+      for (const slot of Object.keys(backgroundLabels)) {
+        document.documentElement.removeAttribute(`data-prts-background-${slot}`)
+        document.documentElement.style.removeProperty(`--prts-background-${slot}`)
+      }
+    },
+  }
+}
+export function backgroundMarkup() {
+  return `<section data-prts-background-settings>
+    <header><strong>会话背景</strong><small>分区使用不同图片，或让一张完整背景贯穿侧边栏与正文。</small></header>
+    <div data-prts-background-modes role="group" aria-label="背景模式">
+      ${[['off','默认背景','使用主题原有底色'],['split','分区背景','侧栏与正文独立配置'],['full','完整背景','一张图片贯穿整个界面']].map(([value,label,hint]) => `<button type="button" data-prts-setting-key="backgroundMode" data-prts-setting-value="${value}" aria-pressed="false"><span data-prts-background-diagram="${value}" aria-hidden="true"><i></i><i></i></span><span><strong>${label}</strong><small>${hint}</small></span></button>`).join('')}
+    </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>
+      <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>
+    ${opacityDialMarkup()}
+    <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 }) {
+  const section = panel.querySelector('[data-prts-background-settings]')
+  if (!section || !store) return { update() {}, dispose() {} }
+  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 dials = mountOpacityDials({ section, window, onChange })
+  function render() {
+    dials.update(preferences, state)
+    const mode = preferences.backgroundMode || 'off'
+    section.querySelector('[data-prts-background-images]').hidden = mode === 'off'
+    section.querySelector('[data-prts-background-shade]').hidden = mode === 'off'
+    range.value = String(Math.round((preferences.backgroundDim ?? .45) * 100))
+    section.querySelector('output').textContent = `${range.value}%`
+    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-thumbnail="${slot}"]`).style.backgroundImage = url ? `url("${url}")` : ''
+      section.querySelector(`[data-prts-background-caption="${slot}"]`).textContent = url ? '替换图片' : '＋ 选择图片'
+      section.querySelector(`[data-prts-background-remove="${slot}"]`).hidden = !url
+    }
+    for (const button of section.querySelectorAll('[data-prts-background-upload], [data-prts-background-remove]')) button.disabled = busy
+  }
+  async function save(slot, file) {
+    if (busy) return
+    if (file && file.size > 10 * 1024 * 1024) { status.textContent = '请上传不超过 10 MB 的图片'; return }
+    const revision = state.revision
+    busy = true; status.textContent = '正在保存背景…'; render()
+    try {
+      let image = null
+      if (file) image = await new Promise((resolve, reject) => {
+        const reader = new window.FileReader()
+        reader.onload = () => resolve(String(reader.result).split(',')[1])
+        reader.onerror = () => reject(Error('无法读取图片'))
+        reader.readAsDataURL(file)
+      })
+      if (disposed) return
+      await store.save(slot, image, revision)
+      if (!disposed) status.textContent = file ? '背景已保存，并同步到其他页面。' : '图片已移除。'
+    } catch (error) { if (!disposed) status.textContent = error.message }
+    finally { busy = false; if (!disposed) render() }
+  }
+  const click = event => {
+    const upload = event.target.closest('[data-prts-background-upload]')
+    if (upload) section.querySelector(`[data-prts-background-file="${upload.dataset.prtsBackgroundUpload}"]`).click()
+    const remove = event.target.closest('[data-prts-background-remove]')
+    if (remove) void save(remove.dataset.prtsBackgroundRemove, null)
+  }
+  const change = event => {
+    if (event.target === range) onChange('backgroundDim', Number(range.value) / 100)
+    const slot = event.target.dataset.prtsBackgroundFile
+    if (slot && event.target.files?.[0]) { void save(slot, event.target.files[0]); event.target.value = '' }
+  }
+  const input = event => { if (event.target === range) section.querySelector('output').textContent = `${range.value}%` }
+  section.addEventListener('click', click); section.addEventListener('change', change); section.addEventListener('input', input)
+  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) },
+  }
+}

package/src/client/index.js

@@ -1,7 +1,10 @@
+import { createBackgroundStore } from './custom-background.js'
+import { createNativePreferences } from './native-preferences.js'
+import { createComposerGlassSurface } from './composer-glass-surface.js'
 import { createAvatarStore } from './custom-avatar.js'
 import { registerEmblemToolPreview } from './emblem-tool-preview.js'
 import { createCustomEmblemStore } from './custom-emblem.js'
-import { DEFAULT_PREFERENCES, isSafeMode, loadPreferences, persistPreferences, resetPreferenceGroup, updatePreferenceValue } from './preferences.js'
+import { DEFAULT_PREFERENCES, isSafeMode, loadPreferences, resetPreferenceGroup, updatePreferenceValue } from './preferences.js'
 import { createHostGeometryAdapter } from './host-geometry-adapter.js'
 import { createComposerGlassAdapter } from './composer-glass-adapter.js'
 import { createAssistantGlassAdapter } from './assistant-glass-adapter.js'
@@ -44,6 +47,7 @@ export function applyPrtsPlugin(ctx, environment) {
     version = 'development',
     startupTimings,
   } = environment
+  const composerSurface = createComposerGlassSurface({document, window, React, mount: environment.mountComposerGlassSurface})
   const safeMode = isSafeMode(window?.location?.search ?? '')
   const stopEmblemPreview = safeMode ? null : registerEmblemToolPreview(ctx, React)
   const storage = window?.localStorage
@@ -65,6 +69,7 @@ export function applyPrtsPlugin(ctx, environment) {
       sync()
     },
   })
+  const backgroundStore = createBackgroundStore({window,document})
   const avatarStore = createAvatarStore({window,document})
   const customEmblemStore = createCustomEmblemStore({ window, emblems: assets.emblems, preview: entry => particleField.previewEmblem?.(entry), onChange: value => particleField.setCustomEmblemConfiguration?.(value) })
   const startup = createPrtsStartupSequence({
@@ -123,7 +128,7 @@ export function applyPrtsPlugin(ctx, environment) {
 
   const sync = () => {
     revision += 1
-    for (const actions of bindings) actions.sync({ ...preferences }, { ...status }, revision)
+    for (const actions of bindings) actions.sync({ ...preferences }, { ...status, settingsPersistence }, revision)
   }
 
   const cancelMountFrame = () => {
@@ -183,6 +188,7 @@ export function applyPrtsPlugin(ctx, environment) {
     conversationControls.dispose()
     layoutDiagnostics.dispose()
     sidebarControls.dispose()
+    composerSurface.dispose()
     floatingGlass.dispose()
     theme.apply({ ...preferences, enabled: false })
   }
@@ -194,7 +200,7 @@ export function applyPrtsPlugin(ctx, environment) {
     }
     if (!themeAlreadyApplied) theme.apply(preferences)
     operations ||= createOperationsShell({
-      document, window, assets, adapter, hostGeometry, customEmblemStore, avatarStore,
+      document, window, assets, adapter, hostGeometry, customEmblemStore, avatarStore, backgroundStore,
       onSchemeToggle(next, interaction) {
         return theme.setTheme(next, { ...interaction, animate: true })
       },
@@ -253,41 +259,37 @@ export function applyPrtsPlugin(ctx, environment) {
     }
     particleField.update(preferences)
     composerGlass.start()
-    if (preferences.conversationStyle === 'deck-chat') assistantGlass.start({ groupAvatars: preferences.bakerGroupAvatars })
+    if (preferences.conversationStyle === 'deck-chat') assistantGlass.start({ groupAvatars: preferences.bakerGroupAvatars, loading: preferences.bakerLoading })
     else assistantGlass.dispose()
     toBottom.start()
     conversationControls.start()
     layoutDiagnostics.start()
     sidebarControls.start(preferences)
+    if (preferences.composerGlass || preferences.backgroundMode !== 'off') composerSurface.start()
+    else composerSurface.dispose()
     floatingGlass.start()
   }
 
-  const persistAndApply = next => {
-    const wasEnabled = Boolean(preferences.enabled)
-    const result = persistPreferences(storage, next)
-    preferences = result.preferences
-    settingsPersistence = {
-      phase: result.persisted ? 'saved' : 'error',
-      revision: settingsPersistence.revision + 1,
-    }
-    const shouldPlayStartup = !safeMode && !wasEnabled && preferences.enabled && preferences.bootAnimation
-    if (shouldPlayStartup) particleField.setStartupActive(true)
-    applyVisualState()
-    sync()
-    if (shouldPlayStartup && !startup.play()) particleField.setStartupActive(false)
-  }
-
-
-  const retryPersistence = () => {
-    const result = persistPreferences(storage, preferences)
-    preferences = result.preferences
-    settingsPersistence = {
-      phase: result.persisted ? 'saved' : 'error',
-      revision: settingsPersistence.revision + 1,
-    }
-    operations?.update(preferences, status, settingsPersistence)
-    sync()
-  }
+  const nativePreferences = createNativePreferences({
+    storage,
+    onChange(next, persistence) {
+      const changed = JSON.stringify(preferences) !== JSON.stringify(next)
+      const wasEnabled = preferences.enabled
+      preferences = next
+      settingsPersistence = persistence
+      if (changed) {
+        const play = !safeMode && !wasEnabled && preferences.enabled && preferences.bootAnimation
+        if (play) particleField.setStartupActive(true)
+        applyVisualState()
+        if (play && !startup.play()) particleField.setStartupActive(false)
+      }
+      operations?.update(preferences, status, settingsPersistence)
+      sync()
+    },
+  })
+  preferences = nativePreferences.value
+  const persistAndApply = next => nativePreferences.update(next)
+  const retryPersistence = () => nativePreferences.retry()
   const statusSource = createHarnessStatusSource({
     connection,
     onChange(next) {
@@ -345,11 +347,19 @@ export function applyPrtsPlugin(ctx, environment) {
   } else {
     applyVisualState()
   }
+  const bindNativePreferences = settingsCtx => {
+    const forms = contextService(settingsCtx, 'configForms')
+    if (forms) settingsCtx.effect(() => nativePreferences.bind(forms.get('theme-prts')))
+  }
+  if (typeof ctx.inject === 'function') ctx.inject(['configForms'], bindNativePreferences)
+  else bindNativePreferences(ctx)
   ctx.effect(() => () => {
     if (typeof stopEmblemPreview === 'function') stopEmblemPreview()
+    nativePreferences.dispose()
     statusSource.dispose()
     customEmblemStore.dispose()
     avatarStore.dispose()
+    backgroundStore.dispose()
     particleField.dispose()
     startup.dispose({ restoreFocus: false })
     stopStartupReadyWatch()
@@ -361,13 +371,14 @@ export function applyPrtsPlugin(ctx, environment) {
     conversationControls.dispose()
     layoutDiagnostics.dispose()
     sidebarControls.dispose()
+    composerSurface.dispose()
     floatingGlass.dispose()
     if (typeof stopThemeSync === 'function') stopThemeSync()
     theme.dispose()
     bindings.clear()
   }, 'dsh-theme-prts: visual cleanup')
 
-  const initialStoreState = { preferences, status, revision }
+  const initialStoreState = { preferences, status: { ...status, settingsPersistence }, revision }
   const settingsStore = createPrtsUiStore(defineStore, initialStoreState)
   const PrtsSettingsPage = createSettingsPage(React, {
     emblem: assets.emblem,
@@ -378,6 +389,7 @@ export function applyPrtsPlugin(ctx, environment) {
     bindings.add(actions)
     sync()
     return {
+      retryPersistence,
       updatePreference(key, value) { persistAndApply(updatePreferenceValue(preferences, key, value)) },
       resetPreferenceGroup(group) {
         persistAndApply(resetPreferenceGroup(preferences, group))
@@ -410,6 +422,21 @@ export function apply(ctx) {
     window,
     React,
     defineStore,
+    mountComposerGlassSurface(container, props) {
+      const { createRoot } = require('react-dom/client')
+      const root = createRoot(container)
+      const update = props => root.render(React.createElement(PrtsGlassSurface.default, {
+        width: '100%', height: '100%',
+        // Gentle edge refraction; a fully calm center avoids shifting input content.
+        distortionScale: -18, redOffset: 0, greenOffset: 1, blueOffset: 2,
+        opacity: 1, backgroundOpacity: 0.5, displace: 5,
+        ...props,
+      }))
+      update(props)
+      const dispose = () => root.unmount()
+      dispose.update = update
+      return dispose
+    },
     cssText: PRTS_CSS,
     assets: PRTS_ASSETS,
     version: PRTS_VERSION,

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?.() },
+  }
+}