@ash-qw/dsh-theme-prts 2.2.0 → 2.3.1

package/src/server/backgrounds.js

@@ -2,6 +2,7 @@ import { mkdir, readFile, writeFile, rename, rm } from 'node:fs/promises'
 import { join } from 'node:path'
 import { randomUUID } from 'node:crypto'
 import sharp from 'sharp'
+import { validBackgroundRegion } from '../shared/background-region.js'
 import { body, json, isBase64 } from './api.js'
 import { fault } from './emblems.js'
 
@@ -26,8 +27,11 @@ export async function createBackgroundService(directory) {
       const task = queue.then(async () => {
         if (!BACKGROUND_SLOTS.includes(data?.slot)) throw fault(400, '背景区域无效')
         if (data.revision !== state.revision) throw fault(409, '背景已在其他页面更新，请重新操作')
-        let entry = null, output
-        if (data.image !== null) {
+        const regionOnly = Object.hasOwn(data, 'region') && !Object.hasOwn(data, 'image')
+        if (Object.hasOwn(data, 'region') && !validBackgroundRegion(data.region)) throw fault(400, '背景保护区域无效')
+        if (regionOnly && !state[data.slot]) throw fault(400, '请先上传背景图片')
+        let entry = regionOnly ? { ...state[data.slot], region: data.region } : null, output
+        if (!regionOnly && data.image !== null) {
           if (!isBase64(data.image) || data.image.length > 14 * 1024 * 1024) throw fault(400, '请上传不超过 10 MB 的图片')
           const bytes = Buffer.from(data.image, 'base64')
           if (!bytes.length || bytes.length > 10 * 1024 * 1024) throw fault(400, '请上传不超过 10 MB 的图片')
@@ -37,22 +41,22 @@ export async function createBackgroundService(directory) {
             if (!['png', 'jpeg', 'webp', 'avif'].includes(metadata.format)) throw Error('format')
             const result = await input.rotate().resize({ width: 3840, height: 2160, fit: 'inside', withoutEnlargement: true }).webp({ quality: 86 }).toBuffer({ resolveWithObject: true })
             output = result.data
-            entry = { id: randomUUID(), width: result.info.width, height: result.info.height }
+            entry = { id: randomUUID(), width: result.info.width, height: result.info.height, region: data.region ?? null }
           } catch { throw fault(400, '无法读取图片，请使用 PNG、JPEG、WebP 或 AVIF（最多 4000 万像素）') }
         }
         const next = { ...state, revision: state.revision + 1, [data.slot]: entry }
         const temporary = configurationPath + '.' + randomUUID() + '.tmp'
         try {
-          if (entry) await writeFile(join(directory, entry.id + '.webp'), output, { mode: 0o600 })
+          if (output) await writeFile(join(directory, entry.id + '.webp'), output, { mode: 0o600 })
           await writeFile(temporary, JSON.stringify(next), { mode: 0o600 })
           await rename(temporary, configurationPath)
         } catch (error) {
-          if (entry) await rm(join(directory, entry.id + '.webp'), { force: true }).catch(() => {})
+          if (output) await rm(join(directory, entry.id + '.webp'), { force: true }).catch(() => {})
           throw error
         } finally { await rm(temporary, { force: true }).catch(() => {}) }
         const previous = state[data.slot]
         state = next
-        if (previous) await rm(join(directory, previous.id + '.webp'), { force: true }).catch(() => {})
+        if (previous && previous.id !== entry?.id) await rm(join(directory, previous.id + '.webp'), { force: true }).catch(() => {})
         for (const listener of listeners) { try { listener(state.revision) } catch {} }
         return snapshot()
       })

package/src/shared/background-region.js

@@ -0,0 +1,21 @@
+// Coordinates are fractions of the oriented, stored image.
+export function validBackgroundRegion(region) {
+  return region === null || (region && typeof region === 'object' && !Array.isArray(region)
+    && ['x','y','width','height'].every(key => Number.isFinite(region[key]))
+    && region.x >= 0 && region.y >= 0 && region.width > 0 && region.height > 0
+    && region.x + region.width <= 1.000001 && region.y + region.height <= 1.000001)
+}
+export function backgroundPlacement(imageWidth, imageHeight, width, height, region = null) {
+  if (![imageWidth,imageHeight,width,height].every(v => Number.isFinite(v) && v > 0)) return {x:0,y:0,width:0,height:0,clipped:false}
+  const scale = Math.max(width / imageWidth, height / imageHeight)
+  const w = imageWidth * scale, h = imageHeight * scale
+  const clamp = (v,a,b) => Math.max(a,Math.min(b,v))
+  const axis = (size, viewport, start, length, vertical = false) => {
+    const centered = (viewport-size)/2
+    if (!region) return centered
+    if (length*size > viewport) return clamp(vertical ? -start*size : viewport/2-(start+length/2)*size,viewport-size,0)
+    return clamp(centered, Math.max(viewport-size,-start*size), Math.min(0,viewport-(start+length)*size))
+  }
+  return {x:axis(w,width,region?.x,region?.width),y:axis(h,height,region?.y,region?.height,true),width:w,height:h,
+    clipped:Boolean(region && (region.width*w > width+.01 || region.height*h > height+.01))}
+}

package/src/styles/cursor.css

@@ -33,3 +33,11 @@
 html[data-dsh-prts] :is([data-prts-emblem-sort-active],[data-prts-emblem-sort-active] *) {
   cursor: var(--prts-sort-cursor, grabbing) !important;
 }
+
+/* The crop surface uses one native cursor family, including during pointer capture. */
+html[data-dsh-prts] [data-prts-region-stage] { cursor:default; }
+html[data-dsh-prts] [data-prts-region-stage] [data-prts-region-box] { cursor:move; }
+html[data-dsh-prts] [data-prts-region-stage] [data-prts-region-handle] { cursor:ns-resize!important; }
+html[data-dsh-prts] [data-prts-region-stage] :is([data-prts-region-handle="e"],[data-prts-region-handle="w"]) { cursor:ew-resize!important; }
+html[data-dsh-prts] [data-prts-region-stage] :is([data-prts-region-handle="nw"],[data-prts-region-handle="se"]) { cursor:nwse-resize!important; }
+html[data-dsh-prts] [data-prts-region-stage] :is([data-prts-region-handle="ne"],[data-prts-region-handle="sw"]) { cursor:nesw-resize!important; }

package/src/styles/custom-background.css

@@ -1,18 +1,18 @@
 /* Viewport-aligned wallpaper. */
 html[data-dsh-prts] { --prts-background-wash: color-mix(in srgb, var(--prts-canvas) var(--prts-background-shade, 45%), transparent); }
 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) center / cover fixed;
+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] {
---prts-wall-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:calc((var(--prts-sidebar-width,280px) + var(--prts-nav-width) - var(--prts-wall-width)) / 2);
-& :is([data-prts-region="sessions"],[data-prts-nav-rail]){background:linear-gradient(var(--prts-background-wash),var(--prts-background-wash)),var(--prts-background-sidebar) var(--prts-wall-x) center / var(--prts-wall-width) auto no-repeat}
-& [data-prts-region="sessions"]{background-position:center,calc(var(--prts-wall-x) - var(--prts-nav-width)) center}
+--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));
+& :is([data-prts-region="sessions"],[data-prts-nav-rail]){background:linear-gradient(var(--prts-background-wash),var(--prts-background-wash)),var(--prts-background-sidebar) var(--prts-wall-x) var(--prts-protected-sidebar-y, 50%) / var(--prts-wall-width) auto no-repeat}
+& [data-prts-region="sessions"]{background-position:center,calc(var(--prts-wall-x) - var(--prts-nav-width)) var(--prts-protected-sidebar-y, 50%)}
 }
 html[data-dsh-prts][data-prts-rail-mode="overlay"]:is([data-prts-background-mode="split"][data-prts-background-sidebar],[data-prts-background-mode="full"][data-prts-background-full]) [data-prts-nav-rail] { background: transparent; }
 html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conversation] [data-prts-region="operation"] {
-background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-conversation) center / cover no-repeat;
+background: linear-gradient(var(--prts-background-wash), var(--prts-background-wash)), var(--prts-background-conversation) var(--prts-protected-conversation-x, 50%) var(--prts-protected-conversation-y, 50%) / cover no-repeat;
 }
 html[data-dsh-prts][data-prts-background-mode="full"][data-prts-background-full] [data-prts-ambient-layer],
 html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conversation] [data-prts-ambient-layer] { display: none !important; }
@@ -34,13 +34,23 @@ html[data-dsh-prts][data-prts-background-mode="split"][data-prts-background-conv
 [data-prts-background-images] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
 [data-prts-background-card="full"] { grid-column: 1 / -1; }
 [data-prts-background-card-heading] { display: flex; justify-content: space-between; align-items: center; min-height: 30px; margin-bottom: 6px; font-size: 13px; }
-[data-prts-background-upload] { position: relative; display: grid; place-items: center; width: 100%; height: 120px; padding: 0; border: 1px dashed var(--prts-line); border-radius: 8px; color: var(--prts-muted); background: var(--prts-panel); overflow: hidden; cursor: pointer; }
-[data-prts-background-card="full"] [data-prts-background-upload] { height: 155px; }
-[data-prts-background-upload][data-has-image] { border-style: solid; }
-[data-prts-background-upload]:hover { border-color: var(--prts-cyan); color: var(--prts-ink); }
-[data-prts-background-thumbnail] { position: absolute; inset: 0; background: center / cover no-repeat; }
-[data-prts-background-caption] { position: relative; padding: 6px 12px; border-radius: 5px; font-size: 12px; }
-[data-has-image] [data-prts-background-caption] { align-self: end; justify-self: end; margin: 8px; background: var(--prts-panel); color: var(--prts-ink); box-shadow: 0 1px 5px #0003; }
+[data-prts-background-image-controls] { position:relative;display:grid;place-items:center;min-height:140px;border:1px dashed var(--prts-line);border-radius:8px;background:var(--prts-panel);overflow:hidden; }
+[data-prts-background-card="full"] [data-prts-background-image-controls] { min-height:180px; }
+[data-prts-background-image-controls][data-has-image] { border-style:solid; }
+[data-prts-background-thumbnail] { position:absolute;inset:0;background:center / cover no-repeat;pointer-events:none; }
+[data-prts-background-empty] {font-size:12px;color:var(--prts-muted);padding-bottom:40px}
+[data-has-image] [data-prts-background-empty] {visibility:hidden}
+/* One compact toolbar stays legible over either bright or dark photography. */
+[data-prts-background-image-actions] {position:absolute;bottom:10px;right:10px;display:flex;align-items:center;gap:2px;padding:2px;border:1px solid #ffffff26;border-radius:7px;background:rgb(20 26 30 / 82%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 8px #0002;color:#edf2f3}
+[data-prts-background-image-actions] button {display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:26px;padding:4px 7px;border:0;border-radius:5px;background:transparent;color:inherit;box-shadow:none;font:500 11px/1.2 var(--prts-body);white-space:nowrap;cursor:pointer;transition:background-color 120ms ease,color 120ms ease}
+[data-prts-background-image-actions] button + button {position:relative}
+[data-prts-background-image-actions] button + button::before {content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:1px;background:#ffffff24}
+[data-prts-background-image-actions] button[hidden] + button::before {display:none}
+[data-prts-background-image-actions] svg {width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
+[data-prts-background-image-actions] button:hover {background:#ffffff18;color:#fff}
+[data-prts-background-image-actions] button:active {background:#ffffff28}
+[data-prts-background-image-actions] button:disabled {opacity:.45;cursor:wait}
+[data-prts-background-settings] [data-prts-background-image-actions] button:focus-visible {outline:2px solid #b9e6ee;outline-offset:-2px}
 [data-prts-background-remove] { padding: 4px 8px; background: transparent; color: var(--prts-muted); border: 0; border-radius: 4px; font-size: 12px; cursor: pointer; }
 [data-prts-background-remove]:hover { color: var(--prts-red); background: color-mix(in srgb, var(--prts-red) 8%, transparent); }
 [data-prts-background-shade] { display: grid; gap: 8px; font-size: 13px; padding-top: 14px; border-top: 1px solid var(--prts-line); }
@@ -329,3 +339,63 @@ animation: prts-baker-typing 1.2s linear infinite;
 33% { background: currentColor; box-shadow: -10px 0 0 color-mix(in srgb,currentColor 30%,transparent), 10px 0 0 color-mix(in srgb,currentColor 30%,transparent); }
 66% { background: color-mix(in srgb,currentColor 30%,transparent); box-shadow: -10px 0 0 color-mix(in srgb,currentColor 30%,transparent), 10px 0 0 currentColor; }
 }
+
+/* Keep the hero treatment beside the background readability controls. */
+html[data-dsh-prts] [data-prts-background-hero-setting] {
+  padding:16px 0 2px; border-top:1px solid var(--prts-line);
+  & [data-prts-setting-row] { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px; margin:0; padding:0; border:0; background:none; }
+  & [data-prts-setting-row] > span { display:grid; gap:5px; min-width:0; }
+  & strong { font:500 13px/1.5 var(--prts-body); color:var(--prts-ink); }
+  & small { max-width:36em; font:400 12px/1.6 var(--prts-body); color:var(--prts-muted); }
+  & [data-prts-setting-switch] { justify-self:end; align-self:center; margin:0; }
+}
+html[data-dsh-prts] [data-prts-background-hero-setting][hidden] { display:none; }
+
+/* Windows chrome must not clip a different canvas color into the conversation. */
+html[data-dsh-prts][data-windows-titlebar] [data-prts-region="operation"] { border-radius: 0; }
+
+[data-prts-region-editor] { width:min(1000px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);box-sizing:border-box;margin:auto;padding:24px;border:1px solid var(--prts-line);border-radius:14px;background:var(--prts-panel);color:var(--prts-ink);overflow:auto; }
+[data-prts-region-editor]:not([open]) {display:none}
+[data-prts-region-editor]::backdrop {background:#0009;backdrop-filter:blur(5px)}
+[data-prts-region-editor] > header {display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:24px}
+[data-prts-region-editor] > header strong {font-size:18px}
+[data-prts-region-workspace] {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr);gap:28px}
+[data-prts-region-original],[data-prts-region-samples] {display:grid;align-content:start;gap:12px;min-width:0}
+[data-prts-region-original] {padding:0 8px 0 24px}
+[data-prts-region-stage] {margin:24px 0 12px}
+[data-prts-region-preview-grid] {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:start;margin-top:12px}
+[data-prts-region-preview-grid] figure {display:grid;justify-items:center;align-content:start;gap:12px;margin:0;min-width:0}
+[data-prts-region-preview-grid] figcaption {font-size:11px;color:var(--prts-muted)}
+[data-prts-region-editor] > footer {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--prts-line)}
+[data-prts-region-editor] > footer > span {flex:1}
+[data-prts-region-ruler] {position:absolute;pointer-events:none;color:var(--prts-muted);font:10px/1 var(--prts-mono)}
+[data-prts-region-ruler="x"] {left:0;right:0;top:-20px;height:10px;border-bottom:1px solid var(--prts-line)}
+[data-prts-region-ruler="y"] {top:0;bottom:0;left:-24px;width:16px;border-right:1px solid var(--prts-line)}
+[data-prts-region-ruler] span,[data-prts-region-ruler] b {position:absolute;font-weight:400}
+[data-prts-region-ruler="x"] span,[data-prts-region-ruler="x"] b {transform:translateX(-50%)}
+[data-prts-region-ruler="y"] span,[data-prts-region-ruler="y"] b {transform:translateY(-50%)}
+[data-prts-region-ruler] b {background:var(--prts-panel);color:var(--prts-cyan);z-index:1}
+@media(max-width:760px){[data-prts-region-editor]{padding:18px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}[data-prts-region-workspace]{grid-template-columns:1fr}[data-prts-region-preview-grid]{grid-template-columns:1fr 1fr}[data-prts-region-editor] > footer > span{display:none}}
+[data-prts-region-editor] p { margin:0;font-size:12px;color:var(--prts-muted); }
+[data-prts-region-stage] { position:relative;max-width:100%;justify-self:center;touch-action:none;user-select:none;cursor:default; }
+[data-prts-region-stage] img { display:block;width:100%;height:auto;pointer-events:none; }
+[data-prts-region-box] { position:absolute;box-sizing:border-box;border:2px solid #fff;outline:1px solid #111;box-shadow:0 0 0 1px #111;background:#ffffff08;cursor:move;touch-action:none; }
+[data-prts-region-box] > span { position:absolute;top:4px;left:4px;background:#111b;color:#fff;font-size:10px;white-space:nowrap;pointer-events:none; }
+[data-prts-region-handle] { position:absolute;width:16px!important;height:16px!important;min-width:0!important;padding:0!important;border:1px solid #111!important;background:#fff!important;border-radius:3px!important;touch-action:none; }
+[data-prts-region-handle="nw"] {left:-8px;top:-8px;cursor:nwse-resize}
+[data-prts-region-handle="ne"] {right:-8px;top:-8px;cursor:nesw-resize}
+[data-prts-region-handle="sw"] {left:-8px;bottom:-8px;cursor:nesw-resize}
+[data-prts-region-handle="se"] {right:-8px;bottom:-8px;cursor:nwse-resize}
+[data-prts-region-preview] { position:relative;justify-self:center;max-width:100%;overflow:hidden;background-repeat:no-repeat;border:1px solid var(--prts-line);box-sizing:content-box; }
+[data-prts-region-preview] i { position:absolute;border:1px solid #fff;box-shadow:0 0 0 1px #111;box-sizing:border-box;pointer-events:none; }
+[data-prts-region-actions] { display:flex;gap:8px;flex-wrap:wrap; }
+[data-prts-region-editor] button { padding:6px 10px;border:1px solid var(--prts-line);border-radius:5px;background:var(--prts-panel);color:var(--prts-ink);cursor:pointer;font-size:12px; }
+[data-prts-region-save] { border-color:var(--prts-cyan)!important; }
+[data-prts-region-status]:empty {display:none}
+
+[data-prts-region-editor="sidebar"] [data-prts-region-preview-grid] {grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
+
+[data-prts-region-handle="n"] {left:50%;top:-8px;transform:translateX(-50%);cursor:ns-resize}
+[data-prts-region-handle="s"] {left:50%;bottom:-8px;transform:translateX(-50%);cursor:ns-resize}
+[data-prts-region-handle="w"] {left:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}
+[data-prts-region-handle="e"] {right:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}

package/src/styles/prts.css

@@ -1907,12 +1907,12 @@ html[data-dsh-prts][data-prts-conversation-style="deck-chat"] {
   & [data-message-role="assistant"]::after,
   & :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]::before,
   & [data-message-role="user"]::before {
-    content: ""; position: absolute; top: 0; left: -9px; width: 10px; height: 18px; pointer-events: none;
+    content: ""; position: absolute; top: 0; left: -10px; width: 10px; height: 18px; pointer-events: none;
     background: var(--prts-bubble-surface, var(--prts-chat-user-surface));
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M0 0H10V18Q10 6 0 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
   }
   & :is([data-chat-flow-kind="user"], [data-submission-echo]:not([data-pending-steering])) [class$="_bubble"]::before,
-  & [data-message-role="user"]::before { left: auto; right: -9px; transform: scaleX(-1); }
+  & [data-message-role="user"]::before { left: auto; right: -10px; transform: scaleX(-1); }
 }
 
 /* The upstream component replaces only the composer's two background plates. */

package/src/styles/refinement.css

@@ -393,6 +393,12 @@ html[data-dsh-prts] [data-prts-conversation-control="danger"] {
 }
 
 /* Empty session: emblem owns the upper field, composer anchors in the lower third. */
+/* Reserve the native blank header before session restoration adds its controls.
+   Otherwise its height grows from 0 to 40px after the emblem has been positioned. */
+html[data-dsh-prts] [data-phase="hero"] > [data-slot="conversation.header"] > header {
+  min-height: 40px;
+}
+
 html[data-dsh-prts] [data-prts-hero-active] {
   --prts-hero-narrow-spacer: clamp(24px, 8dvh, 72px);
   --prts-hero-wide-spacer: clamp(96px, 22dvh, 340px);
@@ -482,3 +488,25 @@ html[data-dsh-prts][data-prts-conversation-style="deck-chat"] :is([class$="_bubb
   padding:2px 7px!important;border-radius:6px!important;
   &:is(:hover,:focus-visible){border-color:var(--prts-cyan)!important}
 }
+
+/* Notification cards own one surface across the disclosure and its content. */
+html[data-dsh-prts] [data-turn-trigger] {
+  background:var(--prts-glass-soft-surface);
+  border:1px solid var(--prts-line);
+  border-radius:var(--dsw-radius-xl,16px);
+  -webkit-backdrop-filter:blur(12px);
+  backdrop-filter:blur(12px);
+  color:var(--prts-ink);
+  & > button {
+    background:transparent;
+    border:0;
+    border-radius:inherit;
+    color:inherit;
+    &:hover { background:color-mix(in srgb,var(--prts-ink) 5%,transparent); }
+    &:focus-visible { outline:2px solid var(--prts-cyan); outline-offset:-3px; }
+    & time { color:var(--prts-muted); }
+  }
+  & > div { border-top:1px solid var(--prts-line); }
+  & > div > p { color:var(--prts-muted); }
+  & [data-context-text] { color:var(--prts-ink); }
+}

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

@@ -757,9 +757,9 @@ html[data-dsh-prts] [data-prts-theme-settings] {
 & [data-prts-reset-confirm] > span { flex-basis:100%; }
 @media(max-width:720px) {
 & [data-prts-settings-sidebar] { flex-direction:row; border:0; border-bottom:1px solid var(--prts-line); }
-& [data-prts-settings-nav] { flex:1; padding:8px 4px; border:0; }
+& [data-prts-settings-nav] { flex:1; min-width:0; overflow-x:auto; padding:8px 4px; border:0; }
 & [data-prts-settings-jump] { padding:10px 8px; }
-& [data-prts-settings-actions] { margin:0; padding:8px 4px; align-self:center; }
+& [data-prts-settings-actions] { flex:0 0 auto; white-space:nowrap; margin:0; padding:8px 4px; align-self:center; }
 & [data-prts-reset-confirm], & [data-prts-persistence-error] { left:auto; right:8px; top:100%; bottom:auto; max-width:calc(100vw - 32px); }
 }
 & [data-prts-reset-zone] { padding: 0; }
@@ -929,3 +929,88 @@ html[data-dsh-prts] [data-prts-ai-tools] blockquote { margin:12px 0;padding:8px
 html[data-dsh-prts] [data-prts-ai-tools] summary { cursor:pointer; }
 html[data-dsh-prts] [data-prts-ai-tools] dt { margin-top:12px; }
 html[data-dsh-prts] [data-prts-ai-tools] dd { margin:3px 0 0; }
+
+html[data-dsh-prts] [data-prts-transfer] {
+  display: grid;
+  gap: 16px;
+  padding-block: 16px;
+  & header { display: grid; gap: 8px; }
+  & p, & small { margin: 0; color: var(--prts-muted); line-height: 1.7; overflow-wrap: anywhere; }
+  & label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
+  & input[type="file"] { max-width: 100%; min-width: 0; }
+  & input[type="checkbox"] { accent-color: var(--prts-yellow); }
+  & button { justify-self: start; padding: 8px 14px; border: 1px solid var(--prts-line-strong); border-radius: 0; background: var(--prts-panel-raised); color: var(--prts-ink); font: inherit; cursor: pointer; }
+  & button:hover:not(:disabled) { border-color: var(--prts-yellow); }
+  & button:focus-visible { outline: 2px solid var(--prts-yellow); outline-offset: 3px; }
+  & button:disabled { opacity: .55; cursor: wait; }
+  & [data-prts-transfer-export], & [data-prts-transfer-apply] { border-color: var(--prts-yellow); }
+  & hr { width: 100%; border: 0; border-top: 1px solid var(--prts-line); }
+  & [data-prts-transfer-preview], & [data-prts-transfer-recovery] { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--prts-line); }
+  & [hidden] { display: none !important; }
+}
+
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
+html[data-dsh-prts] [data-prts-transfer-open] { display:flex; align-items:center; gap:8px; width:100%; padding:10px 8px; background:none; border:1px solid var(--prts-line); border-radius:4px; color:var(--prts-ink); font:500 12px/1.4 var(--prts-body); cursor:pointer; }
+html[data-dsh-prts] [data-prts-transfer-open]:hover { border-color:var(--prts-yellow); }
+html[data-dsh-prts] [data-prts-transfer-dialog] { box-sizing:border-box; width:min(660px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; border:1px solid var(--prts-line-strong); border-radius:8px; background:var(--prts-canvas); color:var(--prts-ink); box-shadow:0 24px 80px #0006; font:13px/1.6 var(--prts-body); overflow:auto; }
+html[data-dsh-prts] [data-prts-transfer-dialog]::backdrop { background:#0007; }
+html[data-dsh-prts] [data-prts-transfer] {
+  padding:24px; gap:20px;
+  & [data-prts-transfer-heading] { display:flex; align-items:center; justify-content:space-between; gap:16px; }
+  & h2 { margin:4px 0 0; font-size:20px; line-height:1.4; }
+  & h3 { margin:0; font-size:14px; }
+  & [data-prts-transfer-close] { padding:2px 10px; font-size:24px; border:0; background:none; }
+  & [data-prts-transfer-columns] { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
+  & [data-prts-transfer-card] { display:flex; flex-direction:column; gap:12px; min-width:0; }
+  & [data-prts-transfer-card] + section { padding-left:24px; border-left:1px solid var(--prts-line); }
+  & [data-prts-transfer-card] > button { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
+  & [data-prts-transfer-option] { align-items:flex-start; flex-wrap:nowrap; padding:12px 0 0; }
+  & [data-prts-transfer-option] input { margin:5px 0 0; }
+  & [data-prts-transfer-option] small { display:block; margin-top:4px; }
+  & [data-prts-transfer-file-hint] { display:grid; place-items:center; flex:1; gap:6px; padding:12px; border:1px dashed var(--prts-line-strong); }
+  & [data-prts-transfer-file-hint] > span { font-size:24px; color:var(--prts-muted); }
+  & [data-prts-transfer-buttons] { display:flex; gap:8px; }
+  & [data-prts-transfer-recovery] { border:0; border-top:1px solid var(--prts-line); padding:16px 0 0; }
+  & [data-prts-transfer-status]:empty { display:none; }
+}
+@media(max-width:720px) {
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-body] { grid-template-rows:auto minmax(0,1fr) auto; }
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-sidebar] { display:contents; }
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-nav] { grid-row:1; }
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-theme-settings-scroll] { grid-row:2; }
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] { grid-row:3; position:relative; flex-direction:row; align-items:center; justify-content:space-between; padding:12px 16px; border-top:1px solid var(--prts-line); background:var(--prts-canvas); }
+  html[data-dsh-prts] [data-prts-transfer-open] { width:auto; }
+  html[data-dsh-prts] [data-prts-theme-settings] :is([data-prts-reset-confirm],[data-prts-persistence-error]) { top:auto; bottom:100%; }
+}
+@media(max-width:540px) {
+  html[data-dsh-prts] [data-prts-transfer] { padding:20px; }
+  html[data-dsh-prts] [data-prts-transfer] [data-prts-transfer-columns] { grid-template-columns:1fr; gap:20px; }
+  html[data-dsh-prts] [data-prts-transfer] [data-prts-transfer-card] + section { padding:20px 0 0; border-left:0; border-top:1px solid var(--prts-line); }
+}
+
+/* Shared quiet actions below the settings categories. */
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] {
+  padding:12px 10px; gap:2px; border-top:1px solid var(--prts-line);
+}
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action] {
+  display:flex; align-items:center; justify-content:flex-start; gap:10px;
+  width:100%; min-height:40px; padding:10px; margin:0;
+  border:0; border-radius:5px; clip-path:none; box-shadow:none;
+  background:transparent; color:var(--prts-muted);
+  font:500 12px/1.4 var(--prts-body); text-align:left; cursor:pointer;
+}
+html[data-dsh-prts] [data-prts-footer-action] svg {
+  width:16px; height:16px; flex:none; fill:none; stroke:currentColor;
+  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
+}
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action]:hover {
+  background:var(--prts-panel-raised); color:var(--prts-ink);
+}
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action]:focus-visible {
+  outline:2px solid var(--prts-yellow); outline-offset:-2px;
+}
+html[data-dsh-prts] [data-prts-theme-settings] [data-prts-footer-action][hidden] { display:none; }
+@media(max-width:720px) {
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-settings-actions] { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px 12px; }
+  html[data-dsh-prts] [data-prts-theme-settings] [data-prts-reset-zone] { width:100%; }
+}