@ash-qw/dsh-theme-prts 2.7.0 → 2.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "2.7.0",
+  "version": "2.7.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/composer-glass-surface.js

@@ -13,6 +13,7 @@ export function createComposerGlassSurface({document, window, mount}) {
     surfaces.delete(card)
   }
   function sync() {
+    if (frame !== undefined) window.cancelAnimationFrame?.(frame)
     frame = undefined
     const cards = new Set(document.querySelectorAll('[data-composer-card], [data-prts-composer-fallback]'))
     for (const [card, entry] of surfaces) if (!cards.has(card)) remove(card, entry)
@@ -68,12 +69,21 @@ export function createComposerGlassSurface({document, window, mount}) {
       if (!mount) return
       document.documentElement.setAttribute('data-prts-composer-enhanced', '')
       if (!observer) {
-        resize = new window.ResizeObserver(queue)
+        resize = new window.ResizeObserver(entries => {
+          if (entries.some(({target}) => !surfaces.has(target)
+            && target.offsetWidth && target.offsetHeight)) sync()
+          else queue()
+        })
         observer = new window.MutationObserver(records => {
           const selector = '[data-composer-card], [data-prts-composer-fallback]'
-          if (records.some(record => record.type === 'attributes'
-            || [...record.addedNodes, ...record.removedNodes].some(node =>
-              node.nodeType === 1 && (node.matches(selector) || node.querySelector(selector))))) queue()
+          const containsComposer = node => node.nodeType === 1
+            && (node.matches(selector) || node.querySelector(selector))
+          const mounting = records.some(record =>
+            (record.type === 'attributes' && record.target.matches(selector) && !surfaces.has(record.target))
+            || [...record.addedNodes].some(containsComposer))
+          if (mounting) sync()
+          else if (records.some(record => record.type === 'attributes'
+            || [...record.removedNodes].some(containsComposer))) queue()
         })
         observer.observe(document.body, {childList:true, subtree:true, attributes:true, attributeFilter:['data-composer-card','data-prts-composer-fallback']})
       }

package/src/client/index.js

@@ -440,12 +440,17 @@ export function apply(ctx) {
     defineStore,
     mountComposerGlassSurface(container, props) {
       const { createRoot } = require('react-dom/client')
+      const materialStyle = { backdropFilter: 'blur(5px) saturate(1)', WebkitBackdropFilter: 'blur(5px) saturate(1)' }
+      const placeholder = document.createElement('div')
+      placeholder.className = 'glass-surface glass-surface--fallback'
+      Object.assign(placeholder.style, { width: '100%', height: '100%', ...materialStyle })
+      container.append(placeholder)
       const root = createRoot(container)
       const update = props => root.render(React.createElement(PrtsGlassSurface.default, {
         width: '100%', height: '100%',
-        // Gentle edge refraction; a fully calm center avoids shifting input content.
-        distortionScale: -18, redOffset: 0, greenOffset: 1, blueOffset: 2,
-        opacity: 1, backgroundOpacity: 0.5, displace: 5,
+        refraction: false,
+        style: materialStyle,
+        opacity: 1, backgroundOpacity: 0.5,
         ...props,
       }))
       update(props)

package/src/client/sidebar-control-adapter.js

@@ -19,6 +19,8 @@ const OWNED_ATTRIBUTES = [
   'data-prts-session-menu-anchor',
   'data-prts-session-menu',
   'data-prts-session-time',
+  'data-prts-session-resting',
+  'data-prts-session-pin',
   'data-prts-session-index',
   'data-prts-session-state',
   'data-prts-selection-target',
@@ -106,15 +108,16 @@ function markSidebarNode(node, attribute, next) {
 }
 
 function resolveRowControls(row, kind) {
-  const menu = row.querySelector(':scope > span > span > button[type="button"]')
-  const anchor = menu?.parentElement
+  const menu = row.querySelector(':scope > span > button[type="button"]:is([data-context-menu-trigger], [aria-haspopup="menu"])')
+    ?? row.querySelector(':scope > span > span > button[type="button"]')
+  const anchor = menu?.parentElement?.parentElement === row ? menu : menu?.parentElement
   // Ungrouped workspaces have a create button but no management menu.
   const actions = anchor?.parentElement ?? (kind === 'workspace'
     ? Array.from(row.children).find(node => node.matches('span') && node.querySelector(':scope > button[type="button"]'))
     : undefined)
   if (actions?.parentElement !== row) return {}
   const create = kind === 'workspace'
-    ? actions.querySelector(':scope > button[type="button"]')
+    ? Array.from(actions.children).find(child => child !== anchor && child.matches('button[type="button"]'))
     : undefined
   const quickActions = kind === 'session'
     ? Array.from(actions.children).filter(child => child !== anchor && child.querySelector('button'))
@@ -122,6 +125,11 @@ function resolveRowControls(row, kind) {
   return { actions, anchor, create, menu, quickActions }
 }
 
+function isRowMenuOpen(row, menu) {
+  return menu?.getAttribute('aria-expanded') === 'true'
+    || Array.from(row.classList).some(token => token === 'menuOpen' || token.endsWith('_menuOpen'))
+}
+
 function resolveRowTitle(row, kind, actions) {
   const candidates = Array.from(row.querySelectorAll(':scope > span')).filter(node => (
     node !== actions
@@ -158,10 +166,11 @@ function resolveWorkspaceDisclosure(row, title, actions, icon) {
   ))
 }
 
-function resolveSessionTime(row, title, actions) {
+function resolveSessionTime(row, title, actions, pin) {
   const candidates = Array.from(row.querySelectorAll(':scope > span')).filter(node => (
     node !== title
     && node !== actions
+    && node !== pin
     && !node.hasAttribute('data-prts-facility-face')
     && !node.hasAttribute('data-prts-row-projection')
     && !node.querySelector('button')
@@ -171,6 +180,18 @@ function resolveSessionTime(row, title, actions) {
     ?? candidates.filter(node => node.getAttribute('aria-hidden') !== 'true' && !node.querySelector('[data-state]')).at(-1)
 }
 
+function resolveSessionTrailing(row, title, actions) {
+  const pin = row.querySelector('[class*="_pinIndicator"], [aria-label="Pinned"]')
+  const resting = Array.from(row.children).find(node => node !== title && node !== actions && node !== pin && (
+    (pin && node.contains(pin))
+    || Array.from(node.classList).some(token => token === 'rowResting' || token.endsWith('_rowResting'))
+  ))
+  const time = resting
+    ? resting.querySelector('time, [data-session-time], [class*="_timestamp"], [class*="_time"]')
+    : resolveSessionTime(row, title, actions, pin)
+  return { pin, resting, time }
+}
+
 function ensureFacilityFace(document, row, kind, next) {
   let face = row.querySelector(':scope > [data-prts-facility-face]')
   if (!face) {
@@ -916,8 +937,7 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
         const icon = resolveWorkspaceIcon(row, title, controls.actions)
         markSidebarNode(icon, 'data-prts-workspace-icon', next)
         markSidebarNode(resolveWorkspaceDisclosure(row, title, controls.actions, icon), 'data-prts-workspace-disclosure', next)
-        row.toggleAttribute('data-prts-row-menu-open', controls.menu?.getAttribute('aria-expanded') === 'true'
-          || row.classList.contains('menuOpen'))
+        row.toggleAttribute('data-prts-row-menu-open', isRowMenuOpen(row, controls.menu))
         markSidebarNode(controls.actions, 'data-prts-workspace-actions', next)
         markSidebarNode(controls.anchor, 'data-prts-workspace-menu-anchor', next)
         markSidebarNode(controls.menu, 'data-prts-workspace-menu', next)
@@ -963,10 +983,12 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
         setSidebarAttribute(row, 'data-prts-session-index', sessionIndex)
         const title = resolveRowTitle(row, 'session', controls.actions)
         markSidebarNode(title, 'data-prts-row-title', next)
-        markSidebarNode(resolveSessionTime(row, title, controls.actions), 'data-prts-session-time', next)
+        const trailing = resolveSessionTrailing(row, title, controls.actions)
+        markSidebarNode(trailing.time, 'data-prts-session-time', next)
+        markSidebarNode(trailing.resting, 'data-prts-session-resting', next)
+        markSidebarNode(trailing.pin, 'data-prts-session-pin', next)
         if (title) setSidebarAttribute(title, 'data-prts-session-index', sessionIndex)
-        row.toggleAttribute('data-prts-row-menu-open', controls.menu?.getAttribute('aria-expanded') === 'true'
-          || row.classList.contains('menuOpen'))
+        row.toggleAttribute('data-prts-row-menu-open', isRowMenuOpen(row, controls.menu))
         markSidebarNode(controls.actions, 'data-prts-session-actions', next)
         for (const action of controls.quickActions ?? []) markSidebarNode(action, 'data-prts-session-quick-actions', next)
         markSidebarNode(controls.anchor, 'data-prts-session-menu-anchor', next)

package/src/styles/custom-background.css

@@ -3,8 +3,8 @@ html[data-dsh-prts] { --prts-background-wash: color-mix(in srgb, var(--prts-canv
 html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] :is([data-prts-region="frame"], [data-prts-nav-rail]) {
 background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-full) var(--prts-protected-full-x, 50%) var(--prts-protected-full-y, 50%) / cover fixed;
 }
-html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] :is([data-prts-region="sessions"], [data-prts-region="operation"]) { background: transparent; }
-html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] {
+html[data-dsh-prts][data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] :is([data-prts-region="sessions"], [data-prts-region="operation"]) { background: transparent; }
+html[data-dsh-prts][data-dsh-prts][data-prts-background-mode="split"][data-prts-background-sidebar] {
 & :is([data-prts-region="sessions"],[data-prts-nav-rail]) {
 --prts-wall-width:var(--prts-protected-sidebar-width,max(calc(var(--prts-sidebar-width,280px) + var(--prts-nav-width)),calc((100dvh - var(--prts-host-top-inset)) * var(--prts-sidebar-image-ratio,1))));
 --prts-wall-x:var(--prts-protected-sidebar-x,calc((var(--prts-sidebar-width,280px) + var(--prts-nav-width) - var(--prts-wall-width)) / 2));

package/src/styles/prts.css

@@ -996,6 +996,10 @@ html[data-dsh-prts] [data-prts-session-actions] {
   transform: translate3d(var(--prts-row-shift), 0, 0);
 }
 
+html[data-dsh-prts] :is([data-prts-workspace-row], [data-prts-session-row]):is(:hover, :focus-within, [data-prts-row-menu-open]) :is([data-prts-workspace-actions], [data-prts-session-actions]) {
+  display: inline-flex;
+}
+
 html[data-dsh-prts] [data-prts-workspace-actions] {
   width: 57px;
 }
@@ -1023,6 +1027,7 @@ html[data-dsh-prts] [data-prts-session-actions] button {
   min-width: 28px !important;
   height: var(--prts-facility-height) !important;
   min-height: var(--prts-facility-height) !important;
+  margin: 0 !important;
   display: grid !important;
   place-items: center;
   padding: 0 !important;
@@ -1046,11 +1051,11 @@ html[data-dsh-prts] [data-prts-session-actions] button:is(:hover, :focus-visible
     animation: prts-facility-button-dock 520ms both;
   }
 
-  html[data-dsh-prts] [data-prts-workspace-row]:is(:hover, :focus-within, [data-prts-row-menu-open]) [data-prts-workspace-actions] > :nth-child(1) button {
+  html[data-dsh-prts] [data-prts-workspace-row]:is(:hover, :focus-within, [data-prts-row-menu-open]) [data-prts-workspace-menu] {
     animation-delay: 55ms;
   }
 
-  html[data-dsh-prts] [data-prts-workspace-row]:is(:hover, :focus-within, [data-prts-row-menu-open]) [data-prts-workspace-actions] > :nth-child(2) {
+  html[data-dsh-prts] [data-prts-workspace-row]:is(:hover, :focus-within, [data-prts-row-menu-open]) [data-prts-workspace-create] {
     animation-delay: 125ms;
   }
 }

package/src/styles/refinement.css

@@ -136,7 +136,12 @@ html[data-dsh-prts] [data-prts-session-actions] button:is(:hover, :focus-visible
   background: var(--prts-yellow) !important;
 }
 
-html[data-dsh-prts] [data-prts-session-time] {
+html[data-dsh-prts] [data-prts-session-row] > [data-prts-row-title]:last-child {
+  margin-right: var(--prts-row-end-reserve);
+}
+
+html[data-dsh-prts] [data-prts-session-time],
+html[data-dsh-prts] [data-prts-session-resting] {
   position: relative;
   z-index: 3;
   flex: 0 0 auto;
@@ -146,15 +151,77 @@ html[data-dsh-prts] [data-prts-session-time] {
   transition: opacity 120ms ease, transform 220ms var(--prts-ease-spring);
 }
 
-/* DSH keeps its pin in the row's trailing slot; move that slot inside our face. */
-html[data-dsh-prts] [data-prts-session-row] > :is([aria-label="Pinned"], [class*="_pinIndicator"]) {
+html[data-dsh-prts] [data-prts-session-resting] {
+  align-items: center;
+  gap: 8px;
+}
+
+html[data-dsh-prts] [data-prts-session-resting]:has([data-prts-session-pin]) {
+  display: inline-flex !important;
+  flex-shrink: 1;
+  min-width: 0;
+  margin-right: calc(var(--prts-row-end-reserve) + 6px);
+  padding-left: 0;
+}
+
+html[data-dsh-prts] [data-prts-session-row]:has([data-prts-session-pin]) [data-prts-row-title] {
+  padding-left: clamp(0px, calc(50% - 60px), 13px);
+  padding-right: clamp(0px, calc(50% - 60px), 10px);
+}
+
+html[data-dsh-prts] [data-prts-session-row]:has([data-prts-session-pin]) [data-prts-session-time] {
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+html[data-dsh-prts] [data-prts-session-resting] [data-prts-session-time] {
+  margin: 0;
+  padding: 0;
+  transform: none;
+}
+
+html[data-dsh-prts] [data-prts-session-pin] {
+  display: inline-flex !important;
+  flex: 0 0 16px;
+  width: 16px;
+  margin-left: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+html[data-dsh-prts] [data-prts-session-row] > [data-prts-session-pin] {
   margin-right: calc(var(--prts-row-end-reserve) + 6px);
 }
 
-html[data-dsh-prts] [data-prts-session-row]:has(> :is([aria-label="Pinned"], [class*="_pinIndicator"])) [data-prts-session-time] {
+html[data-dsh-prts] [data-prts-session-row]:has(> [data-prts-session-pin]) [data-prts-session-time] {
   margin-right: 8px;
 }
 
+html[data-dsh-prts] [data-prts-session-row]:is(:hover, :focus-within, [data-prts-row-menu-open]) [data-prts-session-resting] {
+  margin-right: 8px;
+}
+
+html[data-dsh-prts] [data-prts-session-row]:is(:hover, :focus-within, [data-prts-row-menu-open]) > [data-prts-session-pin] {
+  margin-right: 6px;
+}
+
+html[data-dsh-prts] [data-prts-session-row]:is(:hover, :focus-within, [data-prts-row-menu-open], [data-prts-selection-target="true"], [aria-selected="true"]:not([data-prts-selection-target="false"])):has([data-prts-session-pin]) [data-prts-session-time],
+html[data-dsh-prts] [data-prts-session-row]:is(:hover, :focus-within, [data-prts-row-menu-open]) [data-prts-session-resting]:not(:has([data-prts-session-pin])) {
+  display: none !important;
+}
+
+@media (hover: none) {
+  html[data-dsh-prts] [data-prts-session-resting],
+  html[data-dsh-prts] [data-prts-session-resting]:has([data-prts-session-pin]) {
+    margin-right: 8px;
+  }
+
+  html[data-dsh-prts] [data-prts-session-row] > [data-prts-session-pin] {
+    margin-right: 6px;
+  }
+}
+
 html[data-dsh-prts] [data-prts-session-row]:hover [data-prts-session-time] {
   opacity: 0;
 }