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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web and the official desktop client",
@@ -69,7 +69,7 @@
   },
   "engines": {
     "node": ">=20.9.0",
-    "dsh": "0.2.1-rc.2"
+    "dsh": "0.2.1-rc.2 || 0.2.1-rc.3"
   },
   "devDependencies": {
     "@playwright/test": "1.55.1",

package/src/client/avatar-crop.js

@@ -1,9 +1,10 @@
+import { mountFileDrop } from './file-drop.js'
 export function mountAvatarCrop({panel,window,load,onSave}){
   const dialog=panel.ownerDocument.createElement('dialog')
   dialog.setAttribute('data-prts-avatar-crop','')
   dialog.setAttribute('aria-labelledby','prts-avatar-crop-title')
   dialog.innerHTML=`<header><strong id="prts-avatar-crop-title">头像设置</strong><label data-prts-avatar-upload>更换图片<input type="file" accept="image/png,image/jpeg,image/webp,image/gif,image/avif" data-crop-file aria-label="上传新头像"></label></header>
-    <p>拖动亮区选择头像范围，滚轮或触摸板调整大小。</p>
+    <p>可拖入图片更换头像。拖动亮区选择头像范围，滚轮或触摸板调整大小。</p>
     <canvas width="320" height="320" tabindex="0" aria-label="原图与头像裁剪范围，可拖动或用方向键调整亮区"></canvas>
     <div data-crop-tools><label>缩放 <input type="range" min="1" max="4" step=".01" value="1" aria-label="头像裁剪缩放"></label><button type="button" data-crop-center>重置裁剪</button></div>
     <p role="status" data-prts-avatar-crop-status></p>
@@ -109,6 +110,10 @@ export function mountAvatarCrop({panel,window,load,onSave}){
     catch(error){status.textContent=error.message}
     finally{busy=false;controls()}
   })
+  const drop = mountFileDrop({ area: dialog, input: dialog.querySelector('[data-crop-file]'),
+    enabled: () => dialog.open && ready && !busy && !disposed,
+    onError: message => { status.textContent = message },
+  })
   return{
     async open(target){
       const ticket=++generation
@@ -129,6 +134,6 @@ export function mountAvatarCrop({panel,window,load,onSave}){
       finally{if(ticket===generation){busy=false;controls();canvas.focus()}}
     },
     close,
-    dispose(){disposed=true;close();dialog.remove()},
+    dispose(){disposed=true;drop.dispose();close();dialog.remove()},
   }
 }

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

@@ -1,10 +1,12 @@
 // Keep host content in place; mount upstream GlassSurface only as a background.
 export function createComposerGlassSurface({document, window, mount}) {
   const surfaces = new Map()
+  const observed = new Set()
   let observer, resize, frame
   function remove(card, entry) {
     window.clearTimeout(entry.resizeTimer)
     resize?.unobserve(card)
+    observed.delete(card)
     entry.unmount()
     entry.container.remove()
     card.removeAttribute('data-prts-composer-glass-active')
@@ -14,7 +16,14 @@ export function createComposerGlassSurface({document, window, mount}) {
     frame = undefined
     const cards = new Set(document.querySelectorAll('[data-composer-card], [data-prts-composer-fallback]'))
     for (const [card, entry] of surfaces) if (!cards.has(card)) remove(card, entry)
+    for (const card of observed) {
+      if (cards.has(card)) continue
+      resize?.unobserve(card)
+      observed.delete(card)
+    }
     for (const card of cards) {
+      // Hidden composers still need observation so their first visible size mounts glass.
+      if (!observed.has(card)) { resize?.observe(card); observed.add(card) }
       // Use layout dimensions, unaffected by host entrance/resize transforms.
       const w = card.offsetWidth
       const h = card.offsetHeight
@@ -37,7 +46,6 @@ export function createComposerGlassSurface({document, window, mount}) {
         entry = {container, shape, width:w, height:h, unmount:mount(container, {shape})}
         surfaces.set(card, entry)
         card.setAttribute('data-prts-composer-glass-active', '')
-        resize?.observe(card)
       } else if (entry.shape !== shape) {
         entry.shape = shape
         entry.width = w
@@ -76,6 +84,7 @@ export function createComposerGlassSurface({document, window, mount}) {
       observer?.disconnect()
       observer = undefined
       resize?.disconnect()
+      observed.clear()
       window.cancelAnimationFrame?.(frame)
       frame = undefined
       for (const [card, entry] of surfaces) remove(card, entry)

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

@@ -14,6 +14,7 @@ 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.querySelector('[data-compaction-disclosure]')) return null
   // Notification headers belong to the card surface, not standalone buttons.
   if (button.parentElement?.matches('[data-turn-trigger]')) return null
   // Changed-file cards own one outer surface; their header and rows stay native.
@@ -23,11 +24,14 @@ function classify(button, operation) {
   if (button.tagName !== 'BUTTON' || !operation.contains(button)) return null
   if (hasClassSuffix(button, '_sessionLogButton')) return 'header'
   const tokens=[...(button.classList ?? [])]
-  const fileLink=tokens.some(token=>/(?:^|_)file(?:Link|Mention)(?:_|$)/.test(token))
+  const fileMention=tokens.some(token=>/(?:^|_)fileMention(?:_|$)/.test(token))
+  const fileLink=tokens.some(token=>/(?:^|_)fileLink(?:_|$)/.test(token))
+  // Tool summaries own a compact, single-line link; card padding/wrapping clips it.
+  if (fileLink && !fileMention) return null
   const fileChange=hasClassSuffix(button,'_header')
     && [...button.children].some(node=>hasClassSuffix(node,'_tile'))
     && [...button.children].some(node=>hasClassSuffix(node,'_titles'))
-  if (fileLink || fileChange || button.closest('[data-produced-files-row]')) return 'file'
+  if (fileMention || fileChange || button.closest('[data-produced-files-row]')) return 'file'
   if (hasClassSuffix(button, '_showFolder')) return 'utility'
   if (closestWithClassSuffix(button, '_older')) return 'utility'
   if (hasClassSuffix(button, '_inspectButton')) return 'inspect'
@@ -42,6 +46,7 @@ function classify(button, operation) {
 
 export function createConversationControlAdapter({ document, window }) {
   let observer
+  let disposeFrame
   let operation
   const owned = new Set()
   const pending = new Set()
@@ -100,8 +105,13 @@ export function createConversationControlAdapter({ document, window }) {
   return {
     start() {
       if (!document) return
-      operation = document.querySelector('[data-prts-region="operation"]')
+      const nextOperation = document.querySelector('[data-prts-region="operation"]')
+      if(operation && operation!==nextOperation){
+        disposeFrame?.();disposeFrame=undefined;observer?.disconnect();observer=undefined;clear()
+      }
+      operation = nextOperation
       if (!operation) return
+      disposeFrame ||= mountBodyTargetFrame(document, window, operation)
       collectButtons(operation)
       scan()
       if (observer || !window?.MutationObserver) return
@@ -114,6 +124,7 @@ export function createConversationControlAdapter({ document, window }) {
       })
     },
     dispose() {
+      disposeFrame?.();disposeFrame=undefined
       observer?.disconnect()
       observer = undefined
       clear()
@@ -121,3 +132,141 @@ export function createConversationControlAdapter({ document, window }) {
     },
   }
 }
+
+// One shared frame follows body targets, including transitions between neighboring controls.
+function mountBodyTargetFrame(document, window, operation) {
+  // Nonvisual hosts can still mount the theme without an animation clock.
+  if (!window?.requestAnimationFrame || !window?.cancelAnimationFrame) return () => {}
+  const composerButton=':is([data-composer-card],[data-prts-composer-fallback]) button:not([data-slot="conversation.input.attachments"] *,[data-prts-glass-menu] *,[data-prts-floating-glass] *,[role="menu"] *,[role="listbox"] *)'
+  const selector='[data-prts-conversation-control],[data-presented-file],[data-changed-files],[data-produced-files-row] > button,[data-prts-glass-control],[data-prts-footer-action],[data-prts-transfer] button,'+composerButton
+  const frame=document.createElement('div')
+  frame.setAttribute('data-prts-body-target-frame','');frame.setAttribute('aria-hidden','true')
+  const corners=Array.from({length:4},()=>frame.appendChild(document.createElement('i')))
+  document.body.append(frame)
+  if(frame.showPopover)frame.setAttribute('popover','manual')
+  let layer=null
+  const hideFrame=()=>{if(frame.hidePopover && frame.matches(':popover-open'))frame.hidePopover()}
+  const showFrame=()=>{
+    if(!frame.showPopover)return
+    const modal=target?.closest('dialog[open]')
+    if(modal!==layer)hideFrame()
+    if(!frame.matches(':popover-open'))frame.showPopover()
+    layer=modal
+  }
+  let target=null, hovered=null, focused=null, raf=0, pressed=false, disposed=false
+  let pointer={x:0,y:0}, state=null, settled=false, tween=null, bounds=null, boundsDirty=false, hitDirty=false, exitGoal=null, motionDuration=240, targetArm=7
+  const resizeObserver=window.ResizeObserver?new window.ResizeObserver(()=>{boundsDirty=true;wake()}):null
+  const reduced=window.matchMedia?.('(prefers-reduced-motion: reduce)')
+  const fine=window.matchMedia?.('(hover:hover) and (pointer:fine)')
+  const find=node=>{
+    if (!node?.closest || node.closest('[data-prts-workspace-actions],[data-prts-session-actions]')) return null
+    const card=node.closest('[data-presented-file],[data-changed-files]')
+    const candidate=card || node.closest(selector)
+    return candidate && !candidate.matches(':disabled,[aria-disabled="true"]') && !candidate.closest('[inert]') ? candidate : null
+  }
+  const measure=()=>{bounds=target.getBoundingClientRect();targetArm=7+Math.max(0,Math.min(1,(Math.min(bounds.width,bounds.height)-36)/36))*5;boundsDirty=false}
+  const wake=()=>{if(!raf && !disposed)raf=window.requestAnimationFrame(draw)}
+  const choose=()=>{
+    const next=hovered || focused
+    if(next!==target){
+      target?.removeAttribute('data-prts-corner-target')
+      pressed=false;settled=false;tween=null;exitGoal=null;motionDuration=240;target=next;boundsDirty=true
+      resizeObserver?.disconnect()
+      if(target)resizeObserver?.observe(target)
+      if(target){
+        target.setAttribute('data-prts-corner-target','');showFrame()
+        measure();const box=bounds
+        if(!state || state.alpha<.01)state={x:(hovered?pointer.x:box.left+box.width/2)-10,y:(hovered?pointer.y:box.top+box.height/2)-10,w:20,h:20,alpha:0,arm:7}
+        const style=window.getComputedStyle(target)
+        frame.style.color=style.getPropertyValue(target.getAttribute('data-prts-conversation-control')==='danger'?'--prts-red':'--prts-yellow')
+      }
+    }
+    if(!settled || !target && state?.alpha>0)wake()
+  }
+  function draw(time) {
+    raf=0
+    if(hitDirty){hitDirty=false;hovered=find(document.elementFromPoint(pointer.x,pointer.y));choose()}
+    if(target && !target.isConnected){target.removeAttribute('data-prts-corner-target');target=hovered=focused=null;pressed=false;settled=false;exitGoal=null}
+    if(!state)return
+    if(target && boundsDirty){
+      measure()
+      if(!bounds.width && !bounds.height){target.removeAttribute('data-prts-corner-target');target=hovered=focused=null;pressed=false;settled=false;exitGoal=null;resizeObserver?.disconnect()}
+    }
+    const box=target?bounds:null,gap=pressed?3:5
+    // Freeze the exit destination: subsequent pointer motion must not restart the fade.
+    const goal=box?{x:box.left-gap,y:box.top-gap,w:box.width+gap*2,h:box.height+gap*2,alpha:1,arm:targetArm}:
+      (exitGoal ||= {x:pointer.x-10,y:pointer.y-10,w:20,h:20,alpha:0,arm:7})
+    // Align endpoints once; rounding each animation frame turns a 3px release into visible steps.
+    const ratio=window.devicePixelRatio || 1,pixel=value=>Math.round(value*ratio)/ratio
+    const edgeRight=pixel(goal.x+goal.w),edgeBottom=pixel(goal.y+goal.h)
+    goal.x=pixel(goal.x);goal.y=pixel(goal.y);goal.w=edgeRight-goal.x;goal.h=edgeBottom-goal.y
+    const keys=['x','y','w','h','alpha','arm']
+    if(!tween || keys.some(key=>tween.to[key]!==goal[key])){
+      const remaining=tween && tween.pressed===pressed?Math.max(0,tween.start+tween.duration-time):motionDuration
+      tween={from:{...state},to:{...goal},start:time,duration:remaining,pressed}
+    }
+    // All channels share one endpoint; no separate thresholds or late position snap.
+    const progress=reduced?.matches || settled || !tween.duration?1:Math.min(1,(time-tween.start)/tween.duration)
+    const ease=1-(1-progress)**3
+    for(const key of keys)state[key]=tween.from[key]+(goal[key]-tween.from[key])*ease
+    const moving=progress<1
+    const x=state.x,y=state.y
+    const right=state.x+state.w-7,bottom=state.y+state.h-7
+    const positions=[[x,y],[right,y],[x,bottom],[right,bottom]]
+    corners.forEach((corner,index)=>{
+      const transform=`translate3d(${positions[index][0]}px,${positions[index][1]}px,0)`
+      if(corner.style.transform!==transform)corner.style.transform=transform
+    })
+    const armScale=String(state.arm/7)
+    if(frame.style.getPropertyValue('--prts-arm-scale')!==armScale)frame.style.setProperty('--prts-arm-scale',armScale)
+    const opacity=String(state.alpha)
+    if(frame.style.opacity!==opacity)frame.style.opacity=opacity
+    settled=!moving
+    frame.toggleAttribute('data-pressed',pressed)
+    if(moving)wake()
+    else {tween=null;if(!state.alpha)hideFrame()}
+  }
+  const move=event=>{
+    if(document.hidden || event.pointerType==='touch' || !fine?.matches)return
+    pointer={x:event.clientX,y:event.clientY}
+    const next=find(event.target)
+    if(next===hovered && (next || !state?.alpha))return
+    hovered=next;choose()
+  }
+  const leave=()=>{hovered=null;choose()}
+  const focus=event=>{focused=event.target.matches?.(':focus-visible')?find(event.target):null;choose()}
+  const blur=()=>{focused=null;choose()}
+  const down=event=>{
+    pointer={x:event.clientX,y:event.clientY}
+    if(event.pointerType==='touch')hovered=find(event.target)
+    choose()
+    if(target && find(event.target)===target){pressed=true;motionDuration=100;settled=false;wake()}
+  }
+  const up=event=>{pressed=false;motionDuration=140;settled=false;if(event.pointerType==='touch')hovered=null;choose()}
+  const reset=()=>{
+    target?.removeAttribute('data-prts-corner-target');hideFrame()
+    hovered=focused=target=null;state=tween=bounds=exitGoal=null
+    pressed=false;settled=true;boundsDirty=hitDirty=false
+    resizeObserver?.disconnect();window.cancelAnimationFrame(raf);raf=0
+    frame.style.opacity='0';frame.removeAttribute('data-pressed')
+  }
+  const visibility=()=>{if(document.hidden)reset()}
+  const scroll=()=>{if(!target && !state?.alpha)return;boundsDirty=true;hitDirty=!!hovered;wake()}
+  document.addEventListener('scroll',scroll,true)
+  window.addEventListener('resize',reset)
+  const key=event=>{if(target && (event.key===' ' || event.key==='Enter')){pressed=event.type==='keydown';motionDuration=pressed?100:140;settled=false;wake()}}
+  const listeners=[
+    [document,'pointermove',move],[document,'pointerleave',leave],
+    [document,'focusin',focus],[document,'focusout',blur],
+    [document,'pointerdown',down],[document,'pointerup',up],[document,'pointercancel',reset],
+    [document,'keydown',key],[document,'keyup',key],[window,'blur',reset],
+    [window,'pagehide',reset],[document,'visibilitychange',visibility]
+  ]
+  for(const [node,event,handler] of listeners)node.addEventListener(event,handler)
+  return ()=>{
+    disposed=true;target?.removeAttribute('data-prts-corner-target');hideFrame();window.cancelAnimationFrame(raf);resizeObserver?.disconnect()
+    document.removeEventListener('scroll',scroll,true);window.removeEventListener('resize',reset)
+    for(const [node,event,handler] of listeners)node.removeEventListener(event,handler)
+    frame.remove()
+  }
+}

package/src/client/custom-background.js

@@ -1,3 +1,4 @@
+import { mountFileDrop } from './file-drop.js'
 import { createBackgroundLayout } from './background-layout.js'
 import { mountBackgroundRegionEditor, backgroundRegionMarkup } from './background-region-editor.js'
 import { opacityDialMarkup, mountOpacityDials } from './opacity-dial.js'
@@ -87,10 +88,19 @@ export function backgroundMarkup(heroContrastControl = '') {
       ${backgroundRegionMarkup(slot)}
       <input type="file" data-prts-background-file="${slot}" accept="image/png,image/jpeg,image/webp,image/avif" hidden>
     </article>`).join('')}</div>
+    <dialog data-prts-background-confirm aria-labelledby="prts-background-confirm-title" aria-describedby="prts-background-confirm-note">
+      <header><small>会话背景</small><h2 id="prts-background-confirm-title"></h2></header>
+      <div data-prts-background-compare>
+        <figure><img data-prts-background-before alt="当前背景"><figcaption>当前背景</figcaption></figure>
+        <figure><img data-prts-background-after alt="新背景"><figcaption>新背景<span data-prts-background-filename></span></figcaption></figure>
+      </div>
+      <p id="prts-background-confirm-note"></p>
+      <footer><button type="button" data-prts-background-confirm-cancel autofocus>取消</button><button type="button" data-prts-background-confirm-apply>替换背景</button></footer>
+    </dialog>
     <label data-prts-background-shade hidden><span>背景淡化 <output></output></span><input type="range" min="0" max="90" step="5" aria-label="背景淡化程度"><small>调高后背景更淡，接近当前主题底色。</small></label>
     <div data-prts-background-hero-setting hidden>${heroContrastControl}</div>
     ${opacityDialMarkup()}
-    <small data-prts-background-help>支持 PNG / JPEG / WebP / AVIF · 最大 10 MB<br>图片铺满，可框选重要区域优先保留。切换模式保留素材，并在当前 DSH 实例同步。</small><p data-prts-background-status role="status"></p>
+    <small data-prts-background-help>可将图片拖入对应背景区域。支持 PNG / JPEG / WebP / AVIF · 最大 10 MB<br>图片铺满，可框选重要区域优先保留。切换模式保留素材，并在当前 DSH 实例同步。</small><p data-prts-background-status role="status"></p>
   </section>`
 }
 export function mountBackgroundSettings({ panel, window, store, onChange }) {
@@ -99,6 +109,38 @@ export function mountBackgroundSettings({ panel, window, store, onChange }) {
   let disposed = false, busy = false, preferences = {}, state = store.snapshot()
   const status = section.querySelector('[data-prts-background-status]')
   const range = section.querySelector('input[type="range"]')
+  const confirmDialog = section.querySelector('[data-prts-background-confirm]')
+  let finishConfirmation, previewUrl, returnFocus
+  const finish = accepted => {
+    if (!finishConfirmation) return
+    const resolve = finishConfirmation; finishConfirmation = undefined
+    confirmDialog.close()
+    confirmDialog.querySelectorAll('img').forEach(image => image.removeAttribute('src'))
+    window.URL.revokeObjectURL(previewUrl); previewUrl = undefined
+    returnFocus?.focus?.({ preventScroll: true })
+    resolve(accepted)
+  }
+  const confirmReplace = (slot, file) => new Promise(resolve => {
+    returnFocus = section.querySelector(`[data-prts-background-upload="${slot}"]`)
+    previewUrl = window.URL.createObjectURL(file)
+    confirmDialog.querySelector('h2').textContent = `替换${backgroundLabels[slot]}？`
+    confirmDialog.querySelector('[data-prts-background-before]').src = backgroundImageUrl(state[slot])
+    confirmDialog.querySelector('[data-prts-background-after]').src = previewUrl
+    confirmDialog.querySelector('[data-prts-background-filename]').textContent = file.name
+    confirmDialog.querySelector('p').textContent = state[slot].region ? '替换后，当前图片的保护区域将清除。' : '确认后，新图片将应用到此区域。'
+    finishConfirmation = resolve
+    confirmDialog.showModal()
+    confirmDialog.querySelector('[data-prts-background-confirm-cancel]').focus()
+  })
+  const confirmClick = event => {
+    if (event.target.closest('[data-prts-background-confirm-cancel]')) finish(false)
+    if (event.target.closest('[data-prts-background-confirm-apply]')) finish(true)
+  }
+  const confirmCancel = event => { event.preventDefault(); event.stopPropagation(); finish(false) }
+  const confirmKey = event => { if (event.key === 'Escape') confirmCancel(event) }
+  confirmDialog.addEventListener('click', confirmClick)
+  confirmDialog.addEventListener('cancel', confirmCancel)
+  confirmDialog.addEventListener('keydown', confirmKey)
   const regions = mountBackgroundRegionEditor({section,window,store})
   const dials = mountOpacityDials({ section, window, onChange })
   function render() {
@@ -121,9 +163,11 @@ export function mountBackgroundSettings({ panel, window, store, onChange }) {
     for (const button of section.querySelectorAll('[data-prts-background-upload], [data-prts-background-remove]')) button.disabled = busy
   }
   async function save(slot, file) {
-    if (busy) return
+    if (busy || finishConfirmation) return
     if (file && file.size > 10 * 1024 * 1024) { status.textContent = '请上传不超过 10 MB 的图片'; return }
     const revision = state.revision
+    if (file && state[slot] && !await confirmReplace(slot, file)) return
+    if (disposed) return
     busy = true; status.textContent = '正在保存背景…'; render()
     try {
       let image = null
@@ -152,9 +196,15 @@ export function mountBackgroundSettings({ panel, window, store, onChange }) {
   }
   const input = event => { if (event.target === range) section.querySelector('output').textContent = `${range.value}%` }
   section.addEventListener('click', click); section.addEventListener('change', change); section.addEventListener('input', input)
+  const drops = Object.keys(backgroundLabels).map(slot => mountFileDrop({
+    area: section.querySelector(`[data-prts-background-image-controls="${slot}"]`),
+    input: section.querySelector(`[data-prts-background-file="${slot}"]`),
+    enabled: () => !busy && !finishConfirmation && !disposed,
+    onError: message => { status.textContent = message },
+  }))
   const unsubscribe = store.subscribe(value => { state = value; render() })
   return {
     update(value) { preferences = value; render() },
-    dispose() { disposed = true; regions.dispose(); dials.dispose(); unsubscribe(); section.removeEventListener('click', click); section.removeEventListener('change', change); section.removeEventListener('input', input) },
+    dispose() { disposed = true; finish(false); confirmDialog.removeEventListener('click', confirmClick); confirmDialog.removeEventListener('cancel', confirmCancel); confirmDialog.removeEventListener('keydown', confirmKey); drops.forEach(drop => drop.dispose()); regions.dispose(); dials.dispose(); unsubscribe(); section.removeEventListener('click', click); section.removeEventListener('change', change); section.removeEventListener('input', input) },
   }
 }

package/src/client/custom-emblem.js

@@ -1,3 +1,4 @@
+import { mountFileDrop } from './file-drop.js'
 import { mountEmblemReorder } from './emblem-reorder.js'
 import { PARTICLE_DENSITY_PROFILES } from './particle-field-adapter.js'
 
@@ -268,13 +269,13 @@ export function customEmblemMarkup() {
       <strong data-prts-emblem-target></strong>
       <button type="button" data-prts-emblem-cancel aria-label="关闭徽记编辑">×</button></div>
       <div data-prts-emblem-edit-body>
-        <aside data-prts-emblem-edit-preview><canvas width="280" height="280" data-prts-emblem-preview aria-label="拖动调整徽记位置，也可使用方向键微调" tabindex="0" hidden></canvas><p data-prts-emblem-empty>选择图片后在此预览粒子效果</p></aside>
+        <aside data-prts-emblem-edit-preview><canvas width="280" height="280" data-prts-emblem-preview aria-label="拖动调整徽记位置，也可使用方向键微调" tabindex="0" hidden></canvas><p data-prts-emblem-empty>拖入图片或选择图片，预览粒子效果</p></aside>
         <div data-prts-emblem-edit-controls>
       <label>素材来源<select data-prts-emblem-source><option value="image">上传图片</option><option value="package">导入素材包</option></select></label>
       <label data-prts-emblem-source-kind="image">选择图片<input type="file" accept="image/png,image/jpeg,image/webp" data-prts-emblem-file></label>
       <small data-prts-emblem-source-kind="image">支持 PNG、WebP、JPEG，最大 8 MB / 1600 万像素。透明底标志和黑白剪影效果更好。</small>
       <label data-prts-emblem-source-kind="package" hidden>选择素材包<input type="file" accept=".prts-emblem.json,application/json" data-prts-emblem-import></label>
-      <small data-prts-emblem-source-kind="package" hidden>导入 .prts-emblem.json 可恢复原图和调整参数，预览后再应用。</small>
+      <small data-prts-emblem-source-kind="package" hidden>选择“导入素材包”后可拖入 .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><option value="lineart">线稿轮廓</option></select></label>
         <small>线稿模式提取轮廓；阈值越高，保留的细节越少。彩色原图建议先由 AI 简化背景与纹理。</small>
@@ -724,8 +725,13 @@ export function mountCustomEmblemEditor({ panel, window, store }) {
   canvas.addEventListener('pointercancel',abortDrag)
   canvas.addEventListener('lostpointercapture',abortDrag)
   canvas.addEventListener('keydown',positionKey)
+  const drop = mountFileDrop({ area: get('workspace'),
+    input: () => get('source').value === 'package' ? get('import') : fileInput,
+    enabled: () => get('workspace').open && destination !== null && !saving && !processing && !disposed,
+    onError: message => { status.textContent = message },
+  })
   return { prefetch, close:cancel, cancelReorder: () => reorder.cancel(), dispose() {
-    cancel()
+    drop.dispose(); cancel()
     get('workspace').removeEventListener('cancel',editorCancel)
     get('discard').removeEventListener('cancel',editorCancel)
     get('reset-confirm').removeEventListener('cancel',resetCancel)

package/src/client/emblem-reorder.js

@@ -1,6 +1,21 @@
 // Cards own touch gestures: immediate swipes scroll, while a hold locks into sorting.
 export function mountEmblemReorder({ list, window, status, canStart, onStart, onCommit }) {
   let gesture = null, holdTimer, frame, previousTime = 0, suppressClick = false
+  const reduced = () => window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+  const animations = new Map()
+  const stopAnimations = () => { for (const animation of animations.values()) animation.cancel(); animations.clear() }
+  const rearrange = mutate => {
+    const before = new Map(rows().map(row => [row, row.getBoundingClientRect().top]))
+    stopAnimations()
+    mutate()
+    if (reduced()) return
+    for (const row of rows()) {
+      const offset = before.get(row) - row.getBoundingClientRect().top
+      if (!offset || (row === gesture?.row && !gesture.keyboard)) continue
+      const animation = row.animate?.([{transform:`translateY(${offset}px)`},{transform:'translateY(0)'}],{duration:220,easing:'cubic-bezier(.2,.8,.2,1)'})
+      if (animation) { animations.set(row,animation); animation.onfinish=()=>animations.delete(row) }
+    }
+  }
   const rows = () => [...list.children].filter(row => row.hasAttribute('data-emblem-key'))
   const scroller = list.closest('[data-prts-theme-settings-scroll]')
   const clear = () => {
@@ -10,7 +25,7 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
   const finish = (commit = false) => {
     const current = gesture
     if (!current) return
-    gesture = null; clear()
+    gesture = null; clear(); stopAnimations(); current.landing?.cancel()
     current.ghost?.remove();current.row.removeAttribute('data-prts-emblem-dragging')
     list.removeAttribute('data-prts-emblem-sorting')
     scroller?.removeAttribute('data-prts-emblem-sort-active')
@@ -29,14 +44,14 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
     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})
+    const next = others.find(row=>{const box=row.getBoundingClientRect();const offset=animations.has(row)?new window.DOMMatrixReadOnly(window.getComputedStyle(row).transform).m42:0;return y < box.top-offset + 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)
+      if (current.row.nextElementSibling !== next) rearrange(()=>list.insertBefore(current.row,next))
+    } else if (others.at(-1)?.nextElementSibling !== current.row) rearrange(()=>list.insertBefore(current.row,current.ghost))
     current.position = rows().indexOf(current.row)
   }
   const tick = time => {
-    if (!gesture?.active || gesture.keyboard) return
+    if (!gesture?.active || gesture.keyboard || gesture.settling) return
     const current = gesture
     if (!list.isConnected || !list.getClientRects().length) { finish();return }
     const delta = previousTime ? Math.min(32,time-previousTime) : 16
@@ -48,7 +63,9 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
       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)`
+    const dx=current.x-current.startX,dy=current.y-current.startY
+    const tilt=reduced()?0:Math.max(-3,Math.min(3,dx*.035))
+    current.ghost.style.transform=`translate3d(${dx}px,${dy}px,0) rotate(${tilt}deg) scale(${reduced()?1:1.025})`
     frame=window.requestAnimationFrame(tick)
   }
   const activate = () => {
@@ -79,6 +96,7 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
     status.textContent='正在调整徽记顺序，松开保存；按 Esc 取消'
   }
   const down = event => {
+    if (gesture?.settling) finish(true)
     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]')
@@ -92,7 +110,7 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
     if (sortable) holdTimer=window.setTimeout(activate,400)
   }
   const move = event => {
-    if (!gesture || gesture.pointerId!==event.pointerId) return
+    if (!gesture || gesture.settling || gesture.pointerId!==event.pointerId) return
     const previousY=gesture.y
     gesture.x=event.clientX;gesture.y=event.clientY
     if (!gesture.active && !gesture.scrolling && Math.hypot(gesture.x-gesture.startX,gesture.y-gesture.startY)>8) {
@@ -110,18 +128,31 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
     if (gesture?.pointerId!==event.pointerId) return
     if (gesture.scrolling) {finish();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 commit=event.clientX>=box.left && event.clientX<=box.right && event.clientY>=viewport.top && event.clientY<=viewport.bottom
+    if (!commit || !gesture.active || reduced() || !gesture.ghost?.animate) {finish(commit);return}
+    const current=gesture
+    place(event.clientY)
+    current.settling=true;clear()
+    current.ghost.style.transform='none'
+    const target=current.row.getBoundingClientRect(), floating=current.ghost.getBoundingClientRect()
+    const dx=target.left-floating.left,dy=target.top-floating.top
+    current.landing=current.ghost.animate([
+      {transform:`translate3d(${current.x-current.startX}px,${current.y-current.startY}px,0) rotate(${Math.max(-3,Math.min(3,(current.x-current.startX)*.035))}deg) scale(1.025)`},
+      {transform:`translate3d(${dx}px,${dy}px,0) scale(1)`,opacity:1}
+    ],{duration:160,easing:'cubic-bezier(.2,.8,.2,1)',fill:'forwards'})
+    current.landing.onfinish=()=>{if(gesture===current)finish(true)}
   }
   const cancelPointer = event => {if (gesture?.pointerId===event.pointerId) finish()}
   // A touch initially belongs to its hit target. Transferring capture to the
   // list emits a bubbling loss event from that child, not a canceled drag.
   const lostCapture = event => {
-    if (event.target === list && !list.hasPointerCapture(event.pointerId)) cancelPointer(event)
+    if (!gesture?.settling && event.target === list && !list.hasPointerCapture(event.pointerId)) cancelPointer(event)
   }
   const cancel = () => finish()
   const visibility = () => {if (window.document.hidden) finish()}
   const keydown = event => {
     if (event.key==='Escape' && gesture) {event.preventDefault();event.stopPropagation();finish();return}
+    if (gesture?.settling) finish(true)
     const handle=event.target.closest?.('[data-prts-emblem-reorder]')
     if (!handle || handle.disabled || !canStart()) return
     if ([' ','Enter'].includes(event.key)) {
@@ -134,7 +165,7 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
       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)
+      if (target!==index)rearrange(()=>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} 项；空格保存`
     }

package/src/client/file-drop.js

@@ -0,0 +1,48 @@
+const extensions = {
+  'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg'], 'image/webp': ['.webp'],
+  'image/avif': ['.avif'], 'image/gif': ['.gif'], 'application/json': ['.json'],
+}
+
+// Feed the existing input/change flow so picker and drop share validation and saving.
+export function mountFileDrop({ area, input, enabled = () => true, onError }) {
+  let depth = 0
+  const getInput = () => typeof input === 'function' ? input() : input
+  const clear = () => { depth = 0; area.removeAttribute('data-prts-drop-active') }
+  const available = () => enabled() && !getInput()?.disabled && !area.closest('[hidden], [inert]')
+  const isFile = event => Array.from(event.dataTransfer?.types ?? []).includes('Files')
+    || Boolean(event.dataTransfer?.files?.length)
+  const enter = event => {
+    if (!isFile(event)) return
+    event.preventDefault(); event.stopPropagation()
+    depth++
+    if (available()) area.setAttribute('data-prts-drop-active', '')
+  }
+  const over = event => {
+    if (!isFile(event)) return
+    event.preventDefault(); event.stopPropagation()
+    event.dataTransfer.dropEffect = available() ? 'copy' : 'none'
+    if (!available()) clear()
+  }
+  const leave = event => {
+    if (!depth) return
+    event.stopPropagation()
+    if (--depth <= 0) clear()
+  }
+  const drop = event => {
+    if (!isFile(event)) return
+    event.preventDefault(); event.stopPropagation(); clear()
+    if (!available()) return
+    const files = event.dataTransfer.files, target = getInput()
+    if (files.length !== 1) { onError('一次只能添加一个文件'); return }
+    const file = files[0], name = file.name.toLowerCase()
+    const accepts = target.accept.toLowerCase().split(',').map(value => value.trim()).filter(Boolean)
+    const matches = accepts.some(type => type.startsWith('.') ? name.endsWith(type)
+      : file.type.toLowerCase() === type || (!file.type && extensions[type]?.some(ext => name.endsWith(ext))))
+    if (accepts.length && !matches) { onError('文件类型不支持，请选择此处支持的图片或文件'); return }
+    target.files = files
+    target.dispatchEvent(new area.ownerDocument.defaultView.Event('change', { bubbles: true }))
+  }
+  const handlers = { dragenter: enter, dragover: over, dragleave: leave, drop, dragend: clear }
+  for (const [name, handler] of Object.entries(handlers)) area.addEventListener(name, handler)
+  return { dispose() { clear(); for (const [name, handler] of Object.entries(handlers)) area.removeEventListener(name, handler) } }
+}