@ash-qw/dsh-theme-prts 0.1.91

package/src/client/status-projection.js

@@ -0,0 +1,79 @@
+export const EMPTY_STATUS = Object.freeze({
+  connection: 'unknown',
+  connectionLabel: '未知',
+})
+
+const CONNECTION_LABELS = Object.freeze({
+  connected: '已连接',
+  connecting: '连接中',
+  disconnected: '已断开',
+  unknown: '未知',
+})
+
+function snapshotOf(source) {
+  try {
+    return source?.getSnapshot?.()
+  } catch {
+    return undefined
+  }
+}
+
+function subscribeTo(source, listener) {
+  try {
+    return typeof source?.subscribe === 'function' ? source.subscribe(listener) : () => {}
+  } catch {
+    return () => {}
+  }
+}
+
+function connectionState(connection) {
+  if (!connection) return 'unknown'
+  const stateSource = connection.state ?? connection.status
+  const state = snapshotOf(stateSource)
+  if (state === 'connected') return 'connected'
+  if (state === 'connecting' || state === 'reconnecting') return 'connecting'
+  if (state === 'disconnected') return 'disconnected'
+  if (connection.hostDescription?.getSnapshot) {
+    return snapshotOf(connection.hostDescription) ? 'connected' : 'connecting'
+  }
+  return 'unknown'
+}
+
+export function projectHarnessStatus({ connection } = {}) {
+  const connectionValue = connectionState(connection)
+  return {
+    connection: connectionValue,
+    connectionLabel: CONNECTION_LABELS[connectionValue],
+  }
+}
+
+function equalStatus(previous, next) {
+  return previous?.connection === next.connection
+    && previous?.connectionLabel === next.connectionLabel
+}
+
+export function createHarnessStatusSource({ connection, onChange }) {
+  let disposed = false
+  let lastStatus
+  const stops = []
+
+  function publish() {
+    if (disposed) return
+    const nextStatus = projectHarnessStatus({ connection })
+    if (equalStatus(lastStatus, nextStatus)) return
+    lastStatus = nextStatus
+    onChange(nextStatus)
+  }
+
+  stops.push(subscribeTo(connection?.hostDescription, publish))
+  stops.push(subscribeTo(connection?.state ?? connection?.status, publish))
+  publish()
+
+  return {
+    refresh: publish,
+    dispose() {
+      disposed = true
+      for (const stop of stops.splice(0).reverse()) stop()
+    },
+  }
+}

package/src/client/terrain-motion-adapter.js

@@ -0,0 +1,188 @@
+const PARALLAX_RATIO = 0.2
+const TILE_HEIGHT = 4800
+const DESKTOP_MAX_LAG = 42
+const TABLET_MAX_LAG = 20
+const PHONE_BREAKPOINT = 640
+const TABLET_BREAKPOINT = 1024
+const SETTLE_TIME_MS = 260
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value))
+}
+
+export function createTerrainMotionAdapter({ document, window }) {
+  if (!document || !window) {
+    return { update() {}, dispose() {}, inspect: () => ({ current: 0, target: 0 }) }
+  }
+
+  let preferences = {}
+  let operation
+  let scroller
+  let layer
+  let observer
+  let frame
+  let mediaQuery
+  let mediaListener
+  let lastFrameTime = 0
+  let lastScroll = 0
+  let viewportMode
+  let current = 0
+  let target = 0
+
+  const motionReduced = () => preferences.motion === 'reduced' || Boolean(mediaQuery?.matches)
+  const phoneStatic = () => window.innerWidth <= PHONE_BREAKPOINT
+  const maxLag = () => window.innerWidth <= TABLET_BREAKPOINT ? TABLET_MAX_LAG : DESKTOP_MAX_LAG
+  const targetFor = scrollTop => phoneStatic() ? 0 : scrollTop * PARALLAX_RATIO
+
+  function paint() {
+    if (!layer) return
+    const wrapped = ((current % TILE_HEIGHT) + TILE_HEIGHT) % TILE_HEIGHT
+    layer.style.transform = `translate3d(0, -${wrapped.toFixed(3)}px, 0)`
+  }
+
+  function cancelFrame() {
+    if (frame !== undefined) window.cancelAnimationFrame?.(frame)
+    frame = undefined
+    lastFrameTime = 0
+  }
+
+  function animate(timestamp) {
+    frame = undefined
+    const elapsed = lastFrameTime ? Math.min(48, Math.max(1, timestamp - lastFrameTime)) : 16
+    lastFrameTime = timestamp
+    const response = SETTLE_TIME_MS / 3
+    const alpha = 1 - Math.exp(-elapsed / response)
+    current += (target - current) * alpha
+    if (Math.abs(target - current) < 0.08) current = target
+    paint()
+    if (current !== target) frame = window.requestAnimationFrame(animate)
+    else lastFrameTime = 0
+  }
+
+  function snap() {
+    cancelFrame()
+    current = target
+    paint()
+  }
+
+  function schedule() {
+    if (current === target || frame !== undefined) return
+    frame = window.requestAnimationFrame(animate)
+  }
+
+  function syncFromScroll(forceSnap = false) {
+    if (!scroller) return
+    const nextScroll = Number(scroller.scrollTop) || 0
+    const delta = Math.abs(nextScroll - lastScroll)
+    lastScroll = nextScroll
+    target = targetFor(nextScroll)
+    const jumpThreshold = Math.max(720, (Number(scroller.clientHeight) || window.innerHeight || 800) * 0.9)
+    if (forceSnap || phoneStatic() || motionReduced() || delta >= jumpThreshold) {
+      snap()
+      return
+    }
+    const lag = maxLag()
+    current = clamp(current, target - lag, target + lag)
+    paint()
+    schedule()
+  }
+
+  function onScroll() {
+    syncFromScroll(false)
+  }
+
+  function unbindScroller() {
+    scroller?.removeEventListener('scroll', onScroll)
+    scroller = undefined
+    layer?.remove()
+    layer = undefined
+    cancelFrame()
+  }
+
+  function bindScroller(next) {
+    if (next === scroller && layer?.isConnected) return
+    unbindScroller()
+    scroller = next
+    if (!scroller || !operation) return
+    layer = document.createElement('div')
+    layer.setAttribute('data-prts-terrain-layer', '')
+    layer.setAttribute('aria-hidden', 'true')
+    operation.insertBefore(layer, operation.firstChild)
+    lastScroll = Number(scroller.scrollTop) || 0
+    target = targetFor(lastScroll)
+    current = target
+    paint()
+    scroller.addEventListener('scroll', onScroll, { passive: true })
+  }
+
+  function findScroller() {
+    const nextOperation = document.querySelector('[data-prts-region="operation"]')
+    if (nextOperation !== operation) {
+      unbindScroller()
+      observer?.disconnect()
+      operation = nextOperation
+      if (operation && window.MutationObserver) {
+        observer = new window.MutationObserver(findScroller)
+        observer.observe(operation, { childList: true, subtree: true })
+      }
+    }
+    const nextScroller = operation?.querySelector('[data-conversation-scroll]')
+    bindScroller(nextScroller)
+  }
+
+  function onViewportChange() {
+    const nextMode = window.innerWidth <= PHONE_BREAKPOINT
+      ? 'phone'
+      : window.innerWidth <= TABLET_BREAKPOINT ? 'tablet' : 'desktop'
+    if (nextMode === viewportMode) return
+    viewportMode = nextMode
+    syncFromScroll(true)
+  }
+
+  function attachMotionPreference() {
+    mediaQuery = window.matchMedia?.('(prefers-reduced-motion: reduce)')
+    mediaListener = onViewportChange
+    mediaQuery?.addEventListener?.('change', mediaListener)
+    if (!mediaQuery?.addEventListener) mediaQuery?.addListener?.(mediaListener)
+  }
+
+  function detachMotionPreference() {
+    if (mediaQuery && mediaListener) {
+      mediaQuery.removeEventListener?.('change', mediaListener)
+      mediaQuery.removeListener?.(mediaListener)
+    }
+    mediaQuery = undefined
+    mediaListener = undefined
+  }
+
+  attachMotionPreference()
+  viewportMode = window.innerWidth <= PHONE_BREAKPOINT ? 'phone' : window.innerWidth <= TABLET_BREAKPOINT ? 'tablet' : 'desktop'
+  window.addEventListener?.('resize', onViewportChange, { passive: true })
+
+  return {
+    update(nextPreferences = {}) {
+      preferences = nextPreferences
+      if (!preferences.enabled) {
+        unbindScroller()
+        observer?.disconnect()
+        observer = undefined
+        operation = undefined
+        return
+      }
+      findScroller()
+      if (layer) layer.hidden = preferences.texture === 'off'
+      syncFromScroll(true)
+    },
+    inspect() {
+      return { current, target, lastScroll, mounted: Boolean(layer?.isConnected) }
+    },
+    dispose() {
+      unbindScroller()
+      observer?.disconnect()
+      observer = undefined
+      operation = undefined
+      detachMotionPreference()
+      window.removeEventListener?.('resize', onViewportChange)
+    },
+  }
+}

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

@@ -0,0 +1,134 @@
+import { normalizePreferences } from './preferences.js'
+
+const ROOT_ATTRIBUTES = [
+  'data-dsh-prts',
+  'data-prts-scheme',
+  'data-prts-texture',
+  'data-prts-glass',
+  'data-prts-motion',
+  'data-prts-particle-pattern',
+]
+
+function themeIdentity(value) {
+  if (typeof value === 'string') return value
+  if (!value || typeof value !== 'object') return ''
+  const active = value.active
+  if (active && typeof active === 'object') {
+    const resolved = active.colorScheme || active.scheme || active.appearance || active.mode || active.id || active.name
+    if (resolved) return resolved
+  }
+  return value.colorScheme || value.scheme || value.appearance || value.mode || value.id || value.name || value.preference || ''
+}
+
+function resolveScheme(value) {
+  const identity = String(themeIdentity(value)).toLowerCase()
+  return identity.includes('dark') || identity.includes('night') ? 'dark' : 'light'
+}
+
+export function createThemeController({ document, window, cssText, service }) {
+  if (!document || !window) return { apply() {}, sync() {}, refresh() {}, setTheme() {}, toggle() {}, dispose() {} }
+
+  const root = document.documentElement
+  let style
+  let disposed = false
+  let refreshRevision = 0
+  let setRevision = 0
+
+  function clearThemeState() {
+    for (const attribute of ROOT_ATTRIBUTES) root.removeAttribute(attribute)
+  }
+
+  function removeOwnedState() {
+    disposed = true
+    refreshRevision += 1
+    setRevision += 1
+    clearThemeState()
+    root.removeAttribute('data-dsh-prts-settings')
+    style?.remove()
+    style = undefined
+  }
+
+  function ensureStyle() {
+    if (!style?.isConnected) {
+      style = document.createElement('style')
+      style.dataset.plugin = 'dsh-theme-prts'
+      style.dataset.pluginCss = 'dsh-theme-prts/prts.css'
+      document.head.appendChild(style)
+    }
+    if (style.textContent !== cssText) style.textContent = cssText
+    root.setAttribute('data-dsh-prts-settings', '')
+  }
+
+  function sync(value) {
+    if (disposed) return
+    root.dataset.prtsScheme = resolveScheme(value)
+  }
+
+  function fallbackTheme() {
+    return root.dataset.theme || root.getAttribute('data-color-scheme') || root.style.colorScheme || 'light'
+  }
+
+  function refresh() {
+    const revision = ++refreshRevision
+    let value
+    try { value = service?.getTheme?.() } catch { value = undefined }
+    if (value && typeof value.then === 'function') {
+      return value.then(next => {
+        if (!disposed && revision === refreshRevision) sync(next)
+        return next
+      }).catch(() => {
+        if (!disposed && revision === refreshRevision) sync(fallbackTheme())
+      })
+    }
+    sync(value ?? fallbackTheme())
+    return value
+  }
+
+  function setTheme(id) {
+    const target = id === 'dark' ? 'dark' : 'light'
+    const revision = ++setRevision
+    try {
+      const result = service?.setTheme?.(target)
+      if (result && typeof result.then === 'function') {
+        return result.then(() => {
+          if (!disposed && revision === setRevision) sync(target)
+          return target
+        }).catch(() => {
+          if (!disposed && revision === setRevision) refresh()
+          return root.dataset.prtsScheme
+        })
+      }
+      if (!disposed && revision === setRevision) sync(target)
+    } catch {
+      if (!disposed && revision === setRevision) sync(target)
+    }
+    return target
+  }
+
+  function toggle() {
+    return setTheme(root.dataset.prtsScheme === 'dark' ? 'light' : 'dark')
+  }
+
+  return {
+    apply(value) {
+      disposed = false
+      const preferences = normalizePreferences(value)
+      ensureStyle()
+      if (!preferences.enabled) {
+        clearThemeState()
+        return
+      }
+      root.setAttribute('data-dsh-prts', '')
+      root.dataset.prtsTexture = preferences.texture
+      root.dataset.prtsGlass = preferences.glass
+      root.dataset.prtsMotion = preferences.motion
+      root.dataset.prtsParticlePattern = 'orthogonal'
+      refresh()
+    },
+    sync,
+    refresh,
+    setTheme,
+    toggle,
+    dispose: removeOwnedState,
+  }
+}

package/src/client/theme-controller.js

@@ -0,0 +1,119 @@
+import { normalizePreferences } from './preferences.js'
+
+const ROOT_ATTRIBUTES = [
+  'data-dsh-prts',
+  'data-prts-scheme',
+  'data-prts-texture',
+  'data-prts-glass',
+  'data-prts-motion',
+  'data-prts-particle-pattern',
+]
+
+function themeIdentity(value) {
+  if (typeof value === 'string') return value
+  if (!value || typeof value !== 'object') return ''
+  const active = value.active
+  if (active && typeof active === 'object') {
+    const resolved = active.colorScheme || active.scheme || active.appearance || active.mode || active.id || active.name
+    if (resolved) return resolved
+  }
+  return value.colorScheme || value.scheme || value.appearance || value.mode || value.id || value.name || value.preference || ''
+}
+
+function resolveScheme(value) {
+  const identity = String(themeIdentity(value)).toLowerCase()
+  return identity.includes('dark') || identity.includes('night') ? 'dark' : 'light'
+}
+
+export function createThemeController({ document, window, cssText, service }) {
+  if (!document || !window) return { apply() {}, sync() {}, refresh() {}, setTheme() {}, toggle() {}, dispose() {} }
+
+  const root = document.documentElement
+  let style
+  let disposed = false
+  let refreshRevision = 0
+
+  function clearThemeState() {
+    for (const attribute of ROOT_ATTRIBUTES) root.removeAttribute(attribute)
+  }
+
+  function removeOwnedState() {
+    disposed = true
+    refreshRevision += 1
+    clearThemeState()
+    root.removeAttribute('data-dsh-prts-settings')
+    style?.remove()
+    style = undefined
+  }
+
+  function ensureStyle() {
+    if (!style?.isConnected) {
+      style = document.createElement('style')
+      style.dataset.plugin = 'dsh-theme-prts'
+      style.dataset.pluginCss = 'dsh-theme-prts/prts.css'
+      document.head.appendChild(style)
+    }
+    if (style.textContent !== cssText) style.textContent = cssText
+    root.setAttribute('data-dsh-prts-settings', '')
+  }
+
+  function sync(value) {
+    if (disposed) return
+    root.dataset.prtsScheme = resolveScheme(value)
+  }
+
+  function fallbackTheme() {
+    return root.dataset.theme || root.getAttribute('data-color-scheme') || root.style.colorScheme || 'light'
+  }
+
+  function refresh() {
+    const revision = ++refreshRevision
+    let value
+    try { value = service?.getTheme?.() } catch { value = undefined }
+    if (value && typeof value.then === 'function') {
+      value.then(next => {
+        if (!disposed && revision === refreshRevision) sync(next)
+      }).catch(() => {
+        if (!disposed && revision === refreshRevision) sync(fallbackTheme())
+      })
+      return
+    }
+    sync(value ?? fallbackTheme())
+  }
+
+  function setTheme(id) {
+    const target = id === 'dark' ? 'dark' : 'light'
+    sync(target)
+    try {
+      const result = service?.setTheme?.(target)
+      result?.then?.(() => refresh()).catch?.(() => {})
+    } catch {}
+  }
+
+  function toggle() {
+    setTheme(root.dataset.prtsScheme === 'dark' ? 'light' : 'dark')
+  }
+
+  return {
+    apply(value) {
+      disposed = false
+      const preferences = normalizePreferences(value)
+      ensureStyle()
+      if (!preferences.enabled) {
+        clearThemeState()
+        return
+      }
+      root.setAttribute('data-dsh-prts', '')
+      root.dataset.prtsTexture = preferences.texture
+      root.dataset.prtsGlass = preferences.glass
+      root.dataset.prtsMotion = preferences.motion
+      root.dataset.prtsParticlePattern = 'orthogonal'
+      refresh()
+    },
+    sync,
+    refresh,
+    setTheme,
+    toggle,
+    dispose: removeOwnedState,
+  }
+}