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

package/src/client/theme-transfer.js

@@ -0,0 +1,167 @@
+import { DEFAULT_PREFERENCES, normalizePreferences } from './preferences.js'
+
+export const THEME_PACKAGE_LIMIT = 160 * 1024 * 1024
+const transferSlots = ['full', 'sidebar', 'conversation']
+const transferRoles = ['user', 'assistant']
+const transferBuiltins = ['rhodes-island', 'lungmen', 'penguin-logistics', 'rhine-lab', 'reunion']
+const record = value => value !== null && typeof value === 'object' && !Array.isArray(value)
+const encodedImage = (value, limit) => typeof value === 'string' && value.length > 0 && value.length <= Math.ceil(limit / 3) * 4 && value.length % 4 === 0 && /^[A-Za-z0-9+/]+={0,2}$/.test(value)
+
+export function validateThemePackage(value) {
+  if (!record(value) || value.format !== 'prts-theme' || value.version !== 1) throw Error('不支持的主题文件格式或版本')
+  if (!record(value.preferences) || !Object.keys(value.preferences).some(key => key !== 'version' && Object.hasOwn(DEFAULT_PREFERENCES, key))) throw Error('主题文件缺少设置')
+  if (!Number.isInteger(value.preferences.version) || value.preferences.version < 1 || value.preferences.version > DEFAULT_PREFERENCES.version) throw Error('不支持此设置版本，请更新主题后重试')
+  const normalized = normalizePreferences(value.preferences)
+  for (const [key, input] of Object.entries(value.preferences)) {
+    if (!Object.hasOwn(DEFAULT_PREFERENCES, key) || key === 'version') continue
+    if (typeof input !== typeof DEFAULT_PREFERENCES[key] || (typeof input === 'number' && !Number.isFinite(input))) throw Error(`设置 ${key} 的类型无效`)
+    // Current-format files must not silently turn malformed settings into defaults.
+    if (value.preferences.version === DEFAULT_PREFERENCES.version && normalized[key] !== input) throw Error(`设置 ${key} 的值无效`)
+  }
+  if (value.assets === undefined) return value
+  const a = value.assets
+  if (!record(a) || !record(a.backgrounds) || !record(a.avatars) || !record(a.emblems)) throw Error('主题素材数据不完整')
+  for (const slot of transferSlots) if (a.backgrounds[slot] !== null && !encodedImage(a.backgrounds[slot], 10 * 1024 * 1024)) throw Error('背景图片数据无效')
+  for (const role of transferRoles) {
+    const avatar = a.avatars[role]
+    if (avatar === null) continue
+    const crop = avatar?.crop
+    if (!record(avatar) || !encodedImage(avatar.image, 5 * 1024 * 1024) || !record(crop)
+      || !Number.isFinite(crop.zoom) || crop.zoom < 1 || crop.zoom > 4
+      || !Number.isFinite(crop.x) || crop.x < 0 || crop.x > 1 || !Number.isFinite(crop.y) || crop.y < 0 || crop.y > 1) throw Error('头像数据或裁剪参数无效')
+  }
+  const { items, hero, conversation } = a.emblems
+  if (!Array.isArray(items) || items.length > 13 || !Array.isArray(conversation) || conversation.length < 1 || conversation.length > 12) throw Error('徽记数量无效')
+  for (const item of items) {
+    if (!record(item) || item.format !== 'prts-emblem' || item.version !== 1 || typeof item.label !== 'string' || !item.label.trim() || item.label.length > 100 || !record(item.params) || !encodedImage(item.image, 8 * 1024 * 1024)) throw Error('徽记素材无效')
+  }
+  const validEntry = entry => record(entry) && (entry.kind === 'builtin' ? transferBuiltins.includes(entry.key) : entry.kind === 'custom' && Number.isInteger(entry.asset) && entry.asset >= 0 && entry.asset < items.length && typeof entry.label === 'string' && entry.label.length <= 100)
+  if ((hero !== null && (!validEntry(hero) || hero.kind !== 'custom')) || !conversation.every(validEntry)) throw Error('徽记引用无效')
+  return value
+}
+
+export function mergeThemePreferences(current, imported) {
+  const normalized = normalizePreferences(imported)
+  const patch = Object.fromEntries(Object.keys(DEFAULT_PREFERENCES).filter(key => key !== 'version' && Object.hasOwn(imported, key)).map(key => [key, normalized[key]]))
+  return normalizePreferences({ ...current, ...patch, version: DEFAULT_PREFERENCES.version })
+}
+
+export function describeThemePackage(value) {
+  const count = Object.keys(value.preferences).filter(key => key !== 'version' && Object.hasOwn(DEFAULT_PREFERENCES, key)).length
+  if (!value.assets) return `${count} 项主题设置；不包含素材，将保留当前背景、头像和徽记。`
+  const a = value.assets
+  return `${count} 项主题设置、${transferSlots.filter(k => a.backgrounds[k]).length} 张背景、${transferRoles.filter(k => a.avatars[k]).length} 个头像、${a.emblems.items.length} 个自定义徽记。将替换当前素材及徽记排列，空项恢复为默认。`
+}
+
+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',
+      ...(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) {
+    const value = { format: 'prts-theme', version: 1, themeVersion, exportedAt: new Date().toISOString(), preferences: { ...getPreferences() } }
+    const states = {}
+    if (includeAssets) {
+      const backgrounds = {}, avatars = {}, items = [], ids = new Map()
+      states.backgrounds = await request('backgrounds/configuration')
+      for (const slot of transferSlots) {
+        const entry = states.backgrounds[slot]
+        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' })
+          if (!response.ok) throw Error('无法导出背景图片')
+          backgrounds[slot] = await readImage(await response.blob())
+        }
+      }
+      states.avatars = await request('avatars/configuration')
+      for (const role of transferRoles) {
+        const source = await request('avatars/edit/' + role)
+        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')
+      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'))
+        }
+        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, avatars, emblems: { items, hero, conversation } }
+      for (const kind of ['backgrounds', 'avatars', 'emblems']) {
+        if ((await request(kind + '/configuration')).revision !== states[kind].revision) throw Error('素材在导出期间发生变化，请重试')
+      }
+    }
+    if (JSON.stringify(value.preferences) !== JSON.stringify(getPreferences())) throw Error('设置在导出期间发生变化，请重试')
+    validateThemePackage(value)
+    return { value, states }
+  }
+  async function exclusive(fn) {
+    if (busy) throw Error('正在处理主题文件，请稍候')
+    busy = true
+    try { return await fn() } finally { busy = false }
+  }
+  function download(value, name = 'theme') {
+    const blob = new window.Blob([JSON.stringify(value)], { type: 'application/json' })
+    if (blob.size > THEME_PACKAGE_LIMIT) throw Error('主题文件超过 160 MB，请减少素材后重试')
+    const url = window.URL.createObjectURL(blob), link = window.document.createElement('a')
+    link.href = url; link.download = `prts-${name}-${new Date().toISOString().replace(/[:.]/g, '-')}.prts-theme.json`
+    window.document.body.append(link); link.click(); link.remove()
+    window.setTimeout(() => window.URL.revokeObjectURL(url), 1000)
+  }
+  async function apply(value) {
+    validateThemePackage(value)
+    const preferenceRevision = checkWritable()
+    const before = await capture(Boolean(value.assets))
+    backup = before.value
+    download(backup, 'before-import')
+    const undo = [], revisions = Object.fromEntries(Object.entries(before.states).map(([key, state]) => [key, state.revision]))
+    const write = async (kind, data, previous) => {
+      const result = await request(kind + '/configuration', { ...data, revision: revisions[kind] })
+      revisions[kind] = result.revision
+      undo.push(async () => {
+        const restored = await request(kind + '/configuration', { ...previous, revision: revisions[kind] })
+        revisions[kind] = restored.revision
+      })
+    }
+    try {
+      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))
+        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] }, { slot, image: old.backgrounds[slot] })
+        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 })
+      }
+      await savePreferences(mergeThemePreferences(before.value.preferences, value.preferences), preferenceRevision)
+    } catch (error) {
+      let failures = 0
+      for (const restore of undo.reverse()) { try { await restore() } catch { failures++ } }
+      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) }),
+    get hasBackup() { return Boolean(backup) },
+    download,
+  }
+}

package/src/styles/custom-background.css

@@ -329,3 +329,17 @@ animation: prts-baker-typing 1.2s linear infinite;
 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; }
 }
+
+/* Keep the hero treatment beside the background readability controls. */
+html[data-dsh-prts] [data-prts-background-hero-setting] {
+  padding:16px 0 2px; border-top:1px solid var(--prts-line);
+  & [data-prts-setting-row] { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px; margin:0; padding:0; border:0; background:none; }
+  & [data-prts-setting-row] > span { display:grid; gap:5px; min-width:0; }
+  & strong { font:500 13px/1.5 var(--prts-body); color:var(--prts-ink); }
+  & small { max-width:36em; font:400 12px/1.6 var(--prts-body); color:var(--prts-muted); }
+  & [data-prts-setting-switch] { justify-self:end; align-self:center; margin:0; }
+}
+html[data-dsh-prts] [data-prts-background-hero-setting][hidden] { display:none; }
+
+/* Windows chrome must not clip a different canvas color into the conversation. */
+html[data-dsh-prts][data-windows-titlebar] [data-prts-region="operation"] { border-radius: 0; }

package/src/styles/refinement.css

@@ -482,3 +482,25 @@ html[data-dsh-prts][data-prts-conversation-style="deck-chat"] :is([class$="_bubb
   padding:2px 7px!important;border-radius:6px!important;
   &:is(:hover,:focus-visible){border-color:var(--prts-cyan)!important}
 }
+
+/* Notification cards own one surface across the disclosure and its content. */
+html[data-dsh-prts] [data-turn-trigger] {
+  background:var(--prts-glass-soft-surface);
+  border:1px solid var(--prts-line);
+  border-radius:var(--dsw-radius-xl,16px);
+  -webkit-backdrop-filter:blur(12px);
+  backdrop-filter:blur(12px);
+  color:var(--prts-ink);
+  & > button {
+    background:transparent;
+    border:0;
+    border-radius:inherit;
+    color:inherit;
+    &:hover { background:color-mix(in srgb,var(--prts-ink) 5%,transparent); }
+    &:focus-visible { outline:2px solid var(--prts-cyan); outline-offset:-3px; }
+    & time { color:var(--prts-muted); }
+  }
+  & > div { border-top:1px solid var(--prts-line); }
+  & > div > p { color:var(--prts-muted); }
+  & [data-context-text] { color:var(--prts-ink); }
+}

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

@@ -757,9 +757,9 @@ html[data-dsh-prts] [data-prts-theme-settings] {
 & [data-prts-reset-confirm] > span { flex-basis:100%; }
 @media(max-width:720px) {
 & [data-prts-settings-sidebar] { flex-direction:row; border:0; border-bottom:1px solid var(--prts-line); }
-& [data-prts-settings-nav] { flex:1; padding:8px 4px; border:0; }
+& [data-prts-settings-nav] { flex:1; min-width:0; overflow-x:auto; padding:8px 4px; border:0; }
 & [data-prts-settings-jump] { padding:10px 8px; }
-& [data-prts-settings-actions] { margin:0; padding:8px 4px; align-self:center; }
+& [data-prts-settings-actions] { flex:0 0 auto; white-space:nowrap; margin:0; padding:8px 4px; align-self:center; }
 & [data-prts-reset-confirm], & [data-prts-persistence-error] { left:auto; right:8px; top:100%; bottom:auto; max-width:calc(100vw - 32px); }
 }
 & [data-prts-reset-zone] { padding: 0; }
@@ -929,3 +929,88 @@ html[data-dsh-prts] [data-prts-ai-tools] blockquote { margin:12px 0;padding:8px
 html[data-dsh-prts] [data-prts-ai-tools] summary { cursor:pointer; }
 html[data-dsh-prts] [data-prts-ai-tools] dt { margin-top:12px; }
 html[data-dsh-prts] [data-prts-ai-tools] dd { margin:3px 0 0; }
+
+html[data-dsh-prts] [data-prts-transfer] {
+  display: grid;
+  gap: 16px;
+  padding-block: 16px;
+  & header { display: grid; gap: 8px; }
+  & p, & small { margin: 0; color: var(--prts-muted); line-height: 1.7; overflow-wrap: anywhere; }
+  & label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
+  & 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: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); }
+  & 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; }
+}
+
+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-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] {
+  padding:24px; gap:20px;
+  & [data-prts-transfer-heading] { display:flex; align-items:center; justify-content:space-between; gap:16px; }
+  & 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-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; }
+  & [data-prts-transfer-file-hint] { display:grid; place-items:center; flex:1; gap:6px; padding:12px; border:1px dashed var(--prts-line-strong); }
+  & [data-prts-transfer-file-hint] > span { font-size:24px; color:var(--prts-muted); }
+  & [data-prts-transfer-buttons] { display:flex; gap:8px; }
+  & [data-prts-transfer-recovery] { border:0; border-top:1px solid var(--prts-line); padding:16px 0 0; }
+  & [data-prts-transfer-status]:empty { display:none; }
+}
+@media(max-width:720px) {
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-body] { grid-template-rows:auto minmax(0,1fr) auto; }
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-sidebar] { display:contents; }
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-nav] { grid-row:1; }
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-scroll] { grid-row:2; }
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] { grid-row:3; position:relative; flex-direction:row; align-items:center; justify-content:space-between; padding:12px 16px; border-top:1px solid var(--prts-line); background:var(--prts-canvas); }
+  html[data-dsh-prts] [data-prts-transfer-open] { width:auto; }
+  html[data-dsh-prts] [data-prts-theme-settings] :is([data-prts-reset-confirm],[data-prts-persistence-error]) { top:auto; bottom:100%; }
+}
+@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. */
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] {
+  padding:12px 10px; gap:2px; border-top:1px solid var(--prts-line);
+}
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action] {
+  display:flex; align-items:center; justify-content:flex-start; gap:10px;
+  width:100%; min-height:40px; padding:10px; margin:0;
+  border:0; border-radius:5px; clip-path:none; box-shadow:none;
+  background:transparent; color:var(--prts-muted);
+  font:500 12px/1.4 var(--prts-body); text-align:left; cursor:pointer;
+}
+html[data-dsh-prts] [data-prts-footer-action] svg {
+  width:16px; height:16px; flex:none; fill:none; stroke:currentColor;
+  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
+}
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action]:hover {
+  background:var(--prts-panel-raised); color:var(--prts-ink);
+}
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action]:focus-visible {
+  outline:2px solid var(--prts-yellow); outline-offset:-2px;
+}
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action][hidden] { display:none; }
+@media(max-width:720px) {
+  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%; }
+}