@ash-qw/dsh-theme-prts 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "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/emblem-reorder.js

@@ -1,4 +1,4 @@
-// Hold anywhere on a card to sort; movement before the hold keeps native touch scrolling.
+// Cards own touch gestures: immediate swipes scroll, while a hold locks into sorting.
 export function mountEmblemReorder({ list, window, status, canStart, onStart, onCommit }) {
   let gesture = null, holdTimer, frame, previousTime = 0, suppressClick = false
   const rows = () => [...list.children].filter(row => row.hasAttribute('data-emblem-key'))
@@ -13,6 +13,7 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
     gesture = null; clear()
     current.ghost?.remove();current.row.removeAttribute('data-prts-emblem-dragging')
     list.removeAttribute('data-prts-emblem-sorting')
+    scroller?.removeAttribute('data-prts-emblem-sort-active')
     current.handle.setAttribute('aria-pressed','false')
     try { if (list.hasPointerCapture?.(current.pointerId)) list.releasePointerCapture(current.pointerId) } catch {}
     const ordered = rows().map(row=>row.dataset.emblemKey)
@@ -59,6 +60,7 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
     current.handle.setAttribute('aria-pressed','true')
     list.setAttribute('data-prts-emblem-sorting','')
     if (!current.keyboard) {
+      scroller?.setAttribute('data-prts-emblem-sort-active','')
       const box=current.row.getBoundingClientRect()
       const ghost=current.row.cloneNode(true)
       ghost.removeAttribute('data-emblem-key');ghost.setAttribute('data-prts-emblem-drag-ghost','')
@@ -81,22 +83,41 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
     const row=event.target.closest('[data-emblem-key]')
     const handle=row?.querySelector('[data-prts-emblem-reorder]')
     suppressClick=false
-    if (!handle || handle.disabled || event.button!==0 || event.isPrimary===false || !canStart() || rows().length<2) return
-    gesture={handle,row,pointerId:event.pointerId,startX:event.clientX,startY:event.clientY,x:event.clientX,y:event.clientY,original:rows(),active:false}
-    holdTimer=window.setTimeout(activate,400)
+    if (!handle || event.button!==0 || event.isPrimary===false) return
+    const sortable = !handle.disabled && canStart() && rows().length>=2
+    // touch-action:none also applies to a single/temporarily disabled card.
+    // It still needs swipe scrolling even when sorting cannot start.
+    if (!sortable && event.pointerType!=='touch') return
+    gesture={handle,row,pointerType:event.pointerType,pointerId:event.pointerId,startX:event.clientX,startY:event.clientY,x:event.clientX,y:event.clientY,original:rows(),active:false}
+    if (sortable) holdTimer=window.setTimeout(activate,400)
   }
   const move = event => {
     if (!gesture || gesture.pointerId!==event.pointerId) return
+    const previousY=gesture.y
     gesture.x=event.clientX;gesture.y=event.clientY
-    if (!gesture.active && Math.hypot(gesture.x-gesture.startX,gesture.y-gesture.startY)>8) {finish();return}
-    if (gesture.active) event.preventDefault()
+    if (!gesture.active && !gesture.scrolling && Math.hypot(gesture.x-gesture.startX,gesture.y-gesture.startY)>8) {
+      if (gesture.pointerType !== 'touch') {finish();return}
+      window.clearTimeout(holdTimer)
+      gesture.scrolling=true;suppressClick=true
+      try {list.setPointerCapture(gesture.pointerId)}catch{finish();return}
+      // Include the movement accumulated while deciding between a tap and a swipe.
+      if(scroller)scroller.scrollTop += gesture.startY-previousY
+    }
+    if (gesture.scrolling && scroller) scroller.scrollTop += previousY-gesture.y
+    if (gesture.active || gesture.scrolling) event.preventDefault()
   }
   const up = event => {
     if (gesture?.pointerId!==event.pointerId) return
+    if (gesture.scrolling) {finish();return}
     const box=list.getBoundingClientRect(), viewport=(scroller || list).getBoundingClientRect()
     finish(event.clientX>=box.left && event.clientX<=box.right && event.clientY>=viewport.top && event.clientY<=viewport.bottom)
   }
   const cancelPointer = event => {if (gesture?.pointerId===event.pointerId) finish()}
+  // A touch initially belongs to its hit target. Transferring capture to the
+  // list emits a bubbling loss event from that child, not a canceled drag.
+  const lostCapture = event => {
+    if (event.target === list && !list.hasPointerCapture(event.pointerId)) cancelPointer(event)
+  }
   const cancel = () => finish()
   const visibility = () => {if (window.document.hidden) finish()}
   const keydown = event => {
@@ -128,7 +149,7 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
   window.addEventListener('pointermove',move,{passive:false})
   window.addEventListener('pointerup',up)
   window.addEventListener('pointercancel',cancelPointer)
-  list.addEventListener('lostpointercapture',cancelPointer)
+  list.addEventListener('lostpointercapture',lostCapture)
   window.addEventListener('keydown',keydown,true)
   window.addEventListener('blur',cancel)
   window.addEventListener('resize',cancel)
@@ -137,7 +158,7 @@ export function mountEmblemReorder({ list, window, status, canStart, onStart, on
     finish()
     list.removeEventListener('touchmove',touchmove);list.removeEventListener('pointerdown',down);list.removeEventListener('contextmenu',context);list.removeEventListener('click',click,true)
     window.removeEventListener('pointermove',move);window.removeEventListener('pointerup',up);window.removeEventListener('pointercancel',cancelPointer)
-    list.removeEventListener('lostpointercapture',cancelPointer);window.removeEventListener('keydown',keydown,true);window.removeEventListener('blur',cancel);window.removeEventListener('resize',cancel)
+    list.removeEventListener('lostpointercapture',lostCapture);window.removeEventListener('keydown',keydown,true);window.removeEventListener('blur',cancel);window.removeEventListener('resize',cancel)
     window.document.removeEventListener('visibilitychange',visibility)
   } }
 }

package/src/client/facility-vector.js

@@ -21,6 +21,7 @@ const SILHOUETTE_PATHS = Object.freeze({
 })
 
 let silhouetteId = 0
+const renderStates = new WeakMap()
 
 export const FACILITY_TEXTURES = Object.freeze(['none', 'grid', 'scanline', 'silhouette', 'pickup'])
 
@@ -86,6 +87,7 @@ export function ensureFacilityTextureDefs(document) {
 }
 
 function appendSilhouetteScene(document, graphic) {
+  renderStates.delete(graphic)
   const clipId = `prts-facility-silhouette-clip-${++silhouetteId}`
   const defs = svgNode(document, 'defs')
   const clip = svgNode(document, 'clipPath', { id: clipId, clipPathUnits: 'userSpaceOnUse' })
@@ -112,6 +114,7 @@ function appendSilhouetteScene(document, graphic) {
 }
 
 function appendSessionPickup(document, graphic) {
+  renderStates.delete(graphic)
   const clipId = `prts-facility-pickup-clip-${++silhouetteId}`
   const defs = svgNode(document, 'defs')
   const clip = svgNode(document, 'clipPath', { id: clipId, clipPathUnits: 'userSpaceOnUse' })
@@ -171,6 +174,7 @@ function appendSessionStatusUnderlay(document, graphic) {
   const surface = graphic.querySelector('[data-prts-facility-layer="surface"]')
   if (!surface) return
   if (!graphic.querySelector('[data-prts-session-status-underlay]')) {
+    renderStates.delete(graphic)
     graphic.insertBefore(svgNode(document, 'path', {
       'data-prts-session-status-underlay': '',
       'aria-hidden': 'true',
@@ -179,6 +183,7 @@ function appendSessionStatusUnderlay(document, graphic) {
     }), surface)
   }
   if (!graphic.querySelector('[data-prts-session-idle-indicator]')) {
+    renderStates.delete(graphic)
     graphic.insertBefore(svgNode(document, 'rect', {
       'data-prts-session-idle-indicator': '',
       'aria-hidden': 'true',
@@ -249,48 +254,60 @@ 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 sessionNotch = graphic?.hasAttribute('data-prts-session-notch')
-  const path = createFacilityPath({ width, height, topNotch, sessionNotch })
-  if (!graphic || !path) {
+  if (!graphic || !Number.isFinite(width) || !Number.isFinite(height) || width <= 2 || height <= FACILITY_GEOMETRY.sideOpening + 2) {
+    if (graphic) renderStates.delete(graphic)
     owner?.removeAttribute?.('data-prts-facility-size')
     setReady(owner, false)
     return false
   }
 
   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)
-      silhouette.setAttribute('transform', `translate(0 1) scale(1 ${Number((availableHeight / 38).toFixed(5))})`)
+  let state = renderStates.get(graphic)
+  if (state?.size === size) {
+    setReady(owner, true)
+    return true
+  }
+  if (!state) {
+    state = {
+      layers: graphic.querySelectorAll('[data-prts-facility-layer], [data-prts-facility-clip]'),
+      statusUnderlay: graphic.querySelector('[data-prts-session-status-underlay]'),
+      idleIndicator: graphic.querySelector('[data-prts-session-idle-indicator]'),
+      silhouette: graphic.querySelector('[data-prts-facility-silhouette]'),
+      pickup: graphic.querySelector('[data-prts-session-pickup]'),
+      lifeline: graphic.querySelector('[data-prts-session-lifeline]'),
     }
-    const pickup = graphic.querySelector('[data-prts-session-pickup]')
-    if (pickup) {
-      const center = Number((height / 2).toFixed(3))
-      for (const baseline of pickup.querySelectorAll('[data-prts-session-pickup-baseline]')) {
-        baseline.setAttribute('y1', String(center))
-        baseline.setAttribute('y2', String(center))
-      }
-      for (const indicator of pickup.querySelectorAll('[data-prts-session-pickup-indicator]')) {
-        indicator.setAttribute('cy', String(center))
-      }
-      for (const bar of pickup.querySelectorAll('[data-prts-session-pickup-bar]')) {
-        const barHeight = Number(bar.getAttribute('height')) || 0
-        bar.setAttribute('y', String(Number((center - barHeight / 2).toFixed(3))))
-      }
+    renderStates.set(graphic, state)
+  }
+  const { statusUnderlay, idleIndicator, silhouette, pickup, lifeline } = state
+  const path = createFacilityPath({ width, height, topNotch, sessionNotch })
+  graphic.setAttribute('viewBox', `0 0 ${Number(width.toFixed(3))} ${Number(height.toFixed(3))}`)
+  for (const layer of state.layers) layer.setAttribute('d', path)
+  statusUnderlay?.setAttribute('d', createFacilityPath({ width, height }))
+  idleIndicator?.setAttribute('x', String(Number((width / 2 - 25).toFixed(3))))
+  if (silhouette && state.height !== height) {
+    const availableHeight = Math.max(1, height - 2)
+    silhouette.setAttribute('transform', `translate(0 1) scale(1 ${Number((availableHeight / 38).toFixed(5))})`)
+  }
+  if (pickup && state.height !== height) {
+    const center = Number((height / 2).toFixed(3))
+    for (const baseline of pickup.querySelectorAll('[data-prts-session-pickup-baseline]')) {
+      baseline.setAttribute('y1', String(center))
+      baseline.setAttribute('y2', String(center))
     }
-    if (lifeline) {
-      configureSessionLifeline(lifeline, lifelineGeometry)
+    for (const indicator of pickup.querySelectorAll('[data-prts-session-pickup-indicator]')) {
+      indicator.setAttribute('cy', String(center))
     }
-    owner.setAttribute('data-prts-facility-size', size)
+    for (const bar of pickup.querySelectorAll('[data-prts-session-pickup-bar]')) {
+      const barHeight = Number(bar.getAttribute('height')) || 0
+      bar.setAttribute('y', String(Number((center - barHeight / 2).toFixed(3))))
+    }
+  }
+  if (lifeline) {
+    configureSessionLifeline(lifeline, sessionLifelineGeometry(width, height))
   }
+  state.size = size
+  state.height = height
+  owner.setAttribute('data-prts-facility-size', size)
   setReady(owner, true)
   return true
 }

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

@@ -193,7 +193,6 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
   let observer
   let resizeObserver
   let resizeFrame
-  let resizeTimer
   let scanFrame
   let stopSessionList = () => {}
   let stopWorkspaceList = () => {}
@@ -363,6 +362,10 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
   }
 
   function flushVectors() {
+    if (resizeFrame !== undefined) {
+      if (window?.cancelAnimationFrame) window.cancelAnimationFrame(resizeFrame)
+      else window?.clearTimeout?.(resizeFrame)
+    }
     resizeFrame = undefined
     const measurements = []
     for (const [owner, observedSize] of dirtyVectors) {
@@ -533,11 +536,9 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
             const rect = entry.contentRect
             dirtyVectors.set(entry.target, rect ? { width: rect.width, height: rect.height } : undefined)
           }
-          if (resizeTimer !== undefined) window?.clearTimeout?.(resizeTimer)
-          resizeTimer = window?.setTimeout?.(() => {
-            resizeTimer = undefined
-            scheduleVectors()
-          }, 160)
+          // ResizeObserver runs before paint. Update only the SVG geometry here so
+          // the previous viewBox is never stretched across the new card width.
+          flushVectors()
         })
       }
       scan()
@@ -580,8 +581,6 @@ export function createSidebarControlAdapter({ document, window, sessions, worksp
         else window?.clearTimeout?.(resizeFrame)
       }
       resizeFrame = undefined
-      if (resizeTimer !== undefined) window?.clearTimeout?.(resizeTimer)
-      resizeTimer = undefined
       lifelineAnimator.dispose()
       clear()
     },

package/src/styles/cursor.css

@@ -3,6 +3,7 @@
   html[data-dsh-prts][data-prts-cursor="prts"] {
     --prts-hand-cursor: var(--prts-hand-frame, url("__PRTS_HAND__") 7 6);
     --prts-text-cursor: var(--prts-text-frame, url("__PRTS_TEXT__") 24 24);
+    --prts-sort-cursor: url("__PRTS_GRABBING__") 22 19, grabbing;
     --prts-link-cursor: url("__PRTS_LINK__") 7 7;
     cursor: var(--prts-hand-cursor), default;
   }
@@ -15,13 +16,18 @@
   html[data-dsh-prts][data-prts-cursor="prts"] :is(textarea, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]) {
     cursor: var(--prts-text-cursor), text;
   }
+  html[data-dsh-prts][data-prts-cursor="prts"] [data-emblem-key],
   html[data-dsh-prts][data-prts-cursor="prts"] :is(.dsh-partner-pendant-hit, .dsh-partner-pendant-anchor, [data-prts-emblem-reorder]):enabled {
     cursor: url("__PRTS_GRAB__") 22 19, grab;
   }
   html[data-dsh-prts][data-prts-cursor="prts"] :is(.dsh-partner-pendant-hit, .dsh-partner-pendant-anchor, [data-prts-emblem-reorder]):enabled:active {
-    cursor: url("__PRTS_GRABBING__") 22 19, grabbing;
+    cursor: var(--prts-sort-cursor);
   }
   html[data-dsh-prts][data-prts-cursor="prts"] :is(:disabled, [aria-disabled="true"]) {
     cursor: url("__PRTS_NOT_ALLOWED__") 7 7, not-allowed !important;
   }
 }
+
+html[data-dsh-prts] :is([data-prts-emblem-sort-active],[data-prts-emblem-sort-active] *) {
+  cursor: var(--prts-sort-cursor, grabbing) !important;
+}

package/src/styles/prts.css

@@ -20,8 +20,6 @@ html[data-dsh-prts] {
   --prts-host-top-inset: 0px;
   --prts-rail-width: 52px;
   --prts-nav-width: 52px;
-  --prts-sessions-width: 286px;
-  --prts-sessions-compact: 54px;
   --prts-workspace-height: 38px;
   --prts-session-height: 36px;
   --prts-facility-gap: 7px;
@@ -843,7 +841,7 @@ html[data-dsh-prts] [data-prts-region="sessions"] :is(
   [data-rc7-sidebar-root], [data-slot="sidebar"] > :first-child) {
   box-sizing: border-box;
   width: 100% !important;
-  min-width: var(--prts-sessions-width);
+  min-width: 0;
   padding: 14px 10px;
   overflow: hidden auto;
   background: transparent !important;

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

@@ -325,7 +325,7 @@ padding-block: 9px;
 }
 html[data-dsh-prts] [data-prts-settings-common] [data-prts-session-flow-color-workbench] {
 display: grid;
-grid-template-columns: minmax(160px, .8fr) minmax(0, 1.2fr);
+grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
 align-items: center;
 gap: 10px;
 }
@@ -745,7 +745,7 @@ color: var(--prts-ink);
 }
 html[data-dsh-prts] [data-prts-theme-settings] {
 & [data-prts-setting-row="sessionFlowPalette"] > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
-& [data-prts-setting-row="sessionFlowColors"] { grid-template-columns: minmax(0, 1fr); }
+& [data-prts-settings-common] [data-prts-setting-row="sessionFlowColors"] { grid-template-columns: minmax(0, 1fr); }
 & [data-prts-settings-advanced] { border-top: 1px solid var(--prts-line); }
 & [data-prts-settings-advanced] > [data-prts-section-heading] { padding: 22px 0; }
 & [data-prts-settings-section][hidden] { display: none !important; }
@@ -851,7 +851,7 @@ margin-bottom: 20px;
 & [data-prts-custom-emblem] header { display: grid; gap: 6px; }
 & [data-prts-custom-emblem] :is(small, p) { font: 400 12px/1.6 var(--prts-body); color: var(--prts-muted); margin: 0; }
 & [data-prts-custom-emblem] label { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13px; }
-& [data-prts-emblem-editor]{display:grid;gap:14px;}& [data-prts-custom-emblem] :is(input,select){min-width:0;max-width:100%;}& [data-prts-custom-emblem] select{padding:8px;background:var(--prts-panel-raised);color:var(--prts-ink);border:1px solid var(--prts-line);}& [data-prts-emblem-preview]{touch-action:none;cursor:grab;width:min(100%,280px);height:auto;justify-self:center;border:1px solid var(--prts-line);border-radius:4px;}& [data-prts-emblem-actions]{display:flex;flex-wrap:wrap;gap:10px;}& [data-prts-emblem-actions] button{padding:10px 14px;border:1px solid var(--prts-line);border-radius:4px;color:var(--prts-ink);background:var(--prts-panel-raised);}& [data-prts-emblem-actions] button:disabled{opacity:.45;}& [data-prts-custom-emblem] h4{margin:8px 0 12px;font:600 14px/1.5 var(--prts-body);}& [data-prts-emblem-list]{display:grid;gap:10px;list-style:none;padding:0;margin:14px 0;}& :is([data-prts-emblem-list] > li,[data-prts-emblem-hero-row]){display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;border:1px solid var(--prts-line);border-radius:4px;}& :is([data-prts-emblem-list],[data-prts-emblem-hero-row]) canvas{width:48px;height:48px;flex:none;border-radius:3px;}& :is([data-prts-emblem-list] > li,[data-prts-emblem-hero-row]) > span{flex:1;min-width:100px;overflow-wrap:anywhere;font-size:13px;}& [data-emblem-action]{padding:7px 10px;border:1px solid var(--prts-line);border-radius:4px;background:var(--prts-panel-raised);color:var(--prts-ink);}& [data-emblem-action]:disabled{opacity:.4;}& [data-prts-emblem-reorder]{padding:0;border:0;background:transparent;cursor:grab;}& [data-emblem-key]{user-select:none;-webkit-touch-callout:none}& [data-prts-emblem-reorder]:focus-visible{outline:2px solid var(--prts-ink);outline-offset:3px;}& [data-prts-emblem-sorting]{user-select:none;}& [data-prts-emblem-dragging]{opacity:.35;border-style:dashed !important;}& [data-prts-emblem-drag-ghost]{background:var(--prts-panel-raised);box-shadow:0 8px 28px #0005;opacity:.95;}& :is([data-prts-emblem-reset-confirm],[data-prts-emblem-workspace],[data-prts-emblem-discard]){position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 32px));max-height:80dvh;box-sizing:border-box;overflow:auto;padding:24px;border:1px solid var(--prts-line);border-radius:8px;background:var(--prts-panel-raised);color:var(--prts-ink);box-shadow:0 16px 64px #0008;font:13px/1.7 var(--prts-body);}& :is([data-prts-emblem-reset-confirm],[data-prts-emblem-workspace],[data-prts-emblem-discard])::backdrop{background:#0008;}& [data-prts-emblem-reset-confirm]{& > strong{display:block;font-size:16px;}& > p{margin:12px 0 18px;}& > [data-prts-emblem-actions]{justify-content:flex-end;padding-top:16px;border-top:1px solid var(--prts-line);}& [data-prts-emblem-reset-cancel]{border:0;background:transparent;}& [data-emblem-action]{display:flex;gap:6px;padding:5px 10px;font-size:12px;background:transparent;}& [data-prts-emblem-reset-status]:empty{display:none;}}& [data-prts-emblem-reset-exports]{display:grid;gap:8px;margin:18px 0;}& [data-prts-emblem-reset-asset]{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--prts-line);border-radius:4px;}& [data-prts-emblem-reset-asset] > span{overflow-wrap:anywhere;line-height:1.5;}& [data-prts-emblem-reset-asset] canvas{width:36px;height:36px;border-radius:3px;}& [data-prts-emblem-workspace]{width:min(820px,calc(100vw - 24px));padding:0;max-height:90dvh;}
+& [data-prts-emblem-editor]{display:grid;gap:14px;}& [data-prts-custom-emblem] :is(input,select){min-width:0;max-width:100%;}& [data-prts-custom-emblem] select{padding:8px;background:var(--prts-panel-raised);color:var(--prts-ink);border:1px solid var(--prts-line);}& [data-prts-emblem-preview]{touch-action:none;cursor:grab;width:min(100%,280px);height:auto;justify-self:center;border:1px solid var(--prts-line);border-radius:4px;}& [data-prts-emblem-actions]{display:flex;flex-wrap:wrap;gap:10px;}& [data-prts-emblem-actions] button{padding:10px 14px;border:1px solid var(--prts-line);border-radius:4px;color:var(--prts-ink);background:var(--prts-panel-raised);}& [data-prts-emblem-actions] button:disabled{opacity:.45;}& [data-prts-custom-emblem] h4{margin:8px 0 12px;font:600 14px/1.5 var(--prts-body);}& [data-prts-emblem-list]{display:grid;gap:10px;list-style:none;padding:0;margin:14px 0;}& :is([data-prts-emblem-list] > li,[data-prts-emblem-hero-row]){display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;border:1px solid var(--prts-line);border-radius:4px;}& :is([data-prts-emblem-list],[data-prts-emblem-hero-row]) canvas{width:48px;height:48px;flex:none;border-radius:3px;}& :is([data-prts-emblem-list] > li,[data-prts-emblem-hero-row]) > span{flex:1;min-width:100px;overflow-wrap:anywhere;font-size:13px;}& [data-emblem-action]{padding:7px 10px;border:1px solid var(--prts-line);border-radius:4px;background:var(--prts-panel-raised);color:var(--prts-ink);}& [data-emblem-action]:disabled{opacity:.4;}& [data-prts-emblem-reorder]{padding:0;border:0;background:transparent;cursor:grab;}& [data-emblem-key]{touch-action:none;cursor:grab;user-select:none;-webkit-touch-callout:none}& [data-prts-emblem-reorder]:focus-visible{outline:2px solid var(--prts-ink);outline-offset:3px;}& [data-prts-emblem-sorting]{user-select:none;}& [data-prts-emblem-dragging]{opacity:.35;border-style:dashed !important;}& [data-prts-emblem-drag-ghost]{background:var(--prts-panel-raised);box-shadow:0 8px 28px #0005;opacity:.95;}& :is([data-prts-emblem-reset-confirm],[data-prts-emblem-workspace],[data-prts-emblem-discard]){position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 32px));max-height:80dvh;box-sizing:border-box;overflow:auto;padding:24px;border:1px solid var(--prts-line);border-radius:8px;background:var(--prts-panel-raised);color:var(--prts-ink);box-shadow:0 16px 64px #0008;font:13px/1.7 var(--prts-body);}& :is([data-prts-emblem-reset-confirm],[data-prts-emblem-workspace],[data-prts-emblem-discard])::backdrop{background:#0008;}& [data-prts-emblem-reset-confirm]{& > strong{display:block;font-size:16px;}& > p{margin:12px 0 18px;}& > [data-prts-emblem-actions]{justify-content:flex-end;padding-top:16px;border-top:1px solid var(--prts-line);}& [data-prts-emblem-reset-cancel]{border:0;background:transparent;}& [data-emblem-action]{display:flex;gap:6px;padding:5px 10px;font-size:12px;background:transparent;}& [data-prts-emblem-reset-status]:empty{display:none;}}& [data-prts-emblem-reset-exports]{display:grid;gap:8px;margin:18px 0;}& [data-prts-emblem-reset-asset]{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--prts-line);border-radius:4px;}& [data-prts-emblem-reset-asset] > span{overflow-wrap:anywhere;line-height:1.5;}& [data-prts-emblem-reset-asset] canvas{width:36px;height:36px;border-radius:3px;}& [data-prts-emblem-workspace]{width:min(820px,calc(100vw - 24px));padding:0;max-height:90dvh;}
 & [data-prts-emblem-edit-header],& [data-prts-emblem-edit-bar]{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;}
 & [data-prts-emblem-edit-header]{border-bottom:1px solid var(--prts-line);}
 & [data-prts-emblem-edit-header] button{border:0;background:none;color:inherit;font-size:22px;}