@ash-qw/dsh-theme-prts 0.1.92 → 0.1.94

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

@@ -1,6 +1,12 @@
 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
+const RAIL_HOLD_MOVE_TOLERANCE = 8
+const RAIL_SWIPE_THRESHOLD = 32
+const RAIL_SWIPE_AXIS_RATIO = 1.25
+
 function setText(root, selector, value) {
   const node = root?.querySelector(selector)
   const next = String(value ?? '')
@@ -9,7 +15,7 @@ function setText(root, selector, value) {
 
 function markup(emblem) {
   return `<div data-prts-shell data-plugin="dsh-theme-prts">
-    <button type="button" data-prts-rail-launcher aria-label="打开 P.R.T.S. 导航" aria-controls="prts-nav-rail" aria-expanded="false"><span aria-hidden="true">P.R.T.S.</span></button>
+    <button type="button" data-prts-rail-launcher aria-label="打开 P.R.T.S. 导航" aria-controls="prts-nav-rail" aria-expanded="false"><span aria-hidden="true">P.R.T.S.</span><i data-prts-rail-gesture-cue aria-hidden="true">⌄<br>⌄</i></button>
     <nav id="prts-nav-rail" data-prts-nav-rail aria-label="P.R.T.S. 导航">
       <button type="button" data-prts-rail-brand aria-label="P.R.T.S. 终端设置" aria-controls="prts-theme-settings" aria-expanded="false">${emblem || ''}<span>P.R.T.S.</span></button>
       <div data-prts-nav-bottom>
@@ -35,8 +41,10 @@ export function createOperationsShell({
   adapter,
   hostGeometry,
   onSchemeToggle = () => {},
+  onSchemeDragStart = () => undefined,
   onThemeDisable = () => {},
   onPreferenceChange = () => {},
+  onPreferencePreview = () => {},
   onVisualReset = () => {},
   getConversationScalePreview = () => ({ visible: false, reason: 'unmeasured', mode: 'hidden' }),
   onRetrySave = () => {},
@@ -47,14 +55,166 @@ export function createOperationsShell({
   let navRail
   let railLauncher
   let railMode
+  let railViewport
+  let railDefaultHidden = false
   let railViewportQuery
+  let railPointerQuery
+  let railHoverQuery
+  let railPointer
+  let railHoldTimer
   let settingsOverlay
   let schemeToggle
+  let schemeIntent
+  let schemePressRevision = 0
+  let schemePressAnimation
+  let schemePointer
+  let suppressSchemeClick = false
+  let suppressSchemeClickTimer
   let themeDisable
   let connectionIndicator
   let conversationObserver
   let schemeObserver
   let operationRegion
+  const schemePressDelays = new Set()
+
+  function reducedMotion() {
+    if (root.dataset.prtsMotion === 'reduced') return true
+    try { return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true } catch { return false }
+  }
+
+  function phoneRailGesture() {
+    if (railMode !== 'overlay' || Number(window.innerWidth) > PHONE_RAIL_BREAKPOINT) return false
+    return railPointerQuery?.matches === true
+      || railHoverQuery?.matches === true
+      || Number(window.navigator?.maxTouchPoints) > 0
+  }
+
+  function clearRailGesture({ release = true } = {}) {
+    if (railHoldTimer !== undefined) window.clearTimeout(railHoldTimer)
+    railHoldTimer = undefined
+    const pointer = railPointer
+    railPointer = undefined
+    if (release && pointer) {
+      try { railLauncher?.releasePointerCapture?.(pointer.pointerId) } catch {}
+    }
+    railLauncher?.removeAttribute('data-prts-rail-gesture-active')
+    railLauncher?.removeAttribute('data-prts-rail-gesture-ready')
+    railLauncher?.style?.removeProperty('--prts-rail-gesture-progress')
+  }
+
+  function armRailGesture() {
+    railHoldTimer = undefined
+    if (!railPointer || !phoneRailGesture()) return
+    railPointer.armed = true
+    railLauncher?.setAttribute('data-prts-rail-gesture-active', '')
+  }
+
+  function onRailPointerDown(event) {
+    if (!phoneRailGesture() || railPointer || (event.button ?? 0) !== 0) return
+    const pointerId = event.pointerId ?? 1
+    railPointer = {
+      pointerId,
+      startX: Number(event.clientX) || 0,
+      startY: Number(event.clientY) || 0,
+      armed: false,
+      ready: false,
+    }
+    try { railLauncher?.setPointerCapture?.(pointerId) } catch {}
+    railHoldTimer = window.setTimeout(armRailGesture, RAIL_HOLD_DELAY_MS)
+  }
+
+  function onRailPointerMove(event) {
+    const pointer = railPointer
+    if (!pointer || (event.pointerId ?? 1) !== pointer.pointerId) return
+    const deltaX = (Number(event.clientX) || 0) - pointer.startX
+    const deltaY = (Number(event.clientY) || 0) - pointer.startY
+    if (!pointer.armed) {
+      if (Math.hypot(deltaX, deltaY) > RAIL_HOLD_MOVE_TOLERANCE) clearRailGesture()
+      return
+    }
+    event.preventDefault?.()
+    if (Math.abs(deltaX) > Math.max(RAIL_HOLD_MOVE_TOLERANCE, Math.max(0, deltaY) / RAIL_SWIPE_AXIS_RATIO)) {
+      clearRailGesture()
+      return
+    }
+    const progress = Math.min(1, Math.max(0, deltaY) / RAIL_SWIPE_THRESHOLD)
+    pointer.ready = deltaY >= RAIL_SWIPE_THRESHOLD
+      && deltaY >= Math.abs(deltaX) * RAIL_SWIPE_AXIS_RATIO
+    railLauncher?.style?.setProperty('--prts-rail-gesture-progress', Math.round(progress * 12) + 'px')
+    railLauncher?.toggleAttribute('data-prts-rail-gesture-ready', pointer.ready)
+  }
+
+  function onRailPointerUp(event) {
+    const pointer = railPointer
+    if (!pointer || (event.pointerId ?? 1) !== pointer.pointerId) return
+    const shouldOpen = pointer.armed && pointer.ready
+    clearRailGesture()
+    if (shouldOpen) openRail()
+  }
+
+  function onRailLostPointerCapture(event) {
+    if (!railPointer || (event.pointerId ?? 1) !== railPointer.pointerId) return
+    clearRailGesture({ release: false })
+  }
+
+  function onRailClick(event) {
+    if (phoneRailGesture() && Number(event?.detail) > 0) {
+      event.preventDefault?.()
+      return
+    }
+    toggleRail()
+  }
+
+  function playSchemePress() {
+    if (!schemeToggle || reducedMotion()) return
+    const revision = ++schemePressRevision
+    schemePressAnimation?.cancel?.()
+    schemePressAnimation = undefined
+    schemeToggle.removeAttribute('data-prts-scheme-press')
+
+    if (typeof schemeToggle.animate === 'function') {
+      const animation = schemeToggle.animate([
+        { transform: 'translateY(0) scale(1)' },
+        { transform: 'translateY(0) scale(.96)', offset: 0.5 },
+        { transform: 'translateY(0) scale(1)' },
+      ], { duration: 100, easing: 'cubic-bezier(.22, 1, .36, 1)' })
+      schemePressAnimation = animation
+      Promise.resolve(animation.finished).catch(() => {}).finally(() => {
+        if (revision === schemePressRevision && schemePressAnimation === animation) schemePressAnimation = undefined
+      })
+      return
+    }
+
+    schemeToggle.setAttribute('data-prts-scheme-press', '')
+    const entry = { timer: undefined }
+    entry.timer = window.setTimeout(() => {
+      schemePressDelays.delete(entry)
+      if (revision === schemePressRevision) schemeToggle?.removeAttribute('data-prts-scheme-press')
+    }, 100)
+    schemePressDelays.add(entry)
+  }
+
+  function clearSchemePressDelays() {
+    schemePressRevision += 1
+    schemePressAnimation?.cancel?.()
+    schemePressAnimation = undefined
+    schemeToggle?.removeAttribute('data-prts-scheme-press')
+    for (const entry of schemePressDelays) {
+      window.clearTimeout(entry.timer)
+    }
+    schemePressDelays.clear()
+  }
+
+  function schemeTarget() {
+    const current = schemeIntent ?? (root.dataset.prtsScheme === 'dark' ? 'dark' : 'light')
+    return current === 'dark' ? 'light' : 'dark'
+  }
+
+  function schemeOrigin() {
+    const rect = schemeToggle?.getBoundingClientRect?.()
+    return rect ? { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 } : undefined
+  }
+
   function syncConversationState() {
     if (!operationRegion) return
     const candidate = operationRegion.querySelector(
@@ -65,13 +225,122 @@ export function createOperationsShell({
     settingsOverlay?.refreshScalePreview()
   }
 
-  function toggleScheme() {
-    onSchemeToggle(root.dataset.prtsScheme === 'dark' ? 'light' : 'dark')
+  function toggleScheme(event) {
+    if (suppressSchemeClick) {
+      event?.preventDefault?.()
+      return
+    }
+    const next = schemeTarget()
+    schemeIntent = next
+    playSchemePress()
+    let request
+    try { request = onSchemeToggle(next, { origin: schemeOrigin() }) } catch { request = undefined }
+    Promise.resolve(request).catch(() => {}).finally(() => {
+      if (schemeIntent === next) schemeIntent = undefined
+    })
+  }
+
+  function schemePointerProgress(event) {
+    const width = Math.max(1, Number(window.innerWidth) || Number(root.clientWidth) || 1)
+    return Math.min(1, Math.max(0, Number(event?.clientX) / width || 0))
+  }
+
+  function clearSchemeClickSuppression() {
+    if (suppressSchemeClickTimer !== undefined) window.clearTimeout(suppressSchemeClickTimer)
+    suppressSchemeClickTimer = undefined
+    suppressSchemeClick = false
+  }
+
+  function suppressNextSchemeClick() {
+    clearSchemeClickSuppression()
+    suppressSchemeClick = true
+    suppressSchemeClickTimer = window.setTimeout(() => {
+      suppressSchemeClickTimer = undefined
+      suppressSchemeClick = false
+    }, 0)
+  }
+
+  function settleSchemePointer({ commit = false } = {}) {
+    const pointer = schemePointer
+    if (!pointer) return
+    schemePointer = undefined
+    try { schemeToggle?.releasePointerCapture?.(pointer.pointerId) } catch {}
+    if (!pointer.dragging) return
+    suppressNextSchemeClick()
+    let result
+    try { result = pointer.gesture?.finish?.(commit) } catch { result = undefined }
+    Promise.resolve(result).catch(() => {}).finally(() => {
+      if (schemeIntent === pointer.target) schemeIntent = undefined
+    })
+  }
+
+  function onSchemePointerDown(event) {
+    if ((event.button ?? 0) !== 0 || schemePointer) return
+    const pointerId = event.pointerId ?? 1
+    schemePointer = {
+      pointerId,
+      startX: Number(event.clientX) || 0,
+      startY: Number(event.clientY) || 0,
+      target: schemeTarget(),
+      origin: schemeOrigin(),
+      dragging: false,
+      gesture: undefined,
+    }
+    try { schemeToggle?.setPointerCapture?.(pointerId) } catch {}
+  }
+
+  function onSchemePointerMove(event) {
+    const pointer = schemePointer
+    if (!pointer || (event.pointerId ?? 1) !== pointer.pointerId) return
+    const deltaX = (Number(event.clientX) || 0) - pointer.startX
+    if (!pointer.dragging) {
+      if (deltaX < 8) return
+      pointer.dragging = true
+      schemeIntent = pointer.target
+      playSchemePress()
+      const progress = schemePointerProgress(event)
+      try {
+        pointer.gesture = onSchemeDragStart(pointer.target, {
+          origin: pointer.origin,
+          progress,
+          clientX: Number(event.clientX) || 0,
+        })
+      } catch {
+        pointer.gesture = undefined
+      }
+    }
+    event.preventDefault?.()
+    pointer.gesture?.update?.(schemePointerProgress(event))
+  }
+
+  function onSchemePointerUp(event) {
+    const pointer = schemePointer
+    if (!pointer || (event.pointerId ?? 1) !== pointer.pointerId) return
+    const commit = pointer.dragging && schemePointerProgress(event) >= .5
+    settleSchemePointer({ commit })
+  }
+
+  function cancelSchemePointer() {
+    const pointer = schemePointer
+    if (!pointer) return
+    if (pointer.dragging) {
+      try { pointer.gesture?.cancel?.() } catch {}
+    }
+    schemePointer = undefined
+    try { schemeToggle?.releasePointerCapture?.(pointer.pointerId) } catch {}
+    if (pointer.dragging) suppressNextSchemeClick()
+    if (schemeIntent === pointer.target) schemeIntent = undefined
+  }
+
+  function onSchemeLostPointerCapture(event) {
+    if (!schemePointer || (event.pointerId ?? 1) !== schemePointer.pointerId) return
+    cancelSchemePointer()
   }
 
   function syncSchemeToggle() {
     if (!schemeToggle) return
     const current = root.dataset.prtsScheme === 'dark' ? 'dark' : 'light'
+    if (schemeIntent === current) schemeIntent = undefined
     schemeToggle.dataset.prtsSchemeCurrent = current
     schemeToggle.setAttribute('aria-label', current === 'dark' ? '切换到日间模式' : '切换到夜间模式')
   }
@@ -81,7 +350,8 @@ export function createOperationsShell({
     const overlay = railMode === 'overlay'
     const open = overlay && root.hasAttribute('data-prts-rail-open')
     railLauncher.setAttribute('aria-expanded', String(open))
-    railLauncher.setAttribute('aria-label', open ? '关闭 P.R.T.S. 导航' : '打开 P.R.T.S. 导航')
+    const closedLabel = phoneRailGesture() ? '长按并向下滑动打开 P.R.T.S. 导航' : '打开 P.R.T.S. 导航'
+    railLauncher.setAttribute('aria-label', open ? '关闭 P.R.T.S. 导航' : closedLabel)
     if (overlay && !open) {
       navRail.setAttribute('aria-hidden', 'true')
       navRail.setAttribute('inert', '')
@@ -110,13 +380,17 @@ export function createOperationsShell({
     else window?.setTimeout?.(focusFirst, 0)
   }
 
-  function setRailViewport(width = window.innerWidth) {
-    const nextMode = Number(width) >= 1180 ? 'docked' : 'overlay'
-    if (nextMode === railMode) return railMode
+  function setRailViewport(width = window.innerWidth, { forceClose = false } = {}) {
+    const nextViewport = Number(width) >= 1180 ? 'wide' : 'narrow'
+    const viewportChanged = nextViewport !== railViewport
+    const nextMode = railDefaultHidden || nextViewport === 'narrow' ? 'overlay' : 'docked'
+    const modeChanged = nextMode !== railMode
+    if (!viewportChanged && !modeChanged && !forceClose) return railMode
+    railViewport = nextViewport
     railMode = nextMode
+    clearRailGesture()
     root.dataset.prtsRailMode = nextMode
-    if (nextMode === 'docked') root.removeAttribute('data-prts-rail-open')
-    else root.removeAttribute('data-prts-rail-open')
+    root.removeAttribute('data-prts-rail-open')
     syncRailState()
     return nextMode
   }
@@ -134,23 +408,26 @@ export function createOperationsShell({
 
   function onDocumentClick(event) {
     if (railMode !== 'overlay' || !root.hasAttribute('data-prts-rail-open')) return
-    if (navRail?.contains?.(event.target) || railLauncher?.contains?.(event.target)) return
+    const settingsPanel = shell?.querySelector?.('[data-prts-theme-settings]')
+    const insideSettingsContent = settingsPanel?.contains?.(event.target) && event.target !== settingsPanel
+    if (navRail?.contains?.(event.target) || railLauncher?.contains?.(event.target) || insideSettingsContent) return
     closeRail()
   }
 
-  function onRailAction(event) {
-    const action = event.target?.closest?.('[data-prts-rail-brand], [data-prts-scheme-toggle]')
-    if (action && navRail?.contains?.(action)) closeRail()
-  }
-
   function onResponsiveChange() {
+    clearRailGesture()
     setRailViewport(window.innerWidth)
+    syncRailState()
     settingsOverlay?.scheduleScalePreviewRefresh?.()
   }
 
   function bindResponsiveQueries() {
     railViewportQuery = window.matchMedia?.('(min-width: 1180px)')
+    railPointerQuery = window.matchMedia?.('(pointer: coarse)')
+    railHoverQuery = window.matchMedia?.('(hover: none)')
     railViewportQuery?.addEventListener?.('change', onResponsiveChange)
+    railPointerQuery?.addEventListener?.('change', onResponsiveChange)
+    railHoverQuery?.addEventListener?.('change', onResponsiveChange)
   }
   function disableTheme() { onThemeDisable() }
 
@@ -177,6 +454,7 @@ export function createOperationsShell({
       panel: shell.querySelector('[data-prts-theme-settings]'),
       backdrop: shell.querySelector('[data-prts-settings-backdrop]'),
       onPreferenceChange,
+      onPreferencePreview,
       onResetVisual: onVisualReset,
       onRetrySave,
       getConversationScalePreview,
@@ -190,11 +468,21 @@ export function createOperationsShell({
     conversationObserver.observe(operationRegion, { childList: true, subtree: true, attributes: true, attributeFilter: ['hidden', 'data-chat-flow-kind', 'data-message-role'] })
     schemeObserver = new window.MutationObserver(syncSchemeToggle)
     schemeObserver.observe(root, { attributes: true, attributeFilter: ['data-prts-scheme'] })
-    railLauncher.addEventListener('click', toggleRail)
-    navRail.addEventListener('click', onRailAction)
+    railLauncher.addEventListener('click', onRailClick)
+    railLauncher.addEventListener('pointerdown', onRailPointerDown)
+    railLauncher.addEventListener('pointermove', onRailPointerMove)
+    railLauncher.addEventListener('pointerup', onRailPointerUp)
+    railLauncher.addEventListener('pointercancel', clearRailGesture)
+    railLauncher.addEventListener('lostpointercapture', onRailLostPointerCapture)
     document.addEventListener('keydown', onRailKeydown)
     document.addEventListener('click', onDocumentClick)
     schemeToggle.addEventListener('click', toggleScheme)
+    schemeToggle.addEventListener('pointerdown', onSchemePointerDown)
+    schemeToggle.addEventListener('pointermove', onSchemePointerMove)
+    schemeToggle.addEventListener('pointerup', onSchemePointerUp)
+    schemeToggle.addEventListener('pointercancel', cancelSchemePointer)
+    schemeToggle.addEventListener('lostpointercapture', onSchemeLostPointerCapture)
+    window.addEventListener?.('blur', cancelSchemePointer)
     themeDisable.addEventListener('click', disableTheme)
     syncConversationState()
     syncSchemeToggle()
@@ -202,14 +490,32 @@ export function createOperationsShell({
   }
 
   function dispose() {
-    railLauncher?.removeEventListener('click', toggleRail)
-    navRail?.removeEventListener('click', onRailAction)
+    clearRailGesture()
+    cancelSchemePointer()
+    clearSchemeClickSuppression()
+    clearSchemePressDelays()
+    railLauncher?.removeEventListener('click', onRailClick)
+    railLauncher?.removeEventListener('pointerdown', onRailPointerDown)
+    railLauncher?.removeEventListener('pointermove', onRailPointerMove)
+    railLauncher?.removeEventListener('pointerup', onRailPointerUp)
+    railLauncher?.removeEventListener('pointercancel', clearRailGesture)
+    railLauncher?.removeEventListener('lostpointercapture', onRailLostPointerCapture)
     document.removeEventListener('keydown', onRailKeydown)
     document.removeEventListener('click', onDocumentClick)
     schemeToggle?.removeEventListener('click', toggleScheme)
+    schemeToggle?.removeEventListener('pointerdown', onSchemePointerDown)
+    schemeToggle?.removeEventListener('pointermove', onSchemePointerMove)
+    schemeToggle?.removeEventListener('pointerup', onSchemePointerUp)
+    schemeToggle?.removeEventListener('pointercancel', cancelSchemePointer)
+    schemeToggle?.removeEventListener('lostpointercapture', onSchemeLostPointerCapture)
+    window.removeEventListener?.('blur', cancelSchemePointer)
     themeDisable?.removeEventListener('click', disableTheme)
     railViewportQuery?.removeEventListener?.('change', onResponsiveChange)
+    railPointerQuery?.removeEventListener?.('change', onResponsiveChange)
+    railHoverQuery?.removeEventListener?.('change', onResponsiveChange)
     railViewportQuery = undefined
+    railPointerQuery = undefined
+    railHoverQuery = undefined
     resizeShield.dispose()
     settingsOverlay?.dispose()
     conversationObserver?.disconnect()
@@ -218,7 +524,10 @@ export function createOperationsShell({
     root.removeAttribute('data-prts-conversation-state')
     root.removeAttribute('data-prts-rail-mode')
     root.removeAttribute('data-prts-rail-open')
-    navRail = railLauncher = railMode = undefined
+    root.removeAttribute('data-prts-rail-default-hidden')
+    navRail = railLauncher = railMode = railViewport = undefined
+    railDefaultHidden = false
+    schemeIntent = undefined
     shell = settingsOverlay = schemeToggle = themeDisable = connectionIndicator = undefined
     conversationObserver = schemeObserver = undefined
     operationRegion = undefined
@@ -232,7 +541,12 @@ export function createOperationsShell({
         dispose()
         return false
       }
+      const nextRailDefaultHidden = Boolean(preferences.railDefaultHidden)
+      const railPreferenceChanged = nextRailDefaultHidden !== railDefaultHidden
+      railDefaultHidden = nextRailDefaultHidden
       if (!mount()) return false
+      root.toggleAttribute('data-prts-rail-default-hidden', railDefaultHidden)
+      setRailViewport(window.innerWidth, { forceClose: railPreferenceChanged })
       const connection = status?.connection || 'unknown'
       const connectionLabel = status?.connectionLabel || '未知'
       connectionIndicator.dataset.state = connection