@ash-qw/dsh-theme-prts 1.0.2 → 1.0.4

package/src/client/cursor-adapter.js

@@ -0,0 +1,115 @@
+// 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 mode
+  let pressX
+  let pressY
+  let handPhase
+  const reducedMedia = window?.matchMedia?.('(prefers-reduced-motion: reduce)')
+  const frameProperty = '--prts-hand-frame'
+  function clearTimer() {
+    if (timer !== undefined) window.clearTimeout(timer)
+    timer = undefined
+  }
+  function reset() {
+    clearTimer()
+    pointerId = undefined
+    root?.style.removeProperty(frameProperty)
+    root?.style.removeProperty('--prts-text-frame')
+    mode = undefined
+    handPhase = undefined
+  }
+  function show(url) {
+    const [x, y] = mode === 'text' ? assets.textHotspot : assets.hotspot
+    root.style.setProperty(mode === 'text' ? '--prts-text-frame' : frameProperty, `url("${url}") ${x} ${y}`)
+  }
+  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
+    const target = event.target?.nodeType === 1 ? event.target : event.target?.parentElement
+    const cursor = target ? window.getComputedStyle(target).cursor : ''
+    reset()
+    if (!cursor.includes('data:image/png')) return
+    mode = /,\s*text$/.test(cursor) ? 'text' : 'hand'
+    pointerId = event.pointerId
+    pressX = event.clientX
+    pressY = event.clientY
+    if (mode === 'text') {
+      if (reduced() || !assets.textClick) { reset(); return }
+      play(assets.textClick, reset)
+      return
+    }
+    if (reduced()) { clearTimer(); show(assets.hold); return }
+    handPhase = 'press'
+    play(assets.press, () => {
+      handPhase = 'hold'
+      show(assets.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(assets.release, reset)
+  }
+  function up(event) {
+    if (pointerId === undefined || event.pointerId !== pointerId || event.button !== 0) return
+    pointerId = undefined
+    if (mode === 'text') return
+    if (reduced()) { reset(); return }
+    if (handPhase === 'press') return
+    releaseHand()
+  }
+  function move(event) {
+    if (mode === 'text') {
+      const target = event.target?.nodeType === 1 ? event.target : event.target?.parentElement
+      const cursor = target ? window.getComputedStyle(target).cursor : ''
+      const selecting = pointerId === event.pointerId && (event.buttons & 1) && Math.hypot(event.clientX - pressX, event.clientY - pressY) > 4
+      if (!/,\s*text$/.test(cursor) || selecting) reset()
+      return
+    }
+    if (pointerId !== undefined && event.pointerId === pointerId && !(event.buttons & 1)) reset()
+  }
+  function leave(event) { if (!event.relatedTarget) reset() }
+  function blur(event) {
+    // Captured element blur also reaches window when focus changes inside the app.
+    if (event.target === window) reset()
+  }
+  function visibility() { if (document.hidden) reset() }
+  const events = [['pointerdown', down], ['pointerup', up], ['pointermove', move], ['pointercancel', reset], ['blur', blur], ['dragstart', reset], ['pointerout', leave]]
+  function dispose() {
+    reset()
+    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', '鼠标样式', [['system', '系统'], ['prts', 'PRTS 手形']]],
   ['railDefaultHidden', '默认隐藏导航栏', [['false', '关闭'], ['true', '开启']]],
   ['texture', '环境底纹', [['off', '关闭'], ['restrained', '克制'], ['full', '完整']]],
   ['glass', '玻璃材质', [['off', '关闭'], ['soft', '柔和'], ['standard', '标准'], ['clear', '清晰']]],

package/src/styles/cursor.css

@@ -0,0 +1,17 @@
+/* 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);
+    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-hand-cursor), pointer;
+  }
+  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;
+  }
+}