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

package/src/client/theme-settings-workbench.js

@@ -1,3 +1,4 @@
+import { backgroundMarkup, mountBackgroundSettings } from './custom-background.js'
 import { avatarMarkup, mountAvatarSettings } from './custom-avatar.js'
 import { customEmblemMarkup, mountCustomEmblemEditor } from './custom-emblem.js'
 import { PARTICLE_TRAVERSAL_SPEED_DEFAULT, PARTICLE_TRAVERSAL_SPEED_MAX, PARTICLE_TRAVERSAL_SPEED_MIN, PARTICLE_TRAVERSAL_SPEED_STEP, SESSION_FLOW_SPEED_DEFAULT, SESSION_FLOW_SPEED_MAX, SESSION_FLOW_SPEED_MIN, SESSION_FLOW_SPEED_STEP, resolveParticleDetail } from './preferences.js'
@@ -37,7 +38,11 @@ function previewSetting(key, label, description) {
 }
 
 function settingButtons(key, label, options) {
-  const note = key === 'motion'
+  const note = key === 'composerGlass'
+      ? '<small data-prts-setting-note>增强输入框的背景模糊与轻微折射，关闭时使用原有材质</small>'
+      : key === 'bakerLoading'
+      ? '<small data-prts-setting-note>每轮正文生成时显示三点动画，完成后显示全文；中断时保留已收到的内容</small>'
+      : key === 'motion'
       ? '<small data-prts-setting-note>关闭后减少装饰动效，保留运行状态等必要反馈</small><small data-prts-setting-note data-prts-effective-motion hidden>系统当前要求减少动态</small>'
       : key === 'railDefaultHidden'
         ? '<small data-prts-setting-note>在任意窗口宽度下默认收起 P.R.T.S. 导航，可从左侧按钮临时展开</small>'
@@ -54,7 +59,7 @@ function settingButtons(key, label, options) {
       : key === 'sessionFlowPalette'
         ? '<small data-prts-setting-note>同时适配日间与夜间模式</small>'
       : ''
-  if (['motion', 'cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem', 'sessionPreview', 'previewOngoing', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning'].includes(key)) return `<div data-prts-setting-row="${key}">
+  if (['composerGlass', 'bakerLoading', 'motion', 'cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem', 'sessionPreview', 'previewOngoing', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning'].includes(key)) return `<div data-prts-setting-row="${key}">
     <span><strong>${label}</strong>${note}</span>
     <button type="button" role="switch" aria-label="${label}" aria-checked="false" data-prts-setting-switch="${key}" ${key === 'cursor' ? 'data-prts-cursor-switch' : ''}><span aria-hidden="true"></span></button>
   </div>`
@@ -116,7 +121,8 @@ export function themeSettingsMarkup() {
         <div data-prts-settings-body>
         <div data-prts-settings-sidebar>
         <nav data-prts-settings-nav role="tablist" aria-label="设置分区">
-          <button type="button" data-prts-settings-jump="appearance" role="tab" id="prts-tab-appearance" aria-controls="prts-page-appearance" aria-selected="true" tabindex="0">会话外观</button>
+          <button type="button" data-prts-settings-jump="appearance" role="tab" id="prts-tab-appearance" aria-controls="prts-page-appearance" aria-selected="true" tabindex="0">会话主题</button>
+          <button type="button" data-prts-settings-jump="background" role="tab" id="prts-tab-background" aria-controls="prts-page-background" aria-selected="false" tabindex="-1">会话背景</button>
           <button type="button" data-prts-settings-jump="interaction" role="tab" id="prts-tab-interaction" aria-controls="prts-page-interaction" aria-selected="false" tabindex="-1">交互</button>
           <button type="button" data-prts-settings-jump="flow" role="tab" id="prts-tab-flow" aria-controls="prts-page-flow" aria-selected="false" tabindex="-1">会话流线</button>
           <button type="button" data-prts-settings-jump="particles" role="tab" id="prts-tab-particles" aria-controls="prts-page-particles" aria-selected="false" tabindex="-1">粒子徽记</button>
@@ -124,7 +130,7 @@ export function themeSettingsMarkup() {
         </nav>
           <footer data-prts-settings-actions aria-label="全局主题设置操作">
             <div data-prts-persistence-error hidden role="alert">
-              <span><strong>仅本次会话生效</strong><small>无法写入本地设置，当前视觉效果仍会保留。</small></span>
+              <span><strong>设置未保存</strong><small>未能保存到 DSH，可能存在连接中断、配置冲突或当前访问不支持持久保存。重试将重新提交本次修改。</small></span>
               <button type="button" data-prts-retry-save>重试保存</button>
             </div>
             <div data-prts-reset-zone>
@@ -148,9 +154,14 @@ export function themeSettingsMarkup() {
             </div>
             <div data-prts-classic-options>${settingButtons('conversationEmblem', '正文徽记', [])}</div>
             ${avatarMarkup()}
-            <div data-prts-baker-options>${settingButtons('bakerGroupAvatars', '合并过程回复头像', [])}</div>
+            <div data-prts-baker-options>${settingButtons('bakerGroupAvatars', '合并过程回复头像', [])}${settingButtons('bakerLoading', '回复完成前显示加载动画', [])}</div>
           </section>
           </section>
+          <section data-prts-settings-section="background" role="tabpanel" id="prts-page-background" aria-labelledby="prts-tab-background" tabindex="0" hidden>
+            ${backgroundMarkup()}
+            <div data-prts-composer-glass-setting>${settingButtons('composerGlass', '输入框增强毛玻璃', [])}</div>
+            <small data-prts-composer-glass-required hidden>自定义背景下，输入框增强毛玻璃始终开启。</small>
+          </section>
           <section data-prts-settings-common data-prts-settings-section="interaction" role="tabpanel" id="prts-page-interaction" aria-labelledby="prts-tab-interaction" tabindex="0" hidden>
             <div data-prts-settings-common-grid>
               ${COMMON_CONTROLS.filter(([key]) => ['cursor', 'railDefaultHidden', 'motion'].includes(key)).map(([key, label, options]) => settingButtons(key, label, options)).join('')}
@@ -222,7 +233,7 @@ export function createThemeSettingsOverlay({
   trigger,
   panel,
   backdrop,
-  customEmblemStore, avatarStore,
+  customEmblemStore, avatarStore, backgroundStore,
   onOpen = () => {},
   onPreferenceChange = () => {},
   onPreferencePreview = () => {},
@@ -230,6 +241,7 @@ export function createThemeSettingsOverlay({
   onRetrySave = () => {},
 }) {
   const window = document?.defaultView
+  const backgroundEditor = mountBackgroundSettings({panel,window,store:backgroundStore,onChange:onPreferenceChange})
   const avatarEditor = mountAvatarSettings({panel,window,store:avatarStore})
   const customEditor = mountCustomEmblemEditor({ panel, window, store: customEmblemStore })
   const transparencyMedia = window?.matchMedia?.('(prefers-reduced-transparency: reduce)')
@@ -474,8 +486,8 @@ export function createThemeSettingsOverlay({
     if (phase === 'saved' && revision === renderedPersistenceRevision) return
     if (savedTimer !== undefined) window?.clearTimeout?.(savedTimer)
     savedTimer = undefined
-    status.hidden = phase !== 'saved'
-    status.textContent = phase === 'saved' ? '已保存' : ''
+    status.hidden = phase !== 'saved' && phase !== 'saving'
+    status.textContent = phase === 'saved' ? '已保存' : phase === 'saving' ? '正在保存…' : ''
     if (phase === 'saved') {
       renderedPersistenceRevision = revision
       savedTimer = window?.setTimeout?.(() => { status.hidden = true; savedTimer = undefined }, reducedMotion() ? 500 : 1200)
@@ -707,6 +719,10 @@ export function createThemeSettingsOverlay({
       panel.querySelector('[data-prts-classic-options]').hidden = preferences?.conversationStyle === 'deck-chat'
       panel.querySelector('[data-prts-baker-options]').hidden = preferences?.conversationStyle !== 'deck-chat'
       panel.querySelector('[data-prts-avatars]').hidden = preferences?.conversationStyle !== 'deck-chat'
+      const customBackground = preferences.backgroundMode !== 'off'
+      panel.querySelector('[data-prts-composer-glass-setting]').hidden = customBackground
+      panel.querySelector('[data-prts-composer-glass-required]').hidden = !customBackground
+      backgroundEditor.update(preferences)
       currentPreferences = preferences
       currentStatus = status
       currentPersistence = persistenceState ?? { phase: 'idle', revision: 0 }
@@ -723,6 +739,7 @@ export function createThemeSettingsOverlay({
     dispose() {
       customEditor.dispose()
       avatarEditor.dispose()
+      backgroundEditor.dispose()
       isOpen = false
       hidePanel()
       if (savedTimer !== undefined) window?.clearTimeout?.(savedTimer)

package/src/index.js

@@ -1,3 +1,6 @@
+import { createBackgroundService, registerBackgroundApi } from './server/backgrounds.js'
+import Schema from '@deepseek-ai/schemastery'
+import { DEFAULT_PREFERENCES } from './client/preferences.js'
 import { createAvatarService, registerAvatarApi } from './server/avatars.js'
 import { join } from 'node:path'
 import { homedir } from 'node:os'
@@ -9,11 +12,22 @@ export const PACKAGE_ID = '@ash-qw/dsh-theme-prts'
 export const THEME_PLUGIN_ID = 'dsh-theme-prts'
 export const inject = ['tools', 'attachments', 'connection', 'webServer']
 
+export const Config = Schema.object(Object.fromEntries([
+  ...Object.entries(DEFAULT_PREFERENCES).map(([key, value]) => [key,
+    (typeof value === 'boolean' ? Schema.boolean() : typeof value === 'number' ? Schema.number() : Schema.string()).default(value).volatile(),
+  ]),
+  ['preferencesInitialized', Schema.boolean().default(false).volatile()],
+]))
+
 export async function apply(ctx) {
+  ctx.inject(['settings'], settingsCtx => {
+    settingsCtx.effect(() => settingsCtx.settings.configure({ auto: false }, ctx.fiber))
+  })
   const directory=join(process.env.DSH_HOME?.trim() || join(homedir(),'.dsh'),'plugins','dsh-theme-prts','emblems')
   const service=await createEmblemService(directory)
+  const backgrounds=await createBackgroundService(join(directory,'..','backgrounds'))
   const avatars=await createAvatarService(join(directory,'..','avatars'))
   const disposers=[...emblemTools(service,ctx.attachments),...avatarTools(avatars,ctx.attachments)].map(tool=>ctx.tools.register(tool))
-  disposers.push(registerEmblemApi(ctx,service),registerAvatarApi(ctx,avatars))
-  ctx.effect(()=>async()=>{for(const dispose of disposers.reverse())dispose();await service.dispose()})
+  disposers.push(registerEmblemApi(ctx,service),registerAvatarApi(ctx,avatars),registerBackgroundApi(ctx,backgrounds))
+  ctx.effect(()=>async()=>{for(const dispose of disposers.reverse())dispose();await service.dispose();await backgrounds.dispose()})
 }

package/src/server/backgrounds.js

@@ -0,0 +1,97 @@
+import { mkdir, readFile, writeFile, rename, rm } from 'node:fs/promises'
+import { join } from 'node:path'
+import { randomUUID } from 'node:crypto'
+import sharp from 'sharp'
+import { body, json, isBase64 } from './api.js'
+import { fault } from './emblems.js'
+
+export const BACKGROUND_API = '/prts-theme-api/backgrounds'
+const BACKGROUND_SLOTS = ['full', 'sidebar', 'conversation']
+export async function createBackgroundService(directory) {
+  await mkdir(directory, { recursive: true, mode: 0o700 })
+  const configurationPath = join(directory, 'configuration.json')
+  let state = { revision: 0, full: null, sidebar: null, conversation: null }
+  try { state = JSON.parse(await readFile(configurationPath, 'utf8')) } catch (error) { if (error.code !== 'ENOENT') throw error }
+  let queue = Promise.resolve()
+  const listeners = new Set()
+  const snapshot = () => structuredClone(state)
+  return {
+    snapshot,
+    subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn) },
+    async image(id) {
+      if (!BACKGROUND_SLOTS.some(slot => state[slot]?.id === id)) throw fault(404, '背景不存在')
+      return readFile(join(directory, id + '.webp'))
+    },
+    save(data) {
+      const task = queue.then(async () => {
+        if (!BACKGROUND_SLOTS.includes(data?.slot)) throw fault(400, '背景区域无效')
+        if (data.revision !== state.revision) throw fault(409, '背景已在其他页面更新，请重新操作')
+        let entry = null, output
+        if (data.image !== null) {
+          if (!isBase64(data.image) || data.image.length > 14 * 1024 * 1024) throw fault(400, '请上传不超过 10 MB 的图片')
+          const bytes = Buffer.from(data.image, 'base64')
+          if (!bytes.length || bytes.length > 10 * 1024 * 1024) throw fault(400, '请上传不超过 10 MB 的图片')
+          try {
+            const input = sharp(bytes, { limitInputPixels: 40000000, animated: false })
+            const metadata = await input.metadata()
+            if (!['png', 'jpeg', 'webp', 'avif'].includes(metadata.format)) throw Error('format')
+            const result = await input.rotate().resize({ width: 3840, height: 2160, fit: 'inside', withoutEnlargement: true }).webp({ quality: 86 }).toBuffer({ resolveWithObject: true })
+            output = result.data
+            entry = { id: randomUUID(), width: result.info.width, height: result.info.height }
+          } catch { throw fault(400, '无法读取图片，请使用 PNG、JPEG、WebP 或 AVIF（最多 4000 万像素）') }
+        }
+        const next = { ...state, revision: state.revision + 1, [data.slot]: entry }
+        const temporary = configurationPath + '.' + randomUUID() + '.tmp'
+        try {
+          if (entry) await writeFile(join(directory, entry.id + '.webp'), output, { mode: 0o600 })
+          await writeFile(temporary, JSON.stringify(next), { mode: 0o600 })
+          await rename(temporary, configurationPath)
+        } catch (error) {
+          if (entry) await rm(join(directory, entry.id + '.webp'), { force: true }).catch(() => {})
+          throw error
+        } finally { await rm(temporary, { force: true }).catch(() => {}) }
+        const previous = state[data.slot]
+        state = next
+        if (previous) await rm(join(directory, previous.id + '.webp'), { force: true }).catch(() => {})
+        for (const listener of listeners) { try { listener(state.revision) } catch {} }
+        return snapshot()
+      })
+      queue = task.catch(() => {})
+      return task
+    },
+    async dispose() { listeners.clear(); await queue },
+  }
+}
+
+export function registerBackgroundApi(ctx, service) {
+  const connection = ctx.connection
+  let disposed = false
+  const streams = new Set()
+  const unregister = ctx.webServer.register({ kind: 'prefix', path: BACKGROUND_API, handler: async (req, res) => {
+    try {
+      if (disposed) throw fault(503, '主题服务正在重新加载')
+      if ('rejection' in connection.admit(req)) throw fault(401, '请先登录 DSH')
+      const path = new URL(req.url, 'http://localhost').pathname.slice(BACKGROUND_API.length)
+      if (req.method === 'GET' && path === '/events') {
+        res.writeHead(200, { 'content-type': 'text/event-stream', 'cache-control': 'no-cache', 'x-accel-buffering': 'no' })
+        streams.add(res)
+        const send = revision => res.write('data: ' + JSON.stringify({ revision }) + '\n\n')
+        const unsubscribe = service.subscribe(send)
+        send(service.snapshot().revision)
+        const timer = setInterval(() => res.write(': heartbeat\n\n'), 25000)
+        res.on('close', () => { clearInterval(timer); unsubscribe(); streams.delete(res) })
+        return
+      }
+      if (req.method === 'GET' && /^\/image\/[a-f0-9-]{36}$/.test(path)) {
+        const bytes = await service.image(path.slice(7))
+        res.writeHead(200, { 'content-type': 'image/webp', 'cache-control': 'private, max-age=31536000, immutable', 'x-content-type-options': 'nosniff' }); res.end(bytes); return
+      }
+      if (path !== '/configuration') throw fault(404, '接口不存在')
+      if (req.method === 'GET') { json(res, 200, service.snapshot()); return }
+      if (req.method !== 'POST') throw fault(405, '请求方法不支持')
+      if (req.headers['x-prts-request'] !== '1') throw fault(403, '缺少请求标识')
+      json(res, 200, await service.save(await body(req)))
+    } catch (error) { if (!res.headersSent) json(res, error.status || 500, { error: error.message }); else res.end() }
+  } })
+  return () => { disposed = true; unregister(); for (const stream of streams) stream.end(); streams.clear() }
+}

package/src/styles/cursor.css

@@ -16,10 +16,12 @@
   html[data-dsh-prts][data-prts-cursor="prts"] :is(textarea, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]) {
     cursor: var(--prts-text-cursor), text;
   }
+  html[data-dsh-prts][data-prts-cursor="prts"] [data-prts-opacity-dial] svg,
   html[data-dsh-prts][data-prts-cursor="prts"] [data-emblem-key],
   html[data-dsh-prts][data-prts-cursor="prts"] :is(.dsh-partner-pendant-hit, .dsh-partner-pendant-anchor, [data-prts-emblem-reorder]):enabled {
     cursor: url("__PRTS_GRAB__") 22 19, grab;
   }
+  html[data-dsh-prts][data-prts-cursor="prts"] [data-prts-opacity-control][data-dragging] svg,
   html[data-dsh-prts][data-prts-cursor="prts"] :is(.dsh-partner-pendant-hit, .dsh-partner-pendant-anchor, [data-prts-emblem-reorder]):enabled:active {
     cursor: var(--prts-sort-cursor);
   }

package/src/styles/custom-background.css

@@ -0,0 +1,331 @@
+/* Viewport-aligned wallpaper. */
+html[data-dsh-prts] { --prts-background-wash: color-mix(in srgb, var(--prts-canvas) var(--prts-background-shade, 45%), transparent); }
+html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] :is([data-prts-region="frame"], [data-prts-nav-rail]) {
+background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-full) center / cover fixed;
+}
+html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] :is([data-prts-region="sessions"], [data-prts-region="operation"]) { background: transparent; }
+html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] {
+--prts-wall-width:max(calc(var(--prts-sidebar-width,280px) + var(--prts-nav-width)),calc((100dvh - var(--prts-host-top-inset)) * var(--prts-sidebar-image-ratio,1)));
+--prts-wall-x:calc((var(--prts-sidebar-width,280px) + var(--prts-nav-width) - var(--prts-wall-width)) / 2);
+& :is([data-prts-region="sessions"],[data-prts-nav-rail]){background:linear-gradient(var(--prts-background-wash),var(--prts-background-wash)),var(--prts-background-sidebar) var(--prts-wall-x) center / var(--prts-wall-width) auto no-repeat}
+& [data-prts-region="sessions"]{background-position:center,calc(var(--prts-wall-x) - var(--prts-nav-width)) center}
+}
+html[data-dsh-prts][data-prts-rail-mode="overlay"]:is([data-prts-background-mode="split"][data-prts-background-sidebar],[data-prts-background-mode="full"][data-prts-background-full]) [data-prts-nav-rail] { background: transparent; }
+html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conversation] [data-prts-region="operation"] {
+background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-conversation) center / cover no-repeat;
+}
+html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-ambient-layer],
+html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conversation] [data-prts-ambient-layer] { display: none !important; }
+[data-prts-background-settings] { display: grid; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--prts-line); }
+[data-prts-background-settings] header { display: grid; gap: 6px; }
+[data-prts-background-settings] small, [data-prts-background-status] { color: var(--prts-muted); font-size: 12px; line-height: 1.6; }
+[data-prts-background-modes] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+[data-prts-background-modes] button { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--prts-line); border-radius: 8px; background: transparent; color: var(--prts-ink); text-align: left; cursor: pointer; }
+[data-prts-background-modes] button strong { display: block; font-size: 13px; margin-bottom: 3px; }
+[data-prts-background-modes] button small { font-size: 11px; }
+[data-prts-background-modes] button[aria-pressed="true"] { border-color: var(--prts-cyan); background: color-mix(in srgb, var(--prts-cyan) 8%, transparent); box-shadow: inset 0 0 0 1px var(--prts-cyan); }
+[data-prts-background-diagram] { display: flex; gap: 3px; width: 44px; height: 26px; padding: 3px; border: 1px solid var(--prts-muted); border-radius: 4px; }
+[data-prts-background-diagram] i { background: var(--prts-muted); opacity: .35; border-radius: 1px; flex: 1; }
+[data-prts-background-diagram] i:first-child { flex: 0 0 28%; }
+[data-prts-background-diagram="split"] i { background: var(--prts-cyan); opacity: .6; }
+[data-prts-background-diagram="split"] i:first-child { opacity: .25; }
+[data-prts-background-diagram="full"] { background: color-mix(in srgb, var(--prts-cyan) 25%, transparent); }
+[data-prts-background-diagram="full"] i { background: transparent; }
+[data-prts-background-images] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+[data-prts-background-card="full"] { grid-column: 1 / -1; }
+[data-prts-background-card-heading] { display: flex; justify-content: space-between; align-items: center; min-height: 30px; margin-bottom: 6px; font-size: 13px; }
+[data-prts-background-upload] { position: relative; display: grid; place-items: center; width: 100%; height: 120px; padding: 0; border: 1px dashed var(--prts-line); border-radius: 8px; color: var(--prts-muted); background: var(--prts-panel); overflow: hidden; cursor: pointer; }
+[data-prts-background-card="full"] [data-prts-background-upload] { height: 155px; }
+[data-prts-background-upload][data-has-image] { border-style: solid; }
+[data-prts-background-upload]:hover { border-color: var(--prts-cyan); color: var(--prts-ink); }
+[data-prts-background-thumbnail] { position: absolute; inset: 0; background: center / cover no-repeat; }
+[data-prts-background-caption] { position: relative; padding: 6px 12px; border-radius: 5px; font-size: 12px; }
+[data-has-image] [data-prts-background-caption] { align-self: end; justify-self: end; margin: 8px; background: var(--prts-panel); color: var(--prts-ink); box-shadow: 0 1px 5px #0003; }
+[data-prts-background-remove] { padding: 4px 8px; background: transparent; color: var(--prts-muted); border: 0; border-radius: 4px; font-size: 12px; cursor: pointer; }
+[data-prts-background-remove]:hover { color: var(--prts-red); background: color-mix(in srgb, var(--prts-red) 8%, transparent); }
+[data-prts-background-shade] { display: grid; gap: 8px; font-size: 13px; padding-top: 14px; border-top: 1px solid var(--prts-line); }
+[data-prts-background-shade] > span { display: flex; justify-content: space-between; }
+[data-prts-background-shade] output { color: var(--prts-muted); font-variant-numeric: tabular-nums; }
+[data-prts-background-shade] input { width: 100%; accent-color: var(--prts-cyan); }
+[data-prts-background-status] { margin: 0; }
+[data-prts-background-status]:empty { display: none; }
+[data-prts-background-settings] button:focus-visible { outline: 2px solid var(--prts-cyan); outline-offset: 3px; }
+@media (max-width: 600px) {
+[data-prts-background-modes] button { padding: 8px; }
+[data-prts-background-modes] button small { display: none; }
+[data-prts-background-images] { grid-template-columns: 1fr; }
+}
+[data-prts-background-settings] [hidden] { display: none !important; }
+/* Classic conversation roots keep their native surface unless an image is active. */
+html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] :is([data-slot="main.conversation"], [data-slot="conversation"]) > [data-phase],
+html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conversation] :is([data-slot="main.conversation"], [data-slot="conversation"]) > [data-phase] { background: transparent !important; }
+/* The native fade ends in a solid sidebar color and would cover a custom image. */
+html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-region="sessions"] [data-slot="sidebar.workspaces"] span[class$="_fade"],
+html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] [data-prts-region="sessions"] [data-slot="sidebar.workspaces"] span[class$="_fade"] { display: none !important; }
+
+/* Filter the plate, not the ancestor of fixed controls. */
+html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-region="sessions"]::before,
+html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] [data-prts-region="sessions"]::before {
+content: "";
+position: absolute;
+inset: 0;
+z-index: 0;
+pointer-events: none;
+background: color-mix(in srgb, var(--prts-panel) var(--prts-sidebar-opacity, 6%), transparent);
+-webkit-backdrop-filter: blur(var(--prts-sidebar-blur, 8px)) saturate(1.15);
+backdrop-filter: blur(var(--prts-sidebar-blur, 8px)) saturate(1.15);
+box-shadow: inset -1px 0 color-mix(in srgb, var(--prts-ink) 10%, transparent), inset 0 1px rgb(255 255 255 / 8%);
+}
+/* Raise sidebar controls above glass. */
+html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-region="sessions"] [data-slot="sidebar"] > :first-child,
+html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] [data-prts-region="sessions"] [data-slot="sidebar"] > :first-child {
+position: relative;
+z-index: 1;
+}
+
+html[data-dsh-prts]:is([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"][data-prts-background-sidebar]) {
+/* Opacity on the parent isolates backdrop sampling during slide-in. */
+&[data-prts-rail-mode="overlay"] [data-prts-nav-rail]{opacity:1;transition:transform 180ms var(--prts-ease-snap),visibility 0s linear 180ms}
+&[data-prts-rail-mode="overlay"][data-prts-rail-open] [data-prts-nav-rail]{transition-delay:0s}
+/* Glass stays below rail controls. */
+& [data-prts-nav-rail]::before {
+content: "";
+position: absolute;
+inset: 0;
+z-index: -1;
+pointer-events: none;
+background: color-mix(in srgb, var(--prts-panel) var(--prts-rail-opacity, 30%), transparent);
+-webkit-backdrop-filter: blur(var(--prts-rail-blur, 12px)) saturate(1.15);
+backdrop-filter: blur(var(--prts-rail-blur, 12px)) saturate(1.15);
+box-shadow: inset -1px 0 color-mix(in srgb, var(--prts-ink) 10%, transparent), inset 0 1px rgb(255 255 255 / 8%);
+}
+
+/* Glass rail feedback retains the wallpaper instead of switching to solid black. */
+& [data-prts-nav-rail] button {
+color: var(--prts-muted) !important;
+border-bottom-color: var(--prts-line);
+transition: background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
+}
+& [data-prts-nav-rail] button:is(:hover, :focus-visible, [aria-expanded="true"]) {
+background: color-mix(in srgb, var(--prts-panel-raised) 32%, transparent);
+color: var(--prts-ink) !important;
+box-shadow: inset 0 1px rgb(255 255 255 / 15%), inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 10%, transparent);
+}
+& [data-prts-nav-rail] button:active {
+background: color-mix(in srgb, var(--prts-panel-raised) 48%, transparent);
+box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 18%, transparent);
+}
+
+/* Daylight needs a little contrast, rather than another white highlight. */
+&[data-prts-scheme="light"] [data-prts-nav-rail] button:is(:hover, :focus-visible, [aria-expanded="true"]) {
+background: color-mix(in srgb, var(--prts-ink) 8%, transparent);
+box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 16%, transparent);
+}
+&[data-prts-scheme="light"] [data-prts-nav-rail] button:active {
+background: color-mix(in srgb, var(--prts-ink) 13%, transparent);
+box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prts-ink) 22%, transparent);
+}
+
+/* A dark solid-rail divider is too strong against the daylight wallpaper. */
+&[data-prts-scheme="light"] [data-prts-nav-rail] {
+border-right-color: color-mix(in srgb, var(--prts-ink) 10%, transparent);
+box-shadow: none;
+}
+&[data-prts-scheme="light"] [data-prts-nav-rail]::before {
+box-shadow: inset 0 1px rgb(255 255 255 / 8%);
+}
+
+}
+/* The solid rail stays dark in both schemes; use the same light feedback
+* instead of the conversation palette's light-mode ink/surface colors. */
+html[data-dsh-prts]:not([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"][data-prts-background-sidebar]) [data-prts-nav-rail] button:is(:hover, :focus-visible, [aria-expanded="true"]) {
+background: rgb(255 255 255 / 8%);
+color: #f3f6f7 !important;
+box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
+}
+html[data-dsh-prts]:not([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"][data-prts-background-sidebar]) [data-prts-nav-rail] button:active {
+background: rgb(255 255 255 / 14%);
+color: #f3f6f7 !important;
+box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
+}
+
+/* Baker keeps its game palette; only a real conversation wallpaper enables glass. */
+html[data-dsh-prts][data-prts-conversation-style="deck-chat"]:is(
+[data-prts-background-mode="full"][data-prts-background-full],
+[data-prts-background-mode="split"][data-prts-background-conversation]
+) {
+--prts-chat-user-surface: rgb(239 239 237 / var(--prts-baker-opacity, 50%));
+--prts-chat-assistant-surface: rgb(69 70 68 / var(--prts-baker-opacity, 50%));
+&[data-prts-scheme="light"] {
+--prts-chat-user-surface: rgb(255 255 255 / var(--prts-baker-opacity, 50%));
+--prts-chat-assistant-surface: rgb(223 227 223 / var(--prts-baker-opacity, 50%));
+}
+& :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"],
+& :is([data-prts-ai-surface], [data-message-role="user"], [data-message-role="assistant"]),
+& [data-chat-flow-kind="assistant-step"]:not([data-chat-group-part="reasoning"]) [class$="_body"]:has(:is([data-markdown], [data-slot*="markdown" i], .markdown-body)) {
+-webkit-backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
+backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
+}
+& [data-prts-ai-surface]::before,
+& [data-message-role="assistant"]::after,
+& :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]::before,
+& [data-message-role="user"]::before {
+-webkit-backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
+backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
+}
+}
+
+/* Classic user messages share the wallpaper translucency controls with Baker bubbles. */
+html[data-dsh-prts][data-prts-conversation-style="native"]:is(
+[data-prts-background-mode="full"][data-prts-background-full],
+[data-prts-background-mode="split"][data-prts-background-conversation]
+) {
+& [data-message-role="user"],
+& :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"] {
+background: rgb(23 29 33 / var(--prts-classic-user-opacity, 50%)) !important;
+-webkit-backdrop-filter: blur(var(--prts-classic-user-blur, 8px)) saturate(1.08);
+backdrop-filter: blur(var(--prts-classic-user-blur, 8px)) saturate(1.08);
+}
+&[data-prts-scheme="light"] {
+& [data-message-role="user"],
+& :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"] {
+background: rgb(229 234 237 / var(--prts-classic-user-opacity, 50%)) !important;
+}
+}
+}
+
+[data-prts-opacity-settings] { min-width: 0; max-width: 420px; margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--prts-line); }
+[data-prts-opacity-settings] legend { padding: 0 8px 0 0; font-size: 13px; font-weight: 600; }
+[data-prts-opacity-grid] { display: grid; grid-template-columns: minmax(0,1fr); max-width: 420px; margin-top: 12px; }
+[data-prts-opacity-control] { display: grid; grid-template-columns: minmax(116px,38%) minmax(0,1fr); grid-template-rows: 26px 96px auto auto; align-items: center; column-gap: 16px; min-width: 0; padding: 10px 0 12px; }
+[data-prts-opacity-control]:not(:first-child):not([hidden]) { border-top: 1px solid var(--prts-line); }
+[data-prts-opacity-control][hidden] { display: none; }
+[data-prts-opacity-heading] { grid-column: 1; grid-row: 1; display: flex; align-self: stretch; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
+[data-prts-opacity-heading] > strong { font-size: 12px; line-height: 1.4; white-space: nowrap; }
+[data-prts-opacity-control] > [data-prts-material-preview] { grid-column: 2; grid-row: 1 / 3; align-self: center; }
+[data-prts-opacity-control] > [data-prts-opacity-note] { grid-column: 1 / -1; grid-row: 4; }
+[data-prts-blur-control] { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) 36px 22px; align-items: center; gap: 8px; min-width: 0; margin-top: 6px; }
+[data-prts-blur-control][hidden] { display: none; }
+[data-prts-blur-control] label { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; font-size: 11px; color: var(--prts-muted); }
+[data-prts-blur-control] input { width: 100%; min-width: 0; margin: 0; accent-color: var(--prts-cyan); cursor: pointer; }
+[data-prts-blur-control] output { color: var(--prts-ink); font: 11px/1 var(--prts-mono); text-align: right; font-variant-numeric: tabular-nums; }
+[data-prts-blur-reset] { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--prts-muted); cursor: pointer; }
+[data-prts-blur-reset]:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--prts-cyan) 12%, transparent); color: var(--prts-cyan); }
+[data-prts-blur-reset] svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+[data-prts-opacity-dial] { position: relative; grid-column: 1; grid-row: 2; justify-self: center; width: 96px; aspect-ratio: 1; user-select: none; }
+[data-prts-opacity-dial] svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; border-radius: 50%; }
+[data-dragging] [data-prts-opacity-dial] svg { cursor: grabbing; }
+[data-prts-opacity-dial] svg:focus-visible { outline: 2px solid var(--prts-cyan); outline-offset: 2px; }
+[data-prts-opacity-dial] path { fill: none; stroke-width: 5; stroke-linecap: round; }
+[data-dial-track] { stroke: var(--prts-muted); opacity: .25; }
+[data-dial-lit], [data-dial-tail] { stroke: var(--prts-cyan); }
+[data-prts-opacity-dial] [data-dial-tail] { stroke-width: 12; transition: opacity 160ms ease; }
+[data-dial-head] { fill: var(--prts-cyan); }
+[data-prts-opacity-number] { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: baseline; gap: 1px; }
+[data-prts-opacity-number] input { appearance: textfield; width: 3ch; padding: 3px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; outline-offset: 2px; background: transparent; color: var(--prts-ink); text-align: center; font: 500 22px/1.2 var(--prts-mono); font-variant-numeric: tabular-nums; }
+[data-prts-opacity-number] input:focus { border-bottom-color: var(--prts-cyan); }
+[data-prts-opacity-number] input::-webkit-inner-spin-button, [data-prts-opacity-number] input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+[data-prts-opacity-number] span { font-size: 11px; color: var(--prts-muted); }
+[data-prts-opacity-reset] { position: relative; display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--prts-muted); cursor: pointer; }
+[data-prts-opacity-reset] svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+[data-prts-opacity-reset]:hover, [data-prts-opacity-reset]:focus-visible { background: color-mix(in srgb, var(--prts-cyan) 12%, transparent); color: var(--prts-cyan); }
+[data-prts-opacity-reset]::after { content: attr(data-prts-opacity-reset-tooltip); position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; padding: 5px 8px; border: 1px solid var(--prts-line); border-radius: 4px; background: var(--prts-panel-raised); color: var(--prts-ink); box-shadow: var(--prts-shadow-glass-overlay); white-space: nowrap; opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; }
+[data-prts-opacity-reset]:hover::after, [data-prts-opacity-reset]:focus-visible::after { opacity: 1; transform: translateY(0); }
+[data-prts-opacity-control] [data-prts-opacity-note] { font-size: 10px; }
+[data-prts-opacity-note]:empty { display: none; }
+html[data-prts-motion="reduced"] [data-prts-opacity-dial] [data-dial-tail] { display: none; }
+@media (prefers-reduced-motion: reduce) { [data-prts-opacity-dial] [data-dial-tail] { display: none; } }
+
+/* Match the two peer modules without boxing one of them in a second surface. */
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-section="appearance"] > section {
+padding: 0;
+border: 0;
+border-radius: 0;
+background: transparent;
+}
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-background-settings] {
+margin-top: 24px;
+padding-top: 12px;
+border-top: 1px solid var(--prts-line);
+}
+/* SVG outlines are rectangular in Chromium. Draw keyboard focus inside the ring. */
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-opacity-dial] svg:focus { outline: none !important; box-shadow: none; }
+[data-dial-focus] { fill: none; stroke: var(--prts-cyan); stroke-width: 2; opacity: 0; }
+[data-prts-opacity-dial] svg:focus-visible [data-dial-focus] { opacity: .8; }
+[data-prts-opacity-control][data-dragging] [data-dial-focus] { opacity: 0; }
+[data-prts-material-preview] {
+position: relative;
+width: 100%;
+height: 104px;
+overflow: hidden;
+border: 1px solid var(--prts-line);
+border-radius: 6px;
+background: var(--prts-background-full, linear-gradient(135deg, #8bb6c2, #c7b69c)) center / cover;
+--prts-preview-surface: var(--prts-panel);
+}
+html[data-prts-background-mode="split"] :is([data-prts-material-preview="sidebarOpacity"],[data-prts-material-preview="railOpacity"]) { background-image: var(--prts-background-sidebar, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
+html[data-prts-background-mode="split"] [data-prts-material-preview="bakerOpacity"] { background-image: var(--prts-background-conversation, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
+html[data-prts-background-mode="split"] [data-prts-material-preview="classicUserOpacity"] { background-image: var(--prts-background-conversation, linear-gradient(135deg, #8bb6c2, #c7b69c)); }
+[data-prts-material-preview]::before { content: ""; position: absolute; inset: 0; background: var(--prts-background-wash); }
+[data-prts-material-preview-surface] { position: absolute; inset: 0; display: grid; align-content: center; gap: 6px; padding: 10px; font-size: 10px; text-align: left; color: var(--prts-ink); background: color-mix(in srgb, var(--prts-preview-surface) var(--prts-sidebar-opacity, 6%), transparent); backdrop-filter: blur(var(--prts-sidebar-blur, 8px)) saturate(1.15); }
+[data-prts-material-preview-surface] i { display: block; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--prts-ink) 18%, transparent); }
+[data-prts-material-preview-surface] i:last-child { width: 65%; }
+[data-prts-material-preview="railOpacity"] [data-prts-material-preview-surface] { inset: 0 auto 0 0; width: 40%; padding: 5px; justify-items: center; gap: 2px; background: color-mix(in srgb, var(--prts-preview-surface) var(--prts-rail-opacity, 30%), transparent); backdrop-filter: blur(var(--prts-rail-blur, 12px)) saturate(1.15); }
+[data-prts-material-preview="bakerOpacity"] [data-prts-material-preview-surface] { inset: 16px 10px; border-radius: 0 10px 10px 10px; background: rgb(69 70 68 / var(--prts-baker-opacity, 50%)); backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08); }
+html[data-prts-scheme="light"] [data-prts-material-preview="bakerOpacity"] [data-prts-material-preview-surface] { background: rgb(223 227 223 / var(--prts-baker-opacity, 50%)); }
+[data-prts-material-preview="classicUserOpacity"] [data-prts-material-preview-surface] { inset: 16px 10px; border-left: 3px solid var(--prts-yellow); border-radius: var(--prts-radius-card); background: rgb(23 29 33 / var(--prts-classic-user-opacity, 50%)); backdrop-filter: blur(var(--prts-classic-user-blur, 8px)) saturate(1.08); }
+html[data-prts-scheme="light"] [data-prts-material-preview="classicUserOpacity"] [data-prts-material-preview-surface] { background: rgb(229 234 237 / var(--prts-classic-user-opacity, 50%)); }
+@media (max-width: 560px) {
+[data-prts-opacity-control] { column-gap: 10px; }
+[data-prts-opacity-heading] { gap: 6px; }
+[data-prts-opacity-dial] { width: 88px; }
+}
+
+/* Backgrounds now have their own settings page. */
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-section="background"] > [data-prts-background-settings] { margin: 0; padding: 0; border: 0; }
+html[data-dsh-prts] [data-prts-settings-section="background"] [data-prts-background-settings] > header { padding: 16px 0 10px; }
+html[data-dsh-prts] [data-prts-settings-section="background"] [data-prts-background-settings] > header strong { font-size: 13px; color: var(--prts-muted); }
+[data-prts-composer-glass-setting], [data-prts-composer-glass-required] { display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--prts-line); }
+[data-prts-composer-glass-required] { font-size: 12px; color: var(--prts-muted); }
+
+/* The native active composer fades into DSH's base color. Baker paints a
+* different solid backdrop, so match that backdrop while keeping the fade. */
+html[data-dsh-prts][data-prts-conversation-style="deck-chat"][data-prts-background-mode="off"] [data-phase="active"] [data-composer-seat]:not(:has([data-prts-composer-glass-active])) {
+background: linear-gradient(180deg, transparent 0, var(--prts-chat-dock-surface, var(--prts-chat-backdrop)) 36px) !important;
+}
+html[data-dsh-prts][data-prts-conversation-style="deck-chat"][data-prts-background-mode="off"][data-prts-texture="restrained"] {
+--prts-chat-dock-surface: color-mix(in srgb, var(--prts-chat-backdrop) 82%, var(--prts-canvas));
+}
+html[data-dsh-prts][data-prts-conversation-style="deck-chat"][data-prts-background-mode="off"][data-prts-texture="off"] {
+--prts-chat-dock-surface: color-mix(in srgb, var(--prts-chat-backdrop) 72%, var(--prts-canvas));
+}
+
+/* Native data-streaming disappears for settled and interrupted responses.
+* Hide only the current response body, never reasoning, tools or earlier rounds. */
+html[data-dsh-prts][data-prts-conversation-style="deck-chat"][data-prts-baker-loading]
+[data-chat-flow-kind="assistant-step"]:not([data-chat-group-part="reasoning"])
+[data-streaming] > :is([data-prts-ai-surface], [class$="_body"]) {
+min-width: 78px;
+width: 78px !important;
+min-height: 42px;
+box-sizing: border-box;
+display: flex;
+align-items: center;
+justify-content: center;
+padding: 12px 18px !important;
+& > * { display: none !important; }
+&::after {
+content: "正在生成回复";
+font-size: 0;
+display: block;
+width: 4px;
+height: 4px;
+border-radius: 1px;
+animation: prts-baker-typing 1.2s linear infinite;
+}
+}
+@keyframes prts-baker-typing {
+0%, 100% { background: color-mix(in srgb,currentColor 30%,transparent); box-shadow: -10px 0 0 currentColor, 10px 0 0 color-mix(in srgb,currentColor 30%,transparent); }
+33% { background: currentColor; box-shadow: -10px 0 0 color-mix(in srgb,currentColor 30%,transparent), 10px 0 0 color-mix(in srgb,currentColor 30%,transparent); }
+66% { background: color-mix(in srgb,currentColor 30%,transparent); box-shadow: -10px 0 0 color-mix(in srgb,currentColor 30%,transparent), 10px 0 0 currentColor; }
+}