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

package/package.json

@@ -1,9 +1,18 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "0.1.92",
+  "version": "0.1.93",
   "private": false,
   "type": "module",
-  "description": "Unofficial personal non-commercial Arknights P.R.T.S. fan UI for DeepSeek Harness",
+  "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web",
+  "keywords": [
+    "deepseek-harness",
+    "dsh",
+    "dsh-plugin",
+    "theme",
+    "ui",
+    "arknights",
+    "prts"
+  ],
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
     "type": "git",
@@ -44,6 +53,7 @@
     "cordis.patch.yml",
     "README.md",
     "README.en.md",
+    "CHANGELOG.md",
     "LICENSE",
     "THIRD_PARTY_NOTICES.md"
   ],

package/src/client/conversation-scale-adapter.js

@@ -107,6 +107,7 @@ const PREVIEW_TOUCH_DURATION = 1200
 const SNAP_DELAY = 110
 const TOUCH_WAVE_DURATION = 620
 const HISTORY_PAGE_SETTLE_LIMIT = 4000
+const GEOMETRY_SETTLE_FRAME_LIMIT = 24
 let scaleInstanceSeed = 0
 
 function clamp(value, minimum, maximum) {
@@ -764,6 +765,9 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
   let scaleLengths = resolveConversationScaleLengths(focusContrast)
   let contentLeft
   let geometryDirty = true
+  let geometrySettleFrame
+  let geometrySettleFramesRemaining = 0
+  let geometrySettleSignature
   let observedOperationWidth
   let observedOperationHeight
   let started = false
@@ -786,6 +790,63 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
     ? timestamp
     : window?.performance?.now?.() ?? Date.now()
 
+  function currentGeometrySignature() {
+    if (!operation || !scroller) return undefined
+    const operationBox = operation.getBoundingClientRect?.()
+    const scrollerBox = scroller.getBoundingClientRect?.()
+    const composerBox = composer?.getBoundingClientRect?.()
+    if (!operationBox || !scrollerBox) return undefined
+    const values = [
+      operationBox.width,
+      operationBox.height,
+      scrollerBox.top - operationBox.top,
+      scrollerBox.bottom - operationBox.top,
+      scrollerBox.left - operationBox.left,
+      scrollerBox.right - operationBox.left,
+      composerBox ? composerBox.top - operationBox.top : -1,
+      composerBox ? composerBox.bottom - operationBox.top : -1,
+      composerBox ? composerBox.left - operationBox.left : -1,
+      composerBox ? composerBox.right - operationBox.left : -1,
+    ]
+    if (!values.every(Number.isFinite)) return undefined
+    return values.map(value => Number(value.toFixed(2))).join(':')
+  }
+
+  function sampleGeometryStabilization() {
+    geometrySettleFrame = undefined
+    if (!started || failed || geometrySettleFramesRemaining <= 0) return
+    geometrySettleFramesRemaining -= 1
+    const signature = currentGeometrySignature()
+    if (signature !== undefined && signature !== geometrySettleSignature) {
+      geometrySettleSignature = signature
+      geometryDirty = true
+      obstructionDirty = true
+      schedule()
+    }
+    if (geometrySettleFramesRemaining > 0) {
+      geometrySettleFrame = requestFrame(sampleGeometryStabilization)
+    }
+  }
+
+  function requestGeometryStabilization() {
+    if (!started || failed) return
+    geometrySettleFramesRemaining = GEOMETRY_SETTLE_FRAME_LIMIT
+    if (geometrySettleFrame === undefined) {
+      geometrySettleFrame = requestFrame(sampleGeometryStabilization)
+    }
+  }
+
+  function stopGeometryStabilization() {
+    cancelFrame(geometrySettleFrame)
+    geometrySettleFrame = undefined
+    geometrySettleFramesRemaining = 0
+    geometrySettleSignature = undefined
+  }
+
+  function onHostGeometryChange() {
+    requestGeometryStabilization()
+  }
+
   function reducedMotion() {
     return window?.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches
       || document.documentElement.dataset.prtsMotion === 'reduced'
@@ -1117,10 +1178,12 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
     setScaleResizeState(resizeActive)
     cancelJump()
     resetWave()
+    requestGeometryStabilization()
     return true
   }
 
   function disconnectRoots() {
+    stopGeometryStabilization()
     clearTimers()
     hidePreview()
     disconnectPreviewObserver()
@@ -2129,10 +2192,15 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
       if (started || !document) return
       started = true
       failed = false
+      window?.addEventListener?.('resize', onHostGeometryChange)
+      window?.addEventListener?.('orientationchange', onHostGeometryChange)
+      window?.addEventListener?.('pageshow', onHostGeometryChange)
+      window?.visualViewport?.addEventListener?.('resize', onHostGeometryChange)
       const ResizeObserver = window?.ResizeObserver
       if (typeof ResizeObserver === 'function') {
         resizeObserver = new ResizeObserver((entries = []) => {
           geometryDirty = true
+          requestGeometryStabilization()
           const operationEntry = entries.find(entry => entry.target === operation)
           const width = Number(operationEntry?.contentRect?.width)
           const height = Number(operationEntry?.contentRect?.height)
@@ -2173,6 +2241,7 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
           const external = mutations.filter(mutation =>
             !mutation.target?.closest?.('[data-prts-conversation-scale], [data-prts-conversation-preview], [data-prts-conversation-history-hint], [data-prts-conversation-history-status]')
           )
+          if (external.length) requestGeometryStabilization()
           const historyRelevant = external.some(mutation =>
             mutation.type === 'childList'
               && operation?.contains?.(mutation.target)
@@ -2210,9 +2279,17 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
           ],
         })
       }
+      document.fonts?.ready?.then?.(() => {
+        if (started) requestGeometryStabilization()
+      }).catch?.(() => {})
       schedule(true)
     },
     dispose() {
+      window?.removeEventListener?.('resize', onHostGeometryChange)
+      window?.removeEventListener?.('orientationchange', onHostGeometryChange)
+      window?.removeEventListener?.('pageshow', onHostGeometryChange)
+      window?.visualViewport?.removeEventListener?.('resize', onHostGeometryChange)
+      stopGeometryStabilization()
       started = false
       failed = false
       mutationObserver?.disconnect()

package/src/client/index.js

@@ -45,7 +45,6 @@ export function applyPrtsPlugin(ctx, environment) {
   const safeMode = isSafeMode(window?.location?.search ?? '')
   const storage = window?.localStorage
   const themeService = contextService(ctx, 'theme')
-  const theme = createThemeController({ document, window, cssText, service: themeService })
   const startup = createPrtsStartupSequence({ document, window, prtsEmblem: assets.prtsEmblem, rhodesEmblem: assets.emblem, timings: startupTimings })
   const composerGlass = createComposerGlassAdapter({ document, window })
   const assistantGlass = createAssistantGlassAdapter({ document, window })
@@ -60,6 +59,15 @@ export function applyPrtsPlugin(ctx, environment) {
       sync()
     },
   })
+  const theme = createThemeController({
+    document,
+    window,
+    cssText,
+    service: themeService,
+    onTransitionStateChange(active) {
+      particleField.setSchemeTransitionActive(active)
+    },
+  })
   const sessions = contextService(ctx, 'sessions')
   const toBottom = createToBottomAdapter({ document, window })
   const conversationControls = createConversationControlAdapter({ document, window })
@@ -160,8 +168,11 @@ export function applyPrtsPlugin(ctx, environment) {
     if (!themeAlreadyApplied) theme.apply(preferences)
     operations ||= createOperationsShell({
       document, window, assets, adapter, hostGeometry,
-      onSchemeToggle(next) {
-        theme.setTheme(next)
+      onSchemeToggle(next, interaction) {
+        return theme.setTheme(next, { ...interaction, animate: true })
+      },
+      onSchemeDragStart(next, interaction) {
+        return theme.beginThemeTransition(next, interaction)
       },
       onThemeDisable() {
         persistAndApply(updatePreferenceValue(preferences, 'enabled', false))
@@ -169,6 +180,10 @@ export function applyPrtsPlugin(ctx, environment) {
       onPreferenceChange(key, value) {
         persistAndApply(updatePreferenceValue(preferences, key, value))
       },
+      onPreferencePreview(key, value) {
+        if (key !== 'particleTraversalSpeed') return
+        particleField.update(updatePreferenceValue(preferences, key, value))
+      },
       onVisualReset() {
         persistAndApply({
           ...DEFAULT_PREFERENCES,

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

@@ -35,8 +35,10 @@ export function createOperationsShell({
   adapter,
   hostGeometry,
   onSchemeToggle = () => {},
+  onSchemeDragStart = () => undefined,
   onThemeDisable = () => {},
   onPreferenceChange = () => {},
+  onPreferencePreview = () => {},
   onVisualReset = () => {},
   getConversationScalePreview = () => ({ visible: false, reason: 'unmeasured', mode: 'hidden' }),
   onRetrySave = () => {},
@@ -47,14 +49,79 @@ export function createOperationsShell({
   let navRail
   let railLauncher
   let railMode
+  let railViewport
+  let railDefaultHidden = false
   let railViewportQuery
   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 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 +132,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' ? '切换到日间模式' : '切换到夜间模式')
   }
@@ -110,13 +286,16 @@ 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
     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,15 +313,12 @@ 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() {
     setRailViewport(window.innerWidth)
     settingsOverlay?.scheduleScalePreviewRefresh?.()
@@ -177,6 +353,7 @@ export function createOperationsShell({
       panel: shell.querySelector('[data-prts-theme-settings]'),
       backdrop: shell.querySelector('[data-prts-settings-backdrop]'),
       onPreferenceChange,
+      onPreferencePreview,
       onResetVisual: onVisualReset,
       onRetrySave,
       getConversationScalePreview,
@@ -191,10 +368,15 @@ export function createOperationsShell({
     schemeObserver = new window.MutationObserver(syncSchemeToggle)
     schemeObserver.observe(root, { attributes: true, attributeFilter: ['data-prts-scheme'] })
     railLauncher.addEventListener('click', toggleRail)
-    navRail.addEventListener('click', onRailAction)
     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,11 +384,19 @@ export function createOperationsShell({
   }
 
   function dispose() {
+    cancelSchemePointer()
+    clearSchemeClickSuppression()
+    clearSchemePressDelays()
     railLauncher?.removeEventListener('click', toggleRail)
-    navRail?.removeEventListener('click', onRailAction)
     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)
     railViewportQuery = undefined
@@ -218,7 +408,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 +425,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