@ash-qw/dsh-theme-prts 2.6.0 → 2.6.1

package/src/client/cursor-follower.js

@@ -0,0 +1,271 @@
+import MouseFollower from 'mouse-follower'
+import { gsap } from 'gsap'
+import { createCursorSemantics } from './cursor-semantics.js'
+import { createCursorAdapter as createNativeCursorAdapter } from './cursor-adapter.js'
+
+// Mouse Follower owns the isolated DOM renderer. Use our Pointer Events lifecycle
+// instead of its mouse/tween listeners: no easing, axis-dependent ticker or idle loop.
+class DirectFollower extends MouseFollower {
+  bind() {}
+}
+MouseFollower.registerGSAP(gsap)
+
+export function createCursorAdapter({document, window, assets}) {
+  const native = createNativeCursorAdapter({document, window, assets})
+  const root = document.documentElement
+  let follower, img, point, moveFrame, timer, family, resting, pressed = false, phase
+  let semantics, captureTarget, layerContext, stateObserver, watchedTarget, nativePicker
+  let textContext, renderedX, renderedY
+  let eventTarget, semanticTarget, semanticValue, pose, poseKind, dirty = true, hitDirty = true
+  let suspended = false, visible = false, currentUrl, ready = false
+  const staticPose=(rest,hotspot)=>({rest,hotspot})
+  const vectorPose=path=>staticPose('data:image/svg+xml,'+encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="'+path+'" fill="none" stroke="#101820" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="'+path+'" fill="none" stroke="#eee8dc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'),[16,16])
+
+  const poses={
+    move:vectorPose('M16 3V29M3 16H29M12 7L16 3L20 7M12 25L16 29L20 25M7 12L3 16L7 20M25 12L29 16L25 20'),
+    crosshair:vectorPose('M16 4V12M16 20V28M4 16H12M20 16H28M16 15V17'),
+    text:staticPose(assets?.text,assets?.textHotspot),grab:staticPose(assets?.grab,[22,19]),
+    grabbing:staticPose(assets?.grabbing,[22,19]),unavailable:staticPose(assets?.unavailable,[7,7]),
+    ...Object.fromEntries(Object.entries(assets?.resize || {}).map(([key,url])=>[key,staticPose(url,[16,16])])),
+  }
+  const resizeKinds={'n-resize':'ns','s-resize':'ns','ns-resize':'ns','row-resize':'ns',
+    'e-resize':'ew','w-resize':'ew','ew-resize':'ew','col-resize':'ew',
+    'ne-resize':'nesw','sw-resize':'nesw','nesw-resize':'nesw',
+    'nw-resize':'nwse','se-resize':'nwse','nwse-resize':'nwse'}
+  const reduced = () => root.dataset.prtsMotion === 'reduced' || window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+  function stop() {
+    if (timer !== undefined) window.clearTimeout(timer)
+    timer = undefined
+    pressed = false
+    phase = undefined
+  }
+  function hide() {
+    stop()
+    if (follower) {
+      if(follower.el.matches(':popover-open'))follower.el.hidePopover()
+      follower.el.hidden = true
+    }
+    root.removeAttribute('data-prts-follower-visible')
+    semantics?.release()
+    layerContext=undefined
+    stateObserver?.disconnect();watchedTarget=undefined
+    visible = false
+    semanticTarget=pose=poseKind=textContext=renderedX=renderedY=undefined;dirty=true
+  }
+  function draw(url) {
+    if (!img || !url || currentUrl === url) return
+    currentUrl = url
+    img.src = url
+  }
+  function play(frames, done) {
+    if(timer !== undefined) window.clearTimeout(timer)
+    const started = window.performance.now()
+    const tick = () => {
+      timer = undefined
+      if (!visible) return
+      const elapsed = window.performance.now()-started
+      let index=0, deadline=frames[0].duration
+      while(index<frames.length-1 && elapsed>=deadline) deadline+=frames[++index].duration
+      if(index===frames.length-1){done();return}
+      draw(frames[index].url)
+      timer=window.setTimeout(tick, Math.max(1,deadline-(window.performance.now()-started)))
+    }
+    tick()
+  }
+  function release() {
+    phase='release'
+    play(family.release,()=>{stop();sync()})
+  }
+  function sync() {
+    if (!follower || !ready || !point || nativePicker || suspended || document.hidden || document.pointerLockElement) return hide()
+    const hit=hitDirty || !eventTarget?.isConnected ? document.elementFromPoint(point.x,point.y) : eventTarget
+    eventTarget=hit;hitDirty=false
+    if(!hit || hit.closest('iframe'))return hide()
+    const target=captureTarget?.isConnected?captureTarget:hit
+    if(target!==watchedTarget){
+      stateObserver.disconnect();watchedTarget=target
+      for(let el=target;el;el=el.parentElement)stateObserver.observe(el,{attributes:true,
+        attributeFilter:['style','class','disabled','aria-disabled','open','data-dragging','data-prts-emblem-sort-active','data-markdown','data-slot','data-phase','data-chat-flow-kind','data-message-role','data-submission-echo','data-pending-steering']})
+    }
+    if(dirty || target!==semanticTarget){
+      semanticValue=semantics.read(target)
+      textContext=undefined
+      semanticTarget=target;dirty=false
+    }
+    const raw=semanticValue
+    const kind=raw.split(',').at(-1).trim()
+    let nextFamily=assets
+    if(kind==='none'){
+      stop();follower.el.hidden=true
+      root.setAttribute('data-prts-follower-visible','');visible=true
+      return
+    }
+    if(kind==='pointer')nextFamily=assets.link
+    else if(['text','vertical-text'].includes(kind))nextFamily=poses.text
+    else if(resizeKinds[kind])nextFamily=poses[resizeKinds[kind]]
+    else if(['grab','grabbing','move','crosshair','cell'].includes(kind))nextFamily=poses[kind==='cell'?'crosshair':kind]
+    else if(kind==='not-allowed'||kind==='no-drop')nextFamily=poses.unavailable
+    else {
+      textContext ||= native.prepareTextHit(target)
+      if(native.textHit({target,clientX:point.x,clientY:point.y,pointerType:'mouse'},textContext))nextFamily=poses.text
+    }
+    if(family!==nextFamily && (!phase || !family?.press || !nextFamily.press)){stop();family=nextFamily}
+    resting=family.rest
+    const [x,y]=family.hotspot
+    if(pose!==family || poseKind!==kind){
+      img.style.left=-x+'px';img.style.top=-y+'px'
+      img.style.transform=kind==='vertical-text'?'rotate(90deg)':''
+      pose=family;poseKind=kind
+    }
+    if(!phase)draw(resting)
+    if(renderedX!==point.x || renderedY!==point.y){
+      follower.pos.x=point.x;follower.pos.y=point.y
+      follower.render(true)
+      renderedX=point.x;renderedY=point.y
+    }
+    follower.el.hidden=false
+    // A manual popover is non-interactive and stays above modal/top-layer UI.
+    const context=hit.closest('dialog,[popover]') || document.fullscreenElement
+    if(follower.el.showPopover && (!visible || context!==layerContext)){
+      if(context!==layerContext && follower.el.matches(':popover-open'))follower.el.hidePopover()
+      if(!follower.el.matches(':popover-open'))follower.el.showPopover()
+    }
+    layerContext=context
+    if(!visible)root.setAttribute('data-prts-follower-visible','')
+    visible=true
+  }
+  function flush() { moveFrame=undefined;sync() }
+  function move(event) {
+    if(event.pointerType!=='mouse')return
+    resumePicker(event)
+    if(suspended && !event.buttons)suspended=false
+    const unchanged=point?.x===event.clientX && point?.y===event.clientY && eventTarget===event.target
+    eventTarget=event.target;hitDirty=false
+    point={x:event.clientX,y:event.clientY}
+    if(pressed && !(event.buttons&1)){stop();draw(resting)}
+    if(!unchanged || dirty)if(moveFrame===undefined)moveFrame=window.requestAnimationFrame(flush)
+  }
+  function down(event) {
+    if(event.pointerType!=='mouse'){reset();return}
+    if(event.button!==0||event.isPrimary===false)return
+    const picker=event.target.closest?.('select,input[type="file"],input[type="color"]')
+    if(picker){nativePicker=picker;reset();return}
+    nativePicker=undefined
+    stop();dirty=true;eventTarget=event.target;hitDirty=false;point={x:event.clientX,y:event.clientY};sync()
+    if(!visible || follower.el.hidden)return
+    if(!family?.press)return
+    stop();pressed=true
+    if(reduced()){phase='hold';draw(family.hold);return}
+    phase='press'
+    play(family.press,()=>{
+      phase='hold';draw(family.hold)
+      if(!pressed)timer=window.setTimeout(release,48)
+    })
+  }
+  // Boundary updates only change the shared renderer's image; the browser
+  // cursor stays hidden throughout. Ordinary movement remains coalesced.
+  // Native pickers do not expose a reliable close event (including Escape).
+  // Resume only on pointer activity outside their owning control; refreshes
+  // and pointer activity on the select must never resurrect the overlay.
+  function resumePicker(event){
+    if(nativePicker && !nativePicker.contains(event.target))nativePicker=undefined
+  }
+  function keydown(event){
+    const picker=event.target.closest?.('select,input[type="file"],input[type="color"]')
+    if(picker && [' ','Enter','ArrowDown','ArrowUp','F4'].includes(event.key)){nativePicker=picker;reset()}
+  }
+  function over(event) {
+    if(event.pointerType!=='mouse')return
+    resumePicker(event)
+    if(moveFrame!==undefined)window.cancelAnimationFrame(moveFrame)
+    moveFrame=undefined
+    dirty=true;eventTarget=event.target;hitDirty=false
+    point={x:event.clientX,y:event.clientY}
+    sync()
+  }
+  function up(event) {
+    if(event.pointerType!=='mouse'||event.button!==0||!pressed)return
+    pressed=false;dirty=true
+    if(reduced()){stop();draw(resting);return}
+    if(phase!=='press')release()
+  }
+  function reset() {
+    if(moveFrame!==undefined)window.cancelAnimationFrame(moveFrame)
+    moveFrame=undefined;point=undefined;eventTarget=undefined;hitDirty=true;captureTarget=undefined;hide()
+  }
+  function blur(event){if(event.target===window)reset()}
+  function leave(event){if(!event.relatedTarget || event.relatedTarget.closest?.('iframe'))reset()}
+  function drag(){suspended=true;reset()}
+  function visibility(){if(document.hidden)reset()}
+  // Passive changes can also move elements beneath a stationary pointer.
+  // Re-hit then; ordinary pointer events already carry the browser's result.
+  function refresh(){
+    dirty=true;hitDirty=true
+    if(point && moveFrame===undefined)moveFrame=window.requestAnimationFrame(flush)
+  }
+  function capture(event){captureTarget=event.target;refresh()}
+  function uncapture(event){captureTarget=undefined;refresh(event)}
+  const events=[['pointermove',move],['pointerover',over],['pointerdown',down],['pointerup',up],
+    ['pointercancel',reset],['pointerout',leave],['blur',blur],['dragstart',drag],
+    ['scroll',refresh],['resize',refresh],['focusin',refresh],['click',refresh],
+    ['gotpointercapture',capture],['lostpointercapture',uncapture],['contextmenu',drag],['keydown',keydown]]
+  function disposeFollower(){
+    reset()
+    for(const [name,fn]of events)window.removeEventListener(name,fn,true)
+    document.removeEventListener('visibilitychange',visibility)
+    document.removeEventListener('fullscreenchange',reset)
+    document.removeEventListener('pointerlockchange',reset)
+    if(follower){
+      window.clearTimeout(follower.visibleInt)
+      gsap.killTweensOf(follower.pos)
+      follower.destroy()
+    }
+    semantics?.dispose();semantics=undefined
+    stateObserver?.disconnect();stateObserver=watchedTarget=undefined
+    follower=img=family=currentUrl=undefined
+    ready=false
+    suspended=false
+    nativePicker=undefined
+  }
+  return {
+    update(preferences){
+      const experimental=preferences.enabled && preferences.cursor==='prts-follower'
+      native.update({...preferences,enabled:preferences.enabled && !experimental})
+      if(!experimental){disposeFollower();return}
+      if(follower)return
+      follower=new DirectFollower({container:document.body,eventsTarget:document.documentElement,
+        className:'prts-cursor-follower',innerClassName:'prts-cursor-follower-inner',
+        speed:0,ease:'none',skewing:0,stateDetection:{},dataAttr:null,
+        visible:false,hideOnLeave:false,showTimeout:0,hideTimeout:0})
+      gsap.ticker.remove(follower.ticker)
+      stateObserver=new window.MutationObserver(refresh)
+      semantics=createCursorSemantics({document,window,onChange:refresh})
+      follower.el.setAttribute('popover','manual')
+      follower.el.hidden=true
+      follower.el.setAttribute('aria-hidden','true')
+      // Keep the native cursor until decoding finishes; setting src alone
+      // does not guarantee the first displayed frame is ready to paint.
+      const instance=follower, decoded=[]
+      for(const group of [assets,assets.link])for(const url of [group.rest,group.hold,...group.press.map(f=>f.url),...group.release.map(f=>f.url)]){
+        const image=new window.Image();image.src=url
+        decoded.push(image.decode())
+      }
+      for(const url of [...Object.values(assets.resize || {}),assets.text,assets.grab,assets.grabbing,assets.unavailable,poses.move.rest,poses.crosshair.rest]){
+        const image=new window.Image();image.src=url;decoded.push(image.decode())
+      }
+      img=document.createElement('img');img.alt='';img.draggable=false
+      follower.inner.append(img)
+      for(const [name,fn]of events)window.addEventListener(name,fn,true)
+      document.addEventListener('visibilitychange',visibility)
+      document.addEventListener('fullscreenchange',reset)
+      document.addEventListener('pointerlockchange',reset)
+      Promise.all(decoded).then(()=>{
+        if(follower!==instance)return
+        ready=true
+        sync()
+      }).catch(()=>{if(follower===instance)hide()})
+    },
+    dispose(){disposeFollower();native.dispose()},
+  }
+}

package/src/client/cursor-semantics.js

@@ -0,0 +1,74 @@
+// Preserve the host's cursor cascade as metadata while the experimental
+// renderer suppresses the browser cursor. No hide/read/show cycle per move.
+export function createCursorSemantics({document, window, onChange = () => {}}) {
+  const property='--prts-source-cursor'
+  const sheet=document.createElement('style')
+  sheet.dataset.prtsCursorSemantics=''
+  const inline=new Map()
+  let pending, disposed=false
+  function serialize(rules) {
+    let result=''
+    for(const rule of rules){
+      if(rule.selectorText?.includes('data-prts-follower-visible'))continue
+      const value=rule.style?.getPropertyValue('cursor')
+      const own=value?`${property}:${value}${rule.style.getPropertyPriority('cursor')?' !important':''};`:''
+      const children=rule.cssRules?serialize(rule.cssRules):''
+      if(!own&&!children)continue
+      if(rule.selectorText)result+=`${rule.selectorText}{${own}${children}}`
+      else if(rule.conditionText || /^@(media|supports|layer|container|scope)\b/.test(rule.cssText))result+=`${rule.cssText.slice(0,rule.cssText.indexOf('{'))}{${children}}`
+    }
+    return result
+  }
+  function rebuild(){
+    pending=undefined
+    if(disposed)return
+    let text=''
+    for(const source of document.styleSheets){
+      if(source.ownerNode===sheet || source.disabled)continue
+      try{
+        const rules=serialize(source.cssRules)
+        const media=source.media?.mediaText
+        text+=media?`@media ${media}{${rules}}`:rules
+      }catch{ /* Cross-origin sheets are not readable; semantic fallbacks remain. */ }
+    }
+    if(sheet.textContent!==text){sheet.textContent=text;onChange()}
+  }
+  function schedule(){if(!disposed && pending===undefined)pending=window.requestAnimationFrame(rebuild)}
+  function loaded(event){if(event.target?.matches?.('link[rel~="stylesheet"]'))schedule()}
+  const observer=new window.MutationObserver(records=>{
+    if(records.some(r=>r.target!==sheet && !sheet.contains(r.target)))schedule()
+  })
+  document.head.append(sheet)
+  rebuild()
+  observer.observe(document.head,{subtree:true,childList:true,characterData:true,attributes:true,attributeFilter:['disabled','media','href']})
+  document.addEventListener('load',loaded,true)
+  function restore(el,record){
+    if(el.style.getPropertyValue(property)===record.applied){
+      if(record.original)el.style.setProperty(property,record.original,record.priority)
+      else el.style.removeProperty(property)
+    }
+    if(record.masked && el.style.cursor==='none' && el.style.getPropertyPriority('cursor')==='important')el.style.setProperty('cursor',record.source,'important')
+  }
+  function read(target){
+    // Inline cursor updates (e.g. a body-wide resize gesture) outrank stylesheet
+    // rules. Mirror only the hit ancestry, without scanning the subtree.
+    const ancestry=new Set()
+    for(let el=target;el;el=el.parentElement){
+      ancestry.add(el)
+      let value=el.style.getPropertyValue('cursor'),priority=el.style.getPropertyPriority('cursor')
+      const old=inline.get(el)
+      if(old?.masked && value==='none' && priority==='important')value=old.source
+      if(!value){if(old){restore(el,old);inline.delete(el)}continue}
+      if(old && old.source===value && old.sourcePriority===priority)continue
+      if(old)restore(el,old)
+      const record={original:el.style.getPropertyValue(property),priority:el.style.getPropertyPriority(property),source:value,sourcePriority:priority,applied:value,masked:priority==='important'}
+      el.style.setProperty(property,value,priority)
+      if(record.masked)el.style.setProperty('cursor','none','important')
+      inline.set(el,record)
+    }
+    for(const [el,record]of inline)if(!ancestry.has(el)){restore(el,record);inline.delete(el)}
+    return window.getComputedStyle(target).getPropertyValue(property).trim()
+  }
+  function release(){for(const [el,record]of inline)restore(el,record);inline.clear()}
+  return {read,release,dispose(){disposed=true;observer.disconnect();document.removeEventListener('load',loaded,true);if(pending!==undefined)window.cancelAnimationFrame(pending);release();sheet.remove()}}
+}

package/src/client/page-controls.js

@@ -0,0 +1,185 @@
+// Keep the existing form values/events as the model; render interactive UI in
+// the page so native popup windows never take ownership of the cursor.
+export function mountPageControls({panel,window}){
+  // Keep native controls usable in hosts without the popover API.
+  if(!panel || !window || typeof window.HTMLElement.prototype.showPopover!=='function')return {dispose(){}}
+  const document=panel.ownerDocument, cleanups=[]
+  let active, tooltip, tipTarget, originalDescription, restoringFocus=false, sequence=0
+  const hideTip=()=>{
+    if(!tooltip)return
+    tooltip.hidePopover();tooltip.remove();tooltip=undefined
+    if(originalDescription===null)tipTarget.removeAttribute('aria-describedby')
+    else tipTarget.setAttribute('aria-describedby',originalDescription)
+    tipTarget=undefined
+  }
+  const showTip=(target,text,anchor=target)=>{
+    hideTip()
+    if(!text)return
+    tooltip=document.createElement('div');tooltip.className='prts-page-tooltip'
+    tooltip.setAttribute('popover','manual');tooltip.setAttribute('role','tooltip')
+    tooltip.id='prts-control-tip-'+(++sequence);tooltip.textContent=text
+    tipTarget=target;originalDescription=target.getAttribute('aria-describedby')
+    target.setAttribute('aria-describedby',tooltip.id)
+    const container=target.closest('dialog') || panel;container.append(tooltip);tooltip.showPopover()
+    const rect=anchor.getBoundingClientRect(),size=tooltip.getBoundingClientRect()
+    const right=anchor!==target && rect.right+size.width+8<=window.innerWidth-8
+    tooltip.style.left=Math.max(8,Math.min(right?rect.right+8:rect.left,window.innerWidth-size.width-8))+'px'
+    const top=right?rect.top:rect.bottom+size.height+14<=window.innerHeight?rect.bottom+6:rect.top-size.height-6
+    tooltip.style.top=Math.max(8,Math.min(top,window.innerHeight-size.height-8))+'px'
+  }
+  const close=(focus=false)=>{
+    hideTip()
+    if(!active)return
+    const {popup,button}=active;active=undefined
+    popup.hidePopover();popup.remove();button.setAttribute('aria-expanded','false');button.removeAttribute('aria-controls')
+    if(focus){
+      restoringFocus=true
+      try{button.focus({preventScroll:true})}finally{restoringFocus=false}
+    }
+  }
+  const open=(button,role)=>{
+    close()
+    const popup=document.createElement('div')
+    popup.className='prts-page-popup';popup.setAttribute('popover','manual')
+    popup.setAttribute('role',role);popup.id='prts-page-popup-'+(++sequence)
+    popup.setAttribute('aria-label',button.getAttribute('aria-label'))
+    const container=button.closest('dialog') || panel
+    container.append(popup)
+    button.setAttribute('aria-controls',popup.id);button.setAttribute('aria-expanded','true')
+    active={popup,button}
+    popup.addEventListener('keydown',e=>{
+      e.stopPropagation()
+      if(e.key==='Escape'){e.preventDefault();close(true)}
+      if(e.key==='Tab' && role==='listbox')close(true)
+    })
+    return popup
+  }
+  const present=(popup,button)=>{
+    popup.showPopover()
+    const rect=button.getBoundingClientRect()
+    popup.style.minWidth=Math.min(260,Math.max(160,rect.width))+'px'
+    const size=popup.getBoundingClientRect()
+    popup.style.left=Math.max(8,Math.min(rect.left,window.innerWidth-size.width-8))+'px'
+    popup.style.top=Math.max(8,rect.bottom+size.height+6>window.innerHeight?rect.top-size.height-6:rect.bottom+6)+'px'
+  }
+  for(const control of panel.querySelectorAll('select,input[type="color"][data-prts-setting-color]')){
+    // A label forwards both hover and activation to its first button, making
+    // the entire settings row look clickable. These controls name themselves.
+    const label=control.parentElement
+    if(label.tagName==='LABEL'){
+      const row=document.createElement('div')
+      for(const {name,value} of label.attributes)row.setAttribute(name,value)
+      row.setAttribute('data-prts-page-control-row','')
+      row.append(...label.childNodes);label.replaceWith(row)
+      cleanups.push(()=>{label.append(...row.childNodes);row.replaceWith(label)})
+    }
+    const isSelect=control.tagName==='SELECT'
+    const button=document.createElement('button')
+    button.type='button';button.className='prts-page-control'
+    button.setAttribute('role',isSelect?'combobox':'button')
+    button.setAttribute('aria-label',control.getAttribute('aria-label') || control.parentElement.firstChild?.textContent?.trim() || '选择')
+    button.setAttribute('aria-haspopup',isSelect?'listbox':'dialog')
+    button.setAttribute('aria-expanded','false')
+    if(control.hasAttribute('aria-describedby'))button.setAttribute('aria-describedby',control.getAttribute('aria-describedby'))
+    const caption=document.createElement('span');caption.className='prts-page-caption';button.append(caption)
+    if(!isSelect && control.closest('[data-prts-session-flow-color-inputs]')){
+      const row=control.parentElement, name=row.querySelector('span'), value=row.querySelector('output')
+      const meta=document.createElement('span');meta.className='prts-page-color-meta'
+      if(name)meta.append(name)
+      if(value)meta.append(value)
+      button.append(meta)
+      cleanups.push(()=>{if(name)control.parentElement.prepend(name);if(value)control.parentElement.append(value)})
+    }
+    if(isSelect && Array.from(control.options).some(o=>o.dataset.description)){
+      const describe=()=>{if(!restoringFocus && active?.button!==button)showTip(button,control.selectedOptions[0]?.dataset.description)}
+      button.addEventListener('pointerenter',describe);button.addEventListener('focus',describe)
+      button.addEventListener('pointerleave',hideTip);button.addEventListener('blur',hideTip)
+      button.addEventListener('pointerdown',hideTip)
+    }
+    control.before(button)
+    control.setAttribute('data-prts-native-model','');control.tabIndex=-1
+    control.setAttribute('aria-hidden','true')
+    const sync=()=>{
+      button.disabled=control.disabled
+      const text=isSelect?(control.selectedOptions[0]?.textContent || ''):''
+      if(caption.textContent!==text){caption.textContent=text;if(tipTarget===button)showTip(button,control.selectedOptions[0]?.dataset.description)}
+      if(!isSelect){button.classList.add('prts-page-color');button.style.setProperty('--sample',control.value);button.title=control.value.toUpperCase()}
+    }
+    // Host updates use .value assignments, which do not emit change events.
+    const descriptor=Object.getOwnPropertyDescriptor(isSelect?window.HTMLSelectElement.prototype:window.HTMLInputElement.prototype,'value')
+    Object.defineProperty(control,'value',{configurable:true,get(){return descriptor.get.call(this)},set(value){descriptor.set.call(this,value);sync()}})
+    const observer=new window.MutationObserver(()=>{sync();if(control.disabled && active?.button===button)close()})
+    observer.observe(control,{attributes:true,childList:true,subtree:true})
+    control.addEventListener('change',sync)
+    const commit=value=>{
+      control.value=value
+      control.dispatchEvent(new window.Event('input',{bubbles:true}))
+      control.dispatchEvent(new window.Event('change',{bubbles:true}))
+    }
+    const show=()=>{
+      if(active?.button===button){close(true);return}
+      const popup=open(button,isSelect?'listbox':'dialog')
+      if(isSelect){
+        const options=Array.from(control.options)
+        const choose=option=>{close(true);commit(option.value)}
+        for(const option of options){
+          const row=document.createElement('button');row.type='button';row.role='option'
+          row.textContent=option.textContent;row.setAttribute('aria-label',option.textContent);row.disabled=option.disabled
+          row.setAttribute('aria-selected',String(option.selected))
+          if(option.dataset.description){
+            const describe=()=>showTip(row,option.dataset.description,popup)
+            row.addEventListener('pointerenter',describe);row.addEventListener('focus',describe)
+            row.addEventListener('pointerleave',hideTip);row.addEventListener('blur',hideTip)
+          }
+          row.addEventListener('click',()=>choose(option));popup.append(row)
+        }
+        popup.addEventListener('keydown',e=>{
+          const rows=Array.from(popup.querySelectorAll('button:not(:disabled)'))
+          let index=rows.indexOf(document.activeElement)
+          if(['ArrowDown','ArrowUp','Home','End'].includes(e.key)){
+            e.preventDefault()
+            index=e.key==='Home'?0:e.key==='End'?rows.length-1:(index+(e.key==='ArrowDown'?1:-1)+rows.length)%rows.length
+            rows[index]?.focus({preventScroll:true})
+          }
+        })
+        present(popup,button)
+        popup.querySelector('[aria-selected="true"]:not(:disabled)')?.focus({preventScroll:true})
+      }else{
+        popup.classList.add('prts-page-color-editor')
+        popup.innerHTML='<strong>自定义颜色</strong><i class="prts-page-sample"></i><label>HEX<input aria-label="HEX 颜色" maxlength="7" spellcheck="false"></label>'+['R','G','B'].map((name,i)=>'<label>'+name+'<input type="range" min="0" max="255" aria-label="'+name+' 通道" data-channel="'+i+'"><output></output></label>').join('')+'<footer><button type="button" data-cancel>取消</button><button type="button" data-apply>应用颜色</button></footer>'
+        let draft=control.value
+        const hex=popup.querySelector('input:not([type])'),ranges=Array.from(popup.querySelectorAll('[type=range]'))
+        const render=()=>{
+          hex.value=draft.toUpperCase();hex.removeAttribute('aria-invalid')
+          popup.querySelector('[data-apply]').disabled=false
+          popup.querySelector('i').style.background=draft
+          ranges.forEach((range,i)=>{range.value=parseInt(draft.slice(1+i*2,3+i*2),16);range.nextElementSibling.textContent=range.value})
+        }
+        hex.addEventListener('input',()=>{
+          const valid=/^#?[0-9a-f]{6}$/i.test(hex.value)
+          hex.setAttribute('aria-invalid',String(!valid));popup.querySelector('[data-apply]').disabled=!valid
+          if(valid){draft='#'+hex.value.replace('#','');render()}
+        })
+        ranges.forEach(range=>range.addEventListener('input',()=>{draft='#'+ranges.map(r=>Number(r.value).toString(16).padStart(2,'0')).join('');render()}))
+        popup.querySelector('[data-cancel]').onclick=()=>close(true)
+        popup.querySelector('[data-apply]').onclick=()=>{close(true);commit(draft)}
+        render();present(popup,button);hex.focus({preventScroll:true})
+      }
+    }
+    button.addEventListener('click',e=>{e.preventDefault();show()})
+    button.addEventListener('keydown',e=>{
+      if(isSelect && ['ArrowDown','ArrowUp','Home','End'].includes(e.key)){e.preventDefault();e.stopPropagation();if(active?.button!==button)show()}
+    })
+    sync()
+    cleanups.push(()=>{observer.disconnect();control.removeEventListener('change',sync);delete control.value;button.remove();control.removeAttribute('data-prts-native-model');control.removeAttribute('aria-hidden');control.removeAttribute('tabindex')})
+  }
+  const outside=e=>{if(active&&!active.popup.contains(e.target)&&!active.button.contains(e.target))close()}
+  const scroll=e=>{if(active && (e.target===document || e.target.contains?.(active.button)) && !active.popup.contains(e.target))close()}
+  document.addEventListener('pointerdown',outside,true)
+  document.addEventListener('focusin',outside,true)
+  const dismiss=()=>close()
+  window.addEventListener('resize',dismiss)
+  document.addEventListener('scroll',scroll,true)
+  panel.addEventListener('close',dismiss,true)
+  return {dispose(){close();cleanups.forEach(fn=>fn());document.removeEventListener('pointerdown',outside,true);document.removeEventListener('focusin',outside,true);window.removeEventListener('resize',dismiss);document.removeEventListener('scroll',scroll,true);panel.removeEventListener('close',dismiss,true)}}
+}

package/src/client/preferences.js

@@ -241,7 +241,7 @@ export function normalizePreferences(value) {
     cornerColor: colorOr(input.cornerColor, DEFAULT_PREFERENCES.cornerColor),
     cornerColorLight: colorOr(input.cornerColorLight, colorOr(input.cornerColor, DEFAULT_PREFERENCES.cornerColor)),
     cornerCustomColorLight: colorOr(input.cornerCustomColorLight, colorOr(input.cornerCustomColor, DEFAULT_PREFERENCES.cornerCustomColor)),
-    cursor: input.cursor === 'system' ? 'system' : DEFAULT_PREFERENCES.cursor,
+    cursor: ['system', 'prts-follower'].includes(input.cursor) ? input.cursor : DEFAULT_PREFERENCES.cursor,
     conversationParticleDensity: enumOr(legacyDensities.conversation, PARTICLE_DENSITIES, particlePreset.conversationParticleDensity),
     heroParticleDensity: enumOr(legacyDensities.hero, PARTICLE_DENSITIES, particlePreset.heroParticleDensity),
     particleTraversalSpeed: particleTraversalSpeedOr(

package/src/client/theme-controller-v2.js

@@ -1,4 +1,4 @@
-import { createCursorAdapter } from './cursor-adapter.js'
+import { createCursorAdapter as createFollowerCursorAdapter } from './cursor-follower.js'
 import { normalizePreferences } from './preferences.js'
 
 export const SCHEME_COMMIT_PROGRESS = .15
@@ -80,7 +80,7 @@ export function createThemeController({ document, window, cssText, service, curs
     return { apply() {}, sync() {}, refresh() {}, setTheme() {}, beginThemeTransition() { return gesture }, toggle() {}, dispose() {} }
   }
 
-  const cursor = createCursorAdapter({ document, window, assets: cursorAssets })
+  const cursor = createFollowerCursorAdapter({ document, window, assets: cursorAssets })
   const root = document.documentElement
   let style
   let disposed = false
@@ -761,7 +761,7 @@ export function createThemeController({ document, window, cssText, service, curs
       root.dataset.prtsTexture = preferences.texture
       root.dataset.prtsGlass = preferences.glass
       root.dataset.prtsMotion = preferences.motion
-      root.dataset.prtsCursor = preferences.cursor
+      root.dataset.prtsCursor = preferences.cursor === 'prts-follower' ? 'prts' : preferences.cursor
       root.dataset.prtsParticlePattern = 'orthogonal'
       root.dataset.prtsSessionFlow = preferences.sessionFlow ? 'on' : 'off'
       root.dataset.prtsSessionGlow = preferences.sessionGlow ? 'on' : 'off'