@ash-qw/dsh-theme-prts 0.1.99 → 0.1.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "0.1.99",
+  "version": "0.1.101",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web",
@@ -59,7 +59,7 @@
   ],
   "scripts": {
     "build": "node scripts/build.mjs",
-    "test": "node --test tests/*.test.mjs",
+    "test": "node --test --test-concurrency=1 tests/*.test.mjs",
     "test:e2e": "playwright test",
     "check": "npm run build && npm test",
     "pack:plugin": "npm run check && npm pack",

package/src/client/composer-glass-adapter.js

@@ -61,6 +61,14 @@ function markPopup(popup, kind) {
   }
 }
 
+function hasVisibleText(element) {
+  if (typeof element?.innerText === 'string') return element.innerText.trim().length > 0
+  const clone = element?.cloneNode?.(true)
+  if (!clone) return false
+  for (const hidden of clone.querySelectorAll?.('[hidden], [aria-hidden="true"]') ?? []) hidden.remove()
+  return clone.textContent?.trim().length > 0
+}
+
 function fallbackComposerForms(document) {
   const forms = new Set()
   for (const root of document?.querySelectorAll?.(FALLBACK_COMPOSER_ROOT_SELECTOR) ?? []) {
@@ -147,12 +155,14 @@ export function createComposerGlassAdapter({ document, window }) {
       for (const trigger of composer.querySelectorAll('button[aria-haspopup="menu"], button[aria-haspopup="listbox"]')) {
         const menu = linkedMenu(document, trigger)
           ?? trigger.parentElement?.querySelector('[role="menu"][aria-busy], [role="listbox"][aria-busy]')
-        const isModel = trigger.matches('[class*="_7KE1Ra_"]')
-          || menu?.hasAttribute('aria-busy')
         const isCommands = trigger.getAttribute('aria-haspopup') === 'listbox'
           || trigger.getAttribute('aria-label') === 'Commands'
           || trigger.matches('[class*="uV2eYG_add"]')
-        const kind = isModel ? 'model' : isCommands ? 'action' : 'action'
+        const isModel = !isCommands && (
+          menu?.hasAttribute('aria-busy')
+          || (trigger.getAttribute('aria-haspopup') === 'menu' && hasVisibleText(trigger))
+        )
+        const kind = isModel ? 'model' : 'action'
         mark(trigger, CONTROL_ATTRIBUTE, kind)
         markPopup(menu, kind)
       }

package/src/client/facility-geometry.js

@@ -7,6 +7,9 @@ export const FACILITY_GEOMETRY = Object.freeze({
   topOpening: 50,
   topInner: 40,
   topDepth: 10 / 3,
+  sessionTopOpening: 50,
+  sessionTopInner: 36.5,
+  sessionTopDepth: 4.5,
 })
 
 function number(value) {
@@ -17,7 +20,7 @@ function point(x, y) {
   return `${number(x)} ${number(y)}`
 }
 
-export function createFacilityPath({ width, height, topNotch = false } = {}) {
+export function createFacilityPath({ width, height, topNotch = false, sessionNotch = false } = {}) {
   if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 2 || height <= FACILITY_GEOMETRY.sideOpening + 2) return ''
 
   const halfStroke = FACILITY_GEOMETRY.stroke / 2
@@ -29,12 +32,15 @@ export function createFacilityPath({ width, height, topNotch = false } = {}) {
   const centerY = height / 2
   const points = [point(left + FACILITY_GEOMETRY.corner, top)]
 
-  if (topNotch && width >= FACILITY_GEOMETRY.topOpening + FACILITY_GEOMETRY.corner * 2 + FACILITY_GEOMETRY.stroke) {
+  const topOpening = sessionNotch ? FACILITY_GEOMETRY.sessionTopOpening : FACILITY_GEOMETRY.topOpening
+  const topInner = sessionNotch ? FACILITY_GEOMETRY.sessionTopInner : FACILITY_GEOMETRY.topInner
+  const topDepth = sessionNotch ? FACILITY_GEOMETRY.sessionTopDepth : FACILITY_GEOMETRY.topDepth
+  if (topNotch && width >= topOpening + FACILITY_GEOMETRY.corner * 2 + FACILITY_GEOMETRY.stroke) {
     points.push(
-      point(centerX - FACILITY_GEOMETRY.topOpening / 2, top),
-      point(centerX - FACILITY_GEOMETRY.topInner / 2, top + FACILITY_GEOMETRY.topDepth),
-      point(centerX + FACILITY_GEOMETRY.topInner / 2, top + FACILITY_GEOMETRY.topDepth),
-      point(centerX + FACILITY_GEOMETRY.topOpening / 2, top),
+      point(centerX - topOpening / 2, top),
+      point(centerX - topInner / 2, top + topDepth),
+      point(centerX + topInner / 2, top + topDepth),
+      point(centerX + topOpening / 2, top),
     )
   }
 

package/src/client/facility-vector.js

@@ -1,4 +1,4 @@
-import { createFacilityPath } from './facility-geometry.js'
+import { createFacilityPath, FACILITY_GEOMETRY } from './facility-geometry.js'
 import { configureSessionLifeline } from './session-lifeline.js'
 
 const SVG_NS = 'http://www.w3.org/2000/svg'
@@ -123,9 +123,15 @@ function appendSessionPickup(document, graphic) {
     'clip-path': `url(#${clipId})`,
   })
   for (const strand of ['back', 'core', 'front']) {
-    lifeline.append(svgNode(document, 'path', {
+    const filament = svgNode(document, 'g', {
       'data-prts-session-lifeline-filament': strand,
-    }))
+    })
+    for (const layer of ['halo', 'body', 'core']) {
+      filament.append(svgNode(document, 'path', {
+        'data-prts-session-lifeline-layer': layer,
+      }))
+    }
+    lifeline.append(filament)
   }
 
   const pickup = svgNode(document, 'g', {
@@ -161,6 +167,28 @@ function appendSessionPickup(document, graphic) {
   graphic.insertBefore(pickup, graphic.querySelector('[data-prts-facility-layer="outline"]'))
 }
 
+function appendSessionStatusUnderlay(document, graphic) {
+  const surface = graphic.querySelector('[data-prts-facility-layer="surface"]')
+  if (!surface) return
+  if (!graphic.querySelector('[data-prts-session-status-underlay]')) {
+    graphic.insertBefore(svgNode(document, 'path', {
+      'data-prts-session-status-underlay': '',
+      'aria-hidden': 'true',
+      transform: 'translate(3 2)',
+      'shape-rendering': 'geometricPrecision',
+    }), surface)
+  }
+  if (!graphic.querySelector('[data-prts-session-idle-indicator]')) {
+    graphic.insertBefore(svgNode(document, 'rect', {
+      'data-prts-session-idle-indicator': '',
+      'aria-hidden': 'true',
+      y: '2.5',
+      width: '50',
+      height: '2.5',
+    }), surface)
+  }
+}
+
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value))
 }
@@ -173,7 +201,7 @@ function sessionLifelineGeometry(width, height) {
   return { start, end, baseline, lift }
 }
 
-export function ensureFacilityGraphic(document, owner, { kind, topNotch = false, texture = 'none' } = {}) {
+export function ensureFacilityGraphic(document, owner, { kind, topNotch = false, sessionNotch = false, texture = 'none' } = {}) {
   if (!owner) return null
   let graphic = owner.querySelector?.(':scope > svg[data-prts-facility-svg]')
   if (!graphic) {
@@ -199,9 +227,13 @@ export function ensureFacilityGraphic(document, owner, { kind, topNotch = false,
     owner.insertBefore(graphic, owner.firstChild)
   }
   if (texture === 'silhouette' && !graphic.querySelector('[data-prts-facility-silhouette]')) appendSilhouetteScene(document, graphic)
-  if (texture === 'pickup' && !graphic.querySelector('[data-prts-session-pickup]')) appendSessionPickup(document, graphic)
+  if (texture === 'pickup') {
+    appendSessionStatusUnderlay(document, graphic)
+    if (!graphic.querySelector('[data-prts-session-pickup]')) appendSessionPickup(document, graphic)
+  }
   graphic.setAttribute('data-prts-facility-svg', kind)
   graphic.toggleAttribute('data-prts-top-notch', Boolean(topNotch))
+  graphic.toggleAttribute('data-prts-session-notch', Boolean(sessionNotch))
   if (!owner.hasAttribute('data-prts-facility-texture')) owner.setAttribute('data-prts-facility-texture', texture)
   return graphic
 }
@@ -216,19 +248,24 @@ function setReady(owner, ready) {
 export function renderFacilityGraphic(owner, { width, height } = {}) {
   const graphic = owner?.querySelector?.(':scope > svg[data-prts-facility-svg]')
   const topNotch = graphic?.hasAttribute('data-prts-top-notch')
-  const path = createFacilityPath({ width, height, topNotch })
+  const sessionNotch = graphic?.hasAttribute('data-prts-session-notch')
+  const path = createFacilityPath({ width, height, topNotch, sessionNotch })
   if (!graphic || !path) {
     owner?.removeAttribute?.('data-prts-facility-size')
     setReady(owner, false)
     return false
   }
 
-  const size = `${Number(width.toFixed(3))}x${Number(height.toFixed(3))}`
+  const size = `${Number(width.toFixed(3))}x${Number(height.toFixed(3))}:${topNotch ? 't' : '-'}${sessionNotch ? 's' : '-'}`
   const lifeline = graphic.querySelector('[data-prts-session-lifeline]')
   const lifelineGeometry = lifeline ? sessionLifelineGeometry(width, height) : undefined
   if (owner.getAttribute('data-prts-facility-size') !== size) {
     graphic.setAttribute('viewBox', `0 0 ${Number(width.toFixed(3))} ${Number(height.toFixed(3))}`)
     for (const layer of graphic.querySelectorAll('[data-prts-facility-layer], [data-prts-facility-clip]')) layer.setAttribute('d', path)
+    const statusUnderlay = graphic.querySelector('[data-prts-session-status-underlay]')
+    statusUnderlay?.setAttribute('d', createFacilityPath({ width, height }))
+    const idleIndicator = graphic.querySelector('[data-prts-session-idle-indicator]')
+    idleIndicator?.setAttribute('x', String(Number((width / 2 - 25).toFixed(3))))
     const silhouette = graphic.querySelector('[data-prts-facility-silhouette]')
     if (silhouette) {
       const availableHeight = Math.max(1, height - 2)

package/src/client/index.js

@@ -86,7 +86,12 @@ export function applyPrtsPlugin(ctx, environment) {
   const toBottom = createToBottomAdapter({ document, window })
   const conversationControls = createConversationControlAdapter({ document, window })
   const layoutDiagnostics = createLayoutStabilityDiagnostics({ document, window })
-  const sidebarControls = createSidebarControlAdapter({ document, window })
+  const sidebarControls = createSidebarControlAdapter({
+    document,
+    window,
+    sessions: contextService(ctx, 'sessions'),
+    workspaces: contextService(ctx, 'workspaces'),
+  })
   const floatingGlass = createFloatingGlassAdapter({ document, window })
   const adapter = createRc7Adapter({ document })
   const hostGeometry = createHostGeometryAdapter({ document, window })
@@ -193,8 +198,24 @@ export function applyPrtsPlugin(ctx, environment) {
         persistAndApply(updatePreferenceValue(preferences, key, value))
       },
       onPreferencePreview(key, value) {
-        if (key !== 'particleTraversalSpeed') return
-        particleField.update(updatePreferenceValue(preferences, key, value))
+        if (key === 'particleTraversalSpeed') {
+          particleField.update(updatePreferenceValue(preferences, key, value))
+          return
+        }
+        if (key === 'sessionFlowSpeed') {
+          const preview = updatePreferenceValue(preferences, key, value)
+          document.documentElement.dataset.prtsSessionFlowSpeed = String(preview.sessionFlowSpeed)
+          return
+        }
+        const sessionFlowColorProperties = {
+          sessionFlowColorBack: '--prts-session-flow-back',
+          sessionFlowColorCore: '--prts-session-flow-core',
+          sessionFlowColorFront: '--prts-session-flow-front',
+        }
+        if (sessionFlowColorProperties[key]) {
+          document.documentElement.dataset.prtsSessionFlowPalette = 'custom'
+          document.documentElement.style.setProperty(sessionFlowColorProperties[key], String(value))
+        }
       },
       onVisualReset() {
         persistAndApply({

package/src/client/preferences.js

@@ -4,9 +4,20 @@ export const PARTICLE_TRAVERSAL_SPEED_MIN = 0
 export const PARTICLE_TRAVERSAL_SPEED_MAX = 2
 export const PARTICLE_TRAVERSAL_SPEED_STEP = 0.25
 export const PARTICLE_TRAVERSAL_SPEED_DEFAULT = 1
+export const SESSION_FLOW_SPEED_MIN = 0.25
+export const SESSION_FLOW_SPEED_MAX = 2
+export const SESSION_FLOW_SPEED_STEP = 0.25
+export const SESSION_FLOW_SPEED_DEFAULT = 1
+
+export const SESSION_FLOW_PALETTES = Object.freeze({
+  triad: Object.freeze({ back: '#f7ddeb', core: '#65ddb0', front: '#6eb7f3' }),
+  rhodes: Object.freeze({ back: '#b9edf4', core: '#5ccddb', front: '#5a9ee6' }),
+  amber: Object.freeze({ back: '#ffe6a3', core: '#f0c800', front: '#ee8f42' }),
+  alert: Object.freeze({ back: '#ffc0b8', core: '#ee625a', front: '#db5b8c' }),
+})
 
 export const DEFAULT_PREFERENCES = Object.freeze({
-  version: 9,
+  version: 12,
   enabled: false,
   preset: 'standard-tactical',
   texture: 'full',
@@ -19,6 +30,12 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   particlePattern: 'orthogonal',
   railDefaultHidden: false,
   sessionFlow: true,
+  sessionGlow: true,
+  sessionFlowPalette: 'triad',
+  sessionFlowColorBack: SESSION_FLOW_PALETTES.triad.back,
+  sessionFlowColorCore: SESSION_FLOW_PALETTES.triad.core,
+  sessionFlowColorFront: SESSION_FLOW_PALETTES.triad.front,
+  sessionFlowSpeed: SESSION_FLOW_SPEED_DEFAULT,
   conversationStyle: 'native',
 })
 
@@ -61,7 +78,7 @@ export const PREFERENCE_GROUPS = Object.freeze({
   material: Object.freeze(['glass']),
   accessibility: Object.freeze(['motion', 'bootAnimation']),
   navigation: Object.freeze(['railDefaultHidden']),
-  conversation: Object.freeze(['conversationStyle']),
+  conversation: Object.freeze(['sessionFlow', 'sessionGlow', 'sessionFlowPalette', 'sessionFlowColorBack', 'sessionFlowColorCore', 'sessionFlowColorFront', 'sessionFlowSpeed', 'conversationStyle']),
 })
 
 const TEXTURES = new Set(['off', 'restrained', 'full'])
@@ -70,6 +87,8 @@ const MOTIONS = new Set(['system', 'reduced'])
 const PARTICLE_DENSITIES = new Set(['sparse', 'light', 'standard', 'dense', 'ultra'])
 const PRESETS = new Set([...Object.keys(VISUAL_PRESETS), 'custom'])
 const CONVERSATION_STYLES = new Set(['native', 'deck-chat'])
+const SESSION_FLOW_PALETTE_IDS = new Set([...Object.keys(SESSION_FLOW_PALETTES), 'custom'])
+const SESSION_FLOW_COLOR_KEYS = new Set(['sessionFlowColorBack', 'sessionFlowColorCore', 'sessionFlowColorFront'])
 const PRESET_LINKED_KEYS = new Set(Object.keys(VISUAL_PRESETS['standard-tactical']))
 
 
@@ -99,6 +118,10 @@ function enumOr(value, allowed, fallback) {
   return allowed.has(value) ? value : fallback
 }
 
+function colorOr(value, fallback) {
+  return typeof value === 'string' && /^#[\da-f]{6}$/i.test(value) ? value.toLowerCase() : fallback
+}
+
 function particleTraversalSpeedOr(value, fallback) {
   const numeric = Number(value)
   if (!Number.isFinite(numeric)) return fallback
@@ -106,6 +129,13 @@ function particleTraversalSpeedOr(value, fallback) {
   return Math.round(clamped / PARTICLE_TRAVERSAL_SPEED_STEP) * PARTICLE_TRAVERSAL_SPEED_STEP
 }
 
+function sessionFlowSpeedOr(value, fallback) {
+  const numeric = Number(value)
+  if (!Number.isFinite(numeric)) return fallback
+  const clamped = Math.min(SESSION_FLOW_SPEED_MAX, Math.max(SESSION_FLOW_SPEED_MIN, numeric))
+  return Math.round(clamped / SESSION_FLOW_SPEED_STEP) * SESSION_FLOW_SPEED_STEP
+}
+
 function normalizeGlass(input) {
   if (input.glassEnabled === false || input.glass === 'off') return 'off'
   if (input.glass === 'liquid') return 'clear'
@@ -132,8 +162,16 @@ export function normalizePreferences(value) {
     : input.preset
   const particlePreset = VISUAL_PRESETS[input.preset] ?? DEFAULT_PREFERENCES
   const legacyDensities = legacyParticleDensities(input)
+  const sessionFlowPalette = enumOr(input.sessionFlowPalette, SESSION_FLOW_PALETTE_IDS, DEFAULT_PREFERENCES.sessionFlowPalette)
+  const paletteColors = SESSION_FLOW_PALETTES[sessionFlowPalette]
+  const customColors = {
+    back: colorOr(input.sessionFlowColorBack, DEFAULT_PREFERENCES.sessionFlowColorBack),
+    core: colorOr(input.sessionFlowColorCore, DEFAULT_PREFERENCES.sessionFlowColorCore),
+    front: colorOr(input.sessionFlowColorFront, DEFAULT_PREFERENCES.sessionFlowColorFront),
+  }
+  const sessionFlowColors = paletteColors ?? customColors
   const normalized = {
-    version: 9,
+    version: 12,
     enabled: booleanOr(input.enabled, DEFAULT_PREFERENCES.enabled),
     preset: enumOr(migratedPreset, PRESETS, DEFAULT_PREFERENCES.preset),
     texture: enumOr(input.texture, TEXTURES, DEFAULT_PREFERENCES.texture),
@@ -149,6 +187,12 @@ export function normalizePreferences(value) {
     particlePattern: 'orthogonal',
     railDefaultHidden: booleanOr(input.railDefaultHidden, DEFAULT_PREFERENCES.railDefaultHidden),
     sessionFlow: booleanOr(input.sessionFlow, DEFAULT_PREFERENCES.sessionFlow),
+    sessionGlow: booleanOr(input.sessionGlow, DEFAULT_PREFERENCES.sessionGlow),
+    sessionFlowPalette,
+    sessionFlowColorBack: sessionFlowColors.back,
+    sessionFlowColorCore: sessionFlowColors.core,
+    sessionFlowColorFront: sessionFlowColors.front,
+    sessionFlowSpeed: sessionFlowSpeedOr(input.sessionFlowSpeed, DEFAULT_PREFERENCES.sessionFlowSpeed),
     conversationStyle: enumOr(input.conversationStyle, CONVERSATION_STYLES, DEFAULT_PREFERENCES.conversationStyle),
   }
   normalized.preset = matchedVisualPreset(normalized)
@@ -175,6 +219,26 @@ export function updatePreferenceValue(value, key, nextValue) {
   if (key === 'preset') return applyVisualPreset(value, nextValue)
   if (key === 'particleDetail') return applyParticleDetail(value, nextValue)
   const current = normalizePreferences(value)
+  if (key === 'sessionFlowPalette') {
+    const palette = enumOr(nextValue, SESSION_FLOW_PALETTE_IDS, current.sessionFlowPalette)
+    const colors = SESSION_FLOW_PALETTES[palette]
+    return normalizePreferences({
+      ...current,
+      sessionFlowPalette: palette,
+      ...(colors ? {
+        sessionFlowColorBack: colors.back,
+        sessionFlowColorCore: colors.core,
+        sessionFlowColorFront: colors.front,
+      } : {}),
+    })
+  }
+  if (SESSION_FLOW_COLOR_KEYS.has(key)) {
+    return normalizePreferences({
+      ...current,
+      sessionFlowPalette: 'custom',
+      [key]: colorOr(nextValue, current[key]),
+    })
+  }
   if (key === 'conversationParticleDensity' || key === 'heroParticleDensity') {
     const density = enumOr(nextValue, PARTICLE_DENSITIES, current[key])
     return normalizePreferences({ ...current, [key]: density })
@@ -196,7 +260,7 @@ export function loadPreferences(storage) {
     const raw = storage?.getItem(PRTS_STORAGE_KEY)
     if (raw === null || raw === undefined) return { ...DEFAULT_PREFERENCES }
     const parsed = JSON.parse(raw)
-    if (![1, 2, 3, 4, 5, 6, 7, 8, 9].includes(parsed?.version)) return { ...DEFAULT_PREFERENCES }
+    if (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].includes(parsed?.version)) return { ...DEFAULT_PREFERENCES }
     return normalizePreferences(parsed)
   } catch {
     return { ...DEFAULT_PREFERENCES }

package/src/client/session-lifeline.js

@@ -1,6 +1,7 @@
 const HOVER_SETTLE = 180
 const STATIC_TIME = 2.4
 const POINT_COUNT = 9
+const DEFAULT_FLOW_SPEED = 1
 
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value))
@@ -25,6 +26,15 @@ function filamentNodes(lifeline) {
   return Array.from(lifeline.querySelectorAll?.('[data-prts-session-lifeline-filament]') ?? [])
 }
 
+function setFilamentPath(filament, path) {
+  const layers = Array.from(filament?.querySelectorAll?.('[data-prts-session-lifeline-layer]') ?? [])
+  if (layers.length === 0) {
+    filament?.setAttribute?.('d', path)
+    return
+  }
+  layers.forEach(layer => layer.setAttribute('d', path))
+}
+
 function createSmoothPath(points) {
   if (points.length < 2) return ''
   const commands = [`M ${number(points[0].x)} ${number(points[0].y)}`]
@@ -91,7 +101,7 @@ export function configureSessionLifeline(lifeline, { start, end, baseline, lift
   lifeline.setAttribute('data-prts-lifeline-lift', String(number(lift)))
   filamentNodes(lifeline).forEach((filament, index, filaments) => {
     const strand = filaments.length === 1 ? 0 : index - (filaments.length - 1) / 2
-    filament.setAttribute('d', createSessionLifelinePath(geometry, STATIC_TIME, 1, strand))
+    setFilamentPath(filament, createSessionLifelinePath(geometry, STATIC_TIME, 1, strand))
   })
   return true
 }
@@ -119,7 +129,7 @@ export function createSessionLifelineAnimator({ document, window }) {
     if (!geometry || filaments.length === 0) return false
     filaments.forEach((filament, index) => {
       const strand = filaments.length === 1 ? 0 : index - (filaments.length - 1) / 2
-      filament.setAttribute('d', createSessionLifelinePath(geometry, flowTime, strength, strand))
+      setFilamentPath(filament, createSessionLifelinePath(geometry, flowTime, strength, strand))
     })
     return true
   }
@@ -136,6 +146,11 @@ export function createSessionLifelineAnimator({ document, window }) {
     )
   }
 
+  function currentFlowSpeed() {
+    const value = Number(document?.documentElement?.dataset?.prtsSessionFlowSpeed)
+    return Number.isFinite(value) ? clamp(value, .25, 2) : DEFAULT_FLOW_SPEED
+  }
+
   function cancel() {
     if (frame !== undefined) cancelFrame?.(frame)
     frame = undefined
@@ -161,7 +176,7 @@ export function createSessionLifelineAnimator({ document, window }) {
     if (lastTime === undefined) lastTime = now
     const elapsed = Math.min(100, Math.max(0, now - lastTime))
     lastTime = now
-    flowTime += elapsed / 1000
+    flowTime += elapsed / 1000 * currentFlowSpeed()
     const target = hovered ? 0 : 1
     if (strength !== target) {
       const step = elapsed / HOVER_SETTLE
@@ -212,7 +227,7 @@ export function createSessionLifelineAnimator({ document, window }) {
       motionObserver = new MotionObserver(syncMotion)
       motionObserver.observe(document.documentElement, {
         attributes: true,
-        attributeFilter: ['data-prts-motion', 'data-prts-session-flow'],
+        attributeFilter: ['data-prts-motion', 'data-prts-session-flow', 'data-prts-session-flow-speed'],
       })
     }
   }