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

package/src/client/theme-settings-workbench.js

@@ -1,4 +1,4 @@
-import { CONVERSATION_SCALE_FOCUS_CONTRAST_DEFAULT, CONVERSATION_SCALE_FOCUS_CONTRAST_MAX, CONVERSATION_SCALE_FOCUS_CONTRAST_MIN, CONVERSATION_SCALE_FOCUS_CONTRAST_STEP, resolveParticleDetail } from './preferences.js'
+import { CONVERSATION_SCALE_FOCUS_CONTRAST_DEFAULT, CONVERSATION_SCALE_FOCUS_CONTRAST_MAX, CONVERSATION_SCALE_FOCUS_CONTRAST_MIN, CONVERSATION_SCALE_FOCUS_CONTRAST_STEP, PARTICLE_TRAVERSAL_SPEED_DEFAULT, PARTICLE_TRAVERSAL_SPEED_MAX, PARTICLE_TRAVERSAL_SPEED_MIN, PARTICLE_TRAVERSAL_SPEED_STEP, resolveParticleDetail } from './preferences.js'
 import { resolveConversationScaleLengths } from './conversation-scale-adapter.js'
 
 const SETTINGS_FOCUSABLE = [
@@ -16,6 +16,7 @@ const PRESET_OPTIONS = [
 ]
 
 const COMMON_CONTROLS = [
+  ['railDefaultHidden', '默认隐藏导航栏', [['false', '关闭'], ['true', '开启']]],
   ['texture', '环境底纹', [['off', '关闭'], ['restrained', '克制'], ['full', '完整']]],
   ['glass', '玻璃材质', [['off', '关闭'], ['soft', '柔和'], ['standard', '标准'], ['clear', '清晰']]],
   ['motion', '动态效果', [['system', '跟随系统'], ['reduced', '减少']]],
@@ -32,6 +33,8 @@ function settingButtons(key, label, options) {
     ? '<small data-prts-setting-note data-prts-transparency-status hidden>系统当前要求降低透明度</small>'
     : key === 'motion'
       ? '<small data-prts-setting-note data-prts-effective-motion hidden>系统当前要求减少动态</small>'
+      : key === 'railDefaultHidden'
+        ? '<small data-prts-setting-note>在任意窗口宽度下默认收起 P.R.T.S. 导航，可从左侧按钮临时展开</small>'
       : ''
   const sample = value => key === 'texture' || key === 'glass'
     ? `<i data-prts-option-sample="${key}" data-prts-option-sample-value="${value}" aria-hidden="true"></i>`
@@ -102,6 +105,10 @@ export function themeSettingsMarkup() {
               <section data-prts-particle-detail>
                 <header><strong>粒子精度</strong><span>同时调整会话与新会话徽记</span></header>
                 <div role="radiogroup" aria-label="粒子精度">${particleMarkup()}</div>
+                <label data-prts-setting-row="particleTraversalSpeed" data-prts-setting-range-row data-prts-particle-traversal>
+                  <span><strong>跟随移动速度</strong><small>控制普通会话徽记移动及破碎重组的滚动距离</small></span>
+                  <div><input type="range" min="0" max="2" step="0.25" value="1" data-prts-setting-range data-prts-setting-key="particleTraversalSpeed" aria-label="粒子徽记跟随移动速度"><output data-prts-particle-traversal-output>1× · 每 1 个视口重组</output></div>
+                </label>
                 <span data-prts-particle-error role="alert" hidden>粒子资源加载异常，主题已使用静态后备效果</span>
               </section>
               <section data-prts-scale-adjustment>
@@ -150,6 +157,7 @@ export function createThemeSettingsOverlay({
   backdrop,
   onOpen = () => {},
   onPreferenceChange = () => {},
+  onPreferencePreview = () => {},
   onResetVisual = () => {},
   onRetrySave = () => {},
   getConversationScalePreview = () => ({ visible: false, reason: 'unmeasured', mode: 'hidden' }),
@@ -167,6 +175,8 @@ export function createThemeSettingsOverlay({
   let scaleDistanceDirty = false
   let scaleFocusContrastDraft
   let scaleFocusContrastDirty = false
+  let particleTraversalSpeedDraft
+  let particleTraversalSpeedDirty = false
   let calibrationResizeObserver
   let calibrationSettleTimer
   let calibrationFrame
@@ -222,6 +232,7 @@ export function createThemeSettingsOverlay({
     if (!value) {
       commitScaleDistance()
       commitScaleFocusContrast()
+      commitParticleTraversalSpeed()
     }
     isOpen = value
     trigger.setAttribute('aria-expanded', String(isOpen))
@@ -264,6 +275,37 @@ export function createThemeSettingsOverlay({
     return normalizeScaleFocusContrast(scaleFocusContrastDirty ? scaleFocusContrastDraft : currentPreferences?.conversationScaleFocusContrast)
   }
 
+  function normalizeParticleTraversalSpeed(value) {
+    const numeric = Number(value)
+    if (!Number.isFinite(numeric)) return PARTICLE_TRAVERSAL_SPEED_DEFAULT
+    const clamped = Math.min(PARTICLE_TRAVERSAL_SPEED_MAX, Math.max(PARTICLE_TRAVERSAL_SPEED_MIN, numeric))
+    return Math.round(clamped / PARTICLE_TRAVERSAL_SPEED_STEP) * PARTICLE_TRAVERSAL_SPEED_STEP
+  }
+
+  function currentParticleTraversalSpeed() {
+    return normalizeParticleTraversalSpeed(
+      particleTraversalSpeedDirty ? particleTraversalSpeedDraft : currentPreferences?.particleTraversalSpeed,
+    )
+  }
+
+  function conciseNumber(value) {
+    return String(Number(Number(value).toFixed(2)))
+  }
+
+  function particleTraversalLabel(value) {
+    const speed = normalizeParticleTraversalSpeed(value)
+    if (speed === 0) return '0× · 静止 / 不重组'
+    return `${conciseNumber(speed)}× · 每 ${conciseNumber(1 / speed)} 个视口重组`
+  }
+
+  function renderParticleTraversal() {
+    if (!panel || !currentPreferences) return
+    const value = currentParticleTraversalSpeed()
+    const range = panel.querySelector('input[data-prts-setting-range][data-prts-setting-key="particleTraversalSpeed"]')
+    if (range && range.value !== String(value)) range.value = String(value)
+    setText(panel.querySelector('[data-prts-particle-traversal-output]'), particleTraversalLabel(value))
+  }
+
   function calibrationStatus(state, value) {
     if (state?.mode === 'configured') return `当前视图：使用配置上限 / ${Math.round(Number(state.left) || value)} px`
     if (state?.simulated) return `模拟布局：使用配置上限 / ${value} px`
@@ -371,7 +413,7 @@ export function createThemeSettingsOverlay({
     const detail = resolveParticleDetail(currentPreferences)
     const detailLabels = { compact: '精简', standard: '标准', precise: '精细' }
     const advanced = panel.querySelector('[data-prts-advanced-summary]')
-    setText(advanced, `${detailLabels[detail]} / 区分度 ${contrast} / ${value} px`)
+    setText(advanced, `${detailLabels[detail]} / ${conciseNumber(currentParticleTraversalSpeed())}× / 区分度 ${contrast} / ${value} px`)
     if (!calibration) return
     const distance = `${value}px`
     if (calibration.style.getPropertyValue('--prts-calibration-distance') !== distance) {
@@ -400,6 +442,19 @@ export function createThemeSettingsOverlay({
     return true
   }
 
+  function commitParticleTraversalSpeed() {
+    if (!particleTraversalSpeedDirty || !currentPreferences) return false
+    const value = currentParticleTraversalSpeed()
+    particleTraversalSpeedDirty = false
+    particleTraversalSpeedDraft = value
+    if (value !== normalizeParticleTraversalSpeed(currentPreferences.particleTraversalSpeed)) {
+      onPreferenceChange('particleTraversalSpeed', value)
+    } else {
+      renderParticleTraversal()
+    }
+    return true
+  }
+
   function renderPersistence() {
     const status = panel?.querySelector?.('[data-prts-persistence-status]')
     const error = panel?.querySelector?.('[data-prts-persistence-error]')
@@ -442,6 +497,8 @@ export function createThemeSettingsOverlay({
     if (particleError) particleError.hidden = currentStatus?.particle?.phase !== 'error'
     if (!scaleDistanceDirty) scaleDistanceDraft = normalizeScaleDistance(currentPreferences.conversationScaleMaxDistance)
     if (!scaleFocusContrastDirty) scaleFocusContrastDraft = normalizeScaleFocusContrast(currentPreferences.conversationScaleFocusContrast)
+    if (!particleTraversalSpeedDirty) particleTraversalSpeedDraft = normalizeParticleTraversalSpeed(currentPreferences.particleTraversalSpeed)
+    renderParticleTraversal()
     renderScaleCalibration()
     renderPersistence()
   }
@@ -478,6 +535,8 @@ export function createThemeSettingsOverlay({
       scaleDistanceDraft = undefined
       scaleFocusContrastDirty = false
       scaleFocusContrastDraft = undefined
+      particleTraversalSpeedDirty = false
+      particleTraversalSpeedDraft = undefined
       setResetConfirmation(false)
       onResetVisual()
     }
@@ -494,6 +553,12 @@ export function createThemeSettingsOverlay({
     } else if (target.dataset.prtsSettingKey === 'conversationScaleFocusContrast') {
       scaleFocusContrastDraft = value
       scaleFocusContrastDirty = true
+    } else if (target.dataset.prtsSettingKey === 'particleTraversalSpeed') {
+      particleTraversalSpeedDraft = normalizeParticleTraversalSpeed(value)
+      particleTraversalSpeedDirty = true
+      renderParticleTraversal()
+      onPreferencePreview('particleTraversalSpeed', particleTraversalSpeedDraft)
+      return
     } else {
       return
     }
@@ -521,6 +586,7 @@ export function createThemeSettingsOverlay({
     if (!target?.matches?.('input[data-prts-setting-range]')) return
     if (target.dataset.prtsSettingKey === 'conversationScaleMaxDistance') commitScaleDistance()
     if (target.dataset.prtsSettingKey === 'conversationScaleFocusContrast') commitScaleFocusContrast()
+    if (target.dataset.prtsSettingKey === 'particleTraversalSpeed') commitParticleTraversalSpeed()
   }
 
   trigger?.addEventListener('click', toggle)
@@ -547,6 +613,7 @@ export function createThemeSettingsOverlay({
       currentPersistence = persistenceState ?? { phase: 'idle', revision: 0 }
       if (!scaleDistanceDirty) scaleDistanceDraft = normalizeScaleDistance(preferences?.conversationScaleMaxDistance)
       if (!scaleFocusContrastDirty) scaleFocusContrastDraft = normalizeScaleFocusContrast(preferences?.conversationScaleFocusContrast)
+      if (!particleTraversalSpeedDirty) particleTraversalSpeedDraft = normalizeParticleTraversalSpeed(preferences?.particleTraversalSpeed)
       renderState()
     },
     refreshScalePreview: renderScaleCalibration,

package/src/styles/prts.css

@@ -169,15 +169,14 @@ html[data-dsh-prts] a {
 }
 
 /* Keep the host application's control metrics intact. Only controls owned by
-   the P.R.T.S. shell and settings overlay inherit the theme typography. */
+   the P.R.T.S. shell and settings overlay inherit theme typography and color. */
 html[data-dsh-prts] [data-prts-shell] :is(button, input, textarea, select),
 html[data-dsh-prts] [data-prts-theme-settings] :is(button, input, textarea, select) {
   font: inherit;
 }
 
-/* Host controls inherit the active scheme, while Settings content keeps
-   paired semantic foreground and fill from each registered section. */
-html[data-dsh-prts] button:not([data-slot="sidebar.settings"] button) {
+html[data-dsh-prts] [data-prts-shell] button,
+html[data-dsh-prts] [data-prts-theme-settings] button {
   color: inherit;
 }
 
@@ -419,6 +418,360 @@ html[data-dsh-prts] [data-prts-scheme-toggle] svg {
   stroke-width: 1.7;
 }
 
+html[data-dsh-prts] [data-prts-scheme-toggle] {
+  touch-action: none;
+  user-select: none;
+}
+html[data-dsh-prts][data-prts-scheme-transition-interactive] [data-prts-scheme-toggle] {
+  cursor: ew-resize;
+}
+
+html[data-dsh-prts] [data-prts-scheme-toggle][data-prts-scheme-press] {
+  animation: prts-scheme-toggle-press 100ms var(--prts-ease-snap) both;
+}
+
+@keyframes prts-scheme-toggle-press {
+  0%, 100% { transform: translateY(0) scale(1); }
+  50% { transform: translateY(0) scale(.96); }
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-group(root) {
+  animation: prts-scheme-view-hold var(--prts-scheme-duration, 520ms) linear both;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-old(root),
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-old(root) {
+  z-index: 1;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-new(root) {
+  z-index: 2;
+  clip-path: inset(0 max(0px, calc(100vw - var(--prts-scheme-reveal-x))) 0 0);
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-group(prts-scheme-grid),
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-group(prts-scheme-edge),
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-group(prts-scheme-node),
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-group(prts-scheme-mark) {
+  animation: none;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-group(prts-scheme-grid) {
+  z-index: 3;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-group(prts-scheme-edge) {
+  z-index: 4;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-group(prts-scheme-node),
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-group(prts-scheme-mark) {
+  z-index: 5;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-old(prts-scheme-grid),
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-old(prts-scheme-edge),
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-old(prts-scheme-node),
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-old(prts-scheme-mark) {
+  opacity: 0;
+  animation: none;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-new(prts-scheme-grid),
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-new(prts-scheme-edge),
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-new(prts-scheme-node),
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-new(prts-scheme-mark) {
+  opacity: 1;
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+@keyframes prts-scheme-view-hold {
+  from, to { opacity: 1; }
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"] {
+  --prts-scheme-grid-cell: 20px;
+  --prts-scheme-grid-diagonal-cell: 40px;
+  --prts-scheme-grid-axis: rgba(132, 158, 166, .14);
+  --prts-scheme-grid-node: rgba(150, 180, 188, .22);
+  --prts-scheme-grid-diagonal-opacity: .16;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition="light"] {
+  --prts-scheme-grid-axis: rgba(28, 36, 41, .12);
+  --prts-scheme-grid-node: rgba(24, 31, 35, .2);
+  --prts-scheme-grid-diagonal-opacity: .14;
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal] {
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 2147483647;
+  inset: 0;
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  color: #ffd400;
+  --prts-scheme-grid-cell: 20px;
+  --prts-scheme-grid-diagonal-cell: 40px;
+  --prts-scheme-grid-axis: rgba(132, 158, 166, .08);
+  --prts-scheme-grid-node: rgba(150, 180, 188, .13);
+  --prts-scheme-grid-diagonal-opacity: .075;
+  pointer-events: none;
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal="light"] {
+  --prts-scheme-grid-axis: rgba(28, 36, 41, .065);
+  --prts-scheme-grid-node: rgba(24, 31, 35, .105);
+  --prts-scheme-grid-diagonal-opacity: .06;
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-edge] {
+  isolation: isolate;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 29px;
+  height: 100vh;
+  background:
+    linear-gradient(90deg,
+      transparent 13px,
+      rgba(244, 247, 247, .96) 13px 14px,
+      rgba(255, 212, 0, .22) 14px 15px,
+      transparent 15px);
+  transform: translate3d(-14px, 0, 0);
+  transform-origin: 50% 50%;
+  view-transition-name: prts-scheme-edge;
+  will-change: transform;
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-grid] {
+  position: absolute;
+  z-index: -2;
+  inset: 0 auto 0 -206px;
+  display: block;
+  width: 220px;
+  height: 100vh;
+  view-transition-name: prts-scheme-grid;
+  pointer-events: none;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-new(prts-scheme-grid) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%2396b4bc' stroke-width='.55'%3E%3Cpath d='M0 0H40M0 20H40M0 40H40M0 0V40M20 0V40M40 0V40' stroke-opacity='.22'/%3E%3Cpath d='M0 0L20 20L0 40M20 0L40 20L20 40' stroke-opacity='.46'/%3E%3Cpath d='M20 0L0 20L20 40M40 0L20 20L40 40' stroke-opacity='.22'/%3E%3C/g%3E%3Cg fill='%2396b4bc' fill-opacity='.36'%3E%3Ccircle cx='0' cy='0' r='1'/%3E%3Ccircle cx='20' cy='0' r='1'/%3E%3Ccircle cx='40' cy='0' r='1'/%3E%3Ccircle cx='0' cy='20' r='1'/%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3Ccircle cx='40' cy='20' r='1'/%3E%3Ccircle cx='0' cy='40' r='1'/%3E%3Ccircle cx='20' cy='40' r='1'/%3E%3Ccircle cx='40' cy='40' r='1'/%3E%3C/g%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-position: calc(220px - var(--prts-scheme-reveal-x)) 0;
+  background-size: var(--prts-scheme-grid-diagonal-cell) var(--prts-scheme-grid-diagonal-cell);
+  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .12) 16%, rgba(0, 0, 0, .48) 56%, #000 100%);
+  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .12) 16%, rgba(0, 0, 0, .48) 56%, #000 100%);
+}
+
+html[data-dsh-prts][data-prts-scheme-transition="light"]::view-transition-new(prts-scheme-grid) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%231c2429' stroke-width='.55'%3E%3Cpath d='M0 0H40M0 20H40M0 40H40M0 0V40M20 0V40M40 0V40' stroke-opacity='.2'/%3E%3Cpath d='M0 0L20 20L0 40M20 0L40 20L20 40' stroke-opacity='.42'/%3E%3Cpath d='M20 0L0 20L20 40M40 0L20 20L40 40' stroke-opacity='.2'/%3E%3C/g%3E%3Cg fill='%231c2429' fill-opacity='.32'%3E%3Ccircle cx='0' cy='0' r='1'/%3E%3Ccircle cx='20' cy='0' r='1'/%3E%3Ccircle cx='40' cy='0' r='1'/%3E%3Ccircle cx='0' cy='20' r='1'/%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3Ccircle cx='40' cy='20' r='1'/%3E%3Ccircle cx='0' cy='40' r='1'/%3E%3Ccircle cx='20' cy='40' r='1'/%3E%3Ccircle cx='40' cy='40' r='1'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-blend] {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  width: 29px;
+  background: linear-gradient(90deg, transparent, rgba(255, 212, 0, .025) 43%, rgba(235, 244, 245, .11) 50%, rgba(255, 212, 0, .018) 58%, transparent);
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  opacity: .54;
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal="light"] [data-prts-scheme-reveal-blend] {
+  background: linear-gradient(90deg, transparent, rgba(28, 36, 41, .04) 42%, rgba(255, 255, 255, .2) 50%, rgba(255, 212, 0, .018) 58%, transparent);
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal="dark"] [data-prts-scheme-reveal-blend] {
+  background: linear-gradient(90deg, transparent, rgba(132, 158, 166, .035) 42%, rgba(235, 244, 245, .12) 50%, rgba(255, 212, 0, .018) 58%, transparent);
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-edge]::before {
+  content: "";
+  position: absolute;
+  top: 18%;
+  left: 7px;
+  width: 15px;
+  height: 28px;
+  border-top: 1px solid rgba(235, 244, 245, .58);
+  border-bottom: 1px solid rgba(235, 244, 245, .58);
+  background: linear-gradient(rgba(255, 212, 0, .72), rgba(255, 212, 0, .72)) 50% 50% / 100% 1px no-repeat;
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-edge]::after {
+  content: "";
+  position: absolute;
+  top: calc(18% + 12px);
+  left: 12px;
+  width: 5px;
+  height: 5px;
+  border: 1px solid rgba(255, 212, 0, .78);
+  background: rgba(8, 12, 14, .68);
+  transform: rotate(45deg);
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-node] {
+  position: absolute;
+  z-index: 2;
+  bottom: clamp(88px, 18vh, 176px);
+  left: 14px;
+  display: block;
+  box-sizing: border-box;
+  width: 46px;
+  height: 62px;
+  color: #ffd400;
+  font-style: normal;
+  transform: translateX(10px);
+  view-transition-name: prts-scheme-node;
+  transition: transform 120ms var(--prts-ease-snap);
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-edge][data-prts-scheme-reveal-side="left"] [data-prts-scheme-reveal-node] {
+  transform: translateX(calc(-100% - 10px));
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-node]::before {
+  content: "";
+  position: absolute;
+  top: 30px;
+  left: -10px;
+  width: 10px;
+  border-top: 1px solid rgba(255, 212, 0, .76);
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-edge][data-prts-scheme-reveal-side="left"] [data-prts-scheme-reveal-node]::before {
+  right: -10px;
+  left: auto;
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-mark] {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-top: 1px solid currentColor;
+  border-right: 1px solid currentColor;
+  view-transition-name: prts-scheme-mark;
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-meter] {
+  position: absolute;
+  top: 6px;
+  left: 0;
+  display: block;
+  box-sizing: border-box;
+  width: 6px;
+  height: 50px;
+  border: 1px solid rgba(255, 212, 0, .34);
+  background: rgba(8, 12, 14, .32);
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-meter]::after {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: 6px;
+  width: 3px;
+  border-top: 1px solid rgba(255, 212, 0, .64);
+  box-shadow:
+    0 24px rgba(255, 212, 0, .42),
+    0 49px rgba(255, 212, 0, .64);
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-meter-fill] {
+  position: absolute;
+  inset: 1px;
+  display: block;
+  background: currentColor;
+  box-shadow: 0 0 5px rgba(255, 212, 0, .28);
+  opacity: 0;
+  transform-origin: 50% 100%;
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-label],
+html[data-dsh-prts] [data-prts-scheme-reveal-value] {
+  position: absolute;
+  left: 12px;
+  display: block;
+  color: currentColor;
+  font-family: var(--prts-mono);
+  font-style: normal;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-label] {
+  top: 7px;
+  font-size: 7px;
+  font-weight: 600;
+  letter-spacing: .16em;
+  opacity: .72;
+}
+
+html[data-dsh-prts] [data-prts-scheme-reveal-value] {
+  bottom: 7px;
+  width: 24px;
+  height: 11px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .08em;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-mode="view"]::view-transition-new(prts-scheme-node) {
+  background-image: linear-gradient(#ffd400, #ffd400);
+  background-position: left 1px bottom 7px;
+  background-repeat: no-repeat;
+  background-size: 2px var(--prts-scheme-control-meter-height, 0);
+  object-fit: none;
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-interactive]::view-transition-new(prts-scheme-node) {
+  background-image:
+    var(--prts-scheme-control-value-image),
+    linear-gradient(#ffd400, #ffd400);
+  background-position:
+    left 12px bottom 7px,
+    left 1px bottom 7px;
+  background-size:
+    24px 11px,
+    2px var(--prts-scheme-control-meter-height, 0);
+}
+
+html[data-dsh-prts][data-prts-scheme-transition-complete]::view-transition-group(prts-scheme-grid),
+html[data-dsh-prts][data-prts-scheme-transition-complete]::view-transition-group(prts-scheme-edge),
+html[data-dsh-prts][data-prts-scheme-transition-complete]::view-transition-group(prts-scheme-node),
+html[data-dsh-prts][data-prts-scheme-transition-complete]::view-transition-group(prts-scheme-mark) {
+  animation: prts-scheme-hud-release 100ms ease-out both;
+}
+
+@keyframes prts-scheme-hud-release {
+  0%, 35% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@media (max-width: 640px) {
+  html[data-dsh-prts] [data-prts-scheme-reveal] {
+    --prts-scheme-grid-cell: 16px;
+    --prts-scheme-grid-diagonal-cell: 32px;
+  }
+}
+
 html[data-dsh-prts] [data-prts-scheme-current="dark"] [data-prts-scheme-icon="light"],
 html[data-dsh-prts] [data-prts-scheme-current="light"] [data-prts-scheme-icon="dark"] {
   display: none;
@@ -992,7 +1345,11 @@ html[data-dsh-prts] [data-prts-floating-input] {
   color: var(--prts-ink) !important;
 }
 
-html[data-dsh-prts] [data-prts-floating-danger] {
+html[data-dsh-prts] :is(
+  [data-prts-floating-glass="menu"],
+  [data-prts-floating-glass="listbox"],
+  [data-prts-floating-glass="popover"]
+) [data-prts-floating-danger] {
   color: var(--prts-red) !important;
 }
 

package/src/styles/theme-settings-workbench.css

@@ -439,6 +439,23 @@ html[data-dsh-prts] [data-prts-particle-detail-preview] {
   border: 1px solid color-mix(in srgb, currentColor 44%, transparent);
 }
 html[data-dsh-prts] [data-prts-particle-detail-preview] b { width: 2px; height: 2px; background: currentColor; }
+html[data-dsh-prts] [data-prts-particle-traversal] {
+  margin-top: 9px;
+  padding-top: 9px;
+  border-top: 1px solid var(--prts-line);
+}
+html[data-dsh-prts] [data-prts-particle-traversal] > span { display: grid; gap: 3px; }
+html[data-dsh-prts] [data-prts-particle-traversal] > span strong { font-size: 9px; }
+html[data-dsh-prts] [data-prts-particle-traversal] > span small {
+  color: var(--prts-muted);
+  font: 600 8px/1.35 var(--prts-mono);
+}
+html[data-dsh-prts] [data-prts-particle-traversal-output] {
+  min-width: 132px;
+  color: var(--prts-cyan);
+  font: 800 8px/1.2 var(--prts-mono);
+  text-align: right;
+}
 html[data-dsh-prts] [data-prts-particle-error] { margin: 8px 0 0; color: var(--prts-yellow); font: 700 8px/1.4 var(--prts-mono); }
 
 html[data-dsh-prts] [data-prts-scale-calibration] {