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

package/src/client/theme-transfer-panel.js

@@ -1,20 +1,21 @@
-import { THEME_PACKAGE_LIMIT, validateThemePackage, describeThemePackage, ignoredThemePackageFields } from './theme-transfer.js'
+import { mountFileDrop } from './file-drop.js'
+import { checkTransferCancelled, readTransferFile, THEME_PACKAGE_LIMIT, validateThemePackage, describeThemePackage, ignoredThemePackageFields } from './theme-transfer.js'
 
 export function themeTransferMarkup() {
   return `<dialog data-prts-transfer-dialog aria-labelledby="prts-transfer-title">
     <section data-prts-transfer>
       <header data-prts-transfer-heading><div><small>P.R.T.S. / 主题文件</small><h2 id="prts-transfer-title">导入与导出</h2></div><button type="button" data-prts-transfer-close aria-label="关闭导入与导出">×</button></header>
       <div data-prts-transfer-columns>
-        <section data-prts-transfer-card>
+        <section data-prts-transfer-card="export">
           <h3>导出主题</h3><p>保存一份主题，备份或带到另一台设备。</p>
           <label data-prts-transfer-option><input type="checkbox" data-prts-transfer-assets checked><span>包含自定义素材<small>背景、头像和徽记，保留编辑参数与排列。</small></span></label>
           <small>取消勾选，仅导出主题设置。</small>
           <button type="button" data-prts-transfer-export>导出主题文件 <span aria-hidden="true">↓</span></button>
         </section>
-        <section data-prts-transfer-card>
-          <h3>导入主题</h3><p>选择已导出的文件，确认内容后应用。</p>
+        <section data-prts-transfer-card="import" data-prts-transfer-drop>
+          <h3>导入主题</h3><p>选择或拖入已导出的文件，确认内容后应用。</p>
           <div data-prts-transfer-file-hint><span aria-hidden="true">↑</span><small>.prts-theme.json · 最大 160 MB</small></div>
-          <button type="button" data-prts-transfer-choose>选择主题文件</button>
+          <button type="button" data-prts-transfer-choose>选择主题文件 <span aria-hidden="true">↑</span></button>
           <input type="file" accept=".prts-theme.json,application/json" aria-label="导入主题文件" data-prts-transfer-file hidden>
         </section>
       </div>
@@ -25,6 +26,8 @@ export function themeTransferMarkup() {
         <div data-prts-transfer-buttons><button type="button" data-prts-transfer-apply>确认导入</button><button type="button" data-prts-transfer-cancel>取消</button></div>
       </div>
       <div data-prts-transfer-recovery hidden><small>恢复将替换最近一次导入后所做的修改。</small><button type="button" data-prts-transfer-restore>恢复导入前配置</button></div>
+      <div data-prts-transfer-progress hidden><div><span data-prts-transfer-phase></span><span data-prts-transfer-percent></span></div><progress data-prts-transfer-bar max="1" aria-label="主题文件处理进度"></progress></div>
+      <button type="button" data-prts-transfer-stop hidden>取消操作</button>
       <p data-prts-transfer-status role="status" aria-live="polite"></p>
     </section>
   </dialog>`
@@ -40,34 +43,56 @@ export function mountThemeTransfer({ panel, window, transfer }) {
   const keydown = event => { if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); close() } }
   const cancel = event => { if (event.target === dialog) { event.preventDefault(); event.stopPropagation(); close() } }
   const get = name => section.querySelector(`[data-prts-transfer-${name}]`)
-  let pending, busy = false, disposed = false, generation = 0
+  let choosing = false, activeOperation, pending, busy = false, disposed = false, generation = 0, controller, cancellable = true
   const render = () => {
     if (disposed) return
+    for (const card of section.querySelectorAll('[data-prts-transfer-card]')) card.toggleAttribute('data-prts-transfer-active', card.dataset.prtsTransferCard === (busy ? activeOperation : pending || choosing ? 'import' : undefined))
     get('preview').hidden = !pending
     if (!pending) get('compatibility').hidden = true
     get('recovery').hidden = !transfer.hasBackup
     for (const control of section.querySelectorAll('button,input')) control.disabled = busy
+    get('stop').hidden = !busy
+    get('stop').disabled = !busy || !cancellable || controller?.signal.aborted
     // Prevent local editors from racing a multi-service import; other clients use revision checks.
     for (const page of panel.querySelectorAll('[data-prts-settings-section]')) if (!page.contains(section)) page.inert = busy
   }
-  async function run(task) {
+  const progress = ({ value, label, cancellable: allowed }) => {
+    if (disposed) return
+    if (allowed === false) { cancellable = false; render() }
+    get('progress').hidden = false
+    get('phase').textContent = label
+    get('percent').textContent = value === null ? '' : `${Math.round(value * 100)}%`
+    if (value === null) get('bar').removeAttribute('value')
+    else get('bar').value = value
+  }
+  const paint = () => new Promise(resolve => window.setTimeout(resolve, 0))
+  async function run(kind, task) {
     if (busy) return
-    busy = true; get('status').textContent = '正在处理，请稍候…'; render()
-    try { get('status').textContent = await task() }
-    catch (error) { if (!disposed) get('status').textContent = error.message }
-    finally { busy = false; render() }
+    controller = new window.AbortController(); cancellable = true
+    activeOperation = kind
+    busy = true; section.setAttribute('aria-busy', 'true'); get('status').textContent = ''; get('progress').hidden = true; render()
+    progress({ value: null, label: '正在准备…' })
+    try {
+      await paint()
+      checkTransferCancelled(controller.signal)
+      const message = await task(controller.signal)
+      if (!disposed) { progress({ value: 1, label: '处理完成' }); get('status').textContent = message }
+    }
+    catch (error) { if (!disposed) { get('progress').hidden = true; get('status').textContent = error.name === 'AbortError' ? '操作已取消。' : error.message } }
+    finally { busy = false; if (!pending && !disposed) get('file').value = '';  if (!disposed) section.setAttribute('aria-busy', 'false'); render() }
   }
   const change = event => {
     if (event.target !== get('file')) return
+    choosing = false
     const file = event.target.files?.[0], selected = ++generation
     pending = undefined; render()
     if (!file) return
-    void run(async () => {
+    void run('import', async signal => {
       if (file.size > THEME_PACKAGE_LIMIT) throw Error('主题文件不能超过 160 MB')
-      const text = await new Promise((resolve, reject) => {
-        const reader = new window.FileReader()
-        reader.onload = () => resolve(reader.result); reader.onerror = () => reject(Error('无法读取主题文件')); reader.readAsText(file)
-      })
+      const text = await readTransferFile(window, file, signal, event => progress({ value: event.lengthComputable && event.total ? event.loaded / event.total * 0.8 : null, label: '正在读取主题文件…' }))
+      progress({ value: 0.8, label: '正在解析并检查主题文件…' })
+      await paint()
+      checkTransferCancelled(signal)
       let value
       try { value = JSON.parse(text) } catch { throw Error('主题文件不是有效的 JSON') }
       validateThemePackage(value)
@@ -85,22 +110,31 @@ export function mountThemeTransfer({ panel, window, transfer }) {
   }
   const click = event => {
     const button = event.target.closest?.('button')
+    if (button === get('stop') && busy && cancellable) {
+      controller.abort(); progress({ value: null, label: '正在取消，请稍候…', cancellable: false }); return
+    }
     if (button === get('close')) close()
-    if (button === get('choose')) get('file').click()
-    if (button === get('export')) void run(async () => {
-      const value = await transfer.export(get('assets').checked)
+    if (button === get('choose')) { choosing = true; render(); get('file').click() }
+    if (button === get('export')) void run('export', async signal => {
+      const value = await transfer.export(get('assets').checked, state => progress({ ...state, value: state.value * 0.9 }), signal)
+      progress({ value: 0.9, label: '正在生成下载文件…' })
+      await paint()
+      checkTransferCancelled(signal)
       transfer.download(value)
       return '已发起下载，请确认主题文件已保存。'
     })
-    if (button === get('apply') && pending) void run(async () => {
-      await transfer.import(pending); pending = undefined; get('file').value = ''
+    if (button === get('apply') && pending) void run('import', async signal => {
+      await transfer.import(pending, progress, signal); pending = undefined; get('file').value = ''
       return '主题已导入并保存。'
     })
-    if (button === get('cancel')) { pending = undefined; get('file').value = ''; get('status').textContent = ''; render() }
-    if (button === get('restore')) void run(async () => { await transfer.restore(); return '已恢复导入前配置。' })
+    if (button === get('cancel')) { pending = undefined; get('file').value = ''; get('status').textContent = ''; get('progress').hidden = true; render() }
+    if (button === get('restore')) void run('import', async signal => { await transfer.restore(progress, signal); return '已恢复导入前配置。' })
   }
+  const drop = mountFileDrop({ area: get('drop'), input: get('file'), enabled: () => !busy && !disposed, onError: message => { get('status').textContent = message } })
+  const cancelChoice = () => { choosing = false; render() }
+  get('file').addEventListener('cancel', cancelChoice)
   trigger?.addEventListener('click', open)
   dialog.addEventListener('keydown', keydown); dialog.addEventListener('cancel', cancel)
   section.addEventListener('change', change); section.addEventListener('click', click); render()
-  return { dispose() { disposed = true; generation++; if (dialog.open) dialog.close(); trigger?.removeEventListener('click', open); dialog.removeEventListener('keydown', keydown); dialog.removeEventListener('cancel', cancel); section.removeEventListener('change', change); section.removeEventListener('click', click) } }
+  return { dispose() { get('file').removeEventListener('cancel', cancelChoice); drop.dispose(); disposed = true; controller?.abort(); generation++; if (dialog.open) dialog.close(); trigger?.removeEventListener('click', open); dialog.removeEventListener('keydown', keydown); dialog.removeEventListener('cancel', cancel); section.removeEventListener('change', change); section.removeEventListener('click', click) } }
 }

package/src/client/theme-transfer.js

@@ -1,6 +1,25 @@
 import { validBackgroundRegion } from '../shared/background-region.js'
 import { DEFAULT_PREFERENCES, normalizePreferences } from './preferences.js'
 
+export function checkTransferCancelled(signal) {
+  if (signal?.aborted) throw Object.assign(new Error('操作已取消'), { name: 'AbortError' })
+}
+
+export function readTransferFile(window, blob, signal, onProgress, asImage = false) {
+  return new Promise((resolve, reject) => {
+    checkTransferCancelled(signal)
+    const reader = new window.FileReader()
+    const cleanup = () => signal?.removeEventListener('abort', abort)
+    const abort = () => { reader.abort(); cleanup(); reject(Object.assign(new Error('操作已取消'), { name: 'AbortError' })) }
+    reader.onload = () => { cleanup(); resolve(asImage ? String(reader.result).split(',')[1] : reader.result) }
+    reader.onerror = () => { cleanup(); reject(Error('无法读取主题文件或图片')) }
+    reader.onprogress = onProgress
+    signal?.addEventListener('abort', abort, { once: true })
+    if (asImage) reader.readAsDataURL(blob)
+    else reader.readAsText(blob)
+  })
+}
+
 export const THEME_PACKAGE_LIMIT = 160 * 1024 * 1024
 const transferSlots = ['full', 'sidebar', 'conversation']
 const transferRoles = ['user', 'assistant']
@@ -84,61 +103,64 @@ export function describeThemePackage(value) {
 
 export function createThemeTransfer({ window, getPreferences, savePreferences, checkWritable, checkExport = checkWritable, themeVersion }) {
   let busy = false, backup
-  const request = async (path, data) => {
-    const response = await window.fetch('/prts-theme-api/' + path, { credentials: 'same-origin',
+  const request = async (path, data, signal) => {
+    checkTransferCancelled(signal)
+    const response = await window.fetch('/prts-theme-api/' + path, { credentials: 'same-origin', signal,
       ...(data === undefined ? {} : { method: 'POST', headers: { 'content-type': 'application/json', 'x-prts-request': '1' }, body: JSON.stringify(data) }) })
     const result = await response.json()
     if (!response.ok) throw Error(result.error || '无法连接主题素材服务')
     return result
   }
-  const readImage = blob => new Promise((resolve, reject) => {
-    const reader = new window.FileReader()
-    reader.onload = () => resolve(String(reader.result).split(',')[1])
-    reader.onerror = () => reject(Error('无法读取背景图片'))
-    reader.readAsDataURL(blob)
-  })
-  async function capture(includeAssets) {
+  async function capture(includeAssets, progress = () => {}, signal) {
+    checkTransferCancelled(signal)
+    progress({ value: 0, label: '正在读取主题设置…' })
     const value = { format: 'prts-theme', version: 1, themeVersion, exportedAt: new Date().toISOString(), preferences: { ...getPreferences() } }
     const states = {}
     if (includeAssets) {
       const backgrounds = {}, backgroundRegions = {}, avatars = {}, items = [], ids = new Map()
-      states.backgrounds = await request('backgrounds/configuration')
+      progress({ value: 0.1, label: '正在读取背景…' })
+      states.backgrounds = await request('backgrounds/configuration', undefined, signal)
       for (const slot of transferSlots) {
         const entry = states.backgrounds[slot]
         backgroundRegions[slot] = entry?.region ?? null
         backgrounds[slot] = null
         if (entry) {
           if (!/^[a-f0-9-]{36}$/.test(entry.id)) throw Error('背景引用无效')
-          const response = await window.fetch('/prts-theme-api/backgrounds/image/' + entry.id, { credentials: 'same-origin' })
+          const response = await window.fetch('/prts-theme-api/backgrounds/image/' + entry.id, { credentials: 'same-origin', signal })
           if (!response.ok) throw Error('无法导出背景图片')
-          backgrounds[slot] = await readImage(await response.blob())
+          backgrounds[slot] = await readTransferFile(window, await response.blob(), signal, undefined, true)
         }
       }
-      states.avatars = await request('avatars/configuration')
+      progress({ value: 0.35, label: '正在读取头像…' })
+      states.avatars = await request('avatars/configuration', undefined, signal)
       for (const role of transferRoles) {
-        const source = await request('avatars/edit/' + role)
+        const source = await request('avatars/edit/' + role, undefined, signal)
         if (source.revision !== states.avatars.revision) throw Error('头像已变化，请重新导出')
         avatars[role] = source.image ? { image: source.image, crop: source.crop } : null
       }
-      states.emblems = await request('emblems/configuration')
+      progress({ value: 0.5, label: '正在读取徽记…' })
+      states.emblems = await request('emblems/configuration', undefined, signal)
       async function reference(entry) {
         if (!entry) return null
         if (entry.kind === 'builtin') return { kind: 'builtin', key: entry.key, label: entry.label }
         if (!ids.has(entry.draftId)) {
           ids.set(entry.draftId, items.length)
-          items.push(await request('emblems/draft/' + encodeURIComponent(entry.draftId) + '/export'))
+          items.push(await request('emblems/draft/' + encodeURIComponent(entry.draftId) + '/export', undefined, signal))
         }
         return { kind: 'custom', asset: ids.get(entry.draftId), label: entry.label }
       }
       const hero = await reference(states.emblems.configuration.hero), conversation = []
       for (const entry of states.emblems.configuration.conversation) conversation.push(await reference(entry))
       value.assets = { backgrounds, backgroundRegions, avatars, emblems: { items, hero, conversation } }
+      progress({ value: 0.85, label: '正在核对素材…' })
       for (const kind of ['backgrounds', 'avatars', 'emblems']) {
-        if ((await request(kind + '/configuration')).revision !== states[kind].revision) throw Error('素材在导出期间发生变化，请重试')
+        if ((await request(kind + '/configuration', undefined, signal)).revision !== states[kind].revision) throw Error('素材在导出期间发生变化，请重试')
       }
     }
     if (JSON.stringify(value.preferences) !== JSON.stringify(getPreferences())) throw Error('设置在导出期间发生变化，请重试')
+    checkTransferCancelled(signal)
     validateThemePackage(value)
+    progress({ value: 1, label: '主题数据已就绪' })
     return { value, states }
   }
   async function exclusive(fn) {
@@ -154,14 +176,23 @@ export function createThemeTransfer({ window, getPreferences, savePreferences, c
     window.document.body.append(link); link.click(); link.remove()
     window.setTimeout(() => window.URL.revokeObjectURL(url), 1000)
   }
-  async function apply(value) {
+  async function apply(value, progress = () => {}, signal) {
+    checkTransferCancelled(signal)
     validateThemePackage(value)
     const preferenceRevision = checkWritable()
-    const before = await capture(Boolean(value.assets))
+    const before = await capture(Boolean(value.assets), state => progress({ value: state.value * 0.3, label: '备份：' + state.label }), signal)
     backup = before.value
+    progress({ value: 0.3, label: '正在生成导入前备份…' })
+    await new Promise(resolve => window.setTimeout(resolve, 0))
+    checkTransferCancelled(signal)
     download(backup, 'before-import')
+    let completed = 0
+    const total = value.assets ? value.assets.emblems.items.length + 7 : 1
+    const step = label => progress({ value: 0.35 + 0.65 * completed / total, label })
     const undo = [], revisions = Object.fromEntries(Object.entries(before.states).map(([key, state]) => [key, state.revision]))
     const write = async (kind, data, previous) => {
+      checkTransferCancelled(signal)
+      // Await writes without aborting: their confirmed revision is needed for rollback.
       const result = await request(kind + '/configuration', { ...data, revision: revisions[kind] })
       revisions[kind] = result.revision
       undo.push(async () => {
@@ -173,24 +204,35 @@ export function createThemeTransfer({ window, getPreferences, savePreferences, c
       if (value.assets) {
         const a = value.assets, old = before.value.assets, drafts = []
         // Generate every custom draft before changing the active configuration.
-        for (const item of a.emblems.items) drafts.push(await request('emblems/import', item))
+        for (const item of a.emblems.items) {
+          step('正在导入徽记素材…')
+          checkTransferCancelled(signal)
+          drafts.push(await request('emblems/import', item)); completed++
+        }
         const entry = (ref, index) => ref === null ? null : ref.kind === 'builtin' ? ref : { kind: 'custom', key: 'import-' + index + '-' + drafts[ref.asset].draftId, label: ref.label, draftId: drafts[ref.asset].draftId }
         const configuration = { version: 2, hero: entry(a.emblems.hero, 'hero'), conversation: a.emblems.conversation.map(entry) }
-        for (const slot of transferSlots) await write('backgrounds', { slot, image: a.backgrounds[slot], region: a.backgroundRegions?.[slot] ?? null }, { slot, image: old.backgrounds[slot], region: old.backgroundRegions?.[slot] ?? null })
-        for (const role of transferRoles) await write('avatars', { role, image: a.avatars[role]?.image ?? null, crop: a.avatars[role]?.crop }, { role, image: old.avatars[role]?.image ?? null, crop: old.avatars[role]?.crop })
-        await write('emblems', { configuration }, { configuration: before.states.emblems.configuration })
+        for (const slot of transferSlots) { step('正在应用背景…'); await write('backgrounds', { slot, image: a.backgrounds[slot], region: a.backgroundRegions?.[slot] ?? null }, { slot, image: old.backgrounds[slot], region: old.backgroundRegions?.[slot] ?? null }); completed++ }
+        for (const role of transferRoles) { step('正在应用头像…'); await write('avatars', { role, image: a.avatars[role]?.image ?? null, crop: a.avatars[role]?.crop }, { role, image: old.avatars[role]?.image ?? null, crop: old.avatars[role]?.crop }); completed++ }
+        step('正在应用徽记排列…')
+        await write('emblems', { configuration }, { configuration: before.states.emblems.configuration }); completed++
       }
+      step('正在保存主题设置…')
+      checkTransferCancelled(signal)
+      progress({ value: 0.99, label: '正在保存主题设置…', cancellable: false })
       await savePreferences(mergeThemePreferences(before.value.preferences, value.preferences), preferenceRevision)
+      progress({ value: 1, label: '主题已保存' })
     } catch (error) {
+      progress({ value: null, label: signal?.aborted ? '正在取消，回退素材…' : '导入失败，正在回退素材…', cancellable: false })
       let failures = 0
       for (const restore of undo.reverse()) { try { await restore() } catch { failures++ } }
+      if (signal?.aborted && !failures && error.name === 'AbortError') throw Error('操作已取消，已回退已写入的素材。')
       throw Error(`${error.message}。${failures ? '部分素材未能自动恢复。' : '已回退已确认写入的素材。'}若连接中断，请检查实际状态；导入前备份已发起下载，可重新导入恢复。`)
     }
   }
   return {
-    export: includeAssets => exclusive(async () => { checkExport(); return (await capture(includeAssets)).value }),
-    import: value => exclusive(() => apply(value)),
-    restore: () => exclusive(() => { if (!backup) throw Error('没有可恢复的备份'); return apply(backup) }),
+    export: (includeAssets, progress, signal) => exclusive(async () => { checkExport(); return (await capture(includeAssets, progress, signal)).value }),
+    import: (value, progress, signal) => exclusive(() => apply(value, progress, signal)),
+    restore: (progress, signal) => exclusive(() => { if (!backup) throw Error('没有可恢复的备份'); return apply(backup, progress, signal) }),
     get hasBackup() { return Boolean(backup) },
     download,
   }

package/src/styles/custom-background.css

@@ -187,18 +187,45 @@ html[data-dsh-prts][data-prts-conversation-style="deck-chat"]:is(
 --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%));
 }
+/* One backdrop plane covers the body and tail; the parent must not create
+   a nested backdrop root. The mask rounds the body without clipping content. */
 & :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);
+& :is([data-prts-ai-surface], [data-message-role="user"], [data-message-role="assistant"]) {
+  isolation: isolate;
+  background: transparent !important;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
 }
 & [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);
+  inset: 0 0 0 -10px; width: auto; height: auto; z-index: -1;
+  transform: none;
+  -webkit-backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
+  backdrop-filter: blur(var(--prts-baker-blur, 8px)) saturate(1.08);
+  mask:
+    linear-gradient(#000 0 0) 10px 0 / calc(100% - 28px) calc(100% - 18px),
+    linear-gradient(#000 0 0) 10px 18px / calc(100% - 10px) calc(100% - 36px),
+    linear-gradient(#000 0 0) 28px bottom / calc(100% - 46px) 18px,
+    radial-gradient(circle at left bottom, #000 17.5px, transparent 18px) right top / 18px 18px,
+    radial-gradient(circle at right top, #000 17.5px, transparent 18px) 10px bottom / 18px 18px,
+    radial-gradient(circle at left top, #000 17.5px, transparent 18px) right bottom / 18px 18px,
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M0 0H10V18Q10 6 0 0Z'/%3E%3C/svg%3E") left top / 10px 18px;
+  mask-repeat: no-repeat;
+}
+& :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]::before,
+& [data-message-role="user"]::before {
+  inset: 0 -10px 0 0;
+  mask:
+    linear-gradient(#000 0 0) 18px 0 / calc(100% - 28px) calc(100% - 18px),
+    linear-gradient(#000 0 0) 0 18px / calc(100% - 10px) calc(100% - 36px),
+    linear-gradient(#000 0 0) 18px bottom / calc(100% - 46px) 18px,
+    radial-gradient(circle at right bottom, #000 17.5px, transparent 18px) left top / 18px 18px,
+    radial-gradient(circle at right top, #000 17.5px, transparent 18px) left bottom / 18px 18px,
+    radial-gradient(circle at left top, #000 17.5px, transparent 18px) right 10px bottom 0 / 18px 18px,
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M10 0H0V18Q0 6 10 0Z'/%3E%3C/svg%3E") right top / 10px 18px;
+  mask-repeat: no-repeat;
 }
 }
 
@@ -419,3 +446,36 @@ html[data-dsh-prts][data-windows-titlebar] [data-prts-region="operation"] { bord
 [data-prts-region-handle="s"] {left:50%;bottom:-8px;transform:translateX(-50%);cursor:ns-resize}
 [data-prts-region-handle="w"] {left:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}
 [data-prts-region-handle="e"] {right:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}
+
+html[data-dsh-prts] [data-prts-background-confirm] {
+  box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
+  padding: 24px; overflow: auto; border: 1px solid var(--prts-line-strong); border-top: 2px solid var(--prts-yellow);
+  border-radius: 8px; background: var(--prts-canvas); color: var(--prts-ink); box-shadow: 0 24px 80px #0006;
+  font: 13px/1.6 var(--prts-body);
+  &::backdrop { background: #0008; backdrop-filter: blur(4px); }
+  & header { display: block; margin: 0 0 20px; padding: 0; border: 0; }
+  & header small { color: var(--prts-muted); font-size: 12px; }
+  & h2 { margin: 4px 0 0; color: var(--prts-ink); font-size: 21px; line-height: 1.4; }
+  & [data-prts-background-compare] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+  & figure { min-width: 0; margin: 0; }
+  & img { display: block; box-sizing: border-box; width: 100%; aspect-ratio: 4/3; object-fit: contain; border: 1px solid var(--prts-line); border-radius: 4px; background: var(--prts-panel-raised); }
+  & figure:last-child img { border-color: var(--prts-yellow); }
+  & figcaption { margin-top: 8px; font-size: 12px; }
+  & [data-prts-background-filename] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--prts-muted); }
+  & p { margin: 20px 0; color: var(--prts-muted); font-size: 12px; }
+  & footer { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--prts-line); }
+  & button { min-width: 88px; padding: 9px 16px; border: 1px solid var(--prts-line-strong); border-radius: 4px; background: var(--prts-panel-raised); color: var(--prts-ink); font: inherit; cursor: pointer; }
+  & [data-prts-background-confirm-apply] { border-color: var(--prts-yellow); background: var(--prts-yellow); color: #171b1d; font-weight: 600; }
+  & button:hover { filter: brightness(.94); }
+  & button:focus-visible { outline: 2px solid var(--prts-yellow); outline-offset: 3px; }
+}
+@media (max-width: 480px) {
+  html[data-dsh-prts] [data-prts-background-confirm] { padding: 18px; }
+}
+
+/* Expanded process headers remain sticky without painting the native opaque base. */
+html[data-dsh-prts]:is([data-prts-background-mode="full"][data-prts-background-full],[data-prts-background-mode="split"][data-prts-background-conversation]) [data-prts-region="operation"] :is([data-variant="think"][data-expanded] [data-open] > [data-disclosure-header],button[aria-expanded="true"]:has([data-compaction-disclosure])) {
+background:color-mix(in srgb,var(--prts-panel) 28%,transparent);
+-webkit-backdrop-filter:blur(12px);
+backdrop-filter:blur(12px);
+}

package/src/styles/prts.css

@@ -1542,7 +1542,7 @@ html[data-dsh-prts] [data-prts-conversation-control] {
 
 html[data-dsh-prts] [data-composer-card] button:not([data-slot="conversation.input.attachments"] *):not([data-prts-glass-menu] *):not([data-prts-floating-glass] *):not([role="menu"] *):not([role="listbox"] *):is(:hover, :focus-visible),
 html[data-dsh-prts] [data-prts-conversation-control]:is(:hover, :focus-visible) {
-  border-color: var(--prts-yellow) !important;
+  border-color: var(--prts-line) !important;
 }
 
 html[data-dsh-prts] [data-composer-card] button[aria-label*="send" i],
@@ -1606,7 +1606,9 @@ html[data-dsh-prts] [data-prts-floating-item] {
   color: var(--prts-ink) !important;
 }
 
-html[data-dsh-prts] [data-prts-floating-item]:is(:hover, [data-highlighted]) {
+/* Native material menus own their item states, including body portals without
+   aria-controls or composer markers. Keep generic fallback styling separate. */
+html[data-dsh-prts] [data-prts-floating-item]:not([data-menu-material] *, [data-prts-glass-menu] *, [data-slot="conversation.input.overlay"] *):is(:hover, [data-highlighted]) {
   background: var(--prts-panel-muted) !important;
 }
 

package/src/styles/refinement.css

@@ -364,7 +364,7 @@ html[data-dsh-prts] :is(
   [data-prts-glass-control],
   [data-prts-conversation-control]:not([data-prts-conversation-control="micro"], [data-prts-conversation-control="file"])
 ):is(:hover, :focus-visible) {
-  --prts-control-outline: var(--prts-yellow);
+  --prts-control-outline: var(--prts-line);
 }
 
 html[data-dsh-prts] :is(
@@ -464,7 +464,7 @@ html[data-dsh-prts] :is([data-presented-file],[data-changed-files],[data-prts-co
   background:var(--prts-active-glass)!important;color:var(--prts-ink);
   backdrop-filter:var(--prts-active-glass-filter);
   &::before{content:none}
-  &:is(:hover,:focus-within){border-color:var(--prts-yellow)!important}
+  &:is(:hover,:focus-within){border-color:var(--prts-glass-border)!important}
 }
 /* One surface for both single-file summaries and grouped changes. */
 html[data-dsh-prts] [data-changed-files]{
@@ -510,3 +510,42 @@ html[data-dsh-prts] [data-turn-trigger] {
   & > div > p { color:var(--prts-muted); }
   & [data-context-text] { color:var(--prts-ink); }
 }
+
+/* Body interactions lock onto four corners; shell controls keep their own treatment. */
+html[data-dsh-prts] :is([data-chat-flow-kind],[data-message-role]) :is([data-prts-conversation-control],[data-presented-file],[data-changed-files],[data-produced-files-row] > button) {
+  position:relative;
+  --prts-control-outline:var(--prts-line);
+  &:is(:hover,:focus-visible,:focus-within) {
+    --prts-control-outline:var(--prts-line);
+    border-color:var(--prts-line)!important;
+  }
+  &:is([data-presented-file],[data-changed-files],[data-prts-conversation-control="file"]) {
+    &:is(:hover,:focus-visible,:focus-within){border-color:var(--prts-glass-border)!important}
+  }
+  &:active{transform:none}
+}
+html[data-dsh-prts] [data-prts-body-target-frame] {
+  position:fixed;inset:auto;left:0;top:0;width:0;height:0;margin:0;padding:0;border:0;background:transparent;overflow:visible;z-index:100;pointer-events:none;opacity:0;--prts-corner-width:1px;
+  & > i {
+    position:absolute;left:0;top:0;width:7px;height:7px;will-change:transform;
+    &::before,&::after{content:"";position:absolute;left:0;top:0;background:currentColor}
+    &::before{width:7px;height:var(--prts-corner-width);transform:scaleX(var(--prts-arm-scale,1));transform-origin:left center}
+    &::after{width:var(--prts-corner-width);height:7px;transform:scaleY(var(--prts-arm-scale,1));transform-origin:center top}
+    &:nth-child(2),&:nth-child(4){
+      &::before{transform-origin:right center}
+      &::after{left:auto;right:0}
+    }
+    &:nth-child(3),&:nth-child(4){
+      &::before{top:auto;bottom:0}
+      &::after{transform-origin:center bottom}
+    }
+  }
+  &[data-pressed]{--prts-corner-width:2px;filter:brightness(1.3)}
+}
+
+html[data-dsh-prts] :is([data-chat-flow-kind],[data-message-role]) [data-changed-files] button:is(:hover,:focus-visible) {
+  background:color-mix(in srgb,var(--prts-ink) 5%,transparent);box-shadow:none;
+}
+
+html[data-dsh-prts] [data-prts-corner-target]:focus-visible{outline:none!important}
+html[data-dsh-prts] [data-prts-corner-target]:active{transform:none!important}

package/src/styles/theme-settings-workbench.css

@@ -940,10 +940,10 @@ html[data-dsh-prts] [data-prts-transfer] {
   & input[type="file"] { max-width: 100%; min-width: 0; }
   & input[type="checkbox"] { accent-color: var(--prts-yellow); }
   & button { justify-self: start; padding: 8px 14px; border: 1px solid var(--prts-line-strong); border-radius: 0; background: var(--prts-panel-raised); color: var(--prts-ink); font: inherit; cursor: pointer; }
-  & button:hover:not(:disabled) { border-color: var(--prts-yellow); }
+  & button:hover:not(:disabled) { border-color: var(--prts-line-strong); }
   & button:focus-visible { outline: 2px solid var(--prts-yellow); outline-offset: 3px; }
   & button:disabled { opacity: .55; cursor: wait; }
-  & [data-prts-transfer-export], & [data-prts-transfer-apply] { border-color: var(--prts-yellow); }
+  & [data-prts-transfer-apply] { border-color: var(--prts-yellow); }
   & hr { width: 100%; border: 0; border-top: 1px solid var(--prts-line); }
   & [data-prts-transfer-preview], & [data-prts-transfer-recovery] { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--prts-line); }
   & [hidden] { display: none !important; }
@@ -951,7 +951,7 @@ html[data-dsh-prts] [data-prts-transfer] {
 
 html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
 html[data-dsh-prts] [data-prts-transfer-open] { display:flex; align-items:center; gap:8px; width:100%; padding:10px 8px; background:none; border:1px solid var(--prts-line); border-radius:4px; color:var(--prts-ink); font:500 12px/1.4 var(--prts-body); cursor:pointer; }
-html[data-dsh-prts] [data-prts-transfer-open]:hover { border-color:var(--prts-yellow); }
+html[data-dsh-prts] [data-prts-transfer-open]:hover { border-color:var(--prts-line); }
 html[data-dsh-prts] [data-prts-transfer-dialog] { box-sizing:border-box; width:min(660px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; border:1px solid var(--prts-line-strong); border-radius:8px; background:var(--prts-canvas); color:var(--prts-ink); box-shadow:0 24px 80px #0006; font:13px/1.6 var(--prts-body); overflow:auto; }
 html[data-dsh-prts] [data-prts-transfer-dialog]::backdrop { background:#0007; }
 html[data-dsh-prts] [data-prts-transfer] {
@@ -960,10 +960,10 @@ html[data-dsh-prts] [data-prts-transfer] {
   & h2 { margin:4px 0 0; font-size:20px; line-height:1.4; }
   & h3 { margin:0; font-size:14px; }
   & [data-prts-transfer-close] { padding:2px 10px; font-size:24px; border:0; background:none; }
-  & [data-prts-transfer-columns] { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
-  & [data-prts-transfer-card] { display:flex; flex-direction:column; gap:12px; min-width:0; }
-  & [data-prts-transfer-card] + section { padding-left:24px; border-left:1px solid var(--prts-line); }
-  & [data-prts-transfer-card] > button { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
+  & [data-prts-transfer-columns] { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
+  & [data-prts-transfer-card] { display:flex; flex-direction:column; gap:12px; min-width:0; padding:18px; border:1px solid var(--prts-line); border-radius:6px; background:var(--prts-panel-raised); transition:border-color 180ms ease,background-color 180ms ease,box-shadow 180ms ease; }
+  & [data-prts-transfer-card] > button { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; align-self:stretch; border-radius:4px; }
+  & [data-prts-transfer-card] > button:hover:not(:disabled) { border-color:var(--prts-line-strong); }
   & [data-prts-transfer-option] { align-items:flex-start; flex-wrap:nowrap; padding:12px 0 0; }
   & [data-prts-transfer-option] input { margin:5px 0 0; }
   & [data-prts-transfer-option] small { display:block; margin-top:4px; }
@@ -986,7 +986,6 @@ html[data-dsh-prts] [data-prts-transfer] {
 @media(max-width:540px) {
   html[data-dsh-prts] [data-prts-transfer] { padding:20px; }
   html[data-dsh-prts] [data-prts-transfer] [data-prts-transfer-columns] { grid-template-columns:1fr; gap:20px; }
-  html[data-dsh-prts] [data-prts-transfer] [data-prts-transfer-card] + section { padding:20px 0 0; border-left:0; border-top:1px solid var(--prts-line); }
 }
 
 /* Shared quiet actions below the settings categories. */
@@ -1015,3 +1014,21 @@ html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action][hidden]
   html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px 12px; }
   html[data-dsh-prts] [data-prts-theme-settings] [data-prts-reset-zone] { width:100%; }
 }
+
+[data-prts-transfer-progress] { display: grid; gap: 8px; }
+[data-prts-transfer-progress] > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
+[data-prts-transfer-bar] { width: 100%; height: 8px; accent-color: var(--prts-accent, #d8b85e); }
+
+[data-prts-drop-active] { outline: 2px dashed var(--prts-accent, #d8b85e); outline-offset: -3px; }
+
+html[data-dsh-prts] [data-prts-transfer] [data-prts-transfer-card][data-prts-transfer-active],
+html[data-dsh-prts] [data-prts-transfer]:not([aria-busy="true"]) [data-prts-transfer-card]:has(:focus-visible) {
+  border-color:var(--prts-line-strong); background:color-mix(in srgb,var(--prts-ink) 3%,var(--prts-panel-raised)); box-shadow:inset 0 1px color-mix(in srgb,var(--prts-ink) 7%,transparent),0 8px 24px #0002;
+}
+@media (hover:hover) {
+  html[data-dsh-prts] [data-prts-transfer]:not([aria-busy="true"]) [data-prts-transfer-card]:hover {
+    border-color:var(--prts-line-strong); background:color-mix(in srgb,var(--prts-ink) 3%,var(--prts-panel-raised)); box-shadow:inset 0 1px color-mix(in srgb,var(--prts-ink) 7%,transparent),0 8px 24px #0002;
+  }
+}
+html[data-prts-motion="reduced"] [data-prts-transfer-card] { transition:none; }
+@media (prefers-reduced-motion:reduce) { [data-prts-transfer-card] { transition:none; } }