@ash-qw/dsh-theme-prts 1.0.6 → 1.1.1

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 ?? ''} 个粒子 · 未应用`))
+  }))
+}

package/src/client/index.js

@@ -1,3 +1,5 @@
+import { registerEmblemToolPreview } from './emblem-tool-preview.js'
+import { createCustomEmblemStore } from './custom-emblem.js'
 import { DEFAULT_PREFERENCES, isSafeMode, loadPreferences, persistPreferences, resetPreferenceGroup, updatePreferenceValue } from './preferences.js'
 import { createHostGeometryAdapter } from './host-geometry-adapter.js'
 import { createComposerGlassAdapter } from './composer-glass-adapter.js'
@@ -42,6 +44,7 @@ export function applyPrtsPlugin(ctx, environment) {
     startupTimings,
   } = environment
   const safeMode = isSafeMode(window?.location?.search ?? '')
+  const stopEmblemPreview = safeMode ? null : registerEmblemToolPreview(ctx, React)
   const storage = window?.localStorage
   const themeService = contextService(ctx, 'theme')
   const composerGlass = createComposerGlassAdapter({ document, window })
@@ -61,6 +64,7 @@ export function applyPrtsPlugin(ctx, environment) {
       sync()
     },
   })
+  const customEmblemStore = createCustomEmblemStore({ window, emblems: assets.emblems, preview: entry => particleField.previewEmblem?.(entry), onChange: value => particleField.setCustomEmblemConfiguration?.(value) })
   const startup = createPrtsStartupSequence({
     document,
     window,
@@ -187,7 +191,7 @@ export function applyPrtsPlugin(ctx, environment) {
     }
     if (!themeAlreadyApplied) theme.apply(preferences)
     operations ||= createOperationsShell({
-      document, window, assets, adapter, hostGeometry,
+      document, window, assets, adapter, hostGeometry, customEmblemStore,
       onSchemeToggle(next, interaction) {
         return theme.setTheme(next, { ...interaction, animate: true })
       },
@@ -339,7 +343,9 @@ export function applyPrtsPlugin(ctx, environment) {
     applyVisualState()
   }
   ctx.effect(() => () => {
+    if (typeof stopEmblemPreview === 'function') stopEmblemPreview()
     statusSource.dispose()
+    customEmblemStore.dispose()
     particleField.dispose()
     startup.dispose({ restoreFocus: false })
     stopStartupReadyWatch()

package/src/client/operations-shell-v2.js

@@ -1,5 +1,4 @@
 import { createThemeSettingsOverlay, themeSettingsMarkup } from './theme-settings-workbench.js'
-import { createResizeShieldAdapter } from './resize-shield-adapter.js'
 
 const PHONE_RAIL_BREAKPOINT = 640
 const RAIL_HOLD_DELAY_MS = 350
@@ -46,13 +45,13 @@ export function createOperationsShell({
   onSchemeToggle = () => {},
   onSchemeDragStart = () => undefined,
   onThemeDisable = () => {},
+  customEmblemStore,
   onPreferenceChange = () => {},
   onPreferencePreview = () => {},
   onVisualReset = () => {},
   onRetrySave = () => {},
 }) {
   const root = document.documentElement
-  const resizeShield = createResizeShieldAdapter({ window })
   let shell
   let navRail
   let railLauncher
@@ -456,16 +455,12 @@ export function createOperationsShell({
       trigger: shell.querySelector('[data-prts-rail-brand]'),
       panel: shell.querySelector('[data-prts-theme-settings]'),
       backdrop: shell.querySelector('[data-prts-settings-backdrop]'),
+      customEmblemStore,
       onPreferenceChange,
       onPreferencePreview,
       onResetVisual: onVisualReset,
       onRetrySave,
     })
-    resizeShield.start([
-      operationRegion,
-      shell.querySelector('[data-prts-theme-settings]'),
-      shell.querySelector('[data-prts-settings-backdrop]'),
-    ])
     conversationObserver = new window.MutationObserver(syncConversationState)
     conversationObserver.observe(operationRegion, { childList: true, subtree: true, attributes: true, attributeFilter: ['hidden', 'data-chat-flow-kind', 'data-message-role'] })
     schemeObserver = new window.MutationObserver(syncSchemeToggle)
@@ -518,7 +513,6 @@ export function createOperationsShell({
     railViewportQuery = undefined
     railPointerQuery = undefined
     railHoverQuery = undefined
-    resizeShield.dispose()
     settingsOverlay?.dispose()
     conversationObserver?.disconnect()
     schemeObserver?.disconnect()

package/src/client/particle-field-adapter.js

@@ -365,6 +365,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     },
     opticalScale: suppliedHeroMask.opticalScale,
   } : maskRecords[rhodesIndex]
+  let customEmblemConfiguration = null
   const targetCache = new Map()
   let particles = []
   let pointerActive = false
@@ -448,35 +449,44 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   }
 
   function sequenceIndexForSegment(segmentValue) {
-    const length = Math.max(1, emblemSequence.length)
+    const length = Math.max(1, (customEmblemConfiguration?.conversation ?? emblemSequence).length)
     return ((segmentValue % length) + length) % length
   }
 
   function emblemForSegment(segmentValue) {
-    return emblemSequence[sequenceIndexForSegment(segmentValue)] ?? emblemSequence[0]
+    const sequence = customEmblemConfiguration?.conversation ?? emblemSequence
+    return sequence[sequenceIndexForSegment(segmentValue)] ?? sequence[0]
   }
 
-  function targetsForIndex(index, density = 'standard') {
-    const key = `${index}:${density}`
+  function targetsForBuiltin(entry, density = 'standard') {
+    const index = emblemSequence.findIndex(item => item.key === entry?.key)
+    const key = `builtin:${index}:${density}`
     const cached = targetCache.get(key)
     if (cached) return cached
     const record = maskRecords[index]
     const targets = record ? createOrthogonalTargets(record.mask, density) : []
-    if (!targets.length) return []
-    targetCache.set(key, targets)
+    if (targets.length) targetCache.set(key, targets)
     return targets
   }
 
+  function targetsForIndex(index, density = 'standard') {
+    const entry = (customEmblemConfiguration?.conversation ?? emblemSequence)[index]
+    if (entry?.kind === 'custom') return entry.targets[density] ?? entry.targets.standard
+    return targetsForBuiltin(entry, density)
+  }
+
   function targetsForSegment(segmentValue, density = preferences.conversationParticleDensity) {
     return targetsForIndex(sequenceIndexForSegment(segmentValue), density)
   }
 
   function heroEmblem() {
+    if (customEmblemConfiguration?.hero) return customEmblemConfiguration.hero
     return emblemSequence[rhodesIndex] ?? emblemSequence[0]
   }
 
   function targetsForHero(density = preferences.heroParticleDensity) {
     const effectiveDensity = effectiveHeroDensity(density)
+    if (customEmblemConfiguration?.hero) return customEmblemConfiguration.hero.targets[effectiveDensity] ?? customEmblemConfiguration.hero.targets.standard
     const key = `hero:${effectiveDensity}`
     const cached = targetCache.get(key)
     if (cached) return cached
@@ -688,7 +698,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   function scheduleTargetPrewarm() {
     cancelTargetPrewarm()
     if (typeof window.requestIdleCallback !== 'function' || !particles.length) return
-    targetPrewarmQueue = emblemSequence.map((_, index) => index)
+    targetPrewarmQueue = (customEmblemConfiguration?.conversation ?? emblemSequence).map((_, index) => index)
       .filter(index => index !== sequenceIndexForSegment(segment))
     const warmNext = () => {
       targetPrewarmHandle = undefined
@@ -1836,6 +1846,21 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
       schemeTransitionPaused = next
       updateFrameGate()
     },
+    previewEmblem(entry) {
+      if (entry?.kind === 'custom') return entry
+      const points = entry ? targetsForBuiltin(entry, 'standard') : heroMaskRecord ? createOrthogonalTargets(heroMaskRecord.mask, 'standard') : []
+      return { targets: { standard: points } }
+    },
+    setCustomEmblemConfiguration(value) {
+      const previousSequence = customEmblemConfiguration?.conversation ?? emblemSequence
+      const nextSequence = value?.conversation ?? emblemSequence
+      const changed = heroActive
+        ? (customEmblemConfiguration?.hero ?? null) !== (value?.hero ?? null)
+        : previousSequence.length !== nextSequence.length || previousSequence.some((entry, index) =>
+          entry.key !== nextSequence[index]?.key || entry.targets !== nextSequence[index]?.targets)
+      customEmblemConfiguration = value
+      if (canvas && changed) { resetTraversal(); scheduleFrame() }
+    },
     update(nextPreferences = {}) {
       const previousPreferences = preferences
       const traversalSpeedChanged = previousPreferences.particleTraversalSpeed !== undefined

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

@@ -1,8 +1,10 @@
+import { customEmblemMarkup, mountCustomEmblemEditor } from './custom-emblem.js'
 import { PARTICLE_TRAVERSAL_SPEED_DEFAULT, PARTICLE_TRAVERSAL_SPEED_MAX, PARTICLE_TRAVERSAL_SPEED_MIN, PARTICLE_TRAVERSAL_SPEED_STEP, SESSION_FLOW_SPEED_DEFAULT, SESSION_FLOW_SPEED_MAX, SESSION_FLOW_SPEED_MIN, SESSION_FLOW_SPEED_STEP, resolveParticleDetail } from './preferences.js'
 
 const SETTINGS_FOCUSABLE = [
   'button:not([disabled])',
   'input:not([disabled])',
+  'select:not([disabled])',
   'summary',
   '[href]',
   '[tabindex]:not([tabindex="-1"])',
@@ -119,14 +121,31 @@ export function themeSettingsMarkup() {
         </header>
 
         <div data-prts-settings-body>
-        <nav data-prts-settings-nav aria-label="设置分区">
-          <button type="button" data-prts-settings-jump="appearance">外观</button>
-          <button type="button" data-prts-settings-jump="interaction">交互</button>
-          <button type="button" data-prts-settings-jump="flow">会话流线</button>
-          <button type="button" data-prts-settings-jump="particles">粒子效果</button>
+        <div data-prts-settings-sidebar>
+        <nav data-prts-settings-nav role="tablist" aria-label="设置分区">
+          <button type="button" data-prts-settings-jump="appearance" role="tab" id="prts-tab-appearance" aria-controls="prts-page-appearance" aria-selected="true" tabindex="0">外观</button>
+          <button type="button" data-prts-settings-jump="interaction" role="tab" id="prts-tab-interaction" aria-controls="prts-page-interaction" aria-selected="false" tabindex="-1">交互</button>
+          <button type="button" data-prts-settings-jump="flow" role="tab" id="prts-tab-flow" aria-controls="prts-page-flow" aria-selected="false" tabindex="-1">会话流线</button>
+          <button type="button" data-prts-settings-jump="particles" role="tab" id="prts-tab-particles" aria-controls="prts-page-particles" aria-selected="false" tabindex="-1">粒子效果</button>
         </nav>
+          <footer data-prts-settings-actions aria-label="全局主题设置操作">
+            <div data-prts-persistence-error hidden role="alert">
+              <span><strong>仅本次会话生效</strong><small>无法写入本地设置，当前视觉效果仍会保留。</small></span>
+              <button type="button" data-prts-retry-save>重试保存</button>
+            </div>
+            <div data-prts-reset-zone>
+
+              <button type="button" data-prts-reset-visual title="恢复全部外观设置" aria-label="恢复全部外观设置">恢复默认</button>
+              <div data-prts-reset-confirm hidden role="group" aria-label="确认恢复全部外观设置">
+                <span>重置四个分类的外观参数，保留主题开关、启动动画和徽记配置。</span>
+                <button type="button" data-prts-reset-confirm-action>确认恢复</button>
+                <button type="button" data-prts-reset-cancel>取消</button>
+              </div>
+            </div>
+          </footer>
+        </div>
         <div data-prts-theme-settings-scroll>
-          <section data-prts-settings-section="appearance" tabindex="-1">
+          <section data-prts-settings-section="appearance" role="tabpanel" id="prts-page-appearance" aria-labelledby="prts-tab-appearance" tabindex="0">
             <header data-prts-section-heading><strong>外观</strong><small>预设、界面材质与会话样式</small></header>
           <section data-prts-settings-presets>
             <header><span><strong>视觉预设</strong></span></header>
@@ -141,13 +160,13 @@ export function themeSettingsMarkup() {
             </div>
           </section>
           </section>
-          <section data-prts-settings-common data-prts-settings-section="interaction" tabindex="-1">
+          <section data-prts-settings-common data-prts-settings-section="interaction" role="tabpanel" id="prts-page-interaction" aria-labelledby="prts-tab-interaction" tabindex="0" hidden>
             <header data-prts-section-heading><strong>交互</strong><small>光标、导航栏与动态反馈</small></header>
             <div data-prts-settings-common-grid>
               ${COMMON_CONTROLS.filter(([key]) => ['cursor', 'railDefaultHidden', 'motion'].includes(key)).map(([key, label, options]) => settingButtons(key, label, options)).join('')}
             </div>
           </section>
-          <section data-prts-settings-common data-prts-settings-section="flow" tabindex="-1">
+          <section data-prts-settings-common data-prts-settings-section="flow" role="tabpanel" id="prts-page-flow" aria-labelledby="prts-tab-flow" tabindex="0" hidden>
             <header data-prts-section-heading><strong>会话流线</strong><small>当前会话的流线与辉光</small></header>
             <div data-prts-settings-common-grid>
               ${COMMON_CONTROLS.filter(([key]) => ['sessionFlow', 'sessionGlow', 'sessionFlowPalette'].includes(key)).map(([key, label, options]) => settingButtons(key, label, options)).join('')}
@@ -160,9 +179,10 @@ export function themeSettingsMarkup() {
             </div>
           </section>
 
-          <details data-prts-settings-advanced data-prts-settings-section="particles" tabindex="-1">
-            <summary data-prts-section-heading><span><strong>粒子效果</strong><small>徽记精度与跟随移动速度</small></span><output data-prts-advanced-summary>标准 / 1×</output></summary>
+          <section data-prts-settings-advanced data-prts-settings-section="particles" role="tabpanel" id="prts-page-particles" aria-labelledby="prts-tab-particles" tabindex="0" hidden>
+            <header data-prts-section-heading><span><strong>粒子效果</strong><small>徽记精度与跟随移动速度</small></span><output data-prts-advanced-summary>标准 / 1×</output></header>
             <div data-prts-settings-advanced-content>
+              ${customEmblemMarkup()}
               <section data-prts-particle-detail>
                 <header><strong>粒子精度</strong><span>同时调整会话与新会话徽记</span></header>
                 <div role="radiogroup" aria-label="粒子精度">${particleMarkup()}</div>
@@ -173,25 +193,11 @@ export function themeSettingsMarkup() {
                 <span data-prts-particle-error role="alert" hidden>粒子资源加载异常，主题已使用静态后备效果</span>
               </section>
             </div>
-          </details>
+          </section>
 
-          <footer data-prts-settings-actions>
-            <div data-prts-persistence-error hidden role="alert">
-              <span><strong>仅本次会话生效</strong><small>无法写入本地设置，当前视觉效果仍会保留。</small></span>
-              <button type="button" data-prts-retry-save>重试保存</button>
-            </div>
-            <div data-prts-reset-zone>
-              <span><strong>恢复主题默认</strong><small>保留主题开关和启动动画设置</small></span>
-              <button type="button" data-prts-reset-visual>恢复默认</button>
-              <div data-prts-reset-confirm hidden role="group" aria-label="确认恢复主题默认">
-                <span>确认恢复全部主题参数？</span>
-                <button type="button" data-prts-reset-confirm-action>确认恢复</button>
-                <button type="button" data-prts-reset-cancel>取消</button>
-              </div>
-            </div>
-          </footer>
         </div>
         </div>
+
       </div>
     </dialog>`
 }
@@ -201,6 +207,7 @@ export function createThemeSettingsOverlay({
   trigger,
   panel,
   backdrop,
+  customEmblemStore,
   onOpen = () => {},
   onPreferenceChange = () => {},
   onPreferencePreview = () => {},
@@ -208,6 +215,7 @@ export function createThemeSettingsOverlay({
   onRetrySave = () => {},
 }) {
   const window = document?.defaultView
+  const customEditor = mountCustomEmblemEditor({ panel, window, store: customEmblemStore })
   const transparencyMedia = window?.matchMedia?.('(prefers-reduced-transparency: reduce)')
   const motionMedia = window?.matchMedia?.('(prefers-reduced-motion: reduce)')
   const nativeModal = typeof panel?.showModal === 'function' && typeof panel?.close === 'function'
@@ -519,19 +527,25 @@ export function createThemeSettingsOverlay({
     }, 300)
   }
 
-  function syncSectionNavigation() {
+  let activeSection = 'appearance'
+  const sectionScroll = new Map()
+  function selectSection(key, focus = false) {
     const scroller = panel?.querySelector('[data-prts-theme-settings-scroll]')
-    if (!scroller || !scroller.clientHeight) return
-    const sections = [...panel.querySelectorAll('[data-prts-settings-section]')]
-    const top = scroller.getBoundingClientRect().top + 32
-    let current = sections[0]
-    for (const section of sections) {
-      if (section.getBoundingClientRect().top <= top) current = section
+    const section = panel?.querySelector(`[data-prts-settings-section="${key}"]`)
+    if (!scroller || !section) return
+    if (key !== activeSection) {
+      sectionScroll.set(activeSection, scroller.scrollTop)
+      customEditor.cancelReorder?.()
+      for (const page of panel.querySelectorAll('[data-prts-settings-section]')) page.hidden = page !== section
+      activeSection = key
+      scroller.scrollTop = sectionScroll.get(key) || 0
+      setResetConfirmation(false)
     }
-    if (scroller.scrollTop > 0 && scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2) current = sections.at(-1)
-    for (const button of panel.querySelectorAll('[data-prts-settings-jump]')) {
-      if (button.dataset.prtsSettingsJump === current?.dataset.prtsSettingsSection) button.setAttribute('aria-current', 'location')
-      else button.removeAttribute('aria-current')
+    for (const tab of panel.querySelectorAll('[data-prts-settings-jump]')) {
+      const selected = tab.dataset.prtsSettingsJump === key
+      tab.setAttribute('aria-selected', String(selected))
+      tab.tabIndex = selected ? 0 : -1
+      if (selected && focus) tab.focus({preventScroll:true})
     }
   }
 
@@ -540,14 +554,7 @@ export function createThemeSettingsOverlay({
     const target = event.target?.closest?.('button')
     if (!target) return
     if (target.hasAttribute('data-prts-settings-jump')) {
-      const section = panel.querySelector(`[data-prts-settings-section="${target.dataset.prtsSettingsJump}"]`)
-      const scroller = panel.querySelector('[data-prts-theme-settings-scroll]')
-      if (section && scroller) {
-        if (section.tagName === 'DETAILS') section.open = true
-        scroller.scrollTo?.({ top: target.dataset.prtsSettingsJump === 'appearance' ? 0 : scroller.scrollTop + section.getBoundingClientRect().top - scroller.getBoundingClientRect().top - 16, behavior: 'instant' })
-        section.focus?.({ preventScroll: true })
-        syncSectionNavigation()
-      }
+      selectSection(target.dataset.prtsSettingsJump)
       return
     }
     if (target.hasAttribute('data-prts-theme-settings-close')) { setOpen(false); return }
@@ -615,6 +622,16 @@ export function createThemeSettingsOverlay({
 
   function onKeydown(event) {
     if (!isOpen) return
+    const tab = event.target.closest?.('[data-prts-settings-jump]')
+    if (tab && ['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Home','End'].includes(event.key)) {
+      event.preventDefault()
+      const tabs = [...panel.querySelectorAll('[data-prts-settings-jump]')]
+      const index = tabs.indexOf(tab)
+      const next = event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length-1
+        : (index + (['ArrowRight','ArrowDown'].includes(event.key) ? 1 : -1) + tabs.length) % tabs.length
+      selectSection(tabs[next].dataset.prtsSettingsJump, true)
+      return
+    }
     if (event.key === 'Escape') { event.preventDefault(); setOpen(false); return }
     if (nativeModal || event.key !== 'Tab') return
     const nodes = focusable()
@@ -642,8 +659,7 @@ export function createThemeSettingsOverlay({
 
   trigger?.addEventListener('click', toggle)
   panel?.addEventListener('click', onPanelClick)
-  panel?.querySelector('[data-prts-theme-settings-scroll]')?.addEventListener('scroll', syncSectionNavigation, { passive: true })
-  panel?.querySelector('[data-prts-settings-jump]')?.setAttribute('aria-current', 'location')
+  selectSection('appearance')
   panel?.addEventListener('cancel', onCancel)
   panel?.addEventListener('input', onPanelInput)
   panel?.addEventListener('change', commitFromControl)
@@ -670,6 +686,7 @@ export function createThemeSettingsOverlay({
     close: () => setOpen(false),
     toggle,
     dispose() {
+      customEditor.dispose()
       isOpen = false
       hidePanel()
       if (savedTimer !== undefined) window?.clearTimeout?.(savedTimer)
@@ -678,7 +695,6 @@ export function createThemeSettingsOverlay({
       trigger?.setAttribute('aria-expanded', 'false')
       trigger?.removeEventListener('click', toggle)
       panel?.removeEventListener('click', onPanelClick)
-      panel?.querySelector('[data-prts-theme-settings-scroll]')?.removeEventListener('scroll', syncSectionNavigation)
       panel?.removeEventListener('cancel', onCancel)
       panel?.removeEventListener('input', onPanelInput)
       panel?.removeEventListener('change', commitFromControl)

package/src/index.js

@@ -1,4 +1,16 @@
+import { join } from 'node:path'
+import { homedir } from 'node:os'
+import { createEmblemService } from './server/emblems.js'
+import { emblemTools } from './server/tools.js'
+import { registerEmblemApi } from './server/api.js'
 export const PACKAGE_ID = '@ash-qw/dsh-theme-prts'
 export const THEME_PLUGIN_ID = 'dsh-theme-prts'
+export const inject = ['tools', 'attachments', 'connection', 'webServer']
 
-export function apply() {}
+export async function apply(ctx) {
+  const directory=join(process.env.DSH_HOME?.trim() || join(homedir(),'.dsh'),'plugins','dsh-theme-prts','emblems')
+  const service=await createEmblemService(directory)
+  const disposers=emblemTools(service,ctx.attachments).map(tool=>ctx.tools.register(tool))
+  disposers.push(registerEmblemApi(ctx,service))
+  ctx.on('dispose',()=>{for(const dispose of disposers.reverse())dispose()})
+}

package/src/server/api.js

@@ -0,0 +1,54 @@
+import { API, draftView, fault } from './emblems.js'
+
+async function body(req) {
+  const chunks=[];let size=0
+  for await(const chunk of req){size+=chunk.length;if(size>16*1024*1024)throw fault(413,'请求过大');chunks.push(chunk)}
+  try{return JSON.parse(Buffer.concat(chunks).toString('utf8'))}catch{throw fault(400,'请求数据无效')}
+}
+function json(res,status,value){res.writeHead(status,{'content-type':'application/json; charset=utf-8','cache-control':'no-store'});res.end(JSON.stringify(value))}
+export function registerEmblemApi(ctx,service) {
+  const streams=new Set()
+  const dispose=ctx.webServer.register({kind:'prefix',path:API,handler:async(req,res)=>{
+    try {
+      const admission=ctx.connection.admit(req)
+      if('rejection' in admission){json(res,401,{error:'请先登录 DSH'});return}
+      const path=new URL(req.url,'http://localhost').pathname.slice(API.length)
+      if(req.method==='GET'&&path==='/events') {
+        res.writeHead(200,{'content-type':'text/event-stream','cache-control':'no-cache','x-accel-buffering':'no'})
+        streams.add(res)
+        const send=revision=>res.write(`data: ${JSON.stringify({revision})}\n\n`)
+        const unsubscribe=service.subscribe(send)
+        send(service.snapshot().revision)
+        const heartbeat=setInterval(()=>res.write(': heartbeat\n\n'),25000)
+        res.on('close',()=>{clearInterval(heartbeat);unsubscribe();streams.delete(res)})
+        return
+      }
+      if(req.method==='GET'&&path==='/configuration'){json(res,200,service.snapshot());return}
+      const exported=path.match(/^\/draft\/([a-zA-Z0-9-]+)\/export$/)
+      if(req.method==='GET'&&exported){json(res,200,await service.exportAsset(exported[1]));return}
+      const match=path.match(/^\/draft\/([a-zA-Z0-9-]+)(?:\/(preview\.png|source))?$/)
+      if(req.method==='GET'&&match){
+        if(!match[2]){const d=await service.draft(match[1]);json(res,200,{...draftView(d),value:d.value});return}
+        const bytes=await service.image(match[1],match[2]==='source')
+        res.writeHead(200,{'content-type':match[2]==='source'?'application/octet-stream':'image/png','cache-control':'private, max-age=3600','x-content-type-options':'nosniff'});res.end(bytes);return
+      }
+      if(req.method!=='POST')throw fault(404,'接口不存在')
+      if(req.headers['x-prts-request']!=='1')throw fault(403,'缺少请求标识')
+      const controller=new AbortController()
+      res.on('close',()=>{if(!res.writableEnded)controller.abort(new Error('请求已取消'))})
+      const data=await body(req)
+      if(path==='/configuration'){json(res,200,await service.save(data.configuration,data.revision,controller.signal));return}
+      if(path==='/import'){
+        const d=await service.importAsset(data,controller.signal)
+        json(res,200,{...draftView(d),value:d.value});return
+      }
+      if(path==='/preview'){
+        if(data.image && (typeof data.image!=='string'||! /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/.test(data.image)))throw fault(400,'图片编码无效')
+        const d=await service.preview({bytes:data.image?Buffer.from(data.image,'base64'):undefined,baseId:data.draftId,params:data.params,label:data.label},controller.signal)
+        json(res,200,{...draftView(d),value:d.value});return
+      }
+      throw fault(404,'接口不存在')
+    }catch(error){if(!res.headersSent)json(res,error.status||500,{error:error.message});else res.end()}
+  }})
+  return()=>{dispose();for(const res of streams)res.end();streams.clear()}
+}