@ash-qw/dsh-theme-prts 2.1.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web and the official desktop client",

package/src/client/custom-background.js

@@ -18,6 +18,8 @@ export function createBackgroundStore({ window, document }) {
       if (url) root.style.setProperty(`--prts-background-${slot}`, `url("${url}")`)
       else root.style.removeProperty(`--prts-background-${slot}`)
     }
+    const ratio = Number(state.sidebar?.width) / Number(state.sidebar?.height)
+    document.documentElement.style.setProperty('--prts-sidebar-image-ratio', String(Number.isFinite(ratio) && ratio > 0 ? ratio : 1))
     for (const listener of listeners) listener(state)
   }
   const request = async data => {
@@ -52,6 +54,7 @@ export function createBackgroundStore({ window, document }) {
       catch (error) { await refresh().catch(() => {}); throw error }
     },
     dispose() {
+      document.documentElement.style.removeProperty('--prts-sidebar-image-ratio')
       disposed = true; abort?.abort(); events?.close(); listeners.clear(); window.removeEventListener('focus', focus)
       for (const slot of Object.keys(backgroundLabels)) {
         document.documentElement.removeAttribute(`data-prts-background-${slot}`)

package/src/client/host-geometry-adapter.js

@@ -16,6 +16,8 @@ function cssPixels(value) {
 export function createHostGeometryAdapter({ document, window }) {
   const root = document?.documentElement
   let frame
+  let sidebar
+  let previousSidebarWidth
   let resizeObserver
   let frameRequest
   let resizeSettleTimer
@@ -31,6 +33,10 @@ export function createHostGeometryAdapter({ document, window }) {
     if (root.style.getPropertyValue(TOP_INSET_PROPERTY) !== value) {
       root.style.setProperty(TOP_INSET_PROPERTY, value)
     }
+    if (sidebar?.isConnected) {
+      const width = cssPixels(sidebar.getBoundingClientRect().width)
+      if (root.style.getPropertyValue('--prts-sidebar-width') !== width) root.style.setProperty('--prts-sidebar-width', width)
+    }
     return top
   }
 
@@ -62,6 +68,7 @@ export function createHostGeometryAdapter({ document, window }) {
   function onGeometryResize(entries = []) {
     let shouldMeasure = false
     for (const entry of entries) {
+      if (entry.target === sidebar) { shouldMeasure = true; continue }
       if (entry.target !== frame) continue
       const height = Number(entry.contentRect?.height)
       if (!Number.isFinite(height) || height <= 0) {
@@ -91,6 +98,9 @@ export function createHostGeometryAdapter({ document, window }) {
     else root.style.removeProperty(TOP_INSET_PROPERTY)
     previousValue = undefined
     previousPriority = undefined
+    if (previousSidebarWidth) root.style.setProperty('--prts-sidebar-width', previousSidebarWidth)
+    else root.style.removeProperty('--prts-sidebar-width')
+    sidebar = undefined
     frame = undefined
     observedFrameHeight = undefined
     started = false
@@ -105,6 +115,8 @@ export function createHostGeometryAdapter({ document, window }) {
       }
       if (started) dispose()
       frame = nextFrame
+      sidebar = frame.querySelector?.('[data-prts-region="sessions"]')
+      previousSidebarWidth = root.style.getPropertyValue('--prts-sidebar-width')
       previousValue = root.style.getPropertyValue(TOP_INSET_PROPERTY)
       previousPriority = root.style.getPropertyPriority(TOP_INSET_PROPERTY)
       started = true
@@ -112,6 +124,7 @@ export function createHostGeometryAdapter({ document, window }) {
       if (typeof window?.ResizeObserver === 'function') {
         resizeObserver = new window.ResizeObserver(onGeometryResize)
         resizeObserver.observe(frame)
+        if (sidebar) resizeObserver.observe(sidebar)
       }
       window?.addEventListener?.('resize', onWindowResize, { passive: true })
       scheduleSettledMeasure()

package/src/client/opacity-dial.js

@@ -2,7 +2,7 @@
 // See src/vendor/react-bits/LICENSE.md and THIRD_PARTY_NOTICES.md.
 export const BACKGROUND_OPACITY_CONTROLS = Object.freeze([
   { key: 'sidebarOpacity', label: '会话列表侧栏', property: '--prts-sidebar-opacity', value: 94, blurKey: 'sidebarBlur', blurProperty: '--prts-sidebar-blur', blurDefault: 8 },
-  { key: 'railOpacity', label: '设置侧栏', property: '--prts-rail-opacity', value: 70, blurKey: 'railBlur', blurProperty: '--prts-rail-blur', blurDefault: 12, fullBackgroundOnly: true },
+  { key: 'railOpacity', label: '设置侧栏', property: '--prts-rail-opacity', value: 70, blurKey: 'railBlur', blurProperty: '--prts-rail-blur', blurDefault: 12 },
   { key: 'bakerOpacity', label: 'Baker 气泡', property: '--prts-baker-opacity', value: 50, blurKey: 'bakerBlur', blurProperty: '--prts-baker-blur', blurDefault: 8, theme: 'deck-chat' },
   { key: 'classicUserOpacity', label: '经典用户消息', property: '--prts-classic-user-opacity', value: 50, blurKey: 'classicUserBlur', blurProperty: '--prts-classic-user-blur', blurDefault: 8, theme: 'native' },
 ])
@@ -109,8 +109,7 @@ export function mountOpacityDials({ section, window, onChange }) {
     paint(value)
     return {
       update(preferences, active) {
-        container.hidden = Boolean((definition.theme && preferences.conversationStyle !== definition.theme)
-          || (definition.fullBackgroundOnly && preferences.backgroundMode !== 'full'))
+        container.hidden = Boolean(definition.theme && preferences.conversationStyle !== definition.theme)
         saved = 100 - Math.round((preferences[definition.key] ?? (100 - definition.value) / 100) * 100)
         if (!grip && section.ownerDocument.activeElement !== input) paint(saved)
         savedBlur = preferences[definition.blurKey] ?? definition.blurDefault
@@ -127,7 +126,8 @@ export function mountOpacityDials({ section, window, onChange }) {
       const split = preferences.backgroundMode === 'split'
       section.querySelector('[data-prts-opacity-settings]').hidden = preferences.backgroundMode === 'off'
       const conversationImage = full || (split && Boolean(state.conversation))
-      const active = [full || (split && Boolean(state.sidebar)), full,
+      const sidebarImage = full || (split && Boolean(state.sidebar))
+      const active = [sidebarImage, sidebarImage,
         conversationImage && preferences.conversationStyle === 'deck-chat',
         conversationImage && preferences.conversationStyle === 'native']
       controls.forEach((control,i)=>control.update(preferences,active[i]))

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

@@ -1,3 +1,4 @@
+import { SCHEME_COMMIT_PROGRESS } from './theme-controller-v2.js'
 import { createThemeSettingsOverlay, themeSettingsMarkup } from './theme-settings-workbench.js'
 
 const PHONE_RAIL_BREAKPOINT = 640
@@ -83,9 +84,9 @@ export function createOperationsShell({
     try { return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true } catch { return false }
   }
 
-  function phoneRailGesture() {
+  function phoneRailGesture(pointerType) {
     if (railMode !== 'overlay' || Number(window.innerWidth) > PHONE_RAIL_BREAKPOINT) return false
-    return railPointerQuery?.matches === true
+    return pointerType === 'touch' || railPointerQuery?.matches === true
       || railHoverQuery?.matches === true
       || Number(window.navigator?.maxTouchPoints) > 0
   }
@@ -105,13 +106,16 @@ export function createOperationsShell({
 
   function armRailGesture() {
     railHoldTimer = undefined
-    if (!railPointer || !phoneRailGesture()) return
+    if (!railPointer || !phoneRailGesture('touch')) return
     railPointer.armed = true
     railLauncher?.setAttribute('data-prts-rail-gesture-active', '')
   }
 
+  let railInputType
   function onRailPointerDown(event) {
-    if (!phoneRailGesture() || railPointer || (event.button ?? 0) !== 0) return
+    railInputType = event.pointerType || 'mouse'
+    if (railInputType !== 'touch') return
+    if (!phoneRailGesture(event.pointerType) || railPointer || (event.button ?? 0) !== 0) return
     const pointerId = event.pointerId ?? 1
     railPointer = {
       pointerId,
@@ -159,7 +163,9 @@ export function createOperationsShell({
   }
 
   function onRailClick(event) {
-    if (phoneRailGesture() && Number(event?.detail) > 0) {
+    const inputType = event?.pointerType || railInputType
+    railInputType = undefined
+    if (phoneRailGesture(inputType) && inputType === 'touch' && Number(event?.detail) > 0) {
       event.preventDefault?.()
       return
     }
@@ -262,9 +268,19 @@ export function createOperationsShell({
     }, 1000)
   }
 
+  function flushSchemeProgress(pointer) {
+    if (pointer.frame !== undefined) window.cancelAnimationFrame(pointer.frame)
+    pointer.frame = undefined
+    if (pointer.progress !== undefined) {
+      pointer.gesture?.update?.(pointer.progress)
+      pointer.progress = undefined
+    }
+  }
+
   function settleSchemePointer({ commit = false } = {}) {
     const pointer = schemePointer
     if (!pointer) return
+    flushSchemeProgress(pointer)
     schemePointer = undefined
     try { schemeToggle?.releasePointerCapture?.(pointer.pointerId) } catch {}
     if (!pointer.dragging) return
@@ -313,19 +329,25 @@ export function createOperationsShell({
       }
     }
     event.preventDefault?.()
-    pointer.gesture?.update?.(schemePointerProgress(event))
+    pointer.progress = schemePointerProgress(event)
+    if (pointer.frame === undefined) pointer.frame = window.requestAnimationFrame(() => {
+      pointer.frame = undefined
+      if (schemePointer === pointer) flushSchemeProgress(pointer)
+    })
   }
 
   function onSchemePointerUp(event) {
     const pointer = schemePointer
     if (!pointer || (event.pointerId ?? 1) !== pointer.pointerId) return
-    const commit = pointer.dragging && schemePointerProgress(event) >= .5
+    if (pointer.dragging) pointer.progress = schemePointerProgress(event)
+    const commit = pointer.dragging && schemePointerProgress(event) >= SCHEME_COMMIT_PROGRESS
     settleSchemePointer({ commit })
   }
 
   function cancelSchemePointer() {
     const pointer = schemePointer
     if (!pointer) return
+    if (pointer.frame !== undefined) window.cancelAnimationFrame(pointer.frame)
     if (pointer.dragging) {
       try { pointer.gesture?.cancel?.() } catch {}
     }
@@ -353,7 +375,7 @@ export function createOperationsShell({
     const overlay = railMode === 'overlay'
     const open = overlay && root.hasAttribute('data-prts-rail-open')
     railLauncher.setAttribute('aria-expanded', String(open))
-    const closedLabel = phoneRailGesture() ? '长按并向下滑动打开 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')
@@ -418,12 +440,16 @@ export function createOperationsShell({
   }
 
   function onResponsiveChange() {
+    railInputType = undefined
     clearRailGesture()
     setRailViewport(window.innerWidth)
     syncRailState()
   }
 
+  let railPhoneQuery
   function bindResponsiveQueries() {
+    railPhoneQuery = window.matchMedia?.('(max-width: 640px)')
+    railPhoneQuery?.addEventListener?.('change', onResponsiveChange)
     railViewportQuery = window.matchMedia?.('(min-width: 1180px)')
     railPointerQuery = window.matchMedia?.('(pointer: coarse)')
     railHoverQuery = window.matchMedia?.('(hover: none)')
@@ -507,6 +533,9 @@ export function createOperationsShell({
     schemeToggle?.removeEventListener('lostpointercapture', onSchemeLostPointerCapture)
     window.removeEventListener?.('blur', cancelSchemePointer)
     themeDisable?.removeEventListener('click', disableTheme)
+    railPhoneQuery?.removeEventListener?.('change', onResponsiveChange)
+    railPhoneQuery = undefined
+    railInputType = undefined
     railViewportQuery?.removeEventListener?.('change', onResponsiveChange)
     railPointerQuery?.removeEventListener?.('change', onResponsiveChange)
     railHoverQuery?.removeEventListener?.('change', onResponsiveChange)

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

@@ -1,6 +1,8 @@
 import { createCursorAdapter } from './cursor-adapter.js'
 import { normalizePreferences } from './preferences.js'
 
+export const SCHEME_COMMIT_PROGRESS = .15
+
 const ROOT_ATTRIBUTES = [
   'data-dsh-prts',
   'data-prts-scheme',
@@ -244,11 +246,23 @@ export function createThemeController({ document, window, cssText, service, curs
   function updateRevealHud(session) {
     if (!session || session.settled) return
     const percentage = Math.round(revealProgress(session.progress) * 100)
-    if (session.hudEdge) session.hudEdge.dataset.prtsSchemeRevealSide = 'left'
-    root.style.setProperty('--prts-scheme-control-progress', String(session.progress))
-    root.style.setProperty('--prts-scheme-control-meter-height', `${revealProgress(session.progress) * 48}px`)
-    root.style.setProperty('--prts-scheme-control-value-image', revealValueImageUrl(percentage))
-    root.toggleAttribute(TRANSITION_ARMED_ATTRIBUTE, session.interactive && session.progress >= .5)
+    if (session.hudEdge && session.hudEdge.dataset.prtsSchemeRevealSide !== 'left') session.hudEdge.dataset.prtsSchemeRevealSide = 'left'
+    if (session.hudPercentage !== percentage) {
+      session.hudPercentage = percentage
+      const image = revealValueImageUrl(percentage)
+      if (session.hudAnimation?.effect?.setKeyframes) {
+        const frame = {
+          backgroundImage: image + ',linear-gradient(#ffd400,#ffd400)',
+          backgroundSize: '24px 11px,2px ' + (percentage * .48) + 'px',
+        }
+        session.hudAnimation.effect.setKeyframes([frame, frame])
+      } else {
+        root.style.setProperty('--prts-scheme-control-meter-height', `${percentage * .48}px`)
+        root.style.setProperty('--prts-scheme-control-value-image', image)
+      }
+    }
+    const armed = session.interactive && session.progress >= SCHEME_COMMIT_PROGRESS
+    if (root.hasAttribute(TRANSITION_ARMED_ATTRIBUTE) !== armed) root.toggleAttribute(TRANSITION_ARMED_ATTRIBUTE, armed)
   }
 
   function releaseRevealHud(session) {
@@ -361,11 +375,16 @@ export function createThemeController({ document, window, cssText, service, curs
       ], options, '::view-transition-new(prts-scheme-grid)')
       const mark = revealNamedAnimation([
         { offset: 0, translate: revealGroupTranslate(0), rotate: '45deg' },
-        { offset: .49, translate: revealGroupTranslate(session.geometry.width * .49), rotate: '45deg' },
-        { offset: .51, translate: revealGroupTranslate(session.geometry.width * .51), rotate: '225deg' },
+        { offset: SCHEME_COMMIT_PROGRESS - .01, translate: revealGroupTranslate(session.geometry.width * (SCHEME_COMMIT_PROGRESS - .01)), rotate: '45deg' },
+        { offset: SCHEME_COMMIT_PROGRESS + .01, translate: revealGroupTranslate(session.geometry.width * (SCHEME_COMMIT_PROGRESS + .01)), rotate: '225deg' },
         { offset: 1, translate: revealGroupTranslate(session.geometry.width), rotate: '225deg' },
       ], options, '::view-transition-group(prts-scheme-mark)')
       session.scrubAnimations = [clip, edge, node, grid, gridPhase, mark]
+      session.hudAnimation = revealNamedAnimation([{}], options, '::view-transition-new(prts-scheme-node)')
+      session.hudAnimation.pause?.()
+      session.hudAnimation.currentTime = 0
+      session.hudPercentage = undefined
+      updateRevealHud(session)
       for (const animation of session.scrubAnimations) {
         animation.pause?.()
         animation.currentTime = session.progress * session.duration
@@ -377,11 +396,10 @@ export function createThemeController({ document, window, cssText, service, curs
     if (!session || session.settled) return
     session.progress = revealProgress(value)
     session.revealX = session.progress * session.geometry.width
-    root.style.setProperty('--prts-scheme-reveal-x', `${session.revealX}px`)
+    if (!session.scrubAnimations) root.style.setProperty('--prts-scheme-reveal-x', `${session.revealX}px`)
     if (session.scrubAnimations) {
       try {
         for (const animation of session.scrubAnimations) {
-          animation.pause?.()
           animation.currentTime = session.progress * session.duration
         }
       } catch {}
@@ -402,12 +420,19 @@ export function createThemeController({ document, window, cssText, service, curs
     for (const animation of session?.scrubAnimations || []) {
       try { animation?.cancel?.() } catch {}
     }
-    if (session) session.scrubAnimations = undefined
+    session?.hudAnimation?.cancel?.()
+    if (session) {
+      session.scrubAnimations = undefined
+      session.hudAnimation = undefined
+      session.hudPercentage = undefined
+    }
   }
 
   function animateRevealTo(session, value, duration, easing) {
     if (!session || session.settled) return Promise.resolve(false)
     cancelRevealAnimation(session)
+    // Transfer the last HUD value once before the release animation takes over.
+    updateRevealHud(session)
     const targetProgress = revealProgress(value)
     const targetX = revealTargetX(session, targetProgress)
     if (!(duration > 0)) {
@@ -449,8 +474,8 @@ export function createThemeController({ document, window, cssText, service, curs
         { backgroundSize: `2px ${targetProgress * 48}px` },
       ], options, '::view-transition-new(prts-scheme-node)')
       const mark = revealNamedAnimation([
-        { translate: revealGroupTranslate(session.revealX), rotate: session.progress >= .5 ? '225deg' : '45deg' },
-        { translate: revealGroupTranslate(targetX), rotate: targetProgress >= .5 ? '225deg' : '45deg' },
+        { translate: revealGroupTranslate(session.revealX), rotate: session.progress >= SCHEME_COMMIT_PROGRESS ? '225deg' : '45deg' },
+        { translate: revealGroupTranslate(targetX), rotate: targetProgress >= SCHEME_COMMIT_PROGRESS ? '225deg' : '45deg' },
       ], options, '::view-transition-group(prts-scheme-mark)')
       animations = [clip, edge, node, grid, gridPhase, nodeProgress, mark]
     } catch {
@@ -608,7 +633,7 @@ export function createThemeController({ document, window, cssText, service, curs
     let settled = false
     return {
       update(value) { if (!settled) progress = revealProgress(value) },
-      finish(commit = progress >= .5) {
+      finish(commit = progress >= SCHEME_COMMIT_PROGRESS) {
         if (settled) return root.dataset.prtsScheme
         settled = true
         return commit ? setTheme(target, { animate: false }) : source