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

package/src/client/cursor-adapter.js

@@ -0,0 +1,224 @@
+// Keep the native cursor and change its image only during a primary mouse gesture.
+export function createCursorAdapter({ document, window, assets }) {
+  const root = document?.documentElement
+  let listening = false
+  let pointerId
+  let timer
+  let handPhase
+  let gestureAssets = assets
+  let textTarget
+  let lastPoint
+  const contentSelector = '[data-markdown], [data-slot*="markdown" i], [class*="markdown" i], [data-chat-flow-kind="user"] [class$="_bubble"]'
+  const controlSelector = 'a[href], button, summary, input, textarea, select, [contenteditable], [role="button"], [role="toolbar"], [role="tab"]'
+  function clearTextHit() {
+    textTarget?.removeAttribute('data-prts-text-hit')
+    textTarget = undefined
+  }
+  function updateTextHit(event) {
+    const nextTarget = findTextHit(event)
+    if (nextTarget === textTarget) return
+    clearTextHit()
+    textTarget = nextTarget
+    textTarget?.setAttribute('data-prts-text-hit', '')
+  }
+  function findTextHit(event) {
+    if (event.pointerType !== 'mouse') return
+    lastPoint = { clientX: event.clientX, clientY: event.clientY, pointerType: 'mouse' }
+    const target = event.target?.nodeType === 1 ? event.target : event.target?.parentElement
+    const content = target?.closest?.(contentSelector)
+    if (!content?.closest('[data-chat-flow-kind], [data-message-role]') || target.closest(controlSelector)) return
+    const style = window.getComputedStyle(target)
+    if (style.userSelect === 'none' || !style.cursor.includes('data:image/png')) return
+    // Caret APIs return the nearest insertion point even over empty space.
+    // Check its adjacent character rectangles before treating it as a text hit.
+    const caret = document.caretPositionFromPoint?.(event.clientX, event.clientY)
+    const fallback = caret ? undefined : document.caretRangeFromPoint?.(event.clientX, event.clientY)
+    const node = caret?.offsetNode ?? fallback?.startContainer
+    const offset = caret?.offset ?? fallback?.startOffset
+    if (node?.nodeType !== 3 || !content.contains(node) || node.parentElement?.closest(controlSelector)) return
+    if (window.getComputedStyle(node.parentElement).userSelect === 'none') return
+    const range = document.createRange()
+    for (const index of [offset - 1, offset]) {
+      if (index < 0 || index >= node.length) continue
+      range.setStart(node, index)
+      range.setEnd(node, index + 1)
+      for (const rect of range.getClientRects()) {
+        if (rect.width > 0 && event.clientX >= rect.left && event.clientX < rect.right && event.clientY >= rect.top && event.clientY < rect.bottom) {
+          return target
+        }
+      }
+    }
+  }
+  function refreshTextHit() {
+    if (!lastPoint) return
+    updateTextHit({ ...lastPoint, target: document.elementFromPoint(lastPoint.clientX, lastPoint.clientY) })
+  }
+  let resizeTarget
+  let resizeOriginal
+  let resizePriority
+  let resizeApplied
+  function clearResize() {
+    if (resizeTarget && resizeTarget.style.cursor === resizeApplied) {
+      if (resizeOriginal) resizeTarget.style.setProperty('cursor', resizeOriginal, resizePriority)
+      else resizeTarget.style.removeProperty('cursor')
+    }
+    resizeTarget = undefined
+  }
+  function updateResize(event) {
+    if (event.pointerType !== 'mouse' || !assets.resize) return
+    const target = event.target?.nodeType === 1 ? event.target : event.target?.parentElement
+    if (target === resizeTarget && target.style.cursor === resizeApplied) return
+    clearResize()
+    if (!target) return
+    const cursor = window.getComputedStyle(target).cursor
+    const direction = { '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' }[cursor]
+    if (!direction) return
+    resizeTarget = target
+    resizeOriginal = target.style.getPropertyValue('cursor')
+    resizePriority = target.style.getPropertyPriority('cursor')
+    target.style.setProperty('cursor', `url("${assets.resize[direction]}") 16 16, ${cursor}`, resizePriority)
+    resizeApplied = target.style.cursor
+  }
+  const reducedMedia = window?.matchMedia?.('(prefers-reduced-motion: reduce)')
+  let handTarget
+  let handCursor
+  let originalCursor
+  let originalPriority
+  let appliedCursor
+  function restoreHandTarget() {
+    if (handTarget && handTarget.style.cursor === appliedCursor) {
+      if (originalCursor) handTarget.style.setProperty('cursor', originalCursor, originalPriority)
+      else handTarget.style.removeProperty('cursor')
+    }
+    handTarget?.removeAttribute('data-prts-hand-active')
+    handTarget = undefined
+  }
+  // Cursor is inherited. Animating a large container still restyles its subtree.
+  // Keep those background hits static, while controls retain native animation.
+  const maxAnimatedDescendants = 128
+  function canAnimate(target) {
+    return target && target.getElementsByTagName('*').length <= maxAnimatedDescendants
+  }
+  function followHand(target) {
+    if (target === handTarget && target !== textTarget) return
+    restoreHandTarget()
+    if (!canAnimate(target) || !handCursor || target === textTarget) return
+    const cursor = window.getComputedStyle(target).cursor
+    if (!cursor.includes('data:image/png') || /(?:,\s*text|resize)$/.test(cursor)) return
+    handTarget = target
+    originalCursor = target.style.getPropertyValue('cursor')
+    originalPriority = target.style.getPropertyPriority('cursor')
+    target.setAttribute('data-prts-hand-active', '')
+    applyHandFrame()
+  }
+  function applyHandFrame() {
+    if (!handTarget) return
+    handTarget.style.setProperty('cursor', handCursor)
+    appliedCursor = handTarget.style.cursor
+  }
+  function clearTimer() {
+    if (timer !== undefined) window.clearTimeout(timer)
+    timer = undefined
+  }
+  function reset() {
+    clearTimer()
+    pointerId = undefined
+    restoreHandTarget()
+    handCursor = undefined
+    root?.style.removeProperty('--prts-text-frame')
+    handPhase = undefined
+  }
+  function show(url) {
+    const [x, y] = gestureAssets.hotspot
+    handCursor = `url("${url}") ${x} ${y}, pointer`
+    applyHandFrame()
+  }
+  function reduced() {
+    return root.dataset.prtsMotion === 'reduced' || reducedMedia?.matches
+  }
+  function play(frames, done) {
+    clearTimer()
+    let index = 0
+    function next() {
+      timer = undefined
+      // The source ANI ends with a 60-second hold frame. Use the static state instead.
+      if (index >= frames.length - 1) { done(); return }
+      const frame = frames[index++]
+      show(frame.url)
+      timer = window.setTimeout(next, frame.duration)
+    }
+    next()
+  }
+  function down(event) {
+    if (event.pointerType !== 'mouse' || event.button !== 0 || event.isPrimary === false) return
+    updateResize(event)
+    updateTextHit(event)
+    const target = event.target?.nodeType === 1 ? event.target : event.target?.parentElement
+    reset()
+    const cursor = target ? window.getComputedStyle(target).cursor : ''
+    if (!cursor.includes('data:image/png')) return
+    if (/(?:,\s*text|resize)$/.test(cursor) || !canAnimate(target)) return
+    gestureAssets = /,\s*pointer$/.test(cursor) && assets.link ? assets.link : assets
+    pointerId = event.pointerId
+    handCursor = cursor
+    followHand(target)
+    if (reduced()) { clearTimer(); show(gestureAssets.hold); return }
+    handPhase = 'press'
+    play(gestureAssets.press, () => {
+      handPhase = 'hold'
+      show(gestureAssets.hold)
+      // A quick tap must still reach a visible pressed pose before recovering.
+      if (pointerId === undefined) timer = window.setTimeout(releaseHand, 48)
+    })
+  }
+  function releaseHand() {
+    handPhase = 'release'
+    play(gestureAssets.release, reset)
+  }
+  function up(event) {
+    if (pointerId === undefined || event.pointerId !== pointerId || event.button !== 0) return
+    pointerId = undefined
+    if (reduced()) { reset(); return }
+    if (handPhase === 'press') return
+    releaseHand()
+  }
+  function move(event) {
+    updateResize(event)
+    updateTextHit(event)
+    if (handCursor) followHand(event.target?.nodeType === 1 ? event.target : event.target?.parentElement)
+    if (pointerId !== undefined && event.pointerId === pointerId && !(event.buttons & 1)) reset()
+  }
+  function resetInteraction() {
+    reset()
+    clearResize()
+    clearTextHit()
+    lastPoint = undefined
+  }
+  function leave(event) { if (!event.relatedTarget) resetInteraction() }
+  function blur(event) {
+    // Captured element blur also reaches window when focus changes inside the app.
+    if (event.target === window) resetInteraction()
+  }
+  function visibility() { if (document.hidden) resetInteraction() }
+  const events = [['pointerdown', down], ['pointerup', up], ['pointermove', move], ['pointercancel', resetInteraction], ['blur', blur], ['dragstart', resetInteraction], ['pointerout', leave], ['scroll', refreshTextHit], ['resize', refreshTextHit]]
+  function dispose() {
+    resetInteraction()
+    if (!listening) return
+    for (const [name, handler] of events) window.removeEventListener(name, handler, true)
+    document.removeEventListener('visibilitychange', visibility)
+    listening = false
+  }
+  return {
+    update(preferences) {
+      if (!root || !assets || !preferences.enabled || preferences.cursor !== 'prts') { dispose(); return }
+      if (listening) return
+      for (const [name, handler] of events) window.addEventListener(name, handler, true)
+      document.addEventListener('visibilitychange', visibility)
+      listening = true
+    },
+    dispose,
+  }
+}

package/src/client/index.js

@@ -79,6 +79,7 @@ export function applyPrtsPlugin(ctx, environment) {
     window,
     cssText,
     service: themeService,
+    cursorAssets: assets.cursor,
     onTransitionStateChange(active) {
       particleField.setSchemeTransitionActive(active)
     },

package/src/client/preferences.js

@@ -24,6 +24,7 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   glass: 'standard',
   motion: 'system',
   bootAnimation: true,
+  cursor: 'prts',
   conversationParticleDensity: 'sparse',
   heroParticleDensity: 'light',
   particleTraversalSpeed: PARTICLE_TRAVERSAL_SPEED_DEFAULT,
@@ -76,7 +77,7 @@ export const PREFERENCE_GROUPS = Object.freeze({
   background: Object.freeze(['texture']),
   particles: Object.freeze(['conversationParticleDensity', 'heroParticleDensity', 'particleTraversalSpeed']),
   material: Object.freeze(['glass']),
-  accessibility: Object.freeze(['motion', 'bootAnimation']),
+  accessibility: Object.freeze(['motion', 'bootAnimation', 'cursor']),
   navigation: Object.freeze(['railDefaultHidden']),
   conversation: Object.freeze(['sessionFlow', 'sessionGlow', 'sessionFlowPalette', 'sessionFlowColorBack', 'sessionFlowColorCore', 'sessionFlowColorFront', 'sessionFlowSpeed', 'conversationStyle']),
 })
@@ -178,6 +179,7 @@ export function normalizePreferences(value) {
     glass: normalizeGlass(input),
     motion: input.motion === 'full' ? 'system' : enumOr(input.motion, MOTIONS, DEFAULT_PREFERENCES.motion),
     bootAnimation: booleanOr(input.bootAnimation, DEFAULT_PREFERENCES.bootAnimation),
+    cursor: input.cursor === 'system' ? 'system' : 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,3 +1,4 @@
+import { createCursorAdapter } from './cursor-adapter.js'
 import { normalizePreferences } from './preferences.js'
 
 const ROOT_ATTRIBUTES = [
@@ -6,6 +7,7 @@ const ROOT_ATTRIBUTES = [
   'data-prts-texture',
   'data-prts-glass',
   'data-prts-motion',
+  'data-prts-cursor',
   'data-prts-particle-pattern',
   'data-prts-session-flow',
   'data-prts-session-glow',
@@ -67,12 +69,13 @@ function resolveScheme(value) {
   return identity.includes('dark') || identity.includes('night') ? 'dark' : 'light'
 }
 
-export function createThemeController({ document, window, cssText, service, onTransitionStateChange = () => {} }) {
+export function createThemeController({ document, window, cssText, service, cursorAssets, onTransitionStateChange = () => {} }) {
   if (!document || !window) {
     const gesture = { update() {}, finish() {}, cancel() {} }
     return { apply() {}, sync() {}, refresh() {}, setTheme() {}, beginThemeTransition() { return gesture }, toggle() {}, dispose() {} }
   }
 
+  const cursor = createCursorAdapter({ document, window, assets: cursorAssets })
   const root = document.documentElement
   let style
   let disposed = false
@@ -115,6 +118,7 @@ export function createThemeController({ document, window, cssText, service, onTr
   }
 
   function removeOwnedState() {
+    cursor.dispose()
     disposed = true
     refreshRevision += 1
     setRevision += 1
@@ -712,6 +716,7 @@ export function createThemeController({ document, window, cssText, service, onTr
       disposed = false
       const preferences = normalizePreferences(value)
       ensureStyle()
+      cursor.update(preferences)
       if (!preferences.enabled) {
         cancelActiveTransition()
         clearThemeState()
@@ -721,6 +726,7 @@ export function createThemeController({ document, window, cssText, service, onTr
       root.dataset.prtsTexture = preferences.texture
       root.dataset.prtsGlass = preferences.glass
       root.dataset.prtsMotion = preferences.motion
+      root.dataset.prtsCursor = preferences.cursor
       root.dataset.prtsParticlePattern = 'orthogonal'
       root.dataset.prtsSessionFlow = preferences.sessionFlow ? 'on' : 'off'
       root.dataset.prtsSessionGlow = preferences.sessionGlow ? 'on' : 'off'

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

@@ -15,6 +15,7 @@ const PRESET_OPTIONS = [
 ]
 
 const COMMON_CONTROLS = [
+  ['cursor', 'PRTS 光标', [['system', '关闭'], ['prts', '开启']]],
   ['railDefaultHidden', '默认隐藏导航栏', [['false', '关闭'], ['true', '开启']]],
   ['texture', '环境底纹', [['off', '关闭'], ['restrained', '克制'], ['full', '完整']]],
   ['glass', '玻璃材质', [['off', '关闭'], ['soft', '柔和'], ['standard', '标准'], ['clear', '清晰']]],
@@ -52,6 +53,10 @@ function settingButtons(key, label, options) {
       : key === 'sessionFlowPalette'
         ? '<small data-prts-setting-note>同时适配日间与夜间模式</small>'
       : ''
+  if (['cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow'].includes(key)) return `<div data-prts-setting-row="${key}">
+    <span><strong>${label}</strong>${note}</span>
+    <button type="button" role="switch" aria-label="${label}" aria-checked="false" data-prts-setting-switch="${key}" ${key === 'cursor' ? 'data-prts-cursor-switch' : ''}><span aria-hidden="true"></span></button>
+  </div>`
   const sample = value => key === 'texture' || key === 'glass' || key === 'sessionFlowPalette'
     ? `<i data-prts-option-sample="${key}" data-prts-option-sample-value="${value}" aria-hidden="true"></i>`
     : ''
@@ -113,26 +118,47 @@ export function themeSettingsMarkup() {
           <button type="button" data-prts-theme-settings-close aria-label="关闭主题设置">×</button>
         </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>
+        </nav>
         <div data-prts-theme-settings-scroll>
-          <section data-prts-settings-presets>
-            <header><span><small>快速配置</small><strong>视觉预设</strong></span></header>
+          <section data-prts-settings-presets data-prts-settings-section="appearance" tabindex="-1">
+            <header><span><strong>视觉预设</strong></span></header>
             <div>${presetMarkup()}</div>
           </section>
 
           <section data-prts-settings-common>
-            <header><span><small>常用设置</small><strong>主题表现</strong></span></header>
-            <div data-prts-settings-common-grid>${COMMON_CONTROLS.map(([key, label, options]) => settingButtons(key, label, options)).join('')}
+            <header><span><strong>界面外观</strong></span></header>
+            <div data-prts-settings-common-grid>
+              ${COMMON_CONTROLS.filter(([key]) => ['texture', 'glass'].includes(key)).map(([key, label, options]) => settingButtons(key, label, options)).join('')}
+              ${settingButtons('conversationStyle', '会话主题', [['native', '原有'], ['deck-chat', '通讯链路']])}
+            </div>
+          </section>
+          <section data-prts-settings-common data-prts-settings-section="interaction" tabindex="-1">
+            <header><span><strong>交互</strong></span></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">
+            <header><span><strong>会话流线</strong></span></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('')}
               ${sessionFlowColorMarkup()}
               <label data-prts-setting-row="sessionFlowSpeed" data-prts-setting-range-row data-prts-session-flow-speed>
                 <span><strong>流线速度</strong><small data-prts-setting-note>控制当前会话流线的形变速度</small></span>
                 <div><input type="range" min="0.25" max="2" step="0.25" value="1" data-prts-setting-range data-prts-setting-key="sessionFlowSpeed" aria-label="当前会话流线速度"><output data-prts-session-flow-speed-output>1× · 标准</output></div>
               </label>
-              ${settingButtons('conversationStyle', '会话主题', [['native', '原有'], ['deck-chat', '通讯链路']])}
+
             </div>
           </section>
 
-          <details data-prts-settings-advanced>
-            <summary><span><small>精细调整</small><strong>粒子效果</strong></span><output data-prts-advanced-summary>标准 / 1×</output></summary>
+          <details data-prts-settings-advanced data-prts-settings-section="particles" tabindex="-1">
+            <summary><span><strong>粒子效果</strong></span><output data-prts-advanced-summary>标准 / 1×</output></summary>
             <div data-prts-settings-advanced-content>
               <section data-prts-particle-detail>
                 <header><strong>粒子精度</strong><span>同时调整会话与新会话徽记</span></header>
@@ -162,6 +188,7 @@ export function themeSettingsMarkup() {
             </div>
           </footer>
         </div>
+        </div>
       </div>
     </dialog>`
 }
@@ -428,6 +455,18 @@ export function createThemeSettingsOverlay({
 
   function renderState() {
     if (!panel || !currentPreferences) return
+    for (const toggle of panel.querySelectorAll('[data-prts-setting-switch]')) {
+      const key = toggle.dataset.prtsSettingSwitch
+      const enabled = key === 'cursor' ? currentPreferences.cursor === 'prts'
+        : key === 'railDefaultHidden' ? currentPreferences[key] === true : currentPreferences[key] !== false
+      toggle.setAttribute('aria-checked', String(enabled))
+      toggle.classList.toggle('is-active', enabled)
+    }
+    for (const key of ['sessionGlow', 'sessionFlowPalette', 'sessionFlowColors', 'sessionFlowSpeed']) {
+      const row = panel.querySelector(`[data-prts-setting-row="${key}"]`)
+      if (row) row.hidden = currentPreferences.sessionFlow === false
+        || (key === 'sessionFlowColors' && activeSessionFlowPalette() !== 'custom')
+    }
     const particleDetail = resolveParticleDetail(currentPreferences)
     for (const button of panel.querySelectorAll('button[data-prts-setting-key]')) {
       const key = button.dataset.prtsSettingKey
@@ -481,7 +520,23 @@ export function createThemeSettingsOverlay({
     if (event.target === panel) { setOpen(false); return }
     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, behavior: 'instant' })
+        section.focus?.({ preventScroll: true })
+      }
+      return
+    }
     if (target.hasAttribute('data-prts-theme-settings-close')) { setOpen(false); return }
+    if (target.hasAttribute('data-prts-setting-switch')) {
+      const key = target.dataset.prtsSettingSwitch
+      const enabled = target.getAttribute('aria-checked') === 'true'
+      onPreferenceChange(key, key === 'cursor' ? (enabled ? 'system' : 'prts') : !enabled)
+      return
+    }
     if (target.hasAttribute('data-prts-setting-key')) {
       const raw = target.dataset.prtsSettingValue
       if (target.dataset.prtsSettingKey === 'sessionFlowPalette') {

package/src/styles/cursor.css

@@ -0,0 +1,21 @@
+/* Native cursor; gesture frames override the resting image without a DOM overlay. */
+@media (any-pointer: fine) {
+  html[data-dsh-prts][data-prts-cursor="prts"] {
+    --prts-hand-cursor: var(--prts-hand-frame, url("__PRTS_HAND__") 7 6);
+    --prts-text-cursor: var(--prts-text-frame, url("__PRTS_TEXT__") 24 24);
+    --prts-link-cursor: url("__PRTS_LINK__") 7 7;
+    cursor: var(--prts-hand-cursor), default;
+  }
+  html[data-dsh-prts][data-prts-cursor="prts"] :is(button, a[href], summary, [role="button"], [role="tab"], [role="treeitem"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [data-prts-workspace-row], [data-prts-session-row], .dsh-partner-sidebar-row, select, input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"], input[type="color"], input[type="range"]) {
+    cursor: var(--prts-link-cursor), pointer;
+  }
+  html[data-dsh-prts][data-prts-cursor="prts"] [data-prts-text-hit] {
+    cursor: var(--prts-text-cursor), text;
+  }
+  html[data-dsh-prts][data-prts-cursor="prts"] :is(textarea, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]) {
+    cursor: var(--prts-text-cursor), text;
+  }
+  html[data-dsh-prts][data-prts-cursor="prts"] :is(:disabled, [aria-disabled="true"]) {
+    cursor: not-allowed !important;
+  }
+}