@ash-qw/dsh-theme-prts 1.0.5 → 1.1.0

package/lib/index.js

@@ -1,3 +1 @@
-export const PACKAGE_ID = "@ash-qw/dsh-theme-prts"
-export const THEME_PLUGIN_ID = 'dsh-theme-prts'
-export function apply() {}
+export { PACKAGE_ID, THEME_PLUGIN_ID, inject, apply } from '../src/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web",
@@ -68,11 +68,14 @@
     "prepublishOnly": "npm run check"
   },
   "engines": {
-    "node": ">=18",
+    "node": ">=20.9.0",
     "dsh": "0.2.0-rc.2"
   },
   "devDependencies": {
     "@playwright/test": "1.55.1",
     "jsdom": "24.1.3"
+  },
+  "dependencies": {
+    "sharp": "^0.35.5"
   }
 }

package/src/client/conversation-control-adapter.js

@@ -12,6 +12,8 @@ function closestWithClassSuffix(node, suffix) {
 }
 
 function classify(button, operation) {
+  // The host's process disclosure owns its transparent, full-width hit area.
+  if (button.hasAttribute('data-turn-process')) return null
   if (button.tagName !== 'BUTTON' || !operation.contains(button)) return null
   if (hasClassSuffix(button, '_sessionLogButton')) return 'header'
   if (button.closest('[data-produced-files-row]') || hasClassSuffix(button, '_showFolder')) return 'utility'
@@ -96,7 +98,7 @@ export function createConversationControlAdapter({ document, window }) {
         subtree: true,
         childList: true,
         attributes: true,
-        attributeFilter: ['class', 'data-approval-key'],
+        attributeFilter: ['class', 'data-approval-key', 'data-turn-process'],
       })
     },
     dispose() {

package/src/client/custom-emblem.js

@@ -0,0 +1,404 @@
+import { mountEmblemReorder } from './emblem-reorder.js'
+import { PARTICLE_DENSITY_PROFILES } from './particle-field-adapter.js'
+
+// Shared with the image worker; inject the same density profiles into its scope.
+export function processCustomEmblemPixels(rgba, size, mode = 'auto', threshold = 128, profiles = PARTICLE_DENSITY_PROFILES) {
+  if (size !== 320 || rgba.length !== size * size * 4) throw new Error('图片数据无效')
+  const alpha = new Uint8Array(size * size)
+  let transparent = false
+  for (let i = 3; i < rgba.length; i += 4) if (rgba[i] < 128) { transparent = true; break }
+  const method = mode === 'auto' ? (transparent ? 'alpha' : 'dark') : mode
+  for (let i = 0; i < alpha.length; i++) {
+    const j = i * 4
+    const light = rgba[j] * .2126 + rgba[j + 1] * .7152 + rgba[j + 2] * .0722
+    alpha[i] = rgba[j + 3] >= (method === 'alpha' ? threshold : 64)
+      && (method === 'alpha' || (method === 'light' ? light >= threshold : light < threshold)) ? 255 : 0
+  }
+  const at = (x, y) => x >= 0 && y >= 0 && x < size && y < size && alpha[Math.floor(y) * size + Math.floor(x)] > 0
+  const targets = {}
+  for (const [density, { pitch }] of Object.entries(profiles)) {
+    const points = []
+    for (let y = pitch / 2, row = 0; y < size; y += pitch, row++) {
+      for (let x = pitch / 2, column = 0; x < size; x += pitch, column++) {
+        if (!at(x, y)) continue
+        const edge = !at(x - pitch, y) || !at(x + pitch, y) || !at(x, y - pitch) || !at(x, y + pitch)
+        points.push({ x: (x - size / 2) / size, y: (y - size / 2) / size,
+          kind: edge ? 'skeleton' : 'fill', latticeColumn: column, latticeRow: row, component: 0 })
+      }
+    }
+    targets[density] = points
+  }
+  if (targets.sparse.length < 4) throw new Error('可用轮廓太少，请调整提取方式、阈值或换一张图片')
+  return { version: 1, key: 'custom', label: '自定义徽记', targets }
+}
+
+export function validCustomEmblem(value) {
+  return value?.version === 1 && ['sparse', 'light', 'standard', 'dense', 'ultra'].every(density => {
+    const points = value.targets?.[density]
+    return Array.isArray(points) && points.length >= 4 && points.length <= 10000 && points.every(p =>
+      Number.isFinite(p.x) && Number.isFinite(p.y) && Math.abs(p.x) <= .5 && Math.abs(p.y) <= .5
+      && ['skeleton', 'fill'].includes(p.kind) && Number.isInteger(p.latticeRow) && Number.isInteger(p.latticeColumn))
+  })
+}
+
+export function defaultEmblemConfiguration(emblems) {
+  return { version: 2, hero: null, conversation: emblems.map(({ key, label }) => ({ kind: 'builtin', key, label })) }
+}
+
+export function validEmblemConfiguration(value, emblems) {
+  const builtinKeys = new Set(emblems.map(e => e.key))
+  const custom = e => e?.kind === 'custom' && typeof e.key === 'string' && e.key.length < 100
+    && typeof e.label === 'string' && e.label.length <= 100 && validCustomEmblem(e)
+  return value?.version === 2 && (value.hero === null || custom(value.hero))
+    && Array.isArray(value.conversation) && value.conversation.length >= 1 && value.conversation.length <= 12
+    && new Set(value.conversation.map(e => e?.key)).size === value.conversation.length
+    && value.conversation.every(e => e?.kind === 'builtin' ? builtinKeys.has(e.key) : custom(e))
+}
+
+export function createCustomEmblemStore({ window, emblems = [], preview = () => null, onChange = () => {} }) {
+  const api = '/prts-theme-api/emblems'
+  const defaults = () => defaultEmblemConfiguration(emblems)
+  let current = defaults(), revision = -1, disposed = false, events, refreshing = null, announced = -1, reconnectTimer
+  const subscribers = new Set(), controller = new window.AbortController()
+  const request = async (path, data, signal = controller.signal) => {
+    const response = await window.fetch(`${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 new Error(result.error || '无法连接徽记服务')
+    return result
+  }
+  const accept = state => {
+    if (disposed || state.revision <= revision) return
+    if (!validEmblemConfiguration(state.configuration,emblems)) throw new Error('徽记配置无效')
+    const previous = new Map([current.hero,...current.conversation].filter(Boolean).map(e=>[e.key,e]))
+    const reuse = entry => {
+      const old = entry && previous.get(entry.key)
+      return old && entry.draftId && old.draftId === entry.draftId && old.label === entry.label ? old : entry
+    }
+    state.configuration.hero = reuse(state.configuration.hero)
+    state.configuration.conversation = state.configuration.conversation.map(reuse)
+    revision = state.revision; current = state.configuration
+    onChange(current); for (const fn of subscribers) fn(current)
+  }
+  const refresh = () => refreshing ||= request('/configuration').then(accept).finally(()=>{refreshing=null;if(!disposed && announced>revision) { announced=-1; refresh().catch(()=>{}) }})
+  const connect = () => {
+    if (disposed || !window.EventSource) return
+    events?.close()
+    events = new window.EventSource(`${api}/events`)
+    events.onmessage = event => {
+      try { announced=JSON.parse(event.data).revision;if(announced>revision)refresh().catch(()=>{}) } catch {}
+    }
+    events.onerror = () => {
+      if (disposed) return
+      events.close();window.clearTimeout(reconnectTimer);reconnectTimer=window.setTimeout(connect,3000)
+    }
+  }
+  const ready = refresh().catch(()=>{}).then(connect)
+  const focus = () => { if (!disposed) refresh().catch(()=>{}) }
+  window.addEventListener('focus',focus)
+  return {
+    ready, defaults, preview, get: () => current,
+    subscribe(fn) { subscribers.add(fn); fn(current); return () => subscribers.delete(fn) },
+    async save(value) {
+      if (!validEmblemConfiguration(value,emblems)) throw new Error('徽记数据无效')
+      if (revision < 0) await refresh()
+      const ref = entry => entry && ({kind:entry.kind,key:entry.key,label:entry.label,...(entry.draftId?{draftId:entry.draftId}:{})})
+      const configuration = {version:2,hero:ref(value.hero),conversation:value.conversation.map(ref)}
+      try { accept(await request('/configuration',{configuration,revision})) }
+      catch(error) { await refresh().catch(()=>{}); throw error }
+    },
+    exportAsset: id => request(`/draft/${encodeURIComponent(id)}/export`),
+    importAsset: (asset,signal) => request('/import',asset,signal),
+    getDraft: id => request(`/draft/${encodeURIComponent(id)}`),
+    async process({file,draftId,params},signal) {
+      let image
+      if (file) image = await new Promise((resolve,reject)=>{
+        const reader = new window.FileReader()
+        reader.onload=()=>resolve(String(reader.result).split(',')[1]);reader.onerror=()=>reject(new Error('图片读取失败'))
+        reader.readAsDataURL(file)
+      })
+      return request('/preview',{image,draftId,params,label:file?.name},signal)
+    },
+    dispose() { disposed=true; controller.abort(); window.clearTimeout(reconnectTimer);events?.close();subscribers.clear();window.removeEventListener('focus',focus) },
+  }
+}
+
+export function customEmblemMarkup() {
+  return `<section data-prts-custom-emblem>
+    <header><strong>徽记管理</strong><small>新会话与正文分别设置，可在任意会话中让 AI 调整，设置在当前 DSH 实例共享</small></header>
+    <div data-prts-emblem-hero-panel><h4>新会话徽记</h4><div data-prts-emblem-hero-row></div></div>
+    <div><h4>正文轮换徽记</h4><small>按列表顺序随正文滚动轮换，可混合使用内置与上传的图片，最多 12 张。长按徽记选项任意位置拖动排序，松开保存。</small>
+      <ol data-prts-emblem-list></ol>
+      <div data-prts-emblem-actions><button type="button" data-prts-emblem-add>新增徽记</button><button type="button" data-prts-emblem-reset-list>恢复内置列表</button></div>
+    </div>
+    <div data-prts-emblem-workspace hidden>
+      <strong data-prts-emblem-target></strong>
+      <label>上传替换图片<input type="file" accept="image/png,image/jpeg,image/webp" data-prts-emblem-file></label>
+      <small>支持 PNG、WebP、JPEG，最大 8 MB / 1600 万像素。透明底标志和黑白剪影效果更好。</small>
+      <label>或导入徽记素材包<input type="file" accept=".prts-emblem.json,application/json" data-prts-emblem-import></label>
+      <small>导入 .prts-emblem.json 可恢复原图和调整参数，预览后再应用。</small>
+      <div data-prts-emblem-editor hidden>
+        <label>提取方式<select data-prts-emblem-mode><option value="auto">自动识别</option><option value="alpha">透明轮廓</option><option value="dark">保留暗部</option><option value="light">保留亮部</option></select></label>
+        <label>阈值<input type="range" min="1" max="254" value="128" data-prts-emblem-threshold></label>
+        <label>缩放与留白<input type="range" min="0.5" max="2" step="0.05" value="0.85" data-prts-emblem-zoom></label>
+        <label>水平裁剪<input type="range" min="-0.5" max="0.5" step="0.025" value="0" data-prts-emblem-x></label>
+        <label>垂直裁剪<input type="range" min="-0.5" max="0.5" step="0.025" value="0" data-prts-emblem-y></label>
+      </div>
+      <canvas width="280" height="280" data-prts-emblem-preview aria-label="徽记粒子预览" hidden></canvas>
+      <div data-prts-emblem-actions><button type="button" data-prts-emblem-apply disabled>应用到此处</button><button type="button" data-prts-emblem-cancel>取消编辑</button></div>
+    </div>
+    <p role="status" aria-live="polite" data-prts-emblem-status>正在读取徽记设置…</p>
+  </section>`
+}
+
+export function mountCustomEmblemEditor({ panel, window, store }) {
+  const root = panel?.querySelector('[data-prts-custom-emblem]')
+  if (!root || !store) return { dispose() {} }
+  const get = suffix => root.querySelector(`[data-prts-emblem-${suffix}]`)
+  const fileInput = get('file'), canvas = get('preview'), status = get('status')
+  let file, draft, processingController, sourceDraftId, timer, generation = 0, disposed = false, saving = false
+  let destination = null, previewValue = null, loaded = false, reorder
+  const draw = (value, pointer) => {
+    canvas.hidden = !value
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+    ctx.clearRect(0, 0, 280, 280)
+    ctx.fillStyle = '#0d1114'; ctx.fillRect(0, 0, 280, 280)
+    ctx.fillStyle = '#edf1f2'
+    for (const point of value?.targets.standard ?? []) {
+      let x = 140 + point.x * 250, y = 140 + point.y * 250
+      if (pointer) {
+        const dx = x - pointer.x, dy = y - pointer.y, distance = Math.hypot(dx, dy)
+        if (distance > 0 && distance < 48) { const shift = (48 - distance) * .35; x += dx / distance * shift; y += dy / distance * shift }
+      }
+      ctx.fillRect(x, y, point.kind === 'skeleton' ? 2 : 1.5, point.kind === 'skeleton' ? 2 : 1.5)
+    }
+  }
+  const stop = () => { processingController?.abort(); processingController = undefined }
+  const process = async () => {
+    if ((!file && !sourceDraftId) || disposed) return
+    const token = ++generation
+    stop(); draft = null; get('apply').disabled = true
+    status.textContent = '正在处理图片…'
+    processingController = new window.AbortController()
+    try {
+      const result = await store.process({file,draftId:file?undefined:sourceDraftId,params:{mode:get('mode').value,threshold:Number(get('threshold').value),zoom:Number(get('zoom').value),x:Number(get('x').value),y:Number(get('y').value)}},processingController.signal)
+      if (disposed || token !== generation) return
+      draft = {...result.value,draftId:result.draftId,label:result.label}
+      draw(draft); get('apply').disabled = saving
+      status.textContent = `标准密度预览：${draft.targets.standard.length} 个粒子 · 尚未应用，可移动鼠标查看扰动`
+    } catch(error) {
+      if (disposed || token !== generation) return
+      status.textContent = error.message || '图片处理失败';draw(null)
+    }
+  }
+  const importAsset = async input => {
+    const selected=input.files?.[0]
+    if (!selected) return
+    input.value=''
+    const token=++generation
+    stop();window.clearTimeout(timer);draft=null;get('apply').disabled=true
+    status.textContent='正在导入徽记素材…'
+    processingController=new window.AbortController()
+    const signal=processingController.signal
+    try {
+      if(selected.size>12*1024*1024)throw new Error('徽记素材包不能超过 12 MB')
+      let asset
+      try {asset=JSON.parse(await selected.text())}catch{throw new Error('无法读取徽记素材包，请选择导出的 .prts-emblem.json 文件')}
+      if(disposed || token!==generation)return
+      const result=await store.importAsset(asset,signal)
+      if(disposed || token!==generation)return
+      file=null;fileInput.value='';sourceDraftId=result.draftId
+      draft={...result.value,draftId:result.draftId,label:result.label}
+      for(const [key,value] of Object.entries(result.params))get(key).value=String(value)
+      get('editor').hidden=false;draw(draft);get('apply').disabled=saving
+      status.textContent='素材已导入预览，可继续调整；点击“应用到此处”才会保存'
+    }catch(error){if(!disposed && token===generation)status.textContent=error.message}
+  }
+  const change = event => {
+    if (saving) return
+    if(event.target===get('import')) {
+      if(event.type==='change')void importAsset(event.target)
+      return
+    }
+    if (event.target === fileInput) {
+      if (event.type !== 'change') return
+      const next = fileInput.files?.[0]
+      if (!next) return
+      if (!['image/png','image/jpeg','image/webp'].includes(next.type) || next.size > 8 * 1024 * 1024) {
+        ++generation; stop(); window.clearTimeout(timer); file = null; draft = null
+        get('apply').disabled = true; get('editor').hidden = true; draw(previewValue)
+        status.textContent = '请选择不超过 8 MB 的 PNG、WebP 或 JPEG 图片'; fileInput.value = ''; return
+      }
+      file = next; get('editor').hidden = false
+      process()
+    } else if (event.target.closest('[data-prts-emblem-editor]')) {
+      window.clearTimeout(timer); ++generation; stop(); draft = null; get('apply').disabled = true
+      timer = window.setTimeout(process, 140)
+    }
+  }
+  const cancel = () => {
+    ++generation; stop(); window.clearTimeout(timer)
+    file = null; draft = null; sourceDraftId = null; previewValue = null; destination = null; fileInput.value = ''
+    get('import').value = ''
+    get('editor').hidden = true; get('workspace').hidden = true; get('apply').disabled = true; draw(null)
+  }
+  const entryPreview = entry => entry?.kind === 'custom' ? entry : store.preview(entry)
+  const button = (text, action, index, disabled = false) => {
+    const el = window.document.createElement('button')
+    el.type = 'button'; el.textContent = text; el.dataset.emblemAction = action
+    if (index !== undefined) el.dataset.emblemIndex = String(index)
+    el.disabled = disabled || saving || !loaded
+    return el
+  }
+  const thumbnail = entry => {
+    const element = window.document.createElement('canvas'); element.width = element.height = 64
+    element.setAttribute('aria-hidden', 'true')
+    const ctx = element.getContext('2d'); const value = entryPreview(entry)
+    if (ctx) { ctx.fillStyle = '#0d1114'; ctx.fillRect(0,0,64,64); ctx.fillStyle = '#edf1f2'
+      for (const p of value?.targets?.standard ?? []) ctx.fillRect(32+p.x*58,32+p.y*58,1,1)
+    }
+    return element
+  }
+  const renderList = () => {
+    reorder?.cancel()
+    const state = store.get()
+    const hero = get('hero-row'); hero.replaceChildren()
+    const name = window.document.createElement('span'); name.textContent = state.hero?.label || '内置罗德岛徽记'
+    hero.append(thumbnail(state.hero),name,button('预览 / 替换','hero'),button('恢复内置','reset-hero',undefined,!state.hero))
+    if(state.hero?.draftId)hero.append(button('导出素材','export-hero'))
+    const list = get('list'); list.replaceChildren()
+    state.conversation.forEach((entry,index) => {
+      const row = window.document.createElement('li'); row.dataset.emblemKey = entry.key
+      const label = window.document.createElement('span'); label.textContent = `${index+1}. ${entry.label}`
+      const actions = window.document.createElement('div'); actions.setAttribute('data-prts-emblem-actions','')
+      actions.append(button('预览 / 替换','edit',index),button('删除','delete',index,state.conversation.length===1))
+      if(entry.draftId)actions.append(button('导出素材','export',index))
+      const handle = window.document.createElement('button')
+      handle.type='button';handle.setAttribute('data-prts-emblem-reorder','')
+      handle.setAttribute('aria-label',`调整 ${entry.label} 的顺序`);handle.setAttribute('aria-pressed','false')
+      handle.title='长按拖动；键盘按空格开始，方向键调整，回车保存'
+      handle.disabled=saving || !loaded || state.conversation.length<2
+      handle.append(thumbnail(entry))
+      row.append(handle,label,actions); list.append(row)
+    })
+    get('add').disabled = saving || !loaded || state.conversation.length >= 12
+    get('reset-list').disabled = saving || !loaded
+  }
+  const startEdit = async target => {
+    cancel(); destination = target
+    const state = store.get()
+    const entry = target === 'hero' ? state.hero : target === 'new' ? null : state.conversation[target]
+    previewValue = target === 'new' ? null : entryPreview(entry)
+    get('target').textContent = target === 'hero' ? '编辑新会话徽记' : target === 'new' ? '新增正文轮换徽记' : `替换正文第 ${target+1} 张徽记`
+    get('workspace').hidden = false
+    for (const [key,value] of Object.entries({mode:'auto',threshold:'128',zoom:'0.85',x:'0',y:'0'})) get(key).value = value
+    draw(previewValue)
+    status.textContent = '上传图片或导入徽记素材包后可调整并预览，点击“应用到此处”才会保存'
+    get('workspace').scrollIntoView?.({block:'nearest'})
+    if (entry?.draftId) {
+      const token = generation
+      try {
+        const saved = await store.getDraft(entry.draftId)
+        if (disposed || token !== generation) return
+        sourceDraftId = saved.draftId
+        for (const [key,value] of Object.entries(saved.params)) get(key).value = String(value)
+        get('editor').hidden = false
+        status.textContent = '可继续调整原图参数，或上传替换图片；应用后才会保存'
+      } catch(error) { if (!disposed && token === generation) status.textContent = error.message }
+    }
+
+  }
+  const unsubscribe = store.subscribe(() => {
+    if (destination !== null && !saving) { cancel();status.textContent='徽记设置已在其他页面或会话更新，请重新选择要编辑的徽记' }
+    renderList()
+  })
+  store.ready.then(() => { if (!disposed) { loaded = true; renderList(); status.textContent = '新会话与正文徽记独立保存；正文至少保留一张' } })
+  const persist = async value => {
+    saving = true
+    for (const input of root.querySelectorAll('input,select,button')) input.disabled = true
+    try {
+      await store.save(value)
+      if (disposed) return
+      cancel(); status.textContent = '已保存徽记设置 · 刷新后仍然保留'
+    } catch (error) { if (!disposed) status.textContent = `${error.message}，原徽记保持不变` }
+    finally {
+      saving = false
+      if (!disposed) {
+        for (const input of root.querySelectorAll('input,select,button')) input.disabled = false
+        renderList(); get('apply').disabled = !draft
+      }
+    }
+  }
+  const click = async event => {
+    const target = event.target.closest('button')
+    if (!target || target.disabled || saving || !loaded || reorder?.active) return
+    if (target.hasAttribute('data-prts-emblem-cancel')) { cancel(); status.textContent = '已取消编辑，当前徽记保持不变'; return }
+    if (target.hasAttribute('data-prts-emblem-add')) { startEdit('new'); return }
+    const state = store.get()
+    if (target.hasAttribute('data-prts-emblem-reset-list')) { await persist({...state,conversation:store.defaults().conversation}); return }
+    if (target.hasAttribute('data-prts-emblem-apply')) {
+      if (!draft || destination === null) return
+      const value = {...draft,kind:'custom',key:window.crypto.randomUUID(),label:(file?.name || draft.label || '自定义徽记').slice(0,100)}
+      if (destination === 'hero') await persist({...state,hero:value})
+      else {
+        const conversation = [...state.conversation]
+        if (destination === 'new') { if (conversation.length >= 12) return; conversation.push(value) }
+        else conversation[destination] = value
+        await persist({...state,conversation})
+      }
+      return
+    }
+    const action = target.dataset.emblemAction, index = Number(target.dataset.emblemIndex)
+    if(action==='export-hero'||action==='export') {
+      const entry=action==='export-hero'?state.hero:state.conversation[index]
+      if(!entry?.draftId)return
+      target.disabled=true
+      try {
+        const asset=await store.exportAsset(entry.draftId)
+        if(disposed)return
+        const url=window.URL.createObjectURL(new window.Blob([JSON.stringify(asset)],{type:'application/json'}))
+        const link=window.document.createElement('a')
+        link.href=url;link.download=`${entry.label.replace(/[\\/:*?"<>|\x00-\x1f]/g,'_')}.prts-emblem.json`
+        link.hidden=true;root.append(link);link.click();link.remove()
+        window.setTimeout(()=>window.URL.revokeObjectURL(url),1000)
+        status.textContent='已导出徽记素材包，包含原图和调整参数，可在其他 DSH 中导入'
+      }catch(error){if(!disposed)status.textContent=`导出失败：${error.message}`}
+      finally{if(!disposed)target.disabled=saving}
+      return
+    }
+    if (action === 'hero') { startEdit('hero'); return }
+    if (action === 'reset-hero') { await persist({...state,hero:null}); return }
+    if (!Number.isInteger(index) || index < 0 || index >= state.conversation.length) return
+    if (action === 'edit') { startEdit(index); return }
+    const conversation = [...state.conversation]
+    if (action === 'delete' && conversation.length > 1) conversation.splice(index,1)
+    else return
+    await persist({...state,conversation})
+  }
+  reorder = mountEmblemReorder({ list:get('list'),window,status,canStart:()=>loaded && !saving && !disposed,
+    onStart:cancel,
+    onCommit:async (keys,movedKey)=>{
+      const state=store.get(), entries=new Map(state.conversation.map(entry=>[entry.key,entry]))
+      if(keys.length!==entries.size || keys.some(key=>!entries.has(key))){renderList();return}
+      await persist({...state,conversation:keys.map(key=>entries.get(key))})
+      const moved=[...get('list').children].find(row=>row.dataset.emblemKey===movedKey)
+      moved?.querySelector('[data-prts-emblem-reorder]')?.focus({preventScroll:true})
+    },
+  })
+  const move = event => {
+    const box = canvas.getBoundingClientRect()
+    draw(draft || previewValue, { x: (event.clientX-box.left)*280/box.width, y: (event.clientY-box.top)*280/box.height })
+  }
+  const leave = () => draw(draft || previewValue)
+  root.addEventListener('change', change)
+  root.addEventListener('input', change)
+  root.addEventListener('click', click)
+  canvas.addEventListener('pointermove', move)
+  canvas.addEventListener('pointerleave', leave)
+  return { cancelReorder: () => reorder.cancel(), dispose() {
+    disposed = true; reorder.dispose(); ++generation; stop(); window.clearTimeout(timer); unsubscribe()
+    root.removeEventListener('change', change); root.removeEventListener('input', change); root.removeEventListener('click', click)
+    canvas.removeEventListener('pointermove', move); canvas.removeEventListener('pointerleave', leave)
+  } }
+}

package/src/client/emblem-reorder.js

@@ -0,0 +1,143 @@
+// Hold anywhere on a card to sort; movement before the hold keeps native touch scrolling.
+export function mountEmblemReorder({ list, window, status, canStart, onStart, onCommit }) {
+  let gesture = null, holdTimer, frame, previousTime = 0, suppressClick = false
+  const rows = () => [...list.children].filter(row => row.hasAttribute('data-emblem-key'))
+  const scroller = list.closest('[data-prts-theme-settings-scroll]')
+  const clear = () => {
+    window.clearTimeout(holdTimer); window.cancelAnimationFrame(frame)
+    holdTimer = frame = undefined; previousTime = 0
+  }
+  const finish = (commit = false) => {
+    const current = gesture
+    if (!current) return
+    gesture = null; clear()
+    current.ghost?.remove();current.row.removeAttribute('data-prts-emblem-dragging')
+    list.removeAttribute('data-prts-emblem-sorting')
+    current.handle.setAttribute('aria-pressed','false')
+    try { if (list.hasPointerCapture?.(current.pointerId)) list.releasePointerCapture(current.pointerId) } catch {}
+    const ordered = rows().map(row=>row.dataset.emblemKey)
+    const changed = ordered.some((key,index)=>key!==current.original[index].dataset.emblemKey)
+    if (!commit) for (const row of current.original) list.append(row)
+    if (current.active) {
+      status.textContent = commit ? '徽记顺序未改变' : '已取消排序，原顺序保持不变'
+      if (commit && changed) void onCommit(ordered,current.row.dataset.emblemKey)
+      else current.handle.focus({preventScroll:true})
+    }
+  }
+  const place = y => {
+    const current = gesture
+    if (!current?.active) return
+    const others = rows().filter(row=>row!==current.row)
+    const next = others.find(row=>{const box=row.getBoundingClientRect();return y < box.top + box.height/2})
+    if (next) {
+      if (current.row.nextElementSibling !== next) list.insertBefore(current.row,next)
+    } else if (others.at(-1)?.nextElementSibling !== current.row) list.insertBefore(current.row,current.ghost)
+    current.position = rows().indexOf(current.row)
+  }
+  const tick = time => {
+    if (!gesture?.active || gesture.keyboard) return
+    const current = gesture
+    if (!list.isConnected || !list.getClientRects().length) { finish();return }
+    const delta = previousTime ? Math.min(32,time-previousTime) : 16
+    previousTime=time
+    if (scroller) {
+      const box=scroller.getBoundingClientRect(), edge=48
+      const speed=current.y < box.top+edge ? -Math.min(1,(box.top+edge-current.y)/edge)
+        : current.y > box.bottom-edge ? Math.min(1,(current.y-box.bottom+edge)/edge) : 0
+      if (speed) scroller.scrollTop += speed * delta * .5
+    }
+    place(current.y)
+    current.ghost.style.transform=`translate3d(${current.x-current.startX}px,${current.y-current.startY}px,0)`
+    frame=window.requestAnimationFrame(tick)
+  }
+  const activate = () => {
+    const current=gesture
+    if (!current || !canStart() || !current.row.isConnected) {finish();return}
+    onStart?.()
+    current.active=true
+    suppressClick=true
+    current.handle.setAttribute('aria-pressed','true')
+    list.setAttribute('data-prts-emblem-sorting','')
+    if (!current.keyboard) {
+      const box=current.row.getBoundingClientRect()
+      const ghost=current.row.cloneNode(true)
+      ghost.removeAttribute('data-emblem-key');ghost.setAttribute('data-prts-emblem-drag-ghost','')
+      ghost.setAttribute('aria-hidden','true');ghost.inert=true
+      const originals=current.row.querySelectorAll('canvas')
+      ghost.querySelectorAll('canvas').forEach((canvas,index)=>canvas.getContext('2d')?.drawImage(originals[index],0,0))
+      Object.assign(ghost.style,{position:'fixed',left:`${box.left}px`,top:`${box.top}px`,width:`${box.width}px`,boxSizing:'border-box',margin:'0',pointerEvents:'none',zIndex:'10'})
+      current.ghost=ghost;list.append(ghost)
+      // Native dialogs can establish a fixed-position containing block. Keep the lifted row under the pointer.
+      const positioned=ghost.getBoundingClientRect()
+      ghost.style.left=`${2*box.left-positioned.left}px`;ghost.style.top=`${2*box.top-positioned.top}px`
+      try {list.setPointerCapture(current.pointerId)}catch{finish();return}
+      frame=window.requestAnimationFrame(tick)
+    }
+    current.row.setAttribute('data-prts-emblem-dragging','')
+    status.textContent='正在调整徽记顺序，松开保存；按 Esc 取消'
+  }
+  const down = event => {
+    if (gesture) { if (event.pointerId!==gesture.pointerId) finish();return }
+    const row=event.target.closest('[data-emblem-key]')
+    const handle=row?.querySelector('[data-prts-emblem-reorder]')
+    suppressClick=false
+    if (!handle || handle.disabled || event.button!==0 || event.isPrimary===false || !canStart() || rows().length<2) return
+    gesture={handle,row,pointerId:event.pointerId,startX:event.clientX,startY:event.clientY,x:event.clientX,y:event.clientY,original:rows(),active:false}
+    holdTimer=window.setTimeout(activate,400)
+  }
+  const move = event => {
+    if (!gesture || gesture.pointerId!==event.pointerId) return
+    gesture.x=event.clientX;gesture.y=event.clientY
+    if (!gesture.active && Math.hypot(gesture.x-gesture.startX,gesture.y-gesture.startY)>8) {finish();return}
+    if (gesture.active) event.preventDefault()
+  }
+  const up = event => {
+    if (gesture?.pointerId!==event.pointerId) return
+    const box=list.getBoundingClientRect(), viewport=(scroller || list).getBoundingClientRect()
+    finish(event.clientX>=box.left && event.clientX<=box.right && event.clientY>=viewport.top && event.clientY<=viewport.bottom)
+  }
+  const cancelPointer = event => {if (gesture?.pointerId===event.pointerId) finish()}
+  const cancel = () => finish()
+  const visibility = () => {if (window.document.hidden) finish()}
+  const keydown = event => {
+    if (event.key==='Escape' && gesture) {event.preventDefault();event.stopPropagation();finish();return}
+    const handle=event.target.closest?.('[data-prts-emblem-reorder]')
+    if (!handle || handle.disabled || !canStart()) return
+    if ([' ','Enter'].includes(event.key)) {
+      event.preventDefault()
+      if (gesture?.keyboard) {finish(true);return}
+      if (gesture) return
+      gesture={handle,row:handle.closest('[data-emblem-key]'),original:rows(),keyboard:true,active:false}
+      activate();status.textContent='用上下方向键调整顺序，空格或回车保存；Esc 取消'
+    } else if (gesture?.keyboard && ['ArrowUp','ArrowDown','Home','End'].includes(event.key)) {
+      event.preventDefault()
+      const current=rows(),index=current.indexOf(gesture.row)
+      const target=event.key==='Home'?0:event.key==='End'?current.length-1:Math.max(0,Math.min(current.length-1,index+(event.key==='ArrowDown'?1:-1)))
+      if (target!==index)list.insertBefore(gesture.row,target<index?current[target]:current[target].nextSibling)
+      gesture.handle.focus({preventScroll:true});gesture.row.scrollIntoView({block:'nearest'})
+      status.textContent=`当前位置：第 ${target+1} 项，共 ${current.length} 项；空格保存`
+    }
+  }
+  const touchmove = event => {if(gesture?.active && !gesture.keyboard)event.preventDefault()}
+  const context = event => {if(event.target.closest('[data-emblem-key]')||gesture?.active)event.preventDefault()}
+  const click = event => {if(suppressClick || gesture?.active || event.target.closest('[data-prts-emblem-reorder]')){event.preventDefault();event.stopPropagation()}}
+  list.addEventListener('touchmove',touchmove,{passive:false})
+  list.addEventListener('pointerdown',down)
+  list.addEventListener('contextmenu',context)
+  list.addEventListener('click',click,true)
+  window.addEventListener('pointermove',move,{passive:false})
+  window.addEventListener('pointerup',up)
+  window.addEventListener('pointercancel',cancelPointer)
+  list.addEventListener('lostpointercapture',cancelPointer)
+  window.addEventListener('keydown',keydown,true)
+  window.addEventListener('blur',cancel)
+  window.addEventListener('resize',cancel)
+  window.document.addEventListener('visibilitychange',visibility)
+  return { cancel, get active(){return !!gesture?.active}, dispose() {
+    finish()
+    list.removeEventListener('touchmove',touchmove);list.removeEventListener('pointerdown',down);list.removeEventListener('contextmenu',context);list.removeEventListener('click',click,true)
+    window.removeEventListener('pointermove',move);window.removeEventListener('pointerup',up);window.removeEventListener('pointercancel',cancelPointer)
+    list.removeEventListener('lostpointercapture',cancelPointer);window.removeEventListener('keydown',keydown,true);window.removeEventListener('blur',cancel);window.removeEventListener('resize',cancel)
+    window.document.removeEventListener('visibilitychange',visibility)
+  } }
+}

package/src/client/emblem-tool-preview.js

@@ -0,0 +1,17 @@
+// The native tool seat keeps previews available even for sessions with a remote filesystem.
+export function registerEmblemToolPreview(ctx, React) {
+  if (!ctx.slots?.inject || !React?.createElement) return () => {}
+  return ctx.slots.inject('tool.call.toolview', () => ctx.slots.register({
+    name:'tool.call.toolview',key:'prts_emblem_preview',
+  }, ({block}) => {
+    const h=React.createElement
+    let result
+    for(const part of block?.content ?? [])if(part.type==='text'){
+      try {const value=JSON.parse(part.text);if(value.draftId)result=value}catch{}
+    }
+    if(!result || !/^[a-zA-Z0-9-]{1,80}$/.test(result.draftId))return h('div',null,block?.isError?'徽记预览失败':'正在生成徽记预览…')
+    return h('figure',{'data-prts-tool-preview':'',style:{margin:'8px 0'}},
+      h('img',{src:`/prts-theme-api/emblems/draft/${result.draftId}/preview.png`,alt:'粒子徽记预览',width:384,height:384,style:{maxWidth:'100%',height:'auto',display:'block',borderRadius:8}}),
+      h('figcaption',null,`${result.label || '自定义徽记'} · 标准密度 ${result.particles?.standard ?? ''} 个粒子 · 未应用`))
+  }))
+}