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

package/package.json

@@ -1,9 +1,18 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "0.1.92",
+  "version": "0.1.94",
   "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,8 @@ 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 = 8
+const GEOMETRY_SETTLE_STABLE_FRAMES = 2
 let scaleInstanceSeed = 0
 
 function clamp(value, minimum, maximum) {
@@ -764,6 +766,10 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
   let scaleLengths = resolveConversationScaleLengths(focusContrast)
   let contentLeft
   let geometryDirty = true
+  let geometrySettleFrame
+  let geometrySettleFramesRemaining = 0
+  let geometrySettleStableFrames = 0
+  let geometrySettleSignature
   let observedOperationWidth
   let observedOperationHeight
   let started = false
@@ -785,6 +791,80 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
   const currentTime = timestamp => Number.isFinite(timestamp)
     ? timestamp
     : window?.performance?.now?.() ?? Date.now()
+  const phoneScaleHidden = () => Number(window?.innerWidth) <= 640
+
+  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) {
+      geometrySettleStableFrames = 0
+    } else if (signature !== geometrySettleSignature) {
+      geometrySettleSignature = signature
+      geometrySettleStableFrames = 1
+      geometryDirty = true
+      obstructionDirty = true
+      schedule()
+    } else {
+      geometrySettleStableFrames += 1
+    }
+    if (geometrySettleStableFrames >= GEOMETRY_SETTLE_STABLE_FRAMES) {
+      geometrySettleFramesRemaining = 0
+      return
+    }
+    if (geometrySettleFramesRemaining > 0) {
+      geometrySettleFrame = requestFrame(sampleGeometryStabilization)
+    }
+  }
+
+  function requestGeometryStabilization() {
+    if (!started || failed || phoneScaleHidden()) return
+    geometrySettleFramesRemaining = GEOMETRY_SETTLE_FRAME_LIMIT
+    geometrySettleStableFrames = 0
+    if (geometrySettleFrame === undefined) {
+      geometrySettleFrame = requestFrame(sampleGeometryStabilization)
+    }
+  }
+
+  function stopGeometryStabilization() {
+    cancelFrame(geometrySettleFrame)
+    geometrySettleFrame = undefined
+    geometrySettleFramesRemaining = 0
+    geometrySettleStableFrames = 0
+    geometrySettleSignature = undefined
+  }
+
+  function onHostGeometryChange() {
+    if (phoneScaleHidden()) {
+      stopGeometryStabilization()
+      return
+    }
+    requestGeometryStabilization()
+    schedule(true)
+  }
 
   function reducedMotion() {
     return window?.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches
@@ -997,7 +1077,6 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
       scanPending = true
       fullScanPending = true
     }
-    if (resizeActive) return
     if (frame !== undefined || failed) return
     frame = requestFrame(flush)
   }
@@ -1117,10 +1196,12 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
     setScaleResizeState(resizeActive)
     cancelJump()
     resetWave()
+    requestGeometryStabilization()
     return true
   }
 
   function disconnectRoots() {
+    stopGeometryStabilization()
     clearTimers()
     hidePreview()
     disconnectPreviewObserver()
@@ -2129,10 +2210,22 @@ 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
+          if (phoneScaleHidden()) {
+            stopGeometryStabilization()
+            if (resizeSettleTimer !== undefined) window?.clearTimeout?.(resizeSettleTimer)
+            resizeSettleTimer = undefined
+            setScaleResizeState(false)
+            return
+          }
+          requestGeometryStabilization()
           const operationEntry = entries.find(entry => entry.target === operation)
           const width = Number(operationEntry?.contentRect?.width)
           const height = Number(operationEntry?.contentRect?.height)
@@ -2151,12 +2244,8 @@ export function createConversationScaleAdapter({ document, window, sessions }) {
             return
           }
           if (!resizeActive) {
+            schedule()
             setScaleResizeState(true)
-            if (frame !== undefined) {
-              if (window?.cancelAnimationFrame) window.cancelAnimationFrame(frame)
-              else window?.clearTimeout?.(frame)
-              frame = undefined
-            }
           }
           if (resizeSettleTimer !== undefined) window?.clearTimeout?.(resizeSettleTimer)
           resizeSettleTimer = window?.setTimeout?.(() => {
@@ -2173,6 +2262,13 @@ 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 (phoneScaleHidden()) return
+          if (external.some(mutation =>
+            operation?.contains?.(mutation.target)
+            || mutation.target?.contains?.(operation)
+            || mutation.target?.matches?.('header, [data-host-header], [data-slot*="header" i]')
+            || mutationAffectsOverlay(mutation)
+          )) requestGeometryStabilization()
           const historyRelevant = external.some(mutation =>
             mutation.type === 'childList'
               && operation?.contains?.(mutation.target)
@@ -2210,9 +2306,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,